Books & Videos

Table of Contents

  1. Chapter 1 HTML kennenlernen: Die Websprache

    1. The Web Video killed the radio star

    2. Was macht der Webserver?

    3. Was macht der Webbrowser?

    4. Was Sie schreiben (HTML) ...

    5. Was der Browser darstellt ...

    6. Ihr großer Durchbruch bei Sternback-Kaffee

    7. Die Sternback-Webseite

    8. Eine HTML-Datei erstellen (Mac)

    9. Eine HTML-Datei erstellen (Windows)

    10. In der Zwischenzeit bei Sternback-Kaffee ...

    11. Ihre Arbeit speichern

    12. Ihre Webseite im Browser öffnen

    13. Ein erster Probelauf für Ihre Seite ...

    14. Sind wir jetzt fertig?

    15. Noch ein Testlauf ...

    16. Tags seziert ...

    17. Lernen Sie das Style-Element kennen

    18. Ein bisschen Stil für Sternback ...

    19. Surfen mit Stil ...

  2. Chapter 2 Weiter mit Hypertext: Lernen Sie das »HT« in HTML kennen

    1. KopfüBar, neu und verbessert

    2. Die neue Bar bauen

    3. Was haben wir gemacht?

    4. Was macht der Browser?

    5. Attribute verstehen

    6. Die Bar umbauen ...

    7. Technische Schwierigkeiten

    8. Planen Sie Ihre Pfade ...

    9. Defekte Bilder reparieren

  3. Chapter 3 Bausteine: Webseiten bauen

    1. Vom Tagebuch auf die Webseite mit 16 km/h

    2. Der grobe Entwurf

    3. Von der Skizze zur Gliederung

    4. Von der Gliederung zur Webseite

    5. Ein Testlauf mit Tobis Seite

    6. Neue Elemente hinzufügen

    7. Lernen Sie das <q>-Element kennen

    8. ... und nun ... der Testlauf ...

    9. Laaaaange Zitate

    10. Ein <blockquote> einbauen

    11. Die volle Wahrheit über das Geheimnis des <q>- und des <blockquote>-Elements

    12. In der Zwischenzeit auf Tobis Website ...

    13. Natürlich könnten Sie mit dem <p>-Element eine Liste erstellen ...

    14. HTML-Listen in zwei einfachen Schritten

    15. Eine Probefahrt durch die Städte

    16. »Verschachteln« heißt Elemente ineinander platzieren

    17. Die Verschachtelung mit einem Bild veranschaulichen

    18. Sicherstellen, dass die Tags übereinstimmen

  4. Chapter 4 Online gehen: Reise nach Webville

    1. Sternback (oder sich selbst) ins Web bringen

    2. Einen Provider finden

    3. Hallo, mein Domain Name ist ...

    4. Wie bekomme ich einen Domainnamen?

    5. Endlich einziehen

    6. Die Dateien in das Root-Verzeichnis kopieren

    7. Zwei randvolle Seiten über FTP

    8. Zurück zur Tagesordnung

    9. Hauptstraße, URL

    10. Was ist HTTP?

    11. Was ist ein absoluter Pfad?

    12. Wie Standard-Seiten funktionieren

    13. Wie verlinken wir mit anderen Websites?

    14. Auf das Koffeingeflüster verlinken

    15. Und der Testlauf ...

    16. Letzter Schliff für Webseiten

    17. Probelauf mit title ...

    18. Auf einen Abschnitt verlinken

    19. Mit dem Attribut id ein Ziel für <a> erstellen

    20. Mit Elementen mit ids verlinken

    21. In ein neues Fenster verlinken

    22. Ein neues Fenster mit dem target-Attribut öffnen

  5. Chapter 5 Bilder in Webseiten einfügen: Lernen Sie die Medien kennen

    1. Wie der Browser mit Bildern umgeht

    2. Wie Bilder funktionieren

    3. <img>: Es gibt nicht nur relative Links

    4. Bieten Sie eine Alternative

    5. Die Abmessungen von Bildern

    6. Die ultimative Fansite: myPod

    7. Sehen Sie sich »index.html« im Ordner myPod an

    8. Oh! Das Bild ist viel zu groß!

    9. Das Bild an die Größe des Browsers anpassen

    10. Das Bild öffnen

    11. Die Bildgröße verändern

    12. Die Bildgröße verändern, Teil 2 ...

    13. Sie haben die Größe geändert, also speichern Sie jetzt ab

    14. Bilder speichern

    15. Das HTML für myPod anpassen

    16. Und nun der Testlauf ...

    17. Weitere Fotos für myPod

    18. Ein weiterer Testlauf mit myPod

    19. Die Website für Thumbnails überarbeiten

    20. Thumbnails erstellen

    21. Das HTML für Thumbnails überarbeiten

    22. Noch ein Testlauf mit myPod

    23. Wie aus Thumbnails Links werden

    24. Seiten für die einzelnen Fotos erstellen

    25. Wie mache ich Links aus den Bildern?

    26. Die Bildlinks in »index.html« einfügen

    27. Das myPod-Logo öffnen

    28. Welches Format verwenden wir?

    29. Transparent oder nicht transparent? Das ist hier die Frage!

    30. Das transparente PNG speichern

    31. Moment mal, welche Hintergrundfarbe hat dann die Webseite?

    32. Die Hintergrundfarbe festlegen

    33. Die Hintergrundfarbe festlegen, Teil 2

    34. Überprüfen Sie das Logo mit der Hintergrundfarbe

    35. Speichern Sie das Logo

    36. Das Logo in die myPod-Webseite einfügen

    37. Und nun der letzte Testlauf

  6. Chapter 6 Standards und was dazugehört: Seriöses HTML

    1. Eine kurze Geschichte von HTML

    2. Der neue und verbesserte HTML5-Doctype

    3. HTML, der neue »lebende Standard«

    4. Die Dokumenttyp-Definition einsetzen

    5. Der Doctype-Testlauf

    6. Gestatten: der W3C-Validierer

    7. Die KopfüBar validieren

    8. Huston, wir haben ein Problem ...

    9. Den Fehler beheben

    10. Fast geschafft ...

    11. Mit einem <meta>-Tag die Zeichenkodierung angeben

    12. Wie Sie viele Browser und den Validierer mit einem <meta>-Tag glücklich machen ...

    13. Aller guten Dinge sind drei ...

    14. Aufruf an alle HTML-Profis: Holt euch das Handbuch ...

  7. Chapter 7 Erste Schritte mit CSS: Etwas Style hinzufügen

    1. Sie sind nicht mehr im Westerwald

    2. Bei Webvilles »Wohnungstausch« aufgeschnappt

    3. CSS mit HTML verwenden

    4. Sie möchten noch mehr Styles?

    5. CSS in HTML einbetten

    6. Der Bar einen Style verpassen

    7. Mit Style unterwegs: der Testlauf

    8. Die Überschriften stylen

    9. Testlauf ...

    10. Die Begrüßung unterstreichen

    11. Wir haben das richtige Mittel: einfach eine zweite Regel nur für das <h1>-Element angeben

    12. Wie Selektoren wirklich arbeiten

    13. Selektoren sichtbar machen

    14. Den KopfüBar-Style in die Elixir- und Wegweiser-Seiten hineinbekommen

    15. Die Datei »bar.css« erstellen

    16. Aus »bar.html« auf das externe CSS verweisen

    17. Aus »elixir.html« und »wegbeschreibung.html« auf das externe Stylesheet verweisen

    18. Testlauf für die gesamte KopfüBar-Site

    19. Es ist Zeit, über Vererbung zu sprechen

    20. Was wäre, wenn wir die Schrift im Vererbungsbaum nach oben verschieben?

    21. Testen Sie Ihr neues CSS

    22. Vererbung überschreiben

    23. Testlauf

    24. »elixir.html« eine Klasse hinzufügen

    25. Einen Selektor für die Klasse erstellen

    26. Ein grüner Testlauf

    27. Die nächsten Schritte mit Klassen ...

    28. Der Welt schnellste & kürzeste Anleitung zur Anwendung von Styles

    29. Wer erbt?

    30. Sicherstellen, dass das Bar-CSS gültig ist

  8. Chapter 8 Mit Schriften und Farbe stylen: Erweitern Sie Ihr Vokabular

    1. Text und Schriften aus der Vogelperspektive

    2. Was ist überhaupt eine Schriftfamilie?

    3. Schriftfamilien mit CSS angeben

    4. Wie die font-family-Angaben funktionieren

    5. Tobis Tagebuch entstauben

    6. Tobi eine neue font-family verschaffen

    7. Tobis neue Schriften testen

    8. Wie gehe ich damit um, dass jeder andere Schriften auf seinem Rechner hat?

    9. Wie Webfonts funktionieren

    10. Wie Sie Ihrer Seite einen Webfont hinzufügen ...

    11. Den Webfont in Tobis Tagebuch testen

    12. Schriftgrößen anpassen

    13. Wie also sollte ich meine Schriftgrößen angeben?

    14. Ändern Sie jetzt die Schriftgrößen in Tobis Webseite

    15. Die Schriftgrößen testen

    16. Die Gewicht einer Schrift ändern

    17. Die normalen Überschriften testen

    18. Ihren Schriften etwas Schnitt geben

    19. Tobis Zitate mit kursiver Schrift stylen

    20. Wie Webfarben funktionieren

    21. Wie Sie Webfarben angeben? Zählen wir mal die Anzahl der Möglichkeiten auf ...

    22. Hexcodes im Schnelldurchgang

    23. Wie man Webfarben findet

    24. Zurück zu Tobis Seite ... Wir machen die Überschriften orange und fügen auch eine Unterstreichung hinzu

    25. Tobis orangefarbene Überschriften testen

    26. Alles, was Sie jemals über Textdekorationen wissen wollten, auf weniger als einer Seite

    27. Die Unterstreichung entfernen ...

  9. Chapter 9 Das Boxmodell: Mit Elementen auf Tuchfühlung

    1. Die Bar wird renoviert

    2. Die neue, verbesserte und mega-gestylte Bar

    3. Die neue Bar einrichten

    4. Mit ein paar einfachen Verbesserungen beginnen

    5. Ein sehr kurzer Testlauf

    6. Eine weitere Anpassung

    7. Sehen Sie sich die neue Zeilenhöhe an

    8. Vorbereitung auf einige größere Umbauten

    9. Ein genauerer Blick auf das Boxmodell

    10. Was Sie mit Boxen machen können

    11. Inzwischen in der Bar ...

    12. Den Garantie-Style aufbauen

    13. Ein Testlauf mit dem Absatzrahmen

    14. Innenabstände, Rahmen und Außenabstände für die Garantie

    15. Fügen wir etwas Innenabstand hinzu

    16. Ein Testlauf mit etwas Innenabstand

    17. Fügen wir jetzt etwas Außenabstand hinzu

    18. Ein Testlauf mit dem Außenabstand

    19. Ein Hintergrundbild hinzufügen

    20. Das Hintergrundbild testen

    21. Das Hintergrundbild reparieren

    22. Noch ein Testlauf mit dem Hintergrundbild

    23. Wie fügt man Innenabstand nur auf der linken Seite hinzu?

    24. Haben wir es geschafft?

    25. Wie vergrößert man den Rand nur auf der rechten Seite?

    26. Eine Kurzeinführung in Rahmen

    27. Den Rahmen abrunden und abschließen

    28. Glückwunsch!

    29. Das Attribut id

    30. Aber wie verwende ich IDs in CSS?

    31. In der Bar eine ID verwenden

    32. Stylesheets ummodeln

    33. Mehrere Stylesheets verwenden

    34. Stylesheets – nicht mehr nur für Desktop-Browser ...

    35. Media-Queries unmittelbar ins CSS einbauen

  10. Chapter 10 Divs und Spans: Fortgeschrittene Webseiten bauen

    1. Ein genauer Blick auf das HTML für die Elixire

    2. Sehen wir uns an, wie man eine Seite in logische Abschnitte einteilen kann

    3. Inzwischen in der Bar ...

    4. Eine <div>-Testfahrt

    5. Einen Rahmen hinzufügen

    6. Ein Testlauf über den Rahmen

    7. Dem Elixir-Abschnitt ordentlich Style geben

    8. Der Angriffsplan

    9. An der Elixir-Breite arbeiten

    10. Die Breite testen

    11. Den Elixiren die Basis-Styles hinzufügen

    12. Die neuen Styles testen

    13. Wir haben es fast geschafft ...

    14. Was wir versuchen?

    15. Wir brauchen eine Möglichkeit, Nachfahren auszuwählen

    16. Die Farbe der Elixir-Überschriften ändern

    17. Ein kurzer Testlauf ...

    18. Die Zeilenhöhe reparieren

    19. Sehen Sie, was Sie erreicht haben ...

    20. Es ist Zeit für eine kleine Abkürzung

    21. Und es gibt noch mehr ...

    22. Und noch mehr Kurzformen

    23. In drei leichten Schritten <span>s hinzufügen

    24. Die Schritte eins und zwei: Die <span>s hinzufügen

    25. Schritt drei: Die <span>s stylen

    26. Die <span>s testen

    27. Das <a>-Element und seine gespaltene Persönlichkeit

    28. Wie stylt man Elemente auf Basis ihres Zustands?

    29. Pseudoklassen im Einsatz

    30. Die Links testen

    31. Wird es nicht langsam Zeit, dass wir über dieses »Cascading« reden?

    32. Die Kaskade

    33. Willkommen beim Spiel »Wie spezifisch bin ich?«

    34. Das Puzzle zusammensetzen

  11. Chapter 11 Layout und Positionierung: Elemente anordnen

    1. Haben Sie die Super-Kopfnuss gemacht?

    2. Nutze den Fluss, Luke

    3. Was ist mit den Inline-Elementen?

    4. Wie alles zusammenwirkt

    5. Noch eine Sache, die Sie über Textfluss und Kästen wissen sollten

    6. Wie man ein Element schweben lässt

    7. Hinter den Kulissen der Bar

    8. Die neue Sternback-Site

    9. Ein Blick auf das Markup

    10. Sehen wir uns jetzt die Styles an

    11. Bringen wir Sternback auf die nächste Stufe

    12. Die Seitenleiste unmittelbar unter die Kopfleiste verschieben

    13. Die Breite der Seitenleiste setzen und sie schweben lassen

    14. Der Sternback-Testlauf

    15. Das Zwei-Spalten-Problem lösen

    16. Den Außenabstand für den Hauptinhalt setzen

    17. Testlauf

    18. Oh, wir haben ein anderes Problem

    19. Zurück zu unserem Überlappungsproblem

    20. Testlauf

    21. Rechts fest, links locker

    22. Ein kurzer Testlauf

    23. Flexible und feste Designs

    24. Testlauf für das feste Layout

    25. Was ist der Zustand zwischen flexibel und fest? Jello natürlich!

    26. Jello-Testlauf

    27. Wie absolute Positionierung funktioniert

    28. Ein weiteres Beispiel für absolute Positionierung

    29. Absolute Positionierung verwenden

    30. Das Sternback-CSS ändern

    31. Jetzt überarbeiten wir das <div> für den Hauptinhalt

    32. Zeit für den absoluten Testlauf

    33. Wie die CSS-Tabellendarstellung funktioniert

    34. Wie man HTML und CSS für eine Tabellendarstellung erstellt

    35. Die HTML-Struktur für die Tabellendarstellung aufbauen

    36. Wie man mit CSS Tabellendarstellungen gestaltet

    37. Inzwischen bei Sternback ...

    38. Ein kurzer Testlauf ...

    39. Was ist das Problem mit dem Abstand?

    40. Den Abstand reparieren

    41. Ein letzter Testlauf unserer Tabellendarstellung

    42. Probleme mit der Kopfleiste

    43. Die Kopfleistenbilder mit float reparieren

    44. float-Test

    45. Den Preis einbauen

    46. Den Preis positionieren

    47. Wie feste Positionierung funktioniert

    48. Den Coupon auf die Seite bringen

    49. Den Coupon auf die Seite setzen

    50. Einen negativen Wert für das Property left verwenden

    51. Ein ziemlich positiver Testlauf des Negativen

  12. Chapter 12 HTML5-Markup: Modernes HTML

    1. Die HTML-Struktur überdenken

    2. Sternback modernisiert

    3. Das Sternback-HTML aktualisieren

    4. Das CSS an die neuen Elemente anpassen

    5. Das Blog der Sternback-Seite aufbauen

    6. Das CSS für die Blogseite einrichten

    7. Die Blogseite testen

    8. Wir müssen den Blogeinträgen noch ein Datum geben ...

    9. In das Blog das <time>-Element einbauen

    10. Wie man mehr <header>-Elemente einbaut

    11. Was das Problem mit den Kopfleisten ist

    12. Ein letzter Testlauf für die Kopfleisten

    13. Die Navigation fertigstellen

    14. Das CSS für die Navigation

    15. Wer braucht GPS? Die Navigation testen

    16. Ein <nav>-Element einbauen ...

    17. Das CSS spezifischer machen ...

    18. Ta-da! Schauen Sie sich diese Navigation an!

    19. Einen neuen Blogeintrag erstellen

    20. Und hier: das <video>-Element

    21. Licht, Kamera, Action ...

    22. Wie das <video>-Element funktioniert

    23. Die Videoattribute im Brennpunkt

    24. Was Sie über Videoformate wissen müssen

    25. Die Videoformat-Anwärter

    26. Mit den Formaten jonglieren ...

    27. Take 2: Licht, Kamera, Action ...

    28. Wie man die Videoformate noch genauer angeben kann

    29. Aktualisierung und Test

  13. Chapter 13 Tabellen und weitere Listen: Tabellarische Welt

    1. Wie macht man mit HTML Tabellen?

    2. Wie man mit HTML eine Tabelle erstellt

    3. Was der Browser erzeugt

    4. Eine Tabelle sezieren

    5. Eine Überschrift und eine Zusammenfassung hinzufügen

    6. Testlauf ... und über Styles nachdenken

    7. Bevor wir mit dem Styling beginnen, sollten wir die Tabelle in Tobis Seite bringen

    8. Stylen wir jetzt die Tabelle

    9. Ein Testlauf für die Tabellen-Styles

    10. Die Rahmen verschmelzen

    11. Wie wäre es mit etwas Farbe?

    12. Und wie wäre es mit etwas Farbe in den Tabellenzeilen?

    13. Haben wir eigentlich erwähnt, dass Tobi in Truth or Consequences, New Mexico, eine interessante Entdeckung gemacht hat?

    14. Ein neuer Blick auf Tobis Tabelle

    15. Wie man Zellen dazu bringt, mehrere Zeilen zu umspannen

    16. Ein Testlauf für die neue Tabelle

    17. Ärger im Paradies?

    18. Die verschachtelte Tabelle testen

    19. Das CSS für die eingebetteten Tabellenüberschriften überschreiben

    20. Tobis Site den letzten Schliff geben

    21. Der Liste ein paar Styles geben

    22. Und was ist, wenn man eine selbst definierte Markierung möchte?

  14. Chapter 14 HTML-Formulare: Interaktiv werden

    1. Wie Formulare funktionieren

    2. Wie Formulare im Browser funktionieren

    3. Was man in HTML-Formulare schreibt

    4. Was der Browser daraus macht

    5. Wie das form-Element funktioniert

    6. Was kann in einem Formular stehen?

    7. Was kann in einem Formular stehen? (Teil 2)

    8. Das Formular für die Kaffeemühle vorbereiten

    9. Bestimmen, was in das Formularelement kommt

    10. Das <form>-Element hinzufügen

    11. Wie die Namen von Formularelementen funktionieren

    12. Die <input>-Elemente ins HTML bringen

    13. Ein förmlicher Testlauf

    14. Dem Formular weitere Eingabeelemente hinzufügen

    15. Das <select>-Element hinzufügen

    16. Das <select>-Element testen

    17. Bieten Sie dem Kunden die Auswahl zwischen gemahlenem und ungemahlenem Kaffee

    18. Die Radio-Buttons drücken

    19. Andere Eingabetypen einsetzen

    20. Die Eingabefelder für Zahl und Datum ergänzen

    21. Die number- und date-<input>-Elemente testen

    22. Das Formular vervollständigen

    23. Die Checkboxen und das mehrzeilige Textfeld hinzufügen

    24. Der endgültige Testlauf

    25. GET in Action

    26. Eine HTML-Struktur für die Tabellendarstellung der Formularelemente

    27. Das Formular mit CSS stylen

    28. Ein Wort zur Barrierefreiheit

    29. Was sonst könnte man noch in ein Formular stecken?

    30. Noch mehr Elemente für Formulare

  1. Appendix Was übrig bleibt: Die Top Ten der Themen, die wir nicht behandelt haben

    1. 1. Mehr CSS-Selektoren

    2. 2. Herstellerspezifische CSS-Properties

    3. 3. CSS-Transformationen und -Übergänge

    4. 4. Interaktivität

    5. 5. HTML5-APIs und Webapps

    6. 6. Mehr zu Webfonts

    7. 7. Werkzeuge zur Erstellung von Webseiten

    8. 8. XHTML5

    9. 9. Serverseitiges Scripting

    10. 10. Audio