HTML značky a jejich použití II

Dreamweaver Obsah lekce:

Název stránky <title>
Nadpisy <h1-h6>
Odstavce <p>
Odkaz <a>
Seznamy <ol>,<ul>
Obrázek <img>
Zvýrazňování textu <strong>
Řádkový element <span>

Název (titulek) stránky <title>

První značka, o které bude v této lekci řeč, je značka (tag) <title>. Tato značka se píše do hlavičky stránky a měla by obsahovat název vystihující obsah stránky. Její použití má zejména dva důsledky:

Informace v ní napsaná se zobrazí v horní liště okna prohlížeče.
Mnohem podstatnější však je pro fulltextové vyhledavače typu google (je prioritní při indexování stránky vyhledávacími roboty). Při zavádění stránky do databáze vyhledavače je tato informace velmi zásadní a je jí v rámci vyhledávání přiřazena velká důležitost. Máme-li tedy ve značce title opravdu výstižnou informaci, která charakterizuje stránku a uživatelé budou takovou informaci ve vyhledavači hledat, pak je vysoká šance, že najdou právě naši stránku. A naopak - zkuste si vyhledat na google termín "untitled page" - je až neuvěřitelné kolik stránek má v atributu title tento termín, který se standardně vkládá do hlavičky při vytváření stránky v editorech HTML.

Ukázka zápisu značky title v HTML kódu stránky:

Ukázka HTML kódu


              <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"> 

              <html>

              <head>

              <title>Titulek stránky</title>

              </head>


              <body>

              </body>

              </html>

Na závěr shrňme podstatné informace o značce <title>:

Stručný, jasný, popisný čistý text.
Každá stránka jej musí obsahovat (je to povinný element), je součástí hlavičky.
Většinou zobrazen v titulkové liště okna prohlížeče.
Důležité pro indexovací vyhledávače (Google, Yahoo).
Pro uživatele jako bookmark a v historii stránek.

Více o značce <title> se lze dočíst například na stránce http://www.jakpsatweb.cz/titulek.html.

Nadpisy <h1-h6>

Další důležité značky jsou značky pro tvorbu nadpisů až šesti úrovní (obecně se doporučuje nepoužívat více než tři úrovně - text pak přestává býti přehledný). Úroveň nadpisu je také důležitou informací pro vyhledavače. Textům v nadpisech vyhledávací roboti přiřazují důležitost podle úrovně. Takže nadpis uvnitř značek <h1> a </h1> nese zásadní informaci o obsahu stránky.

Ukázka zápisu značky title v HTML kódu stránky:

Ukázka HTML kódu


              <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"> 

              <html>

              <head>

              <title>Titulek stránky</title>

              </head>


              <body>

				<h1>Nadpis první úrovně</h1>

				<h2>Nadpis druhé úrovně</h2>

				<h3>Nadpis třetí úrovně</h3>

				<h4>Nadpis čtvrté úrovně</h4>

				<h5>Nadpis páté úrovně</h5>

				<h6>Nadpis šesté úrovně</h6>

              </body>

              </html>

Výsledkem přechozího kódu bude v prohlížeči následující (záleží to na nastavení pomocí CSS resp. na interním nastavní prohlížeče):

Ukázka HTML kódu

Nadpis první úrovně

Nadpis druhé úrovně

Nadpis třetí úrovně

Nadpis čtvrté úrovně

Nadpis páté úrovně

Nadpis šesté úrovně

Na závěr shrňme podstatné informace o značkách <h1-h6>:

(X)HTML poskytuje až šest úrovní nadpisů.
Element <hn>, kde n je číslo od 1 do 6.
Čím vyšší úroveň nadpisu tím nižší číslo.
Formátování (změna vzhledu, velikosti...) se řeší pomocí CSS.
Vhodné vytvořit nadpisům jmenný odkaz (<h1><a name=“jméno_nadpisu”>nadpis</a></h1>
a odkaz jako <a href=“# jméno_nadpisu”>odkaz</a> ) nebo id – hypertext.

Více o značkách <h1-h6> se lze dočíst například na stránce http://www.jakpsatweb.cz/html/bloky.html#hn a v zajímavé diskusi o této problematice http://diskuse.jakpsatweb.cz/?action=vthread&forum=13&topic=101680.

Odstavce <p>

Jedna z nejvíce používaných značek je značka pro označení odstavce. Většina obsahu webu jsou odstavce textu a každý odstavec by měl být jako odstavec označen. Odstavce člení text a například mohou mít nadefinovánu mezeru za odstavcem apod.

Ukázka zápisu odstavců v HTML kódu stránky:

Ukázka HTML kódu


                <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"> 

                <html>


                <head>

                <title>Titulek stránky</title>

                </head>

                <body>


                </body>

                </html>

Na závěr shrňme podstatné informace o značce <p>:

<p>obsah odstavce</p>
Formátování pomocí CSS (řádkování, mezery okolo,...).
Nevalidní způsob jak udělat mezeru v textu: <p> </p>

Více o značce <p> se lze dočíst například na stránce http://www.jakpsatweb.cz/html/bloky.html#p.

Odkaz <a>

Hypertext neboli odkaz (anchor) je jednou z nejzásednějších HTML značek. Představuje odkaz, který nás po kliknutí myší zavede na nějakou internetovou stránkum soubor, apod. Základními atributy značky <a> jsou následující:

href - obsahuje URL, na které se po kliknutí dostanete. Je to adresa, kam budeme po kliknutí nasměrováni. Jedná se o nejdůležitější atribut odkazu.
target - tento atribut může nabývat několika možných hodnot, z nichž se dnes používá již v podstatě jen _blank. Tato hodnota atributu target má za následek to, že se odkaz otevře do nového okna (záložky) prohlížeče. Pokud tento atribut uveden není, pak se odkaz otvírá do stejného okna, ve kterém na něj klikneme.

Ukázka zápisu odstavců v HTML kódu stránky:

Ukázka HTML kódu


                <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"> 

                <html>

                <head>

                <title>Titulek stránky</title>

                </head>

                <body>

                <a href="http://www.gjszlin.cz/gztgm/">http://www.gjszlin.cz/gztgm/</a>

                <a href="http://www.gjszlin.cz/gztgm/" target="_blank">http://www.gjszlin.cz/gztgm/</a> - tento odkaz se otevře do nového okna (záložky).

                </body>

                </html>

http://www.gjszlin.cz/gztgm/ - tento odkaz se otevře do současného okna.

http://www.gjszlin.cz/gztgm/ - tento odkaz se otevře do nového okna (záložky).

Více o značce <a> se lze dočíst například na stránce http://www.jakpsatweb.cz/html/odkazy.html.

Seznamy <ol>,<ul>

Zkratka <ol> slouží pro číslovaný seznam (ordered list). Dále se pak člení na jednotlivé položky v menu <li> (číslované řádky). Čísla přídá automaticky prohlížeč. Obdobou je nečíslovaný seznam <ul>, ten se zobrazuje pouze s odrážkama. Tyto značky nejčastěji využijeme v menu stránky.

Ukázka zápisu číslovaného seznamu v HTML kódu stránky:

Ukázka HTML kódu


           
             <ol>
             <li>položka 1</li>
             <li>položka 2</li>
             <li>položka 3</li>
             </ol>

Na závěr shrňme podstatné informace o značce <ol>:

Stručný, jasný, popisný čistý text.
Vepsáním další značky <ol> do seznamu lze vytvořit víceúrovňové seznamy.
Pro uživatele jako menu stránky nebo seznam položek.
Seznamy s obrázkovou odrážkou lze udělat pomocí CSS stylů a vlastosti list-style-image.

Více o značkách <ol>,<ul> se lze dočíst například na stránce http://www.jakpsatweb.cz/html/seznamy.html.

Obrázek <img>

Další důležitá značka slouží pro zobrazení obrázku na stránce. Obrázky do HTML kódu vkládáme pomocí značky <img>, který má jeden povinný a mnoho nepovinných parametrů. Nutným parametrem je src, neboli umístění obrázku. Velikost si zvolí HTML editor sám a vychází z rozlišení daného obrázku.

Ukázka zápisu značky title v HTML kódu stránky:

Ukázka HTML kódu


              <img src="images/obrazek.jpg" width="276" height="320" />

Takto se obrázek zobrazí v praxi. Velikost ohraničení a pozici řešíme pomocí CSS stylů:

Ukázka HTML kódu

Na závěr shrňme podstatné informace o vkládání obrázků <img>:

Nutné definovat umístění a velikost obrázku.
Rozměry obrázku můžeme zadat také pomocí kaskádových stylů vlastnostmi width a height.
Vkládání obrázku nám můžou ulehčit moderní HTML editory, které také automaticky stanoví velikost obrázku podle jeho rozlišení.

Více o vkládání obrázků <img> se lze dočíst například na stránce http://www.jakpsatweb.cz/obrazky.html .

Řádkový element <span>

Element <span> je obdobou elementu <div>, nijak však neodděluje označený text od ostatního. Označení textu se projeví až po definování požadovaných vlastností v CSS.

Ukázka zápisu odstavců v HTML kódu stránky:

Ukázka HTML kódu


              <html>
                standartní text <span>text s jinými vlastnostmi</span> standartní text 
                </html>

Na závěr shrňme podstatné informace o značce <span>:

<span>text s jinými vlastnostmi</span>
Formátování pomocí CSS (barva, font, velikost,...).
nijak noedděluje označený text od ostatního

Více o značce <span> se lze dočíst například na stránce http://www.jakpsatweb.cz/div-span.html.

Zvýrazňování textu <strong, em>

Silné zvýraznění textu (z angl. strong = silný, mocný). Toutu značkou značíme text, který je pro důležítý a proto jej má prohlížeč zvýraznit. V základu se tak děje právě tučným písmem. Atributy však můžeme i definovat v CSS.

Ukázka zápisu odstavců v HTML kódu stránky:

Ukázka HTML kódu

<strong> důležitý text, který chceme zvýraznit </strong>

Více o značce <strong> se lze dočíst například na stránce http://www.jakpsatweb.cz/html/text.html#strong.

Obdobným způsobem lze použít značku <em> pro kurívní text.

Úkol

Pokuste se za stránek konsorcia W3C vyčíst informace (přesné specifikace) o značkách zmiňovaných v této lekci pro standard HTML4, (X)HTML 1.0 Transitional a (X)HTML 1.0 Strict.

Pokuste se dané značky použít v novém HTML dokumentu.

Otázky

Charakterizujte html značku <title>.
Charakterizujte html značky <h1-h6>.
Charakterizujte html značku <p>.
Charakterizujte html značku <a>.
Charakterizujte html značku <img>.
Charakterizujte html značky <ol>, <li>.
Charakterizujte html značku <span>.
Charakterizujte html značku <strong>.

webdesign, xhtml, css, php - Mgr. Michal Mikláš