2. diel - Základné HTML tagy
V minulej lekcii, Úvod do HTML a váš prvý web , sme si ukázali, ako vyzerá štruktúra HTML stránky a vytvorili sme si prvú stránku sa dvoma odsekmi textu. To nám však pochopiteľne nestačí, preto si v tomto HTML tutoriálu uvedieme základné HTML tagy.
Odseky
Bod sme si už spomenuli v minulom diele, pre zopakovanie uvediem, že text nemôže v HTML len tak plávať, ale je rozdelený do odstavcov. Tag
je párový a obaľuje teda text, ktorý má vo vnútri odseku byť. Pred text píšeme
, za textom odsek uzavrieme </ p>.
ukážka:
<p>Toto je první odstavec</p> <p>Toto je první věta druhého odstavce. Toto je druhá věta druhého odstavce</p>
výsledok:
Všimnite si, že v HTML nehrá vôbec žiadnu
úlohu odriadkovanie. 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. Ak by sme z nejakého dôvodu
chceli v odseku odřádkovat, využijeme nepárový tag
. Vypadlo by to nejako takto:
<p>Toto je první odstavec</p> <p>Toto je první věta druhého odstavce.<br /> Toto je druhá věta druhého odstavce</p>
výsledok:
Častou chybou je používanie dvoch
za sebou miesto vytvorenia nového odseku, to je zle.
Zvýraznenie textu
Keď je nejaká časť textu dôležitá, oznámime to prehliadači pomocou zvýrazňovacích tagov. Sú to hlavne párové tagy a .
Kurzíva a tučný text
Text v (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 neho potom zaujímajú viac, než o ostatné text. Podobne text vo je vnímaný ako silne zvýraznený (strong Emphasis), teda ako ešte dôležitejšie. Prehliadač ho zobrazí ako tučné písmo.
V starých materiáloch môžete naraziť na tagy a . Ovšem tie text iba vykreslili iným štýlom a jeho význam sa vôbec nezmenil. Preto sa už pre zvýraznenie nepoužívajú.
Zvýraznenie si môžeme vyskúšať, zdôrazníme dôležitú skutočnosť:
<p>Pro zneškodnění výbušniny přestřihněte <strong>červený</strong> drát, modrý drát může zapřičinit explozi.</p> <p>Spusťte editor registru příkazem <em>regedit.exe</em>. <strong>Neručím za případné škody!</strong></p>
výsledok:
Tagy samozrejme môžeme kombinovať, napr. Tento text bude vykreslený ako kurzíva aj ako tučný </ em> </ strong>. Dajte si pozor, aby boli tagy ukončené v správnom poradí.
Podčiarknutie
K podčiarknutie textu existuje tag . 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ť:
<p>Často vídávám psát <u>připoměl</u>, i když to není gramaticky správně.</p>
výsledok:
Prečiarknutie
Preškrtnutý text označíme opäť párovým tagom (ako strike =
preškrtnutý). Ide o text, ktorý už nie je aktuálny alebo korektné (napr.
Minulá cena tovaru alebo zdôraznenie nesprávneho tvrdenie / postupu).
ukážka:
<p>Vítejte v České republice. Za hodinu internetu nyní na cestách zaplatíte <s>10 Kč</s> 200 Kč.</p>
výsledok:
Optické zvýraznenie
Ako posledný si spomeňme nový tag , ktorý slúži k optickému 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>Během roku se návštěvnost sociální sítě itnetwork.cz <mark>zvýšila o 300%</mark>.</p>
výsledok:
Ak vám vyššie uvedené tagy pripomenuli tlačidla v MS Worde, máte pravdu, jedná sa o základnú typografii, ktorá je prítomná vo väčšine textových editorov.
Zvýrazňovacím tagom sa hovorí tagy frázové. Existuje ich ešte niekoľko, ale pre naše potreby sú už zbytočné. Zájmence odkáže na český HTML 5 manuál. Vy budete vo väčšine prípadov používať hlavne strong, pretože si tohto textu potom všíma vyhľadávač.
Nadpisy
Nadpisy sú považované ako najvýraznejší text. Zapisujú sa párovým tagom(ako header). HTML poskytuje 6 úrovní nadpisov, kde je nadpis najvyššej úrovne a je nadpis úrovne najnižšia. Nadpis by mala byť tá úplne prvá vec na stránke a mala by obsahovať názov stránky. Ako ďalšie by mali nasledovať nadpisy , ktoré rozdeľujú stránku na ďalšie podsekcie. Ďalšie nadpisy sa využívajú len zriedka, najmä ku členenie textu v článku.Začnime pracovať na jednoduchom osobnom webe, ktorý budeme počas seriálu postupne rozširovať a vylepšovať, až ho nakoniec nahráme na internet. Web s nadpismi by mohol vyzerať napríklad takto:<h1>Můj první web</h1> <p>Vítejte na mém prvním webu, psát weby se teprve učím, ale myslím, že mi to docela jde.</p> <h2>O mně</h2> <p>Jmenuji se Honza Bittner a je mi 16 let. Chodím na Střední průmyslovou školu v České Lípě na obor IT.</p> <p>Rád čtu a někdy (hlavně v létě) i sportuju.</p> <p>Mým hlavním koníčkem (a doufám že jednou i zaměstnáním) je <strong>programování</strong>!</p> <h2>Dovednosti</h2> <p>V prváku jsem začal ve škole s programovacím jazykem PASCAL. Hledal jsem na internetu nějaké lepší jazyky a náhodou jsem narazil na itnetwork.cz, kde se nyní učím <strong>HTML</strong> a <strong>Javu</strong>. Základy těchto jazyků ovládám.</p>výsledok: Moje první webová stránkaindex.htmlVýsledný kód máte opäť nižšie k stiahnutiu. V budúcej lekcii, Obrázky a odkazy v HTML , to bude o obrázkoch a odkazoch.
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é 3299x (682 B)
Aplikácia je vrátane zdrojových kódov v jazyku HTML a CSS