HTML Grundlagen – Teil 1

Design

Wenn es um das Thema HTML geht, stehen den meisten Menschen viele Fragezeichen ins Gesicht geschrieben. So erging es auch mir. Doch dank ein paar hilfreichen Tipps und meinem Interesse an der Erstellung einer Webseite, konnte ich mir einige Grundlagen von HTML aneignen. Diese möchte ich nun mit Ihnen teilen.

Da HTML ein sehr weitreichendes Thema ist, werde ich dieses Thema in zwei Blogposts unterteilen. Im 1. Teil lernen Sie die HTML-Grundlagen kennen. Im 2. Teil werde ich Ihnen dann weitere hilfreiche Tags sowie eine Einführung in CSS geben.

HTML Code

HTML – Was ist das?

HTML (= Hypertext Markup Language) bedeutet zu Deutsch „Hypertext Beschreibungssprache“. Das bedeutet, dass sich mithilfe von HTML Texte in Überschriften, Absätze, Listen und Tabellen gliedern lassen können. Eine Besonderheit stellt die Möglichkeit dar, an eine andere Stelle innerhalb eines Dokumentes oder an eine Stelle in einem anderen Dokument zu wechseln. Dies ist nichts anderes als ein Hyperlink, kurzum: Link.

 

HTML ist neben WordPress fast immer die Grundlage einer jeden Webseite. Der Vorteil von HTML: das Gerüst einer jeden Webseite kann im Browser sichtbar gemacht werden. Dies geht über Rechtsklick > Seitenquelltext anzeigen.

Seitenquelltext anzeigen

Auch wenn die HTML-Sprache auf den ersten Blick verwirrend sein kann, ist sie recht simpel aufgebaut und kann leicht erlernt werden.

Um ein HTML-Dokument zu erstellen, muss die Dateiendung „.html“ lauten. Der Inhalt dieser Datei wird von dem jeweiligen Browser interpretiert und Ihnen nach bestimmten Regeln strukturiert angezeigt. HTML ist also für die Struktur und nicht für das Design einer Seite da.

 

HTML Struktur und Tags

Ein HTML-Dokument ist wie folgt aufgebaut:

 

  1. Head (Kopf)
  2. Body (Körper)

 

In HTML-Sprache sieht der Aufbau wie folgt aus:

 

1 <html>

2 <head>

3          <title>Seitentitel</title>

4 </head>

5 <body>

6          Inhalt Ihrer Webseite

7 </body>

8 </html>

 

Erklärung:

HTML = Der HTML-Tag muss immer zu Anfang und Ende eines HTML-Dokumentes gesetzt werden. Nur so weiß der Browser, dass es sich dabei um einen HTML-Code handelt. Somit wird alles was sich zwischen dem Anfangs- und End-HTML-Tag als HTML-Code interpretiert.

Head = Der Header beinhaltet Informationen zur HTML Datei. In unserem Beispiel ist dies nur der Seitentitel. Dieser Text ist in der Fensterleiste des Browsers zu sehen. Fensterleiste Browser

Body = Im Bereich des Body-Tags finden wir den Inhalt der Webseite. Dies ist fast der komplette Text, den wir auf einer Webseite sehen können.

 

Was aber ist ein HTML-Tag?

Die eckigen Klammern beinhalten sogenannte HTML-Tags, zu deutsch: HTML-Befehle. Mit solchen HTML-Tags kann neben der Bestimmung des Body- und Head-Abschnittes z.B. auch die Schriftgröße, Schriftart und Dicke geändert werden.

Als Beispiel: Wir erstellen eine Webseite zum Thema HTML Grundlagen. Sobald der Nutzer auf unsere Seite gelangt, möchten wir, dass er die Überschrift „HTML Grundlagen“ liest. Somit brauchen wir folgenden Tag:

<h1>HTML Grundlagen</h1>

h1 steht in diesem Fall für die größte Überschrift, die es gibt. Von dem h-Tag gibt es noch folgende Variationen, bei der die aufsteigende Zahl für eine kleinere Headline steht: h2, h3, h4, h5 und h6.

Aus Gründen der Übersichtlichkeit sollten HTML-Tags immer klein geschrieben werden.

 

Achtung!

Ganz wichtig: Ein Befehl beinhaltet immer einen Anfangs-Tag und einen End-Tag. Dazwischen befindet sich der Text, für den der Tag gelten soll.

<Anfangs-Tag>Text</End-Tag>

 

HTML Befehle

In den nachfolgenden Tabellen werde ich Ihnen die wichtigsten HTML-Befehle vorstellen.

 

 

T E X T    S T R U K T U R I E R E N

HTML-Befehl

Beschreibung

<h1> … </h1>

Größte Überschrift –

sollte 1-Mal auf jeder Seite sein

<h2> … </h2>

bis

<h6> … </h6>

Unter-Überschriften –

sollten immer in logischer Reihenfolge verwendet werden. Je größer die Zahl, desto kleiner die Überschrift

<p> … </p>

Absatz

<br>

Zeilenumbruch –

Dieser Tag braucht ausnahmsweise keinen schließenden Tag

<hr>

Trennlinie –

trennt unterschiedliche Inhalte (benötigt auch keinen schließenden Tag)

 

 

T E X T    B E A R B E I T E N

HTML-Befehl

Beschreibung
<b> … </b>

oder

<strong> … </strong>

Fett geschriebener Text

<i> … </i>

oder

<em> … </em>

Kursiver Text
<del> … </del>

Durchgestrichener Text

<small> … </small>

Kleingedruckte

<u> … </u>

Unterstrichener Text

 

 

A U F Z Ä H L U N G E N 

HTML-Befehl

Beschreibung

<li> … </li>

Listen-Aufzählung

<ul> … </ul>

Unsortierte Liste

<ol> … </ol>

Nummerierte Liste

Achtung!

Ganz wichtig: Jeder einzelne Aufzählungs-Punkt muss von dem HTML-Tag umschlossen werden. Als Beispiel:

<li>Punkt 1</li>

<li>Punkt 2</li> usw.

 

 

L I N K S   &   V E R W E I S E

HTML-Befehl

Beschreibung
<a href=“http://www.morefiremedia.de“> … </a>

Externer Link

<a href=“mailto:abc@web.de“>abc@web.de</a>

Hier kann eine E-Mail-Adresse verlinkt werden. Wenn der Nutzer auf die E-Mail-Adresse klickt, öffnet sich das vom Nutzer (falls vorhanden) installierte E-Mail-Programm.

 

 

K O M M E N T A R E 

HTML-Befehl

Beschreibung
<!–…–>

Bei der Verwendung dieses Tags können Kommentare in den HTML-Code hineingeschrieben werden. Diese Kommentare sind im Browser für den Nutzer jedoch nicht sichtbar. Sinnvoll ist dies z.B. wenn Conversion-Codes eingebaut werden und davor eine Überschrift zur Wiedererkennung stehen soll. Diese soll im Browser für den Nutzer jedoch nicht sichtbar sein.

 

 

G R A F I K E N    E I N F Ü G E N

HTML-Befehl Beschreibung
<img src=“bild.jpg“ width=“100“ height=“70“ alt=“Beschreibung des Bildes“> Der img-Befehl hat keinen Schluss-Tag. Im Attribut „src“ steht die relative URL der Datei, in diesem Fall eine Grafik-Datei.

Die Attribute „width“ und „height“ stehen für die Breite und Höhe des Bildes in Pixeln. „alt“ steht für die alternative Bildbeschreibung. Hier sollte ein Text stehen, der dem Nutzer angezeigt wird, falls ein Browser das Bild nicht darstellen sollte.

 

Im zweiten Teil dieser Blog-Serie erkläre ich Ihnen wie CSS und HTML miteinander zusammenhängen und was Sie dank CSS noch alles anpassen können. Dank dieser Checkliste können Sie auch vorab schon schauen, was Sie sonst noch für die Erstellung einer Landingpage benötigen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.



Weitere Artikel zu Design

Social Media Netzwerke entwickeln ihr Benutzeroberflächen regelmäßig... Mehr lesen »

Aufgeräumt, aber unübersichtlich! Trotz Raster- und Kachelsystem ist die... Mehr lesen »

Bei der heutigen Landingpage handelt es sich um eine Microsite bei der man... Mehr lesen »


Weitere Artikel von Romina
AdWords Online Marketing
Das SEACamp 2017 öffnete auch dieses Jahr wieder seine Tore in Jena.... Mehr lesen »

Online Marketing
Wie sieht die Zukunft von Native Advertising aus? Was müssen... Mehr lesen »

AdWords
So erstellen Sie den Bericht „Bezahlte und organische Suche“... Mehr lesen »

Top-Beiträge

Facebook

Bilder posten auf Facebook

Nicht jedes Bild passt in das neue Konzept der Facebook Chronik. Aber wie müssen Bilder jetzt... Mehr lesen »
Design

13 coole Header-Effekte für Webseiten

Ich zeige euch 13 coole Header-Effekte für Webseiten, die beim Scrollen animiert werden. Manche... Mehr lesen »
AdWords

5 Tipps zur Verbesserung der CTR

Update 04/2016   Die CTR (Click-Through-Rate, also die Klickrate) spielt eine große Rolle in... Mehr lesen »
^