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/21.2623 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
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.
Úvod do jazyka HTML
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 .
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.
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
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.
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
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.
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>
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>
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
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>
Uložte. Přepněte na prohlížeč. Zmáčkněte tlačítko aktualizovat. Podívejte se na výsledek.
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.
</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á.
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.
Úkol Zjistěte sami, co s textem udělají párové značky: <b> text </b> <i> text </i>
<b> text </b> tučné písmo <i> text </i> kurzíva
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.
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>
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>
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>
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>
Ú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í.