Noţiuni elementare despre Internet

Universitatea Constantin Brâncuşi din Târgu-Jiu Departamentul pentru Pregătirea Personalului Didactic INSTRUIRE ASISTATĂ DE CALCULATOR Lect.dr. Adrian Runceanu

Curs 4 Limbajul HTML (partea II) 18.12.2014 2

Limbajul HTML (partea II) 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 18.12.2014 3

3. Inserarea imaginilor Imaginile sunt stocate in fisiere cu diverse formate. Formatele acceptate 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). 18.12.2014 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. 18.12.2014 5

3. Inserarea imaginilor Inserarea imaginilor se poate face cu ajutorul urmatoarelor tag-uri: 1. <img> - Defineşte o imagine 2. <map> - Defineşte harta unei imagini 3. <area> - Defineşte o zonă în cadrul hărţii unei imagini 18.12.2014 6

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: <img atribute> Atributele sunt: SRC identifică fişierul care conţine imaginea respectivă (de tip.jpg,.gif etc.). 18.12.2014 7

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

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

Exemplu: 3. Inserarea imaginilor <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 reţine această valoare, imaginea se aliniază în dreapta, iar textul care urmează este scris în locul rămas. 18.12.2014 10

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

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

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

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

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

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

3. Inserarea imaginilor <map> - defineşte harta unei imagini Atribut obligatoriu: name indică numele hărţii unei imagini Nu are atribute opţionale Atribute de tip eveniment acceptate: onclick, ondblclick, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onkeydown, onkeypress, onkeyup 18.12.2014 17

3. Inserarea imaginilor <map name="harta"> <area href="curs.html" alt="curs" shape=rect coords="6,116,97,184"> <area href="laboratoare.html" alt="laboratoare" shape=circle coords="251,143,47"> <area href="contact.html" alt="contact" shape=poly coords="150,217,190,257,150,297,110,257"> </map> <img src="imag_senz.gif" alt="harta imagine" border=0 width=300 height=300 usemap="#harta"> 18.12.2014 18

3. Inserarea imaginilor <area> - defineşte o zonă în cadrul hărţii unei imagini Este inclus întotdeauna într-un element de tip <map> Atribut obligatoriu: alt specifică textul ce va fi afişat pentru zona respectiva în cazul în care imaginea nu poate fi încărcată Atribute opţionale: shape default, rect, circle, poly coords coordonatele zonei href adresa URL a documentului ce va fi încărcat la acţionarea în zona respectivă target _blank, _parent, _self, _top, nohref Atribute de tip eveniment acceptate: onblur, onclick, ondblclick, onfocus, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onkeydown, onkeypress, onkeyup 18.12.2014 19

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

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) 18.12.2014 22

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

4.1. Elementul A Atributele specifice elementului A sunt: specifică adresa resursei la care se face legătura. name = şir-de-caractere href = URL asociază un nume ancorei curente, astfel încât 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 legătura. Browser-ul va putea afişa titlul resursei când utilizatorul deplasează mouse-ul deasupra legăturii. 18.12.2014 25

Exemplu 1: Descriere Efect 4.1. Elementul A Informaţii suplimentare in <A HREF="cap5. htm" > Capitolul 5 - Inserarea legaturilor in documente HTML </A>. Î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ă. 18.12.2014 26

Exemplu 2: Descriere Efect 4.1. Elementul A <A name="ucb" href="http://www.utgjiu.ro" title="universitate"> Universitatea "Constantin Brancusi" Targu-Jiu </A> Î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. 18.12.2014 27

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

4.1. Elementul A Exemplu 4: Descriere <A HREF="Curs.htm#Link"> Curs Limbajul HTML (partea II) Cap. Legaturi in documente HTML.</A> 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. 18.12.2014 29

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

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

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. Este interpretat de marea majoritate a navigatoarelor doar pentru a defini legături cu fisiere de stiluri Exemplu: <HEAD> <TITLE> Capitolul 7 </TITLE> <LINK TITLE = "Adrian Runceanu" HREF = "www.utgjiu.ro/ing"> <LINK TITLE = "previous Version" KREF = "../last/man1.html"> <link rel="stylesheet" type="text/css" href="stiluri.css" /> </HEAD> 18.12.2014 33

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

4.3. Elementul BASE <BASE HREF=URL> 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. 18.12.2014 36

Exemplu: 4.3. Elementul BASE <HTML> <HEAD> <TITLE> Cuprins </TITLE> <BASE HREF="http://www.utgjiu.ro/ing"> </HEAD> <BODY>... <A HKEF="curs/cap1.html"> Capitolul 1 </A>... </BODY> </HTML> Î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.html 18.12.2014 37

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

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

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

Exemplu: 5.1. Lista ordonată 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> 18.12.2014 43

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

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

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

5.2. Lista neordonată 18.12.2014 48

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

Exemplu: Efect: 5.3. Lista de tip definiţie <DL> <DT> HTML <DD> limbaj de descriere a datelor <DT> CSS <DD> Limbaj de descriere a stilurilor paginilor web <DT> PHP <DD> Limbaj de scripting <DT> MySQL <DD> Limbaj de interogare a bazelor de date </DL> 18.12.2014 51

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

5.4. Utilizari speciale ale listelor 18.12.2014 54

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

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> 18.12.2014 </html> 57

Întrebări? 18.12.2014 59