Einführung in HTML

Einführung in HTML

In diesem Tutorial möchte ich die wichtigsten Grundlagen von HTML erklären. Fehler können natürlich nicht ausgeschlossen werden und für Tipps bin ich natürlich dankbar.


Wie überall gilt, einfach Dinge ausprobieren. Dadurch kann man schon eine Menge lernen.

Was ist HTML ?

HTML (Hypertext Markup Language) ist die Sprache in der Webseiten geschrieben sind. Diese Sprache beschreibt in Form von Tags, wie eine Seite aussieht. Der Browser interpretiert die Tags und stellt sie entsprechend dar. Über einen Tag kann z.b. ein Bild eingebunden werden, oder der Text in einem bestimmten bereich als Fett markiert werden.

Entwickelt wurde HTML vom Physiker Tim Berners Lee. Er hat 1990 HTML entwickelt um Dokumente miteinander zu verlinken zu können. Diese Links werden auch als Hyperlink bezweichnet. Wie wir alle Wissen, hat sich das www heute zum größten Dienst des Internets entwickelt und ist aus unserem Alltag nicht mehr weg zu denken.

Wie beginne ich mit dem Schreiben einer HTML Seite?

Um eine Homepage zu erstellen gibt es viele verschiedene Programme. Zwei Beispiele sind Dreamweaver von Macromedia oder Frontpage von Microsoft.

Mit diesen Programmen kann man sich mit einer grafischen Oberfläche seine Internetseite zusammen klicken. Grundsätzlich ist gegen solche Software nichts zu sagen.

 

Wer allerdings professionell Webseiten erstellen möchte sollte wissen was im Hintergrund passiert. Eine gute Kenntniss von HTML ist also von großem Vorteil und für komplexe Seiten unerlässlich. Spätestens wenn Skriptsprachen wie PHP ins Spiel kommen, ist man auf HTML Kenntnise angewiesen

 

Für den Anfang ist es also ausreichend wenn man einen einfachen Editor wie Notepad oder einen ähnlichen Editor unter Linux verwenden. Für spätere Projekte kann man sich dann für einen komplexen Editor entscheiden.

Die erste HTML Seite

Jetzt kräpeln wir die Ärmel hoch, holen uns noch eine Tasse Kaffee und dann geht's los.

 

Wir öffnen den Editor und schreiben folgendes hinein:

<html>
   <head>
      <title>Hallo Titel</title>
   </head>
   <body>
      Hallo Welt
   </body>
</html>

Diesen Text speichern wir nun z.b. unter "meine-erste-htmlseite.htm".

Die Endung ".htm" ist hierbei sehr wichtig.

Nun gehen wir ins Dateisystem an die Stelle wo wir unsere Seite gespeichert haben und öffnen diese.

Die Datei sollte automatisch mit Ihrem Internetbrowser geöffnet werden. Wenn nicht, öffne deinen Browser und öffne die Datei über "Datei -> Öffnen".

 

Wenn wir die Datei geöffnet haben sollten wir soetwas sehen:

Die HTML Tags

So schnell haben wir unsere erste HTML Seite erstellt. Als Belohnung gönnen wir uns einen großen Schluck aus der Kaffetasse und dann geht es weiter.


Du hast dich bestimmt gefragt was diese Dinger in den Klammern sind, oder?
Diese Dinger bezeichnet man als Tags. Diese Tags sind Anweisungen für den Browser, damit er versteht wie er die Seite darstellen muss. Die meisten Tags (aber nicht alle), haben einen Teil zum öffnen und einen Teil zum schliessen. Der Teil zu schließen wird durch einen Schrägtrich (Slash) gekennzeichnet. In XHTML haben alle Tags einen öffnenden und schliessenden Teil, Tags die das bei HTML nicht hatten haben in sich selbst einen schliessenden Tag z.b. <br>
ist dann <br/>

HTML Tags kann man ineinander verschachteln. Dadurch sind sehr kreative Kombinationen möglich.

Unbekannte Tags werden vom Browser ignoriert, dadurch kann ein alter Bowser auch neue Seiten darstellen ohne das die Tags interpretiert werden.

Nun mal eine Erklärung zu den einzelnen Tags:

 

<html>

 

Dieser Tag sagt dem Browser: "Hallo Browser, hier beginnt das HTML Dokument". Wie wird dieser Tag wohl beendet? Durch </html>, genau !!!

<head>

 

Dieser Tag sagt dem Browser: Lieber Browser, hier beginnt der Kopf des HTML Dokuments. Im Header werden einige Informationen zur Seite abgelegt, wie z.B. ein Titel oder auch Meta Informationen für Suchmaschinen.

 

Und weil wir auch in den Kopf (head) des Dokuments nichts mehr rein schreiben wollen, sagen wir dem Browser auch gleich noch, das der Kopf (head) hier zuende ist.

</head>

Den Kopf unseres Dokuments haben wir jetzt schon fertig. Aber wir wollen ja auch noch unsere eigentliche Seite gestallten. Das geschiet im Körper (body) der Seite. Damit nicht nur wir, sondern auch der Browser das weiss, müssen wir mit <body> den Body beginnen.

<body>

 

Aber auf der Seite selber soll ja auch etwas drauf stehen, unsere Nachricht an die Welt des Internets.

Weil das unsere erste Seite ist, sagen wir den Leuten dadraussen natürlich erstmal ?Hallo?. Wir schreiben also unsere Nachricht:

 

Hallo Welt

 

Damit ist unsere kurze und knackige Nachricht erstmal vorbei. Mit der Nachricht der Seite ist auch der Körper der Seite zuende. Also müssen wir mit </body> den Körper beenden.

 

</body>

 

Da der Körper (body) unsere Seite zuende ist, ist jetzt auch unser HTML Dokument zuende. Die teilen wir dem Browser mit indem wir den Endtag des HTML Dokuments aufschreiben:

 

</html>

 

Eigentlich war das doch garnicht schwer. Oder?

Hier eine Übersicht der Tags die wir eben gelernt haben:

  • Start Tag: <html> End Tag: </html>
  • Start Tag: <head> End Tag: </head>
  • Start Tag: <body> End Tag: </body>


Diese Tags kann man schnell wieder vergessen. Es wäre ja schön wenn wir uns in unser HTML Dokument mit reinschreiben könnten was die Tags bedeuten. Aus diesem Grund gibt es Kommentare.

Auf der nächsten Seite geht es darum, wie du mit Kommentaren in HTML für den Besucher unsichtbare Kommentare hinterlegen kannst, und wie du mit Überschriften den Text deiner Webseiten strukturieren kannst.

 

Navigation