Website Workshop Teil 4

Website Workshop Teil 4

Das HTML Grundgerüst

Wie setzt sich eine html Datei zusammen? Es gibt dabei einen unsichtbaren und einen sichtbaren Teil. Der Unsichtbare definiert den Dokumententyp und eine Kopfbereich <head>. Der eigentliche Rumpf <body> ist sichtbar. Alle dort enthaltenen Texte und html Tags sind sichtbar.

Schauen wir uns daher diesen Aufbau kurz an:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-de" lang="de-de" dir="ltr" >
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="Foto, Photo, Portfolio, Tipps, Tricks, Demoseite, Website Workshop" />
<meta name="description" content="Blende 3.5 - Die Demoseite zum Website Workshop" />
<title>Willkommen auf Blende 3.5</title>
<link rel="stylesheet" href="/nochkeine.css" type="text/css" />
</head>
<body>

Dies ist der eigentliche sichtbare Teil. Dieser Text steht innerhalb des body Tags.

</body>
</html>


Fangen wir ganz oben an:

  • Eine xml Deklaration, Version und das wir UTF-8 als Zeichensatz benutze.
  • Der Doc-Type, hier benutzen wir XHTML 1.0 Transitional.
  • Der Start Tag <html ..... .... >
  • Der Kopfbereich <head>. Dort sind die Meta Tags enthalten. Bei keywords werden für die Suchmaschinen auf die Website zutreffenden Stichworte reingeschrieben --> müsst ihr anpassen. Unter description eine Beschreibung. Diese Beschreibung taucht dann bei Google & Co. auf. --> Müsst ihr anpassen.
  • <title> ist der Titel der Seite die in der Browser-Kopfleiste angezeigt wird --> Müsst ihr anpassen.
  • Bei link eine Anweisung das wir ein externes Stylesheet benutzen.
  • Nun endlich der body Tag mit anschließenden sichtbaren Bereich. Als Beispiel ein beliebiger Text.
  • Der End-Tag </body>, heißt hier ist der body Bereich zu Ende.
  • Der End-Tag </html>, heißt hier ist der html Bereich zu Ende.


Demo 1
wie das dann im Browser dargestellt wird

Container in der index.html ergänzen

Den oben genannten Code-Teil speichern wir uns als index.html ab. Nun ergänzen wir die benötigten Container Anweisungen (wie im Bild von Teil 3 dargestellt). Der folgende Code-Teil kommt innerhalb des <body> Tags.

<div id="toprow">
<div id="header">

</div>
</div>

<div id="middlerow">
<div id="content">
<div id="leftcol">
<div id="menue">

</div>
</div>
<div id="rightcol">

</div>
</div>
</div>

<div id="bottomrow">
<div id="footer">

</div>
</div>


Merke: Die einzelnen <div> Container haben eine sog. ID, z.B. id="toprow". Diese ID's dürfen vom Namen her nur einmal im html Dokument vorkommen. Möchte man diese mehrmals benutzen sind Klassen einzusetzen, z.B. class="meineklasse". Die Container fangen immer mit einem <div> an und enden mit </div>. Der Schrägstrich / gibt an, das hier der Container geschlossen wird. Das gilt auch für andere html Tags.

Nun gilt es noch die Texte, Links, Grafiken etc. einzufügen.

  • Texte,Absätze werden mit dem p Tag ergänzt, <p>Dies ist ein Beispieltext</p>
  • Überschriften mit h1, h2, h3 usw., <h1>Meine Überschrift</h1>
  • Grafiken mit dem img Tag, <img src="/bilddatei.jpg" mce_src="bilddatei.jpg" alt="ein Bild" />
  • Links mit dem a Tag, <a href="/portfolio.html" mce_href="portfolio.html">Dies ist ein Linktext</a>

Der komplette Code der Index.html sieht nun so aus: Zur besseren Übersicht habe ich die einzelnen Tags eingerückt um die Verschachtelung zu verdeutlichen.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-de" lang="de-de" dir="ltr" >
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="Foto, Photo, Portfolio, Tipps, Tricks, Demoseite, Website Workshop" />
<meta name="description" content="Blende 3.5 - Die Demoseite zum Website Workshop" />
<title>Willkommen auf Blende 3.5</title>
<link rel="stylesheet" href="/style.css" type="text/css" />
</head>
<body>

<div id="toprow">
<div id="header">
<a href="/index.html"><img src="/images/logo.jpg" alt="Logo" class="logo" /></a>
<h1>Blende <span class="gray">3.</span><span class="lightred">5</span></h1>
<h2>Die Demoseite zum Website Workshop</h2>
</div>
</div>

<div id="middlerow">
<div id="content">
<div id="leftcol">
<div id="menue">
<ul>
<li><a href="/index.html">Startseite</a></li>
<li><a href="/portfolio.html">Portfolio</a></li>
<li><a href="/service.html">Service</a></li>
<li><a href="/impressum.html">Impressum</a></li>
</ul>
</div>
<a href="/portfolio.html"><img src="/images/entdecke.jpg" alt="Entdecke mehr..." title="Zum Portfolio" /></a>
</div>
<div id="rightcol">
<h3>Willkommen</h3>
<p>Besuchen Sie doch unsere Portfolio Seite. Dort stellen wir unsere Arbeiten und Fotografien vor.  
Nach dem Motto - <a href="/portfolio.html">Entdecke mehr ...</a></p>
<p>Ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo  
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<br class="clearer" />
</div>
</div>

<div id="bottomrow">
<div id="footer">
<span class="webicons">
<a href="http://de-de.facebook.de"><img src="/images/facebook.jpg" alt="Facebook" title="Facebook" /></a>
<a href="http://twitter.com"><img src="/images/twitter.jpg" alt="Twitter" title="Twitter" /></a>
<a href="http://www.flickr.com"><img src="/images/flickr.jpg" alt="Flickr" title="Flickr" /></a>
</span>
<p>Eine Demoseite zum Website Workshop von <a href="http://www.youmonster.de">www.youmonster.de</a>.  
Vielen Dank an die User<br />der Photo-Community <a href="http://www.photo-monster.de">www.photo-monster.de</a>
für die rege Beteiligung und Unterstützung.</p>
<p>| <a href="http://validator.w3.org/">xhtml valide</a> | <a href="http://jigsaw.w3.org/css-validator/">css 2.1 valide</a> |</p>
<br class="clearer" />
</div>
</div>

</body>
</html>


Hier sieht man nun schon den Vorteil, wenn man mit Containern div's arbeitet. Der Code ist übersichtlich und schlank. Würde man wie früher mit Tabellen arbeiten, wäre dies um ein vielfaches komplexer.

Wichtig: Man achte darauf, das die einzelnen html Tags auch immer geschlossen sind. Eine häufige Fehlerquelle ist, dass die End-Tags manchmal vergessen werden. Die Browser interpretieren dies unterschiedlich und das ganze Layout könnte dadurch zerschossen werden.

Demo 2 wie das dann im Browser dargestellt wird.

Für einige wird die Darstellung ein Schock sein. Alles ist einfach untereinander gesetzt und mit dem grafischen Entwurf hat dies sehr wenig zu tun.

Im fünften Teil, werden wir daher der Seite mittels eines externen Stylesheets Form und Farbe geben.

 
Diese Website benutzt Cookies. Wenn du die Website weiter nutzt, gehen wir von deinem Einverständnis aus. Mehr Information findest du in unserer Datenschutzerklärung.
OK