Lector univ. dr. Adrian Runceanu
Tehnologii Web
1
Universitatea “Constantin Brâncuşi” din Târgu-Jiu Facultatea de Inginerie
Departamentul de Automatică, Energie şi Mediu
Curs 2
Limbajul Html (partea II)
2
Tehnologii Web
3. Inserarea imaginilor 4. Inserarea legăturilor î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 definiţie 5.4. Utilizari speciale ale listelor
Tehnologii WEB - curs 3
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 4
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.
Tehnologii WEB - curs 5
3. Inserarea imaginilor
Elementul img se utilizează pentru a ataşa unei pagini o imagine.
Vom folosi tag-ul <img>. Forma generală a acestui element este: Atributele sunt: • SRC identifică fişierul care conţine imaginea respectivă (de tip .jpg, .gif etc.).
Tehnologii WEB - curs 6
<img atribute>
3. Inserarea imaginilor
• În această etapă învăţăm să creăm paginile pe propriul calculator, fără a fi conectaţi la internet.
• Prin urmare, fişierul care conţine imaginea se va găsi într-un folder oarecare (în exemplul următor el se găseşte în acelaşi folder în care găsim şi fisierul cu extensia .html (cel care conţine pagina).
• Din acest motiv, sursa nu conţine şi calea, dar, dacă este cazul, calea poate fi conţinută.
Tehnologii WEB - curs 7
3. Inserarea imaginilor
• ALIGN -tipul de aliniere - reţine 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 fişierul text de mai jos (scris în Notepad). • Observăm că am scris un prim paragraf care nu
conţine nici o imagine. • Apoi, am scris un paragraf care, la început, conţine o
imagine apoi text. • În final, avem un paragraf numai cu text.
Tehnologii WEB - curs 8
3. Inserarea imaginilor Exemplu:
• Right – dacă ALIGN reţine această valoare, imaginea se aliniază în dreapta, iar textul care urmează este scris în locul rămas.
Tehnologii WEB - curs 9
<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>
3. Inserarea imaginilor
• Top – numai primul rând al textului este scris în dreapta imaginii, în partea de sus.
• Apoi, textul continuă după imagine, ocupând întreaga lăţime a ecranului.
Tehnologii WEB - curs 10
3. Inserarea imaginilor
• Left – dacă ALIGN reţine această valoare, imaginea se aliniază în stânga, iar textul care urmează este scris în locul rămas.
Tehnologii WEB - curs 11
3. Inserarea imaginilor
• Middle – numai primul rând al textului este scris în dreapta imaginii, la jumătatea înălţimii ei.
• Apoi, textul continuă după imagine, ocupând întreaga lăţime a ecranului.
Tehnologii WEB - curs 12
3. Inserarea imaginilor
• Bottom – numai primul rând al textului este scris în dreapta imaginii, în partea de jos.
• Apoi, textul continua dupa imagine, ocupand intreaga latime a ecranului.
Tehnologii WEB - curs 13
3. Inserarea imaginilor
• alt="nume" - există posibilitatea ca imaginea să nu se poată încărca.
• pentru astfel de situaţii este folosit parametrul ALT, unde nume conţine un text (alternativ) care va fi afişat în locul imaginii.
• Exemplu: • Fie tag-ul img următor şi presupunem că imaginea nu
se afişează. <img src=”mihai24.jpg” alt =”Mihai ”>
lată ce apare:
Tehnologii WEB - curs 14
3. Inserarea imaginilor
height="numar pixeli" - înălţimea imaginii. width="numar pixeli" - lăţimea imaginii. border ="nr_pixeli" - Opţional, imaginea poate fi înconjurată de un chenar. <img src=mihai.jpg"> <img src="mihai.jpg" border=5> hspace="nr_pixeli"- determină distanţa minimă care separă imaginea de
celelalte obiecte pe orizontală. vspace="nr_pixeli"- determină distanţa minimă care separa imaginea de
celelalte obiecte pe verticală.
Tehnologii WEB - curs 15
Tehnologii Web
3. Inserarea imaginilor 4. Inserarea legăturilor î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 definiţie 5.4. Utilizari speciale ale listelor
Tehnologii WEB - curs 16
4. Inserarea legăturilor în documente
HTML
• Principala caracteristică a hipertextelor o constituie utilizarea legăturilor (links).
• Un link este o conexiune către 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.
Tehnologii WEB - curs 17
4. Inserarea legăturilor în documente HTML
Limbajul HTML conţine multiple elemente prin intermediul cărora se poate crea o legătură către resurse Web:
1. img (creează o legătură către o imagine) 2. LINK (specifică legături către resurse utile) 3. A (creează o legătură către o resursă Web într-un
document HTML) 4. Applet (creează o legătură către un program
executabil pe calculatorul utilizatorului)
Tehnologii WEB - curs 18
Tehnologii Web
3. Inserarea imaginilor 4. Inserarea legăturilor î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 definiţie 5.4. Utilizari speciale ale listelor
Tehnologii WEB - curs 19
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 sfârşit </A> va apărea evidenţiat în fereastra browser-ului:
• subliniat, colorat în funcţie de valorile atributelor LINK, VLINK, ALINK sau în funcţie de modul de configurare a browser-ului.
Tehnologii WEB - curs 20
4.1. Elementul A
Atributele specifice elementului A sunt: specifică adresa resursei la care se face legătura. asociază un nume ancorei curente, astfel încât să poată
constitui ţinta unui alt link. Numele trebuie să fie unic în cadrul documentului. asociază un nume resursei la care se face legătura. Browser-ul va putea afişa titlul resursei când utilizatorul
deplasează mouse-ul deasupra legăturii.
Tehnologii WEB - curs 21
href = URL
name = şir-de-caractere
title = şir-de-caractere
4.1. Elementul A
Exemplu 1: Descriere
Efect În acest exemplu a fost creat un link către documentul
HTML cap5.htm. Observaţi că adresa resursei ţintă a fost specificată
relativ la locaţia curentă.
Tehnologii WEB - curs 22
Informaţii suplimentare in <A HREF="cap5. htm" > Capitolul 5 - Inserarea legaturilor in documente HTML </A>.
4.1. Elementul A
Exemplu 2: Descriere Efect În acest exemplu, adresa resursei destinaţie (pagina
Web a Universitatii „Constantin Brancusi” din Targu-Jiu) a fost specificată în mod absolut.
Această ancoră a fost denumită ucb.
Tehnologii WEB - curs 23
<A name="ucb" href="http://www.utgjiu.ro"> Universitatea "Constantin Brancusi" Targu-Jiu </A>
4.1. Elementul A
Exemplu 3: Descriere
Efect • În exemplul de mai sus am definit o ancoră vidă, pe care am
denumit-o început. • La sfârşitul documentului am inserat o legătură către ancora
început, care permite utilizatorul să revină în poziţia acestei ancore. • Observaţi că în acest ultim caz, pentru specificarea adresei am
utilizat caracterul #, urmat de numele ancorei.
Tehnologii WEB - curs 24
<A NAME="început"></A> . . . . <A HREF="#Inceput">Ia-o de la început!</A>
4.1. Elementul A
Tehnologii WEB - curs 25
Exemplu 4:
Descriere
Efect
• În acest exemplu am definit o legătură către documentul
HTML Curs.htm.
• Prin activarea acestei legături se va deschide în fereastra
browser-ului documentul Curs.htm, la ancora denumită Link.
• Observaţi că pentru a specifica drept ţintă o ancoră dintr-un
alt document se utilizează notaţia: adresă#nume-ancora.
<A HREF="Curs.htm#Link"> Curs Retele de calculatoare. Cap. Legaturi in documente HTML.</A>
4.1. Elementul A
Exercitiu: Creaţi o legătură astfel încât acţionând printr-un
clic pe numele unei persoane să îi puteţi scrie un mesaj e-mail.
Solutie: • protocolul care permite trimiterea unui mesaj e-mail
dintr-un program de navigare se numeşte mailto. • prin urmare, URL-ul destinaţie constă din
mailto: adresă-destinatar.
Tehnologii WEB - curs 26
Tehnologii Web
3. Inserarea imaginilor 4. Inserarea legăturilor î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 definiţie 5.4. Utilizari speciale ale listelor
Tehnologii WEB - curs 27
4.2. Elementul LINK
• Ca şi elementul A, elementul LINK permite specificarea unor legături către alte documente.
• Spre deosebire de A, elementul LINK poate fi plasat numai în antetul documentului (în secţiunea HEAD), deci prin urmare corespunzător acestui element nu se afişează nimic în pagina vizualizată de către browser.
• Din punct de vedere sintactic, elementul LINK admite aceleaşi atribute ca şi elementul A, dar nu admite etichetă de sfârşit.
Tehnologii WEB - curs 28
4.2. Elementul LINK
• prin utilizarea elementului LINK pot fi furnizate diferite informaţii, cum ar fi informaţii despre autor, informaţii despre versiunile anterioare ale documentului sau versiuni în alte limbi etc.
Exemplu:
Tehnologii WEB - curs 29
<HEAD> <TITLE> Capitolul 7 </TITLE> <LINK TITLE = "Author" HREF = "utgjiu.ro/ing"> <LINK TITLE = "previous Version" KREF = "../last/man1.htm"> </HEAD>
Tehnologii Web
3. Inserarea imaginilor 4. Inserarea legăturilor î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 definiţie 5.4. Utilizari speciale ale listelor
Tehnologii WEB - curs 30
4.3. Elementul BASE
• Specificarea adreselor resurselor Web la care se creează legături în documente HTML se poate face atât în mod absolut, cât şi în mod relativ.
• În cazul specificării relative a adreselor, se consideră implicit că adresa de bază este locaţia curentă.
• prin intermediul elementului BASE există posibilitatea de a specifica explicit adresa de bază a URL-urilor specificate în mod relativ.
Tehnologii WEB - curs 31
4.3. Elementul BASE
• Valoarea atributului URL al etichetei <BASE> trebuie să fie o adresă specificată în mod absolut.
• Observaţi că elementul BASE nu admite etichetă de sfârşit.
• Dacă apare, elementul BASE trebuie plasat în antetul documentului HTML.
Tehnologii WEB - curs 32
<BASE HREF=URL>
4.3. Elementul BASE Exemplu: În exemplu am definit adresa de bază http://www.utgjiu.ro/ing. prin urmare, prin activarea legăturii Capitolul 1, browser-ul va încărca
documentul de la adresa http://www.utgjiu.ro/ing/curs/cap1.htm
Tehnologii WEB - curs 33
<HTML> <HEAD> <TITLE> Cuprins </TITLE> <BASE HREF="http://www.utgjiu.ro/ing"> </HEAD> <BODY> . . . <A HKEF="curs/cap1.htm"> Capitolul 1 </A> . . . </BODY> </HTML>
Tehnologii Web
3. Inserarea imaginilor 4. Inserarea legăturilor î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 definiţie 5.4. Utilizari speciale ale listelor
Tehnologii WEB - curs 34
5.Liste
În HTML exista posibilitatea ca anumite enunţuri 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 încât nu se sugerează o anumită ordine a lor
3. liste de tip definitie
Tehnologii WEB - curs 35
5.Liste
Mai jos puteţi observa cele trei tipuri de liste: 1. Oraş Oraş Oraş
2. Comună Comună Zeci de mii de familii de oameni
3. Sat Sat Comună
Câteva mii de familii de oameni
Sat
Câteva sute de familii de oameni
Lista ordonată
Lista neordonată
Lista de tip definiţie
Tehnologii WEB - curs 36
Tehnologii Web
3. Inserarea imaginilor 4. Inserarea legăturilor î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 definiţie 5.4. Utilizari speciale ale listelor
Tehnologii WEB - curs 37
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 sfârşit
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>
Tehnologii WEB - curs 38
5.1. Lista ordonată Exemplu: Efect:
Tehnologii WEB - curs 39
<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>
Tehnologii Web
3. Inserarea imaginilor 4. Inserarea legăturilor î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 definiţie 5.4. Utilizari speciale ale listelor
Tehnologii WEB - curs 40
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>
Tehnologii WEB - curs 41
Exemplu: Efect:
5.2. Lista neordonată
Tehnologii WEB - curs
42
<p> Tipuri de calculatoare: </p> <ul> <li> IBM; </li> <li> COMPAQ; </li> <li> APPLE; </li> <li> SUN; </li> </ul>
Se pot construi si liste imbricate, dupa cum urmeaza din exemplul urmator:
5.2. Lista neordonată
Tehnologii WEB - curs
43
<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>
5.2. Lista neordonată
Tehnologii WEB - curs 44
Tehnologii Web
3. Inserarea imaginilor 4. Inserarea legăturilor î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 definiţie 5.4. Utilizari speciale ale listelor
Tehnologii WEB - curs 45
5.3. Lista de tip definiţie
1. Elementul DL (Definition Lists) are rolul de a descrie o listă de definiţii.
El foloseşte tag-urile <DL> </DL>. 2. Elementul DT (Definition Term) defineşte
termenul din listă care trebuie descris. El utilizează tag-ul <DT>. 3. Elementul DD (Definition Description) are
rolul de a reţine descrierea termenului. El utilizează tag-ul <DD>.
Tehnologii WEB - curs 46
5.3. Lista de tip definiţie
Exemplu: Efect:
Tehnologii WEB - curs 47
<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>
Tehnologii Web
3. Inserarea imaginilor 4. Inserarea legăturilor î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 definiţie 5.4. Utilizari speciale ale listelor
Tehnologii WEB - curs 48
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>
Tehnologii WEB - curs 49
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>
Tehnologii WEB - curs 50
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> </html> Tehnologii WEB - curs
51
Întrebări?
Tehnologii WEB - curs 52