[HTML_Teil2/3] - Grundgerüst


    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 <font> hernehmen. Wie ihr erkennen könnt habe ich mittels color die Farbe des Textes in rot geändert. Durch <br/> 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.
    -><font> </font> - für Text(e).
    -><br/> - 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.
    -><i> </i> - kursiv.
    -><b> </b> - fett.
    -><u> </u> - unterstrichen.
    -><s> </s> - durchgestrichen.
    -><p> </p> - 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.

    3 Mal editiert, zuletzt von Kones ()

    Nein bei <br/> 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.

    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.

    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: <br /> , <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.

    Einmal editiert, zuletzt von Waffle ()

    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 <br> 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.

    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: <br /> , <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.

    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.

    Zwei Korrekturen für dein Tutorial :P


    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.

    "Dem wird befohlen, der sich nicht selbst gehorchen kann" - Friedrich Nietzsche

    Einmal editiert, zuletzt von Addickted ()

    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
    <br></br>
    wir kommen auch punktabzüge für solche sachen


    Teste es einfach, was richtig ist:


    Zum Beispiel nehme folgenden Code:



    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<br> <br /> getestet. Dabei ist ein Error aufgetreten, aus dem einfachen Grund, dass <br /> wie <input /> alleine steht mit einem / am Ende. 2 mal br zu schreiben würde zu 2 Umbrüchen führen.

    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 <br /> <img /> <input /> haben keinen Inhalt an sich, und brauchen daher keinen 2. schließenden End-Tag.

    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...

    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 <br /> der Fall.

    Zitat

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


    Das stimmt.


    Was mir fehlt, ist der <span>-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 <strong>-Tags valide. Denn was mich persönlich an dem "normalen" HTML stört ist ( irrelevant aber ) die Vermischung von Layout Design. Anstatt <span style"font-weight: bold"></span> kann man <b></b> wie die BB-Codes schreiben. Naja, wie gesagt persönliche Bevorzugung.


    Alles in allem eine informative Einführung.

    @ 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.

    Einmal editiert, zuletzt von 8D ()

    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.

    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