Webové stránky
Index
Web server
Internet 1
Server
Klient
Browser
Internet 2
IP
IPv4
- Privátní (private)
- 192.168.1.105
- 10.0.0.48
- Veřejná (public)
- 185.49.88.60
Jelikož spolu můžou po internetu komunikovat jen veřejné adresy a k internetu je připojeno spoustu serverů a klientů, začli IPv4 adresy docházet. To se obchází pomocí překladu adres (NAT) z privátních na veřejnou na routeru. Zařízení, kterým je vaše domácí nebo podniková síť a tím i váš počítač připojen do internetu.
IPv6
- 2001:4860:4860:0:0:0:0:8888
- 2001:4860:4860::8844
DHCP
DNS
www
HTML
V
této části kurzu si ukážeme, jak se tvoří statické webové stránky.
Budou prostě zobrazovat text, obrázky a nějaké další objekty.
Kde ty stránky jsou?
Úkol: Adresář stránek
Vytvoř si na počítači ve složce Dokumenty složku www a v ní podsložky books a pictures.
Hyper Text Markup Language
A navíc pomocí hypertextových odkazů, můžeme z jedné stránky otevřít jinou.
značky / tagy
Tagy se od textu liší tím, že jsou v ostrých závorkách. <body> toto je počáteční tag a k němu koncový </body> má před názvem lomítko. Takto tag ohraničuje část textu a určuje, kde bude použit a nebo jak se zobrazí.
Uvnitř bloku tagu, můžou být další tagy.
Některé tagy nejsou v páru, protože by to nedávalo smysl. Například <br> pro zalomení řádku.
Kostra webové stránky
- Stránka začíná speciáním tagem <!DOCTYPE html>, který prohlížeči řekne, že jde o html stránku. Protože webový server neposílá název souboru, ale jen jeho obsah.
- <html> </html> - Blok obsahující vlastní webovou stránku.
- <head> </head> - Hlavička stránky
- <meta> - je zde informace o kódování textu, dnes nejčastěji utf=8, které obsahuje většinu na světě používaných znaků.
- <title> </title> - Název stránky, co se zobrazí v prohlížeči na záložce.
- <body> </body> - Obsah vlastní webové stránky
Úkol: index.html
Otevři si jednoduchý textový editor, jako například notepad (poznámky) a do nového textového souboru vlož kostru stránky, co je níže. Soubor pak ulož s názvem index.html do složky www.
Na soubor index.html potom poklepej v souborech a ten se ti otevře v prohlížeči.
<html>
<head>
<meta charset="utf-8">
<title>Knihovnička</title>
</head>
<body>
Knihovnička
</body>
</html>
V předchozí úloze jsme si vytvořili první webovou stránku a s nějakým textem. I když jsme text zapsali na řádky, v prohlížeči je vše za sebou na jednom řádku. Prohlížeči musíme totiž říct, jak má tento text zobrazit a na to jsou další tagy. Ty základní si postupně projdeme.
Nadpis
Má
tag čáslem 1 až 6, <h1> až <h6>. Číslo určuje velikost nebo
úrověn nadpisu od největšího po nejmenší. A samozřejmě na konci je
uzavírací tag </h1> s patřičným číslem.
Nadpis <h1>
Nadpis <h2>
Nadpis <h3>
Nadpis <h4>
Nadpis <h5>
Nadpis <h6>
Úkol: Nadpis
Přidej do souboru index.html tag h1 kolem nadpisu "Knihovnička". A soubor ulož, zavírat ho nemusíš, neboť ho za chvíli budeme dále upravovat.
Na soubor index.html potom poklepej v souborech a ten se ti otevře v prohlížeči a zkontroluj jestli má stránka nadpis.
Odstavec
Odstavec má tag <p> </p> a text v něm ohraničený zobrazí prohlížeč s prázdným řádkem před a za. I tento text je odstavcem.
Úkol: Odstavec
Přidej do souboru index.html
za nadpis text popisující tuto webovou knihovničku a uzavři ho do tagu
odstavce. Pokud chceš použít delší text na pár řádku, jako ukázku, můžeš
si ho vygenerovat nástrojem www.lorem-ipsum.cz. Zadej 1 odstavec a Generovat.
A soubor ulož, zavírat ho nemusíš, neboť ho za chvíli budeme dále upravovat. Na soubor index.html potom poklepej v souborech a ten se ti otevře v prohlížeči a zkontroluj jestli na stránku přibyl tento odstavec.
Nový řádek
Prohlížeč se neřídí konci řádku v textovém souboru, ale je potřeba zadat tag <br>. Když na něj prohlížeč narazí, odřádkuje. Proto k němu neexistuje uzavírací tag.
Úkol: Řadky
Přidej do souboru index.html
za jména knížek tagy <br>.
A soubor ulož a v prohlížeči zkontroluj, jestli je teď každá knížka na vlastním řádku.
Oddělovač
Pokud
potřebujeme na stránce nějaké části vzhledově oddělit, můžeme použít
<hr> , který vykreslí vodorovnou dělící čáru. Tento tag je taky
nepárový, neuzavírá se.
Úkol: Oddělovač
Přidej do souboru index.html
za odstavec přidej tag <hr>.
Soubor ulož a v prohlížeči zkontroluj, jestli je za odstavcem oddělovač.
Formátování textu
Zobrazování části textu, tedy věty, slova a nebo jen písmena, můžeme pozměnit pomocí formátovacích tagů. Je jich vcelku hodně, tak si ukážeme jen ty asi nejpoužívanější.
Tučně, kurzívou, podtrženo nebo přeškrtnuto
- <b> tučně </b
- <i> kurziva </i>
- <u> podtrženo </u>
- <s>
přeškrtnuto</s>
Tyto tagy jsou základní pro formátování textu a můžou být i vnořeny do sebe, tedy můžeme mít i <b><i>tučnou kurzivu</i></b>. Všimni si, že uzavírací tagy jsou v opačném pořadí.
Úkol: Formát textu 1
Přidej do souboru index.html všechnu výše zmíněné tagy pro formátování do odstavce.
Soubor ulož a v prohlížeči zkontroluj, jestli se text měnil.
Tagy pro význam textu
Další
formátovací tagy mají zobrazit text dle jeho významu a často k tomu
použiji tučný text, kurzivu a podobně. Dle mě jejich využití záleží na
tom kdo stránky píše a jestli mu to dává smysl. Ale jsou zde i nějaké
užitečné hračky.
- <bdo dir="rtl"> Pozpátku </bdo>
- <blockquote cite="http://www.worldwildlife.org/who/index.html"> Citovaný odstavec </blockquote> nebo <q>
krátká citace
</q> - <cite> úvod </cite>
- <code> programový kód </code>
- <del>
smazáno</del> <ins> vloženo </ins> - <kbd> Ctrl + c </kbd>
- <mark> zvíraznění </mark>
- <meter id="disk_c" value="2" min="0" max="10">
2 z 10 2 z 10</meter> - <pre> Předformátovaný text </pre>
- <progress id="file" value="32" max="100"> 32% </progress>
- <small> malý text </small>
- <strong> zdůraznit </strong>
- <sub> dolní index </sub> <sup> horní index </sup>
Seznamy
Pokud potřebujeme přehledně zobrazit jednodušší data, můžeme použit seznamy, ty data zobrazují takzvaně stromově a nebo s odsazením. Každá položka je na novém řádku a má většinou i před položkou nějakou odrážku a nebo číslo či písmeno.
Neseřazený seznam
Začíná tagem <ul> (unordered list) a končí </ul>. Jednotlivé položky seznamu pak jsou uzavřeny tagem <li> </li>.
|
<ul>
<li>Červená</li>
<li>Modrá</li>
<li>Zelená</li>
</ul>
|
Vnořené seznamy
Pokud chceme přidat odsazený podseznam, vložíme do tag <li> </li> další seznam s tagy <ul> </ul>.
|
<ul>
<li>Volkswagen koncern</li>
<ul>
<li>Volkswagen</li>
<ul>
<li>Golf</li>
<li>Passat</li>
</ul>
<li>Škoda</li>
<ul>
<li>Fábie</li>
<li>Oktávie</li>
<li>Superb</li>
</ul>
<li>Seat</li>
<li>Audi</li>
</ul>
<li>Stellantis</li>
<ul>
<li>Pegueot</li>
<ul>
<li>2008</li>
</ul>
<li>Opel</li>
</ul>
</ul>
|
Úkol: Seznam knížek
V souboru index.html máme seznam knížek, kde každá je na novém řádku. Udělej z tohoto seznamu html seznam.
Soubor ulož a v prohlížeči zkontroluj, jestli se text měnil.
Číslovaný seznam
Začíná
tagem <ol> (ordered list) a končí </ol>. Jednotlivé
položky seznamu pak jsou uzavřeny tagem <li> </li>. Místo odrážek jsou jednotlivé položky číslované.
|
<ol>
<li>Červená</li>
<li>Modrá</li>
<li>Zelená</li>
</ol>
|
Obrázky
Další objekt který můžeme na stránce zobrazit je obrázek. K tomu slouží tag <img> jako image obrázek. Tento tak má i parametry neboli atributy. Nejdůležitějším je atribut src, kterým nastavíme cestu k obrázku, aby toto fungovalo pro všechny, musí být obrázek přístupný z internetu na nějakém webovém serveru.
Úkol: Odkaz na obrázek
Zadej ve vyhledávači obrázku, například www.google.com a nebo lépe vyhledávač obrázku zdarma https://search.creativecommons.org/. Hledej například "book png" pomocí "Google Images". Obrázek si ulož do složky pictures v www, kde máš index.html soubor.
Například https://commons.wikimedia.org/wiki/File:Black_open_book.png
Obrázek si ulož do složky pictures v www, kde máš index.html soubor.
Cesta k obrázku
Cestu
můžeme zadat na nějaký soubor na disku, ale pak nepůjde zobrazit z
internetu. Pokud je obrázek uložen na stejném místě (serveru) jako
stránka, může se použit cesta relativní. Pokud je obrázek jinde na
internetu, je potřeba použit úplnou adresu, takzvanou URL.
- <img src=C:\www\pictures\book.png>
- <img src=pictures/Black_open_book.png>
- <img src=https://upload.wikimedia.org/wikipedia/commons/1/1f/Black_open_book.png>
Alternativní text
<img src=pictures/Black_open_book.png alt="Black open book">
Rozměry
U obrázku se nám budou hodit atributy width (šířka) a height (výška), tyto se zadávají v bodech (pixelech).
<img src=pictures/Black_open_book.png alt="Black open book" width=200 height=150>
Úkol: Přidej obrázek na stránku
V souboru index.html přidej tag img před nadpis knihovnička. Použij tuto cestu src="https://upload.wikimedia.org/wikipedia/commons/1/1f/Black_open_book.png" a rozměry width=200 height=150 .
Soubor ulož a v prohlížeči zkontroluj, jestli se text měnil.
Odkazy
Odkazy dělají Internet Internetem, umožňují mám otevřít další stránky ať už ze stejného serveru, nebo úplně jiného. Tag pro odkaz je <a> </a> , kde text který vidíme podtržený jako link neboli odkaz je mezi tagy a vlastní URL adrese cílové stránky je zadaná jako atribut nebo parametr href= v tagu <a>. Hodnota parametru musí být v uvozovkách.
Můžeme
odkazovat na celý web, pak se otevře jeho index.html, nebo přímo na
stránku na nějakém webu, nebo použít tak zvanou relativní cestu ke
stránce na témže webu a nebo odkaz na místo na téže stránce na kotvu. Ta
začíná znakem #. Její cíl určíme atributem id="kapitola6" v názvu
kapitoly 6. A pokud dáme do tagu <a> obrázek, bude odkazem celý
obrázek.
Pokud bychom chtěli, aby se odkaz otevřel v novém okně nebo záložce, poslouží nám k tomu atribut target="_blank".
Úkol: Vytvoř stránku prasina.html
Abychom
se mohli na nějaké stránky našeho webu Knihovnička odkazovat, musíme si
vytvořit další stránky a to konkrétně pro každou knihu jednu.
Ve
složce www vytvoř kopii souboru index.html a přejmenuj ho na
prasina.html. (Nebo tvůj název knihy bez mezer a diakritiky.) Otevři ho v
textovém editoru.
Hlavičku až po nadpis <h1>Knihovnička</h1> necháme stejný.
- Pak přidáme podnadpis se jménem knížky <h2>Prašina</h2>
- A na další řádek jako nadpis h3 přidáme <h3>Autor: Vojtěch Matocha</h3>
- Pak přidej nadpis <h4>Popis:</h4>
- A ještě jeden za tag <hr> <h4>Další knihy</h4> nad seznam knih.
- V seznamu knih tyto přepiš za další knihy stejného autora. Ty si najdi na internetu. Položek můžeš ubrat i přidat.
Soubor ulož a v prohlížeči zkontroluj.
Odkaz na knihu
Máme jednu stránku knihy, tak do index.html si na ni uděláme odkaz.
Úkol: Odkaz na knihu
V textovém editoru si otevři soubor index.html a - V seznamu knih, přidej před slovo Prašina tag <a href="prasina.html">
- Za slovo Prašina přidej koncový tag </a>
Stránky dalších knih si vytvoříme až později.
Tabulky
Další způsob jak zobrazit na webové stránce informace je tabulka, tu je možno využít i k rozmístění různých prvků na stránce. Celá tabulka je v tagu <table> </table>. Dovnitř pak vložíme tag <thead> </thead> pro hlavičku tabulky s nadpisy sloupců. V tomto tagu pak bude tag <tr> </tr> pro řádek a v něm, pak budou tagy <th> </th> s názvy sloupců.
Další řádky tabulky budou v za tagem </thead> v tagu <tbody> </tbody>. Zde pak bude několik tagů <tr> </tr> pro každý řádek tabulky. A data pak zde budou v tazích <td> </td>.
<table>
<thead>
<tr>
<th>Název</th>
<th>Autor</th>
<th>Rok</th>
</tr>
</thead>
<tbody>
<tr>
<td>Babička</td>
<td>Božena Němcová</td>
<td>1855</td>
</tr>
<tbody>
</table>
| Název | Autor | Rok |
|---|---|---|
| Babička | Božena Němcová | 1855 |
Vzhled a vlastnosti tabulky si upravíme , až si budeme povídat o CSS a stylech.
Úkol: Tabulka knih
V textovém editoru si otevři soubor index.html a přidej za seznam knih tabulku, která bude mít sloupce Název, Autor a Rok. A vlož do této tabulky všechny knihy ze seznamu a dohledej si k ním údaje. Pro první knihu vlož název knihy jako link s tagem <a>.
Komentáře
Pokud chceme do stránky přidat něco, co se nebude zobrazovat, můžeme k tomu použit tag <!-- --> pro komentář. Vše uvnitř se nezobrazí.
Úkol: Zakomentuj seznam
V
textovém editoru si otevři soubor index.html a přidej tag komentáře okolo seznamu knih.
Soubor ulož a zkontroluj v prohlížeči, seznam knih už by neměl jít vidět.
CSS
CSS jsou takzvané kaskádové styly a umožňují nám nastavit jednotný vzhled různých částí na stránce nebo celém webu. Když pak něco potřebujeme změnit, změníme to jen na jednom místě, například barvu či font nadpisu a nebo pozadí stránek.
Styl můžeme zadat přímo v tagu do atributu style="color: red" nebo v tagu <style> </style> v hlavičce stránky a nebo ve vlastním souboru style.css. Na tento soubor pak ukazuje v hlavičce tag <link rel="stylesheet" href="style.css">
style
Tag <style> </style> se přidává do hlavičky, do tagu <head> </head>. Na co se bude který styl aplikovat určuje selector. Často je stejný jako tag, například h3 , body , p. Styl pro konkrétní selector se pak zapisuje do složených závorek ve tvaru atribut a hodnota, například color: green; . Oddělovačem je středník.
<style>
p {
text-align: center;
color: red;
}
</style>
Typy Selektorů
tag
id
class
ID selector aplikuje styl na jeden tag, který má dané id, např <h3 id=”subtitle33”> . V tagu <style> se označuje znakem #.
#subtitle33 {
color: red;
}
Podobně jako id, může mít tag nastaven atribut class="description" a v <style> se před název třídy dá tečka. class můžeme použit na více místech, id jen jednou.
.description {
background-color: grey;
}
Sdružení selectorů
Selectory, kde chceme zadat stejné atributy, můžeme združovat tak, že je napíšeme za sebe a oddělíme čárkou.
h1, h2 {
text-align: center;
color: red;
}
Komentáře
Do stylů můžeme vložit i komnetáře, abychom si poznamenali, k čemů daný styl je. Komentář je ohraničen znaky /* */.
p
{
color: red;
/* Set text color to red */
}
Úkol: Styl pro index
V textovém editoru si otevři soubor index.html a přidej tag <style> </style> do hlavičky.
- Nastav barvu pro body na lightyellow.
- Pro tag h1 nastav barvu textu na green.
- Do tagu odtavce <p> přidel atribut třídy s hodnotou description.
- Nastav barvu třídy description na blue.
Soubor ulož a zkontroluj v prohlížeči, Nadpis bude zelený, text modrý a pozadí světle žluté.
Atributy
Existuje spousta atributů, tak si ukážeme jenom ty základní, ostatní pak najdete v dokumentaci html nebo css tutoriálu.
Barvy
Pro barvu máme atributy color a background-color . Vlastní barvu pak můžeme zadat jedním ze 140 jmen ,nebo RGB rgb(Red, Green, Blue) či hexadecimální hodnotou. Například takto color:DarkBlue a nebo color:rgb(0,0,139) či color:#00008B .
Fonty
Písmo můžeme ovlivnit několika atributy.
- Rodina fontu - font-family:
- Patkové - Serif
- Bez patkové - Sans-serif
- Neproporcionální - Monospace
- Kurziva - Cursive
- Fantasy - Fantasy
- Font - font:
- styl velikost family
- Obecné názvy fontů - Arial, Verdana, Tahoma, Trebuchet MS, Times New Roman, Georgi, Garamond, Courier New, Brush Script MT
- Styl - font-style:
- normal - normal
- kurziva - italic
- šikmé - oblique
- Šířka - font-weight:
- normal - normal
- tučné - bold
- Varianta - font-variant:
- normal - normal
- malé velké - small-caps
- Velikost - font-size:
- v bodech - např 20px
- Em (poměr k výchozí velikosti písma) - 2em
- výchozí 1em = 16px
- %, vw, .....
U názvu fontu či rodiny fontu můžeme použit více hodnot zasebou, prohlížeč pak použije první který zná, např. font-family:"Times New Roman", Times, serif; .
Úkol: Soubor stylů
V textovém editoru si vytvoř nový soubor styles.css a z index.html tam zkopíruj to co máš v tagu <style> </style>, ale bez tohoto tagu.
V souboru index.html smaž celý tag <style> </style> i s jeho obsahem. A nahraď ho tagem <link> s atributy pro soubor stylů.
<link rel="stylesheet" href="styles.css">
Soubor ulož a zkontroluj v prohlížeči, Nadpis bude zelený, text modrý a pozadí světle žluté.
Úkol: Styl i pro knihy
V
textovém editoru si otevři soubor prasina.html a do hlavičky přidej tag <link> jako u indexu.
<link rel="stylesheet" href="styles.css">
Soubor ulož a zkontroluj v prohlížeči kliknutím na odkaz Prašina z hlavní stránky.
...
Soubor asi bude vypadat, že se tam žádný styl neaplikoval. A to proto, že soubor styles.css není ve složce books. Proto budeme muset tag <link> upravit a přidat před název souboru ../ , což znamená cestu do nadřazené složky.
<link rel="stylesheet" href="../styles.css">
Soubor prasina.html znovu ulož a zkontroluj v prohlížeči kliknutím na odkaz Prašina z hlavní stránky. Teď už by nějaké styly měly být použity.
Úkol: Odkaz domů
Trochu nepohodlné je, že ze stránky knížky se na hlavní stránku dostaneme jen šipkou zpět a to jen v případě, že jsme se tam odtud dostali. Tak si přidáme na obrázek knížky a na nadpis Knihovnička odkaz na hlavní stránku.
- V souboru prasina.html dej před tag <img> tag <a href="../index.html">
- Ukončovací tag dej až za tag </h1><a/>
Soubor prasina.html ulož a znovu načti v prohlížeči, nadpis by měl být podtržen jako odkaz a i nad obrázkem knihy se ti myš zobrazí jako ruka, což znamená, že je to odkaz. Klikni na knihu.
Úkol: Styl tabulky
Tabulka se seznamem knih nemá viditelné okraje, tak ji přidáme nějaký styl, ať to lépe vypadá.
V souboru styles.css přidej nakonec styl pro tabulku.
table, th, td {
border: 1px solid;
border-collapse: collapse;
padding: 10px;
}
th {background-color: lightgrey;}
tr:hover {background-color: coral;}
Pokud chceš, přidej si pro stránky další styly. Například font-family a podobně.
Úkol: Další knihy
- Zkopíruj, ve složce books, soubor prasina.html do nových souborů babicka.html, hp.html, peskocka.html.
- V souboru index.html přidej v tabulce knih odkazy na tyto nové soubory.
- Uprav obsah souborů babicka.html, hp.html, peskocka.html, tak aby v nich byly správné údaje ke knihám.
Pomocné odkazy:
