Ce este de fapt un fisier HTML? Un fisier HTML („HyperText Markup Language”) este de fapt un fisier text. Este sursa paginii Web, asa cum un program în C are fisier sursa. Acest fisier este scris in limbajul HTML, pe care, la afisare, browserul il interpreteaza. Fisierul HTML trebuie sa aiba extensia .htm sau .html. Din moment ce este un fisier text, se poate edita cu orice editor de text, de exemplu Notepad++ din Windows. Codul HTML este realizat din caractere care se afla in interiorul parantezelor ascutite <>. Acestea se numesc elemente HTML. Elementele sunt compuse de obicei din 2 taguri: tag de deschidere tag de inchidere. Tagul de inchidere are in plus un slash. Elementele HTML comunica browserului cum sa se comporte cu informatia dintre tagurile de deshidere si de inchidere. HTML foloseste elemente pentru a descrie structura paginii. Tagul de deschidere <html> indica faptul ca orice incepand de la el pana la tagul de inchidere </html> este cod HTML. Tagul de deschidere <body> indica faptul ca orice incepand de la el pana la tagul de inchidere </body> trebuie afisat in interiorul unei ferestre a unui browser. Tagul de inchidere </body> indica finalul a ceea ce trebuie afisat in interiorul unui browser. Exemplu (Salvati fisierul cu numele „pagina.html”. Deschideti fisierul cu browserul de Web ): <html> <body> <h1>This is the Main Heading</h1> <p>This text might be an introduction to the rest of the page. And if the page is a long one it might be split up into several sub-headings. </p> <h2>This is a Sub-Heading</h2> <p>Many long articles have sub-headings so to help you follow the structure of what is being written. There may even be sub-sub-headings (or lower-levelheadings). </p> <h2>Another Sub-Heading</h2> <p>Here you can see another sub-heading.</p> </body> </html> Caractele dintre paranteze ascutite indica scopul tagului. De exemplu in tagul de mai jos p se refera la un paragraf. Tagul de inchidere contine un slash dupa simbolul <. <p> Tag de inchidere </p> Tag de deschidere Termenii ‘tag’ si ‘element’ sunt folositi deseori alternativ. Totusi, strict vorbind, un element cuprinde tag-ul de deschidere, tag-ul de inchidere cat si continutul care se afla intre aceste tag-uri. Atributele ne ofera mai multe informatii despre elemente. Atributele furnizeaza informatii suplimentare despre continutul unui element. Atributele apar in tagul de deschidere a elementului si sunt compuse din 2 parti: un nume si o valoare, separate de semnul egal. <p lang=“en-us” >Paragraph in English</p> Atributul nume (‚lang‘ in cazul de fata) indica ce tip de informatii suplimentare sunt furnizate in legatura cu continutul elementului (ar trebui scris cu litere mici). Valoarea este informatia sau setarea pentru atribut. Trebuie plasata intre ghilimele duble. Atribute diferite pot avea valori diferite. In exemplul de mai sus atributul denumit ‘lang’ este utilizat pentru a indica limba utilizata in acest element si anume US English. Alte atribute pe care orice element HTML le poate avea: class – specifica una sau mai multe clase de stil pentru un element. O clasa de stil este definita cu ajutorul CSS; id – identificator unic pentru fiecare element; style – defineste stilul CSS inline pentru un element; title – specifica informatie suplimentara despre un element (este afisata ca tool tip). In general elementele HTML au atribute predefinite care au valori prestabilte si pot diferi de la un element HTML la altul. Structura unei pagini HTML (HyperText Markup Language) “HyperText” – se refera la faptul ca HTML permite crearea linkurilor care ofera vizitatorilor posibilitatea de a se muta de la o pagina la alta foarte usor. Exemplu (Salvati fisierul cu numele „pagina1.html”. Deschideti fisierul cu browserul de Web ): <html> <head> <title>Acesta este titlul paginii </title> </head> <body> <h1>Acesta este corpul paginii</h1> <p>Orice este scris in interiorul lui body este afisat in fereastra browserului.</p> </body> </html> <body> Orice se afla in interiorul acestui element este afisat in interiorul ferestrei browserului. Exercitiu: adaugati tag-urile „<i>” si „</i>” inaintea si dupa elementul <p>…</p> din corpul paginii. Vizualizati. <head> Inaintea elementului <body> se poate afla elementul <head>. Acesta contine informatii despre pagina (si nu informatii care sunt afisate in browser). De obicei in interiorul unui element <head> se gaseste un element <title>. <title> Continutul elementului <title> este afisat in partea superioara a paginii, fie deasupra spatiului in care se introduce URL-ul paginii pe care vrem sa o vizitam sau pe tab-ul pentru pagina respectiva Exercitiu: schimbati titlul paginii create, în „Prima Pagina Web Design”. Vizualizati. DOCTYPES Din momentul in care web-ul a fost creat, au existat mai multe versiuni de HTML. Fiecare versiune noua a reprezentat o forma imbunatatita a precedentei (cu noi elemente si atribute iar codul vechi a fost inlaturat). HTML 4 (1997) – majoritatea elementelor folosite de noi sunt disponibile in HTML 4. Exista totusi unele elemente care nu ar trebui folosite precum <center> (pentru centrarea continutului intr-o pagina web), <font> (pentru controlul si afisarea textului), <strike> (pentru taia textul cu o linie). Este recomandat ca aceste caracteristici sa fie obtinute prin intermediul CSS. HTML 5 (2000) – autorii paginilor web nu sunt nevoiti sa inchida toate tagurile. De asemenea au fost introduse elemente si atribute noi. Specificatia HTML5 nu e completa, dar puteti folosi proprietatile introduse pana acum atata timp cat va asigurati ca userii cu browsere vechi vor fi capabili sa vizualizeze paginile voastre (chiar daca unele proprietati suplimenare nu vor putea fi vizualizate de ei). Deoarece au existat mai multe versiuni de HTML, fiecare pagina web ar trebui sa inceapa cu o declaratie DOCTYPE pentru a comunica browserului ce versiune de HTML este folosita de pagina web (desi browserele de obicei afiseaza pagina chiar daca aceasta declaratie nu exista). HTML 5 <!DOCTYPE html> HTML 4 <!DOCTYPE html PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Adaugati <!DOCTYPE html> in toate paginile web pe care urmeaza sa le creati. Tag-uri de baz HTML Subtitluri Subtitlurile („headings”) ofer posibilitatea structur rii textului unei pagini Web, facand-o mai u or de parcurs. Un text lung, care tot curge, fara a fi structurat pe bucati, poate fi obositor din punctul de vedere al cititorului. Este important ca monotonia textului sa fie evitata prin impartirea acestuia pe capitole, sau subcapitole. In acest fel textul este mai usor de urmarit si userul gaseste mai rapid informatia de interes. In HTML, se poate lucra cu sase nivele de capitole/subcapitole, de la 1 la 6, folosind tag-urile <h1> … <h6>, fiecare avand cate un tag de inchidere, desigur. Exemplu: <h1>Capitolul I – Epoca de piatra</h1> Subtitlurile de regula nu sunt numerotate la afisare, ci apar cu litere mai mari, ingro ate, centrate sau subliniate, deci intr-o form care sa le deosebeasca de restul textului. Asta depinde de posibilit ile browserului. Subtitlul acestui subcapitol („Subtitluri”) este un bun exemplu. Exercitiu: porniti Notepad++ si creati structura de baz pentru un fi ier HTML (tag-urile pentru html, antetul i corpul paginii). Apoi scrieti urm torul text in corpul paginii, si vizualizati in browser: <h1>Subtitlu de nivel 1</h1> <h2>Subtitlu de nivel 2</h2> <h3>Subtitlu de nivel 3</h3> <h4>Subtitlu de nivel 4</h4> <h5> Subtitlu de nivel 5 </h5> <h6>Subtitlu de nivel 6</h6> Observati efectele spa iilor multiple din sursa HTML, precum si efectele liniilor vide. Exercitiu: adaugati in textul de mai sus, dup tag-ul de inchidere a subtitlului de nivel 3, textul „test”. Vizualizati. Daca unele tag-uri ale unui element sunt in contradictie cu alte taguri ale aceluiasi element, ultimele (adica perechea cea mai „interna”) vor fi luate în considerare. Paragrafe O metod eleganta si conforma standardului pentru scrierea paragrafelor în HTML este folosirea tagurilor dedicate. Aceste tag-uri sunt de forma <p>Un paragraf</p>. Exercitiu: adaugati la exemplul precedent doua paragrafe („Un paragraf” si „Un alt paragraf”) folosind aceste tag-uri. Vizualizati. Observatie: ca si in cazul subtitlurilor, se adaug automat o linie vida inainte si dupa paragraf. Si paragrafele pot avea atribute, aceleasi ca si subtitlurile. Linie noua Ati observat ca inutil introduceti linii vide in sursa HTML, ele vor apare ca un singur spatiu. Pentru a intra pe linie noua in HTML, aveti nevoie de un tag special, „<br />”. Exercitiu: puneti tag-ul <br /> intre primul si al doilea paragraf din exemplul de mai sus. Vizualizati. Comentarii în HTML Un program bun are 40% comentarii în sursa. Din moment ce si HTML este un limbaj de programare, este bine sa punem comentarii în codul sursa. Daca sursa HTML este complexa, comentariile vor fi de nepretuit daca vrem sa schimbam ceva. Acest lucru este adevarat mai ales în cazul scripturilor. Comentariile nu sunt afisate de catre browser. Un comentariu arata astfel: <!- - Trebuie sa elimin bancurile din partea asta de cod –> Observati ca avem de-a face cu un tag mai special, fara pereche de închidere; observati si semnul exclamarii de la începutul comentariului, si lipsa lui la sfârsit. Perechile de liniute de la început si de la sfârsit fac parte din tag, nu din textul comentariului. Exercitiu: inserati un comentariu înaintea paragrafului centrat, explicand „acesta este un paragraf centrat”. Vizualizati. Inserati acum un comentariu in mijlocul textului din paragraf, apoi vizualizati. Inserati comentariu în interiorul unui tag, de exemplu în „<p>”. Vizualizati. Comentariile se pot extinde pe mai multe linii, dar este indicat sa nu scrieti comentarii mai lungi de o linie, pentru claritate. Nu includeti tag-uri HTML în comentarii (de exemplu, <p>); în mod normal, nimic din ce este în comentariu nu se afiseaza, dar un browser mai „sensibil” ar putea sa se încurce în timpul parcurgerii comentariului cu tag-uri. Bara orizontala O foarte simpla metoda de a separa vizual partile dintr-un document HTML este folosirea unei bare orizontale. Folositi tag-ul „<hr>” (de la „horizontal rule”). Exercitiu: inserati dupa primul paragraf din exemplul de sus o bara orizontala. Vizualizati. Adaugati atributul „title” cu valoarea „Linie orizontala”. Observatie: atributul „title” se poate folosi la multe tag-uri. Tabelul 1 – tag-uri de baza Tag de început Scop <html> <body> <h1> la <h6> <p> <br /> <hr /> <!-- > Document HTML Corpul documentului Subtitluri de la 1 la 6 Paragraf Linie noua Bara orizontala Comentariu în codul sursa TABELE Lucruri generale privind tabelele: Tabelele pot fi inserate intr-o pagin Web utilizand elementul <table>. Un tabel este compus din linii (elemente <tr>) si celule (elemente <td>) Pentru a adauga o bordur la un tabel, utilizati atributul border al elementului <table>. Pentru a atribui o culoare bordurii, utilizati atributul bordercolor. Pentru un tabel sau celula pot fi stabilite dimensiuni fixe folosind atributele width i height. Pentru a defini antetul unui tabel, utiliza i elementul <th>. Pentru a alinia datele intr-un tabel, utilizati atributele align si valign atasate la elemente <tr>, <td> sau <th>. Elementul <table> foloseste urmatoarele atribute: cellspacing determina distanta dintre celulele adiacente cellpadding determina distanta dintre continutul si bordura unei celule. Pentru a extinde o celula peste celulele adiacente, utilizati atributele colspan si rowspan ale elementelor <td> sau <th>. Pentru a adauga un titlu la un tabel, utilizati elementul <caption> in interiorul elementului <table>. Pentru a adauga o structur la un tabel, utilizati elementele <thead>, <tfoot> si <tbody>. LEGATURI : Pana acum, am construit doar cate un fisier HTML, fara a face referire dintr-unul la altul. HTML este un sistem hipertext, adica selectarea unui cuvant-cheie de pe o pagina poate afisa o alta pagina, sau poate conduce la un loc anume dintr-o pagina. O legatura HTML are doua parti: • 1. Adresa paginii sau, in general, a resursei care va fi încarcata in momentul selectarii legaturii; • 2. Textul activ, care va fi afisat pe ecran, si care, selectat, va determina incarcarea paginii de la adresa pe care o specifica legatura. De exemplu: <a href=”URL-adresa paginii asociate”> Cuvinte care se pot selecta </a> Exista urmatorele tipuri de legaturi: legaturi care navigheaza de la un site web la altul; <a href="http://www.w3schools.com">Visit W3Schools.com!</a> legaturi care navigheaza intre pagile aceluiasi site web (se utilizeaza cai relative); <a href=“index.html" >Home<a> legaturi care navigheaza de la o anumita parte a paginii la alta parte a paginii <h1 id="top">Film-Making Terms</h1> …. <a href="#top">TOP</a> legaturi care se deschid intr-o noua fereastra a browserului <a href="http://www.google.com" target=“_blank”>Google<a> legaturi care navigheaza intre pagile aceluiasi site web (se utilizeaza cai relative); <a href=“index.html" >Home<a> linkuri prin intermediul carora se poate adresa un email catre adresa care urmeaza dupacâmpulmailto: <a href="mailto:jon@example.org">Email Jon</a> Exemplu: <a href=”http://www.ccicj.ro”>Camera de comert, industrie si agricultura Cluj</a> In exemplul de mai sus, am creat o legatura spre site-ul „www.ccicj.ro”. In pagina, nu apare adresa site-ului, ci textul dintre tagul ancora de deschidere si de închidere, „Camera de comert, industrie i agricultura Cluj”. Daca in pagina afisata dam clic pe acest text, se va incarca si se va afi a pagina de pe „www.ccicj.ro”. De obicei, browserul afiseaza evidentiat textul activ: il subliniaz , il afiseaza cu caractere ingrosate etc. Observati ca adresa paginii („http://www.ccicj.ro”) se specifica prin atributul „href” („Hypertext Reference”) al tag-ului ancora. Aceasta adresa este o adresa Internet a unei resurse. Adresele se mai numesc si „url” („Universal Resource Locator”). Exista mai multe tipuri de url, cel mai utilizat fiind cel „http” (folosit la pagini de web). Exista si alte tipuri pentru fisiere locale, transfer dedicat de fisiere, Telnet, mail etc. Deci, url-ul complet este format din tipul url-ului („http”, în cazul nostru), si adresa propriu-zisa („www.ccicj.ro”). Acest format ar fi necesar si cand navigati pe Web (cu browserul), dar browserul accepta si simplul „www.ccicj.ro”, luand „http” ca tipul implicit al url-ului. Exercitiu: creati o legatura spre pagina de Web a Pro TV („www.protv.ro”); textul activ (pe care se da clic în pagina afisata) sa fie „Televiziunea Pro TV”. Lucruri generale privind leg turile: Legaturile sunt utilizate pentru navigarea la resurse Internet. O legatura poate fi inserata folosind elementul <a> Resursa Internet indicata de catre legatura este precizata de atributul href al elementului <a>. Legaturile pot fi definite folosind adrese URL absolute sau relative. Pentru a defini o imagine ca legatur , inserati elementul <img> in interiorul unui element <a>. Pentru a defini o legatura la o resursa de pe sistemul local, utilizati protocolul file:///. Pentru a defini o legatura la o adresa de e-mail, utiliza i protocolul mailto:. Pentru a defini fereastra in care va fi incarcata noua resursa indicata de catre o leg tur , atasati atributul target la elementul <a>. EXERCI II: 1. Deschideti editorul HTML si realizati urmatorul tabel “table1.html”: 2. Realizati urm toarea pagina: Indicatii: Pentru realizarea paginii html utilizati diferite headinguri (titluri de capitole) si paragrafe. La final adaugati legatura/link-ul „TOP” care la apasare sa conduca utilizatorul la headingul „A Simple Sample Web Page”. Pentru a testa rezultatul, micsorati fereastra browserului astfel incat legatura „TOP” sa apara atunci cand realizati scroll asupra paginii. Apasati legatura „TOP” si veti fi condusi la inceputul paginii. 3. Realizati urmatoarea pagina HTML cu legaturi catre cele doua pagini realizate anterior.