HTML: Unterschied zwischen den Versionen

Aus KGS-Wiki
Keine Bearbeitungszusammenfassung
K (Vorlage HTML)
 
(5 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
HTML ist eine Sprache, mit der man Webseiten gestalten kann. Mit Anweisungen in '''spitzen Klammern''' kann man festlegen, wie bestimmte '''Elemente''' gestaltet werden sollen.
[[HTML|HTML (''H''yper''t''ext ''M''arkup ''L''anguage)]] ist eine Sprache, mit der man [[Webseite]]n gestalten kann. Mit [[Markup|Anweisungen]] in '''spitzen Klammern''' kann man festlegen, wie bestimmte '''Elemente''' gestaltet werden sollen.
 
Gemäß dem Prinzip der ''[[Separation of Concerns]]'' sollte man mit HTML nur den strukturellen Aufbau einer Seite definieren und die konkrete optische Ausgestaltung mit anderen Mitteln wie z.B. [[CSS]] lösen.


== Struktur ==
== Struktur ==
Zeile 7: Zeile 9:
!Funktion
!Funktion
|-
|-
|<code><html></code>…<code></html></code>
|{{HTML|<html>}}…{{HTML|</html>}}
|Markiert Beginn und Ende der Seite.
|Markiert Beginn und Ende der Seite.
|-
|-
|<code><head></code>…<code></head></code>
|{{HTML|<head>}}…{{HTML|</head>}}
|Markiert den '''Kopf''' der Seite, der Informationen ''über'' die Seite enthält, die nicht im Browserfenster angezeigt werden
|Markiert den '''Kopf''' der Seite, der Informationen ''über'' die Seite enthält, die nicht im [[Browser]]fenster angezeigt werden
|-
|-
|<code><body></code>…<code></body></code>
|{{HTML|<body>}}…{{HTML|</body>}}
|Markiert den '''Körper''' der Seite; das ist alles, was im Browserfenster sichtbar ist.
|Markiert den '''Körper''' der Seite; das ist alles, was im Browserfenster sichtbar ist.
|-
|-
|<code><title></code>…<code></title></code>
|{{HTML|<title>}}…{{HTML|</title>}}
|Hier steht der '''Titel''' der Seite, der z.B. im Browsertab angezeigt wird.
|Hier steht der '''Titel''' der Seite, der z.B. im Browsertab angezeigt wird.
|}
|}


== Überschriften ==
== Überschriften ==
Überschriften ('''''h'''eadlines'') werden als <code><h_></code>-Elemente notiert, wobei in die Lücke eine Zahl zwischen 1 und 6 eingetragen wird.
Überschriften ('''''h'''eadlines'') werden als {{HTML|<h_>}}-Elemente notiert, wobei in die Lücke eine Zahl zwischen 1 und 6 eingetragen wird.
{| class="wikitable"
{| class="wikitable"
!Element
!Element
!Funktion
!Funktion
|-
|-
|<code><nowiki><h1></nowiki></code>…<code><nowiki></h1></nowiki></code>
|{{HTML|<h1>}}…{{HTML|</h1>}}
|Markiert die größtmöglichen Überschriften (Kapitelüberschriften)
|Markiert die größtmöglichen Überschriften (Kapitelüberschriften)
|-
|-
|<code><nowiki><h2></nowiki></code>…<code><nowiki></h2></nowiki></code>
|{{HTML|<h2>}}…{{HTML|</h2>}}
|Markiert die zweitgrößten Überschriften (Abschnittsüberschriften)
|Markiert die zweitgrößten Überschriften (Abschnittsüberschriften)
|-
|-
|<code><nowiki><h3></nowiki></code>…<code><nowiki></h3></nowiki></code>
|{{HTML|<h3>}}…{{HTML|</h3>}}
|Markiert die drittgrößten Überschriften (Unterabschnittsüberschriften)
|Markiert die drittgrößten Überschriften (Unterabschnittsüberschriften)
|-
|-
|<code><nowiki><h4></nowiki></code>…<code><nowiki></h4></nowiki></code>
|{{HTML|<h4>}}…{{HTML|</h4>}}
|Markiert die viertgrößten Überschriften
|Markiert die viertgrößten Überschriften
|-
|-
|<code><nowiki><h5></nowiki></code>…<code><nowiki></h5></nowiki></code>
|{{HTML|<h5>}}…{{HTML|</h5>}}
|Markiert die fünftgrößten Überschriften
|Markiert die fünftgrößten Überschriften
|-
|-
|<code><nowiki><h6></nowiki></code>…<code><nowiki></h6></nowiki></code>
|{{HTML|<h6>}}…{{HTML|</h6>}}
|Markiert die sechstgrößten und kleinsten Überschriften
|Markiert die sechstgrößten und kleinsten Überschriften
|}
|}
Zeile 50: Zeile 52:
!Funktion
!Funktion
|-
|-
|<code><ol type="</code>''Typ''<code>"></code>…<code><nowiki></ol></nowiki></code>
|{{HTML|<ol type{{=}}"}}''Typ''{{HTML|">}}…{{HTML|</ol>}}
|Markiert Beginn und Ende einer sortierten Liste ('''''o'''rdered '''l'''ist''). Mögliche Typen sind "1" (1., 2., 3..), "a" (a., b., c.), "A" (A., B., C.), "I" (I., II., III.) und "i" (i., ii., iii.)
|Markiert Beginn und Ende einer sortierten Liste ('''''o'''rdered '''l'''ist''). Mögliche Typen sind "1" (1., 2., 3..), "a" (a., b., c.), "A" (A., B., C.), "I" (I., II., III.) und "i" (i., ii., iii.)
|-
|-
|<code><nowiki><li></nowiki></code>…<code><nowiki></li></nowiki></code>
|{{HTML|<li>}}…{{HTML|</li>}}
|Markiert Beginn und Ende eines Eintrages in einer Liste
|Markiert Beginn und Ende eines Eintrages in einer Liste
|}
|}
Zeile 62: Zeile 64:
!Funktion
!Funktion
|-
|-
|<code><nowiki><table></nowiki></code>…<code><nowiki></table></nowiki></code>
|{{HTML|<table>}}…{{HTML|</table>}}
|Markiert eine Tabelle, die mit <code><nowiki><tr></nowiki></code>s gefüllt wird.
|Markiert eine Tabelle, die mit {{HTML|<tr>}}s gefüllt wird.
|-
|-
|<code><nowiki><tr></nowiki></code>…<code><nowiki></tr></nowiki></code>
|{{HTML|<tr>}}…{{HTML|</tr>}}
|Markiert eine Tabellenzeile ('''''t'''able '''r'''ow''), die mit <code><nowiki><td></nowiki></code>s oder <code><nowiki><th></nowiki></code>s gefüllt werden muss.
|Markiert eine Tabellenzeile ('''''t'''able '''r'''ow''), die mit {{HTML|<td>}}s oder {{HTML|<th>}}s gefüllt werden muss.
|-
|-
|<code><nowiki><th></nowiki></code>…<code><nowiki></th></nowiki></code>
|{{HTML|<th>}}…{{HTML|</th>}}
|Markiert eine Tabellen-Überschriften-Zelle ('''''t'''able '''h'''eadline cell''); muss in einer <code><nowiki><tr></nowiki></code> stehen!
|Markiert eine Tabellen-Überschriften-Zelle ('''''t'''able '''h'''eadline cell''); muss in einer {{HTML|<tr>}} stehen!
|-
|-
|<code><nowiki><td></nowiki></code>…<code><nowiki></td></nowiki></code>
|{{HTML|<td>}}…{{HTML|</td>}}
|Markiert eine Tabellen-Daten-Zelle ('''''t'''able '''d'''ata cell''), also eine normale Zelle; muss in einer <code><nowiki><tr></nowiki></code> stehen!
|Markiert eine Tabellen-Daten-Zelle ('''''t'''able '''d'''ata cell''), also eine normale Zelle; muss in einer {{HTML|<tr>}} stehen!
|}
|}


Zeile 80: Zeile 82:
!Funktion
!Funktion
|-
|-
|<code><nowiki><strong></nowiki></code>…<code><nowiki></strong></nowiki></code>
|{{HTML|<strong>}}…{{HTML|</strong>}}
|Druckt den Text zwischen den Markern '''fett'''.
|Druckt den Text zwischen den Markern '''fett'''.
|-
|-
|<code><nowiki><em></nowiki></code>…<code><nowiki></em></nowiki></code>
|{{HTML|<em>}}…{{HTML|</em>}}
|Druckt den Text zwischen den Markern ''kursiv''.
|Druckt den Text zwischen den Markern ''kursiv''.
|-
|{{HTML|<u>}}…{{HTML|</u>}}
|Druckt den Text zwischen den Markern <u>unterstrichen</u>.
|-
|{{HTML|<code>}}…{{HTML|</code>}}
|Druckt den Text zwischen den Markern <code>in einer Schrift mit fester Zeichenbreite</code>.
|}
|}


Zeile 92: Zeile 100:
!Funktion
!Funktion
|-
|-
|<code><svg width="</code>''Breite''<code>" height="</code>''Höhe''<code>"></code>…<code></svg></code>
|{{HTML|<svg width{{=}}"}}''Breite''{{HTML|" height{{=}}"}}''Höhe''{{HTML|">}}…{{HTML|</svg>}}
|Fügt ein SVG-Bild ein. Zwischen den Markern folgen die Zeichenanweisungen
|Fügt ein [[SVG]]-Bild ein. Zwischen den Markern folgen die Zeichenanweisungen
|}
|}


Zeile 101: Zeile 109:
!Zeichen
!Zeichen
|-
|-
|&amp;auml;
|{{HTML|&auml;}}
|ä
|ä
|-
|-
|<code>&amp;ouml;</code>
|{{HTML|&ouml;}}
|ö
|ö
|-
|-
|<code>&amp;uuml;</code>
|{{HTML|&uuml;}}
|ü
|ü
|-
|-
|<code>&amp;lt;</code>
|{{HTML|&lt;}}
|<
|<
|-
|-
|<code>&amp;gt;</code>
|{{HTML|&gt;}}
|>
|>
|-
|-
|<code>&amp;ndash;</code>
|{{HTML|&ndash;}}
|– (Gedankenstrich, breiter als Bindestrich -)
|– (Gedankenstrich, breiter als Bindestrich -)
|}
|}
Zeile 122: Zeile 130:
== Zum Weiterlesen ==
== Zum Weiterlesen ==


* [https://www.w3schools.com/tags/ Alle HTML-Elemente auf W3Schools.com 🇬🇧]
* [https://www.w3schools.com/tags/ Alle HTML-Elemente auf W3Schools.com {{Flagge|GB}}]
* [https://wiki.selfhtml.org/wiki/HTML HTML-Tutorial auf selfhtml.org 🇩🇪]
* [https://wiki.selfhtml.org/wiki/HTML HTML-Tutorial auf selfhtml.org {{Flagge|DE}}]
[[Kategorie:Sprache]]
[[Kategorie:Web-Programmierung]]
[[Kategorie:XML]]
[[Kategorie:Markup]]

Aktuelle Version vom 4. August 2024, 08:59 Uhr

HTML (Hypertext Markup Language) ist eine Sprache, mit der man Webseiten gestalten kann. Mit Anweisungen in spitzen Klammern kann man festlegen, wie bestimmte Elemente gestaltet werden sollen.

Gemäß dem Prinzip der Separation of Concerns sollte man mit HTML nur den strukturellen Aufbau einer Seite definieren und die konkrete optische Ausgestaltung mit anderen Mitteln wie z.B. CSS lösen.

Struktur

Element Funktion
<html>…</html> Markiert Beginn und Ende der Seite.
<head>…</head> Markiert den Kopf der Seite, der Informationen über die Seite enthält, die nicht im Browserfenster angezeigt werden
<body>…</body> Markiert den Körper der Seite; das ist alles, was im Browserfenster sichtbar ist.
<title>…</title> Hier steht der Titel der Seite, der z.B. im Browsertab angezeigt wird.

Überschriften

Überschriften (headlines) werden als <h_>-Elemente notiert, wobei in die Lücke eine Zahl zwischen 1 und 6 eingetragen wird.

Element Funktion
<h1>…</h1> Markiert die größtmöglichen Überschriften (Kapitelüberschriften)
<h2>…</h2> Markiert die zweitgrößten Überschriften (Abschnittsüberschriften)
<h3>…</h3> Markiert die drittgrößten Überschriften (Unterabschnittsüberschriften)
<h4>…</h4> Markiert die viertgrößten Überschriften
<h5>…</h5> Markiert die fünftgrößten Überschriften
<h6>…</h6> Markiert die sechstgrößten und kleinsten Überschriften

Listen

Element Funktion
<ol type="Typ">…</ol> Markiert Beginn und Ende einer sortierten Liste (ordered list). Mögliche Typen sind "1" (1., 2., 3..), "a" (a., b., c.), "A" (A., B., C.), "I" (I., II., III.) und "i" (i., ii., iii.)
<li>…</li> Markiert Beginn und Ende eines Eintrages in einer Liste

Tabellen

Element Funktion
<table>…</table> Markiert eine Tabelle, die mit <tr>s gefüllt wird.
<tr>…</tr> Markiert eine Tabellenzeile (table row), die mit <td>s oder <th>s gefüllt werden muss.
<th>…</th> Markiert eine Tabellen-Überschriften-Zelle (table headline cell); muss in einer <tr> stehen!
<td>…</td> Markiert eine Tabellen-Daten-Zelle (table data cell), also eine normale Zelle; muss in einer <tr> stehen!

Textformat

Element Funktion
<strong>…</strong> Druckt den Text zwischen den Markern fett.
<em>…</em> Druckt den Text zwischen den Markern kursiv.
<u>…</u> Druckt den Text zwischen den Markern unterstrichen.
<code>…</code> Druckt den Text zwischen den Markern in einer Schrift mit fester Zeichenbreite.

Sonstiges

Element Funktion
<svg width="Breite" height="Höhe">…</svg> Fügt ein SVG-Bild ein. Zwischen den Markern folgen die Zeichenanweisungen

Zeichen

HTML-Code Zeichen
&auml; ä
&ouml; ö
&uuml; ü
&lt; <
&gt; >
&ndash; – (Gedankenstrich, breiter als Bindestrich -)

Zum Weiterlesen

Abgerufen von „https://wiki.kah.gs/index.php?title=HTML&oldid=6117“