3. lekce - odkazy, CSS
Ve třetí lekci si ukážeme, jak dělat odkazy a naučíme se základy CSS (kaskádové styly).
Odkazy
Odkaz se provádí pomocí značky <a> </a>. Zatím si ukážeme dva hlavní odkazy se kterými budeme pracovat. Jako první bude odkaz na jiné místo (adresu) na internetu. Do naší osobní stránky přidáme položku na oblíbený film. Zdrojový kód bude vypadat takto:
<strong>Oblíbený film: </strong><a href="https://www.csfd.cz/film/236957-duna/prehled">Duna</a>
Ve značce <a> nás zajímá atribut href za který do uvozovek napíšeme adresu na dané místo v internetu. Další důležitá věc je, napsat mezi značku text na který bude možné kliknout <a>Duna</a>. Pokud by jsme nic nenapsali, odkaz bude vytvořen ale návštěvník našeho webu nic neuvidí.
Jako druhý případ, si ukážeme odkaz na námi vytvořenou stránku, která je umístěna na našem počítači, popřípadě serveru, kam nahráváme naše stránky. Odkážeme na naší první stránku kterou jsme vytvořili při první hodině našeho kroužku. Nejprve opět zdrojový kód.
<strong>Moje první stránka: </strong><a href="prvni.html">prvni.html</a>
Jak vidíte, tentokrát jsme do atributu href napsali název naší první stránky prvni.html. A opět důležitá věc: mezi značku <a> napíšeme název dokumentu na který odkazujeme. Dále si je třeba uvědomit, že v atributu href je rovnou napsát název naší první stránky. Je to dáno tím, že se nachází ve stejné složce jako naše osobní stránka, pokud by byla na jiném místě (složce) v počítači, je třeba uvést správně cestu!
Naše stránka s odkazy bude vypadat takto:
CSS - kaskádové styly
CSS nebo-li (Cascading Style Sheets), je vlastně takový balík metod který nám umožnují upravovat grafickou podobu stránek. Dříve se toto dělalo pomocí atributů v HTML značkách, toto je ovšem již zastaralé a my budeme veškeré grafické úpravy vzhledu provádět pouze pomocí CSS. Kaskádové styly lze do dokumentu zapisovat několika způsoby, dnes si ukážeme první z nich. Do značky <head> vložíme další párovou značku a to <style> </style>. První co zkusíme, bude změna barvy písma na celé stránce.
<!DOCTYPE HTML>
<html lang="cs">
<head>
<title>Naše první stránka</title>
<style>
body {
color: blue;
}
</style>
</head>
Ve zdrojovém kódu se pozorně podívejte, kam a jak zapisujeme CSS! Je třeba to dodržovat a a nic nevynechat. Jako první jsme napsali body ovšem bez špičatých závorek. Tím dáváme najevo, že budeme měnit vše mezi značkami body. Dále následují složené závorky. Vytvoříme je klávesovou zkratou Ctrl + Alt + B a mezi ně na další řádek napíšeme vlastnost a za dvojtečku její hodnotu, v našem případu color: blue; a celý zápis ukončíme středníkem! Od této chvíle bude veškerý text na stránce modrý. Jak vidíte, tak barvu zapisujeme pomocí anglických názvů, jde to i jinám způsobem, zatím pro jednduchost budme používat tento zápis.
Pro přehlednost, zapisujeme CSS styly na každý řádek zvlášť, i když by jsme mohli vše zapsat do jednoho řádku a bez jakýkoliv mezer. Jako další změny vzhledu si ukážeme, barevné pozadí pomocí background-color: lightgreen; na světle zelené a změnu písma font-family: Verdana; na Verdanu. Naše stránka teď bude vypadat takto:
font-family: Arial;
font-family: Impact;
font-family: Tahoma;
Jako poslední si dnes pomocí stylů změníme barvu nadpisu <h1>, postup je stejný jako v předchozím příkladu. Do stylů napíšeme:
h1 {
color: red;
}
Tímto jsme změnili barvu textu u nadpisu na červenou. Celý náš dnešní zápis mezi značkou <style> vypadá tedy takto:
<!DOCTYPE HTML>
<html lang="cs">
<head>
<title>Naše první stránka</title>
<style>
body {
color: blue;
background-color: lightgreen;
font-family: Verdana;
}
h1 {
color: red;
}
</style>
</head>
Zdrojový kód i stránku si pořádně prohlédněte v prohlížeči a zkuste si měnit barvy či písmo a pozorovat jak to vypadá.
Pokračuj na 4. lekci.