HTML. ICT_01., 02. konzultace; 2. ročník 1/6

Transkript

1 ICT_01., 02. konzultace; 2. ročník 1/6 HTML Vystavení vlastních dat na Internetu Každý uživatel Internetu, který chce svoje webové stránky publikovat na Internetu potřebuje: - místo na webovém serveru, kde může své stránky publikovat, - program, kterým vytvoří svoji webovou prezentaci ve formátu HTML, - FTP klienta. Jak získat místo pro svoje stránky Místo na webovém serveru mohu získat několika způsoby. Mohu využít volné webhostingové služby: a mnoho dalších (lze vyhledat pomocí libovolného vyhledávače). Tímto způsobem většinou získá adresu pro své webové stránky Druhý způsob je u správce patřičné domény 1. řádu (.cz,.com,.org apod) zaplatit vlastní doménu 2.řádu (mojedomena.cz) a potom si postavit vlastní server a připojit ho do sítě Internet nebo si pronájem serveru zaplatit u firmy, která se touto činností zabývá ( Jak vytvořit své stránky Pro tvorbu webových stránek ve formátu HTML, PHP existuje mnoho programů, které si liší jednak cenou, ale i více či méně možnostmi použití domácí nebo profesionální. Pro platformu MS Windows mezi nejznámější patří: PSPad, NVU, MS FrontPage, a mnoho dalších. Základní rozdíl mezi jednotlivými editory je vlastní návrh stránek. Některé editory nabízí možnost tvorby webových stránek metodou WISIWYG (What I see is what you get) ostatní nabízí ruční psaní HTML kódu a následné prohlížení v definovaném prohlížeči. Uživatel WISIWYG programů (NVU) tvoří návrh webové stránky podobně jako v textovém editoru aniž musí znát syntaxi HTML jazyka. Možnost ruční úpravy nebo přímo psaní HTML kódu ručně ocení zejména profesionální nebo pokročilí tvůrci webu. Jak umístit vytvořené stránky na webový server Pokud máme naši webovou prezentaci vytvořenou a uloženou na pevném disku našeho počítače, případně i zkontrolovanou v prohlížeči, pak je třeba naše stránky uploadovat (nakopírovat) protokolem ftp na náš webový server. K tomuto účelu je dobré použít klienta ftp program, který umí komunikovat pomocí protokolu ftp se vzdáleným serverem. Některé HTML editory mají tuto funkci přímo obsaženu (PS Pad). Nejpoužívanějším manažerem souborů a zároveň ftp klientem je Total Commander pro Windows. Po správném zadání ftp serveru, jména a hesla pro přihlášení dojde k připojení na náš web server a pak je vlastní publikování našich stránek zjednodušené na zkopírování vytvořeného webu z pevného disku počítače protokolem ftp na vzdálený server pomocí klávesy F5. Po zkopírování ftp protokolem na server stačí zadat do prohlížeče adresu našeho webového serveru a zkontrolovat výsledek.

2 ICT_01., 02. konzultace; 2. ročník 2/6 Struktura HTML 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 <ostrých závorkách>. Co není v ostrých závorkách, je text, který se bude zobrazovat. Symbolicky zapsáno: <tag> text </tag> a zase text a <tag> a zase text První příklad -- struktura HTML <head> <title>má první stránka</title> </head> <body> Moje první html stránka. A nějaké další texty. </body> Tento příklad si můžete zobrazit v prohlížeči. Ty barvičky jsou jen pro lepší pochopení, nehrají žádnou roli. Co znamenají jednotlivé tagy: začíná dokument končí dokument <head> a </head> začíná a končí hlavičku, která se sice nezobrazuje, ale obsahuje některé důležité údaje, například <title> a </title>, vymezující název dokumentu (může se lišit od jména souboru) <body> Co je mezi <body> a </body>, se bude zobrazovat. <body> je tag, kterým začíná vlastní tělo dokumentu (angl. body = tělo). Tímto příkladem je popsána základní struktura dokumentu. Výše uvedené tagy by měl obsahovat každý html soubor. Jestli si chcete hrát s HTML stránkou, je dobrý nápad zkopírovat si výše uvedený kód do nějakého souboru k sobě na disk a provádět experimenty. Párové tagy Jak je zřejmé z příkladu, vyskytují se tagy ve párech <něco> a </něco>, kde ten první tag něco začíná a druhý něco končí. To lomítko znamená, že jde o uzavírací tag. Příklady párových tagů: <head> je začátek hlavičky a </head> je její konec <body> je začátek těla stránky a </body> je konec těla stránky <b> je začátek tučného textu a </b> je konec tučného textu a tak dále. Kromě takto párových tagů se vyskytují ještě tagy nepárové, které uzavírací tag nemají, ty ale nejsou časté. Příklady nepárových tagů: <img> je tag pro obrázek a nic jako </img> v HTML neexistuje <br> je tag pro řádkový zlom, ale nic jako </br> neexistuje

3 ICT_01., 02. konzultace; 2. ročník 3/6 Druhý příklad - změna vzhledu <head> <title>má druhá stránka</title> </head> <body> <h1>nadpis</h1> <p>odstavec s <b>tučným textem</b>, s <i>kurzivou</i>. <span style="color: red;">červený text.</span></p> <h2>nadpis druhé úrovně</h2> <p>odstavec s <i><b>tučnou kurzivou. </b></i><br> Text po zalomení řádku patří do téhož odstavce.</p> </body> Také tento příklad si můžete zobrazit v prohlížeči. Už je to dost složité, ale od toho máte mozek. V příkladu jistě vidíte strukturu, která je společná s prvním příkladem. Vyskytují se tu ale nové tagy: <h1>, </h1> vymezení nadpisu první úrovně. <h2>, </h2> nadpis druhé úrovně (mezinadpis, nadpis kapitoly). Dá se použít až šest úrovní nadpisů (tedy <h1>, <h2> až <h6>). Vykreslují se různě velké podle důležitosti. <p>, </p> vymezení odstavce. Možná vůbec nejpoužívanější tag. Po jeho konci prohlížeč automaticky zalomí řádek a udělá vertikální mezeru. <b>, </b> text mezi těmito tagy bude tučný. <i>, </i> kurzíva <span>, </span> dvojice tagů vymezující nějak odlišný text. <span style="color: red">, </span> V tomto případě má obalený kus textu červenou barvu písma. Jde o první příklad tagu, který má tak zvaný atribut. Atributem je "style" a má hodnotu "color: red" (angl. barva: červená). Pomocí tohoto atributu style= se dá detailně nadefinovat vzhled textu, obaleného libovolným tagem. V praxi má většina tagů nějaký atribut, zatím jsem se tomu vyhýbala. <br> zalomení řádky, takzvaný měkký enter. Text po tomto tagu bude vždy začínat na novém řádku, ale není to nový odstavec. Pozor, tento tag je nepárový, to znamená, že žádné </br> neexistuje! Nyní už umíte všechny tagy nezbytné pro práci s textem.

4 ICT_01., 02. konzultace; 2. ročník 4/6 Třetí příklad - pozadí a odkazy V tomto příkladu se pokusím nastínit dvě nesouvisející věci, už poněkud těžší <head> <title>třetí příklad, barva pozadí a odkazy</title> </head> <body style="background-color: green; color: yellow;"> <h1>pozadí a odkazy</h1> <p>obyčejný text.</p> <p>odkaz na <a href=" </p> <p><a href="priklad2.htm">odkaz na příklad 2.</a></p> </body> Zobrazte si příklad v prohlížeči a zkuste funkčnost odkazů. Máme tady nový tag <a> a nějaké další atributy. <a href="adresa">text odkazu </a> text (nebo obrázek) mezi těmito dvěma tagy se zobrazí jako text odkazu ("a" jako angl. "anchor" = odkaz). Po kliknutí na něj se prohlížeč přepne na adresu, která je zadaná atributem HREF. href atribut tagu "a" se rovná cestě k odkazovanému souboru. Používá se zde buď relativní, nebo absolutní adresa. absolutní adresa používá se ve formě V příkladu je takto použita adresa Seznamu. relativní cesta pokud se chci odkázat na jiný svůj soubor, je zbytečné vypisovat tam to a celou cestu. Nejlepší je, když je odkazovaný soubor ve stejném adresáři jako ten aktuální. Pak se na něj dá ukázat relativně. Stačí zapsat jenom jméno souboru a prohlížeč to pochopí. (V příkladu je takto odkázaný druhý soubor priklad2.htm.) Jestliže je ten cílový soubor v jiném blízkém adresáři, stačí napsat href="adresář/soubor.htm". <body style="background-color: green; color: yellow;"> způsob, jak stanovit barvy celého těla dokumentu. style atribut tagu <body>, který určuje vzhled celého dokumentu. V tomto případě nastavuje barvu pozadí stránky (background-color) na zelenou a barvu textu (color) na žlutou. Atribut style už je použit v předchozím příkladu. V zásadě se již jedná o použití kaskádových stylů = CSS. Kaskádové styly jsou základní prostředek na úpravu vzhledu stránek. Budou více probrány příští konzultaci. Atributem style se dá měnit vzhled.

5 ICT_01., 02. konzultace; 2. ročník 5/6 Obecná syntaxe HTML HTML má několik málo zásad, které je dobré zmínit. Nezáleží na velikosti písem, <body> je totéž co <BODY> V adresách a jménech souborů záleží na velikosti písmen, nesmějí tam být mezery a čeština. Tagy, které prohlížeč nezná, jako by nebyly. Na začátku tagu nesmí být mezera, třeba < br> je špatně. Dvě mezery po sobě (nebo víc) mají stejný význam jako jedna mezera. Konec řádku ve zdroji se chápe jako mezera. Hodnoty atributů je dobré dávat vždy do uvozovek, ale není to úplně nutné, pokud uvnitř nejsou mezery. Např. odkaz <a href= funguje, ale lepší je psát <a href=" Speciální znaky typu se do zdroje zadávají jako posloupnost znaků &něco; například, pevná mezera je Poznámka se do zdroje vkládá mezi značky   Obrázky, čáry, zarovnání Obrázek se do dokumentu vloží nepárovým tagem <img src="obrázek.gif"> Src (jako source = zdroj) se opět může zadávat relativně nebo absolutně. Napřed je třeba mít obrázek připravený jako soubor. Aby se obrázek zobrazil ve všech prohlížečích, musí to být soubor typu gif nebo jpg. Tag <img> má spoustu dalších atributů, které nyní opomíjím. Čára Horizontální čára se dá vložit tagem <hr>. Má to nějaké atributy, které nastavují šířku, zarovnání a barvu. Zarovnání odstavce na střed Většina objektů (odstavce, tabulky, obrázky) na stránce se může zarovnat vlevo, na střed nebo vpravo. Dělá se to obecným atributem style a vlastností text-align, která má hodnoty left, center nebo right. Například tento odstavec je deklarován zápisem <p style="text-align: center;" > a je zarovnaný na střed.

6 ICT_01., 02. konzultace; 2. ročník 6/6 Domácí zadání: Na internetu, v literatuře vyhledejte tagy a použití tagů pro spolehlivých 216 barev, pro tabulky a formuláře. Vytvořte si svůj vlastní přehled ( tahák ) dnešních i nalezených tagů v textovém editoru (MS Word, OO Writer). Grafická úprava je na Vás, můžete do tabulky, můžete do sloupců, můžete na jednu A4 stránku s malou velikostí písma (doporučuji) nebo na více stránek. Tento tahák mi zašlete mailem na studentum@seznam.cz, do předmětu napište 2dp_tahák html, do těla mailu se podepište. Termín: Naučte se dnes použité tagy a pravidla pro tvorbu HTML současně s nalezenými údaji, příští konzultaci musíte tyto základy znát, případně je mít po ruce a umět v taháku rychle hledat. Doporučené zdroje: