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

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

Documents

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