3. diel - Základné HTML tagy
V minulej lekcii, Štruktúra HTML stránky, sme si ukázali, ako vyzerá štruktúra HTML stránky a vytvorili sme si prvú stránku s krátkym textom.
Dnes si v HTML tutoriáli uvedieme základné HTML tagy a vytvoríme svoju prvú informačne hodnotnú stránku.
Odseky <p>
Minule sme pre zjednodušenie text vložili len tak do
<body>. V HTML by mal byť súvislý text ale ideálne
rozdelený do odsekov, ktoré označujeme tagom <p> (ako
anglicky paragraph). Tag <p> je párový a obaľuje
text, ktorý má vo vnútri odseku byť. Pred text teda píšeme tag
<p>, za textom odsek uzavrieme tagom </p>.
V predvolenom štylovaní sa pred a za odsekom potom vykreslia medzery a všetky
riadky odseku sa vypíšu na jeden riadok.
V našej stránke zmažeme text v <body> a namiesto neho
vložíme niekoľko odsekov:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>My First Website</title> </head> <body> <p>This is the first paragraph</p> <p>This is the first sentence of the second paragraph. This is the second sentence of the second paragraph</p> </body> </html>
Stránku uložíme a obnovíme okno prehliadača. Výsledok vyzerá takto:
Všimnite si, že odriadkovanie v HTML kóde nespôsobí odriadkovanie výsledného textu, viď ďalej.
Odsadzovanie
Pretože v <body> sú teraz vnorené
ďalšie tagy, rozpísali sme ho na niekoľko riadkov a jeho obsah odsadili
zľava o ďalšiu úroveň. Je tak krásne vidieť, aký tag je v ktorom
vnorený.
Kód samozrejme môžeme písať aj úplne hlúpo, napríklad väčšinu do jedného riadku:
<!DOCTYPE html> <html lang="en"><head> <meta charset="utf-8" /> <title>My First Website</title> </head> <body><p>This is the first paragraph</p><p>This is the first sentence of the second paragraph. This is the second sentence of the second paragraph</p></body> </html>
Určite ale vidíte, že nie je vôbec jasné, kam vkladať ďalšie značky a budeme ich tiež zabúdať uzatvárať alebo ich uzavrieme na zlom mieste. Preto píšeme elementy na samostatné riadky a každý vnorený element odsadíme zľava.
Odriadkovanie v HTML
Ako je vidieť, v HTML nehrá vôbec žiadnu rolu odriadkovania. Druhý odsek máme napísaný na 2 riadky, ale zobrazí sa ako jeden riadok. Prehliadač totiž prechod na nový riadok na stránke zobrazí len ako medzeru.
Tag <br>
Ak by sme z nejakého dôvodu chceli v odseku odriadkovať, využijeme
nepárový tag <br /> (ako line
break - koniec/zalomenie riadku). Vyzeralo by to nejako
takto:
<p>This is the first paragraph</p> <p>This is the first sentence of the second paragraph.<br /> This is the second sentence of the second paragraph</p>
Výsledok:
Častou chybou je používanie dvoch
<br /><br /> za sebou na oddeľovanie odsekov namiesto
tagu <p>, to je zle.
Zvýraznenie textu v HTML - Frázové tagy a nadpisy
Keď je nejaká časť textu dôležitá, oznámime to užívateľovi, prehliadaču a vyhľadávačom pomocou zvýrazňovacích tagov. Užívateľovi sa bude text lepšie čítať, vyhľadávače sa zas budú na dôležité časti textu viac sústrediť a naše stránky tak navštívia viac ľudí. Ide hlavne o tzv. frázové tagy a nadpisy. Frázy preto, že nám umožňujú v texte zvýrazniť nejakú frázu (časť). Na optimalizáciu webov pre vyhľadávače nielen pomocou zvýrazňovania sa potom sústredí tzv. SEO, o ktorom si tiež budeme priebežne niečo zmieňovať.
Kurzíva <em> a
tučný text <strong>
Text v tagu <em> (emphasis - zvýraznenie) sa
zobrazí ako kurzíva (italika). Ale to nie je všetko. Hovorili sme si, že
HTML slúži hlavne na definovanie významu. Text v
<em> sa berie ako dôležitý, internetové
vyhľadávače (napr. Google) sa oň potom zaujímajú viac, než o ostatný
text a na tieto kľúčové slová na naše stránky potom privedú viac
návštevníkov. Samozrejme ale nemôžeme urobiť celý text na stránke v
<em>, to by nemalo žiadny efekt 
Podobne text v tagu <strong> je vnímaný ako silne
zvýraznený (strong emphasis), teda ako ešte dôležitejší.
Prehliadač ho zobrazí ako tučné písmo.
V starých materiáloch môžete naraziť na zvýraznenie
textu tagy <b> (bold) a <i>
(italic). Avšak ty text iba vykreslí iným štýlom a jeho význam
pre prehliadače sa vôbec nezmení. Preto sa už na zvýraznenie
nepoužívajú.
Zvýraznenie si môžeme vyskúšať, zdôrazníme na stránke teraz
dôležitú skutočnosť. Kód píšeme stále medzi <body> a
</body>:
... <body> <p>To defuse the explosive, cut the <strong>red</strong> wire. The blue wire can cause an explosion.</p> <p>Start the registry editor using a <em>regedit.exe</em> command. <strong>We are not responsible for any damage!</strong></p> </body> ...
Výsledok:
Frázové tagy pre zvýraznenie sú riadkové.
Nezačínajú na stránke teda nový blok, ale pokračujú v existujúcom
riadku. Preto ich ani v kóde nedávame na nový riadok. Na samostatné riadky
vkladáme iba blokové elementy, napr. tu odseky <p>.
Tagy samozrejme môžeme kombinovať, napríklad text urobiť tučný aj kurzívou:
<p><strong><em>This text will be rendered in both italics and bold.</em></strong></p>
Prekríženie HTML tagov
Dajte si pozor, aby boli tagy ukončené v správnom poradí!
V príklade vyššie prvú ukončíme kurzívu, pretože sme ju otvorili ako poslednú. Napr. takto prekrížené tagy sú chybou a niektoré prehliadače nemusia zvýraznenie správne pochopiť:
<p><strong><em>The tags around this text are crossed and may render incorrectly.</strong></em></p>
Podčiarknutie <u>
Na podčiarknutie textu existuje tag <u>
(underline). Ten sa však príliš nepoužíva, pretože ľudia sú
zvyknutí, že podčiarknuté sú odkazy. Napriek tomu si ho pre úplnosť
vyskúšajme, aj keď by ste ho na webe nemali používať. Akýkoľvek ďalší
kód vkladáme stále medzi <body> a
</body>, pokiaľ nebude uvedené inak:
<p>I often see the word <u>remainded</u>, although it's not grammatically correct.</p>
Výsledok:
Prečiarknutie <s>
Prečiarknutý text označíme opäť párovým tagom <s>
(strike - prečiarknutý). Ide o text, ktorý už nie je aktuálny
alebo korektný (napríklad minulá cena tovaru alebo zdôraznenie nesprávneho
tvrdenia/postupu).
Ukážka:
<p>Welcome to the Czech Republic. A wireless internet connection is now only <s>$1</s> $10 an hour.</p>
Výsledok:
Optické zvýraznenie
<mark>
Ako posledný si spomeňme tag <mark>, ktorý slúži na
optické zvýraznenie nejakej časti textu. Tento text nie je
dôležitý pre vyhľadávače (ako v prípade
<strong>), ale pre užívateľov. Môžeme zvýrazniť v
texte dôležitú skutočnosť, prehliadač tento text vykreslí so žltým
pozadím:
<p>Visits of the ICT.social network has <mark>increased by 300%</mark> last year.</p>
Výsledok:
Pokiaľ vám vyššie spomínané tagy pripomenuli tlačidlá v MS Worde, máte pravdu. Ide o základnú typografiu, ktorá je prítomná vo väčšine textových editorov.
Frázových tagov existuje ešte niekoľko, ale pre potreby nášho prvého
webu ich teraz nevyužijeme. Záujemca odkážem na manuálový kurz HTML od A do Z. Vy budete vo väčšine prípadov
používať hlavne tag <strong>, pretože si tento text potom
všíma vyhľadávač.
Nadpisy <h1> -
<h6>
Nadpisy sú považované za najvýraznejší text. Zapisujú sa párovým
tagom <h*> (header), resp. <h1>
až <h6>. HTML poskytuje 6 úrovní
nadpisov, kde <h1> je nadpis najvyššej úrovne a
<h6> je nadpis úrovne najnižšia. Okrem veľkosti nadpisov
tu hrá úlohu predovšetkým dôležitosť pre vyhľadávače
– dohľadateľnosť obsahu, ktorý do nadpisov vložíme. Nadpis
<h1> je vnímaný ako najvýznamnejší, nadpis
<h6> potom ako najmenej významný, ale stále lepšie
vyhľadateľný, než obyčajný text.
Nadpis <h1> by mala byť tá úplne prvá vec na stránke
a mal by obsahovať názov stránky. Ako ďalšie by mali nasledovať nadpisy
<h2>, ktoré rozdeľujú stránku na ďalšie podsekcie.
Ďalšie nadpisy sa využívajú už menej často, najmä na členenie textu v
článku.
Nadpisy sú na rozdiel od frázových tagov blokové tagy, podobne, ako odseky. To znamená, že nadpis zaberá vždy celý riadok.
Ukážme si príklad nadpisu:
<h1>My First Website</h1> <p>Welcome to my first web page. I'm still learning how to script, but I think I'm getting good at it.</p>
Výsledok:
Projekt - SaBiho portfólio
Začnime pracovať na jednoduchom osobnom webe, ktorý budeme počas kurzu postupne rozširovať a vylepšovať, až ho nakoniec nahráme na internet. Web s nadpismi a zvýraznením textu by mohol vyzerať napríklad takto:
<h1>Sam Bittner - Web Developer</h1> <p>Welcome! I'm thrilled to help you transform your ideas into stunning, <strong>high-performing websites</strong>.</p> <h2>About Me</h2> <p>I'm Sam Bittner, a web developer with a passion for creating dynamic and responsive websites. I have expertise in various technologies, including HTML, CSS, JavaScript, and Java with Spring Boot.</p> <p>When I'm not coding, I love reading tech blogs, experimenting with new frameworks, and engaging in outdoor activities.</p> <h2>Skills</h2> <p>With a background in IT from ictdemy.com courses, I have developed my skills in various programming languages, including HTML, CSS, JavaScript, and Java with Spring Boot.</p> <p>I believe that web development is not just about writing code; it's about creating user experiences that are engaging and accessible to everyone. I am committed to continuous learning and improvement, staying updated on the latest trends and technologies in the field.</p>
Výsledok:
Týmto máme hotovú prvú jednoduchú stránku, ktorá má zároveň informačnú hodnotu a mohla by teoreticky už visieť na internete. Výsledný kód máte opäť nižšie na stiahnutie aj vrátane celej HTML štruktúry.
V budúcej lekcii, Obrázky a odkazy v HTML, si ukážeme pridanie obrázkov a odkazov na webovú stránku.
Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.
Stiahnuť
Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami
Stiahnuté 53x (1.13 kB)
Aplikácia je vrátane zdrojových kódov v jazyku HTML a CSS
David sa informačné technológie naučil na Unicorn University - prestížnej súkromnej vysokej škole IT a ekonómie.