Der Kopf einer HTML-Datei (Head)
Im Kopfteil einer HTML-Datei finden Sie unter anderem den Titel, die Metatags und evtl. extern definierte Stylesheets. Doch dazu nachfolgend mehr:
Nachdem der Dokumenttyp definiert ist, fügen wir jetzt Schritt für Schritt den Kopf der HTML-Datei zusammen. Die jeweils rot markierten Teile in der hier angegebenen Reihenfolge in die index.html einfügen!
Beginn HTML:
<html>
Dieser TAG (< und > kennzeichnen sogenannte Tags. 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.)
leitet den HTML-Bereich ein. Wird erst ganz am Ende der Datei wieder geschlossen. Kopieren und in index.html nach dem Dokumenttyp einfügen.
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:
de.selfhtml.org/html/kopfdaten/meta.htm#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: http://de.selfhtml.org/html/kopfdaten/meta.htm
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>
| Twittern |
Weitere interessante Rubriken / Webseiten zu diesem Themenbereich:
- Generatoren - mit den Online-Generatoren in unserer Generator-Sammlung können Sie sich viele nützliche Dinge für Webmaster online erstellen lassen
- Homepage-FAQS - die häufigsten Fragen rund um die eigene Homepage mit den dazugehörigen Antworten
- Homepage-Forum - Hilfe bei Fragen rund um die eigene Homepage
- Top-Links - die besten Links für Webmaster
Newsbox
Nachfolgend die 5 neuesten Nachrichten, Links und Tools für Webmaster:Werbeheini.name - schalten Sie kostenlos einen Zeitbanner
www.werbeheini.name - hier können Sie einen Zeitbanner schalten, dass heißt Ihr Banner wird für gewisse Zeit angezeigt (z.B. bis der nächste User sein Banner einstellt). Die Schaltung ist laut Anbieter kostenlos, zudem ist unter www.werbeheini.name/download.php das Script auch zum Download und Eigennutzung erhältlich. Desweiteren gibt es noch einige Webmastertools bei Werbeheini.name.
Geschrieben am 28 Jan 2012 von Karl Oltmanns
Google Gadget Fish für Ihre Webseite
Google Gadget Fish - hier findet sich ein sehr schönes Google-Gadget. Sie können online Fische füttern (einfach mit der Maus aufs Wasser klicken) - schon schwimmt etwas Fischfutter auf dem Wasser und die Fische kommen herbei, um sich die Leckerlies zu schnappen.
Geschrieben am 28 Jan 2012 von Karl Oltmanns
ms5.eu - kostenloser und werbefreier Webspace
www.ms5.eu - kostenloser Webspace mit folgenden Features nach Angaben auf der Webseite (ohne Gewähr auf Verfügbarkeit): 5 GB Webspace, PHP5, 5x MySQL5, 5x FTP, unlimitierter Traffic, unbegrenzte Dateigrößen, eigene Domains aufschaltbar, 128 MB Prozessspeicher, 60 Sekunden Skriptlaufzeit, 128 MB max. Upload-Size (PHP), PHPMyAdmin vorinstalliert, werbefreier Webspace
Geschrieben am 28 Jan 2012 von Karl Oltmanns
Gute Keywords finden ohne Keyword-Tool
Arno Ashoff beschreibt in seinem Blog, wie man gute Keywords findet, ohne eines der klassischen Keyword-Tools zu nutzen. Hier geht es zu seinem Blogbeitrag: www.website-seo-check.com/keywords/gute-keywords-finden-ohne-keyword-tool-2.html
Geschrieben am 28 Jan 2012 von Karl Oltmanns
ReinHTML Dialog Designer
Eine ganz andere Art, Webformulare für den Kontakt mit Ihren Webseiten-Besuchern zu erstellen bietet der ReinHTML Dialog Designer an. Das Tool befindet sich aktuell im Beta-Stadium und kann kostenlos getestet werden. Ziel ist es, reine HTML & CSS Kontaktformulare ohne die Nutzung von Javascript zu erstellen. Die Formulare können online im Desinger erstellt und dann in die eigene Webseite im Quellcode eingebaut werden. Hier geht es zu der Webseite des Projektes ReinHTML Dialog Designer: www.reinhtml.eu
Geschrieben am 28 Jan 2012 von Karl Oltmanns
Mehr Nachrichten in unserer Rubrik "Updates und News für Webmaster"
Feedback und Informationen zu meine-erste-homepage.com:
meine-erste-homepage.com ist bei 1&1 Webhosting gehostet.
