Web Page Generator
Linkfarbe - HTML Tutorial - Kurs für Einsteiger.

HTML Tutorial: Linkfarbe





Manchmal ist es nützlich, dem Surfer mitzuteilen, ob man auf einen Link außerhalb des eigenen Projektes hinführt, oder auch nicht. Manchmal WILL man einfach nur so auf seiner Seite rote und grüne Links haben.


Überhaupt, um die Links "schön" zu formatieren, empfehle ich nachfolgenden Workshop:

Formatiern von Links

Ich erläutere das ganze einfach an 2 Linkfarben, die innerhalb einer Seite eingebaut werden sollen: rote Links für interne Verweise und grüne Links für externe Verweise.

Das Problem ist ganz einfach mit sogenannten Style-Klassen zu lösen. Das Funktioniert so, dass man in den Style-Angaben je einen Link der Klasse "intern" und extern definiert. Dazu folgender Quelltext:


<head>

<style>
<!-- Nachfolgend die Einstellungen für den internen Link -->
a.intern:link {color=#ff0000; text-decoration:none};
a.intern:hover {color=#ff0000; text-decoration:none; background=#00ff00};
a.intern:visited {color=#ff0000; text-decoration:none};
a.intern:active {color=#ff0000; text-decoration:none; background=#00ff00};

<!-- Nachfolgend die Einstellungen für den externen Link -->
a.extern:link {color=#00ff00; text-decoration:none};
a.extern:hover {color=#00ff00; text-decoration:none; background=#ff0000};
a.extern:visited {color=#00ff00; text-decoration:none};
a.extern:active {color=#00ff00; text-decoration:none; background=#ff0000};

</style>

</head>


Nun, was passiert hier? Zunächst mal habe ich die Linkunterstreichung deaktiviert. Es gibt jedoch einen entscheidenden Unterschied:
Während man normalerweise eingibt a:link {...} schiebt sich hier jeweils noch ein ".intern" bzw. ".extern" dazwischen. Das sind die Style-Klassen. (Das ganze klappt auch mit den anderen Tags, also h1, h2, p, td, ...).
Dann wurden für die verschiedenen Link-Stati (link, hover, visited und active) die Farbe definiert. Beim status "hover" habe ich mich hier entschieden, noch eine Hintergrundfarbe einzubinden. Der Phantasie sind keine Grenzen gesetzt. Man kann natürlich auch noch weitaus mehr Link-Klassen erstellen.

Die Definition wäre somit geschafft. jetzt müssen wir dem Quelltext nur noch beibringen, dass wir einen internen, oder externen Link haben. Dazu erweitert man den a-Tag um class="name". Somit "weiß" dann der Link, wie er sich darzustellen hat. Im HTML sieht das dann wie folgt aus:


<body>

<a class="intern" href="domian1intern.htm">interner Link</a><br>
<a class="extern" href="domain2extern.htm">externer Link</a>

</body>


Wenn Ihr jetzt beide Quelltextblöcke (Ich habe mit Absicht den Code ein wenig erweitert, aber die Erweiterung auf ein Minimum reduziert.) nacheinander in eine neue Datei reinkopiert und diese als HTML-Datei speichert, dann könnt Ihr das Ergebnis sofort ausprobieren und rumspielen. Grundsätzlich lassen sich adiese Klassendefinitionen auch in einer externen CSS-Datei unterbringen.



Apache HTTP Server Test Page powered by CentOS

Apache 2 Test Page
powered by CentOS

This page is used to test the proper operation of the Apache HTTP server after it has been installed. If you can read this page it means that the Apache HTTP server installed at this site is working properly.


If you are a member of the general public:

The fact that you are seeing this page indicates that the website you just visited is either experiencing problems or is undergoing routine maintenance.

If you would like to let the administrators of this website know that you've seen this page instead of the page you expected, you should send them e-mail. In general, mail sent to the name "webmaster" and directed to the website's domain should reach the appropriate person.

For example, if you experienced problems while visiting www.example.com, you should send e-mail to "webmaster@example.com".

If you are the website administrator:

You may now add content to the directory /var/www/html/. Note that until you do so, people visiting your website will see this page and not your content. To prevent this page from ever being used, follow the instructions in the file /etc/httpd/conf.d/welcome.conf.

You are free to use the images below on Apache and CentOS Linux powered HTTP servers. Thanks for using Apache and CentOS!

[ Powered by Apache ] [ Powered by CentOS Linux ]

About CentOS:

The Community ENTerprise Operating System (CentOS) Linux is a community-supported enterprise distribution derived from sources freely provided to the public by Red Hat. As such, CentOS Linux aims to be functionally compatible with Red Hat Enterprise Linux. The CentOS Project is the organization that builds CentOS. We mainly change packages to remove upstream vendor branding and artwork.

For information on CentOS please visit the CentOS website.

Note:

CentOS is an Operating System and it is used to power this website; however, the webserver is owned by the domain owner and not the CentOS Project. If you have issues with the content of this site, contact the owner of the domain, not the CentOS Project.

Unless this server is on the centos.org domain, the CentOS Project doesn't have anything to do with the content on this webserver or any e-mails that directed you to this site.

For example, if this website is www.example.com, you would find the owner of the example.com domain at the following WHOIS server:

http://www.internic.net/whois.html