Webseiten-Layout mit CSS: Der perfekte Einstieg in Cascading Style Sheets
Von Clemens Gull
()
Über dieses E-Book
Mehr von Clemens Gull lesen
PHP für WordPress: Themes und Templates selbst entwickeln Bewertung: 0 von 5 Sternen0 BewertungenWordPress-Tricks und -Tweaks: Bohren Sie WordPress mit selbst programmierten Funktionen auf! Bewertung: 0 von 5 Sternen0 BewertungenAusbildungspfade im Web 2.0: Eine praktische Umsetzung mit Mitteln der Kollektiven Intelligenz Bewertung: 0 von 5 Sternen0 BewertungenWeb-Applikationen entwickeln mit NoSQL: Das Buch für Datenbank-Einsteiger und Profis! Bewertung: 0 von 5 Sternen0 BewertungenBigData mit JavaScript visualisieren: D3.js für die Darstellung großer Datenmengen einsetzen Bewertung: 0 von 5 Sternen0 Bewertungen
Ähnlich wie Webseiten-Layout mit CSS
Ähnliche E-Books
CSS3: Die neuen Features für fortgeschrittene Webdesigner Bewertung: 0 von 5 Sternen0 BewertungenHTML5 kurz & gut Bewertung: 0 von 5 Sternen0 BewertungenHTML5, JavaScript und jQuery: Der Crashkurs für Softwareentwickler Bewertung: 2 von 5 Sternen2/5Datenbankentwicklung lernen mit SQL Server 2016: Der praxisorientierte Grundkurs Bewertung: 0 von 5 Sternen0 BewertungenC++17: Praxiswissen zum neuen Standard. Von C++11 bis 17 Bewertung: 0 von 5 Sternen0 BewertungenC# 6.0 – kurz & gut Bewertung: 5 von 5 Sternen5/5HTML5 & CSS3 (Prags) Bewertung: 0 von 5 Sternen0 BewertungenSharePoint Kompendium - Bd. 16 Bewertung: 0 von 5 Sternen0 BewertungenAndroid mit Kotlin – kurz & gut: Inklusive Android 8 und Android Studio 3.0 Bewertung: 0 von 5 Sternen0 BewertungenModerne Datenzugriffslösungen mit Entity Framework 6 Bewertung: 0 von 5 Sternen0 BewertungenC# 10 – kurz & gut Bewertung: 0 von 5 Sternen0 BewertungenPrinzipien des Softwaredesigns: Entwurfsstrategien für komplexe Systeme Bewertung: 0 von 5 Sternen0 BewertungenSemantic Web: schnell + kompakt Bewertung: 0 von 5 Sternen0 Bewertungen.NET-Praxis: Tipps und Tricks zu .NET und Visual Studio Bewertung: 0 von 5 Sternen0 BewertungenSQL-Abfragen optimieren: Was Entwickler über Performance wissen müssen Bewertung: 0 von 5 Sternen0 BewertungenEinführung in SQL: Daten erzeugen, bearbeiten und abfragen Bewertung: 0 von 5 Sternen0 BewertungenJavaScript und Ajax: Das Praxisbuch für Web-Entwickler Bewertung: 0 von 5 Sternen0 BewertungenJavaScript effektiv: 68 Dinge, die ein guter JavaScript-Entwickler wissen sollte Bewertung: 0 von 5 Sternen0 BewertungenKompaktkurs C# 7 Bewertung: 0 von 5 Sternen0 BewertungenBootstrap kurz & gut Bewertung: 0 von 5 Sternen0 BewertungenPHP 7 und MySQL: Ihr praktischer Einstieg in die Programmierung dynamischer Websites Bewertung: 0 von 5 Sternen0 BewertungenC++ – kurz & gut: Aktuell zu C++17 Bewertung: 4 von 5 Sternen4/5Microsoft Word 2016 (Microsoft Press): Einfache Anleitungen für wichtige Aufgaben Bewertung: 0 von 5 Sternen0 BewertungenSo findest du den Einstieg in WordPress: Die technischen Grundlagen zu Installation, Konfiguration, Optimierung, Sicherheit, SEO Bewertung: 0 von 5 Sternen0 BewertungenAndroid-Programmierung kurz & gut Bewertung: 0 von 5 Sternen0 BewertungenPHP for Office: Automatisierte Dokumentenerstellung mit PHPExcel, PHPWord und PHPPowerPoint Bewertung: 1 von 5 Sternen1/5Windows PowerShell: Grundlagen & Scripting-Praxis für Einsteiger – Für alle Versionen Bewertung: 0 von 5 Sternen0 BewertungenEinstieg in HTML und Javascript: Mit vielen Beispielen und einfachen Browsergames Bewertung: 0 von 5 Sternen0 BewertungenProgrammieren lernen mit Python 3: Schnelleinstieg für Beginner Bewertung: 0 von 5 Sternen0 BewertungenWordPress-Themes entwickeln: HTML5, CSS3, JavaScript und PHP: Praxiswissen und Quellcodes zum Entwurf von WordPress-Themes Bewertung: 0 von 5 Sternen0 Bewertungen
Internet & Web für Sie
Das kleine Hypnose Einmaleins - Alles was Sie schon immer über die Hypnose wissen wollten von Ewald Pipper vom Hypnoseinstitut Bewertung: 0 von 5 Sternen0 BewertungenSEO & WordPress Schnelleinstieg: Plugins, Keywords-entscheidend für die SEO Optimierung Bewertung: 0 von 5 Sternen0 BewertungenWas kommt. Was geht. Was bleibt.: Kluge Texte über die wichtigsten Fragen unserer Zeit Bewertung: 0 von 5 Sternen0 BewertungenPraxisbuch WordPress Themes Bewertung: 0 von 5 Sternen0 BewertungenWordPress-Themes entwickeln: HTML5, CSS3, JavaScript und PHP: Praxiswissen und Quellcodes zum Entwurf von WordPress-Themes Bewertung: 0 von 5 Sternen0 BewertungenChatGPT Plus: Durchstarten in eine neue Welt: Entdecken Sie Künstliche Intelligenz mit ChatGPT Plus und GPT-4 Bewertung: 0 von 5 Sternen0 BewertungenSchnelleinstieg WordPress SEO: Einstellungen, Keywords, Plug-ins und Strategien für optimales SEO Bewertung: 0 von 5 Sternen0 BewertungenProgrammieren lernen mit Python 3: Schnelleinstieg für Beginner Bewertung: 0 von 5 Sternen0 BewertungenSo findest du den Einstieg in WordPress: Die technischen Grundlagen zu Installation, Konfiguration, Optimierung, Sicherheit, SEO Bewertung: 0 von 5 Sternen0 BewertungenMarketing für Selbständige: Schwerpunkt Social Media Bewertung: 0 von 5 Sternen0 BewertungenDas Prezi-Buch für spannende Präsentationen Bewertung: 0 von 5 Sternen0 BewertungenSEO mit Google Search Console: Webseiten mit kostenlosen Tools optimieren Bewertung: 0 von 5 Sternen0 BewertungenDer Content Faktor: Schreiben Sie Texte, die gefunden und gelesen werden Bewertung: 0 von 5 Sternen0 BewertungenEinfach Verschlüsseln Bewertung: 0 von 5 Sternen0 BewertungenUX-Missverständnisse: Was sich User wirklich wünschen Bewertung: 0 von 5 Sternen0 BewertungenWir machen dieses Social Media Bewertung: 0 von 5 Sternen0 BewertungenBug Bounty Hunting mit Kali-Linux oder Parrot Security OS: Hacking als Hautberuf oder Nebenjob Bewertung: 3 von 5 Sternen3/5Android Security: Von Fake-Apps, Trojanern und Spy Phones Bewertung: 0 von 5 Sternen0 BewertungenReact lernen und verstehen Bewertung: 0 von 5 Sternen0 BewertungenPR im Social Web: Das Handbuch für Kommunikationsprofis Bewertung: 0 von 5 Sternen0 BewertungenDas Facebook-Marketing-Buch Bewertung: 4 von 5 Sternen4/555 Artikelideen für Ihr Blog (Tipps für attraktive Blogposts und erfolgreiches Bloggen) Bewertung: 0 von 5 Sternen0 BewertungenEinstieg in WordPress Bewertung: 0 von 5 Sternen0 BewertungenNext Level JavaScript: Schlagworte Bewertung: 0 von 5 Sternen0 BewertungenEinführung ins Darknet: Darknet ABC Bewertung: 0 von 5 Sternen0 Bewertungen30 Minuten Metaverse Bewertung: 0 von 5 Sternen0 BewertungenopenHAB: Automatisiertes Heim - Teil 1 Bewertung: 4 von 5 Sternen4/5HTML5 & CSS3 (Prags) Bewertung: 0 von 5 Sternen0 BewertungenBlockchain - Und Wie Sie Funktioniert: Der Endgültige Leitfaden Für Einsteiger Über Blockchain Wallet, Mining, Bitcoin, Ethereum, Litecoin Bewertung: 0 von 5 Sternen0 Bewertungen
Rezensionen für Webseiten-Layout mit CSS
0 Bewertungen0 Rezensionen
Buchvorschau
Webseiten-Layout mit CSS - Clemens Gull
Stichwortverzeichnis
Vorwort
Worum geht es in diesem Buch?
Dieses Buch will die Grundlagen des Webdesigns mit CSS vermitteln. Es ist jedoch kein klassisches Lehrbuch, von denen es bereits Dutzende gibt. Es will vielmehr ein »Mitmach-Buch« sein. Es zeigt zwar fertige Lösungen auf, bei denen es sich um in der Praxis oft benötigte (Teil)Layouts handelt. Rein theoretisch können sie direkt in Ihre Webprojekte übernommen werden. Aber eigentlich sind es Startpunkte, die Ihnen ein Gefühl für HTML und CSS geben sollen. Sie erklären den theoretischen Hintergrund und zeigen den Einsatz in der Praxis. Aber trotz allem werden sie erst durch kreative Weiterverwendung zum Leben erweckt.
Eine Warnung: Wer eine Aufzählung aller CSS-Eigenschaften und der zugrunde liegenden HTML-Technik mit allen möglichen Einstellungen und Varianten erwartet, wird enttäuscht sein. Ich schreibe hier über den praktischen Einsatz von HTML und CSS. Daher verwende ich auch nicht alle Tags oder CSS-Eigenschaften, sondern beschränke mich auf häufig benutzte Tags und Befehle.
Im Web treffen wir auf viele verschiedene Betriebssysteme und Browser in unterschiedlichen Versionen. Ideal wäre es, wenn alle diese Kombinationen unser Design identisch darstellen würden. Aber leider ist dies ganz und gar nicht so. Daher müssen wir versuchen, die einzelnen Browser so zu unterstützen (mit der Art unserer Codierung), dass sie eine (fast) gleiche Darstellung der Website erzeugen. Leider würde die Unterstützung der gesamten Palette verfügbarer Browser einen nicht zu vertretenden Aufwand im Design erzeugen. Daher beschränken wir uns auf eine Auswahl derjenigen Browser, die derzeit hauptsächlich verwendet werden.
Dazu wurden Erhebungen namhafter Webanalysten[1] zu Rate gezogen. Davon ausgehend beschränken wir uns auf die Browser mit mehr als 5 % Marktanteil und halten so den Aufwand für die Codierung in einem vertretbaren Rahmen. In diesem Buch konzentrieren wir uns auf die Versionen 7 und 8 des Internet Explorers, auf die Versionen 3.0 bis 3.6 von Firefox und auf den Safari 4.0. Die Versionen 6 und älter des Internet Explorer lassen wir außen vor. Da Websites zum Teil mit sehr hohem Aufwand an diese Browservarianten angepasst werden mussten, sollten wir nicht allzu traurig darüber sein, dass der IE 6 und älter bei den Anwendern langsam ausstirbt. Sofern es gravierende Abweichungen in der Darstellung zwischen den einzelnen Browsern gibt, werde ich darauf hinweisen und einen Trick[2] zur korrekten Darstellung anbieten.
Das Kapitel 1 bietet einen ersten Überblick. Wir lernen einige Grundregeln für Webdesign kennen und schließen damit einige häufig auftretenden Fehlerquellen im technischen Bereich des Designs aus.
Das Kapitel 2 beschäftigt sich mit den HTML-Elementen. Wir lernen die wichtigsten Tags und ihre Verwendung kennen. Diese werden wir in den folgenden Kapiteln einsetzen und formatieren. Dieses Kapitel können Sie als Nachschlagewerk für die späteren Formatierungen benutzen. Da es sich bei den Beispielen in diesem Kapitel noch nicht um schwierigere Probleme handelt, benötigen wir für die Arbeit nur einen einfachen Texteditor. Eine Entwicklungsumgebung brauchen wir erst später.
In Kapitel 3 installieren wir unsere Entwicklungsumgebung. Diese werden wir hier konfigurieren und im folgenden Abschnitt intensiv benutzen. Zusätzlich werden wir für den Firefox-Browser das eine oder andere Add-On installieren, damit wir uns bei der Arbeit leichter tun.
Das Kapitel 4 behandelt den großen Komplex des Designs mit Cascading Style Sheets. Hier werden wir eine Fülle von Formatierungsmöglichkeiten kennenlernen und in einzelnen Beispielen umsetzen.
Im Anhang finden Sie weiterführende Informationen und auch den gesamten Quelltext aller im Buch vorgestellten Beispiele.
Herunterladen der Beispielcodes zum Buch
Wenn Sie die Franzis-Website unter der Adresse http://www.buch.cd besuchen und dort die letzten fünf Ziffern der ISBN dieses Buches samt Bindestrich eingeben, können Sie alle Beispielcodes und sonstigen Ressourcen zu diesem Buch herunterladen. Die verfügbaren Dateien werden nach der erfolgreichen Anmeldung angezeigt.
Berichtigungen und Feedback
Obwohl alle Beteiligten mit größter Sorgfalt vorgehen, um die Richtigkeit der Inhalte sicherzustellen, passieren mitunter Fehler. Wenn Sie einen Fehler in diesem Buch entdecken, ob im Text oder im Quellcode, bin ich für eine Mitteilung sehr dankbar. So können Sie anderen Lesern Ärger ersparen und mithelfen, die nachfolgende Version des Buches zu verbessern. Wenn Sie irgendeinen Druckfehler finden, teilen Sie ihn mir bitte per E-Mail an buch@guru-20.info mit. Aktualisierungen sowie Verbesserungen des Buches werde ich auf meinem Blog (http://www.guru-20.info) veröffentlichen.
Ich würde mich über Reaktionen und Anregungen sehr freuen. Darüber hinaus sind Lob und Kritik sehr willkommen. Sie erreichen mich unter folgender Adresse: gull@guru-20.info.
Herzlichen Dank vorab!
Ihr
Clemens Gull
[1]
Beispielsweise: http://www.webmasterpro.de/portal/webanalyse-aktuell.html
[2]
einen sogenannten Hack
1 Do’s & Dont’s im Webdesign
Im Webdesign gibt es einiges, was wir zwar tun könnten, aber möglichst vermeiden sollen. Wenn wir uns an diese ungeschriebenen Gesetze halten, ersparen wir uns einige Probleme bei unseren Websites. Beginnen wir mit einigen formalen Vorgaben:
Datei- und Verzeichnisnamen sollten:
keine Leerzeichen enthalten
nur aus Buchstaben (a – z und A – Z) und Ziffern bestehen
Unterstriche (_) sind erlaubt
Groß-/Kleinschreibung ist wichtig
Datei- und Verzeichnisnamen sollten »klingende« Namen verwenden.
Da wir das Betriebssystem eines Webservers nicht vorab kennen, sollten wir uns auf den kleinsten gemeinsamen Nenner bei den Namen einigen. Denn ein Unix-System speichert die Zeichen anders als ein Windows-System. So unterscheiden UNIX-Systeme bei der Groß-/Kleinschreibung und Windows-Systeme nicht. Allein dadurch können uns einige Probleme entstehen, wenn wir uns nicht an die Regeln halten.
Struktur
Dateien sollten immer logisch gruppiert werden:
Bilder in das Verzeichnis \images
Style Sheets in das Verzeichnis \css
JavaScript-Skripte in das Verzeichnis \js
Für jedes Website-Thema sollte ein Verzeichnis erstellt werden:
Beispiel-Fotos, Grafiken, Zeichnungen, Skulpturen
Die Verzeichnisstruktur sollte nicht mehr als drei Ebenen aufweisen.
In jedem Verzeichnis sollte eine Datei namens index.html stehen.
Verweise auf Dateien erfolgen immer mit einer relativen Pfadangabe (dazu gleich mehr).
Eine gute und logische Struktur erleichtert uns die Arbeit an einer Website immens. Wenn wir bei allen unseren Sites die gleichen Verzeichnisse anlegen und verwenden, fällt uns die Arbeit leichter.
Webserver sind nichts anderes als Computer, die auf eine Datenanforderung reagieren. Wenn ein Anwender eine Domäne verlangt, so ist das für den Webserver ein Verzeichnis auf seiner Festplatte. Findet der Server eine Datei mit dem Namen index.html, so schickt er diese an den anfordernden Browser. Fehlt diese Datei jedoch, zeigt der Webserver den Inhalt des Verzeichnisses als Liste an. Und gerade das wollen wir den Benutzern unserer Website nicht zeigen. Daher sollten wir in jedem Verzeichnis eine Datei namens index.html anlegen.
1.1 Referenzieren von Dateien
Webseiten bestehen ja im Grunde nur aus reinem Text, aber trotzdem sehen wir Bilder, hören Sound oder es wird ein Video abgespielt. Zusätzlich gibt es noch Hyperlinks, CSS-Dateien oder externe JavaScript-Dateien. Auf all diese Dateien oder Links müssen wir Referenzen einrichten. Über eine solche Referenz binden wir externe Medien in unsere textbasierten Webseiten ein. Referenzen entstehen zwar immer auf die gleiche Art, aber trotzdem müssen wir sie komplett verstanden haben, um sie zu beherrschen.
Wir müssen also Wege (auch Pfade genannt) in den verschiedensten Attributen (beispielsweise href=...
beim a-Tag oder URL(...) in CSS) bei HTML und CSS angeben.
1.2 Auf fremde Quellen referenzieren
Die einfachste Methode ist die absolute Adressierung auf eine fremde Quelle. Damit ist gemeint, dass der exakte Ort der Zieldatei bekannt ist und auf diese verwiesen werden kann.
Beispiel
http://www.google.at
http://www.example.org/
http://www.example.org/index.html
http://www.example.org/index-html#impressum
http://www.example.org/kontakte.pdf
http://www.example.org/images/logo.gif
Diese Art der Referenzierung (Adressierung) nennen wir absolut.
In der eigenen Website verweisen
Innerhalb der eigenen Website können wir natürlich auch mit absoluten Referenzen arbeiten, aber es ist nicht üblich. Besser arbeiten wir mit relativen Referenzen.
Bei dieser Art werden einfach der Domänenname und das Protokoll weggelassen. Wir navigieren also mit der Pfadangabe durch die Verzeichnisstruktur der eigenen Website. Relativ wird dies genannt, da der Speicherort der aktuellen Datei als Ausgangspunkt verwendet wird und die Referenz relativ zu diesem Punkt erfolgt. Bei diesem Beispiel gehen wir immer vom Wurzelverzeichnis (root) aus. Damit ist die Datei gemeint, die die Referenz enthält. Nehmen wir an, diese Datei hat den Namen portfolio.html und steht im Hauptverzeichnis unserer Domäne.
Beispiel: Verweis auf Startseite
Sobald wir von der Datei auf die Startseite index.html verweisen wollen, z. B. mit einem Hyperlink, müssen wir diese Schreibweise verwenden:
/index.html
Beispiel: Verweis auf Bild in Unterverzeichnis
Wollen wir in der Datei ein Bild anzeigen, das im Unterverzeichnis /images abgelegt wurde, müssen wir die Referenz so aufbauen:
/images/logo.gif
Bei dem folgenden Beispiel gehen wir davon aus, dass wir uns in der Datei info.html im Unterverzeichnis /standard befinden.
Beispiel: Verweis auf Datei in höherem Verzeichnis
Sobald wir von der Datei auf die Startseite verweisen wollen, z. B. mit einem Hyperlink, müssen wir die folgende Schreibweise verwenden. Wir können mit zwei aufeinanderfolgenden Punkten eine Verzeichnisebene höher wechseln. Wir müssen so vorgehen, da wir uns ja in einem Unterverzeichnis des Hauptverzeichnisses befinden.
../index.html
Beispiel: Verweis auf Bild in höherem Verzeichnis
Wollen wir in der HTML-Datei ein Bild anzeigen, das im Unterverzeichnis /images abgelegt wurde, müssen wir die Referenz wie folgt aufbauen. Zuerst wechseln wir mit den zwei Punkten ein Verzeichnis höher (in das Hauptverzeichnis) und danach in das Verzeichnis images, das unterhalb des Hauptverzeichnisses angesiedelt ist.
../images/logo.gif
Bei den folgendenen Beispielen gehen wir davon aus, dass die Datei galerie.html im Verzeichnis /photos/paris gespeichert ist.
Beispiel: Verweis auf Startseite in höherem Verzeichnis
Sobald wir von der Datei auf die Startseite verweisen wollen, z. B. mit einem Hyperlink, müssen wir diese Schreibweise verwenden. Mit einem einfachen Schrägstrich am Anfang wechseln wir immer ins Hauptverzeichnis.
/index.html
Beispiel: Verweis auf Bild in entferntem Ordner
Wollen wir in der HTML-Datei ein Bild anzeigen, das im Unterverzeichnis /images abgelegt wurde, müssen wir die Referenz wie folgt aufbauen. Zuerst wechseln wir mit den zwei Punkten ein Verzeichnis höher, ins Verzeichnis /photos. Danach geht es wieder eine Stufe höher ins Hauptverzeichnis und in der Folge ins Verzeichnis images, das unterhalb des Hauptverzeichnisses angesiedelt ist.
../../images/logo.gif
Beispiel: Verweis auf Indexseite in höherem Verzeichnis
Mit dieser Referenz zeigen wir die Startseite des Verzeichnisses /photos an.
../index.html
AUTONUM Übung: Referenzieren
Folgende Verzeichnisstruktur ist gegeben:
|-index.html
|-+images
| | logo.gif
| | back.png
|-+css
| | main.css
|-+photos
| | album1.html
| |-+album1
| | | bild1.jpg
| | | bild2.jpg
| | | subalbum1.html
| |-+subalbum1
| | | bild5.jpg
| | | bild6.jpg
Wir wollen von den verschiedenen HTML-Dateien auf CSS-Dateien oder Bilder referenzieren. Dazu benötigen wir die Pfadangabe für die passende Datei. Ermitteln Sie den relativen Pfad für die Referenz auf
die Datei main.css in der Datei index.html
die Dateien bild1.jpg und bild2.jpg in der Datei album1.html
die Datei logo.gif in der Datei subalbum1.html
die Dateien bild5.jpg und bild6.jpg in der Datei subalbum1.html
Die Lösungen für diese Übung lauten:
css/main.css
album1/bild1.jpg und album1/bild2.jpg
../../images/logo.gif
../subalbum1/bild5.jpg und ../subalbum1/bild6.jpg
2 Die Grundlage: Hypertext Markup Language (HTML)
Tags sind Marker in HTML. Sie dienen als Formatierungskommandos einer HTML-Seite. In der Folge werden wir die Grundregeln für Tags kennenlernen. Bei den folgenden Beschreibungen wird nur auf die Besonderheiten eingegangen. Die hier aufgeführten Grundregeln gelten aber immer.
2.1 Grundregeln
Allgemeine Merkmale
Alle HTML-Tags werden von spitzen Klammern < und > umschlossen.
Ein Tag besteht immer aus seinem Namen und kann im öffnenden Tag Attribute enthalten.
Tags werden in HTML immer nach dem LIFO-Prinzip (Last-In, First-Out) gesetzt.
Beispiel einer gültigen Tag-Folge:
...
Beispiel einer ungültigen Tag-Folge:
2.2 HTML-Tags im praktischen Einsatz
Tags werden immer in Kleinbuchstaben geschrieben.
Der öffnende Tag lautet immer gleich wie der schließende.
...
Der schließende Tag beginnt immer mit einem Schrägstrich.
...
Hat der Tag keinen schließenden Partner, wird im öffnenden Tag der Schrägstrich vor der schließenden spitzen Klammer gesetzt.
Werte für Attribute in einem Tag werden immer in Anführungszeichen gesetzt.
...> ...
2.3 Arten von Tags
Inline-Elemente
Diese Tags werden vom Browser so eingesetzt, dass sie den Textfluss nicht unterbrechen, also keinen Umbruch einfügen.
Block-Elemente
Diese Tags erzeugen im Browser einen eigenen Block. Wir können uns das optisch als ein Rechteck auf der Seite vorstellen. Meistens wird unterhalb des Elements auch noch automatisch eine Leerzeile eingefügt.
2.4 Attribute bei den Tags
Allgemeines
Jeder Tag kann über zusätzliche Attribute verfügen. Manche sind zum Steuern der Anzeige da, andere werden für CSS oder JavaScript benötigt. Weitere sind einfach sinnvoll, um Menschen mit Einschränkungen das Benutzen der Website zu erleichtern.
Kernattribute
Diese Attribute können bei fast allen Tags verwendet werden. Falls in der Folge bei einem HTML-Tag nichts anderes vermerkt ist, können die folgenden Attribute verwendet werden.
id
Gibt dem Element eine eindeutige Kennung[1]. Mit dieser kann es mittels CSS oder JavaScript angesprochen werden.
class
Ordnet dem Element eine oder mehrere Klassen aus einem Style Sheet zu.
style
Wendet einen bestimmten CSS-Stil auf dieses Element an.
title
Gibt dem HTML-Element