Tutorial: Adaugare cod de securitate la formular HTML

In acest tutorial este prezentat modul prin care putem adauga unui formular un cod de securitate, al carui scop este oprirea trimiterii mesajelor spam.

In principiu, formularul contine un camp in care este introdus un anumit cod. Acel cod trebuie comparat cu un altul iar in cazul in care sunt identice sa trimita datele prin formular.

Acest mod consta in adaugarea unei casute ascunse de tip text a carei valoare este rezultatul corect al operatiei matematice sau intrebarii sau ce doriti voi sa apara la codul de securitate.

<form action="pagina.php" method="post" onsubmit="return validare()" 
name="formular" >
Nume:
<input type="text" size="25" name="nume" maxlength="35" />
Mesaj:
<textarea name="mesaj"></textarea>
<?php
$aleatoriu1 = rand(0,10);
$aleatoriu2 = rand(0,10);
$rezultat = $aleatoriu1 + $aleatoriu2;
echo '<input type="text" size="5" value="'.$rezultat.'" name="cod1" 
style="display:none;" />
'.$aleatoriu1.'+'.$aleatoriu2.' =
<input type="text" size="5" name="cod2" />';
?>
<input type="submit" value="Trimite" />
</form>

Iar codul javascript care verfica daca valoarea celor doua casute este aceeasi

 

function validare() {
if (document.forms.formular.cod1.value != document.forms.formular.cod2.value) {
alert('Introduceti codul de verificare!');
return false;	
}
return true;
}

Articolul a fost preluat de pe tutorialeweb.net

16 Addonuri esentiale pentru un webdesigner.(Firefox)

 

1. Web Developer

06-01_plugin_developer-550x270

2. SeoQuake

 

SeoQuake

 

SeoQuake va ajuta sa va optimizati site-ul pentru orice motor de cautare si va da sfaturi despre lungimea descrierii si cuvintelor cheie si daca lipseste vreo informatie care ajuta pentru optimizare.

 

3. Window Resizer 1.0

 

Window Resizer 1.0

 

Window Resizer va ajuta sa verificati modul de afisare a siteului pe mai multe rezolutii.

 

4. Firebug

 

Firebug

 

Firebug este considerat cel mai perfomant tool pentru developeri.Acest tool va arata codul websiteului si css atribuit in care puteti modifica live siteul si ulterior sa modificati fisierul CSS manual.

 

5. Greasemonkey

 

Greasemonkey

 

The Greasemonkey va ajuta sa modificati websiteul adaugand mici coduri javascript si a ii da un continut dinamic.

 

6. ColorZilla

 

Color Zilla

 

ColorZilla o paleta de culori la indemana mereu pentru a alege cu rapiditate o culoare pentru designul dumneavoastra

 

7. FireFTP

 

FireFTP

 

FireFTP este un client FTP foarte rapid.

 

8. IE Tab

 

IE Tab

 

 

9. Palette Grabber

 

Palette Grabber

 

 

10. Font Finder 0.5c

 

Font Finder 0.5c

 

Va arata ce font are textul selectat de pe o pagina.

 

11. Total Validator

 

Total Validator

 

Aceasta extentie va ajuta sa gasiti link-urile nevalide,pozele care au o adresa gresita si nu se afiseaza ,greselile de cuvinte etc.

 

 

12. Dummy Lipsum

 

Dummy Lipsum

 

Genereaza textul demo Lorem Ipsum!

 

 

 

13. Codetch

 

Codetch

 

Codetch este un editor WYSIWYG care va permite sa editati paginile html direct in firefox.Are interfata asemanatoare softului Dreamweaver dar pretul nu este aceelasi 🙂 .

 

14. Measure It

 

Measure It

 

Measure It este un addon care masoara dimensiunile unui website.

 

15. YSlow

 

YSlow

 

YSlow va ajuta sa va optimizati websiteul pentru o afisare mai rapida.

 

16. CSSViewer

 

CSSViewer

 

CSSViewer va permite sa verificati codul CSS a unui website.

Tutorial HTML : Crearea unui tabel in HTML

 Tabelele au una din cele mai mari utilizari, deoarece ele stau ( in cele mai multe cazuri ) la baza structurii unui website.

Un tabel este format din linii si colane, impartind zona in celule.

Tabelele se definesc cu tagul <table>

Randurile sunt definite prin tagul <tr>

Liniile sunt definite prin tagul <td>

TD = TABLE DATA => Intre tagurile <td></td> este locul unde sunt tinute datele ( adica acea celula despre care vorbeam putin mai devreme ). Un rand poate fi format din mai multe celule care contin date.

Iata un exemplu de tabel:

<html>
  <head>
    <title>TITLUL PAGINII</title>
  </head>
  <body>
    <table border=“1”>
      <tr>
        <td>randul 1, celula 1 </td>
        <td>randul 1, celula 2 </td>
      </tr>
      <tr>
        <td>randul 2, celula 1 </td>
        <td>randul 2, celula 2 </td>
      </tr>
    </table>
  </body>
</html>

Codul de mai sus va afisa urmatorul tabel:

randul 1, celula 1 randul 1, celula 2
randul 2, celula 1 randul 2, celula 2

<table>Defineste un tabel.
<th>Defineste o celula cap de tabel.
<tr>Defineste un rand de tabel.
<td>Defineste o celula din tabel.
<captation>Defineste un camp asociat tabelului pentru introducerea unei explicatii.
<colgroup>Defineste grupuri de coloane ale tabelului.
<col>Defineste valorile atributului pentru una sau mai multe coloane dintr-un tabel.
<thead>Defineste un cap de tabel care nu se va derula.
<tbody>Defineste corpul unui tabel care se desfasoara in interiorul
unui cap de tabel fixat si subsolul tabelului.
<tfoot>Defineste un subsol de tabel care nu se va derula.

Cum procedam daca am mutat site-ul la alta adresa? 301 MUTAT PERMANENT !

Mutarea unui website la o adresa noua inseamna:

– Reindexarea paginilor vechi

– Pierderea pagerank-ului

– Pierderea vizitelor din google

Totusi, folosind un script pentru o redirectionare permanenta, putem redirectiona atat utilizatorii obijnuiti cu site-ul respectiv sau chiar si cei care vin din cautarile google, catre noul nostru website.

<script runat=”server”>

private void Page_Load(object sender, System.EventArgs e)
{
Response.Status = “301 Moved Permanently”;
Response.AddHeader(“Location”,”http://www.new-url.com”);
}
</script>


Introducand acest script, putem redirectiona catre noul website atat vizitatorii cat si botii google. Astfel se poate face si o indexare a noului website mult mai rapida.

Recomandarea mea personala este sa fiti siguri de numele domeniului pe care il alegeti atunci cand faceti un site web nou, deoarece schimbarile dese ale unui nume de domeniu nu va aduce beneficii.

Iata si explicatia google pentru 301 REDIRECT:

“Pagina solicitată a fost mutată permanent într-o locaţie nouă. Când serverul returnează acest răspuns (drept răspuns pentru o solicitare GET sau HEAD), îl direcţionează automat pe solicitant spre locaţia nouă. Trebuie să utilizaţi acest cod pentru a informa Googlebot că o pagină sau un site a fost mutat permanent într-o locaţie nouă.”

Puteti gasi mai multe informatii in legatura cu “Coduri de stare HTML” chiar aici.

Tutorial HTML: Crearea formularelor in HTML

Formularele se folosesc  pentru ca administratorii site-urilor sa colecteze informatii de la utilizatori. Forumularele sunt tool-uri sau unelte foarte importante pentru webmasteri, ele ajutand la crearea de statistici, pool-uri, formulare de inscriere, abonamente, etc.

De cele mai multe ori, aceste formulare HTML trebuie folosite impreuna cu scripturi PHP sau JavaScript pentru a putea inregistra datele introduse in acel formular.

Crearea unui formular trebuie facuta in etichetele <form>…</form>, care subordoneaza urmatoarele atribute:

action – aici se scrie adresa URL unde se gaseste scriptul care interpreteaza acest formular.

method – poate lua valoarea GET sau POST, indicand metoda folosita de browser pentru transmiterea formularului.

target – indica locul unde utilizatorul va fi trimis dupa transmiterea datelor din formular.

Eticheta <input> poate avea urmatoarele atribute:

type – indica tipul de formular care urmeaza a fi folosit.

name – atribuie un nume campului, pentru a putea fi apelat de scriptul folosit pentru citirea form-ului.

maxlenght – numarul maxim de caractere acceptat in acel camp.

size – numarul de caractere vizibile in acel camp.

checked – precizeaza daca butonul sau checkboxul care va fi intalnit, sa fie bifat sau nu.

disabled – acest atribut face campul vizibil, insa imposibil de accesat de catre utilizatori. Nimic din acest rand nu va fi trimis catre scriptul pe care il folositi.

In continuare va voi prezenta un formular folosind toate atributele etichetei <input>:

<form action="scriptul.php" method="post">
Nume:<input type="text" name="nume"><br />
Prenume:<input type="text" name="prenume"><br />
Telefon:<input type="text" name="telefon">
Fax:<input type="text" name="fax"><br />
Email:<input type="text" name="email"><br />
Sexul: 	Masculin <input type="radio" name="sex" value="masc"> 
Feminin <input type="radio" name="sex" value="fem">
<br /><br />
Studii: <select> 
<option value="fara-studii">Fara Studii</option>
<option value="studii-medii">Studii Medii</option>
<option value="studii-superioare">Studii Superioare</option>
</select>
<br /><br />
Utilizati:<br />
Calculatorul<input type="checkbox" name="pc"><br />
Laptopul<input type="checkbox" name="laptop"><br />
Tableta/SmartPhone<input type="checkbox" name="smart">
<br />
Fisier: <input type="file" name="file">
<br /><br />
Observatii: <textarea name="observatii" rows="5" cols="30"></textarea>
<br /><br />
<input type="submit" value="Trimite"><input type="reset" value="Reseteaza">
</form>
Nume:
Prenume:
Telefon:
Fax:
Email:
Sexul: Masculin
Feminin Studii:

Utilizati:
Calculatorul
Laptopul
Tableta/SmartPhone

Fisier:

Observatii:

Campuri de formular ascunse

Un camp de formular de tip ascuns sau hidden, nu este vizibil de utilizatorul si are scopul de a trimite informatii suplimentare catre scriptul PHP.

Tutorial HTML : Tabele – Folosirea tabelelor in HTML

Aceste tabele au o foarte mare importanta la baza HTML, deoarece tabelele constituie o structura care sta la baza organizarii paginilor web. Desi multe pagini folosesc acum div-uri pentru aranjarea paginilor, tabelele sunt in continuare foarte importante pentru structurarea unei pagini web. Practic, tabelele sunt cele care va ajuta sa faceti design-ul unui site si aranjarea in pagina a meniului, a textului, a butoanelor, etc.

Pentru crearea tabelelor in HTML se folosesc elementele <table>…</table>. Aceste elemente incadreaza si alte doua sub-elemente, <tr>…</tr>, acestea fiind linia unui tabel ( randul ) si <td>…</td>, acestea fiind coloana.

Un atribut important in folosirea tabelelor este atributul border, reprezentand “bordura” tabelului, adica grosimea liniei tabelului. In cazul in care se doreste anularea liniilor, se va folosi border=”0″.

Un exemplu simplu pentru un tabel cu border si cateva linii colorate:

<table border=”1″> <tr><td width=”80″ bgcolor=”red”>rosu</td><td width=”160″ bgcolor=”yellow”>galben</td></tr> <tr><td bgcolor=”white”>alb</td><td bgcolor=”green”>verde</td></tr> </table>
rosu galben
alb verde

Si un exemplu folosind toate atributele si etichetele prezentate anterior:

<table border=”1″>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan=”2″>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan=”3″>Row 3 Cell 1</td></tr>
</table>
Column 1 Column 2 Column 3
Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3
Row 2 Cell 2 Row 2 Cell 3
Row 3 Cell 1