HTML

Lecia 1 :: Principalele elemente HTML

Pentru a-i crea un website trebuie sa-i comunici informaii calculatorului. Nu este suficient doar s scrii textul ce va fi in site, trebuie sa ai posibilitatea de a poziiona textul, de a-l aranja, de a introduce imagini, de a face legturi, etc.. Pentru a-i comunica computerului i ce anume doreti trebuie sa foloseti un limbaj pe care acesta l nelege.Sunt deja limbaje utilizate in crearea programelor, cum ar fi C++ sau Java. Acestea sunt destul de complexe i doar pentru oameni ce deja au o nelegere bun a lucrului cu calculatorul.HTML si CSS ajut exact la crearea de website-uri i au fost create ntr-o form foarte uor de utilizat.

1.1. Ce este HTML? (Hypertext Markup Language)Este un set de coduri logice care constituie apariia unui document web i a informaiilor pe care le deine. Codurile sunt scrise ntre "" (parantez nchis), cu toate c nu sunt chiar paranteze, aa se numesc i arat aa: < >.Exemplu:

sau Cele mai multe elemente (numite i tag-uri) au un element (tag) de deschidere si un element de nchidere distins prin "/" in interiorul parantezei deschise ""se numesc atribute care descriu proprietile elementului. Cum ar fi: culoarea, mrimea, etc.Atributele sunt separate prin spaiu i urmate de semnul egal "=", dup care sunt scrise, ntre ghilimele (" ") valorile atributelor.Astfel, o etichet HTML poate conine elementul de identificare, atribute i valori.

n urmtorul exemplu elementul este FONT atributul COLOR i valoarea BLUE:

Acest text va fi albastru

1.2. Structura documentului HTMLUn document (fiier) HTML este alctuit din mai multe elemente i atributele lor.La nceput un element HTML cuprinde (nconjoar ) datele documentului. Acest element conine dou sub-elemente principale: HEAD i BODY. n HEAD se poate adauga titlul paginii web i alte elemente numite metatag-uri, precum i scripturi JavaScript i stil-uri CSS. n BODY se adauga coninutul documentului care va fi afiat n pagina web.Exemplu:

Titlu Documentului Continutul paginii

Structura general a unui document HTML

Acesta are si el mai multe sub-elemente: Aici se scrie titlul documentului, cat mai sugestiv, si se ncheie cu Poate fi folosit pentru a nregistra locaia documentului in forma URL. (Necesar daca documentul nu este accesat in locaia lui originala). Se ncheie cu Indic o relaie dintre document si alte obiecte de pe WEB. Se ncheie cu Aici sunt scrise informaii cum ar fi tastatura (limbaj) folosita, descrierea si cuvinte cheie care pot fi gsite de motoarele de cutare. Se ncheie cu Conine oricare din JavaScript sau VB Script. Se ncheie cu Conine informaii privind stilul, grafica informaiilor care vor aprea pe pagina. Se ncheie cu Aici se ncheie elementele adugate n HEAD Etichetele HTML si continutul documentului care va fi afisat in pagina web sunt incluse in acest element. Aici pot fi puse si elemente cum ar fi: Se ncheie cu

Lecia 2 :: Crearea si editarea paginii HTML

Sunt mai multe programe cu care se pot crea pagini web, la un nivel de baz chiar fr a cunoate foarte bine limbajul HTML, cum sunt Microsoft Expression Web.Editoarele de HTML sunt programele de baz, i cele mai folosite, pentru editarea paginii web. Avantajul folosirii lor este simplitatea, pentru creare paginii web sunt necesare cteva din codurile invizibile ale limbajului HTML, astfel se creeaz documente rapid i uor, n plus ocupa foarte puin spaiu si resurse de memorie, acestea ns necesit cunoaterea limbajului HTML.Dintre editoarele de text cunoscute, de baz este Notepad, dar poate fi utilizat orice editor de text. Utilizatorii avansai pot folosi i altele cum ar fi Adobe Dreamweaver sau Coda.

2.1. Crearea bazei de nceput a unui document

Cum ai observat n Lecia 1, sunt elemente sigure, generale, care sunt necesare pentru crearea unui document HTML.Pentru nceput deschidei un editor de text i scriei structura de baz a unei pagini web. Aceasta este:

Bine ai venit pe site-ul meu

Continut

Pe prima linie este declarat DOCTYPE-ul. E un tag particular i e singurul ce nu funcioneaz dup regulile menionate mai sus. Acest tag este folosit pentru ai comunica browser-ului ca tu creezi o pagina HTML. Dup asta urmeaz . Acesta este tag-ul principal ce va conine toat pagina HTML. Dup cum se observ dup nchiderea acesteia cu nu mai este nimic, aceasta indicnd finalul paginii HTML. Tagul conine informaii referitoare la headerul paginii web. Se nchide puin dup. n interiorul tagului includem tagul . Este foarte important: conine titlul paginii web. n exemplul nostru titlul este "Bine ai venit pe site-ul meu" dar pentru pagina ta pui ce titlu doreti. Apoi observm tagul . Sunt multe de acest tip, dar o s o explic pe aceasta pentru ca e indispensabil. Doar cea din exemplu e esenial: este folosit pentru a indica faptul ca o s foloseti o limba din Europa Central sau de Est. (Exist o list complet pentru aceste coduri). La final dup ce se nchide tagul se deschide un nou tag: ntre i scrii contentul paginii web. E clar c n interiorul acestor taguri petrecem 99% din timp. Pentru moment, nu e nimic ntre aceste dou taguri, aa c pagina web nu va afia nimic. (este o pagina alb cum s-a observat mai devreme).

Meta tagurile sunt pri de cod HTML pe care unele motoare de cutare le gsesc dar pe care majoritatea vizitatorilor nu le vd niciodat.Cu ajutorul lor putei controla modul n care motoarele de cutare indexeaz site-ul vostru.Site-ul vostru trebuie sa aib un titlu i, dac vrei o clasare nalt, cuvntul (cuvintele) cheie trebuie s fie n titlu. Site-ul vostru trebuie s aib o descriere metatag i, dac vrei o clasare nalt, cuvntul dvs. cheie trebuie s se gseasc n ea. Site-ul vostru trebuie sa aib un metatag pentru lista voastr de cuvinte cheie. Descrierea metatag reprezint o propoziie scurt sau dou despre site-ul vostru - asemntor cu firma unui magazin din mall. Aceast descriere este ceea ce-i prezinta motorul de cutare unui posibil vizitator care s citeasc i s se hotrasc s dea click pe site-ul vostru n locul site-ului de dedesubt. Mai jos gsii un exemplu cum ar putea fi completat tag-ul TITLE i un mic coninut n pagin:

MarPlo.net - Cursuri, Jocuri si Anime Pagina HTML Lectii, exemple si explicatii.

-specifica regiunile unei hri de imagine la client

name = "nume_harta"numele harii de imagine (corespunztor atributului USEMAP al marcajului )

-definete o regiune a unei hri de imagine

shape = "forma"forma regiunii: rect sau rectangle (dreptunghi), circle sau circ (cerc), point (punct), poly sau polygon (poligon)

coords = "coordonate"coordonatele unei regiuni (in pixeli); se calculeaz n funcie de coltul din stnga sus al imaginii (care are coordonatele (0, 0), adic x = 0, y = 0); variaza in funcie de SHAPE = forma regiunii:- pentru rect (dreptunghi) se dau coordonatele celor 4 colturi sau a celor din stg. sus si dr. jos ale regiunii- pentru circ (cerc) se dau coordonatele centrului cercului si raza- pentru point (punct) se dau coordonatele punctului- pentru poly (poligon) se dau coordonatele colturilor poligonului

href = "=url="URL - ul asociat regiunii specificate din cadrul imaginii; in cazul unui clic pe acea regiune se ncarc pagina specificat prin URL

alt = "text"textul asociat regiunii specificate din cadrul imaginii; apare plasnd mouse-ul deasupra regiunii respective sau celor cu browser-ul setat s nu ncarce imagini

Iat un exemplu practic, avem imaginea de mai jos.n aceasta imagine avem trei zone distincte: dreptunghi, cerc si romb (poligon); pe care, prin codurile HTML de creare a hrii de imagini, le-am definit s fie tratate ca zone diferite, separate, i cnd dm click pe ele, fiecare deschide cte o pagin diferit (sugerat de numele din zona respectiv).

Observai ca mouse-ul i schimb forma numai cnd este deasupra zonelor care au fost definite ca s fie suprafee a hrii de imagini. Aceasta definire nu este fcut prin desen, ci prin coordonatele folosite n atributul "coords", coordonate care au fost alese pentru a se potrivi cu desenul. Reperul cel mai important este lungimea in pixeli din coltul stnga-sus pn n punctele care formeaz zona dorit.

Codul HTML pentru acest exemplu este urmtorul (studiai cu atenie atributele folosite si coordonatele scrise; revizuii i tabelul de mai sus):

Lecia 9 :: Lucru cu tabele

Tabelele sunt elemente foarte utile pentru aezarea i prezentarea coninutului ntr-o pagin web.

9.1. Crearea de tabele

Pentru a crea tabele n paginile web se folosete elementul ... , acesta ncadreaz alte patru sub-elemente, care alctuiesc structura tabelului.- Linia (rndul) Tabelului ... - Titlul Tabelului ... - Coloanele tabelului (datele) ... - Sub-titlu tabelului ... Linia tabelului de obicei conine elementul pentru titlurile tabelului i elementul pentru coloanele tabelului. n cadrul elementelor pentru titluri i coloanele tabelului se pot aduga i alte elemente HTML, cum ar fi cele pentru formatul textului, paragrafe, link-uri sau imagini

Mai jos putei vedea un exemplu de cod HTML pentru crearea unui tabel:

titlu 1 titlu 2

linia 2- coloana 1 linia 2- coloana 2

linia 3- coloana 1 linia 3- coloana 2

linia 4- coloana 1 linia 4- coloana 2

n pagina web apare aa:

titlu 1titlu 2

linia 2- coloana 1linia 2- coloana 2

linia 3- coloana 1linia 3- coloana 2

linia 4- coloana 1linia 4- coloana 2

9. 2. Atributele Tabelului

- bgcolor = definete culoarea tabelului- width = specific lungimea tabelului (n pixeli sau procente din lungimea paginii)- border = grosimea liniei (n pixeli) ce definete tabelul i nconjoar fiecare celul- cellspacing = spaiu dintre celule (n pixeli)- cellpadding = spaiu dintre linia celulei i coninutul acesteia (n pixeli)- align = controleaz poziionarea tabelului in pagina, cu urmtoarele atribute : left, right, sau center- background = controleaz culoarea de fond a tabelului, care poate fi si o imagine- bordercolor = culoarea liniei din jurul tabelului- bordercolorlight = culoarea luminoas folosit de dou linii din cele patru care nconjoar tabelul- bordercolordark = culoarea ntunecat folosit de doua linii din cele patru care nconjoar tabelul

Sub-titlu tabeluluiSub-titlu tabelului "caption" permite specificarea unei linii de text care va aprea deasupra sau sub tabel, acest lucru este definit de atributul "align" care poate lua valorile: top (deasupra) bottom (jos)Exemplu:

acesta este textul

titlu 1 titlu 2

linia 2- coloana 1 linia 2- coloana 2

n pagina web apare aa:

titlu 1titlu 2

linia 2- coloana 1linia 2- coloana

acesta este textul

9.3. Atributele specifice elementelor pentru titlu i coloane

- colspan = specific ct de multe coloane ale tabelului aceasta celula va nlocui- rowspan = specific ct de multe rnduri ale tabelului aceasta celula va nlocui- align = alinierea datelor celulei pe orizontal (left, right sau center)- valign = alinierea datelor celulei pe vertical (top, middle sau bottom)- background = controleaz culoarea de fond a celulei, care poate fi i o imagine- bgcolor = definete culoarea celulei (dar nu imagine)- width = specific lungimea celulei (n pixeli sau procente din lungimea paginii)- height = specific nlimea celulei (n pixeli sau procente din nlimea paginii)n pagina web apare aa:

titlu 1titlu 2

linia 2- coloana 1

linia 3- coloana 1linia 3- coloana 2

linia 4- coloana 2 - colorat

acesta este textul

Not: Exersai singuri i alte exemple de tabele, cu mai multe rnduri i coloane.

Lecia 10 :: Utilizarea cadrelor (frame-uri)

Cadrele, sau frame-uri, sunt folosite pentru mprirea ferestrei browser-ului astfel nct s[ fie afiate mai multe pagini n aceeai fereastr de browser.Un frame (cadru) este o parte din suprafaa ferestrei browserul-ui. Fiecare frame prezint n interior un document propriu (n general un document HTML). De exemplu putei creea dou cadre ntr-o fereastr, n primul cadru putei ncrca un document HTML (ex. doc1.htm) iar n al doilea cadru un alt document HTML, de la alta adresa (ex. doc2.htm)

Dup cum putei vedea n imaginea de mai jos.Frames.htmdoc.htmdoc2.htm

Pentru crearea de frame-uri se pot folosi urmtoarele etichete HTML: i sau

10.1. Configurarea cadrelor

Pentru nceput se adaug un element ... n interiorul documentului HTML, n seciunea HEAD. determin ct din spaiul ferestrei este atribuit fiecrui cadru, folosind atributele ROWS sau COLS care mpart ecranul in Linii sau Coloane.Acesta va conine elemente , cte unul pentru fiecare divizare a ferestrei din browser.

ROWS Determin numrul de linii i mrimea cadrelor care vor fi aezate n linie, ncepnd de sus.Pot fi folosite urmtoarele valori: - pixeli absolui; ex : "360,120"- procente din nlimea ecranului ; ex : "75%,25%"- valori proporionale, folosind (*). Acesta putnd fi combinat cu procente sau pixeli. Ex: "120,*" sau "30%,*"

COLS Determin numrul de coloane i mrimea cadrelor care vor fi aezate pe coloane, ncepnd din stnga.Pot fi folosite urmtoarele valori: - pixeli absolui ; ex : "380,120"- procente din lungimea ecranului ; ex : "33%,77%"- valori proporionale, folosind (*). Acesta putnd fi combinat cu procente sau pixeli. Ex: "120,*" sau "30%,*"

Alte atribute ale elementului FRAMEBORDER - Stabilete afiarea sau nu a unei borduri n jurul cadrelor. Posibile valori: 0, 1 sau YES, NO.FRAMESPACING - Acest atribut este specificat n pixeli. Daca FRAMEBORDER este 0 atunci i acesta trebuie s aib valoarea 0BORDER - Marginea cadrelor. Valori posibile: 0 sau 1BORDERCOLOR - Acest atribut permite s alegi culoarea bordurii.

Elementul Acest element definete un singur cadru , este scris n interiorul elementului Pentru fiecare cadru trebuie scris cte un element Acesta are urmtoarele atribute: SRC - Aici trebuie scrisa adresa i numele paginii folosite pentru cadruNAME - Aici trebuie scris numele de identificare al cadrului. MARGINWIDTH - Atribut opional, valoare n pixeli. Determin spaiul orizontal dintre coninutul cadrului i marginea acestuiaMARGINHEIGHT - Atribut opional, valoare n pixeli. Determin spaiul vertical dintre coninutul cadrului i marginea acestuia.SCROLLING - Afieaz un Scroll Bar n cadru. Valori posibile: YES (permite afiarea Scroll Bar-ului), NO (nu va fi prezentat nici un Scroll Bar) i AUTO (browser-ul va decide dac este nevoie de Scroll Bar. Aceasta valoare este cea mai indicat)NORESIZE - Opional, mpiedic utilizatorul s modifice mrimea cadrului, prin selectarea marginii acestuia i mutarea n stnga sau dreapta ori sus sau jos.

Mai jos putei vedea cum poate fi creat o pagina HTML care s conin dou cadre, cel din stnga ocupnd 23% din spaiul paginii iar cel din dreapta 77%

TITLU PAGINII

De asemenea se poate crea un design de cadre cu o combinaie de linii i coloane. n acest caz, un al doilea element "" va fi scris n locul elementului "" care descrie a doua linie. Al doilea element va divide spaiul rmas n doua coloane. Pentru aceasta, al doilea element "" trebuie urmat de nc dou elemente "" Pentru o mai buna nelegere putei studia exemplu de mai jos, care creeaz o pagin ce conine trei cadre:

TITLU PAGINII

10.2. Atributul target

Cnd sunt create link-uri care sunt folosite pentru a deschide pagini n cadre, este nevoie de specificarea unui atribut n eticheta de link "" numit target, acesta spune browser-ului n ce cadru s deschid pagina. Atributul target folosete ca valoare textul din atributul NAME al elementului FRAME n care se va deschide nou pagin.De exemplu, daca avem un link n Meniu.htm care vrem s deschid pagina Doc3.htm n spaiul n care se afla cellalt cadru, de exemplu Continut.htm; codul HTML pentru link va arta astfel n Meniu.htm:

Numele link-ului

- dac nu se specific atributul TARGET , pagina se va deschide n cadrul curent- atributul TARGET trebuie s aib acelai nume specificat n codul HTML, ca i atributul NAME din FRAME-ul n care se dorete afiarea paginii.

Special Target: Sunt 4 nume speciale de TARGET, care nu pot fi asociate cu atributul NAME. Fiecare are o funcie special.

target="_top" - acesta va ncrca link-ul n toata fereastra browser-ului, disprnd astfel cadrele.target="_blank" - acesta va ncrca link-ul ntr-o noua fereastr de browser, astfel rmnnd deschis i vechea fereastra.target="_self" - acesta va ncarca link-ul n aceeai fereastr de unde a fost acionat.target="_parent" - cadrul "_parent" este cadrul anterior de la care a fost deschis noul cadru, dac acesta nu exist atunci link-ul se va deschide n actuala fereastr de browser.

10.3. Adugarea cadrelor iframe

Pentru crearea unui cadru cu "" putei folosi, ca exemplu, urmtoarea sintaxa (aceasta se adaug n seciunea BODY, n locul unde dorii s apar frame-ul):

- Unde "iframe" este elementul principal care indic adugarea unui frame n pagin.- "url_pagina" e adresa paginii care va fi ncrcat n iframe, "width" i "height" reprezint lungimea respectiv nlimea cadrului (exprimat n procente sau pixeli), "scrolling" reprezint permisiunea de derulare a paginii din cadru (yes sau no), "frameborder" specific dac va fi sau nu afiat o margine (bordura) pentru cadru (1=da, 0=nu), iar "nume_frame" este numele cadrului (necesar pentru atributul "TARGET" n link-uri sau cnd frame-ul este folosit de JavaScript).

Lecia 11 :: Crearea formularelor

De cele mai multe ori formularele HTML sunt create pentru a fi folosite mpreun cu alte programe i scripturi web, cum sunt PHP, JavaScript i altele.

11.1. Tag-ul FORM

Pentru a crea un formular n HTTML se folosete elementul ... , n cadrul acestuia se vor aduga celelalte elemente specifice.Elementul ... nu conine atribute pentru format, folosete ns urmtoarele atribute: action - aici se scrie adresa URL a unui script de pe server (de obicei PHP sau CGI), program care trebuie s accepte datele din FORM , le proceseaz i trimite napoi rspunsul la browser.method - aici putem scrie get , sau post. Aceste valori specific ce metod HTTP va fi folosit pentru a trimite coninutul formularului la server.enctye - determin mecanismul folosit pentru a codifica coninutul transmis din formular.name - Este numele formularului, folosit de scripturi VB (Visula Basic) sau JavaSript.target - Este inta cadrului (frame) unde pagina va fi vizualizata, dup transmiterea datelor din form.

11.2. Elementele de formular

n continuare sunt prezentate restul elementelor de formular care sunt folosite pentru a crea diferite cmpuri, casete, butoane n pagina web, necesare pentru a aduna datele care vor fi trimise la aplicaie pe server. Cele mai multe se creaz prin atributul type al elementului ...

Proprietile elementului ... type - tipul de FORM folosit (caseta text, buton si altele ...)name - numele elementului respectiv de formular, folosit de scripturile la care sunt trimise datelevalue - datele (valoarea) asociate acelui element de formular i care sunt trimise, mpreun cu numele, ctre scripturi (PHP, CGI, JavaScript)size - specific numrul de caractere care dau lungimea zonei de textmaxlength - numrul maxim de caractere acceptatechecked - specific dac un buton sau alt form va fi iniial selectat (bifat).readonly - folosit pentru cmpuri de tip text, mpiedic modificarea valorii (textului) din acel cmpdisabled - mpiedic folosirea cmpului care are aceast proprietate. Va fi vizibil dar nu va putea fi folosit, datele acestuia nu vor fi trimise din formular la vreun script.Casete de text- este folosit pentru a crea n pagin un cmp pentru text (cu o singura linie).- Codul este

Top of Formn browser va apare:

Acest element folosete urmtoarele atribute: type - textname - numele csuei de text, folosit de scriptul la care sunt trimise datelevalue - va reprezenta propriul context ca valoare aleasa. Un ir de text care apare n csua de textsize - specific numrul de caractere care dau lungimea csuei de text (default 20)maxlength - numrul maxim de caractere acceptate s fie adugate de utilizator

Camp textarea - "textarea" este un element ce creaz un cmp n pagin, n care utilizatorul poate aduga mai multe linii de text.- Codul este

Top of Formn browser va apare:

Acest element folosete urmtoarele atribute: name - numele cmpului de text, folosit de scriptul la care sunt trimise datelerows - numrul de linii a zonei de textcols - numrul de coloane a zonei de textwrap - standard este OFF. Dar poate avea valorile : "VIRTUAL" sau "PHYSICAL", astfel ca textul wraps n browser s fie prezentat exact cum este scris de utilizator.

Casete pentru parole - "password" este folosit pentru a permite adugarea de parole. Caracterele adugate n aceast caset nu sunt afiate cu valoarea lor real, pentru a nu se vedea parola scris.- Codul este

Top of Formn browser va apare:

Acest element folosete urmtoarele atribute: type - passwordname - numele csuei pentru parole, folosit de scriptul la care sunt trimise datelevalue - de obicei nu este adugat. Daca este scris, va reprezenta parola default din acea caset.size - specific numrul de caractere care dau lungimea csuei pentru adugarea parolei (default 20)maxlength - numrul maxim de caractere acceptate s fie adugate de utilizator

Casete de formular ascunse

- "hidden" este folosit pentru a aduga n formular date care s nu fie vizibile n browser i care sunt trimise la scripturi mpreun cu celelalte date din formular.Codul este

Acest element folosete urmtoarele atribute: type - hiddenname - numele csuei ascunse, folosit de scriptul la care sunt trimise datelevalue - valoarea care se dorete s fie transmis prin acea caseta ascuns.

Check box - este folosit pentru adaugarea mai multor optiuni pe care utilizatorul le poate alege (oricte din ele) prin bifarea lor- Codul este

Top of Formn browser va apare:

Acest element folosete urmtoarele atribute: type - checkboxname - numele csuei checkbox, folosit de scriptul la care sunt trimise datelevalue - valoarea casetei checkbox respective, care poate fi selectata (bifat)checked - dac este adugat acest atribut, caseta checkbox respectiv este selectat (bifat).

Radio button - este folosit pentru adugarea mai multor opiuni dintre care utilizatorul poate alege una singur- Codul este

Top of Formn browser va apare:

Acest element folosete urmtoarele atribute: type - radioname - numele csuei radio, folosit de scriptul la care sunt trimise datelevalue - valoarea casetei radio respective, care poate fi selectat (bifat)checked - dac este adugat acest atribut, caseta radio respectiva este selectat (bifat).

Casete pentru upload - "file upload" este folosit pentru a permite utilizatorului s ncarce alte documente pe serverul web. Aceast caset este nsoit de un buton "Browse" prin care se alege documentul care va fi transferat pe server. (upload-ul se face tot prin intermediul unui script (PHP, CGI)-Codul este

n browser va apare:

Acest element folosete urmtoarele atribute: type - filename - numele csuei upload, folosit de scriptul la care sunt trimise datelesize - specific numrul de caractere care dau lungimea csuei upload.

Buton simplu - acesta este folosit cu JavaScript sau VBScript pentru a efectua o aciune cnd este apsat- Codul este

n browser va apare:

Acest element folosete urmtoarele atribute: type - buttonname - numele butonului, necesar pentru a fi folosit de scriptvalue - textul care apare pe buton.

Buton Submit - acest element face ca prin apsarea lui browser-ul s trimit numele i valoarea tuturor celorlalte elemente din formular la scriptul de pe server- Codul este Top of Formn browser va apare:

Acest element folosete urmtoarele atribute: type - submitname - numele butonului, poate fi folosit de scriptul la care se trimit datelevalue - textul care apare pe buton.

Imagine pentru buton Submit - permite aplicarea unei imagine n locul butonului Submit standard- Codul este - Acest element folosete urmtoarele atribute: type - imagename - numele butonului, poate fi folosit de scriptul la care se trimit datelesrc - locaia imaginii folosite.

Buton Reset - permite utilizatorului s tearg toate datele pe care le-a scris n celelalte elemente din formular- Codul este

Top of Formn browser va apare:

Acest element folosete urmtoarele atribute: type - resetvalue - textul care apare pe buton.

Elemente select - pentru acest element se folosete tag-ul "", care formeaz o list, un meniu, cu date ce pot fi selectate. - Atributele elementului "" sunt: name - numele acestui element, necesar pentru a fi folosit de scriptul la care sunt trimise datelesize - seteaz nlimea elementului Select, care reprezint i numrul de opiuni din list care vor fi vizibile iniialmultiple - prezena acestui atribut specific faptul ca utilizatorul poate selecta mai multe opiuni.- "" este folosit mpreun cu elemente " " care reprezint lista elementelor ce sunt adugate i afiate n lista de selectare.- folosete dou atribute: selected - cnd acesta este adugat, opiunea respectiva este selectat cnd pagina web este iniial ncrcat. Cnd sunt adugate mai multe opiuni, este indicat folosirea acestui atribut doar cu una singur.value - specific valoarea variabilei numit n opiunea respectiv (necesar pentru scriptul care va primi datele).- sunt doua tipuri de elemente Select, unde diferen o face folosirea atributului SIZE- Cele dou tipuri de elemente Select sunt:

11.2.1. Drop Down List (Lista de derulare) - Codul este:

Optiune 1 Optiune 2

- unde "name" este atributul care definete numele acestui tag SELECT, iar "" mpreun cu "Opiune 1" (i 2) reprezint elementele din lista de selectare. Top of Formn browser va apare:

11.2.2. List Box

Codul este:

Optiune 1 Optiune 2

- unde "name" este atributul care definete numele acestui tag SELECT, atributul "size" determin nlimea elementului select care determin i numrul de opiuni vizibile iniial, iar "" mpreun cu "Opiune 1" (si 2) reprezint elementele din lista de selectare.

In browser va apare:

-Toate aceste elemente trebuie ncadrate n tag-ul " ... "!

Lecia 12 :: Elemente speciale meta, embed, marquee, object

Codul HTML conine i anumite elemente speciale, unele folosite pentru optimizarea paginii n vederea unei ct mai bune indexri n motoarele de cutare sau altele pentru adugarea de aplicaii audio i video ori alte elemente n pagin.

12.1. Elemente pentru optimizarea indexrii paginii

Aceste elemente de optimizare se adaug n seciunea HEAD a documentului HTML. Cel mai important este tag-ul . Alte elemente importante pentru motoarele de cutare sunt cele META, (numite i "meta tag-uri), acestea au 2 atribute: name (care determin tipul meta tag-ului) i content (care determin coninutul meta tag-ului).n continuare sunt prezentate exemple de meta tag-uri care sunt indicate sa fie adugate n fiecare pagina HTML:

- indic browser-ului ca este un fiier HTML- charset stabilete tipul de caractere (n general se folosete ISO-8859-1 sau UTF-8), dar exist i altele.

- n cazul unei cutri dup cuvinte-cheie, motorul de cutare ne d o list de pagini; pentru fiecare pagin (site) din list apare titlul ei (dat cu marcajul TITLE) urmat de o fraz (cea de la name="description" content="o fraza care descrie ..."); dac nu avem n marcajul META acea fraz, motorul va indexa dup prima fraz din pagina; tot ea va fi dat la o eventual cutare.- textul adugat cu acest tag pentru descriere are prioritate naintea frazelor din coninut. (folosii maxim 40, 50 caractere).

- motoarele de cutare in cont de cuvintele din meta "keywords" n momentul indexrii site-ului pentru atunci cnd sunt afiate rezultate de cutri. (folosii maxim 15-20 cuvinte).

- acesta nu este neaprat necesar, dar nu stric s-l folosii. A

Recomandare: Cuvintele din tag-ul ... este bine s se regseasc i n meta tag-urile "keywords", "description" ct i n titlurile din coninutul paginii.

Un alt meta tag care este cteodat necesar, dar nu are legtur cu motoarele de cutare, este "Refresh", acesta are urmtoarea forma: - acesta determin browser-ul s ncarce o noua pagin, cea care este adugat la url-ul din acest tag (aici http://www.nume_site/pagina), dup un anumit numr de secunde (aici 4). Practic, face un redirect.12.2. Adugarea de sunet la o pagina HTML

Pentru a aduga sunet ntr-o pagin web, putei folosi elementele sau :a). - introduce un background (fundal) audio n pagin, are urmtoarele atribute: src - definete locaia fiierului audio folosit (midi .au sau wav)loop - definete de cte ori se va repeta sunetuldelay - definete timpul dintre repetrititle - textul care va descrie sunetul.

Exemplu:

b. - afiseaza o consola pentru sunet, are urmatoarele atribute: src - definete locaia fiierului audio folosit (midi .au sau wav)controls - ofer posibilitatea alegerii mai multor controale care includ: console, console mici, butoane de play i alteleautostart - cnd este TRUE sunetul ncepe n timp ce sunetul este descrcat de browserhidden - cnd este TRUE va ascunde controalele, standard este FALSEloop - definete de cte ori se va repeta sunetulvolume - seteaz volumul sunetului (sonorul)height - nlimea n pixeli a consoleiwidth - lungimea n pixeli a consolei.

Exemplu:

Tag-ul "" poate fi folosit i pentru afiarea de imagini video, care au extensiile ".movs", ".mpeg" sau ".avi", recomandat este ".movs". Se adaug similar ca i sunetul, la "src" scriei calea ctre fiierul video. Diferena e c nu trebuie folosit atributul "hidden", iar pentru "width" i "height" dimensiunile nu trebuie sa fie mai mici dect dimensiunile n care este salvat fiierul video.- Totui, afiarea de imagini video necesit mai mult timp deoarece fiierele video au dimensiuni destul de mari.

- "" se folosete i pentru adugarea de imagini flash (cu extensia ".swf"), pentru aceasta este ncadrat n alt element, - Iat un exemplu de cod prin care putei aduga imagini flash n pagina web:

< param name="movie" value="fisier.swf">< embed src="fisier.swf" width="580" height="400">< /embed>< /object>

Unde "width" i "height" sunt dimensiunile cadrului n care este afiat imaginea flash, iar la atributele "value" i "src" se scrie calea ctre fiierul ".swf" (trebuie scris aceeai cale la ambele atribute).

Afiarea n pagina a elementelor cu EMBED necesit folosirea unui plug-in, care de cele mai multe ori, dac acesta nu este deja instalat, este cerut automat ncrcarea lui de ctre browser.

12. 3. Elemente de animaie text

HTML are un tag special, , prin care putei crea un efect de micare a unui text (sau imagine) care este ncadrat de a cest element.

Are urmatoarele atribute: loop - definete de cate ori se va mic textulheight - nlimea in pixeli a zonei in care se mic textulwidth - lungimea n pixeli a zonei n care se mic textulbgcolor - culoarea zonei n care se mic textuldirection - direcia de micare (left, right, up, down) - (stnga, dreapta, sus, jos)behavior - definete cum se va mica textul (scroll, slide, alternate)scrolldelay - seteaz numrul, in milisecunde, intre refreshuri de micare.

Exemplu de micare pe orizontal

Marquee text

Iat un alt exemplu unde micarea se face pe vertical:

Marquee text

n loc de text poate fi folosit si o imagine, nlocuind textul (aici "Marquee text") cu tagul " pentru imagine.

12.4. Includerea unei pagini HTML externe

n afar de modalitatea cu folosirea tag-ului pentru afisarea in pagina web HTML a coninutului din alta pagin HTML Ex.: Exist i o alt soluie, data de tag-ul folosit cu atributele "data" i "type". Urmtorul cod HTML este sintaxa general de afiare ntr-o pagina web a coninutului HTML aflat n alt pagin extern:

Avantajul utilizrii uneia din aceste 2 metode, pentru cei care fac site-uri doar cu HTML, este faptul ca acelai coninut HTML poate fi inclus in mai multe pagini din site, fiind scris o singura data. De exemplu, n cazul unui Meniu ce trebuie afiat n toate paginile site-ului; codul acestuia poate fi scris ntr-un fiier special ("meniu.html") apoi, cu una din formulele de mai sus (tag-ul "" sau "") se adaug in fiecare fiier al paginilor, iar la o eventual modificare a meniului se va face doar n codul acestuia din "meniu.html

Lecia 13 :: Stiluri CSS in HTML

Cu HTML 4.0 au aprut specificaiile pentru modele de stiluri, cunoscute ca Modele de Stiluri n Cascad (Cascading Style Sheets - CSS). Acestea ajut la afiarea grafic i ncadrarea coninutului n pagin. Pn la acea dat, forma, culoarea i mrimea textului puteau fi date cu instruciunea "font" i cu atributele sale: "face", "color", "size".

Modelele de stiluri pot fi aplicate aproape oricrei etichete HTML, folosind proprieti i valori specifice codului CSS, unele din ele sunt prezentate n tabelul de mai jos.Modelele de stiluri pot fi aplicate n mai multe moduri:

1. Intern - direct n eticheta HTMLPentru adugarea unui STYLE intern la un element se folosete atributul style urmat de proprieti i valori, folosind urmtoarea sintax:

Exemplu:Exemplu h4

n pagin va apare:

Exemplu h4

2. n antetul (header-ul) fiieruluin acest caz se adaug n seciunea HEAD a documentului HTML urmtoarea sintaxa ... . Aceasta spune browser-ului ca sunt adugate elemente de stil CSS.Aceast metod este util cnd se dorete folosirea acelorai stiluri pentru mai multe elemente din pagina astfel sunt scrise o singur dat i nu la fiecare element.Proprietile i valorile de stil CSS se introduc n acest element STYLE, dup cum putei vedea n exemplul urmtor:

titlu

Conform acestui cod, toate textele "h2" din pagina vor avea culoarea albastr i vor fi subliniate.Se folosete (opional) "" pentru browserele care nu recunosc elementul "" i astfel l ignor.

3. ExternAici proprietile i valorile pentru diverse stiluri sunt specificate ntr-un fiier extern special, de obicei cu extensia "css". Avantajul folosirii fiierelor externe CSS este faptul ca aceleai coduri de stil pot fi folosite de mai multe pagini din site, chiar tot site-ul, fiind scrise o singur dat. n plus ajuta la micorarea ca mrime (n bytes) a documentului HTML care astfel se ncarc mai repede.n fiierul extern CSS se scriu direct elementele cu proprietile i valorile dorite, NU se mai adaug eticheta "style".Exemplu de model pentru creare unui fiier ".css" :Se scrie ntr-o pagin nou, urmtoarele, i se salveaz fiierul cu extensia ".css"

a:link { color:#0000ff; text-decoration:none; font-weight:normal; font-size:15px; font-family: Arial; } a:visited { color:#008080; text-decoration:none; font-weight:normal; font-size: 15px; font-family: Arial; }

a:active { color:#b54090; text-decoration:underline; }

a:hover { color:#b54090; text-decoration:underline; font-weight:normal; font-size: 15px; font-family: Arial; } p { font-weight: normal; font-size: 11pt; line-height: 12pt; text-indent: 20px; font-family: Arial; }

Pentru a aduga acest stil CSS ntr-o pagin web, adugai in seciunea HEAD a documentului HTML care va folosi acel fiier cu stiluri, (ntre ... ) urmtoarea comand:

unde la "href" se scrie calea i numele fiierului css folosit.Se poate face chiar ca un anumit stil sa poat fi aplicat numai unei singure etichete HTML, iar altul sa poat fi aplicat mai multor etichete HTML de tipuri diferite. Pentru aceasta se folosete atributul id sau class n interiorul etichetelor HTML la care vrem sa aplicm un anumit stil.Diferena dintre id i class este faptul c se poate folosi acelai atribut "class" pentru mai multe elemente HTML, pe cnd acelai "id" se folosete numai pentru un singur element HTML.

Exemplu pentru "class":

Titlul Text ... Alt text ...

n exemplu de sus, stilul creat poate fi folosit doar de elementele unde vom aduga comanda class="cuvant", celelalte elemente nefiind afectate. Important: selectorul (aici "cuvant") n STYLE trebuie s nceap cu punct (.)

Exemplu pentru "id":

Titlul Text ... Alt text ...

n acest exemplu, stilul creat pentru "idh" va fi folosit doar pentru primul element "h2" care contine 'id="idh"' Important: Pentru stilurile definite de ID, selectorul (aici "idh") trebuie sa inceapa cu #.

ncercai singuri aceste exemple pentru a vedea rezultatul.

n tabelul de mai jos sunt cteva atribute (sau proprieti) care pot fi modificate cu STYLE

AtributDescriereValori

background imagini sau culori de fundal URL-ul (imaginii) sau culori date prin nume sau valoare RGB

Color culoarea textului nume sau valoare RGB

font-family tipul fontului Numele fontului sau al familiei de fonturi

font-size dimensiunea fontului data in puncte(pt), inch(in), centimetri(cm), pixeli(px)

font-style text cursiv normal, italic

font-weight grosimea fontului extra-light, light, demi-light, medium, demi-bold, bold, extra-bold

line-height distana dintre liniile de baza ale randurilor data n puncte(pt), inch(in), centimetri(cm), pixeli(px), procent(%)

margin-left distana fa de marginea din stnga a paginii data in puncte(pt), inch(in), centimetri(cm), pixeli(px)

margin-right distanta fa de marginea din dreapta a paginii data in puncte(pt), inch(in), centimetri(cm), pixeli(px)

margin-top distanta fata de textul precedent sau fa de marginea de sus a paginii data n puncte(pt), inch(in), centimetri(cm), pixeli(px)

text-align alinierea textului left(stnga), center(centru), right(dreapta), justify

text-decoration evidenierea textului none(nimic), underline(subliniat), italic(cursiv), line-through(taiat)

text-indent distana primului rnd fa de marginea din stnga data n puncte(pt), inch(in), centimetri(cm), pixeli(px)

border-style tipul chenarului none, groove, dotted, dashed, solid, double, ridge, inset, outset

border-width grosimea chenarului data n puncte(pt), inch(in), centimetri(cm), pixeli(px)

border-color culoarea chenarului nume sau valoare RGB

72 pt=1 inch = 25,4 mm; un font de dimensiunea 13pt inseamna ca sunt 13 puncte intre partea superioara a literei N sau h si partea inferioara a literei y sau j

Pentru aplicarea unui stil css asupra unei poriuni dintr-un text, se folosete eticheta , ca n exemplu urmtor:

O fraz cu orice text i caractere.

n acest exemplu se pot aplica elemente de stil css clasei (.cls) care vor afecta doar poriunea de text inclus ntre tag-ul "".

Pentru mai multe informaii despre lucru cu stiluri CSS, studiai leciile de la Cursul CSS.Lecia 14 :: DIV i SPANLecia 15 :: De la HTML la XHTMLLecia 16 :: XHTML - Tag-uri i atributele lorLecia 17 :: Tutorial HTML5Lecia 18 :: Tag-uri noi HTML5Lecia 19 :: HTML5 - Elemente i atribute noi n formularLecia 20 :: Tutorial HTM5 canvasLecia 21 :: Coduri culori pentru siteLecia 22 :: Caractere speciale Entiti HTML

Pg. | 31