Embed Size (px)
Citation preview
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
Grundgerüst einer HTML-Seite <html>
<head> <title> | </title>
</head>
<body>
</body> </html>
Einfache Codierungen
Eingabe Anzeige
<b>HTML</b> ist <i>ganz</i> <u>einfach</u>!
Zeilen<br>umbrechen
HTML ist ganz einfach!
Zeilenumbrechen
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.
<table> <tr>
<td>Zelle 1</td> <td>Zelle 2</td> <td>Zelle 3</td> <td>Zelle 4</td>
</tr> ….
</table>
Tabellen - Grundgerüst
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)
Listenunsortiert
<ul> <li>Thema 1</li> <li>Thema 2</li> <li>Thema 3</li></ul>
nummeriert<ol> <li>Thema 1</li> <li>Thema 2</li> <li>Thema 3</li></ol>
• Thema 1• Thema 2• Thema 3
1. Thema 1
2. Thema 2
3. 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"
Bilder Bildbearbeitungsprogram: Irfanview
einfache Grafiken mit Powerpoint erstellenz. B.:
Screenshot (Alt + Druck) machen und im Bildbearbeitungsprogramm freistellen
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!
