Transcript HTML

HTML
Základy
HTML řídí konsorcium W3C – www.w3.org
Historie – verze 3.0
Používá se – verze 4.01
17.7.2015
HTML - Zdeněk Jelínek
1
HTML
Základy
17.7.2015
HTML - Zdeněk Jelínek
2
HTML
Základy
17.7.2015
HTML - Zdeněk Jelínek
3
HTML
Základy
17.7.2015
HTML - Zdeněk Jelínek
4
HTML
Základy
http://www.fce.vutbr.cz/studium/mate
rialy/0u2/html/
17.7.2015
HTML - Zdeněk Jelínek
5
HTML
Základy
Vše založeno na hypertextových odkazech
Příklad – začneme s textovým editorem
17.7.2015
HTML - Zdeněk Jelínek
6
HTML
Základy
& = pravý Alt + C
# = pravý Alt + X
@ = pravý Alt + V
\ = pravý Alt + Q
17.7.2015
HTML - Zdeněk Jelínek
7
HTML
Základy
Základy HTML - hypertextové odkazy
Hypertextový odkaz (neboli odkaz, link...) je odkaz, který otvírá jinou stránku serveru. Existuje
několik způsobů, jak a kam stránku otevřít.
4 příklady, jak hypertextové odkazy otvírat a kam.
Novou stránku otvíráme pomocí atributu target = cíl. Známe taky atribut href = nastavuje, jaká
stránka se má po kliknutí na odkaz otevřít.
_self - otevře dokument v tomtéž rámu
_blank - otevře odkaz do nového okna
_top - otevře dokument v celém okně prohlížeče
_parent - otevře dokument v nadřazeném rámu
Příklad:
<a href="http://maichl.wz.cz" target="_blank">
MaiChL's Pages</a>
A vznikne toto:
MaiChL's Pages - klikněte, stránka se otevře v novém okně
17.7.2015
HTML - Zdeněk Jelínek
8
HTML
Tagy
Základní pravidla :


tagy (štítek, návěští či označení)
odkazy
Tag – uzavřený do špičatých závorek
< Tag >
Všechny příkazy jazyka HTML jsou tagy, vše, co je
MIMO špičatých závorek je vlastní obsah stránky
17.7.2015
HTML - Zdeněk Jelínek
9
HTML
Tagy
Tagy dělíme na :


párové tagy
nepárové tagy
Příklad :
Párové tagy jsou ty, které mezi sebe uzavírají obsah a přiřazují mu tak danou
hodnotu (tagy jsou voleny pouze pro ilustraci, takhle samozřejmě neexistují)
<CERVENY-TEXT>tento text bude červený</CERVENY-TEXT> a tento už zase červený
nebude
nebo :
<CERVENY-TEXT>tento text bude<TUCNY-TEXT> červený</CERVENY-TEXT>a částečně
také tučný</TUCNY-TEXT> a tento už zase NE
Nepárové tagy umisťují do stránky jediný element, který je už svou podstatou
nedělitelný
<IMG SRC= “obrazek.gif“>
17.7.2015
HTML - Zdeněk Jelínek
10
HTML
Tagy – Struktura stránky
Ve správné webové stránce by neměly chybět následující sekce :
1.
<!DOCTYPE HTML PUBLIC“.//W3C/DTD HTML 4.01//EN“>
................ označení typu dokumentu a verze HTML
2.
<HTML> ....................... počátek textu ve formátu HTML
3.
<HEAD> ........................počátek hlavičky
4.
<TITLE >Jméno dokumentu</TITLE> ........ jméno dokumentu zobrazené nahoře v titulku okna
5.
<META NAME= “POPIS“ CONTENT= “Co dokument obsahuje“> ....... meta informace – co
dokument obsahuje
6.
</HEAD> ........................... .......konec hlavičky
7.
<BODY> ......................................počátek těla vlastního zobrazovaného obsahu stránky
8.
..................................................... vlastní obsah stránky.......................................
9.
</BODY> ................................... konec těla stránky
10. </HTML> ....................................konec formátu HTML
17.7.2015
HTML - Zdeněk Jelínek
11
HTML
Tagy
Tag HTML
Párový ta HTML ohraničuje počátek a konec vlastních dat tvořících webovou stránku, t.j. vlastních dat ve
formátu HTML
tento tag je povinný, ale dáse také ignorovat. doporučuje se.
Příklad :
<HTML>
....................................zde je celý dokument ve formátu HTML ......
</HTML>
17.7.2015
HTML - Zdeněk Jelínek
12
HTML
Tagy
Tag HEAD A BODY
HEAD - jedná se o hlavičku stránky. Je třeba ho používat. Jedná se o párový tag. BODY – jde o tělo webové
stránky
Příklad :
<HTML>
<HEAD>
....................................zde je hlavička webové stránky.....................
</HEAD>
<BODY>
.....................................zde je tělo, obsah stránky...................
</BODY>
....................................zde je celý dokument ve formátu HTML ......
</HTML>
17.7.2015
HTML - Zdeněk Jelínek
13
HTML
Tagy
Tag TITLE
Sekce HEAD obvykle obsahuje tag TITLE, který přináší titulek jenž se objeví na horní liště okna prohlížeče.
Nemusí tam být, ale nevypadá to profesionálně.
Příklad :
<HTML>
<HEAD>
....................................zde je hlavička webové stránky.....................
<TITLE> Moje první webová stránka</TITLE>
</HEAD>
<BODY>
.....................................zde je tělo, obsah stránky...................
</BODY>
....................................zde je celý dokument ve formátu HTML ......
</HTML>
17.7.2015
HTML - Zdeněk Jelínek
14
HTML
Tagy
Tag TITLE
17.7.2015
HTML - Zdeněk Jelínek
15
HTML
Tagy
Sekce HEAD
Sekce HEAD obvykle obsahuje tag TITLE, který přináší titulek jenž se objeví na horní liště okna prohlížeče.
Nemusí tam být, ale nevypadá to profesionálně. Kromě toho další možné tagy v oblasti hlavičky, mající
menší význam
ISINDEX – je tag obsahující klíčová slova pro vyhledávání
BASE – určuje základní adresu URL, od které se pak odvozují relativní
adresy uvedené v dokumentu
SCRIPT – je vyhrazen pro budoucí verze a práci se skriptovanými jazyky
STYLE – je vyhrazen pro budoucí verze a práce se styly
META – slouží pro metainformace
LINK . Určuje vztahy mezi dalšími dokumenty HTML
17.7.2015
HTML - Zdeněk Jelínek
16
HTML
Tagy
Tag INSIDEX v sekci HEAD
Sekce HEAD obvykle obsahuje tag TITLE, který přináší titulek jenž se objeví na horní liště okna prohlížeče.
Nemusí tam být, ale nevypadá to profesionálně. Kromě toho další možné tagy v oblasti hlavičky, mající
menší význam
ISINDEX – je tag obsahující klíčová slova pro vyhledávání. Sděluje, že
dokument je indexován a že je možné zadávat už v URL adrese vyhledávání
dle klíčových slov. Vytlačuje jej tag FORM, který má širší možnosti..
K vyhledávání musí být přizpůsoben i webový server, který reaguje na
vyhledávací řetězec stanovený uživatelem- musí na něm běžet program typu
cgi-bin.
17.7.2015
HTML - Zdeněk Jelínek
17
HTML
Tagy
Tag BASE v sekci HEAD
Sekce HEAD obvykle obsahuje tag TITLE, který přináší titulek jenž se objeví na horní liště okna prohlížeče.
Nemusí tam být, ale nevypadá to profesionálně. Kromě toho další možné tagy v oblasti hlavičky, mající
menší význam
BASE – je tag který určuje základní adresářovou cestu, která v dalších
odkazech vystupuje jako kořenový adresář. Odkazy pak mohou být
jednodušší a kratší
<BASE href=http://www.agenturamika.cz/data>
Pak se múže nastavit
<IMG SRC=“obrazky/cplogo.gif”>
Což znamená, že plná adresářová adresa k obrázku je
http://www.agenturamika.cz/data/obrazky/cplogo.gif
17.7.2015
HTML - Zdeněk Jelínek
18
HTML
Tagy
Tag META v sekci HEAD
Sekce HEAD obvykle obsahuje tag TITLE, který přináší titulek jenž se objeví na horní liště okna prohlížeče.
Nemusí tam být, ale nevypadá to profesionálně. Kromě toho další možné tagy v oblasti hlavičky, mající
menší význam
META – jedná se o sběrný tag, který obsahuje nejrůznější parametry, které
nejsou přímo definovány v základních elementech jazyka HTML. Informace
se přímo nezobrazují.
17.7.2015
HTML - Zdeněk Jelínek
19
HTML
Tagy
Tag BODY
Tag BODY plní v zásadě dvě funkce : jednak do sebe uzavírá celou vlastní stránku, jednak prostřednictvím
parametrů definuje její vlastnosti. Následující příklad definuje implicitní barvy elementů na stránce a
vzdálenost pravého a levého okraje stránky
Syntaxe
<BODY> backround=“.....” bgcolor=“....” text=“....” link=:”....” vlink=“....”
alink
=“Teal”
LEFTMARGIN=nn
TOPMARGING=nnn
BGPROPERTIES=“....” zde se nalézá obsah stránky...........
</BODY>
17.7.2015
HTML - Zdeněk Jelínek
20
HTML
Tagy
Tag BODY – pozadí a text
Barva pozadí a textu. barva pozadí může být souvislou barvou. dále jsou pak možnosti vybarvit základní
druhy textů různými barvami
BGCOLOR
- barva vyplňující pozadí stránky
TEXT
- základní barva textu (implicitně je nastavena černá)
LINK
- barva ještě nenavštíveného odkazu (odkaz je zároveň
podtržený). Implicitně je to modrá, hex. 0000FF
VLINK
- barva již navštíveného odkazu, implicitně je to světle
fialová, hex. 800080
ALINK
17.7.2015
- barva aktuálního odkazu, jedná se o zbarvení odkazu v
okamžiku, když se na něj klepne myší – implicitně je to
červená hex. FF0000
HTML - Zdeněk Jelínek
21
HTML
Tagy
Tag BODY – zadávání barev
hodnoty barev lze zadávat dvěnma způsoby – jednak z palety pojmenovaných barev a jednak je možno
použít hexadecimální označení, kterým lze popsat každou z 16,7 mil. barev.
TEXT=“White“
nebo
TEXT=“#024AC9”
17.7.2015
pozor na nutnost umístění #
HTML - Zdeněk Jelínek
22
HTML
Tagy
Tag BODY – zadávání barev
hodnoty barev lze zadávat dvěnma způsoby – jednak z palety pojmenovaných barev a jednak je možno
použít hexadecimální označení, kterým lze popsat každou z 16,7 mil. barev.
Black
- černá, #000000
Aqua
- světle modrá, #00FFFF
Blue
- základní modrá #0000FF
Fuhcsia
- purpurová #FF00FF
Gray
- šedá (tmavší) #808080
Green
- základní zelená #008000
Lime
- neónově zelená #00FF00
Navy
- tmavá, námořnická modř #808000
17.7.2015
HTML - Zdeněk Jelínek
23
HTML
Tagy
Tag BODY – zadávání barev
hodnoty barev lze zadávat dvěnma způsoby – jednak z palety pojmenovaných barev a jednak je možno
použít hexadecimální označení, kterým lze popsat každou z 16,7 mil. barev.
Olive
- olivově zelená #808000
Purple
- fialová #800080
Maroon
- tmavě červená #800000
Red
- základní červená #FF0000
Silver
- střábrná (světle šedá) #C0C0C0
Teal
- modrozelená #008080
White
- bílá #FFFFFF
Yellow
- základní žlutá XFFFF00
17.7.2015
HTML - Zdeněk Jelínek
24
HTML
Tagy
Tag BODY – zadávání barev
Barvy – názvy barev - základní
Barvy – názvy barev – další paleta
17.7.2015
HTML - Zdeněk Jelínek
25
HTML
Tagy
Tag BODY – zadávání barev
hodnoty barev lze zadávat dvěnma způsoby – jednak z palety pojmenovaných barev a jednak je možno
použít hexadecimální označení, kterým lze popsat každou z 16,7 mil. barev.
Příklad :
<HTML>
<BODY TEXT=“#00FFFF”>
<p>Jak se máte. Jdou Vám barvy ? </p>
</BODY>
</HTML>
17.7.2015
HTML - Zdeněk Jelínek
26
HTML
Tagy
Tag BODY – zadávání barev
hodnoty barev lze zadávat dvěnma způsoby – jednak z palety pojmenovaných barev a jednak je možno
použít hexadecimální označení, kterým lze popsat každou z 16,7 mil. barev.
Příklad :
P1-text.htm
17.7.2015
HTML - Zdeněk Jelínek
27
HTML
Text
Základy HTML - práce s textem
Každá stránka obsahuje text (teda doufám!!! ;-)), který je vkládán a formátován.
Všechno musí být vloženo do těla dokumentu (tedy mezi <body> a </body>). Je
to úplně jednoduché! Obyčejný text stačit nebude, tak vám zde popíšu, jak text
formátovat.
Zalomení řádku (br)
:
Pokud ve zdrojovém kódu chcete začít další řádek, nestačí je klávesa Enter. Pomocí
nepárového tagu <br> řádek zalomíte, a píšete další řádek.
----------------------------------------------------------------------------------------------Font (color, size a face)
Pokud chcete trochu obohatit web písmem (jak stylem tak i velikostí a barvou), tak
můžete zkusit několik možností. Začněme elementem <font>, do kterého budeme
vkládat další atributy:
face - styl písma
size - velikost písma (1-7)
color - barva písma
----------------------------------------------------------------------------------------------Vodorovná čára (hr)
Pokud potřebujete něco oddělit, udělejte to čarou, která má element <hr>:
size - velikost čáry
width - šířka čáry
height - výška čáry (doporučuji 1)
color - barva čáry
17.7.2015
HTML - Zdeněk Jelínek
28
HTML
Tagy
Tag BODY – odkazy
.Hypertextový odkaz
<HTML>
:<BODY TEXT="#FFFF00" bgcolor="FF0000">
<p><b><a href=http://ravys.cz>Rašínova vysoká škola
</b></p> <br>
<hr>
<p>Rašínova vysoká škola byla založena v roce 2002. Rozhodnutím
MŠMT byl škole udělen souhlas působit jako soukromá vysoká škola s
akreditací bakalářského studijního programu Ekonomika a insolvence
a v roce 2008 byla tomuto programu udělena i akreditace
magisterského stupně.</p>
</BODY>
</HTLM>
17.7.2015
HTML - Zdeněk Jelínek
29
Cvičení


Na barevném pozadí napište text „Rašínova
vysoká škola“ a přiřaďte tomuto nápisu odkaz
na www.ravys.cz.
Napište další odstavec s krátkým
představením školy
17.7.2015
HTML - Zdeněk Jelínek
30
HTML
Tabulky
Vytváření tabulek
Schopnosti HTML v oblasti tabulek daleko přesahují to, co si představujeme pod běžnou tabulkou.
17.7.2015
HTML - Zdeněk Jelínek
31
HTML
Tabulky
Vytváření tabulek
Schopnosti HTML v oblasti tabulek daleko přesahují to, co si představujeme pod běžnou tabulkou.
www.brno.cz
www.seznam.cz
www.inbrno.cz
17.7.2015
HTML - Zdeněk Jelínek
32
HTML
Tabulky
17.7.2015
HTML - Zdeněk Jelínek
33
HTML
Tabulky
17.7.2015
HTML - Zdeněk Jelínek
34
HTML
Tabulky
17.7.2015
HTML - Zdeněk Jelínek
35
HTML
Tabulky
17.7.2015
HTML - Zdeněk Jelínek
36
HTML
Tabulky
17.7.2015
HTML - Zdeněk Jelínek
37
HTML
Tabulky
17.7.2015
HTML - Zdeněk Jelínek
38
HTML
Tabulky
<TABLE cols="4" border="2" bgcolor="#eaeaff" width="200">
<COLGROUP align="center">
<COL valign="middle" bgcolor="yellow">
<COLGROUP span="3" valign="top">
<THEAD bgcolor="red">
<TR> <TD colspan="4">Záhlaví tabulky
<TR> <TD colspan="2">Levé <TD colspan="2" align="center">Pravé
</THEAD>
<TFOOT bgcolor="blue">
<TR> <TD colspan="4">Pata tabulky
</TFOOT>
<TBODY>
<TR> <TD rowspan="3">1 <TD>A<TD>B<TD>C
<TR> <TD>E<TD>F<TD>G
<TR> <TD>H<TD>I<TD>J
</TBODY >
<TBODY align="right">
<TR> <TD rowspan="4">2 <TD>AA<TD>BB<TD>CC
<TR> <TD>DD<TD>EE<TD>FF
<TR> <TD> <TD> <TD>
<TR> <TD> <TD> <TD>
</TBODY></TABLE>
17.7.2015
HTML - Zdeněk Jelínek
39
HTML
Tabulky
Vytváření tabulek
Schopnosti HTML v oblasti tabulek daleko přesahují to, co si představujeme pod běžnou tabulkou.
www.ibstructure.com¨
<table width="100%" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="right" valign="top" >
<div align="center">
<OBJECT
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800"
height="581"codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0">
<PARAM NAME=movie VALUE="my_intro.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=wmode VALUE=opaque>
<PARAM NAME=scale VALUE=exactfit>
<EMBED
src="my_intro.swf" quality=high wmode=opaque width="800" height="581" scale=exactfit
PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer/">
</EMBED></OBJECT>
</div></td>
</tr></table>
17.7.2015
HTML - Zdeněk Jelínek
40
HTML
Tabulky
17.7.2015
HTML - Zdeněk Jelínek
41
HTML
Tabulky
17.7.2015
HTML - Zdeněk Jelínek
42
HTML
Tabulky
<html><head>
<title>TABULKA</title>
</head><body>
<table border="1" style="border-collapse: collapse" bordercolor="#111111"
width="100%" height="266">
<tr>
<td width="50%" height="19">&nbsp;</td>
<td width="50%" height="19">&nbsp;</td>
</tr>
<tr>
<td width="50%" height="242">&nbsp;</td>
<td width="50%" height="242">&nbsp;</td>
</tr>
</table></body></html>
17.7.2015
HTML - Zdeněk Jelínek
43
HTML
Tabulky
17.7.2015
HTML - Zdeněk Jelínek
44
HTML
Tabulky
17.7.2015
HTML - Zdeněk Jelínek
45
HTML
Tabulky
17.7.2015
HTML - Zdeněk Jelínek
46
HTML
Tabulky
17.7.2015
HTML - Zdeněk Jelínek
47
HTML
Tabulky
17.7.2015
HTML - Zdeněk Jelínek
48
HTML
Tabulky
17.7.2015
HTML - Zdeněk Jelínek
49
HTML
Tabulky
17.7.2015
HTML - Zdeněk Jelínek
50
HTML
Tabulky
<html><head>
<title>Tabulka</title>
</head><body>
<table border="8" style="border-collapse: collapse"
bordercolor="#FF0000" width="100%" height="266">
<tr>
<td width="50%" height="19">&nbsp;</td>
<td width="50%" height="19">&nbsp;</td>
</tr>
<tr>
<td width="50%" height="242">&nbsp;</td>
<td width="50%" height="242">&nbsp;</td>
</tr>
</table></body></html>
Pozn. & = pravýAlt + C
# - pravý Alt + X
17.7.2015
HTML - Zdeněk Jelínek
51
HTML
Tabulky
17.7.2015
HTML - Zdeněk Jelínek
52
HTML
Tabulky
<html><head>
<title>Tabulka</title>
</head>
<body>
<table border="8" style="border-collapse: collapse" bordercolor="#FF0000"
width="100%" height="266">
<tr>
<td width="50%" height="19" bgcolor="#000080">&nbsp;</td>
<td width="50%" height="19" bgcolor="#800000">&nbsp;</td>
</tr>
<tr>
<td width="50%" height="242" bgcolor="#00FFFF">&nbsp;</td>
<td width="50%" height="242" bgcolor="#FF00FF">&nbsp;</td>
</tr>
</table></body></html>
17.7.2015
HTML - Zdeněk Jelínek
53
HTML
Tabulky
17.7.2015
HTML - Zdeněk Jelínek
54
HTML
Tabulky
17.7.2015
HTML - Zdeněk Jelínek
55
HTML
Tabulky
<html><head>
<title>Tabulka</title>
</head><body>
<table border="3" style="border-collapse: collapse"
bordercolor="#111111" width="261" cellpadding="2" cellspacing="3">
<tr>
<td width="39" bgcolor="#000000">&nbsp;</td>
<td width="198" bgcolor="#FF0000">&nbsp;</td>
</tr>
<tr>
<td width="39" bgcolor="#00FF00">&nbsp;</td>
<td width="198" bgcolor="#000080">&nbsp;</td>
</tr>
</table>
</body></html>
17.7.2015
HTML - Zdeněk Jelínek
56
HTML
Tabulky
<html><head>
<title>Tabulka</title>
</head><body>
<table border=„10" style="border-collapse: collapse"
bordercolor="#111111" width="261" cellpadding="2" cellspacing="3">
<tr>
<td width="39" bgcolor="#000000">&nbsp;</td>
<td width="198" bgcolor="#FF0000">&nbsp;</td>
</tr>
<tr>
<td width="39" bgcolor="#00FF00">&nbsp;</td>
<td width="198" bgcolor="#000080">&nbsp;</td>
</tr>
</table>
</body></html>
17.7.2015
HTML - Zdeněk Jelínek
57
HTML
Tabulky
<html><head>
<title>Tabulka</title>
</head><body>
<table border=„10" style="border-collapse: collapse"
bordercolor="#111111" width=„500" cellpadding="2" cellspacing="3">
<tr>
<td width="39" bgcolor="#000000">&nbsp;</td>
<td width="198" bgcolor="#FF0000">&nbsp;</td>
</tr>
<tr>
<td width="39" bgcolor="#00FF00">&nbsp;</td>
<td width="198" bgcolor="#000080">&nbsp;</td>
</tr>
</table>
</body></html>
17.7.2015
HTML - Zdeněk Jelínek
58
HTML
Tabulky
<html><head>
<title>Tabulka</title>
</head><body>
<table border=„10" style="border-collapse: collapse"
bordercolor="#111111" width=„500" cellpadding="2" cellspacing="3">
<tr>
<td width=„50" bgcolor="#000000">&nbsp;</td>
<td width=„50" bgcolor="#FF0000">&nbsp;</td>
</tr>
<tr>
<td width="39" bgcolor="#00FF00">&nbsp;</td>
<td width="198" bgcolor="#000080">&nbsp;</td>
</tr>
</table>
</body></html>
17.7.2015
HTML - Zdeněk Jelínek
59
HTML
Tabulky
17.7.2015
HTML - Zdeněk Jelínek
60
HTML
Tabulky
<html><head>
<title>Tabulka</title>
</head>
<body>
<table border="10" bordercolor="#111111" width="500" cellpadding="2"
cellspacing="3">
<tr>
<td width="50" bgcolor="#00FF00">
<p align="center"><b>Tabulka</b></td>
<td width="50" bgcolor="#000080"><b><font
color="#FFFFFF">Modrá</font></b></td>
</tr>
</table></body>
</html>
17.7.2015
HTML - Zdeněk Jelínek
61
HTML
Rámy
Základy HTML - rámy
Rámy se už moc nepoužívají…….,
frameset - skupina rámů
frame - rám
iframe - vložený rám
cols - sloupcové rozdělení
rows - řádkové rozdělení
name - jméno rámu
bordercolor - barva rámečku okolo rámu
Příklad:
<frameset cols="150">
<frame name="levy" src="leve-menu.htm">
<frame name="obsah" src="obsah.htm">
</frameset>
17.7.2015
HTML - Zdeněk Jelínek
62
HTML
Rámce
17.7.2015
HTML - Zdeněk Jelínek
63
HTML
Rámce
www.pulsar.cz
17.7.2015
HTML - Zdeněk Jelínek
64
HTML
Rámce
<html>
<head>
<title>Nová stránka 1</title>
</head>
<body>
<p><iframe name="I1" width="625" height="401" src="vlozeny_ramec.htm">
</iframe></p>
</body>
</html>
17.7.2015
HTML - Zdeněk Jelínek
65
HTML
Rámce
17.7.2015
HTML - Zdeněk Jelínek
66
HTML
Rámce
17.7.2015
HTML - Zdeněk Jelínek
67
HTML
Rámce
Odkaz na jiný
soubor –
obsah rámce
ramec.htm
17.7.2015
HTML - Zdeněk Jelínek
68
HTML
Rámce
17.7.2015
HTML - Zdeněk Jelínek
69
HTML
Rámce
ramec1.htm
17.7.2015
HTML - Zdeněk Jelínek
70
HTML
Rámce
ramec1.htm
17.7.2015
HTML - Zdeněk Jelínek
71
HTML
Rámce
ramec1.htm
17.7.2015
HTML - Zdeněk Jelínek
72
HTML
Rámce
ramec1.htm
17.7.2015
HTML - Zdeněk Jelínek
73
HTML
Rámce
Obsah rámce
ramec1.htm
17.7.2015
HTML - Zdeněk Jelínek
74
HTML
Rámce
index.htm
17.7.2015
HTML - Zdeněk Jelínek
75
HTML
Formuláře
Formuláře slouží k získání informací od uživatele nebo
k předání zpracovaných informací uživateli. Jsou
buďto odeslány ke zpracování na server nebo
zpracovány skripty přímo ve stránce.
17.7.2015
HTML - Zdeněk Jelínek
76
HTML
Formuláře
<FORM name = «jméno» action = «URL obsluhujícího skriptu» method =
«metoda» >
«definice prvků formuláře»
</FORM>
17.7.2015
HTML - Zdeněk Jelínek
77
HTML
Formuláře - prvky webu
INPUT type TEXT krátký text (implicitní volba)
PASSWORD heslo
CHECKBOX „zaškrtávací“ tlačítko (vypínač)
RADIO přepínač
SUBMIT tlačítko odeslání formuláře
RESET tlačítko vymazání formuláře
BUTTON obecné tlačítko, pomocí události lze spojit se
skriptem
SELECT umožňuje výběr z několika položek
TEXTAREA víceřádkový text
17.7.2015
HTML - Zdeněk Jelínek
78
HTML
Formuláře
17.7.2015
HTML - Zdeněk Jelínek
79
HTML
Formuláře
Jméno: <INPUT type="text" name="jm" size="10"> <br>
Příjmení: <INPUT type="text" name="pr" size="15"> <br>
Rodné číslo: <INPUT type="text" name="rc" size="11" maxlength="11"><br>
PSČ: <INPUT type="text" name="psc" size="8" maxlength="5"><br>
Heslo: <INPUT type="password" name=psw" size="5" maxlength="5">
INPUT – definice vstupního prvku, TYPE – druh vstupního pole, NAME – jméno pro
zpracování skripty, SIZE – rozměr pole ve znacích, TEXT – jednořádkové textové pole,
MAXLENGTH – maximální počet znaků,
17.7.2015
HTML - Zdeněk Jelínek
80
HTML
Formuláře
17.7.2015
HTML - Zdeněk Jelínek
81
HTML
Formuláře
<table width=100% border=0>
<tr>
<th colspan=4>Který měsíc vám vyhovuje?
<tr>
<td><INPUT type="checkbox" name="pris" checked> červen
<td><INPUT type="checkbox" name="pris" checked> červenec
<td><INPUT type="checkbox" name="pris"> srpen
<td><INPUT type="checkbox" name="pris"> září
</table>
th-buňka záhlaví tabulky, border-šířka rámečku, width-šířka, colspan-počet sloučených
sloupců, input-definice vstupního resp. výstupního prvku, checkbox-zaškrtávací políčko,
checked – implicitní zašktnutí, name – jméno potřebné pro zpracování skripty
17.7.2015
HTML - Zdeněk Jelínek
82
HTML
Formuláře
17.7.2015
HTML - Zdeněk Jelínek
83
HTML
Formuláře
<table cols=2 border=0 >
<tr><th align=left > pohlaví
<th align=left > Barva očí
<tr><td valign=top width=100 >
<INPUT type="radio" name="p" value="m" >muž <br>
<INPUT type="radio" name="p" value="z" >žena
<td valign=top >
<INPUT type="radio" name="o" >modré <br>
<INPUT type="radio" name="o" checked >hnědé <br>
<INPUT type="radio" name="o" >zelené <br>
<INPUT type="radio" name="o" >jiné barvy
</table>
table –vymezení tabulky, cols – počet sloupců, border – šířka rámečku, align –
vodorovné zarovnání, valign – svislé zarovnání, width – šířka buňky, radio – přepínač,
name – jméno potřebné pro zpracování, value – hodnota, input – vstup resp. Výstup, br
– nový řádek
17.7.2015
HTML - Zdeněk Jelínek
84
HTML
Formuláře
17.7.2015
HTML - Zdeněk Jelínek
85
HTML
Formuláře
Co nám chcete sdělit pěkného?<br>
<TEXTAREA cols="20" rows="3">
Dobrý den.
</TEXTAREA>
17.7.2015
HTML - Zdeněk Jelínek
86
HTML
Formuláře
17.7.2015
HTML - Zdeněk Jelínek
87
HTML
Formuláře
Vyber si zvířátko:
<SELECT name="zver1" >
<OPTION value="k" >Kočička</OPTION >
<OPTION value="p">Pejsek</OPTION>
<OPTION value="kr">Králíček</OPTION>
<OPTION value="m">Morče </OPTION>
</SELECT>
<p>
Vyber si ještě jedno zvířátko:
<SELECT name="zver1" >
<OPTION value="m" >Myš</OPTION >
<OPTION value="s" selected>Šnek</OPTION>
<OPTION value="z">Zajíc</OPTION>
<OPTION value="j">Ještěrka </OPTION>
</SELECT>
<p>
Co bude jíst? (i několik)
<SELECT name="jidlo" multiple size="6" align=top>
<OPTION value="m" >mrkev</OPTION >
<OPTION value="s">salát</OPTION>
<OPTION value="ma">maso</OPTION>
<OPTION value="ml">mléko </OPTION>
<OPTION value="v">voda</OPTION>
<OPTION value="r">rohlík</OPTION>
17.7.2015
HTML - Zdeněk Jelínek
88
HTML
Přehled tagů
17.7.2015
HTML - Zdeněk Jelínek
89
HTML
Tabulky
Vlastnosti použitelné v definicích stylů
17.7.2015
HTML - Zdeněk Jelínek
90
HTML
Formátování textů
17.7.2015
HTML - Zdeněk Jelínek
91
HTML
Formátování textů
17.7.2015
HTML - Zdeněk Jelínek
92
HTML
Obrázek
17.7.2015
HTML - Zdeněk Jelínek
93
HTML
Obrázek
17.7.2015
HTML - Zdeněk Jelínek
94
HTML
Tabulky
17.7.2015
HTML - Zdeněk Jelínek
95
HTML
Tabulky
17.7.2015
HTML - Zdeněk Jelínek
96
HTML
Tabulky
17.7.2015
HTML - Zdeněk Jelínek
97
HTML
Tabulky
17.7.2015
HTML - Zdeněk Jelínek
98
HTML
Tabulky
17.7.2015
HTML - Zdeněk Jelínek
99
HTML
Tabulky
17.7.2015
HTML - Zdeněk Jelínek
100
HTML
Tabulky
<TABLE cols="4" border="2" bgcolor="#eaeaff" width="200">
<COLGROUP align="center">
<COL valign="middle" bgcolor="yellow">
<COLGROUP span="3" valign="top">
<THEAD bgcolor="red">
<TR> <TD colspan="4">Záhlaví tabulky
<TR> <TD colspan="2">Levé <TD colspan="2" align="center">Pravé
</THEAD>
<TFOOT bgcolor="blue">
<TR> <TD colspan="4">Pata tabulky
</TFOOT>
<TBODY>
<TR> <TD rowspan="3">1 <TD>A<TD>B<TD>C
<TR> <TD>E<TD>F<TD>G
<TR> <TD>H<TD>I<TD>J
</TBODY >
<TBODY align="right">
<TR> <TD rowspan="4">2 <TD>AA<TD>BB<TD>CC
<TR> <TD>DD<TD>EE<TD>FF
<TR> <TD> <TD> <TD>
<TR> <TD> <TD> <TD>
</TBODY></TABLE>
17.7.2015
HTML - Zdeněk Jelínek
101
HTML
Odkazy
17.7.2015
HTML - Zdeněk Jelínek
102
HTML
Matematika
Opakování vzorců
Rovnice kružnice se středem S[x0, y0] a poloměrem r v kartézských
souřadnicích je (x – x0)2 + (y – y0)2 = r2.
<H2>Opakování vzorců</H2>
Rovnice kružnice se středem <I>S</I>[<I>x</I><SUB>0</SUB>,
<I>y</I><SUB>0</SUB>]
a poloměrem <I>r</I> v kartézských souřadnicích je
(<I>x</I> &#0150; <I>x</I><SUB>0</SUB>)<SUP>2</SUP> +
(<I>y</I> &#0150; <I>y</I><SUB>0</SUB>)<SUP>2</SUP> =
<I>r</I><SUP>2</SUP>.
17.7.2015
HTML - Zdeněk Jelínek
103
HTML
Přehled tagů
17.7.2015
HTML - Zdeněk Jelínek
104
HTML
Přehled tagů
17.7.2015
HTML - Zdeněk Jelínek
105
HTML
Přehled tagů
17.7.2015
HTML - Zdeněk Jelínek
106
HTML
Přehled tagů
17.7.2015
HTML - Zdeněk Jelínek
107
HTML
Přehled tagů
17.7.2015
HTML - Zdeněk Jelínek
108
HTML
Přehled tagů
17.7.2015
HTML - Zdeněk Jelínek
109
HTML
Přehled tagů
17.7.2015
HTML - Zdeněk Jelínek
110
HTML
Přehled tagů
17.7.2015
HTML - Zdeněk Jelínek
111
HTML
Přehled tagů
17.7.2015
HTML - Zdeněk Jelínek
112
HTML
Přehled tagů
17.7.2015
HTML - Zdeněk Jelínek
113
HTML
Přehled tagů
17.7.2015
HTML - Zdeněk Jelínek
114
HTML
Přehled tagů
17.7.2015
HTML - Zdeněk Jelínek
115
HTML
Přehled tagů
17.7.2015
HTML - Zdeněk Jelínek
116
HTML
Ukázky
17.7.2015
HTML - Zdeněk Jelínek
117
HTML
Ukázky
<HTML>
<HEAD>
<TITLE>Závislost na internetu</TITLE>
</HEAD>
<BODY>
<H1>Seznam příznaků závislosti na Internetu</H1>
<UL>
<LI>líbáte domácí stránku své dívky
<LI>odmítáte odjet na dovolenou tam, kde není elektřina a telefon
<LI>v noci se vám zdají sny v HTML
<LI>při psaní čehokoliv píšete za každou větou .com
<LI>při vypínání modemu máte podobný pocit, jako byste dostával kopačky
<LI>všichni vaši přátelé mají ve jménu @
<LI>nevíte, jakého pohlaví jsou vaši přátelé, mají neutrální přezdívky a vás nikdy nenapadlo se jich zeptat
<LI>na stěnách veřejných záchodků hledáte webové adresy
<LI>nikdy nemáte problémy s obsazenou linkou, protože se vůbec neodhlašujete
<LI>vaše virtuální děvče si najde nového hocha s tlustším kabelem
<LI>dívka, kterou jste naposledy sbalil, byla jenom JPEG
</UL>
<A href="default.htm">Zpět</A> na úvodní stránku.
</BODY>
</HTML>
17.7.2015
HTML - Zdeněk Jelínek
118
HTML
Ukázky
17.7.2015
HTML - Zdeněk Jelínek
119
HTML
Ukázky
Vítejte na mé webové stránce
Zprávy z domova
Policie zadržela v Praze–Ruzyni dvě neznámé ženy podezřelé z přípravy
teroristického útoku v odletové hale na letišti. Několik cestujících ohlásilo
podezřelé chování dvou žen, které potřísnily podlahu v odletové hale
neznámou tekutinou. Policejní ozbrojenci neprodyšně uzavřeli letiště a okolí.
Několik expertiz vzorku látky nezávisle na sobě prokázalo, že se jedná o vodu
se saponátem. Policie oběma ženám vrátila kýbly, smetáky i hadry, jež předtím
zajistila, a propustila je na svobodu.
Opakování vzorců
Rovnice kružnice se středem S[x0, y0] a poloměrem r v kartézských
souřadnicích je (x – x0)2 + (y – y0)2 = r2.
17.7.2015
HTML - Zdeněk Jelínek
120
HTML
Ukázky
<HTML> <HEAD> <TITLE>Úvodní stránka</TITLE> </HEAD>
<BODY>
<H1 align="center">Vítejte na mé webové stránce</H1>
<HR color="blue" width="80%">
<H2>Zprávy z domova</H2>
<IMG src="uklizecka.gif" align="left">
Policie zadržela v Praze–Ruzyni dvě neznámé ženy podezřelé z přípravy teroristického útoku v odletové hale na letišti. Několik
cestujících ohlásilo podezřelé chování dvou žen, které potřísnily podlahu v odletové hale neznámou tekutinou. Policejní
ozbrojenci neprodyšně uzavřeli letiště a okolí. Několik expertiz vzorku látky nezávisle na sobě prokázalo, že se jedná o vodu se
saponátem. Policie oběma ženám vrátila kýbly, smetáky i hadry, jež předtím zajistila, a propustila je na svobodu.<BR clear="all">
<H2>Opakování vzorců</H2>
Rovnice kružnice se středem <I>S</I>[<I>x</I><SUB>0</SUB>, <I>y</I><SUB>0</SUB>]
a poloměrem <I>r</I> v kartézských souřadnicích je
(<I>x</I> &#0150; <I>x</I><SUB>0</SUB>)<SUP>2</SUP> + (<I>y</I> &#0150;
<I>y</I><SUB>0</SUB>)<SUP>2</SUP> = <I>r</I><SUP>2</SUP>.
<H2>Zajímavé odkazy</H2>
<UL>
<LI><A href="pocasi.htm">Počasí v České republice</A>
<LI><A href="zavislost.htm">Seznam příznaků závislosti na Internetu</A>
<LI><A href="http://www.fce.vutbr.cz" target="_blank">FAST VUT v Brně</A>
</UL> </BODY></HTML>
17.7.2015
HTML - Zdeněk Jelínek
121
HTML
Ukázky
17.7.2015
HTML - Zdeněk Jelínek
122
HTML
Ukázky
pocasi.htm
<HTML>
<HEAD>
<TITLE>Počasí</TITLE>
</HEAD>
<BODY>
<H1>Počasí v České Republice</H1>
<A href="http://czech.wunderground.com/global/stations/11518.html">
<IMG src="http://banners.wunderground.com/banner/bigwx_metric_cond/language/czech/global/stations/11518.gif"
alt="Předpověď počasí pro Prahu" border="0" height="60" width="468"></A><BR><BR>
<A href="http://czech.wunderground.com/global/stations/11723.html">
<IMG src="http://banners.wunderground.com/banner/bigwx_metric_cond/language/czech/global/stations/11723.gif"
alt="Předpověď počasí pro Prahu" border="0" height="60" width="468"></A><BR><BR>
<A href="http://czech.wunderground.com/global/stations/11782.html">
<IMG src="http://banners.wunderground.com/banner/bigwx_metric_cond/language/czech/global/stations/11782.gif"
alt="Předpověď počasí pro Prahu" border="0" height="60" width="468"></A><BR><BR>
Další informace o počasí získáte na serveru
<A href="http://czech.wunderground.com" target="_blank">Weather Underground</A>.<BR>
<A href="default.htm">Zpět</A> na úvodní stránku.
</BODY>
</HTML>
17.7.2015
HTML - Zdeněk Jelínek
123
HTML
Ukázky
Odkazy z :
http://czech.wunderground.com/
17.7.2015
HTML - Zdeněk Jelínek
124