Tvorba webových stránek

VY_32_INOVACE_4.3.IV1.02/Ku

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


Webová stránka

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

DALŠÍ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


Webová stránka

Soubory s příponou .html Stránka se dá otevřít dvěma

způsoby:www stránka (v prohlížeči), pak se

nedá upravovat.text (třeba v Poznámkovém bloku) -

zdrojový kód, ten se dá upravovat


CZ.1.07/1.5.00/34.0501


Jazyky pro tvorbu www stránek

Značkovací jazyky HTML - HyperText Markup Language XHTML - Extensible HyperText Markup

Language

Programovací jazyky PHP - Hypertext Preprocessor JavaScript Java

DALŠÍ



HTML

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í DALŠÍ



HTML editory

WYSIWYG editory – text s obrázky rovnou uložíme, editor všechny html značky (tagy) doplní sám. Např. FrontPage nebo OpenOffice Writer s funkcí uložit jako HTML.

non WYSIWYG editory - psaní značek, textu a kódu. Např. v editoru PSPad

Notepad (Poznámkový blok)DALŠÍ



Zdrojový kód 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).


CZ.1.07/1.5.00/34.0501


Zdrojový kód

TAG (element, značka)př. <Body>

ATRIBUT (parametr, vlastnost) a HODNOTApř. <body bgcolor=„green“> atribut bgcolor (barva pozadí) má hodnotu green (pozadí bude zelené)


CZ.1.07/1.5.00/34.0501


Tento příklad zapište do poznámkového bloku a uložte pod názvem „index.html“ do složky „html_1“

Struktura HTML

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>

Úkol č. 1



Struktura HTML<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. DALŠÍ



Struktura HTML<html><head>

<title> </title></head>

<body>

</body></html>


CZ.1.07/1.5.00/34.0501


Head - hlavička

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.


CZ.1.07/1.5.00/34.0501


Body - tělo 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">DALŠÍ



Vyhledej označení dalších barev pro web na internetu

BarvyHodnota atributu pro barvu anglickým názvem barvy (v úvozovkách) hexadecimálním zápisem ve tvaru:

#ččzzmm (bez úvozovek)

Klikni!

Úkol č. 2


CZ.1.07/1.5.00/34.0501

http://www.mt.cz/www/barvy.htm


HTML - příkladZdrojový kód html_1/index.html

1. <body bgcolor=„green“ text=„white“>

2. <body background="obrazek.jpg„ text=„white">

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ŠÍ

Úkol č. 3


http://bestpage.cz/pozadi/pozadi.html


Zdroje

CASTRO, Elisabeth. HTML, XHTML a CSS. Brno: Computer Press, 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

KONEC


http://www.kosek.cz/clanky/html/index.html





http://www.jakpsatweb.cz/



http://bestpage.cz/pozadi/pozadi.html


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





http://www.kosek.cz/clanky/html/09.html



Documents

Tvorba webových stránek