Compu-Seite: HTML Grundkurs, Zusammenfassung

Sie sind Hier:

Startseite

Sonstiges

HTML & CSS

Zusammenfassung

HTML Grundkurs - Zusammenfassung

HTML - Grundstruktur

Absätze, Zeilenumbrüche, geschütztes Leerzeichen

<P>: Paragraph, Absatz
<br>: Zeilenumbruch
 : geschütztes Leerzeichen

Überschriften

<H1>Hallo Welt</H1>
<H2>Hallo Welt</H2>
<H3>Hallo Welt</H3>
<H4>Hallo Welt</H4>
<H5>Hallo Welt</H5>
<H6>Hallo Welt</H6>

Horizentale Linien

<HR>

Texte auszeichnen

<B>: Fettschrift (bold)
<I>: Kursiv (italic)
<BIG>: Vergrößert die Schriftgrad
<SMALL>: Verkleinert den Schriftgrad
<STRONG>: Test wird hervorgehoben
<TT>: Teletypeschrift - nichtproportional
<PRE>: Ausgabe von vorformatiertem Text
<BLOCKQUOTE>: Kennzeichnet einen Absatz (wird nach rechts eingezogen

Aufzählungen

<UL>: Unsortierte Liste (unordered List)
<OL>: Sortierte Liste (ordered List)
<LI>: Listenelement
<DL>: Defintions - Liste
<DT>: Definierter Begriff
<DD>: Definition (Definition Description)

Font

<FONT Attribute>Text</Font>

<FONT SIZE = 1>Schrift ist drei Einheiten groß (normal Size = 3, max = 7)

<FONT FACE = Arial>Gibt Text in Arial aus. Schrift muß auf dem Zielsystem vorhanden sein. Mehrere Schriftarten können durch Kommas getrennt angegeben werden. Am Ende sollte immer ein Standardschrifttyp stehen.

serif (z.B. Times Roman)

sansserif (z.B. Arial )

cursive (z.B. Brush-Script MT)

fantasy (z.B. Comic Sans MS)

monospace (z.B. Courier)

<FONT COLOR = #ff000> Gibt den Text in roter Schrift aus. Hexadezimale Angabe #rrggbb rr= rot, gg = grün, bb = blau. Werte von 0 bis 255 jeweils möglich. Man kann auch 16 Standardfarben verwenden:

aqua, gry, navy, silver, black, olive, grenn, teal, blue, purple, lime, white, fuchsia, red, maron, yellow

<FONT SIZE = 5 FACE = Arial COLOR = RED> die Attribute können kombiniert werden

Das FONT - Tag wird in Zukunft von Cascading STyle-Sheets Defintionen abgelöst

Diese Definition bewirkt, das die Standardschriftart für das Dokument Arial ist, im Schriftgrad 12 Punkte und schwarz

Inline - Grafiken

<IMG SRC = "vhs.gif"> Zeigt die Grafik "vhs.gif" an dieser Stelle im Dokument an.

Gebräuchliche Grafikformate sind

GIF - Grahpic Interchange Format - aktuell 89er Format mit Interlaced, Animation und transparenten Farben. Kann maximal 256 Farben darstellen. Für Fotos nicht geeignet

JPEG - Joint Photographic Expert Group - Sehr gut für Fotos geeignet, da bis zu 16,7 Millionen Farben abspeicherbar. Steuerung der Wiedergabequalität und der Dateigröße über DPI (Dots per Inch (70 - 100 reichen fürs Web) und dem Kompressionsfaktor (50 sollten nicht überschritten werden).

Zahlreiche Attribute gibt es beim Image - Tag. Nachfolgend die wichtigsten:

<IMG SRC = "vhs.gif" ALT = "VHS-Bingen"> Zeichnet Grafik mit Text aus. Wird immer zuerst angezeigt und auch dann, wenn die Grafikanzeige vom Benutzer ausgeschaltet wurde. Sollte immer angegeben werden

<IMG SRC = "vhs.gif" WIDTH = 100 HEIGHT = 200> Gibt die Weite und Höhe der Grafik an. Durch diese Angabe kann der Browser die Grafik schneller laden und mak kann kleinere Korrekturen in der Größe durchführen. Sollte ebenfalls immer angegeben werden.

<IMG SRC = "vhs.gif" VSPACE = 10 HSPACE = 20> Definiert einen vertikalen und horziontalen leeren Bereich ums Bild. Vor allem wichtig, wenn Text neben dem Bild erscheinen soll. Der Text klebt dann nicht am Bild

<IMG SRC = "vhs.gif" BORDER = 5> Rahmendicke in Pixel

<IMG SRC = "vhs.gif" ALIGN = top> Vertikale Ausrichtung des Bildes in der Textzeile. Die Ausrichtung kann auch "Middle" und "bootom" sein.

Die Kombination dieser Attribute ist natürlich möglich

<img src="vhs.gif" width="200" height="300" alt="VHS-Bingen" border="1" hspace="2" vspace="2" align="middle">

Hintergrundbilder und Hintergrundfarben

<BODY BGCOLOR = #FFFFFF> zeigt einen weißen Hintergrund für das Dokument. Dies sollte die Standardeinstellung sein. Wenn keine Farbe angegeben wird, verwendet der Browser seine Standardeinstellung. Bei älteren Browsers ist dies grau.

<BODY BACKGROUND = "wellen.gif"> zeigt als Hintergrund die entsprechende Grafik an. Achtung! Der Text des Dokumentes sollte noch lesbar sein.

Hyperlinks

<A href = "http://www.vhs-verband-rp.de">VHS-Verband-RP</A>

Hyperlink auf die Homepage des Landesverbandes. Ist die Seite auf einem anderen Webserver, so muß ein kompletter URL (Uniform Ressource Locator angegeben werden). Format: Protokoll, Server, [Verzeichnisname], [Datei].Ver

<A href = "projekte.htm">Meine Projekte</A>

Hyperlink auf eine Datei die auf dem gleichen Server und im gleichen Verzeichnis liegt.

<A href = "mailto:wjung@www.wjung.de>Walter Jung</A>

Hyperlink der bei dem Benutzer das installierte EMail-Programm aktiiviert und die Email-Adresse in die Empfängerzeile schreibt

<A href = "www.vhs-verband-rp.de"><img src = "vhs.gif"</A>

Grafischer Hyperlink. Wenn der Benutzer auf das Bild "vhs.gif" klickt, dann verzweigt er auf die Homepage des Landesverbandes.

<A href = "http://www.w3.org/MarkUp/html-spec/html-spec_5.html#SEC5.6.1"<Definition von Listenelementen</A>

Mit diesem Hyperlink verzweigen Sie auf die WeC Spezifiaktionsseite "html-spec_5.html". Dort gibt es eine Textmarke "SEC5.6.1" die Sie direkt anstuern.

<A Name = "SEC5.6.1">

Setzen eines Ankers (Textmarke) innerhalb einer Seite

Tabellen

Die Grundstruktur einer Tabelle

Die erzeugte Tabelle

A	B
1	2

Wichtige Attribute des Table Tag

<table border = 3 align = center cellpadding = 5 cellspacing = 10 width = 200>

A	B
1	2

border: Tabellenrand in Pixel (Gittermuster). Wert 0 - es ist kein Gitter sichtbar
align: Ausrichtung der Tabelle (left, center, right)
cellpadding: Abstand zwischen Zellenrand und Text in Pixel
cellspacing: Abstand zwischen zwei Tabellenzellen in Pixel
width: Tabellenbreite in Pixel. Bei Tabellen die ausgedruckt werden sollen, sollte der Wert 600 nicht überschritten werden.

Wichtige Attribute des TR Tags

Das TR Tag erzeugt eine neue Tabellenreihe (Table-Row)


align: Bestimmt die horizentale Ausrichtung der Zellinhalte in der Reihe (left, center, right)
valign: Bestimmt die vertikale Ausrichtung der Zellinhalte in der Reihe (top, middle, bottom, baseline)

A	B C D
1	2

Wichtige Attribute des TD Tags

Das TD Tag definiert den Zellinhalt und die Spalte. Je mehr TD Tags in einer Reihe gesetzt werden, desto mehr Spalten gibt es in der Tabelle.

<table border="1" align="center" width="600" height="49">
<tr>
    <td align="center" colspan="2">Meine erste Tabelle </td>
</tr>
<tr>
    <td align="center" width="30%">A</td>
    <td align="right" height="18">B</td>
</tr>
<tr>
    <td height="19">1</td>
    <td height="19">2</td>
</tr>
</table>

align: Bestimmt die horizentale Ausrichtung des Zellinhaltes (left, center, right)

valign: Bestimmt die vertikale Ausrichtung des Zellinhaltes (top, middle, bottom, baseline)
colspan: Gibt an, ob eine Zelle über mehrere Spalten reicht
rowspan: Gabi an, ob eine Zelle über mehrere Reihen reicht.
width: Definiert die Breite einer Spalte in Pixel oder %

Meine erste Tabelle
A	B
1	2

HTML Grundlagen

Glossar

Beispiele

CSS Grundlagen

Homepage Vorlagen