Tvorba www-stránek. Příkazy jazyka HTML. Budeme pracovat následovně: Základní struktura webové stránky. Příkazy sekce HEAD



Podobné dokumenty
<html> - párový tag, uzavírá celý dokument <head> - párový, určuje hlavičku dokumentu <body> - párový, uzavírá tělo dokumentu Př. Základní struktura

Tvorba webových stránek

Zá klady HTML. Tag HTML <HTML> Párová značka, který definuje webovou stránku. Obsah stránky končí značkou

Úvod do jazyka HTML (Hypertext Markup Language)

Tvorba webových stránek

Tabulky. Přehled tagů z oblasti tabulek. Tag Význam Párový Výskyt. tr řádek tabulky nepovinně <table>, <tbody>, <thead>, <tfoot>

HTML Hypertext Markup Language

Tvorba webových stránek pomocí HTML kódu v příkladech. M. Seménka, 2014

Základy HTML. Obecná syntaxe HTML. Struktura HTML

Čtvrtek 11. dubna. Základy HTML. Obecná syntaxe HTML. Struktura HTML

Poznámka v (x)html Všechno, co je v (x)html souboru obaleno značkami <!-- a -->, je považováno za poznámku a nezobrazuje se.

22. Tvorba webových stránek

Úvod do tvorby internetových stránek v jazyce HTML

HTML. HTML- HyperTextMarkUpLanguage (nadtextový značkový jazyk) TAGY

Název DUM: VY_32_INOVACE_2B_14_ Programovací_jazyk_HTML

Tvorba webu. Základní HTML tagy. Martin Urza

Tvorba fotogalerie v HTML str.1

Internet 02 - Tvorba statických www stránek za pomoci HTML tagů

Tvorba WWW stránek. Mgr. Petr Jakubec. Katedra fyzikální chemie Univerzita Palackého v Olomouci Tř. 17. listopadu

Základy informatiky. 03 HTML, tvorba webových stránek. Kačmařík/Szturcová/Děrgel/Rapant

13. Vytváření webových stránek

Základy HTML. Obecná syntaxe HTML. Struktura HTML

Základy informatiky. 03, HTML, tvorba WWW stránek. Daniela Szturcová Část převzata z přednášky P. Děrgela

Základy informatiky. HTML, tvorba WWW stránek. Daniela Szturcová Část převzata z přednášky P. Děrgela

NSWI096 - INTERNET. CSS kaskádové styly. Mgr. Petr Lasák

v laboratořích CERN ve Švýcarsku byl zahájen projekt WWW (T. Barners-Lee přichází s projektem distribuovaného hypertextového systému)

9. Tagy tvorba www stránky pomocí tagů

<link> - definuje vztah k jiným XHTML dokumentům, typicky

Jazyk HTML SOŠ OTROKOVICE, TŘ. T. BATI 1266, OTROKOVICE Pomocný text pro výuku výpočetní techniky. PaedDr. Pavel Kovář

Tvorba internetových stránek

Jdeme tvořit webové stránky!

Přehled základních html tagů

12. Základy HTML a formuláře v HTML

Tvorba stránek v HTML ve Wordu

Jemný úvod do HTML. Co je HTML značka? Web nezná text formátovaný mezerami a konci řádku! Ale já potřebuji psát více mezer a určovat zalomení řádku!

HTML - Úvod. Zpracoval: Petr Lasák

Základy HTML. Autor: Palito

Základy HTML (2. přednáška)

NSWI096 - INTERNET. Úvod do HTML

Struktura stránek. <TITLE></TITLE>... text mezi tagy je zobrazen v názvu okna. <BODY></BODY> atributy:

HTML - stručná reference

Hlavička dokumentu. mezi <head> a </head> obsahuje informace vztažené k dokumentu metadata <title> - název stránky, povinná párová značka

tvoříme web HTML/CSS

Buňka tabulky; tento tag doporučuju psát opět jako párový. Nyní již máme dostatek informací k tomu, abychom dokázali sestrojit jednoduchou tabulku.

Soukromá střední odborná škola Frýdek-Místek, s.r.o. VY_32_INOVACE_135_IVT_HTML_08_tvorba_www

1 Úvod. 2 Tvorba internetových prezentací. 2.1 Nástroje pro tvorbu prezentace. Stránka 1

Stránka se dá otevřít dvěma způsoby

PODPORA ELEKTRONICKÝCH FOREM VÝUKY

IE1 jazyk HTML a kaskádové styly

Dokument ve formátu webové stránky vytvořený pomocí XHTML a CSS

Název školy: SOŠ NET OFFICE Orlová, spol. s r.o. Vypracoval/a: Mgr. Alena Sovová

TNPW1 Cvičení aneta.bartuskova@uhk.cz

Bloky. Tag Význam Párový. p odstavec nepovinně. br řádkový zlom ne. div oddíl ano. center vycentrování ano. h1 nadpis 1.

Co je HTML. 1. Párový tag má začátek a konec: 2. Nepárový tag nemá ukončovací značku:

PŘÍRUČKA. Správa obsahu webové prezentace. Formátování textu

Jaroslav Berédi HTML. základy

Učebnice a metodika výuky HTML na základní škole

CSS Kaskádové styly. formátování webových stránek

Obrázky. Tag Význam Párový Výskyt. img obrázek ne. img video ne. map klikací mapa. area oblast v klikací mapě ne

HTML XHTML JavaScript PHP ASP.Net Zajímavé odkazy

IE1 jazyk HTML a kaskádové styly

Manuál k editoru TinyMCE

Základy programovacího jazyka HTML. Autor: Ing. Jan Nožička SOŠ a SOU Česká Lípa VY_32_INOVACE_1133_Základy programovacího jazyka HTML_PWP

Inovace bakalářského studijního oboru Aplikovaná chemie

Název: VY_32_INOVACE_PG4120 Literatura, online zdroje informací, testy

Mgr. Stěpan Stěpanov, 2013

HTML. ICT_01., 02. konzultace; 2. ročník 1/6

Základy CSS (3. přednáška)

Internetové technologie, cvičení č. 5

(X)HTML-TAGY. VOŠ a SŠT Česká Třebová

align horizontální zarovnání left, center, right, justify (= do bloku) width minimální šířka buňky počet pixelů, procento šíky tabulky

HTML - pokračování. Co už víme?

CSS Stylování stránek. Zpracoval: Petr Lasák

Webový editor MARKET INOVATOR verze

Výukový materiál vytvořen v rámci projektu EU peníze školám. "Inovace výuky" registrační číslo CZ.1.07/1.5.00/

Mgr. Vlastislav Kučera Struktura stránky, hlavička,

CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek.

TNPW1 Cvičení aneta.bartuskova@uhk.cz

CSS 1 Relativní pozicování Relativní pozicované bloky jsou pozicované vůči nornálnímu toku elementů dokumentu. (nejsou vyjmuty z normálního toku jako

Webové stránky. 5. Kaskádové styly formátování textu. Datum vytvoření: str ánk y. Vytvořil: Petr Lerch.

Tvorba www v jazyku HTML

Tvorba článků na knihožroutu: Slovo úvodem... 2 Přihlášení... 3 Tvorba tabulky... 5 Vložení obrázků... 8 Vložení hypertextového odkazu...

INTERNET A SÍTĚ. Role při tvorbě webových aplikací. Rozhodovací vrstvy při tvorbě webových aplikací. povrch kostra struktura obsah strategie

Tomáš Herout

Soukromá střední odborná škola Frýdek-Místek, s.r.o. VY_32_INOVACE_92_IVT_HTML_12_nase_www

Úvod do programování HTML

INTERSTENO 2013Ghent Mistrovstvísvta v profesionálním word processingu

Tvorba webových stránek

Výukový materiál KA č.4 Spolupráce se ZŠ

Základy HTML. Obecná syntaxe HTML. Struktura HTML

MANUÁL K OBSLUZE REDAKČNÍHO SYSTÉMU / wordpress

Blokový model v CSS:

INTERSTENO 2015 Budapest World championship professional Word Processing

CSS Selektory tříd a ID, dědičnost, další vlastnosti. Formátování HTML dokumentu, které je více či méně oddělené od obsahu Způsoby implementace

Práce s webovými stránkami pro zaměstnance, zjištění návštěvnosti webu PRO-BIO Svaz ekologických zemědělců

(X)HTML, CSS a jquery

Struktura stránek. <TITLE></TITLE>... text mezi tagy je zobrazen v názvu okna. <BODY></BODY> atributy:

KAPITOLA 3 - ZPRACOVÁNÍ TEXTU

Internet a tvorba WWW stránek

1. Základní pojmy, používané v tomto manuálu. 2. Stránky

Transkript:

Tvorba www-stránek Webové stránky jsou napsané pomocí jazyka HTML (HyperText Markup Language). Ke tvorbě webových stránek potřebujeme - speciální program umožňuje tvořit stránku bez znalostí HTML-kódu - libovolný textový editor (poznámkový blok) který vyžaduje znalost kódu Příkazy jazyka HTML Příkazům říkáme tagy. Zapisujeme je do špičatých závorek. Dělí se na - nepárové <BR> - párové (kontejnery) <p> </p> Budeme pracovat následovně Otevřeme si poznámkový blok. Budeme do něj zapisovat příkazy jazyka HTML + příslušný text, který chceme mít na stránce. Soubor uložíme jako název.htm na disk H (jako typ souboru rozbalíme všechny soubory vybereme koncovku.htm). Po uložení soubor otevřeme v IE. Základní struktura webové stránky <HTML> <HEAD> záhlaví </HEAD> <BODY> </BODY> </HTML> tělo obsah Příkazy sekce HEAD Nadpis okna <TITLE>... nadpis okna prohlížeče... </TITLE> Kódování <META HTTP EQUIV= Content-Type CONTENT= html/text; charset=windows-1250 > (kódování diakritiky použité v textu naší stránky zde kódování v OS Windows) Klíčová slova < META HTTP= Keywords CONTENT= slovo1, slovo2, >

Příkazy sekce BODY Parametry příkazu BODY (atributy) a) barva pozadí bgcolor = označení barvy - anglicky - číselně v hexadecimální soustavě - #FFFFFF (RGB) b) obrázek na pozadí background = cesta a název souboru s obrázkem c) okraje stránky leftmargin = počet pixelů levý a pravý okraj topmargin = počet pixelů horní a spodní okraj d) barva odkazů link = barva standardně modrá odkaz vlink = barva standardně fialová navštívený odkaz alink = barva standardně červená právě kliknutý Text na www-stránce 1) nadpisy <H x > nadpis </H x > x = {1, 2, 3, 4, 5, 6} align parametr pro zarovnání nadpisu left right center Př. <H 1 align= center > nadpis </H 1 > 2) odstavec <P> text </P> align parametr pro zarovnání odstavce left right center justify - do bloku Př. <P align= center > text odstavce </P> 3) styl písma <B> tučně </B> <I> kurzívou </I> <U> podtržené </U> <SUP> horní index </SUP> <SUB> dolní index </SUB> <BIG> tučně a o jednotku větší než okolní text </BIG> <BR> zalomení řádku nebo volný řádek, nepárový příkaz 4) barva písma <SPAN style= colorred >Tato věta bude červená.</span>

Odkazy <A> </A> a) odkaz na jinou webovou stránku <A href= http//www.volny.cz/holikvs>holíkovi</a> <P>Pokud chcete na Seznam klikněte <A href= http//www.seznam.cz>seznam</a></p> Může se přidat parametr TITLE = popis odkazu nebo parametr TARGET = _blank otevření stránky v novém okně. b) odkaz na e-mail <A href= mailtoholikvs@volny.cz >Holíkovi</A> c) odkaz na jiný dokument (soubor) <A href= cesta k souboru a název>soubor</a> d) odkaz v rámci jedné stránky <A name= #menu ></A> <A href= #první >odkaz1</a> <A name= #první></a> <A href= #menu>návrat do menu</a> Obrázky <IMG SRC= obrazky/pes.jpg > Parametry příkazu IMG Alt = popisek popis, který se zobrazí místo obrázku při vypnuté grafice Width = počet pixelů šířka Height = počet pixelů výška Border = počet pixelů rámeček Align = left text obtéká zprava right text obtéká zleva top middle botton Hspace= počet pixelů velikost volného místa nad a pod obrázkem Vspace = počet pixelů velikost volného místa kolem obrázku vpravo a vlevo Obrázek odkazem <A href= odkaz ><IMG SRC= cesta k obrázku a název ></A>

Nečíslovaný seznam <UL type = disk square circle > </UL> Číslovaný seznam <OL type = 1 A a I i > </OL> Vodorovná linka <HR> nepárová značka Parametry color= align= width= % size= počet pixelů barva zarovnání šířka linky tloušťka linky Speciální značky nesmazatelná mezera < &gtj; & Tabulky <TABLE> <TR> </TR> <TR> </TR> </TABLE> Parametry příkazu TABLE border - tloušťka rámečku align - zarovnání celé tabulky bgcolor - barva pozadí tabulky background - URL obrázek na pozadí tabulky bordercolor - barva rámečku tabulky bordercolordark bordercolorlight cellpadding cellsparing cvls - počet sloupců

FRAME= - vnější orámování tabulky void - bez orámování above - nahoře belows - dole hsides - nahoře a dole vsides - vpravo a vlevo lhs - vlevo rhs - vpravo RULES= - vnitřní orámování none - žádné rows - vodorovné cols - svislé all - vodorovně i svisle Parametry příkazu <TR> align valign top, middle, botton Parametry příkazu <TD> width - šířka buňky height - výška buňky colspan - počet buňek, které chci spojit ve sloupci rowspan - počet buňek, které chci spojit v řádku <CAPTION align= > </CAPTION> název tabulky align valign top, botton Zarovnání obrázků na střed <TABLE align = center > <TR><TD><IMG SRC= ></TD></TR><TABLE> cellpadding= 0 cellsparing= 0