HTML Hypertext Markup Language

Präsentation zum Thema: "HTML Hypertext Markup Language"—  Präsentation transkript:

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

2 Webdesign :: Überblick
Webdesign :: Überblick Überblick HTML Grundlagen Eigenschaften von HTML Erstellung von HTML-Dokumenten Der Quellcode Blockelemente und Inline-Elemente Das Grundgerüst einer HTML-Datei Befehle / Tags Attribute Überblick Seminar: was machen wir (c) Kirsten Schulte,

3 Webdesign :: HTML :: Grundlagen
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. (c) Kirsten Schulte,

4 Webdesign :: HTML :: Eigenschaften HTML
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. (c) Kirsten Schulte,

5 Webdesign :: HTML::Erstellung von HTML-Dok.
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. (c) Kirsten Schulte,

6 Webdesign :: HTML :: Quellcode
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. (c) Kirsten Schulte,

7 Webdesign :: HTML:: Das Grundgerüst
Webdesign :: HTML:: Das Grundgerüst Das Grundgerüst einer HTML-Datei 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? (c) Kirsten Schulte,

8 Webdesign :: HTML:: Textauszeichnung
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]> AUFGABE Benutzen Sie die obenstehenden Tags in der Datei Goethe. Wie sehen die „Sonderzeichen“ ä und ß im Quellcode aus? (c) Kirsten Schulte,

9 Webdesign :: HTML:: Textauszeichnung
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> AUFGABE Formatieren Sie in der Datei Goethe.htm Hexenmeister (fett) Walle, Walle (kursiv) (c) Kirsten Schulte,

10 Webdesign :: HTML :: Block und Inline-Elemente
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. (c) Kirsten Schulte,

11 Webdesign :: HTML:: Aufzählungslisten
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. AUFGABE Öffnen Sie die Datei index.htm und geben Sie eine Aufzählungsliste mit mehreren Dichtern ein: Goethe, Benn, Heine, Lasker-Schüler (c) Kirsten Schulte,

12 Webdesign :: HTML:: Grafiken einbinden
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“ > ) 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. (c) Kirsten Schulte,

13 Webdesign :: HTML:: Attribute
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: können Sie nachschauen, welche Attribute in welchen Befehlen verwendet werden können. (c) Kirsten Schulte,

14 Webdesign :: HTML:: Verweise (Links) definieren
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> 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. (c) Kirsten Schulte,

15 Webdesign :: HTML:: Tabellen erstellen
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) 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. (c) Kirsten Schulte,