[HTML_Teil2/3] - Grundgerüst

Kones · 7. November 2010

Nun geht es weiter mit dem Tutorial und schon sind wir beim 2. Teil
Jetzt machen wir uns an einen Grundgerüst ran.

Teil 2/3:
Wie schon erwähnt werde ich einen Grundgerüst erstellen, mit genauen Erklärungen.
Neben dem Grundgerüst werden die wichtigsten Attribute und Befehle extra aufgelistet.

Inhaltsangabe:
-Grundgerüst!
-Wichtige Tags (Funktionen/Befehle)!
-Wichtige Attribute!

Grundgerüst!

Ich "schreibe" nicht lange um den heißen Brei und komme gleich zur Sache.

-Schritt 1:
Wir fangen mit dem "Kopf" an (head).
Alles was im head steht, sieht man auf der Seite nicht, dies könnt ihr oben bei eurem Tabfenster sehen (z.B. Titel einer Seite).

->Hier ist der Befehl <head> und <title> zu sehen.
->Wie schon erwähnt, sieht man alles was im/in head steht auf der wirklichen Seite nicht.
->Hierbei können nur Titel eingebaut werden, die oben im Tabfenster in Betracht zu nehmen sind.
->Im Tag <title> kann nun ein beliebiger Name rein, meist sind dies Projektnamen, Threadnamen,...

HTML

<html>     <head>          <title>Titel</title>     </head>...

-Schritt 2:
Nun kommen wir zum "Körper" (body).
Das ist die eigentliche Gestaltung bzw. alles was in body steht, sieht der normale User bspw. Texte, Bilder, Verlinkungen, Tabellen...
Hierbei sind einige Attribute eingebaut.

->Alles was in <body> steht sieht man auf der Seite. Ich habe den Hintergrund pink gemacht durch die Eigenschaft bgcolor.
-><h1> <h2> <h3> (...) sind im Prinzip bereits vorhandene/fertige Formatierungen, die man für Überschriften hernehmen kann. Durch die Eigenschaft align kann man festlegen, ob etwas rechtsbündig, linksbündig oder zentriert ist.
->Um einen Text einfügen zu können, sollte man den Tag hernehmen. Wie ihr erkennen könnt habe ich mittels color die Farbe des Textes in rot geändert. Durch kann ein Zeilenumbruch gemacht werden.
Natürlich gibt es viele Attribute, durch die man z.B. Texte besser gestalten kann.

Code

...<body bgcolor="pink">     <h2 align="center"> Überschrift </h2>     <font color="red">Hallo Welt<br/>        Hi wöt     </font>...

-Schritt 3:
Bilder, Bilder, Bilder!
Das ist immer wieder ein beliebtes Thema.
Die Bilder können sehr leicht hinzugefügt werden.

->Dieses Tag braucht keinen Endtag, sprich es muss nicht mit einem extra Tag abgeschlossen werden.
->Der Befehl img steht für image.
->Bei src muss der Dateiname inkl. Dateiformat angegeben werden (dieser muss sich im gleichen Ordner befinden, wo die HTML Datei abgespeichert wird).
->Bei alt wir der Name angegeben, dieser Name kann beliebig sein z.B. "Logo".
->Bei width wird die Größe angegeben (in Pixel oder Prozent).
->align ist hierbei die Ausrichtung des Bildes (links, rechts, zentral).

Code

...<img src="BILDNAME.FORMAT" alt="NAME" width="*px" align="AUSRICHTUNG (left, right, center)">...

Schritt 4:
Nun schließen wir das ganze ab.

Code

... </body></html>

Nun sind wir mit dem Grundbaustein fertig.
Damit ihr euch vertiefen könnt, kommen jetzt noch die wichtigsten Tags und Attribute.

Wichtige Tags (Funktionen/Befehle)!

-><html> </html> - muss unbedingt vorhanden sein (am Anfang und am Ende).
-><head> </head> - sieht man nur im Tab(fenster) oben, z.B. Threadnamen, Titel.
-><title> </title> - für den Titel der Seite (im head).
-><body> </body> - alles was man auf der wirkllichen Seite sieht.
->  - für Text(e).
->  - Zeilenumbruch.
-><left/center/right> </left/center/right> - für die Ausrichtung (oder durch den Attribut align auch als Wert anwendbar).
-><h1/h2/h3/h4/h5/h6> </h1/h2/h3/h4/h5/h6> - Textformatierungen für Überschriften.
->  - kursiv.
->  - fett.
->  - unterstrichen.
-><s> </s> - ~~durchgestrichen~~.
->  - Absatz.
-><img src... alt... width... align...> - für Bilder/Grafiken.
-><ul> </ul> - Aufzählungsliste ohne Nummerierung:

Code

<ul>Liste<li>Text1</li><li>Text2</li><li>Text3</li></ul>

-><ol> </ol> - Aufzählungsliste mit Nummerierung:

Code

<ol>Liste<li>Text1</li><li>Text2</li><li>Text3</li></ol>

->Weitere Tags beim 3. Teil.

Wichtige Attribute!

->color - Farbe eines Textes z.B...
->bgcolor - Hintergrundsfarbe (bei Hintergründen, Tabellen...)
->size - Größe eines Textes z.B...
->face - Schriftart z.B. Arial.
->align - Ausrichtung.
->width - Größe (Länge/Breite).

Andere Teile:
Teil 1/3 - Grundsätzliches
Teil 3/3 - Weiteres

Mit freundlichen Grüßen
Stijn

//bei "Andere Teile" Links hinzugefügt
//Denkfehler ausgebessert Deutsch - Englisch Verwechslung.

Application · 7. November 2010

Sehr Hilfreich
Danke , 10/10

Fischer · 9. November 2010

kann sein, dass es sich mittlerweile geändert hat aber
<...> müssen IMMER geschlossen werden </...>
auch bei 
das ist kein richtiges html sondern:

Kones · 9. November 2010

Nein bei benötigt man keinen Endtag und hierbei setzt man den Schrägstich nicht vor dem Befehl sondern danach.
Die Infos sind 100%, hatte in meine Skripts rumgewühlt, bevor ich tut schrieb, alle getestet

//edit: Ich kann dir sogar Quellcode hochladen, oder moment ich lade einen Quellcode für alle hoch, dann könnt ihr es auch testen bzw. ich lade nen Skript hoch, ist eigentlich so ein Grundgerüst.

Fischer · 9. November 2010

ja mein informatikleherer hat gemeint es muss immer so sein
es wird zwar von browsern auch so erkannt aber so sei es richtig
also
 
wir kommen auch punktabzüge für solche sachen

Kones · 9. November 2010

Gut das habe ich nicht ausprobiert, weil ich mit <br/< gewohnt bin, dennoch ist es KEIN Fehler, vielleicht gibt es eine andere Möglichkeit, und zwar deine, dies will ich auch nicht bestreiten gut möglich, so geht es aber auch problemlos.

Waffle · 9. November 2010

Im ganzen ist dieser Teil deines Tutorials recht gut, jedoch gibt es hier auch falsche Informationen (Head Teil ist nicht nur für den Titel!!!)
Du bringst den Leuten hier - leider - mehr die 'unsaubere' Art des Programmierens. Auch bei Einmaligen Html Tags schließt ein gründlicher Programmierer diese trotzdem. Beispiel: , <img [...] />
Außerdem sollte man bei komplexeren Codes besonders auf das Einrücken achten, sonst kann man irgendwann nichtmehr durchblicken, ich spreche aus Erfahrung.

Für Anfänger ist das Tutorial OK erklärt.

6/10 Punkten.

Mafu · 9. November 2010

Also. Afaik kann man bei Head eine Kopfzeile wie bei Word machen. Ich mein mich erinnern zu können dort mal meinen Header gesetzt zu haben.

Naja und muss man ebenfalls nicht schließen. Es reicht zum Zeile brechen. Es bricht ja nur eine Zeile also was sollte weiter passieren? xD

Ansonsten find ichs Nice.

Edit: Head heißt ja auch Kopf...naja und mein Vorposter hats ja auch schon erwähnt.

Kones · 9. November 2010

Zitat von iXDe

Im ganzen ist dieser Teil deines Tutorials recht gut, jedoch gibt es hier auch falsche Informationen (Head Teil ist nicht nur für den Titel!!!)
Du bringst den Leuten hier - leider - mehr die 'unsaubere' Art des Programmierens. Auch bei Einmaligen Html Tags schließt ein gründlicher Programmierer diese trotzdem. Beispiel: , <img [...] />
Außerdem sollte man bei komplexeren Codes besonders auf das Einrücken achten, sonst kann man irgendwann nichtmehr durchblicken, ich spreche aus Erfahrung.

Für Anfänger ist das Tutorial OK erklärt.

6/10 Punkten.

Ja mir ist es natürlich klar, dennoch ist es nur eine Grundlage und klar kann man sich dann erweitern keine Frage.
Wegen abschließen, ja das sind eines der Möglichkeiten. Image kann man auch durch einen Endtag machen, so geht es aber auch, wie es oben steht.
Wegen br, so ist meiner Meinung nach Gewohnheitssache, überhaupt ist es bei TuTs so, dass es immer mehrere Auswege gibt und hierbei biete ich eines der Auswege an, die ich selbst benutze.
Man kann sich erweitern.
Wenn man hier Fragen zum TuT hat, darf man stellen und jo man bekommt auch die Antwort, dass man bspw. image oder br auch durch Endtags coden kann.
Ich selbst erweitere mich auch immer wieder, ich werde deine Kritik mal ans Herz nehmen und editieren, auch erwähnen bspw. bei den zwei Befehlen, dass man sie durch einen Endtag abschließen kann.

Fischer · 14. Dezember 2010

ich sag ja nichts gegen das tut, es ist gut geworden. dennoch wenn man sowas schreibt sollte man schon das richtige vermitteln.
du kannst anstatt "Guten Tag" auch "Was geht?", "Hi", "Servus" und "Gude" verwenden. Dennoch verstehen alle was du sagen willst. So ist das auch mit den Browsern (manchen). Aber korekt wäre es wenn du in dem Fall "Guten Tag" sagst, damit es auch wirklich alle verstehen.
So mit den <...></...>
Wenn schon, dann richtig.

Addickted · 14. Dezember 2010

Zwei Korrekturen für dein Tutorial

Zitat

Bei src muss der Dateiname inkl. Dateiformat angegeben werden (dieser muss sich im gleichen Ordner befinden, wo die HTML Datei abgespeichert wird).
->Bei alt wir der Name angegeben, dieser Name kann beliebig sein z.B. "Logo".

Src leitet sich vom Englischen Wort source ab und bedeutet, dass man hier hinneinschreiben muss wo die Bilddatei liegt. Sie muss NICHT im gleich Ordner liegen.

Wenn die Ordnerstruktur meinwegenwegen so aussieht.

index.html[Datei]
Bilder[Ordner]

Schreibt man <img src="Bilder/grafik.gif" alt="Grafik">

Nun kommen wir zum nächsten. Das Alt Tag ist die Beschreibung des Bildes, falls das Bild mal nicht angezeigt werden sollte. Also am besten ordentlich Beschriften.

Sonst gutes Tutorial.

GiS · 28. Dezember 2010

Zitat von [NeS]Fischer

ja mein informatikleherer hat gemeint es muss immer so sein
es wird zwar von browsern auch so erkannt aber so sei es richtig
also
 
wir kommen auch punktabzüge für solche sachen

Teste es einfach, was richtig ist:

Zum Beispiel nehme folgenden Code:

PHP

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">


<head>
    <title>Hello World</title>
</head>


<body>


Hello World<br />
Das ist ein Test.


</body>
</html>

Alles anzeigen

Nun füge es hier in den Validator ein: http://validator.w3.org/

Mein Ergebnis: Es ist erfolgreich wenn es mit /> endet. Ich habe es auch mit Hello World getestet. Dabei ist ein Error aufgetreten, aus dem einfachen Grund, dass wie <input /> alleine steht mit einem / am Ende. 2 mal br zu schreiben würde zu 2 Umbrüchen führen.

8D · 28. April 2011

Ja hier ebenfalls eine kleine Anmerkung.
Ein HTML Dokument beginnt nicht mit <html>, sondern mit der DOCTYPE zuweisung, welche du in einem Post über diesem findest.

@iXDe HTML tut man immernoch nicht programmieren, es ist wie Stijn im ersten Teil gesagt hat eine Auszeichnungssprache und keine Programmiersprache.

Dann noch zu den Tags die in einem Tag geöffnet und geschlossen werden.
Da hat Stijn ebenfalls recht. Tags wie <img /> <input /> haben keinen Inhalt an sich, und brauchen daher keinen 2. schließenden End-Tag.

Kones · 30. April 2011

Joar hierbei muss ich sagen, es mehrere Arten von DOCTYPEs gibt.

-Transitional:
Sowohl veraltete als auch aktuelle Befehle sind erlaubt.
Wird sehr oft benutzt.

-Strict:
Hält sich an den aktuellen Befehlen... zeigt die Fehlermeldungen korrekt an.

-Frameset:
Total veraltet, alte Ära, unempfehlbar, könnt ihr gleich von den drei ausschließen...

LoRdCrUnChEr · 1. Mai 2011

Diese Entag Geschichte ist abhängig von der HTML Version die man im Doctype definiert.
In XHTML 1.1 oder 1.0 strict kann man anstatt "End-tags" Den Tag innerhalb des eigentlichen Tags schließen. Das ist bei <img src="" alt="" /> oder der Fall.

Zitat

(..) Sie muss NICHT im gleich Ordner liegen.

Das stimmt.

Was mir fehlt, ist der -Tag und die Kontainer.

Man sollte eventuell noch XHTML erwähnen, was Layout und Design durch XHTML und CSS deutlich trennt. Dann aber nur 1.1 oder 1.0 strict, denn in der XHTML 1.0 transitional sind noch -Tags valide. Denn was mich persönlich an dem "normalen" HTML stört ist ( irrelevant aber ) die Vermischung von Layout Design. Anstatt kann man wie die BB-Codes schreiben. Naja, wie gesagt persönliche Bevorzugung.

Alles in allem eine informative Einführung.

8D · 18. Juni 2011

@ Cruncher, selbst in HTML 4.01 Transitional und Strict kann man Standalone Tags benutzen.
Dabei bleibt das Dokument immernoch valide, aber es wird eine Warnung ausgegeben, dass es zu einer Fehlinterpretation kommen könnte, was aber bei den gängigen Browser (selbst ab IE5.5 (diesen eingeschlossen)) nicht passiert.
Dennoch ist es valide, von daher kann man diese nicht nur in XHTML 1.0/1.1 verwenden, sondern auch bei den o.g Doctypes.

/edit IE5.5 eingefügt.

DomE_Marie<3 · 18. Juni 2011

Ein sehr Schönes Tutorial , Glaube ich werde nun damit anfangen mal mit HTML ein wenig zu arbeiten.
Vielleicht wird es ja was. Bewerten tue ich es dann später mal.

LoRdCrUnChEr · 19. Juni 2011

An 8D.: Das habe ich auch nicht bestritten. Ich bezog mich offenkundig auf die XHTML Versionen.

8D · 19. Juni 2011

Zitat

In XHTML 1.1 oder 1.0 strict kann man anstatt "End-tags" Den Tag innerhalb des eigentlichen Tags schließen.

Das hört sich aber so an, als ob es nur bei XHTML 1.1 und 1.0 strict - funktioniert Und nicht in anderen Doctypes