Auswahl von HTML-Tags mit einigen Attributen (die Liste wird weiter aktualisiert) Sd

(1)

Auswahl von HTML-Tags mit einigen Attributen (die Liste wird weiter aktualisiert)

Sd

Tags Attribute Werte Erläuterung Beispiel

Grundgerüst

<html>..</html> Definiert die HTML-Datei

<head>..</head> Kopfinformationen, wie Titel, meta-Daten,

JavaScript-Prozeduren, CSS-Prozeduren

bgcolor green, #FF12D3 Hintergrundfarbe als Farbname oder als Hex-

Wert aus dem RGB-Modell

background Bild Hintergrundbild, Wallpaper <body background="landschaft.jpg">

Absätze, Zeilenumbruch

<p>...</p> Absatz

align left, center, right Grobe Ausrichtung des Absatzes <p align="right">das ist rechts geschrieben</p>

<br /> Zeilenumbruch (ohne Endetag) ....gleich wird umgebrochen <br />

<div>...</div> auch Absatz (zunächst kaum Unterschied zu

<p>, später mehr dazu Textformatierung

<h1>...</h1> bis

Überschriften der Dicke 1 ... 6 (1 ist am stärksten)

<h1>Urlaubsbericht</h1>

<p>Jetzt berichte ich etwas über meinen letzten Urlaub</p>

<b>..</b> fett (bold) geschrieben Nur das Wort <b>Montag</b>wird fett geschrieben

<i>..</i> Kursiv (italics)

<u>..</u> Unterstrichen (underlined)

<big>..<big> Dicker als <b>

<font>....</font> Schriftgestaltung

face Schriftart (s. z.B. in

Word)

Definiert eine Schriftart <font face="Arial">dies ist in der Schriftart Arial geschrieben</font>

size 1 bis 7 (Normal = 3) oder

relative Werte zur vorigen Schrift: -1, -2, +2 (Normal = 0)

Definiert die Schriftgröße <font face="Times" size="5">dies ist in der Schriftart Times New Roman geschrieben und hat die

Schriftgröße 5</font>

color Farbname oder Hex Definiert die Schriftfarbe <font face="Arial" color="red">dies ist in der Schriftart

(2)

Sd

Arial und in Rot geschrieben</font>

Grafik

<img /> Fügt Grafik-Dateien (images) ein

src dateiname Quelle der Datei <img src="hund.jpg" /> oder

align left, right Grobe Bildausrichtung <img src="sonne.jpeg" align="right" />

Beachte Unterschiede, ob align im <p>-Tag oder im

<img>-Tag steht

width Pixel oder % Bildbreite <img src="xxx" width="100" /> oder

height Pixel oder % Bildhöhe

alt Hinweistext Alternativtext, wird zum Quickinfo. Wird

angezeigt, falls das Bild vom Browser nicht gefunden wird

border Pixel Rahmen für das Bild (border="0" ist ohne

Rahmen, Standard)

Linien

<hr /> Durchgezogene Linie (ohne Ende-Tag)

size Pixel Dicke der Linie, Standard ist 1 <hr size="3" />

color Farbe, siehe body-Tag

Listen

<ul>...</ul> Definiert eine ungeordnete Liste (unordered

list), d.h. eine Aufzählung, z.B. mit Punkten type disc, square, circle Gefüllte runde Punkte, Standard, kleine

Quadrate, hohler Kreis

<ul type="square">..Aufzählungen....</ul>

<ol>...</ol> Definiert eine geordnete, d.h. nummerierte

Liste (ordered list)

type 1 (Standard), A, a, I 1 arabische Ziffern, A Grossbuchstaben, a Kleinbuchstaben, I römische Ziffern

<ol type="A">..Aufzählungen....</ol>

start Ziffer <ol type="A" start="F">..Aufzählungen....</ol>

(3)

Sd

<li>...<li> List, einzelner Listeneintrag <ul>

<li>das ist das erste Thema</li>

<li>das ist das zweite Thema</li>

<li>das ist das dritte Thema</li>

</ul>

Hyperlinks

<a>...</a> Anker für einen Hyperlink

href Quelle der Datei (URL) Verweist auf eine interne oder externe Datei <a href="berg.gif">...</a>

<a href="http://olsdl.jimdo.com">Homepage Sd</a>

Ankername Verweist auf einen internen Anker <a href="#oben">...</a>

mailto:E-mail-Adresse Erzeugt einen einfachen email-Link <a href="mailto:olsdl@gmx.de">...</a>

target Die aktuelle Seite wird nicht "überschrieben,

sondern die neue Seite (hier google) wird in einem neuen Tab / Reiter angezeigt

<a href="http://www.google.de"

target="_blank">...</a>

name, bzw. id Definiert einen internen Anker für interne

Links in einem Dokument

Tabellen

<table>...</table> Tabellen-Definition

border Zahlen 1 ... Umrandung der Tabelle <table border="2">...</table>

bgcolor Name oder #hexwert Farbe der gesamten Tabelle <table bgcolor="yellow">...</table>

background Grafikname Hintergrundbild der Tabelle <table background="sonne.gif">....</table>

align left, right, center Ausrichtung der Tabelle <table align="right">...</table>

width width

Zahlen als Pixel

%-Angaben

Breite = 200 Pixel Breite = 30% der Seite height

height

Höhe=300 Pixel Höhe= 20% der Seite

cellpadding Pixel Platz zwischen Zellrand und Zellinhalt,

"Polsterung"

cellspacing Pixel Abstand zwischen einzelnen Feldern, "Dicke

der Wand"

(4)

Sd

<tr>...</tr> s. table Zeile einer Tabelle <tr><td>Inhalt</td><td>Inhalt</td></tr>

<th>...</th> s. table Zellendefinition für eine Überschrift einer

Tabelle

<tr><th>Überschrift1</th><th>Überschrift2</th></tr>

<tr><td>hallo</td><td>3</td></tr>

<td>...</td> s. table Defintion einer "gewöhnlichen" Zelle einer Tabelle

<td>Informatik</td>

valign Top, middle, bottom Vertikalausrichtung der Zelle <td width="100" align="right"

valign="top">Inhalt</td>

colspan Zahlen 2.... Verbinden 2er Spalten (verbinden horizontal) <td colspan="2">Inhalt</td>

rowspan Zahlen 2.... Verbinden 3er Zeilen (verbinden vertikal) <td rowspan="3">Inhalt</td>

Sonderzeichen / Umlaute

&nbsp Leerzeichen (mittlere große Taste)

&auml ä

&ouml ö

&uuml ü

Weitere Sonderzeichen siehe http://de.selfhtml.org/html/referenz/zeichen.htm