/* Wiederholung */

Inhalte:

  • Aufbau einer HTML-Seite
  • HTML-Elemente
  • Stile (CSS) und HTML

Aufbau einer HTML-Seite:

   <doctype ...>
   <html>
   <head>
       .... hier folgen unsichtbare Zusatzangaben zur Seite

   </head>
   <body>
      ... und hier Struktur und Inhalte

   </body>
   </html>

Containerelemente umschließen andere Elemente: HTML HEAD BODY aber auch MAP OBJECT.

Im HEAD der Seite sind teils sichtbar, größtenteils unsichtbare Angaben zur Seite enthalten. Sichtbar ist z.B. der Seitentitel (in der Browser-Fensterzeile, bei gespeicherten Lesezeichen, bei Ausdrucken als Überschrift):

  <head>
  <title>Seitentitel</title>
      ....
  </head>

Weiterhin im HEAD möglich:

  • Verwendete Zeichencodierung,
  • Autor, Schlagworte, Inhaltsbeschreibung, Datum,
  • Anweisungen für Suchmaschinenroboter (’Bots’),
  • Referenzierung zu externen Stylesheets, Javascripts etc.,
  • Referenzierung zu einem Website-Icon (favicon),
  • Javascriptfunktions- oder Stiledefinitionen (seitenbezogen),
  • Angabe zu Newsfeeds (RSS etc.),
  • spezielle Anweisungen, z.B. Page Refresh bzw. Umleitung.

HTML-Elemente:

Es gibt HTML-Inline- und Blockelemente. Unterschied: Blockelemente erzeugen einen Zeilenumbruch und eine Leerzeile (einen Paragraphen). Kann aber mit CSS verändert werden ( Display: Inline / Block …).

Blockelement:

<p>Text, Text, Text</p>

Inline-Element:

<img src=”mypicture.jpg” />Text direkt neben dem Bild

Schreibweise:

HTML-Elemente werden klein geschrieben und sind von spitzen Klammern eingeschlossen.

<abbr title=”Hochschule für Grafik und Buchkunst”>HGB</abbr>

Die HTML-Anweisungen beginnen mit einem Start- und enden mit einem Schlusselement - mit wenigen Ausnahmen wie <br /> oder <hr />.

Beispiel:

<a href=”http://www.tralala.de”>Hier gehts zum Paradies</a>

aber:

Nach Zeilenumbruch folgt eine horizontale Linie:<br /><hr />

Kommentare in HTML:

<!– hier folgt ein Kommentar –>

Inhalte in HTML-Elementen:

Text wird mit entsprechenden Textverarbeitungsprogrammen geschrieben, Bilder vorher mit entsprechenden Programmen bearbeitet.

Das Website-Management bzw. Dateimanagement, schreiben der HTML-Seiten und einfügen der Inhalte erfolgt mit einem entsprechenden HTML-Editor wie Dreamweaver oder KompoZer.

Bei Textinhalten ist zu beachten, dass jeglich Vorformatierung wie beispielsweise Texteinrückung durch Leerzeichen verloren geht.

Ausnahme: Verwendung des HTML-Elementes <pre>, in erster Linie bei Programmcode in HTML-Seiten.

Schreiben Sie den Text direkt im HTML-Editor, können Sie lediglich Text und einige Sonderzeichen verwenden. Wenn Sie z.B. Zeilenumbrüche zur besseren Lesbarkeit der HTML-Seite einfügen, werden diese nicht dargestellt. Die Formatierung des Textes erfolgt später durch Stilangaben (CSS).

Stile (CSS) und HTML:

Klare Trennung von Design und Inhalten (Strukturelemente, Texte, Bilder etc.). Mehr zu Stilen im Beitrag Stylesheets, CSS-Syntax, CSS in HTML

Druckversion des Beitrags anzeigen und ausdrucken