Technologie pro publikování na webu 1 Ing. Jiří Štěpánek.

Prezentace na téma: "Technologie pro publikování na webu 1 Ing. Jiří Štěpánek."— Transkript prezentace:

1 Technologie pro publikování na webu 1 Ing. Jiří Štěpánek

2  Tagy (značky)  Označují prvek stránky ▪ Párové ▪ Uvozovací a ukončovací značka ( Text odstavce ) ▪ Nepárové ▪ Pouze uvozovací značka, dle normy XHTML je na konci použito lomítko (,  Každý tag může obsahovat atributy (u img například src, nebo alt)  Možnosti / nutnost použití atributů jsou pro každý element uvedeny v referenční příručce (http://xhtml.com/en/xhtml/reference/)

3  Je uzavřena v elementu  Obsahuje metadata = informace o stránce (dokumentu)  Jedná se o kódování, název stránky, autora, klíčová slova, popis …  Informace slouží prohlížeči, vyhledávacím robotům, … Název stránky

4 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> Název stránky Text odstavce

5  Hlavička  Titulek stránky, kódování, metadata…  V elementu head  Tělo stránky  V elementu body  Obsahuje uživateli viditelné prvky (texty, obrázky, formuláře atd…)

6  Nadpisy –  Odstavec  Dolní index, horní index  Předformátovaný text  Text je zobrazen tak jak je přesně zapsán, včetně mezer, zalomení řádků…

7 Phrase elementy  Označují význam textu. Mohou obsahovat pouze text nebo další řádkové elementy.  Zpravidla se automaticky zobrazují jinak než základní text.   zvýraznění (emphasis) – kurzíva   důraznější zvýraznění – tučné  Další:  počítačový nebo programový kód  vzorový výstup programů, skriptů apod.  pojem nebo definice (definition)

8  Cite Shakespeare.  Označuje citovaný zdroj. Obsahuje jména osob, organizací,...  Elementy, – slouží k uzavírání citací  Být, či nebýt  Řádkový element. Hodí se pro kratší citace. Měl by v prohlížeči doplňovat uvozovky k citovanému textu.  Být či nebýt.  Blokový element pro uvádění delších citací.  Může přímo obsahovat pouze blokové elementy.

9  Zkratka (abbreviation)  URL  Plné znění by se mělo nacházet alespoň při prvním výskytu v rámci atributu.  Příklady zkratek: HTML, URL, ČD  Zkratkové slovo  Čedok  Vyslovuje se většinou jako jedno slovo, ne po jednotlivých písmenech.  Plné znění by se mělo nacházet alespoň při prvním výskytu v rámci atributu.  Příklady zkratkových slov: Čedok, NAFTA, OPEC, NATO.

10  Text odkazu  Místo (text, obrázek, …) v XHTML dokumentu, které přesměruje uživatele (kliknutím, najetím myší, …) na jiné místo v dokumentu nebo na jinou stránku

11   na každé stránce právě jeden!!!  hlavní nadpis konkrétní stránky (ne webu) ▪ výstižný; je pro SEO nejdůležitější společně s a s URL ▪ obsahuje unikátní název dané stránky ▪ text stejný nebo podobný jako v ▪ pouze na úvodní straně obsahuje hlavní nadpis webu ▪ jinak hlavní nadpis webu není v žádném elementu

12   Může se opakovat  Nesmí být přeskočen (použít na stránce jen h1 a h3)  Obecně jakýkoli nadpis nižší úrovně rozvíjí nadpis vyšší úrovně a vztahuje se k němu.  Pro vyhledávače je sémantika nadpisů důležitým faktorem při vyhodnocování obsahu stránky.

13  absolutní x relativní  absolutní  Kontakt  odevšud vede vždy na tuto adresu  relativní  Kontakt  soubor je hledán v aktuálním adresáři ▪ „data/polozky.htm“ (zanoří se do „data“) ▪ „/data/polozky.htm“ (vyjede na nejvyšší úroveň, pak –“ “– ) ▪ „../data/polozky.htm“ (vyjede o úroveň výše, pak se zanoří)

14  Odkazovat se samozřejmě dá na jakékoli soubory -.docx,.pdf,.rar,.zip…….  Je dobrým zvykem uvádět velikost souboru  viditelně ▪ Cvičení č.1 – organizační úvod (pps 99 KiB)  v parametru title ▪ Cvičení č.1 – organizační úvod  Použité by měly být oba způsoby  Na obrázek je dobré odkazovat prostřednictvím náhledu

15  Kotva – označení pozice na stránce  Definice kotvy ▪ Obsah ▪ zakázáno v XHTML 1,1 (nevadí) ▪ Obsah ▪ nefunguje ve starších prohlížečích  Skok na kotvu v rámci stránky ▪ Skok na obsah  Odkaz na jinou stránku a skok na kotvu ▪ Hlavní stránka – obsah ▪ Novák – obsah  Užití kotev  nezneužívat k větší navigaci ▪ raději obsah rozdělit mezi více podstránek  užívat k přeskakování navigačního menu, ke skoku na navigační menu, přeskakování reklam, apod. ▪ nefunguje v Google Chrome

16  nepárový element (image)   parametry height a width lze vynechat u malých obrázků  aby např. IE dokázal v příp. potřeby zobrazit alt  u větších obrázků rozměry uvádíme, aby se stránka během postupného načítání neroztahovala uživateli pod rukama  alternativní popisek alt uvádíme vždy !  při použití obrázku je nutné zvážit jeho datovou velikost a tím i dobu načítání stránky  obrázky při tvorbě stránek optimalizujeme (volíme vhodný rozměr obrázku, zvažujeme jak kvalitní obrázek je v dané situaci nutný)  obrázek zmenšujeme skutečně v patřičném SW, ne jen zadáním menších souřadnic (datový tok)  zvážit i formát souboru obrázku (.jpg,.gif,.png)

17  Parametr title  obecně může být definován téměř u jakéhokoliv elementu (obrázek, odstavec, seznam, jeho položka)  se po najetí myší zobrazuje ve žluté bublince (hint)  může být definován přímo u obrázku, nebo u odkazu, do kterého je obrázek vložen  Nezobrazuje se uživatelům mobilních zařízení  Parametr alt  zobrazuje se ▪ pokud má prohlížeč vypnuté zobrazování obrázků ▪ nevidomým uživatelům ▪ dokud se obrázek nestáhne (pomalé připojení, přetížení serveru) ▪ v textových prohlížečích ▪ vyhledávačům ▪ je důležitý pro SEO (a sémantiku) ▪ obecně místo obrázku, jako jeho náhrada, ekvivalent!  musí vystihovat pravý význam obrázku ▪ jeho smysl, účel ▪ např. přepis graficky ztvárněného textu obrázku ▪ alt=„logo“ je velmi zásadní chyba! ▪ do altu patří přímo text loga! ▪ u obrázku, který slouží jako odkaz, patří do altu popis cíle odkazu, ne popis objektů na obrázku

18