Obsah první stránky

Tak jak jsme o tom mluvili v minulé kapitole - vezměte text, který má být obsahem první stránky, vložte jej mezi značky <body> a </body> a doplňte významové XHTML značky neboli tagy tak, aby jste každému textu přiřadili jeho význam.

Ukázka

Moje kočky
Bydlím na vesnici a mám osm koček. Proč jich je tolik?
Hlavní důvody:
- se mi tak nashromáždily
- a mám kočky ráda
A kdyby náhodou ubyly, zase si pořídím další.

Tohle je text, který chci převést do XHTML, jinými slovy přidat do něj značky, které u textu označí jeho význam tak, aby prohlížeč věděl, o co jde:

<h1>Moje kočky</h1>
<p>Bydlím na vesnici a mám osm koček. 
Proč jich je <strong>tolik?</strong></p>
<h2>Hlavní důvody:</h2>
<ul>
<li>se mi tak nashromáždily</li>
<li>a mám kočky ráda</li>
</ul>
<p>A kdyby <em>náhodou</em> ubyly, zase si pořídím další.</p>

Pokud výše uvedený kód vložím mezi značky <body> a </body> do kostry stránky z předminulé kapitoly, vznikne stránka, na kterou se můžete podívat. Ačkoli jsme nepoužili žádné formátovací značky, text je zobrazen rozdílně podle toho, jakým tagem je označen. Tohle zobrazení může být v každém prohlížeči jiné, ale bude odpovídat hierarchii, resp. použitým značkám.

Obrázky

Kromě textu budete asi chtít do stránky dát i nějaký ten obrázek - teď nemyslím ten dekorační, ale ten "nosný", tj. obrázek toho, o čem píšete.

Ne každému začátečníkovi je tak úplně jasné, jak to udělat. Zvyklý z wordu nechápe, že obrázek není součástí webové stránky; je tam jenom napsáno, kde je soubor s obrázkem a jak se má na stránce zobrazit. Z toho vyplývá, že ten obrázek musí být rovněž na webovém serveru, nikoli jen u Vás doma na disku.

Abychom měli o výsledku nějakou představu, vložila jsem jeden obrázek i do naší ukázkové stránky; její kód je tady, a také se můžete na tuhle stránku přímo podívat.

<?xml version="1.0" encoding="windows-1250"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
  <head>
    <meta http-equiv="content-language" content="cs" />
    <meta http-equiv="content-type" content="text/html; 
    charset=windows-1250" />
    <meta name="author" content="dis" />
    <title>
      Kočky
    </title>
  </head>
  <body>
    <h1>Moje kočky</h1>
    <p>
      Bydlím na vesnici a mám osm koček. 
      Proč jich je <strong>tolik?</strong>
    </p>
    <h2>Hlavní důvody:</h2>
    <ul>
      <li>se mi tak nashromáždily</li>
      <li>a mám kočky ráda</li>
    </ul>
    <p>A kdyby <em>náhodou</em> ubyly, zase si pořídím další.</p>
    <img src="../obrazek.jpg" width="143" height="130" 
    alt="moje kočka Vendula" />
  </body>
</html>

Obrázek může být i odkazem; nejdřív by to chtělo ale pochopit textové odkazy, ty obrázkové pak budou hračka. Takže obsah máme, uděláme si menu.


Mozilla Firefox: Bezpečnější, rychlejší, lepší
píše -dis- bb(zavináč)choltice.eu