Protože jsou pro psaní HTML potřeba některé méně obvyklé znaky, máš na stole pomůcku pro jejich nalezení na klávesnici. Spoustu z nich už asi znáš, ale pro jistotu je máš takto po ruce.
Na české klávesnici je zásadní klávesa AltGr, s kterou napíšeš většinu znaků.
Pokud se k tobě výtisk z nějakého důvodu nedostal, můžeš si stáhnout PDF s klávesnicí a vytisknout si ji sama.
HTML není programovací jazyk: nejde v něm programovat, nemá žádné proměnné ani cykly.
HTML (Hyper Text Mark-up Language) je jazyk značkovací. Definujeme s jeho pomocí význam částí dokumentu, a to pomocí značek, anglicky tagů.
HTML budeme psát ve verzi 5, která má v současnosti velmi dobrou podporu v běžně používaných prohlížečích.
<názevtagu>
Obsah tagu
</názevtagu>
Tag se skládá ze špičatých závorek a názvu tagu mezi nimi.
Většina tagů je párových: první tag je otevírací a druhý zavírací a liší se jen lomítkem za první špičatou závorkou.
Mezi tagy je jeho obsah, tedy to, co obaluje. To může být obyčejný text nebo další tag či tagy.
Existují i nepárové tagy, k nim se dostaneme za chvíli, ale není to věda, prostě jen nemají uzavírací tag.
Každý HTML dokument má mít základní strukturu.
<!DOCTYPE HTML>
<html>
<head>
<!-- vlastnosti stránky -->
</head>
<body>
<!-- samotný obsah stránky -->
</body>
</html>
Úplně první je tzv. doctype. Říká prohlížeči, jakou verzi HTML má čekat. Tenhle je pro HTML 5 a není potřeba se jím více zabývat. Hlavně ho tam vždy měj.
Všechno ostatní je uvnitř tagu html. Říkáme také, že je vše obaleno tagem <html>.
V hlavičce (<head>) se definují vlastnosti pro celou stránku. Většinou „nejsou vidět“.
V těle stránky (<body>) se definuje vlastní obsah stránky, texty, obrázky atd. Většinou „je vidět“.
Všimni si odsazení. Na rozdíl od Pythonu není odsazování nutné pro fungování, ale dodržuj ho, kód bude pro tebe přehlednější.
Všimni si komentářů, vše mezi <!-- a --> nebude mít na výslednou stránku žádný vliv.
Tagů je přes stovku, ale na většině webů si vystačíš se znalostí zlomku z nich.
Jedním z nejčastěji používaných tagů je odstavec textu. Podobně jako u jiných, je jeho název zkratkou anglického slova: p jako paragraph.
<p>
PyLadies jsou (mezinárodní) aktivita,
která se snaží přiblížit IT ženám a
ženy k IT. K tomu využívá programovací
jazyk Python, který je perfektní pro
výukové účely a zároveň je po něm velká
poptávka na trhu práce.
</p>
Další základní tagy, které se používají pro strukturování textu, jsou nadpisy. Mají 6 úrovní, proto za h (jako heading) je ještě číslo určující úroveň nadpisu od 1 do 6. h1 je nejvyšší úrovně a h6 nejnižší.
Obvykle je h1 na stránce jeden a je v něm název toho, o čem daná stránka je. Například v e-shopu na stránce s detailem produktu v něm bude název tohoto produktu. Na zpravodajském webu na stránce s článkem v něm zase bude titulek článku, apod.
<h1>Pyladies</h1>
<p>…</p>
<h2>Po kurzu máš možnost</h2>
<p>…</p>
<h3>Dál programovat</h3>
<p>…</p>
<h3>Stát se koučkou</h3>
<p>…</p>
Dodržuj pořadí nadpisů: nenech se svést tím, jak vizuálně vypadají (po h1 vždy nejprve h2, pak teprve h3)
Ke zdůraznění části věty používáme tag <em> (z anglického emphasized).
K vyznačení toho, co je důležité, pak <strong>.
V této větě ukazujeme <em>příklad</em>, jak použít zdůraznění.
Je <strong>naprosto nutné</strong>, aby to bylo jasné.
Nenech se zmást tím, že jedno se zobrazuje kurzívou a druhé tučně. To je jen výchozí zobrazení v prohlížeči. Podstatné pro to, který tag použiješ, je jeho význam. Vzhled si na konci dnešní lekce budeš umět změnit.
Odkaz je to, co z textu dělá hypertext, a pro web je to tedy jeden z nejdůležitějších tagů. Jeho název <a> pochází z anglického anchor. Anglicky je to také buď link nebo hyperlink.
<a href="https://www.google.com/">
nejlepší přítel
</a>
Protože někde musíme definovat nejen to, jaká část obsahu je odkazem, ale i kam ten odkaz vlastně vede, použijeme poprvé tzv. atribut. Obecně s pomocí atributů definujeme prohlížeči další data k tagu. V tomto případě se atribut jmenuje href a jeho hodnotou je to, co je v uvozovkách, tedy https://www.google.com/. Atributy se vždy píšou pouze do otevíracího tagu.
Mluvnická vsuvka: prosím nepoužívej pro odkaz slova jako prolink nebo proklik. První je bastard z korporací, který není daleko od paskvilů jako je dovykomunikovat. Druhý je zavedené slovo, které má ale jiný význam, používají ho lidé z reklamy, protože dnes se často na webu platí pouze za ty reklamy, na které uživatel klikne, a jako proklik se označuje právě ta akce.
Vím, že to takhle špatně říká spousta lidí a že to asi za pár let stejně v ÚJČ zahrnou do slovníku spisovné češtiny, ale mezi odborníky by se to dít nemělo.
První nepárový tag: nic neobaluje, pouze označuje místo, kam se vloží obrázek.
<img>
Je třeba doplnit cestu (URL) k obrázku pomocí atributu src. Zde linkujeme obrázek přímo z webu pyladies.cz.
<img src="http://pyladies.cz/static/img/icon/who.png">
Můžeš si ho ale stáhnout a umístit přímo do složky, kde máš index.html.
<img src="who.png">
Nebo vytvořit složku obrazky ve složce, kde máš index.html.
<img src="obrazky/who.png">
Všimni si, že stále používáme jen / a nikdy \.
alt je povinný atribut a je v něm textový popis obsahu obrázku pro ty, co ho nemohou z různých důvodů vidět: pro nevidomé, vyhledávače, uživatele s pomalým připojením.
<img src="http://pyladies.cz/static/img/icon/who.png" alt="PyLady">
Pokud obrázek nemá žádný smysluplný obsah (např. grafické prvky typu čára), alt se definuje jako prázdný řetězec: alt=""
Problém s obrázky na webu je, že jsou často datově dost velké, a jejich stahování tudíž trvá a taky třeba spotřebovává datové tarify. Proto se používají většinou ztrátové formáty, které vypadají pro lidské oko skoro stejně jako originály, ale datově jsou mnohem menší.
Nejčastěji se používají tyto:
Ne každý obrázek na internetu smíš použít, aby to bylo v souladu s právem. Přitom těch, které lze skoro libovolně použít, je spousta. Lze je hledat přímo na Google tak, že si pod „Nástroje“ / „Tools“ omezíš hledání na ty s právy k použití: jen nekomerční.
Zatím jsme se zabývali obsahem <body>, ale vraťme se ještě k obsahu <head>. Ten se „nezobrazuje“, zato obsahuje data, která ovlivňují vzhled a chování celé stránky.
Zobrazuje se na záložce v prohlížeči ‒ jediný z <head> je přímo vidět.
<head>
<title>Název stránky</title>
</head>
Protože je z titulku často vidět jen prvních pár znaků, je dobré to nejdůležitější dát první a teprve na konec třeba název webu: Staň se PyLady! – PyLadies
je lepší než PyLadies: Staň se PyLady!
, uživatelům se tak lépe orientuje.
Protože jsou ruzné způsoby, jakými jsou textové soubory kódovány, je potřeba prohlížeči pro jistotu říct, v jakém kódování je soubor napsaný. S největší pravděpodobností je tvůj soubor v kódování UTF-8. Je dobré definovat kódování jako první, v některých prohlížečích to zabrání špatnému zobrazení <title>
<head>
<meta charset="UTF-8">
<title>Název stránky</title>
</head>
V souboru s kódováním UTF-8 můžeš napsat v podstatě jakékoli znaky a všechny prohlížeče ho podporují, není tedy důvod používat jiné.