Suport de curs HTML

CREAREA UNUI DOCUMENT WEB

CUPRINSUL CURSULUI:

GENERALITĂŢI........................................................................................................................2

1. STRUCTURA UNUI DOCUMENT HTML.................................................................4

2. ELEMENTE STANDARD ALE UNUI DOCUMENT HTML...................................5

3. CULORI, FONTURI ŞI MARGINI...............................................................................6

4. APLICAREA UNOR EFECTE ASUPRA TEXTULUI ŞI A PARAGRAFELOR.. .7

5. BLOCURI DE TEXT......................................................................................................8

6. LISTE................................................................................................................................9

7. TABELE.........................................................................................................................12

8. IMAGINI........................................................................................................................14

9. LEGĂTURI ÎNTRE PAGINILE WEB.......................................................................16

10. UTILIZAREA SUNETELOR ŞI VIDEOCLIPURILOR ÎN PAGINILE WEB.....19

11. CADRE...........................................................................................................................20

12. FORMULARE.................................................................................................................21

prof. Carmen Manu1

Suport de curs HTML

GENERALITĂŢI

Pentru a face schimb de informaţii, calculatoarele sunt interconectate, formând reţele de calculatoare.

Multe dintre aceste reţele de calculatoare sunt conectate între ele, formând inter-reţele (reţea de reţele de calculatoare). O reţea de reţele se numeşte Internet (net = reţea).

Cea mai mare inter-reţea publică este reţeaua Internet.Există mai multe metode de acces (servicii) la informaţia stocată pe un calculator prin intermediul

reţelei Internet:- FTP – File Transfer Protocol – serviciul pentru transferul fişierelor- Telnet – serviciul pentru accesul de la distanţă la resursele unui calculator- Electronic Mail – serviciul de mesagerie electronică- News – serviciu de ştiri- World Wide Web – este o altă metodă de acces la informaţia stocată pe un calculator aflat

oriunde în lume.

World Wide Web (www) înseamnă în traducere ad-litteram „pânză de paianjen întinsă în lumea întreagă”. Acesta utilizează tehnologia client – server.

Pentru a comunica între ele două calculatoare folosesc un sistem de reguli ce formează un protocol.

Serviciul www utilizează ca protocol de comunicare între client şi server HiperText Transfer Protocol (HTTP), adică Protocolul de Transfer al Hipertextului.

Hipertextul este un text îmbogăţit, ce conţine atât text obişnuit, cât şi etichete pentru formatarea textului şi încapsularea altor tipuri de informaţii. Hipertextul este stocat în fişiere având extensia .html.

Un fişier ce conţine un hipertext este scris într-un limbaj specific numit HiperText Markup Language (HTML).

HTML este un limbaj care permite inserarea de:- text- sunete, imagini şi filme- indicatori de prezentare a informaţiei- legături către alte pagini web aflate oriunde în lume- aplicaţii

Un calculator din Internet se numeşte gazdă (host). El este identificat în mod unic printr-un nume. Ex. mishu.home.ro

Informaţia care circula între calculatoarele unei reţele este încapsulată în pachete.Un pachet conţine:- adresa expeditorului şi adresa destinatarului- informaţia- numele aplicaţiei client care a formulat cererea şi numele aplicaţiei de pe server care va primi

cererea spre rezolvare.

Reţeaua Internet dispune de: mijloace de dirijare a pachetelor astfel încât să ajungă la destinaţie - Internet Protocol (IP) mijloace de corecţie a erorilor de transmitere a pachetelor – Transfer Control Protocol

(TCP).În orice calculator informaţia este stocată în unităţi numite fişiere. Aceste fişiere conţin text,

programe, imagini, filme, sunete, etc. Pentru www sunt importante anumite fişiere speciale, numite pagini Web. Acestea au extensia .html sau .htm.

Paginile Web sunt vizualizate pe calculatorul client prin intermediul unei aplicaţii speciale numite browser.

prof. Carmen Manu2

Suport de curs HTML

Browser-ul permite schimbarea paginii vizualizate prin intermediul:- unei ferestre speciale, numită Address- meniului FileOpen Browse- legăturilor afişate în pagina Web.Cele mal utilizate browser-e sunt:- Netscape Communicator; - Internet Explorer- HotJava.O mulţime organizată de pagini Web formează un site Web. În WWW, clientul solicită pagini

Web de la un site Web.

HiperText Transfer Protocol Demon (httpd) este o aplicaţie care se execută pe serverul Web pentru a prelucra cererile de pagini Web recepţionate de acesta de la clienţi.

HomePage (pagina gazdă) este o pagină din site-ul unei organizaţii care: este în mod uzual prima pagină accesată din site; este o pagină de prezentare a organizaţiei; oferă modul cel mal eficient de explorare a informaţiilor, aflate în site.

Un server Web este un calculator care adăposteşte un Site Web şi care este capabil să răspundă la cereri de pagini Web din partea unui client. Pentru a răspunde permanent cererilor Web, un calculator trebuie să ruleze permanent o aplicaţie specială: httpd.

Un utilizator al serviciului WWW poate solicita vizualizarea prin intermediul browser-ului a unei pagini Web care poate fi localizată pe un calculator aflat oriunde în lume.

O pagină Web este unic determinată prin adresa URL (Uniform Resource Locator) asociată.URL înseamnă Identificator Universal al Resurselor în Internet. Adresa URL a paginii curente

vizualizate de browser pare în fereastra Address.Ex. de URL: http://www.cnmv.ro/index.html unde fiecare reprezintă:

http – metoda de acces la pagină www.cnmv.ro – calculatorul pe care se află Index.html – numele paginii

Paginile Web au următoarele caracteristici:- sunt multimedia – conţin informaţii sub formă de text, imagini, sunete, filme etc.- sunt interactive – răspund la cererile utilizatorului- sunt independente de platforma hardware şi software – se văd la fel pe orice calculator,

indiferent de sistemul de operare şi utilizând orice browser.

prof. Carmen Manu3

Suport de curs HTML

1. STRUCTURA UNUI DOCUMENT HTML

HTML este un limbaj simplu, compus din coduri speciale (marcaje) care se inserează intr-un text pentru a adăuga informaţii despre formatare.

Un document HTML are următorul ciclu de viaţă:1. Editarea fişierului HTML cu:

a) un editor de texte obişnuit (NotePad, WordPad) saub) cu un editor de texte dedicat (Netscape Comunicator, HotMetal, etc)

2. Salvarea fişierului editat folosind extensia .html3. Vizualizarea paginii cu ajutorul unui browser

In cadrul unui document HTML, un marcaj (tag - în limba engleza) va avea forma <nume_marcaj> . Parantezele unghiulare sunt elementele care indica prezenta unui marcaj; numele marcajelor poate fi scris oricum, limbajul nefiind senzitiv la literele mari/mici.Exista doua tipuri de marcaje:

- individuale (ex. <br> )- perechi (ex. <p> ...</p> ) - de menţionat ca sfârşitul unui marcaj este indicat prin

utilizarea caracterului ”/” in fata numelui de marcaj In funcţie de modul de formatare a paginii, avem marcaje de tip:

- bloc: este afişat sub elementul anterior (ex. <p> )- inline: este afişat după elementul anterior (ex. <span> )- table: este afişat sub forma unui tabel

Marcajele perechi pot fi imbricate: <nume_marcaj1> <nume_marcaj2> ................</nume_marcaj2> </nume_marcaj1>

Browser-ele vor ignora marcajele si opţiunile pe care nu le recunosc.

Observaţie!Un document HTML are extensia .html sau .htm. El se numeşte fişier sursă.Un browser încarcă un document HTML, interpretează marcajele conţinute de document,

iar rezultatul este afişat în fereastra browserului şi se numeşte pagină Web.

prof. Carmen Manu4

Suport de curs HTML

2. ELEMENTE STANDARD ALE UNUI DOCUMENT HTML

O pagină HTML standard este formată din:- bloc extern <html> … </html> - două blocuri incluse: - <head> …</head> = antetul

- <body> … </body> = corpul – cuprinde conţinutul propriu zis al paginii HTML, adică ceea ce va fi afişat în fereastra browser-ului.

Titlul unei pagini web - <title> … </title> - va apărea în bara de titlu a ferestrei browser-ului.- nu este obligatoriu- se scrie imediat după <head>

Exemplul 1<html> <head> <title> Titlul apare in bara de titlu a ferestrei </title> </head> <body>

Aceasta este prima mea pagina Web</body> </html>

Sfârşit de linie - <br> - trecerea pe o linie nouă.

Exemplul 2<html> <head> <title> Acesta este titlul paginii </title> </head> <body>

Prima linie<br> A doua linie.<br> A treia linie.

</body> </html>

Blocuri preformatate – <pre> …</pre> - sunt folosite pt ca browser-ul să interpreteze corect caracterele „spaţiu”, „tab” şi „CR/LF” ce

apar în cadrul unui text.

Exemplul 3<html> <head> <title> Acesta este titlul paginii </title> </head> <body>

<pre> Prima linieA doua linieA treia linie.

</pre> </body> </html>

prof. Carmen Manu5

Suport de curs HTML

3. CULORI, FONTURI ŞI MARGINI

A. Culoarea de fondO culoare poate fi precizată în 2 moduri:

1. Printr-un nume de culoare. Sunt disponibile cel puţin 16 culori (aqua, black, blue, fuschia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow)

2. Prin construcţia ”#rrggbb”, unde r, g, b sunt cifre hexazecimale şi pot lua valorile: 0, 1...9, a, A, b, B...f, F; se pot defini astfel 65536 culori (Ex. Blue=”#0f4eA8”)

Culoarea unei pagini se precizează astfel: <body bgcolor=”nume culoare”> Culoarea textului se precizează astfel: <body text=”nume culoare”>

Observaţie! Atât culoarea de fond cât şi culoarea textului se pot preciza simultan folosind atribute multiple

astfel:<body bgcolor=”nume culoare” text=”nume culoare”>

B. Stabilirea caracteristicilor textului de bazăTextul afişat este caracterizat de următoarele attribute:

Mărime (size) Culoare (color) Font (style)

Sintaxa utilizată este:<basefont size=”număr” color=”culoare” style=”font”>

unde: Număr = 1, 2, 3, 4, 5, 6, 7 (1 pt. fontul cel mai mic şi 7 pt. fontul cel mai mare) Culoarea = precizată prin nume sau construcţia RGB Font = ”Arial” sau ”Serif” sau un font instalat de calculator ca Times New Roman sau

Arial

C. Stabilirea marginilor paginii Web se face astfel:<body leftmargin=”100” topmargin=”20%”>

unde:Leftmargin – stabileşte distanţa dintre marginea din stânga a ferestrei browser-ului şi

marginea stângă a paginii WebTopmargin –stabileşte distanţa dintre marginea de sus a ferestrei browser-ului şi marginea

de sus a paginii Web.

Exemplu 4:<html>

<head> <title> exemplu</title> </head> <body bgcolor="silver" text="blue">

Pagina are fondul de culoare gri si textul de culoare albastra<br> <font style="TimesRoman" size=3 color="ff0000"> Textul este scris cu fontul "Times Roman",

marimea 3, culoarea rosie<br> <font size=3 color="green"> Textul este scris cu fontul implicit, mărimea 3, culoarea verde<br> <font  size=5> Textul este scris cu fontul implicit, mărimea 5, culoarea implicita<br> Succes mai departe !

</body> </html>

prof. Carmen Manu6

Suport de curs HTML

4. APLICAREA UNOR EFECTE ASUPRA TEXTULUI ŞI A PARAGRAFELOR

Cele mai utilizate efecte ce se pot aplica asupra textului dintr-o pagină Web sunt: <b> …</b> - caractere îngroşate <big> …</big> - caractere mai mari cu o unitate decât cele curente <small> …</small> - caractere mai mici cu o unitate decât cele curente <i> …</i> - caractere italic (cursive) ^… - caractere exponent _… - caractere indice <u> …</u> - caractere subliniate <strike> …</strike> sau <s> …</s> - caractere secţionate la mijloc cu o linie

Exemplu 5<html> <head> <title> Stiluri pt blocurile de text </title> </head> <body>

Normal <b> ingrosat </b> normal <i> cursiv </i> normal <u> subliniat </u> normal <s> sectionat </s> <br>

Normal <big> marit</big> normal <small> micsorat </small> <br> F _(x) = (x ₁ + x ₂ ) ³

</body> </html>

prof. Carmen Manu7

Suport de curs HTML

5. BLOCURI DE TEXT

1. Inserarea unei adrese - <address> …</address> - Browserul afiseaza textul cuprins intre delimitatori pe un rand nou

2. Indentarea unui bloc - <blockquote> …</blockquote> - indentat=marginea stg a textului sa fie deplasata la o anumită distanţă de marginea pag.- Browserul adaugă un spaţiu suplimentar inainte şi după o asemenea etichetă

3. Blocuri - <div> (diviziune)- pt delimitarea şi formatarea unui bloc- pt stabilirea caracteristicilor bloc <div> se foloseşte parametrul align ce are valorile:

- left (aliniere la stg)- center (centru)- right (dreapta)

- Ex. <div align=center> …</div>

4. Blocul preformatat - <pre> …</pre> – Permite păstrarea caracteristicilor textului aşa cum a fost introdus în textul sursă

5. Blocuri paragraf - <p> …</p> – Face trecerea la o linie nouă– Inserează un spaţiu suplimentar înainte şi după blocul paragraf– Alinierea textului se face cu ajutorul atributului align (left, right, center)– Ex.<p align=right> …</p> !</p> - este opţional

6. Blocuri de titlu– Pt titluri de capitole <h1, …h6> …</h1…h6> – Acceptă atributul align pt alinierea textului– Ex. <h1> Titlu mărimea 1</h1>

<h6 align=center> Titlu mărimea 6</h6> 7. Linii orizontale

– Se face cu ajutorul etichetei <hr> – Pt a configura o linie se folosesc atributele:

• Align = aliniere• Width=lungime (nr intregi sau nr între 1% şi 100%)• Size=grosime (nr intregi pozitive)

prof. Carmen Manu8

Suport de curs HTML

6. LISTE

In paginile de internet se gasesc adesea liste. Ele pot fi :1. Liste neordonate;2. Liste ordonate.3. Liste de definitie;4. Liste personalizate

1. Listele neordonate- Se încadrează între etichetele <ul> … </ul> (“ul”

= “unordered list”). - fiecare element al listei este iniţiat de eticheta

<li> (list item).- Tag-urile <ul> şi <li> pot avea un atribut type

care stabileşte caracterul afişat în faţa fiecărui element al listei. Valorile posibile ale acestui atribut sunt:o “circle” pentru “o”o “disc” pentru “●”o “square” pentru “■”

Ex. <ul type=circle> ….</ul>

Exemplul 6<html> …. <ul type=circle> Un text este caracterizat de următoarele atribute: <li> Mărime (size) <li> Culoare (color) <li> Font (style) </ul> ….</html>

- Listele neordonate pot fi imbricate pe mai multe niveluri.

Exemplul 7<html> …. <ul > Elementele şi atributele unei pagini html: <li> body

<ul> Atribute: <li> bgcolor <li> text </ul>

<li> font<ul> Atribute:

<li> face <li> size

<li> color </ul> </ul> ….</html>

2. Listele ordonate- bloc <ol> şi </ol> (“ol” = “ordered list”). - fiecare element al listei este iniţiat de eticheta

<li> (list item).

prof. Carmen Manu9

Suport de curs HTML

- Tag-urile <ol> şi <li> pot avea un atribut type care stabileşte tipul de caractere utilizate pentru ordonarea listei. Valorile posibile ale acestui atribut sunt:o “A” pentru o ordonare de tipul A, B, C, D etc (litere mari)o “a” pentru o ordonare de tipul a, b, c, d etc (litere mici)o “I” pentru o ordonare de tipul I, II, III, IV etc (cifre romane mari)o “i” pentru o ordonare de tipul i, ii, iii, iv etc (cifre romane mici)o “1” pentru o ordonare de tipul 1, 2, 3, 4 etc * (cifre arabe – opţiune prestabilită)Ex. <ol type=A>

<li> ……</ol>

Observaţie! Tag-ul <ol> poate avea un atribut start care stabileşte valoarea iniţială a secvenţei de ordonare,

valoare care trebuie să fie un număr întreg pozitiv. (Ex: <ol type= “A” start=”3”> )Tag-ul <li> poate avea un atribut value care stabileşte valoarea pentru elementul respectiv al

listei, valoare care trebuie să fie un număr întreg pozitiv.Exemplu: <ol start=”3”> Repetaţi următorii paşi ai algoritmului:

<li> salvaţi fişierul<li value=”5”> încarcaţi fişierul în browser <li> Schimbaţi browser-ul

</ol>

Exemplul 8<html> <head> <title> Exemplul 3</title> </head> <body bgcolor=”cyan”>

<basefont style=”Arial” size=6 color=”blue” > Exemplul 3 <br> O listă ordonată <ol> Pentru a realiza o pagină Web trebuie: <li> Creat un fişier de comenzi în limbajul HTML <li> Salvat fişierul cu extensia .html <li> Încărcat fişierul html într-un browser </ol>

</body> </html>

3. Listele de tip definitie:

- O listă de definiţii este formată dintr-o succesiune de termeni, fiecare termen fiind urmat de definiţia sa.

- Întreaga listă se încadrează între etichetele <dl> şi </dl> (“dl” = “definition list”).

- Un termen al listei este iniţiat de eticheta <dt> (“dt” = “definition term”).

- Definiţia unui termen este iniţiată de eticheta <dd> (“dd” = “definition description”)

Exemplu 9<html> ....

<dl> Glosar de termeni pentru Internet <dt> Browser <dd> Aplicaţie ce rulează pe computerul client o pagină HTML. <dt> Server WWW <dd> Computer care răspunde la cererile de pagini Web emise de un client</dl>

prof. Carmen Manu10

Suport de curs HTML

</body> </html>

4. Liste personalizate- utilizează pe post de elemente imagini

Exemplu 10<html> …..

O listă personalizată <basefont style=”Arial” size=4 color=”brown” > <ul> Planete din sistemul solar:<br> <img src=”blue-ball.gif”> Mercur<br> <img src=”blue-ball.gif”> Venus<br> <img src=”blue-ball.gif”> Neptun<br> </ul>

…</html>

Aplicaţie:Să se creeze următoarea listă de liste ordonate şi neordonate:

O listă ordonată de liste ordonate şi neordonate Un sistem informatic include: 1. Hardware:

a) placa de bază b) Procesor c) memorie

2. Software de bază Windows Linux

3. Software de aplicaţie Excel CorelDraw Autocad

prof. Carmen Manu11

Suport de curs HTML

7. TABELE

Pentru a insera un tabel se folosesc etichetele <table> ….</table> . Un tabel este format din rânduri. Pentru a insera un rând se folosesc etichetele <tr> ...</tr> . Un rând este format din mai multe celule ce conţin date. O celula se introduce cu eticheta <td> .Un tabel cu chenar <table border=”1, 2, 3,....”>

a) Alinierea tabelului in pagina <table align=”left” sau “center” sau “right”>

b) Definirea culorilor de fond pt. un tabel / rând / celulă se face cu ajutorul atributului „bgcolor” astfel:

Pt. tot tabelul <table bgcolor=”nume_culoare”> Pt. un singur rând <tr bgcolor=”nume_culoare”> Pt. o singura celula <td bgcolor=”nume_culoare”>

c) Dimensionarea celulelor unui tabel se face cu ajutorul atributelor cellspacing = distanţa în pixeli dintre 2 celule vecine cellpadding = distanţa în pixeli dintre marginea unei celule şi conţinutul ei

Ex. <table border=”3” cellpadding=”20” cellspacing=”10”>

d) Dimensionarea unui tabel se face cu ajutorul etichetelor „width”=lăţime şi „height”=înălţime

Ex. <table border width=”300” height=”50%”>

e) Zona din jurul unui tabel = distanţa dintre tabel si celelalte elemente poate fi stabilită cu atributele hspace, vspace

Ex. <table border hspace=”200” vspace=”20”>

f) Titlul unui tabel = unui tabel i se poate ataşa un titlu cu ajutorul etichetei <caption> care se plasează in interiorul etichetelor <table>

Ex. <table border> <caption align=”top”> Titlu tabel

Titlul tabelului poate fi aliniat cu ajutorul etichetelor<caption align=”top” sau “bottom” sau “left” sau “right”> Unde: top=sus left=stânga

Bottom=jos right=dreapta

g) Cap de tabel = Celulele cu semnificaţia de cap de tabel se vor scrie cu ajutorul etichetei <th>

h) Alinierea conţinutului unei celule se poate face: Alinierea pe orizontala a unei celule = atributul alignEx. <td align=”left”, “center”, “right”, “char”> Unde: char=caracter Alinierea pe verticala a unei celule = atributul valignEx. <td valign=”baseline”, “bottom”, “middle”, “top”> Unde: baseline=linia de bază; bottom=jos; middle=mijloc; top=sus

i) Dimensionarea exacta a celulelor unui tabelEx. <td width=”50” height=”100”>

j) Tabele cu forme oarecare atributul colspan = extinderea unei celule peste celulele din dreapta ei

prof. Carmen Manu12

Suport de curs HTML

atributul rowspan = extinderea unei celule peste celulele de dedesubt se face cu Ex. <td rowspan=”3” colspan=”2”>

k) Celule vide pt. un tabel se fac După <td> se pune caracterul &nbsp După <td> se pune <br>

l) Atribute Internet Explorer pt. Tabele Background stabileste imaginea de fond pt. tabel Bordercolor stabileste culoarea pt. chenar Bordercolorlight stabileste culoarea pt. chenarul 3D al unui tabel Bordercolordark stabileste culoarea pt. chenarul 3D al unui tabel

m) Grupuri de coloane = Blocul <colgroup> ...</colgroup> permite definirea unui grup de coloane. Atributele acceptate de <colgroup> sunt:

Span determina nr. de coloane din grup Width determina o latime unica pt. coloanele din grup Align determina un tip unic de aliniere pt. coloanele din grup

prof. Carmen Manu13

Suport de curs HTML

8. IMAGINIImaginile sunt stocate in fişiere cu diverse formate. Tipuri de fisiere pentru imagini:

- gif- jpeg- xpm

- xbm- bmp- dib

- tiff- png- pcx

Adresa URL a unei imagini (Uniform Resource Locator) = standard folosit in identificarea unica a unei resurse in internet.

a) Inserarea unei imagini = utilizăm eticheta <img> si atributul src

Ex. <img src= ‘‘nume imagine.gif’’>

Adresa relativa

Daca dorim sa referim din fisierul Test.html aflat in c:\html\a fisierele imagine aflate in diverse directoare putem utiliza constructiile:

o i2.gifo aa\i3.gifo ..\i2.gif

o ..\b\i4.gifo ..\b\bb\i5.gifo ..\..\i2.gif

Obs! 1) Directorul parinte al unui director curent se indica prin ..\

Obs! 2) Pentru a nu scrie adresa relativă a unei imagini, trebuie să avem în acelaşi dosar (folder) şi imaginea folosită şi fişierul sursă care o încarcă.

b) Chenarul unei imagini = la adăugarea unui chenar in jurul imaginii se foloseşte atributul „border”

Ex. <img src=’’nume imagine.jpg’’ border=’’5’’>

c) Dimensionarea unei imagini = O imagine are anumite dimensiuni pe orizontală si pe verticală, stabilite în momentul creării ei. Daca se doreşte modificarea dimensiunilor folosim atributele width si height.

Ex. <img src=’’nume imagine.gif’’ width=’’200’’ height=’’20%’’>

d) Alinierea unei imagini in pag. Web se face cu atributul align=”Left”; „Right”, „Top”, „Middle”, „Bottom sau baseline”

Ex. <img src=’’nume imagine.gif ’’ align= ‘’top’’>

e) Alinierea textului in jurul unei imagini = Atributele hspace şi vspace precizează distanta in pixeli pe orizontală respectiv verticala.

Ex. <img src=’’nume imagine.gif’’ align=’’left’’ hspace=’’50’’ vspace=’’50’’>

f) Elemente înlocuitoare pentru imagini = Deseori, dimensiunea unei imagini de înalta rezoluţie este mare si timpul de încărcare a paginii este mare. Pt. ca utilizatorul să înţeleagă ceva din imagine se folosesc 2 atribute ale etichetei <img> care înlocuiesc imagine pe perioada încărcării

Alt admite ca valoare un text ce va fi afisat in locul imaginii Lowsrc admite ca valoare adresa URL a unei imag. de rezolutie mica.

g) Imagini pt. fondul unei pagini Web = <body background= ‘’nume imagine.gif’’>

Imaginea se multiplica pe orizontală şi pe verticală până umple întregul ecran.Pt. ca in timpul derulării unei pagini Web foarte mari imaginea de fond sa rămână fixă, se

utilezează atributul Bgproperties= ‘’fixed’’ al etichetei Body

prof. Carmen Manu14

Suport de curs HTML

Ex. <body background=’’nume imagine.gif’’ bgproperties=’’fixed’’>

h) Introducerea unei imagini în cadrul unui tabel = se procedează astfel :Ex. <table>

<tr> <td> <img src=’’nume imagine.gif’’ > ……………………………………………….</table>

prof. Carmen Manu15

Suport de curs HTML

9. LEGĂTURI ÎNTRE PAGINILE WEB

Legăturile (link-urile) transformă un text obişnuit în hypertext, care permite trecerea rapidă de la o informaţie aflată pe un server la altă informaţie memorată pe un alt server.

Legăturile sunt zone active într-o pagină Web, adică zone de pe ecran sensibile la apăsarea butonului stâng al mouse-ului. Un click efectuat cu mouse-ul pe o legătură este interpretat ca o cerere către un anumit server din Internet de a expedia către calculatorul client o resursă indicată de legătura respectivă.

Adrese absolute şi adrese relative

Pentru a putea localiza un fişier în structura ierarhică de directoare, în scopul de a stabili o legătură către el, se poate folosi adresarea absolută sau cea relativă.

Adresarea absolută a unui fişier conţine calea precisă şi completă către fişierul respectiv pornind de la vârful ierarhiei de directoare.

Ex. C:\ManualHTML\Exemple\culori.html adică fisierul culori.html se află pe discul C:, în directorulManualHTML, subdirectorul Exemple.

Adresarea relativă a unui fişier precizează poziţia acestuia în raport cu documentul HTML din care este apelat.

Stabilirea legăturilorPentru a insera legături într-un document HTML folosim eticheta <A> …</A> cu atributul

obligatoriu href (Hypertext Reference) care primeşte ca valoare adresa URL a fişierului cu care dorim să stabilim legătura.

<A href=”adresa URL”> text sau imagine</A>

În funcţie de localizarea fişierului către care se face legătura legăturile se clasifică în:1. Legături în cadrul aceleiaşi pagini (ancore)2. Legături către o pagină aflată în acelaşi folder3. Legături către o pagină aflată în alt folder4. Legături către pagini externe

1. Ancore - legături în cadrul aceleiaşi pagini

Pentru a facilita navigarea într-o pagină care conţine un text de mari dimensiuni se pot insera în acesta anumite puncte de reper către care se definesc legături (ancore).

Pentru a plasa o ancoră sunt necesare 2 elemente: Punctul spre care dorim să facem legătura

<A name=”nume_ancoră”> </A> Legătura propriu zisă

<A href=”#nume_ancora”> Text explicativ</A>

Obs. Prezenţa semnului # este obligatorie, acesta indicând browserului că este vorba despre o legătură internă, în cadrul paginii.

Pentru a introduce o legătură către o ancoră definită în alt document aflat în acelaşi director vom proceda astfel:

<A href=”nume_fişier.html#nume_ancoră”> Text explicativ</A>

Exemplu1:

<Html> <head> <Title> Legături1</title> </Head>

prof. Carmen Manu16

Suport de curs HTML

<Body> <A name=”ancora1”> </A> <H1 align=”center”> Ancore definite in acelasi document</H1> <HR> <Basefont size=”5”> <BR> Litera A

<BR> Litera B<BR> Litera C<BR> Litera D<BR> Litera E<BR> Litera F

………………………………………<BR> Litera X<BR> Litera Z<BR>

<A href=“#ancora1“> Sus </A> <BR> <BR>

<H1 align=”center”> Ancore definite in alt document</H1> <HR> <P> Click<A href=“text.html#citat“> AICI</A> pentru a deschide un document situat în altă pagină</Body> </ Html> Salvaţi acest exemplu cu numele Legături1.html

2. Legătura către o pagină aflată în acelaşi director (folder) se face astfel:

<A href=”nume_fişier.html”> Text explicativ</A>

Exemplu2:

<Html> <head> <Title> Legături 2</title> </Head> <Body>

<H1 align=”center”> Pagina1</H1> <HR> <A href=”b.html”> Link către pagina 2 </A>

</Body> </ Html>

Salvaţi acest exemplu cu numele a.html iar exemplul următor cu numele b.html. în acelaşi folder.

Exemplu3:

<Html> <head> <Title> Legături3</title> </Head> <Body>

<H1 align=”center”> Pagina2</H1> <HR> <A href=”a.html”> Link către pagina 1 </A>

</Body> </ Html>

Obs. Numele fişierelor care reprezintă valori ale atributului href sunt case sensitiv.

prof. Carmen Manu17

Suport de curs HTML

3. Legătura către o pagină aflată în alt director (folder) se face astfel:

<A href=”C:\My Documents\work\nume_fişier.html”> Link</A>

Exemplul4:Presupunem că ne aflăm într-un document HTML numit legături2.html plasat în folderul

de lucru Work. În afară de acest folder în care lucrăm, în My Documents se mai află şi folderul Imagini.

Dacă dorim să realizăm o legătură cu un fişier numit Trandafir.gif din folderul Imagini vom folosi

eticheta <A> , plasată în documentul Legături2.html, va avea următoarea formă:<A href=”../Imagini/Trandafir.gif”> Deschide imaginea</A>

Obs. Şirul de caractere “../” urcă un nivel în ierarhia de directoare, în raport cu directorul curent.

4. Legătura către pagini externe se realizează specificând adresa URL a paginii ca valoare a atributului href.

Ex. <A href=http://www.yahoo.com”> </A>

Alegerea culorilor pentru legături

În mod prestabilit se utilizează 3 culori pentru legături: Albastru pentru link-urile nevizitate Violet pentru link-urile vizitate Roşu pentru link-urile active

Pentru a modifica după preferinţe aceste culori se folosesc cele 3 atribute ale etichetei <Body> Link pentru link-urile nevizitateVlink pentru link-urile vizitateAlink pentru link-urile active

Exemplul5: <Html> <head> <Title> Legături4</title> </Head> <Body link=”yellow” vlink=”green” alink=”magenta”>

<H1 align=”center”> Setarea culorilor pentru link-uri</H1> <HR> <Br> galben pentru legături nevizitate, verde pentru legături vizitate şi magenta pentru

legături active<Br> < A href=“Legături2.html“> Link către pagina 1 </A> < A href=“Legături3.html“> Link către pagina 2 </A>

</Body> </ Html>

prof. Carmen Manu18

Suport de curs HTML

10. UTILIZAREA SUNETELOR ŞI VIDEOCLIPURILOR ÎN PAGINILE WEBVA URMA

prof. Carmen Manu19

Suport de curs HTML

11. CADREVA URMA

prof. Carmen Manu20

Suport de curs HTML

12. FORMULAREVA URMA

prof. Carmen Manu21

Suport de curs HTML

prof. Carmen Manu22