Cum sa creezi o pagina html ?

Scris de ezlidor la data de Lun 13 Apr 2009, 5:38 pm

Crearea unei pagini html

Cu ajutorul acestui tutorial veţi putea creea propria pagină web în limbaj html.
Pentru a creea pagina intră în:
Panoul administratorului => Module => HTML => Administrare pagini HTML => Creeaza o pagina html.

Pentru început trebuie să ştiţi urmăroarele coduri de bază:

Cod	Vizualizare
<b>îngroşat</b> <i>înclinat</i> <u>subliniat<u> <font size=-2>text mic</font> <font size=+2>text mare</font>	îngroşat înclinat subliniat text mic text mare

O pagină html contine două (2) părţi: o parte head şi o parte body.
HEAD-ul conţine titlul şi o descriere scurtă a documentului.
BODY-ul conţine întregul cod al paginii.

Mai jos vei vedea un cod html simplu şi cum se afişează:

Cod:: <html> <head><title>Titlul pagină</title></head> <body>Conţinut pagină</body> </html>

Tagul de deschidere pentru heading este <hn> şi cel de închidere fiind </hn> unde "n" reprezintă mărimea heading-ului; acesta variând de la 1 la 6 (1 fiind cel mai mare iar 6 cel mai mic).

Liniile orizontale le puteţi adăuga cu ajutorul tagului <hr>, de reţinut că această comandă nu conţine şi un tag de închidere (vezi exemplele de mai sus). Puteţi adăuga diferite atribute:
width=n (pentru lungimea liniei)
width=n% (pentru lungimea liniei raportate la toată lungimea ecranului)
size=n (pentru linie îngroşată dar transparentă)
noshade (pentru linie îngroştă plină).

În modelul de mai sus am folosit următoarele atribute:

Cod:: <hr width=88> <hr width=10%> <hr size=8> <hr noshade>

Un tag <hr> fară atribute va fi interpretat ca linia să aibă toată lungimea paginei. Se pot folosi mai multe atribute într-un tag.

Tagul pentru un paragraf este <p>, iar cel de închidere este </p>

Alinierea în cadrul unei pagini html:
Aliniere la stânga:

Cod:: <h2 align=left>Aliniere stanga</h2>

Aliniere centrală:

Cod:: <h2 align=center>Aliniere centru</h2>

Aliniere la dreapta:

Cod:: <h2 align=right>Aliniere dreapta</h2>

Pentru a trece la un alt rând tastaţi tagul: <br>. Acest tag nu are cod de închidere. Pentru a lăsa un rând liber tastaţi <br><br>.

Pentru a adăuga un link folosiţi codul:

Cod:: <a href="LINK PAGINĂ"> NUME PAGINĂ </a>

Pentru a trimite un e-mail la o adresă folosiţi codul:

Cod:: <a href="ADRESĂ E-MAIL">TRIMITE UN E-MAIL</a>

Pentru a deschide o pagină nouă adăugaţi atributul target="_blank"

Cod:: <a href="LINK PAGINĂ" target="_blank"> NUME PAGINĂ </a>

Pentru a adăuga o imagine folosiţi codul:

Cod:: <img src="LINK IMAGINE">

Pentru a seta o lungime şi o lăţime folosiţi: height şi width, pentru a seta un titlu imaginii care se va afişa la poziţionarea cursorului peste imagine adăugaţi atributul alt="TITLU".

Cod:: <img src="masina.jpg" width=200 height=100 alt="ferrari">

background="LINK IMAGINE" = Pune o imagine ca fundal al unei pagini web.
bgcolor="#cod hexadecimal" = Pune o culoare ca fundal.
link="#cod hexadecimal" = Pune o culoare pentru link.
vlink="#cod hexadecimal" = Pune o culoare pentru linkurile deja vizitate.
text="#cod hexadecimal" = Pune o culoare pentru text.

Cod hexadecimal:
Există 16.7 milioane de culori diferite în sistemul de culori hexadecimal, începând de la #FFFFFF care este alb, până la #000000 care este negru.
Fiecare cod hexadecimal este împărţit in 3 grupe:
- #XXxxxx - Tentă de roşu
- #xxXXxx - Tentă de verde
- #xxxxXX - Tentă de albastru
Fiecare unitate(x) este o valoare între 0 şi F în sistemul de culori hexadecimal. Sistemul de culori hexadecimal constă în unităţile 0 1 2 3 4 5 6 7 8 9 A B C D E F, 0 fiind valoare nulă, iar F valoarea cea mai mare.

Pentru a adăuga o listă neordonată:

Cod html	Afişare
<ul> <li>trandafir <li>lalea <li>ghiocel </ul>	trandafir lalea ghiocel

Pentru a adăuga o listă ordonată:

Cod html	Afişare
<ol> <li>trandafir <li>lalea <li>ghiocel </ol>	trandafir lalea ghiocel

Dacă doriţi ca textul să se afişeze lateral de o imagine, folosiţi codul:

Cod:: <img src="LINK IMAGINE" align=left> TEXT-UL DORI <br clear=all>

Creearea unui tabel:

Cod:: <table border=1> <tr> <th>Titlu 1</th><th>Titlu 2</th><th>Titlu 3</th> </tr> <tr> <td>Casuta A</td><td>Casuta B</td><td>Casuta C</td> </tr> <tr> <td>Casuta D</td><td>Casuta E</td><td>Casuta F</td> </tr> </table>

Titlu 1	Titlu 2	Titlu 3
Casuta A	Casuta B	Casuta C
Casuta D	Casuta E	Casuta F

Pentru a forma o singură căsuţă din casuţele A şi D folosiţi codul:

Cod:: <td rowspan=2>Casuta A & D</td><td>Casuta B</td><td>Casuta C</td> </tr> <tr> <td>Casuta E</td><td>Casuta F</td> </tr>

Echipa Forumgratuit

Reproducerea acestui tutorial nu este posibila fara acordul nostru, in conformitate cu articolul L122-1 apartinand ICC.