Stáhnout prezentaci
Prezentace se nahrává, počkejte prosím
1
Výpočetní technika /09
2
Obsah předmětu Využití sítě VŠB-TU ( 16.9. )
Řešení mat. úloh v Excelu ( ) Programování funkcí ( ) Matlab - základy ( ) Matlab – rozsáhlejší úlohy ( ) Webové prezentace – HTML ( )
3
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ý , na SMS posta.vsb.cz přístup k poště
4
Síť VŠB-TU knihovna.vsb.cz knihovna mdg.vsb.cz katedra matematiky
homel.vsb.cz/~kuc14/teach_VT.html tato prezentace
5
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
6
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 (poslední verze je z 10.června 2008)
7
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
8
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
9
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>
10
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.
11
Členění webové stránky
<p> … odstavec <br> … zalomení řádku Josef Kopecký <br> Okružní 247 <br> Ostrava-Poruba <br> <h1> až <h6> … nadpisy úrovně 1 až 6 (nejmenší) <hr> … čára přes celou šířku obrazovky
12
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>
13
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
14
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
15
Seznamy Nečíslovaný: <ul> <li> modrá ● modrá
<li> červená ● červená <li> zelená ● zelená </ul> Číslovaný: <ol> <li> modrá modrá <li> červená červená <li> zelená zelená </ol>
16
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
17
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>
18
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=” Otevři Seznam.cz </a> <a href=”dokument.doc”> Otevři dokument </a> Spuštění u <a href="mailto: mi.</a>
19
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>
20
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= … výška, šířka border=”5” … šířka rámu Obrázek na pozadí (tapeta) <body background="figures/backgr.gif">
21
Užitečné odkazy Jak zjistit e-mailovou adresu mobilu:
Tvorba webových stránek
Podobné prezentace
