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