Tvorba webových stránok - HTML
1. Čo sme sa naučili na prvom stretnutí . . . . . . (podrobnosti)
- - Vysvetlili sme si, ako fungujú webové stránky, čo je webový server a webový prehliadač.
- - Bavili sme sa o tom, ako webový prehliadač, webový server a webová stránka spolupracujú.
- - Pozreli sme sa na zdrojový kód webovej stránky a hľadali sme v ňom základné časti z ktorých sa skladá.
- - Vysvetlili sme si, čo je to element webovej stránky a čo sú to tagy.
- - Pomocou poznámkového bloku sme napísali a uložili jednoduchú webovú stránku.
- - Túto stránku sme si zobrazili vo webovom prehliadači a tešili sme sa že to naozaj funguje.
2. Webové stránky pomocou Visual Studio Code . . . . . . (podrobnosti)
Písať webové stránky v poznámkovom bloku vyžaduje veľkú pozornosť a veľa vedomostí. Nie že by sme jedno alebo druhé nemali :) ale budeme radšej využívať nástroj, ktorý nám poradí a niečo za nás urobí a dokonca aj napíše. Takýmto pomocníkom je aplikácia Visual Studio Code.
Cieľom nášho druhého stretnutia je vyrobiť jednoduchú webovú stránku pomocou Visual Studio Code. Aby sa ti to podarilo, musíš:
- - získať a do svojho počítača nainštalovať VisualStudio Code
- - vytvoriť si pracovný priečinok pre svoju stránku a pomocou VS Code si tento priečinok otvoriť
- - vytvoriť vo VS Code supor pokus.html a napísať všetky potrebné príkazy
- - uložiť vytvorený súbor a pozrieť sa ako vyzerá vo webovom prehliadači
- - nainštalovať si do VS Code doplnok
Live Server
- - pomocou doplnku Live Server využívať výhody lokálneho webového servra - localhost
3. Obsah webových stránok . . . . . . (podrobnosti)
Dnes ti predstavím niekoľko elementov (tagov), ktoré budeš potrebovať, aby tvoja webová stránka mala dobrú štruktúru (čiže aby mala prehľadné časti a obsah).
- - naučíš sa používať nadpis, odstavec, a formátovať text v odstavci.
- - vytvoriť číslovaný alebo nečíslovaný zoznam
- - vytvoriť link - teda odkaz, ktorý ti umožní zobraziť napríklad inú webovú stránku
- - vložiť na stránku obrázok, video alebo audio súbor
- - zistíš, ako sa dá vyrobiť a zobraziť tabuľka
- - naučím ťa používať neutrálne tagy div a span
4. Precvičovanie . . . . . . (podrobnosti)
Practice makes perfect. Preto neváhaj a daj sa do práce. Keď prejdeš na podrobnosti, zobrazí sa ti zoznam úloh, ktoré môžeš riešiť. Používaj pritom čo chceš. Odporúčam však (ak to nie je dané inak v zadaní úlohy) vyrábať stránky vo VS Code a využívať Live Server.