HTML (I) (2). Projekt: CZ.1.07/1.5.00/ OAJL - inovace výuky Příjemce: Obchodní akademie, odborná škola a praktická škola pro tělesně postižené,

Prezentace na téma: "HTML (I) (2). Projekt: CZ.1.07/1.5.00/ OAJL - inovace výuky Příjemce: Obchodní akademie, odborná škola a praktická škola pro tělesně postižené,"— Transkript prezentace:

1 HTML (I) (2)

2 Projekt: CZ.1.07/1.5.00/34.0745 OAJL - inovace výuky Příjemce: Obchodní akademie, odborná škola a praktická škola pro tělesně postižené, Janské Lázně, Obchodní 282 Tento projekt je financován Evropskou unií – Evropským sociálním fondem a státním rozpočtem ČR. Autor:Mgr. Josef Kulhavý Předmět:Informační technologie

3 Obsah Co je HTML1 První pokus2 Tagy3 Struktura dokumentu4 Tagy v hlavičce dokumentu5 Zalomení textu6 Odstavec a nadpisy7 Formátování textu8 Další základní tagy9 Křížení tagů10

4 HTML – HyperText Markup Language Značkovací jazyk pro tvorbu www stránek Obsah: – Text – viditelný na webové stránce – Tagy [tegy] – značky, které vymezují vzhled a smysl webové stránky Co je HTML 1

5 Do dokumentu index.htm pomocí poznámkového bloku zadáme tento text: Ahoj světe Dokument uložíme Pak ho otevřeme v internetovém prohlížeči – Poznámka: toto ještě není webová stránka Index.htm = dokument, který hledá internetový server – pokud v internetové adrese není uveden žádný dokument (pouze doména a složka) – Příklad: Adresa v internetovém prohlížeči: www.oajl.cz/pokusy/informatika Server dodá adresu: C:\WWW\pokusy\informatika\index.htm První pokus 2

6 Tagy Zapisujeme do špičatých závorek Např.: = odstavec <Pravý Alt +, >Levý Alt +. Nepárové tagy – Nemají ukončovací značku – Tyto tagy neobalují text, ale mají svůj vlastní význam. – – – vodorovná čára na stránce Párové tagy – Mají začátek a konec Toto je můj první řádek Toto je můj první řádek – – – začátek – tag uzavřený do hranatých závorek – – – konec – tag uzavřený do hranatých závorek, před tagem je lomítko – Text (obsah) stránky se těmito značkami obaluje. 3

7 HTML dokument se skládá ze dvou částí: – Hlavička – Tělo Správný HTML dokument má svoji strukturu: - začátek HTML dokumentu - začátek hlavičky dokumentu - konec hlavičky dokumentu - začátek těla (to, co umístíme mezi tyto značky, uvidíme v prohlížeči) - konec těla - konec HTML dokumentu Struktura dokumentu 4

8 Meta tagy – informace o stránce, autorovi, informace pro vyhledávače atd. – Např.: Název stránky – Párový tag – Název stránky se zobrazí v hlavičce prohlížeče – Např.: Moje první stránka Moje první stránka Tagy v hlavičce dokumentu 5

9 Tyto aspekty nebudou mít na formátování textu vliv: – Zalomení řádku – Mezery mezi textem – Tabulátory Zalomení řádku řešíme jinak – Nepárovým tagem – Dvěma odstavci pod sebou Zalomení textu 6

10 Odstavec – Párový tag Nadpis (nejvyšší úrovně) – Párový tag Nadpisy dalších úrovní – Párový tag Odstavec a nadpisy 7

11 Tučné písmo – Párový tag Podtržené písmo – Párový tag Kurzíva – Párový tag Formátování textu 8

12 Zlom řádku – Nepárový tag Vycentrování textu – Párový tag Vodorovná čára – Nepárový tag Další základní tagy 9

13 Text můžeme obalit i do několika tagů najednou. Správný zápis: Tučné písmo Tučné písmo Špatný zápis: Tučné písmo Tučné písmo Tagy se nesmí křížit. Křížení tagů 10

14 http://tammyhartdesigns.com/wp- content/uploads/2010/10/iStock_000003045800XSmall.jpg http://pixabay.com/static/uploads/photo/2012/04/11/16/48/outline- 28866_640.png http://www.jesseluna.com/wp-content/uploads/2010/12/html- structure.jpg Použité zdroje