Digital Kids

Această pagină poate fi doar citită. Poți vedea sursa, dar nu poți modifica pagina. Consultă administratorul dacă ești de părere că ceva este în neregulă.
====== Lecția 4: Page flow ======

=== Tutorial ===
==== 1. Div și Span ====

**Div** și **Span** sunt folosite pentru divizarea paginii **HTML**. //Span// reprezintă o porțiune inline, pe când //Div// poate cuprinde o porțiune mai mare din pagina, conținând diferite elemente.

**Span** (exemplu):
<code html>
<span style="color: red; font-size: 14pt">Text colorat roșu</span>
</code>

**Div** (exemplu):
<code html>
<div id="myDiv" name="myDiv" title="Exemplu de Div">
  <h5>Subtitlu : Pasiunile mele</h5>
  <p>Somnul până dimineața târziu.</p>
  <p>Desenele animate, în special Batman.</p>
</div>
</code>

Pentru o organizare și mai bună există posibilitatea de a avea mai multe div-uri într-un div. Până la urmă și div este un element.

De asemenea, putem combina cele doua elemente, spre exemplu:
<code html>
<div class="menu">
  <span>Main page</span>
  <span>Contents</span>
  <span>Help</span>
</div>
</code>

Codul de mai sus ne va fi util când vom avea mai multe pagini HTML pe care le vom lega între ele. 

==== 2. Float ====

Până acum ne-am jucat cu CSS-ul, dar hai să vedem cum organizam textul și imaginile. Pentru aceasta avem nevoie de o noua proprietate CSS numită Float.

Folosind proprietatea **Float**, decizi în ce parte a paginii vrei să poziționezi orice element **HTML**, de exemplu o imagine, o listă, un paragraf, etc.

Valorile pe care le poate lua **Float** sunt :
* right
* left
* none
* inherit

Primele două cred că presupuneți ce fac. Dar hai să spunem două-trei vorbe despre fiecare:
*//right// face ca elementul să plutească în dreapta
*//left// realizează plutirea elementului în stânga. 
*//none// este modul default (care lasă elementul nemodificat).
*//inherit//, după cum îi spune și numele, va moșteni modul de la parintele său.

Destul cu teoria, să vedem cum se descurcă în [[http://codepen.io|Codepen]].

<html>
<p data-height="268" data-theme-id="0" data-slug-hash="ByjQab" data-default-tab="result" data-user="andreeas" class='codepen'>See the Pen <a href='http://codepen.io/andreeas/pen/ByjQab/'>ByjQab</a> by andreea (<a href='http://codepen.io/andreeas'>@andreeas</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
</html>


Prima imagine plutește la dreapta, a doua imagine plutește la stanga, iar pragraful are valoarea //none// pt **float**.

Iată cum arată o structură generală
<html>
<p data-height="268" data-theme-id="0" data-slug-hash="yInmw" data-default-tab="result" data-user="giac" class='codepen'>See the Pen <a href='http://codepen.io/giac/pen/yInmw/'>yInmw</a> by Gia (<a href='http://codepen.io/giac'>@giac</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
<script async src="//codepen.io/assets/embed/ei.js"></script>
</html>



==== Task-uri ====

Pornind de la structura din [[http://codepen.io/anon/pen/HKhya|Codepen]] trebuie să ajungeți la următorul rezultat
{{:module:11-basic-web-dev:batman-2.png?800|}}
  
Pentru a realiza acest lucru urmăriți pașii de mai jos:
*Modificați lățimea paginii (acum este de 700px care trebuie modificată în 900px).
*Mutați conținutul din dreapta în stânga după care adăugați alte 2 content-uri ca în imagine.
*Modificati fundalul content-urilor. Ce se întâmplă dacă alegeți culoarea neagră pentru fundal?
*Adăugați un text mai mare în contentul din centru după care adăugați și o imagine ca în imaginea de mai sus.
*Modificați textul din celelalte content-uri astfel încât să arate ca în imaginea de mai sus.
Digital Kids

Unelte utilizator

Unelte site

Unelte pagină
