NÁZEV ŠKOLY: Základní škola Josefa Bublíka, Bánov

Prezentace na téma: "NÁZEV ŠKOLY: Základní škola Josefa Bublíka, Bánov"— Transkript prezentace:

1 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/

2 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

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

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

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

6 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.).

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

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

9 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

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

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

12 Citace Ilustrace: Kopie obrazovek programu Poznámkový blok – vlastní tvorba autora Kopie obrazovek internetového prohlížeče – vlastní tvorba autora