Modulul 1: Utilizarea operaiilor de baz necesare realizrii unei pagini web

1. Prezentarea mediului de lucru Dreamweaver

Macromedia Dreamweaver este o unealt destinat creatorilor de pagini web. Dreamweaver a fost creat de Macromedia (acum Adobe Systems) i momentan a ajuns la versiunea 11. Primele versiuni ale produsului serveau doar ca simple editoare HTML de tipul WYSIWYG (What-You-See-Is-What-You-Get), dar n versiunile recente au fost implementate funcii de editare avansate i suport pentru alte tehnologii web cum ar fi CSS, JavaScript etc. Dreamweaver s-a bucurat de un larg succes nc de la sfritul anilor 90 i momentan deine aproximativ 80% din piaa editoarelor HTML. Produsul poate fi rulat pe variate platforme software: Mac, Windows, dar suport n acelai timp i platforme UNIX cu ajutorul unor emulatoare software, cum ar fi Wine. Ca orice alt editor WYSIWYG, Dreamweaver poate ascunde detaliile de implementare a paginilor HTML, fcnd astfel posibil crearea cu uurin a paginilor web de ctre utilizatorii neexperimentai. Unii creatori de pagini web critic aceste tipuri de editoare deoarece produc pagini de dimensiuni mult mai mari dect ar fi necesar, ceea ce conduce la o funcionare neperformant a browserelor web. Aceast afirmaie este n mare parte adevrat deoarece paginile web produse folosesc design-ul pe baz de tabel. n plus, produsul a mai fost criticat n trecut i pentru producerea de coduri care adesea nu erau conform standardelor W3C (World Wide Web Consortium principala organizaie internaional care stabilete normele i standardele dup care funcioneaz browserele web i n care ar trebui scrise codurile surs ale site-urilor web), dar acest aspect a fost mult mbuntit n versiunile recente. Cu toate acestea, Macromedia a crescut suportul pentru tehnologia CSS i alte modaliti de design fr a fi necesar folosirea design-ului pe baz de tabel. CSS (Cascading Style Sheets) este un standard pentru formatarea elementelor unui document HTML. Stilurile se pot ataa elementelor HTML prin intermediul unor fiiere externe sau n cadrul documentului, prin elementul <style> i/sau atributul style. Dreamweaver permite folosirea majoritii browserelor instalate pe calculatorul utilizatorului, pentru a previzualiza website-ul creat. De asemenea, conine i cteva utilitare pentru administrarea site-urilor, cum ar fi cele pentru a gsi i a modifica un paragraf sau o linie de cod, n ntregul web site, pe baza oricror parametri specificai de ctre utilizator. Cu ajutorul panourilor de stare se poate crea cod JavaScript fr a avea cunotine de programare. Odat cu apariia versiunii MX, Macromedia a ncorporat utilitare de generare dinamic a coninutului. De asemenea, este oferit suport pentru conectarea la baze de date (cum ar fi MySQL i Microsoft Access) pentru a filtra i afia coninutul script-ului de genul PHP, ColdFusion, Active Server Pages(ASP) i ASP.NET, fr a avea nevoie de o prealabil experien n programare. Un aspect foarte ludat al Dreamweaver-ului l reprezint arhitectura sa extensibil. Extensiile, aa cum sunt ele cunoscute, sunt mici programe, pe care orice dezvoltator le poate scrie (de obicei n HTML i JavaScript) i pe care le poate descrca i instala, acestea aducnd un spor de performan i funcionalitate mbuntit programului. Exist o comunitate de dezvoltatori care produc extensii i le public (att commercial, ct i gratuit) pentru probleme de dezvoltare web, de la simple efecte rollover pn la soluii complete de vnzare online.

Interfaa aplicaiei Macromedia Dreamweaver 8

Dreamweaver folosete un sistem de panouri i ferestre fixe, care nu-i schimb poziia, i i modific opiunile de configurare n funcie de contextul aciunii ntreprinse. Astfel se realizeaz o economie de spaiu pe ecran i se faciliteaz foarte mult procesul de nvare a interfeei. Acest program are ase componente principale: bara cu instrumente (Toolbar), bara de lansare a aplicaiilor (Launcher), panoul Objects, fereastra Document, bara Mini Launcher i inspectorul Property. Inspectorul Property este sensibil la context, ceea ce nseamn c i modific n mod constant coninutul n funcie de tipul elementului selectat. Inspectorul Property controleaz numeroi parametri, inclusiv cei pentru text, tabele, aliniere, imagini. Deoarece Dreamweaver insereaz n mod prestabilit o pagin fr coninut, unde se gsete un simbol clipitor pentru inserare de text, inspectorul Property afieaz n mod prestabilit proprietile unui text. Coninutul Inspectorului Property se modific n funcie de ceea ce este editat pe ecran. Bara cu instrumente conine o serie de butoane i meniuri derulante care v permit executarea unor operaii precum schimbarea modului de vizualizare a documentului, stabilirea titlului paginii, previzualizarea paginii ntr-un browser i accesul la noul panou Reference. Modurile de vizualizare n fereastra document Dreamweaver ofer un nivel superior de control i flexibilitate, exprimat prin posibilitatea de vizualizare a paginilor dumneavoastr ntr-unul din cele trei moduri de vizualizare diferite, respectiv 2

Code, Code and Design i Design. n mod prestabilit, toate documentele noi se vor deschide n modul de vizualizare Design. Cele trei butoane situate n colul din stnga-sus al ferestrei document v permit s comunicai n cele trei moduri de vizualizare diferite. Mod de vizualizare Code Mod de vizualizare Code and Design Mod de vizualizare Design Exist numeroase preferine (Preferences) pe care le putei modifica, pentru a transforma Dreamweaver n propriul dumneavoastr editor HTML personalizat. Aceti parametri pot fi modificai n orice moment. Pentru a obine accesul la caseta de dialog Preferences selectai Edit > Preferences Sub categoria General exist parametri care determin aspectul i modul de funcionare a programului Dreamweaver n ansamblu.

Ce este un dosar rdcin local? Dreamweaver folosete o schem de gestionare a siturilor care impune pstrarea tuturor fiierelor n interiorul unui dosar rdcin local principal, pentru a putea reproduce cu uurin ierarhia de dosare de pe hard disk atunci cnd ncrcm fiierele ntr-un server Web. Un dosar rdcin local este asemntor cu oricare alt dosar de pe hard disk, cu excepia faptului c i-am indicat programului Dreamweaver c n acest dosar se gsesc toate fiierele HTML i fiierele media aferente sitului.

Un dosar rdcin local poate conine multe sub-dosare, dar Dreamweaver nu poate pstra evidena elementelor dac acestea nu sunt stocate n dosarul rdcin local. Meniurile File i Edit sunt standard pentru majoritatea programelor. Meniul File conine comenzi de deschidere, salvare, import i export de fiiere. Meniul Edit conine comenzile Cut, Copy i Paste, alturi de comenzile Find i Replace i comanda Preferences. Multe elemente din interfaa Dreamweaver i din operarea sa pot fi configurate n Preferences.

Meniul View activeaz i dezactiveaz vizualizarea coninutului seciunii de antet (head); a elementelor inviziblile; a straturilor, tabelelor i limitelor cadrelor, a barei de stare i a hrilor de imagine. Meniul View are de asemenea comenzi de activare a riglei i a grilei, de executare a pug-in-urilor i pentru afiarea de imagini de trasare. Comanda Prevent Layer Overlaps (Prevenirea suprapunerii de straturi) este i ea poziionat n meniul View.

Meniul Insert este aproape echivalent cu bara de inserri. Din acest meniu se pot insera opional toate elementele disponibile pe bara de inserri. Bara de inserri conine un numr total de seciuni din care putem s alegem diferite categorii de obiecte disponibile. Exist dousprezece seciuni n bara de inserri: Common, Layout, Text, Tables, Frames, Forms, Templates, Characters, Media, Head, Script i Application. Pentru a afia butoanele obiectelor dintr-o anumit categorie trebuie s dm click pe seciunea categoriei.

Meniul Modify ne permite s modificm proprietile obiectului selectat la un moment dat.

Meniul Text ne ofer acces la mai multe modaliti de finisare a aspectului textului din pagina Web. Cel mai important pentru cei care scriu cu greeli este c meniul text conine comanda Check Spelling (verificarea ortografiei). Putem indenta un text, crea o lista i modifica proprietile fontului.

Meniul Commands ofer comenzi utile cum ar fi Clean up HTML (curarea codului HTML) i Clean Up Word HTML (Curarea cuvintelor din codul HTML).

Inserarea tabelelor n Dreamweaver Selecteaz Insert->Table

Selecteaz numrul de rnduri (rows), coloane (columns), distana dintre celule, limea (width) tabelului n procente sau pixeli i dimensiunea marginii (border), apoi apas OK.

Va aprea un tabel pe ecran cu 3 rnduri i 3 coloane, lime 75% i marginea=1 ca mai jos.

Dup selectarea tabelului, fereastra de proprieti va arta ca mai jos. Poi seta rndurile, limea, nlimea (height), distana dintre celule, alinierea la stnga/dreapta/centru i limea marginii.

Din panoul de proprieti adiionale poi seta culoarea de fundal (background color), culorile marginilor (border color), imaginea de fundal (background image).

Formatarea oricrei celule sau grup de celule poate fi efectuat subliniind celula/celulele, iar fereastra de proprieti i permite s selectezi Font i alte atribute.

Din panoul de proprieti adiionale poi modifica alinierea orizontal/vertical, limea, nlimea, nowrapping, imaginea i culoarea de fundal i culoarea marginilor.

Inserarea culorilor n tabele Vom ncepe cu un tabel de 100px lime (Insert->Table)

n panoul de proprieti, eticheta "Bg color" conine culoarea implicit (alb sau #FFFFFF) a tabelului.

Click pe casu i selecteaz System Colour Picker.

Caut o culoare pentru a o aduga (apas Add in Custom Colours) i apas OK.

De asemenea, selecteaz o culoare i pentru marginile tabelului.

Acum ar trebui s ai aceste proprieti setate n tabel.

Iar rezultatul va fi:

Aplicaie: Realizai, cu ajutorul unui tabel, calendarul pe anul 2012.

2. Prezentarea limbajului HTML

Paginile web sunt scrise ntr-un limbaj numit HTML (HyperText Markup Language). HTML permite utilizatorilor s realizeze pagini care includ texte, grafic i indicatori la alte pagini de Web. Pentru realizarea documentelor HTML pot fi utilizate editoare simple de text (Notepad pentru Windows sau Joe n Linux) sau editoare create special pentru paginile web, editoare ce pot dispune de funcii sofisticate pentru partea vizual (WYSIWYG - What You See Is What You Get) sau pentru verificarea legturilor n ntregul site. Lansarea editorului este realizat n funcie de tipul de editor ales. Spre exemplu, dac a fost ales: - Notepad, programul va fi lansat din meniul Start-Programs-Accessories-Notepad. - Word, lansarea acestuia are loc, de exemplu, pe calea Start-Programs-Microsoft OfficeMicrosoft Office Word. Odat lansat editorul, pagina va fi redactat folosind sintaxa HTML i va fi salvat cu extensia html sau htm. Vizualizarea fiierului HTML poate fi realizat cu ajutorul unui browser web. Acesta permite afiarea i manevrarea informaiilor de tip text, imagine, sunet i executarea unor programe/documente care pot face parte din site-urile web. Browser-ul are o caset de text n care utilizatorul poate s scrie adresa documentului sau a site-ului dorit, adresa acestuia (numit URL - Uniform Resource Locator) fiind unic. Editoare HTML: Front Page, HomeSite, AceHTML, Dreamweaver etc. Unele dintre cele mai cunoscute browsere web sunt Microsoft Internet Explorer, Mozilla Firefox, Mozilla Camino, Opera Software - Opera, Nintendo DS browser. Noiuni generale O pagin web are n componena dou elemente de baz. <html> <body> Continutul paginii va fi aici </body> </html> Primul tag se numeste <html> i este cel care i spune browser-ului c a nceput un cod n HTML. Cel de-al doilea tag, <body>, spune browser-ului c aici ncepe partea vizibil sau coninutul paginii HTML. Tag-urile </body> i </html> sunt tag-uri de nchidere. </body>, d de tire browser-ului, c s-a ncheiat coninulul pagini, iar </html> c s-a ncheiat documentul HTML. Slesh "/" este pus naintea numelui tag-ului i spune browserului c ar dori s ncheie respectiva funcie. Deci <tag> este folosit pentru a ncepe o funcie, iar </tag> pentru a o ncheia. Ordinea deschiderii i a nchiderii tag-urilor este foarte important. Dac un tag este deschis ntr-un altul, de exemplu body este deschis n html atunci acel tag (body) este cel care trebuie nchis naintea celui de-al doilea tag (html). Am nchis mai nti body pentru c a fost cel care s-a deschis cel mai recent. Aceast regul i anume deschiderea i nchiderea tag-urilor se aplic la toate celelalte taguri ale documentelor HTML. <head> Acest tag urmeaz imediat dup <html> i este folosit pentru a indica browser-ului, informaii utile precum: titlul pagini, coninutul (folosit de motoarele de cutare vechi) i multe altele 10

<title> Se pune ntre <head> i </head>. Acest tag este cel care d numele pagini. Numele va fi afiat n browser, de obicei n partea stng sus. <h2> Acesta este titlul care apre n pagin, nainte de coninut i va fi mai mare dect litera de coninut. <h2> nseamn c e cea de-a doua mrime a literei ntre cele ase care exist. <h1> este cea mai mare iar <h6> va fi cea mai mic. <p> Este tag-ul care marcheaz deschiderea i ncheierea unui paragraf. Aa c atunci cnd vei ncepe un paragraf asigur-te c ai pus <p> la nceput i </p> la sfrit. Marcaje de baz <HTML> </HTML> <HEAD> </HEAD> <TITLE> </TITLE> <BODY> </BODY> BGCOLOR = culoare TEXT=culoare LINK=culoare VLINK=culoare ALINK=culoare BACKGROUND = url <P> <Hn> </Hn> <FONT> </FONT> SIZE=n FACE="a,b" COLOR=s <BR> <PRE> </PRE> <!-- --> <CENTER> </CENTER> <HR> SIZE=x WIDTH=x NOSHADE ALIGN=x COLOR=x <A> </A> HREF=url HREF=#nume Name=nume Definete un fiier n format Web Antetul documentului Tilul documentului Corpul paginii HTML Culoarea de fond a paginii Culoarea textului pe pagin Culoarea legturilor nevizitate din pagin Culoarea legturilor vizitate din pagin Culoarea legturilor pe durata clicului executat de utilizator Imaginea de fond pentru pagin Paragraf Nivel de subtitlu al documentului (n = 1-6) Specific atribute ale textului ncadrat Dimensiunea textului este 1-7 Specific fontul: a, dac este disponibil, sau b Culoarea textului: fie un nume de culoare, fie o valoare RGB Linie nou Informaie preformatat Comentariu HTML Centreaz materialul n pagin Rigla orizontal nlimea riglei n pixeli Limea riglei n pixeli sau n procente Dezactiveaz afiarea umbrei pentru rigla orizontal Alinierea riglei orizontale n pagin (left, center, right) Culoarea riglei orizontale (numai pentru IE) Marcaj de tip ancor Referin hipertext Referin ctre o ancor intern Definiia unei ancore interne 11

<HTML> </HTML> <HEAD> </HEAD> Marcaje pentru liste <DD> <DL> </DL> <DT> <LI> <OL> TYPE=tip START=x <UL> TYPE=forma Formatarea caracterelor <B> </B> <I> </I> <U> </U> <TT> </TT> <CITE> </CITE> <CODE> </CODE> <EM> </EM> <KBD> </KBD> <STRONG> </STRONG> <VAR> </VAR> <BASEFONT SIZE = n> Marcaje pentru cadre

Definete un fiier n format Web Antetul documentului Descriere definiie Lista de tip definiie Termen de definiie Element de list List ordonat (numerotat) Tipul numerotrii. Valori posibile: A, a, I, i, 1 Numrul de nceput al listei ordonate List neordonat (marcat) Forma marcajului. Valori posibile: circle, square, disc.

Afieaz text cu caractere aldine Afieaz text cu caractere cursive Afieaz text subliniat Text cu font monospaiu Citare bibliografic Listing de program Stil logic de evideniere Text de la tastatur Evideniere logic puternic Program sau variabil Specific dimensiunea implicit a fontului din pagin

<FRAMESET> </FRAMESET> COLS=x ROWS=x BORDER=x FRAMEBORDER = x FRAMESPACING = x <FRAME> SRC=url NAME=nume SCROLLING=scrl FRAMEBORDER=x MARGINHEIGHT=x MARGINWIDTH=x

Definirea redactrii paginii Numrul i mrimea relativ a coloanelor Numrul i mrimea relativ a liniilor Specific starea "on" (activ) sau "off" (inactiv) pentru chenarul cadrului FRAMESET (1 sau 0) Specific mrimea chenarului Mrimea spaiului dintre dou cadre adiacente Definiia unui anumit cadru URL-ul sursa pentru cadru Numele cadrului (utilizat mpreun cu TARGET=nume ca parte component a marcajului de tip ancor <a> Definete opiunea barei de derulare.Valori posibile: on (activ), off (inactiv), auto (automat) Mrimea chenarului din jurul cadrului Spaiul suplimentar de deasupra i dedesubtul unui anumit cadru Spaiu suplimetar la stnga i la dreapta unui 12

anumit cadru <NOFRAMES> </NOFRAMES> Seciunea de pagin afiat pentru utilizatorii care nu pot vedea un cadru <IFRAME> Cadru intern (numai pentru IE) SRC=url Sursa cadrului NAME=s Numele ferestrei (util pentru TARGET) HEIGHT=x nlimea cadrului nglobat WIDTH=x Limea cadrului nglobat Marcaje pentru tabele <TABLE> </TABLE> BORDER=x CELLPADDING=x CELLSPACING=x WIDTH=x FRAME=valoare RULES=valoare BORDERCOLOR = culoare BORDERCOLORLIGHT culoare BORDERCOLORDARK culoare ALIGN=left Tabel HTML Chenarul tabelului Spaiul suplimentar n cadrul celulelor tabelului Spaiul suplimentar ntre celulele tabelului Limea impus tabelului Ajustarea fin a tabelului Ajustarea fin a riglelor tabelului Specific culoarea chenarului tabelului = Cea mai deschis culoare din cele dou culori specificate = Cea mai nchis culoare din cele dou culori specificate Aliniaza tabelul la marginea din stnga a paginii, iar textul curge n partea dreapt ALIGN=right Aliniaz tabelul la marginea din dreapta a paginii, iar textul curge n partea stng HSPACE=x Spaiu suplimetar pe orizontal n jurul tabelului VSPACE=x Spaiu suplimetar pe vertical n jurul tabelului COLS=x Specific numrul de coloane ale unui tabel <COLGROUP> </COLGROUP> Definete un set de definiii de coloane cu ajutorul marcajului <col> <COL WIDTH=x> Definete limea unei coloane exprimat n pixeli <THEAD> </THEAD> Definete titlul tabelului <BODY> </TBODY> Definete corpul tabelului <TR ></TR> Linie de tabel BGCOLOR=culoare Specific culoarea de fond pentru ntreaga linie ALIGN=aliniere Alinierea celulelor de pe linia curent (left, center, right) <TD> </TD> Celul de date a tabelului BGCOLOR=culoare Specific culoarea de fond pentru celula de date COLSPAN=x Numrul de coloane pe care se ntinde celula curent de date ROWSPAN=x Numarul de linii pe care se intinde celula curenta de date ALIGN=aliniere Alinierea materialului din cadrul celulei de date.Valori posibile: (left, right, center) VALIGN=aliniere Alinierea pe vertical a materialului din cadrul celulei de date.Valori posibile: (top, bottom, middle) 13

BACKGROUND=url NOWRAP ALIGN=baseline ALIGN=caracter Adugarea imaginilor <IMG> SRC=url ALT=text ALIGN=aliniere HEIGHT=x WIDTH=x BORDER=x HSPACE=x VSPACE=x

Specific imaginea de fond pentru celula tabelului Nu permite desprirea textului pe linii n cadrul unei celule Aliniaz celule de date cu linia de baz a textului adiacent Aliniaz o coloan fa de un anumit caracter (caracterul prestabilit este ".")

Marcajul de introducere a imaginilor Sursa fiierului grafic Textul alternativ de afiat, dac este necesar Alinierea imaginii n pagin. Valori posibile: top (sus), middle (n mijloc), bottom (jos), left (n stnga), right (la dreapta) nlimea imaginii (n pixeli) Limea imaginii Chenarul din jurul imaginii, atunci cnd aceasta este utilizat ca hiperlegatur Spaiul suplimentar pe orizontal din jurul imaginii (n pixeli) Spaiul suplimentar pe vertical din jurul imaginii (n pixeli)

Marcaje pentru formulare <FORM> </FORM> ACTION=url METHOD=metoda Formular HTML activ Programul CGI de pe serverul care recepioneaza datele Modul n care datele sunt transmise serverului (GET sau POST) <INPUT > Cmp de text sau alte date de intrare TYPE=opiune Tipul cmpului de intrare <INPUT>. Valori posibile: text, password, checkbox, hidden, file, radio, submit, reset, image. NAME=nume Numele simbolic al valorii cmpului VALUE=valoare Coninutul prestabilit al cmpului de text CHECKED= opiune Buton/caset marcat n mod prestabilit SIZE=x Numrul maxim de caractere acceptate ntr-un cmp de text <SELECT> </SELECT> Grup de casete de validare NAME=nume Numele simbolic al valorii cmpului SIZE=x Numrul de articole de meniu care se afieaz odat (prestabilit=1) MULTIPLE=x Permite selecia mai multor articole din meniu <OPTION > Alegerea particular ntr-un domeniu <SELECT> VALUE=valoare Valoarea rezultant a acestei selecii din meniu <TEXTAREA> Cmp de intrare de tip text pe linii multiple </TEXTAREA> NAME=nume Numele simbolic al valorii cmpului ROWS=x Numrul de linii al casetei de text COLS=x Numrul de coloane (caractere) pe linie al casetei de text <FIELDSET> mparte formularul n pri logice </FIELDSET> <LEGEND> Numele asociat setului de cmpuri (fieldset) 14

</LEGEND> ALIGN=s TABINDEX=x ACCESKEY=c DISABLED READONLY

Specific alinierea legendei (explicaiei) afiate (top, bottom, left, right) Specific ordinea elementelor atunci cnd utilizatorul apas tasta Tab Specific tasta care asigur comanda rapid de la tastatur asociat unui anumit element Elementul este inactiv, dar este afiat pe ecran Elementul este afiat pe ecran dar nu poate fi editat

Tabel diacritice Limba romn folosete cinci litere cu semne diacritice: , , , , . Aspectul i denumirea acestor semne sunt artate n tabelul de mai jos. cciul accent circumflex; virgul, plasat sub literele corespunztoare s, S, t, T. valoare cod &#259; &#258; &#226; &#194; &#238; &#206; &#351; &#350; &#355; &#354;

15

3. Proiectarea structurii site-ului

Principalele funcii ale unui site sunt: s informeze, s comunice, s distreze sau s conving. Structura i aspectul grafic al site-ului trebuie s ndeplineasc aceste funcii de baz. Etapele n proiectarea unui site sunt: 1. Identificarea cu exactitate a obiectivului pe care l atingem prin publicarea acestui site i particularitile publicului cruia i se adreseaz (vrst, educaie, interese, alte aspecte psihologice); 2. Culegerea de informaii referitoare la subiectul site-ului. n aceast etap adunai toate informaiile necesare, ntr-o form brut sau consultai alte site-uri de aceeai factur; 3. Selectarea informaiilor relevante. Adaptai volumul de informaii la obiectivul urmrit; 4. Proiectarea structurii site-ului. Organizai informaiile culese pe categorii, stabilii numrul de pagini, coninutul acestora, relaiile dintre pagini. Nu uitai c nu proiectai site-ul pentru voi!; 5. Proiectai aspectul grafic al site-ului. Toate paginile site-ului trebuie s aib un aspect grafic comun, unitar. Dac fiecare pagin arat complet altfel, aspectul general va fi de aduntur. Aspectul grafic al unei pagini Web este determinat de text (fontul folosit, dimensiunea caracterelor, stiluri, culori), fundalul paginii (imagine sau culoare), imaginile folosite, secvenele audio sau video. 6. Implementai. Descriei codul necesar pentru realizarea paginilor n modul n care le-ai proiectat. Descriei documente externe de definire a stilurilor. Lucrai ngrijit! Verificai cu atenie corectitudinea lexical i gramatical a textelor. Asociai un titlu semnificativ fiecrei pagini, datai sau semnai pagina. 7. Testai. Verificai funcionalitatea paginilor voastre! Verificai fiecare link, fiecare imagine, fiecare element multimedia. Vizualizai pagina pe diferite sisteme de calcul, cu diferite browser-e, folosind monitoare cu diferite rezoluii. 8. Publicai! Dac ai depit cu succes faza de testare, alegei un server pentru a publica pagina, contactai administratorul de reea (WebAdmin), apoi plasai paginile pe un server! 9. Promovai. Pentru ca site-ul vostru s fie vizitat, nu este suficient s-l publicai, trebuie s i facei cunoscut prezena. Un prim pas ar fi nscrierea site-ului la principalele motoare de cutare (exemplu: Yahoo, Excite, AltaVista), deoarece sunt primele locuri ctre care se ndreapt cineva care caut informaii pe Internet. O alt tehnic de a atrage vizitatori sunt listele de coresponden. Creai liste de vizitatori crora s le trimitei prin e-mail informri despre site i despre actualizrile acestuia. Dac urmrii atragerea unei audiene internaionale pentru site-ul vostru, este bine s apelai la servicii speciale de promovare a site-urilor. Exemplu: http://www.hyperbanner.com - HyperBanner; http://www.linkexchange.com MSN LinkExchange; Sfat: Proiectarea unui site nu este un proces secvenial! Nu v ateptai ca etapele s fie parcurse strict n aceast ordine i o singur dat. Pe parcursul lucrului vei evalua i reevalua ceea ce ai fcut, cu siguran va trebui s revenii la un anumit pas, s rafinai o idee, s modificai anumite elemente, pn cnd produsul finit corespunde cerinelor formulate iniial! La adresa www.w3.org/Provider/Style vei gsi o documentaie excelent, elaborat de Tim Berners-Lee, referitoare la elaborarea paginilor Web.

16

4. Elemente de design al paginii

Cele ase elemente de baz ale unui bun webdesign, sunt: 1. Simplitatea 2. Balansul Vizual 3. Proporia 4. Contrastul 5. Cursivitatea 6. Armonia Simplitatea Simplitatea este cel mai important principiu cnd vine vorba de webdesign. La urma urmei WWW-ul vrea s fac lucrurile mai simple iar informaia mai accesibil publicului. Vizitatorii n-or s se zbat prea tare ca s ajung la coninutul site-ului tu. Pe ct posibil ncearc s foloseti regula celor trei click-uri, adic nici o informaie nu trebuie s fie mai departe de trei click-uri. Ascunznd informaia dup meniuri peste meniuri nu faci dect s i frustrezi vizitatorii sau s i obligi s se mute la altceva (click, click, click, click, click, las-o balt). Balansul vizual Fiecare elment de webdesign (poze, text, spaii albe) are o influen optic. n lucrrile tiprite asta se cheam densitate de cerneal. Pentru a crea o balan de la nceput la sfrit trebuie ca orice pagin Web s aib o seciune header and footer; asta creeaz repere viziuale site-ului tu i l face mai uor de navigat. Nuana coloristic ar trebui s fie aceeai. De asemenea, nu subestima valoarea spaiilor albe. Muli designeri neexperimentai simt nevoia s umple fiecare pixel cu informaie, iar asta nu este cea mai bun metod de comunicare. Proporia Din anume motive ochiul uman tinde s favorizeze raporturi diferite de unu ntre lungime i lime. Este mai plcut ochiului un dreptunghi ntr-o proporie de dect un ptrat perfect. Contrastul Contrastul este foarte simplu de explicat; dac ipi de la nceput, publicul va nceta s te asculte, dar dac opteti i dintr-o dat ipi din adncul plmnilor, fi sigur c vei atrage atenia cuiva. O alt greeal este crearea documentelor cu text foarte dens ignornd includerea de spaii albe; asta face ca cititorii s vad un zid de gri. nc un sfat ar fi s evitai folosirea unui singur tip de tratament pentru textul vostru. De exemplu: folosii fie bold fie italic dar nu mpreun. Cursivitatea Vizitatorii obinuiesc mai nti s scaneze rapid pagina i abia apoi s citeasc. Primele priviri ajung pe formele neobinuite apoi ncep s analizeze textul. O pagin Web bun conduce vizitatorul n punctul dorit. Armonia Site-ul tu ar trebui s fie armonios, cu alte cuvinte, paginilor tale trebuie s le stea bine mpreaun, s arate c aparin unele de altele. Poi face asta pstrnd aceleai elemente i aproximativ aceeai structur pe fiecare pagin din site.

17

5. Activitate practic
Test HTML 1. Scriei un text HTML unde fontul s fie de culoare albastr, mrime 5, ngroat i de tipul "Courier New". 2. Definii denumirea HTML! 3. Cum se numete: a) Elementul din interiorul parantezelor unghiulare? b) Elementul de introducere a unui link? 4. Transformai urmtorul text n format HTML: "-Mam, unde merg Mihai i Ionu? -Ei se duc la scldat. -Pot s merg i eu? -Tu ai teme!" Rezolvare: 1. HTML <html><head></head> <body> <b><font size="5" face="Courier New" color="blue">Text</font><b> </html>

Afiare

2. HTML = HyperText Markup Language 3. a) Se numete TAG. b) <A> </A> - marcaj de tip ancor. 4. <html> <head></head> <body>-Mam&#259;, unde merg Mihai &#351;i Ionu&#355;?<br> -Ei se duc <b>la sc&#259;ldat.</b><br> -Pot s&#259; merg &#351;i <font color="Red">eu?</font><br> -Tu ai <font color="Blue">teme!</font> </body> </html>

18

Modulul 2: Folosirea elementelor de baz pentru inserarea n pagin a elementelor: text, imagine
1. Inserarea i formatarea unui text: corp de liter, mrime, stil
Tag-ul <P> - permite introducerea unui paragraf Dac scriem un text ntre tag-urile <P> i </P>, atunci textul va fi ncadrat de cte un rnd liber. Exemplu: <html> <body> <p>Acesta este un paragraf obinuit.</p> <p>Un rnd al unui paragraf are limea ferestrei afiat de browser. Dac micorm fereastra browser-ului acelai paragraf va ocupa mai multe rnduri.</p> <p>Dac dou cuvinte ale unui paragraf sunt separate prin mai multe spaii browser-ul afieaz doar un singur spaiu.</p> </body> </html> Elementul &nbsp (non-breaking space) Elementul &nbsp previne trecerea unui cuvnt pe linia urmtoare, prin scrierea sa naintea cuvntului respectiv. Dac cuvntul nu ncape pe linie, se coboar i cuvntul precedent pe linia urmtoare. Tag-ul BR Atunci cnd vrem ca textul din cadrul paginii noastre web s fie afiat pe mai multe rnduri vom folosi unul din tag-urile <BR> sau <P>. Tag-ul <BR> nu are tag de ncheiere, n timp ce tag-ul <P> are tag de ncheiere, ns nu este obligatoriu. Tag-ul <BR> vine de la line break (ntrerupere de linie). Tag-ul B Are rolul de a determina browser-ul s afieze ngroat (bold) textul cuprins ntre cele dou tag-uri ale sale: <b> i </b>. Tag-ul I Are rolul de a determina browser-ul s afieze nclinat (italic) textul cuprins ntre cele dou tag-uri ale sale: <i> i </i>. Tag-ul U Are rolul de a determina browser-ul s afieze subliniat (underline) textul cuprins ntre cele dou tag-uri ale sale: <u> i </u>. <del>text tiat (deleted) </del> ^{exponent (superscript)} _{indice (subscript)} <strong>text ngroat (strong) </strong> <big>mare (big) </big> <small>mic (small) </small> <font color="red">font rou (detalii) </font> <font face="Courier">font Courier (detalii) </font> <font size="6">font size=6 (detalii) </font> <div align="center">text aliniat pe centru</div> 19

<div align="left">text aliniat la stnga</div> <div align="right">text aliniat la dreapta</div> <h1> titlu de nivel 1 </h1> <h2> titlu de nivel 2 </h2> <h3> titlu de nivel 3 </h3> <h4> titlu de nivel 4 </h4> <h5> titlu de nivel 5 </h5> <h6> titlu de nivel 6 </h6>

20

2. Folosirea elementelor bloc de text

Aceste etichete nu se refer la particularitile caracterelor ce compun textul, ci la funciile pe care le poate avea un bloc de text n cadrul paginii Web. Toate aceste etichete produc automat trecerea la un rnd nou i adugarea unui spaiu suplimentar. Inserarea unei adrese Dac ntr-o pagin web trebuie inclus o adres, atunci putem utiliza facilitile oferite de o etichet dedicat: <address>...</address>. Exemplu: <head> <title> Adresa</title> </head> <body> Adresa instituiei noastre este :<address> Colegiul Naional Fraii Buzeti<br> Str: tirbei Vod, Nr: 5 <br> Craiova Romania </address> </body> </html> Afiare: Adresa instituiei noastre este : Colegiul Naional Fraii Buzeti Str. tirbei Vod, Nr. 5 Craiova Romnia Indentarea unui bloc Pentru ca un bloc de text s fie indentat (marginea din stnga a textului s fie deplasat la dreapta la o anumit distan fa de marginea paginii), acesta trebuie inclus ntre etichetele <blockquote>...</blockquote>. Exemplu: <html> <head> <title> Indentarea unui bloc</title> </head> <body> Textul ce urmeaz este indentat:<blockquote> Aceste etichete nu se refer la particularitile caracterelor ce compun textul, ci la funciile pe care le poate avea un bloc de text n cadrul paginii Web. Toate aceste etichete produc automat trecerea la un rnd nou i adugarea unui spaiu suplimentar. </blockquote> </body> </html> 21

Blocul preformatat ntr-un bloc <pre>...</pre>, semnificaia marcajelor HTML se pstreaz. Blocul <pre>...</pre> este indicat pentru a insera rnduri vide (spaiu ntre rndurile succesive). Caracterul "spaiu" poate fi luat n considerare de browser dac este inserat explicit prin &nbsp;. Exemplu: HTML <html> <head> <title> Bloc preformatat</title> </head> <body> Orar:<pre> Ora/Ziua Luni Marti 8:00 Romana Matematica 9:00 Geografie Istorie </pre> </body> </html> Afiare Orar: Ora/Ziua Miercuri 8:00 9:00

Luni Romana Matematica Geografie Istorie

Marti Sport Fizica

Miercuri Sport Fizica

ntr-un fiier HTML, caracterele "<" i ">" au o semnificaie special pentru browser. Ele ncadreaz comenzile i atributele de afiare a elementelor ntr-o pagin. Dac dorim ca un fragment de text s conin astfel de caractere, acest fragment trebuie ncadrat de una dintre perechile de etichete: <xmp>...</xmp> ( 80 de caractere pe rnd ); <listing>...</listing> ( 120 de caractere pe rnd ). Aceste marcaje interpreteaz corect caracterele "spaiu", "etichet" i "CR/LF". Textul afiat n pagin este monospaiat. Afiare HTML <html> <head> Un fiier html standard arat astfel: <title> xmp i listing</title> <html> </head> <body> <head> Un fiier html standard arat astfel: <xmp> <title> </title> </head> <html> <body> <head> O pagina Web ... <title> </title> </body> </head> </html> <body> O pagina Web ... </body> </html> </xmp> </body> </html> Blocuri paragraf Cu ajutorul etichetei paragraf <p> este posibil trecerea la o linie nou i permite: inserarea unui spaiu suplimentar nainte de blocul paragraf; inserarea unui spaiu suplimentar dup blocul paragraf, dac se folosete delimitatorul </p> (acesta fiind opional); alinierea textului cu ajutorul atributului align, avnd valorile posibile "left", "center" sau "right". 22

Exemplu: <html> <head> <title> Blocuri paragraf</title> </head> <body> Prima linie <p> Linia generat de un paragraf (implicit paragraful este aliniat la stnga). <p align="right"> Paragraf aliniat la dreapta. Paragraf aliniat la dreapta. Paragraf aliniat la dreapta. Paragraf aliniat la dreapta. Paragraf aliniat la dreapta. Paragraf aliniat la dreapta. Paragraf aliniat la dreapta. <p align="center"> Paragraf aliniat n centru. Paragraf aliniat n centru. Paragraf aliniat n centru. Paragraf aliniat n centru. Paragraf aliniat n centru. Paragraf aliniat n centru. Paragraf aliniat in centru. </body> </html> Blocuri de titlu ntr-un text titlurile (headers) de capitole pot fi introduse cu ajutorul etichetelor <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Toate aceste etichete se refer la un bloc de text i trebuie nsoite de o etichet de ncheiere similar. Aceste etichete accept atributul align pentru alinierea titlului blocului de text la stnga (n mod prestabilit), n centru i la dreapta. Tag-ul <h1> permite scrierea unui titlu cu caractere mai mari i aldine, pe cnd <h6> folosete caracterele cele mai mici. Exemplu: <html> <head> <title> Blocuri de titlu</title> </head> <body> <h1 align="center"> Titlu de mrime 1 aliniat n centru </h1> <h2 align="right"> Titlu de mrime 2 aliniat la dreapta. </h2> <h4> Titlu de mrime 4 aliniat la stnga (implicit) </h4> </body> </html> Linii orizontale ntr-o pagina Web pot fi inserate linii orizontale. Acest lucru se face cu ajutorul etichetei <hr>. Pentru a configura o linie orizontal se utilizeaz urmtoarele atribute ale etichetei <hr>: align permite alinierea liniei orizontale. Valorile posibile sunt "left", "center" i "right"; width permite alegerea lungimii liniei; size permite alegerea grosimii liniei; noshade cnd este prezent definete o linie fr umbr; color permite definirea culorii liniei. 23

Exemplu: <html> <head> <title> Linii orizontale</title> </head> <body> <h1 align="center"> Tipuri de linii orizontale </h1> O linie implicit alinierea stnga, lime 100%, grosime 2 cu umbr. <hr> Urmeaz o linie aliniat n centru, de lime 50%, grosime 5 pixeli , fr umbr. <hr align="center" width="50%" size="5" noshade> Urmeaz o linie aliniat la dreapta, de lime 150 de pixeli, grosime 12 pixeli, de culoare roie. <hr align="right" width=150 size=12 color="red"> </body> </html> Blocuri <center> Blocul introdus de etichetele <center>...</center> aliniaz centrat toate elementele pe care le conine. Exemplu: <html> <head> <title> Linii orizontale</title> </head> <body> <center> <hr width=10%> <hr width=40%> <hr width=70%> <hr width=100%> <hr width=70%> <hr width=40%> <hr width=10%> </center> </body> </html> Blocuri <nobr> Blocul de text cuprins ntre etichetele <nobr>...</nobr> va fi afiat pe o singur linie. Exemplu: <html> <head> <title> Blocul <nobr></title> </head> <body> <nobr> O singur linie. O singur linie. O singur linie. O singur linie. O singur linie. O singur linie. O singur linie. O singur linie. O singur linie. O singur linie. O singur linie. O singur linie. O singur linie. O singur linie. O singur linie. </nobr> </body> </html> Blocuri <div> 24

Modalitatea cea mai eficient de delimitare i de formatare a unui bloc de text este folosirea delimitatorilor <div>...</div>. Un parametru foarte util pentru stabilirea caracteristicilor unui bloc <div> (diviziune) este align (aliniere). Valorile posibile ale acestui parametru sunt: "left" (aliniere la stnga); "center" (aliniere central); "right" (aliniere la dreapta). Un bloc <div>...</div> poate include alte subblocuri. n acest caz, alinierea precizat de atributul align al blocului are efect asupra tuturor subblocurilor incluse n blocul <div>. Un bloc <div>...</div> admite atributul "nowrap" care interzice ntreruperea rndurilor de ctre browser. Exemplu: <html> <head> <title> Blocul <div></title> </head> <body> Aceasta linie este o linie normal. Urmtorul bloc este aliniat la dreapta. <div align="right"> O singur linie. O singur linie. O singur linie. O singur linie.<br> O singur linie. O singur linie. O singur linie. O singur linie.<br> O singur linie. O singur linie. O singur linie. O singur linie.<br> </div> <div align="center"> Bloc aliniat pe centru. Bloc aliniat pe centru.<br> Bloc aliniat pe centru. Bloc aliniat pe centru.<br> Bloc aliniat pe centru. Bloc aliniat pe centru.<br> </div> </body> </html>

25

3. Inserarea unei imagini modificarea proprietilor imaginii: poziionare, dimensiuni, ncadrare n text
Folosind imagini pagina capta un plus de atractivitate dar putei plti preul unei ncrcri greoaie dac dimensiunile imaginii sunt mari. Cteva din formatele de imagini utilizate n paginile web sunt: JPEG (*.jpg sau *.jpeg), GIF (*.gif), BMP (*.bmp), PNG (*.png). Formatul gif este recomadat pentru realizarea butoanelor i a icoanelor iar jpg pentru fotografii. GIF (Graphics Interchange Format) Formatul GIF poate reda un numr de 256 de culori, de aceea este folosit pentru imaginile de dimensiuni mici: butoane, icon-uri, animaii. JPEG (Joint Photographic Expert Group) Formatul JPEG nu mai este limitat la 256 de culori i de aceea este folosit pentru fotografii. Imaginile care aparin acestui format au extensia .jpg sau .jpeg. Eticheta folosit pentru inserarea unei imagini n pagin este <img> i are urmtoarele atribute: src = sursa, locul unde se afl imaginea width = limea imaginii height = nlimea imaginii alt = numele care nlocuiete imaginea pn aceasta se ncarc sau cnd nu a fost gsit border = chenar (0 = lips bordur) Exemplu: <img src="imagini/red-flower.jpg" width="200" height="200" border=3 alt="red flower jpg"> "src" este prescurtarea pentru "source" (sursa). Acest atribut se folosete pentru a indica locaia fotografiei. Sursa Local src="poza.jpg" src="../poza.jpg" src="../imagini/poza.jpg" Descriere fotografia este situat pe acelai nivel cu fiierul .html fotografia este situat pe un nivel anterior fiierului .html fotografia este situat n folderul "imagini" pe nivelui anterior fiierului .html

Dimensiunea imaginii afiate de browser este stabilit de argumentele width i height care pot fi diferite de dimensiunile imaginii originale, caz n care imaginea va fi redimensionat automat de ctre browser. Pentru a micora timpul ncrcrii complete a paginii exist programe care optimizeaz imaginile. Optimizarea const n: 1. reducerea dimensiunii imaginii fr degradarea major a calitii 2. eliminarea informaiilor tip metadat asociate imaginii. Aceste date sunt asociate automat de programele de grafic (de ex. Adobe Photoshop) sau de aparatele de fotografiat digitale. Alinierea orizontal i vertical a unei imagini n acest sens, sunt folosite atributele align i valign. Opiunile oferite de aceste atribute sunt: 26

1. Align (orizontal) - right - left - center 2. Valign (vertical) - top - bottom - center Dac dorii ca textul s ncadreze imaginea adugai etichetei img atributul align. Exemplu: <img src="imagini/red-flower.jpg" width="200" height="200" border=3 alt="red flower jpg" align="left">

27

4. Formatarea unui fundal sau a unei teme

Backgrounds (Fundaluri) Tag-ul <body> are dou atribute prin care i se poate specifica folosirea unui fundal. Fundalul poate fi att o imagine ct i o culoare. Bgcolor Atributul bgcolor specific o culoare de fundal a unei pagini HTML. Valoarea acestui atribut poate fi un numr hexazecimal, o valoare RGB sau numele unei culori. Exemplu de folosire a atributului bgcolor cruia i se atribuie culoarea negru n cele trei moduri enumerate mai sus: <body bgcolor="#000000"> <body bgcolor="rgb(0,0,0)"> <body bgcolor="black"> Background Atributul background specific o imagine drept fundal pentru o pagin HTML. Valoarea acestui atribut este URL-ul imaginii care se dorete a se folosi. Dac imaginea este mai mic dect fereastra browser-ului atunci ea se va repeta de oricte ori va fi nevoie pentru a umple fereastra browser-ului. Exemplu de utilizare al atributului background: <body background="clouds.gif"> <body background="http://www.w3schools.com/clouds.gif"> URL-ul poate fi relativ (ca n primul exemplu) sau absolut (ca n al doilea). ATENIE! Atunci cand utilizai imagini pentru fundal trebuie s avei n vedere cteva aspecte printre care: Va crete imaginea de fundal prea mult timpul de ncrcare al paginii? Cum va arta imaginea de fundal comparativ cu alte imagini din pagin? Va arta imaginea de fundal bine cu culoarea textului din pagin? Va arta imaginea de fundal bine atunci cnd se va repeta pentru a umple fereastra browser-ului? Va atrage imaginea de fundal prea mult atenia de la textul din pagin?

28

5. Activitate practic
1. Creai un folder/director numit AplicaieHTML. 2. n folderul/directorul creat aducei o imagine cu ghiocei (ghiocei.jpg). 3. n folderul/directorul AplicaieHTML, creai un fiier numit index.html pe care l deschidei n Notepad spre editare, iar pentru vizualizare n Internet Explorer. 4. S se adauge n index.html o etichet (tag) astfel nct fiierul index.html, vizualizat n Internet Explorer s aib pe bara de titlu textul Primavara. 5. Punei documentului un fundal galben. 6. Pe pagin, centrat, avnd dimensiunea maxim posibil dat de eticheta < h > punei textul, scris cu rou A venit primavara! 7. Lsai dou linii libere. 8. Inserai textul scris cu negru, A venit, n sfarsit primavara. Au aparut ghioceii. 9. Pe rndul urmtor inserai imaginea ghiocei.jpg, impunnd dimensiunea: lime = 200, nlime = 156. 10. Imaginea va permite afiarea textului GHIOCEI atunci cnd ne aflm cu mouse-ul pe ea.

11. Pe rndul urmtor afiai textul: Pentru a vedea imaginea cu ghioceii la dimensiunea reala, apasati aici. Cuvntul aici va constitui link ctre pagina doi.html. Pagina doi.html va permite afiarea imaginii ghiocei.jpg la dimensiunea real. Pagina doi.html se va deschide ntr-o fereastr nou. Rezultat final:

29

Modulul 3: Enumerarea i aplicarea modalitilor de a realiza o hiper-legtur

1. Realizarea unei legturi pe un text
Definiie Link Link-ul (englez: hyperlink), este o referin ctre un document sau parte a unui document. Termenul link (prescurtare de la hyperlink) de obicei este asociat cu Internetul i paginile web, el fiind un termen mult mai general, care poate cuprinde referirea i ntre alte tipuri de documente electronice, care nu sunt neaprat n format HTML (pagini web) i nu sunt neaprat pe Internet. n momentul n care exist mult informaie n format electronic (fie pe Internet, pe calculatorul personal sau chiar pe telefonul mobil) i aceast informaie este organizat logic i relaional pe anumite criterii, are nevoie de un mecanism de referire ntre acele poriuni de informaie (ex: referirea ctre o pagin care explic un anumit termen). Alt caz n care este necesar referirea, este cazul n care o informaie nestructurat sau de dimensiune mare, trebuie organizat logic n pri mai mici sau pri asociate dup anumite criterii, pentru a fi prezentat mai uor unui cititor/utilizator (ex: paginarea rezultatelor de cutare, referirea ctre o anumit poriune a unei pagini, etc.). Termenul de link (hyperlink) este o metod de referire ntre documentele de tip hypertext (noiune folosit pentru a defini textul afiat pe dispozitive electronice: PC, laptop, handheld, telefon, etc.). Legtura (link-ul) este o etichet foarte important n HTML deoarece confer utilizatorului posibilitatea navigrii de la o pagin la alta. De obicei link-ul este subliniat iar atunci cnd suntem deasupra lui cursorul i schimb forma. Link-ul este definit cu etichetele <a> i </a> i are atributele: href - adresa fiierului destinaie target - n ce fereastr se va deschide fiierul destinaie title - o mic descriere asociat legturii afiat n momentul n care mouse-ul se afl deasupra legturii Adresa fiierului destinaie (href) poate fi exprimat astfel: nume fiier - dac se afl n acelai folder cu pagina curent adres relativ- dac se afl pe acelai server sau disc, indicndu-se calea adres URL - fiind adresa complet a paginii (de exemplu: http://www.cnfb.ro/index.php?option=profesori) Atributul href (Hypertext REFerence) numete legatura ctre o alt pagina web. De fapt este locul unde va fi dus user-ul care va executa un click pe linkul respectiv. Linkurile pot fi de trei tipuri: interne - ctre locuri specifice din pagin (anchors) locale - ctre alte pagini dar pe acelai domeniu globale - ctre alte domeni n afara site-ului Internal - href="#anchorname" Local - href="../img/foto.jpg" Global - href="http://www.tutorialehtml.com/"

30

Link-ul n paginile Internet Ca reprezentare grafic un link este un text (de obicei subliniat i/sau prezentat cu o culoare diferit), care poate fi identificat ntr-o pagin web i pe care se poate face clic pentru a accesa pagina sau documentul spre care puncteaz. Un link poate puncta att ctre o pagin exterioar, ct i n aceeai pagin spre o anumit sub-seciune a paginii. n format HTML (pagin web), un link este reprezentat n forma urmtoare: <a title=Titlu, care apare ca info cnd se trece cu mouse-ul peste href=URL target=unde va fi deschis noua pagin class=clasaStilizareLink>Text vizibil link</a> Pentru a seta nceputul i sfritul unei anchor-e se folosesc tag-urile <a> </a>. Un exemplu de link, care puncteaz ctre aceast pagin, ar fi: <a title=Tutorial HTML href=http://www.competentedigitale.ro/HTML/>Tutorial HTML </a> Metoda de funcionare a unui link Cnd utilizatorul face clic pe un link, navigaroul / browser-ul acceseaz acea pagin de la adresa specificat (n cazul exemplului de mai sus, navigatorul va rencrca pagina curent, pentru c puncteaz ctre aceast pagin). Link-ul este un lucru necesar n imensitatea de informaii (site-uri web) care exist publicate pe Internet. Un loc unde se simpte lipsa hyperlink-ului este biblioteca clasic. Avantajul unui hyperlink pe Internet este uor de identificat i anume rapiditatea cu care este accesat informaia (asta n cazul n care v merge bine net-ul) i o libertate de a naviga rapid prin multe tipuri de informaii (fr a deranja de fiecare dat bibliotecara pentru o definiie sau pasaj). Legtur spre e-mail: <a href=mailto:maria@yahoo.com>Legatura spre e-mail-ul Mariei</a> Target-uri de link Atributul target spune browser-ului dac trebuie s deschid noua pagin ntr-o nou fereastr sau n aceeai fereastr. target= "_blank" "_self" "_parent" "_top" Deschide o nou fereastr Deschide pagina n aceeai fereastr Deschide noua pagin ntr-un frame superior linkului Deschide noua pagin n acelai browser anulnd toate frameurile

31

2. Realizarea unei legturi pe o imagine

Cum se realizeaz o legtur pe o imagine? Imaginea a devenit un element omniprezent n toate paginile web actuale. Bazat pe faptul recunoscut c o imagine are un impact mult mai mare asupra privitorului dect un text precum i pe necesitatea oferirii unor informaii ct mai rapid i direct ctre utilizator imaginea s-a impus ca element indispensabil oricrei prezentri a oricrui subiect. O legtur pe o imagine se realizeaz exact ca i o legtur pe text cu diferena c url-ul imaginii va lua locul textului. De exemplu: <html> <body> <p>Legtur pe o imagine: <a href="http://www.competentedigitale.ro/HTML/"> <img src="flower.jpeg" alt="HTML tutorial" width="32" height="32" /> </a></p> <p>Imagine legtur fr bordur: <a href="http://www.competentedigitale.ro/HTML/"> <img border="0" src="flower.jpeg" alt="HTML tutorial" width="32" height="32" /> </a></p> </body> </html> Rezultatul va fi urmtorul:

32

3. Importul de gif-uri i flash-uri.

Elemente de animaie text HTML are un tag special, <marquee> </marquee>, prin care putei crea un efect de micare a unui text (sau imagine) care este ncadrat de acest element. Are urmtoarele atribute: loop definete de cte ori se va mica textul height nlimea n pixeli a zonei n care se mic textul width - lungimea n pixeli a zonei n care se mic textul bgcolor - culoarea zonei n care se mic textul direction direcia de micare (left, right, up, down) - (stnga, dreapta, sus, jos) behavior definete cum se va mica textul (scroll, slide, alternate) scrolldelay - seteaz numrul, n milisecunde, ntre refreshuri de micare. Exemplu de micare pe orizontal: <marquee behavior="alternate" bgcolor="#00ffff" direction="right">Marquee text</marquee> Iat un alt exemplu unde micarea se face pe vertical: <marquee behavior="alternate" bgcolor="#00ffff" direction="up" width="100" height="100">Marquee text</marquee> - n loc de text poate fi folosit i o imagine, nlocuind textul (aici "Marquee text") cu tagul <img> pentru imagine. Includerea unei pagini HTML externe n afar de modalitatea cu folosirea tag-ului <iframe> pentru afiarea n pagina web HTML a coninutului din alt pagin HTML Exemplu: <iframe src="url_pagina.html" width="600" height="200" align="center" scrolling="yes"> </iframe> - exist i o alt soluie, dat de tag-ul <object> folosit cu atributele "data" i "type". Urmtorul cod HTML este sintaxa general de afiare ntr-o pagin web a coninutului HTML aflat n alt pagin extern: <object data="adresa_pagina_externa" type ="text/html" width="600" height="400"> </object> Avantajul utilizrii uneia din aceste 2 metode, pentru cei care fac site-uri doar cu HTML, este faptul ca acelai continut HTML poate fi inclus n mai multe pagini din site, fiind scris o singur dat. De exemplu, n cazul unui Meniu ce trebuie afiat n toate paginile site-ului; codul acestuia poate fi scris ntr-un fiier special ("meniu.html") apoi, cu una din formulele de 33

mai sus (tag-ul "<iframe>" sau "<object>") se adaug n fiecare fiier al paginilor, iar la o eventual modificare a meniului se va face doar n codul acestuia din "meniu.html". Butoane n html Mai jos avei un exemplu de buton clasic <a href="exemplu.com"><button>Nume buton</button></a> sau putei face butonul folosind un formular simplu: <form method="get" action="exemplu.com"> <input name="numele butonului" type="submit" value="Ce text va aparea pe buton"> </input> </form> sau un buton grafic i anume o imagine care are funcia de buton: <a href="exemplu.com"> <img src ="buton.gif"> </a>

34

4. Importul de secvene sonore i video

Adugarea de sunet la o pagin HTML Pentru a aduga sunet ntr-o pagin web, putei folosi elementele <embed> sau <bgsound>: 1. <bgsound> </bgsound> - introduce un background (fundal) audio n pagina, are urmtoarele atribute: src Definete locaia fiierului audio folosit (midi .au sau wav) loop definete de cte ori se va repeta sunetul delay definete timpul dintre repetri title - Textul care va descrie sunetul. Exemplu: <bgsound src="sunet.midi" loop="3" title="titlul melodiei" derlay="5"> 2. <embed> </embed> - afieaz o consol pentru sunet, are urmtoarele atribute: src Definete locaia fiierului audio folosit (midi .au sau wav) controls - ofer posibilitatea alegerii mai multor controale care includ: console, console mici, butoane de play i altele autostart - cnd este TRUE sunetul ncepe n timp ce sunetul este descrcat de browser hidden - cnd este TRUE va ascunde controalele, standard este FALSE loop definete de cte ori se va repeta sunetul volume - seteaz volumul sunetului (sonorul) height - nlimea n pixeli a consolei width - lungimea n pixeli a consolei. Exemplu: <embed src="sunet.midi" width="145" height="60" autostart="truie" volume"100" controls="console" hidden="false"> Tag-ul "<embed>" poate fi folosit i pentru afiarea de imagini video, care au extensiile ".movs", ".mpeg" sau ".avi", recomandat este ".movs". Se adaug similar ca i sunetul, la "src" scriei calea ctre fiierul video. Diferena e c nu trebuie folosit atributul "hidden" iar pentru "width" i "height" dimensiunile nu trebuie s fie mai mici dect dimensiunile n care este salvat fiierul video. Totui, afiarea de imagini video necesit mai mult timp deoarece fiierele video au dimensiuni destul de mari. "<embed>" se folosete i pentru adugarea de imagini flash (cu extensia ".swf"), pentru aceasta este ncadrat n alt element, <object> </object> Iat un exemplu de cod prin care putei aduga imagini flash n pagina web: <object width="580" height="400"> <param name="movie" value="fisier.swf"> <embed src="fisier.swf" width="580" height="400"> </embed> </object> 35

Unde "width" i "height" sunt dimensiunile cadrului n care este afiat imaginea flash, iar la atributele "value" i "src" se scrie calea ctre fiierul ".swf" (trebuie scris aceeai cale la ambele atribute). Afiarea n pagin a elementelor cu EMBED necesit folosirea unui plug-in, care de cele mai multe ori, dac acesta nu este deja instalat, este cerut automat ncrcarea lui de ctre browser.

36

5. Legturi ntre pagini

O legatur ctre o pagin aflat n acelai director O legatur ctre o pagin aflat n acelai director se formeaz cu ajutorul etichetei <a> (de la "anchor"=ancor). Pentru a preciza pagina indicat de legatur se utilizeaz un atribut al etichetei <a> numit href, care ia ca valoare numele fiierului HTML aflat n acelai director. Zona activ care devine sensibil la apsarea butonului stng al mouse-ului este format din textul cuprins ntre etichetele <a>...</a>. Prezena etichtetei de sfrit </a> este obligatorie. <html> <head> <title> Comutarea ntre dou pagini</title> </head> <body> <h3>Pagina 1 </h3> <a href="leg_ex2.html"> Link catre pagina 2 </a> </body> </html> <html> <head> <title> Comutarea ntre dou pagini</title> </head> <body> <h3>Pagina 2 </h3> <a href="leg_ex1.html"> Link ctre pagina 1 </a> </body> </html> O legatur ctre o pagin aflat pe acelai disc local Dac pagina referit se afl pe acelai disc local, dar ntr-un alt director atunci pentru a preciza poziia ei n structura de directoare se poate folosi adresarea relativ. <html> <head> <title> Comutarea ntre dou pagini aflate pe acelai disc local</title> </head> <body> <h3>Pagina 3 </h3> <a href="../../exemple/list/listex_11.html"> Link ctre o pagin cu liste </a> </body> </html>

37

O legatur ctre un site particular n exemplul urmtor se utilizeaz adresa URL www.netscape.com care ncarc pagina de start din site-ul firmei Netscape Corporation. <html> <head> <title> Link ctre site-ul firmei Netscape</title> </head> <body> <h3>Link ctre site-ul firmei Netscape </h3> <a href="http://www.netscape.com"> Netscape Corporation </a> </body> </html> Anchors (ancore) Se pot aduga puncte de reper (ancore) pentru o deplasare mai uoar n cazul unor pagini HTML lungi sau ctre un loc anume aflat ntr-o alt pagin. Ancora se definete tot ntre etichetele <a> i </a> dar cu atributul name. Pentru a face trimitere ctre ancor se introduce un link cu atributul href avnd ca valoare denumirea ancorei. Ancora <a name="nume">Ancora</a> Link ctre ancora aflat n <a href="#nume">napoi la ancor</a> aceeai pagin Link ctre ancora aflat n alt <a href="pagina.html#nume">napoi la ancora din pagin pagina.html</a> Exemplu: <html> <head> <title> Ancore definite n acelai document i n alt document</title> </head> <body> <h3>Ancore definite n acelai document i n alt document </h3> <a href="#ancora1">Link ctre ancora 1 </a> <br> <a href="../../legaturi.html#anc"> Link ctre o ancor din alt document </a> <br> 1<br>2<br>3<br>4<br> 5<br>6<br>7<br>8<br> 9<br>10<br>11<br>12<br> 13<br>14<br>15<br>16<br> 17<br>18<br>19<br>20<br> 21<br>22<br>23<br>24<br> <a name="ancora1">ancora 1</a> </body> </html>

38

6. Maparea unei imagini

Maparea unei imagini (Hri imagine) Hrile de imagini permit declararea unor zone din imagine ca legturi ctre alte pagini web i implic dou aspecte: 1. Imaginea este declarat ca fiind hart. Pentru aceasta eticheta <img> a imaginii are urmtoarele atribute: src fiierul sau adresa fiierului imagine usemap are valoarea de genul #nume care este folosit n interiorul etichetei <map> prezentate mai jos 2. Harta se definete folosind perechea de etichete <map> i </map>, cu atributul obligatoriu name, avnd aceeai valoare ca la usemap din img. Zona sau zonele coninute de hart sunt introduse prin eticheta <area> cu atributele obligatorii: shape = forma ariei declarate cu valorile: rect=dreptunghiular, circle=circular, poly=poligonal, default=alte forme (diferite de cele anterioare) coords = coordonatele zonei href = adresa paginii destinaie a legturii Originea coordonatelor este colul stnga sus al imaginii. Fiecare imagine este alctuit din pixeli. Fiecare pixel este caracterizat de dou coordonate (x, y), n sistemul de axe de mai jos:

Aria rectangular (rect) se declar prin coordonatele colului stnga sus i colul dreapta jos. RECT COORDS = X1, Y1, X2, Y2 dreptunghi, unde X1, Y1 reprezint coordonatele colului din stnga sus si X2, Y2 sunt coordonatele colului din dreapta jos.

Aria circular (circle) se declar prin coordonatele centrului i raza. 39

CIRCLE COORDS = X1, Y1, R cerc, unde X1, Y1 reprezint coordonatele centrului, iar R raza cercului.

Aria poligonal (poly) se declar prin coordonatele fiecrui col. POLI COORDS = X1, Y1, X2, Y2, , Xn, Yn poligon, unde X1, Y1, X2, Y2, , Xn, Yn reprezint coordonatele vrfurilor.

Exemplu: o hart de imagini care conine 5 zone <html> <head> <title>Exemplu</title> </head> <body> <b>Harti de imagini</b><p> <img src="harta.gif" usemap="#harta" width="280" height="160" border="0"> <map name="harta"> <area shape="rect" coords="20,20,70,70" href="pag1.html"> <area shape="rect" coords="20,90,120,140" href="pag2.html"> <area shape="circle" coords="200,80,30" href="pag3.html"> <area shape="circle" coords="200,80,60" href="pag1.html"> <area shape="poly" coords="90,70,120,70,120,20" href="pag3.html"> </map> </body> </html>

40

7. Activitate practic
Realizai un mini-site despre Spania care s conin urmtoarele elemente: 1. O pagin principal spania.html i dou pagini secundare: barcelona.html i madrid.html. 2. Pagina principal va conine: un titlu de nivel 1, centrat; o imagine cu Spania (spania.jpeg) de dimensiuni 250 px limea i 200 px nlimea, iar n partea dreapt a imaginii, un meniu cu 2 link-uri (un link ctre pagina barcelona.html i cellalt link ctre madrid.html). Pentru aranjarea elementelor n pagin se va folosi un tabel fr borduri. 3. Paginile secundare barcelona.html i madrid.html vor conine fiecare un titlu centrat de nivel 1 cu numele oraului, sub titlu va fi afiat centrat o imagine cu oraul respectiv, cu dimensiunile de 150 x 100 px. Sub imaginea oraului va fi inclus un paragraf cu detalii despre oraul descris.
4. Fiecare din paginile barcelona.html

i madrid.html, va conine cte un buton de ntoarcere ctre pagina principal. Butonul se va numi BACK.

41

Modulul 4: Utilizarea listelor i tabelelor ntr-o pagin WEB

Tipuri de liste utilizate ntr-o pagin web
Listele reprezint un mod de organizare a coninutului prin care informaiile similare sunt grupate, formnd astfel o enumerare. Fiecrui element din list i este asociat un nou paragraf. Se creeaz astfel spaii libere care sporesc gradul de urmrire a textului, informaiile structurate dintr-o list sunt uor de asimilat de ctre cititor. Enumerrile, de orice fel, constituie o parte important a comunicrii prin faptul c ajut la sistematizarea si evidentierea unor intrri. n instruirea asistat de calculator, sunt folosite trei tipuri de liste: liste neordonate, cu buline sau fr; liste ordonate; liste de definitie. Liste neordonate Aceste liste sunt delimitate de etichetele <ul> si </ul> iar elementele de <li> si </li>. pentru evideniere, fiecare element al listei este precedat de un acelai simbol numit marcator; au un aspect vizual plcut; sunt n general uor de urmrit; Exemplu HTML Afiare Exemple de fructe: Exemple de fructe: <ul> <li>mere</li> mere <li>pere</li> pere <li>struguri</li> </ul> struguri Elementele listei pot fi particularizate folosind atributul type care poate lua valorile square, circle i disc. Exemplu HTML Exemple de legume: <ul> <li type="square">rosii</li> <li type="circle">cartofi</li> <li type="disc">morcovi</li> </ul> Afiare Exemple de legume:
o

rosii cartofi

Lista va fi indentat fa de restul paginii Web i fiecare element al listei ncepe pe un rnd nou. Aplicaie: <html> <head><title>listex_2</title></head> 42

<body><h1 align=center>O lista neordonata</h1><hr> Glosar de termeni de World Wide Web <ul>Culori uzuale disponibile prin nume <li>Black <li>White <li>Red <li>Green <li>Blue <li>Yellow <li>Purple <li>Aqua </ul> </body> </html> Rezultatul este:

O lista neordonata
Glosar de termeni de World Wide Web Culori uzuale disponibile prin nume Black White Red Green Blue Yellow Purple Aqua Listele neordonate pot fi imbricate pe mai multe niveluri. Aplicaie: <html> <head><title>listex_3</title></head> <body><h1 align=center>O lista neordonata de liste neordonate</h1><hr> Glosar de termeni de World Wide Web <ul>Elemente si atribute a unei pagini HTML <li>Frameset <ul>Atribute: <li>cols <li>rows <li>border </ul> <li>Frame <ul>Atribute: <li>src <li>name <li>scrolling </ul> </ul> </body> Rezultatul va fi:

43

O lista neordonata de liste neordonate

Glosar de termeni de World Wide Web Elemente si atribute a unei pagini HTML Frameset Atribute: o cols o rows o border Frame Atribute:
o o o

src name scrolling

Liste ordonate Aceste liste sunt delimitate de etichetele <ol> i </ol> iar elementele de <li> si </li>. fiecare element al listei este numerotat; pot fi folosite diverse stiluri de numerotare, bazate pe cifre arabe sau romane, dar i pe litere; formatul arat o ierarhie a informaiilor. Exemplu HTML Exemple de combustibili: <ol> <li>benzina</li> <li>motorina</li> <li>gaz lichefiat</li> </ol> Afiare Exemple de combustibili: 1. benzina 2. motorina 3. gaz lichefiat

Lista va fi indentat fa de restul paginii Web i fiecare element al listei ncepe pe un rnd nou. Aplicaie: <html> <head><title>listex_4</title></head> <body><h1 align=center>O lista ordonata</h1><hr> <ol>Culori uzuale disponibile prin nume <li>Black <li>White <li>Red <li>Green <li>Blue <li>Yellow <li>Purple <li>Aqua </ol> </body> </html> Rezultatul este:

44

O lista ordonata
1. 2. 3. 4. 5. 6. 7. 8. Culori uzuale disponibile prin nume Black White Red Green Blue Yellow Purple Aqua

Elementele listei pot fi particularizate folosind atributul type care poate lua valorile: A (litere mari), a (litere mici), I (cifre romane mari), i (cifre romane mici), 1 (opiunea default):

Exemplu: HTML Medii de stocare: <ol> <li type="I">HDD-ul</li> <li type="I">discheta</li> <li type="I">CD-ROM-ul</li> </ol>

Afiare Medii de stocare: I. HDD-ul II. discheta III. CD-ROM-ul

Tag-ul <ol> poate avea un atribut start care stabilete valoarea iniial a secvenei de ordonare.Valoarea acestui atribut trebuie s fie un numar ntreg pozitiv. Urmtorul exemplu este o list ordonat cu litere mari, ncepnd de la valoarea C. <html> <head><title>listex_6</title></head> <body><h1 align=center>O lista ordonata cu litere mari, incepand de la valoarea C</h1><hr> <ol type="A" start="3">Culori uzuale disponibile prin nume <li>Red <li>Green <li>Blue <li>Yellow <li>Purple <li>Aqua </ol> </body> </html> Efect:

45

O lista ordonata cu litere mari, incepand de la valoarea C

C. D. E. F. G. H. Culori uzuale disponibile prin nume Red Green Blue Yellow Purple Aqua

Tag-ul <li> poate avea un atribut value care stabilete valoare pentru elementul respectiv al listei. Valoarea acestui atribut trebuie s fie un numr ntreg pozitiv (vezi urmtorul exemplu). <html> <head><title>listex_7</title></head> <body><h1 align=center>O lista ordonata avand itemi setati individual</h1><hr> <ol start="3">Repetati urmatorii pasi ai algoritmului <li>salvati fisierul; <li value="6">incarcati fisierul in browser; <li>schimbati browserul utilizat <li>incarcati din nou fisierul </ol> </body> </html> Efect:

O lista ordonata avand itemi setati individual

3. 6. 7. 8. Repetati urmatorii pasi ai algoritmului salvati fisierul; incarcati fisierul in browser; schimbati browserul utilizat incarcati din nou fisierul

Liste de definiii Unul din cele mai obinuite elemente din documentele cu mai multe pagini este un set de definiii, referine sau indexuri. Glosarele sunt exemple clasice n acest sens; cuvintele sunt listate n ordine alfabetic, urmate de definiii ale termenilor respectivi. n HTML, ntreaga seciune a unui glosar va fi gestionat printr-o list de definiii, care este inclusa ntr-o pereche de marcaje de list de definiii: <dl>...</dl> (de la "definition list" = list de definiii). Observaii: -Un termen al listei este iniiat de eticheta <dt> (de la "definition term" = termen definit); -Definiia unui termen este iniiat de eticheta <dd> (de la "definition description" = descrierea definiiei); -Definiia unui termen ncepe pe o linie nou i este indentat; Exemplu: HTML Legenda: <dl> Afisare Legenda: HTML 46

<dt>HTML</dt> <dd>Hyper Text Mark-ul Language</dd> <dt>IP</dt> <dd>Internet Protocol</dd> </dl>

Hyper Text Mark-ul Language IP Internet Protocol

Aplicaie: <html> <head><title>listex_1</title></head> <body><h1 align=center>O lista de definitii</h1><hr> <dl> Glosar de termeni de World Wide Web <dt><b>hypertext</b> <dd>- o interconectare Web de informatii de tip text, in care orice cuvant sau fraza poate face legatura catre un alt punct din document sau catre un alt document <dt><b>date</b> <dd>- fluxul nesfarsit de materiale care apar pe Internet, spre deosebire de informatii care sunt date cu un anumit inteles sau valoare <dt><b>informatie</b> <dd>- sub-setul de date care are efectiv semnificatie si care este util la momentul curent </dl> </body> </html> Rezultatul este:

O lista de definitii
Glosar de termeni de World Wide Web hypertext - o interconectare Web de informatii de tip text, in care orice cuvant sau fraza poate face legatura catre un alt punct din document sau catre un alt document date - fluxul nesfarsit de materiale care apar pe Internet, spre deosebire de informatii care sunt date cu un anumit inteles sau valoare informatie - sub-setul de date care are efectiv semnificatie si care este util la momentul curent Listele pot fi imbricate, adica in interior pot contine una sau mai multe liste. Exemplu HTML <ol> <li>Monitoare <ul> <li>CRT</li> <li>LCD</li> </ul> </li> <li>Imprimante <ul> <li>cu jet de cerneala</li> Afisare 1. Monitoare o CRT o LCD 2. Imprimante o cu jet de cerneala o laser

47

<li>laser</li> </ul> </li> </ol> Legenda: ul = unordered list ol = ordered list li = list item dl = definition list dt = term in a definition list dd = description of a term in a definition list Exemplu: <html> <head><title>listex_8</title></head> <body><h1 align=center>O lista ordonata de liste ordonate si neordonate</h1><hr> <ol>Un sistem informatic include: <li>Hardware: <ol> <li>placa de baza <li>procesor <li>memorie <li>harddisk </ol> <li>Software: <ul> <li>Linux <li>Windows <li>OS/2 <li>Unix </ul> <li>Software de aplicatie: <ul type="disc"> <li>VisualC++ <li>Java <li>SQL <li>CorelDraw </ul> </ol> </body> </html> Efect:

48

O lista ordonata de liste ordonate si neordonate

Un sistem informatic include: 1. Hardware: 1. placa de baza 2. procesor 3. memorie 4. harddisk 2. Software: o Linux o Windows o OS/2 o Unix 2. Software de aplicatie: VisualC++ Java SQL Este important de reinut c listele neordonate sunt folosite foarte frecvent pentru a defini liste de legturi ctre alte pagini (meniuri). Astfel definite, meniurile pot fi parcurse uor de programele de navigare folosite de ctre persoanele cu deficiene de vedere. O lista de meniuri este un bloc delimitat de etichete corespondente <menu>...</menu>. Fiecare element al listei este iniiat de eticheta <li> ( list item ). Cele mai multe browsere afieaz lista de meniuri ca pe o list neordonat. O list de directoare este un bloc delimitat de etichete corespondente <dir>...</dir> (de la " director "). Fiecare element al listei este iniiat de eticheta <li> ( list item ). Cele mai multe browsere afieaz lista de directoare ca pe o list neordonat. (Nu se recomand utilizarea acestori tipuri de liste). Utilizri speciale ale listelor Dac ntr-o list, n loc de elementele acesteia introduse prin <li>, se insereaz un bloc de text, aceasta va fi indentat ( ntocmai ca elementele unei liste).
<html> <head><title>listex_9</title></head> <body><h1>Un bloc de text indentat</h1><hr> <ol> Un bloc de text indentat. Un bloc de text indentat.

Un bloc de text indentat. Un bloc de text indentat. Un bloc de text indentat. Un bloc de text indentat. Un bloc de text indentat. Un bloc de text indentat. Un bloc de text indentat.
</ol> </body> </html>

Efect:

Un bloc de text indentat

Un bloc de text indentat. Un bloc de text indentat. Un bloc de text indentat. Un bloc de text indentat. Un bloc de text indentat. Un bloc de text indentat. Un bloc de text indentat. Un bloc de text indentat. Un bloc de text indentat. Linux n exemplul urmtor lista de definiii are itemii <dt> si <dd> multipli. 49

<html> <head><title>listex_10</title></head> <body><h1 align=center>O lista de definitii speciala</h1><hr> <dl>Program <dt><b>Luni</b> <dt><b>Marti</b> <dt><b>Miercuri</b> <dd><i>Ora 9.00.</i>Insciere <dd><i>Ora 11.00.</i>Audieri <dd><i>Ora 13.30.</i>Raspunsuri </dl> </body> </html> Efect:

O lista de definitii speciala

Program Luni Marti Miercuri Ora 9.00.Insciere Ora 11.00.Audieri Ora 13.30.Raspunsuri catre un alt document

Activitate practic
S se realizeze urmtoarea list personalizat:

O lista personalizata
Tipuri de masini Volkswagen sunt: Golf Jetta Passat Bora Corrado Transporter

Rspuns:

50

<html> <head><title>listex_11</title></head> <body bgcolor=yellow ><h1>O lista personalizata</h1><hr> <ul>Tipuri de masini Volkswagen sunt:<br> <img src="images/reddot.gif">Golf<br> <img src="images/reddot.gif">Jetta<br> <img src="images/reddot.gif">Passat<br> <img src="images/reddot.gif">Bora<br> <img src="images/reddot.gif">Corrado<br> <img src="images/reddot.gif">Transporter<br> </body> </html>

Inserarea i formatarea unui tabel

Cum se insereaz un tabel? Pentru a insera un tabel se utilizeaz eticheta dubl table . Orice tabel este alctuit din elementele : Linia Tabelului <tr> ... </tr> ; Titlul Tabelului <th> ... </th> ; Coloanele tabelului (datele) <td> ... </td> ; Sub-titlu tabelului <caption> ...</caption> ;

Cum se formateaz un tabel? Exist o serie de atribute care, aplicate marcajului table realizeaz formatarea tabelului. i anume: bgcolor = definete culoarea tabelului; width = specific lungimea tabelului (n pixeli sau procente din lungimea paginii); height = specific nalimea tabelului (n pixeli sau procente din lungimea paginii); border =grosimea liniei (n pixeli) ce definete tabelul i nconjoar fiecare celul cellspacing = spaiu dintre celule (n pixeli); 51

 cellpadding = spaiu dintre linia celulei i coninutul acesteia (n pixeli); align = controleaz poziionarea tabelului n pagin, cu urmtoarele atribute: left, right , sau center ; background = controleaz culoarea de fond a tabelului, care poate fi i o imagine; bordercolor = culoarea liniei din jurul tabelului; bordercolorlight = culoarea luminoas folosit de dou linii din cele patru care nconjoar tabelul; bordercolordark = culoarea ntunecat folosit de dou linii din cele patru care nconjoar tabelul; frame = definete ce parte din afara tabelului s fie vizibil ( void, above, below, hsides, lhs, rhs, vsides, box, border ); rules = definete ce parte din interiorul tabelului s fie vizibil (none, groups, rows, cols, all); Complexitatea tabelelor este dat, ns, de coninutul acestuia, astfel c o celul poate conine o imagine, alta o legtur, un rnd poate avea doar text, . a. m. d. . Acestea se realizeaz prin formatarea diferit a celulelor, implicit a liniilor i coloanelor cu atributele specifice acestora: Atribut Valoare abbr text align left, right, center justify valign top, middle, bottom, baseline axis category_name bgcolor colspan rgb(x,x,x) #xxxxxx colorname number Descriere Realizeaz o versiune abreviat a coninutului textual al celulei alinierea datelor celulei pe orizontal alinierea datelor celulei pe vertical comunic browserului care anteturi de rnd sau de coloan se aplic unei anumite celule coloreaz fundalul unei celule specific pe ct de multe coloane ale tabelului se va ntinde celula curent specific pe ct de multe rnduri ale tabelului se va ntinde celula curent specific nlimea celulei specific lungimea celulei

rowspan number height width Pixels % Pixels %

Exemplul 1:

52

<html> <body> <h4> Normal border:</h4> <table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>No border:</h4> <table border="0"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>Thick border:</h4> <table border="8"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html>

Exemplul 2:

53

Exemplul 3:

Activitate practic
54

Realizai n HTML urmtorul tabel: Nr. Nume Prenume Discipline Crt.

Medii

Sem. I Sem. II 1. 2. Rezolvare

<html> <table border=1> <tr> <th>Nr.<br>Crt.</th> <th colspan=3> Nume</th> <th> Prenume</th> <th> Discipline</th> <th colspan=2> Medii</th> <tr> <td rowspan=3>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td rowspan=2>&nbsp;</td> <td rowspan=2>&nbsp;</td> <td rowspan=2><b>Sem. I</b></td> <td rowspan=2><b>Sem. II</b></td> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <tr> <td>1.</td> <td colspan=3>&nbsp;</td> <td>&nbsp;</td> <td>Religie</td> <td>8,25</td> <td>7,75</td> <tr> <td>2.</td> <td colspan=3>&nbsp;</td> <td>&nbsp;</td> <td>Istorie</td> <td>7,60</td> <td>9,60</td> </table> </html>

Religie Istorie

8,25 7,60

7,75 9,60

Modulul 5. Lucrul cu formulare, cadre

55

1. Realizarea formularelor
Un formular este un ansamblu de zone active alctuit din butoane, casete de selecie, cmpuri de editare etc. Formularele Web permit utilizatorilor s introduc efectiv informaii i s le transmit serverului. Formularele pot varia de la o simpl caseta de text, pentru introducerea unui ir de caractere pe post de cheie de cutare - element caracteristic tuturor motoarelor de cautare din Web, pn la o structur complex, cu multiple seciuni, care ofer faciliti puternice de transmisie a datelor. Aceast tehnic se bazeaz pe dou elemente: pagina Web care afieaz formularul virtual n browserul clientului i programul (scriptul) de pe server, care proceseaz datele din formularul completat i trimis de client, prin intermediul browserului su. n continuare va fi prezentat partea de formular, mai exact cum poate fi creat un astfel de formular n HTML. La trimiterea datelor formularului napoi la server, toate datele sunt trimise n perechi <nume=valoare>. Realizarea unei pagini web ce conine un formular cuprinde urmtoarele etape: 1. Utilizatorul completeaz formularul i l expedieaz unui server. 2. O aplicaie dedicat de pe server analizeaz formularul completat i (dac este necesar) stocheaz datele ntr-o baz de date. 3. Dac este necesar serverul expediaz un rspuns utilizatorului. Tag-ul <form> Un formular este definit ntr-un bloc delimitat de etichetele corespondente <form> i </form>. Acest tag specific browserului c blocul respectiv este un formular virtual. Pot exista mai multe astfel de formulare pe o pagin, dar acestea nu pot fi imbricate. Exist dou atribute eseniale ale tag-ului <form>: 1. Atributul action - precizeaz ce se va ntmpla cu datele formularului odat ce acestea ajung la destinaie. Action menioneaz adresa scriptului (aflat pe server) care va interpreta formularul. Script-urile pot fi scrise n limbajele Perl, C, PHP, Unix shell. 2. Atributul method precizeaz metoda utilizat de browser pentru transmiterea formularului. Poate lua valorile: get (valoarea implicit) - n acest caz, datele din formular sunt adugate la adresa URL precizat de atributul action; permite trimiterea unor cantiti mici de date (maxim 1 Kb); post - n acest caz datele sunt expediate separate; sunt permise cantiti mari de date (de ordinul MB). Formularele Web pot conine zone de introducere text, butoane radio, butoane de selecie i butoane pentru a trimite datele din formular serverului sau de a terge din formular datele introduse anterior. Elementele formularului trebuie s fie organizate pe pagin, cu tag-uri obinuite, deoarece browserul le afieaz una dup alta pe pagin, fr s le formateze.

Exemplu:

56

Tag-ul <input> n interiorul blocului <form> trebuie inserate elemente care s fie afiate pe pagin. Aceste elemente se specific prin tag-ul <input>, simplu. Pentru fiecare element <input> trebuie s precizm : Atributul type- indic tipul datelor care vor fi introduse: text, buton, buton radio etc. Atributul name - indic numele asociat cmpului respectiv, deoarece datele formularului, trimise napoi la server, sunt compuse din perechi nume=valoare. Atributul size - indic numrul de caractere vizibile din cmp. Atributul maxlenght - indic numrul maxim de caractere introduse n cmp. Atributul readonly - datele prezente n cmp nu pot fi modificate. Pentru a preciza tipul de eticheta <input> se folosete atributul type care poate lua valorile: type="text" - caset de text, pentru editare; type="password" - caset de text tip parol; type="radio" - buton pentru selectarea unui singur element dintr-un grup; type="checkbox" - caset de validare; type="file" -caset de fiiere pentru upload; type="submit" - buton de expediere; type="reset" - buton de tergere; type=image- butonul va fi nlocuit cu o imagine; Butoane Un formular poate s conin butoane, care vor permite executarea unor comenzi. Pentru a insera un buton ntr-un formular se utilizeaz eticheta <input>, avnd atributul type cu valoarea "button". Alte dou atribute ale elementului "button" pot fi: name, care permite ataarea unui nume butonului 57

 value, care primete ca valoare textul ce va fi afiat pe buton. Exist i o alt modalitate de a introduce un buton ntr-o pagin Web i anume prin intermediul blocului <button> ... </button>. Un astfel de buton poate fi inserat ntr-un formular, n acest caz el declannd aciuni legate de acel formular, sau poate fi introdus oriunde n pagin pentru iniierea unor aciuni independente de formulare. n corpul blocului <button> ... </button> se poate afla un text sau un marcaj de inserare a unei imagini. Butoanele din formular se pot particulariza folosind atributul type=image n cadrul etichetei input i indicnd fiierul imagine. Exemplu: <form action="script.php" method="post"> <input type="image" src="trimite.gif" alt="Trimite"> </form>

Butonul radio Butoanele radio se folosesc de obicei n grup, ceea ce nseamn c avem mai multe butoane radio, cu valori diferite i nume identice; utilizatorul poate selecta doar unul dintre ele (celelalte se deselecteaz automat). Butoanele radio se introduc prin eticheta <input> cu atributul type avnd valoarea "radio". Exemplu:

n formulare pot fi inserate imagini. Astfel, selectnd imaginea, se transmit serverului coordonatele imaginii, mpreun cu celelalte date din formular. De obicei, coordonatele nu se proceseaz, imaginile dintr-un formular fiind utilizate la trimiterea datelor, n locul butonului Submit. 58

Exemplu: <input type=image src=buton.gif name=buton> Liste de selectie ntr-un formular pot exista liste de selecie. Acestea sunt specificate prin tag-ul dublu <select> .. </select>, n interiorul blocului de selecie fiind specificate opiunile cu eticheta <option> .. </option>. Exemplu: <select name ="nume"> <option>Procesor</option> <option>Placa de baz</option> <option>Placa video</option> </select> Zone de text Zonele de text sunt multi-linie care permit introducerea textelor. Zona este specificat prin tag-ul <textarea>...</textarea>, cu atributele : cols- numrul de caractere afiate ntr-o linie; rows - numrul de linii afiate simultan; name - ataarea unui nume cmpului de editare multilinie; wrap-(word wrap= trecerea cuvintelor pe rndul urmtor), care determin comportamentul cmpului de editare relativ la sfritul de linie. Acest atribut poate primi urmtoarele valori: "off" - n acest caz: o ntreruperea cuvintelor la marginea dreapt a editorului se produce numai cnd dorete utilizatorul; o caracterul de sfrit de linie este inclus n textul transmis serverului odat cu formularul; "hard"- n acest caz: o se produce ntreruperea cuvintelor la marginea dreapt a rndului; o caracterul de sfrit de linie este inclus n textul transmis serverului odat cu formularul; "soft- n acest caz: o se produce ntreruperea cuvintelor la marginea dreapt a rndului; o nu se include caracterul de sfrit de linie n textul transmis serverului odat cu formularul. Exemplu: <html> <body><h1>Un formular cu un camp de editare multilinie</h1> <hr> <form action="images.com" method="post"> <textarea name="text multilinie" cols="30" rows="5" wrap="off"> Prima linie din textul initial. A doua linie din textul initial. </textarea> <input type="reset"> <input type="submit"> </form></body> </html>

59

Zone ascunse n formulare, pot exista zone ascunse, care nu vor fi afiate pe pagin . Exemplu: <input type=hidden name=nume_c value=Rex>

60

2. Realizarea cadrelor
Sunt situaii n care imaginea afiat de browser este format din mai multe pagini HTML numite cadre. Caracteristic acestor pagini este ca perechea de etichete <body> </body> este nlocuit de <frameset> </frameset>, iar n interiorul lor cadrele sunt delimitate de <frame> i </frame>. Atributele etichetei frameset sunt: cols mparte pagina n coloane i are valori exprimate n procente din dimensiunea ferestrei, numr de pixeli sau * adic spaiul rmas rows mparte pagina n rnduri cu aceleai valori ca la cols bordercolor culoarea tuturor chenarelor conform modelului #rrggbb frameborder inhibarea afirii chenarelor cu valorile yes sau no Cadrele sunt introduse prin perechea de etichete <frame> </frame>, i suport atributele: src fiierul sau adresa fiierului introdus bordercolor culoarea chenarului cadrului curent conform modelului #rrggbb noresize dezactiveaz posibilitatea vizitatorului de a redimensiona cadrul scrolling adaug cadrului bare de defilare cu valorile yes no si auto Exemplu: pagina cu dou cadre orizontale n proporia 20% i 80% din nlimea total. Pagina de sus are chenarul rou iar cea de jos are scroll. <html> <head> <title>Exemplul 8_1</title> </head> <frameset rows="20%,80%"> <frame src="exemplu8_1_1.html" bordercolor="#ff0000"> <frame src="exemplu8_1_2.html" scrolling="yes"> </frameset> </html> Efect:

Exemplu: pagina cu dou cadre verticale n proporia 40% i 60% din limea total, fr posibilitatea de redimensionare a cadrelor <html> <head> <title>Exemplul 8_2</title> </head> <frameset cols="40%,60%"> 61

<frame src="exemplu8_2_1.html"> <frame src="exemplu8_2_2.html" noresize> </frameset> </html> Efect:

Exemplu: pagina cu dou cadre. n cadrul din stnga sunt link-ri ctre alte pagini care se vor deschide n cadrul din dreapta (se poate verifica funcionarea atributului target al legturii). Cadrul din stanga va avea scroll. Efect:

n situaia n care browserul folosit nu suport pagini care conin cadre, imaginea afiat va fi goal. Pentru a evita acest lucru vom introduce un mesaj ncadrat de <body> i </body> ntre etichetele <noframes> i </noframes> prin care informm vizitatorul c folosete un browser care nu suport cadre. <frameset cols = "30%, 40%,*"> <noframes> <body>Browserul folosit nu suporta cadre</body> </noframes> <frame src ="pag1.html"> <frame src ="pag2.html"> <frame src ="pag3.html"> </frameset>

Cadre in-line 62

Sunt blocuri care se introduc n pagina prin perechea de etichete <iframe> i </iframe>, i au atributele: src fiierul sau adresa acestuia height nlimea cadrului width latimea cadrulului frameborder grosimea bordurii (chenarului) scrolling adaug bare de defilare cu valorile yes no i auto align aliniaz cadrul (left, right, center, top, bottom, middle) vspace distana peste i sub cadru hspace distana n stnga i n dreapta de cadru Exemplu: o pagin n care este gzduit un cadru in-line. i aici se poate introduce un mesaj pentru browserele care nu suport cadre in-line. Modul de afiare al exemplului poate diferi de la un browser la altul. <html> <head> <title>Exemplul 8_4</title> </head> Mai jos este un cadru in-line cu urmatori parametrii:<br> width="300" si height="200" hspace="200" vspace="100" scrolling="yes"<br> <iframe src="pag.html" width="300" height="100" hspace="200" vspace="100" scrolling="yes">Browserul folosit nu suporta cadre in-line</iframe> </body> </html> Efect:

63

Modulul 6: Realizarea unor aplicaii practice

1. Cri de oaspei i contoare de pagin Cri de oaspei (guestbooks)

Un exemplu de formular este dat de crile de oaspei unde cititorul poate s-i scrie impresiile i comentariile dup vizitarea unui sit. O carte de oaspei gratuit se poate obine vizitnd siturile web urmatoare: http://www.theguestbook.com http://www.dreambook.com http://www.guestbooks.net http://www.countz.com/guestbook.html http://www.freecenter.com/guestbook.html http://www.lpage.com http://www.bravenet.com http://www.guestbook4free.com/en/ http://www.webgenie.com/Software/Guestar/

Contoare de pagin (counters)

Pentru a cunoate ct de vizitat este situl pe care l-ai realizat i pentru a afla mai multe date despre numrul i statistica vizitatorilor, informaii care va vor ajuta n realizarea unei campanii de marketing online eficiente este bine s folosii contoare de pagin. Acestea sunt capabile s afieze informaii referitoare la: numrul de accesri totale/ lunare/saptmnale/zilnice tipul de browser folosit pentru vizitarea paginilor ara/continentul de provenien pentru fiecare vizitator sistemul de operare folosit Cele mai cunoscute i apreciate contoare de pagin gratuite sunt urmtoarele: http://www.extreme-dm.com/tracking http://www.sitemeter.com http://www.thecounter.com http://www.counterguide.com http://www.countz.com http://www.directhit.com http://www.hitbox.com http://www.webcounter.com

64

2. ntocmirea unei pagini WEB personale

Aplicaia 1 Realizai 3 pagini html care s conin fiecare cte 2 strofe din poezia Balada unui greier mic de George Toprceanu i cte o imagine sugestiv. Titlul poeziei i autorul se vor regsi pe toate cele trei pagini, titlul va fi centrat i scris cu H1 (heading 1) iar numele autorului va fi scris cu caractere obinuite dar nclinate i va fi aliniat la dreapta. Pentru fiecare din cele trei pagini, se va realiza n Paint o imagine sugestiv care va fi poziionat n partea dreapt a strofelor. Spre exemplu, pentru primele dou strofe din poezie, se va desena un peisaj de toamn. Pentru urmtoarele dou strofe, n peisajul de toamn realizat anterior va fi desenat i un greiere. n final, pentru ultimele dou strofe ale poeziei, imaginea va conine i o furnic. Textul poeziei va conine diacritice - lipsa diacriticelor ntr-un text romnesc denot o grav lips de profesionalism. A scrie fr diacritice poate duce la exprimri ambigue ca de exemplu un tanc de 12 ani, un roman nascut la Roma, zece paturi etc. (http://ro.wikipedia.org/wiki/Wikipedia:Diacritice) n partea dreapt a paginii avei tabelul cu diacritice n HTML. Cele trei pagini se vor intitula partea1.html, partea2.html i partea3.html. Indicaie ! Pentru a putea alinia cu uurin strofele i imaginea n pagin, folosii un tabel fr borduri, cu o linie i dou coloane. n prima coloan vor fi cele dou strofe, iar n cea dea doua coloan imaginea. Balada unui greier mic George Toprceanu Peste dealuri zgribulite, Peste arini zdrenuite, A venit aa, deodat, Toamna cea ntunecat. Lung, slab i zlud, Boteznd natura ud C-un mnunchi de ciumafai, Cnd se scutur de ciud, mprejurul ei departe Risipete-n evantai Ploi mrunte, Frunze moarte, Stropi de tin, Guturai... i cum vine de la munte, Blestemnd i lcrimnd, Toi ciulinii de pe vale Se pitesc prin vguni, Iar mceii de pe cmpuri O ntmpin n cale Cu grbite plecciuni... 65 Doar pe coast, la urcu, Din csua lui de hum A ieit un greieru, Negru, mic, muiat n tu i pe-aripi pudrat cu brum: - Cri-cri-cri, Toamn gri, Nu credeam c-o s mai vii nainte de Crciun, C puteam i eu s-adun O grun ct de mic, Ca s nu cer mprumut La vecina mea furnic, Fi'ndc nu-mi d niciodat, i-apoi umple lumea toat C m-am dus i i-am cerut... Dar de-acu, Zise el cu glas sfrit Ridicnd un picioru, Dar de-acu s-a isprvit... Cri-cri-cri, Toamn gri, Tare-s mic i necjit!

Aplicaia 2 Realizai o pagin html cu titlul poezie_de_toamn.html care s conin dou cadre. Primul dintre ele conine trei link-uri ctre cele 3 pagini create la aplicaia 1. Al doilea, iniial, afieaz pagina partea1.html creat la exerciiul anterior. La comanda vizitatorului paginii respective, se pot afia, n al doilea cadru oricare din cele trei pri ale poeziei Balada unui greier mic de George Toprceanu. Indicaie ! Pagina poezie_de_toamn.html va arta astfel:

Balada unui greier mic

George Toprceanu Peste dealuri zgribulite, Peste arini zdrenuite, A venit aa, deodat, Toamna cea ntunecat. Lung, slab i zlud, Boteznd natura ud C-un mnunchi de ciumafai, Cnd se scutur de ciud, mprejurul ei departe Risipete-n evantai Ploi mrunte, Frunze moarte, Stropi de tin, Guturai...

Balada unui greier mic Partea 1 Balada unui greier mic Partea 2 Balada unui greier mic Partea 3

Fiierul HTML iniial, cel care creeaz cadrele este: <html> <head><title>Fiier cu cadre</title></head> <frameset cols=30%,70%> <frame src=link_uri.html> <frame name=cadrul2 src=partea1.html> </frameset> </html> Primul cadru afieaz urmtorul fiier (link_uri.html) care conine legturile ctre cele trei pagini html (parte1.html, partea2.html i partea3.html): <html> <head><title>Fiier cu <body> <a href=partea1.html </a><br> <a href=partea1.html </a><br> <a href=partea1.html </a> </body> </html> legturi</title></head> target=cadrul2> Balada unui greier mic Partea 1 target=cadrul2> Balada unui greier mic Partea 2 target=cadrul2> Balada unui greier mic Partea 3

66

3. Modaliti de testare, publicare i ntreinere a paginilor.

n aceast etap, s presupunem c am terminat realizarea efectiv a sitului web pe calculatorul nostru. n continuare, va trebui s ne gndim la alegerea unui nume de domeniu pentru situl respectiv. Acest nume trebuie s fie sugestiv i s simbolizeze afacerea noastr. Dup aceea va trebui s alegem o gazd web. La fel ca i numele de domeniu, avem de ales ntre obinerea unei gazde web gratuite sau o gzduire (web hosting) contracost, n schimbul unor faciliti suplimentare. Apoi urmeaz etapa de transfer efectiv al fiierelor (prin FTP) ntre calculatorul nostru i gazda web pe care am ales-o. Dac am folosit un editor HTML (Microsoft Front Page sau Macromedia Dreamweaver, de exemplu), avem posibilitatea s folosim opiunile de transfer de fiiere incluse n aceste programe. Dup ce am realizat transferul fiierelor sunt obligatorii operaiunile de verificare final i validare HTML. Trebuie precizat c verificrile paginilor web vor trebui s fie efectuate i ca etape intermediare, pe parcursul realizrii efective a sitului web. n final, va trebui sa ntreinem i s actualizm situl. Dac dorim ca vizitatorii s revin i aceti pai trebuie urmrii cu maxim atenie. Nume de domeniu Pentru ca situl nostru s capete o identitate online, va trebui s ne hotrm asupra unui nume de domeniu. Acest lucru nseamn c netsurferii vor gsi situl respectiv dac vor introduce n csua browserului numele de domeniu pe care ni l-am ales. n funcie de specificul sitului i de bugetul alocat, putem opta pentru una din cele dou variante : Nume de domeniu propriu (contracost) Nume de domeniu furnizat de o firm ( gratuit ) Nume de domeniu propriu Are forma: www.numedomeniu.com Cnd alegem un nume de domeniu, acesta trebuie s fie scurt i s aib un neles. El trebuie s dea o idee clar despre situl sau afacerea online dat. De asemenea, trebuie s fie uor de scris i de memorat. Nu trebuie s conin caractere speciale ca de exemplu : _ , - , # , sau ~ . Pentru a evita surprizele neplcute, este bine s facem o list cu 5 sau 10 nume de domeniu care ni se par acceptabile i apoi s verificm dac mai sunt disponibile. Pentru aceasta vizitm baza de date Internic'S Whois (Network Solutions). Aceasta este o organizaie care centralizeaz procesul de nregistrare al numelor de domenii pe Internet i are adresa web urmtoare: http://www.networksolutions/cgi-bin/whois/whois Dup ce ne-am hotart asupra unui nume de domeniu disponibil, putem s ne nregistrm online n cteva minute. Taxa de nregistrare este de la 19 /an. Nume de domeniu gratuit Dac dorim s realizm o pagin web personal sau dorim s nvm mai multe despre webdesign i/sau nu avem bani suficieni, putem s obinem foarte uor un nume de domeniu gratuit. Exist multe situri ale unor firme care ne ofer nume de domenii gratuite. n general aceste situri ofer i gzduire gratuit plus un cont de e-mail. Tot ce avem de fcut este s accesm situl lor i s completm un formular online. n cteva minute vom avea la dispoziie un nume de domeniu de forma:http://www.nume_gazda_web.com/~numeledvs Gazde web Gazda web (host web) reprezint de fapt un server sau o grupare de mai multe servere care ne pun la dispoziie suficient spaiu pe harddisk pentru a transfera fiierele care constituie situl nostru. n principiu, putem s gzduim situl i pe propriul calculator, dar n acest caz avem nevoie de o legtur la Internet 24 ore din 24 ore i o conectare foarte rapid de tipul T1 sau 67

T3. Acest lucru ne poate costa pn la cteva mii de dolari pe lun. De aceea, este bine s optm pentru un serviciu de gzduire web care ne poate asigura accesul nentrerupt al vizitatorilor la site i asisten online. Gzduire web gratuit sau pltit? Exist mai multe motive pentru care unele companii ofer gzduire web gratuit: construiesc o ntreag comunitate i interesul lor este de a atrage ct mai mult public i promoveaz produsele i/sau serviciile lor doresc s afim banerul lor sau s folosim domeniul lor n URL-ul paginilor noastre Gzduirea gratuit poate fi folosit temporar. Deoarece, domeniul pe care l-am primit reprezint un subdirector al domeniului principal, nu putem s obinem o poziie avansat ntr-o lista furnizat de motoarele de cutare sau directoare. n plus, firmele respective ofer un spaiu limitat care se poate dovedi insuficient odat cu creterea volumului de informaii sau de imagini folosite. E de recomandat s ncepem cu un serviciu de gzduire gratuit pn vom cpta experien i vom ctiga ceva bani din afacerea online. Dup aceea nu este suficient numai s cumprm un domeniu propriu i va trebui s folosim un serviciu de gzduire profesional. Unul dintre cel mai bune servicii de gzduire profesional le acord Adpixel.biz. Transfer Dup ce am ales numele de domeniu i am stabilit care va fi gazda web, va trebui s transferm fiierele care alctuiesc situl web. Aceste fiiere vor fi transferate de pe calculatorul nostru, pe unul din serverele (calculatoarele) puse la dispoziie de compania care ne asigur gzduirea web. Transferul fiierelor se face prin FTP (File Transfer Protocol). Cum se folosete FTP ? Dup ce am instalat un program FTP trebuie s nvm s-l folosim deoarece programele difer ntre ele. De citit cu atenie instruciunile i apoi de fcut cteva ncercri pentru a ne obinui cu programul FTP. A nu uita s cream mai nti dou directoare test pe calculatorul nostru, numite Upload i Download. Apoi selectm cteva fiiere test i le copiem n directorul Upload. Accesm programul FTP i ne conectm la Internet. Selectm opiunea upload n programul FTP i directorul Upload din calculatorul nostru. Selectm fiierele test care trebuie transferate. Odat ce au fost ncrcate, fiierele test ar trebui s se vad n fereastra FTP. Acum selectm opiunea download i ncrcm cteva fiiere n directorul Download. Repetm de cteva ori pn ne obinuim cu programul FTP. A avea grij ca n final s tergem toate fiierele test din calculatorul gazd nainte de a ncepe transferul final al fiierelor. Dac vedem o opiune n programul FTP referitoare la tipul de fiiere, folosim ASCII cnd transferm fiiere HTML i binary cnd transferm fiiere grafice. Sau, dac opiunea ne este permis selectm autodetect i programul va face acest lucru automat. Majoritatea programelor FTP sunt setate s foloseasc Portul 21. A nu schimba aceast setare pn nu ni se indic s folosim un Port diferit. n majoritatea cazurilor putem ignora alte opiuni ca: Use firewall, PASV mode, Description, etc. Verificm numele fiierului nainte de a-l ncrca. Asigurndu-ne c nu folosim majuscule. n acest caz nu vor putea fi accesate calculatoarele gazd care folosesc mediul UNIX. Cnd dorim s realizm transferul fiierelor ne asigurm c am mutat toate fiierele de care aveam nevoie ntr-un singur director. n final, transferm toate fiierele (html, gif/ jpeg, midi, etc.) n directorul care-l avem la dispoziie pe serverul FTP. Verificm nc o dat dac au fost transferate toate fiierele.

68

Verificare i testare Dup ce am transferat prin FTP toate fiierele sitului nostru, trebuie s ne asigurm nc o dat c nu exist erori i totul funcioneaz aa cum trebuie. De aceea, trebuie s parcurgem urmtoarele etape: navigm prin fiecare pagin i ne asiguram ca toate legturile interne i externe, butoanele de navigare sunt active. Pentru a realiza acest lucru putem s folosim un verificator de legturi "link checker" verificm din punct de vedere gramatical i ortografic textul din fiecare pagin. Dac textul este n limba englez putem folosi verificatorul gramatical din MS Word, "automated spell checker" ncercm s tiprim fiecare pagina web i apoi verificm modul de aranjare n pagin, dac mai exist cuvinte scrise greit, erori de punctuaie, etc. determinm timpii de ncrcare pentru fiecare pagin web. n cazul n care acetia sunt foarte mari, cutm s reducem dimensiunile fiierelor grafice, multimedia, etc. corectm toate erorile off-line i apoi retransmitem prin FTP fiierele care au fost modificate facem copii dup toate fiierele i le salvm ntr-un director separat pe computer i pe diskete ntre inere i actualizare Pentru ca situl pe care l-am creat s aib succes i s atrag noi vizitatori, trebuie s-l ntreinem i s-l actualizm periodic. Pe baza statisticilor, s-a constatat c o pagin web neactualizat este interesant o perioad medie de 60 de zile. De aceea, pentru a menine interesul vizitatorilor, un site web nu trebuie s fie static. Dac nu oferim informaii noi sau resurse utile, vizitatorii nu vor avea nici un motiv s mai revin iar situl nostru i va pierde popularitatea. ntreinerea i actualizarea unui site web se realizeaz din urmtoarele motive: pentru mbuntirea proiectrii i machetrii pentru actualizarea sau adugarea unor informaii suplimentare pentru a rspunde comentariilor, cerinelor sau observaiilor vizitatorilor pentru a corecta erorile i problemele aprute n timpul proiectrii Aadar i dup ce vom ncepe promovarea sitului web, nu trebuie s neglijm cele dou activiti importante pentru obinerea succesului online: ntreinerea Actualizarea ntre inere Pentru a realiza o ntreinere eficient a sitului, putem s ntocmim un plan de ntreinere, etapizat n timp, care poate s conin: Frecvena de actualizare mbuntirile sau modificrile aduse Informaii i resurse de actualitate comentariile sau recomandrile vizitatorilor A cuta de a mbunti permanent cunotinele privind realizarea i promovarea siturilor web. Deoarece plasamentul n motoarele de cutare se schimb permanent, continund s verificm periodic acest plasament. De asemenea, asigurndu-ne c ne-am nregistrat situl web n toate directoarele importante. Actualizare 69

Dup ce situl a devenit operaional, vom dori s-l actualizm. Aceasta nseamn c putem s-i mbuntim unele caracteristici i s-i adugm noi opiuni, ca de exemplu: forma de feedback pentru vizitatori - o carte de oaspei (guestbook) legturi i resurse folositoare, sfaturi sau informaii recente lista de discuii gratuit (discussion list) un numrtor de pagin (counter) un ziar electronic (e-zine) Analiznd cu atenie orice feedback primit de la vizitatori i rspunzndu-le acestora ct mai curnd posibil. Putem de asemenea s adaugm o pagin cu nouti pe care s-o actualizm periodic.

70

Bibliografie

http://en.wikipedia.org/wiki/Wiki http://universul.3x.ro/Curs_html/14.htm www.didactic.ro/ http://www.competentedigitale.ro/

Manual de INFORMATIC pentru clasa a XII-a, profilul real-intensiv. Autori: Carmen Popescu, Vlad Tudor (Huanu)
http://jserv.3x.ro/html/legaturi.html http://www.marplo.net/html/elemente_speciale.html http://tutorialweb.wordpress.com/2008/06/17/interfata-macromedia-

dreamweaver-8/
http://www.e-learn.ro/tutorial/adobe-dreamweaver/ http://blog.atweb.ro/2008/10/17/dreamweaver_de_la_a-z/ http://www.tutorialul.ro/tutorial-html-imagini-si-link-uri.html

71

Cuprins
Modulul 1: Utilizarea operaiilor de baz necesare realizrii unei pagini web...........................1 1. Prezentarea mediului de lucru Dreamweaver.....................................................................1 2. Prezentarea limbajului HTML..........................................................................................10 3. Proiectarea structurii site-ului...........................................................................................16 4. Elemente de design al paginii...........................................................................................17 5. Activitate practic.............................................................................................................18 Modulul 2: Folosirea elementelor de baz pentru inserarea n pagin a elementelor: text, imagine .....................................................................................................................................19 1. Inserarea i formatarea unui text: corp de liter, mrime, stil...........................................19 2. Folosirea elementelor bloc de text....................................................................................21 3. Inserarea unei imagini modificarea proprietilor imaginii: poziionare, dimensiuni, ncadrare n text.....................................................................................................................26 4. Formatarea unui fundal sau a unei teme...........................................................................28 5. Activitate practic.............................................................................................................29 Modulul 3: Enumerarea i aplicarea modalitilor de a realiza o hiper-legtur .....................30 1. Realizarea unei legturi pe un text....................................................................................30 2. Realizarea unei legturi pe o imagine...............................................................................32 3. Importul de gif-uri i flash-uri..........................................................................................33 4. Importul de secvene sonore i video................................................................................35 5. Legturi ntre pagini..........................................................................................................37 6. Maparea unei imagini........................................................................................................39 7. Activitate practic.............................................................................................................41 Modulul 4: Utilizarea listelor i tabelelor ntr-o pagin WEB..................................................42 Tipuri de liste utilizate ntr-o pagin web ............................................................................42 O lista neordonata.....................................................................................................................43 O lista neordonata de liste neordonate......................................................................................44 O lista ordonata.........................................................................................................................45 O lista ordonata cu litere mari, incepand de la valoarea C........................................................46 O lista ordonata avand itemi setati individual...........................................................................46 O lista de definitii......................................................................................................................47 O lista ordonata de liste ordonate si neordonate.......................................................................49 Un bloc de text indentat............................................................................................................49 O lista de definitii speciala........................................................................................................50 Activitate practic.................................................................................................................50 O lista personalizata..................................................................................................................50 Inserarea i formatarea unui tabel.........................................................................................51 Activitate practic.................................................................................................................54 Modulul 5. Lucrul cu formulare, cadre....................................................................................55 1. Realizarea formularelor.....................................................................................................56 Tag-ul <form> ......................................................................................................................56 Tag-ul <input>......................................................................................................................57 Butoane ................................................................................................................................57 72

Butonul radio ........................................................................................................................58 Liste de selectie ....................................................................................................................59 Zone de text ..........................................................................................................................59 Zone ascunse ........................................................................................................................60 2. Realizarea cadrelor............................................................................................................61 Modulul 6: Realizarea unor aplicaii practice...........................................................................64 1. Cri de oaspei i contoare de pagin...............................................................................64 2. ntocmirea unei pagini WEB personale............................................................................65 3. Modaliti de testare, publicare i ntreinere a paginilor..................................................67 Bibliografie...............................................................................................................................71 Cuprins......................................................................................................................................72

73