Superkód aneb jak navrhnout dobrý kód - 2.část

Pokračování článku Superkód aneb jak navrhnout dobrý kód - 1.část

Nyní tedy máme seřazený a okódovaný text. Doplníme do něj další povinné části:


hlavička:

<!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-Type" content="text/html; charset=utf-8" />
<meta name="Description" content="" />
<meta name="Keywords" content="" />
<meta name="robots" content="all, follow" />
<meta name='googlebot' content='index,follow,snippet,archive' />
<meta name="author" content="" />
<link rel="Stylesheet" type="text/css" href="" />
<title></title>
</head>
<body>

logo jako h1:

<h1><a href="homepage">Název webu<span>&nbsp;</span></a></h1>

navigace:

<ul id="menu">
      <li><span id="active">Úvod</span></li>
      <li><a href="/cz/tvorba-www-stranek-webdesign/" class="menu">Služby</a></li>
      <li><a href="/cz/cenik/" class="menu">Ceník</a></li>
      <li><a href="/cz/reference/" class="menu">Reference</a></li>
      <li><a href="/cz/kontakt/" class="menu">Kontakt</a></li>
</ul>

Tím tedy máme základní kostru hotovou. Teď doplníme do kódu náležitosti pro lepší přístupnost a použitelnost. Doplníme k labelům u formulářů accesskey, pokud máme navigaci za hlavním obsahem, tak doplníme před hlavní obsah odkaz "přeskočit na navigaci", který pak pomocí CSS skryjeme. Můžeme doplnit i accesskey k navigaci, ale jelikož zatím neexistuje jednotný standard očíslování/pojmenování jednotlivých položek, tak bych se tomuto kroku spíše vyhnul. Dále doplníme k odkazům title a k obrázkům alt.
Tímto máme HTML kód hotov. Nyní se teprve podíváme na grafický návrh a začneme přemýšlet, co s tím. Pokud nás grafický návrh nutí ke sloupcovému vzhledu, využijeme opakování pozadí s předkreslenými sloupci (rozhodně nebudeme přepisovat kód do tabulek!!!!)a vlastnosti pozicování nebo tečení. O beztabulkovém sloupcovém layoutu napsal Pixy. Pomocí CSS jde udělat prakticky cokoliv, takže rozhodně není potřeba kvůli grafice měnit fyzické pořadí prvků HTML kódu nebo něco takového. Jediné co je přípustné, je přidat pár nezbytně nutných spanů a divů (ale jen pár!). pár článků o CSS:
CSS zapisujeme přirozeně do externího souboru.
Na závěr uložíme tuto statickou HTML stránku jako šablonu a napíšeme pro ni aplikační vrstvu. Tímto jsme tedy vytvořili tři oddělené vrstvy (soubory): formální (HTML), prezentační (CSS) a aplikační (PHP skript čerpající z databáze).