Über mich

Startseite arrow Tipps & Tricks arrow HTML Vorlage - Aller Anfang ist gemacht

HTML Vorlage - Aller Anfang ist gemacht

Dienstag, 16. Oktober 2007
Geschrieben von Armin Vieweg
Jedes mal wenn ich ein neues Projekt starte nehme ich Zugriff auf einen Ordner, in dem ich ein paar Dateien als Vorlage verwende. Hier ist meine Vorlage.

Moderne Web-Editoren wie z.B. Notepad++ haben sogenannte Templates zur Verfügung, die einem das Grundkonstrukt einer Website vorgeben.

Ich persönlich verzichte auf solche Standardvorlagen und habe da meine eigene Variante bestehend aus fertig miteinander verlinkten Dateien und Verzeichnissen.

Das komplette Vorlagen-Paket, was ich nutze, könnt Ihr Euch am Ende des Beitrages als ZIP-Datei herunterladen.



Bestandteile der Vorlage

Zum einen gibt es eine Index-HTML-Datei und eine damit verknüpfte CSS-Datei. Darüberhinaus gibt es einen "images" Ordner, in dem ein 1x1-transparentes GIF-Bild enthalten ist (Spacer). Ebenfalls darin enthalten ist ein Favicon, was aber nur als Platzhalter dient.


Die HTML-Datei
Innerhalb der HTML-Vorlage gibt es einen vollständigen Head. Und einen kleinen Content-Bereich, der aber auch nur als Vorlage dient.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
    <title>Titel der Seite</title>
   
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <meta name="language" content="de">
    <meta name="Robots" content="index, follow, noodp">
    <meta name="Keywords" lang="de" content="Schlüsselwörter, ProfessorWeb">
    <meta name="Description" lang="de" content="Beschreibung">
    <meta http-equiv="expires" content="0">

    <meta name="copyright" content="ProfessorWeb | www.professorweb.de">
    <meta name="author" content="ProfessorWeb | www.professorweb.de">
   
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="shortcut icon" href="images/favicon.ico">
   
    <script type="text/javascript">
       
    </script>
</head>

<body>

    <div>
        <h1>Headline</h1>
        Content
    </div>

</body>

</html>


Was ich persönlich noch ganz gerne mache, ist ein Hinweis auf den Autor des Codes in Form eines kleinen ASCII-Arts ganz oben in der HTML-Datei.


Die CSS-Datei
Im Stylesheet sind ein paar Grundlegende Definitionen bereits vorgegeben.

* {
    margin:0;
    padding:0;
    border:0;
}

body {
    background:#DEDEDE;
    margin:0;
    font-family:Verdana, Tahoma, Arial, sans-serif;
    font-size:11px;
    color:#232323;
}




/* Standarddefinitionen */
a:link, a:visited, a:active, a:focus {
    text-decoration:underline;
    color:#FF0000;
}
a:hover {
    text-decoration:none;
}

.left {
    float:left;
}

.right {
    float:right;
}

.clear {
    clear:both;
    height:1px;
    font-size:1px;
    line-height:1px;
}



Diese Vorlage ist Grundgerüst basierend auf HTML 4.01 Transitional, für alle meine Projekte. Natürlich muss jeder die für sich ideale Vorlage selbst erstellen. Meine Vorlage darf aber gerne als Ausgangspunkt genutzt werden.





Download:

Download ProfessorWeb HTML Vorlage





  Kommentare (4)
 1 Geschrieben von: Florian, am 23.10.2007 um 11:37
Hallo, 
 
ist mal ne gute Idee sowas online zu stellen. 
Finde ich mal eine sehr gute Vorlage! 
 
Merci! 
Gruß 
.-Florian-.
 2 Geschrieben von: Computerfrek, am 21.01.2010 um 18:09
Für Anfänger gibt es auf www.news4kids.de auch tolle Anleitungen.
 3 Geschrieben von: ljj, am 02.03.2010 um 14:36
46+qwed
 4 Geschrieben von: yopis, am 23.12.2010 um 08:36
super Vorlage, vielen Dank, hat mir sehr geholfen! Weiter so!!!
Letzte Aktualisierung ( Samstag, 31. Mai 2008 )
 
< Zurück   Weiter >