HTML tagy, ktoré musíš poznať! #2

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>
				
			

Môj facebook

Tag pôsobí ako link. Opäť, ak by sme nezadali atribút href, prehliadač by nevedel, na ktorú stránku má presmerovať. Máme tam ale ešte aj nejaký target. To je tiež atribút. Vidíme teda, že jeden HTML tag môže mať viacero atribútov. Niektoré atribúty môžeme považovať za povinné. V tomto prípade napríklad „href“. Bez „href“-u je nám link k ničomu, lebo nebude nikde smerovať. Teda taký link by ani nemal význam (v skutočnosti sa používajú aj takéto linky bez „href“, avšak len v kombinácií s javascriptom, to už je trošku vyššia mágia). 

Č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:

  1. Telefónicky si objednajte tovar
  2. Počkajte na SMS potvrdenie
  3. Dostavte sa na odberné miesto pre svoj tovar
  4. 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“:

  1. Telefónicky si objednajte tovar
  2. Počkajte na SMS potvrdenie
  3. Dostavte sa na odberné miesto pre svoj tovar
  4. 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:

  1. Telefónicky si objednajte tovar
  2. Počkajte na SMS potvrdenie
  3. Dostavte sa na odberné miesto pre svoj tovar
  4. 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:

  1. Telefónicky si objednajte tovar
  2. Počkajte na SMS potvrdenie
  3. Dostavte sa na odberné miesto pre svoj tovar
  4. 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. 

Pozrite aj

Migrácia do Host creators

Hovorím to so slzou na krajíčku… ale poslednú dobu (čiže asi pol roka) šiel Websupport totálne dole vodou. Všetko, až na jedno – ceny. Tie

Chcem webstránku. Abo čo. Abo jak.

Problémom mnohých klientov je to, že nevedia, čo chcú. Preto v tomto článku opíšem, čo všetko je potrebné riešiť ešte pred začiatkom spolupráce. Čím viac

50 odtieňov odžubu

Dobre bráško. Už ma to nebaví. Aby si vedel, ako sa vyhnúť podvodom, musíš najprv vedieť, ako sa veci majú a ako fungujú. Potom nenaletíš…