HTML Tipps

Geschätzte Lesezeit: 3 Minuten, 55 Sekunden

In diesem Artikel für Einsteiger geben wir Euch einen Überblick über HTML und stellen ein paar nützliche Tipps & Tricks zum Arbeiten mit HTML vor.
HTML Tipps
HTML ist die Beschreibungssprache für Webseiten und steht für Hypertext Markup Language. In diesem Artikel erklären wir die Grundlagen von HTML und wie man eigene HTML-Seiten baut.

HTML – Die Beschreibungssprache für Internetseiten

HTML basiert im wesentlichen auf Tags. Ein Tag ist eine Art Steueranweisung, die mit einer spitzen Klammer, die nach links zeigt, beginnt und mit einer spitzen Klammer, die nach rechts zeigt, endet.
Ein Tag kann entweder atomar sein, dann schließt er sich selbst direkt wieder. Beispielsweise
<br/>

Es gibt auch Tags, die sich schließen, indem der Tag mit vorangestelltem Slash verwendet wird, beispielsweise so:
<a href="http://www.erfolgsrezepte-online.de">Auf geht's zu ERFOLGSREZEPTE ONLINE</a>

Der br-Tag ist für einen Zeilenvorschub verantwortlich (BR steht für BReak). Dafür ist es nicht notwendig, weitere Angaben zu machen, ein zeilenumbruch bleibt ein Zeilenumbruch, er hat beispielsweise keine Farbe.

Anders sieht es bei einem Link aus, siehe das zweite Beispiel mit dem a-Tag:
Ein Link besteht aus zwei wesentlichen Teilen:

  1. Einem Linkziel, also einer Internetadresse (URL): Dieses Linkziel ist quasi unsichtbar, es wird sichtbar, wenn man den Link anklickt und sich die hinterlegte URL öffnet. Wenn man genau hinsieht, kann man das Linkziel auch in der Statuszeile des Browsers sehen, wenn man mit der Maus über einen Link fährt (sogenanntes Hovern)
  2. Einem Anzeigetext: Dieser Text wird angezeigt und diesen sieht der User. Klickt der User auf diesen Text, öffnet sich das Linkziel. Natürlich ist es auch möglich – und das wird auch öfters so gemacht – als Anzeigetext die URL aus dem Linkziel anzugeben (meist lässt man dann das http:// weg, und schreibt nur www.erfolgsrezepte-online.de)

Tabellen mit HTML erstellen

Eine Tabelle besteht aus Spalten und Zeilen sowie einer optionalen Kopfzeile. Der Tag für eine Tabelle lautet <table>. Eine Zeile deklariert man mit dem HTML Tag <tr> und eine Spalte mit <td>. Die optionale Kopfzeile einer Tabelle gibt man mit <thead> an, innerhalb dieser kann man <th> für die Spaltenüberschriften verwenden (anstatt von <td> für normale Zeilen).

Eine HTML Tabelle hat also folgenden möglichen Aufbau:


<table>
<thead>
<tr>
<th>Überschrift Spalte 1</th>
<th>Überschrift Spalte 2</th>
<th>Überschrift Spalte 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Zelle 1,1</td>
<td>Zelle 2,1</td>
<td>Zelle 3,1</td>
</tr>
<tr>
<td>Zelle 1,2</td>
<td>Zelle 2,2</td>
<td>Zelle 3,2</td>
</tr>
</tbody>
</table>

Die Anzahl der Spalten und Zeilen ist beliebig, im Beispiel sind 3 Spalten und zwei Zeilen plus eine Kopfzeile angegeben. Das Ergebnis dieser Deklaration wird so dargestellt:

Überschrift Spalte 1Überschrift Spalte 2Überschrift Spalte 3
Zelle 1,1Zelle 2,1Zelle 3,1
Zelle 1,2Zelle 2,2Zelle 3,2

CSS – Verpasse Deiner Webseite ein Layout

Mit HTML-Tags kann man das Grundlayout des Dokuments definieren, also Absätze, Zeilenumbrüche, Links, Listen, Tabellen. Aber auch die Grundstruktur des Dokuments wird mit Tags angegeben: Jedes Dokument besteht aus folgenden Teilen:

  • Kopf (head-Tag): Er enthält Meta-Informationen, wie den Titel des Dokuments, zu verwendende Javascript-Scripte und Suchmaschinen-relevante Dinge wie die Meta-Beschreibung des Dokuments
  • Körper (body-Tag): Hier steht der eigentliche Inhalt des Dokuments drin, also der anzuzeigende Text usw. Auch das, was Du gerade hier liest, steht im Body-Tag

Doch was ist, wenn man einem Text eine andere Farbe geben möchte, wenn der Text in einer anderen Schriftart oder fett gedruckt dargestellt werden soll? Genau solche Dinge werden mit CSS-Anweisungen ausgesteuert. Hier gibt es drei Möglichkeiten:

  1. CSS-Anweisungen inline in den HTML-Tags als style-Attribut verankern (erklären wir später)
  2. CSS-Anweisung als Klasse angeben
  3. CSS-Anweisung als Identifikator angeben

Zu Möglichkeit 1 ein Beispiel für eine Inline, also innerhalb des Tags selbst konkret angegeben CSS-Steueranweisung:

<div style="color:red">Das ist ein Text, der in roter Farbe angezeigt wird.</div>

Das Ergebnis, so wie es der User sieht, erscheint dann so:

Das ist ein Text, der in roter Farbe angezeigt wird.

Das Zusammenspiel von HTML & CSS

Wie bekommt man nun CSS-Anweisungen und HTML-Dateien zusammen?
Bei Inline deklarierten CSS-Anweisungen über das style-Attribut stellt sich die Frage nicht, denn da ist das CSS ja schon jeweils an der benötigten Stelle im HTML-Dokument.

HTML Tipps: CSS auslagern

Eleganter ist es allerdings, auch hinsichtlich der Übersichtlichkeit und Wiederverwendbarkeit, wenn man die CSS-Anweisungen in einer eigenen Datei auslagert. Das hat übrigens auch Vorteile beim Ranking (SEO und so weiter): Denn auch die Ladezeit spielt bei SEO eine Rolle, und ausgelagerte CSS-Anweisungen können gecached werden!
Also: Die beste Option ist es, eine eigene Textdatei anzulegen, die dann so aussieht:

.roterText {
color:red;
}
... weitere CSS-Anweisungen

Die Datei wird dann mit der Endung .css abgespeichert und wie folgt in die HTML-Datei innerhalb des head-Tags eingebunden:

<link rel="stylesheet" href="dateiname.css" />

Alernativ, aber nicht ganz so elegant ist es, solche CSS-Anweisungen im head-Tag des HTML-Dokuments einzubetten:

<style>
.roterText {
color:red;
}
</style>

Der style-Tag sorgt dafür, dass der davon eingeschlossene Text als CSS interpretiert wird.

HTML & CSS in der Praxis

Mehr dazu und weitere HTML Tipps erfahrt in unserem nächsten Artikel. Schaut bitte wieder rein, es lohnt sich!
Vielleicht interessiert Dich auch: Bootstrap 3, das CSS-Framework . Bootstrap erleichtert Dir das Arbeiten mit CSS enorm. Vor allem, wenn es um das Erstellen von responsiven Websites (mobil) geht.


Wie hat Dir der Artikel gefallen?

HTML Tipps: 1 Stern2 Sterne3 Sterne4 Sterne5 Sterne 4,75 von 5 Punkten, basieren auf 4 abgegebenen Stimmen.

Dr. Klaus Meffert
Folge mir

Dr. Klaus Meffert

Der Autor ist Diplom-Informatiker und hat neben seinem Beruf als Organisationsberater zum Doktoringenieur promoviert. Er besitzt 30 Jahre Erfahrung im IT-Bereich (Software-Lösungen, Apps, Web, Online-Marketing, IT-Beratung) ist mehrfacher Buchautor und Autor zahlreicher Fachartikel. Er hilft Unternehmen mit maßgeschneiderten Software-Lösungen und mit besseren Google-Rankings zu mehr Erfolg.
Dr. Klaus Meffert
Folge mir

Weitere Beiträge

Schreibe einen Kommentar

Als Name kann auch ein Pseudonym angegeben werden. Deine Email-Adresse wird nicht veröffentlicht. Siehe unsere Datenschutzbestimmungen