Copyright Gerd Wagner, , Lehrstuhl Internet-Technologie, Brandenburgische Technische Universität Cottbus, Some rights reserved.

Transkript

1 Einführung in HTML Die Webseitenbeschreibungsssprache Letzte Änderung am Copyright Gerd Wagner, , 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.

2 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=" 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 ( 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

3 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.

4 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: <p>dies ist ein Link auf <a href=" Homepage</a>.</p> Dies ist ein Link auf TBL's Homepage. 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: <p>dies ist ein Querverweis auf die <a href="#literatur">literaturliste</a>.</p> Dies ist ein Querverweis auf die Literaturliste. 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. <em>betont</em> und <strong>wichtig</strong> betont und wichtig Validierung XML- und HTML-Dokumente können mit Hilfe von dazu geeigneten Programmen validiert,

5 d.h. auf syntaktische Korrektheit überprüft werden. Empfehlenswert ist dazu der Online-Validierungsdienst Bei seinem Aufruf ist darauf zu achten, dass der Parameter Preset auf den Wert "XHTML5 + SVG 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  beendet:  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:

6 Darstellun g <abbr title="extensible Hypertext Markup Language">HTML</abbr> 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 <p>die Bibel belehrt uns in Matthäus Kapitel 16 Vers 16: <q cite=" hülfe es dem Menschen, so er die ganze Welt gewönne und nähme doch schaden an seiner Seele? </q>.</p> 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 <p>tim Berners-Lee, der Erfinder des World Wide Web, sagt:</p> <blockquote cite=" 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

7 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

8 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. Darstellun g <img src=" 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:

9 Darstellun g <img src="berners-lee.jpg" alt="tim Berners-Lee"/> Listen Spiegelstrichlisten <ul> <li>listenelement1</li> <li>listenelement2</li> <li>listenelement3</li> </ul> Listenelement1 Listenelement2 Listenelement3 Aufzählungslisten <ol> <li>listenelement1</li> <li>listenelement2</li> <li>listenelement3</li> </ol> 1. Listenelement1 2. Listenelement2 3. Listenelement3 Definitionslisten <dl> <dt>ausdruck1</dt> <dd>definitionstext1</dd> <dt>ausdruck2</dt> <dd>definitionstext2</dd> </dl> Ausdruck1 Definitionste xt1 Ausdruck2 Definitionste

10 Einbettung von JavaScript-Code xt2 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 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; ISBN: