provázání stránek
DESCRIPTION
Vytvořte dvě www stránky, jednu růžovou a druhou modrou – viz. zdrojové kódy. Provázání stránek. RŮŽOVÁ STRÁNKA Růžová stránka Odkaz na modrou stránku . - PowerPoint PPT PresentationTRANSCRIPT
1
Provázání stránek Vytvořte dvě www stránky, jednu růžovou a
druhou modrou – viz. zdrojové kódy
<HTML>
<HEAD>
<TITLE>RŮŽOVÁ STRÁNKA</TITLE>
</HEAD>
<BODY text="red" bgcolor="pink">
<DIV align="center">
<H2>Růžová stránka</H2>
<P>Odkaz na modrou stránku</P>
</DIV>
</BODY>
<HTML>
<HEAD>
<TITLE>MODRÁ STRÁNKA</TITLE>
</HEAD>
<BODY text="blue" bgcolor="lightblue">
<DIV align="center">
<H2>Modrá stránka</H2>
<P>Odkaz na růžovou stránku</P>
</DIV>
</BODY>
2
Provázání stránek Obě stránky uložte do společné složky. Název stránky bude wwwr.html (růžová stránka) a wwwm.html
(modrá stránka). A nyní doplňte do zdrojových kódů odkazy.
<BODY text="red" bgcolor="pink">
<DIV align="center">
<H2>Růžová stránka</H2>
<P>Odkaz na <A href="wwwm.html">modrou stránku</A></P>
</DIV>
</BODY>
<BODY text="blue" bgcolor="lightblue">
<DIV align="center">
<H2>Modrá stránka</H2>
<P>Odkaz na <A href="wwwr.html">růžovou stránku</A></P>
</DIV>
</BODY>
3
Provázání stránek Vyzkoušejte funkčnost odkazů. Jistě jste si všimli zabarvení odkazů v prohlížeči. Barvu odkazů na stránce můžeme změnit v tagu
BODY pomocí parametru:
link="barva" - pro nenavštívený odkazvlink="barva" – pro navštívený odkazalink="barva" – pro aktivní odkaz
4
Provázání stránek A nyní doplňte zdrojové kódy tak, aby odkazy měly
barvu textu stránky. Například pro modrou stránku bude úprava následující:
</HEAD><BODY text="blue" bgcolor="lightblue" link="blue" alink="blue" vlink="blue"><DIV align="center"><H2>Modrá stránka</H2>
5
Provázání stránek
Teď si zopakujeme práci s obrázky. Soubor "zima.jpg" upravte pro monitory s
rozlišením 800x600 pixelů, neměňte proporcionalitu.
Dále vytvořte náhledový obrázek velikosti 120x? pixelů, zmenšení obrázku bude proporcionální.
6
Provázání stránek Ke správné funkci vašeho webu nezapomeňte
dodržet organizační pravidla. Oba upravené obrázky uložte do složky "obr ".
Obrázky pojmenujte dle náhledu a pomocí komprese upravte i jejich velikost.
7
Provázání stránek Nyní vložíme do modré stránky
náhledový obrázek.
Jistě jste si všimli efektu zarovnání pomocí značky DIV.
<DIV align="center"><H2>Modrá stránka</H2><P>Odkaz na <A href="wwwr.html">růžovou stránku</A></P><IMG src="obr/zima1_m.jpg" width="100" heiht="69" alt="Pracejovice v zimě"></DIV></BODY>
8
Provázání stránek Přidáme odkaz. Velký obrázek se otevře v
novém okně prohlížeče.
Nezapomeňte do popisku uvést velikost stahovaného obrázku.
<P>Odkaz na <A href="wwwr.html">růžovou stránku</A></P><A href="obr/zima1.jpg" target="new" ><IMG src="obr/zima1_m.jpg" width="100" heiht="69" alt="Pracejovice v zimě vel 25 kB"></A></DIV>
9
Provázání stránek Na závěr se pokuste upravit zdrojový kód
tak, aby výsledek v prohlížeči byl obdobný.
Použijte jinou hodnotu parametru target. Popis obrázku alt zrušte a volte jinou
možnost.