Sunteți pe pagina 1din 333

FLORENTINA RODICA NICULESCU

PROIECTAREA PAGINILOR WEB HTML, CSS, JavaScript

Descrierea CIP a Bibliotecii Naţionale a României NICULESCU, FLORENTINA RODICA Proiectarea paginilor Web – HTML, CSS, JavaScript –. / Florentina Rodica Niculescu. – Bucureşti, Editura Fundaţiei România de Mâine, 2007

Bibliog.

ISBN: 978-973-725-822-9

004.738.52

004.43

HTML

004.43

CSS

004.43

JAVASCRIPT

004.272.23

© Editura Fundaţiei România de Mâine, 2007

UNIVERSITATEA SPIRU HARET

FLORENTINA RODICA NICULESCU

PROIECTAREA PAGINILOR WEB

– HTML, CSS, JavaScript –

EDITURA FUNDAŢIEI ROMÂNIA DE MÂINE Bucureşti, 2007

CUPRINS

Prefaţă………………………………………………………………………………

9

 

Partea I

HTML

1. Spaţiul 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 noţiuni 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 <PRE>

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 definiţii (Definition Lists)

45

5. Tabele

 

47

5.1. Generalităţi

47

5.2. Atributele etichetei <TABLE>

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.

Imagini

66

6.1. Introducerea imaginilor în paginile Web

68

6.2. Atributele Elementului IMG

68

7. Legături (Link-uri)

75

7.1. Elementul A

75

7.2. Legături către alte pagini Web

77

7.3. Legături cu imagini

78

7.4. Legături cu adrese URL relative

80

7.5. Legături către informaţii non Web

82

7.6. Legături către fişiere non HTML

83

7.7. Legături interne în cadrul unei pagini

84

7.8. Trimiterea automată a unui e-mail

88

7.9. Culorile legăturilor

89

8. Elementele de structură: HTML, HEAD şi BODY

90

8.1.

Blocul de antet <HEAD>…</HEAD>

90

8.1.1. Elementul TITLE

90

8.1.2. Elementul BASE

91

8.2.3. Elementul META

92

8.2. Blocul de

corp <BODY>…</BODY>

98

8.3. Blocul de comentarii

100

8.4. Blocul de centrare

100

9. Cadre

102

9.1. Bazele organizării cadrelor

102

9.2. Elementul

FRAMESET

105

9.3. Elementul

FRAME

106

9.4. Cadre destinaţie

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. Hărţi de imagine

131

11.1. Definirea hărţilor imagine pe server

131

11.2. Definirea unei hărţi imagine la client

132

11.3. Programul MAP THIS

136

12. Facilităţi suplimentare Multimedia ………………………………………… 142

12.1. Multipurpose Internet Mail Extensions (MIME) ……………………… 142

143

12.2.1. Plug-in – programe de completare ……………………………… 143

12.2.2. ActiveX …………………………………………………………. 144

145

12.4. Elementul MARQUEE ………………………………………………… 150

12.2. Aplicaţii Plug-in şi ActiveX …………………………………………

12.3. Elemente OBJECT şi PARAM ………………………………………

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 diferiţi 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 proprietăţi în CSS

173

14.1. Casete în CSS

173

14.2. Fonturi în CSS

174

14.3. Proprietăţi pentru TEXT

177

14.4. Proprietăţi

pentru padding

180

14.5. Proprietăţi pentru bordură

182

14.6. Proprietăţi pentru partea margin

185

14.7. Proprietăţi de culoare pentru casete

186

15. Poziţionarea 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 poziţionate

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. Instrucţiuni şi Funcţii în JavaScript

230

17.1.

Instrucţiuni

230

17.1.1. Instrucţiuni de decizie

230

17.1.2. Instrucţiuni de ciclare

238

17.2.

Funcţii în Java Script

245

 

17.2.1. Definirea şi apelarea unei funcţii

245

17.2.2. Domeniul de valabilitate a variabilelor

247

17.2.3. Parametri

250

17.2.4. Funcţii 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. Interacţiune JavaScript – HTML

276

19.1. Legătura între JavaScript şi HTML

277

19.2. Funcţiile

setTimeout() si clearTimeout()

278

19.3. Elementul <FORM> î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. Evidenţierea selecţiei căsuţelor de validare, utilizând JavaScript

287

19.3.5. Listele de opţiuni schimbate dinamic cu ajutorul butoanelor radio, folosind JavaScript

288

19.3.6. Trimiterea unui formular, utilizând evenimentul onsubmit

290

19.3.7. Activarea, Dezactivarea, Citirea unor elemente realizate cu funcţii 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 animaţii

298

20. Elemente avansate JavaScript

300

20.1. Legătura î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. Proprietăţi de culoare ale obiectului document

312

Anexe ANEXA A – Culori

317

ANEXA B – Caractere în HTML

321

ANEXA C CSS – Specificaţii de stil

325

Bibliografie selectivă

331

Prefaţă

Cartea Proiectarea paginilor Web – HTML, CSS, JavaScript – îşi propune să fie o lucrare de bază pentru însuşirea limbajelor de marcare HTML, de stiluri CSS şi de scriptare JavaScript, necesare realizării 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 Universităţii Spiru Haret, cartea oferă coduri sursă şi capturi de ecran pentru un număr 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 părţi ş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ă realizăm propriile documente multimedia atractive în spaţiul World– Wide Web, cu ajutorul browserelor Internet Explorer, Netscape Navigator, Mozzila Firefox, Opera etc. Partea a doua este dedicată tratării stilurilor. CSS este un acronim pentru Cascading Style Sheets – (Foi de stil în cascadă) şi constituie un instrument modern, care ajută proiectanţii de site-uri să îşi îmbunătăţească aspectul paginilor. CSS pune la dispoziţie peste 100 de proprietăţi, fiecare având un set de valori care se pot stabili elementelor HTML, în vederea transformării 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ă proiectăm 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 decât HTML, introducând în pagini componenta dinamică, JavaScript are şi unele limite, de exemplu nu poate scrie şi citi fişiere, nu poate scrie aplicaţii pe parte de server etc.

Anexa cuprinde trei tabele: culorile, entităţile folosite în web şi, respectiv, proprietăţile CSS şi valorile lor posibile. Această carte se adresează, în primul rând, studenţilor de la specializările de informatică din Facultăţile de Matematică Informatică din ţară. Cartea se adresează, de asemenea, tuturor celor interesaţi de crearea unor site-uri Web atractive şi interactive, utilizând resurse multimedia. Îmi exprim, anticipat, gratitudinea pentru toate sugestiile pe care le voi primi din partea cititorilor pe adresa de e-mail: rodicaniculescu@gmail.com

PARTEA I

HTML

1. Spaţiul World Wide Web

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

paginilor Web. Pornind de la descrierea modului în care referinţele pot contribui la organizarea informaţiei se continuă cu prezentarea conceptelor de multimedia, de protocol de transfer de informaţii, de programe de navigare, de adrese web şi de realizare de site-uri. Tehnologia de bază a spaţiului World Wide Web a fost creată de un institut de cercetări pentru fizica energiilor înalte din Elveţia, CERN. Tim Berners-Lee şi echipa sa de la CERN a creat în 1994 un Consorţiu Web, care se ocupa cu elaborarea şi dezvoltarea standardelor pentru Web. Membrii consorţiului, atunci când au început să creeze un mecanism pentru identificarea unică a informaţiei din spaţiul de date, au înţeles necesitatea elaborării unei scheme de legături informaţionale Web, care să includă o mare varietate de servicii internet, rezultând astfel adresele URL (Uniform Resource Locator – Descriptor Uniform de Resurse). Pentru a înţelege World Wide Web trebuie să înţelegem modul în care este organizată informaţia în mediile tipărite.

Medii liniare multimedia

Transmiterea informaţiei la distanţă se realizează cu anumite tehnologii în

funcţie de specificul datelor, ca de exemplu: tipărituri (cărţi, ziare etc.), servicii poştale, telefonie, radioul şi televiziunea şi, mai nou, internetul. Tehnologiile multimedia pot fi definite ca o totalitate de modalităţi de creare, stocare, regăsire, exploatare şi difuzare a documentelor sau aplicaţiilor compuse din mai multe elemente, ca de exemplu: text, grafică, imagini, animaţie, sunet etc. Componenta media a cuvântului multimedia specifică o formă de interacţiune umană în modelarea şi procesarea computerizată, iar componenta multi semnifică prezenţa simultană în acelaşi document sau aplicaţie a mai multor tipuri de media.

O aplicaţie multimedia trebuie să conţină cel puţin o media continuă (cu

durată măsurabilă de execuţie, precum: sunet, film, animaţie etc. ) şi cel puţin o media discretă (fără durată determinată de execuţie: text, fotografii, grafică etc.). Mediile liniare sunt acele documente în care informaţia are o organizare liniară: cărţile sunt citite de la începutul cărţii şi până la sfârşitul ei. La fel şi vizionarea unui film se face liniar. Dar, cu toată organizarea liniară, se poate sări de la o pagină a cărţii la alta sau se poate crea o strategie de navigare prin carte.

Hipermedii şi hipertext

Un hipermediu sau hipertext este un document alcătuit din text, care conţine informaţia propriu-zisă şi hiperlegături către alte secţiuni sau alte documente situate pe internet. Hipertextul poate fi considerat un mediu non-liniar, în care trebuie urmate anumite legături între noduri pentru a accesa informaţia. Nodurile sunt identificate, în mod unic, prin adresă. De exemplu, dacă dorim să obţinem 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ă obţinem informaţia dorită. După 1996 putem spune că s-a produs o explozie a spaţiului web, majoritatea instituţiilor, firmelor, organizaţiilor dorind să aibă propriile site-uri web. Pentru a reduce diferenţele 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 spaţiul www, bazate pe fibră optică sau comunicaţii prin satelit. Numărul tot mai mare de utilizatori şi volumul mare de date transferate prin internet a dus la găsirea de soluţii hard şi soft de compresie a datelor. Compresia datelor a dus la deteriorarea calităţii acestora. În urma unor cercetări s-au găsit algoritmi de compresie a datelor multimedia care să înlăture anumite frecvenţe fără a periclita acurateţea 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.

Animaţie / Sunet

AVI (Audio – Video Interleaved)

MPEG (Motion Picture Experts Group)

WMV (Windows Media Video)

QuickTime, Flash etc.

Prelucrări imagine – Photoshop

Prelucrări pe server – PHP

Lumi 3D – X3D (Extensible 3D)

Animaţie / validare date – JavaScript

Stiluri – CSS (Cascade Style Sheets)

Există două tipuri de codificare a informaţiei grafice:

Rasterizate (bmp, wbmp, jpeg, gif), constituite din matrice de pixeli; Vectoriale (svg, eps), alcătuite din elemente geometrice: linii, curbe, suprafeţe etc.

Imaginile vectoriale au avantajul de a putea fi redimensionate fără pierderea calităţii sau modificarea semnificativă a dimensiunii fişierului.

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 deţine calculatoare foarte performante numite servere, care sunt cuplate cu calculatoare din întreaga lume. Acestea pun la dispoziţia persoanei solicitante:

spaţiul pe hardul server-ului de cel puţin 10 Mb;

o adresă de internet, ca de exemplu: www.adresa-utilz.ro

În spaţiul alocat pe serverul provider-ului, persoana introduce fişiere, docu- mente multimedia scrise în HTML (HyperText Markup Language), dar şi alte docu- mente care provin din alte tipuri de servicii de publicare a informaţiilor 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 lansării, Internet Explorer era inferior browser-ului Netscape, dar au urmat alte versiuni cu îmbunătăţiri care l-au făcut să devină cel mai utilizat browser. Azi există programe de navigare, ca de exemplu, Opera, Mozilla Firefox, fiecare din ele având facilităţi suplimentare. În această carte, exemplele au fost făcute cu browser- ul Internet Explorer. Funcţiile principale ale browser-ului sunt:

permite vizitatorilor paginilor Web să introducă adresa URL a paginilor

respective;

transmite server-ului adresa şi acesta îi furnizează fişierul HTML care conţine codul paginii;

interpretează comenzile conţinute în codul HTML şi le afişează.

Obişnuim să numim pagină, conţinutul afişat al unui fişier HTML. Site-ul este un ansamblu format din: spaţiul pe hard, fişierele care sunt depuse pe acest spaţiu şi adresă. Fişierele dintr-un site nu sunt numai fişiere HTML. Pot exista toate tipurile de fişiere care se pot găsi pe spaţiul Web şi care au fost enumerate mai sus (imagini, animaţie, video, sunet etc). Fişierele de pe site pot fi grupate, ca şi cele de pe hardul calculatorului, în foldere. Când solicităm browser-ului încărcarea unui fişier de pe un site, acesta va solicita server-ului, pe care se afla alocat site-ul, furnizarea respectivului fişier.

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 informaţii de la server la calculator, şi invers. Există mai multe protocoale care se utilizează în transferul de informaţii multimedia. Cele mai folosite sunt:

HTTP (HyperText Transfer Protocol) este destinat exclusiv transferului de informaţii pe Web, adică transferului de fişiere de la server la calculatorul local pentru browser.

RTP (RealTime Transport Protocol) este folosit în transmiterea în timp real a informaţiilor multimedia, oferind servicii de transfer a mediilor audio şi video interactive. RTP oferă servicii de multiplicare, suportând transferul datelor la destinaţii multiple (multicast). Acest protocol este folosit mai ales de aplicaţiile de video-conferinţe şi pentru transmiterea pe Web a unor programe radio şi audio-video.

FTP (File Transfer Protocol) este destinat transferului de fişiere de la server la calculatorul local (download) şi invers, de la calculator la server (upload). În aceste operaţii 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 cuvântul cheie „FTP”. În această carte se va folosi protocolul ftp, WS-FTP95, care se poate căuta pe GOOGLE cu acest cuvânt cheie, sau poate fi download-at de la adresa:

Adresarea resurselor Web

Informaţiile sunt stocate în spaţiul 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 căruia se accesează un fişier al unui site şi are sintaxa: protocol://domeniu/cale

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 către 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 fişierului rădăcină (home page). Acest fişier este inclus în folder-ul rădăcină a site-ului şi, pentru majoritatea server-elor, acesta este denumit index.html. De exemplu, dacă tastăm http://www.adresa-utilizator.ro

sau numai www.adresa-utilizator.ro la un browser, se solicită acestuia să încarce şi să afişeze fişierul rădăcină 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 conţine două foldere, numite texte şi imagini, iar folderul texte are fişierele curs1.html, curs2.html… Pentru a accesa unul din aceste fişiere, vom scrie adresa URL www.adresa-

OBSERVAŢIE!

URL-urile nu pot conţine spaţii. 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 spaţiu, 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 întâlni în adresele URL:

Caracter

Cod zecimal

Cod hexazecimal

Codificare URL

Spaţiu

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 dispoziţia utilizatorilor site-uri contra cost, costuri care variază în funcţie de spaţiul acordat pe server şi de serviciile furnizate. Există şi firme care oferă site-uri gratuite, dar în acest caz, utilizatorul site- ului, cât şi toţi vizitatorii trebuie să accepte publicitatea. Pentru a obţine un site gratuit, solicitantul trebuie să aibe o adresă de e-mail, care poate fi obţinută tot gratuit la Yahoo, Hotmail, Gmail etc. Dacă se accesează site-ul de la adresele:

se va solicita clientului să completeze un formular cu numele dorit al site- ului, adresa de e-mail (una din cele pe care le aveţi), o parolă etc. Dacă datele au fost completate corect se poate obţine un site la adresa www.nume.freewebsites.com

La adresa de e-mail specificată în formular se va primi un mesaj prin care se cere să confirmăm î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 obţinut un site gratuit:

adresa: www.testweb.freewebsites.com parola: pagweb User ID: ana

Pentru a putea fi populat un site, trebuie transferate fişiere. Transferul fişierelor de la calculator la server şi invers se poate face (aşa cum s-a menţionat 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 afişează o fereastră cu 2 panel-uri. Panel-ul drept conţine fişierele din site şi panelul stâng conţine fişierele din directorul curent al calculatorului local. Transferul fişierelor din folder şi invers se face cu dublu click pe fişier sau prin Drag&Drop. Se pot crea directoare cu MkDir, se pot şterge fişiere cu Delete şi se poate schimba unitatea curentă de pe calculator. Pentru un transfer mai riguros se apasă butonul ASCII din fereastra afişată.

1.4. Crearea paginilor Web

Limbajul HTML se va prezenta în capitolele următoare. Pentru a scrie fişiere HTML (pagini web), urmăm paşii:

cu My Computer sau Explorer ne situăm în folderul unde dorim să se găsească fişierele

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

ne poziţionăm pe fişier şi din menu-ul contextual alegem comanda RENAME, pentru a schimba numele fişierului şi extensia în .html sau .htm. Extensia .htm este asociată browser-ului Internet Explorer, şi deci fişierul va avea icon-ul browser-ului

un dublu click pe fişier are ca efect lansarea browser-ului, care va afişa fişierul (conţinutul va fi vid)

din menu-ul principal din Internet Explorer, View->Source, NOTEPAD va încărca codul HTML al fişierului (conţinutul va fi vid)

scriem un text la alegere, de exemplu „se creează un site”, se salvează fişierul

în fereastra browser-ului se apasă butonul „Refresh”, prin care comandăm browser-ului să reîncarce fişierul care a suferit modificări

se trece iar în NOTEPAD (View-Source) pentru a continua să scriem fişierul HTML

OBSERVAŢIE!

Pentru a scrie codul unui fişier HTML, nu trebuie să fim conectaţi la

Internet.

Un fişier HTML poate conţine comentarii pentru a-l face mai uşor de parcurs. Comentariile pot apărea oriunde în fişier şi nu vor fi afişate de browser. Sintaxa comentariilor în HTML este:

<!-- comentariu 1 --> <!-- comentariu

pe mai multe linii-->

2. HTML – noţiuni de bază

În acest capitol se vor introduce noţiunile de bază ale Limbajului de Marcare Hipertext (Hypertext Markup Language – HTML) – Limbajul HTML conţine un set de coduri speciale care se inserează într-un text, pentru a adăuga informaţii despre formatare şi legături. HTML are la bază limbajul Generalizat Standard de Marcare (Standard Generalized Markup Language – SGML). Prin convenţie, toate informaţiile HTML încep cu o paranteză unghiulară deschisă, (“<”) şi se termină cu o paranteză unghiulară închisă (“>”), de exemplu <HTML>. 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ă fişierul 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 fişier cu extensia .html nu conţine niciun marcaj HTML, browser-ul folosit se străduieşte să redea cât mai corect informaţia. Să presupunem că am creat fişierul cerere.html, cu următorul conţinut:

Domnule Decan

Subsemnata, Ionescu Ana, va rog sa-mi eliberati o adeverinta, din care sa reiasa ca sunt studenta a facultăţii de Matematica-Informatica din Universitatea Bucuresti. Menţionez ca aceasta adeverinta imi este necesara la R.A.T.B.

05-01-2007

Ana Ionescu

Fişierul va fi afişat de browser, ca în figura de mai jos.

Figura 2. 1. Fi ş ierul cerere.html , f ă r ă marcaje Se observ

Figura 2. 1. Fişierul cerere.html, fără marcaje

Se observă că ceea ce afişează browser-ul nu seamănă 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 afişate de programele navigatoare. Multe din etichetele HTML sunt elemente de sine stătătoare, dar unele sunt etichete perechi, având etichete de început şi de sfârşit. Controlul de început se numeşte şi control (eticheta, tag sau marcaj) de deschidere şi se reprezintă prin “<…>”, şi cel de sfârşit se numeşte control de închidere şi se reprezintă prin “</…>”. Structura de bază a unei pagini web este redată în figura de mai jos. <HTML> <HEAD> </HEAD> <BODY> EXEMPLUL DE CREARE A UNEI PAGINI WEB </BODY> </HTML>

DE CREARE A UNEI PAGINI WEB </BODY> </HTML> Figura 2. 2. Structura de baz ă a

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

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: <TITLE> conţinut </TITLE>. Titlul apare pe bara de titlu a browser-ului utilizat. Blocul de titlu apare în interiorul blocului de antet <HEAD> </HEAD>. Conţinutul blocului de titlu va fi titlul paginii web respective şi deci folosirea lui va fi de folos pentru vizitatorii site-ului. Introducând în exemplul de mai sus un titlu, Internet Explorer va afişa:

<HTML> <HEAD> <TITLE> PRIMA PAGINA </TITLE> </HEAD> <BODY> EXEMPLUL DE CREARE A UNEI PAGINI WEB </BODY> </HTML>

DE CREARE A UNEI PAGINI WEB </BODY> </HTML> Figura 2. 3. Tag-ul <TITLE> O BSERVA Ţ

Figura 2. 3. Tag-ul <TITLE>

OBSERVAŢII!

Dacă unul din marcajele perechi nu este închis, sau lipseşte o paranteză unghiulară la unul din marcaje, atunci programul de navigare nu înţelege marcajul şi-l va afişa.

Dacă browser-ul afişează toate controalele de formatare în loc să le interpreteze se poate ca fişierul 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 <HTML>…</HTML> şi reprezintă tot documentul HTML.

Blocul antet este cuprins între controalele <HEAD>…</HEAD>.

între

Opţional,

antetul

poate

conţine

un

titlu

pentru

pagină,

cuprins

controalele <TITLE>…</TITLE>.

Blocul interior corp program poate conţine text şi /sau imagini şi este cuprins între controalele <BODY>…</BODY> .

Între parantezele unghiulare <> sau </> şi cuvintele cheie din interiorul lor nu este permis spaţiul (< HEAD > incorect).

HTML nu face distincţie î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 <P> şi <BR>.

Eticheta <P> Pentru a specifica saltul la un nou paragraf se utilizează marcajul (tag-ul) pereche <P> care are sintaxa:

<P atribute> conţinut paragraf </P>

Atributul align Paragrafele sunt aliniate implicit la stânga, aliniere care poate fi schimbată utilizând atributul align care poate lua una din valorile:

Left – paragraful este aliniat la stânga (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:

<P align=”valoare”> Ghilimelele sunt opţionale în HTML, dar obligatorii în XHTML. Exemplul de mai jos adaugă câteva etichete <P> fişierului ex1_2.html, redat în figura 2.1. <HTML> <HEAD> <TITLE> CERERE </TITLE> </HEAD> <P align=center> Domnule Decan

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

care să reiasă ca sunt studentă a facultăţii de Matematica-Informatica din Universitatea Bucuresti.

<P>

Menţionez ca aceasta adeverinta imi este necesara la R.A.T.B.

<P> 05-01-2007

<P align=right>

Ana Ionescu

Figura 2. 4. Tag-ul <P> Din analiza exemplului din figura 2.4 se observ ă :

Figura 2. 4. Tag-ul <P>

Din analiza exemplului din figura 2.4 se observă:

Browser-ul ignoră caracterele ENTER, TAB şi spaţiile multiple, doar primul spaţiu dintr-o serie va fi luat în consideraţie.

Paragrafele sunt separate printr-o linie vidă.

Sfârşitul de marcaj de paragraf </P> poate să lipsească, un nou paragraf fiind semnalat printr-un nou început de marcaj de paragraf <P>.

Un rând al unui paragraf are lăţimea ferestrei afişate de browser, în lipsa altei comenzi.

Eticheta <BR>

Pentru a trece la o nouă linie în HTML se foloseşte eticheta pereche <BR> (break). Dacă eticheta <P> are ca efect lansarea unei linii vide între paragrafe, în cazul etichetei <BR> nu se lasă o linie vidă între linii.

Elementul &nbsp

Dacă nu se doreşte trecerea unui cuvânt pe linia următoare (în cazul depăşirii dimensiunii ferestrei browser-ului), se foloseşte elementul &nbsp (non-breaking space). În cazul în care cuvântul dorit nu încape pe o linie, se trece pe linia următoare şi cuvântul precedent. În figura de mai jos este redat fişierul cerere.html, în care s-au utilizat etichetele <P> , <BR> şi elementul &nbsp. <HTML> <HEAD> <TITLE> CERERE </TITLE> </HEAD> <BODY> <P align=center> Domnule Decan

<P>

Subsemnata Ionescu Ana va rog sa-mi eliberati o adeverinta, din care sa reiasa ca sunt studenta a facultăţii de Matematica-Informatica din Universitatea Bucuresti. <BR> Menţionez ca aceasta adeverinta imi este necesara la R.A.T.B.<BR>

05-01-2007

<P align=right>

Ana&nbspIonescu

</BODY>

</HTML>

&nbsp Ionescu </BODY> </HTML> Figura 2. 5. Tag-urile <P> ş i <BR> 2.4.

Figura 2. 5. Tag-urile <P> şi <BR>

2.4. Elementul <PRE>

Dacă se doreşte inserarea unui bloc preformatat, adică introducerea unui text aşa cum este scris în sursa HTML, se foloseşte marcajul pereche <PRE>, care poate acţiona asupra unui grup de linii şi are sintaxa:

<PRE atribute>…</PRE> Folosind eticheta <PRE> se obţine formatarea dorită, dar materialul cuprins în blocul <PRE>…</PRE> apare cu fontul de tip monospaţiat. Într-un font monospaţiat, fiecare literă are exact aceeaşi lăţime.

OBSERVAŢII!

Se pot folosi în interiorul blocului <PRE>…</PRE>, elemente de formatare (B, I, U etc.), dar nu toate sunt suportate de browser.

Deoarece în interiorul etichetei <PRE> este permisă folosirea altor marcaje, caracterele speciale “<,>” trebuie convertite în entităţi.

Spaţiile sunt păstrate.

Etichetele HTML nu sunt ignorate de browser, ci interpretate.

Atributele etichetei <PRE> sunt:

width – reprezintă lungimea liniei şi poate fi un număr întreg pozitiv sau un procent

cols – determină dimensiunea pe orizontală (în caractere) a zonei vizibile; în caz în care rândul va depăşi această mărime, apare o bară de derulare pe orizontală.

wrap – determină cum sunt tratate caracterele CR/LF (întreruperi de rând). 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 rând pe altul în interiorul elementului, dar nu vor fi transmise decât caracterele CR/LF introduse de utilizator.

Hard sau physical – textul este trecut vizual (şi automat) de pe un rând pe altul şi sunt inserate automat secvenţele CR/LF.

Pentru ca browser-ul să afişeze fişierul cerere.html aşa cum a fost scris, s-a introdus eticheta <PRE> în exemplul din figura 2.4. <HTML> <HEAD> <TITLE> CERERE </TITLE> </HEAD> <BODY> <P align=center> Domnule Decan

</P> <PRE> Subsemnata Ionescu Ana va rog sa-mi eliberati o adeverinta, din care sa reiasa ca sunt studenta a facultăţii de Matematica-Informatica din Universitatea Bucuresti. Menţionez ca aceasta adeverinta imi este necesara la R.A.T.B.

05-01-2007

Ana Ionescu

</PRE> </BODY> </HTML>

Ana Ionescu </PRE> </BODY> </HTML> Figura 5. 1 Figura 2. 6. Tag-ul <PRE> în fi ş

Figura 5. 1 Figura 2. 6. Tag-ul <PRE> în fişierul cerere.html

Se observă din figura de mai sus fontul monospaţiat folosit de PRE, în comparaţie cu fontul normal folosit de <P> (la scrierea titlului)

Etichetele <NOBR> şi <WBR>

Etichetele <NOBR> şi <WBR> se folosesc la aranjarea textului şi sunt asemănătoare cu tag-ul <BR>, de salt la linie nouă. Eticheta <NOBR> Dacă se doreşte ca un text să fie scris pe un singur rând, indiferent de dimensiunea ferestrei, acesta se introduce în blocul <NOBR>…</NOBR> (nobreak). La întâlnirea acestei etichete browser-ul dezactivează modul automat de trecere pe linia următoare. Dacă textul este mai mare decât fereastra, în cazul folosirii tag-ului <NOBR>, apare o bară de derulare orizontală, care permite vizionarea întregului rând. Eticheta <WBR> Pentru a introduce o linie nouă, chiar dacă linia se află în interiorul lui NOBR, se foloseşte eticheta nepereche <WBR> (wrap break).

În exemplul de mai jos se ilustrează folosirea celor două etichete. <HTML> <HEAD> <TITLE> NOBR şi WBR </TITLE> </HEAD> <BODY> <P> <NOBR> În această carte se prezintă limbajele <WBR> HTML (HyperText Markup Language), XHTML (Extensible HyperText Markup Language), CSS (Cascade Style Sheets), JAVASCIPT </NOBR> </P> </BODY> </HTML>

</NOBR> </P> </BODY> </HTML> Figura 2. 7. Utilizarea elementelor NOBR ş i WBR 27

Figura 2. 7. Utilizarea elementelor NOBR şi WBR

2.5. Linii orizontale

Pentru o mai bună organizare vizuală a unui document, se foloseşte eticheta de riglă orizontală, <HR atribute>. Această etichetă poate fi plasată oriunde în document şi are ca efect producerea unei linii orizontale pe toată lăţimea 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 număr întreg pozitiv

printr-un procent, care este o fracţiune din lungimea paginii şi este un număr 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 următorul cod:

<HTML> <HEAD> <TITLE> Linii orizontale </TITLE> </HEAD> <BODY> Acesta este o linie fără opţiuni <HR> Acesta este o linie de lungime 500px, grosime 4px, culoare albastă şi aliniata centru <HR align=center width=500 size=4 color=blue> Acesta este o linie de lungime 50% din pagină, grosime 3px, culoare roşie şi aliniată la dreapta <HR align=right width=50% color=red size=3 noshade> </BODY> </HTML>

width=50% color=red size=3 noshade> </BODY> </HTML> Figura 2. 8. Utilizarea liniei orizontale 28

Figura 2. 8. Utilizarea liniei orizontale

3. Stiluri de text

În capitolul precedent s-au prezentat elementele principale ale redactării unui document HTML. În acest capitol se vor prezenta unele elemente legate de prezentarea unui text. Utilizând diferite stiluri fizice (caractere aldine, cursive, subliniate etc.), se pot evidenţia anumite cuvinte, fraze sau alte genuri de informaţii. Limbajul HTML permite să utilizăm stiluri logice de text pentru a preciza o destinaţie 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 afişat cu ajutorul parametrilor predefiniţi 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, îngroşat)

TT (monospaţiat)

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 afişa un text cu stilul italic sau cursive (înclinat), acesta se scrie între etichetele <I> şi </I>

Stilul B Pentru a afişa un text cu stilul aldin sau bold (îngroşat) acesta se scrie între etichetele <B> şi </B>.

Stilul TT Textul monospaţiat sau teleimprimator (teletype) este afişat cu ajutorul tag-urilor <TT> şi </TT> . Amintim că într-un stil monospaţiat (de exemplu: courier new) fiecare literă ocupă aceeaşi lăţime chiar dacă este mai îngustă (de exemplu: “i” comparativ cu “m”). Stilul logic <PRE> … </PRE> afişează textul cu font monospaţiat, dar acesta din urmă păstrează şi spaţiile dintre cuvinte şi linii. Stilul U Textul scris între tagurile <U> şi </U> va apărea subliniat (underline). Marcajul <U> este mai puţin utilizat deoarece unele versiuni ale navigatorului Netscape ignoră marcajul <U>. În documentele HTML care conţin legături către 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ă nuanţe de gri. Stilul INS Stilul INS are rolul de a comanda browser-ului ca textul scris între <INS> şi </INS> să fie subliniat, pentru a evidenţia că a fost ceva nou introdus. Exemplu de utilizare a acestor stiluri:

<HTML><HEAD> </HEAD> <BODY> <B> <TT> <U> Teorema.</U></B> </TT> <I> Într-un triunghi <INS>dreptunghic <INS> ipotenuza la patrat este egala cu suma patratelor catetelor </I> </BODY> </HTML>

catetelor </I> </BODY> </HTML> Figura 3. 1. Stilurile: B, I, U, INS Stilul S ş i

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

Stilul S şi STRIKE

Un text cuprins între etichetele <S> şi </S> sau <STRIKE> şi </STRIKE> este afişat tăiat cu o linie (barat), ca în exemplul de mai jos:

<HTML> <HEAD> </HEAD> <BODY> <S> Text barat </S> <BR> <STRIKE> Alt Text barat </STRIKE>

</BODY>

</HTML>

</BODY> </HTML> Figura 3. 2. Stilul S ş i Strike Stilul Big Acest stil este folosit

Figura 3. 2. Stilul S şi Strike

Stilul Big Acest stil este folosit pentru a comanda browser-ului ca în textul cuprins între tagurile <BIG> şi </BIG> să fie scris mai mare decât textul curent. Stilul SMALL Acest stil este folosit pentru a comanda browser-ului ca textul cuprins între tagurile <SMALL> şi </SMALL> să fie scris mai mic decât 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 <FONT>. Un exemplu de utilizare a acestor stiluri:

<HTML> <HEAD> </HEAD> <BODY> <B> <BIG> <BIG> BIG </BIG></BIG></B> <SMALL> si </SMALL> <B> <BIG> SMALL </BIG> </B> </BODY> </HTML>

</BIG> </B> </BODY> </HTML> Figura 3. 3. Stilurile BIG si SMALL Stilurile SUB si SUP

Figura 3. 3. Stilurile BIG si SMALL

Stilurile SUB si SUP Dacă lucrăm cu formulele matematice sau dacă este nevoie să utilizăm în paginile web indici superiori şi inferiori, HTML oferă două etichete pentru indici.

Textul dintre marcaje <SUB> … </SUB> va fi scris mai jos, ca un indice.

Textul dintre marcaje <SUP> …</SUP> va fi scris mai sus, ca o putere.

Elementele SUB şi SUP pot fi imbricate. În exemplul următor se exemplifică utilizarea stilurilor SUB şi SUP.

<HTML> <HEAD> </HEAD> <BODY> <B> <TT> <U> Teorema.</U></B> </TT> <I> Intr-un triunghi dreptunghic ipotenuza la patrat este egala cu suma patratelor catetelor</I>

(I<SUP>2</SUP>=C<SUB>1</SUB><SUP>2</SUP>+

C<SUB>2</SUB><SUP>2</SUP>)

<P> O formula cu indici:<BR> E=X<SUB>i</SUB> <SUP> (y<SUB>i </SUB> <SUP><small>2</small></SUP><BIG> )</BIG></SUP> </BODY> </HTML>

</BODY> </HTML> Figura 3. 4. Indici inferiori si superiori 3.2. Stiluri

Figura 3. 4. Indici inferiori si superiori

3.2. Stiluri logice de text

Stilurile fizice de text, descrise în paragraful anterior, sunt uşor de perceput. Limbajul HTML oferă, pe lângă stilurile fizice de text, discutate în paragraful anterior, şi stiluri logice de text care permit să se definească evidenţieri 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.

Titluri

Dacă pagina conţine mai multe secţiuni şi subsecţiuni, HTML permite introducerea a şase tipuri de titluri predefinite H1, H2, H3, H4, H5 şi H6. Fiecare titlu este scris între etichetele: <H1> … </H1>, <H2> … </H2>, <H3> … </H3>, <H4> … </H4>, <H5> … </H5> ,<H6> … </H6>. Titlul H1 este cel mai înalt şi îngroşat, iar titlul H6 este cel mai de jos şi este afişat cu cel mai mic şi mai subţire font. Toate titlurile:

sunt afişate pe un rând nou şi cu un spaţiu 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:

<HTML> <HEAD> </HEAD> <BODY> <H1 align=center> TITLUL H1 (cel mai mare si gros) </H1> <H2> TITLUL H2 </H2> <H3 align=right> TITLUL H3 </H3> <H4 align=justify> TITLUL H4 </H4> <H5 align=left> TITLUL H5 </H5> <H6 align=center> TITLUL H6 (cel mai mic si subtire) </H6> </BODY> </HTML>

si subtire) </H6> </BODY> </HTML> Figura 3. 5. Titluri Stilurile DIV ş i SPAN În HTML

Figura 3. 5. Titluri

Stilurile DIV şi SPAN

În HTML există elemente:

de nivel bloc, care sunt afişate la început de rând nou (<P>,<HR> etc.)

inline, care sunt afişate pe acelaşi rând (<B>, <I>, <TT>, <FONT> 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 ataşa un stil la un text sau la o porţiune dintr-un rând (în această secţiune vor fi exemplificate numai cu atribute independente de CSS).

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 afişeze “conţinut” atunci când 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 rând alb înainte şi după el, aşa cum produce elementul P

nu lasă textul aşa cum este scris, cum produce elementul PRE

ă textul a ş a cum este scris, cum produce elementul PRE Figura 3. 6. Stilurile

Figura 3. 6. Stilurile DIV si SPAN

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

<BLOCKQUOTE>…</BLOCKQUOTE>

element inline, iar elementul <BLOCKQUOTE> este de nivel bloc. Conţinutul blocului este afişat începând de pe rând nou, cu spaţiul înainte, după, la stânga şi la dreapta de citat, practic indentează textul, aşa cum reiese din exemplul următor:

Elementul <Q> este

şi <Q>…</Q>.

<HTML> <HEAD> </HEAD> <BODY> <B> <TT> CITAT</B> </TT> <BLOCKQUOTE>

"Omul nu este decat o trestie, cea mai fragila din natura, dar este o trestie ginditoare. " Blaise Pascal (1623-1662) </BLOCKQUOTE> </BODY> </HTML>

Figura 3.7. Elementul BLOCKQUOTE Stiluri logice de fraz ă Stilurile logice de fraz ă permit

Figura 3.7. Elementul BLOCKQUOTE

Stiluri logice de frază

Stilurile logice de frază permit să se adauge un înţeles specific unui font dintr-un document şi sunt implementate şi afişate diferit de către browser-e. În continuare descriem succint cele mai importante dintre aceste elemente:

<EM>…</EM> – pentru evidenţiere şi afişează textul cursiv (o altă modalitate de a scrie italic)

<STRONG>… </STRONG> – pentru evidenţiere şi afişează textul aldin (o altă modalitate de a scrie bold)

<DFN> …</DFN> – evidenţiază prima apariţie a unui concept, o definiţie

<CITE>… </CITE> – pentru inserarea unei referinţe la un document; textul este afişat aldin

<CODE> …</CODE> – pentru inserarea unui cod de program; textul scris cu font monospaţiat

<VAR>… </VAR> – pentru inserarea unor variabile într-un program; textul este scris cursiv

<SAMP> …</SAMP> pentru inserarea datelor de ieşire a unei operaţii; afişat ca font monospaţiat

<KBD>… </KBD> – pentru inserarea unei comenzi de calculator; afişat ca font monospaţiat

Exemplul următor utilizează câteva din stilurile logice introduse mai sus.

<HTML> <HEAD> </HEAD> <BODY> <DFN > CSS inseamna CASCADING STYLE SHEETS </DFN><BR> <EM> JavaScript este limbaj de scriptare </EM> <BR> Timpul si Data se afla tastind sub prompter comenzile <KBD> Time si Data </KBD><BR>

Se va primi raspuns de forma: <SAMP> Data curenta este: 10-01-07 </SAMP> <BR> O functie JavaScript:

<CODE> function complex (a,b) { this.real=a; this.imag=b} </CODE> <BR> Variabilele: <VAR> a si b </VAR> se transmit prin referinta </BR> Pentru mai multe informatii vizitati <CITE> www.w3.org</CITE><BR> <STRONG> Succes </STRONG> </BODY> </HTML>

Succes </ STRONG> </BODY> </HTML> Figura 3. 8. Stiluri logice de fraz ă 3.3. Fonturi Pentru

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 <FONT > şi </FONT>. Eticheta pereche de formatare <FONT > şi </FONT> este un element inline, adică se poate aplica oriunde în interiorul unui rând. 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 găsit, browser-ul va folosi tipul de literă

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

<FONT face=”Arial, Chicago”> Fonturi simple</FONT>

<FONT face=”Arial Narrow, Helvetica Narrow, New Courier”> Fonturi compuse </FONT>

size – indică dimensiunea fontului şi are sintaxa size=”dimensiunea”. Dimensiunea se poate exprima în două moduri:

absolut, unde dimensiunea este un număr î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 numărarea dimensiunii subtitlurilor, unde <H1> este cel mai mare, iar <H6> este cel mai mic

relativ, unde dimensiunea unui anumit text (literă, cuvânt, frază) este mărită cu o unitate faţă de textul din jurul lui; valori posibile:

Modificările relative nu pot reduce fontul sub

size=1 sau peste size=7. De exemplu, dacă la dimensiunea implicită 3 se adaugă 7 prin <font size=+7>, efectul este acelaşi dacă utilizăm <font size=7> sau <font size=+4>

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 (roşu), silver (argintiu), teal (verde închis), white (alb) si yellow (galben).

modul RGB – unde valoarea culorii este dată printr-un număr format din 6 cifre hexazecimale, câte două pentru fiecare culoare de bază din tripletul red (roşu), green (verde) şi blue (albastru) şi este precedată de caracterul #. În anexa A se găseşte lista completă a culorilor, date prin nume şi prin codul lor. Pentru cele mai folosite culori avem codurile:

+1,+2,…+7 si -1,-2,

,-7.

Black – “#000000”

White – “#FFFFFF”

Green – “#00FF00”

Blue – “#0000FF”

Red –

“#FF0000”

Elementul Basefont

Pentru a schimba fontul, chiar de la începutul paginii, se poate folosi tag-ul <BASEFONT atribute> care are aceleaşi atribute ca şi tag-ul <FONT>. Această etichetă formatează textul conform atributelor specificate, din locul unde apare şi până la sfârşitul documentului şi deci nu necesită eticheta de închidere. În

interiorul elementului BASEFONT se pot găsi alte elemente FONT pentru formarea unor secvenţe de text. Utilizarea fonturilor este exemplificată în continuare:

<HTML> <HEAD> </HEAD> <BODY> <BASEFONT size=3 face=Arial> <FONT face="Times New Roman" color="blue" size=7> Aplicarea fonturilor</FONT><BR> <FONT face="Courier " color="#00FF00" size=-2> acest text are dimensiune 5 si culoarea verde