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 ( <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ě: pavel.teply@natur.cuni.cz

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=" <a href="mailto:novak@novak.cz"> 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=" " title =" " width= "480" frameborder="0" allowfullscreen></iframe> Vložit do stránky (embed, párový) <embed src=" Pluginspage=" 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=" </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=" </div> //telefon

57 Zdroje informací