Universitatea Valahia Targoviste

Departamentul EDUCON

Specializarea Informatica - seria XX

Proiect HTML

I. Despre     HTML

HTML - HyperText Markup Language, a fost conceput in 1989 de Tim Berners-Lee (v. foto) , licentiat la Oxford, pe atunci fizician la CERN. Fiind si expert in software, Berners-Lee este acum director al World Wide WEb Consortium ( pe scurt, W3C ), adica al organizatiei care coordoneaza dezvoltarea web-ului ( in principal, prin impunerea de standarde pentru limbaje etc. )

Limbajul HTML - este un limbaj de marcare utilizat pentru crearea paginilor Web. Un marcator (sau tag) este cuprins intre caracterele < si >. Majoritatea tagurilor au tag de sfarsit, acesta avand acelasi nume insa precedat de simbolul . Exemplu de marcatori:

Marcatorul b are tag de sfarsit, iar br este de sine statator.

Editarea si vizualizarea documentelor HTML

Pentru editarea documentelor HTML se poate utiliza orice editor de texte obisnuit (de exemplu in Linux joe, pico, sau Notepad in Windows). Pagina de start al unui site depinde de serverul pe care se afla, de regula fiind in Pentru a vedea o pagina Web de pe calculatorul local, din meniul File al navigatorului se va selecta optiunea Open (in cazul in care utilizam navigatorul Internet Explorer, vom apasa pe butonul Browse pentru a vizualiza sistemul de fisiere si pentru a selecta pagina Web dorita). dex.html.

Structura generala a unui document HTML

Mai intai se defineste tipul documentului (cu DOCTYPE), in cazul nostru este vorba de HTML 4.01. Informatiile sunt cuprinse intre marcatorul html, iar acesta contine doua sectiuni: head si body. In partea de head vor fi cuprinse infromatii utile pentru navigatorul Web sau pentru alte aplicatii, cum ar fi motoarele de cautare. Marcatorul title va contine un text care va fi afisat pe bara de titlu a navigatorului Web. De regula, sectiunea body va cuprinde informatiile care vor fi vizibile in suprafata de afisare a ferestrei navigatorului.

Paragrafe

Pentru inserarea de paragrafe avem la dispozitie urmatoarele taguri:

Liste

Pentru definirea de liste nenumerotate putem utiliza marcatorul ul, iar pentru numerotate ol. Ambele poseda tag de sfarsit. Un element al listei este cuprins in interiorul tagului li.Elementele listei nenumerotate sunt precedate de un anumit simbol. Pentru a stabili simbolul dorit se va utiliza atributul type pentru marcatorul ul, cu una din valorile: disc (pentru buline, care este implicita), square (pentru patrat) si circle (pentru cercuri). Exemplu de lista nenumerotata care utilizeaza patratele:coloane sau, in general, cand se doresc diverse alinieri.

Tabele

Un tabel se defineste prin intermediul marcatorului table. Acesta poseda urmatoarele atribute importante:

Imagini

Imaginile sunt stocate in fisiere separate cum ar fi cele in format GIF, JPEG sau mai nou PNG. Marcatorul utilizat este img, iar acesta nu poseda tag de sfarsit. Exemple de utilizare a imaginilor:

Legaturi

Pentru a stabili (hiper)legaturi intre paginile Web (sau in cadrul aceleiasi pagini) se utilizeaza marcatorul a. Acesta poseda atributul href, iar ca valoarea acesta are o adresa relativa sau absoluta. Astfel se pot crea trimiteri la documente de diferite tipuri (de exemlu: PDF, GIF, ZIP, XML, VRML). Exemple:

II. Descrierea proiectului

Am inceput prin a creea urmatoarele fisiere in aceeasi folder cu FirstPage(File-New-Default Template):

Index.html (Fisierul principal al Siteului) ;

Index1.html (va reprezenta frameul de sus) ;

Index2.html (va reprezenta frameul care contine meniul ) ;

Index3.html (va reprezenta frameul din dreapta jos ) ;

Am copiat pozele in folderul siteului ;

Cum am editat Index.html:

Am creeat un frame cu doua randuri (in proportie de 15 respectiv 75 la suta) folosind tag-ul <FRAMESET rows='15%, 75%'> ;

Tagul    <FRAME src='index1.html'> va arata ca primul frame din frameset (adica cel din randul de sus) va deschide fisierul index1.html.

Acum am imparit cel de-al doilea rand (frame) in doua coloane astfel incat sa ne obtinem forma dorita.Am creeat deci un alt frameset intr-un frame cu doua coloane de data asta folosind tag-ul     <FRAMESET cols='15%, 75%'>.In urmare,ii indicam fisierului ca in prima coloana ar trebui sa se deschida fisierul cu meniul adica index2.html iar in a doua coloana ar trebui sa se deschida index3.html la care ii vom seta numele name='index3' (ii punem numele index3 pentru a putea arata meniului in pasii urmatori ca linkurile din meniu se vor deschide numai in acest index3) ;

Cum am editat Index1.html

Am adaugat scrisul;

Am modficat fontul , marimea si culoarea scrisului prin tag-ul <font face ='Times new roman' size ='13' color ='0cd837'>.Orice tag se inchide intotdeauna asa ca am adaugat la sfarsitul scrisului tagul de sfarsit </font>;

Ca sa ingros scrisul am pus tagul <b>iar ca sa-l subliniez am pus tagul <u>;

Ca sa pun scrisul pe mijloc am bagat textul intr-un tag <div> cu proprietatea align="center";

Ca sa setez culoarea verde a fundalului am adaugat proprietatea bgcolor="green" in tagul <body>;

Cum am editat Index2.html :

Am setat fundalul ca fiind fundal.jpg cu tagul <body background="fundal.jpg">

Am editat cateva butoane gasite de pe internet si le-am adaugat folosind tagul <p><a href='paginaX.html' target ='index3'><img src='despre_mine.jpg' border='0' />.Tagul <p> pune pozele pe randuri separate, tagul <a href="paginaX.html"    target="index3"> spune ca atunci cand dam click pe buton sa se deschida paginaX.html in frameul index3 (adica cel din dreapta jos).Tagul <img src="nume_poza.jpg" border="0"> spune ca imaginea este numita nume_poza.jpg si este situate in folderul siteului si ca ar trebui sa nu aiba un border.

Cum am editat pagina1.html :

Am folosit tagul <body bgcolor="green"> pentru a seta backgroundul verde;

Am folosit tagurile <em> pentru a scrie inclinat.Se poate folosi si tagul <i>;

Am folosit de data asta atributul href pentru a linka un text.

Cum am editat pagina3.html :

Intre tagurile <ul> se pun tagurile <li> ca sa afisam acel mic simbol al listei;

Cum am editat pagina4.html :

Se creeaza tabelul.Toate elementele din table vor fi cuprinse intre tagul <table> care are proprietatea width="400" (lungimea in pixeli),borderul setat la 1 pixel si distant intre celula si scris tot la 1;

Intre tagurile <tr> se pun randurile tabelului;

Intre tagurile <td> se pune fiecare casuta din fiecare rand ;

Tagul <th> este asemanator cu <td> numai ca va afisa scrisul ingrosat;

Cum am editat pagina5.html :

Pozele se vor afisa folosind tag-ul <img src> unde src = "locul unde se afla fisierul".

III. Concluzii

HTML - este un limbaj electronic si o modalitate de a publica documente standard pe Internet, ce pot fi vizionate prin intermediul unor programe specifice, numite browser. Pentru a afisa corect documentele HTML, aceste programe de vizualizare, detin standarde de recunoastere a elementelor specifice HTML.

Validarea - operatiune realizata de catre cei ce creaza pagini Web, in scopul declarat de a avea un cod curat, usor de urmarit si rapid de citit de catre programele de vizualizare - browsere.

In concluzie, validarea HTML verifica modul corect de realizare a unui document Web, astfel incat utilizatorii prin intermediul programelor de vizualizare, sa poata vedea un document fara erori HTML si accesibil in marea majoritate a programelor de vizualizare. Compatibilitatea unui document HTML cu un program de vizualizare, tine de limbajul corect folosit. Un document HTML ce nu e compatibil cu aceste programe de vizualizare, face ca in momentul accesarii sa prezinte erori catre utilizator si deci imposibilitatea de a fi vizionat. Acest lucru duce la o scadere de vizualizari din partea utilizatorului Web.

Un document HTML trebuie sa aiba specificat tipul de document - DOCTYPE-ul - in care acesta este creat. In functie de aceasta declaratie de tip a documentului, validarea HTML poate fi facilitata, iar prezentarea erorilor identificata conform standardelor specifice documentului.

Validarea accesibilitatii a unui document HTML, este deasemenea un lucru important. Cu cat site-ul este mai accesibil vizitatorilor, cu atat mai mult site-ul Web va fi mai vizitat.
Numarul diversificat de vizitatori impune o validare a documentului, astfel incat prin aceasta, gama de utilizatori ce folosesc diferite programe de vizualizare sau persoanele cu handicap ce necesita o modalitate specifica de a vizualiza un document, sa fie cat mai mare.

Validarea CSS-ului poate usura accesibilitatea si vizualizarea unui document ce foloseste aceasta modalitate de realizare a documentelor HTML. Specificatiile in acest domeniu usureaza realizarea si vizualizarea lor, cat si rapiditatea cu care aceste documente sint incarcate intr-un program de vizualizare.

Bibliografie:

• Sabin Buraga - Proiectare situri Web: design si functionalitate, Editura Polirom, Iasi, 2002, 272 pagini, ISBN 973-683-113-1.

• Sabin Buraga, Victor Tarhon-Onu, Stefan Tanasa - Programare Web in bash si Perl, Editura Polirom, Iasi, 2002, 256 pagini, ISBN 973-683-931-1.

• Sabin Corneliu Buraga - Tehnologii Web, Editura Matrix Rom, Bucuresti, 2001, 662 pagini, ISBN 973-685-280-6.

• https://www.w3schools.com
• https://validator.w3.org/
• https://www.seo-point.com/