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


Operatii asupra continutului unei pagini html, respectiv asupra textelor si imaginilor. (7)

web design timisoara

După cum probabil ați reținut, ceea ce face parte din conținutul vizibil al unei pagini html, respectiv textul și imaginile sunt introduse între etichetele <td> și </td>. Asupra a ceea ce există între fragmentele de cod html pomenite mai înainte se pot face modificări, ștergeri, înlocuiri, adăugiri… fără a fi afectată funcționalitatea paginii. În general, modificările pe care le faceți pot influența doar asupra găsirii paginilor de către motoarele de căutare, în sensul că vă puteți îmbunătăți sau deteriora activitatea site-ului, dar despre acest lucru vom discuta altă dată.

Ca să modificați textul, în esența lui, e simplu, nu trebuie să vă spun nimic despre aceasta. Puteți face ca acesta să fie împărțit în alineate, în principal, în două moduri. Cu ajutorul etichetei <br>, cu care se poate face de fapt și o rearanjare a fragmentelor de text sau încadrându-l între simbolurile <p> și </p>. Pentru această ultimă opțiune folosiți mai ușor selectând și definindu-l ca atare din lista derulantă de sus stânga. Tot de acolo puteți indica titlul și subtitlurile, adică Heading 1, 2, 3…

Este util să știți cum funcționează „calea” spre imagini sau alte tipuri de fișiere, nu neapărat ca să scrieți codul, ci acest lucru vă este util mai mult în operația de depanare. De exemplu, dacă avem pagina în directorul rădăcină, dar vrem să introducem o imagine cu numele masina.jpg din folderul foto vom avea în pagină, de exemplu, <img style=”width: 300px; height: 158px;” alt=”masina” src=”foto/masina.jpg”>. Dacă este invers, pagina se află în folderul foto și este nevoie de o imagine din diretorul rădăcină atunci va fi <img style=”width: 300px; height: 158px;” alt=”masina” src=”../masina.jpg”>. Observați că înșiruirea de simboluri „../” face ieșirea din director.

Modificarea tabelelor. Crearea unei pagini de contact

Un tabel cu șiruri și coloane formatate la modul implicit de către KompoZer poate că nu ne este foarte pe plac din puct de vedere estetic sau poate că nu vă asigură structurarea conținutului așa cum doriți. Tocmai de aceea e cazul să vă sugerez contopirea căsuțelor tabelului cu ajutorul sintagmei etichetei span. Cel mai practic este să vă arăt „pe viu” cum se procedează.

Vă voi expune codul sursă al unui tabel care are cinci rânduri și patru coloane și se intitulează test. Apoi, în al doilea tabel, cel intitulat test2 am „contopit” din primul rând coloanele 1 și 2, introducând parametrul colspan=”2”, după cum se vede, în cadrul primei căsuțe a tabelului. Atenție, pentru a păstra forma tabelului și a nu obține bazaconii trebuie să ștergeți o căsuță, eu am șters-o pe ultima din rândul I și am pierdut căsuța cu valoarea 4. Observați în codul ce va urma.

În tabelul test3, prin introducerea parametrului rowspan=”2” am contopit căsuțele aferente coloanei I din rândurile IV și V. Tot din rațiunea de a păstra tabelul în formă cuviincioasă am șters o căsuță, prima din ultimul rând, astfel că am pierdut pe cea cu valoarea 17.

Vă rog să rețineți că valorile de la 1 la 20 sunt date doar cu caracter demonstrativ, pentru a fi vizibile transformările prin intermediul atributului span. Important să rețineți că dacă folosiți rowspan sau colspan pierdeți căsuțe și măriți dimensiunea uneia singure. Evident, puteți să contopiți toate de pe un rând sau de pe o coloană. De exemplu, dacă doriți ca primul rând să fie unul uriaș de mare, ceva cam în genul unui cap de tabel, în cazul nostru veți scrie rowspan=”4”. E simplu, trebuie doar să vă acomodați…

codul paginii test:

<!DOCTYPE html PUBLIC „-//W3C//DTD HTML 4.01//EN” „http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta content=”text/html; charset=ISO-8859-1″ http-equiv=”content-type”>
<title>test</title>
</head>
<body>
<table style=”text-align: left; width: 800px;” border=”1″ cellpadding=”2″ cellspacing=”2″><tbody>
<tr align=”center”>
<td valign=”top”>1</td>
<td valign=”top”>2</td>
<td valign=”top”>3</td>
<td valign=”top”>4</td>
</tr>
<tr align=”center”>
<td valign=”top”>5</td>
<td valign=”top”>6</td>
<td valign=”top”>7</td>
<td valign=”top”>8</td>
</tr>
<tr align=”center”>
<td valign=”top”>9</td>
<td valign=”top”>10</td>
<td valign=”top”>11</td>
<td valign=”top”>12</td>
</tr>
<tr align=”center”>
<td valign=”top”>13</td>
<td valign=”top”>14</td>
<td valign=”top”>15</td>
<td valign=”top”>16</td>
</tr>
<tr align=”center”>
<td valign=”top”>17</td>
<td valign=”top”>18</td>
<td valign=”top”>19</td>
<td valign=”top”>20</td>
</tr>
</tbody>
</table>
<br>
</body>
</html>

codul test2

<!DOCTYPE html PUBLIC „-//W3C//DTD HTML 4.01//EN” „http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta content=”text/html; charset=ISO-8859-1″ http-equiv=”content-type”><title>test2</title>
</head>
<body><table style=”text-align: left; width: 800px;” border=”1″ cellpadding=”2″ cellspacing=”2″>
<tbody>
<tr align=”center”>
<td colspan=”2″ valign=”top”>1</td>
<td valign=”top”>2</td>
<td valign=”top”>3</td>
</tr>
<tr align=”center”>
<td valign=”top”>5</td>
<td valign=”top”>6</td>
<td valign=”top”>7</td>
<td valign=”top”>8</td>
</tr>
<tr align=”center”>
<td valign=”top”>9</td>
<td valign=”top”>10</td>
<td valign=”top”>11</td>
<td valign=”top”>12</td>
</tr>
<tr align=”center”>
<td valign=”top”>13</td>
<td valign=”top”>14</td>
<td valign=”top”>15</td>
<td valign=”top”>16</td>
</tr>
<tr align=”center”>
<td valign=”top”>17</td>
<td valign=”top”>18</td>
<td valign=”top”>19</td>
<td valign=”top”>20</td>
</tr>
</tbody>
</table>
<br>
</body>
</html>

codul test3

<!DOCTYPE html PUBLIC „-//W3C//DTD HTML 4.01//EN” „http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta content=”text/html; charset=ISO-8859-1″ http-equiv=”content-type”><title>test3</title>
</head>
<body>
<table style=”text-align: left; width: 800px;” border=”1″ cellpadding=”2″ cellspacing=”2″><tbody>
<tr align=”center”>
<td valign=”top”>1</td>
<td valign=”top”>2</td>
<td valign=”top”>3</td>
<td valign=”top”>4</td>
</tr>
<tr align=”center”>
<td valign=”top”>5</td>
<td valign=”top”>6</td>
<td valign=”top”>7</td>
<td valign=”top”>8</td>
</tr>
<tr align=”center”>
<td valign=”top”>9</td>
<td valign=”top”>10</td>
<td valign=”top”>11</td>
<td valign=”top”>12</td>
</tr>
<tr align=”center”>
<td rowspan=”2″ valign=”top”>13</td>
<td valign=”top”>14</td>
<td valign=”top”>15</td>
<td valign=”top”>16</td>
</tr>
<tr align=”center”>
<td valign=”top”>18</td>
<td valign=”top”>19</td>
<td valign=”top”>20</td>
</tr>
</tbody>
</table>
<br>
</body>
</html>

În continuare vom face o pagină de contact pentru site-ul nostru demonstrativ. Dacă vă amintiți pagina contact a fost făcută din slavarea sub numele de contact.html a paginii index.html. Vom folosi atributul colspan=”3” pentru a contopi celulele din coloana din dreapta. Am introdus o hartă (oarecare) si am folosit butonul de introducere a link-urilor din programul KompoZer, specificând că e vorba de o adresă de e-mail.