WS12/13 -- IT-Zertifikat: Allgemeine Technologien II | 02: HTML5 II

Universität zu Köln. Historisch-Kulturwissenschaftliche Informationsverarbeitung Jan G. Wieners // [email protected]
Allgemeine Technologien II Wintersemester 2012 / 2013 22. Oktober 2012 – Die Hypertext Markup Language (HTML) II

Hypertext Markup Language (HTML)  Bilder einbinden: <img>  Relative
Angabe  Absolute Angabe  Hyperlinks: <a>  Attribute:  href  name  Anker  Metainformationen im Kopfteil des HTML- Dokumentes Themenüberblick „HTML“

Dateinamenerweiterung: .htm oder .html (Dateinamenerweiterungen unter Windows aktiviert?) Grundaufbau HTML-Dokument:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Name Ihres HTML-Dokumentes</title> </head> <body> </body> </html>  “Zwiebelschema” beachten! HTML I: Wichtig

Verschachtelung von Elementen:  Zahlreiche Möglichkeiten der Verschachtelung (definiert in
HTML-Spezifikation):  Ein Beispieltext  Ein kursiver Beispieltext  Zwiebelschema beachten: Innere Elemente müssen geschlossen werden, bevor äußere Elemente geschlossen werden:  Falsch: Beispieltext  Richtig: Beispieltext HTML – Regeln & Co. Quelle: http://de.wikipedia.org/w/index.php?title=Datei:Onion.jpg&filetimestamp=20060920104907, Donovan Govan

HTML II

 RELATIV <img src="gottschl.jpg" width="180" height="225" align="bottom" alt="Gottschl" /> vs.
 RELATIV (die Datei liegt eine Ebene höher „ ../ “) <img src= "../gottschl.jpg" width="180" height="225" align="bottom" alt="Gottschl" />  ABSOLUT (vollständige Angabe des Pfades zur Datei) <img src=“c:\dokumente\websites\gottschl.jpg" width="180" height="225" align="bottom" alt="Gottschl" /> vs.  ABSOLUT (vollständige Angabe des URL zur Datei) <img src=“http://www.example.com/gottschl.jpg" width="180" height="225" align="bottom" alt="Gottschl" /> Bilder / Ressourcen einbinden

Hyperlinks

Hyperlink  Anklickbares Wort, Gruppe von Wörtern oder ein Bild,
das auf eine andere Webseite oder einen Bereich einer Webseite verweist Hyperlinks

 Syntax:  <a> Tag mit Attribut href: <a href=“http://www.hki.uni-koeln.de“>
Historisch-Kulturwiss. Informationsverarbeitung </a>  Anker:  <a name=“seitenbereich“>Ein Seitenbereich, auf den verwiesen werden soll</a>  <a href=“#seitenbereich“>Verweis auf den Seitenbereich</a> Hyperlinks

Beispiel I: Verweis auf eine Website (im WWW) <html><head><title>Hyperlink Demo</title></head>
<body> <a href=“http://www.uni-koeln.de“> Zur Website der Uni Köln </a> </body> </html> Hyperlinks

Beispiel II: Verweis auf eine lokale Ressource <html><head><title>Hyperlink Demo</title></head> <body>
<a href=“anderewebsite.html“> Zu einer anderen Website </a> </body> </html> Hyperlinks

<a href=“#textblock“> Verweis auf einen markierten Seitenbereich </a> <a name=“textblock“> Auf diesen Textblock wird verlinkt. </a> </body> </html> Hyperlinks

<a href=“andereseite.html#textblock“> Verweis auf einen markierten Seitenbereich einer anderen HTML-Seite </a> </body> </html> Hyperlinks

Übung: Hyperlinks Aufgabe 1.a & 1.b

Metainformationen

 <meta name="description" content=“Beschreibung des HTML-Dokumentes" />  <meta name="keywords"
content=“HTML, CSS, PHP, MySQL, JavaSript" />  <meta name="author" content=“Jan Wieners“ />  …  http://de.selfhtml.org/html/kopfdaten/meta.htm Metainformationen

Übung: Metainformationen Aufgabe 2

Lösen Sie bitte die Hausaufgaben, die Sie zur zweiten Kurssitzung
auf der kursbegleitenden Website unter http://www.hki.uni-koeln.de/at2 finden Hausaufgaben

WS12/13 -- IT-Zertifikat: Allgemeine Technologien II | 02: HTML5 II

WS12/13 -- IT-Zertifikat: Allgemeine Technologien II | 02: HTML5 II

Jan Wieners

More Decks by Jan Wieners

Other Decks in Education

Featured

Transcript

Universität zu Köln. Historisch-Kulturwissenschaftliche Informationsverarbeitung Jan G. Wieners // [email protected]

Hypertext Markup Language (HTML)  Bilder einbinden: <img>  Relative

Dateinamenerweiterung: .htm oder .html (Dateinamenerweiterungen unter Windows aktiviert?) Grundaufbau HTML-Dokument:

Verschachtelung von Elementen:  Zahlreiche Möglichkeiten der Verschachtelung (definiert in

HTML II

 RELATIV <img src="gottschl.jpg" width="180" height="225" align="bottom" alt="Gottschl" /> vs.

Hyperlinks

Hyperlink  Anklickbares Wort, Gruppe von Wörtern oder ein Bild,

 Syntax:  <a> Tag mit Attribut href: <a href=“http://www.hki.uni-koeln.de“>

Beispiel I: Verweis auf eine Website (im WWW) <html><head><title>Hyperlink Demo</title></head>

Beispiel II: Verweis auf eine lokale Ressource <html><head><title>Hyperlink Demo</title></head> <body>

Beispiel II: Verweis auf eine lokale Ressource <html><head><title>Hyperlink Demo</title></head> <body>

Beispiel II: Verweis auf eine lokale Ressource <html><head><title>Hyperlink Demo</title></head> <body>

Übung: Hyperlinks Aufgabe 1.a & 1.b

Metainformationen

Metainformationen

 <meta name="description" content=“Beschreibung des HTML-Dokumentes" />  <meta name="keywords"

Übung: Metainformationen Aufgabe 2

/

Lösen Sie bitte die Hausaufgaben, die Sie zur zweiten Kurssitzung