Programování
Myslím si, že každý začínající i pokročilý programátor někdy hledá na internetu nějaké řešení, které potřebuje k webu, který vyvíjí.
I já jsem tak začínal, ale i dnes neváhám ,,vygooglit" něco, co ještě neznám, i když už o sobě mohu říct, že zvládnu velmi mnoho v oblasti programování internetových stránek.
V následujících článcích se tu budu věnovat především xHTML, CSS, XML, PHP, MySQL, Oracle, SEO a mod_rewrite.
Některé pojmy jsem čerpal z různých webů, ale hlavně, abych nazval věci správným jménem, jakým mají být.
Pokud by někdo ze zkušenějších měl nějaké námitky či upřesnění pro různé věci z následujících článků, tak mi je prosím napište na ja[@]frantisek-preissler.cz, budu jedině rád, když se z mých článků stanou články společné a tím přesnější.
Pomoc s touto stránkou
Nastala doba, kdy jsem tak časově vytížený, že mě napadlo oslovit Vás, kteří umíte cokoli z oblasti programování a chtěli by jste psát návody pro tuto stránku na mém webu.
V budoucnu by se nás mohlo sejít více a pokud by naše návody byly úspěšné, tak bych koupil nějakou dobrou doménu a vytvořili bychom společně web, který by mohl fungovat jako poradna pro programátory nebo i jako portál s trouchou té teorie a aktualit z oblasti programování.
Proto, pokud by jste měl/a zájem přispívat se mnou na tuto stránku nebo máte jiný nápad jak vytvořit nový projekt na internetu a navázat tak neformální spolupráci, tak mi napište na můj email ja[@]frantisek-preissler.cz.
xHTML
Jen pro upřesnění, budu zde probírat pouze xHTML, či-li validní kódy.
Zažil jsem školení, kde v osnově bylo napsáno, že nás naučí xHTML jazyk, ale v prezentaci školení byly příklady ze staré verze HTML a ještě v nich byla spousta chyb :-)
- Co to je xHTML?
- Verze xHTML
- Rozdíly XHTML oproti HTML
- Základní struktura xHTML dokumentu
- Všechny atributy mají hodnoty v uvozovkách
- Zákaz křížení tagů
- Tagy a atributy jsou malými písmeny
- Nepárové tagy končí lomítkem
- Párové tagy jsou párové povinně
- Všechny atributy musejí mít hodnotu
CSS
JavaScript a jQuery
PHP
.htaccess a mod_rewrite
Skripty, příklady a řešení
Rozdíly xHTML oproti HTML
xHTML je vlastně novější verze HTML, které se už přestalo vyvíjet a zůstalo na verzi 4.01.
X před HTML znamená extensible, v překladu je to rozšiřitelný.
V podstatě je xHTML vyvíjeno proto aby měl kód nějaká pravidla (normy) a ten kód, který tato pravidla splňuje je tzv. validní. Validitu stránky si můžeme nechat zkontrolovat na validátoru.
Spousta programátorů nebo kodéru mají na validitu různé názory. Někdo říká, že validita není důležitá a někdo říká opak. Já si myslím, že validita je především dobrá známka toho jak programátor píše kód. Když někdo udělá v normách nějakou chybu, tak to dokáží některé prohlížeče ignorovat a přesto zobrazí stránku správně, ale obávám se, že tomu tak nebude pořád, protože xHTML se stále vyvíjí a s ním i prohlížeče.
xHTML základní strukturu elementů tvoří tagy <!DOCTYPE html..., <html>...</html>, <head>...</head> a <body>...</body>. Jejich přesné definice a příklady Vám ukáži v následujích článcích.
xHTML dokument ukládáme do souboru s koncovkou *.html.
Také stojí za zmínku, že každý (x)HTML dokument se načítá na straně uživatele oproti PHP, Pythonu atd., které se načítají na straně serveru a uživatel nemá možnost zobrazit si v prohlížeči jejich zdrojový kód.
Verze xHTML
xHTML se v praxi dělí na tři verze.
- XHTML 1.0 Transitional
- XHTML 1.0 Strict
- XHTML 1.1
Dle mého je verze Transactional nejsnažší pro programátory, Strict je pracné a verze 1.1 je nejtěžší a také spousta věcí je ve verzi 1.1 zakázaná.
Rozdíly XHTML oproti HTML
Některé věci platily už v HTML, ale bude dobré sem napsat co nejvíce z rozdílů:
- Všechny atributy mají hodnoty v uvozovkách
- Zákaz křížení tagů
- Tagy a atributy jsou malými písmeny
- Nepárové tagy končí lomítkem
- Párové tagy jsou párové povinně
- Všechny atributy musejí mít hodnotu
- Interní javascript a styly se zapisují jiným způsobem
- Dokument má mít XML prolog.
- Dokument požaduje správný doctype.
V následujících příkladech proberu postupně výše uvenedé rozdíly a popíšu příklady.
Základní struktura xHTML dokumentu
Každý xHTML dokument má nějakou základní strukturu, kterou jsem nakousl už na začátku.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
<head>
Hlavnička stránky, kde se uvádí např. klíčová slova, titulek, kódování, autor, ...
Tato hlavička není vidět na stránce.
</head>
<body>
Ostatní kód a texty, které se zobrazí na samotné stránce.
</body>
</html>
Všechny atributy mají hodnoty v uvozovkách
V HTML bylo zvykem psát atributy bez uvozovek, ale takový atribut fungoval jen, když byl jednoslovný. Takový atribut umí prohlížeče přečíst i dnes, ale atributy by se měly psát v uvozovkách.
Nový a validní způsobname="nazev"
Zákaz křížení tagů
Všechny tagy, které píšeme bychom měli ukončovat ve zpětném pořádí v jakém jsme je psali.
Asi bude lepší, když Vám napíšu rovnou příklad.
<p>
<strong>Nějaký tučný text</strong>
</p>
Pokud chceme psát validní kód, tak se nám nesmí stát, že např. tag p budeme ukončovat ještě před tagem strong.
Tagy a atributy jsou malými písmeny
Když jsem po někom oetevřel nějaký starý HTML kód, tak jsem viděl, že psal tagy nebo atributy velkými písmeny. Já jsem je vždy psal malými, takže jsem na toto zvyklý, ale pro ty, kteří je psali velkými, tak zde je přiklad toho jak se mají psát validní tagy.
Starý způsob psaní tagů a atributů velkými písmeny:
<A HREF="stranka.html">nějaká stránka</A>
Validní způsob psaní tagů a atributů malými písmeny:
<a href="stranka.html">nějaká sránka</a>
Nepárové tagy končí lomítkem
Jednoduše každý tag, který není zakončený dalším tagem je zakončen lomítkem.
V praxi to pak má vypadat např. takto:
<img src="obrazek.jpg" alt="alternativní text" />
<link rel="stylesheet" type="text/css" href="styl.css" />
<meta name="keywords" lang="cs" content="Klíčová slova" />
Párové tagy jsou párové povinně
Naopak každý jiný tag, který je párový, musí být zakončen také tagem.
Pár validních příkladů zakončování párových tagů:
<strong>nějaký tučný text</strong>
<p>nějaký text v odstavci</p>
<html>html dokument</html>
<body>tělo dokumentu</body>
Všechny atributy musejí mít hodnotu
Atributy jsou vnořená doplňující "nastavení" tagů.
Pokud v tagu uvedeme nějaký atribut, tak musí mít nějakou hodnotu. Nesmí se stát, že by byl atribut prázdný.
Příklad několika atributů v tazích:
<p align="left">nějaký text v odstavci</p>
<img src="obrazek.jpg" alt="alternativní text" />
<select name="barva" size="3" multiple="multiple"> .... </select>
Kde např. u tagu select je atribut multiple, který bývá občas zvykem psát bez ="multiple" jako jen multiple.
Co to je CSS?
CSS (Cascade Style Sheet) je "rozšíření" ke značkovým jazykům (HTML, xHTML, XML, ...) pomocí kterého máme možnost graficky zformátovat stránku tak, aby byla uživatelsky přehlednější a líbivější.
Jaký je rozdíl mezi id a class?
Styly elementů se dělí do dvou základních atributů.
ID atribut elementu se ve stylu značí znaménkem #
Class atribut elementu se ve stylu značí tečkou .
Regulární výraz pro validaci formátu času
Potřebujeme-li pomocí JavaScriptu zkontrolovat formát času např: 12:30, poslouží nám následující regulární výraz.
^([0-1][0-9]|[2][0-3]):([0-5][0-9])$
Regulární výraz pro validaci formátu data
Potřebujeme-li pomocí JavaScriptu zkontrolovat formát data např: 1.1.2009 nebo 24.12.2009, poslouží nám následující regulární výraz.
^([1-3][1-9]|[1-9]).([1-1][1-2]|[0-9]).([0-9]{4})$
Validace e-mailové adresy pomocí MX
function is_valid_email($email, $test_mx = false){
if(eregi("^([_a-z0-9-]+)(.[_a-z0-9-]+)*@([a-z0-9-]+)(.[a-z0-9-]+)*(.[a-z]{2,4})$", $email)){
if($test_mx){
list($username, $domain) = split("@", $email);
return getmxrr($domain, $mxrecords);
}else{
return true;
}
}else{
return false;
}
}
Automatické doplnění lomena za adresu v prohlížeči
RewriteCond %{REQUEST_FILENAME} !.*(.jpg|.png|.gif|.php|.html|.py|.rar|.zi p|.mp3|.css|.js|.swf|.xml|.pdf|.vcf|.doc)
RewriteRule ^(.+[^/])$ $1/ [R=301]