Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

HTML H t M L H yper t ext M arkup L anguage. DAS GRUNDGERÜST EINER HTML-DATEI Tags Sprich: Tägs > Quelltext.

Ähnliche Präsentationen


Präsentation zum Thema: "HTML H t M L H yper t ext M arkup L anguage. DAS GRUNDGERÜST EINER HTML-DATEI Tags Sprich: Tägs > Quelltext."—  Präsentation transkript:

1 HTML H t M L H yper t ext M arkup L anguage

2 DAS GRUNDGERÜST EINER HTML-DATEI Tags Sprich: Tägs > Quelltext

3 AUFGABE: 1. Erstelle eine HTML-Datei „Persönliches“, die dich etwas näher beschreibt! (Beim Speichern auf die Endung *.html achten!) 2. Im Browserfenster sollte dann etwas über dich zu lesen sein. 3. Sonderzeichen müssen u.U. durch sogenannten Entitys (Zeichenfolgen) ersetzt werden:z.B.ä = ä ü = ü ö = ö ß = ßDie großen Umlaute so: Ä = Ä„ = &Quot; & = & = > Leerzeichen =   oder  

4 TAGS ZUR TEXTFORMATIERUNG

5

6 Gestalte eine erste Seite mit persönlichen Informationen. Benenne sie index.html! Weitere Gestaltungstags sind: Hintergrundfarbe Bild einfügen…hier ist es gut, wenn das Bild im selben Ordner ist Hintergrundbild

7 Rahmen um Grafiken (Wert 0 ergibt keinen Rahmen) horizontale Linie der „Dicke“ 4 und 80% des Browserfensters Zeilenumbruch Leerzeile Farbcode

8 TAG: erscheint im Head !!!(hinter ) Hinweise: - die Dateien sollten die Endungen *.*mid, *.*wav oder *.*au haben und, wenn so wie im Bsp. verwendet, im selben Ordner wie alle anderen Dateien sein - das Attribut loop steht für Wiederholungen, der Wert infinite dabei für Endloswiederholungen, sonst einfach Anzahl der Wiederholungen eintragen

9 1. Tabellen …dienen u.a. zur übersichtlichen Anordnung von Grafiken, Text etc. ….. ist der Tag für eine unsichtbare Tabelle ….. für eine Tabelle mit Rahmen

10 2. Tabellenzellen Jede einzelne Zelle einer Tabelle muss extra definiert werden. ….. (table data) …diese Zellen erscheinen nebeneinander …. (table row) …Zeilen definieren

11 in den body Zelle 1 Zelle 2 Testen Sie den kurzen Tabellenquelltext in einer html-Datei mit dem Namen „table1.html“!

12 Tabellenattribute 1.1. TABELLENBREITE …das Attribut width legt die Breite der Tabelle relativ(in%) der absolut(in Pixeln) fest HINWEIS:  die relative Angabe bezieht sich immer auf das aktuelle Browserfenster  ohne das Attribut wird die Größe dem Inhalt angepasst

13 1.2. TABELLENHÖHE …das Attribut height legt die Höhe der Tabelle relativ(in%) der absolut(in Pixeln) fest HINWEIS:  die relative Angabe bezieht sich immer auf das aktuelle Browserfenster  ohne das Attribut wird die Größe dem Inhalt angepasst

14 1.3. AUSRICHTUNG … Wert= left/center/right 1.4. TEXTABSTAND VOM ZELLENRAND …das Attribut cellpadding=„3“ legt den Abstand des Textes vom Zellenrand fest (Verwendung: )

15 1.5. ZELLENABSTAND …das Attribut cellspacing=„3“ legt den Abstand zwischen den Zellen fest (Verwendung: ) 1.6. RAHMEN-& HINTERGRUNDFARBE …das Attribut bordercolor=„Farbe“ ist für die Rahmenfarbe und bgcolor=„Farbe“ für den Hintergrund verantwortlich (Verwendung:


16 Vorbemerkung: Alle Attribute zur Tabellenbreite, -höhe, -farbe und Ausrichtung gelten auch für die Zellen. Statt heißt es dann !!

17 2.1.Ausrichtung horizontal 2.2.Ausrichtung vertikal (oben/mittig/unten)

18 Erstellen Sie die html-Datei „table1.html“, die zu folgender Tabelle führt! Hinweise: *Hintergrund „Rotton“, Rahmen blau *Rahmenstärke 5 *erste Zeile Text fett, kursiv und oberen Rand *zweite Zeile alles in der vertikalen Mitte *dritte Zeile alles am unteren Rand der Zelle

19

20 Aufgabe von Listen: Mit Listen können Textinhalte hierarchisch gegliedert werden. Dabei gibt es Tags für nummerierte Listen, Listen mit Aufzählungszeichen und Definitionslisten.

21 Tag: …  jeder Listeneintrag wird dabei in … eingebunden (ordered list  nummerierte Liste)

22 Liste mit Nummerierung Listeneintrag 1 Listeneintrag 2 Listeneintrag 3 Verwendung:

23 type = Wert Werte:A…Nummerierung lautet A,B,C,… a…Nummerierung lautet a,b,c,… I…Nummerierung lautet I,II,III,… i…Nummerierung lautet i,ii,iii,… Standard…Zahlenformat (ohne type) start = ZahlBsp: …Liste beginnt mit 7 statt mit 1 value = Zahl Bsp: …Liste geht hier mit Nr. 50 weiter

24 Schreiben Sie einen Quelltext, der das Bild im Browser erzeugt!

25 Tag: …  jeder Listeneintrag wird dabei in … eingebunden (unordered list  unnummerierte Liste)

26 Liste mit Aufzählung Punkt 1 Punkt 2 Punkt 3 Verwendung:

27 type = Zeichenform Zeichenform:circle… Kreis als Zeichen square… Rechteck als Zeichen disc … ausgefüllter Kreis

28 Schreiben Sie einen Quelltext, der das Bild im Browser erzeugt!

29 Die Einträge von Definitionslisten bestehen aus den beiden Elementen Überschrift und Text. Der Text wird relativ zur Überschrift nach rechts gerückt. Tag: Listenanfang …

30 Geben Sie folgenden Quelltext ein und sehen Sie sich das Ergebnis im Browser an! Definitionsliste Begriff 1 Definition des Begriffs 1 Unterbegriff 1 Definition des Unterbegriffs 1 Begriff 2 Definition des Begriffs 2

31 Schreiben Sie einen Quelltext, der das folgende Bild erzeugt:

32 Frames sind frei skalierbare Bereiche, die feste Inhalte, aber auch Links enthalten können, die die Anzeige in anderen Abschnitten der Seite beeinflussen.

33

34 Horizontale Aufteilung Rows Rows = Reihen Dein Browser unterstützt keine Frames! Die beiden Frames bilden ein Frameset, das den Body ersetzt. Bemerkung: Die Dateien oben.html und unten.html müssen noch geschrieben werden und im selben Ordner wie die Framedatei liegen!!!

35 Man kann auch mehr als 2 Reihen (ROWS) erzeugen mit einer sog. WILDCARD …es sind auch Absolutangaben möglich, aber Achtung!!!(besser nicht)

36 Vertikale Aufteilung Cols Cols = Spalten Dein Browser unterstützt keine Frames! Bemerkung: Die Dateien links.html und rechts.html müssen noch geschrieben werden und im selben Ordner wie die Framedatei liegen!!!

37

38 1. Erzeuge ein Frameset, der das Browserfenster in 3 horizontale Bereiche unterteilt. Der zweite soll 55%, der dritte 15% des Anzeigebereiches verwenden. Erstelle jeweils für die Bereiche entsprechende Beispieltexte und wähle geeignete Namen für die html-Dateien. 2. Schreibe dann die Datei für eine vertikale Aufteilung in 25% (erster Frame), 25%(zweiter Frame) und Rest des Fensters(dritter Frame).

39

40 Vertikale Aufteilung Dein Browser unterstützt keine Frames!

41  Vorarbeit: Zunächst überlegt man sich eine Grobeinteilung der Seite in Frames: z.B. Skizze Hauptenster Verweise Menü o.ä. Verweise Menü o.ä. Überschrift/ Titel der Seite GästebuchLinks

42  Wir teilen die Seite also in vier Bereiche ein. Dabei nutzen wir die Theorie der vertikalen Aufteilung in zwei Frames, wobei der rechte Teil in drei horizontale Bereiche geschachtelt wird. Ein Quelltext könnte so aussehen:

43   Vertikale Aufteilung   Dein Browser unterstützt keine Frames! 

44  Alle Dateien, auf die ein Verweis im o.g. Frameset existiert, sollten im selben Ordner liegen und müssen noch alle geschrieben oder überarbeitet werden. Es sollten links die Links stehen, in der Mitte eure Vorstellung, oben sollte der Willkommenstext stehen und unten habt ihr freie Wahl für die Gestaltung. Überarbeitet die bisher geschriebenen Dateien so, dass statt der Tabelle die Frames auf der Startseite sind!

45  Bei der Arbeit mit Frames ist es notwendig, anzugeben, wo die Inhalte der Seiten, die verlinkt wurden, angezeigt werden sollen. Bei uns ist es die Mitte, d.h. das größte aller Framefenster, deshalb muss hinter jedem Link das Zielfenster wie folgt stehen: z.B. …

46

47

48

49

50

51

52

53

54


Herunterladen ppt "HTML H t M L H yper t ext M arkup L anguage. DAS GRUNDGERÜST EINER HTML-DATEI Tags Sprich: Tägs > Quelltext."

Ähnliche Präsentationen


Google-Anzeigen