NÁZEV ŠKOLY: Základní škola Josefa Bublíka, Bánov AUTOR: Ivana Mačková NÁZEV: VY_32_INOVACE_SADA5_INF.9.13 TÉMA: HTML - odkazy ČÍSLO PROJEKTU: CZ.1.07/1.4.00/21.2609

Anotace Materiál HTML - odkazy Vzdělávací obor Informatika Tematický okruh HTML – tvorba www stránek Anotace Výukový materiál je určen k vysvětlení a procvičení příkazu pro tvorbu odkazů v html dokumentech. Očekávaný výstup Žák pochopí význam příkazu pro tvorbu odkazů; vytváří html dokumenty se slovními i obrázkovými odkazy. Druh učebního materiálu Prezentace Stupeň a typ vzdělávání Základní vzdělávání – druhý stupeň, 9. ročník

HTML - ODKAZY <a href=„adresa odkazu">text odkazu</a> Odkaz (hyperlink) se vytváří pomocí tagu a. Odkaz vypadá takto: <a href=„adresa odkazu">text odkazu</a> Text odkazu (text, na který host stránek klikne) se nachází uvnitř značek a. Uvnitř značek a se může nacházet i obrázek. Cíl odkazu (adresa) se zapisuje pomocí atributu href.

Příklady slovních odkazů Příklady obrázkových odkazů

VYTVOŘENÍ SLOVNÍHO ODKAZU Nyní vytvoříme slovní odkaz na stránky www.seznam.cz. V poznámkovém bloku vytvoříme následující html dokument.

Soubor uložíme např. jako odkazy Soubor uložíme např. jako odkazy.html a otevřeme v internetovém prohlížeči. POZNÁMKA: Slovní odkaz nemusí být jen odkazem na www stránky, ale může být odkazem na libovolný vytvořený soubor (.doc, .xls, .ppt, .bmp, .jpg, atd.).

angl. target [tárdžit] = "terč" nebo "cíl" Přidáme-li v našem dokumentu odkazy.html v poznámkovém bloku k tagu <a …> atribut target = "_blank" , otevře se odkaz v novém okně. angl. target [tárdžit] = "terč" nebo "cíl"

VYTVOŘENÍ OBRÁZKOVÉHO ODKAZU Nyní vytvoříme obrázkový odkaz na stránky www.seznam.cz. Jeho tvar je <a href=„adresa odkazu"><img src = „zdroj obrázku“></a>

Kliknutím na obrázek se otevře www.seznam.cz Takto by měl vypadat soubor zobrazený v internetovém prohlížeči. Kliknutím na obrázek se otevře www.seznam.cz

Jestliže v poznámkovém bloku k tagu <img …> připíšeme atribut title = „Kliknutím otevřeš www.seznam.cz" , zobrazí se po najetí myší na obrázek uvedený doprovodný text.

ÚKOL: Vytvořte html dokument, aby se po jeho otevření v prohlížeči zobrazil obsah předlohy.

Citace Ilustrace: Kopie obrazovek programu Poznámkový blok – vlastní tvorba autora Kopie obrazovek internetového prohlížeče – vlastní tvorba autora www.office.microsoft.com www.office.microsoft.com