Realizarea Paginilor WEB

Realizarea paginilor WEB
George Daniel Mateescu Corina Sman* Mihai Buneci*

*
Pentru utilizatorul obinuit, Internetul se prezint sub forma unei colecii de pagini care conin informaii diverse: texte, imagini, uneori sunete i animaie. Aceste pagini, numite web pages sau web sites sunt realizate n mare parte prin intermediul unui limbaj special, numit numit HTML, prescurtare de la Hypertext Markup Language. Limbajele de marcare (markup languages) i au originea n tehnicile editoriale i tipografice tradiionale. Un text (manuscris) era adnotat de ctre editor indicndu-se componentele fundamentale ale textului (titluri, subtitluri, cuvinte sau poriuni de text care trebuiau evideniate) precum i caracteristici formale (corpul de litera, dimensiunea caracterelor, modul de aliniere). Aceast tehnic a fost preluat n mod natural de ndat ce calculatorul a fost folosit pentru activitile editoriale: textul era presrat cu marcaje de tipul celor editoriale clasice. Au aprut ns attea sisteme de marcaj cte programe specifice s-au scris pentru aceast activitate. S-a ajuns la situaii incredibile astzi ca cea aprut prin anii 60 la compania IBM cnd departamentele ntmpinau dificulti serioase n schimbul intern de documente, datorate diversificrii platformelor hard i soft precum i programelor de editare folosite. Aa c IBM a lansat un proiect de cercetare n scopul de a gsi o soluie unitar pentru propriul sistem de editare de documente. Rezultatul a fost un sistem de marcare universal aplicabil, un meta-limbaj extensibil numit iniial GML (Generalized Markup Language), iar apoi numit SGML (Standard Generalized Markup Language) cnd a fost adoptat ca standard ISO n 1986. n spatele multor site-uri se afl de fapt baze de date implementate ca documente SGML sau XML (un alt subset al SGML aprut n anii 90). Dar dei adoptat ca standard a fost limbajul de marcare SGML, el i-a fcut simit prezena mai mult print-un subset al acestuia HTML care se afl la baza a sute de mii de pagini Web care fie sunt scrise n acest sublimbaj fie sunt pagini HTML rezultate n urma interogrii unor baze de date. Un fiier realizat n limbajul HTML este un text obinuit, ASCII, n care textul propriu-zis alterneaz cu anumite comenzi referitoare la textul dat. Comenzile sunt separate se text prin includerea ntre croete <...>, iar fiecare comand are un nceput i un sfrit. Forma general a unei comenzi este: <comand> ... </comand> Cele mai importante comenzi, suficiente pentru realizarea unei pagini Web sunt prezentate n continuare: <HTML>...</HTML> reprezint comanda principal care specific browserului de Internet c textul este realizat n limbajul HTML <HEAD>...</HEAD> ncadreaz textul care apare ca titlu al paginii <BODY>...</BODY> ncadreaz informaiile propriu-zise ce vor fi afiate de browser
Institutul de Prognoz Economic al Academiei Romne
Folosind aceste comenzi, putem realiza o pagin, prin crearea unui fiier prin intermediul unui editor de texte simplu, de exemplu Edit sau NotePad. Cea mai simpl pagin poate fi urmtoarea: <HTML> <HEAD>Text didactic</HEAD> <BODY>Acesta este coninutul paginii</BODY> </HTML> Observm c ntregul coninut este cuprins ntre comenzile <HTML> i </HTML> ceea ce semnific faptul c fiierul este scris n limbaj HTML. La ntlnirea primei comenzi, navigatorul de Internet (browser-ul) va ti c urmeaz s interpreteze o pagin Web, aadar va afia tot ceea ce este text, innd cont de toate comenzile cuprinse ntre croete. Urmeaz un text cuprins ntre comenzile <HEAD> i </HEAD> iar navigatorul va interpreta textul cuprins ntre aceste comenzi ca fiind titlul paginii. n sfrit, va fi afiat textul cuprins ntre <BODY> i </BODY>. Realizarea sub form de exerciiu a acestui mic exemplu poate fi un pas important n nelegerea modului de realizare a unei pagini de Web. Desigur, textul trebuie salvat sub un nume oarecare, nsoit ns de extensia htm sau html. Alinierea textului Plasarea textului cade n sarcina navigatorului care interpreteaz pagina. Acesta ignor, n textul surs, trecerea la rnd nou, inclusiv tasta Enter, precum i spaiile multiple. Pentru a realiza spaierea voluntar sau trecerea la un rnd nou, trebuie inserate comenzi speciale n textul surs, dintre care cele mai importante sunt prezentate n continuare. realizeaz un salt la rnd nou <BLOCKQUOTE>...</BLOCKQUOTE> trateaz textul ca un bloc ngropat <CENTER></CENTER> plaseaz textul n centru Folosind aceste comenzi, putem modifica nfiarea paginii anterioare: <HTML> <HEAD>Titlul paginii</HEAD> <BODY>Coninutul paginii <BLOCKQUOTE>Text "ngropat"</BLOCKQUOTE> <CENTER>Text centrat</CENTER> </BODY> </HTML> nfiarea textului Aceste comenzi se refer la stilul utilizat la prezentarea textului, dimensiune, nclinare, etc. Dimensiune mai mare textul va fi afiat (de ctre navigator!) ntr-un font mai mare cu 5 puncte, fa de dimensiunea implicat nclinat textul va fi afiat n format italic (nclinat) ngroat textul va fi afiat cu litere ngroate Subliniat textul va apare subliniat Fontul ARIAL 
aceast comand d posibilitatea de a cere navigatorului s utilizeze un anumit font (set de caractere) Noiunea de legtur (link) Un text HTML este un text inteligent, adic, pe lng informaii propriu-zise conine i informaii de legtur fapt ce permite cititorului s treac, printr-un simplu click din mouse, de la pagina curent, la o alt pagin, legat logic de cea anterioar sau de un anumit context din aceasta. Astfel de nlnuiri sunt extrem de utile, deoarece o anumit informaie poate fi completat printr-o pagin special, apelat n funcie de opiunea utilizatorului. De exemplu, un text matematic poate fi ancorat astfel nct fiecare noiune s fie nsoit de definiie, exemple, etc. Informaiile de legtur sunt pur i simplu adresele unor alte pagini (URL) imagini, obiecte n general. Parcurgerea acestor legturi permite utilizatorului s navigheze pe Internet. Generic, o trimitere poart numele de hyperlink. Legturile pot fi de dou tipuri: , n interiorul aceleai pagini , ctre o alt pagin Pentru a realiza o trimitere n interiorul acelai pagini este nevoie de dou comenzi, aceea care definete poziia ancorat i aceea care face trimiterea ctre poziia ancorat. Aceste comenzi sunt: <A name=ancora></A> <A href=#ancora></A> Poziia relativ a celor dou comenzi poate fi arbitrar, stabilit numai n funcie de dorina realizatorului paginii. Urmtorul fragment de text HTML ilustreaz modul de realizare a unei trimiteri n cadrul aceleai pagini: Din aceast poziie, printr-ul click, se ajunge la <A href=#ancora>textul ancorat</A> <A name=ancora>Textul</A> ancorat Trimiterea ctre o alt pagin se face invocnd adresa acesteia, URL, ntr-o comand HREF, aa cum se vede n continuare: <A href="http://www.mateescu.ro">G.D.Mateescu</A> n cazul n care pagina conine textul anterior, printr-un click, se va realiza o trimitere ctre o pagin personal aflat la adresa http://www.mateescu.ro; dac textul http:// nu este prezent, atunci pagina va fi cutat n folderul curent. Imagini Un text poate s fie nsoit de imagini, care de cele mai multe ori sunt stocate n fiiere avnd formatul jpg sau gif. Exist dou modaliti de a ilustra un text cu imagini: prin inserare n text sau prin link spre o imagine. Inserarea n text se face prin comanda <IMG SRC> <IMG SRC="imagine.jpg" align="middle"> iar trimiterea la o imagine se face prin comanda <A HREF>: <A href="imagine.jpg">poza</A> Fond grafic O pagin poate avea un anumit fundal, realizat de obicei printr-un fiier de tip gif. De exemplu
<BODY BACKGROUND="backgr.gif"> va avea drept consecin introducerea, ca fundal pentru pagin, a fiierului backgr.gif; fiierul trebuie s se afle n acelai folder cu pagina propriu-zis. Fond sonor Exist posibilitatea de asociere a unui fond sonor, care va nsoi lectura paginii, printr-o comand de forma: <BGSOUND SRC="gameover.mid" loop="-1"> Comanda anterioar execut fondul sonor coninut de fiierul gameover.mid, timpul de reluare a fondului sonor fiind precizat, n secunde, de comanda loop; parametrul 1 semnific reluarea nedefinit a fondului sonor. Fiierul trebuie s aib un format audio recunoscut, de obicei mid sau wav, iar plasarea sa trebuie fcut n acelai folder cu pagina. Exemplu de pagin simpl <HTML> <HEAD>Exemplu</HEAD> <TITLE>Pagina mea</TITLE> <BODY>Acesta este coninutul paginii De aici se va ajunge la <A href=#ancora>textul ancorat</A> <BLOCKQUOTE>iar acest text este "ngropat"</BLOCKQUOTE> Fontul ARIAL Scrisul este subliniat <CENTER>Text centrat</CENTER> <A HREF="http://www.mateescu.ro">G.D.Mateescu</A> <A name=ancora>Acest</A> text este ancorat <A HREF="imagine.jpg">poza</A> </BODY> </HTML> Pentru ca exemplul s funcioneze, fiierul trebuie salvat cu extensia htm i trebuie s existe o imagine, cu numele imagine.jpg, n folderul curent. Transferul fiierelor de pe PC pe server Aceast operaie este esenial dac dorim ca pagina realizat s fie vizibil oriunde n Internet. Operaia de transfer este posibil numai cu acordul proprietarului serverului, de obicei n baza unui contract de furnizare de servicii. De exemplu, pentru pcnet se poate folosi un card de cel puin 5 ore, prin intermediul cruia se creeaz un cont de dial-up. n cadrul acestui cont, pcnet pune la dispoziie un spaiu de 2Mb i o adres de forma: http://users.pcnet.ro/nume_utilizator Pentru gzduire pe myx se poate nchiria spaiu n baza unei cartele de rencrcare sau prin abonamentul existent de telefonie mobil (CONNEX). Numele de domeniu poate fi asigurat de myx, dar nu este al utilizatorului dect pe perioada de contract, sau poate fi cumprat definitiv de la RNC i gzduit la myx, n aceleai condiii. n aceast situaie, se poate obine un nume de domeniu principal de forma: http://www.nume_utilizator.ro Indiferent de situaie, utilizatorul va stabili legtura dintre calculatorul propriu i server, printr-un protocol PPP, TCP-IP, adic o legtur obinuit, folosit i la navigare. Aceasta se poate
realiza fie printr-un cont dial-up, fie utiliznd orice calculator conectat la Internet, printr-un protocol IP. Transferul fiierelor se face utiliznd programul (protocolul) ftp. n mediul Windows va fi necesar lansarea n execuie a mediului DOS (command.com sau Command Prompt) urmat de o instruciune de forma: ftp users.pcnet.ro n cazul unui cont de card pe pcnet ftp domeniu.ro n cazul unui domeniu propriu n continuare, utilizatorul se identific prin username i password. Un exemplu de dialog poate fi urmrit n continuare: User: daniel.mateescu 331 Password required for daniel.mateescu. Password:****** 230 Acces permis userului daniel.mateescu n acest moment s-a stabilit legtura ntre calculatorul propriu i server, prin protocolul ftp. Trebuie reinut c n acest mod au fost puse n coresponden folderul curent de pe PC, din care s-a lansat programul ftp i folderul care a fost pus la dispoziie pe server, de ctre furnizorul de servicii. Folder curent pe PC Server Comenzile principale de ftp , binary semnaleaz protocolului ftp c vor fi transferate fiiere arbitrare, n caz contrar fiierele sunt interpretate ca fiind ASCII; comanda trebuie s precead, obligatoriu, transferul de fiiere care conin imagini, sunete, etc. , put fiier transfer fiierul de pe PC pe Server , get fiier transfer fiierul de pe Server pe PC , dir vizualizeaz coninutul folderului de pe Server , delete terge fiiere de pe Server , bye, quit nchide programul ftp, fr a nchide comunicaia. De exemplu, dac textul din exemplul anterior are numele pagina.htm, transferul pe server se va face n forma put pagina.htm Dei mediul Widows i programele care acioneaz n acesta nu fac distincie ntre literele mari i literele mici utilizate n denumirea fiierelor, trebuie avut n vedere c alte sisteme de operare fac astfel de distincii, aadar este recomandat ca i sub acest aspect, referinele din paginile HTML s conin denumirile exacte ale fiierelor referite. n sfrit, pagina principal, asociat cu domeniul, trebuie obligatoriu s aib o denumire de forma: index.htm, index.html, default.htm sau default.html Utilizarea programului Front Page Cunoaterea comenzilor HTML descrise anterior ofer cea mai bun cale de nelegere a principiilor care stau la baza construciei ntregului Internet i mai ales a conceptului de navigare pe Internet. Bineneles, interesul enorm legat de construcia paginilor de Internet a condus la apariia unor programe specializate. Cel mai cunoscut program, extrem de uor de utilizat, este Front Page. Acest program este produs de firma Microsoft i face parte, alturi de Word i Excel, din pachetul Microsoft Office.
Multe opiuni de utilizare a a programului Front Page nu trebuie explicate, din dou motive: seamn foarte bine cu programul Word, foarte rspndit, iar conceptele noi, legate n special de noiunea de legtur (link, hyperlink) au fost explicate n cadrul limbajului HTML. Realizatorii profesioniti utilizeaz exclusiv programe specializate n construcia paginilor Web, aa cum este i Front Page. Pentru nceptori ns este absolut necesar s fac primul pas nsuindu-i cunotinele elementare de HTML prezentate aici. Pasul urmtor l constituie realizarea unei pagini Web n Front Page. Programul conine numeroase formate predefinite, dar dup selectarea unei anumit format, modul de lucru este acelai. ncepem prin meniul File, New, Page, iar n fereastra care se deschide selectm Frames Pages i alegem unul dintre formatele predefinite, de exemplu Banner and Contents. Acest format este constituit din trei cadre (frames) i anume un antet, un cuprins n partea stng i un cadru cu informaii n detaliu, n partea dreapt, iar ca urmare a seleciei, utilizatorul primete un spaiu de lucru partajat n trei cadre. Fiecare cadru va deveni un fiier distinct, legat ns prin comenzi, de celelalte. Fiecare cadru are dou opiuni, astfel nct utilizatorul poate s insereze o pagin existent, prin comanda Set Iniial Page sau poate s creeze efectiv o pagin nou, corespunztoare cadrului ales, prin comanda New Page. n ipoteza c utilizatorul construiete totul de la nceput, va trebui s rein n primul rnd modul n care programul Front Page salveaz fiierele corespunztoare, astfel nct este util o comand Save As, imediat dup ce s-a selectat opiunea New Page, n toate cadrele. Dei pe ecran exist trei cadre, programul va salva patru fiiere, la fiecare dialog fiind nfiat schematic i cadrul corespunztor. Astfel, primul fiier va reprezenta ansamblu format, adic fiierul care are ca i corespondent chiar structura de trei cadre.
Aa cum am vzut deja, n cazul n care pagina este o pagin principal, numele trebuie s fie index.htm, index.html, default.htm sau default.html. n continuare, simultan cu dialogul de salvare, este nfiat, cu o culoare plin, cadrul corespunztor fiierului. De exemplu, utilizatorul va folosi denumirile top (sus) left (stnga) i right (dreapta) astfel nct va ti c fiierul left.htm corespunde cadrului din stnga, respectiv right.htm celui din dreapta, iar top.htm celui de sus. Dup aceste etape obligatorii, n cele trei cadre vor fi inserate informaiile dorite, procednd exact ca n cadrul editrii unui text n Word. De exemplu, cadrul de sus va conine un titlu generic,
un antet de firm, etc. n cadrul din stnga pot fi introduse rubrici, exact ca i cuprinsul unei cri. n cazul unei firme, n stnga pot fi introduse denumirile departamentelor, etc. Efectul completrii cadrelor poate fi urmrit selectnd unul dintre modurile posibile de vizualizare, selectate de pe banda inferioar De cele mai multe ori, exist mai multe fiiere corespunztoare cadrului din partea dreapt. Aa cum am spus, n cazul n care prezentarea aparine unei firme cu mai multe departamente, fiecare selecie a denumirii unui departament n cadrul din stnga, va schimba nfiarea cadrului din dreapta.
Text, similar cu Word.
Text HTML
Vedere n Browser
Aceeai nfiare poate fi utila n cazul realizrii unui CV pe Internet. n aceast situaie, vom alege formatul predefinit format din trei cadre, ales prin meniul File, New, Page, urmat de selectarea unui format de pagin format din cadre. Fiecare cadru poate fi asociat cu o pagin deja creat (un fiier de tip html) dar exist i posibilitatea inserrii directe a textelor i/sau imaginilor dorite chiar n foaia de lucru, n oricare dintre cadrele afiate de programul Front Page. Indiferent de situaie, putem introduce n cadrul de sus informaiile de identificare, de exemplu numele i poziia deinut n cadrul institutului. n cadrul din stnga pot fi introduse mai multe rubrici, de exemplu referitare la pregtirea i experiena profesional, cri i articole publicate, activitate didactic, domenii de interes, etc. Fiecare rubric poate fi asociat cu un alt fiier de tip html, legtura fiind realizat prin intermediul unui link, aa cum am vzut deja. Pentru exemplificare, cititorul interesat poate consulta pagina de la adresa www.mateescu.ro Proiectat pentru ne-programatori, dar suficient de robust chiar i pentru dezvoltatorii experimentai, Microsoft Frontpage consituie cea mai uoar cale de creare i administrare a unui site Web. Pe lng partea de editare a paginilor Microsoft Frontpage ajut la explorarea i administrarea unui site Web. Ofer o modalitate comod i facil de vizualizare a paginilor existente pe un site existnd ase puncte de vedere (views): Page, Folders, Reports, Navigation, Hyperlinks, Tasks. Page view este editorul, adic aplicaia care se ocup de crearea i modificarea paginilor HTML i care a fost prezentat mai nainte. Aproape totul n editor este un obiect ale cror proprieti pot fi modificate dup bunul plac, pentru a reflecta o anumit intenie. Folders view prezint structura folderelor care conin paginile html i toate celelalte elemente constitutive ale site-ului (imagini, sunete etc.). Aceast aplicaie ofer o modalitate comod i facil de vizualizare a paginilor existente pe un site. Reports view ofer liste specifice referitoare la paginile i fiierele coninute pe site dup diverse criterii : Site Summary (o statistic a site-ului ), All files (lista tuturor fiierelor coninute pe site precum i principalele proprieti ale acestora : nume, titlu, mrime, tip, data ultimei modificri), Recently Added Files, Recently Changed Files, Older Files, Unlinked Files, Slow Pages (lista fiierelor care se vor ncrca cel mai ncet de pe site).
Navigation view paginile pot fi organizate ntr-o structur de navigare cnd se adaug bare de navigare n paginile site-ului prezentnd o hart a site-ului. Dac nu au fost adugate bare de navigaie atunci harta va conine numai pagina principal. Hyperlinks view prezint paginile de pe site i legturile dintre ele printr-o prezentare grafic intuitiv. Prin selecia unei pagini aceasta este prezentat n centrul zonei Hyperlink view, fiind indicate doar relaiile pe care aceast pagin le are cu altele (pe de o parte paginile care indic nspre ea, pe de alt parte nspre ce alte pagini exist legturi din interiorul acesteia).
Tasks view lista cu lucrurile ce trebuie fcute. Aceast unealt ne ofer posibilitatea de gestiune a aciunilor pe care le mai avem de fcut. Este util mai ales n cazurile n care sunt mai muli autori ai unui site, fiecare dintre ei gestionnd doar o parte din el. Toate aceste faciliti aduc aminte de semnificaia cuvntului RAD n domeniul tehnologiei informaiei ce nseamn Rapid Application Development (dezvoltare rapid de aplicaii), iar n acest caz nseamn: construirea rapid de documente HTML complexe i de calitate.
Bibliografie
G.D.Mateescu, Bazele utilizrii calculatoarelor, Ed. Donaris Info, 2004 A gentle introduction to SGML http://www.isgmlug.org/sgmlhelp/g-index.htm HTML Specifications http://www.w3org/MarkUp FrontPage Documentation http://msdn.microsoft.com/office/understanding/frontpage

Realizarea Paginilor WEB

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Realizarea Paginilor WEB

Încărcat de

Drepturi de autor:

Formate disponibile

Realizarea paginilor WEB

George Daniel Mateescu Corina Sman* Mihai Buneci*

Institutul de Prognoz Economic al Academiei Romne

Text, similar cu Word.

S-ar putea să vă placă și