Slevový týden - Srpen
30 % bodů zdarma na online výuku díky naší Slevové akci!
Pouze tento týden sleva až 80 % na e-learning týkající se Javy.

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:

Moje první webová stránka
index.html

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:

Moje první webová stránka
index.html
Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!

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

Moje první webová stránka
index.html

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:

Moje první webová stránka
index.html

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:

Moje první webová stránka
index.html

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:

Moje první webová stránka
index.html

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.


 

Stiahnuť

Stiahnuté 1372x (682 B)
Aplikácia je vrátane zdrojových kódov v jazyku HTML a CSS

 

Predchádzajúci článok
Úvod do HTML a váš prvý web
Všetky články v sekcii
Webové stránky krok za krokom
Článok pre vás napísal David Čápka
Avatar
Ako sa ti páči článok?
Ešte nikto nehodnotil, buď prvý!
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn university Autor sa informačné technológie naučil na Unicorn College - prestížnej súkromnej vysokej škole IT a ekonómie.
Aktivity (1)

 

 

Komentáre

Avatar
0
Člen
Avatar
0:14.9.2019 11:04

díky

 
Odpovedať
14.9.2019 11:04
Avatar
0
Člen
Avatar
0:14.9.2019 11:27

Tak jsem to opravil ,ale nic se nezměnilo. Stáhnul jsem z odkazu pod lekcí obrázky a odkazy tu web stránku s obrázkem ale ani tam se obrázek neukázal.

 
Odpovedať
14.9.2019 11:27
Avatar
Jaroslav Smrž
Redaktor
Avatar
Odpovedá na 0
Jaroslav Smrž:14.9.2019 11:44

Zkontroluj cestu k souborům
Vytvoř si adresář "Web" s umístěním třeba D:\Web
V něm budeš mít soubory index.html , style.css a adresář Images ve kterém budeš mít obrázky

Názorný příklad načtení obrázku v index.html

<img src="Images/obrazek1.jpg" />

Pozor na záměnu formátů *.jpeg a *.jpg

Odpovedať
14.9.2019 11:44
/* Life runs on code */
Avatar
0
Člen
Avatar
Odpovedá na Jaroslav Smrž
0:14.9.2019 11:50

díky konečně to funguje

 
Odpovedať
14.9.2019 11:50
Avatar
Jaroslav Smrž
Redaktor
Avatar
Odpovedá na 0
Jaroslav Smrž:14.9.2019 15:24

Rád jsem pomohl

Odpovedať
14.9.2019 15:24
/* Life runs on code */
Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!
Avatar
Robertos Rigáň:23. apríla 18:14

Keď som sa s týmto prvý krat stretol na kurze u nás vysvetlovali to dosť zložito na začiatočníkov , ale tu je to krasne všetko rozpísané že to pochopi aj úplný laik keď si to viac krát prečíta :) perfektný serial ďakujem 5x ano postupujete dalej:D

Odpovedať
23. apríla 18:14
Ak miluješ svoju prácu , tak to nieje práca ale hobby
Avatar
Jarmila Mizerová:1. júna 15:46

perfektně se mi podle toho učí,
jen použila
Visual Studio Code,
tam se mi po zadání prvního písmenka nabídnou všechny tagy začínající tím písmenem a když dá TAB tak jsou tam <>
je to pohodlnější

 
Odpovedať
1. júna 15:46
Avatar
Michael Last
Člen
Avatar
Michael Last:7. júla 16:55

Tak jsem rpošel další lekcí.Akorá se přiznám že jsem nevědel kam se píší ty nadpisy:Tak jsem to stáhl dole podívál se a už jsem to věděl.Určitě i ti co stránky píší mají někde napsané ty příkazy protože toho bude asi moc.Jinak se mi to moc líbí.

Odpovedať
7. júla 16:55
"Každý máme svůj svět,mnoho lidí mnoho světů.Fascinující přiroda i dobří přátelé.Užasné je to když přijdete domu...
Avatar
micmar
Člen
Avatar
micmar:15. júla 17:50

Jasné a výstižne, tak by to malo byť aj v škole

 
Odpovedať
15. júla 17:50
Avatar
Lukáš Navrátil:30. júla 3:50

Děkuji za tutoriál :)

 
Odpovedať
30. júla 3:50
Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zatiaľ nikto nevložil komentár - buď prvý!