Stáhnout prezentaci
Prezentace se nahrává, počkejte prosím
1
NÁZEV ŠKOLY: Masarykova základní škola a mateřská škola Melč, okres Opava, příspěvková organizace ČÍSLO PROJEKTU: CZ.1.07/1.4.00/ AUTOR: Mgr. Vladimír Rychlý NÁZEV: VY_32_Inovace_Informatika_1 ČÍSLO DUM: 16 TÉMA: Prezentace „Úvod do jazyka HTML“. ROČNÍK: 9. OBDOBÍ REALIZACE: 11/2012
2
Anotace Prezentace popisuje postupně krok za krokem vytváření webové stránky pomocí jazyka HTML v programu Poznámkový blok. Obsahuje úkoly pro žáky. Vhodná i pro samostudium.
3
Úvod do jazyka HTML
4
Jazyk HTML Zkratka z HyperText Markup Language = hypertextový značkovací jazyk. Jazyk pro vytváření webových stránek. Pro vytvoření stránky můžeme použít speciální program, ale stačí nám i textový editor – např. Poznámkový blok. V něm vytvořený soubor = webovou stránku ukládáme s koncovkou .html .
5
Značky = tagy Základem stránky je značka (tag), která se píše do závorek < >. Příklad <p>, </br> Ostré závorky napíšete pomocí pravého tlačítka Alt + < nebo > Každá značka nějakým způsobem formátuje text, který je za značkou, nebo mezi dvěma značkami.
6
Dělení značek Párové = formátuje se text mezi značkami
Jedna značka je před formátovaným textem např. <p> a druhá text uzavírá – obsahuje lomítko </p> Např. <p> text </p> Nepárové = formátuje se text za značkou Např. text </br> text
7
Vytvoření stránky Vytvoříme stránku – otevřete si v Programy - Příslušenství - Poznámkový blok a napište do něj: <html> (Tady zmáčkněte několikrát klávesu Enter, abychom si udělali místo pro další text) </html> Tohle je základ webové stránky, vše co má být na stránce, musí být mezi těmito dvěmi značkami - tagy.
8
Ukládání Nyní si stránku uložíme. Klikněte na Soubor – Uložit jako.
V názvech složek a souborů nepoužívejte diakritiku Vytvořte si někde novou složku Napište název souboru s koncovkou .html např.: první_stranka.html Přepněte na Všechny soubory Pak klikněte na uložit
9
Zobrazení v prohlížeči
Najděte uložený soubor a spusťte ho. Pokud jste ho správně uložili, otevře se vám stránka v internetovém prohlížeči. Zatím je stránka prázdná – nic jsme do ní nenapsali.
10
Hlavička - Head <html> <head> </head> </html>
Vytvoříme hlavičku stránky tvořenou značkami: <head> </head>. Do ní se zapisují různé údaje o stránce, které se ale nezobrazují v textu stránky. Pište pouze modrý text do už vámi vytvořené stránky v poznámkovém bloku = mezi tagy <HTML> a </HTML> <html> <head> </head> </html>
11
Nadpis - Title Připište do hlavičky nadpis stránky, který se vkládá mezi značky <title> </title> a uložte. <html> <head> <title> Moje první stránka </title> </head> </html>
12
Aktualizujte stránku v prohlížeči.
Najděte, kde je umístěn nadpis „Moje první stránka“. Tlačítko pro aktualizaci prohlížené stránky v Internet Explorer
13
Tělo - Body Připište tělo stránky – vytváří se mezi značkami <body> a </body>. Tělo je to, co na stránce nakonec uvidíme. <html> <head> <title> Moje první stránka </title> </head> <body> Tady tvořím stránku </body> </html>
14
Uložte. Přepněte na prohlížeč. Zmáčkněte tlačítko aktualizovat. Podívejte se na výsledek.
15
Odstavce Každý nový odstavec je text mezi značkami <p> a </p> Napište do těla (body) text např.: <p> moje jméno je (doplň)</p> <p> bydlím v (doplň)</p> Uložte a porovnejte v prohlížeči.
16
</br> Vložte někde do textu nepárový znak </br>
Text <br> text Uložte. Zjistěte v prohlížeči, co dělá.
17
Skládání značek Značky můžeme skládat a tím textu přiřadit více vlastností. Např: <p> <b> text </b> </p> Musí být umístěny souměrně od středu = ta, kterou začínáme musí být pak poslední, druhá musí být druhá od konce atd.
18
Úkol Zjistěte sami, co s textem udělají párové značky:
<b> text </b> <i> text </i>
19
<b> text </b> tučné písmo
<i> text </i> kurzíva
20
Zarovnání textu Vytvořte nový odstavec
<p> zkouška zarovnání textu </p> Vyzkoušejte do prvního tagu <p> vložit navíc parametr align=center <p align=center> zkouška zarovnání textu </p> Uložte a zjistěte v prohlížeči, co se stalo. Vyzkoušejte místo center dosadit left, a pak right.
21
Velikost textu Vytvořte nový odstavec
Použijte tag <font size = x> nějaký text </font>, přičemž místo x postupně doplňte čísla od 1 až 7 <p> <font size = x> měním velikost písma </font> </p> Např. <p> <font size = 5> měním velikost písma </font> </p>
22
Barva písma - parametr color=
Mění barvu písma Do tagu <font> můžete přidat další parametr color = tady napíšeme anglicky název nějaké barvy Např: <p> <font size = 5 color=blue> měníme velikost písma a barvu </font> </p>
23
Jiná možnost změny velikosti písma
<big>text</big> Zvětší text tolikrát, kolikrát použijeme tag <big> Např: <big> <big> <big>text </big> </big> </big> Pro zmenšení stejným způsobem použijeme tag <small>
24
Barva pozadí - parametr bgcolor=
Mění barvu pozadí. Bgcolor = anglický název barvy, která má být na pozadí stránky. Vkládá se přímo do tagu <body>, tj. hned na začátku. Např.: <body bgcolor=green>
25
Úkol Vytvořte novou stránku vaší rodiny.
Název (title) stránky bude Moje rodina. První odstavec bude tučným písmem napsaný text, zarovnaný na střed, velikost 7: Naší rodinu tvoří: Následovat budou čtyři odstavce se jmény členů rodiny zarovnány doleva, velikost 3, každý odstavec bude mít jinou barvu písma, rodiče budou napsáni kurzívou. Nastavte i barvu pozadí.
Podobné prezentace
