studiul limbajului html si a structurii publicatiilor web

8/14/2019 Studiul Limbajului HTML Si a Structurii Publicatiilor Web

1/16

Indrumar de laborator Anul I Text preliminar

73

Aplicaia 7

Studiul limbajului HTML i a structurii publicaiilor WEB

6.1. Scopul lucrrii.

Studenii vor nva cum s-i creeze o pagin Web folosind limbajulHTML i vor studia n detaliu structura unui document HTML.

6.2. WWW World Wide Web

WWW World Wide Web (pnz de piajen cu sensul de reea extinsn lumea larg) este o colecie imens de documente interconectate prin intermediulInternetului.

WEB-ul asigur o interfa hypermedia pentru informaii.Hypermedia reprezint variantele tipuri de informaie (text, imagini,

fiierele audio i video) care pot fi localizate oriunde pe glob, mpreun culegturile dintre ele. Pentru a transmite i afia informaile hypermedia, WEB-ulfolosete un protocol de transfer (set de reguli) care este numit HTTP (HypertextTransfer Protocol protocol de transmitere a hypertextului).

Internetul este un ansamblu alctuit dintr-un numr enorm de reele decomputere interconectate, localizate pe toat suprafaa globului, care suportdiverse pachete software: e-mailul, grupuri de tiri (newgroup), protocoale detransfer al fiierelor FTP, Gopher i World Wide Web.

Pentru a fi posibil o astfel de performan, fiecare computer conectat lainternet trebuie s fie identificat n mod unic printr-o adres IP (InternetProtocol). Adresa IP este format din patru numere, fiecare mai mic de 255,desprite ntre ele prin punct. Fiecrei adrese IP i se asociaz un nume unic deidentificare al computerului.

Internetul conecteaz dou tipuri de computere: serverele carefurnizeaz documentele i clienii care soliciti afieaz documentele pentru a fivizualizate de utilizator. Pentru a accesa i afia documentele HTML pecomputerul client ruleaz aplicaii numite browsere.

Browserul transmite serverului detalii despre el i despre fiierul pe care ldorete prin intermediul unui header HTTP de cerere. Headerul este acea parte aunui pachet de date care este plasat naintea informaiilor transmise i care poateconine adresa sursei i a destinaiei, el verific erorile i alte cmpurile.

Serverul primete i analizeaz headerele HTTP de cerere n cutareainformaiilor relevante (cum ar fi numele fiierului care este solicitat) i transmitenapoi fiierul cerut mpreun cu headerele HTTP de rspuns.


2/16


74

6.3. Studiul limbajului HTML.

HTML (Hyper Text Markup Language) reprezit scheletul oricreipagini WEB, adic este un limbaj descriptive, prin care sunt descriese elementele

structurale ale paginii WEB: titlurile, listele, tabelele, paragrafele, legturile cu

alte pagini, precum i aspectul pe care l are pagina din punct de vedere grafic.

HTML este modul n care i comunicm browserului (Internet Explorer)ce elemente dorim s introducem n pagina WEB i care este aspectul acestora,deci HTML este un limbaj standardizat.

Browserele nu au nevoie de conexiune la Internet ca s funcioneze. Se

poate ncrca i afia cu ajutorul browserului documenteHTML care sunt stocatepe propiul hard-disk, dnd posibilitatea de a definitiva i testa documenteleHTML

nainte de a le publica pe internet.

6.3.1. Modul de lucru

Se creaz n calculator un folder (director) numit STUDENT. Se deschide editorul de text Notepad n care urmeaz a se introducetextul

StartProgramsAccesoriesNotepad Se salveaz fiierul creat cu extensia *.html sau *.htm

FileSave se deschide o fereastrSave As unde se d numele fiierului Pentru vizualizarea fisierelor HTML create deja se deschide Internet

Explorer, iar din meniul su se deschide fereastra FileOpenBrowsesealege numele fisierului doritOpense deschide pagina Web pentru a vedeacum arat.

Dup fiecare modificare fcut n fiierul HTML se face salvareafiierului pentru ca schimbrile fcute s apar n aspectul final al paginii Web.

Pentru a se observa cum modificrile fcute n fiierul HTML schimbaspectul paginii, trebuie apsat butonul Refresh/Reload al browserului.

Pentru a vizualiza cu uurin aspectul paginii Web este bine s fiedeschis permanent att editorul de text n care se scrie documentul HTML, ct ibrowserul cu care se face vizualizarwea.

6.3.2. Structura unui document HTML

Documentul HTML este un fiier text, care pe lng textul propriu-zis ceva aprea n pagin, conine i o serie de elemente speciale denumite etichete, saumarcaje (tags). Aceste elementele, de tip multimedia, care nsoesc documentulHTML, cum sunt sunetul, imaginile video, grafica etc, nu fac parte din structuraacestuia. Documentul HTML include referine la aceste elemente, prin intermediulunor etichete speciale, care indic browserului modul n care ele vor fi ncrcate iintegrate n pagina Web.

EticheteleHTML sunt de dou tipuri:


3/16


75

Etichete container (container tags) sunt de forma:bloc de textunde: - marcheaznceputul unui bloc

- marcheazsfritul bloculuiEtichetele specific formatul n care va fi afiat textul coninut ntre

eticheta de nceput i cea de final. Etichetevide (empty tags) au forma:

Acest tip de etichete nu se refer la formatul textelor, ci la introducerea

anumitor elemente: paragrafe, sfrit de linie, linii orizontale etc. Ele dau indicaiibrowserului despre ce element este vorba i despre cum s afieze acel element.

Etichetele vide nu au etichet de nchidere.

Structura unui document HTML este urmtoarea:

.

Documentul HTML este delimitat de etichetele i comunic browserului unde ncepe i unde se termin documentul. Un documentHTML conine dou seciuni:

Antetul (head) - conine titlul documentului precum i alte informaiiprivind documentul. n antetul documentului se mai insereazi anumite secvenede program (script-uri), care se execut la ncrcarea documentului n browser.Antetul este delimitat de etichetele ... Aceste elemente,numite metatag-uri, sunt deosebit de importante pentru ca pagina s fie ct maibine cotat de ctre motoarele de cutare.

Metatag-urilei antetul n ansamblul su nu sunt vizibile pentru vizitatorn pagina Web. Antetul, la fel ca ntregul cod HTML al paginii, poate fi vizualizatselectnd din meniul browserului opiunea ViewSource.

Titlul documentului se stabilete astfel i estedeosbit de important deoarece este unul din criteriile folosite de motoarele decutare prin indexarea paginii. Eticheta de mai sus nu stabilete titlul care apare ncadrul paginii, ci pe acela care apare n bara de titlu a browserului.

Corpul documentului (body) conine descrierea textului (aspectul)i elementele paginii (coninutul paginii Web), fiind delimitat de etichetele. Elementele coninute n aceast seciune sunt vizibile.


4/16


76

EXEMPLUL I

Pagina mea

Am reuit sscriu prima mea paginde Web.

Urmtoarea paginva fi cu mult mai bun.

Se deschide Notepad (StartProgramsAccesoriesNotepad) unde seintroduce codul HTML. Dup introducerea textului documentul HTML se

salveaz cu numele primapagina.html astfel FileSave se deschide ofereastrSave As unde se d numele fiierului primapagina.html.

Se deschide Internet Explorer, din meniul su se deschide fereastraFileOpenBrowsese alege primapagina.htmlOpense deschide paginaWeb pentru a vedea cum arat.

Pentru a scrie un text pe mai multe linii n pagin se folosete eticheta
(line break), care face trecerea pe o linie nou. Eticheta
este de tipempty, deci nu are etichet de nchidere.


5/16


77

EXEMPLUL II

Pagina mea


Se face modificarea n documentul HTML.

Pentru a se observa cum modificarea fcut n fiierul HTML schimbaspectul paginii, trebuie apsat butonul Refresh/Reload al browserului InternetExplorer.

n realitate structura documentelor HTML este mult mai complexi deaceea este recomandat s se faci mici comentarii n text. Comentariile nu suntvizibile pentru browser, ci au doar rolul de a face aceast structur ct maiexplicit.

Comentariile se introduce prin includerea textului ntre etichetele .

EXEMPLUL III

Pagina mea


6/16


78




7/16


79

6.4. Legturi (Link-uri)

6.4.1. Legturile (links) sunt partea cea mai important a paginii WEB.Ele transform un text obinuit n hypertext un nou tip de text. Acest text estediferit de textul din clasicele pagini de carte, care permite trecerea rapid de la oinformaie aflat pe un anumit computer la alt informaie memorat pe un altcomputer localizat oriunde n lume.

Pentru a insera o legtur ntr-un document HTML se folosete eticheta

container n care poate fi plasat un text obinuit sau o imagine.Atributul obligatoriu al etichetei este href(Hypertext Reference) care

primete ca valoare adresa URL a fiierului (document HTML, o imagine, fiier dealt tip) cu care se dorete s se stabileasc legtura. Documentul HTML n care segsete legtura se numete surs, iar fiierul ctre care este fcut legtura senumete int.

Sintaxa etichetei container este urmtoarea: Text sau imagine

6.4.2. Adresa URLPentru a stabili o legtur cu o alt pagin trebuie s specificat adresa

URL (Uniform Resourse Locator) reprezint adresa de identificare a uneiresurse aflat pe calculatorul propriu sau pe orice alt calculator din lume conectat la

Internet.Sintaxa general a unei adrese URL este urmtoarea:

schema://server_gazda:port/calea_catre_fisierunde:


8/16


80

- schema reprezint unul din protocoalele de transfer al informaiilor,cum ar fi HTTP, FTP, Gopher, Telnet etc.- server_gazda reprezint identificatorul serverului pe care este gzduitfiierul respectiv. Acest identificator poate fi adresa IP a serverului sau numele su.

- Port reprezint numrul portului de comunicaie prin intermediulcruia browserul se conecteaz la server. Serverele dein mai multe astfel deporturi, fiecare servind unui alt tip de comunicaie: HTTP, FTP, pot electronic,etc. Portul prestabilit n cazul transferului prin HTTP are numrul 80. Acest numrtrebuie precizat numai n cazul cnd acesta este diferit de 80.

- calea_catre_fisier reprezint localizarea ierarhic a fiierului nsistemul de directoare de pe server. Acesta const ntr-unul sau mai multe numedesprite prin caracterul "/" (splash).

Exemple de adrese URL i explicaii referitoare la sintaxa lor

Exemplu 1: http://www.autor.com/carti.htmlExplicaie: Adresa URL indic documentul HTML numit carti.html care

se afl n directorul rdcin al serverului www.autor.com.Exemplu 2: http://www.autor.com/carti.html#webdesignExplicaie: Adresa URL indic calea spre documentul HTML numit

carti.html care se afl n directorul rdcin al serverului www.autor.com, darspecific i o anumit seciune a acestui document seciune denumitwebdesign.

Exemplu 3: http://www.autor.com/Explicaie: Adresa URL indic prima pagin ( home page) a aceluiai

server.Exemplu 4: http://www.autor.com:8080/Explicaie: Adresa URL indic prima pagin a serverului

www.autor.com, specificnd i numrul portului care este diferit de cel prestabilit.

Cnd fiierul spre care este fcut legtura este stocat pe propriulcalculator se folosete adresa URL de forma: file://server/calea_catre_fisierunde: - server reprezint numele computerului pe care este stocat fiierul(acelai pe care ruleaz browserul). n acest caz, browserul va accesa fiierulfolosind facilitile obinuite ale sistemului de operare de pe computerul propriu.

- calea_catre_fisier reprezint localizarea fiierului n structura dedirectoare conform regulilor sistemului de operare.

Numele computerului personal poate fi nlocuit cu numele genericlocalhost.

file://localhost/calea_catre_fisier

Exemplu 5: Fiierul culori.html care este salvat n folderul aplicatie dinfolderul student pe computerul personal are urmtoarea adres

file://localhost/C:\student\aplicatie\culori.html


9/16


81

Explicaie: Termenul localhost poate fi omis i nlocuit cu / pentru c

este numele prestabilit al computerului propriu. n acest caz adresa URL esteurmtoarea: file:///C:\student\aplicatie\culori.htmlFiierele stocate pe servere externe, numele directoarelor care fac parte

din calea ctre resurs sunt desprite de caracterul / (slash).Fisierele stocate pe computerul propriu, directoare i subdirectoare care

formeaz calea ctre fiier sunt desprite de caracterul \ (backslash).Aceste moduri de scriere sunt specifice celor dou sisteme de operare:

UNIX, respective DOS-Windows.

6.4.3. Stabilirea legturilor ntr-o pagin WEBn modul prestabilit, textul inclus ntre etichetele este afiat

subliniat i de culoare albastr, iar imaginile au un chenar de culoare albastr.Folosirea etichetei imbricat cu etichete de formatare a textului,

fonturi, liste sau tabele se face plasnd etichetele n interiorulacestora astfel:

Legtura (Link-uri)

Duplocalizarea intei legturile se pot clasifica astfel:- legturi n cadrul aceleiai pagini (ancore);- legturi ctre o pagin aflat n acelai folder;- legturi ctre o pagin aflat n alt folder;- legturi ctre pagini externe.6.4.4. Ancore-legturi ncadrul aceleiai paginiAncorele sunt punctele de refer ctre care se definesc legturi pentru a

facilita navigarea ntr-o pagin care conine un text de mari dimensiuni.Plasarea unei ancore sunt necesare dou elemente:a. Punctul spre care se face legtura se definete insernd n punctul din

pagin dorit de obicei n dreptul unui anumit element din pagin: un titlu, oimagine, o alt legtur, un tabel etc. eticheta , nsoit de atributul namecare primete ca valoare un nume de identificare atribuit ancorei, astfel:

Text sau imagine b. Legtura propriu-zis se definete folosind atributul href al etichetei

care primete ca valoare "#nume_ancora", astfel: Textul explicativ va fi afiat n mod diferit, n

format hyperlink, subliniat i de culoare prestabilit albastr Semnul # plasat naintea numelui ancorei este obligatoriu, deoarece el

indic browserului faptul c este vorba despre o legtur intern, n cadrul paginii.Introducerea unei legturi ctre o ancor definit n alt document aflat n

acelai director, atributul href primete valoarea"nume_fisier.html#nume_ancora", astfel:

Text sau imagine


10/16


11/16


83

Link-uri 2

PAGINA 1 Link ctre pagina 2

Se salveaz acest document HTML cu numele legturi2.html, iardocumentul HTML urmtor se salveaz cu numele legturi3.html.

APLICAIA IIISe realizeaz o legtur reciproc ntre dou pagini aflate n folderul delucruaplicatia.

Link-uri 3

PAGINA 2 Link ctre pagina 1

Ambele documente HTML sunt salvate n acelai folder. Se observ catunci cnd este activ Pagina 1 i se d click cu mouse-ul pe textul Link ctre


12/16


84

Pagina 2 se va deschide al doilea document HTML i invers. Legtura dintre cele

dou pagini este reciproc.

6.4.6. Legturi ctre o pagin aflat n alt folder (director)Dac pagina cu care se dorete s se fac legtura este pe acelai

calculator, dar ntr-un alt folder, atunci pentru a preciza pozi ia ei n structura dedirectoare se poate folosi adresa relativsau adresa absolut.

Adresa absolut a unui fiier conine calea (path) precisi complet ctrefiierul respectiv pornind de la vrful ierarhiei de directoare:

C:/Manual HTML/Exemple/culori.htmlFiierul culori.html se afl plasat pe discul C:. n directorul Manual

HTML, subdirectorul Exemple. Link la text

Adresa relativ a unui fiier precizeaz calea ctre documentul cu care se

face legtur apelnd la documentul HTML din care s-a plecat. Pentru a urca unnivel n structura de directoare se folosete irul de caractere . . / (punct punctslash). Dac fiierul culori.html se afl cu dou nivele mai sus fa de folderul cucare se lucreaz, adresa se face astfel:

Link la text

6.4.7. Legturi ctre pagini externeLegtura ctre o pagin extern se realizeaz cu ajutorul etichetei

,n care se specificadresa URL apaginii ca valoare a atributului href, avndsintaxa:

Text sau imagine Pentru ca link-ul s funcioneze, trebuie ca utilizatorul s fie conectat la

Internet lucru valabil pentru toate legturile externe.

APLICAIA IVSe realizeaz o legtur ctre pagina destart Yahoo.com, astfel:

Link-uri 4

Link ctre Yahoo.com Yahoo!

Title este atributul util al etichetei determinnd apariia unei miciferestre (tool tip) fereastr n care este afiat valoarea dat acestui atribut title =


13/16


85

"Lagatura catre Google.com" - n pagina WEB cnd mouse-ul se afl pe o legtur

furniznd informaii suplimentare despre semnificaia legturii.APLICAIA V

Se realizeaz o legtur ctre pagina de start Google.com folosind atributultitle, astfel:

Link-uri 5

Link ctre Google.com folosint atributul

title Google !

6.4.8. Setarea culorilor pentru legturiLegturile (links) dintr-o pagin Web au culori prestabilite (default),

astfel: blue (albastru) pentru legturi red (rou) pentru legtura activ, cea pe care este fixat cursorul

mouse-ului, cu butonul stng apsat purple (violet) pentru legturi vizitate, cele pe care s-a efectuat

cel puin un click.

Pentru a schimba culorile prestabilite se folosesc urmtoarele atribute aleetichetei : link pentru legturi alink pentru legturi active vlink pentru legturi vizitate

conform sintaxei:

EXEMPLUL VISe creeaz o pagin n care textul este negru, iar legturile au culoarea verde,legturile active au culoarea albastru i cele vizitate au culoarea rou

Link-uri 6


14/16


15/16


87

APLICAIA VIIICnd vizitatorul paginii d click pe link se deschide caseta de dialog Filedownloadcare permite salvarea fiierului pe disc sau deschiderea fiierului nlocaia curent.

Link-uri 8

Legturi ctre fiiere oarecare

Link ctre fiierul download.zip

6.4.11. Deschiderea paginilor referite printr-o legturPagina apelat printr-o legtur se deschide n raport cu pagina surs n

dou moduri: n aceeai fereastr cu pagina surs - unde atributului target primete

valoarea "_self": text explicativ ntr-o fereastr nou - unde atributul target i-a valoarea "_blank": text explicativ

APLICAIA IX

Se realizeaz un document HTML, n care legtura s se deschid n aceeaifereastr sau ntr-o fereastr nou.

Link-uri 10

Deschiderea paginii n alte ferestre

Pagina de mai jos se va deschide ntr-o fereastr nou

CulorilePagina de mai jos se va deschide n aceeai fereastr

Fonturile


16/16


88

6.4.12. Crearea unei bare secundare de navigare

Bara secundar de navigare este un bloc de text care conine legturi ctrepaginile care compun site-ul, uurnd astfel navigarea pe site cnd dimensiuneapaginii depete un ecran.

Legturile sunt delimitate de linii verticale, astfel:|Culori| |Fonturi| |Blocuri de text|

APLICAIA XRealizarea unei bare secundare de navigare.

Link-uri 10

Bara de navigare |Culori| |Fonturi| |Blocuri de text|

6.5. Desfurarea lucrrii

6.5.1. Se creaz o pagin Web folosind limbajul HTML.

6.5.2. Se introduc comentarii n text.6.5.3. Se introduc n cadrul unei pagini Web urmtoarele legturi:- legturi interne sau ancore, care sunt legturi n cadrul aceleiai pagini;- legturi cu pagini aflate n acelai director;- legturi cu pagini aflate n alt director;- legturi externe.6.5.4. Se utilizeaz comanda mailto: care lanseaz automat n execuie

aplicaia de pot electronic a vizitatorului paginii.

studiul limbajului html si a structurii publicatiilor web

Documents