Präsentation herunterladen
1
HTML Silla Plump, 2009
2
Was ist HTML? HyperText Markup Language
ursprünglich zur Auszeichnung wissenschaftlicher Texte „Brot- und Buttersprache“ selfhtml.org
3
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
4
HTML-Editor: Phase 5 Freeware
Setzt Befehle automatisch (kein auswendig lernen, nur erkennen) Personalisierbar: Tastaturkürzel, Benutzer-Menü
5
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)
6
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
7
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.
8
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
9
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)
10
Attribute für <td>
Erweiterung Sinn valign="top" width=“200" Text bleibt am oberen Rahmen „hängen“ Zellenbreite (200 Pixel)
11
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
12
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
13
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
14
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" -Verlinkung: <a href="mailto: -Adresse">Text oder Bild</a>
15
Viel Spaß beim Basteln!
Ähnliche Präsentationen
© 2024 SlidePlayer.org Inc.
All rights reserved.