HTML tagy, ktoré musíš poznať!

Aj bežný užívateľ WordPressu sa skôr či neskôr stretne s obmedzenosťou integrovaného TinyMCE editora. HTML tagy sú veci, ktoré Vám pomôžu. A nie je ani obzvlášť ťažké sa s nimi naučiť robiť. Aspoň s tými základnými.

Prečo vlastne?

V živote sa stretávame s rozličnými problémami, kedy nepostačuje vstavaná funkcionalita integrovaného WordPress editora. Malá znalosť jazyka HTML nám môže krásne pomôcť a „zachrániť nás“ pred inštaláciou devedesiatého deviatého pluginu, ktorý by túto funkcionalitu doplnil. 

Ako by ste bežne v editore napísali horný/dolný index? Ako by ste vytvorili tabuľku, či „zresponzivnili“ obrázok? 

Čo je HTML a ako funguje?

HTML je skratka pre Hypertext markup language, čo znamená Hypertextový značkovací jazyk. Programátori sa často rozčúlia, keď o sebe niekto tvrdí, že je HTML programátor, lebo HTML je jazyk značkovací a nie programovací. Neobsahuje v sebe žiadnu logiku, žiadne podmienky, žiadne cykly, proste nič, čo obsahuje ozajstný programovací jazyk. HTML slúži na značkovanie textu. Práve pre túto jeho jednoduchosť ho môže na svojej webovej stránke využiť každý. 

Html je možné písať do WordPress editora. Jednoducho v pravom hornom rohu editora prepneme z „Vizuálny editor“ na „Textový editor (HTML)„. Tým sa nám ukáže náš text, obohatený HTML značkami. A môžeme ísť na to. 

V Elementore je možné html písať prakticky všade, aj mimo editor. Teda aj napríklad do popisu, či nadpisu ikony, do obrázkového boxu, do nadpisu,… 

Základným prvkom v HTML je tzv. Značka (alebo „Tag„).  Tag je jedno, alebo viac písmen, ktoré sa píšu do špicatých zátvoriek. Takmer všetky HTML tagy sú párové, to znamená, že majú otvárací a zatvárací tag. Zatvárací tag sa líši od otváracieho tým, že má pred samotným tagom lomku. 

				
					<b> Toto je otvárací tag
</b> Toto je zatvárací tag
				
			

Keď teda máme kus textu, môžeme v ňom aplikovať HTML kód tak, že pred vybranú časť textu vložíme otvárací tag a na konci vybraného textu vložíme zatvárací tag. Každý tag má pritom inú funkcionalitu a robí s textom iné veci.  

Jednoduchý príklad

Najjednoduchšie tagy zrejme poznáte, ide o tagy <b> <i> a <u>. Rovnakú funkcionalitu, ako majú v HTML, majú aj vo Worde. 

B – z anglického Bold – urobí text hrubším

I – z anglického Italic – urobí text kurzivou

U – z anglického Underline – podčiarkne text 

Keď teda máme jednoduchý text a jeho časti uzavrieme medzi tieto HTML tagy

				
					<b>Lorem ipsum dolor</b> sit amet, <i>consectetur adipiscing</i> elit. <u>Vestibulum maximus</u> magna id augue ultricies, quis cursus ex dapibus. 
				
			

Dostaneme takýto výstup: 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum maximus magna id augue ultricies, quis cursus ex dapibus.

Všimnime si, že časť textu medzi <b> a </b> je hrubým písmom, časti medzi <i> a </i> sú kurzivou a medzi <u> a </u> sú podčiarknuté. Proste tag označuje miesto v texte, od ktorého začína platiť dané pravidlo a toto pravidlo platí až po ukončovací tag. Preto keď zabudneme na uzatvárací tag, dané pravidlo sa bude aplikovať až do konca textu. 

Ďalšie jednoduché tagy

Ďalšie tagy, ktoré by ste ako bežný užívateľ WordPressu mohli poznať, sú:

br – zlom riadku – vytvorí nový riadok. Nepárový tag.

p – odsek – vytvorí nový odsek. Pôvodne bol nepovinne párový, ale všetci s ním pracujeme ako s párovým. 

Že je <br> nepárový tag, to znamená asi toľko, že existuje len otvárací tag. Dôvod je jednoduchý, keď označíme zlom riadku, tak je tam proste zlom riadku. Keď chceme ďalší riadok, napíšeme jednoducho zas <br>. Nie je proste možné ukončiť nový riadok. 

				
					Tu<br>
bude<br>
každé<br>
slovo<br>
na<br>
novom<br>
riadku.
				
			

Vyzerať to bude asi takto:

Tu
bude
každé
slovo
na
novom
riadku.

Problémom vo WordPresse je to, že on už tie riadky a odstavce robí pomocou editora automaticky. A navyše ich ani negeneruje do HTML kódu editora. Je to dvojsečný meč. Na jednej strane to tam „nezavadzia“, na druhej strane to môže robiť problémy. 

Ak v editore stlačíte ENTER, (tu stláčam ENTER)

jednoducho sa vloží nový <p> tag. Čiže nový odstavec. Pod ním bude nejaká medzera, ako to je bežné medzi odsekmi. 

Ak však chcete vložiť nový riadok bez nového odstavca, jednoducho stlačte SHIFT+ENTER. (Tu stláčam SHIFT + ENTER) 
A vloží sa nový riadok. Alebo použijete html značku <br>.

Verím, že vidíte ten rozdiel medzi <br> a medzi <p>. 

Indexy

Často pri e-shopoch, či stavebných stránkach, potrebujeme napísať index. Napríklad metre štvorcové, metre kubické, alebo čokoľvek iné. V bežnom editore máme problém. 

Použijeme tieto html tagy, do ktorých uzavrieme index. 

sup – vytvorí horný index

sub – vytvorí dolný index

Mnemotechnická pomôcka je, že b ma bruško dole a teda ním urobíme dolný index a p má bruško hore, teda ním urobíme horný index. Jednoduché, nie? 🙂 

				
					Rozmer pozemku: 600 m<sup>2</sup><br>
Objem šachty: 5 m<sup>3</sup><br>
Priemerná rýchlosť: v<sub>priem.</sub>
				
			

Výsledok:

Rozmer pozemku: 600 m2
Objem šachty: 5 m3
Priemerná rýchlosť: vpriem.

Úpravy textu

Okrem b i a u existuje ešte niekoľko tagov, ktoré sa dajú použiť na úpravu textu

big – zväčší písmo o pár percent

small – zmenší písmo o pár percent. 

Tieto dva tagy sú už zastaralé a ich používanie sa neodporúča, boli v HTML 4. Každopádne fungujú aj v HTML 5 (čo je vlastne aktuálna verzia), aj keď už sú väčšinou riešené cez CSSko, teda dá sa nastaviť, na koľko % má zväčšiť, či zmenšiť jeden z týchto tagov. V bežnom živote ich môžeme smelo používať, určite kvôli tomu nevybuchne Fukušima, takže žiadne strachy.

s – preškrtne písmo

strike – absolútne to isté ako tag <s>

Preškrtnuté písmo sa hodí hocikedy. Na e-shopoch keď dáme zľavu a starú cenu tam necháme a preškrtneme, aby užívateľ videl, koľko pôvodne stál tovar. Alebo keď napíšeme nejaký článok a časom v ňom niečo opravíme, môžeme nechať preškrtnutú pôvodinu, aby bolo zrejmé, čo sme opravili. 

				
					Toto je normálne písmo<br>
<big>Toto je veľké písmo</big><br>
<small>Toto je malé písmo</small><br>
<s>Toto je preškrtnuté písmo</s>
				
			
Toto je normálne písmo
Toto je veľké písmo
Toto je malé písmo
Toto je preškrtnuté písmo

Dnes teda asi toľko. V budúcom článku si ukážeme ďalšie HTML tagy, ktoré sa môžu pridať a tiež si predstavíme vlastnosti HTML tagov, tzv. atribúty. 

PS: Ak sa chcete beztrestne pohrávať s HTMLkom, môžete na to použiť trebárs online editor, napríklad na w3school.

Najnovšie články

Ako sa správne pýtať?

Neviete, prečo sa na mojej stránke nedá prihlásiť do administrácie? Prečo mi nepodčiarkuje aktívnu položku menu? Ako urobím, aby footer bol čierny a nie biely?

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

Nové projekty

Pure Slovakia

Konečne projekt, v ktorom som sa naozaj vyžil. Ako milovník prírody (skrachovaný biológ), lesov, stromov, ihličia i machu, som bol oslovený týmto občianskym združením za

Farnosť Svit

No ako by to bolo, ak by som nevytvoril webovú stránku aj pre svoju domovskú farnosť? Doteraz webová stránka riešená na webnode, odteraz vysokokvalitná webstránka

Ave Prosperita

Zložitejšia webová stránka, s rozličným obsahom, vlastnými typmi príspevkov a doplnkovými poliami. Okrem klasických blogových článkov je na stránke aj manažér udalosti a aj vlastné

Táto webstránka používa súbory cookies