World Wide Web

În lume există milioane de calculatoare. În aceste calculatoare sunt stocate

informaţii. Pentru a putea face schimb de informaţii, calculatoarele sunt
interconectate, formând reţele de calculatoare.
Multe dintre aceste reţele de calculatoare sunt conectate între ele, formând
inter-reţele (reţele de reţele de calculatoare). O reţea de reţele de calculatoare se
numeşte Internet (net=reţea).
Cea mai mare inter-reţea publică (reţea de reţele de calculatoare cu acces
public) este reţeaua Internet.
Există mai multe metode de acces (servicii) la informaţia stocată pe un
calculator prin intermediul reţelei Internet:
o FTP (File Transfer Protocol) este serviciul pentru transferul fişierelor;
o Telnet este serviciul pentru accesul de la distanţă la resursele unui
calculator;
o Electronic Mail este serviciul de mesagerie electronică;
o News este serviciul de ştiri;
o World Wide Web este o lată metodă (serviciu) de acces la informaţia
stocată pe un calculator aflat oriunde în lume.
world wide web = pânză de păianjen întinsă în lumea întreagă; denumirea
evidenţiază caracterul planetar al schimbului de informaţii prin intermediul reţelei
Internet.
World Wide Web-ul utilizează tehnologia client-server, care constă în:
o Un calculator (clientul) formulează o cerere.
o Cererea este expediată unui server.
o Cererea parcurge un mediu până la server.
 o Serverul analizează cererea, o execută, formulează răspunsul şi îl
expediază clientului.
o Răspunsul parcurge mediul înapoi către client.
o Clientul recepţionează răspunsul la cererea solicitată.
HTTP
Pentru a comunica între ele, două calculatoare folosesc un sistem de reguli ce
formează un protocul. Serviciul WWW utilizează ca protocol de comunicare între
client şi server HiperText Transfer Protocol (HTTP), Protocol de transfer al
Hipertextului.
Hipertext
Hipertextul este un text îmbogăţit. El conţine:
o Text obişnuit;
o Etichete pentru formatarea textului şi încapsularea altor tipuri de
informaţii (salturi rapide către alte resurde de informaţii, sunete, imagini, filme
et.).
Hipertextul este stocat în fişiere având o extensie specială: .htm sau .html.
HTML
Un fişier ce conţine hipertext este scris într-un limbaj specific numit
HiperText Murkup Language (HTML), adică Limbajul de marcare a textului.
HTML (de la versiunea 1.0 şi terminând cu versiunea 4.01) este un limbaj care
permite inserarea de:
o text;
o sunete, imagini şi filme;
o indicatori de prezentare a informaţiei;
o legături (link-uri) către alte pagini Web aflate oriunde în lume;
o aplicaţii (programe JavaScript, Java, VRML etc.).
Host
Un calculator din Internet s. n. Host (gazdă).
 Pnetru a fi identificat în mod unic, calculatorul primeşte un nume (o adresă),
de ex. nitza.abcd.ro
Pachete
Informaţia care circulă între calculatoare interconectate este încapsulată în
pachete.
Un pachet conţine:
o adresa expeditorului şi adresa destinatarului;
o informaţia;
o numele aplicaţiei client care a formulat cererea şi numele aplicaţiei de
pe server care va primi cererea spre rezolvare.
Pachetul este lansat în reţeaua Internet.
TCP/IP
Reţeaua Internet dispune de mijloace de dirijare a pachetelor a. î. Acestea să
ajungă la destinaţie.
o Un astfel de mijloc de dirijare a pachetelor este Internet Protocol (IP),
adică Protocol Internet
Reţeaua Internet dispune de mijloace de corecţie a erorilor de transmitere a
pachetelor.
o Un astfel de mijloc de corecţie este Transfer Control Protocol (TCP),
adică Protocolul de Control al Transferului.
Pagina Web
În orice calculator informaţia este stocată în unităţi numite fişiere.
Aceste fişiere conţin:
o text;
o programe;
o imagini;
o filme;
 o sunete etc.
Pentru WWW sunt importante anumite fişiere speciale, numite şi pagini Web.
Acestea au extensia .htm sau .html.
Browser
Paginile Web sunt vizualizate pe calculatorul client prin intermediul unei
aplicaţii speciale numite browser.
Browser-ul permite schimbarea paginii vizualizate prin intermediul:
o unei ferestre speciale, numite Address;
o meniul File /Open / Browse;
o legăturilor afişate în pagina Web;
Cele mai utilizate browsere sunt:
o Netscape Communicator;
o Internet Explorer;
o HotJava.
Site Web
O mulţime organizată de pagini Web formează un site Web.
În WWW, clientul solicită pagini Web de la un site Web.
Httpd
HiperText Transfer Protocol Demon (httpd) este o aplicaţie care se execută pe
serverul Web pentru a prelucra cererile de pagini recepţionate de acesta de la clienţi.
Home Page
Home Page (pagina gazdă) este o pagină din site-ul unei organizaţii care:
o este în mod uzual prima pagină accesată din site;
o este o pagină de prezentare a organizaţiei;
o oferă modul cel mai eficient de exploatare a informaţiilor aflate în site.
Server Web
Un server Web este un calculator care adăposteşte un Site Web şi care este
capabil să răspundă la cereri de pagini Web din partea unui client.
 Pentru a putea răspunde permanent cererilor Web, un calculator trebuie să
ruleze permanent o aplicaţie specială: httpd.
Cele mai întâlnite servere Web sunt:
o Apache Server;
o Microdoft Web Server;
o Oracle Web Server.
URL
Un utilizator al serviciului WWW poate solicita vizualizarea prin intermediul
browse-rului a unei pagini Web care poate fi localizată pe un calculator aflat oriunde
în lume.
O pagină Web este unic determinată prin adresa URL asociată.
Uniform Resource Locator (URL) înseamnă Identificator Universal al
Resurselor în Internet. Un exemplu de URL este: http: //www.abcd.ro/index.html
o Adresa URL a paginii curente vizualizate de browser apare în fereastra
Address.
o Un URL precizează:
o metoda de acces la pagină – de ex: http;
o calculatorul pe care se află – de ex: www.abcd.ro;
o numele paginii – de ex: index.html.

Avantajele serviciului World Wide Web

Paginile Web au următoarele caracteristici:
o sunt multimedia, adică ele conţin informaţii sub formă de text, imagini,
sunete, filme etc.;
o sunt interactive, adică răspund la cererile utilizatorului;
 o sunt independente de platforma hardware şi software, adică se văd la
fel pe orice calculator, având instalat orice sistem de operare şi utilizând orice
browser.

Crearea unei pagini Web

Crearea unei pagini Web presupune:
o Editarea fişierului HTML utilizând:
o Un editor de texte obişnuit (Notepad, Wordpad, Word, WordPerfect
etc.)
o Un editor de texte dedicat (Netscape Composer, HotMetal etc.)
o Salvarea paginii Web cu extensia .html sau .htm într-un site Web;
o Rezolvarea referinţelor conţinute în pagina Web (legături, imagini,
sunete, filme, aplicaţii Java etc.).
Pagina Web astfel creată poate fi vizualizată prin intermediul unui browser.

Prima pagină Web

Crearea unui document Web
Un document HTML are următorul ciclu de viaţă:
o editarea fişierului HTML cu ajutorul unui editor de texte (simplu sau
dedicat).
o Salvarea fişierului editat folosind extensia .html
o vizualizarea paginii cu ajutorul unui browser.

Elementele standard ale unui document HTML

<html>
 <head>
</head>
<body>
Prima pagina!
</body>
</html>
o Un document HTML este o succesiune de blocuri.
o Blocurile dintr-un document HTML pot fi imbricate (incluse unul în
altul).
o Un bloc este delimitat de simboluri speciale (marcaje sau tag-uri).
Aceste simboluri speciale sunt incluse între paranteze <…> şi transmit comenzi
către browser pentru a afişa pagina într-un anumit mod.
o Unele blocuri prezintă delimitator de sfârşit de bloc, în timp ce pentru
alte blocuri acest delimitator este opţional sau chiar interzis.
Un document HTML standard constă dintr-un bloc <html>…</html>, care include
alte două subblocuri: <head>…</head> şi <body>…</body>.
o Blocul <body>…</body> cuprinde conţinutul propriu-zis al paginii
HTML, adică ceea ce va fi afişat în fereastra browser-ului.
o O etichetă poate fi scrisă atât cu litere mari, cât şi cu litere mici.

Titlu unei pagini Web

Pentru un stil mai elegat, se recomandă ca fiecare pagină HTML să aibă un
titlu (acesta nefiind obligatoriu). Acest lucru se realizează cu ajutorul unui bloc
title…/title inserat în blocul <head>…</head>.
o Conţinutul blocului title…/title va apărea în bara de titlu a
ferestrei browser-ului.
 Prima pagină (Pagina de primire)
o Numiţi pagina de primire index.html sau index.htm
o Ea trebuie să conţină un rezumat succint al site-ului dumneavoastră
şi/sau un sumar.
o În cazul ideal, ea trebuie să conţină o prezentare scurtă a proprietarului
site-ului (persoană, societate, asociaţie etc.).

Alte pagini
o Fiecare pagină trebuie să înceapă cu informaţii importante, date
esenţiale.
o Formatul A4 nu are nici o semnificaţie Web.
o Nu publicaţi o pagină în curs de realizare.
o Actualizaţi în mod regulat paginile.
o Pagina trebuie ca tot timpul să fie grăitoare, iar textul succint de explicit
fără imagini.
o Utilizaţi fişiere de dimensiune minimală pentru ca vizitatorul să nu
aştepte minute în şir apariţie întregii pagini pe ecran.
Textul
o Structuraţi textul utilizând titluri de nivele diferite.
o Pentru a garanta o bună lizibilitate, utilizaţi cel mult două sau trei
fonturi diferite.
o Verificaţi corectitudinea tuturor informaţiilor pe care le-aţi menţionat.

Aplicaţie:
o Creaţi un fişier având conţinutul Prima pagină!

Setarea proprietarilor documentului:

Proprietatile documentului sunt controlate de atributele elementului BODY,
de exemplu cum ar fi culorile pentru fondul paginii, pentru text si diferite faze ale
link-urilor.
 Culorile sunt setate folosind culorile de baza RVA (Roşu, verde, albastru ), sa
expresia folosita RGB (Red., Green, Blue), care sunt reprezentate ca valori
hexadecimale si sun scrise intre ghilimele (” ”). Fiecare 2 unitati ale codului
reprezintă una din culorile RGB.
De exemplu: #00aa11 reprezintă o culoare care nu are Roşu (00), are Verde
(aa) si Albastru (11)
Elementul BODY
-Acest element conţine informaţii despre fondul si imaginea paginii, text si
culoarea link-urilor.
- Daca elementul BODY nu este completat atunci browser-ul va prezenta
culorile standard, de obicei fondul este alb.
-Pentru a seta culoare fondului paginii trebuie sa editaţi elementul <BODY>
adăugând atributul BGCOLOR.
- Următorul exemplu va prezenta un document a cărui fond este de culoare
albastra:
<BODY BGCOLOR=”#0000FF”></BODY>
Culoarea textului
Atributul TEXT controlează culoarea textului normal din document
Acesta va afecta tot textul din document care nu este colorat de alte
elemente, cum ar fi link-ul.
Culoarea de baza pentru text este Negru.
o In următorul exemplu culoarea fondului va fi albastru si culoarea
textului va fi roşu, atributul TEXT va fi adăugat astfel:
<BODY BGCOLOR=”#0000FF” TEXT=”#FF0000”></BODY>
LINK, VLINK si ALINK
o Aceste atribute controlează culoarea link-ului in diferite stări
1. LINK – culoarea iniţiala. Standard este albastru
2. VLINK – culoarea unui link vizitat. Standard este purpuriu.
3. ALINK – culoarea link-ului in momentul activării. Standard este roşu.
o Modul de setare al acestor atribute este următorul:
<BODY BGCOLOR=”#FFFFFF” TEXT=”#FF0000” LINK=”#0000ff”
VLINK=”#FF00FF” ALINK=”#FFFF00”></BODY>
 Rezultatul va fi o pagina cu fondul alb, textul roşu, link-urile albastre, link-
urile vizitate vor avea culoarea roz iar culoarea link-urilor in momentul activării va
fi galben.
Folosirea unei imagini ca fond pentru pagina (document’s
background)
Elementul body oferă posibilitatea înlocuiri fondului paginii cu o
imagine (Background image). Daca imaginea este mai mica decât dimensiunile
paginii atunci imaginea va fi multiplicata pana va acoperi întreg documentul.
Imaginea trebuie sa fie in format *.gif sau *.jpg. Folosirea unei imagini va da un
aspect plăcut documentului. Pentru a vedea cum arata un document al cărui fond este
o imagine
Un exemplu de cod HTML pentru background image este următorul:
<BODY BACKGROUND=”logo.gif"
BGCOLOR=”#FFFFFF”></BODY>
In acest exemplu fondul pagini va fi dat de imaginea fişierului
„logo.gif” si de asemenea am setat BGCOLOR astfel incat in timpul procesului de
încărcare a imaginii culoarea fondului va fi alba.
o - După ce a-ti creat baza de început a unui document si a-ti setat
proprietăţile, este bine sa salvaţi fişierul. Salvarea trebuie făcuta intr-un format
pe care browser-ul îl poate recunoaşte. Extensia standard pentru un fişier care
reprezintă o pagina web este „.htm” , dar poate fi

Formatul textului
Bold, italic si alte elemente pentru formatul textului:
- <FONT> … </FONT>
o Mărimea textului poate fi modificata cu elementul FONT si atributul SIZE.
Atributul SIZE poate lua valorile numerice de la 1 la 7 si poate folosi, ca valoare
relativa, semnele „+” sau „-”.Textul normal (daca nu este specificat acest atribut)
are valoarea 3.
▪ Exemplu: <FONT SIZE=”+2”>Doua mărimi mai mare</FONT>
oTipul fontului poate fi modificat cu elementul FONT si atributul FACE.
▪ Exemplu: <FONT FACE=”Arial Black”>Acesta este tipul de
font Arial Black</FONT>
- <B> Bold </B>
 -<I> Italic </I>
- <U> Underline </U>
-COLOR=”#RRGGBB” – Este atributul COLOR al elementului FONT,
schimba culoarea textului.
▪Exemplu <FONT COLOR=”#RRGGBB”>Acest text are
culoare</FONT>
- <PRE> Preformated </PRE> - Textul incadrat de elementul PRE este
prezentat intr-un singur font, oricare ar fi atributul FACE. Spatiile mai lungi si liniile
necesare sunt prezentate aşa cum sunt scrise in NotePad, ne mai fiind nevoie de alte
elemente adiţionale, cum ar fi <BR> pentru o noua linie si &nbsp; &nbsp; …
pentru mai mult spaţiu intre cuvinte.
- <EM> Accentuare (Emphasis) </EM> - Browser-ul de obicei prezint acesta
ca italic.
- <STRONG> Strong </STRONG> - Browser-ul prezintă acesta ca bold.
- <TT> Teletype </TT> Ca si PRE, browser-ul prezintă acesta intr-un singur
tip de font, indiferent de fontu ales cu atributul FACE, in interiorul elementului
FONT.
-<CITE> Citaţie </CITE> Reprezinta o citaţie din document.
o Mai jos puteţi vedea câteva coduri si modul lor de afişare de browser.
<HTML>
<HEAD>
<TITLE>Titlu Documentului</TITLE>
</HEAD>
<BODY>
<P><FONT SIZE=”+1”>O singura mărire</FONT>- Normal -
<FONT SIZE=”-1”>O singura micşorare</FONT><BR>
<B>Bold</B>- <I> Italic </I> - <U> Subliniat </U> -
<FONT COLOR=”#FF0000”> Colorat </FONT><BR>
<EM>Accentut</EM> - <STRONG> Strong </STRONG> -
<TT>Tele Type</TT><BR>
<CITE> Citaţie </CITE></P>
</BODY>
</HTML>
 oAşa va fi afişat de browser:
O singura mărire - Normal - O singura micşorare
Bold – Italic – Subliniat – Colorat
Accentuat – Strong – Tele Type
Citaţie
Aliniamentul
-Câteva elemente au atributul (ALIGN) pentru aliniament, cum ar fi Titlurile
<Hx> , Paragraful <P>…</P> si Linia orizontala <HR> . Cele trei valori ale
atributului ALIGN sunt: LEFT, RIGHT si CENTER.
-Aliniamentul celor mai multe elemente se face cu ajutorul alte elemente:
▪ <DIV ALIGN=”valoare”>…</DIV> Poate conţine cele mai multe
elemente. Tot ce este poziţionat cu elementul DIV poate fi aliniat oriunde-n pagina,
indiferent daca in acel loc se afla si alt ceva (Imagine. Text, …)
▪ <CENTER>…</CENTER> Va centra elementele
▪ <TABLE>…</TABLE> In interiorul tabelului aliniamentul se poate face
pentru fiecare celula.
Caractere speciale si simboluri
-In tabelul de mai jos puteţi vedea câteva caractere speciale si simboluri
recunoscute de HTML
Caractere speciale Codul HTML Caractere speciale Codul HTML
& &amp; > &gt;

 &lowast; < &lt;

¢ &cent; ” &quot;
© &copy; ® &reg;
¼ &frac14; ™ &trade;
½ &frac12; Spaţiu &nbsp;

Alte caractere pentru formatul textului

- <STRIKE> Text tăiat </STRIKE>
- <BIG> Prezintă textul intr-un font mare </BIG>
 - <SMALL> Prezintă textul intr-un font mic </SMALL>
- <SUB> Asiza textul in poziţia subscript </SUB>
- <SUP> Aseaza textul in poziţia superscript </SUP>
- In exemplu de mai jos puteţi vedea un exemplu cu codurile de mai sus si
felul cum sunt afişate de browser
<HTML>
<HEAD>
<TITLE>Titlu Documentului</TITLE>
</HEAD>
<BODY>
<P>
<STRIKE> Text tăiat </STRIKE><BR>
<BIG> Prezintă textul intr-un font mare </BIG><BR>
<SMALL> Prezintă textul intr-un font mic </SMALL><BR>
<SUB> Aseaza textul in poziţia subscript </SUB> Normal
<SUP> Aseaza textul in poziţia superscript </SUP><BR>
</P>
</BODY>
</HTML>
-Afisarea de browser:
Text taiat
Prezintă textul intr-un font mare
Prezinta textul intr-un font mic
Aseaza textul in pozitia superscript
Aseaza textul in pozitia subscript Normal

- Urmatoarele elemente pentru format sunt folosite mai rar si sunt pentru

documente cu aplicatii tehnice

<DFN> Defineste exemplu de termen inchis </DFN>
<CODE> Folosit pentru extragerea unui cod de program </CODE>
<SAMP> Folosit pentru simple productii de programe, scripturi , etc.
</SAMP>
<KBD> Folosit pentru text care va fi scris de utilizator </KBD>
 <VAR> Folosit pentru variabile sau argumente de comenzi </VAR>
- In exemplu de mai jos puteţi vedea un exemplu cu codurile de mai sus si
felul cum sunt afişate de browser

<HTML>
<HEAD>
<TITLE>Titlu Documentului</TITLE>
</HEAD>
<BODY>
<P>
<DFN> Definite exemplu de termen inchis </DFN><BR>
<CODE> Folosit pentru extragerea unui cod de program
</CODE><BR>
<SAMP> Folosit pentru simple productii de programe, scripturi ,
etc.</SAMP><BR>
<KBD> Folosit pentru text care va fi scris de utilizator </KBD><BR>
<VAR> Folosit pentru variabile sau argumente de comenzi
</VAR><BR>
</P>
</BODY>
</HTML>
- Afisarea de browser:
Defineste exemplu de termen inchis
Folosit pentru extragerea unui cod de program
Folosit pentru simple productii de programe, scripturi
, etc.
Folosit pentru text care va fi scris de utilizator
Folosit pentru variabile sau argumente de comenzi
- Alte elemente :
<BASEFONT> Folosit pentru setarea bazei fontului. Marimea atributuluieste
o valoare intre 1 si n7 </ BASEFONT>
 <BLOCKQUOTE> Folosit pentru a ingradi blocarea de citatele de la alte
lucrari, creaza spatiu pentru text. Pentru a crea mai mult spatiu puteti adauga de mai
multe ori acest element.
</BLOCKQUOTE>
<ADDRESS> Cu acest element se specifica informatii cum ar fi autorul
documentului si detalii pentru contact. </ADDRESS>
- In exemplu de mai jos puteţi vedea un exemplu cu codurile de mai sus si
felul cum sunt afişate de browser
<HTML>
<HEAD>
<TITLE>Titlu Documentului</TITLE>
</HEAD>
<BODY>
<P>
<BLOCKQUOTE> Aceasta este prima zi din restul vieţii tale
</BLOCKQUOTE>
<CENTER><ADDRESS> 180 Attwell Dr. Suite 130 <BR>Toronto,
ON<BR>M9W 6A9</ADDRESS></CENTER></P>
<H5>Heding 5</H5>
</P> Paragraf …</P>
</BODY>
</HTML>
- Afisarea de browser:
Aceasta este prima zi din restul vietii tale
180 Attwell Dr. Suite 130
Toronto, ON
M9W 6A9
Liste HTML - UL, OL

HTML contine cateva tag-uri utile pentru asezarea continutului sub forma de liste. Prin acestea
textul este mai usor de citit si evidentiat.

Liste neordonate - UL
Un element des folosit in formarea listelor (neordonate) este <ul>.

• - <ul> este elementul de început si dupa scrierea listei se incheie cu </ul>.

• - Majoritatea elementelor pentru marcatori si numerotare sunt compuse din unu sau mai
multe elemente <li> ... </li> (list element). In mod implicvit, acestea prezintă un marcaj
ca un bullet.

Mai jos puteti vedea exemplu.

<h4>Exemplu liste UL</h4>

<ul>
<li>List item 1 ...</li>
<li>List item 2 ...</li>
<li>List item 3 ...</li>
</ul>
- Sunt 3 tipuri de marcatori: disc, circle (cerc) si square (patrat)
- Tipul care se doreste folosit se introduce cu proprietatea CSS: list-style-type in style.
- Exemplu:
<h4>Exemplu liste UL square</h4>

<ul style='list-style-type: square;'>

<li>List item 1 ...</li>
<li>List item 2 ...</li>
<li>List item 3 ...</li>
</ul>

Liste ordonate - OL

Un alt element folosit pentru formarea listelor este <ol>. Acesta afiseaza listele ordonate
numeric.

<h4>Exemplu liste OL</h4>

<ol>
<li>List item 1 ...</li>
<li>List item 2 ...</li>
<li>List item 3 ...</li>
</ol>

Tipuri de liste OL

Sunt mai multe tipuri de numerotare care pot fi folosite. Acestea pot fi controlate cu atributul
type care se adauga in tag-ul <ol>.

• type='1' - stil: 1, 2, 3, ...

• type='a' - stil: a, b, c, ...
• type='i' - stil: i, ii, iii, ...
• type='I' - stil: I, II, III, ...

- Exemplu:
<h4>Exemplu liste OL cu type</h4>

<ol type='a'>
<li>List item 1 ...</li>
<li>List item 2 ...</li>
<li>List item 3 ...</li>
</ol><br>

- Alta lista, type='I':

<ol type='I'>
<li>List item 1 ...</li>
<li>List item 2 ...</li>
<li>List item 3 ...</li>
</ol>

Atributul start si reversed

Se poate specifica numarul de inceput al numerotarii printr-o valoare data atributului: start.
Numerotarea se poate inversa aplicand atributul: reversed

- Exemplu:
<h4>Exemplu liste OL cu start si reversed</h4>

OL cu start='3'
<ol start='3'>
<li>List item 1 ...</li>
<li>List item 2 ...</li>
<li>List item 3 ...</li>
</ol><br>

- Alta lista: type='i', start='3' si reversed:

<ol type='i' start='3' reversed>
<li>List item 1 ...</li>
<li>List item 2 ...</li>
<li>List item 3 ...</li>
</ol>
• Elementele <li> sunt de tip bloc, in ele se pot adauga alte tag-uri de tip bloc (<p>, </div>,
<pre>, etc.) sau chiar alte liste <ul> sau </ol>.
- Exemplu cu paragraf si liste imbricate.
<h4>Exemplu liste imbricate</h4>

<ol>
<li><p>Acesta e un paragraph<br>
O noua linie...</p></li>
<li>Tutorial HTML:
<ul type='square'>
<li>Lista UL imbricata.</li>
<li>Alta lista imbricata.</li>
</ul>
</li>
<li>Rabdare cu Iubire, si invers.</li>
</ol>

Adaugare imagini in pagina

Formatul imaginilor care pot fi folosite

Cele mai folosite formate pentru imaginile adaugate intr-o pagina HTML sun GIF si JPEG (JPG
; JPE), avantajul acestora este ca imaginile care au aceste extensii au o marime mica (in bytes),
avand maximum 256 de culori.
Alte tipuri de formate (folosite mai rar) sunt: PNG, BMP, TIFF, PCX

Adaugarea unei imagini intr-o pagina web

Pentru a introduce o imagine intr-un format HTML se foloseşte elementul <img> impreuna cu
urmatoarele atribute:

• src - Contine locatia /adresa fisierului cu imaginea.

• alt - La acest atribut se scrie textul care va aparea daca imaginea nu poate fi afisata.
• width - Valoarea acestui atribut reprezinta lungimea imaginii, in pixeli. Daca nu este
scris imaginea va fi prezentata cu lungimea originala.
• height - Valoarea acestui atribut reprezinta inaltimea (latimea) imaginii, in pixeli. Daca
nu este scris imaginea va fi prezentata cu inaltimea originala.

In exemplu de mai jos puteti vedea modul de introducere a unei imagini pe o pagina web si cum
pot fi folosite atributele:
<h4>Exemplu adaugare imagine</h4>

<img src='../imgs/smile_gift.png' alt='Zambeste' width='150' height='132'/>

- In tagul <img> se poate adauga atributul style cu proprietati CSS pentru setare pozitiei imaginii,
bordura, margine exterioara.
Exemplu:
<h4>Exemplu magine cu style</h4>

<img src='../imgs/smile_gift.png' alt='Zambeste' width='150' height='132'

style='border:2px solid #00

Creare link-uri

Link-urile (links) sunt elemente HTML cu ajutorul carora putem deschide alte pagini, sari de la
un document la altul sau la alt site.
Link-urile pot fi create cu tagul <a>.
Sintaxa:

<a href='url' title='Titlu link'>Text link</a>

- href este atributul in care se adauga adresa link-ului.
- url este adresa link-ului (a paginii care va fi deschisa). De exemplu (https://marplo.net/ ).
- Titlu link este un text ascuns care apare cand este pozitionat mouse-ul deasupra link-ului.
- Text link este textul care va aparea in browser si pe care trebuie dat click cu mouse-ul.

Exemplu:
<h4>Exemplu link</h4>
<p>Acesta este un simplu link.</p>
<a href='/html' title='Curs HTML'>Curs HTML</a>
• Culoarea link-urilor din pagina poate fi schimbata cu proprietatea CSS color.
In css:
<style>
/*culoarea link-urilor */
a {
color: #0000fe;
}

/*culoarea link-urilor cand mouse-ul e deasupra lor */

a:hover {
color: #00d000;
}

/*culoarea link-urilor cand pagina respectiva a fost / este vizitata */

a:visited {
color: #fe0000;
}
</style>
- Exemplu:
<style>
a { color: #f00000; }
a:visited { color: #00d000; }
a:hover { color: #0000e0; }
</style>

<h4>Exemplu link colorat</h4>

<p>Acesta este un link cu o culoare definita in CSS.</p>
<a href='/html' title='Curs HTML'>Curs HTML</a>
• In loc de textul link-ului se poate folosi si o imagine:
<h4>Exemplu link cu imagine</h4>
<p>Clic pe imagine.</p>
<a href='/blog/' title='Spiritualitate'><img src='../imgs/smile_gift.png'
alt='Smile' width='150' height='132'/></a>

Link-urile pot fi de doua feluri:

1. Link-uri externe - deschid alte pagini din site, sau alt site.
2. Link-uri interne - fac salt la o zona din aceeasi pagina.

Link-uri Externe

Aceste link-uri deschid documente externe; pot fi de doua feluri:

1) Link-uri catre pagini ale aceluiasi site. Adresa URL de la 'href' poate fi: Absoluta (Completa,
include si domeniul site-ului [protocolul http:/https: poate fi omis]), sau Relativa (doar calea
catre pagina din site, fara numele domeniului).
Exemplu:
<!-- Link cu adresa URL absoluta /intreaga -->
<a href='//marplo.net/html/linkuri.html' title='Creare link-uri'>Creare link-
uri</a>

<!-- Pagina index.php este in acelasi director -->

<a href='index.php' title='Free courses'>Home</a>

<!-- page.html se afla intr-un director anterior celui in care e pagina

curenta -->
<a href='../page.html' title='Free courses'>Text</a>

<!-- page.html e intr-un subirector din cel in care e pagina curenta -->
<a href='folder/page.html' title='Free courses'>Text</a>
2) Link-uri externe catre alte site-uri. Aici, adresa URL din link trebuie sa contina si domeniul
(numele site-ului) paginii tinta (protocolul 'http' sau 'https' poate fi omis).
- Exemplu:
<a href='//gamv.eu/jocuri' title='Jocuri'>Jocuri Flash</a>
Link-uri Interne

Acestea fac salt la zone din aceeasi pagina (ca un 'scroll' direct). Se folosesc cand pagina
respectiva este lunga si e nevoie sa se sara spre anumite texte din pagina.
- Pentru creare de link-uri interne se urmeaza acesti pasi:

1. Se scrie urmatorul cod in locatia unde se va face saltul si se afla in aceeasi pagina cu link-
ul:

<a id='indice'></a>

- atributul 'id' indica tinta pentru link, e un fel de semn care indica locatia.
- 'indice' poate fi orice cuvant, trebuie sa fie unic pentru fiecare link.

2. In locul unde vrem sa fie link-ul (acolo unde o sa dam click pentru a face saltul), se scrie
urmatorul cod:

<a href='#indice'>Text link</a>

- aici 'indice' este acelasi text scris la pasul 1.

Exemplu:
<h4>Exemplu link intern</h4>

<a href='#next1'>Urmatoara sectiune</a>

<p style='height:990px;'>Mute paragrafe si continut...<br>

...</p>

<a id='next1'> </a>

<p>Aici e umatoarea sectiune.</p>
<p>Toate-s bune si frumoase cand le vezi asa cum sunt cu adevarat.</p><br>

Pentru link-ul intern se poate folosi ca indice in 'href' ID-ul oricarui element din pagina (
href='#id_div' ).

• Link-urile interne si externe pot fi combinate. Astfel putem face saltul la un anumit loc aflat
intr-o alta pagina. In pagina respectiva (externa) se scrie codul de la pasul 1 (in locul unde se va
face saltul), iar in pagina in care va fi link-ul se scrie:
<a href='adresa_pagina#indice'>Nume</a>

Atributul target

Tag-ul <a> poate avea si un atribut target, care specifica unde va fi deschisa pagina.
Atributul 'target' poate avea 4 valori:
 • target='_top' - incarca pagina in toata fereastra browser-ului.
• target='_blank' - incarca pagina intr-o fereastra noua, ramane astfel si fereastra cu link-ul.
• target='_self' - pagina se va incarca in aceeasi fereastra (sau frame daca e intr-un
<iframe>).
• target='_parent' - pagina se va incarca in fereastra parinte, daca e intr-un <iframe>.

Urmatorul exemplu va deschide o pagina intr-un tab nou in browser:

<h4>Exemplu link cu target</h4>
<p>Urmatorul link are target='_blank', va deschide pagina intr-un tab
nou.</p>
<a href='//gamv.eu/' target='_blank' title='Flash Games'>Flash Games</a>
 Marcatori si numerotare
Elementele pentru marcatori si numerotare:
- <UL> este elementul de început, fara atribut el prezintă un marcaj ca un
bullet.
-Majoritatea elementelor pentru marcatori sa numerotare sunt compuse din
unu sau mai multe <LI> … </LI> (list element) elemente
-Vedeţi exemplu de mai jos
<HTML>
<HEAD>
<TITLE>Titlu Documentului</TITLE>
</HEAD>
<BODY>
<UL>
<LI> List item …</LI>
<LI> List item …</LI>
<LI> List item …</LI>
</UL>
</BODY>
</HTML>

Vizualizarea in pagina
o List item ...
o List item ...
o List item ...
-Sunt trei tipuri de marcaje: Disc ; Cerc (CIRCLE) si Patrat (SQUARE)
-Acestea sunt introduse cu atributul TYPE in interiorul elementului <UL>
- Exemplu :
<HTML>
<HEAD>
<TITLE>Titlu Documentului</TITLE>
</HEAD>
 <BODY>
<UL TYPE=”SQUARE”>
<LI> List item …</LI>
<LI> List item …</LI>
<LI> List item …</LI>
</UL>
</BODY>
</HTML>
Vizualizarea in pagina
o List item ...

o List item ...

o List item ...

- <OL> … </OL> este un element de numerotare. Elementele din lista sunt

numerotate automat
- Exemplu:
<HTML>
<HEAD>
<TITLE>Titlu Documentului</TITLE>
</HEAD>
<BODY>
<OL>
<LI> List item …</LI>
<LI> List item …</LI>
<LI> List item …</LI>
</OL>
</BODY>
</HTML>
Vizualizarea in pagina
o List item ...
o List item ...
 o List item ...

- Sunt mai multe tipuri de numerotare, controlate de atributul TYPE , le puteti

vedea in tabelul urmator :
TYPE STYLE
1 1, 2, 3, ...
A a, b, c, ...
I i, ii, iii, ...
I I, II, III, ...
-De asemenea se poate specifica numarul de inceput printr-o valoare data
atributului START
- Exemplu :
<HTML>
<HEAD>
<TITLE>Titlu Documentului</TITLE>
</HEAD>
<BODY>
<OL TYPE=”i”>
<LI> List item …</LI>
<LI> List item …</LI>
</OL>
<P> Orice text … </P>
<OL TYPE=”i” START=”3”>
<LI> List item …</LI>
</OL>
</BODY>
</HTML>
Vizualizarea in pagina
o List item ...
 o List item ...
Orice text ...
o List item ...
Alte elemente pentru asezarea textului in pagina :
-<DL> ... </DL> Fiecare tip de astfel de element trebuie precedad de unul sau
mai multe elemente <DD> ... </DD> care la randul lor sunt urmate de unul sau mai
multe elemente <DD> ... </DD>
-Aceste elemente ajuta pentru a un aspect placut textului si a putea face o
separare mai buna a frazelor
- In urmatorul exemplu puteti vedea cum arata aceste elemente :
<HTML>
<HEAD>
<TITLE>Titlu Documentului</TITLE>
</HEAD>
<BODY>
<DL>
<DT> HTML </DT>
<DD> Hyper Text Markup Language </dd>
<DT> Dog </DT>
<DD> Dog = câine </DD>
</DL>
</BODY>
</HTML>
Vizualizarea in pagina
HTML
Hyper Text Markup Language
Dog
Dog = câine
-Pentru o eficienta mai buna se pot combina elementele de marcaj si
numerotare, introducand elementele <UL> si <OL> impreuna cu elementele <LI>
-Vedeti esemplu de mai jos :
 <HTML>
<HEAD>
<TITLE>Titlu Documentului</TITLE>
</HEAD>
<BODY>
<UL TYPE=”SQUARE”>
<LI> List item …</LI>
<LI> List item …
<OL TYPE=”i” START=”3”>
<LI> List item … </LI>
</LI>
</OL>
<LI> List item …</LI>
</UL>
</BODY>
</HTML>
Vizualizarea in pagina
o List item …
o List item …
o List item …
o List item …
Imagini

Formatul imaginilor care pot fi folosite:

- Cele mai folosite formate pentru imaginile adăugate intr-o pagina HTML sun
GIF si JPEG (JPG ; JPE), avantajul acestora este ca imaginile care au aceste
extensii au o mărime mica (in bytes), avan maximum 256 de culori.
- Alte tipuri de formate (folosite mai rar ) sunt :
oPNG, BMP, TIFF, PCX
Adăugarea unei imagini intr-o pagina web :
 - Pentru a introduce o imagine intr-un format HTML se foloseşte elementul
<IMG> ... </IMG> împreuna cu următoarele atribute :
o SRC- Valoarea acestui atribut determina locaţia fişierului care conţine
imaginea
oALT- La acest atribut se scrie textul care va aparea cand utilizatorul va
poziţiona, in browser, mouse-ul peste imagine
o ALIGN- Acest atribut permite aşezarea imagini in locuri diferite pe pagina.
Pot fi folosite următoarele opţiuni :
• Bottom ; Middle ; Top ; Left ; Right; TextTop; ABSMiddle; Baseline;
ABSBottom
o WIDTH- Valoarea acestui atribut reprezinta lungimea imaginii, in pixeli.
Daca nu este scris imaginea va fi prezentata cu lungimea originala
o HIGH - Valoarea acestui atribut reprezinta inaltimea (lăţimea) imaginii, in
pixeli. Daca nu este scris imaginea va fi prezentata cu inaltimea originala
o BORDER - Prin adăugarea acestui atribut imaginea va apărea înconjurata
de un chenar, valoarea acestui atribut reprezinta grosimea chenarului, in pixeli.
o HSPACE - Acest atribut este pentru spaţiu orizontal pe ambele parţi ale
imaginii, specificat in pixeli. De exemplu o valoare de 5 va pune un spaţiu invizibil,
de 5 pixel, in pârtile orizontale ale imaginii.
o VSPACE - Acest atribut este pentru spaţiu vertical pe ambele parţi ale
imaginii, specificat in pixeli. De exemplu o valoare de 5 va pune un spaţiu invizibil,
de 5 pixel, in pârtile verticale ale imaginii.
-In exemplu de mai jos puteţi vedea modul de introducere a imaginii pe o
pagina web si cum pot fi folosite atributele :
<HTML>
<HEAD>
<TITLE>Titlu Documentului</TITLE>
</HEAD>
<BODY>
<IMG SRC=”VIEW/logo.jpg” ALT=”Puteţi adăuga orice text”
ALIGN=”TOP” WIDTH=”100” HIGH=”120” BORDER=”4” HSPACE=”10”
VSPACE=”7”>
</IMG>
</BODY>
 </HTML>

Vizualizarea in pagina

Crearea de link-uri

Link-urile (links) sunt elemente HTML cu ajutorul cărora putem sari de la un

document la altul sau la alt site. Sunt foarte importante in crearea de pagini web.
Forma generala pentru crearea unui link este următoarea:
<A HREF=”URL”>Nume</A>
-A este elementul specific pentru crearea link-urilor
-HREF este atributul care indica adresa link-ului
- URL este adresa link-ului. De exemplu (http://www.plomar.xhost.ro)
- Nume este textul care va apărea in browser si pe care trebuie dat click cu
mouse-ul. In loc de acest text se poate folosi si o imagine, astfel “Nume” va fi
înlocuit cu <IMG SRC=”nume imagine.extensie>
- Cand documentul este alcatuit din mai multe cadre se foloseste si atributul
TARGET,
Culoarea link-urilor poate fi schimbata de următoarele atribute, care trebuie
scrise in interiorul elementului <BODY>:
- LINK=”#0000FF” - reprezintă culoarea link-ului in browser
- VLINK = “#00FFFF” - reprezintă culoarea link-ului când pagina
respectiva a fost / este vizitata
 - ALINK=”#FF0000” - reprezintă culoarea link-ului când acesta este
activ
Exemplu:
<BODY BGCOLOR="#00FFFF" link="#000000" vlink="#FF0000"
alink="#00FF00">
Link-urile sunt de doua feluri:
- Link-uri externe (sunt cele mai utilizate), care sunt si ele de doua feluri
o Link-uri externe câtre pagini ale aceluiaşi site. Pentru acestea URL-ul nu
trebuie sa fie de forma “http://www.nume.com, se foloseşte doar numele si extensia
documentului la care se face saltul.
De exemplu:
- daca documentul ţinta se afla in acelaşi director cu fişierul in care se scrie
link-ul, codul va fi scris aşa:
<A HREF=”nume.extensie”>Text</A>
- daca documentul ţinta se afla intr-un director anterior celui in care se afla
fişierul in care se scrie link-ul, codul va fi scris aşa:
<A HREF=”../nume.extensie”>Text</A>
- daca documentul ţinta se afla intr-un director ulterior celui in care se afla
fişierul in care se scrie link-ul, codul va fi scris aşa:
<A HREF=”director/nume.extensie”>Text</A>
o Link-uri externe câtre alte site-uri. Petru acestea codul HTML se va scrie,
de exemplu, aşa:
<A HREF=”http://www.alejandrofernandez.home.ro”>Text</A>
- Link-uri interne – sunt link-uri câtre alte texte din aceeaşi pagina. Se
folosesc când pagina respectiva este lunga si e nevoie sa se sară spre anumite texte
din pagina.
o Pentru creare de link-uri interne trebuie urmaţi următorii paşi:
1. Se scrie următorul cod la textul ţinta, care se afla in aceeaşi pagina si unde
link-ul va face saltul:
<A NAME=”cuvânt”>Textul ţinta</A>
- Atributul “name” indica ţinta pentru link, e un fel de semn care indica
locaţia.
- “cuvânt” – este orice cuvânt, trebuie sa fie unic pentru fiecare link
 - “Textul ţinta” este textul unde se face saltul
2. In locul unde vrem sa fie link-ul (acolo unde o sa dam click pentru a face
saltul câtre textul ales), se scrie următorul cod:
<A HREF=”#cuvânt”>Text Link</A>
- aici “cuvânt” este acelaşi text scris la pasul 1.
- Link-urile interne si externe pot fi combinate. Astfel putem face saltul câtre
un anumit text aflat intr-o alta pagina. După ce in pagina respectiva se scrie codul de
la pasul 1 la textul ales pentru ţinta link-ului, in pagina in care va fi link-ul se scrie
:
<A HREF=”nume pagina.html#cuvant”>Text Link</A>/

Tabele
Crearea de tabele:
- Pentru a crea tabele in paginile web se foloseşte elementul
<TABLE>…</TABLE> , acesta având alte patru sub-elemente:
o Linia Tabelului <TR>…</TR>
o Titlul Tabelului <TH>…</TH>
oSub-titlu tabelului <CAPTION>…</CAPTION>
§ Linia tabelului de obicei conţine elementul pentru titlurile tabelului si
elementul pentru datele tabelului.
§ Elementele pentru titlurile si datele tabelului pot conţine mai multe
elemente , cum ar fi cele pentru formatul textului sa cele pentru imagini.
- mai jos puteţi vedea un exemplu de cod HTML pentru crearea unui tabel :
<TABLE BORDER=”1”>
<TR>
<TH>Titlu 1</TH>
<TH>Titlu 2</TH>
</TR>
<TR>
<TD>Linia 2- Coloana 1</TD>
<TD>Linia 2- Coloana 2</TD>
</TR>
 <tr>
<TD>Linia 3- Coloana 1</TD>
<TD>Linia 3- Coloana 2</TD>
</TR>
<tr>
<TD>Linia 4- Coloana 1</TD>
<TD>Linia 4- Coloana 2</TD>
</TR>
</TABLE>
Rezultatul in browser:

Titlu 1 Titlu 2

Linia 2- Coloana 1 Linia 2- Coloana 2

Linia 3- Coloana 1 Linia 3- Coloana 2

Linia 4- Coloana 1 Linia 4- Coloana 2

- tabelele sunt foarte des folosite si folositoare in construcţia paginilor web.

Atributele Tabelului:
- BGColor = defineşte culoarea tabelului
-Width = specifica lungimea tabelului (In pixeli sau procente din lungimea
paginii)
-Border = grosimea liniei (in pixeli) ce defineşte tabelul si înconjoară
fiecare celula
-CellSpacing= spaţiu dintre celula (in pixeli)
-CellPading = spaţiu dintre linia celulei si conţinutul acesteia (in pixeli)
- Align = controlează poziţionarea tabelului cu următoarele atribute : Left,
Right, sau Center , dar acestea nu sunt bine suportate de aceea este mai bine sa
folosiţi elementul <Div> sau <Center> pentru poziţionarea tabelului.
- Background = controlează fondul tabelului, care poate fi si o imagine
-BorderColor = culoarea liniei din jurul tabelului
-BorderColorLight = culoarea luminoasa folosita de doua linii din cele
patru care înconjoară tabelul
 - BorderColorDark = culoarea întunecata folosita de doua linii din cele
patru care înconjoară tabelul
Sub-titlu tabelului :
- permite specificarea unei linii de text care va apărea deasupra sau sub tabel,
acest lucru este definit de atributul „ALIGN” care poate lua valorile: TOP
(deasupra) BOTTOM (jos).
-Exemplu:
<TABLE BORDER=”1” CELPADING=”2”>
<CAPTION ALIGN=”BOTTOM”>Acesta este textul</CAPTION>
<TR>
<TH>Titlu 1</TH>
<TH>Titlu 2</TH>
</TR>
<TR>
<TD>Linia 2- Coloana 1</TD>
<TD>Linia 2- Coloana 2</TD>
</TR>
</TABLE>
Rezultatul in browser

Titlu 1 Titlu 2

Linia 2- Coloana 1 Linia 2- Coloana 2

Acesta este textul

Atributele specifice elementelor pentru titlul si datele tabelului:

o Colspan = specifica cat de multe coloane ale tabelului aceasta celula
va inlocui
o Rowspan = specifica cat de multe randuri ale tabelului aceasta celula
va inlocui
o Align = alinierea datelor celulei pe orizontala (left, right sau center)
o Valign= alinierea datelor celulei pe verticala (top, middle sau
bottom)
 o Background = controlează fondul celulei, care poate fi si o imagine
o BGColor = defineşte culoarea celulei
o Width= specifica lungimea celulei (In pixeli sau procente din
lungimea paginii)
o Height = specifica inaltimea celulei (In pixeli sau procente din
inaltimea paginii)
-in următorul exemplu puteţi vedea rezultatul folosirii atributelor:
„Colspan” si „Rowspan”
<TABLE BORDER=”1” CELPADING=”2”>
<CAPTION ALIGN=”BOTTOM”>Acesta este textul</CAPTION>
<TR>
<TH>Titlu 1</TH>
<TH>Titlu 2</TH>
</TR>
<TR>
<TD COLSPAN=”2”>Linia 2- Coloana 1</TD>
</TR>
<TD ROWSPAN=”2”>Linia 3- Coloana 1</TD>
<TD>Linia 3- Coloana 2</TD>
</TR>
<TD>Linia 4- Coloana 2</TD>
</TR>
</TABLE>
Rezultatul in browser

Titlu 1 Titlu 2
Linia 2- Coloana 1
Linia 3- Coloana 1 Linia 3- Coloana 2
Linia 4- Coloana 2
Acesta este textul
 Cadre
Cadrele:
o O pagina alcatuita din cadre este de fapt alcatuita din mai multe pagini
HTML. De exemplu o pagina cu un cadru in dreapta si altul in stanga este de fapt
alcatuita din trei paginiHTML. Doc1.htm si Doc2.htm sunt paginile ce contin
continutul , iar Frames.htm este pagina care le cuprinde pe celelalte doua, dupa
cum puteti vedea in imaginea de mai jos :

Arhitectura pagini cu cadre

- Un element <FRAMESET> … </FRAMESET> este scris in interiorul
documentului HTML, înainte de <BODY>
-element <FRAMESET> descria cat din spaţiul paginii este atribuit fiecărui
cadru, impartind ecranul in ROWS (Linii) si COLS (Coloane)
- element <FRAMESET> va conţine elemente <FRAME> , unul pentru
fiecare divizare a ferestrei din browser
Crearea unei pagini cu cadre:
<FRAMESET>
- elementul <FRAMESET> creaza divizarea paginii intr-o singura direcţie.
Acesta permite sa definesti impartire pe coloane sau pe linii
ROWS
- Determina numărul de linii si mărimea cadrelor care vor fi asezate in linie,
începând de sus
- Pot fi folosite următoarele valori:
- pixeli absoluţi ; ex : ”360,120”
- procente din inaltimea ecranului ; ex : ”75%,25%”
 - valori proporţionale, folosind (*).Acesta putând fi combinat cu procente
sau pixeli. Ex : ”120,*” sau ”30%,*”
COLS
- Determina numărul de coloane si mărimea cadrelor care vor fi asezate pe
colone, începând din stânga
- Pot fi folosite următoarele valori:
- pixeli absoluţi ; ex : ”380,120”
- procente din lungime ecranului ; ex : ”33%,77%”
- valori proporţionale, folosind (*).Acesta putând fi combinat cu procente
sau pixeli. Ex : ”120,*” sau ”30%,*”
Alte atribute ale elementului <FRAMESET>
- FRAMEBORDER
- Posibile valori: 0, 1, YES, NO
-FRAMESPACING
- Acest atribut este specificat in pixeli. Daca FRAMEBORDER este 0 atunci
si acesta trebuie sa aibă valoarea 0
-BORDER
- Valori posibile: 0 sau 1
- BORDERCOLOR
- Acest atribut permite sa alegi culoarea bordurii

<FRAME>
- acest element defineste un singur cadru , este scris in interiorul
elementului <FRAMESET>
- Pentru fiecare cadru trebuie scris cate un element <FRAME>
- Acesta are următoarele atribute:
SRC
- Aici trebuie scrisa adresa si numele paginii folosite pentru cadru
NAME
-Aici trebuie scris numele de identificare al cadrului.
MARGINWIDTH
 - Atribut opţional, valoare in pixeli. Determina spaţiul orizontal dintre
conţinutul cadrului si marginea acestuia.
MARGINHEIGHT
- Atribut opţional, valoare in pixeli. Determina spaţiul vertical dintre
conţinutul cadrului si marginea acestuia.
SCROLLING
- Afisează un Scroll Bar in cadru
- Valori posibile:
- YES - Permite afisarea Scroll Bar-ului
- NO - Nu va fi prezentat nici un Scroll Bar
- AUTO - Browser-ul va decide daca este nevoie de Scroll Bar. Aceasta
valoare este cea mai indicata

NORESIZE
- Opţional - Împiedica utilizatorul sa modifice mărimea cadrului, prin
selectarea marginii acestuia si mutarea in stânga sau dreapta sau sus sau jos
-Mai jos puteţi vedea cum poate fi creata o pagina HTML care sa contina
doua cadre, cel din stânga ocupând 23% din spaţiul paginii iar cel din dreapta 77%
<HTML>
<HEAD>
<TITLE> TITLU PAGINII </TITLE>
</HEAD>
<FRAMESET COLS=”23%,27%”>
<FRAME SRC=”doc1.htm” NAME=”left” SROLLING=”NO”>
<FRAME SRC=”doc2.htm” NAME=”right” SROLLING=”YES”>
</FRAMESET>
<BODY>
</BODY>
</HTML>
- De asemenea se poate crea un design de cadre cu o combinatie de linii si
coloane.
 In acest caz, un al doilea ele\ment <FRAMESET> va fi scris in locul
elementului <FRAME> care descrie a doua linie. Al doilea element
<FRAMESET> va dsivide spatiul ramas in doua coloane. Pentru aceasta, al doilea
element <FRAMESET> trebuie yrmat de inca doua elemente <FRAME>
- Pentru o mai buna intelegere puteti studia exemplu de mai jos, care creaza
o pagina ce contine trei cadre :
<HTML>
<HEAD>
<TITLE> TITLU PAGINII </TITLE>
</HEAD>
<FRAMESET COLS=”120,*”>
<FRAME SRC=”baner.htm”>
<FRAMESET COLS=”120,*”>
<FRAME SRC=”Meniu.htm” NAME=”meniu”>
<FRAME SRC=”Continut.htm” NAME=”date”>
</FRAMESET>
</FRAMESET>
<BODY>
</BODY>
</HTML>
Target:
- când sunt create link-uri pentru a fi folosite in cadre, este nevoie de
specificarea unui atribut numit TARGET
-Atributul TARGET foloseste atributul NAME al elementului FRAME .
- De exemplu:
- Daca avem un link in Meniu.htm care vrem sa deschidă pagina Doc3.htm
in spaţiul in care se afla celalat cadru, de exemplu Continut.htm ; codul HTML va
arata asa in Meniu.htm:
<A HREF=”Doc3.htm” TARGET=”numele cadrului Continut.htm”>
Numele link-ului </A>
- daca nu se specifica atributul TARGET , pagina se va deschide in cadrul
curent
 - atributul TARGET trebuie sa aibă acelasi nume specificat in codul HTML,
la atributul FRAME de la cadrul Continut.htm.
Special Target:
- sunt 4 nume speciale de TARGET, care nu pot fi asociate cu atributul
NAME. Fiecare are o funcţie speciala.
-TARGET=”_top”
- acesta va încărca link-ul in toata fereastra browser-ului, dispărând astfel
cadrele
- TARGET=”_blank”
- acesta va încărca link-ul intr-o noua fereastra de browser, astfel ramanand
deschisa si vechea fereastra.
-TARGET=”_self”
- acesta va încărca link-ul in aceeasi fereastra de bunde a fost deschis
- TARGET=”_parent”
- cadrul „_parent” este cadrul anterior de la care a fost deschis noul cadru,
daca acesta nu exista atunci link-ul se va deschide in actuala fereastra de browser.

Formulare

Forms (Formulare):
-Pentru a introduce FORMS se foloseşte elementul <FORM>…</FORM>
- elementul <FORM>…</FORM> nu conţine atribute pentru format
- Restul elementelor Forms trebuie scrise in interiorul elementului
<FORM>…</FORM>
Atributele elementului <FORM>…</FORM>
ACTION - aici se scrie adresa de URL al CGI (Common Gateway
Interface) , program care trebuie sa accepte datele din FORM , le procesează si
trimite înapoi raspunsul la browser.
METHOD - aici putem scrie GET (standard) , sau POST specificând care
metoda HTTP va fi folosita pentru a trimite conţinutul FORMS la server. Aplicaţia
CGI trebuie scrisa astfel incot sa accepte ambele metode.
ENCTYPE - determina mecanismul folosit pentru a codifica conţinutul din
FORMS
 NAME - Este numele formularului folosit de VB (Visula Basic) sau JAVA
Sript
TARGET- Este ţinta cadrului unde pagina va fi vizualizata
Restul elementelor FORM sunt folosite pentru a crea formulare in browser si
a aduna datele care vor fi trimise la aplicaţie
Elementele FORM:
- proprietăţile acestor elemente sunt specificate in atributul TYPE al
elementului HTML, <INPUT>…</INPUT>
- Proprietăţile elementului <INPUT>…</INPUT>:
TYPE - tipul de FORM folosit
NAME- numele variabilei care va fi transferat la aplicaţia CGI
VALUE- data asociata cu numele variabilei care va fi transferat la aplicaţia
CGI
CHECKED - Specifica daca un buton sau alta forma va fi bifata
SIZE- specifica numărul de caractere in zona de text
MAXLENGTH – numărul maxim de caractere acceptate
Elementele FORM:
Text boxes
-este folosit pentru a crea in pagina un câmp pentru text, si alte date cum ar
fi : nr. de telefon, data zilei, etc.
-Codul este : <INPUT TYPE=”TEXT” ></INPUT>
In browser va apărea :
-Acest element foloseşte următoarele atribute:
TYPE- text
NAME numele variabilei care va fi transferat la aplicaţia CGI
VALUE- va prezenta propriul context ca valoarea aleasa
SIZE- specifica mărimea, in numărul de caractere. Standard este 20
MAXSIZE- numărul maxim de caractere acceptate
Password
- folosit pentru a permite folosirea unei parole
- Codul este : <INPUT TYPE=”PASSWORD” ></INPUT>
 In browser va apărea :
- Acest element foloseşte următoarele atribute:
TYPE- password
NAME- numele variabilei care va fi transferat la aplicaţia CGI
VALUE- este de obicei nescrisa
SIZE- specifica mărimea, in numărul de caractere. Standard este 20
MAXSIZE - numărul maxim de caractere acceptate
Hidden
- folosit pentru a trimite date la aplicaţia CGI care nu vrei sa fie văzute sau
schimbate de utilizator
-Codul este : <INPUT TYPE=”HIDDEN” ></INPUT>
In browser nu va apărea nimic
-Acest element foloseşte următoarele atribute:
TYPE- hidden
NAME- numele variabilei care va fi transferat la aplicaţia CGI
VALUE- este de obicei setat la valoarea acceptata de aplicaţia CGI
Check Box
-permite utilizatorului sa aleagă mai mult de o opţiune
-Codul este : <INPUT TYPE=”CHECKBOX” ></INPUT>
In browser va apărea :
- Acest element foloseşte următoarele atribute:
TYPE - checkbox
CHECKED- este nescris sau CHECKED
NAME - numele variabilei care va fi transferat la aplicaţia CGI
VALUE- este de obicei setat la o valoare
Radio button
- permite utilizatorului sa aleagă numai de o opţiune
- Codul este : <INPUT TYPE=”RADIO” ></INPUT>
In browser va apărea :
-Acest element foloseşte următoarele atribute:
 TYPE - radio
CHECKED - este nescris sau CHECKED
NAME - numele variabilei care va fi transferat la aplicaţia CGI
VALUE- este de obicei setat la o valoare
File Upload
- folosit pentru a permite utilizatorului verifice (caute) alte documente pe
serverul web
- Codul este : <INPUT TYPE=”FILE” ></INPUT>
In browser va apărea
- Acest element foloseşte următoarele atribute:
TYPE- file
NAME - numele variabilei care va fi transferat la aplicaţia CGI
SIZE - specifica mărimea, in numărul de caractere.
MAXSIZE- numărul maxim de caractere acceptate
Push button
- acesta este folosit cu Java Script sau VBScript pentru a efectua o acţiune
când este apăsat
- Codul este : <INPUT TYPE=”BUTTON” ></INPUT>
In browser va apărea : -
- Acest element foloseşte următoarele attribute
- TYPE - button
NAME - numele butonului folosit in script
VALUE- textul care va apărea pe buton
Submit
-acest element face ca browser-ul sa trimită numele si valoarea altor
elemente la aplicaţia CGI
-Codul este : <INPUT TYPE=”SUBMIT” ></INPUT>
ORICE
In browser va apărea :
- Acest element foloseşte următoarele atributeTYPE - submit
NAME- valoarea folosita de sciptul CGI pentru procesare
VALUE - textul care va apărea pe buton
 Image submit button
- permite sa aplici o imagine in locul butonului standard
- Codul este : <INPUT TYPE=”IMAGE” SRC=”URL” ></INPUT>
-Acest element foloseşte următoarele atribute:
TYPE- image
NAME- numele butonului folosit in script
SRC - locaţia imaginii folosite
Reset
-permite utilizatorului sa şteargă toate datele pe care le-a scris in celelalte
elemente FORM
- Codul este : <INPUT TYPE=”RESET” ></INPUT>
Reset
In browser va apărea :
- Acest element foloseşte următoarele atribute:
- TYPE- reset
VALUE - textul care va apărea pe buton, de obicei este „Reset”
Alte elemente folosite in FORM:
Text area <TEXTAREA></TEXTAREA>
- este un element ce creaza un camp in pagina, in care utilizatorul poate
adauga text

In browser va aparea :
-Acest element foloseşte următoarele atribute:
NAME- numele variabilei care va fi transferat la aplicaţia CGI
ROWS - numărul de linii al zonei de text
COLS - numărul de coloane al zonei de text
WRAP- standard este OFF. Dar poate avea valorile : ”VIRTUAL” sau
”PHYSICAL”, astfel ca textul wraps (ascuns) in browser sa fie prezentat exact
cum este scris de utilizator
Select <SELECT></SELECT>
 - sunt doua tipuri de elemente <SELECT></SELECT>, unde atributele
SIZE sunt setate diferit.
- Atributele elementului <SELECT></SELECT> sunt:
NAME- numele variabilei care va fi transferat la aplicaţia CGI
SIZE- setează numărul de alegeri vizibile
MULTIPLE - prezenta acestui atribut semnifica faptul ca utilizatorul poate
face mai multe selecţii
-Cele doua tipuri de elemente <SELECT></SELECT> sunt:
Drop Down List
Elemente
- in browser apare :
- foloseşte următoarele atribute :
NAME- numele variabilei care va fi transferat la aplicaţia CGI
SIZE - 1
List Box
Elemente

- in browser apare :
- foloseşte următoarele atribute :
NAME - numele variabilei care va fi transferat la aplicaţia CGI
SIZE - e mai mare decât unu
Option
- acesta prezinta lista elementelor adaugate in <SELECT><//SELECT>,
adaugand in interiorul acestui element elemental <OPTION></OPTION>
- foloseste urmatoarele attribute:
SELECTED- când acest atribut este prezent, opţiunea este selectata când
documentul este iniţial incarcat. Este o eroare pentru mai mult de o opţiune
selectata
VALUE- specifica valoarea variabilei numita in element.
-Mai jos puteti vedea cum este introdus intr-o pagina web acest element
<HTML>
<HEAD>
<TITLE>Titlul Documentului</TITLE>
 </HEAD>
<BODY>
<FORM>
<SELECT SIZE=”1”>
<OPTION VALUE=”1” SELECTED=”SELECTAT”> Elementul 1
</OPTION>
<OPTION VALUE=”2”> Elementul 2 </OPTION>
</SELECT>
</FORM>
</BODY>
</HTML>
Elementu 1
In browser va aparea :
Despre aplicaţia CGI (Common Gateway Interface):
- Când utilizatorul apăsa pe SUBMIT, browserul va trimite datele din
FORM la aceasta aplicaţie/ program care va trimite răspunsul la utilizator
- Aceasta aplicaţie/program poate fi scrisa in orice limbaj, cum ar fi Java
Script , VB Script sau C++ , dar cel mai popular este PEARL