crashkurs html und css - schmiedecke.info · html und css hinweis: dieser crashkurs liefert einen...

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

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


Trennung von Inhalt und Form

• Aufgabenteilung: Programmierer und Webdesigner

• Übertragbarkeit des Designs

• Mehrsprachigkeit

• Layoutvariationen für div. Endgeräte

• Accessability


Trennung funktioniert: CSS Zen Garden


HTML: Auszeichnung des Inhalts


HTML: Aspekte des Inhalts


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


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 – …


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>


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


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>


Darstellung ohne CSS


Beuth-Seite ohne CSS


HTML: Qualitätskriterien

• valide

• logische Gliederung

• semantische Auszeichnung

• ohne CSS verstehbar

• gute Navigation

• barrierefrei


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


<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


<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


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>


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 }

Layout gestalten

#header {…}

#navigation {

float:left;

width:15em;

}

#blogs {

float.right;

width: 10em;

font-size:60%;

}


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


Fehlermöglichkeiten gibt's genug


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


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;

}


CSS ctd.

#footer {

width:100%;

display: block;

float:left;

font-size: small;

background-color: #999;

}

#adam {

float:right;

margin-left: 2em;

}

</style>


Layout mit CSS


Zu Besuch im CSS Zen Garden


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>

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…

Soviel zur Einführung in HTML und CSS

nächstes Mal geht es um

Barrierefreiheit.


crashkurs html und css - schmiedecke.info · html und css hinweis: dieser crashkurs liefert einen...

Documents