HTML 1. Generalităţi HTML este prescurtarea de la HyperText Markup Language şi reprezintă principalul limbaj de editare a conţinutului paginilor web. Pentru a înţelege mai bine ce face un browser în momentul accesării unei pagini web putem considera un site (de ex. www.infopuc.ro) care se află pe un server (o anumita adresă IP). Atunci când un browser accesează o adresă web, pe calculatorul pe care rulează browser-ul se descarcă fişierul index al paginii web solicitate. Extensia fişierului index poate fi.html,.htm,.php,.aspx, etc., funcţie de limbajul în care este scrisă pagina respectivă. De exemplu, considerând pagina web www.infopuc.ro cu structura prezentată în figura 1, Fig. 1 în momentul accesării paginii se descarcă pe calculatorul client (cel de la care se face cererea) fişierul index.html cu toate datele dependenţele acestuia. Vom vedea ulterior că fişierul index poate apela automat alte fişiere de date (imagini, sunete sau chiar alte pagini html). Fişierele html sunt de fapt niște fişiere de tip text în care, cu ajutorul unor marcatori (eng. tag) se formatează textul sau elementele componente ale paginii. Marcatorii sunt introduşi cu ajutorul semnelor < >. Efectul unui marcator se exercită asupra elementelor pe care le cuprinde. De aceea majoritatea marcatorilor sunt de tip pereche <html> text formatat < /html>. 2. Prima pagină html Toate paginile html au o zonă de antet în care se introduce titlul paginii şi alte informaţii despre pagină şi o zonă de conţinut în care se introduc toate elementele care alcătuiesc pagina respectivă. Pentru delimitarea zonelor se folosesc o serie de marcatori principali: - <html> delimitează pagina html; - <head> delimitează zona de antet a documentului; - <title> defineşte titlului documentului (fig. 2); - <body> delimitează partea de conţinut a paginii web (fig. 2).
title body Fig. 2 Pentru editarea paginilor html vom folosi editorul de texte Notepad, dar se poate folosi orice editor de texte, un alt editor recomandat ar fi Notepad++. Vom crea şi edita pagina html prezentată în figura 2. Deschideţi editorul de texte şi într-un document nou scrieţi următoarele (se recomandă scrierea în locul copierii): <html> <head> <title> Titlu Pagina 1 </title> </head> <body> Continutul paginii html. </body> </html> După ce aţi scris codul de mai sus salvaţi fişierul cu extensia.html. (de ex. pagina1.html) Atenţie: în fereastra Save as trebuie să selectaţi All files la secţiunea Save as type. Verificaţi crearea fişierului în directorul C:\student\610x\Nume Prenume\ şi daţi dublu click pentru a-l deschide. Ar trebui sa se deschidă browserul implicit şi să afişeze pagina html creată (asemănător figurii 2).
Observaţii: 1. Marcatorii pot fi scrişi cu litere mici sau mari, browserul este case insensitive, dar este preferabil să abordaţi un mod constant de scriere a marcatorilor. De exemplu, dacă preferaţi scrierea marcatorilor cu majuscule scrieţi cu majuscule tot timpul (! numai marcatorii :) ). 2. Browserul nu interpretează enter -ul din sursă. Cu alte cuvinte, pagina de mai sus poate fi scrisă pe o singură linie (ex. <html><head><title>titlu Pagina 1</title></head><body>Continutul paginii html.</body></html>). În acest fel este foarte greu de revizuit sursa paginii în scopul efectuării eventualelor modificări sau îmbunătăţiri. Obişnuiţi-vă cu ideea că sursa paginii html trebuie modificată de multe ori pentru a obţine rezultatul dorit. 3. Încercaţi să menţineţi sursa paginii uşor de citit şi revăzut scriind textul pe mai multe linii, funcţie de marcatorii folosiţi. Este recomandabil să utilizaţi şi spaţierea pe orizontală (cu ajutorul tastei TAB). 4. În sursele paginilor html adesea se trec comentarii pentru a face mai facilă revizuirea acestora. Comentariile (porţiunile de cod pe care browserul nu le interpretează se introduc cu ajutorul tag-urilor <!-- comentariu. -->). Comentariile pot ocupa mai multe linii. Se mai utilizează în cazul în care doriţi anularea provizorie a unor porţiuni din sursă. 3. Marcatori uzuali Partea de antet a paginii html trebuie utilizată întotdeauna, dar pentru simplitate nu o vom mai aminti... de acum înainte vom discuta numai despre elementele care se pot utiliza în zona BODY. Iată o serie de marcatori folosiţi pentru formatarea textului: - <hi>. </hi> marchează un titlu sau subtitlu, i este un număr între 1 şi 6, 1 reprezentând titlul principal (textul cel mai mare), iar 6 ultimul nivel de subtitlu; Observaţie: textul cuprins înter cei doi marcatori va apărea implicit pe o linie nouă; - <b>. </b> text îngroşat (bold); - <i>. </i> text italic; - <br> trece pe linia următoare, este echivalentul tastei ENTER din editoarele de texte; acesta este unul dintre marcatorii nepereche, nefiind necesar marcatorul de închidere; - <div>. </div> se foloseşte pentru delimitarea unor aliniate, fraze din text, şi este un marcator care permite şi utilizarea unor parametri. De exemplu, dacă vrem ca textul formatat cu marcatorul <div>. </div> să fie aliniat la dreapta paginii se poate scrie: <div align= right >. </div>. Alte valori ale lui align pot fi left sau center. - <font color= red size= 5 >. <font>. Marcatorul <font> se foloseşte împreună cu parametrii size şi/sau color atunci când se doreşte schimbarea mărimii sau culorii implicite a fontului. Pentru parametrul color se pot folosi numele culorilor sau codul acestora în formatul #RRGGBB care reprezintă un grup de 3x2 cifre hexazecimale (scrise în baza 16, ca şi adresa MAC a plăcii de reţea). Primul grup, între 00 şi FF reprezintă proporţia de roşu, al doilea grup reprezintă proporţia de verde, iar ultimul proporţia de albastru. O lista cu codurile culorilor sau a denumirilor acestora puteţi găsi şi pe internet folosind într-un motor de căutare cuvintele cheie html color.
Atenţie: chiar dacă unii marcatori care permit parametri se deschid prin fixarea parametrilor respectivi, la închiderea marcatorului se va închide numai marcatorul (nu şi parametrii, ex. dacă se deschide <div align= right > după introducerea elementelor formatate se va folosi </div>) Exerciţiu: Folosind marcatorii prezentaţi anterior realizaţi o pagină web care să arate ca în figura 3. Salvaţi-o cu numele pagina2.html. Fig. 3 Indicaţii (citiţi-le doar dacă nu înţelegeţi ce trebuie să faceţi sau pentru a vă verifica): pagina conţine un titlu (scris cu h1), două subtitluri (scrise cu h2), un text scris cu bold, unul cu italic şi două propoziții, una aşezată în dreapta paginii şi una centrată. În ultima propoziţie cuvântul italic este formatat cu marcatorul <i>. Sursa paginii este listată în continuare:
<html> <head> <title> Titlu Pagina 2 </title> </head> <body> <h1>titlu, scris cu h1</h1> <h2>marcatori uzuali, h2</h2> <b>text scris cu bold.</b><br> <i>text italic</i>. <h2>marcatori de aliniere, h2</h2> <div align="right">text aliniat la dreapta.</div> <div align="center">text centrat si <i>italic</i>.</div></body> </html> Observaţii: 1. Marcatorul <br> a fost folosit o singură dată, browser-ul trece automat pe linia următoare atunci când se termină un text tip heading <hi> sau aliniat <div>. 2. Toţi parametrii tag-urilor au valorile trecute după semnul = între ghilimele. (ex: align= right ). Unele browser-e interpretează corect parametrii şi dacă nu sunt trecute ghilimelele dar pentru o compatibilitate cât mai mare încercaţi să respectaţi standardul. 3. Chiar dacă browser-ul nu interpretează caracterul de introducere linie nouă (enter), încercaţi să scrieţi textul astfel încât să fie cât mai uşor de re-re-re-editat. 4. Introducerea imaginilor Deoarece o imagine face cât o mie de cuvinte, iar în ultima perioadă imaginile digitale sunt din ce în ce mai uşor de obţinut, majoritatea paginilor web folosesc şi imagini. De câte ori aţi accesat o pagină web (în special din cele comerciale) care să nu conţină imagini? Introducerea imaginilor este relativ simplă, se face prin folosirea unui singur marcator, mai dificilă este poziţionarea acesteia în cadrul paginii, dar toate la timpul lor. Pentru început vom considera că imaginile se află în acelaşi director cu fişierul html care le apelează. Trebuie înţeles de la bun început că sursa unei pagini html doar specifică browser-ului ce imagine să afişeze şi în ce condiţii. Pentru a putea fi afişată, imaginea (fişerul acesteia.jpg,.bmp, etc.) trebuie să se afle fizic într-o anumită locaţie hardware. Marcatorul folosit pentru introducerea unei imagini este <img>. Acesta se completează cu parametrii caracteristici src, width şi height. Marcatorul complet arată astfel:
<img src= nume_complet_fisier.jpg width= 300 height= 100 > - în acest fel se introduce fişierul nume_complet_fisier.jpg care se află în acelaşi director ca fişierul sursă html. Dimensiunile cu care această imagine apare în pagina html sunt cele date de parametrii width şi height (în cazul nostru 300 respectiv 100 pixeli). Pentru o apreciere a numărului de pixeli, consideraţi rezoluţia monitoarelor din laborator (1024x768). Dacă nu se specifică lăţimea şi înălţimea de vizualizare a imaginii, aceasta va fi afişată la dimensiunile originale. Exerciţiu: copiaţi în directorul în care lucraţi un fişier de tip imagine (de pe internet sau din directorul Sample Pictures din Documents and Settings al utilizatorului student) şi realizaţi o pagină html care să introducă imaginea în pagină ca în figura 4. Salvaţi-o cu numele pagina3.html. Fig. 4 În pagina prezentată în figura 4 textul este scris cu <h2> iar imaginea este aliniată la dreapta rândului folosind marcatorul <div>. Sursa paginii (doar zona de interes) este prezentată în continuare:... <h2>inserare imagine</h2> <div align="right"><img src="logo.png" width="100" height="140"></div>... Observaţie: marcatorul <div> se foloseşte pentru alinierea tuturor elementelor într-o pagină html, nu doar a textului. Important: apelarea fişierelor în cadrul altor fişiere (de ex. fişiere imagine în fişiere html) se poate face în mod absolut sau relativ. Modul absolut de apelare se face prin scrierea întregii locaţii de adresare a fişierului (ex: C:\student\logo.png ). Acest mod de scriere nu este recomandat deoarece în cazul copierii directorului care conţine toate resursele pe o altă partiţie sau în alt director, se va schimba adresa directorului iar elementele apelate de către paginile html nu vor mai fi găsite. De aceea se recomandă utilizarea apelării relative a fişierelor, caz în care se scrie adresa acestora pornind de la directorul curent, director în care se află fişierul html apelant. Exemplu: considerăm următoarea structură de directoare şi fişiere:
C:\student \imagini \logo1.png \foto1.jpg \pagini \pagina1.html \pagina2.html index.html Aşadar în directorul student sunt două directoare (imagini şi pagini) şi un fişier index.html. În directorul imagini considerăm fişierele logo.png şi foto1.jpg. În directorul pagini considerăm două fişiere html: pagina1.html şi pagina2.html. Întrebare1: Cum se va introduce imaginea logo1.png în fişierul index.html? Răspuns1: <img src= imagini/logo1.png > - plecând din directorul care conţine fişierul index.html trebuie să deschidem directorul imagini şi apoi fişierul logo.png. Întrebare2: Cum se va introduce imaginea foto1.jpg în fişierul pagina2.html? Răspuns2: <img src=../imagini/foto1.jpg > - plecând din directorul pagini trebuie să facem un pas spre rădăcină (folosind../ ) şi apoi să intrăm în directorul imagini. 5. Utilizarea listelor Uneori este necesară introducerea unor liste în paginile html. Listele care pot fi introduse sunt de două feluri: ordonate şi neordonate. Marcatorii sunt simpli şi uşor de folosit. Pentru liste neordonate se foloseşte marcatorul <ul> (un-ordered list) iar pentru liste ordonate marcatorul <ol> (ordered list). Un parametru folositor al marcatorilor pentru liste este parametru TYPE care poate primi valorile square, circe sau disc pentru liste neordonate, sau 1, a, A, i, etc. în cazul listelor ordonate. Aceşti marcatori care delimitează începutul şi sfârşitul listei trebuie să fie însoţiţi de marcatorii (ne-pereche) care marchează fiecare element al liste: <li> (list item). Ex. listă neordonată <ul type= square > <li> element 1 <li> element 2 <li> element 3 </ul> Ex. listă ordonată <ol type= 1 > <li> element 1 <li> element 2 <li> element 3 </ol> Exerciţiu: Completaţi fişierul pagina3.html cu două liste, una neordonată cu zilele săptămânii şi una ordonată cu primele şase luni ale anului. Rezultatul este prezentat în figura 5.
Fig. 5 6. Introducerea link-urilor Legăturile dintre paginile html au dus la extinderea acestui mod de informare şi comunicare. V-aţi gândit vreodată ce ar fi ca pentru a vizualiza o pagină html să trebuiască să scrieţi adresa? Câte adrese puteţi reţine în memorie? Legăturile între pagini se mai numesc şi link-uri (din engleză). Introducerea unui link într-o pagină html este relativ simplă, se face prin apelarea unui marcator <a> cu cel puţin parametrul href. Atunci când introducem un link într-o pagină trebuie să ştim cel puţin două lucruri: ce pagină (adresă) are ca referinţă şi ce text de legătură punem. Un link arată astfel: <a href= pagina1.html >link catre prima pagina</a> şi are ca rezultat crearea textului link catre prima pagina cu formatul de link, care atunci când va fi accesat va deschide pagina1.html. Link-urile pot fi externe, atunci când parametrul href primeşte locaţia unui site sau a unei pagini de internet (ex. http://www.infopuc.ro, http://www.cdamian.tuiasi.ro/pages/cv.php) sau interne atunci când referinţa este o pagină din interiorul aceluiaşi site.
Exerciţiu 1. Adăugaţi în ultima pagină creată două link-uri către paginile create anterior şi două linkuri externe. Exerciţiu 2. Adăugaţi în toate paginile, pe primul rând al acestora, legături către celelalte pagini. (pagina 1 va avea legături către pagina 2 şi pagina 3, etc., vezi fig. 6) Fig. 6 Observaţie: marcatorul <a> se poate aplica asupra oricărui element al unei pagini html. Putem face aşadar link-uri din imagini, din elementele unor liste, etc. Exerciţiu 3. Modificaţi fişierul html care conţine imaginea astfel încât imaginea să fie un link către site-ul Facultăţii IEEI. (http://www.ee.tuiasi.ro/ ). Exerciţiu 4. Creaţi o pagină care să conţină o listă neordonată de link-uri utile.