HTML-Tutorial


  • HTML steht für „Hypertext Markup Language“ und ist eine Auszeichnungssprache zur Strukturierung von Webseiten

  • HTML wurde 1989 am CERN entwickelt und wird heute vom World Wide Web Consortium weiterentwickelt
  • ...mehr lesen...


  • HTML-Seiten bestehen aus einem Satz von HTML-Tags, mit denen die Elemente einer Webseite semantisch spezifiziert werden
  • HTML-Elemente bestehen i. d. R. aus einem Start-Tag, einem End-Tag und den dazwischen liegenden Element-Inhalt
  • ...mehr lesen...


  • HTML-Seiten können mit jedem beliebigen Text-Editor erstellt werden
  • HTML-Seiten können direkt im Browser, über einen lokalen Webserver oder über einen Webhoster angezeigt werden
  • ...mehr lesen...


  • In diesem Kapitel wird gezeigt, wie der Microsoft IIS-Server aktiviert, eine HTML-Seite mit dem Windows-Editor erstellt und vom Browser aus gestartet werden kann
  • Außerdem gibt es am Ende des Kapitels ein paar Aufgaben, um eigene Erfahrungen beim Erstellen von HTML-Seiten zu sammeln
  • ...mehr lesen...


  • Überschriften können in HTML in sechs Größen mit „<h1>...</h1>“, für die größte Überschrift, bis „<h6>...</h6>“, für die kleinste Überschrift, definiert werden
  • Normaler Text wird mit dem Absatz-Element („<p>...</p>“) definiert
  • Weitere in diesem Kapitel gezeigte Elemente sind der Zeilenumbruch („<br />“), der Textumbruch („<wbr />“) und die horizontale Linie („<hr />“)
  • ...mehr lesen...


  • Mit Hilfe von Formatierungs-Tags kann der Text auf einer Webseite formatiert werden
  • Mit dem Fettdruck-Element („<b>...</b>“) kann Text fett und mit dem Kursivschrift-Element („<i>...</i>“) kursiv dargestellt werden
  • Weitere in diesem Kapitel behandelten Elemente sind <big>...</big>“ (Text größer), <small>...</small>“ (Text kleiner),  „<sub>...</sub>“ (Text tiefer gestellt) und <sup>...</sup>“ (Text höher gestellt)
  • ...mehr lesen...


  • Mit dem Element „<ins>...</ins>“ kann Text unterstrichen und mit <del>...</del>“ kann Text durchgestrichen werden
  • Weitere in diesem Kapitel behandelten Elemente sind <blockquote>...</blockquote>“ (Text einrücken), <abbr>...</abbr>“ (Abkürzungen), <q>...</q>“ (Text in Anführungsstriche ) und <pre>...</pre>“ (Vordefinierter Text)
  • ...mehr lesen...


  • Mit dem Bild-Element („<img src=“bsp.png“ />“) können Bilder in HTML-Seiten eingebunden werden
  • Mit dem „src-Attribut wird der Pfad und der Name des Bildes angegeben
  • ...mehr lesen...


  • Mit Link-Elementen („<a href=“...“>...</a>“) können HTML-Dokumente miteinander verknüpft werden
  • Das Ziel wird mit Hilfe des „href-Attributs angegeben
  • ...mehr lesen...


  • Es gibt in HTML „Ungeordnete Listen“, „Geordnete Listen“ und Beschreibungslisten
  • Mit dem „ul“-Element können „Ungeordnete Listen“, mit dem  ol"-Element „Geordnete Listen" und mit den „dl"-, „dt"- und „dd"-Elementen Beschreibungslisten erstellt werden
  • ...mehr lesen...


  • Tabellen werden in HTML mit dem „table“-Element  (<table>...</table>“) erstellt
  • Die Tabellenzeilen werden mit dem „tr“-Element (<tr>...</tr>“) und die Tabellenelemente mit „td“-Element (<td>...</td>“) erstellt
  • ...mehr lesen...


CSS

  • CSS steht für Cascading Style Sheets und ist eine Stylesheet-Sprache mit der Elemente einer Webseite formatiert werden können
  • Inline-Styles werden mit Hilfe des „style“-Attributs direkt im Start-Tag des zu formatierenden Elements definiert
    (<... style=“Styletyp1:Wert;Styletyp2:Wert;...;“>...</...>)

  •  ...mehr lesen...



  • Das „div“-Element (<div>...</div>) ist ein Blocklevel-Element, welches dazu dient, andere HTML-Elemente zu gruppieren
  • Das „span“-Element (<span>...</span>) ist ein Inline-Element, mit dem andere Inline-Elemente formatiert werden können
  • ...mehr lesen...


  • Mit dem „iframe“-Element (<iframe>...</iframe>) kann eine HTML-Seite in eine andere HTML-Seite eingebunden werden
  • Mit Hilfe des „src“-Attributs wird die Adresse der einzubindenden HTML-Seite angegeben
  • ...mehr lesen...


  • Mit dem „form“-Element (<form>...</form>) kann ein Formular, bestehend aus mehreren Formularelementen, erstellt werden
  • Mit Hilfe des „input“-Elements (<input ... />) können einzelne Formularelemente definiert werden
  • Mit dem „type“-Attribut (<...type="text" />) wird der Typ des Formularelements (Textfeld, Button, etc.) spezifiziert
  • ...mehr lesen...


  • Mit dem „select“-Element (<select>...</select>) werden Auswahllisten und mit dem „option“-Element (<option>...</option>) die einzelnen Listenelemente erstellt
  • Mit dem „label“-Element (<label for="...">...</label>) werden Beschriftungen für Formular-Elemente erstellt
  • Mit dem „fieldset“-Element (<fieldset>...</fieldset>) kann ein Rahmen um einen Block von Formular-Elementen erstellt werden
  • ...mehr lesen...


  • Zur Eingabe von Datums- und Zeitangaben gibt es die Input-Typen „date“, „datetime“, „time“, month und week
  • Mit <input type=“number“> kann ein Formular-Element erstellt werden, das nur die Eingabe von Zahlen erlaubt

  • Mit <input type=“color“> kann ein Farbauswahl-Element erstellt werden

  • ...mehr lesen...


  • Mit dem „audio“-Element (<audio>...</audio>) können Audio-Dateien auf Webseiten verwendet werden
  • Mit dem „video“-Element (<video>...</video>) können Video-Dateien auf Webseiten verwendet werden
  • Mit dem „source“-Element (<source>...</source>) können Quellen für Audio- und Video-Elemente angegeben werden
  • ...mehr lesen...


  • Mit dem „object“-Element (<object>...</object>können verschiedenste Objekte auf Webseiten eingebunden werden
  • Mit dem „param“-Element (<param />) können Quellen für das „object“-Element angegeben werden
  • Mit dem „embed“-Element (<embed />) können ebenso verschiedenste Objekte auf Webseiten eingebunden werden
  • ...mehr lesen...


  • Mit dem „meta“-Element (<meta ... />können Metadaten für Webseiten definiert werden
  • Mit dem „name“-Attribut kann angegeben werden, um welche Art von Metadaten es sich handelt und mit dem „content“-Attribut die eigentlichen Metadaten
    (<meta name="author" content="Max Muster" />)
  • ...mehr lesen...