html-Lehrgang erster Tag

Was euch bevorsteht:

  • Teil 1:
    • Eine kurze Anmerkung
    • html - was ist das überhaupt?
    • Notwendiges Handwerkszeug
    • Die ersten Schritte
    • Die html-Tags
    • Überschriften
    • Horizotale Linien
    • Fettschrift
    • Kursivschrift
    • Der Zeilenumbruch
  • Teil 2:
    • ungeordnete und
    • geordnete Listen

Eine kurze Anmerkung

html ist die Grundlage zur Erstellung von Webseiten für das World Wide Web. Wie das Salz zur Suppe gehört jedoch zum html css, da man mit html lediglich den Inhalt einer Website strukuriert, das Design dann mit css erstellt. Zwar bietet auch das html einige Möglickeiten zum designen von html-Seiten, jedoch hat Stylen mit css einen entscheidenden Vorteil:

Stellen Sie sich einmal vor, dass Sie eine größere Website mit vielleicht 30, 50 oder mehr Seiten erstellt haben. Und nun wollen Sie z.B. in allen Seiten die Schriftart oder -größe ändern. Sie werden mir sicher beipflichten, dass es einfacher und vor allem schneller ist, ein Attribut ändern zu können als das gesamte Webprojekt zu durchforsten. Genau für als Aufgaben gibt es css.

Daher empfehle ich, nach Durcharbeitung dieses Lehrgangs auch den Lehrgang css zu besuchen.

html - was ist das überhaupt?

html steht für "Hypertext Markup Language", auf deutsch Hypertext-Auszeichnungssprache. Es handelt sich um eine textbasierte Auszeichnungssprache zur Strukturierung von Inhalten wie Texten, Bildern und Hyperlinks in Dokumenten. Dokumente, die mit html geschrieben wurden, sind die Grundlage des World Wide Web und werden von einem Webbrowser dargestellt. Die Auszeichnungssprache wird vom World Wide Web Consortium (W3C) weiterentwickelt.

HTML ist eine Auszeichnungssprache und wird als solche auch nicht programmiert, sondern schlicht geschrieben. Daher reicht zur Erstellung von html-Dokumenten ein einfacher Texteditor. html wurde am 13. März 1989 von Tim Berners-Lee am CERN in Genf festgelegt und seitdem ständig weiterentwickelt.

Notwendiges Handwerkszeug

Eine gute Nachricht vorweg: Um Webseiten in html zu erstellen benötigt man weniger als man glauben sollte. Und auch der Kostenaufwand hält sich in Grenzen, denn viele Werkzeuge gibt es kostenlos!

Als erstes brauchen wir einen Editor, also ein Programm, um Texte schreiben ("scripten") zu können. Da html keine Programmiersprache ist, spricht man von Scripts.

Theoretisch würde der Editor, der mit dem Windows-Betriebssystem mitgeliefert wird, schon ausreichen, um html-Scripte zu erstellen. Allerdings rate ich davon ab, da die Darstellung in diesem Editor sehr unübersichtlich ist. Ich empfehle daher einen html-Editor, und mein Tipp ist Scriptly, ein kostenlos zu beziehender Editor. Ich selbst arbeite recht gern damit, und auch in diesem Lehrgang werde ich ihn verwenden. Hier könnt ihr Scriptly herunterladen.

Als nächstes benötigen wir einen Browser, damit wir die erstellten Seiten auch betrachten können. Da Windows seinen Internet-Explorer mit dem Betriebssystem ausliefert, könnt ihr diesen ruhig verwenden. Außerdem empfehle ich euch den Firefox, da sich in diesem einige recht nützlich Plugins installieren lassen. Aber darauf werde ich später noch eingehen.

Zur Veröffentlichung unserer Website benötigen wir noch einen Webhoster, als einen Anbieter, der uns einen Speicherplatz für unsere Dateien zur Verfügung stellt. Webspace gibt es bereits zu günstigen Preisen von wenigen Euro pro Monat, ja es gibt sogar kostenlosen Webspace. Da allerdings irgendwie auch solcher Speicher finanziert werden muss, ist dies z.B. mit Werbeeinblendungen verbunden. Außerdem erhält man dann in der Regel nicht seine persönliche Domain. Zum Testen von Websites ist solch kostenloser Webspace sicher érstmal ausreichend. Wer sich jedoch ernsthaft mit der Veröffentlichung seiner Website beschäftigt, sollte sich lieber eine gewisse Unabhängigkeit bewahren und einen "echten" Webhoster suchen.

Ein weiteres hilfreiches Programm ist ein FTP, mit dem wir unsere Dateien zum Webhoster übertragen können. Zwar kann man in der Regel auch seine Dateien einzeln hochladen, aber dies ist bei größeren Projekten recht mühselig. Bedenken Sie, dass Sie neben den html-Dateien auch Bilder, PDFs usw. hochladen müssen. Solche FTP-Programme gibt es ebenfalls kostenlos.

Zu guter Letzt braucht ihr Geduld und eine gehörige Portion Wissensbegierde sowie Experimentierfreudigkeit, aber da ihr ja hier seid, gehe ich mal davon aus, dass dies der Fall ist. Und ihr solltet keine Angst haben, denn kaputt machen kann man eigentlich nichts, und außerdem ist html recht einfach zu lernen. Also auch schon während des Lehrgangs fleißig testen und experimentieren. Lieber etwas langsamer vorangehen und dafür das Gelernte vertiefen.

Die reichhaltigen Codebeispiele sind in Form von Bildern dargestellt. Daher können Sie diese nicht einfach kopieren, in den Editor einfügen und testen. Dies ist beabsichtigt, damit ihr mit eigener Erstellung des Codes die Syntax verinnerlicht. Ihr kennt doch den Spruch:"Wer schreibt, der bleibt!" Die Codebeispiele sind umhin nicht sehr umfangreich und daher innerhalb weniger Minuten abgetippt.

Achtet beim Abtippen auf korrekte Schreibweise. Schon geringe Fehler können das Ergebnis ganz anders aussehen lassen. Da neben den Codebeispielen auch immer die Browserausgabe dargestellt ist, könnt ihr diese mit eurer eigenen Ausgabe vergleichen. Solltet ihr Unterschiede feststellen, so überprüft nochmal den Quelltext.

Die ersten Schritte

Ok, dann wollen wir mal beginnen.

Als erstes öffnen wir unseren Editor. Geben wir im Eingabefenster einmal folgenden Text ein:

"Hurra, dies ist meine erste html-Seite!"

Nun speichern wir diese Seite unter dem Dateinamen "index.html":

html-lehrgang erster Text

Umd wenn wir uns das Ergebnis in einem Browser anschauen sehen wir folgendes:

html-lehrgang erster Text im Browser

Ich habe übrigens die Browservorschau im Scriptly verwendet, die sich mit "F9" aufrufen lässt. Eine wie ich finde recht nützliche Einrichtung.

Meinen Glückwunsch, der oft so schwierige Anfang ist getan, wir haben unsere erste Webseite!

Nun aber weiter. Wir wollen den Text nun erweitern und geben hinter dem ersten Satz folgendes ein: "Ich bin Stolz!" Dann machen wir 2 Zeilenumbrüche und schreiben: "Und hier ist ein neuer Absatz!"

Das Ergebnis im Editor sollte folgendermaßen ausschauen:

html-lehrgang mehr Text

Speichern wir nun das Ergebnis und schauen uns dies im Browser (ihr wisst, "F9") an:

html-lehrgang mehr Text im Browser

Huch, was ist das? Wo ist unser Absatz? Warum ist unser Ergebnis im Editor anders als im Browser? Ein Fehler im Sciptly-Programm?

Keineswegs! Denn was wir bisher getan haben, hat überhaupt nichts mit html zu tun. Wir haben lediglich Text, also Inhalt, eingegeben und müssen nun dem Browser mitteilen, was er mit diesem Text machen soll. und dies geschieht mit Tags.

Die html-Tags

Da das Wort "Tag" aus dem Englischen stammt, sagen wir "Täääg".

So ein Tag ist eine Formatierungsanweisung, mit der wir dem Browser mitteilen, wie er den Inhalt der zwischen einem Anfangs- und Enddtag steht, machen soll.

Diese Tags sind folgendermaßen aufgebaut: spitze öffnende Klammer - Anweisung - spitze schließende Klammer,also <Anweisung>

Und der Endtag: spitze öffnende Klammer - Schrägstrich- Anweisung - spitze schließende Klammer, also </Anweisung>

Und alles, was zwischen Anfangs- und Endtag steht, ist Inhalt, also beispielsweise: <p>Hier ist Text</p>

Mit <p></p> lernen wir nun unseren ersten Tag kennen, den Absatztag. Wir sagen dem Browser also in etwa folgendes: Bitte gib den Inhalt, der sich zwischen diesem Anfangs- und Endtag befindet, als Absatz auf dem Bildschirm aus.

Probieren wir es doch einmal aus und stellen unseren Text folgendermaßen um:

der p-tag

Das Ergebnis ist nun wie von uns gewünscht:

der p-tag im Browser

Jetzt ist wirklich der Anfang getan! Wir haben die erste html-Anweisung kennen gelernt. Also hurtig weiter!

Überschriften

Wir wollen nun eine Überschrift hinzufügen und schreiben:

die Überschriften

Das Ergebnis im Browser:

die Überschriften im Browser

Jetzt können wir auch erkennen, dass diese Anweisung auch die Schrift verändert, in diesem Fall vergrößert hat. Der <h1>-Tag steht also für Überschriften zur Verfügung. Neben diesem gibt es noch den <h2>, <h3> usw. bis <h6>.

Was damit geschieht können wir uns ja einmal anschauen:

die Grade der Überschriften

Und wir sehen:

die Grade der Überschriften im Browser

Die Schrift wird also immer kleiner. Dies scheint etwas mit der Wertigkeit zu tun zu haben, und tatsächlich ist dies auch so! h1 ist die wichtigste Überschrift, und die Wertgkeit nimmt dann von h2 bis h6 ab. Dies ist übrigens für Suchmaschinen sehr wichtig!

Übrigens könnten wir die Tags auch folgendermaßen schreiben:

Tag-Schreibweise

Das Ergebnis wäre das gleiche, ihr könnt es ja mal ausprobieren. Da sich allerdings die Kleinscheibweise für Tag-Namen eingebürgert hat, wollen wir diese auch beibehalten.

Horizontale Linien

Weiter im Text. Wir wollen unter der Überschift eine horizontale Linie einfügen. Dafür gibt es den <hr>-Tag:

horizontale Linien

Und wir sehen in der Browservorschau:

horizontale Linien im Browser

Sicher fällt euch etwas an der Schreibweise auf: <hr />. Da man zwischen eine Linie nichts schreiben kann, sind bei diesem Tag der Anfangs- und Endtag vereint. Ihr könntet auch <hr></hr> schreiben, allerdings ist die Kurzschreibweise für solche Tags geläufiger.

Fettschrift

Nun aber weiter. Wie kann ich Text fett schreiben? Dafür gibt es zwei Tags, die das gleiche Ausgabeergebnis haben, aber eine unterschiedliche Gewichtung: <b></b> und <strong></strong> Doch probieren wir es zunächst aus:

html-Fettschrift

Im Browser wird nun folgendes ausgegeben:

html-Fettschrift im Browser

Die Existenzbereichtigung für zwei Tags mit gleichem Anzeigeergebnis ist folgender:

Mit <b></b> stelle ich Text dar, den ich gern fett angezeigt haben möchte, aber für die Suchmaschinen nicht als wichtig eingestuft werden soll. Für Suchmaschinen wichtiger fettgeschriebener Text wird hingegen mit <strong></strong> ausgezeichnet.

Kursivschrift

Dasselbe gilt im Übrigen für folgende Tags: <i></i> und <em></em> Was sie bewirken sehen wir, wenn wir folgendes ausprobieren:

html-Kursivschrift

Im Browser sehen wir nun:

html-Kursivschrift im Browser

Der Text wird nun in italic, also kursiv ausgegeben, wobei <i></i> für einfachen kursiven Text steht und <em></em> für wichtigen kursiven Text.

Der Zeilenumbruch

Nun zum Zeilenumbuch. Wie können wir diesen "erzwingen"? Dafür stellt html den <br />-Tag zur Verfügung. Testen wir es:

html-Zeilenumbruch

Im Browser erkennen wir:

html-Zeilenumbruch im Browser

Nachdem wir <br /> hinter "meine" geschrieben haben, wird der nachfolgende Text in der nächste Zeile ausgegeben.

Wir haben nun schon eine ganze Menge gelernt. Wir wissen, was ein "Tag" ist und kennen folgende Tags:

  • <p>
  • <h1> bis <h6>
  • <hr />
  • <b> und <strong>
  • <i> und <em>
  • <br />

Jetzt wird es aber langsam spannend, denn als nächstes wollen wir lernen, wie wir Listen darstellen können. Dazu geht es hier weiter zum html-Lehrgang Tag 1 Listen



« zurück