Lectia 7 HTML | Sectionare site DIV pagina 2

In cadrul lectiei 7 HTML ai sectionat header-ul paginii, ai adaugat un logo si ai creat un meniu.

Acum a venit timpul sa trecem la urmatorul nivel al paginii care trebuie sectionat.
Uita-te din nou pe schita pentru afla care este urmatorul nivel:
Schita structura unui site

Deobicei, acest nivel contine o imagine de prezentare a servicilor oferite de firma sau un carusel cu mai multe imagini derulante. Acest nivel ajuta si la oferirea unui aspect mai frumos site-ului.
De exemplu daca site-ul este facut pentru o firma de transport, veti face poza la vehiculele firmei si veti scrie cateva detalii despre preturi sau despre calitatea servicilor oferite. Puteti chiar sa faceti poza la cladirea firmei.

Eu voi adauga o imagine, dar te voi invata sa adaugi si un carusel in tutorialele urmatoare.
Pregateste o imagine frumoasa :D.

Cu ce trebuie sa incepem?
Evident, cu crearea div-ului (sper ca ti-ai dat seama!!!).
Te duci in <body> si dupa ultimul div creat anterior, vei scrie urmatorul cod:

Ai creat in nou div avand id-ul "div5". A aparut o noua linie de cod "<img src="/Imagini/site%20html.jpg" width="100%">", pe care trebuie sa ti-o explic.

Iti voi explica cum se insereaza o imagine in HTML.
Prin declararea codului <img src="/">, ii vei "spune" browser-ul ca acea pagina pe care ai creat-o contine o imagine. Intre ghilimelele <src="">, vei pune calea spre imagine (unde se afla imaginea).
Prin atributul <width="">, vei specifica cu ce dimensiuni vrei sa fie afisata imaginea in browser. Daca nu vei specifica acest atribut, imaginea se va afisa cu dimensiunile standard ce le contine.

Acum trebuie sa cream un design pentru div.
Dute in <style> si scrie urmatorul cod:

#div5{
width: 90%;
margin: auto;
margin-top: 2%;
}

Explicatia codului de mai sus este urmatoarea:
Prin "width: 90%", div-ul va avea o lungime de 90% din pagina si inaltimea va depinde de continutul div-ului, in cazul nostru, de inaltimea imaginii.

Prin "margin: auto", div-ul va fi asezat la mijlocul paginii.

Prin "margin-top: 2%", div-ul va fi asezat la o distanta de 2% fata de div-ul de sus.

Ai terminat de creat si acest nvel. Urmatorul nivel de pe schita va contine doua div-uri.

Aceste doua div-uri vor contine descrierea firmei si programul de lucru.
Scrie codul urmator sub ultimul div creat:

<div id="div6">
<p align="center">
<font class="fontlogo" size="6" color="0978A1" face="calibri">Titlu<br><b><font size="4" face="calibri">Descriere site</font></b></font></p>
<p align="center">
 </p>
<p align="center">
 </p>
</div>

<div id="div7" style="height: 220px">
<p style="padding-top: 2%;" align="center"><b>
<font size="6" color="white" face="calibri">Program</font></b></p>
<p style="padding-left: 5%;"><font size="3" color="white">Luni: 08:00-20:00<br>Marti: 08:00-20:00<br>Miercuri: 09:00-21:00<br>Joi: 09:00-21:00<br>Vineri: 08:00-20:00<br>Sambata: 08:00-23:00<br>Duminica: 08:00-22:00 </font>
</div></p>

Acum ca am scris cateceva despre firma si am scris si programul de lucru, trebuie sa mai scriem si ce servicii ofera.
Vom crea in continuare patru div-uri in care vom specifica servicile oferite de firma.
Scrie codul urmator in continuarea div-ului creat anterior:

<a class="fontlogo" href="/link.html"><div align="center" id="user1">
<p>
<img width="30%" src="/Imagine1.html"><font style="padding-left: 3%;" size="6" face="calibri">Titlu1</font>
<br></p>
<p align="left" style="padding-left: 7%; width: 80%;">Descriere1
</div></a>

<a class="fontlogo" href="/Sectiuni/Sectiunea%20Petreceri/Petreceri.html"><div align="center" id="user2">
<p class="auto-style1">
<img width="10%" src="/Imagini/cinci.png"><font style="padding-left: 3%;" size="6" face="calibri">Titlu2</font>
<br></p>
<p align="left" style="padding-left: 7%; width: 80%;">Descriere2
</div></a>

<a class="fontlogo" href="/Sectiuni/Teatru/pap.html"><div align="center" id="user4">
<p class="auto-style1"><img width="15%" src="/Imagini/cortina.png"><font style="padding-left: 3%;" size="6" face="calibri">Titlu3</font>
<br></p>
<p align="left" style="padding-left: 7%; width: 80%;">Descriere3
</div></a>

<a class="fontlogo" href="/Sectiuni/Sectiunea%20Preturi%20servicii/Preturi%20servicii.html"><div align="center" id="user3">
<p class="auto-style1">
<img width="15%" src="/Imagini/sase.png"><font style="padding-left: 3%;" size="6" face="calibri">Titlu4</font>
<br></p>
<p align="left" style="padding-left: 7%; width: 80%;">Descriere4
</div></a>

Modifica titlurile cu serviciile oferite si descrierea corespunzatoare acestora. Acum trebuie sa le atribuim un design div-urilor create.
Scrie in <style> urmatorul cod:

#user1{
width: 22.5%;
height: 35%;
background-color: E4E5E4;
margin: auto;
float: left;
margin-left: 5%;
padding-top: 2%;
margin-top: 2%;
}

#user2{
width: 22.5%;
height: 35%;
background-color: E4E5E4;
margin: auto;
float: left;
padding-top: 2%;
margin-top: 2%;
}

#user3{
width: 22.5%;
height: 35%;
background-color: E4E5E4;
margin: auto;
float: left;
padding-top: 2%;
margin-top: 2%;
}

#user4{
width: 22.5%;
height: 35%;
background-color: E4E5E4;
margin: auto;
float: left;
padding-top: 2%;
margin-top: 2%;
}

Mai ai un singur div de creat. Ultimul div creat este footer-ul. Acesta va contine copyright-ul.

Acest div va avea urmatorul design:
#footer{
width: 100%;
height: 100px;
background-color: #0099ff;
float: left;
margin-top: 2%;
}

Am terminat de creat site-ul propus de mine.
Lectiile ce vor urma, te vor ajuta sa intelegi si mai bine codurile html pe care le-ai folosit pentru crearea site-ului.

Acest site foloseste cookie-uri.