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

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

Hodina 3. 14SIAP – SÍTĚ A PROTOKOLY. Odkazy  Z angl. anchor  …..  Odkaz je modrý a modře se podtrhává (není-li nastaveno jinak, např. atributy v BODY)

Podobné prezentace


Prezentace na téma: "Hodina 3. 14SIAP – SÍTĚ A PROTOKOLY. Odkazy  Z angl. anchor  …..  Odkaz je modrý a modře se podtrhává (není-li nastaveno jinak, např. atributy v BODY)"— Transkript prezentace:

1 Hodina 3. 14SIAP – SÍTĚ A PROTOKOLY

2 Odkazy  Z angl. anchor  …..  Odkaz je modrý a modře se podtrhává (není-li nastaveno jinak, např. atributy v BODY)  Navštívený odkaz – fialový (včetně podtržení)  Odkazem může být i obrázek

3 Odkazy  Atributy:  href="URL" cíl odkazu bez tohoto atributu není odkaz zobrazován jako odkaz href="" – odkaz na stejnou stránku  target="hodnota" _blank - pro dokumenty použít nové okno prohlížeče _top - stejné okno prohlížeče (nejvyšší okno hierarchie rámů)  title="řetězec znaků" více informací o odkazu text se zobrazí po "najetí" myši na odkaz

4 Odkazy – příklady 1  fakulta dopravní  seznam.cz

5 Odkazy – příklady 2 seznam.cz  není to samé jako seznam.cz (barva odkazu není zelená – tag "font" nemá vliv)

6 Záložka  id="řetězec znaků" univerzální atribut identifikátor použití např. pro definici záložek  Příklad:  odkaz na kapitolu Kapitola 4

7  Použijte stránku z předchozího cvičení: 1. změňte pro celou stránku: pozadí: #6699ff, barva písma: white 2. barva nenavštívených odkazů: červená, navštívených: žlutá 3. před (již z minula vytvořený) seznam vložte nadpis 1. úrovně zarovnaný vlevo: "Co jsem se dnes naučil" 4. slovo "Seznamy" upravte jako odkaz na stránku, kterou najdete na 1. místě ve vyhledávači Google po zadání slov "seznamy html". U odkazu nastavte titulek "informace o seznamech v jazyce HTML". Po kliknutí se stránka bude zobrazovat v novém okně. 5. vložte za seznam pomocí PSPadu 15 odstavců (Lorem Ipsum generátor slov v odstavci) 6. před 15. odstavec vložte nadpis druhé úrovně „Kapitola o záložce“ a slovo "Záložky" (ze seznamu) upravte jako odkaz na tuto kapitolu Úkoly

8  změňte pro celou stránku: pozadí: #6699ff, barva písma: bílá  barva nenavštívených odkazů: červená, navštívených: žlutá  před (již z minula vytvořený) seznam vložte hlavní nadpis zarovnaný vlevo: "Co jsem se dnes naučil".... Co jsem se dnes naučil Seznamy Řešení úkolu

9  slovo "Seznamy" upravte jako odkaz na stránku, kterou najdete na 1. místě ve vyhledávači Google po zadání slov "seznamy html". U odkaz nastavte titulek "informace o seznamech v jazyce HTML". Stránka se bude zobrazovat v novém okně. Seznamy Řešení úkolu

10  před 15. odstavec vložte nadpis druhé úrovně „Kapitola o záložce“ a slovo "Záložky" (ze seznamu) upravte jako odkaz na tuto kapitolu Odkazy Záložky Kapitola o záložce Nam portti Řešení úkolu

11 URL  URLURL  URL - Uniform Resource Locator  je řetězec znaků s definovanou strukturou, který slouží k přesné specifikaci umístění zdrojů informací (ve smyslu dokument nebo služba) na internetu.  Příklad: 

12 URL  Obecný tvar URL:   schéma://server/cesta[parametry]  Schéma:  protokol, kterým je možné zdroj zpřístupnit protokol HTTP, HTTPS, FTP, TELNET,….  Server:  adresa počítače, buď jako a) doménové jméno - b) IP

13 URL  Doménové jméno:  cz – doména 1. úrovně (doména státu+generická doména) cvut.cz - doména 2. úrovně fd.cvut.cz – doména 3. úrovně – doména 4. úrovně  Port:  Defaultní 80 – nemusím zadávat  443 – HTTPS  jiný…

14 URL  Cesta k souboru:  /pro-studenty/index.html  Další informace: a) Udávají se za „?“ Parametry předávané www stránce jako hodnoty proměnných. ?zeme=cz&mena=koruna b) Udávají se za „#“ Ukazuje na záložku v dokumentu #kombinovane-studium

15 Absolutní x Relativní adresování  Absolutní adresa – úplné URL ke zdroji   Relativní adresa - část informace o umístění  pro-studenty/index.html pro-studenty/index.html  Částečně absolutní – úplné URL bez protokolu a doménového jména (začíná lomítkem)  /pro-studenty/index.html /pro-studenty/index.html

16 Relativní adresování  Příklad: / fotky dokument index.html brno.jpg skoleni.doc Odkaz v souboru „index.html“ fotky/brno.jpg dokumenty/skoleni.doc dokumenty.html Odkaz v souboru „dokumenty.html“ skoleni.doc../fotky/brno.jpg../index.html /

17 Úkol  Jak vypadá absolutní/relativní/částečně absolutní adresa v souboru index.html odkazující na soubor brno.jpg? / fotky dokument index.html brno.jpg skoleni.doc fd

18 Řešení / fotky dokument index.html brno.jpg skoleni.doc Odkaz v souboru „index.html“ absolutní absolutní relativní relativní../../fotky/brno.jpg částečně absolutní částečně absolutní /fotky/brno.jpg fd  Jak vypadá absolutní/relativní/částečně absolutní adresa v souboru index.html odkazující na soubor brno.jpg?

19 URL pravidla  Nepoužívat češtinu a speciální znaky  Používejte spíše malá písmena  Problém file systému serverů

20  Vytvořte nový HTML dokument. 1. Soubor uložte do podadresáře "podadresar„ (ten si vytvořte) 2. V dokumentu vytvořte odkaz na kapitolu o záložkách ("Kapitola o záložce"), která je na WWW stránce vytvořené v předchozím úkolu a uložené v nadřazeném adresáři. (Při kliknutí na odkaz se ve stejném okně prohlížeče otevře WWW stránka z předchozího úkolu.) 3. Vyzkoušejte "přes" FD WWW hosting Úkoly

21  Vytvořte odkaz na kapitolu o záložkách ("Kapitola o záložce"), která je na WWW stránce vytvořené v předchozím úkolu a uložené v nadřazeném adresáři. (Při kliknutí na odkaz se ve stejném okně prohlížeče otevře WWW stránka z předchozího úkolu.) …. Odkaz na záložku ….. Řešení úkolu

22 Obrázky  z angl. image  (nepárová značka)  Atributy:  src - umístění souboru s obrázkem (URL) src= "../pozadi.jpg" typy souborů:.jpg,.gif a.png. nenalezeno – křížek (IE) a alternativní text  alt - alternativní popis obrázku src="bmw.jpg" alt="automobil značky BMW" nenalezen obrázek, textové prohlížeče,....

23 Obrázky  Atributy:  width – šířka obrázku width="300" nebo width="300px" jednotky pixely, procenta  height – výška obrázku height="250" nebo width="250px"  border – rámeček okolo obrázku border="10" nebo border="10px" lepší nastavit na 0 (nebude rámeček okolo obrázku v případě, že obrázek bude odkazem!!!)

25 Obrázky  Atributy:  align – zarovnání obrázku hodnoty: left – zarovnání obrázku doleva = text obtéká obrázek zprava right - zarovnání obrázku doprava = text obtéká obrázek zleva top - horní okraj obrázku bude zarovnán s horním okrajem řádku middle - střed obrázku bude zarovnán na účaří řádku bottom - dolní okraj obrázku bude zarovnán na dolní okraj řádku align="left"  usemap – mapa spojená s obrázkem usemap="#mapa1"

26 Obrázky  příklady:

27 Obrázky  příklady: a) v IE b) v FF

28 Obrázky  příklady: 350px 490px

29 Obrázky  příklady: 300px

30 Obrázky  příklady: 300px 100px

31 Obrázky  příklady: 100% 65px

32 Obrázky  příklady:

33 Obrázky  příklady: Tady bude obrazek: a pak pokracuje text...

34 Obrázky  příklady: Pro další příklady budeme předpokládat následující strukturu kódu html.... Lorem ipsum dolor sit amet consectetuer pellentesque auctor sit nibh Nunc. Quam vel ut ipsum pede lorem feugiat amet Sed Phasellus et. Tincidunt semper est Ut eget id interdum odio eros nisl sit. Orci morbi sed Nulla accumsan pede tincidunt habitant semper nulla nec. Mauris congue semper Praesent Quisque pellentesque condimentum justo in tellus eget. Suspendisse Aenean tortor condimentum laoreet tincidunt Integer Quisque Sed.

35 Obrázky  příklady:...

36 Obrázky  příklady:...

37 Obrázky  příklady:...

38 Obrázky  příklady:...

39 Obrázky  příklady:...

40 Obrázky  příklady:...

41 Obrázky  příklady:...

42 Obrázky  příklady: -

43 Klikací mapy  z angl. map ...  na stránce se nezobrazuje  rozděluje obrázek na "klikací oblasti"  oblast je reprezentována tagem  Atributy:  name – jméno obrázku se kterým bude mapa spojena, u obrázku musí být název uveden v atributu usemap

44 Klikací mapy  (nepárový tag)  Atributy:  href= "URL" - cíl odkazu  shape="hodnota" – tvar oblasti rect – obdélník circle – kruh polygon – mnohoúhelník  coords="hodnota" – souřadnice oblasti levý horní roh obrázku má souřadnice 0,0

45 Klikací mapy  Oblast tvaru - Obdélník: shape="rect" coords="levý horní roh, pravý dolní roh" lhx lhy pdx pdy lhx,lhy,pdx,pdy

46 Klikací mapy  Oblast tvaru - Kruh: shape="circle" coords="střed, poloměr" x y x,y,r r

47 Klikací mapy  Oblast tvaru - Mnohoúhelník: shape="polygon" coords="souřadnice vrcholů mnohoúhelníku" x y x1,y1,x2,y2,.....

48 Klikací mapy  Atributy:  title="popis odkazu"  target="kam se odkaz zobrazí"  nohref – oblast není odkazem  alt="alternativní text"  v překrývaných oblastech, vyhrává ta, která je definovaná první.  nohref - např. pro tvorbu klikacího mezikruží, kdy větší circle někam kliká.

49 Klikací mapy  příklad:

50 Klikací mapy  On-line generátor klikacích map: 

51 Úkoly na procvičení  Vytvořte podle obrázku stránku v html  podklad – zadání: H:\Studenti\K614\SIAP\cviceni\Jerabek\cviceni_03b.doc  podklad – obrázek: H:\Studenti\K614\SIAP\cviceni\Jerabek\reseni_03\snehulak.jpg

52 Řešení části úkolu – bez klikací mapy Mezi slepým člověkem a zimou Tiché pohlazení sněhových vloček, vůně mrazivého slunného dne vítězný pochod.

53 Řešení části úkolu – klikací mapou Mezi slepým člověkem a zimou vítězný pochod.


Stáhnout ppt "Hodina 3. 14SIAP – SÍTĚ A PROTOKOLY. Odkazy  Z angl. anchor  …..  Odkaz je modrý a modře se podtrhává (není-li nastaveno jinak, např. atributy v BODY)"

Podobné prezentace


Reklamy Google