Du bist nicht angemeldet.

HTML [Grundgerüst] (ohne HTML5)&( mit html5 xD)

Miyu

Creative Sheep

  • »Miyu« ist der Autor dieses Themas

Beiträge: 52

Wohnort: Cologne

Beruf: Studentin

  • Private Nachricht senden
280

1

31.05.2012, 20:02

HTML [Grundgerüst] (ohne HTML5)&( mit html5 xD)

Ich dachte mir für Anfänger schreib ich auch mal eben schnell ein Tutorial..
(was wundersamerweise ja sogar noch gar nicht im Forum vertreten ist! o.o")


Was braucht ihr?
  • Einen HTML-Editor (kein Word!!)
  • Webbrowser (ihr wollt ja sehen was ihr macht!)

Allgemein:
Das HTML-Dokument besteht aus einem Kopf (der head), dem Körper (body)
und dem Fuß (footer). Wird also in diese drei Bereiche aufgeteilt.


In HTML wird jeder Bereich geöffnet und geschlossen. So könnte es aussehen:
<head> </head> diese "beschreibung in den größer und kleiner Zeichen" nennt man Tag.
Kurz: Ein Bereich besteht aus einem öffnenden und einem schließenden Tag.
Merke: Ein schließendes Tag beginnt mit einem "/" (forwardslash)


Um dem Browser zu sagen das es sich um ein HTML-Dokument handelt endet
die Datei mit .html z.b. Homepage.html .




Der Kopf:
Wir starten mit der Aussage das es sich um ein HTML Dokument handelt:
<!doctype html> (dokument-typ? xD erklärt sich ja eh von selbst..)


Darauf folgt der Anfang des Kopf-Bereiches:
<head>


Bei diesem Anfang ist es möglich direkt klar zu stellen das es sich hierbei um
eine deutsche Seite handelt: <head lang="de"> "lang" steht für language=Sprache
und "de" steht für deutsch =) "en" wäre für english etc..


Tipp: Schreibt immer direkt das dazu schließende Tag. Das hilft dabei, dass ihr nicht
vergesst ein Tag zu schließen! Denn dann gibt's Fehler :P Also: <head> </head>



Im Kopfbereich befinden sich grundlegende Informationen über das HTML-Dokument.
Dazu gehört das <meta> tag welches dazu da ist die Zeichensetzung der Seite anzugeben.
Bei dem <meta> tag gibt es eine Besonderheit, denn es gehört zu den tags die kein weiteres schließendes tag brauchen. meta beinhaltet "charset="utf-8" was uns die Zeichensetzung auswählen lässt. "utf-8" ist so mein standard =)

<title> gibt den Namen der Homepage an (dieser steht dann oben bei dem Browser).
Und <link> welches optional ist, denn damit kann man eine CSS datei einbinden.



Bsp.:

Quellcode

 
1
2
3
4
5
6
7

<!doctype html>
	<html lang="de">
	<head>
 <meta charset="utf-8">
 <title>Name der Seite</title>
 <link href="style.css" rel="stylesheet">
	</head>


Sieht doch ganz hübsch aus soweit oder?
Wer jetzt aufgepasst hat wird sich folgende Frage stellen: 1. Weder das tag <!doctype> als auch das <html> wurden geschlossen. 2. Müssen sie geschlossen werden?
Die Antwort: Das erste tag <!doctype> muss nicht geschlossen werden es macht nur eine einmalige Angabe. Bei dem <html> tag sieht das schon anders aus, denn es will einen ganzen Bereich als html - Bereich anzeigen lassen.. d.h. es wird noch geschlossen keine Sorge :)


Der Körper:
Hier befindet sich der Inhalt unserer Seite und wird mit dem tag <body> geöffnet und mit dem tag </body> geschlossen. Innerhalb dieses tags könnt ihr nun euren Text schreiben der auf eurer Seite angezeigt wird. Vergesst dabei nicht eine der grundlegenden HTML-Regeln: Nichts darf leer rumstehen, dass heißt schreibt euren Text z.b. in den <p> tags (p=paragraph=Absatz).


Bsp.:

Quellcode

 
1
2
3

<body>
	<p> Hallo Welt </p>
</body>



Der Fuß:
Der letzte Bereich beinhaltet meist Links zu eurem Impressum oder zu Credits..
Abgesehen davon steht dort auch das jeweilige Copyright z.b.:
Coded by Miyu.
Der Fuß tag heißt <footer> und wird mit </footer> geschlossen.


Bsp.:

Quellcode

 
1

<footer>		<p> Coded by Miyu </p></footer>






HTML schließen:

Nicht vergessen das <html> tag nun mit </html> zu schließen!


Die ganze Datei:

<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title> Meine Seite </title>
</head>
<body>
<p>Hallo Welt!</p>
</body>
<footer>
<p>bla</p>
</footer>
</html>

Quellcode

 
1

<!doctype html><html lang="de">	<head>		<meta charset="utf-8">		<title> Meine Seite </title>	</head>	<body>		<p>Hallo Welt!</p>	</body>	<footer>		<p>bla</p>	</footer></html>


(PS: der mag das ende irgw. nich einrücken x.x! wtf!)

Delight

Anfänger

Beiträge: 12

  • Private Nachricht senden
90

2

31.05.2012, 20:27

Ui, vielen Dank für die Mühe! Finde ich echt super, dass du das Tutorial geschrieben hast. Ich persönlich finde es auch äußerst verständlich, Danke!

Vielleicht findet sich ja auch jemand, der Grundgerüste für verschiedene Layouts noch beitragen könnte, z.B. Table, Endless usw. :)

neontrauma

Schüler

Beiträge: 89

Wohnort: Leverkusen

Beruf: Webdesignerin & Fotografin

  • Private Nachricht senden
130

3

31.05.2012, 21:19

Eh... das footer-Tag gibt es aber nur in HTML5. ;-)

creeperz

mashumaro <33

Beiträge: 87

Wohnort: NRW

Beruf: Student

  • Private Nachricht senden
410

4

31.05.2012, 21:34

diese kurze Document Type Definition und meta charset-Angabe kenne ich ehrlich gesagt auch nur von html5 :huh:

eine valide XHTML-Seite (in der strict-Variante) müsste eigentlich so aussehen:

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">	
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> 
<title>Seitentitel</title>	
<link rel="stylesheet" href="style.css" type="text/css" />	
</head>
<body>	
Inhalte	
</body>
</html>

neontrauma

Schüler

Beiträge: 89

Wohnort: Leverkusen

Beruf: Webdesignerin & Fotografin

  • Private Nachricht senden
130

5

31.05.2012, 21:58

Stimmt, so genau hatte ich gar nicht gelesen. ^^

Miyu

Creative Sheep

  • »Miyu« ist der Autor dieses Themas

Beiträge: 52

Wohnort: Cologne

Beruf: Studentin

  • Private Nachricht senden
280

6

31.05.2012, 22:36

xD Okay also das Gerüst was gepostet wurde ist auch nich so ganz richtig aber habt schon recht hab doch html5 reingemixt (habs mit html 5 direkt gelernt also mixed) :D
"diese kurze Document Type Definition und meta charset-Angabe kenne ich ehrlich gesagt auch nur von html5 :huh:

eine valide XHTML-Seite (in der strict-Variante) müsste eigentlich so aussehen:"




<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />

Diese Angaben sind sinnlos geworden, anfangs hat der Browser sich nicht darauf verlassen das der User das richtig schreibt.. er hat im Endeffekt trotzdem nur das am Ende stehende charset=Iso etc. rausgesucht.. Es handelt sich also nicht um neue tags sondern um einfache Kürzungen.. Der Rest fällt einfach weg ^^
Btw. kleiner Tipp immer utf-8 benutzen anstatt das (auch veraltete) ISO-8895-1 =)
Tatsache.. die Angaben sind wohl für html4 gewesen. jedenfalls das mit dem charset.
Was ich persönlich aber sinnlos finde o.o denn sowohl meta als auch charset sind in html4 beide vorhanden... also nichts neues.. ^^


Sooo um es genau richtig zu sagen:
<html xmlns="http://www.w3.org/1999/xhtml"> <-da reicht auch <html> (ja das ist html4 ^^)
und hier <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
Einfach das ISO-8859 etc. in utf-8 ändern dann wäre es das wirklich richtige html4 Grundgerüst..
Wobei ihr mich auf den Gedanken bringt wie viel Sinn es macht das html4 Grundgerüst zu erklären..
Wir wollen ja vor ran kommen und nicht Geschichte lesen :P


Ich will ja niemanden auslassen:

Zitat

Ui, vielen Dank für die Mühe! Finde ich echt super, dass du das Tutorial geschrieben hast. Ich persönlich finde es auch äußerst verständlich, Danke!

Vielleicht findet sich ja auch jemand, der Grundgerüste für verschiedene Layouts noch beitragen könnte, z.B. Table, Endless usw. :)

Hm du hast mit deinem Vorschlag recht xD Wenn ich schon ein html4 Gerüst erklären will könnte ich auch Table Layouts die genauso ausgestorben sind wie html4 erklären..
Die Frage ist nur ob das Sinn macht ^^


Mein eigentliches vorhhaben war das HTML Grundgerüst zu erklären (ohne diese specials wie <section> <article> etc. und daher mir bekannt war das weder <meta> noch das attribut charset neu sind genauso wie bei <doctype> und attribut html, bin ich einfach davon ausgegangen das es html4 sein sollte ^^ daher es weder neue tags sind sondern doch eine neue "schreibweise" der tags (also doch html5) war das wohl ein fehlgriff :P
Aber sinn macht es auch wenig html4 beizubringen.. also änder ich den post einfach zu html5 =D soll ja frisch sein!

creeperz

mashumaro <33

Beiträge: 87

Wohnort: NRW

Beruf: Student

  • Private Nachricht senden
410

7

31.05.2012, 23:17

Zitat von »Miyu«


Das ist leider nicht der Fall ^^ genau so wie ich es da geschrieben hab ist das HTML Gerüst..
Das was du gepostet hast ist die alte version (und nein es ist kein html5 das ist wieder was anderes.. HTML5 ist mit den <section> und <articel> uuund <header> etc.).
Was Dokument Type angeht ist es schon richtig <!doctype html> zu schreiben mehr braucht der Browser nicht ^^(hängt wohl eher mit den Browsern zusammen [die sich ja auch nun verbessert haben] ) also wieder kein HTML5 ist schon richtig so :P


nein eigentlich nicht :P
Dieses Doctype wird vor allem bei oder besser gesagt seit HTML5 benutzt - Zitat:

Zitat

The <!DOCTYPE html> declaration is the syntax for the latest generation HTML - HTML5.


Das was ich gerade gepostet habe ist natürlich die "alte" Version, also XHTML in der strict-Version, was anderes habe ich auch nie behauptet 8)

Das größte Problem aber das du hier von einem HTML-Grundgerüst OHNE HTML5 sprichst und das ist es einfach nicht. Streng genommen sieht ein HTML-Grundgerüst so aus:

Quellcode

 
1
2
3
4
5
6
7

<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

Miyu

Creative Sheep

  • »Miyu« ist der Autor dieses Themas

Beiträge: 52

Wohnort: Cologne

Beruf: Studentin

  • Private Nachricht senden
280

8

31.05.2012, 23:22

Hmm.. Ich denke mein Hauptfehler war eher:
Zu glauben das <section> und <article> etc. also die html5 tags die man nun im body reinbringt.. Das die zum Grundgerüst zählen.. Das tuhen sie doch jetz nicht oder?
Denn das war mein Problem.. die wollte ich ausschließen...
Ich möchte ja ein HTML Grundgerüst erklären ohne die neuen Tags im body.

neontrauma

Schüler

Beiträge: 89

Wohnort: Leverkusen

Beruf: Webdesignerin & Fotografin

  • Private Nachricht senden
130

9

01.06.2012, 05:58

Naja, ich halte es für sinnvoller, den Leuten wenn, dann auch direkt HTML5 beizubringen.
Das ganz simple Grundgerüst mit <html>, <head> und <body> ist ja schnell erklärt und auch Neulinge sind nicht doof. *g*
Wenn man dann nämlich einen Schritt weitergeht und beim Inhalt landet - und zum Grundgerüst einer Webseite gehören nun mal auch ein Kopf- und Fußbereich und eine Sidebar, und im Inhaltsbereich gibt es eigentlich immer auch Überschriften - dann sollte man da direkt die HTML5-Syntax erklären. Ich finde die Elementnamen da nämlich schon recht selbsterklärend und das ist für einen Einsteiger vermutlich leichter zu verstehen, als wenn man ihn dann mit Dutzenden von Divs verwirrt.

nickaey

nick

Beiträge: 158

  • Private Nachricht senden
760

10

01.06.2012, 17:49

uh, schönes und verständliches tutorial. c: allerdings seh ich den sinn in dem <footer>-tag nicht? D:

neontrauma

Schüler

Beiträge: 89

Wohnort: Leverkusen

Beruf: Webdesignerin & Fotografin

  • Private Nachricht senden
130

11

01.06.2012, 19:38

Zitat von »nickaey«

uh, schönes und verständliches tutorial. c: allerdings seh ich den sinn in dem <footer>-tag nicht? D:

In HTML5 geht es darum, die Inhalte semantisch sinnvoll auszuzeichnen. D.h.: als Mensch erkennt man ja anhand der Schriftgröße, -farbe etc. und natürlich anhand des Inhalts selber, was eine Überschrift ist und was der Fließtext, wo ein Blogeintrag anfängt und dass sich die Kommentare auf diesen Eintrag beziehen, was ergänzende Infos über den Autor sind, dass ein Link zum Profil eines Users eben zu Informationen über den Verfasser führt und so weiter.

Maschinen - sprich: beispielsweise der Google-Bot - können das nicht erkennen. Die sehen nur lauter Text in verschiedenen Divs und Absätzen, allenfalls die Überschriften erkennen sie durch die h1- bis h6-Tags als solche. Demzufolge können all diese Informationen auch nicht durch Software ausgewertet werden. Das bietet jedoch jede Menge Vorteile, unter anderem sei hier mal das Schlagwort Semantic Web genannt - bei Interesse einfach mal Google anschmeißen, sonst tipp' ich mir hier die Finger wund. ;) Desweiteren könnten Apps durch eine Auszeichnung in HTML5 "verstehen", was die Navigation einer Webseite ist, und in einer mobilen Version der Webseite nur die Artikel anzeigen, die Navigation jedoch Smartphone-benutzerfreundlicher anbieten.

Der footer-Tag kann sowohl als Fußbereich der kompletten Webseite dienen (beispielsweise, indem man ganz unten die Links zum Impressum und den AGB platziert) oder auch als Fußbereich einzelner Artikel. Hier wären dann etwa die Buttons zum Teilen auf facebook & Konsorten gut aufgehoben, weil sie eben zum jeweiligen Artikel (<article>) gehören, ihn aber gewissermaßen nur ergänzen. Die Überschrift des Artikels und ggf. auch die Angaben zum Verfasser und dem Datum kommen analog dazu in den <header>-Bereich des Artikels.

Dieses Tutorial erklärt sehr gut und mit Bildern, wie ein Bloglayout in HTML5 aufgebaut sein sollte: http://t3n.de/news/sponsored-post-semantische-367772/
Thema bewerten