Základy HTML/XHTML

Info: obsah těchto stránek byl vytvořen v roce 2018, takže některé informace již jsou zastaralé, i když všeobecné základy jsou stále platné

Odkazy a weby

Vlastnost hypertextu je možnost hypertextového propojení dokumentů. Možnost z aktuálního dokumentu ukázat na jiné místo ve stejném dokumentu nebo na jiné místo v lokálních dokumentech nebo na jiné místo v kterémkoliv dokumentu v síti Internetu.

Hypertextový odkaz se také nazývá kotva a označuje se tagem <a>.

Odkaz na dokument: URL

Každý dokument má na síti svou jednoznačnou adresu.

Adresy URL mají stejnou syntaxi:

schéma:část_platná_pro_schéma

Kde schéma vyjadřuje typ objektu, na který adresa odkazuje a část_platná_pro_schéma, je část která má smysl pro dané schéma. Schéma se od části_platné_pro_schéma oděluje vždy dvijtečkou bez mezer.

Zápis URL

Zápis je možný jen pomocí zobrazitelných znaků ze zankové sady US-ASCII. Jakýkoli jiný znak se musí zakódovat.

Jednoduchá adresa: http://www.vut.cz

Mezeru není možné do adresy zapsat. Pokud ji tam mermomocí chcete, musí se zakódovat - nahradit řetězcem %20.

Jednoduchá adresa, se zapsanou mezerou: http://www.vut.cz/nove%20predpisy.html

Dále se ve jménu stránky nesmí používat rezervované a nebezpečné znaky, které mají v adrese svůj specifický význam. Pokud je chcete použít, musí se opět zakódovat.

; (středník) %3B / (lomítko) %2F ? (otazník) %3F : (dvojtečka) %3A @ (zavináč) %40 = (rovná se) %3D & (ampersand) %26 < (menší než) %3C > (větší než) %3E " (uvozovky) %22 # (dvojtý křížek, mřížka a pod.) %23 % (procenta) %25 { (levá složená závorka) %7B } (pravá složená závorka) %7D | (roura) %7C \ (zpětné lomítko) %5C ^ (stříška, šipka vzhuru) %5E ~ (vlnovka, tilda) %7E [ (levá hranatá závorka) %5B ] (prava hranatá závorka) %5D ` (obrácený apostrof) %60

Adresa URL typu http/https

Tato adresa je nejběžnější a slouží pro přístup k dokumentům uložených na serveru http nebo https.

Formát adresy:

Nejběžnější zápis: http://server/cesta htts://server/cesta Rozšířený zápis: http://server:port/cesta#fragment http://server:port/cesta?hledej https://server:port/cesta#fragment https://server:port/cesta?hledej

Server je jedinečné internetové jméno případně IP adresa (adresa protokolu Internet Protocol). Jednotlivé části jména se oddělují tečkami bez mezer. Nerozlišuje se zde velikost písmen.

Port představuje číslo komunikačnho portu, kterým se prohlížeč připojí na server. Implicitně je pro adresy URL pro web.servery je port číslo 80. Speciální bezpečné servery používají post 443.

Cesta vyjadřuje umístění dokumentu v diskové a adresářové struktuře. Jména se oddělují lomítky bez mezer. Poslední jméno je jménem dokumentu s příponou .html nebo .htm. (Pozn. přípona může být i jiná, pokud se jedná o dokumet zpracovávaný pomocí skryptu - php, asp apod.).

U zápisu jmen adresářů a dokumentu se rozlišuje velikost písmen (na systému UNIX, u Win ne), ale je dobré psát vždy správnou velikost písmen.

Fragment je položka, která ukazuje na určitou část v dokumentu. Vždy se oděluje pomocí #.

Parametr hledej se odděluje ? a slouží k předání hodnot uvedených v parametru hledej, které ovlivní činnost práce v odkazovaném dokumentu.

Příklad:

http://www.vut.cz/ http://www.vut.cz/neprehlednete/aktuality/akt-info/first_tue.htm http://www.vut.cz/to.cs/informace/dokumenty/index.phtml#rozrek http://www.vut.cz/to.cs/RO/index.phtml?parent=/informace/struktura.phtml http://www.vut.cz/cgi-bin/search.cgi?q=favu&ps=20&o=0&m=all&wm=wrd&wf=222210

Adresa URL typu ftp

Adresa URL typu ftp slouží k načtení dokumentů ze serveru FTP.

Formát adresy:

ftp://uzivatel:heslo@server:port/cesta;type=kod_typu

Uživatel a heslo slouží k autentizaci uživatele. Většina FTP serverů podporuje omezený, neautorizovaný přístup - anonimní FTP. Zadává se jméno "anonymous". Většina serverů tento přístup předpokádá, pokud jméno a heslo není uvedeno. (Pozn.: NIKDY nezapisujte do dokumenu HTML adresu URL typu FTP s uživatelským jménem a heslem. Dokument si může kdokoli stáhnout a údaje přečíst.)

Pro server, port a cestu platí stejné jako u typu http.

Kód typu vyjadřuje typ přenášeného souboru. Implicitně binární soubor.

Příklad:

ftp://www.vut.cz/ceny_studia/ ftp://pepa@pepa_a_spol.cz/cenik;type=d ftp://pepa:tajne@pepa_a_spol.cz/cenik_text;type=a

Adresa URL typu file

Adresa URL typu file určuje soubor, uložený někde na počítači, ale nedefinule přenosový protokol. Tento způsob se moc nepoužívá.

Formát adresy:

file://server/cesta

Pro server a cestu platí stejné jako u typu http.

Pokud server obsahuje jméno localhost, jedná se o soubor uložený na stejném počítači, na kterém běží prohlížeč.

Příklad:

file://www.vut.cz/ceny_studia/cenik_2003.html file://localhost/dokumenty/pepa/dokument.html file:///dokumenty/pepa/dokument.html (zkrácená podoba)

Adresa URL typu news

Adresa URL typu news určuje přístup k diskuzní skupině nebo ke konkrétní zprávě.

Formát adresy:

news:diskuzni_skupina news:id_zpravy

Jako diskuzni_skupina nejde zadat konkrétní adresu serveru. Zadává se to do prohlížeče a proto je to vázáno vždy na konkrétní počítač. Odkaz na konkrétní příspěvek má většinou minimální životnost (ve dnech). Nedoporučuji používat tento typ odkazu..

Příklad:

news:comp.infosys.www.announce - diskusní skupina pro technologie WWW news:12A9845C@news.vutbr.cz - odkaz na příspěvek

Adresa URL typu nntp

Adresa URL typu nntp umožňuje přístup ke zprávám v systému zpráv Usenet.

Formát adresy:

nntp://server:port/diskusni_skupina/clanek

Pro server a port platí stejné jako u typu http. Port má ale číslo 119.

Diskusni_skupina je jméno diskusní skupiny a clanek je číslo článku. Pro přístup a stažení článku musíte mít většinou oprávnění.

Příklad:

nntp://news.vutbr.cz/favu.stud.html/123

Adresa URL typu mailto

Adresa URL typu mailto vyvolá odeslání zprávy el.pošty zadanému příjemci.

Formát adresy:

mailto:adresa

Adresa je libovolná platná adresa elektronické pošty.

Po vybrání tohoto odkazu, otevře většina prohlížečů mailové klinta (MS Expres, MS Outlook apod.). Údaje v halvičce jsou prázné. Tyto je možné pomocí parametrů zadat, aby se předvyplnily (není to, ale ve standardu).

Příklad:

mailto:pepa@vutbr.cz mailto:pepa@vutbr.cz?subject=Dopis z mé stránky

Adresa URL typu telnet

Adresa URL typu telnet otevře interaktivní spojení s požadovaným serverem.

Formát adresy:

telnet://uzivatel:heslo@server:port/

Pro uzivatele, heslo, server a port platí stejné jako u typu ftp, jen port má číslo 23.

Absolutní a relativní adresa URL

Absolutní adresa je adresa, která obsahuje všechny potřebné údaje pro vyhledání dokumentu.

Relativní adresa je zkrácená adresa dokumentu, do které server doplní automaticky údaje tak, aby z ní vznikla úplná adresa. Dopněné údaje se vztahují na spojení se "základní adresou" dokumentu, odkud je adresa volána.

Příklad:

k5-odkazy.html - relativní adresa tohoto dokumentu https://www.volny.cz/pvalen/vyuka/k5-odkazy.html - absolutní adresa tohoto dokumentu vznikne po doplnění https://www.volny.cz/pvalen/vyuka/ do relativní adresy k5-odkazy.html serverem

Vytváření hypertextových odkazů

Tag A

Ve spojení s atributem href vytvoří odkaz. S atributem name vytvoří identifikátor v dokumentu. Obsah tagu je většinou vypisován odlišnou barvou a podtrženě. U obrázků vykreslí barevný okraj. Mezi tag <a>, se nesmí vkládat jiné tagy.

<a href="https://www.vut.cz">text</a> <a name="bod_a">text</a> <a href="https://www.vut.cz"><img src="logo_vut.gif">text</a> * tag s použitelnými atributy <a href="k5-odkazy.html" target="_blank" rel="next" rev="prev"> <a name="bod_a"> * cílová adresa URL href="k5-odkazy.html" - relativní adresa na dokument href="http://www.vut.cz/neprehlednete/aktuality/index.phtml" - absolutní adresa na dokument href="#bod_a" - odkaz dovnitř stejného dokumentu na identifikátor bod_a * identifikátor name="bod_a" - na toto místo je možné se odkazovat pomocí tagu <a href="#bod_a">text</a> * vztah dokumentu k cíly odkazu rel="next" - propojení na nasledující dokument * vztah dokumentu od cíle ke zdroji rev="prev" - propojení na předcházející dokument mohou mít tyto hodnoty: next - propojení na následující dokument v dokumentech prev - propojení na předcházející dokument v dokumentech head - propojení na dokument nejvyšší úrovně v dokumentech toc - propojení na tabulku s obsahem dokumentů parent - propojení na dokument nad zdrojovým dokumentem child - propojení na dokument pod zdrojovým dokumentem index - propojení na rejstřík (index) tohoto dokumentu glossry - propojení na slovníček pojmů tohoto dokumentu * určení, kde se má obsah odkazu zobrazit target="_blank" - otevře se nové okno target="_self" - otevře se do původního okna (implicitně) target="_parent" - dokument se načte do rodičovského okna target="_top" - načte se do okna, které odkaz obsahuje a odstarní všechny případné rámečky * titulek dokumentu title = "název dokumentu" * použité kódování v cílovém dokumentu charset="iso-8859-2" * jakyk použitý v cílovém dokumentu hreflang="cz" * typ obsahu v cílovém dokumentu type="text/plain" * změna pořadí při procházení odkazů pomocí tabulátoru tabindex="5" * určení horké klávesy pro odkaz accesskey="n" * definice jména pro obrazovou mapu usemap="#moje_mapa" * definice oblasti dosahu coords, shape * další atributy class - třída stylu style - přímo vložený styl color - jen IE, nastavení barvy čáry id - označení, použitelné jako odkaz ve skriptech title - popis odkazu událostní atributy typu on... Použití atributu události: <a href="k5-odkazy.html" onmouseover="window.status='Kapitola o používání odkazů.'; return true">Použití atributu událostí</a>

Příklad: Použití atributu událostí (po najetí myší se ve stavovovém řádku objevý text)

Poznámka: "window.status" je již nepovolený a může způsobovat chybu RUN-TIME ERRORS

Propojení s jinými dokumenty se provede přidáním atributu href.

Propojení v rámci jednoho dokumentu je možné vytvořením identifikátoru (kotvy) pomocí <a name="... a někde v textu odkazem <a href="#...

Co dělat a nedělat s odkazy

obsah odkazu so nejstručnější
jasný a výstižný text odkazu
nedávat dva odkazy tešně za sebe
používat stejné typy odkazů (řádkové/seznamy)
obrázky jako odkazy používat s rozmyslem

Obrazové mapy

Normálně je možné nastavit obrázek jako odkaz stejně jako text. Existuje ale ještě jedna možnost. Klepnutím na různé části obrázku prohlížeč vyvolá různé odkazy. Tomuto obrázku se říká obrazová mapa (citlivý obráze, citlivá mapa).

Tag MAP

Slouží k definici obrazové mapy a musí být zapsán v dokumentu kde se mapa používá.

<map> <map name="moje_mapa"> * atribut pro zadání jména name = "jmeno_mapy" * další atributy class - třída stylu style - přímo vložený styl title - označení id - označení, použitelné jako odkaz ve skriptech title - popis popis odkazu událostní atributy typu on...

Tag AREA

Slouží k definici citlivé plochy v obrázku.

<area> <map name="moje_mapa"> <area shape="rect" coords="12,11,64,56" href="https://www.vut.cz/"> <area shape="circle" coords="120,41,26" href="https://www.favu.vut.cz/"> <area shape="poly" coords="164,31,185,18,210,19,228,37" href="https://www.fekt.vut.cz/"> * atribut typu plochy shape = "rect" - rectangle, obdélník shape = "circ" - circle, kruh shape = "poly" - polygon, mnohoúhelník * atribut pro definici souřadnic plochy coords = "" - levý horní roh obrázku má souřadnice 0,0 coords = "x1,y1,x2,y2" - pro obdélník (rectangle) x1,y1 - souřadnice levého horního rohu x2,y2 - souřadnice pravého dolního rohu coords = "x,y,r" - pro kruh (circle) x,y - souřadnice středu kruhu r - poloměr kruhu coords = "x1,y1,x2,y2,x3,y3,..." - pro mnohoúhelník (polygon) x1,y1 - souřadnice 1.vrcholu x2,y2 - souřadnice 2.vrcholu x3,y3 - souřadnice 3.vrcholu ... musí mít minimálně tři vrcholy (trojúhelník) * atribut pro zadání odkazu href="k5-odkazy.html" * změna pořadí při procházení odkazů pomocí tabulátoru tabindex="5" * další atributy class - třída stylu style - přímo vložený styl title - označení id - označení, použitelné jako odkaz ve skriptech title - popis odkazu událostní atributy typu on... Příklad: <map name="moje_mapa"> <area shape="rect" coords="12,11,64,56" href="https://www.vut.cz/"> <area shape="circle" coords="120,41,26" href="https://www.favu.vut.cz/"> <area shape="poly" coords="164,31,185,18,210,19,228,37" href="https://www.fekt.vut.cz/"> </map> <img src="https://www.pvalen.cz/soubor_vyuka/obr/obr_mapa.gif" border="0" width="239" height="350" usemap="#moje_mapa">

Nevíhodou použití obrázkových map je, že ti uživatelé kteří mají vypnuté stahování obrázků tyto mapy neuvidí. Proto je dobré dávat na stránkus obrazovou mapou odkaz na stránku kde jsou použity normální odkazy.

Vztahy mezi dokumenty

Žádný dokument uložený na internetu není samostatný. Většinou patří do nějaké skupiny dokumentů. Tento vztah se zapisuje do tagu <a> pomocí atributu rel. Existují ještě dva další tagy, ale ty se zapisují jen mezi tag <head>.

Tag BASE

Tag změní automaticky doplňovanou adresu do relativních odkazů na adresu zadanou v tomto tagu.

<base> <base href="https://www.vut.cz/" target="_top"> * atribut pro zadání doplňované adresy href="http://www.vut.cz/" * atribut pro definici jména okna nebo rámečku pro načtení target="_top" (hodnoty atributu jsou stejné jako u tagu a)

Tag LINK

Pomocí toho tagu je možné definovat vztah mezi dokumenty ve skupině.