Úvod
Tato stránka se může hodit mým spolužákům nebo někomu kdo chce přičichnout trochu html.
Jenže psaní HTML/CSS webovek ovládám jěště méně, než Linux. Na netu je spousta různých návodů, jak si vytvořit webovky,
jestli nepochdíte zde, tak vám doporučuji Jak psat web a pokud umíte anglicky w3schools.com.
Pro ty nedočkavé z vás co touží jen po tom, aby měli svojí vlastí webovou stránku. Zde. Tak a teď ji už máte!
Jak otevřít .zip soubor?
Pro rozbalení můžete použít WinRAR nebo 7-Zip.
Prvně, co to jsou webovky?
Webovky čili webové stránky, jsou nejčastěji HTML soubory přístupné přes síť, čili na WWW. (world wide web).
Mohou mít obsah od prostého textu, přes fotografie, až po multimediální obsah či hry. Já bych se chtěl věnovat začátkům
s prvními dvěmi. Samotná webová stránka je textový soubor, ve kterém jsou jednotlivým částem textu dány určité vlastnosti,
které by "měl" umět zobrazit webový prohlížeč.
Historie
Pokud vím tak první webovou stránku měl CERN ve Švýcarsku. Původní stránky byly jendoduše formátovaný text v jazyku HTML.
Ten se postupně vyvíjel a byl rozšiřován o různé funkce, které fungují v různých prohlížečích. Dalším rozšířením HTML byly
CSS (kaskádové) styly, ty se dnes hojně používají, díky možnostem uložení v externím souboru,
následnoho načtení do několika stránek a dalším funkcím. Pak existují ještě java skripty a PHP.
Webové prohlížeče
Víte k čemu je Explorer? Aby jste si mohli stáhnout lepší prohlížeč.
Příklady prohlížečů:
| Internet Explorer | - průzkumník internetu, základí prohlížeč na widlích, nahrazen Microsoft Edgem |
|---|---|
| Mozila Firefox | - Linuxácká vzhledová verze Exploreru, ale je velmi bezpečná, stabilní a všeobecně použitelnější, odkaz |
| Google Chrome | - velmi dobře použitelný prohlížeč od Gůglu, přes jeden účet propojuje mnoho funkcí, odkaz |
| Opera | - pochází ze stejného projektu Chromium jako Chrom, je velmi funkční, se spoustou vychytávek, já sám ji používám, odkaz |
| Onion | - bezpečný prohlížeč, dobrý když si chcete hrát na Hackra |
| Midori | - ultra light prohlížeč, který běhá pod linuxem, odkaz |
| ... |
Jak používat Operu
Ohromnou výhodou je třeba ovládání gesty:
| vlevo | - zpět |
|---|---|
| vpravo | - vpřed |
| dolů | - nová stránka |
| dolů a doprava | - zavření stránky |
| nahoru | - zastavení načítání stránky |
| nahoru a dolů | - znovunačtení stránky |
V čem psát HTML/CSS ?
Pro tvorbu potřebujete prostředí. Pokud jste líní a HTML se učit nechcete vůbec, ale chcete vlastní webovku,
tak jděte cestou wysiwyg
editorů [What you see is what you get (co vidíš, to dostaneš)]. Tam "pracujete" v uživatelsky "přívětivém"
prostředí, nedřív si vyberete z "kvanta" šablon, které doplníte o vlastní obsah.
Například: webnode
Pokud se chcete opravdu učit a vlastnoručně si tu webovku "napsat", tak se smiřte s tím, že to nebude tak o klikání mýší, ale spíš o datlování do klávesnice. V čem to tedy psát, já osobně většinou používám pouhý poznámkový blok. Ten je čistý a pro začátek člověka ničím nerozptyluje. Moji spolužáci se moří s PSPadedm, ten mi nějak prostě nepřirostl k srdci. Pro pozdější psaní se stává zajímavým Notepad++, který vyznačuje příkazy, ovládá i jiné jazyky a má jěště další možnosti.
Před začátkem
Než začnete, Ano , je dobré vědět jak mají vaše požadované webovky zhruba vypadat a o čem mají být. Na školách se preferuje
začít webovou stránkou o sobě samým (to jsem nesnášel), nebo o nějaké zájmové aktivitě (Linux). Opravdu důlěžité je se
pokusit si rozmyslet vzhled, prosurfujte pár stránek, něco si vyberte a v hlavě si to přetvořte k obrazu svému a
pak si to nakreslete tužkou na papír, čím jednodušší tím lepší.
Už jste si našli dezign?
Úplný základ
Radím vám otevřít si poznámkový blok.
Start => vyhledejte poznámkový blok a spusťte, nebo klikněte pravým v adresáři, kde chcete mít svou stránku,
Nový => Textový dokument.
Tak a teďka kód:
<html> <head> <title>webová stránka</title> </head> <body> Já jsem webová stránka </body> </html> |
Teorie
V kódu vydíte "tagy" to je to ve špičatých závorkách. Jsou tagy párové a nepárové (a něco mezi). Párové je např.:
<body> ... </body>
Nepárové, ty se neukončují: <br>
Mezi, mohou a nemusí, zaleží, jestli je to výhodné: <p>
Asi tento kód budete chtít o něco rozšířit. Pokračujme vesměs popořadě.
<html lang='cs'> <head> <meta charset='utf-8'> <title>webová stránka</title> <link rel="icon" href="img/ikona.ico"> <link rel="stylesheet" href="css/style.css" type="text/css"> <script src="js/lightbox.js" type="text/javascript"></script> </head> |
| html | - udává začátek webové strámky |
| lang='cs' | - nastavuje češtinu jak výchozí jazyk |
| head | - hlavička, má obsahovat některé základní parametry |
| charset='utf-8' | - typ kódování |
| link rel="icon" | - taková ta malá cool ikona stránky |
| title | - nadpis stránky |
| link rel="stylesheet" | - přidružení CSS stylů |
| script | - java script |
| href="" | - odkaz na lokaci |
| src="" | - "zdroj" dat |
<body>
<br>
<h1> Nadpis textu </h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<a href="img/instalace LM/1.jpg" > <a>
<img src="img/instalace LM/1.jpg">
<table>
<tr><th>src="" <td>- "zdroj" dat
</table>
<ol>
<li>Buť dneska nemá náladu.</li>
</ol>
</body>
|
Možné šablony vzhledu, ala překopej si sám