2.ročník IKT - tvorba webových stránek

základy 2.ročník Ikt- tvorba weových stránek

základy

co je to webová stránka?

webová stránka je dokument, který je zobrazovám pomocí některého z prohlízečů (chrome, firefox) webový (www) znamená wold wide web určený pro poskytování informací... webová stránka se zapisuje v jazyce html=hypertext Markup Language

struktura html stránky: každá html stránka má hlavičku a tělo... hlavička obsahuje například titulek okna, nebo kódování... obsah stránky je umísťen v těle html. je rozdělen na nadpisy, podnadpisy a odstavce. Struktura html dokumentu Celý html dokument je složen z hlavičky a těla. Hlavička je většinou krátká, obsahuje různé informace např. titulek okna nebo použité kódování. Celý obsah webové stránky je umístěn v těle html dokumentu. Je rozdělen na jednotlivé odstavce a proložen nadpisy a podnadpisy. Nadpisů může být až 6 úrovní. Formátování textu Webový prohlížeč si odstavce textu formátuje sám podle toho, jak má široké okno. Snadno si to ověřím tak, že zkusím velikost okna změnit - prohlížeč si text přeformátuje podle nové velikosti okna. Uspořádaný (předformátovaný) text Pokud chci text uspořádat do sloupečků, mohu použít tzv. předformátovaný text. Ten prohlížeč formátuje stejně, jak je zapsán ve zdrojovém kódu stránky. Text zobrazuje neproporcionálním písmem. Příklad použití: -------------------------------- Význam některých html značek -------------------------------- Značka (Ne)Párová Význam --------------------------------------------- html P ohraničuje celý dokument head P hlavička dokumentu nody P tělo dokumentu h1 P nadpis nejvyšší úrovně p P odstavec (paragraph) pre P předformátovaný text br N tvrdý konec řádku (break) hr N čára (horizontal row) --------------------------------------------- Taulka Jinou možností, jak uspořádat text, je vytvořit html tabulku. Je to trochu složitější, ale nabízí to více možností. Celá tabulka se skládá z řádků a každý řádek je rozdělen na jednotlivé buňky: Význam některých html značek Značka (Ne)Párová Význam P ohraničuje celý dokument P hlavička dokumentu P tělo dokumentu

P nadpis nejvyšší úrovně

P odstavec (paragraph)

	P	předformátovaný text

N tvrdý konec řádku (break)
N čára (horizontal row) obrázky Na webovou stránku se obrázek přidá párovou značkou . Parametrem "src" určím, jaký obrázek se zobrazí. Pokud je soubor ve stejném adresáři jako html dokument, stačí napsat hodnotu parametru "src" jen jméno souboru (do uvozovek). Jsou-li soubory s obrázky umístěny jinde, musím napsat cestu k nim. Pokud neurčím jinak (to se bude probírat později), obrázek se chová v toku dokumentu jako samostatný odstavec. Není dobré obrázkem zakrýt moc místa, většinou je důležitý text. Zatím nechci míchat obrázky s textem ve stejném odstavci, vypadá to divně. Pokud zapíšu obrázků víc, poskládají se vedle sebe až do šířky stránky. Kdybych chtěla obrázky skládat pod sebe, musím zapsat tvrdé odřádkování
. Odkazy Jak na to Odkazy dělají z webové stránky silný informační nástroj. Odkaz se vytvoří tagem . Parametrem "href" se určí cíl odkazu. Tak jako u obrázků, pokud je cílový dokument ve stejném adresáři, stačí napsat jméno souboru - viz.příklad Toto je odkaz na sousední dokument. Různé varianty HTML odkazů Odkaz na dokument z minulého odstavce Odkaz na začátek dloooouhého dokumentu, Odkaz na předposlední odstavec dloooouhého dokumentu, Odkaz na školní web SUPŠ Zámeček Odkaz na úvodní stránku s návody, jak napsat html dokument Odkaz na jinou stránku, s popisem struktury dokumentu Odkaz na Google Odkaz na úvodní stránku aktuálního serveru - nejkratší možná adresa, všechny části jsou vynechány tuto stránku vytvořila Denisa Dudková KM2