3. Basics [CC-Stadtfeld]

Diese Seite ist nicht editierbar. Du kannst den Quelltext sehen, jedoch nicht verändern. Kontaktiere den Administrator, wenn du glaubst, dass hier ein Fehler vorliegt.
====== 3. Basics ======
In diesem Kapitel werden wir einige grundlegende HTML-Beispiele zeigen.\\
Mach dir keine Sorge, wenn wir Tags verwenden, die du noch nie gesehen hast.

\\
==== HTML Dokumente ====
Alle HTML-Dokumente müssen mit einer Dokumenttypdeklaration beginnen: ''<!DOCTYPE html>''.\\
Das HTML-Dokument selbst beginnt mit ''<html>'' und endet mit ''</html>''.\\
Der sichtbare Teil des HTML-Dokuments befindet sich zwischen ''<body>'' und ''</body>''.

\\
==== Die <!DOCTYPE> -Deklaration ====
Die ''<!DOCTYPE>'' -Deklaration stellt den Dokumenttyp dar und hilft Browsern, Websites korrekt anzuzeigen.\\
Es darf nur einmal oben auf der Seite erscheinen (vor allen anderen HTML-Tags), Groß- und Kleinschreibung ist dabei egal\\

Die ''<!DOCTYPE>'' -Deklaration für HTML5 lautet:
<code html><!DOCTYPE html></code>

\\
==== Überschriften ====
HTML-Überschriften werden mit den Tags ''<h1>'' bis ''<h6>'' definiert.\\
''<h1>'' definiert die wichtigste und damit größte Überschrift. ''<h6>'' definiert die am wenigsten wichtige und damit kleinste Überschrift:
====== h1 ======
===== h2 =====
==== h3 ====
...

\\
==== Paragraphen ====
HTML Paragraphen sind mit dem ''<p>'' -Tag definiert:

<code html>
<p> Dies ist ein Paragraph. </p>
<p> Dies ist ein weiterer Paragraph. </p>
</code>

\\
==== HTML-Links ====
HTML-Links werden mit dem ''<a>'' -Tag definiert:

<code html>
<a href="https://cc-stadtfeld.de/wiki"> Dies ist ein Link </a>
</code>

Das Ziel des Links wird im href-Attribut angegeben.\\
Attribute werden verwendet, um zusätzliche Informationen zu HTML-Elementen bereitzustellen.\\
Weitere Informationen zu Attributen findest du in einem späteren Kapitel.

\\
==== HTML-Bilder ====
HTML-Bilder werden mit dem ''<img>'' -Tag definiert.\\
Die Quelldatei (src), der alternative Text (alt), die Breite und die Höhe werden als Attribute bereitgestellt:

<code html>
<img src="cc_logo.png" alt="CC Logo" width="300" height="100">
</code>

\\
==== HTML-Quellcode anzeigen ====
Hast du dir jemals eine Webseite angesehen und dich gefragt: "Wie haben die das gemacht?"

=== HTML-Quellcode anzeigen ===
Klicke mit der rechten Maustaste auf eine HTML-Seite und wähle "Seitenquelle anzeigen" (in Chrome) oder "Seitenquelltext anzeigen" (in Edge) oder ähnliches in anderen Browsern. Dies öffnet ein Fenster mit dem HTML-Quellcode der Seite.

=== Überprüfe ein HTML-Element ===
Klicke mit der rechten Maustaste auf ein Element (oder einen leeren Bereich) und wähle "Element untersuchen", um zu sehen, wie es aufgebaut ist (Du siehst sowohl HTML als auch CSS). Du kannst HTML oder CSS auch im angezeigten Bedienfeld bearbeiten.

[[{|width: 12em; color: green; float:left;}websites:webdesign:html:einstieg:editor |⬅️ Editor]]
[[{|width: 12em; color: green; float:right;}websites:webdesign:html:einstieg:elemente|Elemente ➡️]]