Výukový materiál KA č.4 Spolupráce se ZŠ Modul: Téma workshopu: Výpočetní technika Co je to internet? Jak si udělat vlastní www stránku? Vypracovala: Ing. Lenka Hellová Termín workshopu: 30. říjen 2012 1. Anotace tématu: Cílem workshopu je ukázat návštěvníkům ze základních škol, jak vytvořit jednoduché vlastní webové stránky. Práci by měli zvládnout i žáci neznalí vytváření internetových stránek, kteří neovládají ani trochu jazyky pro tvorbu internetových stránek. Zaměříme se na základy značkovacího jazyka HTML 4.01. 2. Základní pojmy: - Tvorba www stránek - PSPad editor - Náhled webové stránky - Jazyk HTML - Pojem tag, jak vložit znaky < > - Tagy párové a tagy nepárové - Formátování písma, nadpisy - Definice barev v HTML SPŠ a VOŠ Písek, Karla Čapka 402, 397 11 Písek 1
3. Výklad: V dnešní době jsou internetové stránky důležitou součástí našeho života. Pokud člověk neumí pracovat s internetem, stává se zaostalým a nemoderním. K internetu má dnes přístup skoro každý. Jak ale vlastní web funguje a jak je možné si vytvořit stránky vlastní? PSPad editor Nejprve se musíme seznámit s prostředím, v němž budeme pracovat. Základem je PSPad editor. Je to program sloužící právě pro tvorbu internetových stránek. Neliší se mnoho od obyčejného poznámkového bloku, ale má oproti němu jisté výhody. Program má v sobě zabudovány HTML syntaxe a tagy, které jsou velmi užitečné, zvláště pokud je ještě zcela neznáme. Program je ke stažení zdarma. Pod nabídkou Všechny programy si spustíme PSPad editor jeho symbolem je hrot psacího pera. Každý nově otevřený soubor v PSPadu je automaticky formátu txt, což pro náš účel není správné. Klikneme si tedy nasymbol prázdného listu, vybereme soubor nový a v nabídce vybereme typ html. Všimněte si, že PSPad nám automaticky na html stránce již vyplnil povinné tagy. Abychom si lépe rozuměli, očíslujeme si ještě řádky: Horní lišta Zobrazit Čísla řádků. Takto jsme učinili první správný krok. Obrazovka vypadá takto: Pokud by bylo stažení PSPadu problém, můžete si zdrojový kód psát do Poznámkového bloku, který najdete v nabídce Všechny programy - Příslušenství. Teď se můžeme věnovat základům značkovacího jazyka HTML. SPŠ a VOŠ Písek, Karla Čapka 402, 397 11 Písek 2
HTML HLML (Hyper Text Markup Language) je značkovací jazyk pro hypertext, který jako jeden z mnoha, umožňuje publikaci dokumentů na webu. Jazyk historicky vychází ze značkovacího jazyka SGML1. Příkazy jazyka se ukládají do tzv. tagů. Každý tag je tvořen příkazem umístěným do špičatého znaménka menší < a větší >. Tyto znaky vložíte na klávesnici stiskem pravé klávesy ALT a < >. Mezi těmito znaky je vlastní text tagu. Jednotlivé tagy mohou obsahovat atributy, které tagu udávají jeho chování. Tagy se dělí na párové a nepárové. Párový tag tvoří dvojici se stejným obsahem na začátku i na konci, jen ukončující tag má navíc ještě znak /. Většina tagů je párových, např.: <html> <head> Údaje uvedené v hlavičce se na webové stránce nezobrazují </head> <body> V body dochází na vlastní tvorbu, na zobrazení na stránce. </body> </html> Příkladem nepárového tagu je <br> (ze slova break), který způsobí odřádkování textu na www stránce, jako kdybychom v klasickém textovém editoru použili klávesu [Enter]. I když si ve zdrojovém kódu v PSPadu kvůli přehlednosti jednotlivé tagy odřádkujeme, při www náhledu se bez použití <br> text neodřádkuje! Formátování písma Párový tag <font> můžeme použít pro nastavení písma. Používá atributy: - face= Arial - uvádí typ použitého písma - size= 5 - uvádí velikost písma v rozmezí od jedné do sedmi. Jednička je písmo nejmenší velikosti. - color= orange specifikuje barvu písma, automatická barva písma je černá 1 SGML - (Standard Generalized Markup Language), značkovací metajazyk pro definici značkovacích jazyků SPŠ a VOŠ Písek, Karla Čapka 402, 397 11 Písek 3
Náhled F10 nám zobrazí: Nadpisy Nadpisy se zapisují pomocí párových tagů < h1>,< h2>,< h3>,< h4>,< h5> a <h6>. <h1> je nadpis první úrovně, je největší, obvykle by měl obsahovat název celé stránky a na stránce by se měl vyskytovat pouze jednou. Po něm následuje < h2> pro hlavní oddíly, < h3> pro pododdíly atd. Velikost nadpisů postupně klesá. Pomocí nadpisů lze stránku pěkně strukturovat a učinit přehlednou. Ukázka zdrojového kódu: SPŠ a VOŠ Písek, Karla Čapka 402, 397 11 Písek 4
<h1>nadpis úrovně číslo jedna</h1> <h2>nadpis úrovně číslo dva</h2> <h3>nadpis úrovně číslo tři</h3> <h4>nadpis úrovně číslo čtyři</h4> <h5>nadpis úrovně číslo pět</h5> <h6>nadpis úrovně číslo šest</h6> Zobrazí se nám: Předformátovaný text Jak již bylo uvedeno, jazyk HTML nerespektuje odřádkování, které provedeme pouhým stiskem klávesy [ENTER ]. Z toho důvodu je dobré používat párový tag <pre> (preformatted), který nám zobrazí na stránce text a jeho mezery přesně tak, jak jsme je zadali do zdrojového kódu. Příklad použití: <body bgcolor="yellow"> <pre><font face="times New Roman" size="10" > Tento text pomocí je tagu předformátovaný pre!!! </font></pre></body> SPŠ a VOŠ Písek, Karla Čapka 402, 397 11 Písek 5
Definice barev v HTML V jazyce HTML se volba barvy většinou zapisuje pomocí atributu color. Každá barva se dá složit ze tří základních barev červené zelené modré, neboli anglicky Red Green Blue. Výsledná barva vznikne různým zastoupením těchto tří barev RGB spektra. Máme v podstatě čtyři možnosti zápisu barev. 1. Nejjednodušší je zápis slovně - anglicky. Funguje ale jen pro základní definované barvy. Např. modré pozadí www stránky se definuje přímo uvnitř tagu <body> následovně: <body bgcolor= blue > 2. Dále se používá tzv. RGB hodnota, která udává zastoupení jednotlivých barev od 0 do 255. Např. zelené písmo má 0 Red, plných 255 Green, 0 Blue: <font color= rgb(0,0,255) > 3. Podobně lze použít zastoupení jednotlivých barev RGB spektra pomocí procent, přičemž bílá barva se do p59slu3n0ho tagu zapíše např. jako: rgb(100%,100%,100%), černá rgb(0%,0%,0%). 4. Nejpřesnější je zápis pomocí hexadecimální soustavy vždy dva znaky zastupují spektrum RRGGBB. Před vlastním kódem musí být uveden znak #. <font size="100%" color="#a008000"> Dá ve výsledku šedohnědé písmo. </font> SPŠ a VOŠ Písek, Karla Čapka 402, 397 11 Písek 6
Příklad zdrojového kódu pro použití barev: Náhled F10 nám zobrazí: SPŠ a VOŠ Písek, Karla Čapka 402, 397 11 Písek 7
4. Doporučená literatura: 1. Broža, Petr: Tvorba WWW stránek pro úplné začátečníky páté aktualizované vydání, vydalo nakladatelství Computer Press,a.s., Brno 2006 2. Hlavenka, Jiří a kolektiv: Vytváříme WWW stránky a spravujeme moderní WebSite sedmé aktualizované vydání, vydalo nakladatelství CP Books,a.s., Brno 2005 5. Webové stránky: www.jakpsatweb.cz www.sps-pi.cz 6. Odkazy a kontakty: hellova@sps-pi.cz 7. Přílohy: SPŠ a VOŠ Písek, Karla Čapka 402, 397 11 Písek 8