1 / 9

Provázání stránek

Vytvořte dvě www stránky, jednu růžovou a druhou modrou – viz. zdrojové kódy. Provázání stránek. <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>

raven-lewis
Download Presentation

Provázání stránek

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. Vytvořte dvě www stránky, jednu růžovou a druhou modrou – viz. zdrojové kódy Provázání stránek <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. 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. Provázání stránek <BODY text="red" bgcolor="pink"> <DIV align="center"> <H2>Růžová stránka</H2> <P>Odkaz na <Ahref="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ý odkaz vlink="barva" – pro navštívený odkaz alink="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.

More Related