P3 - odkazy, tabulky

Odkazy

<a href="cesta/soubor" title="bublina" target="kdeseotvírá">zobrazený text/obrázek, který je odkazem</a>

může obalit text:

<a href='jaro.html' title='jaro' > Jaro </a>

může obalit obrázek:

<a href='jaro.html' title='jaro' > <img src='jaro.jpg'> </a>

nepovinný target='_blank' otevře odkaz v novém okně

cesty - (podobně jako u obrázků) cíl:

Soubor je ve stejné složce: <a href="jaro.html" >jaro</a>

Soubor je v podsložce  mesice:  <a href='mesice/brezen.html'>Březen</a>

     slozka/jmeno.*            (více složek -  slozka/dalsi_slozka/jmeno.*)

Soubor je v nadřazené složce: <a href='../rok.html'>Roční období</a>

    ../jmeno.*                       ../../../jmeno.*  

../ znamená návrat o úroveň výš.

Cílem je jiný web (stránka) - uvedeme url adresu:

<a href='http://www.jakpsatweb.cz/html/'>Jak psát web</a>

<a href='http://www.jakpsatweb.cz/html/'><img src='http://www.jakpsatweb.cz/images/jpw_html.gif'  alt='HTML příručka'></a>

Menu v souboru rok.html

Úkol2 vytvoř menu i ve webu cr viz http://ivtcerna.8u.cz/cr/cr.html

Webhosting:

Až si ho zřídíš, můžeš tam nahrávat (uploadovat) svoje hotové weby:

Vždy vytvoříš složku (=adresář Složce na Endoře říkají adresář.) - používej jen malá písmena anglické abecedy, číslice a nepoužívej mezery,

otevřeš ji a do ní nehraješ ze své složky soubory  - všechny  - pokud má web podsložku např s obrázky, musíš ji vytvořit také a i obrázky do ní nahrát.

Příklad: Složka rok bude obsahovat soubory rok.html. jaro.html, leto.html,... a složku obr se soubory jaro.jpg, leto.jpg,...

Rozcestník

Doplň si odkazy v souboru index.html, který máš jako rozcestník na tvém hostingu.

Soubor nemusíš stahovat a editovat v počítači. Lze ho přímo na Endoře otevřít a využít jejich editor. Po dvojkliku na soubor index.html:

Zkopíruješ si celý řádek <li>    </li> (odrážka)

a změníš jméno složky a jméno souboru a popis.

!! pozor !! Na Endoře musíš dodržovat i velká/malá písmena takže složka rok musí být rok (ne Rok, ROK,...) jinak ti nebude můj index.html klikat.!!

Tabulka  lze použít:

• • k uspořádání hodnot do sloupců

  • pro vytvořené náhledy obrázků

  • k rozdělení stránky

  • jako menu

Budeme používat atributy:

u <table>

ohraničení                   - border border="3px"

barva ohraničení        - bordercolor="barva"

zarovnání tabulky      - align="left/center/right"

pozadí buněk tabulky - bgcolor="barva"

u <td>

šířka buňky (velikost) - width="100px"

zarovnání v buňce      - align="left/center/right"

pozadí buňky            - bgcolor="barva"

Př.

<table border='5px' bordercolor= 'red'>

 <tr>

   <td width='200px' border='3px' bordercolor='green' bgcolor='lime'> zvýrazněná buňka </td>

Soubor Fotbal.html  

vytvořte tabulku s výsledky fotbalu podle obrázku:

vložte obrázek fotbal.gif ze složky obr

Soubor  teplota.html

Mám li již hodnoty v excelu:

Vytvoř graf vývoje průměrných teplot v ČR a zobraz ho na stránce:

• 1. V excelu vytvořím graf. 

  2. Přes grafický editor (malování) ho uložím jako soubor do složky webu. (pozor na jméno souboru - diakritika, mezery) 

  3. V teplota.html pod tabulku do odstavce umístím tag pro obrázek <img src='jmenomehografu.typ'>

viz:  http://ivtcerna.8u.cz/p3tabulky/teplota.html