HTML: Hallo Welt!

26. MĂ€rz 2016 von | Kategorie(n): Programmierung
Schlagwörter: // // // // //

Der Name deutet schon an, was du in diesem Teil lernst: Ein erstes HTML-Dokument erstellen und im Browser anzeigen! Du wirst dich wundern, wie leicht es ist 🙂

Was braucht man jetzt dafĂŒr ? Nicht viel!

  • 1x Editor (z.B. der stinknormale Editor von Windows)
  • 1x Browser (z.B. Chrome oder Edge)

Wenn Dateien dann aber komplexer werden, empfiehlt sich ein Editor, wie Notepad++ (kostenlos). Denn dieser makiert die Bausteine der Sprachen farbig und unterstĂŒtzt verschiedenste Programmiersprachen.

Jetzt brauchst du noch die Datei

Ein HTML-Dokument bekommst du, wenn du ein simples Text-Dokument (.txt) erstellst. Und dieses dann mit „speichern unter…“ als Test.html ablegst (selbstverstĂ€ndlich geht auch jeder andere Name, Hauptsache das Dokument besitzt die Endung .html). Hast du alles richtig gemacht, erscheint nun auf dem Symbol der Text-Datei auch das Icon deines Standartbrowsers.

Mit einem Doppelklick auf die Datei, öffnet sich dein Browser und du siehst… nichts weiter als ein weißes, leeres Fenster 🙁

Erster Code

<html>
    <head>
        <title> Hallo Welt! </title>
    </head>
    <body>
        <h1> Ist mir irgendwie noch fremd... </h1>
        <p>Hier gibt's direkt in bisschen Input. Das ist nÀmlich mein erster Textabsatz! <br/>
           Oder noch besser: Meine ersten Schritte in der Welt von HTML.</p>
    </body>
</html>

Und diese 10 Zeilen sollen reichen ? So sieht’s aus. Wenn du neugierig bist, dann kopiere den Quellcode einfach in deine HTML-Datei und sieh dir das Ergebnis an. Oder du liest dir hier erstmal eine ErklĂ€rung durch:

HTML beginnt immer mit <html> und endet immer mit </html>. Zwischen diesen sogenannten Tags liegt der head und der body.

Was ist der head?

Dieser enthĂ€lt Meta-Daten (muss aber nicht :D, fĂŒr diese Reihe auch nicht wichtig) und den Title deiner Seite (<title></title>). Der head beginnt mit <head> und endet mit </head>. Außerdem ist er fĂŒr den Benutzer nicht sichtbar.

Was ist der body?

Der body ist der sichtbare Teil des Dokumentes. Dort wird der gesamte Inhalt (Text, Bilder, Links usw.) hineingeschrieben. Und vielleicht hast du es schon durchschaut: Der body beginnt mit <body> und endet mit </body>.

Jetzt fliegen da aber noch mehr Tags rum: <h1> und <p> bzw. </h1> und </p>. Kein Grund zur Panik: Zwischen die beiden p-Tags kannst du einfach Text schreiben, der dann auch als solcher im Browser dargestellt wird. Der h1-Tag ist nichts anderes als eine Überschrift der GrĂ¶ĂŸe 1. FĂŒr UnterĂŒberschriften gibt’s das <h2>, <h3> <h6>.

Diese eben genannten Tags (p & h1 bis h6) sind fĂŒr HTML-Dateien bzw. das Internet von hoher Bedeutung, da diese Text darstellen und diesen strukturieren!

  • <…> Öffnet immer etwas, z.B. einen Absatz (und noch mehr :D; spĂ€ter in dieser Reihe mehr)
  • </…> Schließt immer etwas.

Endlich: Das Ergebnis!

So… nach dem ganzen (trockenen) Text gibt’s das Ergebnis: Hallo Welt!

 

<Tim Poerschke />

Was denkst du ĂŒber diesen Post?
  • Gut (0)
  • Hilfreich (0)
  • Nicht gut (0)
  • Lustig 😀 (0)
Diesen Post teilen:
Facebooktwittergoogle_plusredditpinterestlinkedinmail

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

+ 76 = 78