1 HTML Vytváření 3W dokumentu pomocí: 1. HTML editoru - zde nabídka konstrukcí některé pracují metodou WYSIWYG - vidíte formátovaný dokument (co vidíš,

Prezentace na téma: "1 HTML Vytváření 3W dokumentu pomocí: 1. HTML editoru - zde nabídka konstrukcí některé pracují metodou WYSIWYG - vidíte formátovaný dokument (co vidíš,"— Transkript prezentace:

1 1 HTML Vytváření 3W dokumentu pomocí: 1. HTML editoru - zde nabídka konstrukcí některé pracují metodou WYSIWYG - vidíte formátovaný dokument (co vidíš, dostaneš) v jiných vidíte zdrojový text, se značkami (značkující editory) + editorů: uživ. nemusí znát HTML, jména značek a atributů - editorů:editory mají zpoždění za vývojem jazyka (neznají nové konstrukce) pozdější změny bez editoru - obtížná orientace Editor je spíše pomocník, pro ulehčení a zrychlení práce. Uživateli stačí napsat první písmenka značky a on doplní zbytek, při psaní elementů nabízí relevantní atributy, automaticky u nich např. doplňuje uvozovky, apod. Zároveň uživateli zpřehledňuje barevným značením HTML kód. Protože HTML je zpětně kompatibilní, co do syntaxe, nemusí být editor v poslední verzi, jen uživateli nenabízí takový komfort, protože mu neumožňuje a nenabízí nově zavedené elementy (značky). Ovšem umožňuje je zde zapsat.

2 2 HTML Vytváření 3W dokumentu pomocí: 2. konvertoru - program, který převádí text do jazyka HTML výsledek je třeba zpravidla ručně opravit 3. ruční vytvoření lze použít libovolný ASCII editor (Edit v MSDOSu, vi v Unixu, Notepad - Poznámkový blok) v Notepadu Uložit jako, ostatní dok., příponu.html doplnit (jinak je txt) text ASCII je univerzálním formátem celého Internetu

3 3 HTML HTML přijat již v roce 1986 jako obecný standard pro definici dokumentů. –zaměřen především na definování způsobu rozvržení dat na stránce W3C - sdružení firem věnujících se vytváření a správě standardů pro Internet

4 4 HTML - XML XML (Extensible Markup Language) je další otevřený, platformově nezávislý technologický standard W3C konsorcia XML (1998) je značkový jazyk určený k prezentaci strukturované informace na webu HTML a XML jsou syntakticky podobné, oba mají prvky (značky), atributy, entity a komentáře nová kapitola těchto jazyků je standard XHTML HTML má pevně stanovenou sadu značek (stanovenou W3C) v XML si značky vytváří uživatel sám a dodržuje jen stanovené konvence pro jejich použití

5 5 HTML zdrojový text HTML se skládá z příkazů, které se zapisují ve formátu značek (tagy) –při zápisu značek se nerozlišuje velikost písmen (u XHTML již ano) seznam přípustných značek dán definicí HTML chování značek lze ovlivnit prostřednictvím atributů (jsou nepovinné) –u párových značek se přiřazují úvodní značce

6 6 HTML - atributy značek –atributy se oddělují znakem mezera, nebo Enter (i více) zápis: některé at. jsou typu ano/ne (atribut přítomen/nepřít.) nebo atribut=„hodnota“uvnitř mohou být mezery hodnota je v „ “ nemusí, pokud je to 1 slovo nebo číslo délka hodnoty max. 1024 znaků nebo atribut=jméno(písmena, číslice,., pomlčky) Poznámka: atributy budou dále značeny touto barvou příklady viz dále u XHTML musí být všechny v „“

7 7 HTML - značky Párové značky: –párové značky mají vliv na určitou část dokumentu –zapisují se: – počáteční značka koncová značka Nepárové značky: –nepárová značka definuje v HTML nějaký prvek, například obrázek, nebo vyjadřuje určitou jednorázovou změnu (např. zalomení řádku ) V XHTML jsou všechny párové nebo zkrácené párové podobě – např. se zapíše jako

8 8 HTML komentáře (poznámky). Začínají znaky “ ” všechno mezi tím je poznámka lze tak označit i kus zdrojového textu znakové entity - symboly pro speciální znaky začínají & končí ;

9 9 HTML Kostra HTML dokumentu: záhlaví dokumentu, bez textu, jeho součástí je titulek ne víc než 64 znaků pokračování...

10 10 HTML Kostra HTML dokumentu - pokrač.: –tělo dokumentu, je zobrazeno uživateli závěrečné značky

11 11 HTML Metainformace v záhlaví HEAD doplňující inf. k dokumentu titulek stránky Pokud použijeme tyto informace v hlavičce stránky, budou je moci vyhledat META vyhledávače.

12 12 HTML Jiné metainformace datum a čas kdy informace na stránce přestávají platit, prohlížeč si stáhne aktuální stránku ze serveru

13 13 HTML text uvedený uvnitř sekce –prohlížeče umísťují na obrazovku bez ohledu na původní zápis –rozdělují text do řádek podle místa na obrazovce –konec řádku - platí jako mezera –více mezer - stejný efekt jako 1 mezera

14 14 HTML - značka body –složitější dok. zde má bohatě formátovaný text, gr. objekty, tabulky –u spec. dok. nahrazuje = dok. s rámečky /okno rozdělené do více nezávislých oken, každé s jiným dok., používají se k tomu též tabulky/ Atributy značky pro vzhled dokumentu leftmargin odsazení levého okraje v pixelech (=50), jen IE topmargin (jen IE) link, vlink, alink -

15 15 HTML - značka body barvu hypertext. odkazů : link - odkazy, které uživatel ještě neprošel vlink - které prošel alink - barva textu aktivního odkazu barva pozadí= hodnoty RGB, nebo slovně příklady: blue# 0000FF green# 008000 yellow# FFFF00

16 16 HTML doplněk - barvy blackčerná#000000 silverstříbrná#C0C0C0 grayšedá#808080 whitebílá#FFFFFF maroontmavě červená#800000 redčervená#FF0000 purpletmavě fialová#800080 fuchsiafialová#FF00FF

17 17 HTML - barvy greentmavě zelená#008000 limezelená#00FF00 olivetmavě žlutá#808000 yellowžlutá#FFFF00 navytmavě modrá #000080 bluemodrá#0000FF tealtmavě tyrkysová#008080 aquatyrkysová#00FFFF

18 18 HTML - značka body Atributy značky –volíme obrázky s malou velikostí (kB), prohlížeč je skládá jako dlaždice, opakuje je barvu volíme podle barvy textu nebo naopak –zafixuje obrázek napevno (při rolování stránky zůstává obrázek na místě a roluje jen text)

19 19 HTML - strukturování dok. strukturování textu - značky vytvoření oddílu odděluje odstavce ( v novější verzi i ) obě bez atributů jen zalomí řádek, P přidá navíc vertik. mezeru obě definují oblast, kterou lze zarovnat, aplikovat na ni styly explicitní zalomení ř., např. u básně (jinak se o lámání ř. nestaráme, láme prohlížeč)

20 20 HTML - strukturování dok. (horizontal rule) - vodorovná čára před i za raději oddělení od dalšího textu - značky pro nadpisy také zalomí text = stejně veliký jako obyč. text V první značce nadpisu je vhodné zopakovat titul dokumentu, viz př.

21 21 HTML - příklad Ochrana dat v síti Ochrana dat v síti objeví se v dokumentu …………

22 22 HTML - písmo = předem formátovaný text, zobrazí text přesně tak jak jej zapíšete do zdroj. dokumentu, včetně zalomení a mezer ale: použije se neproporciální písmo Značky pro písmo - standard HTML 4.0 a XHTML je už nedoporučují, ale prohlížeče je dosud podporují – size =1 - 7definuje zákl. velikost písma pro normální text – umožňuje změnu stylu, velikosti,barvy textu atributy size, color

23 23 HTML - písmo Př.: relativní velikost vzhledem k základní velikosti

24 24 HTML - - atributy id = jméno označí oddíl návěštím, můžeme se na něj pak odvolávat v hypert. odkazu

25 25 HTML - začátek odstavce –více značek P se ignoruje atributy (některé) id alignzarovnání textu Příklad: Text zarovnaný vpravo Tohle bude taky vpravo (zarovnání zůstává platné)

26 26 HTML - pokračování příkladu Tento text bude vlevo Tohle bude uprostřed Pokračování je implicitně vlevo

27 27 HTML - Odstavec může obsahovat: značky povolené v běžném toku textu: hyp. odkazy fyzické styly písma kontextově orientované styly (obojí viz dále) jakýkoli jiný prvek = pro prohlížeč konec odstavce

28 28 HTML - kotva Vkládání odkazu do www stránky k tomu slouží párová značka (Anchor - kotva) přináší dvě informace - kam vede a jak má na stránce vypadat cíl odkazu určuje její atribut HREF=„odkaz” o její vzhled se stará text (a případné další značky), uzavřený mezi a koncové slova a/nebo obrázky mezi a se v prohl. zobrazí jako aktivní

29 29 HTML - kotva klienti obvykle odlišují aktivní text barevně a navíc jej podtrhnou atributy značky : href, name, id, rel, rev, target target - =jméno rámečku, či okna prohlížeče, kam se zobrazí obsah odkazu, pokud neexistuje, vytvoří se nové okno name, id - vytvoří identifikátor (jméno) fragmentu v aktuálním dokumentu, lze použít i s Href (což je zase odkaz do jiného dok.) v tagu možno nastavit barvy odkazu v tagu možno nastavit barvy odkazu

30 30 HTML - kotva doporučení: raději použít dvě značky Př. na vytvoření fragmentu (kotva s atributem name): Kapitola 6 na označenou část dokum. se pak dostaneme: <A href=“xx.html # Kapitola 6 ” ve značce pouze text, obrázek, nadpisy a zalomení ř.

31 31 HTML - příklad Příklad zdrojového kódu: zkouska HTML Nový server Student.pef.czu.cz je určen pro studenty České zemědělské univerzity v Praze

32 32 HTML - příklad Dostane-li klient tento zdrojový text, zobrazí : Nový server Student.pef.czu.cz je určen pro studenty České zemědělské univerzity v Prazeserver Student.pef.czu.cz zvýrazněný text bude aktivní a vede na stránku s uvedeným URL

33 33 HTML - fyz. styly Formátování textu - fyzické styly značky: tučné písmo kurzíva podtržené písmo (typewriter text) stejná šířka písma, tzv. neproporciální písmo přeškrtnuté písmo písmo, které bude o stupeň větší než standardní lze i vnořovat Ahoj

34 34 HTML - fyz. styly Formátování textu - fyzické styly zmenšuje písmo, dolní index horní index blikající text (podporuje jen NN)

35 35 HTML - kontextové styly Formátování textu - styly orientované na obsah (kontextově orientované) – říkají prohlížeči, že urč. část textu má specifický význam uvnitř je citace, např. titul knihy (bude kurzivou), umožňuje vytvořit z dokumentu seznam literatury je vhodné vložit citaci do a vytvořit z ní hyp. odkaz zvýraznění textu, bude kurzivou silnější zvýraznění

36 36 HTML - kontextové styly Formátování textu - styly orientované na obsah zápis program. kódu (bude v neproporciálním písmu) dfn>první, definující výskyt pojmu (fráze) využije se při sestavování slovníčku pojmů, rejstříku