Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

HTML Silla Plump, 2009.

Ähnliche Präsentationen


Präsentation zum Thema: "HTML Silla Plump, 2009."—  Präsentation transkript:

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!


Herunterladen ppt "HTML Silla Plump, 2009."

Ähnliche Präsentationen


Google-Anzeigen