Übung bei LearningApps.org Und hier geht mein Text weiter.
CSS-Syntax
Wie kommt das CSS ins HTML?
Es gibt drei Möglichkeiten, wie man CSS-Eigenschaften ins HTML einfügen kann:
Direkt im Style-Attribut des jeweiligen Tags
<p style="color: red!>Dies ist mein Absatz</p>Dateiübergreifend in einem Style-Element
<!doctype html>
<html lang="de">
<head>
<style>
h1 {
background-color: green;
color: white;
}
p {
text-align: center;
color: green;
}
</style>
</head>Oder als externe Stylesheet-Datei
<!doctype html>
<html lang="de">
<head>
<link rel="stylesheet" href="styles.css">
...Nur die dritte Methode garantiert die in Trennung von Inhalt und Design beschriebenen Vorteile.
Ausführliche Infos auf selfhtml.org
Trennung von Inhalt und Design
Ein extrem großer Vorteil von CSS ist die Trennung des Designs vom eigentlichen Inhalt, der in HTML-Dateien steckt. Das Design wird dazu in eine eigene Datei ausgelagert und kann dann für alle Seiten eines Internetauftritts verwendet werden. Werden dann Änderungen am Design gemacht, sind durch diese gemeinsame CSS-Datei sofort alle Einzelseiten auf dem neuesten Stand.
Beispiel
Testbeitrag
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut
Bilder in Webseiten
<img src="../img/enten.jpg" alt="Alternativer Text">| Attribut | Erläuterung |
| src | engl. source für Quelle – Referenz der Bilddatei |
| alt | engl. alternative für Alternativtext – Textliche Beschreibung des Bildes. Wird angezeigt, wenn das Bild nicht geladen werden kann bzw. von Screen Readern vorgelesen. |
| height | Höhe des Bildes |
| width | Breite des Bildes |
| title | wird als Tooltip beim Mousehover angezeigt |
Ausführliche Doku auf selfhtml.org
Bildgröße anpassen
Inline- und Blockelemente
Bei den zweiteiligen HTML-Tags unterscheidet man zwischen Block- und Inline Elementen.
Ein Block-Element füllt unabhängig von seiner Länge den gesamten Raum (Zeile) aus. Sie stehen als einzelner Block auf einer Zeile. Block-Elemente können Nachfahren des Body-Elements oder eines anderen Block-Elements sein.
Typische Block-Elemente sind: h1 … h6, p
Inline-Elemente erzeugen keinen eigenen Absatz im Textfluss. Sie können normalen Text und andere Inline-Elemente, aber keine Block-Elemente enthalten.
Typische Inline-Elemente sind: a, br, b, i, img, …
Liste der Inline-Elemente auf webkompetenz.wikidot.com
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Block- und Inline-Elemente</title>
</head>
<body>
<div style="background-color:red; color:white; width:500px">Dies ist mein Block-Element (DIV)</div>
<span style="background-color:blue; color:white; width:500px">Ich bin eine Inline-Element (SPAN)</span>
</body>
</html>HTML-Elemente und Tags
Und damit sind wir schon mitten drin im HTML-Seiten erstellen.
HTML besteht aus sogenannten Tags, die in der Regel eine Textpassage umklammern und dieser eine Bedeutung (Semantik) geben. Tags bestehen aus einem öffnenden und einem schließenden Tagteil.
z.B. <h1>Dies ist eine Überschrift</h1>
Der Tag besteht aus einem Kleiner- und Größerzeichen (man spricht bei HTML von spitzen Klammern) und einem Bezeichner (z.B. h1). Der schließende Tag startet zusätzlich mit einem Schrägstrich / Slash (/) und beendet den markierten Textabschnitt.
Der H1-Tag macht also aus einem beliebigen Text eine Überschrift 1. Grades (=Hautpüberschrift)
Die wichtigsten Tags
| HTML-Tag | Bedeutung |
| <html>…</html> | Das html-Element , auch root(-Element) oder Wurzelelement enthält den vollständigen Inhalt einer Internetseite. |
| <head>…<head> | Das head-Element (deutsch: Kopf) ist das erste Kindelement des html-Elements und enthält im Wesentlichen Meta-Informationen über das im HTML-Körper (body) folgende Dokument. |
| <body>…</body> | Das body-Element enthält den darzustellenden Inhalt eines HTML-Dokuments. |
| <h1>…</h1> | Das h1-Element stellt eine Überschrift (engl. heading) 1. Ordnung dar. <h1> bis <h6> |
| <p>…</p> | Das p-Element definiert einen Textabsatz (engl. paragraph). Absätze dienen der Gliederung eines Textes. |
| <a href=“https://selfhtml.org“>Das ist ein Link</a> | Das a-Element stellt einen Verweis, (Hyper-)Link auf eine (andere) Web-Adresse dar. |
| <b>…</b> oder <strong>…</strong> | Das b-Element zeichnet einen Teil eines Fließtextes aus, der sich vom übrigen Text abheben soll, keine besondere Bedeutung hat und üblicherweise in Fettschrift dargestellt wird. |
Auf selfhtml findest du eine komplette Referenz aller HTML-Tags
Einseitige Tags
Neben den typischen Tags mit öffnenden und schließenden Teil gibt es einige einseitige Tags, da sie keinen Text umschließen, sondern andere Dinge wie Bilder einfügen.
| HTML-Tag | Bedeutung |
| <img src=„./bilder/affevorhaus.jpg“ alt=“Auf dem Bild ist ein Affe vor einem Haus zu sehen“> | Das img-Element ermöglicht es, Bilddateien in einem Dokument einzubinden und darzustellen |
| <hr> | Das hr-Element kennzeichnet einen thematischen Bruch (paragraph-level thematic break). Ursprünglich wurden solche Trenner als waagerechte Linien dargestellt, daher die Bezeichnung des Elements horizontal ruler, horizontales Lineal. |
| <br> | Das br-Element erzeugt einen Zeilenumbruch (engl. line break). |
Was braucht man um HTML-Dokumente zu schreiben?
Eigentlich braucht man keinen besonderen Editor, um HTML-Dokumente zu schreiben. Aber Editoren und IDEs (Integrierte Entwicklungsumgebungen) erleichtern einem das Leben mit Featuren wie Syntax Highlighting, Code-Snippets und Ähnlichem.
Editoren und IDEs
Online-Editoren
- HTML-Playground @ playcode.io
- CodePen.io
- OneCompiler.com
Online-Doku(-mentation)
- selfhtml.org – Eine der besten deutschsprachigen HTML-Dokumentationen
- HTML-Tutorial auf w3schools.com (Englisch)
- HTML-Videotutorial von Morpheus Tutorials (Youtube Playlist 15 Videos)