HTML Tutorial
| Grundgerüst |
| Hyperlinks |
| Textformatierung |
| Textangaben |
| Schriftformatierung |
| Grafiken |
| <html> (leitet die HTML-Datei ein) |
| <head> (leutet den „Kopf“ der Seite ein) <title>Beschreibung der Seite</title> (wird in der oberen Leiste des Browsers dargestellt) |
</head> (schließt den "Kopf") |
<body> (leitet den eigentlichen Inhalt der Datei ein) |
~Seiteninhalt~ |
</body> (schließt den Inhalt der Datei) |
</html> (schließt die HTML-Datei) |
Textangaben:
| Textabsatz: <p align=“left|center|right“>Text</p> |
– Fügt einen Absatz ein
– Die Ausrichtung erfolgt mit align. Ausrichtungen sind left=links, center=zentriert, right=rechts. Keine Angabe, setzt den Absatz linksbündigZeilenumbruch: Text <br> clear=“all“> Text
– <br> bricht eine Zeile um
– clear=“all“ löscht alle vorheringen AusrichtungenZeilenumbruch verhindern: <nobr>Text</nobr>
– Der umschlossene Text wird nicht automatisch getrenntÜberschriften: <h(1-6) align=“left|center|right“>Überschrift</h(1-6)
– 1 bis 6 gibt die jeweilige Größe an
– Ausrichtung der Überschrift erfolgt mit align. Ausrichtungen sind wie gehabt left,center,right.
Textformatierung:
| Physischie Formatierung: |
<b> fett formatiert </b>
<i> kursiv formatiert </i>
<u> unterstreichen </u>
<strike> durchstreichen</strike> auch <s>durchstreichen</s>
<tt> schreibmaschineneffekt </tt>
<big> vergrößerter Text </big>
<small> verkleinerter Text </small>
<sup> hochgestellter Text </sup>
<sub> tiefgestellter Text </sub>
Schriftformatierung:
| Schriftgröße: <font size=“1|2|3|4|5|6|7″>Text</font> |
– Großenangabe als absoluter Wert ( 1 bis 7)
– Standardgröße ist size=“3″Schriftfarbe: <font color=“#123456″>Text</font>
– Farbe der Schriftt in hexadezimaler Angabe oder Farbnamen (Englisch)Trennlinien: <hr align=“left|right“ width“?“ height“?“ color=“#123456″ noshade>
– Mögliche Ausrichtungen sind left=links und right=rechts
– Die Breite (width) und Höhe (height) sind in Pixel anzugeben
– noshade schaltet die 3D-Darstellung ab
– Farbangaben (color) können hexadezimal oder als Farbnamen angaben erfolge
Grafiken:
| Grafiken einbinden: <img src“URL“> |
– Die Adresse zu einer JPEG- oder GIF-Grafik wird angegeben.Breite und Höhe: <img src“URL“ width“?“ height“?“>
– Die Angabe der Breite und Höhe der Grafik beschleunigt den Aufbau oder Web-Seite.Alternativer Text: <img src“URL“ alt“Text“>
– Der Text wird angezeigt, wenn die Grafik nicht dargestellt werden kann.Grafiken umranden: <img src“URL“ border“?“>
– Die Rahmenbreite wird in Pixel angegeben.Beschriftung: <img src“URL“ align“top|middle|bottom“>Text
– Der Nachfolgender Text kann top (oben), middle (mittig) oder bottom (unten) zur Grafik ausgerichtet werden.Text um Grafik fließen lassen: <img src“URL“ align=“left|right“>Text– Bei der Ausrichtung left (links) wird die Grafik links dargestellt und de
r Text fließt rechts herum. Bei der rechten Ausrichtung fließt der Text links herum.Abstand zur Grafik: <img src=“URL“ vspace“?“ hspace „?“> Text
– Der Abstand zur Grafik wird in Pixel angegeben
– vspace ist der vertikale und hspace der horizontale Abstand
| Ziel definieren: <a name“Ziel“>Text</a> |
– Das Ziel, das aufgerufen werden kann wird gesetztHyperlink setzen: <a href=“URL“>Verweistext</a>
– Der Verweis auf eine Adresse wird gesetzt
– Der Verweistext wird unterstrichenE-Mail Hyperlink: <a href=“mailto:E-Mail-Adresse“>Verweistext</a> oder<a href=“mailto:E-Mail-Adresse?subject=Betreff&cc=Kopie-Empfänger&body=Text“>Verweistext</a>
– Beim Klick auf den Link wird ein E-Mail-Programm gestartet
– Die möglichen Angaben, die vordefiniert werden können, sind: der Empfänger, der Betreff (subject), der Empfänger der Kopie (cc) sowie der Inhalt der E-Mail (body).
– Bei der Vordefinition wird an die E-Mail-Adresse ein Fragezeichen angehängt.
– Mehrere Vorgaben werden durch das Zeichen & voneinander getrennt.Grafik als Hyperlink: <a href=“URL“><img src=“URL“></a>
– Der Hyperlink wird um die Grafik gesetzt