Layoutbereiche header nav main footer Layoutbereiche header nav

Layoutbereiche <header> <nav> <main> <footer>

Layoutbereiche <header> <nav> <main> <aside> <footer>

<header> Kopfbereich mit Slogan, Logo, etc.

<footer> Fußbereich mit Kontaktdaten, Autor, etc.

<nav> Menübereich - Steuerung (Navigation)

<main> Inhaltsbereich - der eigentliche Inhalt

<section> Artikel können in mehrere Bereiche (section) eingeteilt werden!

<aside> Weiterführende Informationen zum Inhalt

Wichtige HTML-TAGs

Überschriften <h 1> Hauptüberschrift </h 1> • • • <h…> <h 1> <h 2> <h 3> …. <h 6> steht für Headline Überschrift 1. Grades (wichtigste) Überschrift 2. Grades Überschrift 3. Grades

Absätze <p> Absatz </p> • <p> erstellt einen Absatz – engl. Paragraph • erstellt einen Zeilenumbruch – engl. break

Text-Hervorhebungen • <b> - engl. für bold = fett • <strong> - engl. strong = kräftig, überzeugend • <i> - engl. für italic = kursiv, schräg • <em> - engl. für emphasis = betont, Hervorhebung

Unterschied <strong> zu <b> • logisch-semantische Auszeichnung <strong> Text </strong> • physische Auszeichnung <b> Text </b>

Unterschied <em> zu <i> • logisch-semantische Auszeichnung <em> Text </em> • physische Auszeichnung <i> Text </i>

Listen <ul> Aufzählung unordered list <ol> Nummerierung ordered list <li> list item

Liste mit Bullets <ul> <li> Pizza </li> <li> Nudeln </li> <li> Auflauf </li> </ul> Art der Aufzählung Info: <li> darf niemals alleine vorkommen!

Nummerierungen Statt <ul> ist <ol> zu wählen! <ol> <li> Pizza </li> <li> Nudeln </li> <li> Auflauf </li> </ol>

Grafiken einbinden <img …> img = engl. image = Bild Attribut für Dateiname: src=„…“ <img src=„images/bildname. jpg“ /> src= engl. Source = Quelle

Attribute bei Bildern Attribut für Dateiname: src=„…“ <img src=„images/bildname. jpg“ /> src= engl. Source = Quelle Attribut für Größen: width=„. . “ height=„…“ <img src=„images/bildname. jpg“ width=„ 100“ height=„ 20“ /> width = engl. Weite, Breite height = engl. Höhe

Attribute bei Bildern Attribut für Alternativbeschreibung: alt=„…“ <img src=„images/bildname. jpg“ width=„…“ height=„…“ alt=„Alternativtext“ /> alt = engl. alternativ = Alternativtext = Pflicht!!!

Attribute bei Bildern Attribut für Kurzbeschreibung: title=„…“ <img src=„images/bildname. jpg“ width=„…“ height=„…“ alt=„…“ title=„…“ /> title = kurze Beschreibung zum Bild = erklärender Tooltip, wenn Mauszeiger auf das Bild zeigt

Kontaktadresse für die Darstellung der eigenen Adresse! Folgendes wird benötigt: <address> Inhalt <address/>

Block-Elemente & Inline-Elemente, die einen kompletten Block umschließen: <h 1>, <h 2>, <p>, … =Block-Elemente, die innerhalb einer Textzeile Bereiche umschließen: <b>, <i>, <strong>, <em>, <sup>, <sub>, … =Inline-Elemente

Folgende Regel gilt: Inline-Elemente kommen nur innerhalb von Block-Elementen vor! <p> <i> Inhalt … </i> </p>

Bereiche festlegen über <div> und <span> • <div> </div> = Block-Element • <span> </span> = Inline-Element

Bereiche festlegen <div> um zusammengehörige HTML-Elemente zusammenzufassen! Folgendes wird benötigt: <div> Inhalt <div/> Beispiel: <div id=„wrapper“> Inhalt des Bereichs </div>

Hyperlinks <a> Link-Text </a> Aufbau HTML-Befehl für einen Link: <a href=„index. htm“> Startseite </a> A = engl. anchor = Anker href = engl. hyper reference = Hyper(text)-Referenz

Hyperlinks Arten von Links: • interne Links: Verweise innerhalb der Website auf Unterseiten • externe Links: Links auf andere Seiten im Internet • Links mit anderen Funktionen: z. B. mit E-Mail-Funktion oder öffnen von Dokumenten wie PDF

Verlinkung Int erne Links: • Bsp. : <a href="hobbies. htm"> Meine Hobbies </a> • Link nach „Zielseite“ – intern dann nur der Dateiname der HTML-Seite, z. B. „hobbies. htm“, „index. htm“ etc. Ex Extterner Link: • Bsp. : <a href="http: //hlw 3. at"> Schule HLW 3 </a> • Externer Link mit voller URL, z. B. http: //www. hlw 3. at

Verlinkung Externer Link in einem neuen Fenster: • Beispiel: <a href=„http: //hlw 3. at“ target="_blank"> Schule HLW 3 </a> • Externer Link mit voller URL, z. B. http: //www. hlw 3. at und zusätzlich mit target="_blank", damit neue Seite aufgeht!

Verlinkung Link auf Bild: • Bsp. : <a href="bild. jpg"> Anzeige Portrait </a> anstatt einer HTML-Seite wird ein Bild angegeben! Link auf PDF: • Bsp. : <a href=„Hausuebung. pdf"> HÜ-Angabe als PDF </a> anstatt einer HTML-Seite wird eine PDF-Datei angezeigt!

Verlinkung Mail als Link: Bsp: <a href="mailto: schlosser@hlw 3. at">Mail an Prof. Schlosser</a> anstatt einer HTML-Seite wird ein Mail-Adresse mit mailto: angegeben!

Verlinkung - Sprungmarken zum Seitenanfang zur Seitenmitte Zu einer anderen HTML-Seite • Definiert den Sprungaufruf <a href=„#bereich 1“> springen zu Bereich 1 </a> • Definiert das Sprungziel <h 1 id=„bereich 1“> Bereich 1 </h 1> # bedeutet auf der selben Seite! id bedeutet „identifier“ (darf nur 1 mal vorkommen!)

Sprungmarken Zum Seitenanfang Beispiel: • Sprungaufruf: • Sprungziel:

Sprungmarken Zum Seitenmitte Beispiel: • Sprungaufruf: • Sprungziel:

Sprungmarken von einer Seite zu einer anderen Beispiel: • Sprungaufruf (auf der Seite Hobbies): • Sprungziel (auf der Startseite) wurde bereits festgelegt!

Aufgabe: Fragen beantworten Siehe Moodle-Themenblock Wiederholung HTML – Arbeitsauftrag: Fragen beantworten

Aufgabe: Beispielwebsite erstellen Siehe Moodle-Themenblock Wiederholung HTML – Arbeitsauftrag: Beispielwebsite erstellen