Favicon și tabele în web design

Favicon

Un favicon este un tip special de imagine. Este mica pictogramă care însoțește titlul paginii în titlul și fila browserului. Această pictogramă este utilizată automat în fiecare pagină găsită în dosarul în care este stocată faviconul. De exemplu, pentru a aplica o singură pictogramă întregului site, o plasați în folderul rădăcină. Orice foldere sub acel nivel pot folosi un alt favicon.

Aceste pictograme sunt de obicei imagini de 32 x 32 pixeli care reprezintă site-ul sau compania-mamă a site-ului. Acestea sunt convertite într-un format special și salvate cu extensia .ico pentru a se identifica drept pictograme (iconuri) de site. Deși sunt mici și oferă puțin experienței vizuale generale a unui site web, site-urile fără favicon tind să pară mai puțin legitime, deoarece spațiul pictogramei va fi înlocuit cu pictograma implicită a browserului.

Crearea faviconurilor se poate face în software-ul de editare imagini care vă permite să respectați limitele de dimensiune și densitate de culoare ale faviconurilor. În plus, site-uri precum favicon-generator.org sau www.favicon.cc, printre altele, pot ajuta la convertirea imaginilor existente în faviconuri cu câteva opțiuni de editare de bază înainte de a salva noile pictograme.

Tabele

Tabelele, în web design, sunt o metodă de formatare a conținutului paginii dvs. și sunt foarte asemănătoare cu conceptul de foi de calcul. Tabelele sunt compuse din rânduri și coloane. Fiecare intersecție a celor două este denumită o celulă și este locul unde este plasat conținutul. Numărul de coloane și rânduri pe care le utilizați depinde de nevoile și designul dvs.

Probabil veți găsi un număr mare de site-uri care se bazează în mare măsură pe tabele pentru a crea aspectul paginilor lor. Recunoscând că am admis deja că am făcut acest lucru în trecut când era necesar, voi repeta afirmația mea anterioară: Vă rog, nu faceți asta.

Deși aceasta era o metodă comună în trecut, acum avem elemente în HTML care sunt definite în astfel de scopuri. Tabelele ar trebui rezervate pentru a crea colecții de date sau informații pe pagina dvs. și nimic altceva. Dacă le folosiți pentru a stoca informații, altele decât cele pe care le-ați face într-o foaie de calcul, ar trebui să utilizați un div sau un span. Folosirea unui tabel pentru organizarea conținutului va crea mai multe complicații în codul dvs. care pot fi reduse sau eliminate respectând convențiile de astăzi.

(Structura tabelului (Schema straturilor de tabel CSS)).

În primul rând, formatarea tabelului este mai strâns legată de HTML, deoarece este mai ușor de definit acolo decât în ​​CSS. Plasarea acestor definiții în HTML-ul nostru încalcă obiectivul nostru de separare a sarcinilor pentru a sprijini un design responsiv. Dacă dorim să schimbăm aspectul, ar trebui să edităm HTML în loc de doar fișierele CSS. În al doilea rând, creează linii de cod suplimentare pentru a defini aspectul pe care îl căutăm, iar utilizarea coloanelor și a div-urilor sau a span-urilor pentru a ajusta diferite aspecte este greoaie când vine vorba de întreținerea și lizibilitatea codului. În cele din urmă, pierdem o mare parte din capacitatea noastră de a ne reorganiza conținutul în mai multe moduri atunci când folosim mai multe stiluri CSS. Aceasta înseamnă că rearanjarea conținutului într-un tabel atunci când dorim să tipărim sau să vedem conținutul într-un mod diferit este mai dificilă sau ar necesita o pagină complet diferită.

Pentru a crea un tabel, trebuie mai întâi să-i definim începutul și sfârșitul cu etichete: <table></table>

În continuare, ne putem defini rândul de antet adăugând etichetele noastre de rând (tr) și imbricarea etichetelor de împărțire pentru a reprezenta coloanele noastre. Deoarece dorim ca elementele din acest rând să fie recunoscute ca titluri, folosim eticheta <th> pentru antetul tabelului:

<table>
<tr>
<th>ID</th><th>Prenume</th><th>Nume</th>
</tr>
</table>

ID	Prenume	Nume

* Liniile de chenar punctate din exemplele de tabel descriu marginile tabelelor și celulelor care nu ar fi vizibile fără cod suplimentar sau CSS.

Pentru a adăuga conținut la tabelul nostru, repetăm ​​procesul folosind <td> (pentru divizarea tabelului) în loc de <th> pentru a reprezenta o celulă obișnuită de date. Fiecare repetare va adăuga un nou rând de date în tabelul nostru.

Pentru a construi pe exemplul nostru, vom lăsa prima coloană să fie titluri, care vor reprezenta fiecare rând. Pentru a face acest lucru, folosim <th> ca primul set de etichete din fiecare rând. Putem adăuga câteva nume ca un conținut obișnuit folosind, de asemenea, etichete de împărțire a tabelelor

<table>
<tr>
<th>ID</th><th>Prenume</th><th>Nume</th>
</tr>
<tr>
<th>1</th><td>Ion</td><td>Ionescu</td>
</tr>
<tr>
<th>2</th><td>Maria</td><td>Marinescu</td>
</tr>
</table>

ID	Prenume	Nume
1	Ion	Ionescu
2	Maria	Marinescu

Sursa: Michael Mendez, The Missing Link – An Introduction to Web Development and Programming (CC BY-NC-SA 3.0 License), Published by Open SUNY Textbooks, Milne Library (IITG PI), State University of New York at Geneseo. Traducere de Nicolae Sfetcu