1

Introducere in (X)HTML I ''adevarata cunoastere este sa stii cat de mare ti-e prostia''

(confucius) Obiective: Realizarea unui document HTML simplu;

Realizati un document XHTML simplu; Testati validitatea documentului creat folosind validatorul W3C;

Exercitii 1. Realizati un document HTML simplu cu urmatoarea structura:

2. Realizati un document XHTML simplu cu urmatoarea structura:

3. Folosind documentul realizat la punctual 1, verificati comportamentul browserului

dumneavoastra (utilizati atat IE cat si Firefox) in urmatoarele situatii: scrieti gresit numele marcatorilor de sfarsit pentru un container folositi in document spatii, taburi si linii goale pentru aranjarea codului

HTML 4. Realizati un document HTML care produce urmatorul rezultat: (i-ul de dup Salut este semnul exclamrii rsturnat) Indicatie. Folositi entitatile HTML iexcl si iquest.

2

5. Realizati un document XHTML 1.0 Transitional ca n figura:

6. Testati validitatea documentului creat folosind validatorul W3C de la adresa http://validator.w3.org/ 7. Realizati un document XHTML cu CV-ul dumneavoastr:

categorii: date de contact, data i locul naterii, studii, experien, referine, aptitudini, hobby-uri, alte informaii

folosii formatri la nivel fizic (p, br) pentru a structura categoriile folosii formatri la nivel logic (h1, h2, etc) pentru a organiza ierarhic

documentul folositi formatri la nivel logic (em, strong) pentru a evidenia eventualii

termeni folosii formatri la nivel de comunicare (address, acronym) acolo unde este

necesar creai un cuprins cu categoriile menionate la nceputul documentului cu

legturi ctre fiecare categorie creai o legtur ctre cuprins dup fiecare categorie testati validitatea documentului creat folosind validatorul W3C si adaugati

un link catre validator la sfarsitul cv-ului. 8. mpriti documentul HTML creat anterior n mai multe documente HTML.

Cuprinsul se gsete pe prima index.html, iar fiecare categorie pe cte o pagin. 9. Adaugati in CV o legatura catre un document PDF care sa se deschida intr-o fereastra

noua (folositi atributul target al tag-ului a). Folositi atributul title pentru a adauga o descriere (tooltip) legaturii spre fisierul PDF.

10. Realizai n HTML o list ordonat (n ordinea rangului) cu persoane din conducerea

Univeritii Bacu. 11. Realizai n HTML o list neordonat cu colegii dumneavoastr de grupa. 12. Realizati un document HTML care afiseaza un tabel simplu:

3

13. Realizai o list de definiii n care termenii sunt orae din strintate n care ai fost,

iar definiiile sunt cteva impresii despre fiecare ora. 14. Realizai un formular (form) de introducere date conform urmtoarelor specificaii. component de tip text pentru preluare nume i prenume component de tip text pentru preluare adresa e-mail component de tip caset de selecie pentru preluare specializare component de tip caset de selecie pentru preluare curs component de tip caset de selecie pentru preluare activitate. Activitile pot fi:

studiu curs, lucrare laborator, test gril. component de tip buton radio pentru selecie an de studiu (I, II, III sau IV) component de tip buton de validare (checkbox) pentru specificare selecii dintre

variantele: Activitate interactiv Activitate de studiu individual Activitate de lucru n colaborare cu ali studeni

trei butoane de submisie a informaiilor introduse n formular cu urmtoarele semnificaii:

lansare activitate afiare stare student n raport cu activitatea selectat anulare informaii introduse n form (cancel)

15. Creai un set de frame-uri. Unul dintre frame-uri va avea ca surs un fiier ce

conine un alt set de frame-uri. Specificai surse pentru fiecare frame. Afiai pagina HTML compus astfel. Adaugai o ancor care are ca TARGET numele unuia din frame-urile subsetului de frame-uri. Referina pentru ancor va fi un nou fiier HTML sau un fiier GIF. Activai referina. Observai actualizarea coninutului frame-ului. Adaugai o ancor care are ca TARGET numele frame-ului ce conine subsetul de frame-uri. Referina pentru ancora va fi un nou fiier HTML sau un fiier GIF. Activai referina. Observai c astfel se poate actualiza coninutul unui ntreg set de frame-uri. Realizai o structur format din 3 cadre cu urmtorul coninut:

4

Cadrul 1. Titlul aplicaiei

Butoane corespunztoare opiunilor aplicaiei Cadrul 2. Forma creat la exerciiul 1 Cadrul 3. Un tabel cu cursurile disponibile:

titlu curs nume profesor nume asistent programare curs programare laborator programare verificare algoritm de calcul not o component de tip textarea pentru preluare comentarii.

Resurse 1. tutorial HTML online: http://www.w3schools.com/html/default.asp 2. tutorial XHTML online: http://www.w3schools.com/xhtml/xhtml_intro.asp 3. entitati HTML: http://www.w3schools.com/tags/ref_entities.asp 4. culori: http://www.w3schools.com/tags/ref_colornames.asp