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.
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
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.
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? 🙂
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
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.
