HTML

Pagini web - design
HTML
Tutorial AEL HTML
Antet
<html> <head> <title>Antet - titlul antetului</title> </head> <body> </body> </html>
Titlu
<html> <head> <title>Antet</title> </head> <body text="#ff0000"> <h1 align="center">Titlu de culoare rosie, de marime h1</h1> </body> </html>
Linie orizontală
<html> <head> <title>Antet</title> </head> <body text="#ff0000"> <h1 align="center">Linie orizontala = grosime-6 pixeli, culoare rosie, lungime - 50% din latimea paginii</h1> <hr size="6" color="red" align="center" width="50%"></hr> </body> </html>
Pagină cu fundal culoare
<html> <head> <title>Antet</title> </head> <body text="#ff0000" bgcolor="#0000ff"> <h1 align="center">Pagina cu fundal de culoare albastra</h1> <hr size="6" color="red" align="center" width="50%"></hr> </body> </html>
Pagină cu fundal imagine
<html> <head> <title>Antet</title> </head> <body text="#ff0000" background="Captură-ecran.png"> <h1 align="center">Pagina cu fundal imagine</h1> <hr size="6" color="red" align="center" width="50%"></hr> </body> </html>
Inserare imagine
<html> <head> <title>Antet</title> </head> <body text="#ff0000" background="Captură-ecran.png"> <h1 align="center">Inserare imagine</h1> <hr size="6" color="red" align="center" width="50%"></hr> <img src="1.jpg"></body> </html>
Rezoluție imagine
<html> <head> <title>Antet</title> </head> <body text="#ff0000" background="Captură-ecran.png"> <h1 align="center">Schimbarea rezolutiei imaginii</h1> <hr size="6" color="red" align="center" width="50%"></hr> <img src="1.jpg" width="60%" height="300"></body> </html>
Centrare imagine
<html> <head> <title>Antet</title> </head> <body text="#ff0000" background="Captură-ecran.png"> <h1 align="center">Centrare imagine</h1> <hr size="6" color="red" align="center" width="50%"></hr> <center><img src="1.jpg" width="60%" height="300"> </center> </body> </html>
Inserare două imagini
<html> <head> <title>Antet</title> </head> <body text="#ff0000" background="Captură-ecran.png"> <h1 align="center">A doua imagine</h1> <hr size="6" color="red" align="center" width="50%"></hr> <center><img src="1.jpg" width="60%" height="300"> <img src="2.jpg" width="25%" height="200"> </center> </body> </html>
Vspace
<html> <head> <title>Antet</title> </head> <body text="#ff0000" background="Captură-ecran.png"> <h1 align="center">Vspace</h1> <hr size="6" color="red" align="center" width="50%"></hr> <center><img src="1.jpg" width="300" height="200" vspace="50"> <img src="2.jpg" width="300" height="200"><br> <img src="3.jpg" width="300" height="200"> <img src="4.jpg" width="300" height="200"> </center> </body> </html>
Hspace
<html> <head> <title>Antet</title> </head> <body text="#ff0000" background="Captură-ecran.png"> <h1 align="center">Hspace</h1> <hr size="6" color="red" align="center" width="50%"></hr> <center><img src="1.jpg" width="300" height="200" hspace="50"> <img src="2.jpg" width="300" height="200"><br> <img src="3.jpg" width="300" height="200"> <img src="4.jpg" width="300" height="200"> </center> </body> </html>
Inserare link
<html> <head> <title>Antet</title> </head> <body text="#ff0000" background="Captură-ecran.png" link="pink" alink="green" vlink="yellow"> <h1 align="center">Link</h1> <hr size="6" color="red" align="center" width="50%"></hr> <center><img src="1.jpg" width="300" height="200" vspace="50" hspace="50"> <img src="2.jpg" width="300" height="200" vspace="50" hspace="50"><br> <img src="3.jpg" width="300" height="200" vspace="50" hspace="50"> <img src="4.jpg" width="300" height="200" vspace="50" hspace="50"> </center> <a href="Captură-ecran.png">Captură-ecran</a> </body> </html>
Font
<html> <head> <title>Antet</title> </head> <body text="#ff0000" background="Captură-ecran.png"> <h1 align="center">Font</h1> <hr size="6" color="red" align="center" width="50%"></hr> <font color="yellow" size="6"> Inserare text Inserare text Inserare text Inserare text Inserare text Inserare text Inserare text </font> </body> </html>
Break
<html> <head> <title>Antet</title> </head> <body text="#ff0000" background="Captură-ecran.png"> <h1 align="center">BR / intrerupere</h1> <hr size="6" color="red" align="center" width="50%"></hr> <font color="yellow" size="6"> Inserare text Inserare text Inserare text<br> Inserare text Inserare text Inserare text <br>Inserare text </font> </body> </html>
Paragraf
<html> <head> <title>Antet</title> </head> <body text="#ff0000" background="Captură-ecran.png"> <h1 align="center">P / paragraf</h1> <hr size="6" color="red" align="center" width="50%"></hr> <font color="yellow" size="6"> Inserare text Inserare text Inserare text<p> Inserare text Inserare text Inserare text <p>Inserare text </font> </body> </html>
Formatare text
<html> <head> <title>Antet</title> </head> <body text="#ff0000" background="Captură-ecran.png"> <h1 align="center">Formatare text</h1> <hr size="6" color="red" align="center" width="50%"></hr> <font color="yellow" size="6"> <b>Text ingrosat Text ingrosat Text ingrosat</b><br> <i>Text inclinat Text inclinat Text inclinat</i><br> <u>Text subliniat Text subliniat Text subliniat</u><br> <s>Text taiat Text taiat Text taiat </s><br> <em>Text embrass Text embrass Text embrass</em><br> Afara sunt -2<sup>0</sup>C.<br> Coordonatele graficului sunt X<sub>1</sub> si Y<sub>1</sub>.<br> </font> </body> </html>
Listă ordonată
<html> <head> <title>Antet</title> </head> <body text="#ff0000" background="Captură-ecran.png"> <h1 align="center">Liste</h1> <hr size="6" color="red" align="center" width="50%"></hr> <ol>Lista ordonata <li>Luni</li> <li>Marti</li> <li>Miercuri</li> <li>Joi</li> <li>Vineri</li> <li>Sambata</li> <li>Duminica</li> </ol> </body> </html>
Listă neordonată
<html> <head> <title>Antet</title> </head> <body text="#ff0000" background="Captură-ecran.png"> <h1 align="center">Liste</h1> <hr size="6" color="red" align="center" width="50%"></hr> <ul>Lista neordonata <li>Luni</li> <li>Marti</li> <li>Miercuri</li> <li>Joi</li> <li>Vineri</li> <li>Sambata</li> <li>Duminica</li> </ul> </body> </html>
Tabel
<HTML> <HEAD> <TITLE>tabele1</TITLE> </HEAD> <BODY> <H1 align="center">Crearea unui tabel</H1><HR> <TABLE> <TR> <TD>celula 11 <TD>celula 11 <TR> <TD>celula 21 <TD>celula 22 <TR> <TD>celula 31 <TD>celula 32 <TR> <TD>celula 41 <TD>celula 42 </TABLE> </BODY> </HTML>
Chenarul unui tabel
<HTML> <HEAD> <TITLE>tabele2</TITLE> </HEAD> <BODY> <H1 align="center">Chenarul unui tabel</H1><HR> <TABLE border="4"> <TR> <TD>celula 11 <TD>celula 12 <TR> <TD>celula 21 <TD>celula 22 <TR> <TD>celula 31 <TD>celula 32 <TR> <TD>celula 41 <TD>celula 42 </TABLE> </BODY> </HTML>
Tabel care conține imagini
<HTML> <HEAD> <TITLE>tabele3</TITLE> </HEAD> <BODY> <H1 align="center">Tabel care contine imagini</H1><HR> <TABLE border="4"> <TR> <TD><IMG src="1.jpg" width="400" height="200"> <TD><IMG src="2.jpg" width="400" height="200"> <TR> <TD><IMG src="3.jpg" width="400" height="200"> <TD><IMG src="4.jpg" width="400" height="200"> </TABLE> </BODY> </HTML>
Alinierea tabelului în pagină
<HTML> <HEAD> <TITLE>tabele4</TITLE> </HEAD> <BODY> <H1 align="center">Alinierea tabelului in pagina</H1><HR> <TABLE border="3" align="right"> <TR> <TD>celula 11 <TD>celula 12 <TR> <TD>celula 21 <TD>celula 22 </TABLE> Acest text este plasat in stanga tabelului </BODY> </HTML>
Spațierea tabelului față de restul textului
<HTML> <HEAD> <TITLE>tabele5</TITLE> </HEAD> <BODY> <H1 align="center">Spatierea tabelului fata de restul textului </H1><HR> Tabelul de mai jos este spatiat pe verticala fata de acest text cu 15 pixeli. Tabelul de mai jos este spatiat pe verticala fata de acest text cu 15 pixeli. Tabelul de mai jos este spatiat pe verticala fata de acest text cu 15 pixeli<BR> <TABLE border align="left" vspace="15" hspace="10"> <TR> <TD>celula 11 <TD>celula 12 <TR> <TD>celula 21 <TD>celula 22 </TABLE> Acest text este plasat in dreapta tabelului la distanta de 10 pixeli pe orizontala fara de tabel. Acest text este plasat in dreapta tabelului la distanta de 10 pixeli pe orizontala fara de tabel. Acest text este plasat in dreapta tabelului la distanta de 10 pixeli pe orizontala fara de tabel. </BODY> </HTML>
Dimensionarea tabelului
<HTML> <HEAD> <TITLE>tabele6</TITLE> </HEAD> <BODY> <H1 align="center">Dimensionarea unui tabel</H1><HR> Tabel cu lungimea de 50% din pagina si inaltimea de 200 de pixeli<P> <TABLE border width="50%" height="200"> <TR> <TD>celula 11 <TD>celula 12 <TR> <TD>celula 21 <TD>celula 22 </TABLE> </BODY> </HTML>
Poziționarea textului în centrul paginii
<HTML> <HEAD> <TITLE>tabele7</TITLE> </HEAD> <BODY> <H1 align="center">Pozitionarea unui text</H1> <TABLE border="0" width="60%" height="100%" align="center"> <TR> <TD> Acest text este pozitionat in centrul paginii. Acest text este pozitionat in centrul paginii. Acest text este pozitionat in centrul paginii. Acest text este pozitionat in centrul paginii. Acest text este pozitionat in centrul paginii. </TABLE> </BODY> </HTML>
Spațierea celulelor
<HTML> <HEAD> <TITLE>tabele8</TITLE> </HEAD> <BODY> <H1 align="center">Spatierea celulelor</H1><HR> <TABLE border="3" cellspacing="10"> <TR> <TD>12 A TAE <TD>12 B TAE <TR> <TD>12 A TAE <TD>12 B TAE </TABLE> </BODY> </HTML>
Pagini web - programare