HTML Praxis Tutorial #1

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

    • HTML Praxis Tutorial #1

      Hallo liebe Fan Gemeinde,
      wie ich das so in diesem Forum verfolge haben viele Ahnung von HTML aber keiner kann es so genau erklären und für Anfänger leicht nachvollziehbar machen.

      Ich werde in den kommenden Tagen diverse Praxis Teile meiner HTML Schulung hier Posten.

      Es werden sehr viele Erklärungen sowie auch Praxis nahe Themen behandelt.
      Ziel dieses Tutorials ist es Anfängern einen leichten Einstieg in HTML zugeben.
      Am Ende des Tutorials werdet ihr eine fertige Homepage haben die ihr mit euren Bildern und Texten versehen könnt. Leider bleibt die Dynamic damit auf der strecke, da wir keinen Variablen Content bauen können oder andere Dateien einbauen. Dies geht mit PHP und würde den Rahmen dieses Tutorials sprengen.

      So nun kommen wir aber zum ersten Teil meines Tutorials.


      Inhalt:
      • Was ist HTML?
      • Wofür braucht man HTML?
      • Werkzeuge um HTML zu schreiben
      • Aufbau einer HTML Datei
      • Grundlegendes
      • Die erste Ausgabe im Webbrowser


      [COLOR="DarkRed"]Was ist HTML?[/COLOR]
      Die einfachste Methode zu erklären was HTML ist, ist die Verlinkung zu Wikipedia
      Hypertext Markup Language ? Wikipedia

      [COLOR="DarkRed"]Wofür braucht man HTML?[/COLOR]
      HMTL ist sozusagen das Grundgerüst einer jeden Webseite. In HMTL Dateien wird alles definiert was mit dem Aussehen der Seite zu tun hat. Sei es der Header, Navigation, diverse Boxen,etc... Mit Aussehen ist aber nicht unbedingt die Farbe und der Style der Homepage gemeint. Viel mehr die Anordnung einzelner Elemente auf der Seite. Was genau damit gemeint ist sehen wir wenn wir zur Praxis übergehen.

      [COLOR="DarkRed"]Werkzeuge um HTML zu schreiben[/COLOR]
      Grundsätzlich reicht es wenn man den Standard Editor ( Notepad ) von Windows nutzt. Leider ist diese Art der Programmierung nicht unbedingt für Anfänger geeignet. Es fehlt die Syntax Hervorhebung oder allgemeine Fehler Kenneichung. Zu empfehlen ist daher der Kostenlose Editor Notepad++. Dieser besitzt die oben genannten Eigenschaften und eignet sich hervorragend für Anfänger.

      [COLOR="DarkRed"]Aufbau einer HTML Datei[/COLOR]
      Grundsätzlich ist jede HTML Datei gleich aufgebaut.

      Sie besteht aus dem Kopfteil ( Head )
      dem Mittelteil ( body )
      und dem Endteil

      Als kleines Beispiel wie so etwas aussieht schaut auch den nachfolgenden Code an.

      PHP-Quellcode

      1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
      3. <head>
      4. <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
      5. <meta name="author" content="Horst Schlämer" />
      6. <title>Ohne Titel 2</title>
      7. </head>
      8. <body>
      9. </body>
      10. </html>
      Alles anzeigen


      Zur erklärung der einzelnen Berreiche nehmen wir diese nun etwas auseinander

      Kopfberreich

      PHP-Quellcode

      1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
      3. <head>
      4. <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
      5. <meta name="author" content="Horst Schlämer" />
      6. <title>Ohne Titel 2</title>
      7. </head>


      Mittlererberreich

      PHP-Quellcode

      1. <body>


      Endberreich

      PHP-Quellcode

      1. </body>
      2. </html>


      Im Kopfberreich seht ihr eigentlich nix was großartig erwähnends wert wäre.

      Zum einen hätten wir da den DOCTYPE - dieser bestimmt die Form des HTML Dokuments also nach welchen Vorgaben gearbeitet wird. Standartmäßig ist der W3C XHTML Standart

      Desweiteren seht ihr etwas weiter drunter den Zeichentyp - in diesem fall ISO-8859-1. Es gibt auch den etwas bekannteren Zeichentyp UTF-8.

      Darunter folgen dann ein paar Quelltext spezifische sachen wie zum Beispiel der Author, Copyright, etc... Hier ist es auch möglich die so genannten Suchmaschinen Bots zu steuern und Meta Tags ( aussage kräftige Wörter die mit eurer Homepage zu tun haben ) einzufügen.

      Dann kommt noch der Titel des HTML Dokuments welcher dann in eurem Browser im Kopfberreich und im Tab angezeigt wird

      Und dann wird der Head berreich geschlossen.

      Tags die so aussehen </.. sind immer geschlossen.


      [COLOR="DarkRed"]Grundlegendes[/COLOR]

      Grundlegend sei gesagt das für alle fragen die ihr habt es bei Google genügend Anlaufstellen gibt welche euch bei der Verwirklichung eures Vorhabens unterstützen können.
      Eine sehr gute Anlaufstelle wäre zum Beispiel: SELFHTML 8.1.2 (HTML-Dateien selbst erstellen)

      Aber dennoch sei gesagt das jedes geöffnete Tag auch wieder geschlossen werden muss.

      Das verschachteln einzelner Tags ist ebenfalls möglich. Aber hier muss man sich an ein paar Vorgaben halten.

      Zum Beispiel:

      PHP-Quellcode

      1. // So wäre es korrekt verschachtelt
      2. <table>
      3. <tr>
      4. <td></td>
      5. </tr>
      6. </table>
      7. // Häufige Fehler würden so aussehen.
      8. <table>
      9. <tr>
      10. <td></table>
      11. </tr>
      12. </td>
      13. // Oder vielleicht auch so
      14. <table>
      15. <tr>
      16. <td></td>
      17. <tr>
      Alles anzeigen


      Wie ihr seht wurden in beiden falschen Beispielen die Tags falsch verschachtelt.

      Im letzten Beispiel wurde nicht nur falsch verschachtelt sondern auch vergessen die Tags wieder zu schließen.

      Solltet ihr aber Notepad++ oder einen anderen HTML Editor nutzen, sollte er euch auf diesen Fehler hinweisen.

      [COLOR="DarkRed"]Die erste Ausgabe im Webbrowser[/COLOR]
      Kommen wir nun zu dem Punkt worauf alle gewartet haben. Unsere erste HTML Datei.

      Als aller erstes möchte ich euch bitte einen gewisse Ordner Struktur auf eurem Computer anzulegen. Es ist einfach übersichtlicher wenn man die Dateien nach einem gewissen System ordnet was ich hier aber jedem selbst überlasse.

      Ausgabe 1:

      PHP-Quellcode

      1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
      3. <head>
      4. <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
      5. <meta name="author" content="Horst Schlämer" />
      6. <title>Ohne Titel 4</title>
      7. </head>
      8. <body>
      9. Hallo Welt, ich lerne nun HTML und freue mich mit dir meine erste HMTL Seite anzuschauen.
      10. </body>
      11. </html>
      Alles anzeigen


      Was wurde gemacht?

      Wir haben zwischen den <body> und den </body> Tag einfach einen Text reingeschrieben. Dieser wird 1:1 wie wir ihn geschrieben haben auch im Browser angezeigt.

      Ihr könnt nun damit ein wenig rumspielen und euch in die HTML Befehle ein wenig rein lesen.
      Ich denke fürs erste sollte das hier genügen. Im nächsten Tutorial werden wir dann eine Tabelle anlegen und diese mit Text füllen. Desweiteren werden wir die ersten schritte mit Cascading Stylesheets (CSS) machen und unsere HTML Datei ein wenig durch stylen.

      In diesem Sinne

      Frohe Weihnachten und viel Spass beim lesen
    • Werbung zur Unterstützung des Forums ( Bitte AddBlocker deaktivieren )

    • *electriZer*;63189 schrieb:

      [FONT="Century Gothic"][COLOR="DeepSkyBlue"][SIZE="2"]Es sollte schon genannt werden, dass CSS und JS in den head Bereich integriert werden. Das ist eine Art Einführung in das Thema =)[/SIZE][/COLOR][/FONT]


      CSS und JS sind in einer HTML Einführung vollkommen Fehl am Platz.

      Tables sind doof..


      Tables braucht man immer, nur Leute die ihre gesammte Seite in tables coden sind doof.
      Guck mal Quelltext, selbst VB benutzt welche :O
    • [FONT="Century Gothic"][COLOR="DeepSkyBlue"][SIZE="2"]Ohne CSS kann man mit HTML nicht wirklich was schönes raus bekommen =3
      HTML lernt man schnell, wenn noch eine kleine Information über CSS und JS angegeben wäre, wäre das hilfreicher für die ganz neuen. Sonst kommt am Ende "CSS, JS - WTF?!" ... Deswegen ist das immer gut wenn ein wenig darüber berichtet wird.[/SIZE][/COLOR][/FONT]
    • Hier mal ein Auszug von dem was ich geschrieben habe.

      Ich denke fürs erste sollte das hier genügen. Im nächsten Tutorial werden wir dann eine Tabelle anlegen und diese mit Text füllen. Desweiteren werden wir die ersten schritte mit Cascading Stylesheets (CSS) machen und unsere HTML Datei ein wenig durch stylen.

      In diesem Sinne

      Frohe Weihnachten und viel Spass beim lesen



      Hättest du bis dahin gelesen, dann hättest du dir deinen Post ersparen können.


      In diesem Sinne schöne Feiertage
    • Find ich gut, anfänger freundlich verfasst, geht nicht zu sehr ins detail, usw...

      Aber was meiner Meinung nicht geht, du schreibst im Titel das es ein html tutorial ist und im nächsten Schritt definierst du den Doctype als xhtml.. dann sagst du das alle elemente wieder geschlossen werden müssen, das ist aber nur bei xhtml so.. bei html gibts tags wie z.B. <img> oder <br> welche nicht geschlossen werden.
      Also, bitte bei einem Thema bleiben :)
    • Selbstverständlich werden dies Tags auch geschlossen. Die Richtlinie sagt das so.

      Als Beispiel ist das br Tag ganz gut geeignet. Wenn du es konform schreiben willst schreibst du im Code nicht <br> sondern <br /> So wäre es dann richtig.

      Das selbe geschieht dann für sämtliche anderen tags auch <input> wird zu <input /> etc...