Bilder

Um ein Bild in HTML zu implementieren, muss man den <IMG>-Tag benutzen. Dessen Hauptattribute sind “border”, “alt”, “title”, “width”, “height” und “style”. Wobei “style” (fast) auf jeden Tag angewendet werden kann und somit kein spezielles Attribut von Bildern ist. Nun einige Beispiele:

Laden eines lokalen Bildes ohne Attribute:

<img src=”bild.jpg”>

Laden eines externen Bildes ohne Attribute:

<img src=”http://www.webseite.de/ordner/bild.jpg”>

Skalierung eines Bildes auf die Größe 200×200:

<img src=”bild.jpg” width=”200″ height=”200″>

Alternative Skalierung eines Bildes auf die Größe 200×200 per CSS:

<img src=”bild.jpg” style=”width:200px; height:200px;”>

Ein Bild mit einem 5px dicken Rahmen:

<img src=”bild.jpg” border=”5″>

Ein Bild mit einem 5px dicken Rahmen per CSS:

<img src=”bild.jpg” style=”border:5px;”>

Setzen eines Alternativ-Textes, der angezeigt wird, falls das Bild nicht verfügbar ist:

<img src=”pferde.jpg” alt=”Meine Pferde im Stall”>

Setzen eines MouseOver-Textes, der angezeigt wird, falls die Maus das Bild berührt:

<img src=”pferde.jpg” title=”Deine Maus berührt gerade meine Pferde :D”>

Tabellen

Um eine Tabelle in HTML zu erstellen, muss man den <TABLE>-Tag benutzen, welcher folgende Attribute besitzt: “border”, “width”, “height”, “cellpadding”, “cellspacing” und “style”. Nun einige Beispiel zum Aufbau und zu den einzelnen Attributen:

Eine Tabelle mit 1 Zeile und 2 Spalten:

<table>
<tr>
<td>Zeile 1 Spalte 1</td>
<td>Zeile 1 Spalte 2</td>
</tr>
</table>

Eine Tabelle mit 2 Zeilen und 1 Spalte:

 <table>
<tr>
<td>Zeile 1 Spalte 1</td>
</tr> 
<tr>
<td>Zeile 2 Spalte 1</td>
</tr>  
</table>

Eine Table mit einem 5 px dickem Rahmen und einer Breite sowie Höhe von 200 px:

<table border=”5″ width=”200″ height=”200″>
<tr>
<td>Diese Tabelle ist genau 200 x 200 px gro&szlig;!</td>
</tr>
</table> 

Eine Tabelle dessen Abstand von Text zum Rahmen 4 px groß ist und der Abstand zwichen allen Kästchen 8 px groß ist:

<table cellpadding=”4″ cellspacing=”8″ border=”1″>
<tr>
<td>Dieser Text hat einen Abstand von 4 px zum Rahmen</td>
<td>Dieser Text ist 8px vom vorherigen Text entfernt</td>
</tr>
</table> 

AJAX

Ajax wird genutzt um Daten ins aktuelle Dokument zu laden ohne die aktuelle Seite zu verlassen. Das hat zum Beispiel bei einem Chat den Vorteil, dass man nicht während man schreibt neuladen muss um danach zu bemerken, dass der eben eingegebene Text verschwunden ist und erneut einzugeben ist. Bei Webseiten kann man neue Texte einfach einblenden, nachdem alte ausgeblendet wurden.

Vorteile:

• WOW!-Effekt
• Schönere Übergänge
• Höhere Benutzerfreundlichkeit
• Mehr Möglichkeiten

Nachteile:

• Google kann kein Ajax verstehen
• Höherer Traffic (nicht bedingt)
• Man benötigt Javascript

Silverlight & Flash 10

Diese beiden Sprachen bieten einen unendlich Möglichkeiten in Sachen Animation und Anwendung. Hier einige Fakten: 99% aller Online-Spiele (ausgenommen Browsergames) wurden mit Flash entwickelt. Alle bekannten Widgets (kleine Webseitenanwendungen) wurden mit Flash und Silverlight entwickelt. Jedoch auch Silverlight- und Flash-Anwendungen helfen nicht gerade zum Google Ranking bei und jagen die eigene Webseite manch Plätze herrunter, wenn man diese ungeschickt nutzt. Und nun die Vor- und Nachteile.

Vorteile:

• Anspruchsvolle Anwendungen
• Brand-Marketing durch Mini-Spiele
• Multimedia auf der Webseite (Video, Musik, …)
• Desktop ähnliche Atmosphäre

Nachteile:

• Google kann kein Flash & Silverlight verstehen
• Viel höherer Traffic
• Kann den Besucher nerven
• Man benötigt Javascript
• Man benötigt den Macromedia Flash Player
• Man benötigt das Silverlight Plugin

Mit den oben genannten Argumenten möchte ich Sie nicht zu Web 2.0 und deren Techniken zwingen oder Sie davon abhalten. Ich möchte Ihnen lediglich ans Herz legen, genau darüber nachzudenken ob die oben genannten Funktionen unbedingt notwendig sind und diese, falls sie nicht benötigt werden, lieber nicht zu nutzen um so nicht sinnvollen Ballast auf der Webseite zu sparen.

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