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>
1. trandafir
2. lalea
3. 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>
