inițiere în programare web · 3. inserarea imaginilor - defineşte o zonă în cadrul hărţii...

Inițiere în programareweb

Colegiul National Ecaterina Teodoroiu din Targu Jiu

Adrian Runceanu2016

[email protected]

Limbajul HTML(partea II)

25.10.2016 2Tehnologii Web

[email protected]

Aspecte generale ale HTML

Atribute HTML Elementele HTML pot avea atribute:

1. Atribute obligatorii2. Atribute opţionale

Atributele furnizează informaţii suplimentare despre un anumit element HTML

Atributele sunt specificate în eticheta de start a unui element HTML

Atributele sunt specificate prin intermediul perechiinume/valoare:

nume="valoare“Exemplu: <p align="left">Acest paragraf este aliniat la

stanga.</p>25.10.2016 3Tehnologii Web

[email protected]


Atribute HTML (continuare)Reguli XHTML, XML şi versiuni viitoare de HTML

1. Toate elementele HTML trebuie închise

2. Elementele vide se închid prin adăugarea semnului “/” în eticheta de start (exemplu: <br> se scrie corect <br/>

3. Etichetele HTML sunt scrise cu minuscule, deşi ele nu sunt “case sensitive”


[email protected]



Etichete(tag-uri) de bază Semnificatie

<html> Specifica un document de tip HTML

<body> Specifica corpul unui document HTML

<h1> to <h6> Specifica titlul unei secţiuni din document

<p> Specifica un paragraf

<br /> Specifica trecerea la linie nouă

 Specifica un comentariu

[email protected]



Elemente de tip informatie Semnificatie

<head> Defineşte informaţii despre documentul HTML

<title> Defineşte titlul documentului

<meta>Defineşte informaţii despre documentul HTML

<base>Defineşte adresa predefinită sau ţinta predefinită pentru toate legăturile din pagină

<link>Specifica legatura catre fisierul CSS (care defineste stilurile de formatare)

[email protected]

Limbajul HTML (partea II)

3. Inserarea imaginilor4. Inserarea legăturilor în documente HTML

4.1. Elementul a4.2. Elementul link4.3. Elementul base

5. Liste5.1. Lista ordonată5.2. Lista neordonată5.3. Lista de tip definiţie5.4. Utilizari speciale ale listelor


[email protected]

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


[email protected]


Adresa URL a unei imaginiURL ("Uniform Resourse Locator") =

identificator unic al resursei este un standardfolosit in identificarea unica a unei resurse inInternet.

Toate imaginile cu care vom lucra vor aveaadresa URL exprimata in functie de directorulce contine documentul HTML care facereferire la imagine.


[email protected]


URL concatenează trei elemente:

1. Serviciul (protocolul) Internet utilizat pentruaccesarea resursei

2. Identificatorul calculatorului care stocheazăresursa (host-ul sau gazda)

3. Identificatorul resursei (fişierului) pecalculatorul gazdă (server)


[email protected]


1. Serviciul (protocolul) Internet utilizat pentruaccesarea resursei

Există mai multe metode (protocoale) de acces lainformaţia stocată pe un calculator conectat la Internetşi respectiv mai mulţi identificatori de servicii(protocoale):a) http:// protocolul de transfer bazat pe hipertext

(Hyper Text Transfer Protocol)b) ftp:// protocolul de transfer de fişiere (File Transfer

Protocol)c) file:// pentru accesul la fişierele stocate pe

calculatorul local25.10.2016 11Tehnologii Web

[email protected]


2. Identificatorul calculatorului care stocheazăresursa (host-ul sau gazda) este format din:

nume_calculator.domeniu_internet

unde domeniu_internet reprezintă o ramură dinstructura arborescentă a internetului.Exemple:www.utgjiu.rowww.adrian.runceanu.rowww.scoaladeinformatica.ro


http://www.utgjiu.ro/

http://www.adrian.runceanu.ro/

http://www.scoaladeinformatica.ro/

[email protected]


3. Identificatorul resursei (fişierului) pecalculatorul gazdă (server)Acesta se compune din: / - reprezintă directorul rădăcină Cale_relativa / - reprezintă calea relativă spre

directorul în care se găseşte fişierul destinaţieNume_fişier - numele fişierului destinaţie #nume_ancoră - numele unei ancore definite în

fişierul destinaţie prin <a name=“nume_ancoră”>.Acest ultim termen este corect pentru metoda de acceshttp://.


[email protected]


3. Identificatorul resursei (fişierului) pecalculatorul gazdă (server) - continuareExemplu:http://www.runceanu.ro/adrian/index.html#ancora1unde: http:// - specifică protocolul utilizatwww.runceanu.ro – specifică sistemul numit www

din domeniul runceanu.ro /adrian/index.html – reprezintă calea relativă spre

fişier #ancora1 – reprezintă o ancoră în fişierul destinaţie

începând cu care se va afişa pagina în browser25.10.2016 14Tehnologii Web

http://www.runceanu.ro/adrian/index.html#ancora1

[email protected]


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


[email protected]


Elementul img se utilizează pentru a ataşa uneipagini o imagine.

Forma generală a acestui element este:

Atributele sunt:1. SRC - identifică fişierul care conţine imaginearespectivă (de tip .jpg, .gif etc.).

<img atribute>


[email protected]


• În această etapă învăţăm să creăm paginile pepropriul calculator, fără a fi conectaţi la internet.

• Prin urmare, fişierul care conţine imaginea se vagăsi într-un folder oarecare (în exemplulurmător el se găseşte în acelaşi folder în caregăsim şi fisierul cu extensia .html (cel careconţine pagina).

• Din acest motiv, sursa nu conţine şi calea, dar,dacă este cazul, calea poate fi conţinută.


[email protected]


2. ALIGN - tipul de aliniere - reţine una din valorile demai jos şi specifică browser-ului modul în care vaalinia imaginea în raport cu textul:

Right, Left, Top, Middle, BottomFie fişierul text de mai jos (scris în Notepad).

• Observăm că am scris un prim paragraf care nuconţine nici o imagine.

• Apoi, am scris un paragraf care, la început, conţineo imagine apoi text.

• În final, avem un paragraf numai cu text.


3. Inserarea imaginilorExemplu:

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



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



4. height="numar pixeli" - înălţimea imaginii. 5. width="numar pixeli" - lăţimea imaginii.6. border ="nr_pixeli" - Opţional, imaginea poate fi înconjurată de un chenar.

<img src=mihai.jpg"> <img src="mihai.jpg" border=5>7. hspace="nr_pixeli"- determină distanţa minimă care separă imaginea de

celelalte obiecte pe orizontală.8. vspace="nr_pixeli"- determină distanţa minimă care separa imaginea de

celelalte obiecte pe verticală.



<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


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


[email protected]






[email protected]

http://codepen.io/

25.10.2016 Tehnologii Web 30

[email protected]

4. Inserarea legăturilor în documente HTML

• Principala caracteristică a hipertextelor oconstituie utilizarea legăturilor (links).

• Un link este o conexiune către o altă resursăWeb (un alt hipertext sau o imagine, osecvenţă video sau audio, un program etc.),resursă care poate fi accesată din fereastrabrowser-ului printr-un simplu clic.


[email protected]

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)


[email protected]






[email protected]

4.1. Elementul A

• pentru a insera un link într-un document HTMLse 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.


[email protected]

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" title="Universitate"> 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 utilizatorului 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

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 Limbajul HTML (partea II) Cap. Legaturi in documente HTML.</a>


[email protected]

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.


[email protected]






[email protected]

4.2. Elementul link

• Ca şi elementul a, elementul link permitespecificarea unor legături către alte documente.

• Spre deosebire de a, elementul link poate fiplasat numai în antetul documentului (însecţiunea head), deci prin urmarecorespunzător acestui element nu se afişeazănimic în pagina vizualizată de către browser.

• Din punct de vedere sintactic, elementul linkadmite aceleaşi atribute ca şi elementul a, darnu admite etichetă de sfârşit.


[email protected]

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>


[email protected]






[email protected]

4.3. Elementul base

• Specificarea adreselor resurselor Web la care se creează legături în documente HTML se poate face:1. în mod absolut 2. î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.


[email protected]

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.

<base href=URL>


[email protected]

4.3. Elementul baseExemplu:

Î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

<HTML> <HEAD>

<TITLE> Cuprins </TITLE><base HREF="http://www.utgjiu.ro/ing">

</HEAD> <BODY>

. . . <A HKEF="curs/cap1.html"> Capitolul 1 </A>

. . . </BODY> </HTML>


[email protected]






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

Sat

Câteva sute de familii de oameni

Lista ordonată

Lista neordonată

Lista de tip definiţie


[email protected]






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>


[email protected]






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:


<p> Tipuri de calculatoare: </p><ul>

<li> IBM; </li><li> COMPAQ; </li><li> APPLE; </li><li> SUN; </li>

</ul>

56Tehnologii Web

Se pot construi si liste imbricate:


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

57Tehnologii Web

Efect:

[email protected]






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


[email protected]






[email protected]

5.4. Utilizari speciale ale listelorDaca intr-o lista, in loc de elementele acesteia introduse prin <li>,

se insereaza un bloc de text, aceasta va fi indentat (la fel ca elementele unui paragraf).

25.10.2016

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

62Tehnologii Web

[email protected]

5.4. Utilizari speciale ale listelor


[email protected]


In exemplul urmator lista de definitii are itemii <dt> si <dd> multipli.

25.10.2016

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

<dd><i>Ora 11.00.</i>Audieri

<dd><i>Ora 13.30.</i>Raspunsuri

</dl>

</body>

</html>

64Tehnologii Web

[email protected]



[email protected]

5.4. Utilizari speciale ale listelorUltimul exemplu este o lista neordonata personalizata care utilizeaza

pe post de elemente imagini si texte.

25.10.2016

<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/file1.gif">Golf<br> </li><li> <img src="images/file2.gif">Jetta<br> </li><li> <img src="images/file3.gif">Passat<br> </li><li> <img src="images/file4.gif">Bora<br> </li><li> <img src="images/file5.gif">Corrado<br> </li><li> <img src="images/file6.gif">Transporter<br></li>

</ul></body></html>

66Tehnologii Web

[email protected]



[email protected]

Întrebări?


inițiere în programare web · 3. inserarea imaginilor - defineşte o zonă în cadrul hărţii...

Documents