Academia.edu no longer supports Internet Explorer.
To browse Academia.edu and the wider internet faster and more securely, please take a few seconds to upgrade your browser.
Horea IonusiuRelated papers
Evaluarea Formativă – Deziderat În Învăţământul Universitar
2016
In ultimul timp au luat amploare cercetările cu referire la evaluarea formativă. Prezenţa constantă a evaluării formative in invăţământul universitar explică, fără indoială, locul central al acesteia in procesul instructiv-educativ. Evaluarea formativă apare ca o strategie nouă in educaţia postmodernă, care permite studenţilor să-si dezvolte competenţe pentru a deveni autonomi in invăţare. Evaluarea formativă prezintă valoare in invăţământul universitar, reiesind din caracterul ei de diagnoză, remediere si corecţie a procesului de predare–invăţare. Fiind axată pe invăţare, evaluarea formativă este importantă in invăţământul universitar datorită feedback-ului realizat intre profesori si studenţi; in rezultat, evaluarea formativă reprezintă, pe de o parte, remedierea procesului didactic pentru atenuarea dificultăţilor intâmpinate de către studenţi si, pe de altă parte, reglarea procesului de predare–invăţare. Evaluarea formativă in invăţământul universitar cuprinde in centrul său de ...
Provocările limbajului în Codul administrativ
2020
Recently entered into force, the administrative code was adopted with the stated purpose of unifying the regulations in the field of public administration, in order to create a normative framework, coming to the aid of individuals, public administration, but also of practitioners. In this respect, a significant part of the provisions were taken identically from the normative acts that were repealed, while there are also new provisions, some of them leaving, unfortunately, the impression of a code adopted in haste. Without claiming a thorough analysis of the entire regulation, the present study aims to address some of the challenges brought by the language used in OUG: 57/2019. Between the two extremes among which the legislator oscillates (either an incomplete or ambiguous language, or an over-regulation), the most relevant problem, in terms of the consequences that it can produce, probably consists in using already legally established notions, with a totally different meaning (such...
Atelierul de lectură: strategii didactice
Zenodo (CERN European Organization for Nuclear Research), 2022
Punctul-și-virgula
Studii și cercetări lingvistice
This article is a proposal to standardize a punctuation mark – the semicolon –, and describe the situations of use and the communication implications of the sign: prosodic, pragma-semantic and stylistic functions. The relationships between the semicolon and other punctuation marks, as well as recommendations for use in writing practice are also considered. Semicolon is less and less known and used nowadays; its use depends on the author’s preferences. Among the stylistic varieties, the semicolon is used most frequently in the scientific and argumentative style. It is recommended to use semicolon in enumerative series, especially vertically, in constructions containing parallelisms, or in long and complex statements that also contain other internal punctuation marks.
Probleme ale artei contemporane
Annals of the University of Bucharest - Philosophy Series, 2015
This paper aims at discussing some problems of the contemporary art through some of Arthur Danto’s theories. The concept of the end of art, the new way of making art, how to understand the contemporary art are some fundamental problems of nowadays art criticism. Comparisons among artistic techniques used by various avant-gardist movements, especially cubist, abstractionist and dadaist ones are intended to build a comprehensive image of the evolution in art creativity towards post-wars period represented by new contributions (Andy Warhol and Joseph Beuys). These examples prove that the contemporary art needs a more attentive interpretation and a better understanding of the material-form connection within the art work and the process of plastic creativity.
Air Force Regulation No. 200-2, 12 August 1954
Definition of "UFO" by the US Air Force, 12 August 1954 on the Air Force Regulation No. 200-2.
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
Descriere
<img atribute >
-
marcaj de includere a imaginilor
ismap
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)
<map atribute >
< / map >
-
specifica regiunile unei harti de imagine la client
name = "nume_harta"
numele hartii de imagine (corespunzator atributului USEMAP al marcajului <IMG>)
<area atribute >
-
defineste o regiune a unei harti de imagine
shape = "forma"
forma regiunii: rect sau rectangle (dreptunghi), circle sau circ (cerc), point (punct), poly sau polygon (poligon)
coords = "coordonate"
coordonatele unei regiuni (in pixeli); se 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 a celor din stg. sus si dr. jos ale regiunii
- pentru circ (cerc) se dau coordonatele centrului cercului si raza
- pentru point (punct) se dau coordonatele punctului
- pentru poly (poligon) se dau coordonatele colturilor poligonului
href = "=url="
URL - ul asociat regiunii specificate din cadrul imaginii; in cazul unui clic pe acea regiune se incarca pagina specificata prin URL
alt = "text"
textul asociat regiunii specificate din cadrul imaginii; apare plasand mouse-ul deasupra regiunii respective sau celor cu browserul setat sa nu incarce imagini
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,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ă poziţionarea tabelului in pagina, cu următoarele 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
titlu 2
linia 2- coloana 1
linia 3- coloana 1
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 spaţiul ferestrei este atribuit fiecărui cadru, folosind atributele ROWS sau COLS care impart ecranul in Linii sau Coloane.
Acesta va conţine 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, începând de sus.
Pot fi folosite urmatoarele valori:
- pixeli absoluti ; ex : "360,120"
- procente din inaltimea ecranului ; ex : "75%,25%"
- valori proportionale, folosind (*). Acesta putând fi combinat cu procente sau pixeli. Ex : "120,*" sau "30%,*"
COLS
Determina numarul de coloane si marimea cadrelor care vor fi asezate pe coloane, începând din stanga.
Pot fi folosite urmatoarele valori:
- pixeli absoluti ; ex : "380,120"
- procente din lungimea ecranului ; ex : "33%,77%"
- valori proportionale, folosind (*). Acesta putând 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:
SRC - Aici trebuie scrisa adresa si numele paginii folosite pentru cadru
NAME - Aici trebuie scris numele de identificare al cadrului.
MARGINWIDTH - Atribut optional, valoare in pixeli. Determina spatiul orizontal dintre 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 stânga sau dreapta ori sus sau jos.
Mai jos puteti vedea cum poate fi creata o pagina HTML care sa contina doua cadre, cel din stânga ocupând 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 spaţiul 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"
- acesta va încarca link-ul in toata fereastra browser-ului, disparând astfel cadrele.
target="_blank"
- acesta va încarca link-ul intr-o noua fereastra de browser, astfel ramanand deschisa si vechea fereastra.
target="_self"
- acesta va încarca link-ul in aceeasi fereastra de unde a fost actionat.
target="_parent"
- 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 sau no), "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).
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 foloseşte 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>
Top of Form
Bottom of Form
- Acest element foloseste urmatoarele atribute:
type - text
name - numele casutei de text, folosit de scriptul la care sunt trimise datele
value - va reprezenta propriul context ca valoare aleasa. Un sir de text care apare in 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>
Top of Form
Bottom of Form
- Acest element foloseste urmatoarele atribute:
name - numele campului de text, folosit de scriptul la care sunt trimise datele
rows - numarul de linii a zonei de text
cols - numarul de coloane a zonei de text
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>
Top of Form
Bottom of Form
- Acest element foloseste urmatoarele atribute:
type - password
name - numele casutei pentru parole, folosit de scriptul la care sunt trimise datele
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:
type - hidden
name - numele casutei ascunse, folosit de scriptul la care sunt trimise datele
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>
Top of Form
Bottom of Form
- Acest element foloseste urmatoarele atribute:
type - checkbox
name - numele casutei checkbox, folosit de scriptul la care sunt trimise datele
value - valoarea casetei checkbox respective, care poate fi selectata (bifata)
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>
Top of Form
Bottom of Form
- Acest element foloseste urmatoarele atribute:
type - radio
name - numele casutei radio, folosit de scriptul la care sunt trimise datele
value - valoarea casetei radio respective, care poate fi selectata (bifata)
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>
Top of Form
Bottom of Form
- Acest element foloseste urmatoarele atribute:
type - file
name - numele casutei upload, folosit de scriptul la care sunt trimise datele
size - specifica numarul de caractere care dau lungimea casutei upload.
Buton simplu
- acesta este folosit cu JavaScript sau VBScript pentru a efectua o actiune când este apasat
- Codul este <input type="button" value="Buton"></input>
Top of Form
Bottom of Form
- Acest element foloseste urmatoarele atribute:
type - button
name - numele butonului, necesar pentru a fi folosit de script
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>
Top of Form
Bottom of Form
- Acest element foloseste urmatoarele atribute:
type - submit
name - numele butonului, poate fi folosit de scriptul la care se trimit datele
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:
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>
Top of Form
- Acest element foloseste urmatoarele atribute:
type - reset
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:
name - numele acestui element, necesar pentru a fi folosit de scriptul la care sunt trimise datele
size - seteaza inaltimea elementului Select, care reprezinta si numarul de optiuni din lista care vor fi vizibile initial
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:
selected - cand acesta este adaugat, optiunea respectiva este selectata când pagina web este initial incarcat. Cand sunt adaugate mai multe optiuni, este indicat folosirea acestui atribut doar cu una singura.
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)
- Codul este:
<select name="select">
<option>Optiune 1</option>
<option>Optiune 2</option>
</select>
- unde "name" este atributul care defineste numele acestui tag SELECT, iar "<option>" impreuna cu "Optiune 1" (si 2) reprezinta elementele din lista de selectare.
Top of Form
2. List Box
- 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.
Top of Form
- 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 tag-ului).
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 (aici http://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:
<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:
<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
Descriere
Valori
background
imagini sau culori de fundal
URL-ul (imaginii) sau culori date prin nume sau valoare RGB
Color
culoarea textului
nume sau valoare RGB
font-family
tipul fontului
Numele fontului sau al familiei de fonturi
font-size
dimensiunea fontului
data in puncte(pt), inch(in), centimetri(cm), pixeli(px)
font-style
text cursiv
normal, italic
font-weight
grosimea fontului
extra-light, light, demi-light, medium, demi-bold, bold, extra-bold
line-height
distanta dintre liniile de baza ale randurilor
data in puncte(pt), inch(in), centimetri(cm), pixeli(px), procent(%)
margin-left
distanta fata de marginea din stanga a paginii
data in puncte(pt), inch(in), centimetri(cm), pixeli(px)
margin-right
distanta fata de marginea din dreapta a paginii
data in puncte(pt), inch(in), centimetri(cm), pixeli(px)
margin-top
distanta fata de textul precedent sau fata de marginea de sus a paginii
data in puncte(pt), inch(in), centimetri(cm), pixeli(px)
text-align
alinierea textului
left(stanga), center(centru), right(dreapta), justify
text-decoration
evidentierea textului
none(nimic), underline(subliniat), italic(cursiv), line-through(taiat)
text-indent
distanta primului rand fata de marginea din stanga
data in puncte(pt), inch(in), centimetri(cm), pixeli(px)
border-style
tipul chenarului
none, groove, dotted, dashed, solid, double, ridge, inset, outset
border-width
grosimea chenarului
data in puncte(pt), inch(in), centimetri(cm), pixeli(px)
border-color
culoarea chenarului
nume sau valoare RGB
72 pt=1 inch = 25,4 mm;
un font de dimensiunea 13pt inseamna ca sunt 13 puncte intre partea superioara a literei N sau h si partea inferioara a literei y sau j
- Pentru aplicarea unui stil css asupra unei 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 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:
Top of Form
Nume:
E-mail:
Bottom of Form
Top of Form
Bottom of Form
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 Curs 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 Discant.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 Discant.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 Cursul CSS.
De la HTML la XHTML
Explicatiile din acesta sectiune sunt pentru cei care cunosc deja limbajul HTML, prezentat detaliat in lectiile 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/xhtml1-strict.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"
readonly
disabled="disabled"
disabled
selected="selected"
selected
nowrap="nowrap"
nowrap
noresize="noresize"
noresize
7. - Atributul name din tag-urile <a> si <map> a fost inlocuit cu id.
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.
class
id
style
title
xml:lang
<p> </p> - Un paragraf cu o linie noua in plus inainte si dupa el.
class
id
style
title
xml:lang
<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>".
class
id
style
title
xml:lang
<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.
class
id
style
title
xml:lang
<u> </u> - Afiseaza textul subliniat.
class
id
style
title
xml:lang
<i> </i> - Afiseaza textul inclinat.
class
id
style
title
xml:lang
<b> </b> - Afiseaza textul ingrosat.
class
id
style
title
xml:lang
<strong> </strong> - Afiseaza textul ingrosat (similar cu <b>).
class
id
style
title
xml:lang
<em> </em> - Afiseaza textul inclinat (similar cu <i>).
class
id
style
title
xml:lang
<sup> </sup> - Afiseaza textul in partea de sus a liniei randului, si mai mic.
class
id
style
title
xml:lang
<sub> </sub> - Afiseaza textul in partea de jos a liniei randului, si mai mic.
class
id
style
title
xml:lang
<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.
class
id
style
title
xml:lang
<ul> </ul> - Tag utilizat pentru afisarea unei liste neordonate numeric, ci cu simboluri gen: disc, cerc, patrat.
class
id
style
title
xml:lang
<li> </li> - Defineste un element in liste <ol> sau <ul>, fiind adaugat in cadrul acestora.
class
id
style
title
xml:lang
<dl> </dl> - Creaza o lista de definitii. Trebuie sa contina tag-urile <dt> si <dd>.
class
id
style
title
xml:lang
<dt> </dt> - Defineste un termen pentru lista de definitii.
class
id
style
title
xml:lang
<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.
class
id
style
title
xml:lang
char
charoff
align
valign
<tbody> </tbody> - Defineste corpul tabelului, unde se pot include linii si coloane.
class
id
style
title
xml:lang
char
charoff
align
valign
<tr> </tr> - Creaza o linie noua in tabel, in care se includ coloane.
class
id
style
title
xml:lang
char
charoff
align
valign
<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.
class
id
style
title
xml:lang
- 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.
class
id
style
title
xml:lang
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 curs 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:
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
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 tag-uri 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" />
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<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.discant.ro/" title="Home">Home</a></li>
<li><a href="http://www.discant.net/" title="Cursuri Web">Cursuri Web</a></li>
<li><a href="http://www.discant.ro/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.discant.ro/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.discant.ro/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.discant.ro/html/" title="Curs HTML">Curs HTML</a>.</p>
</footer>
</section>
<section id="sidebar">
<nav>
<ul>
<li><a href="http://www.discant.ro/html/" title="Curs HTML">Curs HTML</a></li>
<li><a href="http://www.discant.ro/curs_css/" title="Curs CSS">Curs CSS</a></li>
<li><a href="http://www.discant.ro/javascript/" title="JavaScript">JavaScript</a></li>
<li><a href="http://www.discant.ro/php-mysql/" title="PHP-MySQL">PHP-MySQL</a></li>
<li><a href="http://www.discant.ro/flash/" title="Flash-ActionScript 3">Flash-ActionScript 3</a></li>
<li><a href="http://www.discant.ro/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.discant.ro/" title="Cursuri gratuite, Jocuri, Anime">www.discant.ro</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.
Ca sa vedeti cum apare pagina web creata cu exemplu prezentat mai sus scrieti codul.
HTML5 - Tag-uri Noi
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 curs 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:
Browser-ul dv. nu recunoste tag-ul audio, dar puteti .
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:
Browser-ul dv. nu recunoste tag-ul video, dar puteti .
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.discant.ro/html/</figcaption>
</figure>
Rezultat:
Curs HTML: www.discant.ro/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.discant.ro</mark> pt. Web Development.</p>
Rezultat:
Cursuri gratuite si tutoriale: www.Discant.ro 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" />
Top of Form
Bottom of Form
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.discant.ro" />
Top of Form
Bottom of Form
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" />
Top of Form
Bottom of Form
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" />
Top of Form
Bottom of Form
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="Discant" value="http://www.discant.ro" />
<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 Discant" />
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="Discant" value="http://www.discant.ro" />
<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 HTML5 canvas
Necesita cunostinte de JavaScript
<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> intr-un 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; // acceseaza functia draw() cand pagina s-a incarcat
--></script>
</head>
<body>
<canvas width="200" height="200" id="cav1"></canvas>
</body>
</html>
Rezultat:
- 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(); // apeleaza functia draw()
--></script>
</body>
</html>
Rezultat:
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); // seteaza punctul de inceput
ctx.lineTo(100, 80); // defineste linia
// creaza a doua linie
ctx.moveTo(10, 10); // seteaza punctul de inceput
ctx.lineTo(120, 120); // defineste linia
// the third line
ctx.moveTo(10, 150); // muta punctul de inceput
ctx.lineTo(140, 150);
ctx.stroke(); // adauga liniile
}
else {
// face vizibil tag-ul cu text pt. no-canvas
document.getElementById('no_cav').style.display = 'block';
}
}
draw(); // apeleaza functia
--></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 argumentul anticlockwise 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); // Fata
ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false); // Gura
ctx.moveTo(65,65);
ctx.arc(60,65,4,0,Math.PI*2,true); // Ochiul stang
ctx.moveTo(95,65);
ctx.arc(90,65,4,0,Math.PI*2,true); // Ochiul drept
ctx.stroke();
}
else {
// face vizibil tag-ul cu text pt. no-canvas
document.getElementById('no_cav').style.display = 'block';
}
}
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(); // apeleaza functia
--></script>
Rezultat:
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(); // apeleaza functia
--></script>
Rezultat:
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'); // rosu
gradient.addColorStop(0.4, '#ff0'); // galben
gradient.addColorStop(0.8, '#0f0'); // verde
gradient.addColorStop(1, '#00f'); // 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: intr-un <canvas> (redimensionand-o), si un text langa ea.
<canvas width="260" height="200" id="cav1"></canvas><br />
<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'); // apeleaza functia
--></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.
Sunt mai multe proprietati si metode JavaScript pentru Canvas.
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
CD 5C 5C
205 92 92
LightCoral
F0 80 80
240 128 128
Salmon
FA 80 72
250 128 114
DarkSalmon
E9 96 7A
233 150 122
LightSalmon
FF A0 7A
255 160 122
Crimson
DC 14 3C
220 20 60
Red
FF 00 00
255 0 0
FireBrick
B2 22 22
178 34 34
DarkRed
8B 00 00
139 0 0
Culori cu fond Roz
Pink
FF C0 CB
255 192 203
LightPink
FF B6 C1
255 182 193
HotPink
FF 69 B4
255 105 180
DeepPink
FF 14 93
255 20 147
MediumVioletRed
C7 15 85
199 21 133
PaleVioletRed
DB 70 93
219 112 147
Culori cu fond Portocaliu
LightSalmon
FF A0 7A
255 160 122
Coral
FF 7F 50
255 127 80
Tomato
FF 63 47
255 99 71
OrangeRed
FF 45 00
255 69 0
DarkOrange
FF 8C 00
255 140 0
Orange
FF A5 00
255 165 0
Culori cu fond Galben
Gold
FF D7 00
255 215 0
Yellow
FF FF 00
255 255 0
LightYellow
FF FF E0
255 255 224
LemonChiffon
FF FA CD
255 250 205
LightGoldenrodYellow
FA FA D2
250 250 210
PapayaWhip
FF EF D5
255 239 213
Moccasin
FF E4 B5
255 228 181
PeachPuff
FF DA B9
255 218 185
PaleGoldenrod
EE E8 AA
238 232 170
Khaki
F0 E6 8C
240 230 140
DarkKhaki
BD B7 6B
189 183 107
Culori cu fond Purpuriu (mov)
Lavender
E6 E6 FA
230 230 250
Thistle
D8 BF D8
216 191 216
Plum
DD A0 DD
221 160 221
Violet
EE 82 EE
238 130 238
Orchid
DA 70 D6
218 112 214
Fuchsia
FF 00 FF
255 0 255
Magenta
FF 00 FF
255 0 255
MediumOrchid
BA 55 D3
186 85 211
MediumPurple
93 70 DB
147 112 219
BlueViolet
8A 2B E2
138 43 226
DarkViolet
94 00 D3
148 0 211
DarkOrchid
99 32 CC
153 50 204
DarkMagenta
8B 00 8B
139 0 139
Purple
80 00 80
128 0 128
Indigo
4B 00 82
75 0 130
Nume culoare (en.)
Cod Hexadecimal RGB
Cod Decimal RGB
Culori cu fond Verde
GreenYellow
AD FF 2F
173 255 47
Chartreuse
7F FF 00
127 255 0
LawnGreen
7C FC 00
124 252 0
Lime
00 FF 00
0 255 0
LimeGreen
32 CD 32
50 205 50
PaleGreen
98 FB 98
152 251 152
LightGreen
90 EE 90
144 238 144
MediumSpringGreen
00 FA 9A
0 250 154
SpringGreen
00 FF 7F
0 255 127
MediumSeaGreen
3C B3 71
60 179 113
SeaGreen
2E 8B 57
46 139 87
ForestGreen
22 8B 22
34 139 34
Green
00 80 00
0 128 0
DarkGreen
00 64 00
0 100 0
YellowGreen
9A CD 32
154 205 50
OliveDrab
6B 8E 23
107 142 35
Olive
80 80 00
128 128 0
DarkOliveGreen
55 6B 2F
85 107 47
Aquamarine
7F FF D4
127 255 212
MediumAquamarine
66 CD AA
102 205 170
DarkSeaGreen
8F BC 8F
143 188 143
LightSeaGreen
20 B2 AA
32 178 170
DarkCyan
00 8B 8B
0 139 139
Teal
00 80 80
0 128 128
Culori cu fond Albastru
Aqua
00 FF FF
0 255 255
Cyan
00 FF FF
0 255 255
LightCyan
E0 FF FF
224 255 255
PaleTurquoise
AF EE EE
175 238 238
Turquoise
40 E0 D0
64 224 208
MediumTurquoise
48 D1 CC
72 209 204
DarkTurquoise
00 CE D1
0 206 209
CadetBlue
5F 9E A0
95 158 160
SteelBlue
46 82 B4
70 130 180
LightSteelBlue
B0 C4 DE
176 196 222
PowderBlue
B0 E0 E6
176 224 230
LightBlue
AD D8 E6
173 216 230
SkyBlue
87 CE EB
135 206 235
LightSkyBlue
87 CE FA
135 206 250
DeepSkyBlue
00 BF FF
0 191 255
DodgerBlue
1E 90 FF
30 144 255
CornflowerBlue
64 95 ED
100 149 237
MediumSlateBlue
7B 68 EE
123 104 238
RoyalBlue
41 69 E1
65 105 225
Blue
00 00 FF
0 0 255
MediumBlue
00 00 CD
0 0 205
DarkBlue
00 00 8B
0 0 139
Navy
00 00 80
0 0 128
MidnightBlue
19 19 70
25 25 112
Nume culoare (en.)
Cod Hexadecimal RGB
Cod Decimal RGB
Culori cu fond Maro
Cornsilk
FF F8 DC
255 248 220
BlanchedAlmond
FF EB CD
255 235 205
Bisque
FF E4 C4
255 228 196
NavajoWhite
FF DE AD
255 222 173
Wheat
F5 DE B3
245 222 179
BurlyWood
DE B8 87
222 184 135
Tan
D2 B4 8C
210 180 140
RosyBrown
BC 8F 8F
188 143 143
SandyBrown
F4 A4 60
244 164 96
Goldenrod
DA A5 20
218 165 32
DarkGoldenrod
B8 86 0B
184 134 11
Peru
CD 85 3F
205 133 63
Chocolate
D2 69 1E
210 105 30
SaddleBrown
8B 45 13
139 69 19
Sienna
A0 52 2D
160 82 45
Brown
A5 2A 2A
165 42 42
Maroon
80 00 00
128 0 0
Culori cu fond Alb
White
FF FF FF
255 255 255
Snow
FF FA FA
255 250 250
Honeydew
F0 FF F0
240 255 240
MintCream
F5 FF FA
245 255 250
Azure
F0 FF FF
240 255 255
AliceBlue
F0 F8 FF
240 248 255
GhostWhite
F8 F8 FF
248 248 255
WhiteSmoke
F5 F5 F5
245 245 245
Seashell
FF F5 EE
255 245 238
Beige
F5 F5 DC
245 245 220
OldLace
FD F5 E6
253 245 230
FloralWhite
FF FA F0
255 250 240
Ivory
FF FF F0
255 255 240
AntiqueWhite
FA EB D7
250 235 215
Linen
FA F0 E6
250 240 230
LavenderBlush
FF F0 F5
255 240 245
MistyRose
FF E4 E1
255 228 225
Culori cu fond Gri
Gainsboro
DC DC DC
220 220 220
LightGrey
D3 D3 D3
211 211 211
Silver
C0 C0 C0
192 192 192
DarkGray
A9 A9 A9
169 169 169
Gray
80 80 80
128 128 128
DimGray
69 69 69
105 105 105
LightSlateGray
77 88 99
119 136 153
SlateGray
70 80 90
112 128 144
DarkSlateGray
2F 4F 4F
47 79 79
Black
00 00 00
0 0 0
Caractere speciale - Entitati HTML
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 Entitati HTML.
De exemplu:
- ca sa afisati in pagina simbolul © (copyright) se adauga codul © (sau codul ISO ©)
- ca sa afisati in pagina simbolul ½ (jumatate) se adauga codul ½ (sau codul ISO ½)
- pentru caracterul < (mai mic), ca browser-ul sa nu-l confunde cu inceputul de tag, se poate folosi codul <
Nume
Sintaxa
Nume ISO Latin-1
Descriere
Aacute
Á
Á
A ascutit (Á)
aacute
á
á
a ascutit (á)
Acirc
Â
Â
A circumflex (Â)
acirc
â
â
a circumflex (â)
acute
´
´
accent grav (´)
AElig
Æ
Æ
ligatura AE (Æ)
aelig
æ
æ
ligatura ae (æ)
Agrave
À
À
A grav (À)
agrave
à
à
a grav (à)
amp
&
&
ampersand (&)
Aring
Å
Å
A cu inel (Å)
aring
å
å
a cu inel (å)
Atilde
Ã
Ã
A tilda (Ã)
atilde
ã
ã
a tilda (ã)
Auml
Ä
Ä
A umlaut (Ä)
auml
ä
ä
a umlaut (ä)
brvbar
¦
¦
bara intrerupta (¦)
Ccedil
Ç
Ç
C sedila (Ç)
ccedil
ç
ç
c sedila (ç)
cent
¢
¢
cent (¢)
copy
©
©
copyright (©)
curren
¤
¤
valuta generala (¤)
deg
°
°
grad (°)
div
÷
÷
÷
impartire (÷)
Eacute
É
É
E ascutit (É)
eacute
é
é
e ascutit (é)
Ecirc
Ê
Ê
E circumflex (Ê)
ecirc
ê
ê
e circumflex (ê)
Egrave
È
È
E grav (È)
egrave
è
è
e grav (è)
emdash
&emdash;
nedefinit
em dash (&emdash)
emsp
 
nedefinit
em spatiu ( )
endash
&endash;
nedefinit
en dash (&endash;)
ensp
 
nedefinit
en spatiu ( )
ETH
Ð
Ð
Eth nordic (Ð)
eth
ð
ð
eth nordic (ð)
Euml
Ë
Ë
E umlaut (Ë)
euml
ë
ë
e umlaut (ë)
frac12
½
½
jumatate (½)
frac14
¼
¼
sfert (¼)
frac34
¾
¾
trei sferturi (¾)
gt
>
nedefinit
mai mare decât (>)
Iacute
Í
Í
I ascutit (Í)
iacute
í
í
i ascutit (í)
Icirc
Î
Î
I circumflex (Î)
icirc
î
î
i circumflex (î)
iexcl
¡
¡
exclamatie inversata (¡)
Igrave
Ì
Ì
I grav (Ì)
igrave
ì
ì
i grav (ì)
iquest
¿
¿
intrebare inversata (¿)
Iuml
Ï
Ï
I umlaut (Ï)
iuml
ï
ï
i umlaut (ï)
laquo
«
«
paranteza unghiularã dublã stângã («)
lt
<
<
mai mic decât (<)
macr
¯
¯
macron ( ¯ )
micro
µ
µ
micro (µ)
middot
·
·
punct la mijloc (·)
nbsp
 
spatiu nonbreaking
not
¬
¬
negatie (¬)
Ntilde
Ñ
Ñ
N tilda (Ñ)
ntilde
ñ
ñ
n tilda (ñ)
Oacute
Ó
Ó
O ascutit (Ó)
oacute
ó
ó
o ascutit (ó)
Ocirc
Ô
Ô
O circumflex (Ô)
ocirc
ô
ô
o circumflex (ô)
Ograve
Ò
Ò
O grav (Ò)
ograve
ò
ò
o grav (ò)
ordf
ª
ª
ordinal feminin (ª)
ordm
º
º
ordinal masculin (º)
Oslash
Ø
Ø
O tãiat (Ø)
oslash
ø
ø
o tãiat (ø)
Otilde
Õ
Õ
O tilda (Õ)
otilde
õ
õ
o tilda (õ)
Ouml
Ö
Ö
O umlaut (Ö)
ouml
ö
ö
o umlaut (ö)
para
¶
¶
paragraf (¶)
plusmn
±
±
plus minus (±)
pound
£
£
lira sterlina (£)
quot
"
"
ghilimele (")
raquo
»
»
paranteza unghiularã dublã dreapta (»)
reg
®
®
marca inregistrata (®)
sect
§
§
semn sectiune (§)
shy
­
­
soft hyphen ()
sup1
¹
¹
1 superior (¹)
sup2
²
²
2 superior (²)
sup3
³
³
3 superior (³)
szlig
ß
ß
sharp s (ß)
THORN
Þ
Þ
Thorn nordic (Þ)
thorn
þ
þ
thorn nordic (þ)
times
×
×
inmultire (×)
trade
™
nedefinit
trademark (™)
Uacute
Ú
Ú
U ascutit (Ú)
uacute
ú
ú
u ascutit (ú)
Ucirc
Û
Û
U circumflex (Û)
ucirc
û
û
u circumflex (û)
Ugrave
Ù
Ù
U grav (Ù)
ugrave
ù
ù
u grav (ù)
uml
¨
¨
umlaut (¨)
Uuml
Ü
Ü
U umlaut (Ü)
uuml
¨
ü
u umlaut (ü)
Yacute
Ý
Ý
Y ascutit (Ý)
yacute
ý
ý
y ascutit (ý)
yen
¥
¥
yen (¥)
yuml
ÿ
ÿ
y umlaut (ÿ)
Related papers
Insulation condition assessment of high‐voltage rotating machines using hybrid techniques
Iet Generation Transmission & Distribution, 2018
Carlo Ginzburg
Marcos Lopes & Sidney Munhoz (org.) Historiadores de nosso tempo., 2010
Teaching through Play: Using Video Games as a Platform to Teach about the Past
Communicating the Past in the Digital Age Proceedings of the International Conference on Digital Methods in Teaching and Learning in Archaeology (12th-13th October 2018), 2020
Additive Manufacturing / 3D Printing Technology: A Review
Analele Universităţii "Dunărea de Jos" din Galaţi, 2019
Strange non-dissipative and non-chaotic attractors and Palmer’s deterministic quantum mechanics
Chaos, Solitons & Fractals, 2009
Friction Coefficients of Ions in Aqueous Solution at 25 °C
Journal of the American Chemical Society, 1998
Emergency remote CAD teaching using licensed software in apparel during the COVID-19 pandemic: a collaborative learning approach
Research in Learning Technology
Claudia Hammerschmidt, editora. El retorno de Leopoldo Marechal. La recepción secreta de un ‘poeta depuesto’ en la literatura argentina de los siglos XX y XXI
Revista Iberoamericana, 2019
- Find new research papers in:
- Physics
- Chemistry
- Biology
- Health Sciences
- Ecology
- Earth Sciences
- Cognitive Science
- Mathematics
- Computer Science