Beispielseite
<!doctype html> <!-- Angabe des HTML-Dialekts, hier HTML5 -->
<html lang="de">
<head>
<title>Die Testseite</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
table, th, td {
border: 1px solid red;
padding: 3px;
}
</style>
</head>
<body style="background-color:#FFFF00">
<h1>Das ist eine Überschrift</h1>
<p>Und hier ein Textabschnitt mit einem erzwungenen Zeilenumbruch <br>,<br>
<strong>wichtiger Text</strong> und <em>hervorgehobener Text</em></p>
<p style="text-align:center">Ich steh in der Mitte</p>
<hr>
<p>Jetzt kommt ein Bild, der nachfolgende Text fließt rechts daran vorbei.</p>
<img src="graph/waldweg.jpg" alt="Ersatztext Bild" height="300" width="200" style="float: left; margin-right:30px; margin-bottom:10px;">
<p>Nun versuche nach dem ":" viel Platz zu lassen:| |Weiter</p>
<p>Aber mit <em>&nbsp;</em> gehts:| |Weiter</p>
<h3>Hier eine Punktliste:</h3>
<ul>
<li>erster Eintrag</li>
<li>zweiter Eintrag</li>
</ul>
<h3>Eine nummerierte Liste:</h3>
<ol>
<li>erster Eintrag</li>
<li>zweiter Eintrag</li>
</ol>
<h3 style="clear:both">Eine Tabelle</h3> <!-- clear:both beendet das Umfliessen -->
<table>
<tr>
<th>Datum</th>
<th>Einkauf</th>
<th>Verkauf</th>
</tr>
<tr>
<td>12.3.2001</td>
<td>200 DM</td>
<td>300 DM</td>
</tr>
<tr>
<td>13.5.2001</td>
<td>300 DM</td>
<td>50 DM</td>
</tr>
</table>
<p> </p> <!-- Erzwungener Abstand -->
<p>© Oliver Mezger 3.11.2018 <a href="https://mezdata.de" target="_blank">mezdata.de</a></p>
</body>
</html>
Gut zu sehen ist die geschachtelte Struktur, ein HTML-Dokument beginnt mit einem <html> Tag und endet mit einem </html> Tag.
Head-Abschnitt
<title>Die Testseite</title> Hier steht zwingend der Titel des Dokuments:
Weiter können Informationen über das Dokument, den Autor, usw. als Meta-Tags abgelegt werden.
<meta charset="UTF-8"> gibt die Zeichenkodierung des Dokuments an.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> legt das Sichtfenster fest.
Style-Sheets für das ganze Dokument werden hier verlinkt: <link rel="styleSheet" href="webpub.css"> oder direkt definiert:
<style> ... </style>
Body-Abschnitt
Enthält den sichtbaren Teil des Dokuments.
Attribute in Tags
Im Body-Tag konnte früher ein Attribut für die Hintergrundfarbe gesetzt werden: <body bgcolor="#FFFF00">
In HTML5 wird heute dafür CSS verwendet: <body style="background-color:#FFFF00"> (Beispiel für direktes CSS im Tag)
Hinweis zu Farben:
Farben können auch durch Hexadezimalzahlen definiert werden, damit sind feinere Abstufungen möglich:
Schema ist "#rrggbb" mit rr Rotwert, gg Grünwert, bb Blauwert. Beispiele:
Farbname | Hex-Darstellung | Kurzschreibweise | Farbe |
---|---|---|---|
white | #FFFFFF | #FFF | |
black | #000000 | #000 | |
red | #FF0000 | #F00 | |
green | #00FF00 | #0F0 | |
blue | #0000FF | #00F | |
yellow | #FFFF00 | #FF0 | |
? | #FFCC00 | #FC0 |
Überschriften Tags <h1>...<h6>
HTML unterscheidet 6 Überschriftenebenen, um Hierarchieverhältnisse in Dokumenten abzubilden. <h1>Das ist die Testseite</h1>
Abschnitts-Tag <p> (Paragraph)
<p>Und hier ist ganz normaler Text,<br> ein Zeilenumbruch wird mit dem <br> erzwungen.
<strong>wichtiger Text</strong> und <em>hervorgehobener Text</strong></p>
<p style="text-align:center">Ich steh in der Mitte</p> Mit CSS kann der Text zentriert werden.
Horizontale Linien Tag <hr>
Mit diesem Tag kann eine Linie zum optischen Trennen von Abschnitten eingefügt werden.
Bilder und Graphiken
Bilder werden mit dem Image-Tag eingefügt:
<img src="graph/waldweg.jpg" alt="Ersatztext Bild" height="300" width="200" style="float: left; margin-right:30px">
die Angabe der Height- und With-Attribute ist optional, sie erleichtern dem Browser das Rendern der Seite, da er schon vor dem Empfang des Bildes seine Größe kennt. Mit dem float: left wird dem Browser mitgeteilt, daß das Bild links stehen soll und folgende Objekte rechts neben dem Bild dargestellt werden. margin-right:30px erzeugt einen 30 Pixel breiten Abstand rechts neben dem Bild. Das alt="Ersatztext Bild" zeigt einen Ersatztext an solange das Bild geladen wird, oder wenn das Bild nicht angezeigt wird (toter Link oder für Blinde).
Punkteliste <ul> (ul = unordered list = unsortierte Liste)
<ul>
<li>erster Eintrag</li> (li = list item = Listeneintrag)
<li>zweiter Eintrag</li>
</ul>
Ziffernliste <ol> (ol = ordered list = numerierte Liste)
<ol>
<li>erster Eintrag</li>
<li>zweiter Eintrag</li>
</ol>
Tabellen <table>
<table>
<tr> leitet eine Table-Row, eine Tabellenzeile ein. Tabellenzeilen bestehen entweder aus
<th> Table-Header, _Tabellenüberschriften oder aus
<td> Table-Data, Tabellendaten. Mit Tabellen kann ein Dokumenten-Layout vorgegeben werden.
Das Aussehen der Tabelle wurde mit CSS im head bestimmt.
Links (Verweise)
Objekte, die einen Link darstellen, werden mit dem Anchor-Tag umschlossen:
<a href="https://mezdata.de" target="_blank">mezdata.de</a>
hier wird auf die MezData-Seite verwiesen, durch das Setzen des Target-Attributs auf "_blank" soll der Browser die Seite in einem neuen Fenster darstellen.
Entwicklerwerkzeuge des Browsers nutzen
Nutzen Sie die Werkzeuge für Entwickler z.B. [Firefox Tools für Webentwickler] um die Testseite zu ergründen und die CSS-Formatierungen ab zu schalten.