Jste tu poprvé? - Skrýt (musíte být přihlášeni)

Učíme se kódovat 2. - Začínáme s HTML

27. 6. 2011 v 22:39 36 Učíme se kódovat 2. - Začínáme s HTML

V tomto dílu se seznámíme s jazykem HTML, ukážeme si k čemu slouží (bude tvořit základ naší tvorby) a projdeme si většinu značek, které budete při běžném kódování potřebovat.

Co vlastně HTML znamená? Je to zkratka anglických slov HyperText Markup Language, což můžeme přeložit jako hypertextový značkovací jazyk. Hypertextový znamená, že obsah je nelineární, tedy skládá se z jednotlivých navzájem propojených částí (jednoduše - obsah se skládá z různých stránek, které jsou vzájemně propojeny odkazy). Jazyk je značkovací, protože je tvořen množinou značek (anglicky tagů) a jejich atributů (vlastností). Mezi takové značky se uzavírají části dokumentu a tím se určuje jejich význam (neboli sémantika).

Co bude náplní dnešní dílu?

Historie a vývoj HTML

Počátky HTML sahají do roku 1990, kdy byl v CERNu ve Švýcarsku navržen protokol HTTP a společně s ním také první nástřel HTML. Podstatných změn se ale HTML dočkalo až na přelomu let 1994 a 95, kdy byla vydána specifikace verze 2.0, která poprvé odpovídala syntaxi SGML. (Odbočka - SGML je také značkovací jazyk, je ale velmi rozsáhlý a poměrně komplikovaný, proto nikdy nebyl používán v takové míře, jako právě HTML. Nicméně HTML a další značkovací jazyky (např. XML) jsou podmnožinami SGML.) HTML se stalo tak populární díky své relativní jednoduchosti, kdy je možné osvojit si základy během chvíle.

Dalším milníkem je vydání verze 3.2 z roku 97, tuto verzi již vydala organizace W3C (World Wide Web Consortium), která se o vývoj HTML stará až na malé výjimky dodnes. Zatím posledním vydaným standardem je HTML 4.01 z prosince roku 99. Původně to měla být poslední verze HTML, protože se počítalo s postupným přechodem na XHTML. Nicméně XHTML se své druhé verze nikdy nedočká, 17.12.2010 byl vývoj druhé verze definitivně ukončen a s největší pravděpodobností se bude budoucnost webu ubírat směrem k HTML5, které již teď využívá mnoho webů. Tato verze by měla být hotová pravděpodobně v roce 2012 a vydání standardu se odhaduje na rok 2022. Zatím to ale vypadá tak, že v praxi bychom se měli s HTML5 běžně (což znamená, že ho bude využívat většina nových webů) setkávat kolem roku 2015, takže to není zas tak vzdálené, jak se může na první pohled zdát. Problematice HTML5 bude věnován samostatný díl ke konci seriálu, v samotném seriálu budeme používat HTML 4.01 a XHTML 1.0. Přemýšlel jsem, jestli nakonec nezůstanu pouze u HTML, nicméně syntaktické rozdíly obou modifikací jsou naprosto minimální (nebudou vám dělat problémy) a XHTML je v současnosti stále nejnovějším standardem a ještě pár let tady určitě bude, takže také dostane svůj prostor. Ale nechme zatím XHTML v klidu, budeme se mu věnovat později.

Struktura HTML dokumentu

Ještě než začneme něco tvořit, musím zmínit poslední důležitou věc - a to jaký editor budeme pro tvorbu webové stránky používat. Nebudeme používat žádný editor s grafickým rozhraním pro HTML (tedy nebudeme používat WYSIWYG editory jako je FrontPage nebo Dreamweaver), bude nám stačit obyčejný textový editor. Použít můžete jakýkoliv editor podporující UTF kódování (takže nepoužívejte poznámkový blok z windows!), pokud nemáte žádný vybraný, můžete zkusit PSPad nebo Notepad++, pro linux je dobrá volba jEdit, dobrý je i Kate. Macisté mohou využít třeba Komodo Edit. Zmínil jsem, že nebudeme používat tzv. WYSIWYG editory. To jsou editory, ve kterých člověk vytváří HTML stránku pomocí klikacích nástrojů a nemusí znát HTML kód. Používání takového programu je výrazně jednodušší, je to podobné, jako když vytváříte dokument ve wordu. Bohužel to také znamená, že nemáte kontrolu nad kódem (ten za vás vytváří program a výsledky bývají nevalné), můžete dělat jen jednoduché věci (náročnější věci bez znalosti kódu nevytvoříte) a weby jsou často nepoužitelné v různých prohlížečích. Proto se takovými editory nebudeme vůbec zajímat, pokud to myslíte s HTML aspoň trochu vážně, věřte mi, že to není ta správná cesta.

Pokud již máte nějaký editor připravený, předem si nastavte kódování na UTF-8 (standardně Nástroje > použít kódování UTF-8, případně bude mít editor něco jako záložku Formát). Toto kódování budeme používat celý seriál. Zatím to berte jako fakt, o kódováních si povíme až ke konci tohoto dílu.

Se správným programem (a prohlížečem, ve kterém budeme kód testovat) jsme připraveni na tvorbu prvního HTML dokumentu. Vytvořte si kdekoliv na vašem disku soubor, který se bude jmenovat index.html. Tento název souboru se běžně používá jako standardní, pokud v prohlížeči zadáte URL adresu směrující na nějakou složku, obvykle se defaultně vyhledá soubor index.html a ten se použije. Nyní k našemu připravenému souboru. První budu vždy uvádět zdrojový kód, pod kterým bude následovat jeho vysvětlení:

Zdrojový kód - první HTML stránka

Všechny zdrojové kódy v seriálu budu pro přehlednost vkládat jako obrázky, a každý obrázek bude odkazovat na textovou verzi. Takže pokud nechcete, nemusíte zdrojové kódy opisovat, stačí kliknout a zkopírovat.

Každá HTML stránka musí začínat značkou DOCTYPE, což je odkaz na DTD daného dokumentu. DTD definuje pro danou verzi jazyka seznam značek a atributů, které můžeme využívat. Jednoduše řečeno je to norma, která udává jednak vám, jak máte HTML dokument tvořit a jednak říká prohlížeči, jakým způsobem má web vykreslovat. Teď v úvodu se tím nebudeme zabývat, ale k podrobnostem o DTD se ještě v seriálu dostaneme. Dnes vás nechci zbytečně zatěžovat technickými detaily, raději se budu více věnovat základům a ukázkám kódu.
Po doctypu následuje značka <html>. Jak sami vidíte, html značky se zapisují do špičatých závorek, takže každá značka začíná znakem < a končí znakem >. V HTML máme dva základní druhy značek - párové a nepárové. Není to nic složitého, párové značky jsou vždy dvě, první značka daný prvek otevírá a druhá ho uzavírá (uzavírá se mezi ně konkrétní obsah, a z toho důvodu je párových značek většina). Příkladem je třeba značka <html>, která je ukončena pomocí </html> (uzavírací značka vždy obsahuje zpětné lomítko). Nepárové značky jsou ještě jednodušší, nemají uzavírací značku. Není jich mnoho, brzy taky na nějakou narazíme.
Nyní zpět k našemu příkladu a značce <html>. Tato značka uvozuje každý HTML dokument a obaluje veškerý obsah. Mezi značkami <html> a </html> je celý dokument, před něj se píše pouze doctype, a za ukončovací značku už nic nepíšeme. Jako příklad funkčnosti párových značek je to doufám dostačující, a není třeba to víc rozvádět.
Když už jsme u pojmů, různé značky mohou mít u sebe ještě atributy, několikrát zmiňované už dříve. Zápis je následující: <značka atribut="hodnota">. Význam jednotlivých atributů si vysvětlíme u konkrétních značek, toto jako ukázka zápisu zatím stačí.

Každý HTML dokument je logicky rozdělen na dvě hlavní části - hlavičku a tělo. Hlavička obsahuje informace popisující dokument, tělo pak samotný obsah dokumentu. Hlavička se nachází mezi značkami <head> a </head>, tělo zapisujeme mezi značky <body> a </body>. Toto je základní struktura, kterou najdete v každém HTML dokumentu. V našem případě máme v hlavičce 2 značky, první z nich je značka <meta>. Tato značka může mít několik různých atributů a hodnot, v tomto případě jsme určili MIME typ dokumentu a kódování dokumentu. MIME typ slouží k tomu, aby HTTP protokol věděl, jaký druh dokumentu přenáší. Každý soubor má svůj MIME typ, pro HTML soubor je to "text/html", jpg obrázky mají "image/jpeg", dalším typem je na příklad "application/pdf" pro pdf dokumenty a podobně. Více příkladů si můžete prohlédnout na české wiki. Toto je spíše informace navíc, při běžném kódování tohle neřešíte, nicméně je dobré vědět, co že to "text/html" vlastně znamená. Ve značce jsme definovali ještě UTF-8 kódování, kterému se budeme věnovat podrobněji ke konci článku. V hlavičce máme ještě jednu značku a to párový <title>, pomocí kterého určujeme titulek dokumentu, který se zobrazuje v záhlaví prohlížeče (tedy nahoře na liště).

Teď, když máme náš první HTML dokument hotový, podíváme se, jak se nám vlastně v prohlížeči zobrazí. Najděte si na disku svůj uložený soubor index.html a otevřete ho ve svém oblíbeném prohlížeči (html soubory můžete otevírat běžně dvojklikem).

Ukázka první stránky v HTML

Doufám, že se vám zobrazuje něco podobného. Jak sami vidíte, na webu se zobrazuje pouze to, co je v značce <body> a titulek.

Prakticky až do konce tohoto dílu se budeme věnovat značkám, které budete pro běžnou tvorbu webu potřebovat, všechno to budou značky, které patří do <body>. K hlavičce se vrátíme až ke konci. Možná jste si všimli, že ve zdrojovém kódu naší ukázky jsou před textem v <body> 4 mezery, ale v prohlížeči jsme žádné mezery neměli. Tyto mezery se běžně používají pro přehlednější strukturu dokumentu (aby se v tom člověk vyznal), pokud máte značku uvnitř jiné značky, tak před tu vnitřní napíšete 2 mezery nebo ji odsadíte tabulátorem. Pak je kód přehlednější, ale samozřejmě se to nesmí přehánět, potom by mohl být efekt úplně opačný. Všechny mezery a tabulátory před prvním znakem na řádce prohlížeč ignoruje a na výsledné stránce se nijak nezobrazí.

Ještě bych rád zmínil jednu věc - HTML dokument tvoří strom, tedy všechny značky lze zapsat jako strom s kořenem <html>. Z toho vyplývá jedna zásadní vlastnost, značky se nesmí křížit. Tím je myšleno, že pokud má značka nějakého potomka, tak uzavírací značka potomka musí být v kódu dříve než uzavírací značka rodiče. Zápis <html> <body> </html> </body> je proto chybný!

Popis nejpoužívanějších HTML značek

V této části popíšu naprostou většinu značek, které budete při běžném kódování potřebovat. Ještě bych předem rád přidal dva odkazy, jeden bude na dokumentaci HTML 4.01 na stránkách w3c.org (anglicky). Dokumentace obsahuje kompletní popis HTML, takže co je v ní napsané, to platí. Druhý odkaz je na českou stránku www.jakpsatweb.cz, kde najdete podrobný popis všech značek a jejich možných atributů, pro začátky se vyplatí o stránkách vědět.

Seznam jednotlivých částí, které budeme probírat:

Značky pro formátování textu

Začneme běžným textem, vytvářejícím obsah webu, který by měl být členěn do odstavců. Pro odstavec existuje párová značka <p>. Pokud máte na webu delší text, vždy by měl být mezi značkami <p> a </p>. K odstavci patří ještě jedna nepárová značka a tou je <br>. Tato značka slouží jako konec řádku, tedy text v odstavci za touto značkou se zobrazí na novém řádku. Značka <br> ale nemusí být nutně jen v odstavci, lze ji použít i jinde.
Pro vyznačení důležitosti nějakého úseku v textu máme značky <strong> a <em>. První uvedená standardně zobrazuje písmo jako tučné, a má sémanticky větší váhu než značka <em> - ta zvýrazňuje text kurzívou.

Nadpisy

Nadpisy jsou velmi důležitou částí HTML dokumentů, zejména co se týče SEO (o optimalizaci pro vyhledávače se budeme bavit až o hodně později). Nadpisy slouží pro dělení obsahu do logických celků, proto máme také více úrovní nadpisů. Celkem existuje 6 úrovní a jsou pro ně značky <h1><h6>, přičemž nadpis <h1> je nejvyšší. Nadpisy se narozdíl od značek výše nepíší do odstavců, ale zapisují se samostatně.
Jako příklad mohu uvést i tento článek, který je také psán v HTML. Název článku je nadpis úrovně <h2>, poté následují nadpisy <h3>, to je třeba nadpis "Popis nejpoužívanějších HTML značek". Nadpis této části, tedy "značky pro formátování textu" je úrovně <h4> a o pár řádek výše je tu nadpis <h5>, který uvozuje nadpisy :) Nadpis <h1> není v článku využit, ten je v hlavičce webu a slouží jako "nadpis" celého webu (není to tedy nadpis v pravém slova smyslu, ale z hlediska SEO je to takto výhodné).

Aby to nebyla jen teorie, otevřeme si soubor index.html a vyzkoušíme si, jak se tyto značky chovají.

Ukázka formátování textu

V prohlížeči by se vám mělo zobrazit něco podobného:

Zobrazení formátování textu v prohlížeči

Pokud si říkáte, že jsem nezmínil žádné značky, pomocí kterých bychom písmu změnili font, barvu apod., tak je to záměrně. I toho lze dosáhnou pomocí HTML, jde ale o zastaralé značky, které se již nepoužívají. A to z jediného důvodu, HTML má správně určovat pouze strukturu textu (tedy sémanticky - určuje co je nadpis, co je seznam, co je v textu tučné - tedy důležitější...), veškeré formátování (vzhled) patří do CSS, se kterými se seznámíme hned v příští části seriálu.
Stejně tak jste možná někdy viděli značky <b>, <i>, <u>. Tyto značky by se také neměly používat, první dvě jsou nahrazeny jejich sémantickými verzemi <strong> a <em>, poslední značka <u> sloužila k podtržení textu. Z hlediska přístupnosti by ale neměl být na webu podtržený žádný jiný text než odkaz. Proto se tato značka již nepoužívá.

Entity a komentáře

Entity slouží k textové representaci znaků, které mají v HTML nějaký zvláštní význam. Pokud jsem chtěl v minulé ukázce napsat textové <br>, tak jsem to nemohl napsat jen tak mezi text, protože prohlížeč by to chápal jako značku. Proto jsem použil entitu &lt; pro znak < a entitu &gt; pro znak >. Každá entita začíná znakem & a končí středníkem. Entita je tedy způsob, jak zobrazit v prohlížeči znak, který by jinak prohlížeč nevykresloval jako text, ale např. jako značku.
Entit je poměrně dost, rozsáhlý seznam je na anglické wikipedii, já na ukázku vypíšu jen několik základních.

Ještě se ale zmíním o komentářích. Komentář je část textu, kterou prohlížeč ignoruje. Komentář se uvozuje znaky <!-- a ukončuje pomocí -->, cokoli mezi těmito značkami se ve zdrojovém kódu zobrazí, ale prohlížeč to bude ignorovat. Komentáře slouží v naprosté většině případů k dokumentaci kódu pro lepší orientaci.

Seznam běžných entit
  • &lt; - representuje znak <
  • &gt; - representuje znak >
  • &amp; - representuje znak &
  • &nbsp; - representuje pevnou mezeru
  • &copy; - representuje znak ©
  • &euro; - representuje znak €

Opět si vyzkoušíme, jak takové entity vypadají ve zdrojovém kódu a jak se zobrazí v prohlížeči:

Ukázka zápisu HTML entit Zobrazení entit v prohlížeči

U entit je také dobré vědět, že v prohlížeči nejde poznat, jestli je nějaký znak zapsaný pomocí entity nebo čistě jako znak. Pokud tedy někde na webu zkopírujete např. znak <, ve schránce nemáte &lt;, ale jen samotný znak <. Pokud chcete zkopírovat entitu, musíte do zdrojového kódu.

Obrázky, odkazy a kotvy

Zatím jsme probírali převážně značky pro práci s textem, a teď si ukážeme, jak v HTML vytvořit odkaz a jak do stránky vložit obrázek. Pro tvorbu odkazu slouží značka <a> s atributem href, jehož hodnota je cesta, kam odkaz vede. Odkaz tedy vytvoříme takto <a href="http://www.tutoriarts.cz">odkaz na tuts</a>. Jako cesta může být použita jakákoliv URL (musí začínat daným protokolem - http://, ftp:// apod.), ale může být použita i relativní cesta, která se bere podle aktuálního adresáře, ve kterém je daný soubor uložen. Takže můžeme napsat takovýhle odkaz <a href="index.html">odkaz</a>, který vede na soubor index.html, v našem případě sám na sebe.

Speciálním typem odkazu jsou kotvy, pomocí kterých se dá pohybovat v rámci jedné stránky. Kotvu lze vytvořit přidáním atributu id k libovolnému značce a nebo pomocí značky <a name="kotva">odkaz vede sem</a>. Odkaz na takovou kotvu se dá vytvořit tak, že se do atributu href napíše symbol # a za něj název kotvy. Například nadpis minulé sekce v tomto článku v HTML vypadá takto <h4 id="entity">Entity a komentáře</h4>, takže pokud vytvořím takovýto odkaz: <a href="#entity">odkaz na předchozí sekci</a>, tak mě to po kliknutí posune o kus výš. Můžete klidně vyzkoušet - odkaz na předchozí sekci - ale pak budete muset zas scrollovat sem :) Všimněte si, že to funguje opravdu jako odkaz, na konci vaší URL v prohlížeči přibylo po kliknutí #entity.

Ke vkládání obrázků slouží značka <img src="[cesta]" alt="[alternativní text]" >. Tato značka má dva povinné atributy, do atributu src se píše cesta k obrázku (opět může být relativní i absolutní) a v atributu alt by měl být uveden alternativní text pro případ, že se obrázek nezobrazí. Speciálně pro obrázky lze použít další dva atributy - width a height. Pokud mají nastavenou hodnotu, prohlížeč změní velikost podle udaných rozměrů (udává se v pixelech), ale nezmenšuje datovou velikost obrázku, ten se pořád načítá celý. Co se týče formátů, běžně jsou na webu podporovány jpg, png a gif - je naprosto bezpečné všechny 3 používat.

Nyní si upět uděláme ukázku kódu a jeho zobrazení v prohlížeči:

HTML ukázka obrázků a odkazů HTML - zobrazení obrázků a odkazů

Seznamy

V HTML máme k dispozici tři základní druhy seznamů - nečíslovaný, číslovaný a seznam definic. Syntaxe seznamů není příliš složitá. Pro nečíslovaný seznam máme párovou značku <ul>, která obsahuje celý seznam. Jednotlivé položky seznamu se uzavírají do párové značky <li>. Stejně funguje i číslovaný seznam, jen místo <ul> použijeme <ol>. Seznamy můžeme vytvářet i vnořené, tedy do jedné položky můžeme vložit celý další seznam, ukážeme si to v příkladu. Seznam definic se příliš často nevyužívá, ale i tak je dobré o něm vědět, občas se může hodit. Seznam je ohraničený značkou <dl> a obsahuje dvě další párové značky - <dt>, která obsahuje nějaký termín, a <dd>, která obsahuje definici termínu. Opět to rychle pochopíte z příkladu:

Ukázka HTML kódu seznamů Zobrazení seznamů v prohlížeči

Seznamy vypadají v základním zobrazení jednoduše, ale samozřejmě jdou různě nastylovat pomocí CSS, což si ukážeme v příštím díle. Například seznam entit, který jste četli o kus výše, je tvořen právě takovým nečíslovaným seznamem. Seznamy se na webu využívají poměrně často, obvykle slouží jako reprezentace různých nabídek a menu, s tímto se ještě mnohokrát setkáme v pozdějších částech seriálu.

Tabulky

Tabulky jsou v HTML trochu složitější, takže si je projdeme postupně. Nejprve bych chtěl říct, že tabulky slouží výhradně pro zobrazování tabulkových dat (prostě tabulky v pravém slova smyslu). Dříve byly totiž tabulky používány (zneužívány) pro tvorbu struktury celé webové stránky. To je ovšem špatné řešení s řadou nevýhod (ještě se o tom určitě zmíním v dalším dílu). Takže zpět k tabulkám - tabulku ohraničuje párová značka <table>, řádek tabulky se vytvoří pomocí značky <tr> a buňka v řádku pomocí <td>, obě značky jsou párové. Nejjednodušší tabulka může vypadat tedy takto:

ukázka HTML tabulky

A taková tabulka se v prohlížeči zobrazí takto:

První sloupec Druhý sloupec Třetí sloupec
11 12 13
21 22 23

Následující ukázky HTML kódu už nebudu dávat pomocí náhledu obrázku s prohlížečem, ale budu je vkládat přímo do článku. Bude to tak jednodušší a přehlednější. Určitě si ale jednotlivé zdrojové kódy aspoň zkopírujte a vyzkoušejte u sebe ve svém index.html, tím se to vždy naučíte nejlépe. Stačí, když každou novou ukázku budete psát za tu předchozí, všechno samozřejmě mezi značky <body> a </body>.

Tabulka by ovšem takto vypadat neměla, správná sémantické tabulka by měla být rozdělená do tří částí - hlavička, tělo a patička - a také by měla obsahovat popisek. Pro popisek tabulky slouží značku <caption>, která následuje hned po <table>. Pro rozdělení tabulky na jednotlivé části slouží značky <thead>, <tbody> a <tfoot> s tím, že ještě existuje značku <th>, která slouží jako buňka pro záhlaví tabulky. Všechny tyto značky jsou párové. Ještě bych měl také zmínit, že u značky <table> existuje atribut summary, který by měl obsahovat detailnější popis tabulky. Zmiňované značky nejsou povinné, slouží víceméně pouze k sémantickému rozdělení tabulky a někdy se mohou hodit pro stylování pomocí CSS.

U tabulek je ještě potřeba zmínit 2 atributy rowspan a colspan. Ty udávají buňkám, jestli se mají "roztáhnout" přes více sloupců nebo řádků. Pokud je rowspan nastaven např. na hodnotu 2, tak bude daná buňka přesahovat do dvou řádků. Pokud bude nastaven colspan na 2, buňka bude přesahovat do dvou sloupců. Opět si vše ukážeme na příkladu: HTML - ukázka tabulek A taková tabulka vypadá následovně: (Pokud k tabulce přidáte parametr border="1", bude mít rámeček jako příklad. Stejně tak lze přidat cellpadding="6", každá buňka bude mít vnitřní okraje 6px. Nicméně toto není dobré řešení, vzhled tabulky by se měl správně řešit pomocí CSS, opět si ukážeme až příště. Zde jsem atributy přidal jen pro zpřehlednění.)

Seznam článků
Název článkuAutor článkuDatum vydáníPočet komentářů
Základy internetu Jaa(c) 10.2.2011 22
4. Photoshop CS5 lefiath 1.2.2011 15
Rychlý tip: Fotíme dopad kapky vody inFx 19.1.2011 10
Celkem článků: 3 články od tří autorů s 47mi komentáři

A ještě jedna ukázka pro pochopení, jak přesně funguje colspan a rowspan, pro ilustraci jen hnusná nesémantická tabulka s atributy, které už od příště nikdy nepoužijeme :)

HTML - ukázka tabulek s rowspan a colspan

a výsledná tabulka:

1 2 3
4
5
678

Toto je k tabulkám vše, určitě se k nim ještě vrátíme v příštím díle a ukážeme si, že tabulky mohou vypadat i hezky (na rozdíl od těchto). Teď už se můžeme podívat na to, jak se v HTML dělají formuláře.

Formuláře

Formuláře jsou nedílnou součástí HTML, a budeme se s nimi setkávat poměrně často. Slouží k odesílání dat od uživatele (z prohlížeče) na server, kde jsou data následně zpracována v nějakém programovacím jazyce (php, java, ...). Samotné zpracování je už záležitost programátorů, daleko přesahující náplň tohoto seriálu. My se naučíme vytvářet formuláře v HTML, o jejich odesílání se starat nebudeme.
Každý formulář je ohraničen párovou značkou <form>. Tato značka má dva základní parametry. Jedním z nich je action, který určuje, jaký script na serveru bude formulář zpracovávat. Druhým parametrem je method, díky němuž určujeme jakou metodou jsou data na server odesílána. Oboje je důležité hlavně pro programátory, my se tím nebudeme dále zabývat, ale je dobré o těchto parametrech vědět. Dalšími značkami, které se používají ve formulářích jsou <fieldset> a <legend>. Fieldset je spíše sémantickou značkou, sdružuje dohromady příbuzná formulářová políčka. Legend slouží jako popisek fieldsetu, ukážeme si na příkladu.

Prvním formulářovým políčkem, které se naučíme, je nepárová značka <input>. Toto políčko má v zásadě tři hlavní atributy, type, value a name (existují i další, například určující šířku apod.). Pomocí atributu type určujeme, jaký typ formulářového políčka máme zobrazit, value určuje hodnotu tohoto políčka a name slouží k identifikaci políčka na straně serveru (atributem name se nebudeme dále zabývat). Typů formulářových políček je několik, všechny si nyní ukážeme na příkladech:

- <input type="text" value="Jméno"> - běžné vstupní políčko

- <input type="password" value=""> - vstupní políčko pro heslo, napsané znaky se nezobrazují

<input type="checkbox" value="ano"> - zaškrtávací políčko

<input type="checkbox" value="ano" checked="checked" > - zaškrtávací políčko, s parametrem checked je standardně zaškrtnuté

Ano - <input type="radio" value="ano" name="vybrat"> - výběr více možností, všechna políčka s výběrem musí mít stejný atribut name
Ne - <input type="radio" value="ne" name="vybrat" checked="checked"> - opět funguje atribut checked

- <input type="submit" value="Odeslat"> - tlačítko slouží k odeslání formuláře

- <input type="reset" value="Vymazat"> - tlačítko, které vymaže formulářová políčka v daném formuláři

- <input type="file"> - tlačítko pro odeslání souboru

To jsou tedy všechno políčka vytvořená pomocí <input type="">, ale existují ještě další formulářové prvky:

- <button>Libovolný HTML obsah &amp;, &copy;</button> - formulářový prvek s víceméně libovolným obsahem jako jsou třeba entity nebo i HTML značky, čímž lze takto propašovat do formuláře třeba i obrázek

- <textarea name="text">Zde může být delší text</textarea> - textarea slouží k zadávání delších textů. Políčko se samozřejmě dá zvětšit, ale to se naučíme až pomocí CSS

Značka <select> je párová a slouží jako rozbalovací nabídka. Atribut size určuje, kolik možností je zobrazeno. Jednotlivé možnosti zapisujeme do párové značky <option>. Takto vypadá formulář, zdrojový kód je na obrázku výše. Pokud má být nějaká položka vybrána, použijeme atribut selected.

Posledním značkou, kterou při tvorbě formulářů potřebujeme je párová <label for="">. Ta slouží jako popisek formulářového políčka. Atribut for určuje, jaké políčko je popisováno. Proto musí mít ještě každé formulářové políčko atribut id="", který má stejnou hodnotu jako for="" u labelu. Uvidíte na následující ukázce:

HTML - ukázka formuláře
O vás




Vyberte si






Akce

-

Takže takto nějak může vypadat HTML formulář. Nepoužil jsem úplně všechna pole, ale snad je použití jasné, není to tak složité, jak by se mohlo na první pohled zdát. Několik věcí, které jsem asi ještě nezmínil - formulářová políčka se standardně zapisují do odstavců. Dále si všimněte, pokud máte správně vyplněné for u labelu a id u políčka, při kliknutí na popisek je to stejné, jako kdybyste kliknuli na formulářové políčko. Takže na příklad přepínací políčka můžete přepínat kliknutím na text. Určitě je to pohodlnější, než se trefovat na malé políčko formuláře.
Protože nemáme žádný script, který by formulář zpracovával, do action jsem vyplnil kotvu, kterou jsem nastavil na samotný formulář. Když tedy kliknete na odeslat, pouze vás to posune na začátek formuláře.

Pro některé formuláře je možné použít jako strukturu tabulku. Formulář je důležité dobře zorganizovat, aby byl co nejvíce použitelný a aby se uživateli formulář vyplňoval co nejpohodlněji. Tabulku použijeme jako logickou strukturu formuláře, abychom usnadnili jeho vyplňování. Ale určitě to není tak, že u většiny formulářů je nutné používat tabulku, opravdu je to individuální záležitost. Někdy je to prostě vhodné, někdy to naopak může být naprosto nevhodné - tady si dovolím ukázat jeden příklad, kdy může tabulka použitá ve formuláři naopak zhoršit jeho použitelnost:

Chybný formulář v tabulce

A kde je problém u takového formuláře? Zkuste si procházet formulářová políčka pomocí klávesy tab. Zjistíte, že se políčka prochází ve špatném pořadí, tedy 1-3-2-4. Stejný problém nastane na příklad u hlasové čtečky a u podobných alternativních zařízení, která čtou webovou stránku lineárně, tedy přesně v tom pořadí, jak je napsána ve zdrojovém kódu.
Jak jsem ale řekl, někdy se tabulka pro formulář může hodit, někdy ne. Hlavní je tedy myslet u toho co kóduji, nedělat různé věci stejným způsobem jen proto, že to může být pro vás pohodlné. (Pozn. lef: V případě složitějších formulářů doporučuji tabulky používat - je to jednodušší, přirozenější a nenáročnější, bez toho aby to nějak uživateli škodilo. Navíc formuláře splňují podmínky tabulkového obsahu, protože jde o sled opakujících se dat stejného typu.)

Další užitečné značky

Tímto jsme prošli většinu základních značek, které budete potřebovat. Ještě ale musím zmínit několik značek, které nepatří do žádné kategorie. Jsou to zejména značky <div> a <span>. Tyto dvě značky nenesou žádný sémantický význam. Používají se hlavně pro "konstrukce" webových stránek, tedy jako obal společných částí (například boční sloupec apod.) a jako pomocné značky k vykreslování grafiky stránky. Jejich využití a rozdíly pochopíte hned v následujícím dílu, až se naučíme CSS.

Mezi značky, které ještě stojí za zmínku patří <abbr>, která se používá pro vysvětlení nějakého pojmu, případně zkratky. Použití je jednoduché:
<abbr title="HyperText Markup Language">HTML</abbr> se zobrazí v prohlížeči jako HTML.

Pak existují ještě sémantické značky jako je například <address>, do které by se na webu měla zapisovat adresa, jinou podobnou značkou je <code>, do které by se měl zapisovat zdrojový kód, pokud je zveřejněn někde v textové formě. Samozřejmě značek existuje poměrně hodně, v článku jsem zmínil ztěží polovinu. Ty co jsem nezmínil se ale buď již nepoužívají, protože jsou zastaralé a jejich chování lze nahradit pomocí CSS, a nebo se používají opravdu minimálně. A opravdu nerad bych z tohoto dílu dělal telefonní seznam, už takhle je tu popsaných značek dost. Určitě jsem vás neochudil o nic zásadního, při běžné tvorbě webu si vystačíte se značkami, které jsem zde uvedl. Pokud by vás přeci jen zajímalo, co všechno za značky existuje, na jakpsatweb.cz si můžete prohlédnout kompletní abecední seznam.

Přeci jen jsem ještě nezmínil všechny důležité značky. Na začátku článku jsem slíbil, že se vrátím k značkám, které patří do hlavičky, tedy do <head>. Už jsme se seznámili se značkou <title>, která nám udává titulek okna prohlížeče. Další značkou, která patří do hlavičky je nepárová <meta>. Ta obsahuje různé informace, které obvykle slouží různým programům (prohlížečům, vyhledávačům), nikoliv čtenářům webu. Pomocí těchto značek lze omezeně posílat data v HTTP hlavičkách (jako jsme poslali kódování a MIME typ dokumentu hned v prvním ukázkovém souboru) a jsou zde i jiné informace. Vesměs ale s těmito značky není moc co vymýšlet, lze zde např. vyplnit pro vyhledávače klíčová slova a popis stránky, nicméně to už je nyní spíše pozůstatek z historie, než opravdu hodnotný údaj pro vyhledávače. Pokud se chcete dozvědět o značce meta více, opět vás odkážu na stránky jakpsatweb.cz, kde má tato značka podrobný popis. Až budeme dělat konkrétní stránku, ještě se o nějakých možnostech zmíním, ale zatím to stačí.

Dále se ještě v hlavičce vyskytují značky <link> a <style>, ale o těch budu psát až v příštím dílu, protože slouží zejména pro vkládání CSS do HTML stránky. Posledním značkou, kterou zde zmíním, je <script>, ta slouží pro vkládání scriptů (zejména javascriptů), k tomu se také později dostaneme. To už je opravdu vše, následuje rekapitulace všech probraných značek a závěrem nás čeká doplňková teorie.

Rekapitulace značek, které byste si měli z dneška odnést

  • Struktura HTML dokumentu
    • <!DOCTYPE> - určuje normu dokumentu
    • <html> - párová, obsahuje celý HTML dokument
    • <head> - párová, hlavička dokumentu
    • <title> - párová, titulek okna prohlížeče
    • <body> - párová, tělo dokumentu
  • Formátování textu
    • <p> - párová, slouží pro vyznačení odstavce
    • <br> - nepárová, slouží jako konec řádku
    • <strong> - párová, vyznačuje tučný text
    • <em> - párová, vyznačuje kurzívu (sémanticky menší důležitost než <strong>)
    • <h1> - <h6> - párové, určují jednotlivé úrovně nadpisů
  • Entity a komentáře
    • &lt; &gt; &amp; &nbsp; - nejběžnější entity
    • <-- --> - komentář v HTML
  • Obrázky a odkazy
    • <img src="[cesta]" alt="[alternativní text]"> - nepárová, vložení obrázku s adresou [cesta], používáme jpg, png, gif
    • <a href="[cesta]"> - párová, odkaz na danou cestu nebo název kotvy začínající znakem #
  • Seznamy
    • <ul> a <li> - obě párové, nečíslovaný seznam a jeho položka
    • <ol> a <li> - obě párové, číslovaný seznam a jeho položka
    • <dl>, <dt> a <dd> - všechny párové, seznam definic
  • Tabulky
    • <table>, <tr>, <td> a <th> - párové značky, pro tabulku, řádek a buňku resp. buňku v záhlaví
    • <caption>, <thead>, <tbody> a <tfoot> - párové, nadpis tabulky a poté sémantické rozdělení jednotlivých částí tabulky
  • Formuláře
    • <form action="" method="" > - párová, obsahuje celý formulář
    • <input type="" name="" value="" > - nepárová, formulářové políčko s type text, password, checkbox, radio, submit, reset, file
    • <textarea> - párová, políčko pro delší texty
    • <select>, <option> - párová, rozbalovací nabídka a její položka
    • <button> - párová, políčko, které může obsahovat i značky a entity
    • <textarea> - párová, políčko pro delší texty
    • <fieldset> a <legend> - párové, blok formuláře a jeho popisek
  • Další užitečné značky
    • <div> a <span> - párové, nesémantické značky pro tvorbu struktury webu
    • <abbr title="">, <adress>, <code> - další různé značky
  • Značky používané v hlavičce
    • <meta> - nepárová, různé informace pro prohlížeče, vyhledávače apod.
    • <link>, <style>, <script> - slouží pro vložení CSS / scriptů do stránky

Chcete si ještě procvičit seznamy, entity a práci s textem? Zkuste si sami vytvořit seznam, který jste si právě přečetli (tedy rekapitulaci značek). Podle toho, jak ho vidíte v prohlížeči, byste ho měli být schopni zapsat v HTML. Asi vás všechny nedonutím to udělat, ale pokud se to chcete opravdu naučit, dříve nebo později budete muset začít tvořit vlastní kód. Opisování příkladů a jejich zkoumání je samozřejmě dobré, ale až když budete sami muset něco vytvořit, tak se to pořádně naučíte. Pokud si chcete ověřit správnost vašeho pokusu, tak tady máte řešení.

Zásady a principy tvorby HTML dokumentů

Validní dokument

Jako každý jazyk, i HTML má svá pravidla. Validita nám říká, jestli HTML dokument tato pravidla dodržuje nebo ne. Validita nám ovšem ověřuje pouze syntaktickou správnost dokumentu, mohli bychom ji přirovnat ke gramatice v běžném jazyku. Pokud je tedy dokument validní, neznamená to, že je naprosto správný (stejně tak pokud napíšete větu bez gramatické chyby, neznamená to, že ta věta dává smysl).

Na kontrolu validity stránky se používá validátor - těch je několik, nicméně my budeme používat ten oficiální přímo od W3C - naleznete ho na adrese validator.w3.org. A jaké chyby tedy vlastně validátor odhalí? Typicky jsou to chyby, když zapomenete ukončit párovou značku, napíšete značku, která neexistuje, použijete značku někde, kde se to nesmí a podobně. Validátor je (bohužel) pouze v angličtině, takže se budete muset naučit aspoň pár základních pojmů. Výsledky z validátoru mohou někdy být trochu matoucí, ukážeme si jak validátor reaguje na obvyklé chyby. Tady máme jeden takový nepovedený kód:

Chybný HTML kód, ukázka validátoru

A pokud vložíte tento kód do validátoru, zobrazí vám tuto stránku:

Modrým textem je popsáno, co nám vlastně validátor říká:

Výstup z w3 validátoru

Sémantický dokument

Pokud je validita jakási gramatika dokumentu, pak sémantika by šla přirovnat ke stylistice. Sémantika nám říká, k čemu máme danou značku používat. Protože to nejsou žádná konkrétně daná (psaná) pravidla, neexistuje ani žádný sémantický validátor. A co může být vlastně z hlediska sémantiky špatně? Jak jsem už psal, dříve se často používaly pro tvorbu struktury webu tabulky. Byla to velmi často tabulka se třemi řádky. První řádek sloužil jako hlavička, druhý řádek měl tři buňky (levý a pravý sloupec a nějakou obsahovou část) a třetí řádek byl patička. Což je špatně, protože tabulka slouží k uchování tabulkových dat a ne k tvorbě struktury stránky. To je tedy nesémantické řešení. Jde hlavně o to, uvědomit si k čemu vlastně daná značka slouží a jestli ji k tomu používám. Protože nejsou žádná konkrétně definovaná pravidla, těžko se to popisuje. Určitě se ale o sémantice budu v průběhu seriálu ještě zmiňovat, vždy když narazím na nějaký konkrétní problém.

Jak jsem již zmínil dříve, v HTML existují i značky, které nenesou žádný sémantický význam. Jsou to značky <div> a <span>, které se používají obvykle pro tvorbu struktury webu, případně pro formátování prvků, ke kterým se neumíme pomocí CSS jinak dostat (uvidíte příště). Tyto značky jsou rozhodně užitečné a potřebné, ale zároveň je dobré využívat je rozumně. Tím, že dané značky nemají žádný sémantický význam, tak jdou teoreticky použít úplně všude. To ale není dobré, vždy je lepší se zamyslet, jestli by daný problém nešel řešit pomocí nějaké jiné sémantické značky, případně jestli daný div/span vůbec musíme použít. Značky <div> a <span> jsou tedy užitečné, ale používejte je s rozumem!

Oddělený vzhled (forma) od obsahu

Dalším principem při tvorbě HTML dokumentů je oddělovat vzhled dokumentu od obsahu. Jak jsem řekl hned na začátku, HTML slouží pouze k popsání dokumentu, není určeno k formátování dokumentu. Vše, co určuje formátování dokumentu patří CSS, o tom hned v dalším dílu. HTML nám jen rozděluje text do logických částí, ale neříká nám, kde bude mít text jakou barvu, jaký obrázek bude na pozadí hlavičky apod. To vše se řeší v CSS.

Kódování HTML dokumentů

Aby v počítači existovala vůbec nějaká písmenka a znaky, je nutné je zapsat do kódovací tabulky. Takových tabulek existuje několik:

  • ASCII - obsahuje 128 znaků anglické abecedy, je to 7mi bitové kódování (pro jeden znak používá 7 bitů)
  • ISO/IEC - 8bitové kódování, které rozšiřuje původní ASCII o dalších 128 znaků, které je možné využít v konkrétním jazyce.
  • Unicode - univerzální kódovací tabulka, obsahující naprostou většinu znaků (přes 100000). Na rozdíl od jednobytových ASCII/ANSI/ISO kódování (jeden znak = jeden byte), je Unicode vícebytové kódování (jeden znak může být tvořen až třemi byty).
  • ANSI - kódovací tabulky windows, obsahuje specifické znaky

Na webu můžeme prakticky využívat tři různá kódování obsahující české znaky. Jsou to iso-8859-2 (ISO/IEC), UTF-8 (unicode) a windows-1250 (ANSI). My budeme používat UTF-8, ale prakticky není rozdíl, pokud byste použili iso. Co se týče kódování windows-1250, s největší pravděpodobností bude fungovat jak má, nicméně já osobně vám ho k používání na webu nedoporučuji.

Závěr

Pro tento díl to bude vše, původně jsem měl ještě v plánu probrat další témata, už takhle je ale článek dost dlouhý. Příště začneme se slibovanými CSS a pak asi vložím do seriálu jeden kratší článek, který se bude zabývat více tím, k čemu je doctype, jaké jsou zobrazovací režimy prohlížečů a jak to vlastně je s webovými prohlížeči. Webovým prohlížečům se samozřejmě musíme aspoň trochu věnovat také, jak časem zjistíme, různé prohlížeče se mohou chovat různě pro stejné zdrojové kódy, ukážeme si tedy jak takové situace minimalizovat a jak jim předcházet.

Zdrojový soubor : Není k dispozici

Komentáře k článku

Nejste přihlášeni - před odesláním příspěvku vyplňte protispamovou kontrolu níže - váš komentář bude viditelný až po schválení správcem. Pro okamžité schválení se přihlašte, nebo registrujte. Registrace nezabere déle než minutu.

  • :-D
  • 8-|
  • :-/
  • 8-)
  • :-(
  • :-O
  • =(
  • =D
  • :-)
  • <3
  • ;-)

* Povinné položky

  • #36
  • Lojza
  • 12. June 2015 | 18:53
  • Skupina: Neregistrovaní

mám stejný problém jako neregistrovaný kolemjdoucí předemnou, článek jinak vypadá bezkonkurenčně dobře, je v plánu nějáké pokračování (vim že je to váš koníček a bude to až bude čas a nálada spíš se ptám kvůli aktuálnosti)

  • #35
  • Neregistrovaný kolemjdoucí
  • 12. June 2015 | 18:50
  • Skupina: Neregistrovaní

Mám stejný problém jako neregistrovaný kolemjdoucí přede mnou

  • #34
  • Neregistrovaný kolemjdoucí
  • 7. May 2014 | 22:04
  • Skupina: Neregistrovaní

proc se mi nezobrazuji nektere obazky jako hned prvni zdojovi kod?

  • #33
  • ivan
  • 16. February 2014 | 20:55
  • Skupina: Neregistrovaní

nejlepe napsane z tech, co jsem cetl

  • #32
  • Jaa(c)
  • 12. March 2012 | 21:45
  • Skupina: Autoři / Redaktoři

Bohužel teď nemůžu nic slíbit. Nedávno jsem ještě myslel, že na to budu mít čas, ale nakonec to nevyšlo. Chtěl bych pokračovat, ale opravdu teď nemůžu slíbit žádné datum :/ Z psaní nemám nic jiného než dobrý pocit, takže jednoduše musím preferovat jiné věci...

  • #31
  • paulik30
  • 12. March 2012 | 15:39
  • Skupina: Registrovaní Uživatelé

Ahoj,chci se zeptat jestli se bude pokračovat nebo je to konečná?Ty první dva články se mi moc líbily,ale od tý doby už uplynulo dost vody:-( a pokračování bohužel nikde.:-( :-(

  • #30
  • Vencab
  • 9. February 2012 | 23:47
  • Skupina: Neregistrovaní

Vážně dobrý článek. Škoda, že se to tak zaseklo :-(

  • #29
  • Jaa(c)
  • 29. August 2011 | 18:36
  • Skupina: Autoři / Redaktoři

Nástin probírané látky je v prvním dílu (aspoň myslím). Během seriálu dojde i k nakódování nějakého složitějšího designu.

  • #28
  • Bruce
  • 26. August 2011 | 13:13
  • Skupina: Registrovaní Uživatelé

Veľmi dobrý článok. Ďakujem za tento seriál. Ja by som sa však chcel niečo opýtať: Niekde som čítal že tento seriál bude mať približne 10 častí. Predpokladám že v dalšej časti bude rozoberané CSS takto podobne, ako je to v tomto článku. Ale čo bude náplňou dalších častí tohoto seriálu? A čo budeme my začiatočníci vedieť na konci tohoto seriálu? Budeme napríklad vedieť nakódovať už aj nejaký zložitejší dizajn? Možno je to veľmi trúfalá otázka, ale nedalo mi sa to nespýtať ;-)

  • #27
  • lefiath
  • 13. July 2011 | 21:32
  • Skupina: Správci

@uhec: Ale tohle není naše práce, je to náš koníček. Já otázky "kdy to bude" většinou musím ignorovat, protože na to nemám co napsat - bude to, až bude dostatek času to dodělat.

  • #26
  • Jaa(c)
  • 13. July 2011 | 11:54
  • Skupina: Autoři / Redaktoři

Odhadovaný termín nejde odhadnout, záleží, jak bude čas a nálada. Nicméně dřív jak za měsíc to nebude, protože příští tejden odjíždim do Norska...

  • #25
  • uhec
  • 13. July 2011 | 10:13
  • Skupina: Registrovaní Uživatelé

Už aby tu bylo pokračování. Myslím že kdyby ste po každém díle napsali odhadovaný termín následovníka série ušetříte dost otázek a navíc vás to donutí naplno na tom zapracovat :-D . Jinak velmi dobrá práce, děkuji. :-)

  • #24
  • Jaa(c)
  • 30. June 2011 | 11:32
  • Skupina: Autoři / Redaktoři

Ano, to bude také součástí seriálu, nicméně určitě to nebude v příštím dílu. To bude úvod do CSS a bude vypadat cca podobně, jako tento díl o HTML.

  • #23
  • create
  • 30. June 2011 | 11:11
  • Skupina: Registrovaní Uživatelé

Omlouvám se za spam, ale chtěl bych se ještě jakožto začínající kóder zeptat, jestli bude taky vysvětleno v dalším seriálu o CSS jak nakódovat navržený design z Photoshopu?

  • #22
  • create
  • 30. June 2011 | 10:56
  • Skupina: Registrovaní Uživatelé

Díky, jinak, už se nemůžu dočkat na seriál o CSS ;-)

  • #21
  • Shinoda
  • 29. June 2011 | 08:56
  • Skupina: Registrovaní Uživatelé

Jaa(c):
zkus zadat do googlu např. jakpsatweb.cz, tutoriarts.cz - hned první výsledek co to vyplivne je index webu s textem z description..

To poskakování ještě hodně dělají reklamy (horní bannery).. Např. na bl*ém vodafonu u posílání sms z netu to vždycky poskočí kvůli banneru a člověk pak klikne někam jinam než chtěl :-D (třeba na reklamu)..

  • #20
  • stope32
  • 29. June 2011 | 08:34
  • Skupina: Neregistrovaní

@Jaa(c) a tomasnikl: Právě proto mě to překvapuje - za celou dobu, co dělám webdesign, jsem se s více H1 na jedné stránce ještě nesetkal... Můžete uvést nějaké příklady ať se podívám na jejich ranky apod?

  • #19
  • Jaa(c)
  • 28. June 2011 | 23:27
  • Skupina: Autoři / Redaktoři

@Shinoda: pokud zadám do googlu URL webu, tak mi vypíše obvykle první text v body i když jsou meta tagy vyplněné. Netvrdím že vždy, ale imho většinou ano.

S nastavováním rozměrů u obrázků souhlasím, přinejmenším nastavit výšku má smysl. Určitě se o tom někdy v seriálu zmíním. Taky nemám rád když text poskakuje, ale když sem vyplňoval výšky u všech obrázků v tomhle článku, tak sem si řikal, že bych to poskakování i přežil :-D

  • #18
  • Shinoda
  • 28. June 2011 | 22:59
  • Skupina: Registrovaní Uživatelé

tomasnikl: na seo servisu doporučují pouze 1 nadpis h1, vychází to pravděpodobně z toho, že daná stránka (1 stránka webu) je jakýsi dokument (text), který by měl být označený názvem a ten název dokumentu by měl být jen jeden..

jaa(c):
"vyplnit pro vyhledávače klíčová slova a popis stránky, nicméně to už je nyní spíše pozůstatek z historie, než opravdu hodnotný údaj pro vyhledávače" to bych zas tak netvrdil, pokud zadáte do googlu název webu (doménu), tak se ve výsledcích vyhledávání zobrazí popis webu, takže smysl pro vyhledávače/hledající lidi tam je velký.

"Značky <div> a <span> jsou tedy užitečné, ale používejte je s rozumem!" - to je dobrá rada, občas je web trochu "předivován" (zbytečně), jindy je to ale nutnost kvůli (dynamické) grafice webu.

Jinak rozhodně doporučuji nastavovat width a height u obrázků i když je budete chtít vykreslit v přirozené velikosti. Díky tomu si prohlížeč vyhradí požadované místo a text pak nebude odskakovat po načtení obrázků. To mi trhá nervy když začnu číst text, pak až se načtou obrázky a text mi odskočí někam úplně jinam.. Ještě doporučuji volit výstižné názvy pro obrázky (vyhledávače to čtou), ne foto1, foto2 apod.

Každopádně dobrý článek..

  • #17
  • tomasnikl
  • 28. June 2011 | 20:41
  • Skupina: Registrovaní Uživatelé

stope32: pouzivat vice nadpisu H1 se bat nemusis. Neni to nijak penalizovano zadnym vyhledavacem a je to opravdu standartni vec. Ovsem ne kazdy to vi a proto se urcite setkavas s pouzitim pouze jednoho H1 nadpisu.

Jinak s tim, ze h1 na logo je vhodna jen na homepage vicemene souhlasim.. je to ale dost diskutabilni. Nekdy je vhodne pouzit h1 na logo (titulek webu/firmy) a zaroven na nadpis stranky. Nekdy se dokonce ani nadpis H1 nepoziva (jen v nejakych pripadech), jelikoz kdyz mas na 100 strankach webu totozny nadpis H1, tak to ma vpodstate nulovou hodnotu. To je ale spise diskuze na zalozeni tematu ve foru, tady uz to celkem odbocuje od tematu clanku.

  • #16
  • Jaa(c)
  • 28. June 2011 | 18:10
  • Skupina: Autoři / Redaktoři

@stope32: Tak 2 h1 na webu se používají docela běžně, tam bych se asi penalizace moc nebál. Ale popravdě nejsem žádný SEO expert, takže o tom se hádat nebudu :) Co se týče frameworků, v plánu nejsou. Jaké konkrétně by sis představoval?

  • #15
  • stope32
  • 28. June 2011 | 15:38
  • Skupina: Neregistrovaní

@Jaa(c): Použití více H1 na jedné stránce sice může být validní, nevim ale jestli bych byl ochoten riskovat případnou penalizaci ze strany Google s ohledem na rozumné SEO. Na druhou stranu po rychlém dotazu směrem ke kolegovi - SEO mágovi - musím poupravit svůj předchozí příspěvek: H1 jako nadpis-logo je vhodný na index, v podstránkách pak nejlépe jako název konkrétní stránky ("služby", "pracovní oděvy" atd).

OT: nevim jestli je to v plánu, ale možná by se do osnovy hodil i článek probírající některé dobré frameworky ;-)

  • #14
  • Royal Crown
  • 28. June 2011 | 11:53
  • Skupina: Registrovaní Uživatelé

congratulation! :) Opět výborný článek... Snad i lepší než předchozí díl... Jen tak dál... Akorát se mi vždy nechce čekat, než výjde další díl... :( Ale chápu, že toho máte hodně a oceňuji co pro nás děláte. :);)

  • #13
  • Jaa(c)
  • 28. June 2011 | 11:02
  • Skupina: Autoři / Redaktoři

@stope32: Díky za komentář, co se týče nadpisů, tak tam souhlasím, nicméně h1 může být použit i třeba jednak na nadpis webu, druhak na nadpis jednotlivých stránek článků atp. Nikde není psáno, že by byl h1 unikátní tag na stránce... Záleží na konkrétní situaci.

@tomasnikl: Mám připravenou osnovu, teď to vychází na 11 článků, pro každý článek mám několik bodů, které bych tam chtěl probrat. Zbytek se dodělává za chodu, třeba v tomhle článku jsem toho chtěl probrat víc, ale už takhle je dost dlouhý, tak jsem ho raději nechal opravdu jen základům HTML a některé témata proberu později. Zatím si to ale nechám pro sebe, je to opravdu jen pracovní verze, není to konečné...

  • #12
  • lefiath
  • 28. June 2011 | 10:06
  • Skupina: Správci

@Jonas Krutil: Tohle platí jen pro xhtml a potom až u html5. U html4 se neukončují.

// Ten formulář co nejdřív spravíme. Jsou povolené značky strong a a. Nenapadlo mě že to může dělat problémy když to někdo napíše jen tak.

  • #11
  • Jonas Krutil
  • 28. June 2011 | 09:54
  • Skupina: Neregistrovaní

- Tag img a defakto vsechny tagy, ktere nemaji svou "uzaviraci variantu" a stoji "sami o sobe" je dobre ukoncovat lomitkem /
Napriklad <br />

- K uvozovkam nize -> pouzivat vsude, kde to jen jde. Na nejake bajty navic az tak nehrajeme.

  • #10
  • tomasnikl
  • 28. June 2011 | 09:17
  • Skupina: Registrovaní Uživatelé

- HTML vs XHTML - ok, diky za info :)
- Notepad jsem nyni otevrel na Windows XP a je to tam :o) mozna se to tam ale objevilo s nejaky service packem, sam jej ale take nevyuzivam :)
- lomitko: Stane se :o) hlavne ze to je v prikladech dobre
- jo jo, mas pravdu ze je to vpodstate drobnost, ja to spis napsal proto, ze prave o vikendu jsem byl na vesnici kde se rychlost internetu pohybovala od 700b - 1,5Kb / s :) takze zasadni problem byly javascripty, css styly a obrazky..
- nadpisy: napsane to je hezky, pro to zakladni pochopeni az az dostacujici :)
- tak to jsem nevedel, diky za info..
- jj asi jsou takoveto komentare nepodstatne.. zacatecnikum se tim zamota hlava, pak nekde uvidi zapisy bez uvozovek a zacnou to psat vsude a ejhle, prestane jim to fungovat :o)
- jo jo, to by u textarey melo byt take, to mi take uniklo ;)

jinak by me celkem zajimalo, jestli mate vymyslene clanky serialu.. kolik by jich melo byt a jaka temata se proberou. Jestli to je tajne, respektuji, jestli to je stale ve vyvoji tak nema cenu to zminovat a nechame se prekvapit :o) Jeste jednou diky za fajn clanek.

Tom

  • #9
  • stope32
  • 28. June 2011 | 08:54
  • Skupina: Neregistrovaní

Několik úvah k textu (i komentářům):

1) Kotva by vždy měla obsahovat TITLE (kvůli SEO i např. jako doplňující info pro uživatele)
2) H1 je opravdu nejvhodnější jako nadpis-logo celého webu, výskyt dalších nadpisů není omezen (můžete mít 4x H2, ale vždy v logickém pořadí H2 -> H5)
3) Doporučuju přípravu stylů pro nadpisy až k H5 - hlavně pokud je web na CMS a hrozí, že admin bude to textu sypat všechny typy
4) Debata typu XHTML 1.0 vs HTML 4.01 je IMHO zbytečná, hlavně proto, že trollové ji vedou už roky. Souhlasím s autorem, že správným směrem (aspoň v současnosti) je HTML 5 a nebál bych se ho ve vhodné míře použít už nyní - sám na HTML 5 stavím celé layouty (a pro IE používám script Remyho Sharpa).
5) Jediné místo, kde má smysl mazat mezery jsou inline a inline-block elementy. U blokových mezery nehrají roli a rozdíly v jednotkách kB u zdrojových souborů už snad několik let nehrají roli...

  • #8
  • Jaa(c)
  • 28. June 2011 | 01:51
  • Skupina: Autoři / Redaktoři

Já zatím ani tak nemluvil o používání. Sám taky kóduju v X 1.0 Strict. Jak jsem už psal, v tutoriálu bude mít XHTML svůj prostor a bude na každém, co se rozhodne používat. Ale z důvodu, že Xko je slepá vývojová větev jsem se rozhodl tutoriál psát v HTML, zakončit to článkem o HTML5 a Xko probrat spíš naokraj, než aby to bylo opačně...
Před dvěma lety jsem to taky viděl jinak, ale tak člověk musí tak nějak reagovat na tu aktuální situaci... :-)

Jde mi prostě spíš o koncepci seriálu jako celku, prostor dostane oboje a nikoho nebudu do ničeho nutit...

  • #7
  • Peppy
  • 28. June 2011 | 01:36
  • Skupina: Registrovaní Uživatelé

@Jaa(c) (#6): Ja (imho) preferujem XHTML (1.0 T) pred HTML 4.01 aj napriek tomu, že je to mŕtva vývojová línia. Nejak nevidím dôvod používať HTML 4.01 len z dôvodu, že je XHTML mŕtve.

  • #6
  • Jaa(c)
  • 28. June 2011 | 00:50
  • Skupina: Autoři / Redaktoři

Ahoj,
díky za podnětný komentář!

- HTML x XHTML - částečně to zmiňuji již v článku, hlavní důvod je ten, že v současnosti je vývoj XHTML mrtvý a web kráčí směrem k HTML5. Takže seriál bude založen na HTML, nicméně X dostane taky svůj prostor někdy později.

- přiznám se, že jsem ho už pár let neotevřel, ale imho tam ta podpora nebývala. :)

- pravda, myšleno je samozřejmě lomítko, nevím jak to mohlo projít tolika korekturami.

- ano, s těmi mezerami to tak je, ale v současné době už těch pár kB nehraje roli - i v mobilu. Pokud někdo bude chtít navštívit web v téhle době s připojením 1.5kbps, tak bude mít mnohem větší s jinými věci než s whitespaces. Neříkám, že to není pravda, ale snažil jsem se v tomto dílu držet co nejzákladnějších věcí a neplést do toho podobné úvahy (článek se pak z ničeho nic nafoukne 2x a informační hodnota rapidně klesá).

- k nadpisům: nikde netvrdím opak. Nadpisy na tuts byl pouze příklad jak asi tak nadpisy na webu vypadají a k čemu se používají. Diskuse o tom, který nadpis by měl kde být, případně o více h1 opět nemají smysl v tomto úvodu rozvíjet.

- na tohle jsem čet už takovou hromadu debat a nikdy ne s jasným koncem. Já osobně se přikláním k variantě, jak je psáno v článku. Co se týče hlasových čteček, tak ty rozeznávají CSS, protože existují CSS přímo pro modifikaci hlasového výstupu (vlastnosti jako volume, speak, pause, cue atd.), které mohou řešit mj. daný problém.

- ano, lze používat i zápis bez uvozovek, ale jsem spíše zastáncem nějakého jednotného stylu. Používat uvozovky někde a někde zase ne akorát vede k tomu, že je člověk nenapíše někam, kam patří. Rozhodně tím nechci začátečníkům motat hlavu. Co se týče datové velikosti , opět v naprosté většině případů nepodstatné.

- pravda, navíc jsem u textarei zapomněl uvést povinné atributy cols a rows. Opravím.

  • #5
  • tomasnikl
  • 28. June 2011 | 00:22
  • Skupina: Registrovaní Uživatelé

:o) najdi bug na tutoriarts a vyhravas :).. koukam kdyz do komentare dam tag ".<.b.>." (bez tecek), tak se mi interpretuje opravdu jako html tag a veskery text to obarvilo tucne :) sup sup opravit (nebo to nekoho zacne lakat zkouset jine veci) :)

  • #4
  • tomasnikl
  • 28. June 2011 | 00:19
  • Skupina: Registrovaní Uživatelé

Ahoj,

dovolim si opet trosku okomentovat clanek (budu rad (a myslim ze nejen ja) za nejakou diskuzi, kdyz uz autor napise takovy clanek)... v prvni rade bych chtel rict ze me celkem potesil a doufam, ze hodne lidem pomuze at konecne weby vypadaji hezky i po otevreni zdrojoveho kodu :)

- zajimalo by me proc se autor priklonil k HTML a ne k XHTML?
- poznamkovy blok z Windows podporuje UTF-8 :) Kdyz se da Soubor - Ulozit jako tak lze vybrat kodovani, ktere clovek potrebuje.. donedavna jsem to ale sam nevedel :)
- "uzavírací značka vždy obsahuje zpětné lomítko." NN, uzaviraci znacky obsahuji jen lomitko "/" (zpetne lomitko "\" se v html nepouziva vubec)
- mezery v html kodu jsou opravdu dobre pro vyvoj webu (aby byl kod prehledny), ovsem pred samotnym deploymentem webu doporucuji veskere mezery vymazat a kod minimalizovat (jsou na to nastroje). Je to z toho duvodu, ze se tim usetri nekdy i nekolik Kb velikosti souboru.. to uvitaji uzivatele, kteri navstivi web z mobilu nekde z vesnice kde je rychlost internetu mensi nez 1,5kb/s (coz se mi zrovna o vikendu stalo). Jiste zde v serialu budou zminene developerske nastroje prohlizecu, ty si kod pote zprehledni sami, takze to, ze mate ve finale minimalizovany kod na jeden radek neni zadny problem (existuji zase programy, ktere kod zprehledni)
- k nadpisum H1-H6 bych si take dovolil neco napsat :) s klidem staci pouzivat nadpisy h1-h3 (dalsi nadpisy jsou ignorovany a pokud web neni delan tak, ze obsahuje i h5, tak je zbytecne ho na web za kazdou cenu strkat...) co je nadpis, tak v kodu ma jako nadpis byt.. kdyz najednou zjistite ze posledni nadpis na webu mate h5 a chybi vam h6, tak to nereste a nepouzivejte jej.. vyhledavace vam k h6 budou davat stejnou vahu jako k obycejnemu textu. Dulezitejsi spise je, aby nadpisy sly logicky po sobe: h1, h2, h3 a ne h2, h1, h3... Jinak u obsahoveho webu jako je tutorials bych jako h1 videl spise nadpis clanku. Lide spise hledaji nejaky problem (jak spravne kodovat) a text Grafika, Photoshop, tutoriály v H1 zde je prilis obecny. Ale je to na diskuzi a na testovani, co prinese vice navstevniku. Nabizi se i pouziti dvou nadpisu h1 coz neni proti pravidlum a je to celkem bezne a tolerovane
- ou ou ou :) trochu jsem se zdesil. znacky jako < b > a <i> by se prave pouzivat mely (tam kde je to vhodne) a jejich "sourozenci" < strong > a < em > jsou zase pro neco jineho (vice google). Tyto znacky maji sve opodstatneni (rekl bych ze dnes uz pouze) u nevidomych uzivatelu. Ctecky nevidomych uzivatelu rozeznavaji jen html kod (styly ne) a prave znacky <i> a < em > ctecka precte s jinou intenzitou hlasu a v jine "tonine"
- atributy u obrazku v html lze zapisovat jednoduseji: <img src="obr.jpg" alt="neco" width=200 height=100> (bez uvozovek u velikosti) v xhtml by pote uvozovky byly jiz povinne a html kod obrazku by vypadal takto: <img src="obr.jpg" alt="neco" width="200" height="100" />. v html uvozovky nejsou povinne a kdyz uz jej clovek vyuzije, tak si myslim, ze by mel vyuzit i jeho vyhody a nepsat zbytecne to co nemusi :) u galerie, ktera ma 500 obrazku to je usetreni 2000 uvozovek a 2000 znaku uz nejaky ten Kb vytvori :)
- formulare. Jeste bych zminil <input type="image" src="img.jpg">, ktery je pro obrazky primo urcen.. nepropasovaval bych obrazek do buttonu (samozrejme zalezi na situaci a pozadavku). Jinak u <button> je povinny i type="submit", jinak se formular v IE6 neodesle (na to pozor hlavne zacatecnici, usnadni vam to hodiny ladeni kodu, proc vam nefunguje v IE6 formular :))

hezky zbytek dne a diky za prijemne pocteni na pondelni vecer :)

ps. kdyz zde na webu pisu komentar, tak je pod textareou text "* Povinné položky". Celkem mi vadi, ze je pozicovan absolutne k hornimu okraji, jelikoz kdyz napr v Chrome roztahnu textareu na vetsi vysku, tento text mi do ni zasahuje. Stacilo by mu misto top:165; nastavit bottom:0; ( a mel by se natahovat zaroven s textareou pro text formulare).

  • #3
  • Jaa(c)
  • 28. June 2011 | 00:06
  • Skupina: Autoři / Redaktoři

Článek o PHP se nechystá, přeci jen jsme pořád na grafickém portálu, ne na programátorském. Na to jsou jiné weby. Znalost kódování ještě vesměs ke grafice (webdesignu) patří, nicméně programování už je mimo... Proto se zatím ani do budoucna s takovými články nepočítá.

  • #2
  • nightm4re
  • 27. June 2011 | 23:50
  • Skupina: Registrovaní Uživatelé

Myslím, že se konečně to kódování začnu díky tomuhle pořádně učit :)

  • #1
  • Neregistrovaný kolemjdoucí
  • 27. June 2011 | 23:00
  • Skupina: Neregistrovaní

obsahově je článek dost nad moje očekávání, vzhledem k tomu, že se jedná o 2. díl. Chystá se nějaký článek o PHP? Konkrétně spojení HTML s PHP, na tento článek by to skvěle navazovalo. Formulář v HTML + PHP skript na zpracování dat z formuláře. Taky by bylo podle mě fajn, kdybyste začínajícím ukázali, jak svoje HTML pokusy a skriptíky mohou bezpečně testovat na svém PC, neuškodil by článeček o Apache serveru, popř. IIS.

Nahoru

Autoři: Jakub Houdek, Jakub Šimůnek, Petr Široký a příležitostní sebevrazi