support.rohil.it
HTML Basics - Die wichtigsten Befehle - Druckversion

+- support.rohil.it (https://support.rohil.it)
+-- Forum: Webdesign und Webtechnik (https://support.rohil.it/forum-5.html)
+--- Forum: HTML und PHP (https://support.rohil.it/forum-10.html)
+--- Thema: HTML Basics - Die wichtigsten Befehle (/thread-4.html)

HTML Basics - Die wichtigsten Befehle - rohilit - 06-04-2022

HTML Befehle: Übersicht nach Gruppen geordnet

HTML-Befehle werden als Tags und Attribute bezeichnet. Tags bilden ein Element und bestehen – bis auf wenige Ausnahmen – jeweils aus einem öffnenden und einem schließenden Tag. Das schließende Tag beinhaltet einen Schrägstrich:

Code:
[color=#ffffff][size=1][font=Courier]Beispiel: [size=1]<[color=#f5c26b]p[/color]>[/size] Das ist ein Absatz [size=1]</[color=#f5c26b]p[/color]>[/size][/font][/size][/color]

Das Tag teilt dem Browser mit, welche Information sich innerhalb dessen befindet. Im gezeigten Beispiel handelt es sich um ein Absatz-Tag.
Einem Element kann neben dem Tag auch ein Attribut zugewiesen werden: Dieses gibt zusätzliche Informationen über ein bestimmtes Element. Es besteht aus einem Attribut-Namen und der spezifischen Bezeichnung.


Code:
[color=#ffffff][size=1][font=Courier][/font][/size][/color]


[color=#ffffff][size=1][font=Courier]Beispiel: [size=1]<[color=#f5c26b]p[/color] class=[color=#f5c26b]"content"[/color]>[/size] Das ist ein Absatz. [size=1]</[color=#f5c26b]p[/color]>[/size][/font][/size][/color]

Dem zuvor definierten p-Element wurde nun zusätzlich das [i]class[/i]-Attribut mit dem Namen „content“ zugeordnet. Durch die Bestimmung von Attributen können weitere Informationen im HTML-Doc definiert oder später im CSS darauf zurückgegriffen werden.
[i]Nachfolgend finden Sie eine nach Gruppen geordnete Übersicht der wichtigsten HTML-Befehle:[/i]

Grundstruktur

TAG

BEDEUTUNG

<!DOCTYPE html>
<html> </html>
  • Eröffnet das HTML5-Dokument.
  • Kann in älteren Versionen anders aussehen.
<head> </head>
  • Enthält in der Regel Informationen über die Seite.
  • Beinhaltet das Title-Element.
<meta>
  • Zusatzangaben für die Verwaltung des HTML-Dokuments.
  • Befindet sich im [i]head[/i].
<title> </title>
  • Enthält den Titel der Seite.
  • Wird in der Titelleiste oben im Browser ausgegeben.
<body> </body>
  • Hauptfenster im Browser (außer Titel und Header).
<header> </header>
  • Bereich für den Kopf, also den Beginn der Seite ([i]nicht[/i] [i]head![/i]).
<nav> </nav>
  • Navigationsbereich.
<section> </section>
  • Kann genutzt werden, um Elemente zu einer Gruppe zusammenzufassen.
<article> </article>
  • Inhaltsbereich.
<footer> </footer>
  • Fußbereich der Seite.

Beispiel: Grundgerüst für ein HTML-Dokument

Code:
[color=#ffffff][size=1][font=Courier][color=#f2545b][size=1]<!DOCTYPE [color=#f2545b]html[/color]>[/size][/color][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]html[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier]  [size=1]<[color=#f5c26b]head[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier]    [size=1]<[color=#f5c26b]title[/color]>[/size][size=1]</[color=#f5c26b]title[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier]  [size=1]</[color=#f5c26b]head[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier]  [size=1]<[color=#f5c26b]body[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier]  [size=1]</[color=#f5c26b]body[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]</[color=#f5c26b]html[/color]>[/size][/font][/size][/color]

Textelemente
Textelemente können sowohl struktureller als auch semantischer Natur sein. Strukturelle Tags zeichnen Elemente wie etwa Überschriften oder Absätze aus und können diese oberflächlich gestalten. Mit semantischen Tags hingegen werden zusätzliche Informationen über die Art des Inhaltes gegeben (z. B. Zitat).

Strukturelles Markup

TAG

BEDEUTUNG

<h1> </h1>, <h2> </h2>, <h3> </h3>, <h4> </h4>, <h5> </h5>, <h6> </h6>
  • h-Tags zeichnen Überschriften aus.
  • h1 ist die Hauptüberschrift, h2 bezeichnet Zwischenüberschriften.
  • Tags werden nach Rangordnung unterschiedlich groß dargestellt.
  • h6 ist am kleinsten.
<p> </p>
  • Kennzeichnet einen Absatz.
 
<b> </b>
  • Fettschrift (bold).
  • Kann für einzelne Wörter oder ganze Absätze genutzt werden.
<i> </i>
  • Kursiv ([i]italic)[/i].
  • Kann für einzelne Wörter oder ganze Absätze genutzt werden.
<sup> </sup>
  • Hochgestellte Zeichen z.B. 22
<sub> </sub>
  • Tiefgestellte Zeichen z.B. H2O
<br>
  • Erzwingt Umbruch.
<hr>
  • Erzeugt optische Trennlinie zwischen Inhalten.

Beispiel für strukturelles Markup:

Code:
[color=#ffffff][size=1][font=Courier][color=#f2545b][size=1]<!DOCTYPE [color=#f2545b]html[/color]>[/size][/color][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]html[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]head[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]title[/color]>[/size]Seitentitel[size=1]</[color=#f5c26b]title[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]</[color=#f5c26b]head[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]body[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]h1[/color]>[/size]Das ist eine Überschrift[size=1]</[color=#f5c26b]h1[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]h2[/color]>[/size]Das ist eine Zwischenüberschrift[size=1]</[color=#f5c26b]h2[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]p[/color]>[/size]Das ist ein [size=1]<[color=#f5c26b]b[/color]>[/size]Absatz.[size=1]</[color=#f5c26b]b[/color]>[/size][size=1]</[color=#f5c26b]p[/color]>[/size][size=1]<[color=#f5c26b]hr[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]p[/color]>[/size] Hier wird ein [size=1]<[color=#f5c26b]br[/color]>[/size] Umbruch erzwungen.[size=1]</[color=#f5c26b]p[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]</[color=#f5c26b]body[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]</[color=#f5c26b]html[/color]>[/size][/font][/size][/color]


[Bild: strukturelles-Markup-html.png?width=1099...p-html.png]

Semantisches Markup

TAG

BEDEUTUNG

<strong> </strong>
  • Zeichnet besonders wichtigen Inhalt aus.
  • Wird meist fett angezeigt.
<em> </em>
  • Kennzeichnet eine semantische Hervorhebung.
  • Wird oft [i]kursiv[/i] angezeigt.
<blockquote> </blockquote>
  • Kennzeichnet ein Zitat (ganzen Absatz).
<q> </q>
  • Kennzeichnet ein Zitat innerhalb des Textes.

Beispiel für semantisches Markup:

Code:
[color=#ffffff][size=1][font=Courier][color=#f2545b][size=1]<!DOCTYPE [color=#f2545b]html[/color]>[/size][/color][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]html[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]head[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]title[/color]>[/size]Seitentitel[size=1]</[color=#f5c26b]title[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]</[color=#f5c26b]head[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]body[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier] [/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]h1[/color]>[/size]Das ist eine Überschrift[size=1]</[color=#f5c26b]h1[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]h2[/color]>[/size]Das ist eine Zwischenüberschrift[size=1]</[color=#f5c26b]h2[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]p[/color]>[/size]Das ist ein [size=1]<[color=#f5c26b]strong[/color]>[/size]Absatz.[size=1]</[color=#f5c26b]strong[/color]>[/size][size=1]</[color=#f5c26b]p[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]p[/color]>[/size] Hier folgt eine [size=1]<[color=#f5c26b]em[/color]>[/size] Hervorhebung.[size=1]</[color=#f5c26b]em[/color]>[/size][size=1]</[color=#f5c26b]p[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]blockquote[/color]>[/size] "Hier folgt ein Zitat." [size=1]</[color=#f5c26b]blockquote[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier] [/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]</[color=#f5c26b]body[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]</[color=#f5c26b]html[/color]>[/size][/font][/size][/color]


[Bild: semantisches-Markup-html.png?width=898&n...p-html.png]
Listen und Tabellen

Listen unterscheiden sich in HTML in geordnete, ungeordnete sowie Definitionslisten. Sie lassen sich auch ineinander verschachteln. Neben Listen können Sie mit HTML auch Tabellen konfigurieren.

TAG

BEDEUTUNG

<ol> </ol>
  • Geordnete Liste.
  • Wird mit Ordnungszahlen ausgewiesen.
<ul> </ul>
  • Ungeordnete Liste.
  • Wird mit Aufzählungszeichen ausgewiesen.
<li> </li>
  • Listeneintrag.
  • Jedes Element einer Liste wird mit li-Tag angeführt.
<dl> </dl>
  • Definitionsliste.
<dt> </dt>
  • Definitionsbegriff.
<dd> </dd>
  • Definitionsbeschreibung.
<table> </table>
  • Eröffnet eine Tabelle.
<caption> </caption>
  • Definiert eine Tabellenüberschrift.
<tr> </tr>
  • Tabellenzeile.
  • Steht zu Beginn jeder neuen Tabellenzeile.
<td> </td>
  • Tabellendaten.
<th> <th>
  • Überschrift in einer Tabellenzeile.

Beispiel für die Verschachtelung einer geordneten und ungeordneten Liste:

Code:
[color=#ffffff][size=1][font=Courier][color=#f2545b][size=1]<!DOCTYPE [color=#f2545b]html[/color]>[/size][/color][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]html[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]head[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]title[/color]>[/size]Seitentitel[size=1]</[color=#f5c26b]title[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]</[color=#f5c26b]head[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]body[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier] [/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]ol[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]li[/color]>[/size] Erster Punkt [size=1]</[color=#f5c26b]li[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]li[/color]>[/size] Zweiter Punkt [size=1]</[color=#f5c26b]li[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]ul[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]li[/color]>[/size] Anfang [size=1]</[color=#f5c26b]li[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]li[/color]>[/size] Ende [size=1]</[color=#f5c26b]li[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]</[color=#f5c26b]ul[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]</[color=#f5c26b]ol[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier] [/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]</[color=#f5c26b]body[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]</[color=#f5c26b]html[/color]>[/size][/font][/size][/color]


[Bild: html-Verschachtelung-einer-geordneten-un...-Liste.png]
Verlinkungen
Links können mit HTML in vielfältigen Ausführungen gesetzt werden. Die Verlinkungen können sowohl auf interne und externe Seiten führen. Sie können außerdem neue Browserfenster öffnen, zu einem bestimmten Bereich der Seite springen oder das Email-Programm öffnen.

TAG

BEDEUTUNG

<a> </a>
  • Erstellt ein Link-Element.
  • Muss immer das href-Attribut enthalten.
href="[i]URL[/i]"
  • Attribut, das den Link enthält.
mailto:
  • Email-Link, der das E-Mail-Programm öffnet und Email-Adresse beinhaltet.
target="_blank"
  • Öffnet Link in neuem Browser-Fenster.
Id="[i]ID-NAME[/i]"
  • Attribut zur Kennzeichnung eines einzelnen Elements.
  • ID kann genutzt werden, um zu einem bestimmten Punkt einer Seite zu springen.
index.html
  • Kann für interne Links genutzt werden.
#[i]ID-NAME[/i]
  • ID-Selektor, der genutzt wird, um an eine bestimmte ID zu springen.

Beispiel für Verlinkungen:

Code:
[color=#ffffff][size=1][font=Courier][color=#f2545b][size=1]<!DOCTYPE [color=#f2545b]html[/color]>[/size][/color][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]html[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]head[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]title[/color]>[/size]Seitentitel[size=1]</[color=#f5c26b]title[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]</[color=#f5c26b]head[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]body[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier] [/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]h1[/color]>[/size] HubSpot Website [size=1]</[color=#f5c26b]h1[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]h2[/color]>[/size] Kontaktdaten [size=1]</[color=#f5c26b]h2[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]p[/color]>[/size] Kontaktieren Sie uns [size=1]<[color=#f5c26b]a[/color] href=[color=#f5c26b]"mailto:beispiel@email.com"[/color]>[/size] hier[size=1]</[color=#f5c26b]a[/color]>[/size].[size=1]</[color=#f5c26b]p[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier] [/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]h2[/color]>[/size] Weitere Informationen [size=1]</[color=#f5c26b]h2[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]p[/color]>[/size] Hier kommen Sie zu unserer [size=1]<[color=#f5c26b]a[/color] href=[color=#f5c26b]"https://www.hubspot.de/?hubs_signup-url=www.hubspot.de/&hubs_signup-cta=hsg-nav__linkWebseite."[/color] target=[color=#f5c26b]"_blank"[/color]>[/size] Website [size=1]</[color=#f5c26b]a[/color]>[/size][size=1]</[color=#f5c26b]p[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier] [/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]</[color=#f5c26b]body[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]</[color=#f5c26b]html[/color]>[/size][/font][/size][/color]


[Bild: html-Beispiel-fu%CC%88r-Verlinkungen.png...kungen.png]
Grafiken und Bilder
Bilder und Grafiken werden auf Webseiten idealerweise in den Formaten .jpg, .gif oder .png eingebunden. Die Auflösung sollte dabei 72 Pixel pro Zoll sein, um die beste Darstellung auf Computerbildschirmen zu gewährleisten.

TAG

BEDEUTUNG

<img>
  • Bild-Tag.
scr=“[i]BILD-URL[/i]“
  • Attribut sagt dem Browser, wo die Bilddatei gefunden werden kann.
alt=“[i]BESCHREIBUNG[/i]“
  • Alternativtext.
  • Beschreibung des Bildes für sehbehinderte Menschen.
title=“[i]TITEL[/i]“
  • Attribut definiert zusätzliche Informationen des Elementes.
 
height=“[i]PIXEL[/i]“
  • Höhe des Bildes (in Pixeln).
width=“[i]PIXEL[/i]“
  • Breite des Bildes (in Pixeln).

Beispiel für Logo-Einbindung:

Code:
[color=#ffffff][size=1][font=Courier][color=#f2545b][size=1]<!DOCTYPE [color=#f2545b]html[/color]>[/size][/color][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]html[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]head[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]title[/color]>[/size]Seitentitel[size=1]</[color=#f5c26b]title[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]</[color=#f5c26b]head[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]body[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]img[/color] src=[color=#f5c26b]"https://www.hubspot.com/hubfs/assets/hubspot.com/style-guide/brand-guidelines/guidelines_the-logo.svg"[/color] alt=[color=#f5c26b]"Logo Hubspot Schriftzug"[/color]/>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]</[color=#f5c26b]body[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]</[color=#f5c26b]html[/color]>[/size][/font][/size][/color]

[Bild: HTML-Beispiel-Logo-Einbindung.png?width=...indung.png]
Besondere HTML-Tags

TAG

BEDEUTUNG

<!-- -->
  • Kommentar.
  • sinnvoll, um langen Code zu strukturieren.
<div> </div>
  • Elemente werden in einem Block gruppiert; beginnen in einer neuen Zeile.
<span> </span>
  • Enthält ein Inline-Element und kann durch Attribute wie class oder id definiert werden.
class="[i]CLASS-NAME[/i]"