Erste Homepage
Willkommen zum ersten Teil des HTML & CSS für Anfänger Tutorials.
Wenn ihr nicht genau wisst was HTML und CSS sind, dann macht euch keinen Kopf darüber, schaut euch einfach die Videoserie an und ihr werdet es verstehen.
Ladet euch das Programm notepad++ herunter um in dieser Tutorialserie aktiv zu lernen wie man eine Homepage erstellen kann.
Öffnet für unsere erste Homepage zunächst Notepad++ und erstellt eine neue Datei.
Nun bevor wir beginnen können muss ich euch noch etwas ganz wichtiges sagen. Alles was in einer Homepage angezeigt wird, befindet sich in sogenannten Tags. Wenn ihr ein Bild anzeigen lassen wollt, braucht ihr einen Tag, wenn ihr eine überschrift erstellen wollt braucht ihr einen Tag etc. etc.
Wenn wir eine Homepage erstellen wollen, müssen wir jedoch zuerst in unserer Datei den folgenden Inhalt an den Anfang unserer Datei einfügen.
<!doctype html>
Diese Zeile ist notwendig, damit das Programm das unsere Datei ausführen wird weiß, welcher Typ unser Dokument ist. Wir sagen also dem Programm “Hey – das ist eine html Datei!”
Als nächsten benötigen wir den HTML Tag, das ist die absolute Grundlage für unsere Homepage.
<html>
Inhalt unserer Homepage
</html>
Hier sehen wir schon wie ein Double Tag aufgebaut ist. Es fängt mit einem < Zeichen an, dann kommt welche Art von Tag es ist (in diesem Fall html) danach das > Zeichen. Was nach diesem Zeichen folgt, ist der Inhalt des Tags, also das was wir innerhalb ausführen möchten bzw. anzeigen möchten.
Wie es bei den runden Klammern ist, ist es auch bei den Double Tags. So muss jeder Double Tag der geöffnet wird, auch wieder geschlossen werden und das machen wir folgendermaßen: </Tagtyp>.
Jede Homepage besteht aus zwei Teilen, dem Head(Kopf) und dem Body(Körper). Der Head beinhaltet die technischen Informationen die wir nicht direkt sehen können (Key words, Titel der Homepage, Browserinformationen etc.). Der Body beinhaltet all das, was wir sehen können, also die ganzen Bilder, Texte etc.
Um einen Head zu erstellen, müssen wir einen Head Tag erstellen. In den Head fügen wir den Titel unserer Homepage ein. Fügt also folgenden Code innerhalb eures HTML Tags ein.
<head>
<title>Das ist der Titel</title>
</head>
Ihr seht also, dass der Title Tag innerhalb des Heads ist. Es ist wichtig, dass sich die Tags nicht überschneiden. Ihr dürft also nicht einen Head Tag öffnen, dann einen Title Tag öffnen, danach den Head Tag schließen und als letztes den Title Tag schließen. Es muss also immer der innere Tag geschlossen werden, bevor der äußere Tag geschlossen werden kann.
Als nächstes, möchten wir noch ein bisschen Inhalt auf unserer Seite erstellen. Dazu fügen wir unterhalb des geschlossenen Head Tags ein:
<body>
Das ist der Inhalt meiner ersten Homepage
</body>
Um unsere erste Homepage anzeigen zu können, speichern wir unsere Datei als index.html. Es ist wichtig, dass wir genau diesen Datentypen wählen. Als nächstes öffnen wir diese Datei und hätten damit unsere erste Homepage erstellt.
Der Titel der Seite wird oben angezeigt und auf unserer Seite selbst wird “Das ist der Inhalt meiner ersten Homepage” angezeigt.
Damit wären wir mit diesem Tutorial fertig. Im nächsten Tutorial werden wir uns um Header Tags kümmern.