Meine Webseite

HTML 5 Tutorial für Beginner

Vorwort

Wenn du ein Neuling in Webseiten erstellen bist, könnte dir dieses Tutorial weiter helfen. Es geht erstmal nur um die Grundlagen von HTML 5. Zuerst solltest du dir Auf jeden Fall überlegen, warum du HTML lernen willst. Mit Webseiten kann man natürlich Geld verdienen, an wichtigster Stelle sollte aber der Spaß im Vordergrund stehen. Das Wichtigste um überhaupt mit einer Webseite zu beginnen, ist ein guter Editor. Dieser wäre zum Beispiel Notepad ++. Später kannst du natürlich ein Editor wie z.B. Adobe Dreamweaver benutzen, aber für den Anfang sollte Notepad ++ vollkommen ausreichen.

Was bedeutet HTML 5?

HTML ist eine Abkürzung für "Hypertext Markup Language". Du warst sicher schon auf vielen Webseiten unterwegs, diese basieren alle auf HTML. Es gibt also gar keine Webseiten ohne HTML. HTML ist eine websprache, der Quellcode wird also vom Webbrowser übersetzt bzw. dargestellt. Natürlich gibt es verschiedene Versionen bei HTML, wir beschäftigen uns aber erstmal mit HTML 5. Außerdem gibt es viele Verbesserungen als bei den vorherigen Versionen. Deswegen macht es auch mehr Sinn seine Webseiten mit HTML5 zu erstellen.

Das Grundgerüst

Um eine Webseite zu erstellen, brauchen wir erstmal ein Grundgerüst. Egal wie viele Webseiten man macht, das Grundgerüst sollte immer verwendet werden, um Fehler im Quellcode zu vermeiden. Das Grundgerüst sollte wie gefolgt aussehen:

grundgerüst

DOCTYPE

Der DOCTYPE sagt aus, nach welchem Standard die Website erstellt worden ist.

HTML Bereich

Der HTML-TAG umschließt den kompletten HEAD und BODY-Bereich. Der HTML-Tag beginnt unter dem Doctype und umschließt den kompletten weiteren HTML-Code. Das bedeutet, dass zwischen den HTML Tags der Quellcode folgt.

Head Bereich

In dem Head Bereich kommen die ganzen Informationen, über die Webseite. Der Titeltext der in den Tabs angezeigt wird. Die ganzen Informationen benötigt man später, um ein Webseite zu finden. Daher sollte der Titeltext vieles über die Webseite aussagen. Aber zu den Meta Tags für die Suchmaschinen kommen wir später drauf zurück.

Body Bereich

Im Body Bereich kommt der eigentliche Inhalt, der Webseite. Alles was in den Body bereich rein kommt, wird später im Browser zu sehen sein.

Meta-Tags

Nun kommen wir zu den Meta Tags, die besonders wichtig für Suchmaschinen sind. Hier ein kleines Beispiel, wie Meta Tags verwendet werden:

grundgerüst

Der Beschreibungstext wird außerdem in den Suchergebnissen von z.B. Google angezeigt. Die Beschreibung soll auch das entsprechen, was auf der Webseite zu sehen ist. Alle Seiten Informationen werden im Browser angezeigt und können Aufgerufen werden. Klicken Sie einfach auf ihre HTML Datei mit einem beliebigen Browser. Nun sollte die Seite erschienen sein, wenn auch sehr leer und weiß. Mit einem Rechtsklick auf die Seite können die Seiteninformationen angezeigt werden. Alle Informationen werden für die Suchmaschine genutzt, damit eine Webseite schnell gefunden werden kann. So sollte dies Aussehen:

Informationen

Der erste Text

Kommen wir nun zum eigentlichen Inhalt der Webseite. Alles was in den Body Tag reinkommt, wird im Browser angezeigt. Versuchen wir's mal. Schreiben Sie einfach irgendeinen Satz zwischen den Body Tags. Ist das gemacht, muss die Datei gespeichert werden damit die Änderungen auch angezeigt werden. Wichtig hierbei ist, wenn im Body Tag Absätze gemacht werden, wird dies im Browser nicht angezeigt, der Text geht also immer weiter. Um Absätze zu machen wird der "P" Tag verwendet. Dazu kommen wir aber später. Nun öffnen wir die HTML Datei mit einem beliebigen Browser. So sollte die Seite im Browser angezeigt werden:

Inhalt

Der Text wird auf der Seite angezeigt. Oben beim Tab sehen wir auch unseren Titel, den wir eingegeben haben.

Absätze mit dem P Tag

Nun, wir wissen wie man Texte auf einer Webseite darstellen kann. Was man für Texte aber oft braucht sind die Absätze. Diese werden mit dem < p > Tag dargestellt. Zwischen dem P Tag schreiben wir nun einen Satz, der wird dann als Absatz angezeigt. Der Code sollte so aussehen:

Absatz

Absatz auf Seite

So würde das Ganze auf der Seite aussehen. Wir haben's also geschafft, einen Absatz einzufügen. Später werden Absätze sehr wichtig sein, besonders bei langen Texten, damit alles Übersichtlich bleibt und nicht alles in einer Reihe steht.

Überschriften

Auf einer Webseite sollen natürlich keine Überschriften fehlen. Am besten ist es, wenn die Überschriften kurz gehalten sind. Hierbei gibt es verschiedene Größen für eine Überschrift. Überschriften werden mit den h1, h2 bis h6 Tags dargestellt. Man muss drauf achten, wann und welche Überschrift man am besten verwendet. Sinnvoll wäre es zum Beispiel, wenn pro Seite eine Hauptüberschrift da ist (h1). Die anderen Überschriften zu verschiedenen Themen kann man dann mit dem h2 Tag verwenden als Unterüberschrift. So sollte das ganze im Code aussehen:

Überschrift

Überschrift auf Seite

Es gibt viele Arten von Überschriften, ich würde aber Empfehlen Überschriften von h1-h3 zu verwenden, da die anderen Überschriften sonst zu klein werden könnten. Wir wissen also schon wie man Texte, Absätze und Überschriften macht. Nun sollten wir uns mal überlegen, welche Überschrift denn geeignet wäre für unsere Webseite. Aber erstmal schauen wir uns mal an, was der < center > Tag ist.

Der Center Tag

Der Center tag wird dafür verwendet, eine Überschrift mittig auf der Seite darzustellen. Man könnte es zum Beispiel verwenden, um die Hauptüberschrift in der mitte anzuzeigen. Kommen wir darauf zurück, wie unsere Überschrift überhaupt heißen soll. Für den Anfang nehmen wir "Willkommen auf meiner Webseite". Dies sieht dann wie gefolgt aus:

center tag

center tag auf seite

Vorab: Es ist nicht die beste Möglichkeit die Überschrift mit dem center Tag darzustellen. Aber für den Anfang sollte es reichen, später werden wir dafür aber CSS benutzen. Aber bis dahin müssen wir noch viele Grundlagen lernen.

Texte fett hervorheben - strong

Um einen Text fett hervorzuheben benutzt man den < strong > Tag. Es gibt zwar eine zweite Variante mit < b >, aber diese Methode ist eher älter. Zwischen dem "strong" Tag kommt ein beliebiges Wort, dieser wird dann auf der Webseite fett dargestellt. So könnte es im Code aussehen:

fett hervorheben

fett hervorheben

Wie man oben auf dem Bild erkennen kann, ist das Wort "meine" fett hervorgehoben. So kann man zum Beispiel wichtige Sätze oder Wörter hervorheben. Allerdings sollte damit nicht übertrieben werden. Wichtig hierbei ist, dass man den End-Tag nicht vergisst, denn sonst wird der restliche Text auch fett dargestellt.

Text kursiv hervorheben

Nun lernen wir, wie man einen Text kursiv hervorheben kann mit dem < em > Tag. Auch hier gibt es zwei Varianten und zwar mit dem < i > Tag. Es ist aber besser, wenn man den "em" Tag verwendet. Den End-Tag darf man hier auch nicht vergessen, denn sonst wird der ganze Text kursiv. So sollte es im Code aussehen:

kursiv

kursiv

Kursiv kann verwendet werden, um bestimmte Wörter zu betonen, zum Beispiel bei mündlichen Sätzen. Ganze Texte sollten nicht in kursiv stehen, da es manche Leser beim Lesen verwirren könnte.

Hyperlinks einfügen

Nun lernen wir links auf unserer Webseite einzubauen. Aber erstmal: Es gibt verschiedene Links in HTML. Zum einen die "internen Links". Die internen Links verlinken verschiedene HTML dateien auf der Seite. Zum Beispiel bei der Navigation. Durch die "externen Links" kommt man auf andere Seiten im Internet. Die Links werden im Browser Blau und Unterstrichen dargestellt. Natürlich kann man das ändern, was aber sinnlos wäre, da der Link als Link erkannt werden soll. Hier ein kleines Beispiel, welchen code man für "interne" und "externe" Links braucht:

hyperlinks