Sunteți pe pagina 1din 52

Universitatea Constantin Brncui din Trgu-Jiu Facultatea de Inginerie Departamentul de Automatic, Energie i Mediu

Tehnologii Web

Lector univ. dr. Adrian Runceanu

Curs 2

Limbajul Html (partea II)

Tehnologii Web
3. Inserarea imaginilor 4. Inserarea legturilor n documente HTML 4.1. Elementul A 4.2. Elementul LINK 4.3. Elementul BASE 5. Liste 5.1. Lista ordonat 5.2. Lista neordonat 5.3. Lista de tip definiie 5.4. Utilizari speciale ale listelor
3 Tehnologii WEB - curs

3. Inserarea imaginilor

Imaginile sunt stocate in fisiere cu diverse formate. Formatele acceptat de browsere pentru fisierele imagine sunt: GIF (Graphics Interchange Format) cu extensia .gif JpEG (Joint photographic Experts Group) cu extensia .jpeg sau .jpg XpM (X pixMap) cu extensia .xmp XBM (X BitMap) cu extensia .xbm BMp (BitMap) cu extensia .bmp (numai cu Internet Explorer) TIFF (Tagged Image File Format) cu extensia .tif sau .tiff PNG (Portable Network Graphic) cu extensia .png Cele mai raspandite formate sunt: GIF (8 biti pentru o culoare, 256 culori posibile) si JpEG (24 biti pentru o culoare, 16777216 de culori posibile).
Tehnologii WEB - curs

3. Inserarea imaginilor
Adresa URL a unei imagini URL ("Uniform Resourse Locator) = identificator unic al resursei este un standard folosit in identificarea unica a unei resurse in Internet. Toate imaginile cu care vom lucra vor avea adresa URL exprimata in functie de directorul ce contine documentul HTML care face referire la imagine.
5 Tehnologii WEB - curs

3. Inserarea imaginilor
Elementul img se utilizeaz pentru a ataa unei pagini o imagine. Vom folosi tag-ul <img>. Forma general a acestui element este: Atributele sunt: <img atribute> SRC identific fiierul care conine imaginea respectiv (de tip .jpg, .gif etc.).

Tehnologii WEB - curs

3. Inserarea imaginilor
n

aceast etap nvm s crem paginile pe propriul calculator, fr a fi conectai la internet. Prin urmare, fiierul care conine imaginea se va gsi ntr-un folder oarecare (n exemplul urmtor el se gsete n acelai folder n care gsim i fisierul cu extensia .html (cel care conine pagina). Din acest motiv, sursa nu conine i calea, dar, dac este cazul, calea poate fi coninut.
7 Tehnologii WEB - curs

3. Inserarea imaginilor
ALIGN -tipul de aliniere - reine una din valorile de mai jos i specific browser-ului modul n care va alinia imaginea n raport cu textul: Right, Left, Top, Middle, Bottom Fie fiierul text de mai jos (scris n Notepad). Observm c am scris un prim paragraf care nu conine nici o imagine. Apoi, am scris un paragraf care, la nceput, conine o imagine apoi text. n final, avem un paragraf numai cu text.

8 Tehnologii WEB - curs

3. Inserarea imaginilor
Exemplu:
<p> Un paragraf asezat inaintea imaginii</p> <p> <img src=mihai24.jpg align=right> Se observ cum se alinieaz imaginii n al doilea paragraf </p> <p> alt text este scris pentru a evidentia alinierea !!</p>

Right dac ALIGN reine aceast valoare, imaginea se aliniaz n dreapta, iar textul care urmeaz este scris n locul rmas.

Tehnologii WEB - curs

3. Inserarea imaginilor
Top numai primul rnd al textului este scris n dreapta imaginii, n partea de sus. Apoi, textul continu dup imagine, ocupnd ntreaga lime a ecranului.

10

Tehnologii WEB - curs

3. Inserarea imaginilor

Left dac ALIGN reine aceast valoare, imaginea se aliniaz n stnga, iar textul care urmeaz este scris n locul rmas.

11

Tehnologii WEB - curs

3. Inserarea imaginilor
Middle numai primul rnd al textului este scris n dreapta imaginii, la jumtatea nlimii ei. Apoi, textul continu dup imagine, ocupnd ntreaga lime a ecranului.

12

Tehnologii WEB - curs

3. Inserarea imaginilor
Bottom numai primul rnd al textului este scris n dreapta imaginii, n partea de jos. Apoi, textul continua dupa imagine, ocupand intreaga latime a ecranului.

13

Tehnologii WEB - curs

3. Inserarea imaginilor
alt="nume" - exist posibilitatea ca imaginea s nu se poat ncrca. pentru astfel de situaii este folosit parametrul ALT, unde nume conine un text (alternativ) care va fi afiat n locul imaginii. Exemplu: Fie tag-ul img urmtor i presupunem c imaginea nu se afieaz. <img src=mihai24.jpg alt =Mihai > lat ce apare:

14 Tehnologii WEB - curs

3. Inserarea imaginilor
height="numar pixeli" - nlimea imaginii. width="numar pixeli" - limea imaginii. border ="nr_pixeli" - Opional, imaginea poate fi nconjurat de un chenar.

<img src=mihai.jpg"> <img src="mihai.jpg" border=5> hspace="nr_pixeli"- determin distana minim care separ imaginea de celelalte obiecte pe orizontal. vspace="nr_pixeli"- determin distana minim care separa imaginea de celelalte obiecte pe vertical.
15 Tehnologii WEB - curs

Tehnologii Web
3. Inserarea imaginilor 4. Inserarea legturilor n documente HTML 4.1. Elementul A 4.2. Elementul LINK 4.3. Elementul BASE 5. Liste 5.1. Lista ordonat 5.2. Lista neordonat 5.3. Lista de tip definiie 5.4. Utilizari speciale ale listelor
16 Tehnologii WEB - curs

4. Inserarea legturilor n documente HTML


Principala

caracteristic a hipertextelor o constituie utilizarea legturilor (links). link este o conexiune ctre o alt resurs Web (un alt hipertext sau o imagine, o secven video sau audio, un program etc.), resurs care poate fi accesat din fereastra browser-ului printr-un simplu clic.

Un

17

Tehnologii WEB - curs

4. Inserarea legturilor n documente HTML


Limbajul HTML conine multiple elemente prin intermediul crora se poate crea o legtur ctre resurse Web: 1. img (creeaz o legtur ctre o imagine) 2. LINK (specific legturi ctre resurse utile) 3. A (creeaz o legtur ctre o resurs Web ntr-un document HTML) 4. Applet (creeaz o legtur ctre un program executabil pe calculatorul utilizatorului)

18

Tehnologii WEB - curs

Tehnologii Web
3. Inserarea imaginilor 4. Inserarea legturilor n documente HTML 4.1. Elementul A 4.2. Elementul LINK 4.3. Elementul BASE 5. Liste 5.1. Lista ordonat 5.2. Lista neordonat 5.3. Lista de tip definiie 5.4. Utilizari speciale ale listelor
19 Tehnologii WEB - curs

4.1. Elementul A
pentru

a insera un link ntr-un document HTML se utilizeaz elementul A (anchor - ancor). Textul cuprins ntre eticheta de nceput <A> i cea de sfrit </A> va aprea evideniat n fereastra browser-ului: subliniat, colorat n funcie de valorile atributelor LINK, VLINK, ALINK sau n funcie de modul de configurare a browser-ului.

20

Tehnologii WEB - curs

4.1. Elementul A
Atributele specifice elementului A sunt: href = URL specific adresa resursei la care se face legtura.
name = ir-de-caractere

asociaz un nume ancorei curente, astfel nct s poat constitui inta unui alt link. Numele trebuie s fie unic n cadrul documentului.
title = ir-de-caractere

asociaz un nume resursei la care se face legtura. Browser-ul va putea afia titlul resursei cnd utilizatorul deplaseaz mouse-ul deasupra legturii.
21 Tehnologii WEB - curs

4.1. Elementul A
Exemplu 1: Descriere
Informaii suplimentare in <A HREF="cap5. htm" > Capitolul 5 - Inserarea legaturilor in documente HTML </A>.

Efect

n acest exemplu a fost creat un link ctre documentul HTML cap5.htm. Observai c adresa resursei int a fost specificat relativ la locaia curent.
22 Tehnologii WEB - curs

4.1. Elementul A
Exemplu 2: Descriere
<A name="ucb" href="http://www.utgjiu.ro"> Universitatea "Constantin Brancusi" Targu-Jiu </A>

Efect
n acest exemplu, adresa resursei destinaie (pagina Web a Universitatii Constantin Brancusi din Targu-Jiu) a fost specificat n mod absolut. Aceast ancor a fost denumit ucb.
23 Tehnologii WEB - curs

4.1. Elementul A
Exemplu 3: Descriere
<A NAME="nceput"></A> <A HREF="#Inceput">Ia-o de la nceput!</A>

....

Efect

n exemplul de mai sus am definit o ancor vid, pe care am denumit-o nceput. La sfritul documentului am inserat o legtur ctre ancora nceput, care permite utilizatorul s revin n poziia acestei ancore. Observai c n acest ultim caz, pentru specificarea adresei am utilizat caracterul #, urmat de numele ancorei.
Tehnologii WEB - curs 24

4.1. Elementul A
Exemplu 4:

Descriere calculatoare. Cap. Legaturi in documente HTML.</A> Efect


n acest exemplu am definit o legtur ctre documentul HTML Curs.htm. Prin activarea acestei legturi se va deschide n fereastra browser-ului documentul Curs.htm, la ancora denumit Link. Observai c pentru a specifica drept int o ancor dintr-un alt document se utilizeaz notaia: adres#nume-ancora.
25 Tehnologii WEB - curs

<A HREF="Curs.htm#Link"> Curs Retele de

4.1. Elementul A
Exercitiu: Creai o legtur astfel nct acionnd printr-un clic pe numele unei persoane s i putei scrie un mesaj e-mail. Solutie: protocolul care permite trimiterea unui mesaj e-mail dintr-un program de navigare se numete mailto. prin urmare, URL-ul destinaie const din mailto: adres-destinatar.

26

Tehnologii WEB - curs

Tehnologii Web
3. Inserarea imaginilor 4. Inserarea legturilor n documente HTML 4.1. Elementul A 4.2. Elementul LINK 4.3. Elementul BASE 5. Liste 5.1. Lista ordonat 5.2. Lista neordonat 5.3. Lista de tip definiie 5.4. Utilizari speciale ale listelor
27 Tehnologii WEB - curs

4.2. Elementul LINK


Ca i elementul A, elementul LINK permite specificarea unor legturi ctre alte documente. Spre deosebire de A, elementul LINK poate fi plasat numai n antetul documentului (n seciunea HEAD), deci prin urmare corespunztor acestui element nu se afieaz nimic n pagina vizualizat de ctre browser. Din punct de vedere sintactic, elementul LINK admite aceleai atribute ca i elementul A, dar nu admite etichet de sfrit.

28

Tehnologii WEB - curs

4.2. Elementul LINK


prin utilizarea elementului LINK pot fi furnizate diferite informaii, cum ar fi informaii despre autor, informaii despre versiunile anterioare ale documentului sau versiuni n alte limbi etc. Exemplu:

<HEAD> <TITLE> Capitolul 7 </TITLE> <LINK TITLE = "Author" HREF = "utgjiu.ro/ing"> <LINK TITLE = "previous Version" KREF = "../last/man1.htm"> </HEAD>

29

Tehnologii WEB - curs

Tehnologii Web
3. Inserarea imaginilor 4. Inserarea legturilor n documente HTML 4.1. Elementul A 4.2. Elementul LINK 4.3. Elementul BASE 5. Liste 5.1. Lista ordonat 5.2. Lista neordonat 5.3. Lista de tip definiie 5.4. Utilizari speciale ale listelor
30 Tehnologii WEB - curs

4.3. Elementul BASE


Specificarea

adreselor resurselor Web la care se creeaz legturi n documente HTML se poate face att n mod absolut, ct i n mod relativ. n cazul specificrii relative a adreselor, se consider implicit c adresa de baz este locaia curent. prin intermediul elementului BASE exist posibilitatea de a specifica explicit adresa de baz a URL-urilor specificate n mod relativ.
31 Tehnologii WEB - curs

4.3. Elementul BASE


<BASE HREF=URL>
Valoarea

atributului URL al etichetei <BASE> trebuie s fie o adres specificat n mod absolut. Observai c elementul BASE nu admite etichet de sfrit. Dac apare, elementul BASE trebuie plasat n antetul documentului HTML.
32 Tehnologii WEB - curs

4.3. Elementul BASE


Exemplu:

<HTML> <HEAD> <TITLE> Cuprins </TITLE> <BASE HREF="http://www.utgjiu.ro/ing"> </HEAD> <BODY> ... <A HKEF="curs/cap1.htm"> Capitolul 1 </A> ... </BODY> </HTML> n exemplu am definit adresa de baz http://www.utgjiu.ro/ing.
prin urmare, prin activarea legturii Capitolul 1, browser-ul va ncrca documentul de la adresa http://www.utgjiu.ro/ing/curs/cap1.htm

33

Tehnologii WEB - curs

Tehnologii Web
3. Inserarea imaginilor 4. Inserarea legturilor n documente HTML 4.1. Elementul A 4.2. Elementul LINK 4.3. Elementul BASE 5. Liste 5.1. Lista ordonat 5.2. Lista neordonat 5.3. Lista de tip definiie 5.4. Utilizari speciale ale listelor
34 Tehnologii WEB - curs

5.Liste
n HTML exista posibilitatea ca anumite enunuri s fie numerotate sau marcate ntr-un anumit fel. O astfel de organizare poart numele de list. n HTML se pot descrie trei tipuri de liste: 1. liste ordonate, n care elementele sunt numerotate 2. liste neordonate, n care elementele sunt marcate de asa natura nct nu se sugereaz o anumit ordine a lor 3. liste de tip definitie
Tehnologii WEB - curs 35

5.Liste
Mai jos putei observa cele trei tipuri de liste:
1. Ora 2. Comun 3. Sat Ora Ora Zeci de mii de familii de oameni Comun Cteva mii de familii de oameni Sat Cteva sute de familii de oameni Lista ordonat Lista neordonat Lista de tip definiie

Comun Sat

36

Tehnologii WEB - curs

Tehnologii Web
3. Inserarea imaginilor 4. Inserarea legturilor n documente HTML 4.1. Elementul A 4.2. Elementul LINK 4.3. Elementul BASE 5. Liste 5.1. Lista ordonat 5.2. Lista neordonat 5.3. Lista de tip definiie 5.4. Utilizari speciale ale listelor
37 Tehnologii WEB - curs

5.1. Lista ordonat


1. Elementul OL (Ordered Lists) creeaz o list ordonat. Elementele listei sunt trecute ntre tag-urile <OL> i </OL>. 2. Elementul LI (List Item) descrie un element al listei. Tag-ul obligatoriu este cel de nceput <LI>, iar cel de sfrit este facultativ: </LI>. Elementul OL are atributul type. Valorile pe care le poate lua acest atribut, sunt: <OL type = a> <OL type = i> <OL type = A> <OL type = l> <OL type = 1>
38 Tehnologii WEB - curs

5.1. Lista ordonat


Exemplu:
<p> primul exemplu de lista : </p> <ol> <li> Sectia de Automatica si Informatica Aplicata;</li> <li> Sectia de Enegetica; </li> <li> Sectia de Mecanica; </li> <li> Sectia de Ingineria Mediului; </li> </ol>

Efect:

39

Tehnologii WEB - curs

Tehnologii Web
3. Inserarea imaginilor 4. Inserarea legturilor n documente HTML 4.1. Elementul A 4.2. Elementul LINK 4.3. Elementul BASE 5. Liste 5.1. Lista ordonat 5.2. Lista neordonat 5.3. Lista de tip definiie 5.4. Utilizari speciale ale listelor
40 Tehnologii WEB - curs

5.2. Lista neordonat


Elementul

UL (Unordered Lists) descrie o list neordonat. Elementele listei sunt cuprinse ntre tag-urile <UL> i </UL>. Elementul UL are atributul type. Valorile pe care le poate lua acest atribut, sunt: <UL type = cyrcle> <UL type = disc> <UL type = square>
41 Tehnologii WEB - curs

5.2. Lista neordonat


Exemplu:
<p> Tipuri de calculatoare: </p> <ul> <li> IBM; </li> <li> COMPAQ; </li> <li> APPLE; </li> <li> SUN; </li> </ul>

Efect:

42 Tehnologii WEB - curs

5.2. Lista neordonat


Se pot construi si liste imbricate, dupa cum urmeaza din exemplul urmator:
<ol type = I > <li> Exemplul 1 </li> <ul type=disc> <li> Varianta A </li> <li> Varianta B </li> <li> Varianta C </li> <li> Varianta D </li> </ul> <li> Exemplul 2 </li> <ul type=square> <li> Varianta A </li> <li> Varianta B </li> <li> Varianta C </li> <li> Varianta D </li> </ul> </ol>

43 Tehnologii WEB - curs

5.2. Lista neordonat

44

Tehnologii WEB - curs

Tehnologii Web
3. Inserarea imaginilor 4. Inserarea legturilor n documente HTML 4.1. Elementul A 4.2. Elementul LINK 4.3. Elementul BASE 5. Liste 5.1. Lista ordonat 5.2. Lista neordonat 5.3. Lista de tip definiie 5.4. Utilizari speciale ale listelor
45 Tehnologii WEB - curs

5.3. Lista de tip definiie


1. Elementul DL (Definition Lists) are rolul de a descrie o list de definiii. El folosete tag-urile <DL> </DL>. 2. Elementul DT (Definition Term) definete termenul din list care trebuie descris. El utilizeaz tag-ul <DT>. 3. Elementul DD (Definition Description) are rolul de a reine descrierea termenului. El utilizeaz tag-ul <DD>.
46

Tehnologii WEB - curs

5.3. Lista de tip definiie


Exemplu:
<DL> <DT> internet <DD> retele locale interconetate prin acelasi protocol <DT> internet account <DD> cont pentru internet <DT> internet address <DD> adresa de internet </DL>

Efect:

Tehnologii WEB - curs

47

Tehnologii Web
3. Inserarea imaginilor 4. Inserarea legturilor n documente HTML 4.1. Elementul A 4.2. Elementul LINK 4.3. Elementul BASE 5. Liste 5.1. Lista ordonat 5.2. Lista neordonat 5.3. Lista de tip definiie 5.4. Utilizari speciale ale listelor
48 Tehnologii WEB - curs

5.4. Utilizari speciale ale listelor


Daca intr-o lista, in loc de elementele acesteia introduse prin <li>, se insereaza un bloc de text, aceasta va fi indentat ( intocmai ca elementele unei liste).

<html> <head><title>liste_exemplu</title></head> <body> <h1>Un bloc de text indentat</h1><hr> <ol> Un bloc de text indentat. Un bloc de text indentat. Un bloc de text indentat. Un bloc de text indentat. Un bloc de text indentat. Un bloc de text indentat. Un bloc de text indentat. Un bloc de text indentat. Un bloc de text indentat. </ol> </body> </html>
49 Tehnologii WEB - curs

5.4. Utilizari speciale ale listelor


In exemplul urmator lista de definitii are itemii <dt> si <dd> multipli. <html> <head><title>liste_exemplu</title></head> <body> <h1 align="center">O lista de definitii speciala</h1><hr> <dl>program <dt><b>Luni</b> <dt><b>Marti</b> <dt><b>Miercuri</b> <dd><i>Ora 9.00.</i>Insciere <dd><i>Ora 11.00.</i>Audieri <dd><i>Ora 13.30.</i>Raspunsuri </dl> </body> </html>
50 Tehnologii WEB - curs

5.4. Utilizari speciale ale listelor


Ultimul exemplu este o lista neordonata personalizata care utilizeaza pe post de elemente imagini si texte.

<html> <head><title>liste_exemplu</title></head> <body> <h1>O lista personalizata</h1><hr> <ul>Tipuri de masini Volkswagen sunt:<br> <li> <img src="images/reddot1.gif">Golf<br> </li> <li> <img src="images/reddot2.gif">Jetta<br> </li> <li> <img src="images/reddot3.gif">Passat<br> </li> <li> <img src="images/reddot4.gif">Bora<br> </li> <li> <img src="images/reddot5.gif">Corrado<br> </li> <li> <img src="images/reddot6.gif">Transporter<br></li> </ul> </body> 51 Tehnologii WEB - curs </html>

ntrebri?

52

Tehnologii WEB - curs