+ All Categories
Transcript

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]

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”

25.10.2016 4Tehnologii Web

[email protected]

Aspecte generale ale HTML

25.10.2016 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

[email protected]

Aspecte generale ale HTML

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

[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

25.10.2016 7Tehnologii Web

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

25.10.2016 8Tehnologii Web

[email protected]

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.

25.10.2016 9Tehnologii Web

[email protected]

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)

25.10.2016 10Tehnologii Web

[email protected]

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 local25.10.2016 11Tehnologii Web

[email protected]

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

25.10.2016 12Tehnologii Web

[email protected]

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

25.10.2016 13Tehnologii Web

[email protected]

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 browser25.10.2016 14Tehnologii Web

[email protected]

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

25.10.2016 15Tehnologii Web

[email protected]

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>

25.10.2016 16Tehnologii Web

[email protected]

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

25.10.2016 17Tehnologii Web

[email protected]

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.

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

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

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

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

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

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

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

25.10.2016 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

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

25.10.2016 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

25.10.2016 28Tehnologii Web

[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

25.10.2016 29Tehnologii Web

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

25.10.2016 31Tehnologii Web

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

25.10.2016 32Tehnologii Web

[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

25.10.2016 33Tehnologii Web

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

25.10.2016 34Tehnologii Web

[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

25.10.2016 35Tehnologii 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>.

25.10.2016 36Tehnologii 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>

25.10.2016 37Tehnologii 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>

25.10.2016 38Tehnologii 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>

25.10.2016 39Tehnologii Web

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

25.10.2016 40Tehnologii Web

[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

25.10.2016 41Tehnologii Web

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

25.10.2016 42Tehnologii Web

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

25.10.2016 43Tehnologii Web

[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

25.10.2016 44Tehnologii Web

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

25.10.2016 45Tehnologii Web

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

25.10.2016 46Tehnologii Web

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

25.10.2016 47Tehnologii Web

[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

25.10.2016 48Tehnologii 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

25.10.2016 49Tehnologii 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

25.10.2016 50Tehnologii Web

[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

25.10.2016 51Tehnologii 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>

25.10.2016 52Tehnologii 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>

25.10.2016 53Tehnologii Web

[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

25.10.2016 54Tehnologii 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>

25.10.2016 55Tehnologii 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>

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

57Tehnologii Web

Efect:

[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

25.10.2016 58Tehnologii 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>.

25.10.2016 59Tehnologii 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>

25.10.2016 60Tehnologii Web

[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

25.10.2016 61Tehnologii Web

[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

25.10.2016 63Tehnologii Web

[email protected]

5.4. Utilizari speciale ale listelor

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]

5.4. Utilizari speciale ale listelor

25.10.2016 65Tehnologii Web

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

5.4. Utilizari speciale ale listelor

25.10.2016 67Tehnologii Web

[email protected]

Întrebări?

25.10.2016 68Tehnologii Web


Top Related