Curs HTML

Curs HTML
HTML (Hyper Text Markup Language)
Introducere
Ultima versiune a HTML-ului folosete unele idei i modificri propuse pentru HTML 3, care au fost abandonate la apariia HTML 3.2. HTML 4 propune separarea stilurilor fizice de marcarea coninutului printr-o folosire mai intens a foilor de stil. Elementul frame este acum definit oficial altundeva dect n produsele firmelor Nestcape sau Microsoft. Include elementele style, div, span pentru ncorporarea foilor de stil. Eticheta object este de asemenea extins, astfel s includ practic orice fiier extern care se dorete introdus ntr-o pagin Web. Sunt introduse etichetele ins i del, acronym, colgroup, fieldset, button. HTML e un limbaj bazat pe SGML (Standard Generalized Murkup Language = Limbaj Standard Generalizat de Marcare) care este un standard internaional ce a fost aprobat n 1986 i care permite crearea de documente hipertext pentru paginile Web. Principalele caracteristici ale limbajului SGML sunt: 1. 2. 3. 4. Descrierea structurii documentului; Nu este descris aranjarea n pagin; Permite fiecrui navigator s aib propria prezentare; Un document HTML poate fi reutilizabil.
Standardul oficial HTML este dat de World Wide Web Consortium (W3C) care este afiliat la Internet Engineering Task Force (IETF). W3C a enunat cteva versiuni ale specificaiei HTML, printre care i HTML 2.0, HTML 3.0, HTML 3.2, HTML 4.0 i, cel mai recent, HTML 4.01. Fiecare din aceste standarde este mai mult sau mai puin suportat de ctre toate sau o parte din browsere. La ora actual HTML 4.0 este larg utilizat i au fost deja publicate specificaiile HTML 4.01. Limbajul HTML ofer proiectanilor de pagini Web urmtoarele posibiliti: 1. S publice documente cu headere, texte, tabele, liste, fotografii, etc; 2. S regseasc on-line informaiile prin intermediul hiperlink-urilor printr-un simplu click de mouse; 3. S proiecteze formulare pentru realizarea tranzaciilor cu servere aflate la distan pentru cutri de informaii sau pentru activiti specifice comerului; 4. S includ foi de calcul tabelar, clipuri video, sunete i alte aplicaii direct n documente. Elementul esenial diferit adus de versiunea 4.0 i mai ales 4.01 fa de versiunea 3.2 este posibilitatea separrii structurii unui document de prezentarea lui prin introducerea stilurilor de documente (style sheet). Prin utilizarea limbajului HTML pentru structurarea unui document i style sheet-urile pentru a stiliza prezentarea acestuia, se poate obine mult mai uor independena de periferic/computer/platforma hard-soft. Limbajul HTML a fost preferat pentru publicaii pe Web n primul rnd datorit simplitii sale i n al doilea rnd deoarece permite formatarea textului ASCII cu tag-uri n format ASCII.
Curs HTML
Cap. 1: HTML DE BAZ -----------------------------------------------------------------1.1. STRUCTURA UNUI DOCUMENT HTML -----------------------------------------------------------------<HTML> <HEAD> <TITLE> Formatare paragraf intr-un document HTML </TITLE> </HEAD> <BODY> Salut! Ma numesc Alina si sunt eleva la un liceu din Brasov. Acum este tare tarziu, dar cum somnul intarzie sa vina iata-ma hai-hui pe Internet. Saptamana viitoare trebuie sa prezint la ora de engleza un referat cu tema "Internetul, viitorul omenirii?" in care voi vorbi despre implicatiile pe care le are informatica si, in special, Internetul in viata omului viitorului. Sigur ca trebuie sa fie o viziune a mea asupra viitorului si nu o profetie. Daca tu, draga mea prietene de pe Internet, m-ai putea ajuta cu cateva sugestii in realizarea acestui referat ti-as ramane indatorata. </BODY> </HTML> -----------------------------------------------------------------1.2. FORMATAREA PARAGRAFELOR 1.2.1. Trecerea la linie noua Marcajul <BR>. El se poate folosi si in combinatie cu parametrul CLEAR=optiune, optiune ce forteaza trecerea la linie noua fata de marginea specificata. Valorile posibile pentru optiune sunt left, right, all. -----------------------------------------------------------------<HTML> <HEAD> <TITLE> Formatare paragraf intr-un document HTML </TITLE> </HEAD> <BODY> Salut! <BR CLEAR=all> Ma numesc Alina si sunt eleva la un liceu din Brasov. Acum este tare tarziu, dar cum somnul intarzie sa vina iata-ma hai-hui pe Internet. <BR> Saptamana viitoare trebuie sa prezint la ora de engleza un referat cu tema "Internetul,viitorul omenirii?" in care voi vorbi despre implicatiile pe care le are informatica si, in special, Internetul in viata omului viitorului. Sigur ca trebuie sa fie o viziune a mea asupra viitorului si nu o profetie. </BR> Daca tu, draga mea prietene de pe Internet, m-ai putea ajuta cu cateva sugestii in realizarea acestui referat ti-as ramane indatorata. </BODY> </HTML> ----------------------------------------------------------------------------------------------------------------------------------1.2.2. Specificarea unui paragraf Marcajul <P>...</P> -----------------------------------------------------------------<HTML> <HEAD>
2
Curs HTML
<TITLE> Formatare paragraf intr-un document HTML </TITLE> </HEAD> <BODY> Salut! <P>Ma numesc Alina si sunt eleva la un liceu din Brasov. Acum este tare tarziu, dar cum somnul intarzie sa vina iata-ma hai-hui pe Internet. </P> <P>Saptamana viitoare trebuie sa prezint la ora de engleza un referat cu tema "Internetul, viitorul omenirii?" in care voi vorbi despre implicatiile pe care le are informatica si, in special, Internetul in viata omului viitorului. Sigur ca trebuie sa fie o viziune a mea asupra viitorului si nu o profetie. </P> <P>Daca tu, draga mea prietene de pe Internet, m-ai putea ajuta cu cateva sugestii in realizarea acestui referat ti-as ramane indatorata.</P> </BODY> </HTML> -----------------------------------------------------------------1.2.3. Alinierea unui paragraf Marcajul <P>...<P/P> se imbogateste cu optiunea align. Optiunea align poate primi ca valoare unul din cuvintele: left, right, center. -----------------------------------------------------------------<HTML> <HEAD> <TITLE> Formatare paragraf intr-un document HTML </TITLE> </HEAD> <BODY> <P align="center">Salut!</P> <P>Ma numesc Alina si sunt eleva la un liceu din Brasov. Acum este tare tarziu, dar cum somnul intarzie sa vina iata-ma hai-hui pe Internet. </P> <P>Saptamana viitoare trebuie sa prezint la ora de engleza un referat cu tema "Internetul, viitorul omenirii?" in care voi vorbi despre implicatiile pe care le are informatica si, in special, Internetul in viata omului viitorului. Sigur ca trebuie sa fie o viziune a mea asupra viitorului si nu o profetie. </P> <P>Daca tu, draga mea prietena de pe Internet, m-ai putea ajuta cu cateva sugestii in realizarea acestui referat ti-as ramane indatorata.</P> </BODY> </HTML> ----------------------------------------------------------------------------------------------------------------------------------1.2.4. Centrarea textului Marcajul <CENTER>...</CENTER> are ca efect centrarea rapida a textului. {Are acelasi efect ca marcajul <P align="center">...</P>} -----------------------------------------------------------------<HTML> <HEAD> <TITLE> Formatare paragraf intr-un document HTML </TITLE> </HEAD> <BODY>
3
Curs HTML
<CENTER> Salut! </CENTER> <P>Ma numesc Alina si sunt eleva la un liceu din Brasov. Acum este tare tarziu, dar cum somnul intarzie sa vina iata-ma hai-hui pe Internet. </P> <P>Saptamana viitoare trebuie sa prezint la ora de engleza un referat cu tema "Internetul, viitorul omenirii?" in care voi vorbi despre implicatiile pe care le are informatica si, in special, Internetul in viata omului viitorului. Sigur ca trebuie sa fie o viziune a mea asupra viitorului si nu o profetie. </P> <P>Daca tu, draga mea prietene de pe Internet, m-ai putea ajuta cu cateva sugestii in realizarea acestui referat ti-as ramane indatorata.</P> </BODY> </HTML> -----------------------------------------------------------------1.3. FORMATAREA FONT-URILOR -----------------------------------------------------------------Un font reprezinta un set de caractere (256) cu un aspect grafic unitar. Stiluri de afisare: ingrosat, inclinat, subliniat. Marcajul <B>...</B> este folosit daca vrem ca un cuvant sau o portiune din text sa ne apara ingrosat. Marcajul <I>...</I> este folosit daca vrem ca un cuvant sau o portiune din text sa ne apara ingrosat. Marcajul <U>...</U> este folosit daca vrem ca un cuvant sau o portiune din text sa ne apara subliniat. 1.3.1. Nivele de titlu Marcajele <Hn>...</Hn> pun in evidenta nivelele de subtitlu al unui document; n poate lua valori de la 1 la 6. Cel mai inalt nivel este 1, apoi nivelul descreste pana la nivelul 6, nivelul 6 fiind cel mai mic nivel. 1.3.2. Alegerea tipului de font Marcajul <FONT>...</FONT> impreuna cu optiune face (ce va primi ca valoare numele fontului ce intentionam sa-l folosim incadrat de ghilimele) -> permite alegerea tipului de font cu care dorim sa fie afisat textul. <FONT face="Courier, Arial">...</FONT> 1.3.3. Alegerea dimensiunii caracterelor Marcajul <FONT>...</FONT> impreuna cu optiune size (ce va primi ca valoare un numar incadrat intre ghilimele). <FONT face="Courier,Arial" size="4">...</FONT> 1.3.4. Alegerea culorii font-ului Marcajul <FONT>...</FONT> impreuna cu optiune color. Valoarea acestei optiuni va fi numele in limba engleza incadrat de ghilimele sau codul culorii precedat de semnul # si incadrat, de asemenea, de ghilimele. <FONT face="Courier,Arial" size="4" color="red">...</FONT> <FONT face="Courier,Arial" size="4" color="#FF0000">...</FONT>
-----------------------------------------------------------------4
Curs HTML
1.4. LINII DE DELIMITARE SI COMENTARII -----------------------------------------------------------------1.4.1. Marcajul <HR>, plasat oriunde in document, are ca efect trasarea unei linii orizontale. Se poate folosi in combinatie cu parametrii: SIZE=optiune, WIDTH=optiune, ALIGH=optiune si NOSHADE. - optiunea parametrului SIZE este un numar ce stabileste grosimea liniei; - optiunea parametrului WIDTH poate stabili cat la % din latimea paginii va ocupa rigla respectiva; - parametrul ALIGN se utilizeaza impreuna cu parametrul WIDTH si optiunea lui are drept efect fortarea liniei fata de marginea specificata. Valorile posibile pentru optiune sunt left, right. - optiunea COLOR stabileste culoarea riglei; - prin prezenta parametrului NOSHADE, fara nici o optiune, se dezactiveaza afisarea umbrei pentru rigla orizontala. 1.4.2. Comentarii Comentariile sunt texte incadrate intre . Rolul comentariilor este de a face un document HTML mai usor de inteles prin plasarea unor expicatii din loc in loc. Ele nu vor fi afisate in cuprinsul paginii Web creata prin documentul respectiv.
TAG-uri HTML
n limbajul de marcare a hipertextului totul se rezum la structur. Un limbaj de marcare este folosit pentru a descrie care este rolul fiecrei pri din document n raport cu celelalte. Terminologia HTML: a) atribut: furnizeaz instruciuni adiionale despre o etichet. Informaiile variaz de la etichet la etichet i pot include subiecte cum ar fi locaia fiierelor, mrimea, numele lor sau stiloul lor; b) browser: este un motor de parcurgere special care evalueaz etichetele i coninutul unui fiier HTML, pe care l afieaz n concordan cu posibilitile i regulile platformei i capacitile sale; c) element: o component distinctiv a structurii unui document, cum ar fi titlul, un paragraf sau o list. Cnd ne referim la forma sa aplicat n cadrul unui document, un element se mai numete etichet (tag); d) etichet: un cod care identific un element pentru ca browserul sau alt program de parcurgere s tie n ce mod s afieze coninutul. Etichetele sunt ncadrate de caractere de delimitare (paranteze ascuite) Ele sunt ntotdeauna cuprinse ntre paranteze unghiulare (<>) iar utilizarea literelor mici sau mari n scriere nu au importan. Documentele HTML sunt fiiere text (ASCII). n text sunt inserate o serie de coduri aa numitele taguri sau marcaje care stau la baza modurilor de afiare a documentului. Un document HTML este compus din tag-uri i text curat. Documentele au componente asemntoare cum ar fi titluri, tabele, liste, paragrafe etc. Tag-urile HTML sunt folosite tocmai pentru a marca elementele comune, care pot conine text, grafic sau alte elemente. Tag-urile sunt de forma pereche nceput-sfrit:
<tag>.............................</tag>
tagul de nceput coninut arbitrar
5
tagul de sfrit care are caracterul slash (/ )
Curs HTML
Scrierea perechilor de legturi: CORECT INCORECT
CORECT
<tag1> <tag2> <tag1> <tag2>
</tag2> </tag1>
</tag1> </tag2>
Tag-uri din cadrul documentului HTML

Fiecare document HTML, nc de la creare are dou pri principale: un antet i un corp. Chiar dac nu sunt special delimitate, HTML presupune existena lor. HTML ofer de asemenea ansa de a aduga i alte componente funcionale paginii, sub forma foilor de stil, scripturilor i seturilor de cadre. Dei fac parte din definirea unui document HTML, dou etichete exist n afara structurii documentului: doctype i html. Prima identific versiunea de HTML folosit pentru pagina respectiv i regulile pe care acestea le respect. A doua etichet identific un limbaj global i direcia textului pentru documentul respectiv, n plus marcheaz nceputul i sfritul coninutului HTML. Documentul HTML se indic prin tag-ul HTML <HTML>.........................</HTML> Vom prezenta numai o parte din tag-urile HTML, care sunt importante in realizarea unui design atragator. Se considera ca limbajul HTML este stapinit de catre student, avindu-se in vedere ca au absolvit cursul de Tehnici multimedia.
Culori, fonturi, margini

O pagin Web poate fi setat prin: - alegerea culorii de fond - alegerea culorii textului i - alegerea dimensiunilor paginii
Culoarea de fond
Culoarea se obtine din amestecul a celor trei culori fundamentale: rou, verde i albastru. Culoarea de fond a unei pagini Web se specific utilizand :
Curs HTML
nume de culoare. Astfel sunt disponibile cel puin 16 nume de culori, astfel avem urmatoarele nume: red, green, blue, aqua, black, fuchsia, gray, lime, maroon, navy, olive, purple, silver, teal, white i yellow. secventa hexazecimala #rrggbb unde r,g sau b sunt cifre hexazecimale i pot lua valorile din multime {0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, A, b, B, c, C, d, D, e, E, f, F};astfel se pot defini 65536 de culori. functia rgb(r,g,b), unde r,g si b iau valori din multimea numerelor naturale {0,1,2255}
Culoare pentru tag-ul body

Culoarea unei pagini se precizeaz prin intermediul unui atribut al etichete <body>. Sintaxa: <body bgcolor = culoare>, unde culoare se stabilete dup modelul precizat mai sus. Exemplu a unei pagini Web cu fondul de culoare cyan:
Culoarea textului
Definirea culorii textului pentru o pagini Web se face prin intermediul atributului text al etichetei <body> Sintaxei: <body text = culoare>, unde culoare se precizeaz la fel ca la exemplul precedent. Pagina de Web urmtoare are textul de culoare roie:
Curs HTML
Atribute multiple
O eticheta poate sa aiba mai multe atribute. O eticheta cu trei attribute are urmatoarea sintaxa: Sintaxa: <eticheta atribut1 = valoare1 atribut2 = valoare2 atribut3 = valoare3> Exemplu: Pagin Web cu textul de culoare albastr i fondul de culoare galben:
Textul de baz (basefont)

Atributele textului de baza dintr-o pagina Web sunt: Mrime (size) Culoare (color) Font (style)
8
Curs HTML
Sintaxa: <basefont size = numr color = culoare style = font> unde: numr poate lua una dintre valorile din multimea {1, 2, 3, 4, 5, 6, 7 } (valoarea 1 fiind pentru fontul cel mai mic si valoarea 7 pentru fontul cel mai mare) culoare se precizeaz prin nume sau prin RGB font poate fi un font generic din multimea {serif, sans serif, cursive, monospace, fantasy, Times New Roman, Helvetica, Arial } Semantica: Eticheta (Tag-ul) basefont este valabil pn la sfritul paginii sau pn apare urmtoarea etichet <basefont>. n cazul n care eticheta <basefont> lipsete , textul din pagina Web are atributele prestabilite si anume: size=3, color=black style=Times New Roman
Marginile paginii Web

Se face cu ajutorul a dou atribute ale etichetei <body>: leftmargin distana dintre marginea din stnga a ferestrei browserului i marginea din stnga a coninutului paginii topmargin distana dintre marginea de sus a ferestrei browserului i marginea de sus a coninutului paginii Valorile care se pot atribuii celor doua atribute sunt : numere ntregi pozitiv, care indica distana dintre continutul ferestrei si fereastra browserului, distanta msurat n pixeli un procent, ce reprezinta procent din limea, respectiv, nlimea ferestrei browserului
Curs HTML
Stilurile blocurilor de text

Stiluri fizice Se pot alege diferite stiluri pentru caracterele din textul unei pagini Web. Caractere: ngroate (tag-ul b), cursive (tag-ul i) Un bloc de text apare ngroat n pagin dac este inclus ntre <b> text </b> .
Un bloc de text inclus ntre etichetele <i> text </i> este scris cu caractere cursive.
10
Curs HTML
Caractere: mrite (tag-ul big), micsorate( tag-ul small), Un text inclus ntre etichetele <big> text </big> este scris cu caractere mai mari cu o unitate dect dimensiunea curenta.
Un text inclus ntre etichetele <small> text </small> este scris cu caractere mai mici cu o unitate dect dimensiunea curente.
11
Curs HTML
Caractere:indice superior i indice inferior Fragmentele de text aliniate ca indice inferior (sub-script) sunt delimitate de etichetele <sub> i </sub>. Secvenele de text aliniate ca indice superior (super-script) sunt incluse ntre etichetele <sup> i </sup>.
Caractere: subliniate i secionate Eticheta de tip bloc <u> text </u> insereaz un bloc de caractere subliniate. Eticheta <strike> si </strike> sau <s> si </s> insereaz un bloc de caractere secionate la mijloc cu o linie orizontal.
12
Curs HTML
Stiluri logice
Stilurile logice sunt bazate pe cele fizice. Modul lor de aciune depinde de browserul utilizat. Blocuri de caractere evideniate Urmtoarele dou etichete pun n eviden prin stilul cursiv fragmente de text: <cite> text </cite> (cite = citat) <em> text </em> (emphasize = a evidenia) Aceste dou etichete sunt echivalente cu eticheta <i> </i>.
13
Curs HTML
Blocuri de caractere monospaiate Etichetele urmatoare permit scrierea fragmentelor de text cu caractere monospaiate de tipul celor utilizate de o main de scris. <code> text </code> (code = cod sau surs) <kbd> text </kbd> (keyboard = tastatur) <tt> text </tt> (teletype = teleprinter)
Configurarea fonturilor
Un font are urmtoarele atribute:

culoarea - se stabilete cu atributul color tipul sau stilul - se stabilete cu atributul face mrimea - se stabilete cu size mrimea n puncte tipografice (este stabilit prin atributul point-size) grosimea - se definete cu atributul weight
Culoarea fontului
Pentru a scrie un text cu o anumita culoare se ncadreaz acest text ntre delimitatorii <font> text</font> n felul urmtor: Sintaxa: <font color = culoare>text de culoarea specificat </font>
14
Curs HTML
Familia fontului
Tipul de font se stabileste prin atributul face al etichetei <font>. Fonturile pot fi separate prin virgul. Cele cinci familii generice de fonturi sunt: serif sans serif cursive monospace fanatasy Pot fi utilizate si alte fonduri specifice cum ar fi: Times (tip particular de font serif) Helvetica (tip particular de font sans serif) Arial Courier (tip particular de font monospace) Western (tip particular de font fantasy) , etc. Exemplu: <font face=Arial, serif, monospace>. Browserul va utilize primul font pe care il recunoaste.
15
Curs HTML
Mrimea fontului
Marimea fontului se indica cu atributul size al etichetei <font>. Acest atribut poate lua urmtoarele valori: 1, 2, 3, 4, 5, 6, 7 (1= cel mai mic font, 7= cel mai mare font); -1, -2, -3, etc. pentru a micora dimensiunea fontului cu -1, -2 fata de dimensiunea curenta; +1, +2, +3, etc. pentru a mri dimensiunea fontului cu +1,+2,.. fata de dimensiunea curenta; O alt metod de stabilire a mrimii unui font este prin utilizarea atributului point-size al etichetei <font> i reprezint mrimea fontului n puncte tipografice. Acest atribut poate lua ca si valori orice numar natural pozitiv. Atributul point size funcioneaz numai cu Netscape Comunicator.
16
Curs HTML
Grosimea unui font

Grosimea poate fi definit cu cu atributul weight al etichetei <font>. Valorile pe care le poate lua atributul weight sunt: 100, 200, 300, 400, 500, 600, 700, 800 i 900 (100 fontul cel mai subire, 900 fontul cel mai gros)
. Blocuri de texte a) Inserarea unei adrese Inserarea unei adrese se face cu ajutorul etichetei <address> </address>. Textul este afiat cu caractere cursive.
17
Curs HTML
b) Indentarea unui bloc de text Un bloc de text indentat este un bloc de text la care marginea din stnga a textului este deplasat la o anumit distan de marginea paginii.
Blocuri <div> Delimitarea i formatarea unui bloc de text se face cu delimitatorii <div> text</div>. Blocul <div> are urmatoarele atribute : align (aliniere). Valorile atributului align sunt: left aliniere la stnga center aliniere central right aliniere la dreapta
18
Curs HTML
19
Curs HTML
Blocul <div>text </div> are posibilitatea sa includa si alte subblocuri. Atributul align are efect asupra tuturor subblocurilor incluse in blocul <div>.
nowrap care permite intreruperea randurilor acolo unde este precizat acest lucru.
Blocul preformatat
Etichetele <pre> </pre> permit pastrarea caracteristicilor textului asa cum a fost introdus in fisier, deci ia in considerare caracterele spaiu, tab i CR/LF (enter la sfarsit de linie). Blocul <pre> ... </pre> poate fi folosit pentru a insera randuri vide. Caracterul spatiu, pentru a putea fi luat n considerare trebuie precizat prin &nbsp.
Blocuri paragraf (tag-ul <p>)

Trecerea la o linie noua se face cu eticheta <br>, (br de la break=pauz). La fel si eticheta <p> face trecerea la o linie nou, dar eticheta <p> permite: inserarea unui spaiu suplimentar inainte de blocul paragraf. inserarea unui spaiu suplimentar dupa blocul paragraph;. alinierea textului cu ajutorul atributului align, cu valorile left, center sau right
20
Curs HTML
Blocuri de titlu
Titlurile (headers) de capitole sau paragrafe pot avea diferite dimensiuni. Ele pot fi introduce cu tag-ul <hx> text </hx> unde x poate lua valori din multimea {1,2,3,4,5,6} Exemplu: <h3>(bloc de text)</h3> Se accept atributul align de ctre aceste etichete pentru alinierea titlului blocului de text la stnga (modul prestabilit), n centru i la dreapta. Tag-ul <h1> scrie titlul cu caracterele cele mai mari i cele mai ngroate. Tag-ul <h6> folosete caracterele cele mai mici.
Linii orizontale
Se pot insera linii orizontale intr-o pagina web cu ajutorul etichetei <hr>.
21
Curs HTML
Configurarea unei linii orizontale Atribute ale etichetei <hr> sunt: align - permite alinierea. Valori posibile: left, center, right. width - permite alegerea lungimii liniei. Valori posibile: numere ntregi pozitive care reprezint lungimea liniei, n pixeli; numere ntre 1 i 100 urmate de semnul %; reprezint procentul din limea paginii pe care se ntinde linia; size permite alegerea grosimii liniei. Valorile posibile sunt numere ntregi pozitive reprezentnd grosimea liniei n pixeli (valoarea prestabilit este 2); noshade definete o linie fr umbr; color permite definirea culorii liniei
Cap 2 .MBUNTIREA PAGINII WEB CU IMAGINI, LISTE I TABELE 2.1. Imagini GIF si JPG Formele grafice permise de HTML sunt: GIF(imagini;256 culori) i JPG (imagini; milioane de culori). 2.2. Inserarea imaginilor Marcajul <IMG SRC=nume_imagine>
22
Curs HTML
Exemplu (PISICA.html) <HTML> <HEAD> <TITLE> Includerea unei imagini </TITLE> </HEAD> <BODY> <HR SIZE=30 color=RED> <IMG SRC=C:\catel.jpg> <H1><CENTER> Salut!</CENTER></H1> <CENTER><FONT face="Courier, Arial" color="RED" size="6"><P> Ma numesc Motanel!</P></FONT></CENTER> <CENTER><IMG SRC=C:\pisica.jpg></CENTER> <HR SIZE=30 color=RED> <I>pisica@k.ro</I><HR COLOR=red> </BODY> </HTML> Efect
Salut! Ma numesc Motanel!
pisica@k.ro
2.3. Liste in pagini Web

Liste Ordonate (elementele sunt automat numerotate). Declararea unei liste ordonate se face cu ajutorul marcajului: <OL>..</OL>
Ex. Nr.1 (LO1.html) <OL> <LI>element 1 <LI>element 2 <LI>element 3 </OL> Ex. Nr.2 (LO2.html)
23
Efect 1. element 1 2. element 2 3. element 3 Efect
Curs HTML
<OL TYPE=A> <LI>element 1 <LI>element 2 <LI>element 3 </OL> Ex. Nr.3 (LO3.html) <OL TYPE=I START=3> <LI>element 1 <LI>element 2 <LI>element 3 </OL> Ex. Nr.4 (LO4.html)
A. element 1 B. element 2 C. element 3 Efect III. IV. V. element 1 element 2 element 3
<OL TYPE=I START=3> <LI>element 1 X. <LI VALUE=10>element 2 <LI VALUE=20>element 3 XX. <LI>element 4 </OL> XXI.
Efect III. element 1 element 2 element 3 element 4
Liste Neordonate sau liste marcate (elementele sunt marcate printr-un semn special). Declararea unei liste neordonate se face cu ajutorul marcajului: <UL>..</UL>.
Ex. Nr.1 (UL1.html) <UL> <LI> element 1 <LI> element 2 <LI> element 3 </UL> Ex. Nr.2 (UL2.html) <UL TYPE=circle> <LI> element 1 <LI> element 2 <LI> element 3 </UL>
Efect

element 1 element 2 element 3 Efect element 1 element 2 element 3
o o o
{Schimbarea simbulului care preced elementele din lista se poate face utilizand parametrul TYPE al marcajului <UL>..</UL>, caruia i se pot asocia una dintre urmatoarele valori> disc, circle i square.} Liste de Definitii de termeni si definitiile lor asociate. Declararea unei liste ordonate se face cu ajutorul marcajului <DL>..</DL> utilizat impreuna cu marcajul <DT> pentru termenul definit si marcajul <DD> pentru definitia propriu zisa.
Exemplu (DL.html) <DL> <DT>Aldine<DD>Caracteristica a fonturilor de a fi reprezentate prin caractere mai ingrosate. <DT>Date<DD>Flux nesfarsit de materiale care apar pe Internet. <DT>Font<DD>Utilizarea particulara a unui anumit stil de caractere.
24
Curs HTML
</DL> Efect Aldine Caracteristica a fonturilor de a fi reprezentate prin caractere mai ingrosate. Date Flux nesfarsit de materiale care apar pe Internet. Font Utilizarea particulara a unui anumit stil de caractere. Liste in liste liste imbricate Listele pot fi coninute una ntr-alta. n proiectarea unei pagini Web trebuie avut n vedere urmtorul lucru foarte important: informaia coninut n pagin s fie structurat astfel nct s poat fi uor de urmrit i de gsit. n acest sens combinarea celor trei tipuri de liste este foarte util. Exerciiu: Construii o pagin Web n care s redactai propria agend telefonic utiliznd listele de definiii. Documentul va fi salvat sub numele Agenda.html n directorul Elev al directorului rdcin. Exemplu (Liste_imbricate.html) <HTML> <HEAD> <TITLE>Liste in pagini Web</TITLE> </HEAD> <BODY> <HR SIZE=30 COLOR=RED> <IMG SRC=c:\Alina.jpg allign=right> <H1><CENTER>Salut!</CENTER></H1> <HR WIDTH=50%> <UL> <LI><H3>Date personale</H3> <DL> <DT>Nume:<DD>Voilean. <DT>Prenume:<DD>Alina <DT>Data nasterii:<DD>18_01_1987 <DT>Profesia:<DD>Eleva anul II la Colegiu Andrei Saguna Brasov </DL> <LI><H3>Stare emotionala</H3> Acum este tarziu, dar cum somnul intarzie sa apara iata-ma hai-hiu pe Internet. <P><LI><H3>Preocupari actuale</H3> Saptamana viitoare trebuie s prezint la ora de engleza un referat cu urmatoarele caracteristici> <UL> <LI>Tema- "Internet viitorul omenirii?" <LI>Continutul:-implicatiile pe care le are informatica si, in special, Internetul in viata omului viitorului <LI>Concluzia:-Sigur ca trebuie sa fie o vizine a mea asupra viitorului si nu o profetie </UL> <LI><H3>Sugestii</H3> Daca tu, draga prietene de pe Internet, m-ai putea ajuta cu cateva sugeestii in realizarea acestui
25
Curs HTML
referat ti-as ramane indatorata. <P> </UL> <HR WIDTH=20% ALLIGN=left NOSHADE><H3>Alina</H3><P> <I>alina@k.ro</I><HR COLOR=RED> </BODY> </HTML> Efect
Salut!
Date personale
Nume: Popescu Prenume: Alina Data nasterii: 18_01_1987 Profesia: Eleva anul I la Colegiul din Brasov
Stare emotionala
Acum este tarziu, dar cum somnul intarzie sa apara iata-ma hai-hiu pe Internet.
Preocupari actuale
Saptamana viitoare trebuie sa prezint la ora de engleza un referac cu urmatoarele caracteristici>
o o o
Tema- "Internet viitorul omenirii?" Continutul:-implicatiile pe care le are informatica si, in special, Internetul in viata omului viitorului Concluzia:-Sigur ca trebuie sa fie o vizine a mea asupra viitorului si nu o profetie
Sugestii
Daca tu, draga prietene de pe Internet, m-ai putea ajuta cu cateva sugestii in realizarea acestui referat ti-as ramane indatorata.
Alina
26
Curs HTML
alina@k.ro
2.Inserarea tabelelor Marcajul pentru definirea unui tabel este: <TABLE>..</TABLE> iar n interiorul acestui marcaj se utilizeaz marcajele: <TR>..</TR> pentru definirea unei linii a tabelului; <TH>..</TH> pentru definirea antetului tabelului; <TD>..</TD> pentru definirea datei unei cellule a tabelului. Parametrii marcajului <TABLE> BORDER=n permite definirea zonei umbrite din jurul tabelului (n, nr. ntreg). BORDER COLOR=cod_culoare permite definirea culori zonei umbrite. CELLSPACING=n definete spaiul lsat ntre celule (n, nr. ntreg - pixeli). CELLPADDING=n - definete spaiul lsat dintre data din celul i chenarul celulei (n, nr. ntreg pixeli). WIDTH=n permite definirea limii dorite a tabelului (n, n pixeli sau n procente). HEIGHT=n permite definirea nlimii dorite a tabelului (n, n pixeli sau n procente).
Parametrii marcajului <TD>
COLSPAN=n permite unei celule s se extind pe mai multe coloane. ROWSPAN=n permite unei celule s se extind pe mai multe rnduri. GBCOLOR=culoare permite definirea culorii de fond a unei celule. ALIGN=pozitie specific alinierea orizontal a datei din celul. Opiunile posibile sunt: Left, Right, Center. BACKGROUND=fisier_imagine permite specificarea unei imagini grafice de fond n interiorul unei cellule.
Ex. Nr. 1 (Tabel1.html) <HTML> <HEAD> <TITLE>Tabele</TITLE> </HEAD> <BODY> <TABLE> <TR><TH>Nume</TH> <TH>Prenume</TH> <TH>Media</TH> <TR><TD>Petcu</TD> <TD>Ionut</TD> <TD>8.20</TD> </TABLE> </BODY> </HTML>
27
Efect Nume Prenume Media Petcu Ionut 8.20
Curs HTML
Ex. Nr. 2 (Tabel2.html) <HTML> <HEAD> <TITLE>Tabele</TITLE> </HEAD> <BODY> <TABLE BORDER COLOR=RED> <TR><TH>Nume</TH> <TH>Prenume</TH> <TH>Media</TH> <TR><TD>Petcu</TD> <TD>Ionut</TD> <TD>8.20</TD> </TABLE> </BODY> </HTML> Ex. Nr. 3 (Tabel3.html)
Efect Nume Prenume Media Petcu Ionut 8.20
<HTML> <HEAD> <TITLE>Tabele</TITLE> </HEAD> <BODY> <TABLE BORDER HEIGHT=100 WIDTH=100> <TR><TH rowspan=2 bgcolor=lightblue>Candidat</TH> <TH>Nume</TH> <TH>Prenume</TH> <TH>Media</TH> <TR><TD>Petcu</TD> <TD>Ionut</TD> <TD>8.20</TD> </TABLE> </BODY> </HTML> Efect Candidat Nume Prenume Media Petcu Ionut 8.20
Cateva exemple de creare a unor tabele: Un tabel fara chenar
28
Curs HTML
Un tabel cu chenar
Alinierea tabelului in pagina de Web
29
Curs HTML
30
Curs HTML
Precizarea culorilor de fond pentru un tabel

Culoarea de fond se stabileste cu atributul bgcolor. Culoarea de fond poate fi ataat ntregului tabel prin eticheta <table>. Culoarea de fond poate fi ataat unei linii de tabel prin eticheta <tr>. Culoarea de fond poate fi ataat unei celule de tabel prin eticheta <td>. Atentie: Daca avem definite mai multe atribute bgcolor, se vor lua in considerare in ordinea : <td>, <tr>, <table>. Tag-ul <table> are prioritatea cea mai mica. Culoarea textului din fiecare celula se indica in tag-ul < font > text </font> <font color=valoare></font>
31
Curs HTML
Dimensionarea celulelor unui tabel Distana dintre dou celule vecine se definete cu ajutorul atributului cellspacing al etichetei table. Valorile lui cellspacing pot fi numere ntregi pozitive, inclusiv 0. Valoarea prestabilit este 2. Distana dintre marginea unei celule i coninutul ei se definiete cu atributul cellpadding al etichetei <table>. Valorile lui cellpadding pot fi numere ntregi pozitive. Valoarea prestabilit este 1.
32
Curs HTML
Dimensionarea unui tabel

Dimensiunile unui tabel limea i nlimea se stabilesc cu atributele width, height ale etichetei <table>. Aceste atribute pot lua valorile: numere intregi pozitive, reprezint limea, respectiv nlimea n pixeli a tabelului. numere ntregi ntre 1 i 100, urmate de semnul %, reprezint o fraciune din limea, respectiv nlimea, total a paginii.
33
Curs HTML
Exerciiu: Construii o pagin Web de prezentare a oraului n care locuii. nserai imagini cu monumente semnificative ale oraului. Structurai pagina utiliznd un tabel fr chenar. Folosii pentru antetul tabelului o culoare de fundal pastelat. Documentul va fi salvat sub numele Oras.html n directorul Elev al directorului rdcin.
CAP.3. REFERINE N PAGINI WEB 3.1. Referine interne 3.2. Referine externe 3.3. Link-uri i imagini Principala caracteristic a hipertextelor o constituie legturile (links). Un links este o conexiune ctre alt resurs Web, resurs care poate fi accesat din fereastra browser ului printr-un singur clic. Link-urile pot fi de dou tipuri: interne i externe. Marcajul principal att pentru referinele interne ct i pentru cele externe este: <A></A> (anchor- ancor), acesta trebuie s conin parametrul HREF=valoare, fr de care nu are nici un sens. 3.1. Referine interne S presupunem c dorim s adugm un cuprins unei pagini Web de dimensiune mare pentru a permite utilizatorului s se deplaseze ntr-un anumit loc din aceeai pagin. Locurile n care dorim s se fac deplasarea se numesc intele salturilor interne din paginile Web sau ancore cu nume i sunt specificate, n cadrul documentului HTML, prin utilizarea parametrului name al marcajului <A> </A>: <A name=valoare>Mesaj</A>
34
Curs HTML
Ex.: <A nume="baza">Baza material</A> Unde valoarea parametrului name poate fi orice secven de caractere, numere sau semen de punctuaie. Adugarea legturilor ctre inte din cadrul paginii Web Corespondentul unei ancore cu nume care definete saltul ctre aceast int este: <A HREF=#NumeAncorCuNume>Mesaj</A> <A HREF="#baza">Baza materiala</A> Exemplu care ilustreaz cum ar arta un set de ancore cu nume ntr-un document HTML destinat s afieze o pagin Web a unei coli. <html> <body background="C:\Documents and Settings\andye\My Documents\My Pictures\404.gif" text="steelblue"> <h1>Scoala cu clasele I-VIII "Nicolae Iorga" Bacau</h1> <h2><I>Prof. ing. Bostan Mihaela</I></h2> <Font color="green" size="5"> <P><a href=#jos name=sus>Du-te jos</a> <P><A HREF="#baza">Baza materiala</A> <P><A HREF="#profile"> Profile</A> <P><A HREF="#profesori"> Profesori</A> <P><A HREF="#elevi"> Elevi</A> <A NUME="baza"><h2>BAZA MATERIALA</h2></A> <br>27 sali de clasa <br>14 laboratoare si sali specializate <br>un atelier scoala <br>o biblioteca <br>laboratoare de informatica cu retea de calculatoare si acces la Internet <br>cabinet metodic de perfectionare <br>dispensar medical scolar <br>cabinet stomatologic scolar <br>un bazin de inot in constructie <br>baza sportiva proprie <br>o cantina <br>un camin <br><a name=jos href=#sus>Du-te sus</a> <A NAME="profile"><h2>PROFILE</h2> <br>Profil Pedagogic <br>Invatatori-Educatoare <br>Profil Bibliotecar si Pedagog scolar <br>Bibliotecar documentarist <br>Instructor animator <br>Pedagog scolar <br>Profil Matematica-Informatica <br>Profil Stiinte ale naturii <br>Profil Filologie
35
Curs HTML
<br><a name=jos href=#sus>Du-te sus</a> <A NAME="profesori"><h2>PROFESORI</h2> <br>Gorbanescu <br>Stoica <br>Negrea <br> ... <br> <br><a name=jos href=#sus>Du-te sus</a> <A NAME="elevi"><h2>ELEVI</h2> <br>5A-Dir.: Prof. Negrea <br>5B-Dir.: Prof. Mocanu <br>5C-Dir.: Prof. Vintila <br>6A-Dir.: Prof. Cuciureanu <br>6B-Dir.: Prof. Arsinte <br>6C-Dir.: Prof. Bibire <br>7A-Dir.: Prof. Escu <br>7B-Dir.: Prof. Costea <br>7C-Dir.: Prof. Mirzac <br> <br><a name=jos href=#sus>Du-te sus</a> </body> </html>
Imagini
Formatele acceptate de browsere pentru fiierele de imagini sunt: GIF (Graphics Interchange Format) extensia .gif JPEG (Joint Photographic Experts Group) cu extensia .jpeg sau .jpg BMP (BitMap) cu extensia .bmp (este ntlnit numai cu browserul Internet Explorer, etc. Inserarea ntr-o pagin Web a unei imagine se face utilizand eticheta <img> cu atributul src, iar valoarea acestui atribut este adresa URL a imaginii. Dac se dorete adugarea unui chenar n jurul imaginii se folosete atributul border al etichetei <img> care poate lua valori numere ntregi pozitive. Dimensiunile unei imagini pot fi modificate prin intermediul atributelor width i height ale etichetei <img>. Acestea pot avea ca si valori : numere ntregi positive ce reprezint numrul de pixeli numere de la 1 la 100 urmate de %, reprezint procente din limea, respectiv din nlimea blocului n care se afl imaginea. Precizarea dimensiunilor spaiului ocupat de o imagine duce la la creterea vitezei de ncrcare a paginii.
Alinierea unei imagini n pagina Web

Alinierea se face prin intermediul atributului align al etichetei <img>, care ia valorile:
36
Curs HTML

left aliniere la stnga right aliniere la dreapta top aliniere deasupra .Partea de sus a imaginii se aliniaz cu partea de sus a textului ce precede imaginea. middle aliniere la mijloc bottom sau baseline aliniere la baz
Alinierea textului n jurul unei imagini

Se face cu atributele hspace i vspace ale etichetei <img> care precizeaz distana n pixeli pe orizontal i pe vertical, dintre imagine si elementele din pagin.
37
Curs HTML
Imaginea pentru fondul unei pagini Web

Se poate folosi imaginea pentru a stabili fondul unei pagini Web cu ajutorul atributului background al etichetei <body> care ia ca valoare adresa URL a imaginii.
38
Curs HTML
Imagini ca legaturi
Imaginea trebuie sa apara ca element de legatura in cadrul tagulul <a> imagine </a>
Cap.4. CADRE Cadrele (frames) sunt seciuni ce ofer posibilitatea de a vizualiza simultan n fereastra browser-ului mai multe pagini Web. Bazele organizrii cadrelor Fiecare pagin afiat ntr-un cadru se specific utiliznd marcajul <FRAME> ce este inserat n marcajul <FRAMSET>. Prin intermediul parametrilor ROWS sau COLS al marcajului <FRAMSET> se definete spaiul din cadrul ferestrei browser-ului, alocat fiecrei pagini Web n parte.
39
Curs HTML
Definirea spaiului alocat fiecrei pagini Web se poate face n pixeli sau n procente, procentul se refer la ct la sut din fereastra browser-ului este alocat fiecrei pagini Web n parte.
4.1. Cadre orizontale Exemplul1: mprirea browser-ului n dou seciuni orizontale. Cadre1.html <HTML> <FRAMESET ROWS="80, *"> <FRAME SRC ="unu.html"> <FRAME SRC ="doi.html"> </FRAMESET> </HTML> Exemplul2: mprirea browser-ului n trei seciuni orizontale. Cadre2.html <HTML> <FRAMESET ROWS="80,50, *"> <FRAME SRC ="unu.html"> <FRAME SRC ="doi.html"> <FRAME SRC ="trei.html"> </FRAMESET> </HTML> 4.2. Cadre verticale Exemplul1: mprirea browser-ului n dou seciuni verticale. Cadre3.html <HTML> <FRAMESET COLS="80,*"> <FRAME SRC ="unu.html"> <FRAME SRC ="doi.html"> </FRAMESET> </HTML> Exemplul2: mprirea browser-ului n trei seciuni verticale. Cadre4.html <HTML> <FRAMESET COLS="80,50,*"> <FRAME SRC ="unu.html"> <FRAME SRC ="doi.html"> <FRAME SRC ="trei.html"> </FRAMESET> </HTML> 4.3. Cadre n cadre Exemplul1: Putem afia n aceeai fereastr a browser-ului simultan att cadre orizontale ct i cadre verticale. <HTML> <FRAMESET COLS="80%,*"> <FRAMESET ROWS="30%,70%*"> <FRAME SRC="unu.html"> <FRAME SRC ="doi.html"> </FRAMESET>
40
Curs HTML
<FRAMESET ROWS="33%,33%,*"> <FRAME SRC ="rosu.html"> <FRAME SRC ="galben.html"> <FRAME SRC ="verde.html"> </FRAMESET> </FRAMESET> </HTML> Exemplul2: Unui cadru i se poate asocia un nume prin intermediul parametrului NAME al marcajului <FRAME>. Documentul prima.html <HTML> <FRAMESET COLS="30%,*"> <FRAME SRC ="ROSU.html"> <FRAMESET ROWS="30%,*"> <FRAME SRC ="NEGRU.html"> <FRAME SRC ="ALB.html" NAME=REFER> </FRAMESET> </FRAMESET> </HTML> Documentul rosu.html <HTML> <HEAD> </HEAD> <BODY BGCOLOR="RED"TEXT="#FFFFFF"> <A HREF="VERDE.html" TARGET=REFER>Referire catre pagina Web verde</A> <BR> <A HREF="ALBASTRU.html"TARGET=REFER>Referire catre pagina Web albastra</A> </BODY> </HTML> Documentul alb.html <HTML> <HEAD> </HEAD> <BODY BGCOLOR="WHITE"TEXT=#000000"> <H1><CENTER>PAGINA ALBA</CENTER></H1> </BODY> </HTML> Documentul negru.html <HTML> <HEAD> </HEAD> <BODY BGCOLOR="BLACK"TEXT=#FFFFFF"> <H1><CENTER>PAGINA NEAGRA</CENTER></H1> </BODY> </HTML> Documentul verde.html
41
Curs HTML
<HTML> <HEAD> </HEAD> <BODY BGCOLOR="GREEN"TEXT=#000000"> <H1><CENTER>PAGINA VERDE</CENTER></H1> </BODY> </HTML> Documentul albastru.html <HTML> <HEAD> </HEAD> <BODY BGCOLOR="BLUE"TEXT=#000000"> <H1><CENTER>PAGINA ALBASTRA</CENTER></H1> </BODY> </HTML> Exercitii: 1. Scriei codurile HTML anterioare (prima.html, rosu.html, alb.html, negru.html, verde.html, albastru.html) crend paginile Web corespunztoare. 2. Vizualizai pagina Web prima.html. 3. Vizitai pe rnd referinele: Referire ctre pagina Web verde i Referire ctre pagina Web albastr. Ce constatai?
Cap. 5. FORMULARE Formularele sunt una dintre cele mai populare metode interactive de comunicare World Wide Web (WWW). Formularele HTML v ofer posibilitatea de a aduna informaii sau impresii de la cei care v viziteaz pagina Web. Pentru a prelucra datele dintr-un formular, avei nevoie de un script. Acesta are trei componente principale: <TEXTAREA>, <SELECT> i <INPUT>.
1.
<TEXTAREA> -definete un cmp n care utilizatorul poate introduce un text pe mai multe linii. Atributele pentru aceasta sunt: NAME definete numele cmpului; ROWS stabilete numrul de linii de cmp; COLS stabilete numrul de coloane din cmp. Exemplul1: Fiierul Form1.html <HTML> <FORM> <TEXTAREA NAME="Comentariu" ROWS=5 COLS=40> </TEXTAREA> </FORM> </HTML> <SELECT> - ofer utilizatorului posibilitatea de a alege dintr-o list de opiuni. Atributele pentru aceasta sunt: NAME definete numele cmpului;
42
2.
Curs HTML
SIZE stabilete cte opiuni sunt afiate n acelai timp; MULTIPLE permite selectarea mai multor opiuni n acelai timp. Opinile sunt delimitate de marcajele <SELECT> i </SELECT> i sunt listate n cadrul etichetei <OPTION>. Valorile pentru aceast etichet sunt: VALUE reprezint valoare ce este atribuit opiunii i care apoi este trimis ctre script; SELECTED stabilete o opiune ca fiind implicit. Exemplul2: Fiierul Form2.html <HTML> Alegeti o optiune din lista <FORM> <SELECT NAME="Optiuni"> <OPTION SELECTED VALUE="Optiune1">Optiune1 <OPTION VALUE="Optiune2">Optiune2 <OPTION VALUE="Optiune3">Optiune3 </SELECTED> </FORM> </HTML> <INPUT> - este un cmp pentru o singur opiune ce permite colectarea de informaii, incluznd cmpuri simple de text, butoane radio, csue de bifare i butoane de trimitere sau de anulare a informaiilor din formulare. Atributele pentru aceasta sunt: NAME definete numele cmpului; SIYE dimensiunea cmpului specificat n numr de caractere text; MAXLENGHT specific nr. Max. De caractere ce pot fi citite pentru un cmp de text; VALUE definete pentru un cmp de text, textul implicit ce va fi afiat; CHECKED activeay un buton radio sau o csu de bifare; TYPE definete tipul cmpului de intrare.
3.
Exemplul3 - pentru un cmp simplu de text: Fiierul Form3.html <HTML> <FORM> Introduceti numele:<INPUT TYPE="text" NAME="Nume" SIZE="15" MAXLENGTH="12"> </FORM> </HTML> Exemplul4 pentru csua de bifare : Fiierul Form4.html <HTML> <FORM> <INPUT TYPE="checkbox" NAME=""checkbox1" VALUE="Optiune1">Optiune1 <INPUT TYPE="checkbox" NAME="checkbox2" VALUE="Optiune2" CHECKED>Optiune2 </FORM> </HTML> Exemplul5 pentru butoane radio: Fiierul Form5.html <HTML>
43
Curs HTML
<FORM> Intrebarea 1: Va placut pana acum? <br> <INPUT TYPE="radio" NAME=choice" VALUE"Optiune1">Da <INPUT TYPE="radio" NAME=choice" VALUE"Optiune2">Nu </FORM> </HTML> Exemplul6 pentru butoane de trimitere i anulare: Fiierul Form6.html <HTML> <FORM> Introduceti numele:<INPUT TYPE="text" NAME="Nume" SIZE="15" MAXLENGTH="12"> <br><br> <INPUT TYPE="Submit" VALUE="Trimite"> <INPUT TYPE="Reset" VALUE="Anuleaza"> </FORM> </HTML> Exerciiu:
1.
Creai o pagin Web numit Formular.html, care s conin un formular pentru sugestiile i ntrebrile vizitatorilor site-ului din care va face parte pagina respectiv.
Programul pentru Formularul pe WEB: sondaj.html <HTML> <HEAD> <TITLE>Sondaj</TITLE> </HEAD> <BODY> <H1>SONDAJ</H1> Multumim pentru timpul alocat raspunsului la urmatoarele intrebari: <FORM ACTION="mailto:eu@provaiderul meu.ro METHOD=POST ENCTYPE="text/plain"> Adresa dumneavoastra de e-mail: <INPUT TYPE="text" NAME="E-mail" VALUE=login@provider.ro <P> <INPUT TYPE="checkbox" NAME="secret" VALUE="da"> Nu vreau sa faceti publica adresa mea. <P> Cum va conectati la Internet? <BR> <INPUT TYPE="radio" NAME="conexiune" VALUE="modem" CHECKED>Modem <BR> <INPUT TYPE="radio" NAME="conexiune" VALUE="RNIS">RNIS<BR> <INPUT TYPE="radio" NAME="conexiune" VALUE="LS">legatura specificata<BR><P> Unde va aflati? <SELECT NAME="Regiune"> <OPTION VALUE="Romania SELECTED">Romania <OPTION VALUE="SUA">SUA
44
Curs HTML
<OPTION VALUE="Europa">Europa <OPTION VALUE="Restul lumii">Restul lumii </SELECT> <P> Ce cautati prin pagina mea de web?<BR> <SELECT NAME="Interes" SIZE=4MULTIPLE> <OPTION VALUE="Informatii">Informatii <OPTION VALUE="Sport">Sport <OPTION VALUE="Divertisment">Divertisment <OPTION VALUE="Cultura">Cultura <OPTION VALUE="Slujba">Slujba </SELECT> <P> Aveti vreo observatie de facut?<BR> <TEXTAREA NAME="Comentarii" COLS=40 ROWS=4 WRAP=physical> </TEXTAREA> <P> <INPUT TYPE="submit" VALUE="Trimite"> <INPUT TYPE="reset" VALUE="Initializare"> </FORM> </BODY> </HTML>
45
Curs HTML
Liste de selectie <select>
<option >.
</select>
O lista de selectie permite alegerea unuia sau mai multor elemente dintr-o lista finita. Are 2 atribute importante : name si size. Elementele dintr-o lista se introduc cu tag-ul <option>. Sintaxa: <select name = nume size = numar> <option value = valoare_1 selected> Element_1 <option value = valoare_2 > Element_2. <option value = valoare_3> Element_3 </select>. unde: name numele listei de selectie size este un numar intreg pozitiv, precizeaza cate elemente din lista sunt vizibile la un moment dat <option > este tag-ul care include elementele listei. Server-ul primeste perechea Continutul din value si valoarea dupa option selected permite selectarea prestabilita a unui element al listei
Lista de selectie cu selectii multiple

Are aceiasi sintaxa cu lista de selectie descrisa mai sus, dar in plus are atributul multiple in tag-ul select.
46
Curs HTML
Campuri de editare multiple

Se fac cu tag-ul <textarea > Sintaxa: <textarea liste de atribute> text </textarea> Din lista de atribute enumeram: cols (nr de caractere afisate intr-o linie), rows (nr de linii afisate simultan), name (permite atasarea unui nume), wrap care determina comportamentul campului de editare fata de sfarsitul de linie. Atributul poate lua valorile: off, hard, soft..
47
Curs HTML
ntre tag-ul de intrare i cel de ieire ale formularului sunt inserate, n principal, controalele formularului. Un control este o form de interaciune a utilizatorului cu formularul. Putem prezenta conform tabelului de mai jos principalele controale ntr-un formular HTML prezentate mai sus: CONTROL ACIUNE A UTILIZATORULUI text Introducere a unui text de volum redus password Introducere a unui text de volum redus, care apare, pe ecran, mascat cu "*" submit Activare (pentru a transmite informaiile completate de utilizator) reset Activare (pentru a restabili valorile iniiale ale tuturor controalelor formularului) checkbox Bifare radio Bifare textarea Introducere a unui volum mare de text menu Alegere a unei opiuni dintr-un meniu TAG Input Input Input Input Input Input Textarea Select option
Harti de imagini
O imagine poate fi folosita ca si zona activa. In acest caz imaginea se insereaza in documentul HTML intre etichetele <a> si </a>. Exista insa posibilitatea de a crea harti de imagini (image maps) care permite ca diferite zone ale unei imagini sa fie definite drept legaturi catre diverse pagini WEB.
48
Curs HTML
Crearea unei harti de imagini presupune trei etape: Definirea unei imagini ca harta de imagini. Se v a utiliza tag-ul <img> cu atributele src si usemap. Numele dat pozei in usemap, precedat de semnul#, se va regasi obligatoriu in tag-ul map, in atributul name.. Definirea hartii in interiorul unui bloc special definit cu tag-ul <map> si </map>. Tag-ul are un atribut obligatoriu si anume name, care primeste ca si valoare numele hartii ( numele din usemap); Crearea zonelor pe harta. Fiecare zona se introduce cu eticheta <area>. Eticheta <area> are trei atribute obligatorii: 1. shape care poate lua una din valorile: rect (pentru zone de forma dreptunghiulare); circle (pentru zone de forma circulara); poly (pentru zone de forma poligonala); default (pentru portiunile imaginii care nu se incadreaza in nici una dintre categoriile anterioare) 2. coords determina coordonatele zonei 3. href primeste adresa URL a paginii indicate de legatura zonei respective. Valorile atributului shape: rect coords=x1,y1,x2,y2 dreptunghi unde (x1, y1) este coordonata coltului stanga sus si (x2, y2) este coordonata coltului dreapta jos.

circle coords=x1, y1,r (x1,y1) este centrul cercului de raza r. Poly coords=x1,y1,x2,y2,...xn,yn poligonul cu varfurile de coordonate (x1,y1), (x2,y2), (x3,y3),....
Pentru obtinerea automata a coordonatelor se poate folosi programul MAP This, program care defineste regulile pentru o imagine .gif sau .jpeg. Programul este freeware si se poate descarca de pe Internet.
49
Curs HTML
Cap6- INTRODUCERE N JAVASCRIPT JavaScript este un limbaj de programare creat de Netscape, cu ajutorul cruia se pot realiza pagini web interactive. Sintaxa sa este asemntoare cu cea a limbajelor C/C++ sau Java. JavaScript poate recunoate i rspunde la evenimentele utilizatorului cum ar fi efectuarea unui clik cu mouse-ul, introducerea datelor ntr-un formular de navigare n pagin. De exemplu, se pot scrie funcii care s verifice dac datele introduse ntr-un formular sunt valide. Instruciunile JavaScript sunt cuprinse n interiorul documentului HTML n interiorul marcajului: <SCRIPT>...</SCRIPT> Acesta poate aprea, fie n antetul documentului, fie n corpul su. <SCRIPT language=JavaScript> //codul JavaScript </SCRIPT> Exemplu: java.html <HTML> <BODY> <SCRIPT language="JavaScript"> document.write("Text scris cu JavaScript"); </SCRIPT> <br>Text scris cu HTML </BODY> </HTML> Rezultat:
Text scris cu JavaScript Text scris cu HTML
10.1. Evenimente Un eveniment este o aciune generat de utilizator: click pe un obiect, trecerea mouse-ului pe un obiect, trimiterea unui formular etc. Exemplu: even.html <HTML> <BODY> <FORM> <INPUT type="Button" value="Apasati-ma" onClick="alert('Salut')"> </FORM> </BODY> </HTML> Rezultat:
10.2. Elementele limbajului JavaScript

Definirea i apelarea funciilor: Definirea unei funcii presupune doar specificarea aciunilor ce se vor efectua. Apelarea unei funcii presupune punerea n aplicare a acelor aciuni. 50
Curs HTML
Definirea funciilor se face n antetul documentului HTML. Funciile pot returna unul sau mai multe rezultate ori nici unul n urma apelului. Exemplu ce definete o funcie n antet i o apeleaz apoi n corpul documentului HTML: fct.html <HTML> <HEAD> <SCRIPT language="JavaScript"> function suma(numar1, numar2) { return numar1+numar2; } </SCRIPT> </HEAD> <BODY> <SCRIPT language="JavaScript"> document.write("Suma returnata de functie este ", suma(5,10)); </SCRIPT> </BODY> </HTML> Variabile: Variabilele se declar cu ajutorul cuvntului cheie var, fr a se preciza tipul acestora. Acestea i pot schimba tipul pe parcursul programului. Sintaxa de declarare a variabilellor este: var variabila1, variabila2, ... sau var variabila=valoare Variabilele sunt de dou tipuri: locale (sunt declarate n interiorul funciilor) i globale) sunt declarate n afara funciilor). variabile.html <HTML> <HEAD> <SCRIPT language="JavaScript"> var nume='Toma' var prenume function scrie() { var prenume='Elena' document.write(prenume); } </SCRIPT> </HEAD> <BODY> <SCRIPT language="JavaScript"> document.write(nume+' '+prenume+' '); scrie(); </SCRIPT> </BODY> </HTML>
51
Curs HTML
FF00FF FF00CC FF0099 FF0066 FF0033 FF0000 CCFFFF CCFFCC CCFF99 CCFF66 CCFF33 CCFF00 CCCCFF CCCCCC CCCC99 CCCC66 CCCC33 CCCC00 CC99FF CC99CC CC9999 CC9966 CC9933 CC9900 CC66FF CC66CC CC6699 CC6666 CC6633 CC6600 CC33FF CC33CC CC3399 CC3366 CC3333 CC3300 CC00FF CC00CC CC0099 CC0066 CC0033 CC0000 99FFFF 99FFCC 99FF99 99FF66 99FF33 99FF00 99CCFF 99CCCC 99CC99 99CC66 99CC33 99CC00 9999FF 9999CC 999999 999966 999933 999900 9966FF 9966CC 996699 996666 996633 996600 9933FF 9933CC 993399 993366 993333 993300 9900FF 9900CC 990099 990066 990033 990000 66FFFF 66FFCC 66FF99 66FF66 66FF33 66FF00 66CCFF 66CCCC 66CC99 66CC66 66CC33 66CC00 6699FF 6699CC 669999 669966 669933 669900 6666FF 6666CC 666699 666666 666633 666600 6633FF 6633CC 663399 663366 663333 663300 6600FF 6600CC 660099 660066 660033 660000 33FFFF 33FFCC 33FF99 33FF66 33FF33 33FF00 33CCFF 33CCCC 33CC99 33CC66 33CC33 33CC00 3399FF 3399CC 339999 339966 339933 339900 3366FF 3366CC 336699 336666 336633 336600 3333FF 3333CC 333399 333366 333333 333300 3300FF 3300CC 330099 330066 330033 330000 00FFFF 00FFCC 00FF99 00FF66 00FF33 00FF00 00CCFF 00CCCC 00CC99 00CC66 00CC33 00CC00 0099FF 0099CC 009999 009966 009933 009900 0066FF 0066CC 006699 006666 006633 006600 0033FF 0033CC 003399 003366 003333 003300 0000FF 0000CC 000099 000066 000033 000000
52

Curs HTML

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Curs HTML

Încărcat de

Drepturi de autor:

Formate disponibile

Curs HTML

HTML (Hyper Text Markup Language)

tagul de sfrit care are caracterul slash (/ )

Scrierea perechilor de legturi: CORECT INCORECT

Tag-uri din cadrul documentului HTML

Culori, fonturi, margini

Culoare pentru tag-ul body

Textul de baz (basefont)

Marginile paginii Web

Stilurile blocurilor de text

Grosimea unui font

Blocuri paragraf (tag-ul <p>)

Salut! Ma numesc Motanel!

2.3. Liste in pagini Web

Efect 1. element 1 2. element 2 3. element 3 Efect

A. element 1 B. element 2 C. element 3 Efect III. IV. V. element 1 element 2 element 3

Efect III. element 1 element 2 element 3 element 4

element 1 element 2 element 3 Efect element 1 element 2 element 3

Parametrii marcajului <TD>

Efect Nume Prenume Media Petcu Ionut 8.20

Efect Nume Prenume Media Petcu Ionut 8.20

Cateva exemple de creare a unor tabele: Un tabel fara chenar

Alinierea tabelului in pagina de Web

Precizarea culorilor de fond pentru un tabel

Dimensionarea unui tabel

Alinierea unei imagini n pagina Web

Alinierea textului n jurul unei imagini

Imaginea pentru fondul unei pagini Web

Liste de selectie <select>

Lista de selectie cu selectii multiple

Campuri de editare multiple

10.2. Elementele limbajului JavaScript

S-ar putea să vă placă și