HTML-Kurs KLasse 9, Grundgerüst

[Download des Kurses zum Offline-Betrieb]

Grundgerüst einer HTML-Datei

HTML bedeutet HyperText Markup Language und ist eine Standardbeschreibungssprache für Internetseiten.

Beispiel:

<html> <head> <title>Text des Titels</title> </head> <body> Text, Verweise, Grafikreferenzen usw. </body> </html>	Alle HTML-Befehle stehen in sog. Tags. Kopf (erscheint nicht im Browserfenster) Körper (erscheint im Browserfenster)
Darstellung im Browser

Die Tags (Steueranweisungen) unterscheiden sich in Einleitungs- (<html>) und Abschluss-Tags (</html>). Die Einleitungs-Tags können ein oder mehrere durch Leerzeichen getrennte Attribute (z. B.) enthalten. Die Reihenfolge der Attribute ist beliebig. So sieht der Quelltext der Hinweisseite aus!

[zurück] [zum Inhalt]

Regeln beim Schreiben (Editieren) von HTML-Code

Notiere in einer neuen Datei immer zuerst das Grundgerüst
Beachte bei der Texteingabe die Vorschriften für Umlaute, Sonderzeichen und HTML-eigene Zeichen
Mehrere Leerzeichen hintereinander werden vom WWW-Browser ignoriert. Um mehrere Leerzeichen zu erzwingen, verwende die Zeichenfolge   ( geschütztes Leerzeichen) oder  , und zwar so oft hintereinander wie gewünscht.
Beachte, Text wird bei der Anzeige automatisch umgebrochen. (s. auch nächster Abschnitt)

[zurück] [zum Inhalt]

Text auf einer Web-Seite

HTML-Code
Eingabefeld

Darstellung im Browser

Schon jetzt noch einige nützliche Formatierungen für einzelne Wörter oder Bereiche:

 bestimmt die Schriftgröße (font size = Schriftgröße). Du kannst den Wert absolut in Zahlen zwischen 1 und 7 angeben. Die Normalschriftgröße ist 3. Du kannst die Schriftgröße auch dazu relativ mit +(Zahl) bzw. -(Zahl) angeben. Mit  beendest du den Bereich mit dieser Schriftgröße.
 bestimmt die Schriftfarbe (font color = Schriftfarbe). Du kannst den Wert in Hexadezimalschreibweise oder als Farbnamen (s. u.) angeben. Mit  beendest du den Bereich mit dieser Schriftfarbe.
 bestimmt die Schriftart (font face = Schriftart). Dahinter folgt, in Anführungszeichen, die Angabe einer Schriftart (z.B.: "Arial", "Courier", ...). Mit  beendest du den Bereich mit dieser Schriftart.
<center> zentriert die Objekte des Bereichs im Ausgabefenster. Mit </center> beendest du den Bereich mit zentrierter Ausgabe.
In einem font-Tag kannst du auch mehrere Attribute (z.B. face=... color=... size=...) unterbringen.

In das Eingabefeld (hier: textarea) kannst du auch eigenen Text eingeben, "betrachten", anschließend im Eingabefeld entsprechend formatieren, wieder "betrachten", usw..
So und nun fleißig üben!

[zurück] [zum Inhalt]

Umlaute und scharfes s

Ersetze das Zeichen ä durch die Zeichenfolge ä
Ersetze das Zeichen Ä durch die Zeichenfolge Ä
Ersetze das Zeichen ö durch die Zeichenfolge ö
Ersetze das Zeichen Ö durch die Zeichenfolge Ö
Ersetze das Zeichen ü durch die Zeichenfolge ü
Ersetze das Zeichen Ü durch die Zeichenfolge Ü
Ersetze das Zeichen ß durch die Zeichenfolge ß

Man nennt dieses Verfahren Maskieren.

[zurück] [zum Inhalt]

HTML-eigene Zeichen

Ersetze das Zeichen < durch die Zeichenfolge <
Ersetze das Zeichen > durch die Zeichenfolge >
Ersetze das Zeichen & durch die Zeichenfolge &
Ersetze das Zeichen " durch die Zeichenfolge "

Wenn diese Zeichen als Text im Browser angezeigt werden sollen, solltest du sie im HTML-Code entsprechend ersetzen!

[zurück] [zum Inhalt]

Farben in HTML

Grundfarben

Farbname	Hexadezimal	Beispiel-Tabellenzelle mit dieser Farbe
`black`	`#000000`
`maroon`	`#800000`
`green`	`#008000`
`olive`	`#808000`
`navy`	`#000080`
`purple`	`#800080`
`teal`	`#008080`
`gray`	`#808080`
`silver`	`#C0C0C0`
`red`	`#FF0000`
`lime`	`#00FF00`
`yellow`	`#FFFF00`
`blue`	`#0000FF`
`fuchsia`	`#FF00FF`
`aqua`	`#00FFFF`
`white`	`#FFFFFF`

Setze in das Eingabefeld einen Farbcode und klicke den Button "Farbe" Anmerkung: Die Buchstaben in der Hexadezimalschreibweise dürfen auch klein geschrieben werden.
Noch mehr Farben!

Farben können auch durch die Angabe rgb(rot,gru,bla) gesetzt werden. Dabei sind rot, gru und bla jeweils Platzhalter für Zahlen zwischen 1 und 255, oder Prozentangaben der Farbanteile rot, grün und blau.
Kopiere rgb(33%,66%,99%) und setze es oben ein.

[zurück] [zum Inhalt]

Hintergrund

<body bgcolor=blue> oder <body bgcolor=#0000ff>	Attribut bgcolor im body Tag setzt die Hintergrundfarbe für das ganze Dokument fest.

[zurück] [zum Inhalt]

Text (gesamtes Dokument)

<body text=lime> oder <body bgcolor=#FF9966>	Attribut text im body Tag setzt die Textfarbe für das ganze Dokument fest.

[zum Inhalt]

Text (in Abschnitten)

<font color=red>farbiger Text</font>	Attribut color im font Tag setzt die Textfarbe für den Abschnitt.
farbiger Text

[zum Inhalt]

Links (gesamtes Dokument)

<body link=#FF0000 vlink=#00FF00 alink=#0000FF>
oder
<body link=red vlink=lime alink=blue>

Attribut link, vlink, alink im body Tag
setzt die Farbe für Links zu noch nicht 
besuchten Dateien (link = Verweis), 
für Links zu bereits besuchten Dateien 
(vlink = visited link = besuchter Verweis), 
für Verweise, die gerade angeklickt wurden 
(alink = activated link = aktivierter
Verweis).

zum Anfang

c;-) webmichis HTML-Kurs [zum Inhalt]

Letzte Änderung: