DESIGN WEBOVÝCH STRÁNEK

Fáze tvorby webu

Tvorba webu zahrnuje několik fází – od vymyšlení nápadu až po jeho realizaci. Chcete-li vytvořit skutečně zajímavý a užitečný produkt, musíte projít následujícími kroky.

Analýza a návrh. Analýza silných stránek a slabé stránky konkurence, informační design webu, vývoj jeho konceptu, hodnocení cílového publika.

Psaní obsahu. Pod obsah odkazuje na informační obsah webu. Tento termín se používá k označení ideologického obsahu webové stránky.

Tvořivý. Tvořivý- termín označující vizuální složku webové stránky. Patří sem vývoj designu, grafických prvků, grafického zpracování a všeho, co s tím souvisí.

Psaní kódu webu. Programování webových souborů, psaní funkční části

Testování. V této fázi se kontroluje vše: snadnost navigace, integrita dat, správnost odkazů a pravopis, navíc ne všechny prohlížeče interpretují stejné HTML tagy stejným způsobem.

Vydání. Umístění webové stránky na internetu. Většina poskytovatelů internetových služeb (ISP) poskytuje službu hostování domovských webových stránek zdarma (tato služba se nazývá webhosting). Chcete-li publikovat, můžete hostovat svůj web u poskytovatele nebo použít jiné možnosti.

Podpěra, podpora. Je třeba rozhodnout, jak se budou přidávat nové sekce a materiály a co se stane s těmi starými. Může být nutné vytvořit archiv zpráv, který bude obsahovat zprávy, které ztratily svou relevanci. Ještě důležitější je pravidelně aktualizovat informace na webu, aby bylo zajištěno, že zůstane atraktivní.

Terminologie webdesignu

webový prohlížeč- aplikační program určený k interpretaci kódů HTML dokumentů a zobrazení hypertextového dokumentu na obrazovce počítače. Nejčastěji používané prohlížeče - internet Explorer,Opera, Mozilla Firefox, Google Chrome. Spolu s pojmem „prohlížeč“ se používají synonyma: „prohlížeč“ a „navigátor“.

webová stránka- soubor vzájemně propojených, významem podobných webových stránek a souborů. Každý web má jednu webovou stránku nazývanou domovská stránka nebo domovská stránka. Všichni návštěvníci webu se na něj nejprve dostanou a poté se pomocí hypertextových odkazů dostanou na další stránky webu.

webová stránka (HTML dokument) je textový soubor na jazyk HTML formát *.htm nebo *.html, zveřejněno na WWW. Kromě textu může webová stránka obsahovat grafiku, animace, videoklipy, hudbu a také hypertextové odkazy, pomocí kterých můžete přejít na jiné webové stránky a prohlížet je.

Jedním ze způsobů, jak vytvořit webové stránky (nebo HTML dokumenty), je použití textový editor poznámkový blok, zabudovaný do Windows. V tomto editoru se vytvoří soubor webové stránky, který se uloží s příponou *.htm a výsledky se pak prohlížejí pomocí prohlížeče.

Vytváření webových stránek pomocí jazyka HTML

Jazyk HTML(Hyper Text Markup Language) je značkovací jazyk hypertextových dokumentů používaný pro psaní webových stránek.

Jazyk HTML vám umožňuje:

‒ vytvářet a upravovat webové stránky, včetně domovské webové stránky, které pak mohou být umístěny na internetu;

- upravovat HTML dokumenty přijaté z internetu tak, aby všechny objekty vložené do dokumentu (obrázky, animace atd.) fungovaly;

- vytvořit multimediální prezentace, prezentace, demo projekty, díky hypertextovým odkazům a možnosti vkládat do HTML dokumentu kresby, diagramy, animace, videoklipy, hudební a řečový doprovod, textové speciální efekty (například plíživá čára).

ZÁKLADNÍ POJMY JAZYKA HTML

Živel je konstrukce jazyka HTML nebo kontejner obsahující data.

webová stránka je soubor prvků.

Štítek jsou počáteční a koncové značky prvku. Tagy definují hranice působení prvků a oddělují prvky od sebe. Značky jsou uzavřeny v lomených závorkách, například: . Koncové značce, pokud to vyžaduje syntaxe jazyka, předchází lomítko:.

Rám- oblast hypertextového dokumentu s vlastními posuvníky. Rámce umožňují rozdělit stránky na obdélníkové oblasti, z nichž každá zobrazuje svou vlastní vlastní stránku. Na stránku můžete umístit jeden nebo více rámců (tato stránka se nazývá stránka rámů nebo sada rámů).

Formulář- oblast hypertextového dokumentu, která je nezbytná pro uspořádání zpětná vazba s návštěvníky webu.

Applet- malý aplikační program přenesený do počítače klienta ve formuláři samostatný soubor a spustí se při prohlížení webové stránky.

Skript- program zahrnutý do webové stránky pro rozšíření jejích možností.

Umístění (nahrát)- zkopírování dokumentu z počítače klienta na webový server - používá se při vytváření vlastní webové stránky (tj. při publikování).

Pixel- nejmenší barevný bod na obrazovce monitoru.

OBECNÁ STRUKTURA JEDNODUCHÉHO HTML DOKUMENTU

Obecná struktura jednoduchého HTML dokumentu je:

<СОММЕNT> Komentář

HTML nerozlišuje velká a malá písmena, takže výše uvedený příklad může vypadat takto:

Koncová značka vypadá stejně jako počáteční značka a liší se od ní lomítkem před textem v lomených závorkách. V v tomto příkladuštítek - o dokončení titulního textu.

Některé značky jako např

(tag, který definuje odstavec) nevyžadují koncový tag, ale jeho použití dává zdrojovému textu dokumentu lepší čitelnost a strukturu.

Když webový prohlížeč přijme dokument, určí, jak má být dokument interpretován. Úplně první tag, který se v dokumentu objeví, musí být tag . Tato značka sděluje webovému prohlížeči, že váš dokument je napsán pomocí HTML. Minimální HTML dokument by vypadal takto:

...tělo dokumentu...

Záhlaví dokumentu

Štítek hlavy dokumentu by měl být použit bezprostředně za štítkem a nikde jinde v těle dokumentu. Tato značka je obecný popis dokument. Do značky nevkládejte žádný text . Startovací značka umístěn bezprostředně před značku Název dokumentu , umístěný uvnitř -tags, jak je ukázáno v příkladu výše. Název dokumentu se nezobrazí, když je samotný dokument zobrazen v okně.

Komentáře

Jako každý jazyk vám HTML umožňuje vkládat komentáře do těla dokumentu, které se uloží při přenosu dokumentu po síti, ale prohlížeč je nezobrazí. Syntaxe komentáře:

Komentáře se mohou objevit kdekoli v dokumentu a v libovolném množství.

Tagy těla dokumentu identifikují součásti dokumentu HTML zobrazeného v okně. Tělo dokumentu může obsahovat odkazy na jiné dokumenty, text a další formátované informace.

Tělo dokumentu

Tělo dokumentu musí být mezi značkami A. Toto je část dokumentu, která se zobrazuje jako textová a grafická (sémantická) informace vašeho dokumentu.

Značka odstavce

Na rozdíl od většiny textových procesorů jsou znaky konce řádku v dokumentu HTML obecně ignorovány. Fyzický konec odstavce může být umístěn kdekoli ve zdrojovém textu dokumentu (pro snadnější čtení). Prohlížeč však odděluje odstavce pouze v případě, že existuje značka

Pokud odstavce neoddělujete tagem

Váš dokument se zobrazí jako jeden velký odstavec.

Hypertextové odkazy jsou klíčovou součástí, díky které je WEB pro uživatele atraktivní. Přidáním hypertextových odkazů (dále jen odkazy) vytvoříte soubor dokumentů propojených a strukturovaných, což uživateli umožňuje co nejrychleji a nejpohodlněji získat informace, které potřebuje.

Odkazy mají standardní formát, který umožňuje prohlížeči je interpretovat a provádět potřebné funkce (způsoby volání) v závislosti na typu odkazu. Odkazy mohou ukazovat na jiný dokument, konkrétní umístění v tomto dokumentu nebo provádět jiné funkce, jako je například vyžádání souboru přes FTP, aby jej prohlížeč zobrazil. Adresa URL může ukazovat na konkrétní umístění v absolutní cestě nebo může ukazovat na dokument v aktuální cestě, což se často používá při organizování velkých strukturovaných webových stránek. Pokud k pohybu v dokumentu došlo, vraťte se na předchozí odkaz. Pokud použijete odkazy v dokumentu a poté stisknete klávesu Zpět, nepřejdete na předchozí odkaz, ale vrátíte se k části dokumentu, kterou jste si prohlíželi předtím.

Jeden z nejatraktivnějších zatracený web-schopnost zahrnout odkazy na grafické a jiné typy dat v dokumentu HTML. To se provádí pomocí značky . Použití tohoto tagu může výrazně zlepšit vzhled a funkčnost dokumentů.

Grafiku v HTML dokumentech lze použít dvěma způsoby. Prvním je vkládání grafických obrázků do dokumentu, což uživateli umožňuje vidět obrázky přímo v kontextu ostatních prvků dokumentu.

Toto je nejpoužívanější technika v designu dokumentů, někdy nazývaná "inline image".

Některé WWW prohlížeče umožňují uživateli, vyplněním speciálního formuláře, který vrátí výslednou hodnotu, provádět určité akce na vašem WWW serveru. Když je formulář interpretován webovým prohlížečem, vytvoří se speciální prvky GUI obrazovky, jako jsou vstupní pole, zaškrtávací políčka, přepínače, rozevírací nabídky, rolovací seznamy, tlačítka atd. Když uživatel vyplní formulář a klikne na tlačítko „Odeslat“ (Odeslat je speciální typ tlačítka, které se uvádí při popisu dokumentu), informace zadané uživatelem do formuláře jsou odeslány na HTTP server ke zpracování a přenosu. na jiné programy běžící pod serverem v souladu s rozhraním CGI (Common Gateway Interface).

Když popisujete formulář, každý prvek zadávání dat má značku . Když uživatel umístí data do prvku formuláře, informace se umístí do sekce VALUE tohoto prvku. Jednou z nejatraktivnějších funkcí webu je schopnost zahrnout do dokumentu HTML odkazy na grafiku a další typy dat.

Přestože webové stránky vypadají na obrazovce počítače jako formátované, HTML není určeno pro formátování dokumentů, protože rigidní design a přesné umístění textových prvků na stránce vede k omezením, která jsou na internetu nepřijatelná.

Když tedy například formátujeme text pomocí textový procesor Slovo, my rozhodně určit, jak má tento text vypadat po vytištění velmi specifická tiskárna a na papíře zadaný formát. Když je dokument umístěn na internetu, není možné předvídat, který počítač bude použit k jeho zobrazení, nebo zda tento počítač bude mít dokonce monitor.

Možná se text objeví na obrazovce běžícího počítače systém Windows v okně jednoho z moderních prohlížečů. Možná to bude textový prohlížeč (neschopný zobrazovat grafiku) běžící na MS-DOS. Možná se text dokumentu vůbec nezobrazí na obrazovce, ale bude přehrán nahlas pomocí syntetizéru řeči. Pro nevidomého uživatele lze dokument zobrazit na speciálním zařízení v Braillově písmu.

Vzhledem k potřebě připravovat dokumenty pro tak rozmanitá zařízení není HTML určeno k popisu formátu dokumentu. Slouží pro funkční značení dokumentů, to znamená, že umožňuje určit jmenování fragmenty textu.

Pokud je například v textu nadpis, pak kód HTML jednoduše označuje, že odpovídající fragment je nadpis. Po obdržení takového kódu se divácký program (prohlížeč) sám „rozhodne“, co s titulem udělá. Možná to ukáže víc velký tisk, nebo jej možná zarovnejte na střed obrazovky. Je možné, že syntetizér řeči, který reprodukuje text dokumentu, používá kód záhlaví ke zvýšení hlasitosti a provedení nezbytné intonační pauzy.

Jazyk HTML má stále nějaké formátovací příkazy, ale obecným kurzem je oddělení obsah a provedení dokumentu je přísně dodržováno. V Nejnovější verze Příkazy formátování HTML (4.0) se obecně nedoporučují.

Jsou volány kódy jazyka HTML používané k označení zdrojového textu značky. Značka je sada znaků. Všechny značky začínají symbolem menší než ( < ) a končí symbolem větší než ( > ). Tyto dvojice symbolů se někdy nazývají úhlové konzoly. Po otevření přichází úhelník klíčové slovo, definující značku.

Každá značka v HTML má speciální účel. Na velikosti písmen v názvech značek nezáleží – lze použít malá nebo velká písmena, i když je běžné používat velká písmena k rozlišení značek od normálního textu dokumentu.

Zpravidla jeden HTML tag ovlivňuje pouze část dokumentu, například odstavec. V takových případech se používají párové značky: otevírací A zavírání.Úvodní tag vytvoří efekt a závěrečný tag efekt ukončí. Závěrečné značky začínají lomítkem ( / ).

Některé značky poskytují jednorázový efekt tam, kde se objeví. V tomto případě není potřeba uzavírací značka a nepoužívá se.

Pokud značka omylem obsahuje klíčové slovo, které není v HTML nalezeno, je značka zcela ignorována.

Když je dokument zobrazen v prohlížeči, samotné značky se nezobrazují, ale ovlivňují způsob zobrazení dokumentu.

Atributy značek

Úvodní značky mohou často obsahovat atributy, ovlivnění efektu vytvořeného tagem. Atributy jsou další klíčová slova oddělená od klíčové slovo tag a oddělené od sebe mezerami.

Některé atributy vyžadují specifikaci hodnoty atributů. Tato hodnota je od klíčového slova oddělena rovnítkem ( = ). Hodnota atributu musí být uzavřena v uvozovkách, ale v mnoha případech lze uvozovky bez újmy vynechat.

Závěrečné značky nikdy neobsahují atributy.

Komentáře

V programovacích jazycích je běžné používat komentáře – textové řádky, které nejsou součástí programu, ale slouží k vysvětlení. Jazyk HTML má také tuto schopnost.

Komentáře v HTML začínají speciální značkou . Komentář může obsahovat libovolné znaky kromě znaku většího než ( > ), a proto nemůže obsahovat značky.

Příklady HTML tagů:

, mezi které je umístěn „úřední“ název dokumentu. Většina prohlížečů běžících na Windows používá tento nadpis k vyplnění záhlaví okna prohlížeče.

3. Text samotného dokumentu se nachází v tělo dokumentu. Tělo dokumentu se nachází mezi značkami A .

Čtyři uvedené párové značky definují základní strukturu dokumentu HTML. Objevují se (nebo jsou implikovány) ve všech dokumentech HTML.

V praxi je možné určit umístění těchto strukturálních hlavních tagů, i když chybí. Pokud tedy značky , A , stejně jako jejich odpovídající uzavírací značky jsou vynechány, pak může program prohlížeče sám určit místo, kde se měly nacházet. Štítek