HTML Silla Plump, 2009
Was ist HTML? HyperText Markup Language ursprünglich zur Auszeichnung wissenschaftlicher Texte „Brot- und Buttersprache“ selfhtml.org
Systematik Besteht aus Tags in der Regel öffnendes und schließendes Tag Format: <öffnen> </schließen> einzelne Befehle können nahezu beliebig ineinander verschachtelt werden Klammersystem beachten: { [ ( ) ] } Reintext = Sonderzeichen und Umlaute umwanden Erweiterung einzelner "Grundbefehle" durch Attribute
HTML-Editor: Phase 5 Freeware Setzt Befehle automatisch (kein auswendig lernen, nur erkennen) Personalisierbar: Tastaturkürzel, Benutzer-Menü
Grundgerüst einer HTML-Seite <head> <title> | </title> </head> <body> </body> </html> Head außerdem: Informationen über Seite (Autor o.ä.) Im Weiteren: Befehle nur für Body! Erweiterung des Body-Befehls für Farben (Hintergrund, Schrift, Links)
Einfache Codierungen <b>HTML</b> Eingabe Anzeige <b>HTML</b> ist <i>ganz</i> <u>einfach</u>! Zeilen<br>umbrechen HTML ist ganz einfach! Zeilen umbrechen
Farben Hexadezimal-Code (oder RGB-Farben) Schrift einfärben: <font color="#FF0000">Mathe</font> Weitere Verwendungen: z. B. Hintergrund, Rahmen von Bildern und und Tabellen, etc.
Tabellen - Grundgerüst <table> <tr> <td>Zelle 1</td> <td>Zelle 2</td> <td>Zelle 3</td> <td>Zelle 4</td> </tr> …. </table> Zelle 1 Zelle 2 Zelle 3 Zelle 4
Attribute für <table> Erweiterung Sinn bordercolor="#2F2F2F“ border="1" class="text“ width=“1200" Rahmenfarbe Rahmenstärke Textformatierung in der Tabelle bleibt identisch mit Text außerhalb der Tabelle Tabellenbreite (1200 Pixel)
Attribute für <td> Erweiterung Sinn valign="top" width=“200" Text bleibt am oberen Rahmen „hängen“ Zellenbreite (200 Pixel)
Listen unsortiert <ul> <li>Thema 1</li> <li>Thema 2</li> <li>Thema 3</li> </ul> nummeriert <ol> </ol> Thema 1 Thema 2 Thema 3
Bilder Dateiformate: .gif, .jpg, .jpeg oder .png <img src="Datei-Pfad" alt="" border="0"> Absoluter Link: verlinkt ein Bild von einer anderen Seite: Link-Pfad = vollständige URL angeben Relativer Link: identische Datei-Pfad-Teile werden weggelassen Ausrichtung und Textfluss durch Attribut: align="Ausrichtung" Relativ = Bild-Datei z.b. im selben Ordner wie HTML-Datei
Start-seite Bilder Bildbearbeitungsprogram: Irfanview einfache Grafiken mit Powerpoint erstellen z. B.: Screenshot (Alt + Druck) machen und im Bildbearbeitungsprogramm freistellen Start-seite Auch Auszüge aus Präsentation per Screenshot
Links einfacher Link: <a href="Link-Pfad">Text oder Bild</a> Absoluter Link: verlinkt eine andere Seite: Link-Pfad = vollständige URL angeben Relativer Link: identische Datei-Pfad-Teile werden weggelassen Link soll in neuem Fenster öffnen mit Attribut: target="_blank" eMail-Verlinkung: <a href="mailto:eMail-Adresse">Text oder Bild</a>
Viel Spaß beim Basteln!