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 Pisnicka

Sla Nanynka do zeli... ========== Priklad 4: html soubor s hlavickou (smazane radky mezi BODY) ==========pisnicka.htm Stranka Marcelky: pisnicka Pisnicka

Sla Nanynka do zeli... ========== Html obsah: Hlavicka: - kodovani - presmerovani - klicovaslova - nazev Nazev - CSS ze souboru - CSS Telo: - barva text text=#9400EC - barva pozadi bgcolor=#008080 - obrazek pozadi background="obr\noc.jpg" - barva odkaz neviden link=#80ff00 - barva odkaz viden vlink=#ffff00 - barva odkaz TAB alink=#c0c0c0 Textove tagy: - tlusty (bold) - sikmy (italic) - podtrzeny (UnderLine)
- novy radek (text se nezalamuje, je nutne napsat BR)
- centrovani

- nadpis (definovanych 7 stylu psani) - zmena pisma
- cara od okraje k okraji +
  - tvrda mezera (do skoly -> do skoly), predlozka neni na jinem radku pri zmene sirky okna @ - zavinac (vhodne pro maily) Odkazy: popis Odkaz adresa = www.volny.cz/peter.mlich/index.html adresa = www.volny.cz/peter.mlich/Obr/Peta.jpg adresa = Obr/Peta.jpg zkracena cesta !adresa = C:/Obr/Peta.jpg NESMYSL! protoze ja chci, aby se citateli z jeho disku C: zobrazil obrazek v adresari... V nasem pripade jsem citatel-tvoritel, ja na disku tyto obrazky mam, mi to funguje. ALE da se to vyuzit pro inetove hry. adresa = #rejstrik cil = target=neco (neco, _blank, _top, ...) v novem okne: target=_blank prepsat cele okno (viz ramy): target=_top popis = text/obrazek/neco jineho Ikarie (SCI-FI) Pr. Klikatelny obrazek obr fotky Pr. klikatelny text Fotky popis2 Seznam / Obsah popis1 cil obsahu rejstrik = povaha (musi byt jedno slovo, nefunguji nektere specialni znaky) popis1 = Povaha popis2 = Povahove vlastnosti popis1 = popis2 = Povaha Seznam s odrazkami (existuji i s cisly) popis2 Pr. Seznam Vypocty valce












Povrch valce:
S = 2*Sp + Spl = 2*pi*r*r + 2*pi*r*v = 2*pi*r*(r+v)
Sp... podstava, Spl... plast, r...polomer, v...vyska












Objem valce:
S = pi*r*r*v












3 - obrazky ----------- obrazek = "Obr\colorbar.gif" - adresa s obrazkem (source) rozmery = width="600" height="1" - rozmery (sirka,vyska), dobre uvadet pro rychle nacitani stranky popisek = alt="Barevná čára" - slouzi pro popisek (alternativni), nepovinne oramovani = border=3 - ramecek kolem bude 3 (0=bez ramecku), nepovinne Rozmery je mozne uvest jakekoliv, obrazek se na ne zmensi nebo zvetsi po nacteni z inetu. ALE je lepsi uvadet rozmery vetsi nebo stejne jako obrazek. Pro velke obrazky je dobre delat nahledy, tj. druhy, mensi obrazek, aby se stranka dlouho nenacitala. Pr. barevna cara Pr. pocitadlo data CGI skriptu se ukladaji do souboru pm.dat (muj soubor) na pocitaci pocitadlo.mrp.cz/ Tabulka (usporadani do tabulky, vetsinou zbytecnost) ------- Misto tabulky je mozne pouzit ramy pro tlacitka. Nejednodussi forma vypada treba takto:
Nadpis
xxxyyy
xxxyyy
kde ... TH tabulka bunka head (ALIGN=CENTER, BOLD, VALIGN=CENTER) ... TD tabulka bunka {ALIGN=LEFT, VALIGN=CENTER} ... TR tabulka radek Dale je mozne nastavovat ruzne rozmery a styl bunky TH, TD a chovani tabulky...
----------------------------- Pr:
Ahoj
zzz1
xxx1
xxx1
zzz2
yyy1zzz1
yyy1zzz1
zzz3
yyy2zzz2
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
vlevovpravo
vpravovlevo
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




Peterova tabulka nesmyslu
Nadpis tabulky, Font-Color ... zmena barby pisma
odkaz na net Text pro odkaz1 - Trnky Brnky
odkaz na mail Text pro odkaz2 - Muj mail: x.x@x.cz
odkaz na htm Text pro odkaz3 - Sem urcite neklikejte, to je tajna adresa
odkaz na soubor Text pro odkaz4 - blabolky pro holky
odkaz na souborText pred odkazem - muj protokol do fyziky Text pro odkaz4a - lab-protokol1.xls text za odkazem (10kB)
Totez slusne
Fyzikaprotokol - mereni tihoveho zrychleni lab-protokol1.xls (10kB)
odkaz na htm Text pro odkaz5 - Sem urcite tez neklikat, fotky vam nedam :)


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)
jaja-starsi

obrazky s odkazem na vetsi, bez ramecku pro AHREF
jaja-starsi

obrazky bez odkazu
roztomili pejsanekpozadi z mych ostatnich stranek

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)
ja ja-starsi roztomili pejsanek pozadi z mych ostatnich stranek
ja2.jpg (17k) obr2.jpg (29k) hafan.gif (6k) pozadi.gif (2k)
Ja Ja starsi roztomili pejsanek pozadi
------------------------------ 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.