-
16.07.2012, 21:25 #1
[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>
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>
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
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>
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>
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!
-
The Following 11 Users Say Thank You to Comu For This Useful Post:
-
16.07.2012, 22:15 #2
- Registriert seit
- 20.12.2011
- Beiträge
- 1.062
Thanked 437 Times in 316 PostsAW: [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 istGeändert von Silidor (16.07.2012 um 22:20 Uhr)
-
-
16.07.2012, 22:20 #3
- Registriert seit
- 15.07.2012
- Beiträge
- 12
Thanked 17 Times in 7 Posts
-
The Following User Says Thank You to Bane For This Useful Post:
Comu (16.07.2012)
-
16.07.2012, 22:22 #4
- Registriert seit
- 20.12.2011
- Beiträge
- 1.062
Thanked 437 Times in 316 PostsAW: [HTML Tutorial] #2 - Die erste Webseite!
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 durchGeändert von Nachto (16.07.2012 um 22:41 Uhr)
-
16.07.2012, 22:34 #5
- Registriert seit
- 15.11.2011
- Beiträge
- 6.262
- Blog Entries
- 5
Thanked 9.145 Times in 3.019 PostsAW: [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.
-
The Following User Says Thank You to DMW007 For This Useful Post:
Comu (16.07.2012)
-
16.07.2012, 22:36 #6
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, [...]
-
16.07.2012, 22:56 #7
- Registriert seit
- 15.11.2011
- Beiträge
- 6.262
- Blog Entries
- 5
Thanked 9.145 Times in 3.019 PostsAW: [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.
-
The Following User Says Thank You to DMW007 For This Useful Post:
Comu (16.07.2012)
-
16.07.2012, 22:59 #8
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
-
[HTML Tutorial] #6 - Formulare
Von Comu im Forum HTMLAntworten: 0Letzter Beitrag: 12.08.2012, 11:59 -
[HTML Tutorial] #5 - Tabellen
Von Comu im Forum HTMLAntworten: 0Letzter Beitrag: 26.07.2012, 17:39 -
[HTML Tutorial] Übersicht
Von Comu im Forum HTMLAntworten: 0Letzter Beitrag: 17.07.2012, 12:07 -
[HTML Tutorial] #3 - Textformatierungen
Von Comu im Forum HTMLAntworten: 0Letzter Beitrag: 17.07.2012, 11:57 -
HTML Video Tutorial
Von Comu im Forum WebentwicklungAntworten: 9Letzter Beitrag: 17.11.2011, 01:49
Diese Seite nutzt Cookies, um das Nutzererlebnis zu verbessern. Klicken Sie hier, um das Cookie-Tracking zu deaktivieren.