HomeLog in
Who is online?
In total there are 3 users online :: 0 Registered, 0 Hidden and 3 Guests None
Most users ever online was 18 on Wed Mar 01, 2023 5:42 pm
Statistics
We have 1651 registered usersThe newest registered user is lesn1k
Our users have posted a total of 558 messages in 467 subjects
Cum sa faci o pagina in html partea 2
Page 1 of 1
Cum sa faci o pagina in html partea 2
by MeG@DaN Wed Nov 02, 2011 12:54 pm
Cum sa faci o pagina in html partea 2
Sa zicem ca vrei sa ai pagina index.html , o pagina contact.html si o pagina produse.html
creeaza un folder undeva si in acel folder creeaza 3 fisier text si
modifica-i numele la fiecare document cu numele spuse mai sus.
Pe pagini vrem sa avem legaturi (linkuri) spre celelate pagini. Ca sa
faci asta scrii forma de baza a unui fisier html si pui linkuri:
fisierul index.html:
Fa la fel si cu celelate fisiere si modifica in loc de index pune
contact si produse pe fiecare pagina. Cand deschizi cu browserul vei
avea legaturi intre fiecare pagina, iar aceste pagini vor avea continut
unic.
Ca si pe orice site trebuie sa il infrumusetezi cu imagini alinieri
headinguri si asa mai departe. Pentru asta poti folosi tabele sau
divid-uri (<div> <div />) si Cascading style sheets (css)
pentru a aranja fiecare elemetn in parte ca pagina s aiasa cum iti
doresti. Eu cand fac un site, prima si prima data ma gandesc cum as vrea
sa arete situl, si fac o schita a paginilor(template) dupa care adaug
continutul pe fiecare pagina. Cel putin asa mi se pare mie mai usor.
Spre exemplu am schita urmatoare:
Acuma vreau ca situl meu sa aiba o forma cu niste imagini si un text formatat:
Ca sa aranjam toate elementele in pagina vom folosi divide taguri si le vom da proprietati cu Cascading styled sheets.
Prima data trebuie sa punem in fisierul html tagurile si css(cascading stled sheets). Eu am ales sa le pun sub forma
Salveaza pagina si creeaza un fisier text nou si pune-i numele stil.css
(Atnetie ca extensia sa fie vizibila caci altfel nu merge).
La banner vom pune o imagine si vom seta ca partea din dreapta a
imaginii sa se multiplice (banerul va avea inaltimea sau height 126
pixeli)
La butoane vom pune un fundal printr-o imagine de
1px grosime (partea unde vor fi puse butoanele va avea inaltimea sau height-ul de 39 pixeli)
La continut vom pune o culoare inchisa si vom seta culoarea fontului din el un rosu mai inchis
Deschide fisierul stil.css
proprietatile dividului container:
Vom seta marginie documentului 0 fontul arial de 15 pixeli
proprietatile dividului container:
Fisierul index.html:
Si fisierul stil.css:
Si vei obtine in pagina de browser:
imaginile folosite in creearea acestei pagini:
Banner
imaginea care se repeta dupa ce se termina bannerul
fundal butoane
buton normal
buton cand mousul este peste link
Enjoy
Sa zicem ca vrei sa ai pagina index.html , o pagina contact.html si o pagina produse.html
creeaza un folder undeva si in acel folder creeaza 3 fisier text si
modifica-i numele la fiecare document cu numele spuse mai sus.
Pe pagini vrem sa avem legaturi (linkuri) spre celelate pagini. Ca sa
faci asta scrii forma de baza a unui fisier html si pui linkuri:
fisierul index.html:
- Code:
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<a href="index.html">Index</a> | <a
href="contact.html">Contact</a> | <a
href="produse.html">Produse</a>
<br />
<br />
Continutul paginii index.tml
</body>
</html>
Fa la fel si cu celelate fisiere si modifica in loc de index pune
contact si produse pe fiecare pagina. Cand deschizi cu browserul vei
avea legaturi intre fiecare pagina, iar aceste pagini vor avea continut
unic.
Ca si pe orice site trebuie sa il infrumusetezi cu imagini alinieri
headinguri si asa mai departe. Pentru asta poti folosi tabele sau
divid-uri (<div> <div />) si Cascading style sheets (css)
pentru a aranja fiecare elemetn in parte ca pagina s aiasa cum iti
doresti. Eu cand fac un site, prima si prima data ma gandesc cum as vrea
sa arete situl, si fac o schita a paginilor(template) dupa care adaug
continutul pe fiecare pagina. Cel putin asa mi se pare mie mai usor.
Spre exemplu am schita urmatoare:
Acuma vreau ca situl meu sa aiba o forma cu niste imagini si un text formatat:
Ca sa aranjam toate elementele in pagina vom folosi divide taguri si le vom da proprietati cu Cascading styled sheets.
Prima data trebuie sa punem in fisierul html tagurile si css(cascading stled sheets). Eu am ales sa le pun sub forma
- Code:
<html>
<head>
<title>titlu pagina</title>
<link rel="stylesheet" href="stil.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="banner">Content for id "banner" Goes Here</div>
<div id="butoane">Content for id "butoane" Goes Here</div>
<div id="continut">Content for id "continut" Goes Here</div>
</div>
</body>
</html>
Salveaza pagina si creeaza un fisier text nou si pune-i numele stil.css
(Atnetie ca extensia sa fie vizibila caci altfel nu merge).
La banner vom pune o imagine si vom seta ca partea din dreapta a
imaginii sa se multiplice (banerul va avea inaltimea sau height 126
pixeli)
La butoane vom pune un fundal printr-o imagine de
1px grosime (partea unde vor fi puse butoanele va avea inaltimea sau height-ul de 39 pixeli)
La continut vom pune o culoare inchisa si vom seta culoarea fontului din el un rosu mai inchis
Deschide fisierul stil.css
proprietatile dividului container:
Vom seta marginie documentului 0 fontul arial de 15 pixeli
- Code:
body {
margin: 0px;
font-family: arial;
font-size: 15px;
proprietatile dividului container:
- Code:
#container {
width: auto;
}
- Code:
#butoane {
background: url(tut_5_4.jpg) repeat-x;
height: 39px;
}
- Code:
<div id="banner"><img src="tut_5_3.jpg" /></div>
- Code:
<div id="butoane">
<ul>
<li><a href="index.html" title="Acasa" >Acasa</a></li>
<li><a href="produse.html" title="produse" >Produse</a></li>
<li><a href="contact.html" title="Contact" >Contact</a></li>
</ul>
<div />
- Code:
li a
{
background: url(tut_5_6.jpg) repeat-x;
color: #ffffff;
}
li a:hover
{
background: url(tut_5_5.jpg) repeat-x;
color: #ffffff;
}
ul {
padding: 0px;
margin: 0px auto;
}
li
{
display: inline;
list-style: none;
font-family: Arial;
}
li a
{
float: left;
height: 39px;
text-decoration: none;
text-align: center;
width: 80px;
white-space:nowrap;
padding-left: 5px;
line-height: 25px;
margin-left: 2px;
}
Fisierul index.html:
- Code:
<html>
<head>
<title>titlu pagina</title>
<link rel="stylesheet" href="stil.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="banner"><img src="tut_5_3.jpg" /></div>
<div id="butoane">
<ul>
<li><a href="index.html" title="Acasa" >Acasa</a></li>
<li><a href="produse.html" title="produse" >Produse</a></li>
<li><a href="contact.html" title="Contact" >Contact</a></li>
</ul>
</div>
<div id="continut">Continutul paginii</div>
</div>
</body>
</html>
Si fisierul stil.css:
- Code:
body {
margin: 0px;
font-family: arial;
font-size: 15px;
background-color: #141414;
}
#container {
margin-left: auto;
margin-right: auto;
}
#banner {
background: url(tut_5_7.jpg) repeat-x;
}
#butoane {
background: url(tut_5_4.jpg) repeat-x;
height: 39px;
}
#continut {
color: #9f0a0a;
padding: 5px;
}
li a
{
background: url(tut_5_6.jpg) repeat-x;
color: #ffffff;
}
li a:hover
{
background: url(tut_5_5.jpg) repeat-x;
color: #ffffff;
}
ul {
padding: 0px;
margin: 0px auto;
}
li
{
display: inline;
list-style: none;
font-family: Arial;
}
li a
{
float: left;
height: 39px;
text-decoration: none;
text-align: center;
width: 80px;
white-space:nowrap;
padding-left: 5px;
line-height: 25px;
margin-left: 2px;
}
Si vei obtine in pagina de browser:
imaginile folosite in creearea acestei pagini:
Banner imaginea care se repeta dupa ce se termina bannerulfundal butoane buton normal buton cand mousul este peste link Enjoy
MeG@DaN- Administrator
- Mesaje : 465
Data de inscriere : 17/12/2010
Localizare : Acasa -
Similar topics» [Html]Cum sa faci o pagina html partea 1
» [HTML] Partea 4
» [HTML] Partea 2
» [HTML] Partea 4
» [HTML] Partea 5
» [HTML] Partea 4
» [HTML] Partea 2
» [HTML] Partea 4
» [HTML] Partea 5
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum
» Ajuta Comunitatea
» Salut de la kalean
» firecracker
» Ajuta Comunitatea in dezvoltare
» welcome........
» Cerere UnBan
» Astept potentiali clienti la componente IT si cel mai bun serviciu de gazduire din Romania!
» Cerere Rank