Jednoduché odkazy

Poměrně banální záležitost, na kterou se někdy zapomíná.

Níže jsou popsány základní odkazy, které použijete například v patičce vašich webových stránek.

Pojdme si je připomenout.

Odkaz na naše stránky www.bearhugs.cz.

Řádek 4) Název, resp. nadpis odkazu

Řádek 5) Úprava zdroje písma na “Roboto Light“

Řádky 10-12) Specifikují jak má být písko veliké, jakou barvu použijeme, a nakonec odstaníme všechny aspekty vzhledu

Řádek 16) Specifikuje akci při najetí myši

Řádek 17) Nastavení podtržení

Řádek 18) Upravuje barvu při najetí myši “hover“

Řádek 23) Zde zadáváme cíl, v našem případě webové stránky, ale je možné zde odkázat na jakýkoli jiný cíl. Je zde i nastaveno otevírání v novém okně.

Naše webové stránky Naše webové stránky

				
					<!DOCTYPE html>
<html>
<head>
    <title>Naše webové stránky</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300&display=swap">
    <style>
        /* Styly pro odkaz */
        a {
            font-family: 'Roboto Light', sans-serif; /* Písmo Roboto Light */
            font-size: 12px; /* Velikost písma 12px */
            color: #999; /* Lehce šedá barva písma */
            text-decoration: none; /* Odstranění podtržení odkazu */
        }

        /* Při najetí myší na odkaz */
        a:hover {
            text-decoration: underline; /* Přidání podtržení při najetí myší */
            color: #cda700; /* Změna barvy na tmavě zlatou */
        }
    </style>
</head>
<body>
    <a href="https://bearhugs.cz/" target="_blank">Naše webové stránky</a>
</body>
</html>

Pokud změníme některé části, například jako zde, tak se upraví vzhled fontu, barvy textu při najetí myši na červenou a text bude namísto podtržení přeškrtnut.

				
					<!DOCTYPE html>
<html>
<head>
    <title>Naše webové stránky</title>
    <style>
        /* Styly pro odkaz */
        a {
            font-family: 'Arial Black', sans-serif; /* Písmo Arial Black */
            font-size: 15px; /* Velikost písma 15px */
            color: #333; /* Základní barva písma (tmavě šedá) */
            text-decoration: none; /* Odstranění podtržení odkazu */
        }

        /* Při najetí myší na odkaz */
        a:hover {
            text-decoration: line-through; /* Přeškrtnutí textu při najetí myší */
            color: red; /* Červená barva písma */
        }
    </style>
</head>
<body>
    <a href="https://bearhugs.cz/" target="_blank">Naše webové stránky</a>
</body>
</html>

TIP! – Kód pouze zkopírujte (nejlépe použitím aktivního odkazu vpravo nahoře s označením “Copy”) a vložte do objektu, na který jej chcete použít.

V Elementoru zvolte element “zkrácený kod”.

Následně vložíte kód a odkaz je hotový.

Úpravy pak můžete provádět přímo v editaci kódu.