Einführung in HTML
Für den Kurs Creative web @BTK
Der richtige Editor
Die Auswahl an Editor ist groß und vor allem für Mac gibt es eine Masse and guten Editoren. Welchen Editor man nutzt ist Geschmacksfrage, wichtig ist vor allem, dass man ein Syntax-Theme nutzt, bei welche, einem sofort auffällt, wo im Code Fehler stecken und welche Elemente anders aussehen (und somit nicht erkannt werden, d.h. falsch geschrieben sind).
Sowohl Autocompletion als auch eine Vorschau mit integrierten Tools sollte vermieden werden, da ersteres leicht dazu führt, dass man nicht lernt wie Elemente geschrieben werden und was richtiger Syntax ist, sodass Fehler viel schwerer bemerkt werden. Voransichten in Editoren sind zumeist nicht korrekt und stelle nur einen Browser dar. Um HTML-Dateien anzusehen, reicht es diese in einem beliebigen Browser zu öffnen.
TextMate (Mac)
TextMate war der erste richtig gute Editor für Mac. Die Version 2.0 ist momentan in der Alpha und kann kostenlos genutzt werden. Über einen Bundle-Editor ist es einfach Shortcuts zu bauen, sodass bspw. “HTML5 + [Tab-Taste]” ein komplettes Grundgerüst für eine HTML-Seite einfügt.
Atom (Mac)
Atom ist ein sehr junger von Github entwickelter Editor der vollständig auf Web-Technologie basiert (aber als vollwertige App mit Dateizugriff, etc. auf dem Mac läuft). Dadurch und da bist auf die Core alles Open-Source ist, ist es sehr einfach eigenen Plugins zu schreiben, sodass es schon jetzt tausende Erweiterungen gibt. In der momentane Beta-Phase ist der Editor kostenlos.
SublimeText (Mac / Windows)
Sublime ist ein für Mac und Windows erhältlicher Editor der ähnliche Features wie TextMate und Atom enthält. Der Editor kann kostenlos getestet werden.
Weitere Editoren
Es gibt weitere Editoren wie bspw. Notepad++ oder Adobe Edge, welchen Editor ihr nutzt ist letztendlich egal, sofern ihr mit diesem gut klar kommt und ein gutes Syntax-Theme vorhanden ist.
Eine Sammlung guter Themes gibt es bspw. von Dayle Rees.
HyperText Markup Language (HTML) wird genutzt um die Struktur eine Webseite zu definieren.
Grundlagen
Ein HTML-Dokument (.html) ist in zwei Abschnitte geteilt, den head und body.
Im head werden Metadaten festgelegt und externe CSS-Dateien (Cascading Style Sheets zum definieren des Designs) verknüpft. Vergleichbar mit den Gehirn, welches Metadaten über uns, wie die Muttersprache, etc. enthält und den Augen, die für das Visuelle (Design) verantwortlich sind.
Der body beschreibt die sichtbaren Elemente (Tags), vergleichbar mit Extremitäten (Arme, Beine, etc.) am Körper.
Grundgerüst eines HTML-Dokumentes
<!DOCTYPE html>
<html><!— Kommentar: Inhalt des HTML-Dokuments --></html>
Jedes HTML-Dokument beginnt mit deinem Dokumenten-Typ (DOCTYPE). Dieses Element liefert dem Browser Informationen über die HTML-Version die für das erstellen des Dokumentes genutzt wird, sodass der Browser das Dokument korrekt lesen, verstehen und anzeigen (Parsen und Rendern) kann. Ab HTML-Version 5 (HTML5) wird die vereinfachte Version <!DOCTYPE html> genutzt.
Das DOCTYPE-Element muss immer in der ersten Zeile des Dokumentes stehen.
Nach dem DOCTYPE folgt sogleich das <html>-Element, welches den gesamten Inhalt umspannt.
Element in HTML können selbstschließenden Element wie bspw. das <img/>-Element sein oder eine öffnendes (<elementen name>) und eine schließendes (</elementen name> mit einem / gekennzeichnet) Element besitzen wie bspw. das <html>-Element. Welches Element zu welcher Kategorie gehört muss man lernen bzw. nachschlagen.
In der zweiten Zeile des HTML-Dokumentes folgt also das öffnende <html>-Element und in der letzten Zeile zeigt das schließende </html> das Ende des Dokumentes an.
Innerhalb des <html>-Elementes befindet sich das <head> und das <body>-Element
<!DOCTYPE html>
<html> <head>
<!— Im HEAD sind Metadaten und Verknüpfungen zu CSS-Dateien -->
</head> <body>
<!— Im BODY sind alle sichtbaren HTML-Elemente -->
</body></html>
HTML-Tags im BODY
In den Body können nun HTML-Elemente eingefügt werden um Inhalte zu strukturieren. Überschriften werden mit <h>-Tags von der wichtigsten Überschrift <h1></h1> (sollte nur einmalig pro HTML-Dokument vorkommen) zu den weniger wichtigen Überschriften <h2> bis <h5> definiert.
Fließtext kann bspw. in eine <p>-Element (Paragraph-Tag) definiert werden.
Alle HTML-Tags werden immer komplett mit Kleinbuchstaben geschrieben.
<!DOCTYPE html>
<html> <head>
<!— Im HEAD sind Metadaten und Verknüpfungen zu CSS-Dateien -->
</head> <body> <h1>Meine Website</h1>
<p>Das hier ist ein Paragraph.</p> <h2>Sekundäre Überschrift</h2>
<p>Hier steht noch mehr.</p> </body></html>
Weitere wichtige HTML-Element sind <div>, <ul> und <li>, <span>, <a> sowie <img>. Eine Übersicht an verfügbaren HTML-Elementen gibt es auf mdn.
Metatags im Head
Im head werden verschiedenste Metadaten angegeben. In jedem HTML-Dokument sollte die Zeichen-Kodierung angegeben werden, da es sonst zu Darstellungsfehlern bei Sonderzeichen, etc. kommen kann. UTF-8 ist die momentan beste Kodierung.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>Des weiteren sollte die Sprache in der die Webseite angelegt ist bspw. en für Englisch oder de für Deutsch und der Author der Seite angegeben werden.
<meta name="language" content="en" />
<meta name="author" content="Lukas Oppermann — vea.re" />Mithilfe des <robots>-Metatag kann den Suchmaschinen mitgeteilt werden, wie mit der Seite umzugehen ist. Der erste Wert kann entweder index oder noindex sein, wobei index bedeutet, dass die Seite in das Verzeichnis der Suchmaschine aufgenommen wird und noindex, dass die Seite nicht in den Index kommt. Eine Normale Webseite sollte somit den werde *index* bekommen.
Der zweite Wert kann follow oder nofollow sein. Dieser teilt der Suchmaschine mit, ob diese Links auf der Webseite aufrufen soll oder nicht. Im Normalfall sollte follow angegeben werden, da so alle weiteren Unterseiten der Webseite in das Verzeichnis der Suchmaschine aufgenommen werden.
<meta name="robots" content="index,follow" />Das <description>-Element wird, wenn es gut geschrieben ist, in Suchmaschinen unter dem Titel der Seite angezeigt. Hierbei sollte beachtet werden, dass nicht mehr als 150 Zeichen genutzt werden sollten und mögliche relevante Keywords in der Beschreibung verwendet werden müssen. Es sollte sich um einen für Menschen lesbaren Text handeln, muss aber nicht dem normalen Satzbau entsprechen.
Lukas Oppermann — Interface & Interaction design, corporate design, information graphics. Berlin ist okay, da es lesbar ist, aber die wichtigen Schlüsselworte (Hier Namen und die Design-Leistung) enthält. Für Suchmaschinen Optimierung (SEO — Search Engine Optimization) ist ein guter Description-Text förderlich.
<meta name="description" content="150 Zeichen Beschreibung mit Keywords" />Das <title>-Element ist eines, wenn nicht DAS wichtigste Element für die Suchmaschinen Optimierung. Der Title sollte nicht über 55 Zeichen lang sein und wichtige Schlüsselworte, aber auch den Title der Seite, bspw. About oder Portfolio enthalten. Der Title wird im Browser in der Titel-Leiste angezeigt, ist aber auch der Name, der beim Speichern in den Favoriten genutzt wird.
<title>Lukas Oppermann — Interface & Interaction design</title>Mit dem <link>-Element können externe CSS-Dateien eingebunden werden. Der Vorteil externer CSS-Dateien gegenüber integrierten Styles ist vielfältig. Zum einen kann die gleiche Datei für mehrere HTML-Seite genutzt werden, was den Code übersichtlicher, die Erstellung einzelner Seiten einfacher und das Laden der Seite (durch Caching der CSS-Datei) schneller macht. Zum anderen ist die Pflege einer Seite so viel einfacher. Will man bspw. die Link-Farbe ändern, so muss man dies nur in der CSS-Datei anpassen und nicht in jeder HTML-Datei. Es sollten nur externe CSS-Dateien genutzt werden, Style-Code im Head-Bereich sowie Inline-CSS (CSS innerhalb der Tags) ist auf jeden Fall zu vermeiden.
Das <link>-Element (nicht zu verwechseln mit dem Anchor-Element für Hyperlinks zu anderen Seiten) ist ein selbstschließendes Element und muss 4 Attribute besitzen, media welches den Wert print oder screen besitzt. Eine mit print beschriebene CSS-Datei wird nur in dem Moment genutzt in welchem der Nutzer eine Seite ausdruckt. Mit screen gekennzeichnete CSS-Dateien werden für die Darstellung auf sämtlichen Bildschirmen, egal ob PC oder Smartphone genutzt.
Das wichtigste Attribut ist href (für hyperlink reference) welches den Pfad zur CSS-Datei angibt.
Die letzten zwei Attribute type und rel beschreiben die Art des Dokumentes und den Anwendungsfall. Hier muss zwangsweise type=”text/css” und rel=”stylesheet” gesetzt werden.
<link media="screen" href="/css/master.css" type="text/css" rel="stylesheet">Listen, Bilder und Struktur-Elemente
Sowohl für Aufzählungen als auch bspw. für Menüs werden meist **Listen** genutzt. Hierbei gibt es zwei Typen von Listen, die Ordered-List (<ol></ol>, geordneter Liste) welche von die Elemente eine Ordnungszahl (1., 2., …) anfügt und die Unordered-List (<ul></ul>, ungeordnete Liste) welche nur einen Punkt (•) vor die Listen-Elemente stellt. Innerhalt einer Liste, egal welchen Types, werden Listen-Elemente mit <li>Inhalte</li> (List item) definiert.
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>Bilder werden mit dem selbstschließenden <img/>-Tag eingefügt. Das src-Attribut (source = Quelle) ist das wichtigste Attribut und gibt den Pfad zur Bild-Datei an.
Außerdem braucht jedes Bild ein alt-Text (alternative Text) welcher angezeigt wird, wenn das Bild nicht geladen werden kann (je nach Browser) und sowohl für Screenreader (Geräte zum Lesen von Webseiten für Menschen mit Sehbehinderung) als auch Suchmaschinen wichtiger Inhalt ist, da Bilder nicht dargestellt / gelesen werden können.
<img src="./media/polar-bear.jpg" alt="Eisbär baut Iglu" />Das <div>-Element wird genutzt um HTML-Seiten zu strukturieren. Es ist im Grunde eine Box die mit Inhalt gefüllt werden kann. So ist es einfach verschiedenen Teilbereiche einer Seite voneinander zu trennen. Im unten gezeigten Beispiel wird der gesamte Inhalt in ein <div>-Element gegeben damit dieser später rechts von dem Menü angezeigt werden kann und nicht jede Arbeit einzeln ausgerichtet werden muss. Das Div sammelt somit allen Inhalt in einem leicht zu Stylenden Element.
<div> <!-- Navi, wird später links positioniert -->
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><div> <!-- Kompletter Inhaltsbereich -->
<h1>Porfolio</h1>
<div> <!-- Einzelnes Portfolio Item -->
<h2>Titel der Arbeite</h2>
<img src="./media/item.jpg" alt="Beschreibung des Bildes">
<p>Beschreibender Text</p>
</div></div>
Dabei funktionieren die neuen HTML5-Element wie bspw. <menu>, <nav>, <aside> oder<article> genauso wie divs. Der einzige Sinn dieser Elemente ist, einen Kontext zu liefer und leichter von Tools wie bspw. Artikel-Readern dargestellt werden zu können.
Seiten verknüpfen
Webseiten sind im Grunde verknüpfte (verlinkte) Einzelseiten, also HTML-Dokumente die mithilfe von Hyperlinks verknüpft sind. Das dafür zu nutzende Element ist der <a>-Tag (a kommt von Anchor = Anker). Das <a>-Tag hat einen öffnenden <a> und einen schließenden </a> Teil zwischen welchen sich der klickbare Inhalt (Text oder Bild, kann teilweise auch weitere Elemente umschließen) befindet. Das zweite wichtige Attribut ist das href-Attribut, welches genau wie beim weiter oben beschriebenen <link>-Tag den Pfad zu dem zu ladenden Dokument angibt. Hierbei kann sowohl eine Domain (bspw. http://www.google.de) verlinkt werden, als auch ein Dokument (bspw. ./about.html = about.html Dokument im gleichen Ordner wie die aktuelle Datei aus welcher verlinkt wird).
Das Title-Attribut ist optional und beinhaltet einen Text der als Tool-Tip bei angezeigt wird, wenn sich die Maus über dem Link befindet. Dies ist nützlich wenn eine genauere Beschreibung für den Link nötig ist. Im allgemeinen sollte der Link-Text aber schon so aussagekräftig sein, das ein Titel-Attribut nicht nötig ist. Das ist sowohl vorteilhaft für SEO als auch für Touch-gesteuerte Geräte, da hier der Titel nicht angezeigt wird.
Ein weiteres interessantes Attribut ist das Target-Attribut. Dieses gibt an, ob das Verknüpfte Dokument in einem neuen Fenster geladen werden soll. Das ist bspw. sinnvoll, wenn auf eine andere Webseite verlinkt wird. Um den Link in einem neuen Fenster anzuzeigen wird dem Target-Element der Wert _blank (mit Unterstrich am Anfang) zugewiesen. Soll das Dokument im gleichen Fenster geöffnet werden, wird das Target-Element nicht aufgeführt.
<a href="http://www.google.de" title="Beschreibungstext auf hover" target="_blank">Klickbarer Link-Text</a><a href="./about.html" title="Beschreibungstext auf hover" ><strong>Fetter, klickbarer Link-Text</strong></a>
Richtiger Coding-Style
Ein guter Coding-Style ist zwar für das funktionieren des Codes nicht von Bedeutung, allerdings erleichtert es das finden von Fehler enorm. Durch einen ordentlichen und gleich bleibenden Stil ist es auch einfach sich im Code zurecht zu finden und die Hierarchien zu erkennen.
Es gibt viele Ansichten wie gute Code formatiert ist und jedes Unternehmen hat einen eigenen Styleguide wie bspw. Google oder Github.
Sofern man nicht mit anderen zusammen an einem Projekt arbeitet sind nur wenige Punkte wirklich wichtig.
Einheitliches Einrückung
Code sollte immer gleich und nach Hierarchie eingerückt werden. Bspw. immer mit 2 Tabs. Das gilt sowohl wenn es tiefer in die Hierarchie geht, als auch wenn die Elemente wieder geschlossen werden.
<body> <!-- nicht eingerückt, da level 0 -->
<div> <!-- eingerückt, da level 1 -->
<h1>Headline</h1> <!-- zweifach eingerückt, da level 2 -->
</div>
</body>Neue Zeile für jeden Block
Jedes Block-Element (https://developer.mozilla.org/en-US/docs/HTML/Block-level_elements) (bspw. <div>, <ul>, <ol>, <li>, <p>) sollte auf eine neue Zeile gesetzt werden, schließende Tags aber in der gleichen Zeile. Inline-Element (https://developer.mozilla.org/en-US/docs/HTML/Inline_elements) können innerhalb von Block-Elementen und auf einer Zeile gesetzt werden.
<div>
<ul>
<li>Item</li> <!-- schließende Tags in der gleichen Zeile -->
</ul>
<p>Copy text <strong>Inline-Element</strong>.</p>
</div>Doppelte Anführungszeichen nutzen
Für die alle Eigenschaftsdefinitionen von Elementen sollten doppelte Anführungszeichen genutzt werden.
<div class="class-name">Fehler finden und beheben
Techniken zur Fehlersuche
Es ist leicht bei der HTML-Programmierung Fehler zu machen und vor allem am Anfang passiert das auch sehr oft. Das Resultat ist meist eine komplett weiße Seite und somit leider wenig hilfreich. Allerdings gibt es einige gute Möglichkeiten Fehler schnell zu finden und oft begangene Fehler auf die man achten kann.
HTML Validator
Wenn etwas mit der Seite nicht stimmt bzw. einer der im Folgenden beschriebenen Umstände (leere Seite, falsche Styles, etc.) eintritt, sollte als erstes der HTML-Validator genutzt werden.
Ein Validator ist ein Tool, welches den Syntax (Code) prüft und Fehler ausgibt. Dafür gibt es den offiziellen Validator des W3C.
Leider sind die Fehlermeldungen teilweise etwas Kryptisch, meistens kann man aber davon ausgehen, dass der Fehler zwischen der 5 Zellen vor der angegebenen Zeile und 5 Zeilen danach auftritt (bspw. wenn Zeile 12 angegeben ist, liegt der Fehler meist zwischen Zeile 7 und 17).
Anfänglich sind Validatoren etwas umständlich, mit etwas Gewöhnung kann man so aber schnell den Fehler finden.
Auskommentieren
Sofern man überhaupt keine Idee hat wo der Fehler liegen könnten und auch der Validator nicht hilft, kann man anfangen Teile des Codes auszukommentieren, d.h. den Code mit Kommentar-Zeichen zu umgeben, damit dieser temporär deaktiviert ist. Funktioniert der Rest dann, muss der Fehler innerhalb des auskommentierten Bereiches liegen.
<div>…</div><!— hier beginnt das kommentar
<div< … </div>
und hier endet es --><p>…</p>
Typische Fehler suchen
Oft findet man auch schnell selbst einen der unten aufgeführten Fehler. Wenn ihr nach jeder Änderung kurz testet, ob die Seite noch funktioniert, wisst ihr ja sobald ein Fehler auftritt, dass es mit der letzen Änderung zusammen hängt. Der Fehler lässt sich somit oft schnell auffinden.
Das falsche schließen von Tags kann auch gut mithilfe der *Suchen und ersetzen* Funktion gefunden werden. ersetzt einfach alle **<** durch **<** (also dasselbe Zeichen) und alle **>** durch **>**. Die Anzahl der Ersetzung wir bspw. in Textmate angezeigt und sollte identisch sein.
Stackoverflow / Communities
Programmierer sind im allgemeinen recht hilfsbereite Menschen und so gibt es einige gute Foren in denen man Hilfe für Probleme bekommen kann. Eine der besten Communities ist definitiv Stackoverflow.com (englisch). Oft hilft schon eine Suche, da hier wirklich viele Fragen und Antworten vorhanden sind.
Häufige Fehler
Tag ist nicht geschlossen
Das äußert sich zumeist indem der Style falsch ist oder auf einmal ein sehr großer Bereich ein Link oder eine Überschrift ist. Zumeist wurde das schließen Tag entweder ganz vergessen oder enthält keinen Slash.
<h1> Title <!-- hier fehlt eine </h1>-Element -->
<p>Das hier wird nun auch als Überschrift dargestellt.</p><h2>Überschrift<h2> <!-- hier fehlt eine / in dem h2-Element -->
<p>Das hier wird nun auch als Überschrift dargestellt.</p>
Tag-Klammer ist nicht geschlossen
Dieser Fehler äußert sich meist, indem die komplette Seite und auch der Quelltext leer ist.
<!-- schließender h1-Tag ist falsch, da < anstatt > am Ende -->
<h1> Title </h1< <-- Richtig wäre </h1> -->
<h1> Title </h1>
Falsche Reihenfolge beim Schließen von Elementen
Dieser Fehler zeigt sich meist indem die Styles falsch dargestellt werden. Hier würde sowohl Überschrift als auch Copy Text als Headline dargestellt werden.
<h1>Überschrift
<p>Copy Text</p></h1>Falsche Anführungszeichen
Bei Attributen vergisst man oft die Anführungszeichen komplett, oder an einer stelle.
Dieser Fehler zeigt sich meist indem die komplette Seite und auch der Quelltext leer ist, da ein Parse-Error (Fehler beim Aufbereiten des Dokumentes durch den Browser) auftritt.
<!-- Gar keine Anführungszeichen -->
<a href=http://www.google.de>Google</a><!-- Anführungszeichen nur auf einer Seite -->
<img src="image.jpg /><!-- Doppelte Anführungszeichen auf einer Seite -->
<div class="class-name"">…
<!— Verschiedenen Anführungszeichen (einfach und doppelt) -->
<div class='class-name">…
<!— Falsche (typografische) Anführungszeichen -->
<div class=”class-name„>…
<div class=«class-name»>…
