Skripta pro Kurz Tvorby www stránek Prokop zelený, DiS. Altus Training Center, s. r. o.
Základy tvorby webu Tvorba webových stránek má několik předpokladů, jsou to: 1, Počítač, na kterém běží alespoň nějaký jednoduchý textový editor (Poznámkový blok). 2, Webový prohlížeč, nutná součást pro vyzkoušení a kontrolu stránky. 3, Připojení k internetu (není nutné pro tvorbu) – nutné pro publikování souborů. Musíte mít o čem psát. Toto je jeden z nejdůležitějších bodů – nelze vytvořit webovou stránku, ve které nevíte o čem budete psát. Vždy by první měla být příprava podkladů (fotky, texty apod.) a teprve poté začít s tvorbou stránky. Na internetu je vždy nejdůležitější obsah stránky. Pokud neumíte kopírovat soubory nebo nevíte, co je adresář (složka), nepouštějte se do tvorby stránek.Minimální požadované znalosti jsou: základní znalost prostředí MS Windows, uživatelská znalost MS Word (MS Excel) Další dovednosti, např. práce s grafikou jsou výhodou pro absolvování kurzu.
Teorie tvorby www Vlastní webové stránky jsou dnes nutnou vizitkou každé firmy nebo jedince. Hlavním cílem by mělo být množství kvalitních informací, které přilákají návštěvníky. Stránky by měly být přehledné a snadné na obsluhu. Při tvorbě webových stránek rozlišujeme tři základní kroky. Příprava webdesignu – obvykle práce grafika, vyžaduje nějaký grafický software (GIMP, Photoshop, CorelDraw atd.) spočívá ve vytváření tlačítek, pozadí stránky animovaných bannerů apod.
Kódování – kodér (programátor) z dodaných grafických podkladů skládá celou webovou stránku. Vkládá odkazy, propojení stránek nastavení jazyka, pracuje s CSS styly. Správa webu – posledním krokem je naplnění stránek, které již obvykle provádí provozovatel. Vkládání obrázků, textů, doplnění ceníků a kontaktních informací. V případě e-shopu, nebo velmi pokročilé stránky se pro správu používají tzv. administrátorské přístupy (většinou formulář umožňující editaci stránek). Jednoduché stránky lze editovat přímo v HTML kódu. Stránky by vždy měly být pravidelně aktualizovány!
Druhy software stránek
pro
tvorbu
www
Wordpad (Poznámková blok) – psaní kódu čistě textovou podobou. Výhodou ručního psaní kódu je „čistá“ stránka neobsahující žádné zbytečné části kódu. Freeware – existuje velké množství HTML editorů „zadarmo“ např. Golden HTML Editor. Výhodou free programů je komfortnější ovládání než v Pozn. bloku. Obvykle ale nenabízí tolik funkcí jako komerční programy. Komerční software – Adobe Dreamweaver, MS FrontPage atd. Špičkové produkty pro tvorbu webových stránek. Pro vytvoření jednodušší stránky není nutná žádná znalost HTML kódu a jen minimální znalost ovládání PC. Tento jednoduchý systém se nazývá WYSIWYG. WYSIWYG – What You See Is What You Get (to co vídíš to dostaneš) – vizuální způsob tvorby stránek (podobně jako psaní textu a vkládání obrázků ve wordu).
Zobrazení stránky při psaní kódu.
WYSIWYG – tvorba stránky vizuální podobou
Programový kód - HTML, CSS, JavaScript, PHP •
HTML – hyper text markup language (kód). Základní programovací jazyk pro tvorbu jednodušších webových stránek. V HTML vytváříme obsahovou stránku webu (texty + obrázky atd.) a neměli bychom ho využívat pro tvorbu vzhledu (designu stránky).
•
CSS – Cascading Style Sheets (Kaskádové styly) Technologie určená pro design stránek. V kaskádových stylech definujeme vzhled písma
(formátování), pozadí stránky a další grafické prvky. Výhodou CSS je snadná editace hlavně v případě rozsáhlejších webů. •
PHP (ASP) – personal home page / active server pages – Pokročilejší programovací jazyk vhodný pro tvorbu webových aplikací jako jsou E-shopy, dynamické stránky, vyhledávání atd.PHP je nutností např. pro zpracování formulářů, zápis z webu do databází, odeslání e-mailu ze stránek. PHP je pro určen pro systém Linux, ASP je pro Microsoft Windows.
•
Flash – (program Adobe Flash) je způsob vložení multimediálních prvků do stránek. Nejčastějším použitím jsou animované bannery. Flash je možné využít pro přehrávání videa a zvuku.
•
Java Script – programovací jazyk používaný pro doplňky stránek. Využívá se pro vkládání kalendáře, datumu a času, tlačítek, pokročilejší práci s obrázky. Doporučujeme nepoužívat JavaScript příliš často a mělo by být možné si obsah zobrazit i bez jeho použití. JS může být velmi užitečný, ale i velmi nebezpečný (např. umí přistupovat k systému PC – Windows a změnit ho).
•
FTP – File Transfer Protocol – přenos souborů od uživatele na server. Způsob jak publikovat vaše webové stránky.
Teorie grafiky –rozvržení stránky Jednotky pro definici velikosti stránky jsou pixely. Počet pixelů se nazývá rozlišení a určuje kvalitu obrazu. Existují dva způsoby nastavení stránky pro zobrazování na internetu: 1, Web se většinou tvoří na pevnou šířku stránky. Stránka je statická, nemění velikost, pouze se mění velikost oblasti mimo stránku. monitor: (bíle): 1280 x 1024 stránka (šedá): 900 x 1024 Monitor / stránka Na začátku bychom se měli rozhodnout, jakou šířku bude mít web, a připravovat pro ní grafické podklady. Je vhodnější používat menší šířku pro správné zobrazení i na straších monitorech. Příliš široká stránka je pro uživatel nepřehledná. Běžně se používá šířka webu 900 pixelů. Výška se musí měnit dynamicky podle obsahu. V případě delšího text se stránka automaticky prodlouží a zobrazí se svislý posuvník. 2, Proměnná velikost stránky (méně častá) – nastavení rozměrů v procentech (%). Stránka mění svojí šířku podle velikosti okna (monitoru). Tento způsob využíváme v případě textových stránek a nelze ho použít na obrázky, které jsou stejně široké jako stránka (velikost obrázku nelze definovat v procentech). Pro úpravy vzhledu stránky je výrazně doporučeno používat kaskádové styly.Výhoda používání kaskádových stylů spočívá v tom, že změna provedená na jednom subjektu se projeví na celém webu.
Základy HTML Pravidla HTML – tagy HTML jako programovací jazyk má svoje přesná pravidla, která se musí dodržovat. Budete-li psát kód textovou podobou dávejte si pozor na přesný zápis tagů včetně všech uvozovek, závorek a dalších znaků. HTML se skládá ze dvou druhů tagů, a to párových a nepárových. Párové značky jsou takové, které někde začínají a někde končí ( …). Nepárové pouze začínají např.: . Stránka začíná znaky a končí . Všechny ostatní prvky stránky musí být mezi značkami . Stránka se rozděluje na hlavičku a tělo. (head / body) Následuje tedy obsah hlavičky mezi html – obsahuje informace o nastavení stránky (jazyk, klíčová slova td.) Nadpis - - zobrazuje v liště název stránky – je obsažena v <head>. Následuje <body> obsah webové stránky (texty, obrázky) </body>. Čtení kódu probíhá ze shora po řádkách, co je výše, provede se dříve.<br />
<br />
Hlavička stránky – head Obsah hlavičky stránky obsahuje nastavení stránky, ale uživateli se nezobrazuje. Správné nastavení hlavičky je pro běh stránky nezbytně nutné. Stránka, myšleno hlavička musí obsahovat znakovou sadu,title, popis, keywords a robots popř. propojení na soubor CSS stylů. 1, Znaková sada dokumentu <meta http-equiv="Content-Type" charset=windows-1250"><br />
<br />
content="text/html;<br />
<br />
Měníme parametr CHARSET (character set=znaková sada) na konci tohoto příkazu. V případě použití češtiny ve stránkách používáme sady windows-1250 nebo UTF-8.<br />
<br />
Pro správné zobrazování diakritiky (háčky a čárky) je vložení tohoto řádku NUTNÉ. 2, Title <title>KURZYGRAFIKY.CZ Titulek stránky je výchozí název který se zobrazuje v záložce prohlížeče a v liště programů. Obvykle píšeme název firmy, nebo název webové stránky – titulek by neměl být příliš dlouhý. 3, Popis <meta name="Description" počítačové grafiky" />
content="Kurzy
v oblasti
Popis stránky by měl být stručný a výstižný (cca jedna věta). J vhodné se vyvarovat příliš obecných výrazů a snažit se vystihnout co nejlépe podstatu náplně stránek. 4,Klíčová slova <meta name="Keywords" content="kurzy grafiky, školení, počítačová grafika" /> Klíčová slova podobně jako popisek určují obsah stránek. Do tohoto tagu vypisujeme okolo šesti co nejkonkrétnějších slov, které nejlépe vystihují obsah stránky. Kl. slova se píší za sebe a oddělují se čárkou. Všechna slova mohou být v jednotném i množném čísle, mohou se skloňovat a být v různých pádech. Pro českou jazykovou verzi stránek by měla být nastavená česká klíčová slova, pro anglickou verzi anglická atd. Neměla by tedy česká stránka obsahovat např. anglické výrazy. 5, Roboti <meta name="robots" content="all, follow" /> Roboti jsou automatické programy, které prochází internetem, procházejí jednotlivé stránky a jejich obsah zaznamenávají do souhrnných databází (vyhledávačů). Tímto řádkem v kódu stránky říkáme robotů aby naší stránku navštívili indexovali (zapsali) její obsah a prošli další odkazy, které vedou na další podstránky. Některé firmy mají své vlastní roboty, kteří vyžadují speciální kód, např. Google a jeho Googlebot. Nastavení robotů může velmi pomoci návštěvnosti stránek.
6, CSS propojení Nastavení pro propojení na externí CSS soubor, který vytváří design stránky. Více v kapitole CSS – Kaskádové styly. Příklad kompletní hlavičky: <meta http-equiv="Content-Type" content="text/html; charset=windows-1250"> KURZY GRAFIKY.CZ <meta name="Description" content="Kurzy v oblasti počítačové grafiky" /> <meta name="Keywords" content="kurzy grafiky, školení, počítačová grafika" /> <meta name="robots" content="all, follow" />
Stránka HTML HTML kód vždy začíná tagem obvykle následuje hlavička obsahující celkové nastavení stránky, dále do kterého vkládáme náplň a na konci jsou všechny tagy uzavřeny. Při použití programů určených pro tvorbu webových stránek odpadá nutnost tuto základní strukturu vytvořit – program jí vytvoří automaticky. Základní struktura stránky: NADPIS texty, obrázky a další náplň stránek
Formátování v HTML Stránka Obsah webové stránky je vždy různý podle tématu, kterému se chce věnovat. Obecně se využívá několika základních prvků. Jsou to texty, obrázky a odkazy. Tyto tři základní součásti naleznete všude na internetu a s jejich pomocí lze jednoduchou stránku vytvořit. U všech objektů lze měnit jejich vlastnosti např. formátováním textu, změnou velikosti obrázku, nastavením cíle odkazu atd. Každá webová stránka obsahuje: 1, texty 2, obrázeky 3, odkazy 4, tabulky 5, formulář Všechny vlastnosti HTML prvku vpisujeme dovnitř závorek oddělené mezerou ve formátu:
Odstavec Odstavec (paragraph) je souvislý blok textu. Mezi odstavci je automatická mezera. Velmi dlouhé texty je vhodné členit do více tématicky odpovídajících odstavců pro snadnější čtení.
text odstavce
tag
ohraničuje text v odstavci. Vlastnosti: Zarovnání do bloku – píše se dovnitř závorky
, příkaz je align. Celý příkaz tedy vypadá následovně:
text odstavce
další příkazy pro zarovnání jsou center, left, right podle toho, jak odstavec potřebujeme naformátovat.
Nadpisy Nadpisy (hedings) jsou výrazně vyznačené části textu a měli by být obsaženy v každé stránce. Za každým nadpisem se automaticky vytvoří mezera pro odsazení od následujícího textu. Nejlepší využití nadpisů u článků je: 1, hlavní nadpis 2, podnadpis (někdy označováno jako perex) 3, text článku Využití nadpisů je velmi důležité pro správnou optimalizaci stránky.
NADPIS
Nadpisy se člení na šest základních úrovní H1 – H6 od největšího k nejmenšímu. Vzhled jednotlivých nadpisů je nutné měnit pomocí CSS. Zadání samostatného cvičení: Sestavte libovolnou HTML obsahující 3 články v řazení NADPIS, PODNADPIS, TEXT. Všechny odstavce jsou zarovnané do bloku. Texty je možné kopírovat z internetu, nebo z textového dokumentu (Word).
Písmo Změna formátování písma přímo v HTML kódu se realizuje pomocí tagu <span>, lepší způsob je formátovat pomocí CSS. <span style="color: black; font-family: Arial">upravovaný text kde vlastnost color je barva písma a font-family je řez (typ) písma. Další tagy pro formátování písma jsou značeny obdobně jako v textových editorech např. tučné (bold) písmo, které má být tučně Kurzíva – příkaztext Tučné písmo - text Přeškrtnuté -<s>text Podtržené -text Horní index -<sup>text Dolní index -<sub>text Čára - Čára je vhodným oddělením několika textů popř. odstavců. Vlastnost width ješířka čáry v pixelech, size je tloušťka čáry, color=barva, align=zarovnání čáry na obrazovce. Zadání samostatného cvičení: Vytvořte stránku obsahující červený text, napište do stránky H2O a 10 m2 včetně horních a dolních indexů.
Hypertextové
odkazy
Textový odkaz Text na odkaz První část odkazuje na stránku (cíl), druhá (target=”_blank” ),aby se otevřela v novém okně, následuje za závorkou text a následuje ukončení odkazu.
Vlastnosti odkazů – možnosti otevření target="_blank" – otevření cíle odkazu v novém okně (vhodné využít např. pro FOTOGALERIE).
Obrázky a multimediální prvky v HTML Vložení obrázku Obrázek musí být umístěn ve stejné složce, jako je index html. Pokud nechceme obrázek zdeformovat, pak zadáme pouze jeden rozměr, druhý se dopočítá. Pro názvy souborů je zakázáno používat diakritiku a speciální znaky, povolené je pouze podtržítko. Mezera se v HTML interpretuje jako %20, ale nemusí to fungovat vždy, takže radši mezery nepoužívat. HTML neumožňuje obtékání, ale rozvržení stránky se dá nahradit tabulkou.
Vlastnosti obrázku src=“cesta/nazev_obrazku.jpg“ – umístění obrázku relativně k INDEX.HTML border=“5“ – rámeček obrázku definován v pixelech width=“900“ – šířka (v pixelech) height=“50“ – výška (v pixelech)
Tvorba tabulek Základy tabulek
v
HTML
Tabulka – řádky:
sloupce
Sloupce jsou vždy uvnitř řádků. Zápis vypadá následovně:
první buňka
druhá buňka
Příkaz pro odsazení textu od všech vnitřních stěn tabulky je cellpadding="10" Mezery mezi buňkami je cellspacing=”10”
Vlastnosti tabulky, buňky width="900" – šířka tabulky border="1" – ophraničení tabulky align="center" – zarovnání celé tabulky, nebo obsahu bgcolor="#00CCFF" – barva pozadí tabulky, nebo buňky
Rozvržení stránky pomocí tabulek •
Layout (rozvržení) stránky pomocí tabulky
border="1"
align="center"
nadpis
menu
levé menu
obsah stránky
zápatí
Tvorba grafických podkladů a webdesignu Model HSB Tento model je založen na lidském vnímání barvy. Je to základní (výchozí) model pro počítačovou grafiku. V modelu HSB jsou barvy popsány pomocí tří základních charakteristik : Hue (odstín), Saturation (sytost), Brightness (jas).
Hue (odstín) Měří se jako poloha na barevném kole a vyjadřuje se ve stupních mezi 0° až 360°. Saturation (sytost) Sytost udává čistotu barvy v poměru šedé k odstínu barvy. Udává se v procentech od 0% (šedá) do 100% (plně sytá – čistá barva) Brightness (jas) Určuje světlost nebo tmavost barvy, měří se obvykle v procentech od 0% (černá do 100% (bílá). Většina grafických programů při výběru barvy vypisuje anotaci HTML – kód potřebný do webových stránek. Číslo barvy je možné jednoduchým způsobem zkopírovat a vložit do programu pro tvorbu webu.
Model RGB R = Red = červená G = Green = zelená B = Blue = modrá Velkou část viditelného spektra barev lze prezentovat mícháním červeného, zeleného a modrého světla. Běžné „bílé“ denní světlo se také skládá z těchto tří základních barev. V 17. stol. Isaac Newton poprvé dokázal rozložit denní (bílé) světlo na řadu barevných odstínů. Pokud složíme všechny tři barvy, dostaneme bílou. Proto se těmto barvám říká Aditivní. Barevný model RGB se používá hlavně při osvětlování, pro video, TV, kamery, digitální fotoaparáty a počítačové monitory. Každý obrazový bod v režimu RGB má přiřazeny tři hodnoty (pro každou barvu R, G, B) od 0 (černá) do 255 (bílá). Př.: čistá Červená - R = 255, G = 0, B = 0. Bílá - R = 255, G = 255, B = 255 Černá - R = 0, G = 0, B = 0. Pokud jsou všechny tři RGB hodnoty stejné, jedná se o odstín šedé. Doplňkové barvy (angl. Complement) Jsou barvy ležící naproti sobě na standardním barevném kole. Výsledná barva nesmí obsahovat svojí doplňkovou barvou. Pokud budeme chtít barvu azurovou nesmíme přidat žádnou červenou. Jsou to tři dvojice: Červená – Azurová Zelená - Purpurová Modrá – Žlutá Pro tvorbu webových stránek používáme zápis barvy v podobě šestimístného kódu: #00FF00 kde dvě hodnoty jsou pro R (0-99) druhé dvě pro G, a třetí pro B. Pro plnou barvu píšeme FF. Příklad: #0000FF (00 – žádná červená, 00 – žádná zelená, FF – čistá modrá). #00FFFF (00 – žádná červená, FF – čistá zelená, FF – čistá modrá) = čistá azurová. Samostatné zadání: napište HTML kód pro černou, bílou, šedou a žlutou barvu.
Velikost obrazu a rozlišení Velikost obrazu udáváme v počtu obrazových bodů. U velikosti obrazu určujeme jeho výšku a šířku. Jednotka Obrazové body je v počítačové grafice výchozí pro práci s obrázkem. Používáme jí hlavně pro zobrazení na monitoru (obrazovce). Rozměry obrazovky jsou vždy udávány v obrazových bodech. Obrazový bod = angl. PIXEL MP = MegaPixel – milión obrazových bodů Př.: Běžný 15˝ monitor = 800 x 600 obr. bodů Běžný 17˝ monitor = 1024 x 768 obr. bodů - nejčastější Běžný 17˝ LCD = 1280 x 1024 obr. Bodů Pro lepší představu uvádím nejčastější rozměry fotografií pořízených digitálním fotoaparátem. Hodnoty jsou pouze orientační, u některých modelů se mohou lišit. fotoaparát = obrázek (obr. bodů) 5MP = 2560 x 1920 4MP = 2304 x 1728 3MP = 2048 x 1536 Z výše uvedeného vyplývá, že pokud fotografii ze 4MP fotoaparátu otevřeme na počítači s běžným 17˝ monitorem ve zobrazení 1:1 (100% zobrazení) bude vidět pouze její část, celá fotografie je zhruba dvakrát větší než obrazovka.
Tvorba webdesignu v programu GIMP Příprava designu stránky v prostředí Gimpu:
Správně rozřezaná grafika:
Pokud jsou obrázky správně rozřezány je možné je jednoduchým vložením do HTML, nebo CSS znovu sestavit v jeden funkční celek. V HTML je možné použít tabulky s nastavením nulového okraje (border), nulovým vnitřním okrajem (cell padding) a nulovými mezerami mezi buňkami (cell sparing). Celou tabulku je možné zarovnat doprostřed obrazovky příkazem align=“center“. V CSS vkládáme obrázky do předem připravených polí (DIV) a připojujeme obrázek pomocí css příkazu background-image:url(nazev_obrazku.jpg).
Změna velikosti (zmenšení) obrazu
Fotografie určené pro publikování na webu je nutné zmenšit na vhodnou velikost, v Gimpu k tomuto slouží funkce: Obrázek – Velikost obrázku. Zadáváme pouze jedem rozměr (šířku) druhý si program automaticky dopočítá. Velikost fotografie by měla odpovídat velikosti webové šablony nebo stránce pro kterou je určena. V případě fotogalerie vytváříme dvě velikosti obrazu: 1, Miniatura cca 75 x 50 px 2, Fotografie cca 550 x 400 px Miniatura má v HTML nastavený odkaz na větší obrázek.
Publikování a správa webu Formuláře v HTML Ukázka formuláře ve webové stránce:
Vložení formuláře do stránky Formuláře v HTML slouží k získávání informací od uživatelů. Obvykle se jedná o objednávky, přihlášení, diskuze a podobné. Samotný formulář vytváříme přímo ve stránce a připojíme soubor pro zpracování. Předpokládá se, že údaje vyplněné údaje z formuláře se mají nějakou formou zpracovat, uložit do databáze, odeslat emailem. Zpracování dat provádí povětšinou PHP nebo ASP. Nejde to zpracovat jen samotným jazykem HTML. Podrobné informace najdeme na www.jaknaweb.cz. Dají se zde stáhnout i formuláře v php, které se dají upravit. Zápis:
Obrázek musí být umístěn ve stejné složce, jako je index html. Pokud nechceme obrázek zdeformovat, pak zadáme pouze jeden rozměr, druhý se dopočítá. Pro názvy souborů je zakázáno používat diakritiku a speciální znaky, povolené je pouze podtržítko. Mezera se v HTML interpretuje jako %20, ale nemusí to fungovat vždy, takže radši mezery nepoužívat. HTML neumožňuje obtékání, ale rozvržení stránky se dá nahradit tabulkou.