HTML. HyperText Markup Language. von Nico Merzbach

Größe: px

Ab Seite anzeigen:

Download "HTML. HyperText Markup Language. von Nico Merzbach"

Jens Braun
vor 7 Jahren
Abrufe

1 HTML HyperText Markup Language von Nico Merzbach

2 Kapitel 1 Was ist HTML? Was ist HTML? Einführung: HTML ist eine (Hypertext-)Auszeichnungssprache. Mit Hilfe von HTML strukturiert man Inhalte wie Text, Bilder, Links oder Videos. Ein Browser interpretiert dann das HTML und zeigt es an. Diese Strukturierung wird dann mit Hilfe von CSS gestylt. HTML ist die Grundlage einer Website. Momentan ist HTML5 die aktuelle Version. Jedoch ist der Standard immer noch HTML 4.01.HTML sowie auch CSS wird vom World Wide Web Consortium (W3C) entwickelt. Die Syntax: HTML besteht aus so genannten Tags. Tags werden in spitzen Klammern geschrieben: < und >. Bei fast allen Tags gibt es einen öffnenden und einen schließenden Tag, wobei der schließende Tag mit einen / beginnt. Beispiel: <title> Tite der Website </title> öffnender Tag schließender Tag Man kann sich die Tags wie Anführungszeichen vorstellen. Sie umgeben den eigentlichen Text. Anhand des Beispiels kann man sehen, das zwischen den title -Tags der Titel der Website definiert ist. Der Browser weiß dann also, dass es hier um den Titel der Website handelt, Einige Tags müssen nicht extra geschlossen werden. (z.b <br /> (=Zeilenumbruch)) Statt den Tag mit einem führenden / noch mal zu schreiben, wird der / einfach am ende des Tags rangehangen Beispiel: <meta http-equiv="content-type" content="text/html; charset=utf-8" /> (legt das Encoding fest) An diesem Beispiel sieht man ebenfalls, dass es Parameter gibt. Diese werden direkt mit in den öffnenden Tag definiert. Die Syntax ist: paramter= Wert

3 Der Editor Der Editor HTML kann mit jedem Editor geschrieben werden, solange man die HTML Datei (.html) unformatiert speichern kann. Jedoch gibt es spezielle Editoren, die Vieles einfacher machen. Sie highlighten den HTML-Code, damit es einfacher zu lesen ist. Drei Editoren unter Mac OS X: TextMate Coda Xcode ) TextMate ist ein beliebter Editor unter Mac OS. Mit TextMate ist es möglich unkompliziert Code zuschreiben und dabei noch sehr viele Funktionen zu haben. Viele Editoren sind unübersichtlich. Man weiß nicht, wo etwas ist und man braucht lange um zwischen Dateien oder Projekten zu wechseln. TextMate hat ein sehr übersichtlich gehaltenes Interface und bietet dabei viele Funktionen. Um noch effektiver Code zu schreiben, sollte man sich die Shortcuts angucken. Unter Windows gibt es Notepad++, welches Freeware ist. So hat man nun einen Editor, kann es direkt losgehen: Als erstes muss eine neue Datei angelegt werden. index.html Notiz: Eine Website besteht in der Regel aus mehreren.html Dateien. Es sollten keine Leerzeichen im Dateinamen vorkommen. Satt Leerzeichen benutzt man unterstriche(_). Es wäre praktisch KEINE Großbuchstaben zu benutzen. Die index.html in einem Ordner wird immer ausgeben, wenn der Ordner im Browser geöffnet wird (bzw. die Website)

4 Die Theorie: Das Grundgerüst Zunächst muss man verstehen, dass Tags geschachtelt werden. D.h alles was z.b. zwischen <head> und </head> steht, ist der Inhalt des head s. Beim head sind es IMMER Tags, die hier reingehören. Dies wird man auch gleich beim Schreiben sehen, da Tags, welche in einem anderem Tag stehen, entsprechend eingerückt werden. Früher wurden dafür Tabs benutzt. Wesentlich eleganter ist es jedoch, alles mit 2 Leerzeichen einzurücken. Manche Editoren (z.b. TextMate) unterstützen dieses. Diese Einstellung nennt sich Soft Tabs. Dieses sollte man aktivieren. Es hilft beim Codeschreiben und man verzweifelt nicht an den Tabs. Praxis: In der 1. Zeile steht, das es sich hier um HTML 4.01 handelt. Im <html> Tag wird das komplette HTML geschrieben. Hier gehört nichts außer dem DOCTYPE rein Im <head> werden die Informationen zur Seite definiert. Inhalte selber kommen hier nicht rein. z.b würde hier stehen, wer diese Website gemacht hat. Dies wird aber später nicht auf der Website zu lesen sein. Auch der Titel der Website wird hier angeben. Im <body> steht der komplette Inhalt der Website. <h1> - <h6> sind Überschriften und dessen Unterüberschriften. Man sollte sie nur zur logischen Strukturierung und nicht zum Designen benutzen. (Also nicht <h6> benutzen, weil man eine kleine Überschrift haben möchte) DOCTYPE Name der Website Überschriften (h = headline)

5 Das Grundgerüst Name der Website Überschriften Ergebnis: Man kann hier nun das Ergebnis im Browser sehen. Aber nanu? Was ist denn da mit den Umlauten los? Dazu kommen wir gleich. Man sieht oben im Fenster den Titel der Website (<title>). Die Überschriften von 1-6 sind auch da (<h1> - <h6>). Kommen wir jetzt nun auf die misslungenen Ü s zurück. Das Encoding, welches wir benutzen heißt UTF-8. Das müssen wir den Browser jetzt aber noch sagen. Früher hätte man so etwas für Üs benutzt: Ü (= Ü) Heute ist dies jedoch nicht mehr üblich. Man muss den Browser jetzt nun noch sagen, dass er UTF-8 als Encoding benutzen soll und zwar in einem <meta> Tag, welches im <head> definiert wird. <meta http-equiv="content-type" content="text/html; charset=utf-8" /> Dies wird dafür sorgen, dass wir Umlaute problemlos schreiben können. Und weil es sozusagen eine Information ist (eine Information darüber, welches Encoding der Browser benutzen soll) wird dies in den <head> geschrieben.

6 Wichtige Tags Weitere Tags: <br /> = Zeilenumbruch <p> </p> = Alles zwischen den Ps ist ein Textabsatz <a> </a> = ein Link; extern und intern als Parameter wird hier href= angeben. <hr /> = horizontale Linie zum Trennen von Inhalten <div> </div> = ein Block, welcher später oft zum Definieren von Styles gebraucht wird <i> </i> = kursive Schrift <u> </u> = unterstrichende Schrift <b> </b> = fette Schrift

Wichtige Tags Wie schaut s nun aus?: Links: An diese Stelle müsste jetzt eigentlich fast alles klar sein. Nur noch zu den Links ist noch etwas zu sagen. <a href= http://ziel.

7 Wichtige Tags Wie schaut s nun aus?: Links: An diese Stelle müsste jetzt eigentlich fast alles klar sein. Nur noch zu den Links ist noch etwas zu sagen. <a href= >Text der anklickbar ist</a> Der Parameter kann sowohl absolut oder relativ sein. D.h.: Folgende Ausgangssituation: - Meine Domain: - Es existieren mehre Seiten die in einem Ordner liegen: index.html und contact.html es gibt zwei verschiedene Arten von Links um zur anderen Seite zu kommen 1. absolut: <a href= >Kontakt</a> 2. relativ: <a href= contact.html >Kontakt</a> zu 2: würde contact.html in dem Ordner other_sites liegen müsste der Pfad other_sites/contact.html heißen würde contact.html in einem überliegenden Ordner liegen so müsst der Pfad../contact.html heißen

Ähnliche Dokumente

HTML5. Wie funktioniert HTML5? Tags: Attribute:

HTML5. Wie funktioniert HTML5? Tags: Attribute: HTML5 HTML bedeutet Hypertext Markup Language und liegt aktuell in der fünften Fassung, also HTML5 vor. HTML5 ist eine Auszeichnungssprache mit der Webseiten geschrieben werden. In HTML5 wird festgelegt,