noţiuni elementare despre internet - runceanu.ro · 3. inserarea imaginilor - defineşte o zonă...
Post on 29-Aug-2019
228 Views
Preview:
TRANSCRIPT
copyright@www.adrian.runceanu.ro
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>06.04.2017 3Tehnologii Web
copyright@www.adrian.runceanu.ro
Aspecte generale ale HTML
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”
06.04.2017 4Tehnologii Web
copyright@www.adrian.runceanu.ro
Aspecte generale ale HTML
06.04.2017 5Tehnologii Web
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
copyright@www.adrian.runceanu.ro
Aspecte generale ale HTML
06.04.2017 6Tehnologii Web
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)
copyright@www.adrian.runceanu.ro
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
06.04.2017 7Tehnologii Web
copyright@www.adrian.runceanu.ro
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).
06.04.2017 8Tehnologii Web
copyright@www.adrian.runceanu.ro
3. Inserarea imaginilor
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.
06.04.2017 9Tehnologii Web
copyright@www.adrian.runceanu.ro
3. Inserarea imaginilor
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)
06.04.2017 10Tehnologii Web
copyright@www.adrian.runceanu.ro
3. Inserarea imaginilor
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 local06.04.2017 11Tehnologii Web
copyright@www.adrian.runceanu.ro
3. Inserarea imaginilor
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
06.04.2017 12Tehnologii Web
copyright@www.adrian.runceanu.ro
3. Inserarea imaginilor
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://.
06.04.2017 13Tehnologii Web
copyright@www.adrian.runceanu.ro
3. Inserarea imaginilor
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 browser06.04.2017 14Tehnologii Web
copyright@www.adrian.runceanu.ro
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
06.04.2017 15Tehnologii Web
copyright@www.adrian.runceanu.ro
3. Inserarea imaginilor
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>
06.04.2017 16Tehnologii Web
copyright@www.adrian.runceanu.ro
3. Inserarea imaginilor
• Î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ă.
06.04.2017 17Tehnologii Web
copyright@www.adrian.runceanu.ro
3. Inserarea imaginilor
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.
06.04.2017 18Tehnologii Web
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>
06.04.2017 19Tehnologii Web
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.
06.04.2017 20Tehnologii Web
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.
06.04.2017 21Tehnologii Web
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.
06.04.2017 22Tehnologii Web
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.
06.04.2017 23Tehnologii Web
3. Inserarea imaginilor
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:
06.04.2017 24Tehnologii Web
3. Inserarea imaginilor
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ă.
06.04.2017 25Tehnologii Web
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
06.04.2017 26Tehnologii Web
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">
06.04.2017 27Tehnologii Web
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
06.04.2017 28Tehnologii Web
copyright@www.adrian.runceanu.ro
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
06.04.2017 29Tehnologii Web
copyright@www.adrian.runceanu.ro
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.
06.04.2017 30Tehnologii Web
copyright@www.adrian.runceanu.ro
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)
06.04.2017 31Tehnologii Web
copyright@www.adrian.runceanu.ro
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
06.04.2017 32Tehnologii Web
copyright@www.adrian.runceanu.ro
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.
06.04.2017 33Tehnologii Web
copyright@www.adrian.runceanu.ro
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
06.04.2017 34Tehnologii Web
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>.
06.04.2017 35Tehnologii Web
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>
06.04.2017 36Tehnologii Web
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>
06.04.2017 37Tehnologii Web
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>
06.04.2017 38Tehnologii Web
copyright@www.adrian.runceanu.ro
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.
06.04.2017 39Tehnologii Web
copyright@www.adrian.runceanu.ro
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
06.04.2017 40Tehnologii Web
copyright@www.adrian.runceanu.ro
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.
06.04.2017 41Tehnologii Web
copyright@www.adrian.runceanu.ro
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>
06.04.2017 42Tehnologii Web
copyright@www.adrian.runceanu.ro
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
06.04.2017 43Tehnologii Web
copyright@www.adrian.runceanu.ro
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.
06.04.2017 44Tehnologii Web
copyright@www.adrian.runceanu.ro
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>
06.04.2017 45Tehnologii Web
copyright@www.adrian.runceanu.ro
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>
06.04.2017 46Tehnologii Web
copyright@www.adrian.runceanu.ro
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
06.04.2017 47Tehnologii 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
06.04.2017 48Tehnologii Web
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
06.04.2017 49Tehnologii Web
copyright@www.adrian.runceanu.ro
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
06.04.2017 50Tehnologii 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>
06.04.2017 51Tehnologii Web
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>
06.04.2017 52Tehnologii Web
copyright@www.adrian.runceanu.ro
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
06.04.2017 53Tehnologii 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>
06.04.2017 54Tehnologii Web
Exemplu:
Efect:
5.2. Lista neordonată
<p> Tipuri de calculatoare: </p><ul>
<li> IBM; </li><li> COMPAQ; </li><li> APPLE; </li><li> SUN; </li>
</ul>
55Tehnologii Web
Se pot construi si liste imbricate:
5.2. Lista neordonată
<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>
56Tehnologii Web
Efect:
copyright@www.adrian.runceanu.ro
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
06.04.2017 57Tehnologii 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>.
06.04.2017 58Tehnologii Web
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>
06.04.2017 59Tehnologii Web
copyright@www.adrian.runceanu.ro
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
06.04.2017 60Tehnologii Web
copyright@www.adrian.runceanu.ro
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).
06.04.2017
<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>
61Tehnologii Web
copyright@www.adrian.runceanu.ro
5.4. Utilizari speciale ale listelor
In exemplul urmator lista de definitii are itemii <dt> si <dd> multipli.
06.04.2017
<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>
63Tehnologii Web
copyright@www.adrian.runceanu.ro
5.4. Utilizari speciale ale listelorUltimul exemplu este o lista neordonata personalizata care utilizeaza
pe post de elemente imagini si texte.
06.04.2017
<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>
65Tehnologii Web
top related