Prezentace se nahrává, počkejte prosím

Prezentace se nahrává, počkejte prosím

HTML (XHTML) 1. 2 V RÁMCI KURZU SE SEZNÁMÍTE S JAZYKEM HTML (XHTML). V SOUČASNÉ DOBĚ SE JEDNÁ O POSLEDNÍ VERZI HTML, KTEROU POSTUPNĚ NAHRAZUJE JAZYK XHTML.

Podobné prezentace


Prezentace na téma: "HTML (XHTML) 1. 2 V RÁMCI KURZU SE SEZNÁMÍTE S JAZYKEM HTML (XHTML). V SOUČASNÉ DOBĚ SE JEDNÁ O POSLEDNÍ VERZI HTML, KTEROU POSTUPNĚ NAHRAZUJE JAZYK XHTML."— Transkript prezentace:

1 HTML (XHTML) 1

2 2 V RÁMCI KURZU SE SEZNÁMÍTE S JAZYKEM HTML (XHTML). V SOUČASNÉ DOBĚ SE JEDNÁ O POSLEDNÍ VERZI HTML, KTEROU POSTUPNĚ NAHRAZUJE JAZYK XHTML (EXTENSIBLE HYPERTEXT MARKUP LANGUAGE). DÁLE POPISOVANÉ CELKY JSOU S MENŠÍMI ODCHYLKAMI POUŽITELNÉ I PRO PŘECHOD NA XHTML, PROTO POKUD PRONIKNETE DO TAJŮ HTML, NEBUDE PRO VÁS DO BUDOUCNA PŘECHOD NA XHTML NIJAK SLOŽITÝ. ÚVOD

3 3 HTML (XHTML) TAGY = ZNAČKY HTML SOUBOR JE OBYČEJNÝ TEXT OBALENÝ ZNAČKAMI, KTERÉ SE NAZÝVAJÍ TAGY. TAGY URČUJÍ, JAK BUDE TEXT VYPADAT, TEDY JAKOU BUDE MÍT FORMU. VŠECHNY TAGY JSOU UZAVŘENY V. CO NENÍ V OSTRÝCH ZÁVORKÁCH, JE TEXT, KTERÝ SE BUDE ZOBRAZOVAT.

4 4

5 5

6 6 STRUKTURA DOKUMENTU Má první stránka Moje první html stránka. A nějaké další texty. Každá WWW stránka se skládá ze dvou částí: *hlavička *tělo

7 7 ZAČÍNÁ DOKUMENT KONČÍ DOKUMENT a ZAČÍNÁ A KONČÍ HLAVIČKU, KTERÁ SE SICE NEZOBRAZUJE, ALE OBSAHUJE NĚKTERÉ DŮLEŽITÉ ÚDAJE, NAPŘ. a, VYMEZUJÍCÍ NÁZEV DOKUMENTU (MŮŽE SE LIŠIT OD JMÉNA SOUBORU) DÁLE SE ZDE DEFINUJÍ NAPŘ. TZV. META INFORMACE (NEPÁROVÁ ZNAČKA ) O NICHŽ SE DOČTETE DÁLE NEBO SE ZDE ZAPISUJÍ SKRIPTY, STYLY, ATP. CO JE MEZI A, SE BUDE ZOBRAZOVAT. JE TAG, KTERÝM ZAČÍNÁ VLASTNÍ TĚLO DOKUMENTU (ANGL. BODY = TĚLO). VYSVĚTLENÍ V XHTML SE SE VŠECHNY NÁZVY PÍŠÍ MALÝMI PÍSMENY

8 8 znaménko menší - [pravý ALT]+[<] znaménko větší - [pravý ALT]+[>] zahrádka # [pravý ALT]+[x] ampersand & [pravý ALT]+[c] [pravý ALT]+[v] levá složená závorka { [pravý ALT]+[b] pravá složená závorka } [pravý ALT]+[n] levá hranatá závorka [ [pravý ALT]+[f] pravá složená závorka ] [pravý ALT]+[g] dolar $ [pravý ALT]+[ů] backslash \ [pravý ALT]+[q] euro € [pravý ALT]+[e] KLÁVESOVÉ ZKRATKY

9 9 KOMENTÁŘE HTML PODPORUJE TZV. KOMENTÁŘE, KTERÉ SLOUŽÍ PRO VLOŽENÍ POZNÁMEK DO KÓDU, JEŽ SE NEBUDOU V PROHLÍŽEČI ZOBRAZOVAT. KOMENTÁŘŮ SE TAKÉ VYUŽÍVÁ NAPŘ. PŘI LADĚNÍ STRÁNKY, KDY ČÁST KÓDU UZAVŘETE DO KOMENTÁŘE A ON BUDE VYNECHÁN PŘI ZOBRAZOVÁNÍ V PROHLÍŽEČI. ZÁPIS KOMENTÁŘE VYPADÁ NÁSLEDOVNĚ:

10 10 TĚLO / BODY DO TĚLA HTML DOKUMENTU SE ZAPISUJE VLASTNÍ OBSAH WWW STRÁNKY, KTERÝ JE MOŽNO FORMÁTOVAT OBDOBNĚ JAKO V TEXTOVÉM EDITORU. DO KAMENE LEPTÁM VZOR GEOMETRICKÝCH TVARŮ. NEZASVĚCENÉMU TY TVARY PŘIPADAJÍ ZÁHADNÉ A SLOŽITÉ, ALE JÁ VÍM, ŽE PŘI SPRÁVNÉM USPOŘÁDÁNÍ DAJÍ KAMENI ZVLÁŠTNÍ MOC. TA MU UMOŽNÍ REAGOVAT NA ZAKLÍNÁNÍ V JAZYCE, JAKÝM JEŠTĚ ŽÁDNÁ LIDSKÁ BYTOST NEPROMLUVILA. POLOŽÍM KAMENI OTÁZKY V TOMTO JAZYCE A ON MI V ODPOVĚĎ ZJEVÍ VIZI: SVĚT STVOŘENÝ MÝM KOUZLEM, SVĚT PŘEDSTAVOVANÝ VZOREM V KAMENI. KAMENEM JE KŘEMÍKOVÝ PLÁTEK A ONO ZAKLÍNÁNÍ JE SOFTWARE. W.DANIEL HILLIS : VZOR V KAMENI TEXT NAPIŠTE MEZI PÁROVOU ZNAČKU ….

11 11 VŠECHNO TO, CO JSTE ZAPSALI DO EDITORU NYNÍ MUSÍTE ULOŽIT. ULOŽENÝ DOKUMENT MUSÍ MÍT PŘÍPONU HTM NEBO HTML. NÁZEV SOUBORU NAPŘ. INDEX. EDITOR NYNÍ MŮŽETE ZAVŘÍT A V PROHLÍŽEČI WWW STRÁNEK OTEVŘETE SOUBOR, KTERÝ JSTE PŘED CHVÍLÍ ULOŽILI. OTEVŘETE SOUBOR INDEX.HTM.

12 12 PARAMETR TĚLA STRÁNKY ZOBRAZTE ZDROJOVÝ KÓD HTML DOKUMENTU, KTERÝ JSTE PŘED CHVÍLÍ VYTVOŘILI A KE ZNAČCE PŘIDEJTE PRVNÍ PARAMETR BGCOLOR=" ". TENTO PARAMETR NÁM NASTAVÍ BARVU POZADÍ WWW STRÁNKY. …….. HODNOTOU TOHOTO PARAMETRU JE PRÁVĚ KONKRÉTNÍ BARVA. TATO BARVA SE ZADÁVÁ DVOJÍM ZPŮSOBEM - TEN JEDNODUŠŠÍ JE ZAPSÁNÍM ANGLICKÉHO NÁZVU BARVY (NAPŘ. ZELENÁ = GREEN), DRUHÝ ZPŮSOB JE O NĚCO MÁLO SLOŽITĚJŠÍ. KAŽDÁ BARVA JE VYJÁDŘENA ŠESTIMÍSTNÝM HEXADECIMÁLNÍM ČÍSLEM, KTERÉ VZNIKLO ZE TŘÍ BAREVNÝCH SLOŽEK (#RRGGBB). PŘED TÍMTO ČÍSLEM SE MUSÍ PSÁT SPECIÁLNÍ ZNAK, KTERÉMU SE ŘÍKÁ KŘÍŽEK NEBO ZAHRÁDKA (" # "). bgcolor

13 13 PARAMETR TĚLA STRÁNKY DALŠÍM PARAMETREM JE TEXT=" ". TENTO PARAMETR SE POUŽÍVÁ STEJNÝM ZPŮSOBEM, JAKO PARAMETR PŘEDCHOZÍ. NASTAVUJE BARVU BĚŽNÉHO TEXTU NA WWW STRÁNCE. …….. text

14 14 POKUD JE OBRÁZEK UMÍSTĚN NA INTERNETU, HODNOTOU TOHOTO PARAMETRU JE TZV. URL ADRESA, COŽ JE ZÁPIS UVÁDĚJÍCÍ TYP PROTOKOLU, ADRESU A NÁZEV SOUBORU S PŘÍSLUŠNOU CESTOU K WWW STRÁNCE (NAPŘ. background=http://www.jakpsatweb.cz):// PARAMETR TĚLA STRÁNKY PARAMETR BACKGROUND=" " NASTAVUJE NA POZADÍ WWW STRÁNKY OBRÁZEK. background

15 15 PARAMETR TĚLA STRÁNKY PARAMETR link=" " NASTAVUJE BARVU NENAVŠTÍVENÉHO ODKAZU, PARAMETR vlink=" " NASTAVUJE BARVU NAVŠTÍVENÉHO ODKAZU A PARAMETR alink=" " NASTAVUJE BARVU AKTIVNÍHO ODKAZU. link

16 16 PARAMETR TĚLA STRÁNKY POKUD POŽADUJETE, ABY WWW STRÁNKA BYLA ZOBRAZENA V OKNĚ PROHLÍŽEČE V KONKRÉTNÍ VZDÁLENOSTI OD LEVÉHO A OD HORNÍHO OKRAJE PROHLÍŽEČE, DÁ SE TOTO NASTAVIT S POMOCÍ PARAMETRŮ leftmargin=" " A topmargin=" ". margin

17 17 PARAMETR TĚLA STRÁNKY POSLEDNÍMI PARAMETRY JSOU onload=" " A onunload=" ", KTERÉ PŘI NAČTENÍ STRÁNKY ČI PŘI OPUŠTĚNÍ STRÁNKY SPUSTÍ PŘÍSLUŠNÝ SKRIPT (TEN MŮŽE NAPŘ. SPUSTIT NĚJAKÉ NOVÉ OKNO - JAKO TŘEBA REKLAMNÍ). load

18 18 SYNTAXE PÁROVÉ ZNAČKY BODY

19 19 CVIČENÍ VYTVOŘTE ZÁKLADNÍ KOSTRU VAŠÍ OSOBNÍ INTERNETOVÉ STRÁNKY.

20 20

21 21 NADPISY NADPIS BÝVÁ KRÁTKÝ A VÝRAZNÝ, PROTO SE S VÝHODOU POUŽÍVÁ TZV. BEZPATKOVÉ PÍSMO. BEZPATKOVÉ PÍSMO JE TAKOVÉ, KTERÉ NEMÁ NA SPODNÍ LINCE "PATKY". PŘÍKLADEM JE PÍSMO ARIAL, SYSTEM ČI TAHOMA (OBECNĚ - SANS-SERIF). NADPIS SE DEFINUJE V HTML PÁROVOU ZNAČKOU, KDE ČÍSLO UDÁVÁ STUPEŇ NADPISU, KTERÝ MŮŽE BÝT V ROZSAHU 1 AŽ 6 (VIZ NÁSLEDUJÍCÍ OBRÁZEK)

22 22 POKUD CHCETE NADPIS ZAROVNAT OBDOBNĚ JAKO V TEXTOVÉM EDITORU, POUŽÍVÁ SE K TOMUTO ÚČELU PARAMETR align=" ", KTERÝ MŮŽE NABÝVAT NÁSLEDUJÍCÍCH HODNOT: align="center" zarovnání na střed řádku align="left" zarovnání k levému okraji align="right" zarovnání k pravému okraji SYNTAXE PÁROVÉ ZNAČKY JE TEDY NÁSLEDUJÍCÍ:

23 23 ODSTAVCE ODSTAVEC BÝVÁ SPÍŠE DELŠÍ ÚSEK TEXTU A MÍVÁ URČITÉ VLASTNOSTI, JAKO JE NAPŘ. ZPŮSOB ZAROVNÁNÍ. PRO ZÁPIS TEXTU V ODSTAVCI SE OBVYKLE POUŽÍVÁ PATKOVÉ PÍSMO (SERIF), COŽ JE PÍSMO, NA JEHOŽ SPODNÍ LINCE JSOU TZV. "PATKY", KTERÉ TVOŘÍ POMYSLNÝ ŘÁDEK. OČI TAK PŘI ČTENÍ NEPŘESKAKUJÍ MEZI JEDNOTLIVÝMI ŘÁDKY. PŘÍKLADEM TAKOVÉHO PÍSMA JE TIMES NEW ROMAN ČI COURIER NEW (COURIER NEW BÝVÁ TAKÉ OZNAČOVÁN JAKO RODINA PÍSMA MONOSPACE - NEPROPORCIONÁLNÍ PÍSMA).

24 24 align="center" zarovnání na střed řádku align="left" zarovnání k levému okraji align="right" zarovnání k pravému okraji align="justify" zarovnání do bloku ODSTAVEC SE ZADEFINUJE PÁROVOU ZNAČKOU. OBDOBNĚ, JAKO NADPIS, MŮŽEME I ODSTAVEC ZAROVNÁVAT S VYUŽITÍM PARAMETRU align=" ". I KDYŽ SE DNES BĚŽNĚ SETKÁTE NA WEBU S TEXTEM ZAROVNANÝM DO BLOKU, NEDOPORUČUJE SE TENTO ZPŮSOB ZAROVNÁNÍ POUŽÍVAT, NEBOŤ TAK VYNIKAJÍ NEŽÁDOUCÍ TYPOGRAFICKÉ PROHŘEŠKY, JAKO JSOU ŘEKY V TEXTU, VELKÁ VZDÁLENOST SLOV OD SEBE ATP.

25 25 SYNTAXE PÁROVÉ ZNAČKY JE NÁSLEDUJÍCÍ:

26 26 FORMÁTOVÁNÍ HTML BYL VYTVOŘEN TAK, ŽE NEROZEZNÁ V TEXTU VÍCE JAK JEDNU MEZERU ODDĚLUJÍCÍ OD SEBE DVA ZNAKY. STEJNĚ TAK NEROZEZNÁ ANI KONEC ŘÁDKU ZADANÝ KLÁVESOU ENTER. POKUD OVŠEM POTŘEBUJETE ODDĚLIT DVA ZNAKY, VÍCE JAK JEDNOU MEZEROU, NEBO POTŘEBUJETE ODŘÁDKOVAT, BUDETE K TOMU POTŘEBOVAT DALŠÍ PRVKY HTML. PRVNÍM ZPŮSOBEM (NE MOC ŠETRNÝM) JE POUŽITÍ PÁROVÉ ZNAČKY. TATO PÁROVÁ ZNAČKA ZOBRAZÍ NA WWW STRÁNCE TEXT TAK, JAK BYL VÁMI PŘEDFORMÁTOVÁN. SYNTAXE JE NÁSLEDUJÍCÍ: Tento text bude i s mezerami a tento text bude na novém řádku

27 27 DRUHOU VARIANTOU, JAK DOCÍLIT VÍCE JAK JEDNÉ MEZERY MEZI DVĚMA ZNAKY JE POUŽITÍ TZV. SYMBOLU (ENTITY). SYMBOL JE VLASTNĚ ZÁSTUPNÝ ZNAK. DOKÁŽEME JÍM ZOBRAZIT NĚKTERÉ ZNAKY, KTERÉ BY SE MUSELY ZOBRAZOVAT SLOŽITÝM ZPŮSOBEM NEBO ZNAKY, KTERÉ BY HTML POVAŽOVALO ZA ČÁST SVÉHO KÓDU. SYMBOL JE PODOBNĚ JAKO ZNAČKA OHRANIČEN DVĚMA SPECIÁLNÍMI ZNAKY & A ; MEZI NIMIŽ JE UVEDEN NÁZEV SYMBOLU. SYMBOL, KTERÝM VKLÁDÁME TZV. TVRDOU MEZERU MÁ NÁSLEDUJÍCÍ ZÁPIS:. KOLIKRÁT ZAPÍŠETE TENTO SYMBOL ZA SEBOU, O TOLIK MEZER BUDOU ZNAKY OD SEBE ODDĚLENY. OTEVŘÍT TABULKU ENTIT &  

28 28 JIŽ UMÍTE ODDĚLIT DVA ZNAKY OD SEBE VÍCE NEŽ JEDNOU MEZEROU A JEŠTĚ NÁM ZBÝVÁ SI PROZRADIT, JAK PROVEDETE ODŘÁDKOVÁNÍ TEXTU. PRO ODŘÁDKOVÁNÍ TEXTU SE POUŽÍVÁ NEPÁROVÁ ZNAČKA. VŠE, CO JE UVEDENO ZA TOUTO ZNAČKOU JIŽ BUDE NA NOVÉM ŘÁDKU. U ODSTAVCŮ SE JEŠTĚ VELMI ČASTO POUŽÍVAJÍ DEFINICE DLOUHÝCH CITACÍ NEBO ČÁSTI DOKUMENTU S JEDNOTNÝM ZAROVNÁNÍM. DELŠÍ CITACE SE VEPISUJE MEZI PÁROVOU ZNAČKU. TA ZAJISTÍ, ŽE TEXT BUDE ODSAZEN OD LEVÉHO I PRAVÉHO OKRAJE O URČITOU PŘESNĚ DEFINOVANOU VZDÁLENOST. br, blocquete

29 29 kurzíva …. nebo …. Tučné ….. nebo …. neproporcionální …. nebo …. PÍSMO Méně obvyklá úprava písma ….

30 30 ZOBRAZENÍ A FORMÁTOVÁNÍ TEXTU PARAMETR FACE VOLÍ RODINU PÍSEM PARAMETR SIZE URČUJE VELIKOST PÍSMA ( NABÍVÁ HODNOT 1-7) PARAMETR COLOR DEFINUJE BARVU PÍSMA – HODNOTU MŮŽEME PSÁT POMOCÍ PŘEDNASTAVENÝCH BAREV (CELKEM 140) NEBO POMOCÍ RGB. NĚKTERÉ Z PŘEDDEFINOVANÝCH NÁZVŮ : WHITE, SILVER, GRAY, BLACK, …… PRO NASTAVENÍ VÝCHOZÍ VELIKOSTI POUŽÍVÁME MÁ STEJNÉ PARAMETRY JAKO FONT, ALE PLATÍ PRO CELOU STRÁNKU.

31 31 NYNÍ SE JIŽ PODÍVÁME NA DALŠÍ MOŽNOSTI FORMÁTOVÁNÍ TEXTU. TEXT, KTERÝ MÁ BÝT ZVÝRAZNĚN TUČNĚ, SE UMÍSTÍ MEZI PÁROVOU ZNAČKU NEBO (TATO ZNAČKA SE VYUŽÍVÁ I V XHTML). POKUD MÁ BÝT TEXT ZVÝRAZNĚN KURZÍVOU, OHRANIČÍ SE PÁROVOU ZNAČKOU. TEXT MŮŽEME TÉŽ PODTRHNOUT K ČEMUŽ SLOUŽÍ PÁROVÁ ZNAČKA. TYTO ZNAČKY PAK MEZI SEBOU MŮŽEME KOMBINOVAT, ČÍMŽ NÁM MŮŽE VZNIKNOUT NAPŘ. TUČNÝ A PODTRŽENÝ TEXT. V TOMTO MÍSTĚ JE NUTNÉ UPOZORNIT OPĚT NA JISTÉ TYPOGRAFICKÉ PROHŘEŠKY. JELIKOŽ JSOU STANDARDNĚ HYPERTEXTOVÉ ODKAZY (BUDE O NICH PSÁNO POZDĚJI) PODTRŽENY, NEMĚLO BY SE V TEXTU POUŽÍVAT PODTRŽENÉ PÍSMO, ABY TO NEBYLO ZAVÁDĚJÍCÍ. NEZVÝRAZŇUJE SE TEDY PODTRŽENÍM NÝBRŽ KURZÍVOU, VÝJIMEČNĚ TUČNÝM PÍSMEM (TO JE POVOLENO NAPŘ. U VÝUKOVÝCH MATERIÁLŮ A UČEBNIC).

32 32 ZNAČKA FONT TEXTOVÝ EDITOR JEŠTĚ UMOŽŇUJE DALŠÍ KOUZLENÍ S TEXTEM. MŮŽETE SI V NĚM NASTAVIT BARVU TEXTU, VELIKOST ČI FONT. TYTO VLASTNOSTI MŮŽEME V HTML NASTAVIT PROSTŘEDNICTVÍM PÁROVÉ ZNAČKY (V XHTML SE TATO ZNAČKA NEPOUŽÍVÁ). ZNAČKA MŮŽE MÍT TŘI PARAMETRY, OVŠEM ABY TATO ZNAČKA MĚLA VÝZNAM, MUSÍ BÝT UVEDEN ALESPOŇ JEDEN Z NICH. PARAMETR color=" " DEFINUJE BARVU TEXTU. TA SE ZADÁVÁ ZPŮSOBEM POPSANÝM JIŽ DŘÍVE U ZNAČKY. PARAMETREM size=" " DEFINUJETE TZV. RELATIVNÍ VELIKOST TEXTU, KTERÁ SE POHYBUJE V INTERVALU OD -4 DO +4, PŘIČEMŽ 0 JE ZÁKLADNÍ VELIKOST PÍSMA A SMĚREM DO ZÁPORNÝCH ČÍSEL SE PÍSMO ZMENŠUJE VŽDY O JEDNU ÚROVEŇ A SMĚREM DO KLADNÝCH ČÍSEL JE TOMU NAOPAK. POSLEDNÍM PARAMETREM JE face=" ", KTERÝ UDÁVÁ POUŽITÝ FONT PÍSMA. HODNOTOU TOHOTO PARAMETRU JE PŘESNÝ NÁZEV KONKRÉTNÍHO PÍSMA. TENTO NÁZEV ZJISTÍTE V OVLÁDACÍCH PANELECH POD IKONKOU PÍSMA. POKUD VYBERETE NĚJAKÉ PÍSMO, UKÁŽE SE VÁM JEHO NÁHLED.

33 33 HODNOTOU PARAMETRU face=" " MŮŽE BÝT VÍCE PÍSEM, KTERÁ SE PAK ODDĚLUJÍ ČÁRKOU. BÝVÁ ZVYKEM NA ZÁVĚR TOHOTO PARAMETRU UVÉST RODINU PÍSMA (SANS-SERIF, SERIF, MONOSPACE, ATP.), DO KTERÉ VÁMI POUŽITÉ PÍSMO SPADÁ. POKUD TOTIŽ ZADANÉ PÍSMO NA POČÍTAČI NENÍ NAINSTALOVÁNO, POUŽIJE SE VÝCHOZÍ PÍSMO SPADAJÍCÍ DO UVEDENÉ RODINY PÍSEM. SYNTAXE PÁROVÉ ZNAČKY JE NÁSLEDUJÍCÍ:

34 34 SEZNAM BEZPEČNÝCH DEFINICÍ PÍSEM

35 35 NÁSLEDUJÍCÍ TABULKA SHRNUJE DALŠÍ ZNAČKY, KTERÉ SLOUŽÍ PRO FORMÁTOVÁNÍ TEXTU. NĚKTERÉ Z NICH SE JIŽ DNES V TAK HOJNÉ MÍŘE NEPOUŽÍVAJÍ, NEBOŤ JSOU JIŽ NAHRAZENY NAPŘ. KASKÁDOVÝMI STYLY.

36 36 Zvýraznění Silné zvýraznění Definice Ukázka kódu programu Ukázka výstupu programu Vstup z klávesnice Proměnná nebo argument programu Citace nebo odkaz na další zdroje Neproporcionální písmo (psací stroj) Přeškrtnuté písmo (pouze v HTML) Velké Malé Dolní index Horní index

37 37 CVIČENÍ 1. VYBERTE Z INTERNETU KRATŠÍ ČLÁNEK (DVA AŽ TŘI ODSTAVCE) A UDĚLEJTE Z NĚJ WWW STRÁNKU. JMÉNA OSOB V NĚM VYZNAČTE TUČNĚ, JMÉNA MĚST A INSTITUCÍ KURZÍVOU. 2. PŘIPRAVTE KRÁTKOU STRÁNKU O VAŠEM OBLÍBENÉM MALÍŘI, SPISOVATELI, HERCI APOD….NA STRÁNKU UVEĎTE JEHO KRÁTKÝ ŽIVOTOPIS A INFORMACE O JEHO NEJVÝZNAMNĚJŠÍCH DÍLECH. NÁZVY ZVÝRAZNĚTE KURZÍVOU.

38 38 CVIČENÍ ZÁKLADNÍ KOSTRU VAŠÍ OSOBNÍ STRÁNKY DOPLŇTE LIBOVOLNÝM TEXTEM.

39 39 VODOROVNÉ ČÁRY VODOROVNOU LINKOU SE ODDĚLUJÍ NEJČASTĚJI KAPITOLY NEBO SPOLU NESOUVISEJÍCÍ ODSTAVCE (PŘÍPADNĚ POZNÁMKY POD ČAROU). VODOROVNÁ LINKA SE VYKRESLÍ ZADÁNÍM NEPÁROVÉ ZNAČKY. TATO ZNAČKA ZPŮSOBÍ VYKRESLENÍ VODOROVNÉ LINKY OD LEVÉHO K PRAVÉMU OKRAJI PROHLÍŽEČE STANDARDNĚ ZAROVNANOU NA STŘED ŘÁDKU. CHCETE-LI ZMĚNIT VLASTNOSTI TÉTO LINKY, MUSÍTE OPĚT SÁHNOUT PO PARAMETRECH. JEJICH VYSVĚTLENÍ JE PATRNÉ JIŽ ZE SYNTAXE, PROTO SE ZMÍNÍM POUZE O JEDINÉM PARAMETRU width=" ". TENTO PARAMETR NASTAVUJE ŠÍŘKU ČÁRY V OKNĚ PROHLÍŽEČE. ŠÍŘKA MŮŽE BÝT ZADÁNA STATICKY NEBO DYNAMICKY. KAŽDÝ Z TĚCHTO ZPŮSOBŮ MÁ SVÉ VÝHODY I NEVÝHODY. STATICKÝ ZÁPIS MÁ TVAR width=„číslo", KDE ČÍSLO UDÁVÁ POČET BODŮ, ZE KTERÝCH BUDE LINKA VYKRESLENA NA ŠÍŘKU OKNA PROHLÍŽEČE.

40 40 DYNAMICKÝ ZÁPIS JE PODOBNÝ STATICKÉMU OVŠEM ČÍSLO JE V PROCENTECH, TO ZNAMENÁ KOLIK PROCENT Z AKTUÁLNÍ ŠÍŘKY OKNA PROHLÍŽEČE BUDE LINKA ZABÍRAT A ZÁPIS TEDY VYPADÁ NÁSLEDOVNĚ: width=„číslo%". SYNTAXE VODOROVNÉ LINKY JE NÁSLEDUJÍCÍ:


hr

41 41 JAKO CVIČENÍ SI MŮŽETE VYZKOUŠET NALINKOVAT NÁSLEDUJÍCÍ OBRAZEC. I TOTO JE VODOROVNÁ LINKA, OVŠEM NENÍ VYKRESLENÁ POMOCÍ HTML, ALE V MÍSTĚ, KDE MÁ BÝT LINKA JE VLOŽEN OBRÁZEK S LINKOU. VYPADÁ TO MOŽNÁ LÉPE, ALE PRAKTICKY JE VYKRESLENÍ ČÁRY RYCHLEJŠÍ NEŽ NAČTENÍ A ZOBRAZENÍ OBRÁZKU S ČÁROU.

42 42 OBRÁZKY OBRÁZEK JE OBJEKT, KTERÝM SE UPRAVUJE GRAFICKÁ STRÁNKA CELÉ WWW STRÁNKY. DO HTML SE VKLÁDÁ NEPÁROVOU ZNAČKOU, KTERÁ MÁ JEDEN POVINNÝ PARAMETR SRC=" ". PRO SPRÁVNÝ ZÁPIS CEST K OBRÁZKŮM (STEJNĚ TAK I K HYPERTEXTOVÝM ODKAZŮM, O NICHŽ BUDE PSÁNO DÁLE) SE POUŽÍVÁ RELATIVNÍCH ZÁPISŮ. SYNTAXE ZNAČKY PRO VLOŽENÍ OBRÁZKU JE NÁSLEDUJÍCÍ: alternativní text

43 43

44 44 OBRÁZKY NA POZADÍ NEOPAKOVÁNÍ OBRÁZKU NA POZADÍ CVIČENÍ – NAJDĚTE NA INTERNETU ORIGINÁLNÍ POZADÍ PRO VAŠI OSOBNÍ STRÁNKU (TAPETY NA PLOCHU)

45 45 Rám kolem obr. Zarovnání Velikost

46 46 PARAMETRY width=" " A height=" " DEFINUJÍ ŠÍŘKU A VÝŠKU PROSTORU, DO KTERÉHO BUDE OBRÁZEK ZOBRAZEN. STRIKTNÍ HTML 4.01 TYTO DVA PARAMETRY POVAŽUJE ZA POVINNÉ, OVŠEM NEJEN PROTO JE VHODNÉ JE POUŽÍVAT. ZNAČNĚ SE TÍM ZRYCHLÍ NAČÍTÁNÍ CELÉ WWW STRÁNKY. POKUD TOTIŽ TYTO DVA PARAMETRY NEJSOU U OBRÁZKU DEFINOVÁNY, DO PROHLÍŽEČE JE NAČÍTÁN TEXT A V MÍSTĚ, KDE MÁ BÝT OBRÁZEK SE VYTVOŘÍ TZV. ZÁSTUPNÝ SYMBOL ZA TENTO OBRÁZEK. POKRAČUJE NAČÍTÁNÍ ZBYLÉHO TEXTU A AŽ JE NAČTEN ZAČNOU SE NAČÍTAT OBRÁZKY. V TOM OKAMŽIKU SI MUSÍ PROHLÍŽEČ NEJPRVE ZJISTIT FYZICKÉ ROZMĚRY PRO OBRÁZEK, PAK MU VYČLENÍ PROSTOR (ČÍMŽ SE CELÝ TEXT ZAČNE POSOUVAT A TO NENÍ ZROVNA PŘÍJEMNÉ, NEBOŤ TO RUŠÍ PŘI ČTENÍ) A AŽ NAKONEC DOJDE K POSTUPNÉMU ZOBRAZOVÁNÍ OBRÁZKU. V PŘÍPADĚ, ŽE TYTO DVA PARAMETRY JSOU V DEFINICI OBRÁZKU UVEDENY, PROHLÍŽEČ PŘI NAČÍTÁNÍ STRÁNKY ZOBRAZÍ TEXT, NARAZÍ NA DEFINICI OBRÁZKU A IHNED VYČLENÍ PROSTOR PRO VLOŽENÍ OBRÁZKU, POKRAČUJE DÁLE V ZOBRAZOVÁNÍ TEXTU A PAK JE JIŽ NA ŘADĚ ZOBRAZOVÁNÍ OBRÁZKU. PROHLÍŽEČ JIŽ NEMUSÍ ZJIŠŤOVAT FYZICKÉ ROZMĚRY OBRÁZKU, COŽ ZABERE NĚJAKÝ TEN ČAS.

47 47 POKUD ZADÁTE ROZMĚRY VĚTŠÍ NEBO MENŠÍ NEŽ JSOU SKUTEČNÉ ROZMĚRY OBRÁZKU, PROHLÍŽEČ SI TAKOVÝTO PROSTOR VYČLENÍ A DO NĚJ ROZPROSTŘE OBRÁZEK. NA VÁS TO PAK MŮŽE PŮSOBIT TAK, ŽE SE OBRÁZEK ZVĚTŠÍ NEBO ZMENŠÍ. JE TO OVŠEM KLAMNÝ POCIT. OBRÁZEK MÁ STÁLE SVOJI VELIKOST (I KAPACITU). U ZAČÁTEČNÍKŮ SE PROTO MŮŽETE ČASTO SETKAT S TÍM, ŽE OBRÁZEK "ZMENŠÍ" PROSTŘEDNICTVÍM TĚCHTO DVOU PARAMETRŮ, OVŠEM OBRÁZEK MÁ VE SKUTEČNOSTI OBROVSKÉ ROZMĚRY. DO PROHLÍŽEČE SE BEZTAK MUSÍ NAČÍST CELÝ OBRÁZEK (NAPŘ. 400 KB). VÝHODNĚJŠÍ TEDY JE OBRÁZEK FYZICKY ZMENŠIT (JEHO ROZMĚRY A ZÁROVEŇ I JEHO KAPACITU - OBVYKLE SE PRO FOTOGRAFIE UMÍSTĚNÉ DO TEXTU POUŽÍVAJÍ OBRÁZKY DO 40 KB) A VKLÁDAT JIŽ TAKTO MODIFIKOVANÝ OBRÁZEK. PARAMETREM border=" " NASTAVÍTE KOLEM OBRÁZKU ČERNÝ RÁMEČEK, KTERÝ BUDE MÍT TAKOVOU ŠÍŘKU V BODECH, KTEROU ZADÁTE. S VÝHODOU SE NASTAVUJE TATO ŠÍŘKA NA NULOVOU HODNOTU TEHDY, POKUD MÁ OBRÁZEK SLOUŽIT NAPŘ. JAKO OBRÁZKOVÝ HYPERTEXTOVÝ ODKAZ.

48 48 PARAMETRY hspace=" " A vspace =" " VYTVOŘÍ V HORIZONTÁLNÍM A VERTIKÁLNÍM SMĚRU KOLEM OBRÁZKU OBLAST S BARVOU POZADÍ OD KTERÉ SE ZAČNE VYPISOVAT TEXT (VZDÁLENOST TEXTU OD OBRÁZKU). PARAMETREM align=" " DEFINUJETE ZAROVNÁNÍ TEXTU A OBRÁZKU NA STRÁNCE. TENTO PARAMETR MŮŽE MÍT NĚKOLIK HODNOT, KTERÉ JSOU SHRNUTY V NÁSLEDUJÍCÍ TABULCE : align="left" align="right" align="top" align="middle" align="bottom" PŘI POUŽITÍ HODNOT TOP, MIDDLE A BOTTOM NESMÍ ZA DEFINICÍ OBRÁZKU NÁSLEDOVAT ODSTAVEC NEBO NADPIS! V XHTML JIŽ PARAMETR ALIGN=" " NENÍ PODPOROVÁN.

49 49 MOJE PRVNÍ STRÁNKA TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT ZAMEZENÍ OBTÉKÁNÍ OBTÉKÁNÍ OBRÁZKU

50 50 PRAVIDLO POTÁPĚČE EXISTUJÍ TŘI PŘÍPADY, KDY CHCEME POUŽÍT PRAVIDLO POTÁPĚČE: 1. OBRÁZEK JE VE STEJNÉM MÍSTĚ JAKO HTML DOKUMENT 2. OBRÁZEK JE UMÍSTĚN V MÍSTNÍ SLOŽCE 3. OBRÁZEK JE UMÍSTĚN V JINÉ SLOŽCE NEŽ MÍSTNÍ Obrázek je ve stejném místě jako HTML dokument src="logo.gif„ Obrázek je umístěn v místní složce src="OBR/kocour.jpg" Obrázek je umístěn v jiné složce než místní src="../OBR/DOVOLENA/pic002.jpg"

51 51 NA ZÁVĚR JEŠTĚ JEDNO DŮLEŽITÉ UPOZORNĚNÍ: V NÁZVECH SOUBORŮ (I ADRESÁŘŮ) NEPOUŽÍVEJTE DIAKRITIKU (HÁČKY A ČÁRKY), MEZERY A DALŠÍ ZAKÁZANÉ ZNAKY. JEJICH NÁZVY DO HTML KÓDU PIŠTE TAK, JAK JSOU FYZICKY VYTVOŘENY (ADRESÁŘ PETR NENÍ TOTOŽNÝ S ADRESÁŘEM petr NEBO Petr ČI DOKONCE PetR).

52 52 CVIČENÍ VYTVOŘTE OSOBNÍ WWW STRÁNKU DLE VLASTNÍHO VÝBĚRU. OBRÁZEK LIBOVOLNÝ TEXT OSTATNÍ DLE VLASTNÍHO UVÁŽENÍ

53 End of Lecture Good Night.


Stáhnout ppt "HTML (XHTML) 1. 2 V RÁMCI KURZU SE SEZNÁMÍTE S JAZYKEM HTML (XHTML). V SOUČASNÉ DOBĚ SE JEDNÁ O POSLEDNÍ VERZI HTML, KTEROU POSTUPNĚ NAHRAZUJE JAZYK XHTML."

Podobné prezentace


Reklamy Google