[Tut] Basic / Grundlagen

  • 1. Grundbasis


    1.1 Was ist überhaupt HTML ?


    HTML ( Hypertext Markup Language) ist eine Aufzeichnungsprache. Keine Programmiersprache !
    Was bedeutet dass man keine Funktionen oder Proceduren o.ä. programmieren kann.
    HTML gibt nur den Code im WWW wieder.


    1.2 HTML oder XHTML ? Wo liegt der Unterschied.


    HTML und XHTML sind eigntlich fast das gleiche.
    XHTML ist in den Regeln viel strenger als HTML.
    Was bedeutet das verschiedene Tags die man in HTML vielleicht falsch benutzt hat und trotzdem zugelassen wurden werden hier
    als Fehler erkannt. Zum Beispiel werde auch img und br Tags mit einem / beendet.


    Der Vorteil von XHTML ist dass man Fehler viel schneller finden kann.
    Und XHTML seiten können auf Mobilgeräten angezeigt werden. Bsp.: Handy.


    1.3 CSS


    CSS ( Cascading Style Sheets) ist die Datei wo die ganzen Styles und Formatierungen sind.
    Die meisten die mit HTML anfangen stellen den Style Code im HTML Dokument selbst.
    Was natürlich nicht falsch ist ^-^
    Man sollte aber denn CSS in eine separate css datei tun.
    Es gibt sehr viele Gründe warum man dies tun sollte.
    1. Wird der HTML Code kleiner, das HTML Dokument bleibt also übersichtlich weil man keine 100 Zeilen CSS mehr drauf hat
    2. Dadurch dass der Code nun kleiner ist laden die Seiten viel schneller.
    3. Die CSS Datei wird automatisch heruntergeladen und temporär auf den PCs zwischengespeichert. Wie vorhin hat dies die Auswirkung dass die Seiten viel schneller laden. Da der CSS code nicht immer wieder neu geladen werden muss.
    4. Im CSS selbst kann man seine HTML Dokumente so formatieren dass sie auch für Mobile Geräte kompatibel sind, ohne den HTML Code selbst zu verändern.
    5. Wenn man den CSS mal verändern möchte, braucht man dies nur ein einziges mal zu tun. Und zwar in der CSS Datei.


    Ich denk es gibt da noch unzählige andere Vorteile xD
    Aber ich denk diese müssten reichen ^-^


    2. HTML Code


    Nun kommen wir endlich zu HTML ^^
    Jetzt da ihr so ungefähr ein Bild habt was HTML,XHTML und CSS sind denk ich können wir nun anfangen HTML zu schreiben.


    Aber womit fängt man an ?


    Hier mal ganz kurz ein ganz vereinfachter HTML Code.
    Achtung der Code ist vereinfacht! Der ist noch nicht XHTML gerecht weil noch einige Sachen fehlen.
    Die kommen später aber nach ^^


    So nun ganz vereinfacht die Struktur:


    <html>
    <head>
    <title> Hier kommt euer Titel</title>
    </head>


    <body>
    Hier kommt euer Inhalt hin
    </body>
    </html>


    So sieht die Struktur vereinfach aus ^^


    Als erstes kommt der <html> Tag.
    Damit sagt man aus das nun ein HTML Code folgt.
    Dann kommt der <head> Tag. Dort kommen halt die ganzen Metatags stehen und auch die Verlinkung zur CSS Datei.
    Dann kommt der <title> Tag hier kommt euer Titel hin. Euer Titel wird dann auch oben im Browser angezeigt und auf dem Tab dingens xD


    Dann wird jetzt mal zuerst der <title> Tag geschlossen mit </title> dann wird der </head> Tag geschlossen mit </head>.


    So nun kommen wir zum <body> Tag.
    Hier kommt nun unser ganzer Inhalt hin.
    Wenn wir fertig sind schliessen wir dann den <body> Tag mit </body> und den <html> Tag schliessen wir nun auch mit </html>


    Eigentlich könnt ihr diesen Code nun in eine Notepad Datei schreiben und einfach einen Titel einsetzen und irgendwas im body Bereich schreiben.
    Dann die Notepad Datei als .HTML abspeichern. Und dann im Browser öffnen. Und shcon seht ihr oben euren Titel und den Text den ihr im Body Bereich geschrieben habt.


    2.1. Doctyp


    Wie gesagt der Code vorhin war nur eine vereinfachte Version.
    Noch vor dem <html> Tag kommt noch der DOCTYP !
    Der ist sehr wichtig. Der gibt an welche Code die Datei beinhaltet.
    In diesem Tutorial werden wir sofort mit XHTML anfangen. Also kein HTML.
    Was bedeutet dass der DOCTYP so aussieht:


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


    Den DOCTYP müsst ihr nicht auswendig können ^^
    Wenn ihr ein HTML Editor habt und eine neues HTML Dokument erstellt kommt der DOCTYP automatisch dort stehen ^^
    Ihr müsst einfach darauf achten dass dort XHTML 1.0 STRICT steht. Da ich die Tutorials XHTML 1.0 gerecht schreibe.
    In jedem HTML Editor wenn ihr eine neue HTML Datei erstellt könnt ihr einstellen welchen DOCTYP ihr benutzen wollt.


    2.2 Tags||Elemente||Attribute


    Ein Element ist der Name/Wort dass zwischen < und > steht. Bsp.: bei <title> wäre titel das Element.
    Ein Tag nennt man alse das ganze <title>-Tag oder der <img>-Tag.


    Manche Tags brauche Attribute wie der <img> Tag. Ein Attribut setzt sich aus einem Attributnamen zusammen gefolgt von einem Gleichheitszeichen und dem Attributwert.
    Beim <img>-Tag wäre es.
    <img src="URL" />
    <img ist der Tag src ist das Attribut gefolgt vom Gleichheitszeichen und dem Attributwert.


    2.3 Welche Elemente gibt es ?


    Es gibt Tags die einen Start Tag und einen End Tag haben wie dieser Tag <a href="URL"> </a>.
    Solche Tags enden immer mit </Element> auf. Und umschliessen meistens einen Text o.ä.
    Solche Tags nennt man Container-Elemente.


    Es gibt auch Tags die nur aus einem Tag bestehen wie <img> oder der <br /> Tag.
    Solche Tags umschliessen auch keine Texte sondern sind eher für Anweisungen da.
    Solche Tags nennt man leere Elemente.


    2.4 Gross und Kleinschreibung


    So muss man eigentlich auf Gross oder Kleinschreibung achten ?
    Eigentlich ist es so ziemlich egal ob ihr die Tags klein oder Grossschreibt.
    <title> oder <TITLE> wird gleich intepretiert.
    Die Kleinschreibung hat sich aber sozusagen durchgesetzt. Ich würde also anraten euch von Anfang an dran zu gewöhnen
    alles klein zu schreiben.


    2.5.Code übersichtlich gestalten


    ich persönnlich finde es sehr wichtig den Code übersichtlich zu gestalten.
    Was bedeutet schön einrücken ^^
    Ihr könnt auch ruhig mal euren Text trennen in dem ihr den in eine neue Zeile schreibt.
    Solange dort kein <br /> Tag ist wird der Satz im Browser in einer Zeile angezeigt.
    Solang der Code ja noch klein ist 20-30 Zeilen ist das ja noch nicht so schlimm mit dem einrücken.
    Aber sobald ihr mal 100-200 Zeilen habt ^^
    Dann werdet ihr euch dankbar sein dass ihr eingerückt habt ^^
    Was ihr noch machen könnt sind Kommentare schreiben.
    Zum Beispiel so:


    <!--- Navigation Anfang --->
    Eure Navigation
    <!--- Navigation Ende --->


    Somit findet ihr alles viel schneller wieder.
    Und falls ihr zu mehreren auf einer Page arbeitet also mehrere den Code bearbeiten.
    Ist der Code auch für andere einfacher zu lesen.