Der Tipps-Blog! Jetzt weißt du wie es geht!

Das Tippsforum

Kleinere Bilder vorlanden

Im Internet gibt es leider noch immer viele Modemnutzer, welche nur sehr langsam Seiten laden können. Diese ärgern sich meistens über große Bilder, da die eigentliche Seite viel länger zum Laden braucht. Für diese Internet benutzen gibt es extra einen Wert im Bildercode.
Normalerweise sieht ein Code, um ein Bild einzufügen, so aus:

<img src="meinbild.jpg">

Um nun ein kleineres Bild vorzuladen muss man einfach nur den Wert lowsrc verwenden und ein kleineres Bild einfügen. Dies sieht dann ungefähr so aus:

<img src="meinbild.jpg" lowsrc=”meinkleinesbild.jpg”>

Durch dieses kleine Bild was vorgeladen wird behalten auch Modemnutzer ein einer Seite ihre Freude.

Einen Text durchstreichen

Viele kennen es bestimmt. Man möchte auf seiner Webseite zeigen das ein Preis reduziert ist oder einfach nur ein paar Wörter durchstreichen. Dafür braucht man nicht wie die meisten Leute annehmen CSS und gar durchsichtige Grafiken. Man kann Texte ganz einfach mit dem Befehl <strike> durchstreichen.

Hier einmal ein Beispiel dafür:

Ein Kilo Äpfel kostet nur noch <strike>4€</strike> 3€

Das ganze würde dann so aussehen:

Ein Kilo Äpfel kostet nur noch 4€ 3€

Und hier noch ein längerer durchgestrichener Text:

Das hier ist ein langer langweiliger Text dem ich mit Strike durchstreiche.

Wie erstellt man eine schöne Navigation mit HTML und CSS?

Möchte man seine Besucher auf der eigenen Website durch visuelle Reize ein wenig zum Bleiben verlocken, gehört auf jeden Fall erst einmal die Einrichtung einer angenehmen und formschönen Navigation dazu.

Wir gehen davon aus, dass wir unsere Links in einer ungeordneten Liste untergebracht haben:

<ul>
<li class=”NaviLink”>Ein Link</li>
<li class=“NaviLink“>Noch ein Link</li>
</ul>

Nun definieren wir in unserem Stylesheet, wie die Links aussehen sollen. Einen Stylesheet erkennt man an der Endung „.css“. Wir definieren wie folgt:

.NaviLink { display: block; color: #000; text-decoration: underline; }

Jetzt sind alle Links, welche die Klasse „NaviLink“ besitzen, schwarz, und sind nicht länger unterstrichen. „Display:block“ bedeutet, dass der Link über die ganze Breite und Höhe des übergeordneten Elements anklickbar ist. Das übergeordnete Element ist hier das Listenelement „<li>“. Das erleichtert dem Besucher die Navigation durch die Seite.

Schon sehr schön, aber was passiert, wenn wir mit dem Mauszeiger über den Link fahren? Die Linkfarbe sollte sich ändern, damit der Benutzer auch sieht, welchen Verweis er gerade ausgewählt hat. Dies nennt man einen „Hover-Effekt“. Wir definieren also folgendes dazu:

.NaviLink:hover { color: #ff9900; text-decoration: underline; }

Beim Überfahren des Links durch den Mauszeiger ändert er nun seine Farbe in Orange und wird zudem unterstrichen dargestellt.

Möchten wir zum Schluss noch die Listenpunkte eliminieren, die der Browser automatisch vor jedes Listenelement setzt, müssen wir lediglich folgende Anweisung in unseren Stylesheet schreiben:

ul { list-style-type: none; }

Und schon haben wir eine schöne und übersichtliche Navigation mit HTML und CSS erstellt. Jetzt noch schnell den Stylesheet in das Dokument einbinden. Das passiert so:

<link rel=“stylesheet“ src=“MeinStylesheet.css“>

Fertig!