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

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

Úvod do HTML a tvorby webových stránek. Přístup k souborům webových stránek Interne t server: klient požadavek soubor HTTP protokol (RFC.

Podobné prezentace


Prezentace na téma: "Úvod do HTML a tvorby webových stránek. Přístup k souborům webových stránek Interne t server: klient požadavek soubor HTTP protokol (RFC."— Transkript prezentace:

1 Úvod do HTML a tvorby webových stránek

2 Přístup k souborům webových stránek Interne t server: klient požadavek soubor HTTP protokol (RFC 2616) index.html

3 použití HTML  dokumenty a publikace na webu  dokumentace k programům, nápovědy apd. (nejen na webu)  reklama  uživatelské rozhraní pro internetové aplikace

4 charakteristika HTML dokumentu  jazyk HTML je založen na jazyce SGML (Standard Generalized Markup Language), tedy obecném značkovacím jazyce  dokument je čistý text, do kterého jsou vloženy formátovací značky jazyka HTML  zobrazení HTML dokumentu se může v jednotlivých prohlížečích lišit  HTML se dále vyvíjí (předposlední verze 4.01) a vyvíjí se jeho různá rozšíření (CSS, XHTML, DHTML …)

5 HTML 5 V roce 2008 se začalo uvažovat o nové verzi HTML. Agónie XHTML už byla tou dobou zřejmá i pravověrným. Myslím, že v roce 2010 se můžeme těšit na novou verzi HTML. Psát v ní stránky ale budeme moci až poté, co vymizí všechny prohlížeče, které ji nebudou podporovat. V praxi půjde hlavně o prohlížeče Internet Explorer 7 a 8, protože Firefoxy, Opery a další prohlížeče se umějí aktualizovat rychleji. HTML ve verzi 5 obsahuje některé nové tagy. Konečně tagy pro prvky stránky, jako je hlavička nebo patička, či třeba tagy pro video nebo vektorovou grafiku. V roce 2010 skutečně začaly prohlížeče celkem solidně HTML 5 podporovat (nebo o tom aspoň vydávat tiskové zprávy). Teď už bude stačit počkat asi čtyři nebo pět let, až zmizí prohlížeče, které HTML 5 nepodporují, a budeme moci HTML 5 směle používat!

6 SGML značky a HTML specifikace formát SGML značek (tagů) párové - nepárové: text uvnitř tagu  značky se mohou vnořovat  jazyk HTML určuje jména značek, jména atributů, přípustné hodnoty, párovost značek a zanořování  specifikace HTML je definována v DTD souboru (existují tři typy: transitional, strict a frameset)  není case-sensitive

7 HTML dokument Základní struktura HTML souboru titulek tělo

8 hlavička dokumentu (uvnitř )  název dokumentu  - (meta)informace o dokumentu  - nastavení výchozího fontu pro celý dokument  - skripty v Java scriptu, nebo Visual Basic scriptu  - třídy CSS stylů

9 - informace o dokumentu  tagy doplňují informace o dokumentu (které využívá nejen prohlížeč, ale i nástroje indexující obsah webu)

10 Tělo dokumentu – parametry  pomocí atributů tagu lze nastavit barvy písma a pozadí a některé další základní parametry zobrazení dokumentu background – URL obrázku na pozadí bgcolor – barva pozadí text – brava textu link – barva hypertextových odkazů alink – (active link) barva aktivního hypertextového odkazu vlink – (visited link) barva navštíveného hypertext. odkazu  barva se zadává jako jméno barvy (např. „blue“), nebo ve formátu #RRGGBB, kde RR, GG a BB jsou hexadecimální hodnoty jasové složky daného barevného kanálu (např. #0000FF )

11 Tělo dokumentu – zobrazení textu  obyčejný text v dokumentu (kromě značek) se zobrazí  každá sekvence bílých znaků je prohlížečem chápána jako jeden oddělovač slov (jedna mezera)  do bílých znaků se počítá i zalomení řádku, a proto bude prohlížeč zalamovat řádky podle potřeby, nebo tam kde se v textu nachází tag (brake)  HTML nabízí širokou škálu tagů, které umožňují další formátování textu (nadpisy, odstavce, změna fontu …)  text mimo tělo dokumentu (pokud není uzavřen do některého speciálního tagu – např. ) bude také zobrazen

12 HTML – nastavení fontu textu  globální nastavení fontu pro celý dokument - (v hlavičce dokumetu)  lokální: text jiným fontem atributy (společné pro oba tagy): face – název fontu (např. Arial) size – velikost fontu, číslo od 1 (nejmenší) do 7 (největší), skutečná velikost je závislá na prohlížeči a jeho nastavení color – barva písma (zadává se stejně jako barvy u prametrů )

13 HTML – jednoduché formátování další tagy sloužící k nastavení vzhledu textu: - tučné písmo - kurzíva - podtržené písmo - přeškrtnuté písmo - písmo zvětšené o 1 stupeň - písmo zmenšené o 1 stupeň - dolní index - horní index - citace (obvykle se zobrazuje kurzívou) - ukázka zdrojového kódu - neformátuje text, ale uzavírá jej do logické obálky pro využití ve skriptech, nebo kaskádových stylech

14 HTML – blokové formátování následující tagy zarovnávají text do bloku (dojde k zalomení řádku před a za textem): … - nadpisy různé důležitosti (a velikosti) - odstavec textu (paragraf) - oddělení části textu (např. kapitoly apd.), často se používá ve spolupráci s kaskádovými styly - text v tomto tagu bude zobrazen neproporcionálním písmem a budou zachovány bílé znaky (včetně zalomení řádků a tabulátorů) - vodorovná dělící čára - konec řádku (přechod na nový řádek)

15 HTML – hypertextové odkazy  umožňují skoky v rámci jednoho dokumentu i přechod na dokument, který se nachází na úplně jiném serveru  základní interakce s uživatelem (čtenářem dokumentu)  přispěly k rychlému rozvoji webu  odkaz nemusí být jen text, ale i např. obrázek První kapitola Matfyz

16 HTML – obrázky  obrázky se vkládají tagem src – URL obrázku alt – alternativní textové vyjádření height – výška a šířka obrázku, pokud se liší width – od skutečné velikosti, obrázek je roztažen/zmenšen hspace – mezera nalevo a napravo od obrázku vspace – mezera pod a nad obrázkem loop – počet opakování animace (např. u GIFu) usemap – nastavení obrázkové mapy (viz. dále)  prohlížeč si stáhne soubor s obrázkem a zobrazí jej v dokumentu

17 HTML – obrázkové mapy  obrázkové mapy umožňují definovat na obrázku několik oblastí, které se chovají jako odkazy - vytváří mapu pro obrázek (název mapy se uvádí v atributu usemap u tagu ) - vytváří jednu oblast v mapě href – URL odkazu alt – alternativní textový popis shape – tvar oblasti coords – koordináty pro vytvoření oblasti

18 HTML – seznamy seznamy jsou číslované (nebo odrážkami uvozené) části textu: - (unordered list) nečíslovaný seznam type = disc | circle | square - (ordered list) číslovaný seznam type = 1 | a | A | i | I - (list item) položka seznamu dalším typem seznamů jsou např. seznamy definic: - (definition list) seznam definic - definovaný termín - definice termínu

19 HTML – tabulky - ohraničuje tabulku - (table row) jeden řádek tabulky - (table heading) políčko v hlavičce tabulky - (table data) políčko v tabulce Jméno Učí Novák Mat, Fyz JménoUčí NovákMat, Fyz

20 HTML – tabulky - atributy: align – zarovnání: left | center | right border – šířka okrajů v pixelech background – URL obrázku na pozadí bgcolor – barva pozadí cellpadding – odsazení mezi okrajem a obsahem buňky cellspacing – odsazení mezi buňkami width – šířka tabulky height – výška tabulky

21 HTML – tabulky,, - společné atributy align – zarovnání obsahu buňky: left | center | right valign – vertikální zarovnání obsahu: top | middle | bottom bgcolor – barva pozadí buňek, - společné atributy colspan – buňka zasahuje přes více sloupců rowspan – buňka zasahuje přes více řádků nowrap – bez-hodnotový atribut, který zakazuje zalamování textu v buňce

22 HTML – formuláře  rozšířená interakce s uživatelem (uživatel může do formuláře vyplnit řadu dat a odeslat je ke zpracování na server) - ohraničuje formulář action – URL souboru, ve kterém je skript (PHP, ASP…) pro zpracování dat method – způsob přenosu dat (GET, POST, …) GET – pasivní přenos dat (data jsou přidána do URL) POST – aktivní přenos (v rámci protokolu HTTP)

23 HTML – formuláře  všechny formulářové objekty mají atributy name (název proměnné) a value (hodnota proměnné) - základní formulářové objekty text - jednořádkový textový vstup password - textový vstup se skrytým textem radio - přepínací (rádiové) tlačítko checkbox - zaškrtávací políčko submit - odesílací tlačítko reset - resetovací tlačítko file - výběr souboru k odeslání na server hidden - skrytý prvek (uživatel jej nemůže měnit)

24 HTML – formuláře a - výběr z možností jeden dva tři - víceřádkový textový vstup

25 HTML – rámce  rozdělí okno prohlížeče na více částí a do každé části se načte jiná HTML stránka  použití rámců může zmenšit objem přenášených dat i velikost stránek samotných  zjednodušují návrh stránek  tříští webovou strukturu a komplikují práci vyhledávačům  v současné době se od používání rámců upouští

26 HTML – rámce - vytváří rozdělení (buď horizontální nebo vertikální) cols – nastavi horizontalni deleni (na sloupce) rows – nastavi vertikalni deleni (na radky) [ * | 100 | 10% | 5* ] - nastavuje rám (obsah, parametry) src – URL HTML souboru, který se má načíst name – jméno rámu 1. (10%) 2. (2 / 11) 3. (9 / 11)

27 HTML – rámce  tagy a se normálně umístují do části  alternativou je použití plovoucího rámu přímo na stránce src – URL webové stránky, která se má načíst do rámu name – název rámce height – šířka rámce width – výška rámce border – šířka okraje framespacing – mezera mezi okrajem rámce a dokumentem uvnitř vspace – mezera nad a pod rámcem hspace – mezera vlevo a vpravo od rámce

28 HTML – další entity  komentáře:  speciální symboly: &nbps; - pevná mezera (která se skutečně zobrazí jako text) < - menší než “<” > - větší než “>” & - ampersand “&” © - copyright “©” " - uvozovky nahoře

29 Kde hledat další informace  - World Wide Web Consortium  kompletní referenci obsahuje i aplikace DreamWeaver  internet obecně

30 Zásady tvorby www stránek  malé stránky – 100kB včetně obrázků na 1 dokument (myslete na uživatele s vytáčeným připojením, nebo GPRS)  pokud je třeba, aby uživatel stahoval větší objem dat, je slušností uvést jeho velikost (např. v textu odkazu)  stránky je rozumné otestovat na více prohlížečích (ideálně i na PDA, mobilním telefonu, nebo jen v textovém prohlížeči)  k nastavení fontů, barev, pozadí, okrajů apd. je vhodnější použít kaskádové styly

31 Doporučené zásady pro tvorbu www stránek: názvy všech souborů a složek malými písmeny bez diakritiky a mezer všechny soubory www stránek (*.html, *.css…) ukládám do jedné složky všechny soubory s obrázky ukládám do podsložky této složky např. obr, img…(dopředu upravím velikost obrázků na cca 100 kB) všechny ostatní soubory (např. *.doc, *.xls, *.ppt, *.avi…) ukládám do jiné podsložky této složky např. ostatni hlavní soubor stránek pojmenuji index.html všechny tagy píši malými písmeny při tvorbě nového souboru nejdřív uložím soubor, pak vkládám obrázky a tvořím odkazy (kontroluji relativní cestu)


Stáhnout ppt "Úvod do HTML a tvorby webových stránek. Přístup k souborům webových stránek Interne t server: klient požadavek soubor HTTP protokol (RFC."

Podobné prezentace


Reklamy Google