Limbajul HTML HyperText Markup Language - este un limbaj de marcare utilizat pentru crearea paginilor Web. Un marcator (sau tag) este cuprins ntre caracterele < i >. Un tag este un identificator care furnizeaz browser-ului instruciuni de formatare a documentului.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 ;

B. Corpul documentului delimitat de tag-urile i sau i , conine textul propriu-zis al documentului i elementele de formatare ale acestuia.

. . . . . .

. . .

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.

Blocuri preformatatePentru ca browser-ul sa interpreteze corect caracterele " spatiu ", " tab " si " CR/LF " ce apar in cadrul unui text, acest text trebuie inclus intr-un bloc ....

bloc preformatat

Prima linieA doua linieA treia linie

Culoarea de fondO culoare poate fi precizata in doua moduri: Printr-un nume de culoare.Sunt disponibile cel putin 16 nume de culori: aqua, black, fuchsia, gray, green lime, maroon, navy, olive, purple, red, silver, teal, white si yellow. Prin constructia " #rrggbb " unde r (red), g (green), sau b (blue) sunt cifre hexazecimale si pot lua valorile: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, A, b, B, c, C, d, D, e, E, f, F; se pot defini astfel 65536 de culori. Culoarea unei pagini se precizeaza prin intermediul unui atribut al etichetei . Culoarea fondului paginii Web se stabileste cu atributul bgcolor al etichetei , de exemplu: . Urmatorul exemplu realizeaza o pagina cu fondul de culoare gri.

culoare de fond

O pagina Web cu fondul GRI!

Culoarea textului

Un font este caracterizat de urmatoarele atribute: culoare (stabilita prin atributul color); tipul sau stilul (stabilit prin atributul face); marimea (definita prin atributul size); marimea in puncte tipografice (stabilita prin atributul point-size); grosime (definita prin atributul weight).

Culoarea si familia fontului

Aceste linie este scrisa cu caractere normale.
Aceasta linie este rosie.
Aicifiecare cuvant are alta culoare.
Linie scrisa cu caractere monospatiate.
Linie scrisa cu caractere arial.

Acest lucru se face prin intermediul atributului text al etichetei dupa sintaxa . In urmatorul exemplu textul are culorea rosie.

culoare textului

Un text de culoare rosie.

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

valoarea curenta. Marimea unui font poate fi stabilita exact cu ajutorul atributului point-size. Valorile acceptate de acest atribut pot fi orice numere naturale pozitive.Numarul astfel precizat reprezinta marimea fontului in puncte tipografice. Acest atribut functioneaza numai cu Netscape Communicator.

Marimea fontului

Aceste linie este scrisa cu caractere normale.
Fonturi de marime 5.
Fonturi de marime 4.
Fonturi de marime 1.
Fonturi de marime 6.
Fonturi de marime 30 pt (numai cu Netcape Communicator).
Fonturi de marime 50 pt (numai cu Netcape Communicator).

Stiluri pentru blocurile de textPentru ca un bloc de text sa apara in pagina evidentiat (cu caractere aldine), trebuie inclus intre delimitatorii ... ( b vine de la "bold" = indraznet ). Pentru ca un text sa fie scris cu carcatere mai mari cu o unitate decat cele curente acesta trebuie inclus intr-un bloc delimitat de etichetele .... Pentru ca un text sa fie scris cu carcatere mai mici cu o unitate decat cele curente acesta trebuie inclus intr-un bloc delimitat de etichetele .... Pentru ca un text sa fie scris cu carcatere cursive acesta trebuie inclus intr-un bloc delimitat de etichetele ... ( i vine de la " italic "). Pentru a insera secvente de text aliniate ca indice (sub-script) sau ca exponent (super-script) , aceste fragmente trebuie delimitate de etichetele ..., respectiv .... Pentru a insera un bloc de caractere subliniate se utilizeaza etichetele ... (u vine de la " underline "). Pentru a insera un bloc de caractere subliniate se utilizeaza etichetele ... sau .... In exemplul urmator vom utiliza toate etichetele mentionate anterior.

Stiluri pentru blocuri de text

Text scris cu caractere ingrosate.
Text cu caractere marite cu o unitate mai mare si mai mare si mai mare.
Textul este scris cu caractere micsorate cu o unitate mai mic.
Text scris cu caractere italice.
In aceasta linie sus este superscript iar jos este subscirpt.
Aceasta linie este in intregime sectionata de o linie orizontala.
In aceasta linie urmatorul cuvant este subliniat, iar cuvantul strike sectoinat.

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

Reprezint

Reprezint

Reprezint

ListePentru definirea de liste nenumerotate putem utiliza marcatorul ul, iar pentru numerotate ol. Ambele posed tag de sfrit. Un element al listei este cuprins n interiorul tagului li.Elementele listei nenumerotate sunt precedate de un anumit simbol. Pentru a stabili simbolul dorit se va utiliza atributul type pentru marcatorul ul, cu una din valorile: disc (pentru buline, care este implicit), square (pentru ptrat) i circle (pentru cercuri). Exemplu de list nenumerotat care utilizeaz ptrele:

trandafiri

lalele

narcise

LegturiPentru a stabili (hiper)legturi ntre paginile Web (sau n cadrul aceleiai pagini) se utilizeaz marcatorul a. Acesta posed atributul href, iar ca valoarea acesta are o adres relativ sau absolut. Astfel se pot crea trimiteri la documente de diferite tipuri (de exemlu: PDF, GIF, ZIP, XML, VRML).Exemple de legturi:

Laborator 1Prototip Mercedes

Facultatea de InformaticaCV

Inserarea unei imagini

Imaginile sunt stocate in fisiere cu diverse formate. Formatele acceptat de browsere pentru fisierele imagine sunt: GIF (Graphics Interchange Format) cu extensia .gif; JPEG (Joint Photographic Experts Group) cu extensia .jpeg sau .jpg; XPM (X PixMap) cu extensia .xmp; XBM (X BitMap) cu extensia .xbm; BMP (BitMap) cu extensia .bmp (numai cu Internet Explorer); TIFF (Tagged Image File Format) cu extensia .tif sau .tiff; rectorul ce contine documentul HTML care face referire la imagine. Pentru a insera o imagine intr-o pagina, se utilizeaza eticheta (de la "image"=imagine). Pentru a putea fi identifica imaginea care va fi inserata, se utilizeaza un atribut al etichetei si anume src (de la "source"=sursa). Daca imaginea se afla in acelasi director cu fisierul HTML care face referire la imagine, atunci adresa URL a imaginii este formata numai din numele imaginii, inclusiv extensia.

O pagina cu imagine

O pagina care contine o imagine Text dupa imagine.

Chenarul si dimensionarea unei imaginiDaca doriti sa adaugati un chenar in jurul imaginii, folositi atributul border al etichetei . Valorile acestor atribute sunt numere intregi pozitive. O imagine are anumite dimensiuni pe orizontala si verticala, stabilite in momentul crearii ei. Daca nu se cere altfel , aceste dimensiuni sunt respectate in momentul afisarii ei in pagina Web. Dimensiuniile prestabilite ale unei imagini pot fi modificate prin intermediul atributelor width si height.

Imagine cu chenar si marit

O imagine cu chenar si de 200 pixeli X 15 % Text dupa imagine.

vezi acest exempluAlinierea unei imaginiAlinierea unei imagini se poate face prin intermediul atributului align care poate lua urmatorele valori: " left " - aliniere la stanga; celelalte componente sunt dispuse pe in partea dreapta; " right " - aliniere la dreapta; celelalte componente sunt dispuse pe in partea stanga; " top " - aliniere deasupra; partea de sus a imaginii se aliniaza cu partea de sus a textului ce precede imaginea; " middle " - aliniere la mijloc; mijlocul imaginii se aliniaza cu linia de baza a textului ce precede imaginea. " bottom " - aliniere la baza; partea de jos a imaginii se aliniaza cu linia de baza a textului.

Alinierea unei imagini

Alinieri:
Pe verticala:

La mijloc: Jos: Text dupa imagine.

vezi acest exempluAlinierea textului in jurul imaginiiAtributele hspace si vspace precizeaza distanta in pixeli pe orizontala , respectiv pe verticala, dintre imagine si restul elementelor din pagina. Atributul alt admite ca valoare un text care va fi afisat in locul imaginii.

Alinierea textului

Imagine aliniat la stanga inconjurata de text la distanta de 30 de pixeli. Text inainte de imagine.Text inainte de imagine.Text inainte de imagine.Text inainte de imagine. Text inainte de imagine.Text inainte de imagine.Text inainte de imagine.Text inainte de imagine.

Text dupa imagine.Text dupa imagine.Text dupa imagine.Text dupa imagine.Text dupa imagine. Text dupa imagine.Text dupa imagine.Text dupa imagine.Text dupa imagine.Text dupa imagine.

vezi acest exempluImagini pentru fondul unei paginiO imagine poate fi utilizata pentru a stabili fondul unei pagini Web. In acest scop se foloseste atributul background al etichetei , avand ca valoare adresa URL a imaginii. Imaginea se multiplica pe orizontala si pe verticala pana umple intregul ecran.

Pagina cu imagine de fond

1
2
3
4
5
6
7
8
9
vezi acest exempluUtilizarea postei electroniceIntr-o pagina Web se poate afla legaturi care permit lansarea in executie a aplicatiei de expediere a mesajelor electronice. Pentru aceasta se utilizeaza in constructia adresei URL serviciul Internet mailto: urmat de o adresa e-mail valida. Pentru ca exemplul urmator sa functioneze trebuie ca: pe calculator sa fie instalat o aplicatie de expediere a mesajelor electrionice (Outlook Express pe calc. Windows , Pine pe calc. Unix); adresa sa fie valida si calculatorul sa fie conectat la Internet.

Expediere de mesaje electronice

Expediere de mesaje electronice
Mesaje catre autorul paginii

Legaturi catre fisiere oarecareO pagina Web poate contine legaturi catre orice tip de fisiere aflate pe orice servere din Internet. Pentru aceasta se utilizeaza eticheta avand valoarea atributului href egala cu adresa URL a fisierului destinatie. Atunci cand se efectueaza clic pe legatura din exemplul urmator browserul se deschide o caseta de dialog - File download - care va permite: sa salvati pe discul local fisierul sa lansati in executie aplicatia capabila sa interpreteze corect fisierele de tipul respectiv

Legaturi catre fisiere oarecare

Legaturi catre fisiere oarecare
Link catre fisierul fisier.zip