14SIAP – SÍTĚ A PROTOKOLY Hodina 3.
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
Odkazy Atributy: href="URL" target="hodnota" title="řetězec znaků" 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
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>
Odkazy – příklady 2 <a href="http://www.seznam.cz" title="Seznam najdu tam co neznám"> <font color="green">seznam.cz</font> </a> není to samé jako <font color="green"> <a href="http://www.seznam.cz" title="Seznam najdu tam co neznám">seznam.cz</a> </font> (barva odkazu není zelená – tag "font" nemá vliv)
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>
Ú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ů (Lorem Ipsum 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
Ř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> 8
Ř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> 9
Ř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> 10
URL 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: http://www.fd.cvut.cz/pro-studenty/index.html 11
URL Obecný tvar URL: Schéma: Server: 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 12
URL Doménové jméno: Port: 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ý… 13
URL Cesta k souboru: Další informace: /pro-studenty/index.html 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 14
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 15
Relativní adresování Příklad: http://www.fd.cvut.cz/ Odkaz v souboru „index.html“ fotky/brno.jpg dokumenty/skoleni.doc / fotky brno.jpg dokument Odkaz v souboru „dokumenty.html“ skoleni.doc ../fotky/brno.jpg ../index.html skoleni.doc dokumenty.html index.html 16
Úkol Jak vypadá absolutní/relativní/částečně absolutní adresa v souboru index.html odkazující na soubor brno.jpg? http://www.fd.cvut.cz / fotky brno.jpg dokument skoleni.doc fd index.html 17
Ř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 18
URL pravidla Nepoužívat češtinu a speciální znaky Používejte spíše malá písmena Problém file systému serverů 19
Ú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 20
Ř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> ….. 21
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,.... 22
Obrázky Atributy: width – šířka obrázku height – výš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!!!) 23
Obrázky Atributy: vspace – vertikální mezera od obrázku (nahoře, dole) 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) 24
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" 25
Obrázky příklady: <img src="masinka.jpg" alt="mašinka s krtečkem"> 26
Obrázky příklady: <img src="../masinka.jpg" alt="mašinka"> v IE v FF 27
Obrázky příklady: <img src="masinka.jpg" alt="mašinka s krtečkem" width="490" height="350"> 350px 490px 28
Obrázky příklady: <img src="masinka.jpg" alt="mašinka s krtečkem" width="300"> 300px 29
Obrázky příklady: <img src="masinka.jpg" alt="mašinka s krtečkem" width="300" height="100"> 100px 300px 30
Obrázky příklady: <img src="obrazek-pozadi-procenta.jpg" width="100%" height="65"> 65px 100% 31
Obrázky příklady: <img src="masinka.jpg" alt="mašinka s krtečkem" border="4"> 32
Obrázky příklady: <p align="center">Tady bude obrazek: <img src="masinka.jpg" alt="mašinka" border="2"> a pak pokracuje text...</p> 33
Obrázky příklady: Pro další příklady budeme předpokládat následující strukturu kódu html. <p><img src="masinka.jpg" alt="mašinka s krtečkem" border="2" ...>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. </p> 34
Obrázky příklady: ... <img src="masinka.jpg" alt="mašinka s krtečkem" border="2" >... 35
Obrázky příklady: ... <img src="masinka.jpg" alt="masinka s krtečkem" border="2" align="top">... 36
Obrázky příklady: ... <img src="masinka.jpg" alt="mašinka s krtečkem" border="2" align="middle">... 37
Obrázky příklady: ... <img src="masinka.jpg" alt="mašinka s krtečkem" border="2" align="left">... 38
Obrázky příklady: ... <img src="masinka.jpg" alt="mašinka s krtečkem" border="2" align="right">... 39
Obrázky příklady: ... <img src="masinka.jpg" alt="mašinka s krtečkem" border="2" align="left" width="50%">... 40
Obrázky příklady: ... <img src="masinka.jpg" alt="mašinka s krtečkem" border="2" align="left" width="50%" hspace="10">... 41
Obrázky příklady: <a href="http://krtecek.cz" title="web o krtečkovi"><img src="masinka.jpg" alt="mašinka s krtečkem" width="200"></a> - <a href="http://krtecek.cz" title="web o krtečkovi"><img src="masinka.jpg" alt="mašinka s krtečkem" width="200" border="0"></a> 42
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 43
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 44
Klikací mapy Oblast tvaru - Obdélník: shape="rect" coords="levý horní roh, pravý dolní roh" lhx,lhy,pdx,pdy lhx lhy pdy pdx 45
Klikací mapy Oblast tvaru - Kruh: shape="circle" coords="střed, poloměr" x,y,r r y x 46
Klikací mapy Oblast tvaru - Mnohoúhelník: shape="polygon" coords="souřadnice vrcholů mnohoúhelníku" x1,y1,x2,y2,..... y x 47
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á. 48
Klikací mapy <map name="mapa1"> 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> <img src="klikaci-mapa.jpg" alt="klikaci mapa" usemap="#mapa1"> 49
Klikací mapy On-line generátor klikacích map: http://www.maschek.hu/imagemap/imgmap 50
Ú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 51
Řešení části úkolu – bez klikací mapy <p align="justify"> <a href="http://www.snehulak.cz"> <img src="snehulak.jpg" alt="snehulak.jpg, 1 kB" align="left" border="0" height="82" width="61" hspace="10"> </a>Mezi slepým člověkem a zimou .............. Tiché <font color="green"><strong>pohlazení sněhových vloček</strong></font>, vůně mrazivého slunného dne ........................ vítězný pochod. </p> 52
Řešení části úkolu – klikací mapou <p align="justify"> <img src="snehulak.jpg" alt="snehulak.jpg, 1 kB" align="left" border="0" height="82" width="61" hspace="10" usemap="#mapa1">Mezi slepým člověkem a zimou ...................................... vítězný pochod. </p> <map name="mapa1"> <area shape="rectangle" alt="klobouk" title="www.klobouk.cz" coords="6,2,46,27" href="http://www.klobouky.cz/" > <area shape="rectangle" alt="snehulak" title="www.snehulak.cz" coords="0,0,61,82" href="http://www.snehulak.cz/" > </map> 53