Donnerstag, 1. Mai 2014

Einführung in HTML

Willkommen zu meinen ersten HTML Tutorial.

Für den Anfang stellt sich die Frage, was brauche ich für HTML? Wenn man es genau nimmt, hat man schon alles was nötig ist. Wir brauchen nur dazu einen Texteditor mehr nicht. Ich verwende für den Anfang einfach den Texteditor von Windows 8. Wir müssen nur darauf achten den Text nicht als Textdatei (*.txt, usw.) zu speichern, sondern als HTML-Datei (*.htm oder *.html).

Wir könnten z.B. "Hallo, dies ist meine erste Homepage" schreiben und es als HTML-Datei speichern und dann in einem Browser öffnen. Das Ergebnis ist recht unspektakulär.


Elemente und Tags
Elemente geben an, wie die Webseite ausschauen soll, sie bestehen fast immer aus einen Start- und End-Tag. Tag-Bezeichnungen stehen immer zwischen < und  >. Es gibt zwei Arten von Tags, das Start-Tag wie <html> und das End-Tag </html>, das mit einem Slash (/) dargestellt wird. Es gibt auch Ausnahmen wie <br />, das Start- und End-Tag gleich zusammen ist.

Jetzt wollen wir mal etwas Struktur in den HTML-Code bringen. Hier ein Beispiel:
  1. <html>
  2.         <head>
  3.                 <title> Meine erste Homepage! </title>
  4.         </head
  5.         <body>
  6.                 <p> Meine erste Homepage! </p>
  7.         </body>
  8. </html>
Wir werden sehen dass sich nicht viel geändert hat, wenn wir die Datei mit dem Browser öffnen. Dies ist aber die Grundstruktur die jeder HTML-Seite haben sollte. Gehen wir unseren Code einfach mal durch.

In Zeile 1 steht das Start-Tag <html> damit geben wir an, dass ab hier HTML-Code steht, bis zum End-Tag </html>.

In Zeile 2 bis 4 wird mit den Tags <head> und </head> angegeben dass hier die Informationen der Datei stehen. Hier wird z.B. in Zeile 3 zwischen den Tag <title> und </title> der Titel der Datei angegeben. Der Titel wird auch von Suchmaschinen verwendet um die Seite im Suchindex aufzunehmen und der Seitentitel wird im Suchergebnis angezeigt.

In Zeile 5 bis 7 die mit den Tags <body> und </body> angegeben sind, steht der Inhalt der Datei, sozusagen das was wir im Browser sehen. Zwischen den Tags <p> und </p> steht der Text der im Browser ausgegeben werden soll. Das p steht für paragraph und bedeutet soviel wie Absatz. Man könnte auch die Tags <p> und </p> weglassen hier im Beispiel würde es kein Unterschied machen.

Es ist auch egal ob man die Tags groß oder klein schreibt es würde kein Unterschied machen. Besser ist es aber bei der Kleinschreibung zu bleiben.

Keine Kommentare:

Kommentar veröffentlichen