Stránka podľa webových štandardov
Cieľom tohto príspevku je poskytnúť čitateľovi krátky návod na
vytvorenie webstránky podľa webových štandardov a zároveň vytvoriť kód
dobre optimalizovaný pre vyhľadávače.
Pri
tvorbe webstránok odporúčam začať so štandardom XHTML 1.0 Strict, s
ktorým sa dnes môžeme stretnúť najbežnejšie. Na pamäti treba mať, že
tagy/značky a atribúty musia byť výhradne písané malými písmenami.
Zároveň musí byť každá značka uzavretá - pri párových začíname lomítkom
uzavieraciu značku: <p> </p> a pri nepárových lomítkom
ukončujeme samostatnú značku: <br>.
Dobrou referenčnou príručkou špecifikácie XHTML môžu byť webstránky:
ZVON
http://www.zvon.org/xxl/xhtmlreference/output/index.html
http://www.zvon.org/download/zvon030830.chm
Ako
prvá značka v XHTML dokumente musí prísť definícia použitej
špecifikácie HTML (v tomto prípade XHTML 1.0 Strict). <!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Značka html s atribútom xmlns
deklaruje menný priestor, t.j. definíciu špecifikácie XHTML. Atribúty xml:lang a lang slúžia na
určenie jazyka, v ktorom je dokument (webová stránka) napísaný. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sk">
Nasleduje
značka head, ktorá obsahuje meta
značky a odkazy na použité, resp. dostupné prvky ako
kaskádové štýly (CSS), či Javascript: <head>
Typ obsahu spolu s použitým kódovaním <meta http-equiv="content-type" content="text/html; charset=windows-1250" />
Relevantné
kľúčové slová pre webstránku <meta name="keywords" content="blog,
web design, xhtml, css, html, php, web štandardy, politika, komentáre,
pohľady, bratislava, slovensko, dusoft, absolut engine" />
Popis
obsahu webstránky <meta name="description" content="Blog o web
štandardoch (tipy, triky a nápady k XHTML, CSS, HTML, PHP, JavaScript,
DHTML, design) + pohľady na dianie okolo mňa (komentáre k politike a
dianiu všeobecne)." />
Značka pre vyhľadávače oznamujúca, že môžu zindexovať obsah webstránky <meta name="robots" content="all" />
Nasleduje
názov webstránky, ktorý sa zobrazí na hornej lište prehliadača
<title>Ambience - blog o web štandardoch + pohľady na dianie
okolo mňa</title>
Definícia použitých CSS štýlov <style type="text/css">@import "main.css";</style>
Doplniť
ešte môžme informáciu o autorovi obsahu <meta name="author"
content="XHTML + CSS + PHP: Daniel Duriš, dusoft at staznosti dot sk"
/>
Odkaz na tzv. favicon, ikonku charakterizujúcu webstránku
(napr. logo) - musí byť vo formáte ICO, veľkosť 16x16 pixelov - bude
zobrazená vedľa adresy webstránok, ak to prehliadač podporuje <link
rel="Shortcut Icon" type="image/x-icon" href="images/favicon.ico" />
V
prípade, ak používame Javascript, uvedieme nasledovnú značku <script
type="text/javascript" src="javascript/ambience.js"></script>
A nakoniec uzavrieme hlavičku dokumentu </head>
Otvoríme telo dokumentu <body>
Nadefinujeme hlavný nadpis značkou h1 <h1>Ambience</h1>
Podnadpis
- v tomto prípade názov článku nasledovaný textom článku
<h2>Názov článku 1</h2>
<p> Úvod do článku a ďalší
text. </p>
<hr />
<h2>Názov článku 2</h2> <p> Úvod do článku a ďalší text. </p>
<hr />
<h2>Názov článku 3</h2> <p> Úvod do článku a ďalší text.
Použili sme značku br, ktorá nás posunie do nového riadku. </p>
Tu
potom môže nasledovať samotný obsah. Využívame pri ňom značky h2 až h6 pre jednotlivé
úrovne nadpisov. Nezabudnime tiež všetky značky správne uzavrieť
použitím lomítka.
Uzavrieme telo dokumentu </body>
Na úplný záver webstránky uzavrieme párovou značkou html </html>
V
samotnom CSS súbore potom už iba nadefinujeme vzhľad pre jednotlivé
elementy. Je to jednoduché - štruktúra je zadefinovaná značkami v HTML
a vzhľad v CSS. Najlepšie je, ak máme ešte nejaký online publikačný
nástroj, kde je obsah uložený v databáze. Takto dosiahneme absolútne
oddelenie obsahu od formy.
Pri overovaní správnosti webových stránok môžeme použiť nasledujúce nástroje od W3 Konzorcia.
Overenie správnosti HTML kódu: http://validator.w3.org
Overenie správnosti CSS kódu : http://jigsaw.w3.org/css-validator
Na
obsahu takto striedmo vytvorených web stránok si vyhľadávače typu
Google dobre pochutia. Vašou odmenou môže byť vyššie umiestnenie sa vo
výsledkoch vyhľadávania.
:: 25.02.2004 :: rubrika Web štandardy :: pridal Daniel :: [*] ::
Diskusia:
poznamka k favicon: je vhodne do nej vlozit aj dvojnasobne velku variantu: 32x32px. S vyhodou sa to da pouzit, ked z adresneho pola potiahnes mysou url na plochu alebo do zlozky. Potom tento shortcut bude mat moju ikonku!
Niekde davnejsie som to na spravodaj.madaj.net pisal v suvislosti s nejakym programkom na vytvaranie ICO pre favicony.
Napísal rony dňa 02.03.2004 o 17:11:44
Aha, to som nevedel, tak dik za info.
Napísal dusoft dňa 02.03.2004 o 23:22:20
Pre aspoň čiastočnu opravu kodu je možné použiť w3c tidy a prípadne free webový engine z http://www.softpae.com
Je to dobre hlavne pre filtrovanie po rôzných IFRAME editoroch ap.
Napísal Anthonius dňa 04.05.2004 o 19:07:33
fasa
Napísal rasto dňa 28.09.2004 o 22:10:48
RSS zdroj