.: Rubriky
plus 1) Poezie a próza
plus 2) Hudba
plus 3) Galerie
mínus 4) Film
mínus 5) Divadlo
plus 6) Věda a technika
plus 7) Mozaika (ostatní)
plus 8) Projekty POSTŘEHU

 .: Chci...
... se stát autorem
... znát lidi kolem Postřehu
... sponzorovat Postřeh
... vložit/upravit článek
Boží Dar
 .: Free MP3 album!
Vinylová budoucnost 2008 Vinylová budoucnost 2007

 .: Články podle data
<<  Listopad  >>
PoÚtStČtSoNe
       1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30       

 .: Online
Stránku si právě čtou 4 lidé.
 .: Informace
magazín Postřeh
ISSN 1803-5639
Národní knihovna ČR:
001686222
TOP 15, Fotogalerie
Chata v České KanaděChataUbytování velkých skupinPenzion v Jižních ČecháchPenzion v KunžakuRybařeníJižní ČechyPenzion StrmilovKomorníkChata u rybníka KomorníkaUbytování Česká KanadaKomorníkUbytování v Jižních Čechách
 .: Login

Jméno (přezdívka)
Heslo


Registrace nového čtenáře

 

Komentáře
ke článku: HTML, PHP, CSS a JS snadno a rychle - začátek
(ze dne 02.06.2007, autor článku: Jakub Raida)

Jméno (přezdívka): 
E-mail: 
Titulek: 
Čarodějnice létá na: 
(Ochrana proti spamu
doplňte slovo do pole)
 


zbývá znaků:   zapsáno znaků:

    

V rámci komentářů nelze používat HTML tagy.

Pro vložení tučného textu, hyperlinku nebo e-mailové adresy využijte následující značky:
[b]tučné[/b], [odkaz]www.domeny.cz[/odkaz], [email]jmeno@domena.cz[/email]

S vložením komentáře souhlasíte s našimi podmínkami

************** * **************

HTML, PHP, CSS a JS snadno a rychle - začátek
wd2.jpgTento článek má úplným začátečníkům, kteří zatím neznají žádnou syntaxi žádného programovacího jazyka zpřístupnit snadno a jednoduše tvorbu webu s HTML, CSS, PHP a JavaScriptem. Obsahuje také základy matematické a programátorské logiky. Díl 1 / 2

HTML je zkratka od Hypertext Markup Language, čili hypertextový značkovací jazyk. Cílem tohoto článku bude seznámit úplně polopaticky ty, kteří s HTML nikdy nepřišli do styku, jak psát jednoduchý web, plus pro ty šikovnější i nějaké to programování. Ještě bych chtěl podotknout všem čtenářům, kteří webdesignu rozumí, že vzhledem k polopatičnosti možná nebude můj výklad vždy po formální stránce správný, nicméně, tím lépe pro začátečníky.

 

1. Co potřebujeme?

Je spousta softwaru, který se dá použít k psaní webu a jednoduchému programování. Pro práci v některých není znalost HTML nezbytná – například FrontPage nebo Publisher (a vůbec většina Office programů – Word, Excel, Power Point atd.). Také z nich, hlavně z Publisheru, většinou vychází zbytečně složitý kód, čili těm se věnovat nebudu. Pak máme editory, ve kterým přímo píšeme kód stránky, čili máme vše více pod kontrolou a hlavně se v tom později kdokoliv vyzná. Nejjednodušším editorem je klasický poznámkový blok, nicméně my budeme zřejmě chtít použít něco komplexnějšího, doporučím například freewarový PSPad, který podporuje html plus řady programovacích jazyků, krom toho se v něm dá dobře učit syntaxe, stačí navolit Ctrl+Mezerník, prohlídnout si celý seznam příkazů, párkrát je odzkoušet a už umíte obstojně syntaxi (dá se stáhnout ze stahuj.cz). Napadá mě snad jen ten mínus a to sice, že PSPad nepodporuje zkoušení PHP (o tom níže) a že některé programovací jazyky nekompiluje.

 

2. Jaké soubory (a jakým jazykem) budeme vytvářet?

Internetové prohlížeče sice zvládnou i soubory typu doc, exe, jpg a další, nicméně, obvyklé přípony webových souborů jsou buď .htm nebo .php. Nebudu nyní zbytečně vysvětlovat, v čem je rozdíl, řeknu jen, že je vždy lepší dělat všechny soubory s příponou php. Takže si otevřeme nový soubor, nazveme ho index.php (neboť právě soubor s názvem index se automaticky otevírá po navštívení nějaké složky na internetu). Do tohoto souboru budeme psát html (kterým formátujeme text, obrázky, tabulky, grafy atd.), javascript a PHP. O těchto dvou jazycích později. K našemu php souboru si budeme také chtít vytvořit soubor css, neboli soubor s Kaskádovými styly. O tom také později.

 

3. Základní pojmy

Nejzákladnějším pojmem HTML je takzvaný tag. Co to je tag, neboli česky značka? Nuže, HTML se skládá ze dvou částí: text a tagy. Text je to, co se zobrazí ve výsledku v prohlížeči. Tagy se naopak nezobrazí, ale upraví ten text. Tagy jsou tedy značky, které určují, jak bude výsledný text formátován (zobrazen) a jaké bude mít zvláštní vlastnosti (třeba to bude odkaz, tedy nás po kliknutí přenese na jinou stránku). Tagy se píší takto:

 

<tag>Text</tag>

 

Vše mezi počátečním tagem (bez lomítka) a koncovým (s lomítkem), bude mít formátování dané tím tagem. Počáteční a koncový musí obsahovat stejné slovo, rozdíl je jen v tom lomítku. Zvláštními tagy jsou potom ty, které se nevyskytují v párech, například konec řádku (enter).

 

První řádek<br>

Druhý řádek<br>

Třetí rádek<br>

Čtvrtý řádek

 

Nebýt těchto <br> tagů, byl by všechen text na jednom řádku, protože, a to si pamatujte, html není wordovský text, to znamená, vůbec nezáleží, jak vypadá text v kódu, ale to jak je zformátován značkami. Pro větší přehlednost však doporučuji při psaní kódu hodně enterovat. Velmi důležitými tagy jsou také tagy, které jsou povinné pro každý html soubor, čili, první, co uděláte, při založení nového souboru, je, že si v něm napíšete toto:

 

<html>

<head>

<title>Zde je titulek stránky</title>

</head>

<body>

 

Zde je celý obsah stránky:

 

</body>

</html>

 

Tag <html> znamená, že vše v něm je psáno html kódem (poznámka: většina prohlížečů zvládne přečíst i kód bez těchto hlavních tagů, ale radši je pište, je to formálně správně). Tag <head> je takzvaná hlavička, do které se píší metadata (o těch se nebudu tentokrát zmiňovat, příliš důležité ani nejsou), připojení stylů, některé skripty javascriptu atd. O tom později. V <title> je titulek stránky – ten se zobrazí v úplně horní liště prohlížeče, u Opery nebo Firefoxu taky v názvu záložky. Náš index si nazveme třeba <title>Index</title>. Ještě zmíním jednu důležitou věc při psaní kódu a to je komentář. Ten slouží výhradně pro nás, abychom si mohli okomentovat vlastní kód a v prohlížeči se nikdy nezobrazí. Začínáme ho <!-- a končíme -->. Zde je tedy příklad jednoduché stránky:

 

<html>

<head>

<title>Index</title>

</head>

<body>

 

<h1>Moje drsná stránka</h1>

<div>

Tohle je stránka, kterou vytváří drsný kovboj pro drsné kovboje. Vítejte.<br>

<strong>A kdo není kovboj, ať táhne!</strong>

<!-- Strong je tag pro tučné písmo -->

</div>

 

</body>

</html>

 

Výsledek bude vypadat asi takto:

 

Moje drsná stránka

Tohle je stránka, kterou vytváří drsný kovboj pro drsné kovboje. Vítejte.

A kdo není kovboj, ať táhne!

 

Pokud jste již pochopili používání tagů, uvedu ty nejdůležitější z nich:

<link />  připojí jiný soubor, nejčastěji .css soubor (o tom později)

<script> mezi těmito tagy je umístěn kód v programovacím jazyce (viz níže)

<frame /> rámec (níže)

<noframes> text v tomto tagu se zobrazí, pokud prohlížeč neumí ukázat rámce (nepoužívá se)

<div> asi nejdůležitější tag, vymezuje oddíl textu (odstavec)

<p> také odstavec, ale navíc s odsazením nahoře i dole (zkuste div a p, poznáte rozdíl)

<h1> nadpis první úrovně (nejhlavnější)

<h6> nadpis šesté úrovně (nejméně hlavní)

<ul> nečíslovaný seznam (o tom také níže)

<ol> číslovaný seznam (níže)

<li> položka seznamu (níže)

<hr /> dlouhá vodorovná čára

<blockquote> citace

<center> text zarovnaný na střed (nepoužívá se, proč ne vysvětleno níže)

<a> odkaz – důležité (viz níže)

<br /> nebo <br> zalomí řádek (enter)

<em> nebo <i> je kurzíva čili skloněné písmo (italické)

<strong> nebo <b> je tučné písmo

<sub> dolní index (například počet atomů)

<sup> horní index (například exponent)

<big> větší písmo

<small> menší písmo

<u> podtržené písmo

<s> nebo <strike> škrtnutý text

<font> různý text (taková sama o sobě nic neříkající značka)

<img /> časté – obrázek, viz níže

<form> formulář (viz níže)

<input /> prvek formuláře

<select> rozvírací nabídka

<option> položka nabídky

<textarea> textové pole (tj. v prohlížeči do něj jde psát)

<table> důležité – tabulka (viz níže)

<tr> řádek tabulky

<td> sloupec tabulky

 

4. Stylování

Jistě vás už napadlo, že samotné tagy stačit nebudou. Proto se pro doformátování textu používá takzvané definice stylu. Ta se píše do prvního tagu, takto:

 

<tag style=“Zde definuji styl“>Zde mám text</tag>

 

Čili třeba takto:

 

<strong style=“color: red;background-color: black;“>Jsem drsný kovboj</strong>

 

Co to všechno znamená? Vezmeme si to postupně: <strong je začátek tagu, sám o sobě určuje, že text v něm bude tučný. Style=““ je definice stylu (tedy vzhledových vlastností) pro tento tag – všechna definice se píše do uvozovek. Color: znamená že budeme určovat vlastnost barva, red je samozřejmě červená. Každou jednu vlastnost oddělujeme středníkem, tedy ;. Background-color nám určuje pozadí. No a > je konec tagu. Závěrečné </strong> už nijak neměníme. Výsledek bude tedy vypadat takto:

 

Jsem drsný kovboj

 

Jelikož tagy můžou být vnořeny do sebe, budou se u všech tagů obsažených v jiném projevovat i vlastnosti určené o třídu výš, čili:

 

<div style=“background-color: black; color: gray;“>

Teď vám řeknu závažně sdělení:

<strong style=“color: red;“>Jsem drsný kovboj!</strong>

</div>

 

Bude vypadat takhle:

 

Teď vám řeknu závažné sdělení: Jsem drsný kovboj!

 

Nejvyšší tag je <body>, čili do něj si určíme například pozadí celé stránky. Nyní se podíváme na něco, bez čeho by náš web nebyl kompletní a to sice odkazy.

 

5. Odkazy

Odkazy jsou dvojího stylu – buď odkazuji relativní cestou, nebo absolutní cestou. Rozdíl je tento:

 

5.1. Relativní cesta

Pro DOSaře známá věc. Název složky znamená „vlez do téhle složky“, dvě tečky znamenají „vyskoč ze složky ve které jsi“, vše se odděluje lomítkem. Čili, představme si, že máme složku POKUS, v ní jsou potom dvě složky – STRANKY a OSTATNI. Ve složce STRANKY máme náš index.php a ve složce OSTATNÍ stránku, na kterou chceme odkázat. Naše cesta z index.php do stranka.php je ../ostatni/stranka.php. Myslím, že každý pochopil.

 

5.2 Absolutní cesta

Píšeme s http:// a odkazujeme tím na nějaký soubor někde jinde na netu. Jasné?

 

Nyní, jak napsat odkaz. Obecně takto:

 

<a href=“cesta k souboru“>Text, na který se musí kliknout, aby se zobrazila stránka</a>

 

Čili dejme tomu takto:

 

<a href=“../ostatni/stranka.php“>Klikněte zde pro stránku s dalšími fotkami obnažených kovbojů</a>

 

I v tomto tagu můžeme pochopitelně definovat styl a to sice stejným postupem jako před tím. Teď se podíváme na obrázky, kterými si oživíte web.

 

6. Obrázky

Obrázek se vkládá s parametrem src, který určuje cestu k obrázku, takto:

 

<img src=“../obrazky/cowboy.jpg“ title="Kovboj" border="0" height="20" width="60">

 

Tento tag není párový. Height a width určují výšku a šířku zobrazeného obrázku, je možno udat je i v procentech. Toť vše, jak jednoduché, že? Samozřejmě, i obrázek může být odkazem, a to tak, že do tagu odkazu dám obrázek:

 

<a href=“../ostatni/stranka.php“>

<img src=“../obrazky/cowboy.jpg“ title="Kovboj" border="0" height="20" width="60">

</a>

 

Nyní stačí kliknout na fotku obnaženého kovboje a ocitnete se na stránce plné obnažených kovbojů.

 

7. Jak na styly moderně aneb Kaskádové styly

Nyní přichází k řeči soubor s příponou .css, nazvěme ho prostě styl.css. CSS je od slov Cascade Style Sheet, čili něco jako Kaskádová listina stylů. Slova kaskádová si nevšímejte, důležité je, že se jedná o listinu stylů. K čemu to tedy je? Jednoduše řečeno: do tohoto souboru si napíšeme, jak budou všechny stránky, ke kterým je připojen vypadat, čili už to nebudeme muset definovat na každé stránce znovu a v každém tagu znovu. Jsou v podstatě dva typy, jak definovat:

 

7.1. Styl podle typu tagu

Tímto v css stylu nadefinuji, že všechny tagy jednoho typu budou mít shodné vlastnosti. Napíši tedy například:

 

Body{background-color: black; color: lime; font-size: large;}

Div{color: blue;}

 

Nyní ve všech souborech, ke kterým je styl připojen bude černé pozadí, zelenožluté velké písmo, jen mezi tagy <div> a </div> bude modré velké písmo.

 

7.2. Styl podle třídy

Definujeme si svoje vlastní třídy, které potom zvolíme u našich prvků. Třídy definujeme s tečkou na začátku. Příklad mluví jasněji, do css stylu si napíšeme třeba:

 

.sklonene{font-style: italic;color: red;}

.drsnarny{font-size: large;}

 

V našem souboru pak provedeme toto:

 

<div class=“sklonene“>

Teď vám řeknu závažné sdělení:

<strong class=“drsnarny“>Jsem drsný kovboj!</strong>

</div>

 

Výsledek bude vypadat takto:

 

Teď vám řeknu závažné sdělení: Jsem drsný kovboj!

 

Za jménem třídy se už v HTML nepíše středník.

7.3. Poznámky ke stylům

7.3.1. Barvy

Barvy nemusíte psát jen anglicky, ale i v poměru červená-zelená-modrá nebo hexadecimálně. Zde je různými způsoby řečena jedna barva:

 

HTML kód barvy: #800000

Název barvy: maroon

Procentuální vyjádření barvy: 50%,0%,0%

Poměr barev: rgb(0,255,0)

 

Pozor, i když je možno slovy říct hodně barev, existuje jen pár bezpečných css barev – jejich seznam je v článku Barvičky.css na Postřehu.

 

7.3.2. Připojení stylu k souboru

Píše se do hlavičky a to sice takto:

 

<html>

  <head>

     <title> </title>

 

      <link rel="stylesheet" href="styl.css" type="text/css" />

 

  </head>

  <body>

 

  </body>

</html>

 

Href se musí zadávat stejně jako u odkazů. Zde se počítá, že je styl v jedné složce se souborem. Nebudu vypisovat seznam všech vlastností, které může styl ošetřovat, to si najdete buď na netu, nebo (doporučuji) opět zkuste PSPad a Ctrl+Mezerník. Nyní se podíváme na velmi důležitou záležitost webdesignu a to sice layout.

 

8. Layout a co to je

Layout znamená prostě jak máte prvky na stránce rozložené. Co leží vedle sebe, co pod sebou, jak je co zarovnané atd. Vesměs se používají tři hlavní typy layoutu. Vyberte si jeden z nich a tvořte v něm:

 

8.1. Rámcový layout

Využívá tagu <frame>. Je složitý a dělá spoustu komplikací. Hodí se však například pro dělání chatu. Tento vás tedy nemusí zatím zajímat.

 

8.2. Tabulkový layout

Tento layout je nesmírně jednoduchý, intuitivní a přitom dostačující. Používá se na většině webových stránek. Postřeh je v tabulkovém layoutu.

 

8.3. Div layout

Tento layout využívá hodně kaskádových stylů a tagu <div>. Je to takový profi layout, ve kterém se dělá hodně pokročilých webů. Tím však nechci říct, že by pokročilý web nemohl být třeba v tabulkovém layoutu. Tento layout je dobrý, nicméně trošku složitější.

Jak už vás asi napadlo, my se zaměříme na tabulkový layout. Co to tedy vlastně je tabulka? Tabulka je vše, co je mezi tagy <table> a </table>. Nejdůležitějšími tagy jsou tyto <tr></tr>, které značí řádek a mezi nimiž se nachází tagy <td></td>, které značí sloupce toho řádku. Příklad:

 

<table>

<tr>

<td>První sloupec prvního řádku</td>

<td>Druhý sloupec prvního řádku</td>

</tr>

<tr>

<td>První sloupec druhého řádku</td>

<td>Druhý sloupec druhého řádku</td>

</tr>

</table>

 

Vyzkoušejte sami, jak to bude vypadat. Kouzlo tabulky spočívá v tom, že do každé buňky můžete vložit další tagy, čili, pro představu, zkuste si zobrazit tento kód:

 

<html>

<head><title>Tabulkový layout</title></head>

<body>

 

<table>

<tr>

<td style="border-style: groove; border-color: #616F45;">

            <h1>Hlavička stránky</h1>

            Zde je taková jednoduchá hlavička

</td>

</tr>

 

<tr>

<td>

  <table>

  <tr>

  <td style="border-style: groove; border-color: #616F45;">

             <h2>Levý sloupec stránky</h2>

             Zde budu normálně psát html, které má být v levém sloupci stránky

  </td>

  <td style="border-style: groove; border-color: #616F45;">

    <h2>Pravý sloupec stránky</h2>

    Zde budu psát to, co má být v pravém sloupečku

  </td>

  </tr>

  </table>

</td>

</tr>

 

<tr>

<td style="border-style: groove; border-color: #616F45;">

Zápatí

</td>

</tr>

</table>

 

</body>

</html>

 

Jestli nechápete, co jsem to tam kutil, projděte si to všechno postupně a zkuste poblbnout se zobrazováním. Vtip byl v tom, že v jednom <td> tedy v jednom sloupci druhého řádku jsem vytvořil novou tabulku, která obsahovala jen jeden řádek, ale dva sloupce. Důležité je také postarat se o to, aby v částích tabulky, kde to chcete, šel text odshora dolů, tedy normálně. Zařídíte to vložením do tagu parametru valign, takto:

 

<td valign=“top“>Tento text půjde od horního kraje buňky k dolnímu</td>

 

Tabulky se ne vždy používají jen pro layout, ale také jako… …tabulky. Zde je trochu složitější příklad tabulky pro Mayský kalendář, takzvaný Dlouhý počet (hodnoty jsem vypočítal sám J):

 

<table>

<tr>

<td style="background-color: black; color: white;">Jeden...</td>

<td style="background-color: black; color: white;">= kinů</td>

<td style="background-color: black; color: white;"></td>

<td style="background-color: black; color: white;"></td>

<td style="background-color: black; color: white;"></td>

<td style="background-color: black; color: white;"></td>

<td style="background-color: black; color: white;"></td>

<td style="background-color: black; color: white;"></td>

<td style="background-color: black; color: white;"></td>

<td style="background-color: black; color: white;"></td>

</tr>

<tr>

<td style="background-color: silver; color: black;"><strong>Uinal</strong></td>

<td style="background-color: silver; color: black;">20</td>

<td style="background-color: black; color: white;">= uinalů</td>

<td style="background-color: black; color: white;"></td>

<td style="background-color: black; color: white;"></td>

<td style="background-color: black; color: white;"></td>

<td style="background-color: black; color: white;"></td>

<td style="background-color: black; color: white;"></td>

<td style="background-color: black; color: white;"></td>

<td style="background-color: black; color: white;">= gregor. roků</td>

</tr>

<tr>

<td style="background-color: silver; color: black;"><strong>Tun</strong></td>

<td style="background-color: silver; color: black;">360</td>

<td style="background-color: silver; color: black;">18</td>

<td style="background-color: black; color: white;">= tunů</td>

<td style="background-color: black; color: white;"></td>

<td style="background-color: black; color: white;"></td>

<td style="background-color: black; color: white;"></td>

<td style="background-color: black; color: white;"></td>

<td style="background-color: black; color: white;"></td>

<td style="background-color: silver; color: black;">necelý 1</td>

</tr>

<tr>

<td style="background-color: silver; color: black;"><strong>Katun</strong></td>

<td style="background-color: silver; color: black;">7 200</td>

<td style="background-color: silver; color: black;">360</td>

<td style="background-color: silver; color: black;">20</td>

<td style="background-color: black; color: white;">= katunů</td>

<td style="background-color: black; color: white;"></td>

<td style="background-color: black; color: white;"></td>

<td style="background-color: black; color: white;"></td>

<td style="background-color: black; color: white;"></td>

<td style="background-color: silver; color: black;">20</td>

</tr>

<tr>

<td style="background-color: silver; color: black;"><strong>Baktun</strong></td>

<td style="background-color: silver; color: black;">144 000</td>

<td style="background-color: silver; color: black;">7 200</td>

<td style="background-color: silver; color: black;">400</td>

<td style="background-color: silver; color: black;">20</td>

<td style="background-color: black; color: white;">= baktunů</td>

<td style="background-color: black; color: white;"></td>

<td style="background-color: black; color: white;"></td>

<td style="background-color: black; color: white;"></td>

<td style="background-color: silver; color: black;">395</td>

</tr>

<tr>

<td style="background-color: silver; color: black;"><strong>Piktun</strong></td>

<td style="background-color: silver; color: black;">2 880 000</td>

<td style="background-color: silver; color: black;">144 000</td>

<td style="background-color: silver; color: black;">8 000</td>

<td style="background-color: silver; color: black;">400</td>

<td style="background-color: silver; color: black;">20</td>

<td style="background-color: black; color: white;">= piktunů</td>

<td style="background-color: black; color: white;"></td>

<td style="background-color: black; color: white;"></td>

<td style="background-color: silver; color: black;">7 890</td>

</tr>

<tr>

<td style="background-color: silver; color: black;"><strong>Calabtun</strong></td>

<td style="background-color: silver; color: black;">57 600 000</td>

<td style="background-color: silver; color: black;">2 880 000</td>

<td style="background-color: silver; color: black;">160 000</td>

<td style="background-color: silver; color: black;">8 000</td>

<td style="background-color: silver; color: black;">400</td>

<td style="background-color: silver; color: black;">20</td>

<td style="background-color: black; color: white;">= calabtunů</td>

<td style="background-color: black; color: white;"></td>

<td style="background-color: silver; color: black;">157 808</td>

</tr>

<tr>

<td style="background-color: silver; color: black;"><strong>Kinchilitun</strong></td>

<td style="background-color: silver; color: black;">1 152 000 000</td>

<td style="background-color: silver; color: black;">57 600 000</td>

<td style="background-color: silver; color: black;">3 200 000</td>

<td style="background-color: silver; color: black;">160 000</td>

<td style="background-color: silver; color: black;">8 000</td>

<td style="background-color: silver; color: black;">400</td>

<td style="background-color: silver; color: black;">20</td>

<td style="background-color: black; color: white;">= kinchilitunů</td>

<td style="background-color: silver; color: black;">3 156 164</td>

</tr>

<tr>

<td style="background-color: silver; color: black;"><strong>Alautun</strong></td>

<td style="background-color: silver; color: black;">23 040 000 000</td>

<td style="background-color: silver; color: black;">1 152 000 000</td>

<td style="background-color: silver; color: black;">3 200 000</td>

<td style="background-color: silver; color: black;">3 200 000</td>

<td style="background-color: silver; color: black;">160 000</td>

<td style="background-color: silver; color: black;">8 000</td>

<td style="background-color: silver; color: black;">400</td>

<td style="background-color: silver; color: black;">20</td>

<td style="background-color: silver; color: black;">63 123 288</td>

</tr>

<tr>

<td style="background-color: silver; color: black;"><strong>Věk</strong></td>

<td style="background-color: silver; color: black;">1 944 000</td>

<td style="background-color: silver; color: black;">97 200</td>

<td style="background-color: silver; color: black;">5 400</td>

<td style="background-color: silver; color: black;">270</td>

<td style="background-color: silver; color: black;">13</td>

<td style="background-color: silver; color: black;">0</td>

<td style="background-color: silver; color: black;">0</td>

<td style="background-color: silver; color: black;">0</td>

<td style="background-color: silver; color: black;">5 326</td>

</tr>

</table>

 

Nuže, fičíme v našem rychlokursu dále, abychom si konečně mohli udělat ty stránky o polonahých kovbojích.

 

9. Seznamy

Fungují podobně jako tabulky, jen zahrnují navíc odrážku a číslo nebo znak:

 

<ul>

<li>První položka nečíslovaného seznamu</li>

<li>Druhá položka nečíslovaného seznamu</li>

<li><ol>

<li>První položka vnořeného číslovaného seznamu</li>

<li>Druhá položka vnořeného číslovaného seznamu</li>

</ol></li>

</ul>

 

Víc vysvětlovat nebudu, zkuste experimentovat, jen řeknu, že je možné určit typ číslování/odrážek, pomocí parametru type, např. takto:

 

<ul type=“circle“>

 

Zde máte v tabulce (ať si je procvičíte) seřazeny různé typy odrážek pro číslovaný i nečíslovaný seznam:

 

<table border="2">

<tr>

                        <td rowspan="2">type</td>

                        <td>druh odrážky</td>

 

                        <td>disc<br>

                        circle<br>

                        square</td>

                        <td>puntík<br>

                        kolečko<br>

                        čtvereček</td>

</tr>

<tr>

                        <td style="border-style: groove; border-color: #616F45;">druh číslování</td>

                        <td style="border-style: groove; border-color: #616F45;">1<br>

                        A<br>

                        a<br>

                        I<br>

 

                        i</td>

                        <td style="border-style: groove; border-color: #616F45;">normální číslování<br>

                        velká písmena<br>

                        malá písmena<br>

                        římské číslice<br>

                        malé římské číslice</td>

</tr>

</table>

 

Tak, to bychom měli i číslování, nyní si možná budete chtít web oživit nějakým tím programováním. Nepostupujte dále, dokud dokonale neporozumíte všemu, co jsme dělali doteď.

 

10. K čemu je nám PHP a k čemu JavaScript?

PHP pracuje na straně serveru – čili je přečteno, vyhodnoceno a do prohlížeče přijde jen jeho výsledek, tedy většinou čisté html. Proto se také zdrojové kódy PHP nedají (nebo dají, ale těžko) ukrást, neboť není jak je zobrazit. PHP používáme všude tam, kde potřebujeme něco, co bude pro všechny současné i budoucí návštěvníky naší stránky, tedy například diskuze, odesílání mailů, redakční systém, vstupy do databáze atd. JavaScript naopak běží přímo v prohlížeči (pokud jej prohlížeč podporuje a uživatel ho nemá zakázaný, ale to je málokdy) a slouží k takovým blbůstkám jako mizící text, změny formátu, kalkulačka, animace kurzoru, aktivní menu apod. Probereme obojí, ovšem jen tak letem světem:

 

11. PHP

PHP píšeme přímo do kódu, většinou však před něj, např. na začátek stránky, hned pod <body>. Kód uvozujeme <? a končíme ?>, tedy například takto:

 

<html>

  <head><title>Kovbojské PHP</title></head>

    <body>

 

      <font>Důležitý citát, který hnul občanskou válkou v USA: </font>

 

     <?

        echo „Já jsem kovboj, kdo je víc?“;

     ?>

 

   </body>

</html>

 

Výsledek bude vypadat prostě takto:

 

Důležitý citát, který hnul občanskou válkou v USA: Já jsem kovboj, kdo je víc?

 

Čili jste si už asi všimli, že příkaz echo nám vypisuje text. Příkaz echo může vypisovat dokonce i tagy, takže je vypíše a pak budou přečteny jako html, čili toto:

 

<?

echo „<strong>Já jsem kovboj, kdo je víc?</strong>“;

?>

 

Bude vypadat takto:

 

Já jsem kovboj, kdo je víc?

 

Co však nesmíte do echa psát, jsou uvozovky (pochopte, ten počítač by nevěděl, jestli děláte uvozovky, které patří k echu, nebo které jsou součástí zprávy), proto, chcete-li napsat uvozovky, použijte k nim zpětné lomítko \. Takto:

 

<?

echo „<strong style=\“color: brown;\“>Já jsem kovboj, kdo je víc?</strong>“;

?>

 

V PHP můžete také operovat s proměnnými a nemusíte u nich ani definovat typ, definuje se sám. Každá proměnná má na začátku znak $. S proměnnými můžete různě operovat, počítat a vypisovat je. Pozor, neznáte-li programování, tak vězte, že = není rovná se, ale přepisuje se, čili:

 

$a=$b;

Není výrok „á se rovná bé“, ale příkaz „zařiď, aby á mělo stejnou hodnotu jako bé“. Takhle můžete s proměnnými blbnout:

 

<?

$cislo = 7;

$soucet = $cislo + 5;

$soucet = $soucet - 10;

echo $soucet;

?>

 

No, výsledkem by mělo být to, že nám prohlížeč vypíše číslo 2. V echu můžeme spojovat tečkou (spojí dva řetězce – tedy text) nebo sčítat plusem – pozor, je to rozdíl.

 

<?

$blbost_1 = 5;

$hrusky_navic = 6;

$blbost_2 = „hrušek.“;

echo „Na stromě je“.$blbost_1+$hrusky_navic.$blbost_2;

?>

 

Výsledkem bude:

 

Na stromě je 11 hrušek.

 

Nyní však potřebujeme nějak získat data od uživatele – k čemu nám bude kód, který by vypočítával pořád to samé, že? K získání dat od uživatele, tedy ke vstupu, nám většinou slouží takzvaný formulář. Ten se nepíše do skriptu (mezi <? ?>), ale normálně do HTML. Provádí se to následovně: Nejprve označíme začátek a konec formuláře tagy <form> a </form>. Vše mezi nimi je součástí jednoho formuláře. Do tagu <form> musíme nyní vyplnit ještě dva parametry a to sice action a method. Action určuje, co se stane po odeslání formuláře – na jakou stránku skočíme. Vložíme tam tedy název shodný s názvem našeho souboru, ve kterém celý kód je (index.php). Method bude post, protože potřebujeme z formuláře dostat takzvaná postdata. Za chvíli si vysvětlíme, co to je. Náš formulář nyní vypadá takto:

 

<form action="index.php" method="post">

Zde můžou být jak prvky formuláře, tak i obyčejný text

</form>

 

Nyní přidáme do formuláře formulářové prvky. Formulářový prvek je tag <input>. V něm musíme určit několik parametrů: parametr name – ten určuje, jak se prvek jmenuje a jak se bude jmenovat postdata, jenž z něj vyjde (viz dále). Volíme krátké slovo bez interpunkce. Dalším parametrem je type – tím určujeme, o jaký formulářový prvek půjde, máme tyto základní typy: text (jedná se o jednořádkové pole, do kterého můžeme v prohlížeči psát text), password (to samé, ale při psaní se zobrazují hvězdičky), radio (zaškrtávání s jednou možnost


 .: Služby & akce PT




 

 

(c) Postřeh team 2001 - 2009        postaveno na českém opensource redakčním systému phpRS

 

fotografie

|

grafika

|

hudba

|

literatura

|

umění

|

galerie

|

poezie

|

gramodeska

|

ars polyri

|

věda

|

elektro

|

technika

|

radio

|

bastlení

|

konstrukce

|

schémata

optimalizace PageRank.cz