HCI-13-Crashkurs-HTML-und-CSS
Werbung
Crashkurs HTML und CSS
HTML und CSS
Hinweis:
Dieser Crashkurs liefert einen Überblick und Kriterien für die
sachgerechte Verwendung von HTML und CSS.
Zum Lernen, Nachschlagen und Ausprobieren verweise ich auf
die Kapitel HTML und CSS von
Außerdem sollten Sie die Webdeveloper-Werkzeuge Ihres
Browsers aktivieren, um Die HTML- und CSS-Quellen der
Seiten sehen zu können.
(c) schmiedecke 2012
Crashkurs HTML und CSS
2
Q
HTML und CSS
• HTML
• XHTML
• HTML5
– seit 1991
– strenge Form, erweiterbar, seit 2000
– streng, seit 2012
– Medientags
– erweiterte semantische Auszeichnung
• CSS
– seit 1994
– "Style"-Sprache, eingebettet oder ausgelagert
– heute einziger Träger der Gestaltungsinformation
(c) schmiedecke 2012
Crashkurs HTML und CSS
3
Trennung von Inhalt und Form
• Aufgabenteilung:
Programmierer und Webdesigner
• Übertragbarkeit des Designs
• Mehrsprachigkeit
• Layoutvariationen für div. Endgeräte
• Accessability
(c) schmiedecke 2012
Crashkurs HTML und CSS
4
Trennung funktioniert: CSS Zen Garden
(c) schmiedecke 2012
Crashkurs HTML und CSS
5
HTML: Auszeichnung des Inhalts
(c) schmiedecke 2012
Crashkurs HTML und CSS
6
HTML: Aspekte des Inhalts
(c) schmiedecke 2012
Crashkurs HTML und CSS
7
HTML: Semantische Auszeichnung
Print-Dokument
Online-Dokument
Semantik-Auszeichnung leistet
Gliederung
Gruppierung
Differenzierung der Inhalte
Layout leistet
Unterstützung der Semantik
optische Aufbereitung
Hervorhebung und
Fokussierung
Layout leistet
Gliederung
Gruppierung
Differenzierung der Inhalte
optische Aufbereitung
Hervorhebung und
Fokussierung
(c) schmiedecke 2012
Crashkurs HTML und CSS
8
HTML: Aspekte des Inhalts
•
Gliederung
–
–
–
–
–
–
•
links
lists
images, media
forms
…
(c) schmiedecke 2012
Semantische Abschnitte
–
–
–
–
–
–
–
title
headings
paragraph
line break
subject break <hr>
…
Elemente
–
–
–
–
–
•
•
div, span
header, footer
heading group
section
article
aside
…
Semantische Elemente
–
–
–
–
–
–
–
Crashkurs HTML und CSS
abbreviation
blockquote
code, sample
date
progress
strong, emphasize
…
9
HTML-Elemente
Dokumentenbausteine, von Tags umschlossen
<p>neuer Absatz mit viel Text und Bildern</p>
Block-Elemente erzeugen einen Zeilenwechsel
Inline-Elemente nicht
Elemente können geschachtelt werden
Leere Elemente haben nur ein Tag <br>, <hr>, <p/>
öffnende Tags können Attribute haben
<a href="http://www.beuth-hochschule.de">BHT-homepage</a>
(c) schmiedecke 2012
Crashkurs HTML und CSS
10
HTML-Elemente
Blockelemente
Inline-Elemente
<p>
<h1>…<h6>
<ul>, <ol>, <dl>
<table>
<blockquote>
<fieldset>
<hr />
<div>
© schmiedecke 11
<a>
<img>
<object>
<input>, <textarea>
<select>
<button>
<label>
<strong>, <em>
<acronym>, <abbr>
<q>
<span>
HCI
11
HTML: Dokumentaufbau
minimales HTML(5)-Dokument
<!DOCTYPE> – Angabe zur korrekten Behandlung durch den Browser,
kann auch enthalten: DTD für XML, Angaben zur Sprachstrenge, ...
<head>
enthält den Titel, der im Fensterkopf erscheint, zusätzlich ggf.
<base/> für die Standard-Basisadresse für Links und Targets,
<meta /> für Metainformationen wie Autor, Beschreibung, CMS, …,
<link /> zum Einbinden von CSS, Bibliotheken, Bildquellen
<body>
enthält den darzustellenden Inhalt
(c) schmiedecke 2012
Crashkurs HTML und CSS
12
Die wichtigsten HTML-Tags am Beispiel
<body>
<h2>Beispielseite</h2>
<p>erster absatz</p>
<h3>Tabelle</h3>
<table>
<tr>
<td></td>
<th>Spalte 1</th>
<th>Spalte 2</th>
</tr>
<tr>
<th>Zeile 1</th>
<td>11</td>
<td>12</td>
</tr>
</table>
<br/>
© schmiedecke 11
<h3>Liste</h3>
<ul>
<li>1.Zeile</li>
<li>2.Zeile</li>
</ul>
<p> <a href="http://www.beuthhochschule.de">Beuth-Hochschule</a>
</p>
<p> <img src="http://www.beuthhochschule.de/uploads/pics/Logo_horizo
ntal.gif" alt="BHT-Logo" /> </p>
</body>
HCI
13
Darstellung ohne CSS
© schmiedecke 11
HCI
14
Beuth-Seite ohne CSS
(c) schmiedecke 2012
Crashkurs HTML und CSS
15
HTML: Qualitätskriterien
•
•
•
•
•
•
valide
logische Gliederung
semantische Auszeichnung
ohne CSS verstehbar
gute Navigation
barrierefrei
(c) schmiedecke 2012
Crashkurs HTML und CSS
16
HTML: Struktureller Aufbau
1.
Gliedern
–
–
–
2.
Linearisieren
–
–
3.
Lesereihenfolge bestimmen
Überspringen und Ein/Ausblenden planen
Auszeichnen
–
–
–
–
4.
HTML-Tags für Überschriften, Blöcke, semantische Elemente, etc. einsetzen
ggf. <div>- und <span>-Tags für benannte Blöcke verwednen
"class" –oder "id"-Attribut für Blöcke entsprechend der Gliederung setzen.
Alternativtext zu allen Bildinformationen
Testen
–
–
5.
Inhaltliche Struktur bestimmen
Semantische Blöcke benennen
Navigation anlegen
<body>
<div id="header"> …. </div>
<div id="navigation"> … </div>
<div id="content">
<div id="news"> …
</div>
<div id="main article"> …
</div>
<p id="blog entries"> … </p>
</div>
<div id="footer">…</div>
</body>
Lesbarkeit und Verständlichkeit ohne CSS
Navigation
Validieren
(c) schmiedecke 2012
Crashkurs HTML und CSS
17
Gestaltung durch CSS
Cascading Stylesheets (CSS3)
•
•
•
•
•
<style>
body: {color: #F00; }
p: {color: #0F0; }
ul: {color: #00F; }
</style>
Gestaltungsangaben wie Farbe, Größe, Font, Position
Selektoren beschreiben Gültigkeitsbereich:
HTML-Element (Tag):
h1
Klasse von Elementen (class-Attribut):
.rechteBox
Benanntes Element (id-Attribut):
#quicklinks
Selektoren können gelistet werden (alternativ)
h1, .rechteBox
Selektoren könne als Pfade angegeben werden
#quicklinks ul
Für Links gibt es Selektoren nach Zuständen
a:link
a:visited
a:hover
Kaskade:
•
Der spezifischere Selektor überschreibt den allgemeineren
(c) schmiedecke 2012
Crashkurs HTML und CSS
18
Einbindung von CSS
CSS-Style-Angaben
• als style-Attribut direkt in HTML-Tags
• als <style>-Tag für das gesamte Dokument
• als Datei-Link im Header
Kaskade: Attribut > Tag > Datei
(c) schmiedecke 2012
Crashkurs HTML und CSS
19
Einbindung von CSS: Beispiele
Stylesheet im Header spezifizieren:
mit Link-Element einbinden:
<link rel="stylesheet"
media="screen" type="text/css"
href="styles/standard.css" />
im Style-Element importieren
<style type="text/css" media="screen">
@import 'styles/standard.css'
… weitere CSS-Anweisungen
</ style>
Inline-CSS mit dem Style-Attribut:
<p style="color: #06F; text-align: center;"> ……</p>
(c) schmiedecke 2012
Crashkurs HTML und CSS
20
CSS: Das Box-Modell
• Jedes Block-Element hat seine "Box"
• Für jede Box kann festgelegt werden:
– Breite, Höhe, Alignment
– Margin, Padding, Border
– Absolute Position oder Floatrichtung
• Boxen werden untereinander angeordnet
– es sei denn, Position oder Floating sind angegeben
• Beispiel: Bild rechtsbündig in den nachfolgenden Text integriert:
img: { float:right; margin-left: 2em }
(c) schmiedecke 2012
Crashkurs HTML und CSS
21
<body>
<div id="header"> …. </div>
<div id="navigation"> … </div>
<div id="content">
<div id="news"> …
</div>
<div id="main article"> …
</div>
<p id="blog entries"> …
</p>
</div>
<div id="footer">…</div>
</body>
Layout gestalten
#header {…}
#navigation {
float:left;
width:15em;
}
#blogs {
float.right;
width: 10em;
font-size:60%;
}
© schmiedecke 11
header
news
navigation
main article
HCI
blogs
22
Skalierbarkeit
Größenänderungen ohne Informationsverlust
• für unterschiedliche Geräte
• für sehbehinderte Nutzer (Textvergrößerung)
Maßnahmen
• Keine absoluten Größenangaben für Text und Box
• 55 %
• 0.5em
• Tabellen:
• Texte:
(c) schmiedecke 2012
- Relativ zur aktuellen Größe/Breite/Höhe
- Relativ zur aktuellen Breite des "M"
Breite den <td>-Elementen in Prozent zuordnen,
auf keinen Fall Scrolling=NO oder Noresize angeben!
Maximalbreite begrenzen (max-width=35em
Crashkurs HTML und CSS
23
Fehlermöglichkeiten gibt's genug
(c) schmiedecke 2012
Crashkurs HTML und CSS
24
Ein kleines Beispiel:
<body>
<div id="header">
<p>Titel</p>
<h1>Raamattu </h1>
</div>
<div id="navigation">
<h4>Navigation</h4>
<ul>
<li>Alussa </li>
<li>loi </li>
<li>Jumala </li>
<li>taivaan </li>
<li>ja </li>
<li>maan.</li>...
</ul>
</div>
<div id="content">
<h2>Haupttext</h2>
<p id="text1">Blindtext</p>
<p id="text2">Blindtext</p>
<p id="adam"><img
src="michelangeloAdam.jpg" alt="Adam,
painting by Michelangelo. Painting depicts
Godly inspiration of Man" width="264"
height="180" /></p>
</div>
<div id="footer">
<p>Impressum: &copy; schmiedecke 11 - HTMLCSS-Demo</p>
</div>
</body>
HCI
25
Layout ohne CSS
© schmiedecke 11
HCI
26
CSS
@charset "utf-8";
/* CSS Document */
<style type="text/css">
body {
font-family: Verdana, Geneva, sans-serif;
max-width: 60em;}
#center { background-color: #C97 }
#navigation {
float: right;
width:14em;
max-width:20em;
padding: 0.4em;
}
#navigation li { list-style:none; }
#content {
background-color: #CC9;
margin-left:0em;
margin-right:15em;
max-width:40em;
padding: 0.5em;
}
#header {
width:100%;
background-image:
url(http://....jpg);
}
#headertext {
margin-left:15em;
color: #CCC;
}
© schmiedecke 11
HCI
27
CSS ctd.
#footer {
width:100%;
display: block;
float:left;
font-size: small;
background-color: #999;
}
#adam {
float:right;
margin-left: 2em;
}
</style>
© schmiedecke 11
HCI
28
Layout mit CSS
© schmiedecke 11
HCI
29
Zu Besuch im CSS Zen Garden
(c) schmiedecke 2012
Crashkurs HTML und CSS
30
HTML
<body id="css-zen-garden">
<div id="container">
<div id="intro">
<div id="pageHeader">
<h1>
<span>css Zen Garden</span>
</h1>
<h2>
<span>
The Beauty of
<acronym title="Cascading Style Sheets">CSS</acronym>
Design
</span>
</h2>
</div>
<div id="quickSummary">
<p class="p1">
<span>
A demonstration of what can be accomplished visually through
<acronym title="Cascading Style Sheets">CSS</acronym>
-based design. Select any style sheet from the list to load it into this page.
</span>
</p>
(c) schmiedecke 2012
Crashkurs HTML und CSS
31
CSS: Fahrner Image Replacement (FIR)
#intro, #supportingText {
padding: 0 69px 0 86px;
width: 545px;
}
#intro {
background: url("images/logo.gif") no-repeat scroll left top transparent;
padding-top: 230px;
}
[….]
#preamble, #explanation, #participation, #benefits, #requirements {
border-bottom: 1px solid #E4E1DB;
padding-bottom: 20pt;
}
#pageHeader, #pageHeader h1, #pageHeader h2, #quickSummary .p1, #linkList2 h3 span {
display: none;
}
FIR: Bekannter Trick, um Trotz Text-Design als Bild die CSS-freie Fassung korrekt zu halten.
Leider Screenreader-Probleme…
(c) schmiedecke 2012
Crashkurs HTML und CSS
32
Soviel zur Einführung in HTML und CSS
nächstes Mal geht es um
Barrierefreiheit.
(c) schmiedecke 2012
Crashkurs HTML und CSS
33
