.

no4 seminar

HTML si World Wide Web

Inainte de a incepe prezentarea limbajului HTML, vom face cateva precizari despre semnificatia conceptului World Wide Web (intr-o traducere aproximativa, panza de paianjen, cu sensul de retea, extinsa in lumea larga). Precizarile ar putea parea inutile, dar realitatea este aceea ca, desi foarte multa lume vorbeste despre World Wide Web, putini stiu exact ce reprezinta. Mai mult, datorita extinderii sale exponentiale si a extraordinarei sale popularitati, adesea notiunea este confundata cu cea de Internet. World Wide Web este insa doar o parte a Internetului. Internetul exista de mai bine de treizeci de ani. Bazele acestuia au fost puse la sfarsitul anilor '60, ca urmare a unei initiative a Departamentului de Aparare al Statelor Unite, care avea drept scop realizarea unei retele robuste si fiabile de comunicatii intre computere aflate la distanta. Reteaua avea rolul de a asigura un contact permanent intre elementele sale componente, chiar daca o parte din legaturi ar fi fost intrerupte ca urmare a unui atac nuclear. Ulterior, reteaua a patruns in domeniul civil si a fost adoptata rapid, initial de lumea academica, mai apoi de companiile comerciale. Internetul nu este altceva decat un ansamblu alcatuit dintr-un numar enorm de retele de computere interconectate, localizate pe toata suprafata globului, care suporta diverse pachete software cum ar fi e-mailul, grupurile de stiri (newsgroup), protocoalele de transfer al fisierelor (FTP), Gopher si World Wide Web. Cu toate avantajele imense oferite de posibilitatile de comunicare globala a informatiilor ca si de rapiditatea comunicarii, Internetul a ramas, vreme de doua decenii, doar apanajul agentiilor guvernamentale si al mediilor stiintifice. Motivul l-a constituit dezorganizarea sa initiala cvasi-totala. Folosirea unor standarde de comunicatie si a unor pachete software foarte diverse reprezentau niste bariere tehnologice aproape insurmontabile pentru utilizatorii obisnuiti. In plus, informatiile accesibile la acea vreme pe Internet erau prezentate sub forma unor simple fisiere text si nu in forma cunoscuta azi. Dezvoltarea exploziva pe care a cunoscut-o Internetul in ultimii zece ani a fost determinata de aparitia World Wide Web. World Wide Web a luat nastere in 1989, ca urmare a eforturilor unor fizicieni ai CERN (Laboratorul European de Fizica Particulelor) de a pune la punct un sistem standardizat pentru crearea si distribuirea documentelor electronice oriunde pe glob, sistem care sa permita integrarea tuturor elementelor media: text, imagini, sunet. >sus

Rezumat Primii pasi

1. Ce este HTML ? HTML este o abreviere de la Hypertext Markup Language si reprezinta scheletul oricarei pagini de Web. HTML nu este un limbaj de programare. Nu veti 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, legaturile cu alte pagini, precum si aspectul pe care il are pagina din punct de vedere grafic. In fond, HTML este modul in care ii comunicam browserului ce elemente dorim sa introducem in pagina Web si care este aspectul acestora. 2. Standarde si extensii HTML HTML este un limbaj standardizat, aceasta insemnand ca orice browser poate interpreta si afisa corect un document Web. Sintaxa de baza a limbajului HTML este definita in versiunea HTML 3.2. In prezent a fost lansata versiunea HTML 4.0, standardizata. De la o versiune la alta, limbajului HTML i se adauga noi elemente. De asemenea, fiecare tip de browser (Netscape Navigator si Internet Explorer, in particular) foloseste anumite elemente ne-standard, pentru a imbunatati capacitatile limbajului. Etichetele noi, care nu fac parte din versiunea standard poarta numele de extensii. In general, browserele cele mai folosite, Netscape Navigator si Internet Explorer recunosc etichetele HTML 3.2 si o mare parte din cele nou introduse in HTML 4.0. Este recomandat sa evitati extensiile, in afara cazului cand aveti un motiv foarte serios pentru a le folosi. Pentru utilizatorii browserelor care nu recunosc aceste extensii, anumite parti ale documentului dumneavoastra pot deveni complet ilizibile. Desigur, extensiile pot afecta in grade diferite aspectul formal al paginii dumneavoastra. De exemplu, folosirea extensiilo care tin de aspectul liniilor orizontale incluse in pagina nu va afecta in mod grav aspectul paginii in browserele care nu suporta aceste extensii. Cele mai multe dintre acestea vor ignora extensiile si vor afisa o line orizontala standard. Pe de alta parte, extensiile care realizeaza formatarea si alinierea textului si aspectul fonturilor pot face ca documentul sa aiba un aspect foarte dezordonat in browserele care nu suporta extensii de acest tip. Sau, in cazurile cele mai grave, acea parte a documentului poate sa nu fie deloc afisata.

Structura unui document HTML

1. Ce este un document HTML ? Un document HTML nu este altceva decat un fisier text care, pe langa textul propriu-zis ce va aparea in pagina, contine si o serie de elemente speciale, denumite etichete, sau marcaje (tags, in limba engleza). Nota Toate celelalte elemente, de tip multimedia, care insotesc documentul HTML, cum sunt 2

sunetul, imaginile video, grafica, etc., nu fac parte din structura acestuia. Documentul HTML include referinte la aceste elemente, prin intermediul unor etichete speciale, care indica browserului modul in care ele vor fi incarcate si integrate in pagina Web. Etichetele nu sunt instructiuni in sensul cunoscut al notiunii, ele avand doar rolul de a comunica browserului semnificatia si modul de afisare al elementelor incluse, privind aspectul textului, al fonturilor (tipurilor de caractere) si in general, al tuturor elementelor prezente in pagina. Etichetele sunt delimitate de perechi de paranteze unghiulare "< >". Unele etichete permit precizarea anumitor caracteristici ale elementului pe care il introduc in document prin intermediul unor perechi caracteristica - valoare numite atribute. Exista atribute specifice doar anumitor elemente si atribute care sunt utilizate in asociere cu mai multe etichete. O eticheta poate avea unul, nici unul, sau mai multe atribute. La randul lor, atributelor li se pot atribui valori diferite.Atat etichetele cat si atributele sunt case-insensitive, ca atare nu va exista nici o diferenta de actiune intre, sa spunem, <head>, <Head>, <HEAD>, sau chiar <HeaD>. Ele sunt echivalente. Pe de alta parte, valoarea unui atribut poate fi case-sensitive, cum, in principiu, este cazul locatiilor fisierelor si adreselor URL. Valorile atributelor se pun intre ghilimele daca sunt formate din mai mult de un singur cuvant. In situatia cand valoarea unui atribut este desemnata printr-un singur cuvant, incadrarea acestuia intre ghilimele nu este obligatorie. Totusi, in continuare am optat pentru plasarea tuturor valorilor atributelor intre ghilimele pentru a evita greselile. Regulile de folosire a etichetelor, atributelor si valorilor acestora reprezinta sintaxa limbajului HTML. Similar limbajelor de programare, in HTML respectarea sintaxei limbajului este determinanta pentru o buna functionare a documentului. Spre deosebire de limbajele compilate cum ar fi limbajul C, in care programele trec inainte de executie prin faza de compilare, etapa in care compilatorul semnaleaza eventualele greseli de sintaxa, la documentele HTML nu se intampla acest lucru. Documentele HTML sunt interpretate de browser exact asa cum au fost ele scrise. Prin urmare, orice greseala de sintaxa se va reflecta direct in aspectul paginii Web, conducand, de cele mai multe ori, la o functionare defectuoasa a acesteia. Daca la vizualizarea paginii dumneavoastra cu browserul constatati ca anumite secvente ale paginii nu au aspectul asteptat, sau elementele pe care doriti sa le introduceti nu sunt afisate, reveniti asupra documentului HTML si verificati inca o data sintaxa acestor elemente.

Sintaxa fundamentala I
Frumusetea HTML-ului (Hypertext Mark-up Language) rezida in faptul ca browser-ul Web determina cum va arata o pagina. Cind deschideti o pagina Web, browser-ul "citeste" textul, filtreaza tag-urile HTML si afiseaza pagina. Tot ce va trebuie pentru a scrie o pagina HTML este un editor de text asa cum este Write, WordPad sau Word in Windows, sau oricare altul, indiferent de sistemul de operare. Se impune o mentiune, totusi: nu incercati sa formatati in vreun fel textul-sursa; in cel mai bun caz browser-ul vostru va va ignora eforturile. Amintiti-va ca sigurul mod de a face un browser sa afiseze textul conform dorintelor voastre este sa folositi tag-urile HTML potrivite. De asemenea

trebuie sa va aduceti aminte ca browser-ul va sti ca un document este in format HTML doar daca ati salvat fisierul respectiv cu extensia .HTML sau .HTM (daca sistemul vostru nu suporta extensii mai lungi de trei caractere). Sa intelegem tag-urile HTML Asa cum am spus si mai sus browser-ul vostru afiseaza pagina interpretind tag-urile pe care le inserati in text. Spre exemplu, daca doriti ca un text sa apara aldin, puneti in fata si in spatele lui tag-urile necesare. In general tag-urile au urmatorul format: <TAG>Textul care va fi afectat de tag</TAG>, unde TAG este un cod care specifica efectul pe care il doriti aplicat asupra textului. Tag-urile sunt delimitate de <>, care le diferentiaza de textul normal. De exemplu, tag-ul pentru bold este <B>. Deci, daca doriti ca textul "Ana are mere" sa apara ingrosat, va trebui sa tastati urmatoarele: <B>Ana are mere</B> Structura unui document HTML Scheletul Pentru a crea un document HTML, trebuie sa creati un schelet, citeva tag-uri care vor aparea de fiecare data. Documentele HTML vor incepe intotdeauna cu tag-ul <HTML>. In mod similar, documentul se va incheia cu tag-ul </HTML>. Urmatorul pas va fi impartirea documentului in doua sectiuni: antet si corp. Pentru a defini antetul, adaugati tag-ul <HEAD> imediat sub tag-ul <HTML>. De asemenea, antetul se va incheia cu tag-ul </HEAD>. Pentru a defini corpul plasati tag-ul <BODY> (nu uitati tag-ul </BODY> pentru a incheia sectiunea) sub antet. Prin urmare, scheletul unui document HTML, cu care e bine sa incepeti, va arata in felul urmator: <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML>

Titlul paginii
Titlul paginii nu trebuie confundat cu titlul fisierului in care va salvati munca. Daca cineva foloseste un browser grafic (ca Netscape, Mozilla sau Internet Explorer) pentru a va vedea pagina, titlul apare pe bara de titlu a ferestrei navigatorului. Pentru a defini un titlu delimitati textul cu tag-urile <TITLE> </TITLE>. De exemplu, daca doriti ca pagina sa se numeasca "O pagina", veti scrie: <TITLE>O pagina</TITLE>

Retineti ca titlul il veti plasa in sectiunea antet, asa incit documentul HTML va arata in felul urmator: <HTML> <HEAD> <TITLE>O pagina</TITLE> </HEAD> <BODY> </BODY> </HTML> Trebuie sa retineti citeva lucruri generale in legatura cu titlurile: Titlul nu trebuie sa fie prea lung; daca titlul are mai mult de 50-60 de caractere browserul il va scurta, deoarece nu are loc destul in bara de titlu; Titlul trebuie sa fie sugestiv. De exemplu, daca cuiva ii place pagina voastra si va dori sa faca o legatura catre ea, browserul ii va arata titlul paginii voastre in lista de legaturi, de aceea este important ca persoana sa stie ce contine pagina. Un exemplu de pagina cu text : Acum este timpul sa umplem pagina cu informatie. Pentru cea mai mare parte, puteti tasta textul intre tag-urile <BODY> si </BODY>, asa cum urmeaza: <HTML> <HEAD> <TITLE>O pagina</TITLE> </HEAD> <BODY>Text care apare in pagina Web.</BODY> </HTML> Inainte de a incepe, sint citeva lucruri pe care trebuie sa le stiti. Puteti alinia si textul, sau sa creati un efect interesant prin adaugarea unor spatii? Browserele vor ignora spatiile suplimentare, deoarece filozofia Web-ului este sa lase tagurile HTML sa faca formatarea textului. (Pentru a realiza totusi acest lucru puteti folosi tag-ul <PRE>, despre care vom vorbi mai tirziu). Browserele vor ignora de asemeni "tab-urile" si "enter-urile". Pentru voi pare rezonabil sa incepeti un paragraf apasind "Enter", dar nu si pentru HTML. Daca documentele HTML sunt text pur si simplu, veti crede ca nu puteti folosi caractere speciale cum ar fi " sau & . Din fericire nu este asa. HTML are si pentru acestea coduri speciale, dar si despre ele vom vorbi mai tirziu. Acelasi lucru este valabil si pentru caracterele <>, cind nu delimiteaza tag-urile. Pentru cei care folosesc procesoare de text, asa cum este de exemplu Microsoft Word, trebuie repetat ca browserul va ignora orice incercare de formatare a textului. Mai mult, un document care contine formatare de text nu este un fisier pur text si browser-ul ar putea protesta vehement . Un tag care nu face "nimic"

Acest tag nu afiseaza nimic atunci cind browser-ul citeste pagina. Forma generala a acestui tag este: <!--un comentariu aici --> Acest tag va foloseste atunci cind doriti sa faceti un comentariu care nu va apare insa in pagina de Web vizualizata in navigator (de exemplu atunci cind vreti sa nu uitati ceva): <HTML> <HEAD> <TITLE> O pagina</TITLE> </HEAD> <BODY> Nota mare la testul HTML <!-- Voi adauga aici o informatie --> </BODY> </HTML>

Formatarea textului
Cum facem paragrafe Asa cum am mentionat mai sus, daca scrieti o linie, apsasati Enter si scrieti o alta linie, browser-ul le va afisa pe aceeasi linie, ca si cum Enter-ul nici nu ar fi fost apasat. Daca aveti nevoie sa scrieti un paragraf nou trebuie sa folositi tag-ul <P>. De exemplu: <HTML> <HEAD> <TITLE>O pagina</TITLE> </HEAD> <BODY> Prima linie. <P> A doua linie. </BODY> </HTML> Tag-ul </P> exista, dar nu este folosit in HTML deoarece inceputul unui nou paragraf inseamna sfirsitul precedentului. Cum facem paragrafe? Cele mai multe browsere suporta patru stiluri de formatare a textului: bold, italic, underline si monospace. Stilul subliniat este relativ nou in formatul HTML, dar ultimele versiuni de Netscape si Internet Explorer suporta si acest stil.

Stilul textului Bold Italic Underline Monospace

Tag-ul de inceput <B> <I> <U> <TT>

Tag-ul de sfirsit </B> </I> </U> </TT>

Iata un exemplu care ilustreaza folosirea stilurilor: <HTML> <HEAD> <TITLE>Stiluri de formatare a textului</TITLE> </HEAD> <BODY> Nu stiu ce stil sa aleg: <B>bold </B>, <I> italic</I>, <U>underline</U> sau <TT> monospace</TT>. </BODY> </HTML> Stilurile pot fi de asemeni combinate. Daca, spre exemplu, aveti nevoie de un text bold italic (mai rar), aceasta se poate realiza in felul urmator: <B><I>Iata un text bold italic</I></B> Observatie: Atentie la imbricarea tagurilor. Ca regula, fara exceptii, trebuie inchise perechea de taguri cea mai apropiata, ca in exemplul de mai sus si nu: <B><I>Iata un text bold italic</B></I> Tag-uri pentru programatori Una dintre cele mai comune intrebuintari ale HTML este scrierea de documentatie pentru programe. Iata citeva tag-uri care pot fi folosite in acest scop. Ele fac parte din setul de specificatii care a venit odata cu standardul HTML 2.0.

Tag <CODE></CODE> <KBD></KBD> <SAMP></SAMP> <VAR></VAR> Citate, definitii, adrese

Semnificatie Linii de program Exemplu Variabila

In general afisat de browser ca Monospatiat (ca si TT) Monospatiat Italica

Text introdus de la tastatura Monospatiat

In specificatiile standardului se afla si alte tag-uri, folosite de data aceasta nu de programatori, ci de tipografi sau publicisti: Tag <CITE></CITE> Semnificatie Citat blibliografic In general afisat de browser ca Italic Text aliniat si la stinga si la dreapta Text normal Italic

<BLOCKQUOTE></BLOCKQUOTE> Bloc de text citat <DFN></DFN> <ADRESS></ADRESS> Definitie Adresa (orice tip)

Utilizarea simbolurilor
Vorbeam inainte de caracterele speciale. Acestea se pot afisa folsind codurile lor. De exemplu puteti afisa caracterul (cent) folosind fie codul "&#162;" fie "&cent;" dupa cum urmeaza: Ai o moneda de 50&#162; care se vede: "Ai o moneda de 50?" sau Ai o moneda de 50&cent; care se vede la fel ca mai sus. Tabelul urmator contine unele caractere mai des folosite si codurile corespunzatoare.

Simbol < > c L Y

Codul caracterului (numeric) &#060; &#062; &#162; &#163; &#165; &#169; &#174; &#176;

Codul caracterului (dupa nume) &lt; &gt; &cent; &pound; &yen; &copy; &reg; &deg;

Impartirea paginii cu ajutorul heading-urilor

Multi creatori de pagini de Web isi impart documentele in mai multe sectiuni, ca si capitolele intr-o carte. Pentru a separa aceste sectiuni, puteti folosi heading-urile. Pentru a scoate titlurile in evidenta HTML are o serie de tag-uri care afiseaza textul cu font mai mare si bold. Sint sase tag-uri in total, de la <H1> care folosese cel mai mare font, pina la <H6>, care foloseste cel mai mic font. Iata un mic exemplu: <HTML> <HEAD> <TITLE>Formatarea textului</TITLE> </HEAD> <BODY> <H1>Invatam impreuna HTML </H1> <H2>Cum sa infrumusetezi textul</H2> <H3>Stiluri de baza pentru formatarea textului</H3> <H3>Cum sa combini stilurile</H3> <H3>Caractere speciale</H3> <H2>Folosirea heading-urilor</H2> <H2>Citeva notiuni suplimentare despre formatare</H2> <H3>Cum sa folosesti un text preformatat</H3> </BODY> </HTML> Cum folosim un text preformatat? Spuneam ca browsere-le Web ignora spatiile, TAB-urile si ENTER-urile. Totusi putem forta browser-ele sa le accepte folosind tag-ul <PRE>. "PRE" este prescurtarea de la "preformatat", si in mod normal folositi acest tag pentru a afisa textul exact asa cum se

afla intr-un document sursa. Aici preformatat inseamna un text in care alinierea a fost facuta folosind spatii, TAB-uri si ENTER-uri. Liniile orizontale Citeodata poate fi util sa separati capitolele documentului. Tag-ul <HR> introduce o linie orizontala in document. O scurta pauza Atunci cind folositi tag-ul <P> pentru a separa textul in paragrafe, browser-ul nu numai ca incepe un paragraf nou, dar lasa si o linie goala dupa paragraful anterior. Daca nu doriti aceasta linie, folositi tag-ul <BR>. Iata un exemplu: <HTML> <HEAD> <TITLE>Luceafarul</TITLE> </HEAD> <BODY> <H2>Luceafarul de Mihai Eminescu</H2> A fost odata ca-n povesti,<BR> A fost ca niciodata,<BR> Din rude mari imparatesti<BR> O prea frumoasa fata.<HR> </BODY> </HTML>

Sintaxa fundamentala I (completare)

Culori Culoarea reprezinta o caracteristica extrem de importanta a unei pagini Web. Utilizata cu grija si masura, ea poate imbunatati substantial aspectul paginii, facind-o mai lizibila si mai atractiva, iar textul mai usor de parcurs. Pe de alta parte, utilizarea excesiva sau inadecvata a culorilor poate transforma un text de calitate intr-un fel de caleidoscop obositor, greu de urmarit, care ii va determina pe multi vizitatori sa renunte la a-l mai parcurge. Datorita faptului ca ea reprezinta un atribut al multor elemente ale documentelor Web (text, fundaluri, margini, link-uri), am optat pentru prezentarea detaliata a modului de utilizare al culorilor. Sistemul de definire a culorilor Sistemul general utilizat pentru definirea culorilor este RGB prin care sunt specificate pentru fiecare culoare care sunt cantitatile de rosu (Red), verde (Green) si albastru (Blue) care o compun. In HTML orice culoare este desemnata printr-un cod de 6 cifre hexazecimale, dintre care primele doua reprezinta cantitatea de rosu, cele doua din mijloc, cantitatea de verde, iar ultimele doua cantitatea de albastru. Sistemul hexazecimal este un sistem de numeratie care foloseste 16 cifre, existind urmatoarea corespondenta intre cifrele hexazecimale si cele zecimale:

10

0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

0 1 2 3 4 5 6 7 8 9 A B C D E F

De exemplu, #FF0000 este codul pentru rosu. Semnificatia acestui cod este urmatoarea: cantitatea de rosu este maxima, iar cantitatile de verde si albastru sunt egale cu 0. Codul pentru verde pur este #00FF00 iar pentru albastru este #0000FF. Deoarece uneori definirea culorii prin intermediul codului sau hexazecimal este incomoda, standardul HTML stabileste un set de culori standard. In acest caz, pentru valoarea atributului de culoare se utilizeaza direct numele culorii, ca in exemplul de mai jos, in care se seteaza culoarea magenta pentru linkurile vizitate: <BODY vlink="magenta">

Numele si codul citorva culori stabilite in standardul Cod hexazecimal HTML sint urmatoarele: aqua black blue fuchsia gray green lime maroon navy olive purple red silver teal yellow white #00FFFF #000000 #0000FF #FF00FF #808080 #008000 #00FF00 #800000 #000080 #808000 #800080 #FF0000 #C0C0C0 #008080 #FFFF00 #FFFFFF Mai trebuie mentionat faptul ca se pot utiliza, pe linga culori, 100 de nuante de gri (gray). Ele sunt numerotate de la 1 la 100, "gray 1" fiind nuanta cea mai inchisa, iar "gray 100" cea mai deschisa.

11

Formatarea caracterelor Eticheta care se foloseste pentru a da unui caracter sau unui sir de caractere (unui text) aspectul dorit este eticheta container <FONT> </FONT>. Intre eticheta de inceput si cea de sfarsit se insereaza textul sau caracterul ale carui caracteristici dorim sa le stabilim. Inainte de a discuta despre atributele etichetei <FONT> sa luam un exemplu: <FONT size="2" color="red" face="arial">Ion Luca Caragiale </FONT> Efectul liniei de mai sus este afisarea textului "Ion Luca Caragiale" cu fonturi Arial, de culoare rosie si de marime egala cu 2 puncte. Sa analizam succesiv cele trei atribute ale etichetei <FONT>: size - dimensiunea textului - poate fi un numar intre 1 si 7 (dimensiuni absolute), intre -1 si -3 sau intre +1 si +4 (dimensiuni relative, adica raportate la dimensiunea deja existenta a fontului). Dimensiunea prestabilita (default) a fonturilor este 3. Daca dimensiunile mentionate depasesc intervalul 1-7, browserul rotunjeste automat valorile pentru a le incadra in acest interval. color - culoarea textului - este culoarea cu care va fi afisat textul prezent intre etichete (in exemplul nostru, "Ion Luca Caragiale"). face - tipul de font - determina tipul de font care va fi utilizat la afisarea textului. Tipurile cele mai uzuale sint: 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 virgula. Precizarea mai multor fonturi ajuta in eventualitatea cand primul tip indicat nu este instalat pe calculatorul celui care viziteaza pagina, si se face ca in exemplul de mai jos: <FONT face="arial, verdana, times new roman"> In aceasta situatie browserul va alege singur din lista primul tip de font pe care il recunoaste, ignorandu-le pe urmatoarele.

Sintaxa fundamentala II
Liste Generalitati Am vazut mai inainte ca putem folosi tag-ul <BR> pentru a forta browser-ul sa afiseze un capat de linie. Acest lucru poate fi folosit pentru a crea o lista. Totusi exista si o metoda mai buna. HTML contine citeva tag-uri special concepute spre a va oferi posibilitatea sa

12

afisati o lista. De fapt HTML ofera nu mai putin de trei stiluri diferite de liste: ordonate, neordonate si definitii. Liste ordonate Daca vreti sa afisati "Top 100" sau "clasamentul campionatului de fotbal", nu trebuie sa adaugati voi numerele inainte de fiecare element din lista, browser-ul o va face pentru dumneavoastra. Listele ordonate folosesc doua tipuri de tag-uri: intreaga lista este delimitata de tag-urile <OL> si </OL>; fiecare element al listei este precedat de tag-ul <LI>; Un model general arata cam asa: <OL> <LI>primul element <LI>al doilea element <LI>al treilea element <LI>s.a.m.d. </OL> Daca doriti, puteti infrumuseta/evidentia unele elemente ale listei, cu tag-urile pentru stilul textului sau pentru heading-uri. De asemenea, un element poate fi o legatura catre o alta pagina. Elementele listei pot fi oricit de lungi, nu exista o limitare a numarului de caractere care poate fi folosit. De exemplu, puteti folosi o lista ordonata pentru a descrie pasii unui alg Liste neordonate Daca vreti doar sa enumerati citeva elemente, o idee buna ar fi sa folositi o lista neordonata. Browser-ul va afisa, acolo unde i se cere, un punct sau un patratel, numit "bullet" pentru a delimita elementele listei. Tag-urile pentru liste neordonate sunt destul de asemanatoare cu cele pentru liste ordonate: lista este delimitata de tag-urile <UL> si </UL>, iar fiecare element este precedat de acelasi tag <LI>: <UL> <LI>Primul element. <LI>Al doilea element. <LI>Al treilea element. <LI>Iata o lista neordonata! </UL> Liste cu definitii In sfirsit, listele de definitii sint folosite pentru liste cum ar fi dictionarele, care cuprind pe de o parte un termen si pe de alta parte o definitie a termenului. Pentru a marca aceste cimpuri, aveti nevoie de doua tag-uri diferite. Temenul este precedat de tag-ul <DT>, si definitia de tag-ul <DD>, dupa cum urmeaza: <DT>termen<DD>definitia temenului Intreaga lista este delimitata de tag-urile <DL> si </DL>, ca in exemplul urmator:

13

<DL> <DT>primul termen <DD>definitia primului termen <DT>al doilea termen <DD>definitia celui de-al doilea termen <DT>al treilea termen <DD>definitia celui de-al treilea termen </DL> Mentionam ca unul dintre tag-urile <DT> sau <DD> poate fi omis. Cele trei tipuri de liste HTML pot fi de asemenea combinate dupa cum este nevoie. De exemplu, daca aveti o lista ordonata care descrie pasii unei proceduri si la un pas aveti nevoie sa argumentati mai pe larg folosind o lista neordonata, atunci puteti include o lista neordonata dupa termenul numerotat. Iata un exemplu: <HTML> <HEAD> <TITLE>Lista de cumparaturi</TITLE> </HEAD> <BODY> Cumparaturi: <OL> <LI>caiete <UL> <LI>de matematica <LI>dictando </UL> <LI>cerneala albastra <LI>creioane </OL> </BODY> </HTML> Legaturi (nu de zarzavat) URL-uri Inainte de a vorbi despre cum trateaza HTML aceasta problema, trebuie sa discutam despre URL, in general. Asa cum am mentionat mai inainte, o legatura hypertext este un cuvint sau fraza cheie intr-o pagina Web care, atunci cind utilizatorul face clic pe ea, il transporta la un alt document Web (la un alt server Web). Acel document are adresa sa proprie, numita "Uniform Resource Locator", URL pe scurt. Deci, pentru ca o legatura hypertext sa functioneze corect, trebuie cunoscuta adresa corecta a documentului spre care faceti legatura. Forma de baza a oricarui URL este: cum://cine/unde/ce Sa detaliem un pic: Cum Prima parte a unui URL specifica exact cum se transmit datele prin retea. Aceasta se

14

cheama protocol. Din fericire, nu trebuie sa stiti prea multe despre protocoale. Tot ceea ce trebuie sa cunoasteti este ce protocol foloseste fiecare resursa (vom stabili acest lucru mai tirziu, in acest capitol). Deci un URL incepe cu protocolul folosit, urmat de doua puncte ( si de doua slash-uri (//). In cazul URL-ului unei pagini de Web, acesta arata asa: http:// Cine Urmatoarea parte a adresei specifica unde este localizata pagina pe Internet. Este vorba de fapt de numele calculatorului, numit si hostname. Spre exemplu, una dintre cele mai vizitate pagini este www.yahoo.com. Daca adaugam aceasta parte la cea cu protocolul, acum adresa arata asa: http://www.yahoo.com Unde In aceasta parte se indica unde anume este plasata pagina, in calculator. Aceasta inseamna, de obicei, directorul in care este stocata pagina. Daca il adaugam la ceea ce stim pina acum, adresa devine: http://www.mycomputer.ro/pages Ce Aceasta parte se refera la numele fisierului pe care vreti sa il folositi. Pentru o pagina de Web veti folosi un document text care contine text si coduri HTML. Iata cum arata un URL complet: http://www.mycomputer.ro/pages/mypage.html Exemplu de URL: http://www.cnn.com/index.html Crearea legaturilor in HTML Tag-urile HTML folosite pentru a crea o legatura sint <A> si </A> ("A" vine de la ancora). Tag-ul <A> este un pic diferit de celelalte tag-uri. El nu se foloseste de unul singur ci in combinatii. Iata cum functioneaza: <A HREF="URL"> HREF vine de la Hypertext REFerence. Iata un exemplu de linie care face o legatura catre o pagina:

15

<A HREF= "http://www.mycomputer.ro/pages/mypage.html"> Totusi, mai lipseste ceva. Trebuie sa ii aratam si cititorului un text descriptiv pe care sa faca clic. Iata cum se face acest lucru: <A HREF="URL">Un text aici</A> Hyperlink-urile sunt impartite in general in doua categorii: interne si externe. O legatura externa este una care trimite cititorul intr-o alta pagina, care poate sa fie in alt director, pe alt calculator sau chiar in acelasi director cu pagina curenta. O legatura interna (o ancora) trimite cititorul intr-o alta parte a aceluiasi document. Pina acum am descris legaturi externe. Unele din paginile dumneavoastra de Web vor fi lungi si veti simti nevoia sa faceti trimiteri la anumite parti ale documentului, poate chiar sa faceti un cuprins. Pentru a realiza acest lucru se foloseste un tag-ancora: <A NAME="Name">Text </A> Mai explicit: daca vreau sa denumesc acest capitol "Sectiunea 1", voi folosi urmatoarea ancora: <A NAME="Sectiunea 1"> Cum sa faci legaturi in HTML </A> Acum, cind creez cuprinsul paginii, voi face o legatura catre acest capitol folosind un tag <A> obisnuit. Pentru ca browser-ul de Web sa nu confunde numele ancorei cu numele unui alt document, voi adauga semnul "#" inaintea ancorei: <A HREF="# Sectiunea 1"> Cum sa faci legaturi in HTML </A> Trebuie mentionat ca puteti adauga ancore unui link catre o alta pagina. De exemplu, daca aveti o pagina despre piticii din "Alba ca Zapada" si vreti sa ajungeti direct la "Mutulica", trebuie sa procedati in felul urmator: <A HREF="pitici.html# Mutulica"> Informatii despre Mutulica</A> Atunci cind paginile dumneavoastra se afla in directoare diferite si vreti sa folositi legaturi relative, este util sa stabiliti un director relativ la care sa scrieti legaturile. Aceasta se face cu tag-ul <BASE>, a carui forma generala este: <BASE HREF="nume director"> Tag-ul <BASE> trebuie sa apara numai in antetul documentului Crearea unei legaturi la o adresa email Puteti face o legatura nu numai catre o pagina de Web ci si catre alte lucruri, cum ar fi spre exemplu o adresa de FTP, UseNet sau e-mail. In acest capitol ne vom concentra asupra legaturilor catre o adresa de e-mail. Atunci cind se executa un clic pe o legatura

16

catre o adresa de e-mail, browser-ul va afisa un ecran din care se poate trimite e-mail la adresa specificata. Acest tip de legatura se mai numeste si legatura mailto deoarece trebuie sa includeti cuvintul mailto in tag-ul <A>. Iata care este forma generala a acestui tag: <A HREF="mailto:adresa voastra de e-mail">textul afisat de browser</A> Alte tipuri de legaturi Resurse FTP (director) FTP (fisier) Gopher UseNet Telnet

URL ftp://hostname/directory/ ftp://hostname/directory/fisier gopher://hostname/ news:numegrup telnet://hostname

Imagini Formatele fisierelor grafice

Pina acum am spus ca paginile HTML trebuie sa contina numai text. O intrebare fireasca este atunci, cum isi gasesc locul imaginile in paginile de Web? Raspunsul este urmatorul: imaginile nu sint incluse in fisierele paginilor de Web. Adaugind un tag in pagina comunicati browser-ului sa introduca o imagine in locul indicat. Acesta, prin urmare, deschide fisierul corespunzator imaginii si o afiseaza. Fisierele grafice sint scrise respectind mai multe standarde, astfel ca exista mai multe formate de fisiere grafice, cum ar fi: GIF, JPEG, BMP, PCX, TIFF, PNG, si asta ca sa le enumeram pe cele mai cunoscute. HTML nu cunoaste toate aceste formate ci doar doua. Unul din ele este formatul GIF, folosit in proportie de peste 90% de creatorii de pagini de Web. Toate browser-ele grafice suporta acest format, deci nu veti avea probleme de incompatibilitate daca il folositi. Celalalt format folosit la crearea de pagini de Web, din ce in ce mai mult, este JPEG. Avantajul este ca fiind data aceeasi imagine rezulta un fisier mai mic, deci va lua mai putin timp pentru a fi afisat de browser. De unde facem rost de imagini? Daca oricine poate tasta un text, nu acelasi lucru se poate spune despre crearea de imagini, lucru care necesita talent. Daca sinteti inzestrat cu un astfel de talent, creati imaginea folosind programul dumneavoastra preferat si salvati-o in format GIF. Daca programul va ofera mai multe optiuni, folositi formatul GIF87 sau, si mai bine, GIF89. Daca programul pe care il aveti nu poate salva imaginile sub format GIF, exista programe care pot face conversia. Cei care sunt mai putin talentati trebuie sa obtina imaginile din alte surse. 17

Imaginile si codul HTML

Asa cum spuneam, exisa tag-uri HTML care indica browser-ului ca trebuie sa afiseze o imagine: tag-ul <IMG>. Iata forma sa generala: <IMG SRC="numefisier"> Iata un exemplu concret. Daca unele dintre paginile dumneavoastra nu sunt gata, le puteti inlocui temporar cu una de genul: <HTML> <HEAD> <TITLE>Detour!</TITLE> </HEAD> <BODY> <IMG SRC="construction.gif"> <H2>Beware of the falling bricks!</H2> <HR> Aceasta pagina este inca in constructie. Va rog sa reveniti. <P> <A HREF="homepage.html">Executati un clic aici pentru a va intoarce in pagina de inceput</A> </BODY> </HTML> Pentru ce imagini? Imaginile sint in esenta inutile daca nu sunt introduse intr-un context adecvat. Iata la ce puteti folosi imaginile (bineinteles, nu sint singurele posibilitati): logo-ul companiei intr-o pagina legata de afaceri; imagini intr-o reclama; grafice; fonturi neobisnuite; semnatura dumneavoastra; o linie mai interesanta decit tag-ul <HR>; prezentari de fotografii (in prealabil scanate); bullet-uri grafice la liste. Va puteti intreba, spre exemplu, cum sa realizati in practica aceasta ultima idee. Iata un exemplu care introduce imaginea unei bile albastre (blueball.gif) in locul unui bullet obisnuit: <DL> <DD><IMG SRC="blueball.gif">Unu <DD><IMG SRC="blueball.gif">Doi <DD><IMG SRC="blueball.gif">Trei

18

</DL> Observatie: Chiar daca imaginile dau culoare unei pagini de Web, asta nu inseamna ca trebuie sa supraincarcati pagina, deoarece va lua mult timp pina se va incarca in browser-ele celor care doresc sa o citeasca. Pentru cei care au o legatura mai inceata, sau un modem mai lent, incarcarea unei pagini supraincarcate de grafice poate deveni un calvar. Alinierea textului cu imaginile Daca inserati imaginea in text, browser-ul va afisa imaginea si textul pe aceeasi linie. Aceasta poate sa para util, dar puteti avea probleme cu alinierea (mai ales cu imaginile mari), deoarece baza imaginii se aliniaza cu baza textului. Totusi, puteti schimba alinierea, astfel incat textul sa se alinieze cu marginea superioara a imaginii sau chiar cu centrul. Pentru aceasta, tag-ul <IMG> are un atribut suplimentar, ALIGN, pe care il puteti folosi in felul urmator: <IMG SRC="numefisier" ALIGN=TOP| MIDDLE| BOTTOM> unde TOP| MIDDLE| BOTTOM inseamna ca puteti folosi fie valoarea TOP, fie MIDDLE, fie BOTTOM pentru a specifica aliniamentul. Navigatoarele text si imaginile Atunci cind browser-ul nu suporta grafica, ci numai text (asa cum este de exemplu Lynx), acesta va afisa textul "[IMAGE]" in locul unde apare tag-ul <IMG>, ignorind afisarea imaginii. Aceasta face ca pagina sa nu arate prea frumos, si poate sa dea nastere la confuzii. Puteti evita acest lucru folosind un alt atribut suplimentar: ALT. Acesta este folosit pentru a afisa un text acolo unde browsere-le afiseaza imaginea. Se foloseste in felul urmator: <IMG SRC="numefisier" ALT="text alternativ"> unde "text alternativ" este un text care descrie imaginea. In multe cazuri, totusi, este bine sa nu afisam nimic acolo unde ar trebui sa fie poza, adica sa afisam un spatiu, in felul urmator: <IMG SRC="numefisier" ALT=" "> Chiar daca va ginditi ca cei care navigheaza pe Internet folosind browsere in mod text sunt putini, trebuie sa stiti ca majoritatea browsere-lor grafic orientate ofera optiunea sa nu afiseze imagini (utila mai ales celor care au conexiunea inceata) si este destul de frecvent folosita de unii utilizatori. Mai multe despre imagini si legaturi Ceea ce am spus pina acum despre imagini nu este totul. Puteti permite cititorului paginii Web sa acceseze doua pagini diferite executind clic pe portiuni distincte ale aceleiasi imagini. Acest lucru se numeste image mapping. Construirea unei astfel de imagini este

19

mai complicata si se face in trei pasi: alegerea imaginii, marcarea zonelor pe care se va executa clic si plasarea informatiei despre legaturi. Pentru a putea folosi image mapping trebuie sa aveti un program-server special care sa ruleze pe serverul dumneavoastra Web. Atunci cind un cititor executa clic intr-o pagina, browser-ul determina coordonatele locului unde s-a executat acel clic, si trimite numerele acestui program, impreuna cu numele fisierului care corespunde zonei in care se afla aceste coordonate. Programul trimite o comanda asemanatoare celei pe care o genereaza browser-ul in cazul unei legaturi hypertext. Pentru a determina care parti din imaginea dumneavoastra sunt legate cu un anume URL, programul special trebuie sa aiba un fisier cu extensia .MAP, situat intr-un director care variaza de la caz la caz (consultati documentatia sistemului vostru de operare si cea pus la dispozitie de ISP-ul vostru), care sa contina coordonatele zonelor in cauza. Un fisier de acest tip arata cam in felul urmator: # # fisier .MAP # legatura implicita default help.html # pagina principala rect index.HTML 3,2 86,39 # pagina cu produse rect produse.html 92,3 189,39 # pagina cu servicii rect servicii.html 194,2 294,36 # sfarsit Puteti defini diferite forme in fisier. Aceste zone corespund portiunilor din imagine prin care doriti sa faceti legatura. Fiecare set de coordonate inseamna un punct in imagine. Coordonatele sunt exprimate in pixeli, fiecare pereche de numere reprezentind numarul de pixeli in punctul dreapta jos, respectiv stanga sus al imaginii. Fiecare forma necesita un numar diferit de puncte pentru a fi corect definita. Iata in continuare cele mai folosite forme si numarul de puncte necesare pentru a fi definite: rect (patrat) necesita coordonatele a doua puncte: stinga sus si dreapta jos; circle aveti nevoie de coordonatele centrului si a unui punct de pe circumferinta, astfel incit cercul sa fie calculat dupa raza sa; punct un punct necesita o sigura coordonata. Daca aveti mai multe puncte definite, programul server decide de care dintre ele este mai aproape punctul in care ati executat clic (bineinteles daca nu este in alta zona "fierbinte" - hotspot); poly (poligon) puteti folosi pina la 100 de coordonate pentru a determina virfurile unei regiuni poligonale; default orice suprafata care nu este in interiorul unei zone fierbinti este considerata parte a suprafetei implicite, atit timp cit nu sunt definite puncte. Daca ati definit puncte, programul server il va alege pe cel mai apropiat de locul unde ati executat clic-ul. Dupa ce ati terminat fisierul .MAP, sunteti gata si adaugaii o legatura intre el si pagina de Web. Iata foma generala a unui astfel de tag:

20

<A HREF="URL"><IMG SRC="imagine.gif" ISMAP></A> URL-ul pe care vreti sa il accesati nu este o pagina de Web, deoarece imaginea s-ar comporta ca un intreg. Voi doriti ca URL-ul sa acceseze fisierul care defineste zonele. Trebuie sa stiti unde se stocheaza pe hard-disk aceste fisiere pentru ca browser-ul sa aiba acces la ele. Unele servere va lasa sa salvati fisierul dumneavoastra in orice director. Iata un exemplu in care fisierul .MAP se afla in directorul curent: <A HREF="fisier.map"><IMG SRC="imagine.gif" ISMAP></A> Alte servere cer ca fisierele .MAP sa se gaseasca in alte directoare, cele mai obisnuite fiind /cgi-bin/ sau /bin/, unde sunt stocate de obicei script-urile, adica mini-programele incluse in paginile de Web. Iata un astfel de exemplu: <A HREF="http://hostname/cgi-bin/fi?ier.map"><IMG SRC="imagine.gif" ISMAP></A> sau: <A HREF="http://hostname/bin/fi?ier.map"><IMG SRC="imagine.gif" ISMAP></A> Acestea nu sunt insa sigurele variante. De aceea va trebui sa consultati administratorul dumneavoastra de sistem sau, eventual, un manual mai avansat despre formatul HTML. Multimedia si HTML In paginile dumneavoastra puteti sa includeti nu numai imagini, ci si alte obiecte multimedia, cum ar fi filme sau sunete. Acestea se introduc ca si celelalte legaturi, cu mentiunea ca trebuie sa folositi pentru fiecare protocolul potrivit. Pentru cea mai mare parte din acestea, protocolul "http://" functioneaza, fiind suficient sa scrieti: <A HREF="iwanttobreakfree.wav">Iata cum cintam eu la 80 de ani</A> Un gest frumos ar fi sa indicati dimensiunile fisierului, din moment ce unele dintre acestea pot sa fie destul de voluminoase. Aici e vorba evident de descarcarea acestor fisiere pe calculatoarele voastre si nu de diferitele modalitati de streaming.

Sintaxa fundamentala III

Notiuni introductive Toata lumea stie cum arata un tabel. Totusi, ca sa evitam orice confuzie, trebuie sa enumeram elementele unui tabel. Linie un sir orizontal de date; Coloana un sir vertical de date; Celula ceea ce se afla la intersectia dintre o linie si o coloana;

21

Capul de tabel prima linie folosita de obicei pentru a eticheta coloanele (si prima coloana poate fi folosita pentru aeticheta liniile). Pentru a desena un tabel puteti folosi si tag-ul <PRE>. Iata acum avantajele folosirii tabelelor: poate fi destul de dificil sa aliniezi textul corect; fiecare celula intr-un tabel e de sine statatoare, o puteti modifica independent decelelalte. Aceasta inseamna ca daca ati modificat o celula nu trebuie sa realiniati intreg tabelul; tabelele pot include nu numai text ci si imagini si legaturi hypertext; cele mai multe tag-uri, ca de exemplu <B>, <I>, <H1>, pot fi folosite in tabele. Observatie: browsere-le in mod text nu afiseaza tabele, pur si simplu ignora astfel de taguri. Puteti sa desenati tabele pentru aceste browsere folosind caractere cum ar fi -,+,= sau | pentru a delimita celulele. Mai jos este prezentat un astfel de exemplu. +------------------------+ +|+ +------------------------+ Cel mai simplu model de tabel Tabelele trebuie delimitate de tag-urile <TABLE> si </TABLE>, daca doriti ca tabelul sa aiba contur, folositi atributul BORDER, in felul urmator: <TABLE BORDER> (incheiati tabelul tot cu tag-ul </TABLE>. Acum sa adaugam o linie, delimitind-o cu tag-urile <TR>si</TR>, intre <TABLE> si </TABLE>: <TABLE BORDER> <TR> </TR> </TABLE> Urmeaza sa adaugati date in tabel, cu ajutorul tag-urilor <TD>si</TD>, intre tag-urile <TR>si</TR>. Daca doriti ca tabelul dumneavoastra sa aiba trei coloane, faceti in felul urmator: <TABLE BORDER> <TR> <TD>1956</TD> <TD>Varza</TD> <TD>30kg</TD> </TR> </TABLE> Aduceti-va aminte ca intre tag-urile <TD> si </TD> puteti pune: text; tag-uri de formatare a textului: <B>,<I>, etc; legaturi; liste; imagini.

22

Mai multe linii intr-un tabel Odata ce ati terminat prima linie, puteti sa repetati procedura pentru a desena mai multe. <TABLE BORDER> <TR> <TD>1956</TD> <TD>Varza</TD> <TD>30kg</TD> </TR> <TR> <TD>1956</TD> <TD>Ridichi</TD> <TD>25kg</TD> </TR> <TR> <TD>1956</TD> <TD>Rosii</TD> <TD>30kg</TD> </TR> </TABLE>

Capatul de table Este mai usor pentru cititor daca etichetati fiecare coloana. Pentru a defini un cap de tabel folositi tag-urile <TH> si </TH>: <TR> <TH>Prima coloana</TH> <TH>A doua coloana</TH> <TH>Cam asa ceva</TH> <TR> Diferenta intre tag-ul <TH> si <TD>, cu care se aseamana, este ca primul este afisat ingrosat si centrat in raport cu celula. Ultimul element al unui tabel este explicatia, introdusa cu tag-ul <CAPTION>. Aceasta poate sa fie asezata fie la inceputul, fie la sfirsitul tabelului, in felul urmator: <CAPTION ALIGN=TOP|BOTTOM>Text explicativ</CAPTION> Tag-urile pe care le-ati invatat pina acum sunt suficiente pentru a desena un tabel. Cele care urmeaza va vor ajuta sa il faceti mai aratos. Pina acum textul era aliniat la stinga celulei. Folosind atributul ALIGN al tag-urilor <TD> sau <TH>, puteti face ca textul sa fie aliniat la stinga, la dreapta sau sa fie centrat in raport cu centrul celulei. Iata forma generala a tag-ului:

23

<TD ALIGN=LEFT|CENTER|RIGHT> sau: <TH ALIGN=LEFT|CENTER|RIGHT> Mai mult decit aceasta puteti alinia textul pe verticala, folosind atributul VALIGN al tagurilor <TD> si <TH>: <TD VALIGN=TOP|MIDDLE|BOTTOM> sau: <TH VALIGN=TOP|MIDDLE|BOTTOM> O celula cit doua Atunci cind aveti nevoie ca textul sa se intinda pe mai mult de o coloana, puteti folosi atributul COLSPAN al tag-urilor <TD> si <TH> pentru a-l face sa se intinda atit cit este nevoie: <TD COLSPAN=nr.coloane> sau: <TH COLSPAN=nr.coloane> De asemeni este posibil sa legati in acest fel si liniile, folosind atributul ROWSPAN in tag-urile <TD> si <TH>: <TD ROWSPAN=nr.linii> sau: <TH ROWSPAN=nr.linii>

Mentiuni
Pentru a aplica exemplele practice din suportul HTML este nevoie sa deschideti un fisier gol in Notepad si sa inserati urmatoarele linii de cod (copy-paste de aici): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> </head> <body> </body> </html> Toate exemplele se scriu intre tag-urile <body>......</body>. Salvati apoi fisierul cu extensia .htm sau .html pentru a-l putea vizualiza intr-un browser (de exemplu "practic.html") Mod de lucru Lucrati in Notepad, intr-un fisier .txt. Dupa ce ati adaugat liniile de cod dorite, in principal pe cele mentionate in materiale, modificati extensia .txt in .htm sau .html. In timp ce lasati deschis fisierul in Notepad pentru eventuale modificari, deschideti (cu

24

dublu clic) fisierul redenumit. Se va deschide in browserul setat default in sistemul vostru si va arata la fel cum ar fi aratat pagina HTML daca ar fi fost postata undeva pe Web. Intermezzo - Exemplu analiza de site Simona Serban - Nota 7 pentru Gandul (PDF) Tema pentru acasa Aplicati exemplele de cod din lectiile de HTML pina intelegeti principalele taguri, tehnici si modalitati de lucru. Ce urmeaz? Citeva consideratii asupra fisierelor CSS (seminar .no5). Consultatii Desi consider ca materia e explicata suficient de detaliat si clar pentru a o putea aplica de acasa, doritorii care nu au inteles anumite aspecte ma pot gasi la laborator in ziua de luni, 18 mai, ora 12:00, in G110 pentru a spulbera orice neclaritati din HTML. >sus

25