Programare web

Tutorial HTML:Partea a patra – Tabele și liste

Și am ajuns acum la ultima parte a seriei de tutoriale HTML, parte în care vom vorbi despre tabele si liste. Veți vedea că, pe masură ce avansați în CSS, veți putea modfica în totalitate un element transformându-l în ceva cu totul nou. De exemplu listele vor  putea deveni meniuri, iar tabelele elemente de structură ( similare div-urilor, dar se vor utiliza ca atare numai când veți avea EmailTemplates – niciodată nu am înțeles asta, dar se pare că e vorba de tradiție).

Tabele

În perioada lui de glorie, <table> se utiliza pentru a crea elemente de structură, dar de la introducerea tagului div și mai pe urmă a tag-urilor <section>, <header>, <footer> ș.a. <table> a redevenit ceea ce trebuia să fie de la început…o chestie pentru tabele și atât. Nestilat, tag-ul <table> seamănă tare mult cu default table din Excel. Stilat însă poți face chestii faine.

<table>
<thead>
<tr>
<th>ThemeForest</th>
<th>GraphicRiver</th>
<th>CodeCanyon</th>
<th>VideoHive</th>
</tr>
</thead>
<tbody>
<tr>
<td>Example</td>
<td>Table</td>
<td>Themes</td>
<td>United</td>
</tr>
<tr>
<td>United</td>
<td>Themes</td>
<td>Table</td>
<td>Example</td>
</tr>
<tr>
<td>Table</td>
<td>United</td>
<td>Example</td>
<td>Themes</td>
</tr>
<tr>
<td>Themes</td>
<td>Example</td>
<td>United</td>
<td>Table</td>
</tr>
<tr>
<td>Table</td>
<td>United</td>
<td>Example</td>
<td>Themes</td>
</tr>
</tbody>
</table>

Rezultatul codului de mai sus:

Tagul <table> marchează începutul unui tabel. Apoi <thead> se utilizează cu <th>(table heading) pentru a crea titlurile fiecărei coloane. Este bine ca atunci când adaugi un thead să ai același număr de taguri th ca cele td dintr-un tr. Tagul <tbody> marchează începutul conținutului în tabel. Tagul <tr> înseamna table rows, iar cel <td> table data. De exemplu, codul de mai jos produce un tabel cu 3 rânduri și 3 coloane.

<tr>
     <td></td> 
     <td></td>
</tr>
<tr>
     <td></td> 
     <td></td>
</tr>
<tr>
     <td></td> 
     <td></td>
</tr>

 

Listele – ordonate si neordonate

Listele sunt printre cele mai importante elemente din HTML. Fie că vorbim de un meniu, de o succesiune de idei sau pur și simplu de lista cu produse pentru o rețeta folosim în esență aceleași elemente, dar sub un aspect diferit. Au o anumită importanță și în SEO, oferind un plus în PageRank când sunt utilizate corespunzător.

<h3>Activitati interesante</h3>
<ul>
	<li>Sa faci un website</li>
	<li>Sa creezi liste in HTML</li>
	<li>Sa te uiti si la alte tutoriale</li>
	<li>Sa creezi un meniu cu o lista</li>
</ul>
<h3>Cele mai interesante activitati</h3>
<ol>
	<li>Sa creezi un website</li>
	<li>Sa inveti bazele in webdesign</li>
	<li>Sa ai imaginatie/inspiratie</li>
	<li>Sa creezi un meniu cu o lista</li>
</ol>

Rezultatul codului ar fi:

Listele ordonate si neordonate
În HTML avem 2 tipuri de liste, ordonate, respectiv neordonate. Listele neordonate se marchează prin tagul <ul>(unordered list), iar cele ordonate prin tagul <ol>(ordered list). Conținutul listelor este compus din mai multe idei, obiecte etc. și pentru a crea aceste “idei” se utilizează tagul <li>(list item).Nu este necesar ca listele să conțină numai conținut. Pot conține și linkuri sau imagini sau chiar alte liste. În exemplul de mai jos puteți vedea o lista în alta listă.

<ul>
    <li>Matematica este necesara si in:
        <ul>
	    <li>Fizica</li>
	    <li>Chimie</li>
	    <li>Biologie</li>
        </ul>
    </li>
    <li>Romana este foarte importanta</li>
    <li>E bine sa stii in general</li>
</ul>

Iar rezultatul va fi:

Aici se încheie și seria noastră de tutoriale HTML, la liste. Ar mai fi multe lucruri interesante ca formularele HTML, dar acestea sunt irelevante dacă nu cunoști și un limbaj de programare ca PHP sau ASP.De acum încolo poți să înveți CSS, să îți creezi primele website-uri adevărate și desigur HTML5.

Write A Comment