moderne web-seiten erstellen und gestalten mit html und css … · 2018-04-30 · moderne...
TRANSCRIPT
www.assono.de
Moderne Web-Seiten erstellen und
gestalten mit HTML und CSS
von Thomas Bahn, 23. April 2018
EntwicklerCamp 2018, Gelsenkirchen
Thomas Bahn
• Diplom-Mathematiker, Uni Hannover
• professionelle Web-Entwicklung seit
30 Jahren
• regelmäßig Sprecher auf Konferenzen
und Fachartikelautor
HTML
Hyper Text Markup Language – die Sprache des Web
Voraussetzungen schaffen – Werkzeuge
• Editor/IDE
– Texteditor reicht eigentlich, aber man kann auch mit Schaufeln einen Kanal ausheben
– Microsoft Visual Studio Code (https://code.visualstudio.com/)
– Atom (https://atom.io/)
• Browser
– Google Chrome (https://www.google.de/chrome/),
– Mozilla Firefox (https://www.mozilla.org/de/firefox/),
– Microsoft Edge oder Internet Explorer
• Entwicklerwerkzeuge im Browser: F12 drücken
Online lernen und nachschlagen
• SELFHTML-Wiki (https://wiki.selfhtml.org/)
– Elemente-Referenz (https://wiki.selfhtml.org/wiki/Referenz:HTML)
– Attribute-Referenz (https://wiki.selfhtml.org/wiki/Referenz:HTML/Attribute)
– Zeichenreferenz (https://wiki.selfhtml.org/wiki/Referenz:HTML/Zeichenreferenz)
• W3Schools Online Web Tutorials (https://www.w3schools.com/)
• Can I use… (https://caniuse.com/)
• W3C Markup Validation Service (http://validator.w3.org/)
HTML-Grundgerüst
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Titel</title>
</head>
<body>
</body>
</html>
Elemente und Attribute
• <element></element>
– Elementname klein schreiben
– immer schließen, außer bei „leeren“ Elementen
• <element attribut="wert"></element>
– Attributname klein schreiben
– Attributwerte sind immer in doppelte Anführungszeichen ("") einfassen
• Code formatieren mit Zeilenumbrüchen und Einrückungen
Elemente der Grundstruktur
• <!DOCTYPE html>: jetzt kommt HTML5 (früher gab es andere Dokumententypen)
• <html lang="de"></html>: Wurzel allen Übels, Inhalt in deutsch
• <head></head>: (unsichtbarer) Kopf
• <body></body>: Hauptteil, der auch dargestellt wird
Elemente im Kopf
• <meta charset="utf-8" />: Zeichenkodierung UTF-8
• <meta name="viewport" content="width=device-width, initial-scale=1.0" />:
Viewport, Inhaltsbereich des Browserfensters anpassen (für Mobilgeräte wichtiger)
• <title>Titel</title>: Seitentitel (für Fenster bzw. Reiter)
Ein paar ganz wichtige Elemente für den Inhalt
• <p></p> (paragraph): Absatz
• <br> (break row): Zeilenumbruch (ein leeres Element, d. h. ohne schließendes Tag)
• <h1></h1> bis <h6></h6> (header): Überschriften von Ebene 1 (groß) bis 6 (klein)
– nicht nur Formatierung, sondern auch Semantik (z. B. Suchmaschinen)
• <hr> (horizontal ruler): horizontale Linie
• <!-- Kommentar -->: auch mehrzeilig
• id-Attribut: auf der gesamten Seite eindeutiger Bezeichner für ein Element
Beispiel 1
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Beispiel 1</title>
</head>
<body>
<h1 id="Haupttitel">Dies ist eine Überschrift</h1>
<p>Und das der erste Absatz</p>
<hr>
<p>Der zweite Absatz<br>mit zwei Zeilen</p>
</body>
</html>
Textformatierungen
• Wenn es nur um das Optische geht, möglichst mit CSS (kommt später)
• Formatierung, teilweise mit „Bedeutung“
– <strong></strong>: fett und wichtig (<b></b> (bold) nur fett)
– <em></em>: (emphasized) unterstrichen und wichtig
(<i></i>: (italic) nur unterstrichen, aber nicht so wichtig)
– <mark></mark>: (marked) wie mit Textmarker hervorgehoben
– <sup></sup>: (superscripted) hochgestellt
– <sub></sub>: (subscripted) tiefgestellt
Hyper Text-Links
• <a></a> (anchor): Verknüpfung auf Web-Seite
• href-Attribut gibt die Ziel-URL an: Was soll dargestellt werden?
– <a href="https://www.assono.de">assono</a>: absolut mit Protokoll und Server
– <a href="/dev/javascript.html">JavaScript</a>: absolut auf gleichem Server
– <a href="seite2.html">2. Seite</a>: relativ
• target-Attribut: Wo soll der Inhalt dargestellt werden?
– <a href="ziel.html" target=„_blank">…</a>: Neues Fenster/neuer Reiter
– <a href="ziel.html" target=„_self">…</a>: aktuelle Stelle (Inhalt ersetzen) – Vorgabe
Bilder
• Bild einfügen:
<img src="assono.png" alt="assono-Logo" width="152" height="30">
• src-Attribut (source): URL des Bildes (relativ/absolut)
• alt-Attribut (alternate): Text, wenn Bild nicht angezeigt wird (Screen Readers)
• width- und height-Attribute: Breite und Höhe vorgeben (damit es nicht flackert)
• <picture> bietet mehr Möglichkeiten, insbesondere Bilder in verschiedenen Auflösungen
Unsortierte Listen
<ul>
<li>rot</li>
<li>grün</li>
<li>blau</li>
</ul>
• <ul></ul> (unordered list): unsortierte Liste (Bullet points)
• <li></li> (list item): Listenelement
Sortierte (numerierte) Listen
<ol>
<li>rot</li>
<li>grün</li>
<li>blau</li>
</ol>
• <ol></ol> (ordered list): sortierte Liste (1., 2., …)
• <li></li> (list item): Listenelement
Beschreibungslisten
<dl>
<dt>HTML</dt>
<dd>- Hyper Text Markup Language</dd>
<dt>CSS</dt>
<dd>- Cascading Style Sheets</dd>
</dl>
• <dl></dl> (description list): Liste von Name-Beschreibung-Paaren, z. B. Glossar
• <dt></dt> (description term): Name
• <dd></dt> (description): Beschreibung
Tabellen
• <table></table>: Tabelle
• <tr></tr> (table row): Tabellenzeile
• <th></th> (table header): Tabellenzelle im Kopf (auch vertikal)
• <td></td> (table data): normale Tabellenzelle
• colspan="Zahl": Zelle überspannt mehrere Spalten (column)
• rowspan="Zahl": Zelle überspannt mehrere Zeilen (row)
<table>
<tr>
<th>Vorname</th>
<th>Nachname</th>
<th>Alter</th>
</tr>
<tr>
<td>Erika</td>
<td>Mustermann</td>
<td>29</td>
</tr>
<tr>
<td>Peter</td>
<td>Petersen</td>
<td>55</td>
</tr>
</table>
Schaltflächen
• <button></button>: normale Schaltfläche
• machen ohne JavaScript nicht viel Sinn, deshalb mehr dazu im Hands-On 3:
„Moderne Anwendungen entwickeln mit JavaScript“
Formulare
• <form action="…" method="…" target="…"></form>: Formular
– action-Attribut: URL, die aufgerufen wird, wenn Formular abgeschickt wird
– method-Attribut: HTTP-Methode get (Vorgabe) oder post
– target-Attribut: Zielfenster
– enctype-Attribut: Kodierung, z. B. "text/plain"
Wichtige Eingabeelemente
• <input type="text" name="…">: einzeiliges Textfeld
– name-Attribut: eindeutiger Name des Eingabelements
• <label for="…"></label>: Beschriftung für Eingabefeld
– for-Attribut: verweist auf name-Attribut des Eingabefelds
• <textarea></textarea>: mehrzeiliges Textfeld
• <input type="radio"></input>: Optionsfeld (rund), nur eine Auswahl erlaubt
• <input type=“checkbox"></input>: Auswahlfeld, an-/abwählbar
Wichtige Eingabeelemente (forts.)
• <select name=“…"></select>: Auswahlliste
– multiple-Attribut: Mehrfachauswahl erlaubt
– <option value=“…">…</option>: eine Auswahlmöglichkeit für eine Auswahlliste
• <input type="submit“></input>: Schaltfläche zum Abschicken des Formulars
Blöcke
• semantische Blöcke
– <header></header>: Kopfbereich der Seite
– <footer></footer>: Fußbereich der Seite
– <nav></nav>: Navigation
– <main></main>: eigentlicher Inhaltsbereich
– <article></article>: eigenständiger, abgeschlossener Teil
• Ohne semantische Bedeutung
– <div></div> (division): Container für mehrere Elemente (blockförmig)
– <span></span>: Textpassage
CSS
Cascading Style Sheets – viel mehr als Kosmetik
1. Einbindung: Inline
• Inline mit style-Attribut beim Element
<p style="font-family: Verdana; font-size: 120%; color: red;">
Dies ist ein stinklangweiliger Text.
</p>
• wird schnell unübersichtlich und ist schlecht wartbar
• Verwendung: nur in besonderen Ausnahmefällen
2. Einbindung: <style>-Element im <head>
• <style>-Element im <head>:
<style type="text/css">
#internesStylesheet {
font-family: "Verdana", "Geneva";
font-size: 140%;
color: green;
}
</style>
• besser, aber selten optimal
3. Einbindung: <link>-Element im <head>
• <link>-Element im <head>:
<link rel="stylesheet" type="text/css" href="beispiel-css1.css">
• Datei beispiel-css1.css:
#externesStylesheet {
font-family: "Verdana", "Geneva";
font-size: 160%;
color: blue;
}
• meistens die beste und effizienteste Variante
Typselektor: Element (HTML-Tag)
• CSS:
span {
font-weight: bold;
}
• HTML:
<p><span>Dieser Text ist auch nicht viel interessanter.</span></p>
• Verwendung:
gleichartige Formatierung von Elementen, unabhängig von ihrer Rolle auf der Seite
ID-Selektor
• CSS:
#selektorID {
text-decoration: underline;
}
• HTML:
<p id="selektorID">Dieser Text ist auch nicht viel interessanter.</p>
• Verwendung:
einzelne Elemente gezielt formatieren
Klassen-Selektor
• CSS:
.selektorClass {
text-decoration: overline;
}
• HTML:
<p class="selektorClass">Dieser Text ist auch nicht viel interessanter.</p>
• Verwendung:
gleichartige Formatierung vieler Elemente, abhängig von Rolle auf der Seite
Selektoren verketten (hier: Nachfahrenselektor)
• CSS:
.selektorClass span {
font-style: italic;
}
• HTML:
<p class="selektorClass">Dieser <span>Text</span> ist auch nicht viel
interessanter.</p>
• Verwendung:
gleichartige Formatierung von bestimmten Konstellationen/Kombinationen von
Elementen und Klassen
Textformatierungen
• Schriftart
<p style="font-family: Verdana;">Die Texte werden einfach nicht besser.</p>
• Schriftschnitt (fett, kursiv)
<p style="font-weight: bold;">Die Texte werden einfach nicht besser.</p>
<p style="font-style: italic;">Die Texte werden einfach nicht besser.</p>
• Schriftgröße
<p style="font-size: larger">Die Texte werden einfach nicht besser.</p>
• Zeilenhöhe
<p style="line-height: 200%">Die Texte werden einfach nicht besser.<br>2. Zeile</p>
Maße angeben
• ohne Maßeinheit: Faktor, Wert 1 entspricht 100%, Fließkommazahlen mit Punkt (englisch)
• px (Pixel) ist relativ und absolut, weil abhängig von Pixeldichte
• absolut: pt (Punkt), pc (Pica), cm, mm, in (Inch)
• relativ: em (Geviertbreite), ex (x-Höhe), % (Prozent), …
Farben und Hintergründe
• Vordergrundfarbe
<p style="color: red;">Wenn es doch nur intelligentere Texte gäbe.</p>
• Hintergrundfarbe
<p style="background-color: green;">Wenn es doch nur intelligentere Texte gäbe.</p>
• Hintergrundbild
<p style="background-image: url('verlauf.gif‘); background-repeat: repeat-x;">Wenn es
doch nur intelligentere Texte gäbe.</p>
Farbwerte angeben
• Farbname, wie 'white', 'red', 'navy'
• hexadezimal: #ffffff, #ff0000, #000080 (Kurzschreibweise: #fff, #f00)
• rgb(255,255,255), rgb(100%,0,0), rgb(0,0,128, 0.5) (letztes Beispiel mit Transparenz)
• hsl(240, 100%, 50%)
Rahmen und Abstände
• Rahmen (border)
<table><tr><td style="border: 4px solid blue; background-color:
silver;">X</td></tr></table>
• Abstände (margin)
<table><tr><td><div style="margin: 1em; background-color:
silver;">X</div></td></tr></table>
• Einzüge (padding)
<table><tr><td style="padding: 1em; background-color: silver;">X</td></tr></table>
CSS-Positionierung
• position: static; Vorgabe, „normal“
• position: relative; verschoben gegenüber normal, Lücke bleibt
• position: absolute; feste Position in Bezug auf Elternelement, Lücke geschlossen
• position: fixed; feste Position in Bezug auf Browser-Fenster, Lücke geschlossen
• z-index: [Zahl]; Elemente „übereinander“ legen/stapeln, 3. Dimension, z-Achse
CSS-Positionierung (forts.)
• float: left|right;
Element an die linke|rechte Seite schieben, nachfolgende Elemente „umfließen“ es
wie ein Bild in einem Magazinartikel
• clear: left|right|both;
Umfließen wieder aufheben
• Wird in Verbindung mit CSS3 Media Queries häufig für responsive Layouts verwendet
Media Queries (CSS 2)
• CSS für bestimmte Medien definieren:
<link href="css/screen.css" type="text/css" rel="stylesheet" media="screen" />
<link href="css/print.css" type="text/css" rel="stylesheet" media="print" />
• oder innerhalb eines <style>-Elements:
<style>
@media screen { … }
@media print { … }
</style>
Media Queries (CSS 3)
• CSS an komplexe Bedingungen knüpfen:
@media screen and (min-width: 960px) { … }
@media screen and (min-width: 768px) and (max-width: 960px) { … }
@media screen and (max-width: 480px) { … }
• Verwendung für Responsive Design