Die eigene Webseite programmieren lernen – 4 Fakten, die du wissen musst

Die eigene Homepage: Nicht nur dein Aushängeschild im Internet, mit einer Webseite kann man heutzutage richtig gutes Geld verdienen. Fleißarbeit vorausgesetzt (das bedeutet, es kann schon mal 5 Jahre dauern bis es anfängt sich zu lohnen). Aber wollen wir erstmal klein anfangen. Wer eine Webseite bauen will, muss nicht nur wissen wie man HTML programmieren kann, sondern sollte sich auch Kenntnisse im Webdesign aneignen. Dafür braucht man dann zusätzlich CSS, denn damit „styled“ man den Webauftritt. Soll sich die Webseite, wie heutzutage üblich, dynamischer verhalten und mordern aussehen, dann kommt man auch nicht um Javascript drumherum. Ganz schön viele Fachbegriffe für eine einfache Webseite, oder? Keine Panik, alles halb so wild.

Was eine Webseite eigentlich ist

Eigentlich ist eine Webseite ein einfaches Textdokument. Wenn du im Browser eine Internetadresse ansurfst, lädt dein Computer im Prinzip erstmal nur diese Textdatei herunter. Zugegeben, es wäre ziemlich langweilig, wenn alle heutigen Webseiten nur aus Text bestehen würden. Aber damals sahen diese so aus: Hier findest du den Link zur ersten(!) Webseite im Internet.
Da Text allein natürlich total langweilig ist und auch keine Möglichkeit für Verlinkungen bot, musste man den Text etwas erweitern. So entstand dann der HyperText (und das hat nichts mit Scooters Hyper Hyper zutun!). HyperText ist mit Zusatzinformationen angereicherter Text. Das beduetet, man schreibt nicht nur Text, sondern kann auch Bilder, Links, Textformatierungen und Layout einfügen. Quasi wie in Word. Allerdings kann man das nicht so einfach wie in Word machen, sondern muss dafür eine Beschreibungsprache lernen, auf deutsch ungefähr übersetzt: Hyper Text Beschreibungs Sprache oder kurz auf englisch: HTML

Woraus besteht eine Webseite?

HTML

Die HyperText Markup Language erlaubt dir Text zu schreiben und diesen mit Informationen zu versehen. Das sind wie oben schon erwähnt Textformatierungen, Bilder, Links. Aber auch Tabellen, Auflistungen und sogar Formulare sind möglich. Wenn du im Browser mal die Entwicklertools öffnest oder dir den Quelltext anzeigen lässt, wirst du etwas ähnliches wie  das hier sehen:
<h1>Die eigene Webseite programmieren lernen - 4 Fakten, die du wissen musst </h1>
Ausschnitt aus Entwicklertools h1-Element hervorgehoben
Diese eckigen Klammern < und > zeigen an, dass du nun ein HTML-Element verwendest. Nimmt man die eckigen Klammer und ein Slash, also </ und > dann bedeutet, dass das Element ab jetzt nicht mehr verwendet wird.
Kleines Beispiel, wenn du einen Text fett markieren willst, kannst du das HTML-Element b für bold  (englisch für fett) verwenden. Dein Text ist: Mein fetter Text.
In HTML formatiert wäre dann der Text: <b>Mein fetter Text.</b>
Welche HTML-Elemente es gibt und wie man diese verwendet wird in der aktuellen HTML5 Spezifikation beschrieben. Das W3C (World Wide Web Consortium), kümmert sich darum , HTML weiterzuentwickeln und es allen Browsern recht zu machen. Die Spezifikation von HTML5 ist allerdings sehr technisch und liest sich wie die Anleitung für ein SEHR komplexes Küchengerät. Im Zweifel ist es die letzte Dokumentation, die dir weiterhelfen kann. Ist leider so.
Dann gibt es noch ein paar Besonderheiten, aber im Prinzip hast du damit das wichtigste schon gelernt. Welche Elemente kannst du auf dieser Webseite sonst noch finden (über den Quelltext)?

CSS

Wenn du deinen Text nun farblich gestalten möchtest oder einen Hintergrund für deine Webseite einstellen willst, dann musst du deine Webseite durchstylen. Dafür benutzt man CSS. Bevor du CSS lernst, solltest du HTML bereits beherrschen, denn HTML-Wissen wird bei CSS vorausgesetzt. Theoretisch läuft das CSS folgendermaßen ab: Du wählst ein oder mehrere HTML-Elemente bzw. Elemente mit bestimmten Eigenschaften aus und legst dann mittels CSS-Eigenschaften das Aussehen fest. Den Hintergrund für den fetten Text könnten wir z.B. in blau einfärben:

b {
background-color: blue;
}

Das sieht etwas komplizierter aus als HTML, aber auch das ist mit Übung sehr leicht erlernbar. Das Element, bzw. die selektierten Elemente schreibt man zuerst auf. Dahinter packt man dann geschweifte Klammern also { und } . IN die geschweiften Klammern, fügt man nun die CSS-Eigenschaften ein. Da du dich jetzt fragst welche es gibt, wirst du dich nicht wundern, wenn ich dich nochmal zum W3C weiterleite. Genau. Auch für CSS gibt es eine sehr umfangreiche Spezifikation, in der unter anderem alle Eigenschaften aufgelistet und beschrieben sind. CSS ist mittlerweile so mächtig geworden, dass man damit Animationen und die coolsten visuellen Webseiteneffekte damit bauen kann. Mit HTML und CSS bekommt man also schon mal schön gestylte Webseiteninhalte hin. Aber bisher ist ja alles statisch, wie bekommt man das nun hin?

Javascript

Mit Javascript kannst du quasi eine Software für deine Webseite schreiben. Ich meine damit alleine schon einfache Dinge wie auf einen Buttonklick reagieren, oder eine Tabelle ein-/ausblenden. Wenn also CSS die HTML Inhalte stylen kann, was kann Javascript mit der HTML anstellen? Javascript kann auf den gesamten HTML-Inhalt deiner Webseite zugreifen. Das ganze nennt sich DOM (Document Object Model) und es gibt Befehle, die du mit Javascript benutzen kann um die HTML-Inhalte deiner Seite auszulesen und zu verändern. Zum Beispiel, wenn man auf einen Button klickt, soll ein Text eingeblendet oder ausgeblendet werden. Also kann man auch HTML-Inhalte hinzufügen und löschen. Und das beste, das gleiche gilt auch für die CSS-Eigenschaften der Elemente. Das bedeutet mit Javascript bekommst du komplette Kontrolle über deine Webseite und kannst darüber alles programmieren. Wie man mit Javascript programmieren lernen kann, wird echt Klasse auf lerneProgrammieren erklärt.
Du kannst dir also merken:
  • HTML – Der Inhalt und die Struktur der Webseite
  • CSS – Das Styling und Aussehen der Webseite
  • Javascript – Das Verhalten der Webseite

Wie kommt die Webseite nun ins Internet?

HTML, CSS und Javascript werden jeweils in eigenen Dateien abgespeichert. Wenn du dir dann zum Beispiel ein Hostingpaket mietest, z.B. von adeska ab 0,75 € im Monat (programmierenanfangen.de wird auf adeska gehostet). Also man kann sagen die Einsteigerseite bekommt man für ca. 1€ pro Monat Hosting online geschaltet, das sind 36 € in 3 Jahren! Damit bekommst du eine Domainadresse und Speicherplatz auf den Servern des Hosters. Du kannst mit einem FTP-Programm die Dateien hochladen. Die Hauptseite nennst du index.html, damit weiß der Webserver, dass er diese Datei zuerst beim Aufruf der Domainadresse rausschicken soll.

Und wie kann man meine Webseite nun abrufen?

Der Benutzer gibt dann deine Webadresse im Browser ein, dann verbindet sich der Browser mit dem Webserver und fragt die erste Seite, also die index.html an (technisch passiert natürlich noch viel mehr, was dich aber hier nur verwirren würde). Der Webserver schaut ob es die Adresse und die Datei gibt und schickt dem Browser den Inhalt der Datei. Der Browser erhält diese und verarbeitet das enthaltene HTML. Das ist das was du dann im Browser sehen kannst. BÄM, fertig.

Fazit

Ja, ich weiß, du hast noch eine Menge Fragezeichen offen. Also wie schon beim Programmieren lernen erwähnt, das ganze lernt man nicht mal eben in 2-3 Stunden. Aber: Man muss auch nicht jedes Element von HTML und CSS auswendig lernen. Wenn man einsteigt und sich noch nicht so gut auskennt, muss man immer wieder mal in die Spezifikationen schauen und viel ausprobieren. Ausprobieren, Fehler machen und Erfahrungen sammeln: Story of a developers life.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.