Zakladni pouzivane HTML prvky (Windows)
=============================
... je toho samozrejme vic, doporucuji stranku www.jakpsatweb.cz
Samotne HTML je dobre pouzivat se styly CSS, jinak je to opisovacka pri vice stejnych strankach.
1. Html - V cem psat
2. Zakladni funkce - hlavicky, upravy textu, odkazy, seznamy
3. Obrazky, tabulky, ramy
4. Priklad JAVA apletu
5. Popis - Obrazky
6. Popis - SOUBORY - nahravani stranek a prace s windows, podrobny navod
7. Priklad s podrobnym navodem
-----------------------------
1. Html - V cem psat
--------------------
1 - specialni editor: nekolik druhu, vetsina veci se da vyklikat z menu
soubor: http://www.volny.cz/horacek.lubos/ZIP/ed3p3.zip
www: Html Editor 3.0 http://www.volny.cz/horacek.lubos/editor.html
2 - NOTEPAD (Start-Programy-Prislusenstvi-Poznamkovy blok(Notepad))
3 - WORD7 a vyssi: ikona na plose Word nebo v nabidce Start-Programy-Microsoft office-Microsoft word, pokud jej mate.
4 - 1,2,3 + uprava www z inetu... v IE je moznost Soubor-Ulozit nebo Zobrazit-Zdrojovy kod
4a - Stranku je mozne ulozit pres menu v IE: Soubor - Ulozit jako (Uplne hmtl, kam ulozit) - Ok
V danem miste se vytvori soubor treba index.htm (auticka.htm) a pravdepodobne jeste adresar s obrazky Index_soubory\ (Auticka_soubory\).
4b - V IE dame ve strance prave tlacitko mysi - Zobrazit zdrojovy kod a v okne pak Ulozit jako ...
Neulozi se nam vsak obrazky, ale jen samotna htm a pravdepodobne jako index.txt
Viz moznost 4a Ulozit jako (pouze htm).
2 - Zakladni funkce
-------------------
Text se uvazuje jako text, funkce zmeny (TAG) se oznacuje do znamenek mensi vetsi , viz priklady dole. Konec funkce se oznacuje lomitkem uvnitr
Funkci (TAGu) s ukoncenim se rika take PAROVY TAG.
Male/velke pismena se pro vetsinu funkci neuvazuji, jde jen o estetickou upravu.
Tabelator se uvazuje za mezeru, vice mezer se povazuje za jednu.
Barva (COLOR)
Uziva se tvar tri slozek RGB (red-green-blue / cervena-zelena-modra).
Kazda slozka ma hodnotu 0-255, cili 256 hodnot, celkem je tedy moznych 256x256x256=16,7 milionu barev
Zapis sestnastkove 0-255 == 0-FF (0-15 == 0123456789ABCDEF)
Zapis 2, anglicke zkratky barev z windows: red, green, blue, cyan, olive, teal,...
0 je pro nejtmavsi, FF pro nejjasnejsi
zluta: color=yellow / color=#FFFF00 / color="yellow" / color="#FFFF00"
(je lepsi psat vse za rovna se do apostrofu)
NEBEZPECNE SLOVA - slova, ktere vyhledavaji mailove viry na disku, lepsi se vyhybat
'mail','email','e-mail,'@'
nahrada: obrazkem s pismeny, specialnim znakem zavinac=@ , jinym textem (mracek at xko.cz)
! stale je mozne vyhledavat, ale uz musi byt virus chytrejsi
(popis: clovek si otevre vasi stranku, ta se ulozi u nej na disku, ma tam virus,
virus si najde ve vasi strance mail a uz ho rozesila do sveta a vam chodi zavirovane maily)
!UPOZORNENI - Sve stranky obvykle vystavujeme na cizi pocitac! Viz popis u pripadu pouziti.
! Na hacky nehledte, ja rad pisi bez hacku a carek...
Priklad 1: textovy soubor
==========pisnicka.txt
Pisnicka
Sla Nanynka do zeli...
==========
Priklad 3: html soubor z prikladu 2 a 4 zobrazeny v prohlizeci HTML
==========pisnicka.htm
PISNICKA (jakoze tucne)
Sla Nanynka do zeli...
==========
Priklad 2: html soubor
==========pisnicka.htm
-----------------------------
Pr:
Ahoj
zzz1 | | xxx1 |
---|
xxx1 |
---|
zzz2 | yyy1 | zzz1 |
---|
yyy1 | zzz1 |
---|
zzz3 | yyy2 | zzz2 |
---|
zzz2 |
Ahoj
|--------========| |================|
zzz1 | | xxx1 || || xxx1 ||
|--------========| |================|
zzz3 || yyy1 ||zzz1 || || ||zzz1 ||
|================| || yyy1 |========|
zzz2 || yyy2 ||zzz2 || || ||zzz2 ||
|================| |================|
Pripominam, ze xxx,yyy,zzz muzou byt obrazky, odkazy, ...cokoliv
Pr. Zmeny sloupce tabulky bez zasahu do tabulky, zarovnani textu
Ramy - Frame
------------
Deli oblast na 2-x casti, podle nastaveni a davaji se do zvlast html.
Tj. jedine vyuziti je pri uspore opakovani stejnych menu, ale i to se resi pomoci IFRAME.
Jinak maji same nevyhody, treba pri zobrazeni zdroje stranky, otevirani v novem okne (ztrata menu) a tak.
Doporucuji pouzit radeji CSS
radky (ROWS), sloupce (COLS)
ram1: 0-60/0-160, ram2: 60-*/0-160, ram3: 0-60/160-*, ram4: 60-*/160-*
ram x1-x2/y1-y2, kde * je zbytek do sirky stranky
ram
SRC (source) = stranka, ktera se v oblasti zobrazi, stranka="obrazky.htm"
stranka muze byt dalsi stranka s ramy
NAME = jmeno ramu pro odkazy, ram1=rozek, ram2=nadpis, ram3=tlacitka (viz Seznamy)
Scrolling="YES" ram ma posouvatka, kdyz ma nahodou vetsi obsah (uzivatel ma jine default pismo)
Celkem bychom ted meli 5 souboru. 1 index.html, 2 rozek.htm, 3 nadpis.htm, 4 tlacitka.htm, 5 obrazovka1.htm
Dale si udelame soubor obrazovka2.htm a pridame do souboru tlacitka.htm 2x (A HREF s targetem) na obe stranky, viz dal.
Vyplneni ramu jinou strankou:
( )
Foto
Prepsani cele stranky:
Ikarie (SCI-FI)
4 - JAVA aplet
--------------
Odraz na vlnici vodni hladine obrazku kanarek2.gif (osetrene, pokud ma nekdo java vyple, pak se zobrazi jen ten obr)
Pozor, tento aplet pracuje jen s obr typu gif
Nutne soubory: Lake.class, xx.htm (obsahujici tento text)
Obrazky
-------
Vhodne typy:
Jpg, jpeg - inet (jpg, foto, velmi barevne)
Gif - inet (animovane, malo barevne, inet 2-barevne)
Tif - nepodporuje inet (cernobile)
Avi, Flash, Mpeg - videa, klipy (jako Gif)
Jak dostat obr do kompu?
-naskenovat - skener+skenovaci program ScanSuite nebo neco podobneho
-stahnout z netu- z nejake stranky, prave tlacitko na obrazku, ulozit jako...
-digifotak - pripojeni pres USB port+ovladac (+program)
-fotomobil - pripojeni pres USB port+ovladac (+program)
-kamera - kamera+specialni karta, nekdy ma vstup i graficka karta. Musi se propojit a potom nejakym programem
-kamera2 - mozna ted jsou kamery typu digifotak, pak obdobne
-kamera+tv karta- obdoba kamery, pouziva se tv program, nejcasteji pres celou obrazovku (dneska se nastavuje rozliseni obrazovky 1024x768), snima se za behu
-web kam - kamera pro net. slabe rozliseni a kvalita, spis na pokec s obrazem po netu (zatim trosku pomale)
-zkopirovat od nekoho - disketa, CD, CD-RW, disk, ZIP-disk, ...
SOUBORY
-------
cesty:
------
na disku: c:\hry\dizzy
na disku k souboru: c:\hry\dizzy\dizzy.exe
na netu na stranku: http://www.xko.cz
na netu na stranku: http://dragon.adt.cz
na netu na soubor: ftp://192.168.2.3.99/dizzy/dizzy.exe (vymyslene)
na netu na soubor: ftp://ftp.redbox.cz/dizzy/dizzy.exe
na netu na mail: mailto:peter.mlich@email.cz
Na disku / na netu:
- lomitka, nejak se to rozlisit musi
Na disku se cte cesta zleva do prava (c:\, c:\hry\, c:\hry\dizzy, ...), na netu opacne (www.xko.cz: cz (cesko), xko (pocitac xka), www (ze se zobrazi www stanka, jinak se jedna o adresar www na disku pocitace xka) )
- pro stranky je dulezite, aby sedeli mala a velka pismenka, pac PC, kde jsou umisteny muze bezet pod Linuxem nikoliv pod Win.
Znamy problem: Ahoj.txt / ahoj.txt / ahoj.TXT ...
System win povazuje tyto 3 soubory za jeden, tudiz dovoli je jednu moznost, 2 stejne nelze udelat, Linux je povazuje za 2 jinaci.
(Linux se pouziva proto, ze narozdil od win nepada, a kdyz, pak ne casto)
- ftp: cislo 192.168.2.3.99 = ftp.redbox.cz a jde jen o pamatovaci pojmenovani cisla
(192.168.x.x... oznaceni ceskych ftp)
Vytvoreni souboru pod Wirdows
-----------------------------
Problemy: U windows ma clovek ve skole ci v praci vetsinou omezeny pristup k disku, takze si nemuze delat, co se mu zlibi.
Vetsinou se da vytvorit soubor na plose.
Doma je u Wirdows vetsinou povoleno vse, takze dochazi obcas k posahani systemu, kdyz nekdo klika, na co nema na netu ci na kompu.
Na plose (to je ten podklad s obrazkami (ikonkami) v pozadi - typu Tento pocitac...):
Nejlepe, kdyz se vytvori adresar.
-Ukazovatko mysi se presune na volne misto na plose (kde neni este ikona),
-pak se zmackne Prave tlacitko - objevi se menu (tabulka),
-vybere se napis Novy,
-pak Slozka,
-napise se nazev (predbezne se to jmenuje Nova slozka)
-klik vedle nebo klavesa Enter
Pak teprve soubor.
-2x se klikne (rychleji po sobe, s klidem) na obrazek adresare (slozky) - otevre se okno
-na volnem miste v okne se provede totez jako u adresare, jen se misto Slozka vybere Textovy dokument
(Prave tl, Novy, Textovy dokument, pojmenovani (predefinovany nazev: NovýTextový dokument.txt))
Otevreni (spusteni) souboru
---------------------------
2x klik (rychleji za sebou) levym tlacitkem na obrazku souboru
2x klik na obrazek, nad napisem NovýTextový dokument.txt vetsinou otevre program NOTEPAD (alias poznamkovy blok), kde se zobrazi obsah souboru
Ulozeni je jako Soubor - Ulozit
Pro zavirani se pouziva Soubor - Konec nebo 2klavesy naraz Alt+F4
Prejmenovani souboru (adresare) - zmena nazvu, pripony
------------------------------------------------------
1x klik leve tlacitko na napis pod obrazkem, prepsani textu
Kopirovani textu:
-----------------
Ulozeni do pameti (schranky) klavesami: Ctrl a c (Ctrl+c) zmacknute soucasne (podrzet 'ctrl' a pridat 'c')
Vykopirovani z pameti: Ctrl+v
Text je nutne nejdriv oznacit, treba mysi.
Oznaceni textu a zkopceni - PRIKLAD (z jednoho souboru do druheho)
-----------------------------------
-vytvorim si na plose slozku s nazvem ahoj,
-vytvorim v ni 2 textove soubory (po jednom) s nazvy ble1 a fuj2,
-otevru ble1 (2-klik na obrazek nad textem) A napisu si do okenka v Notepadu treba text:
Byl jsem zde, Fantomas.
-zmacknu Ctrl+s (podrzim klavesu ctrl a prida k ni s) (jinak lze kliknout v notepadu na menu soubor - uloz)
(docilim, ze se mne prave pridany obsah ulozi do souboru)
-oznacim si z meho textu nejakou cast - treba Fantomas
--Sipkama nastavim blikajici kurzor na prvni F a ted zacnu drzet klavesu Shift,
pak mackam prislusnou sipku, cim se mi napis zacina menit v prevracene barvy (bila na cernou a tak),
mam-li oznaceno, co potrebuju, pustim sipku, pustim Shift a
(2ha moznosti je zmacknout leve tlacitko a popojizdet mysi)
...a zkopiruju do pameti (Ctrl+c)
-zavru notepad (Alt+F4 - podrzim klavesu alt a pridam 1x klavesu F4 - nahore)
- 2-klik na fuj (opet se otevre notepad - bylo mozne v nem kliknout na soubor - otevrit -...)
- Kliknu do okenka a zacnu drzet klavesu ctrl a nekolikrat zopakuju klavesu v.
(tim by se mi mel obsah pameti (text Fantomas) vykopirovat nekolikrat po sobe)
- Ctrl+s (uloz soubor)
Pozn.: Presne takto je mozne kopirovat z xka rozhovory do souboru :)
Ulozeni souboru z netu (stranky):
---------------------------------
Je vic moznosti:
Jedna se o klik na odkaz (podtrzeny text) (ve zdrojovem kody html je to ), objevi se okenko, ze se stahuje soubor, ale nejdriv se opta, kam ho chcete ulozit.
Dalsi je tez A Href, ale objevi se stranka - v IE(internet m$ explozer :) ) je menu Soubor - Ulozit - Uplna html (ulozi vsecko i obr ze stranky) / pouze htm (ulozi jen dany html dokument)
! je dulezite si zapamatovat cestu nebo pohlidat, kam to uklada, pripadne, jestli to tam jde.
Hledani v textu (kdyz je neco popsane vis, at se to nemusi rucne)
Notepad: Upravy - najit
Pozn.: Co je doma, to se pocita, proste, co je zobrazene, to je mozne nekde najit na disku. Konkretne je to nekde na c:\windows\Temporary internet nebo tak neco. azvy jsou zmenene podle IE, takze se to tezko hleda.
Presun stranek do internetu (jen kratky dodatek)
---------------------------
www.seznam.cz - registrace, vyplnit -> (nick@volny.cz)
www.sweb.cz - klik na Sweb light - Spravce souboru - vyplnit login na mail OK - Poslat soubor...
( http://www.sweb.cz/root/index )
( http://sweb.cz/nick/obrazek.jpg)
1. Se provede registrace mailu na seznam.cz, tim ziskame soucasne i nejake misto pro www (asi 10M)
2. Prihlasime se do ftp systemu sweb.cz (klik na Sweb light, Spravce souboru, zalogovani) a pak klikneme na Poslat soubory
3. najdeme soubory na disku, cesty (Prochazet) a pak dame Poslat
-----------------
| ---- |
| |PR| Priklad |
| ---- |
-----------------
Pozn.: Kdyz to pisu rucne, tak je dobre si to upravit, pac se mezery ani radky nepocitaji.
Udelam si HTM s obrazky na pose do slozky (adresare) Pokus
- kde to vsecko vemu, to je jedno, treba zkopcim nejake obr z netu, ze slozky dokumenty, ... a zmenim jim jmena
Adresare a soubory:
Pokus\obr : ja.jpg, ja2.jpg, obr1.jpg, obr2.jpg, hafan.gif (animovany), pozadi.gif (neanimovany, nebo pozadi.jpg)
Pokus\txt : hatlamatla.txt
Pokus\download : stranka.arj, stranka.zip, lab-protokol1.xls
Dale vytvorim HTM 3 soubory v adr. Pokus
Pokus\index.htm, stahuj.htm, obrazky.htm
(pripominam, hlidat si pismenka, doma je to jedno, ale jinde to muze delat potize)
Prvni vnutim cestinu:
Pozn. Mezi ------ a ------- je text uvnitr souboru
index.htm (editace, 2xklik leve, pokud je jiz vytvoren)
---------
Stránka Petera Mlícha
Zpět
-----------------------------------
Pozn.: Tabulka vystredit:
Pozn.: Vynechal jsem obrazky, je mozne je doplni, ja sem se rozhod udelat spesl soubor s obrazky
stahuj.htm (tohle udelam co nejjednodussi, zakladni stranka by mela byt prezentace, tahle uz nemusi)
----------
Moje a jinÚ zajÝmavÚ progrßmky a texty
... pozadi nemusi byt, ale mne se pozadi libi (kdyby jste vedeli, jaky tam pouzivam obrazek... :))) hanbatou slecnu )
priklad odkazu na jeden programek - nestahovat, to je jen pr, jsou mnohem lepcejsi. Skoda $$ za telefon
16bit /
32bit (1 MB)
Fyzika - Zas ten protokol do fyzi
lab-protokol1.xls (10 kB)
Zbalene soubory stanky - jen HTMka
stranka.zip (21 kB) - baleno WinZip 3.2
stranka.arj (24 kB) - baleno Arj 4.26
Pohadky - Ne-e, prihloupe vtipky :)
hatlamatla.txt (10 kB)
Ja - tak jo, moje fotka
ja2.jpg (5 kB) ... otevre se v novem okne, obr by se hned zobrazil
-----------------------------------------
obrazky.htm
-----------
Takovß smýsice obrßzk¨
Upozorneni:
Klikem na text nebo obrßzek dostanete výtÜÝ obrßzky.
Pßr fotek mne.
Pouziti apletu pro obr ja.jpg - WIDTH, HEIGHT - velikosti efektu
obrazky s odkazem na vetsi - obr s 2 jsou zvetseniny (ja2, obr2)
obrazky s odkazem na vetsi, bez ramecku pro AHREF
obrazky bez odkazu
textovy odkaz na obrazky
ja2.jpg (17k)
obr2.jpg (29k) - ja o par let starsi a moudrejsi, pod vlivem asi 3 sklenicek lihovin
hafan.gif (6k) - roztomili pejsanek
pozadi.gif (2k) - pozadi
obrazky v tabulce (CELLSPACING - vzdalenost bunek od sebe, ALIGN - zarovnani - funguje i u obrazku, odkazu, bunek, ... ,
CELLPADDING - vzdalenost obsahu bunky od okraje bunky ..... nejaky HTM EDITOR)
------------------------------
Pozn.: Velikosti obrazku jsou vymyslene, takze mi ted nesedi udaje, ale to na prikladu neva.
Pozn.: Udaj o velikosti by mel byt udavan u vsech veci ke stazeni, ja to davam do kulatych zavorek (2k) jsou velikost treba 1,765 kBytu.
Pozn.: Obrazky, nenapsal jsem tam udaj o rozmerech, takze ten se pak ziska z obraku, v nemz je zapsany.
Spavnejsi by bylo ho tam napsat ( ), umi to vetsina htm editoru i M$ Word.
Proc to psat? Jednoduse proto, ze kazdy obr ma sve umistneni a stranka se pak naste spravne rozlozena a pak se jen doplni obr.
Neprovedu to, obr se zpocatku nahradi miniaturnimi ikonami, stranka je rozhazena a vzhled ziska az po nacteni obrazku.
Proste normal clovek tam ty udaje da, ale nechcu nikoho nutit.
|