Was jeder Programmierer wissen sollte, der HTML-Websiten programmiert.

    Was jeder Programmierer wissen sollte, der HTML-Websiten programmiert.

    1. Vorwort zu einer Website


    Eine Website, auch Internetseite genannt, kann für alle Dinge verwendet werden, worüber Jemand Informationen, der optischen und akustischen Art, für sich und andere speichern möchte. Zu dem kann eine Website auch dazu verwendet werden, Informationen dieser beiden Arten, mit einander zu tauschen.

    Inzwischen gibt es auch schon die Möglichkeit, für Blinde die auch taub sind und somit weder die optische, noch die akustische Art der Kommunikation wahrnehmen können, diese Websites über ihren Tastsinn wahrzunehmen.

    Eine Website wird von einem Server (ein speziell konfigurierter Computer) oder auch von einem handelsüblichen Heim-Computer, anhand vorher vom Menschen, mehr- oder weniger gut, festgelegten Parametern zusammengefügt und über das Internet, zu dem Betrachter seinen Computer, meistens in der Programmiersprache HTML übertragen. Wo wir jetzt zu dem Aufbau einer Website mit HTML kommen.

    2. Der Aufbau einer HTML-Website.


    Dieser DocType sollte bei jeder Internetseite am Anfang mit stehen, denn er verrät dem Browser, mit welcher Art Dokument, er es zu tun hat und in welchem Schriftformat.

    Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    2. "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

    Näheres findet ihr vorerst unter www.mediaevent.de/xhtml/doctype.html.

    Danach öffnen wir den eigentlichen HTML-Code mit <html> und dieser wird erst am Ende, der an den Browser zu übertragenden Daten mit </html> geschlossen.
    Dazwischen gibt es noch den Head-Bereich, der mit <head> geöffnet und mit </head> geschlossen wird.
    Der Head-Bereich ist für alle detailierten Einstellungen zuständig, die im danach kommenden Body- und Footer-Bereich angewendet werden, für Browser-Konfigurationen und für Suchmaschinenangaben, die auf die jeweile Seite bezogen sind. (Mehr dazu kommt später in einem anderen Thema, denn hier gehts erstmal nur um die reinen HTML-Grundlagen.)
    Der genannte Body-Bereich wird mit <body>, sofort HINTER dem </head> geöffnet und mit dem </body> geschlossen.

    HTML-Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    2. "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    3. <html>
    4. <head>
    5. ... Head-Bereich
    6. </head>
    7. <body>
    8. ... Body-Bereich
    9. </body>
    10. </html>

    Der erwähnte Footer-Bereich ist jedoch aus der Mode gekommen, bzw. konnte sich nicht durchsetzen, weil man im Body-Bereich alles machen kann, wie im Footer.
    Wenn jemand doch einen einfügen will, dann kann er dies hinter dem Body-Bereich und vor dem Schlußbefehl vom HTML mit einem <footer> öffnen und </footer> wieder schließen, aber nach dem </footer> kommt au0er dem </html> nichts mehr.

    HTML-Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    2. "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    3. <html>
    4. <head>
    5. ... Head-Bereich
    6. </head>
    7. <body>
    8. ... Body-Bereich
    9. </body>
    10. <footer>
    11. ... Footer-Bereich
    12. </footer>
    13. </html>

    3. Der Head-Bereich


    3.1. Titel der Website


    Der Titel einer Website wird mit <title> und </title> eingegrenzt.
    Er ist dafür da, damit man auch im nicht geöffneten Zustand, sehen kann, um was es sich bei dem Inhalt der Internetseite handelt. (z.B.: Browser-Tabs, Suchmaschineneinträge o.ä.)

    HTML-Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    2. "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    3. <html>
    4. <head>
    5. <title>Titel der Website</title>
    6. </head>
    7. <body>
    8. ... Body-Bereich
    9. </body>
    10. </html>

    3.2. Favicon


    3.2.1. Für was ist ein Favicon gut?


    Ein Favicon, soll ein winziger Spiegel der Internetseite sein, so dass man schnell die entsprechende Website, zwischen mehreren herausfinden kann.

    3.2.2. Welche Bedingungen muss ein Favicon erfüllen?


    • Standart-Dateiformat: ico
    • Standart-Dateiname: favicon (somit heißt die Datei inclusive der Endung favicon.ico)
    • Standart-Bildqualität: 16 Farben
    • Alternatives-Dateiformat: gif (gif wird für animierte Favicons verwendet, das Format lässt sich aber im 2. Code-Beispiel auch auf z.B.: jpeg, png usw. ändern, wichtig ist jedoch, dass das Dateiformat mit dem type="image/{Dateiformat} übereinstimmt)
    • Alternative Dateinamen: im allgmeinen können alle Dateinamen verwendet werden, man muss diese jedoch, in der Form von den animierten Favicons einbauen
    • Format: 16*16 oder 32*32 Pixel

    3.2.3. Wie füge ich ein Favicon in meine Website ein?


    Die herkömmlichen Favicons, fügt man wie folgt ein.

    HTML-Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    2. "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    3. <html>
    4. <head>
    5. <title>Titel der Website</title>
    6. <link rel="shortcut icon" href="favicon.ico">
    7. </head>
    8. <body>
    9. ... Body-Bereich
    10. </body>
    11. </html>

    Die animierten Favicons fügt ihr mit dem folgenden angepassten Code ein.

    HTML-Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    2. "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    3. <html>
    4. <head>
    5. <title>Titel der Website</title>
    6. <link rel="icon" href="animated_favicon1.gif" type="image/gif">
    7. </head>
    8. <body>
    9. ... Body-Bereich
    10. </body>
    11. </html>

    3.2.4. Wo/Wie bekomm ich Favicons?


    • Favicon-Fix.de <--- Hier ladet ihr einfach ein Bild hoch und erhaltet sofort in einer gepackten Datei, das favicon.ico mit 2 Vorschaubildern 16*16 und 32*32 Pixel sowie einer animierten GIF-Datei und einer Readme-Datei mit einer deutschen Anleitung.

    3.3. Metatags


    3.3.1. Bedeutung der Metatags


    Metatags sind dafür gedacht, dass Suchmaschinen sich bereits im Header, ein Bild von der gesamten Internetseite machen können und damit entschieden haben, ob diese Internetseite für die Suchmaschine relevante Themen beinhaltet oder nicht. Ob dies Heute immer noch von Suchmaschinen genutzt wird, streiten sich die Gelehrten.

    3.3.2. Welche Metatags gibt es?


    http-equiv="content-type"


    [table='Metatag,Metatag-Typ,Content,Beschreibung']
    [*]http-equiv
    [*]content-type
    [*]text/html; charset=windows-1250
    [*]Zeichensatz: Albanien, Kroatien, Polen, Rumänien, Serbien (Latin), Slowakei, Slowenien, Tschechien,
    Ungarn
    [*]http-equiv
    [*]content-type
    [*]text/html; charset=windows-1251
    [*]Zeichensatz: Aseri (aserbaidschan-türkisch), Bulgarien, FYRO Mazedonien, Kasachstan, Kirgisistan,
    Mongolei, Russland, Serbien, Tatar, Ukraine, Usbekistan, Weißrussland
    [*]http-equiv
    [*]content-type
    [*]text/html; charset=windows-1252
    [*]Zeichensatz: Afrika, Baskenland (Frankreich), Dänemark, Deutschland, England, Färöer, Finnland,
    Frankreich, Galizien, Iceland, Indunesien, Italien, Katalonien, Malay, Niederlande, Norwegen, Ostafrika,
    Portugal, Spanien, Schweden
    [*]http-equiv
    [*]content-type
    [*]text/html; charset=utf-2
    [*]utf-2 ist veraltet und wurde durch utf-8 ersetzt
    [*]http-equiv
    [*]content-type
    [*]text/html; charset=utf-7
    [*]utf-7 steht dafür, dass jedes Zeichen 7 Bit lang ist und damit 1 Byte ergeben
    (Anwendungsbeispiel: Tauschbörsen und E-Mail-Systeme)
    [*]http-equiv
    [*]content-type
    [*]text/html; charset=utf-8
    [*]utf-8 steht dafür, dass jedes Zeichen 1-4 mal 8 Bit lang ist und somit ist jedes Zeichen 1-4 byte groß
    (Anwendungsbeispiel: Websiten)
    [*]http-equiv
    [*]content-type
    [*]text/html; charset=utf-16
    [*]utf-16 steht dafür, dass jedes Zeichen 2-4 mal 8 Bit lang ist und somit ist jedes Zeichen 2-4 byte groß
    (Anwendungsbeispiel: Windows)
    [*]http-equiv
    [*]content-type
    [*]text/html; charset=utf-32
    [*]utf-16 steht dafür, dass jedes Zeichen 4 mal 8 Bit lang ist und somit ist jedes Zeichen 4 byte groß
    [*]http-equiv
    [*]content-type
    [*]text/html; charset=ISO-8859-1
    [*]Zeichensatz: Albanisch, Dänisch, Deutsch, Englisch, Farörisch, Finnisch, Französisch, Galizisch, Irisch,
    Isländisch, Italienisch, Katalanisch, Niederländisch, Norwegisch, Portugiesisch, Schwedisch, Spanisch
    [*]http-equiv
    [*]content-type
    [*]text/html; charset=ISO-8859-2
    [*]Zeichensatz: Kroatisch, Polnisch, Rumänisch, Slowakisch, Slowenisch, Tschechisch, Ungarisch
    [*]http-equiv
    [*]content-type
    [*]text/html; charset=ISO-8859-3
    [*]Zeichensatz: Esperanto, Galizisch, Maltesisch, Türkisch (Türkisch s. auch ISO-8859-9)
    [*]http-equiv
    [*]content-type
    [*]text/html; charset=ISO-8859-4
    [*]Zeichensatz: Estnisch, Lettisch, Litauisch
    [*]http-equiv
    [*]content-type
    [*]text/html; charset=ISO-8859-5
    [*]Zeichensatz: Bulgarisch, Mazedonisch, Russisch, Serbisch, Ukrainisch
    [*]http-equiv
    [*]content-type
    [*]text/html; charset=ISO-8859-6
    [*]Zeichensatz: Arabisch
    [*]http-equiv
    [*]content-type
    [*]text/html; charset=ISO-8859-7
    [*]Zeichensatz: Neugriechisch
    [*]http-equiv
    [*]content-type
    [*]text/html; charset=ISO-8859-8
    [*]Zeichensatz: Hebräisch
    [*]http-equiv
    [*]content-type
    [*]text/html; charset=ISO-8859-9
    [*]Zeichensatz: Türkisch
    [*]http-equiv
    [*]content-type
    [*]text/html; charset=ISO-8859-10
    [*]Zeichensatz: Grönländisch (Inuit), Lappisch (Sami)
    [/table]
    (Wenn euch hier noch fehlende Content-Types auffallen, so teilt sie mir bitte mit, dass ich diese noch einfügen kann.)

    [table='Metatag,Metatag-Typ,Content,Beschreibung']
    [*]name
    [*]progid
    [*]PHPad.Editor.Document
    [*]Daten, mit welchem Programm sie diese Website erstellt haben.
    [*]name
    [*]autor
    [*]Name des Autors
    [*]Der Autor der jenige, der diese Inhalte veröffentlichen darf.
    [*]name
    [*]publisher
    [*]Name des Veröffentlichers
    [*]Der Veröffentlicher ist der jenige, welcher etwas in Form eines Zitats oder des eigenen Gedankenguts veröffentlicht.
    [*]name
    [*]copyright
    [*]Name des Copyright-Inhabers
    [*]Der Copyright-Inhaber ist der jenige, der sein eigenes Gedankengut veröffentlicht hat. Dies ist er aber nicht mehr allein, wenn er etwas zitiert hat.
    [*]name
    [*]owner
    [*]Name des Besitzers
    [*]Sollte der Copyright-Inhaber weitere Mitwirkende beauftragt haben, an einem Projekt mit zuwirken, so müssen diese bei diesem Eintrag eingetragen werden, es sei denn, es ist vertraglich festgelegt, dass der oder die Mitwirkenden, sich bereit erklärt haben, auf dieses Recht zu verzichten.
    [*]name
    [*]keywords
    [*]html, tag, suchmaschine, vielleicht, wichtig
    [*]Diese Metatags werden von Google und Co. eventuell noch gebraucht, aber niemand weiß es genau, denn selbst die hohen Gelehrten streiten sich noch darüber.
    [*]name
    [*]description
    [*]Kurzbeschreibung des Inhaltes der Internetseite.
    [*]Hier könnt ihr den Suchmaschinen eine kurze Beschreibung der Internetseite liefern.
    [/table]

    3.3.3. Wie baue ich die Metatags ein?


    HTML-Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    2. <html>
    3. <head>
    4. <title>Titel der Website</title>
    5. <link rel="shortcut icon" href="favicon.ico">
    6. <http-equiv="content-type" content="text/html; charset=utf-8">
    7. <name="progid" content="PHPad.Editor.Document">
    8. <name="autor" content="Name des Autors">
    9. <name="publisher" content="Name des Veröffentlichers">
    10. <name="copyright" content="Name des Copyright-Inhabers">
    11. <name="owner" content="Name des Besitzers">
    12. <name="keywords" content="html, tag, suchmaschine, vielleicht, wichtig">
    13. <name="description" content="Kurzbeschreibung des Inhaltes der Internetseite
    14. </head>
    15. <body>
    16. ... Body-Bereich
    17. </body>
    18. </html>

    Dieser Bereich ist noch nicht vollständig.

    3.4. CSS


    3.4.1. Was ist CSS?


    • Die Abkürzung CSS steht für Cascading Style Sheets.
    • Verwendet wird dies, für die genaue Positionierung und Formatierung von HTML-Elementen.
    • Weitere Informationen zu CSS, könnt ihr HIER im CSS-Bereich lesen und Fragen stellen.

    3.4.2. CSS direkt im Header einstellen


    HTML-Quellcode

    1. <html>
    2. <head>
    3. <style type="text/css">
    4. body {
    5. background-color:#000000
    6. }
    7. p {
    8. color:#FFFFFF
    9. }
    10. </style>
    11. ... weitere Head-Bereich-Einträge
    12. </head>
    13. <body>
    14. ... Body-Bereich
    15. </body>
    16. </html>

    3.4.3. CSS in separater Datei einstellen und im Header einbinden


    HTML-Quellcode

    1. <html>
    2. <head>
    3. <link rel="stylesheet" type="text/css" href="style.css">
    4. ... weitere Head-Bereich-Einträge
    5. </head>
    6. <body>
    7. ... Body-Bereich
    8. </body>
    9. </html>

    Diese Datei muss so eingetragen im Verzeichnis der Index-Datei liegen, es sei denn ihr gebt bei der Dateieintragung, auch Verzeichnisinformationen mit an. Dies würde dann wie folgt aussehen:

    HTML-Quellcode

    1. <html>
    2. <head>
    3. <link rel="stylesheet" type="text/css" href="./style-ordner/style.css">
    4. ... weitere Head-Bereich-Einträge
    5. </head>
    6. <body>
    7. ... Body-Bereich
    8. </body>
    9. </html>

    3.4.4. CSS außerhalb der voran gegangenen Beispiele, speziell für einzelne HTML-Elemente festlegen


    Dies hat jedoch leider auch Nachteile, weil man dies nicht direkt an Hand des ID- oder CLASS-Namens in dem CSS-Text suchen kann, um Einstellungen vorzunehmen, sondern man muss dazu diese Stelle in den HTML-Dateien heraus suchen. Da die Anzahl der HTML-Dateien in der Regel größer ist, als die Anzahl der CSS-Dateien, bzw. CSS beinhaltenden Header-Dateien, bedeutet dies einen größeren Zeitaufwand um Änderungen vornehmen zu können.

    HTML-Quellcode

    1. <html>
    2. <head>
    3. ... Head-Bereich-Einträge
    4. </head>
    5. <body>
    6. ... Body-Bereich
    7. <div style="width: 200px; height: 150px; background: #000000; color: #FFFFFF;">
    8. Dieses DIV ist 200 Pixel breit und 150 Pixel hoch und hat als Hintergrundfarbe schwarz und Schriftfarbe weiß.
    9. </div>
    10. </body>
    11. </html>


    Hier gehts dann noch weiter.