V tomto článku se dovíte jak pomocí .htpasswd (a .htaccess) zaheslovat stránku. Nedávno jsem zaheslovával své fotoalbum a tak jsem se rozhodl, že se o návod jak zaheslovat takovou stránku podělím. Všechno je v celku jednoduché, ale i tak se Vám pokusím sepsat maximum. Třeba se to bude někomu z Vás někdy hodit. Člověk nikdy neví.

Pár slov o tomto způsobu zaheslování

.htaccess je nejbezpečnější zaheslování stránek

Podle mého nejlepší, nejbezpečnější a zároveň jednoduché zaheslování stránek. Všechno se dá zvládnout během 2 minut. Zaheslování webu je opravdu hračka. Přístup pod heslem můžete využít například u statistik Vaší stránky, fotoalba a vlastně na všech konkrétních stránkách. Prostě na všechno. Ohromným plusem je také to, že se jedná o nejbezpečnější způsob zaheslování stránek a přitom je to tak jednoduché.

Jak tedy zaheslovat stránku?

Vytvořte si soubory .htaccess a .htpasswd. Podrobný návod jak takový soubory vytvořit najdete v článku Použití souboru .htaccess – zde na blogu. Do .htaccess zapište …

AuthUserFile /home/www/vas-web.cz/www/.htpasswd
AuthName "Text ..."
AuthType Basic
require valid-user

a do souboru .htpasswd zadáte uživatelské jméno a heslo pro přihlášení. Heslo musí být zašifrované. To učiňte třeba tady. Finální verze souboru .htpasswd by tedy mohla vypadat asi nějak takto:

Nikol:NTpyGmz5YdvQE
Petr:a2H3HDbwGs82k
Karlos:aGRZIl8tM7Pvk

Jak vidíte uživatelským jmen můžete do souboru .htpasswd zapsat nekonečno. Oba soubory nahrajte do složky, kterou chcete zaheslovat. Všechny soubory a složky budou vyžadovat pro přístup heslo. Pro odhlášení a nové vyžádání hesla pak stačí zavřít prohlížeč (ne panel, či záložku).

Zákaz výpisu složky

V některých případech mohou být soubory přístupné při zadání přesné adresy a tak by celé zaheslování bylo zbytečné. Proto doporučuji do souboru .htaccess také zapsat tento řádek ,který zakáže procházení složek a souborů.

Options -Indexes

Naopak zadáním +Indexes procházení složek a souborů povolíte. To ovšem v tomto případě silně nedoporučuji.

Zjištění adresy pro AuthUserFile

Pro správnou funkčnost potřebujeme zadat správnou adresu na soubor .htpasswd. Tu zjistíme například pomocí PHP souboru. Vytvořte tedy PHP soubor (nebo si jej rovnou stáhněte) a zapište do něj toto:

<?php
phpinfo();
?>

Poté jej nahrajte na Vás server, otevřete a vyhledejte si řádek SCRIPT_FILENAME. Tuto adresu zapište do Vašeho .htaccess souboru do políčka AuthUserFile. Cesta ovšem musí končit souborem .htpasswd v kterém jsou zapsané Vaše přihlašovací údaje.

Nemáš čas? Stahuj…

Vždy se najde někdo, kdo nemá příliš času. Hlavně pro ty jsem zde připravil verzi na stažení. Jediné, co musíte udělat je to, že změníte adresu AuthUserFile a vygenerujete si nové heslo. V základě jsou přihlašovací údaje celkem dobře zapamatovatelné. Jméno je admin a heslo je 12345.

Alternativy zaheslování stránky

Pokud by Vám tento způsob nevyhovoval, či připadal málo bezpečný, můžete vyzkoušet další možnosti zaheslování stránky. Více už třeba v článku od Dušana. Najdete v něm určitě užitečné rady na různé způsoby zaheslování stránek. Ať se daří :)

Po několika kladných ohlasech na můj starší článek jsem se rozhodl napsat další návod na e-mailový formulář. Bude již obsahovat antispamovou ochranu a možnost nastavit si vlastní e-mail, na který bude zpráva doručena. Tímto se stává celkově bezpečnější a užitečnější.

Jak začít s formulářem?

Chcete umožnit návštěvníkům posílat maily přímo z Vaší stránky? Dnes Vám ukážu jak vytvořit PHP skript, pomocí kterého mohou návštěvníci Vaší stránky posílat e-maily. Uživatel bude mít možnost nastavit si e-mail, na který bude chtít odeslat svojí zprávu. Zároveň je tento e-mailový formulář chráněn proti spamu.

Nahlédněte jak tento e-mailový formulář bude vypadat:
Ukázka plně funkčního e-mailového formuláře…

Pokud nechcete, aby konkrétní člověk posílal z Vaší stránky maily, můžete jej zablokovat pomocí jeho IP adresy. Stačí v stejném adresáři vytvořit soubor .htaccess a pomocí jej zablokovat uživateli přístup. Více o .htaccess a možnosti zablokování přístupu pomocí IP adresy se můžete dočíst v jednom ze starších článků Použití souboru .htaccess.

E-mailový formulář – HTML kód

Jen bych chtěl upozornit, že Váš hosting musí pro funkčnost podporovat PHP. V dnešní době je to již samozřejmost a proto si myslím, že toto téma není nutno dále rozvádět.

index.php (vložte kamkoli mezi tagy <body> a </body>)

<table style="height:100%;" width="100%" cellSpacing="0" cellPadding="0" border="0">
<tr><td align="center" valign="top">
<form action="odeslat.php" method="post">
<table width="250" border="0" class="text">
<tr><td width="50"><strong>O</strong>desílatel:</td><td><input name="email" size="30" type="text"/></td></tr>
<tr><td width="50"><strong>P</strong>říjemce:</td><td><input name="prijemce" size="30" type="text"/></td></tr>
<tr><td width="50"><strong>P</strong>ředmět:</td><td><input name="predmet" size="30" type="text"/></td></tr>
<tr><td width="50"><strong>V</strong>ypočítej:</td><td><input name="spam" size="23" type="text"/><strong>= 1 + 1</strong></td></tr>
<tr><td width="50" valign="top"><strong>Z</strong>práva:</td><td><textarea name="zprava" rows="8" cols="50"></textarea></td></tr>
<tr><td colspan="2" align="center"><input type="submit" class="button" value="Odeslat e-mail"/></td></tr>
</table>
</form>
</td></tr>
</table>

odeslat.php (kompletní zdrojový kód)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
  <meta http-equiv="Refresh" content="4;url=index.php">
  <title>Doručování e-mailu ...</title>
  </head>
  <body>
<?
$prijemce = $_POST['prijemce'];
$predmet = $_POST['predmet'];
$email = $_POST['email'];
$spam = $_POST['spam'];
$zprava = $_POST['zprava'];
if ($prijemce!="" and $predmet!="" and $email!="" and $zprava!="" and $spam=="2")
{
Mail($prijemce, $predmet, $zprava, "From: " . $email);
echo "<p>Váš e-mail byl úspěšně odeslán na adresu <strong>$prijemce</strong>.";
}
else
{
echo "<p>Váš e-mail se <strong>nepodařilo odeslat</strong> pravděpodobně jste nevyplnili všechny údaje, nebo nevíte kolik je 1 + 1.</p>";
}
?>
  </body>
</html>

↓ Stáhnout e-mailový formulář s antispamovou ochranou

… kompletní výsledek ke stažení (1,31 kB).

Věc, která se určitě hodí. E-mailový formulář. Slouží ke komunikaci uživatele a majitele webu aniž by majitel webu musel zveřejňovat svůj e-mail. A jak jej vytvořit? To si ukážeme v dnešním článku.

Co potřebujeme?

Bez zbytečných keců se pustíme rovnou do práce. Na této stránce se můžete podívat na ukázku jak takový e-mailový formulář vypadá. A co k jeho funkčnosti potřebujeme? Jediné co potřebujete je podpora PHP u Vašeho hostingu. Pak jen stačí nahrát soubory na web a máte hotovo. Pro začátečníky bych rád upozornil, že všechny tyto soubory musí mít koncovku .php jinak Vám e-mailový formulář nebude fungovat.

E-mailový formulář – HTML kód

E-mailový formulář je rozdělen na 2 soubory. První (index.php), který určuje vzhled a druhý (poslat.php), který zpracovává odeslané informace a doručí Váš e-mail.

index.php (vložte kamkoli mezi tagy <body> a </body>)

<table style="height:100%;" width="100%" cellSpacing="0" cellPadding="0" border="0">
<tr><td align="center" valign="top">
<form action="poslat.php" method="post">
<table width="200" border="0" class="text">
<tr><td width="50"><strong>J</strong>méno:</td><td><input name="jmeno" accesskey="j" type="text"/></td></tr>
<tr><td width="50"><strong>E</strong>mail:</td><td><input name="email" accesskey="e" type="text"/></td></tr>
<tr><td width="50"><strong>W</strong>eb:</td><td><input name="web" accesskey="w"  type="text" value="http://"/></td></tr>
<tr><td width="50" valign="top"><strong>T</strong>ext:</td><td><textarea name="text" accesskey="t"  rows="5" cols="25"></textarea></td></tr>
<tr><td colspan="2" align="center"><input type="submit" class="button" value="Odeslat"/> <input type="reset" value="Vymazat"/></td></tr>
</table>
</form>
</td></tr>
</table>

poslat.php (kompletní zdrojový kód)

<?php
$to = "vas@email.cz";
$extra = "From: $email\r\nReply-To: $email\r\n";
$subject = "Vzkaz od ".$jmeno."";
$mess = "Jméno: ".$jmeno."\nEmail: ".$email."\n Web: ".$web."\nText:\n".$text."";
mail ($to, $subject, $mess, $extra);
?>
<html><head>
<meta http-equiv="refresh" content="0; url=index.php">
<title>Přesměrování ...</title>
</head><body></body></html>

Existuje mnoho variant vytvoření e-mailového formuláře. Vybral jsem ten nejjednodušší. Můžete použít tento způsob nebo si jej kompletně přetvořit podle svého. To už je na Vás…

↓ Stáhnout kompletní e-mailový formulář

Kompletní výsledek ke stažení (1,05 kB).

Hledáte na internetu HTML kód pro vložení Flash animace, který je validní a funguje pro všechny prohlížeče stejně? Už hledat nemusíte. V tomto článku Vám ukážu jak mít validní flash player. Navíc si ukážeme nejpoužívanější parametry flashe. Po přečtení tohoto článku si již budete moci nastavit svůj flash player podle libosti.

Validní Flash Player – HTML kód

Připravil jsem si pro Vás 2 příklady validního HTML kódu flash playeru. První je 100 % funkční a nejlepší příklad jak na validní a ve většině prohlížečích funkčního kódu. Pokud se Vám zdá první příklad příliš složitý můžete použít osekaný příklad. Je jednoduší a je také validní.

Validní Flash Player kód:

<!--[if !IE]> -->
<object type="application/x-shockwave-flash"
  data="movie.swf" width="300" height="135">
<!-- <![endif]-->

<!--[if IE]>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
  codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
  width="300" height="135">
  <param name="movie" value="movie.swf">
<!--><!--dgx-->
<param name="loop" value="true">
<param name="menu" value="false">

  <p>Toto je <strong>alternativní</strong> obsah.</p>
</object>
<!-- <![endif]-->

Validní Flash podruhé (osekaná verze):

<object data="animace.swf" type="application/x-shockwave-flash">
  <param name="movie" value="animace.swf">

  <p>Toto je <strong>alternativní</strong> obsah.</p>
</object>

Nejpoužívanější parametry Flash Playeru

Pro případ, že budete potřebovat nastavit svůj Flash Player podle sebe, můžete použít některý z těchto parametrů. Vypsal jsem zde několik nejpoužívanějších parametrů. Ke každému jsem přidal příklad a malý popisek.

devicefont

Hodnota: true, false
Popis: Nastavuje, zda se mají texty vykreslovat.
Příklad: <param name="devicefont" value="false">

src

Hodnota: *.swf
Popis: Název flashového souboru, který se má otevřít.
Příklad: <param name="src" value="video.swf">

movie

Hodnota: *.swf
Popis: Název flashového souboru, který se má otevřít.
Příklad: <param name="movie" value="video.swf">

classid

Hodnota: clsid:d27cdb6e-ae6d-11cf-96b8-444553540000
Popis: Identifikace prvku ActiveX pro prohlížeč.
Příklad: <param name="classid" value="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">

width

Hodnota: číslo nebo %
Popis: Nastavuje šířku. Nastavuje se v pixelech nebo procentech výšky okna.
Příklad: <param name="width" value="450">

height

Hodnota: číslo nebo %
Popis: Nastavuje výšku. Nastavuje se v pixelech nebo procentech výšky okna.
Příklad: <param name="height" value="250">

codebase

Hodnota: http://fpdownload.adobe.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0
Popis: Odkazuje na prvek AktiveX přehrávače Flash Player.
Příklad: <param name="codebase" value="http://fpdownload.adobe.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0">

pluginspage

Hodnota: http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash
Popis: Umístění zásuvného modulu, aby si jej uživatel mohl stáhnout.
Příklad: <param name="pluginspage" value="http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash ">

play

Hodnota: true, false
Popis: Určuje, zda se má aplikace začít přehrávat hned po načtení.
Příklad: <param name="play" value="true">

loop

Hodnota: true, false
Popis: Určuje, zda se má přehrávání obsahu neustále opakovat.
Příklad: <param name="loop" value="false">

quality

Hodnota: low, medium, high, autolow, autohigh, best
Popis: Nastavení úrovně vyhlazování.
Příklad: <param name="quality" value="high">

bgcolor

Hodnota: #RRGGBB
Popis: Barva pozadí aplikace.
Příklad: <param name="bgcolor" value="#RRGGBB">

align

Hodnota: Default, L, R, T, B
Popis: Zarovnání objektu.
Příklad: <param name="align" value="left">

menu

Hodnota: true, false
Popis: Nastavení nabídky při klepnutí pravým tlačítkem na Flash.
Příklad: <param name="menu" value="false">

wmode

Hodnota: window, opaque, transparent
Popis: Nastavení průhlednosti Flashe.
Příklad: <param name="wmode" value="opaque">

seamlessTabbing

Hodnota: true, false
Popis: Uživatel může pomocí klávesy TAB opustit ovládací prvek.
Příklad: <param name="seamlessTabbing" value="true">

pluginurl

Hodnota: http://www.adobe.com/go/getflashplayer
Popis: Odkazuje na stažení pluginu v případě, že jej nemáte nainstalován v PC.
Příklad: <param name="pluginurl" value="http://www.adobe.com/go/getflashplayer">

V dnešním článku si řekneme něco o .htaccess. Nejprve si řekneme jak takový soubor .htaccess vytvořit. Poté si ukážeme příklady nastavení a řekneme si jejich využití. Všechno pěkně stručně a jasně.

Pár slov úvodem…

Co je to .htaccess?

Soubor .htaccess je konfigurační soubor serveru. Nejčastěji se využívá pro vytvoření vlastní chybové stránky nebo pro zablokování výpisu složky. Jde s ním, ale nastavovat mnohem více věcí.

K čemu .htaccess slouží?

Soubor .htaccess slouží k mnoho nastavení našeho webu. Jedinou podmínkou je jeho podpora na straně serveru. Pomocí tohoto souboru můžeme například vytvářet vlastní chybové stránky, přesměrování, ochranu webu heslem, blokování přístupu na naše WWW podle IP adres nebo k nastavení výchozího souboru (index.html).

Jak vytvořit soubor .htaccess?

Nevíte jak vytvořit takový soubor .htaccess? Je to jednoduché. Soubor .htaccess je normální textový dokument. Vytvořte jej (například pomocí Poznámkové bloku) a uložte ho pod názvem „.htaccess“ (včetně tečky).

Postup uložení přes Poznámkový blok:
1) Otevřete si Poznámkový blok.
2) Klikněte na: Soubor – Uložit jako…
3) Do pole „Název souboru“ napište: „.htaccess“ (bez uvozovek).
4) Do pole „Uložit jako typ“ vyberte „Všechny soubory“.

Typy pro Váš .htaccess soubor:

• Jestli chcete soubor vidět ve svém FTP klientu, musíte si zapnout možnost zobrazení skrytých souborů (Pokud používáte Total Commander: Síť – FTP – zobrazit skryté soubory).
• .htaccess nemá žádnou příponu. Soubor s názvem .htaccess.txt je špatně. Pokud Vám soubor .htaccess nejde vytvořit uložte jej jako htaccess.txt a ve vašem FTP klientu jej přejmenujte na .htaccess.
• Pro komentáře se používá znak # na začátku řádku.
• Soubor .htaccess se vkládá do kořenového adresáře (bude platit pro celý web).
• Chcete, aby Váš soubor .htaccess platil pouze pro určitý adresář? Vložte jej do něj.

Nejčastější příklady použití .htaccess

# Blokování přístupu podle IP adres

deny from 123.123.123.123
- Číslo je IP adresa, kterou chcete zablokovat přístup na Vaše stránky.
deny from 111.123
- Zablokujete přístup ze všech adres, které začínají 111.123
deny from all
- Zablokujete přístup celého adresáře.
allow from 123.123.123.123
- Povolíte této IP adrese vstup na Vaše stránky.

# Chybové stránky

ErrorDocument 403 "http://example.cz/chyba-403.html"
ErrorDocument 404 "http://example.cz/chyba-404.html"
- Zobrazí vlastní chybové stránky.
- Co znamenají čísla chybových hlášek najdete zde.

# Index stranka

DirectoryIndex index.php index.html
- Určujete na jaký soubor bude uživatel přesměrován pokud navštíví Vaší stránku (přednastaveno je index.php nebo index.html).

# Ochrana proti SPAM botům

RewriteCond %{HTTP_USER_AGENT} Wget [OR]
RewriteCond %{HTTP_USER_AGENT} CherryPickerSE [OR]
RewriteCond %{HTTP_USER_AGENT} CherryPickerElite [OR]
RewriteCond %{HTTP_USER_AGENT} EmailCollector [OR]
RewriteCond %{HTTP_USER_AGENT} EmailSiphon [OR]
RewriteCond %{HTTP_USER_AGENT} EmailWolf [OR]
RewriteCond %{HTTP_USER_AGENT} ExtractorPro
RewriteRule ^.*$ http://www.spampoison.com/ [L]
- Tento kód odhalí většinu SPAM botů, které přesměruje pryč.
- Tento kód přesměruje SPAM bota na adresu spampoison.com.

# Přepis z /něco.php na /něco

RewriteCond %{REQUEST_FILENAME} -f [NC,OR]
RewriteCond %{REQUEST_FILENAME} -d [NC]
RewriteRule .* - [L]
RewriteRule ^([\w-]+)$ /$1.php [L,QSA]
- Tento kód pomocí .htaccess upravuje všechny adresy.
- Všechny adresy budou nyní zobrazovány na webu bez přípony .php
(na části Vašeho webu odkazujte bez .php).

# Přepíše něco-někde.php na /něco/někde

RewriteRule ^něco/někde$ /něco-někde.php

# Přepis z /index.php?stranka=novinky na /novinky.html

RewriteEngine on
Options +FollowSymlinks
RewriteCond %{REQUEST_URI} ^(.*).html
RewriteRule ^(.*).html index.php?stranka=$1 [nc,L,QSA]

# Přesměrování webu bez WWW na verzi s WWW

RewriteEngine On
RewriteCond %{HTTP_HOST} ^example\.cz [nc]
RewriteRule (.*) http://www.example.cz/$1 [R=301,L]

# Přesměrování webu s WWW na verzi bez WWW

RewriteEngine On
RewriteCond %{HTTP_HOST} ^www\.vase-domena\.cz [nc]
RewriteRule (.*) http://vase-domena.cz/$1 [R=301,L]

# Přesměrování z 1.php na 2.php

RewriteEngine On
RewriteRule 1\.php /2.php [R=301]

# Povolení výpisu adresáře

Options +Indexes
- Uživatel uvidí soubory vložené na Vašem webu.
- Zápisem Options -Indexes se výpis složky zakáže.

# Zakázání hotlinkování obrázků a videí

RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www\.)?neco\.cz [NC]
RewriteRule \.(jpg|png|gif|mp3|mpg|avi|mov)$ - [F]
- Zakáže hotlinkování obrázků a videí z jiných stránek (i vyhledávačů).
- Výrazně sníží vytížení serveru a zamezí zobrazování fotek na jiném než Vašem webu.

# Zakázání výpisu adresáře

Options -Indexes
- Uživatel se při snaze dostat se do některého adresáře bude přesměrován na chybovou stránku 403.

# Zaheslování stránky pomocí .htaccess

AuthUserFile /data/www/www_example_cz/.htpasswd
AuthName "Restricted Area"
AuthType Basic
require valid-user
- Tento kód zašifruje celý web www.example.cz.
- Více najdete v článku Zaheslování stránek pomocí .htpasswd zde na blogu.
- Zašifrování svého hesla a jména můžete provést na této stránce.

# Zapnutí Rewrite Modu

RewriteEngine On
- RewriteEngine On se zadává do .htaccess jen jednou!

Na internetu je plno nástrojů pro zašifrování hesla pro .htpasswd a já Vám ukážu jak si takový nástroj můžete udělat sami. A tak už nebudete potřebovat hledat generátory, které stejně většinou nefungují. Budete mít vlastní…

Jak to vypadá? Ukázka po kliknutí…

Po kliknutí se dostanete na ukázku tohoto nástroje. Použítí je jednoduché. Stačí vyplnit údaje a hned Vám bude vygenerován kód, který si vložíte do svého souboru .htpasswd. Pokud chcete tento nástroj na své stránky zkopírujte zdrojový kód, který najdete níže. Důležité je uložit tento soubor jako heslo.php. Pokud nemáte čas nebo jste líní připravil jsem pro Vás celý nástroj zabalený v ZIP archivu. Na stažení ho najdete zde nebo na konci článku.

Zdrojový kód pro zašifrování hesla:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Zašifrování hesla pro .htpasswd</title>
</head>
<body>

<form action="heslo.php" method="post">
Uživatelské jméno: <input name="jmeno" type="text">
Heslo: <input name="heslo" type="text">
<input name="Odeslat" type="submit">
</form>

<br><br>
<?php
$heslo = $_POST["heslo"];
$jmeno = $_POST["jmeno"];
if ($heslo == "")
{echo "Zadej uživatelské jméno a heslo, které se má převést pro .htpasswd";}
else{
$heslo_old = $heslo;
$heslo = crypt($heslo);
echo "<p><strong>Zapamatujte si prosím:</strong><br>Uživatelské jméno: $jmeno<br>Heslo: $heslo_old <br><br><em><strong>Do .htpasswd vložte tento kód:</strong></em><br><strong> $jmeno:$heslo</strong></p>";
}
?>
</body>
</html>

↓ Stáhnout funkční ukázku

Stáhnout kompletní výsledek (0,7 kB).

Článek o validování HTML. Dozvíme se co je to validace webu, k čemu nám slouží a jak správně zvalidovat web. Všechno pěkně popořadě, přehledně a hlavně jednoduše. Berte to ovšem s rezervou.

Co je to validace webu?

Ptáte se, co je to validace webu? Odpověď je celkem jednoduchá. Jde o opravování chyb v zdrojovém kódu WWW stránky. Pokud bude web obsahovat mnoho chyb je možné, že se v některém prohlížeči bude zobrazovat špatně. Ještě horší je, pokud se Vám web ukazuje v každém prohlížeči jinak. Proto je tu validace webu. Pomocí webových nástrojů opravíte všechny chyby v kódu a tím docílíte správného zobrazení Vaší WWW jak opravdu chcete.

Pro lepší pochopení si uvedeme příklad chyby v HTML kódu:

 <div>
  <p>Validní příklad</p>
 </div>

 <div>
  <p>Nevalidní příklad</div>
 </p>

Validní příklad je napsán správně. Všechny tagy jsou ukončeny postupně.

Nevalidní příklad je již špatně. Všechny tagy musí být ukončovány postupně. V tomto příkladu máme otevřené DIV a v něm se nachází P, který není uzavřen. Je uzavřen až za tagem DIV a proto ho prohlížeč již nevidí = ukončovací značka P je na tomto místě k ničemu.

K čemu slouží validace webu?

Validní kód je zcela přehlednější, příjemnější a dokonce se i rychleji načítá.
Proto se vyplatí validovat web. Po opravení všech chyb je dobré zhlédnou svojí stránku v několika nejpoužívanějších prohlížečích. Doporučuji volbu: Mozilla Firefox, Internet Explorer a Opera. Pokud máte web správně napsáný měl by se zobrazovat ve všech prohlížečích stejně. A to je také nesmírná výhoda validace, proto je validování důležité!

Pokud se web v prohlížečích nezobrazuje správně a je validní, bude chyba na straně prohlížeče. Jediné co v této situaci můžeme udělat je chybu nahlásit
nebo doufat, že v nové verzi prohlížeče tato chyba již nenastane.

Důležité je, snažit se psát stránky rovnou validní. Po dokončení webu jej validátorem pouze zkontrolovat a opravit nalezené chyby. Nikdo není dokonalý a překlepnout se může každý.

Někteří lidé si myslí, že validace webu je zbytečná a naprosto k ničemu. To je hloupost! Validace webu je důležitá. Máte jistotu, že se stránka bude zobrazovat tak, jak má. Validace také urychluje načítání stránek, protože s nevalidním webem má prohlížeč více práce. Pro lidi co stále nevěří jsem udělal jednoduchý test. Svůj nejmenovaný web jsem měl nevalidní s množstvím chyb. Načítal se přibližně za 1.2 sekundy. Po kompletním opravení chyb se načítal rychleji! Zrychlení bylo přibližně o 0.4 sekundy. K tomu je dobré myslet na to, že čím rozsáhlejší web tím bude rozdíl ještě větší.

Závěrem si položme otázku. Má opravdu význam validovat web? Ano! Má. Pokud chcete, aby Váš web vypadal profesionálně a načítal se co nejrychleji. Až se na web podívá profesionál bude mu jasné, že právě tenhle web nedělalo žádné prase. Neustále nevěříte? Potom se můžete alespoň utěšit, že správně napsaným webem dáte najevo, že nejste žádný idiot a víte, co děláte.

Jak tedy validovat web?

Stačí navštívit některou stránku, které jsou vypsané níže a zkontrolovat svůj web. Existují také různé doplňky do prohlížečů, které validátor integrují do vašeho prohlížeče. Například HTML Validátor pro Firefox, který vřele doporučuji.

Odkazy na validátory pro zvalidování stránek

Oficiální validátor najdete na http://validator.w3.org/, ale pokud neumíte anglicky je lepší použít Český validátor http://validator.webylon.info/.