Montag, 7. April 2014

Grundlegende HTML-Codes

Hier möchte ich euch ein paar grundlegende HTML-Codes zusammenfassen. Wenn ihr tiefer in das Thema einsteigen wollt bzw. Infos zu einem bestimmten Code sucht, schaut doch mal bei selfHTML vorbei.

Bild einbinden

Ein Bild wird immer über das so genannte <img>-Tag eingebunden. Der HTML-Code für ein Bild sieht so aus:

<img src="URL der Bildquelle" width="300" height="200" alt="Bildtitel" border="0" />

Die URL muss dabei immer absolut sein, d.h. inklusive http:// am Anfang. Wenn ich z.b. diesen Code in die HTML-Ansicht dieses Beitrags eingebe...

<img src="http://www.kreativlaborberlin.de/wp-content/themes/klb2014/images/kreativlaborberlin.jpg" border="0" width="229" height="107" alt="Kreativlabor Berlin" />

... wird mein Logo anzeigt:


Kreativlabor Berlin

Um ein Bild in Blogger hochzuladen, könnt ihr oben über dem Textfeld einfach auf das Foto-Icon klicken und ein Bild von eurer Festplatte wählen.

Link setzen


Ein Link hat immer folgende Struktur

<a href="Link-URL" target="_blank">Link-Titel oder Bild</a>

Die URL muss dabei immer absolut sein, d.h. inklusive http:// am Anfang. Mit target="_blank" definiert ihr, dass die Seite in einem neuen Fenster geladen wird.

Wenn ich z.b. diesen Code in die HTML-Ansicht dieses Beitrags eingebe...

<a href="http://www.kreativlaborberlin.de/" target="_blank">Mein Blog</a>

wird im Beitrag ein Link zu meinem Blog eingebunden:

Mein Blog

Wenn ihr ein Bild verlinken wollt, kopiert ihr einfach den gesamten Bildcode (wie oben beschrieben) statt des Link-Titels hinein:

<a href="http://www.kreativlaborberlin.de/" target="_blank"><img src="http://www.kreativlaborberlin.de/wp-content/themes/klb2014/images/kreativlaborberlin.jpg" border="0" width="229" height="107" alt="Kreativlabor Berlin" /></a>

Und ihr erhaltet ein verlinktes Bild :)

Kreativlabor Berlin


Zeilenumbruch


Einen Zeilenumbruch macht ihr mit dem Code

<br />

Du kannst auch mehrere davon hintereinander platzieren für mehr Abstand :)



Wenn der Text am obigen Bild „klebt“


Möglicherweise hat das Bild per CSS einen "float" befehl bekommen, d.h. der Text fließt um das Bild. Um das floating aufzuheben, schreibe in deinen HTML-Code folgende Zeile:
<div class="clear"></div>



1 Kommentar :