TC & Info an der EZSH mit M. Hacker
<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
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>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)
| 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
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). |
Es gibt zwei Arten von Aufzählungslisten, sortierte und unsortierte.
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.
Was du eigentlich lernen musst, ist HTML, CSS und evtl. JavaScript (je nachdem wir tief du in das Thema einsteigen willst.
Ich persönlich mag den Youtube-Kanal The Morpheus Tutorials, hier findest du sehr viele fachlich gute Tutorials zum vielen IT-Themen.
Ich nutze und schätze folgende Online-Doku zum Webentwicklungsthemen:
Hier im Unterricht benutzen wir notepad++. Ich bevorzuge Visual Studio Code.
Information zur Flagge findet ihr auf Wikipedia
<!DOCTYPE html>
<html>
<body>
<h1>Zentral Afrikanische Rebublik</h1>
<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
<!-- Dies ist ein HTML-Kommentar -->
<!-- Und das ist der Stern den ihr braucht, die Stelle passt auch schon so ungefähr -->
<polygon points="40,25 45,50 65,50 50,65 60,85 40,70 20,85 30,65 15,50 35,50" fill="yellow" />
</svg>
</body>
</html><!DOCTYPE html>
<html>
<body>
<h1>Überschrift</h1>
<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
<!-- Dies ist ein HTML-Kommentar -->
</svg>
</body>
</html>Das HTML-Grundgerüst wird in den meisten Fällen nur per Copy&Paste übernommen. Viele IDEs (integrierte Entwicklungsumgebung) bieten die Möglichkeit, ein Grundgerüst als Snippet (Codeschnipsel) schnell und einfach einzufügen.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titel</title>
</head>
<body>
</body>
</html>
Weitere Informationen zum HTML-Grundgerüst
Heute geht es aber darum, das Grundgerüst zu verstehen und die Struktur zu erkennen.
| Element | Beschreibung |
| <!DOCTYPE html> | Der Doctype informiert den Browser mit welcher HTML-Version das Dokument zu dekodieren ist. Die Angabe html steht für den Standard HTML5 (aktuelle HTML-Version) Doctype bei selfhtml |
| <html lang=“de“>…</html> | Das html-Element umschließt das gesamte Dokument. Die Struktur eines HTML-Dokumentes kann wie ein Baum dargestellt werden. Ausgangspunkt für diese Struktur ist immer das HTML-Element, weswegen man auch vom Wurzelelement (eng. root element) spricht. |
| <head>…</head> | Das Head-Element enthält Metainformationen zur jeweiligen HTML-Seite. |
| <title>…</title> | Obwohl der title nicht auf der eigentlichen Webseite ausgegeben wird, erscheint er an vielen Stellen. Z. B. im Tab des Browsers. Ein Title-Element gehört zwingend zu einem validen HTML-Dokument. |
Und damit sind wir schon mitten drin im HTML-Seiten erstellen. Doch damit wir unsere erste eigene Seite anlegen können, brauchen wir erst mal einen entsprechenden Editor.