MezData-Logo Creative Commons License 453 :WEBPUBLISH: Erklärtes Beispiel

Schlüsselwörter: HTML, Überschrift, Abschnitt, Bild, Link, CSS, Listen, Tabelle

Beispielseite

Quellcode [testseite.html]
<!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 &lt;br&gt;,<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 &quot;:&quot; viel Platz zu lassen:|            |Weiter</p>
    <p>Aber mit <em>&amp;nbsp;</em> gehts:|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|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>&nbsp;</p> <!-- Erzwungener Abstand -->
    <p>&copy; 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.