Rozdíly

Zde můžete vidět rozdíly mezi vybranou verzí a aktuální verzí dané stránky.

--- html:vytvor_web [2021/09/29 13:45] – admin
+++ html:vytvor_web [2023/11/15 20:54] (aktuální) – upraveno mimo DokuWiki 127.0.0.1
@@ Řádek 15: / Řádek 15: @@
-=== Podrobnosti ===
+==== Podrobnosti ====
-{{:krouzek:filesystem.png?200|Adresářový strom|Adresářový strom}}
+==== Soubory ====
-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: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ě}}
+[{{ :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).
@@ Řádek 27: / Řádek 28: @@
 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ř ''<head>''):
+<code html>
+ <link rel="stylesheet" type="text/css" href="styl.css">
+</code>
+Připojení javascriptu (kdekoliv):
+<code html>
+ <script src="script.js">
+</code>
+Vložení obrázku (někde v ''<body>''):
+<code html>
+ <img src="obrazek.png" alt="Popisek pro nevidomé">
+</code>
+Odkaz na jinou stránku (někde v ''<body>''):
+<code html>
+ <a href="stranka2.htm">Druhá stránka</a>
+</code>
+Odkaz na jiný soubor (někde v ''<body>''):
+<code html>
+ <a href="dokument.pdf">Nějaký dokument v pdf</a>
+</code>
+==== Adresářová struktura ====
+U složitějšího webu je nepřehledné mít všechny soubory ve stejné složce, proto lze vytvořit podadresáře. Struktura pak může vypadat třeba takhle:
+  * web/
+    * design/
+      * obrazky/
+        * pozadi.png
+        * about.jpg
+      * styl.css
+    * scripty/
+      * hlavni.js
+    * stranka1.htm
+Odkazy v html pak budou vypadat například:
+<code html>
+ <img src="design/obrazky/about.jpg" alt="O mně">
+</code>
+(takzvaná relativní cesta)