	Biologie	Chimie	Didactica	Fizica	Geografie	Informatica
	Istorie	Literatura	Matematica	Psihologie

Internet

Index » educatie » » informatica » Internet
» HTML - Elemente HTML, tutorial

HTML - Elemente HTML, tutorial

HTML (HyperText Markup Language)

1. Introducere

HyperText Markup Language (HTML) este limbajul de marcare predominant pentru crearea paginilor web.El ofera mijloacele necesare pentru a descrie structura informatiilor bazate pe text intr-un document-prin indicarea anumitor texte ca titluri,paragrafe,liste-si pentru a suplimenta textul cu imagini,figuri si alte obiecte.HTML poate de asemenea sa descrie,pana la un anumit nivel,infatisarea si semantica documentelor si poate asigura indicatii suplimentare,cum ar fi codul pentru limbaj de scriere care poate afecta comportamentul browser-elor web si al altor procesoare HTML.

Marea majoritate a documentelor care apar pe World Wide Web sunt scrise in HTMl.[1]

HyperText se refera la modul in care paginile web se leaga. Markup Language descrie cum functioneaza MTHL-ul.Cu ajutorul unui limbaj de marcare pur si simplu "marchezi" un text cu etichete care comunica unui browser web cum sa stuctureze acel document. HTML a fost proiectat initial cu scopul de a defini structura obiectelor (titluri, paragrafe, liste si tot asa) pentru a facilita comunicarea informatiilor stiintifice intre cercetatori.[1]

Hypertext Markup Language este un limbaj care descrie cum pagini de text ,grafice si alte informatii sunt organizate si legate intre ele.Aceste pagini legate intre ele au fost denumite World Wide Web (WWW), si au fost create cateva browser-e web pentru a permite oamenilor sa vada aceste pagini web.Astazi paginile MTHL sunt interfata standard pentru Internet.Ele pot include grafice animate ,sunet,imagini,programe interactive si text.

2. Elemente HTML

Toate paginile HTML sunt construite din elemente.Un element este un container in care este plasata o parte din pagina.Orice este continut in acel element va avea caracteristicile elementului.Elementele au doua caracteristici de baza:atributele si continutul.Fiecare atribut si continutul fiecarui element are anumite restrictii care trebuie respectate pentru ca un document HTML sa fie considerat valid.Pentru a identifica,spre exemplu,inceputul unei pagini acesta va fi introdus intr-un element de tip heading<h1> </h1>.Pentru a crea un tabel se introduc informatiile din tabel intr-un element de tip table <table> </table>.[1]

Multe tipuri de elemente se afla in corpul documentului web.Spre exemplu, elementele la nivel de bloc definesc continutul structural al blocurilor cum ar fi paragrafele <p> si inceputurile<h1>.Elementele la nivel de bloc introduc ,in mod normal,linii de pauza.Forme speciale de blocuri cum ar fi listele neordonate <ul> pot fi folosite pentru a crea liste de informatii.Elementele inline cum ar fi bold<b>, strong<strong> si multe altele au loc in interiorul blocurilor.Alte tipuri amestecate de elemente le includ pe acelea care fac trimitere la alte obiecte cum ar fi imaginile<img> sau programele<object>.Elementele greu de caracterizat pot fi de grupate si definite ,dar adesea acestea au legatura cu browser-ele - elemente specifice ca <marquee> care nu fac parte din specificatiile HTML sunt totusi folosite in mod comun.

3. Tag-uri

Un element este compus din doua tag-uri:un tag pentru deschidere si unul pentru inchidere.Toate tag-urile se construiesc in acelasi mod. Majoritatea tag-urilor definesc si au efect asupra unei anumite regiuni din document.Un tag incepe cu semnul "mai mic decat"(<) apoi numele elementului urmat de semnul"mai mare decat"(>). Sper exemplu tag-ul pentru deschidere pentru un element de tip paragraf va arata astfel:<p>.Diferenta intre tag-ul pentru deschidere si cel pentru inchidere este aceea ca se mai foloseste semnul (/) inaintea numelui elementului:</p>.Continutul se introduce intre tag-uri.Un simplu paragraf va arata astfel[1]:

<p>Acesta este un paragraph HTML.</p>

Tag	Semnificatie
<html>	tag pentru demarcarea unui fisier html fata de alte documente text
<head>	tag pentru descrierea continutului fisierului
<title>	tag pentru titlul paginii html
<body>	tag pentru continutul paginii
<h1-6>	tag pentru heading
<hr>	tag pentru linie orizontala
<p>	tag pentru paragraf
<br>	tag pentru intrerupere de linie (linie noua)
<!-- . -->	tag pentru comentariu

The <body> tag indica browser-ului web unde incepe continutul paginii respective,iar </body> unde se termina.Tot ce apare intre <body> si </body> va aparea pe ecranul principal a ferestrei browser-ului web.Browser-ele web afiseaza orice text intre<title> si </title> in partea cea mai de sus a ferestei browser-ului.Titlul este folosit si pentru a identifica o pagina pe browser.

Pentru crearea unei pagini mai sunt necesare alte doua tag-uri:<html> si <head>.Prin folosirea tag-ului<html> la inceputul documentului se indica faptul ca acesta este o pagina web.Tag-ul</html> inseamna ca pagina s-a terminat.

Unele elemente nu folosesc tag-uri pentru inchidere,deoarece nu inchid continutul.Se numesc elemente goale.

Tag-uri HTML care nu au tag-uri de inchidere:

`<area>`	`<base>`	`<basefont>`
`<br>`	`<col>`	`<frame>`
`<hr>`	`<img>`	`<input>`
`<isindex>`	`<link>`	`<meta>`
`<param>`

Conform standardelor HTML tag-urile si numele atributelor nu conteaza daca sunt scrise cu litere mari sau mici.

4. Atribute si valori

Atributele sunt o alta parte importanta a HTML.Atributele unui element sunt perechi nume-valoare.Un atribut este folosit pentru a defini caracteristicile unui element si este plasat in interiorul tag-ului de deschidere al elementului.Pentru a specifica,spre exemplu,dimensiunea unei imagini sau a unui grafic de pe pagina se va folosi elementul[1] "image" <img />.

Valoarea unui atribut se pune dupa semnul egal(=),dupa numele atributului.In HTML daca valoarea unui atribut este un singur cuvant sau un numar,aceasta se poate trece dupa semnul egal.Alte valori care contin mai multe cuvinte separate prin spatiu se trec intre ghilimele("").Lungimea unei valori se limiteaza la 1024 de caractere.[1]

Valorile lucreaza impreuna cu atributele pentru a defini complet caracteristicile unui element.Un atribut denumeste o caracteristica iar valoarea descrie acea caracteristica.[1]

Majoritatea elementelor pot lua unul din cele cateva atribute obisnuite: id, class, style si title.Atributul id ofera un identificator de document unic pentru element.Atributul class ofera o modalitate de a clasifica elemente asemanatoare in scopul unor prezentari. Atributul title este folosit pentru a adauga o explicatie de tip subtext unui element.[3]

5. Ancore

Tag-ul de tip ancoraa este o trasatura HTML care defineste atat sursa cat si destinatia unei superlegaturi.Trebuie folosit tag-ul <a> cu atributul href pentru a defini sursa unei superlegaturi.Valoarea atributului href este URL destinatie.

Continutul sursei tag-ului <a> -cuvintele sau/si imaginile dintre acesta si tag-ul de inchidere</a>-este bucata din document care este special activata pe ecranul browser-ului.Continutul acestor ancore arata de obicei diferit decat continutul inconjurator.(text intr-o culoare diferita sau subliniat,imagini care sunt bordate in diferite culori sau alte efecte) si icoana mouse-ului se schimba cand trece pe ele.Continutului tag-ului<a> trebuie sa fie de tip text sau imagine care le indica utilizatorilor in mod explicit sau intuitiv unde vor ajunge prin superlegatura.

Elementul "a" are multe alte atribute posibile in afara de "href" cum sunt cele din tabel[2]:

nume atribut	valoare posibila	descriere
href	URL	seteaza URL-ul obiectul destinatie pentru ancora
name	text	denumeste ancora pentru a fi gasita de alta ancora
target	nume de frame	identifica ancora drept tinta pentru o alta ancora
title	caracter	seteaza textul consultativ
rel	text	defineste relatia obiectului cu care se face legatura
rev	text	defineste relatia obiectului curent cu obiectul cu care se face legatura.Defineste legatura inversa
accesskey	caracter	seteaza tasta pentru tastatura care are acces la legatura

Tag-ul <a> de obicei defineste sursa locatiei unei superlegaturi:unde duce legatura si pe ce trebuie sa apesi ca sa ajungi acolo.O posibila destinatie pentru o superlegatura este numele unei locatii in interiorul unui document HTML.Tag-ul <a> poate fi folosit pentru a defini aceste locatii cu termenul de "marker".Pentru a seta un marker se seteaza "name" cu un nume simbolic pentru locatia marker-ului.Numele definit trebuie sa fie unic in document.Oriunde este plasat marker-ul intr-un document HTML, acesta devine o destinatie pentru o superlegatura.[2]

Locatia unui marker intr-un document HTML poate fi referita prin introducerea semnului # si a unui nume pentru marker dupa URL.Spre exemplu:

<a href='https://www.democompany.com/products/robots.html#specs'>Robot Specs</a>

va face legatura cu un marker denumit "specs" in fisierul "robots.html".Un exemplu complet de legatura in interiorul unui fisier si cu merker-e din afara este urmatorul:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'

'https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>

<head>

<title>Name Attribute Example</title>

</head>

<body>

Go to the <a href='#bottom'>bottom</a> of this document.<br />

Link right to a

<a href='../examples/chapter4/testfile.html#marker1'>marker</a>

in another document.</p>

<p>To make this work we need to simulate the document being very

long by using many breaks.

<strong id='middle'>the middle</strong>

</p>

<hr />

<p><a id='bottom' name='bottom' href='#top'>return to top</a>

<a href='#middle'>go to middle</a></p>

</body>

</html>

6. Frame-uri

O pagina HTML poate fi impartita in mai multe sub-pagini numite frame-uri. Fiecare frame afiseaza documente independente .Un frame poate contine orice continut pe care browser-ul il poate afisa inclusiv multimedia.Daca frame-ul contine o legatura hypertext pe care utilizatorul o selecteaza ,continutul noului document ,chiar un alt document de tip frame poate inlocui continutul frame-ului respectiv sau chiar intreaga fereastra a browser-ului.Frame-urile sunt definite intr-un document special in care se inlocuieste tag-ul <body> cu unul sau mai multe tag-uri<frameset> care comunica browser-ului cum sa isi imparta fereastra principala in mai multe frame-uri.Tag-ul special <frame> se introduce in interiorul tag-ului<frameset> pentu a indica care este documentul care se introduce in tag.[2]

Un frameset este un tip special de document HTML care defineste cate frame-uri vor fi afisate si ce document HTML va aparea in fiecare frame[3].Un exemplu de folosire a tag-ului <frameset> este urmatorul:

<!DOCTYPE html

PUBLIC '-//W3C//DTD XHTML 1.0 Frameset//EN'

'https://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd'>

<html xmlns='https://www.w3.org/1999/xhtml'

xml:lang='en' lang='en'>

<head>

<title>First Frameset</title>

</style>

</head>

<body>

<p><a href='toc.htm'>Table of Contents</a></p>

</body>

</noframes>

</frameset>

</html>

7. Tabele

Un tabel este o colectie de numere si cuvinte aranjate in linii si coloane de celule.Marea majoritate a celulelor contin valori ale datelor,altele contin titlurile liniilor si ale coloanelor care descriu datele[5].

Exista cinci tag-uri care fac posibila crearea unor tabele printre care tag-ul <table> si <caption> pentru includerea unei descrieri a tabelului.Atribute speciale ale tag-urilor permit schimbarea infatisarii si dimensiunii tabelelor.Un tabel se creaza linie cu linie prin inserarea intre liniile tabelului a tag-ului <tr> si tag-ul de sfarsit</tr>, a tag-ului table header <th> sau table data<td> si a continutului fiecaruia pentru fiecare celula din table. Titlurile si datele pot contine aproape orice tip de continut inclusiv texte,imagini,forme si chiar alte tabele[5].

Se pot crea oricate celule,dar fiecare linie din tabel ar trebui sa aiba acelasi numar de coloane ca si cealalta linie.In exemplul urmator se creaza un tabel simplu folosind doar patru tag-uri de tip table[5]:

<?xml version='1.0' encoding='UTF-8'?>

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.1//EN'

'https://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd'>

<head>

<title>Hockey Stats</title>

</head>

<body>

<table>

<tr>

<th>Season</th>

</tr>

<tr>

<td>Summer 2005</td>

</tr>

<tr>

<td>Winter 2004</td>

</tr>

<tr>

<td>Summer 2004</td>

</tr>

<tr>

<td>Spring 2004</td>

</tr>

</table>

</body>

</html>

8. Liste

HTML are trei tipuri de liste de baza:liste ordonate(<ol>),liste neordonate (<ul>) si liste definite(<dl>).[2]

O lista neordonata reprezentata prin tag-ul <ul> si tag-ul de sfarsit </ul> este folosita pentru liste de elemente in care ordinea nu este specificata.Listele ordonate sunt potrivite pentru a crea schite sau instructiuni pas-cu-pas deoarece elementele listei sunt numerotate in mod automat de catre browser.Elementele din listele ordonate si din alte liste sunt definite prin folosirea tag-ului <li> care nu necesita un tag de inchidere in HTML-ul traditional[2].O lista generica ordonata arata astfel:

<ol>

. . .

</ol>

Tag-ul <ol> are trei atribute de baza:compact,start si type.Atributul compact nu necesita nici o valoare in HTML.[2]

Un exemplu complet de liste ordonate este urmatorul:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'

'https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>

<head>

<title>Ordered List Example</title>

</head>

<body>

<p>Ordered lists can be very simple.</p>

<ol>

</ol>

<p>Ordered lists can have a variety of types.</p>

<ol>

<li type='a'>Lowercase letters</li>

<li type='A'>Uppercase letters</li>

<li type='i'>Lowercase Roman numerals</li>

<li type='I'>Uppercase Roman numerals</li>

<li type='1'>Arabic numerals</li>

</ol>

<p>Ordered lists can start at different values

and with different types.</p>

<li>This should be j</li>

<li value='3'>This should be c

<ol>

<li>Lists can nest

<ol>

<li>Nesting depth is unlimited</li>

</ol>

</li>

</ol>

</li>

</ol>

</body>

</html>

O lista neordonata introdusa de tag-ul <ul> si tag-ul de sfarsit </ul> este folosita pentru liste de obiecte in care ordinea nu este specificata.In mod obisnuit, un browser adauga o bulina de un anumit tip pentru fiecare element.Atributul de tip type poate fi folosit pentru a seta tipul de bulina pentru lista.Valoarea lui type intr-un tag <li> subscrie valorile pentru restul listei,doar daca nu sunt subscrise de alte specificatii type.Valorile permise pentru type sunt disc,cicle sau square.

Un exemplu complet de liste ordonate este urmatorul:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'

'https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>

<head>

<title>Unordered List Example</title>

</head>

<body>

<ul>

<li>Unordered lists

<ul>

<li>can be nested.

<ul>

<li>Bullet changes on nesting.</li>

</ul>

</li>

</ul>

</li>

</ul>

<p>Bullets can be controlled with the <b>type</b> attribute.

<b>Type</b> can be set for the list as a whole or item by item.</p>

<li>First item bullet shape set by ul</li>

<li type='circle'>Circle item</li>

<li type='square'>Square item</li>

</ul>

</body>

</html>

9. Formulare

Formularele se compun din unul sau mai multe campuri text,butoane pentru selectie, campuri checkbox,meniuri cu mai multe optiuni,imagini toate plasate in interiorul tag-ului <form>.Fiecare camp va fi denumit prin setarea unei valori a atributului name in HTML sau a atributului id in HTML 4.Pentru ca formularul sa functioneze trebuie specificate doua lucruri in tag-ul<form>:adresa programului care va intermedia continutul formularului folosind action si metoda prin care datele formularului sunt trimise folosind atributul method. Atributele name si id pot fi folosite pentru a seta un nume pentru formular.[2]

10. URL

Fiecare document si resursa de pe Internet are o adresa unica cunoscuta sub numele de uniform resource locator (URL).O adresa URL consta din numele fisierului, urmat de ierarhia directoarelor in care este stocat fisierul(pathname),numele domeniului de Internet al carui server(server domain name) gazduieste fisierul respectiv si softul si metoda prin care browser-ul si servaer-ul pe care se gaseste fisierul comunica intre ele pentru a schimba documentul(protocol):

protocol://server_domain_name/pathname

https://www.kumquat.com/docs/catalog/price_list.html

price_list.html

https://www.kumquat.com/

Primul exemplu este un URL complet sau absolut.Include toate partile componente ale formatului URL: protocol,server,pathname-ul documentului.URL absolute pot provoca probleme cand au loc mutari ale documentelor in alte directoare sau pe alte servere.Se pot folosi URL relative carora browser-ele le completeaza partile lipsa cu ajutorul bazei URL.

Exemplul doi este cel mai simplu URL dintre toate,browser-ul presupune ca documentul price_list.html este localizat pe acelasi server ,in acelasi director ca documentul actual si foloseste acelasi protocol.URL relative sunt folositoare daca nu se cunoaste numele unui director sau al documentului.

Al treilea exemplu URL indica pagina web kumquat.com,acesta lasa server-ul kumquat sa trimita un document.In mod tipic server-ul trimite primul fisier din document sau o lista a continutului directoarelor.

Bibliografie:

1. James H. Pence - How to Do Everything with HTML & XHTML

2. Thomas A. Powell - HTML & XHTML: The Complete Reference, Fourth Edition

3. en.wikipedia.org/wiki/HTML

4. Deidre Hayes - Sams Teach Yourself HTML in 10 Minutes, Fourth Edition

5. Dick Oliver, Michael Morrison - SAMS Teach Yourself HTML and CSS in 24 Hours, Seventh Edition

Politica de confidentialitate