curs html

LIMBAJUL HTML

HTML (HyperText Markup Language) este limbajul utilizat n World Wide Web pentru descrierea hipertextelor. HTML nu este un limbaj de programare propriu-zis, ci doar un limbaj de descriere, coninnd elemente ce permit construirea paginilor Web.Limbajul HTML este derivat din SGML (Standard Generalized Markup Language limbaj standard generalizat de marcare) dar este mult mai simplu fiind destinat numai paginilor web, avnd caracteristici specifice limbajelor descriptive: documentele HTML sunt de tip text (ASCII) putnd fi create cu orice editor de texte (Notepad, Wordpad); documentele HTML pot fi vizualizate cu diferite browser-e i sunt independente de platforma de lucru; HTML utilizeaz pentru descrierea documentelor web tag-uri (etichete sau marcaje) specifice pentru fiecare element descris, tag-urile stabilesc att structura documentului ct i aspectul acestuia.Un tag este un identificator care furnizeaz browser-ului instruciuni de formatare a documentului.Etichetele HTML sunt ncadrate ntre paranteze unghiulare < >, eticheta de nceput i eticheta de sfrit. Efectul corespunztor etichetei este aplicat textului dintre eticheta de nceput i cea de sfrit.Unele elemente admit atribute ce conin informaii suplimentare despre coninutul elementelor. Atributele se precizeaz n cadrul tag-ului de nceput, se separa prin spaii i se precizeaz sub forma: atribut=valoare.Structura unui document HTML

Un document HTML este delimitat de perechea de etichete i i este constituit din:A. antetul documentului delimitat de tag-urile i , conine informaii generale despre document cum ar fi: titlul documentului cel care va fi afiat n bara de titlu a ferestrei browser-ului i este delimitat de tag-urile i ; pentru alte informaii suplimentare se utilizeaz eticheta admite atributele: NAME conine un ir de caractere ce reprezint numele proprietii (Author, Keywords, Description) CONTENT conine valoarea asociat proprietii respective (ntre )

B. corpul documentului delimitat de tag-urile i sau i , conine textul propriu-zis al documentului i elementele de formatare ale acestuia.Elementul BODY admite urmtoarele atribute: BACKGROUND=URL URL este un ir de caractere ce reprezint adresa Web a unei imagini care va fi utilizat de browser ca fundal (background) pentru document. BGCOLOR=culoare color stabilete culoarea fundalului documentului (BackGround Color).n HTML culorile se pot specifica n dou moduri: utiliznd denumirile predefinite, cele mai uzuale sunt: red, maroon, yellow, green, lime, teal, olive, aqua, blue, navy, purple, fuchsia, black (este culoarea implicita), gray, silver, white; utiliznd codul culorii ( #rrggbb ) dat n formatul hexazecimal RGB: rr reprezint rou (de la 00 la FF); gg reprezint verde (de la 00 la FF); bb reprezint albastru (de la 00 la FF); aceste valori reprezentnd contribuia fiecrei culori de baz la culoarea creat. TEXT=culoare stabilete culoarea textului. LINK=culoare stabilete culoarea cu care vor fi marcate n text link-urile nevizitate. VLINK=culoare stabilete culoarea cu care vor fi marcate n text link-urile vizitate. ALINK=culoare stabilete culoarea cu care va fi marcat n text link-ul activ. LANG=cod-limba lang specific limba n care este redactat documentul (pentru motoarele de cutare, sintetizatoare de voce etc.) cum ar fi: en, fr, el, ro etc. DIR=LTR RTL specific direcia de scriere a textului: LTR de la stnga la dreapta (Left To Right) sau RTL de la dreapta la stnga (Right to Left).Comentariile HTML sunt texte pe care browser-ul nu le va afia. Acestea ncep cu .

Laborator 1

a) prima.html

Prima mea pagina Web

Aceasta este prima mea pagina Web

b)culori.html

Test de culoare

Test de culoare
Test de culoare
Test de culoare
Test de culoare
Test de culoare
Test de culoare
Test de culoare
Test de culoare
Test de culoare
Test de culoare
Test de culoare
Test de culoare
Test de culoare
Test de culoare
Test de culoare
Test de culoare

Formatarea textului

Formatarea textului care apare ntr-un documente HTML se poate face: la nivel de bloc (bloc-level) pot conine i alte elemente de formatare i ncep de la linie nou; la nivel de caracter conin doar text sau alte elemente de formatare la nivel de caracter.Gruparea mai multor elemente HTML la nivel de bloc se realizeaz cu ajutorul tag-urilor i . Pentru gruparea mai multor elemente dintr-un bloc la nivel de caracter (inline) se utilizeaz tag-urile i .

Formatarea paragrafelor

n HTML delimitarea paragrafelor se realizeaz cu ajutorul tag-urilor i , eticheta de sfrit fiind opional.Tag-ul admite atributele: ALIGN = LEFT RIGHT CENTER JUSTIFY TITLE LANG DIRPentru a stabili acelai mod de grupare pentru mai multe paragrafe, trebuie s le grupm ntr-un singur bloc cu ajutorul tag-ului .Pentru a insera n document o linie vid se utilizeaz tag-ul
.

Utilizarea paragrafelor titlu

Fiecare element structural al unui document, de obicei, este precedat de un paragraf titlu (heading).Documentele HTML pot fi structurate pe ase niveluri, n funcie de importana lor, existnd ase etichete care definesc nivelul paragrafului titlu n structura documentului: , , , , , . Etichetele de sfrit sunt obligatorii.Tag-urile pentru paragrafe admit atributele: LANG, DIR, TITLE, ALIGN.

Formatarea la nivel de caracter

Precizarea informaiilor referitoare la fontul utilizat de browser pentru vizualizarea textului se realizeaz cu ajutorul tag-urilor i .Atributele admise de eticheta sunt: SIZE = valoare - stabilete dimensiunea caracterelor. Valoarea dimensiunii poate fi specificat: n mod absolut valori naturale ntre 1 i 7; relativ la dimensiunea curent a caracterelor cu +n sau n mai mari sau mai mici. COLOR = culoare FACE = lista_fonturi definete o list de fonturi separate prin virgul, dintre care browser-ul l va alege pe primul disponibil n ordinea preferinelor (altfel va utiliza fontul implicit).Dimensiunea implicit a fontului se poate modifica utiliznd tag-ul sub forma:

Laborator 2

a) generalitati.html

Limbajul HTML - Generalitati

HTML (HyperText Markup Language) este limbajul utilizat in World Wide Web pentru descrierea hipertextelor. HTML nu este un limbaj de programare propriu-zis, ci doar un limbaj de descriere, continand elemente ce permit construirea paginilor Web. Limbajul HTML este derivat din SGML (Standard Generalized Markup Language - limbaj standard generalizat de marcare) dar este mult mai simplu fiind destinat numai paginilor web, avand caracteristici specifice limbajelor descriptive:

documentele HTML sunt de tip text (ASCII) putand fi create cu orice editor de texte (Notepad, Wordpad);

documentele HTML pot fi vizualizate cu diferite browser-e si sunt independente de platforma de lucru;

HTML utilizeaza pentru descrierea documentelor web tag-uri (etichete sau marcaje) specifice pentru fiecare element descris, tag-urile stabilesc atat stabilesc atat structura documentului cat si aspectul acestuia.

Un tag este un identificator care furnizeaza browser-ului instructiuni de formatare a documentului. Etichetele HTML sunt incadrate intre paranteze unghiulare < >, - eticheta de inceput si - eticheta de sfarsit. Efectul corespunzator etichetei este aplicat textului dintre eticheta de inceput si cea de sfarsit. Unele elemente admit atribute ce contin informatii suplimentare despre continutul elementelor. Atributele se precizeaza in cadrul tag-ului de inceput, se separa prin spatii si se precizeaza sub forma: atribut=valoare

b) index.html

Limbajul HTML

Structura unui document HTMLLaborator 1

Formatarea textuluiFormatarea paragrafelorUtilizarea paragrafelor titluFormatarea la nivel de caracterLaborator 2Utilizarea seturilor de caractereAplicarea unor efecte asupra textuluiUtilizarea citatelor Utilizarea indicilor si exponenetilorUtilizarea textului preformatatLaborator 3Utilizarea listelorLaborator 4

Inserarea legaturilor in documente HTML

Inserarea imaginilor in documente HTML

Utilizarea seturilor de caractere

Codul ASCII s-a dovedit a fi insuficient pentru reprezentarea informaiilor pe Web. Prin urmare au fost standardizate i alte seturi de caractere.Specificarea setului de caractere utilizat de un document HTML se poate face cu ajutorul etichetei . De exemplu pentru a specifica faptul c documentul utilizeaz diacritice se specific n antetul documentului urmtoarea declaraie:

prin atributul HTTP-EQUIV se pot specifica informaii asociate cmpurilor din antetul protocolului HTTP. n cazul de mai sus valoarea asociat cmpului numit Content-Type este "text/html; charset=windows-1250"Specificarea caracterelor care nu au corespondent pe tastatur se poarte face n dou moduri:a) Prin intermediul codului numeric asociat astfel: D unde D reprezint codul Unicode al caracterului. Exemple:

reprezint

b) Prin intermediul unor referine speciale, asociate unor caractere folosite frecvent. Exemple:

reprezint

textafieaz textul cu dimensiune mai mic dect fontul de baz

textidentific un termen de definiie i-l scrie cu caractere diferite de textul nconjurtor

textevideniaz textul specificat, de obicei prin scrierea italic

textaplic unul dintre cele ase formate predefinite de antet

textaplic textului menionat un font similar intrrii de la tastatur, deci un font neproporional

textaplic textului din container un font asemntor ieirii de calculator (neproporional).

textproduce o evideniere pronunat a textului

textmut textul selectat mai jos dect linia de baza a textului precedent si aplic un font mai mic (face trecerea n indice inferior)

textmut textul selectat mai sus dect linia de baz a textului precedent si aplic un font mai mic (face trecerea n indice superior)

Formatarea la nivel de comunicare se face cu ajutorul tag-urilor:

permite vizualizarea unei informatii de adres, uzual o adres de e-mail

textindic o referin, cum ar fi un nume de carte, articol, numele unui autor. Referin este difereniat fat de textul curent

textaplic textului un font neproporional precum cel de calculator (clasic)

textaplic textului un font similar ieirilor de calculator, este utilizat pentru compatibilitate cu versiuni mai vechi

textproduce o evideniere a textului, uzual prin trecerea n italice.

Utilizarea citatelor n documente HTML

Pentru inserarea de citate exist dou etichete: utilizate pentru citate lungi i utilizate pentru citate scurte care nu conin mai multe paragrafe. Ambele necesit etichet de sfrit, textul cuprins ntre cele dou etichete fiind un citat.

Utilizarea textului preformatat

Prin utilizarea elementului PRE se specific browser-ului faptul c textul scris ntre eticheta de nceput i cea de sfrit este preformatat adic browser-ul va respecta ntocmai modul de spaiere, de identare, structura liniilor i dimensiunea fontului.Prin intermediul atributului WIDTH se specific numrul maxim de caractere pe linie.

Laborator 3

ncadrai n documente HTML elementele prezentate mai sus i vizualizai-le n browser.H2O

Textul este scris taiat.

Textul este accentuat.

1 1 1 1 2 1 1 3 3 1 1 4 6 4 1

CREDINA

Cnd teama vede zidulCredinta vede calea;Cnd teama simte beznaCredinta simte zarea;Cnd teama trege n josCredinta n sus - mereu;Cnd teama ntreaba: "Cine?"Credinta spune: "EU!".

Utilizarea listelor

Utilizarea listelor este necesar pentru prezentarea informaiilor n mod structurat. Se pot utiliza trei tipuri de liste:

1. Listele neordonate (Unordered List) sunt utilizate atunci cnd exist o legtur ntre elementele listei dar nu se impune o anumit ordine a lor. Aceste liste sunt ncadrate ntre tag-urile

, fiecare element al listei fiind precedat de tag-ul (List Item) care introduce naintea elementului o bulin.La imbricarea listelor neordonate introduse prin UL, nivelele diferite vor fi difereniate prin buline de tipuri diferite. Selectarea simbolului care preced fiecare intrare n list se realizeaz cu ajutorul atributului TYPE care poate avea valorile: disc, circle i square.Atributul COMPACT arat c distana dintre bulin i text poate fi redus (este posibil ca aceast opiune s nu funcioneze pe orice browser).

2. Listele ordonate (Ordered List) sunt utilizate atunci cnd elementele listei trebuie prezentate ntr-o anumit ordine. Aceste liste sunt ncadrate ntre tag-urile

, fiecare element al listei fiind precedat de tag-ul . Atributele acceptate de tag-ul OL sunt: TYPE=1|a|A|i|I care determin modul de numerotare a intrrilor n list i poate avea valorile: 1 (pentru numerotare cu cifre arabe: 1, 2, 3,), a (intrrile n list vor fi precedate de literele mici ale alfabetului latin: a, b, c , ), A (intrrile n list vor fi precedate de literele mari ale alfabetului latin: A, B, C,), i (numerotarea se face cu cifre romane mici: i, ii, iii,), I (numerotarea se face cu cifre romane mari: I, II, III,). START=numr stabilete numrul de la care s se nceap numerotarea listei. Valoarea implicit este 1|a|A|i|I. Pentru a modifica valoarea cu care este automat numerotat a intrrii n list se include n tag-ul corespunztore intrrii respective atributul: VALUE=numr unde numr reprezint valoarea de etichetare a intrrii n lista respectiv.

3. Listele de definiii (Definition List) sunt cele n care intrrile sunt formate din dou paragrafe: primul corespunztor termenului iar al doilea, identat, corespunztor definiiei termenului. Crearea unei astfel de liste este marcat cu tag-urile i . Prin urmare o intrare n list va avea dou componente: termenul marcat cu tag-ul (Definition Term) care poate conine doar elemente de formatare inline. definiia termenului marcat cu tag-ul (Definition Description) care poate conine i elemente de formatare la nivel de bloc.

Laborator 4

ncadrai n documente HTML elementele prezentate mai sus i vizualizai-le n browser.

element principal

element secundar

element secundar

element secundar

element principal

primul element

element secundar

element secundar

element secundar

al doilea element

al treilea element

al patrulea element

habanerdans popular cubanez, cu miscare moderathabitaclu

locas special al compasului pe o nav

spatiu ntr-un avion, ntr-o main pentru echipaj, cltori etc.

..... happy-endsfrit fericit

Inserarea tabelelor in documente HTML

Tabelele permit organizarea informaiilor ntr-un document HTML. Inserarea unui tabel se face prin intermediul tag-urilor i .Tag-ul TABLE admite urmtoarele atribute: SUMARRY = text specific o descriere a rolului i structurii tabelului, aceste informaii nu sunt vizualizate n pagina Web; ALIGN = LEFT RIGHT CENTER specific alinierea tabelului n document; WIDTH = valoare specific limea ntregului tabel; valoarea poate fi specificat n numr de pixeli sau n procente; HEIGHT = valoare specific nlimea ntregului tabel; valoarea poate fi specificat n numr de pixeli sau n procente; BORDER = valoare specific n numr de pixeli grosimea liniei chenarului din jurul tabel; COLS = valoare specific numrul de coloane ale tabelului; CELLSPACING = valoare specific spaiul dintre celule i spaiul dintre celule i marginea tabelului; CELLPADING = valoare specific spaiul dintre chenarul celulei i spaiul coninutul ei; valoarea poate fi specificat n numr de pixeli sau n procente;

Coninutul elementului TABLE este constituit din liniile tabelului. Specificarea unei linii se realizeaz cu ajutorul elementului TR (Table Row), ntre eticheta de nceput i cea de sfrit (opional) fiind descrise celulele de pe linia respectiv.

Exemplu:

continutul primei linii continutul celei de a doua linii

Specificarea celulelor care constituie o linie se realizeaz prin intermediul elementelor TH (Table Header), pentru celulele care constituie antetul tabelului (capul de tabel), respectiv TD (Table Data) pentru celulele care conin informaiile din tabel.Elementele TH i TD admit urmtoarele atribute: ROWSPAN = numr_de_linii specific numrul de linii acoperite de celula respectiv; valoarea implicit este 1; valoarea 0 semnific faptul c aceast celul acoper toate liniile ncepnd cu cea curent; COLSPAN = numr_de_coloane specific numrul de coloane acoperite de celula respectiv; valoarea implicit este 1; valoarea 0 semnific faptul c aceast celul acoper toate coloanele ncepnd cu cea curent; WIDTH = valoare specific limea celulei n numr de pixeli; HEIGHT = valoare specific nlimea celulei n numr de pixeli;

Laborator 5

ORAR Luni Marti Miercuri Joi Vineri Matematica E Geografie Desen Tehnic Informatica-TAC Fizica LB. Romana B D M I E B L C B I B

Inserarea legaturilor in documente HTML

Principala caracteristic a hipertextelor o constituie utilizarea legturilor (links). Un link este o conexiune ctre o alt resurs Web (un alt hipertext sau o imagine, o secven video sau audio, un program etc.), resurs care poate fi accesat din fereastra browser-ului printr-un simplu clic.Limbajul HTML conine multiple elemente prin intermediul crora se poate crea o legtur ctre resurse Web: IMG creeaz o legtur ctre o imagine; LINK specific legturi ctre resurse utile; A creeaz o legtur ctre o resurs Web ntr-un document HTML; APPLET creeaz o legtur ctre un program executabil pe calculatorul utilizatorului.

Elementul A

Pentru a crea un link ntr-un document HTML se utilizeaz tag-ul A (anchor - ancor). textul scris ntre tag-ul de nceput i cel de sfrit va aprea evideniat n fereastra browser-ului: subliniat, colorat n funcie de valorile atributelor LINK, VLINK, ALINK.Atributele specifice elementului A sunt: HREF = URL specific adresa resursei la care se face legtura; NAME = ir_de_caractere asociaz un nume unic ancorei curente, astfel nct s poat constitui inta unui alt link; TITLE = ir_de_caractere asociaz un nume resursei la care se face legtura. Browser-ul va afia titlul resursei cnd utilizatorul deplaseaz mouse-ul deasupra legturii.Exemplu:Limbajul HTMLObservaii: se poate defini o ancor vid;Exemplu:

De la inceput pentru a specifica drept int o ancor dintr-un alt document se utilizeaz notaia: adresa#nume_ancor;Exemplu:Elementul A nu este permis utilizarea imbricat a legturilor; protocolul care permite trimiterea unui mesaj e-mail dintr-un program de navigare este mailto:mailto:adres-destinatar .

Elementul LINK

Spre deosebire de A elementul LINK poate fi plasat numai n antetul documentului (n seciunea HEAD). Elementul LINK admite aceleai atribute ca i elementul A dar nu are etichet de sfrit.Elementul LINK permite furnizarea diferitor informaii cum ar fi cele despre autor, versiunile n alte limbi ale documentului, versiuni anterioare etc.Elementul BASE

Specificarea adreselor resurselor Web la care se creeaz legturi n documente HTML se poate face att n mod absolut ct i n mod relativ.n cazul specificrii relative a adreselor se consider implicit c adresa de baz este locaia curent. Prin intermediul elementului BASE exist posibilitatea de a specifica explicit adresa de baz a URL-urilor specificate n mod relativ.

Url-ul trebuie s fie specificat n mod absolut (calea lung). Elementul BASE este plasat n antetul documentului i nu are tag de sfrit.

Laborator 6

Limbajul HTML

Structura unui document HTMLLaborator 1

Formatarea textului

Formatarea paragrafelor

Utilizarea paragrafelor titlu

Formatarea la nivel de caracter

Laborator 2

Utilizarea seturilor de caractere

Aplicarea unor efecte asupra textului

Utilizarea citatelor

Utilizarea textului preformatat

Laborator 3

Utilizarea listelor

Laborator 4

Inserarea imaginilor in documente HTML

Elementul IMG permite inserarea imaginilor, APPLET permite inserarea de applet-uri scrise n limbajul Java iar elementul OBJECT permite inserarea elementelor multimedia ntr-un document HTML.

Elementul IMG

Elementul IMG permite inserarea imaginilor. Acesta nu are coninut i nu admite tag de sfrit. Specificarea imaginii ce urmeaz a fi inserat se face prin intermediul atributului: SRC = URL care specific adresa fiierului care conine imaginea. Cele ma utilizate formate de imagini pentru pagini web sunt: .gif i .jpeg; ALT = text specific un text alternativ care va fi afiat n locul imaginii de browser-ele care nu pot vizualiza imagini; HEIGHT = dimensiune nlimea imaginii; WIDTH = dimensiune limea imaginii;Dimensiunea poate fi exprimat n numr de pixeli sau procente (referitoare la spaiul disponibil i nu la dimensiunea imaginii); ALIGN = valoare specific modul de aliniere a imaginii n raport cu textul. Valoare pote fi: TOP, MIDDLE, BOTTOM, LEFT, RIGHT; BORDER = numar_pixeli specific grosimea chenarului n care va fi ncadrat imaginea; HSPACE = dimensiune specific spaiul inserat n stnga i n dreapta imaginii; VSPACE = dimensiune specific spaiul inserat n partea de sus i n partea de jos a imaginii.

Inserarea unei legaturi pe o imagine

Prin utilizarea elementului IMG drept coninut al elementului ancor se poate insera n document o legtur pe o imagine adic prin acionarea imaginii printr-un clic va fi accesat resursa destinaie.

Laborator 7

a) Lab 7 end.html

The End

The End

b) Lab 7.html

Mouse-ul zburator

Observaie:%20 spaiu

CUPRINS

LIMBAJUL HTML.........................................................................1Structura unui document HTML2Laborator 14Formatarea textului6Formatarea paragrafelor6Utilizarea paragrafelor titlu7Formatarea la nivel de caracter7Laborator 28Utilizarea seturilor de caractere10Aplicarea unor efecte asupra textului11Utilizarea citatelor n documente HTML13Utilizarea textului preformatat14Laborator 314Utilizarea listelor16Laborator 418Inserarea tabelelor in documente HTML20Laborator 522Inserarea legaturilor in documente HTML23Elementul A23Elementul LINK24Elementul BASE25Laborator 626Inserarea imaginilor in documente HTML27Elementul IMG27Inserarea unei legaturi pe o imagine28Laborator 729CUPRINS30

curs html

Documents