Download - 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 -
8/3/2019 Primele Elemente HTML
2/30
Colegiul German Goethe
Autor: Prof. Coman Isabela
Acest text va apare cu caracterele italice
va intrerupe randul curent si va anunta browserul ca trebuie sa afisezeelementele urmatoare de pe randul urmatorUrmatorul 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 desfarsit. 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.
-
8/3/2019 Primele Elemente HTML
3/30
Colegiul German Goethe
Autor: Prof. Coman Isabela
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
-
8/3/2019 Primele Elemente HTML
4/30
Colegiul German Goethe
Autor: Prof. Coman Isabela
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
-
8/3/2019 Primele Elemente HTML
5/30
Colegiul German Goethe
Autor: Prof. Coman Isabela
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
-
8/3/2019 Primele Elemente HTML
6/30
-
8/3/2019 Primele Elemente HTML
7/30
Colegiul German Goethe
Autor: Prof. Coman Isabela
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/3/2019 Primele Elemente HTML
8/30
Colegiul German Goethe
Autor: Prof. Coman Isabela
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
-
8/3/2019 Primele Elemente HTML
9/30
Colegiul German Goethe
Autor: Prof. Coman Isabela
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:
-
8/3/2019 Primele Elemente HTML
10/30
Colegiul German Goethe
Autor: Prof. Coman Isabela
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 :
-
8/3/2019 Primele Elemente HTML
11/30
Colegiul German Goethe
Autor: Prof. Coman Isabela
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 :
-
8/3/2019 Primele Elemente HTML
12/30
Colegiul German Goethe
Autor: Prof. Coman Isabela
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
-
8/3/2019 Primele Elemente HTML
13/30
Colegiul German Goethe
Autor: Prof. Coman Isabela
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
-
8/3/2019 Primele Elemente HTML
14/30
Colegiul German Goethe
Autor: Prof. Coman Isabela
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
-
8/3/2019 Primele Elemente HTML
15/30
Colegiul German Goethe
Autor: Prof. Coman Isabela
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
-
8/3/2019 Primele Elemente HTML
16/30
Colegiul German Goethe
Autor: Prof. Coman Isabela
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). -
8/3/2019 Primele Elemente HTML
17/30
Colegiul German Goethe
Autor: Prof. Coman Isabela
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 -
8/3/2019 Primele Elemente HTML
18/30
Colegiul German Goethe
Autor: Prof. Coman Isabela
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:
-
8/3/2019 Primele Elemente HTML
19/30
Colegiul German Goethe
Autor: Prof. Coman Isabela
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=`imag.gif`ALIGN=middle
ALT=`O imagine`>de inaltime 100 pixeli
-
8/3/2019 Primele Elemente HTML
20/30
Colegiul German Goethe
Autor: Prof. Coman Isabela
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/ -
8/3/2019 Primele Elemente HTML
21/30
Colegiul German Goethe
Autor: Prof. Coman Isabela
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/ -
8/3/2019 Primele Elemente HTML
22/30
Colegiul German Goethe
Autor: Prof. Coman Isabela
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 :
-
8/3/2019 Primele Elemente HTML
23/30
Colegiul German Goethe
Autor: Prof. Coman Isabela
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
-
8/3/2019 Primele Elemente HTML
24/30
Colegiul German Goethe
Autor: Prof. Coman Isabela
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
-
8/3/2019 Primele Elemente HTML
25/30
Colegiul German Goethe
Autor: Prof. Coman Isabela
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
-
8/3/2019 Primele Elemente HTML
26/30
Colegiul German Goethe
Autor: Prof. Coman Isabela
#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 :
-
8/3/2019 Primele Elemente HTML
27/30
Colegiul German Goethe
Autor: Prof. Coman Isabela
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!
-
8/3/2019 Primele Elemente HTML
28/30
Colegiul German Goethe
Autor: Prof. Coman Isabela
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
-
8/3/2019 Primele Elemente HTML
29/30
Colegiul German Goethe
Autor: Prof. Coman Isabela
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:
-
8/3/2019 Primele Elemente HTML
30/30
Colegiul German Goethe