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. ) Webové prezentace – HTML ( 9.12. )
Síť VŠB-TU www.vsb.cz Určeno pro studenty UNIS, Edison (heslo) organizace studia uzivatel.vsb.cz Osobní agenda ( změna hesla ) ID jméno – osobní číslo ( přiděleno při zápisu ) Heslo – implicitně rodné číslo (nutno změnit) Osobní nastavení – kopie pošty na jiný e-mail, na SMS posta.vsb.cz přístup k poště
Síť VŠB-TU knihovna.vsb.cz knihovna mdg.vsb.cz katedra matematiky homel.vsb.cz/~kuc14/teach_VT.html tato prezentace
Správce domovských stránek Umožňuje spravovat soubory vlastních webových stránek Soubory jsou na serveru homel webová adresa je pak homel.vsb.cz/~IDjmeno/ Správce umožňuje: 1) průchod adresářovým stromem (Nahoru, poklepem dolů) 2) vytvoření nového adresáře (Vytvořit složku) 3) vložení souboru do aktuálního adresáře (Vložit soubor) 4) akce – Smazat, Přejmenovat, Upravit 5) přístup – Zakázat, Povolit
Co je HTML Jazyk pro vytvoření webové stránky Stránku zapsanou pomocí HTML zobrazuje prohlížeč (Internet Explorer, Netscape, Mozilla, …) Jazyk HTML se stále vyvíjí, adresa konsorcia, které schvaluje nové verze je www.w3.org (poslední verze je z 10.června 2008)
Tvorba stránky Zdrojový kód HTML je textový soubor s příponou html Vytvoří se v jakékoliv textovém editoru, např. v Poznámkovém bloku Příkazy jazyka HTML se nazývají TAGy Párový tag: <p> …. </p> Nepárový tag: <br> Zdrojový kód prohlížené stránky lze zobrazit postupem: Zobrazit, Zdrojový kód
Příklad 1 (jednoduchá stránka) <title> Jméno stránky </title> <h1> Nadpis první úrovně </h1> <p> Zde začíná první odstavec a hned končí.</p> <p>Druhý odstavec následuje.</p> <title> … titulek v okně prohlížeče <h1> … nadpis první úrovně <p> … odstavec
Příklad 1(ještě jednou totéž) <!DOCTYPE HTML PUBLIC ”-//w3c//dtd……..”> <html> <head> <title> Jméno stránky </title> </head> <body> <h1> Nadpis první úrovně </h1> <p> Zde začíná první odstavec a hned končí.</p> <p>Druhý odstavec následuje.</p> </body> </html>
Použité Tagy <!DOCTYPE ….> … údaje o verzi jazyka HTML <html> … ohraničení HTML kódu <head> … hlavička <body> … tělo stránky (to, co se má zobrazit) Zdrojový text HTML kódu má dvě části: hlavičku a tělo. Podobně jako každý rozumný počítačový program nebo také kuchařský recept.
Členění webové stránky <p> … odstavec <br> … zalomení řádku Josef Kopecký <br> Okružní 247 <br> 708 33 Ostrava-Poruba <br> <h1> až <h6> … nadpisy úrovně 1 až 6 (nejmenší) <hr> … čára přes celou šířku obrazovky
Atributy TAGů Nastavují vlastnosti určitého TAGu. Například u TAGu <hr> můžeme nastavovat: šířku v bodech nebo %: width zarovnání (left, right): align odstranění stínu: nonshade výšku čáry v bodech: size <hr width=250> <hr width=”60%” align=left> <hr width=150 size=20 nonshade>
Typy písma <font> Text vysázený zvoleným fontem </font> Fyzické fonty: <b> … tučně, <i> … kurzíva, <tt> … neproporcionální písmo, <u> … podtržené, <strike> … přeškrtnuté, <big> … větší, <small> … menší, <sub> … dolní index, <sup> … horní index Logické fonty: (stanoví prohlížeč) <cite> … citace, <code> … ukázka kódu, <em> … fráze, <kbd> … písmo definované uživatelem, <samp> … příklady, <strong> … silné zvýraznění, <var> … označení proměnných, <def> … definice
Typy písma - příklad Z matematiky se mi velice líbí <b>polynomy</b>. 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 oboru komplexních čísel. nastavení velikosti, barvy a řezu písma <font size=”10” color=”red” face=”arial”> Nějaký text. </font> barvu lze „namíchat“ ze tří základních barev, např. #CC00CC
Seznamy Nečíslovaný: <ul> <li> modrá ● modrá <li> červená ● červená <li> zelená ● zelená </ul> Číslovaný: <ol> <li> modrá 1. modrá <li> červená 2. červená <li> zelená 3. zelená </ol>
Seznamy Definiční: <dl> <dt> ovoce <dd> jablka, hrušky, třešně <dt> zelenina <dd> zelí, kedlubny, salát </dl> ovoce jablka, hrušky, třešně zelenina zelí, kedlubny, salát
Tabulky <table border=”2”> <tr> <td> Buňka11</td> Buňka11 Buňka12 <td> Buňka12</td> Buňka21 Buňka22 </tr> <td> Buňka21</td> <td> Buňka22</td> </table>
Odkazy Určují: 1) kam se odkazujeme (adresu zdroje) 2) výrazněný text <a href=”adresa”> Zvýrazněný text </a> Příklady: <a href=”http://www.seznam.cz/”> Otevři Seznam.cz </a> <a href=”dokument.doc”> Otevři dokument </a> Spuštění e-mailu <a href="mailto: jan.novak@vsb.cz">Napište mi.</a>
Odkazy V rámci jedné stránky <a href=”#návěští”> Přesuň na označený text. </a> <a name=”návěští”> označený text </a> Některé atributy: title … zobrazí bublinu target … otevře nové okno <a href=”adresa” title=”text bubliny”> zvýrazněný text</a> <a href=”adresa” target=_blank> zvýrazněný text</a>
Obrázky Vkládat lze obrázky v různých formátech: jpg, gif, png, … <img src="obrazek.jpg"> Atributy: align=left, right … umístění width=60, height=120 … výška, šířka border=”5” … šířka rámu Obrázek na pozadí (tapeta) <body background="figures/backgr.gif">
Užitečné odkazy Jak zjistit e-mailovou adresu mobilu: http://zpravy.kyblsoft.cz/podrobne.php Tvorba webových stránek http://tvorba-webu.zdarek.com/html/