Elementele limbajului HTML 4.0 si principalele lor atribute

Elementele limbajului HTML 4.0 si principalele lor atribute

HTML ( Hypertext Markup Language ) este un limbaj creat in scopul de a descrie, in mod text, formatul paginilor Web; fisierele create in acest limbaj vor fi interpretate de navigatoare, care vor afisa paginile in forma dorita ( cu texte formatate, liste, tabele, formule, imagini, hiperlegaturi, obiecte multimedia etc. ).

Limbajul HTML a evoluat in versiuni succesive, odata cu evolutia protocolului HTTP si a programelor de navigare. Astfel, HTML 1.0 era compatibil cu Mosaic, primul program de navigare, dar dupa aparitia unor navigatoare noi, a fost necesara introducerea unui standard oficial Internet pentru construirea paginilor ( HTML 2.0 ) si extinderea sa cu noi facilitati: formule matematice, tabele, moduri avansate de descriere a organizarii paginilor ( incepand cu HTML 3.0 ).

Asa cum se poate deduce din numele limbajului, HTML descrie caracteristicile de format ale elementelor incluse prin procedee de marcare. Fiind un limbaj de marcare, HTML nu utilizeaza instructiuni ( ca Pascal-ul sau C-ul ) ori comenzi ( ca Fox-ul ), ci etichete, acestea fiind numite si balize, elemente sau tag-uri. Un limbaj de marcare trebuie sa specifice multimea de marcaje obligatorii, maniera de identificare a marcajelor si semantica fiecarui marcaj.

Termenul tehnic pentru textul marcat este elementul, acesta fiind vazut ca o componenta structurala a unui document. Fiecare element trebuie specificat explicit intr-un anumit mod si astfel fiecare element va fi introdus intre doua marcaje ( tag-uri ) - de inceput si sfarsit. Perechea tag de inceput-tag de sfarsit este folosita la incadrarea fiecarei aparitii a elementului respectiv in cadrul unei pagini Web.

Astfel, forma unui element generic va fi <element>.</element>, unde <element > specifica un tag de inceput si </element> un tag de sfarsit, iar "element" este numele unui element oarecare permis de specificatiile HTML.

Un element poate fi vid ( nu contine nimic intre tag-ul de inceput si cel de sfarsit ) sau poate contine un text, inclusiv alte elemente.

Procesele de standardizare s 959b14j i de includere a comenzilor de marcare in fisierele HTML permit navigatoarelor sa citeasca si sa formateze paginile Web, lucru foarte important in conditiile in care ele contin nu numai texte alb-negru, ci si culori, imagini, hiperlegaturi, diverse obiecte.

Practic, marcajele HTML asigura controlul asupra modului de afisare a obiectelor corespunzatoare in cadrul programelor de vizualizare a documentelor HTML - navigatoarele.

Marcajele HTML pot fi clasificate in urmatoarele categorii

1.marcaje de baza - cele care delimiteaza pagina/documentul HTML, titlul acesteia si corpul paginii

2.marcaje pentru structurarea documentului, care permit introducerea de subtitluri, paragrafe, linii de delimitare

3.marcaje pentru formatarea textului si crearea listelor

4.marcaje pentru crearea hiperlegaturilor

5.marcaje pentru introducerea de obiecte: tabele, formule, imagini sau obiecte multimedia preluate din fisiere, formulare

Cateva consideratii asupra elementelor

Numele elementului nu este case-sensitive, adica, chiar daca se utilizeaza majuscule sau caractere obisnuite, rezultatul este acelasi. De exemplu <EM> este echivalent cu <Em> sau <em>

De multe ori este permis ca in cazul unor elemente tag-ul de sfarsit sa fie omis. Acest lucru nu este indicat dar nici nu constituie o greseala daca se utilizeaza aceasta practica numai la elementele care permit acest lucru.

Atributele unui element definesc diferite proprietati pentru elementul in cauza. De exemplu,

un element paragraf poate accepta ca atribut optional modul de aliniere ( la stanga, la dreapta sau centrat ), alinierea nerealizandu-se decat pentru paragraful respectiv. Un element poate avea mai multe atribute iar acestea trebuie mentionate numai in tag-ul de inceput al elementului.

Fiecare atribut are stabilit un nume - compus din caractere literale - si poate avea drept valori siruri de caractere sau numere intregi delimitate de ghilimele.

Astfel, specificarea generica a unui atribut va avea forma : atribut ="valoare".

Valorile atributelor pot fi prezentate sub mai multe forme. In cazul atributului WIDTH, de exemplu, acesta poate lua valoarea 100% care, de fapt, este o valoare relativa. Acelasi atribut poate avea o valoare fixa exprimata in pixeli. Acest lucru se intampla pentru unele atribute care definesc proprietati cum ar fi, de exempu, lungimea unui element.

Pentru alte elemente exista alte atribute cum ar fi atributul COLOR ce defineste culoarea unui element sau a unui font si in acest caz i se poate atribui ca valoare numele unei culori ( yellow, green, red, etc ) sau valoarea hexazecimala a acelei culori.

Conceperea documentelor HTML

Avand la dispozitie elementele si atributele oferite de standardele HTML, se poate crea orice document Web, oricat de complex, recurgand la un simplu editor de texte, cu ajutorul caruia se va redacta succesiunea de tag-uri si date corespunzatoare documentului respectiv.

Un fisier HTML se poate realiza :
a) manual, scriind tag dupa tag in Notepad
b) cu ajutorul editoarelor HTML precum UltraEdit, TextPad ( disponibile in varianta shareware ), AceHTML Pro, Microsoft Frontpage, HotDog sau 1st Page 2000.

Unele dintre aceste editoare poseda si o serie de facilitati precum: asistenti pentru realizarea de pagini dinamice, sabloane de documente, validatoare de cod HTML, navigator Web incorporat, completarea automata a codului, etc.

O alta clasa de aplicatii care pot fi folosite in procesul de concepere a documentelor HTML este cea a uneltelor de editare care ofera in principal un mediu de lucru vizual pentru realizarea de pagini si situri Web. Exemplu: Macromedia Dreamweaver sau Adobe GoLive. Aceasta categorie de aplicatii ofera posibilitatea urmaririi relatiilor dintre diferitele documente, incorporand facilitati de parcurgere a legaturilor si de vizualizare a structurii sitului generat

Etape in realizarea unui document Web

Se aloca un director sitului care se intentioneaza a fi realizat

Se efectueaza clic pe butonul Start - Programs, Accessories, Notepad

Se introduc textul si etichetele

Se salveaza fisierul cu extensia .htm sau .html in directorul dedicat

Se deschide fisierul in Microsoft Internet Explorer, de exemplu. Pentru a aduce modificari fisierului, se vizualizeaza codul-sursa al fisierului si dupa efectuarea modificarilor, se salveaza.

Structura unui document HTML

Un document HTML este delimitat de marcajele <HTML> si </HTML> care indica inceputul si finalul documentului si contine:

zona de antet cuprinsa intre marcajele: <HEAD> . </HEAD>, care contine informatii generale referitoare la document, cum ar fi titlul documentului, autorul acestuia, data crearii, etc.

corpul documentului delimitat de marcajele: <BODY> . </BODY>, care contine textul propriu-zis al documentului precum si elementele specifice de descriere a formatului acestuia.

Titlul, introdus in antet, nu poate depasi 64 de caractere si este cuprins intre marcajele <TITLE> . </TITLE>.

Astfel, structura generala a unui document HTML poate fi:

<HTML>
<HEAD>

. antetul documentului.

</HEAD>
<BODY>

.corpul documentului.

</BODY>
</HTML>

In cadrul corpului unui document HTML pot aparea diverse elemente pentru a specifica:

stilul de afisare

<b> (ingrosat) , <i> (inclinat) , <u> (subliniat) , <strong> (ingrosat) , <em> (intensificat) , < big> (mai mare) , <small> (mai mic) , <sub> (indice) , <sup> (exponent) , <font> (dimensiune, culoare si familie de font ) , <pre> (text preformatat) , <code> (cod sursa) , <center> (centrat)

titlurile

<h1> . <h6> (sase tipuri)

sectiunile

<div> (diviziune) , <p> (paragraf) , <hr> (linie orizontala) , <br> (trecere la linie noua)

listele

<ul> (lista nenumerotata) , <ol> (lista numerotata) , <li> (element de lista) , <dir> (lista de directoare) , <menu> (lista de tip meniu) , <dl> (glosare)

continutul grafic

<img>

tabelele

<table> (inceput de tabel) , <tr> (linie de tabel) , <td> (celula in tabel) , <th> (celula din antet) , <thead> (sectiune de antet de tabel) , <tbody> (sectiune de corp de tabel)

legaturile ( ancorele):

<a> , <link>

formularele electronice

<form> (definitie) , <input> (camp de interogare) , <select> (lista de selectie) , <option> (optiune)

cadrele (frame-urile ):

<frameset> (definire) , <frame> (cadru) , <noframes> (alternativa de afisare, daca nu sunt suportate cadrele)

suportul pentru includerea de cod-sursa scris in alte limbaje

<applet> (applet Java) , <script> (cod JavaScript sau VBScript) , <object> (obiect generic, de exemplu prezentare multimedia)

suportul multimedia

<embed> (extensie Netscape) , <bgsound> (extensie Internet Explorer)

extensiile

<meta> (meta-date si alte directive)

Elementul <BODY> admite urmatoarele atribute:

BACKGROUND=URL

Unde URL este un sir de caractere ce reprezinta adresa Web a unei imagini care va fi utilizata de catre browser ca fundal pentru document. Daca imaginea nu ocupa intreaga zona din fereastra browser-ului destinata vizualizarii paginii respective, ea va fi multiplicata ca intr-un mozaic.

BGCOLOR=culoare

Atributul BGCOLOR stabileste culoarea fundalului ( culoarea zonei din fereastra browser-ului in care este vizualizat documentul ). In HTML culorile se pot specifica in doua moduri: utilizand denumiri predefinite ( in limba engleza ) asociate unor culori, sau prin descompunerea unei culori in componentele RGB, sub forma hexazecimala (cate doua cifre hexa pentru fiecare componenta). De exemplu, culoarea rosie poate fi specificata fie prin denumirea predefinita BGCOLOR=RED, fie utilizand valoarea RGB: BGCOLOR=#FF0000.

Observatie referitoare la culori: utilizarea culorilor are rolul de a face documentul mai atractiv, dar si mai usor de citit. De aceea culorile trebuie alese cu atentie, astfel incat documentul sa poata fi citit on-line fara a obosi excesiv ochii cititorului.

TEXT=culoare

Atributul TEXT stabileste culoarea textului

LINK=culoare

Atributul LINK stabileste culoarea cu care vor fi marcate in text link-urile nevizitate

VLINK=culoare

Atributul VLINK stabileste culoarea cu care vor fi marcate in text link-urile vizitate

ALINK=culoare

Atributul ALINK stabileste culoarea cu care va fi marcat in text link-ul activ ( cel asupra caruia este plasat cursorul mouse-ului )

Formatarea textului si utilizarea listelor in documentele HTML

Formatarea paragrafelor

Pentru separarea zonelor paginii se pot folosi treceri la:

linie noua - cu marcajul <BR>, eventual cu desenarea unei linii orizontale - marcajul <HR>;

paragraf nou - cu marcajul <P> ( se insereaza o linie noua si eventual se face o indentare ).

Marcajul </P> desemneaza sfarsitul de paragraf, dar este mai rar folosit ( se poate omite ).

Exemplu:

<HTML>
<HEAD>

. antetul documentului.

</HEAD>
<BODY>

.corpul documentului.

</BODY>
</HTML>

va avea ca rezultat (ceea ce va afisa browserul) :

. antetul documentului. .corpul documentului."

Sa presupunem ca dorim sa introducem in pagina Web mai multe linii. Daca vom crea fisierul sub forma:

<HTML>
<HEAD>

Exemplu de document HTML:

</HEAD>
<BODY>

Prima linie

A doua linie

Atreia linie

</BODY>
</HTML>

va avea ca rezultat (ceea ce va afisa browserul) :

"Exemplu de document HTML: Prima linie A doua linie Atreia linie"

Trecerea pe o linie noua se face prin folosirea marcajului <br> (de la "line break" - intrerupere de linie) Trebuie facute astfel urmatoarele modificari :

<HTML>
<HEAD>

Exemplu de document HTML:

</HEAD>
<BODY>

Prima linie <br>

A doua linie <br>

Atreia linie

</BODY>
</HTML>

Spre deosebire de editoarele de text, browser-ele nu tin cont de modul de aranjare in pagina a textului sursa. Pozitionarea pe orizontala a textului se face cu ajutorul atributului ALIGN, cel mai utilizat atribut admis de eticheta <P>.

In tabelul de mai jos sunt prezentate valorile acestuia precum si efectele produse prin utilizarea acestor valori:

Valoarea implicita a atributului ALIGN este LEFT. Prin urmare, daca nu se specifica nici un atribut, paragraful va fi aliniat automat la marginea stanga a ferestrei browser-ului .

Utilizarea atributului ALIGN='JUSTIFY' va avea drept rezultat alinierea textului la ambele margini. Prin alinierea unui paragraf la ambele margini apare un inconvenient de ordin estetic si anume faptul ca, prin aceasta fortare, spatiul dintre cuvinte nu va mai fi acelasi. Acest spatiu va varia in functie de modul in care se va umple randul respectiv. Pe de alta parte, daca nu se atribuie aceasta valoare, spatiul dintre cuvinte va fi acelasi, dar textul va fi aliniat neuniform la marginea la care nu este aliniat ( va avea un aspect 'zimtat' ).

Exemplu:

<HTML>

<HEAD>

</HEAD>
<BODY>

<p> Acest rand este generat de un paragraf. Implicit paragraful este aliniat la stanga.

<p align = "right">Acest rand este generat de un paragraf aliniat la dreapta

</BODY>
</HTML>

Utilizarea paragrafelor titlu

Programele de navigare asigura afisarea diferentiata a unot titluri si subtitluri pentru sectiunile paginii, dupa criteriile implementate in acest scop la conceperea sa ( litere mai mari sau mai mici, diverse culori, litere aldine sau simple, unul sau mai multe randuri libere dupa titlu etc. ).

Titlurile de capitole sau subtitlurile sunt definite de marcajele <Hn>, unde n este o cifra intre 1 si 6 care specifica nivelul titlului ( 1 este titlul principal iar 6 corespunde celui mai scazut nivel ).

Astfel:
<H1> . </H1> indica un subtitlu de nivelul 1
.
<H6> . </H6> indica un subtitlu de nivelul 6.

Exemplu:

<HTML>

<HEAD>

</HEAD>
<BODY>

<H1>Titlu de marimea 1</H1>

<H2>Titlu de marimea 2</H2>

<H3 align="right">Titlu de marimea 3 aliniat la dreapta</H3>

</BODY>
</HTML>

Aplicarea unor efecte asupra textului: Formatarile uzuale de texte permit scrierea cu caractere:

aldine - in acest scop pentru acel text se aplica marcajele <B>. </B>;

cursive (italice) - pentru acel text se aplica marcajele <I> . </I>;

subliniate - textul se introduce intre marcajele <U> .</U>.

Exemplu:

<HTML>

<HEAD>

</HEAD>
<BODY>

<H1><U>Titlu de marimea 1 scris cu caractere subliniate</U></H1>

<H2><I>Titlu de marimea 2 scris cu caractere italice<I></H2>

<H3 align="right"><B>Titlu de marimea 3 aliniat la dreapta si scris cu caractere ingrosate</B></H3>

</BODY>
</HTML>

Alte tipuri de formatari de caractere care se pot defini se refera la precizarea informatiilor referitoare la fontul utilizat de browser pentru vizualizarea textului - se va utiliza marcajul cu parametri:

<FONT SIZE=x COLOR=y> . </FONT>,care indica utilizarea unui font de dimensiune x si culoare y

x poate fi un numar intre 1 si 12, indicand marimea exacta, sau un numar cu semn, indicand marimea relativa la dimensiunea curenta.

y poate fi numele unei culori standard.

Exemplu:

<HTML>

<HEAD>

</HEAD>
<BODY >

<FONT SIZE=3 COLOR="Green"> <U>Text scris cu caractere de marime 3 si culoare verde subliniate</U></FONT>

<FONT SIZE=8 > <I>Text scris cu caractere de marimea 8 scris cu caractere italice<I></FONT>

<FONT SIZE=12 > <B>Text scris cu caractere de marimea 12 si    ingrosate</B></FONT>

</BODY>
</HTML>

Utilizarea indicilor si a exponentilor: Pentru a plasa un text ca indice ( SUBscript ) intr-un document HTML, acesta se incadreaza intre eticheta <SUB> si eticheta de sfarsit </SUB>. Pentru exponenti (SUPerscript), se utilizeaza etichetele pereche <SUP> si </SUP>.

Exemplu:

<HTML>

<HEAD>

</HEAD>
<BODY >

In acest text^sus este superscript, iar _joseste subscript<br>

Alt exemplu:<br>

F(y)=(x₁+x₂)²

</BODY>
</HTML>

Utilizarea liniilor orizontale : Daca se doreste separarea a doua portiuni de text care abordeaza subiecte total diferite va trebui utilizat un element HTML care sa poata produce aceasta separare intr-un mod cat se poate de evident din punct de vedere vizual.

Pentru aceasta, HTML dispune de elementul HR ( denumirea reprezinta initialele de la Horizontal Rule ) care este utilizat pentru trasarea liniilor orizontale. Utilizarea acestui element reprezinta o metoda foarte eficienta de divizare a unui document HTML.

Elementul HR consta intr-un singur tag si anume <HR>. Prin simpla inserare a acestui tag in codul HTML al unei pagini de Web se va obtine o linie orizontala.

Tag-ul <HR> dispune de mai multre atribute prezentate in tabelul de mai jos. Atunci cand nu sunt specificate aceste atribute, ele vor avea valorile implicite specificate in tabel:

Exemplu:

<HTML>

<HEAD>

</HEAD>
<BODY >

mai jos este o linie aliniata in centru, de latime 50%, grosime 5 pixeli, fara umbra:<br>

<hr align="center" width="50%" size=5 noshade>

</BODY>
</HTML>

Utilizarea listelor

De multe ori, pentru a prezenta in mod structuat informatiile, se impune utilizarea listelor. Limbajul HTML permite definirea mai multor tipuri de liste si imbricarea lor ( includerea unor liste in altele ), caz in care trebuie verificata cu atentie corespondenta dintre marcajele de inceput si sfarsit pentru fiecare lista. Daca elementele listei au legatura intre ele, dar nu este necesar sa fie prezentate intr-o anumita ordine, se utilizeaza listele neordonate. Daca elementele listei sunt intr-o anumita ordine si este necesar sa fie parcurse astfel, se utilizeaza listele ordonate. Un caz particular il reprezinta listele de definitii, in care intrarile sunt formate din doua paragrafe ( unul corespunzator termenului, al doilea, indentat, corespunzator definitiei termenului ). Formatarea listelor la afisarea paginii ( introducerea bulinelor, numerotarii etc. ) se face de catre programul de navigare.

Elementele listelor se introduc intre marcajele <LI> . </LI> ('list item'). Modul de aparitie al elementelor depinde de tipul de lista in care sunt incluse ( cu buline, numerotate etc. ), determinat de marcajul specific .

Astfel, listele pot fi:

neordonate ( cu buline ) - delimitate de marcajele <UL> . </UL> ('unordered list'); elementele lor se afiseaza cu buline;

ordonate ( numerotate ) - delimitate de marcajele <OL> . </OL> ('ordered list'); elementele lor se vor numerota;

de tip meniu - delimitate de marcajele <MENU> . </MENU>; elementele acestor liste apar intr-o reprezentare compacta pe ecran ( multicoloana );

glosare ( liste de definitii ) delimitate de marcajele <DL> . </DL> ( 'definition list' ); elementele acestora au cate doua componente, introduse respectiv cu marcajele <DT> ( pentru nume ) si <DD> ( pentru semnificatia asociata );

tabele scurte - create cu marcajul <DIR>;

Listele utilizate cel mai frecvent sunt cele ordonate si neordonate.

Exemplu:

<HTML>

<HEAD>

</HEAD>
<BODY >

Exemplu de lista neordonata:

<UL> prima lista neordonata create:

<LI>elementul x

<LI>elementul y

<LI>elementul z

</UL>

</BODY>
</HTML>