HTML - Die Praxis!
Als erstes müssen wir uns richtig vorbereiten. Um die nötige Grundlage zu haben, brauchen wir einen Texteditor. Aber nicht den "Notepad" auf Windows. Für Windowsuser empfehle ich für den Anfang "Notepad++". Für Linuxanfänger "Gedit" und für erfahrene User "Vim".
Das zweite wichtige Utensil, ist unser Browser. Am Anfang ist es nicht wichtig welchen wir benutzen, um das HTML - Dokumente darstellen lassen zu können.
Zusammenfassung:
- Texteditor
- Browser
Als nächstes Überlegt ihr euch, wo ihr das Dokument speichern wollt, damit ihr das auch wiederfindet.
Ihr habt zwei Möglichkeiten, die Datei mit folgender Dateiendung zu speichern.
- *.html
- *.htm
------------------------------------------------------------------------------
<!DOCTYPE>
<html>
<head>
<title>
- Tabname eurer Website
</title>
</head>
<body>
Hier steht der Text deiner Website. </br> <!-- Das ist ein Kommentar -->
</body>
</html>
------------------------------------------------------------------------------
Abb. 1, Grundgerüst HTML
So, nun die Erklärung:
Diese Klammern nennt man "Tag" (Nein, das hat nichts mit Tag und Nacht zu tun :) ). Jeder dieser Tags hat eine bestimmte Funktion in der Datei. Dazu aber nochmal später.
Wenn ein Tag geöffnet wird, also z.B. <body> muss diese auch widderum geschlossen werden -> </body>. Das erfolgt mit diesem Slash " / ". Es gibt auch Ausnahmen, z.B., </br> (Zeilenumbruch), das kann man auch ohne offenen Tag schreiben, siehe oben: Abbildung 1.
An sich ist die Groß - und Kleinschreibung egal, jedoch solltet ihr euch einen ordentlichen Schreibstil angewöhnen, um den Überblick zu behalten. Dazu gehört es auch regelmäßig (nicht zu viele) Kommentare zu schreiben. Diese werden wie oben so geschrieben: <!-- Kommentar -->.
Zum Aufbau:
So, nun die Erklärung:
Diese Klammern nennt man "Tag" (Nein, das hat nichts mit Tag und Nacht zu tun :) ). Jeder dieser Tags hat eine bestimmte Funktion in der Datei. Dazu aber nochmal später.
Wenn ein Tag geöffnet wird, also z.B. <body> muss diese auch widderum geschlossen werden -> </body>. Das erfolgt mit diesem Slash " / ". Es gibt auch Ausnahmen, z.B., </br> (Zeilenumbruch), das kann man auch ohne offenen Tag schreiben, siehe oben: Abbildung 1.
An sich ist die Groß - und Kleinschreibung egal, jedoch solltet ihr euch einen ordentlichen Schreibstil angewöhnen, um den Überblick zu behalten. Dazu gehört es auch regelmäßig (nicht zu viele) Kommentare zu schreiben. Diese werden wie oben so geschrieben: <!-- Kommentar -->.
Zum Aufbau:
- <html></html>
- <head></head>
- <title><title>
- <body></body>
Also, hier werden wir nur den Inhalt schreiben und durch Verlinkung und Verschachtelungen in CSS formatieren.
Nachdem ihr nun alles abgespeichert habt, könnt ihr die Datei öffnen (am besten mit Text ^^) und den ersten großen Schritt, zu einer eigenen Website betrachten.
Im nächsten Teil zeig ich euch Attribute und die Vorbereitung für die Formatierung in CSS, was ein eigener Teil im Blog sein wird.
Wäre es möglich, wenn es schon eine Abbildung ist, auch eine Grafik reinzustellen ? ;)
AntwortenLöschenAm Design kann man ja noch feilen
Ansonsten, nette Sache :D
Vorallem finde ich es sehr verständlich erklärt.
Na denn noch Viel Erfolg