DIZAJN WEB STRÁNKY

Etapy tvorby webovej stránky

Vytvorenie webovej stránky zahŕňa niekoľko fáz – od predstavenia nápadu až po jeho realizáciu. Ak chcete vytvoriť skutočne zaujímavý a užitočný produkt, musíte prejsť nasledujúcimi krokmi.

Analýza a dizajn. Analýza silných stránok a slabiny konkurenti, informačný dizajn Webstránka, vývoj jej konceptu, posúdenie cieľového publika.

Písanie obsahu. Pod obsahu odkazuje na informačný obsah stránky. Tento výraz sa používa na označenie ideologického obsahu webovej lokality.

Kreatívne. Kreatívne- termín označujúci vizuálny komponent webovej stránky. To zahŕňa vývoj dizajnu, grafické prvky, grafické spracovanie a všetko s tým spojené.

Písanie kódu webovej stránky. Programovanie webového súboru, zápis funkčnej časti

Testovanie. V tejto fáze sa kontroluje všetko: jednoduchosť navigácie, integrita údajov, správnosť odkazov a pravopis, navyše nie všetky prehliadače interpretujú rovnaké značky HTML rovnakým spôsobom.

Publikácia. Umiestnenie webovej stránky na internete. Väčšina poskytovateľov internetových služieb (ISP) poskytuje službu hosťovania domovských webových stránok zadarmo (táto služba sa nazýva webhosting). Ak chcete publikovať, môžete hosťovať svoju webovú lokalitu u poskytovateľa alebo použiť iné možnosti.

Podpora. Je potrebné rozhodnúť, ako pribudnú nové časti a materiály a čo bude so starými. Možno bude potrebné vytvoriť archív správ, ktorý bude obsahovať správy, ktoré stratili svoju relevantnosť. Ešte dôležitejšie je pravidelne aktualizovať informácie na webovej stránke, aby sa zabezpečilo, že zostane atraktívna.

Terminológia webového dizajnu

webový prehliadač- aplikačný program určený na interpretáciu kódov HTML dokumentov a zobrazenie hypertextového dokumentu na obrazovke počítača. Najčastejšie používané prehliadače - internet Explorer,Opera, Mozilla Firefox, Google Chrome. Spolu s výrazom „prehliadač“ sa používajú synonymá: „prehliadač“ a „navigátor“.

webové stránky- súbor vzájomne prepojených, významom podobných webových stránok a súborov. Každá webová lokalita má jednu webovú stránku nazývanú domovská stránka alebo domovskej stránke. Všetci návštevníci webovej lokality sa na ňu najskôr dostanú a potom sa pomocou hypertextových odkazov dostanú na iné stránky webovej lokality.

webstránka (HTML dokument) je textový súbor na jazyk HTML formát *.htm alebo *.html, zverejnené na WWW. Okrem textu môže webová stránka obsahovať grafiku, animácie, videoklipy, hudbu, ako aj hypertextové odkazy, pomocou ktorých môžete prechádzať na iné webové stránky a prezerať si ich.

Jedným zo spôsobov vytvárania webových stránok (alebo dokumentov HTML) je použitie textový editor Poznámkový blok, zabudovaný do systému Windows. V tomto editore sa vytvorí súbor webovej stránky, ktorý sa uloží s príponou *.htm a výsledky sa následne zobrazia pomocou prehliadača.

Vytváranie webových stránok pomocou jazyka HTML

Jazyk HTML(Hyper Text Markup Language) - hypertextový jazyk označenie dokumentu, ktorý sa používa na písanie webových stránok.

Jazyk HTML vám umožňuje:

‒ vytvárať a upravovať webové stránky vrátane domovskej webovej stránky, ktoré potom možno umiestniť na internet;

- upravovať HTML dokumenty prijaté z internetu tak, aby fungovali všetky objekty vložené do dokumentu (obrázky, animácie atď.);

- vytvárať multimediálne prezentácie, prezentácie, demo projekty, vďaka hypertextovým odkazom a možnosti vkladať do HTML dokumentu kresby, diagramy, animácie, videoklipy, hudbu a rečový sprievod, textové špeciálne efekty (napríklad plíživú čiaru).

ZÁKLADNÉ KONCEPTY JAZYKA HTML

Element je konštrukcia jazyka HTML alebo kontajner obsahujúci údaje.

webstránka je súbor prvkov.

Tag sú počiatočné a koncové značky prvku. Tagy definujú hranice pôsobenia prvkov a oddeľujú prvky od seba. Značky sú uzavreté v lomených zátvorkách, napríklad: . Pred koncovou značkou, ak to vyžaduje syntax jazyka, je lomka:.

Rám- oblasť hypertextového dokumentu s vlastnými posuvníkmi. Rámy umožňujú rozdeliť strany na obdĺžnikové oblasti, z ktorých každá zobrazuje svoju vlastnú vlastnú stránku. Na stránku môžete umiestniť jeden alebo viac rámov (táto stránka sa nazýva stránka rámov alebo frameset).

Formulár- oblasť hypertextového dokumentu, ktorá je potrebná na organizáciu spätná väzba s návštevníkmi stránky.

Applet- malý aplikačný program prenesený do počítača klienta vo forme samostatný súbor a spustí sa pri prezeraní webovej stránky.

Skript- program zahrnutý do webovej stránky na rozšírenie jej možností.

Umiestnenie (nahrať)- kopírovanie dokumentu z počítača klienta na web server - používa sa pri vytváraní vlastnej webovej stránky (t.j. pri jej publikovaní).

Pixel- najmenší farebný bod na obrazovke monitora.

VŠEOBECNÁ ŠTRUKTÚRA JEDNODUCHÉHO HTML DOKUMENTU

Všeobecná štruktúra jednoduchého HTML dokumentu je:

<СОММЕNT> Komentár

HTML nerozlišuje veľké a malé písmená, takže príklad vyššie môže vyzerať takto:

Koncová značka vyzerá rovnako ako počiatočná značka a líši sa od nej lomkou pred textom v lomených zátvorkách. IN v tomto príklade tag - o dokončení nadpisového textu.

Niektoré značky ako napr

(značka, ktorá definuje odsek) nevyžadujú koncovú značku, ale jej použitie dáva zdrojovému textu dokumentu lepšiu čitateľnosť a štruktúru.

Keď webový prehliadač prijme dokument, určí, ako sa má dokument interpretovať. Úplne prvá značka, ktorá sa objaví v dokumente, musí byť značka . Táto značka informuje webový prehliadač, že váš dokument je napísaný pomocou HTML. Minimálny HTML dokument by vyzeral takto:

...telo dokumentu...

Hlavička dokumentu

Štítok hlavy dokumentu by sa mal použiť hneď za štítkom a nikde inde v tele dokumentu. Táto značka je všeobecný popis dokument. Neumiestňujte do značky žiadny text . Štartovacia značka umiestnené bezprostredne pred značkou Názov dokumentu , ktorý sa nachádza vo vnútri -tagy, ako je uvedené v príklade vyššie. Pri zobrazení samotného dokumentu v okne sa nezobrazí názov dokumentu.

Komentáre

Ako každý jazyk, aj HTML umožňuje vkladať komentáre do tela dokumentu, ktoré sa uložia pri prenose dokumentu cez sieť, ale prehliadač ich nezobrazí. Syntax komentára:

Komentáre sa môžu objaviť kdekoľvek v dokumente a v akomkoľvek množstve.

Značky tela dokumentu identifikujú komponenty dokumentu HTML zobrazené v okne. Telo dokumentu môže obsahovať odkazy na iné dokumenty, text a iné formátované informácie.

Telo dokumentu

Telo dokumentu musí byť medzi značkami A. Toto je časť dokumentu, ktorá sa zobrazuje ako textová a grafická (sémantická) informácia vášho dokumentu.

Značka odseku

Na rozdiel od väčšiny textových procesorov sú návraty vozíka v dokumente HTML vo všeobecnosti ignorované. Fyzický zlom odseku môže byť umiestnený kdekoľvek v zdrojovom texte dokumentu (aby sa dal ľahšie čítať). Prehliadač však oddeľuje odseky iba vtedy, ak existuje značka

Ak odseky neoddeľujete značkou

Váš dokument sa zobrazí ako jeden veľký odsek.

Hypertextové odkazy sú kľúčovým komponentom, vďaka ktorému je WEB pre používateľov atraktívny. Pridaním hypertextových odkazov (ďalej len odkazy) vytvoríte súbor dokumentov prepojených a štruktúrovaných, čo umožňuje užívateľovi získať potrebné informácie čo najrýchlejšie a najpohodlnejšie.

Odkazy majú štandardný formát, ktorý umožňuje prehliadaču ich interpretovať a spustiť. potrebné funkcie(metódy volania) v závislosti od typu odkazu. Odkazy môžu ukazovať na iný dokument, konkrétne miesto v tomto dokumente alebo vykonávať iné funkcie, ako je napríklad vyžiadanie súboru cez FTP, aby ho prehliadač zobrazil. Adresa URL môže ukazovať na konkrétne miesto v absolútnej ceste alebo môže ukazovať na dokument v aktuálnej ceste, čo sa často používa pri organizovaní veľkých štruktúrovaných webových stránok. Vráťte sa na predchádzajúci odkaz, ak došlo k pohybu v rámci dokumentu. Ak použijete odkazy v dokumente a potom stlačíte kláves Späť, neprejdete na predchádzajúci odkaz, ale vrátite sa na časť dokumentu, ktorú ste si prezerali predtým.

Jeden z najatraktívnejších prekliaty web-schopnosť zahrnúť odkazy na grafické a iné typy údajov v dokumente HTML. To sa vykonáva pomocou značky . Použitie tohto tagu môže výrazne zlepšiť vzhľad a funkčnosť dokumentov.

Existujú dva spôsoby použitia grafiky v dokumentoch HTML. Prvým je vkladanie grafických obrázkov do dokumentu, čo umožňuje užívateľovi vidieť obrázky priamo v kontexte ostatných prvkov dokumentu.

Toto je najpoužívanejšia technika v dizajne dokumentov, niekedy nazývaná "inline image".

Niektoré WWW prehliadače umožňujú používateľovi vyplnením špeciálneho formulára, ktorý vráti výslednú hodnotu, vykonávať určité akcie na vašom WWW serveri. Keď je formulár interpretovaný webovým prehliadačom, vytvoria sa špeciálne prvky GUI obrazovky, ako sú vstupné polia, začiarkavacie políčka, prepínače, rozbaľovacie ponuky, rolovacie zoznamy, tlačidlá atď. Keď používateľ vyplní formulár a klikne na tlačidlo „Odoslať“ (ODOSLAŤ je špeciálny typ tlačidla, ktorý sa uvádza pri popise dokumentu), informácie zadané používateľom do formulára sa odošlú na server HTTP na spracovanie a prenos. na iné programy bežiace pod serverom v súlade s rozhraním CGI (Common Gateway Interface).

Keď popisujete formulár, každý prvok zadávania údajov má značku . Keď používateľ umiestni údaje do prvku formulára, informácie sa umiestnia do sekcie VALUE tohto prvku. Jednou z najatraktívnejších funkcií webu je možnosť zahrnúť do dokumentu HTML odkazy na grafiku a iné typy údajov.

Aj keď sa webové stránky javia naformátované na obrazovke počítača, HTML nie je určené na formátovanie dokumentov, pretože nepružný dizajn a presné umiestnenie textových prvkov na stránke vedie k obmedzeniam, ktoré sú na internete neprijateľné.

Takže napríklad, keď formátujeme text pomocou textový procesor Slovo, my určite určiť, ako by mal tento text vyzerať po vytlačení veľmi špecifickú tlačiareň a na papieri špecifikovaný formát. Keď je dokument zverejnený na internete, nie je možné predpovedať, ktorý počítač sa použije na jeho zobrazenie, ani či bude mať tento počítač monitor.

Možno sa text objaví na obrazovke spusteného počítača systém Windows v okne jedného z moderných prehliadačov. Možno to bude textový prehliadač (neschopný zobrazovať grafiku) bežiaci na systéme MS-DOS. Možno sa text dokumentu vôbec nezobrazí na obrazovke, ale bude sa prehrávať nahlas pomocou syntetizátora reči. Nevidiacim používateľom je možné dokument zobraziť na špeciálnom zariadení v Braillovom písme.

Kvôli potrebe pripraviť dokumenty pre takú škálu zariadení nie je HTML určený na popis formátu dokumentu. Slúži na funkčné označenie dokumentov, to znamená, že vám umožňuje určiť vymenovanie fragmenty textu.

Napríklad, ak je v texte nadpis, potom kód HTML jednoducho naznačuje, že príslušný fragment je nadpis. Po prijatí takéhoto kódu sa samotný divácky program (prehliadač) „rozhodne“, čo s titulom urobí. Možno to ukáže viac veľkým písmom alebo ho možno zarovnať na stred obrazovky. Je možné, že syntetizátor reči, ktorý reprodukuje text dokumentu, použije kód hlavičky na zvýšenie hlasitosti a na vykonanie potrebnej intonačnej pauzy.

Jazyk HTML má stále nejaké formátovacie príkazy, ale všeobecným kurzom je oddelenie obsahu a vyhotovenie dokumentu je prísne zachované. IN Najnovšia verzia Príkazy na formátovanie HTML (4.0) sa vo všeobecnosti neodporúčajú.

Kódy jazyka HTML používané na označenie zdrojového textu sa nazývajú značky. Značka je množina znakov. Všetky značky začínajú symbolom menej ako ( < ) a končí symbolom väčšieho ako ( > ). Tieto dvojice symbolov sa niekedy nazývajú uhlové konzoly. Po otvorení prichádza uholník kľúčové slovo, definujúca značka.

Každá značka v HTML má špeciálny účel. Na veľkosti písmen v názvoch značiek nezáleží – môžu sa použiť malé alebo veľké písmená, aj keď je bežné používať veľké písmená na rozlíšenie značiek od normálneho textu dokumentu.

Spravidla jeden HTML tag ovplyvňuje iba časť dokumentu, napríklad odsek. V takýchto prípadoch sa používajú párové značky: otvorenie A zatváranie.Úvodná značka vytvorí efekt a záverečná značka efekt ukončí. Záverečné značky začínajú lomkou ( / ).

Niektoré značky poskytujú jednorazový efekt tam, kde sa objavia. V tomto prípade nie je potrebný uzatvárací štítok a nepoužíva sa.

Ak značka omylom obsahuje kľúčové slovo, ktoré sa nenachádza v HTML, značka sa úplne ignoruje.

Keď sa dokument zobrazí v prehliadači, samotné značky sa nezobrazia, ale ovplyvňujú spôsob zobrazenia dokumentu.

Atribúty značky

Otváracie značky môžu často obsahovať atribúty, ovplyvňujúci efekt vytvorený tagom. Atribúty sú dodatočné kľúčové slová oddelené od kľúčové slovo a navzájom oddelené medzerami.

Niektoré atribúty vyžadujú špecifikáciu hodnoty atribútov. Táto hodnota je oddelená od kľúčového slova znakom rovnosti ( = ). Hodnota atribútu musí byť uzavretá v úvodzovkách, ale v mnohých prípadoch môžu byť úvodzovky bez akéhokoľvek poškodenia vynechané.

Záverečné značky nikdy neobsahujú atribúty.

Komentáre

V programovacích jazykoch je bežné používať komentáre – textové riadky, ktoré nie sú súčasťou programu, ale slúžia na vysvetlenie. Jazyk HTML má tiež túto schopnosť.

Komentáre v HTML začínajú špeciálnou značkou . Komentár môže obsahovať ľubovoľné znaky okrem znaku väčšieho ako ( > ), a preto nemôže obsahovať značky.

Príklady značiek HTML:

, medzi ktoré je umiestnený „úradný“ názov dokumentu. Väčšina prehliadačov so systémom Windows používa tento názov na vyplnenie záhlavia okna prehliadača.

3. Samotný text dokumentu sa nachádza v telo dokumentu. Telo dokumentu sa nachádza medzi značkami A .

Štyri uvedené párové značky definujú základnú štruktúru dokumentu HTML. Objavujú sa (alebo sú implikované) vo všetkých dokumentoch HTML.

V praxi je možné určiť umiestnenie týchto štrukturálnych hlavných tagov, aj keď chýbajú. Ak teda značky , A , ako aj ich zodpovedajúce uzatváracie značky sú vynechané, potom môže program prehliadača sám určiť miesto, kde sa mali nachádzať. Tag