Tvorba webových stránek



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

Tvorba webových stránek

<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

Úvod do jazyka HTML (Hypertext Markup Language)

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

HTML Hypertext Markup Language

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

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

Tvorba webových stránek

HTML - Úvod. Zpracoval: Petr Lasák

22. Tvorba webových stránek

Přehled základních html tagů

Základy HTML. Autor: Palito

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

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

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

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

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

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

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

Název DUM: VY_32_INOVACE_2B_14_ Programovací_jazyk_HTML

Tvorba internetových stránek

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

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

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

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

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

NSWI096 - INTERNET. Úvod do HTML

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

IE1 jazyk HTML a kaskádové styly

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

IE1 jazyk HTML a kaskádové styly

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

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

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.

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

Internet WEB stránky HTML, Hypertext MarkUp Language - nadtextový jazyk - Místo příkazů obsahuje tagy - značky

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

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

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

Vývoj Internetových Aplikací

CO je to? WWW, HTML, CSS

Tomáš Herout

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

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

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

Tvorba fotogalerie v HTML str.1

Nová struktura souborů a složek

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

tvoříme web HTML/CSS

Mgr. Vlastislav Kučera přednáška č. 2

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!

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

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

Tvorba stránek v HTML ve Wordu

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

Blokový model v CSS:

Škola: Gymnázium, Brno, Slovanské náměstí 7 III/2 Inovace a zkvalitnění výuky prostřednictvím ICT Název projektu: Inovace výuky na GSN

Mgr. Vlastislav Kučera lekce č. 2

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

Internet 1 vývoj, html, css

CSS styly. Cascading Style Sheets kaskádové styly

WWW a HTML. Základní pojmy. Ivo Peterka

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

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

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

absolutní (úplná) začíná lomítkem nebo pouze v odkazech na jiný web. relativní popisuje cestu od html stránky k cílovému souboru.

Mgr. Stěpan Stěpanov, 2013

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

(X)HTML, CSS a jquery

1 Tvorba WWW stránek pomocí programu Microsoft FrontPage

TVORBA WEBOVÝCH STRÁNEK

Internet cvičení. ZS 2009/10, Cvičení 3., Tomáš Pop. DISTRIBUTED SYSTEMS RESEARCH GROUP

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

Střední průmyslová škola a Vyšší odborná škola technická Brno, Sokolská 1

Jdeme tvořit webové stránky!

CSS 1. Blokový model Každý element tvoří obdélník. Dva druhy obdélníků: - Blokové; - Vložené. Zde je dlouhý text v kterém nachazí vložené...

25. TVORBA HTML DIALOGŮ PRO PEVNÉ TVARY

PODPORA ELEKTRONICKÝCH FOREM VÝUKY

Kaskádové styly základy grafiky

TNPW1 Cvičení

Internetové publikování. Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111)

Kaskádové styly (CSS) Cascading Style Sheets

9. Editory www stránek II tvorba pomocí tagů a další technologie.

Úvod do aplikací internetu a přehled možností při tvorbě webu

Uspořádání klient-server. Standardy pro Web

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

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

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

O CSS podrobněji. Box model Document flow Layout

Manuál. pro tvorbu webu. HTML CSS JavaScript

Káskádové styly = CSS

MODERNÍ WEB SNADNO A RYCHLE

PODPORA ELEKTRONICKÝCH FOREM VÝUKY

Dokument XHTML. Prohlížeč. styl CSS. Výstupní dokument. Soubor DTD

Fiktivní firma. Žáci získají základní informace o přípravě a tvorbě webových stránek. Na konci prezentace je úkol, se kterým žáci samostatně pracují.

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

Tvorba webu. Kaskádové styly (CSS) Martin Urza

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. 2. Úvod do jazyka HTML. Datum vytvoření: str ánk y. Vytvořil: Petr Lerch.

Transkript:

Tvorba webových stránek

HTML Hypertext Markup Language jazyk pro tvorbu webových stránek Rozšíření: JavaScript, CSS Dynamické stránky: PHP, ASP(X), JSP Prohlížeče: IE, Firefox, Opera, Google Chrome mohou být odlišnosti ve zobrazování HTML Nástroje: Notepad, PSPad Umístění stránek na webový server: FTP, webové rozhraní

Možnosti vytvoření webu Zapsáním HTML kódu Vygenerováním HTML kódu z jiného programu Word, PowerPoint nedoporučuje se nepřehledné, nepěkné Vygenerováním kódu z HTML editoru např. FrontPage Redakční systém - CMS

Tagy Značky, které říkají, jak má část webové stránky vypadat Příklad: Některá slova budou <B>tučně</B> Soubor s HTML dokumentem přípona.html,.htm Úvodní stránka: index.htm, index.html

Kostra HTML dokumentu <HTML> <HEAD> <TITLE>Webová stránka oktávy</title> </HEAD> <BODY> Zde bude obsah webové stránky </BODY> </HTML>

Atributy TAGů Příklad <BODY> <BODY BGCOLOR= yellow > (#0000FF) <BODY TEXT= red > <BODY LINK= green > <BODY ALINK= grey >

Formátování odstavce, textu <BR> - zalomení řádku, nepárový <P> - zalomení odstavce, vynechá jeden řádek Formátování textu: <B>, <I>, <U>, <SUB>, <SUP> Úkol: Modrým písmem vzorec Pythagorovy věty

Formátování odstavce, textu Nadpisy <H1> až <H6> <H1>Nadpis první úrovně</h1> <H2>Nadpis druhé úrovně</h2> Úkol: vytvořit nadpisy všech šesti úrovní

Seznamy S odrážkami: <UL TYPE= hodnota > (disc, circle, square) <LI> První položka </LI> <LI> </UL> Možnost víceúrovňových seznamů při použití vnořených <UL> Úkol: seznam s čtverc. odrážkami, 2 úrovně

Seznamy Číslované: <OL TYPE= hodnota START= poč. hodnota > <LI> První položka </LI> <LI> </OL> TYPE: (a, A, 1, I) Možnost víceúrovňových seznamů při použití vnořených <OL> resp. <UL> Úkol: číslovaný seznam 2 úrovně

Tabulky <TABLE> <TR> <TR> <TR> </TABLE> <TH> <TH> <TD> <TD> Atributy TABLE: BORDER (tloušťka rámečku), WIDTH (v procentech šířky, přesně), BGCOLOR,

Tabulky Atributy tagů <TR><TH><TD>: ALIGN (left, right, center, justify) VALIGN (top, middle, bottom) ROWSPAN (sloučení buněk ve sloupci) COLSPAN (sloučení buněk na řádku) Do tabulky lze vložit: obrázky, hypertextové odkazy, tabulky, formátovat písmo, seznamy,.

Hyperlink - odkaz Na jinou stránku Na jiné místo na současné stránce Na obrázek Na soubor Absolutní: <a href= http://www.blisty.cz >Britské listy</a> Relativní: <a href= druha.html >Druhá stránka</a>

Vložení obrázku Obrázky je třeba volit uváženě a upravit pro použití na webu (.gif,.jpg,.png), zvláště s ohledem na velikost <IMG ALT= obrázek stromu SRC= strom.jpg > Atributy: WIDTH= 50%, HEIGHT= 50% (snažit se neužívat) zarovnání: ALIGN bottom, top, middle, left (obrázek vlevo, obtékán texttem), right (obrázek vpravo, obtékán textem) šířka rámečku okolo obrázku: HSPACE=hodnota, VSPACE=hodnota (v pixelech)

Obrázek jako odkaz <A HREF= http://www.stromy.cz > <IMG ALT= obrázek stromu SRC= strom.jpg ></A>

Metatagy hlavička webu <head> <title> Webová stránka gymnázia</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="description" content= Webová stránka gymnázia Skuteč" /> <meta name="keywords" content= gymnázium, Skuteč, škola" /> <meta name="author" content= Radek Machan" /> </head>

WWW stránky na web server 1. Zvolit web hosting (Free hosting) 2. Zaregistrovat doménu 2. řádu (placená) 3. řádu (lze zdarma) 3. Nahrát soubory na web server Př.: www.webzdarma.cz

Kaskádové styly (CSS) Přesné nastavení písma (i pozici) Odstavec (nastavení mezer, poloprůhlednost, ) Překrývání objektů Graficky dynamické hypertextové odkazy Nastavení barev jakéhokoliv objektu Dynamické prvky (např. rozevírací seznamy) Změnou stylu lze změnit vzhled všech stránek najednou. Pozor: různá podpora u různých prohlížečů

Vložení CSS do stránky Přímo do konkrétního tagu (<H1 STYLE= color: red > </H1>) Do hlavičky stránky <STYLE> h1 {color: red; font-size:14px} </STYLE atributy tagu odděleny středníkem Externí soubor s CSS u rozsáhlejších webů, přípona.css, změní všechny stránky

CSS písmo, odstavec Písmo font-style (normal, italic) font-size (20px, small, medium, 130%) Odstavec line-height (řádkování, px, %) Př. OL {line-height: 70%} text-indent (odsazení 1. řádku, např.: 5, 10% - šířky stránky text-align (zarovnání, left, right, center, justify)

Tagy DIV a SPAN Slouží k přesnému určení, kde se má styl použít (například konkrétní slovo) DIV za sebe vloží ENTER (podobné odstavci) SPAN určen pro práci s textem kdekokoliv v rámci odstavce Příklady: Toto je<span style= font-style: italic > modifikovaný </span>text.

CSS barva, pozice color background-color Toto je <span style="background-color:red">podbarveno červeně (SPAN)</span> position (absolute, relative) + left, right, top, bottom (v px, %) Př.: <img src= strom.jpg style= position:absolute; left: 50px > border-style, border-width Př.: <p style= border-style: dotted; borderwidth:10;border-color:red >

Formuláře - dialog <FORM NAME= jmeno > Zadejte Vaše jméno: <INPUT TYPE= text NAME= dialog SIZE= 40 MAXLENGHT= 40 > </FORM>

Form odesílání e-mailu <FORM NAME="Dotaznik" ACTION="mailto:ivt-skutec@seznam.cz?subject=formulář" METHOD="POST" ENCTYPE="text/plain"> <TABLE> <TR> <TD>Jméno a příjmení:</td> <TD><INPUT TYPE="text" NAME="jmeno" SIZE="20" MAXLENGTH="20"></TD> </TR> <TR> <TD>E-mail:</TD> <TD><INPUT TYPE="text" NAME="e-mail" SIZE="20" MAXLENGTH="20"></TD> </TR> <TR> <TD>Adresa:</TD> <TD><INPUT TYPE="text" NAME="Adresa" SIZE="20" MAXLENGTH="20"></TD> </TR> <TR><TD><BR></TD><TD><BR></TD></TR> <TR> <TD>Váš vzkaz:</td> <TD><TEXTAREA NAME="Vzkaz" COLS="20" ROWS="5"></TEXTAREA></TD> </TR> </TABLE> <INPUT TYPE="submit" VALUE="Odeslat"> <INPUT TYPE="reset" VALUE="Vymazat"> </FORM>

Odkazy http://www.jakpsatweb.cz