Initiere WEB

Lucrare de laborator № 1
Tema: Proiectarea paginilor WEB. Noţiuni elementare. Structura documentului HTML.

Culorile în HTML.
Obiective de referinţă:
 Cunoaşterea noţiunilor de bază: Html, hypertext, etichetă, sursă Html;
 Introducerea informaţiei utilizînd un editorul textual Notepad
 Salvarea documentul cu extensia .htm (sau .html);
 Vizualizarea documentul în fereastra browser-ului;
 Cunoaşterea structurii documentului;
 Cunoaşterea semnificaţiei atributelor etichetelor<head> si <body .
Desfăşurarea lucrării:
I. Introducere. Noţiuni teoretice.
La etapa actuală Web-Design-ul a devenit o pasiune pentru o mare parte a utilizatorilor Internetului.
Dacă doriţi ca întreaga lume să afle despre Dstră, cea mai eficientă şi mai puţin costisitoare cale este
metoda de a vă crea o pagină Web personală cu ajutorul limbajului HTML. Aceste lucrări de laborator vă
vor ajuta în acest sens.
Pentru început vom defini cîţiva termeni ajutători.
Hypertext: Material sub forma de text şi imagine, interconectat într-o manieră complexă,
nesecvenţială de asociaţii, în care utilizatorul poate naviga, căuta informaţii referitoare la un obiect.
World Wide Web (sau simplu Web): Ansamblul documentelor de natură hypertext distribuite pe
Internet sau fie în reţelele locale. Aceste documente distribuite pe Web (numite şi pagini web) sunt scrise în
limbajul HTML.
Browser: Aplicaţie, care permite unui utilizator să vizualizeze documente HTML de pe Web, să
navigheze urmărind legăturile dintre ele şi să transfere fişiere. Aceste aplicaţii afişează atît textul cît şi
grafica din aceste documente, redau fişierele audio şi video înglobate în documente.
Site: O multime organizata de pagini web, de obicei cu aceeasi tematica, formeaza un site web.
Dar ce este HTML şi cum a părut el?
HTML este acronimul de la Hyper Text Markup Language, limbajul utilizat în World Wide Web
pentru scrierea paginile web. Paginile web sunt fisiere cu extensia .html sau .htm. HTML este un limbaj de
descriere, care oferă posibilitatea de a publica pe Web documente ce conţin text, liste, tabele, imagini,
secvenţe audio sau video, legături (link-uri) ce permit accesarea altor resurse Web printr-un simplu clic,
formulare care permit accesarea unor servicii on-line (de exemplu, comandarea unor produse, rezervarea
unor bilete) etc.
Limbajul HTML a fost creat în 1989 de către Tim Berners-Lee şi Daniel Connoly (Laboratorul
European pentru Fizica Particulelor din Geneva). Html este un limbaj, destinat paginilor Web, avînd
caracteristici specifice limbajelor descriptive. În prezent, aproape toate paginile Web sunt scrise în HTML.
Documentele HTML sunt exclusiv de tip text (ASCII). Pentru crearea unui document HTML poate fi
utilizat unul din editoarele de texte incluse în sistemul de operare (Notepad, Wordpad) sau orice alt editor
de texte.
Documentele descrise în HTML pot fi vizualizate cu ajutorul browser-lor. Cel mai cunoscut
browser-e este Microsoft Internet Explorer
HTML utilizează pentru descrierea documentelor Web etichete, sau marcaje (tags, în limba
engleză) specifice pentru fiecare element descris. Etichetele stabilesc atît structura documentului cît şi
aspectul acestuia.
O etichetă (tag) este un identificator care furnizează browswr-ului instrucţiuni de formatare a
documentului. Pentru a fi delimitate, etichetele HTML sunt încadrate între paranteze unghiulare (<>).
Descrierea celor mai multe elemente ale unui document HTML necesită o etichetă de început (<tag>) şi o
etichetă de sfîrşit (/tag>). Se observă, că singura diferenţă dintre eticheta de început şi cea de sfîrşit este
caracterul / (slash). Aceste sunt etichete container (container tags). Sunt şi etichete vide (empty tags) – nu
necesită eticheta de închidere. De exemplu, eticheta - trecerea pe o linie noua- este vidă.
Imbricarea etichetelor respectă regulă: prima etichetă deschisă este ultima care se închide.
Efectul coresponzător etichetei este aplicat textului dintre eticheta de început şi cea de sfîrşit.
1
De exemplu, pentru a scrie îngroşat (bold) Bine aţi venit pe pagina mea! încadrăm textul între
etichetele şi 
Descriere: Bine aţi venit pe pagina mea! 
Efrct: Bine aţi venit pe pagina mea!
Trebuie să ştiţi, că :
 în HTML nu se face distincţie între literele mari şi mici;
 nu trebuie tastat nici un spaţiu în interiorul parantezelor unghiulare.
Unele elemente HTML admit atribute, care specifică informaţii suplimentare despre conţinutul
elementului. Atributele unui element se precizează în cadrul etichetei de început şi se aplică doar
elementului curent. De exemplu, dacă dorim să includem o imagine în document, trebuie să specificăm ca
atribut adresa fişierului care conţine imaginea, eventual şi modul de aliniere a imaginii în raport cu textul
etc. Eticheta următoare permite includerea în document a imaginii din fişierul foto.gif din locaţia curentă,
aliniată la mijlocul rîndului de text: <IMG SRC =”foto.gif” align=middle>
Se observă că atribitele sunt separate prin spaţii, iar specificarea lor presupune precizarea numelui
atributului şi a valrii acestuia sub forma atribut =valoare
II. Structura unui document HTML
În limbajul de marcare a hipertextului totul se rezumă la structură. Structura generală a unui
document HTML poate fi:
<HTML> Începutul documentului
<HEAD>
<TITLE> Secţiunea de antet
Titlul
documentului a documentului
</TITLE>
</HEAD>
<BODY> Secţiunea de text
Corpul
documentului a documentului
</BODY>
</HTML> Sfîrşitul documentului
III. Modul de lucru

Lansaţi în execuţie editorul de texte Notepad şi introduceţi următorul text, care reprezintă descrierea
în limbajul HTML a unei pagini Web foarte simple:
<HTML>
<HEAD>
<TITLE> Prima mea pagina Web </TITLE>
</HEAD>
<BODY BGCOLOR=green text=red>
Scriu în fereastra browser-ului un text roşu pe fundal verde...
</BODY>
</HTML>
Comentariile se introduc prin includerea textului între etichetele de mai jos. 
Iată două exemple:
<!- - Acesta este un comentariu introdus in pagina Web - -> <!—Acesta este un comentariu
pe mai multe randuri care ia sfarsit aici -->
Salvaţi documentul cu numele prima_pagina.html în dosarul personal pe discul de lucru. Apoi deschideţi
browserul pe care îl folosiţi (Internet Explorer sau Netscape), selectaţi meniul File > Open > Browse,
căutaţi folderul în care aţi salvat fişierul, deschideţi-l şi vă veţi afla în faţa primului dumneavoastră
document HTML. Va apărea un text roşu pe fundal verde.
Dacă veţi face modificări în codul sursă, pentru a le putea vedea în browser trebuie salvat fişierul
prima_pagina.html (File/Save), apoi folosiţi butonul Refresh din fereastra browser-ului sau tasta F5.
Acesta este modul de lucru. După cum vedeţi nu este foarte complicat.
2
Vom continua să dezvoltăm această pagină şi să introducem imagini, text de diverse mărimi, culori,
fonturi, legături spre alte pagini, tabele, etc.
IV. Antetul şi corpul documentului, atributele lor.
 Antetul documentului, delimitat de etichetele <HEAD> şi </HEAD> conţine informaţii
generale referitoare la document, cum ar fi titlul documentului, care va fi afişat în bara de titlu a
ferestrei browser-ului, autorul acestuia etc.
Pentru a specifica în antet şi alte informaţii suplimentare (cum ar fi autorul documentului, data
creării, copyright, setul de caractere utilizat implicit etc) se utilizează etiheta <META>.
De exemplu, pentru a specifica autorul documentului:
<META NAME=”Author” CONTENT=”Munteanu Ion”>. Proprietăţile care se pot defini pentru
un document nu sunt standard, dar specificarea autorului (Author) sau a cuvintelor cheie (keywords) poate
fi deosebit de utilă motoarelor de căutare (search engines), eventual chiar o scurtă descriere a documentului.
Aici se folosesc ghilimele duble drepte ΄΄, obţinute cu Shift şi tasta de lîngă Enter, nu ”
De exemplu, putem specifica cuvintele cheie şi descrierea astfel:
<META NAME=”Keywords” CONTENT=”HTML, TAG”>.
<META NAME=”DESCRIPTION” CONTENT=”Proiectarea paginilor Web”>.
În exemple se observă că eticheta <META> admite atributele:
NAME – care conţine un şir de caractere ce reprezintă numele proprietăţii; CONTENT - care
conţine valoarea asociată proprietăţii respective.
Tot ce este în antet nu apare în fereastara browser-ului.
 Corpul documentului conţine textul propriu-zis al documentului, precum şi elementele
specifice de descriere a formatului acestuia. Corpul documentului poate fi delimitat de etichetele
<BODY>şi </BODY>. Tot ce apare aici va fi afişat în fereastra browser-ului.
Elementul <BODY> admite următoarele atribute:
- BACKGROUND=URL, unde URL reprezintă adresa
Nume Cod
culoare hexazecimal
Web a unei imagini care va fi utilizată de către browser ca fundal
pentru document. Dacă imaginea nu ocupă întreaga zonă din
aqua #00FFFF
fereastra browser-ului destinată vizualizării paginii respective, ea
black #000000 va fi multiplicată, ca întrun mozaic.
blue #0000FF - BGCOLOR= culoare. Atributul BGCOLOR
fuchsia #FF00FF (BackGround Color) stabileşte culoarea fundalului (culoarea zonei
gray #808080
din fereastra browser-ului în care este vizualizat documentul).
 În HTML culorile se pot specifica în două
green #008000
moduri:
lime #00FF00
maroon #800000 1. utilizând denumirile predefinite asociate unor

navy #000080 culori. Sunt disponibile cel putin 16 nume de culori: aqua,
olive #808000 black, fuchsia, gray, green lime, maroon, navy, olive,
purple, red, silver, teal, white si yellow)
purple #800080
2. “construind” culori proprii prin combinarea a
red #FF0000
trei culori de bază: roşu (red), verde (green) şi albastru
silver #C0C0C0 (blue) - modelul RGB. Se pot defini astfel 65536 de culori. În
teal #008080 acest caz, specificarea unei culori se face indicînd în
yellow #FFFF00 ordinea roşu, verde, albastru trei valori hexazecimale
white #FFFFFF
cuprinse între 00 şi FF, cîte una pentru fiecare culoare de
bază, astfel rezultă un grup de 6 cifre hexazecimele
precedate de semnul #: #RRGGBB. Valorile respective precizează “contribuţia” fiecărei culori
de bază la culoarea creată. În mod obligatoriu se utilizeată două cifre hexazecimale pentru
fiecare valoare (chiar dacă prima cifră este 0).
În tabelul următor sunt prezentate denumirile predefinite ale unor culori sigure şi valorile RGB
corespunzătoare culorilor respective:
Prin urmare, culoarea roşie poate fi specificată prin denumirea predefinită: BGCOLOR= red sau
utilizînd valoarea BGCOLOR= FF0000.
3
Atributul TEXT stabileşte culoarea textului. Atributul LINK stabileşte culoarea cu care vor fi
marcate în text link-urile nevizitate. Atributul VLINK stabileşte culoarea cu care vor fi marcate în text link-
urile vizitate. Atributul ALINK stabileşte culoarea cu care va fi marcat în text link-ul activ (cel asupra
căruia este plasat cursorul mouse-ului).
Exemplul 1: <body bgcolor="#C0C0C0" link="red" alink="blue" vlink="green" text="black">
Culoarea paginii va fi gri ( stabilitã prin bgcolor="#C0C0C0" ), link-urile vor fi rosii, link-ul activ
albastru iar link-urile vizitate verzi. Textul va fi afisat cu negru. De multe ori, nu se precizeazã culoarea
fundalului/textului/link-urilor, ceea ce conduce la afisarea unui fundal alb, a unor fonturi negre si a unor
link-uri albastre. Aceasta e setarea implicitã.
Tag-ul de sus poate fi scris si ca:
<body bgcolor="#C0C0C0" link="#FF0000" alink="#0000FF" vlink="#008000" text="#000000">
Exemplul 2: <body background="imag/poza1.jpg">- Fundalul paginii e o imagine ( poza1.jpg din
directorul imag
Exemplul3: Dacã, în plus, dorim ca imaginea de background sã nu se deplaseze când navigãm de-a
lungul paginii, vom scrie: <body background="imag/poza1.jpg" bgproperties="fixed">
Exemplul 4: Pentru a seta marginile de sus si de jos ale paginii la valorile de 5, respectiv 10 pixeli,
scrie: <body topmargin="5" bottommargin="10">
Concluzie:
Tag-ul <body> are sintaxa generalã:
<body background="imagine.extensie" bgcolor="culoarea fundalului" link="culoarea linkurilor"
alink="culoarea linkului activ" vlink="culoarea linkurilor vizitate" text="culoarea textului"
bgproperties="valoare" topmargin="val1" bottommargin="val2">
Oricare dintre aceste atribute poate lipsi.
Concluzii:
 Regulile de folosire a etichetelor, atributelor şi valorilor acestora reprezintă sintaxa
limbajului HTML. Similar limbajelor de programare, în HTML respectarea sintaxei limbajului este
determinantă pentru o bună funcţionare a documentului. Spre deosebire de limbajele cum ar fi
limbajul C, în care programele trec înainte de execuţie prin faza de compilare, etapă în care
compilatorul semnalează eventualele greşeli de sintaxă, la documentele HTML nu se întâmplă acest
lucru. Documentele HTML sunt interpretate de browser exact aşa cum au fost ele scrise. Prin
urmare, orice greşeală de sintaxă se va reflecta direct în aspectul paginii Web, conducând, de cele
mai multe ori, la o funcţionare defectuoasă a acesteia. Dacă la vizualizarea paginii dumneavoastră
cu browserul constataţi că anumite secvenţe ale paginii nu au aspectul aşteptat, sau elementele pe
care doriţi să le introduceţi nu sunt afişate, reveniţi asupra documentului HTML şi verificaţi încă o
dată sintaxa acestor elemente.
 Culoarea reprezintă un caracteristică extrem de importantă a unei pagini Web.
Utilizată cu grijă şi măsură, ea poate îmbunătăţi substanţial Pe de altă parte, utilizarea excesivă sau
inadecvată a culorilor poate transforma un text de calitate într-un fel de caleidoscop obositor, greu
de urmărit, şi care îi va determina pe mulţi vizitatori să renunţe la a-l mai parcurge. Pentru ca textul
să fie uşor de citit, este recomandat ca diferenţa dintre valorile culorilor utilizate să fie aproximativ
60%.

Initiere WEB

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Initiere WEB

Încărcat de

Drepturi de autor:

Formate disponibile

Lucrare de laborator № 1

Tema: Proiectarea paginilor WEB. Noţiuni elementare. Structura documentului HTML.

III. Modul de lucru

maroon #800000 1. utilizând denumirile predefinite asociate unor

S-ar putea să vă placă și