Rubriky
Internet IT Školení - Tvorba webových stránek

Chci webové stránky, jak začít?

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

Rubriky
Internet Školení - Tvorba webových stránek

Začátečnické chyby – kódování

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.

Rubriky
Školení - Tvorba webových stránek

Tvorba webových stránek – rozvržení stránky (4)

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>

Rubriky
Školení - Tvorba webových stránek

Tvorba webových stránek – využití entitly v html (3)

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 &nbsp;
< &lt;
> &gt;
& &amp;
&quot;
± &plusmn;
× &times;
® &reg;
© &copy;
&euro;
» &raquo;
« &laquo;
Rubriky
Školení - Tvorba webových stránek

Tvorba webových stránek – tělo stránky (2)

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>