EfektMail.cz
Emailing
Jakékoliv připomínky a dotazy posílejte na e-mail: Bejbal@seznam.cz
A hned na začátek dvě malá upozornění: tohle je amatérská stránka, takže nemůžete čekat nějakou velkou kvalitu a nejlepší je pro ty, kteří mají rozlišení 1024*768, protože je v tomto rozlišení dělaná.
Pokusím se, aby všechny uvedené prvky byly zobrazené na této stránce, ale přesto chápejte, že chci také, aby zde nebyly jen naplácané blbosti.
A jedna malá vychytávka , na kterou jsem pyšný: při kliknutí na ty tmavě modré čáry se dostanete SEM.
Pro přehlednější práci s touto stránkou:
Formuláře -- JAVA script -- Klikací mapy -- Odkazy -- Obrázky -- Rámce -- Seznamy -- Styly -- Tabulky -- Text
Umístění stránek na Internet -- Základní informace

Jak se taková WEB stránka tvoří: Spustíme "Poznámkový blok" a můžeme začít. Soubor vždy ukládáme s příponou "htm" či "html". Pro kvalitnější a rychlejší tvorbu vám však můžu doporučit HTML editor nebo Golden HTML Editor -ale na Internetu se dají určitě najít lepší
Vaší stránku si můžeme kdykoli zobrazit: najedeme si do složky, kam jsme si stránku uložili a otevřeme ji.Pro pokračování v naší tvorbě otevřete ZDROJOVÝ KÓD-klepnete pravým na stránku, kde chcete vidět zdrojový kód... zobrazit zdrojový kód.

Základní informace
1. Je zde jeden důležitý prvek a tím jsou tyto závorky: < > já místo nich musím psát vykřičníky.
--- <...alt60 a >...alt62
2. Každá stránka začíná !html! a končí !/html!
3. Pak následuje hlavička !head! a končí !/head! -sem vkládáme parametry pro celou stránku
---následuje !body! a končí !/body! -zde je obsah stránky
4. Dále bychom asi chtěli nějaký název stránky...za !head! napíšeme !title!vlastní nadpis!/title!
5. Chceme-li,aby se naše stránka dala najít pod určitým heslem použijeme příkaz !meta name "keywords" content="sem zadáme hesla oddělená čárkou"!
6. Pro barvu pozadí místo !body! píšeme !body bgcolor="zde napíšete barvu anglicky či hexadecimálním kódem"! a pro barvu textu ještě přidáte před poslední vykřičník: text="také anglicky či hexadecimálně"!
7. Odřádkování: !br!
8. Vodorovná čára: !hr!
9. Odstavec: !p!
Text
10. Nadpisy: !hx align="y"!...!/hx! Místo x(obě x musí být stejná) vložíte číslo od 1 do 7 a místo y vložíte "center", "right"
--- center =zarovnání na střed right =zarovnání doprava
11. Pro text psaný kurzívou: !i!...!/i!
12. Pro text psaný tučně: !b!...!/b!
13. Pro text psaný přeškrtnutě: !s!...!/s!
14. Pro vložení textu přímo ze zdrojového kódu: !pre!...!/pre!
15. Pro podtržený text: !u!...!/u!
16. Pro dolní index: !sub!...!/sub! bla bla
17. Pro horní index: !sup!...!/sup! bla bla
18. Pro různou velikost textu: !font size=x!...!/font!. Místo x číslo od 1 do 7.
19. Pro různou barvu textu---: !font color="..."!.Místo ... angl název barvy.
20. Pro různý druh písma-----: !font face="..."!.Místo ... název písma.
21. Pro pohyb písma(viz nadpis): !marguee!...!/marquee! -místo ... dáme text, který by se měl hýbat
parametry vkládáme klasicky s mezerou do příkazu marquee
Odkazy
22. Pro odkazy na další stránku: !a href="celá adresa.přípona či www adresa"! libovolný text !/a!
---pokud si umístíte odkazovaný prvek do stejné složky jako je stránka z níž se odkazujete nemusíte psát celou adresu, ale stačí pouze název souboru i s příponou
Obrázky
23. Pro vkládání obrázků: !img src="celá adresa umístění obrázku"!
parametry obrázků-vkládáme za uvozovky adresy obrázků s mezerou 24. Body 20. a 21. můžeme skombinovat...po kliknutí na obrázek se dostaneme na požadovanou stránku.
Seznamy
25. Můžeme také tvořit seznamy, př takový, jaký je u bodu 21.:začínají !ul! -pro nečíslovaný(viz 21)-končí !/ul! nebo !ol! -pro očíslovaný(viz 27)-končí !/ol!
---každý řádek začíná !li!
---Do příkazu vkládáme type -parametry pro ul: circle, square =položky značeny kolečky či čtverečky
---parametry pro ol: 1, A, a dále start 1,A,a -od jeké hdnoty se bude začínat
Tabulky
26. Pro tvorbu tabulek: začátek !table! a konec !/table!, každý řádek pak začíná !tr!, končí !/tr!, každé pole !td! !/td!
---parametry tabulky vkládáme do příkazu table :
---parametry pro řádky píšeme do tr :
---pro záhlaví tabulky pište !th stejné parametry jako předchozí!
Rámce
27. A teď zajímavá kapitola: rámce, př. takové jaké jsou na této stránce:
  1. otevřeme si nové okno v poznámkovém bloku
  2. napíšeme !html! !frameset! -frameset s parametrem buď rows="xx%,xx%" -oddělené vodorovně nebo
  3. cols="xx%,xx%" -oddělené svisle (jako já) -1. a 2.xx musí dát dohromady 100 a rozdělují stránku podle procent na dvě části
  4. dále následuje !frame src="adresa 1. stránky"! !frame src="adresa 2.stránky"!
    -případně můžete mít i více rozdělení na stránce
    -jinak za adresu stránky, kterou chcete, aby se měnila (tato stránka) při klikání na odkazy na té druhé stráncezadejte name="1" -na stránce s odkazy (odkazová str.) pak za adresu v příkazu !a href="..." target="1"!
    -pro jinou barvu oddělující čáry: !frameset bordercolor="barva"!

Klikací mapy
28. Klikací mapy-viz vedlejší stránka: Začínají příkazem !map name="libovolný název mapy"!
---následuje příkaz !area shape=circle (kolečko), rect (čtyřúhelník), polygon (mnohoúhelník), default (to,co zbude)
---za každý útvar (kromě default) píšete coords=souřadnice oddělené čárkami následuje href="adresa odkazované str"!
Formuláře
29. Formuláře-slouží nám k získávání informací od uživatelů, obsah formulářů se odesílá e-mailem
---tam, kde chceme mít formulář píšeme: !form action="mailto:náš email" method="post" enctype="libovolný text/plain"!
---jednotlivá pole vždy začínají příkazem !input! -parametry příkazu:
Styly
30. Styly-slouží k lepším úpravám textu, i když jsou poměrně složitější, než co jste znali doposud -díky tomu můžeme vytvořit určitý styl pro skupinu stránek s malou námahou -kaskádové styly lze do stránek připojit
-1.můžeme zapsat definici stylu do konkrétního
-pro celý dokument můžeme použít tabulku stylů (stylesheet) zapsanou do značky style, načtením externí tabulky značkou link
-používáme pro části ve výjimečnýc
-nejprve musíme uvést pro jaký prvek pravidla platí a potom uvést jeho vlastnosti-může jich být až několik desítek,např:vzhled písma, rozměry rámečků atd.Stačí nastavit pouze ty, které chceme měnit -každá vlastnost má jednoznačný název a má určeny povolené hodnoty i svou výchozí hodnotu, která se použije,pokud vlastnost nenadefinujeme
color:red; font-size:small 
- Dědičnost stylů: některé vlastnosti jsou dědičné, nastavíme-li např v body typ písma, použijí ho všechny prvky na stránce až na ty, které mají nadefinovaný svůj styl.Teprve když prohlížeč nenajde žádnou nadefinovanou vlastnost použije výchozí, kterou má nadefinovanou prohlížeč.
  1. do hlavičky napíšeme: !style type="text/css"! !!-- .libolný název {definice; definice} --!
  2. v těle pak: !span class=název! ... !/span!
---4. vykřičník je normální vykřičník
---Příklad definice: {font-size:10; color:red}
font-size -hodnotou jsou klíčová slova nebo číselné hodnoty s jednotkou případně procenta-pokud nic neurčíme, základní velikost bývá 12pt. Např H1 se v tabulce stylu nastavuje ajko dvojnásobek.Chceme-li změnit základní velikost písma uděláme to stylem pro body. Používáme-li číselné hodnoty bla bla bla px =pixely, pt =nějaké body, cm =centimetry, in =palce
-barva písma je určena vlastností color-hodnotou je angl název nebo kód barvy-tato vlastnost je dědičná, můžeme tedy definovat výchozí barvu do body
-toto nastavení nepltí pro odkazy, definují se samostatně
Kaskáda -některé prvky ohou mít vlastnost definovanou současně na více místech. Potom mají přednost přesnější a konkrétnější před obecnými.Máme-li například pravidlo s třídou má přednost před pravidlem bez třídy H1.A{color:red} má přednost před H1 {color:blue} -ještě vyšší třídu má selektor ID, který platí pro jediný prvek # pozn{color:green}- !h1 class ="a" id="pozn"!
Pokud se sejdou stejně konkrétní definice, platí ta, která je zapsána nejpozději-styl definovaný v hlavičce stránky má přednost před externím stylem, styl v značce má přednost před oběma zbývajícími styly
Odstup od rámečku: určuje odstup textu od rámečku, nadefinovat můžeme i odstup k jednotlivým stranám např: padding-left
vlastnost padding může mít 1-4 hodnoty, udávají odstup od horního, pravého, spodního a levého rámu; použít můžeme číselné hodnoty nebo jednotku EM em -tato jednotka odpovídá velikosti použitého písma, případě změny velikosti písma v prohlížeči se změní i velikost mezery
H1 {border:3px solid black; padding:15pt 1em 20pt 1,5em}
margin -popisuje okraje okolo prvků, budˇpopisujeme 1 hodnotou všechny 4 okraje nebo pro všechny 4 okraje zadáme konkrétní hodnoty (jako předtím) nebo definujeme jednotlivé strany př: margin top -v body můžeme takto nastavit okraje stránky
styl pozadí -mohou mít všechny prvky, obrázky lze rovnat i vodorovně nebo svisle, definujeme vlastností background -hodnotou může být barva, adresa obrázku, obojí; adresa pozadí se zapisuje pomocí url("...") ; -pokud necheme aby se obrázek na pozadí opakoval přidáme no-repeat ; pomocí parametru můžeme take určit polohu
Obtékání prvků zajistí vlastnost float -right, left, noname; obrázek má šířku určenou, ostatním objektům ji musíme nadefinovat, chceme-li mezi objekty mezeru definujeme ji vlastností margin
Odkazy: můžeme definovat v příkazu a{...}, potom se styl nemění, chceme-li styl definovat i pro různé stavy, používáme selektory a:link{...} -nenavštívený, a:visited -navštívený, a:active -aktivní, a:hover -na něj ukazujeme myší
Umístění stránek na Internet
31. No a konečně se dostáváme k závěrečné části=umístit naše stránky na Internet, aby se stali slavnými.
Tak tedy do toho:
  1. Přihlásíme se k Internetu na stránce známého vyhledávače Seznam
  2. Klikneme na odkaz www stránky
  3. Dále vstoupíte na Sweb light
  4. Nyní bychom se měli zaregistrovat, pokud jste to neudělali již někdy dříve-zde budete muset vyplnit mnoho osobních údajů.
  5. No a teď stačí nahrát své stránky a další pomocné programy pomocí Nahrát soubory -to uděláte tak, že je nejdříve načtete do 3 volných políček a pak až dáte Nahrát soubory
---aby se daly vaše stránky vyhledávat musíte si je na Seznamu zaregistrovat v katalogu stránek
JAVA script
Poněvadž orientace v této sekci by mohla být složitější, rozhodl jsem se i tady udělat jakýs takýs přehled:
Cykly -- Dynamicky generované stránky -- Funkce -- Komentáře -- Okna -- Pole -- Proměnné -- Události -- Úpravy textu -- Větvení
Základní informace
32. Tatímco HTML formát a styly slouží pouze k zobrazování údajů, scripty nám umožňují vytvářet na Netu funkční programy. Některé scripty jsou interpretovány na straně klienta, neovlivňují data na serveru (JAVA script). Jiné programy pro tvorbu scriptů umožňují pracovat klientovi přímo na serveru (PHP).
Základní informace: Psaní scriptů: můžeme je vytvářet stejnými nástroji jako HTML mód-např v Poznámkovém bloku
Výpis textu na stránce: script se umisťuje do HTML stránky, v místě, kde se má zobrazit
-začátek a konec scriptu je vymezen značkami !script! a !/script!
-parametr language specifikuje druh scriptovacího jazyka
Komentáře: - ...konec komentáře
-dokument write je příkaz, který provádí výpis textu a umožňuje vkládat i HTML značky
Úpravy textu: -pokud chceme v textu vypsat řídící znaky musí se psát za opačné lomítko
Rozdělování dlouhých řádků na více částí: Buď použijeme xkrát document.write nebo text rozdělíme pomocí +
Externě umístěný text: scripty můžeme umístit na samostatnou stránku s příponou .js není třeba používat komentáře a další značky jako HTML
-pokud v HTML stránce chceme script použít, vložíme ho pomocí parametru src="adresa stránky"
Proměnné: její hodnota se může měnit; v proměnné můžeme mít: 1. číselné-reálná či celá čísla 2. znakové údaje: jednotlivé znaky či řetězce 3. logické údaje: hodnoty true nebo false
-každá proměnná musí název a musíme vědět hodnotu, které jí chceme přiřadit; názvy proměnných se mohou skládat z: písmen, číslic, podtržítek
-Musí vždy začínat ... a nesmí se shodovat s příkazy JAVA scriptu; jedné proměnné můžeme přiřadit hodnotu jiné proměnné: cislo=b cislo=15
-proměnné můžeme také přiřadit hodnotu kterou získáme z různých matematických operací, např: vysl=cislo*3 document.write(vysl)
-pokud do document.write chceme vložit proměnou i text, dáváme text do uvozovek a oddělíme od proměnné čárkou
-některé operace můžeme v JAVA scriptu zjednodušit; aritmetické operátory ++ přičte k proměnné 1; +=x přičte x
Funkce: umožňují opakovat určitý sled ještě jenou provedených příkazů. Jde tedy o pojmenovaný úsek programu, který plní určitý druh úkonu. Chceme-li fci dále použít, musíme ji vyvolat. Fce dělíme na: fce bez argumentu (nelze u nich ovlivnit provádění úlohy), fce s argumentem (lze u nich přímo ovlivnit provádění úlohy)
Fce bez argumentu: jde o jednoduché fce, které mají pevně určenou úlohu. Abychom mohli fci používat, musíme ji nejprve nadefinovat v hlavičce
function ramecek () {document.write ("------"); document.write ("I i");document.write ("------");} -to je v hlavičce ve scriptu samozřejmě
Fce s parametrem: argument nám umožňuje regulovat a ovlivňovat změny při vykonávání fcí, fce může mít i více argumentů
function nazev (argument, arg...)
{telo fce}
Příklad: !script language="javascript"!
!!--
function ramecek (barva)
{
document.write("!pre!","-----------------------------","!/pre!")
document.write("!pre!","| čus |","!/pre!");
document.write("!pre!","-----------------------------","!/pre!");
}
--!
!/style!
-tak to vypadá v hlavičce, jenže 4.vykřičník je opět normální a ne <, příkazy pre jsou také v <, >
Fce vracející hodnotu: fce se často používají k tomu aby např provedli urč úkon a odevzdali výsledek k dalšímu zpracování -na to se požívá příkaz return, ktery mí vracet hodnoty číselné, textové nebo true, false
v hlavičce: function mocnina (cislo) return cislo*cislo;
pak v těle: document.write("5"," ","2"," ","="+mocnina(5));
document.write zvolá fci mocnina s argumentem 5, fce se provede
výsledek výpočtu se odevzdá pomocí return do document.write a ten vypíše výsledek;
Pole: je zpecifický druh proměnné, zkládá se z více hodnot, které spolu souvisí;
Tvorba pole: pole musíme povinně definovat: 1. deklarace prázdného pole: nazev=new Array(); nebo uvedeme prvky-do závorky pak uvedeme dané prvky;
---textové prvky do uvozovek
- manipulace s prvky pole: pole může obsahovat neomezeně mnoho prvků, každý prvek má kromě své hodnoty i pořadové číslo-pomocí něj můžeme prvek adresovat
Větvení: můžeme používat rozhodovací konstrukce, s jejich pomocí zabezpečujeme větvení
Porovnávací operátory: jejich úkolem je vracet logické hodnoty true nebo false
výraz operátor true jestliže
a==b == hodnota a=b
a=!b != a se nerovná b
a>b > a je větší než b
a>=b >=
a <
a <=b <=

Rozhodovací konstrukce:
Okna: Dialogová okna: slouží ke komunikaci uživatele s programem Uživatelská dialog.okna
  1. Výstražné informační okno: slouží k zvýraznění textu; window.alert("text"); -chceme-li řádek rozdělit, použijeme formátovací znak \n
  2. Potvrzovací okno: občas chceme položit otázku, na kterou existuje odpověď ano/ne; potom je vhodné použít potvrzovací okno; window.confirm("otázka"); -podle stisknutého tlačítka dochází k vrácení logické hodnoty true/false -pokud chceme na základě rozhodnutí uživatele něco provést, použijeme např. if
  3. Vstupní okno: používáme ho, pokud potřebujeme od uživatele konkrétní hodnotu; window.prompt("text", "implicitní text"); -jde o inf v okně, implic. text bude ve vstupním poli (odpověď);

Cykly: slouží k opakování urč. posloupnosti příkazů, musí být určen způsob kolikrát se bude cyklus opakovat, jak zajistit urč počet opakování;
-rozlišujeme tyto cykly: příkazy ovlivňující cyklus: Události: někdy používáme scripty které se neprovedou ihned, ale až při nějaké akci (např kliknutím myši, zavření stránky apod.); abychom mohli takovýto script použít, musíme nejprve nadefinovat tzv ovladač. Je to parametr, který sleduje zda urč. událost nastala - pokud ano, vykoná se v příkazu v JAVA; !html značka ovladač události="script"!
Uživatelská okna: slouží k automatickému otvírání nových oken-k tomu lze i v HTML využít target -ale máme minimální možnosti úprav, proto častěji používáme JAVA script, kde můžeme upravovat mnohé vlastnosti;
zápis: window.open("url","název okna","vlastnosti okna"); -vložíme-li prázdné uvozovky, otevře se prázdné okno
vlastnosti okna: upravují vzhled, může jich být víc a oddělují se čárkou

Dynamicky generované stránky: Dynamicky generované stránky: můžeme otevřít prázdné okno a přiřadit mu obsah pomocí JAVA scriptu-tato stránka existuje jen v paměti počítače, pro vytvoření takovéto stránky použijeme tzv. pseudoprotokol: !a href="javascript:generuj();"! text !/a!
-než však tuto fci použijeme, je třeba okno otevřít a přiřadit mu obsah: !script language="javascript"! function generuj() { jmeno=window.prompt("Napiš svojejméno",""); okno=window.open(" ","okno","width=200","height=200");okno=document.write(" "); okno=document.write("ahoj"+jmeno); okno=document.write(" " "); } !/script! !a href="java script:generuj();"!vygeneruj!/a!
Manipulace s okny: můžeme použít mnohé fce, které umožňují manipulovat s okny (např. přesouvat,měnit apod.)
-tyto fce se váží na specifikované okno: nazevokna.funkce()
Chceme-i manil¨pulovat s aktual oknem, použijeme window.fce()
Funkce: činnost:
close ( ) zavře okno
focus ( ) nastavení okna do popředí
blur ( ) nastavení okna do pozadí
moveTo (x,y) přesun okna na souřadnice X,Y
moveBy (x,y) přesun okna o X pixelů doprava
resizeTo (x,y) mění rozměr okna
resizeBy (x,y) zvětšuje/zmenšuje
scrollTo (x,y) rolování textu v okně na souřadnice
scrollBy (x,y) skrolování doleva a dolů
with -příkaz, požíváme pro ulehčení zápisu, příkaz automaticky dpolňuje chybějící začátky
Datum a čas: ve scriptech můžeme využít datum a čas, buď zobrazený nebo mohou ovlivňovat činnost scriptů; čas se bere ze syst. hodin počítače uživatele
---k práci s datem a časem používáme objekt date, dále můžeme použít nejrůznější fce; některé např vrátí údaj (den, měsíc) v podobě pořadového čísla např fce get date ; pkud těmto číslům přiřadíme názvy definované v poli, můžeme číslům přiřadit český údaj;
načasování operací: použijeme, chceme-li provést akci až po nějaké době; můžeme použít pro znovi načtení okna, přesměrování, ale i provádění dalších příkazů
window.setTimeout umožňuje nahrání stránky po urč. časovém intervalu, který provede fci refresh; tato fce nastaví časovač na urč čas, potom se provede window.location která nahraje stránku;
konstrukce windowsetTimeout: -do závorky a uvozovek zadáváme kód a bez uvozovek je čas v milisekundách
window.clearTimeout -umožňuje ukončit už zahájený proces odpočítávání

činnost programu: jsou vytvořeny funkce zapni/vypni; obě se aktivují až po klepnutí na tlačítko; funkce zapni zobrazuje aktuální čas, získává údaje prostřednictvím proměnné dnes, která je ukazetelem objektu date, získané údaje se zpracují a uloží; tento obsah se zapíše do stavového řádku;
Window.setTimeout zabezpečí, že se fce hodiny spustí každou vteřinu
Funkce vypni: ukončí vyvolávání fce zapni, k tomu používáme window.clearTimeout () -do závorky píšeme ukazatel příslušný wsTo
Getdate() 1-31 Vrací číslo dne v aktuálním měsíci
getday() 0-6 Vrátí číslo dne v aktuálním týdnu
gethours() 0-23; 0=půlnoc vrátí aktuální hodinu
getminutes() 0-59 -II-
getseconds() 0-59 -II-
getmilliseconds() 0-999 -II-
getmonth() 0-11 -II-
getfullyear() rrrr -II-
zajímá-li tě čas, zapni si javahodiny -zobrazí se vlevo dole

příklad hodin (tohle je v hlavičce; pozor, mě to nefungovalo v html editoru): zapnute=false function zapni() { dnes=new Date(); with (dnes) {hodina=getHours(); minuta=getMinutes(); sekunda=getSeconds();} cas=hodina; cas+=((minuta <10) ? ":0" : ":")+minuta; cas+=((sekunda<10) ? ":0" : ":")+sekunda; window.status=cas; casovac=window.setTimeout("zapni()",1000); zapnute=true; } function vypni() { if (zapnute) { window.clearTimeout (casovac); window.status+="(zobrazeni pozastaveno)"; zapnute=false; } }
a tohle je v těle=body: !form! !input type="button" onclick="zapni();"value="zapni"! !input type="button" onclick="vypni();"value="vypni"! !/form!
Tak to je zatím vše, co znám, můžete jen doufat, že se ještě něco dozvím...a něco sem přibude