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 Q 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
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
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 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.beuthhochschule.de">beuth-hochschule</a> </p> <p> <img src="http://www.beuthhochschule.de/uploads/pics/logo_horizo ntal.gif" alt="bht-logo" /> </p> </body> schmiedecke 11 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 Inhaltliche Struktur bestimmen Semantische Blöcke benennen Navigation anlegen 2. Linearisieren Lesereihenfolge bestimmen Überspringen und Ein/Ausblenden planen <body> <div id="header">. </div> <div id="navigation"> </div> <div id="content"> <div id="news"> </div> </div> <div id="main article"> </div> <p id="blog entries"> </p> <div id="footer"> </div> </body> 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
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 <style> body: {color: #F00; } p: {color: #0F0; } ul: {color: #00F; } </style> (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
Layout gestalten #header { } #navigation { float:left; width:15em; } #blogs { float.right; width: 10em; font-size:60%; } navigation header news main article <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> blogs schmiedecke 11 HCI 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 % - 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
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: schmiedecke 11 - HTML- CSS-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;} #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
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