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 pro tvorbu www stránek 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čí ( <html>…</html>). Nepárové pouze začínají např.: <img…>. Stránka začíná znaky <html> a končí </html>. Všechny ostatní prvky stránky musí být mezi značkami <HTML>. Stránka se rozděluje na hlavičku a tělo. (head / body) Následuje tedy <head> obsah hlavičky </head> mezi html – obsahuje informace o nastavení stránky (jazyk, klíčová slova td.) Nadpis - <title> - 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.

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" content="text/html; charset=windows-1250"> 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.

Pro správné zobrazování diakritiky (háčky a čárky) je vložení tohoto řádku NUTNÉ. 2, Title <title>KURZYGRAFIKY.CZ </title> 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" content="Kurzy v oblasti počítačové grafiky" /> 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í <link rel="stylesheet" type="text/css" href="main.css" /> 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: <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1250"> <title>KURZY GRAFIKY.CZ</title> <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" /> <link rel="stylesheet" type="text/css" href="main.css" /> </head>

Stránka HTML HTML kód vždy začíná tagem <html> obvykle následuje hlavička <head> obsahující celkové nastavení stránky, dále <body> 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: <html> <head> <title>NADPIS</title> </head> <body> texty, obrázky a další náplň stránek </body> </html>

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: <tag vlastnost1=“hodnota“ vlastnost2=“hodnota“>

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í. <P> text odstavce </P> tag <P> ohraničuje text v odstavci. Vlastnosti: Zarovnání do bloku – píše se dovnitř závorky <p >, příkaz je align. Celý příkaz tedy vypadá následovně: <p align=“justify“>text odstavce</p> 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. <H1> NADPIS</H1> 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 </span> 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) <b>písmo, které má být tučně</b> Kurzíva – příkaz<i>text</i> Tučné písmo - <b>text</b> Přeškrtnuté -<s>text</s> Podtržené -<u>text</u> Horní index -^text Dolní index -_text Čára - <hr width="1400" size="2" color="black" align="center"> Čá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 <a href="http://www.stranka.cz/" target="_blank">Text na odkaz</a> 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 <img src="obrazek.jpg" width="200" height="200"> 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 v HTML Základy tabulek Tabulka – řádky: <tr></tr> sloupce <td></td> Sloupce jsou vždy uvnitř řádků. Zápis vypadá následovně: <table width="300" border="1">

<tr> <td>první buňka</td> <td>druhá buňka</td>

</tr> </table> 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

<table width="900" border="1" align="center" bgcolor="#00CCFF"> <tr><td height="149" colspan="2">nadpis</td></tr> <tr><td colspan="2">menu</td></tr> <tr><td width="150" height="458">levé menu</td> <td>obsah stránky</td></tr> <tr><td colspan="2">zápatí</td></tr> </table>

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 e-mailem. 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: <form></form> <form name=“objednavka“ action=“pridat.php“> Důležitý je parametr action, který nastavuje název souboru obsahující script pro zpracování.N

Obsah formuláře: Formulářové pole ve zdrojovém kódu by se vždy mělo pojmenovat kvůli identifikaci údajů, aby například nedošlo k záměně např.: jména a příjmení.

Komponenty formulářů • Input text – vkládání textu • Checkbox – tlačítko • Button - tlačítko pro odeslání • Rozbalovací nabídky – combo box (políčko se šipkou

pro vybrání možností) • Přepínací políčko – radio button (jedna ze dvou / více

možností) • Message box – velké textové pole s posuvníkem

Základy použití PHP skriptů – odeslání emailu ze stránky Data z formuláře je nutné zpracovat (odeslat email, zapsat do databáze). Pro tyto účely slouží předpřipravené PHP skripty, které uložíte do vašich stránek. Název souboru obsahující skript: pridat.php <?php $to = "vas@email.cz"; $extra = "From: $email\r\nReply-To: $email\r\n"; $subject = "Vzkaz od ".$jmeno.""; $mess = "Jméno: ".$jmeno."\nEmail: ".$email."\n Web: ".$web."\nText:\n".$text.""; mail ($to, $subject, $mess, $extra); ?>

Základy CSS – kaskádové styly

Základy kaskádových stylů (CSS) Externím CSS souborem Vytvořte soubor, který se bude jmenovat styl.css. V něm bude pouze tento text:

body {background: red} Do hlavičky html dokumentu (index.html), který chci stylem ovlivnit, napište odkaz na soubor kaskádových stylů).

<link rel="stylesheet" type="text/css" href="styly.css"> Do souboru index.html jsme pomocí externího css souboru přidali červené pozadí.

Formátování pomocí stylů Zápis do souboru CSS má vždy tuto strukturu: název html tagu {vlastnost: hodnota; vlastnost2: hodnota} např.: h1 {color: green; text-align: center} – všechny nadpisy úrovně jedna jsou červenou barvou, zarovnané doprostřed.

Výhody použití CSS CSS jsou vhodné především pro svoji jednoduchost a rychlost při úpravách webových stránek. CSS se vyplatí použít pokud chcete ve stránce vytvořit (změnit) např:

• Nastavit libovolnou a přesnou velikost písma • Udělat odsazení prvního řádku odstavce, zvětšit

řádkování • Zrušit nebo zvětšit prázdný prostor po odstavci • Automaticky formátovat nadpisy (například je

všechny udělat zelené) • Zvýrazňovat odkazy po přejetí myší • Udělat automaticky grafické odrážky • Určité části textu zneviditelnit, zprůhlednit nebo

nezobrazit • Předefinovat grafický význam běžných tagů

(například všechno, co je kurzívou, udělat i tučně) • Nastavit pozadí čehokoliv, stránky, tabulky ale třeba i

odstavce; pozadí se nemusí opakovat a může mít přesnou pozici!

• Umístit nějaký objekt (třeba kus textu) kamkoliv do stránky

• Přidat k čemukoli rolovací lišty, oříznout to, orámovat, nastavit okraje

• Hlavní význam CSS spočívá v tom, že fungují automaticky, vzhled celého webu deklaruje jedním souborem.

Velkou výhodou CSS je možnost stylování pro tisk – tedy nastavení vzhledu stránky vytištěné na papír. Pro použití používáme příkaz - media=“print“ v odkazu na CSS v hlavičce HTML stránky.

Layout pomocí CSS (pokročilý příklad) Pro zjednodušení uvádíme pro HTML obsah tagu BODY. Názvy souborů a propojení je uvedeno v obecné části CSS nebo hlavičky v HTML.

CSS (styl.css) * {margin: 0; padding: 0;} html {height: 100%; font-size: 62.5%;} body {height: 100%; font: 1.2em Verdana, Arial, Helvetica, sans-serif; text-align: center; padding-bottom: 60px;} /* ========== Layout ========== */ #obal { width: 770px; margin: 50px auto 0 auto; text-align: left; border: 1px solid green; background: url('pozadi.gif') repeat-y 25% 0; } #hlavicka { padding: 10px; border-bottom: 1px solid green; background: #F0FBDF; } #sloupec1 { float: right; width: 75%; } #sloupec2 { float: left; width: 24%; text-align: center; } #sloupec1-in, #sloupec2-in { margin: 0.8em 1.2em; } .cleaner { clear: both; height: 0; font-size: 0; visibility: hidden; } #paticka {

padding: 10px; border-top: 1px solid green; background: #F0FBDF; } /* ========== Ostatni ========== */ h2, h3 {margin-bottom: 5px;} p {line-height: 1.5; margin-bottom: 14px;} ul li {margin-bottom: 3px;} .noscreen {display: none;} Sloupce lze v HTML kódu psát v libovolném pořadí (jelikož oba mají v CSS nastavenu vlastnost float). Z hlediska přístupnosti a SEO (Search Engine Optimization) je pak lepší psát menu až za vlastní obsah.

HTML (index.html) <div id="obal"> <div id="hlavicka"> <h1>Nějaký text v hlavičce…</h1> </div> <hr class="noscreen" /> <div id="sloupec1"> <div id="sloupec1-in"> <h2>Nadpis</h2> <p>Obsah…</p> <h2>Další nadpis</h2> <p>Obsah…</p> </div> </div> <div id="sloupec2"> <div id="sloupec2-in"> <h3>Menu</h3> <ul> <li><a href="#">Položka 1</a></li> <li><a href="#">Položka 2</a></li> </ul> </div> </div> <div class="cleaner">&nbsp;</div> <hr class="noscreen" /> <div id="paticka"> Nějaký text v patičce… </div> </div>

Základy použití JavaScriptu Jde o programování, ne o zápis značek. Je to tedy poměrně nebezpečné. JavaScr. umí ukládat soubory na pevný disk, umí změnit nastavení systému aj. Na druhou stranu to ale může být I velmi užitečné, dají se dělat základní výpočty ve stránkách atp. Zápis: <script></script> Příklad (zobrazí varovné okno s uvedeným textem): <script> alert(“pozor přetížení systému”) </script> Proměnné v JavaScriptu – programování bez proměnných by nebylo programování. Rozdíl je zde například mezi číslem a textem. Pokud sčítáme čísla, vyjde nám matematický výsledek, pokud sčítáme text, seskupí se jeho hodnoty v pořadí sčítání (a+e=ae). Hodnoty čísel se zadávají bez uvozovek, hodnoty textu s uvozovkami. Pokud tedy potřebujeme výpočty (e-shop), používá se javascript poř. PHP.

Pohyblivá tlačítka – Rollovery Tento příklad vymění obrázek za jiný při přejetí myší. <img src="obrazek.gif" onmouseover="this.src='obrazek2.gif'" onmouseout="this.src='obrazek2.gif'">

Základní matematické operace Následující příklad sečte hodnoty x a y a vypíše na stránce výsledek číslo 2. <body> <script> var x = 1; var y = 1; document.write(x+y); </script> </body>

Publikování na internetu Webové stránky obvykle vytváříme offline (na svém PC bez nutnosti připojení k internetu). Teprve po dokončení celého webu zkopírujme soubory pomocí FTP na server – pro zobrazení online na internetu. Pro úspěšnou publikaci je nutné mít zaregistrovanou doménu a fungující webhosting.

Registrace www prostoru Název domény (zdarma nebo placená) Domény se rozdělují na dva základní druhy: Mezinárodní domény: .com, .net, .eu atd. Národní domény: .cz, .sk, .de a další. Některé národní domény nemohou registrovat cizinci. Registraci domén provádí mnoho firem. Cena domény se účtuje obvykle jednou ročně a pohybuje se od 200,- do cca. 600,- Kč.

Webhosting Webhosting je nastavení pro provoz stránek. Protože stránky mohou být velmi rozdílné i hostinců jsou různé druhy. Při tvorbě stránek je dobré předpokládat budoucí úpravy stránek a podle toho volit vhodný webhosting. Např. E-shopy vyžadují propojení na databázi a možnost zpracování PHP skriptů. Existují hostingy zdarma (www.hostingzdarma.cz) které obvykle poskytují méně služeb než placené hostingy (www.active24.cz).

FTP přístup k prezentaci FTP – File Transfer Protocol – přenos souborů z našeho PC na server.

PC Server

Pro FTP přístup jsou nezbytné tři údaje: 1, FTP adresa ftp://ftp.kurzygrafiky.cz 2, FTP uživatelské jméno jmeno123 3, FTP heslo ***** Při častých změnách obsahu webové stránky je vhodné využít software – tzv. FTP Klient. Tento SW je většinou ZDARMA. Např. FILEZILLA ke stažení na www.stahuj.cz Ukázka použití FTP klienta FILEZILLA:

Základy SEO SEO – Search Engine Optimalization – správné nastavení pro vyhledávače

• Optimalizace pro vyhledávače – dobře nastavená hlavička

• Kvalitní obsah webové stránky • Oblíbenost – linkbuilding (čím více odkazů na

internetu vede na naši webovou stránku, tím vyšší pozici ve vyhledávačích máme)

• Statistiky přístupů

Klíčová slova Klíčová slova jsou taková, která nejlépe vystihují charakter (obsah) stránek. Jejich důležitost spočívá ve správném vyhledávání v prohlížečích. Doporučujeme se vyvarovat velmi obecných výrazů a zapisovat spíše slova konkrétní. Pro konkrétní slovo se snažte najít různá synonyma, pomůckou mohou být např. SKLIK kampaně, které vám klíčová slova nabízejí automaticky (včetně počtu vyhledávání). Klíčová slova se vyskytují na čtyřech místech stránky: 1, název domény 2, hlavička – meta tagy 3, body – obsah stránek (nadpisy jsou vždy důležitější!) 4, reklama na internetu – linkbuiding, registrace,

PPC kampaně (Pay Per Click) Způsob placené reklamy na internetu, při které se ve vyhledávačích zobrazují zdarma vaše inzeráty a zaplatíte teprve za prokliknutí uživatele na vaše stránky. Výhodou tohoto systému je možnost vlastního stanovení ceny za proklik, denního limitu, délky trvání kampaně atd. Nevyužívanější PPC kampaně jsou: 1,Seznam SKLIK 2,Gogole AdWords

Příklad kampaně od Sklik.cz:

Pravidla přístupného webu Pravidla přístupného webu jsou doporučení jak by webová stránka měla vypadat a co obsahovat. Pro státní instituce závazné (Pravidla tvorby přístupného webu pro účely novely Zákona č. 365/2000 Sb., o informačních systémech veřejné správy). Podrobná verze pravidel na adrese: http://pristupnost.nawebu.cz/texty/pravidla-standardy.php

Obsah stránek 1, Obsah stránky má být srozumitelný a přehledný 2, Obrázky by měly být správné pojmenované a měly mít textovou alternativu 3, Jednoduchá struktura (uživatel by měl najít potřebné cca na tři kliknutí)