GRUNDKURS INFORMATIK Vergangene Vorlesung
Werbung
23.11.2010
Vergangene Vorlesung
HTML-Grundlagen
Wichtige HTML-Elemente
Heute:
H
t Stylesheets
St l h t
Anwendung
Beispiele
GRUNDKURS INFORMATIK
7- STYLESHEETS, CSS
Marcel Götze
Zeichenkodierung
Vorlesung 2: ASCII, Unicode
HTML-Editor: Zeichen → Byte
HTML-Browser: Byte → Zeichen
Problem: Codierung kann unterschiedlich sein
außer/vor Unicode,
Unicode regionenspezifische Standards
ISO-8859 alle europäischen Sprachen
ISO-8859-1 (westeuropäisch, amerikanisch)
ISO-8859-2 (mitteleuropäisch, slawisch)
Sonderzeichen
dem Browser muss mitgeteilt werden, welche Kodierung verwendet wird
fehlt die Angabe, wird ein Standard verwendet
alternativ: &[Name];
Beispiele einer Notation in HTML: α α
ISO-8859-3 (Esperanto, Galizisch, Maltesisch und Türkisch)
Seit HTML 4.0, jedes Zeichen aus Zeichenvorrat nach
ISO 10646 (Unicode) benutzbar.
Erzeugung durch spezielle numerische Notation nach
Schema:
&#[x][Nummer];
ä
Ä
ö
Ö
ü
Ü
ä
Ä
ö
Ö
ü
Ü
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
HTML-Elemente
€
£
ß
Ω
<
>
&euro;
&pound;
&szlig;
&Omega;
&lt;
&gt;
Stylesheets
DIV & SPAN
6
DIV: allgemeines Block-Element: <div></div>
SPAN: allgemeines Inline-Element:
<span></span>
Beide ohne vordefinierte Layout- und StyleEigenschaften
Trennung von Inhalt und Layout
HTML erlaubt die Beschreibung des Dokumentinhaltes
Stylesheets erlauben die Beschreibung der Formateigenschaften
einzelner HTML Elemente
Definition neuer Formatklassen, die HTML Elementen zugewiesen
werden
drei Möglichkeiten:
separat für jedes HTML-Element
Style-Angaben werden als Attribut des jeweiligen HTML-Elements angegeben
Style-Angaben werden für eine bestimmte ID angegeben
durch <style></style> Block innerhalb des HTML-Dokuments
innerhalb einer Stylesheet Datei
1
23.11.2010
Style Angabe für jedes HTML-Element
Style Angabe für jedes HTML-Element
einfachster Fall
7
einfachster Fall
8
<html>
<head>
<title>Titel des Dokuments</title>
</h d>
</head>
<body>
<h1>Überschrift</h1>
</body>
</html>
<html>
<head>
<title>Titel der Datei</title>
</head>
<body>
body
<h1 style="color:red; font-size:48px;">
48 Pixel und Rot!
</h1>
</body>
</html>
Stylesheets
Angabe für jedes Element einzeln zugeordnet
Stylesheets - Syntax
9
Besser: Formatangaben zentral in Style-Element
<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
/*Formatangaben für HTML
HTML-Elemente*/
Elemente*/
</style>
</head>
<body>
<h1>Überschrift</h1>
</body>
</html>
Syntax eines Eintrags im Stylesheet:
Selektor {
Eigenschaft:Wert;
}
Selektor: HTML-Element (Tag-Name), bspw.: H1
Eigenschaft: bspw. color, width, height, …
Wert: wird der Eigenschaft zugeordnet, bspw.: red,
200px,
Selektor kann auch Wildcard * sein
Stylesheets im Style-Element
Stylesheets
<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
h1 { color:red; font-size:48px;
font size:48px; }
</style>
</head>
<body>
<h1>48 Pixel und Rot!</h1>
</body>
</html>
Individualformate
11
Für jedes HTML-Element kann eine eindeutige ID
vergeben werden
Darf
nur einmal im gesamten HTML-Dokument
vorkommen
<html>
<head>
…
</head>
<body>
<h1 id="Titel1">48 Pixel und Rot!</h1>
</body>
</html>
2
23.11.2010
Stylesheets
Stylesheets
Individualformate
Individualformate
IDs können für die Zuweisung von Formatangaben
verwendet werden
Verwendung des class-Attributs
<html>
<head>
…
</head>
<body>
<h1 class="title">Ein bisschen Text</h1>
</body>
</html>
<html>
<head>
<title>Titel
i l
i l d
der Datei</title>
i / i l
<style type="text/css">
#title1ID { color:red; font-size:48px; }
</style>
</head>
<body>
<h1 id="title1ID">48 Pixel und Rot!</h1>
</body>
</html>
Stylesheets
Formatangaben für Klassen
16
seite.html
<html>
Problem bisher: Formatangaben waren für alle
<head>
Elemente eines
Typs
<title>Titel
der Datei</title>
<style type="text/css">
.title
Definition
auch für bestimmte Klassen von Elementen
{font-size:18pt;color:Red;}
</style>
möglich
g
</head>
<body>
<h1 class="title">Überschrift 1</h1>
<p>Ein bisschen Fließtext</p>
<h1>Überschrift 2</h1>
<p>Ein bisschen Fließtext</p>
<h1 class="title">Überschrift 3</h1>
<p>Ein bisschen Fließtext</p>
</body>
</html>
<html>
<head>
<title>Titel der Datei</title>
<link rel="stylesheet" type="text/css"
href="formate.css">
<style type="text/css">
body { background-color:#FFFFCC;margin-left:100px;}
...
</style>
</head>
<body>
<div class="title">Dies ist der Titel</div>
</body>
</html>
Cascading Style Sheets - CSS
17
formate.css
.title {
font-size:18pt;
color:red;
}
Cascading Style Sheets - CSS
18
Stylesheets können (und werden) hintereinander
gehängt
und überschreiben einander
Browser Stylesheet wird durch Autoren Stylesheet
überschrieben
mehrere Autorenstylesheets überschreiben einander
dadurch können sehr komplexe Layouts realisiert
werden, aber auch komplex in der Anwendung
Stylesheets für unterschiedliche Ausgabegeräte
wichtig für z.B. Barrierefreiheit
<html>
<head>
<title>Titel der Datei</title>
<link rel="stylesheet" media="screen" href="website.css">
<link rel="stylesheet" media="print, embossed"
href="druck.css">
<link rel="stylesheet" media="aural" href="speaker.css">
</head>
<body>
...
</body>
</html>
3
23.11.2010
Boxmodell
<div>
Dies ist der Titel
</div>
<div>
Menübereich
</div>
<div>
Hauptinhalt
</div>
Boxmodell
DIV-Elemente definieren
rechteckige Bereiche
Ermöglichen freie
Festlegung von
Bereichen
Bereichen,
beispielsweise für:
Grundlage für den Seitenaufbau
Festlegung von Breite, Höhe, Innen- und
Außenabständen
Prinzip
<div>
Titel
Menü
Hauptinhalt
Infoboxen
Inhalt:
weitere div-Elemente,
Absätze: <p>, etc.
</div>
Boxmodell
Boxmodell, Abstände
margin-top
border-top
padding-top
margin-top
width
margin-rig
ght
border-rig
ght
padding-bottom
margin-right
Inhalt
width
padding-rig
ght
Inhalt
Inhalt
border-right
Inhalt
padding-right
heigh
t
border-left
margin-left
padding-left
padding-top
height
border-lef
ft
padding-lef
ft
margin-lef
ft
border-top
border-bottom
margin-bottom
padding-bottom
border-bottom
margin-bottom
Gesamtbreite und –höhe ergibt sich aus der Summe aller Einzelwerte in x und yRichtung
HTML und CSS
Boxmodell, Positionierung
24
<div id=„title“>
Dies ist der Titel
</div>
<div id
id=„menu“>
„menu >
Menübereich
</div>
<div id=„content“>
Hauptinhalt
</div>
#title{
width: 500px;
height: 100px;
border: 1px solid black;
text-align: center;
}
#menu{
width: 500px;
height: 30px;
border: 1px solid black;
text-align: center;
margin-top:5px;
}
HTML beschreibt Struktur und Inhalt der Daten
Tags für Struktur
Inhalt „normaler“ Text
Struktur beinhaltet auch Markierung der Teile, die anders formatiert werden
sollen
Formatierung
g wird in Stylesheets
y
(CSS)
(
) festgelegt
g g
für jedes Element kann einzeln Formatierung bestimmt werden
Browser-Stylesheets sorgen für Standard-Darstellung
Autoren-Stylesheets überschreiben diese Einstellungen und können für individuelle
Formatierungen verwendet werden
4
23.11.2010
Ein etwas ausführlicheres Beispiel:
Hilfsmittel
25
<body>
<div id="body">
<div id="logo"></div>
<div id="title"></div>
<div class="menu">
<div class="menuitem"><a href="index.html">Home</a></div>
<div class="menuitem"><a href="l.html">Lehre</a></div>
<div class="menuitem"><a href="a.html">Arbeit</a></div>
<div class="menuitem"><a href="p.html">Publikationen</a></div>
</div>
<div id="content">
<ul id
id="contact">
contact >
<li id="name">Dr.-Ing. Marcel Götze</li>
<li id="institut">Dekanat</li>
<li id="school">Fakultät für Geistes-, Sozial- & Erziehungswissenschaften</li>
<li id="university">Otto-von-Guericke Universität Magdeburg</li>
<li class="empty"></li>
<li id="adress">Adresse:</li>
<li id="street">Zschokkestrasse 32</li>
<li id="city">39104 Magdeburg</li>
<li id="tel">Tel: ++49(0)391 67 16491</li>
<li id="fax">Fax: ++49(0)391 67 16541</li>
<li id="email">email: [email protected]</li>
</ul>
</div>
</div>
</body>
Firebug: Firefox-Addon, das:
die Arbeit mit HTML-Quellcode erleichtert
Die Anzeige und Manipulation von CSS-Elementen erlaubt
Dem Programmierer die Kontrolle der Abarbeitung von
Scripten (bspw.
(bspw Javascript) ermöglicht → wichtig für die
Fehlersuche
TopStyle-Lite: Programm, das die Arbeit mit CSS
erleichtert
CSS – Parameter können aus Liste gewählt werden
(verhindert Fehler bei der Eingabe)
Web-Developer Toolbar: Firefox-Addon
5
