Der Kopf einer HTML-Datei (Head)



Werbung
Jimdo Onlineshop

Im Kopfteil einer HTML-Datei finden Sie unter anderem den Titel, die Metatags und evtl. extern definierte Stylesheets.

Nachdem der Dokumenttyp definiert ist, fĂĽgen wir jetzt Schritt fĂĽr Schritt den Kopf der HTML-Datei zusammen. Die jeweils fett markierten Teile in der hier angegebenen Reihenfolge in die index.html einfĂĽgen!

Beginn HTML:

<html>

Dieser TAG leitet den HTML-Bereich ein. Tags erkennen Sie daran, dass Sie zwischen einem öffnenden Winkel < und einem schlieĂźenden Winkel > stehen. Tags sind Steuerbefehle, die den Browser anweisen, was passieren und angezeigt werden soll. Beginn und Ende werden wie folgt dargestellt: <html> ist der Beginn eines Steuerbefehles und </html> ist das Ende eines Steuerbefehles. Ein HTML-Dokument beginnt mit dem öffnenden <html> am Anfang der Datei, das schlieĂźende </html> steht immer ganz am Ende eines HTML-Dokumentes. Alles was auĂźerhalb dieser beiden Tags steht wird von den Browsern nicht dargestellt. Kopieren Sie den beginnenden Tag <html> und fĂĽgen Sie diesen in die Datei index.html direkt nach der Angabe des Dokumenttypes ein.

Sollte dann so aussehen:

Beginn HEAD:

<head>

Dieser TAG leitet den Kopf-Bereich ein. Kopieren und in index.html nach dem HTML-TAG einfĂĽgen.

Das sollte dann so aussehen:

Jetzt kommt der Titel der Homepage. Der Titel wird später im Browserfenster oben als Titelzeile angezeigt, zudem nutzen Suchmaschinen den Titel. Auch bei den Lesezeichen werden Webseiten durch diesen Titel-Tag angezeigt.

<title>Titel der Homepage</title>

Zwischen den einleitenden und dem schlieĂźenden title-Tag befindet sich der später angezeigte Titel der Homepage. Diesen Titel können Sie an Ihren Wunschtitel anpassen. In meiner Lektionsdatei habe ich den Titel mit Muster-Homepage benannt und dann wieder in die index.html eingefĂĽgt. Kopieren und nach dem HEAD-TAG einfĂĽgen.

Das sieht dann so aus:

Nachdem Sie den Titel definiert haben, kommen nun die Metatags. Die Metatags enthalten ĂĽberwiegend Informationen fĂĽr Suchmaschinen. Wir haben uns hier auf die absolut wichtigsten Metatags beschränkt. Bitte fĂĽgen Sie die Metatags alle in die index.html ein, jeweils mit Ihren gewĂĽnschten Angaben. Die Angaben innerhalb der AnfĂĽhrungszeichen können Sie ändern.

  • <meta http-equiv=“Content-Type“ content=“text/html; charset=ISO-8859-1″>
    Definition des Zeichensatz. Diese Angabe unverändert übernehmen.
    Informationen zum Zeichensatz finden Sie unter: wiki.selfhtml.org/wiki/HTML/Kopfdaten/meta#zeichenkodierung
  • <meta name=“robots“ content=“index,follow“>
    Dies ist eine Anweisung an Suchmaschinen (englisch=robots) die Seite zu indizieren (index) und den auf der Seite vorhandenen Links zu folgen (follow).
  • <meta name=“description“ content=“Muster-Homepage mit einem Beispiel, wie eine Homepage erstellt wird.“>
    Dies ist ein Beschreibungstext (Beschreibung englisch=description) der Homepage. Wichtig für Suchmaschinen, der Beschreibungstext wird häufig durchsucht und bei den Ergebnissen als Beschreibung des Suchtreffers angezeigt.
  • <meta name=“keywords“ content=“Muster, Homepage, Beispiel, der, Erstellung, einer, Webseite“>
    Die Keywords sind die sogenannten Schlüsselwörter, diese dienen wieder den Suchmaschinen, um Ihre Seite zu indizieren und bei Abfrage der Schlüsselwörter Ihre Webseite als Treffer anzuzeigen. Die einzelnen Schlüsselwörter werden durch Kommas getrennt.
  • <meta name=“language“ content=“de“>
    Angabe fĂĽr die Sprache der Webseite. de steht dabei fĂĽr Deutsch.

Diese fĂĽnf Metatags sind die wichtigsten Angaben fĂĽr Suchmaschinen. Es gibt weitere Metatags, mehr Infos dazu finden Sie hier: wiki.selfhtml.org/wiki/HTML/Kopfdaten/meta

Nachdem Sie die Metatags eingefĂĽgt haben, sollte Ihre Datei index.html so aussehen:

Nach den Metatags folgt die Angabe zum Stylesheet. Wir verwenden in unserer Muster-Homepage ein zentral definiertes Stylesheet. Das Stylesheet dient dazu, das Design der Webseite festzulegen (Trennung von Inhalt und Design).

<link rel=“stylesheet“ type=“text/css“ media=“screen, projection“ href=“stylesheet.css“>

Das Stylesheet erstellen wir erst später, fügen Sie aber die Angabe schon in den Kopfteil von index.html ein.

Jetzt fehlt nur noch die Angabe zum Favicon:

<link rel=“shortcut icon“ href=“favicon.ico“>

Das Favicon ist ein Icon, der beim Aufruf Ihrer Homepage angezeigt wird. Schreiben Sie die Angabe des Favicons mit in die index.html, wir erstellen das Favicon später.

Nach dem EinfĂĽgen der Angaben zum Stylesheet und zum Favicon sollte Ihre index.html so aussehen:

Jetzt sind alle notwendigen Angaben im Kopfteil erfasst und Sie können den HEAD-TAG schließen:

</head>

FĂĽgen Sie den abschlieĂźenden HEAD-TAG in Ihre index.html ein und wir sind mit dem Kopfteil fertig. Das Ergebnis sollte so aussehen:

Jetzt können Sie richtig stolz sein. Sie haben sich selbst einen kompletten Kopfbereich einer HTML-Seite zusammengestellt.

Hier nochmals zur Vertiefung der komplette Quelltext, der jetzt in Ihrer index.html enthalten sein sollte (eventuell mit Ihren Ă„nderungen):

<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.01 Transitional//EN“ „http://www.w3.org/TR/html4/loose.dtd“>
<html>
<head>
<title>Muster-Homepage</title>
<meta http-equiv=“Content-Type“ content=“text/html; charset=ISO-8859-1″>
<meta name=“robots“ content=“index,follow“>
<meta name=“description“ content=“Muster-Homepage mit einem Beispiel, wie eine Homepage erstellt wird.“>
<meta name=“keywords“ content=“Muster, Homepage, Beispiel, der, Erstellung, einer, Webseite“>
<meta name=“language“ content=“de“>
<link rel=“stylesheet“ type=“text/css“ media=“screen, projection“ href=“stylesheet.css“>
<link rel=“shortcut icon“ href=“favicon.ico“>
</head>

Jetzt ist der Kopfbereich der HTML-Seite fertig und Sie können mit dem Körper der HTML-Datei weitermachen.



Werbung
Kostenloses Logo erstellen

Fehler melden Sie haben einen Fehler auf meine-erste-homepage.com gefunden? Informieren Sie uns, damit wir den Fehler beheben können!

Neue Seite melden Sie haben ein neues Webmastertool für uns? Hier können Sie die für Webmaster nützliche Webseite bei uns anmelden!
Erstellt mit ❤ Liebe und Wordpress