{"id":44,"date":"2012-08-08T18:57:52","date_gmt":"2012-08-08T18:57:52","guid":{"rendered":"https:\/\/ai.hasebox.de\/index.php\/2012\/08\/08\/6-das-grundgeruest-einer-html-datei\/"},"modified":"2025-11-14T07:36:17","modified_gmt":"2025-11-14T07:36:17","slug":"6-das-grundgeruest-einer-html-datei","status":"publish","type":"post","link":"https:\/\/ai.hasebox.de\/index.php\/2012\/08\/08\/6-das-grundgeruest-einer-html-datei\/","title":{"rendered":"6 Das Grundger\u00fcst einer HTML Datei"},"content":{"rendered":"

 <\/p>\n

Grundger\u00fcst einer HTML-Seite – DOCTYPE-Definition<\/h1>\n

 <\/p>\n

Wie haben bisher mit den 2 HTML-TAGs bereits Inhalte ausgezeichnet, damit im Browserfenster dieser Inhalt angezeigt wird.<\/p>\n

Beispiel mit bisherigen HTML-TAGs<\/p>\n

<h1>HTML-Tutorial<\/h1>   <p>der erster Absatz ...<\/p><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/pre>\n
Allerdings gibt es neben dem Inhalt, welchen man im Browserfenster sieht, weitere Informationen \u00fcber jede Einzelseite. Zu diesen weiteren Informationen geh\u00f6rt beispielsweise der Titel der Einzelseite (der im Fensterkopf des Browsers angezeigt wird). Es gibt noch weitere Metainformationen, die wie in einem sp\u00e4teren Kapitel ansehen.<\/p>\n
Daf\u00fcr gibt es diesen Grundaufbau, der auf jeder Seite vorhanden sein sollte. Er besteht aus 3 Bereichen.<\/p>\n
DOCTYPE<\/p>\n
HEAD<\/p>\n
BODY<\/p>\n
Im Bereich DOCTYPE wird dem Internet-Browser mitgeteilt, was er an Befehlen erwarten kann und an welchem Standard man sich bei der Erstellung der Seite gehalten hat.<\/p>\n
Im Bereich HEAD stecken die Metainformationen \u00fcber die Seite, also beispielsweise der Titel der Seite, der im Browserfensterkopf angezeigt wird.<\/p>\n
Im Bereich BODY stecken der eigentliche Inhalt der Seite und die HTML-TAGs.<\/p>\n
Eine HTML-Seite hat also einen Grundaufbau. Dieses hat in der Minimalversion folgenden Aufbau:<\/p>\n
<!DOCTYPE html>

<\/span><html>

   <head> 
 <title>Beispiel HTML Grundger\u00fcst <\/title> 
 <meta charset=\"UTF-8\" \/> 
 <meta name=\"description\" content=\"Kurzbeschreibung\" \/>   

 <link href=\"style.css\" type=\"text\/css\" rel=\"stylesheet\" \/>   
 <\/head>  


 <body>   

Danke an den Befehl -  <\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>charset=\"UTF-8 
<\/br>
<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/br><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>
<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>Umlaute werden nun auch dargestellt : \u00dc \u00d6 \u00c4 \u00fc \u00f6 \u00e4
 <\/body>
 
<\/html><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/pre>\n
DOCTYPE-Definition – erste Zeile jeder Website<\/h2>\n
\u00dcber die DOCTYPE-Definition teilen Sie dem Webbrowser mit, was er in der folgenden Datei erwarten kann und welche HTML-Befehle zul\u00e4ssig sind.  Achte beim \u00dcbernehmen auf Gro\u00df- und Kleinschreibung. Am besten einfach kopieren.<\/p>\n
Der HTML-TAG <html><\/h2>\n
Jetzt kommt der Anfangs-TAG <html><\/p>\n
Mit weiteren Angaben wie Beispielweise welche Sprache f\u00fcr den Inhalt der Seite verwendet wird. Diese Zeile einfach 1 zu 1 \u00fcbernehmen (sofern Sie deutsche Texte schreiben).<\/p>\n
Wenn man genau schaut, sieht man, dass der END-TAG <\/html> ganz am Ende der Seite auftaucht und alle Bereiche umfasst. Wir machen eine HTML-Seite und dazu geh\u00f6ren sowohl die Metaangaben, die sich im <head>-Bereich befinden, wie auch die Inhalte, die sich im <body>-Bereich befinden.<\/p>\n
head-Bereich<\/h2>\n
Im Head-Bereich sind verschiedene Dinge definiert, die der Besucher nicht direkt sieht – mit Ausnahme von Inhalt des <title>-TAGs, der im Browserfensterkopf angezeigt wird. Die Angaben im Head-Bereich sind wichtig f\u00fcr die Technik und Suchmaschinen und es k\u00f6nnen noch diverse Informationen \u00fcber Autor, Copyright und eine Kurzbeschreibung eingetragen werden.<\/p>\n
Der wichtigste Eintrag ist der Seitentitel \u00fcber den HTML-TAG <title>. Dort wird eingetragen, was sp\u00e4ter in der Internetbrowser-Kopfzeile angezeigt wird wenn der Besucher die Seite aufruft. Auch wird dieser Eintrag von Suchmaschinen verwendet. Dort wird genau diese Zeile als erste Zeile in den Suchmaschinenergebnisse zum Anklicken angezeigt. Trage dort in wenigen Worten ein, was auf der entsprechenden Einzelseite den Besucher erwartet! <\/p>\n
Als Beispiel schauen wir uns den folgenden HTML-Code an. Dort steht als Inhalt im <title>Hummel Hummel<\/title><\/p>\n
<!DOCTYPE html>
<html> 
 <head> 
 <title>Hummel Hummel<\/title>  
 <\/head> 

 <body> 

 <\/body>

<\/span><\/html>
 <\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/pre>\n
Erstelle die Datei <\/span> .\/title1.htm <\/span><\/strong> und beobachte das Browserfenster.<\/span><\/p>\n
Noch eine weitere Anmerkung zum <title>-TAG, da dieser extrem wichtig ist. F\u00fcr jede Einzelseite muss der <title>-TAG passend zum Inhalt der Einzelseite geschrieben werden. Denn auch Suchmaschinen interessieren sich f\u00fcr den Titel. Du hast um die 60 Zeichen – in der K\u00fcrze liegt die W\u00fcrze.<\/span><\/p>\n
Weiter steht im HEAD-Bereich noch der Verweis auf die CSS Datei, die sich um das Design k\u00fcmmert. Dazu aber sp\u00e4ter mehr.<\/p>\n
Schauen wir uns den folgenden BODY-Bereich an.<\/p>\n
body-Bereich<\/h2>\n
Als erstes besch\u00e4ftigen wir uns mit dem Body-Bereich. Alles was im BODY-Bereich eingetragen wird, zeigt der Browser an<\/strong>. Also zun\u00e4chst machen wir alle Eintragungen zwischen dem ANFANGSTAG <body> und dem ENDTAG <\/body><\/p>\n
Alle folgenden Kapitel gehen davon aus, dass du das Grundger\u00fcst selbst erstellst (kopierst).<\/p>\n
Alle Eintragungen die im Browser angezeigt werden sollen, werden im Body-Bereich eingetragen.<\/p>\n
Es wird aus Platzgr\u00fcnden dann nicht mehr das komplette Grundger\u00fcst gezeigt! Also ohne DOCTYPE und HEAD<\/p>\n
Aufgabe: unsere bisherigen Beispiele erweitern<\/span><\/h3>\n
Erweitere deine bisherigen Beispiele um das entsprechende HTML-Grundger\u00fcst. Pass auch den Titel an.<\/span><\/p>\n
Du musst also die Dateien index.htm, absatz.htm, absatz2.htm, absatz3.htm, ueberschrift.htm und ueberschrift2.htm anpassen – Viel Erfolg! <\/span><\/p>\n
 <\/p>\n
 <\/h1>\n
Aufgabenl\u00f6sung Seitenaufbau<\/h2>\n
 <\/p>\n
<!DOCTYPE html>
<\/span>
<html> 

<head> 
 <title>HTML Tutorial - meine erste HTML Seite<\/title> 
<\/head>   

 <body>   
 <h1>HTML-Tutorial<\/h1>   
 <p>der erster Absatz...<\/p>   
 <\/body> 

<\/html><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/pre>\n
 <\/p>\n\n\n
\n
<!DOCTYPE html>\n\n<html>\n\n<head> \n    <title>Beispiel HTML Grundger\u00fcst <\/title> \n    <meta charset=\"UTF-8\" \/> \n    <meta name=\"description\" content=\"Kurzbeschreibung\" \/>  \n    <link href=\"style.css\" type=\"text\/css\" rel=\"stylesheet\" \/>   \n<\/head>  \n\n\n <body>   \n\n\n\n\n\n\n <\/body>\n \n<\/html><\/code><\/pre>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
  Grundger\u00fcst einer HTML-Seite – DOCTYPE-Definition   Wie haben bisher mit den 2 HTML-TAGs bereits Inhalte ausgezeichnet, damit im Browserfenster dieser Inhalt angezeigt wird. Beispiel mit bisherigen HTML-TAGs <h1>HTML-Tutorial<\/h1>   <p>der erster Absatz …<\/p> Allerdings gibt es neben dem Inhalt, welchen man im Browserfenster sieht, weitere Informationen \u00fcber jede Einzelseite. Zu diesen weiteren Informationen geh\u00f6rt […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","footnotes":""},"categories":[9,47],"tags":[],"class_list":["post-44","post","type-post","status-publish","format-standard","hentry","category-html","category-html2"],"_links":{"self":[{"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/posts\/44","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/comments?post=44"}],"version-history":[{"count":2,"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/posts\/44\/revisions"}],"predecessor-version":[{"id":2391,"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/posts\/44\/revisions\/2391"}],"wp:attachment":[{"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/media?parent=44"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/categories?post=44"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/tags?post=44"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}