Elektronické publikování

Transkript

1.
Základy tvorby Webových stránek
Struktura dokumentu
Psaní textu, nadpisy, odstavce
Aby se webová stránka zobrazila prohlížečem (Microsoft Explorer, Netscape navigator..), musí být napsána
v jazyce HTML, nověji XHTML (podrobnosti dále), jehož pravidel se budeme držet. Prohlížeč pak umí podle
pokynů tohoto jazyka zobrazit obrázky, text, tabulky.
Hypertext MarkUp Language užívá značky<>, kterým se říká tagy. Tagy mají vlastnosti –atributy.
Dokument HTML je textový dokument, který si můžeme prohlížet i upravovat v textovém editoru.. Je mnoho
programů pro usnadnění tvorby WWW stránek – Golden HTML Editor, Homesite, aj až po Wysiwyg software
typu FrontPage.
Párové tagy (většina) např. <b> text uvnitř se zobrazí tučně.</b>
<p> odstavec </p>
<h1> nadpis 1. úrovně </h1>
Samostatné tagy < /hr> oddělovací čára
Atributy se uvádějí dovnitř tagu, většina vlastností objektů se nastavuje pomocí tzv, kaskádových stylů
(podrobnosti dále)
<p align=”center”>text odstavce bude zarovnán doprava </p>
Pravidla:
Užíváme jednoduchý editor – např. Poznámkový blok, abychom se zbavili nadbytečných formátovacích znaků.
Dokumenty mají příponu HTM nebo HTML.
Grafika je pouze doplněk, nejdůležitější je vždy obsah. (Velké barevné obrázky a multimediální prvky mohou
podstatně zpomalit načítání stránek)
Tagy lze vnořovat, dodržujeme přitom, aby se nekřížily.
(<p><b> xxxxxxxxxxxxxx</b></p>
Chybně zapsané tagy a příkazy prohlížeč ignoruje.
Tip: Pro psaní znaků < > používejte kombinaci kláves pravý ALT+<>
Dále:
Snažte se, aby stránky měly co nejmenší velikost a co nejkratší dobu načítání .
Mějte vždy stránky zálohované pro případ selhání serveru a následné ztráty dat.
Zásadně používejte standardní fonty (Arial, Verdana, Courier, Courier New, Helvetica, Times a Times New
Roman).
Používejte malá písmena v názvech souborů, obrázků a odkazech. Některé servery rozeznávají malá i velká
písmena.
Rozvrhněte si adresářovou strukturu webu pro přehlednost. Třiďte grafiku a informace do odlišných adresářů.
Nestahujte grafiku z cizích stránek a nepoužívejte je na svých. Snažte si vytvářet vlastní grafiku.
Co přinesou stránky návštěvníkovi? Zvažte, pro koho jsou stránky určeny a co udělat, aby se návštěvník vrátil.
Stránky aktualizujte!
Stránky vytvářejte i pro rozlišení 800x600.
Po každé změně si stránky prohlížejte v Internet Exploreru a Netscape Navigatoru.
Obrázku VŽDY připisujte parametry velikosti! Předejdete tak rozházení stránky před načtením obrázků.
Používejte svojí fantazii :-)
Struktura dokumentu
Pravidla pro XHTML
Zvláště pro ty, kteří znají HTML
Jména značek se píší malými písmeny
Vnořené značky musí být ve správném pořadí
Každá otevřená značka musí být uzavřena, takže ukončování značek je povinné.
Párové tagy: <p>…</p>
Nepárové tagy <br />, <hr />
1
PDF vytvořeno zkušební verzí pdfFactory Pro www.fineprint.cz
Hodnoty atributů musí být v uvozovkách (včetně číselných)
Místo atributu name jako identifikátoru objektů na stránce se doporučuje používat atribut id.
<?xml version="1.0" encoding=“windows-1250"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtm11-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
−
tzv. preambule
deklarace verze XML, kódování − nepovinný řádek
DTD − typ dokumentu (obsahuje seznam všech prvků a atributů, které je možné v dané verzi XHTML
použít
−
jazyk XHTML 1.0 definuje tři typy dokumentů:
−
Strict (přesné) − nepodporuje tzv. zapovězené značky a rámy, k formátování písma vyžaduje kaskádové styly
−
Transitional (přechodné) − umožňuje snadný přechod od HTML dokumentů k XHTML − podporuje tzv.
zapovězené značky, nepodporuje rámy, nevyžaduje kaskádové styly
−
Frameset (rámcové) − jde o přechodný typ rozšířený o možnost použití rámců
−
začátek XHTML dokumentu − atribut xmlns specifikuje tzv. jmenný prostor (namespaces) − jedná se o
názvy všech použitelných značek a jejich atributů založený na HTML 4.01.
−
Podobně </html> ukončuje XHTML dokument
<head >
<title> Titulek </title>
<meta http-equiv="Content-Type" content="text/html";
</head>
−
charset="windows-1250">
hlavička dokumentu − další informace k dokumentu, titulek (popisek) stránky (title), kódování (pro
starší prohlížeče)
<body>
<h1 >Nadpis</h1>
<p><b><h2 >Struktura XHTML dokumentu</h2></b></p>
<p><h3>Základy formátování textu</h3></p>
<p> </p>
<hr />
</body>
</html>
−
tělo XHTML dokumentu − vkládá se sem obsah stránky, která má být vidět v prohlížeči
<html>...</html> vymezuje celý HTML dokument a <body>...</body> tělo dokumentu. <head>...</head> je
hlavička dokumentu, která obsahuje titulek stránky – <title>...</title>. Je vhodné používat co nejkratší titulek
(max. 20 znaků). Většinu zdrojového kódu budeme psát mezi tagy BODY.
Titulek volíme výstižný, jednak se zobrazuje na titulní liště prohlížeče, jednak se používá např. k ukládání
oblíbených stránek.,
2
Poznámka k dalšímu textu: Abychom mohli oživit naše první stránky, uvádíme i některé atributy, které později
budeme důsledně nahrazovat kaskádovými styly.
<body>
<body background=”obr.gif”> -použije obrázek jako tapetu dokumentu
<body bgcolor=”green”> barva pozadí
<body text=”white”> barva textu
Barvy: můžeme buď používat barevné konstanty nebo si míchat barvy sami pomocí RGB modelu
s užitím hexadecimální číselné soustavy
Např #0000FF je modrá, #FF00FF fialová <BODY text=”#FFFFFF”>
Nebo pomocí funkce rgb(x,y,z)
Kde x,y,y vyjadřují podíl červené, zelené a modré barvy v celách číslech mezi 0 a 255.
Psaní textu, nadpisy, odstavce
Nadbytečné mezery a prázdné řádky prohlížeč vynechává.
<br>
zalomení řádku
<p>…….< /p> -začátek a konec odstavce – před odstavcem mezera
<h1>…</h1> -nadpisy první až šesté úrovně
…
<h6>…</h6>
Atributy těchto značek:
<p align=”right”>-zarovnání odstavce doprava – podobně u nadpisu
Align=”left”, Align=”center” vlevo, na střed. Zarovnání vlevo je implicitní.
Align=”justify” – do bloku
Druhy písma:
<b>……< /b> - text mezi tagy bude tučně
<i>……..< /i> -kurzíva
<u>……..< /u> -podtržení
<s>……..< /s> -škrtnuté (strike)
<tt>……..< /tt>-s pevnou šířkou (Courier)
<big>……..< /big> velké
<sub>……..< /sub>dolní index
<sup>……..< /sup>horní index
<small>……..</ small> malé
Logické zvýraznění textu je (zvýraznění je závislé na prohlížeči
<em> </em> − většinou výsledkem je kurzíva
<strong> </strong> − tučné zvýraznění
Font – umožňuje nastavit velikost, barvu a typ písma. (s typem opatrně)
<font size=4 color=”red” face=”ARIAL”>…..</Font>
size – velikost v pt
color – barva
face – typ fontu
<div>
značka pro zarovnání více odstavců zároveň
<div align=”center”>
<p>XHTML</p>
<p>Tvorba WWW stránek</p>
<p>Zarovnání textu</p>
</div>
zalomení řádku
<br />
  − pevná mezera
3
Oddělovací čára
< /hr>
Lze používat atributy size (tloušťka) 1-10 bodů, width (šířka v bodech nebo procentech šířky stránky) noshade
(pokud nechceme stín), color (barevná čára ale stín nemá) a align.
< /hr size=5 width=50% align=”center”>
Praxe
Zdrojový text nejprve napíšeme v Poznámkovém bloku a uložíme s příponou htm. Otevřeme v Exploreru a
chceme-li upravovat, použijeme např. kontextové menu –(pravá myš kdekoliv v dokumentu) a zobrazíme
zdrojový text. Před opětným prohlížením je třeba zdrojový text uložit a stránku v prohlížeči aktualizovat. (Znovu
načíst)
Komentáře: pokud chceme do dokumentu vložit poznámky, které by se nezobrazovaly, vložíme je do
následujících závorek:

2.
Obrázky
Seznamy
Obrázky
Jako zdroj používáme komprimované obrázky (gif, jpg). JPG mají užívají větší kompresi (jsou menší), formát
GIF umí průhledné pozadí, případně postupné zaostřování obrázku při načítání. (Lze připravit např. ve
fotoeditoru). Můžeme použít i animované gify.
<img src=”obr.gif” alt=”text” width=”100” height=”100”>
src – umístění obrázku
alt – nápovědný text – rozhodně uvádíme, není vždy nutné obrázky zobrazovat (urychlení načítání, pro zrakově
postižené text může být zobrazen zvukově)
Další atributy (nepovinné)
align =“top“– zarovnání, rp. umístění grafiky vůči okolí
Pokud nepoužijeme přesné rozměry obrázku, riskujeme rozházení stránky při zobrazení v konkrétním prohlížeči.
Hodnoty:
top
horní okraj grafiky bude zarovnán s horním okrajem řádku
middle
střed grafiky zarovnán na účaří řádku (přibližně prostředek)
bottom
dolní okraj bude zarovnán se spodním okrajem řádku
left
levý okraj grafiky na levý okraj řádku, text obtéká grafiku zprava
right
texttop
horní okraj zarovnán s horním okrajem textu na řádku
absmiddle
střed grafiky na střed řádku
baseline dolní okraj na účaří řádku
absbottom
dolní okraj se spodním okrajem řádku
width =“100“ požadovaná šířka, Říká prohlížeči, jak je obrázek velký, takže nedochází k deformaci při načítání.
Než obrázek na stránky vložíme, zjistěte si v nějakém grafickém editoru, jaké má přesné rozměry. Tyto atributy
můžeme také používat ke zvětšování a zmenšování obrázků. Pokud zadáme větší rozměry obrázku, obrázek se
sice zvětší, ale jeho kvalita je vůči jeho původní velikosti horší. Proto přenecháme zvětšování a zmenšování
obrázků grafickým editorům
height =“200“ – výška
Pokud je šířka a výška v procentech, přizpůsobí rozměry obrázku stránce, případně tabulce, v pixelech naopak.
vspace=“10“ – určuje kolik místa bude vynecháno kolem grafiky ve svislém směru
(vertikální odsazení)
hspace=“10“ – horizontální odsazení
4
border=“5“ – šířka rámečku (hlavně když se používá obrázek jako hyperlink)
Poznámka: Pro přesné umístění grafiky do textu podle našich představ je třeba použít tabulku nebo pozicování
v kaskádových stylech.
Seznamy
Seznamy s odrážkami
<ul type=“disc“>
<lh> záhlaví seznamu – nemusí být</lh>
<li> 1.položka </li>
….
</ul>
Typ odrážky TYPE= “circle”, “square”
Seznamy lze vnořovat.
Číslovaný seznam
<ol type=”a” start=”počáteční hodnota“ align="right">
<lh> záhlaví seznamu – nemusí být </lh>
….
</ol>
Typy číslování: “a” – malá písmena
“A” – velká
“i” - římské číslice malé
“I”velké
“1” – arabské číslice
continue – číslování navazuje na předchozí číslovaný seznam (při přerušení např. obrázkem)
start – počáteční hodnotu uvádíme vždy jako číslo
Typ, případně hodnotu lze uvádět i u jednotlivých položek
<li type=”disc”>
<li value=”3”>
Definiční seznamy jsou odlišné od předchozích dvou. Můžeme s ním vytvořit např. slovníček pojmů, který
obsahuje termíny a jejich vysvětlení. Uvozuje se tagem <dl> a jednotivé položky pak <dt> a <dd>
<dl>
<dtT>název 1
<dd>text
<dt>název 2
<dd>text
</dl>
3.
Hypertextové odkazy
Multimédia
Hyperlinky
Hypertextové odkazy mohou vést na:
• Jinou stránku
• Jinou pozici téže stránky (záložka)
• Jiný dokument (obrázek, soubor, program…)
5
Jako odkazovací prvek se dá použít text, obrázek a další objekty.
<a href=”adresa”>odkaz</a>
Adresa:
Adresa dokumentu na témže počítači – je bezpečnější uvádět ji absolutně a dokumenty vhodně umísťovat do
složek vzhledem k HTML dokumentu, při kliknutí lze rozhodnout, zda se dokument otevře nebo stáhne
(“C:\obrazek.gif”)
Internetová adresa (http://www.seznam.cz)
Pokud potřebujeme vytvořit odkaz, který by zajišťoval stažení nějakého souboru, do URL uvedeme přesnou
adresu, kde se soubor nachází.
<a href="http://www.odkaz.cz/soubor.zip">soubor.zip</a>
•
Odkaz na jiné místo téhož dokumentu: Místo nejprve označíme
<a id=”aktualizace”> bla bla bla </a>
……………………………………………………….
<a href=”#aktualizace”>HOP</a> -při kliknutí na link HOP se skočí na červený text bla bla bla
Obrázek jako odkaz
Grafická tlačítka apod.
<a href=“adresa“><img src=”obr.gif” width…..align….></a>
Galerie obrázků – několik malých obrázků – odkazů, při kliknutí na ně se zobrazí v původní velikosti. Aby se
odkazy nenačítaly příliš dlouho, připravíme si pro ně přiměřeně zmenšené původní obrázky – skicy.(thumbnails)
Poznámka: Také čára může obsahovat grafiku -<hr src=”obr.gif”>
Vkládání multimediálních prvků
Užíváme minimálně, veškerá multimédia na internetu velmi zpomalují načítání.
Video
<img dynsrc=”jmeno.avi”> Video pracuje s formáty .avi,.mov, mpeg. Lze požít atribut loop=číslo, který udává,
kolikrát se má video přehrát. Výhoda – nevolá se externí přehrávač
Nebo
<a href=”jmeno.avi”>video</A> přehraje se při aktivaci odkazu
Zvuk
Do hlavičky dokumentu
<head>…
<bgsound src=”tryskac.wav” loop=3>přehraje se automaticky třikrát
</head>
Nebo
<a href=”tryskac.wav”>tryskáč</a> přehraje se při aktivaci odkazu – ale uživatel musí mít instalován program
pro prohlížení videa
Běžící text
<marquee direction=“right“ behavior=“scroll“ scrollamount=10 scrolldelay=200> utíkám doprava</marquee>
Mezi tagy marquee lze umístit i obrázek.
Direction – směr, scrolldelay – rychlost (přesněji pomalost)
Barvu odkazu, navštíveného a aktivního odkazu můžeme uvést uvnitř tagu body:
<body link=“barva“ vlink=”barva” alink=”barva”….>
6
4.
Tabulky
Používají se kdekoliv chceme dosáhnout přesného grafického uspořádání textu, obrázků a dalších prvků na
stránce. /Jinak lze téhož dosáhnou pozivováním v CSS)
<table >začátek tabulky
<th> hlavička tabulky – nepovinná, prohlížeč ji zpravidla odliší </th>
<tr>
začátek řádku
<td> obsah buňky </td> <td> obsah buňky </td> <td> obsah buňky (</td> je nepovinná)
</tr>
konec řádku
……
</table>
ukončovací tag tabulky
Atributy:
<table>
<table border=“3“ width=“50%“ height=“50%“ bgcolor=”red” align=”left” cellspacing=“2“
cellpadding=“4“ frame=”above”>
border – tloušťka rámečku (vnějšího obrysu), pokud chybí – bez rámečku
bgcolor – barva pozadí, pokud není specifikováno, je tabulka průhledná
width – šířka tabulky (v pixelech nebo procentech aktuálního okna)
height – výška
cellspacing – velikost mezery mezi jednotlivými buňkami
cellpadding – velikost mezery mezi okrajem buňky a jejím obsahem
frame – způsob zobrazení vnějších obrysů tabulky
none – žádný obrys (implicitně)
above, bellow jen horní (dolní) strana
hsides horní a dolní
lhd,rhs (jen levá a jen pravá)
vsides (levá a pravá)
border – všechny čtyři strany
Další možnosti: cols=počet sloupců tabulky (napomáhá prohlížeči počáteční rozvržení), colspec=“L8 C20 R50“
–specifikuje šířky a zarovnání jednotlivých sloupců
Rules=“rows“ – vzhled tabulkové mřížky (none –žádné, rows –čáry mezi řádky, cols –čáry mezi sloupci, all –
všechny čáry (implicitní), groups –vodorovné čáry mezi skupinami (THEAD,TFOOT,TBODY)
<tr> <td><th>
<tr align =“left“ valign=“bottom“ bgcolor=”blue”
align – zarovnání – left,right,center, justify, char (zarovnání na znak, implicitně des.tečka nebo
čárka –char= znak, na který se bude zarovnávat)
valign –zarovnáni ve svislém směru –bottom, top, middle, baseline
bgcolor – barva pozadí
<td> a <Tth mají navíc další aributy:
<td nowrap width=30% colspan=2 rowspan=2>
nowrap – potlačuje automatické dělení řádků uvnitř buňky
width – šířka
colspan – počet sloučených sloupců
rowspan – počet sloučených řádků
Poznámky:
Tabulka může mít obecnější strukturu:
<TABLE>
<CAPTION> nadpis tabulky <CAPTION>
<COLGROUP>
<COL> -specifikace společných vlastností skupiny sloupců
</COLGROUP>
7
<THEAD> záhlaví tabulky </THEAD>
<TFOOT> zápatí </TFOOT>
<TBODY>
<TR>……
</TBODY>
</TABLE>
Příklady:
<table border=”2” width=”60%” >
<tr>
<td> 11
<td>12
</tr>
<tr>
<td> 21
<td>22
</tr>
</table>
<table border=”3” width=”60%” >
<tr>
<td> 11
<td rowspan=2>12<br />22
</tr>
<tr>
<td>21
</tr>
<tr>
<td colspan=2> 31 32
</tr>
</table>
5.
Kaskádové styly – úvod,
vlastnosti písma
Vývoj HTML si postupně vynutil vytvoření samostatného nástroje pro grafickou úpravu stránek – kaskádové
styly – CSS. (Cascading Style Sheets). Jsou založeny na textovém formátu.
Umožňují definovat způsob zobrazení (druh a velikost písma, zarovnání atp.) každého prvku na stránce. Styl
přitom není přímo součástí textu stránky a tak může být jednak zápis stránky přehlednější, jednak se píše
pohodlněji a rychleji a připravený styl se dá použít pro víc dokumentů.
Definice stylu
Styl se skládá vždy alespoň z jednoho pravidla.
Příklad definice stylu:
h1 {color:blue} (modré písmo nadpisu 1. úrovně)
Pravidlo má dvě části:
Selektor (h1 – o který prvek se jedná) a deklaraci, která obsahuje vlastnost (color)a její hodnotu (blue).
Selektor může být libovolný prvek HTML, některé vlastností uvedeme dále.
Připojení stylu k dokumentu
Je možné styl definovat přímo pro konkrétní prvek pomocí atributu style, ale tento způsob zcela likviduje
výhody práce s kaskádovými styly, proto ho používáme jen ke změně stylů výlučných elementů.
Příklad: <p style = “color: blue “>text odstavce </p>) (modré písmo odstavce)
Další možnostu:
1. V záhlaví dokumentu pomocí kontejneru <style>
<style type=”text/css”> ….</style>
8
2.
Uložení definic stylu v samostatném souboru s doporučenou příponou .CSS (Připravíme např.
v Poznámkovém bloku); v tomto případě musí být uložení definice ve stránce oznámeno prostřednictvím
značky <link>
<LINK rel=”StyleSheet” href=”JmenoSouboru.css” type=”text/css”>
Tento způsob je zvlášť výhodný, když potřebujeme, aby víc dokumentů mělo stejný vzhled.
3. Externí styl volaný z dokumentu CSS
<style type=”text/css”>
<!-toto je komentář v html
@import url(“priklad.css”);
h1 {color: green}
-->
konec komentáře
priklad.css je externí soubor se stylem
Slučování definic
Pro několik selektorů lze použít tutéž deklaraci, také několik deklarací lze sloučit, pak se oddělují středníkem.
h1, h2, h3 {color: red}
P < font-size: 12 pt; font-family: sans-serif;>
Dědění vlastností
Pokud uvnitř jednoho elementu použijeme druhý, pokud nepředepíšeme jinak, předdefinovaná vlastnost se dědí.
<h1> Tohle je<em>opravdu</em> důležité.</h1> (Tag em se používá pro zvýraznění implicitně kurzívou) –
celý text bude mít barvu definovanou pro styl <h1>
Chceme-li natsavit nějakou vlastnost pro celý dokument, použijeme element <body>
body {color:pink; background-color:black} (barva písma a barva pozadí)
Některé vlastnosti písma
Font-family
Druh písma. Pozor – nejvýš dva druhy písma v jednom dokumentu, jinak dostáváme oživení ma úkor
přehlednosti.
Většinou vystačíme s obecnou rodinou.
• serif (patkové, dobře čitelné z papíru)
• sans-serif (bezpatkové, vhodné pro obrazovku)
• monospace (neproporcionální)
• fantasy (dekorativní)
• cursive (kurziva)
Příklad:
p {font-family: serif}
Požadované písmo lze určit konkrétně (pozor, aby ho konkrétní prohlížeč znal), pak vždy před obecnou rodinu a
víceslovný název do apostrofů.
Příklad:
p {font-family: ‘Times New Roman’, Times, serif}
Font-weight
Tučnost písma, výchozí hodnota normal.
Možnosti: normal, bold, bolder, lighter,100, 200, 300, 400, 500, 600, 700, 800, 900
Příklad:
p {font-weight: bold}
Font-size
hodnoty lze zadávat různým způsobem, např absolutně (xx-small, small, medium, large,x-large,xx-large) nebo
relativně (smaller, larger)
nebo je možné použít:
Relativní délkové jednotky nebo procenta (em-násobek výšky abs. písma , px –bod obrazu
Absolutní délkové jednotky (cm, mm,, in, pt, pc 1 pt=1/72in =1/12 pc, 1 in=2,54 cm)
Příklad:
h1 {font-size: 1.5em} je totéž jako h1 {font-size: 150%}
9
Další vlastnosti:
Font-style
o Italic (italic)
o Oblique (skloněné)
o Normal (normální)
Font-variant
small-caps (kapitálky)
normal
Line-height
výška řádku – v číslech, délkových jednotkách nebo procentech
Poznámka: Kaskádové styly lze určovat také pomocí sdružených vlastností:
Příklad:
p {font-style:normal; font-variant:small-caps;font-weight:bold;font-size: 12px; line-height:14px; font-family:
serif}
Záleží zde na pořadí jednotlivých vlastností, font-size a font-family jsou povinné.
Komentáře
Do definice stylu se zapisují mezi dvojici znaků /* */
6.
Kaskádové styly – selektory,
barvy a pozadí
Výběr prvku podle jména:
p {…}
h1 {…}
Výběr všech prvků: * {…}
Kontextové selektory (výběr prvků podle umístění)
Místo pracného nastavování všech vlastností, stačí nastavit základní hodnoty a vyjmenovat výjímky. K tomu se
právě hodí kontextové selektory.
Např:
h1 em –vyhovuje všem EM, které jsou uvnitř h1.
li ol – vlastnost vnořeného seznamu.
Př.
h1 em { color:silver}
li ol, li ul {font-size: smaller}
Výběr prvků podle atributu ID
Pokud stejný element potřebujeme v různých výskytech zobrazit rozdílně, můžeme použít atribut ID
Př.
V dokumentu XHTML: <P id=”modry”> Text modréhoodstavce </p>
V CSS:
p#modry {color:blue} (p#modry se píše bez mezery}
ID je identifikátor – musí začínat písmenem, pak lze používat písmena, číslice, podtržítka a pomlčky a být
unikátní v rámci jednoho dokumentu. (Pokud straší IE neumí ID, můžeme používat name)
Třídy
umožňují určit vlastnost pro několik prvků, které spolu nesouvisejí.
Příklad:
Dokument: <h1 class=”modre”>hhhhhhhhhh</h1>
………………………….
<p class=“modre“>………………………..</p>
10
CSS: modre {color:blue}
Pseudoprvky:
Příklad: p: first-line {font-weight: bold} – první řádek oodstavce bude tučně
p: first-letter{font-weight: bold} – první písmeno
Elementy span a div
slouží k označení částí dokumentu.
Elementy HTML lze dělit do dvou skupin :
• řádkové, které umožňují formátovat úseky textu: a, em, b, span
• blokové – pomyslné kontejnery: odstavce, tabulky, body, div
Odkazy nastavujeme speciálními selektory .
A:link {color:blue}
A:visited {color:red}
A:active {color:green}
Pseudotřídy
formátování odkazů, které se hodně používá:
Příklad:
a:link {background-color: yellow}
barva pozadí nenavštíveného odkazu
a:visited {background-color: yellow}
barva pozadí navštíveného odkazu
a:hover {background-color: yellow}
pozadí odkazu zežloutne, když je nad ním umístěn kurzor.
Barvy a pozadí
Color
Určení barvy všech druhů elementů
názvová konstanta (navy)
rgb(x,y,z) – x,,y,z –čísla z intervalu 0..255 (rgb(255,0,0) je červená, rgb(255,255,00 – žlutá)
#rrggbb analogický způsob pomocí hexadecimálního zápisu
Příklad: a {color: black} (totéž a {color: rgb(0,0,0)}
Background-color
Barva pozadí pro všechny druhy elementů, není dědičná, výchozí hodnota je transparent –průhledná.
Určuje se stejně jako color.
Příklad:
a:visited {background-color: yellow}
Background-image
Výchozí hodnota none (žádný), jinak obrázek na pozadí.lze opět použít pro všechny elementy
Příklad:
p {background-image: url(“obr.jpg”}
Background-repeat
pokud je obrázek na pozadí menší, než oblast, kterou á pokrýt, je implicitní vlastnost Background-repeat
repeat – obrázkem se plocha potapetuje ve vodorovném i svislém směru.
no-repeat – obrázek se neopakuje
repeat-x – obrázek se opakuje ve vodorovném směru
repeat-y – obrázek se opakuje ve svislém směru
Příklad:
body {background-image: url(“film.gif”); background-repeat: repeat-y}
11
Žlutozelená
Světle zelená
Mořská zelená
Temné moře
Tmavě zelená
Oranžová
Tmavá oranž
Červená korálová
Rajčatová červená
Světlá červeň
Karmín
Čokoládová
Indiánská
Cihlová červená
Hnědá
Okrová
Tmavě červená
Růžová
Hluboká růžová
Světle šedá
Tmavě šedá
Tmavě tyrkysová
Fuchsiová
Fialová
Světlá modř
Tmavá fialová
Tmavá fuchsiová
Modrofialová
Šedomodrá
Indigová
Tmavá ocelová
Ocelová modř
Modrá obloha
Tmavě modrá
Vzorník zákl. 16 odstínů –VGA
bílá
žlutá
fialová
červená
tyrkysová
žlutozelená
modrá
šedá
stříbrná
olivová
purpurová
hnědočervená
modrozelená
zelená
námoř.modř
černá
white
yelllow
fuchsia
red
aqua
lime
blue
grey
silver
olive
purple
maroon
teal
green
navy
black
Rozšířený vzorník na 64 odstínů
Slonová kost
Sněhobílá
Omšelá bílá
Kouřově bílá
Béžová
Azurová
Světle tyrkysová
Akvamarín
Jasná tyrkysová
Světle žlutá
Zlatá
Khaki
Zelenožlutá
Kukuřicová
ivory
snow
antiquewhite
whitesmoke
beige
azure
lightcyan
aquamarine
cyan
lightyellow
gold
khaki
greenyellow
cornsilk
yellowgreen
lightgreen
darkseagreen
seagreen
darkgreen
orange
dark orange
coral
tomato
lightcoral
crimson
chocolate
indianred
firebrick
brown
saddlebrown
darkred
pink
deeppink
lightgrey
darkgrey
darkcyan
magenta
violet
lightblue
darkviolet
darkmagenta
blueviolet
cadetblue
indigo
darkslateblue
steelblue
deepskyblue
darkblue
Background-attachment
pokud se element nevejde do vymezeného prostoru, pohybujeme se po něm posuvníkem. Standardní chování
pozadí je sdílet tento pohyb (scroll) pokud chceme, aby pozadí bylo pevné a popředí rolovalo po něm, použijeme
např. p { Background-attachment: fixed}
Background-position
Obrázek na pozadí je standardně umístěn v levém horním rohu a jeho kopie (při tapetování) vedle a pod ním.
Přesunutí obrázku na jinou pozici – tato vlastnost, užívají se parametry top, left, right, bortom a center. (střed
prvku). Implicitní hodnota je 0%, 0% (levý horní roh)
Příklad:
body {background-image: url(logo.jpg); background-position: center 50%)
Background
Sdružená vlastnost, vše lze zadat najednou v lib. pořadí a oddělit mezerami.
Příklad:
body {background: url(“bla.gif”) repeat-y yellow}
12
7.
Kaskádové styly – rámečky a okraje,
některé vlastnosti textu
Základem dokumentu jsou blokové prvky, které k sobě přiléhají nebo jsou do sebe vnořené.Každý je ohraničen
rámečkem, který vymezuje vnější a vnitřní okraj.
rámeček (border)
vnitřní okraj (padding)
rámeček (border)
obsah bloku
vnější okraj (margin)
Většinu vlastností rámečků uvedeme pouze pomocí sdružených vlastností, což je rychlejší.
Border-width
Příklad:
p {border-width 1px 2px 1px 2px} – zápis udává tloušťku jednotlivých stran rámečku odshora ve směru
hodinových ručiček. Kromě přesných hodnot můžeme použít: thin, medium a thick. (tenká, střední, tlustá)
Border-style
určuje styl orámování jednotlivých stran .
Hodnoty:
none
bez rámečku (implicitně)
dotted
tečkovaná čára (IE až do verze 6, tloušťka min. 2px)
dashed
čárkovaná
solid
plná
double
dvojitá
groove
žlábek
ridge
hřeben
inset
vtlačený reliéf
outset
vystouplý reliéf
Příklad:
p {border-width: thick; border-style: dashed solid dotted double}
Pokud uvedeme jen jednu hodnotu, budou všechny čtyři strany stejné, dvě hodnoty se týkají nejprve
horizontálních, pak vertikálních stran, tři všeho kromě levé strany.
Pozor, implicitní hodnota je none, takže pokud ji nezměníme, rámeček se nezobrazí.
Border-color
analogicky:
Příklad:
p {border-width: thick; border-color: blue red green yellow}
Border
sdružená vlastnost, která umožňuje zadat vše najednou, ale pouze pro všechny čtyři strany najednou. K
definování všech vlastností pro jednotlivé strany lze použít sdruženou vlastnbost border-top,….border-left.
Padding
je šířka vnitřního okraje.
13
Hodnota se skládá podobně jako u rámečku z jednoho až čtyř údajů zadaných pomocí délkových jednotek nebo
procent
Příklad:
p {padding: 10px}
Margin
šířka vnějšího okraje, podobné jako u padding.
Příklad:
table {margin: 10px}
Některé vlastnosti textu
Word-spacing
ovlivňuje velikost mezislovních mezer. Nejde o rozměr mezery, ale o hodnotu, která bude přičtena (nebo
odečtena) k výchozí hodnotě. (normal)
Příklad:
p {word-spacing: -10px} – pozor, může dojít k překrývání slov.
Letter-spacing
vzdálenost mezi písmeny –možnost použít proložení znaků
Příklad:
h1: {letter-spacing: 3px}
Text-decoration
podtržení, přeškrtnutí, čára nad textem, blikání (v IE nefunguje)
Hodnoty vlastností: none, underline, overline, line-through, blink
Často se užívá k tomu, aby se hypertextový odkaz nebyl podtržen.
Příklad:
a: hover {background-color: black; color:red; text-decoration: none}
Text-transform
užívá se k převodu na všechna písmena malá (lowercase), všechna velká(uppercase) nebo první písmena velká
(capitalize). Výchozí hodnota je none.
Příklad:
h1 {text-transform: uppercase}
Zarovnání, odsazení
Text-align
Zarovnání textu: left, right, justify (do bloku)
Příklad:
h1 {align: center}
Text-indent
Odsazení v délkových jednotkách nebo procentech. }procenta vždy udávají podíl nadřazeného prvku)
Příklad:
p {text-indent: 50%}
Vertical-align
umožňuje měnit svislé zarovnání řádkových elementů. (span) V procentech se vztahuje k výšce řádky aktuálního
prvku. (line-height)
Příklad:
span {line-height: 50px; vertical-align:15px}
Kromě délek lze použít vlastnosti:
baseline, modele, sub (dolní index –účaří prvku je posunuto dolů), super (horní index), text-top, text-bottom, top,
bottom
14
8.
Kaskádové styly – vlastnosti zobrazení obsahu prvků,
obtékání, pozicování
Display
Vlastnost být blokovým nebo řádkovým elementem lze upravit.
Hodnoty:
block – vytvoříme z řádkového elementu blokový
Příklad: a {display: block} – každý odkaz se bude chovat jako odstavec
inline – naopak
list-item – položka seznamu
none – nezobrazí se
List
Pokud je u prvku vlastnost display list-item, můžeme nastavit další vlastnosti položek seznamů (případně
všechno najednou pomocí sdružené vlastnosti list-style)
List-style-type
• disc
• circle
■ square
I. upper-roman
i. lower-roman
1. decimal
a. lower-alpha
A. upper-alpha
none
List-style-position
definuje umístění odrážky ve vztahu k textu, který odráží.
Outside – odrážka je mimo prvek
Inside – odrážka je součástí prvku
Příklad:
p { List-style-type : square; list-style-position: inside}
■ jjjjjjjjjjjjj jjjjjjjjjjjjjjjjjjjjjjjjjjjjjj jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj jjjjjjjjjjjjjjjjjjjjjjjj
jjjjjjjjjjjjjjjjjjjjj
List-style-image
Místo odrážky lze použít obrázek
Příklad:
li {list-style-image: url(“kulicka.gif”)}
Šířka a výška prvků
U blokových elementů bez rámečku a vnitřních či vnějších okrajů, u IE včetně.
Výchozí hodnota je auto – šířka prvku v konkrétním prohlížeči závisí na rozměrech okna a může se měnit.
Width
v procentech nadřazeného objektu nebo v délkových jednotkách absolutně.
Příklad:
div { width: 700px}
Height
analogicky
15
Obtékání
Float
Pomocí této vlastnosti můžeme přesunout prvek doleva (left) nebo doprava (right) a vytvořit z něj plovoucí
prvek, obsah následujících objektů, (pokud se vejde) se pak vypisuje vedle počínaje horní hranou. Implicitně
prvky plovoucí nejsou. (none)
Příklad:
#obr {margin-left: 20px; float: right}
Clear
Pokud při užití float chceme, aby se určitý prvek přesunul pod obtékaný objekt, musíme definovat tuto vlastnost.
Její hodnoty určují stranu, kde se ruší účinky plovoucích prvků.
(left, right, both(obě))
Příklad:
p {clear:left}
pokud je před tímto odstavcem vlevo plovoucí prvek, neovlivňnuje nijak jeho zobrazení.
Pozicování prvků
Není-li určeno jinak, prohlížeč zobrazuje řádkové elementy za sebou, blokové pod sebe. zadáním vlastnosti
position můžeme tento stav měnit.
Position – static, absolute, relative (static – implicitní hodnota)
relative
prohlížeč relativně umístěné prvky posune o udanou hodnotu z místa, kde by se zobrazily normálně. Na jejich
původním místě zůstane prázdné místo, může dojít k překrývání prvků.
Příklad:
img {position: relative; bottom: 50px}
obrázek bude o 50 pixelů výš než původně.
Posouvat lze ve směrech: bottom, top, left, right o délkové jednotky nebo procenta.
Příklad: right – prvek se posune zprava doleva, bottom – zdola nahoru
Absolute
prvek se přesouvá podobným způsobem, ale od hrany nejbližšího nadřazeného pozicovaného prvku, případně od
hrany dokumentu. Zobrazí se na určeném místě a ostatní objekty se chovají, jako by neexistoval.
Viditelnost a přetékání
Visibility – hodnoty hidden a visble, jedná se o skrytí či zobrazení elementu. (visibility:hidden na rozdíl od
display : none není prvek zrušen, ale pouze není vidět).
Overflow – ovlivňuje chování prohlížeče, když se (například nastavením většího písma) nevejde do jemu
vyhrazeného prostoru.
Hodnoty: visible, hidden, scroll, auto
Auto: pokud by došlo k přetečení, přidá prohlížeč k objektu posuvníky.
9.
Klikací mapy, orientační seznámení s rámy
Umožňují vymezit tzv, citlivé části obrázku, které se chovají jako hypertextové odkazy.
V sekci <map>….</map> definujeme příslušné úseky odkazové mapy pomocí kruhů, obdélníků, případně
mnohoúhelníků a potom vložíme příslušný obrázek s atributem usemap.
Souřadnice útvarů si nejprve zjistíme ve vhodném editoru obrázků.
<map name=”jmenomapy”>
<area shape=rect coords="10,10,50,50" href="dok1.htm">
<area shape=circle coords="10,10,50" href="dok2.htm">
<area shape=poly coords="10,10,….60,20" href="dok3.htm">
</map>
<img src="obr.jpg" usemap="#jmenomapy ">
16
rect – obdélník, coords – souřadnice levého horního a pravého dolního rohu
circle – kruh, coords – souřadnice středu a velikost poloměru
poly – mnohoúhelník coords – souřadnice vrcholů
name=”jmenomapy” – definuje název mapy, který usemap="#jmenomapy "přiřadí příslušnému obrázku.
Příklad
<map name="utvary">
<area shape=rect coords="81,60,148,115" href="red.htm">
<area shape=circle coords="67,197,40" href="yellow.htm">
<area shape=poly coords="146,182,224,201,192,94" href="green.htm">
</map>
<img src="obr.jpg" usemap="#utvary">
Rámy
Umožňují rozdělit okno prohlížeče na části, v každé části může být jiná stránka.odkaz v jednom rámu může
vyvolat načtení stránky do jiného rámu. Rámy se tak využívají k tvorbě navigačních menu.
Obecně se k rozvržení stránek dává přednost pozicování a tabulkám, proto je uvádíme pouze pro úplnost.
Definice rozložení rámů
FRAMESET – rozložení rámů
<frameset rows=”50%,50%”>
rows=”x,y.z”-podélné dělení okna (řádky)
<frameset cols=”10%,50%,40%”>
definice obsahu jednotlivých rámů
</frameset>
<FRAMESET> -v dokumentu, který popisuje rozložení rámů nahrazuje <BODY>
Dělení okna se může udávat v pixelech, v procentech nebo pomocí znaku *. Konkrétní hodnoty se nejprve
přiřadí, při jedné hvězdičce se do ní dosadí zbytek, při více hvězdičkách je dělení zbytku okna mezi ně
rovnoměrné.
Příklady:
<frameset rows=”100,*,*” cols=”50%,50%>
definice obsahu 6 rámů
<frameset>
<frameset rows=”100,*” >
definice obsahu horního okna
<frameset cols=”30%,70%”>
definice obsahu dvou sloupcových oken
</ frameset>
</ frameset >
Definice obsahu rámů
<frame src=”dokument.htm”>
Příklad: (yellow,red a green jsou html dokumenty, které mají pouze def. Příslušnou barvu pozadí)
<frameset rows="100,*" >
<frame src="yellow.htm">
<frameset cols="30%,70%">
<frame src="red.htm">
<frame src="green.htm">
</frameset>
</ frameset>
</html>
Poznámka:
Chceme-li si prohlédnout stránku s rámy, můžeme použít kontextové menu (pravé tlačítko myši) pro zobrazení
konkrétních rámů a Zobrazit/ zobrazit zdrojový kód pro zobrazení stránky, která definuje rozložení rámů.
17
Další atributy FRAME
Noresize – nedá se měnit velikost myší
Scrolling=”yes” rám bude opatřen rolovacími pruhy, další hodnoty: no, automatic (implicitní hodnota, podle
potřeby)
Frameborder=1 –šířka rámečku rámu, (implicitní hodnota) pokud nechceme rámeček, použijeme hodnotu 0.
Marginwidth, marginheight –vzdálenost obsahu rámu od okrajů
NAME –jméno rámu, užívá se v odkazech. Potom aktivace odkazu v jednom rámu může způsobit načtení stránky
do jiného, cílového rámu. V odkazech se odvoláváme na rámy prostřednictvím atributu target
Příklad
Dokument ramy.htm –obsahuje rozložení rámů
< frameset cols="30%,70%">
<frame src="barvy.htm">
<frame src="yellow.htm"name=Barva>
</frameset>
Dokument barvy.htm – obsahuje menu, které se zobrazí v levém rámu
<body bgcolor="silver">
<h1>
<ul>
<li> <a href="yellow.htm" target=Barva>yellow</a>
<li> <a href="red.htm" target=Barva>red</a>
<li> <a href="green.htm" target=Barva>green</a>
</h1>
</body>
Dokumenty pro zobrazení barev: <body bgcolor="yellow"></body></html>
Poznámky:
Pokud je cílový rám pro všechny odkazy stejný, můžeme do hlavička dokumentu umístit příkaz:
<head>…..
<base target=Barva>
…</head>
Pokud cílový rám neexistuje, prohlížeč otevře nové okno.
Pokud chceme , aby se odkazovaný dokument otvíral v celém okně, nikoliv v rámu, použijeme target=”_ top“
10.
Formuláře
Dynamické webové stránky
obsahují interaktivní prvky – formuláře, dialogy, obrázky se mění když je přejedeme myší apod. Takové prvky je
ovšem nutné programovat. Užívají se zde technologie jako applety jazyka JAVA nebo zařazení programů ve
skriptovacích jazycích –VBSript, JavaScript, PHP.
18
Abychom s nimi mohli pracovat je ovšem ideální se seznámit s příslušným jazykem důkladněji, ale dají se také
používat hotové applety a skripty, pokud víme, jak je do svých stránek zařadit. Nikdy ovšem nevydáváme cizí
práci za vlastní, vždy uvedeme odkaz na stránku autora. Specielně zařazení appletů dobře zvažujeme, nejen
prodlužují dobu zobrazení stránky, ale mohou způsobit i zhroucení návštěvníkova počítače.
Formuláře
slouží k získávání informací od uživatele a k předávání informací uživateli.Mohou být zpracovány programem
pracujícím přímo ve stránce (Javascript) nebo skripty běžícími na serverech. (PHP) K formulářům se většinou
váží obslužné akce.
Uživatel vidí formulář jako dialogovou část stránky obsahující různá vstupní pole, tlačítka a přepínače. Při jeho
vytváření jednak připravíme grafickou podobu pomocí prvků formuláře a jazyka HTML, jednak příslušnou
obsluhu, čili zpracovávající skript.
Příklad:
<form action=url skriptu” method=”jak přenést data”>
tělo formuláře
</form>
Hodnota atributu action je adresa skriptu, který bude zpracovávat zadaná data.. Method určuje způsob, jak se
data předávají serveru.
Get: data jsou předávána v rámci URL adresy skriptu – vhodné pro menší formuláře.
Post: pro rozsáhlejší formuláře
Prvky formuláře
•
•
•
INPUT
TEXTAREA
vytvoření vstupního pole pro zadávání delšího textu
SELECT
umožňuje vytvořit seznamy, z nichž lze vybrat jednu či více položek.
Element INPUT
Slouží k vytvoření většiny formulářových prvků. Druh prvku určuje atribut TYPE. Pokud se chceme na prvky
formuláře odvolávat ve skriptech, je třeba je pojmenovat – atribut id (při problémech name)
<input type=druh prvku id=”jméno“ >
Text
Vstupní pole <input type=”text“ id=“jméno“ size=“10“ maxlength=“5“ value=“blabla“>
Size
velikost políčka ve znacích, při více znacích text v políčku roluje
Maxlength
maximální délka, kt. lze do pole zapsat
Value
hodnota, která se v políčku objeví při zobrazení stránky
Password
<input type =”password“ >
chová se jako text, ale při psaní do pole se místo znaků objeví hvězdičky.
Checkbox
<input type=“checkbox“ >
slouží k výběru jedné nebo více možností, zobrazí se jako čtvereček. Zaškrtnutí udává atribut checked. Skupinu
políček můžeme pro zpracování skripty pojmenovat stejně.
<form name=”f”>
<table width=50% >
<tr>
<th colspan=3> Který měsíc Vám vyhovuje?</th>
<td><input type=”checkbox” id=”X“ checked >květen</td>
<td>< input type =”checkbox” id=”X“ >červen</td>
<td>< input type =”checkbox” id=”X“ checked >červenec</td>
19
</table >
</form>
Příklad: (Javascript)Pak se na jednotlivá políčka můžeme odvolávat např.
if (document.f.X[0].checked (f je zde jméno formuláře)
Radio
<input type=”radio“ >
nabízí výběr právě jedné varianty z několika
<input type=”radio” NAME=”X“ checked >žena
<input type=”radio” NAME=”X“ >muž
Tlačítka
<input type=”submit” >
tlačítko pro odeslání formuláře. Může mít (ostatní tlačítka rovněž) atribut VALUE, kt. udává text na tlačítku
<input type=”reset” >
nastaví všechny prvky ve formuláři do původní podoby
<input type =”button” value=”klikni” onclick=”výpočet()”>
obecné tlačítko, při jeho stisknutí se volá funkce výpočet, definovaná dříve skriptem.
Tlačítko s grafikou
<button type=”button” >
<h3>haha</h3><img src=”obr.gif”>
</button>
dají se zde použít všechny dříve definované druhy tlačítek.
TextArea
Slouží k zadávání delších textů.
Příklad:
<form>
Co nám chcete sdělit?<br>
<textarea cols=20 rows=3>
Ahoj
</textarea>
</form>
atributy cols a rows určují počet sloupců a řádků textového pole
Select
Tento element slouží k výběru jedné či více položek z několika. Jednotlivé položky se uvádějí jako obsah prvku
OPTION, jehož atribut VALUE se (jako skoro všude) používá pro zpracování skripty. Položky s atributem
SELECTED budou předem vybrány.
Atribut SIZE uvádí počet najednou zobrazených řádek seznamu, pokud není uveden, zobrazí se jen jedna a
seznam se rozbalí po kliknutí na šipku. Atribut MULTIPLE umožňuje vybrat najednou více položek ze seznamu.
Příklad:
<form>
Vyber si zvířátko:
<select id=”Zver”>
<option value=”t”>Telátko</option>
<option value=”p”>Pštros</option>
<option value=”k”>Kočička</option>
</select>
Co mu dáš k jídlu?
<select Name=”Ham” multiple size=8 align=”top”> size zde udává počet řádků
<option value=”t”>Trávu</option>
<option value=”p”>Mléko</option>
<option value=”k”>Ostatní zvířátka</option>
</select>
20
11.
Úvod do skriptů PHP
proměnná a její hodnota
Poznámka: Doporučujeme zopakovat si úvod do programování – pojem algoritmus, program, vstup a výstup,
základní příkazové konstrukce.
Pro experimentování s PHP a MySQL na lokálním počítači budeme potřebovat adresář WAMPP2 v kořenovém
adresáři C.
Abychom mohli interpretovat skripty, je třeba nejprve spustit dávkový soubor Apache_start. Skripty ukládáme do
Wampp2, podložka projekty a spouštíme je z internetového prohlížeče, kde nejprve nastavíme adresu:
http://localhost/
Vytvořil ho 1995 Rasmus Lerdorf, původně program ukládal informace o návštěvnících jeho domovské stránky.
(Personal home page)
Příkazy tohoto jazyka vykoná server před odesláním webové stránky a uživatel obdrží vygenerovaný HTML
kód.
Výhody: jednoduchost, možnost práce s databázemi, nezávislost na platformě.
Příkazy se zapisují přímo do zdrojového kódu HTML stránky, od značek HTML se oddělují:
<?php
php jde většimou vynechat
tělo skriptu
?>
Dokumentaci lze získat např. na www.php.cz
Poznámka: jako u většiny jazyků odvozených z jazyka C, C++ lze většinu programového kódu, který dále
uvádíme zapsat i jinak. Snažíme se zvolit vždy zápis přehledný, srozumitelný a čitelný (ne ovšem nejkratší).
Ke srozumitelnosti programů přispívají komentáře.
Skripty píšeme v jednoduchém textovém editoru (poznámkový blok, kromě řetězců doporučujeme používat
anglickou klávesnici.
Komentáře
Jednořádkové: // krátké poznámky
Několikařádkové /*………………………………………
…………………………………………………………………….*/
Proměnná
Proměnnou si můžeme představit jako místo v paměti, kde je uložena její hodnota.
Identifikátor (jméno) proměnné musí začínat znakem $ . Rozlišují se velká a malá písmena.
$x je jiná proměnná než $X. Nesmí začínat číslicí.
Proměnné mohou být například celočíselné , racionální s desetinnou tečkou nebo řetězce – –posloupnost znaků
mezi apostrofy nebo uvozovkami.
Přiřazovací příkaz:
$x=10;
$x=10*2;
Jednotlivé příkazy se oddělují středníky.
Je-li na pravé straně výraz, nejprve se vyhodnotí, pak dosadí do proměnné na pravé straně.
$x=$x+1; tedy přidá k obsahu proměnné $x jedničku, takže byla-li předtím 20, bude 21.
( Ekvivalentní krátký zápis $x++.)
Výpis hodnoty proměnné – příkaz echo
echo $x;
vypíše hodnotu proměnné $x do stránky.
Výpis řetězce: echo “Ahoj můj milý návštěvníku!“
Do příkazu echo lze umístit jako řetězce HTML značky:
echo “<p> Ahoj můj milý návštěvníku! </p> <p>Zdalipak víš, že 3*7=$x </p>“;
V jednodušších případech lze při vnoření dalšího řetězce použít apostrofy, jinak, chceme-li uvozovky uvnitř,
musí je předcházet \.
(echo "<form name='f''>" nebo echo "<form name=\"f\">"
Příklad:
<html>
<head >
<title> Pozdrav </title>
<meta http-equiv="Content-Type" content="text/html"; charset="windows-1250">
21
</head>
<body>
<?
$jmeno="nejmilejší návštevník";
$pocet=100;
echo "<h1><p>Ty, který jsi můj $jmeno, </p> <p> posílám Ti $pocet pozdravů.</p></h1>";
?>
</body>
</html>
Pokud tento skript uložíme na server a otevřeme webovým prohlížečem, zobrazí se okno:
Získání hodnoty proměnné z formuláře:
Pokud má např. některý prvek formuláře identifikátor id=”nazev” , můžeme se na příslušnou hodnotu odkazovat
ve skriptu pomocí proměnné $nazev
Poznámka: pokud IE dělá problémy s id, lze použít starší označení identifikátoru name.
Příklad:
Nejprve připravíme html dokument s formulářem:
<html>
<head >
<title> Pozdrav </title>
<meta http-equiv="Content-Type" content="text/html"; charset="windows-1250">
</head>
<body>
<form action="2.php" method="get">
Jak se jmenujete?
<input type ="text" name="jmeno"><br />
<input type="submit" value="odeslat">
</form>
</body>
</html>
"2.php“ je jméno obslužného skriptu (url adresa, pokud leží
ve stejném adresáři.
Skript lze zapsat jednoduše:
<?
$pocet=100;
echo "<h1><p>Ty, který jsi můj $jmeno , </p> <p> posílám
Ti $pocet pozdravů.</p></h1>";
?>
22
Jakou verzi PHP používáme a další informace nám zobrazí skript:
<?
phpinfo();
?>
Aktuální čas zobrazí skript: <?echo Date("d.m.Y H:i:s")?>
Některé operátory
+
*
/
.
%
==
!=
<
>=
&&
||
součet
rozdíl
násobení
dělení
spojení řetězců
zbytek po celočíselném dělení
je rovno
je různo
je menší
je větší nebo rovno
a současně
nebo
$x=$y+23
“Dobrý “.”den”
Příklad:
Pomocí formuláře zadá uživatel velikost hran kvádru, skript vypíše objem a povrch.
Dokument s formulářem (kvádr.htm)
<html>
………..
<h1> Kvádr </h1>
Zadejte velikost hrany <b>a</b> v metrech:
<input type ="text" name="a"><br />
Zadejte velikost hrany <b>b</b> v metrech:
<input type ="text" name="b"><br />
Zadejte velikost hrany <b>c</b> v metrech:
<input type ="text" name="c"><br />
</form>
………………..
3.php
<html>
………….
<h1> Vyřešený kvádr </h1>
<img src="kvadr.jpg" align="center" />
<h2>
<?
$V=$a*$b*$c;
$S=2*($a*$b+$a*$c+$b*$c);
echo "Objem kvádru je $V metrů krychlových. <br />";
echo "Povrch kvádru je $S metrů čtverečních. <br />";
?>
</h2>
</body>
</html>
12.
Úvod do PHP –
větvení programu
Příklad: chceme vypočítat absolutní hodnotu čísla podle definice:
Když x>=0 tak |x|=x
jinak (x<0) |x|=-x
23
Zápis v php:
<?
if ($x>=0)
{
$abs=$x;
}
else
{
$abs=-$x;
}
echo "Absolutní hodnota zadaného čísla $x je $abs . <br />";
Obecně:
if ( platí podmínka)
{
příkaz nebo několik příkazů oddělených středníky se provede
}
else
{
provede se jiný příkaz nebo příkazy
}
Příklad:
Uživatel zadá dvě čísla a dostane zprávu, jestli je první číslo dělitelné druhým.
if (($x % $y)==0)
{
echo "číslo $x je dělitelné číslem $y beze zbytku.";
}
else
{
echo "číslo $x není dělitelné číslem $y beze zbytku.";
}
?>
Příklad:
Uživatel si z rozbalovacího seznamu vybere oblíbené zvířátko a skript mu ho zobrazí.
Formulář
<html>
<head>
<title> výběr obrázku </title>
</head>
Vyber si zvířátko:
<select name="zver">
<option value="t">Telátko</option>
<option value="k">Králík</option>
<option value="j">Kočička</option>
</select>
</form>
</body>
</html>
Skript:
<?
if ($zver=="k")
{
$obr="k.jpg";
}
else
24
{
if ($zver=="j")
{
$obr="j.jpg";
}
else
{
$obr="t.jpg";
}
}
echo "<img src=$obr>";
?>
Další příklady vítají návštěvníka na stránce podle datumu a času. Využívá se funkce date s mnoha parametry.
(viz dokumentace k php)
Jednoduchý příklad:
<? if (date(“A”)==”AM”)
{
echo “Hezké dopoledne“;
}
else
{
echo “Hezké odpoledne“;
}
?>
Příklad:
Přání dobrého dne podle denní doby. Date(H) vrací hodinu z intervalu 00-23
<?php
$hod=Date(H)*1;
if ($hod <= 6)
{$doba="Proč nespíš?";}
else
if ($hod<=10)
{$doba="Dobré ráno";}
else
if ($hod<=13)
{$doba="Dobré poledne";}
else
if ($hod<=17)
{$doba="Dobrý večer";}
else {$doba="Dobrou noc";}
echo "<h3>Přejeme Vám $doba</h3>";
?>
13.
Úvod do PHP – cyklus
Pokud potřebujeme naprogramovat opakované provádění nějakých příkazů, používáme cyklus. Zde se
seznámíme s příkazem while, který zajišťuje provádění akce, dokud platí určitá podmínka. Akce musí zajistit,
aby podmínka přestala platit, jinak by se cyklus opakoval do nekonečna.
Obecně:
while (platí podmínka)
{
Prováděj příkaz (nebo příkazy oddělené středníky)
}
Příklad:
Výpis čísel od jedné do 10
$x=0;
while ($x<10)
{$x=$x+1;
echo "<BR>";
25
echo $x;
}
Příklad:
Výpis slova AHOJ postupně se zvětšujícím písmem
$x=0;
while ($x<7)
{$x=$x+1;
echo "<font size=$x>AHOJ</font><BR>";
}
Příklad:
Výpočet přirozené mocniny čísla opakovaným násobením základem:
(Uživatel zadá základ z a exponent n pomocí vstupního formuláře.)
$moc=1;
$i=1;
while ($i<=$n)
{$moc=$moc*$z;
$i=$i+1;
}
echo $moc;
Příklad:
Výpočet největšího společného dělitele dvou čísel pomocí Euklidova algoritmu:
(Algoritmus vychází z toho, že pokud něco dělí obě čísla, dělí také jejich rozdíl a tedy:
pokud a>b, nsd(a,b)=nsd(b,a-b),
jinak pokud a=b nsd(a,b)=a=b
jinak nsd(a,b)=nsd(a,b-a).
Dokud si tedy čísla nebudou rovna, zmenšujeme hodnotu většího z nich o hodnotu menšího.
while ($a!=$b)
{
if ($a>$b)
{
$a=$a-$b;
}
else
{
$b=$b-$a;
}
}
echo $a;
Poznámka:
První tři příklady se dají typicky řešit s dalším typem cyklu –FOR, který používáme, víme-li předem, kolikrát se
bude opakovat.
Příklad 1: Výpis čísel od jedné do 10
for ($x=1; $x<=10; $x=$x+1)
{
echo "<BR>";
echo $x;
}
14.
Úvod do PHP –
pole, spolupráce s textovým souborem
Často potřebujeme pracovat s údaji, které mají určitou složitější pevnou strukturu – například se skládají z řady
následujících údajů. (Čísla, jména osob…podobně jako pole v databázích) Protože se často také ve spojení
s MySQl využívají a prakticky stejně se s nimi pracuje v JavaScriptu, alespoň krátce se o nich zmíníme.
Příklad:
$jmena bude obsahovat posloupnost jmen: Eva, Anna, Hana, Marta, Anna, Iva, Karla .
26
Pak se na jednotlivá jména můžeme odvolávat:
$jmena[0]
“Eva”
$jmena[1]
“Anna”
…
$jmena[6]
“Karla”
Inicializovat podobné pole (dosadit do něj výchozí hodnoty) lze například takto:
$jmena=array("Eva", "Anna", "Hana", "Marta", "Anna", "Iva", "Karla" ).
S polem pracují některé funkce:
count($jmena) vrací počet prvků pole – v našem případě 7.
array_push($jmena,"Anna") –přidá na konec pole další Annu.
Podobně array_pop($jmena) odebere prvek z konce pole.
sort($jmena) – setřídí pole: textové lexikograficky, číselné podle velikosti.
Když potom chceme pole nějak zpracovat – například jeho položky a zjistit, kolikrát se v něm vyskytuje jméno
Anna, můžeme použít následující cyklus:
$i=0;
$pa=0;
while($i<count($jmena))
{
echo $jmena[$i];
echo "<br />";
if ($jmena[$i]=="Anna")
{
$pa++;
}
$i++;
}
echo "Anna je tam $pa krát.";
Velkou výhodou je možnost jediným příkazem přečíst pole ze souboru uloženého na serveru.
$pole=file("jméno souboru včetně cesty")
Pro předchozí příklad bychom mohli předem připravit textový soubor, každé jméno na zvláštní řádek a potom
jména využívat – vytisknout počet prvků a obsah souboru, přidat nakonec jméno z formuláře, znova vytisknout,
setřídit podle abecedy a opět vytisknout. (viz pole2.php)
<?
$jmena=file("pole2.txt");
$i=0;
$pocet=count($jmena);
echo "Pocet zaznamu v souboru je $pocet.";
echo "<br />";
while($i<count($jmena))
{
echo $jmena[$i];
echo "<br />";
$i++;
}
echo "*******************";
array_push($jmena,"konec");
…….
sort($jmena);
….
Vhodnější by ovšem bylo pro tisk pole, který se třikrát opakuje použít funkci: (Více o funkcích v javaScriptu)
<?
function vypis($pole)
{
$i=0;
$pocet=count($pole);
echo "Pocet zaznamu v souboru je $pocet.";
echo "<br />";
while($i<count($pole))
{
echo $pole[$i];
27
echo "<br />";
$i++;
}
echo "*******************";
}
$jmena=file("pole2.txt");
vypis($jmena);
array_push($jmena,"konec");
vypis($jmena);
sort($jmena);
vypis($jmena);
?>
Další příklady:
Výpis pole čísel z textového souboru, výpočet aritmetického průměru , hledání maxima...
15.
Úvod do JavaScriptu –
základní příkazové konstrukce
JavaScript je mnohem jednodušší jazyk, než Java (Java původně odvozena z jazyka C) Kód je přímo součástí
stránky a interpretuje se v prohlížeči. Hodí se například k programování různých hříček s textem a obrázky
(změna obrázku při přechodu myší apod.) nebo k ošetření kontroly vstupu formulářů. (Aby se zbytečně
neodesílala chybná nebo nevyplněná data) Doporučuje se umístit ho do sekce
<head>
<script language=”JavaScript”>
…zdrojový kód…
</script>
</head>
ale záleží na použití. Buď se provede při načtení stránky, nebo definuje nějakou akci (podprogram, v
JavaScriptu funkce), která se provede jako reakce na určitou událost – klepnutí myši, změna obsahu vstupního
pole, stisknutí klávesy apod.)
Jednotlivé příkazy zdrojového kódu se oddělují středníky.
Použití funkce:
<head>
<script language=”JavaScript”>
function jmeno(parametry)
{…..kód funkce}
</script>
</head>
<body>
………
OnUdálost=”jmeno(hodnota parametrů)“
………
</body>
Událost ( např. onclick – klepnutí myši, onmouseover – přejetí myší) pak můžeme přiřadit různým objektům
stránky: <img src="blue.jpg onmouseover="zmena() ">
Text skriptu obvykle píšeme jako komentář (v HTML ), aby starší prohlížeče zbytečně
nevypisovaly zdrojový text skriptu.
Komentáře lze používat i v běžných HTML dokumentech, většinou slouží jako poznámky pro lepší orientaci.
Příklad:
<Script language="Javascript">
window.alert("první skript");
x=window.prompt("Jak se jmenuješ?");
28
document.write("Ahoj návštěvníku jménem ");
document.write(“<h1>“)
document.write(x);
document.write("<HR width=80%>")
document.write("Vítám Tě u nás.")
document.write("</h1>");</script>
window.alert("první skript") – zobrazí informační okno
window.prompt("Jak se jmenuješ?") – zobrazí vstupní okno, do kterého uživatel zadá hodnotu. Pokud
nechceme, aby se nabízela hodnoty „undefined“ , přidáme text, který chceme, aby se zobrazil, případně prázdný
řetězec v uvozovkách.
window.prompt("Jak se jmenuješ?",“Sem napiš“), window.prompt("Jak se jmenuješ?",““)
x=window.prompt("Jak se jmenuješ?") – do proměnné x se dosadí hodnota, kterou uživatel zadal do vstupního
okna.
Jedná se o přiřazovací příkaz – obecně má tvar proměnná = hodnota(výraz)
Document.write(x) Hodnota proměnné x se zapíše do dokumentu.
document.write(“<h1>“) – zapíše do dokumentu příkaz jazyka HTML – tedy to co bude dál psáno, bude stylem
h1. (Ananlogicky funguje document.write(“<hr width=80%>“)
document.write(“Ahoj návštěvníku jménem“) – zapíše do dokumentu text v uvozovkách.
Příklad:
Uživatel zadá do vstupního okna postupně dvě čísla a do dokumentu se zapíše jejich součet a rozdíl.
x=window.prompt("1.číslo","");
y=window.prompt("2.číslo","");
document.write("<h1>");
document.write("Součet= ");
document.write(x*1+y*1);
document.write("<br");
document.write("Rozdíl=");
document.write(x-y);
document.write("</h1>");
</Script>
Násobení hodnot u součtu je proto, aby bylo zřejmé, že jde o čísla. Jinak operátor + způsobí, že se pouze čísla
napíší vedle sebe
Podmíněný příkaz
Podmíněný příkaz v JavaScriptu má tvar:
If (podmínka) příkaz;
Podmínka se vždy uvádí v kulatých závorkách
Nebo:
If (podmínka) příkaz1;
Else příkaz2;
Pokud se některý z příkazů skládá z více vlastních příkazů, udáváme je ve složených závorkách.
Podmíněné výrazy mohou obsahovat relační operátory: <,>,
<=,>=,(větší nebo rovno, menší nebo rovno),
==,(rovná se vyjadřuejem dvěma rovnítky vedle sebe)
!=(je různo)
Příklad:
Zeptáme se uživatele,kolik je mu let a podle toho mu nabídneme občerstvení.
x=window.prompt("Kolik je Ti let?","");
if (x>=18) window.alert("nalejeme ti rum");
else window.alert("nalejeme ti podmáslí");
</Script>
29
Příklad:
Podle odpovědí uživatele zobrazíme obrázky, window.confirm je okno, které při stisknutí tlačítka OK vrací
hodnotu pravda, jinak nepravda. Výběr obrázku zajistí funkce vyber, která se spustí při stisknutí tlačítka.
Document.images je jakési pole obrázků v dokumentu. Ten, který je na strámce umístěn jako první, má index 0,
takže se na něj odkazujeme jako na dokument.images[0], další indexy jsou 1,2,…
<script language="javascript">
function vyber()
{
if (window.confirm("Máš rád zvířátka?"))
document.images[0].src="tvor.jpg";
else
document.images[0].src="kytky.jpg";
if (window.confirm("a co města"))
document.images[0].src="obr.jpg"
}
</Script>
</head>
<body>
<center>
<img src="prázdný.jpg" width=296 height=202>
<form>
<Input type=button value = "dialog" onclick="vyber()">
</form>
</center>
Cyklus
Cyklů mívají programovací jazyky více druhů, seznámíme se opět s cyklem while.
While (podmínka)
{ příkazy…
}
Příkazy ve složených závorkách (odděleny středníky) se opakují tak dlouho, dokud platí podmínka v závorkách.
(Aby cyklus skončil, musí tyto příkazy nějak podmínku ovlivnit, jinak vzniká nekonečný cyklus, který velmi
nepříjemně zablokuje počítač).
Příklad:
Uživatel je požádán o zadání hesla a dokud ho správně nezodpoví, program ho nepustí dál.
x=window.prompt("Udejte heslo","");
while (x!="123")
{window.alert("chybne heslo");
x=window.prompt("Udejte heslo","");
}
document.write("<h1>Ahoj šikulko</h1>");
</Script>
16.
JavaScript – Funkce
Podprogramy, kterým se v programování většinou říká funkce nebo procedury, se používají když potřebujeme
nějakou posloupnost akcí používat jako celek. (Opakuje se, chceme, aby se provedla při stisknutí tlačítka nebo
kliknutí na obrázek apod.)
V sekci Head nadeklarujeme funkci – čili popíšeme, co bude dělat a v sekci Body ji pak spustíme. (zavoláme)buď automaticky nebo – častěji, jako reakci na určitou událost.
Příklad:
Ukazuje jen oddělenou definici funkce a její volání
function cara()
hlavička –uvádí název, pod kterým se funkce volá a v závorce parametry
{document.write("*****************************<BR>");
ve složených závorkách vlastní
akce
}
30
</Script>
</HEAD>
<BODY>
cara()
</Script>
</BODY>
volání funkce v programu
Příklad:
function cara()
{document.write("*****************************<BR>");
}
Stejná funkce jako v předchozím případě, bude se volat při stisknutí prvního tlačítka.
function cara1()
{a="******************";
document.all.sem.innerHTML=a;
}
Opět stejná funkce, ale pokud chceme aby se čára objevila v témže dokumentu, je třeba v něm definovat
kontejner <span id="sem">….</span>, do kterého se čára zapíše. Id je idnetifikátor kontejneru, takže když do
něj pak chceme zapisovat, použijeme příkaz document.all.sem.innerHTML=a; All se týká všech objektů
dokumentu, innerHTML formátu .
function cara2(n)
{n=window.prompt("Zadej počet hevězdiček","");
i=0;
a="";
while (i<=n)
{i=i+1;
a=a+"*";}
document.all.sem.innerHTML=a;
}
</Script>
Ve funkci čára 2 je cyklus, při každém průchodu přidáme do řetězce a jednu hvězdičku a zvýšíme hodnotu (i)
počítadla hvězdiček. Až počítadlo (a počet hvězdiček v čáře) dosáhne hodnoty zadané uživatelem, cyklus skončí.
</head>
<body>
<center>
<form>
<input type=button value="čára v novém okně" onclick=cara()>
<input type=button value="čára tady" onclick=cara1()>
<input type=button value="čára jakou chceš " onclick=cara2()>
</form>
Tady bude čára, pokud si to budeš přát <br>
<span id="sem">
</span>
.
17.
Datum a čas v JavaScriptu
Začlenění Java Appletů do stránek
Zobrazení data:
Dnes=new Date();
Document.write(dnes) Do proměnné dnes se dosadí dnešní datum. New je metoda, sloužící k aktivizaci
objektu Date, v dokumentu se vypíše datum a čas v neupravené formě. den=dnes.getDay();
funkce getday
vrací pořadové číslo dne objektu Date.
31
mesic=dnes.getMonth(); pořadové číslo měsíce
rok=dnes.getYear();
rok
Podobně fungují funkce getHours(), getMinutes(), getSeconds()
Pozor na velká a malá písmena!
Příklad:
Hodinky
V textovém poli formuláře se na kliknutí objeví aktuální čas.
<SCRIPT language=Javascript>
function cas()
{
dnes=new Date();
hod=dnes.getHours();
min=dnes.getMinutes();
sek=dnes.getSeconds();
if (hod<10)
c="0"+hod;
if (min<10)
min="0"+ min;
if (sek<10)
sek="0"+sek;
c=hod+":"+min+":"+sek;
document.hodinky.cifernik.value=c;
}
function aut()
{dnes=new Date();
hod=dnes.getHours();
min=dnes.getMinutes();
sek=dnes.getSeconds();
if (hod<10)
c="0"+hod;
if (min<10)
min="0"+ min;
if (sek<10)
sek="0"+sek;
c=hod+":"+min+":"+sek;
document.hodinky.cifernik.value=c;
setTimeout("aut()",1000);
}
</script>
</head>
<body>
<center>
<hr>
<form name="hodinky">
<input type="text" size=10 name="cifernik" >
<input type=button value="hodinky" onclick="cas()">
<hr>
<input type=button value="automatika" onclick="aut()">
</orm>
</center>
setTimeout("aut()",1000);-funkce aut bude automaticky volána každou sekundu.
Java – applety
Java je moderní objektově orientovaný jazyk, který se používá pro vývoj internetových aplikací. Java – applet je
speciální typ programu, který funguje pouze v prostředí webového prohlížeče. Nemá povolen některé operace
(např. přístup na disk) – což řeší problematiku bezpečnosti. Jsou schopny běžet na počítačích s různými
operačními systémy, protože se nepřekládají do strojového kódu (exe) ale do tzv. bajtového ködu, který je
32
interpretován JVM (Java Virtual Machine – je v současnosti součástí nových verzí prohlížečů, jinak se dá
stáhnout z Internetu.)
Applety se hodí např. k vylepšení grafického designu stránek (navigační lišty, animovaná tlačítka) ale také
obsahují hry, chaty, simulace apod.
Kde hledat:
http://www.javaboutique.com
http://www.gamelan.com
Většinou jsou archivovány v souborech .zip, kde kromě souboru s appletem je soubor .htm s experimentální
stránkou a textový soubor s návodem, jak applet použít.
Soubory s applety mají příponu .class. Tento soubor uložíme do adresáře s webovou stránkou, kde chceme
applet použít
Na vlasní stránku se umístí do tagů <applet>…</applet>
<applet code=”soubor.class> width=150 height=150>
<param name=”barva” value=”red”>
…</applet>
code – umístění souboru s appletem
width – velikost okna, ve kterém má applet běžet (lze vynechat)
height - dtto.
param – použijeme dle návodu autora, pokud v programu můžeme specifikovat nějaké vlastní hodnoty. (např.
barvu nebo rozměry něčeho)
18.
Úvod do MySQL
Poznámka: Doporučujeme zopakovat si úvod do databází – pojem záznamu, pole, , základní příkazy SQL. .
Stručně:
Databáze je většinou tvořena několika souvisejícími tabulkami, které popisují nějaký reálný objekt. (knihovnu,
vaše koníčky, podnik…) Tabulky se skládají ze záznamů – údajů o objektech. (jméno, adresa, plat, IQ…) údaje
mohoi být číselné, textové, ale také logické nebo obrázky. Množina údajů stejného typu pro všechny údaje v
tabulce se nazývá pole. (všechna jména) Tabulky navrhujeme co nejmenší, tak, abychom se vyhnuli nadbytečným
údajům, ale také tak, abychom je mohli vzájemně propojovat podle určitých společných polí. jedno pole, jehož
hodnoty jsou unikátní pro každý záznam (neexistují dva záznamy se stejnou hodnotou tohoto pole) definujeme
jako primární klíč, podle kterého je tabulka setříděna.
Budeme pracovat s textovým klientem mysql, který je součástí distribuce databáze.
Spustíme nejprve apache, pak dávku mysql_start. Z adresáře mysql/bin spustíme klienta mysql. Klient zobrazí
svůj prompt mysql> a můžeme zadávat příkazy, které oddělujeme středníky.
Novou databázi založíme příkazem:
create jméno_databáze;
drop jméno_databáze;
odstranění databáze
show databases;
zobrazí všechny databáze
use jméno_databáze;
otevření hotové databáze, se kterou chceme pracovat.
33
show tables;
vypíše seznam tabulek vytvořených v aktuální databázi.
create jmenotabulky (
vytvoření tabulky
jmeno1.udaje typ,
….
jmeno posledního udaje typ
);
Nejběžnější typy polí:
varchar
textové pole o max. 256 znacích
text
text o délce max. 65565 znaků
date
datum (yyyy—mm-dd)
int
celé číslo od -2147483648 do 2147783647
float
reálná čísla
Pokud definujeme sloupec s atributem NOT NULL,nemohou obsahovat prázdnou hodnotu.
Klíčovou položku v definici uvádíme jako parametr příkazu PRIMARY KEY
Typ int znamená celé číslo, double reálné číslo a char(20} řetězec o 20 znacích
insert into jmenotabulky (hodnota1.udaje,….hodnota posledniho udaje)
drop table jmeno;
explain jmeno;
vložení záznamu do tabulky,
položky se oddělují čárkami, text
se vkládá mezi apostrofy.
vymazání tabulky
zobrazí strukturu tabulky
Další příkazy ukážeme přímo na příkladech s tabulkou králící.
select * from kralici;
zobrazí všechny údaje z tabulky
select jmeno, cena form kralici; zobrazí z tabulky pouze uvedená pole
select * from kralici where cena>100
zobrazí králíky dražší než 100 penez.
Relační operátory se užívají stejné jako v PHP, podmínky je možno spojovat ": and – a zároveň, or – nebo
select jmeno, cena form kralici where jmeno='Rváč' or jmeno='Kulička'
Výsledky výpisů mohou být setříděny:
select jmeno, cena from kralici order by jmeno; požadované výpisy setříděné dle jména abecedně
update kralici
změní cenu a jméno králíka číslo3.
set cena=500,
jmeno='Bublinka'
where id=3;
delete from kralici where cena<100
smaže nevratně všechny levné králíky
34
PhpMyAdmin
prostředí vytvořené v PHP, které umožňuje pohodlnější správu databází. Některé funkce, který tento program
využívá, si ukážeme dále.
Spuštění:
V internetovém prohlížeči zapíšeme adresu:
http://localhost/phpmyadmin/
V prostředí se dá intuitivně dobře pracovat,.
Struktura – změna struktury databáze (přidání pole, změny typu apod.)
Projít – zobrazení údajů
SQL – zapíšeme přímo příkaz v SQL
Vybrat – zobrazení určitých polí
Vložit – vložení záznamu
Export – např. do Excelu:
Pokud zaškrtneme Poslat, můžeme soubor uložit a pak v Excelu otevřít jako textový formát CSV.
Úpravy – změny tabulky jako celku
Vyprázdnit – vyprázdní tabuůu (příkaz truncate)
Odstranit – příkaz drop
35
19.
MySQL v PHP
Pohodlnější obsluhu MySQL systému si opatříme prostřednictvím skriptů, v poslední kapitole si ukážeme další
příklady. Je to kombinace, kterou dnes používají velké weby, je spolehlivá, výkonná a rychlá.
K databázi je nejprve třeba se připojit:
mysql_connect(server, uživatel, heslo)
Pokud se připojujeme k localhost: mysql_connect('localhost', '', '')
Pro webzdarma: server je 'mysql.webzdarma.cz', dále vaše uživatelské jméno a heslo
Volba databáze:
mysql_select_db('test') jméno databáze opět v apostrofech.
Zadávání příkazů :
$vysled=mysql_query('select * from student');
proměnná $vysled má hodnotu false, pokud akce neproběhla správně, jinak obsahuje záznamy tabulky.
mysql_num_rows($vysled) je funkce, která udává počet záznamů (řádků) proměnné $vysled.
Data získaná z tabulky zpracováváme po jednotlivých záznamech pomocí funkce
mysql_fetch_array($vysled), která uloží aktuální záznam do pole, jednotlivé položky představují sloupce(pole)
databáze.
$radek=mysql_fetch_array($vysled); – záznam uložíme do proměnné $radek
Cyklus while($radek) potom pracuje, dokud nepřečte všechny řádky.
Příklad:
Výpis tabulky student do html tabulky. Tbulka má pole id – číslo studenta, jméno – řetězec a body – celé číslo
<?
mysql_connect('localhost','','');
mysql_select_db('test');
echo "Počet záznamů v databázi je".mysql_num_rows($vysled);
$radek=mysql_fetch_array($vysled);
echo"<br>";
echo"<table border='1'>";
echo"<tr>";
echo"<td> ID</td>"."<td> Jmeno</td>"."<td> Body</td>";
echo "</tr>";
while($radek)
{
echo"<tr>";
echo"<td>". $radek[0]."</td>"."<td>". $radek[1]."</td>"."<td>".$radek[2]."</td>";
echo "</tr>";
$radek=mysql_fetch_array($vysled);
}
echo "<table>";
?>
Příklad 02 užívá velmi jednoduchý formulář pro zadání PHP dotazu, neošetřuje ovšem vstupní chyby. 01
umožňuje pomocí formuláře zadávat data do tabulky,.
Při stisknutí tlačítka Uložit (hodnota $uloz je true) se obsah textové oblasti uloží do proměnné $php a je odeslán
databázi.
……..
if ($uloz)
{
36
$vysled=mysql_query($php);
}
else
{
}
Formulář:
echo ("<form action=\"$PHP_SELF\"METHOD = \"POST\">");
echo ("PHP dotaz :<br><TEXTAREA COLS='60' ROWS='3' VALUE='$body' NAME='php'
></textarea><br>");
echo ("<br><INPUT TYPE=\"SUBMIT\" VALUE=\"Ulozit\"
NAME=\"uloz\"><br>\n");
echo("</form>");
20.
Několik hotových příkladů na závěr
Chat
Zprávy od účastníků diskuse se ukládají do souboru zpravy.txt. O vlastní diskusi pečuje skript chat.php. Na
stránce pridat.html je formulář pro odslání zprávy, kterou předá skriptu przpr.php a uloží ji do souboru
zpravy.txt
PZK
zpracovává výsledky příjímacích zkoušek.
Vytvor.php vytvoří prázdnou databázi s požadovanou strukturou.
Textové soubory jmeno.txt, body.txt a id.txt obsahují jednotlivá pole databáze (dají se dobře získat jako výstup
jiného programu, ve kterém byly PZK původně zpracovávány)
Edit.php nejprve načte data z těchto souborů do jendotlivývh polí a pak je uloží do databáze.
$pid = file("id.txt");
$pjmeno = file("jmeno.txt");
$pbody = file("body.txt");
$i=0;
while ($i<count($pid))
{
$pbody[$i]=$pbody[$i]*1;
if ($pbody[$i]>100 )
{
$prijat='ANO';
}
else
{
$prijat='NE';
}
$sql = "INSERT INTO uchazeci (id, jmeno,body, prijat) VALUES ('$pid[$i]','
$pjmeno[$i]','$pbody[$i]','$prijat')";
$vysledek = mysql_db_query( $databaze, $sql);
if ( !vysledek )
{
$chyba=mysql_errno(). ": ".mysql_error();
echo "<br>";
echo $chyba;
echo "<br>";
}
37
$i++;
}
Info.php zobrazí údaje o adeptu, jehož ID zadáme.
Počítadlo
počítadlo přístupů na stránku, pocitadlo.php volá programovou jednotku pocitadlo.inc direktivou include:
<?php include("pocitadlo.inc"); ?>
Knihy
Nejprve je nutno vytvořut prázdnou databázi (vytvor.php), potom ji naplnit knihami a čtenáři voláním
příslušných skriptů.
Datum a čas
příklady ukazují různý přístup k časovým informacím. Mj. se vyzžívá toho, že indexy plí mohou být řetězce –
např. zkratky anglických názvů měsíců, které lze získat při formátovaném výstupu času.
Příklad formátovaání časových údajů:
Date("d.m.Y H:i:s")
d – číslo dne v měsící 01 – 31
m – Číslo měsíce 01 – 12
Y – rok jako čtyřčíslí (2004)
H – hodina 00 – 23
i – minuta – 00 – 59
s – sekunda – 00 – 59
Některé další možnosti:
y – rok jako dvojčísli
A – indikátor dopoledne/odpoledne (AM/PM)
M – anglická zkratka měsíce
D – anglická zkratka dne v týdnu
F – anglické jméno měsíce
l – anglické jméno dne v týdnu
w – číslo dne v týdnu 1 – 7
Studijní literatura:
Petr Klán, Jindřich Jindřich: WWW pro zelenáče Neocortex 2002
Jiří Kosek: PHP Tvorba interaktivních internetových aplikací Grada1999
Vojtěch Smidek, Jaroslav Berit, Lubor Mrázek: PHP v příkladech Kopp 2001
Lucie Grusová: CSS pro úplné začátečníky (Computer Press 2003)
Obsah
1. Základy tvorby Webových stránek Struktura dokumentu Psaní textu, nadpisy, odstavce.1
Pravidla: ....................................................................................................................................... 1
Struktura dokumentu................................................................................................................... 1
Psaní textu, nadpisy, odstavce ...................................................................................................... 3
2. Obrázky Seznamy..............................................................................................................4
Obrázky ........................................................................................................................................ 4
Seznamy ........................................................................................................................................ 5
3. Hypertextové odkazy Multimédia......................................................................................5
Hyperlinky .................................................................................................................................... 5
38
Obrázek jako odkaz...................................................................................................................... 6
Vkládání multimediálních prvků ................................................................................................. 6
Běžící text ...................................................................................................................................... 6
4. Tabulky.............................................................................................................................7
Atributy: ....................................................................................................................................... 7
5. Kaskádové styly – úvod, vlastnosti písma..........................................................................8
Definice stylu................................................................................................................................. 8
Připojení stylu k dokumentu........................................................................................................ 8
Slučování definic........................................................................................................................... 9
Dědění vlastností........................................................................................................................... 9
Některé vlastnosti písma............................................................................................................... 9
6. Kaskádové styly – selektory, barvy a pozadí ....................................................................10
Výběr prvku podle jména: ......................................................................................................... 10
Kontextové selektory (výběr prvků podle umístění).................................................................. 10
Výběr prvků podle atributu ID .................................................................................................. 10
Elementy span a div.................................................................................................................... 11
Pseudotřídy ................................................................................................................................. 11
Barvy a pozadí ............................................................................................................................ 11
Vzorník zákl. 16 odstínů –VGA ................................................................................................. 12
Rozšířený vzorník na 64 odstínů ................................................................................................ 12
7. Kaskádové styly – rámečky a okraje, některé vlastnosti textu .........................................13
Border-width .............................................................................................................................. 13
Border-style ................................................................................................................................ 13
Border-color................................................................................................................................ 13
Padding ....................................................................................................................................... 13
Margin ........................................................................................................................................ 14
Některé vlastnosti textu .............................................................................................................. 14
Zarovnání, odsazení.................................................................................................................... 14
8. Kaskádové styly – vlastnosti zobrazení obsahu prvků, obtékání, pozicování....................15
Display ........................................................................................................................................ 15
List .............................................................................................................................................. 15
Šířka a výška prvků.................................................................................................................... 15
Obtékání ..................................................................................................................................... 16
Pozicování prvků ........................................................................................................................ 16
9. Klikací mapy, orientační seznámení s rámy....................................................................16
Rámy ...................................................................................................................................17
39
Definice rozložení rámů.............................................................................................................. 17
Definice obsahu rámů................................................................................................................. 17
10. Formuláře.....................................................................................................................18
Prvky formuláře ......................................................................................................................... 19
Element INPUT .......................................................................................................................... 19
Text ............................................................................................................................................. 19
Password ..................................................................................................................................... 19
Checkbox .................................................................................................................................... 19
Radio ........................................................................................................................................... 20
Tlačítka ....................................................................................................................................... 20
Tlačítko s grafikou...................................................................................................................... 20
TextArea ..................................................................................................................................... 20
Select ........................................................................................................................................... 20
11. Úvod do skriptů PHP proměnná a její hodnota ............................................................21
Komentáře .................................................................................................................................. 21
Proměnná.................................................................................................................................... 21
Některé operátory....................................................................................................................... 23
12. Úvod do PHP – větvení programu .................................................................................23
13. Úvod do PHP – cyklus ..................................................................................................25
14. Úvod do PHP – pole, spolupráce s textovým souborem .................................................26
15. Úvod do JavaScriptu – základní příkazové konstrukce................................................28
Podmíněný příkaz....................................................................................................................... 29
Cyklus ......................................................................................................................................... 30
16. JavaScript – Funkce.....................................................................................................30
17. Datum a čas v JavaScriptu Začlenění Java Appletů do stránek ...................................31
Java – applety ............................................................................................................................. 32
18. Úvod do MySQL ...........................................................................................................33
PhpMyAdmin ............................................................................................................................. 35
19. MySQL v PHP ..............................................................................................................36
20. Několik hotových příkladů na závěr..........................................................................37
Chat............................................................................................................................................. 37
PZK............................................................................................................................................. 37
Počítadlo ..................................................................................................................................... 38
Knihy........................................................................................................................................... 38
Datum a čas................................................................................................................................. 38
Studijní literatura:...................................................................................................................... 38
Obsah ..................................................................................................................................38
40
41

Elektronické publikování

Transkript

Podobné dokumenty

HTML – tvorba dokonalých WWW stránek

HTML

Best practice -- Pravidla pro tvorbu přístupného webu -

Studijní opora pro OOM

07_Vykres koncepce usporadani krajiny

PHP příkazy PHP lze vkládat přímo do XHTML

Tvorba klientských skriptů v jazyce Java Script

Studijní opora. - Katedra technické a informační výchovy PdF UP v

3. týden

Přehled html a css vlastností

DB1 cvičení 4 – spojení tabulek a složitější dotazy

čtvrtý - šestý týden

Anna Brutovská - pískoviště .

Titulek stránky </title

Kaskádové styly

Tvorba www stránek v HTML a CSS

Kaskádové styly (CSS)

Popis jednotlivých funkcí a rozlišení sloužící k rychlejší