CodeGym /Java Kurs /Frontend SELF DE /Einführung in HTML

Einführung in HTML

Frontend SELF DE
Level 1 , Lektion 1
Verfügbar

1. HTML-Dokument

Wie du wahrscheinlich schon weißt, bestehen alle Websites im Internet aus Webseiten. Sie werden auch HTML-Seiten genannt. Aber was genau ist das eigentlich?

Ein HTML-Dokument ist eine Textdatei, die aus Text und Tags besteht. Tags wurden schon in den 70er Jahren des letzten Jahrhunderts erfunden, damit Menschen in Dokumenten zusätzliche Informationen für Programme hinzufügen können, die diese Dokumente verarbeiten.

Ein Tag ist ein Schlüsselwort (d. h. ein spezielles Wort), meistens auf Englisch, das in spitzen Klammern steht (den Zeichen 'größer als' und 'kleiner als'), damit Programme nicht zwischen Tags und normalen Wörtern durcheinanderkommen.

Beispiel:


<img>

Ein Tag kann auch verschiedene zusätzliche Informationen enthalten, die für das Programm, das das Dokument verarbeitet, nützlich sind.

2. Beispiel eines HTML-Dokuments

Das beliebteste Programm zur Arbeit mit Tags ist der Browser. Alles, was dir dein Browser anzeigt, ist das Ergebnis seiner Verarbeitung der Tags, die im HTML-Dokument enthalten sind.

Angenommen, dein Browser zeigt dir eine solche Seite an:

Manul

Der Manul ist ein Raubtier aus der Familie der Katzen. Er sieht aus wie eine Hauskatze, unterscheidet sich aber durch seinen kürzeren massiven Körper und seine Beine, runde Pupillen, niedrige Ohren sowie sein langes dichtes Fell.

So sieht das entsprechende HTML-Dokument aus:

HTML
      
<h1>Manul</h1>
<p> Der Manul ist ein Raubtier aus der Familie der Katzen. Er sieht aus 
wie eine <a href="#">Hauskatze</a>, unterscheidet sich aber durch 
seinen kürzeren massiven Körper und seine Beine, runde Pupillen, niedrige Ohren 
sowie sein langes dichtes Fell. </p>
<img src="manul.jpg">
      
    

In diesem Beispiel sehen wir Text und Tags: h1, p, a und img. Der Browser hat die Tags erkannt und den Text in den Tags in eine Überschrift, einen Link umgewandelt und ein Bild unterhalb des Textes hinzugefügt. Das ist echte Magie!

Kommentare
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION