HTML Návody č.1) - Kód HTML dokumentů + Popis

Místo pro dotazy a rady ohledně programovacích jazyků (C++, C#, PHP, ASP, Javascript, VBS..) a tvorby webových stránek

Moderátor: Mods_senior

Uživatelský avatar
Againuser
Level 2.5
Level 2.5
Příspěvky: 370
Registrován: únor 15
Pohlaví: Muž
Stav:
Offline

HTML Návody č.1) - Kód HTML dokumentů + Popis

Příspěvekod Againuser » 30 dub 2015 17:14

Vážení čtenáři,

u minulého návodu jsem si četl vaše odpovědi a dávali jste mi tam spoustu rad, tak jsem se rozhodl že ten minulý návod sepíši znovu, ale tak aby to bylo delší a lépe vás to naučil.
Dnes začneme základním kódem html dokumentů a popíšeme si co jaký tag znamená.


Základní kód vypadá takhle :
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<title>Titulek stránky</title>
</head>

<body>
TEXT
TEXT..
</body>
</html>

Nyní si popíšeme co jaký tag znamená + nějaké využití.
------------------------------
<!DOCTYPE html>
Píše se vždy na začátku kódu. Je důležitý aby jste se nemuseli štvát s přepínáním vykreslovacích módů.
<html>
Tento tag píšeme pod doctype, je tam proto aby jsme věděli, že se jedná o HTML dokument.
<head>
Hlavička dokumentů, píšeme do něj <title> <meta charset>, každý html dokument by měl hlavičku obsahovat.
<meta charset>
Neboli kódování webové stránky, pokud li nemáte nastavené kódování na utf-8 zobrazuje se vám diakritické písmo takhle :
zobrazenífuj.png

Pokud ale kódování přepíšete na utf-8 bude to vypadat nějak takhle :
zobrazeníok.png

<title>
Tento tag není až tak důležitý, ale je hodně využíván, tak měř ho mají všechny webové stránky.
Zobrazuje se jako :
a)
a.png
a.png (2.84 KiB) Zobrazeno 786 x

b)
b.png
b.png (5.45 KiB) Zobrazeno 786 x

<body>
Velice důležitý tag, určuje tělo stránky, píšeme zde všechny ostatní tagy jako je pozadí, nadpisy, podnadpisy a další věci.
Když už jsme u ostatních tagu, tak jsem si pro vás nějaké připravil.
<body bgcolor="anglický barva">
Tento tag vám změní pozadí, pozor barvu musíte psát anglicky!!.
Tady máte pár z nich :
barvy.png
barvy.png (1.63 KiB) Zobrazeno 786 x

<font color="anglicky barva">
Změní barvu písma, opět anglicky, barvy máte nahoře.
<b>, <i> , <u>
<b>, vám ztuční písmo.
<i>, písmo jako kurziva
<u>, podtrhnuté písmo (nepoužívá se, plete se to s klikacím odkazem.)
------------------------------
Tohle je pro dnes všechno, doufám že se vám to líbilo, v případě zajmu napište návrhy.
}{ Pravidla fóra }{ Jsi tu poprvé ? }{ HW-Monitor }{ Návod na HJT }{
Zkus hledat se strýčkemGůůglem

Reklama
Rutherther
Level 2
Level 2
Příspěvky: 227
Registrován: říjen 14
Pohlaví: Muž
Stav:
Offline

Re: HTML Návody č.1) - Kód HTML dokumentů + Popis

Příspěvekod Rutherther » 30 dub 2015 18:38

Je to o dost lepší, ale popisy jako
Píše se vždy na začátku kódu. Je důležitý aby jste se nemuseli štvát s přepínáním vykreslovacích módů.

Neříkají skoro nic.. Čeština už se také lepší, máš spíše menší chybky, příští díl by mohl být na ještě lepší úrovni.

Uživatelský avatar
Againuser
Level 2.5
Level 2.5
Příspěvky: 370
Registrován: únor 15
Pohlaví: Muž
Stav:
Offline

Re: HTML Návody č.1) - Kód HTML dokumentů + Popis

Příspěvekod Againuser » 30 dub 2015 18:41

Děkuji, pokusím se to udělat ještě lepší.
}{ Pravidla fóra }{ Jsi tu poprvé ? }{ HW-Monitor }{ Návod na HJT }{
Zkus hledat se strýčkemGůůglem

Uživatelský avatar
x-rated
Level 5
Level 5
Příspěvky: 2124
Registrován: říjen 14
Bydliště: Praha
Pohlaví: Muž
Stav:
Offline
Kontakt:

Re: HTML Návody č.1) - Kód HTML dokumentů + Popis

Příspěvekod x-rated » 30 dub 2015 21:02

a já si myslel, že už tě konečně někdo odsoudil k trestu smrti :shock:
bgcolor="" je co za vtip? <font> je co za vtip? title neni důležitej, vůbec...
to mi ho vyndej :shock:
9900K / G.Skill 32GB@4 GHz / MXI Formula / RTX 2080 Ti / Sabrent 4 TB NVMe / X-Fi THD / HD660S / G403 / G815 / UP2715K 5K IPS / HX1000i / Define R6 / EKWB full

Uživatelský avatar
faraon
Master Level 8.5
Master Level 8.5
Příspěvky: 7397
Registrován: prosinec 10
Pohlaví: Muž
Stav:
Offline

Re: HTML Návody č.1) - Kód HTML dokumentů + Popis

Příspěvekod faraon » 30 dub 2015 22:46

No, Againuser napsal again návod, a tak dlouho bude znova a znova začínat, až se to nakonec naučí. Ale pomalu se zlepšuje :lol:

Tedy, doctype naznačuje HTML5, ale tagy I a B jsou v něm označené obsolete, a nahrazené novějšími EM a STRONG. I když já mám ty starší také radši, je to taková klasika kterou navíc každý zná z editorů, včetně toho ve kterém tohle píšu.

Tag FONT už se dneska také moc nevidí, všechny tyhle serepetičky se dělají přes styly, a málokdo si dokáže představit že se bez nich dá obejít, a dokonce napsat docela ucházející web! Barvy se dají zvolit nejenom názvem, ale i přímo kódem RGB. Je to šikovnější než různé kombinace odstínů typu LIGHT GREEN nebo DARK RED...

K tomu BGCOLOR bych doplnil ještě BACKGROUND, a s nimi související změnu barvy textu, protože černé písmo na černém pozadí asi moc vidět nebude. S tím také souvisí potřeba změny defaultní barvy odkazů, protože kombinace modrá/fialová je vhodná pro historické bílé pozadí, ale při hrátkách s barvami se z nich můžou stát neviditelné díry. Tohle všechno se nastavuje v BODY.

TITLE je hodně důležitá věc, pokud má člověk otevřenou víc než jednu stránku, protože se zobrazuje v záhlaví jednotlivých karet v prohlížeči, a také v popisu spuštěných programů v panelu.

Dvě podstatné věci by chtělo zdůraznit, a pro jistotu občas zopakovat. Nejdůležitější je, že tagy se nesmí křížit, ale zásadně vždy vnořovat. A parametry se uvádějí v uvozovkách.
"Král Lávra má dlouhé oslí uši, král je ušatec!

(pravil K. H. Borovský o cenzuře internetu)

Uživatelský avatar
CZechBoY
Master Level 9.5
Master Level 9.5
Příspěvky: 8813
Registrován: srpen 08
Bydliště: Brno
Pohlaví: Muž
Stav:
Offline
Kontakt:

Re: HTML Návody č.1) - Kód HTML dokumentů + Popis

Příspěvekod CZechBoY » 01 kvě 2015 23:45

B a I se používaji, ale na něco jinyho než jen ztucneni/zkurzivovani... Viz sémantika tagů.
Font se nepoužívá, používá se CSS.. Stejně jako některé atributy :)

Zkus si dat kód do validatoru před tím než ho sem vlozis :)
PHP, Nette, MySQL, C#, TypeScript, Python
IntelliJ Idea, Docker, Opera browser, Linux Mint
iPhone XS
Raspberry PI 3 (KODI, Raspbian)
XBox One S, PS 4, nVidia GeForce NOW

Uživatelský avatar
fatalfanatic
Level 3
Level 3
Příspěvky: 635
Registrován: srpen 12
Bydliště: Brno
Pohlaví: Muž
Stav:
Offline

Re: HTML Návody č.1) - Kód HTML dokumentů + Popis

Příspěvekod fatalfanatic » 05 kvě 2015 15:35

Ahoj, nebylo by lepší aby každý přispěl nějakým návodem ? A udělat v podstatě takovou knižní příručku pro nováčky s vysvětlivkami. Příklad Faraon třeba umí CSS, tak pokud by chtěl sepíše krátký návod spíše základ a vloží ho sem, ale třeba neumí zrovna HTML, tak by ho se vložil CzechBoY apod a nemluvě jen o tyhle dvou. A určitě by to bylo přehlednější, protože tahle struktura at už kodů apod .. na scrolování v jednom postu určitě nestačí, pokud založíš další a další příspěvek stále se to bude házet dolů a mezi tím budou, tak akorát příspěvky co je špatně co dobře jak se co používá a nepoužívá a tohle bych třeba přesunul na SZ je to jen návrh tak třeba by to takhle šlo za debatu to stojí. :)

--- Doplnění předchozího příspěvku (05 Kvě 2015 15:41) ---

Podobně jak je to třeba u Vědeckotechnické zajímavosti a nov..

--- Doplnění předchozího příspěvku (05 Kvě 2015 15:42) ---

nebo Vesmír & Paranormáni jev.. Tam to dobře fungovalo, tak proč by nemohlo tohle :)
[spoiler=Files]Moje tvorba

>> Here <<

Soubory, jsou bezpečné bez virů a ostatní havěti. Pamětní místo se nachazí na DropBox. Otázky,info případně SZ.[/spoiler]

Uživatelský avatar
x-rated
Level 5
Level 5
Příspěvky: 2124
Registrován: říjen 14
Bydliště: Praha
Pohlaví: Muž
Stav:
Offline
Kontakt:

Re: HTML Návody č.1) - Kód HTML dokumentů + Popis

Příspěvekod x-rated » 05 kvě 2015 17:28

on hlavně neni vůbec žádnej návod tady na fóru potřeba, od toho sou jiný weby, mezi nejlepší patří http://www.w3schools.com/, z českejch třeba http://www.jakpsatweb.cz/
radši nebudu rozvíjet diskuzi a teorie na téma, proč tohle dělá :silent:
9900K / G.Skill 32GB@4 GHz / MXI Formula / RTX 2080 Ti / Sabrent 4 TB NVMe / X-Fi THD / HD660S / G403 / G815 / UP2715K 5K IPS / HX1000i / Define R6 / EKWB full

Uživatelský avatar
faraon
Master Level 8.5
Master Level 8.5
Příspěvky: 7397
Registrován: prosinec 10
Pohlaví: Muž
Stav:
Offline

Re: HTML Návody č.1) - Kód HTML dokumentů + Popis

Příspěvekod faraon » 05 kvě 2015 17:39

fatalfanatic píše:Faraon třeba umí CSS

Faraon třeba neumí CSS, ale zato umí BASIC, na ten bych návod mohl napsat*. Jenom je problém že jsou tu asi tak dva, tři lidé které by to zajímalo, a každý z nich by bral návod na jiný dialekt pro jiný počítač...

Takže to by asi k ničemu nebylo. Ono by to chtělo spíš něco jako kolektivní tvorbu, jenže formát fóra se na to moc nehodí, pro tyhle účely je stvořená Wikipedie. Leda to udělat jako pradávné mailové konference, jenže ty měly dost pevná pravidla která všichni účastníci dodržovali.

* Před lety už jsem to zkusil, říkal jsem si že čtyři stránky by na úplné základy mohly stačit. Dost jsem se nadřel abych se vešel do osmi :lol:
"Král Lávra má dlouhé oslí uši, král je ušatec!

(pravil K. H. Borovský o cenzuře internetu)

Uživatelský avatar
fatalfanatic
Level 3
Level 3
Příspěvky: 635
Registrován: srpen 12
Bydliště: Brno
Pohlaví: Muž
Stav:
Offline

Re: HTML Návody č.1) - Kód HTML dokumentů + Popis

Příspěvekod fatalfanatic » 05 kvě 2015 17:55

Faraon píše:Faraon třeba neumí CSS, ale zato umí BASIC


Tak půjdeš na cvičák se samopalem a budeš se hold muset učit :D Hlavně ale matematický příklady, protože z toho jeden velký příklad vyvozuje :D

x-rated píše:on hlavně neni vůbec žádnej návod tady na fóru potřeba


Ano máš pravdu, ale já myslím že s trochou více snahy, uděláš i přehlednější návod a mnoha věci co jsem se učil právě zminované stránky "jakpsatweb" nešlo dát bud do kupy nebo jsem je vůbec nepochopil musel sem vše překládat z angličtiny. A člověk by ted řekl že otevřený brány portu na hostingu jsou primitivní mě to v tu dobu učení moc lehké teda nepřišlo opět sem musel vyhledat úplně z jiné stránky, ale je pravda že každý to vidí jinak jenže já to myslel zcela jinak než jen vysvětlení jednotlivých tagů,kodů ale spíše více do jádra všech proplematických věci co zde na foru lidi řeší. Strčuně a jasně by potom člověk nemusel zakládat téma, protože by kouknul sem.

PS: jakpsatweb a spol 50tky webových stránek s návodama na HTML,CSS,STYL.. A stejně zde vidíš problémy uživatelů, tak bud jsou ty stránky zcela k h... nebo radši jdou sem nežli jinam.

Pardon za chyby spěchám

--- Doplnění předchozího příspěvku (05 Kvě 2015 18:09) ---

Vesmír & Paranormální jev.. a Vědeckotechnické zajímavosti a nov.. taky najdeš hned na první stráně v googlu a nyní má mnoho odepsaných příspěvků v tom případě jsem taky mohl najet někam jinam, tak v tom případě to celé nechápu at je to tady nebo tam stejně je to celé postavené na hlavu :D lidi chodí tam i sem, ale nestačí jim ani jedno ale zase je to zbytečné jim to více ulehčit tak se nám to zamotalo :D
[spoiler=Files]Moje tvorba

>> Here <<

Soubory, jsou bezpečné bez virů a ostatní havěti. Pamětní místo se nachazí na DropBox. Otázky,info případně SZ.[/spoiler]

Uživatelský avatar
x-rated
Level 5
Level 5
Příspěvky: 2124
Registrován: říjen 14
Bydliště: Praha
Pohlaví: Muž
Stav:
Offline
Kontakt:

Re: HTML Návody č.1) - Kód HTML dokumentů + Popis

Příspěvekod x-rated » 05 kvě 2015 18:14

fatalfanatic píše:PS: jakpsatweb a spol 50tky webových stránek s návodama na HTML,CSS,STYL.. A stejně zde vidíš problémy uživatelů, tak bud jsou ty stránky zcela k h... nebo radši jdou sem nežli jinam.

výklad je na zmiňovanejch webech, na fórech by se měly řešit konkrétní problémy
tenhle týpek si chce z fóra očividně udělat novej a bezkonkurenčně nejhorší výkladovej web :evil:
9900K / G.Skill 32GB@4 GHz / MXI Formula / RTX 2080 Ti / Sabrent 4 TB NVMe / X-Fi THD / HD660S / G403 / G815 / UP2715K 5K IPS / HX1000i / Define R6 / EKWB full

Uživatelský avatar
fatalfanatic
Level 3
Level 3
Příspěvky: 635
Registrován: srpen 12
Bydliště: Brno
Pohlaví: Muž
Stav:
Offline

Re: HTML Návody č.1) - Kód HTML dokumentů + Popis

Příspěvekod fatalfanatic » 05 kvě 2015 18:31

x-rated píše:výklad je na zmiňovanejch webech, na fórech by se měly řešit konkrétní problémy
tenhle týpek si chce z fóra očividně udělat novej a bezkonkurenčně nejhorší výkladovej web


Tak já vám a uživatelům věřím sesmolit se dá cokoli :D, ale asi myslíš tu opičí flintu to forum jakpsatweb určitě nezachraní ani kupa diamantových kamenů teda podle mého názoru ono taky člověk by si šel hnedka koupit fáro že :D

Mám webovky je nanich 1112 řádků když vynechám volné mezery skrz přehled máš zhruba polovinu z levého kolena, neříkej mi že se nedá nic sesmolit pro běžné už. nebo začátečníky když je tedy globálně přímo zameřené forum na tuhle problematiku proč to je tady ? :D Na basic,Unity,C++ & C apod ... všude najde nějaké forum nebo stránky na kterých jsou návodu eventuálně forum pro pomoc tohle forum to dokonce má taky +- programování z toho celkového ale tady se jedná o uživatele co přijdou sem a nikoliv na forum kde je určěná problematika řešit teda jak říkáš. Podle mě by stručná příručka i kodů co zasahují do jádra vůbec neuškodila, je zcela jedno jestli uživatel vytvoří nové téma zde, kde mu napíšeš stejně "Táhni na jakpsatweb forum :D " mnohem lepší by byůlo, když už naletí sem s tím že potřebuje třeba jen primitivní kod, tak by ho mohl jednoduše vyčíst zde, místo toho aby se mu ještě odkazovalo na něco,někoho jiného. To už celý tohle forum je skoro podobnému řešní co pravíš, dalo by se říct : Mám problém s Grafickou kartou GTX a někdo ti na to napíše bež si za výrobcem on je tu od toho aby ti poradil.
[spoiler=Files]Moje tvorba

>> Here <<

Soubory, jsou bezpečné bez virů a ostatní havěti. Pamětní místo se nachazí na DropBox. Otázky,info případně SZ.[/spoiler]


  • Mohlo by vás zajímat
    Odpovědi
    Zobrazení
    Poslední příspěvek
  • HTML editor
    od BigSandy » 21 led 2025 09:51 » v Programy ke stažení
    3
    12235
    od pcmaker Zobrazit poslední příspěvek
    03 úno 2025 09:00
  • Kdo umí číst kód HTML? Doladit jednu podmínku. Příloha(y)
    od Minapark » 06 led 2025 09:21 » v Programování a tvorba webu
    22
    10008
    od Minapark Zobrazit poslední příspěvek
    20 led 2025 16:54
  • Převádění Dokumentu z MS Office do online prostředí
    od zuzana3 » 10 dub 2025 13:00 » v Kancelářské balíky
    1
    3660
    od Gerete Zobrazit poslední příspěvek
    10 dub 2025 13:48

Zpět na “Programování a tvorba webu”

Kdo je online

Uživatelé prohlížející si toto fórum: Žádní registrovaní uživatelé a 4 hosti