Poslední dobou přibývá lidí kteří se mě ptají na to, jak si mohou také založit svou webovou stránku. Proto jsem se rozhodl sepsat tento článek abych jim mohl jen poslat odkaz a nemusel to neustále opakovat.
Co potřebujete?
– Hosting
– Doménu
– Web
Velmi často se setkávám s tím že mnoho lidí si vytvoří jednoduché webové stránky ale nejde jim diakritika (háčky, čárky nad písmeny apod.).
Každý HTML soubor má v hlavičce nastaveno s jakou znakovou sadou bude pracovat, pro kódování UTF-8 např.
<meta http-equiv=“content-type“ content=“text/html; charset=utf-8″>
další známé jsou např. Windows-1250, windows-1252, iso-8859-2 a další
Kromě tohoto nastavení v hlavičce souboru musí také být soubor uložen v tomto kódování, například v programu PSPAD tuto možnost nastavení kódování souboru naleznete pod Formát -> a tam již je seznam kódování které můžete využít.
Pokud by jste psali například PHP skripty tak i v těchto skriptech se z pravidla nastavuje kódování
header(„Content-Type: text/html; charset=UTF-8“);
Výběr kódování se definuje také při připojování k db apod.
V minulých dílech jsme si ukázali jaké by mělo být tělo webové stránky a také k čemu nám mohou sloužit entity.
Máme dvě možnosti jak udělat strukturu webu
1) tabulky
2) css
Ukážeme si první možnost jelikož je jednodušší
<table> – tabulka
<tr> – řádek
<td> – buňka
colspan=“2″ —> to znamená že buňka zabere velikost jako dvě buňky
rowspan=“2″ —> to znamená že řádek bude roztáhlý jako řádky dva
align=“center“ —> zarovnání na střed (center-střed, left-levá strana,right-pravá strana)
valign=“top“ —> vertikální zarovnání nahoru (top-nahoru, middle-uprostřed, bottom-dolů)
bgcolor=“green“ —> barva pozadí je zelená (barva se dá nahradit jinou barvou např. red, white, blue či kodem RGB barev)
background=“pozadi.jpg“ —> obrázek na pozadí (url obrázku je možné změnit)
border=“1″ —> tloušťka rámu tabulky je 1px
cellpadding=“1″ —> vnitřní okraj buňek (tloušťka v px)
cellspacing=“1″ —> vnější okraj buňek (tloušťka v px)
bordercolor=“orange“ —> oranžová barva rámu tabulky
Nejlépe se vše naučíte praxí takže uděláme tabulku s možným rozvržením webu.
<table width=“900″ align=“center“>
<tr><td colspan=“2″><h1>Nadpis</h1></td></tr>
<tr><td width=“150″>Levé menu</td><td>Obsah webu…</td></tr>
<tr><td colspan=“2″>Patička webu</td></tr>
</table>
Entitly se používají hodně často při ošetření bezpečnosti stránek za použití PHP. Například přes GET se vkládá do stránky obsah … no je to velmi nebezpečné, zde je ošetřený skript který vám speciální znaky převede na entitly.
http://luzr.php/entitly.php?text=<?php echo „nějaký text… ošetřený“; ?>
| pevná mezera | |
| < | < |
| > | > |
| & | & |
| „ | " |
| ± | ± |
| × | × |
| ® | ® |
| © | © |
| € | € |
| » | » |
| « | « |
Dnes si ukážeme tělo webové stránky, nyní si tedy vytvořte soubor index.html (html je tip souboru). Tento soubor poté otevřete nejlépe v programu Pspad ale lze použít i například poznámkový blok (poznámkový blok má ovšem tu nevýhodu že do dokumentu vkládá tzv. neviditelné znaky které mohou vadit validitě webu).
Do souboru poté vložíte základní kod který ovšem musíte upravit podle vaší potřeby! Kodování využívám UTF-8 … pokud i vy budete využívat UTF-8 tak si otevřete soubor v Pspad Formát->UTF-8 a uložte, nyní je soubor již v kodování UTF-8
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Language" content="cs"> <meta name="language" content="cs"> <meta name="robots" content="all,follow,noodp,noydir"> <meta name="googlebot" content="index,follow,snippet,archive,noodp"> <meta name="description" content="Popis stránky který by měl být dostatečně dlouhý poněvadž se mnohdy zobrazuje ve výsledcích vyhledávání"> <meta name="keywords" content="klíčová slova,online hra, online hry"> <meta name="author" content="autor webu"> <meta name="copyright" content="vlastník webu"> <title>Název webu</title> </head> <body>
Obsah webu
</body> </html>