1

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 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.

2

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

3

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.

4

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.

5

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.

6

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

7

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.

8

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.

9

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.

10

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 Office-

Microsoft 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.

Continutul paginii va fi aici

Primul tag se numeste i este cel care i spune browser-ului c a nceput un cod n HTML. Cel de-al doilea tag, , spune browser-ului c aici ncepe partea vizibil sau coninutul paginii HTML. Tag-urile i sunt tag-uri de nchidere. , d de tire browser-ului, c s-a ncheiat coninulul pagini, iar c s-a ncheiat documentul HTML. Slesh "/" este pus naintea numelui tag-ului i spune browserului c ar dori s ncheie respectiva funcie. Deci este folosit pentru a ncepe o funcie, iar 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.

Acest tag urmeaz imediat dup i este folosit pentru a indica browser-ului, informaii utile precum: titlul pagini, coninutul (folosit de motoarele de cutare vechi) i multe altele

11

Se pune ntre i . Acest tag este cel care d numele pagini. Numele va fi afiat n browser, de obicei n partea stng sus.

Acesta este titlul care apre n pagin, nainte de coninut i va fi mai mare dect litera de coninut. nseamn c e cea de-a doua mrime a literei ntre cele ase care exist. este cea mai mare iar va fi cea mai mic.

Este tag-ul care marcheaz deschiderea i ncheierea unui paragraf. Aa c atunci cnd vei ncepe un paragraf asigur-te c ai pus la nceput i la sfrit. Marcaje de baz

Definete un fiier n format Web Antetul documentului

Tilul documentului

Corpul paginii HTML

BGCOLOR = culoare Culoarea de fond a paginii

TEXT=culoare Culoarea textului pe pagin

LINK=culoare Culoarea legturilor nevizitate din pagin

VLINK=culoare Culoarea legturilor vizitate din pagin

ALINK=culoare Culoarea legturilor pe durata clicului executat de utilizator

BACKGROUND = url Imaginea de fond pentru pagin

Paragraf

Nivel de subtitlu al documentului (n = 1-6)

Specific atribute ale textului ncadrat

SIZE=n Dimensiunea textului este 1-7

FACE="a,b" Specific fontul: a, dac este disponibil, sau b

COLOR=s Culoarea textului: fie un nume de culoare, fie o valoare

RGB

Linie nou

Informaie preformatat Comentariu HTML

Centreaz materialul n pagin

Rigla orizontal

SIZE=x nlimea riglei n pixeli WIDTH=x Limea riglei n pixeli sau n procente NOSHADE Dezactiveaz afiarea umbrei pentru rigla orizontal ALIGN=x Alinierea riglei orizontale n pagin (left, center, right)

COLOR=x Culoarea riglei orizontale (numai pentru IE)

Marcaj de tip ancor

HREF=url Referin hipertext HREF=#nume Referin ctre o ancor intern Name=nume Definiia unei ancore interne

12

Definete un fiier n format Web Antetul documentului

Marcaje pentru liste

Descriere definiie Lista de tip definiie Termen de definiie Element de list

List ordonat (numerotat)

TYPE=tip Tipul numerotrii. Valori posibile: A, a, I, i, 1

START=x Numrul de nceput al listei ordonate

List neordonat (marcat)

TYPE=forma Forma marcajului. Valori posibile: circle, square,

disc.

Formatarea caracterelor

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

Marcaje pentru cadre

Definirea redactrii paginii

COLS=x Numrul i mrimea relativ a coloanelor ROWS=x Numrul i mrimea relativ a liniilor BORDER=x Specific starea "on" (activ) sau "off" (inactiv)

pentru chenarul cadrului FRAMESET (1 sau 0)

FRAMEBORDER = x Specific mrimea chenarului

FRAMESPACING = x Mrimea spaiului dintre dou cadre adiacente Definiia unui anumit cadru SRC=url URL-ul sursa pentru cadru

NAME=nume Numele cadrului (utilizat mpreun cu TARGET=nume ca parte component a marcajului de tip ancor

SCROLLING=scrl Definete opiunea barei de derulare.Valori posibile: on (activ), off (inactiv), auto (automat)

FRAMEBORDER=x Mrimea chenarului din jurul cadrului

MARGINHEIGHT=x Spaiul suplimentar de deasupra i dedesubtul unui anumit cadru

MARGINWIDTH=x Spaiu suplimetar la stnga i la dreapta unui

13

anumit cadru

Seciunea de pagin afiat pentru utilizatorii care nu pot vedea un cadru

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

Tabel HTML

BORDER=x Chenarul tabelului

CELLPADDING=x Spaiul suplimentar n cadrul celulelor tabelului CELLSPACING=x Spaiul suplimentar ntre celulele tabelului WIDTH=x Limea impus tabelului FRAME=valoare Ajustarea fin a tabelului

RULES=valoare Ajustarea fin a riglelor tabelului

BORDERCOLOR = culoare Specific culoarea chenarului tabelului

BORDERCOLORLIGHT =

culoare

Cea mai deschis culoare din cele dou culori specificate

BORDERCOLORDARK =

culoare

Cea mai nchis culoare din cele dou culori specificate

ALIGN=left 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

Definete un set de definiii de coloane cu ajutorul marcajului

Definete limea unei coloane exprimat n pixeli Definete titlul tabelului Definete corpul tabelului Linie de tabel

BGCOLOR=culoare Specific culoarea de fond pentru ntreaga linie

ALIGN=aliniere Alinierea celulelor de pe linia curent (left, center, right)

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)

14

BACKGROUND=url Specific imaginea de fond pentru celula tabelului

NOWRAP Nu permite desprirea textului pe linii n cadrul unei celule

ALIGN=baseline Aliniaz celule de date cu linia de baz a textului adiacent

ALIGN=caracter Aliniaz o coloan fa de un anumit caracter (caracterul prestabilit este ".")

Adugarea imaginilor

Marcajul de introducere a imaginilor

SRC=url Sursa fiierului grafic ALT=text Textul alternativ de afiat, dac este necesar ALIGN=aliniere Alinierea imaginii n pagin. Valori posibile: top (sus), middle (n

mijloc), bottom (jos), left (n stnga), right (la dreapta)

HEIGHT=x nlimea imaginii (n pixeli) WIDTH=x Limea imaginii BORDER=x Chenarul din jurul imaginii, atunci cnd aceasta este utilizat ca

hiperlegatur

HSPACE=x Spaiul suplimentar pe orizontal din jurul imaginii (n pixeli) VSPACE=x Spaiul suplimentar pe vertical din jurul imaginii (n pixeli) Marcaje pentru formulare

Formular HTML activ

ACTION=url Programul CGI de pe serverul care recepioneaza datele METHOD=metoda Modul n care datele sunt transmise serverului (GET sau

POST)

Cmp de text sau alte date de intrare

TYPE=opiune Tipul cmpului de intrare . 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

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 Alegerea particular ntr-un domeniu

VALUE=valoare Valoarea rezultant a acestei selecii din meniu

Cmp de intrare de tip text pe linii multiple

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

mparte formularul n pri logice

Numele asociat setului de cmpuri (fieldset)

15

ALIGN=s Specific alinierea legendei (explicaiei) afiate (top, bottom, left, right)

TABINDEX=x Specific ordinea elementelor atunci cnd utilizatorul apas tasta Tab

ACCESKEY=c Specific tasta care asigur comanda rapid de la tastatur asociat unui anumit element

DISABLED Elementul este inactiv, dar este afiat pe ecran READONLY 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

16

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.

17

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.

18

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 Afiare

Text

2. HTML = HyperText Markup Language

3. a) Se numete TAG. b) - marcaj de tip ancor. 4.

-Mam, unde merg Mihai i Ionu?

-Ei se duc la scldat.

-Pot s merg i eu?

-Tu ai teme!

19

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

- permite introducerea unui paragraf

Dac scriem un text ntre tag-urile i , atunci textul va fi ncadrat de cte un rnd liber.

Exemplu:

Acesta este un paragraf obinuit. Un rnd al unui paragraf are limea ferestrei afiat de browser. Dac micorm fereastra browser-ului acelai paragraf va ocupa mai multe rnduri. Dac dou cuvinte ale unui paragraf sunt separate prin mai multe spaii browser-ul afieaz doar un singur spaiu.

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 sau . Tag-ul nu are tag de ncheiere, n timp ce

tag-ul are tag de ncheiere, ns nu este obligatoriu. Tag-ul 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: i . Tag-ul I

Are rolul de a determina browser-ul s afieze nclinat (italic) textul cuprins ntre cele dou tag-uri ale sale: i . Tag-ul U

Are rolul de a determina browser-ul s afieze subliniat (underline) textul cuprins ntre cele dou tag-uri ale sale: i .

text tiat (deleted)

exponent (superscript)

indice (subscript)

text ngroat (strong)

mare (big)

mic (small)

font rou (detalii)

font Courier (detalii)

font size=6 (detalii)

text aliniat pe centru

20

text aliniat la stnga

text aliniat la dreapta

titlu de nivel 1

titlu de nivel 2

titlu de nivel 3

titlu de nivel 4

titlu de nivel 5

titlu de nivel 6

21

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: ....

Exemplu:

Adresa

Adresa instituiei noastre este : Colegiul Naional Fraii Buzeti Str: tirbei Vod, Nr: 5 Craiova Romania

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 ....

Exemplu:

Indentarea unui bloc

Textul ce urmeaz este indentat: 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.

22

Blocul preformatat ntr-un bloc ..., semnificaia marcajelor HTML se pstreaz. Blocul ... 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 .

Exemplu:

HTML Afiare

Bloc preformatat

Orar:

Ora/Ziua Luni Marti Miercuri

8:00 Romana Matematica Sport

9:00 Geografie Istorie Fizica

Orar:

Ora/Ziua Luni Marti Miercuri

8:00 Romana Matematica Sport

9:00 Geografie Istorie Fizica

ntr-un fiier HTML, caracterele "" 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:

... ( 80 de caractere pe rnd );

... ( 120 de caractere pe rnd ).

Aceste marcaje interpreteaz corect caracterele "spaiu", "etichet" i "CR/LF". Textul afiat n pagin este monospaiat.

HTML Afiare

xmp i listing

Un fiier html standard arat astfel:

O pagina Web ...

Un fiier html standard arat astfel:

O pagina Web ...

Blocuri paragraf

Cu ajutorul etichetei paragraf 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

(acesta fiind opional); alinierea textului cu ajutorul atributului align, avnd valorile posibile "left", "center"

sau "right".

23

Exemplu:

Blocuri paragraf

Prima linie

Linia generat de un paragraf (implicit paragraful este aliniat la stnga). 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.

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.

Blocuri de titlu ntr-un text titlurile (headers) de capitole pot fi introduse cu ajutorul etichetelor , ,

, , , .

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 permite scrierea unui titlu cu caractere mai mari i aldine, pe cnd folosete caracterele cele mai mici.

Exemplu:

Blocuri de titlu

Titlu de mrime 1 aliniat n centru Titlu de mrime 2 aliniat la dreapta. Titlu de mrime 4 aliniat la stnga (implicit)

Linii orizontale ntr-o pagina Web pot fi inserate linii orizontale. Acest lucru se face cu ajutorul etichetei

. Pentru a configura o linie orizontal se utilizeaz urmtoarele atribute ale etichetei :

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.

24

Exemplu:

Linii orizontale

Tipuri de linii orizontale O linie implicit alinierea stnga, lime 100%, grosime 2 cu umbr.

Urmeaz o linie aliniat n centru, de lime 50%, grosime 5 pixeli , fr umbr. Urmeaz o linie aliniat la dreapta, de

lime 150 de pixeli, grosime 12 pixeli, de culoare roie.

Blocuri Blocul introdus de etichetele ... aliniaz centrat toate elementele pe care le

conine.

Exemplu:

Linii orizontale

Blocuri Blocul de text cuprins ntre etichetele ... va fi afiat pe o singur linie.

Exemplu:

Blocul

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.

25

Blocuri Modalitatea cea mai eficient de delimitare i de formatare a unui bloc de text este folosirea delimitatorilor .... Un parametru foarte util pentru stabilirea caracteristicilor unui

bloc (diviziune) este align (aliniere).

Valorile posibile ale acestui parametru sunt:

"left" (aliniere la stnga);

"center" (aliniere central);

"right" (aliniere la dreapta). Un bloc ... poate include alte subblocuri. n acest caz, alinierea precizat de atributul align al blocului are efect asupra tuturor subblocurilor incluse n blocul .

Un bloc ... admite atributul "nowrap" care interzice ntreruperea rndurilor de

ctre browser.

Exemplu:

Blocul

Aceasta linie este o linie normal. Urmtorul bloc este aliniat la dreapta.

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.

Bloc aliniat pe centru. Bloc aliniat pe centru.

Bloc aliniat pe centru. Bloc aliniat pe centru.

Bloc aliniat pe centru. Bloc aliniat pe centru.

26

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 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:

"src" este prescurtarea pentru "source" (sursa). Acest atribut se folosete pentru a indica locaia fotografiei.

Sursa Local Descriere

src="poza.jpg" fotografia este situat pe acelai nivel cu fiierul .html

src="../poza.jpg" fotografia este situat pe un nivel anterior fiierului .html

src="../imagini/poza.jpg" 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:

27

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:

28

4. Formatarea unui fundal sau a unei teme

Backgrounds (Fundaluri) Tag-ul 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:

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:

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?

29

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:

30

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 i 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/"

31

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:

Text vizibil link

Pentru a seta nceputul i sfritul unei anchor-e se folosesc tag-urile . Un exemplu de link, care puncteaz ctre aceast pagin, ar fi:

Tutorial HTML

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:

Legatura spre e-mail-ul Mariei

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" Deschide o nou fereastr

"_self" Deschide pagina n aceeai fereastr

"_parent" Deschide noua pagin ntr-un frame superior linkului

"_top" Deschide noua pagin n acelai browser anulnd toate frame-urile

32

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:

Legtur pe o imagine:

Imagine legtur fr bordur:

Rezultatul va fi urmtorul:

33

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

Elemente de animaie text

HTML are un tag special, , 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

text

Iat un alt exemplu unde micarea se face pe vertical:

Marquee text

- n loc de text poate fi folosit i o imagine, nlocuind textul (aici "Marquee text") cu tagul pentru imagine.

Includerea unei pagini HTML externe

n afar de modalitatea cu folosirea tag-ului pentru afiarea n pagina web HTML a coninutului din alt pagin HTML

Exemplu:

- exist i o alt soluie, dat de tag-ul 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:

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

34

mai sus (tag-ul "" sau "") 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

Nume buton

sau putei face butonul folosind un formular simplu:

sau un buton grafic i anume o imagine care are funcia de buton:

35

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 sau : 1. - 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:

2. - 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:

Tag-ul "" 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.

"" se folosete i pentru adugarea de imagini flash (cu extensia ".swf"), pentru aceasta este ncadrat n alt element,

Iat un exemplu de cod prin care putei aduga imagini flash n pagina web:

36

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.

37

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 (de la "anchor"=ancor). Pentru a preciza pagina indicat de legatur se utilizeaz un atribut al etichetei 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 ....

Prezena etichtetei de sfrit este obligatorie.

Comutarea ntre dou pagini

Pagina 1

Link catre pagina 2

Comutarea ntre dou pagini

Pagina 2

Link ctre pagina 1

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.

Comutarea ntre dou pagini aflate pe acelai disc local

Pagina 3

Link ctre o pagin cu liste

38

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.

Link ctre site-ul firmei Netscape

Link ctre site-ul firmei Netscape Netscape Corporation

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 i dar cu atributul name. Pentru a face trimitere ctre ancor se introduce un link cu atributul href avnd ca valoare denumirea ancorei.

Ancora Ancora

Link ctre ancora aflat n

aceeai pagin napoi la ancor

Link ctre ancora aflat n alt pagin

napoi la ancora din

pagina.html

Exemplu:

Ancore definite n acelai document i n alt document

Ancore definite n acelai document i n alt document Link ctre ancora 1

Link ctre o ancor din alt document 1234 5678 9101112

13141516 17181920 21222324

ancora 1

39

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 a imaginii are urmtoarele atribute:

src fiierul sau adresa fiierului imagine

usemap are valoarea de genul #nume care este folosit n interiorul etichetei prezentate mai jos

2. Harta se definete folosind perechea de etichete i , cu atributul obligatoriu name, avnd aceeai valoare ca la usemap din img. Zona sau zonele coninute de hart sunt introduse prin eticheta 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.

40

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

Exemplu

Harti de imagini

41

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.

42

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

1. 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 si iar elementele de si .

- 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:

mere

pere

struguri

Exemple de fructe:

mere

pere

struguri

Elementele listei pot fi particularizate folosind atributul type care poate lua valorile square,

circle i disc.

Exemplu

HTML Afiare

Exemple de legume:

rosii

cartofi

morcovi

Exemple de legume:

rosii

o cartofi

Lista va fi indentat fa de restul paginii Web i fiecare element al listei ncepe pe un rnd nou.

Aplicaie:

listex_2

O lista neordonata

Glosar de termeni de World Wide Web

Culori uzuale disponibile prin nume

43

Black White Red Green Blue Yellow Purple Aqua

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:

listex_3

O lista neordonata de liste neordonate

Glosar de termeni de World Wide Web

Elemente si atribute a unei pagini HTML

Frameset Atribute: cols rows border

Frame Atribute: src name scrolling

Rezultatul va fi:

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 src

o name

o scrolling

44

Liste ordonate Aceste liste sunt delimitate de etichetele i iar elementele de si .

- 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 Afiare

Exemple de combustibili:

benzina

motorina

gaz lichefiat

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:

listex_4

O lista ordonata

Culori uzuale disponibile prin nume

Black White Red Green Blue Yellow Purple Aqua

Rezultatul este:

O lista ordonata

Culori uzuale disponibile prin nume

1. Black 2. White 3. Red 4. Green 5. Blue 6. Yellow 7. Purple 8. 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):

45

Exemplu:

HTML Afiare

Medii de stocare:

HDD-ul

discheta

CD-ROM-ul

Medii de stocare:

I. HDD-ul II. discheta

III. CD-ROM-ul

Tag-ul 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.

listex_6

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

Culori uzuale disponibile prin nume

Red Green Blue Yellow Purple Aqua

Efect:

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

Culori uzuale disponibile prin nume

C. Red D. Green E. Blue F. Yellow G. Purple H. Aqua

Tag-ul 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).

listex_7

O lista ordonata avand itemi setati individual

Repetati urmatorii pasi ai algoritmului

salvati fisierul;

incarcati fisierul in browser;

schimbati browserul utilizat

incarcati din nou fisierul

46

Efect:

O lista ordonata avand itemi setati individual

Repetati urmatorii pasi ai algoritmului

3. salvati fisierul; 6. incarcati fisierul in browser; 7. schimbati browserul utilizat 8. 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: ... (de la "definition list" = list de definiii). Observaii:

-Un termen al listei este iniiat de eticheta (de la "definition term" = termen definit); -Definiia unui termen este iniiat de eticheta (de la "definition description" = descrierea definiiei); -Definiia unui termen ncepe pe o linie nou i este indentat;

Exemplu:

HTML Afisare

Legenda:

HTML

Hyper Text Mark-ul Language

IP

Internet Protocol

Legenda:

HTML

Hyper Text Mark-ul Language

IP

Internet Protocol

Aplicaie:

listex_1

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

47

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 Afisare

Monitoare

CRT

LCD

Imprimante

cu jet de cerneala

laser

1. Monitoare o CRT

o LCD

2. Imprimante o cu jet de cerneala

o laser

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:

listex_8

O lista ordonata de liste ordonate si neordonate

Un sistem informatic include:

Hardware:

placa de baza

procesor

48

memorie

harddisk

Software:

Linux

Windows

OS/2

Unix

Software de aplicatie:

VisualC++

Java

SQL

CorelDraw

Efect:

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

3. 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 ....

Fiecare element al listei este iniiat de eticheta ( 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 ... (de la " director "). Fiecare element al listei este iniiat de eticheta ( list item ). Cele mai multe browsere afieaz lista de directoare ca pe o list neordonat. (Nu se recomand utilizarea acestori tipuri de liste).

49

Utilizri speciale ale listelor Dac ntr-o list, n loc de elementele acesteia introduse prin , se insereaz un bloc de text, aceasta va fi indentat ( ntocmai ca elementele unei liste).

listex_9

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.

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 si multipli.

listex_10

O lista de definitii speciala

Program

Luni

Marti

Miercuri

Ora 9.00.Insciere

Ora 11.00.Audieri

Ora 13.30.Raspunsuri

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

50

Activitate practic

S se realizeze urmtoarea list personalizat:

O lista personalizata

Tipuri de masini Volkswagen sunt:

Golf

Jetta

Passat

Bora

Corrado

Transporter

Rspuns:

listex_11

O lista personalizata

Tipuri de masini Volkswagen sunt:

Golf

Jetta

Passat

Bora

Corrado

Transporter

51

2. 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 ... ; Titlul Tabelului ... ; Coloanele tabelului (datele) ... ; Sub-titlu tabelului ... ;

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); 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 Descriere abbr text Realizeaz o versiune abreviat a coninutului textual al celulei align left, right, center

justify

alinierea datelor celulei pe orizontal

valign top, middle,

bottom, baseline

alinierea datelor celulei pe vertical

axis category_name comunic browserului care anteturi de rnd sau de coloan se aplic unei anumite celule

bgcolor rgb(x,x,x)

#xxxxxx

colorname

coloreaz fundalul unei celule

colspan number specific pe ct de multe coloane ale tabelului se va ntinde

52

celula curent rowspan number specific pe ct de multe rnduri ale tabelului se va ntinde

celula curent height Pixels % specific nlimea celulei width Pixels % specific lungimea celulei

Exemplul 1:

Normal border:

First

Row

Second

Row

No border:

First

Row

Second

Row

Thick border:

First

Row

Second

Row

53

Exemplul 2:

Exemplul 3:

54

3. Activitate practic

Realizai n HTML urmtorul tabel:

Nr.

Crt. Nume Prenume Discipline Medii

Sem. I Sem. II

1. Religie 8,25 7,75

2. Istorie 7,60 9,60

Rezolvare

Nr.Crt.

Nume

Prenume

Discipline

Medii

Sem. I

Sem. II

1.

Religie

8,25

7,75

2.

Istorie

7,60

9,60

55

Modulul 5. Lucrul cu formulare, cadre

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

.

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 Un formular este definit ntr-un bloc delimitat de etichetele corespondente i . 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 : 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.

56

Exemplu:

Tag-ul n interiorul blocului trebuie inserate elemente care s fie afiate pe pagin. Aceste elemente se specific prin tag-ul , simplu. Pentru fiecare element 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 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;

57

Butoane

Un formular poate s conin butoane, care vor permite executarea unor comenzi. Pentru a insera un buton ntr-un formular se utilizeaz eticheta , avnd atributul type cu valoarea "button". Alte dou atribute ale elementului "button" pot fi: name, care permite ataarea unui nume butonului 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 ... . 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 ... 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:

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 cu atributul type avnd valoarea "radio".

Exemplu:

58

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.

Exemplu:

Liste de selectie ntr-un formular pot exista liste de selecie. Acestea sunt specificate prin tag-ul dublu .. , n interiorul blocului de selecie fiind specificate opiunile cu eticheta .. .

Exemplu:

Procesor

Placa de baz Placa video

Zone de text

Zonele de text sunt multi-linie care permit introducerea textelor. Zona este specificat prin tag-ul ..., 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:

Un formular cu un camp de editare multilinie

Prima linie din textul initial.

59

A doua linie din textul initial.

Zone ascunse

n formulare, pot exista zone ascunse, care nu vor fi afiate pe pagin .

Exemplu:

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 este

nlocuit de , iar n interiorul lor cadrele sunt delimitate de i .

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 , 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.

Exemplul 8_1

Efect:

Exemplu: pagina cu dou cadre verticale n proporia 40% i 60% din limea total, fr posibilitatea de redimensionare a cadrelor

Exemplul 8_2

61

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 i ntre etichetele i prin care informm vizitatorul c folosete un browser care nu suport cadre.

Browserul folosit nu suporta cadre

62

Cadre in-line

Sunt blocuri care se introduc n pagina prin perechea de etichete i , 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.

Exemplul 8_4

Mai jos este un cadru in-line cu urmatori parametrii:

width="300" si height="200" hspace="200" vspace="100" scrolling="yes"

Browserul folosit nu suporta cadre in-line

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 de-a 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...

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!

65

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 Partea 1

Balada unui greier mic Partea 2

Balada unui greier mic Partea 3

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...

Fiierul HTML iniial, cel care creeaz cadrele este:

Fiier cu cadre

Primul cadru afieaz urmtorul fiier (link_uri.html) care conine legturile ctre cele trei pagini html (parte1.html, partea2.html i partea3.html):

Fiier cu legturi

Balada unui greier mic Partea 1

Balada unui greier mic Partea 2

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 pen