1 / 53

Hodina 3.

14SIAP – SÍTĚ A PROTOKOLY. Hodina 3. Odkazy. Z angl. anchor <a> ….. </a> Odkaz je modrý a mo dř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. Odkazy. Atributy: href = "URL" c íl odkazu

yair
Download Presentation

Hodina 3.

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. Odkazy • Z angl. anchor • <a> ….. </a> • 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 • <a href="http://www.fd.cvut.cz" title="hlavní stránky Fakulty dopravní ČVUT">fakulta dopravní</a> • <a href="http://www.seznam.cz" title="Seznam najdu tam co neznám" target="_blank">seznam.cz</a>

  5. Odkazy – příklady 2 <a href="http://www.seznam.cz" title="Seznamnajdu tam co neznám"><fontcolor="green">seznam.cz</font></a> • není to samé jako <font color="green"><a href="http://www.seznam.cz"title="Seznamnajdu tam co neznám">seznam.cz</a></font> (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: • <a href="#zalozka-kapitola-4">odkaz na kapitolu 4</a>......<h4 id="zalozka-kapitola-4">Kapitola 4</h4>

  7. Úkoly • Použijte stránku z předchozího cvičení: • změňte pro celou stránku: pozadí: #6699ff, barva písma: white • barva nenavštívených odkazů: červená, navštívených: žlutá • před (již z minula vytvořený) seznam vložte nadpis 1. úrovně zarovnaný vlevo: "Co jsem se dnes naučil" • 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ě. • vložte za seznam pomocí PSPadu 15 odstavců (LoremIpsum generátor 70-150 slov v odstavci) • 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

  8. Řešení úkolu • 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" <body bgcolor="#6699ff" text="white" link="red" vlink="yellow"> .... <h1 align="left">Co jsem se dnes naučil</h1> <ol type="a"> <li>Seznamy ..... ...... </ol> ... </body>

  9. Řešení úkolu • 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ě. <ol type="a"> <li><a href="http://www.jakpsatweb.cz/html/seznamy.html" title="informace o seznamech v jazyce HTML" target="_blank">Seznamy</a> ....... </li> ...... ...... </ol>

  10. Řešení úkolu • 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 <ol type="a"> ....... <li>Odkazy</li> <li><a href="#zalozka-kapitola">Záložky</a></li> </ol> ...... <h2 id="zalozka-kapitola">Kapitola o záložce</h2> <p>Nam portti ...... </p>

  11. URL • URL - UniformResourceLocator • 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: • http://www.fd.cvut.cz/pro-studenty/index.html

  12. URL • Obecný tvar URL: • schéma://uživatel:heslo@server:port/cesta[parametry] • schéma://server/cesta[parametry] • Schéma: • protokol, kterým je možné zdroj zpřístupnit • HTTP, HTTPS, FTP, TELNET,…. • Server: • adresa počítače, buď jako • doménové jméno - www.fd.cvut.cz • IP- 147.32.100.7

  13. URL • Doménové jméno: • www.fd.cvut.cz • 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ě • www.fd.cvut.cz – 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: • Udávají se za „?“ • Parametry předávané www stránce jako hodnoty proměnných. • ?zeme=cz&mena=koruna • 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 • http://www.fd.cvut.cz/pro-studenty/index.html • Relativní adresa - část informace o umístění • 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

  16. Relativní adresování http://www.fd.cvut.cz/ • Odkaz v souboru „index.html“ • fotky/brno.jpg • dokumenty/skoleni.doc / fotky brno.jpg • Odkaz v souboru „dokumenty.html“ • skoleni.doc • ../fotky/brno.jpg • ../index.html dokument skoleni.doc dokumenty.html index.html Příklad:

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

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

  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. Úkoly • Vytvořte nový HTML dokument. • Soubor uložte do podadresáře "podadresar„ (ten si vytvořte) • 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.) • Vyzkoušejte "přes" FD WWW hosting

  21. Řešení úkolu 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.) …. <body> <a href="../cviceni_03.html#zalozka-kapitola"> Odkaz na záložku</a> </body> …..

  22. Obrázky • z angl. image • <img>(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!!!)

  24. Obrázky • Atributy: • vspace – vertikální mezera od obrázku (nahoře, dole) • vspace="2" • jednotky px • hspace – horizontální mezera od obrázku (zleva, zprava) • hspace="3" • title – titulek obrázku • title="osobní automobil Škoda" • jako u odkazů (text se objeví po najetí myši)

  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: <imgsrc="masinka.jpg" alt="mašinka s krtečkem">

  27. Obrázky • příklady: <img src="../masinka.jpg" alt="mašinka"> • v IE • v FF

  28. Obrázky 350px • příklady: <imgsrc="masinka.jpg" alt="mašinka s krtečkem" width="490" height="350"> 490px

  29. Obrázky 300px • příklady: <imgsrc="masinka.jpg" alt="mašinka s krtečkem" width="300">

  30. Obrázky 100px 300px • příklady: <imgsrc="masinka.jpg" alt="mašinka s krtečkem" width="300" height="100">

  31. Obrázky 65px 100% • příklady: <imgsrc="obrazek-pozadi-procenta.jpg" width="100%" height="65">

  32. Obrázky • příklady: <imgsrc="masinka.jpg" alt="mašinka s krtečkem" border="4">

  33. Obrázky • příklady: <p align="center">Tady bude obrazek:<imgsrc="masinka.jpg" alt="mašinka" border="2"> a pak pokracuje text...</p>

  34. Obrázky <p><imgsrc="masinka.jpg" alt="mašinka s krtečkem" border="2" ...>LoremipsumdolorsitametconsectetuerpellentesqueauctorsitnibhNunc. Quam vel utipsumpedeloremfeugiatamet Sed Phaselluset. Tincidunt semper estUteget id interdumodioerosnislsit. Orcimorbi sed Nullaaccumsanpedetincidunthabitant semper nullanec. Mauriscongue semper PraesentQuisquepellentesquecondimentumjusto in telluseget. SuspendisseAeneantortorcondimentumlaoreettinciduntIntegerQuisque Sed. </p> • příklady: Pro další příklady budeme předpokládat následující strukturu kódu html.

  35. Obrázky • příklady: ... <imgsrc="masinka.jpg" alt="mašinka s krtečkem" border="2" >...

  36. Obrázky • příklady: ... <imgsrc="masinka.jpg" alt="masinka s krtečkem" border="2" align="top">...

  37. Obrázky • příklady: ... <imgsrc="masinka.jpg" alt="mašinka s krtečkem" border="2" align="middle">...

  38. Obrázky • příklady: ... <imgsrc="masinka.jpg" alt="mašinka s krtečkem" border="2" align="left">...

  39. Obrázky • příklady: ... <imgsrc="masinka.jpg" alt="mašinka s krtečkem" border="2" align="right">...

  40. Obrázky • příklady: ... <imgsrc="masinka.jpg" alt="mašinka s krtečkem" border="2" align="left" width="50%">...

  41. Obrázky • příklady: ... <imgsrc="masinka.jpg" alt="mašinka s krtečkem" border="2" align="left" width="50%" hspace="10">...

  42. Obrázky • příklady: <a href="http://krtecek.cz" title="web okrtečkovi"><imgsrc="masinka.jpg" alt="mašinka s krtečkem" width="200"></a> - <a href="http://krtecek.cz" title="web o krtečkovi"><imgsrc="masinka.jpg" alt="mašinka s krtečkem" width="200" border="0"></a>

  43. Klikací mapy • z angl. map • <map> ... </map> • na stránce se nezobrazuje • rozděluje obrázek na "klikací oblasti" • oblast je reprezentována tagem <area> • 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 • <area> (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 lhx,lhy,pdx,pdy lhx lhy pdy pdx • Oblast tvaru - Obdélník: shape="rect" coords="levý horní roh, pravý dolní roh"

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

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

  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 <area>, která je definovaná první. • nohref - např. pro tvorbu klikacího mezikruží, kdy větší circle někam kliká.

  49. Klikací mapy • příklad: <map name="mapa1"> <area shape="rectangle" alt="www.google.cz" title="stránky google.cz" coords="34,65,195,126" href="http://www.google.cz" > <area shape="rectangle" alt="www.seznam.cz" title="stránky seznam.cz" coords="34,139,157,179" href="www.seznam.cz" > </map> <imgsrc="klikaci-mapa.jpg" alt="klikaci mapa" usemap="#mapa1">

  50. Klikací mapy • On-line generátor klikacích map: • http://www.maschek.hu/imagemap/imgmap

More Related