Curs 2 HTML&CSS PDF

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;”>

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: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>
#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>
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>
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(/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>
<aside>
<p>Al doile Paragraf</p>
</aside>
</article>
</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>
<aside>
<p>Al doilea Paragraf</p>
</aside>
</article>
</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>
<aside>
<p>Al doilea Paragraf</p>
</aside>
</article>
</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" />
<frameset rows="*,200">
<frame src="frame1.html" scrolling="yes" />
<frame src="poza.gif" resize=''resize'' />
</frameset>
<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>
<body bgcolor="#969090"> <h2> Sfarsit de pag 2 <h2></body>
<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>
<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):

<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>
<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:webmaster@hotnews.ro">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

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

Curs 2 HTML&CSS PDF

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Curs 2 HTML&CSS PDF

Încărcat de

Drepturi de autor:

Formate disponibile

Curs 2

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

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

HTML5 atributele standard sunt folosite pentru orice element

<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:

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

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 „*/”.

Se defineste prin intermediul constructiei:

Exemplu: fisierul mystyle.css

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Valorile negative extrag spatiu in loc sa adauge.

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

CSS1 (Cascading Style Sheets - level 1)

CSS2 (Cascading Style Sheets - level 2) – generalizare

Documentul HTML va avea stilurile definite conform unei foi de

Daca legatura catre fisierul .css se afla in document dupa

Selecteaza orice element care este un descendent al primului

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

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

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

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

<!DOCTYPE "HTML Frameset DTD" >

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

Poate contine si un element <noframes> pentru browserele ce

Atributele rows si cols definesc dimensiunea fiecarui frame din

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

3. Grid de 2x3 subspatii:

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

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

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

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