Schritt für Schritt lernen
die eigene Website zu erstellen

Jetzt das HTML-Seminar als
Video-Tutorial mit über 210 Videos,
Gesamtspielzeit über 24 Stunden
Video-Kurs HTML5+CSS+Webdesign

Videokurs HTML + CSS + Webdesign erstellen

HTML-Grundlagen

Was ist HTML?

HTML ist eine „Strukturierungssprache“, mit der dem Browser „gesagt“ wird, wie die Inhalte strukturiert sind: welche Bereiche (Buchstaben, Wörter, Sätze) z.B. Überschriften sind, was Absätze sind, was fett ausgegeben werden soll – HTML ist keine Programmiersprache – man beschreibt, wie eine Seite im Browser ausgegeben werden soll (nicht mehr, nicht weniger).

Dazu werden über das Internet Dateien übertragen, die Texte und HTML-Befehle enthalten – ab jetzt als HTML-Seite bezeichnet. Das Bedeutsame dabei ist, dass die HTML-Seiten in Klartext übertragen werden, und so jeder sich ansehen kann, wie das eigentlich funktioniert. Einfach mal im Browser auf "Ansicht -> Quellcode anzeigen" gehen. Schaut man sich den Quellcode an, ist das zunächst Verwirrende, dass zwischen den Texten noch mehr auftauchen kann.

Es gibt also nicht nur den eigentlichen Text, sondern auch Anweisungen, wie einzelne Textbereiche angezeigt werden sollen. Man sagt z.B. dem Browser also, diesen Text normal anzeigen und nun zeige ab hier die Schrift hervorgehoben an. Ab jetzt wird der Text fett ausgegeben. Ein paar Worte später dann sagt man wieder dem Browser, aber hier die Hervorhebung wieder ausschalten.

In HTML also haben wir verschiedene Befehle (HTML-TAGs) für:

  • verschiedene Überschriften
  • Absätze
  • Hervorhebungen wie Fett bzw. Kursiv
  • verschiedene Aufzählungen
  • und verschiedene Befehle, um Inhalte zu strukturieren

Das geschieht über HTML-Befehle, bzw. aus dem Englischen den HTML-TAGs.

Aufbau von HTML-TAGs – HTML Befehlen

Was ist nun ein HTML-TAG? - Als HTML-TAG wird ein einzelner HTML-"Befehl" bezeichnet.

Dabei kommt der Begriff TAG aus dem Englischen und hat dort die Bedeutung von "Etikett, Anhänger, Aufkleber, Marke, Kennzeichnung, Auszeichner". Am besten lässt es sich mit dem Begriff "Kennzeichnung" veranschaulichen. Man kennzeichnet Bereiche, damit diese in bestimmter Weise angezeigt werden sollen. Dabei kann man dann sagen, hier beginnt der Bereich und dort hört er wieder auf.

Am Beispiel wird der HTML-TAG von 2 Absätzen gezeigt

<p>erster Absatz, der sehr lang sein kann</p>
 
<p>zweiter Absatz - und nach der Definition bewirken 
Absätze immer einen Abstand (egal, ob es sich um Text handelt 
oder bei Schuhen zwischen Straße und Träger)</p>

Dies erzeugt die folgende Ausgabe im HTML-Browser:

erster Absatz, der sehr lang sein kann

zweiter Absatz - und nach der Definition bewirken Absätze immer einen Abstand (egal ob es sich um Text handelt oder bei Schuhen zwischen Straße und Träger)

3 Dinge sind wichtig zu beachten:

  1. HTML-TAGs haben immer vom Aufbau ein Kleiner-als-Zeichen und Größer-als-Zeichen < .. >
  2. Zwischen den < > befindet sich die Anweisung - hier p. Wie so vieles im Leben ist das eine Abkürzung von dem englischen "paragraph" (Absatz, Abschnitt). Dementsprechend sind alle Befehle nur Abkürzungen von englischen Begriffen. So lassen sich die Befehle gut merken (vorausgesetzt, man kann Englisch).
  3. Alle HTML-TAGs sind immer klein zu schreiben! Dies ist für XHTML und valide Webseiten wichtig.

Alles hat ein Anfang und ein Ende. So auch praktisch fast jeder HTML-TAG.

Aufbau Anfangs- und End-TAGs

Weiterhin gibt es einen Anfangs-TAG und einen End-TAG. Sonst hätten wir nicht die Möglichkeit, mehrere Absätze zu machen bzw. müssten fett geschriebene Texte bis zum Ende der Seite immer fett sein. Der End-TAG ist fast identisch mit dem Anfangs-TAG, mit dem einzigen Unterschied, dass nach dem Kleinerzeichen (<) ein Schrägstrich kommt. Dieser ist auf der Tastatur beim 7er zu finden.

Der HTML-End-TAG hat also folgendes Aussehen:

</befehl>

Merke: HTML strukturiert eine Seite

Merke: HTML strukturiert eine Seite! HTML ist nicht für das Design da (das war einmal vor langer Zeit). Guter Stil ist also, HTML-TAGs zum Strukturieren des Inhalts zu nutzen. Design kommt über CSS

Alle HTML Befehle strukturieren – was macht also das Design? Für Design ist CSS zuständig (was später im Kurs kommt)! Diese Trennung von Inhalt (+ Struktur) und Design zeichnet die aktuelle HTML-Nutzung aus. Früher wurde lustig alles vermischt – heute ist diese Trennung sehr wichtig. Im ersten Teil des HTML-Tutorial werden wir uns um alle wichtigen HTML-Befehle kümmern und im zweiten Teil dann mit CSS das Design über das in HTML erstellte Grundgerüst stülpen. Hört sich komplizierter an, als es ist. Sie werden sehen, dass es ganz einfach ist.

Facebook und Google+

Sehr geehrte Nutzer/innen dieser Website! Wir würden uns freuen, wenn Sie uns durch Facebook oder Google+ unterstützen würden - sei es durch ein Like/+1 oder das Teilen dieser Seite. Allerdings legen wir Wert auf Datenschutz und möchten nicht, dass diese Netzwerke Daten von Ihnen erhalten, sollten Sie dies nicht wünschen. Deshalb sind die entsprechenden Buttons bei uns standardmäßig deaktiviert.

Durch einen Klick auf einen der unteren Buttons stimmen Sie der Nutzung/Speicherung Ihrer Daten (in uns unbekanntem Ausmaß, uns unbekannten Orten und uns unbekannter Weise) zu und erhalten Zugriff auf die Buttons. Wir bitten um Ihr Verständis und freuen uns über Ihre Unterstützung :)

X

Wenn Sie einen Fehler finden, bitte mitteilen
(egal ob Schreibfehler oder inhaltlicher Fehler).

Mit Maus fehlerhafte Stelle markieren und übernehmen mit folgendem Button:

Fehler:

Verbesserung:

Name/E-Mail (damit ich auch Danke sagen kann)

eBook HTML-Seminar.de Videokurs HTML + CSS + Webdesign erstellen

Video-Tutorial: über 210 Videos,
Gesamtspielzeit über 24 Stunden
Video-Kurs HTML5+CSS+Webdesign

© 2000-2015 Axel Pratzner • www.html-seminar.de • Stand 18.8.2015
Wir freuen uns über Weiterempfehlungen und Links zu www.html-seminar.de