Programování webových stránek

Gymnázium J. K. Tyla Programování webových stránek Seminární práce z IVT Autor: Roman Lamberský Třída: 2.B Hradec Králové 2012

Prohlášení: Prohlašuji, že jsem tuto seminární práci vypracoval samostatně výhradně s použitím uvedených zdrojů a literatury. V Hradci Králové... Dne... podpis

Anotace: LAMBERSKÝ, Roman:. Hradec Králové. Gymnázium J. K. Tyla. 2013. Počet stran 18. Ročníková práce. Tato práce má za cíl základní vhled do problematiky webových stránek a jejich tvorby. Měla by vysvětlit základní pravidla při programování webu a zmínit se o různých programech, zkratkách, značkách a dalších záležitostech nezbytně potřebných pro toto téma. Obsah bude tvořen tak, že nejprve vysvětlím základní informace pro úplné začátečníky a později na to navážu složitějšími úkony pro pokročilejší. Primárně však bude tato práce sloužit zejména pro začátečníky, jelikož složité operace zvládne jen málokdo a firemní stránky vždy tvoří nějaká kvalifikovaná firma, což je vysokoškolská záležitost. Klíčová slova: HTML, tag, FTP, JavaScript

Obsah Úvod... 1 1. Co budeme potřebovat?... 2 1.1. Poznámkový blok (1)... 2 1.2. Webový prohlížeč (1)... 2 2. HTML editor... 2 2.1. Vizuální HTML editor... 2 2.2. Ruční HTML editory... 2 2.3. Který editor je tedy lepší?... 3 3. Co to vlastně HTML je?... 3 3.1. Tagy... 3 3.1.1. Párové tagy... 3 3.1.2. Nepárové tagy... 3 4. Příklady... 4 4.1. Základní velikost písma... 4 4.2. Titulek... 4 4.3. Změna vzhledu... 4 4.4. Odkazy... 5 4.5. Obrázky... 5 4.5.1. Rozměry obrázku... 5 4.5.2. Titulek... 5 4.6. Čáry... 5 4.7. Zarovnání odstavce na střed... 5 4.8. Pozadí... 5 4.8.1. Pozadí ve formě obrázku... 5 4.8.2. Barevné pozadí... 5 4.9. Barvy... 6

4.10. Tabulka... 6 4.11. Rámy... 6 4.12. Záložky... 6 5. Jak nahrát stránky na server?... 6 5.1. Co to je FTP... 6 5.2. Nahrání na server... 7 6. Správa souborů... 7 6.1. Jak pojmenovat HTML soubory?... 7 6.2. Složky... 8 6.3. Relativní a absolutní odkazy... 8 6.4. Domácí kopie... 8 6.5. Startovní soubor... 8 7. JavaScript... 8 7.1. Jak vložit skript?... 9 7.2. Proč zapisovat obyčejný text JavaScriptem?... 9 7.3. Proměnné... 9 7.4. Textové efekty... 10 7.4.1. Alert... 10 7.4.2. Prompt... 10 8. CSS styly... 10 8.1. Kdy používat CSS?... 10 8.2. Co z toho tedy plyne... 10 Závěr... 10 Rejstřík... 11 Zdroje... 12

Seznam obrázků Obrázek 1: Google Chrome (11)... 2 Obrázek 2: FTP (13)... 7 Obrázek 3: JavaScript (12)... 9

Úvod Webové stránky se tvoří pomocí souboru html, kde se používají základní značky, kterým se říká tagy. (1) O tom se ovšem zmíním až v obecné části této práce. Toto téma jsem si vybral, jelikož mně pomůže objasnit určité pravidla při tvorbě webu a také proto, že se tímto tématem budeme zaobírat v hodinách informatiky. Od práce si slibuji, že postupně (od začátečníka po pokročilého) vysvětlím určité zákonitosti a pravidla v této problematice. Zároveň bych si přál, kdyby má práce mohla být budoucím zdrojem studia mého nebo kohokoliv, koho toto téma zajímá. V 1. kapitole si řekneme, co budeme vlastně potřebovat, abychom mohli s tvorbou stránek vůbec začít. Další, 2. kapitola nám vysvětlí, co to jsou editory a jak nám pomáhají s tvorbou webu. Editory jsou velice důležité hlavně pro začátečníky, protože nám usnadňují práci. Následující kapitola vysvětlí základní pojmy jako jsou HTML nebo třeba tagy. Poté následuje 4. kapitola, která uvede příklady pro tvorbu se značkami, které jsou nezbytně nutné, abychom jsme mohli vůbec něco napsat. Dále samozřejmě rozvine téma a vysvětlí např. jak nastavit barvu a velkost písma nebo třeba barvu pozadí. V další, páté, kapitole popíšu, jak nahrát stránky na server, aby si je mohl vůbec někdo přečíst. Šestá kapitola se věnuje správě souborů, sedmá JavaScriptu, který nám zkvalitní webové stránky. Poslední kapitola má za úkol informovat o existenci CSS stylů. Těmi se však příliš zabývat nebudu. Roman Lamberský 1

1. Co budeme potřebovat? 1.1. Poznámkový blok (1) Poznámkový blok je jednoduchý textový editor obsažený v Microsoft Windows, který ke své činnosti využívá třídu EDIT zabudovanou v operačním systému. Výsledný soubor má typickou příponu.txt. Neobsahuje žádné formátovací znaky ani styly, což činí tento program vhodný pro editaci souborů, které budou používány v prostředí DOS. (2) 1.2. Webový prohlížeč (1) Můžeme používat například Internet Explorer, Chrome, Firefox, Mozillu, Operu, Safari nebo jiné prohlížeče. Obrázek 1: Google Chrome (11) 2. HTML editor Pro začátečníky se doporučuje vytvářet webovou stránku v tzv. HTML editoru, což je vlastně program určený k tomu, aby nám usnadnil práci s tvorbou. Typickým příkladem může být například program PS Pad nebo Microsoft Frontpage. 2.1. Vizuální HTML editor Tento druh HTML editoru funguje velmi podobně jako např. Word. Tento HTML editor nám po napsání určitého prvku automaticky vytvoří kód. Výhodou je, že v tomoto případě nemusíte vůbec umět HTML značky. (6) 2.2. Ruční HTML editory V ručním editoru se zapisuje značka po značce. Výhodou je, že je tento editor přehlednější než ten vizuální. (6) Roman Lamberský 2

2.3. Který editor je tedy lepší? Vizuální editor je lepší pro tvorbu amatérských stránek a pro ty koho nebaví učit se HTML. V ručním editoru máte vše ve svých rukách a je přehlednější. Musíte se však naučit HTML. (6) 3. Co to vlastně HTML je? HTML je klasický textový soubor, který má vždy nějakou příponu. Pro začátečníky bude zatím stačit přípona htm nebo html. (3) Nejdříve musíte vytvořit nový neformátovaný textový soubor (např. v poznámkovém bloku, hlavně ne ve wordu a jiných podobných souborech), napíšete do něj například: tohle je html soubor, uložíte ho třeba jako stranka.htm nebo html a otevřete ho v prohlížeči. Potom se už ukáže libovolný text, který jsme do něj napsali (v našem případě tohle je html soubor). (3) 3.1. Tagy Tag je údaj (značka), která určuje, jak bude daný dokument vypadat, jak bude upraven. Výhodou je, že když se spletete v zadávání tagu, prohlížeč jej ignoruje a pokračuje dál. Nemůže se nám tedy stát, že kvůli jediné chybě v zadávání tagu nebude načten celý dokument. Tagy v HTML musíme uzavřít do znaků < a >, kde < značí začátek dokumentu a > potom jeho konec. Tagy píšeme kombinací kláves Ctrl + Alt + požadovaný znak. Například tag pro tučné písmo vypadá takto: < b>...</b>. Text mezi těmito dvěma znaky bude tučný. Pokyn pro vložení obrázku pak takto: <img src="obr.gif">. (4) 3.1.1. Párové tagy Tagy jsou ve většině případů ve dvojicích (<něco> a </něco>), kde první tag se dává na začátek něčeho a ten druhý to něco uzavírá. Lomítko značí, že se jedná o uzavírací tag. Například <head> začíná hlavičku a </head> ji končí. (1) 3.1.2. Nepárové tagy Kromě párových tagů existují ještě tagy nepárové, které nemají uzavírací tag. Tyto tagy ale nejsou tak časté jako tagy párové Například <img> je tag pro obrázek a nic jako </img> v HTML není. (1) Roman Lamberský 3

4. Příklady Napsáním <html> začíná dokument a </html> dokument končí, <head> a </head> značí začátek a konec hlavičky, která se sice nezobrazí, ale zahrnuje v sobě některé důležité údaje, například <title> a </title>. Tyto dva tagy označují název dokumentu. (1) Co je mezi <body> a </body>, se bude zobrazovat. <body> je tag, kterým začíná vlastní tělo dokumentu. (1) 4.1. Základní velikost písma Tag <BASEFONT SIZE="x"> značí základní velikost písma (1 až 7) pro celou stránku. (8) 4.2. Titulek Hlavním tagem pro titulek je párový tag <title> a </title>. Text mezi nimi bude chápán jako titulek. (1) 4.3. Změna vzhledu Tag <h1> a </h1> vymezuje nadpis první úrovně, <h2> a </h2> potom nadpis druhé úrovně. Dá se použít až šest úrovní nadpisů (tedy <h1>, <h2> až <h6>). (1) Poté <p> a </p> začíná a končí odstavec. Tento tag se používá asi nejvíce. Když skončí, tak prohlížeč automaticky zalomí řádek a vytvoří vertikální mezeru. (1) Text mezi tagy <b> a </b> bude tučný, <i> a </i> označuje kurzívu, <u> a </u> zase podtržení textu. (1) Párový tag <small> a </small> zmenší písmo o jeden stupeň. Lze ho použít i několikrát za sebou pro zmenšení o víc stupňů. Například takto: <small><small>...</small></small>. Stejný princip má i párový tag big. (1) Dvojice tagů <span> a </span> vymezuje nějak odlišný text. Například po napsání <span style="color: red">, </span> má daný 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. (1) Tag<br> zalomuje řádky, říká se mu měkký enter. Text po tomto nepárovém tagu bude pokaždé začínat na novém řádku, ale nikoliv na novém odstavci. Musíme si ale dát pozor na to, že tento tag je nepárový, a tudíž nemá žádné </br>. (1) Roman Lamberský 4

4.4. Odkazy Tag <a href="adresa">text odkazu </a> je tag, kde text (nebo obrázek) mezi těmito dvěma tagy se zobrazí jako text odkazu. (1) 4.5. Obrázky Obrázek se do dokumentu vloží nepárovým tagem <img src="obrázek.gif">. (1) 4.5.1. Rozměry obrázku Na konec tagu (viz o dva řádky výše) se ještě napíše width="..." a height="...". Width značí šířku obrázku a height jeho výšku. Takto jednoduše se tedy dají nastavit rozměry obrázku. 4.5.2. Titulek Titulek zadáme tím, že na konec tagu obrázku (viz kapitola 4.3) napíšeme alt="název obrázku". 4.6. Čáry Horizontální čára se dá vložit tagem <hr>. Má to nějaké atributy, které nastavují šířku, zarovnání a barvu. (1) 4.7. 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 <p style="text-align: center;" > je zarovnaný na střed. (1) 4.8. Pozadí 4.8.1. Pozadí ve formě obrázku Všechny tagy pro tvorbu pozadí začínají <body...(body vždy začíná a končí obsah dokumentu), u pozadí tvořeného obrázkem se pak musí za body napsat ještě background. Zadáme tedy <body background="...gif">. 4.8.2. Barevné pozadí Pro barvu se musí pro změnu za body napsat bgcolor. Například, když zadáme <body bgcolor="red" text="blue">, tak bude pozadí červenou barvou a text bude černý. Roman Lamberský 5

4.9. Barvy V HTML se dá použít 16 základních barev. Každá barva má nějaký svůj kód podle kterého se dají barvy nastavit. Většina kódů je určitá barva v angličitně (např. červená - red). Je však dávat si pozor, protože některé barvy mají svůj speciální kód. U každé barvy lze nastavit určitý odstín, takže celkový počet použitelných barev se vyšplhá na 216. 4.10. Tabulka Pro tabulku je třeba znát 3 základní tagy. Tím prvním je párový tag <table>, který začíná a končí tabulku. Dalším tagem je párový <tr>, který začíná a končí řádek tabulky. Posledním je tag <td>, který je tagem buňky tabulky. Mezi tagy <td> a</td> se dá obsah buňky. (1) 4.11. Rámy Párový tag <FRAMESET> a </FRAMESET> v záhlaví HTML stránky a definuje prvky rámu, <FRAMESET COLS="x,x"> zase jejich šírku v pixelech nebo procentech a nakonec <FRAMESET ROWS="x,x"> jejich výšku. (8) 4.12. Záložky Záložky na webových stránkách slouží k tomu, aby po kliknutí na ně skočil obraz automaticky na místo na stránce, kde se vyskytuje daná kapitola. Má to následující styl zápisu: <a name="jméno záložky"></a>. Od klasického odkazu se liší tím, že neobsahuje atribut href. (1) 5. Jak nahrát stránky na server? 5.1. Co to je FTP FTP protokol je určen pro předávání souborů ze serveru a na server. Také se dá použí přímo pro práci a editaci souborů přímo na serveru, pokud na něm běží FTP. (7) Roman Lamberský 6

5.2. Nahrání na server Obrázek 2: FTP (13) Stránky lze nahrát na server několika způsoby. Tím asi nejjednodušším způsobem je použít Total Commander a přes FTP stránky nahrát na webový server. (5) K tomu, abyste se mohli připojit k webserveru pomocí FTP potřebujete znát následující 3 údaje: hostitelský PC, login a heslo. Nové FTP si zvolíme stisknutím tlačítka FTP. (5) Klikneme na Nové připojení a vyplníme údaje, které ve formuláři dostaneme od provozovatele webhostingu. Odsouhlasíme stisknutím tlačítka OK. V horním menu Konfigurace - Nastavení - FTP si můžete nastavit další podrobnosti, například, kde se mají FTP stránky otevírat. A poté si můžeme nastavit i některé další věci. (5) Nyní už proces je poměrně jednoduchý. Stiskneme FTP, zvolíme název FTP připojení a dáme připojit. Přetažením zkopírujeme soubory do příslušného adresáře. (5) 6. Správa souborů 6.1. Jak pojmenovat HTML soubory? Když pojmenováváme html soubory, měli bychom se řídit dle následujících zásad. Jednak bychom neměli v názvech souborů používat češtinu. To však neznamená, že ho nemůžeme pojmenovat českým slovem, ale že nemáme používat diakritická znaménka. Dále se doporučuje nepoužívat mezery. Ty musíme nahradit řetězcem "%20". Lepší je ale mezeru nahradit znakem minus. Dále se nesmí v názvech používat znaky / \ * :? # < >. Dále je dobré psát všechna písmena malá. To ale není povinné, jen doporučené. (1) Roman Lamberský 7

6.2. Složky Soubory webu lze ukládat do adresářů, co už umíme, jelikož je to stejný princip jako ukládání normálních souborů. Všechny soubory na serveru bychom měli mít uložené v jednom adresáři. Dále je pak zařazujeme do jednotlivých podadresářů. (1) Pro adresáře existuje pár rad, kterých bychom se měli držet. Pro jména adresářů platí totéž, co pro jména souborů. Měli by se psát bez mezer, háčků atd. Vlastně podobná pravidla, které jsou popsány v kapitole 5.1. Zde to však ale nejsou pravidla, ale pouhá doporučení. (1) Není chybou nechat všechny soubory ve stejném adresáři. Potom se ale může objevit problém, že adresáře s mnoha položkami se pomalu načítají. A hlavně, rozdělení do podadresářů je samozřejmě důležité proto, abychom se v tom poté vyznali. (1) 6.3. Relativní a absolutní odkazy Jako absolutní se označuje ta adresa, která se po zadání do prohlížeče zobrazí. Této adrese říkáme URL. Jako relativní se označuje ta adresa, která obsahuje jméno souboru. (1) Častěji se do HTML stránek odkazy relativní v rámci jednoho webu. Je to dobré k tomu, že můžete množinu několika stránek přenést někam třeba na disketě a všechny odkazy budou fungovat. (1) Absolutní odkazy je nutné použít všude jinde, kde se odkazovaná stránka nachází na jiném serveru. (1) 6.4. Domácí kopie Není dobré, když budete mít aktuální verzi stránek jenom na Internetu. Hlavně kvůli zálohování je dobré mít na svém počítači kopii stránek. (1) 6.5. Startovní soubor Každý server musí mít nějaký startovací soubor. Nejdříve si od správce serveru musíme zjistit, jak se má soubor jmenovat. Takto musíme pojmenovat soubor se svou hlavní stránkou. (1) 7. JavaScript JavaScript je skriptovací jazyk, který umožňuje vytvořit hodiny, hodnotit data ve formuláři, počítat, dynamizovat data, umožňuje tvorbu všemožných prvků k oživení webu, Roman Lamberský 8

přes blikající texty po jednoduché hry. Základem dynamického webu je právě JavaScript. (9) 7.1. Jak vložit skript? Obrázek 3: JavaScript (12) Pomocí tagů vložíme skript mezi párový tag <script> a </script>. Cokoliv co napíšeme mezi tyto dva tagy bude napsáno v jazyce JavaScript. Normální zápis zapíšeme tak, že mezi tagy napíšeme document.write("nějaký text"). Hlavně nesmíme zapomenout dát daný text do uvozovek. (1) 7.2. Proč zapisovat obyčejný text JavaScriptem? Na první pohled by se mohlo zdát zbytečné zapisovat obyčejný text JavaScriptem a ne klasickým HTML. Ovšem tento zápis je důležitý jako základ pro další práci s JavaScriptem. (1) 7.3. Proměnné Mezi <script> a document.write(...) se může zadat ještě proměnná, například můžeme napsat var x = "obsah proměnné". Názvem proměnné může být skoro libovolné slovo. Proměnná použitá v příkladu má jméno x. Do proměnné x je načtena hodnota "obsah proměnné", která je dalším příkazem document.write zapsána do proudu dokumentu. (1) Ovšem počítání s proměnnými je už docela složitá záležitost. Proto se o nich zmiňuji pouze okrajově. Roman Lamberský 9

7.4. Textové efekty 7.4.1. Alert Jedním ze zajímavých efektů je upozorňovací okénko s libovolným textem, který se zapisuje mezi párový tag <script> a </script>. Konkrétně má tvar alert("libovolný text") (1) 7.4.2. Prompt Tento efekt se používá, který vyžaduje vstup uživatele pouze po vložení určitého znaku. Zapisuje se opět mezi <script> a </script>. Do prvního řádku vložíme x=prompt("nějaký příkaz, například Zadej svoji adresu!"). Do druhého řádku potom zapíšeme document.write ("například Tvoje adresa tedy je"). A nakonec do posledního řádku potom vložíme document.write(x). (1) 8. CSS styly Obecně řečeno, CSS je nějaký zápis, který určuje vzhled (barvy, dekorační obrázky, rozmístění prvků) HTML dokumentu. HTML dokumentu můžeme různými CSS soubory zajistit různé vhledy a naopak různým HTML souborům můžeme pomocí různých CSS souborů zajistit stejný vzhled. (10) 8.1. Kdy používat CSS? CSS se používá většinou pokud chcete vytvořit nějaký zajímavější formát, který se nedá udělat normálně. CSS je závislá na HTML, takže ho musí používat pouze uživatelé znalí HTML. Ve většině případů se ale používá radši HTML. 8.2. Co z toho tedy plyne Následující řádky měly za cíl přiblížit problematiku CSS stylů a informovat o tom, že vůbec něco takového existuje. Jinak si ale myslím, že pro začátečníky je zcela zbytečné se CSS učit, jelikož jednoduchá webová stránka se bez toho zcela jistě obejde. Závěr V této práci jsem nastínil základní pravidla pro práci v HTML a také jak se pracuje se speciálními značkami, které jsou potřebné pro tvorbu jakéhokoli textu v HTML. Nejdříve jsem představil, jak se pracuje s editory, co potřebujeme na začátek, uvedl jsem Roman Lamberský 10

základní příklady tagů, které jsou nejdůležitější pro tvorbu webu, dále potom, jak se nahrávají stránky na server nebo třeba jak se spravují soubory. Poté jsem se ještě zmínil o JavaScriptu a o CSS stylu. Tyto dvě kapitoly byly ale jen základ, jelikož pracovat s nimi je poměrně složité. Doufám, že to alespoň trochu může posloužit jako přírůčka pro začátečníky, kteří se rozhodli, že si udělají nějakou svoji webovou stránku. Myslím, že tvorba seminární práce byla celkem zajímavá zkušenost, jelikož jsem tak dlouhou práci ještě nedělal a doufám, že mně alespoň trochu poslouží jako inspirace, kdybych měl psát nějakou jinou práci. A také bude určitě výhodou, že příště už budu mít alespoň nějaké zkušenosti s psaním dlouhé práce, které se budou zcela jistě hodit. Rejstřík <img>, 3 adresáře, 8 bgcolor, 5 CSS, 10 FTP, 6 HTML, 3 HTML editor, 2 kód, 2 Poznámkový blok, 2 Proměnné, 9 PS Pad, 2 skriptovací jazyk, 8 Tagy, 3 textový soubor, 3 Titulek, 4 Total Commander, 7 upozorňovací okénko, 10 značky, 2 Roman Lamberský 11

Zdroje (1) DUŠAN JANOVSKÝ. Jak psát web [online]. 2013 [cit. 2013-11-30]. Dostupné z: http://www.jakpsatweb.cz/ (2) Poznámkový blok. Wikipedia [online]. 2013 [cit. 2013-11-30]. Dostupné z: http://cs.wikipedia.org/wiki/pozn%c3%a1mkov%c3%bd_blok (3) Co to vlastně budeme dělat a proč: Co je HTML soubor. Jak dobře začít s tvorbou webu - po lopatě [online]. 2013 [cit. 2013-11-30]. Dostupné z: http://polopate.jakpsatweb.cz/?page=jak (4) Co jsou to Tagy. UČEBNICE HTML [online]. 2013 [cit. 2013-11-30]. Dostupné z: http://www.ucebnicehtml.wz.cz/cojsoutotagy.html (5) Jak "dostat" stránky na Internet. Banan.cz [online]. 2013 [cit. 2013-12-01]. Dostupné z: http://www.banan.cz/serialy/javaserver-page-a-serverlety/jak-dostat-strankyna-internet (6) HTML editory. Tvorba-webu.cz [online]. 2008 [cit. 2013-12-07]. Dostupné z: http://www.tvorba-webu.cz/html/html_editory.php (7) Co je to FTP (File Transfer Protocol)?. Artic Studio [online]. 2011 [cit. 2013-12- 07]. Dostupné z: http://www.artic-studio.net/slovnicek-pojmu/ftp-protokol/ (8) Tagy používané připsaní www stránek v jazyce HTML. Základní škola Dobřichovice [online]. 2013 [cit. 2013-12-08]. Dostupné z: http://www.zsdobrichovice.cz/programy/informatika/tagy.htm (9) JavaScript. Tvorba-webu.cz [online]. 2008 [cit. 2013-12-08]. Dostupné z: http://www.tvorba-webu.cz/javascript/ (10) Co je CSS. Pěstujeme web [online]. 2010 [cit. 2013-12-08]. Dostupné z: http://www.pestujemeweb.cz/obsah/css/co-je-css.php (11) ČLÁNKY - ipad: Google Chrome 30 optimalizovaný pro ios 7 dorazil do App Store. Tabletnet.cz [online]. 2013 [cit. 2013-12-08]. Dostupné z: http://tabletnet.cz/ipad/2578-google-chrome-30-optimalizovany-pro-ios-7-dorazil-do-appstore (12) What is Javascript?. PlanetSourceCode [online]. 2013 [cit. 2013-12-08]. Dostupné z: http://www.planet-source-code.com/vb/default.asp?lngwid=14 (13) Ftp made simple. KdmcBerkeley [online]. 2011 [cit. 2013-12-08]. Dostupné z: http://multimedia.journalism.berkeley.edu/tutorials/ftp/ Roman Lamberský 12