HTML & CSS Tutorial
Tutorials / HTML & CSS Tutorial / Einführung in HTML
Einführung in HTML |
|
In diesem HTML Tutorial lernen sie die Grundlage von HTML kennen. HTML ist die Abkürzung für Hypertext Markup Language und ist die Programmiersprache mit der Internet Seiten erzeugt werden können. Das Internet besteht aber nicht nur aus HTML, das soll uns aber noch nicht in diesem Basis HTML Tutorial interessieren. Zuerst lernen wir mal die Grundstruktur von HTML kennen. Zuerst brauchen wir ein Werkzeug mit dem wir HTML Schreiben können. Unter Windows wäre das z.B. der Editor den man unter Start - Programme - Zubehör findest. Bei Mac OS X nehmen wir TextEdit der im Programm Ordner liegt, man muss bei TextEdit aber noch in den Einstellungen im Reiter Öffnen und Sichern einen Haken bei Formatierungsbefehle in HTML-Dateien ignorieren setzen, denn sonst kann man wenn man eine HTML Datei öffnet nicht direkt im Quellcode arbeiten. Keine angst wenn du jetzt noch nicht verstehst was da steht das wird noch Zeile für Zeile genau beschrieben! -------------------------------------------------------------- 01 <html> 02 03 <head> 04 <title>Blindtext Seite</title> 05 </head> 06 07 <body bgcolor="#ffffff"> 08 <h1>Blindtext</h1> 09 <p> 10 Schön, dass Sie neugierig reinschauen, obwohl hier ja eigentlich noch gar kein richtiger Text steht, 11 sondern nur der sogenannte Blindtext. Der aber soll Ihnen diesmal mehr Spass machen als das 12 "Eiriseididum" oder das "Kisuaheli omryx nomryx" oder dieses "Iam quanto minoris constat haec felicitas 13 14 accessio!" oder "In general, bodytypes are measured in the typographical point size". 15 <br><br> April 2006 16 </p> 17 </body> 18 19 </html> --------------------------------------------------------------- Die HTML Datei ist in verschiedne Bereiche aufgeteilt, so ein Bereich beginnt mit einem Start Befehl (z.B. <h1>(in Zeille 8)) und einem abschließendem Befehl (z.B. </h1>). Der abschließende Befehl unterscheidet sich vom Start Befehl an dem "/"-Zeichen. Was zwischen den beiden steht ist der Inhalt, der so verändert wird wie es der Befehl vorgibt. Kommen wir zu Erläuterung der einzelnen Zeilen; 01 -> der Start <html> Befehl, er zeigt wo dass die HTML Seite beginnt. 02 -> ein Abstand zur besseren Übersicht 03 -> der Start <head> Befehl, im Header wird der Titele-Befehle und es können zusätzliche Information´s Befehle untergebracht werden. 04 -> der Start <title> Befehl und Abschluss </title> Befehl, in ihm ist Text der im Webbrowser ganz oben angezeigt wird. 05 -> der Abschluss </head> Befehl, hier ist der Webseitenkopf vorbei. 06 -> ein Abstand zur besseren Übersicht 07 -> der Start <body> Befehl, ab dem Start <body> Befehl kommt erst der eigentliche Inhalt der Webseite. Dieser <body> Befehl hat noch ein zusätzliches Attribut "bgcolor="#ffffff"" der ist für die Hintergrund Farbe Verantwortlich verantwortlich, in diesem Fall ist die Farbe auf #ffffff gesetzt was im hexadezimal System Weiss entspricht (in einem späterem Tutorial kommt mehr zu Farben) 08 -> der Start <h1> und Abschluss </h1> Befehl, die <..h> Befehle sind da um Überschriften zu bestimmen. Wobei es den <..h> Befehl von <h1> (sehr groß) biss <h6> (sehr kleine) gibt. 09 -> der Start <p> Befehl, der <p> Befehl wird genutzt um einen Absatz zu definieren. 10-14 -> Einfach ein Text. 15 -> Zwei <br> Befehle, der <br> Befehl sorgt für einen Zeilenumbruch, das besondre am <br> Befehl ist das er nicht einen Start und Abschluss Befehl hat sondern nur ein Start Befehl, die Meisten adren Befehle haben einen Start und Anfangs Befeh. 16 -> der Abschluss </p> Befehl, hier endet der Absatz. 17 -> der Abschluss </body> Befehl, hier endet der Bereich wo der Inhalt der Webseite Hinterlegt werden kann. 18 -> Einfach ein Text. 19 -> der Abschluss </html> Befehl, hier ist die HTML Seite vorbei. Bitte schreibe nun den HTML Text in dein HTML-Editor ab (ohne die Zeilen Nummern!!) und Speicher sie als Testseite1.html man kann sie aber auch als Testseite1.htm sichern. Wenn du die Seite mit einem Webbrowser (IE, Safari, Firefox) öffnest wirst du so was sehen;  Probier ein wenig mit dem jetzt gesehenen herum um ein Gefühl dafür zu bekommen. Mach mehrere absetze mehrere Unterschiedliche Überschriften, und wenn du das getan hast schau dir Teil 2 der HTML Einführung an (der Zweite Teil ist noch nicht geschrieben wird aber noch folgen) |
