1 / 17

Tvorba webových stránek

Tvorba webových stránek. Html dokument a jeho struktura. Webová stránka. DALŠÍ. Stránky se skládají z textu, multimediálních dat (obrázky, videa, zvuky, …) a odkazů, které umožňují přechod na další webové stránky

demi
Download Presentation

Tvorba webových stránek

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Tvorba webových stránek Html dokument a jeho struktura Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501

  2. Webová stránka DALŠÍ Stránky se skládají z textu, multimediálních dat (obrázky, videa, zvuky, …) a odkazů, které umožňují přechod na další webové stránky Informace jsou prezentovány v podobě hypertextu, který je vytvořen použitím značek (tagů) HTML nebo XHTML Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501

  3. Webová stránka DALŠÍ • Soubory s příponou .html • Stránka se dá otevřít dvěma způsoby: • wwwstránka (v prohlížeči), pak se nedá upravovat. • text (třeba v Poznámkovém bloku) - zdrojový kód, ten se dá upravovat Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501

  4. Jazyky pro tvorbu www stránek DALŠÍ Značkovací jazyky HTML - HyperTextMarkupLanguage XHTML - ExtensibleHyperTextMarkupLanguage Programovací jazyky PHP - Hypertext Preprocessor JavaScript Java Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501

  5. HTML DALŠÍ Hypertextový značkovací jazyk Dvě základní vlastnosti – hypertext,univerzálnost Je charakterizován množinou značek (tzv. tagů) Za vývoj a specifikace odpovídá konsorcium W3C V současnosti se pracuje na verzi 5, která by měla přinést především větší podporu multimédií Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501

  6. HTML editory DALŠÍ • WYSIWYG editory – text s obrázky rovnou uložíme, editor všechny html značky (tagy) doplní sám. Např. FrontPage nebo OpenOfficeWriter s funkcí uložit jako HTML. • non WYSIWYG editory - psaní značek, textu a kódu. Např. v editoru PSPad • Notepad (Poznámkový blok) Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501

  7. Zdrojový kód DALŠÍ HTML je značkovací jazyk. Jednotlivým značkám se často říká tagy a zapisují se do špičatých závorek <> Jsou párové (např. <p> a </p>) nebo samostatné (např. <img>). Párové končí stejnou značkou bez parametrů, s předřazeným lomítkem „/“ . Kromě samotných příkazů může tag obsahovat parametry, které mu říkají, jak má daná věc přesně vypadat (např. že text má být černý, obrázek má mít rámeček a rozměry 640 x 480 Px). Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501

  8. Zdrojový kód DALŠÍ TAG (element, značka)př. <Body> ATRIBUT (parametr, vlastnost) a HODNOTApř. <body bgcolor=„green“> atribut bgcolor (barva pozadí) má hodnotu green (pozadí bude zelené) Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501

  9. Úkol č. 1 Struktura HTML Tento příklad zapište do poznámkového bloku a uložte pod názvem „index.html“ do složky „html_1“ DALŠÍ <HTML> <HEAD> <TITLE>Moje první stránka</TITLE> </HEAD> <BODY> <H1>Nadpis první úrovně</H1> <P> První odstavec vás vítá do HTML. <P> Druhý odstavec následuje za prvním. </BODY> </HTML> Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501

  10. Struktura HTML DALŠÍ <html> začíná dokument </html> končí dokument <head> a</head> začíná a končí hlavičku, která se nezobrazuje, ale obsahuje některé důležité údaje, např. <title> a </title> název dokumentu <body> Co je mezi <body> a </body>, se bude zobrazovat Výše uvedené tagy by měl obsahovat každý html soubor. Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501

  11. Struktura HTML DALŠÍ <html> <head> <title> </title> </head> <body> </body> </html> Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501

  12. Head - hlavička DALŠÍ Každý HTML dokument je ohraničen tagy <HTML> </HTML> a měl by mít na svém začátku uvedenou hlavičku. Ta je umístěna za <HTML> a je ohraničena tagy <HEAD> a </HEAD>. Informace - co je to za dokument, kdo ho napsal, čím, kdy, užití CSS atp. Obecně tedy obsahuje informace platné globálně pro celou stránku. Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501

  13. Body - tělo DALŠÍ • Představuje obsah samotné stránky • Mezi <body> a </body> se vkládá všechno co se bude na stránkách zobrazovat • Atributy tagu <body> • bgcolor udává barvu pozadí • background nastavení obrázku na pozadí. • text barva textu Př.:<body bgcolor="green" text=„white„> <body background="obrazek.jpg„ text=„white"> Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501

  14. Úkol č. 2 Barvy Vyhledej označení dalších barev pro web na internetu Klikni! DALŠÍ Hodnota atributu pro barvu anglickým názvem barvy (v úvozovkách) hexadecimálním zápisem ve tvaru: #ččzzmm (bez úvozovek) Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501

  15. Úkol č. 3 HTML - příklad Vyzkoušejte různé barvy i pomocí hex-kódu. Do složky „html _1“ si uložte obrázek pro pozadí. Např. ze stránky bestapge.cz. Název obrázku musí být bez diakritiky. DALŠÍ Zdrojový kód  html_1/index.html <body bgcolor=„green“ text=„white“> <body background="obrazek.jpg„ text=„white"> Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501

  16. Zdroje KONEC CASTRO, Elisabeth. HTML, XHTML a CSS. Brno: ComputerPress, 2007. ISBN 978-80-251-1531-2. KOSEK, Jiří. Vytváříme si domovskou stránku [online]. 1999 [cit. 2012-10-17]. Dostupné z: http://www.kosek.cz/clanky/html/index.html JANOVSKÝ, Dušan. Jak psát web [online]. 1999, 14. 10. 2012 [cit. 2012-10-17]. Dostupné z: http://www.jakpsatweb.cz/ Best Page [online]. 2011 [cit. 2012-10-17]. Dostupné z: http://bestpage.cz/pozadi/pozadi.html Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501

  17. Zdroje http://commons.wikimedia.org/wiki/File:Accessories-text-editor.svg KOSEK, Jiří. Barvičky ... [online]. 1999 [cit. 2012-10-17]. Dostupné z: http://www.kosek.cz/clanky/html/09.html Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/34.0501

More Related