HTML5 1 - keinerweiss
Werbung
HTML5 1
1/7
Doing Web Apps
HTML5 1
Autor:
Rüdiger Marwein
Letzte Änderung: 2014-10-18
Version:
1.1
Dieses Dokument darf – mit Nennung des Autoren - frei vervielfältigt, verändert und
weitergegeben werden.
Der Inhalt ist sorgfältig recherchiert, mit dem Dokument ist jedoch keinerlei Garantie auf
Fehlerfreiheit gewährleistet.
Dieser Inhalt ist unter einem Creative Commons Namensnennung Lizenzvertrag
lizenziert. Um die Lizenz anzusehen, gehen Sie bitte zu
http://creativecommons.org/licenses/by/2.0/de/ oder schicken Sie einen Brief an
Creative Commons, 559 Nathan Abbott Way, Stanford, California 94305, USA.
© 2014 Rüdiger Marwein
1
HTML5 1
2/7
Inhaltsverzeichnis
1.Einleitung...................................................................................................................3
2.Grundgerüst einer Webseite........................................................................................3
3.Aufbau von Tags........................................................................................................3
3.1.Tag....................................................................................................................3
3.2.Tag-Attribute......................................................................................................4
4.Einfache Textformatierung mit HTML...........................................................................4
5.Einfache Text-Strukturierung mit HTML........................................................................4
6.Links und URLs...........................................................................................................5
6.1.Links in HTML.....................................................................................................5
6.2.URL....................................................................................................................5
6.3.URL-Parameter...................................................................................................6
7.Einbinden von Stylesheets...........................................................................................6
© 2014 Rüdiger Marwein
2
1.Einleitung
HTML5 1
3/7
1.Einleitung
HTML steht für HyperText Markup Language.
Ein Hypertext-Dokument ist eine Webseite mit Links zu anderen Webseiten im Internet.
HTML gibt es seit etwa 1992.
HTML ist eine Text-Beschreibungs-Sprache, keine Programmiersprache.
Die aktuelle HTML-Version ist 4.01.
HTML5 befindet sich von Seiten des World-Wide-Web-Consortiums (W3C) noch in der
Entwicklung, erfreut sich jedoch schon regem Einsatz im Internet.
Ein HTML-Dokument wird mit sog. Tags [tæg] (Auszeichnern) aufgebaut, wie man sie
durch XML kennt.
Quellen zur Vertiefung:
http://www.w3schools.com/html/default.asp
http://www.html5rocks.com/de/
http://webkompetenz.wikidot.com/docs:html-handbuch
http://html5boilerplate.com/
2.Grundgerüst einer Webseite
Ein HTML-Dokument ist quasi ein XML-Dokument, dessen Tags durch die HTMLSpezifikation bestimmt sind.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>Der Titel der Webseite</title>
</head>
<body>
Hier steht der Inhalt den man auf der Webseite sehen kann.
</body>
</html>
Der Doctype kennzeichnet das HTML-Dokument als HTML5-Dokument.
Das gesamte Dokument ist in das <html>-Tag eingeschlossen.
Darin befindet sich ein <head>-Bereich (für Angaben, die man in der Webseite nicht
sehen kann) und der eigentliche Inhaltsbereich <body>.
In head und body können wiederum Tags stehen.
3.Aufbau von Tags
3.1.Tag
Tags sind eingeschlossen in spitze Klammern.
Jedes Tag hat ein Anfangs-Tag und ein Ende-Tag (oder es beendet sich selbst).
© 2014 Rüdiger Marwein
3
HTML5 1
4/7
3.Aufbau von Tags
<strong>
</strong>
<br />
// Anfangs-Tag
// Ende-Tag
// Tag beendet sich selbst (Zeilenumbruch)
Ein Tag wird zwischen Anfangs-und Ende-Tag angewendet.
<strong>Fetter Text</strong>, danach nicht mehr fett
Tags können beliebig verschachtelt werden. Regel: das zuletzt geöffnete Tag muss als
erstes wieder geschlossen werden.
<div>Beispiel <strong>Fetter <em>Text</em></strong></div>
<div>
gilt für den gesamten Inhalt.
<strong>
gilt für den gesamten Text.
<em>
gilt für den Text „Text“.
3.2.Tag-Attribute
Anfangs-Tags können Attribute beinhalten, die näher beschreiben, wie sich dieses Tag
auswirken soll.
<h1 id="WichtigeEigenschaften">Thema: Wichtige
Eigenschaften</h1>
<a href="http://www.golem.de" target="_blank">Link zu
Golem</a>
Attribute stehen mit einem Leerzeichen vom Tag-Namen abgesetzt und bestehen aus
einem Bezeichner, dessen Eigenschaft/Wert mit einem Gleichheitszeichen verbunden
wird. Der Wert wird in Gänsefüßchen eingeschlossen. Wie
target="_blank"
Es können mehrere unterschiedliche Attribute innerhalb eines Tags verwendet werden.
Welche Attribute bei welchem Tag funktionieren, definiert die HTML-Spezifikation.
<h1 id="WichtigeEigenschaften">
id
Bezeichner für das id-Attribut
WichtigeEigenschaften
Wert des id-Attributs
4.Einfache Textformatierung mit HTML
Nachfolgend die am häufigsten verwendeten Textformatierungen.
<strong>
Fetter Text
<em>
Kursiver Text
<u>
Unterstrichener Text
<strike>
Durchgestrichener Text
<sup>
Hochgestellter Text
© 2014 Rüdiger Marwein
4
HTML5 1
5.Einfache Text-Strukturierung mit HTML 5 / 7
5.Einfache Text-Strukturierung mit HTML
Bei Textstrukturierung ist es empfehlenswert eine einheitliche, blockweise Einrückung
zu verwenden. So bleiben die Zusammenhänge der Tags leicht erfassbar.
<h1>
Überschrift ersten Grades
<h2> - <h5>
Überschrift 2. bis 5. Grades
<p>Absatz 1</p>
<p>Absatz 2</p>
Paragraph / Absatz
Absatz 1
Absatz 2
<ul>
<li>Punkt 1</li>
<li>Punkt 2</li>
</ul>
Unsortierte Liste (mit Punkten)
<ol>
<li>Punkt 1</li>
<li>Punkt 2</li>
</ol>
Geordnete Liste (mit Zahlen)
<ul>
<li>Punkt 1</li>
<li>Punkt 2
<ol>
<li>Punkt 2.1</li>
<li>Punkt 2.2</li>
</ol>
</li>
</ul>
Verschachtelte Listen
<blockquote>
„Phantasie ist wichtiger als
Wissen, denn Wissen ist
begrenzt.“
</blockquote>
Zitat
•
Punkt 1
•
Punkt 2
1.
Punkt 1
2.
Punkt 2
•
Punkt 1
•
Punkt 2
1.
Punkt 2.1
2.
Punkt 2.2
„Phantasie ist wichtiger
als Wissen, denn Wissen
ist begrenzt.“
6.Links und URLs
6.1.Links in HTML
Erst Links machen ein Hypertext-Dokument so richtig „Hyper“.
Das Link-Tag lautet <a> für Anchor (Anker). Damit das Link-Ziel klar ist, ist das Attribut
„href“ (hypertext-reference) Pflicht.
<a href="http://www.golem.de/index.htm">Link zu Golem</a>
6.2.URL
URL steht für Unique Resource Location.
Es gibt unterschiedliche Ausprägungen von Links innerhalb einer Webseite.
© 2014 Rüdiger Marwein
5
HTML5 1
6/7
6.Links und URLs
Angenommen, der Link befindet sich in einer Seite
http://example.com/de/infos.html
Link-Ziel an Link
Link-Typ
Ergebnis-URL
http://www.golem.de/index.htm Vollständig
http://www.golem.de/index.htm
/en/material.html
Absolut
/en/material.html
impressum.html
Relativ
/de/impressum.html
Der vollständige Link beinhaltet alle Komponenten einer URL:
1. Protokoll
http:// oder https://
2. Domain
bspw. www.golem.de
3. Pfad
bspw. /en/infos.html
Der absolute Link beinhaltet das vollständige Pfadsegment, beginnend mit einem
Schrägstrich „/“.
Der relative Link beinhaltet eine Pfadangabe ohne Schrägstrich am Anfang. Das Link-Ziel
wird ausgehend vom aktuellen Pfad ermittelt. Zwei Punkte „..“ als Pfad-Segment
bezeichnen die vorausgehende Pfad-Ebene.
Ausgangs-Seite
Link-Angabe
Ziel
/de/neu/infos.html
material.html
/de/neu/material.html
/de/neu/infos.html
jobs/alle.html
/de/neu/jobs/alle.html
/de/neu/infos.html
../unternehmen.html
/de/unternehmen.html
6.3.URL-Parameter
URLs können Parameter für Scripte auf dem Server beinhalten.
Diese sogenannten GET-Parameter sind wie folgt aufgebaut:
parameter=wert
Mehrere GET-Parameter können mit „&“ verbunden werden.
modul=Seite&aktion=Anzeigen&seite=Jobs
Diese Parameter-Kette (Query String) wird mit einem „?“ an die URL angeheftet.
/index.php?modul=Seite&aktion=Anzeigen&seite=Jobs
Eine URL mit Parametern wird auch als URI (Unique Resource Identifier) bezeichnet. Jede
URL ist auch eine URI, aber nicht jede URI ist eine URL.
7.Einbinden von Stylesheets
Stylesheets definieren das optische Erscheinungsbild einer Webseite und deren
Elementen.
Stylesheets werden üblicherweise im <head>-Bereich der Webseite notiert.
In der HTML-Seite als Style-Block:
© 2014 Rüdiger Marwein
6
7.Einbinden von Stylesheets
HTML5 1
7/7
<style>
body {
font-family: Arial, Helvetica, Verdana;
font-size: 0.9em;
}
</style>
Als externe Datei eingebunden (zu bevorzugen):
<link rel="stylesheet" type="text/css"
href="/styles/standard.css" />
8.Einbinden von JavaScript
JavaScript kann im <head> - oder im <body>-Bereich notiert werden. Die lineare
Verarbeitung ist bei der Platzierung zu berücksichtigen. Es wird dort ausgeführt, wo es
steht.
Direkt:
<script type="text/javascript">
alert("JavaScript sagt Hallo!");
</script>
Ausgelagert (zu bevorzugen):
<script type="text/javascript" src="/js/myscript.js"></script>
© 2014 Rüdiger Marwein
7
