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   (non-breaking space)
Elementul   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