Základy www Jak vytvořit webové stránky Návody a příklady najdete na adrese webowebu.phorum.cz Podrobný popis a další možnosti najdete na stránkách owebu.org

Potřebný software 

Html editor PSPad, který najdete na www.pspad.cz



Css editor TopStyle Lite, budete-li chtít měnit vzhled webu, nebo vytvářet nový web. Najdete jej na www.bradsoft.com



Editor obrázků, např. IrfanView, budete-li na web dávat fotografie. Najdete jej na www.irfanview.cz



FTP program, např. FileZila, pro zkopírování souborů na internetový server. Najdete jej na http://www.filezilla.cz

Vytvoření struktury webu, uložení webových souborů na disk Struktura webu a názvy souborů Webová adresa, např. www.psi-kocky.cz nebo kurzwww.ic.cz představuje na internetovém serveru hlavní složku webu. Do ní autor webu uloží úvodní stránku, která musí mít název index. Zadáme-li v internetovém prohlížeči webovou adresu, je v hlavní složce webu vyhledána html stránka s názvem index. Ostatní stránky, na které se dostaneme kliknutím na odkaz, mají různé názvy, obvykle podle jejich obsahu, např. plemena_psu, apod. Mohou být uloženy také v hlavní složce webu, nebo v jejích podložkách. Vytvoření složek se říká vytvoření struktury webu. Přípona souboru může být html nebo jen htm. Aby nedošlo k chybám při vytváření odkazů, používejte stále stejný druh přípony. Názvy souborů pište bez diakritiky a bez mezer, tedy např. kocky.html, nikoli kočky.html. Internetové servery nejsou schopny pracovat s českými názvy souborů. Malá a velká písmena jsou na serverech odlišována, bude-li tedy v odkazu uvedeno kocky.html, bude nalezen pouze soubor s názvem kocky.html, nikoliv Kocky.html či kocky.HTML. Má-li být na stránce zobrazen obrázek domecek.jpg, nebude zobrazen, bude-li se soubor jmenovat Domecek.jpg či domecek.JPG. Ve Windows malá a velká písmena v názvech souborů rozlišována nejsou, při vytváření stránek a zobrazení stránek z disku vašeho počítače na tento problém nepřijdete, vše bude vypadat v pořádku, k chybám dojde až po zkopírování stránek a ostatních souborů na server. Pište tedy názvy souborů a jejich přípon malými písmeny.

Soubory webu Web je tvořen různými soubory: 

html či htm soubory – vlastní html stránky obsahující text s odkazy na další html stránky a také odkazy na vložené obrázky či soubory ke stažení.



css – soubory obsahující definici stylů pro nadpisy, odstavce, odkazy apod. Pomocí stylů se určuje písmo, velikost, barva, apod.



jpg, png, gif – vložené obrázky



pdf, doc, xls, zip, apod. – soubory ke stažení, některé typy jsou po kliknutí na odkaz otevřeny přímo v internetovém prohlížeči (chceme-li je otevřít v jejich aplikaci, např. xls v Excelu, klikneme na odkaz pravým tlačítkem myši a uložíme soubor).

Cesta k souborům může být: 

absolutní (úplná) – začíná lomítkem http:// nebo https:// – pouze v odkazech na jiný web.



relativní – popisuje cestu od html stránky k cílovému souboru.

Jak vytvořit www stránky

1/21

RNDr. Jana Reslová

Jazyk html Webové stránky mohou být psány v jazyce HTML nebo XHTML: 

jazyk HTML



jazyk XHTML

V čem se liší jazyky HTML a XHTML Html tagy – značky, které označují co je nadpis, co je normální odstavec, určují odkazy, zajišťují vložení obrázku apod., jsou buď párové, nebo nepárové. 

Párové tagy jsou ty, které musí určovat začátek a konec té části textu, která má představovat např. nadpis, či fungovat na kliknutí jako odkaz, nebo určují začátek a konec každého odstavce.

Domácí mazlíčci

Chovatelské stanice

Vše, co se týká chovu, stravy a zdraví. Seznam chovatelských stanic psů, koček a ostatních domácích zvířátek.

Párové tagy se zapisují v html i v xhtml stejně. 

Nepárové tagy jsou ty, které určují jeden objekt, např. obrázek. V XHTML mají nepárové tagy před ukončovací závorkou mezeru a lomítko:

V HTML nepárové tagy toto lomítko nemají:

Struktura html stránky připojení stylů css titulek kódování češtiny

<meta http-equiv="content-type" content="text/html; charset=windows-1250"> odstavec

nadpis

další odstavec

Domácí mazlíčci

Máme rádi zvířata, protože jsou chlupatá...

Některé lidské vlastnosti jsou často přirovnávány ke zvířecím. Když o někom prohlásíme: Mají se rádi jako pes a kočka, nemyslíme tím, že spolu mají zrovna harmonický vztah, přesto pes s kočkou mohou být kamarádi. kurzíva

obrázek

Jak vytvořit www stránky

2/21

RNDr. Jana Reslová

Hlavička a tělo stránky 

head – hlavička stránky – obsahuje informace o kódování, titulek okna, připojení souborů css se styly

Kódování musí být uvedeno v html kódu, např.: <meta http-equiv="content-type" content="text/html; charset=windows-1250">

nebo <meta http-equiv="content-type" content="text/html; charset=utf-8">

Podle kódování zvolíme HTML editor: Středoevropské jazyky Windows (windows-1250) – můžeme použít libovolný editor, např.: 1stPage, PSPad, apod. Kódování Unicode (UTF-8) – musíme použít editor, který umí pracovat v tomto kódování, např. PSPad. Titulek okna se zobrazuje v titulkovém pruhu okna internetového prohlížeče:

V hlavičce musí být uvedena cesta k souboru se styly. např.:



body – tělo stránky – obsahuje vlastní text stránky, uzavřený mezi jednotlivé html tagy, např.:

Domácí mazlíčci

Máme rádi zvířata, protože jsou chlupatá ...

Některé lidské vlastnosti jsou často přirovnávány ke zvířecím. Když o někom prohlásíme: „Mají se rádi jako pes a kočka”, nemyslíme tím, že spolu mají zrovna harmonický vztah, přesto pes s kočkou mohou být kamarádi.

Začátek a konec tagu může být před a za textem, nebo nad a pod textem, podle toho, co je pro nás přehlednější. Celý odstavec může být v editoru na jednom řádku, dlouhý odstavec můžeme rozdělit na víc řádků, na výsledné zobrazení v internetovém prohlížeči to nebude mít žádný vliv, odstavec se bude automaticky zalamovat podle velikosti okna prohlížeče. Výsledek pak může vypadat takto:

Nebo po úpravě stylů např. takto:

Tagy se mohou vnořovat do jiných tagů, např. obrázek do odkazu, odkaz do odstavce. Při vnořování se párové tagy nesmí křížit, tzn., že začátek i konec vnořeného tagu musí být uvnitř vnějšího tagu. Odkaz uvnitř položky seznamu s odrážkami: Správně: Špatně:

Kočky

Kočky

Jak vytvořit www stránky

3/21

RNDr. Jana Reslová

Layout – rozvržení stránky 

bloky



Stránka bývá složena z několika částí - obdélníkových bloků, které jsou vytvořeny párovým tagem div. Jednotlivé bloky bývají po skupinách uzavřeny v tzv. obalovací bloky. <meta http-equiv="content-type" content="text/html; charset=windows-1250">

Jak vytvořit www stránky

4/21

RNDr. Jana Reslová

div stranka

div menu

Jak vytvořit www stránky

div logo

div topmenu

div obsah

div pata

5/21

RNDr. Jana Reslová

Html editor PSPad Vytvoření html stránky na základě šablony Šablony můžeme najít na internetu, např. na http://www.freewebtemplates.com/templates/html Otevřeme stránku šablony: menu Soubor – Otevřít Uložíme pod jiným názvem: Soubor – Uložit jako (název souboru bez diakritiky, malými písmeny)

Vytvoření html stránky na základě jiné stránky Otevřeme stránku webu: menu Soubor – Otevřít Uložíme pod jiným názvem: Soubor – Uložit jako (název souboru bez diakritiky, malými písmeny, příponu html nebo htm podle původní stránky)

Vytvoření nové html stránky Provedeme menu Soubor – Nový, vybereme HTML dokument nebo XHTML dokument (viz rozdíly mezi html a xhtml jazykem) Soubor uložíme do vytvořené složky, kterou si připravíme na disku jako hlavní složku celého webu, nebo přímo na disk C:, budeme-li psát úplné, absolutní cesty k souborům.

Zápis html tagů v PSPadu Pro zapsání html tagu můžeme v PSPadu vyžít nabídku seznamu tagů, která se objeví, stiskneme-li klávesy Ctrl a mezerník. Umístíme tedy kurzor tam, kam chceme vložit nový tag, nebo označíme tu část textu, kterou chceme uzavřít do tagu, stiskneme Ctrl+mezerník a napíšeme začátek názvu tagu (bez <), např. st, v seznamu tagů se zobrazí tagy začínající písmeny st (pokud ne, posuneme posuvníkem seznamu tagů ručně), vybereme strong a stiskneme klávesu Enter nebo na tag strong v seznamu 2x klikneme myší.

Jak vytvořit www stránky

6/21

RNDr. Jana Reslová

Přehled html tagů h1 .................................... hlavní nadpis h2 .................................... podnadpisy h3 .................................... podnadpisy 3. úrovně p ...................................... odstavec strong .............................. tučné písmo b ...................................... tučné písmo em ................................... kurzíva i........................................ kurzíva u ...................................... podtržené písmo ol ..................................... číslovaný seznam li .......................... položka seznamu ul ..................................... seznam s odrážkami li .......................... položka seznamu a....................................... odkaz img................................... obrázky table ................................ tabulka tr ......................... řádek tabulky td ........................ buňka tabulky th ........................ buňka záhlaví tabulky br ..................................... zalomení řádku

Vysvětlení základních tagů najdete na stránkách http://webowebu.phorum.cz Podrobnější výklad najdete na http://www.owebu.org

Jak vytvořit www stránky

7/21

RNDr. Jana Reslová

Základní html tagy Nadpisy 

hlavní nadpisy

Nadpis první úrovně

Nadpis první úrovně



podnadpisy

Nadpis druhé úrovně

Nadpis druhé úrovně



podnadpisy podnadpisů

Nadpis třetí úrovně

Nadpis třetí úrovně

Někdy jsou na stránkách použity nadpisy nižších úrovní, např. h3, h5.

Odstavce

Text odstavce

Část textu odstavce může být zvýrazněna tučným písmem nebo kurzívou: 

tučné písmo nebo také

Text odstavce<strong>tučný texttext odstavce

Text odstavcetučný texttext odstavce



kurzíva nebo také

Text odstavce<em>kurzívatext odstavce

Text odstavcekurzívatext odstavce

Odstavec se automaticky zalamuje podle velikosti okna. Chceme-li v určitém místě rozdělit odstavec na dva řádky, použijeme konec řádku br (vždy zvažte, zda není logičtější vytvořit dva samostatné odstavce). Zalomení řádku se může použít k vytvoření sloupcového menu odkazů. 

konec řádku




Nechceme-li, aby se na konci řádku oddělila předložka od slova (např. s kočkou) nebo den, měsíc a rok v datumu (např. 5. leden 2009) apod., použijeme pevnou mezeru místo obyčejné (V editoru PSPad ji napíšete stisknutím Ctrl+Shift+mezerník) 

 

Přednáška o tom, jak může žít pes s kočkou, se koná 5. ledna 2009.

pevná mezera

Seznamy 

číslované seznamy

1. Psi

1. První položka seznamu
2. Druhá položka
3. Třetí položka



2. Kočky 3. Ostatní

seznamy s odrážkami

Psi

• První položka seznamu
• Druhá položka
• Třetí položka

Kočky Ostatní

Lze vytvářet vnořené seznamy:

• První položka seznamu
• Druhá položka
  • První položka podseznamu
  • Druhá položka podseznamu
• Třetí položka hlavního seznamu

Jak vytvořit www stránky

8/21



Psi



Kočky





Plemena



Rady



Chovatelské stanice



Výstavy

Ostatní

RNDr. Jana Reslová

Odkazy 

cílem odkazu může být další stránka téhož webu Kočky Výstavy



odkaz může vést na jinou internetovou adresu Základy html



cílem odkazu může být také soubor ke stažení informace o soutěži



odkaz může vytvořit nový mail se zadanou adresou, pro funkčnost je však nutné, aby na počítači byl správně nastavený mailový program (z důvodu spamu nedoporučuji používat) napište nám

Tabulky   

začátek a konec tabulky začátek a konec řádku začátek a konec buňky

1.	2.	3.
1.	2.	3.

buňka prvního řádku buňka prvního řádku buňka prvního řádku buňka druhého řádku buňka druhého řádku buňka druhého řádku

Pro buňky záhlaví tabulky se používá th místo td: 

začátek a konec buňky záhlaví

1. buňka záhlaví 2. buňka záhlaví 3. buňka záhlaví



Datum

Místo

Propozice

15. – 16. 11. 2009 Pardubice

všechna plemena propozice pořádá ZO Pardubice

22. 11. 2009

národní výstava – pouze CAC/CAP všechna plemena

Praha

Rozdělení textu v buňce na dva řádky: 

konec řádku




všechna plemena
propozice
pořádá ZO Pardubice

Sloučení buněk: 



Běh 100m

sloučení buněk vedle sebe

Závodník

Čas

Běh 100m Závodník

Václav

Malý

10:53

sloučení buněk pod sebou

Jarda

Dlouhý

11:05

Karel

Bystrý

11:05

2. – 3.

Jak vytvořit www stránky

9/21

Umístění 1 2. – 3.

RNDr. Jana Reslová

Obrázky

Parametry obrázku: 

src – cesta k souboru s obrázkem



width – šířka obrázku



height – výška obrázku



alt – popisek – zobrazuje se při najetí myší na obrázek, nechceme-li popisek, uvedeme alt=""

Obrázek je třeba zmenšit do takové velikosti, jakou potřebujeme pro web. Šířku a výšku pak zadáváme podle zmenšeného obrázku. Obrázek pak uložíme do příslušné složky na webu. Typy souborů: 

jpg – fotografie



gif – mapy, grafy, apod



png – obdobně jako gif

Jak vytvořit www stránky

10/21

RNDr. Jana Reslová

Formátování webových stránek pomocí css stylů Pro všechny stránky webu vytvoříme společný soubor css stylů. V hlavičce všech html stránek musí být uvedena cesta k souboru css:

Definice stylů V souboru css definujeme styly: a) pro jednotlivé tagy, např. h1, h2, p, apod. h1 { font-size: 22px; }

b) některé tagy mohou mít přiřazeny speciální styl pomocí id, např.