Interaktivní = umožňující vzájemnou komunikaci, tj. přímý vstup do činnosti stroje nebo programu

Úvod do tvorby www stránek Tvorba www 4 Práce s formuláři • Lze rozdělit na dvě části: návrhovou a programovací (tj. vývoji skriptu). • Pomocí formulářů provádíme reálnou interaktivitu stránky s uživatelem. • Slouží k zadání/zapsání a odeslání dat/informací uživatelem. • Poskytují množství různých ovládacích prvků, které lze na www stránce použít. • Není možné je navzájem vnořovat. • Obsah formuláře je možné kontrolovat pomocí skriptu ještě před odesláním. • Odeslaný formulář je zpracován na straně serveru k následujícímu účelu. Interaktivní = umožňující vzájemnou komunikaci, tj. přímý vstup do činnosti stroje nebo programu. Pro vytvoření formuláře se použije párový tag:

, který má tyto atributy: action method accept enctype onsubmit

URL adresa stránky, na kterou je formulář posílán pro zpracování metoda odeslání dat – GET / POST (implicitně GET), určuje způsob jakým, budou data odesílána formát souborů, který bude při zpracování akceptován, seznam více formátů oddělený čárkou "image/gif,image/jpg" kódování (formát) odchozích dat: application/x-www-form-urlencoded, multipart/form-data událost v okamžiku odeslání dat

Pro validaci stránky použijte:

Metody odesílání formuláře get (krátké formuláře, bez diakritiky v názvech a hodnotách) • implicitní metoda (základní), • hodnoty odesílá jako součást URL adresy (vše se odehrává v jednom přenosovém kroku, hodnoty jsou přímo viditelné v URL adrese – NEBEZPEČNÉ, možné zneužití), • vhodná pro krátké formuláře, pokud v názvech a hodnotách není diakritika a nejedná se o citlivé údaje. post (rozsáhlé formuláře, odesílání souborů, hesel) • hodnoty odesílá na server v samostatném přenosu, tj. jako samostatná HTTP objekt, • vhodné pro rozsáhlé formuláře nebo soubory, • transakci, v níž se přenášejí parametry lze zabezpečit. Ovládací prvky • Různé prvky jsou vhodné pro různé činnosti a typy informací. • Každý ovládací prvek má jedinečné jméno v rámci formuláře. • Atribut id je na jménu nezávislý. • Ovládací prvek má vždy nějakou aktuální hodnotu.

• •

Prvek může mít zadanou i nějakou výchozí hodnotu. Práce s ovládacími prvky často spočívá ve využití skriptů na straně klienta (validace, spolupráce mezi prvky) nebo na serveru (nastavování hodnot a plnění nabídek např. hodnotami z databáze).

Vstupní prvek – input (vždy nepárový element), očekává vstup od uživatele. type name id value disabled size maxlength

typ ovládacího prvku text, password, checkbox, radio, submit, reset, button, image, hidden, file název prvku, pouze pro účely odesílání formuláře identifikátor prvku, identifikace ve stylech, skriptech implicitní (výchozí) hodnota ovládacího prvku „znepřístupnění“ prvku, nelze měnit jeho hodnotu velikost prvku, tj. délka políčka ve znacích max. velikost prvku, tj. max. délka políčka ve znacích

Textové pole Základním prvkem formuláře je textové políčko, do něhož se vepisují požadované informace. Políčku můžete také navolit jeho velikost, která se zadává parametrem size="délka". Pokud nezadáte velikost políčka, bude nastavena standardní délka zhruba 20 písmen. Protože můžete psát do políčka text delší, než je jeho velikost, lze nastavit i maximální počet znaků, které lze do políčka vepsat: maxlength="počet slov". Do políčka pak nelze zapsat text delší, než jste zadali. Příklady Zadejte své příjmení: Zadejte své jméno:

title – popisek ve žlutém rámečku value Doplňkem definice textového políčka je možnost přednastavit text, který bude v políčku vepsán již při příchodu uživatele na zadanou stránku, a sice parametrem: value="přednastavený text". Zdejte své příjmení

2

Zdejte své jméno

password Chcete−li použít políčka např. pro nastavení hesla, kdy nechcete, aby někdo mohl text do políčka napsaný (heslo) opsat, použijte: input type="password" To, co píšete, se bude zobrazovat jako série hvězdiček. I zde je možné dodat implicitní text, ten se také zobrazí jako hvězdičky. Pro přihlášení zadejte heslo:

checkbox Používaným prvkem formulářů jsou zatrhávací políčka. Ta se používají především tam, kde stačí pouze souhlasit nebo nesouhlasit s daným tvrzením, Pro zobrazení zatržítka se používá značka input, pouze s jinou hodnotou parametru type: Parametr checked určuje, zda má být políčko implicitně zatrhnuto či nikoliv. Je−li parametr přítomen, bude zaškrtnuto, jinak ne. Zatrhnutí políčka není nevratné; pokud je jednou zaškrtnete, lze jej opět odškrtnout a naopak. K snídani si přeji:
kávu:
čaj:
juice:
jogurt:
máslo:
chléb:


radio Druhým typem zaškrtávacích tlačítek je tzv. radiobutton, který podobně jako checkbox může mít dva stavy: zaškrtnuto a nezaškrtnuto. Používá se však odlišně: jako výběr jednoho z mnoha. Pokud necháte pomocí radiobuttonů tento výběr zobrazit na stránce, může pak 3

uživatel klepnutím myši na kolečko zatrhnout jeden z výběrů, výběrem jiného rozmezí se původní výběr zruší. Nelze tedy zaškrtnout více výběrů naráz. Každý jeden takový řádek vytvoří jedno „kolečko“, tedy jednu možnou volbu z celého seznamu. Pokud je takových voleb více, je nutné použít odpovídající počet značek input. U každé značky nesmí chybět parametr name se stejnou hodnotou, aby prohlížeč poznal, že všechny výběry patří k sobě. Pokud chcete vytvořit nějaké implicitní nastavení, přidejte k některé značce input parametr checked, který má stejný význam jako u zatrhávacích políček. Radiobuttony se hodí tam, kde zvýší přehlednost, a není mnoho možností na výběr. K obědu si přeji:
veřové maso kuřecí maso rybu vegetariánské



Tlačítko Po vyplnění formuláře musí dát uživatel na vědomí prohlížeči, že může s obsahem formuláře dále pracovat. Buďto obsah odeslat serveru nebo předat nějakému řídicímu skriptu. To zpravidla provádí klepnutím na tlačítko, které bývá umístěno na konci formuláře. To se definuje opět klasickým způsobem, značkou input: Velikost tlačítka se přizpůsobí velikost textu, který je uveden jako hodnota parametru value. Pokud ji napíšete třeba takto:

zvětší se zároveň i velikost tohoto tlačítka.

Tlačítka, vytvořená elementem input mají svá omezení. Jsou tvořena buď pouze textem, nebo pouze obrázkem.

4

type

name disabled value

funkce tlačítka: • submit – předání všech hodnot ve formuláři skriptu, odesílá veškeré vyplněné hodnoty formuláře na server • reset – vymaže prvky formuláře a nastaví implicitní hodnoty • button – spustí požadovaný skript název elementu, jméno tlačítka, na které se odkazují skripty, které jsou s tlačítkem provázány znepřístupnění tlačítka, tlačítko nepůjde použít, bude zašedlé a nepůjde na ně klepnout myší výchozí hodnota, která je předána skriptu

Příklad Pro odeslání vyplněného formuláře použijte tlačítko:

Příklad Tlačítko – button Chcete pokračovat?


Další možnosti tlačítek jsou následující: • type="reset" Tlačítko, které se používá při resetování (vymazávání, nastavení na původní hodnotu) všech prvků formuláře. • type="submit" Tlačítko, po jehož stisknutí se obsah vyplněného formuláře odesílá směrem k serveru. Rozbalovací nabídka (roletka) – select Ohraničuje vysunovací nabídku – roletka s výběrem možných voleb. Vedle textového políčka se objeví malá šipka ukazující směrem dolů. Pokud na ni klepnete myší, ukáže se seznam možných hodnot, z nichž lze jednu vybrat. K tomu slouží značka <select name="jméno výběru"> Následuje seznam položek, které lze ze seznamu vybrat; ty jsou definovány další značkou, a to ve sledu, v jakém budou zobrazeny. Obsahem jsou jednotlivé položky, každá reprezentovaná jedním elementem option. 5

<select name="jméno výběru"> výběr 1 výběr 2 výběr 3 Odesílá se vždy hodnota (value) vybrané položky. size multiple optgroup

počet viditelných položek nabídky (bez vysunutí) umožňuje označení (výběr) více položek současně vytvoření skupin uvnitř vysunovací nabídky, skupiny nelze navzájem vnořovat

Příklad Příloha k obědu: <select name="ovoce"> jablko hruška švestka ananas broskev

Parametr multiple určuje, že půjde vybrat více položek seznamu současně (přidržením klávesy CTRL nebo SHIFT, podle standardu Windows). V praxi se však tento parametr moc nepoužívá, pokud chcete nabídnout uživateli více možností, použijte raději zatrhávací políčka, tzv. checkboxy. size="n": počet řádků, které jsou v roletce implicitně zobrazeny Roletka tak má předem danou velikost a je−li počet položek větší, vytvoří se v pravé části roletky posuvník, kterým můžete seznamem rolovat. Z vysouvací roletky se tak vytvoří roletka se stálou velikostí. Vyberte si dva dny v týdnu, kdy se semináře účastníte: <select name="Den" size="5" multiple="multiple" title="Vyberte den v týdnu"> pondělí úterý středa čtvrtek pátek

6

Příklad <select name="vyber_polozek" size="3" multiple> Volba 1 Volba 2 Volba 3 Volba 4 Volba 5

Textová oblast – textarea (párový element) Umožňuje vytvořit pole o libovolném počtu řádku. To se hodí např. tehdy, když chcete, aby vám uživatel napsal svůj názor, vyslovil kritiku nebo naopak pochvalu. Psát delší text do jednořádkového pole je nepřehledné. Na rozdíl od značky input, která je nepárová, je textarea značkou párovou. Značka textarea má podobné parametry jako jednořádkové políčko, nezadává se však typ prvku; ten je totiž přímo určen značkou. Stejně jako u políčka má víceřádkové pole svoje jméno (name) a velikost. Zadává trošku jiným způsobem – parametry: cols ="počet sloupců" rows ="počet řádků" rows cols readonly disabled

počet viditelných řádků šířka, vyjádřená počtem znaků na jednom řádku obsah elementu je pouze pro čtení (odesílá se) deaktivuje element (nelze měnit obsah, neodesílá se)

Při psaní textu delšího než je jeden řádek, se text automaticky zalamuje. To je dáno implicitním nastavením parametru wrap="on" Pokud byste potřebovali (výjimečně) zalamování vypnout, zadejte jako hodnotu parametru wrap ="off". Příklad Připomínky ke konání semináře vložte zde:

7

Popisek – label Slouží pro vytváření popisku u formulářového prvku. Jméno: Jméno: Skupina ovládacích prvků:

• Vizuální seskupení ovládacích prvků s podobným účelem. • Napomáhá zpřehlednění a lepšímu vzhledu formuláře. Pojmenování skupiny prvků:

• Vytváří nadpis skupiny, vytvořené pomocí fieldset.

Přihlášení do systému

Příklad Pro dokončení práce stiskněte tlačítko:

Ukázky tlačítek http://agamabuttons.wz.cz/packages.html Formuláře http://www.jakpsatweb.cz/html/formulare.html Validátor 2 Pokud je váš dokument HTM validní, na konci stránky s úspěšnou validací je umístěna ikona a kód, který vložíte na svou stránku.

8

Tato ikona informuje ostatní uživatele, kteří zobrazí vaše www stránky, že dokument dodržuje pravidla dané normy.

Webhosting Základní body realizace vlastních www stránek a jejich publikování na internetu • Název domény • Zajištění/výběr webhostingu • Vyplnění meta-informací do www stránek, základní SEO o Stanovení stručného avšak výstižného popisu www stránek o Sepsání klíčových slov o Další informace pro vyhledávače a jiné roboty • Navrhnout design stránek a strukturu webu • Zvolit si programovací jazyky, techniky • Vytvořit logo/slogan/trademark/banner • Sepsat si „výplň“, textový obsah stránek • Zřízení kontaktů • Registrace v katalozích firem a vyhledávačích • Nastavení statistiky • Neustálé zlepšování Název domény • „Vymyšlení“ názvu domény, tj. vybrání vhodného názvu a přípony 0. řádu. (.cz, .sk, .com, .org, .eu, .net, apod.) např.: www.nasweb.cz, www.osu.com, www.mujwebik.eu, www.web.cz

9

• •

•

Je důležité vybrat název tak, aby odpovídal a charakterizoval www stránky publikované na vybrané doméně. Nesmí kolidovat již s existujícími stránkami. např.: o www.web.cz (již existující), o www.web.cz (který chcete založit), v tomto případně nepůjde, můžete si, ale vybrat možnost jiné přípony 0. řádu, o www.web.sk (pokud je s příponou .sk volný). Kontrola/ověření „volnosti“ domén s příponou .cz u CZ.NIC

CZ.NIC, z. s. p. o. – zájmové sdružení právnických osob, www.nic.cz, hlavní činností sdružení je provozování registru doménových jmen .cz. ENUM, zabezpečení provozu domény, nejvyšší úrovně CZ a osvěta v oblasti doménových jmen. Jiné přípony (.sk, .com, .net apod.) u jiných registrátorů. Zajištění/výběr webhostingu Máte možnost z výběru z volného (free) hostingu a placeného hostingu. „vlastnost“ vlastní název a výběr celé domény (jméno + přípona) doména 1. a 2. řádu (určitý počet) velikost web prostoru rychlost UP/DOWN loadu vlastní pošta zálohování garance dostupnosti webu podpora jiných programovacích jazyků/skriptů, rozšíření doplňkové služby cena • •

free hosting NE

placený hosting ANO

NE

ANO

v řádu MB (max. GB) v řádu kbit/Mbit NE/omezená omezené NE omezená

v řádu GB v řádu Mbit/Gbit ANO různé stupně záloh ANO rozšířená, volitelná – složena na míru potřeb

NE zdarma

ANO – široký výběr v řádu stovek korun

Výběr na základě dostupných informací, doporučení, vlastní zkušenosti Vyhodnocení plusů a mínusů pro aktuální potřebu www stránek

Např. Free Hosting Vyplnění meta-informací do www stránek • Stanovení stručného avšak výstižného popisu www stránek – popis vašeho webu na 150 znaků, typicky o čem jsou www stránky, za jakým účelem je stvořen tento web a k čemu slouží apod. Například Web společnosti www.jurimedical.cz má popis: Společnost Jurimedical poskytuje právně – ekonomicko – organizační a informační servis lékařům a zdravotnickým pracovníkům v různých medicín. oblastech. • Sepsání klíčových slov webu (max. 4–15, doporučeno 10 slov), tzn. slova, slovní spojení, která vystihují zaměření webu a které „budou“zadávat lidé ve vyhledávačích.

10

Například web www.jurimedical.cz má klíčová slova: jurimedical, juri medical, právní konzultace, právník, máte právo, ekonomické poradenství, zdravotnické zařízení, lékařství, poradenství lékařům, organizační servis, školení, prezentace, akce. Pro základní SEO (Search Engine Optimizatio), optimalizace pro vyhledávače Další informace pro vyhledávače a jiné roboty – je potřeba vkládat tyto informace do www stránek v podobě metadat. (Metadata jsou to strukturovaná data o datech.) Na základní stránce (většinou index.html) se nastaví do hlavičky mezi párový tag metadata ve formátu: <meta name = "keywords" content = "JURIMEDICAL, juri medical, právní konzultace, právník, máte právo, ekonomické poradenství, zdravotnické zařízení, lékařství, poradenství lékařům, organizační servis, školení, prezentace, akce" /> // seznam klíčových slov, které vystihují web <meta name = "robots" content = "all, follow" /> // informace pro robota, že má indexovat a prohledávat vše <meta name = "author" kontent = "Vladimír Vávra, konan/zavinac/email/tecka/cz" /> // informace o autorovi, možnost uvedení kontaktu <meta name = "description" kontent = "Společnost Jurimedical poskytuje právně – ekonomicko – organizační a informační servis lékařům a zdravotnickým pracovníkům v různých medicín. oblastech" /> // Stručný popis webu <meta name = "copyright" kontent = "JURIMEDICAL s.r.o." /> // Stanovení copyrightu //stanovení základní URL adresy webu, pomáhající relativnímu odkazování. Uveden byl pouze příklad, jsou i jiné metadata pro následné zpracování roboty nebo vyhledávači. Navržení designu stránek Především se jedná o vizuální dojem stránek na návštěvníka. Grafičtí návrháři (částečně kodéři stránek) se zaměřují na: • rozložení částí, celků na stránce, • volbou fontů, barvy písma a pozadí, • cílený design pro určitou skupinu zákazníků, návštěvníků (-náctiletí, dospělí, různé zájmové skupiny apod.), • design by měl vystihovat zaměření, účel webu, • originalitu řešení jedinečnost, upozornění na sebe, • celkovému sladění, vizuální dojem.

11

Zákazník Měli byste mít představu o struktuře webu (tj. jak bude jednotlivé rozmístění částí webu vypadat, tj. hlavní nabídka, menu, hlavní textová část, části pro obrázky, reklamu, aktuality apod.). Představu interpretovat grafikovi, který vytvoří grafickou podobu stránek. Základní struktura webové prezentace

Zdroj: http://info.spsnome.cz/WWW/Prezentace Soubory na webu http://www.jakpsatweb.cz/soubory.html Každý server má nastavené jméno startovního souboru. Na většině serverů se to dá nastavit (dokonce i pro ten který adresář), ale málokdy se to mění. To znamená, že si od správce vašeho serveru musíte zjistit, jak se ten startovní soubor má jmenovat. Nejčastěji se používá název index.html. Takto pojmenujte soubor se svou hlavní stránkou. Vzhled webové stránky • WWW stránka prezentuje informace • Důležitý není jen obsah, ale i vizuální forma • Vizuální ztvárnění je ovlivněno o Typem a určením webové prezentace o Použitými nástroji, prvky, technologiemi o Informační strukturou a rozsahem o Specifickými požadavky (rychlost, bezpečnost, specifická přístupnost) o Módními trendy Moderní trendy • maximálně korektní a validní stránky, • jednoduchý XHTML kód, • znovupoužitelnost kódu (modularita), • oddělení obsahu a formy, • přehlednost, optimální granularita informací, • uspořádanost (logické členění, intuitivnost), • přístupnost (pozor na nestandardní a nepodporované prvky!), • rychlost (optimalizace grafiky, animací),

12

•

alternativní navigace (hierarchické menu, mapa webu).

Layout • Pojmem layout rozumíme vizuální rozvržení a vzhled stránky, interpretované v prohlížeči. • Vyžaduje kreativitu a grafické cítění autora. • Moderním trendem je oddělení práce programátora stránek a tvůrce layoutu a jakýchkoliv vizuálních změn. • Layout se vytváří kombinací elementů jazyka XHTML, obrázků, grafických motivů a doplňků. Zdroj: http://lide.uhk.cz/fim/ucitel/freylva1/prednasky/tnpw1-6.ppt#264,3,Vzhled webové stránky Layout stránky http://www.fit.vutbr.cz/~burgetr/tws/prednasky/p06/slide0900.html Tvorba webových stránek http://www.fit.vutbr.cz/~burgetr/tws/prednasky/p06/seznam.html Existuje mnoho konstrukcí webu, graficky jsou tyto weby odlišné, jejich základ je velice podobný – místo pro obsah, hlavičku, záhlaví. První rozvržení spočívá v jednoduchém obsahu. Design čítá hlavičku, která by měla být na každém webu, protože je to hlavní prvek, který ukazuje, na kterém webu se právě návštěvník nachází, ideálně navíc informuje o zaměření webu. Dále je zde menu, nacházející se napravo či nalevo. Vedle menu pak obsah stránek. Stránku dole může dotvářet i patička, která ale v následující ukázce chybí. Tento první příklad se často používá pro blogy pro svou jednoduchost.

Další příkladem je web s vodorovným menu. Navigace je přehledná a bývá většinou vkusně členěna. Tento typ webu není přesto určen pro drastické změny v menu, neboť v případě dalšího přidávání položek by mohl nastat problém v rozmístnění.

13

Pata na webech je povětšinou estetická záležitost, bývá v ní uveden copyright, autor stránek, informace o použitých technologiích na webu, další navigace atd. Dalším typem je třísloupcový layout, kde obsah je umístněn v centru, a po stranách jsou dva sloupce. V levém sloupci může být umístněna navigace stránek, v pravé uživatelská nastavení, bannery nebo poslední komentáře.

Zvolení programovacích jazyků, techniky • Předem si ujasnit účel stránek a požadované funkce na stránkách. • Zvolit vhodný programovací jazyk, techniku, podporu vývoje, testování apod. o Jazyky: HTML /XHTML + CSS, JS – JavaScript, AJAX, FLASH, PHP, JAVA, .NET. o Nástroje: grafické a programovací prostředí, editory, apod. • Rozlišení free a komerčních licencí pro užívání k vaší tvorbě www stránek. • NE všechny nástroje a jazyky jsou vhodné pro všechno, tj. nic není dokonalé ani zcela univerzální! Vytvoření loga, sloganu, trademark, banneru • Logo – charakterizuje web stránky, firmu apod. Pozor na ochranné známky, ať náhodou nepoužijete (i nevědomky) podobné logo, které je již chráněno. • Slogan – heslo či motto, které pomáhá upoutávat pozornost ke společnosti či k jejímu produktu. Vystihuje účel stránek, firmy, krátký výstižný, lehce zapamatovatelný (není vždy podmínkou). • Trademark – obchodní značka je označení, pomocí kterého firmy identifikují samy sebe, své výrobky a služby; viditelné umístění a vhodné umístění na stránce (není vždy podmínkou).

14

•

Banner – upoutávka se využívá pro reklamu na jiných serverech (vzájemná spolupráce na propagaci webu, produktů apod. Vhodné vytvořit několik variant velikostí.

Připravit text do www stránek a zřídit kontakty Text pro jednotlivé stránky • Připravit si text pro jednotlivé stránky, obrázky, dokumenty, tabulky apod. • Při tvorbě www nemusí být text již předem připravený a může se měnit, proto se doporučuje používat jazyk LIPSUM. • Typicky: Úvodní text, Hlavní text, Kontaktní informace, Portfolio (fotogalerie), Reference, Dotazy, FAQ, Formulář. • Možnost jazykových mutací (CZ, GB/US, DE, apod.) Zřízení kontaktů • Uvést na stránkách kontakty (např. kontaktní osobu, adresu, mapu, telefon, emaily apod.). • Uvést tvůrce stránek (pokud se chcete prezentovat). Registrování v katalozích a vyhledávačích Vyhledávače • Google, Yahoo, MSN Live (Bing), Seznam, Centrum, Atlas aj. • Někteří umožňují registraci, někteří používají své vyhledávací a registrační techniky. Katalogy firem • Najisto, Mapy, aj. • Možnost uvedení vašich „správných“ informací, ne pouze na základě robotů. Nastavení statistiky • Stanovit kritéria sledování • Stanovit vyhodnocení sledovaných kritérií • Reagovat a provést případné změny Neustálé zlepšování • Sledovat vývoj aktuálních informací na www stránkách, • Sledovat trendy v oblasti IT, webu, • Sledovat preference zákazníků, uživatelů www, • Následně na tyto body reagovat a přizpůsobit web, který není „mrtvý“, ale díváme se na něj jako na „živý“ organismus. (Ne vždy to bohužel jde.) Odkazy pro realizaci www stránek Zjištění dostupnosti CZ domény www.nic.cz Otestování stránek na validitu (HTML a CSS validátor) http://validator.w3.org/ Otestování SEO stránek (komerční web zaměřený na otestování webů) http://seo-servis.cz/

15

Lorem Ipsum Lorem Ipsum je demonstrativní výplňový text používaný v tiskařském a knihařském průmyslu, text pro naplnění stránek. http://cs.lipsum.com Jak na webhosting http://www.tvorba-webu.cz/webhosting/ Vytvořte si Webové stránky zdarma http://www.webnode.cz/ Publikování na WWW – Přístupnost webu http://info.spsnome.cz/WWW/Seo Interval.cz www.interval.cz Web tvorba http://www.webtvorba.cz/ Typografie http://typografie.dero.name/index.html Šablony a rozložení http://design.stranek.cz/ http://templater.cz/ http://www.dotemplate.com/ http://www.emag.cz/dejte-webu-zadarmo-novou-tvar/ http://www.freesitetemplates.com/ http://www.free-templates-layouts.com/ http://www.interspire.com/templates/ http://www.mastertemplates.com/ http://www.styleshout.com/ http://www.templates.cz/ http://www.templatesbox.com/ http://www.webove-sablony.cz/webove-sablony/zdarma/ http://www.web-sablony.com/

16

Webhosting a FTP připojení – praktická část • Vhodný výběr webhostingu • Nastavení webhostingu • Příprava webové struktury • Nastavení FTP připojení • Nahrání testovacích stránek Výběr webhostingu Máte možnost z výběru z volného (Free) hostingu a placeného hostingu. • Výběr na základě dostupných informací, doporučení, vlastní zkušenosti. • Vyhodnocení plusů a mínusů pro aktuální potřebu www stránek Např. Free Hosting

Nastavení webhostingu • Po obdržené registraci dostanete nezbytné údaje pro nalogování k doméně a její správě. • Většina poskytovatelů webhostingu nabízí již automaticky základní nastavení pro www stránky a doplňky kolem (databáze, free-mail, apod.) • Přístup k doméně většinou přes webové rozhraní a FTP spojení. • Pozor na nastavení přístupu (práv) k jednotlivým adresářům!

17

Přihlašování

Po přihlášení – úvodní stránka s obsahem domény

Příprava webové struktury • Vhodné pro lepší orientaci na doméně. Nezbytností, pro větší webové projekty apod. • Adresářová struktura by měla rozlišovat mezi vlastními webovými stránkami, CSS, Java skripty, obrázky (ikonky, avatary, malé a velké obrázky apod.), ostatními daty (tzv. pro download), aj.

18

Nastavení FTP připojení Nastavení FTP připojení přes PSPad editor Záložka FTP spojení

19

Vytvoření FTP spojení

20

Vyplnění FTP spojení

Připojování k FTP (stav červeně)

21

Připojeno k FTP (stav zeleně) a vytvoření adresářů

Uložení souboru přes FTP na doménu

Úkol č. 3 (Moodle) Zřiďte si www hosting. Vytvořte 3 vzájemně propojené www stránky, na které vložíte prvky, které jste se během výuky naučili udělat – obrázky, tabulky, odkazy, prvky formuláře. Stránky zaměřte na jedno společné téma – životopis, www stránky fiktivní firmy, www stránky zájmového sdružení, pozvánka na akci a informace o ní atd. URL adresu (odkaz) na vaše stránky vložte jako text.

22