1 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é 20122 Prohlášení: Prohlašu...
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: Programování webových stránek. 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.
2.
3.
Co budeme potřebovat? .................................................................................................. 2 1.1.
Ú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
Programování webových stránek
Roman Lamberský
1.
Programování webových stránek
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
Programování webových stránek
Roman Lamberský
2.3.
Programování webových stránek
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>...... Text mezi těmito dvěma znaky bude tučný. Pokyn pro vložení obrázku pak takto: . (4) 3.1.1. Párové tagy Tagy jsou ve většině případů ve dvojicích ( a ), 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 začíná hlavičku a 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 je tag pro obrázek a nic jako v HTML není. (1)
Roman Lamberský
3
Programování webových stránek
Roman Lamberský
4.
Programování webových stránek
Příklady Napsáním začíná dokument a dokument končí, a
značí začátek a konec hlavičky, která se sice nezobrazí, ale zahrnuje v sobě některé důležité údaje, například a . Tyto dva tagy označují název dokumentu. (1) Co je mezi a , se bude zobrazovat. je tag, kterým začíná vlastní tělo dokumentu. (1)
4.1.
Základní velikost písma
Tag 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 a . Text mezi nimi bude chápán jako titulek. (1)
4.3.
Změna vzhledu
Tag
a
vymezuje nadpis první úrovně,
a
potom nadpis druhé úrovně. Dá se použít až šest úrovní nadpisů (tedy
,
až
). (1) Poté
a
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 a bude tučný, a označuje kurzívu, a zase podtržení textu. (1) Párový tag <small> a 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>..... Stejný princip má i párový tag big. (1) Dvojice tagů <span> a vymezuje nějak odlišný text. Například po napsání <span style="color: red">, 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 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é . (1)
Roman Lamberský
4
Programování webových stránek
Roman Lamberský
4.4.
Programování webových stránek
Odkazy
Tag text odkazu 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 . (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 . 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
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í
. 4.8.2. Barevné pozadí Pro barvu se musí pro změnu za body napsat bgcolor. Například, když zadáme , tak bude pozadí červenou barvou a text bude černý.
Roman Lamberský
5
Programování webových stránek
Roman Lamberský
4.9.
Programování webových stránek
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
, který začíná a končí tabulku. Dalším tagem je párový
, který začíná a končí řádek tabulky. Posledním je tag
, který je tagem buňky tabulky. Mezi tagy
a
se dá obsah buňky. (1)
4.11.
Rámy
Párový tag v záhlaví HTML stránky a definuje prvky rámu,