CREAREA UNUI SITE WEB

CREAREA UNUI SITE WEB

Limbajul de marcare HyperText (HyperText Markup Language - HTML)este limbajul specific World Wide Web. Ori de câte ori deschidem un document WEB, executam de fapt un acces la un document pe care cineva l-a scris în HTML. Toate aceste formatari de documente pe care le vedem în WEB sunt realizate în HTML, iar hiperlegaturile, pe care le putem urmari atât de comod printr-un simplu clic, sunt controlate, din HTML.

STRUCTURA UNEI PAGINI WEB

Mai exista si pagini optionale, însa majoritatea paginilor WEB contin multe dintre elementele descrise în aceasta sectiune. Este important de stiut care sunt aceste componente, deoarece operatiunea principala în editarea paginilor WEB este stabilirea continutului fiecarei componente standard, o problema importanta fiind generata de modurile diferite în care trateaza fiecare browser diferitele componente.

În mod obisnuit, componentele care sunt vizibile vizitatorilor datorita browserului, sunt urmatoarele:

• Titlul(title), pe care browserele grafice îl afiseaza de obicei în bara de titlu a ferestrei în care apare pagina
• Subtitlurile(headings), pe care în mod normal browserele la afiseaza cu caractere mari, aldine sau folosind un alt mod de evidentiere. O pagina WEB poate avea mai multe subtitluri care pot fi imbricate pâna la o adâncime de sase niveluri. Aceasta înseamna ca pot exista subtitluri, sub-subtitluri etc.
• Textul normal, care reprezinta textul de baza din pagina. De obicei, liniile si blocurile cu text normal sunt denumite de catre autorii WEB paragrafe. În limbajul Netscape Editor, acest termen poate desemna orice bloc distinct de cuvinte aflat în pagina, indiferent daca este subtitlu, text normal sau alt element determinate de proprietatile asociate paragrafului respectiv
• Semnatura(signature), afisata de obicei în partea de jos a paginii. În mod obisnuit semnatura indica autorul paginii si include adesea adresa de posta electronica a autorului pentru ca vizitatorii sa poata trimite come 333e47d ntarii sau întrebari referitoare la pagina
• Riglele orizontale, care îmbraca pagina si o împart în sectiuni logice
• Imaginile inline, care sunt incluse în aspectul paginii pentru a o înviora sau pentru a transmite anumite informatii
• Modulul de fundal(background pattern), o imagine inline care, spre deosebire de imaginile obisnuite, acopera întregul fundal al paginii, astfel încât textul si celelalte imagini apar deasupra ei
• Animatiile, text sau imagini care apar în pagina WEB si se misca într-un fel sau altul. Imaginile pot sa se succeada într-un, iar textul poate sa clipeasca sau sa defileze pe ecran
• Hiperlegaturile catre diferite elemente: alte pagini WEB, fisiere multimedia(imagini externe, animatii, sunete, secvente video), fisiere document, adrese se posta electronica si fisiere sau programe de pe alte tipuri de servere
• Imaginile harta(imagemaps), imagini inline în care diferite zone ale imaginii au asociate legaturi diferite
• Listele care pot fi numerotate, marcate cu bulet-uri
• Formularele, zone în care vizitatorii pot completa câmpurile libere pentru a raspunde unui chestionar online, pentru a comanda bunuri sau servicii etc.

COMPONENTE INVIZIBILE

• Identificare: Fisierele pagina WEB pot contine felurite informatii de identificare printre care numele sau adresa de posta electronica a autorului si cadouri speciale care ajuta mecanismele de cautare la determinarea subiectului si a continutului paginii
• Comentarii apar sub forma unui text pe care autorul îl doreste sa fie vazut numai în cazul citirii directe a codului HTML al paginii, nu si în cazul afisarii paginii de catre u browser
• HTML este un format de fisier în care sunt stocate paginile WEB. Un fisier HTML nu este altceva decât un fisier text cu coduri speciale care indica browserului cum sa afiseze fisierul: dimensiunile pentru fiecare bloc de text, blocurile de amplasare a imaginilor si altele

Când cream o pagina WEB, indiferent cum o facem - cu ajutorul unui generator pe pagina., utilizând un editor ca Netscape Composer ori Microsoft FrentPage sau pur si simplu, tastând-o într-un fisier text - ceea ce obtinem este un fisier HTML care poate fi publicat pe un server WEB.

Un fisier HTML contine tot textul care apare în pagina, plus codurile, anumite etichete care indica fiecare portiune de text ca pe un element distinct al paginii.

Scopul majoritatii editoarelor de pagini WEB, inclusiv Netscape composer este de a va feri sa lucrati direct cu codul HTML. În schimb într-un mediu WYSIWYG (What you see is what you get) si puteti aranja si formata textul si grafica de pe ecran asa cum ar trebui sa apara când pagina este vazuta cu browserul.

Interne sau externe, fisierele multimedia pe care le utilizam în pagina noastra WEB impun browserului niste cerinte. Astfel pentru a afisa imaginile inline acesta trebuie sa fie capabil sa afiseze elemente grafice. Fisierele multimedia externe pot fi redate chiar de catre browser sau de catre o aplicatie ajutatoare.

Când ne hotarâm sa includem elemente multimedia în pagina noastra, trebuie sa alegem cu grija tipurile de fisiere pe care le folosim. Faptul ca fisierele HTML contin numai text permite utilizatorilor cu diferite tipuri de calculatoare sa acceseze paginile WEB. Este mai putin probabil ca fisierele grafice sa poata fi citite de o gama larga de calculatoare, si cu atât mai putin, fisierele care contin sunet sau secvente video.

CREAREA UNEI PAGINI WEB

În meniul FILE al oricarei componente avem trei modalitati de a începe o sesiune de creare a unei pagini WEB.

FILE, NEW, Blank Page - Deschide programul Composer cu o pagina noua, goala, gata pentru editare.

• FILE, NEW, Page from Template - initiaza o pagina noua prin intermediul casetei de dialog Template. În caseta de dialog se introduce pozitia paginii WEB care urmeaza sa fie folosita ca sablon la initierea noii pagini.
• FILE, NEW, Page from Wizard , deschide programul Navigator si face legatura cu Page Wizard, care va ajuta sa creati rapid o pagina de baza simpla. Dupa ce ati creat în Navigator pagina de baza, alegeti FILE, Edit Page pentru a trece    în Composer sa o salvati.

Când salvati un fisier în Composer, trebuie sa-l denumim - probabil îi vom da denumirea sub care va fi stocat pe un server WEB când va fi publicat. Când vine momentul publicarii unei pagini WEB, numele de fisier poate avea probleme.

În general, câta vreme folosim extensii .htm si .html si eliminam spatiile si semnele de punctuatie putem da fisierelor orice denumire. Totusi, denumirea fisierului trebuie sa se conformeze sistemul de operare utilizate de server.

De asemenea, când o pagina este prima pagina a unei prezentari cu mai multe pagini, practica standard este de a denumi index .html. Unele servere sunt configurate sa deschida în mod automat fisierul index .html când un vizitator precizeaza un director fara a specifica si un fisier. Oricum, acest lucru functioneaza numai daca avem pe server propriul director.

În concluzie, ne alegem serverul si aflam care sunt conventiile de denumire pe care le utilizam, înainte de a stabili denumirile finale ale fisierelor HTML.

UTILIZAREA OPTIUNII "AutoSave"

Programul Composer contine o optiune AutoSave care salveaza toate fisierele deschise de fiecare data dupa ce s-a scurs un anumit numar de minute.

Salvarea se face in mod automat, insa numai dupa ce am salvat fisierul pentru prima data.Pana cand fisierul nu a fost salvat pentru prima data optiunea AutoSave nu face salvarea automat; in schimb ne intreaba daca dorim sa salvam fisierul.Executam click pe butonul Yes din caseta de dialog pentru a salva fisierul sau pe butonul No, pentru a inchide caseta de dialog fara a efectua salvarea ceea ce face ca AutoSave sa repete intrebarea mai tarziu.Dupa ce am salvat fisierul,autosalvarea se face in continuare automat.

Composer este in mare masura WYSWYG; in majoritatea cazurilor, paginile vor arata la fel cand sunt vizualizate cu Composer sau Navigator.Totusi, exista cateva elemente care nu apar in Composer la fel cum apar intr-un browser.

Astfel, este indicat ca, din cand in cand, sa "previzualizam" cu Navigator pagina creata, pentru a vedea cum apare ea vizitatorilor.

Pentru a previzualiza o pagina in Composer, alegem File,Browse Page din bara de meniuri a acestuia.

Daca inainte de a executa click pe butonul Preview, Navigator este deschis si afiseaza un fisier diferit, pentru a afisa fisierul aflat in editare se va deschide o noua fereastra in Navigator.Daca Navigator prezinta deja fisierul editat, fereastra respectiva deschide si reincarca automat pagina pentru a ilustra eventualele modificari aparute de la afisarea anterioara.

Pentru areveni la sesiunea de editare dupa previzualizarea unui document, alegem Page Composer din bara de componente sau din meniul Communication.

Toate functiile din Composer pot fi apelate din bara de meniuri, insa, pentru un acces mai rapid, multe dintre functiile utilizate frecvent sunt disponibile in una dintre cele doua bare cu instrumente.

Composition - contine butoane pentru deschiderea si crearea fisierelor, verificarea paginilor in Navigator, tiparire, editarea textului si adaugarea unor elemente in pagina, cum ar fi legaturile si imaginile.

Formatting - contine butoane si liste derulante pentru crearea listelor si operatiunii de formatare a textului cum ar fi aplicarea stilurilor de paragraf, a fonturilor si a atributelor textului.

Pentru a tipari pagina pe care o editam, executam click pe butonul Print din bara cu instrumEnte sau alegeti File, Print.Documentul este tiparit exact asa cum ar fi tiparit din Navigator-in listare sunt incluse formatarea textului si imaginile, insa sunt omise eventualele modele de fundal, pentru a pastra textul lizibil.

Netscape Page Wizard este una dintre componentele "generatoare de pagini de baza".Utilizat la completarea unor campuri, permite incepatorilor in editarea Web sa isi compuna in numai cateva minute propriile pagini gazda.In continuare, ca orice lucru creat pentru sporirea vitezei si a simplitatii, Page Wizard obliga utitlizatorii sa faca o serie de compromisuri comparativ cu alte variante de editare.Este asemanator unui aparat fotografic de tip Polaroid:nu se pot face prea multe cu el, rezultatele obtinute nu sunt grozave; sunt confuze si fara aspect profesional, insa se obtin aproape instantaneu.

Cu toate acestea, Page Wizard nu poate fi depasit ca viteza si simplitate si ofera incepatorilor o cale foarte comoda de a se obisnui cu elementele Web inainte de a trece la tehnicile de editare mai pretentioase.Un alt aspect important este ca s-ar putea sa alegeti Page Wizard pentru a crea o pagina care sa serveasca drept material brut.

Netscape Page Wizard se aseamana cu vrajitorul din Oz: se numeste vrajitor si pretinde sa fie unic, dar in realitate nu este asa.Totusi, in final Page Wizard ne furnizeaza ceea ce dorim.

Suntem familiarizati cu astfel de module "vrajitor".Ele au o interfata prietenoasa si rutini automate care ne conduc de-a lungul operatiunilor complicate, cum ar fi instalarea sistemului de operare Windows, crearea comenzilor rapide sau instalarea pachetului de programe Netscape Communicator.Din punct de vedere tehnic, Page Wizard nu este un vrajitor de Windows.Desi serveste unui scop similar, nu arata si nu se comporta ca un astfel de vrajitor.El ne ajuta sa cream o pagina de baza simpla si personalizata.

Page Wizard este o pagina Web stocata la urmatoarea adresa:

https://home.netscape.com/home/gold4.0_wizard.html

Cand completam spatiile goale din Page Wizard, datele furnizate de noi sunt amplasate automat in pozitiile corespunzatoare, intr-un sablon al unei pagini Web.Sablonul nu este nici mai mult nici mai putin decat o pagina de baza foarte simpla si clara.

Un sablon este o pagina Web finalizata pe care o putem edita si personaliza pentru a ne crea propria pagina intr-un timp mult mai scurt.

Desi introducerea altor date conduce la modificarea coontinutului, organizarea paginii ramane aceeasi indiferent de ceea ce tastati in Page Wizard.Page Wizard va ofera posibilitatea de a stabili infatisarea paginii prin alegerea unor texturi pentru fundal a culorii textului, precum si a marcajelor de lista si a liniilor orizontale.Insa aranjarea elementelor de texte in pagina ramane neschimbata orice am face.

Sablonul utilizat de Page Wizard este proiectat pentru o pagina gazda personala si este eficient in acest sens, chiar daca este cam redus ca dimensiuni si excesiv de simplu.Prin cateva alegeri creative in timpul completarii, urmate de o usoara ajustare a paginii in Composer, putem utiliza Page Wizard si la crearea unei pagini de afaceri simple.

UTILIZAREA MODULULUI -PAGE WIZARD

Deschidem programul Navigator si ne conectam la Internet

In Navigator, alegem File, New,Page from Wizard.Acesta ii indica browserului sa ne conecteze la Page Wizard.

In cadrul activ, derulam in sus partea introductiva de la Netscape pentru a ajunge la butonul START.

Executam click pe butonul START aflat in cadrul din dreapta sus.

In sectiunea Content din cadrul Instructions, alegem legaturile care deschid in cadrul CHOICES formulare de introducere a textului.Parcurgem pasii urmatori:

1)derulam cadrul Instructions pana cand vedem legatura "give your page a little".

2)executam click pe legatura respectiva.In cadrul CHICES va aparea un formular.

3)stergem textul descriptiv care este in formular si tastam titlul paginii.Page Wizard va folosi atat ca titlu al documentului, cat si al paginii propriu-zise, plasandu-l in partea de sus a acestuia cu litere mari, aldine.

4)executam click pe butonul Apply.Noul titlu va aparea in cadrul Preview, centrat in partea de sus a paginii.

5)derulam cadrul Instructions pana cand vedem legatura "Zype an introduction".

6)executam click pe legatura respectiva.In cadrul CHOICES va aparea un formular.

7)stergem textul descriptiv care este un formular si tastam o introducere de pana la 1000 de caractere.In timp ce tastam introducerea, putem apasa tasta Enter pentru a intrerupe liniile sau pentru a crea o linie goala.In acest fel putem crea o introducere formata din cateva paragrafe.Page Wizard insereaza aceasta introducere dupa titlu, sub forma unui paragraf normal, aliniat la stanga.

8)executam click pe butonul Apply.Noua introducere va aparea in cadrul Preview.

9)derulam cadrul Instructions pana cand vedem legatura "Add some links".

10)executam click pe legatura respectiva.In cadrul CHOICES va aparea un formular.

11)formularul CHOICES: HOT LINKS ne permite sa cream o lista marcata care contine legaturi catre alte pagini sau documente.Fiecare legatura din lista se creeaza astfel:

stergem textul descriptiv care apare pe linia Name din formular si tastam    textul care dorim sa apara in pagina noastra ca sursa a legaturii

stergem textul descriptiv care apare pe linia URL din formular si tastam URL-ul complet al locatiei in care sunt dusi vizitatorii daca executa click pe textul precizat din linia Name.

executam click pe butonul Apply.

12)derulam cadrul Instructions pana cand vedem legatura "Type a paragraph of text to serve as a conclusion".

13)executam click pe ea.In cadrul CHOICES va aparea formularul CHOICES: CONCLUSION.

14)stergeti textul descriptiv care apare in formular si tastam o concluzie formata din maximum 1000 de caractere.Page Wizard insereaza concluzia dupa sectiunea Hot Links.

15)derulam cadrul Instructions pana cand vedem legatura "Add an email link".

16)executam click pe ea.In cadrul CHOICES va aparea un formular.

17)formularul CHOICES: EMAIL LINK ne permite sa cream o semnatura care sa apara in partea de jos a paginii.Semnatura include si o legatura spre adresa noastra de posta electronica si pentru a permite vizitatorilor sa va trimita un mesaj prin posta electronica.

Pagina noastra este gata pentru publicare.Pe scurt, publicarea unei pagini Web consta in incarcarea tuturor fisierelor care compun pagina intr-un director de pe un server Web.

Majoritatea serverelor sunt prevazute cu sisteme de securitate care previn stocarea pe ele a fisierelor provenite de la utilizatori neautorizati.Pentru a publica pagina trebuie sa luam legatura cu administratorul serverului pe care dorim sa publicam pagina si sa obtinem urmatoarele:

Permisiunea de a incarca fisierele pe server;

Denumirea si calea corespunzatoare directorului in care doreste administratorul sa va stocheze fisierele;

Pasii specifici care trebuie parcursi pentru incarcarea fisierelor pe server ;

Un nume de utilizator si parola pe care le veti utiliza cand facem incarcarea, pentru ca sistemul de securitate sa ne poata identifica.

Tot ceea ce vedem intr-o pagina Web se introduce direct din fereastra documentului din Composer.Insa una dintre partile standard ale unui fisier HTML,titlul paginii se introduce separat in caseta de dialog Page Properties impreuna cu alte informatii despre pagina.

In Composer vom utiliza caseta de dialog Page Properties, pentru a da un titlu paginii, pentru a introduce informatii descriptive care sa-i ajute pe cei care cauta pe Web sa localizeze pagina noastra si pentru a alege o schema de culori si, optional, o culoare de fundal.

Cu toate ca fiecare pagina Web trebuie sa aiba un titlu, introducerea unui titlu in Composer nu este necesara.Daca nu precizam un titlu, in mod automat Composer va utiliza drept titlu denumirea fisierului care contine pagina.Totusi, este important sa precizam un titlu, deoarece titlul descrie Web-ului pagina noastra.

Se poate spune ca, o pagina Web poate fi scrisa fara a-ti pune in pericol viata; acest lucru il face un editor WYSI WYG.Crearea textului pentru o pagina Web implica doua operatiuni principale:introducerea textului in fisier si atribuirea proprietatilor de paragraf fiecarui bloc de text.

In Composer, fiecare bucata distincta de text-textul cuprins intre marcajele de paragraf-este denumita paragraf.

Proprietatile paragrafului pot avea doua componente:stiluri de paragrafe si stilurile aditionale.

NORMAL

Folosim proprietatea NORMAL pentru textul cu scop general.Majoritatea browserelor afiseaza paragrafele normale cu fond simplu fara o accentuare speciala.

HEADING

Utilizam aceasta proprietate pentru a separa si a denumi sectiunile unei pagini sau ale unui document.

ADDRESS

Folosim aceasta proprietate pentru acrea un bloc de adrese, care este de obicei o lista cu adrese de posta electronica sau clasica ori cu alte informatii de contactare.

FORMATTED

"Formatat" ar putea parea un termen folosit gresit, deoarece textul caruia ii este atribuita proprietatea FORMATTED este mai putin formatat de browser decat orice altceva.

LIST ITEM

Aceasta formeaza in pagina liste :marcate, numerotate, precum si alte tipuri de liste.Fiecare element dintr-o lista este un paragraf separat.

DISCRIPTION TITLE si DESRIPTION TEXT

Aceste proprietati aplica stilurile HTML "Definition Term" si "Definition Definition".

Denumirile HTML au rezultat din faptul ca utilizarea acestor proprietati reprezinta o buna modalitate de creare pe ecran a efectului termenilor de glosar.

INTRODUCEREA PARAGRAFELOR PRIN TASTARE

Cand cream un document nou, la inceputul lui apare automat cursorul de editare.Tastam ceva.Pentru a corecta greselile si pentru a face modificari pe parcurs utilizam tastele Backspace,Delete sau Insert.Pentru a incheia un paragraf si a incepe altul apasam tasta Enter.Paragrafele pe care le introducem apar ca un text normal.Proprietatea paragrafului poate fi schimbata in orice moment.

In marginea dreapta a barei cu instrumente Formatting se afla butonul Alignement.Acesta deruleaza trei optiuni de aliniere a paragrafului:la stanga, la dreapta si central.Sectiunea Paragraph din caseta de dialog Carachter Propreties contine trei butoane de tip radio pentru aceleasi optiuni.Aceste optiuni pot fi aplicate oricarui paragraf, indiferent de stilul acestuia; putem selecta text normal, paragrafe, subtitluri sau liste si putem sa le concentram ori sa le aliniem la stanga sau la dreapta paginii.

Composer este destul de ingenios in modul de tratare a marcajelor de paragraf suplimentare din pagina si a spatiilor suplimentare dintre caracterele unui paragraf.

Cu exceptia stilului de paragraf FORMATTED, HTML nu recunoaste marcajele de paragraf din fisierele HTML drept linii goale si nici spatiile suplimentare drept spatii suplimentare.De aceea, browserele ignora in general caracterele respective cand afiseaza o pagina.Pentru a crea mai multe linii goale intre paragrafe sau spatii suplimentare in cadrul unei linii, autorii de Web trebuie sa utilizeze etichete HTML si intreruperi de linie, respectiv pentru saptii de afisare.

Editarea unei pagini Web seamana foarte mult cu editarea documentelor din programele de prelucrare a textelor.Pentru a face orice, evidentiem textul pe care dorim sa-l modificam apoi operam modificarea.In Composer, putem cauta un sir de caractere utilizand instrumentul Find in Page.

Imaginile inline sunt imaginile care apar automat in cadrul paginii atunci cand pagina este accesata prin intermediul unui browser grafic.

Fisierele grafice de pe calculatoare pot avea diferite tipuri.Printre cele mai cunoscute sunt fisierele: .pcx si .bmp, care se folosesc mai ales in Windows si fisierele TIFF(.tif) care se folosesc pe calculatoarele MACINTOSH si in publicatii.

Pentru acrea o imagine, deschidem Paint Pro Shop si alegem File, New sau executam click pe butonul New Image din bara cu instrumente.Drept urmare se va deschide caseta de dialog New Image.

In campurile WIDTH si HEIGHT din caseta de dialog, se definesc latimea, respectiv inaltimea imaginii.Aceste dimensiuni pot fi stabilite dupa bunul plac sau pot fi ignorate acum si ajustate mai tarziu.

Dupa ce am stabilit cei trei perimetrii, in dreapta textului Memory Required va fi afisata dimensiunea aproximativa a fisierului exprimata in octeti.

Dupa completarea casetei de dialog executam click pe OK pentru a incepe sa pictam.

STILIZAREA PAGINILOR CU ELEMENTE AUDIO SI VIDEO

Fisier referit printr-o legatura din pagina Web si care poate contine o imagine, o secventa video, un clip audio, un document.

De multe ori , nu browserul afiseaza sau reda fisierul referit.Acest lucru este facut in locul lui de catre o alicatie ajutatoare.Exista browsere care ofera suport nativ pentru astfel de tipuri de fisiere, dar cand fisierul este indicat ca element extern, este ca si cum ar fi utilizata o aplicatie ajutatoare.De exemplu, Navigator ofera suport nativ pentru fisiere grafice de tip SPEG.

Utilizand tehnicile de inchidere a elementelor externe, putem crea legaturi catre orice tip de fisier incepand de la clipuri video si audio, pana la biblioteci de legare dinamica folositye de Microsoft Golf.

Clipurile video si audio ar putea fi redate de catre vizitator, insa fisierele .dll pentru Microsoft Golf ii sunt inutile.

Din pacate, exista tendinta ca fiecare sistem de operare sa aiba tipuri proprii de fisiere cu elemente externe sau sa favorizeze anumite tipuri de fisiere.

Pentru a functiona fara alte modificari, trebuie sa dispunem de un calculator cu sistemul de operare Windows 95/98 si cu un browser instalat Netscape Communicator, Internet Explorer.

Pornim calculatorul.

Efectuam click pe Start-Programs-Accessories-Notepad pentru a lansa in executie cel mai simplu editor de text Notepad. La lansarea in executie, acest editor incearca automat un document nou numit Untiled.

Scriem in document "Prima pagina".

Pentru a salva documentul, efectuam click pe File, apoi pe Save As..Va aparea caseta de dialog SaveAs.Cu ajutorul campului Save in alegem directorul in care vca fi salvat fisierul.In campul File Name tastam numele fisierului cae trebuie sa aiba extensia.htm sau .html.In caseta TYPE alegem "All files.Apasam butonel Save.

Pentru a vizualiza pagina creata, efectuam click pe Start, apoi Documents.Cautam in lista care va fi afisata numele fisierului tastat le punctul 4 si efectuam click pe el .Datorita extensiei .html sau.htm a fisierului, sistemul Windows lanseaza in executie browserul prestabilit si pagina este vizualizata.

Documentatie : Arborele Lumii

Revista Chiip