Anzeige
Tutorialbeschreibung

HTML Kurs - Teil I - Der Aufbau einer HTML Datei

HTML Kurs - Teil I - Der Aufbau einer HTML Datei

In diesem Kurs möchte ich Anfängern die Grundlagen von HTML näher bringen.

Im ersten Teil werden wir uns mit dem grundlegenden Aufbau einer HTML-Seite beschäftigen. Teil II wird dann die inhaltliche Gestaltung einer HTML-Seite zeigen. Wieviele Teile dieser Kurs letztendlich haben wird, kann ich hier noch nicht genau abschätzen.

Ich kann aber mit Sicherheit sagen, dass ich versuchen werde nach und nach Anfängern den Umgang mit HTML näher zu bringen.


HTML - Kurs
Teil I - Der Aufbau einer HTML Datei

1. Vorwort

Ich möchte mich auch nicht lange mit dem Vorwort aufhalten, sondern euch nur kurz erklären,
um was es in diesem Kurs gehen soll und was dieser euch vermitteln soll. Als allererstes sollte erwähnt sein, dass sich dieser Kurs (Teil I) an Anfänger richtet, die noch nie mit HTML
gearbeitet haben. Dazu werde ich kurz erklären, wie so ein HTML Dokument eigentlich aufgebaut
ist und was, wo in dem Dokument passiert. Danach beschäftigen wir uns mit den verschiedenen
Abschnitten in einem HTML Dokument und was in dem jeweiligen Abschnitt für Informationen
eingetragen werden können oder sollten. Ich werde mich in diesem Teil bewusst nur auf "reinen"
HTML Code festlegen. Sprich also weder mit CSS noch mit JavaScript oder ähnlichem arbeiten.
Auf diese Techniken werde ich in einem späteren Teil genauer eingehen. So, nun kommen wir
aber mal zu dem, was dieser Kurs vermitteln soll. Ziel des Kurses ist es, den Aufbau eines HTML
Dokumentes kennen zu lernen und zu verstehen. Falls am Ende dieses Kurses noch etwas
unklar sein sollte, so stehe ich gerne für Fragen bereit.


2. Das HTML Grundgerüst / Die einfache HTML Datei

Eine HTML Datei besitzt immer die Endung .htm bzw. .html

Der Aufbau

Ich werde euch hier jetzt stückweiße den Aufbau einer HTML Datei erklären.
Die einzelnen Abschnitte in einem HTML Dokument nennt man Tag. Ein Tag
wird immer mit einer <Anweisung> eröffnet und mit einem Slash / vor der </Anweisung>
beendet.

Die erste Anweisung in einem HTML Dokument ist der <HTML> Tag. Dieser HTML-Tag
legt fest, dass es sich bei unserem Dokument um eine HTML-Datei handelt. Die Besonderheit
hier ist, dass dieser Tag als erster geöffnet und als letzter wieder geschlossen wird. Sprich,
alle anderen Tags reihen sich als "Untertags" in diesen ein.

Als nächstes folgt dann der so genannte <HEAD> Tag. Also der Kopf unserer HTML
Datei. Dieser HEAD-Tag enthält diverse "Untertags" welche wichtige Informationen beinhalten.
Dies sind unter anderem Pfade zu externen CSS oder Javascript Dateien, Javascripte oder
CSS Styles. Darauf werden wir aber hier nicht näher eingehen, da das Thema CSS und Javascript
in einem späteren Kurs separat behandelt werden wird. Desweiteren wird in dem HEAD-Tag der
Titel der Webseite festgelegt. Dies geschieht mit dem <TITLE> Tag. Dieser Titel wird innerhalb
unseres Webbrowsers in der oberen Titelleiste angezeigt. Außerdem enthält unser HEAD-Tag
noch sogenannte Metatags. Diese Metatags beinhalten wichtige Informationen über die Seite,
sprich unser Dokument an sich. Auf diese Metatags werde ich gleich noch genauer eingehen.

* Die Metatags

Ich werde euch anhand von Beispielen den Einsatz von Metatags verdeutlichen.

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">

Dieser Metatag legt deffiniert die Art des Dokumentes und den darin verwendeten Zeichensatz.
Die Art des Dokumentes wird durch das CONTENT-Attribut bestimmt. In unserem Fall also
text/html. Außerdem wird der verwendete Zeichensatz durch das Attribut charset festgelegt.
Das festlegen des Zeichensatzes hat den Vorteil, dass wir später z.B. unsere Umlaute nicht
extra konvertieren müssen, damit diese richtig dargestellt werden.

<META HTTP-EQUIV="Language" CONTENT="de">

Dieser Metatag legt über das CONTENT-Attribut die auf der Seite verwendete Sprache fest.
In unserem Fall also de für Deutsch. Alternativ kann man auch eine andere Sprache angeben,
wie z.B. en für Englisch, fr für Französisch, es für Spanisch usw.

<META name="description" content="Hier die Beschreibung">

Dieser Metatag enthält den Beschreibungstext zu unserem HTML-Dokument, wie er von verschiedenen
Suchmaschinen angezeigt wird. Dieser Text sollte max. 250 Zeichen und 3 Zeilen umfassen, da die
Suchmaschinen nicht mehr Text bei der Seitenbeschreibung anzeigen.

<META name="keywords" content="Wort1, Wort2, mehrere Worte, Wort3">

Dieser Metatag beinhaltet sogenannte Keywords, sprich Schlüsselwörter, welche den Suchbegriffen
in Suchmaschinen entsprechen. Hier sollte man darauf achten, dass man Worte verwendet welche
eindeutig den Inhalt der Seite wiederspiegeln. Einzelne Suchbegriffe werden durch ein Komma getrennt.
Es kann mit mehreren Wörtern als zusammenhängender Suchbegriff gearbeitet werden.

Natürlich gibt es noch eine ganze Reihe mehr an Tags, welche ich aber hier außen vor lassen möchte,
da dies nur zu Verwirrung bei Anfängern führen dürfte. Wer hier nähere Informationen wünscht, sollte
doch einfach mal www.google.de bemühen und dort nach dem Begriff Metatags suchen.

Damit hätten wir den <HEAD> Tag auch schon im wesentlichen behandelt. Kommen wir nun einmal
zu einer Zusammenfassung unseres bisherigen Wissens und schauen uns den "Code" für unser
HTML-Dokument , wie wir ihn jetzt erstellen können, an.

<HTML>
 <HEAD>
  <TITLE>Unsere erste HTML Seite</TITLE>
   <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
   <META name="description" content="Wir erstellen eine Webseite.">
   <META name="keywords" content="HTML, Homepage Erstellung, Webseite">
 </HEAD>

Soweit sollte jetzt jeder verstehen was in oben gezeigtem "Code" passiert und was man wie und
wo ändern kann.

Kommen wir zum nächsten Punkt, dem <BODY> Tag. Dies ist wie der Name schon sagt der
"Körper" unseres Dokumentes. Der BODY-Tag folgt immer nach Beendigung des HEAD-Tags.
Er enthält Anweisungen zur Darstellung sowie der farblichen Gestaltung der Elemente in unserem
HTML-Dokument. Innerhalb dieses BODY-Tags werden auch die Inhalte unseres Dokumentes
festgelegt und angeordnet. Alle Anweisungen, welche die Darstellung oder farbliche Gestaltung
unseres Dokumentes betreffen, werden innerhalb des Bodytags festgelegt.

Bsp: <BODY BGCOLOR="#000000">

Dieses Beispiel würde jetzt für unser gesamtes Dokument die Hintergrundfarbe (BGCOLOR)
schwarz festlegen. Die Farbe wird durch ein Rautezeichen # gefolgt von einer 6stelligen Zahl bestimmt.
Diese Codes sind sogenannte HEX-Dezimal Codes. Da man nicht alle Farbcodes im Kopf haben kann,
gibt es im Internet diverse Seiten, auf denen diese Codes aufgelistet sind. Eine gute Anlaufadresse hierfür ist
http://www.mediaevent.de/tutorial/farbcodes.html. Dort sind im wesentlichen alle wichtigen Farben gelistet.
Wer jedoch weitere Infos benötigt, dem kann ich auch hier nur wieder zu Google raten.

Ich werde jetzt alle wesentlichen Anweisungen des BODYTAGS auflisten und kurz erklären.
Sämtliche Anweisungen, welche ich hier aufliste, werden genauso innerhalb von <BODY ...> eingefügt,
wie im obigen Beispiel die BGCOLOR Anweisung.

BGCOLOR="#000000"

Die Anweisung BGCOLOR legt die Hintergrundfarbe unseres Dokumentes fest. Wobei die Farbe welche
verwendet werden soll in Anführungszeichen " " durch einen HEX-Dezimalcode oder alternativ durch ihre
englische Bezeichnung angegeben wird.

TEXT="#FFFFFF"

Die Anweisung TEXT deffiniert die Schriftfarbe unserer Texte, welche wir in unserem HTML Dokument
verwnden. Für die festgelegte Farbe gilt gleiches wie schon bei BGCOLOR erwähnt.

LINK="#FF0000"

Die LINK Anweisung legt die Farbe für Hyperlinks innerhalb unserer Seite fest.

ALINK="#00FF00"

Die Anweisung ALINK legt die Farbe für aktive Links fest.

VLINK="#0000FF"

Die VLINK Anweisung legt die Farbe für Visited-Links, sprich besuchte Links fest.

Die oben aufgeführten BODY-TAG Anweisungen legen alle die farbliche Erscheinung der Elemente
innerhalb unseres HTML-Dokumentes fest. Es gibt natürlich noch eine Reihe weiterer BODY-TAG
Anweisungen, auf die ich aber nicht alle hier eingehen werde, da dies nur Verwirrung
stiften würde an dieser Stelle. Die fehlenden Anweisungen werde ich dann gesondert im jeweiligen
Abschnitt behandeln.

Schauen wir uns nun also unseren "Wissensfortschritt" anhand eines Codebeispiels an.

 <HTML>
 <HEAD>
  <TITLE>Unsere erste HTML Seite</TITLE>
   <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
   <META name="description" content="Wir erstellen eine Webseite.">
   <META name="keywords" content="HTML, Homepage Erstellung, Webseite">
 </HEAD>
 <BODY BGCOLOR="#000000" TEXT="#FFFFFF">
  Hier würde der Inhalt unserer Seite hin kommen.
  Dazu aber später mehr, da es in diesem Teil
  lediglich um den grundlegenden Aufbau einer
  HTML Seite geht.
 </BODY>
</HTML>

Ich hoffe, dass jetzt jeder den grundlegenden Aufbau eines HTML-Dokumentes nachvollziehen kann.
Falls Fragen auftauchen sollten, so stehe ich gern für Antworten zur Verfügung.
Somit haben wir Teil I unseres HTML Kurses auch schon beendet.
Hier noch eine kleine Vorachau auf Teil II der in Kürze (sobald ich Zeit dazu finde) folgt.

HTML - Kurs - Teil II
"Die inhaltliche Gestaltung"
- Einfügen und Formatieren von Texten und Bildern
- Ausrichtung von Elementen
- Erstellung von Tabellen
- Hinzufügen von Links

MfG kleinerVampir


DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Reen36
  • 20.08.2013 - 13:07

hmm bissel zeit gebracuht aber echt hammer gut. dankesehr

Portrait von DaNino
  • 14.07.2011 - 16:18

sehr hilfreich und einfach erklärt, vorallem wegen deiner guten Formatierung! weiter so

Portrait von Ai_relav
  • 05.05.2011 - 01:16

Vielen Dank für diesen hilfreichen Tutorial !

Portrait von sr4l
  • 05.01.2011 - 13:43

Super erklärt!
Sehr einfach und verständlich! :)

Nun kommt der 2. Teil ;)

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 04.08.2010 - 12:00

Super, kapiert man so echt leicht!

Portrait von Dj_Blackout
  • 18.07.2010 - 21:09

Prima erklärt, und jetzt mach ich gleich mit Teil II weiter:-)

Portrait von valva
  • 22.12.2009 - 09:49

Super Tut, und wann geht es weiter? Oder ist Teil 2 für immer im Nirwana verschwunden?

Portrait von rozo
  • 06.07.2009 - 12:14

Hallo
schönestut aber wie und wann gehts weiter

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 30.06.2008 - 12:58

Ich danke dir für dieses tutorial ist super und hat mir eben sehr gut geholfen ;þ

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 20.06.2008 - 16:03

also ich finde dieses tutorial saugut und hoffe das der restlichen auch so gut sind und ich es schaffe ne gescheite page zu gestalten
thx4thistutorial

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 28.04.2008 - 15:56

Dankeschön für das Tut

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 14.03.2008 - 20:51

bissel wenig das ganze

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 25.02.2008 - 18:38

gut gemacht.. aber doch etwas wenig ..4/5

Portrait von tomatito
  • 04.11.2007 - 20:05

HTMl na denn men tau

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 23.01.2007 - 18:29

Find ich verständlich erklärt! Besonders für leute (wie mich) die nicht ganz vertsanden haben was für was steht! (Finde ich)
Also: 5/5

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 11.01.2007 - 22:00

naja super?!

isn bisschen dünn um um wirklich etwas anzufangen
was du da schreibst kennt man gerade so vom hörensagen
habe mir mehr erhofft

Portrait von jus

jus

  • 02.01.2007 - 13:30

einfahc super tut!!!

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 20.12.2006 - 05:30

Moin,
ähhmm auch wenn es sich jetzt doof anhört, aber wo gibt man das alles ein. Also ich meine welches programm???

Mfg

Portrait von kleinerVampir
  • 22.12.2006 - 00:33

Das ganze kannst du in einem beliebigen Editor (hierzu reicht Notepad in Windows) eingeben. Dann speicherst du das ganze als .htm Datei

LG kleinerVampir

Portrait von alf0905
  • 18.11.2006 - 15:02

Hallo,
vielleicht versteh ich dadurch die Prinzipien der html Seiten.

Vielen Dank

x
×
×