HTML Hypertext Markup Language Seminar Internetpublishing BOK Veranstaltung des ZfS Kirsten Schulte

HTMLHypertext Markup Language

Seminar

Internetpublishing

BOK Veranstaltung des ZfS

Kirsten Schulte

Webdesign :: Überblick

Überblick1. HTML Grundlagen

2. Eigenschaften von HTML

3. Erstellung von HTML-Dokumenten

4. Der Quellcode

5. Blockelemente und Inline-Elemente

6. Das Grundgerüst einer HTML-Datei

7. Befehle / Tags

8. Attribute

(c) Kirsten Schulte, [email protected]

2 11.04.23

Webdesign :: HTML :: Grundlagen

HTML - Grundlagen• HTML

• HTML steht für Hypertext Markup Language. Es ist die „Sprache“ mit der WWW-Dokumente erstellt werden.

• Hypertext• Hypertext ist Text mit beliebiger Verknüpfung zu Daten

und Teilen von Daten. Die Verknüpfung wird durch Hyperlinks (kurz Links) realisiert.

• HTTP• HTTP steht für Hypertext Transfer Protocol .• Es ist ein Standard zur Übermittlung von Multimedia-

Dokumenten (HTML-Dokumenten) im Internet.


3 11.04.23

Webdesign :: HTML :: Eigenschaften HTML

Eigenschaften von HTML• HTML ist keine „echte“ (Programmier-) Sprache, sondern eine

Auszeichnungssprache.

• Neben der „Auszeichnung“ von Texten können auch Bild und Ton eingebunden werden.

• HTML bietet Schnittstellen zu anderen (Programmier-) Sprachen, z.B. JavaSkript, PHP.

• Es gibt verschiedene Versionen von HTML mit unterschiedlichem Funktionsumfang.

• HTML wurde vom World Wide Web Consortium (W3C) bis Version 4.01 weiterentwickelt. Diese Version ist seit 1999 gültig. Mitte 2014 soll die Version HTML 5 zum Standard werden.


4 11.04.23

Webdesign :: HTML::Erstellung von HTML-Dok.

Erstellung von HTML-Dokumenten• Zur Erstellung von HTML-Dateien benötigt man

einen Texteditor, um den Quellcode in HTML zu schreiben und einen Browser, um die Seiten darzustellen.

• Es gibt Software - HTML-Editoren, Webeditoren - die einem die Arbeit erleichtern. Wir arbeiten im Seminar z.B. mit Dreamweaver, einem Webeditor.

• Eine HTML-Datei hat die Endung .htm oder .html• Die Startseite eines Internetauftritts wird meistens

am Namen des Dokumentes erkannt: index.htm ist am weitesten verbreitet.


5 11.04.23

Webdesign :: HTML :: Quellcode

Der Quellcode

• Ein HTML-Dokument besteht aus Daten und Befehlen (oder besser

Marken) = Tags (sprich: tägs).

• Im Text werden strukturelle Elemente „ausgezeichnet“, z.B. ein

Absatz <p>Absatztext</p> oder eine Überschrift

<h1>Überschrift</h1>.

• Diese Elemente werden durch Tags, auf deutsch "Marken", eingeleitet

und abgeschlossen (Anfangs- und Ende-Tag).

• Es gibt auch Elemente, die keinen Elementinhalt haben, z.B. der

Zeilenumbruch <br> oder eine Linie <hr>. Sie haben keinen

abschließenden Tag.

• Befehle können miteinander kombiniert bzw. verschachtelt werden.


6 11.04.23

Webdesign :: HTML:: Das Grundgerüst

AUFGABE • Öffnen Sie den Ordner Website Gedichte in Ihrem eigenen

Laufwerk.• Öffnen Sie die Datei Goethe.htm mit dem Editor - Sie

sehen den Quelltext mit dem Grundgerüst der HTML-Datei und ein wenig Text.

• Öffnen Sie jetzt die Datei Goethe.htm mit dem Browser FireFox. Was fällt Ihnen auf?


7

Das Grundgerüst einer HTML-Datei

11.04.23

Webdesign :: HTML:: Textauszeichnung

Befehle zur Textauszeichnung• Einen Absatz definieren: <p>Absatz Text</p>• Einen Zeilenumbruch erzeugen: <br> • Ein zusätzliches Leerzeichen erzeugen: • Eine Überschrift erzeugen: <h[1-6]>Überschrift</h[1-6]>


8

AUFGABE

• Benutzen Sie die obenstehenden Tags in der Datei Goethe.

• Wie sehen die „Sonderzeichen“ ä und ß im Quellcode aus?

11.04.23

Webdesign :: HTML:: Textauszeichnung

Befehle zur Textauszeichnung• Einen Text in Fettschrift formatieren (bold): <b>Text</b>• Einen Text kursiv formatieren (italics): <i>Text</i>• Einen Text unterstreichen (underline): <u>Text</u>

(nicht empfehlenswert, da Unterstreichungen auf Links hinweisen)

• Mehrere Formatierungen verschachteln, z.B. :• <b><i>dieser Text ist fett und kursiv</i></b>


9

AUFGABE

• Formatieren Sie in der Datei Goethe.htm

• Hexenmeister (fett)

• Walle, Walle (kursiv)

11.04.23

Webdesign :: HTML :: Block und Inline-Elemente

Blockelemente und Inline-Elemente• Es gibt nur eine Hand voll HTML-Befehle. Die damit

ausgezeichneten Elemente werden unterschieden nach Block- und Inline-Elementen.

• Alle Befehle, mit denen automatisch der folgende Text in einer neuen Zeile angezeigt wird, z.B. Absätze und Überschriften, nennt man Blockelement.

• Befehle, die keinen Zeilenumbruch bewirken, wie z.B. fett, kursiv, unterstrichen, zählen zu den Inline-Elementen.


10 11.04.23

Webdesign :: HTML:: Aufzählungslisten

Aufzählungslisten• Das, was in Word Aufzählungen und Nummerierungen

sind.• Eine Aufzählungsliste wird „umrahmt“ mit den Tags in

denen der Listentyp angegeben wird: es gibt geordnete und ungeordnete Listen: <ol>….</ol> und <ul>… <ul>.

• Innerhalb dieses Rahmens werden die einzelnen Listenelemente angegeben. Jedes Listenelement wird durch die Tags <li>… </li> ausgezeichnet.


11

AUFGABE

• Öffnen Sie die Datei index.htm und geben Sie eine Aufzählungsliste mit mehreren Dichtern ein: Goethe, Benn, Heine, Lasker-Schüler

11.04.23

Webdesign :: HTML:: Grafiken einbinden

Grafiken einbinden• Durch folgenden Tag können Sie eine Grafik einbinden.

<img src=„goethe.png“><img src=„bilder/goethe.png“> (HTML: <img src=„goethe.png“ > )


12

AUFGABE

• Die Bilder der Gedichtesite stehen im Unterordner „bilder“ des Ordners „Website Gedichte“.

• Binden Sie das Bild „goethe.png“ in die HTML-Datei „Goethe.htm“ ein.

11.04.23

Webdesign :: HTML:: Attribute

Attribute• Die Tags können zusätzliche Angaben zur Formatierung besitzen.

Diese Angaben werden in den Start-Tags als sogenannte Attribute (Eigenschaften) vorgenommen.

• Den meisten Attributen werden Werte zugewiesen, es gibt aber in HTML auch Attribute ohne Wert.

• Der einem Attribut zugewiesene Wert wird durch doppelte Anführungszeichen eingeschlossen

Bsp.: <p align="center“> Absatztext </p>,

<hr width=“250px“ size=“5“ align=“center“ color=“red“ noshade>

• Im Dokument HTML_Attribute.doc finden Sie die wichtigsten Attribute.

• Auf der Website: http://de.selfhtml.org können Sie nachschauen, welche Attribute in welchen Befehlen verwendet werden können.


13 11.04.23

Webdesign :: HTML:: Verweise (Links) definieren

Links definieren• Links können mit folgendem Befehl aufgerufen werden:

<a href=„Goethe.htm">Der Zauberlehrling</a>

<a href=„[Unterordner]/Goethe.htm">Der Zauberlehrling</a>


14

AUFGABE

• Öffnen Sie die HTML-Datei index.htm und erstellen Sie Verknüpfungen zu den Seiten der Dichter: Goethe, Benn, Heine und Lasker-Schüler.

11.04.23

Webdesign :: HTML:: Tabellen erstellen

Tabellen erstellen• Folgende Tags gehören zur Erstellung von Tabellen:

• <table>…</table> der Rahmen einer Tabelle • <tr>…</tr> eine Tabellenzeile (row)• <td>…</td> eine Tabellenzelle (table data)


15

AUFGABE

• Erstellen sie in index.htm eine Tabelle mit 4 Zeilen und 3 Spalten. Tragen Sie Dichter und Titel der Gedichte ein.

• Fügen Sie in der 3. Spalte die Bilder der Dichter ein.

11.04.23

Documents

HTML Hypertext Markup Language Seminar Internetpublishing BOK Veranstaltung des ZfS Kirsten Schulte