Beide Seiten der vorigen RevisionVorhergehende ÜberarbeitungNächste Überarbeitung | Vorhergehende Überarbeitung |
web:html-ref [2014/08/09 14:52] – ros | web:html-ref [2020/10/13 14:25] (aktuell) – Externe Bearbeitung 127.0.0.1 |
---|
====== HTML-Elementreferenz ======= | <code> |
| |
===== HTML-Grundstruktur ===== | |
| |
Die Grundstruktur einer HTML-Datei sieht so aus: | |
| |
<code html> | |
<!doctype html> | <!doctype html> |
<html> | <html> |
</body> | </body> |
</html> | </html> |
</code> | |
| |
===== Wichtige HTML-Elemente ===== | |
| |
^ Start-//Tag// ^ Beschreibung ^ Typ ^ | |
| ''<a>'' | Hyperlink | Inline | | |
| ''<abbr>'' | Abkürzung | Inline | | |
| ''<aside>'' | Seitlicher Bereich | Block | | |
| ''<b>'' | bedeutungstragende Worte | Inline | | |
| ''<body>'' | Inhalt der Webseite | Block | | |
| ''<br>'' | Zeilenumbruch | inline | | |
| ''<cite>'' | Titel von Büchern, Filmen usw. | Inline | | |
| ''<div>'' | Allgemeiner Bereich (division) | Block | | |
| ''<em>'' | betont, emphatisch (gefühlsmässig) betont | Inline | | |
| ''<footer>'' | Fussbereich der Webseite | Block | | |
| ''<h1>'' | grösste Überschrift (heading) | Block | | |
| ''<h2>'' | zweitgrösste Überschrift (heading) | Block | | |
| ''<h3>'' | drittgrösste Überschrift (heading) | Block | | |
| ''<h4>'' | drittkleinste Überschrift (heading) | Block | | |
| ''<h5>'' | zweitkleinste Überschrift (heading) | Block | | |
| ''<h6>'' | kleinste Überschrift (heading) | Block | | |
| ''<head>'' | Meta-Angaben zur Webseite | -- | | |
| ''<header>'' | Kopfbereich der Webseite | Block | | |
| ''<i>'' | spezielle Worte, z.B. Fachausdrücke, Eigennamen, anderssprachige Phrasen | Inline | | |
| ''<img>'' | Bild (//image//) | Inline | | |
| ''<main>'' | Hauptbereich der Webseite | Block | | |
| ''<nav>'' | Navigationsbereich, z.B. für Menüs | Block | | |
| ''<p>'' | Absatz (//paragraph//) | Block | | |
| ''<q>'' | ein Zitat (//quote//) | Inline | | |
| ''<title>'' | Titel der Webseite | -- | | |
| |
===== <a> (Hyperlink) ===== | |
| |
Das ''<a>''-Element stellt den Inhalt als Hyperlink dar. Als Inhalt kann eine Beliebige Kombination von //Inline//-Elementen verwendet werden (z.B. Text oder ein Bild). Das Ziel des Hyperlinks wird mit dem ''href''-Attribut angegeben. Wir zusätzlich das Attribut ''name'' auf den Wert ''_blank'' gesetzt, so wird das Ziel des Links in einem neuen Fenster bzw. Tab geöffnet. | |
| |
^ Attribut ^ Bedeutung ^ | |
| ''href'' | Zieladresse des Hyperlinks | | |
| ''target'' | ''_blank'' für neues Fenster/Tab | | |
| |
<code html> | |
<a href="http://www.gymkirchenfeld.ch">Gymnasium Kirchenfeld</a> | |
</code> | |
| |
===== <abbr> (Abkürzuung) ===== | |
| |
Das ''<abbr>''-Element markiert eine Abkürzung. Der Inhalt des Elements ist die Abkürzung, der ausgeschriebene Begriff wird mit dem ''name''-Attribut angegeben. | |
| |
^ Attribut ^ Bedeutung ^ | |
| ''title'' | Ausgeschriebener Begriff | | |
| |
<code html> | |
<abbr title="Hypertext Markup Language">HTML</abbr> | |
</code> | |
| |
===== <img> (Bild) ===== | |
| |
Mit dem ''<img>''-Element wird ein Bild eingefügt. Das Element hat keinen Inhalt, die Adresse der Bilddatei wird mit dem ''src''-Attribut angegeben. Ausserdem muss mit dem ''alt''-Attribut ein textuelle Beschreibung des Bildes angegeben werden. | |
| |
^ Attribut ^ Bedeutung ^ | |
| ''src'' | Adresse der Bilddatei | | |
| ''alt'' | textuelle Beschreibung des Bilds | | |
| |
<code html> | |
<img src="tim-berners-lee.jpg" alt="Bild von Tim Berners-Lee"> | |
</code> | </code> |