Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

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

Ähnliche Präsentationen


Präsentation zum Thema: "HTML Hypertext Markup Language Seminar Internetpublishing BOK Veranstaltung des ZfS Kirsten Schulte."—  Präsentation transkript:

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

2 Webdesign :: Überblick Überblick 1. 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,

3 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 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. 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 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 Absatztext oder eine Überschrift Überschrift. 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 oder eine Linie. Sie haben keinen abschließenden Tag. Befehle können miteinander kombiniert bzw. verschachtelt werden. (c) Kirsten Schulte,

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

8 Webdesign :: HTML:: Textauszeichnung Befehle zur Textauszeichnung Einen Absatz definieren: Absatz Text Einen Zeilenumbruch erzeugen: Ein zusätzliches Leerzeichen erzeugen: Eine Überschrift erzeugen: Überschrift (c) Kirsten Schulte, 8 AUFGABE Benutzen Sie die obenstehenden Tags in der Datei Goethe. Wie sehen die „Sonderzeichen“ ä und ß im Quellcode aus?

9 Webdesign :: HTML:: Textauszeichnung Befehle zur Textauszeichnung Einen Text in Fettschrift formatieren (bold): Text Einen Text kursiv formatieren (italics): Text Einen Text unterstreichen (underline): Text (nicht empfehlenswert, da Unterstreichungen auf Links hinweisen) Mehrere Formatierungen verschachteln, z.B. : dieser Text ist fett und kursiv (c) Kirsten Schulte, 9 AUFGABE Formatieren Sie in der Datei Goethe.htm Hexenmeister (fett) Walle, Walle (kursiv)

10 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 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: …. und …. Innerhalb dieses Rahmens werden die einzelnen Listenelemente angegeben. Jedes Listenelement wird durch die Tags … ausgezeichnet. (c) Kirsten Schulte, 11 AUFGABE Öffnen Sie die Datei index.htm und geben Sie eine Aufzählungsliste mit mehreren Dichtern ein: Goethe, Benn, Heine, Lasker-Schüler

12 Webdesign :: HTML:: Grafiken einbinden Grafiken einbinden Durch folgenden Tag können Sie eine Grafik einbinden. (H TML : ) (c) Kirsten Schulte, 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

13 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.: Absatztext, 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.http://de.selfhtml.org (c) Kirsten Schulte,

14 Webdesign :: HTML:: Verweise (Links) definieren Links definieren Links können mit folgendem Befehl aufgerufen werden: Der Zauberlehrling Der Zauberlehrling (c) Kirsten Schulte, 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

15 Webdesign :: HTML:: Tabellen erstellen Tabellen erstellen Folgende Tags gehören zur Erstellung von Tabellen: … der Rahmen einer Tabelle … eine Tabellenzeile (row) … eine Tabellenzelle (table data) (c) Kirsten Schulte, 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


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

Ähnliche Präsentationen


Google-Anzeigen