Hodina 3.

Hodina 3.

14SIAP – SÍTĚ A PROTOKOLY

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"

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>

http://www.fd.cvut.cz/

http://www.fd.cvut.cz/

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í atributidentifikátorpouž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>

Použijte stránku z předchozího cvičení:1. změňte pro celou stránku: pozadí: #6699ff, barva

písma: white2. 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 70-150 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

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>

Ř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>

Ř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>

Řešení úkolu

URL

URLURL - UUniform RResource LLocator 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

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

a)doménové jméno - www.fd.cvut.cz b) IP - 147.32.100.7

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ý…

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

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

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

http://www.fd.cvut.cz//

Ú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

http://www.fd.cvut.cz

fd

Řešení

/

fotky

dokument

index.html

brno.jpg

skoleni.doc

• Odkaz v souboru „index.html“• absolutní absolutní http://www.fd.cvut.cz/fotky/brno.jpg• relativní relativní ../../fotky/brno.jpg• částečně absolutníčástečně absolutní/fotky/brno.jpg

http://www.fd.cvut.cz

fd

Jak vypadá absolutní/relativní/částečně absolutní adresa v souboru index.html odkazující na soubor brno.jpg?

URL pravidla

Nepoužívat češtinu a speciální znaky Používejte spíše malá písmena

Problém file systému serverů

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

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>…..

Řešení úkolu

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,....

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!!!)

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)

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"

Obrázky

příklady:<img src="masinka.jpg" alt="mašinka s

krtečkem">

Obrázky

příklady:<img src="../masinka.jpg"

alt="mašinka">a) v IE

b) v FF

Obrázky

příklady:<img src="masinka.jpg" alt="mašinka

s krtečkem" width="490" height="350">

350px

490px

Obrázky


s krtečkem" width="300">

300px

Obrázky


s krtečkem" width="300" height="100">

300px

100px

Obrázky

příklady:<img src="obrazek-pozadi-

procenta.jpg" width="100%" height="65">

100%

65px

Obrázky


s krtečkem" border="4">

Obrázky

příklady:<p align="center">Tady bude

obrazek:<img src="masinka.jpg" alt="mašinka" border="2"> a pak pokracuje text...</p>

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>

Obrázky

příklady:... <img src="masinka.jpg"

alt="mašinka s krtečkem" border="2" >...

Obrázky


alt="masinka s krtečkem" border="2" align="top">...

Obrázky


alt="mašinka s krtečkem" border="2" align="middle">...

Obrázky


alt="mašinka s krtečkem" border="2" align="left">...

Obrázky


alt="mašinka s krtečkem" border="2" align="right">...

Obrázky


alt="mašinka s krtečkem" border="2" align="left" width="50%">...

Obrázky


alt="mašinka s krtečkem" border="2" align="left" width="50%" hspace="10">...

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>

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

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

Klikací mapy

Oblast tvaru - Obdélník:shape="rect" coords="levý horní roh, pravý dolní roh"

lhx

lhy

pdx

pdy

lhx,lhy,pdx,pdy

Klikací mapy

Oblast tvaru - Kruh:shape="circle" coords="střed, poloměr"

xy

x,y,r

r

Klikací mapy

Oblast tvaru - Mnohoúhelník:shape="polygon" coords="souřadnice vrcholů

mnohoúhelníku"

xy

x1,y1,x2,y2,.....

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á.

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> <img src="klikaci-mapa.jpg" alt="klikaci mapa"

usemap="#mapa1">

Klikací mapy

On-line generátor klikacích map: http://www.maschek.hu/imagemap/

imgmap

Ú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

Ř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>

Ř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>

Date post:	14-Jan-2016
Category:	Documents
Upload:	yair
View:	42 times
Download:	2 times

Hodina 3.

Documents