====== Basiselemente ====== ===== Dokumenttyp ===== Jedes HTML-Dokument sollte mit einer Document Type Declaration beginnen: Damit erkennt der Browser, dass diese Datei ein HTML-Dokument ist und versucht dieses optimal darzustellen. Dieses Tag darf außerdem nur einmal und zwar ganz oben im ganzen Dokument vorkommen! ===== Grundgerüst ===== Ein valides HTML5-Grundgerüst beinhält mindestens die folgenden Elemente. Page Title Der HTML-Tag beinhält anschließend das eigentliche HTML-Dokument. Wobei der Head-Bereich nur Metainformationen und der Body-Bereich alle sichtbaren Elemente des Dokuments beinhält. Noch besser wäre die Angabe einer Sprache (lang) und weiteren Meta-Informationen im Head-Bereich: Titel === Zeichencodierung === Man sollte immer die Zeichencodierung festlegen: Beachte: Wenn man für HTML-Dokumente die Zeichencodierung durch festlegt, muss man darauf achten, dass sich diese Angabe vollständig innerhalb der ersten 1024 Bytes des Dokuments befindet. Des Weiteren muss das Dokument auch mit dieser Zeichencodierung vom Server ausgeliefert werden, dafür einfacherweise auch in derselben Zeichencodierung abgespeichert sein. === Viewportangabe === Um zu verhindern, dass Mobilgeräte die gesamte Web-Seite in einer sehr kleinen Ansicht darstellen, kann man eine Viewportangabe einstellen. Ohne Angabe setzen Browser die Breite einer Webseite auf 960px und verkleinern, sodass es in den Viewport passt. So erhält der Nutzer zwar einen Überblick, Text wird aber erst nach dem hineinzoomen lesbar. Mit folgender Einstellung erreicht man, dass die Seite sich an den Viewport anpasst, aber dennoch ein Skalieren ermöglicht: Folgende Angaben sind möglich: * **initial-scale**: (Zoom) (initial-scale=1.0 Inhalte werden 1:1 dargestellt) * **user-scalable**: Mit diesem Attribut kann man definieren, ob der Nutzer auf der Seite zoomen kann (yes) oder nicht (no), der default-Wert ist yes. * **minimum-scale** bzw. **maximum-scale**: ermöglichen es, den Zoomgrad einzuschränken. (z. B.: maximal scale=2.0 Inhalt kann maximal 2x-fach vergrößert werden.) Da hiermit etwas eingestellt wird, das mit der Darstellung zu tun hat, ist eine Metaangabe natürlich nicht ideal. Langfristig wird diese Metaangabe auch entfallen können und statt dessen in CSS erfolgen. Die entsprechende Regel @viewport {} ist aber auch schon wieder zurückgezogen worden. Man kann dieses meta-Element ohne jegliche Nebenwirkungen für jede Webseite einsetzen, um die Darstellung auf Mobilgeräten zu verbessern. Die Benutzbarkeit und der Komfort werden auf keinen Fall leiden. Empfehlung: Unterbinde das Zoomen auf Mobilgeräten nicht. Verwende ===== Überschriften ===== In HTML sind insgesamt 6 verschiedene (//

bis

//) Überschriften definiert

Wichtig

 definiert die wichtigste und größte Überschrift
Nicht ganz so wichtig
 definiert die unwichtigste und kleinste Überschrift Bsp.: Code vs. Browseransicht {{:inf:inf5ai_202324:07_webentwicklung:7_03:pasted:20240423-133049.png}} ===== Paragraphen ===== HTML Paragraphen werden wie folgt mit //

Inhalt

// definiert: {{:inf:inf5ai_202324:07_webentwicklung:7_03:pasted:20240423-133516.png}} ===== Links ===== HTML Links werden wie folgt mit //Text// definiert und verkörpern die Grundidee des Internets. {{:inf:inf5ai_202324:07_webentwicklung:7_03:pasted:20240423-133649.png}} Dabei ist das Ziel des Links im Attribut **href** definiert. Attribute beinhalten zusätzliche Informationen für den jeweiligen Tag. ===== Bilder ===== Bilder werden wie folgt mit //// definiert: {{:inf:inf5ai_202324:07_webentwicklung:7_03:pasted:20240423-133859.png?700}} Das Attribut //src// beinhaltet wiederum den Pfad der Bildquelle. Das Bild muss dabei im Webverzeichnis des Webservers liegen, damit es angezeigt werden kann. Das Attribut //alt// definiert einen alternativen Text, der dann angezeigt wird, wenn das Bild nicht eingeblendet werden kann. ===== Verschachtelte Elemente ===== Elemente können auch verschachtelt werden (d.h. ein Element beinhält ein anderes Element). Z.B.: Das Body-Element beinhaltet viele andere Tags wie //

,

,//.