Site simplu cu HTML5 – partea IV


Si iata-ne ajunsi la ultima parte din seria „Site simplu cu HTML5”. Dupa cum vom vedea, codul HTML nu este suficient pentru un site. Vom avea nevoie de limbajul de scriptare pe partea de server PHP si de ajutorul CSS (Cascading Style Sheets) pentru a-l face sa arate „a site”. Va intrebati de ce ultima parte? Pentru ca pe baza acestui mic model de site, vor urma diferite articole pentru imbunatatirea siteului, imbunatatiri de design, de functionalitate etc. si nu puteam continua cu „parti”, pentru simplul fapt ca se vor aduna prea multe :).
In acest articol vom construi pagina contact.html. Aceasta va fi facuta aproape la fel ca pagina despre-noi.html. Deschidem fisierul despre-noi.html si il salvam in directorul radacina cu denumirea contact.html. Structura de directoare va arata astfel:

Structura directoare contact.html

Structura directoare contact.html

Acum va propun un exercitiu: pe baza imaginii pagii contact.html de mai jos, faceti dvs. modificarile in codul html al paginii contact.html (care in acest moment are de fapt codul paginii despre-noi.html) Interiorul blocului <div class=”continut”></div> lasati-l gol.

Pagina contact.html

Pagina contact.html

Ati reusit? Daca da, FELICITARI, daca nu, aici este codul corect.
Acum sa ne ocupam si de blocul <div class=”continut”></div>. Continutul acestuia va afisa cu ajutorul CSS iconuri cu link-uri catre facebook, twitter, aplicatia cu ajutorul caruia cititi mailul si pentru cei care acceseaza siteul cu un telefon, sa poata accesa direct numarul de telefon actionand iconul telefon.
Putem face aceasta in mai multe feluri, dar, datorita faptului ca pana acum nu am vorbit despre tabele, am zis sa afisam continutul  cu ajutorul unui tabel.
In vremurile de demult, pierdute in negura timpului, siteurile se faceau in principal cu tabele. Acum tabelele, se folosesc mult mai rar, doar acolo cand avem de afisat ceva sistematic, clar.
Cum formam tabelul in html? Simplu, cu etichetele <table></table>. In interiorul tabelului putem defini capetele de tabel cu etichetele <th></th> (nu este obligatoriu), dar, trebuie mai intai sa definim un rand cu ajutorul etichetelor <tr></tr>.In urmatoarele randuri ale tabelului includem si celulele tabelului cu ajutorul etichetelor <td></td>. Pentru ca chenarul sa fie vizibil, trebuie setat atributul border:


<table border="1">
<tr>
<th>Cap tabel 1</th>
<th>Cap tabel 2</th>
</tr>
<tr>
<td>celula 1</td>
<td>celula 2</td>
</tr>
</table>

Executarea acestui cod, are rezultatul urmator:

Exemplu tabel

Exemplu tabel

Daca nu specificam atributul border, nu era vizibil chenarul tabelului si celulele. Nu o sa intru in detalii despre tabele, stilizarea o vom lasa in seama CSS. Dupa cum ati observat, lucram cu HTML-ul de baza, iar felul cum va arata siteul va fi realizat cu ajutorul CSS.

In blocul <div class=”continut”></div> vom introduce urmatorul cod:

<table>
<tr>
<td id="facebook">
<a href="link catre pagina de facebook" title="facebook" rel="nofollow" target="_blank"></a>
</td>
<td id="twitter">
<a href="link catre pagina de twitter" title="twitter" rel="nofollow" target="_blank"></a>
</td>
<td id="mail">
<a href="mailto:adresa de email" title="email" rel="nofollow" target="_blank"></a>
</td>
<td id="telefon">
<a href="tel:numar de telefon fara pauza sau puncte" title="telefon" rel="nofollow" target="_blank"></a>
</td>
</tr>
<tr>
<td>
<a href="link catre pagina de facebook" title="facebook" rel="nofollow" target="_blank">Facebook</a>
</td>
<td>
<a href="link catre pagina de twitter" title="twitter" rel="nofollow" target="_blank">Twitter</a>
</td>
<td>
<a href="mailto:adresa de email" title="email" rel="nofollow" target="_blank">Email</a>
</td>
<td>
<a href="tel:numar de telefon fara pauza sau puncte" title="telefon" rel="nofollow" target="_blank">Telefon</a>
</td>
</tr>
</table>

Acum pagina noastra contact.html va arata astfel:

imagine pagina contact 2

Pagina contact.html

Au aparut link-urile catre retelele de socializare. Poate va intrebati ce este cu target=”_blank”. Introducerea atributului target cu valoarea _blank are ca efect deschiderea unui nou tab atunci cand dam click pe link, astfel, tabul cu site-ul nostru ramanand deschis. Am mai introdus si atributul rel cu valoarea nofollow. Aceasta valoare transmite motorului de cautare google ca nu ar trebui sa urmeze link-ul, ceea ce inseamna ca „search spider-ul” nu ne va parasi site-ul ci il va indexa in continuare (este bine d.p.d.v. SEO – Search Engine Optimization).
Avem acum pe pagina contact.html doar link-uri catre paginile de socializare. In header avem adresa noastra de email si numarul de telefon. Intr-un articol viitor vom introduce pe aceasta pagina localizarea noastra pe o harta google si un formular pentru ca vizitatorii nostrii sa ne poata trimite direct email-uri. Pana atunci insa, urmatorul articol va aduce o imbunatatire estetica a acestui site – vom invata cum sa ne folosim de CSS pentru a face site-ul nostru mai atractiv. Sper sa am timp mai mult pentru viitoarele postari. Pe curand!

Anunțuri