Colegiul German Goethe

Primele elemente de HTML

Ce reprezinta Html ?
HTML (Hyper Text Markup Language)
Dupa cum spune si denumirea, acest limbaj, care nu este un limbaj de programare, foloseste marcatori, pentru a descrie felul in care vor aparea in browser elementele unei pagini de web.

Marcatorii
Elementul de baza in HTML este marcatorul sau tag-ul. Acesta este un sir de caractere care nu va apare in fereastra browserului, ci indica acestuia modul de afisare a elementelor din pagina de web. Orice marcator incepe cu caracterul < si se termina cu caracterul >. Cea mai mare parte a tagurilor de format HTML au un marcator de inceput(deschidere) si unul de sfarsit(de inchidere) a formatarii. Daca marcatorul de incepere are forma <x> atunci cel de sfarsit va avea forma </x>. Exista insa si marcatori nepereche, care nu au un tag de inchidere, cum ar fi tag-ul folosit pentru a trasa o linie orizontala : <hr> . Odata cu dezvoltarea acestui limbaj, actualmente ajunsi la versiunea HTML5, se recomanda ca tagurile unare(fara pereche sa contina in interior un slash : <hr/> . In acest document veti mai intalni exemple cu marcatori unari in are nu a fost scris slash-ul, documentul fiind destul de vechi. http://en.wikipedia.org/wiki/XHTML
HTML (eXtensible HyperText Markup Language) is a family of XML markup languages that mirror or extend versions of the widely-used Hypertext Markup Language (HTML), the language in which web pages are written. While HTML (prior to HTML5) was defined as an application of Standard Generalized Markup

Language (SGML), a very flexible markup language framework, XHTML is an application of XML, a more restrictive subset of SGML. Because XHTML documents need to be well-formed, they can be parsed using standard XML parsersunlike HTML, which requires a lenient HTML-specific parser. XHTML 1.0 became a World Wide Web Consortium (W3C) Recommendation on January 26, 2000. XHTML 1.1 became a W3C Recommendation on May 31, 2001.XHTML5 is undergoing development as of September 2009, as part of the HTML5 specification.

Exemple de marcatori : pentru a indica browserului sa formateze un text in modul italic, vom scrie textul incadrat de tagurile <i> respectiv </i>

Autor: Prof. Coman Isabela

Colegiul German Goethe <i>Acest text va apare cu caracterele italice </i> <br> va intrerupe randul curent si va anunta browserul ca trebuie sa afiseze elementele urmatoare de pe randul urmator Urmatorul rand scris in codul html va fi scris incepand pe al doilea rand . <i>Acest pe al doilea </i> Rezultatul afisat de browser va fi acesta :

Marcatorul <BR> are efect trecerea la un rand nou si nu are nevoie de un marcator de sfarsit. Unii marcatori pot avea si diverse atribute. De exemplu, marcatorul <HR> produce inserarea in text a unei linii orizontale. Unele dintre atributele acestui marcator este grosimea liniei. Numele atributului este size si reprezinta grosimea liniei in pixeli. Sintaxa unui marcator in cazul folosirii atributelor este : <marcator numeatribut 1= valoare numeatribut2= valoare > Ghilimele sunt obligatorii in cazul in care valoarea atributului contine si spatii. In locul ghilimelelor se poate folosi si apostroful. De exemplu, pentru a desena o linie de grosime2 vom scrie <HR SIZE=2> iar pentru o linie de grosime 5 vom scrie <HR SIZE=5 >.Rezultatul folosirii celor doi marcatori poate fi vizualizat in figura de mai jos.

Autor: Prof. Coman Isabela

Colegiul German Goethe

Atribute comune mai multor marcatori

Exista un anumit numar de atribute care apar la mai multi marcatori. Printre acestia se numara cei lagati de culori, fundaluri, dimensiuni. Atributul pentru culoarea scrisului / desenului poarta de obicei denumirea color. Valoarea acestui atribut reprezinta culoarea cu care va fi scris textul delimitat de marcator sau culoarea cu care va fi desenat elementul grafic esenat de marcator. Formatul acestui atribut poate fi unul din urmatoarele color = nume culoare sau colo r= #RRGGBB. Nume culoare poate lua urmatoarele valori: blsck, navy, blue, green ,teal1,lime, aqua, maron, purple, olive, gry, silver, red, fuchsia, yello sau wite.RRGGBB reprezinta o culoare prin intermediul componentelor rosu (RR), verde (GG),si albastru (BB). Acestea vor fi notate in format hexazecimal si pot lua valori intre 00 (echivalent zecimal 0, nuanta inchisa) si FF (echivlent zecimal 255, nunta deschisa ). Astfel #000000 reprezinta culoarea negru, #0000FF reprezinta culoarea albastra (blue) iar #C0C0C0 reprezinta culoarea gri deschis (silver). O corespondenta completa intre numele de culori si corespondentul RGB poate fi gasita in tabelul de mai jos. In acest tabel sunt prezentate doar culorile principale. In toatal exista 256 * 256 * 256 = 16777216 nuante de culori. Nume culoare ( engleza ) Black Navy Blue Green Teal Lime Aqua Corespondent RGB #000000 #000080 #0000FF #008000 #008080 #00FF00 #00FFFF Autor: Prof. Coman Isabela Nume culoare (romana) Negru Albastu inchis Albastru deschis Verde inchis Verde deschis

Colegiul German Goethe Maroon Purple Olive Gray Silver Red Fuchsia Yellow White #800000 #800080 #808000 #808080 #COCOCO #FF0000 #FF00FF #FFFF00 #FFFFFF Maro

Gri inchis Gri deschis Rosu Roz Galben Alb

Un alt atribut des intilnit este cel care desemneaza culoarea de fundal.Aceasta poarta denumirea de bgcolor si are aceeasi sintaxa si poate lua aceleasi valori ca si cel de color . Atributele pentru dimensiuni sunt inaltimea si lungimea.Atributul pentru inaltime poarta denumirea de height iar cel de lungime denumirea de width . Acestia pot lua doua tipuri de valori, un numar sau un procent.Numarul reprezinta valoarea absoluta in pixel a respectivului element, iar procentul reprezinta valoarea relativa fata de obiectul din care face parte acel element.De exemplu daca scriem valoarea atributului width in procente la untabel aflat intr-o pagina ,acel tabel va avea lungime egala cu acel procent din dimensiunea ferestrei browserului, daca folosim atributul width scris in procente la o celula dintr-un tabel atunci acea celula va avea lungimea egala cu acel procent din lungimea tabelului.

Structura unui document HTML

Orice document HTML consta intr-o insiruire de texte si marcatori pentru formatarea acestuia. Cel mai simplu document HML are urmatoarea structura : <HTML> <HEAD>

} partea de antet

</HEAD> <BODY>

} corpul documentului

</BODY> </HTML>

Dupa cum observati acesta este o insiruire de marcatori. Marcatorii <HTML> si </HTML> indica inceputul si sfirsitul uniui document HTML. Marcatorii <HEAD> si </HEAD> indica prezenta unui antet. Cel mai adesea acesta este folosit pentru a introduce un titlu documentului. Marcatorii <BODY> si </BODY> marcheaza inceputul si sfirsitul informatiei care va aparea in browser. Un exemplu mai complex este urmatorul

Autor: Prof. Coman Isabela

Colegiul German Goethe <HTML> <HEAD> <TITLE> Un titlu < ?TITLE> </HEAD> <BODY> Acest text va aparea in browser. <I> Text scris cu caractere italice </I> </BODY> </HTML> Acesta va produce urmatorul rezultat in browser

Marcatorii <Title> si </TITLE> marcheaza textul care va aparea in bara de titlu a browserului . Intre un marcator de inceput si unul de sfirsit pot fi folositi alti marcatori. In exemplul de mai sus <BODY> si < /BODY> apar marcatorii pentru text italic (<I> si </I>).

Partea de antet a unui document HTML

Partea antet a unui document HTML este incadrata intre marcatorii <HEAD> si </HEAD>. In sectiunea antet a unui document se poate defini untitlu pentru respectivul document, creeaza relatii intre documente, transmite diferite informatii speciale pentru browser.In continuare vom exemplifica aceste posibilitati.

Titlul unui document

Pentru a desena un titlu unui document se folosesc marcatorul <TITLE> aflat in sectiunea antet. Sintaxa completa este <TITLE> titlu </TITLE>.Textul care apare intre cei doi marcatori va aparea in titlul browserului. De exemplu,dupa incarcarea urmatorului fisier intr-un browser va avea ca efect aparitia textului Acesta este titlul inpartea de titlu a ferestrei browserului.

<HTML> <HEAD> <TITLE> Acesta este titlul </TITLE> </HEAD> <BODY> Autor: Prof. Coman Isabela

Colegiul German Goethe Acesta este corpul documentului. </BODY> </HTML>

Trimiterea de informatii speciale browserului

Limbajul HTML permite trimiterea de informatii speciale browserului cum ar fi o descriere a documentului, reincarcarea automata a documentului,redirectionarea catre alt site.Aceste informatii se numesc metainformatii. Aceste metainformatii sunt folosite de browsere pentru a realiza actiuni inca nesuportate de versiunea oficiala a specificatiilor HTML. Pentru un HTML simplu nu sunt absolut necesare aceste metainformatii, dar in cazul unor pagini mai sofisticate acestea ar putea fi folositoare : Un exemplu este : <META http- EQUIV = refreshCONTENT=60URL=www.credits .ro> Acest rand are efectul urmator: browserul va astepta 60 de secunde dupa care va incarca(refresh) documentul desemnat e URL. Un mod popular pentru folosirea elementului META ete folosirea proprietatii Keywords. Cele mai multe motoare de cautar folosesc valoarea acestui marcator pentru a indexa acest document. Un exemplu e folosire a elementului Keywords este : <HTML> <HEAD> <TITLE>TRANS IMPEX S.R.L.</TITLE> <META NAME=`Keywords` CONTENT=`Transport, Import, Export`> <META NAME=`Description` CONTENT=`Firma de transporturi internationale`> </HEAD> <BODY> </BODY> </HTML> Cand scrieti o pagina pentru a fi indexata de catre motoarele ed cautare este o idee buna folosirea proprietatii Description deoarece cele mai multe motoare de cautare folosesc aceasta descriere. In tabelul de mai jos gasiti o lista a atributelor marcatorului <META> Atribut Functie HTTP EQUIV NAME URL CONTENT Defineste proprietatea pentru acest element Adauga un element de descriere la element. Daca nu exista se foloseste cel de la HTTP-EQUIV Defineste o pagina tinta pentru element Contine raspunsul la acest element

Corpul unui document HTML

Autor: Prof. Coman Isabela

Colegiul German Goethe Corpul unui document incepe cu <BODY> si se termina cu </BODY>. Intre acesti marcatori se gaseste partea principala a documentului, adica partea care va aparea in fereastra browserului. Intre acesti marcatori se scrie textul si alte marcaje pentru formatarea textului.

Atributele marcatorului <BODY>

Maractorul <BODY> are o serie de atribute. Ele sunt importante deoarece afecteaza modul general de afusare a documentului. In tabelul e mai jos se gaseste o lista a acestor atribute:

Atribut ALINK BACKGROUND BGCOLOR BGPROPRIERTIES LEFTMARGIN LINK TEXT TOPMARGIN VLINK

Functie Desemneaza o culoare pentru link-urile atunci cand sunt activate Desemneaza un fisier care va fi folosit ca fundal pentru pagina Desemneaza o culoare de fundal Acest atribut poate avea valoarea Fixed caz in acre imaginea de fundal nu se misca odata cu textul Seteaza distanta de la partea din stanga a ferestrei browserului la care va fi afisat textul. Desemneaza o culoare pentru link-urile cae nu au fost vizitate Desemneaza o culoare pentru text Seteaza distanta de la partea de sus a ferestrei browserului la care va fi afisat textul. Desemneaza o cuoare pentru linkurile deja vizitate

Atributele ALINK, LINK si VALINK seteaza culorile pentru link-uri. Acestea pot lua valorile obisnuite pentru culori. Atributul BACKGROUND eteaza o anumita culoare pentru a fi folosit ca fundal. Atributul BACKGROUND seteaza o imagine dintr-un fisier ca fundal. Acest fisier poate fi de tipul GIF sau JPEG. Exemple ar fi : <BODY BGCOLOR=silver>

Autor: Prof. Coman Isabela

Colegiul German Goethe

<BODY BACKGROUND=`imag.gif`>

Atributul TEXT seteaza o culoare pentru text. Atunci cand alegeti culorile trebuie sa aveti in vedere faptul ca vizitatorii trebuie sa poata citi informati prezentata, deci incercati sa alegeti culori contrastante si nu nuante apropiate. Atributul BGPROPRETIES are efect doar in Internet Explorer. Singura valoare pe care o poate avea este FIXED. In cazul folosirii acestui atribut imaginea din fundal va ramane fixa si nu va defila odata cu textul. Prin inrmediul acestui atribut puteti crea un efect de watermark.

Inserarea de comentarii

Comentariul este o portiune de text care nu va apare in fereastra brewserului. Pentru a insera un comentariu se foloseste marcatorul de incepere < !- si se termina cu . Exemple : <HTML> <BODY> < !-Acest text nu va apare in browser Autor: Prof. Coman Isabela

Colegiul German Goethe

</BODY> </HTML> Rezultatul va fi:

Atributul <ADDRESS>
Prin intermediul acestui atribut va puteti identifica ca ajutor al documentului, puteti preciza modalitatea de a intra in contact cu drepturile de ajutor. Acest element se plaseaza deobicei in partea de sus sau in partea de jos a documentului. Acest elemenet consta din textulscris intre un marcator de inceput <ADRESS> si unul de incheiere </ADRESS>. Exemplu : <HTML> <HEAD> <TITLE>TRANS IMPEX S.R.L.</TITLE> <BODY BGCOLOR=WHITE TEXT=BLACKLINK=RED VLINK=GREEN ALINK=YELLOW> </HEAD> <BODY> <HR> <center>Acesta este stiluol firmei TRANS IMPEX S.R.L.</center> <ADRESS> Creat de Popescu Ion<BR> Modificat 10 mar 2001 </ADRESS> </BODY> </HTML> Rezultatul va fi: Autor: Prof. Coman Isabela

Colegiul German Goethe

FORMTAREA TEXTULUI IN PARAGRAFE

Folosirea marcatorului <P>

Ca si in scrierea obisnuita informatia trebuie impartita in paragrafe.Una dintre probleme este faptul ca browserul ignora caracterele de sfarsitde linie folosite in fisierul HTMLsursa. De exemplu,daca fisierul HTML este : <HTML> <BODY> La sfarsitul anilor 50 in timpul Razboiului Rece Departamentul Apararii Statelor Unite a inceput sa isi faca griji in legatura cu ce s-ar putea intampla cu sistemul national de comunicatii in cazul unui razboi atomic. Era evident ca mentinerea comunicatiilor ar fi vitala. In 1962 Paul Baran un cercetator a descris o solutie.El apropus un sistem cu acoperire nationala format din calculatoare conectate intre ele astfel incat daca unul din ele e disrus, celelalte sa poata comunica fara sa fie afectate. Propunerea a fost discutata si pusa in aplicare.In anul 1969 prima retea a fost creata de catre Pentagon s Advanced Research Projects Agency (ARPA). ARPANET asa cum a fost numita facea legatura intre patru facultati de cercetare : </BODY> </HTML> rezultatul va fi :

Autor: Prof. Coman Isabela

Colegiul German Goethe

Modul corect de a separa textul in paragrafe este prin folosirea marcatorilor de paragraf si anume <p> pentru inceperea paragrafului si </p> pentru finalul paragrafului. <HTML> <BODY> <P>La sfarsitul anilor `50 in timpul Razboiului Rece Departamentul Apararii al Statelor Unite a inceput sa-si faca griji in legatura cu ce s-ar putea intampla cu sistemul natiponal de comunicatii in cazul unui razboi atomic. Era evident ca mentinerea comunicatiilor ar fi vitala.</P> <P> In 1962 Paol Baran un cercetator a descris o solutie. Era priopus un sistem cu acoperire nationala format din calculatoare conectate intre ele astfel incat daca unul din ele este distrus, celelalte sa poata comunica fara sa fie afectate. Propunerea a fost discutata si pusa in aplicare. In anul 1969 prima retea a fost creata de catre Pentagon`s Advanced Research Projects Agency (ARPAD). </P> <P> ARPANED asa cum a fost numita facea legatura intre 4 facultati de cercetare: </P> </BODY> </HTML>

Rezultatul va fi cel dorit :

Autor: Prof. Coman Isabela

Colegiul German Goethe

Un atribut al marcatorului <P>, prezent in aproape toate implementarile de browsere este ALGN. Acesta poate lua una dintre valorile: Left, Center, Right. Folosirea acestui atribut va duce la alinierea textului la stanga, dreapta, respectiv centrat.
<HTML> <HEAD> <TITLE> Paragafe </TITLE> </HEAD><BODY> <P ALGN=left>Primul paragraf.<P/> <P ALGN=center>Al doilea paragraf<P/> <P ALGN=right>Al treilea paragraf</P> Autor: Prof. Coman Isabela

Colegiul German Goethe

</BODY> </HTML>

Adaugarea si prevenirea linebreak-urilor

La folosirea marcatorului <P> textul este rupt automat la finalul randului. In cazul in care se doreste ruperea randului intr-un anumit loc se poate folosi marcatorul <BR>. Acesta va produce trecerea la randul urmator. Acesta nu are un marcator de inchidere.

<HTML> <BODY> Primul paragraf.<BR> Al doilea paragraf<BR> Al treilea paragraf<BR> </BODY> </HTML>

Autor: Prof. Coman Isabela

Colegiul German Goethe

In cazul in care nu doreste ruperea randurilor se folosesc marcatorii </NOBR>. Textul aflat intre acesti marcatori nu va fi intrerupt.

Adaugarea liniilor orizontale

Pentru a adauga o linie orizontala folositi marcatorul <HR>. Acesta va produce o linie orizontala din partea stanga pana in partea dreapta a ferestrei browserului. Acest marcator are urmatoarele atribute: Atribut Functie ALIGN Aliniere WIDTH Lungime SIZE Inaltime NOSHADE Daca acest atribut este prezent browserului va desena o bara 2D in loc de una 3D COLOR Culoare

Formatarea textelor

Una dintre cele mai importante avantaje ale procesoarelor de text este faptul ca autorul acestuia poate face in asa fel incat textul sa apara exact cum doreste, culoarea sau marimea dorita. Aceste optiuni apar si in HTML.

Formatarea logica a textului

Autor: Prof. Coman Isabela

Colegiul German Goethe

In HTML exista o serie de marcatori (tag-uri) care impart textul unui document in parti logice. Prin folosirea acestor marcatori anumite portiuni din document pot fi marcate ca portiuni de cod, citate, definitii etc. Rolul acestor marcatori nu este in mod pbligatoriu acela de a schimba modul in care textul selectat apare in fereastra browserului, ci pentru o marcare logica o documentului. Acesti marcatori sunt: <CITE> si </CITE> se foloseste pentru a marca un citat dintr-un alt material. De obicei textul incadrat de acesti marcatori apare cu caractere italice. <CODE> si </CODE> se foloseste ppentru portiuni scurte de cod intr-un limbaj de programare. Textul este afisat cu un font de tipul monospace. <EM> si </EM> se foloseste pantru a marca o portiune de text pe care autorl o considera importanta. Textul este afisat cu carctere aldine. < KBD> si </KBD> se foloseste pentru a marca un text pe care utilizatorul ar trebui sa-l introduca de la tastatura. Textul este afisat cu un font de tipul monospace. <SAMP> si </SAMP> marcheaza o insiruire de caractere literare. Textul este afisat cu un font de tipul monospace. <STRONG> si </STRONG> este folosit pentru a intari o anumita portiune a textului. Textul este afisat cu caractere ingrosate. <VAR> si </VAR>. Textul apare cu caractere italice. <DFN> si </DFN> marcheaza o definitie. Textul apare cu caractere italice. <BLOCKQUOTE> si </BLOCKQUOTE> marchaeza citarea unei portiuni mai mari dintr-un alt document. In mod automat browserele indeteaza textul marcat de <BLOCKQUOTE>.

Exemple de folosire: <HTML> <BODY> Napoleon a spus:<CITE> Fiecare soldat poarta in ranita bastonul de general</CITE><BR><BR> Acest script este realizat in VBScript:<br> <CODE> response.write(Primul Program) </CODE><BR><BR> Numele acestui domn,<EM>John Millrt</EM>, imi starneste fiori.<BR><BR> Introduceti de la tastatura <KBD>format c:</KBD> si apasati tasta <I>Enter</I>.<BR><BR> Vreau sa atrag atentia asupra acestui <STRONG> fapt </STRONG> </BODY> Autor: Prof. Coman Isabela

Colegiul German Goethe

</HTML>

Formatarea fizica

O serie de marcatori schimba modul in care textul va aparea in tereastra navigatorului. O parte din acestia sunt: <B> si </B> textul va apare afisat cu caractere ingrosate <I> si </I> textul va apare afisat cu caractere italice <TT> si </TT> textul marcat va fi afisat cu un font de tip monospace. <U> si </U> textul va fi subliniat <SUB> si </SUB> textul marcat va fi scris sub nivelul textului incinjurator si cu un font mai mic <SUP> si </SUP> textul marcat va fi scris deasupra nivelului textului inconjurator si cu un font mai mic

Exemplu: <HTML> <BODY> <B>Acest rext este scris cu caractere ingrosate (bold).</B><BR> <I>Acest text este scris cu caractere aldine (italic).</I><BR> Autor: Prof. Coman Isabela

Colegiul German Goethe <TT>Acest text este scris cu caractere de tip monospace</TT><BR> <U>Acest text este scris <SUB>sub</SUB> vivelul textului inconjurat. <BR> Acest text este scris <SUP>deasupra</SUP> nivelul textului inconjurat. <BR> </BODY> </HTML>

Folosirea fonturilor

Un element foarte folosit al limbajului HTML este marcatorul <FONT> care schimba caracteristicile fontului cu care va fi afisat textul. O problema majora care apare este faptul ca daca se doreste folosirea unui anumit font, pentru ca pagina sa fie afisata corect acest font trebuie sa existe si pe calculatorul cititorului. Atributele acestui marcator sunt: face-schimba fontul cu care sunt afisate caracterele size-schimba marimea fontului. Acesta poate lua valori intre 1 si 7. Valoarea implicita este3. Acest atribut poate lua doua tipuri de valori: o valoare absoluta de exemplu size=5 sau un relativa care arata cu cat se modifica marimea fontului, de exemplu size=+2; color-schimba culoarea fontului. Exemplu:

<HTML> <BODY> <FONT face=arial color=red>Arial</FONT><BR> <FONT color=blue>Albastru</FONT><BR> <FONT face helvetica size=5>Albastru</FONT><BR> Autor: Prof. Coman Isabela

Colegiul German Goethe </BODY> </HTML>

Caractere speciale

Exista o serie de caractere speciale care pot fi introduse in documentele HTML prin intermediul unor coduri.

O parte dintre acestea le gasiti in tabelul de mai jos:

Simbol , < >

Cod amp copy reg trade dg fractlt 14, frac34 pi gt

Pentru a folosi aceste simboluri, scrieti in locul in care doriti sa apara codul corespunzator. Exemplu: Autor: Prof. Coman Isabela

Colegiul German Goethe

Copyright copy CREDIS

Folosirea imaginilor
Imaginile pot face o pagina mai atractiva, ii pot transmite informatii care ar fi mai greu de transmis numai cu ajutorul textului. Un lucru important de stiut in cazul folosirii a acestora este acela ca, de obicei, imaginile sunt fisiere mari si folosirea excesiva a acestora poate determina un timp mare de incarcare a paginii. Un altul ar fi acela ca nu toti utilizatorii au browsere care suporta imagini, iare o parte din cei care folosesc browsere care suporta imagini dezactiveaza afisarea imaginilor pentru o incarcare mai rapida a paginilor. Majoritatea browserelor sunt GIF si JPEG. In general formatul JPEG are cel mai bun mod de compresie, dar prin aceasta reduce calitatea imaginii. Formatul GIF are o compresie mai slaba, dar calitatea imaginii este mai mare. In cazul imaginilor care au un numar mic de culori, formatul GIF se comprima mai bine ca JPEG. Marcatorul care are ca rol introducere imaginilor este <IMG> Atributele acestuia sunt: src-cel mai important, el reprezentand calea (in format URL) a locului ubde se afla respectiva imagine align-seteaza alinierea pe verticala a pozei fata de textul inconjurator heigh-inaltimea imaginii width-latimea imaginii alt-seteaza un text alternativ care va fi afisat in cazul in care nu poate fi afisata imaginea border-seteaza marimea marginii din jurul imaginii

In cazul in care latimea sau inaltimea reale nu sunt egale cu cele declarate in cadrul marcatorului <IMG> atunci imaginea va fi scalata. Exemplu:

<HTML> <BODY> Aceastea este o imagine <IMG> HEIGH=100 SC=`imag.gif`ALIGN=middle ALT=`O imagine`>de inaltime 100 pixeli </BODY> Autor: Prof. Coman Isabela

Colegiul German Goethe

</HTML>

In original imaginea avea o marime de 8x8 pixeli. Deoarece am folosit atributul width imaginea a fost scalata la 100x 100 pixeli. In general, browserele incearca sa pastreze acelasi raport intre dimensiunile celor doua imagini.

Legaturi(link-uri)

Paginile HTML sunt numite si hypertext. Hypertext este considerat un document care contine legaturi catre alte documente sau care portiuni ale aceluiasi document. Din punct de vedere al HTML o legatura este compusa din doua parti: ancora si referinta URL care reprezinta documentul la care duce ancora. In momentul in care mouse-ul ajunge deasupra unei ancore, aceasta isi schimba forma. In cazul in care se face un clic pe ancora, browserul va incarca documentul referit de URL. URL-urile pot fi de doua tipuri: absolute si relative. In cazul in care se scrie toata calea spre acel URL inclusiv http:// atunci el este un URL absolut. Cand nu se face aceasta , atunci el este un URL relativ la site-ul si ditrectorul curent. De exemplu : http://www.microsoft.com este un URL absolut, iar imagini/micro.gif este un URL relativ care duce catre fisierul micro.gif aflat in subdirectorul imagini. Marcatorul care are rol de a forma aceste legaturi este <A>/ Pentru a crea o legatura catre un alt document se foloseste atributul href. Exemplu <A HREF=`http://www.microsoft.com`>Microsoft</A> Autor: Prof. Coman Isabela

Colegiul German Goethe Aceasta este o legatura catre un alt site (www.microsoft.com). In acest caz ancora este textul Microsoft, iar URL este :`http://www.microsoft.com`. Precum am mentionat ancora poate fi si o poza de exemplu : <A HREF=http://www.microsoft.com><IMG SRC=micro.gif> </A> In acest caz URL este acelasi,ancora este reprezentata de o imagine(micro.gif) <a href=index2.html>Index</a> Aceasta este o legatura catre fisierul index2.html aflat pe acelasi site. <a href=index2.html`#cap3>Index<a/> Aceasta este o legatura catre fisierul index2.html aflat pe acelasi site. In acel document browserul se va pozitiona in dreptul locului marcat Cap3. Pentru a marca un loc intr-un fisier se foloseste tot marcatorul <A> dar cu atributul NAME. Exemplu :pentru a marca un loc cu numele Cap3 inserati in acel loc din document <a name=Cap3> Se pot face legaturi si catre documente care nu sunt HTML cum ar fi adrese de e-mail , site-uri FTP. Exemple : <a href=`ftp://ftp.microsoft.com`>FTP Microsoft</a>ad <a href=`mailto:popescu@x.ro`>Emailul lui Popescu</a> In continuare va este prezentata o lista a altor resurse internet care pot fi accesate :

Tip resursa WWW Email FTP News Gopher WAIS Telnet

Mod utilizara http://sitewww mailto :adresa ftp://siteftp news:newsgroup gopher://numesite wais://serverwais telnet://server

Exemplu http://www.x.ro mailto :x@x.ro ftp://ftp.x.ro News:x Gopher://goph.x.ro wais://wais.x.ro telnet://y.x.ro

Utilizarea listelor
In diferite cazuri veti avea nevoie sa inserati o lista intr-un document HTML, de exemplu pentru a scrie bibliografia la articolul pe care l-ati publicat, sau lista ingredientelor prajituri pe care tocmai ati descoperit-o. In HTML exista doua tipuri de liste :liste ordonate si liste neordonate. Pentru a marca inceputul unei liste ordonate se foloseste marcatorul <OL> iar pentru a incheia o lista se foloseste </OL> . Pentru a marca un element din lista se foloseste marctorul <L>. Acest marcator nu are unul de incheiere, orice text pana la intalnirea unui <LI> sau </OL> considerandu-se ca facand parte din acel element din lista. In mod automat, majoritatea browserelor indenteaza fiecare element din lista. Exemplu: Autor: Prof. Coman Isabela

Colegiul German Goethe

<HTML> <BODY> <OL> <LH>Lista ingredientelor din prajitura <LI>100g unt <LI>300g zahar <LI>100g faina <LI>200g cacao <LI>100g stafide </OL> </BODY> </HTML>

Un alt atribut al marcatorului <OL> este TYPE. Valorile acceptate pentru acest atribut sunt redate in tabelul de mai jos impreuna cu efectul lor : Valoare A a l i 1 Efect Marcatorii elementelor vor fi litere mari Marcatorii elementelor vor fi litere mici Marcatorii elementelor vor fi numere romane mari Marcatorii elementelor vor fi numere romane mari Marcatorii elementelor vor fi numere

Implicit, atributul TYPE are valoarea 1. Un alt atribut este START a carei valoare indica valoarea marcatorului primului element al listei. Listele se pot imbrica, de exemplu pentru a forma o structura asemanatoare unui index. Exemplu : <HTML>

Autor: Prof. Coman Isabela

Colegiul German Goethe <BODY> <OL> <LI>primul capitol <OL type=l> <LI>Primul subcapitol <LI>Al doilea subcapitol </OL> <LI>Al doilea capitol <OL TYPE=I> <LI>Primul subcapitol <LI>Al doilea subcapitol <LI>Al treilea subcapitol </OL> <OL type=A> <LI>Prima anexa <LI>A doua anexa </OL> </OL> </BODY> </HTML>

Exista cazuri cand ordinea din lista nu este importanta, iar in unele cazuri chiar deranjeaza. In aceste cazuri, prin folosirea marcatorilor <UL>si</UL>in locul marcatorilor <OL>si</OL>,in locul numerelor vor aparea (marcatori de formatare)bulleturi. Exemplu: <HTML> <BODY> <UL> <LH>Lista ingredientelor din prajitura: <LI>100g unt <LI>30g zahar <LI>100g faina <LI>200g cacao Autor: Prof. Coman Isabela

Colegiul German Goethe <LI>100g stafide </UL> </BODY> </HTML>

Ca si marcatorul <OL>, marcatorul <UL> are si el atributul TYPE. Acesta poate lua valorile : disc, circle si square. Imaginea bulleturilor va fi aceea a valorii acestui atribut. Valoarea implicita este circle. Listele ordonate si cele neordonate pot fi imbricate in orice fel. Exemplu : <HTML> <BODY> Carti publicate de editura ABC <OL> <LI>`Ion` <UL>Autor :Liviu Rabreanu <LI>Anul aparitiei :1952 </UL> <LI>`Moara cu noroc` <UL> <LI>Autor :Ioan Slavici <LI>Anul aparitiei:1972 </UL> </OL>

Autor: Prof. Coman Isabela

Colegiul German Goethe </BODY> </HTML>

Tabelele
Incepand cu specificatiile HTML 3.2 au fost introduse marcatorii pentru tabele. Un tabel incepe cu marcatorul <TABLE> si se incheie cu </TABLE >. In interiorul tabelului, datele sunt prezentate sub forma randurilor (rows). Marcatorii de linie sunt <TR> si </TR>. In interiorul randurilor informatia este prezentata in cadrul celulelor. Maractorii de celule sunt <TD> si </TD>. Pentru a desemna o celula cu rol de header se folosesc marcatorii <TH> si </TH>. Textul din aceste celule, in mod implicit va apare scris cu caractere ingrosate si centrat. Exemplu :

<HTML> <BODY> <TABLE BODER=1> <TR> <TH>Culoare</TH> <TH>Cod</TH> </TR> <TD>Rosu</TD> <TD#FF0000</TD> </TR> <TR> <TD>Verde</TD> Autor: Prof. Coman Isabela

Colegiul German Goethe <TD>#00FF00</TD> </TR> </TABLE> </BODY> </HTML>

Un atribut important este BORDER. In mod implicit tabelele sunt desenate fara margini. Prin folosirea acestui atribut ele pot avea borduri de grosime egala cu valoarea acestui atribut. Un alt atribut este ALIGN. La marcatorul <TABLE> efectul acestuia este cel de a alinia tabeul in pagina. La <TR> si <TD> efectul va fi cel de a centra textul in intregul rand, respectiv in celula. Atributul VALIGN va alnia textul pe verticala. Valorile posibile sunt TOP (sus), MIDDLE(mijloc) si BOTTOM (jos). Pentru a crea o celula goala se foloseste <TD>nbsp ;</td> Exemplu :

<HTML> <BODY> <TABLE WIDTH=80 HEIGH=150 BORDER=1 ALIGN=CENTER <TR> <TD align=left valign=top>Stanga sus</TD> <TD align=right valign=top>Centru sus</TD> <TD align=right valign=top>Dreapta sus</TD> </TR> <T> <TD align=left valign=middle>Stanga mihloc</TD> <TD align=center valign=middle>Centru mijloc</TD> <TD align=right valign=middle>Dreapta mijloc</TD> </TR> <TR> <TD align=left valign=bottom>Stanga jos</TD> Autor: Prof. Coman Isabela

Colegiul German Goethe <TD align=center valign=bottom>Centrujos</TD> <TD align=right valign=bottom>Dreapta jos</TD> </TR> </TABLE> </BODY> </HTML>

In afara de cazurile cand folositi tabele pentru a pezenta o informatie care necesita un tabel, tabelele pot folosi pentru asezarea in pagina a informatiei, caz in care se folosesc tabelele fara borduri. Exemplu: <HTML> <BODY> <TABLE> <TR> <TD><IMG SRC=exclam.gif></TD> <TD>Anunt important:Se cauta 20 de cunoscatori ai limbajelor HTML si JAVA> Conditii de plata exceptionale!</TD> </TR> </TABLE> </BODY>

Autor: Prof. Coman Isabela

Colegiul German Goethe </HTML>

Mai multe celule pot fi unite . Pentru a uni in numar de celule de pe o linie se foloseste atributul colspan, iar pentru a uni un numar de celule de pe o coloana se foloseste rowspan. De exemplu : daca avem o linie intr-un tabel, iar ep lnie sunt 6 celule, iar noi dorim unirea celulelor 3 si 4, vom scrie :

<TR> <TD>cel 1</TD> <TD>cel 2</TD> <TD COLSPAN=3>cel 3,4,5</TD> <TD>cel 6</TD> </TR> Exemplu: <HTML> <BODY> <TABLE BORDER=1> <TR> <TD COLSPAN=2> Anunturi importante</TD> </TR> <TR> <TD ROWSPAN=2><IMG SRC=exclam.gif></TD> <TD>Primul anunt</TD> </TR> <TR> <TD>Al doilea anunt</TD> </TR> </TABLE>

Autor: Prof. Coman Isabela

Colegiul German Goethe </BODY> </HTML>

Un atrobut al marcatorului <TD> este NOWRAP. Cand acesta este prezent continutul unei celule nu este rupt in doua randuri. Printre atributele marcatorului <TABLE> se numara si CELLSPACING si CELLPADDING. Valoarea lui CELLSPACING arata distanta intre doua celule. CELLPADDING reprezinta spatiul lasat in jurul textului dintr-o celula. Atributul BGCOLOR, disponibil la toti marcatorii folositi pentru tabele, seteaza culoarea de fundal pentru tabel, rand sau celula. De asemenea, se pot folosi pentru fundaluri imagini Pentru aceasta se foloseste atributul BACKGROUND. Tabelele pot fi incorporate in altul. Exemplu: <HTML> <BODY> <TABLE> <TR> <TD><IMG SCR=exclam.gif></TD> <TD> <TABLE BORDER=1> <TR><TD><Un anunt</TD> <TR> <TR> <TD>Al doilea doilea</TD> </TR> </TABLE> </TD> </TABLE> </BODY> </HTML>

Autor: Prof. Coman Isabela

Colegiul German Goethe

Autor: Prof. Coman Isabela