kostenlose-templates.eu

Nun beschäftigen wir uns mit dem Content, dem eigentlichem Inhalt unserer Webseite.
Eigentlich ist es nicht schwer den Inhalt abzuändern, zumindest nicht, wenn wie hier der Seitenaufbau (hier: Text umfliest Bilder) übernommen wird. Es gibt in HTML einige Elemente und Attribute zum positionieren und Anordnen von Textinhalten. Dazu gehören z.B. <br> oder auch der der <p> Tag. Jetzt rede ich die ganze Zeit von Elementen und Attributen. Zur Erklärung: Elemente sind sind die Inhalte die zwischen den
spitzen Klammern <> (Tags) stehen z.B.: <h1> ( Überschrift Größe 1) . Attribute sind zusätzliche Anweisungen zu den HTML-Elementen z.B.: <h1 align="center">ihre-seite.de</h1> (Textausrichtung mittig).
Welche Elemente und Attribute es gibt und was sie bewirken, lest bitte bei de.selfhtml.org nach. Dies würde dieses Tutorial sprengen. Aber nachstehend mal einige wichtige Elemente und Attribute:

 
- <h1> Überschrift der 1. Ordnung (geht bis h6). </h1> beendet die Überschrift
- <br> (br = break = Umbruch) fügt an der gewünschten Stelle einen Zeilenumbruch ein. Tag braucht nicht geschlossen zu werden.
- <p>  (p = paragraph = Absatz) leitet einen Textabsatz ein. </p> beendet den Textabsatz und steht am Ende des Absatztextes.
- <ul>  leitet eine Aufzählungsliste ein (ul = unordered list = unsortierte Liste). </ul> schließt die Aufzählungsliste.
- <ol>  leitet eine nummerierte Liste ein (ol = ordered list = nummerierte Liste). </ol> schließt die Aufzählungsliste.
- <li>   Damit beginnt ein neuer Punkt innerhalb der Liste (li = list item = Listeneintrag). </li> beendet den Listeneintrag.
- <div> Damit leitet man ein Block-Element ein. Mit </div> schließt man das Blockelement.

- align="left"      Textausrichtung links
- align="center"  Textausrichtung mittig
- align="right"     Textausrichtung rechts
- align="justify"    Textausrichtung Block

Wenn man nun größere Textpassagen hat oder öfters den gleichen Style, kann man die Attribute auch extern in eine CSS-Datei einbinden. Dies ist vor allem dann sinnvoll, damit man den Quelltext nicht unnötig aufbläht. CSS-Dateien werden vom Browser nur einmal aufgerufen und verbleibt dann im Cache, was den Seitenaufbau schneller machen kann. Außerdem bleibt der Quelltext wesentlich übersichtlicher und ist damit leichter zu pflegen.
Mit diesem Wissen könnt Ihr nun Euren Text ganz leicht an euere Bedürfnisse anpassen. Probiert es aus!

Jetzt kommen wir zu einem weiteren wichtigen Punkt: Bilder einfügen.
Man kann Bilder entweder als normales Bild oder als Link anzeigen lassen.

Bei einem normalen Bild schaut das so aus:
<img src="/bilder/bild.gif" alt="Mein Bild">
Für Grafiken gibt es in HTML das <img>-Tag (img = image = Bild, src = source = Quelle). Es handelt sich um ein Standalone-Tag ohne Elementinhalt und ohne End-Tag. Das Attribut alt ist eine Pflichtangabe. Es beschreibt das Bild wenn sie mit dem Cursor darüberfahren. Bei z.B. Transparenten Grafiken kann es sinnvoll sein das Attribut leer zu lassen. ( alt="" ).

Bei einem Bild als Link schaut das dann so aus:
<a href="/index.html"><img src="/bilder/bild.gif" alt="Mein Bild"></a>
Wenn man jetzt auf diese Bild klicken würde, würde man zu der Datei "index.html" weitergeleitet werden. Natürlich kann man nicht nur auf HTML-Dateien verweisen sondern, beispielsweise auch auf andere Grafiken. <a href="/bilderbilder/bild1gross.gif"><img src="/bilder/bild1klein.gif"></a> Somit können wir kleine Bilder im einer Übersicht darstellen und der Benutzer kann, wenn er auf das Bild klickt das Bild größer ansehen.nsehen.nsehen.nsehen.nsehen.. Das spart Traffic und Ladezeit. Außerdem hat man eine hübsche Bildergalerie mit "Zoom-Effekt".

Jetzt können wir auch einfache Verweise, entweder intern oder auch zu anderen Webseiten darstellen. Auf Wunsch auch mit Grafiken.
Ein interner Link auf eine HTML Datei sieht dann so aus:
<a href="/gaestebuch.html">Gästebuch</a>

Ein Verweis auf eine externe Webseite sieht dann so aus:
<a href="http://www.kostenlose-templates.eu">Kostenloser Webmasterbedarf</a>

Wie Ihr seht ist es eigentlich ziemlich simpel, euren Inhalt anzupassen.