-
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: -
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.
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.
- Download: Vektor-Logo (Eidechse)
- Download: Sepia-Vintage-Effekt-Aktion
- Download: Screenguide-Magazin als PDF zum Download
- Download: Spiegelungen 2
- Tutorial: Linien zum Glühen bringen
- Tutorial: Ballons aus einer Schublade
- Tutorial: Neue Pinsel erstellen leicht gemacht
- Tutorial: Kommerzielle Fotografie 01: Berufswunsch Fotografie
- Videotraining: Die Programmoberfläche und der Arbeitsbereich von Adobe InDesign
- Videotraining: Lichtscheinkontureneffekt mit Animation
- Videotraining: CorelDRAW X6 Grundlagen - Hilfsmittel Freihand, 2-Punkt-Linie, Bezier, B-Spline, Polylinie, Stift, 3-Punkt-Kurve
- Videotraining: CorelDRAW X6 Grundlagen: Hilfsmittel Form - Heranziehen, Zurückweisen
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
Kommentare
Weitere KommentareAnleitung (Bilder + Extras werden nur für Mitglieder eingeblendet)
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
-
Reklame
-
-
- Kalender mit Slider
- Problem mit Textwerkzeug
- Suche Coder für online Portfolio (php)
- Problem im IE, jQuery wird nicht geladen
- Anzeigenformate und Farben 1+2+3+4 ?
- Kaufentscheidung Scanner A3
- Wie integriere ich ein Loading-Bild in einen bestehenden Upload Skript ?
- Sichel erstellen ... Anfänger
- Android: Download auf SD-Karte
- Displacement Map ruft seltsame Fragmente hervor
- Wunschliste Zubehör
- Altes blitzlich
- Karteireiter links oder rechts
- Skript/Automatisierung: PDF drehen, distillen, Seiten entnehmen
- Welches Objektiv könnt ihr mir empfehlen
- Blender Release 2.67a erschienen
- Ganze Webseite als (jquery) Slider
- Hallo aus dem Schwabenland...
- Beauty-Retusche (Lichtfall, Aufhellen)
- Preis für Kenko 0.25x Fishexe Converter KDV-0252
-
-
Aktuelles Commag
Anzeige
-
Anzeige

DaNino
14.07.2011 - 16:18
sehr hilfreich und einfach erklärt, vorallem wegen deiner guten Formatierung! weiter so
Ai_relav
05.05.2011 - 01:16
Vielen Dank für diesen hilfreichen Tutorial !
sr4l
05.01.2011 - 13:43
Super erklärt!
Sehr einfach und verständlich! :)
Nun kommt der 2. Teil ;)
User hat PSD-Tutorials.de verlassen
04.08.2010 - 12:00
Super, kapiert man so echt leicht!
Dj_Blackout
18.07.2010 - 21:09
Prima erklärt, und jetzt mach ich gleich mit Teil II weiter:-)
valva
22.12.2009 - 09:49
Super Tut, und wann geht es weiter? Oder ist Teil 2 für immer im Nirwana verschwunden?
rozo
06.07.2009 - 12:14
Hallo
schönestut aber wie und wann gehts weiter
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 ;þ
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
User hat PSD-Tutorials.de verlassen
28.04.2008 - 15:56
Dankeschön für das Tut
User hat PSD-Tutorials.de verlassen
14.03.2008 - 20:51
bissel wenig das ganze
User hat PSD-Tutorials.de verlassen
25.02.2008 - 18:38
gut gemacht.. aber doch etwas wenig ..4/5
tomatito
04.11.2007 - 20:05
HTMl na denn men tau
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
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
jus
02.01.2007 - 13:30
einfahc super tut!!!
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
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
alf0905
18.11.2006 - 15:02
Hallo,
vielleicht versteh ich dadurch die Prinzipien der html Seiten.
Vielen Dank
User hat PSD-Tutorials.de verlassen
07.10.2006 - 20:59
Du hast zumindest den DOCTYPE vergessen