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

Doporučte tento článek ostatním
  • Facebook
  • Google Bookmarks
  • Bookmarky.cz
  • Live
  • Jagg
  • Linkuj
  • Mediablog
  • Topodkazy
  • Topčlánky
  • Vybrali.sme