HTML Einstieg

[error]Achtung dieses Tutorial befindet sich noch im Aufbau! Feedback und Vorschläge bitte über das Kontaktformular![/error]

Willkommen beim HTML Einstiegs Tutorial, dieses Tutorial soll dir die Grundlagen der Auszeichnungssprache HTML zeigen. Danach ist niemand Experte, aber man sollte sich schon einmal zurecht finden!

 

Zum Anfang sollte man sich einen geeigneten Editor besorgen, ich empfehle hier an dieser Stelle Notepad++ dieser ist OpenSource und frei verfügbar. Ich persönlich werde hier im Tutorial die Code-Ansicht des Programmes „Adobe Dreamweaver CS6“ verwenden. Es ändert sich also für euch in dieser Hinsicht nichts!
Wer aber mal die Vorzüge einer solchen IDE (Integrierte Entwicklungsumgebung) mal testen möchte, der kann sich auf der Seite von Adobe eine 30 tägige Testversion von Dreamweaver downloaden, ein Vorteil eines solchen Programmes ist, das man dort in einer sogenannten Entwurfsansicht sämtliche Änderungen und deren Auswirkungen in Echtzeit sehen kann, wird aber bei komplexen Webanwendungen später überflüssig.

Für dieses Tutorial reicht also Notepad++ und ist auch meine persönliche Empfehlung, da er für alle gängigen Sprachen ein Syntax-Highlighting (Code-Hervorhebung) bietet.

 

1. Der Anfang, Grundstruktur eines HTML-Dokumentes

Wie für Auszeichnungssprachen üblich, benötigt jedes Dokument gewisse Eigenschaften, damit der Browser später weiß mit was er es zu tun hat!
Hier im Tutorial verwenden wir die Grundstruktur für ein HTML5-Dokument, dabei handelt es sich um die neuste Version der Auszeichnungssprache.

Der Anfang jedes Dokumentes macht der sogenannte „DOCTYPE“ und hier haben wir auch schon die Vorteile von HTML5, dort ist er zum ersten mal leicht verständlich!
Hier mal der Unterschied zwischen dem HTML4 DOCTYPE und dem für HTML5:

HTML4 Traditionell:
[info]<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.01 Transitional//EN“ „http://www.w3.org/TR/html4/loose.dtd“>[/info]

HTML5:
[info]<!doctype html>[/info]

Hier sieht man schon, HTML5 ist da einfacher, auch in einigen anderen Punkten unterscheidet sich HTML5 im Grundaufbau von HTML4.
Ein jedes Dokument das ihr also anlegt, muss einen solchen DOCTYPE enthalten, aber auch andere Dinge sind wichtig, auf diese Dinge werden wir jetzt hier Stück für Stück eingehen und erklären für was diese Elemente gedacht sind:

[info]<html></html>[/info]
Diese beiden „Tags“ umschließen das komplette HTML-Dokument, der öffnende Tag „<html>“ kommt direkt nach dem DOCTYPE und der schließende Tag „</html>“ an das Ende des kompletten Dokumentes, seid HTML5 ist dieser Tag eigentlich nicht mehr notwendig, ich empfehle ihn aber Aufgrund der Kompatibilität mit älteren Browsern dennoch mitzuführen!

[info]<head></head>[/info]
Der „<head>“ Tag umschließt die Grundlegenden Informationen des HTML-Dokumentes, hier werden auch alle Informationen wie Kodierung, Sprache, Titel, usw. angegeben.

[info]<meta charset=“utf-8″>[/info]
Bei dem Tag „meta“ handelt es sich um die Angabe des Zeichensatzes für die Kodierung des Dokumentes, bei mir ist standardgemäß der Zeichensatz „UTF-8“ also Unicode. Dieser Tag gehört innerhalb des „<head>“ Elementes!

[info]<title></title>[/info]
In diesem Tag wird wie man es leicht erraten kann der Titel angegeben, auch dieser gehört in das „<head>“ Element mit rein.

[info]<body></body>[/info]
Dies ist das Hauptelement eures HTML-Dokumentes, hier könnt ihr Inhalte eintragen, diese werden dann später auf der Seite sichtbar, wenn ihr sie z.B. in einem Browser öffnet.

 

Solltet ihr bis hier alles korrekt angeordnet haben, so sollte es bei euch nun folgendermaßen in etwa aussehen:

Grundaufbau
image-231

 

Damit haben wir den Grundlegenden Aufbau hinter uns, nun können wir beginnen Inhalte einzufügen.
Beginnen wir mittels „h1“ eine Überschrift in das Dokument einzufügen, hier in meinem Beispiel nehmen wir „HTML Einstiegskurs“:

[info]<h1>HTML Einstiegskurs</h1>[/info]

Neben h1 gibt es auch h2, h3 und h4. Hier steht das h für „heading“, wobei die Zahl dahinter für die Abstufung steht, 1 ist die größte und 4 die kleinste.
Um die Überschrift optisch nun vom Rest abzutrennen fügen wir mit „<hr />“ eine Horizontale Linie ein. Darunter können wir jetzt anfangen unseren Text zu schreiben, Grafiken einfügen usw..

Hier gibt es verschiedene Formatierungs Hilfen, mit „p“ legt man eine Pharse an, also einen Textabschnitt, innerhalb diesen kann man seinen Text schreiben, gestalten usw.
Hier mal ein kleiner Demo-Text:

[info]<p>Diese Datei entstand während dem HTML Einstiegskurs, sie verdeutlicht wie ein HTML-Dokument grundlegend aufgebaut wird und wie man die typischen Standard-Operationen durchführt.<br />Neben den typischen Pharsen können wir mittels einigen Tags auch den Text <b>Fett</b> schreiben, es gibt auch <i>kursiv</i>. Andere Textformatierung wie <span style=“text-decoration: underline;“>Unterstrichen</span> oder andere kann man mittels „span“ innerhalb des Textes unter beihilfe von CSS definieren.</p>[/info]