Anzeige
Tutorialbeschreibung

HTML & CSS für Einsteiger (Teil 02): Die erste HTML-Seite

HTML & CSS für Einsteiger (Teil 02): Die erste HTML-Seite

Im Gegensatz zu Programmiersprachen wie beispielsweise Java kann man in HTML ohne größere Einarbeitung sehr schnell erste Ergebnisse erzielen. Alles, was ihr für den Anfang braucht, sind ein Editor und ein Browser. In diesem Video-Training werdet ihr euer erstes HTML-Dokument anlegen und auch direkt eine Ausgabe im Browser bekommen. Und so ganz nebenbei erfahrt ihr dabei, wie HTML-Dokumente, letztendlich also Webseiten, aufgebaut sind bzw. welcher Grundstruktur sie folgen.


Legt für einen ersten Test im Editor eurer Wahl eine neue Datei an. Wer den Windows-Editor verwendet, ruft diesen über Start>Alle Programme>Zubehör>Editor auf.

Bilder



 
Wählt anschließend Datei>Speichern unter. Entscheidend ist das Feld Dateityp.

Bilder



Hier muss unbedingt Alle Dateien eingestellt werden. In das Feld Dateiname tragt ihr anschließend index.htm ein. Jetzt könnt ihr die Datei am gewünschten Ort speichern. Diese Datei ist es nun, mit der ihr arbeitet, eure erste HTML-Datei also, die momentan allerdings noch leer ist. Das wird sich gleich ändern.

 
Wenn ihr Dreamweaver verwendet, legt ihr am besten direkt beim Programmstart fest, dass ihr eine HTML-Datei erstellen wollt.

Bilder



 

Das HTML-Grundgerüst

Bevor es mit dem HTML-Grundgerüst losgeht, ein wichtiger Hinweis zu der innerhalb dieser Reihe – und auch in der HTML-Welt – verwendeten Semantik. Denn euch werden permanent die Begriffe Tag und Element begegnen, die leider immer wieder falsch interpretiert werden. Ein Beispiel:
<a href="news.htm">Zu den Neuigkeiten</a>

Diese Syntax zeigt ein a-Element, und zwar <a href="news.htm">Zu den Neuigkeiten</a>. Dieses Element setzt sich aus einem öffnenden a-Tag, also <a> bzw. vollständig <a href="news.htm">, dem Elementinhalt Zu den Neuigkeiten und dem schließenden a-Tag </a> zusammen. Zudem besitzt das Element a das Attribut href mit dem Attributwert news.htm.

Das vorherige Beispiel zeigt eine Hyperlink-Definition in HTML über das Element a. Dieses Element a wird durch das öffnende <a>- und das schließende </a>-Tag ausgezeichnet. Ihr seht also, dass es gar nicht so schwer ist, die Bezeichnungen Element und Tag richtig zu verwenden.

Nun geht es aber los. Öffnet die zuvor gespeicherte HTML-Datei in eurem Editor. Jedes HTML-Dokument weist ein bestimmtes Grundgerüst auf.

Hier zunächst das besagte Gerüst in seiner vollen Pracht:
<!DOCTYPE html>
<html lang="de">
<head>
   <title>PSD-Tutorials.de</title>
   <meta charset="UTF-8" />
</head>
<body>
</body>
</html>

 
Was bedeuten nun die einzelnen Einträge? Los geht es mit der sogenannten Dokumenttyp-Deklaration.
<!DOCTYPE html>

Über eine solche Dokumenttyp-Deklaration gebt ihr dem Browser, in dem eure Webseite später angezeigt wird, bekannt, welchen HTML-Standard ihr verwendet. Im vorliegenden Fall handelt es sich dabei um HTML5. Würdet ihr hingegen HTML 4.01 verwenden, sähe die DOCTYPE-Angabe folgendermaßen aus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Gerade das Thema Dokumenttyp-Deklaration sorgt bei HTML-Einsteigern für Verwirrung, weil es von denen eben recht viele unterschiedliche Varianten gibt. Dabei ist es eigentlich ganz einfach: Stellt euch eine Dokumenttyp-Deklaration als eine Art Bauanleitung vor, in der beschrieben ist, welche Elemente in einem Dokument enthalten sein dürfen.

Ich rate euch prinzipiell zur kurzen HTML5-Angabe.
<!DOCTYPE html>

Moderne Browser erkennen sie und geben die Seiten, in denen sie verwendet wird, im Standardmodus aus. Allerdings solltet ihr dann auch tatsächlich nur solche HTML-Elemente definieren, die in HTML5 erlaubt sind. Mehr dazu aber später.

Weiter geht es mit dem html-Element.
<html lang="de">
…
</html>

Dieses Element umschließt das Dokument. Was auffällt, ist das Attribut lang. Darüber wird die im Dokument verwendete Sprache angegeben. Hier einige lang-Kürzel für den deutschsprachigen Raum.

de – Deutsch (Standard)
de-ch – Deutsch (Schweiz)
de-at – Deutsch (Österreich)
de-lu – Deutsch (Luxemburg)
de-li – Deutsch (Liechtenstein)

 
Noch mehr verschiedene lang-Kürzel gibt es übrigens für Englisch.

en-us – Englisch (USA)
en-gb – Englisch (Vereinigtes Königreich)
en-au – Englisch (Australien)           
en-ca – Englisch (Kanada)
en-nz – Englisch Neuseeland)
en-ie – Englisch (Irland)
en-z – Englisch (Südafrika)  
en-jm – Englisch (Jamaika)
en – Englisch (Karibische Inseln)

Ob ihr die zweistelligen Kürzel de, gb usw. verwendet oder doch lieber auf die zuvor gezeigten zusammengesetzten Kürzel zurückgreift, bleibt letztendlich euch überlassen. In favorisiere die zweistelligen.

Innerhalb des head-Elements werden die Kopfdaten des Dokuments erwartet.
<head>

 …

</head>

Kopfdaten klingt zugegebenermaßen etwas sperrig, ist aber rasch erklärt. Man packt hier u.a. solche Sachen rein, die das Dokument näher beschreiben. Das sind beispielsweise der Titel und der verwendete Zeichensatz. Ebenso können hier Skripte und Stylesheets eingebunden und allgemeine Metadaten definiert werden. Mehr dazu aber später.

Wichtig ist vor allem das title-Element.
<title>Tutorials für Bildbearbeitung mit Photoshop, Webdesign &amp; Fotografie - PSD-Tutorials.de </title>

Darüber definiert man den Titel, der an ganz verschiedenen Stellen benötigt wird.

• In der Titelzeile des Browsers.
• Wenn im Browser ein Lesezeichen/Bookmark gesetzt wird.
• Und natürlich spielt der Titel hinsichtlich der Suchmaschinenoptimierung eine ganz wesentliche Rolle.

 
Ihr seht also, wie wichtig der Titel ist. Wählt den Titel möglichst kurz und prägnant.

Bilder



 
Für eine ausführliche Beschreibung der Seite könnt ihr Metaangaben verwenden. Ausführliche Informationen dazu folgen noch.

Weiter geht es mit dem verwendeten Zeichensatz.
<meta charset="UTF-8" />

Diese Angabe ist für die Browser wichtig. Denn nur so wissen diese, wie die Zeichen kodiert werden müssen, damit sie richtig angezeigt werden. Nur durch die Angabe des richtigen Zeichensatzes werden beispielsweise Umlaute und Sonderzeichen richtig dargestellt. Normalerweise gibt man hier UTF-8 an.

Nun kommen wir zum eigentlichen Inhalt der Webseite, also dem, was die Besucher tatsächlich sehen. All das wird im body-Element definiert.
<body>
 …
 </body>

Fügt zu Demonstrationszwecken einfach mal Folgendes zwischen öffnendes und schließendes <body>-Tag ein:
<h1>PSD-Tutorials.de</h1>

Das Dokument sollte anschließend folgendermaßen aussehen:
<!DOCTYPE html>
 <html lang="de">
 <head>
    <title>Beispiel HTML5 Grundgerüst - www.html-seminar.de</title>
    <meta charset="UTF-8" />
 </head>
 <body>
 <h1>PSD-Tutorials.de</h1>
 </body>
 </html>

 
Speichert die Änderungen ab und ruft die Datei in einem Browser auf.

Bilder



Wie ihr seht, wird PSD-Tutorials.de jetzt tatsächlich angezeigt. Ihr habt also euer erstes eigenes HTML-Dokument erstellt.

Weitere Teile


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 12.10.2016 - 15:59

Herzlichen Dank für das Video.

Portrait von feuerweib
  • 29.01.2016 - 20:23

super toll erklärt - bin grad am Auffrischen meiner HTML Kenntnisse und war zwar hier nix Neues für mich, aber ich bin gespannt auf die weiteren Teile :-)

Portrait von BeBa
  • 18.04.2015 - 19:46

Super schön erklärt. Lade mir jetzt auch die Folge-Teile herunter und bin gespannt...

Portrait von ZainaPhoto
  • 28.03.2015 - 20:34

Großen Dank für das Video.

LG Zaina

Portrait von Boris_S
  • 02.02.2015 - 11:51

Super erklärt, besten Dank!

Portrait von annasa
  • 02.11.2014 - 18:12

Danke für das Training und die Erklärungen

Portrait von oshannon
  • 03.09.2014 - 10:42

Vielen Dank, ich freu mich schon auf die nächsten Ausgaben.

Portrait von Steve007
  • 31.08.2014 - 17:09

Vielen Dank für Dein interessantes Video - Training.

Portrait von Luther_Sloan
  • 30.08.2014 - 12:21

Vielen Dank für das interessante Video.

Portrait von renate_C
  • 30.08.2014 - 11:51

Danke für das gute Video samt Datei.

Portrait von arko2013
  • 30.08.2014 - 11:37

Ich bedanke mich für das informative und sinnvolle Video mit den guten Erklärungen.

Portrait von Caesarion2004
  • 30.08.2014 - 11:24

Vielen Dank für das informative Tutorialvideo.

Portrait von Kundentest
  • 30.08.2014 - 08:46

Herzlichen Dank für das Video.

Portrait von B_Kukuk
  • 30.08.2014 - 08:24

10 Tage gewartet und dann nur eine Wiederholung - Schade!

Portrait von B_Kukuk
  • 24.08.2014 - 08:44

Danke für den 2. Teil. Als Editor nehme ich Expression Web 4. MS bietet die Software kostenlos zum Download an. Die nimmt einen etwas an Tipparbeit ab.

Portrait von Leistritz
  • 24.08.2014 - 07:02

Danke für die Info. Gut.

Portrait von Steve007
  • 22.08.2014 - 10:41

Vielen Dank für diesen weiteren Teil Deiner interessanten Reihe. Dies ist bestimmt für Einsteiger ein sehr guter Start. Ich würde aber auch Anfänger raten als Editor den kostenlosen "Notepad++" zu verwenden.

Portrait von Bruhsman
  • 21.08.2014 - 13:51

Krass...meine erste selbst programmierte Seite ;-) Danke

Portrait von AnneRick
  • 21.08.2014 - 00:00

vielen dank fur das Tutorial.

Anne

Portrait von Domingo
  • 20.08.2014 - 22:52

Vielen Dank für diesen Teil.

x
×
×