HTML Tutorial Part I - Einführung und erste Texte schreiben Hallo und Herzlich Willkommen auf meiner Seite. Hier dreht sich alles um das Thema HTLML Programmierung. Das ganze beginnt bei den einfachsten Basics und geht bis zum komplizierten HTML Code. Wenn ihr euch Fragt, warum ich denn diese Seite erstellt habe? Dies ist ganz einfach zu erklären. Ich will euch auf einem leichten Weg an HTML Welt ran bringen. Die Basics: HTML Benutzt man hauptsächlich um Website im Internet zu erstellen. Jede Homepage die ihr im Netz findet basiert auf einem HTML Script. Dazu kommen dann noch Faktoren wie z.b. CSS - Welches man für die Gestaltung durch Farben nutzt oder Bilder. Mit PHP hat man die Option zum Beispiel Animierte Grafiken hinzuzufügen oder Online Shops zu erstellen. Man kann hierfür aber auch Java verwenden, wobei dies Programmiersprache durch Sicherheitslücken geprägt ist. HTML Programme: Es gibt eine Vielzahl von Programmen mit denen man HTML Programmieren kann. Das einfachste Programm unter Windows ist der normale Text Editor. Man kann aber auch das beliebte Programm Notepad ++ verwenden. Unter Mac OST würde ich euch TextWrangler empfehlen. Dieses Programm nutze ich selbst auch und bin echt zufrieden damit. Beide Programme sind kostenlos. Notepad ++: https://notepad-plus-plus.org/ TextWrangler: http://www.barebones.com/products/textwrangler/ Der Aufbau von HTML: Hier seht ihr eine einfache und Simpel Seite, welche in HTML Programmiert ist. <head> <title>hier steht der Titel der Website</title> </head> <h1>überschrift der Homepage</h1> <p>hier steht der Text.</p>
Das HTML Dokument: Jedes HTML Dokument beginnt mit dem sogenannten Tag und wird wieder mit geschlossen. Prinzipiell haben alle Tags den selben Aufbau. Mit dem Tag sagen wir der Homepage beziehungsweise dem Editor dass es sich hierbei um ein HTML Dokument handelt. Der Kopf Bereich: In den Kopf Beriech des HTML Dokuments kommen so Sachen der Titel der Website. Aber auch wichtige Sachen wie Meta Dateien. Das erkläre ich euch später aber noch genauer. Den Titel der Seite wird nun im Browser oben angezeigt. Der Körper der HTML Datei: In den Body kommt der eigentliche Text, also alles was später auf der Homepage stehen soll. Der Hauptteil beginnt mit de Tag. Nun können wir anfangen mit einer Überschrift. Diese beginnt mit dem Tag <h1>. Jetzt können wir den eigentliche Text schreiben und zum Schluss wieder das Zeichen </h1> um so die Überschrift zu schließen. Um nun Text zu schreiben kommt nun ein <p>. Jetzt könnt ihr den ganzen Text schreiben, welcher in Schriftgröße 12 nun auf der Website erscheint. Nach dem ganzen Text schließen wir wieder die Zeile mit </p>. Das HTML Dokument beenden: Um nun das gesamte HTML Dokument wieder zu schließen nutzen wir nun den </ html> Tag. Damit schließen wir das HTML Dokument ab. Wenn wir fertig sind mit dem schreiben zwischen zwei Tags nutzt man immer den so genannten Close Tag dieser sieht wie folgt aus </>. Weitere Möglichkeiten mit HTML: Hier findet ihr weitere Möglichkeiten um ein HTML Dokument beziehungsweise File zu erweitern. Eine Ungeordnete Liste erstellen: Die sogennate Ungeordnete Liste verwendet man wie der Name eigentlich schon
sagt um eine Auflistung zu machen. Der Quellcode hierfür lautet: <ul> </ul> Später wird das alles dann so aussehen: Das <ul> steht in diesem Falle für Ungeordnete Liste. In der nächsten Zeile schreiben wir ein <li>. Mit diesem Tag beginnt in der neuen Zeile ein Punkt. Dies kann man so lange fortsetzen bis man die Liste beenden will. Um die Ungeordnete Liste nun zu beenden schreiben wir den Tag </ul> Die Sortierte Liste: Eine geordnete Liste wird verwendet man Aufzählungen mit Zahlen machen will. Also 1,2,3 usw.. Hier der Quellcode: <ol> </ol> Wenn wir dann später dieses Script geschrieben haben wird das alles im Browser dann so aussehen:
Das war es dann soweit mit den Listen. Nun kommen wir zum nächsten Thema. Text Formatierungen: Natürlich kann man in HTML Dokumenten auch Texte formatieren. Hier erfahrt ihr einige Möglichkeiten um Texte zu formatieren. Den Text Fett machen: Man kann Texte auch Fett formatieren, das sieht dann in etwa so aus. Der Quellcode für diese Formatierung sieht später wie folgt aus. <b>hier steht der Text.</b> <b>hier steht der Text.</b> Texte unterstreichen: Um Texte oder einzelne Abschnitte in HTML zu unterstreichen verwendet man folgenden Quellcode. <u>hier steht der Text<u> Nun ist der Text, welcher zwischen den beiden Tags <u> und </u> steht unterstrichen. Das könnt ihr aber auch im folgenden Beispiel sehen. Texte kursiv schreiben
Um Texte oder einzelne Wörter kursiv zu schreiben hat man folgende Möglichkeit: <i>hier steht der Text</i> Im Bespiel sieht der kursive Text so aus: Wenn wir nun alle drei Übungen zu den Schriftformatierungen zusammen in ein Script schreiben sieht dieses Script so aus. Beispiel 1: <b>hier steht der Text</b> <u>hier steht der Text</u> <i>hier steht der Text</i> Beispiel 2: <b><u><i>hier steht der Text</b></u></i> Wenn wir uns das nun in unserem Browser anzeigen lassen sieht es nun so aus. Beispiel 1: Beispiel 2:
Das waren jetzt erstmals so die ganzen Basics beziehungsweise Grundlagen. Im zweiten Teil des HTML Kurses geht es dann um URL s und um CSS Eigenschaften. Ich wünsche euch viel Spaß beim Probieren. Und wenn ihr fragen oder ähnliches habt? Schreibt mir eine E-Mail an: Iam_1@gmx.de