Embed Size (px)
DESCRIPTION
Výpočetní technika 2008/09. Obsah předmětu. Využití sítě VŠB-TU ( 16.9. ) Řešení mat. úloh v Excelu ( 30.9. ) Programování funkcí ( 14.10. ) Matlab - základy ( 11.11. ) Matlab – rozsáhlejší úlohy ( 25.11. ) - PowerPoint PPT Presentation
Citation preview
Výpočetní technikaVýpočetní technika 2008/09 2008/09
Obsah předmětuObsah předmětu
Využití sítě VŠB-TU ( 16.9. )Využití sítě VŠB-TU ( 16.9. )
Řešení mat. úloh v Excelu ( 30.9. )Řešení mat. úloh v Excelu ( 30.9. )
Programování funkcí ( 14.10. )Programování funkcí ( 14.10. )
Matlab - základy ( 11.11. ) Matlab - základy ( 11.11. )
Matlab – rozsáhlejší úlohy ( 25.11. )Matlab – rozsáhlejší úlohy ( 25.11. )
Webové prezentace – HTML ( 9.12. )Webové prezentace – HTML ( 9.12. )
Síť VŠB-TUSíť VŠB-TU
www.vsb.cz Urwww.vsb.cz Určeno pčeno pro studentyro studenty
UNIS, Edison (heslo) UNIS, Edison (heslo) o organizace studia rganizace studia
uzivatel.vsb.czuzivatel.vsb.cz OsobnOsobní agendaí agenda (( zzměna hesla měna hesla ))
ID jmID jméénono – – osobní číslo osobní číslo (( ppřiděleno při zápisu řiděleno při zápisu )) Heslo Heslo –– implicitně rodné číslo implicitně rodné číslo (nutno zm(nutno změěnit)nit)
Osobní nastavení – kopie Osobní nastavení – kopie popošty na jiný e-mail, šty na jiný e-mail, na na SMSSMS
postaposta.vsb.cz.vsb.cz přístup k poště přístup k poště
Síť VŠB-TUSíť VŠB-TU
knihovna.vsb.cz knihovnaknihovna.vsb.cz knihovna
mdg.vsb.cz katedra matematikymdg.vsb.cz katedra matematiky
homel.vsb.cz/~kuc14/teach_VT.html tato prezentace homel.vsb.cz/~kuc14/teach_VT.html tato prezentace
SSprprávce domovských stránekávce domovských stránek Umožňuje spravovat soubory vlastních webových stránekUmožňuje spravovat soubory vlastních webových stránek
Soubory jsou na serveru homel webová adresa je pakSoubory jsou na serveru homel webová adresa je pak
homel.vsb.cz/~IDjmeno/homel.vsb.cz/~IDjmeno/
Správce umožňuje: Správce umožňuje:
1) průchod adresářovým stromem (Nahoru, poklepem dolů)1) průchod adresářovým stromem (Nahoru, poklepem dolů) 2) vytvoření nového adresáře (Vytvořit složku)2) vytvoření nového adresáře (Vytvořit složku) 3) vložení souboru do aktuálního adresáře (Vložit soubor)3) vložení souboru do aktuálního adresáře (Vložit soubor) 4) akce – Smazat, Přejmenovat, Upravit4) akce – Smazat, Přejmenovat, Upravit 5) přístup – Zakázat, Povolit5) přístup – Zakázat, Povolit
Co je HTMLCo je HTML
Jazyk pro vytvoření webové stránkyJazyk pro vytvoření webové stránky
Stránku zapsanou pomocí HTML zobrazuje prohlížečStránku zapsanou pomocí HTML zobrazuje prohlížeč
(Internet Explorer, Netscape, Mozilla, …)(Internet Explorer, Netscape, Mozilla, …)
Jazyk HTML se stále vyvíjí, adresa konsorcia, které schvaluje Jazyk HTML se stále vyvíjí, adresa konsorcia, které schvaluje nové verze je www.w3.orgnové verze je www.w3.org
(poslední verze je z 10.června 2008)(poslední verze je z 10.června 2008)
Tvorba stránkyTvorba stránky
Zdrojový kód HTML je textový soubor s příponou htmlZdrojový kód HTML je textový soubor s příponou html
Vytvoří se v jakékoliv textovém editoru, Vytvoří se v jakékoliv textovém editoru,
např. v Poznámkovém blokunapř. v Poznámkovém bloku
Příkazy jazyka HTML se nazývají TAGyPříkazy jazyka HTML se nazývají TAGy
Párový tag: <p> …. </p> Nepárový tag: <br>Párový tag: <p> …. </p> Nepárový tag: <br>
Zdrojový kód prohlížené stránky lze zobrazitZdrojový kód prohlížené stránky lze zobrazit postupem:postupem:
Zobrazit, Zdrojový kódZobrazit, Zdrojový kód
Příklad 1 Příklad 1 (jednoduchá stránka)(jednoduchá stránka)
<title> Jméno stránky </title><title> Jméno stránky </title>
<h1> Nadpis první úrovně </h1><h1> Nadpis první úrovně </h1>
<p> Zde začíná první odstavec a hned končí.</p><p> Zde začíná první odstavec a hned končí.</p>
<p>Druhý odstavec následuje.</p><p>Druhý odstavec následuje.</p>
<title> … titulek v okně prohlížeče<title> … titulek v okně prohlížeče <h1> … nadpis první úrovně<h1> … nadpis první úrovně <p> … odstavec<p> … odstavec
Příklad 1Příklad 1(ještě jednou totéž)(ještě jednou totéž)
<!DOCTYPE HTML PUBLIC ”-//w3c//dtd……..”> <!DOCTYPE HTML PUBLIC ”-//w3c//dtd……..”>
<html><html>
<head><head>
<title> Jméno stránky </title><title> Jméno stránky </title>
</head></head>
<body><body>
<h1> Nadpis první úrovně </h1><h1> Nadpis první úrovně </h1>
<p> Zde začíná první odstavec a hned končí.</p><p> Zde začíná první odstavec a hned končí.</p>
<p>Druhý odstavec následuje.</p><p>Druhý odstavec následuje.</p>
</body></body>
</html></html>
Použité TagyPoužité Tagy
<!DOCTYPE ….> … údaje o verzi jazyka HTML<!DOCTYPE ….> … údaje o verzi jazyka HTML <html> … ohraničení HTML kódu<html> … ohraničení HTML kódu <head> … hlavička<head> … hlavička <body> … tělo stránky (to, co se má zobrazit)<body> … tělo stránky (to, co se má zobrazit)
Zdrojový text HTML kódu má dvě části: hlavičku a tělo. Zdrojový text HTML kódu má dvě části: hlavičku a tělo.
Podobně jako každý rozumný počítačový program nebo Podobně jako každý rozumný počítačový program nebo
také kuchařský recept. také kuchařský recept.
Členění webové stránkyČlenění webové stránky
<p> … odstavec <br> … zalomení řádku<p> … odstavec <br> … zalomení řádku
Josef Kopecký <br>Josef Kopecký <br>
Okružní 247 <br>Okružní 247 <br>
708 33 Ostrava-Poruba <br>708 33 Ostrava-Poruba <br>
<h1> až <h6> … nadpisy úrovně 1 až 6 (nejmenší)<h1> až <h6> … nadpisy úrovně 1 až 6 (nejmenší) <hr> … čára přes celou šířku obrazovky<hr> … čára přes celou šířku obrazovky
Atributy TAGůAtributy TAGůNastavují vlastnosti určitého TAGu. Nastavují vlastnosti určitého TAGu.
Například u TAGu <hr> můžeme nastavovat:Například u TAGu <hr> můžeme nastavovat:
šířku v bodech nebo %: widthšířku v bodech nebo %: width zarovnání (left, right): alignzarovnání (left, right): align odstranění stínu: nonshadeodstranění stínu: nonshade výšku čáry v bodech: sizevýšku čáry v bodech: size
<hr width=250><hr width=250>
<hr width=”60%” align=left><hr width=”60%” align=left>
<hr width=150 size=20 nonshade><hr width=150 size=20 nonshade>
Typy písmaTypy písma
<font> Text vysázený zvoleným fontem </font><font> Text vysázený zvoleným fontem </font>
Fyzické fonty: Fyzické fonty:
<b> … tučně, <i> … kurzíva, <tt> … neproporcionální <b> … tučně, <i> … kurzíva, <tt> … neproporcionální písmo, <u> … podtržené, <strike> … přeškrtnuté, <big> písmo, <u> … podtržené, <strike> … přeškrtnuté, <big> … větší, <small> … menší, <sub> … dolní index, <sup> … … větší, <small> … menší, <sub> … dolní index, <sup> … horní indexhorní index
Logické fonty: (stanoví prohlížeč)Logické fonty: (stanoví prohlížeč)
<cite> … citace, <code> … ukázka kódu, <em> … fráze, <cite> … citace, <code> … ukázka kódu, <em> … fráze, <kbd> … písmo definované uživatelem, <samp> … příklady, <kbd> … písmo definované uživatelem, <samp> … příklady, <strong> … silné zvýraznění, <var> … označení <strong> … silné zvýraznění, <var> … označení proměnných, <def> … definiceproměnných, <def> … definice
Typy písma - příkladTypy písma - příklad
Z matematiky se mi velice líbí <b>polynomy</b>. Z matematiky se mi velice líbí <b>polynomy</b>. Obzvláště rád po večerech řeším <i>kvadratické Obzvláště rád po večerech řeším <i>kvadratické rovnice</i> ax<sup>2</sup>+bx+c=0, jejichž řešení je v rovnice</i> ax<sup>2</sup>+bx+c=0, jejichž řešení je v oboru komplexních čísel.oboru komplexních čísel.
nastavení velikosti, barvy a řezu písmanastavení velikosti, barvy a řezu písma
<font size=”10” color=”red” face=”arial”><font size=”10” color=”red” face=”arial”> NNějaký text.ějaký text. </font></font>
barvu lze barvu lze „„namnamíchat“ ze tří základních barev, např. íchat“ ze tří základních barev, např. #CC00CC#CC00CC
SeznamySeznamy
Nečíslovaný: <ul>Nečíslovaný: <ul>
<li> modrá ● modrá<li> modrá ● modrá
<li> červená ● červená <li> červená ● červená
<li> zelená ● zelená<li> zelená ● zelená
</ul> </ul>
Číslovaný: <ol>Číslovaný: <ol>
<li> modrá 1. modrá<li> modrá 1. modrá
<li> červená 2. červená <li> červená 2. červená
<li> zelená 3. zelená<li> zelená 3. zelená
</</ool> l>
SeznamySeznamy
Definiční: <dl>Definiční: <dl>
<dt> ovoce <dt> ovoce
<dd> jablka, hrušky, třešně <dd> jablka, hrušky, třešně
<dt> zelenina<dt> zelenina
<dd> zelí, kedlubny, salát<dd> zelí, kedlubny, salát
</dl> </dl>
ovoceovoce
jablka, hrušky, třešně jablka, hrušky, třešně
zelenina zelenina
zelí, kedlubny, salátzelí, kedlubny, salát
TabulkyTabulky
<table<table border=”2” border=”2”>>
<tr><tr>
<td> Buňka11</td> Buňka11 Buňka12<td> Buňka11</td> Buňka11 Buňka12
<td> Buňka12</td> Buňka21 Buňka22<td> Buňka12</td> Buňka21 Buňka22
</tr></tr>
<tr><tr>
<td> Buňka21</td> <td> Buňka21</td>
<td> Buňka22</td> <td> Buňka22</td>
</tr></tr>
</table></table>
OdkazyOdkazy Určují: 1) kam se odkazujeme (adresu zdroje)Určují: 1) kam se odkazujeme (adresu zdroje)
2) výrazněný text2) výrazněný text
<a <a hrefhref=”adresa”> Zvýrazněný text </a>=”adresa”> Zvýrazněný text </a>
Příklady:Příklady:
<a <a hrefhref=”http://www.seznam.cz/”> Otevři Seznam.cz </a>=”http://www.seznam.cz/”> Otevři Seznam.cz </a>
<a <a hrefhref=”dokument.doc”> Otevři dokument </a>=”dokument.doc”> Otevři dokument </a>
Spuštění e-mailuSpuštění e-mailu
<a <a hrefhref="mailto: [email protected]">Napište mi.</a>="mailto: [email protected]">Napište mi.</a>
OdkazyOdkazy V rámci jedné stránkyV rámci jedné stránky
<a <a hrefhref=”#návěští”> Přesuň na označený text. </a>=”#návěští”> Přesuň na označený text. </a>
<a <a namename=”návěští”> označený text </a>=”návěští”> označený text </a>
Některé atributy: Některé atributy: titletitle … zobrazí bublinu … zobrazí bublinu
targettarget … otevře nové okno… otevře nové okno
<a <a hrefhref=”adresa” =”adresa” titletitle=”text bubliny”> zvýrazněný text</a> =”text bubliny”> zvýrazněný text</a>
<a <a hrefhref=”adresa” =”adresa” targettarget=_=_blankblank> zvýrazněný text</a>> zvýrazněný text</a>
ObrázkyObrázky Vkládat lze obrázky v různých formátech: jpg, gif, png, …Vkládat lze obrázky v různých formátech: jpg, gif, png, …
<img <img srcsrc="obrazek.jpg"> ="obrazek.jpg">
Atributy: Atributy: alignalign==leftleft, , rightright … umístění … umístění
widthwidth=60, =60, heightheight=120=120 … výška, šířka … výška, šířka
borderborder=”5” =”5” … šířka rámu … šířka rámu
Obrázek na pozadí (tapeta)Obrázek na pozadí (tapeta)
<body <body backgroundbackground="figures/backgr.gif">="figures/backgr.gif">
Užitečné odkazyUžitečné odkazy
Jak zjistit e-mailovou adresu mobilu:Jak zjistit e-mailovou adresu mobilu:
http://zpravy.kyblsoft.cz/podrobne.phphttp://zpravy.kyblsoft.cz/podrobne.php
Tvorba webových stránekTvorba webových stránek
http://tvorba-webu.zdarek.com/html/http://tvorba-webu.zdarek.com/html/
