1 HTML-Grundlagen. 1.1 Grundstruktur eines HTML-Dokuments. 1.2 Dokumenttyp-Deklaration. 1.3 HTML-Elemente

Transkript

1 Seite 1 / Grundlagen Das World Wide Web (WWW) besteht aus einer gewaltigen Menge von Dokumenten, die durch Querverweise (Hyperlink bzw. Link) miteinander verknüpft sind. Stößt ein Leser in einem Dokument auf einen Link, kann er wie in einem Buch einfach weiter lesen oder bei Interesse dem Link zu einem weiteren Dokument folgen, das weitergehende Informationen bereitstellt. Damit Computerprogramme verstehen, wie sie den Inhalt eines Dokuments, wie zum Beispiel Texte, Bilder oder Tabellen, darstellen sollen, muss der Inhalt vom Autor nach einem bestimmten Regelwerk formatiert werden. 5 (Hypertext Markup Language) ist eine solche Auszeichnungssprache. 1.1 Grundstruktur eines -Dokuments Ein -Dokument ist eine gewöhnliche Textdatei, deren Aufbau sich in drei Bereiche gliedert: 1) Dokumenttyp-Deklaration: Angabe der verwendeten -Version (Dokumenttyp-Deklaration) 2) Header (Dokumentkopf): Informationen für Browser bzw. Suchmaschinen, zum Beispiel: verwendeter Zeichensatz oder Titel des Dokuments 3) Body (Dokumentkörper): Inhalt der Webseite 1.2 Dokumenttyp-Deklaration Eine Dokumenttyp-Deklaration (DTD) gibt bekannt, nach welchem Regelwerk sich der strukturelle Aufbau eines Dokuments richtet. Auf diese Weise können Computerprogramme verstehen, wie der Inhalt eines Dokuments dargestellt werden soll. Für Dokumente, die auf 5 oder neueren -Versionen basieren, wird der Dokumenttyp wie folgt bekannt gegeben: <!DOCTYPE html> 1.3 -Elemente Die meisten -Elemente werden durch ein Tag-Paar markiert, das heißt durch einen Starttag und einen dazugehörigen Schlusstag. Jeder Starttag beginnt mit dem Kleiner-als-Zeichen (<). Anschließend folgt die eigentliche Bezeichnung des Tags sowie optional eine Liste seiner Attribute. Der Tag endet mit dem Größer-als-Zeichen (>)

2 Seite 2 / 22 Der Schlusstag entspricht prinzipiell dem Starttag, jedoch wird nach dem Kleiner-als- Zeichen ein Schrägstrich eingefügt (</). Außerdem kann ein Schlusstag keine Attribute beinhalten. -Element Starttag Inhalt Schlusstag <Tagname>Inhalt</Tagname> 1.4 Grundstruktur eines -Dokuments Nach der Dokumenttyp-Deklaration folgt das html-element. Dieses enthält den Dokumentkopf (head-element) und Dokumentkörper (body-element). <!DOCTYPE html>  <html> <head>  </head> <body>  </body> </html> Kommentare () werden vom Browser ignoriert und dienen der Erläuterung des -Quellcodes. 1.5 Zeichensatz Beim Speichern einer html-datei wird jedes Zeichen (Buchstabe, Ziffer, Sonderzeichen, ) zunächst mit Hilfe einer Übersetzungstabelle (Zeichensatz) in einen Zahlencode übersetzt. Dieser wird anschließend in eine Kombination aus Nullen und Einsen übersetzt und gespeichert. Beim Lesen der html-datei kehrt der Browser diese Vorgehensweise um. Da es verschiedene Zeichensätze gibt, ist es sinnvoll dem Browser mitzuteilen, welchen Zeichensatz das -Dokument verwendet. Andernfalls versucht der Browser dies selbst zu erkennen, was zu Problemen führen kann. Wir verwenden den Zeichensatz utf-8, der uns auch die unmittelbare Verwendung von Umlauten erlaubt. Zeichen, die nicht auf der Tastatur vorhanden sind, können mit Hilfe des Kürzels &# gefolgt von der im Unicode-Zeichensatz zugeordneten Nummer eingefügt werden. Zum Beispiel zeigt der Code &#8595 einen Pfeil nach rechts ( ).

3 Seite 3 / 22 Beim Erstellen einer -Datei muss dazu in dem jeweils verwendeten Texteditor utf8 als Kodierung ausgewählt werden (notepad++: Menü Kodierung Menüpunkt UTF-8). Unicode-Zeichensatz Nr. Zeichen Nr. Zeichen Nr. Zeichen Nr. Zeichen Nr. Zeichen 0 NUL J 97 a 120 x 9 (Tabulator) K 98 b 121 y 10 (Zeilenumbruch) L 99 c 122 z 13 (Return) M 100 d 123 { 32 (Leerzeichen) N 101 e ! O 102 f " P 103 g 126 ~ 35 # 58 : 81 Q 104 h 122 z 36 $ 59 ; 82 R 105 i 123 { 37 % 60 < 83 S 106 j & 61 = 84 T 107 k ' 62 > 85 U 108 l 126 ~ 40 ( 63? 86 V 109 m ) 87 W 110 n * 65 A 88 X 111 o B 89 Y 112 p , 67 C 90 Z 113 q D 91 [ 114 r 177 ± E 92 \ 115 s / 70 F 93 ] 116 t G 94 ^ 117 u H 95 _ 118 v I 96 ` 119 w 8595 Dem Browser teilen wir den verwendeten Zeichensatz mit Hilfe eines meta-tags im head- Element mit. Dieser Standalone-Tag besitzt lediglich das Attribut charset, jedoch keinen Inhalt und keinen Schlusstag. <head> <meta charset="utf-8"> </head>

4 Seite 4 / Titel Mit Hilfe des table-elements wird einem -Dokument ein Titel zugewiesen. Dieser Titel wird unter anderem in der Titelzeile des Browserfensters angezeigt, beim Setzen eines Lesezeichens als Name vorgeschlagen, in der Liste der bereits besuchten Seiten angezeigt und von Suchmaschinen ausgewertet und in der Trefferliste angezeigt. <head> <meta charset="utf-8"> <title> Kaufmännische Schule Tauberbischofsheim </title> </head> 1.7 Überschriften Um einen bestimmen Text als Überschrift zu kennzeichnen, können die -Elemente h1 bis h6 (headline) verwendet werden. Das h1-element steht dabei für eine Überschrift der 1. Ebene (vergleichbar dem Titel eines Buches), das h2-element für eine Überschrift der 2. Ebene (vergleichbar einer Kapitelüberschrift), das h3-element eine Überschrift der 3. Ebene (vergleichbar einer Unterkapitelüberschrift) usw. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> Kaufmännische Schule Tauberbischofsheim </title> </head> <body> <h1> Kaufmännische Schule Tauberbischofsheim </h1> <h2> Herzlich Willkommen </h2> </body> </html>

5 Seite 5 / Textabsatz (<p>) und Zeilenumbruch (<br>) Mit Hilfe eines Absatzes lassen sich Texte strukturieren. Dazu wird der entsprechende Text in ein p-element (paragraph) eingeschlossen. <body> <h1> Kaufmännische Schule Tauberbischofsheim </h1> <h2> Herzlich Willkommen </h2> <p> Wir freuen uns über Ihr Interesse und hoffen Ihnen auf den folgenden Seiten einen kleinen Einblick in unsere Schule geben zu können. </p> </body> Soll innerhalb eines Absatzes ein Zeilenumbruch erfolgen, muss dies durch den Standalone-Tag <br> deutlich gemacht werden. Im Texteditor selbst muss an dieser Stelle keine neue Zeile begonnen werden, es erleichtert jedoch das Erkennen des Zeilenumbruchs im Quelltext. <p> Wir freuen uns über Ihr Interesse und<br> hoffen Ihnen auf den folgenden Seiten einen kleinen Einblick in unsere Schule geben zu können. </p>

6 Seite 6 / Grafik (<img>) Um eine Grafik in eine -Datei einzubinden, muss die Grafikdatei an der gewünschten Stelle im -Quelltext referenziert, d. h. eine Beziehung zur Grafik herstellen werden. Für Grafikreferenzen gibt es in den img-tag (img = image = Bild). Es handelt sich um einen Standalone-Tag ohne Elementinhalt und ohne End-Tag. Mit Hilfe der Attributen src (src = source = Quelle) und alt (alt = alternative = alternativ) bestimmen Sie nähere Einzelheiten der Grafikreferenz. Die zwei Attribute sind Pflicht und müssen immer angegeben werden: Mit dem Attribut src bestimmen Sie die gewünschte Grafikdatei. Wenn sich die Grafikdatei im gleichen Verzeichnis wie die -Datei befindet, in der die Grafikreferenz steht, genügt einfach die Angabe des Dateinamens der Grafik (src="eingang_sport_beck.jpg"). Das Referenzieren mit relativen oder absoluten Pfadangaben ist dann zwingend erforderlich, wenn die Grafikreferenz nicht in demselben Ordner wie die -Seite steht. Beispiel: <img src="img/logo.gif" alt="logo"> <img src="../img/logo.gif" alt="logo"> Die Datei steht im Ordner img, der sich im gleichen Ordner wie die aktuelle -Datei befindet. Die Datei steht im Ordner img, der sich auf der gleichen Ebene befindet, wie der Ordner, in dem die aktuelle -Datei gespeichert ist. <img src="img/eingang.jpg" alt="haupteingang Schule">

7 Seite 7 / Liste Aufzählungsliste - unordered list (<ul>) Listen dienen im Allgemeinen dazu, Schlagwörter übersichtlich darzustellen. Bei einer Aufzählungsliste werden alle Listeneinträge mit einem Aufzählungszeichen (Bullet) versehen. Der Tag <ul> (ul = unordered list = unsortierte Liste) leitet eine Aufzählungsliste ein. Innerhalb dieses Elements werden dann die einzelnen Aufzählungselemente jeweils in die Tags <li> und </li> (li = list item = Listeneintrag) eingeschlossen. Der Schlusstag </ul> beendet die Liste. <h3>menü</h3> <ul> <li>startseite</li> <li>bildungswege</li> <li>termine</li> <li>impressum</li> </ul>

8 Seite 8 / Nummerierte Liste - ordered list (<ol>) Bei einer nummerierten Liste werden alle Listeneinträge automatisch durchnummeriert. Der Tag <ol> (ol = ordered list = geordnete Liste) leitet eine nummerierte Liste ein, der Tag </ol> beendet sie. <h3>menü</h3> <ol> <li>startseite</li> <li>bildungswege</li> <li>termine</li> <li>impressum</li> </ol>

9 Seite 9 / Hyperlinks Eine der wichtigsten Eigenschaften von ist die Möglichkeit, Verweise zu definieren. Diese so genannten Hyperlinks können zu anderen Stellen im eigenen Projekt führen, aber auch zu beliebigen anderen Adressen im World Wide Web. <a href="index.html"> Startseite </a> Hyperlinks werden mit Hilfe des a-elements realisiert. Dem Attribut href (hyper reference) wird dabei das gewünschte Verweisziel zugewiesen. Zwischen den Tags <a> und </a> ist der Text zu notieren, mit dem der Anwender auf den Link verwiesen wird. <h3>menü</h3> <ul> <li> <a href="index.html">startseite</a> </li> <li> <a href="bildungswege.html">bildungswege</a> </li> <li> <a href="termine.html">termine</a> </li> <li> <a href="impressum.html">impressum</a> </li> </ul>

10 Seite 10 / 22 2 Cascading Style Sheets (CSS) Bis jetzt enthält unsere -Datei ausschließlich Informationen zu Gliederung und Inhalt der Webseite. Nun muss der Inhalt noch formatiert werden, damit die Webseite optisch ansprechender aussieht. Prinzipiell können Formatierungen mittels -Anweisungen direkt in der -Datei vorgenommen werden. Alternativ kann die Formatierung jedoch auch mit Hilfe von Cascading Style Sheets in eine eigene Datei ausgelagert werden. Dies hat den Vorteil, dass Formatierungen einheitlich für mehrere -Dokumente definiert werden können. Außerdem wird die -Datei nicht mit zusätzlichen Informationen überfrachtet und bleibt so übersichtlicher und pflegeleichter. 2.1 Verweis auf das Stylesheet Soll ein -Dokument mit Hilfe eines Stylesheet formatiert werden, muss im head- Element ein link-tag eingefügt werden, der auf die entsprechende css-datei verweist. <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> 2.2 -Elemente formatieren Im Stylesheet können nun für die verschiedenen -Elemente Formatierungen festgelegt werden. body { background-color: #FFFFB2; /* helles gelb */ font-family: Arial, Sans-Serif; CSS Im Beispiel wird für das body-element Schriftart, Textfarbe und Hintergrundfarbe festgelegt. Diese Werte vererbt das Eltern-Elements (hier: body-element) automatisch an alle seine Kind- Elemente (z. B. h1-element). Sie können jedoch durch eine spezialisierte Regel für das jeweilige Element überschrieben werden. body { background-color: #FFFFB2; /* helles gelb */ font-family: Arial, Sans-Serif; CSS h1 { background-color: #E50000; /* rot */ Im Beispiel überschreibt das h1-element die von seinem Eltern-Element body geerbte Hintergrundfarbe durch einen eigenen Wert.

11 Seite 11 / CSS-Eigenschaften CSS-Eigenschaft font-family font-size font-style font-weight text-decoration font-weight text-align vertical-align color background-color line-height border-style (*) Beschreibung Schriftart. Es können mehrere Alternativen angegeben werden, die dann verwendet werden, falls die jeweils vorangegangene nicht verfügbar ist. Schriftgröße (z. B. Schriftgröße 12 = 12pt) Schriftstil: italic normal = kursiver Schriftstil = normaler Schriftstil normal = normal bold = fett. bolder = extrafett. lighter = dünner. 100,200,300,400,500,600,700,800,900 = extra-dünn (100) bis extrafett (900). Erlaubt folgende Formatierungen: underline = unterstrichen overline = überstrichen. line-through = durchgestrichen. none = normal (keine Text-Dekoration). Legt fest, wie fett eine Schrift dargestellt wird. lighter = dünner als normal normal = normaler Schriftstil bold = fett bolder = extra fett Horizontale Ausrichtung eines Textabsatzes: left = linksbündig ausrichten (Voreinstellung) center = zentriert ausrichten right = rechtsbündig ausrichten justify = als Blocksatz ausrichten Bei Tabellenzellen oder anderen Elementen, die eine berechnete oder definierte Höhe haben können, wird häufig vertikale Ausrichtung oben, mittig oder unten bündig erforderlich. top = oben bündig ausrichten. middle = mittig ausrichten. bottom = unten bündig ausrichten. Textfarbe. Die Farbwerte können hexadezimal nach dem Schema #RRGGBB angegeben werden. Hintergrundfarbe. Die Farbwerte können hexadezimal nach dem Schema #RRGGBB angegeben werden. Zeilenhöhe (z. B. einfache Schriftgröße = 1, anderthalbfache Schriftgröße = 1.5, zweifache Schriftgröße = 2) Rahmentyp: none = kein Rahmen (bzw. unsichtbarer Rahmen). dotted = gepunktet dashed = gestrichelt solid = durchgezogen double = doppelt durchgezogen inset = 3D-Effekt outset = 3D-Effekt border-width (*) Rahmendicke (z. B. 1 Pixel = 1px) border-color (*) margin (*) Rahmenfarbe. Die Farbwerte können hexadezimal nach dem Schema #RRG- GBB angegeben werden. Abstand zum benachbarten Element bzw. Außenrand (z. B. 20 Pixel = 20px oder 1,5-fache Schriftgröße = 1.5em)

12 Seite 12 / 22 CSS-Eigenschaft float clear border-spacing padding (*) border-collapse list-style-type width Beschreibung Textumfluss. Nachfolgender Text kann das jeweilige Element umfließen: left = Element steht links und wird rechts davon von nachfolgenden Elementen umflossen. right = Element steht rechts und wird links davon von nachfolgenden Elementen umflossen. none = Kein Umfluss (Normaleinstellung). Beendet das Umfließen andere Elemente. Ein mit clear formatiertes Element ist das Erste, das nicht mehr neben anderen Elementen steht. Es kann aber trotzdem mit der float-eigenschaft formatiert werden, damit nachfolgende Elemente um dieses Element wieder herum fließen. left = Beendet ein vorangehendes float: left. rigth = Beendet ein vorangehendes float: right. both = Beendet ein vorangehendes float: left bzw. right. Legt den Abstand der Rahmen zwischen benachbarten Tabellenzellen fest. Legt den Abstand zwischen dem Inhalt und den Rändern (border) fest. Dieser Bereich wird mit der Hintergrundfarbe gefüllt, die für den Inhalt festgelegt ist. Legt fest, ob zwischen den Rahmen benachbarter Tabellenzellen ein Abstand zusehen ist oder nicht. collapse = kein Abstand separate = Abstand (wird durch border-spacing bestimmt) decimal = Nummerierung 1.,2.,3.,4. usw. lower-roman = Nummerierung i.,ii.,iii.,iv. usw. upper-roman = Nummerierung I.,II.,III.,IV. usw. lower-latin = Nummerierung a.,b.,c.,d. usw. ( lower-alpha) upper-latin = Nummerierung A.,B.,C.,D. usw. ( upper-alpha) disc = Aufzählungszeichen: gefüllter Kreis circle = Aufzählungszeichen: leerer Kreis square = Aufzählungszeichen: Rechteck none = keine Nummerierung Bestimmt die Breite eines Elements. Unter anderem sind folgende Wertangaben zulässig: Prozentuale relativ zur Fensterbreite, z. B. 50%; absolute in Pixeln, z. B. 30px oder absolute in Punkten, z. B. 12pt. (*) Soll sich die Eigenschaft nur auf bestimmte Seiten beziehen, kann dies durch die Angabe der entsprechenden Einschränkung [-top, -right, -bottom, -left] erreicht werden. Beispiel: border-top-width, border-left-color, margin-top, margin-bottom Farbcodes Zum Beispiel: Bilder horizontal zentrieren img { display: block; margin-left: auto; margin-right: auto; CSS

13 Seite 13 / 22 Aufgabe: Formatieren Sie die folgenden -Elemente wie folgt: -Element body h1 h2 h3 p img Formatierung Hintergrundfarbe: helles gelb (#FFFFB2) Schriftart: Arial (falls diese auf dem Client nicht verfügbar ist, soll statt dessen die Schriftart Sans Serif verwendet werden) Schriftgröße: 28 Punkte Textausrichtung: zentriert Zeilenhöhe: 1,5-fache Schriftgröße Hintergrundfarbe: rot (#E50000) Textfarbe: weiß (#FFFFFF) Rahmenbreite: 1 Pixel Rahmentyp: durchgezogen Abstand zum folgenden Element: 5 Pixel Textausrichtung: zentriert Text: kursiv und unterstrichen Abstand zum vorherigen Element: 1,25-fache Schriftgröße Abstand zum folgenden Element: 0,5-fache Schriftgröße Textausrichtung: zentriert Zeilenhöhe: 1,5-fache Schriftgröße Abstand zum vorherigen Element: 0,5-fache Schriftgröße Abstand zum folgenden Element: 0,5-fache Schriftgröße Die Grafik soll horizontal zentriert werden.

14 Seite 14 / Differenzierte CSS-Eigenschaften Neben der Startseite index.html besteht unser Webauftritt aus weiteren, miteinander verlinkten Webseiten. All diese Webseiten sollen einheitlich formatiert sein. Hierfür verwenden wir eine zentrale css-datei. Bisher haben wir dort festgelegt, dass Bilder horizontal zentriert werden. Die html-seite bildungswege.html enthält jedoch ein Bild, das rechts von dem es umfließenden Text angezeigt werden soll.

15 Seite 15 / 22 Daher müssen wir in der css-datei nun für beide Fälle jeweils eine Variante anlegen. img.zentriert { /* Bilder können zentriert werden, indem das Bild selbst als Blockelement behandelt wird und ihm entsprechenden margin- Eigenschaften zugewiesen werden. */ display: block; margin-left: auto; margin-right: auto; img.rechts { float: right; margin-left: 30px; margin-bottom: 30px; CSS Im html-dokument wird dann mit Hilfe des Attributs class auf die jeweilige Variante verwiesen. <img class="zentriert" src="img/eingang.jpg" alt="haupteingang Schule"> index.html <img class="rechts" src="img/bildungswege.gif" alt="img/bildungswege.gif"> bildungswege.html

16 Seite 16 / 22 Bisher haben wir in unserer css-datei festgelegt, dass alle p-elemente zentriert und mit anderthalbfachem Zeilenabstand dargestellt werden. p { text-align: center; line-height: 1.5; CSS Die Erläuterungen zu den verschiedenen Schularten sollen jedoch so wie es der Standard vorsieht linksbündig und mit einfachem Zeilenabstand formatiert werden. Daher müssen wir den Eintrag in unserer css-datei so ändern, dass er nicht mehr für alle p- Elemente gilt. Dazu vergeben wir einen entsprechenden Klassennamen. p.zentriert{ text-align: center; line-height: 1.5; CSS Soll ein p-element zentriert werden, gibt man in der -Datei nun diese Klasse an. index.html <p class="zentriert"> Wir freuen uns über Ihr Interesse und <br> hoffen Ihnen auf den folgenden Seiten einen kleinen Einblick in unsere Schule geben zu können. </p> Andernfalls verzichtet man auf die Angabe einer Klasse und sorgt so dafür, dass das p- Element dem Standard entsprechend formatiert wird. <p> In der Kaufmännischen Berufsschule bilden wir im dualen Verbund mit den Ausbildungsbetrieben Bank-, Industrie-, Großhandels-, Büro-, Bürokommunikations- und Werbekaufleute sowie Verwaltungsfachangestellte (ÖV) aus. </p> bildungswege.html

17 Seite 17 / Formatierungen im -Dokument Sollen einzelne Worte bzw. Teile eines Absatzes durch Unterstreichen, Fett- oder Kursivdruck hervorgehoben werden, kann die Formatierung auch direkt im - Dokument vorgenommen werden. - Element b i u Bedeutung Beispiel Darstellung zeichnet einen Text als fett aus zeichnet einen Text als kursiv aus zeichnet einen Text als unterstrichen aus <p> Folgendes ist <b>wichtig</b>: </p> <p> Folgendes ist <i>wichtig</i>: </p> <p> Folgendes ist <u>wichtig</u>: </p> Folgendes ist wichtig: Folgendes ist wichtig: Folgendes ist wichtig: Durch Verschachtelung der -Elemente lassen sich die Effekte auch kombinieren. Beispiel <p> Folgendes ist <u> <i>wichtig</i> </u>: </p> <p> Folgendes ist <b> <u> <i>wichtig<\i> </u> </b>: </p> Darstellung Folgendes ist wichtig: Folgendes ist wichtig:

18 Seite 18 / 22 3 Tabellen definieren 3.1 Tabellen definieren Die Webseite termine.html soll eine Tabelle mit allen anstehenden Terminen beinhalten. Zelle (table headline) Zeile (table row) Datum Beginn Art der Veranstaltung :30 Wandertag :00 Klassen-Pflegschaftssitzungen :00 Elternbeiratssitzung und Schulkonferenz Zelle (table data) Eine html-tabelle (table) kann mehrere Zeilen (table row) enthalten. Jede Zeile besteht wiederum aus verschiedenen Zellen die entweder eine Spaltenüberschrift (table headline) oder normale Daten (table data) enthalten. -Element Bedeutung Beispiel table Tabelle <table> </table> tr Zeile <tr> </tr> th Zelle mit einer Spaltenüberschrift <th>datum</th> td Zelle mit normalen Daten <td> </td> <table> <tr>  <th>datum</th>  <th>beginn</th>  <th>art der Veranstaltung</th>  </tr> <tr>  <td> </td>  <td>7:30</td>  <td>wandertag</td>  </tr> <tr>  <td> </td>  <td>19:00</td>  <td>klassen-pflegschaftssitzungen</td>  </tr> <tr>  <td> </td>  <td>19:00</td>  <td>elternbeiratssitzung und Schulkonferenz</td>  </tr> </table>

19 Seite 19 / Tabellen formatieren Anforderungen -Element table td th Formatierung Kein Abstand zwischen den Rahmen benachbarter Tabellenzellen. Rahmen anzeigen Rahmenbreite: 1 Pixel Rahmen anzeigen Rahmenbreite: 1 Pixel Hintergrundfarbe: rot (#E50000) Schriftfarbe: weiß (#FFFFFF) Rahmenfarbe: schwarz (#000000) Stylesheet In unserer css-datei styles.css werden folgende Einträge ergänzt: table { border-collapse: collapse; CSS td { border-style: solid; border-width: 1px; th { border-style: solid; border-width: 1px; background-color: #E50000; color: #FFFFFF; border-color : #000000; styles.css Ansicht

20 Seite 20 / 22 4 Layout Beim Entwurf einer neuen Webseite besteht der erste Schritt darin, sich über die grundsätzliche Struktur des Internetauftritts klar zu werden. Als Strukturierungselemente kommen dabei Container zum Einsatz, die ihrerseits die darzustellenden Elemente (Überschriften, Textabschnitte, Bilder, ) aufnehmen. Container-Elemente -Element header footer nav article aside section div Kopfzeile Fußzeile Navigationsbereich Zweck Eigenständiger Teil der Webseite (z. B.: ein Artikel auf einer Zeitungsseite). Ergänzende Informationen zum eigentlichen Inhalt der Seite (z. B. Kommentare). Ein Bereich der Webseite, der inhaltlich zusammengehört, zu dem jedoch keiner der anderen Container passt (z. B. Unterabschnitte mit einer eigenen Überschrift). Ein Bereich der Webseite, der keine inhaltliche Bedeutung besitzt und nur der Layoutgestaltung dient. Beispiel 1: Layout vertikal Sollen die verschiedenen Bereiche vertikal untereinander angeordnet werden, sind hierfür keine besonderen Formatierungen mit css notwendig. <body> <header>kopfzeile</header> <nav> <a href="link1.html">link 1</a> <a href="link2.html">link 2</a> <a href="link3.html">link 3</a> </nav> <article> <h2>layout: vertikal</h2> <p>nach der Kopfzeile folgt </p> </article> <footer>fußzeile</footer> </body> Beispiel 2: Layout horizontal (zwei Spalten) In diesem Beispiel sollen der Navigationsbereich und der eigentliche Artikel nebeneinander angeordnet werden. <body> <header>kopfzeile</header> <div> <nav> </nav> <article> </article> </div> <footer>fußzeile</footer> </body>

21 Seite 21 / 22 Eine Möglichkeit dies umzusetzen besteht darin, mit Hilfe der css-eigenschaft display festzulegen, dass sich beide Bereiche wie zwei nebeneinanderliegende Zellen einer Tabelle verhalten sollen (display: table-cell). Damit sich die zweite Zelle (hier: article) über die gesamte verbleibende Breite der Webseite erstreckt, müssen beide Bereiche (hier: nav und article) in einen übergeordneten Bereich eingebettet werden, der sich wie eine Tabelle verhalten soll, die die beiden Zellen enthält (display: table). Für diesen Bereich kann dann die Breite auf 100% gesetzt werden (width: 100%). Da dieser übergeordnete Bereich lediglich der Formatierung dient und selbst keinen darzustellenden Inhalt enthält, verwenden wir hierfür das div-element. Beispiel 3: Layout horizontal (drei Spalten) In diesem Beispiel soll neben dem eigentlichen Artikel noch eine Spalte mit ergänzenden Anmerkungen erscheinen. Daher greifen wir hierbei zum aside-element. div { nav { display: table; width: 100%; display: table-cell; width: 60px; article { display: table-cell; nav a { display: block; <body> <header>kopfzeile</header> <div> <nav> </nav> <article> </article> <aside> </aside> </div> <footer>fußzeile</footer> </body> css Das aside-element soll sich ebenfalls wie eine Tabellenzelle verhalten und wird mit css entsprechend formatiert (display: table-cell). Im Html-Dokument fügen wie aside { display: table-cell; width: 100px; das aside-element dem div-container hinzu, der für Formatierungszwecke als übergeordnete Tabelle fungiert (hier: div). css

22 Seite 22 / 22 Aufgabe Überarbeiten Sie das -Dokument bildungswege.html. Verwenden Sie dabei geeignete Container um das Layout der Seite festzulegen. a) Menü unterhalb der Kopfzeile b) Menü und Artikel unterhalb der Kopfzeile nebeneinander