Prezentace se nahrává, počkejte prosím

Prezentace se nahrává, počkejte prosím

 Existují v podstatě tři přístupy ke tvorbě www stránek. Prvním je využití tzv. wysiwyg editorů, ve kterých píšete rovnou text, nestaráte se o to jak.

Podobné prezentace


Prezentace na téma: " Existují v podstatě tři přístupy ke tvorbě www stránek. Prvním je využití tzv. wysiwyg editorů, ve kterých píšete rovnou text, nestaráte se o to jak."— Transkript prezentace:

1

2  Existují v podstatě tři přístupy ke tvorbě www stránek. Prvním je využití tzv. wysiwyg editorů, ve kterých píšete rovnou text, nestaráte se o to jak je kód stránky tvořen. Druhou možností je psát přímo kód stránky - Internetová stránka je soubor s příponou htm nebo html a je to skoro obyčejný textový soubor obohacený o značky jazyka HTML (tagy).Třetí možností je kombinace předchozích - tj. kombinace nějakého vysiwyg editoru, ve kterém tvoříme obsah stránky a ruční editace a úprava kódu.

3  WWW stránky jsou spolu s elektronickou poštou a komunikačními programy nejpoužívanějšími prostředky internetu. WWW stránky jsou vytvořeny ve speciálním jazyce HTML.  HTML je zkratka HyperTextMarkUp Language ("nadtextový značkový jazyk"). místo příkazů jsou zde takzvané tagy.  HTML dokument je pouze textový soubor, který lze běžně přečíst v libovolném textovém programu. Aby prohlížeč poznal, že se jedná o stránku internetu, resp. o HTML dokument, bývá uložen s příponou HTM nebo HTML - podle serveru, na kterém je uložen.  Zobrazení HTML stránky funguje tak, že pomocí prohlížeče načteme soubor htm a ten "poskládá" stránku do takové podoby, v jaké ji vidíme na obrazovce. To může přinést potíže, pokud použijeme některé nestandartní funkce, při zobrazení v různých prohlížečích (Internet Explorer, Mozilla, Firefox, Opera...)  Při nastavení vzhledu stránky využíváme prostého HTML kódu, nověji využíváme tzv. kaskádových stylů a pro operace s databázemi,soubory atd. využíváme tzv. JavaScripty a PHP (dynamické html stránky)

4  Pro vytváření stránek můžeme vytvořit v komerčně dodávaných (placených) editorech (MS Front Page, Publisher), export do HTML umožňují i textové editory (MS Word, OOffice) a nebo jsou i programy zdarma - např. program NVU, SeaMonkey atd.

5

6  1. Úvodní stránka má obvykle název index.htm 2. Všechny stránky ukládáme při tvorbě do jedné pracovní složky (např. vytvoříme složku WWW, do ní ukládáme soubory s příponou htm) 3. V pracovní složce vytvoříme složku OBRAZKY do které vkládáme grafické soubory

7  Pro „napsání“ www stránky je potřeba znát HTML kód. HTML kód je založen na značkách, které se nazývají TAGY. Tagy uzavírají každý text a určují jak bude vypadat v prohlížeči. Všechny tagy jsou uzavřené v ostrých závorkách. Většina tagů má tzv. počáteční tvar a koncový tvar a při používání XHTML kódu mají koncový tvar tagy všechny.

8  - definice typu HTML se tzv. DOCTYPE, která se logicky umisťuje na úplný začátek dokumentu, ještě před tag - začíná dokument - začíná hlavička, nezobrazuje se - vymezující název dokumentu - končí hlavička - vlastní tělo dokumentu (angl. body = tělo), zobrazuje se - končí dokument

9  a) odstavce - tag Př. První odstavec  b) konec řádku - pevný - tyg  c) nadpisy různých úrovní (až šest úrovní) - tag... Př. H1 - nadpis první úrovně H2 - nadpis druhé úrovně H3 - nadpis první úrovně H4 - nadpis první úrovně H5 - nadpis první úrovně H6 - nadpis první úrovně

10  d) zvýraznění určitých částí textu - zápis zvýrazněné slovo Př. kurzíva, neproporcionální písmo, výstupy z různých programů - neproporcionální písmo, silné zvýraznění textu, označení proměnných - obvykle kurzíva, v textu vyznačuje tučné písmo, kurzíva, podtržený text, přeškrtnuté písmo, vyznačuje dolní index, vyznačuje horní index

11  e) zarovnávání textu - atribut ALIGN (může nabývat hodnot LEFT, RIGHT a CENTER) u tagů pro nadpisy (H1-H6) a odstavce (P) Př: H1 - nadpis první úrovně uprostřed  f) zarovnávání více odstavců - tag Př: První odstavec... Druhý odstavec...  g) barvy dokumentu - pozadí - atribut BGCOLOR - text - atribut TEXT Př:  h) barvy pouze části dokumentu - tag Př: H1 - nadpis první úrovně a žlutý

12

13  Text můžeme nejen barvit (viz. předcházející kapitola) ale můžeme měnit i jeho velikost.  ch) velikost písma - atribut SIZE Př: Písma rozličných velikostí a barev Písmo velikosti 1 a modrozelené Písmo velikosti 2 a černé Písmo velikosti 3 a modré Písmo velikosti 4 a anilín. červené Písmo velikosti 5 a šedivé Písmo velikosti 6 a zelené Písmo velikosti 7 a citrónově zelené  i) velikost písma - atribut SIZE - relativní určování velikosti vzhledem k základnímu fontu Př: Změněná základní velikost Tady je velikost relativně zmenšená o 1 Absolutní velikost nastavena na 2.

14  Nedílnou součástí www stránek jsou odkazy (na určitou část stránky, na jiný dokument) a obrázky (které také mohou sloužit jako odkazy)  Pro vložení více obrázků vedle sebe používáme tabulku (s nulovými okraji). Tabulku v editoru WWW stránek vytvoříme tak, že klikneme na Tabulka...Vložit...Tabulka... - zadáme počet řádků a sloupců, okraje 0 bodů.  Obrázek může sloužit jako pozadí stránky - většinou je nutno takový obrázek nejdříve upravit - jeho barvu, velikost atd.  Velice často vkládáme na stránky LOGA firem, organizací, atd. Je vhodné, když pozadí loga je tvořeno průhlednou barvou. Toho lze dosáhnou u grafických souborů ve formátu GIF. V grafickém editoru vybereme průhlednou barvu.

15  a) Odkaz je zvýrazněná část stránky, za kterou se skrývá adresa odkazu (URL)  odkaz na určitou část aktuální stránky: Př: jak je vidět z přiložené tabulky Mezi a je část textu, pod kterou se skrývá odkaz - v HTML dokumentu vyznačen jinou barvou  Tabulka prodeje za uplynulé čtvrtletí  Mezi a je návěští odkazu  odkazy na jiný dokument HTML : Př: a) odkaz na dokument ve stejné složce (adresáři) vodové b) odkaz na jiné www stránky prodej

16  b) Vkládání obrázků Př:  atributy obrázků - ALIGN (=LEFT, RIGHT) Př:  atributy - WIDTH a HEIGHT (požadovaná šířka a výška obrázku v pixelech) Př:  obrázek může být i odkazem a mít rámeček Př:

17  Novou WWW stránku můžeme také vytvořit v editoru. Mimo možnost použití MS Wordu (což není moc elegantní řešení) je možno využít editoru, který je součástí instalace prohlížeče Mozilla (najdete na Editor spustíme z otevřeného prohlížeče v nabídce Soubor...Upravit stránku (nebo Ctrl + E)  Nejdříve si vytvoříme svou WWW prezentaci na disku svého počítače. Pro začátek ukládáme všechny soubory do jedné složky (pro přehlednost můžeme v této základní složce vytvořit ještě složku na obrázky). V editoru pracujeme stejně, jako v běžném textovém editoru s některými výjimkami. Kód se generuje automaticky, zůstává nám možnost úpravy kódu ručně.

18

19  Rámy v HTML umožňují rozdělit okno prohlížeče na několik částí. V současné době se již považují za nemoderní způsob pogramování stránek, vzhledem ke své jednoduchosti ale nabízí poměrně snadné členění jednoduchých stránek, což vyhovuje v případě použití v našich jednoduchých případech.  Struktura dokumentu, který definuje rozložení rámů na stránce, se od struktury běžné stránky trochu liší. Stránka s rámy musí obsahovat záhlaví (HEAD) a definici rozložení rámů (FRAMESET). Tělo dokumentu (BODY) je nepovinné a zobrazuje se pouze v těch prohlížečich, které rámy nepodporují.  Definice rozložení rámů na stránce se provádí pomocí párového elementu FRAMESET. Lze u něho použít atributy ROWS a COLS, které určují, na kolik řádek či sloupců se obrazovka rozdělí. Pokud použijeme oba atributy najednou, vytvoří se mřížka.

20  Jednoduchý program, který nám může pomoct v tvorbě www stránek:

21  Pro formátování textu, prvků stránky i pro umístění objekttů na stránce se v současnosti pouzívají kaskádové styly. Dá se říct, že pomocí stylů pracujeme podobně, jako při využití stylů v textových editorech. Můžeme přesně modifikovat a nastavovat parametry písma, textu (odsazení odstavce...), hypertextové odkazy, detailní nastavení vlastností jednotlivých objektů atd. Problémem kaskádových stylů může být skutečnost, že ne všechny internetové prohlížeče akceptují striktní formu CSS a „vykládají si “ stejné styly různě. Je třeba vždy vyzkoušet, jak se stránka chová v různých prohlížečích.

22  CSS styly je možno definovat třemi způsoby.  - přímý zápis stylu - tímto se rozumí definice stylu přímo v souvislost s konkrétním tagem uvnitř stránky. Př. Chceme vytvořit červený nadpis tučným písmem: Hlavní červený nadpis  - definice stylu v hlavičce - souhrn vlastností na dané stránce zapíšeme do hlavičky stránky. Př:... h1 {color: red} Mezi párovými tagy můžeme definovat libovolný počet vlastních stylů.  - externí soubor CSS V principu se jedná o oddělení obsahu stránky a souboru, určujícího její vzhled. Soubor určující vzhled se připojuje (linkuje) většinou do všech stránek jednoho vebu. Je tedy možno najednou změnit celý vzhled webové stránky pouze změnou jednoho souboru. Externí soubos se styly by měl mít příponu CSS - tedy např. neco.css (v našem příkladě styly.css) V tomto souboru stačí definovat bez jakýchkoli dalších značek definovat standardní metodou styl Př. - obsah jednoduchého souboru se styly h2 {color: blues} h1 {color: green}

23 Formátování textů:  Vlastnosti písma: color: rgb(28, 46, 59); - barva (red, blue atd. ) background-color: red: - barva pozadí font-size: 15px; - velikost font-style: normal; - styl písma (bold, italic) font-family: Arial,Helvetica,sans-serif; - font text-decoration; - podtržení (none, underline) Vlastnosti odstavce. text-align: left; - zarovnání (center, right, justify) vertical-align: top; margin-top: 6px; - odsazení nad odstavcem (v bodech px) margin-bottom: 0px; - odsazení pod odstavcem

24 Formátování odstavců:  #ramecek { border: 10px solid rgb(191, 153, 115); - šířka, barva margin: 0pt auto 1em - vnější okraj; padding: 10px; - vnitřní okraj position: relative; - umístění - pozice - relativní vůči předchozí oblasti top: 0pt; left: 0pt; width: 90%; - velikost vůči stránce min-width: 530px; - minimální velikost max-width: 1024px; background-color: rgb(255, 230, 204); - barva elementu (ráměčku)  Oblasti mohou být také plovoucí přes část okna prohlížeče: float: left:


Stáhnout ppt " Existují v podstatě tři přístupy ke tvorbě www stránek. Prvním je využití tzv. wysiwyg editorů, ve kterých píšete rovnou text, nestaráte se o to jak."

Podobné prezentace


Reklamy Google