Präsentation herunterladen
Die Präsentation wird geladen. Bitte warten
1
Hypertext Markup Language
HTML
2
Das Grundgerüst einer HTML-Datei
Tags Sprich: Tägs > Quelltext
3
Aufgabe: Erstelle eine HTML-Datei „Persönliches“, die dich etwas näher beschreibt! (Beim Speichern auf die Endung *.html achten!) Im Browserfenster sollte dann etwas über dich zu lesen sein. 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
6
Aufgabe: Gestalte eine erste Seite mit persönlichen Informationen. Benenne sie index.html! Weitere Gestaltungstags sind: <body bgcolor=„Farbe“> Hintergrundfarbe < img src=„bild.jpeg“> Bild einfügen…hier ist es gut, wenn das Bild im selben Ordner ist <background=„bild.jpeg“> Hintergrundbild
7
<border=„3“> Rahmen um Grafiken (Wert 0 ergibt keinen Rahmen)
<hr size=„4“ width= 80%> horizontale Linie der „Dicke“ 4 und % des Browserfensters <br> Zeilenumbruch <p> Leerzeile Farbcode
8
Hintergrundmusik TAG: erscheint im Head !!!(hinter <title>)
<bgsound src=„background.mid“ loop=„infinite“> 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
Tabellen 1. Teil 1. Tabellen …dienen u.a. zur übersichtlichen Anordnung von Grafiken, Text etc. <table>…..</table> ist der Tag für eine unsichtbare Tabelle <table border=“Wert”>…..</table> für eine Tabelle mit Rahmen
10
2. Tabellenzellen Jede einzelne Zelle einer Tabelle muss extra definiert werden. <td>…..</td> (table data) …diese Zellen erscheinen nebeneinander <tr>….</tr> (table row) …Zeilen definieren
11
Beispiel in den body <table border=“2“> <tr> <td>Zelle 1</td> <td>Zelle 2</td> </tr> </table> Testen Sie den kurzen Tabellenquelltext in einer html-Datei mit dem Namen „table1.html“!
12
Tabellen 2. Teil 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 … <table align =„Wert“> Wert= left/center/right 1.4. TEXTABSTAND VOM ZELLENRAND … das Attribut cellpadding=„3“ legt den Abstand des Textes vom Zellenrand fest (Verwendung: <table cellpadding=„3“>)
15
1.6. RAHMEN-& HINTERGRUNDFARBE
1.5. ZELLENABSTAND … das Attribut cellspacing=„3“ legt den Abstand zwischen den Zellen fest (Verwendung: <table cellspacing=„3“>) 1.6. RAHMEN-& HINTERGRUNDFARBE … das Attribut bordercolor=„Farbe“ ist für die Rahmenfarbe und bgcolor=„Farbe“ für den Hintergrund verantwortlich (Verwendung: <table border=„3“ bordercolor=„red“ oder auch <td bgcolor=„blue“>)
16
2. Tabellenzellen Vorbemerkung: Alle Attribute zur Tabellenbreite, -höhe, -farbe und Ausrichtung gelten auch für die Zellen. Statt <table Attribut =„Wert“> heißt es dann <td Attribut=„Wert“>!!
17
Ausrichtung 2.1. Ausrichtung horizontal <align =„left/center/right“> 2.2. Ausrichtung vertikal <valign = „top/middle/bottom“> (oben/mittig/unten)
18
Aufgabe: 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
20
5. Listen 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
5.1. Listen mit Nummerierung
Tag: <ol>…</ol> jeder Listeneintrag wird dabei in <li>…</li> eingebunden (ordered list nummerierte Liste)
22
Beispiel: <html> <head> <title> Liste mit Nummerierung </title> </head> <body> <ol> <li> Listeneintrag 1</li> <li> Listeneintrag 2</li> <li> Listeneintrag 3</li> </ol> </body> </html> Verwendung:
23
Attribute type = Wert Werte: A… Nummerierung lautet A,B,C,…
I… Nummerierung lautet I,II,III,… i… Nummerierung lautet i,ii,iii,… Standard… Zahlenformat (ohne type) start = Zahl Bsp: <ol start =7>… Liste beginnt mit 7 statt mit 1 value = Zahl Bsp: <li value=50>… Liste geht hier mit Nr. 50 weiter
24
Aufgabe: Schreiben Sie einen Quelltext, der das Bild im Browser erzeugt!
25
5.2 Liste mit Aufzählungszeichen
Tag: <ul>…</ul> jeder Listeneintrag wird dabei in <li>…</li> eingebunden (unordered list unnummerierte Liste)
26
Beispiel: <html> <head> <title> Liste mit Aufzählung </title> </head> <body> <ul> <li> Punkt 1</li> <li> Punkt 2</li> <li> Punkt 3</li> </ul> </body> </html> Verwendung:
27
Attribute: type = Zeichenform Zeichenform: circle… Kreis als Zeichen square… Rechteck als Zeichen disc … ausgefüllter Kreis
28
Aufgabe: Schreiben Sie einen Quelltext, der das Bild im Browser erzeugt!
29
5.3 Definitionslisten Die Einträge von Definitionslisten bestehen aus den beiden Elementen Überschrift und Text. Der Text wird relativ zur Überschrift nach rechts gerückt. Tag: <dl> Listenanfang <dt>…</dt) Überschrift <dd>…</dd> Erläuterung </dl> Listenende
30
Übung: Geben Sie folgenden Quelltext ein und sehen Sie
sich das Ergebnis im Browser an! <html> <head> <title> Definitionsliste </title> </head> <body> <dl> <dt> Begriff 1</dt> <dd> Definition des Begriffs 1</dd> <dt>Unterbegriff 1</dt> <dd> Definition des Unterbegriffs 1</dd> </dl> <dt> Begriff 2</dt> <dd> Definition des Begriffs 2</dd> </dl> </body> </html>
31
Aufgabe: Schreiben Sie einen Quelltext, der das folgende Bild erzeugt:
32
6. Frames Frames sind frei skalierbare Bereiche, die feste Inhalte, aber auch Links enthalten können, die die Anzeige in anderen Abschnitten der Seite beeinflussen.
33
Beispiel für eine Seite mit Frames
34
6.1. Horizontale Aufteilung
Bemerkung: Die Dateien oben.html und unten.html müssen noch geschrieben werden und im selben Ordner wie die Framedatei liegen!!! <html> <head> <title>Horizontale Aufteilung</title> </head> <Frameset Rows="30%,70%"> Rows = Reihen <Frame src="oben.html"> <Frame src="unten.html"> </Frameset> <Body> Dein Browser unterstützt keine Frames! </body> </html> Die beiden Frames bilden ein Frameset, das den Body ersetzt.
35
…es sind auch Absolutangaben möglich, aber Achtung!!!(besser nicht)
Man kann auch mehr als 2 Reihen (ROWS) erzeugen mit einer sog. WILDCARD <Frameset Rows =10%,*,60%> …es sind auch Absolutangaben möglich, aber Achtung!!!(besser nicht)
36
6.2. Vertikale Aufteilung <html> <head>
Bemerkung: Die Dateien links.html und rechts.html müssen noch geschrieben werden und im selben Ordner wie die Framedatei liegen!!! <html> <head> <title>Vertikale Aufteilung</title> </head> <Frameset Cols="40%,60%"> Cols = Spalten <Frame src="links.html"> <Frame src="rechts.html"> </Frameset> <Body> Dein Browser unterstützt keine Frames! </body> </html>
38
Übung: 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
6.3. Verschachtelte Aufteilung
40
Lösung: <html> <head>
<title>Vertikale Aufteilung</title> </head> <Frameset Cols="35%,65%"> <Frame src="links.html"> <Frameset Rows="30%,70%"> <Frame src="oben.html"> <Frame src="unten.html"> </Frameset> <Body> Dein Browser unterstützt keine Frames! </body> </html> Lösung:
41
6.4. Verweise zu einem Frame
Vorarbeit: Zunächst überlegt man sich eine Grobeinteilung der Seite in Frames: z.B. Skizze Verweise Menü o.ä. Überschrift/ Titel der Seite Hauptenster Gästebuch Links
42
Wir teilen die Seite also in vier Bereiche ein
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
<html> <head> <title>Vertikale Aufteilung</title> </head> <Frameset Cols="15%,85%" border=0> <Frame src="verweise.html" NAME="links"> <Frameset Rows="10%,80%,10%"> <Frame src="oben.html" NAME="oben"> <Frame src="haupt.html" NAME="mitte"> <Frame src="unten.html" NAME="unten"> </Frameset> <Body> Dein Browser unterstützt keine Frames! </body> </html>
44
Organisieren der Dateien
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
Zielverweise: 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. <a href=„stundenplan.html“ TARGET=„mitte“> …
Ähnliche Präsentationen
