Webprogrammierung für Anfänger

HTML - Die Praxis!

Als erstes müssen wir uns richtig vorbereiten. Um die nötige Grundlage zu haben, brauchen wir einen Texteditor. Aber nicht den "Notepad" auf Windows. Für Windowsuser empfehle ich für den Anfang "Notepad++". Für Linuxanfänger "Gedit" und für erfahrene User "Vim".
Das zweite wichtige Utensil, ist unser Browser. Am Anfang ist es nicht wichtig welchen wir benutzen, um das HTML - Dokumente darstellen lassen zu können.

Zusammenfassung:

Texteditor
Browser

Als nächstes Überlegt ihr euch, wo ihr das Dokument speichern wollt, damit ihr das auch wiederfindet.
Ihr habt zwei Möglichkeiten, die Datei mit folgender Dateiendung zu speichern.

*.html
*.htm

Das Sternchen, steht für euren Dateinamen mit der jeweiligen Dateiendung, auch Wildcart genannt. Das Betriebssystem speichert automatisch, die Datei so, dass ihr diese nur noch dann mit einem Doppelklick öffnen braucht. Doch dazu braucht ihr erst einmal den Inhalt. Dazu kommen wir jetzt:

Das Grundgerüst der Website:

------------------------------------------------------------------------------
<!DOCTYPE>

<html>

<head>

<title>

Tabname eurer Website

</title>

</head>

<body>

Hier steht der Text deiner Website. </br>

</body>

</html>

------------------------------------------------------------------------------

Abb. 1, Grundgerüst HTML

So, nun die Erklärung:

Diese Klammern nennt man "Tag" (Nein, das hat nichts mit Tag und Nacht zu tun :) ). Jeder dieser Tags hat eine bestimmte Funktion in der Datei. Dazu aber nochmal später.
Wenn ein Tag geöffnet wird, also z.B. <body> muss diese auch widderum geschlossen werden -> </body>. Das erfolgt mit diesem Slash " / ". Es gibt auch Ausnahmen, z.B., </br> (Zeilenumbruch), das kann man auch ohne offenen Tag schreiben, siehe oben: Abbildung 1.
An sich ist die Groß - und Kleinschreibung egal, jedoch solltet ihr euch einen ordentlichen Schreibstil angewöhnen, um den Überblick zu behalten. Dazu gehört es auch regelmäßig (nicht zu viele) Kommentare zu schreiben. Diese werden wie oben so geschrieben: .

Zum Aufbau:

<html></html>

Innerhalb dieser beiden Tags, liegt euer ganzer Inhalt. Was noch vor dem <html> - Tag steht, ist die Dokumenttyp-Deklaration (Angabe zur verwendeten HTML-Version). Zu der aktuellsten Version, gehört HTML 5. Jedoch würde ich euch noch nicht raten damit anzufangen, bevor ihr nicht die Grundlagen drauf habt. HTML 5 ist auch Browser abhängig, da in dem Browser noch nicht alle Funktionen implementiert wurden. Ich empfehle euch, am Anfang " <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> " zu verwenden. Diese Deklaration funktioniert soweit in allen Browser.

<head></head>

In dem Kopf kommt euer Titel und sonstige Metadaten, auf die Metadaten werde ich hier jedoch nicht weiter eingehen.

<title><title>

Innerhalb der Tags steht dann der Name eures Tabs der Website.

<body></body>

Nun zum Hauptkörper des HTML - Dokuments. Hier steht euer ganzer Inhalt der Website, in dem ihr: verlinkt (Hyperlinks), Bilder einfügt, Hintergrundfarben wählt oder die Schrift formatiert. Jedoch werde ich euch das nicht erklären, da diese Art die Website zu gestalten veraltet ist. Zum einen wird die Datei total überfüllt. Desweiteren lässt sich das Ganze leicht in eine CSS - Datei auslagern und als Template (engl. Vorlage) weiterverwenden. Ansonsten müsstet ihr die ganze Formatierung per Hand erneut pro HTML - Seite neu schreiben. Wäre doch Schwachsinn, oder?

Also, hier werden wir nur den Inhalt schreiben und durch Verlinkung und Verschachtelungen in CSS formatieren.

Nachdem ihr nun alles abgespeichert habt, könnt ihr die Datei öffnen (am besten mit Text ^^) und den ersten großen Schritt, zu einer eigenen Website betrachten.

Im nächsten Teil zeig ich euch Attribute und die Vorbereitung für die Formatierung in CSS, was ein eigener Teil im Blog sein wird.

HTML - Was ist das?

HTML (Hypertext Markup Language) ist nicht wie gedacht eine Programmiersprache, was oft gedacht wird. Deshalb ist der Titel meines Blogs, etwas irreführend. Hierbei handelt es sich nämlich um eine Auszeichnungssprache (engl. Markup Language). Sie ist die Grundlage aller Websites, welche mit diversen anderen Sprachen zum einen dynamisiert werden kann mit PHP & JavaScript und durch CSS, um dieser Seite auch Pepp zu verleihen.

Soo... Aber was bedeuteten nun, die einzelnen Begriffe?

PHP & JavaScript, ist wie gesagt dazu da, um eine Website dynamisch zu gestalten.
Der grundlegende Unterschied ist der, dass PHP (engl. Hypertext Preprocessor),
auf einem (Web)server ausgeführt wird. Unter einem Server (engl. serve - dienen), versteht man ein Programm, der eine bestimmte Funktion erbringen soll, z.B., ein Webserver stellt eine Website zur Verfügung.
JavaScript wird nicht auf einem Server ausgeführt, sondern in dem eigenen Browser (Bsp. Firefox, Chrome), dieser ist der Client (engl. Client - Kunde). Diese Architektur nennt man Client-Server Architektur.
Um die Seite nun auch Pepp zu verleihen, wird CSS (engl. Cascading Style Sheet) verwendet. Die Semantik beschreibt das Aussehen der Website, wie z.B. Schriftformatierung und Hintergrund.

In meinem nächsten Beitrag, erkläre Ich Anhand einer Visualisierung, wie ein HTML - Dokument Aufgebaut ist und diese dann im Browser dargestellt wird.

Webprogrammierung für Anfänger

Seiten

Gesamtzahl der Seitenaufrufe

Dienstag, 3. Januar 2012

Die Praxis beginnt!

Sonntag, 1. Januar 2012

Die Einführung in HTML und Co.

Blog-Archiv