==== Vytvoř web - zadání ==== - Zvol si nějaké téma které tě zajímá - může to být tvůj koníček, sport, počítačová hra, oblíbený autor knih... - Vytvoř alespoň tři propojené [[html:lekce|html stránky]] - například: "úvod", "galerie", "historie". Jednotlivé html stránky by měly obsahovat menu, odkazující na ty ostatní. Zkus použít alespoň jeden odstavec, obrázek, tabulku, odrážkový seznam. - sjednoť vzhled stránek pomocí sdíleného [[https://www.jakpsatweb.cz/css/css-prakticky.html#externi|css souboru]] - [[https://validator.w3.org/#validate_by_upload|validuj správnost]] html souborů, případné chyby odstraň - bonus: zkontroluj, že stránka neobsahuje tvoje osobní informace a zkus ji publikovat skrze nějaký webhosting, například [[https://www.webzdarma.cz/objednavka/?do=order-setDomain-3ld|webzdarma]] === Zdroje === * [[https://jakpsatweb.cz|Jakpsátweb.cz]] * [[html:lekce|HTML lekce]] * [[krouzek:html_sablona|HTML šablonu]] * W3schools: [[https://www.w3schools.com/html/|HTML]], [[https://www.w3schools.com/css/|CSS]] (anglicky) * Akademie programování: [[https://www.youtube.com/watch?v=8eFpjC8baVs|HTML]], [[https://www.youtube.com/watch?v=oGws7QCw-uw|CSS]] (video) ==== Podrobnosti ==== ==== Soubory ==== [{{:krouzek:filesystem.png?200 |Adresářový strom}}] Bylo by dobré pochopit, co je v počítači **soubor** a jak funguje adresářový strom - každý adresář, krom toho kořenového (ve Windows "C:") se nachází uvnitř nějakého jiného adresáře. [{{ :krouzek:binary.png?200|Binární soubor zobrazený textově}}] Soubory jsou mnoha typů, ve Windows se od sebe odlišují příponami (ve jméně souboru část za poslední tečkou). Příklady typů souborů: PDF (dokument.pdf), JPG (obrazek.jpg), DOCX (dokument.docx), TXT (dokument.txt). Některé typy souborů jsou **binární**. Co nejefektivněji tak ukládají data pro která je typ určen - například obrázkové formáty obsahují metody komprese obrázků. Pokud zobrazíte takový soubor v textovém režimu, objeví se většinou změť znaků zdánlivě bez systému. Existují ale i soubory **textové**, jejichž formát je navržen, aby byl při textovém zobrazení čitelný i pro člověka. Nejjednodušší takový typ souboru je plaintext - TXT který nemá žádnou předepsanou strukturu. Nás zajímají hlavně soubory HTML, CSS a JS, jejichž strukturu se naučíme, a kterým rozumí program, zvaný **webový prohlížeč** (např. Chrome, Firefox, Safari, Edge) A jak takový soubor zobrazit či editovat textově? Na Windows je ve standardní výbavě //Poznámkový blok//(notepad), na Macu //TextEdit//. Existují ale stovky jiných programů - PsPad, Notepad++, Visual Studio Code... === Vytvoření souboru ve Windows === * zapnout "poznámkový blok" (zkratka: //win+r//, napsat //notepad//, potvrdit) * zaplnit nově vytvořený (Bez názvu) soubor nějakým obsahem - například [[krouzek:html_sablona|HTML šablona]] * Soubor -> Uložit jako * v ukládacím dialogu zvolit - kde v systému souborů (ve kterém adresáři) bude soubor uložen - **Název souboru**: Jak se soubor bude jmenovat (nezapomenout na správnou příponu, například .htm) - **Uložit jako typ**: "Všechny soubory (*.*)" (zkontrolovat jestli změna nezměnila příponu u názvu) - **Kódování**: UTF-8 - a potvrdit tlačítkem **Uložit** -> vytvoří soubor === Příklad adresáře s webem === [{{ :krouzek:adresar_s_webem.png?400|Adresář jednoduchého webu}}] Jak může vypadat váš adresář s webem: tři .htm soubory, .css soubor a .js soubor - pro oddělení HTML, CSS a Javascriptového kódu. (pokud se nezobrazují koncovky: Možnosti složky -> Zobrazení -> "Skrýt koncovky souborů známých typů" udělejte nezaškrtnuté) ==== Propojení souborů ve stránce ==== Připojení [[https://www.jakpsatweb.cz/css/css-prakticky.html#externi|css souboru]] (uvnitř ''''):

Připojení javascriptu (kdekoliv):