Lucrarea de Laborator NR 5

Ministerul Educaiei al Republicii Moldova
Universitatea Tehnic a Moldovei

Facultatea Radioelectronic i Telecomunicaii
Referat
La disciplina Tehnologii Informaionale
Aplicate
Pe tema: STUDIEREA STRUCTURII LIMBAJULUI HTML
A efectuat:
studenta gr.IMTC-101
Cortac Oxana
A verificat:
lector superior
Ceban Ghenadie
Chiinu 2011
Scopul lucrrii: analiza i sinteza funciilor de baz ale limbajului HTML i
protocolului HTTP n reeaua Internet.
Sarcina de laborator
1 S se studieze linbajul de formare a paginei Web HTML.
2 S se analizeze structura i funciile de baz ale protocolului HTTP.
3 S se studieze principiul formrii i salvrii paginei Web.
Proba teoretic
Descrierea succint a teoriei privitoare la structura limbajului HTML i
protocolului HTTP.
Limbajul HTML - HyperText Markup Language - este un limbaj de
marcare utilizat pentru crearea paginilor Web. Un marcator (sau
tag) este cuprins ntre caracterele < i > . Majoritatea tagurilor au
tag de sfrit, acesta avnd acelai nume ns precedat de
simbolul / . Exemplu de marcatori:
<b>text</b><br>
Marcatorul b are tag de sfrit, iar br este de sine stttor.

n cazul n care avem deschise mai multe taguri, acestea se nchid
n ordine invers fa de cum au fost deschise (ultimul tag deschis
va fi primul nchis).
Corect:
Greit:
<p><b>Textcorect</b></p>
<p><b>Textincorect</p></b>
Un tag poate s conin unul sau mai multe atribute. Acestea sunt
perechi de forma nume="valoare" . Exemple de atribute:
<palign="center">paragrafcentrat</p>
<hrsize="1"width="50">
Comentariile sunt cuprinse ntre <! i > . Exemplu de

comentariu:
<!comentariu>
Editarea i vizualizarea documentelor HTML

Pentru editarea documentelor HTML se poate utiliza orice editor
de texte obinuit (de exemplu n Linux joe , pico , sau Notepad n
Windows). Exist o serie de editoare specializate dintre care
recomandm HTMLKit i UltraEdit . Utilizarea altor editoare fr
acceptul cadrului didactic care ine laboratorele este interzis.
Pentru sistemul Linux, documentele vor fi stocate n directorul
html aflat n directorul de home al unui utilizator. Accesarea
paginii se va realiza prin intermediul adresei
http://student.infoiasi.ro/~cont , unde cont este numele de cont al
utilizatorului care dorete s-i publice pagina pe Web.
Pagina de start al unui site depinde de serverul pe care se afl, de
regul fiind index.html .
Pentru a vedea o pagin Web de pe calculatorul local, din meniul
File al navigatorului se va selecta opiunea Open (n cazul n care
utilizm navigatorul Internet Explorer, vom apsa pe butonul
Browse pentru a vizualiza sistemul de fiiere i pentru a selecta
pagina Web dorit).
Structura general a unui document HTML

<!DOCTYPEHTMLPUBLIC"//W3C//DTDHTML4.01Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>...</title>
...
</head>
<body>
...
</body>
</html>
Mai nti se definete tipul documentului (cu DOCTYPE ), n cazul

nostru este vorba de HTML 4.01. Informaiile sunt cuprinse ntre
marcatorul html , iar acesta conine dou seciuni: head i body . n
partea de head vor fi cuprinse infromaii utile pentru navigatorul
Web sau pentru alte aplicaii, cum ar fi motoarele de cutare.
Marcatorul title va conine un text care va fi afiat pe bara de
titlu a navigatorului Web. De regul, seciunea body va cuprinde
informaiile care vor fi vizibile n suprafaa de afiare a ferestrei

navigatorului.
Paragrafe
Pentru inserarea de paragrafe avem la dispoziie urmtoarele
taguri:
Numele
tagului
Descriere
Paragraf obinuit
h1, h2, h3, h4,

h5, h6
Paragrafe pentru titlu. Sunt utilizate pentru

titlu, subtitlu, subsubtitlu, .am.d.
Dintre atributele suportate menionm:

Numele
atributului
align
Valoare
left | right |
center | justify
Descriere
Specific alinierea paragrafului.
Implicit este valoarea left.
Paragrafele (i n general elementele care introduc informaiile

vizibile celor care viziteaz paginile Web) vor fi scrise n seciunea
body a documentului HTML.
Exemple de paragrafe:
<palign="justify">Paragrafaliniatlastangasiladreapta</p>
<h1align="center">Titlualiniatcentrat</h1>
<h5align="right">Titlu5aliniatladreapta</h5>
Liste
Pentru definirea de liste nenumerotate putem utiliza marcatorul
ul , iar pentru numerotate ol . Ambele posed tag de sfrit. Un
element al listei este cuprins n interiorul tagului li .
Elementele listei nenumerotate sunt precedate de un anumit
simbol. Pentru a stabili simbolul dorit se va utiliza atributul type
pentru marcatorul ul , cu una din valorile: disc (pentru buline,
care este implicit), square (pentru ptrat) i circle (pentru
cercuri). Exemplu de list nenumerotat care utilizeaz ptrele:
<ultype="square">
<li>trandafiri</li>
<li>lalele</li>
<li>narcise</li>
</ul>
Pentru listele numerotate atributul type poate lua una din valorile:
1 pentru numerotarea cu cifre arabe (care este i implicit), a
pentru litere mici, A pentru litere mari, i pentru cifre romane mici
i I pentru cifre romane mari. n plus listele numerotate posed
atributul start care poate lua o valoare numeric. Aceasta indic
valoarea de la se ncepe numerotarea. Exeplu de list numerotat
cu cifre romane mari:
<oltype="I"start="3">
<li>BeautyandtheBeast</li>
<li>IceAge</li>
<li>Shreck</li>
<li>SnowWhite</li>
</ol>
Tabele
Un tabel se definete prin intermediul marcatorului table . Acesta
posed urmtoarele atribute importante:
Numele
atributului
Valoare
Descriere
| Specific alinierea tabelului. Implicit este
valoarea left.
align
left | right
center
border
valoare
numeric
Stabilete grosimea marginii tabelului.

Implicit este valoarea 0.
width
valoare
numeric |
procente
Indic limea tabelului. Valoarea numeric

reprezint limea tabelului exprimat n
pixeli, iar cea procentual n proporia din
limea ferestrei navigatorului Web.
cellspacing
valoare
numeric
Desemneaz distana n pixeli dintre celulele

tabelului.
cellpadding
valoare
numeric
Desemneaz distana n pixeli dintre textul

unei celule i marginea (bordura) acesteia.
Marcatorul tr stabilete o linie din tabel (eng. table row), iar n

cadrul acesteia pot aprea celule pentru capul de tabel (eng.
table head), prin intermediul marcatorului th , sau/i celule cu
date (eng. table data ), caz n care se utilizeaz marcatorul td .
Exemplu de tabel aliniat centrat:

<tableborder="1"align="center"width="75%"cellspacing="0"cellpadding="5">
<tr><!definimoliniedetabel>
<th>Numesiprenume</th><!definimcapuldetabel>
<th>Nr.absente</th>
<th>Nota</th>
</tr><!saterminatprimalinie>
<tr><!incepemadoualinie>
<td>ChistolCrinaElena</td><!completamcudate>
<td></td>
<td>10</td>
</tr>
<tr><!altaliniecudate>
<td>ChiriacIoana</td>
<td>1</td>
<td>10</td>
</tr>
<!s.a.m.d.>
</table>
Marcatorii tr i td pot avea urmtoarele atribute:

Numele
atributului
Valoare
Descriere
left | right
| center
Specific alinierea textului n cadrul celulei.

Implicit este valoarea left pentru marcatorul
td i center pentru th.
valign
top | middle
| bottom
Specific alinierea textului pe vertical din

cadrul celulei. Implicit este valoarea middle.
Pentru a observa efectul acestui atribut
trebuie s avem pe aceeai linie dou celule
inegale (pe vertical).
colspan
valoare
numeric
Stabilete numrul de coloane pe care se

ntinde respectiva celul.
rowspan
valoare
numeric
Stabilete numrul de rnduri din tabel pe

care se ntinde respectiva celul.
width
valoare
numeric |
procente
Indic limea celulei i are aceeai

semnificaie ca pentru tabele. De regul, se
specific doar limile celulelor din prima linie
(acestea fiind i limile coloanelor).
align
Un alt exemplu de tabel:

<tablealign="center"width="70%"cellpadding="3"cellspacing="0"border="1">
<tr><td></td>
<th>Grupa1</th>
<th>Grupa2</th>
</tr>
<tr>
<th>810</th>
<tdcolspan="2"align="center">Limbaengleza</td>
</tr>
<tr>
<th>1012</th>
<tdrowspan="2">Web</td>
<td>Matematica</td>
</tr>
<tr>
<th>1214</th>
<td>Geografie</td>
</tr>
</table>
Imagini
Imaginile sunt stocate n fiiere separate cum ar fi cele n format
GIF, JPEG sau mai nou PNG. Marcatorul utilizat este img , iar acesta
nu posed tag de sfrit. Principalele atribute sunt:
Numele
atributului
Valoare
Descriere
src
adres
Adresa relativ sau absolut a fiierului

surs care conine imaginea.
width
valoare
numeric |
procente
Indic limea imaginii.
height
valoare
numeric |
procente
Indic nlimea imaginii.
text
Stabilete un text alternativ. Dac

navigatorul Web nu poate afia imaginile,
atunci n locul lor vor aprea textele
alternative.
alt
De regul, sunt specificate dimensiunile reale a imaginilor.

Mrirea acestora nu este recomandat deoarece se pierde din
calitatea acesteia, iar micorarea se poate realiza ntr-un editor
grafic, astfel micorndu-se dimensiunea fiierului (ceea ce duce
la o ncrcare mai rapid a ntregii pagini Web).
Exemple de utilizare a imaginilor:
<!specificareaadreseiabsolute>
<imgsrc="http://students.infoiasi.ro/~stanasa/eyes.gif"alt="Ochi">
<!specificareaadreseirelativesiadimensiunilorrealeaimaginilor>
<imgsrc="ferrari.jpg"alt="Masinasport"height="100"width="275">
<imgsrc="chivu.jpg"alt="fotbalist(Chivu)"height="300"width="100">
Legturi
Pentru a stabili (hiper)legturi ntre paginile Web (sau n cadrul
aceleiai pagini) se utilizeaz marcatorul a . Acesta posed
atributul href , iar ca valoarea acesta are o adres relativ sau
absolut. Astfel se pot crea trimiteri la documente de diferite
tipuri (de exemlu: PDF, GIF, ZIP, XML, VRML).
Exemple de legturi:
<!referin?erelative>
<ahref="prezentare.zip">Laborator1</a>
<ahref="mercedes.jpg">PrototipMercedes</a>
<!referin?ealsolute>
<ahref="http://www.infoiasi.ro">FacultateadeInformatica</a>
<ahref="http://students.infoiasi.ro/~stanasa/cv.pdf">CV</a>
Proba practic
Formarea paginei Web
Taparea text n document de tip txt, apoi salvm documentul format cu extensia
html, astfel vom obine o pagin de tip identic structurii Web .
Am format de sinestatator un document de tip txt in care am introdus listingul
structurii web,ce are urmatoarea forma:
<TITLE>Lucrare de laborator nr.5</TITLE>
<BODY BGCOLOR="#00FFFF">
<center>
<H1><hr/><marquee behavior="alternate" direction="up"
width="80%"><marquee direction="right"
behavior="alternate">Craciun fericit!!!</marquee></marquee>
<hr> </H1>
<P><u><FONT size=14 COLOR=RED>Sa aveti parte de
fericire si multa,multa sanatate!!!</u></P>
<BR> </center>
<CENTER>
<table border="4"> <tr>

<th>Sanatate</th>
<th>Fericire</th>
<th>Bogatie</th></tr>
<tr><td rowspan="3">Dragoste</td>
<td>Pace sufleteasca</td><td>Daruire de sine</td></tr>
<tr><td>Oamnei scumpi alaturi</td><td>D-zeu alaturi
mereu</td></tr>
<tr><td colspan="3">Craciun Fericit!!!</td></tr>
</table>
<img src="C:\Users\Valentina\Desktop\brad_craciun_goburi.jpg"
width="400" height="300" alt="Sa fiti fericiti!" title="craciun
fericit!!!"0"/>
<br>
<a href="http://interwebdohod.ru/drug.html
">Merita sa Vezi ce este aici!!!</a></FONT> </BODY>
Dupa salvarea documentului dat cu extensia .txt,am salvat
acelasi document in formatul .html si iata vizualizarea paginii de
tip structura web:
Puteti observa ca titlul acestei pagini aflat in fruntea paginii se

misca dintr-o parte in alta.Aceasta e posibil cu ajutorul functiei
<marquee behavior="alternate" direction="up"
width="80%"><marquee direction="right"
behavior="alternate">Craciun fericit!!!
</marquee></marquee>
Mai jos am introdus o imagine si am facut o adresare la un link.De
altfel,imaginea la fel se poate misca in cadrul paginii utilizind
aceeasi functie ca si pentru text.
Sunt posibile inserarile unor playere audio si video,insa fiecare

browser trebuie sa fie compatibil pentru vizionarea lor,si
ascultare.
Concluzii: Am efectuat aceasta lucrare de laborator si am facut
cunostinta cu structura HTML si cu modul de formare a unei
pagini web.Deci am constatat ca o pagina de web este similara
unei pagini obisnuite de carte, numai ca are o lungime nelimitata,
latimea fiind limitata de latimea ecranului.Ea poate contine orice
de la text simplu pana la imagini, animatii, sunete, filme.In
practica se pot aplica multe procedee si exista multe posibilitati
de a performa si a idealiza pagina formata,insa e nevoie de
munca asidua si multa rabdare si cunostinte.
Bibliografia:
http://thor.info.uaic.ro/~stanasa/web/html.html
http://werbach.com/barebones/ro_barebone.html
http://www.tutorialehtml.com/
http://www.htmlgoodies.com/

Lucrarea de Laborator NR 5

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Lucrarea de Laborator NR 5

Încărcat de

Drepturi de autor:

Formate disponibile

Ministerul Educaiei al Republicii Moldova

Universitatea Tehnic a Moldovei

Marcatorul b are tag de sfrit, iar br este de sine stttor.

Comentariile sunt cuprinse ntre <! i > . Exemplu de

Editarea i vizualizarea documentelor HTML

Structura general a unui document HTML

Mai nti se definete tipul documentului (cu DOCTYPE ), n cazul

informaiile care vor fi vizibile n suprafaa de afiare a ferestrei

h1, h2, h3, h4,

Paragrafe pentru titlu. Sunt utilizate pentru

Dintre atributele suportate menionm:

Paragrafele (i n general elementele care introduc informaiile

Stabilete grosimea marginii tabelului.

Indic limea tabelului. Valoarea numeric

Desemneaz distana n pixeli dintre celulele

Desemneaz distana n pixeli dintre textul

Marcatorul tr stabilete o linie din tabel (eng. table row), iar n

Exemplu de tabel aliniat centrat:

Marcatorii tr i td pot avea urmtoarele atribute:

Specific alinierea textului n cadrul celulei.

Specific alinierea textului pe vertical din

Stabilete numrul de coloane pe care se

Stabilete numrul de rnduri din tabel pe

Indic limea celulei i are aceeai

Un alt exemplu de tabel:

Adresa relativ sau absolut a fiierului

Indic limea imaginii.

Indic nlimea imaginii.

Stabilete un text alternativ. Dac

De regul, sunt specificate dimensiunile reale a imaginilor.

<table border="4"> <tr>

Puteti observa ca titlul acestei pagini aflat in fruntea paginii se

Sunt posibile inserarile unor playere audio si video,insa fiecare

S-ar putea să vă placă și