Web Quest :  Vkladanie tabuliek na webovú stránku

 

Predmet : Výpočtová technika - 4. ročník strednej školky
Tématický celok : Tvorba webových stránok
Predpoklad : Založený web-hosting na nejakom free serveri, základné znalosti o štruktúre HTML dokumentu a schopnosť vytvoriť prázdny HTML dokument.

Pre zopakovanie : Informácie o štruktúre HTML dokumentu nájdete : TU


Nám postačí do prázdneho textového súboru vložiť tieto HTML tagy :

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
< html >
< head >
< meta http-equiv="content-type" content="text/html; charset=windows-1250" >
< title > Názov našej stránky < /title >
< /head >
< body >
sem vložíme samostatný kód - html tagy nášho dokumentu (v našom prípade html tagy na vloženie jednotlivých buniek tabuľky) < /body >
< /html >

Úlohy :

  1. Získať podľa nižšie uvedeného postupu informácie o vkladaní a formátovaní jednotlivých buniek tabuľky z internetu a získané informácie si zapísať do zošita

  2. Vytvoriť a vložiť do html dokumentu tabuľky podľa predlohy na obrázku

Postup práce :

  1. Na tejto stránke : https://www.jakpsatweb.cz/tabulky.html sa zoznámte s formou písania tabuľky do html dokumentu. Do zošita si zapíšte tagy pre tabuľku, riadky, a jednotlivé bunky. Stĺpce tvoríme vlastne vkladaním ďalších riadkov.

  2. Pozrite a zapíšte si ako sa v tabuľke vytvorí hlavičkové pole, na čo slúžia atribúty border, cellpadding, cellspacing

  3. Na predošlej stránke si tiež pozrite a do zošita zapíšte, ako sa dajú spájať jednotlivé bunky tabuľky. Uveďte si aj jednotlivé príklady.

  4. Podľa predošlých informácií skúste vytvoriť a vložiť jednoduchú tabuľku do html dokumentu

  5. Pozrite a zapíšte si ako upraviť veľkosť jednotlivých buniek - pozrite si to TU, vyskúšajte si zmenu farbu pozadia bunky a ďalšie atribúty tabuľky a bunky.

  6. Oboznámte sa s parametrami tabuliek. Popis jednotlivých atribútov tabuľky nájdete na tejto stránke. Opíšte si jednotlivé atribúty do zošita (alebo si ich doma vytlačte a nalepte do zošita).

  7. Vyskúšate si zmenu jednotlivých atribútov, a pozorujte zmenu vzhľadu v závislosti od zmenených atribútov priamo v webovom prehliadači.
    Na odskúšanie je výborná táto webstránka: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_table_test
    Skúšajte meniť a dopĺňať rôzne parametre tabuľky tak, aby ste sa s nimi zoznámili!
    Na začiatok vložte do html dokumentu na miesto kódu tam uvedenej tabuľky tieto html tagy a vedľa sledujte zmeny vzhľadu. :

  8. Urobte a prezentujte na webovej stránke tieto tabuľky :

    word

    Môžete si pomocť aj webovou stránkou , ktorú ste už používali.

  9. Na záver vyplňte tento malý kvíz .

Doplnkové úlohy : Do jednotlivých buniek môžeme vkladať obrázky, ďalšie tabuľky, dlhší text a tak ďalej. Preto sa dajú využiť aj na rozmiestnenie objektov na stránke. Skúste teda:

  • Vytvoriť prehľadnú fotogalériu vo forme tabuľky

  • Vytvoriť webovú stránku kde si rozloženie jednotlivých objektov a textu vytvoríte pomocou tabuľky. Okrem textu môžete na stránku vložiť aj ďalšie zaujímavé objekty, napríklad hodiny, kalendár... Pekné objekty nájdete aj TU . Vložíte ich na stránku tak, že skopírujete kód pod nimi a vložíte ho na zvolené miesto v tabuľke vo vašom html dokumente.