Informatik

HTML

Erläuterung 
tag (gespr.: teck)
So sieht's aus - Beispiele

Grundgerüst -

damit fängt alles an

<html>
<head>
<title>
Text für Titelleiste</title>
</head>
<body>

... Dies ist ein Text...
</body>
</html>

... Dies ist ein Text ...

Eigenschaften von body

 

Hintergrundfarbe (#rgb)

r = Rotwert, hexadezimal 00 bis FF
g = Grünwert, hexadezimal 00 bis FF
b = Blauwert, hexadezimal 00 bis FF

(Unter der Rubrik Farbcode findest du alles über die Farben)

<html>
<head>
<title>
Text für Titelleiste</title>
</head>
<body bgcolor="#CCCCFF">

... Dies ist ein Text...
</body>
</html>

 
Hintergrundbild <html>
<head>
<title>
Text für Titelleiste</title>
</head>
<body background="datei.gif"> ;

... Dies ist ein Text...
</body>
</html>

 

weitere Eigenschaften

text = Textfarbe link = Farbe von Verweisen vlink = Farbe von Verweisen zu besuchten Zielen alink = Farbe von Verweisen beim Anklicken
<html>
<head>
<title>
Text für Titelleiste</title>
</head>
<body bgcolor="#CCCCFF" text="#660066" link="blue" vlink="red" alink="yellow"> ;

... Dies ist ein Text... und ein Link
</body>
</html>
 
Texte und Absätze ( Wegen der Übersichtlichkeit, wird jetzt auf das Grundgerüst verzichtet.)

Überschriften

Überschrift 1. Ordnung
Überschrift 2. Ordnung
Überschrift 3. Ordnung
Überschrift 4. Ordnung
Überschrift 5. Ordnung
Überschrift 6. Ordnung

<h1> Überschrift. </h1>
<h2> </h2>
<h3></h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>
 

Absätze und deren Ausrichtung

 

<p>...Dies ist ein Text...</p>
<p align="left">linksbündig</p>
<p align="center">zentriert</p>
<p align="right">rechtsbündig</p>
<p align="justify">Blocksatz</p>
 
Textfarbe (#rgb)

r = Rotwert, hexadezimal 00 bis FF
g = Grünwert, hexadezimal 00 bis FF
b = Blauwert, hexadezimal 00 bis FF

<font color="FF6666">... Dies ist ein Text... </font>  
Schriftgröße ( 1 bis 7) <font size="6">... Dies ist ein Text...</font>  
kombiniert <font color="FF6666" size="4">... Dies ist ein Text...</font>  

Formatierter Text

Leerstellen und Zeilenumbrüche werden ohne Veränderung übernommen.

 

<pre> .... </pre>
 
weitere Formatierungen <b>fett. </b>
<i>kursiv </i>
<u>unterstrichen </u>
<blink>blinkend </blink>(Netscape)
<s>durchgestrichen </s>
<big>große Schrift</big>
<small>kleine Schrift</small>
<sub>tiefgestellt </sub>
<sup>hochgestellt</sup>
 
Listen <ul> = Bullet-Liste
<li> = Listeneintrag
</ul>
<ul type=square> = Bullet-Liste mit eckigen Bullets
<ul type=circle> = Bullet-Liste mit runden Bullets
<ul type=disc> = Bullet-Liste mit Datei-Bullets
<ol> = numerierte Liste
<li> = Listeneintrag
</ol> = Ende der numerierten Liste> <ol type=A> = Liste A,B,C...
<ol type=a> = Liste a,b,c...
<ol type=I> = Liste I,II,III...
<ol type=i> = Liste i,ii,iii
<ol start=(Zahl)> = numerierte Liste mit Startwert
 
Tabellen <table> = Tabellen-Anfang
<tr> Anfang Tabellenzeile
<td> Spalte </td>
</tr> Ende der Tabellenzeile
</table> Tabellen-Ende
 
Tabelle einzeilig/ zweispaltig <table>
<tr>
<td> 1. Spalte </td>
<td> 2. Spalte </td>
</tr>
</table>
 
Tabelle zweizeilig/ zweispaltig <table>
<tr>
<td> 1.Zeile/ 1. Spalte </td>
<td> 1.Zeile/ 2. Spalte </td>
</tr>
<tr>
<td> 2.Zeile/ 1. Spalte </td>
<td> 2.Zeile/ 2. Spalte </td>
</tr>
</table>
 
Tabellengestaltung <table align="center"> = zentriert
<table border> = Gitternetzlinien
table border=(Zahl)> = Außenrahmendicke
<table width=(Zahl)%> = Breite prozentual zum Anzeigefenster
<table width=(Zahl)> = Gesamtbreite in Pixel
<table height=(Zahl)%> = Gesamthöhe prozentual zum Anzeigefenster
<table height=(Zahl)> = Gesamthöhe in Pixel
<table cellspacing=(Zahl)> = Gitternetzdicke in Pixel
<table cellpadding=(Zahl)> = Abstand Zelleninhalt von Rand in Pixel
<table bgcolor=rgb> = Hintergrundfarbe der Tabelle
<table bordercolor=rgb> = Rahmen- und Gitternetzfarbe
<table bordercolordark=rgb> = dunkler Teil der Rahmen- und Gitternetzfarbe
<table bordercolorlight=rgb> = heller Teil der Rahmen- und Gitternetzfarbe
 
Zellenformatierungen <td align=left> = Zelle links ausrichten
<td align=center> = Zelle zentriert ausrichten
<td align=right> = Zelle rechts ausrichten
<td width=(Zahl)%> = Spaltenbreite proz. zum Anzeigefenster
<td width=(Zahl)> = Spaltenbreite in Pixel
<td height=(Zahl)%> = Zeilenhöhe proz. zum Anzeigefenster
<td height=(Zahl)> = Zeilenhöhe in Pixel
<td valign=top> = Zelle oben ausrichten
<td valign=middle> = Zelle mittig ausrichten
<td valign=bottom> = Zelle unten ausrichten
<td bgcolor=rgb> = Hintergrundfarbe der Zelle
 
Grafiken einbinden    
Bild und alternativer Text <img src="Ordner/Bildname.Format alt=alternativer Text">  
Bild, alternativer Text und Ausrichtung align=left, right

zentriert

 

Skalierung durch Höhe und Weite

<img src="Bildname.Format" alt=alternativer Text align=right> <center><img src="Bildname.Format" alt=alternativer Text></center> <img src="Bildname.Format" alt=alternativer Text align=right height=Pixel- oder Prozentangabe width=Pixel- oder Prozentangabe>  
Horizontale Linien (size= Stärke, width=Breite, align=Ausrichtung) <hr size="2" width=120 align="center">  
Links - Verweise    
Verweise innerhalb einer Datei Anker in Datei setzen: <a name="Bezeichner"> Ende </a>
Verweis zu Anker: <a href="#Bezeichner">Zum Ende</a>
 
Link auf eine Datei innerhalb des Verzeichnisses <a href="datei.htm">Verweistext</a>  
Weltweite Verweise <a href="http://www.seifert-web.de"> Verweistext </a>  
Verweis und Aufruf einer E-Mailadresse <a href="mailto:name@seifert-web.de.de"> Hinweise und Kritiken </a>  
Verweise mit Grafiken <a href="start.htm"><img src="Bildname.Format"></a>