CO je to? WWW, HTML, CSS

Rozměr: px
Začít zobrazení ze stránky:

Download "CO je to? WWW, HTML, CSS"

Transkript

1 CO je to? WWW, HTML, CSS

2 Jak vytvořit vlastní webovou stránku Potřebujete: Webový prohlížeč (Internet Explorer, Opera, Mozilla Firefox nebo Google Chrome. Připojení na internet není nutné v první fázi. Mít rozmyšlený vzhled stránek. Mít rozmyšlený obsah stránek. Umět základní operace s kancelářským softwarem (kopírovat soubory, vytvářet adresáře (složka) apod.).

3 Internetové prohlížeče - zobrazení Liší se možnostmi, bezpečností, aktualizacemi, rozšířeními apod. IE: Internet Explorer FF: Mozilla Firefox Chrome: Google Chrome Opera Vyzkoušejte si: PTM Zobrazit zdrojový kód stránky Všimněte si: URL (Uniform Resource Locator) vs. jméno záložky

4 HTML editory - tvorba HTML editory zdarma vs. placené WYSIWYG vs. kód Název Cena WYSIWYG CoffeeCup free ANO KompoZer free ANO FrontPage MS Office 2003 ANO Notepad Win NE PSPad free NE HTMLPad 750,- ANO

5 Rozdíly v editorech Zvýraznění syntaxe Automatické doplňování kódu/závorek Práce s více druhy programovacích jazyků (HTML, PHP, CSS, JavaScript apod.) Podpora nových standardů (HTML 5, CSS3, Web 2.0) Nabídka předpřipravených tagů, templátů apod. Rozšiřující funkce (ColorPicker, FTP, validace, komprese, uživatelské nastavení apod.)

6 Výhody a nevýhody WYSIWYG + Jednoduchá práce (analogická práci v textovém procesoru) + Hned vidím výslednou podobu Sklon k nesystematičnosti (formátování) Nadměrná velikost kódu Náročné (ne-li nemožné) úpravy Balast v kódu, nepřehlednost, především při vkládání (CTRL+C,V) Proto je dobré znát i syntaxi a fungování zdrojového kódu.

7 CoffeeCup Stáhněte si a nainstalujte zdarma program CofeeCup

8 Základy HTML HyperText Markup Language Zdrojový kód a jeho zobrazení v prohlížeči jen náhled Otevření v editoru možnosti změn Stavba webové stránky STRUKTURA: hlava tělo ( patička ) tzv. tagy (párové <a></a>, nepárové <br>) nezáleží na velikosti písmen základní skladba stránky

9 Stavba HTML stránky doctype definuje styl HTML pro int. prohl. (HTML 4, HTML 5, XHTML) head obsahuje základní info o stránce (autor, klíčová slova, formátování apod.) Nezobrazuje se v prohlížeči. title jméno stránky (jméno záložky) odkazy na externí soubory (formátování, skripty apod.) body tělo stránky (veškerý viditelný obsah)

10 <html> <head> <title></title> </head> <body> text text text text text </body> </html>

11 Ve skutečnosti <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="generator" content="coffeecup HTML Editor (www.coffeecup.com)"> <meta name="created" content="pá, :19:44 GMT"> <meta name="description" content=""> <meta name="keywords" content=""> <title>název vaší stránky</title> </head> <body> </body> </html>

12 Ve skutečnosti <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="generator" content="coffeecup HTML Editor (www.coffeecup.com)"> <meta name="created" content="pá, :19:44 GMT"> <meta name="description" content=""> <meta name="keywords" content=""> <title>název vaší stránky</title> </head> <body> </body> </html>

13 Ve skutečnosti <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="generator" content="coffeecup HTML Editor (www.coffeecup.com)"> <meta name="created" content="pá, :19:44 GMT"> <meta name="description" content=""> <meta name="keywords" content=""> <title>název vaší stránky</title> </head> <body> </body> </html>

14 Počítače a internet v chemii Toto je moje první webová stránka se světle oranžovým pozadím. Modře jsou vyznačeny hypertextové odkazy. Methan je bezbarvý plyn. Jedná se o nejjednodušší uhlovodík, který je tvořen molekulami obsahujícími atom uhlíku a čtyři atomy vodíku. Molekula methanu (vycentrovaná stejně jako tento text.) Pokud Vás tato stránka zaujala, kontaktujte mě:

15 CoffeeCup Lišta ikon F12

16 Zápis HTML Tagy tzv. tagy (základní značky) párové <a> </a> (začátek + konec) nepárové <br /> (neukončené) zápis: <tag></tag> atributy (zpřesňují význam tagů) zápis: <tag atribut1="hodnotax" atribut2="hodnotay" ></tag>

17 Zápis HTML Mezery mezery mezi tagy 1. <tag></tag> <tag></tag> (1 mezera) 2. <tag></tag> <tag></tag> (1 mezera!) 3. <tag></tag> <tag></tag> (1 mezera!) 4. = pevná mezera

18 Základní tagy nadpisy Odstavec (p) <p></p> (align:"left", "right", "justify") Seznamy (ul, ol) <ul> </ul>, <ol></ol> <li></li> Nadpisy (h1 h6) <h1></h1>

19 Základní tagy Mezery ( ), komentáře (<!-- -->) Zalomení řádku (br) <br /> hypertextový odkaz (a), <a></a> <a href="www.jakpsatweb.cz"> <a Další atributy: href, target (_blank, self), title, subject

20 Hypertextový odkaz absolutní a relativní cesta atribut href odkaz na jinou stránku našeho webu href="odkazy2.html" stejný adresář href="adresar_pod/html_pod.html" podadresář href="../html_nad.html" - nadadresář

21 Hypertextový odkaz (a), <a z webu">pošlete mi </a> Kotvy odkazy v rámci jedné stránky seznam kapitol<a name= "nadpis1">odkaz na kapitolu 1</a> (tagy s atr. name) 1. <a href="#kapitola1">kapitola 1</a> 2. <a href="moje_prvni_stranka.html# kapitola1">kapitola1</a> nebo "nahoru"

22 Vyzkoušejte si text a odkazy vytvořte novou stránku v programu CoffeeCup 1. nadpis 1 2. nadpis 2 (podnadpis) 3. min. 3 odstavce (zarovnaný vlevo, vpravo, do bloku) rolovátko 4. hypertextové odkazy 2x (nové okno, stejné okno) 5. ový odkaz (na váš bez předmětu a s předmětem z webu ) 6. kotvu ze dvou různých míst ve stránce na jiné + odkaz nahoru vyzkoušejte si jaké atributy nabízejí jednotlivé tagy

23 Základní tagy TABLE Tabulka (table) základní tagy <table border="" width="%,px"> <tr> - řádek <td></td> - buňka </tr> </table> Další tagy (<thead>,<th>, <tbody>) párové Atributy <td> (align, colspan, rowspan)

24 Vyzkoušejte si tabulka vytvořte novou stránku v programu CoffeeCup 1. vytvořte tabulku podle předlohy barvy vynechte A a b c B d e f C g h i j k l vyzkoušejte si jaké atributy nabízejí jednotlivé tagy

25 Základní tagy formát Formátovací tagy (většinou budeme používat CSS) Výjimky: <sub> dolní index </sub>, <sup> horní index </sup>, <b>tučně</b>, <i>kurzíva</i>, <u>podtrženě</u>

26 Symboly a znaky Zkratky pro nejrůznější znaky a symboly, které se obvykle nezobrazují správně po vložení. Řecká abeceda Znak & příkaz &# kód IE 7 FF 2 Opera 9 Poznámka Matematické znaky a symboly & & & ano ano ano ampersan d Speciální znaky ano ano ano znak měny Akcenty ano ano ano euro CoffeCup - Characters $ $ ano ano ano dolar

27 Vyzkoušejte si znaky a formátování vytvořte novou stránku v programu CoffeeCup 1. vytvořte rovnici chemické reakce 1. molekulová 2. iontová 3. použijte dolní i horní indexy 4. k popisu reakce použijte tučné písmo a kurzívu 5. najděte a použijte symbol reakční šipky (případně více typů) 6. použijte další často využívané znaky a symboly: vyzkoušejte si jaké atributy nabízejí jednotlivé tagy

28 Základní tagy - IMG Obrázek (img) - nepárový <img src="" /> další atributy (align, alt, title, width, height, border) Pozor, nepoužívejte absolutní odkazy! Video (video) - párový podpora prohlížečů moduly

29 Vyzkoušejte si obrázky vytvořte novou stránku v programu CoffeeCup 1. vložte 3 obrázky molekul zarovnejte je doprava, doleva a nechte defaultně 2. zkuste vytvořit hypertextový odkaz z obrázku vyzkoušejte si jaké atributy nabízí tagy <img>

30 Video Link (a) <a></a> - odkaz na stránku nebo ke stažení Vložený rámec (iframe, párový) - i pro celé stránky <iframe src="http://www.youtube.com/watch?v=d5a8izm9dgm " title =" " width= "480" frameborder="0" allowfullscreen></iframe> Vložit do stránky (embed, párový) <embed src="http://www.computerhope.com/issues/ibmlinux.mov" Pluginspage="http://www.apple.com/quicktime/" width="320" height="250" CONTROLLER="true" LOOP="false" AUTOPLAY="false" name="ibm Video"></embed>

31 Video Objekt multimediální objekty <object data="intro.swf" height="200" width="200"></object> HTML 5 (video, párový) <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> <source src="movie.webm" type="video/webm"> <object data="movie.mp4" width="320" height="240"> <embed src="movie.swf" width="320" height="240"> </object> </video>

32 Základní tagy Video (video) src - URL souboru videa, např. video.webm nebo width - šířka videa, stejně jako u obrázků height - výška videa, stejně jako u obrázků poster - URL náhledu videa, který se zobrazí, dokud video není spuštěné; v případě, pokud se náhled neuvede, prohlížeč zobrazí první snímek videa, např. nahled.png nebo controls - pokud se uvede, prohlížeč zobrazí kontrolní prvky k ovládání videa autoplay - pokud se uvede, video se začne přehrávat ihned po načtení loop - pokud se uvede, video se bude přehrávat stále dokola

33 Vyzkoušejte si video vytvořte novou stránku v programu CoffeeCup 1. vložte video zkuste vložit odkaz na video z Youtube vložte inline video z Youtube vložte inline video z disku vyzkoušejte si jaké atributy nabízejí jednotlivé tagy

34 Formátování webu - CSS CSS (Cascading Style Sheets) kaskádovité formátování všech tagů PROČ? JAK? KDE? inline (atribut style) v hlavičce tag <style> </style> externí soubor *.css (odkaz z hlavičky) <link href='styl.css' rel='stylesheet' type='text/css' /> POZOR na kolizi formátování z různých pozic dokumentu! pozdější vyhrává

35 Formátování versus sémantika H1 odstavec s bílým písmem na černém pozadí odstavec s černým písmem na bílém pozadí Nadpis 1 Nadpis 2 Nadpis 3 modré pozadí stránky s bílým písmem

36 Základy CSS tagy div a span (párové) syntaxe pomoc při stylování celků neohraničených tagy span ohraničení jednotlivých slov či řádků div ohraničení větších celků závorky {} (vymezují deklaraci formátu onoho selektoru) tagy p (selektor, jméno tagu) dvojtečky : (odděluje vlastnosti a hodnoty) oddělovníky ; (oddělují jednotlivé deklarace)

37 Použití CSS Inline atribut style, tagy (font, center apod.) <body> <p style="color: blue">modrý odstavec </p> <p>normální odstavec </p> </body> Hlavička tag style : <style> p {color: red; font-style: italic} h1 {color: blue; font-weight: bold ; font-size: large} </style>

38 Externí CSS soubor Soubor New CSS Page Save as soubor.css h2 {color: blue; font-style: italic;} a {color: red; text-decoration: none} Soubor New HTML Page Save as stranka.html Head <link href="soubor.css" rel="stylesheet" type="text/css" /> (atributy type a rel povinné)

39 Základy CSS Stylování odkazů <style type="text/css"> a {text-decoration: none} a:link {color: green} /*zelené odkazy*/ a:visited {color: navy} /*navštívené odkazy jsou tmavě modré*/ a:active {color: black} a:hover {color: red; text-decoration: underline} </style> Komentáře v CSS /**/ deklarace selektor vlastnost hodnota

40 Jak na to 1. vytvoříme stránku html a libovolně ji nazveme (stranka1.html) vytvoříme obsah 2. vytvoříme soubor css a libovolně ho nazveme (format.css) externí soubor nezačínáme tagem style, hned deklarace 3. do hlavičky stránky vložím odkaz na css soubor (je fyzicky uložen ve stejné složce) <link href="format.css" rel="stylesheet" type="text/css" > 4. někdy zlobí cache prohlížeče (interní style)

41 Vyzkoušejte si CSS vytvořte novou stránku v programu CoffeeCup odstavec nadpis odkaz 1. Vytvořte externí css soubor + link z hlavičky html souboru na něj 2. Přiřaďte jednotlivým tagům nové vlastnosti s využitím CSS3 deklarací p {color: lightblue} a:hover {color: green; background-color: yellow;} H1 {color: blue; font-family: Arial; font-style: italic; font-weight: bold;} Vyzkoušejte vzhled formátování s a bez externího CSS Zkuste přidat i formátování stejných vlastností v hlavičce (jiné hodnoty)

42 Základy CSS Stylování odstavců: p {text-indent: 30px; margin: 0px;} Hromadná deklarce: H1, H2, H3 {color: green} důležitá je čárka mezi selektory platí pro všechny nadpisy 1, 2 i 3 Kontextová deklarce: H3 A {font-style: italic} bez čárky mezi selektory platí pro všechny odkazy v rámci nadpisů 3

43 Základy CSS Barvy: Klíčové slovo (např. red, green, blue atd.) jen základní barvy Kód RGB, RGBA či HSL, HSLA (např. rgba(0,0,255,0.75)) A- průhlednost Hexadecimálně (např. #0000FF) 0-9, A-F ( ffffff) CSS3 - gradienty (lineární, radiální atd.) např. pozadí stránek

44 Základy CSS Velikosti: (hodnoty) zvětšování v prohlížečích (ne pt a px) jednotka význam příklad velikost písma příkladu px pixel, obrazovkový bod 12px dvanáct pixelů (obrazovkových bodů) pt typografický bod (jako ve Wordu) 9pt devět typografických bodů (na windows 12px) mm milimetr 5mm pět milimetrů in palec.5in půl palce em výška písmena M 1.5em jeden a půl normální velkosti % procento 80% small, large, xx-large atd. klíčová slova x-small menší než malé osmdesát procent normální velikosti (nadřazeného prvku)

45 Vlastní CSS třídy a identifikátory Třídy vyšší priorita než zákl.tagy HTML atribut: class, CSS zápis:.tucne CSS.podtitul { text-align: center; font-weight: bold; text-decoration: overline} /* zarovnání na střed, tučné písmo a nadtržení*/ </style> HTML: <h3 class="podtitul">text podtitulu</p> CSS: pseudotřídy a:visited {color: white}

46 Vlastní CSS třídy a identifikátory Identifikátory nejvyšší priorita CSS: HTML atribut: id, CSS zápis: #menu1 #podtitul { text-align: center; font-weight: bold; textdecoration: overline} HTML: <p id="podtitul">text podtitulu</p>

47 Vyzkoušejte si CSS vytvořte novou stránku v programu CoffeeCup Text (bílý na černém pozadí) Nadpisy 3 úrovně (jiné styly a velikosti) Nečíslovaný seznam tabulku Použijte (v tomto pořadí) 1. Inline stylování 2. Zápis v hlavičce 3. Vytvořte externí css soubor + link z hlavičky na něj

48 Vyzkoušejte si CSS vytvořte novou stránku v programu CoffeeCup text Nadpisy 3 úrovně Nečíslovaný seznam tabulku Použijte (v tomto pořadí) 1. Inline stylování 2. Zápis v hlavičce 3. Vytvořte externí css soubor + link z hlavičky na něj

49 Další možnosti CSS - SNIPPETS Zaoblené hrany: nebo border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; border-radius: 10px 10px 10px 10px; Stíny apod.

50 Ukládání souborů Pojmenování: Nikdy nepoužívat diakritiku! Nikdy nepoužívat mezery! Není doporučené používat velká písmena. přípony: web. stránka: *.html, *.htm CSS: *.css

51 Publikování webu 1. Nainstalovaný souborový manažer (Salamander, Winrar apod.) 2. Vlastnictví domény hosting a. Doména (doména 2. řádu) = adresa (registrace + hosting stovky Kč/rok) (chemie.cz) b. Subdoména (doména 3. řádu) - (obecna.chemie.cz) c. Hosting = služba zajištění provozu (prostor, služby, spolehlivost) d. Datové limity (prostor desítky až stovky MB) 3. Zabezpečený přístup (funkce SFTP/SCP) a. SFTP/SCP (Security File Transfer Protocol/Secure Copy) b. FTP nedoporučuji

52 Nahrávání na server Nakopírování souborů na server SFTP/SCP klient Defaultní nastavení načítání: index.html, index.htm, index.php Pozor na změnu názvu souboru při odkazování na něj!!!

53 HTML 5, CSS3 Nové standardy Nové tagy: <figure> (párový) kontejner, grafický obsah <figure> <img src= "obrazek1.jpg" alt= toto je obrázek 1" width="304" height="228"> <figcaption>obr.1 Toto je popisek k obrázku 1.</figcaption> </figure>

54 HTML 5, CSS3 <header>,<footer> - definují strukturu stránky nebo jiných tagů <article> nové funkce starých tagů (<b>) sémantická fce Usnadnění použití CSS a podpora formátování Podpora multimediality Podpora offline aplikací

55 Vyzkoušejte si rozdíl HTML4/5 Vyzkoušejte si: Vytvořte dvě nové stránky v CC jednu v HTML 5, druhou v HTML 4.01 Transitional zaměřte se na srovnání nabídky doposud používaných tagů a nabídky jejich atributů omezení tzv. formátovacích tagů/atributů (center, align, font) vyzkoušejte připravenost vašeho prohlížeče na HTML5 a CSS3

56 Mikroformáty Web 3.0 zkratka μf Způsob ukládání strojově čitelných info do web. Stránek Např.: <div> <div>jan Novák</div> <div>moje firma s.r.o.</div> <div> </div> <a href="http://moje-firma.cz">http://moje-firma.cz/</a> </div> <div class="vcard"> <div class="fn">jan Novák</div> //elektronická vizitka, formátované jméno <div class="org">moje firma s.r.o.</div> //organizace <div class="tel"> </div> <a class="url" href="http://mojefirma.cz">http://moje-firma.cz/</a> </div> //telefon

57 Zdroje informací

Tvorba webových stránek

Tvorba webových stránek 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

Více

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

Tvorba www-stránek. Příkazy jazyka HTML. Budeme pracovat následovně: Základní struktura webové stránky. Příkazy sekce HEAD 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

Více

Tvorba webových stránek

Tvorba webových stránek Tvorba webových stránek 1 HTML Hyper Text Markup Language = hypertextový značkovací jazyk Slouží pro tvorbu webových stránek, které jsou propojeny hypertextovými odkazy HTML soubor je obyčejný text obalený

Více

Tvorba webových stránek

Tvorba webových stránek Tvorba webových stránek Kaskádové styly Úprava vzhledu webové stránky pomocí atributů má několik nevýhod a úskalí. Atributy nabízejí málo možností úprav. Obtížně se sjednocují změny na různých částech

Více

HTML - Úvod. Zpracoval: Petr Lasák

HTML - Úvod. Zpracoval: Petr Lasák HTML - Úvod Zpracoval: Petr Lasák Je značkovací jazyk, popisující obsah HTML stránek Je z rodiny SGML jazyků, jako např. XML, DOCX, XLSX Nejedná se o programovací ale značkovací jazyk Dynamičnost dodávají

Více

HTML Hypertext Markup Language

HTML Hypertext Markup Language HTML Hypertext Markup Language je jazyk určený na publikování a distribuci dokumentů na Webu velmi jednoduchý jazyk používá ho mnoho uživatelů má výkonné prostředky (příkazy) k formátování dokumentů (různé

Více

Vývoj Internetových Aplikací

Vývoj Internetových Aplikací 2 Vývoj Internetových Aplikací HTML a CSS Ing. Michal Radecký, Ph.D. www.cs.vsb.cz/radecky HTML a CSS - Tvorba webových stránek - Struktura - Obsah - Vzhled - Funkcionalita zdroj: http://www.99points.info

Více

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

Zá klady HTML. Tag HTML <HTML> Párová značka, který definuje webovou stránku. Obsah stránky končí značkou Zá klady HTML Jazyk HTML (Hypertext Markup Language) - jedná se o souhrn pravidel pro formatování textu, obrázků atd. pro použítí na webových stránekách. Webovou stránku tvoří prvky, které jsou definovány

Více

Mgr. Vlastislav Kučera lekce č. 2

Mgr. Vlastislav Kučera lekce č. 2 Mgr. Vlastislav Kučera lekce č. 2 Struktura stránky hlavička meta tagy titulek stránky připojení stylů,... CSS to je to, co se

Více

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

Mgr. Vlastislav Kučera přednáška č. 2 Mgr. Vlastislav Kučera přednáška č. 2 Struktura stránky hlavička meta tagy titulek stránky připojení stylů,... CSS

Více

Přehled základních html tagů

Přehled základních html tagů Přehled základních html tagů h1... hlavní nadpis h2... podnadpisy h3... podnadpisy další úrovně p... odstavec strong... tučné písmo b... tučné písmo em... kurzíva i... kurzíva br... zalomení řádku ol...

Více

(X)HTML, CSS a jquery

(X)HTML, CSS a jquery Prezentační vrstva webové aplikace (X)HTML, CSS a jquery jquery Java Scriptová knihovna Ing. Martin Dostal (X)HTML první stránka Textový soubor s příponou.htm nebo.html: moje

Více

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

CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek. Kaskádové styly CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek. CSS se využívá k formátování obsahu HTML, XHTML a XML dokumentů. Ve srovnání s

Více

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

TNPW1 Cvičení 2 6.10.2015 aneta.bartuskova@uhk.cz 6.10.2015 aneta.bartuskova@uhk.cz TNPW1 Cvičení 1 Technologie pro tvorbu webu HTML, HTML5 značkovací jazyk struktura, obsah, odkazy - hypertext CSS, CSS3 kaskádové styly vzhled (rozvržení, formátování,

Více

Základy HTML. Autor: Palito

Základy HTML. Autor: Palito Základy HTML Autor: Palito Zobrazení zdrojového kódu Zobrazení zdrojového kódu Každá stránka je na disku nebo na serveru uložena ve formě zdrojového kódu. Ten kód je psaný v jazyce HTML. Když si chcete

Více

Tvorba internetových stránek

Tvorba internetových stránek Tvorba internetových stránek Ing. Michal Seibert E111 Konzultační hodiny: Středa 9:00-10:00h http://tvorba-is.wz.cz/ Samostatný úkol Zvolili jste si doménu a zjistili její cenu? Nalezli jste svůj freehosting?

Více

22. Tvorba webových stránek

22. Tvorba webových stránek 22. Tvorba webových stránek Webové stránky jsou spolu s elektronickou poštou nejpoužívanější prostředky internetu. Brouzdáme li internetem používáme nějaký prohlížeč. To, co vidíme na obrazovce v prohlížeči

Více

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

HTML. ICT_01., 02. konzultace; 2. ročník 1/6 ICT_01., 02. konzultace; 2. ročník 1/6 HTML Vystavení vlastních dat na Internetu Každý uživatel Internetu, který chce svoje webové stránky publikovat na Internetu potřebuje: - místo na webovém serveru,

Více

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

WWW a HTML. Základní pojmy. Ivo Peterka WWW a HTML Základní pojmy WWW World Wide Web systém navzájem propojených stránek Stránky se mohou skládat z částí nacházejících se v různých částech světa. HTML HyperText Markup Language Slouží k psaní

Více

CSS styly - úvod. Formátování HTML - Kdy používat CSS - Nástin možností CSS - Trojí použití CSS - Příklady - Syntaxe - Příklad s nadpisem

CSS styly - úvod. Formátování HTML - Kdy používat CSS - Nástin možností CSS - Trojí použití CSS - Příklady - Syntaxe - Příklad s nadpisem CSS styly - úvod Formátování HTML - Kdy používat CSS - Nástin možností CSS - Trojí použití CSS - Příklady - Syntaxe - Příklad s nadpisem Formátování HTML Každý text má obsah a formu. Když mluvím o formátu

Více

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

HTML XHTML JavaScript PHP ASP.Net Zajímavé odkazy V čem se píší web. dokumenty HTML XHTML JavaScript PHP ASP.Net Zajímavé odkazy HTML HTML (HyperText Markup Language, značkovací jazyk pro hypertext) standart pro vytváření stránek v systému aplikací World

Více

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

Dokument ve formátu webové stránky vytvořený pomocí XHTML a CSS Výstupový indikátor 06.43.19 Motivační název: Autor: Vzdělávací oblast: Vzdělávací obory: Ročník: Časový rozsah: Pomůcky: Projekt Integrovaný vzdělávací systém města Jáchymov - Mosty Tvorba webu I Petr

Více

Tvorba stránek v HTML ve Wordu

Tvorba stránek v HTML ve Wordu Tvorba stránek v HTML ve Wordu HTML (hypertext markup language hypertextový značkovací jazyk). Internetová stránka jako soubor s příponou htm nebo html. Je to skoro obyčejný textový soubor obohacený o

Více

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

13. Vytváření webových stránek 13. Vytváření webových stránek značkovací jazyk HTML, základní členění dokumentu, odkazy, tabulky, seznamy, obrázky, HTML editory Značkovací jazyk HTML HTML - Hypertext markup Language (hypertextový značkovací

Více

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

Stránka se dá otevřít dvěma způsoby Co je potřeba Mozek, to zaprvé. Budete potřebovat počítač, na kterém běží alespoň nějaký jednoduchý textový editor (Poznámkový blok). Potřebujete webový prohlížeč. Hodí se připojení na internet. Kdo nemá

Více

www.helpmark.cz Tomáš Herout

www.helpmark.cz Tomáš Herout 4. 1. 2015 1 Obsah prezentace» Jak naplánovat strukturu» Co je to HTML a CSS» Co používat za nástroje» Struktura a logika HTML» DOCTYPE» Hlavička (X)HTML» Tělo (X)HTML» Skupiny (X)HTML tagů» Vztah mezi

Více

Tvorba WWW stránek. přehled technologií používaných na webu principy jednotlivých technologií a možnosti jejich vzájemného kombinování

Tvorba WWW stránek. přehled technologií používaných na webu principy jednotlivých technologií a možnosti jejich vzájemného kombinování Tvorba WWW stránek přehled technologií používaných na webu principy jednotlivých technologií a možnosti jejich vzájemného kombinování HTML/XHTML kaskádové styly PHP spolupráce PHP s databázemi Technologie

Více

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

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 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 Název školy: Číslo a název projektu: Číslo a název šablony klíčové

Více

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

Základy HTML (2. přednáška) Základy HTML (2. přednáška) WWW World Wide Web Sestává ze tří stavebních bloků Síť informačních zdrojů Universal Resource Identifier jednotný způsob jak adresovat zdroje, (URL) protokoly pro přístup ke

Více

Webové stránky. 2. Úvod do jazyka HTML. Datum vytvoření: 11. 9. 2012. str ánk y. Vytvořil: Petr Lerch. www.isspolygr.cz

Webové stránky. 2. Úvod do jazyka HTML. Datum vytvoření: 11. 9. 2012. str ánk y. Vytvořil: Petr Lerch. www.isspolygr.cz Webové stránky 2. Úvod do jazyka HTML Vytvořil: Petr Lerch www.isspolygr.cz Datum vytvoření: 11. 9. 2012 Webové Strana: 1/6 Škola Ročník Název projektu Číslo projektu Číslo a název šablony Autor Tématická

Více

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

Základy HTML. Obecná syntaxe HTML. Struktura HTML Základy HTML HyperText Markup Language, označovaný zkratkou HTML, je značkovací jazyk pro hypertext. Je jedním z jazyků pro vytváření stránek v systému World Wide Web, který umožňuje publikaci dokumentů

Více

TVORBA WEBOVÝCH STRÁNEK

TVORBA WEBOVÝCH STRÁNEK TVORBA WEBOVÝCH STRÁNEK Výukový modul TWS_03c Ing. Pavel Chmiel, Ph.D. UNIV 2 - KRAJE Osnova výukového modulu TWS_03c 1. Box model v CSS 2. Obtékání blokových (X)HTML elementů 3. Pozicování blokových (X)HTML

Více

15. CSS styly (funkce, vývoj, využití). Práce s CSS styly (vkládání do kódu, pravidlo, selektor, dědičnost, kaskády, id a vlastní třídy)

15. CSS styly (funkce, vývoj, využití). Práce s CSS styly (vkládání do kódu, pravidlo, selektor, dědičnost, kaskády, id a vlastní třídy) 15. CSS styly (funkce, vývoj, využití). Práce s CSS styly (vkládání do kódu, pravidlo, selektor, dědičnost, kaskády, id a vlastní třídy) Formátování HTML Každý text má obsah a formu. Když mluvím o formátu

Více

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

Tvorba webových stránek pomocí HTML kódu v příkladech. M. Seménka, 2014 Tvorba webových stránek pomocí HTML kódu v příkladech podpůrný text pro výuku M. Seménka, 2014 na příkladech se studenti seznámí se základními postupy tvorby www stránek Příklady je třeba důkladně prostudovat

Více

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

Uspořádání klient-server. Standardy pro Web Návrh a tvorba WWW stránek 1/11 Uspořádání klient-server klient na straně uživatele (browser, prohlížeč) server program obsluhující požadavky uživatele Standardy pro Web HTTP Hypertext Transfer Protocol

Více

Internetové technologie, cvičení č. 5

Internetové technologie, cvičení č. 5 Internetové technologie, cvičení č. 5 Náplň cvičení Obsahem 5. cvičení předmětu Internetové technologie je ukázka a procvičení XHTML značek a atributů používaných při vytváření hypertextových odkazů a

Více

Inovace bakalářského studijního oboru Aplikovaná chemie http://aplchem.upol.cz

Inovace bakalářského studijního oboru Aplikovaná chemie http://aplchem.upol.cz Inovace bakalářského studijního oboru Aplikovaná chemie http://aplchem.upol.cz CZ.1.07/2.2.00/15.0247 Tento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem České republiky. Internet

Více

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

Základy HTML. Obecná syntaxe HTML. Struktura HTML Základy HTML HyperText Markup Language, označovaný zkratkou HTML, je značkovací jazyk pro hypertext. Je jedním z jazyků pro vytváření stránek v systému World Wide Web, který umožňuje publikaci dokumentů

Více

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!

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! Jemný úvod do HTML Redakční systém školního webu umožňuje formátovat text HTML značkami, tedy stejným způsobem, jakým se formátují webové stránky. Tento návod si dává za úkol seznámení se základními formátovacími

Více

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

Dokument XHTML. Prohlížeč. styl CSS. Výstupní dokument. Soubor DTD CSS 1 Výhody: Udřování prezentace oddělené od dokumentu znamená, že můžete nastavit styly dokumentu pro různá média; Oddělení dokumentu od jeho prezentace znamená menší dokument, což dále znamená, že se

Více

Tématická oblast: dědičnost, kaskáda. CSS a média. Stylové předpisy pro různé typy zobrazovacích zařízení

Tématická oblast: dědičnost, kaskáda. CSS a média. Stylové předpisy pro různé typy zobrazovacích zařízení Tématická oblast: dědičnost, kaskáda CSS a média Stylové předpisy pro různé typy zobrazovacích zařízení Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je ( Ing. Petr Měrka). VY_32_INOVACE_185

Více

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

Bloky. Tag Význam Párový. p odstavec nepovinně. br řádkový zlom ne. div oddíl ano. center vycentrování ano. h1 nadpis 1. Bloky Tu se popisuji blokové tagy, což jsou všechny, za kterými se zalamuje řádka. Jde o různé oddíly textu a odstavce. Opakem blokových tagů jsou řádkové (in-line) tagy na značkování textu. Tag Význam

Více

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

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. Úvod do tvorby www stránek Tvorba www 3 Poznámka v (x)html Všechno, co je v (x)html souboru obaleno značkami , je považováno za poznámku a nezobrazuje se. Odkaz (hyperlink)

Více

1 Tvorba WWW stránek pomocí programu Microsoft FrontPage

1 Tvorba WWW stránek pomocí programu Microsoft FrontPage 1 Tvorba WWW stránek pomocí programu Microsoft FrontPage Pomocí tohoto programu můžete vytvářet WWW stránky s minimální znalostí HTML kódu. Bohužel takto vytvořené stránky obsahují množství chyb a nejsou

Více

Tvorba fotogalerie v HTML str.1

Tvorba fotogalerie v HTML str.1 Tvorba fotogalerie v HTML str.1 obr. A obr. B 1) Spustíme PsPad, vytvoříme nový dokument a otevře se nám okno nový soubor, kde si můžeme zvolit jaký chceme typ. My označíme HTML a potvrdíme. 2) Pro správné

Více

IE1 jazyk HTML a kaskádové styly

IE1 jazyk HTML a kaskádové styly IE1 jazyk HTML a kaskádové styly Tvorbu webových stránek v jazyce HTML a jejich formátování pomocí kaskádových stylů (CSS) budeme zkoušet na souvislém příkladu. Můžete si zvolit vlastní téma webové prezentace.

Více

Tvorba jednoduchých WWW stránek. VŠB - Technická univerzita Ostrava Katedra informatiky

Tvorba jednoduchých WWW stránek. VŠB - Technická univerzita Ostrava Katedra informatiky Tvorba jednoduchých WWW stránek RNDr. Daniela Ďuráková VŠB - Technická univerzita Ostrava Katedra informatiky Vznik WWW technologie Vznik - CERN 1989-90, vedoucí projektu Tim Berners-Lee cíl - infrastruktura

Více

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

Výukový materiál KA č.4 Spolupráce se ZŠ Výukový materiál KA č.4 Spolupráce se ZŠ Modul: Téma workshopu: Výpočetní technika Co je to internet? Jak si udělat vlastní www stránku? Vypracovala: Ing. Lenka Hellová Termín workshopu: 30. říjen 2012

Více

Kaskádové styly základy grafiky

Kaskádové styly základy grafiky 1 Kaskádové styly základy grafiky Vymezení pojmů Historie Základy stylů 2 Co je to CSS? Vznik CSS a je možné zařadit přibližně do roku 1997. Pojem CSS by se dal shrnout definicí :"souhrn pravidel a metod

Více

IE1 jazyk HTML a kaskádové styly

IE1 jazyk HTML a kaskádové styly IE1 jazyk HTML a kaskádové styly Tvorbu webových stránek v jazyce HTML a jejich formátování pomocí kaskádových stylů (CSS) budeme zkoušet na souvislém příkladu. Můžete si zvolit vlastní téma webové prezentace.

Více

Dokumenty umístěné na počítačových serverech jsou adresovány pomocí URL (Uniform Resource Locator).

Dokumenty umístěné na počítačových serverech jsou adresovány pomocí URL (Uniform Resource Locator). Koncepce webu Základní pojmy Internet a jeho služby Internet je celosvětový systém navzájem propojených počítačových sítí. Počítače mezi sebou komunikují pomocí rodiny protokolů TCP/IP. Internet poskytuje

Více

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

12. Základy HTML a formuláře v HTML 12. Základy HTML a formuláře v HTML 1) Co je to HTML a historie HTML 2) Termíny v HTML a. tag b. značka c. element d. atribut e. entita 3) specifikace a. html, xhtmll b. rozdíly xhtml a html 4) struktura

Více

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

Internet WEB stránky HTML, Hypertext MarkUp Language - nadtextový jazyk - Místo příkazů obsahuje tagy - značky Internet WEB stránky HTML, Hypertext MarkUp Language - nadtextový jazyk - Místo příkazů obsahuje tagy - značky Fungování internetu je celosvětový systém navzájem propojených počítačových sítí ve kterých

Více

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

Tvorba webu. Kaskádové styly (CSS) Martin Urza Tvorba webu Kaskádové styly (CSS) Martin Urza Motivace Proč používat kaskádové styly k formátování HTML? Dovolují více možností formátování než klasické HTML atributy a stále přibývají další (možnosti).

Více

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

PŘÍRUČKA. Správa obsahu webové prezentace. Formátování textu PŘÍRUČKA Správa obsahu webové prezentace Formátování textu Verze: 6.2 Datum: 4.12.2009 Autor: Ing. Michal Šídlo, michal.sidlo@netgenium.com Společnost: NetGenium s.r.o., www.netgenium.com Obsah 1. Základní

Více

Š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

Š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 Škola: Gymnázium, Brno, Slovanské náměstí 7 Šablona: III/2 Inovace a zkvalitnění výuky prostřednictvím ICT Název projektu: Inovace výuky na GSN prostřednictvím ICT Číslo projektu: CZ.1.07/1.5.00/34.0940

Více

Název modulu: Tvorba webu pomocí XHTML a CSS začátečníci

Název modulu: Tvorba webu pomocí XHTML a CSS začátečníci Název modulu: Označení: C7 Stručná charakteristika modulu Modul vznikl za účelem úvodního seznámení zájemců o problematiku tvorby moderních webových stránek podle standardů W3C. Zahrnuje základní nezbytné

Více

Mgr. Stěpan Stěpanov, 2013

Mgr. Stěpan Stěpanov, 2013 Mgr. Stěpan Stěpanov, 2013 Abstrakt V tomto kurzu se seznámíme se základními pojmy HTML, klíčovými pravidly pro práci se značkami a atributy a strukturou dokumentu. Také se dozvíte, jak a v čem lze vytvářet

Více

KASKÁDOVÉ STYLY - PÍSMO

KASKÁDOVÉ STYLY - PÍSMO KASKÁDOVÉ STYLY - PÍSMO Název školy Obchodní akademie, Vyšší odborná škola a Jazyková škola s právem státní jazykové zkoušky Uherské Hradiště Název DUMu Kaskádové styly písmo Autor Zdeněk Hrdina Datum

Více

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

Mgr. Vlastislav Kučera přednáška č. 1 Mgr. Vlastislav Kučera přednáška č. 1 jazyk (x)html kaskádové styly Castro, E.: HTML, XHTML a CSS. CPress, 2007 Písek, S.: HTML a XHTML, začínáme programovat. Grada Publishing, 2003 Wempen, F.: HTML a

Více

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/34.0585

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/34.0585 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/34.0585 Škola: Adresa: Autor: Gymnázium, Jablonec nad Nisou, U Balvanu 16, příspěvková organizace

Více

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

Název: VY_32_INOVACE_PG4120 Literatura, online zdroje informací, testy Název: VY_32_INOVACE_PG4120 Literatura, online zdroje informací, testy Autor: Mgr. Tomáš Javorský Datum vytvoření: 05 / 2012 Ročník: 3 Vzdělávací oblast / téma: webdesign, počítačová grafika Anotace: Uvádí

Více

Mimochodem, co je CSS? Formátování HTML. Drobný problém. Základy práce se styly. Trojí použití CSS. Přímo (in-line)

Mimochodem, co je CSS? Formátování HTML. Drobný problém. Základy práce se styly. Trojí použití CSS. Přímo (in-line) Mimochodem, co je CSS? CSS vzniklo někdy kolem roku 1997. Je to kolekce metod pro grafickou úpravu webových stránek. Ta zkratka znamená Cascading Style Sheets, česky "kaskádové styly". Kaskádové, protože

Více

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

Co je HTML. 1. Párový tag má začátek a konec: 2. Nepárový tag nemá ukončovací značku: Co je HTML HTML HyperText Markup Language je značkovací jazyk pro tvorbu www stránek. Jako například Český jazyk má svá slova, tak i HTML obsahuje slova, neboli tagy (značky), které dávají vlastnímu obsahu

Více

SIPVZ Tvorba www stránek

SIPVZ Tvorba www stránek SIPVZ Tvorba www stránek RNDr. Jana Reslová SPŠE a VOŠ Pardubice V čem vytvářet HTML stránky... 2 Editor 1stPage... 4 Instalace...4 Prostředí editoru 1stPage...4 Úprava prostředí 1stPage...5 Základy HTML...

Více

Microsoft Office SharePoint Server 2007

Microsoft Office SharePoint Server 2007 Microsoft Office SharePoint Server 2007 Příručka pro uživatele Úvod do HTML a CSS Verze 1.1 Stav k 7.4. 2009 Středisko komunikačních a informačních systému Univerzita obrany Brno 2009 2008 Středisko komunikačních

Více

Podpora nových webových technologií HTML5 a CSS3 v aktuálních verzích prohlížečů

Podpora nových webových technologií HTML5 a CSS3 v aktuálních verzích prohlížečů Jihočeská univerzita v Českých Budějovicích Pedagogická fakulta Katedra informatiky Podpora nových webových technologií HTML5 a CSS3 v aktuálních verzích prohlížečů PaedDr. Petr Pexa, Ph.D. 9. dubna 2014

Více

APLIKACE XML PRO INTERNET

APLIKACE XML PRO INTERNET APLIKACE XML PRO INTERNET Jaroslav Ráček Fakulta Informatiky, Masarykova Universita Brno Abstrakt Text je věnován možnostem využití XML technologie pro prezentaci dokumentů pomocí Internetu. V úvodu je

Více

Š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

Š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 Škola: Gymnázium, Brno, Slovanské náměstí 7 Šablona: III/2 Inovace a zkvalitnění výuky prostřednictvím ICT Název projektu: Inovace výuky na GSN prostřednictvím ICT Číslo projektu: CZ.1.07/1.5.00/34.0940

Více

Nová struktura souborů a složek

Nová struktura souborů a složek Tvorba podstránek Vytvoření podstránek Asi si kladete otázku, jakým způsobem docílíme toho, aby se všechny podstránky na našem webu zobrazovaly v námi vytvořeném layoutu. Máme 4 možnosti jak vytvářet podstránky

Více

KIV/PIA 2012 Ing. Jan Tichava

KIV/PIA 2012 Ing. Jan Tichava KIV/PIA 2012 Ing. Jan Tichava Opera Mini Zobrazených stránek za měsíc 90 G 80 G 70 G 60 G 50 G 40 G 30 G 20 G 10 G 0 G January 2011 May 2011 September 2011 January 2012 May 2012 September 2012 State of

Více

Web. Získání informace z internetu Grafické zobrazení dat a jejich struktura Rozšíření funkcí pomocí serveru Rozšíření funkcí pomocí prohlížeče

Web. Získání informace z internetu Grafické zobrazení dat a jejich struktura Rozšíření funkcí pomocí serveru Rozšíření funkcí pomocí prohlížeče Web Získání informace z internetu Grafické zobrazení dat a jejich struktura Rozšíření funkcí pomocí serveru Rozšíření funkcí pomocí prohlížeče Technologické trendy v AV tvorbě, Web 2 DNS Domain Name Systém

Více

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

Internet 02 - Tvorba statických www stránek za pomoci HTML tagů Tagy Jak bylo uvedeno na předchozích stránkách, tag je vlastně značka, podle které se prohlížeč řídí. Tag určuje, jakým způsobem bude stránka upravena. Například - teď zarovnej text doprava, nyní zvětši

Více

Tvorba WWW stránek. Mojmír Volf mojmir.volf@tul.cz https://www.nti.tul.cz/wiki/wikiuser:mojmir.volf 485 353 675

Tvorba WWW stránek. Mojmír Volf mojmir.volf@tul.cz https://www.nti.tul.cz/wiki/wikiuser:mojmir.volf 485 353 675 Tvorba WWW stránek Mojmír Volf mojmir.volf@tul.cz https://www.nti.tul.cz/wiki/wikiuser:mojmir.volf 485 353 675 Zdroje KRUG: Web design - nenuťte uživatele přemýšlet.. Computer Press, 2003. PROKOP M.: CSS

Více

Tvorba webu. Úvod a základní principy. Martin Urza

Tvorba webu. Úvod a základní principy. Martin Urza Tvorba webu Úvod a základní principy Martin Urza World Wide Web (WWW) World Wide Web (doslova celosvětová pavučina ) je označení pro mnoho dokumentů rozmístěných na různých serverech po celém světě. Tyto

Více

TVORBA WEBOVÝCH STRÁNEK

TVORBA WEBOVÝCH STRÁNEK TVORBA WEBOVÝCH STRÁNEK Výukový modul TWS_03b Ing. Pavel Chmiel, Ph.D. UNIV 2 - KRAJE Osnova výukového modulu TWS_03b 1. Kaskádové styly (CSS) 2. Vazba CSS na (X)HTML dokument 3. Syntaxe CSS 4. Barva a

Více

Microsoft. Word. prostředí, základní editace textu. Mgr. Jan Veverka Střední odborná škola sociální Evangelická akademie

Microsoft. Word. prostředí, základní editace textu. Mgr. Jan Veverka Střední odborná škola sociální Evangelická akademie Microsoft Word prostředí, základní editace textu Mgr. Jan Veverka Střední odborná škola sociální Evangelická akademie Microsoft Office balík aplikací používaných v kancelářské i jiné práci Word textový

Více

WEBOVÉ STRÁNKY www.krestanskevanoce.cz

WEBOVÉ STRÁNKY www.krestanskevanoce.cz WEBOVÉ STRÁNKY www.krestanskevanoce.cz Domovská stránka Křesťanských Vánoc je založena na databázi, která vedle běžných funkcí redakčního systému internetové prezentace umožňuje též uložit údaje o jednotlivých

Více

Informatika pro moderní fyziky (8) Javascript, CSS - stylování dokumentů, SVG - tvorba obrázků, složitější interaktivní dokument

Informatika pro moderní fyziky (8) Javascript, CSS - stylování dokumentů, SVG - tvorba obrázků, složitější interaktivní dokument Informatika pro moderní fyziky (8) Javascript, CSS - stylování dokumentů, SVG - tvorba obrázků, složitější interaktivní dokument František HAVLŮJ e-mail: haf@ujv.cz ÚJV Řež oddělení Reaktorové fyziky a

Více

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

Mgr. Vlastislav Kučera přednáška č. 1 Mgr. Vlastislav Kučera přednáška č. 1 jazyk HTML5 CSS3 HTML5 a CSS3: CASTRO, E. HTML5 a CSS3. Computer press, 2012 GOLDSTEIN, A., LAZARIS, L. a WEYL, E. HTML5 a CSS3 pro webové designéry. Brno: Zoner Press,

Více

1. Začínáme s FrontPage 2003 11

1. Začínáme s FrontPage 2003 11 Úvod 9 1. Začínáme s FrontPage 2003 11 Instalace programu 12 Spuštění a ukončení programu 15 Základní ovládání 16 Hledání souborů 30 Najít a nahradit 31 Tisk 32 Schránka sady Office 34 Nápověda 36 Varianty

Více

Manuál k editoru TinyMCE

Manuál k editoru TinyMCE Manuál k editoru TinyMCE Popis ovládacích prvků UPOZORNĚNÍ: Některé tlačítka nemusí být k dispozici. Styl písma Dolní a horní index Zarovnání textu Může se aplikovat na označený text. B - tučné písmo,

Více

METODICKÝ POKYN PRÁCE S MS PowerPoint - ZAČÁTEČNÍCI. Tento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem České republiky.

METODICKÝ POKYN PRÁCE S MS PowerPoint - ZAČÁTEČNÍCI. Tento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem České republiky. METODICKÝ POKYN PRÁCE S MS PowerPoint - ZAČÁTEČNÍCI Základní rozložení plochy Výchozím stavem při práci je normální zobrazení. pás karet - základní nabídka příkazů Pořadí jednotlivých snímků Základní plocha

Více

DUM č. 11 v sadě. 36. Inf-12 Počítačové sítě

DUM č. 11 v sadě. 36. Inf-12 Počítačové sítě projekt GML Brno Docens DUM č. 11 v sadě 36. Inf-12 Počítačové sítě Autor: Lukáš Rýdlo Datum: 06.05.2014 Ročník: 3AV, 3AF Anotace DUMu: WWW, HTML, HTTP, HTTPS, webhosting Materiály jsou určeny pro bezplatné

Více

Škola. Téma hodiny 08.08 HTML - Základní návrh stránky Informační a komunikační technologie

Škola. Téma hodiny 08.08 HTML - Základní návrh stránky Informační a komunikační technologie Škola Střední odborná škola a Střední odborné učiliště, Hustopeče, Masarykovo nám. 1 Autor Ing. Jiří Tinka Číslo projektu CZ.1.07/1.5.00/34.0394 Číslo DUM VY_32_INOVACE_18_ICT_08.08a Název Tvorba webu

Více

Maturitní otázka webové stránky (technologie tvorby webu) Co znamená pojem Web? Web, www stránky, celým názvem World Wide Web,

Maturitní otázka webové stránky (technologie tvorby webu) Co znamená pojem Web? Web, www stránky, celým názvem World Wide Web, Maturitní otázka webové stránky (technologie tvorby webu) Co znamená pojem Web? Web, www stránky, celým názvem World Wide Web, v doslovném překladu "světová rozsáhlá síť neboli celosvětová síť, je označení

Více

XHTML a tvorba webu. 1. Historie a základní struktura. HTML HyperText Markup Language

XHTML a tvorba webu. 1. Historie a základní struktura. HTML HyperText Markup Language XHTML a tvorba webu 1. Historie a základní struktura HTML HyperText Markup Language - HTML 0.9 první verze 1991 - Značkovací jazyk pro zápis dokumentů na webu - Vkládání do textu obrázků, hypertextových

Více

Obsah. Stručná historie World Wide Webu 7

Obsah. Stručná historie World Wide Webu 7 KAPITOLA I Web bez tajemství 1 Kde se vzal web a jeho stránky 2 Kouzlo jménem HTML 3 Jak stránky připravovat 5 Webová grafika 6 Web aktivní a interaktivní 6 Na straně serveru 6 Jak studovat tuto knihu

Více

Odkazy se v normálním případě podtrhávají samy, není nutno to nastavovat.

Odkazy se v normálním případě podtrhávají samy, není nutno to nastavovat. Úprava textu Všechny tagy na formátování textu jsou in-line tagy, to znamená řádkové. Nezalamují za sebou řádek (narozdíl od blokových tagů). Fyzické formátování Fyzické formátování říká, jak má který

Více

Základy WWW publikování

Základy WWW publikování Ing. Igor Kopetschke Oddělení aplikované informatiky Ústav nových technologií a aplikované informatiky Fakulta mechatroniky a mezioborových inženýrských studií Technická univerzita v Liberci Email : igor.kopetschke@tul.cz

Více

1. Struktura stránky, zásady při psaní kódu, MVC pattern. Web pro kodéry (Petr Kosnar, ČVUT, FJFI, KFE, PINF 2008)

1. Struktura stránky, zásady při psaní kódu, MVC pattern. Web pro kodéry (Petr Kosnar, ČVUT, FJFI, KFE, PINF 2008) 1. Struktura stránky, zásady při psaní kódu, MVC pattern Web pro kodéry (Petr Kosnar, ČVUT, Obsah } Terminologie } Prezentace x Obsah } Struktura kódu } Sémantika kódu } Struktura stránky } Šablony } Template

Více

Kaskádové styly (CSS) Cascading Style Sheets

Kaskádové styly (CSS) Cascading Style Sheets CSS verze 22.11. 2007 1 Kaskádové styly (CSS) Cascading Style Sheets Existují 3 druhy zápisu CSS do webové stránky a) Vložením tagu STYLE do hlavičky dokumentu ...definice stylu atributy: type...

Více

XHTML 1. Značkovací jazyky (mark-up): Součastí prostředků je systém m značek

XHTML 1. Značkovací jazyky (mark-up): Součastí prostředků je systém m značek XHTML 1 Jazyk HTML značkovací jazyk, speciálně vyvinutý pro popis Internetových dokumentů. HTML umožňuje popis: struktury dokumentu; obsahu dokumentu; způsobu zobrazení obsahu prohlížečem na displeji.

Více

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

absolutní (úplná) začíná lomítkem http:// nebo https:// pouze v odkazech na jiný web. relativní popisuje cestu od html stránky k cílovému souboru. Základy www Jak vytvořit webové stránky Návody a příklady najdete na adrese webowebu.phorum.cz Podrobný popis a další možnosti najdete na stránkách owebu.org Potřebný software Html editor PSPad, který

Více

Jak vytva r et webove stra nky pomocı XHTML a CSS.

Jak vytva r et webove stra nky pomocı XHTML a CSS. Jak vytva r et webove stra nky pomocı XHTML a CSS. K vytváření webových stránek se používají různé editory. Z pohledu tvůrce je nejednodušší způsob jak napsat stránku použít např. editor MS-Word a soubor

Více

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

Webové stránky. 5. Kaskádové styly formátování textu. Datum vytvoření: 3. 10. 2012. str ánk y. Vytvořil: Petr Lerch. www.isspolygr. Webové stránky 5. Vytvořil: Petr Lerch www.isspolygr.cz Datum vytvoření: 3. 10. 2012 Webové Strana: 1/11 Škola Ročník Název projektu Číslo projektu Číslo a název šablony Autor Tématická oblast Název DUM

Více

Programování webových stránek

Programování webových stránek Gymnázium J. K. Tyla Programování webových stránek Seminární práce z IVT Autor: Roman Lamberský Třída: 2.B Hradec Králové 2012 Prohlášení: Prohlašuji, že jsem tuto seminární práci vypracoval samostatně

Více

MANUÁL. Jak používat administraci webových stránek. Obsah ZÁKLAD... 2 ÚPRAVY POLOŽKY... 3 ÚPRAVY TEXTOVÉ STRÁNKY... 4

MANUÁL. Jak používat administraci webových stránek. Obsah ZÁKLAD... 2 ÚPRAVY POLOŽKY... 3 ÚPRAVY TEXTOVÉ STRÁNKY... 4 MANUÁL Jak používat administraci webových stránek Obsah ZÁKLAD... 2 PŘIHLÁŠENÍ DO ADMINISTRACE... 2 HLAVNÍ MENU... 2 VÝBĚR POLOŽKY... 2 ÚPRAVY POLOŽKY... 3 DETAIL POLOŽKY... 3 ÚPRAVY TEXTOVÉ STRÁNKY...

Více

O CSS podrobněji. Box model Document flow Layout

O CSS podrobněji. Box model Document flow Layout O CSS podrobněji Box model Document flow Layout O CSS podrobněji Box model Každý element má: -obsah (content) -spadávku (padding) -rámeček (border) -okraj (margin) O CSS podrobněji http://www.w3.org/tr/css21/box.html

Více