Book description
Mit HTML und CSS lassen sich geniale Webseiten erstellen: modern, interaktiv und voller Ideen. Warum nur sind die meisten Bücher, die sich mit den beiden Webtechnologien beschäftigen, so staubtrocken und verschnarcht?
Dieses Buch ist der lebendige Beweis dafür, dass auch technische Themen kurzweilig sein können. Unter Einsatz von vielen Übungen, die zum Mitmachen animieren, lernen Sie die Grundlagen von HTML und CSS kennen. Und ehe Sie es sich versehen, sind Sie in der Lage, eine Website für verschiedene Bildschirmgrößen (inkl. Smartphones und Tablets) zu entwerfen, sie zu gestalten, mit Formularen auszustatten u.v.m.
Die 2. Auflage dieses Bestsellers wurde aktualisiert und behandelt nun auch HTML5 und CSS3.
Publisher resources
Table of contents
- HTML und CSS von Kopf bis Fuß
- Widmung
-
Wie man dieses Buch benutzt: Einführung
- Für wen ist dieses Buch?
- Wir wissen, was Sie gerade denken
- Und wir wissen, was Ihr Gehirn gerade denkt.
- Metakognition: Nachdenken übers Denken
- Das haben WIR getan
- Und das können SIE tun, um sich Ihr Gehirn untertan zu machen
- Lies mich
- Fachgutachter (1. Auflage)
- Fachgutacher (2. Auflage)
- Danksagungen (2. Auflage)
-
1. HTML kennenlernen: Die Websprache
- The Web Video killed the radio star
- Was macht der Webserver?
- Was macht der Webbrowser?
- Was Sie schreiben (HTML) ...
- Was der Browser darstellt ...
- Ihr großer Durchbruch bei Sternback-Kaffee
- Die Sternback-Webseite
- Eine HTML-Datei erstellen (Mac)
- Eine HTML-Datei erstellen (Windows)
- In der Zwischenzeit bei Sternback-Kaffee ...
- Ihre Arbeit speichern
- Ihre Webseite im Browser öffnen
- Ein erster Probelauf für Ihre Seite ...
- Sind wir jetzt fertig?
- Noch ein Testlauf ...
- Tags seziert ...
- Lernen Sie das Style-Element kennen
- Ein bisschen Stil für Sternback ...
- Surfen mit Stil ...
- 2. Weiter mit Hypertext: Lernen Sie das »HT« in HTML kennen
-
3. Bausteine: Webseiten bauen
- Vom Tagebuch auf die Webseite mit 16 km/h
- Der grobe Entwurf
- Von der Skizze zur Gliederung
- Von der Gliederung zur Webseite
- Ein Testlauf mit Tobis Seite
- Neue Elemente hinzufügen
- Lernen Sie das <q>-Element kennen
- ... und nun ... der Testlauf ...
- Laaaaange Zitate
- Ein <blockquote> einbauen
- Die volle Wahrheit über das Geheimnis des <q>- und des <blockquote>-Elements
- In der Zwischenzeit auf Tobis Website ...
- Natürlich könnten Sie mit dem <p>-Element eine Liste erstellen ...
- HTML-Listen in zwei einfachen Schritten
- Eine Probefahrt durch die Städte
- »Verschachteln« heißt Elemente ineinander platzieren
- Die Verschachtelung mit einem Bild veranschaulichen
- Sicherstellen, dass die Tags übereinstimmen
-
4. Online gehen: Reise nach Webville
- Sternback (oder sich selbst) ins Web bringen
- Einen Provider finden
- Hallo, mein Domain Name ist ...
- Wie bekomme ich einen Domainnamen?
- Endlich einziehen
- Die Dateien in das Root-Verzeichnis kopieren
- Zwei randvolle Seiten über FTP
- Zurück zur Tagesordnung
- Hauptstraße, URL
- Was ist HTTP?
- Was ist ein absoluter Pfad?
- Wie Standard-Seiten funktionieren
- Wie verlinken wir mit anderen Websites?
- Auf das Koffeingeflüster verlinken
- Und der Testlauf ...
- Letzter Schliff für Webseiten
- Probelauf mit title ...
- Auf einen Abschnitt verlinken
- Mit dem Attribut id ein Ziel für <a> erstellen
- Mit Elementen mit ids verlinken
- In ein neues Fenster verlinken
- Ein neues Fenster mit dem target-Attribut öffnen
-
5. Bilder in Webseiten einfügen: Lernen Sie die Medien kennen
- Wie der Browser mit Bildern umgeht
- Wie Bilder funktionieren
- <img>: Es gibt nicht nur relative Links
- Bieten Sie eine Alternative
- Die Abmessungen von Bildern
- Die ultimative Fansite: myPod
- Sehen Sie sich »index.html« im Ordner myPod an
- Oh! Das Bild ist viel zu groß!
- Das Bild an die Größe des Browsers anpassen
- Das Bild öffnen
- Die Bildgröße verändern
- Die Bildgröße verändern, Teil 2 ...
- Sie haben die Größe geändert, also speichern Sie jetzt ab
- Bilder speichern
- Das HTML für myPod anpassen
- Und nun der Testlauf ...
- Weitere Fotos für myPod
- Ein weiterer Testlauf mit myPod
- Die Website für Thumbnails überarbeiten
- Thumbnails erstellen
- Das HTML für Thumbnails überarbeiten
- Noch ein Testlauf mit myPod
- Wie aus Thumbnails Links werden
- Seiten für die einzelnen Fotos erstellen
- Wie mache ich Links aus den Bildern?
- Die Bildlinks in »index.html« einfügen
- Das myPod-Logo öffnen
- Welches Format verwenden wir?
- Transparent oder nicht transparent? Das ist hier die Frage!
- Das transparente PNG speichern
- Moment mal, welche Hintergrundfarbe hat dann die Webseite?
- Die Hintergrundfarbe festlegen
- Die Hintergrundfarbe festlegen, Teil 2
- Überprüfen Sie das Logo mit der Hintergrundfarbe
- Speichern Sie das Logo
- Das Logo in die myPod-Webseite einfügen
- Und nun der letzte Testlauf
-
6. Standards und was dazugehört: Seriöses HTML
- Eine kurze Geschichte von HTML
- Der neue und verbesserte HTML5-Doctype
- HTML, der neue »lebende Standard«
- Die Dokumenttyp-Definition einsetzen
- Der Doctype-Testlauf
- Gestatten: der W3C-Validierer
- Die KopfüBar validieren
- Huston, wir haben ein Problem ...
- Den Fehler beheben
- Fast geschafft ...
- Mit einem <meta>-Tag die Zeichenkodierung angeben
- Wie Sie viele Browser und den Validierer mit einem <meta>-Tag glücklich machen ...
- Aller guten Dinge sind drei ...
- Aufruf an alle HTML-Profis: Holt euch das Handbuch ...
-
7. Erste Schritte mit CSS: Etwas Style hinzufügen
- Sie sind nicht mehr im Westerwald
- Bei Webvilles »Wohnungstausch« aufgeschnappt
- CSS mit HTML verwenden
- Sie möchten noch mehr Styles?
- CSS in HTML einbetten
- Der Bar einen Style verpassen
- Mit Style unterwegs: der Testlauf
- Die Überschriften stylen
- Testlauf ...
- Die Begrüßung unterstreichen
- Wir haben das richtige Mittel: einfach eine zweite Regel nur für das <h1>-Element angeben
- Wie Selektoren wirklich arbeiten
- Selektoren sichtbar machen
- Den KopfüBar-Style in die Elixir- und Wegweiser-Seiten hineinbekommen
- Die Datei »bar.css« erstellen
- Aus »bar.html« auf das externe CSS verweisen
- Aus »elixir.html« und »wegbeschreibung.html« auf das externe Stylesheet verweisen
- Testlauf für die gesamte KopfüBar-Site
- Es ist Zeit, über Vererbung zu sprechen
- Was wäre, wenn wir die Schrift im Vererbungsbaum nach oben verschieben?
- Testen Sie Ihr neues CSS
- Vererbung überschreiben
- Testlauf
- »elixir.html« eine Klasse hinzufügen
- Einen Selektor für die Klasse erstellen
- Ein grüner Testlauf
- Die nächsten Schritte mit Klassen ...
- Der Welt schnellste & kürzeste Anleitung zur Anwendung von Styles
- Wer erbt?
- Sicherstellen, dass das Bar-CSS gültig ist
-
8. Mit Schriften und Farbe stylen: Erweitern Sie Ihr Vokabular
- Text und Schriften aus der Vogelperspektive
- Was ist überhaupt eine Schriftfamilie?
- Schriftfamilien mit CSS angeben
- Wie die font-family-Angaben funktionieren
- Tobis Tagebuch entstauben
- Tobi eine neue font-family verschaffen
- Tobis neue Schriften testen
- Wie gehe ich damit um, dass jeder andere Schriften auf seinem Rechner hat?
- Wie Webfonts funktionieren
- Wie Sie Ihrer Seite einen Webfont hinzufügen ...
- Den Webfont in Tobis Tagebuch testen
- Schriftgrößen anpassen
- Wie also sollte ich meine Schriftgrößen angeben?
- Ändern Sie jetzt die Schriftgrößen in Tobis Webseite
- Die Schriftgrößen testen
- Die Gewicht einer Schrift ändern
- Die normalen Überschriften testen
- Ihren Schriften etwas Schnitt geben
- Tobis Zitate mit kursiver Schrift stylen
- Wie Webfarben funktionieren
- Wie Sie Webfarben angeben? Zählen wir mal die Anzahl der Möglichkeiten auf ...
- Hexcodes im Schnelldurchgang
- Wie man Webfarben findet
- Zurück zu Tobis Seite ... Wir machen die Überschriften orange und fügen auch eine Unterstreichung hinzu
- Tobis orangefarbene Überschriften testen
- Alles, was Sie jemals über Textdekorationen wissen wollten, auf weniger als einer Seite
- Die Unterstreichung entfernen ...
-
9. Das Boxmodell: Mit Elementen auf Tuchfühlung
- Die Bar wird renoviert
- Die neue, verbesserte und mega-gestylte Bar
- Die neue Bar einrichten
- Mit ein paar einfachen Verbesserungen beginnen
- Ein sehr kurzer Testlauf
- Eine weitere Anpassung
- Sehen Sie sich die neue Zeilenhöhe an
- Vorbereitung auf einige größere Umbauten
- Ein genauerer Blick auf das Boxmodell
- Was Sie mit Boxen machen können
- Inzwischen in der Bar ...
- Den Garantie-Style aufbauen
- Ein Testlauf mit dem Absatzrahmen
- Innenabstände, Rahmen und Außenabstände für die Garantie
- Fügen wir etwas Innenabstand hinzu
- Ein Testlauf mit etwas Innenabstand
- Fügen wir jetzt etwas Außenabstand hinzu
- Ein Testlauf mit dem Außenabstand
- Ein Hintergrundbild hinzufügen
- Das Hintergrundbild testen
- Das Hintergrundbild reparieren
- Noch ein Testlauf mit dem Hintergrundbild
- Wie fügt man Innenabstand nur auf der linken Seite hinzu?
- Haben wir es geschafft?
- Wie vergrößert man den Rand nur auf der rechten Seite?
- Eine Kurzeinführung in Rahmen
- Den Rahmen abrunden und abschließen
- Glückwunsch!
- Das Attribut id
- Aber wie verwende ich IDs in CSS?
- In der Bar eine ID verwenden
- Stylesheets ummodeln
- Mehrere Stylesheets verwenden
- Stylesheets – nicht mehr nur für Desktop-Browser ...
- Media-Queries unmittelbar ins CSS einbauen
-
10. Divs und Spans: Fortgeschrittene Webseiten bauen
- Ein genauer Blick auf das HTML für die Elixire
- Sehen wir uns an, wie man eine Seite in logische Abschnitte einteilen kann
- Inzwischen in der Bar ...
- Eine <div>-Testfahrt
- Einen Rahmen hinzufügen
- Ein Testlauf über den Rahmen
- Dem Elixir-Abschnitt ordentlich Style geben
- Der Angriffsplan
- An der Elixir-Breite arbeiten
- Die Breite testen
- Den Elixiren die Basis-Styles hinzufügen
- Die neuen Styles testen
- Wir haben es fast geschafft ...
- Was wir versuchen?
- Wir brauchen eine Möglichkeit, Nachfahren auszuwählen
- Die Farbe der Elixir-Überschriften ändern
- Ein kurzer Testlauf ...
- Die Zeilenhöhe reparieren
- Sehen Sie, was Sie erreicht haben ...
- Es ist Zeit für eine kleine Abkürzung
- Und es gibt noch mehr ...
- Und noch mehr Kurzformen
- In drei leichten Schritten <span>s hinzufügen
- Die Schritte eins und zwei: Die <span>s hinzufügen
- Schritt drei: Die <span>s stylen
- Die <span>s testen
- Das <a>-Element und seine gespaltene Persönlichkeit
- Wie stylt man Elemente auf Basis ihres Zustands?
- Pseudoklassen im Einsatz
- Die Links testen
- Wird es nicht langsam Zeit, dass wir über dieses »Cascading« reden?
- Die Kaskade
- Willkommen beim Spiel »Wie spezifisch bin ich?«
- Das Puzzle zusammensetzen
-
11. Layout und Positionierung: Elemente anordnen
- Haben Sie die Super-Kopfnuss gemacht?
- Nutze den Fluss, Luke
- Was ist mit den Inline-Elementen?
- Wie alles zusammenwirkt
- Noch eine Sache, die Sie über Textfluss und Kästen wissen sollten
- Wie man ein Element schweben lässt
- Hinter den Kulissen der Bar
- Die neue Sternback-Site
- Ein Blick auf das Markup
- Sehen wir uns jetzt die Styles an
- Bringen wir Sternback auf die nächste Stufe
- Die Seitenleiste unmittelbar unter die Kopfleiste verschieben
- Die Breite der Seitenleiste setzen und sie schweben lassen
- Der Sternback-Testlauf
- Das Zwei-Spalten-Problem lösen
- Den Außenabstand für den Hauptinhalt setzen
- Testlauf
- Oh, wir haben ein anderes Problem
- Zurück zu unserem Überlappungsproblem
- Testlauf
- Rechts fest, links locker
- Ein kurzer Testlauf
- Flexible und feste Designs
- Testlauf für das feste Layout
- Was ist der Zustand zwischen flexibel und fest? Jello natürlich!
- Jello-Testlauf
- Wie absolute Positionierung funktioniert
- Ein weiteres Beispiel für absolute Positionierung
- Absolute Positionierung verwenden
- Das Sternback-CSS ändern
- Jetzt überarbeiten wir das <div> für den Hauptinhalt
- Zeit für den absoluten Testlauf
- Wie die CSS-Tabellendarstellung funktioniert
- Wie man HTML und CSS für eine Tabellendarstellung erstellt
- Die HTML-Struktur für die Tabellendarstellung aufbauen
- Wie man mit CSS Tabellendarstellungen gestaltet
- Inzwischen bei Sternback ...
- Ein kurzer Testlauf ...
- Was ist das Problem mit dem Abstand?
- Den Abstand reparieren
- Ein letzter Testlauf unserer Tabellendarstellung
- Probleme mit der Kopfleiste
- Die Kopfleistenbilder mit float reparieren
- float-Test
- Den Preis einbauen
- Den Preis positionieren
- Wie feste Positionierung funktioniert
- Den Coupon auf die Seite bringen
- Den Coupon auf die Seite setzen
- Einen negativen Wert für das Property left verwenden
- Ein ziemlich positiver Testlauf des Negativen
-
12. HTML5-Markup: Modernes HTML
- Die HTML-Struktur überdenken
- Sternback modernisiert
- Das Sternback-HTML aktualisieren
- Das CSS an die neuen Elemente anpassen
- Das Blog der Sternback-Seite aufbauen
- Das CSS für die Blogseite einrichten
- Die Blogseite testen
- Wir müssen den Blogeinträgen noch ein Datum geben ...
- In das Blog das <time>-Element einbauen
- Wie man mehr <header>-Elemente einbaut
- Was das Problem mit den Kopfleisten ist
- Ein letzter Testlauf für die Kopfleisten
- Die Navigation fertigstellen
- Das CSS für die Navigation
- Wer braucht GPS? Die Navigation testen
- Ein <nav>-Element einbauen ...
- Das CSS spezifischer machen ...
- Ta-da! Schauen Sie sich diese Navigation an!
- Einen neuen Blogeintrag erstellen
- Und hier: das <video>-Element
- Licht, Kamera, Action ...
- Wie das <video>-Element funktioniert
- Die Videoattribute im Brennpunkt
- Was Sie über Videoformate wissen müssen
- Die Videoformat-Anwärter
- Mit den Formaten jonglieren ...
- Take 2: Licht, Kamera, Action ...
- Wie man die Videoformate noch genauer angeben kann
- Aktualisierung und Test
-
13. Tabellen und weitere Listen: Tabellarische Welt
- Wie macht man mit HTML Tabellen?
- Wie man mit HTML eine Tabelle erstellt
- Was der Browser erzeugt
- Eine Tabelle sezieren
- Eine Überschrift und eine Zusammenfassung hinzufügen
- Testlauf ... und über Styles nachdenken
- Bevor wir mit dem Styling beginnen, sollten wir die Tabelle in Tobis Seite bringen
- Stylen wir jetzt die Tabelle
- Ein Testlauf für die Tabellen-Styles
- Die Rahmen verschmelzen
- Wie wäre es mit etwas Farbe?
- Und wie wäre es mit etwas Farbe in den Tabellenzeilen?
- Haben wir eigentlich erwähnt, dass Tobi in Truth or Consequences, New Mexico, eine interessante Entdeckung gemacht hat?
- Ein neuer Blick auf Tobis Tabelle
- Wie man Zellen dazu bringt, mehrere Zeilen zu umspannen
- Ein Testlauf für die neue Tabelle
- Ärger im Paradies?
- Die verschachtelte Tabelle testen
- Das CSS für die eingebetteten Tabellenüberschriften überschreiben
- Tobis Site den letzten Schliff geben
- Der Liste ein paar Styles geben
- Und was ist, wenn man eine selbst definierte Markierung möchte?
-
14. HTML-Formulare: Interaktiv werden
- Wie Formulare funktionieren
- Wie Formulare im Browser funktionieren
- Was man in HTML-Formulare schreibt
- Was der Browser daraus macht
- Wie das form-Element funktioniert
- Was kann in einem Formular stehen?
- Was kann in einem Formular stehen? (Teil 2)
- Das Formular für die Kaffeemühle vorbereiten
- Bestimmen, was in das Formularelement kommt
- Das <form>-Element hinzufügen
- Wie die Namen von Formularelementen funktionieren
- Die <input>-Elemente ins HTML bringen
- Ein förmlicher Testlauf
- Dem Formular weitere Eingabeelemente hinzufügen
- Das <select>-Element hinzufügen
- Das <select>-Element testen
- Bieten Sie dem Kunden die Auswahl zwischen gemahlenem und ungemahlenem Kaffee
- Die Radio-Buttons drücken
- Andere Eingabetypen einsetzen
- Die Eingabefelder für Zahl und Datum ergänzen
- Die number- und date-<input>-Elemente testen
- Das Formular vervollständigen
- Die Checkboxen und das mehrzeilige Textfeld hinzufügen
- Der endgültige Testlauf
- GET in Action
- Eine HTML-Struktur für die Tabellendarstellung der Formularelemente
- Das Formular mit CSS stylen
- Ein Wort zur Barrierefreiheit
- Was sonst könnte man noch in ein Formular stecken?
- Noch mehr Elemente für Formulare
- A. Was übrig bleibt: Die Top Ten der Themen, die wir nicht behandelt haben
- Stichwortverzeichnis
- Impressum
Product information
- Title: HTML & CSS von Kopf bis Fuß, 2nd Edition
- Author(s):
- Release date: January 2013
- Publisher(s): O'Reilly Verlag
- ISBN: 97833868999341
You might also like
video
React - The Complete Guide (Includes Hooks, React Router, and Redux) - Second Edition
**This course is now updated for the latest version of React—React 18** React.js is the most …
video
Angular - The Complete Guide [2023 Edition]
Learn all the fundamentals you need to know in order to get started developing Angular applications …
certs-practice-exam
AWS Certified Cloud Practitioner (Pearson Practice Test)
Prepare for AWS Cloud Practitioner Exam with four practice exams that include 250+ review questions. Amazon …
book
XML -- Technologien, Grundlagen, Validierung, Auswertung
Mit XML-Technologien Daten erstellen, ausgeben und analysieren Elementare Grundlagen und viele Praxistipps zu XML, XML-Schema (1.0, …