Titluri

Titluri, Paragrafe, Un nou rnd, Linie orizontala
1. Titluri <Hx> ... </Hx>

- Pentru titluri din continutul documentului HTML este indicat folosirea etichetelor <Hx>, (headings)
unde 'x' este un numar intre 1 si 6.

- In cadrul elementului BODY, elementele Headings sunt folosite ca titluri sau pentru o mai buna
impartire a continutului paginii.

- Mrimea textului nconjurat de elementul Heading variaz de la foarte mare, in <H1> pana la foarte
mic in<H6>. Mai jos puteti vedea exemplu: Cod HTML <html> <head> <title>Titlu documentului</title> </head> <body> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> </body> </html> 2. Paragraf <p> ... </p>
- Paragrafele permit sa adaugi text in document astfel incat lungimea de afisare a textului va fi
Cum apare in pagina
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
ajustata de marimea deschiderii browser-ului si fiecare paragraf va incepe un nou rnd.

- Distanta dintre doua paragrafe succesive este mare deoarece browser-ul le afiseaza cu un rnd gol
intre ele. Mai jos puteti vedea exemplu: Cod HTML <html> <head> <title>Titlu documentului</title> </head> <body> <p>Paragraf 1</p> <p>Paragraf 2</p> <p>Paragraf 3</p> <p>Paragraf 4</p> </body> </html>
Cum apare in pagina
Paragraf 1 Paragraf 2 Paragraf 3 Paragraf 4
3. Un nou rand <br>

- Tag-ul <br> permite sa decizi unde textul va incepe un nou rnd, astfel se forteaza nceperea unui
nou rnd.
- <br> este un Element Gol dar poate sa conin atribut. <br> nu are si nu cere element de
nchidere, nu se foloseste </br> Mai jos puteti vedea exemplu: Cod HTML Cum apare in pagina <html> <head> <title>Titlu documentului</title> </head> <body> <h1>Heading 1</h1> Paragraf 1 <p>Paragraf 1<br> Linie 2 Linie 2<br> Linie 3 Linie 3<br> ... ... </p> <p>Paragraf 2</p> Paragraf 2 </body> </html> - Elementul <br> folosete un singur atribut CLEAR care poate avea valoarea LEFT, RIGHT sau ALL, si sunt folosite daca este o imagine pe pagina. Atributul CLEAR foreaz o linie in jos. Daca o imagine este aezata in partea stanga a paginii, valoarea LEFT va muta cursorul jos la prima linie din marginea tanga.
Heading 1
4. Linie orizontala <hr>

- Acest element afiseaza o linie orizontala in document - Acest element nu folosete element de nchidere *</hr>] - Elementul <hr> foloseste urmatoarele atribute: o - SIZE = latimea liniei, in pixeli (standard este 2) o - WIDTH = lungii liniei, in pixeli sau procente din lungimea afisarii paginii (standard o o o
100%) - NOSHADE = afiseaza linia fara a avea un aspect 3D - ALIGN = aliniaza linia (Left, Center, Right), adica Stanga, Centru sau Dreapta paginii ( Standard centru) - COLOR = seteaza culoarea liniei
Mai jos puteti vedea exemplu: Cod HTML <html> <head> <title>Titlu documentului</title> </head> <body> <h1>Heading 1</h1> <p>Paragraf 1<br> Cum apare in pagina
Heading 1
Paragraf 1 Linie 2 Linie 3
Linie 2<br> Linie 3<br> ... </p> <hr> <hr color="#1111fe" size="4" width="50%"> <p>Paragraf 2</p> </body> </html>
- Lectia 3
...
Paragraf 2
Creare si editare pagini ... <<-- Anterior ----------- Urmator -->> Formate text Formatul textului HTML contine mai multe elemente, tag-uri si atribute, pentru afisarea textului in mai multe formate cu aspecte grafice diferite. 1. Tag-ul <FONT> ... </FONT> Cu acest element, <FONT>, puteti modifica aspectul textului, cum sunt tipul fontului folosit, marimea si culoarea textului.
- Marimea textului poate fi modificata cu elementul FONT si atributul SIZE. Atributul SIZE poate lua valorile numerice de la 1 la 7 si pe langa acestea poate folosi, ca valoare relativa, semnele "+" sau "-". Textul normal (daca nu este specificat acest atribut) are valoarea 3.
Exemplu :
<font size="+2">Doua mrimi mai mare</font>
- Tipul fontului poate fi modificat cu elementul FONT si atributul FACE.
Exemplu :
<font face="Arial Black">Acesta este tipul de font Arial Black</font>
- Culoarea textului poate fi modificata cu elementul FONT si atributul COLOR.
Exemplu :
<font color="#00dd00">Acest text are culoarea verde</font> 2. Bold, Italic, Underline si alte elemente Elemente des folosite pentru formatul textului sunt:

- Bold (ingrosat) <b> ... </b> - Italic (inclinat) <i> ... </i>
- Underline (subliniat) <u> ... </u> Exemple: <b> Bold </b> <i> Italic </i> <u> Underline </u>
Alte elemente folosite pentru formatul textului sunt:
- <pre> Performated </pre> - Textul incadrat de elementul PRE este prezentat intr-un singur font, oricare ar fi atributul FACE. Spatiile mai lungi si liniile necesare sunt prezentate aa cum sunt scrise in NotePad, ne mai fiind nevoie de alte elemente adiionale, cum ar fi <br> pentru o noua linie si pentru mai mult spaiu intre cuvinte.
- <em> Accentuare (Emphasis) </em> - Browser-ul de obicei arata aces element ca italic
- <strong> Strong </strong> - Browser-ul de obicei arata aces element ca bold
- <tt> Teletype </tt> - Ca si PRE, browser-ul prezinta acesta intr-un singur tip de font, indiferent de fontul ales cu atributul FACE, in interiorul elementului FONT
- <cite> Citatie </cite> - Reprezinta o citatie din document.
Mai jos puteti vedea cteva exemple de coduri si modul lor de afisare in browser. <html> <head> <title>titlu documentului</title> </head> <body> <p><font size="+1">O singura marire</font>- normal <font size="-1">O singura micsorare</font><br> <b>Bold</b>- <i> Italic </i> - <u> Subliniat </u> <font color="#ff0000"> Colorat </font><br> <em>Accentut</em> - <strong> Strong </strong> <tt>Tele type</tt><br> <cite> Citatie </cite></p> </body> </html> - In browser va fi afisat asa: O singura marire- normal - O singura micsorare Bold- Italic - Subliniat - Colorat Accentut - Strong - Tele type Citatie 3. Alinierea Cteva elemente pot avea atributul (ALIGN) pentru aliniere, cum ar fi Titlurile <Hx> , Paragraful <p></p> si Linia orizontala <hr> . Cele trei valori ale atributului ALIGN sunt: LEFT, RIGHT si CENTER. Aliniamentul celor mai multe elemente se face cu ajutorul altor elemente:
- <div align="valoare"> ... </div> Poate conine cele mai multe elemente. Tot ce este poziionat cu elementul DIV poate fi aliniat oriunde-n pagina, indiferent daca in acel loc se afla si alt ceva (Imagine, Text, ).
- <center> ... </center> Va centra elementele
4. Alte etichete HTML pentru formatul textului - <strike> Text taiat </strike>

- <big> Prezinta textul intr-un font mare </big> - <small> Prezinta textul intr-un font mic </small>
- <sub> Afisaza textul in pozitia subscript </sub> - <sup> Aseaza textul in pozitia superscript </sup>
In continuare puteti vedea un exemplu cu aceste coduri de mai sus si felul cum sunt afisate de browser. <html> <head> <title>Titlu documentului</title> </head> <body> <p> <strike> Text taiat </strike><br> <big> Prezinta textul intr-un font mare </big><br> <small> Prezinta textul intr-un font mic </small><br> <sub> Aseaza textul in pozitia subscript </sub> normal <sup> Aseaza textul in pozitia superscript </sup><br> </p> </body> </html> - In browser va fi afisat asa: Text taiat Prezinta textul intr-un font mare Prezinta textul intr-un font mic Aseaza textul in pozitia superscript Aseaza textul in pozitia subscript normal - Urmatoarele elemente pentru format sunt folosite mai rar si sunt pentru documente cu aplicatii tehnice

- <dfn> Defineste exemplu de termen inchis </dfn>
- <code> Folosit pentru extragerea unui cod de program </code>
- <samp> Folosit pentru simple productii de programe, scripturi , etc. </samp> - <kbd> Folosit pentru text care va fi scris de utilizator </kbd> - <var> Folosit pentru variabile sau argumente de comenzi </var>
In continuare puteti vedea un exemplu cu aceste coduri de mai sus si felul cum sunt afisate de browser. <html> <head> <title>Titlu documentului</title> </head> <body> <p> <dfn> Definite exemplu de termen inchis </dfn><br> <code> Folosit pentru extragerea unui cod de program </code><br> <samp> Folosit pentru simple productii de programe, scripturi , etc. </samp><br> <kbd> Folosit pentru text care va fi scris de utilizator </kbd><br> <var> Folosit pentru variabile sau argumente de comenzi </var><br> </p>
</body> </html> - In browser va fi afisat asa: Definite exemplu de termen inchis Folosit pentru extragerea unui cod de program Folosit pentru simple productii de programe, scripturi , etc. Folosit pentru text care va fi scris de utilizator Folosit pentru variabile sau argumente de comenzi - Alte elemente pentru formatul textului:

- <q> ... </q> - Folosit pentru citate scurte.
- <blockquote> ... </blockquote> - Folosit pentru incadrarea de citate mai lungi, creaza spatiu pentru text. Pentru a crea mai mult spatiu puteti adauga de mai multe ori acest element. - <address> ... </address> - Cu acest element se specifica informatii cum ar fi autorul documentului si detalii pentru contact.
In continuare puteti vedea un exemplu cu aceste coduri de mai sus si felul cum sunt afisate de browser. <html> <head> <title>Titlu documentului</title> </head> <body> <p> <q>Daca vrei si crezi, orice este posibil.</q> <blockquote> Bucuriile neimpartasite pot aduce tristete iar suferinta impartasita poate sa aduca bucurie. <br> Aceasta este prima zi din restul vietii tale. </blockquote> <center> <address>180 Attwell Dr. Suite 130 <br> Toronto, ON <br> M9W 6A9</address> </center> </p> </body> </html> - In browser va fi afisat asa: Daca vrei si crezi, orice este posibil. Bucuriile neimpartasite pot aduce tristete iar suferinta impartasita poate sa aduca bucurie. Aceasta este prima zi din restul vietii tale. 180 Attwell Dr. Suite 130 Toronto, ON M9W 6A9 - Lectia 4 Titluri, Paragrafe, Un nou ... <<-- Anterior ----------- Urmator -->> Marcatori si numerotare
Curs realizat de MarPlo
Curs HTML
Index Lectii / Tutoriale

Introducere Elemente HTML
Creare pagini HTML
Titluri, Paragrafe, Rand, Linie Format text
Marcatori si numerotare
Adaugare Imagini

Link-uri Harti imagini
Tabele
Cadre / Frame Formulare
Elemente speciale

Siluri CSS DIV si SPAN XHTML
XHTML - Tag-uri si atribute

Tutorial HTML5 HTML5 - Tag-uri Noi
HTML5 - Elemente si attribute in formular

HTM5 canvas Lista cod culori Caractere speciale
Daca doriti sa oferiti o donatie
LOGIN Inregistrare
Cautare
Marcatori si numerotare
HTML contine cateva tag-uri utile pentru asezarea continutului in pagina. Prin acestea textul este mai usor de citit si evidentiat. 1. Elementele pentru marcatori si numerotare Un element des folosit in formarea listelor (neordonate) este <ul>.

- <ul> este elementul de nceput si dupa scrierea listei se incheie cu </ul>. - Majoritatea elementelor pentru marcatori si numerotare sunt compuse din unu sau mai multe elemente <li> ... </li> (list element). Fara atributul "type" specificat in "<ul>" acestea prezint un marcaj ca un bullet.
Mai jos puteti vedea exemplu. <html> <head> <title>titlu documentului</title> </head> <body> <ul> <li>List item 1 ...</li> <li>List item 2 ...</li> <li>List item 3 ...</li> </ul> </body> </html> - In pagina web apare asa:

List item 1 ... List item 2 ... List item 3 ...
- Sunt 3 tipuri de marcaje: disc, circle (cerc) si square (patrat) - Tipul de marcaj care se doreste folosit se introduce prin atributul type in eticheta <ul> - Exemplu: <html> <head> <title>titlu documentului</title> </head> <body>
<ul type="square"> <li>List item 1 ...</li> <li>List item 2 ...</li> <li>List item 3 ...</li> </ul> </body> </html> - In pagina web apare asa:

List item 1 ... List item 2 ... List item 3 ...
Un alt element folosit pentru formarea listelor (ordonate) este <ol>.

- <ol> ... </ol> este un element de numerotare. Elementele din lista sunt numerotate automat. - Impreuna cu <ol> se foloseste <li> ... </li>
Iata un exemplu: <html> <head> <title>titlu documentului</title> </head> <body> <ol> <li>List item 1 ...</li> <li>List item 2 ...</li> <li>List item 3 ...</li> </ol> </body> </html> - In pagina web apare asa: 1. List item 1 ... 2. List item 2 ... 3. List item 3 ... Sunt mai multe tipuri de numerotare care pot fi folosite. Acestea sunt controlate de atributul "type care este adaugat in elementul <ol>, le puteti vetea mai jos:

- type="1" - stil: 1, 2, 3, ... - type="a" - stil: a, b, c, ... - type="i" - stil: i, ii, iii, ... - type="I" - stil: I, II, III, ...
De asemenea se poate specifica numarul de inceput al numerotarii printr-o valoare data atributului start. Exemplu:
<html> <head> <title>titlu documentului</title> </head> <body> <ol type="a"> <li>List item 1 ...</li> <li>List item 2 ...</li> <li>List item 3 ...</li> </ol> - Alta lista: <ol type="I" start="3"> <li>List item 1 ...</li> <li>List item 2 ...</li> <li>List item 3 ...</li> </ol> </body> </html> - In pagina web apare asa: a. List item 1 ... b. List item 2 ... c. List item 3 ... - Alta lista: III. IV. V. List item 1 ... List item 2 ... List item 3 ...
2. Alte elemente pentru asezarea textului in pagina Alte elemente pentru asezarea textului sunt: tag-ul <dl>, care cuprinde in el elementele <dt> si <dd>

- <dl> ... </dl> este folosit (impreuna cu "dt" si "dd") pentru definirea si incadrarea unei liste de definitii. - <dt> ... </dt> Defineste elementul din lista. Fiecare tip de astfel de element trebuie precedad de unul sau mai multe elemente <dd> ... </dd>, folosite pentru descrierea elementului definit.
Aceste elemente ajuta pentru a da un aspect ordonat si placut textului si a putea face o separare mai buna a continutului. In urmatorul exemplu puteti vedea cum se folosesc aceste elemente : <html> <head> <title>titlu documentului</title> </head> <body> <dl>
<dt>HTML</dt> <dd> - Hyper Text Markup Language</dd> <dd> - Limbaj pentru pagini web</dd> <dt>Dog</dt> <dd>dog = caine</dd> <dd>animal de casa</dd> </dl> </body> </html> - In pagina web apare asa: HTML - Hyper Text Markup Language - Limbaj pentru pagini web Dog dog = caine animal de casa Pentru o eficienta mai buna se pot combina elementele de marcaj si numerotare, introducand elementele <ul> si <ol>imbricate (unele in celelalte) impreuna cu elementele <li> Exemplu: <html> <head> <title>titlu documentului</title> </head> <body> <ul type="square"> <li> List item 1 ... </li> <li> List item 2 ... <ol type="a" start="3"> <li> Alt List item ... </li> <li> Alt List item ... </li> </ol></li> <li> List item 5 ... </li> </ul> </body> </html> - Observati ca tot ce contine "<ol> ... </ol>" este adaugat in cadrul unui "<li> </li>" - In pagina web apare asa:

- Lectia 5
List item 1 ... List item 2 ... c. Alt List item ... d. Alt List item ... List item 5 ...
Formate text <<-- Anterior ----------- Urmator -->> Adaugare imagini

Tutoriale de MarPlo
Curs HTML
Index Lectii / Tutoriale

Introducere Elemente HTML Creare pagini HTML Titluri, Paragrafe, Rand, Linie Format text Marcatori si numerotare Adaugare Imagini Link-uri Harti imagini Tabele Cadre / Frame Formulare Elemente speciale Siluri CSS DIV si SPAN XHTML
XHTML - Tag-uri si atribute Tutorial HTML5 HTML5 - Tag-uri Noi HTML5 - Elemente si attribute in formular HTM5 canvas Lista cod culori Caractere speciale
Daca doriti sa oferiti o donatie
LOGIN Inregistrare
Cautare
Adaugare Imagini
HTML contine si elemente pentru adaugarea de imagini in pagina web. 1. Formatul imaginilor care pot fi folosite Cele mai folosite formate pentru imaginile adaugate intr-o pagina HTML sun GIF si JPEG (JPG ; JPE), avantajul acestora este ca imaginile care au aceste extensii au o marime mica (in bytes), avand maximum 256 de culori. Alte tipuri de formate (folosite mai rar) sunt:
PNG, BMP, TIFF, PCX
2. Adaugarea unei imagini intr -o pagina web Pentru a introduce o imagine intr-un format HTML se folosete elementul <img> ... </img> mpreuna cu urmatoarele atribute :
- src - Valoarea acestui atribut determina locatia fisierului care contine imaginea. - alt - La acest atribut se scrie textul care va aparea daca imaginea nu e afisata (de unele browsere)
sau cand utilizatorul va pozitiona, in browser, mouse-ul peste imagine.

- align - Acest atribut permite asezarea imagini in locuri diferite pe pagina. Pot fi folosite
urmatoarele optiuni: o Bottom , Middle , Top , Left , Right , TextTop , ABSMiddle , Baseline , ABSBottom - width - Valoarea acestui atribut reprezinta lungimea imaginii, in pixeli. Daca nu este scris imaginea va fi prezentata cu lungimea originala. - height - Valoarea acestui atribut reprezinta inaltimea (latimea) imaginii, in pixeli. Daca nu este scris imaginea va fi prezentata cu inaltimea originala. - border - Prin adaugarea acestui atribut imaginea va aparea nconjurata de un chenar, valoarea acestui atribut reprezinta grosimea chenarului, in pixeli. - hspace - Acest atribut este pentru spatiu orizontal pe ambele parti ale imaginii, specificat in pixeli. De exemplu o valoare de 5 va pune un spatiu invizibil, de 5 pixel, in prtile orizontale ale imaginii. - vspace - Acest atribut este pentru spatiu vertical pe ambele parti ale imaginii, specificat in pixeli. De exemplu o valoare de 5 va pune un spatiu invizibil, de 5 pixel, in prtile verticale ale imaginii. In exemplu de mai jos puteti vedea modul de introducere a unei imagini pe o pagina web si cum pot fi folosite atributele : <html> <head> <title>titlu documentului</title> </head> <body> <img src="imagine.jpg" alt="puteti adauga orice text" align="top" width="100" height="120" border="4" hspace="10" vspace="7"></img> </body> </html> - In pagina web va aparea:
Incercati singuri mai multe exemple, folosind si alte atribute si valori prezentate mai sus.
Crearea de link-uri
Link-urile (links) sunt elemente HTML cu ajutorul carora putem deschide alte pagini, sari de la un document la altul sau la alt site. Sunt foarte importante in crearea de pagini web. Forma generala pentru crearea unui link este urmatoarea:
<a href="url" title="Titlu link">Nume</a>
- a este elementul specific pentru crearea link-urilor - href este atributul care marcheaza indicarea adresei link-ului - url este adresa link-ului (a paginii care va fi deschisa). De exemplu (http://www.marplo.net) - title este atributul prin care se da un titlu link-ului (un text ascuns, care apare numai cand este pozitionat mouse-ul deasupra link-ului) - Titlu link este textul ascuns care apare cand este pozitionat mouse-ul deasupra link-ului - Nume este textul care va aparea in browser si pe care trebuie dat click cu mouse-ul. In loc de acest text se poate folosi si o imagine, astfel "Nume" va fi inlocuit cu <img src="nume_imagine.extensie"> Cand documentul este alcatuit din mai multe cadre se foloseste si atributul target, vezi Lectia 10 Culoarea link-urilor poate fi schimbata de urmtoarele atribute, care trebuie scrise in interiorul elementului <BODY>
link="#0000ff - reprezinta culoarea link-ului in browser. vlink="#00ffff - reprezinta culoarea link-ului cnd pagina respectiva a fost / este vizitata. alink="#ff0000 - reprezinta culoarea link-ului cnd acesta este activat. Exemplu:
<body bgcolor="#00ffff" link="#000000" vlink="#ff0000" alink="#00ff00">
Link-urile sunt de doua feluri: 1. Link-uri externe - (sunt cele mai utilizate), care sunt si ele de doua feluri: a) Link-uri externe ctre pagini ale aceluiasi site. Pentru acestea URL-ul poate sa nu includa si domeniul site-ului, cum ar fi "http://www.nume.com", ci se poate folosi doar cale in directoare, numele si extensia documentului la care se face saltul. De exemplu:
- daca documentul tinta se afla in acelasi director cu fisierul in care se scrie link-ul, codul va fi scris
asa:
o
<a href="nume_fisier.extensie" title="Titlu link">Nume</a>
- daca documentul tinta se afla intr-un director anterior celui in care se afla fisierul in care se scrie
link-ul, codul va fi scris asa: o <a href="../nume_fisier.extensie" title="Titlu link">Nume</a>

- daca documentul tinta se afla intr-un director din cel care se afla fisierul in care se scrie link-ul,
codul va fi scris asa: o <a href="director/nume_fisier.extensie" title="Titlu link">Nume</a> b) Link-uri externe ctre alte site-uri. Aici, adresa URL din link trebuie sa contina si domeniul (numele siteului) paginii tinta, codul HTML se va scrie, de exemplu, asa:
<a href="http://nume_site/pagina" title="Titlu link">Nume</a>
2. Link-uri interne - sunt link-uri ctre alte texte din aceeasi pagina. Se folosesc cnd pagina respectiva este lunga si e nevoie sa se sara spre anumite texte din pagina. - Pentru creare de link-uri interne trebuie urmati urmatorii pasi:
1. Se scrie urmatorul cod la textul tinta, care marcheaza locatia unde se va face saltul si se afla in
aceeasi pagina cu linkul o <a name="cuvant">Textul tinta</a> o - atributul "name" indica tinta pentru link, e un fel de semn care indica locatia. o - "cuvant" poate fi orice cuvnt, trebuie sa fie unic pentru fiecare link. o - "Textul tinta" este textul unde se face saltul. 2. In locul unde vrem sa fie link-ul (acolo unde o sa dam click pentru a face saltul ctre textul ales), se scrie urmatorul cod: o <a href="#cuvant">Nume</a> o - aici "cuvant" este acelasi text scris la pasul 1.
Link-urile interne si externe pot fi combinate. Astfel putem face saltul ctre un anumit text aflat intr-o alta pagina. In pagina respectiva se scrie codul de la pasul 1, la textul ales pentru tinta link-ului, iar in pagina in care va fi link-ul se scrie:
<a href="adresa_pagina#cuvant">Nume</a>
Harti de imagini
Hartile de imagini sunt parti din aceeasi imagine care este "impartita" in mai multe zone, apoi in functie de zona pe care se executa click, browserul poate afisea o alta pagina. De exemplu, pe un site dedicat turismului am putea avea pe pagina principala o imagine care reprezinta harta tarii (in care definim zonele dupa conturul judetelor); in cazul unui click pe zona Brasov se incarca o
pagina care descrie diverse obiective turistice din judetul Brasov, iar un click pe o alta zona de judet ar duce la alta pagina care descrie obiectivele turistice din acel judet. O harta de imagini ar putea fi folosita si pentru navigarea in cadrul unui site: daca avem mai multe butoane de navigare grupate, se poate folosi o imagine care reprezinta toate acele butoane - mai multe imagini se incarca mai incet decat o imagine cu dimensiunea egala cu suma celorlalte (in kb) deoarece comunicarea cu serverul (cand se cere imaginea) se face o singura data. Pana aici am prezentat numai avantaje; dezavantajul major este ca un vizitator care are browserul setat sa nu incarce imagini pentru a naviga mai repede nu va vedea imaginea si nu va intelege mai nimic (putem totusi folosi marcajul "alt" de specificare a textului alternativ pentru imagini). Totusi acest lucru este foarte rar. Crearea hartii de imagini Pentru formarea unei harti de imagini, se adauga in interiorul tag-ului "<img>" atributul "usemap" a carui valoare reprezinta numele hartii, apoi se incepe formarea hartii prin elementul:
<map name="nume_harta"> </map>
- unde pt. "nume_harta" a atributului "name" se foloseste acelasi cuvant adaugat la "usemap" - in cadrul acestuia se adauga elemente
<area atribute>
- acestea definesc zonele hartii imaginii si forma acestora (prin valorile atributelor), - numarul de elemente "AREA" reprezinta numarul de suprafete (cu link-uri specifice) in care este "impartita" imaginea. In urmatorul exemplu puteti vedea forma generala a creari unei "harti de imagini" (cu 2 cadre), URL poate fi orice adresa de site sau pagina a site-ului curent:
<img src="poza.jpg" usemap="#map1">
<map name="map1"> <area shape="rect" coords="9, 120, 56, 149" href="url"> <area shape="rect" coords="100, 200, 156, 249" href="url"> </map>
In tabelul de mai jos puteti vedea atributele care se folosesc si descrierea acestora: Instructiune Atribute ismap <img atribute > Descriere marcaj de includere a imaginilor specifica faptul ca este o harta de imagine pe server (se foloseste mai rar; de obicei folosim harti de imagine la client)
usemap="nume_harta" specifica harta de imagine la client lowscr = "url" imaginea de rezolutie scazuta care se incarca prima (doar pentru Netscape) specifica regiunile unei harti de imagine la client numele hartii de imagine (corespunzator atributului USEMAP al
<map atribute > < / map > name = "nume_harta"
marcajului <IMG>) shape = "forma" defineste o regiune a unei harti de imagine forma regiunii: rect sau rectangle (dreptunghi), circle sau circ (cerc), point (punct), poly sau polygon (poligon)
coordonatele unei regiuni (in pixeli); se calculeaza in functie de coltul din stanga sus al imaginii (care are coordonatele (0, 0), adica x = 0, y = 0); variaza in functie de SHAPE = forma regiunii: - pentru rect (dreptunghi) se dau coordonatele celor 4 colturi sau coords = "coordonate" a celor din stg. sus si dr. jos ale regiunii <area atribute > - 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 incarca pagina specificata prin URL textul asociat regiunii specificate din cadrul imaginii; apare plasand mouse-ul deasupra regiunii respective sau celor cu browserul setat sa nu incarce imagini
alt = "text"
Iata un exemplu practic, avem imaginea de mai jos. In aceasta imagine avem trei zone distincte: dreptunghi, cerc si romb (poligon); pe care, prin codurile HTML de creare a hartii de imagini, le-am definit sa fie tratate ca zone diferite, separate, si cand dam click pe ele, fiecare deschide cate o pagina diferita (sugerata de numele din zona respectiva).
- Observati ca mouse-ul isi schimba forma numai cand este deasupra zonelor care au fost definite ca sa fie suprafete a hartii de imagini. Aceasta definire nu este facuta prin desen, ci prin coordonatele folosite in atributul "coords", coordonate care au fost alese pentru a se potrivi cu desenul. Reperul cel mai important este lungimea in pixeli din coltul stanga-sus pana in punctele care formeaza zona dorita. Codul HTML pentru acest exemplu este urmatorul (studiati cu atentie atributele folosite si coordonatele scrise; revizuiti si tabelul de mai sus):
<div align="center"> <img src="image_map.gif" alt="Harta de imagini" border="0" width="300" height="300" usemap="#map1"> <map name="map1"> <area href="dir/contact.php" alt="Date de contact" title="Date de contact" shape="rect" coords="6,116,97,184"> <area href="curs.html" alt="Curs HTML" title="Curs HTML" shape="circle" coords="251,143,47"> <area href="../index.html" alt="Pagina principala" title="Pagina principala" shape="poly" coords="150,217, 190,257, 150,297,110,257"> </map> </div>
Lucru cu tabele
Tabelele sunt elemente foarte utile pentru asezarea si prezentarea continutului intr-o pagina web. 1. Crearea de tabele Pentru a crea tabele in paginile web se foloseste elementul <table> ... </table> , acesta incadreaza alte patru sub-elemente, care alcatuiesc structura tabelului.
- Linia (randul) Tabelului <tr> ... </tr> - Titlul Tabelului <th> ... </th> - Coloanele tabelului (datele) <td> ... </td> - Sub-titlu tabelului <caption> ... </caption>
Linia tabelului de obicei contine elementul pentru titlurile tabelului si elementul pentru coloanele tabelului. In cadrul elementelor pentru titluri si coloanele tabelului se pot adauga si alte elemente HTML, cum ar fi cele pentru formatul textului, paragrafe, link-uri sau imagini Mai jos puteti vedea un exemplu de cod HTML pentru crearea unui tabel: <table border="1"> <tr> <th>titlu 1</th> <th>titlu 2</th> </tr> <tr> <td>linia 2- coloana 1</td> <td>linia 2- coloana 2</td> </tr> <tr> <td>linia 3- coloana 1</td> <td>linia 3- coloana 2</td> </tr> <tr> <td>linia 4- coloana 1</td> <td>linia 4- coloana 2</td>
</tr> </table> - In pagina web apare asa:
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
2. Atributele Tabelului
- bgcolor = defineste culoarea tabelului - width = specifica lungimea tabelului (In pixeli sau procente din lungimea paginii) - border = grosimea liniei (in pixeli) ce defineste tabelul si nconjoara fiecare celula - cellspacing = spatiu dintre celule (in pixeli) - cellpadding = spatiu dintre linia celulei si continutul acesteia (in pixeli) - align = controleaz poziionarea tabelului in pagina, cu urmtoarele atribute : left,
right, sau center - background = controleaza culoarea de fond a tabelului, care poate fi si o imagine - bordercolor = culoarea liniei din jurul tabelului - bordercolorlight = culoarea luminoasa folosita de doua linii din cele patru care nconjoara tabelul - bordercolordark = culoarea ntunecata folosita de doua linii din cele patru care nconjoara tabelul
Sub-titlu tabelului - Sub-titlu tabelului "caption" permite specificarea unei linii de text care va aparea deasupra sau sub tabel, acest lucru este definit de atributul "align" care poate lua valorile: top (deasupra) bottom (jos) Exemplu: <table border="1" cellpadding="2"> <caption align="bottom">acesta este textul</caption> <tr> <th>titlu 1</th> <th>titlu 2</th> </tr> <tr> <td>linia 2- coloana 1</td> <td>linia 2- coloana 2</td> </tr> </table> - In pagina web apare asa:
titlu 1
titlu 2
linia 2- coloana 1 linia 2- coloana 2 acesta este textul

3. Atributele specifice elementelor pentru titlu si coloane
- colspan = specifica cat de multe coloane ale tabelului aceasta celula va inlocui
- rowspan = specifica cat de multe randuri ale tabelului aceasta celula va inlocui - align = alinierea datelor celulei pe orizontala (left, right sau center) - valign = alinierea datelor celulei pe verticala (top, middle sau bottom) - background = controleaza culoarea de fond a celulei, care poate fi si o imagine - bgcolor = defineste culoarea celulei (dar nu imagine) - width = specifica lungimea celulei (In pixeli sau procente din lungimea paginii) - height = specifica inaltimea celulei (In pixeli sau procente din inaltimea paginii)
in urmatorul exemplu puteti vedea rezultatul folosirii atributelor: "colspan" "rowspan" si "bgcolor" <table border="1" cellpadding="2"> <caption align="bottom">acesta este textul</caption> <tr> <th>titlu 1</th> <th>titlu 2</th> </tr> <tr> <td colspan="2">linia 2- coloana 1</td> </tr> <tr> <td rowspan="2">linia 3- coloana 1</td> <td>linia 3- coloana 2</td> </tr> <tr> <td bgcolor="#adadff">linia 4- coloana 2 - colorat</td> </tr> </table> - In pagina web apare asa:
titlu 1 linia 2- coloana 1 linia 3- coloana 1
titlu 2 linia 3- coloana 2 linia 4- coloana 2 - colorat
acesta este textul

Exersati singuri si alte exemple de tabele, cu mai multe randuri si coloane.
Utilizarea cadrelor
Cadrele, sau frame-uri, sunt folosite pentru impartirea ferestrei browser-ului astfel incat sa fie afisate mai multe pagini in aceeasi fereastra de browser. Un frame (cadru) este o parte din suprafata ferestrei browserului. Fiecare frame prezinta n interior un document propriu (in general un document HTML). De exemplu puteti creea doua cadre intr-o fereastra, in primul cadru puteti incarca un document HTML (ex. doc1.htm) iar in al doilea cadru un alt document HTML, de la alta adresa (ex. doc2.htm) Dupa cum puteti vedea in imaginea de mai jos.
Pentru crearea de frame-uri se pot folosi urmatoarele etichete HTML:

<frameset> si <frame> sau <iframe>
1. Configurarea cadrelor Pentru inceput se adauga un element <FRAMESET> ... </FRAMESET> in interiorul documentului HTML, n sectiunea HEAD. <FRAMESET> determina cat din spaiul ferestrei este atribuit fiecrui cadru, folosind atributele ROWS sau COLS care impart ecranul in Linii sau Coloane. Acesta va conine elemente <FRAME>, cate unul pentru fiecare divizare a ferestrei din browser. ROWS
Determina numarul de linii si marimea cadrelor care vor fi asezate in linie, ncepnd de sus. Pot fi folosite urmatoarele valori: o - pixeli absoluti ; ex : "360,120"
- procente din inaltimea ecranului ; ex : "75%,25%" - valori proportionale, folosind (*). Acesta putnd fi combinat cu procente sau pixeli. Ex : "120,*" sau "30%,*"
COLS
Determina numarul de coloane si marimea cadrelor care vor fi asezate pe coloane, ncepnd din
stanga. Pot fi folosite urmatoarele valori: o - pixeli absoluti ; ex : "380,120" - procente din lungimea ecranului ; ex : "33%,77%" - valori proportionale, folosind (*). Acesta putnd fi combinat cu procente sau pixeli. Ex : "120,*" sau "30%,*"
Alte atribute ale elementului <FRAMESET>

FRAMEBORDER - Stabileste afisarea sau nu a unei borduri in jurul cadrelor. Posibile valori: 0, 1 sau
YES, NO.
FRAMESPACING - Acest atribut este specificat in pixeli. Daca FRAMEBORDER este 0 atunci si acesta
trebuie sa aiba valoarea 0
BORDER - Marginea cadrelor. Valori posibile: 0 sau 1 BORDERCOLOR - Acest atribut permite sa alegi culoarea bordurii.
Elementul <FRAME>
Acest element defineste un singur cadru , este scris in interiorul elementului <FRAMESET> Pentru fiecare cadru trebuie scris cate un element <FRAME> Acesta are urmatoarele atribute: o SRC - Aici trebuie scrisa adresa si numele paginii folosite pentru cadru o NAME - Aici trebuie scris numele de identificare al cadrului. o MARGINWIDTH - Atribut optional, valoare in pixeli. Determina spatiul orizontal dintre o o
continutul cadrului si marginea acestuia MARGINHEIGHT - Atribut optional, valoare in pixeli. Determina spatiul vertical dintre continutul cadrului si marginea acestuia. SCROLLING - Afiseaza un Scroll Bar in cadru. Valori posibile: YES (permite afisarea Scroll Bar-ului), NO (nu va fi prezentat nici un Scroll Bar) si AUTO (browser-ul va decide daca este nevoie de Scroll Bar. Aceasta valoare este cea mai indicata) NORESIZE - Optional, impiedica utilizatorul sa modifice marimea cadrului, prin selectarea marginii acestuia si mutarea in stnga sau dreapta ori sus sau jos.
Mai jos puteti vedea cum poate fi creata o pagina HTML care sa contina doua cadre, cel din stnga ocupnd 23% din spatiul paginii iar cel din dreapta 77% <HTML> <HEAD> <TITLE> TITLU PAGINII </TITLE> </HEAD> <FRAMESET COLS="23%,77%"> <FRAME SRC="doc1.htm" NAME="left" SROLLING="NO"> <FRAME SRC="doc2.htm" NAME="right" SROLLING="YES"> </FRAMESET> <BODY> </BODY> </HTML> De asemenea se poate crea un design de cadre cu o combinatie de linii si coloane. In acest caz, un al doilea element "<FRAMESET>" va fi scris in locul elementului "<FRAME>" care descrie a doua linie. Al doilea element <FRAMESET> va divide spatiul ramas in doua coloane. Pentru aceasta, al doilea element "<FRAMESET>" trebuie urmat de inca doua elemente "<FRAME>" - Pentru o mai buna intelegere puteti studia exemplu de mai jos, care creaza o pagina ce contine trei cadre: <HTML> <HEAD> <TITLE> TITLU PAGINII </TITLE> </HEAD> <FRAMESET COLS="120,*"> <FRAME SRC="baner.htm"> <FRAMESET COLS="120,*"> <FRAME SRC="Meniu.htm" NAME="meniu"> <FRAME SRC="Continut.htm" NAME="date">
</FRAMESET> </FRAMESET> <BODY> </BODY> </HTML> 2. Atributul target Cand sunt create link-uri care sunt folosite pentru a deschide pagini in cadre, este nevoie de specificarea unui atribut in eticheta de link "<a>" numit target, acesta spune browser-ului in ce cadru sa deschida pagina. Atributul target foloseste ca valoare textul din atributul NAME al elementului FRAME in care se va deschide noua pagina. De exemplu, daca avem un link in Meniu.htm care vrem sa deschid pagina Doc3.htm in spaiul in care se afla celalat cadru, de exemplu Continut.htm; codul HTML pentru link va arata astfel in Meniu.htm:
<a href="Doc3.htm" target="numele cadrului Continut.htm"> Numele link-ului </a>
- daca nu se specifica atributul TARGET , pagina se va deschide in cadrul curent - atributul TARGET trebuie sa aiba acelasi nume specificat in codul HTML, ca si atributul NAME din FRAME-ul in care se doreste afisarea paginii. Special Target:
Sunt 4 nume speciale de TARGET, care nu pot fi asociate cu atributul NAME. Fiecare are o functie
speciala.
target="_top" o - acesta va ncarca link-ul in toata fereastra browser-ului, disparnd astfel cadrele. target="_blank" o - acesta va ncarca link-ul intr-o noua fereastra de browser, astfel ramanand deschisa si
vechea fereastra.
target="_self" o - acesta va ncarca link-ul in aceeasi fereastra de unde a fost actionat. target="_parent" o - cadrul "_parent" este cadrul anterior de la care a fost deschis noul cadru, daca acesta
nu exista atunci link-ul se va deschide in actuala fereastra de browser. 3. Adaugarea cadrelor iframe Pentru crearea unui cadru cu "<iframe>" puteti folosi, ca exemplu, urmatoarea sintaxa (aceasta se adauca in sectiunea BODY, in locul unde doriti sa apara frame-ul):
<iframe src="url_pagina" width="600" height="200" align="center" scrolling="yes"
frameborder="0" name="nume_frame"> </iframe> - Unde "iframe" este elementul principal care indica adaugarea unui frame in pagina. - "url_pagina" e adresa paginii care va fi incarcata in iframe, "width" si "height" reprezinta lungimea respectiv inaltimea cadrului (exprimata in procente sau pixeli), "scrolling" reprezinta permisiunea de derulare a paginii din cadru (yes sauno), "frameborder" specifica daca va fi sau nu afisata o margine (bordura) pentru cadru
(1=da, 0=nu), iar "nume_frame" este numele cadrului (necesar pentru atributul "TARGET" in link-uri sau cand frame-ul este folosit de JavaScript).
5 Crearea formularelor
De cele mai multe ori formularele HTML sunt create pentru a fi folosite impreuna cu alte programe si scripturi web, cum sunt PHP, JavaScript si altele. 1. Tag-ul FORM Pentru a crea un formular in HTTML se folosete elementul <form> ... </form>, in cadrul acestuia se vor adauga celelalte elemente specifice. Elementul <form> ... </form> nu contine atribute pentru format, foloseste insa urmatoarele atribute:
action - aici se scrie adresa URL a unui script de pe server (de obicei PHP sau CGI), program care
trebuie sa accepte datele din FORM , le proceseaza si trimite napoi raspunsul la browser.
method - aici putem scrie get , sau post. Aceste valori specifica ce metoda HTTP va fi folosita pentru
a trimite continutul formularului la server.

enctye - determina mecanismul folosit pentru a codifica continutul transmis din formular. name - Este numele formularului, folosit de scripturi VB (Visula Basic) sau JavaSript. target - Este tinta cadrului (frame) unde pagina va fi vizualizata, dupa transmiterea datelor din form.
2. Elementele de formular In continuare sunt prezentate restul elementelor de formular care sunt folosite pentru a crea diferite campuri, casete, butoane in pagina web, necesare pentru a aduna datele care vor fi trimise la aplicatie pe server. Cele mai multe se creaza prin atributul type al elementului <input> ... </input> Proprietatile elementului <input> ... </input>
type - tipul de FORM folosit (caseta text, buton si altele ...) name - numele elementului respectiv de formular, folosit de scripturile la care sunt trimise datele value - datele (valoarea) asociate acelui element de formular si care sunt trimise, impreuna cu
numele, catre scripturi (PHP, CGI, JavaScript) size - specifica numarul de caractere care dau lungimea zonei de text maxlength - numarul maxim de caractere acceptate checked - specifica daca un buton sau alta forma va fi initial selectata (bifata). readonly - folosit pentru campuri de tip text, impedica modificarea valorii (textului) din acel camp disabled - impedica folosirea campului care are aceasta 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 in pagina un camp pentru text (cu o singura linie). - Codul este <input type="text"></input>
In browser va apare:
- Acest element foloseste urmatoarele atribute: o type - text o name - numele casutei de text, folosit de scriptul la care sunt trimise datele o value - va reprezenta propriul context ca valoare aleasa. Un sir de text care apare in o o
casuta de text size - specifica numarul de caractere care dau lungimea casutei de text (default 20) maxlength - numarul maxim de caractere acceptate sa fie adaugate de utilizator
Camp textarea
- "textarea" este un element ce creaza un camp in pagina, in care utilizatorul poate adauga mai
multe linii de text.

- Codul este <textarea></textarea>
- Acest element foloseste urmatoarele atribute: o name - numele campului de text, folosit de scriptul la care sunt trimise datele o rows - numarul de linii a zonei de text o cols - numarul de coloane a zonei de text o wrap - standard este OFF. Dar poate avea valorile : "VIRTUAL" sau "PHYSICAL", astfel ca
textul wraps in browser sa fie prezentat exact cum este scris de utilizator.
Casete pentru parole

- "password" este folosit pentru a permite adaugarea de parole. Caracterele adaugate in aceasta
caseta nu sunt afisate cu valoarea lor reala, pentru a nu se vedea parola scrisa.
- Codul este <input type="password"></input>
- Acest element foloseste urmatoarele atribute: o type - password o name - numele casutei pentru parole, folosit de scriptul la care sunt trimise datele
o o o
value - de obicei nu este adaugat. Daca este scris, va reprezenta parola default din acea caseta. size - specifica numarul de caractere care dau lungimea casutei pt. adaugarea parolei (default 20) maxlength - numarul maxim de caractere acceptate sa fie adaugate de utilizator
Casete de formular ascunse

- "hidden" este folosit pentru a adauga in formular date care sa nu fie vizibile in browser si care sunt
trimise la scripturi impreuna cu celelalte date din formular.

- Codul este <input type="hidden"></input> - Acest element foloseste urmatoarele atribute: o type - hidden o name - numele casutei ascunse, folosit de scriptul la care sunt trimise datele o value - valoarea care se doreste sa fie transmisa prin acea caseta ascunsa.
Check box
- este folosit pentru adaugarea mai multor optiuni pe care utilizatorul le poate alege (oricate din ele)
prin bifarea lor - Codul este <input type="checkbox"></input> In browser va apare:

- Acest element foloseste urmatoarele atribute: o type - checkbox o name - numele casutei checkbox, folosit de scriptul la care sunt trimise datele o value - valoarea casetei checkbox respective, care poate fi selectata (bifata) o checked - daca este adaugat acest atribut, caseta checkbox respectiva este selectata
(bifata).
Radio button
- este folosit pentru adaugarea mai multor optiuni dintre care utilizatorul poate alege una singura - Codul este <input type="radio"></input>
- Acest element foloseste urmatoarele atribute: o type - radio o name - numele casutei radio, folosit de scriptul la care sunt trimise datele o value - valoarea casetei radio respective, care poate fi selectata (bifata) o checked - daca este adaugat acest atribut, caseta radio respectiva este selectata
(bifata).
Casete pentru upload

- "file upload" este folosit pentru a permite utilizatorului sa incarce alte documente pe serverul web.
Aceasta caseta este insotita 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 <input type="file"></input> In browser va apare:
- Acest element foloseste urmatoarele atribute: o type - file o name - numele casutei upload, folosit de scriptul la care sunt trimise datele o size - specifica numarul de caractere care dau lungimea casutei upload.
Buton simplu
- acesta este folosit cu JavaScript sau VBScript pentru a efectua o actiune cnd este apasat - Codul este <input type="button" value="Buton"></input>
- Acest element foloseste urmatoarele atribute: o type - button o name - numele butonului, necesar pentru a fi folosit de script o value - textul care apare pe buton.
Buton Submit
- acest element face ca prin apasarea lui browser-ul sa trimita numele si valoarea tuturor celorlalte
elemente din formular la scriptul de pe server

- Codul este <input type="submit" value="Trimite"></input>
Trimite
- Acest element foloseste urmatoarele atribute: o type - submit o name - numele butonului, poate fi folosit de scriptul la care se trimit datele o value - textul care apare pe buton.
Imagine pentru buton Submit

- permite aplicarea unei imagine in locul butonului Submit standard - Codul este <input type="image" src="locatie_imagine"></input> - Acest element foloseste urmatoarele atribute:
o o o
type - image name - numele butonului, poate fi folosit de scriptul la care se trimit datele src - locatia imaginii folosite.
Buton Reset
- permite utilizatorului sa stearga toate datele pe care le-a scris in celelalte elemente din formular - Codul este <input type="reset" value="Sterge"></input>
Sterge
- Acest element foloseste urmatoarele atribute: o type - reset o value - textul care apare pe buton.
Elemente select
- pentru acest element se foloseste tag-ul "<select></select>", care formeaza o lista, un meniu, cu
date ce pot fi selectate.

- Atributete elementului "<select>" sunt: o name - numele acestui element, necesar pentru a fi folosit de scriptul la care sunt
trimise datele o size - seteaza inaltimea elementului Select, care reprezinta si numarul de optiuni din lista care vor fi vizibile initial o multiple - prezenta acestui atribut specifica faptul ca utilizatorul poate selecta mai multe optiuni. - "<select></select>" este folosit impreuna cu elemente "<option> </option>" care reprezinta lista elementelor ce sunt adaugate si afisate in lista de selectare. - <option> </option> foloseste doua atribute: o selected - cand acesta este adaugat, optiunea respectiva este selectata cnd pagina web este initial incarcat. Cand sunt adaugate mai multe optiuni, este indicat folosirea acestui atribut doar cu una singura. o value - specifica valoarea variabilei numita in optiunea respectiva (necesara pt. scriptul care va primi datele). - sunt doua tipuri de elemente Select, unde diferenta o face folosirea atributului SIZE - Cele doua tipuri de elemente Select sunt:
1. Drop Down List (Lista de derulare) o - Codul este: <select name="select"> <option>Optiune 1</option> <option>Optiune 2</option> </select> o - unde "name" este atributul care defineste numele acestui tag SELECT, iar "<option>" impreuna cu "Optiune 1" (si 2) reprezinta elementele din lista de selectare. In browser va apare:
2. List Box o
- Codul este: <select name="select" size="4"> <option>Optiune 1</option> <option>Optiune 2</option> </select> - unde "name" este atributul care defineste numele acestui tag SELECT, atributul "size" determina inaltimea elementului select care determina si numarul de optiuni vizibile initial, iar "<option>" impreuna cu "Optiune 1" (si 2) reprezinta elementele din lista de selectare.
Optiune 1 Optiune 2
- Toate aceste elemente trebuie incadrate in tag-ul "<form> ... </form>"!
Elemente speciale meta, embed, marquee, object

Codul HTML contine si anumite elemente speciale, unele folosite pentru optimizarea paginii in vederea unei cat mai bune indexari in motoarele de cautare sau altele pentru adaugarea de aplicatii audio si video ori alte elemente in pagina. 1. Elemente pentru optimizarea indexarii paginii Aceste elemente de optimizare se adauga in sectiunea HEAD a documentului HTML. Cel mai important este tag-ul <title></title> Alte elemente importante pentru motoarele de cautare sunt cele META, (numite si "meta tag-uri), acestea au 2 atribute: name (care determina tipul meta tag-ului) si content (care determina continutul meta tagului). In continuare sunt prezentate exemple de meta tag-uri care sunt indicate sa fie adaugate in fiecare pagina HTML: <meta content="text/html; charset=UTF-8" http-equiv=Content-Type>
- indica browserului ca este un fisier HTML - charset stabileste tipul de caractere (in general se foloseste ISO-8859-1 sau UTF-8), dar exista si
altele.
<meta name="description" content="O fraza care descrie pe scurt continutul paginii">

- in cazul unei cautari dupa cuvinte-cheie, motorul de cautare ne da o lista de pagini; pentru fiecare
pagina (site) din lista apare titlul ei (dat cu marcajul TITLE) urmat de o fraza (cea de la name="description" content="o fraza care descrie ..."); daca nu avem in marcajul META acea fraza, motorul va indexa dupa prima fraza din pagina; tot ea va fi data la o eventuala cautare.
- textul adaugat cu acest tag pentru descriere are prioritate inaintea frazelor din continut. (folositi
maxim 40, 50 caractere).
<meta name="keywords" content="lista, de cuvinte, separate, prin, virgula">

- motoarele de cautare tin cont de cuvintele din meta "keywords" in momentul indexarii site-ului
pentru atunci cand sunt afisate rezultate de cautari. (folositi maxim 15-20 cuvinte).
<meta name="author" content="numele dvs., e-mail, etc">

- acesta nu este neaparat necesar, dar nu strica sa-l folositi. Arata autorul documentului.
Recomandare: Cuvintele din tag-ul <title> ... </title> este bine sa se regaseasca si in meta tag-urile "keywords", "description" cat si in titlurile din continutul paginii. Un alt meta tag care este cateodata necesar, dar nu are legatura cu motoarele de cautare, este "Refresh", acesta are urmatoarea forma: <meta http-equiv="Refresh" content="4;url=http://www.nume_site/pagina">
- acesta determina browser-ul sa incarce o noua pagina, cea care este adaugata la url-ul din acest tag
(aicihttp://www.nume_site/pagina), dupa un anumit numar de secunde (aici 4). Practic, face un redirect. 2. Adaugarea de sunet la o pagina HTML Pentru a adauga sunet intr-o pagina web, puteti folosi elementele <embed> sau <bgsound>: 1. <bgsound></bgsound> - introduce un background (fundal) audio in pagina, are urmatoarele atribute:
src - Defineste locatia fisierului audio folosit (midi .au sau wav) loop - defineste de cate ori se va repeta sunetul delay - defineste timpul dintre repetari title - Textul care va descrie sunetul.
Exemplu: <bgsound src="sunet.midi" loop="3" title="titlul melodiei" derlay="5"> 2. <embed></embed> - afiseaza o consola pentru sunet, are urmatoarele atribute:
src - Defineste locatia fisierului audio folosit (midi .au sau wav) controls - ofera posibilitatea alegerii mai multor controale care includ: console, console mici,
butoane de play si altele

autostart - cand este TRUE sunetul incepe in timp ce sunetul este descarcat de browser hidden - cand este TRUE va ascunde controalele, standard este FALSE loop - defineste de cate ori se va repeta sunetul volume - seteaza volumul sunetului (sonorul) height - inaltimea in pixeli a consolei
width - lungimea in pixeli a consolei.
Exemplu: <embed src="sunet.midi" width="145"height="60" autostart="truie" volume"100" controls="console" hidden="false"> - Tag-ul "<embed>" poate fi folosit si pentru afisarea de imagini video, care au extensiile ".movs", ".mpeg" sau ".avi", recomandat este ".movs". Se adauga similar ca si sunetul, la "src" scriti calea catre fisierul video. Diferenta e ca nu trebuie folosit atributul "hidden" iar pentru "width" si "height" dimensiunile nu trebuie sa fie mai mici decat dimensiunile in care este salvat fisierul video. - Totusi, afisarea de imagini video necesita mai mult timp deoarece fisierele video au dimensiuni destul de mari. -- "<embed>" se foloseste si pentru adaugarea de imagini flash (cu extensia ".swf"), pentru aceasta este incadrat in alt element, <object> </object> -- Iata un exemplu de cod prin care puteti adauga imagini flash in pagina web: <object width="580" height="400"> <param name="movie" value="fisier.swf"> <embed src="fisier.swf" width="580" height="400"> </embed> </object> Unde "width" si "height" sunt dimensiunile cadrului in care este afisata imaginea flash, iar la atributele "value" si "src" se scrie calea catre fisierul ".swf" (trebuie scrisa aceeasi cale la ambele atribute). - Afisarea in pagina a elementelor cu EMBED necesita folosirea unui plug-in, care de cele mai multe ori, daca acesta nu este deja instalat, este ceruta automat incarcarea lui de catre browser. 3. Elemente de animatie text HTML are un tag special, <marquee> </marquee>, prin care puteti crea un efect de miscare a unui text (sau imagine) care este incadrat de a cest element. Are urmatoarele atribute:
loop - defineste de cate ori se va misca textul height - inaltimea in pixeli a zonei in care se misca textul width - lungimea in pixeli a zonei in care se misca textul bgcolor - culoarea zonei in care se misca textul direction - directia de miscare (left, right, up, down) - (stanga, dreapta, sus, jos) behavior - defineste cum se va misca textul (scroll, slide, alternate) scrolldelay - seteaza numarul, in milisecunde, intre refreshuri de miscare.
Exemplu de miscare pe orizontala <marquee behavior="alternate" bgcolor="#00ffff" direction="right">Marquee text</marquee> In pagina va arata asa:
Iata un alt exemplu unde miscarea se face pe verticala: <marquee behavior="alternate" bgcolor="#00ffff" direction="up" width="100" height="100">Marquee text</marquee>
In pagina va arata asa:
- In loc de text poate fi folosit si o imagine, inlocuind textul (aici "Marquee text") cu tagul "<img> pentru imagine. 4. Includerea unei pagini HTML externe In afara de modalitatea cu folosirea tag-ului <iframe> pentru afisarea in pagina web HTML a continutului din alta pagina HTML Ex.: <iframe src="url_pagina.html" width="600" height="200" align="center" scrolling="yes"> </iframe> - exista si o alta solutie, data de tag-ul <object> folosit cu atributele "data" si "type". Urmatorul cod HTML este sintaxa generala de afisare intr-o pagina web a continutului HTML aflat in alta pagina externa: <object data="adresa_pagina_externa" type ="text/html" width="600" height="400"> </object> - Avantajul utilizarii uneia din aceste 2 metode, pentru cei care fac site-uri doar cu HTML, este faptul ca acelasi continut HTML poate fi inclus in mai multe pagini din site, fiind scris o singura data. De exemplu, in cazul unui Meniu ce trebuie afisat in toate paginile site-ului; codul acestuia poate fi scris intr-un fisier special ("meniu.html") apoi, cu una din formulele de mai sus (tag-ul "<iframe>" sau "<object>") se adauga in fiecare fisier al paginilor, iar la o eventuala modificare a meniului se va face doar in codul acestuia din "meniu.html".
Stiluri CSS in HTML

Cu HTML 4.0 au aparut specificatiile pentru modele de stiluri, cunoscute ca Modele de Stiluri in Cascada (Cascading Style Sheets - CSS). Acestea ajuta la afisarea grafica si incadrarea continutului in pagina. Pana la acea data, forma, culoarea si marimea textului puteau fi date cu instructiunea "font" si cu atributele sale: "face", "color", "size". Modelele de stiluri pot fi aplicate aproape oricarei etichete HTML, folosind proprietati si valori specifice codului CSS, unele din ele sunt prezentate in tabelul de jos al paginii. Modelele de stiluri pot fi aplicate in mai multe moduri: 1. Intern - direct in eticheta HTML
- Pentru adaugarea unui STYLE intern la un element se foloseste atributul style urmat de proprietati
si valori, folosind urmatoarea sintaxa: o <element style="proprietate:valoare; proprietate:valoare;"></element> - Exemplu: <h4 style="color:#ff1111;">Exemplu h4</h4>
In pagina va apare
Exemplu h4 2. In antetul (header-ul) fisierului
- In acest caz se adauga in sectiunea HEAD a documentului HTML urmatoarea sintaxa <style
type="text/css"> ... </style>. Aceasta spune browser-ului ca sunt adaugate elemente de stil CSS.
- Aceasta metoda este utila cand se doreste folosirea acelorasi stiluri pentru mai multe elemente din
pagina astfel sunt scrise o singura data si nu la fiecare element.

- Proprietatile si valorile de sti CSS se introdul in acest element STYLE, dupa cum puteti vedea in
exemplul urmator: <html> <head> <title>titlu</title> <style type="text/css"> <!-h2 {color:blue; text-decoration:underline;} --> </style> </head> <body> </body> </html>
- Conform acestui cod, toate textele "h2" din pagina vor avea culoarea albastra si vor fi subliniate. - Se foloseste (optional) "" pentru browserele care nu recunosc elementul "<style>" si astfel
il ignora.
3. Extern
- Aici proprietatile si valorile pentru diverse stiluri sunt specificate intr-un fisier extern special, de
obicei cu extensia "css" (pe care il putem construi cu un editor de simplu texte gen Notepad).
- Avantajul folosirii fisierelor externe CSS este faptul ca aceleasi coduri de stil pot fi folosite de mai
multe pagini din site, chiar tot site-ul, fiind scrise o singura data. In plus ajuta la micsorarea ca marime (in bytes) a documentului HTML care astfel se incarca mai repede. - In fisierul extern CSS se scriu direct elementele cu proprietatile si valorile dorite, NU se mai adauga eticheta "style". Exemplu de model pentru creare unui fisier ".css" : Se scrie intr-o pagina noua, deschisa cu NotePad, urmatoarele, si se salveaza fisierul 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 adauga acest stil CSS intr-o pagina web, adaugati in sectiunea HEAD a documentului HTML
care va folosi acel fisier cu stiluri, (intre <head> ... </head>) urmatoarea comanda: o <link href="fisier.css" rel="stylesheet" type="text/css"> - unde la "href" se scrie calea si numele fisierului css folosit.
Se poate face chiar ca un anumit stil sa poata fi aplicat numai unei singure etichete HTML, iar altul sa poata fi aplicat mai multor etichete HTML de tipuri diferite. Pentru aceasta se foloseste atributul id sau class in interiorul etichetelor HTML la care vrem sa aplicam un anumit stil. Diferenta dintre id si class este faptul ca se poate folosi acelasi atribut "class" pentru mai multe elemente HTML, pe cand acelasi "id" se foloseste numai pentru un singur element HTML. Exemplu pentru "class" <html> <head> <title>Titlul</title> <style type="text/css"> <!-.cuvant { color:#1111fe; dext-decoration:underline; } --> </style> </head>
<body> <h2 class="cuvant">Text ...</h2> <h3 class="cuvant">Alt text ... </h3> </body> </html> - In exemplu de sus, stilul creat poate fi folosit doar de elementele unde vom adauga comanda class="cuvant", celelalte elemente nefiind afectate.
Important: selectorul (aici "cuvant") in STYLE trebuie sa inceapa cu punct (.)
Exemplu pentru "id" <html> <head> <title>Titlul</title> <style type="text/css"> <!-#idh { color:#fe1111; dext-decoration:overline; text-align:center; } --> </style> </head> <body> <h2 id="idh">Text ...</h2> <h2>Alt text ... </h2> </body> </html> - In 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 #.
Incercati singuri aceste exemple pentru a vedea rezultatul. In tabelul de mai jos sunt cateva atribute (sau proprietati) care pot fi modificate cu STYLE Atribut background Color font-family font-size font-style Descriere imagini sau culori de fundal culoarea textului tipul fontului dimensiunea fontului text cursiv Valori URL-ul (imaginii) sau culori date prin nume sau valoare RGB nume sau valoare RGB Numele fontului sau al familiei de fonturi data in puncte(pt), inch(in), centimetri(cm), pixeli(px) normal, italic
font-weight line-height margin-left margin-right margin-top text-align textdecoration text-indent border-style
grosimea fontului distanta dintre liniile de baza ale randurilor distanta fata de marginea din stanga a paginii distanta fata de marginea din dreapta a paginii distanta fata de textul precedent sau fata de marginea de sus a paginii alinierea textului evidentierea textului distanta primului rand fata de marginea din stanga tipul chenarului
extra-light, light, demi-light, medium, demibold, bold, extra-bold data in puncte(pt), inch(in), centimetri(cm), pixeli(px), procent(%) data in puncte(pt), inch(in), centimetri(cm), pixeli(px) data in puncte(pt), inch(in), centimetri(cm), pixeli(px) data in puncte(pt), inch(in), centimetri(cm), pixeli(px) left(stanga), center(centru), right(dreapta), justify none(nimic), underline(subliniat), italic(cursiv), line-through(taiat) data in puncte(pt), inch(in), centimetri(cm), pixeli(px) none, groove, dotted, dashed, solid, double, ridge, inset, outset data in puncte(pt), inch(in), centimetri(cm), pixeli(px) nume sau valoare RGB
border-width grosimea chenarului border-color culoarea chenarului
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 portiuni dintr-un text, se foloseste eticheta <span> </span>, ca in exemplu urmator: O fraza <span class="cls"> cu orice text</span> si caractere. - in acest exemplu se pot aplica elemente de stil css clasei (.cls) care vor afecta doar portiunea de text inclusa intre tag-ul "<span>".
Pentru mai multe informatii despre lucru cu stiluri CSS, studiati lectiile de la Curs CSS.
DIV si SPAN
Tag-urile <div></div> si <span></span> nu au efecte importante daca sunt folosite singure. - Tag-ul DIV creaza sectiuni de blocuri in pagina, al caror forma si grafica de continut pot fi manipulate pentru fiecare separat. Are doar un singur atribut HTML, align (pt. aliniere pe orizontala) care poate avea urmatoarele valori: left(stanga), right (dreapta), center (centru), justify (distanta textului fata de margini egala).
- Tag-ul SPAN creaza posibilitatea modificarii separate a unei portiunii dintr-un context, putand fi folosit si ca o "classa" cu CSS. Singur nu are nici un efect vizual poropriu si nu foloseste nici un atribut HTML special. Chiar daca folosite singure, DIV si SPAN nu au nici un efect major, in combinatie cu CSS pot crea aspecte grafice importante. Pentru aceasta, ambele pot folosi atributul style (cu proprietati CSS) ori atributele id sau class ca identificator pentru stiluri CSS. 1. Tag-ul DIV Tag-ul <div></div> este unul din cele mai folosite elemente HTML, aceasta deoarece in combinatie cu proprietati CSS poate crea efecte grafice deosebite, iar in interiorul lui pot fi incluse oricare elemente HTML: tabele, formulare, marcatori, linii sau alte DIV-uri. Cadrul in care acestea sunt adaugate poate avea propriul fundal (background), lungime, inaltime si margini cu diferite linii. Iata un exemplu in care avem 2 div-uri, unul contine un formular iar celalalt o lista "<ul></ul>", fiecare DIV cu proria culoare de fundal, dimensiuni stabilite si margini diferite. <div style="width:250px; background:#aaee88; border:1px solid blue;"> <form action="" method="post"> Nume: <input type="text"></input><br> E-mail:<input type="text"></input><br> <input type="submit" value="Trimite"></input> </form> </div> Alt DIV <div style="width:180px; background:#88aafe; border:5px outset #888888;"> <ul> <li>Linie 1</li> <li>Linie 2</li> <li>Linie 3</li> </ul> </div> - In atributul "style" sunt specificate proprietatile CSS care stabilesc aspectul grafic al fiecarui DIV (lungime in pixeli, fundal si bordura). Acest cod va afisa intr-o pagina web urmatorul rezultat: Nume: E-mail:
Trimite
Alt DIV

Linie 1 Linie 2 Linie 3
Un alt aspect important este si faptul ca putem pozitiona continutul din interiorul tag-ului <div> </div> oriunde in pagina, folosind proprietati CSS precum:
position - care poate lua valorile: static, relative, fixed sau absolute (pt. mai multe detalii
vezi Pozitionare CSS).

margin - care stabileste distanta dintre marginea cadrului sectiunii (blocul) DIV si elementele din
jurul lui (pt. mai multe detalii vezi Margini si chenare CSS).
Iata un exemplu in care, prin folosirea mai multor DIV-uri pozitionate suprapus, putem afisa in pagina un titlu cu aspect grafic deosebit. Codul este urmatorul: <div style="position:relative; font-size:21px;"> <div style="position:absolute; margin-top:-1; margin-left:-2; color:white;">Titlu - Exemplu</div> <div style="position:absolute; margin-top:1; margin-left:2; color:black;">Titlu - Exemplu</div> <div style="position:absolute; margin-top:0; margin-left:0; color:silver;">Titlu - Exemplu</div> </div> In acest exemplu avem un prim DIV cu atributul "style" in care avem o proprietate de pozitionare relativa (pt. a pozitiona toate celelalte elemente pe care el le incadreaza dupa contextul scris anterior) si o alta proprietate pentru marimea textului. In interiorul acestui DIV avem alte 3 div-uri, pozitionate absolut si care incadreaza fiecare cate un text identic. Prin pozitionarea absoluta div-urile se suprapun, la o distanta stabilita de proprietatile "margin-top" si "margin-left", iar prin culoare diferita (cu proprietatea "color") data textului din fiecare "div" va apare in pagina web urmatorul rezultat:
- Pentru a folosi tag-urile DIV eficient si cu rezultate deosebite este necesar sa cunoasteti proprietatile CSS de baza (pentru fonturi, pozitionare, margini, borduri, background) pe care le puteti invata la Cursul CSS din acest site. 2. Tag-ul SPAN Cu tag-ul <span></span> puteti adauga stiluri grafice unei anumite portiuni dintr-un context. Pentru aceasta trebuie folosit impreuna cu proprietati CSS care pot fi adaugate printr-un atribut "style" in interiorul etichetei "<span>" (sau in foi de stil). Pentru a intelege mai bine, iata un exemplu in care se scoate in evidenta anumite cuvinte dintr-un text. Pentru aceasta incadram cuvintele respective intr-un tag SPAN caruia ii adaugam proprietatile dorite, ca in exemplul urmator. Aceasta este o lectie din <span style="background:#88fe88; font-weight:bold;">Cursul HTML</span> de pe MarPlo.net. - Am adaugat portiunea din context (aici textul "Curs HTML") intr-un tag SPAN pentru a-i putea aplica proprietatile grafice dorite si care nu afecteaza restul continutului. - Astfel, prin proprietatile adaugate in "style" (background:#88fe88; si font-weight:bold;), in pagina web va fi afisat textul in felul urmator: Aceasta este o lectie din Cursul HTML de pe MarPlo.net. Tag-ul SPAN poate fi folosit si ca o classa pentru CSS. Astfel, proprietatile adaugate elementului "span" intr-o foaie de stil vor fi transferate tuturor elementelor din pagina care sunt incadrate in tag-uri "<span></span>". Iata un exemplu <html> <head> <title>Titlul</title> <style type="text/css"> span {
border:2px solid red; padding:1px; color:#1111fe; } </style> </head> <body> <h4>Exemplu de <span>text cu eticheta SPAN</span> in interiorul frazei.</h4> <ul> <li>Linia 1</li> <li><span> Linie 2, in span </span></li> <li>Linia 3</li> <li><span> Linie 4, in span </span></li> <li>Linia 5</li> </ul> </body> </html> - Observati cum a fost adaugat elementul "span" in tag-ul "<style> </style>" din sectiunea HEAD a codului HTML. Acest element face referire la toate tag-urile "<span></span>" din document si le transmite aceleasi proprietati. - Acest cod va afisa intr-o pagina web urmatorul rezultat: Exemplu de text cu eticheta SPAN in interiorul frazei.

Linia 1 Linie 2, in span Linia 3 Linie 4, in span Linia 5
3. Diferenta dintre DIV si SPAN - Diferenta dintre DIV si SPAN este faptul ca DIV incadreaza o sectiune din document sub forma unui bloc iar SPAN incadreaza o portiune din context sub forma de linii. Iata un exemplu din care se poate intelege mai bine, atribuim aceeasi proprietate grafica (bordura rosie) unui tag DIV si unui tag SPAN.' <div style="border:1px solid #fe1111;"> Fraza pe mai multe linii, <br> continua cu linia a doua, <br> se termina cu linia a treia. </div> <br> - Acum cu SPAN:<br><br> <span style="border:1px solid #fe1111;"> Fraza pe mai multe linii, <br> continua cu linia a doua, <br> se termina cu linia a treia. </span> - In pagina web va apare
Fraza pe mai multe linii, continua cu linia a doua, se termina cu linia a treia. - Acum cu SPAN: Fraza pe mai multe linii, continua cu linia a doua, se termina cu linia a treia. - Observati diferenta, modul in care este afisata bordura. Pentru DIV aceasta incadreaza exteriorul sectiunii (blocul) div-ului, iar pentru SPAN bordura este afisata pe fiecare linie. - De aceea este indicata folosirea tag-ului "<span></span>" pentru continut din interiorul unei linii.
- Cand aveti mai multe elemente <div></div> si <span></span> in pagina, este indicat folosirea atributului "id" sau "class". Acestora le acordati proprietati CSS o singura data in sectiunea HEAD sau intr-un fisier CSS extern. Este mai eficient decat sa scrieti in fiecare "<div>" si "<span>" cate un atribut "style". Pentru mai multe detalii despre "ID" si "CLASS" folosite cu CSS, puteti studia prima lectie de la Cursul CSS, Scriere cod CSS.
De la HTML la XHTML
Explicatiile din acest tutorial sunt pentru cei care cunosc deja limbajul HTML, prezentat detaliat in lectiile si tutorialele precedente din acest curs. XHTML (eXtensible HyperText Markup Language) are acelasi rol si capacitati ca HTML, fiind o varianta avansata a acestuia, dar cu o sintaxa putin diferita, mai stricta. XHTML este un inlocuitor modern al HTML-ului, o combinatie intre HTML si XML, fiind aproape identic cu HTML 4.01. Principala diferenta ce trebuie avuta in vedere la XHTML fata de HTML este la sintaxa acestuia. Daca stiti deja limbajul HTML, respectand regulile de sintaxa XHTML, prezentate mai jos, se poate spune ca stiti si XHTML. Reguli de sintaxa XHTML 1. - Pentru ca un document XHTML sa fie considerat valid, acesta trebuie sa aibe la inceput (prima linie) o declaratie!DOCTYPE, un DTD (Document Type Definitions) ce contine regulile standard ale elementelor din pagina. Sunt 3 tipuri de DTD ce pot fi folosite: Strict, Transitional si Frameset. Iata cod-ul specifc fiecaruia, ce trebuie sccris in prima linie din pagina:
Strict - folosit pentru o sinntaxa stricta, fara vreun element ce nu e specific XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd";>
Transitional - este tipul cel mai comun si indicat. Acesta permite in pagina si elemente HTML ce nu
sunt stricte XHTML. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Frameset - mai putin folosit, acest tip e pentru cazuri cand in pagina se folosesc frame-uri.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd";> Dupa una din aceste declaratii se adauga codul pentru structura documentului XHTML, cum se vede in urmatorul exemplu (structura standard ce trebuie sa o aibe o pagina de site XHTML): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ro"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Titlul paginii</title> <meta name="description" content="Descrierea paginii" /> <meta name="keywords" content="cuvinte, principale, din, pagina" /> </head> <body> Continutul paginii, care apare in fereastra navigatorului web. </body> </html> 2. - Toate elementele si atributele trebuie scrise cu litera mica.
Corect: <div> Incorect: <DIV> Corect: <tag atribut="valoare">
Incorect: <tag Atribut="valoare">
3. - Valorile tuturor atributelor trebuie scrise intre ghilimele.

Corect: <tag width="80"> Incorect: <tag width=80>
4. - Spre deosebire de HTML, in care elementele sunt inchise cu un al doilea tag (identic) de inchidere, iar unele nici nu trebuie sa aibe inchidere, in XHTML toate elementele trebuie inchise si exista tag-uri specifice care au inchidere singulara, in acelasi tag. In XHTML In HTML <meta ... /> <meta ...> <br /> <br> <hr /> <hr>
<input /> <input> <img ... /> <img ...> - Celelalte, precum <p> </p>, <div> </div>, <span> </span>, ... etc. sunt la fel. 5. - La inchiderea tag-urilor trebuie sa se respecte ordinea simetrica de deschidere.
Corect: <b>Ceva <i>altceva</i></b> Incorect: <b>Ceva <i>altceva</b></i>
6. - Toate atributele trebuie sa fie insotite de o valoare. In HTML fiind atribute, precum "checked", care sunt scrise fara vreo valoare. Iata cateva din cele mai folosite: In XHTML In HTML checked="checked" checked declare="declare" declare readonly="readonly" disabled="disabled" selected="selected" nowrap="nowrap" noresize="noresize" 7. - Atributul name din tag-urile <a> si <map> a fost inlocuit cu id. readonly disabled selected nowrap noresize
XHTML - Tag-uri si atributele lor

In aceasta pagina gasiti o lista, clasificata pe grupe de elemente cu tag-urile XHTML si atributele ce po fi folosite pentru fiecare TAG. Aceasta lista poate fi de folos mai ales cand doriti sa creati pagini web valide XHTML (Transitional), oferind o referinta la ce atribute pot fi folosite cu un anume TAG. - Structura <html> </html> - Tag-ul radacina, ce contine toate celelalte tag-uri si indica browser-ului ca acesta este inceputul /sfarsitul documentului (X)HTML.

xmlns dir lang xml:lang
<head> </head> - Contine meta informatii (meta-tags), tag-ul "<title> </title>" si alte tag-uri pt. scripturi si stiluri CSS. Toate acestea, cu exceptia Titlului, nu sunt afisate de navigatorul web.

xml:lang profile
<body> </body> - In acest tag se adauga continutul ce va fi afisat in pagina web. Acest continut poate fi alcatuit si din alte tag-uri, prezentate in continuare.

class id style title onmousedown onmouseover onkeypress onkeyup onmouseup onload
- Tag-uri ce pot fi incluse in zona <head> <title> </title> - Contine Titlul ce va fi afisat in bara de sus a browser-ului.
xml:lang
<meta /> - Adauga meta informatii despre document, precum: descriere, cuvinte cheie, autor, si altele.

name content http-equiv xml:lang scheme
<link /> - Este folosit in tag-ul <head> pentru a face legatura cu (sau a include) o resursa externa, in general CSS (Cascading Style Sheet).

class id style title href xml:lang hreflang charset type rel rev media
<style> </style> - Este folosit pentru a defini proprietati de stil CSS pentru elementele din pagina.

type media dir title
lang xml:lang
- Text <span> </span> - O sectiune in document, fara linie noua la inceput si sfarsit. Singur nu face nimic, de aceea este adesea folosit cu un "id" sau "class" pentru ca sa-i fie aplicate proprietati CSS.

class id style title xml:lang
<div> </div> - O sectiune in document, un cadru cu linie noua inainte si dupa el. Singur nu face nimic, de aceea este adesea folosit cu un "id" sau "class" pentru ca sa-i fie aplicate proprietati CSS.

<p> </p> - Un paragraf cu o linie noua in plus inainte si dupa el.

<h1> </h1>, <h2> </h2>, <h3> </h3>, <h4> </h4>, <h5> </h5> si <h6> </h6> - Folosit in general pentru titluri si sub-titluri in pagina web. Textul apare ingrosat si mare pt. "<h1>", descrescand treptat pana la "<h6>".

<br /> - Adauga o linie noua dupa el.

class id style title
<blockquote> </blockquote> - Acest Tag poate fi folosit pentru citate /fraze lungi. Cadrul definit de acesta lasa un anumit spatiu in exterior (stanga si dreapta).
class id style title xml:lang cite
<q> </q> - In acest tag se adauga de obicei fraze scurte, citate, ce vor fi afisate intre ghilimele.

class id style title xml:lang cite
<code> </code> - Poate fi folosit pentru a prezenta coduri de program, textul fiind afisat distinct pt. acest tip.

<u> </u> - Afiseaza textul subliniat.

<i> </i> - Afiseaza textul inclinat.

<b> </b> - Afiseaza textul ingrosat.

<strong> </strong> - Afiseaza textul ingrosat (similar cu <b>).
<em> </em> - Afiseaza textul inclinat (similar cu <i>).

<sup> </sup> - Afiseaza textul in partea de sus a liniei randului, si mai mic.

<sub> </sub> - Afiseaza textul in partea de jos a liniei randului, si mai mic.

<a> </a> - Creaza o legatura catre alta pagina web sau zona din pagina curenta (link intern).

class id style title xml:lang accesskey charset type href hreflang onblur rev rel shape coords tabindex onfocus
onclick
- Liste <ol> </ol> - Tag folosit pentru afisarea unei liste ordonate, numerotate.

<ul> </ul> - Tag utilizat pentru afisarea unei liste neordonate numeric, ci cu simboluri gen: disc, cerc, patrat.

<li> </li> - Defineste un element in liste <ol> sau <ul>, fiind adaugat in cadrul acestora.

<dl> </dl> - Creaza o lista de definitii. Trebuie sa contina tag-urile <dt> si <dd>.

<dt> </dt> - Defineste un termen pentru lista de definitii.

<dd> </dd> - Se adauga in cadrul tag-ului <dt> si prezinta lista de definitii pentru termenul definit de acel tag.

class id style
title xml:lang
- Obiecte <object> </object> - Folosit pentru a include in pagina elemente multimedia.

class id style title xml:lang usemap name height width classid codebase data type codetype standby tabindex archive
<param /> - Este adaugat in cadrul tag-ului <object> si e folosit pentru a trimite parametri la obiectul respectiv, inclus in pagina XHTML.

value type valuetype id name
- Tabele <table> </table> - Defineste un tabel in care pot fi adaugate randuri, coloane, titluri, celule de tabel.

class id style title xml:lang border align summary width dellpadding cellspacing frame rules
<thead> </thead> - Defineste zona de Header (Antet) a tabelului, unde se pot include linii si coloane.

class id style title xml:lang char charoff align valign
<tfoot> </tfoot> - Defineste zona de subsol a tabelului, unde se pot include linii si coloane.

<tbody> </tbody> - Defineste corpul tabelului, unde se pot include linii si coloane.

<tr> </tr> - Creaza o linie noua in tabel, in care se includ coloane.

<th> </th> - Se foloseste pt. celule cu titlu pentru coloane. Afiseaza un scris mai ingrosat.
class id style title xml:lang axis abbr headers rowspan colspan scope char charoff align valign
<td> </td> - Se foloseste pt. a crea coloane si celule in randurile tabelului. Trebuie adaugat in cadrul tag-ului <tr>.

class id style title xml:lang axis abbr headers rowspan colspan scope char charoff align valign
<caption> </caption> - Defineste un titlu pentru tabel. Acest tag trebuie adaugat imediat dupa eticheta <table> si poate fi adaugat doar unul singur.

- Formular <form> </form> - Incepe crearea unui formular in care pot fi incluse diferite casute si butoane.

class id
style title xml:lang action enctype method onsubmit onreset accept accept-charset
<label /> - Defineste o eticheta ce va corespunde unei casute de formular a carui "id" e adaugat in atributul "for". Cand se da click pe textul din eticheta sa, comuta controlul la acea casuta de formular.

class id style title xml:lang for accesskey onfocus onblur
<input /> - Adauga o casuta in formular, specificata la atributul "type".

class id style title xml:lang name value checked disabled readonly size maxlenght src alt usemap tabindex accesskey accept onfocus onblur onselect onchange
<select> </select> - Creaza o lista de selectare optiuni. Aceste optiuni sunt adaugate cu tag-ul <option>.

class id style title xml:lang name disabled multiple size tabindex onfocus onblur onchange
<option> </option> - Adauga lista cu optiuni in tag-ul <select>.

class id style title xml:lang disabled selected label value
<textarea> </textarea> - Creaza un camp pentru adaugare de text.

class id style title xml:lang name disabled rows cols readonly tabindex accesskey onfocus onblur onchange onselect
- Alte tag-uri <img /> - Include o imagine in documentul XHTML.
class id style title src alt height width xml:lang longdesc usemap ismap
<script> </script> - Folosit pentru a adauga un script in document, de obicei JavaScript.

type src defer charset xml:lang
<noscript> </noscript> - Afiseaza textul din el daca browserul nu stie sa lucreze cu un anumit script.

Tutorial HTML5
Noile caracteristici adaugate in HTML5 sunt bazate pe HTML, CSS, DOM, si JavaScript; si reduc necesitatea plugin-urilor externe (precum Flash). Despre sintaxa HTML5 Sintaxa HTML5 este compatibila cu HTML4 si XHTML. - Puteti inchide elementele ce au un singur tag (META, BR, HR, INPUT, IMG) cu slash, <tag />, precum in XHTML; sau puteti sa le lasati fara sa le adaugati slash, <tag>. - Puteti folosi litere mici, sau /si litere mari, pentru numele tag-urilor si atribute. Astfel, toate variantele urmatoare sunt valide HTML5: <meta charset="utf-8"> Sau, inchis cu slash: <meta charset="utf-8" /> <img src="image.jpg" alt="Text oarecare">
Sau: <img src="image.jpg" alt="Text oarecare" /> Sau, cu litere mari: <IMG src="image.jpg" ALT="Text oarecare"> <br> Sau: <BR> Sau: <br /> - In HTML5 puteti alege sa specificati sau nu atributul type in elementele <script>, and <style>, acesta a devenit optional: <script type="text/javascript"><!-// Cod JavaScript --></script> Sau: <script><!-// Cod JavaScript --></script> <style type="text/css"> /* Cod CSS */ </style> Sau: <style> /* Cod CSS */ </style> Toate aceste variante sunt valide in HTML5, dar, ca o buna practica, este indicat sa folositi sintaxa XHTML; adica sa folositi litere mici, sa adaugati slash-ul de inchidere, si sa specificati atributul "type" in tag-urile <script>, si <style>. Structura HTML5 Doctype in HTML5 e mai simplu: <!doctype html> Tag-ul Meta charset e mai simplu: <meta charset="utf-8">
Div-urile sunt acum folosite petru stil si design, nu mai sunt necesare pentru structura; HTML5 include mai multe elemente noi pentru structurare, care ajuta la definirea si organizarea diferitelor parti in document. Acestea sunt principalele elemente de structura care sunt folosite mai des in HTML5:
<header> - e folosit pentru a defini titluri (si sub-titluri), sau meniu de navigare in site. Poate fi
adaugat direct in BODY, sau in <article>, ori <section>. - De obicei in acest element se adauga tag-uri H1, H2, Hx, sau <nav> cu principalele link-uri. <footer> - reprezinta subsolul paginii sau a unui <section>, ori <article>; poate contine informatii despre autor, copyright, etc. <section> - representa o sectiune distincta a documentului sau aplicatiei. Se foloseste pentru a grupa logic structura documentului. Poate contine header, articles, meniu de navigare si footer. <nav> - in acest tag se adauga meniul de navigare in paginile site-ului. Acest element ar trebui folosit doar pentru link-uri grupate intr-un meniu. Daca aveti un <footer> cu link-uri de navigare in site, nu mai e necesar sa le adaugati si in <nav>, deoarece <footer> e suficient. <article> - se foloseste pentru a defini un element independent in pagina (sau in <section>), si poate contine articole de stiri, postari de blog, comentarii, sau alt continut cu text si imagini. <aside> - poate fi folosit ca sa defineasca o zona laterala, sau alt continut care e considerat intr-un fel separat de continutul din jurul lui. Un exemplu ar fi, banner sau publicitate. <hgroup> - se foloseste pentru a grupa un set de doua sau mai multe elemente H1, H2, H3, ..., cand avem de exemplu un titlu si subtitluri
HTML5 vine si cu alte elemente interesante, precum <video> si <audio>, plus alte tag-uri si atribute noi si modificate, dar acest tutorial este o descriere scurta care prezinta principalele elemente de baza, ca sa intelegeti noua structura in HTML5, si sa treceti rapid de la HTML4 sau XHTML la HTML5. Toate principalele browsere (Safari, Chrome, Firefox, Opera, Internet Explorer) continua sa adauge noile caracteristici HTML5 in ultimile lor versiuni, dar multi utilizatori inca folosesc versiuni de browser web ce nu recunosc noile elemente HTML5, precum IE7, IE8. In acest caz exista o solutie JavaScript, un script extern, html5.js (gazduit de un proiect Google) care face browser-ul IE sa recunoasca noua structura din HTML5. Este recomandat sa includeti acest script in sectiunea HEAD a documentului HTML5, folosind acest cod:  Si urmatorul cod CSS, care face ca tag-urile specificate sa fie afisate ca elemente de tip bloc: <style>header, footer, section, aside, nav, article {display: block;}</style> Iata o structura comuna a unei pagin cu HTML5, ce contine un header in partea de sus a paginii (cu u meniu in el), o sectiune in partea stanga (cu un meniu de navigare "aside" pt. banner), o alta sectiune (cu Header, 2 articole si footer), si un footer in subsolul paginii (click pe imagine):
Puteti folosi tag-urile pentru structurare cu atributele "id" si "class", precum si <div>, <span>, <p>, si alte taguri HTML pentru design si organizare /aranjare continut in documentul HTML. Mai jos sunt codurile HTML5 si CSS pentru a crea o pagina web bazata pe structura din imaginea de mai sus: Document HTML5 <!doctype html> <html> <head> <meta charset="utf-8" /> <title>Web Development Cursuri si Tutoriale</title> <meta name="description" content="Examplu document in HTML5, template, cursuri si tutoriale" /> <meta name="keywords" content="html5, tutoriale html5, cursuri" />  <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <header id="page_header"> <h1>Web Development Cursuri si Tutoriale</h1> <nav> <ul> <li><a href="http://www.marplo.net/" title="Home">Home</a></li> <li><a href="http://www.coursesweb.net/" title="Cursuri Web">Cursuri Web</a></li> <li><a href="http://www.marplo.net/forum/">Forum</a></li> <li><a href="../../coment/contact.php" title="Contact">Contact</a></li>
</ul> </nav> </header> <section id="posts"> <header id="posts_header"> <h2>Tutoriale HTML5</h2> </header> <article class="post"> <header> <h3>Invata rapid HTML5</h3> </header> <div class="ctext"> Invata despre noile caracteristici din HTML5.<br /> Tag-uri noi, si elemente pentru structura. </div> <aside class="post_baner">Aici poate fi un banner</aside> <p> Noile caracteristici din <b>HTML5</b> sunt bazate pe HTML, CSS, DOM, si JavaScript; si reduc necesitatea plugin-urilor externe (precum Flash).<br /> Multe alte noi caracteristici HTML5 sunt centrate pe crearea unei mai bune platforme pentru aplicatiile web, <a href="http://www.marplonet.net/html/tutorial-html5.html" title="Tutorial HTML5">Cititi mai mult</a> ... </p> </article> <article class="post"> <header> <h3>Elemente si attribute noi pentru formular in HTML5</h3> </header> <div class="ctext"> Formularele HTML sunt folosite in general ca sa transfere date adaugate de utilizator la un script de pe server sau JavaScript, ca sa fie procesate de un limbaj de programare. </div> <p> HTML5 adauga mai multe tipuri de casute input noi, pentru formular (datetime, datetime-local, date, month, week, time, number, range, email, url, search, and color), <a href="http://www.marplonet.net/html/html5-formular-input-atribute.html" title="Elemente de formular noi">Cititi mai mult</a> ... </p> </article>
<footer id="post_footer"> <p>Mai multe lectii si tutoriale HTML: <a href="http://www.marplo.net/html/" title="Curs HTML">Curs HTML</a>.</p> </footer> </section> <section id="sidebar"> <nav> <ul> <li><a href="http://www.marplo.net/html/" title="Curs HTML">Curs HTML</a></li> <li><a href="http://www.marplo.net/curs_css/" title="Curs CSS">Curs CSS</a></li> <li><a href="http://www.marplo.net/javascript/" title="JavaScript">JavaScript</a></li> <li><a href="http://www.marplo.net/php-mysql/" title="PHP-MySQL">PHP-MySQL</a></li> <li><a href="http://www.marplo.net/flash/" title="Flash-ActionScript 3">Flash-ActionScript 3</a></li> <li><a href="http://www.marplo.net/jocuri/" title="Jocuri Flash">Jocuri Flash</a></li> </ul> </nav> <aside class="sidebar_baner">Banner in sidebar</aside> </section> <footer id="page_footer"> <p>De la: <a href="http://www.marplo.net/" title="Cursuri gratuite, Jocuri, Anime">www.marplo.net</a></p> </footer> </body> </html>
Cod CSS, in fisierul style.css body { width: 99%; margin: 2px auto; font-family: Arial, "MS Trebuchet", sans-serif; text-align: center; } header, footer, section, aside, nav, article { display: block; } header#page_header {
width: 100%; margin: 4px auto; border: 2px solid blue; } header#page_header nav ul { list-style: none; margin: 0; padding: 0; } #page_header nav ul li { display:inline; margin: 0 20px 0 0; padding: 1px; } section#posts { float: right; width: 79%; background-color: #f1f2fe; border: 1px solid yellow; } section#posts header#posts_header { background-color: #abcdef; border: 1px solid green; } article.post { margin:10px; background-color: yellow; text-align: left; } article.post aside { float: right; margin-top: -58px; width: 250px; height: 120px; background-color: #fefefe; } article.post p { clear: right;} section#sidebar { float: left;
width: 18%; background-color: #d7d8fe; border: 1px solid green; padding:5px; } section#sidebar nav ul { margin: 3px auto; text-align: left; padding: 0 0 0 15; } section#sidebar aside { width: 160px; height: 250px; margin: 10px auto; background-color: #fefefe; } footer#page_footer { clear: both; width: 100%; margin: 4px auto; border: 2px solid blue; } Aceste reguli CSS sunt salvate intr-un fisier extern, denumit "style.css", si este inclus in pagina HTML cu urmatorul cod adaugat in sectiunea HEAD. <link rel="stylesheet" type="text/css" href="style.css" /> Pentru a crea pagini web cu HTML5, ar trebui sa cunoasteti si CSS. - Click pe Examplu structura HTML5, ca sa vedeti cum apare pagina web creata cu exemplu prezentat mai sus.- Lectia 17 XHTML - Tag-uri si ... <<-- Anterior ----------- Urmator -->> HTML5 - Tag-uri Noi
HTML5 - Tag-uri Noi

HTML5 video tag HTML5 embed tag Tag-ul canvas HTML5 figure tag HTML5 hgroup tag HTML5 mark tag Tag-ul progress
Tag-ul ruby Tag-ul WBR
Dupa mai multi ani de experienta cu HTML 4 si XHTML, HTML5 a venit cu tag-uri noi pentru o mai buna structra a documentului si a formularelor, pentru desen si continut multimedia. Multe din noile elemente HTML5 nu sunt inca suportate de principalele navigatoare web, dar treptat acestea implementeaza noile caracteristici din HTML5. In acest tutorial sunt prezentate cateva din noile tag-uri HTML5 suportate in principalele navigatoare web, cu o scurta descriere si exemple de cod. HTML5 audio tag Tag-ul <audio> se foloseste pt. a adauga sunet, muzica in pagina web. Poate folosi aceste atribute:
autoplay (autoplay="autoplay") - Sunetul, muzica va incepe automat. controls (controls="controls") - Controalele audio (play / pauza, etc.) vor fi afisate. loop (loop="loop") - Muzica va incepe din nou dupa ce se termina. preload (preload="auto|metadata|none") - Specifica daca si cum va fi incarcat fisierul audio cand
pagina se incarca. Atributul "preload" este ignorat daca se adauga "autoplay". ("auto" - incarca tot fisierul audio cand pagina se incarca; "metadata" - incarca numai metadata cand pagina se incarca; "none" - browser-ul nu ar trebui sa incarce fisierul audio cand se incarca pagina). src (src="url") - Adresa URL a fisierului audio. Elementul <audio> foloseste tag-ul <source> ca sa specifice sursa fisierului audio si fisiere alternative pentru diferentele dintre navigatoarele web, bazate pe tipul de codec recunoscut. IE9 si Safari folosesc fisiere MP3; Firefox, Chrome si Opera folosesc tipul OGG (sau OGV). - Exemplu: <audio controls="controls"> <source src="audio_file.ogg" type="audio/ogg" /> <source src="audio_file.mp3" type="audio/mp3" /> Browser-ul dv. nu recunoste tag-ul audio, dar puteti <a href="audio_file.mp3">Descarca fisierul</a>. </audio> - Textul dintre <audio> si </audio> va fi afisat in navigatoarele web care nu recunosc tag-ul audio. In exemplu de mai sus, daca browser-ul nu recunoste tag-ul <audio>, va fi afisat in acel loc un link de download. Rezultat: HTML5 video tag Tag-ul <video> este un element multimedia folosit pt. a adauga in pagina web video clipuri si alt continut video. Tag-ul HTML5 <video> poate folosi aceste atribute:
autoplay (autoplay="autoplay") - Filmul /videoclip-ul va incepe automat. controls (controls="controls") - Butoanele de control (play / pauza, etc.) vor fi afisate. height (height="pixeli") - Inaltimea player-ului, in pixeli.
width (width="pixeli") - Lungimea player-ului, in pixeli. muted (muted="muted") - Sunetul din film va fi pe mut, nu e redat. poster (poster="URL") - Specifica o imagine care sa fie afisata in timp ce filmul se incarca, sau pana
cand e apasat butonul play. Daca acest atribut nu e adaugat, va fi afisat primul cadru din film.
loop (loop="loop") - Filmul va porni de la inceput dupa ce se termina. preload (preload="auto|metadata|none") - Specifica daca si cum va fi incarcat filmul cand pagina se
incarca. Atributul "preload" este ignorat daca se adauga "autoplay". ("auto" - incarca tot fisierul video cand pagina se incarca; "metadata" - incarca numai metadata cand pagina se incarca; "none" - browser-ul nu ar trebui sa incarce filmul cand se incarca pagina). src (src="url") - Adresa URL a fisierului video. Elementul <video> foloseste tag-ul <source> ca sa specifice sursa fisierului video si fisiere alternative pentru diferentele dintre navigatoarele web, bazate pe tipul de codec recunoscut. IE9 si Safari folosesc fisiere MP4; Firefox, Chrome si Opera folosesc tipul OGG (sau OGV) - Exemplu: <video controls="controls"width="200" height="150"> <source src="video/video_file.mp4" type="video/mp4" /> <source src="video/video_file.ogg" type="video/ogg" /> Browser-ul dv. nu recunoste tag-ul video, dar puteti <a href="video/video_file.mp4">Descarca filmul</a>. </video> - Textul dintre <video> si </video> va fi afisat in navigatoarele web care nu recunosc tag-ul video. In exemplu de mai sus, daca browser-ul nu recunoste tag-ul <video>, va fi afisat in acel loc un link de download. Rezultat: HTML5 embed tag Tag-ul <embed> se foloseste pentru a adauga in pagina aplicatii cu continut interactiv, cum sunt prezentarile flash SWF, plug-inuri, sau fisiere cu imagini. Poate sa foloseasca aceste atribute:
height (height="pixeli") - Inaltimea cadrului in care e afisat continutul, in pixeli. width (width="pixeli") - Lungimea cadrului in care e afisat continutul, in pixeli. type (type="MIME_type") - Tipul MIME al continutului. src (src="url") - Adresa URL a fisierului.
Exemplu: <embed src="flash_game.swf" width="150" height="150" /> Rezultat: Tag-ul canvas Elementul <canvas> poate fi utilizat ca sa adauge in pagina desene grafice folosind script-uri (de obicei JavaScript), sau compozitii foto si animatii simple. Atribute:
height (height="pixeli") - Lungimea cadrului canvas, in pixeli. width (width="pixeli") - Inaltimea cadrului canvas, in pixeli.
- Exemplu (creaza un patrat albastru): <canvas id="cvs1" width="88" height="88"> Acest text e afisat daca browser-ul nu recunoste elementul HTML5 Canvas. </canvas> <script type="text/javascript"> var canvas=document.getElementById('cvs1'); var ctx=canvas.getContext('2d'); ctx.fillStyle='#0102fe'; ctx.fillRect(0,0,80,80); </script> - Textul dintre <canvas> si </canvas> va fi afisat daca navigatorul web nu recunoaste canvas. Rezultat: HTML5 figure tag Tag-ul <figure> se foloseste pentru a adauga in pagina un grup de elemente care au un contint de sine statator, cum ar fi diagrame, poze, cod, etc. Continutul din elementul <figure> e atasat la derularea paginii, dar pozitia lui este independenta. Dace e sters nu ar trebui sa afecteze cursul paginii. Tag-ul <figure> poate sa contina elementul <figcaption> ca sa adauge o scurta descriere la ceea ce e adaugat in <figure> . - Exemplu: <figure> <img src="html_course.jpg" alt="Curs HTML" width="200" height="100" /> <figcaption>Curs HTML: www.marplo.net/html/</figcaption> </figure> Rezultat:
Curs HTML: www.marplo.net/html/ HTML5 hgroup tag Tag-ul <hgroup> se foloseste pentru a grupa mai multe tag-uri H1 - H6. - Exemplu: <hgroup> <h2>Bine ai venit pe www,narplo.net</h2> <h3>Cursuri gratuite, Jocuri, Anime</h3> </hgroup> <p>Restul continutului...</p> HTML5 mark tag
Tag-ul <mark> defineste un text marcat, se foloseste cand doriti sa scoateti in evidenta parti din text, - Exemplu: <p>Cursuri gratuite si tutoriale: <mark>www.marplo.net</mark> pt. Web Development.</p> Rezultat: Cursuri gratuite si tutoriale: www.marplo.net pt. Web Development. Tag-ul progress Elementul <progress> adauga in pagina o bara de progres. De obicei e folosit impreuna cu script-uri JavaScript. Poate folosi aceste atribute:
max (max="nr") - Specifica totalul de unitati din bara de progres. value (value="nr") - Specifica numarul de unitati completate din bara de progres.
- Exemplu: <progress value="33" max="100"></progress> Rezultat: Tag-ul ruby Elementul <ruby> specifica o adnotare rubin. Adnotarile Ruby sunt folosite in scrierile din Asia de Est, pentru a arata pronuntia caracterelor est-asiatice. Acest tag se foloseste impreuna cu tag-urile <rt> si <rp>. - <rt> - defineste o explicatie sau pronuntia caracterelor dintr-o adnotare rubin. - <rp> - defineste ce sa afiseze daca navigatorul web nu recunoaste elementul <ruby>. Exemplu: <ruby> <rt><rp>(</rp><rp>)</rp></rt> </ruby> Tag-ul WBR Elementul <wbr> (Word Break Opportunity) specifica unde in text ar putea fi adaugat rand nou, indica: "Browser-ul poate adauga aici un rand nou daca e necesar". Daca browser-ul nu considera ca trebuie adaugat un nou rand, nu afecteaza cu nimic. De exemplu, se poate folosi <wbr> ca sa adauge oportunitatea de rand nou la un cuvant prea lung, sau ca sa evitati adaugarea de catre browser a unui rand nou intr-un loc nepotrivit. Exemplu: <p>Pentru a crea Pagini<wbr>Web profesionale, un Web<wbr>Master ar trebui sa stie HTML si CSS.</p>
HTML5 - Elemente si atribute noi in formular
Noile caracteristici adaugate in HTML5 nu sunt complet recunoscute de principalele browsere. Navigatoarele web cu cel mai bun suport pentru noile elemente din HTML5 sunt: Opera, Chrome si Mozill Firefox. Noile tipuri de casete input in HTML5 HTML5 adauga mai multe tipuri de casute input pentru formular (datetime, datetime-local, date, month, week, time, number, range, email, url, search, si color), care sunt prezentate mai jos: type="date" - Creaza o caseta de control pentru specificarea datei (an, luna, zi), precum un calendar. Valoarea initiala (adaugata in atributul "value") trebuie sa fie furnizata in format data ISO. <input type="date" name="set_date" value="2011-10-15" />
type="datetime" - Creaza o caseta input pentru data si ora, care poate fi adaugat in format ISO date/time, si e trimisa ca fiind in fusul orar UTC. <input type="datetime" name="dt" value="2011-06-14T01:26:32:00Z" />
type="datetime-local" - Creaza o caseta input pentru data si ora, care poate fi adaugat in format ISO date/time, la fel ca "datetime", dar presupunand ca timpul este cel din fusul orar local. <input type="datetime-local" name="dtl" value="2011-06-14T01:26:32:00"> type="month" - Creaza o caseta input in care se poate specifica anul si luna. <input type="month" value="2012-09" name="mnt" />
type="week" - o caseta input pentru anul si numarul unei anumite saptamani din an (AN-Wnr , nr e numarul saptamanii). <input type="week" name="weeks" value="2011-W34" />
type="time" - creaza o casuta de formular pentru ora (ora, minute, secunde). <input type="time" name="currenttime" value="18:12:00" />
type="tel" - o caseta input pentru numar de telefon. <input type="tel" name="hometel" value="123-888-2012" />
123-888-201
type="url" - e folosit pentru campuri de formular care trebuie sa contina doar adresa URL. Valoarea din acest input e automat validata cand datele din formular sunt trimise (daca nu are un format URL valid, returneaza un mesaj de eroare). <input type="url" name="site" size="25" value="http://www.marplo.net" />
http://w w w .marplo.net
type="number" - creaza casete de formular care sa contina doar numere. Se poate restrictiona numerele acceptate, cu atributele "min", "max" si "step". <input type="number" name="points" min="5" max="80" />
type="range" - Creeaza o zona cu un cursor de control care indica o valoare dintr-o serie de numere. Numerele acceptate incep de la valoarea specificata in atributul "min" (0 default), pana la numarul specificat in atributul "max" (100 default). <input type="range" name="val" min="1" max="10" />
type="email" - e folosit pentru campuri de formular care trebuie sa contina doar adresa de e-mail. Valoarea din acest input e automat validata cand datele din formular sunt trimise. <input type="email" name="email" />
type="search" - Creaza un camp de text special folosit pentru cautare (de ex. cautare in site, cu un script). <input type="search" name="srch" size="25" value="Cautare" />
Cautare
type="color" - Creaza un camp de formular special pentru selectarea unei culori. <input type="color" name="get_color" />
Atribute noi pentru <form> adaugate in HTML5

autocomplete="on | off" - Permite browser-ului sa completeze automat datele in formular (on), sau
de fiecare data utilizatorul trebuie sa introduca el insusi datele (off). - Functioneaza cu <form>, si urmatoarele tipuri <input>: text, search, url, tel, email, password, date-pickers, range, color.

<form action="script.php" method="post" autocomplete="on" id="idf"> Name:<input type="text" name="fname" /> <input type="submit" value="Send" /> </form>
novalidate - (novalidate="novalidate" in XHTML) - Seteaza ca formularul, sau campul input unde e
adaugat, sa nu valideze automat datele cand sunt trimise. - Se poate adauga in <form> si in urmatoarele casete <input>: text, search, url, tel, email, password, date-pickers, range, color.
<form action="script.php" id="idf" novalidate="novalidate"> E-mail: <input type="email" name="email" /> <input type="submit" value="Send"/> </form>
Atribute noi pentru input autofocus - (autofocus="autofocus" in XHTML) - specifica faptul ca un camp de formular sa primeasca automat focus cand pagina e afisata. Functioneaza in toate casetele <input>. Name: <input type="text" name="name1" autofocus="autofocus" /> form="form_id" - Asociaza campul input cu formularul care are id="form_id". Cu aceasta metoda, caseta de text nu trebuie adaugata special intr-un element form. Functioneaza in toate tipurile <input>. <form action="script.php" method="post" id="idf"> Name:<input type="text" name="fname" /> <input type="submit" value="Send" /> </form> E-mail: <input type="email" name="email" form="idf" /> formaction="url" - Rescrie valoarea atributului "action" din <form>, trimitand datele la adresa specificata la "url". formenctype="content_type" - Rescrie valoarea atributului "enctype" din <form>. formmethod="get | post | put | delete" - Rescrie valoarea atributului "method" din <form>. Valorile "put" si "delete" sunt noi in HTML5. formnovalidate - (formnovalidate="formnovalidate" in XHTML) - Rescrie valoarea atributului "novalidate" din <form>. formtarget="target" - Rescrie valoarea atributului "target" din formular. - Aceste atribute de recriere sunt folosite doar in buton submit (type "submit" sau "image"). <form action="script.php" method="post" id="idf"> E-mail: <input type="email" name="email" /><br /> <input type="submit" value="Trimite" /><br /> <input type="submit" formaction="script_2.php" value="Trimite la script_2" /><br /> <input type="submit" formnovalidate="formnovalidate" value="Trimite fara validare" /> </form> height="pixels" - Specifica inaltimea butonului imagine, cand type="image". width="pixels" - Specifica lungimea butonului imagine, cand type="image". - Aceste atribute sunt folosite doar in butoane cu type="image": <input type="image" src="img_submit.gif" width="80" height="23" /> list="id_datalist" - Indica faptul ca exista o list predefinita de optiuni pentru utilizator, care sunt furnizate
de un element datalist. Valoarea atributului list ("id_datalist") este ID-ul adaugat in <datalist>. - Poate fi utilizat cu urmatoarele tipuri de <input>: text, search, url, tel, email, datepickers, number, range, color. Website: <input type="url" list="sites" name="link" /> <datalist id="sites"> <option label="CoursesWeb" value="http://www.coursesweb.net" /> <option label="MarPlo" value="http://www.marplo.net" /> <option label="W3Schools" value="http://www.w3schools.com" /> </datalist> max="number" - specifica valoarea maxima pentru numere, aceasta trebuie sa fie mai mare (sau egala) decat valoarea adaugata in atributul "min". min="number" - specifica o valoarea minima pentru numere. step="any/number" - specifica intervalul de numere care poate fi folosit (daca step="3", numerele acceptate sunt: -3,0,3,6, etc). - Atributele "min", "max", si "step" pot fi utilizate in urmatoarele casete <input> types: date-pickers, number, range. Urmatorul cod defineste o caseta care accepta numere de la 1 la 10, cu step 3 (numere ce pot fi adaugate: 3, 6 sau 9): <input type="number" name="num" min="1" max="10" step="3" /> multiple - (multiple="multiple" in XHTML) - Indica faptul ca utilizatorul poate specifica mai mult de o valoare. - Poate fi utilizat in urmatoarele casete <input>: email, file. <input type="file" name="img" multiple="multiple" /> pattern="regexp" - specifica o expresie regulata folosita la validarea datelor din caseta input. Puteti adauga un atribut "title" care sa indice pe scurt formatul datelor ce trebuie adaugate. - Poate fi utilizat in urmatoarele casete <input>: text, search, url, tel, email, password. Codul urmator defineste un camp text in care pot fi adaugate maxim 5 caractere (doar litere si numere): <input type="text" name="pass" pattern="[A-z0-9]{5}" title="Cinci caractere, litere si numere" /> placeholder="text" - Furnizeaza un mic indiciu, sau exemplu care sa ajute utilizatorul sa adauge datele corecte (pentru o descriere mai lunga, se foloseste atributul "title"). Indiciul e afisat in caseta input cand e goala, si dispare cand cursorul e in acel camp. - Poate fi utilizat in urmatoarele casete <input>: text, search, url, tel, email, password. <input type="search" name="src" placeholder="Search MarPlo" /> required - (required="required" in XHTML) - indica faptul ca respectivul camp input trebuie sa fie completat inainte de a trimite datele. - Poate fi adaugat in urmatoarele casete <input>: text, search, url, tel, email, password, date-pickers, number, checkbox, radio, file. <input type="text" name="name1" required="required" />
Alte elemente de formular adaugate in HTML5 <datalist> ... </datalist> tag Elementul datalist trebuie sa contina un "id" si tag-uri <option> ... </option>. Creaza un meniu cu optiuni (adaugate in elementul "option"), oferind o functie de "auto-completare" in timp ce utilizatorul tasteaza in caseta input care are un atribut "list" ce face referire la "id-ul" din datalist. Tag-ul <option> trebuie sa contina atributul "value". Exemplu: Website: <input type="url" list="sites" name="link" /> <datalist id="sites"> <option label="CoursesWeb" value="http://www.coursesweb.net" /> <option label="MarPlo" value="http://www.marplo.net" /> <option label="W3Schools" value="http://www.w3schools.com" /> </datalist>
<keygen /> tag Elementul keygen e folosit pentru a genera doua chei (una privata, si cealalta publica) care ofera un mod mai sigur de autentificare a utilizatorului. Cheia privata este salvata pe calculatorul client, iar cheia publica e trimisa la server. Suportul navigatoarelor web pentru acest element nu e inca destul de bun pentru a fi utilizat ca un standard de securitate. Exemplu: <form action="script.php" id="idf" method="post"> Utilizator: <input type="text" name="user" /> Encriptare: <keygen name="security" /> <input type="submit" value="Submit" /> </form>
<output> </output> tag E folosit pentru a afisa rezultatul unei operatiuni de calcul, cel mai probabil rezultatul returnat de un script. Total: <output name="total" onformchange="calc()">0</output> - Aici, "calc()" poate fi o functie dintr-un script JavaScript.
Tutorial HTM5 canvas
Desenare cu HTML5 Adaugare transparenta Desenare linii Desenare arce si cercuri Canvas - Text Canvas - Umbre Canvas - Gradient Adaugare imagini
<canvas> este unul din cele mai interesante elemente introduse in HTML5. Tag-ul <canvas> este destul de simplu, defineste lungimea, inaltimea si un ID unic. Dar se folosesc o serie de instructiuni JavaScript (denumite generic APIs) pentru a desena obiecte in canvas. Exemplu de mai jos arata structura de baza pentru implementare canvas intr-o pagina web: <!doctype html> <html> <head> <meta charset="utf-8" /> <title>Titlu paginii</title> <script type="text/javascript"> function draw() { // preia intr-un obiect tag-ul <canvas> var canvas = document.getElementById("id_canvas"); // daca browser-ul recunoaste canvas if (canvas.getContext) { var ctx = canvas.getContext('2d'); // Aplica instructiuni JavaScript (API canvas) pt. desenare } } // apeleaza functia draw() imediat ce pagina s-a incarcat window.onload = draw; </script> </head> <body> <canvas id="id_canvas" width="200" height="200"></canvas> </body> </html>
- Atributele width si height specifica dimensiunile zonei CANVAS in pagina web. - Important este ID-ul (aici "id_canvas"), acesta se foloseste in JavaScript ca sa fie preluat tag-ul <canvas> intrun obiect (cu document.getElementById('ID')), apoi se aplica functii si proprietati specifice pentru a crea desene care sunt afisate in tag-ul CANVAS. - Metoda getContext('2d') trebuie aplicata la elementul Canvas ca sa se obtina un obiect la care se aplica instructiuni API pentru crearea continutului din <canvas>.
<canvas> este un element de tip bloc, poate fi adaugat in oricare alt tag de tip bloc, precum <p>, <div>, sau in elementele noi de structura introduse in HTML5: <section>, <article>. Desenare cu HTML5, canvas si JavaScript Instructiunile JavaScript permit dezvoltatorilor de pagini web sa deseneze diferite forme, linii, sa aplice culori, transparenta si gradient, sa adauge text si imagini in Canvas; chiar sa creeze animatie. - Exemplu urmator deseneaza un patrat albastru. <!doctype html> <html> <head> <meta charset="utf-8" /> <title>Canvas patrat albastru</title> <script type="text/javascript"><!-function draw() { var canvas = document.getElementById('cav1'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.fillStyle = '#0101fe'; ctx.fillRect (50, 60, 100, 100); } } window.onload = draw; --></script> </head> <body> <canvas width="200" height="200" id="cav1"></canvas> </body> </html> Rezultat: // acceseaza functia draw() cand pagina s-a incarcat
- Sintaxa:
ctx.fillStyle = "Culoare" - reprezinta culoarea din interiorul formei. Se poate folosi orice metoda de
definire a culorii utilizata in CSS (blue, #0000ff, #00f, sau rgb(0,0,255) ). - Daca nu se specifica o culoare, va fi aplicat negru. ctx.fillRect(X-stanga, Y-sus, lungime, inaltime) - Deseneaza patrulaterul in canvas, folosind cloarea din "fillStyle".
Puteti crea desene mult mai complexe, combinand cercuri, linii, patrulatere, gradient, transparenta. - Deoarece multi utilizatori inca folosesc browser care nu recunoaste elementul CANVAS, puteti adauga un text cu un mesaj de eroare pt. no-canvas, intr-un tag ascuns (cu style="display:none;"), iar cu JavaScript faceti acest tag vizibil in cazul cand browser-ul nu recunoaste elementul canvas. - Daca adaugati codul JavaScript dupa tag-ul <canvas>, nu mai e necesar window.onload, doar apelati simplu functia cu API-uri pt. canvas. Veti vedea in exemplele urmatoare.
Adaugare transparenta Ca sa adaugati transparenta, definiti culoarea folosind formula: rgba(Red, Green, Blue, Alpha). "Alpha" e o valoare intre 0 si 1 care reprezinta transparenta. In urmatorul exemplu adaugam un dreptunghi cu Alpha 0.5. In acest caz definim culoarea din "fillStyle" pentru dreptunghi folosind rgba() pentru a specifica valoarea de transparenta ( rgba(220, 223, 0, 0.5) ). De aseemenea, va fi adaugat un mesaj pt. no-canvas, iar codul JavaScript e scris sub tag-ul <canvas> (pt. a nu mai folosi window.onload). <!doctype html> <html> <head> <meta charset="utf-8" /> <title>Canvas transparenta</title> </head> <body> <canvas width="200" height="200" id="cav1"></canvas> <p id="no_cav" style="display:none;">Folositi un browser compatibil-Canvas ca sa vedeti aceasta zona.</p> <script type="text/javascript"><!-function draw() { var canvas = document.getElementById('cav1');
if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.fillStyle = '#0101fe'; ctx.fillRect (50, 60, 100, 100); ctx.fillStyle = "rgba(220,223,0, 0.5);"; ctx.fillRect (90, 105, 100, 80); } else { // face vizibil tag-ul cu text pt. no-canvas document.getElementById('no_cav').style.display = 'block'; } } draw(); </body> </html> Rezultat: // apeleaza functia draw()
--></script>
Desenare linii Ca sa desenati linii se foloseste functia lineTo(). lineTo(x, y) Aceasta metoda traseaza o linie de la punctul curent pana la coordonatele (x, y). Pentru a seta sau muta punctul curent de inceput, se foloseste metoda moveTo(). moveTo(x, y) - Aceasta metoda creaza, sau muta, punctul de inceput al desenarii, la coordonatele specificate. Ca sa definiti culoarea liniei, se foloseste: ctx.strokeStyle = "culoare"; Pentru grosimea liniei (in pixeli), se foloseste: ctx.lineWidth = valoare; Urmatorul exemplu creaza trei linii. <canvas width="200" height="200" id="cav1"></canvas>
<p id="no_cav" style="display:none;">Folositi un browser compatibil-Canvas ca sa vedeti aceasta zona.</p> <script type="text/javascript"><!-function draw() { var canvas = document.getElementById('cav1'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); // definesste culoarea si grosimea liniei ctx.strokeStyle = '#01da01'; ctx.lineWidth = 3; // creaza prima linie ctx.moveTo(10, 10); ctx.lineTo(100, 80); // creaza a doua linie ctx.moveTo(10, 10); ctx.lineTo(120, 120); // the third line ctx.moveTo(10, 150); ctx.lineTo(140, 150); ctx.stroke(); } else { // face vizibil tag-ul cu text pt. no-canvas document.getElementById('no_cav').style.display = 'block'; } } draw(); // apeleaza functia // adauga liniile // muta punctul de inceput // seteaza punctul de inceput // defineste linia // seteaza punctul de inceput // defineste linia
--></script> Dupa ce a fost definita culoarea liniei (cu strokeStyle), si grosimea (cu lineWidth), am folosit metoda moveTo() pentru a seta punctul de inceput, apoi cu lineTo(100, 80) se creaza o linie de la acel punct curent pana la punctul dat de coordonatele (100, 80). Acum, ultimul punct devine punctul curent de inceput, pentru a-l muta, se foloseste iar meoda moveTo(). Codul de mai sus va afisa aceste trei linii (intr-un browser Canvas-compatibil):
Desenare arce si cercuri Pentru a desena arce de cerc si cercuri, se foloseste functia arc(). arc(x, y, raza, startUnghi, endUnghi, anticlockwise) - Aceasta metoda deseneaza un arc de cerc intre startUnghi si endUnghi, in sens invers orelor de ceas daca argumentulanticlockwise e setat true, daca e false deseneaza in sensul orelor de ceas. Ca sa desenati un crc, setati: startUnghi=0, endUnghi=Math.pi*2 Dupa ce ati definit arc-ul de cerc (sau cercul) cu metoda arc(), aplicati: ctx.stroke(); - ca sa desenati linia de margine. ctx.fill(); - ca sa adaugati culoarea de umplere. Urmatorul cod deseneaza o fata zambitoare. <canvas width="200" height="200" id="cav1"></canvas> <p id="no_cav" style="display:none;">Folositi un browser compatibil-Canvas ca sa vedeti aceasta zona.</p> <script type="text/javascript"><!-function draw() { var canvas = document.getElementById('cav1'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.arc(75,75,50,0,Math.PI*2,true); ctx.moveTo(110,75); ctx.arc(75,75,35,0,Math.PI,false); ctx.moveTo(65,65); ctx.arc(60,65,4,0,Math.PI*2,true); ctx.moveTo(95,65); ctx.arc(90,65,4,0,Math.PI*2,true); ctx.stroke(); } else { // face vizibil tag-ul cu text pt. no-canvas document.getElementById('no_cav').style.display = 'block'; } // Ochiul drept // Ochiul stang // Gura // Fata
} draw(); // apeleaza functia
--></script> Desenul incepe cu desenarea fetei, apoi se muta punctul de inceput pentru desenare gura, si traseaza alt arc de cerc, si tot asa pentru fiecare ochi. Functia moveTo() se ocupa de mutarea coordonatelor. Rezultat:
Canvas - Text Sunt doua metode pentru adaugare text in canvas:

fillText(text, x, y) - adauga textul la pozitia specificata, avand culoarea din fillStyle. strokeText(text, x, y) - adauga textul la pozitia specificata, dar fara culoare de umplere, doar cu linia
de margine a literelor, avand culoarea din strokeStyle.
Pentru text se pot folosi urmatoarele proprietati la obiectul context:

ctx.font = valoare - Specifica fontul textului, la fel ca proprietatea font-family din CSS. ctx.textAlign = valoare - Specifica alinierea pe orizontala a textului, valori: "start", "end", "left",
"right", "center" (default e "start").

ctx.textBaseline = valoare - Specifica alinierea pe verticala a textului, valori: "top", "hanging",
"middle", "alphabetic", "ideographic", "bottom" (default e "alphabetic").
Exemplu: <canvas width="200" height="200" id="cav1"></canvas> <p id="no_cav" style="display:none;">Folositi un browser compatibil-Canvas ca sa vedeti aceasta zona.</p> <script type="text/javascript"><!-function draw() { var canvas = document.getElementById('cav1'); if (canvas.getContext) { var ctx = canvas.getContext('2d');
// creaza text cu o culoare de umplere ctx.fillStyle = '#00f'; ctx.font = 'italic 30px sans-serif'; ctx.textBaseline = 'top'; ctx.fillText('Hy everyone', 2, 5); // creaza text afisat doar cu linia de margine a literelor ctx.font = 'bold 30px sans-serif'; ctx.strokeText('Hy everyone', 2, 50); } else { // face vizibil tag-ul cu text pt. no-canvas document.getElementById('no_cav').style.display = 'block'; } } draw(); Rezultat: // apeleaza functia
--></script>
Canvas - Umbre Instrctiunile JavaScript pentru umbre contin proprietati care se aplica la obiectul context:
ctx.shadowColor = valoare - Seteaza culoarea umbrei. ctx.shadowBlur = valoare - Seteaza "blur" la umbra, in pixels. Cu cat valoarea e mai mica, umbra e
mai ascutita. ctx.shadowOffsetX = valoare - Specifica distanta X, in pixeli. ctx.shadowOffsetY = valoare - Specifica distanta Y, in pixeli.
Urmatorul cod deseneaza o sfera albastra, cu o umbra verde avand transparenta 0.5: <canvas width="200" height="200" id="cav1"></canvas> <p id="no_cav" style="display:none;">Folositi un browser compatibil-Canvas ca sa vedeti aceasta zona.</p> <script type="text/javascript"><!-function draw() {
var canvas = document.getElementById('cav1'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); // seteaza proprietatile umbrei ctx.shadowOffsetX = 8; ctx.shadowOffsetY = 8; ctx.shadowBlur = 4; ctx.shadowColor = 'rgba(0, 200, 1, 0.5)'; // defineste si adauga un cerc ctx.fillStyle = '#0000fe'; ctx.arc(75,75,50,0,Math.PI*2,true); ctx.fill(); } else { // face vizibil tag-ul cu text pt. no-canvas document.getElementById('no_cav').style.display = 'block'; } } draw(); Rezultat: // apeleaza functia
--></script>
Canvas - Gradient Pentru a crea culoare gradient in Canvas, se aplica un obiect CanvasGradient la proprietatile fillStyle sau /si strokeStyle. Se pot crea doua tipuri de obiect CanvasGradient, utilizand una din urmatoarele metode:
gradient = context.createLinearGradient(x0, y0, x1, y1) - Returneaza un obiect CanvasGradient ce
reprezinta un gradient liniar, care incepe de la punctul (x0, y0) si se termina la punctul (x1, y1).
gradient = context.createRadialGradient(x0, y0, r0, x1, y1, r1) - Returneaza un obiect
CanvasGradient ce reprezinta un gradient radial, ca un con cu cercul mic dat de (x0, y0, re), iar cercul mare definit de (x1, y1, r1).
Dupa ce ati creat obiectul pentru gradient, puteti adauga culori in gradient, cu metoda addColorStop() aplicata acestui obiect. Urmatoarele doua coduri arata cum puteti crea si folosi gradient. 1) Exempu cu createLinearGradient(): <canvas width="200" height="200" id="cav1"></canvas> <p id="no_cav" style="display:none;">Folositi un browser compatibil-Canvas ca sa vedeti aceasta zona.</p> <script type="text/javascript"><!-function draw() { var canvas = document.getElementById('cav1'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); // creaza un obbiect CanvasGradient liniar // furnizand sursa si coordonatele de inceput si sfarsit (x0, y0, x1, y1) var gradient = ctx.createLinearGradient(0, 0, 150, 0); // Se adauga culori in gradient, primul argument specifica pozitia culorii // - se folosesc valori cuprinse intre 0 (gradient start) si 1 (gradient end) // Al doilea argument specifica culoarea, in orice format folosit si in CSS gradient.addColorStop(0, '#f00'); gradient.addColorStop(0.4, '#ff0'); gradient.addColorStop(0.8, '#0f0'); gradient.addColorStop(1, '#00f'); // rosu // galben // verde // albastru
// Aplica gradientul la proprietatea fillStyle, si deseneaza un dreptunghi ctx.fillStyle = gradient; ctx.fillRect(0, 0, 200, 125); } else { // face vizibil tag-ul cu text pt. no-canvas document.getElementById('no_cav').style.display = 'block'; } }
draw(); --></script> Rezultat:
2) Exemplu cu createRadialGradient(): <canvas width="200" height="200" id="cav1"></canvas> <p id="no_cav" style="display:none;">Folositi un browser compatibil-Canvas ca sa vedeti aceasta zona.</p> <script type="text/javascript"><!-function draw() { var canvas = document.getElementById('cav1'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); // creaza un obiect CanvasGradient radial // furnizeaza sursa, coordonatele de inceput, sfarsit si razele cercurilor (x0, y0, r0, x1, y1, r1) var gradient = ctx.createRadialGradient(70, 80, 10, 78, 75, 45); // Adauga culori la gradientul radial, la fel ca la cel liniar gradient.addColorStop(0, '#0f0'); gradient.addColorStop(0.5, '#fff'); gradient.addColorStop(1, '#00f');
// Aplica gradientul la proprietatea fillStyle, si deseneaza un cerc ctx.fillStyle = gradient; ctx.arc(75,75,50,0,Math.PI*2,true); ctx.fill(); } else { // face vizibil tag-ul cu text pt. no-canvas document.getElementById('no_cav').style.display = 'block';
} } draw(); --></script> Rezultat:
Adaugare imagini Pentru a adauga o imagine in <canvas>, se foloseste metoda drawImage(). E o functie complexa, care foloseste trei, cinci, sau noua argumente. Iata sintaxa cu cinci argumente: drawImage(img_element, dx, dy, dw, dh) - Primul argument, img_element reprezinta o referinta la imagine (obiectul JavaScript cu ea), "dx" si "dy" specifica coordonatele de destinatie in contextul canvas, "dw" si "dh" specifca lungimea si inaltimea imaginii afisate in Canvas (in caz ca doriti sa o redimensionati). - Varianta cu noua argumente se foloseste cand doriti sa adaugati o portiune decupata din imagine. Contine inca patru argumente care definesc suprafata decupata (x0, y0, x1, y1).
In urmatorul exemplu adaugam aceasta imagine: (redimensionand-o), si un text langa ea. <canvas width="260" height="200" id="cav1"></canvas><br />
intr-un <canvas>
<p id="no_cav" style="display:none;">Folositi un browser compatibil-Canvas ca sa vedeti aceasta zona.</p> <img src="html_course.jpg" alt="HTML course" width="152" height="160" id="img1" /> <script type="text/javascript"><!-function draw() { var canvas = document.getElementById('cav1'); if (canvas.getContext) { var ctx = canvas.getContext('2d');
// obtine un obiect cu imaginea, o adauga in context canvas (cu dimensiuni specificate) var img_elm = document.getElementById('img1'); ctx.drawImage(img_elm, 0, 0, 95, 100); // adauga un text fara culoare de umplere ctx.font = 'bold 25px sans-serif'; ctx.textBaseline = 'top'; ctx.strokeText('HTML Course', 98, 38); } else { // face vizibil tag-ul cu text pt. no-canvas document.getElementById('no_cav').style.display = 'block'; } } draw(); --></script> Rezultat:
Elementul <canvas> poate fi si interactiv, sa raspunda la actiunile utilizatorului, efectuate cu mouse-ul sau tastatura. - In urmatorul exemplu se folosesc evenimentele: "onmouseover", "onmouseout", si "onclick" pentru a schimba culoarea unui dreptunghi in <canvas>. <canvas width="121" height="81" id="cav1" onmouseover="draw('#fefe01');" onmouseout="draw('#01de02');" onclick="draw('#fe0708');" style="cursor:pointer;"></canvas> <p id="no_cav" style="display:none;">Folositi un browser compatibil-Canvas ca sa vedeti aceasta zona.</p> <script type="text/javascript"><!-function draw(clr) { var canvas = document.getElementById('cav1'); if (canvas.getContext) { var ctx = canvas.getContext('2d');
// deseneaza un dreptunghi, cu o culoare preluata din parametru "clr" ctx.fillStyle = clr; ctx.fillRect (0, 0, 120, 80); } else { // face vizibil tag-ul cu text pt. no-canvas document.getElementById('no_cav').style.display = 'block'; } } draw('#0102fe'); --></script> Proprietatea "fillStyle" foloseste o culoare preluata din parametru "clr", astfel, cand functia e apelata cu o culoare diferita la argument, afiseaza un dreptunghi cu alta culoare. Ca sa vedeti efectul, pozitionati mouse-ul deasupra dreptunghiului si apasati click pe el. // apeleaza functia
Sunt mai multe proprietati si metode JavaScript pentru Canvas. O documentatie completa cu acestea gasiti la paginaHTML Canvas 2D Context.
Coduri culori pentru site
Aici gasiti un tabel cu mai multe culori ce pot fi utilizate in designul paginilor web, prin cod HTML si CSS, dar si in alte aplicatii cum ar fi editoare de imagini sau flash. Fiecare culoare are 3 reprezentari: Denumirea (in engleza), Cod Hexazecimal (perechi de numere de la 0 la 9 si litere de la A la F), Cod Decimal (numere de la 0 la 255). Astfel, puteti utiliza o culoare folosind oricare din cele 3 reprezentari. Daca nu stiti cum, studiati exemplele urmatoare: De exemplu, daca doriti sa folositi intr-un stil o nuanta de albastru deschis (luam DeepSkyBlue), puteti adauga intr-un cod CSS una din urmatoarele expresii, folosind denumirea culorii, codul hexa sau cel decimal (pentru hexadecimal se adauga in fata caracterul # iar pentru decimal se foloseste sintaxa rgb(r, g, b); ) color: DeepSkyBlue; color: #00BFFF; color: rgb(0, 191, 255); In general asa se folosesc aceste coduri de culori, de exemplu, pentru cod HTML la "font" (aici nu se foloseste decimal): <font color="DeepSkyBlue">Text de culoare DeepSkyBlue</font> <font color="#00BFFF">Text de culoare DeepSkyBlue</font> Iata inca un exemplu pt. CSS, cu proprietatea "background-color", de data asta o culoare spre verde (am ales SpringGreen)
background-color: SpringGreen; background-color: #00FF7F; background-color: rgb(0, 255, 127);

Tabel Culori Nume culoare (en.) Cod Hexadecimal R G B Cod Decimal R G B
Culori cu fond Rosu

IndianRed LightCoral Salmon DarkSalmon LightSalmon Crimson Red FireBrick DarkRed CD 5C 5C F0 80 80 FA 80 72 E9 96 7A FF A0 7A DC 14 3C FF 00 00 B2 22 22 8B 00 00 205 92 92 240 128 128 250 128 114 233 150 122 255 160 122 220 20 60 255 0 0 178 34 34 139 0 0
Culori cu fond Roz

Pink LightPink HotPink DeepPink MediumVioletRed PaleVioletRed FF C0 CB FF B6 C1 FF 69 B4 FF 14 93 C7 15 85 DB 70 93 255 192 203 255 182 193 255 105 180 255 20 147 199 21 133 219 112 147
Culori cu fond Portocaliu

LightSalmon Coral Tomato OrangeRed DarkOrange Orange FF A0 7A FF 7F 50 FF 63 47 FF 45 00 FF 8C 00 FF A5 00 255 160 122 255 127 80 255 99 71 255 69 0 255 140 0 255 165 0
Culori cu fond Galben
Gold Yellow LightYellow LemonChiffon LightGoldenrodYellow PapayaWhip Moccasin PeachPuff PaleGoldenrod Khaki DarkKhaki
FF D7 00 FF FF 00 FF FF E0 FF FA CD FA FA D2 FF EF D5 FF E4 B5 FF DA B9 EE E8 AA F0 E6 8C BD B7 6B
255 215 0 255 255 0 255 255 224 255 250 205 250 250 210 255 239 213 255 228 181 255 218 185 238 232 170 240 230 140 189 183 107
Culori cu fond Purpuriu (mov)

Lavender Thistle Plum Violet Orchid Fuchsia Magenta MediumOrchid MediumPurple BlueViolet DarkViolet DarkOrchid DarkMagenta Purple Indigo Nume culoare (en.) E6 E6 FA D8 BF D8 DD A0 DD EE 82 EE DA 70 D6 FF 00 FF FF 00 FF BA 55 D3 93 70 DB 8A 2B E2 94 00 D3 99 32 CC 8B 00 8B 80 00 80 4B 00 82 Cod Hexadecimal RGB 230 230 250 216 191 216 221 160 221 238 130 238 218 112 214 255 0 255 255 0 255 186 85 211 147 112 219 138 43 226 148 0 211 153 50 204 139 0 139 128 0 128 75 0 130 Cod Decimal RGB
Culori cu fond Verde

GreenYellow Chartreuse LawnGreen AD FF 2F 7F FF 00 7C FC 00 173 255 47 127 255 0 124 252 0
Lime LimeGreen PaleGreen LightGreen MediumSpringGreen SpringGreen MediumSeaGreen SeaGreen ForestGreen Green DarkGreen YellowGreen OliveDrab Olive DarkOliveGreen Aquamarine MediumAquamarine DarkSeaGreen LightSeaGreen DarkCyan Teal
00 FF 00 32 CD 32 98 FB 98 90 EE 90 00 FA 9A 00 FF 7F 3C B3 71 2E 8B 57 22 8B 22 00 80 00 00 64 00 9A CD 32 6B 8E 23 80 80 00 55 6B 2F 7F FF D4 66 CD AA 8F BC 8F 20 B2 AA 00 8B 8B 00 80 80
0 255 0 50 205 50 152 251 152 144 238 144 0 250 154 0 255 127 60 179 113 46 139 87 34 139 34 0 128 0 0 100 0 154 205 50 107 142 35 128 128 0 85 107 47 127 255 212 102 205 170 143 188 143 32 178 170 0 139 139 0 128 128
Culori cu fond Albastru

Aqua Cyan LightCyan PaleTurquoise Turquoise MediumTurquoise DarkTurquoise CadetBlue SteelBlue LightSteelBlue 00 FF FF 00 FF FF E0 FF FF AF EE EE 40 E0 D0 48 D1 CC 00 CE D1 5F 9E A0 46 82 B4 B0 C4 DE 0 255 255 0 255 255 224 255 255 175 238 238 64 224 208 72 209 204 0 206 209 95 158 160 70 130 180 176 196 222
PowderBlue LightBlue SkyBlue LightSkyBlue DeepSkyBlue DodgerBlue CornflowerBlue MediumSlateBlue RoyalBlue Blue MediumBlue DarkBlue Navy MidnightBlue Nume culoare (en.)
B0 E0 E6 AD D8 E6 87 CE EB 87 CE FA 00 BF FF 1E 90 FF 64 95 ED 7B 68 EE 41 69 E1 00 00 FF 00 00 CD 00 00 8B 00 00 80 19 19 70 Cod Hexadecimal RGB
176 224 230 173 216 230 135 206 235 135 206 250 0 191 255 30 144 255 100 149 237 123 104 238 65 105 225 0 0 255 0 0 205 0 0 139 0 0 128 25 25 112 Cod Decimal RGB
Culori cu fond Maro

Cornsilk BlanchedAlmond Bisque NavajoWhite Wheat BurlyWood Tan RosyBrown SandyBrown Goldenrod DarkGoldenrod Peru Chocolate SaddleBrown Sienna Brown FF F8 DC FF EB CD FF E4 C4 FF DE AD F5 DE B3 DE B8 87 D2 B4 8C BC 8F 8F F4 A4 60 DA A5 20 B8 86 0B CD 85 3F D2 69 1E 8B 45 13 A0 52 2D A5 2A 2A 255 248 220 255 235 205 255 228 196 255 222 173 245 222 179 222 184 135 210 180 140 188 143 143 244 164 96 218 165 32 184 134 11 205 133 63 210 105 30 139 69 19 160 82 45 165 42 42
Maroon
80 00 00
128 0 0
Culori cu fond Alb

White Snow Honeydew MintCream Azure AliceBlue GhostWhite WhiteSmoke Seashell Beige OldLace FloralWhite Ivory AntiqueWhite Linen LavenderBlush MistyRose FF FF FF FF FA FA F0 FF F0 F5 FF FA F0 FF FF F0 F8 FF F8 F8 FF F5 F5 F5 FF F5 EE F5 F5 DC FD F5 E6 FF FA F0 FF FF F0 FA EB D7 FA F0 E6 FF F0 F5 FF E4 E1 255 255 255 255 250 250 240 255 240 245 255 250 240 255 255 240 248 255 248 248 255 245 245 245 255 245 238 245 245 220 253 245 230 255 250 240 255 255 240 250 235 215 250 240 230 255 240 245 255 228 225
Culori cu fond Gri

Gainsboro LightGrey Silver DarkGray Gray DimGray LightSlateGray SlateGray DarkSlateGray Black DC DC DC D3 D3 D3 C0 C0 C0 A9 A9 A9 80 80 80 69 69 69 77 88 99 70 80 90 2F 4F 4F 00 00 00 220 220 220 211 211 211 192 192 192 169 169 169 128 128 128 105 105 105 119 136 153 112 128 144 47 79 79 000
Caractere speciale - secvente escape
In tabelul din aceasta pagina este o lista cu mai multe caractere speciale (simboluri, diacritice si caractere specifice altor limbi straine) si codurile lor specifice HTML si ISO. Aceste caractere pot fi adaugate si afisate corespunzator in orice pagina web, putand fi introduse cu aceste coduri cunosute si cu denumirea de Secvente Escape. De exemplu: - ca sa afisati in pagina simbolul (copyright) se adauga secventa escape © (sau codul ISO ©) - ca sa afisati in pagina simbolul (jumatate) se adauga secventa escape ½ (sau codul ISO ½) - pentru caracterul < (mai mic), ca browser-ul sa nu-l confunde cu inceputul de tag, se poate folosi codul < Nume Aacute aacute Acirc acirc acute AElig aelig Agrave agrave amp Aring aring Atilde atilde Auml auml brvbar Ccedil ccedil cent copy curren Sintaxa &Aacute á Â â ´ Æ æ À à & Å å Ã ã Ä ä ¦ Ç ç ¢ © ¤ Nume ISO Latin-1 &#193 á Â â ´ Æ æ À à & Å å Ã ã Ä ä ¦ Ç ç ¢ © ¤ A ascutit () a ascutit () A circumflex () a circumflex () accent grav () ligatura AE () ligatura ae () A grav () a grav () ampersand (&) A cu inel () a cu inel () A tilda () a tilda () A umlaut () a umlaut () bara intrerupta () C sedila () c sedila () cent () copyright () valuta generala () Descriere
deg div Eacute eacute Ecirc ecirc Egrave egrave emdash emsp endash ensp ETH eth Euml euml frac12 frac14 frac34 gt Iacute iacute Icirc icirc iexcl Igrave igrave iquest
° &div; ÷ É é Ê ê È è &emdash; &emsp; &endash; &ensp; Ð ð Ë ë ½ ¼ ¾ > Í í Î î ¡ Ì ì ¿
° ÷ É é Ê ê È è nedefinit nedefinit nedefinit nedefinit Ð ð Ë ë ½ ¼ ¾ nedefinit Í í Î î ¡ Ì ì ¿
grad () impartire () E ascutit () e ascutit () E circumflex () e circumflex () E grav () e grav () em dash (&emdash) em spatiu ( ) en dash (&endash;) en spatiu ( ) Eth nordic () eth nordic () E umlaut () e umlaut () jumatate () sfert () trei sferturi () mai mare dect (>) I ascutit () i ascutit () I circumflex () i circumflex () exclamatie inversata () I grav () i grav () intrebare inversata ()
Iuml iuml laquo lt macr micro middot nbsp not Ntilde ntilde Oacute oacute Ocirc ocirc Ograve ograve ordf ordm Oslash oslash Otilde otilde Ouml ouml para plusmn pound quot
Ï ï « < ¯ µ · ¬ Ñ ñ Ó ó Ô ô Ò ò ª º Ø ø Õ õ Ö ö ¶ ± £ "
Ï ï « < ¯ µ · ¬ Ñ ñ Ó ó Ô ô Ò ò ª º Ø ø Õ õ Ö ö ¶ ± £ "
I umlaut () i umlaut () paranteza unghiular dubl stng () mai mic dect (<) macron ( ) micro () punct la mijloc () spatiu nonbreaking negatie () N tilda () n tilda () O ascutit () o ascutit () O circumflex () o circumflex () O grav () o grav () ordinal feminin () ordinal masculin () O tiat () o tiat () O tilda () o tilda () O umlaut () o umlaut () paragraf () plus minus () lira sterlina () ghilimele (")
raquo reg sect shy sup1 sup2 sup3 szlig THORN thorn times trade Uacute uacute Ucirc ucirc Ugrave ugrave uml Uuml uuml Yacute yacute yen yuml
» ® § ¹ ² ³ ß Þ þ × ™ Ú ú Û û Ù ù ¨ Ü ¨ Ý ý ¥ ÿ
» ® § ¹ ² ³ ß Þ þ × nedefinit Ú ú Û û Ù ù ¨ Ü ü Ý ý ¥ ÿ
paranteza unghiular dubl dreapta () marca inregistrata () semn sectiune () soft hyphen () 1 superior () 2 superior () 3 superior () sharp s () Thorn nordic () thorn nordic () inmultire () trademark () U ascutit () u ascutit () U circumflex () u circumflex () U grav () u grav () umlaut () U umlaut () u umlaut () Y ascutit () y ascutit () yen () y umlaut ()
Scrierea codului CSS
Codurile CSS pot fi scrise in interiorul paginii sau intr-un fisier extern cu extensia".css". Codul CSS, ca forma generala, este alcatuit din: obiectul care va fi formatat. proprietatile acestuia si valoarea (sau atributele) fiecarei proprietati. Cand este adaugat in documentul HTML, trebuie scris in cadrul unui tag <style> in sectiunea HEAD a documentului HTML, dupa cum se vede in formula generala de cmai jos; <html> <head> <title>Titlul</title> <style type="text/css"> obiect_css { proprietate:valoare; alta_proprietate:valoare; } </style> </head> <body> ... Continut ... </body> </html> - Observati sintaxa codului CSS. Perechile proprietate:valoare se scriu intre acoladele obiectului CSS pe care-l definesc, intre "proprietate" si "valoare" trebuie sa fie un caracter doua-puncte (:) iar la sfarsitul perechii se adauga un caracter punct-si-virgula (;) - Cand este adaugat intr-un fisier extern ".css", codul CSS se scrie la fel, dar nu se mai adauga tag-ul <style>. 1. Obiectele (regulile) CSS Exista trei tipuri principale de obiecte CSS: selector, clasa si identificator. - Selectorul HTML Selectorul HTML se foloseste pentru a redefini modul de afisare a continutului etichetei HTML. Un selector HTML reprezinta partea etichetei HTML care indica navigatorului tipul de eticheta. Iata un exemplu: h1 { font-family:"Arial"; font-size:15px; } - Aici selectorul este "h1". Definirea unui selector HTML folosind CSS are ca rezultat redefinirea etichetei HTML. Selectorul si eticheta desi par identice, totusi nu sunt. - Clasa Clasa este un obiect care poate fi aplicat oricarei etichete HTML. O clasa trebuie creata in interiorul etichetei HTML inainte de a fi definita intr-un cod CSS. Crearea clasei in interiorul etichetei se face simplu, prin specificarea cuvantului class si numele clasei, ca in exemplu de mai jos:
<h1 class="nume_clasa"> Text </h1>
- "nume_clasa", poate fi orice nume dorim. - Apoi in interiorul codului CSS, clasa trebuie definita prin adaugarea unui caracter punct (.) inaintea numelui clasei, ca in exemplu urmator: .nume_clasa { font-family:"Arial"; font-size:15px; } Numele aceleasi clase poate fi atribuit mai multor etichete HTML din aceeasi pagina, si toate vor prelua acelasi stil css. - Identificator Obiectele de tip identificator (ID) sunt asemanatoare cu clasele. Pot fi aplicate oricarei etichete HTML, dar spre deosebire de clase, numele unui identificator trebuie atribuit numai unei singure etichete HTML dintr-o pagina, pentru alta eticheta se adauga un ID cu nume diferit. Ca si clasa, identificatoru trebuie intai creat in interiorul etichetei HTML. Modul de creare este simplu, prin specificarea cuvantului id si numele clasei, ca in exemplu de mai jos:
<h1 id="nume_id"> Text </h1>
- "nume_id", poate fi orice nume dorim. In interiorul codului CSS, identificatorul este definit prin adaugarea unui caracter diez (#) inaintea numelui, ca in exemplu urmator: #nume_id { font-family:"Arial"; font-size:15px; } In urmatoarea lectie va fi explicat mai amanuntit modul de definire si rolul acestor obiecte CSS . 2. Componentele unui obiect CSS Obiectele CSS, indiferent de tipul lor, au in componenta urmatoarele elemente:

Selectorii - identifica un obiect; pot fi selectori de etichete HTML, clase sau identificatori. Proprietatile - identifica o proprietate a obiectului; se refera in special la aspect. Valorile - sunt atributele unei proprietati; pot fi cuvinte cheie, valori numerice sau procentuale, tipul valorii depinzand de proprietate.
Sintaxa generala a unei reguli CSS este urmatoarea:
selector {proprietate: valoare; }
Proprietatile si valorile constituie definitia regulii (obiectului) CSS. Acestea se regasesc sub forma de perechi,despartite de caracterul doua puncte :, fiecare pereche se termina cu un caracter punct si virgula ";". Etichetele HTML nu sunt sensibile la diferenta intre majuscule si litere mici. Dar odata cu aparitia limbajului XHTML, acesta face distinctie intre majuscule si minuscule, astfel ca toate etichetele si toti selectorii trebuie scrisi cu litere mici.- Lectia 1 Introducere <<-- Anterior ----------- Urmator -->> Creare Foi de Stil
Crearea Foilor de Stil

1. Etichete HTML si stiluri CSS CSS ofera posibilitatea de a schimba aspectul fiecarei etichete in parte, prin stabilirea unui anume stil in interiorul ei, cu atributul "style". Acest lucru este util mai ales pentru a anula alte stiluri ale elementului respectiv sau de a da elemente grafice de stil doar etichetei respective. Sintaxa pentru definirea stilurilor in interiorul unei etichete HTML este urmatoarea:
<eticheta style="proprietate:valoare;"> text ... </eticheta>
CSS permite si definirea unor reguli de stil generale intr-o pagina web. Acest set de reguli trebuie scris in sectiunea de antet (head) a documentului, in cadrul tag-ului <style>. Sintaxa pentru definirea CSS intr-un document HTML, in interiorul etichetei <head> </head>, este urmatoarea:
<style type="text/css"> selector_1 {proprietate1:valoare1; proprietate2:valoare2; ... } ... selector_n {proprietate1:valoare1; proprietate2:valoare2; ... } </style>
- Definirea tuturor stilurilor intr-o locatie comuna usureaza modificarea mai rapida a unei pagini. Iata un exemplu practic de cod css: <style type="text/css"> h1 { font-family:Arial; font-size:15px; font-weight:bold; color:#1111ff; } p {font-family:Arial; font-size:12px; color:blue; } </style> Foile de stil pot fi utilizate nu doar la nivel de pagina web, ci si la nivel de intreg site. Astfel, trebuie creata o foaie de stil externa intr-un fisier separat, de preferat cu extensia ".css", care poate fi inclus in pagina HTML prin doua procedee: legatura sau import. Crearea unei foaie de stil externe se face scriind codul CSS intr-un fisier text cu ajutorul unui editor de texte simplu (de exemplu Notepad in Windows), sau specializat in acest sens (precum Notepad++). In fisierul extern creat se adauga reguli CSS, fara insa ca aceste reguli sa fie incadrate in etichete STYLE. Dupa ce a fost creata foaia de stil externa, aceasta poate fi folosita de un document HTML utilizand urmatoarea sintaxa, in interiorul tag-ului <head> </head>:
<link rel="stylesheet" href="nume_fisier.css" type="text/css">
- Eticheta LINK apare in antetul documentului (sectiunea head), iar atributele folosite transmit navigatorului tipul de legatura ("rel" legatura cu o foaie de stil, "type" - tipul codului din fisier) si locatia inspre fisierul ce contine codul CSS ("href" calea si numele complet al fisierului, inclusiv extensia). O alta modalitate de utilizare a foilor de stil externe intr-un document HTML o reprezinta importul acestora folosind comanda @import. Sintaxa pentru importul unei foi de stil externe este urmatoarea:
<style type="text/css"> @import url(nume_fisier.css); </style>
Pentru a importa un fisier CSS extern se foloseste in cadrul sectiunii HEAD a documentului HTML eticheta STYLE. In cadrul acestei etichete este adaugata instructiunea "@import" de mai sus, unde "nume_fisier.css" reprezinta calea si numele fisierului ce contine regulile CSS definite. Alaturi de instructiunea "@import", in cadrul etichetei STYLE, pot fi adaugate definiti si selectori suplimentari. Legatura la un fisier CSS extern sau importul acestuia intr-un document HTML are acelasi efect ca si cum stilurile incluse ar fi fost definire direct in eticheta STYLE din sectiunea HEAD a documentului HTML. 2. Definirea selectorilor - Selectorii HTML pot fi definiti prin adaugarea unui numar de definitii compatibilie cu eticheta HTML la care se refera, avand urmatoarea forma generala:
selector_HTML { proprietate1:valoare1; proprietate2:valoare2; ... }
Dupa redefinirea etichetei HTML, stilurile etichetelor respective din documentul HTML vor fi modificate automat. Prin redefinirea unei etichete, proprietatile prestabilite existente nu sunt anulate, ci se adauga altele noi. Utilizarea selectorilor de tip clasa ofera posibilitatea configurarii unor stiluri care se pot aplica doar acelor elemente care sunt etichetate cu clasa respectiva. Sintaxa generala de definire a unei clase CSS este:
.nume_clasa { proprietate1:valoare1; proprietate2:valoare2; ... }
Exista cazul in care o clasa este asociata unui selector HTML, ceea ce inseamna ca acea clasa poate fi folosita doar cu eticheta HTML respectiva. Pentru a defini o clasa care sa afecteze in mod direct un anume selector HTML, se foloseste urmatoarea sintaxa:
selector_HTML .nume_clasa { proprietate1:valoare1; proprietate2:valoare2; ... }
Selectoarele de clasa sunt acceptate de toate navigatoarele. Numele unei clase e recomandat sa fie diferit de cuvantele rezervate JavaScript. - Asemanator cu selectorii de clasa se definesc si identificatorii (id-ul). Acestia sunt folositi pentru crearea de stiluri care pot fi atribuite unei singure etichete HTML dintr-o pagina. Sintaxa generala de definire a unui identificator este:
#identificator { proprietate1:valoare1; proprietate2:valoare2; ... }
Identificatorii permit definirea unui element sub forma unui obiect, fiind folositi doar o singura data in cadrul unei pagini web pentru identificarea tag-ului respectiv, astfel poate fi manipulat si cu ajutorul functiilor JavaScript. Numele unui identificator e recomandat sa fie diferit de cuvantele rezervate JavaScript. 3. Crearea etichetelor HTML personalizate
Majoritatea etichetelor HTML au unele proprietati prestabilite. Acestea fie raman asa cum sunt, fie pot fi redefinite. Exista insa cazuri in care se doreste crearea unor etichete personalizate, pornind de la zero. In acest caz se folosesc etichetele <span> si <div>. Eticheta <span> nu are proprietati mostenite. Ea reprezinta doar o locatie vida care creaza o eticheta in linie. Pentru a configura o eticheta in linie trebuie definita o clasa sau identificator care sa poata fi aplicat apoi unei etichete <span>. Iata un exemplu cu, forma generala, in care selectori sunt precedati de eticheta <span> : ... <span class="nume_clasa"> ... </span> ... <span id="span1"> ... </span> ... <span class="clasa_span"> ... </span> ... Acum iata cum pot fi definiti acestia in interiorul unei foi de stil: .nume_clasa { proprietate1:valoare1; proprietate2:valoare2; ... } #span1 { proprietate1:valoare1; proprietate2:valoare2; ... } span .clasa_span { proprietate1:valoare1; proprietate2:valoare2; ... } In momentul in care se doreste configurarea unui bloc separat de restul continutului unui document HTML, solutia este eticheta <div>. Aceasta creaza o zona proprie in pagina, cu linie noua atat deasupra sa cat si dedesubtul sau. Pentru crearea etichetelor DIV se procedeaza la fel ca si in cazul etichetelor in linie SPAN, prin definirea mai intai a unei etichete de tip clasa sau identificator, urmata apoi de aplicarea ei asupra unei etichete <div>. Iata forma generala de aplicare a unei etichete <div> intr-o pagina HTML : ... <div class="nume_clasa"> ... </div> ... <div id="div1"> ... </div> ... Definirea acestor etichete <div> intr-un cod CSS se face astfel: div { proprietate1:valoare1; proprietate2:valoare2; ... } .nume_clasa { proprietate1:valoare1; proprietate2:valoare2; ... } #div1 { proprietate1:valoare1; proprietate2:valoare2; ... } Regulile CSS pentru definirea etichetelor <span> sau <div>, pot fi plasate la fel ca si celelalte tipuri de selectoare, in sectiunea "head" a documentului in interiorul etichetei "style", sau intr-un fisier extern carev ulterior este legat sau importat in documentul HTML. Mai multe lucruri despre DIV si SPAN puteti invata de aici -> DIV si SPAN. 4. Definirea de reguli similare Daca mai multi selectori folosesc aceleasi definitii css, acestia pot avea aceeasi lista de elemente, fiind scrisi separat prin virgule. Sintaxa generala pentru definirea unei liste cu mai multi selectori este urmatoarea:
selector1, selector2, ... { proprietate1:valoare1; proprietate2:valoare2; ... }
Impreuna cu selectorii pot fi de asemenea definiti identificatorii si clasele. Dezavantajul ar fi ca in momentul in care este modificata o valoare a unei proprietati incluse in definitie, valoarea respectiva se va modifica in toate etichetele reprezentate de acesti selectori. 5. Definirea etichetelor in context (imbricate) Cand o eticheta este inconjurata de alte etichete (aflandu-se astfel una in interiorul alteia), spunem ca aceste etichete sunt imbricate. Eticheta exterioara se numeste, in acest caz, eticheta parinte, iar cea inferioara se numeste copil. Se pot crea reguli care revin numai etichetelor copil, sintaxa generala a unei astfel de reguli fiind:
selector1 selector2 ... { proprietate1:valoare1; proprietate2:valoare2; ... }
- Unde "selector1" este selectorul parinte iar "selector2" este selectorul copil. Lista de selectori imbricati poate fi mai mare de doi, ultimul selector din lista este cel care primeste toate stilurile incluse in regula si in plus le mosteneste si pe cele ale parintilor. Ca si selectorii singuri, selectorii imbricati pot include in lista clase, identificatori sau selectori HTML. Toate etichetele HTML, cu exceptia etichetei BODY, au cel putin o eticheta parinte care le inconjoara. De cele mai multe ori stilurile etichetelor din interior preiau stilurile etichetelor parinte (exista insa cazuri in care proprietatile nu sunt mostenite de etichetele imbricate). Acest mecanism se numeste mostenirea stilurilor. Prin redefinirea unui selector, eticheta nu-si pierde proprietatile prestabilite, doar in cazul in care acestea sunt modificate. Astfel proprietatile mostenite pot fi anulate prin redefinirea acestora in lista de definitii a etichetei imbricate. 6. Cresterea prioritatii unei definitii Valoarea !important adaugata unei definitii atribuie maximum de prioritate in determinarea ordinii unei executii. Valoarea !important trebuie plasata inaintea caracterului ;, ca in exempul urmator:
selector { proprietate1:valoare1; proprietate2:valoare2 !important; ... }
7. Determinarea ordinii executiei Deoarece exista mai multe moduri de a aplica stilurile, pot apare situatii in care unei etichete sa-i fie aplicate mai multe stiluri. Foile de stil din doua sau mai multe surse, folosite simultan, pot cauza contradictii. De aceea exista cateva reguli care determina ordinea executiei (numita si cascada), acestea sunt:
1. Regulile CSS scrise in interiorul paginii HTML, in cadrul etichetei "style" din sectiunea "head" au o prioritate mai mare decat cele scrise intr-un fisier extern, iar regulile scrise in interiorul etichetelor au o prioritate mai mare decat cele din cadrul etichetei "style" din sectiunea "head". 2. Existenta atributului !important confera prioritate maxima la afisare definitiei in care este utilizat. 3. Sursa regulilor exista numeroase navigatoare care permit utilizatorului sa-si defineasca propriile foi de stil. Totusi, foile de stil ale autorului le anuleaza pe cele ale vizitatorului daca acestea din urma nu au valoarea "!important". 4. Specificitate cu cat o regula dispune de mai multi selectori HTML, de clasa si de identificator, cu atat prioritatea ei creste. ID-urile au valoarea 100, clasele au valoarea 10, iar selectorii HTML
au valoarea 1. 5. Momentul aparitiei cu cat un stil apare mai tarziu, cu atat importanta lui este mai mare. Astfel, definitiile unei etichete copil au prioritatea mai mare si anuleaza toate stilurile precedente cu care intra in conflict. 8. Adaugarea comentariilor la CSS Este bine ca uneori sa fie adaugate comentarii in codul CSS, mai ales in cazul fisierelor externe. Comentariile ajuta la intelegerea codului, facandu-se astfel cunoscut, pentru mai tarziu, rolu anumitor elemente din codul CSS. Comentariile nu au nici un efect si pot fi plasate in jurul regulilor, fiind utile si in cazul navigatoarelor care nu suporta CSS. Pentru a adauga comentarii in regulile de stil avem la dispozitie doua modalitati:

In cazul in care comentariul se intinde pe un singur rand este suficienta folosirea perechii de caractere // urmata de comentariu. In cazul in care comentariul contine mai multe linie, trebuie plasat intre /* care deschide zona de comentariu si */ care indica sfarsitul comentariului.
In cazul folosirii comentariilor cu // se pot adauga oricate slash-uri, minimul fiind de doua. Iata un exemplu in care puteti vedea cum pot fi adaugate comentariile: /* Comentariu, pe mai multe linii */ .nume_clasa { proprietate1:valoare1; proprietate2:valoare2; ... } // Comentariu pe o singura linie #div1 { proprietate1:valoare1; proprietate2:valoare2; ... }
Configurarea fonturilor
Alegerea potrivita a fonturilor si folosirea acestora in cadrul paginilor web este importanta, poate atrage critici si comentarii din partea vizitatorilor, mai ales daca formatarea clasica prin scris normal, aldin sau cursiv nu este folosita corespunzator. CSS include facilitati de control asupra aspectului fonturilor, prin posibilitatea de a stabili familia de fonturi, atributele ingrosat si inclinat, dimensiunea literelor precum si spatiul dintre linii. Exista cinci familii de fonturi de baza:
serif au un ornament (serif) plasat la terminatia literei, care ii ofera o distinctie speciala. Sunt folosite pentru tiparire, chiar daca textele sunt mai mari sau mai mici. Nu sunt indicate pentru afisarea textelor pe ecran. sans serif sunt fonturi care nu folosesc serife, fiind indicate pentru continut text general. monospace fonturile monospatiate pot avea serife, ele se deosebesc prin faptul ca fiecare litera ocupa aceeasi cantitate de spatiu. Sunt cele mai indicate pentru textele care trebuie citite cu exactitate, ca de exemplu liniile de program. cursive imita scrisul de mana, intr-o maniera stilizata. Sunt indicate in scopuri decorative, nefiind recomandate pentru scrierea unor texte mai lungi. fantasy nu se incadreaza in nici una dintre categoriile de mai sus, fiind fonturi care au un caracter predominant ornamental (reprezentand ilustratii sau pictograme).
1. Stabilirea fontului Fontul folosit pentru afisarea unui text poate fi stabilit prin proprietatea "font". Pentru definirea fontului in cadrul unei reguli, trebuie specificata, dupa selectorul din cadrul foii de stil, proprietateafont-family urmata de numele fontului sau a fonturilor (despartite prin virgula). Este bine ca numele fonturilor sa fie incadrate intre ghilimele simple sau duble, mai ales daca numele acestora contine spatii. Forma generala fiind urmatoarea:
selector { font-family:"nume_font1", "nume_font2", ..., nume_generic }
- Dupa ultima virgula se pot folosi urmatoarele nume generice de fonturi: "serif", "sans-serif", "cursive", "monospace" sau "fantasy". Includerea unei asemenea valori este optionala, insa recomandata. Iata un exemplu practic: h1 { font-family:"Arial", "Helvetica", sans-serif } Cand este specificata o lista de fonturi, navigatorul incearca sa foloseasca primul font din lista, daca nu este gasit parcurge lista pana in momentul in care intalneste un font instalat. Daca nu exista fonturi echivalente, textul va fi afisat cu fontul prestabilit de browser. Daca este specificat un nume generic, textul va fi afisat cu un font apartinand aceluiasi stil, in cazul in care fonturile specificate in lista nu sunt disponibile. Exista posibilitatea folosirii unei palete largi de fonturi in crearea paginilor web, nu doar a celor din lista limitata a fonturilor compatibile cu navigatoarele. Solutia consta in inglobarea fontului in cadrul paginii si trimiterea lui in mod automat in calculatorul vizitatorului, adica, descarcarea si folosirea lui automata. Pentru a ingloba un font intr-o pagina si a-l descarca, se foloseste intructiunea @font-face. Aceasta trebuie sa includa proprietatea font-family, urmata de numele fontului si apoi trebuie indicata locatia pe server de unde poate fi descarcat fontul respectiv. Codul CSS este urmatorul:
@font-face { font-family:nume_font src: url(locatie_font); }
Nu poate fi ales orice font pentru a fi descarcat, acesta trebuie sa respecte un anume format. Totusi, problema este ca nu exista un format valabil pentru toate navigatoarele, de exemplu Internet Explorer foloseste fonturi in format "eof" (obtinute cu ajutorul unui program numit WEFT), iar Mozilla foloseste un format "otf". 2. Stabilirea dimensiunii fontului Cu ajutorul CSS se poate stabili dimensiunea fontului folosind valori absolute (exprimate in diferite unitati de masura: pixeli, centimetri), procentuale, sau chiar relative. Pentru a defini dimensiunea fontului in cadrul unei reguli trebuie specificata proprietatea font-size urmata de o valoare a dimensiunii care poate lua una din urmatoarele tipuri de valori:

- unitate de masura - exprimata in pixeli, puncte, inci sau centimetri - expresie absoluta - xx-small, x-small, small, medium, large, x-large si xx-large - expresiile smaller sau larger, ca raport cu elementul parinte - procent - un numar exprimat in procente (cu %), care indica marimea textului in raport cu dimensiunea elementului parinte
Iata forma generala a codului CSS pentru stabilirea dimensiunii fontului:
selector { font-size:valoare }
Este bine ca pentru foile de stil care formateaza iesirea la imprimanta sa se foloseasca ca unitati de masura punctele, cm sau mm. Pixelii reprezinta, probabil, cea mai des utilizata unitate de masura pentru stabilirea dimensiunii fontului. Pixelii nu reprezinta o masura foarte sigura, dar, de obicei, pentru afisarea pe ecran, constituie o masura mai sigura decat dimensiunea in puncte. Iata un exemplu practic exprimat in pixeli: h1 { font-size:15px; } 3. Text inclinat Atributul "font-style" permite scrierea textelor inclinate in doua moduri: "cursiv" si "oblic". Notiunile pot fi confundate, insa cursivul se refera la versiunea unui font a carui caractere au o inclinare spre dreapta, iar oblicul este un font inclinat fortat spre dreapta. Pentru a crea caractere cursive in cadrul unei reguli trebuie precizata proprietatea font-style, astfel:
selector { font-style:valoare }
Unde "valoare" poate fi unul din urmatoarele cuvinte: normal, italic sau oblique Iata un exemplu: h1 { font-style:italic; } Valoarea normal se poate folosi pentru a sterge formatarea cu caractere inclinate atunci cand aceasta este mostenita. 4. Grosimea fontului Ingrosarea este una dintre metodele utilizate des pentru scoaterea in evidenta a unui text. CSS confera mai multa flexibilitate in utilizarea textului ingrosat decat elementul HTML <b>, prin posibilitatea introducerii unei valori proprietatii font-weight, dupa cum urmeaza:

bold scrie fontul folosind caractere ingrosate bolder - mareste grosimea fontului relativ la grosimea curenta lighter micsoreaza grosimea fontului fata de grosimea curenta - o valoare cuprinsa intre 100 si 900 (multiplu de 100) reprezinta valoarea ingrosarii, bazata pe versiunile alternative disponibile ale fontului normal elimina formatarea cu caractere aldine (ingrosate)
In cazul folosiri valorii cuprinse intre 100 si 900, 400 reprezinta valoarea corespunzatoare textului normal, iar 700 valoarea ingrosarii pentru stilul aldin. Majoritatea fonturilor nu dispun de noua ponderi, astfel ca daca este specificata o valoare care nu este disponibila, va fi folosita o alta pondere. Forma generala pentru stabilirea grosimii fontului este urmatoarea:
selector { font-weight:valoare }
Iata un exemplu practic: h1 { font- weight:bold; }
5. Majuscule mici Majusculele mici sunt folosite de obicei in cadrul titlurilor, ele fiind obtinute prin convertirea literelor mici in majuscule cu o dimensiune mai mica decat majusculelor normale. Astfel se obtin cuvinte in care toate literele sunt scrise cu majuscule insa prima litera este mai inalta decat celelalte. Stabilirea unei reguli pentru majuscule mici se realizeaza prin utilizarea proprietatii font-variant cu valoarea small-caps. Prin folosirea valorii normal, vor fi anulate celelalte valori mostenite ale proprietatii font-variant. Forma generala este urmatoarea:
selector { font-variant:valoare }
Iata cum formatam un text dintr-o eticheta "h1" cu valoarea "small-caps": h1 { font-variant:small-caps; } 6. Valori multiple pentru font Deseori este util sa fie precizate toate elementele fontului intr-o singura definitie. Pentru a se realiza acest lucru este folosita proprietatea "font" urmata de valorile pentru celelalte proprietati, separate prin spatiu. Sintaxa generala este urmatoarea:
selector { font:val_font-family val_font-style val_font-variant val_font-weight val_font-size val_height }
Daca o anumita valoare din lista este omisa, navigatorul va folosi valoarea prestabilita. Iata si un exemplu practic de folosire a mai multor valori in aceeasi definitie: h1 { font:"Arial",sans-serif italic small-caps bold 14pt; }
Configurarea textului
Textele alcatuiesc o buna parte din paginile web. Metodele de afisare a textelor prin controlul nu numai a fontului, dimensiunii si culorilor, ci si prin alte elemente, pot imbunatati aspectul pagini si pot atrage atentia asupra anumitor elemente din text. 1. Spatiul intre litere Spatierea se refera la cantitatea de spatiu dintre literele unui cuvant. Se poate aduaga sau reduce spatiul dintre litere folosind proprietatea letter-spacing, urmata de o valoare exprimata intr-o anumita unitate de masura, ce poate lua si valori negative. Sintaxa generala este urmatoarea:
selector { letter-spacing:valoare }
Daca valoarea proprietatii este normal sau 0 atunci spatierea va fi fixata la valorile implicite (fara modificari suplimentare).
Daca se utilizeaza o valoare exprimata in em atunci dimensiunea rezultata va fi calculata in raport cu cea a elementului parinte. Exemplu: h1 { letter-spacing:1,5em; } - Puteti folosi si pixeli (px) 2. Spatiul dintre cuvinte CSS da posibilitatea modificarii spatiului intre cuvinte atat prin marire, cat si prin micsorare. Spatiul dintre cuvinte poate fi modificat folosind proprietatea word-spacing, urmata de o valoare exprimata intr-o anumita unitate, fiind de obicei stabilita in pixeli. Pentru anularea spatierii intre cuvinte, valoarea proprietatii trebuie sa fie: normal. Sintaxa generala este urmatoarea:
selector { word-spacing:valoare }
O valoare pozitiva semnifica un plus de spatiu adaugat la valoarea implicita, iar o valoare negativa reduce acest spatiu. Daca valoarea este egala cu 0 atunci spatiul dintre cuvinte este fixat la valoarea prestabilita, neproducand de fapt nici un efect, fiind similar cu valoarea normal. Iata un exemplu in care marim spatiul intre cuvintele din eticheta "h2" cu 8 pixeli: h2 { word-spacing:8px; } 3. Spatiul intre linii Inaltimea randurilor se refera la spatiul dintre liniile paragrafului. Modificarea spatiului intre linii poate avea ca efect o mai buna si usoara citire a textului in cazul in care aceasta este mai mare (creaza o regiune cu spatiu intre liniile de text). Alteori, daca inaltimea este mai mica (folosita la randurile de titlu), poate conferi un aspect mai stilat. Pentru a modifiica inaltimea randurilor se foloseste proprietatea line-height, urmata de o valoare care poate fi exprimata in trei moduri:

- un numar care inseamna multiplicarea dimensiunii fontului cu numarul respectiv pentru a obtine valoarea spatierii; - o valoare de tip absolut, exprimata in pixeli, puncte sau orice alta unitate de masura folosita in CSS, care indiferent de dimensiunea stabilita a fontului, inaltimea liniei va avea o valoare exacta; - un procent, care stabileste inaltimea liniei ca fiind egala cu un anumit procent din dimensiunea fontului folosit pentru scrierea textului.
Sintaxa generala pentru modificarea spatiului intre linii este:
selector { line-height:valoare }
Iata un exemplu in care marim inaltimea liniei cu 50% din dimensiunea fontului: h1 { line-height:150%; }
Inaltimea liniei poate de asemenea fi definita si in cadrul proprietatii "font-size", prin introducerea caracterului "/" urmat de valoarea pentru inaltimea randului, imediat dupa dimensiunea fontului. Exemplu: h1 { font-size:12px/28px; } 4. Marimea (tipul) literelor Exista cazuri in care se doreste afisarea textului cu un anume tip de litere. Folosind CSS, se poate specifica explicit ca textul sa apara cu majuscule initiale, majuscule, minuscule, combinat sau asa cum a fost el scris. Cu ajutorul proprietatii text-transform se poate controla marimea literelor din text, indiferent de modul cum a fost el scris initial. Pentru a schimba tipul literelor dintr-un text, proprietatea text-transform va fi urmata de o valoare care poate fi:

capitalize pentru ca primul caracter din fiecare cuvant sa fie scris cu majuscula; uppercase pentru ca toate caracterele sa fie scrise cu majuscule; lowercase - pentru ca toate caracterele sa fie scrise cu litere mici; none pentru ca textul sa fie afisat asa cum este.
Sintaxa generala este:
selector { text-transform:valoare }
Iata un exemplu in care toate literele vor fi afisate cu majuscule: h1 { text-transform:uppercase; } Proprietatea "text-transform" este utila atunci cand textele sunt create in mod dinamic (de exemplu, in cazul in care ele provin dintr-o baza de date sau form HTML). 5. Alinierea textului Un text poate fi aliniat de la marginea din stanga, din dreapta, centrat sau la ambele margini (stangadreapta). Proprietatea text-align ofera posibilitatea controlului asupra alinierii textului. Definirea alinierii se face specificand dupa proprietatea text-align una din valorile: left, right, centersau justify. Forma generala este:
selector { text-align:valoare }
Proprietatea poate fi aplicata numai elementelor la nivel de bloc (DIV, UL, Hx, p), valoarea sa implicita fiind in majoritatea cazurilor stabilita la valoarea "left". Iata un exemplu in care textul din eticheta "h2" este aliniat "stanga-dreapta": h2 { text-align:justify; } - In cazul in care alinierea textului este "stanga-dreapta", spatierea cuvintelor si a literelor se schimba pentru a se obtine linii de aceeasi lungime. 6. Alinierea pe verticala a textului
Cu ajutorul proprietatii vertical-align se poate preciza pozitia unor elemente (in linie) in raport cu textul din jurul lor. Asta inseamna ca proprietatea poate fi folosita doar cu etichete in linie care nu determina un salt la linie noua, de obicei utilizandu-se cu eticheta "span". Sintaxa pentru utilizarea proprietatii vertical-align este:
selector { vertical-align:valoare }
Pentru definirea alinierii pe verticala a textului se foloseste una din urmatoarele optiuni:

super pentru scrierea textului in stil exponent, deasupra liniei de baza; sub - pentru scrierea textului in stil indice, sub linia de baza; baseline pentru scrierea textului pe linia de baza; - una din valorile: "top", "middle", "bottom", "text-top", "text-bottom" pentru a alinia textul relativ la alinierea parintelui acestuia; - valoare procentuala care ridica sau coboara linia de baza a elementului proportional cu dimensiunea fontului elementului parinte.
Iata un exemplu in care textul din eticheta <span> va aparea ca exponent fata de textul din stanga-dreapta lui: span { vertical-align:super; } 7. Formarea paragrafelor Cu ajutorul proprietatii text-indent se poate stabili ce spatiu suplimentar este inserat la inceputul primei linii de text dintr-un paragraf. Pentru aceasta, proprietatea text-indent este urmata de o valoare exprimata intr-o unitate de masura (pixeli sau em) sau in procente (proportional cu latimea paragrafului). Sintaxa generala este:
selector { text-indent:valoare }
Valorile pozitive determina o indentare tipica (spre dreapta), in timp ce valorile negative determina o indentare inspre argine, fiind necesar sau marirea umplerii (padding) sau marirea marginilor. Iata un exemplu de cod CSS in care va fi determinat un spatiu de 20 pixeli la inceputul paragrafului din eticheta <p>: p { text-indent:20px; } Daca se utilizeaza o valoare exprimata in unitati "em", atunci rezultatul va fi relativ la dimensiunea fontului elementului asupra caruia se aplica. Pentru eliminarea decalarii se utilizeaza valoarea 0. 8. Aplicarea elementelor decorative CSS permite ornarea textului prin scoaterea lui in evidenta in patru moduri: subliniere, supraliniere, taierea textului cu o linie sau crearea de texte care clipesc. Aplicarea de elemente ornamentale unui text se realizeaza prin proprietatea text-decoration, urmata de una din valorile:

underline pentru a sublinia textul overline pentru a trasa o linie deasupra textului line-through pentru a taia textul cu o linie
blink pentru a face textul sa apara si dispara intermitent
Forma generala este :
selector { text-decoration:valoare }
Pentru a elimina decoratiile se foloseste valoarea "none". Prin folosirea acestei valori se elimina si sublinierile link-urilor, chiar daca navigatorul are prestabilit sa le arate subliniat. Iata un exemplu de cod in urma caruia link-urile nu vor mai fi afisate subliniat: a:link { text-decoration:none; }
Elementul decorativ "blink" a prezentat probleme, fiind de curand eliminat de unele navigatoarelor. 9. Spatiile albe Intreruperile de linie si spatiile albe dintr-un document HTML sunt tratate ca un singur spatiu sau sunt ignorate, daca nu este utilizata eticheta <pre>. CSS permite afisarea acestor spatii, precum si a intreruperilor textului, utilizand proprietatea white-space, urmata de valoarea "pre". Forma generala este:
selector { white-space:valoare }
In locul cuvantului "valoare" poate fi adaugat: "pre", "nowrap" sau "normal" Utilizarea valorii "nowrap" impiedica trecerea la linia urmatoare. Valoarea "normal" permite navigatorului sa decida asupra modului de tratare a spatiilor. De obicei, acestea vor fi transformate intr-un singur spatiu. Iata un exemplu in urma caruia spatiile albe si trecerea la linia noua vor fi afisate asa cum au fost scrise: p { white-space:pre; } Spre deosebire de eticheta <pre> care schimba fontul cu unul monospatiat, valoarea "pre" a proprietatii white-space nu are nici un efect asupra fontului elementului la care se aplica.
Configurari pentru culori si fundal

Daca HTML permitea configurarea unor culori si elemente grafice de fundal doar pentru anumite elemente, CSS permite definirea culorii si a fundalului pentru orice element din pagina web. 1. Configurarea fundalului Se poate schimba fundalul (background) intregii pagini, sau pentru un anumit element din pagina, fie el de tip DIV, paragraf, imagine, tabel sau formular. a) Culoarea fundalului Pentru a schimba culoarea fundalului se utilizeaza proprietatea background-color, urmata de o valoare care
reprezinta numele culorii sau valoarea RGB, exprimata in cod hexa. Sintaxa generala este:
selector {background-color:valoare }
Daca se foloseste valoarea "transparent" navigatorul va afisa culoarea prestabilita sau cea a elementului parinte. Pentru schimbarea fundalului intregii pagini se aplica aceasta proprietate selectorului "body". Iata un exemplu in care culoarea de fundal a paginii este schimbata in albastru: body { background-color:#0000ff; } b) Imaginea de fundal Puteti utiliza pentru fundal si o imagine, pentru aceasta se foloseste proprietatea background-image, urmata de adresa URL a locatiei imaginii. Sintaxa generala este:
selector { background-image:url('adresa_URL'); }
Unde "adresa_URL" este calea si numele imaginii care va fi folosita Daca in locul adresei URL se foloseste valoarea "none", navigatorul nu va folosi nici o imagine. Iata un exemplu in care pentru fundalul paginii este folosita o imagine: body { background-image:url('cale/imagine.gif'); } c) Repetarea imaginii de fundal Pe langa posibilitatea afisarii unui element grafic ca fundal, CSS ofera si un mod de repetare a acestuia. Pentru a repeta imaginea de fundal se foloseste proprietatea background-repeat, urmata de o valoare care poate avea una din urmatoarele optiuni:

repeat pentru a repeta imaginea pe toata suprafata elementului respectiv; repeat-x pentru a repeta imaginea numai pe orizontala; repeat-y pentru a repeta imaginea numai pe verticala; no-repeat pentru a afisa imaginea o singura data, fara repetare.
Forma generala este:
selector { background-repeat:valoare }
Iata un exemplu de cod in care imaginea folosita pentru fundalul paginii se va repeta pe verticala pe toata inaltimea documentului: body { background-repeat:repeat-y; } d) Controlul imaginii de fundal CSS poate defini modul de tratare a fundalului la derularea paginii, pentru aceasta se foloseste proprietateabackground-attachment cu optiunea "fixed", pentru a lipi imaginea de fundal de fereastra navigatorului sau optiunea "scroll", pentru a permite derularea imaginii de fundal alaturi de elementul
corespunzator atunci cand vizitatorul deruleaza pagina. Sintaxa generala este:
selector { background-attachment:valoare }
Iata un exemplu practic aplicat imaginii folosita pentru fundalul paginii: body { background-attachment:scroll; } e) Pozitia imaginii de fundal Pentru a pozitiona imaginii de fundal in functie de coltul din stanga-sus al elementului se utilizeaza proprietateabackground-position urmata de doua valori (coordonate x si y) separate prin spatiu, 'x' pentru pozitia orizontala si 'y' pentru cea verticala. Forma generala a acestei proprietati este:
selector { background-position:valoare }
Coordonatele x si y pot fi exprimate ca valori absolute sau ca procente. Se pot folosi si cuvintele cheie: "left", "center" sau "right" pentru coordonata x; respectiv "top", "center" sau "bottom" pentru coordonata y. Iata un exemplu in care imaginea de fundal a paginii este pozitionata la 10 pixeli (x si y) relativ la coltul din stanga-sus: body { background-position:10px 10px; } f) Stabilirea simultana a proprietatilor fundalului Toate proprietatile fundalului pot fi configurate cu ajutorul proprietatii background. Se poate stabili simultan printr-o lista de valori proprietatile fundalului, enumerate in orice ordine si separate prin spatiu. Cand se utilizeaza proprietatea background, nu este necesar sa fie specificate toate proprietatile, cele nespecificate fiind stabilite la valoare lor implicita. Sintaxa generala este:
selector {background:val_bg-color val_bg-img val_bg-repet val_bg-attach val_bg-position }
Valoarea implicita a proprietatii background-color este "transparent". Valoarea implicita a proprietatii background-image este "none". Valoarea implicita a proprietatii background-attachment este "scroll". Valoarea implicita a proprietatii background-position este "top left". Iata si un exemplu in care sunt aplicate mai multe proprietati pentru background, in aceeasi definitie: div { background:#e8e8fe url('imagine.jpg') 50% repeat } - DIV-ul va avea culoarea de fndal "#e8e8fe", cu o imagine pozitionata la jumatatea distantei X, Y si care se repeta. 2. Stabilirea culorii din prim -plan Proprietatea color poate schimba culoare oricarui element, fie el text, linie orizontala sau element de tip formular. Sintaxa generala pentru utilizarea acestei proprietati este:
selector { color:valoare }
Valoarea culorii poate fi:

numele culorii - una din cele 16 culori predefinite (red, green, blue, white, silver, ...) valoare in hexa - sub forma #rrggbb valoare RGB - sub forma rgb(r, g, b), unde r, g, b pot fi reprezentate prin numere intregi cuprinse intre 0 si 255 sau procente de rosu, verde si albastru cu valori intre 0% si 100%.
Iata un exemplu de cod CSS in care culoarea textului din eticheta "h3" este definita verde: h3 { color:green; } - Pentru o lista cu mai multe culori specifice, vizitati pagina: Lista coduri culori
Controale pentru chenare si afisarea elementelor

Indiferent daca o eticheta este de sine statatoare sau imbricata in alte etichete, aceasta poate fi tratata ca un element distinct pe ecran si poate fi controlata prin intermediul CSS. Orice element creat intr-o foaie de stil este prezentat in propriul lui cadru. Notiunea de element se refera la componentele unui document HTML, configurate prin intermediul etichetelor HTML. Caseta (cadrul elementului) dispune de numeroase proprietati, intre care se numara: marginile, chenarul, completarea (umplerea, cunoscuta ca "padding"), latimea si inaltimea, care pot fi modificate cu ajutorul CSS. Elementele HTML au patru laturi (sus, dreapta, jos si stanga) la care se pot aplica proprietatile CSS specifice, restul proprietatilor CSS (font, text, culoare, fundal) se aplica in continutului casetei. Continutul poate include texte, liste, formulare sau imagini. 1. Latimea si inaltimea unui element Latimea si inaltimea elementelor pot fi specificate cu ajutorul proprietatilor width si height. In mod prestabilit acestea sunt determinate automat de catre navigator, fiind egale cu necesarul afisarii intregului continut. Pentru definirea latimii si inaltimii se folosesc urmatoarele tipuri de valori:

- o valoare de tip numeric, de obicei in pixeli; - un procent, care stabileste o valoare proportionala in functie de cea a elementului parinte; - valoarea auto, care foloseste latimea si inaltimea calculata de navigator, si care reprezinta cantitatea de spatiu maxim pe care o poate ocupa elementul pentru afisarea intregului continut.
Sintaxa generala pentru configurarea latimii si inaltimii este:
selector { width:valoare; height:valoare }
Iata un exemplu in care elementul cu id="un_id" va avea latimea de 300 pixeli si inaltimea de 500 pixeli: #un_id { width:300px; height:500px; }
2. Marginile unui element Proprietatea margin permite stabilirea distantei dintre un element si alte elemente alaturate, prin specificarea unei valor pentru marginea din fiecare latura (sus, dreapta, jos, stanga). Daca specificati cele 4 valori in aceeasi definitie, acestea reprezinta marginile elementului in urmatoarea ordine: sus, dreapta, jos, stanga. Daca specificati doar o valoare, aceasta va fi aplicata tuturor marginilor. In cazu in care specificati doua sau trei valori, atunci valorile care lipsesc sunt copiate dupa valorile marginilor opuse. Sintaxa generala pentru configurarea marginilor unui selector este:
selector { margin:valoare/valori; }
Tipul de valoare folosit poate avea urmatoarele optiuni:

- o valoare de tip lungime (numerica) care poate fi si negativa; - o valoare procentuala (procent) creaza o margine proportionala cu latimea elementului parinte; - valoarea auto lasa controlul marginilor la decizia navigatorului.
Iata un exemplu in care etichetele DIV vor avea distanta pentru marginea de sus 10 pixeli, dreapta 5 pixeli, jos 8 pixeli si in stanga 15 pixeli: div { margin:10px 5px 8px 15px; } Exista posibilitatea de a stabili valoarea marginii doar pentru o singura latura, fara a tine cont de celelalte margini. Pentru aceasta sunt folosite proprietatile margin-top, margin-bottom, margin-left si margin-right cu aceleasi valori ca si in cazul proprietatii margin, dupa cum puteti vedea mai jos.
selector { margin-top:valoare; } selector { margin-bottom:valoare; } selector { margin-left:valoare; } selector { margin-right:valoare; }
3. Chenarul unui element Proprietatea border permite stabilirea simultana a atributelor chenarului pentru toate cele patru laturi ale casetei. Aceasta foloseste 3 valori distincte, pentru a configura latimea (grosimea), stilul si culoarea liniei bordurii. Sintaxa generala pentru definirea chenarului este:
selector { border:val_grosime val_stil val_culoare; }
Unde
- prima valoare (val_grosime) reprezinta grosimea chenarului si poate fi una din urmatoarele tipuri:
- o valoare de tip lungime (valoarea 0 determina anularea afisarii chenarului); - un cuvant cheie (thin, medium, thick) care caracterizeaza o dimensiune relativa. - a doua valoare (val_stil) reprezinta numele stilului atribuit chenarului (valoarea "none" anuleaza afisarea chenarului); - ultima valoare (val_culoare) reprezinta culoarea, exprimata in cod hexa sau valoare RGB.
Iata un exemplu in care div-urile vor avea o bordura groasa de 1 pixel, solid si culoare albastra: div { border:1px solid blue; } - Pot fi folosite si proprietati separate pentru fiecare: "border-width", "border-style" si "border-color"; prezentate in continuare. Un atribut care poate fi folosit in configurarea chenarului este border-width, acesta furnizeaza o metoda rapida pentru stabilirea latimii celor patru laturi din jurul unei casete. Sintaxa generala este:
selector { border-width:valoare; }
Daca specificati toate cele patru valori, ele sunt aplicate in ordinea: sus, dreapta, jos, stanga. Daca specificati doar o valoare, ea va fi aplicata tuturor marginilor. Daca folositi doua sau trei valori, valorile care lipsesc sunt copiate din valorile marginilor opuse lor in caseta. Aspectul bordurii poate fi stabilit prin atributul border-style; stilul este aplicat celor patru margini si este definit astfel:
selector { border-style:valoare; }
Pentru specificarea valorii, pot fi folosite urmatoarele tipuri:
Ultimele patru valori sunt reprezentate tridimensional, iar in cazul in care ele nu sunt acceptate de catre navigator, in locul lor se va folosi valoarea cu linie plina. Un alt atribut care poate fi utilizat in configurarea chenarului este border-color, acesta stabileste culoarea pentru toate cele patru laturi ale chenarului si foloseste pentru valoarea ei un singur cuvant cheie exprimat in
cod hexa, valoare RGB sau numele culorii. Sintaxa generala este:
selector { border-color:valoare; }
Puteti stabili culoarea fiecarei margini si separat, folosind proprietatile:
border-top-color, border-right-color, border-bottom-color si border-left-color
Fiecare latura a chenarului poate avea valori configurate in mod separat (prin care se stabilesc stilul si culoarea fiecarei borduri din jurul elementului) dupa cum este prezentat mai jos:
selector { border-top:grosime stil culoare; } selector { border-bottom:grosime stil culoare; } selector { border-left:grosime stil culoare; } selector { border-right:grosime stil culoare; }
4. Adaugarea spatiului in interior, in jurul elementului Proprietatea padding adauga o cantitate de spatiu suplimentar in jurul continutului elementului, in interiorul chenarului, intre bordura si continut. Forma generala pentru utilizarea acestei proprietati este:
selector { padding: valoare/valori; }
Valoarea pentru completarea spatiului poate fi una din urmatoarele:

- o valoare de tip lungime - o valoare procentuala creaza umplerea in raport cu latimea elementului parinte.
Cand specificati toate cele patru valori, ele sunt aplicate in ordinea: sus, dreapta, jos, stanga. Daca specificati doar o valoare, aceasta va fi aplicata tuturor celor patru directii. Daca specificati doua sau trei valori, atunci valorile care lipsesc sunt copiate dupa valorile laturilor opuse. Iata un exemplu in care etichetele DIV vor avea distanta padding: sus 4 pixeli, dreapta 2 pixeli, jos 3 pixeli si in stanga 2 pixeli: div { padding:4px 2px 3px 2px; } Fiecare latura a chenarului poate avea proprietatea padding configurata separat:
selector { padding-top:valoare; } selector { padding-bottom:valoare; } selector { padding-left:valoare; } selector { pading-right:valoare; }
5. Elemente float
CSS ofera posibilitatea de a "infasura" anumite elemente in jurul altora. Acest lucru se face prin intermediul proprietatii float, care determina o mutare fortata a elementului in directia data de valoarea mentionata, lasand loc liber in spatiul opus directiei, care va fi ocupat de urmatorul element din codul HTML. Sintaxa generala pentru utilizarea acestei proprietati este:
selector { float:valoare; }
Unde "vaoare" poate fi" left, right si none Valoarea "none" permite elementului sa fie plasat acolo unde este posibil, iar celelalte valori forteaza plasarea elementului in stanga sau in dreapta ecranului, textul din exteriorul etichetei HTML respective va fi plasat in partea opusa, in jurul elementului. Iata un exemplu in care elementul cu id="un_id" va fi fortat sa fie pozitionat in dreapta celorlaltor elemente: #un_id { float:right; } 6. Anularea plasarii unui element in spatiul eliberat de "float" Asemanator cu actiunea etichetei HTML <br>, care trece pe un nou rand elementele ce o preced, este si proprietateaclear. Cu ajutorul acesteia se poate anula ocuparea unui spatiu care a fost lasat liber de un element care utilizeaza proprietatea "float". Sintaxa generala pentru utilizarea proprietati clear:
selector { clear:valoare; }
Unde "valoare" specifica latura in jurul careia este interzisa infasurarea textului si poate lua valoarea: left, right sauboth. Se poate folosi si valoarea "none", ceea ce are ca efect anularea altor atribute ale proprietatii clear. De exemplu, daca aveti un DIV pozitionat fortat in dreapta, un paragraful care urmeaza dupa el va fi afisat in stanga DIV-ului respectiv. Pentru a anula acest lucru, ca paragraful sa fie afisat sub DIV, se foloseste proprietatea "clear", precum in exemplul urmator: #un_div { float:right; } p { clear:both; } 7. Afisarea si ascunderea elementelor Proprietatea display poate stabili daca un element va fi de tip block, incluzand linii noi deasupra si dedesubtul sau, daca este inclus in linie, daca este tratat sub forma de lista sau daca elementul este afisat sau nu. Sintaxa generala pentru aceasta proprietate este:
selector { display:valoare; }
Unde "valoare" poate fi una din urmatoarele optiuni:

list-item plaseaza in prima linie a textului un indicator pentru articole de tip lista, dar si un salt deasupra si dedesubtul articolului; block defineste eticheta ca fiind de tip bloc si plaseaza un salt la linie noua deasupra si dedesubtul ei; inline defineste eticheta ca o eticheta in linie si elimina caracterele de salt la linie noua;
none determina ascunderea elementului si neafisarea lui de catre navigator; codul acestuia este incarcat insa continutul sau nu e afisat in pagina.
Iata un exemplu in care elementele <li> sunt asezate in linie, iar un element cu id="un_id" va fi ascuns in pagina: li { display:inline; } #un_id { display:none; }
Proprietatea display nu trebuie confundata cu visibility. Spre deosebire de visibility care nu afiseaza elementul dar lasa liber spatiu pentru element, sintaxa display: none elimina complet elementul din pagina.
Controale de pozitionare
Pozitionarea elementelor folosind CSS este mai precisa decat prin intermediul obiectelor grafice HTML sau a tabelelor, afisarea facandu-se mult mai rapid. Prin intermediul CSS este permisa pozitionarea exacta sau relativa a elementelor intr-o fereastra sau in raport cu alte elemente. Fereastra navigatorului este suprafata in care sunt afisate toate elementele. Ea poate fi redimensionata sau pozitionata pe ecran, sau poate fi divizata in alte ferestre prin intermediul cadrelor. Toatele elementele amplasate in fereastra sunt pozitionate relativ la coltul din stanga-sus. 1. Stabilirea modului de pozitionare Prin utilizarea proprietatii position se poate specifica pozitia elementului in pagina web. Un element poate avea una din urmatoarele valori de pozitionare: static, relative, absolut si fixed. Tipul de pozitie indica navigatorului cum sa trateze amplasarea unui element intr-o fereastra. a) Pozitionarea statica Valoarea initiala, prestabilita, a pozitionarii elementelor in fereastra este "static". Cand nu este specificata o pozitionare "relativa", "absoluta" sau "fixa"; elementele sunt dispuse unul dupa altul in interiorul documentului. Sintaxa pentru specificarea pozitionarii static este:
selector { position:static }
- Un element static nu poate fi repozitionat in mod explicit. b) Pozitionarea relativa Un element cu pozitionare "relativa" este amplasat la locul sau in cadrul ferestrei sau a elementului parinte, in sensul ca el apare dupa toate elementele dinaintea sa, respectiv inaintea tuturor elementelor amplasate dupa el. Sintaxa pentru specificarea pozitionarii relative este:
selector { position:relative }
- Elementele pozitionate relativ pot fi mutate din locatia lor folosind proprietatile "top" si "left" sau "bottom" si "right". c) Pozitionarea absoluta Pozitionarea absoluta are ca efect crearea unui element neafectat de restul documentului, plasarea lui in fereastra fiind facuta intr-o locatie precisa, definita prin intermediul coordonatelor x si y, indiferent de pozitiile altor elemente. Sintaxa pentru specificarea pozitionarii absolute este:
selector { position:absolute }
- Originea (punctul de coordonate 0,0) este coltul din stanga-sus al ferestrei sau al obiectului in care este inclus elementul pozitionat absolut. d) Pozitionarea fixa Pozitionarea fixa a unui element este aproximativ la fel cu cea absoluta, cu diferenta ca la derularea paginii elementul fixat ramane pe pozitia lui initiala, fara a se derula. Sintaxa pentru specificarea pozitionarii fixed este:
selector { position:fixed }
2. Pozitionarea in raport cu latura de sus, respectiv stanga Dupa stabilirea tipului de pozitionare, se poate determina distanta intre punctul de origine si laturile de sus si din stanga ale elementului sau parinte, folosind proprietatile top si left Forma generala este:
selector { top:valoare; left:valoare; }
- Unde "valoare" poate fi:

- o valoare de tip numeric, care defineste distanta dintre laturile ferestrei sau a elementului parinte si laturile elementului; - o valoare procentuala, care semnifica deplasarea fata de laturile ferestrei sau a elementului parinte; - valoarea auto, care permite navigatorului sa calculeze el insusi valoarea.
Pot fi utilizate proprietatile top si left sau bottom si right, de asemenea pot lua si valori negative. In cazul in care este vorba despre elemente imbricate, acestea vor fi deplasate solidar cu elementul parinte daca acesta are position:relative. Iata un exemplu in care o eticheta <h1> este pozitionata la o distanta de 10 pixeli fata de marginile sus si stanga ale unui DIV in interiu caruia se afla: <style type="text/css"> div { position:relative; } h1 { top:10px; left:10px; }
</style> <div> <h1>Text...</h1> </div> 3. Pozitionarea in raport cu latura de jos, respectiv dreapta In unele cazuri este necesara pozitionarea in raport cu laturile de jos, respectiv dreapta. In acest caz originea va fi coltul din dreapta-jos al ferestrei sau al elementului parinte. Definirea marginilor fata de latura de jos, respectiv din dreapta se face cu ajutorul proprietatilor bottom si right; ele pot lua aceleasi valori ca si "left" si "top", de asemenea pot fi combinate cu acestea. Forma generala este:
selector { bottom:valoare; right:valoare; }
In cazul in care pentru acelasi element sunt stabilite atat marginile "top / left" cat si "bottom / right", rezultatul afisat depinde de navigator, dar in mod prestabilit se folosesc pozitiile top si left. 4. Pozitionarea in spatiul 3D Elementele pot primi o a treia dimensiune, si anume asezarea lor in stiva, unele in raport cu altele. Amplasarea se face in mod automat, incepand cu valoarea 0 si continuand prin incrementare cu o unitate, in ordinea aparitiei lor in documentul HTML si relativ la elementele parinte. Pentru pozitionarea elementelor in stiva unele peste altele se foloseste proprietatea z-index. Valoarea acestei proprietati fiind relatia tridimensionala a elementului in raport cu alte elemente din fereastra. Sintaxa generala pentru proprietatea z-index este:
selector { z-index:valoare; }
Unde "valoare" este un numar intreg, pozitiv, 0 sau negativ. In cazul in care continutul elementelor se suprapune, elementul cu numarul de ordine mai mare apare deasupra elementului cu numar mai mic. Utilizarea unei valori negative determina amplasarea elementului dedesubtul parintelui sau cu atatea niveluri cu cate indica indexul z. 5. Includerea unui element absolut intr -un element relativ Un element poate fi pozitionat exact in cadrul unei ferestre, sau el poate fi inclus intr-un element cu pozitionare relativa. In cazul includerii unui element pozitionat absolut intr-un element pozitionat relativ, elementul absolut este pozitionat folosind ca origine coltul din stanga-sus al elementului relativ. Iata un exemplu de cod HTML in care o eticheta <div> (cu class="absolut") este inclusa (imbricata) in alta eticheta <div> (cu class="relativ"): <div class=relativ> ...
<div class=absolut> ... </div> ... </div> Pentru a face o pozitionare absoluta a elementului inclus (care are class="absolut") in elementul parinte (care are class="relativ"), caruia ii definim o pozitionare relativa; scriem in foaia de stil urmatorul cod: .relativ {position:relative; top:30px; left:50px; } .absolut {position:absolute; top:15px; left:0px; } 6. Includerea unui element relativ intr -un element absolut Cand un element pozitionat absolut este inclus intr-un element pozitionat relativ, primul foloseste ca origine coltul din stanga-sus al parintelui. In cazul in care un element pozitionat relativ este plasat in interiorul unui element pozitionat absolut, acesta se va deplasa o data cu elementul absolut. Iata un exemplu de cod HTML in care o eticheta <div> (cu class="relativ") este inclusa (imbricata) in alta eticheta <div> (cu class="absolut"): <div class=absolut> ... <div class=relativ> ... </div> ... </div> Pentru a face o pozitionare relativa a elementului inclus (care are class="relativ") in elementul parinte (care are class="absolut"), caruia ii definim o pozitionare absoluta; adaugam in foaia de stil urmatorul cod: .absolut {position:absolute; top:20px; left:25px; } .relativ {position:relative; top:10px; left:5px; } Configurari
pentru vizibilitate si
mouse
CSS ofera posibilitatea de a afisa sau ascunde unele elemente sau parti ale unor elemente. 1. Stabilirea vizibilitatii unui element Proprietatea visibility poate controla faptul ca un element sa fie vizibil sau nu. Chiar daca elementul este invizibil, el va ocupa un spatiu liber in pagina, acolo unde ar fi trebuit sa fie afisat. Sintaxa pentru folosirea acestei proprietati este urmatoarea:
selector { visibility:valoare }
Unde "valoare" poate fi:

hidden ascunde elementul de la afisarea pe ecran; visible afiseaza elementul; inherit vizibilitatea elementului este mostenita de la elementul parinte.
Iata un exemplu in urma caruia textul din interiorul etichetei <h1> va fi invizibil: h1 { visibility:hidden; }
Pentru a ascunde complet afisarea unui element in pagina, se poate utiliza formula display:none; 2. Stabilirea suprafetei vizibile a unui element Definirea suprafetei vizibile a unui element stabileste portiunea din elementul respectiv care este vizibila in fereastra navigatorului. Restul continutului acelui element nu dispare, ci este invizibil pentru vizitator. Pentru a defini forma regiunii vizibile se foloseste proprietatea clip cu valoarea rect (definita prin patru valori separate prin spatii si incadrate de paranteze rotunde) Forma generala este:
selector {clip:rect(val1 val2 val3 val4); }
- Valorile construesc un patrulater, definesc distanta dintre coltul din stanga-sus al elementului si laturile de sus, dreapta, jos si stanga ale regiunii vizibile. Iata un exemplu de cod CSS in care suprafata vizibila a unui element cu id="viz" va fi cea incadrata de valorile atributuluirect: #viz { clip: rect(25 300 125 100); } Daca se foloseste valoarea "auto", navigatorul calculeaza dimensiunea regiunii vizibile la 100%. Regiunile de vizibilitate pot avea doar forma dreptunghiulara. 3. Definirea pozitiei depasirii Uneori elementele nu sunt in totalitate continute in casetele lor, caseta nefiind suficient de mare, astfel ca o parte a continutului nu este afisata sau depaseste marginea stabilita. Proprietatea overflow permite tratarea continutului in exces, controland astfel modul de afisare sau nu al acesuia. Forma generala a proprietatii overflow este:
selector { overflow:valoare; }
- Unde "valoare" stabileste unde va fi plasata depasirea, folosind una din valorile:

visible extinde caseta elementului astfel incat sa incapa tot continutul sau, ignorand delimitarea suprafetei vizibile. Este optiunea prestabilita. hidden ascunde continutul care nu incape in caseta elementului, si impiedica aparitia barei de derulare. scroll adauga intotdeauna bare de derulare elementului, pentru ca sa se poata accesa tot continutul elementului. auto barele de derulare apar doar atunci cand este necesar.
Iata un exemplu in care toate elementele cu class="extradim" vor avea bare de scroll: .extradim { overflow:scroll; } Pentru definirea proprietatii "overflow" doar pentru una din directii: orizontala sau verticala; adica bara de
derulare sa fie disponibila sau nu doar pentru una din aceste directii, se poate folosi o alta varianta a acestei proprietati, si anume:

overflow-x:valoare - pentru orizontala overflow-y:valoare - pentru verticala
- Unde "valoare" poate fi una din valorile prezentate mai sus. 4. Aspectul indicatorului de mouse In mod normal, aspectul indicatorului de mouse este determinat de browser. Navigatorul modifica indicatorul de mouse in functie de continutul deasupra caruia se afla acesta. Uneori este dorita anularea sau completarea preferintelor navigatorului si configurarea unor aspecte personalizate. Proprietatea cursor ajuta la stabilirea aspectului unui indicator de mouse. Sintaxa este urmatoarea:
selector { cursor:valoare; }
Unde "valoare" poate avea urmatoarele nume pentru indicatoarele de mouse:
- Daca se foloseste valorea "auto", navigatorul decide asupra tipului de indicator folosit.
Pseudo-clase
Pseudo-clasele permit adaugarea de stiluri CSS doar la anumite elemente ale aceluiasi selector, id sau clasa. De exemplu, cand definiti un stil pentru un anumit tag HTML sau pentru o clasa, continutul din toate aceleasi
tag-uri sau aceeasi clasa vor avea acel stil, iar daca doriti sa definiti un stil diferit pentru primul (sau ultimul) din acele tag-uri ori pentru primul continut definit de aceeasi clasa, puteti realiza asta folosind pseudoclasele. De asemenea, acestea pot modifica stilul grafic al elementelor cand mouse-ul actioneaza asupra lor. Pentru a functiona in Internet Explorer 7+ este necesar declararea <!DOCTYPE>, care se adauga la inceputul documentului HTML, mai multe detalii (in engleza) gasiti Aici. Sintaxa pentru utilizarea pseudo-clasei este urmatoarea: element:pseudo-clasa { proprietate:valoare; } - unde "element" este un selector, id sau clasa, iar "pseudo-clasa" este una din expresiile urmatoare:

active - Adauga un stil unui element cand acesta este activat (actionat prin click pe el) first-child - Adauga un stil unui element care este primul din acel tip de elemente focus - Folosit pentru input-urile de formulare, le adauga un stil cand acestea sunt active (dupa click si cursorul de text in ele) hover - Adauga un stil unui element cand mouse-ul se afla deasupra lui lang(cuvant) - Adauga un stil unui element care are atributul lang="cuvant" (nu e suportat de Safari si IE mai mic de 8) last-child - Adauga un stil unui element care este ultimul din acel tip de elemente link - Adauga un stil unui link nevizitat visited - Adauga un stil unui link vizitat
Ca sa intelegeti mai bine cum functioneaza si ce fac pseudo-clasele, studiati exemplele care sunt prezentate in continuare. 1. Pseudo-clase cu selector Selectoarele fac referire la tag-urile HTML pe care le denumesc (de ex.: p pentru <p>, li pentru <li>, div pentru <div>, etc.). In exemplul urmator este folosit "first-child" pentru paragraf: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Pseudo-clase - Ex. 1</title> <style type="text/css"> p:first-child { color:blue; } </style> </head> <body> <p>Un text din primul paragraf</p> <p>Continut din al doilea paragraf</p> <p>Textul din al treilea paragraf</p> </body> </html> - Rezultatul va fi urmatorul, primul paragraf va avea textul albastru.
Un text din primul paragraf Continut din al doilea paragraf Textul din al treilea paragraf
Iata si un exemplu cu "hover" pentru <li> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Pseudo-clase - Ex. 2</title> <style type="text/css"> li:hover { background-color:#88fe88; } </style> </head> <body> <ul> <li>Text list 1 ...</li> <li>Text list 2 ...</li> <li>Text list 3 ...</li> </ul> </body> </html> - Cand pozitionati mouse-ul deasupra fiecarui LI, acesta va avea background verde, testati mai jos

Text list 1 ... Text list 2 ... Text list 3 ...
2. Pseudo-clase si clase Trebuie stiut ca pseudo-clasele nu sunt acelasi lucru ca si clasele, acestea fiind cele care fac referire la valoarea atributului "class" si in CSS se adauga dupa un caracter punct (.). Iata un exemplu in care sunt folosite pseudo-clasele "lang(cuvant)" (pt. IE incepand cu versiunea 8) sl "lastchild" la o clasa ".test' <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Pseudo-clase - Ex. 3</title> <style type="text/css"> .test:last-child { background-color:#88fe88; }
.test:lang(da) { color:blue; } </style> </head> <body> <ul> <li class="test">Text in list cu class 1 ...</li> <li class="test" lang="da">Text in list cu class 2 ...</li> <li class="test">Text in list cu class 3 ...</li> </ul> </body> </html> - Observati ca stilul definit pentru ".test:last-child" va fi aplicat doar ultimului element care are clasa "test", iar "lang(da)" se aplica numai elementului care pe langa class="test" are si lang="da". - Rezultatul este acesta:

Text in list cu class 1 ... Text in list cu class 2 ... Text in list cu class 3 ...
Iata un alt exemplu in care sunt combinate o clasa (test), un selector (tag <i>) si "first-child": <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Pseudo-clase - Ex. 4</title> <style type="text/css"> .test i:first-child { font-weight:bold } </style> </head> <body> <p class="test"><i>Paragraf</i> cu mai multe tag-uri I: <i>text oblic</i>, alt test <i>oblic</i></p> <p class="test">Alt paragraf: <i>sir inclinat si bold</i>, alt sir <i>italic</i></p> </body> </html> - Stilul CSS va fi aplicat primelor tag-uri <i> din fiecare clasa ".test", dupa cu puteti vedea mai jos Paragraf cu mai multe tag-uri I: text oblic, alt test oblic Alt paragraf: sir inclinat si bold, alt sir italic - Daca doriti ca stilul sa fie aplicat tuturor etichetelor <i> din prima clasa, scrieti: .clasa:first-child i - Daca vreti sa fie aplicat numai primului <i> din prima clasa, scrieti: .clasa:first-child i:first-child
3. Pseudo-clase cu id-uri si elemente de formular In CSS, id-urile fac referire la valoarea atributului ID si se scriu dupa caracterul #. Iata un exemplu in care este folosita pseudo-clasa "hover" impreuna cu un ID, iar "focus" impreuna cu o clasa (focus nu functioneaza pe versiuni de IE mai mici de 8) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Pseudo-clase - Ex. 5</title> <style type="text/css"> #unid:hover { background-color:#dadafe; } .test:focus { background-color:#ededfe; } </style> </head> <body> <form action="" method="post"> <input type="text" class="test" /><br /> <textarea cols="20" rows="5" class="test"></textarea><br /> <input type="button" value="Buton" id="unid" /> </form> </body> </html> - Stilul CSS definit in acest exemplu face ca atunci cand mouse-ul se afla deasupra butonului (care are id="unid") acesta sa isi schimbe culoarea de fundal, iar cand se da click pe zonele de text din formular (care au class="test"), la fel se modifica culoarea background. - Rezultatul este urmatorul formular.
- Lectia 9 Configurari pentru vizibilitate si ... <<-- Anterior ----------- Urmator -->> Pseudo-elemente
Pseudo-elemente
Pseudo-elementele permit adaugarea de stiluri CSS anumitor parti din continutul unui element HTML. De exemplu, cand definiti un stil pentru un anumit tag HTML (sau pentru o clasa), tot continutul incadrat de acel tag va avea acelasi stil, iar daca vreti sa adaugati un stil CSS diferit primei litere sau primlui rand dintr-un
paragraf, se folosesc pseudo-elemente. Sintaxa pentru utilizarea pseudo-elementelor este urmatoarea: obiect_css:pseudo-element { proprietate:valoare; } - unde "obiect_css" este un selector, id sau clasa, iar "pseudo-element" este una din expresiile urmatoare:

after - Adauga continut dupa un element HTML (nu e suportat de versiuni IE mai mici de 8) before - Adauga continut inaintea unui element HTML (nu e suportat de versiuni IE mai mici de 8) first-letter - Adauga un stil css primului caracter dintr-un text first-line - Adauga un stil primei linii dintr-un text
Ca sa intelegeti mai bine cum functioneaza si ce fac pseudo-elementele, iata cateva exemple cu fiecare in parte. 1. after Pentru a adauga un anumit continut (text, imagine, sunet .wav) prin CSS, se foloseste proprietatea content si valoarea ce reprezinta continutul respectiv: text se adauga intre ghilimele, iar imagine sau sunet .wav se adauga folosind ca valoare url(adresa_fisier) In urmatorul exemplu va fi adaugat un continut text dupa fiecare element <h4>. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Pseudo-elemente - Ex. 1</title> <style type="text/css"> h4:after { content:"MarPlo"; color:blue; } </style> </head> <body> <h4>Continutul din primul tag H4 ... </h4> <h4>Un alt text din alt element H4</h4> </body> </html> - Rezultatul va fi cel de jos. - Observati cum este adaugat cuvantul "MarPlo", imediat dupa ultimul caracter al fiecarui element <h4>, ca si cum ar face parte din textul initial, dar putand avea stil propriu.
Continutul din primul tag H4 ... MarPlo Un alt text din alt element H4MarPlo
- In loc de selector puteti folosi si ID sau clasa. 2. before Before este similar cu "after", continutul se adauga la fel, dar la inceputul elementului. Pentru o mai mare difersitate, puteti combina pseudo-clasele cu pseudo-elemente folosind sintaxa: obiect_css:pseudo-clasa:pseudo-element { proprietate:valoare; } - Pseudo-clasele sunt explicate in lectia anterioara. Ca sa vedeti efectul, iata un exemplu aplicat cu "before" acelorasi tag-uri H4 din exemplul precedent. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Pseudo-elemente - Ex. 2</title> <style type="text/css"> h4:first-child:before { content:"MarPlo- "; color:blue; } </style> </head> <body> <h4>Continutul din primul tag H4 ... </h4> <h4>Un alt text din alt element H4</h4> </body> </html> - De data aceasta continutul "MarPlo- " este adaugat imediat in fata si doar primului element <h4> (precizat prin 'first-child'), dupa cum puteti vedea mai jos:
MarPlo- Continutul din primul tag H4 ... Un alt text din alt element H4
- Daca vreti sa adaugati in loc de continut text o imagine, de exemplu .gif, scrieti codul CSS astfel: h4:firstchild:before { content:url(imagine.gif); } 3. first-letter First-letter aplica un stil CSS doar primului caracter dintr-un text. In urmatorul exemplu este aplicat un stil CSS primului caracter din continutul fiecarui element definit printr-o clasa "test". <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head>
<title>Pseudo-elemente - Ex. 3</title> <style type="text/css"> .test:first-letter { font-size:25px; color:red; } </style> </head> <body> <p class="test">Textul din paragraf ...</p> <div class="test">Alt continut int-un tag DIV, dar cu aceeasi clasa.</div> </body> </html> - Dupa cum puteti vedea in rezultatul de mai jos, prima litera din continutul fiecarui tag ce are class="test" este de culoare rosie si marime 25px.
Textul din paragraf ... Alt continut int-un tag DIV, dar cu aceeasi clasa.
4. first-line First-line aplica un stil CSS doar primei linii din continutul elementului HTML. Studiati exemplul urmator: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Pseudo-elemente - Ex. 4</title> <style type="text/css"> .test:first-line { font-weight:bold; color:blue; } </style> </head> <body> <p class="test">Paragraf cu mai multe linii<br /> A doua linie ...<br /> Alta linie din acelasi paragraf.</p> <div class="test">Continut pe doua linii intr-un tag DIV<br /> A doua linie din DIV.</div> </body> </html> - Rezultatul este urmatorul, comform codului CSS, prima linie din fiecare element cu class="test" are textul albastru si ingrosat.
Paragraf cu mai multe linii A doua linie ... Alta linie din acelasi paragraf. Continut pe doua linii intr-un tag DIV A doua linie din DIV.
Creare Meniu Dublu cu CSS
Meniu Orizontal-Vertical
In acest tutorial puteti invata cum sa creati Meniu Dublu cu CSS (orizontal si vertical). Meniu dublu inseamna ca lista meniului contine inca un Meniu cu alte link-uri (denumit si Sub-Meniu). In general, Meniurile sunt create folosind tag-urile <ul> (sau <ol>) si <li> tags. - Presupunand ca deja stiti CSS si HTML, aplicati /adaptati codurile prezentate mai jos, personalizandu-le si cu alte elemente CSS, dupa cum doriti sa creati designul (colturi rotunjite, imagini pt. fundal, etc.). Meniu Vertical Dublu Meniul vertical este de obicei adaugat in marginile laterale ale paginii. Iata un exemplu simplu (mutati cursorul mouse-ului pe el): Pagina personala + Tutorialle CSS + Tutoriale HTML Contact - Codul HTML si CSS de mai jos creaza acest meniu (Proprietatile CSS trebuie adaugate in zona <head>, sau intr-un fisier ".css"): <style><!-#menuv { width:200px; border:1px solid blue; background-color:#daedfe; padding:2px; }
/* Proprietati pentru primul nivel din meniul vertical */ #menuv li { margin:1px 0; background-color:#f0f1fe; padding:1px; list-style-type:none;
font-weight:600; text-align:left; } #menuv li a { display:block; margin:0; font-weight:normal; } #menuv li a:hover { background-color:#fefefe; text-decoration:none; font-style:oblique; }
/* Proprietati pentru nivelul doi din meniul vertical */ #menuv li:hover ul { display:block; } #menuv li ul { display:none; position:relative; margin:-1px 0 -2px 0; padding:1px 0; } #menuv li ul li { margin:2px 0 0 20px; background-color:#edfeed; padding:1px 0; border:1px dotted yellow; } --></style>
<ul id="menuv"> <li><a href="/" title="Pagina personala">Pagina personala</a></li> <li> + Tutorialle CSS <ul> <li><a href="http://www.marplo.net/curs_css/css3-background-proprietati-noi.html" title="CSS3 Background proprietati">CSS3 - Background proprietati</a></li> <li><a href="http://www.marplo.net/curs_css/css3-opacity.html" title="CSS3 opacity">CSS3 opacity</a></li> </ul> </li> <li> + Tutoriale HTML <ul> <li><a href="http://www.marplo.net/html/tutorial-html5.html" title="Tutorial HTML5">Tutorial HTML5</a></li> <li><a href="http://www.marplo.net/html/html5-canvas.html" title="HTML5 canvas">HTML5 canvas</a></li> <li><a href="http://www.marplo.net/html/html5-taguri-noi.html" title="HTML5 tag-uri noi">HTML5 tag-uri noi</a></li> </ul> </li> <li><a href="http://www.marplo.net/coment/contact.php" title="Contact">Contact</a></li> </ul> - "Smecheria" la acest Meniu este acest cod (ceea ce face a doua lista UL vizibila cand mouse-ul e deasupra listei LI parinte): #menuv li:hover ul { display:block; } O alta varianta de meniu vertical dublu: Pagina personala + Tutorialle CSS + Tutoriale HTML Contact - Codul CSS si HTML pt. acest meniu: <style></style>
<ul id="menuv"> <li><a href="/" title="Pagina personala">Pagina personala</a></li> <li><span> + Tutorialle CSS</span> <ul> <li><a href="http://www.marplo.net/curs_css/css3-background-proprietati-noi.html" title="CSS3 Background proprietati">CSS3 - Background proprietati</a></li> <li><a href="http://www.marplo.net/curs_css/css3-opacity.html" title="CSS3 opacity">CSS3 opacity</a></li> </ul> </li> <li><span> + Tutoriale HTML</span> <ul> <li><a href="http://www.marplo.net/html/tutorial-html5.html" title="Tutorial HTML5">Tutorial HTML5</a></li>
<li><a href="http://www.marplo.net/html/html5-canvas.html" title="HTML5 canvas">HTML5 canvas</a></li> <li><a href="http://www.marplo.net/html/html5-taguri-noi.html" title="HTML5 tag-uri noi">HTML5 tag-uri noi</a></li> </ul> </li> <li><a href="http://www.marplo.net/coment/contact.php" title="Contact">Contact</a></li> </ul> - Sub-meniul (#menuv li ul) trebuie sa aibe urmatoarele proprietati CSS, ca sa-l ascunda si sa nu afecteze celelalte liste cand e descoperit (proprietatea z-index:9998; il face sa fie afisat peste celelalte liste). display:none; position:absolute; z-index:9998; - In codul CSS al acestui Meniu este important ca selectorul #menu sa aibe definita proprietatea "position" (relative, absolute). Aceasta e necesar ca sa functioneze z-index:9998; (in #menuv li ul) in Internet Explorer. Meniu Orizontal-Vertical Meniul orizontal-vertical este un meniu cu lista afisata pe o linie orizontala, iar fiecare lista poate sa contina un alt meniu cu liste verticale, care este initial ascuns, si afisat cand mouse-ul e pe textul /imaginea din lista orizontala. - Demonstratie (mutati cursorul mouse-ului peste Menu): Pagina personala Tutorialle CSS Tutoriale HTML Contact
- Codul sursa: <style><!-#menuv { position:relative; padding:2px; }
/* Proprietati pentru lista orizontala */ #menuv li {
float:left; margin:1px 8px; border:1px solid blue; background-color:#daedfe; padding:1px 2px; list-style-type:none; font-weight:600; text-align:left; text-decoration:nderline; }
/* Proprietati pentru listele verticale */ #menuv li:hover ul { display:block; } #menuv li ul { display:none; position:absolute; margin:1px auto 1px -8px; background-color:#f0f1fe; border:1px dashed blue; padding:1px; } #menuv li ul li { position:relative; clear:both; width:99%; margin:1px 0; border:none; background-color:#edfeed; padding:1px; }
/* Link-uri in sub-menu */ #menuv ul li a { display:block; margin:0; font-weight:normal; padding:1px; } #menuv ul li a:hover { background-color:#fefefe; text-decoration:none; font-style:oblique; } --></style>
<ul id="menuv"> <li><a href="/" title="Pagina personala">Pagina personala</a></li> <li>Tutorialle CSS <ul> <li><a href="http://www.marplo.net/curs_css/css3-background-proprietati-noi.html" title="CSS3 Background proprietati">CSS3 - Background proprietati</a></li> <li><a href="http://www.marplo.net/curs_css/css3-opacity.html" title="CSS3 opacity">CSS3 opacity</a></li> </ul> </li> <li>Tutoriale HTML <ul> <li><a href="http://www.marplo.net/html/tutorial-html5.html" title="Tutorial HTML5">Tutorial HTML5</a></li> <li><a href="http://www.marplo.net/html/html5-canvas.html" title="HTML5 canvas">HTML5 canvas</a></li> <li><a href="http://www.marplo.net/html/html5-taguri-noi.html" title="HTML5 tag-uri noi">HTML5 tag-uri noi</a></li>
</ul> </li> <li><a href="http://www.marplo.net/coment/contact.php" title="Contact">Contact</a></li> </ul> In codul CSS al acestui Meniu sunt importante urmatoarele proprietati: - #menuv li trebuie sa contina aceasta proprietate ca sa aseze listele pe linie orizontala: float:left; - Sub-meniul (#menuv li ul) trebuie sa aibe aceste proprietati CSS, ca sa-l ascunda si sa nu afecteze celelalte liste cand e afisat. display:none; position:absolute; - Listele din sub-meniu (#menuv li ul li) trebuie sa aibe aceste proprietati CSS, care anleaza efectul lui: float:left;mostenit de la lista LI parinte, si sa aibe o lungime corespunzatoare: position:relative; clear:both; width:99%;
CSS3 - Background proprietati noi

Culoare Gradient background-origin background-clip CSS3 Imagini multiple de fundal
CSS3 contine trei proprietati noi pt. background: background-size, background-origin, si background-clip, de asemenea, puteti adauga mai multe imagini pentru fundalul unui element, si chiar sa folositi culori gradient, cu linear-gradient. background-size Proprietatea background-size permite determinarea marimii imaginii de background. Astfel, puteti folosi aceeasi imagine in mai multe elemente cu dimensiuni diferite. - Valori (puteti specifica dimensiunile in pixeli (px) sau in procente (%)):
auto - e valoarea predefinita (default). Redimensioneaza laturile imaginii astfel incat se mentine aspectul imaginii, daca ambele valori sunt auto, imaginea apare la dimensiunile ei.
procente - Redimensioneaza lungimea si inaltimea pozei pt. background, in procente relative la elementul parinte (nu la imagine). Prima valoare reprezinta lungimea, a doua inaltimea. Daca se specifica numai o valoare, cealalta e setata "auto". pixeli - Redimensioneaza lungimea si inaltimea la marimile specificate. Daca se specifica numai o valoare, cealalta e setata "auto". cover - Poza pt. background e marita (sau micsorata) astfel incat sa acopere toata suprafata de fundal. contain - Poza pt. background e marita (sau micsorata) astfel incat sa fie cuprinsa in zona de continut.
Proprietatea background-size e recunoscuta in IE9+, Firefox 4+, Opera, Chrome, si Safari 5+. - Exemplu: <style type="text/css"><!-#id1 { width:200px; height:100px; border:1px solid blue; background:url('css3.jpg'); background-size:100px 60px; background-repeat:no-repeat; } #id2 { width:300px; height:120px; border:1px solid #01da02; background:url('css3.jpg'); background-size:contain; background-repeat:no-repeat; } #id3 { width:300px; height:120px; border:1px solid silver; background:url('css3.jpg'); background-size:cover;
} --></style>
<div id="id1">Curs CSS gratuit - dimensiuni in pixeli</div> <div id="id2">www.coursesweb.net - valoare contain</div> <div id="id3">www.marplo.net - valoare cover</div> Rezultat:
Curs CSS gratuit - dimensiuni in pixeli
www.coursesweb.net - valoare contain www.marplo.net - valoare cover Culoare Gradient Proprietatea background poate primi o valoare speciala care defineste o culoare gradient. Sintaxa pentru codul ce defineste gradient-ul difera de la un browser la altul, de aceea trebuie specificata pentru fiecare din navigatoarele web majore, dupa cum se vede in exemplul urmator. <style type="text/css"><!-#id1 { width:300px; height:120px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dafeda', endColorstr='#0308fe'); /* IE 7, 8 */ background-image: -ms-linear-gradient(top left, #01fe02, #0102fe); background: -moz-linear-gradient(top left, #1f1, #fff, #11f); /* Safari, Chrome */ background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #0f1), color-stop(0.5, #fff), color-stop(1, #01f)); background-image: -o-linear-gradient(top left, #01fe02, #0102fe); background: linear-gradient(top left, #1f1, #fff, #11f); /* Opera 11.1+ */ /* IE10 */
/* Mozilla Firefox */
/* W3C Markup */
} --></style> <div id="id1">Curs gratuit CSS<br /> www.marplo.net</div> Rezultat: Curs gratuit CSS www.marplo.net Directia culori gradient si distanta pe care culorile o iau poate fi controlata. Daca doriti ca directia gradient-ului sa inceapa de sus, folositi doar top, in loc de "top left"; pentru stanga adaugati doar left. Ca sa setati distanta culorii in gradient, adaugati o valoare de tip procent dupa culoare (sau o valoare intre 0 si 1 pt. browsere Webkit). - Exemplu: <style type="text/css"><!-#id1 { width:300px; height:120px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dafeda', endColorstr='#0308fe'); /* IE 7, 8 */ background-image: -ms-linear-gradient(top, #01fe02 0%, #0102fe 99%); background: -moz-linear-gradient(top, #1f1 0%, #fff 65%, #11f 99%); /* Safari, Chrome */ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0f1), color-stop(0.6, #fff), color-stop(1, #01f)); background-image: -o-linear-gradient(top, #01fe02 0%, #0102fe 99%); background: linear-gradient(top, #1f1 0%, #fff 65%, #11f 99%); } --></style> background-origin Proprietatea background-origin specifica zona de pozitionare a imaginii in background. Poate lua trei valori diferite:

/* IE10 */ /* Mozilla Firefox */
/* Opera 11.1+ */
/* W3C Markup */
padding-box - pozitia e relativa la coltul din stanga-sus unde incepe padding. border-box - pozitia e relativa la coltul din stanga-sus a bordurii. content-box - imaginea pt. background e pozitionata de la coltul stanga-sus unde incepe continutul.
background-origin e recunoscut in IE9+, Firefox 4+, Opera, Chrome, si Safari 5+. - Exemplu: <style type="text/css"><!-#id1 { width:350px; height:120px; padding:20px; border:3px solid blue; background:url('css3.jpg'); background-repeat:no-repeat; background-color:#bcfede; background-origin:content-box; } #id2 { width:350px; height:120px; padding:20px; border:3px solid blue; background:url('css3.jpg'); background-repeat:no-repeat; background-color:#bcfede; background-origin:border-box; } --></style>
<div id="id1">Pozitioneaza imaginea in background incepand de la continut</div> <div id="id2">Pozitionare relativa la bordura</div> Rezultat: Pozitioneaza imaginea in background incepand de la continut Pozitionare relativa la bordura background-clip
Proprietatea background-clip specifica zona de colorare a fundalului, e folosita pentru a determina daca background-ul se extinde sau nu pana in margini. Primeste una din aceste trei valori:

border-box - culoarea de fundal se extinde pana in margini. padding-box - culoarea de fundal e fixata la padding. content-box - culoarea de fundal e fixata la zona continutului.
background-clip e recunoscut in IE9+, Firefox 4+, Opera, si Chrome. Exemplu: <style type="text/css"><!-#id1 { width:350px; height:120px; padding:20px; border:2px solid blue; background-color:#cdfeda; background-clip:padding-box; -webkit-background-clip:padding-box; } #id2 { width:350px; height:120px; padding:20px; border:2px solid blue; background-color:#cdfeda; background-clip:content-box; -webkit-background-clip:content-box; } --></style> /* Safari */ /* Safari */
<div id="id1">background-clip cu padding-box</div> <div id="id2">background-clip cu content-box</div> Rezultat: background-clip cu padding-box
background-clip cu content-box CSS3 Imagini multiple de fundal CSS3 permite aplicarea mai multor imagini de background la un element. Aceasta caracteristica e suportata in Firefox 3.6+, IE 9, Safari, si WebKit. Imaginile multiple pentru background se adauga in proprietatea background-image separate prin virgula (imaginea specificata mai la inceput apare mai in fata). Valorile din celelalte proprietati legate de poze pt. fundal se adauga in ordinea si numarul imaginilor din background-image, sau doar o singura valoare pentru toate. - Exemplu: <style type="text/css"><!-#id1 { width:400px; height:150px; background-image: url('html_course.jpg'), url('css3.jpg'); background-repeat: no-repeat, repeat-x; background-position: center top, center bottom; } --></style>
<div id="id1">Imagini multiple de background</div> Rezultat: Imagini multiple de background - Lectia 12 Creare Meniu Dublu <<-- Anterior ----------- Urmator -->> CSS3 - Border proprietati ...
CSS3 - Border proprietati noi

Adaugare umbre la chenare CSS3 Imagine pentru bordura
CSS3 contine caracteristici noi care permit crearea de colturi rotunjite, umbre la chenare si folosirea unei imagini pentru aspectul bordurii. CSS3 Colturi rotunjite Proprietatea border-radius permite crearea cu usurinta a colturilor rotunjite in designul elementelor, fara a fi nevoie de imagini sau mai multe tag-uri <div>. Internet Explorer suporta border-radius incepand cu IE9, dar puteti folosi libraria de functii
JavaScript DD_roundies ca sa afisati colturi rotunjite in navigatoare web care nu recunosc aceasta proprietate CSS; vedeti tutorialul Colturi rotunjite in Internet Explorer. Exemplu: <style type="text/css"><!-#id1 { width:300px; height:120px; border:2px solid blue; border-radius:28px; } --></style>
<div id="id1"> Curs CSS - www.marplo.net</div> Rezultat: Curs CSS - www.marplo.net Colturile rotunjite pot fi create si independent, folosind cele patru proprietati individuale: border-top-leftradius, border-top-right-radius, border-bottom-right-radius, si border-bottom-left-radius. Exemplu: <style type="text/css"><!-#id1 { width:300px; height:120px; background-color:#bbfeda; border:2px solid blue; border-top-left-radius:20px; border-bottom-right-radius:38px; } --></style>
<div id="id1"> Curs CSS - www.marplo.net</div> Rezultat: Curs CSS - www.marplo.net
Adaugare umbre la chenare Proprietatea box-shadow se foloseste pentru a adauga umbre la chenare. Este recunoscuta in IE9+, Firefox 4, Chrome, si Opera. box-shadow are urmatoarea sintaxa: elm { box-shadow: X_offset Y_offset blur marime culoare inset; } - elm - este elementul HTML la care se aplica aceasta proprietate. - X_offset - este pozitia /distanta umbrei pe latura orizontala. Sunt permise si valori negative. - Y_offset - este pozitia /distanta umbrei pe latura verticala. Sunt permise si valori negative. - blur - defineste distanta "blur" (optionala, 0 sau nespecificata inseamna fara "blur"). - marime - marimea umbrei (optionala). - culoare - culoarea umbrei (optionala, negru daca nu e specificata). - inset - schimba umbra din exterior sa apara in interior. Primele doua valori trebuie adaugate, restul sunt optionale. Daca "blur" sau marime nu sunt specificate, se considera 0. Exemplu: <style type="text/css"><!-#id1 { width:300px; height:120px; background-color:#bbfeda; box-shadow: 11px 11px 5px #7878da; -webkit-box-shadow: 11px 11px 5px #7878da; /* Safari si Chrome */ } --></style>
<div id="id1"> CSS3 box-shadow, www.coursesweb.net/css/</div> Rezultat:
CSS3 Imagine pentru bordura Cu proprietatea border-image se poate folosi o imagine pentru aspectul bordurii. Aceasta se obtine prin impartirea zonei bordurii in noua segmente, reprezentand cele patru colturi, cele
patru laturi si centrul (dupa cum se vede in imaginea de mai jos). Se foloseste un singur fisier cu imaginea, impartit similar in cele noua segmente care vor reprezenta colturile, laturile si centrul.
box-shadow are urmatoarea sintaxa: elm { border-image: url_img slice width outset repeat; } - url_img - adresa si numele imaginii folosita pt. bordura. - slice - specifica distanta pentru zona din imagine folosita in cele patru margini. - width - lungimea bordurii cu imaginea. - outset - specifica distanta fata de marginea chenarului, de unde incepe bordura cu imagine. - repeat - specifica daca partea de imagine trebuie repetata, rotunjita ca incadrare, sau intinsa (poate avea aceste valori:stretch, repeat, round). border-image nu e recunoscut in Internet Explorer. Firefox foloseste proprietatea -moz-border-image. Safari si Chrome suporta -webkit-border-image. Pentru a afisa cum trebuie border-image, trebuie sa specificati si proprietatea border-width.
In exemplul urmator se foloseste aceasta imagine: <style type="text/css"><!-#id1 { width:200px; height:120px; border-width:12px; -moz-border-image:url('border_image.png') 30 30 round; /* Firefox */ -webkit-border-image:url('border_image.png') 30 30 round; /* Safari and Chrome */ border-image:url('border_image.png') 30 30 round; } #id2 { width:200px; height:120px;
border-width:15px; -moz-border-image:url('border_image.png') 30 30 stretch; /* Firefox */ -webkit-border-image:url('border_image.png') 30 30 stretch; /* Safari and Chrome */ border-image:url('border_image.png') 30 30 stretch; } --></style>
<div id="id1"> CSS3 border-image, with round</div><br /> <div id="id2"> CSS3 border-image, with stretch</div> Rezultat:
CSS3 - text-shadow, word-wrap, text-overflow

CSS3 introduce noi proprietati pentru efecte de text, dar multe dintre ele nu sunt inca recunoscute de principalele navigatoare web. In aceasta lectie sunt prezentate cele care sunt mai bine acceptate: textshadow, word-wrap, and text-overflow. CSS3 text-shadow Proprietatea text-shadow introdusa in CSS3 permite adaugarea unui efect de umbra care sa fie aplicat la textul dintr-un element HTML. Umbra apare in jurul literelor. Sintaxa: text-shadow: offset_X offset_Y blur culoare;
- offset_X - specifica pozitia umbrei pe orizontala. Sunt permise si valori negative. - offset_Y - specifica pozitia umbrei pe verticala. Sunt permise si valori negative. - blur - defineste distanta pentru valoarea "blur" (optional). - culoare - defineste culoarea umbrei (optional). Daca nu e specificata, se foloseste negru. text-shadow e recunoscut in principalele browsere, cu exceptia Internet Explore. Dar incepand cu versiunea 8 a Internet Explorer puteti folosi o proprietate filter pentru a crea efecte de umbra pt. text si in IE. Sintaxa:
filter:progid:DXImageTransform.Microsoft.Shadow(color=val, direction=val, strength=val);
- color - specifica culoarea umbrei. - direction - poate avea una din aceste valori numerice: 0=top, 45=top right, 90=right, 135=bottom right, 180=bottom, 225=bottom left, 315=top left. - strength - reprezinta cantitatea de "blur". Exemplu: <style type="text/css"><!-h2 { /* pt. IE8+ */ filter:progid:DXImageTransform.Microsoft.Shadow(color=#a0a1fe, direction=135, strength=5); text-shadow: 2px 3px 3px #a0a1fe; } --></style>
<h2>Text cu text-shadow</h2> Rezultat:
Text cu text-shadow
Se pot adauga mai multe umbre la acelasi text, prin adaugarea mai multor liste de umbre in proprietatea text-shadow, separate prin virgula. Urmatorul cod amesteca o culoare verde cu una albastra ca sa creeze un efect de umbra cu aceste culori: <style type="text/css"><!-h2 { /* pt. IE8+ */ filter:progid:DXImageTransform.Microsoft.Shadow(color=#a0a0fe, direction=135, strength=5); text-shadow: -1px -1px 1px rgba(110,235,155,0.2), 2px 3px rgba(0,0,181,0.2); } --></style>
<h2>Text cu doua culori pt. text-shadow</h2> - Observati ca s-a folosit formula rgba(Rosu, Verde, Albastru, Alpha) la definirea culorii, adaugand si transparenta (Alpha) in acelasi timp. Rezultat:
Text cu doua culori pt. text-shadow

CSS3 word-wrap Cu word-wrap puteti determina browser-ul sa rupa cuvintele lungi, cand acestea depasesc lungimea elementului, trecand pe un rand nou. Sintaxa: word-wrap: valoare; "valoare" poate fi: - normal - Nu rupe cuvintele intregi (valoarea prestabilita). - break-word - Permite ruperea cuvintelor intregi. Cuvintele sunt rupte la nivel de caracter, nu in silabe. Exemplu: <style type="text/css"><!-#id1 { width:100px; border:1px solid blue; word-wrap:break-word; } --></style>
<div id="id1">Curs CSS gratuit - word-wrap un_cuvant_mai_lung.</div> Rezultat: Curs CSS gratuit - word-wrap un_cuvant_mai_lung. CSS3 text-overflow Cu proprietatea text-overflow puteti determina ce sa se intample cu textul, cand acesta depaseste lungimea elementului. text-overflow este suportat in majoritatea navigatoarelor web, in afara de Firefox. Sintaxa: text-overflow: valoare; "valoare" poate fi: - clip - taie textul (valoarea prestabilita). - ellipsis - afiseaza trei-puncte ("") in locul textului taiat.
In general, proprietatea text-overflow se foloseste impreuna cu white-space:nowrap; si overflow:hidden;. Exemplu: <style type="text/css"><!-#id1 { width:230px; border:1px solid blue; white-space:nowrap; overflow:hidden; /* "overflow" valoarea trebuie sa fie diferita de "visible" */ text-overflow:ellipsis; } #id2 { width:230px; border:1px solid green; white-space:nowrap; overflow:hidden; text-overflow:clip; } --></style>
<div id="id1">CSS Tutorial - un text lung pe o singura linie, alte cuvinte.</div> <div id="id2">Site web www.marplo.net - alt text lung intr-un singur rand.</div> Rezultat: CSS Tutorial - un text lung pe o singura linie, alte cuvinte. Site web www.marplo.net - alt text lung intr-un singur rand.
CSS3 opacity
Proprietatea opacity seteaza nivelul de opacitate al unui element HTML, opacity permite modificarea transparentei elementului. IE8 si versiuni anterioare folosesc o varianta alternativa, proprietatea filter. - Sintaxa: filter: alpha(opacity=X); opacity: X; /* pt. IE */
- X - reprezinta o valoare intre 0 (complet transparent) si 1.0 (fara transparenta). 1) Exemplu, un <div> cu o transparenta CSS de 40%: <style type="text/css"><!-#dv { background-color:blue; width:200px; height:100px; filter:alpha(opacity=40); opacity:0.4; } --></style> /* pt. IE */
<div id="dv">Un continut oarecare ...</div> Rezultat: Un continut oarecare ... 2) Exemplu, seteaza opacitate 50% la o imagine: <style type="text/css"><!-#im { filter:alpha(opacity=50); opacity:0.5; } --></style> /* pt. IE */
<img src="html_course.jpg" alt="Curs HTML si CSS" width="155" height="160" id="im" /> Rezultat:
3) Exemplu, efect imagine transparenta 50%, iar la mouseover 100%: <style type="text/css"><!-#im2 { filter:alpha(opacity=50); opacity:0.5; } #im2:hover { filter:alpha(opacity=100); opacity:1; } --></style> /* pt. IE */ /* pt. IE */
<img src="html_course.jpg" alt="Curs HTML si CSS" width="155" height="160" id="im2" /> Rezultat (pozitionati mouse-ul peste imaginea de mai jos):
4) Continut intr-un DIV care la mouseover este acoperit cu un alt <div> transparent (DIV-ul transparent trebuie sa fie gol, adaugat in primul, si setat cu: position:absolute;): <style type="text/css"><!-#trans { display:none; position:absolute; top:2%; left:2%; width:96%; height:95%; background-color:#07fe08;
filter:alpha(opacity=50); opacity:0.5; } #cnt { position:relative; background:#e7e8fe; width:300px; height:200px; border:1px solid blue; padding:20px; }
/* pt. IE */
#cnt:hover #trans { display:block; } --></style>
<div id="cnt"> <div id="trans"></div> Plasati mouse-ul peste aceasta caseta pentru a vedea efectul de opacitate. <img src="css3.jpg" alt="CSS3 opacity" width="160" height="98" /> </div> Rezultat:
Plasati mouse-ul peste aceasta caseta pentru a vedea efectul de opacitate.

Titluri

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Titluri

Uploaded by

Copyright:

Available Formats

Titluri, Paragrafe, Un nou rnd, Linie orizontala

1. Titluri <Hx> ... </Hx>

unde 'x' este un numar intre 1 si 6.

impartire a continutului paginii.

Cum apare in pagina

ajustata de marimea deschiderii browser-ului si fiecare paragraf va incepe un nou rnd.

Cum apare in pagina

Paragraf 1 Paragraf 2 Paragraf 3 Paragraf 4

3. Un nou rand <br>

4. Linie orizontala <hr>

<font size="+2">Doua mrimi mai mare</font>

- Tipul fontului poate fi modificat cu elementul FONT si atributul FACE.

<font face="Arial Black">Acesta este tipul de font Arial Black</font>

- Culoarea textului poate fi modificata cu elementul FONT si atributul COLOR.

Alte elemente folosite pentru formatul textului sunt:

- <strong> Strong </strong> - Browser-ul de obicei arata aces element ca bold

- <cite> Citatie </cite> - Reprezinta o citatie din document.

- <center> ... </center> Va centra elementele

- <dfn> Defineste exemplu de termen inchis </dfn>

- <code> Folosit pentru extragerea unui cod de program </code>

- <q> ... </q> - Folosit pentru citate scurte.

Curs realizat de MarPlo

Index Lectii / Tutoriale

Introducere Elemente HTML

Creare pagini HTML

Titluri, Paragrafe, Rand, Linie Format text

Link-uri Harti imagini

Cadre / Frame Formulare

Siluri CSS DIV si SPAN XHTML

XHTML - Tag-uri si atribute

Tutorial HTML5 HTML5 - Tag-uri Noi

HTML5 - Elemente si attribute in formular

HTM5 canvas Lista cod culori Caractere speciale

Daca doriti sa oferiti o donatie

List item 1 ... List item 2 ... List item 3 ...

List item 1 ... List item 2 ... List item 3 ...

Un alt element folosit pentru formarea listelor (ordonate) este <ol>.

Formate text <<-- Anterior ----------- Urmator -->> Adaugare imagini

Index Lectii / Tutoriale

Daca doriti sa oferiti o donatie

sau cand utilizatorul va pozitiona, in browser, mouse-ul peste imagine.

<body bgcolor="#00ffff" link="#000000" vlink="#ff0000" alink="#00ff00">

<a href="nume_fisier.extensie" title="Titlu link">Nume</a>

link-ul, codul va fi scris asa: o <a href="../nume_fisier.extensie" title="Titlu link">Nume</a>

<map atribute > < / map > name = "nume_harta"

</tr> </table> - In pagina web apare asa:

linia 2- coloana 1 linia 2- coloana 2 acesta este textul

titlu 1 linia 2- coloana 1 linia 3- coloana 1

titlu 2 linia 3- coloana 2 linia 4- coloana 2 - colorat

acesta este textul

Pentru crearea de frame-uri se pot folosi urmatoarele etichete HTML:

Alte atribute ale elementului <FRAMESET>

trebuie sa aiba valoarea 0

a trimite continutul formularului la server.

multe linii de text.

Casete pentru parole

Casete de formular ascunse

trimise la scripturi impreuna cu celelalte date din formular.

prin bifarea lor - Codul este <input type="checkbox"></input> In browser va apare:

Casete pentru upload

elemente din formular la scriptul de pe server

Imagine pentru buton Submit

date ce pot fi selectate.

- Toate aceste elemente trebuie incadrate in tag-ul "<form> ... </form>"!