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

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

WWW stránky. Trocha teorie Www stránky bývají nejčastěji psány v programovacím jazyku html Www stránky bývají nejčastěji psány v programovacím jazyku.

Podobné prezentace


Prezentace na téma: "WWW stránky. Trocha teorie Www stránky bývají nejčastěji psány v programovacím jazyku html Www stránky bývají nejčastěji psány v programovacím jazyku."— Transkript prezentace:

1 WWW stránky

2 Trocha teorie Www stránky bývají nejčastěji psány v programovacím jazyku html Www stránky bývají nejčastěji psány v programovacím jazyku html Všechny potřebné informace pro zobrazení webové stránky se nacházejí ve zdrojovém kódu Všechny potřebné informace pro zobrazení webové stránky se nacházejí ve zdrojovém kódu Webová stránka je psána pomocí tagů Webová stránka je psána pomocí tagů Webové stránky se dají tvořit v html editorech Webové stránky se dají tvořit v html editorech Nebo také lze psát čistý zdrojový kód např. v poznámkovém bloku Nebo také lze psát čistý zdrojový kód např. v poznámkovém bloku

3 Vytvoření www stránky Vytvoříme si Nový textový dokument (pravé tlačítko myši/Nový/Textový dokument) Vytvoříme si Nový textový dokument (pravé tlačítko myši/Nový/Textový dokument) Klikneme na Soubor/Uložit jako Klikneme na Soubor/Uložit jako Název souboru: index.htm Název souboru: index.htm Potom si otevřeme soubor index.htm Potom si otevřeme soubor index.htm Klikneme na Zobrazit/zdrojový kód (zkratka alt+z+z) Klikneme na Zobrazit/zdrojový kód (zkratka alt+z+z) Otevře se textový dokument a v něm můžete upravovat kód Otevře se textový dokument a v něm můžete upravovat kód

4

5 Základní struktura Začátek a konec dokumentu Začátek a konec dokumentu Hlavička, nezobrazuje se, jsou v ní důležité informace Hlavička, nezobrazuje se, jsou v ní důležité informace Název dokumentu Název dokumentu Tělo dokumentu. Co je zde napsáno bude se zobrazovat Tělo dokumentu. Co je zde napsáno bude se zobrazovat

6 Tagy Tagy jsou uzavřeny v ostrých závorkách <> Tagy jsou uzavřeny v ostrých závorkách <> Tagy můžeme rozdělit na párové nebo nepárové Tagy můžeme rozdělit na párové nebo nepárové Párové tagy jsme viděli již v základním rozdělení webové stránky např. Párové tagy jsme viděli již v základním rozdělení webové stránky např. Tagy mohou mít své parametry. zadání: nazevparametru=”hodnota“ Tagy mohou mít své parametry. zadání: nazevparametru=”hodnota“

7 Metainformace HTML značka HTML značka Řídí způsob, jakým je stránka v síti WWW indexována. Uvádí se v hlavičce HTML dokumentu (mezi značkami a ). Nejsou-li dostupné žádné další informace, budou indexována všechna slova vašeho dokumentu (s výjimkou poznámek) a několik prvních slov dokumentu bude použito jako krátká ukázka ve vráceném seznamu odpovědí na příslušný dotaz. Řídí způsob, jakým je stránka v síti WWW indexována. Uvádí se v hlavičce HTML dokumentu (mezi značkami a ). Nejsou-li dostupné žádné další informace, budou indexována všechna slova vašeho dokumentu (s výjimkou poznámek) a několik prvních slov dokumentu bude použito jako krátká ukázka ve vráceném seznamu odpovědí na příslušný dotaz.

8 Meta tagy Nejdůležitější pro indexování jsou "description" a "keywords". "Description" vrací námi definovaný popis stránky na místě výpisu vyhledávací služby. "Keywords" poskytuje klíčová slova (jejich možné kombinace) pro vyhledávací službu k jejich přidružení s příslušným URL.. Nejdůležitější pro indexování jsou "description" a "keywords". "Description" vrací námi definovaný popis stránky na místě výpisu vyhledávací služby. "Keywords" poskytuje klíčová slova (jejich možné kombinace) pro vyhledávací službu k jejich přidružení s příslušným URL..

9 Barvy Lze zadávat několika způsoby. Lze zadávat několika způsoby. 1. název barvy např. 1. název barvy např. 2. pomocí šestnáctkového zápisu modelu RGB (z ang. red (červená), green(zelená), blue(modrá) ) každá barvy je zastoupena dvěma čísly, ty mohou nabývat hodnoty 00-ff 2. pomocí šestnáctkového zápisu modelu RGB (z ang. red (červená), green(zelená), blue(modrá) ) každá barvy je zastoupena dvěma čísly, ty mohou nabývat hodnoty 00-ff

10 Obrázky - grafika Pro vkládání obrázku existuje tag Pro vkládání obrázku existuje tag Parametry: Parametry: src - umístění souboru s obrázkem, relativní nebo absolutní adresa souboru (URL) src - umístění souboru s obrázkem, relativní nebo absolutní adresa souboru (URL) alt - alternativní popis (text) alt - alternativní popis (text) width a height – šířka a výška obrázku v procentuální hodnotě nebo v pixelech width a height – šířka a výška obrázku v procentuální hodnotě nebo v pixelech align - left, right, top, texttop, middle, absmiddle, baseline, bottom, absbottom align - left, right, top, texttop, middle, absmiddle, baseline, bottom, absbottom

11 Formátování textu tučný text tučný text kurzíva kurzíva podtržení podtržení formátuje text pomocí parametrů v závorce možné hodnoty formátuje text pomocí parametrů v závorce možné hodnoty Parametry: size-velikost textu (1-7) Parametry: size-velikost textu (1-7) Face-typ fontu písma (např. Arial) Face-typ fontu písma (např. Arial) Color-barva (viz v kapitole o barvách) Color-barva (viz v kapitole o barvách)

12 Příklad

13 Parametry tagu body bgcolor barva pozadí bgcolor barva pozadí background obrázek na pozadí background obrázek na pozadí bgproperties (fixed, scroll) fixed-pozadí se neposouvá společně s textem, sroll-posouvá se s textem bgproperties (fixed, scroll) fixed-pozadí se neposouvá společně s textem, sroll-posouvá se s textem link barva nenavštívených odkazů link barva nenavštívených odkazů vlink barva navšvtívených odkazů vlink barva navšvtívených odkazů alink barva odkazů na které je kliknuto alink barva odkazů na které je kliknuto

14 Bloky textu a nadpisy odstavec odstavec řádkový zlom řádkový zlom vycentrování vycentrování nadpis úrovně 1 (podobně - ) nadpis úrovně 1 (podobně - ) čára čára parametry tagu : align-zarovnání (left, center, right, justify (do bloku) ) parametry tagu : align-zarovnání (left, center, right, justify (do bloku) )

15 Seznamy položka seznamu položka seznamu číslovaný seznam číslovaný seznam odrážkový seznam odrážkový seznam Ukázka použití Ukázka použití první položka první položka druhá položka druhá položka parametry type, square (čtvereček), circle (kolečko), disc (puntík), 1 (normální číslování), A (velká písmenka), a (malá písmenka) I (velké řím. číslice), i (malé řím. číslice) parametry type, square (čtvereček), circle (kolečko), disc (puntík), 1 (normální číslování), A (velká písmenka), a (malá písmenka) I (velké řím. číslice), i (malé řím. číslice)

16 Příklad

17 Odkazy Po kliknutí na odkaz se nám zobrazí jiná webová stránka Po kliknutí na odkaz se nám zobrazí jiná webová stránka používá se tag používá se tag parametry : href: cíl odkazu (název souboru, adresa www stránky, či název záložky (slouží k odkazu na jiné místo v dokumentu) ) parametry : href: cíl odkazu (název souboru, adresa www stránky, či název záložky (slouží k odkazu na jiné místo v dokumentu) ) name: název záložky name: název záložky příklad použití záložky příklad použití záložky nahoru Po kliknutí na „nahoru“ nahoru Po kliknutí na „nahoru“ se naroluje stránka na místo, kam je vložená záložka

18 Tabulky – základ života Tag table tvoří tabulku Tag table tvoří tabulku tr a td – řádek a buňka tabulky tr a td – řádek a buňka tabulky align - obtékání tabulky textem align - obtékání tabulky textem Cellpadding a cellspacing Cellpadding a cellspacing vnitřní a vnější okraj buněk (pixely) vnitřní a vnější okraj buněk (pixely) Border - šířka rámečku buněk (pixely) Border - šířka rámečku buněk (pixely) Width - minimální šířka tabulky Width - minimální šířka tabulky Height - minimální výška Height - minimální výška Background - obrázek na pozadí (URL obrázku) Background - obrázek na pozadí (URL obrázku) Bordercolor - barva rámečku Bordercolor - barva rámečku BgColor – barva pozadí tabulky BgColor – barva pozadí tabulky

19 KONEC PREZENTACE Vypracovali: Vypracovali: Tomáš Daniel Tomáš Daniel Jan Králík Jan Králík


Stáhnout ppt "WWW stránky. Trocha teorie Www stránky bývají nejčastěji psány v programovacím jazyku html Www stránky bývají nejčastěji psány v programovacím jazyku."

Podobné prezentace


Reklamy Google