Allgemeine Technologien II Wintersemester 2010/ Oktober 2010 HTML II

Größe: px

Ab Seite anzeigen:

Download "Allgemeine Technologien II Wintersemester 2010/ Oktober 2010 HTML II"

Inge Scholz
vor 6 Jahren
Abrufe

1 Allgemeine Technologien II Wintersemester 2010/ Oktober 2010 HTML II

2 Hausaufgaben

3 Hausaufgaben

4 Hausaufgaben Aufgabe 2

5 HTML II

6 Kursthemen HTML Hyperlinks <a> href Name Metainformationen im Kopfteil des HTML- Dokumentes Designparadigmen Framesets Tabellenbasierte Layouts Div-basierte Layouts (CSS)

7 Hyperlinks

8 HTML II Hyperlinks Hyperlink Anklickbares Wort, Gruppe von Wörtern oder ein Bild, das auf eine andere Webseite oder einen Bereich einer Webseite verweist Syntax: <a href= >Uni Kön Website</a> Anker: <a name= seitenbereich >Ein Seitenbereich, auf den verwiesen werden soll</a> <a href= #seitenbereich >Verweis auf den Seitenbereich</a>

9 HTML II Hyperlinks Beispiel I: Verweis auf eine Website (im WWW) <html><head><title>hyperlink Demo</title></head> <body> <a href= > Zur Website der Universität zu Köln </a> </body> </html>

10 HTML II 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>

11 HTML II Hyperlinks Beispiel II: Verweis auf eine lokale Ressource <html><head><title>hyperlink Demo</title></head> <body> <a href= #textblock > Verweis auf einen markierten Seitenbereich </a> <a name= textblock ><p> Auf diesen Textblock wird verlinkt. </p></a> </body> </html>

12 HTML II Hyperlinks Beispiel II: Verweis auf eine lokale Ressource <html><head><title>hyperlink Demo</title></head> <body> <a href= andereseite.html#textblock > Verweis auf einen markierten Seitenbereich einer anderen HTML-Seite </a> </body> </html>

13 Übung: Hyperlinks

14 Metainformationen

15 Metainformationen

16 Metainformationen <meta name="description" content= Beschreibung des HTML-Dokumentes" /> <meta name="keywords" content= HTML, CSS, PHP, MySQL, JavaSript" /> <meta name="author" content= Jan Wieners"> <meta http-equiv="content-type" content="text/html; charset=iso ">

17 Übung: Metainformationen

18 HTML Designparadigmen

19 HTML Designparadigmen 1. Framesets 2. Tabellenbasierte Layouts 3. Div-basierte Layouts (CSS)

20 Framesets (anno Pief) Einzelne Bereiche der Website realisiert über separate HTML-Dateien

21 Framesets CEEC Quellcode

Framesets Pro: Unterschiedliche Inhalte (HTML-Dateien) lassen sich verhältnismäßig einfach (zwei Tags) wiedergeben <frameset> <frame> Überblick: http://de.selfhtml.

22 Framesets Pro: Unterschiedliche Inhalte (HTML-Dateien) lassen sich verhältnismäßig einfach (zwei Tags) wiedergeben <frameset> <frame> Überblick: Contra Barrierefreiheit nicht gewährleistet Verlinkungsschwierigkeiten: Wird direkt auf das Frame, d.h. die eingebettete HTML-Datei verlinkt, fehlen u.u. Navigationselemente

23 Barrierefreiheit: Biene Award

24 HTML Designparadigmen 1. Framesets 2. Tabellenbasierte Layouts 3. Div-basierte Layouts (CSS)

25 HTML: Tabellen <table> <tr> </tr> <tr> </tr> </table> Attribute: border= 1px cellspacing= 0 cellpadding= 0 <td>zeile 1, Spalte 1</td> <td>zeile 1, Spalte 2</td> <td>zeile 2, Spalte 1</td> <td>zeile 2, Spalte 2</td>

26 Tabellenbasierte Layouts IDSL I (

27 Tabellenbasierte Layouts

28 Tabellenbasierte Layouts Pro: Leistet, was versprochen (komplizierte Layouts über mehrere Spalten) Contra Wartbarkeit: Hinzufügen neuer Elemente umständlich Ändern Zeileneigenschaften aufgrund der Vielzahl der Zeilen wenig praktikabel Enormer Overhead: Um triviale Layouts zu generieren, sind einige <table>, <tr>, <td> Tags nötig

29 HTML Designparadigmen 1. Framesets 2. Tabellenbasierte Layouts 3. Div-basierte Layouts (CSS)

30 /

31 Hausaufgaben Lösen Sie bitte die Hausaufgaben, die Sie zur zweiten Kurssitzung auf der kursbegleitenden Website unter finden

Ähnliche Dokumente

Digitale Medien. Übung

Digitale Medien. Übung Digitale Medien Übung HTML Heute Hyper Text Markup Language Beschreibungssprache von WWW-Seiten: Enthält die Struktur eines Dokuments und teilweise die Darstellung. ich bin eine Überschrift