Lehrlings Blog

4. Juni 2010 in HTML von Leo

Wer sich ein Design bzw. ein Layout für eine Webseite zusammenbasteln will, der hat entweder die Möglichkeit das ganze professionell und schön, also mit divs, oder schnell und einfach, mit Tabellen zu erstellen.
Man kann darüber streiten, jedoch gewinnen für mich eindeutig die divs. Das ganze hat auch seine Gründe, z.B. sind divs viel flexibler und man kann auch mehr damit machen.

Doch warum wählen viele Leute ein Tabellen Layout?
Da ich selbst nie mit Tabellen gearbeitet hatte und ich mit Tabellen ehrlich gesagt nicht so vertraut bin, wollte ich auch nie umsteigen. Jedoch für Leute die weniger Erfahrung in HTML und Co. haben, ist ein Tabellen Layout recht simpel, da man dies theoretisch auch schnell im WYSIWYG-Editor basteln kann.

Der Vorteil von divs?
Mit einem div hat man unzählige Möglichkeiten und nichts ist im Vorhinein definiert. Jedoch braucht man wie gesagt mit dem Umgang von divs etwas mehr Erfahrung, da es mehr Kenntnisse braucht. Mit divs hat man, im Gegensatz zu Tabellen, einen schönen und übersichtlichen Quellcode, welchen man schnell versteht.

Warum keine Tabelle?
Ja, Tabellen sind schnell gemacht und es ist einfach ein schnelles Layout zu erstellen, jedoch bleiben viele Möglichkeiten, welche man mit divs hätte, weg. Aber was auch noch gegen Tabellen spricht, ist der Quellcode. Ein Tabellen Layout kann sehr komplexe Strukturen haben wo man dann kaum mehr durchblickt.

Schlussendlich ist es jedem seine Sache, wer jedoch mehr will, der sollte sich vielleicht mal hinsetzen und die ganze div-Geschichte mal genauer ansehen

14. Mai 2010 in HTML von Leo

Mit JavaScript kann man viele Effekte auf seine Webseite bringen, jedoch bringt auch das eher langweilige HTML ein paar nette Sachen mit, welche einem einiges an JavaScript ersparen können. Und zwar geht es um Image Maps, also ums Mappen von Bildern. Zuerst aber eine kurze Erklärung was Image Maps überhaupt sind.

Mit Image-Maps ist es möglich, Bereiche auf einem einzigen Bild einzuteilen und z.B. eine Verlinkung auf einem bestimmten Punkt auf dem Bild hinzuzufügen. So könnte man theoretisch eine Navigation aus einem Bild erstellen und die einzelnen Links mit einem Image Mapping verlinken – aber dies wäre sehr unflexibel.

Offiziell wird Image-Map folgendermassen beschrieben:

Image maps allow authors to specify regions of an image or object and assign a specific action to each region (e.g., retrieve a document, run a program, etc.) When the region is activated by the user, the action is executed. 

Um so einen Image-Map zu erstellen, wird zuerst natürlich ein Bild benötigt, welches man mappen will.
Das Bild wird dann mit per HTML eingebunden und man gibt dem Bild einen Map:

<img usemap="#map" src="bild.jpg" />

“#map” ist hierbei der Name der Map, welche wir gleich definieren werden. Dieses HTML Attribut wird benötigt damit der Map funktioniert. Für valides HTML wird noch das alt und title-Attribut benötigt.

Der Mapping Part, welcher durch den oben genannten HTML-Tag aufgerufen wird, wird in einem eigenen Teil definiert und sieht so aus:

<map name="map">
    <area shape="rect" coords="11,10,59,29"href="http://www.google.ch" alt="Google CH" title="Google Schweiz" />
    <area shape="circle" coords="3,15,7" href="http://www.google.de" alt="Google DE" title="Google Deutschland" />
    <area shape="poly" coords="15,46,69,50,13,14" href="http://www.google.at" alt="Google AT" title="Google Österreich" />
</map>

Im img-Attribut wird also mit ‘usemap=”#map”‘ auf die Map ‘#map’ zugegriffen, welche wir (siehe Code oben) definieren.
Die Bereiche in denen was passiert (in unserem Beispiel sind es jetzt verlinkungen), werden mit Koordinaten angegeben und erhalten eine Form. Es gibt neben “default” (der restliche, undefinierte Bereich) 3 Formen fürs Mapping – rect (Viereck), circle (Kreis) und poly (Polynom). Diese werden (siehe oben) mit shape=”gewünschte form” angegeben.

Zu den verschiedenen Formen nun noch eine kurze Erklärung, wie das ganze mit den Koordinaten aussieht.

Viereck (shape=”rect”) Koordinaten werden definiert für: x1,y1,x2,y2
x1 = linke obere Ecke, Pixel von links
y1 = linke obere Ecke, Pixel von oben
x2 = rechte untere Ecke, Pixel von links
y2 = rechte untere Ecke, Pixel von oben

Kreis (shape=”circle”) Koordinaten werden definiert für: x,y,r
x = Mittelpunkt, Pixel von links
y = Mittelpunkt, Pixel von oben
r = Radius in Pixel

Polygon (shape=”poly”) Koordinaten werden definiert für: x1,y1,x2,y2 … xn,yn
x = Pixel einer Ecke von links
y = Pixel einer Ecke von oben
Es können so viele Ecken definieren wie gewünscht. Von der letzten definierten Ecke muss man sich einfach eine Linie zur ersten definierten Ecke hinzu denken, welche das Polygon schliesst.

(Quelle: Selfthtml)