primele elemente html

8/3/2019 Primele Elemente HTML

1/30

Colegiul German Goethe

Autor: Prof. Coman Isabela

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 caracterecare 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 atunci cel de sfarsit va

avea forma .

Exista insa si marcatori nepereche, care nu au un tag de inchidere, cum ar fi tag-ul folosit

pentru a trasa o linie orizontala : . Odata cu dezvoltarea acestui limbaj, actualmente

ajunsi la versiunea HTML5, se recomanda ca tagurile unare(fara pereche sa contina in interior

un slash : .

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 ofXMLmarkup languagesthat mirror or extend

versions of the widely-usedHypertext Markup Language(HTML), the language in whichweb pagesare written.

While HTML (prior toHTML5) was defined as an application ofStandard 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-specificparser.

XHTML 1.0 became aWorld Wide Web Consortium(W3C)Recommendationon January 26, 2000. XHTML 1.1

became a W3C Recommendation on May 31, 2001.XHTML5is undergoing development as of September

2009, as part of theHTML5specification.

Exemple de marcatori :

pentru a indica browserului sa formateze un text in modul italic, vom scrie textul

incadrat de tagurile respectiv
http://en.wikipedia.org/wiki/XHTMLhttp://en.wikipedia.org/wiki/XHTMLhttp://en.wikipedia.org/wiki/XMLhttp://en.wikipedia.org/wiki/XMLhttp://en.wikipedia.org/wiki/Markup_languagehttp://en.wikipedia.org/wiki/Markup_languagehttp://en.wikipedia.org/wiki/Markup_languagehttp://en.wikipedia.org/wiki/Hypertext_Markup_Languagehttp://en.wikipedia.org/wiki/Hypertext_Markup_Languagehttp://en.wikipedia.org/wiki/Hypertext_Markup_Languagehttp://en.wikipedia.org/wiki/Web_pagehttp://en.wikipedia.org/wiki/Web_pagehttp://en.wikipedia.org/wiki/Web_pagehttp://en.wikipedia.org/wiki/HTML5http://en.wikipedia.org/wiki/HTML5http://en.wikipedia.org/wiki/HTML5http://en.wikipedia.org/wiki/Standard_Generalized_Markup_Languagehttp://en.wikipedia.org/wiki/Standard_Generalized_Markup_Languagehttp://en.wikipedia.org/wiki/Standard_Generalized_Markup_Languagehttp://en.wikipedia.org/wiki/Standard_Generalized_Markup_Languagehttp://en.wikipedia.org/wiki/XMLhttp://en.wikipedia.org/wiki/XMLhttp://en.wikipedia.org/wiki/XMLhttp://en.wikipedia.org/wiki/XML#Well-formedness_and_error-handlinghttp://en.wikipedia.org/wiki/XML#Well-formedness_and_error-handlinghttp://en.wikipedia.org/wiki/XML#Well-formedness_and_error-handlinghttp://en.wikipedia.org/wiki/Parsinghttp://en.wikipedia.org/wiki/Parsinghttp://en.wikipedia.org/wiki/Parsinghttp://en.wikipedia.org/wiki/World_Wide_Web_Consortiumhttp://en.wikipedia.org/wiki/World_Wide_Web_Consortiumhttp://en.wikipedia.org/wiki/World_Wide_Web_Consortiumhttp://en.wikipedia.org/wiki/W3C_recommendationhttp://en.wikipedia.org/wiki/W3C_recommendationhttp://en.wikipedia.org/wiki/W3C_recommendationhttp://en.wikipedia.org/wiki/HTML5#XHTML5http://en.wikipedia.org/wiki/HTML5#XHTML5http://en.wikipedia.org/wiki/HTML5#XHTML5http://en.wikipedia.org/wiki/HTML5http://en.wikipedia.org/wiki/HTML5http://en.wikipedia.org/wiki/HTML5http://en.wikipedia.org/wiki/HTML5http://en.wikipedia.org/wiki/HTML5#XHTML5http://en.wikipedia.org/wiki/W3C_recommendationhttp://en.wikipedia.org/wiki/World_Wide_Web_Consortiumhttp://en.wikipedia.org/wiki/Parsinghttp://en.wikipedia.org/wiki/XML#Well-formedness_and_error-handlinghttp://en.wikipedia.org/wiki/XMLhttp://en.wikipedia.org/wiki/Standard_Generalized_Markup_Languagehttp://en.wikipedia.org/wiki/Standard_Generalized_Markup_Languagehttp://en.wikipedia.org/wiki/Standard_Generalized_Markup_Languagehttp://en.wikipedia.org/wiki/HTML5http://en.wikipedia.org/wiki/Web_pagehttp://en.wikipedia.org/wiki/Hypertext_Markup_Languagehttp://en.wikipedia.org/wiki/Markup_languagehttp://en.wikipedia.org/wiki/XMLhttp://en.wikipedia.org/wiki/XHTML


2/30



Acest text va apare cu caracterele italice

va intrerupe randul curent si va anunta browserul ca trebuie sa afisezeelementele urmatoare de pe randul urmator

Urmatorul rand scris in codul html va fi scris incepand pe al doilea rand .Acest pe al doilea

Rezultatul afisat de browser va fi acesta :

Marcatorul
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 produce

inserarea in text a unei linii orizontale. Unele dintre atributele acestui marcator estegrosimea liniei. Numele atributului este size si reprezinta grosimea liniei in pixeli. Sintaxa

unui marcator in cazul folosirii atributelor este :

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 iar pentru o

linie de grosime 5 vom scrie .Rezultatul folosirii celor doi marcatori poate

fi vizualizat in figura de mai jos.


3/30



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 figasita 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 ) Corespondent RGB Nume culoare (romana)

Black #000000 Negru

Navy #000080 Albastu inchis

Blue #0000FF Albastru deschis

Green #008000 Verde inchis

Teal #008080

Lime #00FF00 Verde deschisAqua #00FFFF


4/30



Maroon #800000 Maro

Purple #800080

Olive #808000

Gray #808080 Gri inchis

Silver #COCOCO Gri deschis

Red #FF0000 RosuFuchsia #FF00FF Roz

Yellow #FFFF00 Galben

White #FFFFFF 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 :

}

partea de antet

}

corpul documentului

Dupa cum observati acesta este o insiruire de marcatori. Marcatorii si

indica inceputul si sfirsitul uniui document HTML. Marcatorii si indica

prezenta unui antet. Cel mai adesea acesta este folosit pentru a introduce un titlu

documentului. Marcatorii si marcheaza inceputul si sfirsitul informatiei

care va aparea in browser.

Un exemplu mai complex este urmatorul


5/30



Un titlu < ?TITLE>

Acest text va aparea in browser. Text scris cu caractere italice

Acesta va produce urmatorul rezultat in browser

Marcatorii si 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 si < /BODY> apar marcatorii pentru text italic ( si ).

Partea de antet a unui document HTML

Partea antet a unui document HTML este incadrata intre marcatorii si

. In sectiunea antet a unui document se poate defini untitlu pentru respectivuldocument, 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 aflat in sectiuneaantet.

Sintaxa completa este titlu .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 textuluiAcesta este titlulinpartea de titlu a ferestrei browserului.

Acesta este titlul


6/30


7/30



Corpul unui document incepe cu si se termina cu . 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

Maractorul 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 Functie

ALINK

BACKGROUND

BGCOLOR

BGPROPRIERTIES

LEFTMARGIN

LINK

TEXT

TOPMARGIN

VLINK

Desemneaza o culoare pentru link-urile atunci cand sunt

activateDesemneaza 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 lacare 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 :


8/30



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 :

< !-Acest text nu va apare in browser


9/30



Rezultatul va fi:

Atributul

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 si unul de incheiere .

Exemplu :

TRANS IMPEX S.R.L.

Acesta este stiluol firmei TRANS IMPEX S.R.L.

Creat de Popescu Ion

Modificat 10 mar 2001

Rezultatul va fi:


10/30



FORMTAREA TEXTULUI IN PARAGRAFE

Folosirea marcatorului

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 :

La sfarsitul anilor 50 in timpul Razboiului Rece Departamentul Apararii StatelorUnite 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 :

rezultatul va fi :


11/30



Modul corect de a separa textul in paragrafe este prin folosirea marcatorilor de paragraf si

anume

pentru inceperea paragrafului si
pentru finalul paragrafului.
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.

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).

ARPANED asa cum a fost numita facea legatura intre 4 facultati de cercetare:

Rezultatul va fi cel dorit :


12/30



Un atribut al marcatorului

, prezent in aproape toate implementarile debrowsere este ALGN. Acesta poate lua una dintre valorile: Left, Center,

Right. Folosirea acestui atribut va duce la alinierea textului la stanga,

dreapta, respectiv centrat.

Paragafe

Primul paragraf.

Al doilea paragraf

Al treilea paragraf


13/30



Adaugarea si prevenirealinebreak-urilor

La folosirea marcatorului

textul este rupt automat la finalul randului. In cazul incare se doreste ruperea randului intr-un anumit loc se poate folosi marcatorul
.

Acesta va produce trecerea la randul urmator. Acesta nu are un marcator de inchidere.

Primul paragraf.

Al doilea paragraf

Al treilea paragraf


14/30



In cazul in care nu doreste ruperea randurilor se folosesc marcatorii . Textulaflat intre acesti marcatori nu va fi intrerupt.

Adaugarea liniilor orizontale

Pentru a adauga o linie orizontala folositi marcatorul . Acesta va produce o linie

orizontala din partea stanga pana in partea dreapta a ferestrei browserului.

Acest marcator are urmatoarele atribute:

Atribut FunctieALIGN 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


15/30



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:

si se foloseste pentru a marca un citat dintr-un alt material. De

obicei textul incadrat de acesti marcatori apare cu caractere italice.

si se foloseste ppentru portiuni scurte de cod intr-un limbaj deprogramare. Textul este afisat cu un font de tipul monospace.

si se foloseste pantru a marca o portiune de text pe care autorl o

considera importanta. Textul este afisat cu carctere aldine.

< KBD> si se foloseste pentru a marca un text pe care utilizatorul ar trebuisa-l introduca de la tastatura. Textul este afisat cu un font de tipul monospace.

si marcheaza o insiruire de caractere literare. Textul este afisatcu un font de tipul monospace.

si este folosit pentru a intari o anumita portiune a textului.

Textul este afisat cu caractere ingrosate.

si . Textul apare cu caractere italice.

si marcheaza o definitie. Textul apare cu caractere italice.

si marchaeza citarea unei portiuni mai mari

dintr-un alt document. In mod automat browserele indeteaza textul marcat de

.

Exemple de folosire:

Napoleon a spus: Fiecare soldat poarta in ranita bastonul degeneral

Acest script este realizat in VBScript:

response.write(Primul Program)

Numele acestui domn,John Millrt, imi starneste fiori.

Introduceti de la tastatura format c: si apasati tasta Enter.

Vreau sa atrag atentia asupra acestui fapt


16/30



Formatarea fizica

O serie de marcatori schimba modul in care textul va aparea in tereastranavigatorului. O parte din acestia sunt:

si textul va apare afisat cu caractere ingrosate

si textul va apare afisat cu caractere italice

si textul marcat va fi afisat cu un font de tip

monospace.

si textul va fi subliniat

si textul marcat va fi scris sub nivelul textuluiincinjurator si cu un font mai mic

si textul marcat va fi scris deasupra nivelului

textului inconjurator si cu un font mai mic

Exemplu:

Acest rext este scris cu caractere ingrosate (bold).
Acest text este scris cu caractere aldine (italic).


17/30



Acest text este scris cu caractere de tip monospace

Acest text este scris sub vivelul textului inconjurat.

Acest text este scris deasupra nivelul textului inconjurat.

Folosirea fonturilor

Un element foarte folosit al limbajului HTML este marcatorul care schimbacaracteristicile 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:

Arial

Albastru
Albastru


18/30



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

regtrade

dg

fractlt

14, frac34

pi

gt

Pentru a folosi aceste simboluri, scrieti in locul in care doriti sa apara codul corespunzator.

Exemplu:


19/30



Copyrightcopy 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 apaginii. 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 cazulimaginilor care au un numar mic de culori, formatul GIF se comprima mai bine ca JPEG.

Marcatorul care are ca rol introducere imaginilor este

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 atunci imaginea va fi scalata.

Exemplu:

Aceastea este o imagine HEIGH=100 SC=ìmag.gifÀLIGN=middle

ALT=Ò imagine`>de inaltime 100 pixeli


20/30



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: ancorasireferinta 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 /

Pentru a crea o legatura catre un alt document se foloseste atributul href.

Exemplu

Microsoft
http://www.microsoft.com/http://www.microsoft.com/http://www.microsoft.com/http://www.microsoft.com/


21/30



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 :

In acest caz URL este acelasi,ancora este reprezentata de o imagine(micro.gif)Index

Aceasta este o legatura catre fisierul index2.html aflat pe acelasi site.

Index

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 dar cu

atributul NAME.

Exemplu :pentru a marca un loc cu numele Cap3 inserati in acel loc din document

Se pot face legaturi si catre documente care nu sunt HTML cum ar fi adrese de e-mail ,site-uri FTP.

Exemple :

FTP Microsoftad

Emailul lui Popescu

In continuare va este prezentata o lista a altor resurse internet care pot fi accesate :

Tip resursa Mod utilizara Exemplu

WWW http://sitewww http://www.x.ro

Email mailto :adresa mailto :[email protected]

FTP ftp://siteftp ftp://ftp.x.ro

News news:newsgroup News:x

Gopher gopher://numesite Gopher://goph.x.ro

WAIS wais://serverwais wais://wais.x.ro

Telnet telnet://server 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 iar pentru a

incheia o lista se foloseste . Pentru a marca un element din lista se foloseste marctorul

. Acest marcator nu are unul de incheiere, orice text pana la intalnirea unui sau

considerandu-se ca facand parte din acel element din lista. In mod automat,

majoritatea browserelor indenteaza fiecare element din lista.

Exemplu:
http://www.microsoft.com/http://www.microsoft.com/http://www.microsoft.com/http://sitewww/http://www.x.ro/ftp://siteftp/ftp://ftp.x.ro/http://gopher//nume/http://gopher//goph.x.ro/http://wais//serverwais/http://wais//wais.x.ro/http://wais//wais.x.ro/http://wais//serverwais/http://gopher//goph.x.ro/http://gopher//nume/ftp://ftp.x.ro/ftp://siteftp/http://www.x.ro/http://sitewww/http://www.microsoft.com/


22/30



Lista ingredientelor din prajitura

100g unt300g zahar

100g faina

200g cacao

100g stafide

Un alt atribut al marcatorului este TYPE. Valorile acceptate pentru acest atribut sunt

redate in tabelul de mai jos impreuna cu efectul lor :

Valoare Efect

A Marcatorii elementelor vor fi litere mari

a Marcatorii elementelor vor fi litere mici

l Marcatorii elementelor vor fi numere romane mari

i Marcatorii elementelor vor fi numere romane mari

1 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 :


23/30



primul capitol

Primul subcapitol

Al doilea subcapitol

Al doilea capitol

Primul subcapitol

Al doilea subcapitol

Al treilea subcapitol

Prima anexa

A doua anexa

Exista cazuri cand ordinea din lista nu este importanta, iar in unele cazuri chiar deranjeaza. Inaceste cazuri, prin folosirea marcatorilor siin locul marcatorilor

si,in locul numerelor vor aparea (marcatori de formatare)bulleturi.

Exemplu:

Lista ingredientelor din prajitura:

100g unt

30g zahar

100g faina200g cacao


24/30



100g stafide

Ca si marcatorul , marcatorul are si el atributul TYPE. Acesta poate lua

valorile : disc, circlesisquare.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 :

Carti publicate de editura ABC

`Ion`

Autor :Liviu Rabreanu

Anul aparitiei :1952

`Moara cu noroc`

Autor :Ioan Slavici

Anul aparitiei:1972


25/30



Tabelele

Incepand cu specificatiile HTML 3.2 au fost introduse marcatorii pentru tabele.

Un tabel incepe cu marcatorul si se incheie cu . In interiorul

tabelului, datele sunt prezentate sub forma randurilor (rows). Marcatorii de linie sunt si

. In interiorul randurilor informatia este prezentata in cadrul celulelor. Maractorii de

celule sunt si . Pentru a desemna o celula cu rol de header se folosesc marcatorii

si . Textul din aceste celule, in mod implicit va apare scris cu caractere ingrosate

si centrat.

Exemplu :

Culoare

Cod

Rosu


26/30



#00FF00

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 efectul acestuia este cel

de a alinia tabeul in pagina. La si efectul va fi cel de a centra textul in intregulrand, 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 nbsp ;

Exemplu :


27/30



Centrujos

Dreapta jos

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:

Anunt important:Se cauta 20 de cunoscatori ai limbajelor HTML si JAVA>

Conditii de plata exceptionale!


28/30



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 :

cel 1

cel 2

cel 3,4,5

cel 6

Exemplu:

Anunturi importante

Primul anunt

Al doilea anunt


29/30



Un atrobut al marcatorului este NOWRAP. Cand acesta este prezent continutul

unei celule nu este rupt in doua randuri.

Printre atributele marcatorului 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:


30/30


primele elemente html

Documents