HTML: Unterschied zwischen den Versionen
Aus KGS-Wiki
Sn (Diskussion | Beiträge) K (→Zeichen: Formatierung) |
Sn (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
| Zeile 1: | Zeile 1: | ||
[[HTML|HTML (''H''yper''t''ext ''M''arkup ''L''anguage)]] ist eine Sprache, mit der man | [[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 11: | Zeile 13: | ||
|- | |- | ||
|<code><head></code>…<code></head></code> | |<code><head></code>…<code></head></code> | ||
|Markiert den '''Kopf''' der Seite, der Informationen ''über'' die Seite enthält, die nicht im | |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> | |<code><body></code>…<code></body></code> | ||
| Zeile 99: | Zeile 101: | ||
|- | |- | ||
|<code><svg width="</code>''Breite''<code>" height="</code>''Höhe''<code>"></code>…<code></svg></code> | |<code><svg width="</code>''Breite''<code>" height="</code>''Höhe''<code>"></code>…<code></svg></code> | ||
|Fügt ein SVG-Bild ein. Zwischen den Markern folgen die Zeichenanweisungen | |Fügt ein [[SVG]]-Bild ein. Zwischen den Markern folgen die Zeichenanweisungen | ||
|} | |} | ||
Version vom 27. Mai 2024, 13:19 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 |
|---|---|
ä
|
ä |
ö
|
ö |
ü
|
ü |
<
|
< |
>
|
> |
–
|
– (Gedankenstrich, breiter als Bindestrich -) |
