Einführung in HTML Inhalt Einführung
Werbung
Einführung in HTML
Die Webseitenbeschreibungsssprache
Letzte Änderung am 17.4.2013.
Copyright © Gerd Wagner, 2007-2013, Lehrstuhl Internet-Technologie, Brandenburgische
Technische Universität Cottbus, Some rights reserved.
Inhalt
• Einführung
• Das Wesentliche in Kürze
• Mehr über HTML
• Literatur
Einführung
Die Webseitenbeschreibungsssprache HTML wurde 1990 von Tim Berners-Lee zusammen
mit dem Webseiten-Übertragungsprotokoll HTTP als Grundlage des World-Wide Webs
entwickelt. Die neueste Version von HTML heißt HTML5. HTML-Dateien sind ausführbare
Spezifikationen, die von Web-Browsern (wie Firefox, Opera oder Internet Explorer)
ausgeführt und zu einem Bildschirmdokument verarbeitet werden.
Ausführbare Spezifikationssprachen haben wie Programmiersprachen eine Syntax und
eine Semantik. Für HTML5 sind Syntax und Semantik in der HTML5-Empfehlung des W3C
definiert. Zum Beispiel wird dort für das Element em festgelegt, wo es verwendet werden
und welchen Inhalt es haben kann (seine Syntaxregeln), und dass es dazu dient, die
Betonung von Textstellen zu markieren (seine Semantik).
Der Präsentationsstil, der das Layout einer Webseite sowie die Schriftart, Schriftgröße,
Farbe und vieles mehr bestimmt, wird nicht mit HTML, sondern mit Hilfe der Sprache CSS
definiert.
HTML kann nicht nur mit der Stildefinitionssprache CSS kombiniert werden, sondern auch
mit der Programmiersprache JavaScript, mit deren Hilfe man Prozeduren, z.B. zur
Ausführung von Berechnungen oder für Spezialeffekte, in ein Webdokument einbetten
kann.
Das Wesentliche in Kürze
Inhalt
• Das HTML-Grundgerüst
• Abschnitte, Überschriften und Paragraphen
• Hyperlinks, Querverweise und Sprungziele
• Hervorhebung nach Betonung und Wichtigkeit
• Validierung
• Praxis: Eine HTML-Seite erstellen
Das HTML-Grundgerüst
Eine HTML-Webseite hat folgendes Grundgerüst:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Einführung in die Programmierung</title>
<meta charset="UTF-8" />
</head>
<body>
<header><h1>HTML</h1></header>
<section><h1>Organisatorisches</h1>
<p>Programmieraufgaben, Halbzeit- und Schlussklausur.</p>
</section>
</body>
</html>
In der ersten Zeile wird ein Dokument-Typ (HTML) angegeben. Danach folgt das
HTML-Wurzelelement html, in dem der HTML-Namensraum
(http://www.w3.org/1999/xhtml) mit Hilfe des xmlns-Attributs als Standardnamensraum
vereinbart und als Textinhalts-Sprache Deutsch (per Kürzel "de") angegeben wird. Das
html-Element hat zwei Unterelemente: head und body. Im Kopfelement head muss es ein
Unterelement title für den Webseitentitel geben. Außerdem sollte es ein meta-Element
mit einem charset-Attribut zur Angabe der Zeichensatzkodierung des HTML-Dokuments
geben. Zu empfehlen ist hierfür der Wert "UTF-8" (das ist die
Standard-Zeichensatzkodierung im Web). Weitere optionale Unterelemente im
Kopfbereich dienen dazu, Metainformationen anzugeben sowie CSS-Stilregeln und
JavaScript-Code in die HTML-Seite einzubetten oder mit ihr zu verknüpfen.
Im body-Element, dem Rumpf des Dokuments, gibt es ein header-Element und ein
section-Element auf oberster Ebene. Beide haben ein h1-Element. Innerhalb des
header-Elements handelt es sich dabei um den Titel des Dokuments, während es sich
innerhalb eines section-Elements um eine Kapitel- bzw. Abschnitts-Überschrift handelt.
Für HTML5 gibt es eine XHTML-Variante, die den Vorteil einer besser definierten
(strengeren) Syntax hat. XHTML5 basiert auf XML, einem allgemeinen Format für
Auszeichnungssprachen. Es gelten also auch die Syntax-Regeln von XML:
• Die Elemente eines XHTML-Dokuments beginnen mit einem Start-Tag der Form
<start-tag> und enden mit einem End-Tag der Form </end-tag>. Zu jedem Start-Tag
muss es also das entsprechende End-Tag geben.
• Tag-Namen werden ausschließlich mit Kleinbuchstaben geschrieben.
• Tags müssen korrekt verschachtelt sein. Falsch ist zum Beispiel <p><em></p></em>,
richtig ist <p><em></em></p>.
• Elemente können Attribute haben, die im Start-Tag in folgender Form notiert
werden: <start-tag attribut1="..." attribut2="..." ...>.
• Leere Elemente der Form <start-tag></end-tag> können einfacher als <start-tag />
notiert werden. Leere Elemente können Attribute haben (und sind dann nicht
wirklich leer).
Abschnitte, Überschriften und
Paragraphen
Die Textstruktur einer Webseite wird wie bei einem Textdokument durch Abschnitte,
Überschriften und Paragraphen bestimmt. Zur Auszeichnung eines Paragraphen gibt es
das p-Element. Das folgende HTML-Beispiel illustriert, wie man mit Hilfe dieser Tags
Überschriften und Paragraphen setzt:
<body>
<header>
<h1>Einführung in HTML</h1>
<p>Copyright © Gerd Wagner</p>
<nav>
<h1>Inhalt</h1>
<ul>
<li>Einführung</li>
<li>Kapitel 1</li>
<li>Kapitel 2</li>
</ul>
</nav>
</header>
<section><h1>1 Einführung</h1>
<p>Die Webseitenbeschreibungsssprache ...</p>
</section>
<section><h1>2 Syntax von HTML</h1>
<p>In diesem Kapitel ..</p>
<section><h1>2.1 Validierung</h1>
<p>HTML-Dokumente können validert werden ...</p>
</section>
</section>
</body>
Innerhalb eines Paragraphen kann man mit Hilfe von <br /> einen Zeilenumbruch
bewirken.
Hyperlinks, Querverweise und
Sprungziele
Das besondere an Webseiten ist die Möglichkeit, dass man mit einem Mausklick auf einen
Hyperlink ans andere Ende der Welt gelangen kann. Ein Hyperlink wird mit Hilfe des
a-Tags in Kombination mit dem href-Attribut definiert:
HTML-Code
Darstellung
<p>Dies ist ein Link auf <a
href="http://www.w3.org/People/Berners-Lee/">TBL's
Dies ist ein Link auf TBL's
Homepage.
Homepage</a>.</p>
Einen Link, der auf ein Sprungziel innerhalb derselben Web-Seite verweist, nennt man
auch Querverweis. Ein Querverweis wird ebenfall mit Hilfe des a-Tags in Kombination mit
dem href-Attribut definiert, allerdings wird statt einer Webadresse ein seiteninternes
Sprungziel mit vorangestelltem #-Symbol angegeben:
HTML-Code
Darstellung
<p>Dies ist ein Querverweis auf die <a
Dies ist ein Querverweis auf die
Literaturliste.
href="#Literatur">Literaturliste</a>.</p>
Die Angabe des Sprungziels in der Form "#Literatur" setzt voraus, dass es ein Element in
der Webseite gibt, dessen id-Attribut den Wert "Literatur" hat. Tatsächlich enthält das
vorliegende HTML-Dokument weiter unten folgendes Element:
<h2 id="Literatur">Literaturliste</h2>
Hervorhebung nach Betonung und
Wichtigkeit
Das em-Element dient dazu, die Betonung von Textbestandteilen zu kennzeichnen,
während strong dazu dient, die besondere Wichtigkeit von Textbestandteilen
hervorzuheben. Im Browser-Fenster wird strong normalerweise als Fettdruck umgesetzt,
während em normalerweise mit Kursivschrift dargestellt wird.
HTML-Code
<em>betont</em> und
<strong>wichtig</strong>
Darstellung
betont und wichtig
Validierung
XML- und HTML-Dokumente können mit Hilfe von dazu geeigneten Programmen validiert,
d.h. auf syntaktische Korrektheit überprüft werden. Empfehlenswert ist dazu der
Online-Validierungsdienst http://validator.nu/. Bei seinem Aufruf ist darauf zu achten,
dass der Parameter Preset auf den Wert "XHTML5 + SVG 1.1 + MathML 3.0" gesetzt
wird.
Praxis: Eine HTML-Seite erstellen
Um eine neue HTML-Seite zu erstellen, öffnen Sie einen Texteditor wie z.B. Notepad++
und kopieren dann zuerst das HTML-Grundgerüst in das Editor-Fenster. Als nächsten
fügen Sie weitere Inhalte in das Grundgerüst ein, z.B. einen Paragraphen mit Hilfe des
p-Elements.
Mehr über HTML
Inhalt
• Kommentare
• Spezielle Text-Bestandteile
• Weitere Elemente
Kommentare
Manchmal ist es sinnvoll, einen Kommentar in ein Web-Dokument mitaufzunehmen, ohne
dass dieser vom Browser ausgegeben wird. Mit dem Symbol <!-- wird ein Kommentar
eingeleitet und mit dem Symbol --> beendet:
<!-- Dies is ein Kommentar. -->
Spezielle Text-Bestandteile
HTML erlaubt es, eine Reihe spezieller Text-Bestandteile auszuzeichnen. Dazu gehören
Abkürzugen und Akronyme (mit dem HTML-Element abbr), Code-Fragmente (mit code und
pre) sowie Zitate (mit den HTML-Elementen q und blockquote).
Abkürzungen und Akronyme
Abkürzungen und Akronyme werden mit Hilfe des abbr-Elements ausgezeichnet. Beispiel:
HTML-Code
<abbr title="eXtensible Hypertext Markup
Language">HTML</abbr>
Darstellun
g
HTML
Eine auf diese Weise ausgezeichnete Abkürzung wird normalerweise mit einer
gepunkteten Linie unterstrichen dargestellt, um anzuzeigen, daß man den Volltext der
Abkürzung sehen kann, wenn man den Cursor über die Abkürzung bewegt.
Zitate
Bei Zitaten kann man mit Hilfe des Attributs cite auf eine Webseite verweisen, die die
Quelle des Zitats beschreibt.
Zitate als integrierte Bestandteile
eines Paragraphen
HTML-Code
<p>Die Bibel belehrt uns in Matthäus Kapitel 16
Vers 16: <q cite="http://www.diebibel.de/">Was
hülfe es dem Menschen, so er die ganze Welt
gewönne und nähme doch schaden an seiner Seele?
</q>.</p>
Darstellung
Die Bibel belehrt uns in Matthäus
Kapitel 16 Vers 16: Was hülfe es dem
Menschen, so er die ganze Welt
gewönne und nähme doch schaden an
seiner Seele?
Zitate als abgesetzte Textblöcke
HTML-Code
Darstellung
<p>Tim Berners-Lee, der Erfinder des World Wide Web, sagt:</p>
<blockquote cite="http://www.w3.org/People/Berners-Lee/Weaving/">
The vision I have for the Web is about anything being potentially connected
with anything. It is a vision that provides us with new freedom, and allows
us to grow faster than we ever could when we were fettered by the
hierarchical
classification systems into which we bound ourselves. It leaves the entirety
of our previous ways of working as just one tool among many. It leaves our
previous fears for the future as one set among many. And it brings the
workings of society closer to the workings of our minds.
</blockquote>
Tim Berners-Lee,
der Erfinder des
World Wide
Web, sagt:
The
vision I
have for
the Web
is about
anythin
g being
potentia
lly
connect
HTML-Code
Darstellung
ed with
anythin
g. It is a
vision
that
provide
s us
with
new
freedom
, and
allows
us to
grow
faster
than we
ever
could
when
we were
fettered
by the
hierarch
ical
classific
ation
systems
into
which
we
bound
ourselv
es. It
leaves
the
entirety
of our
previou
s ways
of
working
as just
one tool
among
many. It
leaves
our
previou
s fears
HTML-Code
Darstellung
for the
future
as one
set
among
many.
And it
brings
the
working
s of
society
closer
to the
working
s of our
minds.
Weitere Elemente
Bilder und Grafiken
Webseiten werden oft nur dann optisch interessant, wenn sie Bilder oder Grafiken
enthalten, die man ganz einfach mit Hilfe des img-Elements in Kombination mit den
Attributen src für die Bilddatei und alt für die Angabe einer kurzen Bildbeschreibung in
die Seite einbettet.
HTML-Code
Darstellun
g
<img src="http://oxygen.informatik.tu-cottbus.de/IT/images/berners-lee.jpg"
alt="Tim Berners-Lee"/>
Oft werden relative URLs verwendet, hier also z.B. src="berners-lee.jpg", um eine
Bilddatei anzugeben, die sich im selben Verzeichnis wie das HTML-Dokument befindet.
Wenn der Browser die Bilddatei nicht finden kann, wird statt des Bildes der mit dem
Attribut alt angegebene Alternativtext ausgegeben. In folgendem Beispiel gibt es die
Bilddatei nicht, was zur Anzeige des alt-Textes führt:
Darstellun
g
HTML-Code
<img src="berners-lee.jpg" alt="Tim
Berners-Lee"/>
Listen
Spiegelstrichlisten
HTML-Code
Darstellung
<ul>
<li>Listenelement1</li>
• Listenelement1
<li>Listenelement2</li>
• Listenelement2
• Listenelement3
<li>Listenelement3</li>
</ul>
Aufzählungslisten
HTML-Code
Darstellung
<ol>
<li>Listenelement1</li>
<li>Listenelement2</li>
1. Listenelement1
2. Listenelement2
3. Listenelement3
<li>Listenelement3</li>
</ol>
Definitionslisten
HTML-Code
<dl>
<dt>Ausdruck1</dt>
<dd>Definitionstext1</dd>
<dt>Ausdruck2</dt>
<dd>Definitionstext2</dd>
</dl>
Darstellung
Ausdruck1
Definitionste
xt1
Ausdruck2
Definitionste
HTML-Code
Darstellung
xt2
Einbettung von JavaScript-Code
JavaScript-Code kann innerhalb eines HTML-Dokuments mit Hilfe von script-Elementen
eingebettet werden. Um Konflikte mit speziellen Zeichen zu vermeiden, die in XML nicht
erlaubt sind, empfiehlt es sich, den JavaScript-Code entweder aus externen Dateien
einzubetten oder aber eine spezielle "Klammerung" zu verwenden. Eine externe
JavaScript-Datei "myscript.js" wird folgendermaßen eingebettet:
<script src="myscript.js"></script>
Eine interne Einbettung sollte folgendermaßen geklammert werden:
<script>
//<![CDATA[
function myJavaScriptFunction() {
... ;
}
//]]>
</script>
Literatur
• HTML5: Edition for Web Authors, W3C Working Draft 25 October 2012.
• Tim Berners-Lee, with Mark Fischetti. Weaving the Web: The Original Design and
Ultimate Destiny of the World Wide Web by its Inventor. Harper, San Francisco;
1999. ISBN: 0062515861.