+ All Categories
Home > Documents > Axinte Bogdan-Cristian.doc

Axinte Bogdan-Cristian.doc

Date post: 10-Jan-2016
Category:
Upload: bisii-oanaa
View: 237 times
Download: 0 times
Share this document with a friend

of 40

Transcript

Liceul de Stiinte ale Naturii "Grigore Antipa" botosani

LICEUL L.T. Grigore Antipa BOTOANI Specializarea: matematic informaticLUCRARE DE ATESTAT PROFESIONAL

Prof. ndrumtor: Elev:

Bruma Camelia Axinte Bogdan-CristianMai 2015Automobilul de-a lungul timpuluiPREZENTARE WEB

MEDIUL DE PROGRAMARE:Limbajul HTML

CUPRINS

Memoriu Justificativ...................................................................................4Ce este HTML?..............................................................................................5Seciunile unui document HTML...........................................................5Culori..............................................................................................................6Fonturi..........................................................................................................10Blocuri de text............................................................................................11Legturi(Link-uri)....................................................................................13Imagini.........................................................................................................15Tabele...........................................................................................................17Stiluri............................................................................................................20Prezentarea proiectului.........................................................................23Codul Surs.................................................................................................27Hrta site.......................................................................................................31Bibliografie.................................................................................................32Memoriu justificativ

nc de mic am fost impresionat de ceea ce reprezint un automobil. Automobilul este ceva fascinant ce uureaz traiul ficruia. nc din cele mai vechi timpuri oamenii au cutat soluii n ceea ce privete transportul. Odat cu apariia automobilului lumea parc s-a micorat, distane care necesitau mult timp i efort acum sunt parcurse foarte repede. Am ncercat prin aceast lucrare de atestat s combin pasiune mea pentru automobile cu o alt pasiune, aceea pentru web design.

n acelai timp am ncercat s readuc la via trecutul unor mari inventatori ce au facut trecerea ntre dou dimensiuni temporale lasnd n urma lor ceva incredibil.Ce este HTML?

HTML este o abreviere de la Hypertext Markup Language i reprezint scheletul oricrei pagini de Web. HTML nu este un limbaj de programare. Nu vei lucra aici cu variabile, expresii, tipuri de date, structuri de control. HTML este un limbaj descriptiv, prin care sunt descrise elementele structurale ale paginii de Web: titlurile, listele, tabelele, paragrafele, legturile cu alte pagini, precum i aspectul pe care l are pagina din punct de vedere grafic. n fond, HTML este modul n care i comunicam browserului ce elemente dorim s introducem n pagina Web i care este aspectul acestora.Sectiunile unui document HTML

Un document HTML este ncadrat de containerul HTML cu sintaxa:

[Documentul HTML]

unde documentul HTML reprezint un ntreg document. Tagul trebuie s fie primul tag din document iar tagul de sfrsit trebuie s fie ultimul tag din document.

Un document HTML contine dou sectiuni. Prima este ntotdeauna sectiunea HEAD n timp ce pentru a doua sectiune structura este diferit dup forma pe care o are pagina web construit: poate fi sectiunea BODY (caracteristic documentelor afisate ntr-o singur fereastr) sau poate fi FRAMESET (caracteristic documentelor afisate ntr-o structur complex de ferestre).

Seciunea HEAD este continut n containerul

marcaje specifice pentru HEAD

Marcajele din aceast sectiune au doar rolul s descrie documentul curent pentru programe (cum ar fi browsere), pentru alte documente HTML sau pentru documentare. Informatiile prezentate n aceast sectiune nu vor fi vizibile n pagina afisat de browser, cu exceptia titlului ce va apare pe linia titlu a browserului

Sectiunea BODY este determinat de containerul

continut document

si contine, practic, tot ceea ce este vizibil pentru un vizitator al paginii create.Culori

Culoarea reprezint o caracteristic extrem de important a unei pagini Web. Utilizat cu grij i msur, ea poate mbunti substanial aspectul paginii, fcnd-o mai lizibil i mai atractiv, iar textul mai uor de parcurs.Pe de alt parte, utilizarea excesiv sau inadecvat a culorilor poate transforma un text de calitate ntr-un fel de caleidoscop obositor, greu de urmrit, i care i va determina pe muli vizitatori s renune la a-l mai parcurge.Datorit faptului c ea reprezint un atribut al multor elemente ale documentelor Web (text, fundaluri, margini, link-uri), am optat pentru prezentarea detaliat a modului de utilizare al culorilor nc din aceast etap a lucrrii noastre.Sistemul de definire a culorilorSistemul general utilizat pentru definirea culorilor este RGB prin care sunt specificate pentru fiecare culoare care sunt cantitile de rou (Red), verde (Green) i albastru (Blue) care o compun.n HTML orice culoare este desemnat printr-un cod de 6 cifre hexazecimale, dintre care primele dou reprezint cantitatea de rou, cele dou din mijloc, cantitatea de verde, iar ultimele dou cantitatea de albastru.Sistemul hexazecimal este un sistem de numeraie care folosete 16 cifre, existnd urmtoarea coresponden ntre cifrele hexazecimale i cele zecimale:0123456789101112131415

0123456789ABCDEF

De exemplu, #FF0000 este codul pentru rou. Semnificaia acestui cod este urmtoarea: cantitatea de rou este maxim, iar cantitile de verde i albastru sunt egale cu 0. Codul pentru verde pur este #00FF00 iar pentru albastru este #0000FF. Deoarece uneori definirea culorii prin intermediul codului su hexazecimal este incomod, standardul HTML 3.2 stabilete un set de 16 culori standard.n acest caz, pentru valoarea atributului de culoare se utilizeaz direct numele culorii, ca n exemplul de mai jos, n care se seteaz culoarea magenta pentru linkurile vizitate:

Numele i codul culorilor stabilite n standardul HTML3.2 sunt urmtoarele:Nume culoareCod hexazecimal

aqua#00FFFF

black#000000

blue#0000FF

fuchsia#FF00FF

gray#808080

green#008000

lime#00FF00

maroon#800000

navy#000080

olive#808000

purple#800080

red#FF0000

silver#C0C0C0

teal#008080

yellow#FFFF00

white#FFFFFF

Corespondena dintre codurile hexazecimal i zecimalMulte dintre editoarele grafice folosesc pentru a defini culorile codul zecimal. Dei se bazeaz i ele pe acelai sistem RGB de definire a culorilor, numerele care stabilesc cantitile celor trei culori sunt specificate n sistemul zecimal.63(16)=99(10) , FF(16)=255(10), 80(16)=128(10)Motivul pentru care trebuie s cunoatei aceast coresponden este acela c pentru a folosi n documentul HTML o culoare al crei cod este dat n sistemul zecimal, aceasta trebuie convertit n cod hexazecimal.Conversia se poate realiza foarte simplu folosind calculatorul din Windows (Start > Accessories > Calculator) care trebuie setat pe opiunea Scientific din meniul View. Vei observa o serie de butoane radio dintre care ne intereseaz dou: Hex i Dec. Nu avei altceva de fcut dect s selectai Dec, s tastai numrul n baza 10 i apoi s selectai opiunea Hex. Rezultatul conversiei va aprea pe ecran. Conversia invers se realizeaz n mod similar.i acum s trecem la lucruri mai atractive i s dm via paginii noastre adugndu-i culori. Vom lua pe rnd atributele etichetei . Cu ajutorul lor se pot seta culorile fundalului, textului i linkurilor:bgcolor - culoarea fundalului text - culoarea textului link - culoarea linkurilorvlink - culoarea linkurilor vizitatealink - culoarea linkului activCuloarea fundaluluiPentru a stabili culoarea fundalului unei pagini folosim atributul bgcolor (background color) al etichetei , cruia i atribuim o valoare astfel: Se poate folosi drept valoare pentru atributul bgcolor fie codul hexazecimal al culorii fie numele ei. Iat un exemplu de pagin cu fundal verde:Culoarea textuluiPentru a seta culoarea textului din ntreaga pagin se folosete atributul text al etichetei , conform sintaxei: Dac am stabilit o culoare pentru textul din pagin i dorim s utilizm o alt culoare pentru o anumit seciune a textului (culoarea unui bloc de text), vom folosi o etichet despre care vom vorbi pe larg n capitolul urmtor: eticheta . Aceasta este o etichet container care cuprinde ntre etichetele de nceput i de final textul a crui culoare dorim s o modificm. Stabilirea culorii se face folosind atributul color al etichetei conform sintaxei:Text

Culoarea legturilorn general legturile (links) dintr-o pagin Web au culori prestabilite (default), astfel: blue (albastru) - pentru legturi red (rou) - pentru legtura activa (cea pe care este fixat cursorul mouse-ului, cu butonul stng apsat) purple (violet) - pentru legturile vizitate, cele pe care s-a efectuat cel puin un clickPentru a schimba culorile prestabilite se folosesc urmtoarele atribute ale etichetei : link pentru legturi alink pentru legturile active vlink pentru legturile vizitate conform sintaxei: Fonturi

nainte de a aborda tipurile de caractere care pot fi utilizate n documentele Web, se cuvine menionat un fapt: HTML nu este un limbaj orientat spre aspectul (layout) paginii, ci spre coninutul acesteia.Importana acestei meniuni rezid n aceea c etichetele HTML nu impun, cum s-ar putea crede, ci "sftuiesc" marea varietate de browsere care proceseaz pagina Web, cum s afieze textul. Ceea ce impun ele cu adevrat este coninutul, textul n sine, nu forma de prezentare.Desigur c nu se poate vorbi de cealalt extrem, a unui arbitrariu absolut, n care fiecare browser va afia textul sub o form absolut imprevizibil. Un text cu o anumit formatare pentru Internet Explorer, s spunem, va fi vizualizat practic identic de toi utilizatorii acestui tip de browser.Exist numeroase etichete care permit formatarea caracterelor i ne ofer posibilitatea de a da textului din pagina Web aspectul dorit.Formatarea caracterelorEticheta care se folosete pentru a da unui caracter sau unui ir de caractere (unui text) aspectul dorit este eticheta container . ntre eticheta de nceput i cea de sfrit se insereaz textul sau caracterul ale crui caracteristici dorim s le stabilim.Tipurile cele mai uzuale sunt: Arial Tahoma Helvetica Times New Roman Courier Verdana Atributul etichetei permite precizarea fie a unui singur tip de font fie a mai multora, separate prin virgul. Precizarea mai multor fonturi ajut n eventualitatea cnd primul tip indicat nu este instalat pe calculatorul celui care viziteaz pagina, i se face ca n exemplul de mai jos.

n aceast situaie browserul va alege singur din list primul tip de font pe care l recunoate, ignorndu-le pe urmtoarele.

Pentru a stabili aspectul textului unei ntregi pagini Web, putem folosi eticheta . Spre deosebire de aceasta nu este o etichet container, deoarece efectul ei se refer la tot textul din pagin. Nu se folosete pentru a stabili caracteristicile unui bloc de text.Este indicat s fie inclus n documentul HTML imediat dup eticheta . Atributele etichetei sunt aceleai cu cele ale etichetei , respectiv: size, color, face.Blocuri de text1. Eticheta face fonturile mai mari dect dimensiunea curent.Text cu caractere mari Text cu caractere mari 2. Eticheta face fonturile mai mici dect dimensiunea curent.3. Etichetele (bold) i realizeaz scrierea cu caractere aldine, sau ngroate (bold).

4. Etichetele (italic) i (emphasized)realizeaz scrierea cu caractere italice.

5. Etichetele i realizeaz scrierea textului tiat de o linie orizontal.

6. Eticheta (underlined) realizeaz sublinierea textului.Formatarea textuluiEtichetele despre care vom vorbi n continuare nu se mai refer la particularitile fonturilor ci la felul n care poate fi amplasat un text n cadrul paginii. nainte de a discuta n amnunt despre etichetele care permit formatarea textului, s facem cteva precizri privind felul cum sunt afiate textele.Dup cum tii, fiierele HTML sunt fiiere text. Aceasta nseamn c atunci cnd salvai fiierul respectiv, el este salvat numai ca text, deci browserul nu poate recunoate i executa dect strict acele comenzi prevzute de etichetele HTML. Din acest motiv, trecerea la un rnd nou, care n editorul de text se realizeaz prin apsarea tastei ENTER, nu este recunoscut de browser.Un alt aspect este plasarea n text a spaiilor. Chiar dac vei introduce spaii suplimentare ntre cuvinte atunci cnd scriei documentul HTML n editorul de text, browserul va afia invariabil un singur spaiu ntre dou cuvinteAcesta este motivul pentru care fiecare dintre aceste elemente de formatare a textului are o etichet proprie care indic browserului cum anume s fac afiarea.

Centrarea textului Aa cum am vzut mai sus, afiarea textului centrat n pagin se poate face cu ajutorul etichetei avnd atributul align setat la valoarea "center". O alt posibilitate de a realiza acest lucru este de a utiliza o etichet dedicat, incluznd textul ntre etichetele . Eticheta este o etichet container, prezena etichetei de nchidere fiind obligatorie.

Blocul O alt modalitate de delimitare i de formatare a unui bloc de text este folosirea etichetei container . Prezena etichetei de nchidere este obligatorie. Eticheta realizeaz divizarea unui document HTML n seciuni distincte, diviziune n care pot fi incluse, pe lng text, i alte elemente: legturi, imagini, formulare. Ca i n cazul etichetei pentru introducerea paragrafelor, eticheta admite atributul align, pentru alinierea textului. Valorile posibile ale acestui atribut, deja cunoscute, sunt: left - aliniere la stnga center - aliniere la centru right - aliniere la dreapta Alinierea precizat de atributul align al blocului are efect asupra tuturor elementelor incluse n blocul . Blocul admite i atributul nowrap, care interzice ntreruperea rndurilor de ctre browser. Exemplu:

Prima pagin | Istoric| Descriere | Mrci | Foto | Despre site

Legturi (link-uri)

Legturile (link-urile) reprezint, poate, partea cea mai important a unei pagini Web. Ele transform un text obinuit n hypertext - un nou tip de text, diferit de cel din clasicele pagini de carte, care permite trecerea rapid de la o informaie aflat pe un anumit computer la alt informaie memorat pe un alt computer localizat oriunde n lume. Adresa URLPentru a stabili o legtur cu o alt pagin (un alt fiier) trebuie s specificm adresa URL a acestuia. URL este un acronim, de la Uniform Resource Locator, i reprezint adresa de identificare a unei resurse (a unui fiier) aflat pe calculatorul propriu sau pe orice alt calculator din lume conectat la Internet. O adres URL const dintr-un ir de caractere care identific n mod unic o anumit resurs, oferind informaii despre numele serverului pe care este stocat acea resurs precum i despre localizarea ei.Exist mai multe etichete HTML care folosesc adresa URL drept valoare pentru anumite atribute: etichetele care introduc legturi, imagini sau formulare. Toate acestea folosesc aceeai sintax a adresei URL pentru a specifica locaia unei anumite resurse, indiferent de tipul acesteia.

Adrese absolute i adrese relativePentru a putea localiza un fiier n structura ierarhic de directoare, n scopul de a stabili o legtur ctre el, se poate folosi adresarea absolut sau adresarea relativ.Adresa absolut a unui fiier conine calea precis i complet ctre fiierul respectiv pornind de la vrful ierarhiei de directoare:Stabilirea legturilorPentru a insera legturi ntr-un document HTML folosim eticheta .Eticheta este o etichet container, prezena etichetei de nchidere fiind obligatorie.Atributul obligatoriu al etichetei este href (Hypertext Reference) care primete ca valoare adresa URL a fiierului cu care dorim s stabilim legtura. Acest fiier poate fi un document HTML, o imagine sau un fiier de alt tip. Documentul HTML n care este prezent legtura se numete surs iar fiierul ctre care este fcut legtura se numete int. Sintaxa etichetei este urmtoarea:text sau imagine

ntre etichetele i poate fi plasat un text obinuit sau o imagine. n mod prestabilit textul inclus ntre etichetele este afiat subliniat i de culoare albastr iar imaginile au un chenar de culoare albastr. Folosirea etichetei imbinat cu etichete de formatare a textului, fonturi, liste sau tabele se face plasnd eticheta n interiorul acestora. Legtura ctre o pagin aflat n acelai director (folder)Pentru a realiza o legtur ctre o pagin aflat n acelai director se procedeaz astfel:text explicativunde: href reprezint atributul care stabilete calea ctre inta cu care se face legtura. Dac fiierul int este n acelai director, atributul primete ca valoare chiar numele fiierului. text explicativ - reprezint textul pe care se face click cu mouse-ul pentru a activa legtura. (De exemplu:"Click aici" ). Acest text este afiat diferit fa de restul textului - n general, subliniat i de culoare albastr.Exemplu:

Harta site

Legtura ctre pagini externe O legtur ctre o pagina extern se realizeaz simplu, prin utilizarea etichetei , specificnd adresa URL a paginii ca valoare a atributului href astfel:href="http://URL_pagina"

Exemplu:


Recommended