Limbajul HTML (HyperText Markup Language) referat


Astronomie Biologie Chimie Desen Diverse Drept Economie Engleza Filozofie Fizica Franceza Geografie Germana Informatica Istorie Management Marketing Matematica Medicina Psihologie Romana Sport Tehnica

Adauga referat - poti sa ne ajuti cu un referat?

Politica de confidentialitate


• CREDITUL IPOTECAR PENTRU INVESTITII IMOBILIARE (economie) • Comertul cu amanuntul (economie) • IDENTIFICAREA CRIMINALISTICA (drept) • Mecanismul motor, Biela, organe mobile proiect (diverse) • O scrisoare pierduta (romana) • O scrisoare pierduta (romana) • Ion DRUTA (romana) • COMPORTAMENT PROSOCIAL-COMPORTAMENT ANTISOCIAL (psihologie) • COMPORTAMENT PROSOCIAL-COMPORTAMENT ANTISOCIAL (psihologie) • Starea civila (geografie)


• domnisoara hus • legume • istoria unui galban • metanol • recapitulare • profitul • caract • comentariu liric • radiolocatia • praslea cel voinic si merele da aur

Limbajul HTML (HyperText Markup Language)

Vizite: ? Nota: ?

Prezentare a limbajului HTML b3q11qu
HTML Compact
Reformularea HTML in XML
Foi de stiluri

--------------------------------------------------------------------------------

1. Prezentare a limbajului HTML
Indispensabil in crearea paginilor Web, HTML este un descendent al limbajului SGML, folosit pentru dezvoltarea de documente hipertext accesibile prin Internet. Aceasta parte trece in revista o serie din caracteristicile, implementarile si tendintele acestui limbaj. In plus, se va face o prezentare a foilor de stiluri (CSS).

Aceasta sectiune nu intentioneaza a fi un manual detaliat de utilizare a limbajului HTML (pentru acest lucru, consultati la adresa https://www.infoiasi.ro/Ival/htmlearn.html manualul HTML intocmit de dl.Valentin Clocotici sau utilizati referintele bibliografice), ci doar o prezentare succinta a celor mai utilizate tag-uri.

Un document poate fi identificat prin urmatoarele caracteristici fundamentale: structura, continut si forma. Daca forma de vizualizare este dependenta de programul de afisare a informatiilor continute de acel document, structura si continutul sau trebuie sa aiba un format general de reprezentare, pentru a asigura portabilitatea.

1.1 Format
Formatul se specifica prin HTML, limbaj care conformindu-se principiilor SGML, accepta un numar de elemente (tag-uri) pentru formatarea documentului. Ca si in SGML, acestea se incadreaza intre < si >, putind exista tag-uri de inceput si de sfirsit. Fisierele HTML sint fisiere ASCII obisnuite avind extensia .html (sau .htm) si sint divizate in doua parti: antetul (head) si corpul (body).

Astfel, o pagina Web marcata cu tag-uri HTML are forma generala:

Conform specificatiei HTML 4.01 (aparuta in decembrie 1999), pentru a fi identificat ca document SGML in vederea procesarii de un analizator SGML, un fisier HTML trebuie precedat de una dintre liniile:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 FrameSet//EN>

corespunzind celor trei variante de DTD-uri stabilite de Consortiul Web: stricta (fara a contine elemente si atribute considerate demodate), tranzitionala (putind apare si elemente sau atribute demodate) si cu cadre (suport pentru cadre), respectiv.

Documentele HTML respecta DTD-ul stabilit de Consortiul WWW si nu trebuie inclus in cadrul sursei paginii Web.

In cadrul antetului, printre altele, poate apare titlul documentului (al paginii Web) specificat de tag-ul <title>:

<title>Faculty of Computer Science</title>
De obicei intre <head> si </head> apar definitii de rutine scrise in limbaje script (ca JavaScript), definii de stiluri CSS ori meta-elemente pentru a fi siguri ca sint analizate si memorate de navigator (antetul e procesat primul).

1.2 Tag-uri
In cadrul corpului pot apare diverse tag-uri:

stil de afisare

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

titluri

sectiuni

<div> (diviziuni), <p> (paragrafe), <hr> (linie orizontala), <br> (trecere la linie noua)

liste

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

imagini

<img>

tabele

<table> (inceput de tabel), <tr> (linie de tabel), <td> (definitie celula), <th> (antet)

legaturi (ancore)

<a>

formulare

<form> (definitie), <input> (cimp de interogare)

cadre (frame-uri)

<frameset> (definire), <frame> (cadru), <noframes>

suport pentru alte limbaje

suport multi-media

extensii

<meta>

entitati speciale

< > & © etc.

Lista tuturor elementelor HTML 4.0 poate fi consultata in anexa 2, iar in anexa 3 se gasesc toate atributele permise in HTML.

1.3 Definitii formale
Vom prezenta definitiile formale a o parte din tag-urile de mai sus, impreuna cu atributele aferente, conform notatiei DTD.

Corpul documentului

<!ENTITY % body.content "(%heading | %text | %block | ADDRESS)*">

<!ENTITY % color "CDATA"
-- specificatia de culori: #HHHHHH (RGB, in hexa) -->

<!ENTITY % body-color-attrs " bgcolor %color #IMPLIED  text %color #IMPLIED  link %color #IMPLIED  vlink %color #IMPLIED  alink %color #IMPLIED 
">

<!ELEMENT BODY O O %body.content>
<!ATTLIST BODY background %URL #IMPLIED -- textura pentru fundalul documentului - %body-color-attrs; -- bgcolor, text, link, vlink, alink - >

<!ENTITY % address.content "((%text;) | P)*">

<!ELEMENT ADDRESS - - %address.content>

Sectiuni

<!ELEMENT DIV - - %body.content> <-- tag-ul diviziune -->
<!ATTLIST DIV align (left|center|right) #IMPLIED -- alinierea textului - >

<!ELEMENT center - - %body.content>

Liste

<!ELEMENT DL - - (DT|DD)+>
<!ATTLIST DL compact (compact) #IMPLIED -- stil compact - >

<!ELEMENT DT - O (%text)*>
<!ELEMENT DD - O %flow;>

<!ELEMENT (OL|UL) - - (LI)+>

<!- Stil de numarare
1 numere arabe 1, 2, 3, ... a litere mici a, b, c, ...
A litere mari A, B, C, ... i litere romane mici i, ii, iii, ...
I litere romane mari I, II, III, ...

-->

<!ENTITY % OLStyle "CDATA" -- restrins la: a1|a|A|i|Ii -->

<!ATTLIST OL -- liste ordonate - type %OLStyle #IMPLIED -- stil de numarare - start NUMBER #IMPLIED -- startul secventei de numarare - compact (compact) #IMPLIED -- compactare - >

<!ENTITY % ULStyle "disc|square|circle">

<!ATTLIST UL -- liste neordonate - type (%ULStyle) #IMPLIED -- stil - compact (compact) #IMPLIED -- compactare - >

<!ELEMENT (DIR|MENU) - - (LI)+ -(%block)>
<!ATTLIST DIR compact (compact) #IMPLIED
>
<!ATTLIST MENU compact (compact) #IMPLIED
>

<!ENTITY % LIStyle "CDATA" -- restrins la: "(%ULStyle|%OLStyle)" -->

<!ELEMENT LI - O %flow -- element de lista -->
<!ATTLIST LI type %LIStyle #IMPLIED -- stil - value NUMBER #IMPLIED -- valoare - >

Tabele

<!ENTITY % Where "(left|center|right)">

<!ENTITY % cell.halign
"align (left|center|right) #IMPLIED"
>

<!ENTITY % cell.valign
"valign (top|middle|bottom) #IMPLIED"
>

<!ELEMENT table - - (caption?, tr+)>
<-- un tabel e compus din titlu si rinduri -->
<!ELEMENT tr - O (th|td)*>
<!ELEMENT (th|td) - O %body.content>

<!ATTLIST table -- elementul de tabel - align %Where; #IMPLIED -- pozitia relativa la fereastra - width %Length #IMPLIED -- latimea relativa la fereastra - border %Pixels #IMPLIED -- cadru tabel - cellspacing %Pixels #IMPLIED -- spatii dintre celule - cellpadding %Pixels #IMPLIED -- spatiere in cadrul celulelor - >

Imagini

<!ENTITY % Length "CDATA" -- nn pentru pixeli sau nn% pentru procente -->
<!ENTITY % Pixels "NUMBER" -- lungimea in pixeli -->

<!ENTITY % IAlign "(top|middle|bottom|left|right)">

<!ELEMENT IMG - O EMPTY -- Incorporeaza o imagine in document -->
<!ATTLIST IMG src %URL #REQUIRED -- URL-ul imaginii - alt CDATA #IMPLIED -- text afisat in locul imaginii - align %IAlign #IMPLIED -- aliniere orizontala/verticala - height %Pixels #IMPLIED -- inaltimea in pixeli - width %Pixels #IMPLIED -- latimea in pixeli - border %Pixels #IMPLIED -- latimea bordurii imaginii - hspace %Pixels #IMPLIED -- spatiere orizontala - vspace %Pixels #IMPLIED -- spatiere verticala - usemap %URL #IMPLIED -- utilizeaza client harta de imagini - ismap (ismap) #IMPLIED -- utilizeaza server harta de imagini - >

1.4 Formulare HTML
In continuare vom realiza o prezentare succinta a modalitatilor de concepere a formularelor electronice in HTML, extrem de utile mai ales pentru interactiunea cu utilizatorii, permitind introducerea de diverse date care ulterior vor fi prelucrate de regula pe serverul Web de programe (script-uri), folosind interfete de programare precum CGI (Common Gateway Interface), PHP (PHP: Hypertext Preprocessor) sau ASP (Active Server Pages) ce vor fi prezentate ulterior in cadrul acestui material.

Formularele pot varia de la o simpla caseta de text, pentru introducerea unui sir de caractere pe post de cuvint de cautare, folosit de pilda de un motor de cautare pe Web, pina la o structura complexa, cu multiple optiuni, oferind facilitati puternice de transmisie a datelor.

Exista numai doua modalitati prin care informatiile dintr-un formular pot fi transmise de la clientul Web la serverul situat undeva in Internet. Atunci cind se transmit informatiile cuprinse intr-un formular si URL-ul de destinatie include datele introduse, avem de-a face cu metoda numita "GET" sau cu un formular de tip "get" (se utilizeaza comanda GET a protocolului HTTP prezentat in unul din capitolele anterioare). Alternativa este aceea in care atunci cand se transmit informatiile dintr-un formular, URL-ul destinatie arata perfect normal, fara alte elemente suplimentare adaugate la sfirsitul adresei Web. In aceasta a doua situatie avem o metoda "POST" sau un formular de tip "post" (folosindu-se comanda POST a protocolului de transmisie HTTP).

Elementul FORM
Un formular HTML apare inclus in pagina Web prin intermediul elementului <form>, care are atributele obligatorii action=url si method=metoda. URL-ul indica fisierul sau aplicatia aflata pe serverul Web care urmeaza sa prelucreze informatiile din formular, iar metoda poate fi GET sau POST.

In cadrul marcajului <form> se pot include si alte tag-uri uzuale HTML, plus diverse tag-uri indicind modalitati de introducere a datelor in cadrul formularului. In cea mai mare parte, toate campurile unui formular, destinate introducerii datelor, se specifica prin intermediul elementului <input> utilizindu-se diferite atribute.

Atributele uzuale ale unui element <input> sint urmatoarele:

type=opt indica tipul cimpului de introducere a datelor (vezi mai jos);

name=nume furnizeaza numele cimpului, acest nume fiind folosit de catre programul de prelucrare a formularului;

value=valoare contine valoarea implica a cimpului de intrare;

checked=validare indica pentru un buton de selectie daca acea optiune este selectata implicit sau nu;

size=numar stabileste latimea de afisare a unui cimp de date (in mod uzual, un cimp text);

maxlenght=numar determina lungimea maxima a valorilor introduse de utilizatorilor intr-un cimp de tip text.

Daca se doreste introducerea unor informatii text pe mai multe linii, se poate utiliza elementul <textarea>. Pentru casete de validare (avind butoane sau optiuni multiple) se foloseste elementul <select>.

Navigatoarele Web curente permit lucrul cu diverse tipuri de cimpuri de intrare, fiecare dintre acestea determinind un format diferit de iesire. Tipurile de intrari (dialoguri) care pot fi utilizate sint:

TEXT este tipul prestabilit, cu SIZE utilizat pentru a specifica marimea prestabilita a casetei care se creeaza. Urmatorul cod HTML va genera un astfel de dialog text (cimpul text este complet inutil, fiindca nu va fi prelucrat de nici un program):

PASSWORD (parola) este un cimp de text, dar datele introduse de utilizator sint afisate prin caracterul * sau alte simboluri, din motive de securitate. Optiunea MAXLENGTH poate fi folosita sa specifice numarul maxim de caractere permis pentru parola. In mod uzual, valoarea cimpului va fi trimisa necriptata serverului Web.

<form>
<p>Dati parola sa intrati in rai:
<input type="password" size="20" name="pass" maxlenght="25">
</form>

Dati parola sa intrati in rai:

CHECKBOX (buton de validare) asigura o singura caseta (negrupata) de validare; atributul CHECKED permite sa specificam daca aceasta caseta urmeaza sau nu sa fie marcata implicit.

<form>
<h5 align="center">Vreau acasa:
<input type="checkbox" checked name="acasa">
Vreau la scoala:
<input type="checkbox" name="scoala">
</h5>
</form>

Vreau acasa: Vreau la scoala:
HIDDEN (cimp ascuns) permite transmiterea informatiilor programului care prelucreaza datele-utilizator, fara ca utilizatorul sa le vada pe ecran. De obicei se foloseste in cazul in care pagina Web continind formularul este generata automat de un script CGI.

RADIO (buton radio) afiseaza un buton de interblocare; diferitele butoane radio care au acelasi atribut NAME=valoare sunt grupate in mod automat, astfel incat doar un singur buton din grup poate fi selectat.

<form>
Esti: desteapta <input type="radio" name="tu"> frumoasa <input type="radio" name="tu" checked> gospodina <input type="radio" name="tu">
</p>
</form>

Esti: desteapta frumoasa gospodina
SUBMIT (transmitere), afiseaza un buton de submisie a informatiilor introduse in formular. Atunci cind este apasat, transmite continutul intregului formular la serverul Web spre a fi prelucrat.

<form method="get" action="https://www.infoiasi.ro/fcs/search/search.pl.cgi">
<p>Cauta in cadrul paginilor Facultatii de Informatica:</p>
<input name="Terms" size="50" maxlength="100" value="">
<input type="submit" value="Search">
</form>

Cauta in cadrul paginilor Facultatii de Informatica:

IMAGE este identic cu SUBMIT, numai ca in locul unui buton permite specificarea unei imagini care atunci cind va fi apasata va trimite datele catre serverul Web.

RESET (reseteaza) permite utilizatorilor sa stearga continutul tuturor cimpurilor formularului.

<form>
<center>
Numele:
<input type="text" name="nume" size="20" value="">
<br>
Virsta:
<input type="text" name="virsta" size="2" value="">
<br>
Sinteti genial:
<input type="checkbox" name="geniu">
<hr width="400">
<input type="submit" value="Trimite formularul" size="25">

Numele:
Virsta:
Sinteti genial:
-------------------------------------------------------------------------------

FILE (fisier) ofera posibilitatea de a permite utilizatorilor sa transmita serverului Web un fisier (actiunea de upload).

<p>Dati un nume de fisier sau alegeti unul:
<form>
<input type="file" name="atasament" size="30">
</form>

Dati un nume de fisier sau alegeti unul:

Efectul apasarii butonul Browse poate fi urmarit in figura de mai jos:

Selectarea unui nume de fisier prin explorarea structurii de directoare
Pentru realizarea unor liste (meniuri) cu optiuni multiple se foloseste elementul <select>. In cadrul acestui tag se insereaza elemente <option> care definesc optiunile meniului derulant. Trebuie sa se specifice un atribut name identificind in mod unic intregul meniu definit de un <select>.

In cadrul unui <select> putem specifica, de asemeni, atributul size prin care se indica numarul optiunilor din meniu care vor fi afisate la un moment dat si atributul boolean multiple care specifica dreptul utilizatorilor de a selecta mai mult de o optiune (mai multe optiuni se pot selecta facind click simultan cu apasarea tastei Ctrl). Daca exista o valoare prestabilita, trebuie sa adaugam atributul selected (optiune selectata implicit) la un tag option.

Iata un exemplu:

<form name="formular">
<p>As vrea sa ajung:
<select name="meserii" size="1">
<option value="nimic">-- nimic? --</option>
<option value="Macelar">Macelar</option>
<option value="Librar">Librar</option>
<option value="Profesor">Profesor</option>
<option value="Gide">Gide</option>
<option value="Ministru">Ministru</option>
<option value="Taietor">Taietor de frunze</option>
<option value="Pensionar">Pensionar</option>
</select>
</form>

Se va genera urmatorul formular:

As vrea sa ajung: -- nimic? -- Macelar Librar Profesor Gide Ministru Taietor de frunze Pensionar

Elementul <textarea> permite sa se construiasca o caseta de intrare pe linii multiple, in care utilizatorul poate introduce o cantitate mai mare de text (de exemplu sa trimita un anunt de mica publicitate sau un mesaj prin posta electronica). Ca si <select>, <textarea> va fi identificat in mod unic prin intermediul atributului name. Se permite definirea dimensiunii casetei de intrare de tip text cu ajutorul atributelor rows (linii) si cols (coloane) care specifica numarul de linii din cadrul casetei si, respectiv, lungimea liniilor.

<form name="pareri">
<textarea name="scrisoare" rows="3" cols="40">
Trimiteti-mi parerile voastre despre acest curs...
</textarea>
</form>

Trimiteti-mi parerile voastre despre acest curs...

Un exemplu concret
Urmatorul exemplu de formular (conceput de absolventii Danut Silion si Tudor Boitiuc) include citeva elemente eterogene de introducere a datelor: un grup de butoane radio si un meniu derulant, specificate cu ajutorul elementelor <select>, alaturi de cimpuri de tip text. Figura de mai jos ilustreaza modul in care formularul este afisat pe ecran de catre navigatorul Web. Remarcam faptul ca meniul derulant prezinta o singura valoare: executia unui click pe aceasta valoare determina afisarea tuturor optiunilor posibile; deplasarea cursorului permite vizitatorului paginii sa selecteze valoarea particulara pe care o considera cea mai buna.

Introducerea de date intr-un formular HTML de tip chestionar
Formularul este descris de tag-urile urmatoare:

<form action="https://www3.infoiasi.ro/Imesse/cgi-bin/formular.cgi" method="GET">
<b>Va rugam spuneti-ne parerea dumneavoastra despre noul nostru site!</b>
<p>
<b>Nume:</b>
<input type="text" name="numele">
<p>
<b>Adresa de e-mail:</b>
<input type="text" name="email">
<p>
<b>Cum ati aflat de site-ul nostru:</b>
<select name="neagasit">
<option selected> (Alege una)
<option>Yahoo
<option>Excite
<option>HotBot
<option>BigBook
<option>PC Magazine
<option>USA Today
<option>CNN OnLine
<option>Altceva..
</select>
<p>
<b>Varsta:</b>
<input type="radio" name="varsta" value="copil">sub 18 ani
<input type="radio" name="varsta" value="tinar">18-30 ani
<input type="radio" name="varsta" value="matur">30-40 ani
<input type="radio" name="varsta" value="varstnic">peste 40 ani
<p>
<b>Comentarii:</b> <br>
<textarea name="feedback" rows="5" cols="60">
</textarea>
<p>
<input type="submit" value="Trimiteti">
<input type="reset" value="Stergeti">
</form>

2. HTML Compact
HTML Compact este un subset al recomandarilor HTML 2.0, HTML 3.2 si HTML 4.0, dezvoltat pentru dispozitive informationale mici. HTML defineste un format flexibil, portabil si facil al documentelor Internet, o directie de dezvoltare a limbajului fiind extensia lui la hipermedia. Versiunea HTML 4, dupa cum am vazut, introduce noi facilitati ca stiluri, suport pentru internationalizare, tratarea evenimentelor. O alta directie ar fi adaptarea HTML-ului la dispozitive informationale diverse care au insa unele restrictii hardware: memorie si putere a procesorului scazute, display miniaturizat, monocrom, metode limitate de introducere a datelor.

HTML Compact este conceput pentru astfel de situatii, putind fi implementat in medii de lucru restrictive.

2.1 Cerinte
Pentru a realiza functii de navigare WWW pentru dispozitive miniaturizate (e.g. PalmBook, PocketPC), trebuie realizata o restringere a multimii de elemente din HTML la un sub-set potrivit la restrictii hardware ca:

memorie: 128-512K RAM, 512K-1M ROM

procesor: 1-10 MIPS

display: 50x30, 100x72, 150x100 pixeli (monocrom)

fonturi: 1 singur font suportat

intrari: butoane de control si butoane numerice (0-9)

HTML Compact nu trebuie sa depinda de protocolul de retea (in cazuri tipice HTTP bazat pe TCP/IP). Pentru telefoane celulare care folosesc metode de comunicare fara fir, protocolul de transport ar putea fi redefinit, pentru a obtine performante mai bune (folosindu-se, de exemplu, WAP).

2.2 Definirea limbajului
HTML Compact se bazeaza pe urmatoarele principii de proiectare:

Bazata complet pe recomandarile curente ale HTML, versiunea compacta mosteneste flexibilitatea si portabilitatea standardului;

HTML Compact va fi implementat pe dispozitive avind memorie scazuta si putere procesor slaba. Cadrele si tabelele sint excluse;

Documentele pot fi vizualizate pe ecrane miniaturizate monocrome. Se va folosi un unic set de fonturi.

HTML Compact trebuie sa fie usor de utilizat de catre oameni. Se tine cont de faptul ca toate operatiunile de baza pot fi executate printr-o combinatie de patru butoane: Cursor inainte, Cursor inapoi, Selectare si Inapoi/Stop. Imaginile senzitive si hartile de imagini sint excluse.

Din limbaj, printr-un proces de reducere, au fost excluse urmatoarele facilitati ale standardului HTML:

imagini JPEG

tabele

harti de imagini

fonturi si stiluri multiple

culori si imagini pentru fundal

cadre

foi de stiluri

Sint recomandate limite ale buffer-elor de intrare pentru INPUT (maxim 512 bytes) si SELECT (maxim 4096 bytes).

O alta recomandare de implementare a unui navigator compact este suportul pentru selectare directa a legaturilor utilizind butoanele numerice.

2.3 Tag-uri suportate
In HTML Compact sint acceptate doar:

Element Atribute suportate
A name, href
BASE href
BLOCKQUOTE -
BODY -
BR clear
CENTER -
DD -
DIR -
DIV align
DL -
DT -
FORM action, method, enctype
HEAD -
Hx, x=1,6 align
Hx, x=1,6 align
HR align, size, width, noshade
HTML version="C-HTML 1.0"
IMG src, align, width, height, hspace, vspace, alt, border
INPUT type, name, size, maxlength, value
LI -
MENU -
META http-equiv="refresh"
OL -
OPTION selected
P align
PRE -
SELECT name, size, multiple
TEXTAREA name, rows, cols
TITLE -
UL -

Definitia tipului de document HTML Compact este:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD Compact HTML 1.0 Draft//EN">

2.4 O alta abordare
Desigur, se pot aborda si alte solutii care nu se bazeaza pe HTML. De exemplu, a fost propus limbajul HDML (Handheld Device Markup Language) desemnat a fi utilizat pe dispozitive mobile uzuale (ca de pilda telefoanele celulare), scopul acestuia fiind foarte apropiat de cel al HTML Compact. Dezavantajul lui HDML este ca intreaga infrastructura (programe de proiectare, servere, clienti, documentatii) urmeaza a fi pregatita. Bazat pe HDML, a fost proiectat si standardizat recent limbajul WML (Wireless Markup Language) folosit in cadrul dispozitivelor informationale fara fir (in special telefoane celulare conectate la Internet prin protocolul WAP).

2.5 Concluzii
Recomandarea HTML Compact poate fi utilizata drept ghid pentru servicii si navigare HTML pentru dispozitive mobile mici, fara fir. In viitorul apropiat, datorita dezvoltarii Internetului, HTML Compact ar trebui sa ofere suport pentru comunicatii video, pentru extensii multimedia etc.

3. Reformularea HTML in XML
3.1 Motive
Motivele rescrierii limbajului HTML in termenii XML sint date de mai multi factori:

Extensibilitatea
XML este un limbaj de marcare cu adevarat extensibil, oferind puterea si flexibilitatea de specificare a SGML, prin mijloace facile. Cerinta HTML este de a se adapta la piete electronice, specializate si in plina dezvoltare, foarte dinamice. Aceasta conduce la probleme de compatibilitate intre documente de pe diverse platforme hardware si software, solutionare intrevazuta in XML.

Modularizarea
Modularizarea presupune o metoda de specificare a unor multimi bine-definite de seturi de tag-uri HTML spre a fi utilizate de designerii paginilor Web. De exemplu, un modul "tabele" poate contine elementele si atributele necesare pentru realizarea tabelelor, iar un model "liste" poate ingloba elementele si atributele pentru liste.

Modularizarea HTML-ului isi poate gasi aplicatii si in portarea navigarii pe Web la nivelul dispozitivelor mobile (calculatoare portabile, telefoane celulare) sau aparatelor TV (televiziune digitala, TVWeb). Fiecare categorie comporta diferite cerinte si restrictii (specializari).

Modularizarea poate creste si productivitatea si standardizarea in realizarea documentelor Web.

Profile ale documentelor
Profilul documentelor specifica sintaxa si semantica acestora. Profilul va include specificatii ca: multimea formatelor suportate (e.g. formatele imaginilor ce pot fi utilizate), nivelul limbajelor script si suportul pentru foi de stil etc.

Profilul documentelor este in strinsa legatura cu RDF, constind din asertiuni scrise in RDF definind suportul minim al agentilor utilizator si oferind o baza pentru garantarea interoperabilitatii. Schemele RDF vor formaliza profilele documentelor.

Aceste asertiuni se asteapta sa aiba urmatoarele efecte:

garantia longevitatii profilului unui document.

sintaxa documentului data ca legatura specificata de un URI. O schema defineste aceasta sintaxa drept compunere de multimi de tag-uri (module).

reprezentarea restrictiilor semantice ale documentelor va fi interpretabila de catre masina. Aceste restrictii sint folosite la validarea documentelor si vor fi introduse in urmatoarele specificatii XML (scheme si date XML).

asertiunile vor putea acoperi diverse detalii ale formatelor de date si vor descrie tipurile de dispozitive potrivite cu profilul unui document.

Profile ale dispozitivelor
O directie separata este de a folosi RDF pentru definirea profilelor dispozitivelor, specificind capabilitatile navigatoarelor si preferintele utilizatorilor.

Transformarea marcajelor
Profilele documentelor si ale dispozitivelor vor aduce mari simplificari in marcarea informatiilor. Atunci cind un set de facilitati HTML suportate de o clasa de dispozitive poate fi anticipat cu precizie, marcarea specifica pentru acea clasa hardware se realizeaza intr-un mod facil si automatizat.

3.2 XHTML
XHTML (pina la inceputul anului 1999 cunoscut sub denumirea de Voyager) este numele de cod al HTML reformulat ca aplicatie a XML-ului, definind profilele documentelor ca spatii de nume, avind fiecare propria sa adresa (data de un URI).

Documentele XHTML pot fi etichetate atit "text/html" cit si "text/xml", elementul radacina fiind <html>. Spatiile de nume XHTML sint definite la adresa https://www.w3.org/1999/xhtml si vor putea fi incluse in documentul XHTML prin atributul xmlns.

Declarea tipului de documente XHTML se va face prin intermediul constructiei DOCTYPE, ca in SGML, existind trei tipuri de definitii de documente conform specificatiei HTML 4: tipul strict, tranzitional si pentru cadre (frames), ca in exemplul urmator:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">

Documentele XHTML vor avea toate tag-urile si atributele scrise cu litere mici, deoarece XML este case-sensitive, dupa cum am vazut. O alta restrictie este aceea ca toate tag-urile de sfirsit sint obligatorii, iar tagurile vide trebuie sa se sfirseasca cu />.

Elementul <title> trebuie plasat imediat dupa <head> si poate fi urmat de <base>, daca exista.

Pentru a permite procesoarelor XML sa recunoasca legaturile hipertext, tag-ul <a> trebuie declarat cu atributul xml:link astfel:

<!ATTLIST a xml:link CDATA #FIXED "simple">

3.3 Modelul procesarii

Documentele XHTML sint procesate in urmatorii pasi:

decodificarea datelor preluate de pe server;

descompunerea in atomi lexicali XML 1.0;

analiza sintactica XML, rezultind un arbore sintactic ulterior accesat si manipulat via DOM (Document Object Model);

validare optionala;

formatare, folosind foi de stiluri si alte semantici specificate (pentru formulare si applet-uri), pentru a produce o ierarhie a obiectelor formatate;

reprezentarea pe ecran a obiectelor formatate.

Navigatoarele executa acesti pasi intr-o maniera concurenta.

Documentele HTML pot fi convertite in documente XHTML de HTML Tidy, aplicatie dezvoltata de Consortiul WWW.

3.4 Module XHTML
XHTML ofera mai mult decit o reformulare a HTML-ului in XML, modularizind HTML printr-o colectie de multimi de tag-uri, blocuri de constructie a produselor Web.

Modulele propuse sint cele de mai jos:

modulul de baza

specifica tipurile de date si modele de baza XHTML, impreuna cu setul minimal de elemente pentru scrierea unui document HTML: html, head, title, base, meta, link, body, h1-h6, p, br, a, span, div.

modulul tranzitional

specifica acele elemente din HTML 4.0 - Profilul Tranzitional, dar excluse din profilul strict al HTML: basefont, font, center, s, u, continind si definitiile unor atribute ca border, align, noshade.

modulul de stiluri

ofera elementul style, atributul style si defineste utilizarea elementului link.

modulul script

specifica elementele script si noscript.

modulul de fonturi

specifica elementele relative la fonturi existente in HTML 4.0 - varianta stricta: tt, b, i, big, small.

modulul de frazare

defineste elementele care ofera informatii despre anumite adnotari ale autorului, in cadrul frazei: abbr, acronym, address, blockquote, q, cite, code, dfn, kbd, samp, var.

modulul de inflexiune

specifica acele elemente frazale care nu ofera informatii referitoare la un domeniu ci doar o indicatie despre intentia autorului: em, pre, strong, sub, sup, hr.

modulul de editare

ofera elemente referitoare la editarea documentelor, ca del si ins.

modulul liste

specifica elementele dl, dt, dd, ul, ol, li.

modulul de formulare

specifica elementele referitoare la scrierea formularelor: form, input, textarea, select, optgroup, option, label, button, fieldset, legend, isindex.

modulul de tabele

contine elementele table, caption, col, colgroup, thead, tbody, tr, th, td.

modulul harti de imagini

contine elementele map si area.

modulul applet-uri

contine applet si param pentru suportul applet-urilor Java.

modulul obiecte

specifica elemente ca object si param.

modulul cadre

specifica elementele referitoare la utilizarea cadrelor: frameset, frame, iframe, noframes.

3.5 Sfaturi pentru dezvoltatori
XHTML fiind bazat pe XML este case-sensitive, tag-urile trebuie sa fie scrise cu caractere mici. Daca agentul-utilizator (browserul) nu recunoaste un element, va prelucra continutul lui aflat intre tag-urile de inceput si de sfirsit. Un atribut nerecunoscut va fi, de asemeni, ignorat, iar o valoare necunoscuta a unui atribut va fi inlocuita cu valoarea implicita a acestuia.

Atributul de tip ID (identificator in XML) va fi considerat ca fragment de document. Elementele a (ancora), applet (applet Java), form (formular), iframe (cadru intern), frame (cadru), img (imagine), map (harta senzitiva) in HTML pot avea (obligatoriu sau nu) atributul name. In XHTML 1.0 este definit atributul id de tip ID pentru acest scop si name va fi inlocuit in viitor cu atributul id. Pentru compatibilitate cu HTML 4.0 se vor folosi ambele atribute:

<a id="top" name="top"></a>
...
<h6><a href="#top">La inceputul paginii</a></h6>

De remarcat faptul ca toate valorile atributelor (chiar si cele numerice) vor trebuie incluse intre ghilimele. Astfel, constructii precum <table width=600 align=right> sint eronate.

Anumite atribute in HTML puteau fi scrise fara a le asocia valori (asa-numitele atribute booleene) i.e. noshade, readonly, noresize, compact ori checked. In XHTML vor trebui scrise succedate de valorile lor, ca in exemplul urmator:

Alta diferenta fata de HTML 4.0 este aceea ca elementele nevide trebuie sa aiba tag-uri de sfirsit. In SGML anumite elemente pot avea tag-uri de sfirsit optionale. In XML, pentru a elimina ambiguitati de analiza, elementele trebuie sa aiba tag-uri de sfirsit obligatorii. Astfel, paragrafele marcate prin intermediul lui <p> vor avea si tag-ul de sfirsit </p>. Elementele declarate cu continut vid, precum <hr> sau <br>, fie vor fi urmate de tag-ul de sfirsit, fie vor fi scrise <hr /> ori, respectiv, <br />. Insa este interzis sa avem <li /> din moment ce acest element nu este declarat ca vid (prin EMPTY).

Desi navigatoarele treceau cu vederea proasta imbricare a tag-urilor, specificatia XHTML este mai riguroasa. Elementele trebuie sa aiba deci tag-uri de inceput si de sfirsit scrise corect. Constructii ca <h4>XHTML este <i>exact.</h4></i> sint prohibite.

Desi in XML nu pot fi specificate incluziuni si excluziuni in cadrul definitiilor formale de elemente, asa cum se intimpla in SGML, se impun urmatoarele restrictii:

Elementele a, form, label nu pot contine alte elemente a, form, label, respectiv.

Elementul pre nu poate contine img, object, big, small, sub si sup.

Elementul button nu poate sa contina elementele input, select, textarea, label, button, form, fieldset, iframe sau isindex.

Elementul title trebuie sa apara imediat dupa html.

Elementul isindex poate apare cel mult o data in cadrul antetului documentului si este declarat demodat, fiind inlocuit in prezent de input.

Designerii trebuie sa utilizeze foi de stiluri sau programe script externe daca acestea cuprind simbolurile < sau & sau ii> sau --, din cauza modelului nou de procesare XML a documentelor XHTML. Pentru script-urile CGI (Common Gateway Interface) parametrii transmisi vor trebui sa aiba caracterul ampersand inlocuit de entitatea &. Astfel, linia https://www.infoiasi.ro/cgi-bin/search.pl?name=Sabin&value=Buraga va trebui inlocuita de https://www.infoiasi.ro/cgi-bin/search.pl?name=Sabin&value=Buraga.

Utilizatorii modelului obiectual de documente (DOM) trebuie sa tina cont de urmatoarele: recomandarea pentru DOM nivelul 1 defineste interfete atit pentru XML cit si pentru HTML 4, DOM pentru HTML specificind ca numele de elemente si de atribute vor fi returnate cu caractere mari, iar pentru XML vor fi returnate asa cum au fost specificate de creatorul documentului. Aceste diferente vor putea fi rezolvate in functie de tipul MIME returnat: aplicatiile care manipuleaza documentele XHTML prin intermediul tipului text/html vor utiliza DOM pentru HTML, iar cele folosind tipul text/xml sau application/xml vor utiliza DOM pentru XML.

In prezent in cadrul Consortiului Web se lucreaza la specificatia XHTML 1.1.

Arborele genealogic al XHTML
4. Foi de stiluri
4.1 Caracteristici generale
Foile de stiluri (Cascading Style Sheets - CSS) sint grupuri de proprietati care definesc modul de aparitie a elementelor HTML in cadrul unui navigator Web. Consortiul WWW pina in prezent a conceput doua nivele de foi de stiluri:

CSS1 (Cascading Style Sheets - level 1) este un mecanism simplu care permite autorilor si utilizatorilor paginilor Web sa ataseze acestora stiluri (de exemplu, fonturi, culori si spatieri).

Limbajul CSS1 este usor de inteles si de folosit de designerii Web si exprima stilurile conform terminologiei editarii computerizate. CSS1 este recomandare a Consortiului WWW din decembrie 1996.

CSS2 (Cascading Style Sheets - level 2) este o generalizare (extensie) a primului nivel de foi de stiluri, aducind in plus facilitati de mostenire a foilor de stiluri, efecte vizuale, pozitionari si paginari, integrarea mai multor tipuri de medii (suport pentru sunet). CSS2 a fost standardizat mai recent (mai 1998).

Cascada de stiluri
Vizualizarea unei pagini Web (pe ecran sau pe hirtie) poate fi influentata simultan de mai mult de un stil. Motivarea acestei situatii este date de urmatorii factori:

modularitatea: un proiectant poate utiliza mai multe definitii de stiluri simultan prin indicarea explicita sau implicita (utilizarea mai multor importuri) a fisierelor CSS dorite;

balanta autor/cititor: atit autorul unei pagini Web, cit si cititorul ei, ii pot influenta prezentarea, browserele moderne permitind folosirea unor stiluri personale ale cititorului.

Conflictele ce pot apare se rezolva prin ponderile atasate stilurilor. Implicit, ponderile cititorului sint mai mici decit ponderile regulilor stabilite de autor. Atit ponderile autorului, cit si ponderile cititorului sunt mai importante decit cele implicite, ale navigatorului.

Stilurile importate sint in cascada cu celelalte stiluri importate, in ordinea in care sint importate. Orice regula explicita, data in interiorul documentului, are pondere mai mare decit regulile din stilurile importate (aceasta se aplica si recursiv, daca este cazul). In CSS1 este recomandat ca stilurile importate sa fie inaintea celorlalte definitii de stiluri, tocmai pentru a arata ordinea de cascada mentionata mai sus.

Modelul de formatare
In CSS, formatarea se realizeaza prin intermediul unui model orientat boxa, unde fiecare element va produce o zona (boxa) dreptunghiulara sau mai multe (cu exceptia elementelor care au proprietatea display setata cu valoarea "none"). Fiecare boza are un continut inconjurat de zone optionale: de protectie (padding area), de bordura (border area), de margine (margin area), asa cum se poate observa din figura urmatoare:

Modelul de formatare CSS
Pentru mai multe amanunte, consultati specificatiile CSS1 si CSS2.

4.2 CSS - nivelul 1
In continuare vom face o prezentare a CSS1.

Intr-un document HTML putem utiliza multiple foi de stiluri, avind un anumit nivel de importanta. Stilurile sint in fapt proprietati ce pot fi folosite prin:

definire in antetul documentului

Stilurile se declara cu ajutorul tag-ului <style> in care se amplaseaza selectorii (elementele HTML asupra carora se definesc stilurile) urmati de definitiile de stil (de forma proprietate: valoare):

<html>
<head>
<title>oDIX - Foi de stil</title>
<style type="text/css"> h2 A font-family: Arial; font-style: italic; color: green S
</style>
</head>
<body>
<h2>Este verde, italic si Arial.</h2>
<p>
<h2>Si acesta-i la fel...</h2>
</body>
</html>

insertie in cadrul unui tag (in-line)

Putem defini pentru un anumit tag particular stiluri folosind atributul style:

<html>
<head>
</head>
<body>
<h2 style="font-family: Arial; font-style: italic; color: green">
Acesta este un titlu verde, italic si Arial...</h2>
<p>
<h2>Pe cind acesta nu-i!</h2>
</body>
</html>

In cele mai multe cazuri aceasta e metoda de a modifica stilurile globale definite.

legatura cu un fisier extern

Toate stilurile se definesc in exteriorul documentului HTML, intr-un fisier .css ce va fi inclus prin intermediul tag-ului <link> in pagina Web. Astfel, avem posibilitatea de a utiliza un anumit fisier .css pentru mai multe pagini sau chiar pentru un intreg site Web, definind stilurile o singura data.

<html>
<head>
<link rel="stylesheet" type="text/css" href="foaie.css" title="foaie de stiluri">
</head>
<body>
<h2>Un titlu verde, italic si Arial...</h2>
<p>
<h2>Altul, la fel.</h2>
</body>
</html>

Fisierul foaie.css va contine urmatoarele:

h2 A font-family: Arial; font-style: italic; color: green S p A text-indent: 10px; S

importare a unei foi externe

Folosind facilitatea de importare din CSS, se poate include o foaie de stiluri astfel:

Stiluri combinate
Metodele de utilizare a stilurilor, descrise mai sus, de obicei se folosesc intr-o maniera combinata. Daca doua foi definesc stiluri pentru acelasi tag, cea mai recenta (apropiata) definitie va cistiga.

O proprietate poate avea mai multe valori alternative (suport pentru flexibilitate):

h2 A font-family: Arial, Helvetica, sans-serif S

Se recomanda ca ultima alternativa sa fie cit mai generala (in acest caz familia de fonturi Sans Serif). Daca navigatorul nu gaseste nici o potrivire, se vor considera valorile implicite.

Clase si identificatori
Orice tag HTML poate fi selector, dar uneori dorim sa utilizam definitiile de stiluri intr-o maniera mai generala.

Din momentul definirii unei clase sau a unui identificator, putem sa atasam definitia oricarui tag.

Definirea unei clase se realizeaza anexind unei multimi de proprietati CSS un nume precedat de punct:

.intens A font-weight: bolder; color: green S

Dupa care o utilizam oricind dorim astfel:

<p class="intens">Un paragraf intensificat.</p>
<h3 class="intens">Si un titlu...</h3>

Identificatorul se foloseste in acelasi fel, dar este precedat de # in loc de punct:

#intens A font-weight: bolder; color: green S

care se utilizeaza in maniera urmatoare:

<p id="intens">Un paragraf intensificat.</p>

Selectori contextuali
Putem imbrica elementele in cadrul unei selector pentru a crea stiluri particulare:

p em A color:blue S

Textul se va colora in albastru doar daca in interiorul tag-ului <p> se va afla <em>:

<p>Un paragraf care este albastru doar

<em>aici</em>...</p>
<em>Acesta e italic si atit!</em>

Sectiuni de grupare
Selectorii se pot grupa pentru a reduce marimea si redundanta unei foi de stil, separindu-i prin virgule:

h1, h2, a, td A font-family:Arial; font-size:16pt; color:green;
S

Tag-urile <h1>, <h2>, <a> si <td> vor avea acelasi stil de formatare. Daca se doreste sa se adauge unui tag particular alte modalitati de formatare, putem scrie inca o definitie:

h1 A font-style:italic S

Numai textul corespunzator tag-ului <h1> va fi inclinat.

Pseudo-clase si pseudo-elemente
Pseudo-clasele si pseudo-elementele pot fi folosite in selectori, dar ele nu exista in cadrul codului sursa HTML, de cele mai multe ori fiind "inserate" de navigatoare in anumite conditii.

Acesta este cazul pseudo-claselor asociate elementului <a>, navigatoarele diferentiind legaturile vizitate de cele nevizitate:

a:link A color:red S /* legatura nevizitata */ a:visited A color:blue S /* legatura vizitata */ a:active A color:yellow S /* legatura activa */

Pseudo-clasele pot fi utilizate si in selectori contextuali:

a:link img A border:solid; color:green S

Ca pseudo-elemente se pot mentiona: first-line (aplicabil doar la prima linie a unui paragraf sau diviziuni) si first-letter (prima litera a unui paragraf sau diviziuni), putind astfel defini efecte similare celor tipografice:

p:first-line A text-indent:5% S p:first-letter A font-size:200%; float:left S

4.3 Proprietatile CSS1
Foile de stiluri influienteaza modul de prezentare a documentelor prin asignarea de valori unor proprietati de stil. Exista mai multe categorii de proprietati dintre care mentionam:

proprietati ale fonturilor font-family defineste ce set de fonturi va fi utilizat. Sint definite familiile generice: serif (e.g. Times), sans-serif (e.g. Helvetica), cursive (e.g. Chancery), fantasy (e.g. Western), monospace (e.g. Courier). Din cauza taxonomiei diferite a fonturilor, se incurajeaza folosirea familiilor generice.

font-style poate valorile: normal, italic sau oblique.

font-weight selecteaza grosimea fontului (variaza de la 100 la 900, dar se accepta si valori ca normal, bold, lighter etc.).

font-size specifica marimea fontului, dindu-se in maniera absoluta (x-small, medium, large etc. ori 10pt, 16pt etc.) sau relativa (larger, smaller) ori in procente (50%, -25%).

proprietati de fundal si culori color stabileste culoarea de scriere (valori in limbajul natural color:green sau in format RGB: color:rgb(255,0,0)).

background-color stabileste culoarea fundalului (cod culoare sau transparent).

background-image stabileste imaginea ce va fi proiectata pe fundal:

body A background-image:url(img.gif) S p A background-image: none S

background-repeat specifica modul de repetare a imaginii de fundal: doar pe axa Ox (repeat-x), pe axa Oy (repeat-y), pe ambele sau deloc (no-repeat).

background-attachment stabileste daca imaginea de fundal va fi fixa sau va defila odata cu continutul paginii.

background-position determina pozitia imaginii de fundal (de exemplu: background-position: 70% 0% sau background-position:top center).

proprietati ale textului letter-spacing defineste spatierea dintre litere:

blockquote A letter-spacing:0.1em S

text-decoration poate lua valorile: none, underline, overline, line-through, blink:

a A text-decoration:none S

vertical-align specifica modul de aliniere verticala, in functie de pozitia elementului parinte sau relativ la linia formatata din care face parte.

text-transform determina maniera de transformare a textului (capitalize, uppercase, lowercase, none).

text-align aliniaza textul (left, right, center, justify).

text-indent specifica modul de indentare a liniei, valorile fiind fie procente, fie numere (cu semn sau nu):

p A text-indent:2cm S h1 A text-indent: -10% S

line-height specifica distanta dintre doua linii adiacente:

div A line-height:1.3; font-size:10pt S

proprietati ale boxelor de afisare
Asa cum am vazut mai sus, fiecare element este reprezentat in cadrul unei boxe invizibile de afisare. Exista o serie de proprietati pentru specificarea marginilor (margin), a zonei dintre bordura si continutul efectiv (padding), a bordurii ce inconjoara boxa de afisare (border).

Exemple:

body A margin-top:1cm; margin-right:2cm; margin-bottom:3cm; margin-left:2cm;
S blockquote A padding-bottom:2em S h1 h2 A border-width:medium S img A border:solid; width:200px; height:50px S

Pot fi specificate si modul de curgere a textului (float) si pe care laturi a unei boxe nu se permite curgerea (clear):

img.icon A float:left; margin-left:0; clear:right S

proprietati de clasificare
white-space declara cum sint manipulate spatiile albe din cadrul unui element (normal, pre, nowrap).

list-style-type specifica tipul de aparitie a membrilor dintr-o lista (valori permise: disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none).

list-style-image specifica drept marcaj a membrilor unei liste o imagine.

ul A list-style-image:url(triunghi.jpg) S

list-style-position poate lua valorile inside ori outside.

4.4 CSS - nivelul 2
Noutati si modificari aduse de CSS2
In CSS2, selectorii admit descendenti, putind fi utilizata pseudo-clasa first-child pentru a accesa primul mostenitor al unui selector. Au aparut si noi pseudo-elemente: after si before. Foile de stiluri pot fi depende de medii (regula @media), putind fi specificate, de exemplu, stiluri diferite pentru afisarea pe ecran sau listarea la imprimanta. Anumite tipuri de medii de reprezentare pot fi paginate (cum este cazul hirtiei), CSS2 facilitind specificarea dimensiunii paginii, a modului de salt la pagina noua, a realizarii diverselor marcaje etc.

In plus, CSS2 ofera suport pentru folosirea stilurilor in cadrul tabelelor, pentru modificarea interfetei cu utilizatorul si pentru utilizarea foilor de stil aurale (bazate pe sunet): proprietatile volume, speak, pause, cue, azimuth, elevation si altele.

Se da posibilitatea autorului paginii Web sa selecteze, local sau de la distanta, prin intermediul unui mecanism special, fonturile dorite a fi afisate, in diverse alfabete.

In CSS2 oricare element vizual poate fi precis pozitionat (in maniera relativa sau absoluta):

Aceste facilitati impreuna cu posibilitatea de a modifica vizibilitatea (proprietatea visibility), de a permite decuparea elementelor (proprietatile clip si overflow) si de a specifica mai multe strate de prezentare a continutului paginii Web (ordinea afisarii stratelor fiind controlata de proprietatea z-index) pot fi folosite in contextul DHTML-ului (Dynamic HTML).

In cadrul modelului de formatare pot fi precizate dimensiunile boxei de afisare (proprietatile width si height). Mai mult, utilizatorii pot sa-si creeze propriile sale preudo-variabile de contorizare a elementelor listelor numerotate.

Lista tuturor proprietatilor permise de CSS2 poate fi consultata in anexa 4 a acestui material.

Exemple
Un efect 3D prin folosirii proprietatilor de pozitionare (position) si de stabilire a ordinii de afisare (z-index), constituind asa-numitul CSSP (CSS Positioning):

<html>
<head>
<style type="text/css">
.over A position:absolute; top:165px; left:20px; z-index:2; background-color:green;
S
.under A position:absolute; top:175px; left:20px; z-index:1; background-color:blue;
S
</style>
</head>
<body>
<span class="over">Acest text e pozitionat la 20 pixeli fata de marginea stinga si la 165 pixeli fata de marginea superioara a ferestrei.</span>
<span class="under">Acest text e suprapus peste textul precedent, din cauza ordinii de afisare dictata de proprietatea z-index.</span>
</body>
</html>

Asocierea de stiluri aurale pentru diverse elemente HTML:

@media aural A h1, h2, h3 A stress: 20; richness: 90
S

pre A speak-punctuation: code;
S
S

Se pot asocia diverse proprietati de stil pentru element respectind anumite conditii, prin intermediul mecanismului de selectare CSS2. Astfel, putem asocia stiluri pentru:

elemente care sint descendenti ai altor elemente:

ol > li A background-color: green S

Se va modifica fundalul numai pentru continutul elementelor <li> care sint copii ai lui <ol>.

elemente care urmeaza imediat dupa altele si fac parte din aceeasi ierarhie de elemente:

h1 + h2 A margin-top: -5mm S

Se va reduce distanta dintre <h1> si <h2> numai daca <h2> va urma imediat dupa un element <h1>.

elemente care au asociate atribute cu diferite valori:

aahref="https://www.infoiasi.ro/"i A border-left: solid thin S

Se va genera o bordura la stinga doar daca elementul <a> are atributul href="https://www.infoiasi.ro/".

h5arelI="copyright"i A font-family: Arial S

Proprietatea va fi modificata pentru toate elementele <h5> avind un atribut rel continind, printre altele, si cuvintul "copyright" (e.g. <h5 rel="Precizari despre copyright">...</h5>).

*alang=eni A display : none S

Toate elementele avind atributul lang cu valoarea "en" vor fi ascunse.

Urmatorul exemplu poate fi utilizat intr-o foaie de stiluri aurala:

dialogueacharacter=romeoi
A voice-family: "Lawrence Olivier", charles, male S dialogueacharacter=julieti
A voice-family: "Vivien Leigh", victoria, female S

elemente avind atributul id setat cu o anumita valoare:

h1#cap1 A letter-spacing: 0.3em S

Se va modifica spatierea dintre litere doar in cazul in care <h1> va avea id="cap1".

Acest tip de selectori are o precedenta mai mare decit selectorii de tip atribut.

Exemplul de mai jos seteaza modul de afisare a ghilimelelor in functie de limba, atit pentru document in general, cit si pentru elementul <q>:

HTML:lang(fr) A quotes: '« ' ' »' S
HTML:lang(de) A quotes: '»' '«' '\2039' '\203A' S
:lang(fr) > Q A quotes: '« ' ' »' S
:lang(de) > Q A quotes: '»' '«' '\2039' '\203A' S

In cele ce urmeaza putem remarca setarea de diverse proprietati in functie de mediul de vizualizare a documentului Web:

@media print A body A font-size: 10pt S
S
@media screen A body A font-size: 12pt; background-image: url(bg.gif) S
S
@media screen, print A body A line-height: 1.2 S
S

Dintre tipurile de medii permise se pot enumera: aural (sonore), braille (destinate orbilor), handheld (dispozitive miniaturizate), print (pentru imprimanta), projection (pentru proiectoare), screen (ecranul calculatorului), tty (terminale text), tv (destinate reprezentarii pe ecranele TV).

Specificatia CSS2 imparte mediile in mai multe grupuri dintre amintim:

continue (continuos) sau paginate (paged);

vizuale (visual), sonore (aural) sau tactile (tactile);

interactive sau statice;

Pentru tabele, CSS2 defineste un model de reprezentare inspirat de HTML 4.0, in care structura unui tabel urmeaza modelul de reprezentare grafica a acestuia. Un tabel consta dintr-o parte (optionala) destinata titlului si explicatiilor referitoare la tabel si dintr-o multime de rinduri continind un numar arbitrar de celule. In cadrul acestui model, nu exista notiunea de coloana, prima celula din fiecare rind putind fi considerata ca apartinind primei coloane a tabelului, a doua celula din fiecare rind corespunzind coloanei secunde a tabelului si asa mai departe. Rindurile si coloanele pot fi grupate, astfel incit in CSS2 modelul consta din notiunile de: tabel (table), legenda tabelului (caption), rind (row), grup de rinduri (row group), coloana (column), grup de coloane (column group) si celula (cell). In HTML 4.0 acestea corespund elementelor <table>, <caption> (putind fi specificate si <thead> si <tfoot>), <tr>, <tbody>, <col>, <colgroup>, <td> (si <th>), respectiv.

Proprietatile care pot fi modificate pentru ajustarea reprezentarii tabelelor sint:

display - stabileste una dintre reprezentarile de date, conform modelului descris mai sus. Implicit, sint considerate valorile:

table A display: table S tr A display: table-row S thead A display: table-header-group S tbody A display: table-row-group S tfoot A display: table-footer-group S col A display: table-column S colgroup A display: table-column-group S td, th A display: table-cell S caption A display: table-caption S

proprietati relative la coloane: border, background, width, visibility:

col A border-style: none solid S table A border-style: hidden S col.totals A background: blue; width: 300px S

caption-side - pentru stabilirea locului si modului de reprezentarii legendei tabelului:

caption A caption-side: left; margin-left: -8em;
width: 80%; text-align: right; vertical-align: top;
S

Valorile valide pentru caption-side sint top, bottom, left sau right. Pentru alinierea verticala pot fi precizate valorile baseline (1) si (2), top (3), bottom (4), middle (5), sub, super, text-top ori text-bottom (vezi figura de mai jos).

Efectele de vizualizare la setarea de diferite valori pentru vertical-align border-spacing, empty-cells, border-style sint folosite pentru stabilirea modului de formatare a bordurilor tabelului:

td A border-style: dotted; border-width: 1px; border-right: hidden; border-bottom: hidden; padding: 3px;
S table A border: solid navy; border-width: 1px;
S
.noborder A border: hidden;
S

Proprietatea cursor specifica forma de afisare a cursorului mouse-ului (sau al altui dispozitiv de intrare). Astfel pot fi specificate valorile crosshair, pointer, text, move, wait, help, default sau auto:

a:hover A cursor: wait S input A cursor: text S img A cursor: pointer S

Viitor
In prezent, navigatoarele Web nu suporta decit un set restrins din proprietatile specificate de CSS1 si CSS2, cu fiecare noua versiune fiind implementate altele noi. Cercetatorii de la Consortiul Web pregatesc al treilea nivel - CSS3.

Comentarii:

Noteaza referatul:
In prezent referatul este notat cu: ? (media unui numar de ? de note primite).