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

Webdesign :: Überblick 08.04.2017 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, kirsten.schulte@gmail.com

Webdesign :: HTML :: Grundlagen 08.04.2017 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, kirsten.schulte@gmail.com

Webdesign :: HTML :: Eigenschaften HTML 08.04.2017 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, kirsten.schulte@gmail.com

Webdesign :: HTML::Erstellung von HTML-Dok. 08.04.2017 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, kirsten.schulte@gmail.com

Webdesign :: HTML :: Quellcode 08.04.2017 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, kirsten.schulte@gmail.com

Webdesign :: HTML:: Das Grundgerüst 08.04.2017 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, kirsten.schulte@gmail.com

Webdesign :: HTML:: Textauszeichnung 08.04.2017 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, kirsten.schulte@gmail.com

Webdesign :: HTML:: Textauszeichnung 08.04.2017 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, kirsten.schulte@gmail.com

Webdesign :: HTML :: Block und Inline-Elemente 08.04.2017 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, kirsten.schulte@gmail.com

Webdesign :: HTML:: Aufzählungslisten 08.04.2017 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, kirsten.schulte@gmail.com

Webdesign :: HTML:: Grafiken einbinden 08.04.2017 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, kirsten.schulte@gmail.com

Webdesign :: HTML:: Attribute 08.04.2017 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. (c) Kirsten Schulte, kirsten.schulte@gmail.com

Webdesign :: HTML:: Verweise (Links) definieren 08.04.2017 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, kirsten.schulte@gmail.com

Webdesign :: HTML:: Tabellen erstellen 08.04.2017 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, kirsten.schulte@gmail.com