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
Quelle: we3schools
HTML und CSS
• HTML – seit 1991
• XHTML – strenge Form, erweiterbar, seit 2000
• HTML5 – 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
HTML: Semantische Auszeichnung
Print-Dokument
Layout leistet
Gliederung
Gruppierung
Differenzierung der Inhalte
optische Aufbereitung
Hervorhebung und Fokussierung
Online-Dokument
Semantik-Auszeichnung leistet
Gliederung
Gruppierung
Differenzierung der Inhalte
Layout leistet
Unterstützung der Semantik
optische Aufbereitung
Hervorhebung und Fokussierung
(c) schmiedecke 2012 Crashkurs HTML und CSS 8
HTML: Aspekte des Inhalts
• Gliederung – title – headings – paragraph – line break – subject break <hr> – …
• Elemente
– links – lists – images, media – forms – …
• Semantische Abschnitte – div, span – header, footer – heading group – section – article – aside – …
• Semantische Elemente – abbreviation – blockquote – code, sample – date – progress – strong, emphasize – …
(c) schmiedecke 2012 Crashkurs HTML und CSS 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 <p>
<h1>…<h6>
<ul>, <ol>, <dl>
<table>
<blockquote>
<fieldset>
<hr />
<div>
Inline-Elemente <a>
<img>
<object>
<input>, <textarea>
<select>
<button>
<label>
<strong>, <em>
<acronym>, <abbr>
<q>
<span>
© schmiedecke 11 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/>
<h3>Liste</h3>
<ul>
<li>1.Zeile</li>
<li>2.Zeile</li>
</ul>
<p> <a href="http://www.beuth-hochschule.de">Beuth-Hochschule</a> </p>
<p> <img src="http://www.beuth-hochschule.de/uploads/pics/Logo_horizontal.gif" alt="BHT-Logo" /> </p>
</body>
© schmiedecke 11 HCI 13
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 – Inhaltliche Struktur bestimmen
– Semantische Blöcke benennen
– Navigation anlegen
2. Linearisieren – Lesereihenfolge bestimmen
– Überspringen und Ein/Ausblenden planen
3. Auszeichnen – 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
4. Testen – Lesbarkeit und Verständlichkeit ohne CSS
– Navigation
5. Validieren
(c) schmiedecke 2012 Crashkurs HTML und CSS 17
<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>
Gestaltung durch CSS
Cascading Stylesheets (CSS3) • 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
<style> body: {color: #F00; } p: {color: #0F0; } ul: {color: #00F; } </style>
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
(c) schmiedecke 2012 Crashkurs HTML und CSS 21
• 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 }
Layout gestalten
#header {…}
#navigation {
float:left;
width:15em;
}
#blogs {
float.right;
width: 10em;
font-size:60%;
}
© schmiedecke 11 HCI 22
header
navigation
news
main article blogs
<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>
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 % - Relativ zur aktuellen Größe/Breite/Höhe • 0.5em - Relativ zur aktuellen Breite des "M" • Tabellen: Breite den <td>-Elementen in Prozent zuordnen,
auf keinen Fall Scrolling=NO oder Noresize angeben! • Texte: Maximalbreite begrenzen (max-width=35em
(c) schmiedecke 2012 Crashkurs HTML und CSS 23
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: © schmiedecke 11 - HTML-CSS-Demo</p>
</div>
</body>
HCI 25
CSS @charset "utf-8";
/* CSS Document */
<style type="text/css">
body {
font-family: Verdana, Geneva, sans-serif;
max-width: 60em;}
#header {
width:100%;
background-image: url(http://....jpg);
}
#headertext {
margin-left:15em;
color: #CCC;
}
#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;
}
© 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
HTML
(c) schmiedecke 2012 Crashkurs HTML und CSS 31
<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>
CSS: Fahrner Image Replacement (FIR)
(c) schmiedecke 2012 Crashkurs HTML und CSS 32
#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…