HTML - CSS

Transcrição

HTML - CSS

Übungen Informatik I
HTML - CSS
http://www.fbi-lkt.fh-karlsruhe.de/lab/info01/Tutorial
http://de.selfhtml.org
Helga Gabler, Stefanie Schwall, Christian Pape
Übungen Informatik 1
Folie 1
HTML
Inhalt
1.
2.
3.
4.
5.
6.
7.
8.
9.
Einführung
Grundgerüst
Links / Verweise
Attribute
Farben
Bilder
Formatierung / CSS
Tabellen
Frames
Folie 2
HTML - Hypertext Markup Language
Einführung
•
•
HTML ist eine plattformunabhängige Auszeichnungssprache
Weiterentwicklung:
- XHTML (Grundlage XML=Extensible Markup Language)
•
Allgemeines zu HTML:
- HTML- Dateien sind reine Textdateien
- HTML- Befehle stehen in so genannten Tags (=
Etiketten, Marken), meist mit Start- und Endtag.
- Der Text zwischen dem Start- und Endtag gibt den
Gültigkeitsbereich für das betreffende Tag an:
<B> Dies ist ein fetter Text </B>
•
WICHTIG: Ein HTML- Dokument sollte mit mehreren
Browsern getestet werden!
Folie 3
HTML
Einführung – HTML- Systemumgebung
•
Tools für die Textgestaltung:
–
•
ASCII- Editor: Textpad, Notepad, Wordpad, vi, Netscape Composer,
HTML- Editor von Ulli Meybohm (zu finden unter:
http://www.meybohm.de/ ), …
Tools für Grafik:
–
•
Grafikprogramme für Pixelbilder (.gif, .jpg, …): Micrografx
Designer,Picture Publisher, Microsoft PhotoDraw, Paintshop Pro
(Freeware), Adobe Photoshop (teuer), Corel Draw, …
Tools für Ton:
-
Programm zum Bearbeiten und Aufnehmen von Audiodaten:
Macromedia SoundEdit
Folie 4
HTML
Grundgerüst einer HTML- Datei
•
Und so sieht das Grundgerüst einer HTML- Datei also aus:
<HTML>
Start des HTML- Dokuments
<HEAD>
Start des Header
<TITLE>
Start des Titels
Titeltext
erscheint in der Fensterleiste des Browsers
</TITLE>
Ende des Titels
</HEAD>
Ende des Headers
<BODY>
Start des Body
Hier ist noch eine <b>Baustelle.</b> <br>

Ende des Body
</BODY>
</HTML>
Ende des HTML- Dokuments
Folie 5
HTML
Grundgerüst – Screenshots (1)
Wird im
Header
festgelegt
Pfad des Dokuments
Wird im
Body
beschrieben
So sieht ein HTML- Dokument im Microsoft Internet Explorer aus
Folie 6
HTML
Grundgerüst - Screenshots
will man sich den Quelltext
einer Website anschauen, dann
klickt man mit der rechten Maustaste auf das Dokument und geht
auf „Quelltext anzeigen“ (beim IE), …
… und so sieht der Quelltext des Dokuments
„test.html“ aus
Folie 7
HTML
Grundgerüst – Umlaute und Sonderzeichen
•
•
•
•
•
Umlaute und Sonderzeichen sollten als Codes eingegeben werden
Beispiel:
„In München steht ein Hofbräuhaus. Dort gibt es Bier
aus Maßkrügen.“
Umlaute werden so dargestellt:
Ä Æ Ä
ä Æ ä
ß Æ ß
Ö Æ Ö
ö Æ ö
Ü Æ Ü
ü Æ ü
HTML- Zeichen werden so dargestellt:
< Æ <
& Æ &
> Æ >
„ Æ "
Sonderzeichen werden so dargestellt:
Leerzeichen der Breite n Æ &ensp;
Bindestrich der Breite n Æ &endash;
Leerzeichen ohne Umbruchmöglichkeit dahinter Æ  
Folie 8
HTML
Inhalt
1.
2.
3.
4.
5.
6.
7.
8.
9.
Einführung
Grundgerüst
Links / Verweise
Attribute
Farben
Bilder
Formatierung / CSS
Tabellen
Frames
Folie 9
HTML
Links / Verweise
•
Links in HTML- Dokumenten werden folgendermaßen angegeben:
Links bestehen aus:
–
Einer Absprungstelle
–
Einer Stelle für die Landeposition
<A HREF = “Verweisziel“> Verweistext </A>
–
A= anchor
–
HREF= hyper reference = Hypertext- Referenz
•
Die Farbdarstellung der Links wird in HTML durch die Attribute LINK, VLINK
und ALINK im Body- Tag festgelegt:
–
LINK
Farbe für nicht aufgerufene Verweise
–
VLINK (= visited link)
Farbe für schon besuchten Verweis
–
ALINK (= activated link) Farbe für aktiven Verweis
Bsp.: <BODY LINK = “green“ VLINK =“red“ ALINK = “blue“>
Folie 10
HTML
Links / Verweise - Beispiele
•
•
Es folgen einige Beispiele:
- <A HREF =“http://www.google.de“> Google </A>
Æ Google ist ein Verweis auf ein Dokument auf einem anderen
Rechner
–
<A HREF = “verzeichnis/datei.html“> Datei </A>
Æ Datei ist ein Verweis auf ein Dokument im Verzeichnis
unterhalb des Verzeichnisses, indem man sich gerade befindet
<A HREF=“mailto:[email protected]“>
Dozentin</A>
mehr dazu auf:
http://selfhtml.teamone.de/html/verweise/email.htm
Folie 11
HTML
Links / Verweise – Lokale Verknüpfungen
•
•
Lokale Verknüpfungen sind Verknüpfungen innerhalb eines Dokuments
Æ also ein Link zu einer Stelle in der gleichen Datei
Und so wird ein lokaler Verweis angelegt:
–
Ziel für den Verweis auf einen Anker definieren:
<A HREF = “#Kapitel 1“> Ziel für Verweis </A>
–
Anker für den Verweis definieren:
<A NAME =“Kapitel 1“> Verweisziel </A>
Beispiel aus
unserem
Online- Tutorium:
Folie 12
HTML
Links / Verweise – Links zu anderen Seiten
•
Links zu Dokumenten auf anderen Computersystemen (über
eine URL) haben den folgenden Aufbau:
dienst://host:port/pfad/datei
•
Beispiele:
http://www.google.de/
Æ wenn die Dateiangabe fehlt wird mit / die Standarddatei,
z. B. index.html o.ä. aufgerufen
(/ kann auch weggelassen werden)
ftp://home-up.t-online.de
news://news.rz.uni-karlsruhe.de/comp.lang.javascript
mailto:[email protected]
telnet://papa0011:[email protected]
Folie 13
HTML
Inhalt
1.
2.
3.
4.
5.
6.
7.
8.
9.
Einführung
Grundgerüst
Links / Verweise
Attribute
Farben
Bilder
Formatierung
Tabellen
Frames
Folie 14
HTML
Attribute – Attribute in Tags
Einleitende Tags und Standalone-Tags können zusätzliche Angaben enthalten.
<h1 align="center">HTML - die Sprache des Web</h1>
•
Attribute in Tags
–
haben feste Namen
–
die Groß-/ Kleinschreibung ist irrelevant
–
können in Starttags stehen
–
ihre Werte sollten in “ “ stehen
•
Es gibt folgende Arten von Attributen in HTML-Elementen:
–
Attribute mit Wertzuweisung:
<H1 ALGIN=“center“> (center, left, right, justify)
<table border="1"> Rahmenstärke 1 Pixel
–
Attribute mit prozentualer Wertzuweisung <HR WIDTH=“10%“> Æ Trennlinie
10% der Breite des Anzeigefensters
–
Attribute mit freier Wertzuweisung:
<p title="Aussage mit Vorbehalt">hier kann eine ganzer Text zugewiesen
werden
–
Attribute mir variablen Namen:
<IMG SRC=“bild.gif“> Æ Grafikreferenz
–
Alleinstehende Attribute:
<HR NOSHADE> Æ Trennlinie ohne Schatten, gibt es nur in herkömmlichem
HTML, XHTML-gerecht wäre:
<hr noshade="noshade">
Folie 15
HTML
Attribute – Universalattribute
•
•
•
Universalattribute sind Attribute, die in (fast) allen Tags erlaubt sind
Aufgaben von Universalattributen:
–
Attribute um einer bestimmten HTML- Auszeichnung einen Namen zu
geben
–
Angabe zur Verwendung der Landessprache
–
Attribute zur Verbindung von HTML und Scriptsprachen (Æ EventHandler)
Beispiel:
<P LANG= “de“ TITLE= “ Deutschsprachiger Absatz“> Text </P>
lang: definiert die Landessprache
title: definiert einen Text, der in einem kleinen Fenster angezeigt wird,
wenn mit der Maus über das Element gefahren wird
Folie 16
HTML
Inhalt
1.
2.
3.
4.
5.
6.
7.
8.
9.
Einführung
Grundgerüst
Links / Verweise
Attribute
Farben
Bilder
Formatierung / CSS
Tabellen
Frames
Folie 17
HTML
Farben – Angabe mit RGB- Werten
•
In HTML können Farben über ihre RGB (= RotGrünBlau)- Werte
angegeben werden
Eine Farbe wird durch die Anteile der drei Grundfarben rot, grün
und blau nach dem Schema
#xxxxxx (1. Stelle: #; 2-7. Stelle: Farbdefinition)
definiert Î browserunabhängig
Dabei wird jede Grundfarbe durch eine Zahl zwischen 0 und 255
definiert, die hexadezimal dargestellt wird:
•
•
–
–
–
Wert 0 : keinen Farbanteil
Wert 255 (FF): maximalen Farbanteil der Grundfarbe
Beispiel: dunkles Blau: #00 00 FF
#00
Rotanteil
–
00
Grünanteil
FF
Blauanteil
Mehr Informationen und eine Farbtabelle sind im Online- Tutorium unter
dem Thema HTML/Farben zu finden
Folie 18
HTML
Farben – Angabe über Farbnamen
•
In HTML können Farben auch über einen Farbnamen angegeben
werden
•
Diese Angabe ist browserunabhängig
•
Die Angabe ist sehr einfach, aber offiziell sind nur 16 Farben
standardisiert (vs. 16,7 Mio. Farben bei Angabe mit RGB- Werten),
weitere Farbnamen sind dann browserabhängig
•
Definiert werden die Farben nach folgendem Schema:
„englischer Farbname“
–
Beispiel: “white“
Folie 19
HTML
Farben – Dateiweite Farben
•
•
•
•
Dateiweite Farben, das sind Farben, die für das ganze Dokument gültig
sind, werden im <BODY>- Tag angegeben
BEACHTE: Farbkontraste Hintergrund – Text
Die Hintergrundfarbe für das ganze Dokument wird folgendermaßen
angegeben:
<BODY BGCOLOR =“#000000“> oder
<BODY BGCOLOR =“black“>
Farbe für Texte und Verweise für das ganze Dokument:
<BODY
BGCOLOR= “#663333“
Æ Hintergrundfarbe
TEXT= “#FFCC99“
Æ Textfarbe
LINK =“#FF9966“
Æ Farbe für nicht
aufgerufene Verweise
VLINK = “#FF6699“
Æ Farbe für besuchte
Verweise
ALINK = “#FFFFFF“>
Æ Farbe für aktivierte
Verweise
Folie 20
HTML
Inhalt
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
Einführung
Grundgerüst
Links / Verweise
Attribute
Farben
Bilder
Formatierung / CSS
Tabellen
Frames
Formulare
Metainformationen
Folie 21
HTML
Bilder – Bilder einfügen
•
Ein Bild wird in ein HTML- Dokument wie folgt eingefügt:
–
–
–
<IMG SRC=“bild.gif“ ALT=“Bild“>
Das <IMG>- Tag steht alleine, es hat kein Endtag
Das Attribut SRC gibt den Pfad und den Dateinamen an
Das Attribut ALT (Alternative, Tooltipp) ist eine Information, für den Fall,
dass ein Bild nicht geladen werden kann
<IMG SRC=“../bild.gif“ ALT=“Bild“ WIDTH=“200“ HEIGHT=“150“>
–
Wenn eine Bilddatei nicht im gleichen Verzeichnis, wie das HTML- Dokument
liegt, dann muß der Pfad dorthin, wo das Bild liegt, angegeben werden:
–
WIDTH: Bildweite (Bildbreite)
HEIGHT: Bildhöhe
Die Seitenformatierung funktioniert schneller, wenn man mit Attributen die
Größe des Bildes angibt. Die Angabe der Größe erfolgt in Pixel.
Macht man die Angaben falsch, so kommt es zu Verzerrungen.
<IMG SRC=“http://www.server2.de/bild.gif“ ALT=“baustelle“>
–
Bilder können auch von fremden Servern geladen werden (ACHTUNG:
Urheberrechte!)
Folie 22
HTML
Bilder – als Hintergrund / Hyperlink
•
Will man ein Bild als Hintergrund für das gesamte Dokument, so
muß das im <BODY>- Tag festgelegt werden:
<BODY BACKGROUND= “bild.gif“>
Æ Das Bild wird solange waagrecht und senkrecht wiederholt, bis
das Browserfenster gefüllt ist (es entstehen Hintergrundkacheln)
•
Will man ein Bild als Hyperlink (grafischer Link) darstellen, so muß
das zwischen den <A>- Tags festgelegt werden:
<A HREF =“mailto:[email protected]“>
<IMG SRC=“mail.gif“ ALT=“Mail an Tutorin“
BORDER=“0“>
</A>
–
Das Attribut BORDER gibt an, ob das Bild mit einem Rand dargestellt
wird , oder nicht
Folie 23
HTML
Inhalt
1.
2.
3.
4.
5.
6.
7.
8.
9.
Einführung
Grundgerüst
Links / Verweise
Attribute
Farben
Bilder
Formatierung / CSS
Tabellen
Frames
Folie 24
HTML
Formatierung
•
<H1> Überschift1 </H1> mögliche Gliederung H1 … H6:
<H1 ALIGN=“center“> Überschrift1 </H1>
Attribut ALIGN: horizontale die Ausrichtung (LEFT, CENTER, RIGHT)
•
•
•
•
•
<BR>
Zeilenumbruch
<HR>
Trennlinien
<UL>
Nicht-Nummerierte Liste
<LI>1. Bullettpunkt </LI>
</UL>
<OL>
Nummerierte List
</OL>
Schriftformatierung, …
Folie 25
HTML
Formatierung mit CSS
•
CSS (= Cascading Style Sheets) ist eine Beschreibungssprache
(MARKUP) für Formatierungen einzelner HTML-Elemente
•
CSS unterstützen die professionelle Gestaltung beim Web-Design,
und helfen beim Corporate Design für große Projekte oder für
unternehmensspezifische Layouts.
Î Idee: Formatierungen werden vom Dokumentinhalt getrennt
•
•
Mit CSS kann man
–
Einzelne Textbereiche oder HTML- Tags formatieren
–
Vorlagen für eine einzelne Datei definieren
–
Externe CSS- Dateien erzeugen
Die Notation für CSS- Formate sieht so aus:
formatbezeichner:formatwert
Folie 26
HTML
CSS
•
Es gibt drei Möglichkeiten, CSS in das HTML- Dokument
einzubinden:
–
Als direkte Erweiterung zu HTML- Formatierungen: Einzelne Tags
können um Formate erweitert oder ganze Bereiche einer Datei speziell
formatiert werden
–
Als dateiinterne Formatvorlagen: Formatvorlage für eine HTMLDatei werden im Kopfbereich definiert (Æ geeignet dafür, wenn mehrere
Dokumente unterschiedlich formatiert werden sollen)
–
Als externe Formatvorlagen: Separate Dateien mit CSSAnweisungen, die mit jeder Web-Seite verknüpft werden (Æ geeignet
dafür, wenn mehrere Dokumente mit dem gleichen Stil formatiert
werden sollen)
–
Sonderformate benutzen: Ermöglicht es, Formatunterklassen zu
bilden, geschachtelte Formate zu definieren, Pseudoformate festzulegen
oder von Marken unabhängige Formate zu beschreiben
Folie 27
HTML
CSS – Direkte Erweiterung
Zu vielen Tags kann man das Attribut STYLE hinzufügen
Diesem Attribut wird eine Zeichenkette zugewiesen, die eine CSSFormatierung beschreibt
Beispiele:
<H1 STYLE=„color:red“>
rote Überschrift
</H1>
<P STYLE=„text-decoration:uppercase“>
großgeschriebener Text
</P>
Folie 28
HTML
CSS – Dateiinterne Formatvorlagen
•
•
•
•
Werden im Kopfbereich mit dem <STYLE>- Tag definiert
Es enthält das Attribut TYPE, das festlegt, dass es sich um CSSFormate handelt
Der Bereich zwischen den <STYLE>- Tags wird als HTMLKommentar dargestellt (für Browser, die kein CSS unterstützen)
Notation der Formatbeschreibungen:
bereich { formatbezeichner:formatwert; … }
h1 {color:red; font-family:arial}
Selector: was vor { } steht (wofür die Formatdef. gelten soll)
Definition: was in { } steht (die eigentliche Formatdef.)
<style type="text/css">
<!–/* ... Hier werden die Formate definiert ... */
-->
</style>
Folie 29
HTML
CSS – Dateiinterne Formatvorlagen
<html> <head> <title>Titel der Datei</title>
<!-body {font-family:verdana; font-size=18 }
h1 { color:red; font-size:36pt; }
-->
</style>
</head>
<body>
<h1>36 Punkt und Rot!</h1>
</body>
</html>
Eigenschaften und ihre möglichen Werte Î selfhtml -> CSS-Eigenschaften.
Bitte Leerzeichen beachten: color: red; font-size: 36pt; kann zu Fehlern führen.
Folie 30
HTML
CSS – Externe Formatvorlagen
•
•
•
•
Dabei handelt es sich um eine separate Datei, die CSS- Anweisungen
enthält
Sie muß mit jedem HTML- Dokument, auf welches die festgelegten
Formatierungen anzuwenden sind, verknüpft werden
Die Datei sollte die Endung .css haben und enthält
Formatbeschreibungen, wie bei den dateiinternen Formatvorlagen
auch:
body {font-family:verdana; font-size=18}
h1 {color:red; font-family:arial}
Im HTML- Dokument muß sie dann im Kopfbereich eingebunden
werden:
<LINK REL=“stylesheet“ TYPE=“text/css“ HREF=“beispiel.css“>
oder:
<STYLE TYPE=“text/css“> @import url(beispiel.css);
</STYLE>
Folie 31
HTML
CSS – Externe Formatvorlagen
Formate zentral in separater CSS-Datei definieren
Beispiel:
<html>
<head>
<title>Titel der Datei</title>
<link rel="stylesheet" type="text/css" href="formate.css">
<!-... hier sind datei-spezifische Formate erlaubt ...
-->
</style>
</head>
<body>
</body>
</html>
Formate, die direkt innerhalb von <style...>...</style> definiert werden,
haben im Konfliktfall Vorrang vor den referenzierten Formaten.
Folie 32
HTML
CSS – Erweiterungen
<html>
<head>
<title>Titel der Datei</title>
<link rel="stylesheet" type="text/css" href="formate.css">
<!-... hier sind datei-spezifische Formate erlaubt ...
-->
</style>
</head>
<body>
<h1 style="[element-spezifische Formate]">...</h1>
</body>
</html>
„Innere“ Formate (im <h1>-Tag) haben Vorrang vor derDefinition
im <style>-Bereich.
Formate im <style>-Bereich haben Vorrang vor den Definitionen in der
CSS-Datei.
Folie 33
HTML
CSS - Formate für verschachtelte HTML-Elemente definieren
<html> <head> <title>Titel der Datei</title>
<!-h1 { color:red; }
h1 i { color:blue; font-style:normal; }
-->
</style>
</head>
<body>
<h1>Wir lernen <i>Stylesheets</i> </h1>
<p>Wir lernen <i>Stylesheets</i> </p>
</body>
</html>
Beispiel:
Verschachtelte Formatierung <i> ….</i> :
Î gilt für <h1> aber nicht für <p>
Folie 34
HTML
CSS – Sonderformate benutzen
•
Das ist eine fortgeschrittene Technik, um CSS- Formate zu
verwenden
•
Es können u. A.:
•
–
Formatunterklassen gebildet werden
h2 {color:red}
h2.einfach {color:black}
Æ <H2 CLASS=“einfach“> Text </H2>
–
Pseudoformate festgelegt werden
p:first-letter {font-weight=bold}
Nähere Informationen gibt es hier:
http://www.selfhtml.teamone.de/css/formate/zentrale.htm
Folie 35
HTML
CSS – Sonderformate benutzen
Formatdefinition für eine Klasse: h1.hinterlegt { background-color:#FFFF00 }
im Selektor einen Punkt notieren, dahinter: Namen für die Klasse angeben.
<html><head> <title>Titel der Datei</title>
<!-h1 { font-family:Arial,sans-serif; font-size:24pt; font-weight:normal; }
h1.hinterlegt { background-color:#FFFF00 }
.extra { background-color:#FF99FF }
-->
</style>
</head>
<body>
<h1>H1 ganz normal nur etwas formatiert</h1>
<h1 class="hinterlegt">H1 knallgelb hinterlegt</h1>
<h2><b class="extra">h2 ganz anders</b></h2>
</body>
</html>
Folie 36
HTML
CSS – Attribute
•
Es folgt eine Auflistung einiger Attribute, die innerhalb der
<STYLE>- Tags verwendet werden können:
•
Zeichenattribute:
–
–
–
–
–
font-family: Schriftart
font-size: Schriftgröße
font-variant: Schriftvariante (kursiv, etc.)
font-weight: Schriftdicke (bold, …)
Font-style: Schriftstil (italic,…)
…
•
–
–
–
–
–
–
–
Textattribute:
letter-spacing: Zeichenabstand
text-align: Textausrichtung
text-decoration: Textdekoration („blink“ für blinkend, „underline“)
line-height: Linienhöhe
text-ident: Textidentifikation
text-transform: Texttransformation („uppercase“ für Großbuchstaben)
vertical-align: Vertikale Ausrichtung
Folie 37
HTML
CSS
- Attribute
Beispiel:
<p style = "background-color:#808040;
//Hintergrundfarbe
color:#D8FD02;
//Schriftfarbe
font-family:'Century Schoolbook',serif;
Schriftart
font-size:24pt;
//Schriftgröße
letter-spacing:3px;
//Zeichenabstand
padding:40px;
//Innenabstand zum Rand
border:double #D8FD02 4px;" //Rahmen
title="Zitat von Francis Picabia"> Unser Kopf ist rund, damit das
Denken die Richtung wechseln kann!
</p>
Folie 38
HTML
Inhalt
1.
2.
3.
4.
5.
6.
7.
8.
9.
Einführung
Grundgerüst
Links / Verweise
Attribute
Farben
Bilder
Formatierung /CSS
Tabellen
Frames
Folie 39
HTML
Tabellen – Aufbau
•
•
•
•
Mit dem <TABLE>- Tag wird in HTML eine Tabelle eingeleitet
Mit dem <TR>- Tag wird innerhalb der Tabelle eine Zeile definiert
Mit dem <TD>- Tag wird innerhalb der Tabelle eine Spalte
definiert
Beispiel:
<TABLE>
<TR>
<TH> Kopfzelle 1 </TH>
<TH> Kopfzelle 2 </TH>
</TR>
<TR>
<TD> Datenzelle 1 </TD>
<TD> Datenzelle 2 </TD>
</TR>
</TABLE>
Folie 40
HTML
Tabellen – Attribute
Attribute zum <TABLE> - Tag:
•
•
•
•
•
•
•
<TABLE BORDER=“1“> … </TABLE> : gibt die Breite des
Außenrahmens der Tabelle an (hier: Rahmen der Breite 1 Pixel)
CELLPADDING = Zelleninnenabstand
CELLSPACING = Zellenabstand untereinander
WIDTH = Breite / HEIGHT = Höhe
ALIGN: horizontale Ausrichtung / VALIGN: vertikale Ausrichtung
<TABLE BGCOLOR=“#[Farbe]“> … </TABLE>
weitere Attribute
<TH width =>, oder <TD width =>
Æ ersetzbar durch <th style="width:100px">
<TH HEIGHT=> …, <TD height = …
Æ ersetzbar durch <td style="height:100px">.
Folie 41
HTML
Tabellen – Erweiterung
•
Es gibt noch einige weitere Tags zur Darstellung von Tabellen:
–
<CAPTION> … </CAPTION>: Für die Tabellenbeschriftung
außerhalb er Gitternetzlinien
–
<COLGROUP> … </COLGROUP>: Für Spaltengruppen
• Attribute: WIDTH: Breite in Pixel oder prozentueller
Angabe
SPAN: Anzahl der Spalten
–
<COL>: Für Spaltenuntergruppen
• Attribute: SPAN: Anzahl der Unterspalten
•
… und noch einige Attribute:
–
FRAME: Für die Art des Außenrahmens
–
RULE: Für die Art der Innenlinien
Folie 42
HTML
Tabellen – Tabellen teilen
•
•
Ab der HTML- Version 4.0 ist eine logische Einteilung einer
Tabelle in
Kopf
<THEAD> … </THEAD>
Fuß
<TFOOT> … </TFOOT>
Körper
<TBODY> … </TBODY>
möglich und ist dient der besseren Lesbarkeit von Tabellen
in HTML- Quellcode
Beispiel:
<TABLE>
<THEAD> … </THEAD>
<TFOOT> … </TFOOT>
<TBODY>  </TBODY>
</TABLE>
Beispiel in Selfhtml
Folie 43
HTML
Inhalt
1.
2.
3.
4.
5.
6.
7.
8.
9.
Einführung
Grundgerüst
Links / Verweise
Attribute
Farben
Bilder
Formatierung / CSS
Tabellen
Frames
Folie 44
HTML
Frames
•
•
•
Um mehrere Seiten gleichzeitig darzustellen, muß das
Browserfenster in separate Bereiche eingeteilt werden, dazu dient
ein Frameset
Ein Frame ist dann ein einzelner Bereich in einem Frameset
Ein Frameset wird in einem extra Dokument angelegt, das einen
anderen Aufbau hat als normale Seiten:
<HTML>
<HEAD> …
</HEAD>
<FRAMESET>
<FRAME>
<NOFRAMES>
<BODY> … </BODY>
</NOFRAMES>
</FRAMESET>
</HTML>
Folie 45
HTML
Frames - Fenstereinteilung
•
Mit dem <FRAMESET>- Tag wird die eigentliche
Fenstereinteilung festgelegt und der <BODY>- Tag ersetzt
Die beiden wichtigsten Attribute für das <FRAMESET>- Tag sind:
•
–
–
•
COLS: bestimmt, dass das Fenster in Spalten aufgeteilt werden soll
ROWS: bestimmt, dass das Fenster in Zeilen aufgeteilt werden soll
Mit diesen Attributen wird also festgelegt, wie das Fenster
aufgeteilt werden soll (ob horizontal oder vertikal oder beides)
Für jede Spalte / Zeile wird von links nach rechts (je durch Komma
getrennt) die gewünschte Breite angegeben:
•
–
–
–
–
Als absoluter Wert in Pixel: 100,*,150
Æ3 Frames: 100 Pixel, Rest, 150 Pixel
Als Prozentsatz der Fensterbreite: 30%, 30%, *
Æ 3 Frames: 30%, 30%, 60% (Rest)
In Portionen: 3*, 5*, *
Æ 3 Frames: 3/9, 5/9, 1/9 (3+5+1=9)
* bedeutet: Rest oder 1 Portion
Folie 46
HTML
Frames – Attribute
•
Im <FRAME>- Tag gibt es folgende Attribute:
–
FRAMEBORDER: stellt die Breite der Trennlinien ein (bei 0 ist
die Trennlinie unsichtbar)
–
MARGINWIDTH/- HEIGHT: Abstand zu den Rahmenlinien
(beide 0 Æ linke obere Ecke)
–
SCROLLING: gibt an, ob eventuelle Bildlaufleisten unterdrückt
werden (= “no“) oder nicht (= “ yes“)
–
NORSIZE: schaltet die Möglichkeit ab, die angrenzenden
Rahmenlinien zu verschieben
Folie 47
HTML
Frames – Hyperlinks zu Frames lenken
•
Wie schon beschrieben, werden darzustellende Dokumente immer
in dem nächst möglichen Frame angezeigt
Man kann aber auch beeinflussen, in welchem Frame welches
Dokument angezeigt werden soll, das geschieht in zwei Schritten:
•
–
–
•
Den einzelnen Frames einen eindeutigen Namen geben (darf nur aus
Buchstaben, Ziffern und dem Unterstrich bestehen)
Zu den Links ein Ziel angeben (im <A>- Tag das Attribut TARGET
angeben)
Ein Beispiel kann man im Online- Tutorium unter dem Thema
HTML/ Frames/ Hyperlinks zu Frames lenken finden
Es gibt bereits vordefinierte Ziele:
•
–
–
–
–
_blank: neues, unbenanntes Browserfenster
_self: der Bereich, aus dem der Link erfolgt
_top: aktuelles, vollständiges Browserfenster
_parent: bei verschachtelten Framesets der Frameset - Bereich, der
den aktuellen Frame enthält
Folie 48

HTML - CSS

Transcrição

Documentos relacionados

Qualitätsmanagement im Lebensmittelsektor

Den Computer „impfen“

Brief Einladung Vereine

Aufnahmeantrag

Dr. Helga Jud-Krepper gestorben

Presseinformation Die 4 Kräfte der Selbstheilung

Modernes Webdesign

folgeseitenvorlage für pdf _2_

Bilder als Erzählungen, Erzählungen als Bilder

Blatt 5 – Digitale Medien - Medieninformatik