tehnologii web - UCB Sustine...

transcript

Lector univ. dr. Adrian Runceanu

Tehnologii Web

Universitatea “Constantin Brâncuşi” din Târgu-Jiu Facultatea de Inginerie

Departamentul de Automatică, Energie şi Mediu

Curs 2

Limbajul Html (partea II)

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).

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.

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.).

• Î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ă.

• 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.

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.

<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>

• 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.

• Left – dacă ALIGN reţine această valoare, imaginea se aliniază în stânga, iar textul care urmează este scris în locul rămas.

• 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.

• 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.

• 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:

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

4. Inserarea legăturilor în documente

• 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.

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

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.

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.

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ă.

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.

<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.

<A NAME="început"></A> . . . . <A HREF="#Inceput">Ia-o de la început!</A>

4.1. Elementul A

Exemplu 4:

Descriere

• Î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

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.

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:

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

Tehnologii Web

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.

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.

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

<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

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

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

Câteva sute de familii de oameni

Lista ordonată

Lista neordonată

Lista de tip definiţie

Tehnologii Web

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>

5.1. Lista ordonată Exemplu: Efect:

<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

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>

Exemplu: Efect:

Tehnologii WEB - curs

<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:

Tehnologii WEB - curs

<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>

Tehnologii Web

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>.

5.3. Lista de tip definiţie

Exemplu: Efect:

<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

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>

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>

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

Întrebări?

tehnologii web - UCB Sustine...

Documents