Viele Leute haben den Wunsch eine eigene Webseite zu besitzen, wissen jedoch nicht wie man anfangen soll. Meist versucht man es über sogenannte “Homepage-Generatoren” oder “Homepage-Baukasten”, doch so wirklich glücklich ist man damit nicht. Jetzt sollte man sich wirklich überlegen HTML zu lernen, dass einem den Eintritt in die Webentwicklung ermöglicht. Hierbei empfehle ich SelfHTML. Wer sich jedoch nur kurz einen Überblick schaffen möchte, dem sollte dieser Beitrag genügen.
Grundgerüst
Als erstes sollte man sich ein ordentliches Programm für HTML downloaden, wo ich NVU, UltraEdit32 oder Dreamweaver zu den Besten zähle. Wobei man sagen muss, dass UltraEdit32 (ca. 50 €) und Dreamweaver (ca. 300 €) kostenpflichtig sind, jedoch 30 Tage-Demoversionen frei verfügbar sind. Wenn man sich nun einer der Programme installiert hat, steht man nun, wenn man ein neues HTML-Dokument erstellt hat, vor einer leeren Seite bzw. bei Dreamweaver und NVU vor einem Standart-Template. Wenn man kein Template besitzt, holt man sich diese entweder über Google (Suchbegriff: “HTML Grundgerüst”) oder nimmt folgenden:
<html>
<head>
<title>Seitentitel</title>
<meta name=”keywords” content=”beschreibende, stichworte, die zu dieser, seite passen”>
<meta name=”description” content=”Einen Satz, der diese Seite beschreibt.”>
</head><body>
</body>
</html>
Wenn wir nun ein HTML-Gerüst vor uns liegen haben, werden wir mit einigen (uns noch unbekannten) Begriffen konfrontiert. So fängt es bei dem <html> an und hört mit dem </html> auf. Dazu muss man sagen, dass in HTML <html> ein sogenannter Tag [eng. "Beschriftung"] ist und etwas “umklammert”. Denn schließlich ist ja die gesamte Webseite zwichen dem <html> und dem </html>. Zusätzlich gibt es noch alleinstehende Tags die nicht geschlossen werden und auch keinen “Inhalt” umschließen. Diese Tags werden lediglich mit sogenannten Attributen versehen:
<html> .. </html> // Umschließender Tag
<meta name=”keywords” content=”webdesign, html, html für anfänger”> // Single-Tag
Bei dem Meta-Tag fällt auf, dass noch im Tag 2 weitere Bereiche existieren: name und content. Diese beiden Bereiche sind Attribute und versehen den Mutter-Tag mit weiteren Informationen. So wird diesem Meta-Tag der name [eng. "Name"] “keywords” und der content [eng. "Inhalt"] “webdesign, html, html für anfänger” gegeben. (Der Meta-Keywords-Tag - ein Meta-Tag mit dem Namen “keywords” - wird von Google benutzt um der Seite die richtigen Stichwörter zuzuordnen unter der diese Seite nachher gefunden werden kann)
Da wir jetzt das wesentliche geklärt haben, kommen wir nun zur Aufschlüsslung von allen vorhanden Tags:
<html> - Zeigt dem Browser das hier eine HTML-Seite beginnt (bzw. mit dem </html> wo sie endet).
<head> - Setzt auf der Seite den Kopf-Bereich, welcher für “unsichtbare” Informationen genutzt wird.
<body> - Umfasst den sogenannten Körper-Bereich, welcher alle sichtbaren Inhalte der Webseite enthält.
<title> - Der Title-Tag stellt den Namen ein, den Sie am oberen Ende Ihres Browsers (ex. Firefox) sehen können.
<meta> - Die Meta-Tags enthalten Informationen für Suchmaschinen und Browser.
Formatierungen
Da wir nun das Grundgerüst verstanden und analysiert haben, werden wir nun die ersten Text in den Body-Bereich [eng. "Körper"] einfügen. Dazu nehmen wir als Beispiel den Satz: “HTML lernen macht Spaß!”
Nachdem wir diesen Satz in den <body> [Hier rein] </body>-Tag eingefügt haben, speichern wir das Dokument auf dem Desktop (normalerweise: Datei -> Speichern unter..) und rufen es mit einem Doppelklick auf. Jetzt dürften wir eine weiße Seite sehen auf der steht: “HTML lernen macht Spaß!”
Info: Es kann jedoch sein, dass das “ß” (sz) von “Spaß” nicht richtig angezeigt wird, dazu werden wir jedoch später im Abschnitt “Sonderzeichen” kommen.
Nun möchten wir verschiedene Formatierungen an diesem Text ausprobieren (z.B. fett, kursiv und unterstrichen) um so später mehr Möglichkeiten haben unsere Texte zu gestalten. Dazu gibt es verschiedene Tags die wir nutzen können:
fett - <b>dieser Text wird fett</b>
kursiv - <i>dieser Text wird kursiv</i>
unterstrichen - <u>dieser Text wird unterstrichen</u>
So könnten wir jetzt unseren Beispielsatz formatieren:
<b>HTML</b> <i>lernen</i> <u>macht Spaß</u>!
Ergebnis: HTML lernen macht Spaß!
Nun möchten wir ins weitere Detail gehen, bzw. wir möchten uns den kleinen und großen Dingen widmen: der Text-Größe. Dazu werden wir den Text mit einem <font>-Tag umschließen und diesen mit dem Attribut “size” versehen. Hier sind einige Beispiele dazu:
<font size=”-1″>kleiner</font>
<font size=”+1″>größer</font>
Ergebnis: kleiner größer
Nun widmen wir uns der Welt einer gigantischen Vielfalt: den Farben. Dazu nutzen wir erneut den <font>-Tag, doch diesmal mit dem color-Attribut, welches entweder mit englischen Farbnamen (ex. red) oder mit sogenannten Farbcodes (ex. #66CC88) befüllt werden können. Dazu wieder einige Beispiele:
<font color=”green”>H</font> // Grün
<font color=”red”>T</font> // Rot
<font color=”yellow”>M</font> // Gelb
<font color=”#000000″>L</font> // Schwarz
Ergebnis: HTML
Tags: html, html anleitung, html für anfänger, html tutorial