Informatica , SEO , Optimizare , HTML , pagini web , Internet

sâmbătă, 22 septembrie 2012

Butoane HTML

Butoanele, ca si campurile sunt definite prin intermediul marcajului <input />

Buton:
<input type="button" /> defineste un buton

Butonul Reset:
<input type="reset" /> defineste un buton de tip reset. El are menirea de a goli toate campurile unui formular.

Pentru functionarea corecta, butonul reset trebuie sa fie inclus intr-un formular.

<form>
<input type="text"/>
<input type="reset" />
</form>

Butonul Submit:
<input type="submit" /> defineste un buton de tip submit. Butonul submit trebui sa fie inclus intr-un formular pentru ca sa fie functional. El are menirea de a trimite toate datele dintr-un formular la server.

<form method="GET" action="http://w3schools.com/html/html_form_action.asp">

<input type="text" name="user"/>
<input type="submit" value="Submit"/>
</form>


  Ce să mai citim?
Ce să mai citim?
Tatăl fondator al Uniunii Europene.            
Colonizarea de pe Marte !
  Ne pregătim pentru Marte
Colonizarea Marte poate determina umanitatea să-și modifice ADN-ul ?
Cine mai urăște să poarte mască?

Text fields

Campuri (Text fields)

1. Text

2. Password

3. File

Campurile reprezinta niste controale care au menirea de a prelua de la utilizator date, care ulterior sa fie prelucrate.

Definirea unui camp se face prin intermediului marcajului <input />: <input type="text" name="email"/>

Atributul type determina tipul campului, si poate lua valorile: "text", "password" si "file", pentru definirea unui camp de tip text, parola si respectiv fisier, asa dupa cum se vede in exemplele 1, 2 si 3 aratate mai sus.

Formulare in HTML

Avertisment Chrome -Conexiunea la acest site

nu este sigură

Cui îi este adresat, ce înseamnă avertismentul de securitate, și care este scopul acestuia?

Google dorește să atragă atenția atât utilizatorilor, cât și web developerilor și proprietarilor de website-uri, pentru scopuri diferite:

utilizatorii trebuie să fie informați cu privire la faptul că site-ul pe care navighează nu este securizat, conexiunea nu este privată, ceea ce înseamnă că datele transmise de ei către website prin protocolul HTTP ar putea fi interceptate de persoane neautorizate în timpul transferului. De aceea, Google menționează în avertisment: „Nu ar trebui să introduci informații sensibile pe acest site(de exemplu, parole sau carduri de credit), deoarece ar putea fi furate de atacatori. Iată o captură de ecran a avertismentului pe mobil .

Dacă dorești să descoperi cum arată avertismentul de securitate de la Google pentru website-ul tău pe mobil, accesează opțiunile navigatorului Chrome .

web developerii vor fi nevoiți să se adapteze la noile condiții, adică cei care utilizează în prezent protocolul HTTP vor renunța la el vor implementa protocolul HTTPS, prin care datele trimise de utilizator către website sunt encriptate. Această schimbare nu este obligatorie, însă cei care nu o vor face for avea anumite dezavantaje, despre care vă voi vorbi mai mult în continuarea acestui articol.

proprietarii de site-uri web vor deveni mai conștienți de riscurile pe care le au dacă nu vor face schimbarea de la HTTP la HTTPS și le vor cere web developerilor care se ocupă de site-urile lor să le îmbunătățească securitatea și, implicit, imaginea în ochii utilizatorilor prin adoptarea noului protocol.

De ce să treceți de la HTTP la HTTPS?

traficul pe site-urile celor care solicită date sensibile, dar decid să rămână la HTTP va scădea ca urmare a avertismentului vizibil pentru utilizatori. Aceștia vor deveni mai conștienți de implicațiile de securitate și, mai ales utilizatorii noi, vor evita să-și introducă pe un site marcat ca nesecurizat. Chrome este cel mai utilizat navigator la nivel global conform celor mai recente statistici privind cota de piață a navigatoarelor. Cei mai mulți nu vor ști ce reprezintă acel avertisment
cei care vor trece la HTTPS vor vedea o creștere de poziție în clasarea motorului de căutare Google și, odată cu îmbunătățirea poziției în căutare, mai mult trafic. Îmbunătățirea clasării în motoarele de căutare se face cu eforturi financiare destul de mari cu ajutorul campaniilor SEO sau a schimbărilor care țin destructura site-ului; prin această înlocuire de protocol puteți obține mai mult trafic gratuit ca bonus pentru îmbunătățirea propriului website!
paginile care utilizează HTTPS se încarcă mult mai rapid. Viteza site-ului este unul dintre factorii decisivi pentru maximizarea ratei de conversie și unul dintremotivele pentru care unele afaceri nu au succes online.
scăderea dramatică a conversiilor pentru cei care aleg să rămână pe HTTP. Atunci când utilizatorii vor intra de pe navigatorul Chrome pe site-ul vostru nesecurizat și vor dori să facă o plată sau să se autentifice, Google le va afișa pe acele pagini mesajul că site-ul nu este securizat și informațiile pe care le vor introduce vor fi transmise printr-o conexiune nesecurizată. Rata de abandon a acțiunilor inițiate de utilizator va fi foarte mare, nu vor mai avea sentimentul de siguranță pe site și acest lucru va contribui la generarea unei percepții negative cu impact direct asupra traficului provenit de la utilizatori recurenți.

Implementarea protocolului HTTPS – tutorial

Acest tutorial a fost făcut pe un website care utilizează panoul de administrare și găzduire web cPanel și sistemul de administrare al conținutului WordPress.

Ca să începeți, deschideți CPanel și dați clic pe Lets Encrypt SSL.

Opțional, pentru ca toți utilizatorii să fie redirecționați către noul vostru domeniul care conține https inclusiv atunci când dau clic pe linkurile anterioare care conțin http, adăugați liniile de cod:

RewriteCond %{HTTPS} !=on
RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

http://netmetrics.ro/conexiunea-la-acest-site-nu-este-sigura-avertisment-chrome/

Formularele reprezinta o modalitate de comunicare intre utilizatori si server. Pentru prelucrarea lor, sunt folosite diferite scripturi server-side, ex.:PHP, Perl.

Un formular se defineste cu ajutorul marcajului <form>, iar in interiorul acestuia se gasesc diferite campuri de introducere a datelor. Campurile unui formular destinate pentru introducerea datelor se definesc prin intermediul marcajului <input>.
Exemplu

<form action="mailto:AdresaTa@email.com" method="POST">
Numele:<br>
<input type="text" name="name"><br>
Email:<br>
<input type="text" name="email"><br>
Mesajul:<br>
<textarea cols="30" rows="5"></textarea><br>
<input type="submit" name="submit" value="Trimite">
<input type="reset" name="reset" value="Reseteaza">
</form>

Rezultat:

Pentru transmiterea informatiilor catre server se utilizeaza una din cele doua metode:

metoda get - informatiile din formular sunt vizibile in URL
metoda post- informatiile din formular nu sunt vizibile in URL

Atributul action are ca valoare URL-ul careia ii vor fi transmise informatiile din formular, pentru prelucrare.

Campurile unui formular sunt definite cu ajutorul marcajului <input> care poate lua urmatoarele atribute:

type - tipul campului. Poate lua urmatoarele valori:

button - definirea unui buton
checkbox - casute de bifat. Prin intermediul lor utilizatorul poate selecta (bifa) mai multe variante de raspuns simultan.
file - permite utilizatorului sa selecteze un fisier din calculatorul sau. (ex. un fisier care se doreste a fi incarcat pe server).
hidden - acest camp nu va aparea in formular, va fi invizibil.
submit - informatiile din formular sunt trimise spre prelucrare la URL-ul indicat inaction.
password - acest camp se foloseste la introducerea parolei. Din motive de securitate se inlocuieste fiecare caracter tastat cu un asterix (*).
radio - reprezinta un set de elemente cu un singur nume, din care se poate selecta doar unul.
text - camp in care utilizatorul poate introduce text.
reset - buton la apasarea careia se goleste formularul.

name - numele elementului
value - valoarea atributului elementului
size - lungimea campului de tip text sau password
maxlength - numarul maxim de caractere care pot fi introduse intr-un camp de tip text saupassword
disabled - dezactivarea unui element.

Tabele in HTML

Cu ajutorul tabelelor informatia capata o claritate mai mare. Deasemenea, importanta tabelelor se remarca si prin faptul ca acestea pot fi folosite la definirea structurii paginii (layout-ul), ex: headerul, meniul, footerul, etc. Desi in zilele noastrea aceasta numai este o practica obisnuita (locul ei fiind luat de CSS), totusi ramane ca o alternativa.Un tabel este compus din randuri sicoloane si se se defineste cu ajutorul marcajului <table>, continand in sine definitiile randului - <tr> (tr - table row) si definitiile coloanei - <td> (td - table data).

In continuare vom crea un tabel cu doua randuri si trei coloane:

Exemplu:

<table>
<tr>
<td>Randul 1, celula 1</td>
<td>Randul 1, celula 2</td>
<td>Randul 1, celula 3</td>
</tr>
<tr>
<td>Randul 2, celula 1</td>
<td>Randul 2, celula 2</td>
<td>Randul 2, celula 3</td>
</tr>
</table>

Rezultat:

Randul 1, celula 1	Randul 1, celula 2	Randul 1, celula 3
Randul 2, celula 1	Randul 2, celula 2	Randul 2, celula 3

Pentru a reda forma tabelara, adica fiecare celula sa fie luata intr-un chenar, este necesar adaugarea atributului border=1 .

<table border="1">

Rezultat:

Randul 1, celula 1	Randul 1, celula 2	Randul 1, celula 3
Randul 2, celula 1	Randul 2, celula 2	Randul 2, celula 3

Atributele tabelului:

Cele mai uzuale:
align - alinirea tabelului, valori posibile: left,center,right.
valign - alinierea pe verticala, valori posibile:top (sus), middle (mijloc), bottom (jos).
width - latimea, se specifica in pixeli
height - inaltimea, se specifica in pixeli
bgcolor - culoarea de fundal
border - chenar. In cazul cand border=0, chenarul este invizibil.
cellpadding - distanta dintre marginile celulelor si continutul acestora
cellspacing - distanta dintre celulele unui tabel

In afara de aceste atribute, exista inca doua atribute foarte importante ale marcajului <td>.
Acestea sunt:
colspan - numarul de coloane pe care se intinde celula
rowspan - numarul de randuri pe care se intinde celula

Exemplu colspan:

<table border="1" align="center" width="200">
<tr>
<td colspan="2" bgcolor="orange"><b>Vechime in munca </b> </td>
</tr>
<tr>
<td>Ion Paladi</td>
<td width="30">5</td>
</tr>
<tr>
<td>Mihai Cretu</td>
<td>3</td>
</tr>
<tr>
<td>Anton Stolbetski</td>
<td>6</td>
</tr>
</table>

Rezultat:

Vechime in munca
Ion Paladi	5
Mihai Cretu	3
Anton Stolbetski	6

Datorita faptului ca am specificat in celula primului rand colspan="2", in rezultat celula se intinde pe distanta celor doua celule.
Sa analizam un exemplu cu rowspan

Exemplu rowspan:

<table border="1" align="center" width="200">
<tr>
<td rowspan="3" bgcolor="orange"><b>Angati</b></td>
<td>Ion Paladi</td>
<td width="30">5</td>
</tr>
<tr>
<td>Mihai Cretu</td>
<td>3</td>
</tr>
<tr>
<td>Anton Stolbetski</td>
<td>6</td>
</tr>
</table>

Rezultat:

Angati	Ion Paladi	5
	Mihai Cretu	3
	Anton Stolbetski	6

rowspan i-a valoarea "3", doarece acum celula trebuie sa se intinda pe toata inaltimea celor treicelule.

Atat am avut a spune cu privire la tabelele din HTML. Acestea sunt notiunile de baza insa cel mai des folosite!

Am vazut o multime de saituri in care autorii acestora, pentru a mentine contact cu vizitatorii lor, aveau intro pagina niste campuri in care se cerea sa se introduca email-ul, numele si mesajul propus spre expediere, dupa care trebuia sa apesi un buton si mesajul era trimis la destinatar.
Cum se realizeaza aceasta? Se realizeaza cu ajutorul formularelor!

Imagini in HTML

Imaginile in paginile web sunt foarte importante. Cu ajutorul lor saitul prinde viata si capata atractivitate dar trebuie luat in consideratie si faptul ca excesul de imagini va duce la incarcarea greoaie a saitului.

Inserarea unei imagini in pagina se face cu ajutorul marcajului <img> care are ca atribute:
src - fisierul imagine (src - source)
width - latimea imaginii
height - inaltimea imaginii
alt - valoarea acestuia este un text. Poate fi o descriere a imaginii sau paginii. Textul este afisat in browser doar atunci cand imaginea inca nu sa incarcat sau nu poate fi gasita.
border - chenar. Poate lua valorile 1 (cu chenar) sau 0 (fara chenar).
align - alinierea imaginii la dreapta - right, stanga - left, centru - center.

Exemplu 1:

<img src="flowers.jpg" >

Vezi rezultatul aici

Exemplu 2:

<img src="flowers.jpg" align="right" border="1" alt="Frumusetea naturii" >
<p>Textul in partea stanga, imaginea in dreapta.</p>

Vezi rezultatul aici

De mentionat faptul ca marcajul <img> nu este un marcaj cu pereche. Adaugarea la sfarstit a marcajului de genul ~~</img>~~ va fi inutila.

Imagini linkuri
O simpla imagine poate avea rol de link in cazul cand se include in interiorul marcajului <a>...</a>

Exemplu 1:

<a href="next_page.html">
<img src="flowers.jpg" border="0" alt="Frumusetea naturii" >
</a>

Vezi rezultatul aici

Atat despre imagini. Ne adancim si mai mult in HTML incepand a studia tabelele, un subiect foarte important din limbajul HTML.

Linkuri in HTML

Linkurile (sau referintele) constitue un element fundamental in elaborarea unui sait. In lipsa lor, saitul s-ar forma doar dintr-o pagina de dimensiuni foarte mari si aceasta ar duce la la o nestructure a saitului.

Un link se defineste cu ajutorul marcajului<a>...</a> care trebuie sa includa atributulhref continind calea pana la fisierul destinatie.

Exista doua tipuri de legaturi: interne siexterne.
Legatura interna este o legatura in interioul saitului tau. Deci, daca ai un sait in care ai definit linkul Servicii si acesta duce catre o pagina din interiorul saituluiservicii.html, atunci codul va arata ca cel de mai jos:

Link intern

<a href="servicii.html">Servicii<a>

Legatura externa este o legatura care duce spre un sait extern. In cazul acesta, accesarea unei pagini servicii.html de pe saitul www.un_sait_oarecare.com se va efectua astfel:

Link extern

<a href="http://www.un_sait_oarecare.com/servicii.html">Servicii<a>

Implicit, dupa accesarea linkului, pagina nou ceruta va fi afisata in fereastra curenta. In cazul cand doresti ca pagina sa se deschida intr-o noua fereastra, marcajului <a> i se adauga atributultarget=_blank.

<a href="http://www.un_sait_oarecare.com/servicii.html" target="_blank"> Servicii<a>

Vezi rezultatul exemplului aici!

De mentionat ca legaturile pot fi si catre alte tipuri de fisiere, ex: imagini, fisiere audio, fisiere video.

Un sait format doar din text nu pare prea atractiv. Iar pentru ai da atractie saitului se pot utiliza imaginile! Subiectul urmator: inserarea imaginilor in pagina!

Liste HTML

Exista trei tipuri de liste in HTML:

Liste de definitii
Liste neordonate
Liste ordonateListe de definitii:
Listele de definitii se creaza cu ajutorul marcajelor:
<dl>...</dl> - lista de definitii
<dt>...</dt> - termenul definit
<dd>...</dd> - definitia

<dl>
<dt><b>Ingrediente</b></dt>
<dd>100g zahar</dd>
<dd>50g faina</dd>
<dd>3 oua</dd>

<dt><b>Prepararea</b></dt>
<dd>Se dau la mixer</dd>
<dd>Se pun in cuptor pe 10 minute la 150 grade</dd>
</dl>

Rezultat:

Ingrediente: 100g zahar; 50g faina; 3 oua
Prepararea: Se dau la mixer; Se pun in cuptor pe 10 minute la 150 grade

Liste neordonate:
Listele neordonate se capata cu ajutorul marcajelor:
<ul>...</ul> - lista neordonata
<li>...</li> - elementul listei

<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>

Rezultat:

HTML
CSS
JavaScript

Liste ordonate:
Listele ordonate se definesc cu ajutorul marcajelor:
<ol>...</ol> - lista ordonata
<li>...</li> - elementul listei

<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>

Rezultat:

Liste ordonate:

HTML
CSS
JavaScript

Atat despre liste!
De obicei un sait este alcatuit din mai multe pagini si fiecare pagina contine legaturi (linkuri) catre celelalte pagini din interiorul saitului sau catre pagini externe.
Cum se realizeaza aceste legaturi este tocmai subiectul ce il vom discuta in continuare!