Optimizare SEO Timisoara
blog: opinii, comentarii, articole...


Crearea de pagini. Legăturile dintre ele (6)

Înainte de toate vă rog să creați în folderul website-ului dvs un alt folder pe care să-l denumiți foto și să introduceți în el imaginile următoare, pe care le puteți descărca făcând click pe ele: dacia1300.jpg motocicleta.jpg, captura.jpg și motor.jpg .

Deși am convenit că vom exemplifica realizarea unui site pentru un mecanic auto, totuși asta nu se va întâmpla în totalitate, din simplul motiv că, din moment ce introduc text real, cititorul va fi derutat de acesta și nu va mai fi atent la scopul acestui îndrumar de web-design. Așadar, cu excepția primei pagini, care este mai instructivă și cu un text apropiat de realitate, voi folosi binecunoscutul generator „lorem ipsum”. (Cine nu știe ce este „lorem ipsum” să dea o căutare pe Google…)

Pentru început vom lucra asupra paginii index.html și vom reconfigura meniul, adică vom crea legăturile între paginile pe care am stabilit că le vom avea. Vom deschide index.html în KompoZer, vom selecta din meniu cuvintele „prima pagină”, vom apăsa pe butonul link din bara de sus a programului si vom introduce la câmpul „link location” textul index.html. Apăsăm jos OK și deocamdată atât. Vom observa că dacă trecem în modul preview al programului, cuvintele vor fi colorate, îngroșate și subliniate. Selectăm apoi cuvântul „reparatii” si vom proceda asemănător, doar că la link location vom trece reparatii.html. La fel procedăm și cu consignație – consignatie.html și cu contact – contact.html. Am creat meniul.

Avem deci prima pagină a site-ului, respectiv index.html, și ne mai trebuie încă trei: reparații, consignație și contact. Ca să avem aceste pagini vom salva din KompoZer pagina index.html succesiv cu „save as” obținând următoarele fișiere (pagini): reparatii.html, consignatia.html și contact.html. Acum avem în folderul website, locul unde ne păstrăm site-ul dacă l-ați denumit așa, patru pagini. Ele ar fi avut conținut identic, dar le-am modificat eu ca să fie procesul de față mai educativ. Veți învăța și dvs să faceți asta.

Ce trebuie să rețineți este că puteți crea o pagină în felul în care l-am descris eu, sau altfel, cum puteți învăța din altă parte, iar legătura (link-ul) se face din orice loc al paginii, prin orice cuvânt sau imagine. Manual, dacă învățați html sau automat, cu ajutorul acestui program (sau altele, sunt o mulțime de editoare html).

În concluzie, avem patru pagini în site care comunică între ele. Atrag atenția că sunt „brute”, ca să spun așa, urmează să le finisăm, iar cu adaptările și înlocuirile de rigoare să fie bune de pus pe net.

 

Mai jos aveți codul sursă al paginii index.html.

 

<!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;”><a href=”index.html”>prima pagina</a></td>
<td style=”font-weight: bold;”><a href=”reparatii.html”>reparatii</a></td>
<td style=”font-weight: bold;”><a href=”consignatie.html”>consignatie</a></td>
<td style=”font-weight: bold;”><a href=”contact.html”>contact</a></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 lor îi anunt ca mai am prin garaj cate o piesa, doua… Sau le reconditionez pe cele vechi…</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>