Dies ist eine alte Version des Dokuments!

HTML - Lektion 2: Kommentare, Tabellen, Hyperlinks

Kommentare...

sind Anmerkungen innerhalb von Programmiersprachen oder Textbeschreibungssprachen.
können von Sprache zu Sprache unterschiedlich aussehen.
werden von der verarbeitenden Software ignoriert und haben keinen Einfluss auf das Ergebnis.
dienen als Anweisung bzw. Erklärung des Codes für den Textbearbeiter.
helfen bei umfangreichen Dokumenten, die Übersichtlichkeit im Quelltext zu behalten
hinter jeder Codezeile sind Quatsch.

Kommentare in HTML

In (X)HTML werden Kommentare durch <!- - eingeleitet und durch - - > beendet. Alles dazwischen wird nicht verarbeitet.

Beispiel:

<p>Dieser Absatz enthält <!- - einen Bereich, der ausgeblendet wird - - > einen Kommentar, der nicht angezeigt wird.</p>

Ausgabe im Browser:

 Dieser Absatz enthält einen Kommentar, der nicht angezeigt wird.

Beispiel eines schlecht kommentierten Quelltextes

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de" >
  <head>                                          <!-- hier startet der Kopf -->
    <title>Titel der Seite</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
  </head>                                         <!-- hier endet der Kopf -->
  <body>                                          <!-- alles was ab hier steht, wird im Browser angezeigt -->
   <p> Aufzählungen einer unsortierten Liste</p>  <!-- erster Textabschnitt! -->
    <ul>                                          <!-- ul steht für unsorted list-->
       <li>erster Aufzählungspunkt</li>           <!-- li steht für list item-->
       <li>zweiter Aufzählungspunkt</li>
       <li>dritter Aufzählungspunkt, der mehr Platz benötigt</li>
       <li>nach Ende keine Einrückung mehr</li>
   </ul>
 </body>
</html>

Tabellen

Tabellen in HTML werden nicht spaltenweise, sondern zeilenweise aufgebaut.

<p>eine Tabelle</p>
<table border="1">                   <!-- die Tabelle soll einen Rand der Stärke 1px haben -->
  <tr> 
    <td> Zeile 1 - Spalte 1 </td>
    <td> Zeile 1 - Spalte 2 </td>
  </tr>
  <tr>
    <td> Zeile 2 - Spalte 1 </td>
    <td> Zeile 2 - Spalte 2 </td>
  </tr>
</table>

Übung

Erstelle auf deinem Arbeitsrechner eine stundenplan.html-Datei mit deinem Stundenplan in Form einer Tabelle.
Die Wochentage sollten wie auf fwpf-WEBdesign beschrieben in sogenannten Kopfdaten stehen.
Versuche dabei, deinen Quelltext sinnvoll zu kommentieren.

Attribute

Einleitende Tags können zusätzliche Angaben enthalten. Der Wert der sogenannten Attribute wird immer in „ “ angegeben.

Beispiel:

 <h1 align="center">Diese Überschrift wird zentriert dargestellt</h1>

Durch align=„center“ wird bewirkt, dass der Text zentriert ausgerichtet wird (align = Ausrichtung, center = zentriert).

Weitere Ausrichtungs-Attribute: left, right, justify

Auch <table border=„1“> ist ein Attribut mit Wertzuweisung (s.o.)!

Übung

Finde heraus, wie das Attribut für Hyperlinks aussieht und verlinke folgende Seiten auf deiner Startseite:

AEG-Schulhomepage
deinen Stundenplan
das Informatik-Wiki
http://fwpf-webdesign.de

Sorge anschließend dafür, dass die verlinkten Seiten in einem neuen Fenster geöffnet werden.

=> Lektion 3: Urheberrechte, Verschachtelungen