Wie ist eine HTML-Seite / Homepage aufgebaut?

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

    • Wie ist eine HTML-Seite / Homepage aufgebaut?

      Hallo MCore Com,

      ich wollte mal ein kleines "Tutorial" dazu machen, wie eine HTML-Seite bzw. Homepage aufgebaut ist.

      Wenn man ein HTML Dokument mit einem Editor wie z.B. PSPad(welches ich Favorisiere) oder Notepad++ erstellt, wird man zunächst so eine Datei bekommen:


      HTML-Quellcode

      1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
      2. <html>
      3. <head>
      4. <meta http-equiv="content-type" content="text/html; charset=windows-1250">
      5. <meta name="generator" content="PSPad editor, www.pspad.com">
      6. <title></title>
      7. </head>
      8. <body>
      11. </body>
      12. </html>
      Alles anzeigen

      * PSPad

      Erklärung:

      In dem Befehl <head></head> werden Elemente eingetragen, die nicht direkt auf der Homepage sichtbar sind. Wie z.B. der vorgegebene Befehl <title></title>.
      Mit diesem Befehl wird der Name der Seite festgelegt, der oben in eurem Tab des Browsers angezeigt wird. Bei News - MMMORPG-Core News wäre es z.B.: MMORPG Core- Deutsche Community für Online Rollenspiele

      Die "meta" Daten sind vorerst irrelevant. Haben dennoch eine Bedeutung:

      Metadaten oder Metainformationen sind Daten, die Informationen über Merkmale anderer Daten enthalten, aber nicht diese Daten selbst.

      Quelle: Metadaten


      Außerdem landen in dem <head> Bereich alle Notwendigen Befehle, externe Dateien wie CSS-Dokumente, JavaScript-Dokumente o.ä. zu importieren.

      Im <body></body> wird alles reingeschrieben was auf der Seite angezeigt werden soll.
      Beispiel:

      HTML-Quellcode

      1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
      2. <html>
      3. <head>
      4. <meta http-equiv="content-type" content="text/html; charset=windows-1250">
      5. <meta name="generator" content="PSPad editor, www.pspad.com">
      6. <title>Meine erste Homepage</title>
      7. </head>
      8. <body>
      10. <h1>Dies ist meine erste Homepage</h1>
      11. <p>Hallo Welt! :-)</p>
      13. </body>
      14. </html>
      Alles anzeigen


      Nun wird folgendes angezeigt:
      mmo-core.de/attachment/3227/?s…73f33cff13610eb1aed6074da

      Oben im Tab steht das was wir im Head Bereich in den <title></title> eingetragen haben.
      <h1></h1> Ist ein Überschriften Befehl und <p></p> ein normaler Text Befehl.

      So wird im großen und ganzen eine Homepage erstellt.
      Per CSS, jQuery, JavaScript etc. wird die Homepage dem entsprechend gestaltet.

      Bei Fragen einfach hier posten oder mich anschreiben.

      z0r
      Bilder

      • Unbenannt.jpg

        21,09 kB, 719×600, 246 mal angesehen

    • Werbung zur Unterstützung des Forums ( Bitte AddBlocker deaktivieren )

    • Würde dir empfehlen grade in einem Tutorial den Beispielcode richtig einzurücken (z.B. so)

      HTML-Quellcode

      1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
      2. <html>
      3. <head>
      4. <meta http-equiv="content-type" content="text/html; charset=windows-1250">
      5. <meta name="generator" content="PSPad editor, www.pspad.com">
      6. <title>Meine erste Homepage</title>
      7. </head>
      8. <body>
      9. <h1>Dies ist meine erste Homepage</h1>
      10. <p>Hallo Welt! :-)</p>
      11. </body>
      12. </html>
      Alles anzeigen


      Die Definition der Meta-Tags ist ziemlich.. schwammig informiert.
      Ansonsten würde ich vielleicht noch eine Empfehlung für einen Editor auszusprechen. aber insgesamt ist's schon gutes Tutorial.

      €: Vielleicht noch ein kurzes Wort zum Doctype. (Jaja, viel Kritik.. )