[(x)HTML] [Tutorial] Grundgerüst.

ersGuterJunge
Neuling
Beiträge: 22

Aktivitätspunkte: 185

Registrierungsdatum: 18. November 2011

Wohnort: Neunkirchen

Danksagungen: 0 / 8

Freitag, 18. November 2011, 12:59

[Tutorial] Grundgerüst.

[Tutorial] Grundgerüst.

Beschreibung:
[Heute erkläre ich euch, wie ein Grundgerüst eines HTML-Dokumentes aufgebaut ist]

Geeignet für:
[x] Anfänger
[ ] Fortgeschrittene
[ ] Profis

Dazu wird NICHTS benötigt, da ich hier nur Erklärungen der einzelnes Codeausschnitte posten werden.

Am Ende dieser Erklärung wird unser Ergebniss so aussehen:

PHP-Quelltext

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>   <head>    <meta name="description" content="BESCHREIBUNG DIESER SEITE">     <meta name="keywords"  content="SCHLÜSSELWÖRTE">     <meta name="author" content="AUTHOR DIESER SEITE">     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     <title>Dein Titel hier!</title>     <link rel="stylesheet" type="text/css" href="cssdateiname.css" />   </head>   <body>     <div id="wrapper">     </div>   </body> </html>

Also, beginnen wir gleich mit den ersten Tags...

Der "HTML"-Tag

Der "HTML"-Tag besteht aus:

	PHP-Quelltext
1	<html></html>

Und sagt uns bzw. dem Browser, was nun als Websprache rankommt.
Sprich, man kann auch davor und danach PHP reinschreiben.

Viel gibt es zu diesem Tag nicht zu sagen, wie gesagt, der Browser erkennt nun: "Aha, nun kommt HTML!".

Die "Head"-Tags

Die Head-Tags geben uns Informationen wie beispielsweise CSS-Dateien, Meta-Tags, Titel der Seite & vieles mehr bekannt.
Dieser Tag wird mit <head>Informationen</head> gebildet.
Absolut falsch ist:

	PHP-Quelltext
1	<html> <head> Meine Seite heißt "Titel" ... usw. </head> </html>

Richtig ist, dass man es in HTML bzw. xHTML valide schreiben muss, damit ein vernüfftiger HTML-Tag entsteht:

	PHP-Quelltext
1	<link rel="stylesheet" type="text/css" href="datei.css" />

Dieser Tag benutzt ein externes Stylesheet, womit später unsere Seite gestaltet wird, dazu aber später in meinem CSS-Tutorial mehr.

Also, sieht ein "Head"-Tag also so aus, wenn man ihn richtig in HTML bzw. xHTML valide schreibt:

	PHP-Quelltext
1	<html> <head> <title>Hier steht dann dein Titel!</title> </head> </html>

Der "Body"-Tag

Nun kommen wir zum wichtigsten Teil des Grundgerüstes.
Dem "Body"-Tag.

Ohne diesen Tag kann und wird unsere Seite nicht vernüfftig gestaltet, sprich uns fehlt ein Hintergrund.
Der Tag entsteht mit <body></body>.

Natürlich wollen wir unseren Body-Tag etwas füllen, dies tu ich mit einem div-Tag, den man oft in Verbindung mit CSS sieht.

Der "Meta"-Tag

Der "Meta"-Tag besteht meistens aus: Description, Keywords, Author und Content-Type.

Das Ganze sieht dann so aus:

PHP-Quelltext

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>   <head>     <meta name="description" content="BESCHREIBUNG DIESER SEITE">     <meta name="keywords"  content="SCHLÜSSELWÖRTE">     <meta name="author" content="AUTHOR DIESER SEITE">     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     <title>Dein Titel hier!</title>     <link rel="stylesheet" type="text/css" href="cssdateiname.css" />   </head>   <body>     <div id="wrapper">     </div>   </body> </html>

Damit sind wir nun am Ende der Erklärung des HTML-Grundgerüstes.
Nun fehlen noch charsets und andere Sachen, die zwar für ein valides HTML wichtig sind, jedoch reicht diese Erklärung für Anfänger vollkommen aus.

Fragen und Probleme zu den Erklärungen bitte ich hier zu stellen.

Wie man nun das Ganze mit CSS "stylet", gibts gleich zu erfahren.

MfG,
ersGuterJunge.

Zum Seitenanfang

wit
You got served!
Beiträge: 251

Aktivitätspunkte: 1 470

Registrierungsdatum: 21. Juni 2011

Wohnort: London

Beruf: IT Consultant

Danksagungen: 108 / 2

Freitag, 18. November 2011, 13:06

Ich wuerde dieses "Tutorial" noch einmal ueberarbeiten.

Bis jetzt bringt es nicht wirklich irgendwelches Wissen an den Mann/Frau und hat in meinen Augen ein sehr hohes Potential gefaehrliches Halbwissen zu verbreiten.

Alles Gute,
WIT :angel:

PHP Nachschlagewerk: http://www.php.net
Warum W3Schools *doof* ist : http://w3fools.com/
Alles andere: http://www.google.com
Wie man Fragen stellt: http://www.catb.org/~esr/faqs/smart-questions.html
SMART GOALS: http://www.topachievement.com/smart.html

Zum Seitenanfang

Grievous
Supermoderator
Beiträge: 893

Aktivitätspunkte: 5 060

Registrierungsdatum: 16. August 2009

Wohnort: Berlin

Beruf: Schüler

Danksagungen: 237 / 35

Freitag, 18. November 2011, 14:17

Zitat von »wit«

Ich wuerde dieses "Tutorial" noch einmal ueberarbeiten.

Bis jetzt bringt es nicht wirklich irgendwelches Wissen an den Mann/Frau und hat in meinen Augen ein sehr hohes Potential gefaehrliches Halbwissen zu verbreiten.

Da kann ich wit leider nur zustimmen. Ich finde, dass das Tutorial erstens zu umgangssprachlich erklärt wurde und dadurch manches nicht korreckt darstellt und außerdem sollt das ganze noch strukturierter und ein wenig ausführlicher sein.

Ich möchte ja keine Eigenwerbung machen, aber ich denke, dass man selbst in meinem "[(x)HTML] Grundlagen"-Tutorial es alles ein wenig genauer erfährt. *hier geht es zum Tutorial*

MfG Grievous

currently: Visual C#

next tutorials: JOIN Operations, CREATE Procedure

skills: (x)HTML, CSS(3), PHP, SQL, Java, Haskell, Prolog

JSnake: 95%

JMinesweeper: 30%

Zum Seitenanfang

.lard?
Member
Beiträge: 243

Aktivitätspunkte: 1 390

Registrierungsdatum: 27. September 2009

Wohnort: Berlin

Beruf: Corporate Media Design

Danksagungen: 14 / 17

Freitag, 18. November 2011, 18:58

noch anzumerken ist, dass beim einbinden des stylesheets das wichtige Attribut "media" fehlt. damit wird festgelegt wofür das stylesheet gedacht ist.

Zum Seitenanfang