Stránka se dá otevřít dvěma způsoby

Rozměr: px

Začít zobrazení ze stránky:

Download "Stránka se dá otevřít dvěma způsoby"

Iveta Pešková
před 8 lety
Počet zobrazení:

Co je potřeba Mozek, to zaprvé. Budete potřebovat počítač, na kterém běží alespoň nějaký jednoduchý textový editor (Poznámkový blok). Potřebujete webový prohlížeč.

2 Co je potřeba Mozek, to zaprvé. Budete potřebovat počítač, na kterém běží alespoň nějaký jednoduchý textový editor (Poznámkový blok). Potřebujete webový prohlížeč. Hodí se připojení na internet. Kdo nemá připojení na internet, musí se alespoň jednou dostat na chvíli k Internetu a mít tam možnost kopírovat z něčeho, na čem si hotové stránky přinese Musíte mít o čem psát.

(Poznámkový blok). Potřebujete webový prohlížeč. Hodí se připojení na internet.

3 Co není potřeba Není třeba mít připojení na Internet. Obejdete se i bez drahých nebo složitých programů. Pro základní pokusy nemusíte nic platit (platí se, až když chcete vlastní doménu)

4 Soubory Internetová stránka je soubor s příponou htm nebo html. Je to skoro obyčejný textový soubor obohacený o značky jazyka HTML(tagy). Soubory můžeme vytvořit: buď v nějakém HTML editoru nebo můžete napsat rovnou zdroj v HTML jazyce

5 Stránka se dá otevřít dvěma způsoby buďto se na ni podívat jako na stránku (v prohlížeči), pak se nedá upravovat. nebo otevřít jako text (třeba v Poznámkovém bloku), tomu se říká zdroj nebo kód nebo zdrojový kód, ten se dá upravovat.

nebo otevřít jako text (třeba v Poznámkovém bloku), tomu

6 HTML editory - programy HTML editory jsou programy speciálně určené pro tvorbu stránek. Pro začátečníky jsou použitelné zejména wysiwyg editory, ve kterých píšete rovnou text a kódem html se nezabýváte. Ve wysiwyg editoru se normálně napíše text, vloží se obrázky a uloží se to na disk do souboru s příponou html. To je vše. Editor všechny html značky (tagy) doplní sám. Kromě wysiwyg editorů tedy existují i editory strukturní, ve kterých píšete přímo kód. Strukturní editor je například PSPad, v nouzi i Poznámkový blok. Prostě normální textové editory.

Ve wysiwyg editoru se normálně napíše text, vloží se obrázky a uloží se to na disk do souboru s příponou html. To je vše.

8 HTML znamená HyperText Markup Language, neboli značkovací jazyk Stránky vytvořené pomocí čistého HTML jsou statické a vše se vykonává na straně klienta Pro zobrazení musím mít internetový prohlížeč Každý příkaz HTML se nachází v hranatých závorkách, za ním jsou potom jeho parametry. Takové útvary se nazývají tagy

klienta Pro zobrazení musím mít internetový prohlížeč Každý příkaz HTML se

9 HTML musíme napsat v!doctypu ještě před tagem body V HTML máme tagy párové a nepárové Párové (například <p>text</p> Nepárové (například <img src= alt= >)

10 Tagy = značky Tagy určují, jak bude text vypadat, tedy jakou bude mít formu. Všechny tagy jsou uzavřeny v <ostrých závorkách>. Co není v ostrých závorkách, je text, který se bude zobrazovat

12 Struktura www stránky <html> Párový tag, kterým začíná celý dokument <head> Párový příkaz, který vymezuje hlavičku dokumentu. Nic z toho, co je zde se nezobrazí ve vlastním textu <title>párový tag- to co bude zde se zobrazí na úplném vršku stránky (v titulkovém pruhu). Je to vlastně stručné shrnutí obsahu stránky, které by nemělo přesáhnout 200 znaků.</title>

Nic z toho, co je zde se nezobrazí ve vlastním textu <title>párový tag- to co bude zde se

13 Struktura www stránky </head> Ukončení hlavičky <body> Zde začíná vlastní dokument Mezy tagy <body> a </body> je veškerý obsah a formátovací tagy </body> Konec těla dokumentu </html> Konec celé stránky

14 Příklad: <!DOCTYPE html> <html> <head> <title>má první stránka</title> </head> <body> Moje první html stránka. A nějaké další texty. </body> </html>

16 Odstavce text nemůže v HTML jen tak plavat, ale je rozdělen do odstavců <p>. Tag <p> je párový a obaluje tedy text, který má uvnitř odstavce být. Před text píšeme <p>, za textem odstavec uzavřeme </p>.

17 Zvýraznění textu Když je nějaká část textu důležitá, sdělíme to prohlížeči pomocí zvýrazňovacích tagů. Jsou to párové tagy <strong> a<em>. Text v <em> e zobrazí jako kurzíva text ve <strong> je vnímán jako silně zvýrazněný

18 Ve starých materiálech můžete narazit na tagy <b> a <i>. Ovšem ty text pouze vykreslily jiným stylem a jeho význam se vůbec nezměnil. Proto se již pro zvýrazdnění nepoužívají K podtržení textu existuje tag <u>. Ten se však příliš nepoužívá, protože lidé jsou zvyklí, že podtržené jsou odkazy.

19 Nadpisy Nadpisy jsou považovány jako nejvýraznější text. Zapisuje se párovým tagem <h1> HTML poskytuje 6 úrovní nadpisů Nadpis <h1> by měla být ta úplně první věc na stránce a měla by obsahovat název stránky. Jako další by měly následovat nadpisy <h2>, které rozdělují stránku na další podsekce.

<h1> by měla být ta úplně první věc na stránce a měla by obsahovat název

20 Obrázky Obrázky vložíme pomocí tagu <img /> Setkáváme se s prvním tagem, který vyžaduje tzv. atributy (atribut je doplňující informace k tagu) Zde bude atributem cesta k souboru obrázku Dobrou praktikou je mít všechny obrázky k webu v nějaké složce, aby se nemíchaly s dalším obsahem

atributy (atribut je doplňující informace k tagu) Zde bude atributem

21 Odkazy Vložíme je tagem <a> Tag <a> je párový a obaluje text, který má být odkazem. Vyžaduje atribut href, kde je cílová stránka, na kterou odkaz vede. Nemusíme se odkazovat jen na stránky, ale také na soubory. Kliknutí na odkaz potom vyvolá jejich stažení.

23 <!DOCTYPE html> <html> <head> <title>moje první webová stránka</title> </head> <body> <h1>můj první web</h1> <p>vítejte na mém prvním webu, psát weby se teprve učím, ale myslím, že mi to docela jde.<br />Zde je moje fotka:</p> <p><img src="images/obrazek.jpg" alt="pan X" /></p> <h2>záliby</h2> <p>poslouchám hlavně <strong>sebe</strong> a rád <strong>plavu do kopce</strong>.</p> <p>ve volných chvílích mám volnou chvíli.</p> <h2>moje Motto</h2> <p>mým mottem je <em>nemít žádné motto</em>.</p> <p>pokud chcete také nějaké motto, najděte si ho na <a href=" </body> </html>

Podobné dokumenty

Webové stránky. 2. Úvod do jazyka HTML. Datum vytvoření: 11. 9. 2012. str ánk y. Vytvořil: Petr Lerch. www.isspolygr.cz

Webové stránky. 2. Úvod do jazyka HTML. Datum vytvoření: 11. 9. 2012. str ánk y. Vytvořil: Petr Lerch. www.isspolygr.cz Webové stránky 2. Úvod do jazyka HTML Vytvořil: Petr Lerch www.isspolygr.cz Datum vytvoření: 11. 9. 2012 Webové Strana: 1/6 Škola Ročník Název projektu Číslo projektu Číslo a název šablony Autor Tématická