Creare site in HTML :)

Subiect: Creare site in HTML :) Joi Iun 12, 2008 9:07 pm

Salut , in acest tutorial , va voi invata , cum iti realizesti propriul Site in format html Smile

Layout-ul paginii va fi:
- latime totala 750 px
- sus vom avea un header
- meniul in stanga, latime 150 px
- continutul paginii in drepta
- jos vom avea un footer

Vom crea un tabel cu latime 750 px, avand 3 randuri, iar pe fiecare rand cate 2 celule. Pe randul 1 si 3 unim cele 2 celule.

Cod:
<table width="750" border="0" cellspacing="0" cellpadding="0">
<tr><td>Header</td></tr>
<tr><td>Meniu</td><td>Continut</td></tr>
<tr><td>Footer</td></tr>
</table>

Inaltimea fiecarui rand va fi stabilita de elementul cel mai inalt (imagine sau text), sau prin introducerea atributului height in fiecare element td. Stabilim pentru randul 1 si 3 inaltime 50 px, iar pentru randul 2 inaltime 200 px.

Folosind CSS vom formata cele 4 celule in mod independent inserand in fiecare element td atributul class cu valoarea header, meniu, continut si footer.
Utilizarea CSS-ului extern o vom face inserand urmatoarea linie in zona head a paginii.

<link>

In fisierul CSS extern stabilim pentru fiecare celula in parte culoarea si marimea fontului, culoarea fundalului, pozitionarea pe verticala sau orizontala a continutului, etc.

Voua va revine ultima etapa, adaugarea informatiei in fiecare celula. Pentru dezvoltarea in continuare a paginii puteti introduce in fiecare celula (in locul textului corespunzator: Header, Meniu, Continut, Footer) alte etichete html (liste, tabele, formulare) care pozitioneze informatia dorita.
Header-ul poate contine informatii despre tema site-ului sub forma text sau imagine (logo sau banner). In meniu introduceti o lista de link-uri catre celelalte pagini ale site-ului. Footer-ul poate contine link-uri catre: pagina de contact sau pagini externe.

Pentru a pastra layout-ul prezentat, celelalte pagini ale site-ului le obtineti copiind fisierul site.html si apoi le redenumiti, urmand sa modificati continutul functie de tema noii pagini.
Acest mod de obtinere a noilor pagini este cel mai simplu, dar nu cel mai eficient, fiind recomandat incepatorilor.
Metoda 1: utilizarea cadrelor, prin care fiecare zona o transformati in cadru, in acest fel de la o pagina la alta doar cadrul continut se schimba. Metoda 2: transformarea fisierelor html in php. Astfel zonele care se repeta vor fi transformate in fisiere php externe, ele find adaugate in pagina principala prin include.

Voi mai revenii , cu ceva tutoriale Smile

sper ca nu va durut capu , dar asa e php, html , tre sa ai cap :-)

Subiect: Re: Creare site in HTML :) Joi Aug 21, 2008 2:24 pm

Trebuia sa fii si tu mai explicit daca tot ai facut tutorial.

Am facut un layout simpul si in graba ca sa intelegeti ceva din cat a explicat Smiley. Daca aveti vreo intrebare, spune-ti. Aici puteti gasii exemplul online a codului de mai jos: http://st-zone.net/layout.html. Scuzati dezordinea din cod dar m-am grabit. Cand am timp il optimizez:

HTML:

Cod:: <html>
<head>
<title>Numele paginii</title>
<meta name="description" content="Descrierea siteului tau, care va aparea pe Google">
<meta name="keywords" content="Cuvinte, cheie, despartite, prin, virgula">
<link rel="stylesheet" type="text/css" href="main.css">
</head>

<body>
<table width="60%" align="center" cellspacing="0" cellpadding="0">
<tr><td colspan="2" class="header">Raizen's Homepage</td></tr>
<tr><td class="meniu" valign="top">
<table class="raizen" cellspacing="0" cellpading="0">
<tr><th class="top">ť Meniu Ť</th></tr>
<tr><td>
<ul>
<li><a href="#">Pagina 1</a></li>
<li><a href="#">Pagina 2</a></li>
<li><a href="#">Pagina 3</a></li>
<li><a href="#">Pagina 4</a></li>
</ul>
</td></tr>
<tr><th>ť Login Ť</th></tr>
<tr><td><table class="loginform" align="center"><tr><td>Username:</td><td><input type="text"

size="13"></td></tr><tr><td>Password:</td><td><input type="text" size="13"><br></td></tr><tr><td colspan="2" align="center"><br><input

type="button" value="Login"><input type="button" value="Reset"></td></tr><tr><td colspan="2" align="center"><a

href="#">Inregistrare</a></td></tr><tr><td colspan="2" align="center"><a href="#">Recupereaza Parola</a></td></tr><tr><td

height="100"> </td></tr></table></td>
</tr>
</table>
</td><td width="80%" class="content" valign="top">
<p>
Lorem Ipsum este pur si simplu o macheta pentru text a industriei tipografice. Lorem Ipsum a fost macheta standard a industriei înca din secolul al

XVI-lea, când un tipograf anonim a luat o planseta de litere si le-a amestecat pentru a crea o carte demonstrativa pentru literele respective. Nu doar

ca a supravietuit timp de cinci secole, dar si a facut saltul în tipografia electronica practic neschimbata. A fost popularizata în anii '60 odata cu

iesirea colilor Letraset care contineau pasaje Lorem Ipsum, iar mai recent, prin programele de publicare pentru calculator, ca Aldus PageMaker care

includeau versiuni de Lorem Ipsum.
</p>
<p>
<b>De ce îl folosim?</b><br><br>

E un fapt bine stabilit ca cititorul va fi sustras de continutul citibil al unei pagini atunci când se uita la asezarea în pagina. Scopul utilizarii a Lorem

Ipsum, este acela ca are o distributie a literelor mai mult sau mai putin normale, fata de utilizarea a ceva de genul "Continut aici, continut acolo",

facându-l sa arate ca o engleza citibila. Multe pachete de publicare pentru calculator si editoare de pagini web folosesc acum Lorem Ipsum ca model

standard de text, iar o cautare de "lorem ipsum" va rezulta în o multime de site-uri web în dezvoltare. Pe parcursul anilor, diferite versiuni au evoluat,

uneori din intâmplare, uneori intentionat (infiltrându-se elemente de umor sau altceva de acest gen).
</p>
<p>
<b>De unde provine?</b><br><br>

În ciuda opiniei publice, Lorem Ipsum nu e un simplu text fara sens. El îsi are radacinile într-o bucata a literaturii clasice latine din anul 45 î.e.n.,

facând-o sa aiba mai bine de 2000 ani. Profesorul universitar de latina de la colegiul Hampden-Sydney din Virginia, Richard McClintock, a cautat în

bibliografie unul din cele mai rar folosite cuvinte latine "consectetur", întâlnit în pasajul Lorem Ipsum, si cautând citate ale cuvântului respectiv în

literatura clasica, a descoperit la modul cel mai sigur sursa provenientei textului. Lorem Ipsum provine din sectiunile 1.10.32 si 1.10.33 din "de

Finibus Bonorum et Malorum" (Extremele Binelui si ale Raului) de Cicerone, scrisa în anul 45 î.e.n. Aceasta carte este un tratat în teoria eticii care a

fost foarte popular în perioada Renasterii. Primul rând din Lorem Ipsum, "Lorem ipsum dolor sit amet...", a fost luat dintr-un rând din sectiunea

1.10.32.<br><br>
Pasajul standard de Lorem Ipsum folosit înca din secolul al XVI-lea este reprodus mai jos pentru cei interesati. Sectiunile 1.10.32 si 1.10.33 din "de

Finibus Bonorum et Malorum" de Cicerone sunt de asemenea reproduse în forma lor originala, impreuna cu versiunile lor în engleza din traducerea de

catre H. Rackham din 1914.<bt><br>
</p>
<b>De unde pot sa-l iau si eu?</b><br><br>

Exista o multime de variatii disponibile ale pasajelor Lorem Ipsum, dar majoritatea lor au suferit alterari într-o oarecare masura prin infiltrare de

elemente de umor, sau de cuvinte luate aleator, care nu sunt câtusi de putin credibile. Daca vreti sa folositi un pasaj de Lorem Ipsum, trebuie sa va

asigurati ca nu contine nimic stânjenitor ascuns printre randuri. Toate generatoarele de Lorem Ipsum de pe Internet tind sa repete bucati de text în

functie de necesitate, astfel facându-l pe acesta primul generator adevarat de pe Internet. El utilizeaza un dictionar de peste 200 cuvinte din latina,

combinate cu o cantitate considerabila de modele de structuri de propozitii, pentru a genera Lorem Ipsum care arata decent. Astfel, Lorem Ipsum-ul

generat nu contine repetitii, infiltrari de elemente de umor sau de cuvinte non-caracteristice, etc.</p><br><br><br>
</td></tr>
<tr><td colspan="2" class="footer">Copyright © 2008 Raizen Isildur</td></tr>
</table>
</body>

</html>

CSS:

Cod:: body {
margin-top: 0;
margin-left: 0;
background-color: #ffee00;
}

table {
background-color: #00ff00;
width: 60%;
border-width: 0px;
}

table td.header {
border-width: 0px 1px 1px 1px;
border-style: solid;
border-color: #000000;
width: 100%;
height: 100px;
padding: 5px;
text-align: center;
font-size: 30px;
font-weight: bolder;
font-family: Tahoma;
color: #0033ee;
}

table td.meniu {
width: 25%;
border-width: 0px 1px 1px 1px;
border-color: black;
border-style: solid;
}

table.raizen {
width: 100%
}

table.raizen th.top {
border-width: 1px 0px 1px 0px;
border-color: black;
border-style: solid;
color: #0033ee;
font-weight: bolder;
font-family: Tahoma;
background-color: 3eeff66;
width: 100%;
}

table.raizen th {
border-width: 1px 0px 1px 0px;
border-color: black;
border-style: solid;
color: #0033ee;
font-weight: bolder;
font-family: Tahoma;
background-color: 3eeff66;
width: 100%;
}

table.raizen td {
border-width: 0px;
color: #000000;
font-weight: bolder;
font-family: Tahoma;
width: 100%;
font-size: 12px;
}

table.loginform {
width: 100%;
}

table td.footer {
background-color: #003300;
height: 30px;
color: white;
font-size:13px;
text-align: center;
font-family: Tahoma;
font-weight: bold;
border-width: 0px 1px 1px 1px;
border-color: #ffee00;
border-style: solid;
}

table td.content {
border-width: 1px 1px 1px 1px;
border-color: black;
border-style: solid;
padding: 8px;
}

:-?? Sper ca v-a ajutat cu ceva.

Subiect: Re: Creare site in HTML :) Joi Aug 21, 2008 3:16 pm

Ms Raizen.nush sa explic ff bine Razz

....makr sa fii inteles ceva din tutorialul tau.knd ai timp,poate postezi si u un tutorial ceva Smile

Subiect: Re: Creare site in HTML :) Joi Aug 21, 2008 4:18 pm

SmileyZ a scris:: Ms Raizen.nush sa explic ff bine ....makr sa fii inteles ceva din tutorialul tau.knd ai timp,poate postezi si u un tutorial ceva

Am inteles, sa traiti Smile

)

» Creare autostart la CD
» Frame-uri HTML