Rozhodl jsem se vytvořit web na jedno téma s tím, že nepoužiji žádný redakční systém, ale pokusím se stránky vytvořit ručně k vlastnímu obrazu. To jest bez pomoci editorů si ručně napíši zdrojový kód. Téma webu: Sérioví vrazi. Vzhled chci o pevně dané šířce obsahující hlavičku, 3 sloupce a patičku. V hlavičce bude umístěné nějaké logo nebo obrázek, v levém sloupci jmenný seznam, v prostředním vlastní informace a v pravém menu, vyhledávání a další případné doplňky co bych mohl chtít do webu přidat. Patička by pak obsahovala informace o autorovi apod.
Většina moderních webů má vzhled definovaný pomocí css stylů, takže i tato volba bylo poměrně jasná. Nebudu zde podrobně rozepisovat co která značka, znak či výraz v html nebo css kódu znamená. Hlavním důvodem je, že html ani css neumím! Takže pokud se v textu vyskytne nějaký „odborný“ výraz například identifikátor napíšu ho takto kurzívou a Vy můžete postupovat jako já, tj. do vyhledávače zadejte daný výraz a doplňte ho o slova html a css. Ve velké většině případů hned jako první vyjede odkaz někam do hloubi stránek http://www.jakpsatweb.cz/ což je taková česká encyklopedie pro ty co se chtějí pustit do psaní webových stránek. Ptáte se jak budu psát když nic neumím? Postup je jasný: posbírám z internetu nejrůznější návody, vzorové stránky a volně přístupné šablony a jejich pomocí se pokusím pochopit co která věc dělá a jak ji upravit, případně vylepšit tak, aby výsledný vzhled odpovídal mým představám. Teoretické biflování a učení mi přijde v tomto případě k ničemu. Nejlépe se člověk učí praktickou zkušeností. Encyklopedické znalosti jsou v době Googlu skoro zbytečné (navíc pokud mě to přestane bavit tak za pár týdnů si z toho stejně nic nebudu pamatovat, což je taky důvod těchto stránek – připomenutí toho co jsem uměl a zapomněl).
Největším úskalím různých postahovaných stránek a vzorových šablon je pro člověka, co o html a css nic moc neví, vyznat se v nich. Proto jsem mnou „poslepovaný“ kód opatřil podrobnými poznámkami, které ve výsledné stránce nejsou vidět a slouží jen k zorientování se v kódu. Poznámky v css kódu jsou umisťovány mezi /* na začátku a */ na konci poznámky. V html kódu jede o znaky <!– na začátku a –> na konci. Teď Vás mělo zarazit jak to, že znaky vidíte, když je má prohlížeč identifikovat jako začátek a konec neviditelné poznámky. Je to proto, že tyto „znaky“ jsem nenapsal jako znaky, ale pomocí tzv. znakových entit (tak honem – google a vyhledáváme o co jde).
Zadání tedy máme, pusťme se do díla.
Na první řádce zadáme informace o tzv. Doctype. Teoreticky by stačilo napsat jen <html>, případně nepsat nic a prohlížeč by měl přesto z další struktury souboru poznat že se jedná o html, ale raději ji zadáme korektně.
Následuje hlavička dokumentu, která obsahuje informace o kódování písma, informace pro indexovací roboty (viz.:http://j0hn.hys.cz/jak-si-zlepsit-pozici-ve-vyhledavacich, titul stránky, a deklarování css stylů.
Pozor na české označení „hlavička“. Stejné označení jsem použil pokud jsem mluvil o vzhledu dokumentu a to pro ten útvar co je na horním obrázku černou barvou, ale nejedná se o stejnou věc! Budete se muset smířit s tím, že se tento výraz používá pro 2 naprosto odlišné věci.
Následuje vlastní tělo dokumentu, zatím prázdné.
A můžeme se podívat na výsledný kód, včetně podrobných popisků:
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <!-- Informace o typu dokumentu --> <head> <!-- Začátek hlavičky --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- Informace o kódování písma --> <!-- Informace pro indexovací roboty vyhledávačů - začátek --> <meta name="keywords" content="Klíčová slova,Oddělená čárkou bez mezery" /> <meta name="description" content="Popis stránek" /> <meta name="author" content="Jméno autora, případně kontakt" /> <meta name="copyright" content="Autorská práva" /> <meta name="robots" content="all,follow" /> <!-- Informace pro indexovací roboty vyhledávačů - konec --> <title>Titul stránky</title> <!-- Titulek který uvidíte v horní liště prohlížeče --> <style type="text/css"> <!-- Informace o css stylech - začátek --> </style> <!-- Informace o css stylech - konec --> </head> <!-- Konec hlavičky --> <body> <!-- Začátek těla stránky --> </body> <!-- Konec těla stránky --> <!-- Konec celého souboru -->
Tolik zatím k úvodu. V dalším dílu pronikneme do css stylů a vytvoření třísloupcového layoutu
Začínáme s tvorbou webových stránek – 2. Základy CSS, třísloupcový layout
Začínáme s tvorbou webových stránek – 3. Zarovnání sloupců u třísloupcového layoutu, patička vždy dole
Komentáře