BF Summer sales
Pouze tento týden sleva až 80 % na HTML & CSS a JavaScript
80 % bodů zdarma na online výuku díky naší Letní akci!

Lekce 2 - Základní HTML tagy

V minulé lekci, Úvod do HTML a váš první web, jsme si ukázali, jak vypadá struktura HTML stránky a vytvořili jsme si první stránku se dvěma odstavci textu.

Dva odstavce na naší webové stránce, naučené z minula, nám však pochopitelně nestačí. Proto si v tomto HTML tutoriálu uvedeme základní HTML tagy.

Odstavce

Odstavec jsme si již zmínili v minulém díle. Pro zopakování uvedu, že text nemůže v HTML jen tak plavat, ale je rozdělen do odstavců <p>. Tag <p> je párový a obaluje tedy text, který má uvnitř odstavce být. Před text píšeme <p>, za textem odstavec uzavřeme </p>.

Ukázka:

<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ýsledek:

Moje první webová stránka
index.html

Všimněte si, že v HTML nehraje vůbec žádnou roli odřádkování. Druhý odstavec máme napsaný na 2 řádky, ale zobrazí se jako jeden řádek. Prohlížeč totiž přechod na nový řádek na stránce zobrazí jen jako mezeru. Pokud bychom z nějakého důvodu chtěli v odstavci odřádkovat, využijeme nepárový tag <br />. Vypadalo by to nějak takhle:

<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ýsledek:

Moje první webová stránka
index.html

Častou chybou je používání dvou <br /><br /> za sebou místo vytvoření nového odstavce, to je špatně.

Zvýraznění textu

Když je nějaká část textu důležitá, sdělíme to prohlížeči pomocí zvýrazňovacích tagů. Jsou to hlavně párové tagy <strong> a <em>.

Kurzíva a tučný text

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Text v <em> (emphasis = zvýraznění) se zobrazí jako kurzíva (italika), ale to není vše. Říkali jsme si, že HTML slouží hlavně k definování významu. Text v em se bere jako důležitý, internetové vyhledávače (např. Google) se o něj pak zajímají více, než o ostatní text. Podobně text ve <strong> je vnímán jako silně zvýrazněný (strong emphasis), tedy jako ještě důležitější. Prohlížeč ho zobrazí jako tučné písmo.

Ve starých materiálech můžete narazit na tagy <b> a <i>. Ovšem ty text pouze vykreslily jiným stylem a jeho význam se vůbec nezměnil. Proto se již pro zvýraznění nepoužívají.

Zvýraznění si můžeme vyzkoušet, zdůrazníme důležitou skutečnost:

<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ýsledek:

Moje první webová stránka
index.html

Tagy samozřejmě můžeme kombinovat, např. <strong><em>Tento text bude vykreslen jako kurzíva i jako tučný</em></str­ong>. Dejte si pozor, aby byly tagy ukončeny ve správném pořadí.

Podtržení

K podtržení textu existuje tag <u>. Ten se však příliš nepoužívá, protože lidé jsou zvyklí, že podtržené jsou odkazy. Přesto si jej pro úplnost vyzkoušejme, i když byste jej na webu neměli používat:

<p>Často vídávám psát <u>připoměl</u>, i když to není gramaticky správně.</p>

Výsledek:

Moje první webová stránka
index.html

Přeškrtnutí

Přeškrtnutý text označíme opět párovým tagem <s> (jako strike = přeškrtnutý). Jedná se o text, který již není aktuální nebo korektní (např. minulá cena zboží nebo zdůraznění nesprávného tvrzení/postupu).

Ukázka:

<p>Vítejte v České republice. Za hodinu internetu nyní na cestách zaplatíte
<s>10 Kč</s> 200 Kč.</p>

Výsledek:

Moje první webová stránka
index.html

Optické zvýraznění

Jako poslední si zmiňme nový tag <mark>, který slouží k optickému zvýraznění nějaké části textu. Tento text není důležitý pro vyhledávače (jako v případě strong), ale pro uživatele. Můžeme zvýraznit v textu důležitou skutečnost, prohlížeč tento text vykreslí se žlutý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ýsledek:

Moje první webová stránka
index.html

Pokud vám výše zmíněné tagy připomněly tlačítka v MS Wordu, máte pravdu, jedná se o základní typografii, která je přítomna ve většině textových editorů.

Zvýrazňovacím tagům se říká tagy frázové. Existuje jich ještě několik, ale pro naše potřeby jsou již zbytečné. Zájemce odkáži na český HTML 5 manuál. Vy budete ve většině případů používat hlavně tag strong, jelikož si tohoto textu poté všímá vyhledávač.

Nadpisy

Nadpisy jsou považovány jako nejvýraznější text. Zapisují se párovým tagem <h1> (jako header). HTML poskytuje 6 úrovní nadpisů, kde <h1> je nadpis nejvyšší úrovně a <h6> je nadpis úrovně nejnižší. Nadpis <h1> by měla být ta úplně první věc na stránce a měla by obsahovat název stránky. Jako další by měly následovat nadpisy <h2>, které rozdělují stránku na další podsekce. Další nadpisy se využívají jen zřídka, zejména ke členění textu v článku.

Začněme pracovat na jednoduchém osobním webu, který budeme během seriálu postupně rozšiřovat a vylepšovat, až ho nakonec nahrajeme na internet. Web s nadpisy by mohl vypadat napří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ýsledek:

Moje první webová stránka
index.html

Výsledný kód máte opět níže ke stažení.

V příští lekci, Obrázky a odkazy v HTML, si ukážeme přidání obrázků a odkazů na webovou stránku.


 

Stáhnout

Staženo 1368x (682 B)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

 

Předchozí článek
Úvod do HTML a váš první web
Všechny články v sekci
Webové stránky krok za krokem
Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
134 hlasů
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 College Autor sítě se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity (6)

 

 

Komentáře

Avatar
Mircosoft
Redaktor
Avatar
Mircosoft:24.8.2011 11:18

Opět pár doplňujících poznámek pro začátečníky:

Pozor, že adresy v src a href se nedají psát zkráceně, jako to děláte v prohlížeči. Tedy ne www.blabla.com, ale vždycky celou adresu http://www.blabla.com. Když nebude začínat na http:// (nebo jiný protokol, třeba ftp:// nebo https://), je to relativní odkaz, který se odkazuje na soubory na vaší doméně.

Používat tagy b a i není chyba, ale dělejte to pouze v případě, že chcete text jenom nějak vizuálně odlišit, ale nechcete mu přiřazovat žádný zvláštní význam. Příklad - formátování v knížkách: kurzívou se můžou psát různé poznámky překladatele, jména lodí atd., tučně třeba i nedůležitá čísla stránek. Samozřejmě, ideální a doporučované je použít CSS, kde si můžete nadefinovat třídu "poznámka" a spojit tak formátování, význam i nedůležitost.

Adresář s obrázky se může jmenovat jakkoli, "images" je jenom příklad.

Formát JPG je dobrý na fotky a jiné členité obrázky, naopak naprosto nevhodný je na screenshoty, grafy, text a podobně - jednak rozmazává hrany a jednak PNG nebo GIF komprimují jednolité plochy daleko líp.

Není pravda, že by GIF poškozoval paletu, to je věc prohlížeče (navíc v hicolor a truecolor, ve kterých pravděpodobně jedete, žádná paleta není). Ale má horší kompresní poměr než PNG, nepamatuje si svoje rozlišení (DPI) a není to otevřený formát. Ale zase se dá udělat animovaný, což je výhoda. A nejstarší prohlížeče ho znají, kdežto PNG ne (ale pro ty asi dneska nikdo optimalizovat nebude, že :D).

Editováno 7.12.2012 13:45
 
Odpovědět
24.8.2011 11:18
Avatar
Mircosoft
Redaktor
Avatar
Odpovídá na Mircosoft
Mircosoft:24.8.2011 11:20

Grrr, zase mi to sežralo odrážky, budete si je muset domyslet... admine, SOS!

 
Odpovědět
24.8.2011 11:20
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Mircosoft
David Čápka:24.8.2011 11:40

GIF poškozuje paletu, protože je to 256ti barevný formát, nedokáži si představit, že by někdo dnes úmyslně chtěl používat 256barev a pokud tedy True Color obrázek uloží do GIFu, bude vypadat ošklivě. Mnoho lidí toto neví a pak se diví, proč obrázek vypadá jinak, proto ho již nedoporučuji používat. BTW GIF přestala podporovat např. i Galerie Windows, je to dávno překonaný formát.

K těm odrážkám se snad někdy dostanu, pořád je něco naléhavějšího :)

Odpovědět
24.8.2011 11:40
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
Mircosoft
Redaktor
Avatar
Odpovídá na David Čápka
Mircosoft:24.8.2011 11:46

Jo takhle, tys to myslel jako že GIF poškodí paletu toho obrázku, který do něj uložíme - to samozřejmě jo, pokud ten ukládaný obrázek má víc než 256 barev. Já to pochopil jako že poškozuje globální paletu systému nebo prohlížeče, což je při truecolor zobrazení blbost :[.

 
Odpovědět
24.8.2011 11:46
Avatar
j.martenek
Člen
Avatar
j.martenek:4.1.2013 12:49

Mám otázku ohledně zvírazňování textu: Nepoužívá se na kurzívu tag , na tučný text a na podtržení textu <u>? Viděl jsem to na stránce http://www.jakpsatweb.cz/.Díky za odpověď.

 
Odpovědět
4.1.2013 12:49
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na j.martenek
David Čápka:4.1.2013 12:54

Tagy vkládej jako kód, jinak ti zformátují příspěvek. Předpokládám, že máš na mysli <b>, <i> a <u>. Ani jeden se již moc nepoužívá a mají trochu jiný význam, než si myslíš. Můžeš si o nich přečíst ve zdejším manuálu, jsou tam popsané všechny HTML tagy: http://www.itnetwork.cz/…/html-manual

Odpovědět
4.1.2013 12:54
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
DEVILRT_Cz
Člen
Avatar
DEVILRT_Cz:23.2.2013 12:49

Já bych teda také viděl chybu v použití tagu

<strong> i <em> pro začátečníka bude lehčí naučit se jen <b> a <i> a <u>. Takovéhle věci přijdou později.
Odpovědět
23.2.2013 12:49
PC Sestava: Intel Core i7 920 (nehalem, 2.66 GHz, 4 cores), 12 GB DDR3 RAM, Nvidia GeForce GTX 650Ti 2GB DDR5
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na DEVILRT_Cz
David Čápka:24.2.2013 10:25

Ne, to je úplně špatně.

Odpovědět
24.2.2013 10:25
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
MarweXtv
Člen
Avatar
MarweXtv:20.3.2013 15:25

Pro začátečníky je to podle mě moc těžké :/

 
Odpovědět
20.3.2013 15:25
Avatar
Petr Nymsa
Redaktor
Avatar
Odpovídá na MarweXtv
Petr Nymsa:20.3.2013 15:36

Bohužel ale tohle jsou úplné začátky pro úplné začátečníky. Zkus si to pročíst ještě jednou :)

Odpovědět
20.3.2013 15:36
Pokrok nezastavíš, neusni a jdi s ním vpřed
Avatar
MarweXtv
Člen
Avatar
Odpovídá na Petr Nymsa
MarweXtv:27.3.2013 16:05

Však html a css umím dobře, jen říkám že na začátek je to dost těžké :/

 
Odpovědět
27.3.2013 16:05
Avatar
Petr Nymsa
Redaktor
Avatar
Odpovídá na MarweXtv
Petr Nymsa:27.3.2013 16:07

Co je tedy podle tebe lehčí je ště pro začátečníky ? Vezměte klávesnici a myš ? Tolhe jsou opravdu úplné začátky, nic lehčího být už nemůže ...

Odpovědět
27.3.2013 16:07
Pokrok nezastavíš, neusni a jdi s ním vpřed
Avatar
MarweXtv
Člen
Avatar
MarweXtv:27.3.2013 16:11

Nař strong bych dal ehm.. trošku později třeba do druhého tut.

 
Odpovědět
27.3.2013 16:11
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na MarweXtv
David Čápka:27.3.2013 16:39

Ano, že může být písmo tučné je opravdu složité k pochopení, vymezil bych na to samostatnou kapitolu.

Odpovědět
27.3.2013 16:39
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
skylaner1
Člen
Avatar
skylaner1:10.7.2013 14:32

caute preco mi neberie mark tag? v pspade je cerveny mam ho spravne aj som skusil skopirovat no nic

 
Odpovědět
10.7.2013 14:32
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na skylaner1
David Čápka:10.7.2013 14:40

To bude problém PSPadu :)

Odpovědět
10.7.2013 14:40
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
Michal Žůrek - misaz:10.7.2013 14:43

k tomu tučnému písmu, lze používat i tag

<b>

, měl by být i validní. Navíc se mě osobně to líp pamatuje když si představím tlačítka ve wordu.

<b> tučné
<i> kurzíva

EDIT: už jsem pochopi co jsou to ty povolené tagy :D

Editováno 10.7.2013 14:44
 
Odpovědět
10.7.2013 14:43
Avatar
Kit
Redaktor
Avatar
Odpovídá na Michal Žůrek - misaz
Kit:10.7.2013 14:47

Jsou to nejen tlačítka, ale dokonce funguje i Ctrl-b a Ctrl-i, což je mnohem praktičtější.

Odpovědět
10.7.2013 14:47
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
Odpovídá na skylaner1
Neaktivní uživatel:10.7.2013 14:57

Odporúčam si svoje výtvory kontrolovať radšej otvorením toho html. súboru.. PSPad ani mňa príliš nepočúval v týchto veciach ;)

Odpovědět
10.7.2013 14:57
Neaktivní uživatelský účet
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Michal Žůrek - misaz
David Čápka:10.7.2013 15:04

Tyhle tagy dělají úplně něco jiného než si myslíš, už se to tu řešilo stokrát.

Odpovědět
10.7.2013 15:04
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
j.martenek
Člen
Avatar
j.martenek:5.8.2013 16:47

To je sice pravda. Ale já moc nepochopil ten rozdíl mezi

<b>

a

<strong>

. První možnost je mi milejší. A jestli někdo znáte stránku jakpsatweb.cz, tak ví, že tam někdo psal, že na ztučnění se používá b.

Editováno 5.8.2013 16:48
 
Odpovědět
5.8.2013 16:47
Avatar
Jan Vargovský
Redaktor
Avatar
Odpovídá na j.martenek
Jan Vargovský:5.8.2013 17:03

Třeba tady http://www.html-5-tutorial.com/…elements.htm , nebo si to tady vyhledej řešilo se to tu už tisíckrát, jak řekl sdraco.

 
Odpovědět
5.8.2013 17:03
Avatar
Odpovídá na j.martenek
Neaktivní uživatel:5.8.2013 17:06

Tagy v HTML neurčují, jestli má být text tučný, kurzívou, atd... Ukazují, co text uvnitř znamená.

<b>

by jsi mohl v CSS klidně nastavit na kurzívu.

Editováno 5.8.2013 17:08
Odpovědět
5.8.2013 17:06
Neaktivní uživatelský účet
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na j.martenek
David Čápka:5.8.2013 17:08

Ano, před mnoha a mnoha lety se opravdu tučné písmo dělalo přes b, proto to je na jakpsatweb. Rozdíl mezi b a strong je obrovský, ale už se to tu řešilo tolikrát, že se k tomu nebudu vyjadřovat, najdi si to.

Odpovědět
5.8.2013 17:08
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na j.martenek
David Čápka:5.8.2013 17:09

Teď koukám, že je to dokonce napsané a zvýrazněné v článku, je vidět, že jsi ho ani nečetl.

Odpovědět
5.8.2013 17:09
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
havlat82
Člen
Avatar
havlat82:5.8.2013 23:54

Mě ten tag Mark nefungoval.. text sem editoval na poslední verzi PsPadu.. Postupoval chronologicky podle probíraných tagů a tagy sem zapisoval do souboru, kterej sem si vytvořil po předchozim dile..

 
Odpovědět
5.8.2013 23:54
Avatar
Odpovídá na havlat82
Libor Šimo (libcosenior):16.9.2013 8:46

Mne mark tiež nefungoval. Môže to byť tým, že som to skúšal na IE8.

Odpovědět
16.9.2013 8:46
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
K4rel
Člen
Avatar
Odpovídá na j.martenek
K4rel:12.2.2014 18:26

b ti text zvýrazní tučně
strong také ale na toto slovo se zaměří i vyhledávač
třeba když něco hledáš na google a napíšeš tam to slovo tak se ti tam zobrazí ta stránka

Editováno 12.2.2014 18:26
 
Odpovědět
12.2.2014 18:26
Avatar
youtubak777
Člen
Avatar
Odpovídá na j.martenek
youtubak777:14.10.2014 22:06

Tag <.b> pouze text zvýrazní (graficky; TAKTO), nežli <.strong> přidá textu i důležitost, tím pádem vyhledávače tento text budou brát jako důležitý a zobrazovat stránky s ním přednostně. (Tagy bez teček)

Editováno 14.10.2014 22:07
 
Odpovědět
14.10.2014 22:06
Avatar
Tomáš Brůna
Redaktor
Avatar
Tomáš Brůna:22.6.2015 15:29

není toto chyba? sice malá ale trochu mě to zmátlo :)

<p>Během roku se návštěvnost sociální sítě devbook.cz <mark>zvýšila o 300%</mark>.</p>

a ve výsledku není devbook ale islandsoft :)

Odpovědět
22.6.2015 15:29
Vi veri universum vivus vici
Avatar
Richard H.
Redaktor
Avatar
Richard H.:14.7.2015 14:09

pěkný tutoriál tohle budu číst dál

Odpovědět
14.7.2015 14:09
Malý užitečný manuál je vždy lepší než bichle k ničemu.
Avatar
Ferdinand Fojtlin:1.5.2016 13:27

Super...

 
Odpovědět
1.5.2016 13:27
Avatar
Richard Luko
Člen
Avatar
Richard Luko:11.12.2016 21:02

Zdravím, chcem sa opýtať či existuje aj iná farba optického zvýraznenia ako je žltá ?

Odpovědět
11.12.2016 21:02
S Bohom je všetko možné
Avatar
Odpovídá na Richard Luko
Richard Závodný:11.12.2016 21:31

Předpokládám, že barva pujde změnit pomocí CSS, avšak nemám to odzkoušené.

<mark style="background-color: red;">Červené zvýraznění</mark>
Editováno 11.12.2016 21:32
 
Odpovědět
11.12.2016 21:31
Avatar
Filip Kohout
Člen
Avatar
Filip Kohout:21.7.2017 20:52

Chci se zeptat, kdyz delam odstavce musi byt za kazdym textem </p>
takto
<p> Nejaky text bla bla </p>
<p> dalsi odstavec blablabla </p>
<p> dalsi odstavec a konec </p>
nebo staci
<p> Nejaky text bla bla
<p> dalsi odstavec blablabla
<p> dalsi odstavec a konec </p>

Jde o to ze mi to takhle fuguje ale jestli by to potom nedelalo to neplechu

 
Odpovědět
21.7.2017 20:52
Avatar
Shade
Člen
Avatar
Shade:21.7.2017 21:06

Prohlížeče si to doplní, ale mohlo by to pak dělat menší bordel v css

Odpovědět
21.7.2017 21:06
Talk is cheap. Show me the code.
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Filip Kohout
Člen
Avatar
 
Odpovědět
22.7.2017 8:36
Avatar
Tomáš Janda:11.8.2017 6:25

Parádní tutoriál. Jsem úplný začátečník v tomto "oboru" a jsem nadšen z kvality tohoto webu..

Odpovědět
11.8.2017 6:25
Trpělivost-vytrvalost-pokora
Avatar
Michael Tolland:23.12.2017 10:29

moc děkuji

 
Odpovědět
23.12.2017 10:29
Avatar
Mrkev007
Člen
Avatar
Mrkev007:13.1.2018 13:56

Velmi dobre napsane.

 
Odpovědět
13.1.2018 13:56
Avatar
Jindřich Volf:1.2.2018 7:17

Super tutorial! ;-)

 
Odpovědět
1.2.2018 7:17
Avatar
Artem Prokopenko:9.7.2018 16:55

Jsem začatečnik a pro zatim jde to dobře

Editováno 9.7.2018 16:56
 
Odpovědět
9.7.2018 16:55
Avatar
Odpovídá na Artem Prokopenko
Rico ThreeDmax:10.7.2018 22:02

No tak prozatim toje brnkacka :-D

 
Odpovědět
10.7.2018 22:02
Avatar
Nikola Spesny:21.12.2018 13:38

mám problém když stránku otevřu v prohlížeči tak mi to místo dlouhých písmen a háčků nad písmeny hodí ? ví někdo co s tím ?

 
Odpovědět
21.12.2018 13:38
Avatar
Odpovídá na Nikola Spesny
Jan Jedlička:21.12.2018 14:07

Nastaveni UTF8:
<meta charset="UTF-8">

 
Odpovědět
21.12.2018 14:07
Avatar
Odpovídá na Jan Jedlička
Nikola Spesny:21.12.2018 14:29

a kde přesně to najdu v tom nastavení?
jo a jinak děkuji za rychlou reakci .

 
Odpovědět
21.12.2018 14:29
Avatar
Odpovídá na Nikola Spesny
Jan Jedlička:21.12.2018 14:59

v cem pises? pspad?

 
Odpovědět
21.12.2018 14:59
Avatar
Jan Jedlička:21.12.2018 15:02

jinak se to nastavuje v html tady:
<!DOCTYPE HTML PUBLIC "-W3CDTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"> <----- zde
<meta name="generator" content="PSPad editor, www.pspad.com">
<meta name="viewport" content="width=de­vice-width, initial-scale=1">
<title>Cykloser­vis</title>
<link rel="stylesheet" type="text/css" href="stylcss.css">

</head>
<body>
...

</body>
</html>

 
Odpovědět
21.12.2018 15:02
Avatar
 
Odpovědět
21.12.2018 15:38
Avatar
Jan Jedlička:21.12.2018 15:53

zapni pspad -> nastaveni -> nastaveni programu ->adresare a soubory -> vychozi CP pro otevirani souboru: (nastavit Unicode UTF-8 no BOM)

 
Odpovědět
21.12.2018 15:53
Avatar
Odpovídá na Jan Jedlička
Nikola Spesny:21.12.2018 16:09

již to funguje mockrát děkuji

 
Odpovědět
21.12.2018 16:09
Avatar
Odpovídá na Nikola Spesny
Jan Jedlička:21.12.2018 16:11

Nemas na zo ;-) . Jinak otevri si vzdycky tu stranku treba v chromu nebo jinem. Tem integr.prohlizec co je v pspadu kolikrat nejde.

 
Odpovědět
21.12.2018 16:11
Avatar
Odpovídá na Nikola Spesny
Petra Krátká:16.1.2019 8:37

Musíš mít nastavené to UTF - 8 aby ti to neházelo "?". Je to vysvětlené v první lekci. :)

 
Odpovědět
16.1.2019 8:37
Avatar
Matěj Bína
Člen
Avatar
Matěj Bína:2.3.2019 16:20

HTML jsem se naučil někdy začátkem tisíciletí, takže je fajn, že tu nacházím odkazy na starší praktiky a důvody, proč už jsou zastaralé.

Ještě víc fajn by bylo, kdyby odkaz na český HTML manuál vedl přímo do relevantní kapitoly.

 
Odpovědět
2.3.2019 16:20
Avatar
MiroslavP
Člen
Avatar
MiroslavP:10.7.2019 21:05

Je to dobrý;-)

 
Odpovědět
10.7.2019 21:05
Avatar
0
Člen
Avatar
0:30.8.2019 21:01

Když tam napíšu něco s diakritikou tak to na webu napíše kosočtverec s otazníkem co mám dělat ?

 
Odpovědět
30.8.2019 21:01
Avatar
Odpovídá na 0
Michal Šmahel:31.8.2019 1:41

Ahoj, nemusíš to psát pod každou lekci. Zkontroluj si kódování. Musíš mít nastavené stejné kódování v editoru/IDE (tím pádem i v HTML souboru), v HTML hlavičce a prohlížeči. Nejčastěji se doporučuje UTF-8. Většinou stačí změnit kódování v editoru a vložit do do HTML hlavičky (head), takto (viz https://www.w3schools.com/…_charset.asp):

<head>
        <meta charset="UTF-8">
        <!-- Další obsah hlavičky -->
</head>

Pokud bys měl problém s nastavením editoru/IDE, můžeš ještě napsat. Jen prosím o uvedení konkrétního editoru/IDE a problému, který máš. Pokud nebudu vědět, jistě se najde nějaký člen ITnetwork, který s daným editorem/IDE má zkušenosti.

Odpovědět
31.8.2019 1:41
Nejdůležitější je motivace, ovšem musí být doprovázena činy.
Avatar
0
Člen
Avatar
Odpovídá na Michal Šmahel
0:12.9.2019 17:42

Díky ,ale ještě mám jeden problém nikdy se mi neobjevý na web stráce ten obrázek ,který tam dám

 
Odpovědět
12.9.2019 17:42
Avatar
0
Člen
Avatar
Odpovídá na 0
0:12.9.2019 17:42

další obrázek

 
Odpovědět
12.9.2019 17:42
Avatar
0
Člen
Avatar
Odpovídá na 0
0:12.9.2019 17:43

další obrázek

 
Odpovědět
12.9.2019 17:43
Avatar
krepsy3
Redaktor
Avatar
Odpovídá na 0
krepsy3:12.9.2019 17:49

cesta je Obrázky/111/a­vatar.png, tedy ti v src atributu chybí lomítko. Plus doporučuju složku přejmenovat na "obrazky", tedy bez diakritiky, může to způsobovat potíže.

Odpovědět
12.9.2019 17:49
Programátor je stroj k převodu kávy na kód.
Avatar
0
Člen
Avatar
Odpovídá na krepsy3
0:14.9.2019 11:04

díky

 
Odpovědět
14.9.2019 11:04
Avatar
0
Člen
Avatar
Odpovídá na krepsy3
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.

 
Odpovědět
14.9.2019 11:27
Avatar
Jaroslav Smrž
Redaktor
Avatar
Odpovídá 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

Odpovědět
14.9.2019 11:44
/* Life runs on code */
Avatar
0
Člen
Avatar
Odpovídá na Jaroslav Smrž
0:14.9.2019 11:50

díky konečně to funguje

 
Odpovědět
14.9.2019 11:50
Avatar
Jaroslav Smrž
Redaktor
Avatar
Odpovídá na 0
Jaroslav Smrž:14.9.2019 15:24

Rád jsem pomohl

Odpovědět
14.9.2019 15:24
/* Life runs on code */
Avatar
Robertos Rigáň:23. dubna 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

Odpovědět
23. dubna 18:14
Ak miluješ svoju prácu , tak to nieje práca ale hobby
Avatar
Jarmila Mizerová:1. června 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ší

 
Odpovědět
1. června 15:46
Avatar
Michael Last
Člen
Avatar
Michael Last:7. července 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í.

Odpovědět
7. července 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. července 17:50

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

 
Odpovědět
15. července 17:50
Avatar
Lukáš Navrátil:30. července 3:50

Děkuji za tutoriál :)

 
Odpovědět
30. července 3:50
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 71 zpráv z 71.