OBLIKOVANJE SPLETNIH STRANI

Faze izdelave spletne strani

Izdelava spletne strani poteka v več fazah – od ideje do njene izvedbe. Če želite ustvariti resnično zanimiv in uporaben izdelek, morate iti skozi naslednje korake.

Analiza in načrtovanje. Analiza prednosti in slabosti konkurenti, informacijska zasnova spletnega mesta, razvoj njegovega koncepta, ocena ciljne publike.

Pisanje vsebine. Spodaj vsebino se nanaša na informacijsko vsebino spletnega mesta. Izraz se uporablja za označevanje ideološke vsebine spletne strani.

Ustvarjalno. Ustvarjalno- izraz za označevanje vizualne komponente spletne strani. To vključuje razvoj dizajna, grafičnih elementov, grafične obdelave in vsega, kar je povezano s tem.

Pisanje kode spletne strani. Programiranje spletnih datotek, pisanje funkcionalnega dela

Testiranje. Na tej stopnji se preveri vse: enostavnost navigacije, celovitost podatkov, pravilnost povezav in črkovanje, poleg tega vsi brskalniki ne interpretirajo istih oznak HTML na enak način.

Objava. Postavitev spletne strani na internetu. Večina ponudnikov internetnih storitev (ISP) ponuja storitev gostovanja domačih spletnih strani brezplačno (to storitev imenujemo spletno gostovanje). Za objavo lahko svojo spletno stran gostite pri ponudniku ali uporabite druge možnosti.

Podpora. Treba se je odločiti, kako bodo dodani novi razdelki in materiali ter kaj se bo zgodilo s starimi. Morda bo treba ustvariti arhiv novic, ki bo vseboval novice, ki so izgubile pomen. Še bolj pomembno pa je redno posodabljanje informacij na spletnem mestu, da bo ostalo privlačno.

Terminologija spletnega oblikovanja

Spletni brskalnik- aplikacijski program, namenjen interpretaciji kod dokumentov HTML in prikazu hiperbesedilnega dokumenta na računalniškem zaslonu. Najpogosteje uporabljeni brskalniki - internet Explorer,Opera, Mozilla Firefox, Google Chrome. Poleg izraza »brskalnik« se uporabljata sinonima: »brskalnik« in »navigator«.

Spletna stran- niz med seboj povezanih spletnih strani in datotek, podobnih po pomenu. Vsako spletno mesto ima eno spletno stran, imenovano domača stran oz domača stran. Vsi obiskovalci spletnega mesta najprej pridejo nanj, nato pa preko hiperpovezav pridejo na druge strani spletnega mesta.

Spletna stran (HTML dokument) je besedilna datoteka na jezik HTML format *.htm ali *.html, objavljen na WWW. Poleg besedila lahko spletna stran vsebuje grafiko, animacije, videoposnetke, glasbo in hiperbesedilne povezave, s katerimi lahko krmarite in si ogledujete druge spletne strani.

Eden od načinov za ustvarjanje spletnih strani (ali dokumentov HTML) je uporaba urejevalnik besedil Beležnica, vgrajen v Windows. V tem urejevalniku se ustvari datoteka spletne strani, ki se shrani s pripono *.htm, rezultati pa se nato pregledujejo v brskalniku.

Izdelava spletnih strani z uporabo jezika HTML

Jezik HTML(Hyper Text Markup Language) je označevalni jezik hiperbesedilnih dokumentov, ki se uporablja za pisanje spletnih mest.

Jezik HTML vam omogoča:

‒ ustvarjanje in urejanje spletnih mest, vključno z domačo spletno stranjo, ki jih je mogoče nato objaviti na internetu;

- urejanje dokumentov HTML, prejetih iz interneta, tako da delujejo vsi objekti, vdelani v dokument (slike, animacije itd.);

- ustvarjati multimedijske predstavitve, diaprojekcije, predstavitveni projekti, zahvaljujoč hiperbesedilnim povezavam in zmožnosti vstavljanja risb, diagramov, animacij, video posnetkov, glasbene in govorne spremljave, posebnih učinkov besedila (na primer plazeče črte) v dokument HTML.

OSNOVNI POJMI JEZIKA HTML

Element je konstrukcija jezika HTML ali vsebnik, ki vsebuje podatke.

Spletna stran je niz elementov.

Oznaka sta začetna in končna oznaka elementa. Oznake določajo meje delovanja elementov in ločujejo elemente drug od drugega. Oznake so v oglatih oklepajih, na primer: . Pred končno oznako, če to zahteva jezikovna sintaksa, stoji poševnica:.

Okvir- območje hiperbesedilnega dokumenta z lastnimi drsnimi trakovi. Okvirji vam omogočajo, da strani razdelite na pravokotna področja, od katerih vsako prikazuje svoje lastno stran. Na stran lahko postavite enega ali več okvirjev (ta stran se imenuje stran z okvirji oz nabor okvirjev).

Oblika- območje hipertekstnega dokumenta, ki je potrebno za organiziranje povratne informacije z obiskovalci strani.

Programček- majhen aplikacijski program, prenesen na odjemalčev računalnik v obliki ločena datoteka in se zažene med ogledom spletne strani.

Skripta- program, vključen v spletno stran za razširitev njenih zmogljivosti.

Umestitev (nalaganje)- kopiranje dokumenta iz odjemalčevega računalnika na spletni strežnik - uporablja se pri izdelavi lastne spletne strani (tj. pri objavi).

Pixel- najmanjša barvna točka na zaslonu monitorja.

SPLOŠNA STRUKTURA PREPROSTEGA DOKUMENTA HTML

Splošna struktura preprostega dokumenta HTML je:

<СОММЕNT> Komentar

HTML ne razlikuje med velikimi in malimi črkami, zato bi lahko zgornji primer izgledal takole:

Končna oznaka je videti enako kot začetna oznaka in se od nje razlikuje po poševnici pred besedilom v oglatih oklepajih. IN v tem primeru oznaka - o dopolnitvi naslovnega besedila.

Nekatere oznake, kot npr

(oznaka, ki definira odstavek) ne zahteva končne oznake, vendar njena uporaba izboljša berljivost in strukturo izvornega besedila dokumenta.

Ko spletni brskalnik prejme dokument, določi, kako naj se dokument interpretira. Prva oznaka, ki se pojavi v dokumentu, mora biti oznaka . Ta oznaka pove spletnemu brskalniku, da je vaš dokument napisan z uporabo HTML. Minimalni dokument HTML bi izgledal takole:

...telo dokumenta...

Glava dokumenta

Oznako glave dokumenta je treba uporabiti takoj za oznako in nikjer drugje v telesu dokumenta. Ta oznaka je splošen opis dokument. Izogibajte se vstavljanju besedila znotraj oznake . Začetna oznaka postavljen tik pred oznako Naslov dokumenta , ki se nahaja znotraj -oznake, kot je prikazano v zgornjem primeru. Naslov dokumenta se ne prikaže, ko je sam dokument prikazan v oknu.

Komentarji

Kot kateri koli jezik tudi HTML omogoča vstavljanje komentarjev v telo dokumenta, ki se shranijo, ko se dokument prenese po omrežju, vendar jih brskalnik ne prikaže. Sintaksa komentarja:

Komentarji se lahko pojavijo kjer koli v dokumentu in v poljubni količini.

Oznake telesa dokumenta identificirajo komponente dokumenta HTML, prikazanega v oknu. Telo dokumenta lahko vsebuje povezave do drugih dokumentov, besedilo in druge oblikovane informacije.

Telo dokumenta

Telo dokumenta mora biti med oznakama in. To je del dokumenta, ki je prikazan kot besedilna in grafična (semantična) informacija vašega dokumenta.

Oznaka odstavka

Za razliko od večine urejevalnikov besedil se v dokumentu HTML vrnitve v prvi red na splošno ne upoštevajo. Fizični prelom odstavka se lahko nahaja kjer koli v izvornem besedilu dokumenta (za lažje branje). Vendar brskalnik ločuje odstavke samo, če obstaja oznaka

Če odstavkov ne ločite z oznako

Vaš dokument bo prikazan kot en velik odstavek.

Hiperbesedilne povezave so ključna komponenta, zaradi katere je SPLET privlačen za uporabnike. Z dodajanjem hiperbesedilnih povezav (v nadaljevanju povezave) naredite nabor dokumentov povezan in strukturiran, kar uporabniku omogoča čim hitrejše in priročnejše pridobivanje informacij, ki jih potrebuje.

Povezave imajo standardno obliko, ki omogoča brskalniku, da jih interpretira in izvede potrebne funkcije (metode klica) glede na vrsto povezave. Povezave lahko kažejo na drug dokument, določeno lokacijo znotraj tega dokumenta ali izvajajo druge funkcije, kot je zahtevanje datoteke prek FTP, da jo brskalnik prikaže. URL lahko kaže na določeno lokacijo v absolutni poti ali pa na dokument v trenutni poti, ki se pogosto uporablja pri organiziranju velikih strukturiranih SPLETNIH mest. Vrnite se na prejšnjo povezavo, če je prišlo do premika znotraj dokumenta. Če uporabljate povezave v dokumentu in nato pritisnete tipko Nazaj, ne boste šli na prejšnjo povezavo, ampak se boste vrnili na del dokumenta, ki ste si ga ogledali prej.

Eden najbolj privlačnih prekleti splet-možnost vključitve povezav do grafičnih in drugih vrst podatkov v dokument HTML. To se naredi z oznako . Z uporabo te oznake lahko znatno izboljšate videz in funkcionalnost dokumentov.

Obstajata dva načina za uporabo grafike v dokumentih HTML. Prvi je vdelava grafičnih podob v dokument, ki uporabniku omogoča ogled slik neposredno v kontekstu drugih elementov dokumenta.

To je najpogosteje uporabljena tehnika pri oblikovanju dokumentov, včasih imenovana "inline image".

Nekateri brskalniki WWW omogočajo uporabniku, da z izpolnitvijo posebnega obrazca, ki vrne nastalo vrednost, izvaja določena dejanja na vašem strežniku WWW. Ko obrazec interpretira spletni brskalnik, se ustvarijo posebni zaslonski elementi grafičnega uporabniškega vmesnika, kot so vnosna polja, potrditvena polja, izbirni gumbi, spustni meniji, pomični seznami, gumbi itd. Ko uporabnik izpolni obrazec in klikne gumb "Oddaj" (ODDAJ je posebna vrsta gumba, ki je določena pri opisu dokumenta), se podatki, ki jih je uporabnik vnesel v obrazec, pošljejo na HTTP strežnik v obdelavo in prenos. drugim programom, ki se izvajajo pod strežnikom, v skladu z vmesnikom CGI (Common Gateway Interface).

Ko opisujete obrazec, ima vsak element za vnos podatkov oznako . Ko uporabnik postavi podatke v element obrazca, se informacije postavijo v razdelek VALUE tega elementa. Ena najbolj privlačnih funkcij spleta je možnost vključitve povezav do grafike in drugih vrst podatkov v dokument HTML.

Čeprav se spletne strani na računalniškem zaslonu zdijo oblikovane, HTML ni namenjen oblikovanju dokumentov, ker togo oblikovanje in natančno pozicioniranje besedilnih elementov na strani vodi do omejitev, ki so v internetu nesprejemljive.

Tako na primer, ko oblikujemo besedilo z urejevalnik besedil Beseda, mi zagotovo določite, kako naj bo to besedilo videti, ko bo natisnjeno zelo specifičen tiskalnik in na papirju določen format. Ko je dokument objavljen na internetu, je nemogoče predvideti, kateri računalnik bo uporabljen za ogled, ali bo ta računalnik sploh imel monitor.

Morda se bo besedilo pojavilo na zaslonu zagnanega računalnika sistem Windows v oknu enega od sodobnih brskalnikov. Morda bo to besedilni brskalnik (ki ne more prikazati grafike), ki deluje v MS-DOS. Morda besedilo dokumenta sploh ne bo prikazano na zaslonu, ampak bo predvajano na glas s pomočjo sintetizatorja govora. Za slepega uporabnika se lahko dokument prikaže na posebni napravi v Braillovi pisavi.

Zaradi potrebe po pripravi dokumentov za tako različne naprave HTML ni namenjen opisovanju formata dokumenta. Služi za funkcionalna oznaka dokumenta, to pomeni, da vam omogoča določitev imenovanje fragmenti besedila.

Na primer, če je v besedilu naslov, potem koda HTML preprosto nakazuje, da je ustrezni fragment naslov. Ko prejme takšno kodo, se pregledovalni program (brskalnik) sam "odloči", kaj bo naredil z naslovom. Morda ga bo še več prikazala velik tisk, ali pa ga morda poravnajte na sredino zaslona. Možno je, da sintetizator govora, ki reproducira besedilo dokumenta, uporabi kodo glave, da poveča glasnost in naredi potreben intonacijski premor.

Jezik HTML ima še nekaj ukazov za oblikovanje, vendar je na splošno treba ločiti vsebino in izvedba dokumenta se strogo vzdržuje. IN Najnovejša različica Ukazi za oblikovanje HTML (4.0) na splošno niso priporočljivi.

Jezikovne kode HTML, ki se uporabljajo za označevanje izvornega besedila, se imenujejo oznake. Oznaka je niz znakov. Vse oznake se začnejo s simbolom manj kot ( < ) in se konča s simbolom več kot ( > ). Ta par simbolov se včasih imenuje kotni oklepaji. Za odprtim kotnim oklepajem pride ključna beseda, definirajočo oznako.

Vsaka oznaka v HTML ima poseben namen. Velikost črk v imenih oznak ni pomembna - uporabite lahko male ali velike črke, čeprav je običajno, da se oznake razlikujejo od običajnega besedila dokumenta, z velikimi črkami.

Praviloma ena HTML oznaka vpliva le na del dokumenta, na primer na odstavek. V takih primerih se uporabljajo seznanjene oznake: odpiranje in zapiranje. Začetna oznaka ustvari učinek, zaključna oznaka pa učinek zaključi. Zaključne oznake se začnejo s poševnico ( / ).

Nekatere oznake imajo enkraten učinek tam, kjer se pojavijo. V tem primeru zaključna oznaka ni potrebna in se ne uporablja.

Če oznaka po pomoti vsebuje ključno besedo, ki je ni v HTML-ju, se oznaka v celoti prezre.

Ko je dokument prikazan v brskalniku, same oznake niso prikazane, vendar vplivajo na način prikaza dokumenta.

Atributi oznak

Začetne oznake lahko pogosto vsebujejo lastnosti, vpliva na učinek, ki ga ustvari oznaka. Atributi so dodatne ključne besede, ločene od ključna beseda oznako in med seboj ločeni s presledki.

Nekateri atributi zahtevajo specifikacijo vrednosti atributov. Ta vrednost je od ključne besede ločena z enačajem ( = ). Vrednost atributa mora biti v narekovajih, vendar je v mnogih primerih narekovaje mogoče brez škode izpustiti.

Zaključne oznake nikoli ne vsebujejo atributov.

Komentarji

V programskih jezikih je običajna uporaba komentarjev - besedilnih vrstic, ki niso del programa, ampak služijo za razlago. To možnost ima tudi jezik HTML.

Komentarji v HTML se začnejo s posebno oznako . Komentar lahko vsebuje poljubne znake razen znaka večje od ( > ), zato ne more vključevati oznak.

Primeri oznak HTML:

, med katerima se nahaja “uradni” naslov dokumenta. Večina brskalnikov, ki delujejo v sistemu Windows, uporablja ta naslov za zapolnitev naslovne vrstice okna brskalnika.

3. Besedilo samega dokumenta se nahaja v telo dokumenta. Telo dokumenta se nahaja med oznakama in .

Navedene štiri seznanjene oznake definirajo osnovno strukturo dokumenta HTML. Pojavljajo se (ali so nakazani) v vseh dokumentih HTML.

V praksi je mogoče določiti lokacijo teh strukturnih glavnih oznak, tudi če jih ni. Zato, če oznake , in , kot tudi njihove ustrezne zaključne oznake izpuščene, lahko program brskalnika sam določi mesto, kjer bi se morale nahajati. Oznaka