V minulom článku sme si ukázali základné HTML tagy na úpravu textu. V dnešnom článku niečo pridáme a skúsime si urobiť zoznamy a video.
Atribúty
Život by bol veľmi krásny a jednoduchý, množstvo HTML tagov však môže obsahovať aj vlastnosti, iným slovom „Atribúty“. Atribúty slúžia na spresnenie funkcionality daného tagu. Zapisujú sa do začiatočnej HTML značky s medzerou. Vo väčšine prípadov potom nasleduje značka = a do úvodzoviek ide daná vlastnosť. Šalamúnsky napísané, tak si to ukážme na príklade.
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://www.lavadesign.sk/wp-content/uploads/2022/12/cropped-logo.png"><noscript><img decoding="async" src="https://www.lavadesign.sk/wp-content/uploads/2022/12/cropped-logo.png"></noscript>
Ako vidíme, HTML tag <img> (nepárový tag) znamená obrázok (z anglického „Image“). Ak však zadáme len samotné <img>, nestane sa vôbec nič. Prehliadač totiž nebude vedieť, ktorý obrázok má zobraziť. Musíme mu to teda povedať, k tomu použijeme atribút src. Do úvodzoviek potom zadáme webovú adresu obrázka. Takto prehliadač vie, že má zobraziť obrázok, ktorý sa nachádza na tejto adrese. Každý jeden obrázok má vlastnú unikátnu URL, nemôže sa stať, že by boli dva obrázky na jednej adrese, takže vždy sa zobrazí ten obrázok, na ktorý smeruje URL zadaná v src=““. Tým sme využili atribút src pre tag img. Jasné? 🙂
Skúsime ešte iný príklad, s párovým tagom. Skúste si kliknúť 😉
<a href="https://www.facebook.com/lavadesignsk" target="_blank" rel="noopener noreferrer">Môj facebook</a>
Čo robí teda ten „target“? Ak mu dáme hodnotu _blank, link sa otvorí v novom okne (alebo novej karte). Ak mu nedáme tento atribút, alebo mu dáme hodnotu _self otvorí sa na aktuálnej karte.
Na záver tejto „náuky o atribútoch“ ešte spomeniem, že každý tag má vlastné atribúty, niektoré majú spoločné, iné nie. Atribút src používajú okrem obrázkov ešte napríklad aj video a script. Tag <a> zas ako jediný používa atribút target.
Vnorené tagy
Jednotlivé HTML tagy vieme do seba samozrejme aj zanoriť a využívať tak na jednom kúsku textu rozličné funkcionality.
<b><u>Tento text bude hrubý a zároveň podčiarknutý</u></b>
Tento text bude hrubý a zároveň podčiarknutý
Alebo vieme prípadne zanoriť obrázok do linku. Skúste si kliknúť na obrázok nižšie, čo sa stane.
<a href="https://www.facebook.com/lavadesignsk" target="_blank" rel="noopener noreferrer"><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://www.lavadesign.sk/wp-content/uploads/2022/12/cropped-logo.png"><noscript><img decoding="async" src="https://www.lavadesign.sk/wp-content/uploads/2022/12/cropped-logo.png"></noscript></a>
Treba vždy dávať pozor, aby sa jednotlive tagy zatvárali v takom poradí, v akom sa otvárajú. V prípade, že tak neurobíme, WordPress automaticky tieto chyby opraví. Je to proste pan 🙂
Zoznamy
Ako bežný užívateľ WordPressu sa stretnete prakticky s dvoma druhmi zoznamov.
ul – Unordered list – nečíslovaný zoznam
ol – Ordered list – číslovaný zoznam
li – Položka v zozname
Rozdiely sú hádam jasné. <ul> bude robiť len odrážky a <ol> bude dávať automaticky čísla. Vnútri <ul> a <ol> budeme pre každú položku používať tag <li>. <li> je pritom tiež nepovinne párový tag, ale všetci ho za tie roky berieme ako párový.
Príklad:
Číslovaný zoznam:<br>
<ol>
<li>Telefónicky si objednajte tovar</li>
<li>Počkajte na SMS potvrdenie</li>
<li>Dostavte sa na odberné miesto pre svoj tovar</li>
<li>Zaplaťte výlučne kartou</li>
</ol>
Nečíslovaný zoznam: <br>
<ul>
<li>Mlieko</li>
<li>Chlieb</li>
<li>Jogurt</li>
<li>Nugeta</li>
</ul>
Číslovaný zoznam:
- Telefónicky si objednajte tovar
- Počkajte na SMS potvrdenie
- Dostavte sa na odberné miesto pre svoj tovar
- Zaplaťte výlučne kartou
Nečíslovaný zoznam:
- Mlieko
- Chlieb
- Jogurt
- Nugeta
V číslovanom zozname <ol> môžeme použiť niekoľko atribútov. Možno sa vám niekedy pridajú:
reversed – obráti čísla od najväčšieho po najmenšie.
start – zadáte číslo, od ktorého má začať číslovanie (nie vždy totiž musí začínať od 1.)
type – spôsob číslovania. Povolené hodnoty sú 1,A,a,I,i. Defaultne (čiže ak nezadáte tento atribút) platí 1. Čiže normálne arabské čísla. A/a bude sa číslovať prostredníctvom písmen abecedy. Veľkými, alebo malými, ako zadáte. I/i bude sa číslovať rímskymi číslami. Veľkými, alebo malými.
Číslovaný zoznam s obráteným číslovaním pomocou atribútu "reversed":<br>
<ol reversed>
<li>Telefónicky si objednajte tovar</li>
<li>Počkajte na SMS potvrdenie</li>
<li>Dostavte sa na odberné miesto pre svoj tovar</li>
<li>Zaplaťte výlučne kartou</li>
</ol>
Číslovaný zoznam s obráteným číslovaním pomocou atribútu „reversed“:
- Telefónicky si objednajte tovar
- Počkajte na SMS potvrdenie
- Dostavte sa na odberné miesto pre svoj tovar
- Zaplaťte výlučne kartou
Číslovaný zoznam so začiatkom od čísla 13:<br>
<ol start="13">
<li>Telefónicky si objednajte tovar</li>
<li>Počkajte na SMS potvrdenie</li>
<li>Dostavte sa na odberné miesto pre svoj tovar</li>
<li>Zaplaťte výlučne kartou</li>
</ol>
Číslovaný zoznam so začiatkom od čísla 13:
- Telefónicky si objednajte tovar
- Počkajte na SMS potvrdenie
- Dostavte sa na odberné miesto pre svoj tovar
- Zaplaťte výlučne kartou
Číslovaný zoznam s rímskymi číslami:<br>
<ol type="I">
<li>Telefónicky si objednajte tovar</li>
<li>Počkajte na SMS potvrdenie</li>
<li>Dostavte sa na odberné miesto pre svoj tovar</li>
<li>Zaplaťte výlučne kartou</li>
</ol>
Číslovaný zoznam s rímskymi číslami:
- Telefónicky si objednajte tovar
- Počkajte na SMS potvrdenie
- Dostavte sa na odberné miesto pre svoj tovar
- Zaplaťte výlučne kartou
Môžeme si všimnúť, že atribúte „reverse“ je bezhodnotový atribút. Proste za ním nenasleduje rovná sa, ani hodnota. Samotné slovíčko „reverse“ spôsobí obrátenie poradia v číslovaní a nemáme dôvod tomu ešte dávať nejakú hodnotu. V starších zápisoch sa môžeme stretnúť so zápisom
<ol reversed=“reversed“>
Samozrejme, funguje aj tento spôsob, ale načo písať o slovíčko viac, keď sa to správa navlas rovnako… ?
Podobný atribút existuje vo formulároch, volá sa „required“, označíme ním vstup, ktorý užívateľ musí vyplniť, inak nemôže odoslať formulár. Pri zaškrtávacích políčkach poznáme ešte atribút „checked“, ktorý spôsobí, že políčko bude pri zobrazení formulára už zaškrtnuté. Existuje ešte pár podobných atribútov, tie sú ale pre nás teraz nepodstatné.
Video
Na záver si urobíme video. Slúži na to úplne nečakane tag s názvom <video >. Asi Vám už dôjde, že budeme potrebovať atribút, aby sme prehliadaču povedali, ktoré video má zobraziť. Priznám sa, že tag <video> používam zriedka, a tak z hlavy nepoznám ani jeho parametre. Kliknem si teda tu a pozriem sa, čo všetko môžeme v rámci tagu <video> použiť.
autoplay – Ak máme tento atribút, video sa spustí po načítaní automaticky
controls – zobrazí ovládacie tlačidlá (Play/Pause, nastavenie hlasitosti a pod.)
loop – nastaví slučku, teda či sa video bude cyklicky opakovať, alebo sa prehrá len raz do konca.
muted – stlmí zvuk
poster – nastaví obrázok, ktorý sa zobrazí namiesto videa, kým sa video v pozadí načíta
src – link na video uložené na serveri
Poďme si to teda nastaviť
<video controls loop>
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
Tento text sa zobrazí, ak používate predpotopný prehliadač (čiže Internet Explorer), ktorý v roku 2021 ešte stále nepozná HTML5 tag video.
</video>
Použitie video tagu je trošku horšie, ako sme zvyknutí. Vnútri sa totiž nachádza iný tag <source>. Atribút src je zdroj videa, čiže jeho URL adresa. Musíme však ešte nastaviť typ. V tomto prípade linkujeme na video vo formáte mp4 a tak musíme nastaviť aj atribút type. Tieto „konštanty“ si vždy treba vygoogliť, lebo pamätať si ich je zbytočné.
No a náš video výsledok vyzerá takto:
Nabudúce si ukážeme polomajstrovstvo v HTML – tvorbu tabuliek. Tešíte sa? Ja veľmi.
