html-workshop-tutorial

Informations

• Publié par: Assu
• Nombre de lectures: 109
• Langue: Deutsch

Extrait

Inhaltsverzeichnis Einführung in HTML............................................................................................................................2 Was ist HTML?................................................................................................................................2 Die erste HTML Seite......................................................................................................................2 Kommentare.....................................................................................................................................5 Schriftformatierung..........................................................................................................................5 Überschriften...................................................................................................................................6 Horizontale Linien ..........................................................................................................................7 Zeilenumbruch.................................................................................................................................9 Leerzeile.........................................................................................................................................10 Schriftart........................................................................................................................................11 Tabellen..........................................................................................................................................14 Was ist eine Tabelle?.................................................................................................................14 Zeilen.........................................................................................................................................15 Zellen.........................................................................................................................................15 Kopfzelle...................................................................................................................................15 Zellen verbinden........................................................................................................................16 Bilder.............................................................................................................................................17 Links..............................................................................................................................................20 Frames............................................................................................................................................21 Formulare.......................................................................................................................................23 Textfelder..................................................................................................................................24 Textbereiche..............................................................................................................................24 Checkboxen ..............................................................................................................................25 Radiobuttons.............................................................................................................................26 Auswahllisten............................................................................................................................27 Submit-Buttons.........................................................................................................................28 Passwortfelder...........................................................................................................................28 versteckte Formularfelder.........................................................................................................28 Stiltipps..........................................................................................................................................30

Einführung in HTML

In diesem Tutorial möchte ich die wichtigsten Grundlagen von HTML erklären. Fehler können natürlich nicht ausgeschlossen werden und für Tipps bin ich natürlich dankbar. Wenn du HTML lernen willst, gibt es natürlich einen einfachen Tipp. Probiere manche Sachen einfach aus, dadurch kannst du vieles lernen. Durch einfaches testen und ausprobieren kannst du ja nichts kaputt machen. Also nur Mut zum ausprobieren. Denn wie sagt man so schön „Probieren geht über Studieren“.

Was ist HTML?

HTML (Hypertext Markup Language) ist die Sprache in der Webseiten geschrieben sind. Diese Sprache beschreibt in Form von Tags, wie eine Seite aussieht. Es gibt z.B. spezielle Tags um Bilder einzubauen etc. HTML, die Sprache des www (WorldWideWeb), wurde von einem Physiker Namens Tim Berners Lee entwickelt. Tim Berners Lee hat 1990 HTML entwickelt um Dokumente mit einander zu verlinken (durch einen Hyperlink), da er sehr vergesslich war. Und wie wir alle Wissen, hat sich das www danach zum größten Dienst des Internets entwickelt. Wie beginne ich mit dem Schreiben einer HTML Seite? Um Homepages zu erstellen gibt es viele verschiedene Software. Zwei Beispiele sind Dreamweaver von Macromedia oder Frontpage von Microsoft. Mit diesen Programmen kann man sich mit einer grafischen Oberfläche seine Internetseite zusammen klicken. Grundsätzlich ist gegen solche Software nichts zu sagen. Wer allerdings professionell Webseiten erstellen möchte sollte wissen was im Hintergrund passiert. Eine gute Kenntniss in HTML ist also von großem Vorteil. Gerade wenn man später komplexere Seiten mit Skriptsprachen wie PHP schreiben möchte, sollte man sich mit HTML auskennen. Für den Anfang ist es also ausreichend wenn man einen einfachen Editor wie Notepad oder einen ähnlichen Editor unter Linux verwenden. Für spätere Projekte kann man sich dann für einen komplexen Editor entscheiden.

Die erste HTML Seite

Jetzt kräpeln wir die Ärmel hoch, holen uns noch eine Tasse Kaffee und dann geht's los. Wir öffnen den Editor und schreiben folgendes hinein: <html> <head> <title>Hallo Titel</title> </head> <body> Hallo Welt </body>

</html> Diesen Text speichern wir nun z.b. unter „meine-erste-htmlseite.htm“. Die Endung „.htm“ ist hierbei sehr wichtig. Nun gehen wir ins Dateisystem an die Stelle wo wir unsere Seite gespeichert haben und öffnen diese. Die Datei sollte automatisch mit Ihrem Internetbrowser geöffnet werden. Wenn nicht, öffne deinen Browser und öffne die Datei über „Datei -> Öffnen“. Wenn wir die Datei eöffnet haben sollten wir soetwas sehen:

So schnell haben wir unsere erste HTML Seite erstellt. Als Belohnung gönnen wir uns einen großen Schluck aus der Kaffetasse und dann geht es weiter. Du hast dich bestimmt gefragt was diese Dinger in den Klammern sind, oder? Diese Dinger bezeichnet man als Tags. Diese Tags sind Anweisungen für den Browser, damit er versteht wie er die Seite darstellen muss. Die meisten Tags (aber nicht alle), haben einen Teil zum öffnen und einen Teil zum schliessen. Der Teil zu schließen wird durch einen Schrägtrich (Slash) gekennzeichnet. HTML Tags kann man ineinander verschachteln. Dadurch sind sehr kreative Kombinationen möglich. Unbekannte Tags werden vom Browser ignoriert, dadurch kann ein alter Bowser auch neue Seiten darstellen ohne das die Tags interpretiert werden. Nun mal eine Erklärung zu den einzelnen Tags: <html>   Dieser Tag sagt dem Browser: „Hallo Browser, hier beginnt das HTML Dokument“. Wie wird dieser Tag wohl beendet? Durch </html>, genau !!! <head> Dieser Tag sagt dem Browser: „Lieber Browser, hier beginnt der Kopf des HTML Dokuments. Im Header werden einige Informationen zur Seite abgelegt, wie z.B. ein Titel oder auch Meta Informationen für Suchmaschinen. <title> Mit <title> wird dem Browser mitgeteilt, dass hier der Titel des HTML Dokuments begint. Dieser Titel erscheint in der Titelleiste des Browsers. Ein beliebter Fehler ist hier statt <title>, <titel> zu schreiben. Das ist jedoch falsch weil die Tags auf Englisch geschrieben werden. Nun folgt, was in unserem Titel eigentlich stehen soll:

Hallo Titel Weil das alles ist, was wir in unseren Titel rein schreiben wollen können wir mit dem Tag zum schließen des Titels den Bereich des Titels beenden. </title> Und weil wir auch in den Kopf (head) des Dokuments nichts mehr rein schreiben wollen, sagen wir dem Browser auch gleich noch, das der Kopf (head) hier zuende ist. </head> Den Kopf unseres Dokuments haben wir jetzt schon fertig. Aber wir wollen ja auch noch unsere eigentliche Seite gestallten. Das geschiet im Körper (body) der Seite. Damit nicht nur wir, sondern auch der Browser das weiss, müssen wir mit <body> den Body beginnen, <body> Aber auf der Seite selber soll ja auch etwas drauf stehen, unsere Nachricht an die Welt des Internets. Weil das unsere erste Seite ist, sagen wir den Leuten dadraussen natürlich erstmal „Hallo“. Wir schreiben also unsere Nachricht: Hallo Welt Damit ist unsere kurze und knackige Nachricht erstmal vorbei. Mit der Nachricht der Seite ist auch der Körper der Seite zuende. Also müssen wir mit </body> den Körper beenden. </body> Da der Körper (body) unsere Seite zuende ist, ist jetzt auch unser HTML Dokument zuende. Die teilen wir dem Browser mit indem wir den Endtag des HTML Dokuments aufschreiben: </html> Das war die Erklärung zu den Tags. Eigentlich war das doch garnicht schwer. Oder? Hier eine Übersicht der Tags die wir eben gelernt haben: Anfang: <html> Ende: </html> Anfang: <head> Ende: </head> Anfang: <body> Ende: </body> Anfang: <title> Ende: </title> Diese Tags kann man schnell wieder vergessen. Es wäre ja schön wenn wir uns in unser HTML Dokument mit reinschreiben könnten was sie bedeuten. Aus diesem Grund gibt es Kommentare.

Kommentare

Kommentare sind Tags die vom Browser nicht angeteigt werden und dem HTML Autor dabei Helfen können sich die Struktur besser zu merken. Kommentare sind Tags von der Sorte Tags die keinen schliessenden Tag benötigen.

Ein Beispiel für ein Kommentar wäre: <!-- Kein Kommentar :-) --> Da wir jetzt wissen, wie wir unseren Quelltext kommentieren können, machen wir natürlich auch davon gebrauch: <html> <!-- Das HTML Dokument beginnt --> <head>  <!-- Der Kopf des HTML Dokuments -->   <title>  Hallo Titel </title> </head> <body>  <!-- Der Inhalt des HTML Dokuments --> Hallo Welt </body> </html> Zugegeben, wir haben an Kommentaren nicht gespart. Das soll dir aber gleich zu Anfang zeigen das Kommentare durchaus sinnvoll sein können. Nun öffnen wir unsere Seite wieder im Browser. Wir stellen fest, dass sich durch die Kommentare am Aussehen der Seite nichts verändert hat. Und wenn wir uns die Seite länger ansehen, fällt uns auf, dass sie ein bisschen langweilig ist. Das soll sich jetzt ändern. Wir wollen ja schließlich das unsere Nachricht jeder lesen kann. Dazu gibt es in HTML mehrere Tags, mit der wir die Schrift formatieren können.

Schriftformatierung

In HTML gibt es viele Möglichkeiten das Aussehen der Schrift zu beeinflussen. Man kann z.B. einen Text als Überschrift kennzeichnen und durch die Art der Überschrift die Struktur des Dokuments wiederspiegeln. Früher gab es tags zur Schriftformatierung wie z.B. den <font> Tag. Dieser sollte jedoch nicht mehr verwendet werden. Stattdessen sollten Stylesheets verwendet werden. Als erstes soll unsere Seite eine Überschrift bekommen.

Überschriften

HTML sieht für Überschriften einen bestimmten Tag vor. Dieser Tag erfordert auch einen schliessenden Tag. Da Überschriften verschieden groß sein können und auch zur Gruppierung Textes dienen sollen gibt es 6 grössen für Überschriften.

Hier die 6 verschiedenen Tags für Überschriften an einem Beispiel: <h1> Überschrift 1 </h1> <h2> Überschrift 2 </h2> <h3> Überschrift 3 </h3> <h4> Überschrift 4 </h4> <h5> Überschrift 5 </h5> <h6> Überschrift 6 </h6> Dabei ist h1 dir grösste Überschrift. Das benutzen von Überschriften macht nur im Bereich des <body> Sinn, da Sie z.B. im Bereich des Titels nichts am aussehen ändern. Um den neuen Tag zu testen bauen wir Ihn in unsere Seite ein und schauen uns an, wie das ganze aussieht. Wir modifizieren den Quelltext wie folgt: <html> <!-- Das HTML Dokument beginnt --> <head>  <!-- Der Kopf des HTML Dokuments --> <title>  Hallo Titel </title> </head> <body>  <!-- Der Inhalt des HTML Dokuments --> <!-- Überschrift --> <h1>Meine zweite Seite</h1> </body> </html> Wenn wir unsere Modifikation abspeichern und uns die neue Seite anschauen, sollten wir etwas ähliches wie das hier sehen:

Es ist deutlich zu sehen das die Schrift jetzt größer ist. Es sollte mal wieder Zeit für einen Schluck aus der Kaffeetasse sein. Unsere Seite sieht zwar schon ganz schön aus, aber sie ist irgendwie noch sehr leer. Es wird also Zeit für mehr Inhalte. Diese Inhalte gehören nicht zur Überschrift, sondern sind normaler Text. Wir sollten nach der Überschrift eine neue Zeile anfangen. Um das ganze optisch zu trennen bauen wir eine horizontale Linie ein.

Horizontale Linien

Mit horizontalen Linien kann man Elemente optisch ein bisschen trennen. Man sollte diese jedoch nicht zu häufig verwenden. Wie baut man nun eine solche Linie ein? Das ist ganz einfach. In HTML gibt des einen Tag dafür, dieser sieht so aus: <hr> hr bedeutet horizontal rule. Also horizontale Linie. Wir modifizieren unser HTML Dokument wie folgt: <html> <!-- Das HTML Dokument beginnt --> <head>  <!-- Der Kopf des HTML Dokuments -->    <title>  Hallo Titel </title> </head> <body>  <!-- Der Inhalt des HTML Dokuments --> <!-- Überschrift --> <h1>Meine dritte Seite</h1> <!-- horizontale Linie --> <hr> </body> </html> Wenn wir uns das ganze im Browser anschauen sehen wir folgendes: