1.

Elementele limbajului HTML 4.0 i principalele lor atribute

HTML ( Hypertext Markup Language ) este un limbaj creat n scopul de a descrie, n mod text, formatul paginilor Web; fiierele create n acest limbaj vor fi interpretate de navigatoare, care vor afia paginile n forma dorit ( cu texte formatate, liste, tabele, formule, imagini, hiperlegturi, obiecte multimedia etc. ). Limbajul HTML a evoluat n versiuni succesive, odat cu evoluia protocolului HTTP i a programelor de navigare. Astfel, HTML 1.0 era compatibil cu Mosaic, primul program de navigare, dar dup apariia unor navigatoare noi, a fost necesar introducerea unui standard oficial Internet pentru construirea paginilor ( HTML 2.0 ) i extinderea sa cu noi faciliti: formule matematice, tabele, moduri avansate de descriere a organizrii paginilor ( ncepnd cu HTML 3.0 ). Aa 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 utilizeaz instruciuni ( ca Pascal-ul sau C-ul ) ori comenzi ( ca Fox-ul ), ci etichete, acestea fiind numite i balize, elemente sau tag-uri. Un limbaj de marcare trebuie s specifice mulimea de marcaje obligatorii, maniera de identificare a marcajelor i semantica fiecrui marcaj. Termenul tehnic pentru textul marcat este elementul, acesta fiind vzut ca o component structural a unui document. Fiecare element trebuie specificat explicit ntr-un anumit mod i astfel fiecare element va fi introdus ntre dou marcaje ( tag-uri ) - de nceput i sfrit. Perechea tag de nceput-

tag de sfrit este folosit la ncadrarea fiecrei apariii a elementului respectiv n cadrul unei pagini Web. Astfel, forma unui element generic va fi <element></element>, unde <element > specific un tag de nceput i </element> un tag de sfrit, iar element este numele unui element oarecare permis de specificaiile HTML. Un element poate fi vid ( nu conine nimic ntre tag-ul de nceput i cel de sfrit ) sau poate conine un text, inclusiv alte elemente. Procesele de standardizare i de includere a comenzilor de marcare n fiierele HTML permit navigatoarelor s citeasc i s formateze paginile Web, lucru foarte important n condiiile n care ele conin nu numai texte alb-negru, ci i culori, imagini, hiperlegturi, diverse obiecte. Practic, marcajele HTML asigur controlul asupra modului de afiare a obiectelor corespunztoare n cadrul programelor de vizualizare a documentelor HTML - navigatoarele.

Marcajele HTML pot fi clasificate n urmtoarele categorii : 1.marcaje de baz cele care delimiteaz pagina/documentul HTML, titlul acesteia i corpul paginii 2.marcaje pentru structurarea documentului, care permit introducerea de subtitluri, paragrafe, linii de delimitare 3.marcaje pentru formatarea textului i crearea listelor 4.marcaje pentru crearea hiperlegturilor

5.marcaje pentru introducerea de obiecte: tabele, formule, imagini sau obiecte multimedia preluate din fiiere, formulare Cteva consideraii asupra elementelor : Numele elementului nu este case-sensitive, adic, chiar dac se utilizeaz majuscule sau caractere obinuite, rezultatul este acelai. De exemplu <EM> este echivalent cu <Em> sau <em>. De multe ori este permis ca n cazul unor elemente tag-ul de sfrit s fie omis. Acest lucru nu este indicat dar nici nu constituie o greeal dac se utilizeaz aceast practic numai la elementele care permit acest lucru. Atributele unui element definesc diferite proprieti pentru

elementul n cauz. De exemplu, un element paragraf poate accepta ca atribut opional modul de aliniere ( la stnga, la dreapta sau centrat ), alinierea nerealizndu-se dect pentru paragraful respectiv. Un element poate avea mai multe atribute iar acestea trebuie menionate numai n tag-ul de nceput al elementului. Fiecare atribut are stabilit un nume compus din caractere literale i poate avea drept valori iruri de caractere sau numere ntregi delimitate de ghilimele. Astfel, specificarea generic a unui atribut va avea forma : atribut =valoare. Valorile atributelor pot fi prezentate sub mai multe forme. n cazul atributului WIDTH, de exemplu, acesta poate lua valoarea 100% care, de

fapt, este o valoare relativ. Acelai atribut poate avea o valoare fix exprimat n pixeli. Acest lucru se ntmpl pentru unele atribute care definesc proprieti cum ar fi, de exempu, lungimea unui element. Pentru alte elemente exist alte atribute cum ar fi atributul COLOR ce definete culoarea unui element sau a unui font i n acest caz i se poate atribui ca valoare numele unei culori ( yellow, green, red, etc ) sau valoarea hexazecimal a acelei culori.

Conceperea documentelor HTML : Avnd la dispoziie elementele i atributele oferite de standardele HTML, se poate crea orice document Web, orict de complex, recurgnd la un simplu editor de texte, cu ajutorul cruia se va redacta succesiunea de tag-uri i date corespunztoare documentului respectiv. Un fiier HTML se poate realiza : a) manual, scriind tag dup tag n Notepad b) cu ajutorul editoarelor HTML precum UltraEdit, TextPad ( disponibile n varianta shareware ), AceHTML Pro, Microsoft Frontpage, HotDog sau 1st Page 2000. Unele dintre aceste editoare posed i o serie de faciliti precum: asisteni pentru realizarea de pagini dinamice, abloane de documente,

validatoare de cod HTML, navigator Web ncorporat, completarea automat a codului, etc. O alt clas de aplicaii care pot fi folosite n procesul de concepere a documentelor HTML este cea a uneltelor de editare care ofer n principal un mediu de lucru vizual pentru realizarea de pagini i situri Web. Exemplu: Macromedia Dreamweaver sau Adobe GoLive. Aceast categorie de aplicaii ofer posibilitatea urmririi relaiilor dintre diferitele documente, ncorpornd faciliti de parcurgere a legturilor i de vizualizare a structurii sitului generat Etape n realizarea unui document Web : Se aloc un director sitului care se intenioneaz a fi realizat

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

Se introduc textul i etichetele Se salveaz fiierul cu extensia .htm sau .html n directorul dedicat Se deschide fiierul n Microsoft Internet Explorer, de exemplu. Pentru a aduce modificri fiierului, se vizualizeaz codul-surs al fiierului i dup efectuarea modificrilor, se salveaz.

1.2Structura unui document HTML Un document HTML este delimitat de marcajele <HTML> i </HTML> care indic nceputul i finalul documentului i conine:

 zon de antet cuprins ntre marcajele: <HEAD> </HEAD>, care conine informaii generale referitoare la document, cum ar fi titlul documentului, autorul acestuia, data crerii, etc. corpul documentului delimitat de marcajele: <BODY> </BODY>, care conine textul propriu-zis al documentului precum i elementele specifice de descriere a formatului acestuia. Titlul, introdus n antet, nu poate depi 64 de caractere i este cuprins ntre marcajele <TITLE> </TITLE>. Astfel, structura general a unui document HTML poate fi: <HTML> <HEAD> antetul documentului </HEAD> <BODY> corpul documentului </BODY> </HTML> n cadrul corpului unui document HTML pot aprea diverse elemente pentru a specifica:

stilul de afiare:

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

titlurile: seciunile:

<h1> <h6> (ase tipuri)

<div> (diviziune) , <p> (paragraf) , <hr> (linie orizontal) , <br> (trecere la linie nou)

listele:

<ul> (list nenumerotat) , <ol> (list numerotat) , <li> (element de list) , <dir> (list de directoare) , <menu> (list de tip meniu) , <dl> (glosare)

coninutul grafic: tabelele:

<img>

<table> (nceput de tabel) , <tr> (linie de tabel) , <td> (celul n tabel) , <th> (celul din antet) , <thead> (seciune de antet de tabel) , <tbody> (seciune de corp de tabel)

legturile ( ancorele): formularele electronice:

<a> , <link>

<form> (definiie) , <input> (cmp de interogare) , <select> (list de selecie) , <option> (opiune)

cadrele (frame-urile ):

<frameset> (definire) , <frame> (cadru) , <noframes> (alternativ de afiare, dac nu sunt suportate cadrele)

suportul pentru includerea de cod-surs scris n 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 i alte directive) Elementul <BODY> admite urmtoarele atribute: BACKGROUND=URL Unde URL este un ir de caractere ce reprezint adresa Web a unei imagini care va fi utilizat de ctre browser ca fundal pentru document. Dac imaginea nu ocup ntreaga zon din fereastra browser-ului destinat vizualizrii paginii respective, ea va fi multiplicat ca ntr-un mozaic. BGCOLOR=culoare Atributul BGCOLOR stabilete culoarea fundalului ( culoarea zonei din fereastra browser-ului n care este vizualizat documentul ). n HTML culorile se pot specifica n dou moduri: utiliznd denumiri predefinite ( n limba englez ) asociate unor culori, sau prin descompunerea unei culori n componentele RGB, sub form hexazecimal (cte dou cifre hexa pentru fiecare component). De exemplu, culoarea roie poate fi specificat fie prin denumirea predefinit BGCOLOR=RED, fie utiliznd valoarea RGB: BGCOLOR=#FF0000. Observaie referitoare la culori: utilizarea culorilor are rolul de a face documentul mai atractiv, dar i mai uor de citit. De aceea culorile trebuie alese cu atenie, astfel nct documentul s poat fi citit on-line fr a obosi excesiv ochii cititorului. TEXT=culoare

Atributul TEXT stabilete culoarea textului LINK=culoare Atributul LINK stabilete culoarea cu care vor fi marcate n text linkurile nevizitate VLINK=culoare Atributul VLINK stabilete culoarea cu care vor fi marcate n text linkurile vizitate ALINK=culoare Atributul ALINK stabilete culoarea cu care va fi marcat n text link-ul activ ( cel asupra cruia este plasat cursorul mouse-ului )

1.3Formatarea textului i utilizarea listelor n documentele HTML Formatarea paragrafelor: Pentru separarea zonelor paginii se pot folosi treceri la: linie nou - cu marcajul <BR>, eventual cu desenarea unei linii orizontale - marcajul <HR>; paragraf nou - cu marcajul <P> ( se insereaz o linie nou i eventual se face o indentare ). Marcajul </P> desemneaz sfritul 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 afia browserul) : antetul documentului corpul documentului S presupunem c dorim s introducem n pagina Web mai multe linii. Dac vom crea fiierul 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 afia browserul) : Exemplu de document HTML: Prima linie A doua linie Atreia linie Trecerea pe o linie nou se face prin folosirea marcajului <br> (de la line break ntrerupere de linie) Trebuie fcute astfel urmtoarele modificri :

<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 in cont de modul de aranjare n pagin a textului surs. Poziionarea pe orizontal a textului se face cu ajutorul atributului ALIGN, cel mai utilizat atribut admis de eticheta <P>. n tabelul de mai jos sunt prezentate valorile acestuia precum i efectele produse prin utilizarea acestor valori: Atribut Funcie LEFT Alinierea textului la marginea stng a ferestrei. CENTER Centrarea textului. RIGHT Alinierea textului la marginea dreapt a ferestrei. JUSTIF Alinierea textului la ambele margini. Y

Valoarea implicit a atributului ALIGN este LEFT. Prin urmare, dac nu se specific nici un atribut, paragraful va fi aliniat automat la marginea stng 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 i anume faptul c, prin aceast forare, spaiul dintre cuvinte nu va mai fi acelai. Acest spaiu va varia n funcie de modul n care se va umple rndul respectiv. Pe de alt parte, dac nu se atribuie aceast valoare, spaiul dintre cuvinte va fi acelai, dar textul va fi aliniat neuniform la marginea la care nu este aliniat avea un aspect "zimat" ). Exemplu: <HTML> <HEAD> </HEAD> <BODY> <p> Acest rnd este generat de un paragraf. Implicit paragraful este aliniat la stnga. <p align = right>Acest rnd este generat de un paragraf aliniat la dreapta </BODY> </HTML> Utilizarea paragrafelor titlu: Programele de navigare asigur afiarea difereniat a unot titluri i subtitluri pentru seciunile paginii, dup criteriile implementate n acest scop ( va

la conceperea sa ( litere mai mari sau mai mici, diverse culori, litere aldine sau simple, unul sau mai multe rnduri libere dup titlu etc. ). Titlurile de capitole sau subtitlurile sunt definite de marcajele <Hn>, unde n este o cifr ntre 1 si 6 care specific nivelul titlului ( 1 este titlul principal iar 6 corespunde celui mai sczut nivel ). Astfel: <H1> </H1> indic un subtitlu de nivelul 1 <H6> </H6> indic 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: Formatrile uzuale de texte permit scrierea cu caractere: aldine - n acest scop pentru acel text se aplic marcajele <B> </B>; cursive (italice) - pentru acel text se aplic marcajele <I> </I>;

 subliniate - textul se introduce ntre 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 formatri de caractere care se pot defini se refer la precizarea informaiilor referitoare la fontul utilizat de browser pentru vizualizarea textului - se va utiliza marcajul cu parametri: <FONT SIZE=x COLOR=y> </FONT>,care indic utilizarea unui font de dimensiune x i culoare y x poate fi un numr ntre 1 si 12, indicnd mrimea exact, sau un numr cu semn, indicnd mrimea relativ la dimensiunea curent. 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 i a exponenilor: Pentru a plasa un text ca indice ( SUBscript ) ntr-un document HTML, acesta se ncadreaz ntre eticheta <SUB> i eticheta de sfrit </SUB>. Pentru exponeni (SUPerscript), se utilizeaz etichetele pereche <SUP> i </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 : Dac se dorete separarea a dou poriuni de text care abordeaz subiecte total diferite va trebui utilizat un element HTML care s poat produce aceast separare ntr-un mod ct se poate de evident din punct de vedere vizual. Pentru aceasta, HTML dispune de elementul HR ( denumirea reprezint iniialele de la Horizontal Rule ) care este utilizat pentru trasarea liniilor orizontale. Utilizarea acestui element reprezint o metod foarte eficient de divizare a unui document HTML. Elementul HR const ntr-un singur tag i anume <HR>. Prin simpla inserare a acestui tag n codul HTML al unei pagini de Web se va obine o linie orizontal. Tag-ul <HR> dispune de mai multre atribute prezentate n tabelul de mai jos. Atunci cnd nu sunt specificate aceste atribute, ele vor avea valorile implicite specificate n tabel:

Atribu Descriere t SIZE WIDTH NOSHA DE ALIGN COLOR

definete nalimea unei linii n pixeli definete lungimea unei linii specificat n pixeli sau 100% n procente (x% din limea ecranului) cnd este specificat mpiedic trasarea liniei cu un nu este aspect tridimensional (3D) setat indic modul de aliniere n pagin . Valorile care le CENT poate avea acest atribut sunt : LEFT, CENTER, ER RIGHT specific culoarea unei linii . Ca valoare atribuit se nu este poate specifica valoarea hexazecimal a culorii pe care setat dorim s o utilizm sau poate fi folosit un nume

Valoare implicit 2 pixeli

standard de culoare . Acest atribut este interpretat corect numai de Internet Explorer 3.0 i variantele mai recente . Netscape Comunicator va ignora acest atribut 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 n mod structuat informaiile, se impune utilizarea listelor. Limbajul HTML permite definirea mai multor tipuri de liste i imbricarea lor ( includerea unor liste n altele ), caz n care trebuie verificat cu atenie corespondena dintre marcajele de nceput i sfrit pentru fiecare list. Dac elementele listei au legtur ntre ele, dar nu este necesar s fie prezentate ntr-o anumit ordine, se utilizeaz listele neordonate. Dac elementele listei sunt ntr-o anumit ordine i este necesar s fie parcurse astfel, se utilizeaz listele ordonate. Un caz particular l reprezint listele de definiii, n care intrrile sunt formate din dou paragrafe ( unul corespunztor termenului, al doilea, indentat, corespunztor

definiiei termenului ). Formatarea listelor la afiarea paginii ( introducerea bulinelor, numerotrii etc. ) se face de ctre programul de navigare. Elementele listelor se introduc ntre marcajele <LI> </LI> ("list item"). Modul de apariie al elementelor depinde de tipul de list n 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 afieaz 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 ntr-o reprezentare compact pe ecran ( multicoloan ); glosare ( liste de definiii ) delimitate de marcajele <DL> </DL> ( "definition list" ); elementele acestora au cte dou componente, introduse respectiv cu marcajele <DT> ( pentru nume ) si <DD> ( pentru semnificaia asociat ); tabele scurte - create cu marcajul <DIR>;

Listele utilizate cel mai frecvent sunt cele ordonate i 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>