[tutorial]Menu simplu HTML

In acest tutorial va voi arata cum sa creeati o bara de navigare simpla cu ajutorul HTML-ului, dar si CSS-ului.

Mai intai, creeati un nou directoriu, nu conteaza numele, dar sa stiti de el, dupa.
In acest directoriu creeati un nou document numit index.html (ATENTIE! Fisierul sa aiba extensia .html, altfel, va fi citit de browser ca un simplu text, si nu vor functiona codurile).
Tot in acest directoriu creeati un nou document cu numele style.css (ATENTIE! Fisierul sa aiba extensia .css). In style.css vom scrie codurile CSS, iar in index.html, vom scrie mark-up-ul, adica codul HTML.

Initializare HTML:

HTML-ul sau Hyper Text Mark-up Language, este principalul limbaj de scriere al paginilor web. Orice pagina web are un cod sursa HTML.
Sintaxa HTML-ului arata cam asa:

Cod:

<tag atribut="valuare" atribut="valuare"> ... </tag>

Initializare CSS:

CSS-ul sau Cascading Style Sheets este un standard pentru formatarea elementelor unui document HTML. Stilurile se pot atașa elementelor HTML prin intermediul unor fișiere externe sau în cadrul documentului, prin elementul <style> și/sau atributul style.

Cod:

.tag{atribut:valuare; atribut:valuare;}

(am folosit "tag" ca sa fac o paralela intre HTML si CSS. In CSS, tagul se numeste clasa sau id
Pentru a lega un cod CSS de unul HTML, avem nevoie de niste atribute in HTML. Aceste atribute sunt class si id.

Exemplu:

Cod:

<div class="clasa_divului"> ... </div>

Cod:

.clasa_divului {
width: 200px;
padding:0;
...
}

In exemplul de mai sus, am folosit atributul class

Exemplu2:

Cod:

<div id="idul_divului"> ... </div>

Cod:

#idul_divului {
width: 200px;
padding:0;
...
}

In exemplul de mai sus am folisti atributul id. Diferenta dintre class si id este faptul ca in CSS id are in fata #(diez) iar class are in fata .(punct).
Puteti folosi care va e mai usor. Efectele sunt aceleasi.

Pentru realizarea unei bare ne vavigare avem mai multe optiuni: fie folosim div-uri, fie folosim un tabel, fie folosim listele.
Cele mai utilizate sunt listele, asa ca si eu voi folosi tot liste.

Hai sa incepem cu mark-up-ul(HTML-ul), pe care apoi il vom personaliza cu ajutorul CSS-ului.
Deschidem fisierul index.html si scriem codurile de baza:

Cod:

<html>
<head>

</head>
<body>

</body>
</html>

Bun. Acum trebuie sa facem legatura dintre fisierul .html si cel .css. Cum facem asta? Simplu: in sectiunea head(dupa tagul <head>)
adaugam urmatorul cod:

Cod:

<link rel="stylesheet" type="text/css" href="style.css">

unde style.css este sursa fisierului.

Atat cu sectiunea head. De acum vom lucra doar in body.
Bun. Acum sa trecem la lista propriu-zisa. Facem un nou div in care vom insera lista.

Cod:

<div>
      <ul>
         <li><a href="#">Home</a></li>
         <li><a href="#">Forum</a></li>
         <li><a href="#">About</a></li>
         <li><a href="#">Contact</a></li>
         <li><a href="#">Products</a></li>
         <li><a href="#">Help</a></li>
      </ul>
   </div>

Asa este, nu putem personaliza codul pentru ca nu am folosit class sau id.
Tagului <div> dam clasa navContain iar tagului <ul> dam clasa nav.

Cod:

<div class="navContain">
      <ul class="nav">
         <li><a href="#">Home</a></li>
         <li><a href="#">Forum</a></li>
         <li><a href="#">About</a></li>
         <li><a href="#">Contact</a></li>
         <li><a href="#">Products</a></li>
         <li><a href="#">Help</a></li>
      </ul>
   </div>

Am terminat mark-up-ul.
Pana acum avem asta:

Cod:

<html>
<head>
   <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
   <div class="navContain">
      <ul class="nav">
         <li><a href="#">Home</a></li>
         <li><a href="#">Forum</a></li>
         <li><a href="#">About</a></li>
         <li><a href="#">Contact</a></li>
         <li><a href="#">Products</a></li>
         <li><a href="#">Help</a></li>
      </ul>
   </div>
</body>
</html>

Pana acum va arata asa: click. NU arata bine, nu? Pentru asta avem CSS.

Acum deschidem fisierul style.css(care trebuie sa se afle in acelasi directoriu index.html).

Fiecare browser are valorile sale prestabilite(culoarea de fundal alba, linkurile albastre, etc.) Va trebui sa scoatem aceste valori si sa dam noi niste valori, ca sa ne fie mai usor.

Mai intai vom personaliza sectiunea body.

Cod:

body {
   padding: 0;
   margin: 0;
   background-color: lightgrey;
}

Cu ajutorul codului de mai sus am inlaturat distanta dintre continutul paginii si marginile paginii, dar am setat si culoarea gri deschis ca si fundal.
Acum personalizam divul care contine lista.

Cod:

.navContain {
   width: 100%; /*latimea divului sa fie cat latimea intregii pagini*/
   padding: 10px; /*distanta dintre continutul divului si marginile acestuia sa fie de 10 pixeli*/
   margin:0; /*distanta dintre marginile divului si alte elemente sa fie 0*/
   background: grey; /*culoarea de fundal sa fie gri*/
   border-bottom: 1px solid white; /*bordura de jos sa fie alba, cu marimea de 1 pixel*/
}

Simplu, nu?

Acum personalizam lista propriu-zisa.

Cod:

.nav {
   list-style-type: none; /*cu acest cod am scos marcatorul(bulina) din fata elementelor listei*/
}

Atat la lista, acum trecem la elementele listei(tagul <li>).
Aici se complica putin treaba, pentru ca tagului <li> nu i-am dat nicio clasa. Ce facem?
Ii spunem browserului ca sa personalizeze tagul <li> care se afla in tagul <ul> Cum?

Uite asa:

Cod:

.nav > li

Acum sa il personalizam

Cod:

.nav > li {
   border: 1px solid grey; /*bordura sa fie gri*/
   display: inline; 
   padding: 10px 30px; 
   background: grey; /*culoarea de fundal gri*/
}

display: inline; - acest cod face ca elementele listei sa fie afisate in linie(pe acelasi rand), nu unul sub altul(FOARTE IMPORTANT!)
padding: 10px 30px; - aici am setat distanta dintre continut si marginile de sus si jos de 10 pixeli, iar distanta dintre continut si marginile din stanga si dreapta de 30px

Acum sa personalizam linkurile(ancorele, tagurile <a>)
Deoarece nu am dat niste clase ancorelor, vom spune doar "a", iar browserul va personaliza toate ancorele existente in pagina.

Cod:

a {
   color: white; /*culoarea alba*/
   text-decoration: none; /*sa dispara sublinierea*/
   font-family: Tahoma; /*fontul sa fie Tahoma*/
   letter-spacing: 3px; /*distanta dintre litere sa fie de 3 pixeli*/
}

Acum vom adauga un efect de hover listei noastre.(adica sa se schimbe niste valori atunci cand ducem mouse-ul peste un element al listei).

Cum facem asta? Adaugam ":hover" dupa clasa sau id.

Sa ii spunem browserului ca atunci cand ducem mouseul peste <li> care se afla in <ul> sa isi schimbe anumite valori:

Cod:

.nav > li:hover {
   border: 1px solid #5e5e5e; /*bordura sa fie putin mai intunecata*/
   background: white; /*culoarea de fundal sa fie alb*/
}

Acum sa ii spunem browserului ca ancora<a> care se afla in <li> care se afla la randul lui in <ul> sa isi schimbe anumite valori atunci cand ducem mouseul peste <li>. Pare complicat dar veti vedea ca nu este deloc.

Cod:

.nav > li:hover a {
   color: black; /*culoarea sa fie negru*/
}

Pana acum avem:

Cod:

body {
   padding: 0;
   margin: 0;
   background-color: lightgrey;
}

.navContain {
   width: 100%; 
   padding: 10px;
   margin:0;
   background: grey;
   border-bottom: 1px solid white;
}

.nav {
   list-style-type: none; 
}

.nav > li {
   border: 1px solid grey; 
   display: inline; 
   padding: 10px 30px; 
   background: grey; 
}

a {
   color: white; 
   text-decoration: none; 
   font-family: Tahoma; 
   letter-spacing: 3px; 
}

.nav > li:hover {
   border: 1px solid #5e5e5e; 
   background: white; 
}

.nav > li:hover a {
   color: black; 
}

Am terminat!
Acum, cand rulezi index.html ar trebui sa iti apara asa. Desigur, daca ai facut tot ce am zis pana acum :D

Felicitari, acum sti cum sa iti faci propria bara de navigare :friends:

Tutorial realizat de REDLINE
Reproducerea sau distribuirea acestui tutorial este interzisa fara acordul meu.

Sper ca v-a fost de folos :D

[tutorial]Menu simplu HTML

[tutorial]Menu simplu HTMLMar Aug 13, 2013 1:15 pm

Re: [tutorial]Menu simplu HTMLJoi Aug 15, 2013 9:52 pm

[tutorial]Menu simplu HTML

description[tutorial]Menu simplu HTMLMar Aug 13, 2013 1:15 pm

descriptionRe: [tutorial]Menu simplu HTMLJoi Aug 15, 2013 9:52 pm

[tutorial]Menu simplu HTMLMar Aug 13, 2013 1:15 pm

Re: [tutorial]Menu simplu HTMLJoi Aug 15, 2013 9:52 pm