Výukový materiál KA č.4 Spolupráce se ZŠ

CZ.1.07/1.1.14/01.0032

KA4 – Spolupráce se ZŠ

2012 - 14

Výukový materiál – KA č.4 Spolupráce se ZŠ Modul:

Výpočetní technika

Téma workshopu:

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

CZ.1.07/1.1.14/01.0032


2012 - 14

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.


2

CZ.1.07/1.1.14/01.0032


2012 - 14

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ř.: Údaje uvedené v hlavičce se na webové stránce nezobrazují V body dochází na vlastní tvorbu, na zobrazení na stránce. … Příkladem nepárového tagu je
(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í
text neodřádkuje!

Formátování písma Párový tag můžeme použít pro nastavení písma. Používá atributy:

1

-

face=“Arial“ - uvádí typ použitého písma

-

size=“5“

-

color=““orange“ – specifikuje barvu písma, automatická barva písma je černá

- uvádí velikost písma v rozmezí od jedné do sedmi. Jednička je písmo nejmenší velikosti.

SGML - (Standard Generalized Markup Language), značkovací metajazyk pro definici značkovacích jazyků


3

CZ.1.07/1.1.14/01.0032


2012 - 14

Náhled F10 nám zobrazí:

Nadpisy Nadpisy se zapisují pomocí párových tagů < h1>,< h2>,< h3>,< h4>,< h5> a
.
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:


4

CZ.1.07/1.1.14/01.0032


2012 - 14

Nadpis úrovně číslo jedna

Nadpis úrovně číslo dva

Nadpis úrovně číslo tři

Nadpis úrovně číslo čtyři

Nadpis úrovně číslo pět

Nadpis úrovně číslo šest
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í: <pre> Tento text je předformátovaný pomocí tagu pre!!!


5

CZ.1.07/1.1.14/01.0032


2012 - 14

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 následovně: 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: 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 #. Dá ve výsledku šedohnědé písmo.


6

CZ.1.07/1.1.14/01.0032


2012 - 14

Příklad zdrojového kódu pro použití barev:

Náhled F10 nám zobrazí:


7

CZ.1.07/1.1.14/01.0032


2012 - 14

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: [email protected]

7. Přílohy:


8

Výukový materiál KA č.4 Spolupráce se ZŠ

Recommend Documents

.

Nadpis úrovně číslo jedna

Nadpis úrovně číslo dva

Nadpis úrovně číslo tři

Nadpis úrovně číslo čtyři

Nadpis úrovně číslo pět

Nadpis úrovně číslo šest