DIY | Wir lernen HTML - Der Anfang - Teil1: Was ist hier los?

Teil 1: Was ist denn hier los?


Am Anfang war es ein Editor, der mit Inhalt gefüllt werden wollte ... so steht es in den heiligen Schriften der Nerds *g*


Hallo und Willkommen im Bereich HTML - Wir lernen das - HTML ist recht einfach zu erlernen, und dank HTML 5 welches auch mehr Dynamik erhält, nicht ganz wie PHP, aber man kann in HTML einiges von PHP nutzen. Aber jetzt sollten wir erstmal mit "einfachen" HTML anfangen. Dieser Bereich ist erstmal mehr oder weniger der Anfang, also von A bis Z. Ob und wie oft ich hier was schreiben kann, hängt davon ab, was ich gerade zu tun habe, also bitte nicht wundern, wenn es bisschen dauern kann. Ob man nun HTML noch benöntig? Ich denke schon, man sollte es kennen. Zumal es eine schöne Spielerei ist. Wissen ist Macht meine lieben!


Auszug Wiki:

Zitat

Die Hypertext Markup Language (HTML, englisch für Hypertext-Auszeichnungssprache) ist eine textbasierte Auszeichnungssprache zur Strukturierung elektronischer Dokumente wie Texte mit Hyperlinks, Bildern und anderen Inhalten. HTML-Dokumente sind die Grundlage des World Wide Web und werden von Webbrowsern dargestellt.

Wir alle haben in den Jahren öfter HTML gesehen, wie z.b. bei Webseiten die wir besuchen. Damals, oh Gott wie das klingt, es muss so 2000 gewesen sein, als Webseiten noch aussahen, wie von einem 3 Jähirgen, welche damals noch aus mehr HTML bestand, wie heute. Das sah man auch. Aber in der Zeit war es üblich so. Projekte wie Wordpress / Joomla und co kamen erst nach und nach. Gelernt habe ich meine Basics zu HTML auf der BBS in Soltau im Jahr 2000. Dies war im IT Unterricht. Sofort mochte ich HTML - da einfach zu verstehen und schnell umzusetzen. Da HTML Dateien direkt geöffnet werden können, ohne wie z.b. bei PHP auf einen Praser angewiesen zu sein, also ein Übersetzer, dies übernimmt bei den Webservern PHP und ein Modul z.b. beim Webserver Aapche ein PHP_Modul. Ebenfalls kann HTML mit CSS aufgehübscht werden, also Optisch kann man da auch einiges machen. Also wir haben schon freiheit in diesem Sinne.


Was benötigt man, um eine einfache HTML Seite zu erstellen? Das ist es, wir benötigen nur einen Texteditor, wie Notepad oder Notepad++. Ganz easy. Also von daher, sind keine weitere IDEs nötig. Browser eurer Wahl öffent dann das Dokument. Also, ich schlag vor, ihr erstellt euch auf dem Desktop einen Ordner, nennt diesen z.b. html - mehr benötigen wir erstmal nicht.


Öffent nun euren Editor, und dort fügt ihr diesen Code ein.


Code
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Meine erste Seite</title>
</head>
<body>
</body>
</html>

Das sieht erstmal alles verwirrend aus. Was ganz wichtig ist, in HTML werden die sogenannten <tags> </tags> immer mit der < geöffent und mit der > geschlossen. Um den jeweiligen Tag auch im Code zu schließen, ist es notwendig, dies mit </tag> zu tun. Sonst herrscht hier im Quellcode Chaos und das wollen wir ja nicht, oder?


Tags sind also Befehle, die wir festelgen. Ganz wichtig am Anfang:


Code
<!DOCTYPE html>
</html>

Damit weiß später der Browser, dass es sich um eine HTML Seite handelt und nicht um eine .php Datei oder anderes. Somit legen wir den Grundstein für unsere HTML Seite. Innerhalb dieses Tags, definieren wir weitere Befehle, wie den <head> bereich und <body>. Wie die Namen erkennen lassen, ist der Bereich <head> für alles über den <body> zuständig. Also z.b. den Seitentitel. Dieser wird somit nur im Fenster im Browser angezeigt, aber nicht im Body (Lesebereich). Wäre ja auch Unsinn, dort den Titel anzeigen zu lassen, oder?


Der Bereich <body> zeigt all das an, was wir sehen sollen! Texte, Links, Grafiken usw. In diesem Bereich sollten wir alles schreiben, was der Besucher bespäter auch sehen soll. Daher ist der <body> auch der Oberkörper für unsere Seite.


Code
<meta charset="utf-8">

Dieser Kolege hier ist einfach gut, weil dieser tag uns Umlaute ausschreiben lässt, wie z.b. ä,ü,ö würde der tag dort nicht sehen, würden wir nur ? im Text sehen. Das zeige ich euch aber später noch im Beispiel.


Speichert nun diesen Text im Editor ab, speichern unter -> speichern mit den Namen index.html (wählt noch, Datei speichern als alle Dateien *.* aus! Das ist ganz wichtig!!!!!) Würdet ihr dies nicht machen, würde der Editor nur als Textdatei abspeichern. Das wäre nicht das, was wir wollten ^^ Nach dem wir nun gespeichert haben, wähl nun im Ordner HTML die Datei index.html aus und öffent diese mit einem doppelklick. Es öffent sich nun der Webbrowser und zeigt euch eine Leere Seite, aber oben im Fenster steht "Meine erste Seite". Also hat das schonmal geklappt.


Aber warum ist die Seite Leer? Das liegt daran, dass wir nichts im Bereich <body> geschrieben haben.


Dazu mehr im zweiten Teil. "Füllen wir die Seite mit Text". Demnächst hier.

anipunch.de - Nun werden Daten gefüllt!

:up1: