• Alternative for /home/netsh103475/html/application/../html-sub/section-tutorial/img/tutorial-img-big-604.gif

    HTML Kurs - Teil I - Der Aufbau einer HTML Datei

    03.05.2006 in HTML/CSS von kleinerVampir

    • Kategorie: HTML/CSS
    • Erstellt mit Programmversion: keine Angabe
    • Dateigröße (PDF): 1.0 MB
    • Bisherige Zugriffe: 5354
    • Quellen: -
    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.
     

Lieber Gast …

… die Inhalte von PSD-Tutorials.de stehen nur registrierten Mitgliedern zur Verfügung. Damit wollen wir den Communitygedanken weiterführen. Als Mitglied trägst du - wenn auch nur im Kleinen - zum Puls der Community bei. Und nur so ist es möglich, weiterhin hochwertige Inhalte für alle bereitzustellen.

Jetzt kostenlos registrieren!

Vorteile der kostenlosen Mitgliedschaft

Mit der kostenlosen und schnell erledigten Registrierung erhältst du viele nachhaltige Vorteile, die wir dir hier in aller Kürze aufzeigen möchten:

  • PSD steht für professionelles Know-how in den Bereichen Bildbearbeitung mit Photoshop, Fotografie, Webentwicklung, Layout- und Vektorbearbeitung, 3D-Bearbeitung mit Cinema 4D und Co.
  • Über 3.000 Tutorials mit druckbarer PDF-Datei und teilweise den zugehörigen Arbeitsmaterialien
  • Mehr als 1.900 Video-Trainings als Stream zur Direktanzeige und zum Download
  • Abruf von über 2.200 Downloads zu Photoshop-Presets, 3D-Modellen, Grußkarten, Texturen & Co
  • Zugriff auf ein sehr aktives Forum mit Antworten im Minutentakt
  • Deine Daten sind sicher. Sie werden nicht weitergegeben! Die Mitgliedschaft kann jederzeit und ohne Aufwand wieder gelöscht werden.
  • Registriere dich bei uns und du erhältst die Selection-DVD mit über 24 Stunden Video-Trainings zu Photoshop, InDesign uvm. als Download gratis (sofern Newsletter aktiviert). 

Reinschnuppern als Gast

Niemand kauft gerne die Katze im Sack, auch wenn sie kostenlos ist. Wir haben eine Handvoll Tutorials und Video-Trainings ausgesucht, die du auch als Gast ohne Registrierung ansehen kannst. Gefallen sie dir, stehen dir nach der Registrierung alle oben genannten Inhalte zur Verfügung.

Jetzt kostenlos registrieren!

Passend zum Inhalt empfehlen wir:

Photoshop-Workshop-DVD - Webdesign

  • Webdesign mit Photoshop: alle erstellten Layouts mit Arbeitsdatei (PSD)!
  • Umsetzung erstellter Weblayouts in HTML/CSS
  • Tipps & Tricks zum Webdesign in Photoshop und zur Webentwicklung
Jetzt informieren Trailer ansehen

Kommentare

  • Alternative Portrait von DaNino

    DaNino

    14.07.2011 - 16:18

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

  • Alternative Portrait von Ai_relav

    Ai_relav

    05.05.2011 - 01:16

    Vielen Dank für diesen hilfreichen Tutorial !

  • Alternative Portrait von sr4l

    sr4l

    05.01.2011 - 13:43

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

    Nun kommt der 2. Teil ;)

  • Alternative Portrait

    User hat PSD-Tutorials.de verlassen

    04.08.2010 - 12:00

    Super, kapiert man so echt leicht!

  • Alternative Portrait von Dj_Blackout

    Dj_Blackout

    18.07.2010 - 21:09

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

  • Alternative Portrait von valva

    valva

    22.12.2009 - 09:49

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

  • Alternative Portrait von rozo

    rozo

    06.07.2009 - 12:14

    Hallo
    schönestut aber wie und wann gehts weiter

  • Alternative Portrait

    User hat PSD-Tutorials.de verlassen

    30.06.2008 - 12:58

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

  • Alternative Portrait

    User hat PSD-Tutorials.de 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

    User hat PSD-Tutorials.de verlassen

    28.04.2008 - 15:56

    Dankeschön für das Tut

  • Alternative Portrait

    User hat PSD-Tutorials.de verlassen

    14.03.2008 - 20:51

    bissel wenig das ganze

  • Alternative Portrait

    User hat PSD-Tutorials.de verlassen

    25.02.2008 - 18:38

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

  • Alternative Portrait von tomatito

    tomatito

    04.11.2007 - 20:05

    HTMl na denn men tau

  • Alternative Portrait

    User hat PSD-Tutorials.de 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

    User hat PSD-Tutorials.de 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

    User hat PSD-Tutorials.de 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

    • Alternative Portrait von kleinerVampir

      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

    alf0905

    18.11.2006 - 15:02

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

    Vielen Dank

  • Alternative Portrait

    User hat PSD-Tutorials.de verlassen

    07.10.2006 - 20:59

    Du hast zumindest den DOCTYPE vergessen

Weitere Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.

Anleitung (Bilder + Extras werden nur für Mitglieder eingeblendet)


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
vBulletin 0.044 ZF-App 0.654 Total 0.698