HTML Prin Exemple

8/11/2019 HTML Prin Exemple

1/160

CuprinsCuprins

Introducere ....................................................................................................................... 6

Preliminarii Ce este World Wide Web? ..................................................................... 7

Lecia 1 Prima pagin Web ................................................................................11

Lecia 2 Culori, fonturi i margini.......................................................................15

Lecia 3 Stiluri pentru blocurile de text ..............................................................19

Lecia 4 Configurarea fonturilor .........................................................................24

Lecia 5 Blocuri de text .......................................................................................27

Lecia 6 Liste.......................................................................................................33

Lecia 7 Tabele ....................................................................................................39Lecia 8 Imagini ..................................................................................................51

Lecia 9 Documentarea unei pagini Web ..........................................................60

Lecia 10 Legturi .................................................................................................65

Lecia 11 Sunete i videoclipuri ...........................................................................75

Lecia 12 Hri de imagini .....................................................................................78

Lecia 13 Formulare..............................................................................................82

Lecia 14 Cadre .....................................................................................................95

Lecia 15 Stiluri .................................................................................................. 103

Lecia 16 Stiluri. Configurarea fonturilor........................................................... 113

Lecia 17 Stiluri. Setarea textului ....................................................................... 119

Lecia 18 Stiluri. Configurarea blocurilor de text .............................................. 130

Lecia 19 Straturi. Sintaxa CSS .......................................................................... 140

Lecia 20 Straturi. Sintaxa LAYER..................................................................... 150

Anexa A Crearea primei pagini Web ................................................................ 159

Anexa B Cutarea fiierelor imagine ................................................................ 160

Anexa C Hri de imagini .................................................................................. 161

Anexa D URL .................................................................................................... 162

Anexa E Nume de culori.................................................................................. 164

Cuprins


2/160

IntroducereIntroducere

Lucrarea HTML un manual prin exemple i propune s oferecititorului o introducere n programarea aplicaiilor care ruleaz pe

Internet.Cu toate c HTML nu este un limbaj de programare propriu-zis, el

constituie limbajul gazd n care sunt ncapsulate obiectele i aplicaiilepe Internet. Studierea acestui limbaj constituie astfel primul pas pentrucei care dezvolt aplicaii orientate pe Web.

Cartea prezint n detaliu elementele limbajului HTML i extindereaacestuia DHTML. Ea este structurat n 20 de capitole, ultimele 6 fiinddedicate limbajului DHTML.

n cadrul fiecrui capitol sunt analizate marcajele i atributele asociateacestora. Prezentarea teoretic a acestor noiuni este nsoit de exemplecomplete de fiiere surs i imagini care reflect vizualizarea lor ndiferite browsere.

Dei are forma unui manual introductiv n HTML, aceast lucrareconine peste 90% din elementele limbajului HTML, fiind scris dupdocumentaia de referin n domeniu.

Ea este util elevilor, studenilor, profesorilor i tuturor celor interesais cunoasc limbajul HTML, care a fcut posibil dezvoltarea exploziva Internetului n ultimii 10 ani.

Dorim succes celor care efectueaz primii pai n Internet prinintermediul acestei cri!

Bucureti, 30 decembrie 1999Autorul

Dedic aceast cartesoiei mele, Iulia.


3/160

PreliminariiPreliminarii

Ce este World Wide Web?Ce este World Wide Web?Inter-reele i Internet

n lume exist milioane de calculatoare.n aceste calculatoare sunt stocate informaii.Pentru a putea face schimb de informaii, calculatoarele sunt interconectate, formnd

reele de calculatoare.Multe dintre aceste reele de calculatoare sunt conectate ntre ele, formnd inter-reele

(reele de reele de calculatoare). O reea de reele se numete internet(net nseamn nlimba englez reea).

Cea mai mare inter-reea public (reea de reele de calculatoare cu acces public) estereeaua Internet.

World Wide WebExist mai multe metode de acces(servicii) la informaia stocat pe un calculator prin

intermediul reelei Internet:FTP(File Transfer Protocol)este serviciul pentru transferul fiierelor;Telneteste serviciul pentru accesul de la distan la resursele unui calculator;Electronic Maileste serviciul de mesagerie electronic;Newseste serviciul de tiri;World Wide Webeste o alt metod (serviciu) de acces la informaia stocat pe uncalculator aflat oriunde n lume.

World Wide Web(pe scurt WWW) nseamn n traducere ad-litteram pnz depianjen ntins n lumea ntreag.

Denumirea evideniaz caracterul planetar al schimbului de informaii prin intermediul

reelei Internet.

Tehnologia client-serverWorld Wide Web-ul utilizeaz tehnologia client-server,care const n (vezi figura

urmtoare):1. Un calculator (clien-tul) formuleaz o cerere.2. Cererea esteexpediat unui server.3. Cererea parcurge unmediupn la server.4. Serverul analizeaz

cererea, o execut,formuleaz rspunsulil expediaz clientului.5. Rspunsul parcurgemediulnapoi ctre client.6. Clientulrecepio-neaz rspunsul lacererea solicitat.


4/160

8

HTTP

Pentru a comunica ntre ele, dou calculatoare folosesc un sistem de reguli ce formeazunprotocol.Serviciul WWW utilizeaz ca protocol de comunicare ntre client i server HiperText

Transfer Protocol(HTTP), adic Protocolul de Transfer al Hipertextului.

HipertextHipertextuleste un text mbogit. El conine:

text obinuit;etichete pentru formatarea textului i ncapsularea altor tipuri de informaii (salturirapide ctre alte resurse de informaii, sunete, imagini,filmeetc).Hipertextul este stocat n fiiere avnd o extensie special: .htm sau .html.

HTMLUn fiier ce conine hipertext este scris ntr-un limbaj specific numit HiperText Markup

Language(HTML), adic Limbajul de Marcare a Hipertextului.HTML este un limbaj care permite inserarea de:

text;sunete, imagini ifilme;indicatoride prezentare a informaiei;legturi(link-uri) ctre alte pagini Web aflate oriunde n lume;aplicaii(programe JavaScript, Java, VRML etc.).

HostUn calculator din Internet se numete host(gazd).Pentru a fi identificat n mod unic, calculatorul primete un nume(o adres), de

exemplu, mishu.cnmv.ro

PacheteInformaia care circul ntre calculatoare interconectate este ncapsulat npachete.Un pachet conine:

adresa expeditoruluii adresa destinatarului;informaia; numele aplicaiei clientcare a formulat cererea i numele aplicaiei de pe servercareva primi cererea spre rezolvare.Pachetul este lansat n reeaua Internet.

TCP/IP

Reeaua Internet dispune de mijloace de dirijarea pachetelor astfel nct acestea sajung la destinaie. Un astfel de mijloc de dirijarea pachetelor este Internet Protocol(IP), adicProtocolul Internet.Reeaua Internet dispune de mijloace de coreciea erorilor de transmitere a pachetelor.

Un astfel de mijloc de corecie este Transfer Control Protocol(TCP), adic Protocolulde Control al Transferului.

HTML prin exemple


5/160

9Preliminarii Ce este World Wide Web?

Pagina Web

n orice calculator informaia este stocat n uniti numitefiiere.Aceste fiiere conin: text; programe; imagini; filme; sunete etc.Pentru WWW sunt importante anumite fiiere speciale, numite ipagini Web. Acestea

au extensia .htm sau .html.

BrowserPaginile Web sunt vizualizate pe calculatorul client prin intermediul unei aplicaii

speciale numite browser.

Browser-ul permite schimbarea paginii vizualizate prin intermediul: unei ferestre speciale, numit Addresss; meniului File, Open, Browse;legturilorafiate n pagina Web.Cele mai utilizate browsere sunt:

Netscape Communicator; Internet Explorer; HotJava.

Site WebO mulime organizat de pagini Web formeaz un site Web.n WWW, clientul solicit pagini Web de la un site Web.

httpdHiperText Transfer Protocol Demon(httpd)este o aplicaiecare se execut pe serverul

Webpentru a prelucra cererile de pagini Web recepionate de acesta de la clieni.

Home PageHome Page(pagina gazd) este o pagin din site-ul unei organizaii care:

l este n mod uzual prim pagin accesat din site;l este o pagin de prezentare a organizaiei;l ofer modul cel mai eficient de explorare a informaiilor aflate n site.

Server Web

Un server Webeste un calculator care adpostete un Site Webi care este capabil srspund la cereri de pagini Web din partea unui client.Pentru a putea rspunde permanent cererilor Web, un calculator trebuie s ruleze

permanent o aplicaie special: httpd.Cele mai ntlnite servere Web sunt:

Apache Server; Microsoft Web Server; Oracle Web Server.


6/160

10

URL

Un utilizator al serviciului WWW poate solicita vizualizarea prin intermediul browse-rului a unei pagini Web care poate fi localizat pe un calculator aflat oriunde n lume.O pagin Web este unic determinat prin adresa URLasociat.Uniform Resource Locator(URL)nseamn Identificator Universal al Resurselor n

Internet. Un exemplu de URL este: http: //www.cnmv.ro/index.htmllAdresa URL a paginii curente vizualizate de browser apare n fereastra Address.l Un URL precizeaz:metodade acces la pagin de exemplu: http;calculatorulpe care se afl de exemplu: www.cnmv.ro; numelepaginii de exemplu: index.html.

Avantajele serviciului World Wide WebPaginile Web au urmtoarele caracteristici:

l sunt multimedia, adic ele conin informaii sub form de text, imagini, sunete, filme etc;l sunt interactive, adic rspund la cererile utilizatorului;l sunt independente de platforma hardware i software, adic se vd la fel pe oricecalculator, avnd instalat orice sistem de operare i utiliznd orice browser.

Crearea unei pagini WebCrearea unei pagini Web presupune:

1. Editareafiierului HTML utiliznd: un editor de texte obinuit (Notepad, Wordpad, Word, WordPerfect etc.) un editor de texte dedicat (Netscape Composer, HotMetal etc.)

2. Salvareapaginii Web cu extensia .html sau .htm ntr-un site Web;3. Rezolvarea referinelorconinute n pagina Web (legturi, imagini, sunete, filme,

aplicaii Java etc.).Pagina Web astfel creat poate fi vizualizat prin intermediul unui browser.

HTML prin exemple


7/160

Lecia 1Lecia 1

Prima pagin WebPrima pagin WebCrearea unui document Web

Un document HTML are urmtorul ciclu de via:1. Editarea fiierului HTML cu ajutorul unui editor de texte (simplu sau dedicat).2. Salvarea fiierului editat folosind extensia .html3. Vizualizarea paginii cu ajutorul unui browser.

Prima paginExemplul urmtor prezint cea mai simpl pagin web.

Exemplul 1_1. Prima pagin

Prima pagina!

Tem:l Creai un fiier avnd coninutul prezentat anterior (adic Prima pagin!).l Salvai fiierul cu extensia .html (de exemplu e1_1.html).lncrcai fiierul n browser-ul favorit pentru a-l vizualiza.

Anexa Crearea primei pagini web cuprinde n detaliu etapele necesare pentru acrea prima pagin web pe un sistem Windows.

Elementele standard ale unui document HTMLDei documentul e1_1.htmleste perfect funcional, stilul n care a fost creat nu poate fi

considerat elegant. Exemplul 1_2 prezint o pagin html similar ca efect cu cea de laexemplul 1, dar conform cu standardele comunitilor internaionale de specialitate.

Exemplul 1_2. O pagin HTML standard

Prima pagina standard!

Salvai coninutul acestui exemplu ntr-un fiier cu numele e1_2.html,apoi vizualizaipagina.


8/160

12

Obervaii:l Un document HTML este o succesiune de blocuri.l Blocurile dintr-un document HTML pot fi imbricate (incluse unul n altul).l Un bloc este delimitat de simboluri speciale (marcaje sau tag-uri). Aceste simboluri speciale suntincluse ntre paranteze i transmit comenzi ctre browser pentru a afia pagina ntr-un anumitmod.l Unele blocuri prezint delimitator de sfrit de bloc, n timp ce pentru alte blocuri acest delimitatoreste opional sau chiar interzis (vezi Anexa Lista ordonat a etichetelor HTML).l Un document HTML standard const dintr-un bloc , care include alte dou sub-blocuri: i .l Blocul cuprinde coninutul propriu-zis al paginii HTML, adic ceea ce va fi afiat nfereastra browser-ului.l O etichet poate fi scris att cu litere mari, ct i cu litere mici.

Caracterele spaiu i tab, CR/LF ce apar ntre etichete sunt ignorate de ctre browser.

Astfel fiierul e1_2.html poate fi rescris fr a schimba coninutul afiat de ctrebrowser (salvai-l ca e1_2a.html, e1_2b.html, respectiv e1_2c.htmli testai).

Titlul unei pagini webPentru un stil mai elegant, se recomand ca fiecare pagin HTML s aib un titlu

(acesta nefiind obligatoriu). Acest lucru se realizeaz cu ajutorul unui bloc inserat n blocul . Salvai coninutul urmtor ca e1_3.html i testai-l.

Observaii:l Coninutul blocului (n cazul de fa textul: Acesta este titlul primei pagini) va aprea

n bara de titlu a ferestrei browser-ului.l Dac blocul lipsete ntr-o pagin HTML, atunci n bara de titlu a ferestrei browser-uluiva aprea numele fiierului (n cazul de fa, e1_3.html).

Prima pagina!

Prima pagina!

Prima Pagina!

HTML prin exemple

Exemplul 1_3. Titlul unei pagini Web

acesta este titlul primei paginiAcesta este continutul primei pagini!El va fi vizualizat de catre browser.


9/160

13

Sfritul de linie

S presupunem c dorim s introducem n pagina web (adic n ceea ce va afiabrowser-ul) mai multe linii. Dac vom crea fiierul e1_4.html sub forma:

atunci browser-ul va afia Prima linieA doua linieA treia linie, ntruct conform uneiobservaii anterioare, caracterele de tipul CR/LF sunt ignorate de browser. Trecerea pe olinie nou se face numai la o comand explicit, care trebuie s apar n pagina html.

Aceast comand este marcajul
(de la line break ntrerupere de linie). Pentru afunciona conform ateptrilor, fiierul e1_4.htmltrebuie modificat astfel:

Exemplul 1_4. Sfritul de linie

Acesta este titlul primei pagini

Prima linie
A doua linie
A treia linie

Blocuri preformatatePentru ca browser-ul s intrepreteze corect caracterele spaiu, tab i CR/LF ce apar n

cadrul unui text, acest text trebuie inclus ntr-un bloc , ca n exemplul 1_5:Salvai acest fiier ca e1_5.htmli ncrcai-l n browser pentru a-l vizualiza.Pentru a observa facilitile oferite de un bloc , testai exemplul

distractiv l_6.

Eliminai tag-urile i , salvai din nou fiierul i observai modificrile! Veiconstata c browser-ul va afia secvena (OO)\/||\/_||_ pe o singur linie.

Lecia 1 Prima pagin Web

Acesta este titlul primei paginiPrima linieA doua linieA treia linie


10/160

14

Observaii finale la lecia 1l Un document HTML are extensia .html sau .htm. El se numete i fiier surs.l Un browser ncarc un document HTML (un fiier surs), interpreteaz marcajeleconinute n document, iar rezultatul este afiat n fereastra browser-ului. Acest rezultat alinterpretrii se numete pagin web.l Un document conine marcaje (etichete sau tag-uri). Exist dou tipuri de etichete: de tip bloc (pereche), cu un tag ce delimiteaz nceputul blocului i un tag cedelimiteaz sfritul blocului (de exemplu i ;

singulare (de exemplu
).l O etichet este delimitat de parantezele .l O pagin HTML standard este format dintr-un bloc extern i doublocuri incluse: (antetul) i (corpul).l Trecerea la o linie nou se face cu ajutorul tag-ului
(break).lAfiarea ntocmai a coninutului unui bloc de text din fiierul surs se face prinincluderea acestui bloc ntre tag-urile i (preformatat).

HTML prin exemple

Exemplul 1_6. Un exemplu distractiv

acesta este titlul primei pagini(oo)

\/||\/_||_

acesta este titlul primei paginiPrima linieA doua linie indentata

A treia linie de doua oriindentata

Exemplul 1_5. Blocuri preformatate


11/160

Lecia 2Lecia 2

Culori, fonturi i marginiCulori, fonturi i marginin aceast lectie vom nva setrile de baz ale unei pagini Web: alegerea culorii de

fond, a culorii textului i alegerea dimensiunilor paginii.

Culoarea de fondAcest exemplu ne va arta cum s alegem culoarea de fond a paginii Web.O culoare poate fi precizat n dou moduri:

1. Printr-un nume de culoare. Sunt disponibile cel puin urmtoarele 16 nume de culori: aqua,black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white i

yellow. n Anexa G Nume de culori vei gsi o list a numelor de culori disponibile.2. Prin construcia #rrggbb unde r, g sau b sunt cifre hexazecimale i pot lua valorile: 0,

1, 2, 3, 4, 5, 6, 7, 8, 9, 0, a, A, b, B, c, C, d, D, e, E, f sau F; se pot defini astfel 65536 deculori. S-a folosit aici modelul de culoare RGB (Red, Green, Blue). Conform acestui model,o culoare se obine din amestecul a trei culori fundamentale: rou, verde i albastru.

Observaie:Este recomandat ca numele unei culori s fie inclus ntre ghilimele. Exemple: blue sau#0f4eA8.

Culoarea unei pagini se precizeaz prin intermediul unui atribut al etichetei .Atributele sunt necesare pentru a particulariza aciunea precizat de numele etichetei.

Aceste atribute apar n interiorul parantezelor ce delimiteaz eticheta dup sintaxa:.De exemplu, culoarea fondului paginii Web se stabilete cu atributul bgcolor al eti-

chetei , astfel: , unde culoarea se construiete dupmodelul precizat mai sus.

Pentru a realiza o pagin Web cu fondul de culoare galben, putem proceda ca nexemplul urmtor:

Exemplul 2_1Aceasta este o pagina web
cu fondul de culoare galbena.

Exemplul 2_1. Culoarea de fond

Culoarea textuluiAcest exemplu ilustreaz definirea culorii textului unei pagini Web.Acest lucru se face prin intermediul atributului text al etichetei , dup sintaxa:, unde culoare se precizeaz ca la exemplul 2_1. Pagina Web din

exemplul urmtor are textul de culoare roie.


12/160

16

Atribute multipleO etichet poate avea mai multe atribute. De exemplu, o etichet cu trei atribute arat astfel:.Urmtorul exemplu prezint modul de construire a unei pagini Web cu fondul de

culoare galben i textul de culoare roie.

Stabilirea caracteristicilor textului de bazTextul afiat este caracterizat de urmtoarele atribute:

l Mrime (size);l Culoare (color);l Font (style).

Acestea sunt atribute ale etichetei . Aceasta este o etichet singular (nuexist delimitator de sfrit de bloc).

Sintaxa utilizat esteunde:

l numrpoate fi 1, 2, 3, 4, 5, 6 sau 7; (1 pentru fontul cel mai mic i 7 pentru fontul celmai mare);l culoareeste o culoare precizat prin nume sau printr-o construcie RGB (vezi primulparagraf);lfontpoate fi un font generic ca serif, sans serif, cursive, monospace, fantasy sauun font specific instalat pe calculatorul clientului, ca Times New Roman, Helvetica sauArial. Se accept ca valoare i o list de fonturi separate prin virgul, de exemplu:Times Roman, serif, monospace.

Exemplul 2_3. Text rou pe fond galben

Exemplul 2_3Aceasta este o pagina web cu fondulde culoare galbena
si textul de culoare rosie.

HTML prin exemple

Exemplul 2_2. Culoarea textului

Exemplul 2_2Aceasta este o pagina web cu textulde culoare rosie.


13/160

17

Observaii:l Domeniul de valabilitate al caracteristicilor precizate de aceast etichet se ntinde de la locul n careapare eticheta pn la sfritul paginii sau pn la urmtoarea etichet .l Dac eticheta lipsete, atunci textul din pagina Web are atribute prestabilite sau atributeprecizate de browserul utilizat.

Atributele prestabilite sunt: size = 3, color = black i style = Times New Roman.n exemplul urmtor, textul paginii Web are la nceput atribute prestabilite, dup care

valorile acestora sunt nlocuite cu 7 green, Arial.

Stabilirea marginilor paginii WebPoziionarea coninutului paginii Web fa de marginile ferestrei browserului se poate

face cu ajutorul a dou atribute ale etichetei :l leftmargin (stabilete distana dintre marginea din stnga a ferestrei browserului imarginea din stnga a coninutului paginii);l topmargin (stabilete distana dintre marginea de sus a ferestrei browserului i margineade sus a coninutului paginii).

Observaie:Ambele atribute pot primii urmtoarele valori :l un numr ntreg pozitiv reprezentnd o distan msurat n pixeli;l un procent din limea, respectiv nlimea ferestrei browserului.

Exemplul 2_4. Configurarea textului de baz

Exemplul 2_4Prima parte a prezentei pagini; textul

are atribute implicite.
A doua parte a paginii; textul estescris cu fontul Arial, culoareaverde si marimea 7.

Exemplul 2_5. Stabilirea marginilor

Exemplul 2_5Prima parte a prezentei pagini;textul are atribute implicite.

A doua parte a paginii; textul estescris cu fontul Arial, culoareaverde si marimea 7.

Lecia 2 Culori, fonturi i margini


14/160

18

Recapitulare

Acesta este un exemplu recapitulativ privind coninutul leciei 2.Explicaiile necesare le vei gsi chiar n coninutul paginii Web pe care o construii.Succes!

Exemplul 2_6. Un exemplu recapitulativ

Exemplul 2_6Aceasta pagina are fondul de culoare cyan si textul de culoare alba.
Textul are marimea implicita 3, iar fontul este cel implicit (posibilTimesRoman).
In urmatoarele linii se schimba atributele de baza ale textului.
Text scris cu fontul TimesRoman , marimea 1, culoarea rosie.
Text scris cu fontul implicit, marimea 3, culoarea verde.
Text scris cu fontul implicit, marimea 5, culoarea implicita (neagra).
Text scris cu fontul Courier, marimea 7, culoarea magenta.

HTML prin exemple


15/160

Lecia 3Lecia 3

Stiluri pentru blocurile de textStiluri pentru blocurile de textAceast lecie prezint posibilitile oferite de limbajul HTML privind alegerea unui stil

pentru caracterele ce formeaz textul paginii Web.

Caractere aldinePentru ca un bloc de text s apar n pagin evideniat (cu caractere aldine), trebuie

inclus ntre delimitatorii i (b vine de la bold = ndrzne).

Caractere mritePentru ca un text s fie scris cu caractere mai mari cu o unitate dect cele curente,

acesta trebuie inclus ntr-un bloc delimitat de etichetele i .

Observaie:Blocurile pot fi imbricate.

Exemplul 3_1. Caractere aldine

Exemplul 3_1Aceasta linie este formata din textnormal.
Aceasta linie este scrisa inintregime cu caractere ingrosate.In aceasta linie numai cuvantulgros este ingrosat.

Exemplul 3_2. Caractere mrite

Aceasta linie este scrisa inintregime cu caractere marite cu ounitate.Normal marit mai maresi mai mare.

Caractere micoratePentru ca un text s fie scris cu caractere mai mici cu o unitate dect cele curente,acesta trebuie inclus ntr-un bloc delimitat de etichetele i .

Observaie:Blocurile pot fi imbricate.


16/160

20

Exemplul 3_3. Caractere micorate

Caractere cursive

Pentru ca un text s fie scris cu caractere cursive, acesta trebuie inclus ntr-un blocdelimitat de etichetele i (i vine de la italic).

Aceasta linie este scrisa inintregime cu caractere micsorate cu ounitate.Normal mai micsi maimic.
Normal mai mic normalmai mare

Caractere indice i exponentPentru a insera secvene de text aliniate ca indice (sub-script) sau ca exponent

(super-script), aceste fragmente trebuie delimitate de etichetele ..., respectiv....

Urmtorul exemplu arat cum pot fi introduse secvene de text ca indice sau exponent.Pentru a exemplifica mai bine, n rndul al treilea al paginii Web vom gsi urmtorul textspecific limbajului matematic: F

(y)= (x

1+x

2)2-y3. Urmrii cu atenie urmtorul fiier surs:

Exemplul 3_5. Caractere indice i exponent.


17/160

21

Caractere subliniate i caractere secionate

n exemplul urmtor sunt utilizate dou etichete de tip bloc (pereche):l i pentru a insera un bloc de caractere subliniate;l i sau i pentru a insera un bloc de caractere secionate lamijloc cu o linie orizontal.

Exemplul 3_6. Caractere subliniate si caractere sectionate

Aceasta linie este inintregime sectionata de o linieorizontala.
In aceasta linie underlineeste subliniat, iar strikeeste sectionat.

Stiluri fizice i stiluri logiceAm prezentat deja 8 stiluri de scriere a caracterelor unui bloc de text, numite i stiluri

fizice, ntruct nu s-a acordat nici o atenie semnificaiei informaiei coninute de acesteblocuri.

n continuare sunt prezentate stilurile logice utilizate la formatarea unui bloc. Acestestiluri in cont de semnificaia pe care o are blocul n cadrul paginii Web.

Observaie: Stilurile logice se bazeaz pe stilurile fizice, iar modul lor de aciune depinde de browserulutilizat.

Blocuri de caractere evideniaten exemplul urmtor sunt introduse alte dou etichete pentru a pune n eviden (prin

stilul cursiv) fragmente de text:l i (cite nseamn citat);l i (em vine de la emphasize = a evidenia).

Observaie:n locul lor se poate utiliza eticheta echivalent .

Exemplul 3_7. Blocuri de caractere evideniate

Exemplul 3_7

Aceasta linie este formata din textnormal.
Colegiul National MihaiViteazul din Bucuresti
este unul dintre liceele detraditie din Romania.

Lecia 3 Stiluri pentru blocurile de text


18/160

22

Blocuri de caractere monospaiate

n continuare vor fi prezentate trei etichete cu efecte similare. Ele permit scriereafragmentelor de text cu caractere monospaiate (de tipul celor folosite de o main descris):l i (code nseamn cod sau surs);l i (kbd vine de la keyboard = tastatur);l i (tt vine de la teletype = teleprinter).

Blocuri de caractere clipitoaren exemplul urmtor apare eticheta de tip bloc , care delimiteaz

fragmentele de text clipitoare.

Observaie: Aceast etichet este funcional numai n browserul Netscape Communicator.

Exemplul 3_8. Blocuri de caractere monospaiate

Codul functiei f(x,y) este:Function f(x,y) {return x+y;}

Tastati urmatoarea comanda DOS:copy c:\windows\* c:\temp
Asa scrie un teleprinter

Exemplul 3_9. Caractere clipitoare

Linia acesta clipeste.
In aceasta linie fragmentulon/off clipeste.

Imbricarea etichetelorExemplul urmtor ilustreaz faptul c etichetele pot fi imbricate. De exemplu:

l un fragment de text poate fi scris cu aldine i cursive n acelai timp;l pentru un fragment de text se pot folosi simultan stilurile subliniat, exponent, mrit icursiv.

HTML prin exemple


19/160

23

Blocul qBlocul permite inserarea in-line a citatelor. Aceste citate sunt afiate de

ctre browser n cu caractere cursive.

Observaii:l Blocurile q pot fi imbricate ca n exemplul urmtor.l q vine de la in-line quotation (citate inserate in-line).

Exemplul 3_11. Blocul q

Exemplul 3_10. Imbricarea etichetelor

Normal ingrosat ingrosat siitalic ingrosat normal.
Normal subliniat subliniat siingrosat subliniat, ingrosat simarit.
Subliniat, ingrosat, marit siitalic.

Exemplul 3_11Maria povesti mai departe M-am intors catre Mihai si l-am intrebat Mergimaine la concert? Nu. mi-a raspuns el. In acest moment Maria seopri pentru o clipa.

Lecia 3 Stiluri pentru blocurile de text


20/160

Lecia 4Lecia 4

Configurarea fonturilorConfigurarea fonturilorn aceast lecie vei nva cum s alegei tipurile de caractere (fonturile) cu care vei

scrie blocuri de text personalizate n cadrul unei pagini Web.Un font este caracterizat de urmtoarele atribute:

l culoarea (stabilit prin atributul color);l tipul sau stilul (stabilit prin atributul face);l mrimea (definit prin atributul size);l mrimea n puncte tipografice (stabilit prin atributul point-size);l grosimea (definit prin atributul weight).

Toate aceste atribute aparin etichetei , care permite inserarea de blocuri de textepersonalizate.

CuloriO culoare poate fi precizat n dou moduri:

l Printr-un nume de culoare. Sunt disponibile cel puin urmtoarele 16 nume de culori:aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal,

white i yellow. n anexa G Nume de culori este prezentat un tabel cu numele deculori disponibile.l Printr-o constant conform standardului de culoare RGB (Red, Green, Blue). O astfelde constant se formeaz astfel: #rrggbb, unde r, g i b sunt cifre hexazecimale. Cifrelehexazecimale sunt urmtoarele: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, a, A, b, B, c, C, d, D, e, E, f iF. Numrul de culori posibile este 65536.

Exemple de culori RGB: #ff0000 este rou (red), #00ff00 este verde (green), #0000ffeste albastru (blue), #ffffff este alb (white), #000000 este negru (black), #28a7Fc este o

culoare oarecare valid.

Culoarea fontuluiPentru a scrie un fragment de text cu caractere de o anumit culoare, se ncadreaz

acest fragment ntre delimitatorii i , eticheta avnd stabilit atributulcolorla valoarea necesar:

fragment de text de culoarea specificat.

Familia fontuluiPentru a scrie un text ntr-o pagin Web pot fi folosite mai multe fonturi (stiluri de caractere).Exist cinci familii generice de fonturi care sunt de regul disponibile pe toate calcula-

toarele utilizatorilor: serif, sans serif, cursive, monospace i fantasy.

Alte fonturi specifice pot fi utilizate dac acestea sunt disponibile pe calculatorul client,ca de exemplu: Times (un tip particular de font serif), Helvetica (un tip particular de fontsans serif), Arial, Courier (un tip particular de font monospace), Western (un tip particularde font fantasy) i altele.

Tipul de font necesar poate fi stabilit prin atributul faceal etichetei . Pot fiintroduse mai multe fonturi separate prin virgul.

Exemplu: . n acest caz, browserul va utilizaprimul font pe care l recunoate.


21/160

25

Mrimea fontuluiPentru a stabili mrimea unui font se utilizeaz atributul sizeal etichetei .

Valorile acestui atribut pot fi:l 1, 2, 3, 4, 5, 6, 7 (1 pentru cel mai mic font i 7 pentru cel mai mare);l +1, +2 etc. pentru a mri dimensiunea fontului cu 1, 2 etc. fa de valoarea curent;l1, 2 etc. pentru a mri dimensiunea fontului cu 1, 2 etc. fa de valoarea curent.

Exemplul 4_1. Culoarea fontului

Exemplul 4_1Aceasta linie este scrisa cucaractere normale.
Aceasta linie esterosie.
Aici fiecarecuvantareFonturi de marimea 6.
Fonturi de marimea1.


22/160

26

Mrimea unui font poate fi stabilit exact cu ajutorului atributului point-sizeal etiche-tei . Valorile acceptate de acest atribut pot fi orice numere naturale pozitive.

Numrul astfel precizat reprezint mrimea fontului n puncte tipografice.

Observaie: Acest atribut funcioneaz numai cu Netscape Communicator.

Exemplul 4_4. Dimensiunea n puncte a fontului

Exemplul 4_4Aceasta linie este scrisa cucaractere normale.
Fonturi demarimea 20 pt.

Fonturi degrosimea 100.
Fonturi degrosimea 900.

HTML prin exemple


23/160

Lecia 5Lecia 5

Blocuri de textBlocuri de textn aceast lecie vei nva etichete la nivel de bloc de text. Toate aceste etichete

produc automat trecerea la un rnd nou i adugarea unui spaiu suplimentar.Aceste etichete nu se refer la particulatritile caracterelor ce compun textul, ci la

funciile pe care le poate avea un bloc de text n cadrul paginii Web.

Inserarea unei adreseDac ntr-o pagin Web trebuie inclus o adres, atunci putem utiliza facilitile oferite

de o etichet dedicat: . Multe browsere afieaz textul cuprinsntre aceti delimitatori cu caractere cursive, ncepnd pe un rnd nou.

Observaie: Blocurile de tip adres includ informaii despre persoana care a creat pagina Web, adresae-mail i data crerii paginii. Aceste blocuri se plaseaz de obicei la sfritul paginii Web, dar pot apreai la nceput.

Indentarea unui blocPentru ca un bloc de text s fie indentat (marginea din stnga a textului s fie deplasat

la dreapta la o anumit distan fa de marginea paginii), acesta trebuie inclus ntreetichetele i . Adesea, browserele adaug un spaiusuplimentar nainte i dup o asemenea etichet.

Exemplul 5_2. Indentarea unui bloc

Exemplul 5_2Constantin Brancusi obisnuia saspuna:

Simplitatea nu este un scop inArta, insa ajungi la simplitate faravoia ta, apropiindu-te de sensul celreal al lucrurilor. Simplitatea estein sine o complexitate - si trebuiesa te hranesti cu esenta, casa poti sa ii intelegi valoarea.

Exemplul 5_1. Inserarea unei adrese

Exemplul 5_1Adresa institutiei noastre este:Colegiul National Mihai Viteazul
Bulevardul Pache Protopopescu Nr.62
Sector 2 Bucuresti Romania Europa


24/160

28

Blocuri

Modalitatea cea mai eficient de delimitare i de formatare a unui bloc de text estefolosirea delimitatorilor i .Un parametru foarte util pentru stabilirea caracteristicilor unui bloc (diviziune)

este align(aliniere). Valorile posibile ale acestui parametru sunt:l left (aliniere la stnga);l center (aliniere central);l right (aliniere la dreapta).

Exemplul 5_3. Blocuri

Exemplul 5_3Aceasta este o linie normala. Urmatorulbloc este aliniat la dreapta:

MOTTO:
Misiunea artei este sa creezebucurie;
si nu se poate crea artistic decat
in echilibru si in pacesufleteasca
Constantin BrancusiUrmatorul bloc este aliniat pe centru:De cand viata mea te stie,
o suferinta port mereu;
Frumusetea ta-i o poezie,
pe care n-am facut-o eu.
Lucian Blaga: Catren

Observaii:l Un bloc


25/160

29

Blocuri ntr-un fiier HTML, caracterele au o semnificaie special pentru browser. Ele

ncadreaz comenzile i atributele de afiare a elementelor ntr-o pagin Web.Dac dorim ca un fragment de text s conin astfel de caractere fr ca acestea s aib

semnificaia special prestabilit, acest fragment trebuie ncadrat de una dintre perechilede etichete:l (80 de caractere pe rnd);l (120 de caractere pe rnd).

De asemenea, n ultima parte a unei pagini Web care ncepe cu marcajul nu sunt interpretate marcajele HTML.

Observaii:l Aceste trei marcaje interpreteaz corect caracterele spaiu, etichet i CR/LF.l Textul afiat n pagina Web este monospaiat.

Exemplul 5_4. Blocul preformatat

Exemplul 5_4Planificarea examenelor in sesiunea iulie 1999Examenul Data Sala Ora

Grafica pe calculator 07.07.1999 EC105 8.00Sisteme de operare 15.07.1999 ED221 14.00Programare in Java 25.07.1999 EG210 9.00

Exemplul 5_5. Blocuri

Exemplul 5_5Un fisier html standard arata astfel:

Prima pagina web!

Lecia 5 Blocuri de text


26/160

30

Blocuri paragraf

Am vzut la Exemplul 1_4 c trecerea la o linie nou se face cu ajutorul etichetei
.Acest lucru este posibil i cu ajutorul etichetei paragraf,

. Spre deosebire de
,eticheta

permite:l inserarea unui spaiu suplimentar nainte de blocul paragraf;l inserarea unui spaiu suplimentar dup blocul paragraf, dac se folosete delimitatorul
(acesta fiind opional);l alinierea textului cu ajutorul atributului align, avnd valorile posibile left, center sauright.
Exemplul 5_6. Blocuri paragraf

Exemplul 5_6Linia 1
Linia 2 este generata de un break.

Linia 3 este generata de un un paragraf. Implicit paragraful este aliniat lastanga.

Paragraf aliniat la dreapta. Paragraf aliniat la dreapta.Paragraf aliniat la dreapta. Paragraf aliniat la dreapta. Paragraf aliniat ladreapta. Paragraf aliniat la dreapta. Paragraf aliniat la dreapta. Paragrafaliniat la dreapta. Paragraf aliniat la dreapta. Paragraf aliniat la dreapta.Paragraf aliniat la dreapta.

Paragraf aliniat in centru. Paragraf aliniat in centru.Paragraf aliniat in centru. Paragraf aliniat in centru. Paragraf aliniat incentru. Paragraf aliniat in centru. Paragraf aliniat in centru. Paragrafaliniat in centru. Paragraf aliniat in centru. Paragraf aliniat in centru.Paragraf aliniat in centru.

Blocuri de titluntr-un text sunt necesare titluri (headers) de capitole (paragrafe) de diferite

dimensiuni. Acestea pot fi introduse cu ajutorul etichetelor , , , , i .

HTML prin exemple


27/160

31

Observaii:l Toate aceste etichete se refer la un bloc de text i trebuie nsoite de o etichet de ncheiere similar,de exemplu: .l Aceste etichete accept atributul alignpentru alinierea titlului blocului de text la stnga (n modprestabilit), n centru i la dreapta.l Tag-ul permite scrierea unui titlu cu caracterele cele mai mari i aldine, pe cnd folosetecaracterele cele mai mici.l Toate browserele introduc un spaiu suplimentar nainte de a afia un titlu.

Exemplul 5_7. Blocuri de titlu

Exemplul 5_7Titlu de marimea 1aliniat in centruTitlu de marimea 2 aliniat la

stanga (implicit)Titlu de marimea 3aliniat la dreaptaTitlu de marimea 4aliniat la stangaTitlu de marimea 5Titlu de marimea 6

Linii orizontalentr-o pagin Web pot fi inserate linii orizontale. Acest lucru se face cu ajutorul etiche-

tei .

Pentru a configura o linie orizontal se utilizeaz urmtoarele atribute ale etichetei :l align permite alinierea liniei orizontale. Valorile posibile sunt left, center i right;l

width permite alegerea lungimii liniei. Valorile posibile sunt:(a) numere ntregi pozitive reprezentnd lungimea liniei, n pixeli;(b) numere ntre 1 i 100 urmate de semnul %, reprezentnd procentul din limea

paginii pe care se ntinde linia;l sizepermite alegerea grosimii liniei. Valorile posibile sunt numere ntregi pozitivereprezentnd grosimea liniei n pixeli (valoarea prestabilit este 2");l noshade,cnd este prezent, definete o linie fr umbr;l colorpermite definirea culorii liniei.

Exemplul 5_8. O linie orizontal.

Exemplul 5_8Linie orizontalaLinia orizontala are parametriiimpliciti

Lecia 5 Blocuri de text


28/160

32

Blocuri Blocul introdus de etichetele i aliniaz centrat toate elementele pecare le conine.

n exemplul urmtor este prezentat un mod de obinere a unor efecte deosebite ntr-opagin Web, cu ajutorul unor instrumente foarte simple.

Exemplul 5_9. Tipuri de linii orizontale

Exemplul 5_9Tipuri de liniiorizontaleUrmeaza o linie implicita (aliniare stanga,latime 100%, grosime 2, cu umbra):Urmeaza o linie aliniata in centru, delatime 50%, grosime 5 pixeli, fara umbra:Urmeaza o linie de latime 200 de pixeli,aliniata la dreapta, grosime 10 pixeli,cu umbra:


29/160

Lecia 6Lecia 6

ListeListen aceast lecie vei nva cum pot fi introduse liste ntr-o pagin Web.

Liste neordonateO list neordonat este un bloc de text delimitat de etichetele corespondente i

(ul vine de la unordered list = list neordonat). Fiecare element al listei esteiniiat de eticheta (list item).

Observaii:l Lista va fi indentat fa de restul paginii Web.l Fiecare element al listei ncepe pe un rnd nou.

Exemplul 6_1. O list neordonat

Exemplul 6_1Exemplul 6_1O lista neordonataPentru a cunoaste INTERNET-ul,trebuie s studiati urmatoarele carti:HTMLJavaScriptJava

Observaie:l Elementele , i au fost utilizate n acest exemplu pentru ca pagina Web s aib unaspect ct mai plcut.

Tag-urile i pot avea un atribut typecare stabilete caracterul afiat n faafiecrui element al listei. Valorile posibile ale acestui atribut sunt:l circle (cerc) pentru O;l disc (disc plin) pentru l (valoarea prestabilit);l square (ptrat) pentru n.

Exemplul 6_2. O list neordonat cu elemente precedate de nn

Exemplul 6_2

Exemplul 6_2O lista neordonataPentru a cunoasteINTERNET-ul trebuie sa studiati:HTMLJavaScriptJava


30/160

34

Liste ordonateO list ordonat de elemente este un bloc de text delimitat de etichetele corespondente

i (ol vine de la ordered list = list ordonat). Fiecare element al listei esteiniiat de eticheta (list item).

Observaii:l Lista va fi indentat fa de restul paginii Web.l Fiecare element al listei ncepe pe un rnd nou.

Listele neordonate pot fi imbricate pe mai multe niveluri, ca n exemplul urmtor:

Exemplul 6_3. O list neordonat de liste neordonate

Exemplul 6_3Exemplul 6_3O lista neordonata de listeneordonateElemente si atribute ale uneipagini html:body Atribute:

bgcolortext

font Atribute:face

sizecolor

Exemplul 6_4. O list ordonat

Exemplul 6_4Exemplul 6_4O lista ordonataPentru a realiza o pagina webtrebuie:creat un fisier de comenzi inlimbajul html;salvat fisierul cu extensia .html;incarcat fisierul html intr-unbrowser.

Tag-urile i pot avea un atribut typecare stabilete tipul de caractere utilizatepentru ordonarea listei. Valorile posibile sunt:l A pentru de ordonare de tipul A, B, C, D etc. (litere mari);

HTML prin exemple


31/160

35

l a pentru ordonare de tipul a, b, c, d etc. (litere mici);l I pentru ordonare de tipul I, II, III, IV etc. (cifre romane mari);l i pentru ordonare de tipul i, ii, iii, iv etc. (cifre romane mici);l 1 pentru ordonare de tipul 1, 2, 3, 4 etc. (cifre arabe opiunea prestabilit).

Exemplul 6_5. O list ordonat cu cifre romane mari

Exemplul 6_5Exemplul 6_5O lista ordonata cu cifre romanemariPentru a realiza opagina web trebuie:creat un fisier de comenzi inlimbajul html;

salvat fisierul cu extensia .html;incarcat fisierul html intr-unbrowser.

Observaie: Tag-ul poate avea un atribut startcare stabilete valoarea iniial a secvenei deordonare. Valoarea acestui atribut trebuie s fie un numr ntreg pozitiv.

Tag-ul poate avea un atribut valuecare stabilete valoarea pentru elementulrespectiv al listei. Valoarea acestui atribut trebuie s fie un numr ntreg pozitiv (veziexemplul 6_7).

Listele ordonate pot fi imbricate ntre ele sau cu liste neordonate, ca n exemplul 6_8.

Liste de definiiiO list de definiii este format dintr-o succesiune de termeni, fiecare termen fiind

urmat de definiia sa.

Lecia 6 Liste

Exemplul 6_6. O list ordonat cu litere mari, ncepnd de la valoarea C

Exemplul 6_6Exemplul 6_6

O lista ordonata cu litere mariincepand cu valoarea C


32/160

36

Observaii:lntreaga list de definiii se ncadreaz ntre etichetele corespondente i (de la definitionlist = list de definiii);l Un termen al listei este iniiat de eticheta (de la definition term = termen de definit);l Definiia unui termen este iniiat de eticheta (de la definition description = descriereadefiniiei);l Definiia unui termen ncepe pe o linie nou i este indentat.

Observaie:Tag-urile , i pot avea un atribut compact care permite afiarea compact alistei. De exemplu, n cazul unei liste de definiii, vom scrie: . Dac acest atribut esteprezent (el nu ia mai multe valori), atunci definiiile termenilor ncep pe aceeai linie cu termenii.

Exemplul 6_7. O list ordonat cu elemente configurate individual

Exemplul 6_7Exemplul 6_7O lista ordonata avand itemisetati individualincarcati fisierul inbrowser;schimbati browserul utilizat.

Exemplul 6_8. O list ordonat de liste ordonate si neordonateExemplul6_8Exemplul 6_8O lista ordonata de listeordonate si neordonateUn sistem informatic include:Hardware:

placa debazaprocesor memorie

Softtware de baza: Windows Unix Linux

Software de aplicatie:AutoCadCorelDrawQuarkXPress

HTML prin exemple


33/160

37

Liste de meniuriO list de meniuri este un bloc delimitat de etichetele corespondente i

. Fiecare element al listei este iniiat de eticheta (list item).

Observaii:l Cele mai multe browsere afieaz lista de meniuri ca pe o list neordonat.l Nu se recomand utilizarea acestui tip de list.

Liste de directoareO list de directoare este un bloc delimitat de etichetele corespondente i

(de la director). Fiecare element al listei este iniiat de eticheta (list item).

Observaii:

l Cele mai multe browsere afieaz lista de directoare ca pe o list neordonat.l Nu se recomand utilizarea acestui tip de list.

Utilizri speciale ale listelorn acest paragraf vor fi prezentate cteva utilizri speciale ale listelor.Dac ntr-o list, n loc de elementele acesteia introduse prin , se insereaz un bloc

de text, acesta va fi indentat (ntocmai ca elementele unei liste).

Exemplul 6_10Exemplul 6_10O lista compacta de definitiiGlossar de termeni pentru INTERNETBrowserAplicatie ce ruleaza pe calculatorul client o pagina htmlServer WWWCalculator care raspunde la cererile de pagini html emise de un client

Lecia 6 Liste

Exemplul 6_10. O list compact de definiii

Exemplul 6_9. O list de definiii

Exemplul6_9Exemplul 6_9O lista de definitiiGlossar de termeni pentru INTERNETBrowserAplicatie ce ruleaza pecalculatorul client o pagina htmlServer WWWCalculator care raspunde lacererile de pagini html emise de unclient


34/160

38

Liste personalizaten exemplul urmtor este creat o list neordonat personalizat care utilizeaz pe post

de elemente imagini i texte.

Exemplul 6_11. Un bloc de text indentat

Exemplul 6_13. O list personalizat

Exemplul 6_11Exemplul 6_11Un bloc de text indentatAcest bloc de text va fi indentat.Acest bloc de text va fi indentat.Acest bloc de text va fi indentat.Acest bloc de text va fi indentat.Acest bloc de text va fi indentat.Acest bloc de text va fi indentat.

Exemplul 6_12. O list de definiii special

n exemplul urmtor lista de definiii are itemii i multipli.

Exemplul 6_12Exemplul 6_12O lista de definitii specialaProgramLuniMartiMiercuriOra 9.00. InscriereOra 11.00. Audieri

Ora 13.30. Raspunsuri

Exemplul 6_12Exemplul 6_13

O lista de definitii specialaPlanete din Sistemul solar:
Mercur
Venus
Neptun

HTML prin exemple


35/160

Lecia 7Lecia 7

TabeleTabeleAa cum ai constatat deja, posibilitile de aranjare a textului ntr-o pagin Web sunt

limitate. Tabelele ne permit s crem o reea dreptunghiular de domenii, fiecaredomeniu avnd propriile opiuni pentru culoarea fondului, culoarea textului, aliniereatextului etc.

Un tabel simpluPentru a insera un tabel se folosesc etichetele corespondente i .Un tabel este format din rnduri. Pentru a insera un rnd ntr-un tabel se folosesc

etichetele i (de la table row = rnd de tabel).

Observaie:l Folosirea etichetei de sfrit este opional.

Un rnd este format din mai multe celule ce conin date. O celul de date se introducecu eticheta (de la table data = date n tabel).

Exemplul 7_1. Un tabel simplu format din dou linii i trei coloane

Exemplul 7_1Exemplul 7_1Un tabel simplu format din doualinii si trei coloanecelula 11

celula 12celula 13

celula 21celula 22celula 23

Un tabel cu chenarn mod prestabilit, un tabel nu are chenar. Pentru a aduga un chenar unui tabel, se

utilizeaz un atribut al etichetei numit border. Acest atribut poate primi ca valoareorice numr ntreg (inclusiv 0) i reprezint grosimea n pixeli a chenarului tabelului.

Observaii:l Atributul borderpoate s nu fie urmat de o valoare, caz n care tabelul va avea un chenar de grosimeprestabilit egal cu 1 pixel.l O valoare egal cu 0 a grosimii semnific absena chenarului.l Cnd are grosime nenul, chenarul unui tabel are un aspect tridimensional.


36/160

40

Alinierea tabelului n pagina WebPentru a alinia un tabel ntr-o pagin Web se utilizeaz atributul alignal etichetei

, cu urmtoarele valori posibile: left (valoarea prestabilit), center i right.Alinierea unui tabel este important pentru textul ce nconjoar tabelul. Astfel:

l Dac tabelul este aliniat la stnga (), atunci textul care urmeazdup punctul de inserare al tabelului va fi dispus n partea dreapt a tabelului.l Dac tabelul este aliniat la dreapta (), atunci textul care urmeazdup punctul de inserare al tabelului va fi dispus n partea stng a tabelului.l Dac tabelul este aliniat pe centru ), atunci textul care urmeazdup punctul de inserare al tabelului va fi afiat pe toat limea paginii, imediat sub tabel.

Exemplul 7_2. Un tabel cu chenar

Exemplul 7_2Exemplul 7_2Un tabel simplu format din doualinii si trei coloane


37/160

41

Tem:Copiai fiierul e7_3.html prezentat anterior i testai-l cu ajutorul unui browser. Schimbaialinierea tabelului la centru apoi la stnga i observai modificrile care apar n pagina Web.

Definirea culorilor de fond pentru un tabelCuloarea de fond se stabilete cu ajutorul atributului bgcolor, care poate fi ataat

ntregului tabel prin eticheta , unei linii prin eticheta sau unei celule de dateprin eticheta . Valorile pe care le poate primi atributul bgcolorsunt cele cunoscutepentru o culoare.

Observaie:l Dac n tabel sunt definite mai multe atribute bgcolor, atunci prioritatea este urmtoarea: , i (cu prioritatea cea mai mic).

Exemplul 7_4. Un tabel colorat

Exemplul 7_4Exemplul 7_4Un tabel coloratgalben 11verde 12rosu 21cyan 22

Observaie: Culoarea textului din fiecare celul poate fi stabilit cu ajutorul expresiei:.

Dimensionarea celulelor unui tabelDistana dintre dou celule vecine se definete cu ajutorul atributului cellspacingal

etichetei (vezi exemplul 7_5).

Observaii:l Valorile acestui atribut pot fi numere ntregi pozitive, inclusiv 0, i reprezint distana n pixeli dintredou celule vecine.l Valoarea prestabilit a atributului cellspacingeste 2.

Distana dintre marginea unei celule si coninutul ei poate fi definit cu ajutorulatributului cellpaddingal etichetei (vezi exemplul 7_6).

Observaii:l Valorile acestui atribut pot fi numere ntregi pozitive i reprezint distana n pixeli dintre marginea uneicelule i coninutul ei.l Valoarea prestabilit a atributului cellpaddingeste 1.

Lecia 7 Tabele


38/160

42

Dimensionarea unui tabelDimensiunile unui tabel limea i nlimea pot fi stabilite exact prin intermediul a

dou atribute, widthi height,ale etichetei .Valorile acestor atribute pot fi:

l numere ntregi pozitive reprezentnd limea, respectiv nlimea n pixeli a tabelului;l numere intregi ntre 1 i 100, urmate de semnul %, reprezentnd fraciunea din limea,respectiv nlimea total a paginii.

Exemplul 7_5. Un tabel fr chenar de celule alipite

Exemplul 7_5Exemplul 7_5Un tabel fara chenar de celulealipitegalben 11verde 12rosu 21cyan 22

Exemplul 7_7. Un tabel de 300 pixeli x 50%

Exemplul 7_7Exemplul 7_7Un tabel de 300 pixeli X 50%celula 11celula 12celula 21celula 22

HTML prin exemple


39/160

43

Observaii:l Dac dimensiunile precizate de atribute sunt mai mari dect cele necesare afirii tabelului, atunci vorfi folosite aceste dimensiuni precizate.l Dac dimensiunile precizate de atribute sunt mai mici dect cele necesare afirii tabelului, atuncitabelul va fi ajustat la dimensiunile necesare.

n exemplul urmtor se utilizeaz un truc care permite afiarea ntr-o pagin Web a unuitext poziionat n centrul paginii. Pentru a realiza acest lucru, se declar un tabel mare ct

ntreaga pagin ce conine o singur celul. Textul din interiorul celulei este aliniat n modprestabilit pe vertical, centrat, iar n mod explicit pe orizontal, de asemenea centrat.

Exemplul 7_8. Un text centrat ntr-o pagin Web

Exemplul 7_8

Text centrat.

Zona din jurul unui tabelAm vzut n exemplul 7_3 modul n care este depus un text n jurul unui tabel aliniat

ntr-o pagin Web. Distana dintre tabel i celelalte elemente din pagina Web poate fistabilit cu ajutorul atributelor hspacei vspaceale etichetei (vezi exemplul 7_9).

Observaii:l Valoarea atributului hspacepoate fi orice numr ntreg pozitiv, inclusiv 0, i reprezint distana peorizontal dintre tabel i celelalte elemente ale paginii Web.l Valoarea atributului vspacepoate fi orice numr ntreg pozitiv, inclusiv 0, i reprezint distana pevertical dintre tabel i celelalte elemente ale paginii Web.l Aceste atribute funcioneaz numai cu Netscape Communicator.

Titlul unui tabelUnui tabel i se poate ataa un titlu cu ajutorului etichetei (de la table

caption = titlu de tabel). Aceast etichet trebuie plasat n interiorul etichetelor, dar nu n interiorul etichetelor sau (vezi exemplul 7_10).Titlul unui tabel poate fi aliniat cu ajutorul atributului alignal etichetei , care

poate lua una dintre valorile:l bottom (sub tabel);l top (deasupra tabelului);l left(la stnga tabelului);l right (la dreapta tabelului).

Lecia 7 Tabele


40/160

44

Exemplul 7_9. Un tabel simplu aliniat la stnga, nconjurat la distan de text

Exemplul 7_9Exemplul 7_9Un tabel aliniat la dreapta inconjurat la distanta de textText inainte de tabel. Text inainte de tabel. Text inainte de tabel. Textinainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte detabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel.Text inainte de tabel.


41/160

45

Cap de tabel

Un tabel poate avea celule cu semnificaia de cap de tabel. Aceste celule suntintroduse de eticheta (de la table header = cap de tabel) n loc de .

Observaii:l Toate atributele care pot fi ataate etichetei pot fi, de asemenea, ataate etichetei .l Coninutul celulelor definite cu este scris cu caractere aldine i centrat.

Exemplul 7_11. Un tabel cu titlu i cap de tabel

Exemplul 7_11Exemplul 7_11Un tabel cu titlu si cap detabel

Bilantul insaptamana 11-15 maiBilant\ZileLuniMartiMiercuriJoiVineriIntrari100020003000 40005000Iesiri100200300400500

Alinierea coninutului unei celuleAlinierea pe orizontal a coninutului unei celule se face cu ajutorul atributului align,

care poate lua valorile:l left (la stnga);l center (centrat);l right (la dreapta);l char (alinierea se face fa de un caracter).

Observaie:Valoarea prestabilit este center.

Dac alinierea este de tipul char, atunci caracterul n raport cu care se face aliniereaeste definit de atributul char, care primete ca valoare caracterul de aliniere. n modprestabilit acest caracter este ..

Alinierea pe vertical a coninutului unei celule se face cu ajutorul atributului valign,care poate lua valorile:l baseline (la baz);l bottom (jos);l middle (la mijloc);l top (sus).

Observaie:Valoarea prestabilit este middle.

Lecia 7 Tabele


42/160

46

Dimensionarea exact a celulelor unui tabelDimensiunile unei celule de tip sau de tip pot fi stabilite exact cu ajutorul a

dou atribute ale acestor etichete: widthpentru lime i heightpentru nlime.Valorile posibile ale acestor atribute sunt:

l numere ntregi pozitive (inclusiv 0) reprezentnd dimensiunea n pixeli a limii,respectiv a nlimii unei celule;l

procente din limea, respectiv nlimea tabelului.

Aceste atribute pot fi ataate att etichetei pentru a defini alinierea tuturor celulelorunui rnd, ct i etichetelor i pentru a stabili alinierea textului ntr-o singur celul.

Exemplul 7_12. Un tabel avnd coninutul celulelor aliniat n diverse moduri

Exemplul 7_12Exemplul 7_12Un tabel avand continutul celuleloraliniat in diverse moduriaicialiniereaestecentrustanga (implicita)aici aliniereaestedreaptasussusjosstangadreaptadreapta si jos

Exemplul 7_13. Un tabel cu celule de 50x100 de pixeli

Exemplul 7_13Exemplul 7_13Un tabel cu celule de 50X100 depixelicel 12cel 22

Observaii:l Dac dimensiunile precizate de atribute sunt mai mari dect cele necesare afirii tabelului, atunci vorfi folosite aceste dimensiuni precizate;l Dac dimensiunile precizate de atribute sunt mai mici dect cele necesare afirii tabelului, atuncitabelul va fi ajustat la dimensiunile necesare.

HTML prin exemple


43/160

47

Tabele de forme oarecareUn tabel trebuie privit ca o reea dreptunghiular de celule. Cu ajutorul a dou atribute

ale etichetelor sau , o celul se poate extinde peste celulele vecine. Astfel:l Extinderea unei celule peste celulele din dreapta ei se face cu ajutorul atributuluicolspan, a crui valoare determin numrul de celule care se unific.l Extinderea unei celule peste celulele de dedesubt se face cu ajutorul atributului rowspan,a crui valoare determin numrul de celule care se unific.

Observaii:l Sunt posibile extinderi simultane ale unei celule pe orizontal i pe vertical. n acest caz, n etichetele sau vor fi prezente ambele atribute, colspani rowspan.ln definiia tabelului, o celul extins este introdus printr-o singur etichet sau .

Exemplul 7_15 ilustreaz crearea de celule extinse ntr-o reea dreptunghiular de 4x4celule (vezi i figura urmtoare).

Atributul nowrapAtributul nowrapaparine elementelor i ; el interzice ntreruperea unei linii

de text. Astfel, n tabel pot aprea coloane cu o lime orict de mare (vezi exemplul7_16).

n exemplul urmtor se creeaz cu ajutorul unui tabel, avnd limea 80% din limeapaginii, 3 coloane de text cu limile de 25%, 50%, respectiv 25% din limea paginii.

Exemplul 7_14. Un tabel cu coloane de text

Exemplul 7_14Text in prima coloana. Text in prima coloana.Text in prima coloana. Text in prima coloana. Text in prima coloana. Text inprima coloana.Text in coloana a doua. Text in coloana a doua. Text in coloana a doua. Text incoloana a doua. Text in coloana a doua. Text in coloana a doua.Text in coloana a treia. Text in coloana a treia. Text in coloana a treia. Textin coloana a treia. Text in coloana a treia. Text in coloana a treia.

Lecia 7 Tabele


44/160

48

Exemplul 7_15. Un tabel cu celule extinse

Exemplul 7_15Exemplul 7_15Un tabel cu celule extinsec13, c14
c23, c24
c33, c34c22c32c41


45/160

49

Grupuri de coloaneBlocul permite definirea unui grup de coloane. Atributeleacceptate de sunt (vezi exemplul 7_19):l spandetermin numrul de coloane dintr-un grup;l widthdetermin o lime unic pentru coloanele din grup;l aligndetermin un tip unic de aliniere pentru coloanele din grup.

Exemplu:

Observaie:ntr-un bloc , coloanele pot avea configurri diferite dac se utilizeaz elementul, care admite atributele:l spanidentific acea coloan din grup pentru care se face configurarea. Dac lipsete, atunci coloanelesunt configurate n ordine;l

widthdetermin o lime pentru coloana identificat prin span;l aligndetermin o aliniere pentru coloana identificat prin span.

Atributele framei rulesAtributul frameal etichetei permite specificarea prilor din chenarul unui tabel

care vor fi afiate. Valorile posibile ale acestui atribut sunt: void, above, below,hsides, lhs, rhs, vsides, box, border.

Exemplul 7_17. Un tabel cu celule vide

Exemplul 7_17Exemplul 7_17Un tabel cu celule vide.c11c12c13

Exemplul 7_18. Atribute Internet Explorer pentru tabele

Exemplul 7_18Exemplul 7_18Atribute Internet Explorerc11c12c13

Lecia 7 Tabele


46/160

50

Atributul rulesal etichetei permite alegerea unor delimitatori pentru celuleleunui tabel. Valorile posibile sunt: none, groups, rows, cols, all.

Exemplul 7_19. Grupuri de coloane

Exemplul 7_19Text in prima coloana.Text in prima coloana. Text in primacoloana. Text in prima coloana.Text in coloana a doua. Text incoloana a doua. Text in coloana adoua. Text in coloana a doua. Text incoloana a doua.

Text in coloana a treia. Text incoloana a treia. Text in coloana atreia. Text in coloana a treia.

Subblocurile unui tabeln specificaiile HTML 4.0, coninutul unui tabel poate fi mprit n subblocuri prin

elementele:l (un singur rnd);l (un singur rnd);l (oricte rnduri).

Observaie:ntr-un tabel exist un singur subbloc de tipul i un singur subbloc de tipul ,dar pot exista mai multe subblocuri de tip .

Exemplul 7_20. Atributele framesi rules

Exemplul 7_20

c11c12c13c21c22c23

HTML prin exemple


47/160

Lecia 8Lecia 8

ImaginiImaginiO facilitate extraordinar a limbajului HTML este posibilitatea includerii imaginilor.

Tipuri de fiiere pentru imaginiImaginile sunt stocate n fiiere cu diverse formate. Formatele acceptate de browsere

pentru fiierele imagine sunt:l GIF (Graphics Interchange Format) cu extensia .gif;lJPEG (Joint Photographic Experts Group) cu extensia .jpegsau .jpg;lXPM (X PixMap) cu extensia .xmp;lXBM (X BitMap) cu extensia .xbm;l BMP (BitMap) cu extensia .bmp(numai cu browserul Internet Explorer);l

DIB (Device Independent Bitmap);l TIFF (Tagged Image File Format) cu extensia .tifsau .tiff;l PCX (PC Paintbrush);l PNG (Portable Network Graphics) cu extensia .png.

Observaie:Cele mai rspndite formate sunt GIF (8 bii pentru o culoare, 256 de culori posibile) iJPEG (24 de bii pentru o culoare, 16 777 216 de culori posibile).

Adresa URL a unei imaginiURL (Uniform Resource Locator= identificator uniform al resursei) este un standard

folosit n identificarea unic a unei resurse n Internet. n lecia 10 vei nva n detaliudespre adresele URL.

Toate imaginile cu care vom lucra n aceast lecie vor avea adresa URL exprimat nfuncie de directorul ce conine documentul HTML care face referire la imagine.

n Anexa B Cutarea fiierelor imagine este prezentat un algoritm pentruidentificarea fiierelor imagine aflate pe un sistem Windows.

Prima pagin Web care conine o imaginePentru a insera ntr-o pagin Web o imagine, se utilizeaz eticheta (de la

image = imagine). Pentru a putea identifica imaginea care va fi inserat, se utilizeaz unatribut al etichetei i anume src(de la source = surs).

Valoarea acestui atribut este adresa URL a imaginii.

Observaii:l Dac imaginea se afl n acelai director cu fiierul HTML care face referire la imagine, atunci adresa

URL a imaginii este format numai din numele imaginii, inclusiv extensia. Exemplu:nume.extensie

,unde numeeste numele fiierului imagine, iar extensieeste extensia acestuia.l Exemplele care urmeaz presupun c fiierele imagine utilizate se afl n directorul care este necesar(n mod prestabilit n directorul curent de lucru).l Numii fiierul urmtor e8_1.html, salvai-l n directorul de lucru (de exemplu c:\html).l Schimbai numele fiierului imagine (valoarea atributului src) cu numele altui fiier imagine disponibilpe calculatorul dumneavoastr i plasat n directorul de lucru (c:\html).


48/160

52

Adresarea relativS admitem c pe calculatorul ce stocheaz paginile HTML exist urmtoarea structur

de directoare i de fiiere:Dac dorim s referim din fiierul test.htmlaflat

n directorul c:\html\afiierele imagine aflate ndiverse directoare, se utilizeaz n construcia adreseiURL aa-numita adresare relativ (adic fa dedirectorul curent c:\html\a), dup cum se arat ncontinuare:l i2.gifl aa\i3.gifl ..\i2.gifl ..\b\i4.gifl ..\b\bb\i5.gifl ..\..\i1.gif

Observaie:Directorul printe al unui director curent se indic prin ..\

Tem:Creai structura de directoare indicat n figura urmtoare, dup care copiai n fiecare directorcte un fiier de tip imagine i testai adresarea relativ dup schema propus mai nainte.

Exemplul 8_1. Prima pagin Web care conine o imagine

Exemplul 8_1Exemplul 8_1Prima pagina web care contine oimagineText dupaimagine.

html (i2.gif)

b (i4.gif)

bb (i5.gif)

C: (i1.gif)

a (i2.gif)(test.html)

aa (i3.gif)

Observaie:l Pentru ca exemplul anterior s funcioneze corect, salvai fiierul anterior ca e8_2.htmln directorulc:\html\a,iar fiierul cnn_sl.gif(sau altul pe care l dorii) n directorul c:\html\b.

Chenarul unei imaginiDac dorii s adugai un chenar n jurul imaginii, folosii atributul borderal etichetei

. Valorile acestui atribut sunt numere ntregi pozitive.

Exemplul 8_2. Imagine referit prin adresare relativ

Exemplul 8_2Exemplul 8_2Imagine referita prin adresarerelativaText dupaimagine.

HTML prin exemple


49/160

53

Dimensionarea unei imaginiO imagine are anumite dimensiuni pe orizontal i vertical, stabilite n momentul

crerii ei. Dac nu se cere altfel, aceste dimensiuni sunt respectate n momentul afirii ei

n pagina Web.Dimensiunile prestabilite ale unei imagini pot fi modificate prin intermediul atributelorwidthi heightale etichetei . Valorile posibile ale acestor atribute sunt:l numere intregi pozitive reprezentnd numrul de pixeli;l numere de la 1 la 100 urmate de %, reprezentnd procente din limea, respectiv din

nlimea blocului printe n care se afl imaginea (n mod prestabilit, pagina Web).

Exemplul 8_3. Imagine cu chenar

Exemplul 8_3Exemplul 8_3Imagine cu chenar


50/160

54

Observaie:l Dac imaginea pe care o folosii este prea mic sau prea mare, adugai-i atributele width= 20% iheight= 20%.

Alinierea textului n jurul unei imaginiAtributele hspacei vspaceale etichetei precizeaz distana n pixeli pe orizontal,

respectiv pe vertical, dintre imagine i restul elementelor din pagin (de exemplu text).

l bottom sau baseline (asemntor cu absbottom) aliniere la baz; partea de jos aimaginii se aliniaz cu linia de baz a textului).

Exemplul 8_5. Alinierea unei imagini pe vertical

Exemplul 8_5Exemplul 8_5Alinierea unei imagini peverticalaSus:La mijloc:Jos:Text dupa imagini.

Exemplul 8_6. Imagine aliniat la stnga, nconjurat de text la distana de 50 depixeli

Exemplul 8_6Exemplul 8_6Imagine aliniata la stanga inconjurata de text la distanta de 50 de pixeliText inainte de imagine. Text inainte de imagine. Text inainte de imagine. Textinainte de imagine. Text inainte de imagine. Text inainte de imagine.


51/160

55

Observaii:l Text dupa imagine nu urmeaz n pagina Web imediat dup Text nainte de imagine, dei ar avealoc, datorit etichetei
care foreaz trecerea la linie nou.l Dac imaginea pe care o folosii este prea mic sau prea mare, adugai-i atributele width= 20% iheight= 20%.l Pentru a elibera zona din stnga unei imagini (respectiv dreapta sau ambele pri ale unei imagini),utilizai eticheta
cu atributul clearavnd valoarea left (respectiv right sau all).

Elemente nlocuitoare pentru imaginiDeseori, dimensiunea unei imagini de nalt rezoluie (msurat n kilooctei) este mare

i timpul de ncrcare a paginii Web n fereastra browserului crete cu att mai mult cu ctlegtura dintre client i server este mai lent.

Pentru ca utilizatorul s neleag totui ceva din imagine (pn la ncrcarea acesteian ntregime), se apeleaz la dou atribute ale etichetei care nlocuiesc imaginea peperioada ncrcrii:l atributul altadmite ca valoare un text care va fi afiat n locul imaginii.l atributul lowsrcadmite ca valoare adresa URL a unei imagini de joas rezoluie (demic dimensiune), care poate fi ncrcat imediat chiar i n condiiile unor legturi slabe.Exist aplicaii de prelucrare a imaginilor care permit transformarea unei imagini ntr-oimagine asemntoare de joas rezoluie i de dimensiune mult mai mic dect ceaoriginal.

Observaie:l Dac se folosete atributul alt, atunci ori de cte ori mouse-ul este poziionat pe suprafaa imaginii,pe ecran apare ntr-un chenar textul ce constituie valoarea atributului (n cazul exemplului anterior va fiafiat America Online).

Imagini pentru fondul unei pagini Web

O imagine poate fi utilizat pentru a stabili fondul unei pagini Web. n acest scop sefolosete atributul backgroundal etichetei , avnd ca valoare adresa URL a imaginii.Imaginea se multiplic pe orizontal i pe vertical pn umple ntregul ecran.

Observaii:lntruct pagina din exemplul urmtor nu ncape ntr-un singur ecran, va trebui s utilizai bara dederulare vertical pentru a vizualiza ntreaga pagin.ln timpul derulrii, textul i imaginea de fond se deplaseaz mpreun.

Exemplul 8_7. Imagini de joas rezoluie i texte nlocuitoare

Exemplul 8_7Exemplul 8_7Imagini de joasa rezolutie si

texte inlocuitoare

Lecia 8 Imagini


52/160

56

Pentru ca n timpul derulrii unei pagini Web foarte mari imaginea de fond s rmnfix, se utilizeaz atributul bgpropertiesal etichetei cu valoarea fixed. Acestatribut funcioneaz numai cu Internet Explorer.

Exemplul 8_8. Pagin Web cu imagine de fond

Exemplul 8_8Exemplul 8_8Pagina web cu imagine de fondStart
Linie
Linie
Linie
Linie
Linie
Linie
Linie
Linie
Linie
Linie
Linie
Linie
Linie
Linie
Linie
Linie
Linie
Linie
Sfarsit

Exemplul 8_9. Pagin Web cu imagine de fond fix

Exemplul 8_9Exemplul 8_9Pagina web cu imagine de fondfixataStart
Linie
Linie
Linie
Linie
Linie
Linie
Linie
Linie
Linie
Linie
Linie
Linie
Linie
Linie
Linie
Linie
Linie
Linie
Sfarsit

Un tabel de imaginiCelulele unui tabel pot conine imagini. Acestea se introduc (eventual mpreun cu

text) dup etichetele sau .

Exemplul 8_10. Un tabel de imagini

Exemplul 8_10

Exemplul 8_10Un tabel de imagini

HTML prin exemple


53/160

57

Un tabel de tabele de imagini i texte

Exemplul urmtor prezint un tabel cu un rnd i dou coloane.Fiecare celul a tabelului este format din dou rnduri i o coloan. n rndul de susse afl o imagine, iar n rndul de jos se afl un text explicativ privind imaginea.

Exemplul 8_11. Un tabel de tabele de imagini i texte

Exemplul 8_11Exemplul 8_11Un tabel de tabele de imagini sitexte America on Line Preview

CNN Interactive

Imagini folosite ca legturiDespre legturi vei nva n detaliu n Lecia 10. O legtur (link) introduce n pagina

Web o zon activ. Efectund un clic cu butonul stng al mouse-ului pe aceast zon (ncazul nostru pe imagine), n browser se va ncrca o alt pagin Web.

Pentru a utiliza imaginea aol_sl.gifdrept legtur ctre pagina p1.html,utilizaisintaxa:

.

Exemplul 8_12. Imagini folosite ca legturi

Exemplul 8_12Exemplul 8_12Imagini folosite ca legaturiText inainte de imagineText dupa imagine

Observaie:n mod prestabilit, imaginea utilizat pe post de zon activ este nconjurat de un chenaravnd culoarea unei legturi. Dac stabilii pentru atributulborderal etichetei valoarea 0, acestchenar dispare.

Lecia 8 Imagini


54/160

58

Imagini n fiiere externe

Deoarece imaginile necesit un timp ndelungat de ncrcare n browser, deseori npagina Web este preferat inserarea numai unei legturi ctre imagini, lsnd utilizatoruluiposibilitatea de a le ncrca sau nu.

Exemplul urmtor ilustreaz inserarea unei legturi ctre un fiier imagine folosindsintaxa:

Efectuati clic pentru a vedea imaginea .

Exemplul 8_13. Imagini n fiiere externe

Exemplul 8_13Exemplul 8_13Imagini in fisiere externeText inainte de link.

Efectuati clickpentru a vedea imagineaText dupa link.

Un truc foarte des utilizat de creatorii de pagini Web este acela de a utiliza o imaginede rezoluie sczut pe post de legtur ctre aceeai imagine, dar stocat ntr-un fiier cuo rezoluie foarte bun. Utilizatorul vede n pagin imaginea de rezoluie sczut i, dacaceast imagine prezint interes pentru el, atunci prin efectuarea unui clic n browser se

ncarc imaginea de rezoluie nalt.

Exemplul 8_14. Imagini de diferite rezoluii

Exemplul 8_14Exemplul 8_14Imagini de diferite rezolutiiText inainte de imagine.Text dupa imagine.

Alte atribute pentru elementul Urmtoarele dou atribute ale etichetei au utilizri mai reduse la crearea

paginilor HTML:l suppressadmite valorile true i false i permite activarea, respectiv dezactivarea

ncrcrii imaginii ntr-o pagin Web;l longdesceste o adres URL ctre o pagin Web care ofer detalii despre imagine.

Faciliti ale formatului GIFFormatul GIF89a ofer urmtoarele trei mbuntiri ale fiierelor imagine:

1. Imaginile ntreesute (interlaced images) sunt imagini care apar integral n pagina Web,dar, pe msur ce sunt ncrcate, claritatea lor crete.

HTML prin exemple


55/160

59

2. Imaginile transparente (transparent images) sunt imagini care nu au culoare de fond,astfel nct ceea ce se afl n spatele imaginilor devine parial vizibil.3. Imaginile animate (animated images) sunt fiiere imagine speciale coninnd osuccesiune de imagini afiate periodic n pagina Web.

Observaie: Cele mai multe aplicaii de prelucrare a imaginilor permit salvarea fiierelor imagine astfelnct s beneficieze de facilitile enumerate mai sus.

Utilizri speciale ale imaginilorImaginile pot fi utilizate pentru a obine efecte deosebite ntr-o pagin Web. Printre

aceste utilizri speciale putem enumera:1. Linii orizontale formate cu ajutorul imaginilor (eventual animate);2. Simboluri speciale pentru elementele unei liste neordonate (vezi lecia urmtoare).

Lecia 8 Imagini


56/160

Lecia 9Lecia 9

Documentarea unei pagini WebDocumentarea unei pagini WebMetainformaiile sunt informaii despre modul de organizare a informaiilor. n cazul

unei pagini Web, metainformaiile vor furniza date despre modul n care a fost creataceast pagin.

Metainformaiile nu sunt vizibile ntr-o pagin Web. Ele sunt coninute n fiierul surs.htmli sunt utilizate de serverele Web din Internet, specializate n stocarea de informaiidespre informaiile memorate n diferite site-uri.

Serverele specializate n stocarea de metainformaii ofer utilizatorilor motoare decutare puternice care permit regsirea informaiilor (a adreselor la care aceste informaiisunt stocate). Putem enumera ca exemple: www.yahoo.com, www.altavista.com,

www.excite.com, www.lycos.com etc.

Un element pentru metainformaiiMetainformaiile, adic informaiile despre coninutul unei pagini Web, se introduc cu

ajutorul unui element special plasat n interiorul blocului . Acestelement accept patru atribute a cror semnificaie va fi furnizat pe parcurs:l name,l http-equiv,l content,l scheme,la care se poate aduga un atribut universal (comun tuturor elementelor), i anumel lang.

Primele trei atribute se folosesc n perechi: name/contentsau http-equiv/content,celelalte dou atribute (schemei lang) avnd caracter opional.

Descrierea unei pagini WebPentru a face cunoscut motoarelor de cutare aflate n Internet scopul n care a fost

creat o pagin Web, putem insera un element avnd atributele:l nameconfigurat la valoarea description;l contentconfigurat la un ir ce conine o descriere general a paginii.

Exemplul 9_1. Descrierea unei pagini

Mihai Viteazul Home PageBine ati venit la Colegiul National Mihai Viteazul!


57/160

61

Cuvinte cheie pentru o pagin Web

Cuvintele cheie sunt utilizate pentru a regsi informaii prin intermediul unui motor decutare. Selectarea acestor cuvinte cheie trebuie fcut cu atenie pentru ca informaiarespectiv s poat fi localizat.

Cuvintele cheie ofer o alt metod de descriere a informaiilor coninute de o paginWeb.

Pentru a preciza cuvintele cheie ale paginii Web:l atributul nameva primi valoarea keywords;l atributul contentva primi ca valoare o list de cuvinte cheie separate prin virgul.

Exemplul 9_2. Cuvinte cheie

Mihai Viteazul Home Page

Bine ati venit la Colegiul National Mihai Viteazul!

Drepturile de autorAtributul namepoate fi utilizat pentru a furniza informaii legate de autorul paginii i de

Copyright (drepturile de autor). Exemplul urmtor ilustreaz acest lucru.

Exemplul 9_3. Drepturile de autor


Data crerii i data reactualizrii paginii WebPentru a transmite serverelor specializate n regsirea informaiilor din Internet data

crerii i data reactualizrii unei pagini Web, se utilizeaz atributul http-equiv. Valoarea

atributului contenteste, n aceste cazuri, o dat calendaristic i o or n formatul:zzz, zz lll aaaa hh:mm:ss ttt, unde:l zzz reprezint primele trei litere ale zilei din sptmn (Mon, Tue, Wed, Thu, Fri, Satsau Sun);l zz reprezint ziua din cadrul lunii (01, 02, , 31);l lll reprezint primele trei litere din numele lunii (Jan, Feb, Mar, Apr, May, Jun, Jul,

Aug, Sep, Oct, Nov sau Dec);l aaaa reprezint anul exprimat cu 4 cifre (de exemplu 1999);

Lecia 9 Documentarea unei pagini Web


58/160

62

Observaie: Dac data este furnizat ntr-un format ambiguu (de exemplu 03-07-1999), atunciadugai atributul schemecare precizeaz formatul utilizat pentru dat (de exemplu scheme = Month-

Day-Year).

Persoana de contactPentru a putea furniza informaii despre persoana care administreaz site-ul, utilizai

atributul http-equivca n exemplul urmtor. n aceste cazuri, valoarea atributului contenteste o adres e-mail, eventual urmat, ntre paranteze rotunde, de un nume complet alpersoanei.

l hh:mm:ss reprezint ora, minutul i secunda;l ttt reprezint standardul de timp utilizat (de exemplu GMT).

Exemplul 9_4. Data crerii i data reactualizrii unei pagini Web


Exemplul 9_5. Persoana de contact

Mihai Viteazul, Bucuresti Home Page

Bine ati venit la Colegiul National Mihai Viteazul, Bucuresti!

Tipul fiieruluiPentru a preciza informaii legate de tipul fiierului i setul de caractere utilizate,

folosii atributul http-equivca n exemplul urmtor:

Exemplul 9_6. Tipul fiierului



59/160

63

Limba utilizat

Deoarece la regsirea informaiilor cu ajutorul motoarelor de cutare se pot utilizacuvinte cheie scrise n diferite limbi, se pot insera informaii legate de limba utilizat cuajutorul atributului universal (comun i altor elemente) lang.

Exemplul 9_7. Limba utilizat


Bine ati venit la Colegiul National Mihai Viteazul!

Reactualizarea paginii curente din browserO utilizare special a atributului http-equiveste aceea de a stabili rencrcarea

automat n browser a aceleiai pagini (de exemplu, pagina cu evoluia cursurilor la oburs) sau a alteia.

n acest fel se obin faciliti dinamice pentru un site Web.Pentru a rencrca aceeai pagin la un interval precizat de secunde, folosii atributul

http-equiv cu valoarea refresh, iar n atributul contentintroducei numrul de secundedup care dorii ca pagina s fie reactualizat.

Exemplul 9_7. Rencrcarea automat a unei pagini

Mihai ViteazulHome Page


60/160

64

Pentru a insera un bloc de comentarii, utilizai sintaxa:.

Observaii:l Blocul de comentarii poate fi plasat oriunde este necesar n cadrul paginii HTML.l Blocul de comentarii se poate extinde pe mai multe rnduri.l Nu sunt permise spaii ntre .

Exemplul 9_9. Comentarii

Exemplul 9_8. Schimbarea automat a unei pagini

Mihai ViteazulHome PageBine ati venit la ColegiulNational Mihai Viteazul!Aceasta pagina va fi schimbata dupa 9secunde cu pagina cuprins.html!

Mihai Viteazul Home PageBine ati venit la Colegiul

National Mihai Viteazul!

HTML prin exemple


61/160

Lecia 10Lecia 10

LegturiLegturiInteractivitatea unei pagini Web

Legturile (link-urile) reprezint partea cea mai important a unei pagini Web. Eletransform un text obinuit n hipertextsau hipermedia, care permite trecerea rapid de lao informaie aflat pe un anumit server la alt informaie memorat pe un alt server aflatoriunde n lume.

Legturile sunt zone activentr-o pagin Web, adic zone de pe ecran sensibile laapsarea butonului stng al mouse-ului. Un clic efectuat cu mouse-ul pe o legtur esteinterpretat ca o cerere ctre un anumit server din Internet de a expedia ctre calculatorulclient o resurs indicat de legtura respectiv. n acest fel, paginile Web devin interactive(adic rspund la aciuni iniiate de utilizator).

Lucrurile stau n felul urmtor:a) n pagina HTML se insereaz legturi prin intermediul unei etichete speciale i aunui atribut hrefcare ia ca valoare adresa URL a resursei solicitate (vezi Anexa D_URLpentru mai multe detalii).De exemplu, zona activa .b) n pagina Web apar legturile definite la punctul a) ca zone active. Cnd mouse-ul seafl deasupra unei zone active, cursorul mouse-ului ia n mod automat forma unei mini;c) Efectund click pe o zon activ ce reprezint o legtur din pagina Web, browserultrimite ctre serverul care stocheaz noua resurs o cerere de a-i expedia paginarespectiv;d) Serverul WWW (World Wide Web) ce stocheaz noua resurs primete cererea iexpediaz ctre utilizator (calculatorul client) resursa solicitat. Dac aceasta este o noupagin Web, atunci serverul expediaz un fiier HTML mpreun cu fiierele imagine,

sunet etc. referite de acest fiier;e) Calculatorul client (care a expediat cererea) primete resursa solicitat i o ncarc nbrowser;f) Pagina veche este nlocuit de pagina nou n acelai browser sau este lansat nexecuie o nou instan a browserului, care conine noua pagin.

O legtur ctre o pagin aflat n acelai directorO legtur ctre o pagin aflat n acelai director se formeaz cu ajutorul etichetei

(de la anchor = ancor).Pentru a preciza pagina indicat de legtur se utilizeaz un atribut al etichetei

numit href,care ia ca valoare numele fiierului HTML aflat n acelai director, care vanlocui vechea pagin.

Zona activ, adic zona din pagina Web care devine sensibil la apsarea butonuluistng al mouse-ului, este format din textul cuprins ntre etichetele i .

Observaie: Prezena etichetei de sfrit este obligatorie.

Acest exemplu admite c n acelai director (de exemplu, n directorul de lucruc:\html) se afl dou fiiere HTML, p1.htmli p2.html:


62/160

66

O legtur ctre o pagin aflat pe acelai disc localDac pagina referit de legtur se afl pe acelai disc local, dar ntr-un alt director,

atunci pentru a preciza poziia ei n structura de directoare se poate folosi adresarearelativ (vezi lecia 8, paragraful Adresarea relativ).Exem plul urmtor presupune c p1.htmlse afl n directorul c:\html\a\,iar p2.html

se afl n directorul c:\html\b\bb\.

Exemplul 10_1. Comutarea ntre dou pagini

p1Pagina 1Link catre Pagina 2

p2Pagina 2Link catre Pagina 1

O legtur ctre un site particularn exemplul urmtor se utilizeaz adresa URL http://www.netscape.com, care ncarc

pagina de start (homepage) din site-ul firmei Netscape Corporation.De regul, aceast pagin se numete index.html (home.htmlsau default.html) i se

afl n directorul rdcin al calculatorului wwwdin domeniul netscape.com.

Exemplul 10_3. Link ctre site-ul firmei Netscape Communications Corporation

Exemplul 10_3Link catre site-ul firmeiNetscape Communications CorporationNetscape Corporation

HTML prin exemple

Exemplul 10_2. Comutarea ntre dou pagini aflate pe acelai disc local.

p3

Pagina 3Link catrePagina 2

p4

Pagina 4Link catrePagina 1
http://www.netscape.com/http://www.netscape.com/


63/160

67

Utilizarea unei imagini ca zon activ

Zona activ a unei legturi este definit cu ajutorul etichetelor i . De obiceiea este un text care apare subliniat i de culoare albastr. n momentul n care mouse-ulse afl deasupra zonei active, cursorul su ia forma unei mini care i indic utilizatoruluis apese butonul mouse-ului.

Rolul de zon activ poate fi jucat i de o imagine dac inserarea ei are loc ntreetichetele i .

Exemplul 10_4. Zona activ este o imagine

Exemplul 10_4Utilizarea unei imagini ca zonaactiva

Pentru ca acest exemplu s funcioneze:l fiierele p.htmli aol_sl.giftrebuie s se afle n acelai director;l fiierul p.htmltrebuie s fie scris corect din punctul de vedere al limbajului HTML.

Observaii:l Pentru a reveni ntr-o pagin Web anterioar, apsai butonul Back din bara de instrumente abrowserului utilizat.l Imaginea utilizat ca zon activ este nconjurat de un chenar de aceeai culoare cu celelalte legturi.Dac imaginea are atributul borderconfigurat la valoarea 0, atunci chenarul din jurul imaginii dispare.

Ancorentr-o pagin Web foarte lung pot exista puncte de reper (ancore) ctre care se

definesc legturi.O ancor se definete, de asemenea, prin eticheta . Pentru a identifica ancora, se

utilizeaz atributul nameal etichetei , care primete ca valoare un nume atribuit ancorei(de exemplu ancora1).

Pentru a insera o legtur ctre ancora1 definit n aceeai pagin, se utilizeazeticheta avnd atributul hrefde valoare #ancora1.

Pentru a introduce o legtur ctre o ancor definit n alt document (alt pagin) aflatn acelai director, atributul hrefprimete o valoare de formanume_fisier.html#nume_ancora.

Pentru a funciona corect, urmtorul exemplu presupune c n directorul curent se aflfiierul e10_5.htmlavnd coninutul de la exemplul anterior.

Instane multiple pentru un browserLa nceperea unei sesiuni n Internet, pe calculatorul client (al utilizatorului) se lan-

seaz n execuie o instan a browserului folosit, care ncarc pagina Web solicitat.Dac n timpul sesiunii de lucru se efectueaz un clic pe o legtur ctre o pagin

nou, atunci n mod prestabilit noua pagin o va nlocui pe cea precedent, folosindaceeai instan (fereastr) a browserului.

Lecia 10 Legturi


64/160

68

Dac dorim ca pagina solicitat s fie ncrcat ntr-o alt fereastr dect cea curent,atunci trebuie lansat n execuie o nou instan a browserului care va conine nouapagin. Acest lucru se realizeaz folosind atributul targetal etichetei , care primeteca valoare un nume (de exemplu fereastra)

Date post:	03-Jun-2018
Category:	Documents
Upload:	simida
View:	273 times
Download:	2 times

HTML Prin Exemple

Documents