HTML (XHTML) 2. 2 HYPERTEXTOVÉ ODKAZY Odkaz může ukazovat na různá místa v internetu, na další Vaše internetové stránky nebo obrázky či jiné dokumenty.

Prezentace na téma: "HTML (XHTML) 2. 2 HYPERTEXTOVÉ ODKAZY Odkaz může ukazovat na různá místa v internetu, na další Vaše internetové stránky nebo obrázky či jiné dokumenty."— Transkript prezentace:

1 HTML (XHTML) 2

2 2 HYPERTEXTOVÉ ODKAZY Odkaz může ukazovat na různá místa v internetu, na další Vaše internetové stránky nebo obrázky či jiné dokumenty. Pro definici odkazu se používá párová značka, která má několik parametrů, z nichž parametr href=" " je povinný. Udává místo, kam se má odkaz přesunout. Hodnotou tohoto parametru tedy může být buď URI adresa nebo např. odkaz na e-mailovou adresu.URI adresa Důležitým parametrem je title=" " který přidá k odkazu titulek (bublinová nápověda). Setkat se můžete ještě se zastaralým parametrem target=" ", kterým se zapisovalo, kam se má příslušný odkaz otevřít (do konkrétního rámce - Frames nebo třeba do nového okna). Od otevírání do nového okna (target="_blank") se postupně ustupuje s ohledem na zrakově postižené nebo na čtenáře, kteří používají ke čtení Vašich WWW stránek např. počítače do dlaně nebo jiná mobilní zařízení.

3 3 Syntaxe značky pro hypertextový odkaz je následující: <a href="URI_adresa„ target="cíl_zobrazení„ title="textový popisek odkazu"> Hypertextový odkaz může odkazovat na konkrétní e-mailovou adresu. Takovýto odkaz se zapíše ve tvaru href="mailto:emailova@adresa".

4 4 Pokud chcete při předání e-mailové adresy do poštovního programu přidat ještě dalšího příjemce, za e-mailovou adresu přijde parametr cc=dalsi@prijemce.domena. Dále ještě můžete zadat předmět parametrem subject=text a do těla zprávy vložit text parametrem body=text. Jednotlivé parametry se oddělují znakem &. Ukázka pak vypadá následovně: (pište do jednoho řádku!) <a href="mailto:martin.korous@seznam.cz? cc=martin.korous@markonet.cz& subject=Odpověď na anketu& body=správná odpověď:">

5 5

6 6

7 7 HYPERTEXTOVÉ ODKAZY ABSOLUTNÍ A RELATIVNÍ ODKAZY TEXT OVÝ POPISEK HTTP://WWW.SEZNAM.CZ TOMUTO ODKAZU SE ŘÍKÁ ABSOLUTNÍ TEXTOVÝ POPISEK

8 8

9 9

10 10

11 11 MÍSTO OTEVŘENÍ CÍLE ODKAZY PRO OTEVŘENÍ CÍLE : TARGET=_TOP TARGET=_BLANK (PRO FRAMES)TARGET=„NÁZEV“ ZÁLOŽKY ODKAZUJÍ NA KONKRÉTNÍ MÍSTO NA STRÁNCE TEXTOVÝ POPISEK

12 12 OBRÁZEK JAKO ODKAZ KLÁVESOVÉ ZKRATKY OPEN

13 13 TABULKY Tabulka se skládá z řádků a v nich jsou definovány jednotlivé buňky. Definuje se pomocí párové značky. Řádek je zaznamenán prostřednictvím párové značky a jednotlivé datové buňky pak párovou značkou. Speciální jsou tzv. hlavičkové buňky, které vyjadřují údaje zapsané v příslušném sloupci a oddělují tak tyto údaje od běžných dat zapsaných do datových buněk. Do tabulky se definují prostřednictvím párových značek.

14 14 Struktura tabulky pak vypadá následovně: 1. hlavičková buňka 2. hlavičková buňka... 1. datová buňka 2. datová buňka...

15 15 TABULKY TVORBA JEDNODUCHÉ TABULKY TABULKA JE UZAVŘENA DO TAGU KAŽDÝ ŘÁDEK TABULKY JE UZAVŘEN V TAGU SAMOTNÉ BUŇKY TABULKY PŘÍKLAD TENTO TEXTJE VLOŽEN DO PRVNÍ BUŇKY TABULKY TENTO TEXT VLOŽEN DO DRUHÉ BUŇKY TABULKY

16 16 OKRAJ A BARVA OKRAJŮ KE ZMĚNĚ BARVY OKRAJE LZE POUŽÍT PARAMETR BORDERCOLOR, KTERÝ NASTAVÍ VŠEM OKRAJŮM STEJNOU BARVU, NEBO JEDNOTLIVÉ PARAMETRY BORDERCOLORDARK A BORDERCOLORLIGHT.

17 17 VELIKOST TABULKY PARAMETR WIDTH NASTAVUJE ŠÍŘKU TABULKY PARAMETR HEIGHT NASTAVUJE VÝŠKU TABULKY PARAMETRY JSOU VLOŽENY DO TAGU TABLE

18 18 ZAROVNÁNÍ TEXTU V BUŇCE ZAROVNÁNÍ LZE OVLIVNIT POMOCÍ PARAMETRŮ VALIGN PRO VERTIKÁLNÍ ZAROVNÁNÍ A ALIGN PRO HORIZONTÁLNÍ ZAROVNÁNÍ. TENTO TEXT JE VLOŽEN DO PRVNÍ BUŇKY TABULKY. TENTO TEXT JE VLOŽEN DO DRUHÉ BUŇKY TABULKY>

19 19 BARVA POZADÍ A OBRÁZEK NA POZADÍ PRO NASTAVENÍ BARVY POZADÍ CELÉ TABULKY SE VLOŽÍ PARAMETR BGCOLOR DO TAGU. JESTLIŽE CHCEME ZMĚNIT BARVU POUZE V NĚKTERÉM ŘÁDKU NEBO BUŇCE, VLOŽÍME TENTÝŽ PARAMETR DO PŘÍSLUŠNÝCH TAGŮ. PRO UMÍSTĚNÍ OBRÁZKU NA POZADÍ TABULKY, ŘÁDKU TABULKY NEBO KONKRÉTNÍ BUŇKY POUŽIJEME PARAMETR BACKGROUND.

20 20 ZAROVNÁNÍ TABULKY NA STRÁNCE POKUD NAPÍŠEME PARAMETR ALIGN DO TAGU, NASTAVÍME ZAROVNÁNÍ CELÉ TABULKY NA STRÁNCE. TÍM URČÍME SMĚR OBTÉKÁNÍ TEXTU KOLEM TABULKY. PROSTOR MEZI TEXTEM A OKRAJEM BUŇKY MŮŽEME MĚNIT POMOCÍ PARAMETRU CELLPADDING, STEJNĚ TAK MEZERU MEZI OKRAJEM TABULKY A OKRAJEM BUNĚK POMOCÍ PARAMETRU CELLSPACING.

21 21 BARVA POZADÍ A OBRÁZEK NA POZADÍ PRO NASTAVENÍ BARVY POZADÍ CELÉ TABULKY SE VLOŽÍ PARAMETR BGCOLOR DO TAGU. JESTLIŽE CHCEME ZMĚNIT BARVU POUZE V NĚKTERÉM ŘÁDKU NEBO BUŇCE, VLOŽÍME TENTÝŽ PARAMETR DO PŘÍSLUŠNÝCH TAGŮ. PRO UMÍSTĚNÍ OBRÁZKU NA POZADÍ TABULKY, ŘÁDKU TABULKY NEBO KONKRÉTNÍ BUŇKY POUŽIJEME PARAMETR BACKGROUND.

22 22 U tabulek platí tři pravidla: 1. Počet buněk v jednotlivých řádcích musí být stejný (výjimkou jsou sloučené buňky) 2. Každá buňka musí obsahovat nějaká data, pokud má buňka zůstat prázdná, vložte do ní alespoň nedělitelnou mezeru ( ) 3. Tabulka by měla obsahovat hlavičku a svůj název (tzv. slušně vychovaná tabulka).

23 23 Syntaxe značky je následující (většina parametrů se v XHTML již nepoužívá a jsou nahrazeny kaskádovými styly - CSS): <table align="zarovnání_tabulky_v_okně" bgcolor="barva_pozadí_tabulky" background="URI_obrázku_na_pozadí_tabulky" border="šířka_okraje_tabulky" bordercolor="barva_okraje" bordercolordark="barva_tmavšího_okraje" bordercolorlight="barva_světlejšího_okraje" cellpadding="vzdálenost_okraj-obsah" cellspacing="vzdálenost buněk" width="šířka_tabulky" height="výška_tabulky">

24 24 Název tabulky se uvádí buď ihned za značku nebo těsně před ukončovací značku prostřednictvím párové značky, jejíž syntaxe je: Parametr align=" " určuje, zda bude nadpis nad tabulkou (top) nebo pod tabulkou (bottom). Pro slučování buněk se používají u značek nebo parametry colspan=" " a rowspan=" ". Hodnoty určují, z kolika buněk sloučená buňka vznikla. Nyní je již na řadě ukázka slučování.

25 25

26 26 ATRIBUT

27 27 CVIČENÍ

28 28 760 600 TABLE 1

29 29 TABLE 2 table> TEXT NA STRÁNCE

30 30 SEZNAMY A VÝČTY Seznamy a výčty v HTML jsou to samé jako odrážky a číslování v textových editorech. Seznam se definuje párovou značkou. Vše, co bude mezi těmito značkami bude seznam. Jednotlivé položky seznamu od sebe oddělujeme párovou značkou. Kolikrát se tedy v definici seznamu objeví párová značka tolik položek bude seznam mít. Značka může být obohacena o parametr type=" ", jež udává typ odrážky. Může nabývat tří hodnot: type="circle" prázdné kolečko type="disc" plné kolečko type="square" plný čtvereček

31 31 Syntaxe definice seznamu je následující: První položka seznamu Druhá položka seznamu Třetí položka seznamu... n-tá položka seznamu

32 32 Výčet se definuje párovou značkou, která je velmi podobná značce pro definici seznamů, a proto pro ni platí stejná pravidla. Syntaxe pro definici výčtu je následující: První položka výčtu Druhá položka výčtu Třetí položka výčtu... n-tá položka výčtu

33 33 Parametr type=" " definuje způsob číslování. type="A" A., B., C.,... type="a" a., b., c.,... type="I„ I., II., III.,... type="i„ i., ii., iii.,... type="1" 1., 2., 3.,... Parametrem start=" " nastavíme počáteční číslování výčtu (pouze v HTML).

34 34 U značky je možné použít parametr value=" ", který nastaví přímo konkrétní číslo u prvku ve výčtu. Na závěr si ještě ukážeme tzv. definiční výčty. Definiční výčet obsahuje vždy pojem a jeho vysvětlení. Definiční výčet je ohraničen párovou značkou. Značka definuje pojem a značka vysvětlení.

35 35 Syntaxe definičního výčtu je následující: První pojem Vysvětlení prvního pojmu Druhý pojem Vysvětlení druhého pojmu... n-tý pojem Vysvětlení n-tého pojmu

36 36

37 37

38 38

39 39