100% au considerat acest document util (3 voturi)

648 vizualizări

HTML CSS JavaScript FIM

Documentul prezintă noțiuni de bază despre HTML și structura paginilor web. Include definiții ale unor termeni cheie precum tag, element, antet, corp. De asemenea, oferă exemple de editoare de cod și pagini web.

Încărcat de

Andreea Dobre

Drepturi de autor

Formate disponibile

Descărcați ca PDF, TXT sau citiți online pe Scribd

100% au considerat acest document util (3 voturi)

648 vizualizări

HTML CSS JavaScript FIM

Încărcat de

Andreea Dobre

Drepturi de autor

Formate disponibile

Descărcați ca PDF, TXT sau citiți online pe Scribd

Sunteți pe pagina 1/ 345

Curs 1 HTML

Limbajul HTML- Static webpages

Style
Legaturi- Link
Liste
Internet versus World Wide Web
Internet


Schimb de informatii -> calculatoarele sunt inter-conectate ->
retele de calculatoare.

Inter-retele sunt retele de calculatoare conectate intre ele
(retele de retele de calculatoare) – Internet.

World Wide Web Set de servicii sau metode de acces la informatia

stocata pe un calculator prin intermediul retelei internet:

FTP (File Transfer Protocol) pentru transferul fisierelor

Telnet pentru accesul de la distanta la resursele unui calculator

Electronic Mail de mesagerie electronica (e-mail)

World Wide Web este o alta metoda (serviciu) de acces la
informatia stocata pe un calculator aflat oriunde in lume -
Distribuit, Interactiv, Dinamic
Serviciul World Wide Web

World Wide Web (WEB) - reprezinta un spatiu informational alcatuit

din resurse situate in locatii cunoscute sub numele de noduri.

Nodurile sunt utilizate prin intermediul unui sistem hypertext

folosind modul de identificare URL(Uniform Resource Locator).
Terminologie Web
IP address: fiecare calculator de pe internet are o unica adresa, numita IP
Internet Protocol adress, o serie de 4 numere intre 0 si 255 , separate de puncte,
adica in formatul _._._._ (4 byte =4 bilioane adrese IP)

TCP/IP: reteaua internet dispune de mijloace de dirijare a pachetelor astfel

încat acestea sa ajunga la destinaţie -Internet Protocol (IP). Reteaua Internet
dispune de mijloace de corectie a erorilor de transmitere a pachetelor -
Transfer Control Protocol (TCP).

DNS: Domain Name System: este un sistem folosit in Interent pentru a traduce
numele domeniilor (ex: www.romtelecom.ro) in adresa IP corespunzatoare.

URL:Uniform Resource Locator un standard de identificare si accesare a

resurselor din Internet. URL concatenează trei elemente:
Nume Protocol Internet utilizat pentru accesarea resursei:
http:// sau ftp:// sau file:// - pentru accesul la fisierele stocate pe calculatorul
local.
Nume Server/Domeniu identificatorul calculatorului care stochează resursa,
format din: nume_calculator.domeniu_internet
Indicator de cale si nume_fisierului destinaţie
Exemplu: http://www.pub.ro/news/index.html
Terminologie Web

Routers/gateways – directioneaza datele intre adresa IP sursa si adresa IP

destinatie (maxim 30 redirectionari)

Comanda : traceroute www.cnn.co.jp

Listeaza toate numele de domeniu ale routerelor prin care trec datele.

3 masuratori de timp independente (cat a durat ca datele sa ajunga la router) –

proportionale cu distanta fizica intre aceste routere.
Terminologie Web
Web Page: fisiere speciale ce pot fi interpretate de anumite aplicatii si
contin pe langa text si imagini, filme, sunete, link-uri si a caror extensie
este .html sau .htm.

Web Site: colectie organizata de fisiere (pagini Web), vizibile de

toata lumea formeaza un site web.

Web Server : calculator care ruleaza in permanenta o aplicatie

speciala (httpd) si gazduieste mai multe site-uri web.
Ex:Apache Server, Microsoft Web Server, Oracle Web Server.

Browser: aplicatie care permite vizualizarea paginilor de web, sa

navigheze urmand legaturile dintre ele si sa transfere fisiere redand astfel
toata informatia text, grafica, video si audio inglobata in aceste
documente.
Ex: Internet Explorer, Netscape Navigator, Chrome, Opera, Mozila.
Accesam un Web Site ?
UTILIZATOR

URLul
Afişează paginii Web

Solicită conectarea la server
BROWSER WEB SERVER WEB

Transmite fişierul


Browser de pe calculatorul client se conecteza la un server local (DNS)

Cere adresa IP a paginii de web respective

DNS intoarce clientului adresa IP a paginii respective, de exemplu 1.2.3.4

Clientul trimite o cerere sa afle ce calculator din Internet are adresa 1.2.3.4

Gateways sau Routers: directioneaza date, similar cu sistemul postal

Webserver-ul de pe calculatorul cu adresa 1.2.3.4 recunoaste cererea si trimite fisierul
paginii de web.

Transferul se realizeaza printr protocol de transfer: Hyper Text Transfer Protocol (HTTP)
In ce limbaj e scrisa o pagina de web ?

Incarcam in Browser o pagina oarecare

CTRL+U sau View/PageSource

HTML -codul sursa

(1989) Tim Berners-Lee a scris primul draft pentru un sistem numit

"World Wide Web"

(1990) Tim Berners-Lee a scris primul browser si primul server WEB

elaborand specificatiile pentru URL, HTTP, HTML, XML, CSS,
XHTML

(1994) Tim Berners-Lee a creat World Wide Web Consortium W3C

(2017) - Sir Tim Berners-Lee primesteTuring Award

“The Web is considered one of the most influential computing
innovations in history”.
HTML

HTML inseamna Hyper Text Markup Language

HTML nu este un limbaj de programare. Nu utilizeaza
instructiuni (ca C-ul/ Pascal-ul), nici comenzi ca (FoxPro-
ul). HTML este un schelet care da paginii de web o
structura.

HTML limbaj de marcaje (de descriere) semntice, are o
anumita sintaxa bazata pe etichete/ tags. <> </>

Continutul documentului descris prin diferite tag HTML

Fisiere HTML = Pagini Web
HTML


HyperText inseamna text asociat cu link-uri – referiri
catre o noua pagina de web.

MarkupLanguage e un limbaj de comunicare in care text-
ul e asociat cu link-uri, imagini, tabele, liste etc.

CSS - Cascading Style Sheets limbaj folosit pentru a
descrie prezentarea – style unui document scris in HTML

Retineti ! HTML - scheletul CSS – hainele, machiajul
Cum edităm o Pagina de Web ?
Orice editor de text poate fi folosit pentru a crea pagini Web.

Unele editoare de text oferă mai multe facilități pentru verificarea erorilor,
colorarea sintaxelor și salvarea unor tipuri de scriere prin completarea
lucrurilor pentru dvs :
Sublime Text – foarte popular cu dezvoltatorii (necesită de curbă de învățare)
Notepad – peWindows PC
Visual Studio - pe Windows PC
TextEdit - pe Mac, dar asigurați-vă că salvați ca text simplu, nu ca fișier .rtf sau
.doc.
XCode - dezvoltatorii de Mac pot fi familiarizați cu XCode
BlueGriffon este un editor de conținut WYSIWYG ("Ceea ce vezi este ceea ce
primești") pentru World Wide Web. Powered by Gecko, motorul de randare al
Firefox, este o soluție modernă și robustă de editare a paginilor Web în
conformitate cu cele mai recente standarde Web.
Atom este un alt editor de platforme, creat de GitHub.
Vim sau Emacs sunt editorae excelente pe care Web-ul a fost construit, dar dacă
nu sunteți deja familiarizat cu acestea, nu este timpul să încerca ți.
Editoare Online

JsBin - http://jsbin.com/ - instrument open source pentru depanarea

dezvoltării în colaborare. Acest instrument este foarte simplu, trebuie doar să
deschideți să examinați codul, să examinați rezultatul etc, pute ți modifica
exemplele după cum doriți, de asemenea, le puteți modifica / clona / salva /
împărtăși.

Tutorialele (sau pe YouTube):

http://code.tutsplus.com/tutorials/javascript-tools-of-the-trade-jsbin--net-36843)

Rețineți că este întotdeauna mai bine să vă conectați (este gratuit) dacă nu dori ți
să pierdeți contribuția / munca personală.
Editoare Online
CodePen - https://codepen.io/ este un editor de cod HTML, CSS, JavaScript
cu care previzualizări codul în browser. Ajută la testarea dispozitivelor
încrucișate, programarea în pereche.

CodePen este un serviciu excelent, puteți începe a coda imediat, deoarece nu vă

cere să descărcați nimic și îl puteți accesa, împreună cu proiectele dvs. salvate
de la orice browser web.

Un articol interesat dacă utilizați CodePen:

10 Cool Things You Can Do with CodePen and JavaScript [Chris Coyier, 13
iunie 2016]:

https://www.sitepoint.com/cool-things-codepen-javascript/

Există multe alte instrumente folositoare, cum ar fi JSFiddle și Dabblet

(instrumentul Lea Verou folosit pe larg pentru CSS).
Cum modificam o Pagina de Web
Manual, lansati in executie editorul de text Notepad sau Visual Studio


– Start→Programs→Accessories→Notepad
– Introduceţi textul.
– Daca salvam fisierul cu numele index.html, devine pagina default a
browser-ului accesand-o prin double click. Putem salva fisierul si sub alt
nume, dar cu extensia .html sau .htm


Cu ajutorul editoarelor HTML precum Visual Studio, Homesite, Adobe
Golive, Microsoft Frontpage, Macromedia Dreamweaver (aplicaţia cea mai
apreciata de profesionisti), CoffeeCup HTML Editor, Netscape Composer.

Porniti browser-ul Microsoft Internet Explorer;



– File→Open si deschideti fisierul salvat cu extensia .html

– Pentru a aduce modificari fisierului, executati click-dreapta pe suprafata
acestuia si din meniul contextual alegeti View Source si veti obtine codul-
sursa. Dupa modificare fisierului, salvati-l.
HTML – notiuni de limbaj

HTML este un text semantic adnotat folosind un limbaj
special pentru a adauga noi specificatii textului.

Tag – incep cu caracterul < si se incheie cu caracterul >
<item> - inceputul unei secvente
</ item > - sfarsitul unei secvente
< item /> - gol/ vid

Element – structura ce cuprinde un tag de început și de
sfârșit sau un tag vid
<item> text text </item>
<item / >
Informația cuprinsă intre tag-urile de început și sfâr și se
numește continutul elementului.
Structura generala a Paginilor de Web

<!DOCTYPE html>
<html>
<head> 
<title> Titlul documentului </title>
</head>
<body> 
</body>
</html>
Tag-ul comentariu

Browser-ul nu afiseaza/interpreteaza comentariile si spatiile

libere din documentele HTML.

Comentariile incep cu tag-ul <!- -, pot contine orice caracter si se

termina cu tag-ul -- >.

Ca regula generala trebuie plasat fiecare comentariu pe o linie

separata şi este preferabil sa se evite in interiorul comentariului
utilizarea caracterelor speciale de tipul <, >, & sau ! Nu este
indicat să se includă alte tag-uri HTML între tag-urile de
comentariu.
Versiuni HTML
HTML 1.0 (1991) – notiunea de hypertext (un document poate
referi alt document). Primul browser Mosaic

HTML 2.0 (1995) - tabele, image maps, incarcarea fisierelor,

limbaj international. Browser-re Netscape si Internet Explorer

HTML 3.0-3.2 (1997) – frame-uri, applets, text in jurul imaginilor,

elemente de text, JavaScript si elemente de CSS

HTML 4.0- 4.01(1999) – s-a inlaturat formatarea specifica

browserului, accent pe CSS

XHTML 1.0 (2000) – standardizare.

HTML5 (2014) – noi elemente si atribute. Standardul viitorului.

XHTML

Browser : calculatoare, telefoane mobile, diverse dispozitive mici

Initial limbajul HTML a fost conceput astfel incat prin tag-uri sa se
defineasca continutul si nicidecum tag-urile sa fie folosite pentru
formatarea documentului, font, color, size etc. - XHTML
XHTML- versiunea mai “curata” si mai stricata a limbajului
HTML 4.01

XHTML Extensible HyperText Markup Languge


XML Extensible Markup Language limbaj de marcare destinat sa
transporte si stocheaze date, nu are tag-uri predefinite, poate fi
interpretat atat de oameni cat si de masini.

Combinatie intre HTML (doar afiseaza) si XML(doar descrie)

Nu foarte diferit de versiunea HTML 4.01
HTML versus XHTML
XHTML elementele obligatorii:

<! DOCTYPE html>

<html>
<head>
<title> </title>
</head>
<body>
.....
</body>
</html>
HTML versus XHTML


XHTML elementele trebuie inchise corect (s-a adaugat un spatiu
liber inainte />)

XHTML documentul trebuie sa aiba un singur element radacina
<html>

XHTML elementele trebuie sa fie scrise cu litere mici

XHTML elementele trebuie sa fie “properly nested” corect
imbricate

XHTML numele atributelor trebuie scrise cu litere mici (width),
iar valorile atributelor intre “” . Minimizarea atributelor e
interzisa(<option selected=”selected”/>,
<input disabled=”disabled” /> )

XHTML impatit in 32 Module- seturi bine definite de elemente ce
pot fi folosite separat in diverse aparate mici sau aplicatii mai
complexe.
W3C Validare
De peste 15 ani, W3C a dezvoltat și găzduiește unelte gratuite și
open source folosite în fiecare zi de milioane de dezvoltatori web și
designeri web:
Validatorul W3C https://validator.w3.org/ verifică validitatea
marcării diferitelor formate de documente web, cum ar fi HTML
https://validator.w3.org/docs/help.html#validation_basics

Validatorul CSS verifică documente CSS (Cascading Style Sheets)

și documente (X)HTML care utilizează foi de stil CSS.
https://jigsaw.w3.org/css-validator/

Unicorn este validatorul unificat al W3C, care vă ajută să

îmbunătățiți calitatea paginilor Web prin efectuarea unei varietăți de
verificări. Unicorn colectează rezultatele validatorilor HTML și CSS,
precum și alte servicii utile, precum internaționalizarea, feedurile
RSS / Atom și anteturile http.
HTML 4 versus HTML 5

HTML5 este noul standard din 2014 suportat de toate browserele

HTML5 noile elemente vor fi bazate pe HTML, CSS and
JavaScript (eliminarea/inlocuirea unor elemente HTML4/HTML5)
Exemplu: <acronym> / <abbr>

HTML5 trebuie sa fie independent de „device”

HTML5 reduce necesitatea plugins externe (ex: Flash)

HTML5 mai multe elemente pentru inlocuirea scripturilor

In HTML5 declaratia <!DOCTYPE html> obligatorie!

In HTML5 declaratia de encodare a caracterelor simplificata

<head>
<meta charset="UTF-8">
</head>
HTML 5

HTML5 introduce elemente noi pentru o mai buna manipulare si

structura, pentru desenare si pentru continutul media:

• Semantice (8): <header>, <footer>, <article> ,<section>, <nav>,

<main>, <aside> si <figure>
• Multimedia <video> and <audio>
• Controale noi pentru: calendar, date, time, email, url, search
• Grafice <svg> si <canvas>

HTML5 API's (Application Programming Interfaces):

Geolocation , Drag and Drop ,Local Storage, Application Cache ,

Web Workers , SSE
HTML5
Toate documentele trebuie sa aiba obligatoriu Document Type
Definition (DTD), adica o declaratie <!DOCTYPE html>

- este intotdeauna in prima linie a documentului, inainte de <html>

- <!DOCTYPE html > nu e un tag al limbajului HTML

este o instructiune pentru browser, set de reguli ptr a afisa corect
informatia.

- declaratia <!DOCTYPE html> NU este case sensitive.

Exemplu HTML4:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML -tags
Tag-uri/etichetele:
<numeTag> continut </numeTag>

cuvinte cheie sau NumeTag, delimitate de paranteze
unghiulare, de ex: <p>, <html>, <h1>

de obicei sunt in pereche, tag de inceput / deschidere
<body> si tag de sfarsit/inchidere </body>

Tag-ul de deschidere poate avea un set de atribute ce
adauga informatie:

<NumeTag Atribute=”valoare”> Textul afectat de acest

tag </NumeTag>
HTML -tags
Element tot ceea ce e cuprins intre <NumeTag> DA </NumeTag>
Tag-urile sunt de 2 feluri:

elemente vide au efect imediat in punctul din document in
care apar, deschidem si inchidem imediat <NumeTag />,
Exemplu: <br /> Insereaza o linie noua
<hr /> Inserează o linie orizontala in locul in care apare
<img src="poza.gif" /> Specifica inserarea unei imagini.

elemente nevide sunt in pereche, de inceput si de sfarsit, intre
care apare textul afectat. Ele au efect numai asupra textului inclus
între ele
Exemplu: <i>Acest text va fi afişat italic</i>

Tag-urile pot si imbricate: pot fi utilizate şi în interiorul altor tag-

uri
<Tag1><Tag2>Textul afectat de tag</Tag2></Tag1>
HTML -atributul tag-ului
Atributele adauga informatie modificand comportamentul unui tag

Atributele au nume si pot lua anumite valori, avnd sintaxa:

NumeAtribute=”valoare”

Atributele sunt intotdeauna specificate in tag-ul de inceput

Dacă în tag există mai multe atribute, ele trebuie separate prin
spaţiu.
<NumeTag NumeAtribut="Valoare">Textul afectat de tag
</NumeTag>
Exemplu:<img src="poza.gif" alt="Nu s-a gasit poza.gif" />

Intotdeauna se folosesc " " , doar in cazuri speciale folositi ' '
Exemplu: <p title='John "ShotGun" Nelson'> Porecla John </p>
HTML5 -atributul tag-ului

Oricare din aceste variante este acceptabila in HTML5:

Empty <input type="text" value="Vasile" disabled>

Unquoted <input type="text" value=Vasile>

Double-quoted <input type="text" value="Vasile Stanescu">

Single-quoted <input type="text" value='Vasile Stanescu'>

Reprezentare Hexazecimala a Culorilor

<body bgcolor=”blue”>  </body>

Valoarea poate fi : “red”, “green”, “blue”, “yellow” etc...ptr alte
nuante folositi reprezentarea numerelor in hexazecimal.

O culoare reprezentata in hexazecimal are nevoie de 3 octeti: o

combinatie de Red, Green, Blue - RGB
(0..255,0..255,0..255) – 255*255*255 = 16 milioane de culori
Exemplu: negru #000000 RGB(0,0,0)
alb #ffffff RGB(255,255,255)
rosiatic #600000 RGB(96,0,0)
gri #606060 RGB(96,96,96)

In HTML reprezentarea hexazecimala incepe cu #.

Structura generala a Paginilor de Web

<!DOCTYPE html>
<html>
<head>
<title> Titlul documentului </title>
<meta charset="UTF-8">
</head>
<body> 
</body>
</html>
Setul de caractere HTML
Pentru a afisa corect limbajul HTML, browserul trebuie sa stie
ce set de caractere sa foloseasca:

ASCII suporta numerele (0-9), litere (A-Z), si cateva caractere

speciale: ! $ + - ( ) @ < > .
ANSI (Windows-1252) setul de caractere Windows. Suporta
256 coduri de caractere diferite.
ISO-8859-1 set de caractere ptr HTML4. Suporta 256 coduri
de caractere diferite.
Deoarece ANSI si ISO erau limitate, setul de caractere UTF-8
este folosit in HTML5.
UTF-8 (Unicode) acopera aproape toate caracterele si
simbolurile din lume.
<meta> HTML4 vs HTML5

Pentru a afisa corect limbajul HTML, browserul trebuie sa stie

ce set de caractere sa foloseasca:

HTML4 : <meta http-equiv="Content-Type"

content="text/html;charset=ISO-8859-1">

HTML5: <meta charset="UTF-8">

Entitati HTML

Caracterele rezervate limbajul HTML (<, >, & ) trebuie

inlocuite cu entitati HTML.

Caracterele care nu sunt pe tastatura pot fi inlocuite cu entitati

Sintaxa : &nume_entitate sau &#numar_entitate

Exemple: < &lt &#60 ; > &gt >

Entitatea HTML non-breaking space:   adauga un

spatiu liber (nu trecerea la o noua linie )
Simboluri HTML

Simbolurile matematice, tehnice nu sunt pe tastatura, deci ele

pot fi inlocuite cu entitati HTML.

Exemple:

∀ ∀ ∀ ORICARE

∃ ∃ ∃ EXISTA
∈ ∈ ∈ APARTINE
∑ ∑ ∑ SUMA

Γ Γ Γ GAMA

→ → →
€ € € EURO
Prima mea Pagina de Web

<!DOCTYPE html>
<html>
<head>
<title> Cursul de informatica </title>
<meta charset="UTF-8">
</head>
<body> Tag-ul title este obligatoriu ptr orice HTML
deoarece: defineste titlul in tab-ul browser-ului,
furnizeaza titlul cand pagina e adaugata in Favorites,
afiseaza titlul in paginile rezultate in procesul de search
</body>
</html>
Structura elementul <head> </head>

Acest element contine informatii despre document (date despre
date), cum ar fi titlul său, cuvinte cheie utilizabile de motoarele de
cautare, descrierea documentului si style-sheet-uri asociate/utilizate

Aceste metadate nu sunt afisate de browser

Poate contine urmatoarele tags:
<title> titlul documentului
<link> defineste relatiile documentului propriu-zis cu alte
documente auxiliare
<base> defineste o adresa de default si un default target
(adica unde sa se deschida link-ul) pentru toate link-
urile dintr-o pagina
<meta> defineste un set de „metadate“=date auxiliare
utilizate in diverse alte scopuri: cuvinte cheie, autor,)
<script> defineste un script client-side (secventa de
instructiuni ce se executa în client)
<style> defineste stilurile de document (style-sheet) folosite
in document
Structura - elementul <body> </body>
Elementele ce apar în corpul unui document sunt de tip bloc ,
tip inline sau tip nedefinit (pot fi atat inline cat si block).Tipul
elementului defineste modul de afisare.
Elemente de tip bloc:
întotdeauna ocupa întregul spațiu disponibil pe ecran
continutul elementului pe o linie noua
Structura - elementul <body> </body>
Elementele de tip bloc :
-containere de text:
<main>, <article>, <aside>, <footer>, <header>
<p> definirea unui paragraf
<div>definirea unei diviziuni logice de text
<pre>definirea unui text preformatat
<blockquote>definirea unui citat de dimensiuni mari
<address> definirea unui informatii specifice de adresa
<br />
<button>, <canvas>, <caption>
-tip header <h1..h6>
-definesc (sau sunt strans legate de) liste <dd>, <dl> <dt>
-definesc tabelele
-alte elemente
<form> definirea unui formular pentru a introduce date
<frameset> definirea unui „frameset“
Structura - elementul <body> </body>
Elemente de tip inline:
întotdeauna ocupa doar spațiul necesar pe ecran
mai multe elemente pe o linie, dacă nu încap se face „ wrap” - unul
în continuarea celuilalt
Structura - elementul <body> </body>
Elemente de tip inline:
-de marcare logica a proprietatilor unei portiuni de text
<em> text scos in evidenta
<strong>text puternic scos in evidenta, etc
-de marcare fizică a proprietăţilor unei porţiuni de text
<i>italic
<b>bold
<s>subliniat
- de marcare a proprietatilor speciale ale unei portiuni de text
<a> anchor (ancoră, legătură hypertext)
<img> imagine
<bdo> redefinirea directiei in care se citeste textul
- de definire a controalelor din interiorul unui formular
<select> lista de selectie
<textarea> camp de introducere a unui text
<label> eticheta unui camp
<button> buton
<option> lista de selectie a unor optiuni de meniu
Elemente bloc vs. inline

Elementele de tip block intotdeauna adauga o linie noua si ocupa
toata latimea disponibila
<div>, <h1>...<h6>, <p> si <form>

Elemente inline ocupa spatiul minim necesar
<span>, <img>, <a>

Exemple:
<div style="background-color:#670067; color:white;
padding:20px;">
<h3> Literatura universala</h3>
<p> Alegeti o carte din literatura japoneza </p>
</div>

<h1> Ce<span style="color:red">carte</span> citesti? </h1>

Structura - elementul <body> </body>

Elemente de tip nedefinit (pot fi atat inline cat si block).

Daca sunt utilizate ca elemente inline (adică sunt in interiorul unui
alt element inline) ele nu trebuie sa contina nici un element de tip
bloc:
<map> definirea unei imagini senzitive (prelucrata client-side)
<area> zona activa inauntrul unei imagine senzitive
<param> definirea parametrilor unuiobiect sau applet Java
<del> defineste text sters
<ins> defineste text inserat
<object> includerea unui obiect
<script> includerea unui script client-side
<iframe> definirea unei frame inline (in punctul în care apare
elementul)
Tag-uri de tip bloc/
Titlu de capitol/sectiune <h1>
HTML construit pe baza ierarhie de informatii


Tag heading <h1>..</h1> ... <h6>..</h6> - 6 nivele de titluri
Browsers adauga automat o linie goala inainte si dupa aceste tag-uri.

Exemplu:
<body>
<h1> CEO- Titlu de marimea cea mai mare</h1>
<h2> VP- …. </h2>
<h3 >Director - Titlu de marimea mijlocie</h3>
<h6> Secretara - Titlu de marimea cea mai mica</h6>
</body>
</html>

Atributele de alieniere “right”,”left“,”center” sunt depasite

Search engines folosesc tagul heading pentru a indexa structura
documentului HTML.
Tag-uri de tip bloc/ Containere de text
tag-ul Paragraf <p>

Tag-ul <p> si </p> face trecerea la un paragraf nou
Browser-ul adauga automat o linie goala inainte si dupa titlu.
<p> Continutul paragrafului </p>

In combinatie cu tag-ul <br/> se realizeaza trecerea la o linie noua
Exemplu:
<html>
<head><title>Exemplul de Paragraf</title></head>
<body>
<p>Un<br />a para<br />graf intrerupt</p>
<p> Numarul de linii dintr-un paragraf depinde de
marimea ferestrei browser-ului.Daca redimensionam fereastra browser-
ului, nr de linii ale paragrafului se schimba. </p>
</body>
</html>
Tag-uri de tip bloc/ Containere logice
tag-ul <div>

Tag-ul <div> si </div> folosit la formatarea şi delimitarea unui
bloc de text.
Browser-ul adauga automat o linie goala inainte si dupa titlu.

Atributul style afiseaza o sectiune/ bloc de text albastru-verzui
Exemplu:
<html>
<head><title>Exemplul de Div</title></head>
<body>
<h3>Un titlu oarecare</h3>
<p>Un paragraf oarecare</p>
<div style=" background-color:#66ff99;color:#3C00F4;">
<h3>Text scris in culoarea setata</h3>
<p>Textul e format dintr-un titlu si un paragraf.</p>
</div>
</body>
</html>
Tag-uri de tip bloc/ Text Preformatat tag-ul <pre>


Tag-ul <pre> si </pre> folosit la afisarea unui bloc de text ca in
codul sursa, toate spatiile goale vor fi afisate.
Folosit pentru afisarea codului programelor, a poeziilor
Exemplu:
<html>
<head><title>Text Preformatat</title></head>
<body>
<pre>
<b>A venit, a venit toamna </b>
<i>Acopera-mi inima cu ceva</i>
</pre>
</body>
</html>
Tag-uri de tip bloc/ Indentare tag-ul <blockquote>

Tag-ul <blockquote> si </blockquote> folosit la afisarea
citatelor lungi. Blocul de text e indentat cu un TAB fata de ambele
margini (stanga si dreapta) ale spaţiului disponibil (pagina, celula
de tabel, etc.)

Tag-ul <q> si </q> folosit la afisarea citatelor scurte (adauga „”)
Exemplu:
<html>
<head><title>Citate</title></head>
<body>
Textul urmator este indentat:
<blockquote>Acest bloc de text este indentat cu un TAB fata de
ambele margini ale paginii.</blockquote>
<q> Cogito ergo sum</q>
</body>
</html>
HTML5 elemente semantice
Elementele semantice funcționează identic ca cele de tip bloc, dar
cu noi posibilități de administrare și modificare a aplicației web –
se poate infera informație din pagina (puteți face search doar într-
un anumit element):

<header> , <footer> , <nav>, <section>, <article> , <aside>,

Avantaje: abilitatea de a utiliza CSS pentru a proiecta elementul

semantic direct, fără a necesita clase suplimentare CSS.
Exemple: flexbox în CSS pentru a pune elementul <aside> de o
parte, pe partea dreaptă a paginii web.
CSS Media Queries pentru a re-aranja elementele semantice pentru
un browser mobil.
HTML5 <header> <section> <main> <footer>
<header> defineste sectiunea din partea de sus a paginii sau un set
de link-uri de navigatie (poate contine tag <h1>-<h6>, logo,
icoane).Un document poate avea mai multe elemente <header>
<header> nu poate fi plasat in tag-urile <footer>, <address> sau in
alt tag <header>.
<footer> defineste sectiunea din partea de jos a paginii (autor,
copyright, contact, diverse link-uri) . Un document poate avea
mai multe elemente <footer>.
<main> defineste continutul principal al documentului si trebuie
sa fie doar un singur element <main> in document. Informatia
din interior trebuie sa fie unica, nu trebuie sa se repete in zonele
laterale, link-uri de navigatie sau in formulare de search.<main>
nu e un descendant din <article>, <aside>, <footer>,
<header> ,<nav>
<section> defineste o sectiune in document, cum ar fi capitole,
headers, footers, sau orice alta sectiune a documentului.
HTML5 <article> <aside>
<article> o sectiune de sine statatoare, poate fi distribuita
independent de restul site-ului. Pot exista mai multe elemente
<article> in acelasi document. Folosit in postari pe blog, forum
comentarii:
Exemplu:
<article>
<h1>Google Chrome</h1>
<p>Google Chrome is a free, open-source web browser
developed by Google, released in 2008.</p>
</article>

<aside> defineste continut suplimentar si e in raport cu continutul

din jur
HTML5 <time>

Microformats – metadate care sunt machine- readeble, pot adauga

CSS sau JavaScript pe aceste elemente

Exemplu:
<body>
<p> Aveți următoarea programare
<time datetime="2015-12-13T08:30:00-05:00">
<strong>12 Decembrie la 08:30 AM</strong>
</time>.
</p>
</body>

Am adaugat informație care poate fi prelucrata, chiar dacă nu e

nicio diferența în afisare. Pot face search după <time> și pot
adauga informația în aplicația de calendar.
HTML5 <figure> <figcaption>

Elementul <figure> marcheaza o poza/imagine/grafic in document

Elementul <figcaption> adauga explicatie figurii

<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304"
height="228" />
<figcaption>Fig1. - A view of the pulpit rock Norway.</figcaption>
</figure>

Pot aplica CSS pe elemetul <figure> pentru a-l stiliza si sa pastrez

acelasi stil pe toate imaginile din pagina/site.
Tag-uri de tip inline/ tag-uri logice


Indica doar cum anume sa fie utilizat textul marcat NU si cum
anume sa fie afiasat - asemanatoare tag-urilor folosite la
marcarea paragrafelor sau titlurilor.

Tag-urile stilurilor logice indica doar faptul ca textul este o
definitie, o bucată de cod sau doar o portiune de text care trebuie
scoasa in evidenţă in raport cu contextul.

Tag-urile stilurilor logice nu sunt invechite, dar obtinem efect
mai bun cu CSS
Tag-uri de tip inline/ tag-uri logice

<em>Text accentuat</em>
<strong>Text puternic accentuat</strong>
<dfn>Definitie (cuvant care va fi definit)</dfn>
<code>Secvenţă de cod afişată cu font fix (ex Courier)</code>
<samp>Esantion, similar cu code</samp>
<kbd> Text tastat de utilizator</kbd>
<var>Variabila</var>
<cite>Citatie</cite>
<acronym title=”Org Nat Unite”>O.N.U. </acronym> HTML4
<abbr>O abreviere </abbr> HTML5
<mark> Text marcat</mark>
<ins>Un text subliniat)</ins>
<del>Text marcat ca sters </del>
<sub>Text scris ca indice</sub>
<sup>Acesta e un exponent </sup>
Tag-uri de tip inline/ tag-uri fizice

Indica browser-ului cum anume sa fie afisat textul marcat.

Utilizarea stilurilor fizice are neajunsul ca daca browser-ul nu
poate afisa acel stil el il va substitui cu un altul.

Tag-urile stilurilor fizice nu sunt invechite, dar obtinem efect mai
bun cu CSS
<b> Text ingrosat (aldin)</b>
<i> Textul italic (cursiv) </i>
<u> Text subliniat </u>
<big> Text afisat cu un font mai mare decat restul </big>
<small> Text afisat cu un font mai mic decat restul </small>
<tt> Text monospatiat </tt>

Imbricare
<p><b>bold</b>, <i>italic</i>, <b><i>bold italic</i></b>,
<tt>teletype text</tt>, si <big>big</big> si
<small>small</small> text.
Legaturi/link-uri <a>

Legatura/link-ul (hyperlink-ul) - constructie de baza - poate fi
definita ca o conexiune de la o resursa Web la alta.

Legatura/link are doua capete zise si ancore - sursa/destinatie si o
directie. Ancora destinatie poate fi orice resursa Web :un
document HTML, un element din interiorul unui document
HTML, o imagine, un clip, un sunet, un program, etc.

Tag-ul <a> si </a> defineste un (hyper)link.

Implicit link-urile apar in toate browserele asa:
- un link ne-vizitat este subliniat si albastru
- un link vizitat este subliniat si purple
- un link active este subliniat si rosu
Atributele tag-ului <a> - partea I

name - marcheaza destinatia legaturii, folosit, de obicei, pentru
navigarea în cadrul aceleiaşi pagini.

href - URL-ul fisierului. Adresa poate fi absoluta sau relativa.

type indica tipul fisierului ( .html, audio, video etc. )

title furnizeaza o scurta descriere a fisierului.

target precizeaza fereastra in care va fi incarcat fisierul. Acest
atribut accepta urmatoarele valori:
"_blank" : fisierul se incarca intr-o noua fereastra, fara nume
"_self" : fisierul se incarcă in frame-ul/cadrul curent
"_top" : fisierul se incarca in intreaga fereastra a browser-ului
"_parent": fisierul se incarca in fereastra parinte a ferestrei care
contine link-ul
accesskey ia o valoare care este un caracter. Link-ul poate fi accesat
apasand simultan tasta "Alt" si tasta corespunzatoare caracterului
respectiv.
Atributele tag-ului <a> - partea II


Atributele shape si coords specifica forma si coordonatele unui
link. Ofera posibilitate utilizatorului sa specifice o harta de imagini
senzitive (client-side image maps, prin intermediul elementului
<object>), un numar oarecare de zone in interiorul unei imagini si un
set de documente/resurse catre care sa indice fiecare zona anterior
definita.
Aceste atribute accepta valorile:
-rect - regiune dreptunghiulară, coords="left, top, right, bottom"
-circle - cerc, coords="center-x, center-y, radius"
-poly - un poligon, coords="x1, y1, x2, y2, ..., xN, yN"
-default - specifica intreaga imagine, sau ce a ramas nedefinit
Atributele tag-ului <a> - partea III


Coordonatele sunt relativ la coltul stanga sus al imaginii. (0,0)

Coordonatele pot fi exprimate in pixeli sau procente.

O rază a unui cerc data ca procent este calculata relativ la cea mai
mica dimensiune a imaginii/obiectului (latimea sau inaltimea).

Daca doua sau mai multe regiuni se suprapun are prioritate cea
definita intîi.

Pentru a crea imagini de harti care merg in toate browserele folositi
elementul <area> inauntrul elementului <map>.
Tag-ului <map> <area> si <img>
Atributul usemap este asociat cu atributul name (sau id-ul)
elementului <map> si creaza o relatie de legatura intre elementul
<img> si <map>.

Exemplu:
<img src="planets.gif" width="145" height="126" alt="Planets"
usemap="#planetmap" />


Tag-ul <a> poate fi folosit in doua moduri
link destinatie
ancora

Link destinatie se creaza o legatura catre alt document folosind

atributul href si a carui valoare este adresa altui site sau
fisier.
<a href=”http://www.romlit.ro/”>Revista Romania Literara</a>
<a href="contact.html">Contact</a>
<a href="/cale/orice.html">Vizit Romania</a>
Exemple Tag-ului <a>


<a href="http://www.romlit.ro/" target=”_blank”>
htpp://www.google.com/</a>
Atentie! Link-ul apare http://www.google.com/ dar ancora e la
site-ul www.romlit.ro ce se deschide intr-o noua fereastra fara
nume


Mail to link: <a href="mailto:[email protected]">Send
e-mail</a>
Link-ul apare Send e-mail, si se initiaza protocolul de transfer
mailto si nu http.
Exemple Tag-ului <a>

O imagine ca link:

<p>Aceasta e sigla ziarului RomaniaLiterara:

Un link catre o imagine:

<a href="../images/me.jpg">Poza mea</a>

Link-ul apare Poza mea si se acceseaza imaginea me.jpg din
directorul/images.
Tag-ul <a>
Folosind atributul id se creeaza o ancora, o legatura intre un anumit
punct al unui document şi un alt anumit punct al aceluiaşi
document sau al altui document.
Salt inauntrul aceluiasi document:
<a id="cuvînt_cheie">Paragraf tintă</a>
<a href="#cuvant_cheie"> Ancora e paragraful tinta</a>
Exemplu:<h2><a id=”C2”>Capitolul 2</a></h2>
<p> ba bla bla</p>

<p><a href="#C2"> Ancora e Capitolul 2</a></p>
Salt inauntrul altui document:
<a href="/cale/doc.html#cuvint_cheie">Salt la paragraful
dorit</a>
Exemplu:<h2><a id=”capitol3”>Capitolul 3</a></h2>
<a href="carte.html#capitol3">Capitolul 3</a>
HTML5 <nav>

<nav> defineste link-uri de navigatie

Exemplu:
<nav>
<a href="www.braila.ro">Braila</a> |
<a href="www.brasov.ro">Brasov</a> |
<a href="www.const.ro">Constanta</a> |
<a href="www.cluj.ro">Cluj</a>
</nav>

Nu toate link-urile unui document trebuie sa fie in interiorul

elemetului <nav>

Elementul <nav> e principalul bloc de navigatie.

Liste

Exista trei tipuri standard de liste:


neordonate <ul> </ul>

ordonate <ol> </ol>

liste de definiţii (glosar) <dl> </dl>
Liste

Exista trei tipuri standard de liste:


neordonate <ul> </ul>

ordonate <ol> </ol>

liste de definiţii (glosar) <dl> </dl>
Liste Neordonate <ul>
Fiecare element este introdus in lista cu ajutorul tag-ului <li> </li>

<ul type=”value”>
<li> Primul element al listei neordonate</li>
<li> Al doilea element </li>
<li> A1 treilea element</li>
</ul>

Browser-ul afiseaza elementele listei:


nenumerotate

afisate identat, unele sub altele

precedate de un semn specific definit de atributul type care
poate avea valorile: disc (cerc umplut/plin) , square, diamond
circle circumferinta unui cerc

Listele neordonate pot contine text, line breaks, imagini, links, alte
liste, etc.
Liste Neordonate Imbricate
Se insereaza o noua lista in interiorul primei liste.
Exemplu:
<html>
<body>
<ul>
<li>Salate</li>
<li>Aperitiv</li>
<li>Ciorba
<ul>
<li>De burta</li>
<li>De perisoare</li>
</ul>
</li>
<li>Desert</li>
</ul>
</body>
</html>
Liste Ordonate <ol>

Fiecare element este introdus in lista cu ajutorul tag-ului <li>

<ol type=”value”>
<li> Primul element al listei neordonate</li>
<li> Al doilea element </li>
<li> A1 treilea element</li>
</ol>

Browserul numeroteaza elementele listei secvential cu numere sau

litere in functie de valoarea „A” „a” atributului type.

Listele ordonate pot contine text, line breaks, imagini, links, alte
liste, etc.
Liste Ordonate Imbricate


Se insereaza o noua lista in interiorul primei liste.


Se pot insera liste neordonate in interiorul celor ordonate si
viceversa.


Felul în care apar afişate listele imbricate diferă mult de la un
browser la altul.
Liste de definitii/ glosar <dl>
Fiecare element este introdus in lista cu ajutorul tag-ului <dt> -
termeni ce trebuie definiti, iar definitiile corespunzatoare se fac
cu tag-ul <dd>.

<dl>
<dt> Termen care urmează să fie definit </dt>
<dd> Definiţia termenului </dd>
<dt> Alt termen </dt>
<dd> Altă definiţie </dd>
</dl>
Elementele listei pot contine text, line breaks, imagini, links, alte
liste, etc.
Browserul numeroteaza elementele listei secvential cu numere sau
litere in functie de valoarea „A” „a” atributului type.
Exemplu legaturi tip ancora in liste
<h1> Meniu </h1>
<ol type=”I”>
<li><a href="#Sal">Salate</a></li>
<li>Aperitive
<ul type=”disc”>
<li>Calde</li>
<li>Reci </li>
</ul>
</li>
<li>Ciorbe</li>
<li><a name="desert">Desert</a></li>
</ol>
<h2><a name="Sal">Salate</a></h2>
<p>Salata Cezar, Salata greceasca, Salata asortata</p>
<h2>Aperitive</h2>
<p>Calde:<br/>Cascaval pane<br/>Creier pane<br/></p>
<h2><a href="http://www.lacena.ro/Meniu_Desert.html#desert">Desert</a></h2>
</body>
</html>
Atributele Standard

Atribute standard sunt:

title - specifica o extra informatie pentru un element. Ia valoarea text.

style - specifica stilul inline pentru un element. Ia valoarea definitie_stil.

id - specifica un id unic pentru un element. Ia valoarea nume_id . Nu

poate incepe cu o cifra.

class- specifica un nume de clasa pentru un element. Se foloseste cel mai

des in style sheet. Ia valoarea nume_clasa.
HTML4 atributele standard NU se folosesc pentru elementele:
<base>, <head>, <html>, <meta>, <param>,<script>, <style> si <title>.

HTML5 atributele standard sunt folosite pentru orice element

Atributele tag-urilor

Exemplu

<NumeTag style="atribut:valoare; atribut:valoare;”>

Textul afectat </NumeTag>

Numele si valorile atributelor trebuie scrise cu litere mici !

Folosirea acestuia introduce numeroase probleme legate de
accesibilitatea pe diverse platforme
Atributele Globale
accesskey - specifica o combinatie de taste pentru activarea/focus unui
elementet. <element accesskey="character"> In HTML 4.01 poate fi
folosit doar pentru elementele: <a>, <area>, <button>, <input>, <label>,
<legend>, si <textarea>.
dir - specifica directia in care sa fie afisat continutul unui element.
<element dir="ltr|rtl|auto"> In HTML 4.01, nu poate fi folosit pentru
elementele: <base>, <br>, <frame>, <frameset>, <hr>, <iframe>,
<param>, si <script>.
tabindex - specifica ordinea pentru navigare ( tasta TAB) pentru un
element. <element tabindex="number"> In HTML 4.01, poate fi folosit
doar pentru elementele: <a>, <area>, <button>, <input>, <object>,
<select>, si <textarea>.
lang - specifica limba de afisare pentru un element. <element
lang="language_code"> In HTML 4.01, nu poate fi folosit pentru:
<base>, <br>, <frame>, <frameset>, <hr>, <iframe>, <param>, si
<script>.

In HTML5 aceste atribute globale sunt folosite pentru orice element.

Atributele Globale HTML5
contenteditable - specifica daca continutul unui elementet se poate edita
sau nu. Suportat de majoritatea browser-elor.
<element contenteditable="true|false|inherit">
hidden - specifica daca continutul unui element sa fie afisat sau nu.
Suportat de majoritatea browser-elor cu exceptia IE.
<element hidden="hidden">
spellcheck - specifica daca continutul unui element sa fie verificat sau nu
Suportat de majoritatea browser-elor cu exceptia IE si Firefox.
<element spellcheck="true|false">.
draggable - specifica daca un element poate fi manipulat sau nu. Suportat
de majoritatea browser-elor cu exceptia IE si Opera.
<element draggable="true|false|auto">
dropzone - specifica daca elementele „dragged” pot fi copiate/mutate/link
sau nu. Nu este suportat de niciun browser inca.
<element dropzone="copy|move|link">
contextmenu - specificat pentru elementul <p>, apare la right-click.
Nu este suportat de niciun browser inca.
<element contextmenu="menu_id">
Atributele Eveniment Globale
Evenimentele definesc actiuni si permit executarea scripturilor in browser.

Executarea unui JavaScript cand utilizatorul click/ apasa o tasta pe un

anumit element.
Evenimente pentru elementul <body>:
HTML4 &5 : onbeforeprint, onafterprint, onload, onunload, onresize
<body onresize="showMsg()">
HTML5 : ononline, onoffline, onresize, onundo, onredo, onpopstate,
etc
Evenimente ptr tastatura:
HTML4 & 5: onkeydown, onkeypress onkeyup
Evenimente ptr mouse:
HTML4 & 5: onclick, ondblclick, onmousedown, onmouseup,
onmousemove, onmouseover, onmouseout.
<p onmousedown="mouseDown()">Click the text!</p>

Evenimentele ptr tastatura si mouse nu pot fi folosite pentru elementele:

<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>,
<script>, <style>, <title>.
Atributul Style


Formatarea tag-urilor a fost introdus cu HTML 4.0

Formatarea poate fi adaugata inline, intern si extern folosind un
fisier separat - style sheets CSS.

Inline
<Numetag style="atribut:valoare; atribut:valoare;”> Textul
afectat</NumeTag>
Exemplu:
<html>
<body style="background-color:#606099;">
<p style="font-family:times;color:green"> Text in Times si
verde</p>
</body></html>
Atributul Style- inline

Exemplu:
<html>
<body style="background-color:#3a3b3c;">
<h3 style="background-color:#ff0000;font-
family:arial;">Acesta e un titlu de capitol pe fond rosu si
cu font arial </h3>
<p style="background-color:#0010ff;text-align:right;font-
size:40px;”> Acesta e un paragraf pe fond bleu si
marimea fontului de 40pixeli</p>
</body>
</html>

Nu lasati spatiu intre valoare si unitati, adica 40px si nu 40 px!

IE accepta, dar FireFox si Opera nu.
Tag-ul Style- intern

Tag-ul <style> este folosit sa defineasca formatarea informatiei
pentru un singur document HTML, specificand cum sa fie afisate
elemetele in browser.

Tag-ul <style> se afla intotdeauna in sectiunea < head>.

Tag-ul <style> accepta atributele globale, eveniment si atributele
standard: type si media

Atributul type este obligatoriu, defineste continutul elementului
style si are singura valoare posibila "text/css".
<head>
<style type="text/css">
NumeTag {atribut:valoare}
NumeTag{atribut:valoare}
NumeTag{atribut:valoare}
</style>
</head>
Tag-ul Style- intern

Tag-ul <style> este folosit sa defineasca formatarea informatiei
pentru un singur document HTML, specificand cum sa fie afisate
elemetele in browser.

Tag-ul <style> se afla intotdeauna in sectiunea < head>.

Tag-ul <style> accepta atributele globale, eveniment si atributele
standard: type si media

Atributul type este obligatoriu, defineste continutul elementului
style si are singura valoare posibila "text/css".
<head>
<style type="text/css">
NumeTag {atribut:valoare}
NumeTag{atribut:valoare}
NumeTag{atribut:valoare}
</style>
</head>
Tag-ul Style- intern
Exemplu:
<html>
<head>
<style type="text/css" >
h3,p {background-color:#007890;}
div { font-family:arial;color:blue; font-size:20px;}
body {color:#ff00c0;}
</style>
</head>
<body>
<h3>Header 1</h3>
<div>A paragraph.</div>
<p> orice text </p>
</body>
</html>
Style extern – in fisier CSS

Un fiser extern - style sheet este ideal cand formatarea se aplica mai
multor pagini. Modificand doar fisierul extern putem sa schimbam
formatarea intregului Web site.

Fiecare pagina de web trebuie sa faca referinta la fisierul extern
folosind tag-ul <link> .

Tag-ul <link> se afla intotdeauna in sectiunea head si are
atributele:
-rel – specifica relatia dintre documentul HTML si resursa, care
poate fi :contents, index, chapter, copyright, stylesheet etc.
-type – tipul MIME (Internet media type) al resursei referite
-href – adresa URL a resursei cu care se face legatura

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
Style invechit – ASA NU!
<!DOCTYPE html>
<html>
<head>
<title>HTML URAT</title>
</head>
<body bgcolor="lightblue">
<p align="right">
<font face="Consolas" size="62px" color="purple">
<strong>Demo</strong> <em>Text</em>
</font>
<center>
Sample Text
</center>
</p>
</body>
</html>
Bibliografie


HTML prin exemple – Tudor Gugoniu, Ed.Teora 2002

HTML, XHTML,CSS si XML prin exemple – Tudor Gugoniu,
Ed.Teora 2005

Crearea paginilor Web – Ned Suell, Ed. Teora 2002

Totul despre HTML 4 – Rick Darnell, Ed Teora.

http://www.w3schools.com/html/default.asp
Idei ?

<blink> orice text </blink>

<marquee> un text ce se misca de la dreapta la stanga

</marquee>

<marquee scrollamount=1 direction=down loop=true>text ce se

misca de sus in jos </marquee>
Curs 2

Atributele standard
Stiluri – CSS
Frame-uri/Cadre
Atributele Standard

Atribute standard sunt:

title - specifica o extra informatie pentru un element. Ia valoarea text.

style - specifica stilul inline pentru un element. Ia valoarea definitie_stil.

id - specifica un id unic pentru un element. Ia valoarea nume_id . Nu

poate incepe cu o cifra.

class- specifica un nume de clasa pentru un element. Se foloseste cel mai

des in style sheet. Ia valoarea nume_clasa.
HTML4 atributele standard NU se folosesc pentru elementele:
<base>, <head>, <html>, <meta>, <param>,<script>, <style> si <title>.

HTML5 atributele standard sunt folosite pentru orice element

Atributele tag-urilor

Exemplu

<NumeTag style="atribut:valoare; atribut:valoare;”>

In HTML5 aceste atribute globale sunt folosite pentru orice element.

Executarea unui JavaScript cand utilizatorul click/ apasa o tasta pe un

Evenimentele ptr tastatura si mouse nu pot fi folosite pentru elementele:

<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>,
<script>, <style>, <title>.
Atributul Style


Formatarea tag-urilor a fost introdus cu HTML 4.0

Formatarea poate fi adaugata inline, intern si extern folosind un
fisier separat - style sheets CSS.

Inline
<Numetag style="atribut:valoare; atribut:valoare;”> Textul
afectat</NumeTag>
Exemplu:
<html>
<body style="background-color:#606099;">
<p style="font-family:Arial;color:#004c09;font-size:30px;"> Text
de culoare verde</p>
</body></html>
Atributul Style


Formatarea tag-urilor a fost introdus cu HTML 4.0

Formatarea poate fi adaugata inline, intern si extern folosind un
fisier separat - style sheets CSS.

Inline
<Numetag style="atribut:valoare; atribut:valoare;”> Textul
afectat</NumeTag>
Exemplu:
<html>
<body style="background-color:#606099; font-size:10px;">
<p style="font-family:Arial;color:#004c09;"> Text in Times
si verde</p>
</body></html>
Atributul Style- inline

Exemplu:
<html>
<body style="background-color:#3a3b3c; color:#5d0040;">
<h3 style="background-color:#ff0000;font-
family:arial;">Acesta e un titlu de capitol pe fond rosu si
cu font arial </h3>
<p style="color:#0010ff;text-align:right;font-size:40px;”>
Acesta e un paragraf pe fond bleu si marimea fontului de
40pixeli</p>
</body>
</html>

Nu lasati spatiu intre valoare si unitati, adica 40px si nu 40 px!

IE accepta, dar FireFox si Opera nu.
Sintaxa - CSS
O regula CSS este formata din doua parti:
un element de selecţie
un element declarativ (format din doua sau mai multe declaratii)

Fiecare declaratie este compusa dintr-un atribut de stil si valoarea

Declaratiile CSS sunt incadrate de acolade si termina cu caracterul „;”

Comentariile CSS se incadreaza cu caracterele „/” si „/”.

Tag-ul Style- intern

Tag-ul <style> este folosit sa defineasca formatarea informatiei
pentru un singur document HTML, specificand cum sa fie afisate
elemetele in browser.

Tag-ul <style> se afla intotdeauna in sectiunea < head>.

Tag-ul <style> accepta atributele globale, eveniment si atributele
standard: type si media

Atributul type este obligatoriu, defineste continutul elementului
style si are singura valoare posibila "text/css".
<head>
<style type="text/css">
NumeTag {atribut:valoare}
NumeTag{atribut:valoare}
NumeTag{atribut:valoare}
</style>
</head>
Tag-ul Style- intern
Exemplu:
<html>
<head>
<style type="text/css" >
h4{background-color:#007890;text-align:right;}
div { font-family:Calibri;color:blue; font-size:20px;}
body {color:#ff00c0;}
</style>
</head>
<body>
<h4>Header 1</h4>
<div>A paragraph.</div>
<p> orice text </p>
</body>
</html>
Atributul standard id
id-ul este un identificator unic pentru un element care poate fi declarat
doar o singură dată în cadrul aceluiași fișier HTML
Specifica stilul pentru un singur element HTML, in mod unic .
Se defineste prin intermediul constructiei:
nume_tag_html#nume_id { declaratii_CSS; }
nume_tag_html este optional
Exemplu:
<html>
<head>
<style type="text/css">
#stil_1{text-align:right; text-decoration:underline;}
</style>
</head>
<body>
<p id="stil_1">Paragraf centrat de culoare roşie</p>
<p>Paragraf cu stil determinat de browser.</p>
</body>
</html>
Atributul standard class
Specifica stilul pentru un grup de elemente HTML

Se defineste prin intermediul constructiei:

nume_tag_html. numele_clasei { declaratii_CSS; }
nume_tag_html este optional
Exemplu:
<html>
<head>
<style type="text/css">
body {font-family:times; color: #969696; margin: .5in}
h1{font-family: arial; color:blue;}
.page1 {margin:2in; text-decoration:overline;padding:2in;}
p{color:green; background-color: white;}
</style>
</head>
<body>
<h1 class="page1">Timp liber</h1>
<p>Maine incepe vacanta.</p>
<p class="page1">Important e ca maine nu mergem la scoala dar tot
trebuie sa facem lectii.</p>
</body></html>
Combinarea claselor

Exemplu:
<html>
<head>
<style type="text/css">
body {font-family:times; color: #969696; margin: .5in}
h1{font-family: arial; color:blue;}
.page1 {margin:2in; text-decoration:overline;padding:2in;}
.bckg {background-color: #57BCF4;}
</style>
</head>
<body>
<h1 class="page1">Timp liber</h1>
<p>Maine incepe vacanta.</p>
<p class="page1 bckg">Important e ca maine nu mergem la
scoala dar tot trebuie sa facem lectii.</p>
</body></html>
Style extern – in fisier CSS

Un fiser extern - style sheet este ideal cand formatarea se aplica mai
multor pagini. Modificand doar fisierul extern putem sa schimbam
formatarea intregului Web site.

Fiecare pagina de web trebuie sa faca referinta la fisierul extern
folosind tag-ul <link> .

Tag-ul <link> se afla intotdeauna in sectiunea head si are
atributele:
-rel – specifica relatia dintre documentul HTML si resursa, care
poate fi :contents, index, chapter, copyright, stylesheet etc.
-type – tipul MIME (Internet media type) al resursei referite
-href – adresa URL a resursei cu care se face legatura

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
Stilul external - CSS
Decupati etichetele si continutul lor, definiti clasele, salvati fisierul ca
*.css si faceti legatura in fisierul original (index.html) in sectiunea
<head> si dupa tag-ul <title>.
<head>
< title> Prima mea pagina cu CSS </title>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

Exemplu: fisierul mystyle.css

main{font-family:Verdana; background-color: #969696; margin:2in;}
footer{ font-size:10px; color:orange;}
p,h4{color: #0067f2; background-color: white;}

.page1
{ text-align: right; border: 2px solid black;}

. important
{ text-align: center;}
Stilul external - CSS
Puteți modulariza CSS-ul prin separarea fiecărui stylesheet ptr diverse
platforme.
Browser-ul va prelua numai fișierele CSS relevante pe baza interogării
atributului media.

Exemplu:
<head>
<link rel="stylesheet" href="base.css" />
<link rel="stylesheet" href="mobile.css" media="screen and (max-
width: 1000px)" />
<link rel="stylesheet" href="print.css" media="print" />
</head>

Stylesheet mobil este recuperat doar dacă folosiți un ecran de dispozitiv

cu lățimea browser-ului mai mică sau egală cu 1000 de pixeli.
Stylesheet de imprimare este preluat numai dacă încerați să imprimați
pagina de web.
Definirea stilurilor pentru Font
{font-family: serif, “goudy old style”} - controleaza aspectul fontului. Daca un
nume de font e format din mai multe cuvinte de include intre “”. Se listeaza
familiile de fonturi in ordinea preferintelor separate de virgula.

{font-size: 12pt} - controleaza dimensionarea fontului in cadrul paginii. Se

exprima in puncte (pt), pixeli (px), inci (in), centimetri (cm) sau procente
(%). Nu se lasa spatiu intre valoare si unitatea de masura!

{font-style: italic} - controleaza aspectul textului. Poate fi normal, italic si

oblique.

{font-variant: normal} – stabileste scrierea cu minuscule. Poate fi normal si

small-caps.

{font-weight: light } - controleaza grosimea fontului. Poate fi extra-light,

demi-light, light, medium, extra-bold, demi-bold si bold. Inainte sa fixati
grosimea de font asigurati-va ca fontul respectiv are disponibila aceasta
grosime!
Definirea și Importul unui Font extern

Aveți posibilitatea să utilizați o varietate de formate de fi șiere pentru a vă crea

propriile fonturi : OpenType Font (OTF), TrueType Font (TTF), Web Open Font
Format (WOFF), SVG Fonts (SVG) – suportat doar de Opera si Chrome

In fisierul .css, vă definiți propria familie de fonturi, pe care le importa ți ca un

fișier extern, folosind cuvantul cheie @font-face:

@font-face {
font-family: "Demo Font";
src: url(/https/ro.scribd.com/demofont.otf);
}

Odată definit, puteți folosi aceasta nouă familie de fonturi :

article {
font-family: "Demo Font", Arial, sans-serif;
}
Definirea stilurilor pentru Text
{line-height: 12px} - marimea spatiului dintre liniile textului.Se exprima in puncte
(pt), pixeli (px), inci (in), centimetri (cm) sau procente (%).

{color} - stabileste culoarea textului.Poate lua valorile color-rgb, color-hex, color-

name.

{text-decoration: blink} - decoreaza textul si include valorile: none, underline,

overline, line-through, blink.

{vertical-align: top} – stabileste pozitionarea pe verticala a textului, fie in functie de

parinte, fie relativ la o referinta absoluta. Poate lua valorile: baseline, sub, super,
text-top, text-bottom, middle, top, bottom, percentage

{text-align: right} - alinierea textului, poate fi : justify, center, left si right.

{text-indent: 2in}- stabileste distanta in puncte (pt), inci (in), centimetri (cm) si pixeli
(px).

{letter-spacing: 0.2em} – modifica spatiul dintre caractere. Poate lua valorile

normal sau em, definit ca spatiul ocupat de litera m.
{word-spacing: 1em} - modifica spatiul dintre cuvinte. Poate lua valorile normal
sau sau em, definit ca spatiul ocupat de litera m.
Definirea stilurilor pentru Background

{background-image}- Seteaza imaginea de fundal. Poate lua valorile none sau

URL(“/img/*.gif”) exemplu: body {background-image:url('Desert.jpg');}

{background-attachment}- Indica daca imaginea de fundal este fixa sau se

deplaseaza odata cu textul. Poate lua valorile scroll, fixed.

{background-color} - Seteaza culoarea de fundal. Poate lua valorile color-

rgb, color-hex, color-name, transparent.

{background-position} – Indica poziţia de start a imaginii de fundal. Poate lua

valorile top left, top center, top right, center left, center center, center
right, bottom left, bottom center, bottom right, x%, y%, xpos, ypos.

{background-repeat} - Indica daca şi cum este repetata imaginea de fundal.

Poate lua valorile repeat, repeat-x, repeat-y, no-repeat.
Exemplu: body{background-repeat:repeat-y;}
Definirea stilurilor pentru Liste

{list-style-type} - Indica tipul de marcator folosit pentru elementele din lista.

Poate lua valorile none, disc, circle, square, decimal, decimal-leading-
zero, armenian, georgian, lower-alpha, upper-alpha, lower-greek, lower-
latin, upper-latin, lower-roman, upper-roman.

{list-style-position} - Indica daca marcatorii elementelor din lista apar in

interiorul sau in exteriorul listei. Poate lua valorile inside sau outside.

{list-style-image} - Specifica o imagine ce va marca fiecare element din lista.

Poate lua valorile none sau URL-ul.
Margini / Spatieri / Borduri Style
Fiecare element e reprezentat in propria caseta. Dimensiunile/distantele
se stabilesc in puncte (pt), inci (in), centimetri (cm) si pixeli (px).

{margin-top},{margin-right},{margin-bottom},{margin-left}-
stabilesc bordura din exteriorul casetei, spatiul dintre element si
elementele alaturate.Valorile sunt date in ordinea (sus, dreapta, jos,
stanga).

{padding-top},{padding-bottom},{padding-left},{padding-right}-
stabilesc spatiul inserat intre bordura casetei si continut.

{border-top} {border-bottom}, {border-right}, {border-left} –

stabilesc stilul si culoarea fiecarei borduri din jurul unui element.
border-width, border-color , border-style
border-style poate avea valorile: none, dotted, dashed, solid, double,
groove, ridge, inset, outset
Gruparea Atributelor
Se poate face gruparea atributelor pentru a se seta toate proprietatile pentru:
font, background, list-style, margin, padding, border.

Exemple: body {font: small-caps bold 14pt palatino, serif;}

p {margin: .25in .25in; border: 2px solid green;}
q {padding: 20px;border:2px dotted red;}

Ordinea atributelor grupate pentru font este: font-style, font-variant,

font-weight, font-size, line-height, font-family.

Ordinea atributelor grupate pentru margin si padding este: sus, dreapta,

jos, stanga. Daca se specifica doar o valoare se aplica la toate, daca sunt
2sau 3 valori, cele ce lipsesc se aplica ca si marginile opuse.

Valorile sunt separate de spatiu, cu exceptia familiilor de fonturi care se

separa cu virgula.

Valorile negative extrag spatiu in loc sa adauge.

Border - Gruparea Atributelor
<!DOCTYPE html>
<html>
<head>
<title>HTML Page</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<article class="Bordura">
Imi place ciocolata ...
</article>
<article class = “altaBrd”>
Imi plac si filmele...
</article>
</body>
</html>

<! in fișierul style.css imi declar clasele !>

.Bordura { border-width: thick; border-color: #69D2E7; border-style: inset
solid; }
.altaBrd { border: 25px #FA6900 dotted; background-color: #E0E4CC; }
Nivele CSS

CSS1 (Cascading Style Sheets - level 1)

mecanism simplu care permite autorilor si utilizatorilor
paginilor Web sa ataseze acestora stiluri (de exemplu,
fonturi, culori si spatieri). Este usor de inteles si de folosit de
designerii Web si exprims stilurile conform terminologiei
editării computerizate.

CSS2 (Cascading Style Sheets - level 2) – generalizare

(extensie) a primului nivel de fisiere de stiluri, aducand in
plus facilitati de mostenire a fisierelor de stiluri, efecte
vizuale, pozitionari si paginari, integrarea mai multor
tipuri de medii (suport pentru sunet/video).
Cascadarea stilurilor
Este posibil ca pentru acelasi element HTML sa fie definite mai
multe stiluri :fişier .css (external) , tag-ul <style> (intern) , atributul
style (in-line).

Documentul HTML va avea stilurile definite conform unei foi de

stiluri virtuale obtinute prin cascadarea definitiilor folosite:

Stilurile definite implicit de browser - prioritate minimă

Stilurile definite prin fisier .css

Stilurile definite in tag-ul <style> (in interiorul elementului <head>)

Stilurile definite prin atributul style (apartinand unui element
HTML din interiorul elementului <body>) -prioritate maxima

Daca legatura catre fisierul .css se afla in document dupa

elementul <style>, stilurile definite extern vor avea prioritate mai
mare si vor suprascrie stilurile definite in interiorul elementului
<style>!
Exemplu de Cascadarea stilurilor
Stilurile definite extern ( in fisierul.css):
h3
{
color:red;
text-align:left;
font-size:8pt;
}
Stilurile definite internal (in elementul <style>):
h3
{
text-align:right;
font-size:20pt;
}
Stilurile obtinute in urma cascadarii:
color:red;
text-align:right;
font-size:20pt;
Selecția CSS - indirectă
<body>
<section>
<article>
<p>Primul Paragraf</p>
<aside>
<p>Al doile Paragraf</p>
</aside>
</article>
<p>Al treilea Paragraf</p>
</section>
</body>
Selecția indirectă :
section p { font-family: monospace; }

Selecteaza orice element care este un descendent al primului

element specificat – toate cele trei <p> vor avea stilizarea aplicată
Selecția CSS - directă
<body>
<section>
<article>
<p>Primul Paragraf</p>
<aside>
<p>Al doile Paragraf</p>
</aside>
</article>
<p>Al treilea Paragraf</p>
</section>
</body>
Selecția directă :
section > p { font-weight: bold; }
Selectează numai elementele care sunt descendenți direcți ai
primului element specificat. Acest selector este util dacă doriți să
restrângeți domeniul de aplicare al stilului ptr un anumit descendent
Doar <p> Al treilea Paragraf </p> va avea stilizarea aplicată
Selecția CSS – directă multiplă
<body>
<section>
<article>
<p>Primul Paragraf</p>
<aside>
<p>Al doilea Paragraf</p>
</aside>
</article>
<p>Al treilea Paragraf</p>
</section>
</body>
Selecția directă multiplă :
section > article > aside > p { border: 2px solid red; }
Aveți posibilitatea să faceți mai multe selecții directe, dacă doriți să
selectați un alt element <p>
Doar <p> Al doilea Paragraf </p> va avea stilizarea aplicată
Selecția CSS – directă combinată
<body>
<section>
<article>
<p>Primul Paragraf</p>
<aside>
<p>Al doilea Paragraf</p>
</aside>
</article>
<p>Al treilea Paragraf</p>
</section>
</body>
Selecția directă combinată :
section > article p { font-style: italic;}
Aveți posibilitatea să combinați selecțiile directe
Ambele < p> Primul Paragraf </p> și <p> Al doilea Paragraf </p>
vor avea stilizarea aplicată
Frame-urile HTML

Frame-urile permit prezentarea mai multor documente HTML in
zone de ecran multiple, zone care pot fi ferestre independente sau
subferestre ale ferestrei principale a browserului.

Fereastra browserului este divizata la fel cum un tabel imparte o
pagina. In fiecare dintre aceste zone se pot incarca diverse si
diferite (!) documente HTML.

Frame-urile pot interactiona intre ele, actiunile dintr-un frame
afectand continutul si comportamentul altui frame.

Avantaje: ofera o crestere a vitezei de incarcare a unor pagini.

Dezavantaje: controleaza aspectul browser-ului – contravine
scopului HTML, programatorul trebuie sa tina evidenta mai multor
documente HTML.
Tag-urile frame-urilor

• <frameset>...</frameset> - divide fereastra browser-ului (sau

un alt frame deja definit) in frame-uri specificate ca randuri sau
coloane din fereastra respectiva.

• <frame/> - defineste caracteristicile unui frame particular dintr-

un set de frame-uri.

• <noframes>...</noframes> - defineste continutul alternativ

pentru browserele ce nu pot afisa frame-uri.

• <iframe> ...</iframe> - defineste un frame in-line care contine

alt document HTML.
Structura documentului frameset

Un document care descrie modalitatea in care frame-urile sunt
pozitionate pe ecran (layout-ul frame-urilor) - document frameset
are o structura diferita de cea a unui document fara frame-uri.

<!DOCTYPE "HTML Frameset DTD" >

<html>
<head>
<title>Un simplu document frameset </title>
</head>
<frameset>
<noframes>
<p>pentru browserele ce nu pot afisa frame-uri </p>
</noframes>
</frameset>
</html>
Tag-ul <frameset>...</frameset>
<frameset> este un container de frame-uri, utilizat pentru a
imparti o fereastra in subspatii dreptunghiulare numite frame
uri. Specifica modul modul de aranjare (layout-ul) zonelor
ocupate de frame-uri in fereastra principala a browserului.

<frameset> ia locul lui <body> si urmeaza imediat elementului

<head>.Elementele ce in mod normal apareau in <body> nu
trebuie sa apara inaintea primului element <frameset> pentru ca
in acest caz elementul <frameset> va fi ignorat.

Poate contine si un element <noframes> pentru browserele ce

nu pot afisa frame-uri.

Atributele rows si cols definesc dimensiunea fiecarui frame din

set.
Atributele tag-ului <frameset>

Sintaxa: <frameset cols=”value” rows =”value”>
Exemplu: <frameset cols="25%,*,25%">

cols - specifica dimensiunea si numarul de coloane a unui frameset.
Valorile specificate pentru cols sunt separate de virgula si dau latimea
fiecarei coloane, de la stanga la dreapta.

rows -specifica dimensiunea si numarul de randuri a unui frameset.
Valorile specificate pentru rows sunt separate de virgula si dau inaltimea
fiecarui rand, de sus in jos.

Daca sunt specificate ambele atribute, se defineste un grid („caroiaj“)
care se umple de la stanga la dreapta si de sus in jos.

Fiecare atribut ia ca valoare o lista de lungimi specificate in pixeli
("100px" sau doar "100"), ca procent (50%) sau ca lungime relativa
''*'', adica restul spatiului disponibil. Dimensiunile fixe in pixeli se
folosesc doar in frame-urile care contin imagini, sau ale obiecte de
dimensiune fixa. Se prefera procentele.
Exemple pentru atributele cols si rows
1. Impartirea ecranului pe orizontala, in doua parti egale:
<frameset rows="50%, 50%">
... restul definitiilor ...
</frameset>

2. Crearea a 3 coloane: a doua cu dimensiune fixa de 250px (ptr o

imagine de aceasta latime), prima primind 25% din spatiul care
mai ramane si a treia 75% din acesta:
<frameset cols="1*,250,3*">
... restul definitiilor...
</frameset>

3. Grid de 2x3 subspatii:

<frameset rows="30%,70%" cols="33%,34%,33%">
... restul definitiilor ...
</frameset>
Frame-uri imbricate

Frame-urile descrise de un document pot fi imbricate oricat de mult
prin includerea unui element <frameset> in alt element <frameset>.

Exemplu: primul element <frameset> (cel din „exterior“) divide tot
spatiul disponibil in 3 coloane egale. Al doilea <frameset>, din
interiorul primului, divide a doua zona in randuri de inaltimi inegale.

<frameset cols="33%, 33%, 34%">

...continutul primului frame ...
<frameset rows="40%, 60%">
... continutul celui de al doilea frame, primul rand ...
... continutul celui de al doilea frame, al doilea rand ...
</frameset>
... continutul celui de al treilea frame ...
</frameset>
Tag-ul <frame />
• <frame /> – defineste un subspatiu dreptunghiluar dintr-un
document frameset. Fiecare element <frame> trebuie sa apara
intr-un element <frameset> care ii defineste dimensiunea.

• Continutul (documentul care se incarca in frame) si infatisarea

unui frame/cadru (detalii despre marginile frame-ului si despre
posibilitătile de scroll) sunt definite de elementul <frame /> prin
intermediul atributelor specifice.

• Continutul unei frame NU trebuie sa fie in acelasi document cu

definitia frame-ului!

• Fiecare frame/cadru poate avea atribute diferite fata de celelalte

fram-uri din set.
Atributele tag-ului <frame />
• name – specifica numele frame-ului si e folosit cu atributul
target al elementelor <a>, <base>, <form> si <link> <area>.
• src – adresa URL a documentului HTML ce va fi afisat in
cadrul respectiv. Poate fi o adresa absoluta (catre alt website) sau
relativa (catre un fisier din acelasi website):
src=''http://www.yahoo.com/default.htm" sau src="default.htm"
• frameborder - specifica daca sa se afiseze sau nu marginea in
jurul frame-ului. Ia valorile 0 sau 1. Mai bine foloseste style!
• marginheight specifica inaltimea marginii intre continut si
partea de sus si de jos a frame-ului. Ia valori in pixeli.
• marginwidth specifica grosimea marginii intre continut si partea
din stanga si din dreapta a frame-ului. Ia valori in pixeli.
• noresize - dezactiveaza posibilitatea de redimensionare a frame-
ului. Ia valoarea noresize.
• scrolling – specifica posibilitatea de derulare/scroll a frame-ului.
Ia valorile yes, no, auto.
Frame-urile HTML


Frame-urile nu sunt inca implementate in HTML 5


Declaratie <!DOCTYPE html > se schimba cu :

<!DOCTYPE "HTML Frameset DTD" > sau

<!DOCTYPE "XHTML Frameset DTD" >
Exemplu
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset //
EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head> <title>Un document frameset </title>
</head>
<frameset cols="33%,34%,33%">

<frame src="fisier.html" frameborder="1" />

<frame src="frame4.html" frameborder="0" />

</frameset>
</html>
Comunicarea intre frame-uri
Comunicare intre cadre se realizeaza prin folosirea atributul target.
Acest atribut se gasete in urmatoarele elemente: <a>, <link>,
<base>, <form> si <area>.
Exemplu: fisierul frames.html
<frameset rows="20,80">
<frame name="top" src="pagina1.html" />
<frame name="bot" src="pagina2.html" />
</frameset>
Fisierul pagina1.html
<body> <h1> Aceassta este pagina 1</h1>
<p><a href="pagina2.html"> Link catre pag2</a></p>
<p><a href="pagina3.html"> Link catre pag3</a></p></body>
Fisierul pagina2.html
<body bgcolor="#969090"> <h2> Sfarsit de pag 2 <h2></body>
Fisierul pagina3.html
<body bgcolor=”#ff0000”><h2> Sfarsit de pag 3 <h2></body>
Comunicarea intre frame-uri
• Atributul target se poate adauga fiecarui hyperlink din fisierul
pagina1.html

• Atributul target se poate adauga in tag-ul <base target=”bot”>

ce se afla in sectiunea <hread> a fisierului pagina1.html.

• Valorile atributului target ce sunt rezervate:

_blank- incarca documentul intr-o fereastra noua fara nume.
_self - incarca documentul in frame-ul elementului care a folosit
acest nume.
_parent – incarca documentul in frameset-ul ce contine frame-ul
curent.
_top – incarca documentul in fereastra originala renuntand la
toate celelalte frame-uri.
Reguli ce guverneaza comportamentul frame-urilor

• daca atributul target al unui element are valoarea unui nume de

frame existent, atunci acel frame primeste destinatia continutului.
• daca un element nu are atributul target, dar exista <base> in
fisierul respectiv, atunci valoarea atributului target din <base>
determina destinatia continutului elementului.
• daca atat elementul cat si <base> contin target si fiecare are
valori diferite, se foloseste valoarea elementului, iar valoarea din
<base> este ignorata.
• daca nici elementul, nici <base> nu contin atributul target atunci
frame-ul curent ce contine elementul activat primeste continutul.
• cand numele frame-ul specificat in target nu exista atunci se
creaza o fereastra noua, i se atribuie numele necunoscut, iar
continutul este incarcat in fereasta noua.
Tag-ul <noframes>...</noframes>

• Daca browser-ul nu poate afisa continutul unui document ce

foloseste frame-uri, se poate specifica o alternativa la acesta prin
intermediul elementului <noframes>.

• <noframes> cand este folosit intr-un <frameset> trebuie sa

contina un element <body>. In acest caz nu mai trebuie sa
apara insa nici un element <noframes> in elementul <body>.

• Este recomandabil sa se ofere un element <noframes> care are

semnificatie, si care, la limita, sa contina cel puţin un link spre o
varianta de document fara frame-uri.
Exemplu <noframes>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset //
EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head> <title>Document ce defineste un frameset dar care are si
noframes </title>
</head>
<frameset cols="50%,50%">
<frame src="pagina1.html" />
<frame src="cuprins.html" />
<noframes><body>
<p>Aici este <a href="doc_fara_frames ">versiunea fara
frame-uri</a></p></body>
</noframes>
</frameset>
</html>
Exemplu ilegal
Continutul unui frame NU POATE SA FIE in acelasi document ca si
definitia setului de frame-uri (frameset-ului):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset //

EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head> <title>Un document frameset ilegal </title>
</head>
<frameset cols="50%,50%">
<frame src="frame1.html" />
< frame src="#anchor_in_acelasi_document" />
<noframes><body>
<h2><a name="anchor_in_acelasi_document">Important
section</a></h2></body>
</noframes>
</frameset>
</html>
Tag-ul <iframe>...</iframe>
• <iframe> defineste un inline frame care contine alt document.
Permite sa se includa un frame intr-un bloc de text.

• Pe langa aceleasi atributele ca si tag-ul<frame/>: name, src,

frameborder, marginwidth, marginheight, scrolling mai sunt si
atributele: align, height si width.

• Frame-urile inline nu pot fi redimensionate nu au atributul

noresize!

• Continutul elementului <iframe> (ce se afla intre tagul de

inceput si cel de sfarsit) este alternativa pentru browser-ele care
nu suporta frame-uri. Pot apare aici elemente inline sau bloc!
Orice element de tip bloc este permis in interiorul elementului
ce-l conţine pe <iframe>.
Exemplu <iframes>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset //
EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head> <title>Document ce are si iframes </title>
</head>
<body>
<p> Aceasta e o reteta foarte usoara si foarte gustoasa
<iframe src="reteta.html" width=”300” height =”300”>

<h2>Reteta lui Nicu</h2>
<ul> Ingrediente
<li>faina</li>...
</ul>
</iframe>
</p>
</body>
</html>
Utilizarea mediilor externe:imagini, sunete,video

• Mediile externe sunt fisiere care nu pot fi afisate direct de

browser (video MPEG, fisiere PostScript, fisiere arhivate, etc).

• Cand serverul trimite un anumit fisier browser-ului, include si

informatii despre tipul fisierului utilizand un mesaj special,
trimis odata cu fisierul. Browser-ul incearca sa identifice (dintr-o
lista cunoscuta) o aplicatie ajutatoare ( helper sau viewer), careia
să-i paseze fisierul. Daca tipul fisierului este recunoscut si
aplicatia ajutatoare corespunzatoare este definita, browser-ul
deschide aplicatia cu fisierul respectiv.

• Specificarea mediilor externe in HTML se face cu ajutorul tag-

ului <a> si a atributului href, ca in cazul legaturilor la toate
celelalte documente HTML.
Imagini

<a href=”imagine.gif”> 25K fisier GIF</a>

Sunet
<a href=”audio_clip.au”>Muzica(375K format AU)</a>
Video
<a href=nunta.qt>Sfarsit de nunta(Quick Time, 1.5M)</a>
HTML 5 – animatii, sunete,video, filme

Elementele Multimedia (sunet or video) sunt stocate in fisiere

media.

Diferite formate cu extensiile: .wav, .mp3, .mp4, .mpg, .wmv,

and .avi.

MP4 is noul format ptr internet video (YouTube, Flasch Players)

Only MP4, WebM, and Ogg (video) sunt suportate de noul

standard HTML5 .
HTML5 – <video>

Inainte de HTML5, video putea fi interpretat doar cu plug-in (like

flash).
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Browser-ul nu suporta video.
</video>

Atributul controls – ptr a adauga play, pause, si volum.

Textul intre <video> si </video> va fi afisat de browserele care nu

au implementat inca elementul <video>
HTML5 – <audio>
Inainte de HTML5, fisierele audio puteau fi interpretate doar cu
plug-in - nu exista un standard

<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Browserul nu suporta audio.
</audio>

Atributul controls – ptr a adauga play, pause, si volum.

Textul intre <audio> si </audio> va fi afisat de browserele care nu

au implementat inca elementul <audio>
HTML5 – plug-ins <object>
Aplicatii care extind functionalitatea standard a browser-ului.

Plug-ins pot fi folosite ptr: afisarea hartilor, scanare ptr virusi,

verificarea id la banca etc.

<object> defineste un “embedded object” in documentul HTML

Exemple: Java applets, cititor PDF , Flash Players

<object width="400" height="50" data="bookmark.swf"></object>

Include HTML in HTML:
<object width="50%" height="500px data="fisie1.html"></object>
Include imagini
<object data="vasile.jpeg"></object>
HTML5 – plug-ins <embed>

<embed> defineste un “embedded object” in documentul HTML

Elementul <embed> nu are tag de sfarsit, nu poate contine un text

alternativ.

<embed width="400" height="50" data="bookmark.swf">

Include HTML in HTML:
<embed width="50%" height="500px data="fis2.html">
Include imagini
<embed src="vasile.jpeg">
HTML5 – You Tube

Convertirea fisierelor video la diferite formate poate fi dificila.

Lansam YouTube in paginile de web.

<iframe width="420" height="345"

src="http://www.youtube.com/embed/XGSy3_Czz8k"></iframe>

<object width="420" height="315"

data="http://www.youtube.com/v/XGSy3_Czz8k"> </object>

<embed width="420" height="315"

src="http://www.youtube.com/v/XGSy3_Czz8k">
Tema
1. Faceti o pagina de prezentare pentru un restaurant. Pagina sa contina
urmatoarele: un titlu de capitol <h1>, un subtitlu <h3>, o imagine
<img>, descriere, detalii <p>, 2 legatura cu titlul Meniul studentului si
Meniul General si adresa <address> continand o ancora <a> de tipul
mail to (< a href="mailto:[email protected]">Email us</a>)

Definiti stilurile elementelor folosind atribute multiple, gruparea

atributelor si atribuirea de clase.

2. Pentru legatura Meniul Studentului faceti o alta pagina in care sa

folositi liste imbricate sortate si nesortate. Elementele listelor sa
contina text si legaturi externe si in cadrul aceluiasi document.

3. Pentru legatura Meniul General faceti o alta pagina in care sa folositi

liste de definitii.

4. Formati fisierul *.css si legatura in fisierul original.

Bibliografie

Cascading Style Sheets

JavaScript
DOM

DOM – Document Object Model – World Wide Web Consortium

standard de acces la documente

DOM este o platforma si o interfata neutra care permite programelor
si scripturilor sa acceseze si sa actualizeze dinamic continutul,
structura, si stilurile unui document

DOM standard separat in 3 parti diferite:

Core DOM model standard model pentru toate tipurile de documente

XML DOM – model standard pentru documentele XML

HTML DOM – model standard pentru documentele HTML

HTML DOM
HTML DOM este un model standard de obiecte si o intefata de
programare pentru HTML.

HTML defineste:

Obiectele ca elementele HTML

Propertietatile tuturor elementelor HTML

Metodele de accesare a tuturor elementelor HTML

Evenimentele tuturor elementelor HTML

HTML DOM este un standard pentru accesarea, schimbarea,

adaugarea sau stergerea elementelor HTML.
HTML DOM

Cand se incarca o pagina, browser-ul creaza DOM pentru pagina

respectiva - creaza o structura de arbore formata din obiecte
Sintaxa - CSS

• CSS defineste cum sa fie afisate elementele HTML

O regula CSS este formata din doua parti:

un element de selecţie
un element declarativ (format din doua sau mai multe declaratii)

Fiecare declaratie este compusa dintr-un atribut de stil si valoarea

Declaratiile CSS sunt incadrate de acolade si termina cu caracterul „;”

Comentariile CSS se incadreaza cu caracterele „/” si „/”.

Tipuri principale de obiecte CSS

Selector
<head> <style=”text/css”>
p{font-family:"Times New Roman", Arial; font-size:15px;}
</style></head>

Identificator
<head> <style type=”text/css”>
#nume_id { text-align:center; font-size:15px; } </style></head>
<body> <h1 id="nume_id"> Text </h1>

Clasa
<head> <style type=”text/css”>
. nume_clasa1{text-align:center;} sau asa
div.nume_clasa2{text-align:right;} </style></head>
<body><div class="nume_clasa2"> Text </div>
<p class=” nume_clasa1”> orice text </p>
<h1 class = nume_clasa1”> Capitol 1 </h1>

Numele identificatorului si al clasei nu inceapa cu un numar!

Cum inseram declaratiile CSS ?

Inline
<p style="color:#7856f3;margin-left:20px;">Un paragraf </p>

Intern
<html>
<head>
<style type=”text/css”>
hr {color:#e45a68;}
p {margin-left:40px;}
body {background-image:url(' images/black.gif ');}
</style>
</head>
<body> </body>
</html>
Cum inseram declaratiile CSS ?
Extern
Se creaza fisierul nume_fisier.css (contine declaratiile css)
hr {color:#563467;}
p {margin-left:20px;}
body {background-image:url(' images/black.gif ');}
#star{border: 2px double red;}

<head>
<style type=”text/css”>
p{margin-left:15px;} </style>
<link rel="stylesheet" type="text/css" href=”nume_fisier.css” />
</head>

Inline style are cea mai mare prioritate, ceea ce insemna ca va

suprascrie stilul definit intern (cu tag-ul <style> din sectiunea
<head>), or stilul extern prin fisierul css, sau setarile implicite ale
browser-ului.
Continut/Padding/Border/Margin
<html>
<head>
<style type=”text/css”>
div { background-color: lightgrey;
width: 300px;
padding: 25px;
border: 25px solid orange;
margin: 25px;
}
</style>
</head>
Cand setam proprietatile width si height ale unui element, setam
doar width si height a ariei continutului. Pentru a calculate intreaga
dimensiune a unui element, trebuie sa tinem cont de padding,
borders si margin.
width = width + left padding + right padding + left border +
right border + left margin + right margin
Afisarea elementelor - display
display:block display:inline
Fiecare element HTML are un mod implicit de afisare, depinzand de
ce tip de element este : block sau inline
Elemente de tip block: intotdeauna incep cu o linie noua si ocupa
intreaga latime disponibila a browserului. Exemple:
<div> ,<h1> - <h6>, <p>,<form>,<header>,<footer>, <section>
Elemente de tip inline: nu incep de pe o linie noua si ocupa spatiul
minim necesar: Exemple: <span>, <a>, <img>

Prin CSS putem schimba stilul de afisare din element block in

element inline si invers: Exemplu : afiseaza o lista de linkuri ca un
meniu orizontal li{display:inline}
<ul>
<li><a href="www.roma.it" target="_blank">ROMA</a></li>
<li><a href="www.paris.fr" target="_blank">PARIS</a></li>
<li><a href="www.praga.ch" >PRAGA</a></li>
</ul>
CSS Pozitionare
Pozitionarea exacta sau relativa a elementelor intr-o fereastra sau in
raport cu alte elemente.

Prin utilizarea proprietatii position se poate specifica pozitia

elementului in pagina web.

Elementele pot fi positionate folosind proprietatile: top, bottom, left,

si right. Aceste proprietati nu functioneaza daca nu este setatata
intai proprietatea de position !

Metode de pozitionare: statica, fixa, relativa si absoluta

Valoarea initiala, prestabilita, a pozitionarii elementelor este statica.

Elementele sunt dispuse unul dupa altul in interiorul documentului
(normal flow). Elementele pozitionate static nu sunt afectate de
proprietatile ''top'', ''bottom'', ''left'', si ''right'.
CSS Pozitionare
Pozitionarea fixa: - elementul este pozitionat relativ la fereastra
browser-ului. Nu se va misca chiar daca se aplica scroll -
elementul fixat ramane pe pozitia lui initiala, fara a se derula.

.pos1{position:fixed;top:30px;right:50px;}

Elementele fixe se pot suprapune cu alte elemente

Pozitionare relativa – elementul este amplasat relativ la pozitia

initiala din cadrul ferestrei sau a elementului parinte, in sensul ca el
apare dupa toate elementele dinaintea sa, respectiv inaintea tuturor
elementelor amplasate dupa el. Elementele pot fi mutate si
suprapuse din locatia lor folosind proprietatile "top" "left"
"bottom" si "right".

.pos_left {position:relative; left:-20px;}

Valoarea negativa extrage spatiu
CSS Pozitionare
Pozitionarea absoluta: - positionarea relativa la cel mai apropiat
element pozparinte pozitionat (in loc sa fie pozitionat relativ la
intreaga zona a paginii):

h2{position:absolute; top:150px; right:0;}

position:absolute

Elementele pozitionate absolut se pot suprapune peste alte

elemente.
CSS Pozitionare in spatiul 3D
Asezarea elementelor suprapuse (stiva), unele in raport cu altele.

Sintaxa: selector { z-index:valoare; }

valoarea acestei proprietati fiind relatia tridimensionala a

elementului in raport cu alte elemente din fereastra – in fata, in
spatele - numar intreg pozitiv, 0 sau negativ.

img{position:absolute; left:20px; top:10px; z-index:-1;}

Elementul cu numarul de ordine mai mare apare deasupra elementului

cu numar mai mic.

Utilizarea unei valori negative determina amplasarea elementului

dedesubtul parintelui sau cu atatea niveluri cu cate indica indexul z.
Proprietatile Float /Clear/Overflow
Float: folosit pentru a “impacheta” un element in jurul altui element
float poate fi setat la una din variantele : none , left sau right
Exemplu: text in jurul imaginii:
img { float: right; margin: 0 0 10px 10px;}
Clear: controleaza comportamentul elementelor cu proprietatea float
clear poate fi setat la una din variantele: none, left, right sau both

Toate elementele dupa cel cu proprietatea de float se vor „impacheta”

in jurul acelui element. Sa nu se intample asa, folosim clear.
Proprietatea clear specifica pe care latura sa nu se aplice proprietatea
de float.

Proprietatea overflow specifica ce se intampla cand un element

depaseste dimensiunea altui element
overflow poate fi setat la una din variantele: visible, hidden, scroll,
sau auto
Elementul <span>

<span> folosit ptr a grupa inline alte elemente.

<span> furnizeaza o metoda de adaugare a unui “pointer” sau “hook”

unei parti a textului sau a documentului. Acea parte a textului poate
fi stilizata cu CSS, sau manipulata cu JavaScript.

Exemplu:
<p>Merg la teatru cu <span style="color:#675611;font-
weight:bold">Maria</span > si <span style="color:#f34455;font-
size: 150%">Vasile</span> Popescu</p>
Exemplu <span>

<p>Mouse peste cuvant - schimba cursorul</p>

<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
Elementul <span>
<head><style>
span {
float: left;
width: 0.7em;
font-size: 400%;
font-family: Algerian;
line-height: 80%;
}
</style></head>
<body>
<p><span>T</span>text text text text texttext texttext texttext</p>

Litera T este inclusa in interiorul elementului span. Elementul span

are o latime de 0.7 ori marimea fontului curent. Dimensiunea
fontului elementului span este 400%, si grosimea liniei 80%. Fontul
literei T va fi "Algerian".
CSS Pseudo-classe/Pseudo-Element
Pseudo-clasele sunt folosite ptr a defini o stare speciala a elementelor
HTML

Permit adaugarea de stiluri CSS doar la anumite elemente ale

aceluiasi selector, id sau clasa.

Exemplu, pot fi folosite pentru:

- a stiliza un element cand mouse-ul este deasupra lui

- schimbam culorile ptr link-uri vizitate si nevizitate

- a stiliza un element cand este in focus

CSS Pseudo-classe/ Pseude-element
Pseudo-clasa/Pseudo-element este una din expresiile urmatoare:
active - adauga un stil unui element cand acesta este activat (actionat
prin click pe el)
first-child - adauga un stil unui element care este primul din acel tip
de elemente
focus - folosit pentru input-urile de formulare, le adauga un stil cand
acestea sunt active (dupa click si cursorul de text in ele)
hover-adauga un stil unui element cand mouse-ul se afla deasupra lui
first-letter – adauga un still style primei litere a fiecarui element
last-child - adauga un stil unui element care este ultimul din acel tip
de elemente
link - adauga un stil unui link nevizitat
visited - adauga un stil unui link vizitat
before - insereaza un continut intr-un anumit stil inaintea elementelor
selectate
after - insereaza un continut intr-un anumit stil dupa elementele
selectate
CSS Pseudo-classe/Pseudo-Element
Sintaxa: selector : pseudo-clasa { proprietate:valoare; }
selector :: pseudo-element { proprietate:valoare; }

:: - sintaxa in CSS3, : - sintaxa in CSS1, CSS2

selector este un element, id sau clasa,

pseudo-clasa/pseudo-element este una din expresiile urmatoare:
active, link, visited, first-child, last-child, focus, hover etc /
first-letter, first-line , before, after, selection
Exemple: a:link {color:#0000FF;} /* link nevizitat */
a:visited {color: #00FF00;} * link vizitat */
a:hover {color:#FF00FF;} /* mouse peste link */
tr:hover{background-color:#F5F5F5;}
a:active {color:#0000FF;} /* link selectat */
p::first-line {color:#00FF00;} /* prima linie a fiecarui element p */
p::before {content: ''ATENTIE-”;}
input:focus{background-color:pink;}
CSS class & Pseudo-classe / Pseudo-element
CSS class poate fi combinat cu Pseudo-clasa :

selector.class:pseudo-class {property:value;}

Exemplu: daca link-ul a fost visited, se va afisa in rosu

a.rosior:visited {color:#FF0000;}
<a class="rosior" href="css_syntax.asp">CSS Syntax</a>

Combinat cu Pseudo-element :

selector::pseudo-element {property:value;}
Exemplu: afiseaza prima litera a tuturor paragrafelor in rosu.
p::first-letter {color:#ff0000; font-size:200%;}
<p>Un film bun</p>
<p> Merg la NY</p>
Exemplu Pseudo-classe / Pseudo-element
<!DOCTYPE html>
<html>
<head>
<style type=”text/css”>
p i:first-child {color: #007700;}
</style>
</head>
<body>
<p>Merg la <i>teatru</i>. Merg la <i>film</i>. </p> </br>
<p>Merg la<i>restaurant</i>.Merg la <i>sala</i></p>
</body>
</html>

Merg la teatru. Merg la film

Merg la restaurant.Merg la sala.
JavaScript (JS)
JavaScript (Brendan Eich - 1995) diferit de limbajul de programare
JAVA (SUN)

limbaj de programare orientat pe obiecte pentru HTML, web,
servere, tablete, telefoane – pentru a face paginile interactive
JavaScript = DHTML dinamic HTML

codul JavaScript este o secventa de declaratii /comenzi ce vor fi
inserate in paginile HTML si executate de catre browser-
scripturile care rulează în pagină sunt oprite imediat, în momentul
în care utilizatorul oprește vizualizarea paginii.

declarațiile JavaScript sunt scrise în interiorul tag-ului <script>

încorporat în pagina HTML - informează browserul că codul
JavaScript urmează sau pot fi în fișiere externe cu extensia .js
JavaScript (JS)
JavaScript este un limbaj de scripting de nivel înalt, interpretat,
orientat pe objecte și care ruleaza pe partea de client.

JavaScript poate fi utilizat pentru:

Adăugare de elemente multimedia, cum ar fi afișarea, ascunderea,

modificarea, crearea de imagini interactive, defilare text în bara de
stare, etc.

JavaScript face posibilă crearea unor conținuturi adaptate paginilor

dinamice, data și ora sau alte date externe.

Java Script permite validarea datelor introduse de utilizator în

timpul depunerii unui formular, să modifice conținutul
formularului, etc
JavaScript (JS)

JavaScript poate fi utilizat impreuna cu CSS pentru a face DHTML

- Dynamic HyperteTt Markup Language – permite afisarea sau
dispariția paginilor de web.

JavaScript se execută doar in pagina de web care se află în

fereastra browser-ului, în orice moment. Acest lucru înseamnă că
script-urile care rulează pe o pagină sunt oprite imediat, în
momentul în care utilizatorul se oprește vizualizarea paginii.
JavaScript

JavaScript

JavaScript poate schimba toate elementele HTML din pagina

JavaScript poate schimba toate atributele HTML din pagina

JavaScript poate schimba declaratiile de stilurile CSS din pagina

JavaScript poate reactiona la toate evenimenele din pagina

JavaScript – elemente HTML

JavaScript poate accesa si schimba toate elementele HTML din
pagina

Identificarea elementelor HTML dupa:
ID
document.getElementById("nume_id");

Numele CLASS-ei
document.getElementsByClassName("nume_class");

Numele TAG-ului (numele etichetei HTML < >)

getElementsByTagName("p");

Colectii de obiecte( document.anchors , document.forms,

document.images , document.links)
Declaratiile JavaScript
Declaratiile JavaScript sunt "comenzi" pentru browser.

; se adauga la sfarsitul fiecarei declaratii

declaratiile se executa in ordinea scrierii si sunt „case sensitive”

JavaScript ignora spatiile libere

\ intrerupe o linie de code intr-un text string :
document.write("Hello \
World!");

<html> <body>
<h1>Imagistica Medicala</h1>
<p id="pImg"> Tipuri de aparate medicale</p>
<div id="divCT"> Computer Tomograf</div>
<script>
document.getElementById("pImg").innerHTML="Buna ziua!";
document.getElementById("divCT").innerHTML="Ce faci ?";
</script>
</body></html>
Functii JavaScript

Functiile - gruparea declaratiilor = secventa de instructiuni ce se

execute impreuna

function numele_functiei()
{
cod/declaratii JavaScript;
}

Cod-ul functiei se executa cand cineva apeleaza numele_functiei

O functie poate fi apelata direct, cand apare un eveniment

(utilizatorul apasa un button), sau poate fi apelata de oriunde
scriind JavaScript code.
Functii JavaScript
<html>
<body>
<h1>Imagistica Medicala</h1>
<p id="pImg"> Tipuri de aparate medicale</p>
<div id="divCT" style=”color:red”> Computer Tomograf</div>
<button type="button" onclick="myfct()">Schimba</button>
<script>
function myfct()
{
document.getElementById("pImg").innerHTML="Buna ziua!";
document.getElementById("divCT").innerHTML="Ce faceti?";
}
</script>
</body>
</html>
Comentariile in JavaScript


Nu sunt executate de catre JavaScript

// pentru o singura linie

//document.getElementById("myH1").innerHTML="Welcome!";
var i=5; // declar variabila i si ii asignez valoarea 5

/* */ pentru un bloc de text/declaratii
Cum adaug declaratiile JavaScript

Declaratiile JavaScripts trebuie inserate intre tag-urile



<h1> Scripturi </h1>

<h2 id="myp">un paragraf</h2>
<script>
document.getElementById("myp").innerHTML="javaaaa";
</script>

write -scrie direct in outputul documentului HTML
<h1> Marea Neagra </h1>
<script>
document.write("<p> Marea Rosie</p>");
document.write(Date());
</script>

Daca se executa document.write dupa ce documentul s-a terminat

de incarcat , intreaga pagina HTML va fi rescrisa!
Manipularea elementelor in JavaScript

Apasand tasta "F12" în multe browsere moderne se va deschide

consola.

În consola puteți explora:

--DOM -ul documentului HTML curent

--depana JavaScript

--vizualizati resursele ce vin într-o rețea și de a face tot felul de

lucruri interesante.

Vom folosi consola pentru a exemplifica JavaScript:

Variabile in JavaScript
var fN=1; am asignat valoarea 1 variabilei fN
var sN=2;

fN+sN

sN-fN

fN= = 3;

fN+=2;
sN-=1;

window.alert(‘ Vreau sa merg la film’);

document.write(‘ <h1> Ciocolata </h1> <p> Orice ciocolata îmi

place </p>’)
Variabile in JavaScript

Variabilele in JavaScript sunt „containere” pentru stocare

Numele variabilelor trebuie sa inceapa cu o litera, ( $ si _ )
Numele variabilelor sunt case sensitive

Declararea variabilelor se face cu var
var x (variabila x e nedefinita, nu are nici o valoare atribuita)

Asignarea unei valori se face cu =
var x = 3.14;
y=”Mos Craciun”;
var age=30, var str=”Ulita”, var=”44”;

Re-declararea variabilelor nu pierd valoarea asociata
var age=30;
var age;

Se pot face operatii aritmetice cu variabile:
var x, var y, var z;
x=5; y=x+5; z =x+y;
Variabile in JavaScript
Variabilele pot fi declarate ca argumente, la declararea functiilor:
function myPar (tata, mama) {}

Exemplu:
<button onclick="myPar('Vasile','Vasilica')">Try it</button>

Functia se poate apela cu variabile diferite

myPar('Ion','Ana')
Variabile in JavaScript
Cand se foloseste cuvantul cheie return, se opreste executia
functiei si se intoarce valoarea acelei variabile;

var myX=myFct();

Se poate returna valoarea functiei fara sa o stochezi ca variabila:

document.getElementById("suma").innerHTML=myFct();
Variabile in JavaScript


Variabilele declarate cu var in functii sunt variabile LOCALE,
pot fi folosite doar in acea functie. Variabilele LOCALE sunt
sterse dupa executia functiei

Variabilele declarate in afara functiilor sunt GLOBALE, toate
scripturile si functiile din pagina HTML le pot accesa. Variabilele
GLOBALE sunt sterse cand se inchide pagina HTML

Daca se asigneaza o valoare unei variabile care nu a fost
declarata, ea devine GLOBALA, chiar daca se afla in interiorul
unei functii
x=6;
Operatori in JavaScript
De asignare:
= x=y x=y
+= x += y x = x + y
-= x -= y x = x - y
*= x *= y x = x * y
/= x /= y x=x/y
%= x %= y x = x % y
Aritmetici:
+ , - , * , / , % (modul) , ++ (increment), -- (decrement)
Logici:
< , <=, > , >=, ? (operator conditional)( a ? b : c)

== determina dacă doua variabile/valori sunt echivalente in valoare

!=determina dacă doua variabile/valori nu sunt echivalenteîn valoare

Instructiuni de control in JavaScript

Liniile de cod, in programare realizează diverse acțiuni în funcție

de rezultatul unor decizii. Declarațiile in care se alege o cale de
execuție pe baza unei decizii sunt numite declarații de control.

If/Else - declarațiile condiționate, în funcție de rezultatul unei

evaluări.

if (zi > 5) {
mesaj = "Weekend placut!";
} else {
mesaj = "Bine ați venit la școala!";
}
Instructiuni de control in JavaScript

Declarația else if vă permite multiple conditionari in lanț, astfel

încât să puteți evalua mai multe condiții.

Else if - declarațiile condiționate, în funcție de rezultatul unei

evaluări.

if (zi > 5) {
mesaj = "Weekend placut!";
} else if (zi< 2) {
mesaj = "E ziua de luni!";
} else {
mesaj = "Bine ați venit la școala!";
}
Instructiuni de control in JavaScript
Buclele pot executa un bloc de cod de mai multe ori.
Buclele sunt folosite dacă doriți să executați același cod de mai
multe ori, dar de fiecare dată cu o valoare diferită.

Bucla for este compusa din trei părți: crearea variabilei de

indexare; expresia ce se evalueaza înainte de fiecare buclă;
declarația ce se executa la sfârșitul fiecărei bucle

Indexarea începe de zero, această buclă se va evalua la valoarea

true pentru 0, 1, 2 și 3, dar apoi eșuează, atunci când i este 4.

var tari = ["RO", "JPN", "RUS", "ENG"];

for (var i = 0; i < tari.length; i++) {
text += tari + "<br />";
}
Instructiuni de control in JavaScript

forEach invocă în mod convenabil o funcție (numită sau anonim)

pentru fiecare element din vector/matrice. Acest lucru poate fi
folosit pentru a itera cu ușurință peste elementele unui vector/
matrice.

var sum = 0;
var nr = [4, 9, 16, 25];
function increment(item, index) {
sum += item;
}
numbers.forEach(increment);
alert(sum);
Tipuri de Date in JavaScript
String var nume=”Gheorghe”, var p='Fun Store';

Number var x= 3.14, var y=123e5 ;

Boolean var t=true, var f=false;

Array
var cul=new Array();
cul[0]="Rosu";
cul[1]="Verde";
cul[2]="Alb"; sau asa
var cul=new Array("Rosu","Verde","Alb"); sau asa
var cul=["Rosu","Verde","Alb"];
Null var bani=null;

Undefined var x;
Obiecte in JavaScript

Object = variabile cu proprietati si metode asociate

Un obiect este o listă de tipuri de date neorganizate, stocate ca o

secvență de perechi nume: valoare.

Elementele din lista se numesc proprietăți ale obiectului.

Atunci când o proprietate a unui obiect stochează o funcție,

proprietatea devine cunoscută sub numele de metodă.
Obiecte in JavaScript
Un limbaj de programare poate fi numit orientat-obiect în cazul în
care are următoarele patru capabilităti :

• încapsularea (encapsulation) – datele sau metode, impachetate

împreună într-un obiect.

• agregarea (aggregation) – stocheaza un obiect într-un alt obiect.

• moștenirea (inheritance)- capacitatea unei clase să depindă de o

altă clasă (sau de mai multe clase) pentru unele dintre proprietățile
și metodele sale.

• polimorfismul (polymorphism)- scriu o funcție care servește

într-o varietate de moduri diferite.
Obiecte in JavaScript
Object pot fi de tip : Date, Stringuri, Functii, Arrays, Math, etc

Crearea unei obiect (persoana):

var persoana={
nume : "Cretu",
prenume : "Toma",
cnp : 2700
};
sau așa:
var persoana={nume:"Cretu", prenume:"Toma", cnp:2700};

Se pot accesa proprietatile obiectului in doua moduri:

x=persoana.cnp; sau asa x=persoana["cnp"];

Obiecte in JavaScript

Cand o variabila este declarata cu "new", variabila este declarata

ca un object:
var msg= new String('Hai la munte');

Accesarea proprietatiilor obiectului: objectName.propertyName

var msg=new String('Hai la munte');
var x=msg.length; =12

Apelarea metodelor obiectului : objectName.methodName()

var msg="Hai la munte!";
var y=msg.toUpperCase();
var z = msg.indexOf("munte");
Obiecte in JavaScript
De reținut câteva puncte-cheie când lucrati cu obiecte JavaScript:

Proprietățile obiectului sunt oricare din tipurile de date abstracte,

sau un alt obiect. Ele sunt variabile normale utilizate intern în
metodele obiectului sau pot fi variabile vizibile la nivel global.
Metodele obiectului sunt functiile care permit obiectului de a face
o acțiune sau pentru a permite ceva să fie făcut pentru ea: afișarea
conținutului, executarea operațiilor matematice etc.
Obiecte definite de utilizator – toate sunt descendenți ai unui
obiect numit object.
"this" - acest cuvânt cheie desemneaza o prescurtare pentru
proprietățile sau metodele unui obiect.
JavaScript are multe obiecte-built-in sau obiecte native. Aceste
obiecte sunt accesibile oriunde în program și vor funcționa în
același mod, în orice browser care rulează în orice sistem de
operare.
Exemplu JavaScript : Ceas
<!DOCTYPE html>
<html>
<head>
<script>
function startTime()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
// add a zero in front of numbers<10
m=checkTime(m); s=checkTime(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
t=setTimeout(function(){startTime()},500);
}
................se continua pe urmatoarea pagina
Exemplu JavaScript:Ceas

<body>
<p id="p1">Hai la film!</p>
<p id="p2">Hai la teatru!</p>
<h1 id="id3">Hai la restaurant!</h1>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
<button type="button"
onclick="document.getElementById('id3').style.color='red' ">
Click Me!</button>
</body> </html>
JavaScript – schimbarea stilurilor CSS
Proprietatile ptr background sunt :
background-color
background-image
background-repeat
background-attachment
background-position

Object.style.background=
"color image repeat attachment position"
<script>
function schimbaBackground()
{
document.body.style.background="#f3f3f3 url('Desert.jpg') no-repeat
right top";
} </script>
JavaScript – schimbarea stilurilor CSS

Proprietatile ptr background sunt :

border-width
border-style
border-color

Atenție! apelez scriptul după ce am definit <canvas> și nu în

secțiunea <head>
JavaScript – exemplu <canvas>

Fișierul style.css :

canvas {
border-style: solid;
border-width: thick;
border-color: #FCA90F;
background-color: #C1D6CD;
}
JavaScript – exemplu <canvas>
Fișierul script.js :
var canvas = document.getElementById("demoCanvas");
var context = canvas.getContext("2d");

context.fillStyle = "#A9B0B3";
context.strokeStyle = "#746C73";
context.lineWidth = 5;

context.moveTo(0, 0); //metoda moveTo() muta cursorul (x,y) =(0,0)

context.lineTo(700, 350); // metoda lineTo() traseaza o linie de la poziția cursorului pana la poziția (700,350)
context.stroke(); // metoda stroke() deseneaza

context.beginPath();
context.arc(160, 80, 70, 0, 2 * Math.PI); // metoda arc(x,y, raza, pct initial, pct final)
context.fill(); // metoda fill() umple cu o culoare cercul
context.stroke();

context.beginPath();
context.moveTo(650, 345);
context.lineTo(700, 350);
context.lineTo(665, 315);
context.stroke() ; // am desenat o linie care se termina cu o sageata

context.fillStyle = "#20293F";
context.strokeStyle = "#20293F";

context.font = "78px Segoe UI"; // stabilesc familia de font și dimensiunea fontului

context.fillText("Hello", 190, 230); // textul ce se va afisa la poziția (190,230)
context.strokeText("World", 190, 310);` // alt text afisat la poziția (190,310)
JavaScript – exemplu canvas
Bibliografie

Laborator 1

Sisteme de numeratie

Gabriela Niculescu
Sisteme de numeratie

Sistem de numeratie: totalitatea regulilor de

reprezentare a numerelor cu ajutorul unor simboluri
numite cifre.

Cifra: simbol care reprezinta o cantitate intreaga.

Baza (radacina) sistemului de numeratie: numarul de

simboluri permise pentru reprezentarea cifrei.

=> bazele 2, 8, 10 si 16
b=10 b=2 b=8 b=16
0 0 0 0
1 1 1 1
2 10 2 2
3 11 3 3
4 100 4 4
5 101 5 5
6 110 6 6
7 111 7 7
8 1000 10 8
9 1001 11 9
10 1010 12 A
11 1011 13 B
12 1100 14 C
13 1101 15 D
14 1110 16 E
15 1111 17 F
Sistem Zecimal versus Sistem Binar

Sistemul zecimal foloseste numerele de la 0-9.

Ponderea cifrelor zecimale creste de la dreapta la stanga,

numerotarea lor corespunzand puterilor crescatoare a
bazei de numeratie 10.
– 1425 = 1*103+4*102+2*10+5*100
103 102 101 1

Sistemul binar foloseste doar numerele 0 si 1.

Ponderea cifrelor binare creste de la dreapta la stanga,

numerotarea lor corespunzand puterilor crescatoare a
bazei de numeratie 2.
– 710 = 01112=0*23+1*22+1*21+1*20
23 22 21 1
Sistem Zecimal versus Sistem Binar


Daca grupam 8 coloane reprezentand puterile lui 2 →
→ putem reprezenta orice numar intre 0 si 255 →
8 biti = 1 byte .

27 26 25 24 23 22 21 1

Cum scriem in sistemul binar 67 ?
Schimbarea bazei de numeratie

N numar intreg fara semn in baza x -> noua baza y.

Reprezentarea N in baza y: anan-1 ... a1a0
aflarea coeficientilor in puterile pozitive ale noii baze y

N = anyn + an-1yn-1 + ... + a1y + a0

=> impartiri succesive la noua baza y, retinand la fiecare operatie restul!

N / y = anyn-1 + an-1yn-2 + ... + a1 + a0/y

=> restul a0 (cifra cea mai putin semnificativa a rezultatului), catul N1

N1 / y = anyn-2 + an-1yn-3 + ... + a2 + a1/y

……………….
Nk / y = anyn-k-1 + an-1yn-k-2 + ... + ak+1 + ak/y

Conversia se incheie cand se obtine catul 0.

Exemplu: N = 41(10) -> noua baza 2.

41 : 2 => cat =20 si rest = 1 => a0 = 1

20 : 2 => cat =10 si rest = 0 => a1 = 0
10 : 2 => cat = 5 si rest = 0 => a2 = 0
5 : 2 => cat = 2 si rest = 1 => a3 = 1
2 : 2 => cat = 1 si rest = 0 => a4 = 0
1 : 2 => cat = 0 si rest = 1 => a5 = 1

=> N = 101001(2)

Verificare: N = 1·25 + 0·24 + 1·23 + 0·22 + 0·21 + 1·20 = 41

Aplicatie: algoritm in pseudocod pentru conversia
unui numar intreg din zecimal in binar.
citeste nr
i = 0
cat timp nr ≥ 2i executa
│ a[i] = 0
└ i = i + 1
i = i - 1; n = i; a[n] = 1; nr = nr – 2i
cat timp nr ≠ 0 executa
│ i = i – 1
│ daca nr ≥ 2i atunci
│ │ a[i] = 1
└ └ nr = nr – 2i
scrie (a[i], i = n,0)
Coduri nenumerice
Intr-un sistem de calcul o parte a informatiei prelucrate este nenumerica.
Pentru reprezentarea acesteia se utilizeaza diferite coduri, dintre care cel mai
utilizat este codul ASCII (”American Standard Code for Information
Interchange”). Codul ASCII standard utilizeaza 7 biti pentru reprezentarea
literelor mari si mici ale alfabetului latin, cifrelor zecimale, caracterelor speciale
si a cateva caractere de control (in total 128 de caractere). Caracterele sunt
grupate astfel (codurile fiind furnizate in hexazecimal):
0-1Fh : caractere de control, ca LF (0Ah), CR (0Dh), BEL (07h),...;
20h-2Fh : caractere speciale, ca spatiu, !, ”, #, $,...;
30h-39h : cifrele zecimale 0(30h), 1(31h),...,9(39h);
3Ah-40h : caractere speciale :, ;, <, =, ...;
41h-5Ah : literele mari ale alfabetului A(41h), B(42h), ..., Z(5Ah);
5Bh-60h : caractere speciale [, \, ...;
61h-7Ah : literele mici ale alfabetului a(61h), b(62h), ..., z(7Ah);
7Bh-7Fh : caractere de control si speciale, cum sunt DEL(7Fh),
{(7Bh), }(7Dh),...
Pe langa acest cod se utilizeaza si codul ASCII extins, in care caracterele
sunt reprezentate pe 8 biti (deci se reprezinta in total 256 de caractere).
Codul ASCII

Mapare intre numere si litere - codul ASCII (retineti
doar A=65 a=97).
Sistem Zecimal versus Sistem Hexazecimal


Sistemul hexazecimal folosesc numerele de la 0-9 si
literele de la A-F/ a-f reprezentand numerele 10-15.
6210=3*161+14*160=3E16

15 0
0 0 0 0 | 0 0 0 0 |0 0 1 1 | 1 1 1 0
0 0 3 E

Se face completarea bitilor din stanga cu 0. Un set de 4
biti se numeste nibble.
Sistem Zecimal versus Sistem Hexazecimal


Sistemul hexazecimal folosesc numerele de la 0-9 si
literele de la A-F/ a-f reprezentand numerele 10-15.
6210=3*161+14*160=3E16

15 0
0 0 0 0 | 0 0 0 0 |0 0 1 1 | 1 1 1 0
0 0 3 E

Se face completarea bitilor din stanga cu 0. Un set de 4
biti se numeste nibble.
Sistem Zecimal versus Sistem Hexazecimal


Zecimal → Binar

7210 = 26+23= 10010002


Binar → Hexazecimal
10010002 =4*161+8*160=4816
15 0
0000 0000 0100 1000
0 0 4 8
N numar subunitar, fara semn in baza x -> noua baza y.

Reprezentarea N in baza y: 0. a-1a-2... a-m

N = a-1y-1 + a-2y-2 + ... + a-my-m – aflarea coeficientilor in
puteri negative ale noii baze y

=> inmultiri succesive cu noua baza y, retinand de fiecare

data partea intreaga a rezultatului!
N·y = a-1 + a-2y-1 + a-3y-2 + ... + a-my-m+1

=> a-1 (cea mai semnificativa)

N1·y = a-2 + a-3y-1 + a-4y-2 + ... + a-my-m+2

…………………
Nk·y = a-k-1 + a-k-2y-1 + a-k-3y-2 + ... + a-my-m+k+1
Conversia se incheie:
-partea subunitara a rezultatului inmultirii egala cu
zero ;
-s-a calculat numarul propus de cifre (s-a atins
precizia dorita).

Obs.
conversia numerelor intregi: exacta;
conversia numerelor subunitare: aproximativa.
Exemplu. N = 0.37(10) -> baza 2 (rezultatul pe 7 biti).

0.37 x 2 = 0.74 => a-1 = 0

0.74 x 2 = 1.48 => a-2 = 1
0.48 x 2 = 0.96 => a-3 = 0
0.96 x 2 = 1.92 => a-4 = 1
0.92 x 2 = 1.84 => a-5 = 1
0.84 x 2 = 1.68 => a-6 = 1
0.68 x 2 = 1.36 => a-7 = 1

N ≈ .0101111(2)
Verificare:N ≈ 0·2-1+1·2-2+0·2-3+1·2-4+1·2-5+1·2-6+1·2-7 =
= (0·26+1·25+0·24+1·23+1·22+1·21+1·20)/27 =
= 47 / 128 = 0.367
Exemplu. N = 41.37(10) -> baza 2 (partea subunitara pe 7).

Separat pentru partea intreaga si separat pentru partea

subunitara!

=> N ≈ 101001.0101111(2).

Crestem numarul de biti obtinem o precizie mai buna

pentru partea subunitara!
Cazuri particulare – fara imprartiri/inmultiri
1)x = yn => fiecare cifra in baza x ~ grup de n cifre in
baza y – conversia exacta si ptr partea subunitara

Exemplu. N = 3CF.4AE(16) ->baza 2

16 = 24 => n = 4

3 C F . 4 A E
↓ ↓ ↓ ↓ ↓ ↓
0011 1100 1111 . 0100 1010 1110

=> N = 1111001111.01001010111(2).

Conversia s-a facut exact !

2) xn = y
– in vechea baza x => grupuri de cate n cifre de la punctul
zecimal spre stanga pentru partea intreaga si de la punctul
zecimal spre dreapta pentru partea subunitara (daca este necesar
se vor completa grupurile extreme cu zerouri);
– fiecare grup → cifra in noua baza y.

Exemplu. N = 11001111.1101011(2) → in baza 8.

23 = 8 => n = 3.

011 001 111 . 110 101 100

↓ ↓ ↓ ↓ ↓ ↓
3 1 7 . 6 5 4
=> N = 317.654(8)
Aplicatie: algoritm pentru conversia unui numar
subunitar din zecimal in binar, cu precizia pe m biti.
citeste nr, m
pentru i=1,m executa
└ a[i] = 0
i = 0
cat timp (nr ≠ 0)si(i < m) executa
│ i = i + 1
│ daca nr ≥ 2-i atunci
│ │ a[i] = 1
└ └ nr = nr – 2-i
scrie (a[i], i = 1,m)
Bibliografie

F. Iacob – Introducere in informatica, Editura Printech, 2004.

Laborator 2

Tabele
Formulare/Forms
Testare - INFORMATICA
http://wi-fi.cs.pub.ro/fim-info/index.php
Pagina HTML

1. Scrieti structura clasica a oricarei pagini HTML

2. Folositi urmatoarele elemente HTML:

<header> <main> <footer> <article> <p> <h1>

pentru a crea urmatoarea pagina:

Prima pagina HTML
<!DOCTYPE html>
<html>
<head> <title>Imi place sa invat HTML</title> </head>
<body>
<header>
<h1>News News News</h1>
<h2>Diverse Noutati</h2>
</header>
<main>
<h3>Ultimele Articole </h3>
<article>
<h4> Tehnologie </h4>
<p> Text
<a href="#" target="_blank">Read More...</a></p> </article>
<article>
<h4>Financiar</h4>
<p>Text
<a href="#" target="_blank">Read More...</a></p> </article>
<article>
<h4>Cultural</h4>
<p>Text
<a href="#" target="_blank">Read More...</a></p> </article>
</main>
<footer>
<hr/> <p> Prima tema HTML </p> <hr/>
</footer>
</body></html>
Prima pagina HTML

Adăugați 2 figuri folosind tagul <figure> în al doilea

< article> și apoi mai adăugați un paragraf <p>

<article> <p> ....</p>

<figure>
<img src =/>
<figcaption> Text </figcaption> <figure>
<figure>
<img src =/>
<figcaption> Text </figcaption> <figure>
<p> ...</p>
</article>
Tabele


Tabelele sunt specificate rand cu rand, fiecare rand
continand definitii pentru fiecare din celulele care il
formeaza. Prin urmare, se incepe prin a defini randul din
partea de sus, celula cu celula, apoi se defineste al doilea
rand, celula cu celula etc. Coloanele sunt calculate automat
pe baza numarului de celule care sunt in fiecare rand.

In acest fel, modelul de tabel din HTML este proiectat
astfel incat afisarea acestora sa se faca incremental, pe
masura ce randurile tabelului sosesc, fara a astepta
incarcarea completa.
Elementele HTML pentru Tabele

<table> </table> Definesc inceputul si sfarsitul unui tabel

<tr> </tr> Definesc inceputul si sfarsitul unui rand (row)

<th> </th> Definesc o celula din capul de tabel (header)

<td> </td> Definesc o celula de date dintr-un rand (data)

Celulele unui tabel pot contine doua tipuri de informatie: header
(implicit textul e scrise centrat si ingrosat) şi date.

Celulele date pot fi: text, links, imagini, liste, forms, alte tabele, etc.

Exemplu: <table>
<caption> Despre flori </caption>
<tr>
<th>flori</th>
<td>Randu1 , celula 1</td>
<td>Randul 1, celula 2</td>
<td>Randul 1, celula 3</td>
</tr>
</table>
Elementele HTML pentru Tabele


<caption> </caption> Scurta descriere a continutului
tabelului. Trebuie inserat imediat dupa tag-ul <table>. E
permisa doar o singura descriere pe tabel.

<thead> </thead> Grupeaza continutul capului de tabel
intr-un singur element HTML.

<tbody> </tbody> Grupeaza continutul corpului unui
tabel intr-un singur element HTML.

<tfoot> </tfoot> Defineste “footer” pentru un tabel.

<colgroup> Defineste un grup de coloane dintr-un tabel,
in vederea formatării.

<col /> Defineste valorile atributelor pentru una sau mai
multe coloane dintr-un tabel.
Atributele tag-ului <table> - Mai bine foloseste style!
align - alinierea tabelului relativ la textul inconjurator. Poate lua
valorile left, center, right. E invechit!
bgcolor - seteaza culoarea de fundal a tabelului. E invechit
border- seteaza latimea marginii tabelului, valoarea e in pixeli.
Atributul aplica chenar fiecarei celule si pentru intregul tabel.
Valoarea atributului schimba doar marginea intregului tabel, cea
pentru celule ramane setata la 1 pixel.
border-collapse:collapse – un singur chenar.
width – seteaza latimea tabelului.
cellspacing - spatierea intre celule, valoarea e in pixeli.
cellpadding - spatierea in interiorul celulelor, valoarea e in pixeli.
frame- stabileste marginile exterioare vizibile ale tabelului.Poate lua
valorile void, above, below, hsides, vsides, lhs, rhs, box/border.
IE afiseaza incorect.
rules-stabileste marginile interioare vizibile ale tabelului. Poate lua
valorile none, groups, rows, cols, all. IE afiseaza incorect.
Atributele tag-ului <table> cu style
In loc de atributul align folosim sintaxa CSS:
<table style="float:right">
In loc de atributul bgcolor folosim sintaxa CSS:
<table style="background-color:#00FF00">
In loc de atributul width folosim sintaxa CSS:
<table style="width:50%">
In loc de atributele border, frame si rules folosim:
border - seteaza marginile intr-o singura declaratie, in ordinea:
border-width border-style border-color
border-top /border-right /border-bottom /border-left - seteaza toate
proprietatile marginilor de sus /dreapta /jos /stanga intr-o singura
declaratie, in ordinea: border-top-width border-top-style
border-top-color
In loc de cellpading folosim:
padding - seteaza toate marginile din interiorul elementului, in
ordinea: padding-top padding-right padding-bottom padding-
left
Cateva atribute comune tag-urilor <th> si <td>
align – seteaza alinierea orizontala a continutului celulei. Poate lua
valorile left, right, center, justify, char.
valign - seteaza alinierea verticala a continutului celulei. Poate lua
valorile top, middle, bottom, baseline.
colspan - defineste numarul de coloane pe care o celula se poate
extinde. Ia valoare numerica.
rowspan - defineste numarul de linii pe care o celula se poate
extinde. Ia valoare numerica.
nowrap – continutul celului sa fie doar pe o singura linie. E
invechit, dar in loc folosim sintaxa CSS: <th style="white-space:
nowrap">
height – seteaza inaltimea unei celule. E invechit, dar in loc folosim
sintaxa CSS: <th style="height: 20px">
weight – seteaza latimea unei celule. E invechit, dar in loc folosim
sintaxa CSS: <th style="weight: 30px">
scope - defineste o asociere intre celule header si cele de date. Poate
lua valorile col, row, colgroup, rowgroup. Nu are efect visual in
browser.
Atributele tagurilor <th> sau <td>: colspan si rowspan
<th colspan=nr. coloane></th> sau <th rowspan= nr.randuri></th>

Pentru nevoi de organizare a datelor din tabel sau pentru

obtinerea de efecte, celulele pot fi extinse atat orizontal (pe mai
multe coloane) cat si vertical (pe mai multe randuri).

Celulele se extind intotdeauna in jos si/sau spre dreapta

-pentru a crea o celula care se extinde peste cateva coloane se
foloseste atributul COLSPAN in conjunctie cu tag-ul de
inceput a celei mai din stanga celule din rand,
- pentru a obtine extinderea unei celule peste mai multe randuri se
foloseste atributul ROWSPAN in conjunctie cu tag-ul de inceput a
celei mai de sus celule de pe coloana.

In cazul unor descrieri eronate (cu celule care se „suprapun“)

browserele reactioneaza diferit, efectele putand fi uneori
imprevizibile.
Atributele tagurilor <th> sau <td>: colspan si rowspan

<th colspan=nr. coloane></th> sau <th rowspan= nr.randuri></th>

Extinderea coloanelor/randurilor nu inseamna doar adaugarea

atributelor colspan/rowspan. Cand browserul intalneste acest
atribut furnizeaza spatiul necesar definit de valoarea
nr.coloane/nr.randuri celulei respective.

Pentru fiecare celula extinsa trebuie inlaturata definitia

corespunzatoare celulei respective.

Cand se extind celulele in ambele directii, adica se folosec ambele

atribute colspan si rowspan, trebuie inlaturate definitiile celulelor
din dreapta, din stanga si de pe diagonala.
Tag-ul <thead>

<thead> </thead> defineste un grup de randuri de tip

header (antet) intr-un tabel.

Un tabel definit cu <table> poate avea un singur <thead>,

care poate apare dupa <caption>, <col> sau <colgroup>,
si poate preceda elementele <tfoot> (optional) si <tbody>
(obligatoriu).

Prin gruparea explicita a randurilor de antet cu <thead>, se

ofera browserelor posibilitatea de a include acele randuri
pe fiecare pagina tiparita a unui tabel mare, precum si
posibilitatea de a prezenta tabele care permit scroll doar
randurilor de date, cele de antet ramanand fixe pe ecran.
Tag-ul <tfoot>
<tfoot></tfoot> defineste un grup de randuri de tip footer.
Poate oferi un rand special, de tip sumar sau de tip „nota
de pagina“, ce se aplica unui tabel intreg sau numai unei
portiuni din el.

Un tabel definit cu <table> poate avea un singur <tfoot>,

care poate apare dupa <thead> (optional) si poate preceda
elementul <tbody> (obligatoriu).

Prin gruparea explicita a randurilor de footer cu <tfoot>,

autorii ofera browserelor posibilitatea de a include acele
randuri pe fiecare pagina tiparita a unui tabel mare,
precum si posibilitatea de a prezenta tabele care permit
scroll doar randurilor de date, cele de footer ramanand
fixe pe ecran.
Tag-ul <tbody>
<tbody></tbody> defineste un grup de randuri de date
intr-un tabel.

Un tabel definit cu <table> poate avea unul sau mai multe

elemente <tbody>, care pot aparea dupa elementul
<tfoot> (optional).

Prin gruparea explicita a randurilor de date cu <tbody>,

autorii ofera browserelor posibilitatea de a prezenta tabele
care permit scroll doar randurilor de date, cele de header
si footer ramanand fixe pe ecran.

Gruparea randurilor de date in mai multe <tbody> permite

sugerarea unor prezentari diverse pentru diferitele
grupuri, prin intermediul style-sheet-urilor.
Ordinea/structura tag-urilor <thead> <tfoot><tbody>
<table>
<caption>Vezi urmatorul tabel ce descrie...</caption>
<thead>
<tr> ... informatii de header ... </tr>
</thead>
<tfoot>
<tr> ... informatii de footer ...</tr>
</tfoot>
<tbody>
<tr> ... primul rand al primului bloc de date ...</tr>
<tr> ... al doilea rand al primului bloc de date ...</tr>
</tbody>
<tbody>
<tr> ... primul rand al blocului doi de date ... </tr>
<tr> ... al doilea rand al blocului doi de date ...</tr>
<tr> ... al treilea rand al blocului doi de date ...</tr>
</tbody></table>
Tag-ul <colgroup>
Diviziune structurala - defineste un grup de coloane intr-un tabel.
Permite o prezentare comuna pentru tot grupul de coloane prin
intermediul style-sheet-urilor in loc sa definim style ptr fiecare
rand, celula.

Tag-ul <colgroup> trebuie sa apara in interiorul tag-ului <table>

dupa elementul optional <caption> si inaintea elementului
optional <thead>.

Poate avea atributele: align, valign, width, span.

Atributul span (implicit 1) defineste numarul de coloane din grup.

Atributul width specifica latimea fiecarei coloane din grup.

Valoarea trebuie sa fie un numar de pixeli, procent din latimea
tabelului sau o latime relativa exprimată ca ” i*”, i intreg.
Tag-ul <col />

Defineste doar atributelor comune unei coloane. Tag-ul <col />

nu grupeaza coloane dpdv structural – acesta fiind rolul lui
<colgroup>.

Tag-ul <col /> poate sa apara in exteriorul (direct in <table>) sau

in interiorul unui grup explicit de coloane defint cu <colgroup>.

Elementele <col /> sunt vide si servesc doar ca suport pentru

atribute.

Poate avea atributele: align, valign, width, span.

Numarul de coloane din tabel
Numarul de coloane ce fac parte dintr-un grup se poate specifica in
doua moduri (mutual exclusive):
-cu atributul span al elementului (valoare implicita 1):
<colgroup span="40" width="20"> </colgroup>
-cu elementul <col/>, inclus in <colgroup>, se reprezinta una
sau mai multe coloane din grupul respectiv.
<colgroup><col width="20"><col width="20">...pana la
40 de coloane </colgroup>.

Cand este necesar sa se individualizeze o coloana (ptr. stil, latime... )

intr-un grup, se poate identifica acea coloana cu un element <col>.
Ptr. exemplul anterior, primele 39 de coloane sunt la fel, iar ultima
coloana, a 40-cea, are alt format.:
<colgroup width="20">
<col span="39">
<col id="format-special"> </colgroup>
Calculul numarului de coloane din tabel
Se folosesc doua metode, prezentate in ordinea in care sunt folosite:

1.Daca <table> contine un element <colgroup> sau <col>

numarul coloanelor se calculeaza adunand:
-Pentru fiecare <col> valoarea atributului span (implicit 1).
-Pentru fiecare <colgroup> ce contine cel putin un <col> se
ignora atributul span al fiecarui <colgroup> si pentru fiecare
<col> se aplica pasul 1.
-Pentru fiecare <colgroup> vid se ia valoarea lui span (implicit1).

2. Daca <table> nu contine <colgroup> sau <col> numarul de

coloane se determina din descrierea randurilor. Numarul de
coloane este egal cu numarul maxim de elemente ce par pe un
rand (incluzînd şi celule ce se extind pe mai multe coloane).
Pentru toate randurile care au mai putine coloane se adauga la
sfarsit celule goale.
Calculul numarului de coloane din tabel
Cele 2 metode trebuie sa dea acelasi rezultat: 3 coloane (din lipsa de
spatiu n-am mai inchis tag-urile </tr> si </td>).
1 <table> 2. <table>
<colgroup span="3"></colgroup> <colgroup>
<tr><td>... <col>
...randurile tabelului... <col span= "2">
</table> </colgroup>
<tr><td>....
... randurile tabelului...
</table>
3. <table>
<colgroup> 4. <table>
<col> <tr>
</colgroup> <td><td><td>
<colgroup span="2"> </tr>
<tr><td>... </table>
... randurile tabelului...
</table>
Tema 1: atributele tag-ului <table>
Faceti o pagina de web care sa contina pe langa text si urmatorul tabel:
<table border=”0”><caption>Money, Money, Money!!!!</caption>
<tr>
<th>Nume </th>
<th>Luna</th>
<th>Economii</th>
</tr>
<tr>
<td></td>
<td>Ianuarie</td>
<td>100</td>
</tr>
</table>
....Introduceti mai multe linii in tabel
Se insereaza “no-breaking space” in celula goala:  

Adaugati pe rand atributele:

align=”right” bgcolor = “#909090” border=”3” cellpadding="10"
cellspacing="8" frame="hsides" rules="cols"
Tema 2: tag-urile tabelelor folosind <style>
Folosind aceeasi pagina de web introduceti un nou tabel folosind <style>:

<!DOCTYPE html >

<html>
<head>
<title> Tabele cu stiluri</title>
<style type=”text/css”>
table, th, td { border:1px solid #770000;
border-collapse:collapse;}
th{background-color:#345fa4; color:#ffffff;}
td{ padding: 15px;}
</style>
</head>
<body>
<table>
....
Tema 3: atributele colspan si rowspan
Adaugati in pagina de web urmatorul tabel folosind atributele tag-ului
<th> colspan si rowspan.
Rezolvare Tema 3: atributele colspan si rowspan
<table border="1"><caption><em>Un tabel cu celule extinse pe linii si
coloane </em></caption>
<tr>
<th rowspan="2"> </th>
<th colspan="2">Average </th>
<th rowspan="2">Red<br/>eyes</th>
</tr>
<th>height</th>
<th>weight</th></tr>
<tr>
<th>Males</th>
<td>1.9</td>
<td>0.003</td>
<td>40%</td> </tr>
<tr>
<th>Females</th>
<td>1.7</td>
<td>0.002</td>
<td>43%</td></tr>
</table>
Forms

Forms / formularele – cresc gradul de interactivitate a
unui document HTML prin integrarea in document a
campurilor text statice si editabile, butoanelor radio,
casutelor de selectie, listelor de selectie si a campurilor
de editare.

Forms pot fi utilizate pentru introducerea unor date /
strangerea de informatie necesare aplicatiilor aflate in
"spatele" documentului. Datele sunt introduse de
utilizatorul browser-ului si a documentului HTML.

Exemple tipice de actiuni realizate cu ajutorul / prin
intermediul formularelor: o selectie dintr-o baza de date
(starea vremii dintr-o anumita regiune), un rezultat al unui
sondaj, vizualizarea unui document cu acces restrans.
Etape in proiectarea formularelor

In procesul de proiectare a unui document care utilizeaza

un formular HTML exista trei etape:

designul si implementarea (in HTML) a formularului de

intrare, care va fi vizualizat si completat de utilizator.

scrierea unei aplicatii care sa interpreteze datele introduse

in formular (aplicatie care este executata de un alt
calculator decat cel care ruleaza browser-ul cu formularul
– un server, de obicei cel care gazduieste serverul HTTP).

designul si implementarea documentului generat de

aplicatia de la punctul 2, ca raspuns la cererea
uilizatorului.
Continutul formularelor

Un formular HTML este o sectiune de document care contine: text,
elemente HTML uzuale; elemente speciale numite controale ; si
etichete ale acestor controale.

Fiecare control are obligatoriu:
– un nume, dat de atributul name al acelui control
– o valoare initiala specificata prin intermediul valorii
atributului value. Nu se modifica.
– o valoare curenta initial setata la valoarea initiala. Poate fi
modificata de utilizator prin intermediul actiunilor ce sunt
permise asupra controlului sau de scripturi.

Cand un formular este transmis pentru a fi prelucrat, unele
controale au numele legat de valoarea curenta, astfel se va transmite
un set de dublete numele controlului si valoarea sa curenta. Astfel
de controale sunt numite controale de succes.
Tipuri de controale
text input - permit introducerea unui text. Elementul input creaza
un control care are doar o singura linie disponibila, iar elementul
textarea creaza un control cu mai multe linii in care se poate
introduce text. In ambele cazuri textul ce se introduce devine
valoarea curenta a controlului.
checkbox - sunt elemente cu 2 stari on/off (selectat/deselectat). Este
"on" (selectat) cand atributul checked al lui este setat, devin
controale de succes. Intr-un formular mai multe checkbox-uri pot
avea acelaşi nume. Pentru crearea unui checkbox se foloseste
elementul input.
radio button - sunt exact ca checkbox-urile, cu excepţia faptului ca
atunci cand apar mai multe intr-un formular sunt mutual
exclusive: cand un astfel de buton este "on" (selectat), toate
celelalte care au acelasi nume sunt trecute automat pe "off". Pentru
crearea unui buton radio se foloseste elementul input.
Tipuri de controale
butoane: pentru crearea lor se foloseste elementul input sau buton
-butoane submit: cand este activat (apasat) trimite un formular
unui program de prelucrare. Un formular poate contine mai mult
de un buton submit.
-butoane reset: cand este activat (apasat) reseteaza toate
controalele la valorile lor intiale.
-butoane push: cand este activat nu are o actiune implicita. Poate
avea asociat un script de tip client-side si determina executia lui.
file select - permit sa se selecteze fisiere astfel incat continutul
acestora sa fie transmis odata cu formularul. Pentru crearea unui
control tip file select se foloseste elementul input.
menu -menurile ofera posibilitatea de a alege dintre mai multe
optiuni. Pentru crearea unui control de tip meniu se foloseste
elementul select in combinatie cu elementele optgroup si option.
object controls - permit inserarea de obiecte generice astfel ca
valorile asociate acestora sa fie transmise impreună cu celelalte
controale. Pentru crearea lui se foloseste elementul object.
Descrierea unui formular - tag-ul <form>
<form>...</form> - un container pentru controale, in interiorul
formularului se gasesc tag-urile care definesc controalele <select>
<input />, <textarea>, <button> etc.

Este folosit pentru a pasa date serverului specificand prin atributele

sale:
-programul ce va prelua formularul completat si transmis
-metoda prin care datele introduse vor fi trimise serverului

Exemplu cum se trimite un formular la o adresa de email:

<form action="mailto:[email protected]" method="post"
enctype =”text/plain”>
Nume: <br/> <input type="text" name="fname" size =''20'' />
<br/>
Email:<br /><input type="text" name="email" size="20" />
<br />
</form>
Atributele tag-ului <form>
action – specifica unde sa se trimita datele formularului. Obligator!
action="URL" - URL-ul programului care va fi executat
action="mailto: adresă@domeniu" - program de expediere a
continutului formularului.
method – specifica cum sa se trimita datele formularului la adresa
specificata in atributul action. Poate lua valorile:
method=”get”- datele formularului sunt adaugate la adresa URL:
ex: URL?name=value&name=value. Avantaj, se pot crea
bookmark-uri pe astfel de adrese. Dezavantaje, nu poate contine
caractere non-ASCII si limitarea impusa de lungimea maxima a
adresei URL permisa de browser si de server.
Atentie la informatia senzitiva!
method=”post” - datele formularului sunt in corpul cererii HTTP
post. Avantaj, mai robusta si mai securizata, nu are limitare de
dimensiune. Dezavantaj, nu se pot crea bookmark-uri.
name – specifica numele formularului, furnizand un mod de referire
a formularului cand e folosit intr-un script.
Atributele tag-ului <form>
enctype – specifica cum sa fie encodate datele formularului inainte
de a fi trimise serverului. Poate lua valorile:
enctype= ''application/x-www-form-urlencoded'' - toate
caracterele sunt encodate , cu caracterul spatiu inlocuit de "+" si
cu caracterele speciale inlocuite de valorile ASCII HEX
enctype= ''multipart/form-data'' – niciun caracter nu e encodat,
se foloseste cand avem un control de tipul file select.
enctype = ''text/plain'' – spatiile inlocuite de "+" , dar caracterele
speciale ne encodate.
Biblioteci publice, (exemplu CGI.pm) care ofera rutine ce preiau
transparent ceea ce se trimite cu get sau post (ca application/x-
www-form-urlencoded sau multipart/form-data).
accept-charset – specifica lista de codificari acceptate de serverul
care primeste datele formularului.Valoarea acestui atribut este o
lista "charsets" separate de virgula. (UTF-8 – caractere codificate
ptr Unicode , ISO-8859-1 – caractere codificate ptr alfabetul latin)
Tag-urile folosite in <forms>

<input /> Defineste un control ptr. introducerea
informatiei

<textarea>Defineste o zona pentru intoducerea textului

<label> Defineste o eticheta ptr un control de tip
<input/>

<fieldset> Defineste un chenar in jurul elementelor

<legend> Defineste un caption ptr elementul <fieldset>

<select> Defineste a drop-down list

<optgroup> Grupeaza optiunile intr-o lista

<option> Defineste o optiune in a select list

<button> Defineste un push buton

Tag-urile pentru crearea controalelor apar, in general, intr-un

element <form>, dar pot apare si in afara declaratiei lui <form>,
cand cream interfete si atunci nu pot fi controale de succes.
Crearea controalelor de baza cu tag-ul <input />
<input /> - creaza un control al unui formular permitand
introducerea datelor.

<input /> - utilizat de obicei in cadrul lui <form>, dar HTML

permite si folosirea lui in orice element block-level sau inline.

<input /> - creaza mai multe tipuri de controale (text input,

checkbox, radio buton, file select, button etc), individualizarea lor
facandu-se prin intermediul atributului type. Valoarea implicita
atribuita este type=''text''.

Cand formularul este transmis valoarea curenta a fiecarui

<input /> din <form> este trimisa sub forma unei perechi
nume/valoare. Atributul name ofera numele ce va fi folosit pentru
identificarea controlului respectiv, iar tipul valorii depinde de tipul
<input />.
Atributele tag-ul <input />

type – permite introducerea datelor specificand tipul controlului:

Text, Password, Checkbox, Radio button, Button, Reset,
Submit, File, Image (imagine ptr un buton submit), Hidden
(invizibil in browser, dar a caror valori sunt transmise cu
formularul - pastreaza informatia intre schimburile client/server).
name – specifica numele ce va fi folosit pentru identificarea
controlului respectiv, permite serverului sa interpreteze formularul
pentru a determina corelatia nume/valoare, dintre fiecare raspuns
al utilizatorului si elementele formularului.
value – specifica valoarea curenta, e diferita in functie de type:
type="button", "reset", "submit" - defineste textul de pe buton
type="text", "password", "hidden" - defineste valoarea de default
type="checkbox", "radio", "image" - defineste valoarea ce se
trimite atributului action din <form>.
type="file" nu poate fi folosit.
Atributele tag-ul <input />
checked- preselecteaza checkbox si radio button. Ia valoarea
checked.
disabled – deselecteaza un control. Ia valoarea disabled. Nu se poate
folosi cu type=''hidden''
src – se foloseste numai cu type =''image'' si specifica URL unei
imagini folosite pentru un buton submit.
alt - se foloseste numai cu type="image" si specifica un text
alternativ pentru utilizatorul care din diverse motive nu poate
vedea imaginea.
size - ptr type="text" si type="password", defineste numarul de
caractere visible. Pentru toate celelalte tipuri, defineste latimea in
pixeli.
maxlenght - specifica lungimea maxima, in caractere a controalelor
type="text" sau type="password''.
readonly- specifica textul introdus sa fie read-only pentru
type="text" sau type="password".
Atributele tag-ul <input />

Toate variatiile lui <input /> pot specifica si atribute

pentru evenimente. Sunt utilizate de scripturi pe diverse
evenimente, valoarea atributelor fiind un script:

onfocus cand elementul primeste focusul;

onblur cand elementul pierde focusul;
onselect cand textul dintr-un control de tip text sau
password este selectat;
onchange cand elementul pierde focusul si valoarea lui a
fost schimbata fata de momentul in care l-a primit;
onreset cand formularul se reseteaza;
onsubmit cand formularul e submis;
Exemple tag-ul <input />
<body><form action="form_action.asp" method="get">
Numele: <input type="text" name="fname" value=”Popescu”
size=”40” /><br />
Varsta<input type=”range” name=”age” min=”1” max =”100”
value=”25” /> <br/>
Parola: <input type=”password” name=”ps” size=”40” /><br/>
<input type="radio" name="sex" value="Mas" /> Masculin<br />
<input type="radio" name="sex" value="Fem" /> Feminin<br />
<input type="checkbox" name="cursuri" value="Fizica" /> Tema la
Fizica<br />
<input type="checkbox" name="cursuri" value="Info"
checked="checked" /> Tema la Informatica <br />
<input type="file" name="tema" />
<input type="reset" value="Resetez" />
<input type="submit" name=''trim'' value="Trimit datele" />
</form>
<p>Datele vor fi trimise la server intr-o pagina cu numele
"form_action.asp".<br/> Butonul de reset nu are nume deoarece starea
lui nu e niciodata transmisa serverului </p></body>
Exemple <input type =”hidden” />
type=”hidden” - permit inserarea in formulare a unor elemente care
nu sunt afisate de browser. Extrem de utile ptr aplicatiile cu mai
multe documente HTML: ceea ce se introduce poate fi
„transportat“ de la un formular la altul fara sa fie vizibil

Exemplu:
<html><body>
<form action="form_action.asp" method="get">
Email: <input type="text" name="email" /><br />
<input type="hidden" name="tara" value="Romania" />
<input type="submit" value="Submit" />
</form>
<p>Click pe butonul "Submit" si datele vor fi trimise la server intr-
o pagina cu numele "form_action.asp".</p></body></html>

Serverul a procesat formularul si a intors raspunsul:

email=&tara=Romania
HTML5 input types
color - selector de culoare
date - selector an/luna/zi fără ora.
datetime-local - selector an/luna/zi și ora, dar fara time-zone
month - control ce permite selectia an/luna
week - control ce permite selectia an/saptamana
number - text input ce permite doar valori numerice
range - un slider ce permite selectia unui numar.
search - text input folosit pentru search.
tel - text input folosit pentru numere de telefon
time -control ce permite introducerea orei, dar fara time-zone
url -text input care valideaza un url
email -text input care valideaza o adresa de e-mail.

Noi atribute ale tag<input> :

required, pattern, readonly, min/max, autocomplete, placeholder
Exemple <input type =”button” />
type=”button” un buton care se poate apasa si care se foloseste cu
scripturi (client-side). Atributul onclick este folosit pentru a defini
o acţiune ce se declansează cand butonul este apasat.

Exemplu:<html><head>
<script type="text/javascript">
function msg(){alert("Cucu bau!");}
</script>
</head>
<body>
<form>
<input type="button" name=”bt”value="Click me"
onclick="msg()" />
</form>
<p>Butonul activeaza functia JavaScript cand e apasat.</p>
</body></html>
JavaScript Callback
Callback =funcții implementate ca parametrii ale altor funcții

Exemplu:<html><head>
<script type="text/javascript">
function msg(){
alert("Cucu bau!");
if (callback) {
callback();} }
function ScrieCeva() {
document.writeln('Merg la Viena');}
</script>
</head>
<body>
<button onclick="msg(ScrieCeva)" >Click me <button/>
<p>Butonul activeaza functia ScrieCeva cand e închisa fereastra
de dialog .</p>
</body></html>
Exemple: Search in pagina de Web

Urmatoarul exemplu defineste caseta de cautare din Yahoo:

<a href="http://search.yahoo.com/search/options">Options</a>
</form>
</body></html>
Tema tag-ul <input />
Faceti un formular in exemplu. Folositi type = “image” (atributele
src si alt sunt obligatorii si alte atributele width si height) si type=
“password”
tag-ul < button>...</button>
<button> creaza butoane in mod similar cu <input />, dar ofera mai
multe posibilitati de afisare - asocierea cu imagini, continut. Toate
browser-ele sugereaza pentru aceste butoane apasarea, spre
deosebire de cele definite cu <input /> care pot fi „plate“.

Atribute: name, value, type (button, reset, submit), disabled

<html><body>
<form action="form_action.asp" method="get">
Alege tara preferata de vizitat:
<button type="submit" name="tara" value="Italia">
Italia</button>
<button type="submit" name="tara" value="Peru">
Peru</button>
<button name="tara" type="submit" value="China"
disabled=''disabled''> China</button>
</form></body></html>
tag-ul < texarea>...</texarea>
<textarea> - creaza un control pentru introducerea unui text multi-
linie, valoarea initiala fiind afisata de browser in interiorul
controlului (nu trebuie sa contina tag-uri HTML).Poate fi si in
afara tag-ului <form>

Atribute: name, disabled, readonly si rows, cols (exprimate in nr de

caractere pe orizontala/verticala - nu inseamna o limitare,
umplerea ferestrei determina aparitia barelor de derulare)

Exemplu: <html><body>
<form action="http://somesite.com/text-read" method=”post”>
<textarea name="text" rows="10" cols="20">
Prima linie a textului iniţial. A doua linie a textului iniţial.
</textarea>
<input type="submit" value="Send" />
<input type="reset" />
</form></body></html>
Tag-ul <label>
<label>...</label> - asociaza o eticheta (label) cu un
control al unui formular introdus cu <input />. Folosirea
acestui tag permite duplicarea unor caracteristici ale
interfetei utilizator (GUI), cum ar fi de exemplu,
posibilitatea de a apasa o eticheta (text) pentru a selecta un
buton radio sau o un checkbox.

Fiecare element <label> este asociat cu exact un control.

Continutul elementului este eticheta controlului si poate
include elemente inline ( ca de exemplu <img>, <strong>,
<em>,<dfn>, <code>, <cite> etc.)

Atributul for specifica in mod explicit controlul care se

asociaza cu <label>. Valoarea lui for trebuie sa se
Metode de asociere a tag-ului <label> cu un control
Asocierea explicita cu atributul for:

<form><label for="masc">Masculin</label>
<input type="radio" name="sex" id="masc" /><br />
<label for="fem">Feminin</label>
<input type="radio" name="sex" id="fem" /></form>

Asocierea implicita, control continut de <label>:

<form><label>
<input type=”checkbox” name=”save” value=”yes” />
Salveaza user name si parola </label>
<label>Postati comentariile dvs:
<textarea name=”com” rows=”8” cols=”30”>
</textarea> </label></form>
Tag-urile <select>, <option> si <optgroup>

<select>...</select> - creaza un control pentru o lista de

optiuni (drop-down list).

Se foloseste in cadrul lui <form>, dar se permite

folosirea lui si in orice element block-level sau inline
(exceptia <button>). Netscape Navigator nu va afisa nici
un element <select> in afara unui <form>.

<option>...</option> - defineste posibilitatile de alegere

din lista. Fiecare optiune este continuta intr-un element
<option>, ce se gaseste inauntrul elemetului <select>.

Optiunile pot fi grupate logic cu <optgroup>.

Atributele tag-ului <select>

name - specifica numele unei liste drop-down. Valoarea
lui va fi trimisa serverului ca identificator al controlului
impreuna cu optiunea selectata.

size - specifica numarul de optiuni vizible din lista.
Implicit are valoarea 1. Daca este mai mare decat 1, lista
este prezentata intr-o fereastra inserata, valoarea lui size
indicand cate elemente pot fi vazute simultan.

multiple - nu are o valoare numerica asociata, prezenta
lui asigura doar posibilitatea selectiei mai multor elemente
ale listei simultan (cu tasta CTRL) care vor fi trimise la
server. Ia valoarea ''multiple''. E mai bine sa se
foloseasca checkbox-urile.

disabled – setarea ca inactiv (nu poate fi selectat, nu
este trimisa odata cu formularul). Se foloseste JavaScript
ptr a indeparta acest atribut. Ia valoarea ''disabled''.
Exemplu atribute pentru tag-ul <selected>

Selectati culoarea preferata:

<select name="culori" size=”1” >
<option>Rosu</option>
<option>Verde</option>
<option>Albastru </option>
<option>Turcoaz </option>
<option>Magenta </option>
</select>

Schimbati valoarea atributului size. Adaugati atributul

multiple=”multiple”.
Atributele tag-ului <option>

value - specifica valoarea ce va fi trimisa serverului
cand formularul e submis. Daca acest atribut lipseste se
considera valoare continutul tag-ului <option>.

label - specifica eticheta unei optiuni, care altfel
implicit este continutul elementului. E suportat doar IE
7+.

selected - defineste o optiune ce este initial selectata/
preselectata. Optiunea selectata este cea care va fi
afisata prima din lista. Se poate folosi acest atribut chiar
dupa ce pagina a fost incarcata folosind JavaScript. Ia
valoarea ''selected''.

disabled – determina transformarea unei optiuni in
optiune inactiva (nu poate fi selectata, nu este trimisa
odată cu formularul). Ia valoarea ''disabled''.
Exemplu atribute pentru tag-ul <option>

Selectati starea curenta:

<select name="emo" >
<option value=”opt”>Optimist</option>
<option value =”pes”>Pesimist</option>
<option value =”ama”>Amarat </option>
<option selected=”selected”value=”lef”>Lefter
</option>
<option value=”ipo”> Ipohondru</option>
</select>

Adaugati atributul disabled=”disabled”.

Tag-ul <optgroup>
<optgroup>...</optgroup> - defineste un grup de optiuni si
trebuie sa contina cel putin un element <option>. Descrie grupul
de optiuni grupate dpdv logic impreuna cu atributele label ale
fiecarei optiuni in parte.

<optgroup> nu este foarte bine suportat de toate browserele, dar

cele care nu il recunosc nu creaza nicio problema. Cele care il
suporta permit o afisare mai compacta prin intermediul meniurilor
cascadate (submeniuri).

Atributul label este obligatoriu, identifica grupul de optiuni.

Atributul disabled face intregul grup de optiuni

inactive/dezactivate, acestea neputand fi selectate si nici trimise la
server odata cu formularul.
Exemplu atribute pentru tag-ul <optgroup>
Selectati starea curenta:
<select>
<optgroup label="Ciocolata Belgiana">
<option value="Praline">Praline</option>
<option value="Fondante">Fondante</option>
</optgroup>
<optgroup label="Ciocolata Germana">
<option value="Amaruie">Ciocolata
Amaruie</option>
<option value="Alba">Ciocolata Alba</option>
<option value="Alune">Ciocolata cu Alune</option>
</optgroup>
</select>
Tag-urile <fieldset> si <legend>

<fieldset>...</fieldset> - permite gruparea tematica a

controalelor si a etichetelor unui formular. Prin aceasta
operatie formularele se divid in parti mai mici,
utilizatorul putandu-se orienta mai usor. Documentele
devin mai accesibile, oferind in plus si facilitati de
navigare (pentru browserele vizuale, de exmplu cu tasta
TAB).

<legend>...</legend> permite asignarea unei explicatii,

titlu unui element <fieldset>, imbunatatind
accesibilitatea. Elementul <legend> trebuie sa apara la
inceputul lui <fieldset>, inainte de orice alt element.
Exemplu pentru tag-urile <fieldset> si <legend>
<form action="mailto:[email protected]" method="post">
<fieldset>
<legend>Contact Information</legend>
<table>
<tr>
<td><label for=”nume”>Name:</label></td>
<td><input type=”text” name=”nume” id=”nume”></td>
</tr>
<tr>
<td><label for=”email”>E-mail Address:</label></td>
<td><input type=”text” name=”email” id=”email”></td>
</tr>
<tr>
<td><label for=”addr”>Mailing Address:</label></td>
<td><textarea name=”address” id=”addr” rows=4 cols=40>
</textarea></td></tr></table></fieldset></form>
Practica


Faceti un formular pentru a comanda pizza. Folositi toate
tipurile de controale invatate.
Bibliografie

CSS
Meniuri
Diverse proprietati CSS
Creati o pagina HTML cu urmatoarea structura :
<head> <style type =”text/css”>
#ddd{background-color:pink; border:10px solid green; width:300px;
padding:20px 70px; margin: 300px;}
.pos1{position:fixed;top:30px;right:50px; border:1px solid green;}
.pos2{position:relative;left:-20px; border:1px solid red;}
.pos3{position:absolute; bottom:150px; right:0; border:1px solid
black;}
.stilpoza { position: absolute; left: 0px; top: 0px; z-index: -1;}
</style> </head>
<body> <div> <p> scrieti un text </p>
<p class=”pos2”> scrieti un text </p>
<p class=”pos3”> scrieti un text </p></div>
<p class=”pos1”> scrieti un text mai lung </p>
<div id=”ddd”> <h1> </h1> <img class=”stilpoza” /> <p> scrieti
un text </p></div> </body>
Adaugati atributul opacity: 0.3 ptr clasa .stilpoza
Exemplu <span>

<head>
<style type =”text/css”>
p::first-letter {color:#ff0000; font-size:200%;}
p.ccc::first-letter{color:#0000e4; font-size:400%;}
#aaa{float:left; border:3px solid blue;}
</style></head>
<body>
<p><span style="color:#f34455;font-size: 150%;">T</span>text
text texttext texttext</p>
<p>Merg la film cu George si Vasile</p>
<img src =” poza.jpg” width=”300” height=”300” id=”aaa” / >
<p>Merg la teatru cu Ioana, Maria si Vasile</p>
<p class=”ccc”> Merg la scoala singura </p>
</body>
Exemplu <span>

<p>Mouse peste cuvant - schimba cursorul</p>

<span style="cursor:auto">auto</span><br/>
<span style="cursor:crosshair">crosshair</span><br/>
<span style="cursor:default">default</span><br/>
<span style="cursor:e-resize">e-resize</span><br/>
<span style="cursor:help">heeeeeeelp</span><br/>
<span style="cursor:move">moooooove</span><br/>
<span style="cursor:pointer">pointerrrrrr</span><br/>
<span style="cursor:progress">progressssssss</span><br/>
Div / float

Testati proprietatea overflow: scoll

Float/ display /hover
Float/ display /hover
<head><style>
ul{list-style-type: none; float: left; width:100%; padding:20px; margin:10px;}
li{display: inline;}
a{float: left; text-decoration: none; color: white; background-color: purple;
border-right: 1px solid white; padding:10px 20px; }
a:hover {background-color: #ff3308; cursor: pointer;}
</style></head>
<body>
<ul>
<li><a href="#">Link Fizica</a></li>
<li><a href="#">Link Matematica</a></li>
<li><a href="#">Link Chimie</a></li>
<li><a href="#">Link Informatica</a></li>
</ul>
<p>
Trebuie sa faceti o lista de link-uri si sa o stilizati prin CSS folosind
proprietatile float /display / hover. <br/> <br/> Cand punem mouse-ul pe un
link se schimba culoarea de background.</p> </body>
Imagine /hover
<head>
<style type=”text/css”>
.dropdown {position: relative;display: inline-block;}
.continut {display: none;position: absolute;background-color: #f9f9f9;width:
160px;}
.dropdown:hover .continut {display: block;}
.descriere {padding: 15px;text-align: center;}</style>
</head>
<body>

<p>Mutati mouse-ul peste imagine si se va afisa imaginea marita</p>

<div class="dropdown">
<img src=" poza.jpg" width="100" height="50" />
<div class="continut">
<img src="poza.jpg" width="300" height="200">
<div class="descriere"> Cea mai frumoasa poza</div>
</div> </div>
</body>
Imagine /hover
<head>
<style type=”text/css”>
.dropdown {position: relative;display: inline-block;}
.continut {display: none;position: absolute;background-color: #f9f9f9;width:
160px;}
.dropdown:hover .continut {display: block;}
.descriere {padding: 15px;text-align: center;}</style>
</head>
<body>

<p>Mutati mouse-ul peste imagine si se va afisa imaginea marita</p>

<div class="dropdown">
<img src=" poza.jpg" width="100" height="50" />
<div class="continut">
<img src="poza.jpg" width="300" height="200">
<div class="descriere"> Cea mai frumoasa poza</div>
</div> </div>
</body>
Buton /hover
<head><style>
.btn {background-color: #4CAF50;color: white; padding: 16px;border:
none;cursor: pointer;}
.injos{position: relative;display: inline-block;}
.continut{display: none;position: absolute;background-color: #f9f9f9;width:
160px;}
.continut a {color: black;padding: 12px 16px; text-decoration: none;
display: block;}
.continut a:hover {background-color: #f1f1f1;}
.injos:hover .continut{ display: block;}
.injos:hover .btn {background-color: #3e8e41;}
</style></head>
<body><p>Muteti mouse-ul peste button </p>
<div class="injos">
<button class="btn">Curs Matematica</button>
<div class="continut">
<a href="#">Algebra Liniara</a>
<a href="#">Geometrie</a>
<a href="#">Analiza</a></div></div></body>
Meniu – exemplu 1
<ul id="menuv">
<li><a href="http://www.imdb.com/">Filme</a></li>
<li> + BoxOffice
<ul>
<li><a href="http://www.imdb.com/title/tt3063516/?ref_=hm_cht_t1" title="Jackass
Presents:Bad Grandpa">Jackass Presents: Bad Grandpa</a></li>
<li><a href="http://www.imdb.com/title/tt1454468/?ref_=hm_cht_t2"
title="Gravity">Gravity</a></li>
</ul>
</li>
<li> + Opening This Week
<ul>
<li><a href="http://www.imdb.com/title/tt1731141/?ref_=hm_inth_t1"
title="Actiune">Ender's Game</a></li>
<li><a href="hhttp://www.imdb.com/title/tt1204975/?ref_=hm_inth_t2"
title="Comedie">Last Vegas</a></li>
<li><a href="http://www.imdb.com/title/tt1621039/?ref_=hm_inth_t3"
title="Animatie">Free Birds </a></li>
</ul>
</li>
<li><a href="http://www.imdb.com/title/tt1981115/?ref_=hm_cs_t1" title="In curand pe
ecrane">Coming Soon</a></li>
</ul>
Id menuv

Puteti stiliza pagina folosind CSS extern sau CSS intern

cu elementul <style type=”text/css”>

#menuv {
width:200px;
border:2px solid black;
background-color:#c0edfe;
padding:2px;
}
#menuv li

/* Proprietati pentru primul nivel din meniul vertical */

#menuv li {
margin:1px 0;
background-color:#c0c1ce;
padding:1px;
list-style-type:none;
font-weight:600;
text-align:left;
}
#menuv li a

/* Proprietati pentru primul nivel din meniul vertical */

#menuv li a {
display:block;
margin:0;
font-weight:normal;
}
#menuv li a : hover

/* Proprietati pentru primul nivel din meniul vertical */

#menuv li a:hover {
background-color:#fe0000;
text-decoration:none;
font-style:oblique;
}
#menuv li : hover ul

/* Proprietati pentru nivelul doi din meniul vertical */

#menuv li:hover ul {
display:block;
}
#menuv li ul

/* Proprietati pentru nivelul doi din meniul vertical */

#menuv li ul {
display:none;
position:relative;
margin:-1px 0 -2px 0;
padding:1px 0;
}
#menuv li ul li

/* Proprietati pentru nivelul doi din meniul vertical */

#menuv li ul li {
margin:2px 0 0 20px;
background-color:#0034fe;
padding:1px 0;
border:1px dotted red;
}
Meniu – exemplu 2
<ul id="menuv">
<li><a href="http://www.imdb.com/">Filme</a></li>
<li><span style="color:#fa2000"> + BoxOffice</span>
<ul>
<li><a href="http://www.imdb.com/title/tt3063516/?ref_=hm_cht_t1" title="Jackass Presents:
Bad Grandpa">Jackass Presents: Bad Grandpa</a></li>
<li><a href="http://www.imdb.com/title/tt1454468/?ref_=hm_cht_t2"
title="Gravity">Gravity</a></li>
</ul>
</li>
<li><span style="color:#0cb100"> + Opening This Week</span>
<ul>
<li><a href="http://www.imdb.com/title/tt1731141/?ref_=hm_inth_t1"
title="Actiune">Ender's Game</a></li>
<li><a href="hhttp://www.imdb.com/title/tt1204975/?ref_=hm_inth_t2"
title="Comedie">Last Vegas</a></li>
<li><a href="http://www.imdb.com/title/tt1621039/?ref_=hm_inth_t3" title="Animatie
">Free Birds </a></li>
</ul>
</li>
<li><a href="http://www.imdb.com/title/tt1981115/?ref_=hm_cs_t1" title="In curand pe
ecrane">Coming Soon</a></li>
</ul>
Id - menuv

#menuv {
position:relative;
width:260px;
border:1px solid black;
background-color:#ca00fe;
padding:2px;
}
#menuv li

/* Proprietati pentru primul nivel din meniul vertical */

#menuv li {
margin:1px 0;
background-color:#f0f1fe;
padding:1px;
list-style-type:none;
font-weight:600;
text-align:left;
}
#menuv li a, #menuv li span

/* Proprietati pentru primul nivel din meniul vertical */

#menuv li a, #menuv li span {

display:block;
margin:0;
font-weight:normal;
}
#menuv li a : hover

/* Proprietati pentru primul nivel din meniul vertical */

#menuv li a:hover {
background-color:#fefefe;
text-decoration:none;
font-style:oblique;
}
#menuv li: hover ul

/* Proprietati pentru nivelul doi din meniul vertical */

#menuv li:hover ul {
display:block;
}
#menuv li: hover ul

/* Proprietati pentru nivelul doi din meniul vertical */

#menuv li ul {
display:none;
position:absolute;
z-index:2;
width:100%;
left:151px;
margin:-20px auto 0 auto;
background-color:#daedfe;
border:1px dashed black;
padding:1px;
}
#menuv li ul li

/* Proprietati pentru nivelul doi din meniul vertical */

#menuv li ul li {
margin:1px;
background-color:#edfeed;
padding:1px 0 1px 2px;
}
Meniu – exemplu 3
<ul id="menuv">
<li><a href="http://www.imdb.com/">Filme</a></li>
<li><span style="color:#fa2000"> Box Office</span>
<ul>
<li><a href="http://www.imdb.com/title/tt3063516/?ref_=hm_cht_t1" title="Jackass Presents:
Bad Grandpa">Jackass Presents: Bad Grandpa</a></li>
<li><a href="http://www.imdb.com/title/tt1454468/?ref_=hm_cht_t2"
title="Gravity">Gravity</a></li>
</ul>
</li>
<li><span style="color:#0cb100"> Opening This Week</span>
<ul>
<li><a href="http://www.imdb.com/title/tt1731141/?ref_=hm_inth_t1"
title="Actiune">Ender's Game</a></li>
<li><a href="hhttp://www.imdb.com/title/tt1204975/?ref_=hm_inth_t2"
title="Comedie">Last Vegas</a></li>
<li><a href="http://www.imdb.com/title/tt1621039/?ref_=hm_inth_t3" title="Animatie
">Free Birds </a></li>
</ul>
</li>
<li><a href="http://www.imdb.com/title/tt1981115/?ref_=hm_cs_t1" title="In curand pe
ecrane">Coming Soon</a></li>
</ul>
Id - menuv

#menuv {
position:relative;
padding:50px;
}
# menuv li – lista orizontala

/* Proprietati pentru lista orizontala */

#menuv li {
float:left;
margin:10px 20px;
/*border:1px solid black; */
background-color:#daedfe;
padding:1px 20px;
list-style-type:none;
font-weight:600;
text-align:left;
text-decoration:underline;
}
# menuv li: hover ul – lista verticala

/* Proprietati pentru listele verticale */

#menuv li:hover ul {
display:block;
}
# menuv li ul – lista verticala

/* Proprietati pentru listele verticale */

#menuv li ul {
display:none;
position:absolute;
margin:1px auto 1px -11px;
background-color:#f0f1fe;
border:1px double black;
padding:5px;
}
# menuv li ul li – lista verticala

/* Proprietati pentru listele verticale */

#menuv li ul li {
position:relative;
clear:both;
width:99%;
margin:1px 0;
border:none;
background-color:#edfeed;
padding:1px;
}
# menuv ul li a – submeniu

/* Link-uri in sub-menu */

#menuv ul li a {
display:block;
margin:0;
font-weight:normal;
padding:1px;
}
# menuv ul li a: hover – submeniu

/* Link-uri in sub-menu */

#menuv ul li a:hover {
background-color:#fefefe;
text-decoration:none;
font-style:oblique;
}
Bibliografie

Carusel de Imagini
Caruselul de Imagini

Avem un set de imagini care ce vor afisa pentru o

anumita perioada de timp - se cicleaza afisarea lor.

Se va folosi doar JavaScript, CSS si HTML fara

ajutorul altor librarii externe.
Creati Caruselul de Imagini

1. Scrieti structura clasica a oricarei pagini HTML

2. Folositi urmatoarele elemente HTML:

<header> <h1> <h2> <section><figure> <img>

pentru a crea urmatoarea pagina:

Creati Caruselul de Imagini
CSS extern
1. Setati pentru elementul <section> atributul id la valoarea
carusel
<section id="carusel">
2. Pentru primul element <figure> din elementul <section> setati
atributul class la valoarea vizibil
<section id="carusel">
<figure class="vizibil">
3. Creati fișierul style.css

4. Plasati tagul de <link> în interiorul tagului <head> și astfel

facetilegătura intre fisierul style.css si fișierul index.html

<head>
<title>Exemplu Carusel de Imagini</title>
<link rel="stylesheet" href="style.css" />
</head>
Index.html
<body>
<header>
<h1>News News News</h1>
<h2>Stiri Internationale</h2>
</header>
<section id="carusel">
<figure class="vizibil">
<img src="cars.png" alt="Masina Electrica" />
<figcaption> Masina electrica eficienta <figcaption> </figure>
<figure>
<img src="natural.png" alt="Dezastre naturale" />
<figcaption> Dezastre naturale <figcaption></figure>
<figure>
<img src="health.png" alt="Tehnologie si Medicina" />
<figcaption> Tehnologie si Medicina <figcaption> </figure>
</section>
</body>
CSS extern

Adăugam declaratiile css în fișierul style.css astfel încât sa se

ascunda imaginile din carusel care nu sunt referite de clasa vizibil

1. Se ascund elementele din <figure> by default

selectorul va fi elementul <img> care este descendentul direct al

elementului <figure> care este descendentul direct al elementului
<section> care are atributul id=”carusel”

section#carusel > figure > img {

display: none;
margin: 0px auto;
}
CSS extern
Adăugați declaratiile css în fișierul style.css astfel incat:

2. Se afiseaza doar elementele din <figure> referite de clasa

vizibil

selectorul va fi elementul <img> care este descendentul direct al

elementului <figure> referit prin clasa vizibil care este
descendentul direct al elementului <section> referit prin
id=”carusel”

section#carusel > figure.vizibil > img {

display: block;
position: relative;
overflow: hidden;
}
CSS extern

Adăugați declaratiile css în fișierul style.css astfel incat:

3. Se va ascunde elementul <figcaption> by default

selectorul va fi elementul <figcaption> care este descendentul

direct al elementului <figure> care este descendentul direct al
elementului <section> referit prin id=”carusel”

section#carusel > figure > figcaption {

display: none;
}
CSS extern
Adăugați declaratiile css în fișierul style.css astfel incat:

4. Se afiseaza doar elementul <figcaption> referit de clasa vizibil

selectorul va fi elementul <figcaption> care este descendentul direct

al elementului <figure> referit de clasa vizibil care este
descendentul direct al elementului <section> referit prin
id=”carusel”

section#carusel > figure.vizibil > figcaption {

display: block;
text-align: center;
font-weight: bold;
font-size: 1.5em;
}
JavaScript

Creati fișierul script.js în care veți scrie cod java astfel încât sa se
afiseze pe rand imaginile din carusel.

Plasati tagul de <script> în interiorul tagului <head> și astfel

faceți legătura intre fisierul script.js si fișierul index.html

<head>
<title>Exemplu Carusel de Imagini</title>
<script type="text/javascript" src="script.js"></script>
</head>
JavaScript

Adăugați urmatoarele linii de cod în fișierul script.js:

1. Setam variabila numita slideInterval la valoarea initiala de 3500

milisecunde (3.5s):

var slideInterval = 3500;

JavaScript

Adăugați urmatoarele linii de cod în fișierul script.js:

2. Cream o funcție numita getFigures() care va regăsi toate

elementele <figure> din interiorul elementului <section> ce are
atributul id carusel :

Adăugați urmatoarele linii de cod în fișierul script.js:

4. Cream funcția numita startPlayback() ce folosește functia
JavaScript setTimeout() pentru a invoca metoda moveForward()
si intervalul de timp specificat de variabila slideInterval

function startPlayback() {
setTimeout(moveForward, slideInterval);
}

5. Ultima linie de cod din fisier va fi apelul functiei startPlayback():

startPlayback();

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

HTML Si CSS
83% (6)
HTML Si CSS
198 pagini
Carte HTML
100% (4)
Carte HTML
52 pagini
Lucrul cu baze de date
De la Everand
Lucrul cu baze de date
Nicolae Sfetcu
Încă nu există evaluări
CURS Thnologii WEB
Încă nu există evaluări
CURS Thnologii WEB
228 pagini
Curs JAvaScript
100% (4)
Curs JAvaScript
85 pagini
Curs Html5
Încă nu există evaluări
Curs Html5
43 pagini
Suport Curs CSS
100% (1)
Suport Curs CSS
110 pagini
Cursuri Nano
Încă nu există evaluări
Cursuri Nano
248 pagini
Introducere În HTML Si CSS
Încă nu există evaluări
Introducere În HTML Si CSS
167 pagini
Noţiuni Elementare În Realizarea Paginilor Web (HTML)
Încă nu există evaluări
Noţiuni Elementare În Realizarea Paginilor Web (HTML)
32 pagini
LINK Academy - Introducere În HTML Şi CSS
Încă nu există evaluări
LINK Academy - Introducere În HTML Şi CSS
164 pagini
Ghid WordPress pentru dezvoltatori
De la Everand
Ghid WordPress pentru dezvoltatori
Nicolae Sfetcu
Încă nu există evaluări
Limbaj CSS
100% (1)
Limbaj CSS
42 pagini
Fundamente HTML
100% (1)
Fundamente HTML
21 pagini
Curs HTML A5
Încă nu există evaluări
Curs HTML A5
139 pagini
Java Script
100% (3)
Java Script
459 pagini
Tutorial CSS
Încă nu există evaluări
Tutorial CSS
24 pagini
Curs Jquery 2
Încă nu există evaluări
Curs Jquery 2
11 pagini
Ghid de Programare Web Pentru Începători
Încă nu există evaluări
Ghid de Programare Web Pentru Începători
131 pagini
Curs CSS A5
Încă nu există evaluări
Curs CSS A5
139 pagini
Structura Unui Site Web
100% (1)
Structura Unui Site Web
11 pagini
5 XML Si Java Script
100% (1)
5 XML Si Java Script
46 pagini
Suport Curs HTML
100% (1)
Suport Curs HTML
71 pagini
Limbajul HTML
100% (9)
Limbajul HTML
30 pagini
Proiectare Pagini Web
100% (6)
Proiectare Pagini Web
333 pagini
PW5 JavaScript
Încă nu există evaluări
PW5 JavaScript
125 pagini
Crearea Site-Urilor Web - Partea II
100% (1)
Crearea Site-Urilor Web - Partea II
177 pagini
Curs HTML
Încă nu există evaluări
Curs HTML
17 pagini
Suport Curs Java Script
Încă nu există evaluări
Suport Curs Java Script
33 pagini
Curs 1 HTML
Încă nu există evaluări
Curs 1 HTML
88 pagini
ATESTAT
Încă nu există evaluări
ATESTAT
41 pagini
Modulul I. Suport Curs - Tehnologii Web
Încă nu există evaluări
Modulul I. Suport Curs - Tehnologii Web
31 pagini
HTML
Încă nu există evaluări
HTML
53 pagini
Lectie 1, 2 Cls 12 - Pagini Web - HTML
Încă nu există evaluări
Lectie 1, 2 Cls 12 - Pagini Web - HTML
4 pagini
Referat 1
Încă nu există evaluări
Referat 1
6 pagini
Suport de Curs TIC Clasa a12a
Încă nu există evaluări
Suport de Curs TIC Clasa a12a
35 pagini
Proiectarea Paginilor WEB COMPLET
Încă nu există evaluări
Proiectarea Paginilor WEB COMPLET
171 pagini
Limbajul HTML
Încă nu există evaluări
Limbajul HTML
50 pagini
1.notiuni Pagini Web: Mihaescu Yanis 9E
Încă nu există evaluări
1.notiuni Pagini Web: Mihaescu Yanis 9E
15 pagini
Ghid de Initiere in HTML
Încă nu există evaluări
Ghid de Initiere in HTML
43 pagini
Carpatii Orientali
Încă nu există evaluări
Carpatii Orientali
19 pagini
Atestat Informatica
Încă nu există evaluări
Atestat Informatica
39 pagini
Curswebintroductiv
Încă nu există evaluări
Curswebintroductiv
15 pagini
Manual HTML
Încă nu există evaluări
Manual HTML
6 pagini
Manual HTML
Încă nu există evaluări
Manual HTML
40 pagini
Castelul Bran
Încă nu există evaluări
Castelul Bran
17 pagini
Cursuri DezvoltareaAplicatiilorWeb
Încă nu există evaluări
Cursuri DezvoltareaAplicatiilorWeb
75 pagini
Documentatie Proiect Minunile Lumii
Încă nu există evaluări
Documentatie Proiect Minunile Lumii
25 pagini
Roma Atestat
Încă nu există evaluări
Roma Atestat
28 pagini
Ghid de Initiere in HTML.
100% (1)
Ghid de Initiere in HTML.
46 pagini
MANUAL INTERNET EXPLORER (EXPLORATOR) #1 - Creare Conexiune - Configurare Interfata Si Optiuni - BN
Încă nu există evaluări
MANUAL INTERNET EXPLORER (EXPLORATOR) #1 - Creare Conexiune - Configurare Interfata Si Optiuni - BN
18 pagini
1 HTML
Încă nu există evaluări
1 HTML
46 pagini
Site-Uri Web
Încă nu există evaluări
Site-Uri Web
54 pagini
Documentatie MulteCARII
Încă nu există evaluări
Documentatie MulteCARII
26 pagini
Prezentare Arhitectura
Încă nu există evaluări
Prezentare Arhitectura
27 pagini
Model Client-Server: Socket Unix Vsock
Încă nu există evaluări
Model Client-Server: Socket Unix Vsock
43 pagini
Tehnologii Internet Pentru Afaceri - Note de Curs
Încă nu există evaluări
Tehnologii Internet Pentru Afaceri - Note de Curs
25 pagini
HTML Curs
Încă nu există evaluări
HTML Curs
52 pagini
Tema 1
Încă nu există evaluări
Tema 1
46 pagini
Webdesign
Încă nu există evaluări
Webdesign
121 pagini
Cursuri - Dezvoltarea Aplicatiilor Web
Încă nu există evaluări
Cursuri - Dezvoltarea Aplicatiilor Web
44 pagini
Cap 2 - Surse Elementare
Încă nu există evaluări
Cap 2 - Surse Elementare
29 pagini
BPMA Partial C1-6
Încă nu există evaluări
BPMA Partial C1-6
197 pagini
BPMA PPT l1-6
Încă nu există evaluări
BPMA PPT l1-6
205 pagini
Circuite Programabile Cu Aplicatii in Biomedicina Teorie Examen Final
Încă nu există evaluări
Circuite Programabile Cu Aplicatii in Biomedicina Teorie Examen Final
282 pagini