122316717 proiectarea paginilor web html css javascript

333
FLORENTINA RODICA NICULESCU PROIECTAREA PAGINILOR WEB HTML, CSS, JavaScript

Upload: kaaty-montonel-ralu-opritescu

Post on 23-Oct-2015

187 views

Category:

Documents


33 download

TRANSCRIPT

  • FLORENTINA RODICA NICULESCU

    PROIECTAREA PAGINILOR WEB HTML, CSS, JavaScript

  • Descrierea CIP a Bibliotecii Naionale a Romniei NICULESCU, FLORENTINA RODICA

    Proiectarea paginilor Web HTML, CSS, JavaScript . / Florentina Rodica Niculescu. Bucureti, Editura Fundaiei Romnia de Mine, 2007

    Bibliog.

    ISBN: 978-973-725-822-9 004.738.52 004.43 HTML 004.43 CSS 004.43 JAVASCRIPT 004.272.23

    Editura Fundaiei Romnia de Mine, 2007

  • UNIVERSITATEA SPIRU HARET

    FLORENTINA RODICA NICULESCU

    PROIECTAREA PAGINILOR WEB HTML, CSS, JavaScript

    EDITURA FUNDAIEI ROMNIA DE MINE Bucureti, 2007

  • 5

    CUPRINS

    Prefa 9

    Partea I

    HTML

    1. Spaiul World Wide Web...................................................................................... 13 1.1. Introducere n realizarea unui site ................................................................. 15 1.2. Protocoale i adrese URL.............................................................................. 16 1.3. Crearea unui site gratuit ................................................................................ 17 1.4. Crearea paginilor Web .................................................................................. 18 2. HTML noiuni de baz....................................................................................... 20 2.1. Elemente standard ale unei pagini Web ........................................................ 20 2.2. Titluri pentru pagini web............................................................................... 22 2.3. Paragrafe i linii ........................................................................................... 23 2.4. Elementul ......................................................................................... 25 2.5. Linii orizontale .............................................................................................. 28 3. Stiluri de text.......................................................................................................... 29 3.1. Stiluri fizice de text ....................................................................................... 29 3.2. Stiluri logice de text ...................................................................................... 32 3.3. Fonturi ........................................................................................................... 36 4. Liste ....................................................................................................................... 39 4.1. Liste ordonate (Ordered Lists) ...................................................................... 39 4.2. Liste neordonate (Unordered Lists) .............................................................. 41 4.2.1. Atributele elementului LI .................................................................... 44 4.3. Liste de definiii (Definition Lists) ................................................................ 45 5. Tabele ..................................................................................................................... 47 5.1. Generaliti .................................................................................................... 47 5.2. Atributele etichetei ...................................................................... 48 5.2.1. Elementul TH...................................................................................... 55 5.2.2. Elementul CAPTION .......................................................................... 55 5.3. Atributele elementului TR............................................................................. 56 5.4. Atributele elementelor TD i TH.................................................................. 58 5.5. Gruparea liniilor i coloanelor unui tabel...................................................... 62 5.5.1. Gruparea liniilor .................................................................................. 62 5.5.2. Gruparea coloanelor ............................................................................ 64

  • 6

    6. Imagini.................................................................................................................... 66 6.1. Introducerea imaginilor n paginile Web....................................................... 68 6.2. Atributele Elementului IMG ......................................................................... 68 7. Legturi (Link-uri) ................................................................................................ 75 7.1. Elementul A.................................................................................................. 75 7.2. Legturi ctre alte pagini Web ...................................................................... 77 7.3. Legturi cu imagini ....................................................................................... 78 7.4. Legturi cu adrese URL relative ................................................................... 80 7.5. Legturi ctre informaii non Web ............................................................... 82 7.6. Legturi ctre fiiere non HTML ................................................................. 83 7.7. Legturi interne n cadrul unei pagini ........................................................... 84 7.8. Trimiterea automat a unui e-mail................................................................. 88 7.9. Culorile legturilor ........................................................................................ 89 8. Elementele de structur: HTML, HEAD i BODY ............................................ 90 8.1. Blocul de antet ......................................................... 90 8.1.1. Elementul TITLE ................................................................................ 90 8.1.2. Elementul BASE ............................................................................... 91 8.2.3. Elementul META ............................................................................... 92 8.2. Blocul de corp ......................................................... 98 8.3. Blocul de comentarii ..................................................................................... 100 8.4. Blocul de centrare.......................................................................................... 100 9. Cadre ...................................................................................................................... 102 9.1. Bazele organizrii cadrelor............................................................................ 102 9.2. Elementul FRAMESET................................................................................. 105 9.3. Elementul FRAME........................................................................................ 106 9.4. Cadre destinaie ............................................................................................. 108 9.5. Cadre interioare ............................................................................................. 110 10. Formulare............................................................................................................. 112 10.1. Elementul FORM ........................................................................................ 114 10.2. Transmiterea i citirea datelor ..................................................................... 116 10.3. Elementul INPUT........................................................................................ 118 10.4. Elementul TEXTAREA .............................................................................. 127 10.5. Elementul SELECT..................................................................................... 128 11. Hri de imagine .................................................................................................. 131 11.1. Definirea hrilor imagine pe server............................................................ 131 11.2. Definirea unei hri imagine la client .......................................................... 132 11.3. Programul MAP THIS................................................................................. 136 12. Faciliti suplimentare Multimedia 142 12.1. Multipurpose Internet Mail Extensions (MIME) 142 12.2. Aplicaii Plug-in i ActiveX ... 143 12.2.1. Plug-in programe de completare 143 12.2.2. ActiveX . 144 12.3. Elemente OBJECT i PARAM ... 145 12.4. Elementul MARQUEE 150

  • 7

    Partea a II-a CSS

    13. CSS-Cascading Style Sheets (Foi de stil n cascad) ........................................ 157 13.1. Introducere n modelele de stiluri................................................................ 157 13.2. Stiluri interne (in-line)................................................................................. 157 13.3. Foi de stil n pagin ..................................................................................... 159 13.4. Foi de stil externe ........................................................................................ 162 13.5. Stiluri n cascad ......................................................................................... 163 13.6. Stiluri pentru diferii selectori ..................................................................... 165 13.6.1. Selectorul ID .................................................................................... 165 13.6.2. Selectorul CLASS ............................................................................. 166 13.6.3. Pseudo-clase...................................................................................... 168 13.6.4. Pseudo-element ................................................................................ 170 13.7. Elementele DIV i SPAM ........................................................................... 171 14. Clase de proprieti n CSS ................................................................................ 173 14.1. Casete n CSS .............................................................................................. 173 14.2. Fonturi n CSS............................................................................................. 174 14.3. Proprieti pentru TEXT.............................................................................. 177 14.4. Proprieti pentru padding........................................................................... 180 14.5. Proprieti pentru bordur ........................................................................... 182 14.6. Proprieti pentru partea margin......................................................................... 185 14.7. Proprieti de culoare pentru casete.................................................................... 186 15. Poziionarea elementelor n pagin n CSS ....................................................... 193 15.1. Arborele unei pagini.................................................................................... 194 15.2. Proprietatea Display .................................................................................... 197 15.3. Elemente flotante......................................................................................... 199 15.4. Elemente poziionate ................................................................................... 201 15.5. Proprietatea z-index..................................................................................... 205

    Partea III JavaScript

    16. JavaScript Elemente de baz........................................................................... 209 16.1. Introducere n JavaScript............................................................................. 209 16.2. Primul script n JavaScript .......................................................................... 212 16.3. Tipuri de date i variabile............................................................................ 216 16.3.1. Tipuri de date .................................................................................... 216 16.3.2. Variabile............................................................................................ 217 16.4. Expresii i Operatori.................................................................................... 220 16.5. Metoda document.write() ............................................................................ 228 17. Instruciuni i Funcii n JavaScript .................................................................. 230 17.1. Instruciuni .................................................................................................. 230 17.1.1. Instruciuni de decizie ....................................................................... 230 17.1.2. Instruciuni de ciclare........................................................................ 238

  • 8

    17.2. Funcii n Java Script................................................................................... 245 17.2.1. Definirea i apelarea unei funcii ...................................................... 245 17.2.2. Domeniul de valabilitate a variabilelor ............................................. 247 17.2.3. Parametri ........................................................................................... 250 17.2.4. Funcii predefinite ............................................................................. 251 17.2.5. Recursivitate...................................................................................... 252 18. Obiecte .................................................................................................................. 253 18.1. Obiecte create de utilizator.......................................................................... 253 18.2. Obiecte intrinseci......................................................................................... 262 18.2.1. Obiectul Math ....................................................................................... 262 18.2.2. Obiectul String............................................................................... 264 18.2.3. Obiectul Array ............................................................................... 269 19. Interaciune JavaScript HTML ...................................................................... 276 19.1. Legtura ntre JavaScript i HTML............................................................. 277 19.2. Funciile setTimeout() si clearTimeout().................................................... 278 19.3. Elementul n JavaScript .............................................................. 281 19.3.1. Validarea datelor ............................................................................... 282 19.3.2. Obiectele din Formular ..................................................................... 283 19.3.3. Utilizarea evenimentului onchange................................................... 284 19.3.4. Evidenierea seleciei csuelor de validare, utiliznd JavaScript ..... 287 19.3.5. Listele de opiuni schimbate dinamic cu ajutorul butoanelor radio, folosind JavaScript ..................................................................

    288

    19.3.6. Trimiterea unui formular, utiliznd evenimentul onsubmit............... 290 19.3.7. Activarea, Dezactivarea, Citirea unor elemente realizate cu funcii JavaScript ................................................................................

    291

    19.4. Imagini n JavaScript................................................................................... 293 19.4.1. Evenimentele onclick i ondblclick ................................................... 394 19.4.2. Evenimentul onmousemove............................................................... 296 19.4.3. Evenimentele onmouseover si onmouseout....................................... 297 19.4.5. Realizarea unei animaii .................................................................... 298 20. Elemente avansate JavaScript............................................................................ 300 20.1. Legtura ntre HTML, JavaScript i CSS.................................................... 300 20.2. Obiectul WINDOW .................................................................................... 304 20.2.1. Deschiderea i nchiderea unei ferestre ............................................. 305 20.2.2. Activarea i dezactivarea unei ferestre.............................................. 307 20.2.3. Metoda scrollTo().............................................................................. 309 20.3. Obiectul DOCUMENT ............................................................................... 310 20.3.1. Proprietatea images a obiectului document....................................... 312 20.3.2. Proprieti de culoare ale obiectului document ................................. 312 Anexe ANEXA A Culori.................................................................................................... 317 ANEXA B Caractere n HTML............................................................................... 321 ANEXA C CSS Specificaii de stil......................................................................... 325 Bibliografie selectiv................................................................................................... 331

  • 9

    Prefa

    Cartea Proiectarea paginilor Web HTML, CSS, JavaScript i propune s fie o lucrare de baz pentru nsuirea limbajelor de marcare HTML, de stiluri CSS i de scriptare JavaScript, necesare realizrii unor pagini Web atractive i interactive.

    Proiectat ca suport la cursurile de Tehnologii Web i de Programare Web i multimedia, predate de autoare la Facultatea de Matematic Informatic din cadrul Universitii Spiru Haret, cartea ofer coduri surs i capturi de ecran pentru un numr foarte mare de exemple descriptive.

    Cartea indic, de asemenea, modul n care proiectantul unui site poate integra HTML, CSS i JavaScript pentru a realiza pagini web profesioniste.

    Cartea este structurat n trei pri i o anex. n prima parte este tratat limbajul de marcare HTML, care este un acronim

    pentru HyperText Markup Language. HTML constituie limbajul de baz, care ne permite s realizm propriile documente multimedia atractive n spaiul World Wide Web, cu ajutorul browserelor Internet Explorer, Netscape Navigator, Mozzila Firefox, Opera etc.

    Partea a doua este dedicat tratrii stilurilor. CSS este un acronim pentru Cascading Style Sheets (Foi de stil n cascad) i constituie un instrument modern, care ajut proiectanii de site-uri s i mbunteasc aspectul paginilor.

    CSS pune la dispoziie peste 100 de proprieti, fiecare avnd un set de valori care se pot stabili elementelor HTML, n vederea transformrii documentelor Web n unele profesioniste, care nu ar putea fi realizate numai cu ajutorul atributelor elementelor HTML.

    Partea a treia trateaz limbajul JavaScript. HTML i CSS ne ajut s proiectm pagini atractive, dar statice. Pentru a crea pagini sofisticate, interactive (dinamice), se pot utiliza diferite programe de scriptare, ca de exemplu JavaScript, realizat de firmele Netscape i Sun.

    JavaScript este un limbaj de scriptare, interpretat i orientat pe obiecte, care, utilizat mpreun cu HTML i CSS, permite proiectarea de pagini Web dinamice.

    Cu toate c este un limbaj mult mai puternic dect HTML, introducnd n pagini componenta dinamic, JavaScript are i unele limite, de exemplu nu poate scrie i citi fiiere, nu poate scrie aplicaii pe parte de server etc.

  • 10

    Anexa cuprinde trei tabele: culorile, entitile folosite n web i, respectiv, proprietile CSS i valorile lor posibile.

    Aceast carte se adreseaz, n primul rnd, studenilor de la specializrile de informatic din Facultile de Matematic Informatic din ar.

    Cartea se adreseaz, de asemenea, tuturor celor interesai de crearea unor site-uri Web atractive i interactive, utiliznd resurse multimedia.

    mi exprim, anticipat, gratitudinea pentru toate sugestiile pe care le voi primi din partea cititorilor pe adresa de e-mail: [email protected]

  • PARTEA I

    HTML

    11

  • 12

  • 13

    1. Spaiul World Wide Web

    n acest capitol se introduc principalele concepte i tehnologii de proiectare a

    paginilor Web. Pornind de la descrierea modului n care referinele pot contribui la organizarea informaiei se continu cu prezentarea conceptelor de multimedia, de protocol de transfer de informaii, de programe de navigare, de adrese web i de realizare de site-uri.

    Tehnologia de baz a spaiului World Wide Web a fost creat de un institut de cercetri pentru fizica energiilor nalte din Elveia, CERN. Tim Berners-Lee i echipa sa de la CERN a creat n 1994 un Consoriu Web, care se ocupa cu elaborarea i dezvoltarea standardelor pentru Web. Membrii consoriului, atunci cnd au nceput s creeze un mecanism pentru identificarea unic a informaiei din spaiul de date, au neles necesitatea elaborrii unei scheme de legturi informaionale Web, care s includ o mare varietate de servicii internet, rezultnd astfel adresele URL (Uniform Resource Locator Descriptor Uniform de Resurse). Pentru a nelege World Wide Web trebuie s nelegem modul n care este organizat informaia n mediile tiprite.

    Medii liniare multimedia

    Transmiterea informaiei la distan se realizeaz cu anumite tehnologii n funcie de specificul datelor, ca de exemplu: tiprituri (cri, ziare etc.), servicii potale, telefonie, radioul i televiziunea i, mai nou, internetul.

    Tehnologiile multimedia pot fi definite ca o totalitate de modaliti de creare, stocare, regsire, exploatare i difuzare a documentelor sau aplicaiilor compuse din mai multe elemente, ca de exemplu: text, grafic, imagini, animaie, sunet etc.

    Componenta media a cuvntului multimedia specific o form de interaciune uman n modelarea i procesarea computerizat, iar componenta multi semnific prezena simultan n acelai document sau aplicaie a mai multor tipuri de media.

    O aplicaie multimedia trebuie s conin cel puin o media continu (cu durat msurabil de execuie, precum: sunet, film, animaie etc. ) i cel puin o media discret (fr durat determinat de execuie: text, fotografii, grafic etc.).

    Mediile liniare sunt acele documente n care informaia are o organizare liniar: crile sunt citite de la nceputul crii i pn la sfritul ei. La fel i vizionarea unui film se face liniar. Dar, cu toat organizarea liniar, se poate sri de la o pagin a crii la alta sau se poate crea o strategie de navigare prin carte.

  • 14

    Hipermedii i hipertext

    Un hipermediu sau hipertext este un document alctuit din text, care conine informaia propriu-zis i hiperlegturi ctre alte seciuni sau alte documente situate pe internet. Hipertextul poate fi considerat un mediu non-liniar, n care trebuie urmate anumite legturi ntre noduri pentru a accesa informaia. Nodurile sunt identificate, n mod unic, prin adres. De exemplu, dac dorim s obinem o anumit adres sau capitol dintr-o carte, n loc s facem acest lucru fizic se poate atinge o anumit zon a paginii ca s obinem informaia dorit.

    Dup 1996 putem spune c s-a produs o explozie a spaiului web, majoritatea instituiilor, firmelor, organizaiilor dorind s aib propriile site-uri web. Pentru a reduce diferenele dintre transmiterea prin televiziune, care are o infrastructur bazat pe unde sau cablu, cu o capacitate foarte mare de transfer de date, i cele ale internetului, n care comunicarea era realizat prin telefonie (dial-up), s-au elaborat noi tehnologii de transfer a datelor pe spaiul www, bazate pe fibr optic sau comunicaii prin satelit. Numrul tot mai mare de utilizatori i volumul mare de date transferate prin internet a dus la gsirea de soluii hard i soft de compresie a datelor. Compresia datelor a dus la deteriorarea calitii acestora. n urma unor cercetri s-au gsit algoritmi de compresie a datelor multimedia care s nlture anumite frecvene fr a periclita acurateea auditiv i vizual. De exemplu, standardele MPEG (Motion Picture Experts Group) sau AVI (Audio-Video Interleaved) folosesc stocarea compresat cu pierderea unor date audio sau video. Utilizatorii de site-uri trebuie s aib instalat un player pentru a reda obiectele multimedia ncapsulate n site. De asemenea, n scopul accesului la obiectele de pe Web s-a creat soft necesar pentru compresia diferitelor tipuri de media, recunoscute de player sau de programele navigatoare Web, astfel pentru:

    Text HTML (HyperText Markup Language) XHTML (Extensible HyperText Markup Language) XML (Extensible Markup Language) WML (Wireless Markup Language) etc.

    Imagine BMP (BitMap Picture) WBMP (Wireless BitMap Picture) EPS (Encapsulated Post Script) GIF (Graphics Interchange Format) JPEG (Joint Picture Experts Group) PNG (Portable Network Graphics) SVG (Scalable Vector Graphics)

    Sunet WMA (Windows Media Audio) WAV (Wave Format) MIDI (Musical Instrument Digital Interface) MP3 (MPEG-1 Layer 3) etc.

  • 15

    Animaie / Sunet AVI (Audio Video Interleaved) MPEG (Motion Picture Experts Group) WMV (Windows Media Video) QuickTime, Flash etc.

    Prelucrri imagine Photoshop Prelucrri pe server PHP Lumi 3D X3D (Extensible 3D) Animaie / validare date JavaScript Stiluri CSS (Cascade Style Sheets)

    Exist dou tipuri de codificare a informaiei grafice: Rasterizate (bmp, wbmp, jpeg, gif), constituite din matrice de pixeli; Vectoriale (svg, eps), alctuite din elemente geometrice: linii, curbe,

    suprafee etc.

    Imaginile vectoriale au avantajul de a putea fi redimensionate fr pierderea calitii sau modificarea semnificativ a dimensiunii fiierului.

    1.1. Introducere n realizarea unui site

    Pentru a crea un site, o persoan fizic sau juridic (firm) trebuie s apeleze la o firm specializat numit provider. Serviciile oferite de provider se numesc Web Hosting.

    Provider-ul deine calculatoare foarte performante numite servere, care sunt cuplate cu calculatoare din ntreaga lume. Acestea pun la dispoziia persoanei solicitante:

    spaiul pe hardul server-ului de cel puin 10 Mb; o adres de internet, ca de exemplu: www.adresa-utilz.ro n spaiul alocat pe serverul provider-ului, persoana introduce fiiere, docu-

    mente multimedia scrise n HTML (HyperText Markup Language), dar i alte docu-mente care provin din alte tipuri de servicii de publicare a informaiilor din internet.

    Pentru a vizita o pagin Web, trebuie s existe pe calculatorul vizitatorului unul sau mai multe programe specializate numite navigatoare sau browser-e, precum: Netscape Navigator realizat de Netscape Communications, n 1995, odat cu lansarea mediului de operare Windows 95, i Internet Explorer realizat de Microsoft, prima versiune a sa fiind inclus n pachetul Windows 95 Plus Pack. La nceputul lansrii, Internet Explorer era inferior browser-ului Netscape, dar au urmat alte versiuni cu mbuntiri care l-au fcut s devin cel mai utilizat browser. Azi exist programe de navigare, ca de exemplu, Opera, Mozilla Firefox, fiecare din ele avnd faciliti suplimentare. n aceast carte, exemplele au fost fcute cu browser-ul Internet Explorer.

    Funciile principale ale browser-ului sunt: permite vizitatorilor paginilor Web s introduc adresa URL a paginilor

    respective;

  • 16

    transmite server-ului adresa i acesta i furnizeaz fiierul HTML care conine codul paginii;

    interpreteaz comenzile coninute n codul HTML i le afieaz. Obinuim s numim pagin, coninutul afiat al unui fiier HTML. Site-ul este un ansamblu format din: spaiul pe hard, fiierele care sunt

    depuse pe acest spaiu i adres. Fiierele dintr-un site nu sunt numai fiiere HTML. Pot exista toate tipurile de fiiere care se pot gsi pe spaiul Web i care au fost enumerate mai sus (imagini, animaie, video, sunet etc). Fiierele de pe site pot fi grupate, ca i cele de pe hardul calculatorului, n foldere.

    Cnd solicitm browser-ului ncrcarea unui fiier de pe un site, acesta va solicita server-ului, pe care se afla alocat site-ul, furnizarea respectivului fiier.

    1.2. Protocoale i adrese URL

    Pentru ca dou calculatoare s poat comunica ntre ele, trebuie s existe programe care s execute transferul. Definim un protocol, ansamblul de reguli ce trebuie respectate n transferul de informaii de la server la calculator, i invers. Exist mai multe protocoale care se utilizeaz n transferul de informaii multimedia. Cele mai folosite sunt:

    HTTP (HyperText Transfer Protocol) este destinat exclusiv transferului de informaii pe Web, adic transferului de fiiere de la server la calculatorul local pentru browser.

    RTP (RealTime Transport Protocol) este folosit n transmiterea n timp real a informaiilor multimedia, oferind servicii de transfer a mediilor audio i video interactive. RTP ofer servicii de multiplicare, suportnd transferul datelor la destinaii multiple (multicast). Acest protocol este folosit mai ales de aplicaiile de video-conferine i pentru transmiterea pe Web a unor programe radio i audio-video.

    FTP (File Transfer Protocol) este destinat transferului de fiiere de la server la calculatorul local (download) i invers, de la calculator la server (upload). n aceste operaii de transfer nu intervine browser-ul, ci programe cunoscute sub numele de programe ftp. Aceste programe pot fi download-ate de pe internet i, n marea majoritate, sunt gratuite. Ele se pot identifica cu GOOGLE, folosind cuvntul cheie FTP. n aceast carte se va folosi protocolul ftp, WS-FTP95, care se poate cuta pe GOOGLE cu acest cuvnt cheie, sau poate fi download-at de la adresa: www.uottawa.ca/help/ws_ftpe.html.

    Adresarea resurselor Web

    Informaiile sunt stocate n spaiul Web n fragmente, numite noduri, interconectate ntre ele. Nodurile sunt identificate prin adrese, termenul tehnic fiind de URL Uniform Resource Locator (Descriptor Uniform de Resurse ).

    O adres URL este un ir de caractere prin intermediul cruia se acceseaz un fiier al unui site i are sintaxa: protocol://domeniu/cale

  • 17

    unde: protocol desemneaz protocolul utilizat (HTTP, RTP, FTP) domeniu este adresa simbolic a unui calculator (de exemplu, adresa

    server-ului web) calea reprezint irul de directoare ctre resursa dorit. Protocolul HTTP din adres este automat completat de browser, deci nu este

    obligatoriu de tastat. Adresa site-ului este i ea o adres URL, i anume a fiierului rdcin (home page). Acest fiier este inclus n folder-ul rdcin a site-ului i, pentru majoritatea server-elor, acesta este denumit index.html.

    De exemplu, dac tastm http://www.adresa-utilizator.ro sau numai www.adresa-utilizator.ro la un browser, se solicit acestuia s ncarce i s afieze fiierul rdcin al

    site-ului. Astfel, se poate scrie i http://www.adresa-utilizator.ro/index.htm. S presupunem c site-ul de la adresa www.adresa-utilizator.ro conine dou foldere, numite texte i imagini, iar folderul texte are fiierele curs1.html, curs2.html Pentru a accesa unul din aceste fiiere, vom scrie adresa URL www.adresa-utilizator.ro/texte/curs1.htm

    OBSERVAIE! URL-urile nu pot conine spaii. Ca alternativ, adresa URL permite ca unele

    caractere s fie specificate prin simbolul % urmat de echivalentul hexazecimal al caracterului respectiv. Dac dorim, de exemplu, s apar caracterul spaiu, care are codul 32 zecimal i 20 hexazecimal (2x16+0=32) vom scrie www.adresa%20utilizator.ro

    n tabelul de mai jos se specific formatul URL a unor caractere uzuale care se pot ntlni n adresele URL:

    Caracter Cod zecimal Cod hexazecimal Codificare URL

    Spaiu 32 20 %20 Tab 9 09 %09

    Enter 10 0A %0A Procent 37 25 %25

    End of line 13 0D %0D

    1.3. Crearea unui site gratuit

    Firmele specializate (provider-ii) pun la dispoziia utilizatorilor site-uri contra cost, costuri care variaz n funcie de spaiul acordat pe server i de serviciile furnizate. Exist i firme care ofer site-uri gratuite, dar n acest caz, utilizatorul site-ului, ct i toi vizitatorii trebuie s accepte publicitatea. Pentru a obine un site gratuit, solicitantul trebuie s aibe o adres de e-mail, care poate fi obinut tot gratuit la Yahoo, Hotmail, Gmail etc. Dac se acceseaz site-ul de la adresele:

    www.freewebsites.com www.b0x.com

  • 18

    se va solicita clientului s completeze un formular cu numele dorit al site-ului, adresa de e-mail (una din cele pe care le avei), o parol etc. Dac datele au fost completate corect se poate obine un site la adresa

    www.nume.freewebsites.com www.nume.b0x.com La adresa de e-mail specificat n formular se va primi un mesaj prin care se

    cere s confirmm nscrierea, scriind parola dat i numele de utilizator (USER ID) i un cod care a fost dat dup completarea formularului.

    S presupunem c n urma acestei cereri s-a obinut un site gratuit: adresa: www.testweb.freewebsites.com parola: pagweb User ID: ana Pentru a putea fi populat un site, trebuie transferate fiiere. Transferul

    fiierelor de la calculator la server i invers se poate face (aa cum s-a menionat mai sus) cu protocolul FTP. Unul din protocoalele FTP, utilizate i n aceast carte, este WS_FTP95, care se descarc de pe Internet.

    Dup ce a fost download-at un protocol ftp, apare o caset de dialog n care trebuie introduse datele de acces la site:

    Host name: test.web.freewebsites.com Host type: Automatic detect User ID: ana Parola: ****** (pagweb) Dac datele au fost introduse corect, atunci programul afieaz o fereastr cu 2

    panel-uri. Panel-ul drept conine fiierele din site i panelul stng conine fiierele din directorul curent al calculatorului local. Transferul fiierelor din folder i invers se face cu dublu click pe fiier sau prin Drag&Drop. Se pot crea directoare cu MkDir, se pot terge fiiere cu Delete i se poate schimba unitatea curent de pe calculator. Pentru un transfer mai riguros se apas butonul ASCII din fereastra afiat.

    1.4. Crearea paginilor Web

    Limbajul HTML se va prezenta n capitolele urmtoare. Pentru a scrie fiiere HTML (pagini web), urmm paii:

    cu My Computer sau Explorer ne situm n folderul unde dorim s se gseasc fiierele

    cu ajutorul menu-ului contextual (click cu butonul drept al mouse-ului) alegem New -> Text Document. Programul NOTEPAD va crea un fiier cu extensia .txt

    ne poziionm pe fiier i din menu-ul contextual alegem comanda RENAME, pentru a schimba numele fiierului i extensia n .html sau .htm. Extensia .htm este asociat browser-ului Internet Explorer, i deci fiierul va avea icon-ul browser-ului

  • 19

    un dublu click pe fiier are ca efect lansarea browser-ului, care va afia fiierul (coninutul va fi vid)

    din menu-ul principal din Internet Explorer, View->Source, NOTEPAD va ncrca codul HTML al fiierului (coninutul va fi vid)

    scriem un text la alegere, de exemplu se creeaz un site, se salveaz fiierul

    n fereastra browser-ului se apas butonul Refresh, prin care comandm browser-ului s rencarce fiierul care a suferit modificri

    se trece iar n NOTEPAD (View-Source) pentru a continua s scriem fiierul HTML

    OBSERVAIE! Pentru a scrie codul unui fiier HTML, nu trebuie s fim conectai la

    Internet.

    Un fiier HTML poate conine comentarii pentru a-l face mai uor de parcurs. Comentariile pot aprea oriunde n fiier i nu vor fi afiate de browser. Sintaxa comentariilor n HTML este:

  • 20

    2. HTML noiuni de baz

    n acest capitol se vor introduce noiunile de baz ale Limbajului de Marcare Hipertext (Hypertext Markup Language HTML) Limbajul HTML conine un set de coduri speciale care se insereaz ntr-un text, pentru a aduga informaii despre formatare i legturi. HTML are la baz limbajul Generalizat Standard de Marcare (Standard Generalized Markup Language SGML).

    Prin convenie, toate informaiile HTML ncep cu o parantez unghiular deschis, (), de exemplu . Simbolul este cunoscut n literatura de specialitate sub numele de tag (etichet) de control sau de marcaj. Marcajul comunic unui program de navigare (interpretor sau browser) c fiierul scris este formatat n limbajul HTML standard. n capitolul precedent s-au enumerat unele interpretoare HTML, precum Internet Explorer al companiei Microsoft.

    2.1. Elemente standard ale unei pagini Web

    Dac un fiier cu extensia .html nu conine niciun marcaj HTML, browser-ul folosit se strduiete s redea ct mai corect informaia.

    S presupunem c am creat fiierul cerere.html, cu urmtorul coninut: Domnule Decan

    Subsemnata, Ionescu Ana, va rog sa-mi eliberati o adeverinta, din care sa

    reiasa ca sunt studenta a facultii de Matematica-Informatica din Universitatea Bucuresti.

    Menionez ca aceasta adeverinta imi este necesara la R.A.T.B. 05-01-2007 Ana Ionescu Fiierul va fi afiat de browser, ca n figura de mai jos.

  • Figura 2. 1. Fiierul cerere.html, fr marcaje

    Se observ c ceea ce afieaz browser-ul nu seamn cu formatul dorit. Dac n exemplul anterior se introduc marcaje HTML, se creeaz un

    document HTML (o pagin web) standard. Aceste marcaje (etichete) introduse nu sunt afiate de programele navigatoare.

    Multe din etichetele HTML sunt elemente de sine stttoare, dar unele sunt etichete perechi, avnd etichete de nceput i de sfrit. Controlul de nceput se numete i control (eticheta, tag sau marcaj) de deschidere i se reprezint prin , i cel de sfrit se numete control de nchidere i se reprezint prin .

    Structura de baz a unei pagini web este redat n figura de mai jos. EXEMPLUL DE CREARE A UNEI PAGINI WEB

    Figura 2. 2. Structura de baz a unei pagini web

    21

  • 2.2. Titluri pentru pagini web Pentru ca o pagina web s arate mai relevant se poate da un titlu adecvat, cu ajutorul etichetei pereche: coninut . Titlul apare pe bara de titlu a browser-ului utilizat. Blocul de titlu apare n interiorul blocului de antet . Coninutul blocului de titlu va fi titlul paginii web respective i deci folosirea lui va fi de folos pentru vizitatorii site-ului. Introducnd n exemplul de mai sus un titlu, Internet Explorer va afia:

    PRIMA PAGINA EXEMPLUL DE CREARE A UNEI PAGINI WEB

    Figura 2. 3. Tag-ul

    OBSERVAII! Dac unul din marcajele perechi nu este nchis, sau lipsete o parantez

    unghiular la unul din marcaje, atunci programul de navigare nu nelege marcajul i-l va afia.

    Dac browser-ul afieaz toate controalele de formatare n loc s le interpreteze se poate ca fiierul s aibe extensia .txt, nu .htm sau .html.

    Din analiza exemplului de sus se observ c:

    Elementele i sunt folosite pentru identificarea controalelor i reprezint comenzi adresate browser-ului pentru a reda documentul.

    O pagin web poate fi compus din mai multe blocuri. Blocul exterior este cuprins ntre controalele i

    reprezint tot documentul HTML. Blocul antet este cuprins ntre controalele . Opional, antetul poate conine un titlu pentru pagin, cuprins ntre

    controalele .

    22

  • 23

    Blocul interior corp program poate conine text i /sau imagini i este cuprins ntre controalele .

    ntre parantezele unghiulare sau i cuvintele cheie din interiorul lor nu este permis spaiul (< HEAD > incorect).

    HTML nu face distincie ntre majuscule i liter mic cu care se scriu etichetele.

    2.3. Paragrafe i linii Pentru a crea documente Web lizibile i utile se folosesc etichetele de trecere

    la paragraf nou sau linie nou. Aceste etichete sunt i .

    Eticheta Pentru a specifica saltul la un nou paragraf se utilizeaz marcajul (tag-ul)

    pereche care are sintaxa: coninut paragraf

    Atributul align Paragrafele sunt aliniate implicit la stnga, aliniere care poate fi schimbat utiliznd atributul align care poate lua una din valorile:

    Left paragraful este aliniat la stnga (implicit) Right paragraful este aliniat la dreapta Center paragraful este aliniat la centru Justify paragraful este aliniat la ambele capete

    Pentru utilizarea acestui atribut se utilizeaz sintaxa: Ghilimelele sunt opionale n HTML, dar obligatorii n XHTML.

    Exemplul de mai jos adaug cteva etichete fiierului ex1_2.html, redat n figura 2.1.

    CERERE Domnule Decan Subsemnata Ionescu Ana va rog sa-mi eliberati o adeverinta, din care s reias ca sunt student a facultii de Matematica-Informatica din Universitatea Bucuresti. Menionez ca aceasta adeverinta imi este necesara la R.A.T.B. 05-01-2007 Ana Ionescu

  • Figura 2. 4. Tag-ul

    Din analiza exemplului din figura 2.4 se observ: Browser-ul ignor caracterele ENTER, TAB i spaiile multiple, doar

    primul spaiu dintr-o serie va fi luat n consideraie. Paragrafele sunt separate printr-o linie vid. Sfritul de marcaj de paragraf poate s lipseasc, un nou paragraf

    fiind semnalat printr-un nou nceput de marcaj de paragraf . Un rnd al unui paragraf are limea ferestrei afiate de browser, n lipsa

    altei comenzi. Eticheta

    Pentru a trece la o nou linie n HTML se folosete eticheta pereche (break). Dac eticheta are ca efect lansarea unei linii vide ntre paragrafe, n cazul etichetei nu se las o linie vid ntre linii. Elementul &nbsp

    Dac nu se dorete trecerea unui cuvnt pe linia urmtoare (n cazul depirii dimensiunii ferestrei browser-ului), se folosete elementul &nbsp (non-breaking space). n cazul n care cuvntul dorit nu ncape pe o linie, se trece pe linia urmtoare i cuvntul precedent. n figura de mai jos este redat fiierul cerere.html, n care s-au utilizat etichetele , i elementul &nbsp.

    CERERE Domnule Decan

    24

  • Subsemnata Ionescu Ana va rog sa-mi eliberati o adeverinta, din care sa reiasa ca sunt studenta a facultii de Matematica-Informatica din Universitatea Bucuresti. Menionez ca aceasta adeverinta imi este necesara la R.A.T.B.

    05-01-2007 Ana&nbspIonescu

    Figura 2. 5. Tag-urile i

    2.4. Elementul

    Dac se dorete inserarea unui bloc preformatat, adic introducerea unui text aa cum este scris n sursa HTML, se folosete marcajul pereche , care poate aciona asupra unui grup de linii i are sintaxa:

    Folosind eticheta se obine formatarea dorit, dar materialul cuprins n blocul apare cu fontul de tip monospaiat. ntr-un font monospaiat, fiecare liter are exact aceeai lime.

    OBSERVAII! Se pot folosi n interiorul blocului , elemente de formatare

    (B, I, U etc.), dar nu toate sunt suportate de browser. Deoarece n interiorul etichetei este permis folosirea altor marcaje,

    caracterele speciale trebuie convertite n entiti. Spaiile sunt pstrate. Etichetele HTML nu sunt ignorate de browser, ci interpretate.

    Atributele etichetei sunt: width reprezint lungimea liniei i poate fi un numr ntreg pozitiv sau un

    procent

    25

  • cols determin dimensiunea pe orizontal (n caractere) a zonei vizibile; n caz n care rndul va depi aceast mrime, apare o bar de derulare pe orizontal.

    wrap determin cum sunt tratate caracterele CR/LF (ntreruperi de rnd). Valorile posibile sunt:

    off doar utilizatorul poate insera CR/LF. Aceste caractere vor fi transmise n forma %OD%OA%.

    soft sau virtual (valoarea prestabilit) textul este trecut vizual (i automat) de pe un rnd pe altul n interiorul elementului, dar nu vor fi transmise dect caracterele CR/LF introduse de utilizator.

    Hard sau physical textul este trecut vizual (i automat) de pe un rnd pe altul i sunt inserate automat secvenele CR/LF.

    Pentru ca browser-ul s afieze fiierul cerere.html aa cum a fost scris, s-a

    introdus eticheta n exemplul din figura 2.4. CERERE Domnule Decan Subsemnata Ionescu Ana va rog sa-mi eliberati o adeverinta, din care sa reiasa

    ca sunt studenta a facultii de Matematica-Informatica din Universitatea Bucuresti. Menionez ca aceasta adeverinta imi este necesara la R.A.T.B.

    05-01-2007 Ana Ionescu

    Figura 5. 1 Figura 2. 6. Tag-ul n fiierul cerere.html

    26

  • Se observ din figura de mai sus fontul monospaiat folosit de PRE, n comparaie cu fontul normal folosit de (la scrierea titlului) Etichetele i

    Etichetele i se folosesc la aranjarea textului i sunt asemntoare cu tag-ul , de salt la linie nou. Eticheta Dac se dorete ca un text s fie scris pe un singur rnd, indiferent de dimensiunea ferestrei, acesta se introduce n blocul (nobreak). La ntlnirea acestei etichete browser-ul dezactiveaz modul automat de trecere pe linia urmtoare. Dac textul este mai mare dect fereastra, n cazul folosirii tag-ului , apare o bar de derulare orizontal, care permite vizionarea ntregului rnd. Eticheta Pentru a introduce o linie nou, chiar dac linia se afl n interiorul lui NOBR, se folosete eticheta nepereche (wrap break).

    n exemplul de mai jos se ilustreaz folosirea celor dou etichete. NOBR i WBR n aceast carte se prezint limbajele HTML (HyperText Markup Language), XHTML (Extensible HyperText Markup Language), CSS (Cascade Style Sheets), JAVASCIPT

    Figura 2. 7. Utilizarea elementelor NOBR i WBR

    27

  • 2.5. Linii orizontale Pentru o mai bun organizare vizual a unui document, se folosete eticheta de rigl orizontal, . Aceast etichet poate fi plasat oriunde n document i are ca efect producerea unei linii orizontale pe toat limea paginii, dac nu exist atribute.

    Atributele elementului HR sunt: align alinierea liniei poate avea valorile: left (implicit), right i

    center width lungimea liniei care se poate exprima:

    printr-un numr ntreg pozitiv printr-un procent, care este o fraciune din lungimea paginii i este un

    numr urmat de %, valoarea prestabilit fiind de 100% size reprezint grosimea liniei n pixeli, valoarea implicit fiind 2 nonshade nseamn c linia este neumbrit, n lipsa acestui atribut linia

    este de tip 3D i umbrit color indic culoarea dorit pentru linie. Valoarea implicit este negru

    (black) Un exemplul de utilizare a tag-ului HR este dat de urmtorul cod: Linii orizontale Acesta este o linie fr opiuni Acesta este o linie de lungime 500px, grosime 4px, culoare albast i aliniata centru Acesta este o linie de lungime 50% din pagin, grosime 3px, culoare roie i aliniat la dreapta

    Figura 2. 8. Utilizarea liniei orizontale

    28

  • 29

    3. Stiluri de text

    n capitolul precedent s-au prezentat elementele principale ale redactrii unui document HTML. n acest capitol se vor prezenta unele elemente legate de prezentarea unui text. Utiliznd diferite stiluri fizice (caractere aldine, cursive, subliniate etc.), se pot evidenia anumite cuvinte, fraze sau alte genuri de informaii.

    Limbajul HTML permite s utilizm stiluri logice de text pentru a preciza o destinaie specific pentru text. De exemplu, stiluri logice pot fi considerate i elementele P i PRE, introduse n capitolul precedent.

    n cazul n care textul din corpul programului nu are specificat un stil, atunci textul este afiat cu ajutorul parametrilor predefinii browser-ului.

    3.1. Stiluri fizice de text

    Multe din stilurile fizice introduse mai jos nu mai sunt utilizate frecvent, pentru folosirea anumitor stiluri se recomand utilizarea CSS (Cascading Sheets of Styles foi n cascad).

    Stilurile de text pot fi imbricate, adic un marcaj pereche de stil poate fi creat i folosit n alt marcaj pereche de stil. Cele mai frecvente stiluri fizice utilizate sunt:

    I (cursiv) B (aldin, ngroat) TT (monospaiat) U sau INS (subliniat) S sau STRIKE BIG SMALL SUB (la indice) SUP (la putere) n continuare vor fi descrise succint aceste stiluri fizice de text.

    Stilul I Pentru a afia un text cu stilul italic sau cursive (nclinat), acesta se scrie ntre etichetele i

    Stilul B Pentru a afia un text cu stilul aldin sau bold (ngroat) acesta se scrie ntre

    etichetele i .

  • Stilul TT Textul monospaiat sau teleimprimator (teletype) este afiat cu ajutorul

    tag-urilor i . Amintim c ntr-un stil monospaiat (de exemplu: courier new) fiecare liter ocup aceeai lime chiar dac este mai ngust (de exemplu: i comparativ cu m). Stilul logic afieaz textul cu font monospaiat, dar acesta din urm pstreaz i spaiile dintre cuvinte i linii.

    Stilul U Textul scris ntre tagurile i va aprea subliniat (underline).

    Marcajul este mai puin utilizat deoarece unele versiuni ale navigatorului Netscape ignor marcajul . n documentele HTML care conin legturi ctre alte documente, acestea apar subliniat, ceea ce s-ar putea confunda cu un text subliniat, mai ales pentru cei care lucreaz pe monitoare alb negru, sau pentru cei care utilizeaz nuane de gri.

    Stilul INS Stilul INS are rolul de a comanda browser-ului ca textul scris ntre i

    s fie subliniat, pentru a evidenia c a fost ceva nou introdus. Exemplu de utilizare a acestor stiluri:

    Teorema. ntr-un triunghi dreptunghic ipotenuza la patrat este egala cu suma patratelor catetelor

    Figura 3. 1. Stilurile: B, I, U, INS

    Stilul S i STRIKE

    Un text cuprins ntre etichetele i sau i este afiat tiat cu o linie (barat), ca n exemplul de mai jos: Text barat

    30 Alt Text barat

  • Figura 3. 2. Stilul S i Strike

    Stilul Big Acest stil este folosit pentru a comanda browser-ului ca n textul cuprins ntre

    tagurile i s fie scris mai mare dect textul curent. Stilul SMALL Acest stil este folosit pentru a comanda browser-ului ca textul cuprins ntre

    tagurile i s fie scris mai mic dect textul curent. Elementele BIG si SMALL nu sunt recunoscute de toate browser-urile, fapt

    pentru care este indicat s se foloseasc atributul size al tag-ului . Un exemplu de utilizare a acestor stiluri: BIG si SMALL

    Figura 3. 3. Stilurile BIG si SMALL

    Stilurile SUB si SUP Dac lucrm cu formulele matematice sau dac este nevoie s utilizm n

    paginile web indici superiori i inferiori, HTML ofer dou etichete pentru indici. Textul dintre marcaje va fi scris mai jos, ca un indice.

    31 Textul dintre marcaje va fi scris mai sus, ca o putere.

  • Elementele SUB i SUP pot fi imbricate. n exemplul urmtor se exemplific utilizarea stilurilor SUB i SUP.

    Teorema.

    Intr-un triunghi dreptunghic ipotenuza la patrat este egala cu suma patratelor catetelor (I2=C12+ C22) O formula cu indici: E=Xi (yi 2 )

    Figura 3. 4. Indici inferiori si superiori

    3.2. Stiluri logice de text

    Stilurile fizice de text, descrise n paragraful anterior, sunt uor de perceput. Limbajul HTML ofer, pe lng stilurile fizice de text, discutate n paragraful anterior, i stiluri logice de text care permit s se defineasc evidenieri ale textului.

    Stilurile logice sunt: P (Paragraful) PRE (text preformatat) HR (Linii orizontale) H1,H2,H3,H4,H5 si H6 (Titluri) DIV i SPAN (elemente de grupare) EM, STRONG, DFN, CITE, VAR, CODE, SAMP, KBD Blockquote i q (citate) n continuare se vor analiza succint stilurile logice. Despre primele trei stiluri

    logice s-a discutat n capitolul precedent.

    32

  • Titluri

    Dac pagina conine mai multe seciuni i subseciuni, HTML permite introducerea a ase tipuri de titluri predefinite H1, H2, H3, H4, H5 i H6.

    Fiecare titlu este scris ntre etichetele: , , , , , .

    Titlul H1 este cel mai nalt i ngroat, iar titlul H6 este cel mai de jos i este afiat cu cel mai mic i mai subire font.

    Toate titlurile: sunt afiate pe un rnd nou i cu un spaiu dup blocul precedent accept atributul align = valoare cu valori posibile left (implicit),

    right, center i justify. Un exemplu de utilizare a titlurilor este redat mai jos: TITLUL H1 (cel mai mare si gros) TITLUL H2 TITLUL H3 TITLUL H4 TITLUL H5 TITLUL H6 (cel mai mic si subtire)

    Figura 3. 5. Titluri

    Stilurile DIV i SPAN

    n HTML exist elemente: de nivel bloc, care sunt afiate la nceput de rnd nou (, etc.) inline, care sunt afiate pe acelai rnd (, , , etc.)

    Elementul DIV este un element de bloc iar elementul SPAN este un element inline. Aceste dou elemente nu impun nici un stil pentru text, spre deosebire de un element ca P (paragraph). De aceea, aceste elemente se folosesc mpreun cu limbajul CSS, pentru a ataa un stil la un text sau la o poriune dintr-un rnd (n aceast seciune vor fi exemplificate numai cu atribute independente de CSS).

    33

  • Atributele lui Div i Span: align=valoare este acceptat numai de elementul DIV, care este un

    element de bloc (Span este element inline, deci nu poate avea atributul align).

    title=continut este acceptat de ambele elemente i impune browser-ului sa afieze coninut atunci cnd mouse-ul se afl pe un element.

    n exemplul de mai jos sunt exemplificate stilurile DIV i SPAN. Se observ c elementul DIV:

    nu produce un rnd alb nainte i dup el, aa cum produce elementul P nu las textul aa cum este scris, cum produce elementul PRE

    Figura 3. 6. Stilurile DIV si SPAN

    Stilul BLOCKQUOTE Stilul logic pentru introducerea citatelor lungi se realizeaz cu tag-urile

    i . Elementul este element inline, iar elementul este de nivel bloc. Coninutul blocului este afiat ncepnd de pe rnd nou, cu spaiul nainte, dup, la stnga i la dreapta de citat, practic indenteaz textul, aa cum reiese din exemplul urmtor:

    CITAT "Omul nu este decat o trestie, cea mai fragila din natura, dar este o trestie ginditoare. " Blaise Pascal (1623-1662)

    34

  • Figura 3.7. Elementul BLOCKQUOTE

    Stiluri logice de fraz

    Stilurile logice de fraz permit s se adauge un neles specific unui font

    dintr-un document i sunt implementate i afiate diferit de ctre browser-e. n continuare descriem succint cele mai importante dintre aceste elemente:

    pentru evideniere i afieaz textul cursiv (o alt modalitate de a scrie italic)

    pentru evideniere i afieaz textul aldin (o alt modalitate de a scrie bold)

    evideniaz prima apariie a unui concept, o definiie pentru inserarea unei referine la un document;

    textul este afiat aldin pentru inserarea unui cod de program; textul scris

    cu font monospaiat pentru inserarea unor variabile ntr-un program;

    textul este scris cursiv pentru inserarea datelor de ieire a unei operaii;

    afiat ca font monospaiat pentru inserarea unei comenzi de calculator; afiat ca

    font monospaiat

    Exemplul urmtor utilizeaz cteva din stilurile logice introduse mai sus.

    CSS inseamna CASCADING STYLE SHEETS JavaScript este limbaj de scriptare Timpul si Data se afla tastind sub prompter comenzile Time si Data

    35

  • Se va primi raspuns de forma: Data curenta este: 10-01-07 O functie JavaScript: function complex (a,b) { this.real=a; this.imag=b} Variabilele: a si b se transmit prin referinta Pentru mai multe informatii vizitati www.w3.org Succes

    Figura 3. 8. Stiluri logice de fraz

    3.3. Fonturi

    Pentru a schimba fontul unui text utilizat (dimensiune, culoare, tip de liter) acesta se scrie ntre etichetele i .

    Eticheta pereche de formatare i este un element inline, adic se poate aplica oriunde n interiorul unui rnd.

    Atributele elementului FONT sunt: face, size i color i au sintaxa cunoscut a unui atribut (atribut=valoare).

    face indic tipul de liter utilizat pentru un font i are sintaxa: face = lista de corpuri de liter.

    n cazul n care lista are mai multe de un tip de liter, acestea se separ prin virgule. Browser-ul va utiliza primul corp de liter recunoscut. Dac niciunul dintre fonturi nu este gsit, browser-ul va folosi tipul de liter

    36

  • 37

    implicit. Este indicat s se foloseasc ghilimele ( ) pentru a scrie lista de fonturi, deoarece unele nume sunt compuse din mai multe cuvinte. Fonturi simple

    Fonturi compuse size indic dimensiunea fontului i are sintaxa size=dimensiunea.

    Dimensiunea se poate exprima n dou moduri: absolut, unde dimensiunea este un numr ntreg cuprins ntre 1 i 7, 1

    fiind cea mai mic dimensiune i 7 cea mai mare dimensiune, valoarea implicit fiind 3. Se observ c dimensiunea se exprim invers fa de numrarea dimensiunii subtitlurilor, unde este cel mai mare, iar este cel mai mic

    relativ, unde dimensiunea unui anumit text (liter, cuvnt, fraz) este mrit cu o unitate fa de textul din jurul lui; valori posibile: +1,+2,+7 si -1,-2,..,-7. Modificrile relative nu pot reduce fontul sub size=1 sau peste size=7. De exemplu, dac la dimensiunea implicit 3 se adaug 7 prin , efectul este acelai dac utilizm sau

    color indic culoarea pentru un text specificat i are sintaxa: color=culoare. Culoarea poate fi exprimat n dou moduri : modul text unde valoarea culoare este un nume. Exist o varietate

    de culori dintre care 16 sunt culori standard, implementate de toate browser-ele: aqua (verde marin), black (negru), blue (albastru), fuchsia (violet deschis), gray (gri), green (verde), lime (citron), maroon (maro), navy (bleumarin), olive (cachi), purple (violet), red (rou), silver (argintiu), teal (verde nchis), white (alb) si yellow (galben).

    modul RGB unde valoarea culorii este dat printr-un numr format din 6 cifre hexazecimale, cte dou pentru fiecare culoare de baz din tripletul red (rou), green (verde) i blue (albastru) i este precedat de caracterul #. n anexa A se gsete lista complet a culorilor, date prin nume i prin codul lor. Pentru cele mai folosite culori avem codurile:

    Black #000000 White #FFFFFF Red #FF0000 Green #00FF00 Blue #0000FF

    Elementul Basefont

    Pentru a schimba fontul, chiar de la nceputul paginii, se poate folosi tag-ul care are aceleai atribute ca i tag-ul .

    Aceast etichet formateaz textul conform atributelor specificate, din locul unde apare i pn la sfritul documentului i deci nu necesit eticheta de nchidere. n

  • interiorul elementului BASEFONT se pot gsi alte elemente FONT pentru formarea unor secvene de text.

    Utilizarea fonturilor este exemplificat n continuare: Aplicarea fonturilor acest text are dimensiune 5 si culoarea verde Text normal scris cu parametrii elementului BASEFONT Text scris cu dimensiunea 3 si culoare rosie Succes in continuare la insusirea H T M L

    Figura 3. 9. Fonturi

    38

  • 39

    4. Liste De multe ori avem nevoie s introducem n pagini web secvene de

    enunuri sau articole, numite liste. n HTML exist urmtoarele tipuri de liste: numerotate sau ordonate neordonate sau marcate de definiii

    De exemplu, putem crea liste de cele trei tipuri pentru unele comenzi de editare din word:

    1. cut cut Cut Decupeaz un text

    2. copy copy Copy Copiaz un text

    3. paste paste Paste Lipete un text

    4. find find Find Caut un text

    5. delete delete Delete

    terge un text

    Liste Ordonate Liste Marcate Liste de Definiii

    Toate tipurile de liste: Pot conine un antet, care se scrie ntre marcajul de list i primul element

    din list Pot fi imbricate (nested lists), una n interiorul alteia Sunt indentate cu cteva spaii spre dreapta i au un rnd liber naintea lor

    4.1. Liste ordonate (Ordered lists)

    Elementul OL

    Lista ordonat are toate articolele numerotate, browser-ul fiind acela care atribuie automat secvena. Pentru a crea o list ordonat se folosete tag-ul pereche . Elementul OL este element de bloc i va fi afiat la nceputul rndului.

  • Elementul LI

    Pentru a introduce elemente n list se folosesc etichetele i . Textul cuprins ntre aceste elemente va fi considerat un articol al listei. Eticheta de sfrit nu este obligatorie n HTML, dar n XHTML da.

    Atributele unei liste ordonate au sintaxa: atribut=valoare i sunt: type care are ca valoare un caracter care indic modul de numerotare.

    Exist cinci valori posibile: - 1 pentru cifre arabe: 1,2,3 etc i este valoare implicit - a pentru literele mici : a,b,c etc. - A pentru litere mari: A,B,C etc. - i pentru cifre romane scrise cu litere mici: i, ii, iii, iv etc. - I pentru litere romane scrise cu litere mari: I, II, III, IV

    start indic de unde ncepe numerotarea. Primul simbol dintr-o list ordonat este: 1, a, A, i sau I. Urmtorul exemplu creeaz o list ordonat pentru exemplu de mai sus:

    LISTE ORDONTE COPY CUT PASTE FIND DELETE REPLACE

    Figura 4. 1. Liste ordonate

    n exemplul urmtor se creeaz liste ordonate imbricate: LISTE ORDONTE IMBRICATE PRINCIPALELE COMENZI DIN MENU FORMAT: FONT MENU FONT ARE TREI ETICHETE Font are trei caracteristici Font Font style Size Character Spacing Text Effects

    40

  • PARAGRAPH BULLETS AND NUMBERING COLUMNS

    Figura 4. 2. Liste ordonate imbricate

    4.2. Liste neordonate (Unordered Lists)

    Listele marcate sau neordonate sunt cele mai utilizate. Pentru a crea o list neordonat se folosesc tag-urile i . Fiecare element al listei este definit ca i la listele ordonate prin marcajul . n faa fiecrui articol al listei, browser-ul insereaz un simbol, implicit un disc () . Singurul atribut al listei marcate este type=valoare, unde valoare poate fi:

    disc (), care este o valoare implicit circle () square ()

    Un exemplu de list neordonat este redat mai jos: LISTE NEORDONATE Atributele elementului FONT in HTML: FACE SIZE COLOR

    41

  • Figura 4. 3. Liste marcate Lista vid

    O list fr niciun element se numete list vid. Putem crea o list vid i n scopul de a indenta un text (aa cum face elementul ).

    LISTA VIDA Atributele elementului BASEFONT in HTML: FACE - pentru tip de litera SIZE - pentru dimensiune COLOR- pentru culoare

    Figura 4. 4. Lista vid

    Listele neordonate, ca toate tipurile de liste, pot fi imbricate (a doua list

    constituie un articol al primei liste), aa cum se poate observa n exemplul urmtor.

    42

  • LISTE NEORDONATE IMBRICATE COMENZI EDIT SI MOD DE EXECUTIE COPY CTRL+C

    43

    Menu Edit Menu contextual Buton bara Drag & Drop CUT CTRL+X Menu Edit Menu contextual Buton bara Drag & Drop PASTE CTRL+V Menu Edit Menu contextual Buton bara FIND CTRL+F Menu Edit Figura 4. 5. Liste marcate imbricate

    Din analiza exemplului de mai sus reiese c: listele imbricate sunt dublu indentate fiecare list este marcat cu alt simbol, dac nu se d o alt opiune; pentru

    lista PASTE, att ea, ct i sublista ei au ca marcaj discul, deoarece n sublist s-a optat pentru acesta.

    Pot fi imbricate diferite tipuri de liste, de exemplu, o list ordonat cu o

    list neordonat ca n exemplul de mai jos.

  • LISTE MIXTE IMBRICATE Citeva elemente HTML FONT face size color BASEFONT face size color OL type start Figura 4. 6. Liste mixte imbricate

    4.2.1. Atributele elementului LI

    Eticheta poate avea atribute care schimb parametrii definii n etichetele i .

    Atributele sunt: type valabil att pentru listele ordonate, ct i pentru cele neordonate i

    are aceleai valori ca i atributul type din i . value valabil doar pentru listele ordonate, i are ca efect schimbarea

    numerotrii secveniale i poate avea valori numere ntregi, valoarea implicit fiind 1.

    n exemplul urmtor sunt introduse atributele etichetei pentru

    exemplul de mai sus. Atibutele elementului LI Citeva elemente HTML dintr-o lista FONT Atribute face

    44

  • size color BASEFONT Atribute face size color OL type start

    Figura 4. 7. Atributele elementului Li

    4.3. Liste de definiii (Definition Lists)

    O list de definiii este o secven de descrieri, referine sau indexuri,

    glosarele fiind exemple clasice n acest sens. ntr-o astfel de list cuvintele sunt listate n ordine alfabetic, urmate de definiii ale lor. n HTML o list de definiii este inclus ntre perechea de taguri i . ntre aceste marcaje, o definiie se compune din dou pri:

    Termenul descris (definit) utiliznd tag-ul Descrierea (definiia) termenului, utiliznd tag-ul

    Browser-ul afieaz termenii i definiiile lor pe cte un rnd i indenteaz definiiile. Dac se dorete s se economiseasc spaii se folosete atributul compact al tag-ului , caz n care definiia va ncepe pe acelai rnd cu termenul pe care l definete.

    De exemplu, dac dorim s afim orarul unei firme, putem crea o list de definiii, ca n exemplul de mai jos.

    ORAR LUNI 10-18 MARTI

    45

  • MIERCURI 9-17 JOI 9-13 15-19 VINERI 9-14

    Figura 4. 8. List de definiii

    Dac n exemplul de mai sus se modific tag-ul cu ,

    browser-ul va alinia definiia pe acelai rnd cu termenul asociat.

    ORAR LUNI 10-18 MARTI MIER 9-17 JOI 9-13 15-19 VINERI 9-14

    Figura 4. 9. List de definiii compactat

    46

  • 47

    5. Tabele

    5.1. Generaliti

    Tabelele reprezint n HTML un element important, evideniindu-se prin tag-urile i . El are o form dreptunghiular i este alctuit din linii i coloane la intersecia crora se afl celulele.

    Tabelele ofer o mulime de posibiliti pentru a evidenia un text pe mai multe linii i coloane, pentru delimitarea spaiului unei pagini, n vederea gruprii ntr-o machet a unor elemente (text, imagini etc).

    Spre deosebire de tabelele din procesoarele de texte, tabelele din HTML au dezavantajul c sunt destul de greu de construit. Trebuie specificai parametrii tabelului, ai liniilor i ai celulelor. Orice tabel este compus din trei elemente i anume:

    ... descrie un tabel ... (Table Row) descrie o linie a unui tabel ... (Table Data) descrie o celul a tabelului

    OBSERVAII!

    Etichetele de nchidere i sunt opionale, astfel o linie nou ncepe atunci cnd se ntlnete o nou etichet . n XHTML aceste etichete sunt obligatorii.

    Dac o linie a unui tabel are mai multe celule dect restul liniilor, automat toate liniile vor avea acest numr maxim de celule, browser-ul adugnd celule vide liniilor, pentru a respecta forma dreptunghiular a tabelului.

    n lipsa unor atribute de formatare a tabelului, toate celulele unei coloane au limea impus de cea mai lat celul.

    Celulele unui tabel pot conine orice tip de informaie: text, imagine, tabele, sau chiar combinaii ale acestora.

    n exemplul de mai jos sunt definite trei tabele: cu 2 linii i 3 coloane, cu o

    linie i respectiv cu o coloan. Exemple de Tabele

  • Tabel cu 2 linii si trei coloane a11a12a13 a21a22a23 Tabel cu o linie Posturi de televiziune din programul de baza TVR1 TVR2 ANTENA1 PROTV REALITATEA Tabel cu o coloana TVR1 TVR2 ANTENA1 PROTV REALITATEA

    Figura 5. 1. Tabele Din figura de mai sus rezult c un tabel este afiat implicit

    fr chenar i caroiaj aliniat la stnga i de la rnd nou

    Att tabelele, ct i liniile i celulele au atribute care le schimb proprie-tile standard (de aliniere, de dimensiune, de culoare etc.)

    5.2. Atributele etichetei

    Un tabel poate fi formatat, utiliznd urmtoarele atribute: border, bordercolor, frame, rules, width, height, align, cellspacing, cellpadding, hspace, vspace, bgcolor. n continuare vom descrie, pe scurt, aceste atribute.

    Atributul BORDER

    Aa cum am mai precizat, un tabel este afiat implicit fr bordur i

    caroiaj interior. O bordur pentru un tabel poate fi introdus prin atributul border=valoare, unde valoare reprezint grosimea n pixeli a liniei de contur a tabelului.

    48

  • OBSERVAII! Dac valoare=0, atunci border-ul lipsete i este echivalent cu lipsa

    atributului din Valoarea implicit a border-ului este 1, deci border fr valoare este

    echivalent cu border =1 Dac valoare 0 atunci linia de contur este afiat n 3-D

    Dac n exemplul din figura 5.1 adugm atributul border la eticheta va aprea o linie de contur de grosime 1 tabelul nu va avea contur tabelul va avea un contur de grosime 5

    aa cum reiese din figura 5.2.

    Figura 5. 2. Atributul border al elementului Atributul BORDERCOLOR

    Acest atribut indic culoarea bordurii n Netscape Navigator, iar n Internet Explorer indic i culoarea caroiajului interior al tabelului. Sintaxa lui este bordercolor=valoare, unde valorile posibile sunt ca i ale atributului color de la etichetele i i anume

    un nume de culoare o secven RGB (red, green, blue) de 6 cifre hexazecimale, cte dou

    pentru fiecare culoare, precedate de #.

    Dac n exemplul de mai sus adugm i atributul bordercolor la etichetele , astfel

    49

  • Figura 5. 3. Atributul bordercolor Atributul FRAME Acest atribut ofer un control i, mai precis, al chenarelor din jurul

    tabelelor i are sintaxa frame= valoare. Valorile posibile i modul de afiare a lor sunt:

    - void elimin liniile exterioare a11 a12

    a21 a22

    - above afieaz o linie deasupra a11 a12 a21 a22

    - below afieaz o linie sub tabel a11 a12a21 a22

    a11 a12a21 a22

    - hside afieaz linii n partea superioar i inferioar

    50

    - lhs afieaz o linie la stnga

    a11 a12a21 a22

    a11 a12

    a21 a22- rhs afieaz o linie la dreapta

    - vside afieaz linii la dreapta i la stnga a11 a12

    a21 a22

    a11 a12a21 a22

    - box afieaz un contur pe toate laturile

  • Atributul RULES

    Atributul RULES definete modul de afiare a caroiajului dintre celulele tabelului i are sintaxa rules=valoare.

    Valorile posibile i modul de afiare a lor sunt - none elimin toate muchiile interioare ale tabelului

    a11 a12 a21 a22

    - groups afieaz liniile orizontale ntre toate grupurile din tabel : THEAD, TBODY, TFOOT i COLGROUP

    a11 a12 a21 a22

    - rows afieaz muchiile orizontale ntre linii

    - cols afieaz muchii verticale ntre coloane a11 a12 a21 a22

    a11 a12 a21 a22

    - all afieaz muchii ntre linii i ntre coloane

    Atributul ALIGN

    Atributul align precizeaz alinierea tabelului n pagin. Valorile posibile sunt: left (implicit), right i center.

    n cazul n care exist i text, acesta va fi poziionat fa de tabel n funcie de alinierea acestuia.

    Un exemplu este dat mai jos:

    a11a12 a21a22 Textul este aliniat la stanga tabelului a11a12 a21a22 Textul este aliniat la dreapta tabelului Acesta este un tabel aliniat la centru. Textul apare deasupra si a11a12 a21a22

    51

  • sub tabel

    Figura 5. 4. Alinierea tabelelor

    Atributele WIDTH i HEIGHT

    Aceste atribute stabilesc limea (width) i nlimea (height) unui tabel. Valorile posibile ale acestor atribute pot fi date:

    n numere, reprezentnd limea i nlimea unui tabel n pixeli n procente fa de limea i nlimea ferestrei browser-ului

    Un exemplu de dimensionare a unui tabel este dat mai jos: a11a12 a21a22

    52

  • Figura 5. 5. Atributele width i height Atributul CELLSPACING

    Acest atribut definete spaiul dintre celule. Valorile acestui atribut se pot da n pixeli sau n procente fa de dimensiunea blocului printe. Valoarea implicit este 0 pentru tabelele fr caroiaje i 2 pentru cele cu caroiaj.

    Atributul CELLPADDING

    Acest atribut definete spaiul lsat ntre marginea celulei i informaia din celul (text, imagine etc). Valoarea implicit este 0. Valorile atributului pot fi date n numere (ce reprezint distana n pixeli) sau n procente.

    n exemplul de mai jos sunt utilizate aceste atribute. a11a12a13 a21a22a23 a31a32a33

    Figura 5. 6. Atributele elementului TABLE

    53

  • Atributele HSPACE i VSPACE

    Aceste atribute asigur distana de la tabel la celelalte componente din pagin, pe orizontal (hspace) i pe vertical (vspace). Aceste atribute nu sunt valabile n Internet Explorer. Valorile acestor atribute sunt date n pixeli. Pentru exemplificare s-a folosit browser-ul MozillaFirefox:

    Acesta este un text inaintea tabelului. Acesta este un text inaintea tabelului. Acesta este un text inaintea tabelului. Acesta este un text inaintea tabelului. Acesta este un text inaintea tabelului. a11a12a13 a21a22a23 a31a32a33 Acesta este un text dupa tabel. Tabelul de mai jos va avea spatii albe in jurul lui. Acesta este un text dupa tabel. Tabelul de mai jos va avea spatii albe in jurul lui. Acesta este un text dupa tabel. Tabelul de mai jos va avea spatii albe in jurul lui.

    Figura 5. 7. Atributele hspace i vspace

    Atributul BGCOLOR Acest atribut stabilete culoarea de fundal pentru toate celulele. Valorile

    acestui atribut sunt nume de culori sau secven RGB. Observaie! Majoritatea atributelor elementului sunt atribute i ale

    elementelor i . Prioritatea unui atribut (de exemplu, align) este

    54

  • urmtoarea: a elementului , a elementului i, n final, a elementului .

    5.2.1. Elementul TH

    n cadrul unui tabel se poate nlocui eticheta cu eticheta pentru a specifica antete de coloane i de linii. Elementul este aproape identic cu , cu dou excepii: dac celula conine text, el este afiat aldin (bold) i este centrat n celul.

    n exemplul de mai jos se red un tabel cu antet de linie i de coloan. Beneficii 2006 Semestrul I Semestrul II Bucuresti 100000 euro 250000 euro Iasi 200000 euro 300000 euro

    Figura 5. 8. Elementul TH

    5.2.2. Elementul CAPTION Pentru a aduga un nume unui tabel se folosesc tag-urile i

    , care trebuie s se gseasc imediat dup . Elementul CAPTION are un singur atribut, align, care precizeaz alinierea titlului fa de tabel i poate avea valorile: top (implicit), bottom, left i right astfel:

    55

  • n exemplul de mai sus adugm o etichet tabelului Vanzari Beneficii 2005 Semestrul I Semestrul II Bucuresti 100000 euro 250000 euro Iasi 200000 euro 300000 euro

    Figura 5.9. Elementul Caption

    5.3. Atributele elementului TR

    Aa cum s-a precizat i la nceputul capitolului, elementul TR descrie liniile unui tabel. S-a precizat de asemenea c eticheta poate s nu aib perechea de nchidere , descrierea unei linii terminndu-se cnd se ntlnete un nou element . Atributele elementului TR schimb parametrii predestinai de descriere a liniilor unui tabel, aa cum atributele elementului TABLE schimb aspectul de afiare a unui tabel. Atributele elementului TR se scriu n eticheta i sunt:

    56

  • align aliniaz orizontal coninutul tuturor celulelor unei linii. Valorile posibile sunt: left (aliniere implicit), right, center sau justify

    valign specific alinierea pe vertical pentru toate celulele dintr-o linie. Valorile posibile sunt: top (implicit), middle (centru) i bottom (jos)

    bgcolor culoare de fond pentru toate celulele unei linii. Are aceleai valori ca i atributul bgcolor pentru TABLE

    Observaii!

    Toate atributele liniei le gsim i n lista atributelor pentru TABLE Atributul align pentru TABLE aliniaz tabelul pe orizontal, n timp ce

    atributul align al elementului TR aliniaz pe orizontal coninutul celulelor unei linii.

    Atributul bgcolor al lui TABLE se refer la culoarea de fond a tabelului, n timp ce atributul bgcolor al lui TR se refer la culoarea de fond a celulelor dintr-o linie.

    Atributele de linie sunt prioritare celor de tabel. Un exemplu care utilizeaz atributele de linie:

    Prescurtarea HyperText Markup Language HTML Limbaj Pagini

    Figura 5. 10. Atributele elementului TR

    57

  • 5.4. Atributele elementelor TD i TH Elementele TD i TH descriu celulele unui tabel. Diferena dintre aceste

    elemente este aceea c, n cazul utilizrii elementului TH, coninutul celulei, dac acesta este text, este scris aldin. Atributele de celul se scriu n eticheta , sunt prioritare celor de linie (TR) i celor de tabele (TABLE) i sunt:

    Atributele WIDTH i HEIGHT

    Aceti parametrii indic limea (width) i nlimea (height) unei celule, dar au efect i pentru celelalte celule, pentru ca tabelul s fie aliniat (s aib forma dreptunghiular). Valorile acestor parametrii se pot da n numere ntregi pozitive ce reprezint limea, respectiv nlimea celulei n pixeli, sau n procente. De exemplu: prescurtarea textului HyperText Markup Language HTML Limbaj Sigla

    Figura 5. 11. Atributele WIDTH i HEIGHT

    58

  • Atributele align i valign

    Aceste atribute stabilesc alinierea pe orizontal (align) i pe vertical (valign) a textului dintr-o celul. Au aceleai valori ca i atributele cu aceleai nume de la nivel de linie i tabel, dar sunt prioritare fa de alinierea la nivel de linie i de tabel.

    Atributele COLSPAN i ROWSPAN

    Un tabel este un caroiaj n form dreptunghiular, format din linii i coloane. Coninutul unei celule poate s se extind pe mai multe uniti de tabel (celule) adiacente, dac este nevoie s adugm, de exemplu, antete pentru tabel.

    COLSPAN=nr insereaz n dreapta celulei un numr de nr-1 celule al cror coninut este vid sau poate conine valoarea celulei care are acest parametru.

    ROWSPAN=nr insereaz pe nr-1 linii de pe aceeai coloan cte o celul a crei coninut este vid sau poate conine valoarea celulei care are acest parametru.

    n exemplul din figura de mai jos, introducem aceste atribute

    a11a12a13 a21a22 a31a32a33

    59

    a pstra forma dreptunghiular.

    order=3

    a12a13

    HTML> la o celul din linia a doua i coninutul celulei 22 se

    aliniaz

    /HEAD>

    Dac celula 2 din linia a doua conine atributul colspan=2 nseamn c se va insera n linia a 2 o celul vid (2-1), ceea ce va face ca tabelul s se redimensioneze la 3 linii i 4 coloane pentru a11a21a22a31a32a33

  • Figura 5. 12. Atributul COLSPAN

    olosirea atributului de celul

    rowspa

    /HEAD>

    order=3 bordercolor=blue>

    2a23

    cu coninut a33 tabelul va avea dimensiunea iniial.

    rder=3

    12a13

    >a23

    La adugarea celulelor vide, browser-ele nu afieaz cadre la aceste celule. Pentru a

    bordercolor=blue> a11a21a22a31a32a33

  • a11a12a13 a21a23 a31&nbspa33 Figura 5. 14. Celule vide

    Un alt exemplu mai complet de utilizare a celor dou atribute va fi dat mai jos:

    atributele colspan si rowspan a11a21 a31 a12 a13 a14a23 a24 a33 a34 a22 a32 a41 a42 a43 a44

    Figura 5. 15 Atributele colspan i rowspan

    Atributul NOWRAP

    Pentru a afia coninutul unei celule pe un singur rnd se utilizeaz atributul NOWRAP. n cazul c textul depete dimensiunea celulei, apare bara de defilare pe orizontal, ca n exemplul de mai jos.

    61

  • XHTML Extensible HyperText MarkupLanguage Sigla Limbaj

    Figura 5. 16. Atributul NOWRAP al elementului TD sau TH

    5.5. Gruparea liniilor i coloanelor unui tabel 5.5.1. Gruparea liniilor

    Liniile unui tabel pot fi mprite n 3 categorii i anume: Linii de antet Linii de corp Linii de final

    Astfel, coninutul unui tabel se mparte n 3 seciuni cuprinse ntre etichetele:

    ... marcheaz liniile de antet

  • 63

    Fiecare bloc ... poate conine numai cte un bloc de seciune

    Etichetele de sfrit ,, sunt opionale. Eticheta i trebuie s apar dup i

    nainte de . Browser-ul poate afia liniile de final nainte ca liniile corpului s conin datele care se ncarc.

    Atributele pentru aceste elemente se aplic pentru toate liniile care cuprind blocurile, n lipsa altor formatri, i acestea sunt: align, valign, bgcolor.

    Fiecare din aceste elemente conin etichetele i obinuite.

    Structura unui tabel care utilizeaz facilitatea de grupare de linii va fi: ... . .

    n exemplul din figura 5.9, se grupeaz liniile n blocuri de antet, subsol i corp de tabel:

    Vnzri Beneficiul pe anul 2006 Judet Semestrul I Semestrul II TOTAL 30000 ron 55000 ron

  • Figura 5. 17. Gruparea liniilor

    5.5.2. Gruparea coloanelor

    Pentru a formata coloanele unui tabel (formatarea liniilor se poate face cu ajutorul atributelor lui TR sau TD, aa cum s-a artat mai sus), acestea se pot grupa cu ajutorul elementului .

    n blocul se introduc elemente care definesc fiecare coloan din grup. Aceste elemente au atributele:

    align indic alinierea pe orizontal a coninutului coloanelor grupate i poate avea valorile: left (implicit), right, center i justify

    span indic numrul coloanelor care se grupeaz valign indic alinierea pe vertical a coninutului coloanelor grupate i

    poate avea valorile: top, middle i bottom width indic limea coloanelor i poate avea ca valori procente sau

    numere care indic numrul de pixeli bgcolor indic culoarea de fond a coloanelor grupate

    NOT! Nu este necesar eticheta n cazul n care nu se grupeaz

    mai multe coloane, atributele de formatare pentru o coloan se pot da n eticheta .

    n exemplul de mai jos se observ gruparea coloanelor n vederea formatrii:

    primele dou coloane au aceeai formatare (span=2): grosimea 200, centrat pe mijloc att pe orizontal, ct i pe vertical, fundal galben

    a treia coloan va avea alinierea pe vertical top, pe orizontal la dreapta i fundalul cyan

    64

  • POP ANA 20 ani ENE DAN19 ani MANEA ION 21 ani

    Figura 5. 18. Elementul COLGROUP

    65

  • 66

    6. Imagini n capitolele precedente s-au prezentat elementele de baz pentru realizarea

    paginilor Web. n acest capitol se descrie cum s mpodobim paginile cu imagini grafice

    sugestive. Aceste imagini pot fi preluate din reeaua Internet, pot fi desene realizate cu diverse programe grafice sau pot fi fotografii scanate. Imaginile pot folosi chiar ca referine hipertext, aa cum se va arta n capitolul urmtor.

    Imaginile pot fi descrcate de la adrese absolute sau relative. Adresele URL (Uniform Resource Locator) reprezint standarde de identificare a resurselor (de exemplu, fiiere) i pot fi adrese URL absolute i relative.

    Adrese URL absolute

    Adresele absolute identific locaia unui fiier imagine de pe Internet sau alte calculatoare conectate la Internet i au sintaxa:

    protocol/nume_calculator/cale/nume_fiier Un exemplu de adres URL absolut: http://www.spiruharet.ro/images/universitatea.jpg unde htpp:// este protocolul Internet utilizat www.spiruharet.ro este numele calculatorului images este calea pn la fiierul imagine dorit universitatea.jpg este fiierul imagine a Universitii Spiru Haret

    Adrese URL relative

    O adres relativ identific locaia unei imagini, descriind o cale relativ la directorul curent unde se afl fiierul imagine. Adresele relative se refer la localizarea fiierului imagine de pe calculatorul personal i are sintaxa: cale/nume_fiier . Referirea la:

    directorul printe se poate face prin ../ directorul rdcin se poate face prin / Un exemplu de adres URL relativ: /../../../friend.jpg sau se mai poate scrie c:/windows/web/wallpaper/friend.jpg

  • 67

    Exemple de utilizare a adreselor URL absolute i relative vor fi date n exemplele urmtoare.

    Exist numeroase formate grafice, dar cele mai rspndite sunt: GIF (Graphics Interchange Format) introdus de Compuserve JPEG (Joint Photographic Expert Group) PNG (Portable Network Graphic Format Grafic portabil n reea)

    Aceste formate sunt dependente de platform. Imaginile grafice sunt construite din pixeli, care sunt puncte distincte de informaie de imagine. Fiecare pixel necesit un bit de culoare. Principalele caracteristici ale formatelor de imagine sunt: numrul de culori, compresia, transparena, ntreeserea i animaia.

    Asemnrile i deosebirile dintre cele trei formate grafice sunt: Imaginile GIF pot utiliza doar 256 de culori, avnd nevoie de 8 bii, n

    timp ce formatele JPEG i PNG pot utiliza milioane de culori, avnd 24 de bii de culoare, respectiv 32 de bii /pixeli de culoare. Ceea ce face formatul GIF att de utilizat nu este numai paleta mic de culori (256), dar i posibilitatea reducerii numrului de culori, astfel, dac este nevoie doar de 2 culori, se utilizeaz numai un bit, ceea ce reduce dimensiunea fiierului de 8 ori.

    Toate aceste trei formate grafice pot comprima imaginea pentru a reduce dimensiunile fiierelor. Comprimarea se poate face, n mod diferit, pentru fiecare format, i, din aceste motive, ele pot avea dimensiuni mai mici ntr-un format dect n altul.

    Formatele GIF i PNG admit culoarea transparent, n timp ce formatul JPEG nu admite transparena.

    Formatele GIF i PNG admit animaia, n timp ce, cu formatul JPEG, nu se poate obine animaie. De exemplu, pentru a obine animaie pentru imagini GIF se poate folosi pentru Windows pachetul GIF Construction Set, iar pentru Macintosh pachetul soft GIFBuilder.

    Toate cele trei formate accept ntreeserea. De exemplu, cnd se vizualizeaz o pagin web, se pot observa imaginile care apar linie cu linie, de la forma brut pn la redarea final, aceasta reprezint ntreeserea. Dei dimensiunea fiierelor crete cu pn la 10%, cu ajutorul acestei ntreeseri, vizitatorul poate s-i fac o imagine despre ceea ce se va descrca.

    Avnd n vedere cele cinci caracteristici ale formatelor de imagine, acestea pot fi recomandate:

    GIF pentru majoritatea imaginilor din web, butoane, panouri publicitare, desene etc., datorit dimensiunii mici a fiierelor.

    JPEG pentru fotografii, cnd se dorete s se redea ct mai exact culoarea real a imaginii.

    PNG pentru desene complexe, dar i pentru fotografii, acesta fiind formatul care mbin caracteristicile celor dou.

  • Unele imagini pot fi transformate n format GIF cu ajutorul unor programe freeware (gratuite) sau shareware (contra cost), dar calculatoarele moderne accept salvarea imaginilor direct n format GIF.

    6.1. Introducerea imaginilor n paginile Web

    Imaginile se introduc n pagini cu ajutorul tag-ului , care este un element inline, adic poate fi inserat oriunde n pagin.

    Sintaxa acestui element este: . n continuare este prezentat un exemplu de utilizare a elementului IMG: Hotelul TRUMP Taj Mahal de la Atlantic City

    Figura 6. 1. Atributul src al elementului IMG

    Pentru ca acest exemplu s poat fi executat, trebuie ca fiierul Taj_Mahal.jpg s fie n acelai folder cu pagina, deoarece nu s-a indicat nicio adres.

    6.2. Atributele Elementului IMG

    Atributele elementului IMG sunt: src, alt, align, border, height, width, hspace, vspace. n continuare vor fi descrise succint aceste atribute.

    Atributul SRC

    Atributul src este un atribut obligatoriu al elementului IMG, care identific fiierul ce conine imaginea care se dorete a fi inserat. Fiierele imagine pot avea

    68

  • extensia: .jpg, jpeg, png etc. Fiierul care c