1. #1
    Permanent gesperrt

    Registriert seit
    18.11.2011
    Beiträge
    773
    Thanked 752 Times in 362 Posts

    Standard [HTML Tutorial] #2 - Die erste Webseite!


    #2 - Die erste Webseite!


    Nach einer Menge Theorie wollen wir doch nun einmal anfangen! Also. In HTML werden wir die ganze Zeit über mit so genannten Tags arbeiten. Denkst dir nun bestimmt: Was sind Tags? Eventuell kennst du sie ja aus dem Spielebereich: Es sind "Kurzformen" von Namen oder Befehlen. Genauso ist das in HTML. Alle Tags erfüllen einen bestimmten Zweck.

    Ein Tag ist folgendermaßen aufgebaut:

    HTML-Code:
    <tag> IRGENDWAS HIER </tag>
    Wie man sehen kann fängt ein Tag an sich immer mit einem kleiner als Zeichen an und endet mit einem größer als Zeichen. Danach kommt der entsprechende Content (Content beschreibt man als "Inhalt" - das wirst du im laufe des Tutorials öfters hören!). Das ganze schließt man dann wieder mit dem Tag PLUS einem Slash-Zeichen (Schrägstrich nach rechts ab).

    Das ganze erinnert sehr an die vorhandenen BB-Codes die man eventuell bereits kennt. Diese stammen von HTML ab, man wollte den Nutzern damit die Möglichkeit bieten ohne dementsprechende Kenntnisse auch ihre Texte zu formatieren. Wobei diese auch schon wieder auf dem Rückzug sind, WYSIWYG (What You See Is What You Get ) Editoren sind auf dem Weg (das ist dies, was man beispielsweise bei Word und Excel findet, direkte Formatierung).

    Um unseren kleinen netten Browser (sei es Internet Explorer, Firefox, Chrome oder Opera) nun zu sagen, dass wir ihm HTML-Code ausgeben wollen, müssen wir erst einmal mit dem Grundgerüst anfangen. Den kompletten Code den man in HTML schreibt, wird im <html>-Tag eingebunden. Heißt in etwa:

    HTML-Code:
    <html>
    Mehr Content
    Mehr Content
    Mehr Content
    </html>
    In unserem Fall würde "mehr Content" nun den den Teil ersetzen, wo wir unsere verschiedenen Tags reinsetzen um dementsprechend etwas auf unserer ersten Webseite auszugeben.

    So, also der <html> Tag gibt uns nun die Möglichkeit den Code zu schreiben. Ich sage den Leuten immer: Man kann sich das als den menschlichen Körper vorstellen. der <html> Tag ist in dem Fall unser kompletter Körper. Nun gibt es 2 weitere Teile, die unterschieden werden:

    • <head>
    • <body>


    Man kann sich schon in etwa vorstellen, wie das ganze funktionieren soll, wenn ich sagte das man das alles in etwa auf den menschlichen Körper übertragen kann. Der Kopf ist in dem Fall das Element (<head>) das alles steuert und im <body> Tag erfolgt dementsprechend die Ausgabe der einzelnen Elemente.

    Quasi kommt in den <head> Teil alles rein was Websiteübergreifend ist. Heißt, der Titel im Tab, Einbindung von externen Dateien o.Ä. passiert alles dort oben. Im <body> Tag findet man dann nur die Sachen, die man wirklich auf dem Bildschirm auch visuell sehen kann, wie Tabellen, Text o.Ä.

    Aufgabe: Erstelle dein erstes HTML-Dokument mit den oben genannten Informationen. Denke dabei: Jeder Tag der geöffnet wurde muss auch wieder geschlossen werden (außer in ganz seltenen Ausnahmen) und man kann sich das Dokument so wie den menschlichen Körper vorstellen.
    Spoiler:Lösung

    HTML-Code:
    <html>
    <head>
     WEBSITEÜBERGREIFENDE INFORMATIONEN
    </head>
    <body>
     AUSGABEINFORMATIONEN
    </body>
    </html>


    Super Arbeit wenn du das hingekriegt hast! Ich hoffe du hast nicht geschummelt. Wenn du alles so weit verstanden hast, bist du schon auf dem richtigen Weg HTML zu lernen. Denn alles was jetzt kommt, basiert darauf, die Tags richtig ineinander zu setzen und die Verschachtelungen zu erkennen.

    Um unsere erste kleine Webseite zu erstellen, wollen wir der Webseite einen Titel geben der dementsprechend im Tab angezeigt wird. Das machen wir mit dem <title> Tag. Dieser ist Websiteübergreifend. Was heißt das? Genau: Er wird nicht auf der Webseite an sich ausgegeben sondern im Tab, muss daher in den <head> Teil.

    Ein Beispiel wäre von daher:

    HTML-Code:
    <title> Meine erste Website </title>
    Natürlich muss dieser Code dann dementsprechend platziert werden. So, allgemein wenn du Tutorials ließt die rund um die Programmierung gehen hast du sicherlich schon festgestellt was Hello World! heißt. Das ist quasi der erste Textabsatz den man immer wieder findet, wenn man in irgendetwas Programmierbares einsteigt.

    Um normalen Text auszugeben benutzen wir den <span> Tag. Dieser gibt uns einen normalen Textabsatz zurück. Dieser wird, wie die meisten Tags, am ende wieder mit dem Slash-Tag (End-Tag) geschlossen.

    Hier ist nun aber die Besonderheit: Dies ist unser erster Text den wir [u]auf[/b] der Webseite ausgeben wollen und nicht Webseiteübergreifend wodurch wir diesen Tag in den <body> Tag packen. Das ganze ist, wie du sicherlich schon gemerkt hast, nach einer Zeit ziemlich verschachtelt.

    So, wenn du nun alles richtig gesetzt hast, dann müsste das Ergebnis am Ende bei dir so aussehen:

    HTML-Code:
    <html>
    <head>
      <title> Meine erste Webseite </title>
    </head>
    <body>
      <span> Hello World! </span>
    </body>
    </html>
    Die Leerzeichen zwischen dem Tag-Content habe ich mir so angewöhnt. Ich persönlich finde man kann dadurch den Text besser lesen, andere meinen ohne Leerzeichen ist es einfacher, dort musst du deine eigene Art finden wie du am besten mit klar kommst!

    Um dir das ganze nun anzugucken, speicherst du die Datei in deinem Editor als .html ab. (Vorsicht: Unten musst du .* Alle Dateien auswählen, und nicht nur Text (.txt)!)

    Wenn du dies getan hast, kannst du mit einem Rechtsklick auf die Datei -> Öffnen mit -> [beliebiger Browser hier einfügen :p] deine Datei öffnen und du hast den ersten Erfolg - deine erste, wenn auch kleine Webseite, ist fertig!

  2. The Following 11 Users Say Thank You to Comu For This Useful Post:

    DnL (16.07.2012), Dost (16.07.2012), Gangstersheep (16.07.2012), GXC1 (16.07.2012), infected (16.07.2012), Mickeyy (16.07.2012), Microsoft (16.07.2012), Mr Amari (16.07.2012), Silidor (16.07.2012), Xin Zhao (16.07.2012)

  3. #2
    U-Labs Legende
    Avatar von Silidor
    Registriert seit
    20.12.2011
    Beiträge
    1.062
    Thanked 435 Times in 315 Posts

    Standard AW: [HTML Tutorial] #2 - Die erste Webseite!

    Hey ich wollt ein dickes Lob aussprechen ,da ich generell mal mit html anfangen wollte und es dank deinem Tutorial es auch mache ...

    10/10 da

    benutzerfreundlich

    Einsteigerfreundlich

    gut und übersichtlich

    schön gegliedert

    Nur das Erklärt was grade notwendig ist
    Geändert von Silidor (16.07.2012 um 22:20 Uhr)

  4. The Following 2 Users Say Thank You to Silidor For This Useful Post:

    Comu (16.07.2012), DnL (16.07.2012)

  5. #3
    Permanent gesperrt

    Registriert seit
    15.07.2012
    Beiträge
    12
    Thanked 17 Times in 7 Posts

    Standard AW: [HTML Tutorial] #2 - Die erste Webseite!

    Zitat Zitat von Silidor Beitrag anzeigen
    Nur das Erklärt was grade notwendig ist
    Mit solchen Bemerkungen sollte man immer ein bisschen vorsichtig sein.
    Ein bisschen Tiefe sollte in jedem Tutorial vorhanden sein, egal ob es für Anfänger oder Profis geschrieben worden ist. Das ist aber hier auch der Fall.

  6. The Following User Says Thank You to Bane For This Useful Post:

    Comu (16.07.2012)

  7. #4
    U-Labs Legende
    Avatar von Silidor
    Registriert seit
    20.12.2011
    Beiträge
    1.062
    Thanked 435 Times in 315 Posts

    Standard AW: [HTML Tutorial] #2 - Die erste Webseite!

    Zitat Zitat von Bane Beitrag anzeigen
    Mit solchen Bemerkungen sollte man immer ein bisschen vorsichtig sein. [...]
    Hast schon recht , aber wenn man jetzt alles so erklären würde , würde man den Faden verlieren und durcheinander kommen . Besser zeigt man erstmal das was man wissen muss und geht später auf die Sachen genauer ein ... Halt Stück für Stück ins Abenteuer



    Ps: falls jemand mal den Aufbau von anderen Seite sehen will die auf Html basieren drückt beim Internet Explorer f12 und geht dort halt alles durch
    Geändert von Nachto (16.07.2012 um 22:41 Uhr)

  8. #5
    Projektleitung
    Avatar von DMW007
    Registriert seit
    15.11.2011
    Beiträge
    4.081
    Thanked 8.506 Times in 2.538 Posts
    Blog Entries
    5

    Standard AW: [HTML Tutorial] #2 - Die erste Webseite!

    Man sollte immer einen validen Doctype benutzen.
    Auch wenn das bei den 5 Zeilen wohl in keinem Browser eine Rolle spielt, gehört ein valider Doctype zu jedem Grundgerüst.
    Spätestens wenn richtige Layout-Elemente dazu kommen gibt das irgendwann selbst mit relativ kulanten Browsern wie Firefox Probleme.

    Von solchen Katastrophen wie dem Internet Explorer reden wir lieber gar nicht erst, da fliegt einem ohne Doctype sowieso gleich alles um die Ohren.


  9. The Following User Says Thank You to DMW007 For This Useful Post:

    Comu (16.07.2012)

  10. #6
    Permanent gesperrt

    Registriert seit
    18.11.2011
    Beiträge
    773
    Thanked 752 Times in 362 Posts

    Standard AW: [HTML Tutorial] #2 - Die erste Webseite!

    [...] Im ersten Moment geht es mir jedoch darum, euch HTML und die Struktur näher zu bringen. So öfter man es verwendet wird man auch die neusten Techniken von alleine dazu lernen, [...]
    Der Meinung bin ich auch weiterhin. Doctypes sind für den Anfang (für das reine Verständnis) meiner Meinung nach nicht von Bedeutung. Das ist auch genau der Grund warum ich persönlich kein Fan von OpenBook & Co bin. Dort kriegt man zwar von Anfang an wirklich korrektes Wissen vermittelt, was aber komplett überladen für einen Anfänger ist.

  11. #7
    Projektleitung
    Avatar von DMW007
    Registriert seit
    15.11.2011
    Beiträge
    4.081
    Thanked 8.506 Times in 2.538 Posts
    Blog Entries
    5

    Standard AW: [HTML Tutorial] #2 - Die erste Webseite!

    Sind sie prinzipiell auch erstmal nicht.
    Dein Beispielcode ist aber trotzdem invalid, ein valides HTML-Dokument beginnt mit einem gültigen Doctype.
    Anfängertutorials auf das wesentliche zu reduzieren ist an sich eine gute Idee, dagegen gibt es auch absolut nichts einzuwenden.

    Ich halte nur wenig davon wenn man im zuge dessen den Usern etwas invalides beibringt, um ihnen später zu erklären, dass man ihnen etwas falsches beigebracht hat und sie es besser anders machen sollten.

    Wir reden hier ja auch nicht von 100 Zeilen Code die das ganze wesentlich komplexer machen würden sondern von einer, die man grob in 2 Sätzen erklären kann.

    Aber naja, kann man sich natürlich drüber streiten was man sinnvoller findet, wollte es nur mal erwähnt haben.
    Gerade auch falls jemand Eigeninitiative ergreift, selbst weitermacht und sich nicht erklären kann wieso sein Layout möglicherweise nicht ganz korrekt dargestellt wird.


  12. The Following User Says Thank You to DMW007 For This Useful Post:

    Comu (16.07.2012)

  13. #8
    Permanent gesperrt

    Registriert seit
    18.11.2011
    Beiträge
    773
    Thanked 752 Times in 362 Posts

    Standard AW: [HTML Tutorial] #2 - Die erste Webseite!

    Ja klar. Aber dann kommt die Erklärung was nen Doctype ist, welcher das ist (auch wenn der bei html5 recht einfach ist), wofür der gebraucht wird. Bei manchen doctypes (ich glaub das war bei xHTML) muss man dann auch noch den HTML Tag bearbeiten damit es valid wird.

    Es ist ja in dem Sinne nichts falsches. Es ist ja genauso in der Schule: Du hast erst gelernt wie man die Sachen ohne AEIOU ausspricht und erst später sind die Umlaute dazu gekommen.

Ähnliche Themen

  1. [HTML Tutorial] #6 - Formulare
    Von Comu im Forum HTML
    Antworten: 0
    Letzter Beitrag: 12.08.2012, 11:59
  2. [HTML Tutorial] #5 - Tabellen
    Von Comu im Forum HTML
    Antworten: 0
    Letzter Beitrag: 26.07.2012, 17:39
  3. [HTML Tutorial] Übersicht
    Von Comu im Forum HTML
    Antworten: 0
    Letzter Beitrag: 17.07.2012, 12:07
  4. Antworten: 0
    Letzter Beitrag: 17.07.2012, 11:57
  5. HTML Video Tutorial
    Von Comu im Forum Webentwicklung
    Antworten: 9
    Letzter Beitrag: 17.11.2011, 01:49
Diese Seite nutzt Cookies, um das Nutzererlebnis zu verbessern. Klicken Sie hier, um das Cookie-Tracking zu deaktivieren.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191