[Web Development] Modulul IV - Tabelele, formularele și informațiile de pe pagină

Salut,

De acestă dată o să vă prezint cel de-al 4-lea modul din micul plan, și anume, "Tabelele, formularele si informatiile de pe pagina" !

Vom incepe cu Tabelele

 

Structura tabelului

     Există mai multe tipuri de date care sunt mai uşor de reprezentat sub formă de tabel decât sub formă de text. De exemplu, rezultatele sportive, rapoartele financiare, orarele şi multe alte informaţii de pe site-uri sunt mai uşor de reprezentat prin tabele.

    În limbajul HTML, tabelele sunt alcătuite din celule, pe care le marcăm cu td (table data), şi din rânduri, pe care le marcăm cu tr (table row) - acestea sunt conținute în cadrul tag-ului table, care înconjoară totul. Observați imaginea de mai jos pentru a înțelege mai bine:

Aceasta este reprezentarea unui tabel cu trei rânduri şi patru coloane, în total 12 celule. În imagine, este marcată şi ordinea în care sunt aranjate celulele. Când scriem tabele în limbajul HTML, trebuie să respectăm următorii paşi:

1. Deschidem tag-ul <table>
2. Deschidem rândul tabelului <tr>
3. Scriem toate celulele <td>, în acest caz - patru
4. Închidem rândul actual <tr>
5. Deschidem următorul rând <tr>
6. Scriem toate celulele <td>

În cod, un astfel de tabel ar arăta astfel:

<table width="600" border="1"> // atributul 'border' - este pentru grosimea liniei tabelului
  <tr>
    <th>*</th>
    <th>monday</th>
    <th>tuesday</th>
    <th>wednesday</th>
    <th>thursday</th>
    <th>friday</th>
  </tr>
  <tr>
    <th>morning</th>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <th>evening</th>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>

 

Atributele td

       Unirea pe orizontală

Dacă trebuie să unim anumite celule ale tabelului pe orizontală, pe prima celulă care trebuie unită vom pune atributul colspan, în care definim peste câte celule trebuie să se extindă.

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>

    Însă, dacă vrem să unim celulele 4 şi 5, atunci trebuie să adăugăm atributul colspan cu valoarea 2 (deoarece unim două celule) și, de asemenea, trebuie să eliminăm întregul tag <td> al celulei 5. 

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td colspan="2">4</td>
    <td>6</td>
  </tr>
</table><span style="font-size: 14px;"> </span>

 

 

  Unirea pe verticală

Dacă vrem să unim celulele pe verticală, utilizăm o tehnică similară celei prin care realizăm unirea pe orizontală, numai că în acest caz atributul este rowspan, în loc de colspan.

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>

Dacă schimbăm codul, arata astfel:

<table>
  <tr>
    <td rowspan="2">1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>5</td>
    <td>6</td>
  </tr>
</table>

 

Tabelele lungi

Dacă avem nevoie de tabele foarte lungi sau complicate, putem ramifica părțile <head>, <body> şi <footer> ale tabelului. Termenii ne reamintesc de anumite părţi ale documentului HTML, însă similitudinea nu este foarte mare.

1. Tag-ul <thead> se foloseşte pentru a marca antetele tabelului.
2. Tag-ul <tbody> se foloseşte pentru a introduce rândurile şi celulele obișnuite.
3. Tag-ul <tfoot> se foloseşte pentru a marca partea de jos a tabelului. 

 

Iată cum arată în cod:

<table>
   <thead>
    <tr>
      <td>celula părţii head</td>
    </tr>
    <tr>
      <td>celula părţii head</td>
    </tr>
   </thead>
   <tfoot>
    <tr>
      <td>celula părţii footer</td>
    </tr>
 	<tr>
      <td>celula părţii footer</td>
    </tr>
   </tfoot>
   <tbody>
    <tr>
      <td>celula părţii body</td>
    </tr>
    <tr>
      <td>celula părţii body</td>
    </tr>
   </tbody>
</table>

 

Bazele formularelor

 

   Formularele în sine nu au nicio funcţionalitate, ci reprezintă doar un tip de şablon pentru colectarea informaţiilor. Când utilizatorul completează un formular de pe un site, datele colectate sunt transmise până la script-urile de pe o altă pagină, care va finaliza activitatea de colectare a datelor.

  Pagina contact.html conţine un formular în care utilizatorul introduce datele şi un mesaj. După ce utilizatorul trimite formularul, acesta apelează pagina contact_send.php, pe care se află un script, care procesează datele colectate şi le trimite prin e-mail la adresa indicată. Script-ul poate trimite e-mailuri, poate scrie/citi datele din baza de date sau poate face alte lucruri definite. 

        Tag-ul form

Baza formularului web este tag-ul form. Acesta este doar un simplu element HTML cu atribute şi subelemente caracteristice. Astfel, în el introducem tot ceea ce vrem să trimitem serverului prin formularul respectiv. Fiecare formular (<form>) recunoaşte evenimentul submit. Acesta activează formularul şi transferă valorile acestuia către server.

Tag-ul se scrie foarte simplu:

<form></form>

Totuşi, acest lucru nu este suficient pentru început. Fiecare formular trebuie să aibă următoarele atribute:

• Action
• Method
• ID

   Action

Fiecare formular conţine atributul action care indică script-urile la care vor fi transferate datele. În exemplul de mai sus, era vorba de pagina contact_send.php. Observăm că pagina-ţintă este de tip .php. Acest lucru este frecvent (.php, .asp, .jsp) deoarece procesarea parametrilor de server se poate efectua doar din script-urile de pe server. În cazul în care nu vrem să transmitem parametri către server, nu avem nevoie de formular.

Dacă omitem acest atribut, browser-ul va subînţelege că aceeaşi pagină care conține formularul va procesa și datele.

  Method

Atributul method defineşte modul în care vor fi transmise datele. Există două opţiuni, şi anume:

• metoda GET - datele din formular sunt trimise serverului printr-un URL. Informaţiile transmise în acest mod sunt transparente şi supuse atacurilor din partea hackerilor. Deoarece un URL poate avea cel mult 8.192 de caractere, această metodă nu este adecvată pentru formulare mai lungi. De asemenea, putem ajunge la transliteraţie sau transcripţie, iar unele caractere se pot modifica sau pierde pe parcurs.

• metoda POST - această metodă împachetează datele formularului în cadrul cererii HTTP. Datele nu sunt codificate şi de aceea (deşi sunt mai sigure decât în cazul metodei GET) sunt supuse atacurilor din partea hackerilor. Aşadar, în cazul în care colectăm informaţii personale, precum nume de utilizator, parole sau numere de carduri de credit, trebuie să asigurăm o conexiune mai sigură până la un server sigur.

  Name şi ID

• ID-ul se foloseşte pentru determinarea unică a elementului HTML pe o pagină în Document Object Model (prin JavaScript sau pentru stilizare prin CSS). ID-ul trebuie să fie unic.
• Name determină numele formularului. 

   Inserarea unui formular

Având în vedere toate cele menţionate mai sus, codul formularului nostru poate avea aspectul următor:

<form action="script.php" method="POST" name="formular_exemplu" id="formular_exemplu">
	// some cods
</form>

 

Controalele formularului

    Input (text)

Tag-ul pe care îl întâlnim cel mai des în formulare este <input>. Acesta este un tag cu autoînchidere, deoarece toţi parametrii lui sunt setați prin atribute. Acelaşi tag se foloseşte pentru mai multe controale diferite, însă este determinat de atributul type obligatoriu. Prin urmare, dacă vrem să introducem un câmp text simplu, vom introduce tag-ul input cu atributul type="text":

<input type="text" name="color" id="color">

Mai putem adăuga și atributul maxlength, cu care determinăm numărul maxim de caractere. De exemplu, dacă vrem să limităm numărul posibil de caractere la 4, vom adăuga maxlength="4"

<label for="color">color</label>
<input type="text" name="color" id="color">

Fără tag-ul label adăugat, s-ar fi afişat doar câmpul fără textul din stânga lui. Tag-ul label nu trebuie să se afle imediat înainte de tag-ul input, însă de cele mai multe ori îl găsim în această poziție. Important este faptul că label posedă atributul for, care îl leagă de un anumit input. Atributul for al tag-ului input trebuie să fie același ca şi atributul ID al tag-ului input (sau al unui alt tag).

 

Input (password)

Tag-ul input se foloseşte tot pentru introducerea parolei (password). În acest caz, atributul type este adăugat pe password. Toate celelalte atribute sunt la fel ca și în cazul textului input.

<input type="password" name="pass" id="pass">

 

  Textarea

Acest tag creează un câmp textual ceva mai mare, care poate susţine și mai multe rânduri de text. Spre deosebire de câmpul input, textarea nu este un tag cu autoînchidere, aşadar necesită un început şi un sfârşit. Între acestea, se introduce textul care se va afişa în control după încărcarea paginii.

<textarea name="description" id="description">Lorem ipsum dolor sit amet.</textarea>

 

  Radio buttons (Butoanele radio)

Butonul radio este un control destul de diferit din punct de vedere vizual față de controalele menţionate mai devreme, însă şi acesta se bazează pe tag-ul input. 

<input name="country" type="radio" id="Serbia" value="Serbia" checked="checked">
<label for="Serbia">Serbia</label>
	<br>
<input name="country" type="radio" id="Romania" value="Romania">
<label for="Romania">Romania</label>
	<br>
<input name="country" type="radio" id="Ukraine" value="Ukraine">
<label for="Ukraine">Ukraine</label>

Dacă vrem ca, pe măsură ce pagina se încarcă, să fie indicată o valoare, vom adăuga atributul checked="checked" pe tag-ul ei input. Valoarea este întotdeauna aceeaşi. Putem adăuga acest atribut doar pe un input radio din grup.

 

  Câmpurile Checkbox 

Acest control este foarte similar cu controlul radio, însă se deosebeşte prin faptul că utilizatorul poate selecta mai multe valori în acelaşi grup.

<input name="country" type="checkbox" id="Serbia" value="Serbia" checked="checked">
<label for="Serbia">Serbia</label>
	<br>
<input name="country" type="checkbox" id="Romania" value="Romania">
<label for="Romania">Romania</label>
	<br>
<input name="country"type="checkbox"  id="Ukraine" value="Ukraine">
<label for="Ukraine">Ukraine</label>

După cum putem vedea, totul este identic, doar atributul type este modificat. Astfel, am activat alegerea multiplă, unde valorile nu se anulează reciproc. Restul rămâne la fel ca în cazul butoanelor radio.

 

  Select (dropdown)

Acest control permite utilizatorului să selecteze o valoare din meniul dropdown (derulant):

<select name="country" id="country">
	<option value="Serbia">Serbia</option>
    	<option value="Romania" selected="selected">Romania</option>
    	<option value="Ukraine">Ukraine</option>
</select>

La fel ca şi unele controale anterioare, putem alege valoarea care trebuie selectată în momentul încărcării paginii. În acest caz, putem adăuga atributul şi valoarea selected="selected" la opţiunea dorită (în exemplu, a fost adăugată celei de-a doua opţiuni - "Romania").

 

  Incărcarea fişierului

Controlul care asigură încărcarea fişierelor prin intermediul formularelor este din nou input type (type="file"😞

<input type="file" name="CV" id="CV">

Dacă folosim acest control, formularul trebuie să aibă metoda setată la POST, precum şi un enctype-ul: multipart/form-data

 

  Butonul submit 

Butonul submit, respectiv controlul submit, cum este mai corect, se foloseşte pentru a trimite formulare şi date introduse unui server, unde vor fi procesate. Din nou se foloseşte bine cunoscutul input, dar cu atributul type setat la submit:

<input type="submit" name="submit" id="submit" value="Finish">

 

  Fieldset şi legend

Dacă vrem să încadrăm o parte din formular şi să-i adăugăm un anumit titlu, putem face acest lucru cu ajutorul tag-ului fieldset cu care încadrăm toate controalele pe care le selectăm. Putem adăuga tag-ul legend imediat după ce deschidem tag-ul fieldset. În continuare, avem următorul exemplu:

<fieldset>
   <legend>Contact</legend>
      <label>Email:<br>
		<input type="text" name="email">
	  </label><br>
      <label>Phone:<br>
   		<input type="text" name="phone">
      </label>
</fieldset>

 

Meta tag-urile

 

Tag-urile <meta> se inserează în partea head a paginii, iar rolul lor este să ofere informaţii suplimentare despre pagina pe care se află. 

Totuşi, aceste informaţii nu sunt vizibile utilizatorului la prima vedere. Deoarece se află în partea head a paginii, nu apar în browser. Aceste informaţii sunt utilizate doar de browser-e pentru o afişare corectă şi de motoarele de căutare (Google și altele) pentru indexarea paginilor. De exemplu, cu un meta tag putem să definim enconding-ul paginii, aspect important pentru browser în ceea ce priveşte afişarea corectă a textelor. Cu ajutorul acestor tag-uri, putem introduce şi descrierea paginii, pe care o va folosi Google în momentul indexării paginii.

Tag-ul <meta> este unul cu autoînchidere, deci nu are început şi sfârşit, iar toate informaţiile se află în cadrul atributelor de pe tag.

Este important de menţionat că pentru toate meta tag-urile se utilizează practic acelaşi tag - <meta>-, însă cu atribute diferite. Totuşi, nu putem combina mai multe atribute diferite într-un rând. Trebuie să deschidem un tag <meta> nou. Pentru a clarifica acest lucru, vom analiza următorul exemplu: 

<!DOCTYPE html>
<html>
<head>
  <title>Titlul paginii</title>
	<meta name="description" content="Exemplul paginii pentru meta tag-uri">
	<meta name="keywords" content="HTML, Meta, HTML5, xHTML, lectie">
	<meta name="author" content="Beny">
</head>

  Tag-ul Title 

Deşi nu face parte dintr-un meta tag real, tag-ul title al paginii este deseori inclus în această categorie (nu foloseşte meta, ci propriul său tag title). 

Ne-am întâlnit deja cu el la începutul cursului. În el, introducem titlul paginii, care este foarte important pentru motoare de căutare.

 

Opinia expertului SEO despre meta tag-uri

Meta tag-urile, care se află în antetul paginii HTML, poate nu au un rol important atunci când utilizatorul vizualizează un site, însă funcţia lor capătă o importanţă foarte mare pe pagina cu rezultatele căutării. Prin urmare, prin introducerea cuvintelor-cheie în motorul de căutare şi prin listarea rezultatelor căutării, toate site-urile sunt prezentate prin trei elemente standard: titlu, o scurtă descriere şi adresele URL.

            Titlul afişat reprezintă, de fapt, conţinutul aflat în tag-ul Meta Title. Dacă Meta Title al nostru conţine cuvintele-cheie pe care le-a introdus utilizatorul, ele vor fi marcate cu un font bolduit, ceea ce va evidenţia site-ul nostru ca fiind o sursă relevantă de informaţii pentru utilizator. Cele mai bune rezultate se obțin folosind tag-ul Meta Title, cu o lungime totală de până la 70 de caractere şi cu un conţinut de cuvinte-cheie în forma în care utilizatorii le introduc în câmpul de căutare.

            Bineînţeles, motorul de căutare preia următorul principiu similar, conţinutul descrierii paginii din tag-ul Meta Description. Valoarea tag-ului Meta Description nu se află în cuvintele-cheie. De fapt, s-a confirmat faptul că pagina noastră nu va avea o poziţie mai bună dacă tag-ul Meta Description conţine cuvintele-cheie dorite. Adevărata valoare a tag-ului Meta Description stă în abilitatea de a influența acţiunea utilizatorului. Având în vedere că motorul de căutare ne oferă opţiunea de a ne prezenta printr-o singură propoziție, ar trebui să o utilizăm la maxim și să-i afişăm utilizatorului ceea ce poate obţine de la pagina noastră, trebuie să menţionăm avantajele pe care le oferim şi să-i dăm un motiv să ne aleagă tocmai pe noi dintre toate site-urile listate.

SEO este o ştiinţă de sine stătătoare.