Benutzer-Werkzeuge

Webseiten-Werkzeuge


 [[htmlcss:html2]] 

View page as slide show

Einführung

HTML - Lektion 2

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

  1. Erstelle auf deinem Arbeitsrechner eine stundenplan.html-Datei mit deinem Stundenplan in Form einer Tabelle.
  2. Die Wochentage sollten wie auf http://fwpf-webdesign.de/ beschrieben in sogenannten Kopfdaten stehen.
  3. 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:

  1. QG-Schulhomepage
  2. deinen Stundenplan
  3. eine weitere Seite deiner Wahl

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

HTML/CSS Lektion 3

 [[htmlcss:html2]] htmlcss/html2.txt · Zuletzt geändert: 2012/10/25 16:30 von sbel