Guten Tag.
Ich habe gemerkt ( Nicht nur ich ) das nun viele mit HTML und CSS anfangen wollen und dann richtig in die Programmierer "Szene" abtauchen zu können. Ich möchte euch dabei helfen und einen sehr kleinen Schritt dazu beitragen das ihr in den kommenden Monaten von mir lernen könnt. Ich muss sagen das ich mich mehr auf das coding konzentriere als jetzt auf die Bedeutung von HTML , Tags und CSS einzugehen. Wenn ihr gerne wissen wollt was HTML bedeutet empfehle ich euch Google.
Lesson #1 - Grundgerüst , Struktur und das anlegen unser Seite.
Anlegen einer Seite :
Die erste Frage stellt sich natürlich wie man denn eine Seite mit einem HTML Script erstellt. Ganz einfach! Wir erstellen einfach einen Hauptordner wo ALLES was mit eurem Projekt zu tun hat rein kommt. Danach erstellen wir eine Textdatei die wir anschließend index.htm nennen damit erkennen wird das HTML geschrieben wird. Wenn wir jetzt die Textdatei mit einen Browser öffnen , gelangen wir auf unserer Seite wo später der Script ausgeführt wird. Damit sich der Inhalt füllt öffnen wir die Textdatei mit einem beliebigen Text Editor. Ich bevorzuge Sublime Text oder Notepad++ . Programm wie Dreamweaver solltet ihr euch nicht anschaffen da dies direktes einschränken des Wissens bedeutet da man eigentlich nur ein paar Buchstaben tippen muss und nach den command suchen musst. Das mag zwar geeignet sein für Leute die sich HTML selber beibringen wollen aber wir lesen von einen Tutorial ab.
Struktur :
Direkt am Anfang des Tutorials möchte ich euch erklären wieso man direkt auf die Struktur bzw auf die Übersicht achten muss. Es hilft gewaltig dabei einen Script übersichtlicher zu halten. Nehmen wir an , wir haben einen Script mit c.a über 700 Lines und +500 columnes. Das ist nicht wenig und wenn wir nicht direkt damit anfangen übersichtlicher und strukturierter zu arbeiten gelangen wir zu einem "Salat" in dem wir eigentlich sehr schwer raus kommen. Deshalb sollten wir damit schon einmal anfangen übersichtlich und strukturiert zu arbeiten damit wir nicht in den Salat Rhythmus gelangen. Später wird die Strukturierung unseres Script seeehr wichtig sein wenn wir mit div id oder div class arbeiten.
Wie fange ich damit an übersichtlicher zu arbeiten? :
Erst einmal müssen wir wissen was für uns übersichtlich ist und was nicht. Damit wir eine Gewisse Strukturierung bekommen müssen wir schauen wie wir am besten arbeiten können. Eine richtige Arbeitsweiße wäre diese hier :
<!DOCTYPE html>
<html>
<head>
<title>Tutorial</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styles/style.css">
</head>
<body>
<h1>Überschrift</h1>
</body>
</html>Wie ihr sehen könnt habe ich viele Abstände gemacht. Diese benutze ich um eine Reihenfolge zu befolgen. Das was wir in einen Tag schreiben wollen wir immer mit einem Enter und schreiben dort unseren Script rein. Es ist schwierig zu erklären aber man sollte es bei einigen beispielen hinkriegen :
Wie wir sehen umfasst der wrapper den ganzen content Bereich um eine maximal Breite von 960px zu setzen. Der header ist im content Bereich gesetzt damit wir nicht zu viel in der CSS arbeiten müssen. Da der header im content Bereich liegt brauchen wir nur eine Höhe , Breite und eine Farbe. Der Header wird direkt am oberen Ende vom content angezeigt und braucht sich nicht verschieben. Dann wird der header im content Bereich beendet und wir können Problemlos unten weiten im content weiter schreiben ohne das sich der header oder sonstiges bewegt.
Wie ihr sehen könnt geht es doch eigentlich relativ schnell.
Grundgerüst anlegen :
Nun kommen wir zum Grundgerüst. Nun nachdem wir gelernt haben wie wir einen code richtig strukturieren damit er übersichtlich bleibt können wir das auch direkt testen. Bevor wir aber das Grundgerüst anlegen muss ich euch dazu noch was sagen.
<html></html>
Damit kann die Webseite erkennen das wir momentan mit HTML arbeiten. Ist fürs erste uninteressant aber wenn wir php script in html verwenden ist es notwendig.
<head></head>
Head bedeutet auf Deutsch Kopf oder eher gesagt oberer Bereich. In den head Bereich kommen Sachen die man auf der Seite nicht sieht und eher im Hintergrund als im Vordergrund sich abspielen lassen. Im Head Bereich gehören Sachen wie eine externe css , style , title und eine externe javascript und natürlich vieles mehr.
<body></body>
Body bedeutet auf Deutsch Körper und ist der Inhalt unserer Seite. Dort schreiben wir den eigentlichen Script der klar Sichtbar ist. CSS und sonstiges wird dort auch definiert.
Welches Programm soll ich benutzen? :
Einer der meist gestellten Fragen fangen damit an welchen Editor ich benutzen soll damit ich am effektivsten lernen kann und das flexibel und schnell. Es gibt mengen an Editors die man benutzen kann , aber die Editor die ihr benutzen solltet wären Notepad++ oder Sublime Text 3. Programme wie DW ( Dreamweaver ) solltet ihr erst gar nicht benutzen da solche Editors euch sofort alles auf einen Haufen zeigen und das wissen eingeschränkt wird.
Aufgabe :
Zeige mir dein STRUKTURIERTES Grundgerüst. Die Auflösung erscheint morgen.
In den kommenden Wochen werden wir uns dann in der Lesson #2 mit den ersten Tags beschäftigen.
