Introducerea tabelelor. Pagina de index. Meniu si conținut (5)

Primul tabel pe care-l creăm va avea un rol extrem de clar și precis, el va reprezenta meniul site-ului nostru, un site compus din patru pagini pe care le voi folosi ca material didactic. Vă reamintesc, suntem în prima pagină a site-ului, cea cu numele de fișier index.html. Deci, introducem sub fraza de introducere un tabel, respectiv vom avea în plus următorul cod:

<table
style=”width: 800px; text-align: center; margin-left: auto; margin-right: auto;”
border=”1″ cellpadding=”2″ cellspacing=”2″>

<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

Cum introducem? Simplu, lucrăm cu editorul html în mod normal, avem în bara cu unele de sus butonul „Table”, selectăm un tabel cu patru coloane și un singur rând, apoi după ce ne-a apărut în pagină tabelul îi setăm proprietățile făcând încă o dată click pe același buton. În esență, lățimea este de 800 pixeli, alinierea textului în plan orizontal este center iar în plan vertical e top. Cred că se poate intui semnificația acestor termeni.

Conținutul unei căsuțe de tabel se introduce între <td> și </td>. Prin urmare, în pagină vom avea tabelul ca în codul de mai jos:

<table
style=”width: 800px; text-align: center; margin-left: auto; margin-right: auto;”
border=”1″ cellpadding=”2″ cellspacing=”2″>
<tbody>
<tr>
<td>prima pagina</td>
<td>reparatii</td>
<td>consignatie</td>
<td>contact</td>
</tr>
</tbody>
</table>

Întărim literele cuvintelor din meniu selectându-l pe fiecare dintre acestea și atribuindu-i proprietatea de bold.

Bun. Acum avem meniul într-o fază preliminară, mai urmează să realizăm legăturile, dar înainte trebuie să mai facem ceva, să schițăm locul unde vom introduce conținutul paginii. Pentru o bună înțelegere a procesului voi realiza un tabel pe două coloane, în stânga vom introduce un titlu, iar în dreapta va fi explicația titlului. Tabelul va avea aceleași dimensiuni, va fi plasat sub meniu și va fi centrat în mijlocul paginii. Deci, vom introduce:

<table
style=”width: 800px; text-align: left; margin-left: auto; margin-right: auto;”
border=”1″ cellpadding=”2″ cellspacing=”2″>
<tbody>
<tr>
<td style=”width: 300px;”></td>
<td valign=”top”></td>
</tr>
<tr>
<td></td>
<td valign=”top”></td>
</tr>
<tr>
<td></td>
<td valign=”top”></td>
</tr>
</tbody>
</table>

În secțiunea următoare a cursului de web-design vă voi arăta cum se fac alte pagini ale site-ului și cum se fac legăturile între ele. Pentru recapitulare, să revedem ce avem în acest monent al dezvoltării site-ului, rwspectiv codul primei pagini. Acesta este:

 

<!DOCTYPE html PUBLIC „-//W3C//DTD HTML 4.01//EN” „http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=”content-type”
content=”text/html; charset=ISO-8859-1″>
<title>Ion Popovici din Timisoara, mecanic de motociclete si
masini vechi.</title>
<meta
content=”Reparatii de motociclete si autoturisme care au motoare in doi timpi, restaurare masini si motociclete de epoca, vanzari in regim de consignatie.”
name=”description”>
<meta content=”mecanic, motoare in doi timpi, masini vechi, motociclete vechi, restaurare, reparatii”
name=”keywords”>
</head>
<body>
<div style=”text-align: center;”>Sunteti in site-ul de
prezentare al unui mecanic si al atelierului lui.<br>
Reparatii de motociclete si autoturisme cu motor in doi timpi, atelier
situat in cartierul Iosefin din Timisoara.<br>
<table
style=”width: 800px; text-align: center; margin-left: auto; margin-right: auto;”
border=”1″ cellpadding=”2″ cellspacing=”2″>
<tbody>
<tr>
<td style=”font-weight: bold;”>prima pagina</td>
<td style=”font-weight: bold;”>reparatii</td>
<td style=”font-weight: bold;”>consignatie</td>
<td style=”font-weight: bold;”>contact</td>
</tr>
</tbody>
</table>
<br>
<table
style=”width: 800px; text-align: left; margin-left: auto; margin-right: auto;”
border=”1″ cellpadding=”2″ cellspacing=”2″>
<tbody>
<tr>
<td style=”width: 300px; text-align: center;”>motoare
in doi timpi</td>
<td valign=”top”>Repar orice motor in doi timpi,
indiferent de anul de
fabricatie, de destinatia sasiului si de marca, astfel incat la mine in
atelier se reconditioneaza motoare incepand de la Trabant si Wartburg
si pana la cele mai vechi Opel-uri.<br>
<br>
De asemenea, execut piese de schimb la comanda pentru cutiile de viteze
sau alte angrenaje. </td>
</tr>
<tr>
<td style=”text-align: center;”>caroserii automobile
de epoca</td>
<td valign=”top”>Daca ai un automobil de epoca si
incepe sa-l manance rugina sau i-ai indoit tabla intr-un incident, ai
ajuns in locul potrivit. Lucrarile de tinichigerie executate de mine
sunt fara cusur. Nici n-o sa-ti dai seama ca ai avut probleme la
caroserie!</td>
</tr>
<tr>
<td style=”text-align: center;”>motociclete</td>
<td valign=”top”>In Romania anilor trecuti erau la
moda motocicletele IJ, Jawa, CZ, Simpson… de fapt doar astea se
gaseau! Pe nostalgicii acestora îi anunt ca mai am prin garaj cate o
piesa, doua… Sau le reconditionez pe cele vechi…</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Despre Matei Bitea Articolele 95
Am fost jurnalist. M-am retras. Acum sunt freelancer și mă ocup de optimizare SEO. Scriu și fac site-uri...