HTML Tutorial

Inhalt
Grundgerüst
Hyperlinks
Textformatierung
Textangaben
Schriftformatierung
Grafiken

 

Grundgerüst:

<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

 

Hyperlinks:

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