Web Perechea 4

Div și Span
Alinierea elementelor
Proprietatea float
Overflow Suprapunere
Machetare Breakpoints
Tatiana Pașa, doctor în informatică
USM, Departamentul Informatică
Perechea 4
Tagurile <div>...</div> si <span>...</span> nu au efecte importante
dacă sunt folosite singure.
- Tag-ul div crează secțiuni de blocuri în pagină, al căror formă și
grafică de conținut pot fi manipulate pentru fiecare separat.
- Tag-ul span crează posibilitatea modificării separate a unei porțiuni
dintr-un context, putând fi folosit și ca o "classă" cu CSS. Singur nu are
nici un efect vizual poropriu și nu folosește nici un atribut HTML special.
Ambele pot folosi atributul style (cu proprietăți CSS) ori

atributele id sau class ca identificator pentru stiluri CSS.
Tag-ul DIV
Tag-ul <div>...</div> este unul din cele mai folosite elemente HTML,
deoarece în combinație cu proprietăți CSS poate crea efecte grafice
deosebite, iar în interiorul lui pot fi incluse oricare elemente HTML:
tabele, formulare, marcatori, linii sau alte DIV-uri. Cadrul în care
acestea sunt adăugate poate avea propriul fundal (background),
lungime, înălțime și margini cu diferite linii.
<body>
Primul DIV Sunt 2 div-uri, unul conține un
<div style="width:250px; background:pink; border:1px solid blue;"> formular iar celalălt o listă, fiecare
<form action=" " method="post"> DIV cu proria culoare de fundal,
Nume: <input type="text"></input><br> dimensiuni stabilite și margini diferite.
E-mail:<input type="text"></input><br>
<input type="submit" value="Trimite"></input>
</form>
</div>
Al doilea DIV
<div style="width:180px; background:#88aafe; border:5px outset ">
<ul>
<li>Linie 1</li>
<li>Linie 2</li>
<li>Linie 3</li>
</ul>
</div>
</body>
Cu proprietatea CSS "margin"
se poate face alinierea DIV-ului
pe orizontală.
Pentru a centra un <div> se
aplică valoarea auto la marginile
stânga și dreapta.
<body>
<div style="background:#abcdef; margin:1px auto; padding:2px; width:200px;">Div centrat:<br />
margin:1px auto;</div>
<div style="background:#efcdab; margin-left:1px; margin-right:auto; padding:2px; width:250px;">
Div aliniat stanga:<br />
margin-left:1px; margin-right:auto;</div>
<div style="background:#abefcd; margin-left:auto; margin-right:1px; padding:2px; width:250px;">
Div aliniat dreapta:<br />
margin-left:auto; margin-right:1px;</div>
</body>
Tag-ul SPAN
Cu tag-ul <span>...</span> se pot adăuga stiluri grafice unei anumite
porțiuni dintr-un context folosind proprietăți CSS adăugate cu atributul
"style" în interiorul etichetei "<span>" (sau în stil CSS).
Ex. Se încadrează cuvintele respective într-un tag SPAN căruia le sunt
adăugate proprietățile dorite:
<body> Aceasta este o lectie din <span style="background:#88fe88; font-weight:bold;">

Cursul CSS</span> de pe Moodle.
</body>
<body>
DIV: Diferența dintre DIV și SPAN este faptul că
<div style="border:1px solid green;"> DIV încadrează o secțiune din document sub
Fraza pe mai multe linii, <br> forma unui bloc iar SPAN încadrează o
continua cu linia a doua, <br> porțiune din context sub forma de linii.
se termina cu linia a treia.
</div>
<br>
SPAN:
<span style="border:1px dotted red;">
Fraza pe mai multe linii, <br>
continua cu linia a doua, <br>
se termina cu linia a treia.
</span>
</body>
<html>
<head>
<style type="text/css">
.right{
position:absolute;
right:20px;
left:50px;
background-color:yellow; }
</style>
</head>
<body>
<div class="right"> <p>Un text Un text Un text Un text Un text Un text Un text
Un text Un text Un text Un text Un text Un text Un text Un text Un text Un text
Un text Un text Un text Un text Un text Un text Un text </p> </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head><title>Pozitie absolute a elementului</title>
<style>
div.ab {
width:250px;
position: absolute;
left: 100px;
top: 150px;}
p {color:pink; font-size:20px;}
</style></head>
<body>
<img src="images.jpg" alt="Despre pisici dragalase" />
<div class="ab">
<p>la tablă, măi pisic, Povesteşte despre spic:
Când se coace şi cum e, Cine-1 strânge şi cu ce?
Miau-miau-miau! Pisicuţul s-a jucat,
Mai nimic n-a învăţat, Tot ce ştie, măi băieţi,
E că spicu-i cu mustăți! Miau-miau-miau!</p> </div>
</body></html>
Proprietatea float și clear
Float se folosește pentru crearea de template-uri și galerii de imagini. Folosind atributul float
elementele vor pluti unul lângă altul sau unul în continuarea celuilalt atât cât spațiul rezervat lor o
permite. Acest tip de aliniere se referă la o alinire orizontală și nu verticală a elementelor.
Exemplu Vrem să facem o galerie de imagini Exemplu Vrem să afișăm o imagine aliniată la
(thumbs) și vrem ca imaginile în miniatură să fie dreapta sau la stânga și vrem ca aceasta să fie
afișate una lângă cealaltă în linii și coloane. înconjurată de text. float:left; sau float:right; va
float:left; va afișa thumb-urile una lângă afișa textul în stânga sau în dreapta imaginii
cealaltă pe o linie atât cât lâțimea paginii depinde de cum a fost aliniată anterior.
permite, sărind pe linia următoare atunci când img { float:left; } sau
următoarea imagine nu încape. .clasa_de_elemente { float:left; }
Toate elemenetele HTML care sunt situate după elementul aliniat cu float right sau left vor pluti
lângă acesta. Pentru a impiedica să se întâmple acest lucru atunci când nu vrem să se întâmple
vom folosi atibutul clear cu valoarea both:
.enter { clear:both; }
Deplasarea elementelor pe pagina
<html>
<head>
<style type="text/css"> Proprietatea float permite ca un element să fie
img.right { împins doar orizontal spre dreapta sau stânga,
float:right; } permițând celorlalte elemente să se organizeze în
img.left{ jurul lui. Elementele care urmează elementului
float:left; }
deplasat se vor aranja în jurul lui. Elementele
</style>
</head> dinaintea elementului deplasabil nu vor fi afectate.
<body>
<p>Un text arbitrar. Un text arbitrar. Un text arbitrar. Un text arbitrar.</p>
<p> <img class="right" src="img.png" width="50" height="40" />
Un text arbitrar. Un text arbitrar. Un text arbitrar. Un text arbitrar.
Un text arbitrar. Un text arbitrar. Un text arbitrar. Un text arbitrar. </p>
<p> <img class="left" src="img.png" width="50" height="40" />
Un text arbitrar. Un text arbitrar. Un text arbitrar. Un text arbitrar. </p>
</body>
</html>
<html>
<head>
Galerie de imagini
.galerie{
float:right;
width:100px;
height:100px;
margin:5px; }
</style>
</head>
<body>
<p>Galerie de imagini</p>
<img class="galerie" src="img.png">
</body>
</html>
Galerie de imagini
<!DOCTYPE html>
<html>
<head>
.galerie{
float:left;
width:200px;
height:100px;
margin:5px; }
</style>
</head>
<body>
<p>Galerie de imagini</p>
<img class="galerie" src="img1.jpg">
</body>
</html>
<html>
<head>
.right{
float:right;
width:350px;
background-color:green; }
</style>
</head> Același efect avem și cu:
<body> position:absolute;
<div class="right"> <p>Un text Un text Un text Un text Un text Un text right:20px;
Un text Un text Un text Un text Un text Un text Un text Un text Un
text Un text Un text Un text Un text Un text Un text Un text Un text
Un text Un text Un text Un text </p> </div>
</body>
</html>
Galerie de imagini
Elementele de după un element deplasabil se vor organiza în jurul
lui. Pentru a împiedica ca elementele de după un element deplasat
să se aranjeze în jurul lui se pate folosi proprietatea clear (anulează
float) care poate specifica care laturi nu sunt permise pentru
deplasare.
.galerie{
float:right;
width:100px;
height:100px;
margin:5px; }
.text{
clear: both;
margin-bottom:2px; }
</style>
Fara clear: both; Cu clear: right;
both;
Galerie de imagini
<html>
<head>
.galerie{
float:left;
width:100px;
height:100px;
margin:5px; }
.text{
clear: both;
margin-bottom:2px; }
</style>
</head> <body>
<p class=".text">Galerie de imagini Galerie de imaginiGalerie de imaginiGalerie de imaGalerie de imaginiGalerie de imaginivvGalerie de
imaginiGalerie de imaginiGalerie de imaginiGalerie de imaginiGalerie de imaginiGalerie de imaginiGalerie de imaginiGalerie de imaginiGalerie de
imaginiGalerie de imaginiGalerie de imaginiGalerie de imaginiGalerie de imagini</p>
</body> </html>
Galerie de imagini
<div>
<img src="img.png" width="100" height="100" /><br
/>
</div>
<p>
Text. Text. Text. Text. Text. Text. Text. Text. Text.
Text. Text. Text. Text. Text. Text. Text. Text. Text. <style type="text/css">
Text. Text. Text. Text. Text. Text. Text. Text. Text. div{
Text. Text. Text. Text. Text. Text. Text. Text. Text. float:right;
</p> width:120px;
</body> margin:10px 10px 10px 10px;
padding:10px;
border:2px dotted blue;
text-align:center; }
</style>
Overflow in CSS
Proprietatea overflow permite crearea unei bare

de derulare atunci când conținutul elementului <style type="text/css">
este prea mare pentru zona specificată. div.scroll{
background-color:#00FFFF;
width:200px;
Pot fi setate câteva valori: height:200px;
overflow:scroll;
visible – este vizibil întreg conținutul chiar dacă }
iese din limitele înălțimii și lățimii elementului. </style>
hidden – este vizibil doar conținutul din interiorul </head>
elementului, restul este ascuns. <body>
scroll – întotdeauna se vor adăuga bare de <div class="scroll">
defilare, indiferent de dimensiunea obiectului și Folositi proprietatea overflow pentru a
conținutul lui. controla mai bine aspectul
auto – barele de defilare se vor adăuga doar documentului.Valoarea implicita este
dacă este nevoie, conținutul elementului este visible. </div>
mai mare decât dimensiunile lui. </body>
inherit – moștenește valoarea de la părinte. </html>
Overflow in CSS
<html>
Proprietatea overflow are valoarea auto <head>
si detectează dacă continutul elementului <style type="text/css">
depășește zona rezervată și este necesară div{
bara de derulare. background-color:#FF00FF;
width:200px;
height:150px;
overflow:auto; }
</style>
</head>
<body>
<div> Proprietatea overflow poate fi folosita pentru a
controla mai bine aspectul documentului. Proprietatea
overflow poate fi folosita pentru a controla mai bine
aspectul documentului.Proprietatea overflow poate fi
folosita pentru a controla mai bine aspectul
documentului. </div>
</body>
</html>
Suprapunerea mai multor elemente în CSS
Se folosește atributul z-index pentru a specifica
ordinea suprapunerii elementelor. z-index poate Datorită faptului că z-index-ul imaginii are
avea valori pozitive și negative. valoarea -1, imaginea va fi poziționată în spatele
<html> textului.
<head> Deci, un element cu z-index mai mare va fi
pozitționat în fața unui element cu z-index mai mic.
img { position:absolute; z-index:-1;
left:0px; top:0px; z-index:-1; }
</style>
</head>
<body>
<h1>Suprapunerea mai multor elemente
in CSS</h1> Un element cu indexul mai mare va fi plasat
<img src="imagine.jpg" width="100" întotdeauna în fața elementului cu indexul mai mic.
height="100" />
<p>Vom folosi atributul z-index pentru a z-index:1;
specifica ordinea elementelor. z-index poate
avea atat valori pozitive cat si negative.</p>
</body> </html>
<!DOCTYPE html>
<html>
<head><title>Pozitie fixa a elementului</title>
<style>
div.fix {
width:250px;
position: fixed;
z-index: -1;
top: 20px;
right:170px;}
p{color:pink; font-size:20px;}
</style></head>
<body>
<div class=“fix">
<p>la tablă, măi pisic, Povesteşte despre spic: Când se coace şi cum e,
Cine-1 strânge şi cu ce? Miau-miau-miau! Pisicuţul s-a jucat,
Mai nimic n-a învăţat, Tot ce ştie, măi băieţi, E că spicu-i cu mustăți! Miau-miau-miau!</p>
</div>
</body></html>
<!DOCTYPE html>
<html>
<head><title>Pozitie fixa a elementului</title>
<style>
div.fix {
width:250px;
position: fixed;
z-index: 1;
top: 20px;
right:170px;}
p{color:pink; font-size:20px;}
</style></head>
<body>
<div class=“fix">
<p>la tablă, măi pisic, Povesteşte despre spic: Când se coace şi cum e,
Cine-1 strânge şi cu ce? Miau-miau-miau! Pisicuţul s-a jucat,
Mai nimic n-a învăţat, Tot ce ştie, măi băieţi, E că spicu-i cu mustăți! Miau-miau-miau!</p>
</div>
</body></html>
Clip în CSS
Se stabilește forma unui element cu
proprietatea clip.
<html>
Imaginea din exemplul următor este prinsă în <head>
forma dorită și afișată. <style type="text/css">
img {
position:absolute;
clip:rect(20px,80px,200px,20px);
}
</style>
</head>
<body>
<img src="img.png" width="100" height="80" />
<hr/>
</body>
</html>
Inițial cu clip
Bara de navigare în CSS
Pentru a crea o bară de navigare orizontală sau un meniu
vertical sunt folosite listele HTML care sunt personalizate folosind CSS.
HTML <ul>
<li><a href="#">Pagina 1</a></li>
</ul>
Este folosit CSS pentru a da forma listei de mai sus, list-style-
type:none - pentru a înlătura "bulinele" specifice listei. Vom înlătura
marginea și pading-ul pe care browser-ul îl atribuie ca valoare
implicită.
CSS ul {
list-style-type:none;
margin:0;
padding:0;
}
Codul CSS de mai sus poate fi folosit pentru meniuri verticale și
pentru bara orizontală.
<html> <body>
<head> <ul>
<style type="text/css"> <li><a href="#">Pagina 1</a></li>
ul { <li><a href="#">Pagina 2</a></li>
list-style-type:none; <li><a href="#">Pagina 3</a></li>
margin:0; <li><a href="#">Pagina 4</a></li>
padding:0; } </ul>
a:link,a:visited {
</body>
display:block;
</html>
font-weight:bold;
font-size:17px;
color:#fff;
background-color:#d2691e;
width:200px;
padding:8px;
text-decoration:none; }
a:hover,a:active {
background-color:#daa520; }
</style>
</head>
<style type="text/css"> Elementele ul și a se deplasează spre stânga cu
ul{ proprietatea float. Elementele li vor fi afisate unul după
float:left; altul pe aceeași linie. Elementul ul are lățimea de 100% și
width:100%; fiecare link din lista are lățimea de 160px.
padding:0;
margin:0;
list-style-type:none; }
a{
float:left;
width:160px;
text-decoration:none;
color:white;
background-color:red; <ul>
padding:10px 10px; <li><a href="http://www.google.com">Google</a></li>
border-right:3px dotted white; <li><a href="http://www.yahoo.com">Yahoo</a></li>
} <li><a href="http://www.facebook.com">Facebook</a></li>
a:hover {background-color:pink;} <li><a href="http://www.yandex.com">Yandex</a></li>
li {display:inline;} </ul>
</style>
Bara verticală de meniu
Folosim atributul float pentru a afișa elementele listei unul lângă celălalt și atributul
display:block; pentru a afișa linkul ca și un buton și vom stabili lățimea acestuia.
li { Pentru un element în bloc este obligatoriu

float:left; de stabilit lățimea acestuia în caz contrar va
} ocupa toata lățimea disponibilă.
a{
display:block;
width:60px;
}
Machetare
Machetarea - este repartizarea (localizarea) elementelor constitutive (text, titluri,

imagini, tabele) pe pagina documentului.
Machetarea tabelară inițial era cea mai importantă.

Avantajul folosirii tabelelor este execuția sa simplă și aproape același afișaj în
browsere diferite.
Dezavantaje - o structură complexă și voluminoasă, care crește volumul de cod (în
comparație cu machetarea utilizând blocurile). Pentru a schimba aspectul tabelului,
trebuie să cheltuiți mult timp și efort, pentru a vă aprofunda în structura existentă.
Machetarea în blocuri este este formată din etichete <div>.

Avantajul principal este conceptul de dispunere semantică, adică separarea de
conținut și design.
Machetare
Machetarea tabelară
<table width="100%" border="0" cellspacing="0"
cellpadding="0">
<tr colspan="2">
<td class="header" colspan="2">Header</td>
</tr>
<tr>
<td class="content">Continut</td>
<td class="sidebar">Meniu</td>
</tr>
<tr colspan="2"> Machetarea în blocuri
<td class="footer" colspan="2">Subsol</td> <div id="header">Header</div>
</tr> <div id="wrapper">
</table> <div id="content">Continut</div>
<div id="sidebar">Meniu</div>
</div>
<div id="footer">Subsol</div>
Machetare
Expresia „machetarea în blocuri” reprezintă utilizarea constructivă a etichetelor <div> și stilurilor.
Se vor respecta următoarele principii:
Separarea conținutului și designului

Codul HTML trebuie să conțină doar etichete de marcare și etichete de formatare logică, iar
orice design este scos din cod în stiluri. Această abordare permite controlul în mod independent
asupra aspectului elementelor paginii și conținutul acesteia. Datorită acestui lucru, mai multe
persoane pot lucra la site, în timp ce fiecare își îndeplinește funcția independent de celelalte.
Proiectantul, designerul și programatorul lucrează independent la sarcinile lor, reducând timpul
necesar dezvoltării site-ului.
Utilizarea tag-ului <div>

La stilizarea machetării în blocuri este acordată atenție specială etichetei <div>, care
îndeplinește mai multe funcții, dar nu înseamnă că este utilizată doar această etichetă (sunt
inserate imagini și este formatat textul). Datorită etichetei <div>, codul HTML se descompune într-o
mulțime de blocuri, în timp ce codul este mai compact decât în cazul machetării cu tabele, iar
motoarele de căutare îl indexează mai bine. Tabelele sunt utilizate numai pentru prezentarea
datelor tabelare pentru afișarea vizuală a numerelor și a altor date tabelare.
Machetare
Elemente utilizate la machetarea în blocuri

Proprietatea float poate lua valorile:
left - elementul paginii este aliniat forțat la marginea stângă;
right - elementul paginii este aliniat forțat la dreapta;
none - elementul paginii nu se mișcă, este afișat unde trebuie să fie prezent (valoarea
implicită).
Proprietatea clear controlează fluxul de după blocurile plutitoare și setează care din
marginile elementului de pe pagină nu pot coincide cu blocul plutitor anterior definit de
proprietatea float. Proprietatea clear poate lua valorile:
left - elementul paginii este setat sub orice bloc anterior mutat la stânga;
right - elementul paginii este setat sub orice bloc anterior mutat la dreapta;
both - elementul paginii este setat sub orice bloc mutat anterior;
none - nu sunt plasate restricții pe poziția blocului în raport cu blocurile care sunt mutate.
Machetare
Machetarea în blocuri prevede, de asemenea, centrarea blocului div în

orice element al codului HTML. Pentru a centra blocul în Opera și Firefox,
utilizați proprietățile margin-left și margin-top cu valoarea auto. Un astfel de
cod nu funcționează în browserul IE6, pentru acest browser trebuie să plasați
blocul DIV centrat într-un bloc DIV suplimentar, în care va exista o proprietate
de stil text-align cu valorile center sau left, center, right.
Machetare
Machetarea în blocuri DIV nu este completă fără proprietatea position, care definește
schema de poziționare a blocurilor.
Proprietatea position poate lua valorile:
static – valoare implicită, stabilește un bloc care nu este poziționat individual, ci
poziționat într-un flux regulat. Nu sunt luate în considerare proprietățile top, left, bottom
sau right ;
relative - stabilește poziționarea relativă a blocului. Acesta constă în: mai întâi, poziția
blocului este calculată ca într-un flux normal (adică poziționarea relativă nu este luată în
considerare). Apoi blocul este deplasat în raport cu poziția normală, în conformitate cu
valorile proprietăților top, left, bottom sau right. Conținutul este emis în flux ca și cum
blocul, relativ poziționat, nu ar fi fost deplasat;
absolute - stabilește poziționarea absolută a blocului. Blocurile sunt eliminate din fluxul
general și nu afectează conținutul ulterior. Poziția blocului poziționat absolut este setată
de proprietățile de top, left, bottom sau right în raport cu elementul părinte (bloc);
fixed - stabilește poziționarea fixă a blocului. Cu poziționare fixă, poziția blocului este
calculată, ca în cazul poziționării absolute, după care blocul este fix în raport cu
fereastra browserului și nu se derulează împreună cu restul conținutului paginii.
Machetare
Cu o poziționare absolută, relativă și fixă, blocurile se pot suprapune între

ele și, în acest caz, poate apărea întrebarea care este elementul care va fi
afișat și care va fi suprapus de blocul situat mai sus.
Proprietatea z-index ajută la rezolvarea acestei probleme și determină
poziția pe care îl va ocupa blocul. Valoarea sa poate fi orice număr întreg
pozitiv sau negativ. În același timp, elementele cu o valoare mare a z-index
se vor suprapune blocurilor cu o valoare mai mică a acestei proprietăți.
Exemplu de machet
<html> </head>
<head> <body>
<title>Șablon de machet cu 3 coloane</title> <div id="header">Antet</div>
<style type="text/css"> <div id="content">
* { margin:0px; padding:0px; } <div id="container1">
html { height:100%; } <div id="container2">
body { min-height:100%; position:relative; min-width:800px; } <div id="container3">
* html body { height:100%; } <div id="center">Coloana din mijloc</div>
#header { background:#9393FF; height:70px; width:100%; } </div>
#content { width:100%; padding-bottom:60px; <div id="left">Coloana din stânga</div>
width:expression(document.body.clientWidth > 800 ? "100%" : </div>
"800px"); overflow:hidden; } </div>
#container1 { width:100%; float:left; margin-right:-180px; } <div id="right">Coloana din dapta</div>
#container2 { background:#000000; margin-right:180px; } </div>
#container3 { width:100%; float:right; margin-left:-200px; } <div id="footer">Copyright</div>
#left { background:#AEAE00; width:200px; float:left; } </body>
#center { background:#D86927; margin-left:200px; } </html>
#right { background:#C0C0C0; float:right; width:180px; }
#min_width { width:800px; }
#footer { position:absolute; bottom:0px; background:#8F9EB1;
width:100%; height:60px; }
</style>
Machetare HTML5
Problema este că elementele Div nu oferă

nici o importanţă semantică şi este destul de
dificil să fie determinat scopul acestor
elemente. HTML5 a introdus noi elemente
structurale, printre care elementele <header>,
<nav>, <article>, <section>, <aside> și <footer>.
Toate aceste elemente au intenţia de a oferi

înţeles organizării paginilor şi de a îmbunătăţi
semantica structurală. Toate sunt elemente de
tip bloc şi nu au o poziţie sau un aspect impus.
Aceste elemente pot fi folosite de mai multe ori
pe pagină atâta timp cât respectă
semnificaţia corespunzătoare.
Machetare HTML5
Antetul (Header)
Elementul <header>...</header> este un element structural care evidenţiază antetul
unui segment al unei pagini. Se află în cadrul elementului <body>.
Elemente de navigare
Elementul <nav>...</nav> identifică o secţiune a unei pagini, cuprinzând legăturile
principale de navigare. Elementul <nav> trebuie păstrat doar pentru secţiunile principale
de navigare, precum navigarea globală, cuprinsul, legături înainte/înapoi sau alte
legături importante.
Legăturile incluse în elementul <nav> vor trimite către alte pagini din acelaşi site web
sau spre porţiuni din aceeaşi pagină web. Legăturile utilizate mai rar nu ar trebui să se
afle în cadrul elementului <nav>, dar ar trebui să fie folosit elementul doar ancoră <a>.
Machetare HTML5
Elementul articol
Elementul <article>...</article> este folosit pentru a identifica o secţiune de
conţinut independent, complet şi care poate fi distribuit independent sau refolosit.
Elementul <article> se folosește adesea pentru a evidenţia postările pe bloguri,
articole de ziar, conţinut furnizat de utilizatori şi aşa mai departe.
Atunci când ne decidem să folosim elementul <article> trebuie să ne asigurăm
că acel conţinut poate fi copiat în altă parte a paginii fără a genera confuzii.
Dacă conţinutul din elementul <article> ar fi scos din contextul paginii şi ar fi plasat
de exemplu într-un email sau în ceva tipărit, ar trebui în continuare să aibă sens.
Machetare HTML5
Elementul Section
Elementul <section>...</section> este folosit pentru a identifica o grupare tematică de
conţinut care în general, dar nu întotdeauna include un antet. Gruparea conţinutului în
elementul <section> este de natură generică dar este foarte utilă pentru a identifica
legăturile conţinutului. Elementul <section> este folosit îndeosebi pentru a structura şi a
oferi o ierarhie pentru pagină.
Alegerea dintre elementele <article>, <section> sau <div>
Atât elementul <article> cât şi elementul <section> contribuie la structurarea unui
document şi ajută la schematizarea unui document. Dacă conţinutul este grupat numai
din motive de design şi nu oferă nici un beneficiu pentru structurarea documentului, atunci
folosiţi elementul <div>. Dacă conţinutul oferă structură documentului şi poate fi redistribuit
independent, atunci folosiţi elementul <article>. Dacă conţinutul oferă structură
documentului şi reprezintă un grup tematic de conţinut, atunci folosiţi elementul <section>.
Machetare HTML5
Elementul Aside
Elementul <aside>...</aside> încorporează așa conţinut precum barele laterale,
înserări sau scurte explicaţii care sunt legate doar tangenţial de conţinutul din jurul lor.
De exemplu, atunci când se folosesc cu un element <article>, elementul <aside>
poate identifica conţinutul legat de autorul articolului. Toate elementele structurale,
printre care şi elementul <aside> sunt elemente de nivel bloc încât vor apărea pe o
linie nouă, ocupând întreaga lăţime disponibilă a paginii sau a elementului în care se
află imbricat denumit şi element părinte.
Elementul Footer
Elementul <footer>...</footer> identifică finalul unei pagini, al unui articol, al unei
secţiuni sau al altui segment de pagină. În general elementul <footer> se află în partea
de jos a elementului părinte. Conţinutul din elementul <footer> e bine să fie format din
informaţii corelate, în legătură cu documentul sau secţiunea în care se află.
Machetarea paginilor web responsive
Folosind CSS, puteți crea un web-site adaptiv (responsive) dispozitivelor cu orice lățime a
ecranului. Folosind reguli speciale, puteți determina aspectul unei pagini web în funcție de
lățimea ferestrei browserului.
Machetarea web responsive (eng. responsive web design, RWD) este o abordare a creării de
pagini web în care aspectul este determinat prin CSS, pe baza lățimii ferestrei browserului. Acest
lucru permite oferirea unui design comod pentru orice dispozitiv, fără a fi necesară crearea mai
multor site-uri diferite.
Instrumente CSS pentru proiectare responsive
Machetarea web responsive (adaptivă) utilizează sisteme de griduri fluide, imagini flexibile
(scalabile) și interogări media pentru CSS.
• Interogări media - tehnologia CSS care permite determinarea condițiilor pentru aplicarea
anumitor stiluri pentru ecrane de anumite dimensiuni (un set de reguli CSS pentru ecrane cu o
lățime mai mică de 768 pixeli, al doilea pentru cele cu o lățime mai mare de 991 pixeli etc.).
Puteți determina tipul de dispozitiv (ecranul monitorului, imprimanta, sintetizatorul de vorbire),
raportul dintre componentele monitorului, orientarea (album sau carte), rezoluția monitorului ș.
a. Toate acestea fac posibilă crearea de stiluri specifice, având în vedere numeroasele
proprietăți.
• Griduri fluide - marcaj care se poate extinde și contracta (împreună cu conținutul), adaptându-
se la ecranul unui dispozitiv specific.
Interogări media Atunci când un site fără un design responsive este vizualizat pe un
dispozitiv mobil, browserul îl plasează complet în lățimea ecranului și reduce
dimensiunea paginii. Pentru a utiliza un astfel de site, utilizatorul va trebui să facă zoom
manual, precum și să deruleze pe orizontală.
Dacă designul site-ului este responsive, trebuie să informați suplimentar browserul

despre aceasta adăugând linia:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
- meta tag-ul spune browserului că lățimea width trebuie să fie egală cu lățimea
ecranului browserului, care la rândul său este egală cu lățimea ecranului dispozitivului
de pe care este vizualizată pagina web. Initial-scale controlează nivelul de zoom la
încărcarea unei pagini.
În lipsa meta name="viewport", Google nu va percepe pagina web ca responsive

pentru dispozitivele mobile.
Cele mai frecvente scenarii atunci când trebuie să apelați la interogări media.
Determinarea numărului de coloane. Folosind interogări media, puteți redefini numărul
de coloane din design, ținând cont de lățimea ecranului dispozitivului, prin gruparea
întregului conținut pentru smartphone-uri într-o singură coloană.
Lățimea relativă. Folosind o interogare media, se poate realiza ca pentru smartphone-uri
să fie creat un desing ”elastic”, a cărui lățime nu va fi fixă, ci relativă. Astfel, un container
cu o lățime de 100% se va adapta cu ușurință oricărui smartphone în orice orientare.
Reducerea indentării. Interogările media permit specificarea dimensiunilor alternative de
padding pentru afișaje înguste.
Reglarea dimensiunii fontului. Pentru ecrane înguste, este recomandabil să setați o
valoare mai mică pentru font-size.
Navigarea adaptivă. Există mai multe abordări pentru implementarea unei navigări
convenabile pentru versiunea mobilă a site-ului, cu participarea interogărilor media.
Ascunderea obiectelor. Folosind proprietatea display: none și interogările media, pot fi
ascunse anumite elemente de vizitator dacă site-ul este accesat de pe un smartphone.
Breakpoints
Folosind interogări media, pot fi create breakpoints (puncte de control) la care le sunt
atașate stiluri CSS. Pot fi definite următoarele reguli pentru browser: "Dacă lățimea
ecranului este mai mare de 767 pixeli, sunt aplicate niște stiluri pe pagina web, iar dacă
lățimea ecranului este mai mare de 991 pixeli, se aplică alte stiluri." Aceste numere care
indică lățimea ecranului, sunt puncte de control.
În puncte de control, trebuie specificată lățimea la care desinul paginii web începe să
se rupă. Fie că aveți un site cu un container cu o lățime de 1180 pixeli. Atunci, într-o
fereastră cu lățimea de 1200 de pixeli (luăm în considerare bara de defilare) sau mai puțin,
cel mai probabil nu va arăta foarte bine, deci acesta este primul punct de control unde
trebuie făcute modificări ale designului în caz că site-ul este vizualizat într-o fereastră cu o
lățime mai mică de 1200 pixeli.
La crearea rețelelor flexibile, se utilizează adesea un anumit set de interogări media,

care sunt prevăzute pentru trei puncte de control diferite: smartphone, tabletă, monitor PC
dar pot exista mai multe puncte de control.
Breakpoints
Când scriem stiluri pentru puncte de control, nu este creat întregul design de la zero, dar
cel existent este ajustat doar. Întrebarea este ce versiune trebuie să faceți inițial: pentru
computere desktop, ajustate pentru dispozitive mobile sau invers – să creați mai întâi o
versiune pentru ecrane mici, apoi o extindeți.
Desktop First. În primul rând, este creat designul complet pentru ecrane mari, fără a
utiliza interogări media. După aceea, folosind puncte de control în interogările media,
ajustați designul pentru ecrane medii și mici (reduceți fontul, rearanjați elementele,
ascundeți elementele minore etc.). Avantajul acestui aspect este că browserele vechi (IE
8), care nu știu ce sunt interogările media, vor putea afișa site-ul dvs., deoarece acesta
este designul original pe care l-ați scris fără a utiliza @media.
Mobile First. În primul rând, alcătuiți designul pentru cele mai mici ecrane fără a utiliza
interogări media. După aceea, creând puncte de control, ajustați designul pentru ecrane
din ce în ce mai largi.
Ambele abordări implică mai întâi crearea unui anumit set de stiluri de bază relevante
pentru orice versiune a site-ului (culoarea linkului, dimensiunea fontului principal etc.), apoi
scrierea acelor stiluri care vor fi diferite pentru ecrane diferite.
Breakpoints
Sintaxa CSS:
@media not|only mediatype and (mediafeature and|or|not mediafeature)
{CSS-Code;}
not inversează semnificația unei interogări media.
only: împiedică browserele mai vechi care nu acceptă interogările media cu
caracteristici media să aplice stilurile specificate. Nu are niciun efect asupra browserelor
moderne.
and: combină o caracteristică media cu un tip media sau alte caracteristici media.
Toate sunt opționale. Cu toate acestea, dacă utilizați not sau only, trebuie să specificați și
un tip de suport.
Pot fi aplicate foi de stil diferite pentru diferite medii, cum ar fi:
<link rel="stylesheet" media="screen and (min-width: 1200px)" href=“largescreen.css">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">
Breakpoints
Tipuri media:
all Implicit, folosit pentru toate dispozitivele de tip media.
print - pentru imprimante.
screen - pentru monitoare, tablete, telefoane, etc.
speech - pentru cititoarele de ecran care „citesc” pagina cu voce tare.
Valori media:
height - înălțimea ferestrei
max-height - înălțimea maximă a zonei de afișare, cum ar fi o fereastră de browser
min-height - înălțimea minimă a zonei de afișare, cum ar fi o fereastră de browser
width - lățimea ferestrei
max-width - lățimea maximă a zonei de afișare, cum ar fi o fereastră de browser
min-width - lățimea minimă a zonei de afișare, cum ar fi o fereastră de browser
orientation - orientarea ferestrei (modul landscape sau portrait)
Breakpoints
Plasați stilurile CSS în parantezele
interogării media:
Este recomandabil să plasați toate
interogările media sub stilurile obișnuite, și nu
@media (min-width: 576px) {
deasupra acestora.
.m576 {
Dacă utilizați puncte de control, pornind de
width: 100%;
la lățimea minimă a ecranului min-width,
}
așezați-le în ordinea crescătoare a lățimii
h1 {
ecranului.
font-size: 24px;
Dacă utilizați max-width, atunci aranjați
}
interogările media în ordinea descrescătoare a
p{
lățimii.
color:blue;
În caz contrar, unele interogări media le vor
}
suprascrie pe cele anterioare.
...
}
Breakpoints
<!DOCTYPE html>
<html> <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div { background-color: beige; padding: 20px;}
.break { padding: 20px; color: white; border: 1px;}
/* Mobile cu < 600px */
@media only screen and (max-width: 600px) { .break {background: red; font-size: 15px;}
div { display: none;}}
/* Portrait pentru tablete si mobile cu > 600px */
@media only screen and (min-width: 600px) { .break {background: green; font-size: 18px;}}
/* Tablete landscape cu > 768px */
@media only screen and (min-width: 768px) { .break {background: blue; font-size: 21px;}}
/* Laptopuri si monitoare cu > 992px */
@media only screen and (min-width: 992px) { .break {background: orange; font-size: 23px;}}
/* laptopuri si monitoare cu > 1200px */
@media only screen and (min-width: 1200px) { .break {background: pink;}}
</style>
</head>
<body>
<div>Continutul unui DIV.</div>
<h1 class="break">Daca este redimensionata fereastra browserului se vede efectul care presupune
schimbarea culorii de fundal si a marimii textului in dependenta de dimensiune. </h1>
</body> </html>
Breakpoints
Breakpoints
<!DOCTYPE html>
<html> <head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* { box-sizing: border-box;}
/* Sunt create doua doua elemente aranjate una langa alta */
.elem { float: left; width: 50%; padding: 25px; }
body {background-color: aqua;}
/* Se anuleaza float : left; */
.row::after { clear: both; }
/* Pentru ecrane de dimensiunea < 600px elementele se pozitioneaza unul sub altul, fiecare ocupa
100% din pagina si se modifica culoarea de fundal */
@media screen and (max-width: 600px) { .elem { width: 100%; } body {background-color: yellow;} }
</style> </head>
<body>
<div class="row">
<div class="elem" style="background-color: red;">
<h1>Elementul 1</h1> <p>Continutul elementului1</p>
</div>
<div class="elem" style="background-color:blue;">
<h1>Elementul 2</h1> <p>Continutul elementului 2</p>
</div>
</div>
</body> </html>
Breakpoints

Web Perechea 4

Încărcat de

Informații document

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

Web Perechea 4

Încărcat de

Drepturi de autor:

Formate disponibile

Div și Span

Ambele pot folosi atributul style (cu proprietăți CSS) ori

<body> Aceasta este o lectie din <span style="background:#88fe88; font-weight:bold;">

Proprietatea overflow permite crearea unei bare

li { Pentru un element în bloc este obligatoriu

Machetarea - este repartizarea (localizarea) elementelor constitutive (text, titluri,

Machetarea tabelară inițial era cea mai importantă.

Machetarea în blocuri este este formată din etichete <div>.

Separarea conținutului și designului

Utilizarea tag-ului <div>

Elemente utilizate la machetarea în blocuri

Machetarea în blocuri prevede, de asemenea, centrarea blocului div în

Cu o poziționare absolută, relativă și fixă, blocurile se pot suprapune între

Problema este că elementele Div nu oferă

Toate aceste elemente au intenţia de a oferi

Dacă designul site-ului este responsive, trebuie să informați suplimentar browserul

În lipsa meta name="viewport", Google nu va percepe pagina web ca responsive

La crearea rețelelor flexibile, se utilizează adesea un anumit set de interogări media,

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