Tvorba webových stránek a HTML 5. Martin Trnečka

Size: px
Start display at page:

Download "Tvorba webových stránek a HTML 5. Martin Trnečka"

Transcription

1 Informační systémy Tvorba webových stránek a HTML 5 Martin Trnečka Katedra informatiky Univerzita Palackého v Olomouci Martin Trnečka (Přednáška 2) Tvorba webových stránek a HTML 5 Informační systémy 1 / 46

2 Webové stránky Internet - fenomén, který není třeba představovat. Webová stránka (www stránka, internetová stránka, html stránka). Produkt celé řady technologíı: HTML, CSS, JavaScript, PHP, MySQL, ASP, Ruby on Rails,.... Není možné uspokojivě prezentovat všechny technologie. Zaměříme se na volně dostupné řešení (ne příliš vhodné pro enormní IS). Velice populární u menších a středních IS (ale i velké IS). Výběr technologíı: strategické rozhodnutí podléhající celé řadě aspektů. Více se vrátíme k problematice výběru technologie v pozdější části kurzu. Martin Trnečka (Přednáška 2) Tvorba webových stránek a HTML 5 Informační systémy 2 / 46

3 Opakování z KMI/POS Hypertext Transfer Protocol (HTTP) zajišt uje komunikaci mezi serverem a klientem na principu requestů (HTTP 1.1, nově HTTP/2). Základní protokol (aplikační vrstva TCP/IP) na kterém je vystavěn Internet. Dvě základní metody: GET a POST. GET: Požadavek pomocí URL requestu Zůstává v historii prohĺıžeče Omezení délky (2048 znaků) Nevhodný pro přenos citlivých dat POST: Nezůstává v historii prohĺıžeče Žádné omezení délky. Nelze cachovat. Zabezpečená (šifrovaná) verze HTTPS protokol. Martin Trnečka (Přednáška 2) Tvorba webových stránek a HTML 5 Informační systémy 3 / 46

4 HyperText Markup Language (HTML) Značkovací jazyk! Kĺıčový prvek každé webové stránky (*.html). Slouží pro definici významu (sémantiky) obsahu webové stránky. Počátky z roku 1990, nejnovější HTML 5. Standard jazyka, konsorcium W3C, Interpretovatelný všemi běžnými webovými prohĺıžeči (Chrome, Firefox, Internet Explorer (IE), Opera, Safari,... ) - jsou zde jisté problémy (více později). HTML 5 defines the fifth major revision of the core language of the World Wide Web, HTML. This document describes the set of guiding principles used by the HTML Working Group for the development of HTML5. The principles offer guidance for the design of HTML in the areas of compatibility, utility and interoperability. Martin Trnečka (Přednáška 2) Tvorba webových stránek a HTML 5 Informační systémy 4 / 46

5 Historie vývoje HTML I Systém ENQUIRE pro CERN (Tim Berners-Lee) představena první verze HTML + browser (vznik www) první dokumentace první požadavky na standardizaci založena první pracovní skupina HTML HTML přechází pod World Wide Web Consortium (W3C) HTML 3.2, brzy na to HTML 4.0 (uvedeno několik standardů a DHTML) HTML 4.01, v roce 2000 separátní větev vývoje XHTML začátek vývoje HTML pracovní draft HTML 5 Martin Trnečka (Přednáška 2) Tvorba webových stránek a HTML 5 Informační systémy 5 / 46

6 Historie vývoje HTML II rozšíření skupiny W3C, last call pro HTML první pracovní draft HTML 5.1 verze HTML 5 (stále není hotové) je podporováno všemi moder. prohĺıžeči říjen 2014, bod zlomu, HTML 5 získává status W3C recommendation, stává se oficiálním standardem Mezidobí, zbývá implementovat zbytek HTML 5 standardu. Práce na draftu HTML 5.1 (očekávané dokončení je oznámeno na konec roku 2016) Očekávaný draft HTML 5.2 verze. Poznámka: Historie stojící za vývojem (r)evolučního HTML 5 je mnohem rozsáhlejší a složitější. Není možné ji uspokojivě shrnout pomocí pár odrážek. Složité a pomalé procesy standartizace W3C, vznik HTML living standardu predikují, že budoucnost HTML není vůbec jasná. Martin Trnečka (Přednáška 2) Tvorba webových stránek a HTML 5 Informační systémy 6 / 46

7 Tvorba www stránek obecně Mnoho rozličných přístupů a pohledů na www stránky a jejich tvorbu. Náš pohled: web je informační systém. Důsledek: musí plnit svůj účel. Progressive enhancement Obecný princip při tvorbě webu. Začínáme s HTML a postupně nabalujeme další technologie. Obĺıbený přístup, ale má i své stinné stránky. Základní stavební bloky: Textový obsah - informace, data, prezentace. Odkazy na jiné soubory - obrázky, videa, hudba, jiné HTML soubory. Značky - popisující a strukturující www stránku. Vše v čistě textové podobě interpretované web. prohĺıžečem (obecně interpretem). Martin Trnečka (Přednáška 2) Tvorba webových stránek a HTML 5 Informační systémy 7 / 46

8 Tvorba www stránek podrobněji Je nutné si uvědomit: Tvorba www stránek = softwarový projekt (mnohdy velice rozsáhlý). Znalosti z oblasti softwarového inženýrství (principy vývoje software, analýza, wire frame, GUI a další). Budeme se zabývat tvorbou základních www stránek (ne však nutně jednoduchých) a tuto znalost postupně rozšiřovat. V praxi velice populární: využít již existující technologii Java,.NET, popřípadě nějaký framework (Nette, Symphony, Ruby on Rails) a na ní vystavět web. Má své výhody, šetří čas, ale odstiňuje uživatele od základů. Programátor se pak stává uživatelem - problém poslední doby. Používání frameworků je naprosto přirozený vývoj na rozdíl od mnohých programátorů si touto evolucí projdeme. V žádné případě nebudeme používat WYSIWYG editory! Martin Trnečka (Přednáška 2) Tvorba webových stránek a HTML 5 Informační systémy 8 / 46

9 Příklad (HTML 5 kód) 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8" /> 5 <title>blue Flax (Linum lewisii)</title> 6 </head> 7 <body> 8 <article> 9 <h1>the Ephemeral Blue Flax</h1> <! Blue Flax > 12 <p>i am continually <em>amazed</em> at the beautiful, delicate 13 <a href="http://en.wikipedia.org/wiki/linum_lewisii" rel="external" 14 title="learn more about Blue Flax">Blue Flax</a> that somehow took hold in my garden. 15 They are awash in color every morning, yet not a single flower remains by the afternoon. They are 16 the very definition of ephemeral.</p> <img src="blueflax.jpg" width="300" height="175" alt="blue Flax (Linum lewisii)" /> 19 </article> 20 </body> 21 </html> Martin Trnečka (Přednáška 2) Tvorba webových stránek a HTML 5 Informační systémy 9 / 46

10 Význam HTML značek Značky (někdy též HTML entity, či pouze entity popřípadě tagy) přiřazují význam obsahu (udávají sémantiku). Sémantika má vliv na celou řadu kĺıčových atributů: přístupnost, SEO, jednoduchost. Je sémantika nutná? Ano! Anonymita dat. Značky HTML neříkají nic o podobě (vzhledu) obsahu. Ne vždy tomu tak bylo, HTML 5 přichází v tomto ohledu se zcela striktní politikou. Přesto je obsah zobrazen v určité podobě (podrobněji se k tomu vrátíme na dalších přednáškách). Základní dělení značek (semantika): 1 Blokové - jejich použití způsobí vytvoření bloku. Např. <div>, <p>,... 2 Řádkové (inline) - nepřekročí rozsah řádku. Např. <a>, <em>, <span>,... Martin Trnečka (Přednáška 2) Tvorba webových stránek a HTML 5 Informační systémy 10 / 46

11 Základní syntaxe HTML I. Základní dělení značek (syntaxe): 1 Párové - <div>obsah</div> 2 Nepárové - <img src="obrazek.jpg" /> Pro jednoduchost budeme párové značky psát pomocí jejich uvozovacího tagu. Definice (Syntaxe párového tagu) <uvozovaci tag [atribut 1 = hodnota 1... atribut n = hodnota n ] > obsah tagu < /ukoncovaci tag> Příklad (Odkaz, párový tag) 1 <a href="http://en.wikipedia.org" rel="external" title="learn more about Blue Flax"> 2 Blue Flax 3 </a> Martin Trnečka (Přednáška 2) Tvorba webových stránek a HTML 5 Informační systémy 11 / 46

12 Základní syntaxe HTML II. Definice (Syntaxe nepárového tagu) <uvozovaci tag [atribut 1 = hodnota 1... atribut n = hodnota n ] / > V HTML 5 již není znak / na konci nepárového znaku povinný (ani zakázaný). Příklad (Obrázek, nepárový tag) 1 <img src="blueflax.jpg" width="300" height="175" alt="blue Flax (Linum lewisii)" /> Z hlediska syntaxe nejsou atributy povinné, ale bez nich nemají některé značky význam. Rovněž některé atributy jsou doporučené. Definice (Prázdný element) <uvozovaci tag [atribut 1 = hodnota 1... atribut n = hodnota n ] > < /ukoncovaci tag> Martin Trnečka (Přednáška 2) Tvorba webových stránek a HTML 5 Informační systémy 12 / 46

13 Základní syntaxe HTML III. (atributy) V HTML 5 zapisovat atributy elementu několika způsoby Příklad (Zápis atributů) 1 <input type="text" disabled > 2 <input type="text" value=yes > 3 <input type="text" value= no > 4 <input type="text" value="yes or no" > Zápis atributů se řídí jednoduchými pravidly: Globální atributy, společné všem HTML elementům: Martin Trnečka (Přednáška 2) Tvorba webových stránek a HTML 5 Informační systémy 13 / 46

14 Vztah potomek rodič Příklad 1 <article> 2 <h1>the Ephemeral Blue Flax</h1> 3 <img src="blueflax.jpg"... /> 4 <p>... continually <em>amazed</em>... delicate <a...>blue Flax</a>...</p> 5 </article> Např. <h1> je potomek <article>. <p> je rodičem prvků <em> a <a>. Elementy tedy existují v určité hierarchické struktuře. Příklad (Korektní vs. nekorektní použití značek) 1 <p>... continually <em>amazed</em>...</p> 2 <p>... continually <em>amazed...</p></em> Značky musí být uzavírány v pořadí LIFO. Martin Trnečka (Přednáška 2) Tvorba webových stránek a HTML 5 Informační systémy 14 / 46

15 Syntaxe HTML (základní struktura dokumentu) I. <!DOCTYPE html>, speciální značka pro webové prohĺıžeče, udává v jakém formátu (standardu) je dokument zapsán. Pokud nebude standard dodržen stává se dokument nevalidní (syntakticky nesprávný)! Příklad (HTML 5 DOCTYPE) 1 <!DOCTYPE html> Příklad (Zastaralé, ale stále funkční DOCTYPE) 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN"> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/tr/rec-html40/strict.dtd"> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> 4 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> 5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 6 "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> 7 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 8 "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"> Martin Trnečka (Přednáška 2) Tvorba webových stránek a HTML 5 Informační systémy 15 / 46

16 Syntaxe HTML (základní struktura dokumentu) II. <html>, uvození začátku html stránky. <head>, vymezuje hlavičku html dokumentu. <body>, vymezení obsahu (těla) html stránky. Příklad 1 <html lang= cs > 2 <head> 3 <! hlavicka stranky > 4 </head> 5 <body> 6 <! obsah stranky > 7 </body> 8 <html> Otázka k zamyšlení: Jsou tyto tagy povinné? Martin Trnečka (Přednáška 2) Tvorba webových stránek a HTML 5 Informační systémy 16 / 46

17 Sekce <head> Slouží pro nastavení a specifikaci vlastností html stránky. Obvykle obsahuje informace o vkládaných souborech (CSS, Java Script) a meta tagy. <title>, nejdůležitější prvek této sekce, určuje název stránky, má velký význam především pro SEO. Pouze text bez dalších html značek. Definice (Syntaxe meta tagu) <meta name= val 1 http-equiv= val 1 content= val 2 / > Příklad (Běžné meta tagy) 1 <meta charset="utf-8" /> 2 <meta name="description" content="page description..." /> 3 <meta name="keywords" content="key words for searching..." /> 4 <meta name="author" content="martin Trnecka" /> 5 <meta http equiv="refresh" content="30"> 6 <meta http equiv="content-type" content="text/html; charset=utf-8"><! zastarale > Stručný přehled meta tagů: Martin Trnečka (Přednáška 2) Tvorba webových stránek a HTML 5 Informační systémy 17 / 46

18 Syntaxe HTML I. (Nadpisy) <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, nadpisy různé úrovně. Příklad 1 <h1>velky nadpis</h1> 2 <h6>nejmensi nadpis</h6> Praktický tip: Ačkoliv existuje 6 úrovní v praxi se běžně používají pouze první 4 úrovně. S klesající úrovní nadpisu, klesá i význam nadpisu samotného. Výskyt nadpisů by měl být postupný dle důležitosti. <hgroup>, seskupení nadpisů. Příklad 1 <hgroup> 2 <h1>giraffe Escapes from Zoo</h1> 3 <h2>animals Worldwide Rejoice</h2> 4 </hgroup> Martin Trnečka (Přednáška 2) Tvorba webových stránek a HTML 5 Informační systémy 18 / 46

19 Syntaxe HTML II. (blokové značky) <div>, blok (generický kontejner bez sémantického významu). <p>, odstavec. <img />, vložení obrázku. Různé formáty (JPG, PNG, GIF,... ). Atributy: - src - url adresa obrázku (relativní, absolutní) - alt - popisek obrázku (má vliv na SEO a v případě nedostupnosti obrázku, popřípadě pro čtečky www stránek) - height - výška obrázku v pixelech. - width - šířka obrázku v pixelech. - (border, align - nejsou v HTML 5 podporovány!) Příklad 1 <img src="smiley.gif" alt="smiley face" height="42" width="42"> <hr />, způsobí vložení vodorovné čáry. Martin Trnečka (Přednáška 2) Tvorba webových stránek a HTML 5 Informační systémy 19 / 46

20 Syntaxe HTML III. (řádkové značky) <a>, odkaz. Atributy: - href, url adresa destinace (relativní, absolutní). - rel, specifikace vztahu odkazu k aktuálnímu dokumentu (např. nofollow) - target, kde má být odkaz otevřen (např. blank) <em>, zdůrazněný text. <strong>, zvýrazněný text, sémantická důležitost. <span>, ohraničení celku (řádkové!), bez sémantického významu. <br />, řádkový zlom. <address>, pro vložení adresy. <cite>, citace. <pre>, originální mezery. <i>, <b>, <u> - kurziva, tučný text, podtržený text (zastaralé v HTML 4.01), v HTML 5 mají jiný význam! (zvuk, tučný, stylistika) <del> přeškrtnutý obsah, <ins> podtržený obsah (oba nejsou řádkové!), <s> neaktuální obsah. <abbr> zkratky, <bdo> směr textu, <blockquote>, <samp>, <dfn>, <var>... Martin Trnečka (Přednáška 2) Tvorba webových stránek a HTML 5 Informační systémy 20 / 46

21 Syntaxe HTML IV. <code>, zdrojový kód. <button>, tlačítko. Příklad 1 <button type="button">click Me!</button> <canvas>, 2D kresĺıcí plátno novinka v HTML 5. <embed>, kontejner pro vložení externí aplikace (korektně je definován až v HTML 5). Pravidlo: Potomkem řádkového elementu nesmí být element blokový! Vyjímkou je element pro odkaz. To zda je element řádkový či blokový je obvykle snadno rozpoznatelné z jeho použití. Pozor: Ne všechny značky (především z HTML 5) se defaultně zobrazují stejně ve všech prohĺıžečích (je zapotřebí CSS)! Martin Trnečka (Přednáška 2) Tvorba webových stránek a HTML 5 Informační systémy 21 / 46

22 Syntaxe HTML V. (formuláře) <form>, atributy: action, method, enctype <input>, atribut name pro jméno a type pro specifikaci typu (text, hidden, submit, password, checkbox, date, file,... ) nové atributy v HTML 5: autofocus, required, placeholder, readonly, maxlength, pattern,... Příklad 1 <form action="demo.php"> 2 Your name: <input type="text" name="fname"><br> 3 <input type="tel" name="phone" placeholder="xxx-xxx-xxxx" pattern="\d{3}-\d{3}-\d{4}" /> 4 <input type="submit" value="submit"> 5 </form> <textarea>, <button> (lze použít pro odeslání formuláře) <select>, <option>, <optgroup> <fieldset>, <label> Stav formulářů v HTML 5: Martin Trnečka (Přednáška 2) Tvorba webových stránek a HTML 5 Informační systémy 22 / 46

23 Formuláře ještě jednou Pro formuláře přenášející soubory je potřeba multipart/form-data Nové prvky lze použít pro základní validaci na straně klienta (validace je ponechána na prohĺıžeči). V případě přístupu z jiného zařízení umožňují pohodlnější manipulaci (číselné pole = je zobrazena jen numerická klávesnice). Výrazně ulehčují tvorbu webových aplikací. Martin Trnečka (Přednáška 2) Tvorba webových stránek a HTML 5 Informační systémy 23 / 46

24 Syntaxe HTML VI. (tabulky) Tabulky se používají pro zobrazení tabulkových dat. Nebo dat tabulkové povahy. Webový pravěk: využití tabulek pro layout (lze i dnes ale má to zásadní důsledky - mýtus, dnes již neplatí). Přehled syntaxe: <table> <thead> <tbody> <tfoot> <tr> <th> <td> <colgroup> <col> <caption> Martin Trnečka (Přednáška 2) Tvorba webových stránek a HTML 5 Informační systémy 24 / 46

25 Příklad (Tabulka) 1 <table> 2 <caption>tv Schedule</caption> 3 4 <! table head > 5 <thead> 6 <tr> 7 <th>time</th> 8 <th>mon</th> 9 <th>tue</th> 10 <th>wed</th> 11 </tr> 12 </thead> Martin Trnečka (Přednáška 2) Tvorba webových stránek a HTML 5 Informační systémy 25 / 46

26 Příklad (Tabulka pokračování) 1 <! table body > 2 <tbody> 3 <tr> 4 <td>8 pm</td> 5 <td>staring Contest</td> 6 <td colspan="2">celebrity Hoedown </td> 7 </tr> 8 9 <tr> 10 <td>9 pm</td> 11 <td>hardy, Har, Har</td> 12 <td>what s for Lunch?</td> 13 <td rowspan="2">movie of the Week</td> 14 </tr> <tr> 17 <td>10 pm</td> 18 <td>healers, Wheelers & Dealers</td> 19 <td>it s a Crime</td> 20 </tr> 21 </tbody> 22 </table> Martin Trnečka (Přednáška 2) Tvorba webových stránek a HTML 5 Informační systémy 26 / 46

27 Syntaxe HTML VII. Seznamy: <ul>, seznam s odrážkami. <ol>, číslovaný seznam. Atributy: - reversed, hodnoty v opačném pořadí. - start, první hodnota seznamu. - type, typ odrážek 1, A, a, I, i <li>, položka seznamu. Ostatní: Přehled všech elementů HTML jazyka je dostupný na: Pozor: Ne všechny značky jsou podporovány všemi prohĺıžeči. Stejně tak ne všechny značky mají stejný význam v různých verzích HTML! Martin Trnečka (Přednáška 2) Tvorba webových stránek a HTML 5 Informační systémy 27 / 46

28 Syntaxe HTML (novinky v HTML 5) I. Strukturální elementy <header>, <nav>, <footer>, <article>, <section>... Poznámka: Často kritizovány jako neužitečné (neoprávněné). Novinka oproti předchozím HTML Restartují outline webu (nadpisy). V HTML 5 je možné mít více <h1> elementů. Velice problematické z hlediska sémantiky - nedoporučuji používat. <header>, vymezení hlavičky sekce (nesouvisí s <head>!), význam závisí na umístění, může obalovat navigační prvky. Příklad (<header> jako součást sekce) 1 <article> 2 <header> 3 <h1>internet Explorer 9</h1> 4 <p><time pubdate datetime=" "></time></p> 5 </header> 6 <p>windows Internet Explorer 9 (abbreviated as IE9) was released to 7 the public on March 14, 2011 at 21:00 PDT...</p> 8 </article> Martin Trnečka (Přednáška 2) Tvorba webových stránek a HTML 5 Informační systémy 28 / 46

29 Příklad (<header> jako součást celé stránky) 1 <body> 2 <header> 3 <nav> 4 <ul> 5 <li><a href="#gaudi">barcelona s Architect</a></li> 6 <li lang="es"><a href="#sagrada-familia">la Sagrada Familia</a></li> 7 <li><a href="#park-guell">park Guell</a></li> 8 </ul> 9 </nav> 10 </header> 11 </body> Příklad (<header> jako banner) 1 <header role="banner"> 2... [ site logo, navigation, etc.]... 3 </header> Martin Trnečka (Přednáška 2) Tvorba webových stránek a HTML 5 Informační systémy 29 / 46

30 Syntaxe HTML (novinky v HTML 5) II. <nav>, vymezení navigačních prvků stránky či elementu. Ne všechny navigační prvky stránky musí být obaleny touto značkou. Příklad ( <nav> ) 1 <nav role="navigation"> 2 <a href="html">html</a> 3 <a href="css">css</a> 4 <a href="js">javascript</a> 5 </nav> Martin Trnečka (Přednáška 2) Tvorba webových stránek a HTML 5 Informační systémy 30 / 46

31 Syntaxe HTML (novinky v HTML 5) III. <footer>, vymezení patičky elementu. Příklad ( <footer> ) 1 <footer> 2 <p>posted by: Hege Refsnes</p> 3 <p>contact information: <a 4 5 </footer> Martin Trnečka (Přednáška 2) Tvorba webových stránek a HTML 5 Informační systémy 31 / 46

32 Syntaxe (novinky v HTML 5) IV. <article>, vymezení většího bloku. Příklad ( <article> ) 1 <article> 2 <h1>the Diversity of Papua New Guinea</h1> 3 4 <p>papua New Guinea is home to more than 800 tribes and languages...</p> 5... [ rest of story content]... 6 <footer> <! the article s footer, not the page s > 7 <p>leandra Allen is a freelance journalist who earned her degree in anthropology from 8 the University of Copenhagen.</p> 9 <address> 10 You may reach her at <a </address> 13 </footer> 14 </article> Martin Trnečka (Přednáška 2) Tvorba webových stránek a HTML 5 Informační systémy 32 / 46

33 Syntaxe HTML (novinky v HTML 5) V. <section>, vymezení části (většího) bloku article (lze použít i bez article). Příklad ( <section> ) 1 <section> 2 <h2>ceremony</h2> 3 <ol> 4 <li>opening Procession</li> 5 <li>speech by Valedictorian</li> 6 <li>speech by Class President</li> 7 </ol> 8 </section> 9 10 <section> 11 <h2>graduates (alphabetical)</h2> 12 <ol> 13 <li>molly Carpenter</li> 14 <li>anastasia Luccio</li> 15 <li>ebenezar McCoy</li> 16 </ol> 17 </section> Martin Trnečka (Přednáška 2) Tvorba webových stránek a HTML 5 Informační systémy 33 / 46

34 Syntaxe HTML (novinky v HTML 5) VI. <aside>, obsah mimo hlavni obsah. Obĺıbený pro vytvoření sidebaru. Příklad ( <aside> ) 1 <p>my family and I visited The Epcot center this summer.</p> 2 3 <aside role="complementary"> 4 <h4>epcot Center</h4> 5 <p>the Epcot Center is a theme park in Disney World, Florida.</p> 6 </aside> <main>, definice hlavního obsahu v rámci <body>, nerestartuje outline. Na stránce musí být pouze jeden element <main>. Příklad ( <main> ) 1 <main role="main">...</main> Martin Trnečka (Přednáška 2) Tvorba webových stránek a HTML 5 Informační systémy 34 / 46

35 Syntaxe HTML (novinky v HTML 5) VII. <meter>, grafické zobrazeni části (ne všechny prohĺıžeče podporují - textové zobrazení). Příklad ( <meter> ) 1 <p>miles walked during half marathon: 2 <meter min="0" max="13.1" value="4.5" title="miles">4.5</meter></p> <progress>, progress bar. Příklad ( <progress> ) 1 <p>please wait while we save your data. Current progress : 2 <progress max="100" value="0">0% saved</progress></p> Martin Trnečka (Přednáška 2) Tvorba webových stránek a HTML 5 Informační systémy 35 / 46

36 Syntaxe HTML (novinky v HTML 5) VIII. <figure>, <figcaption>. <keygen>. <menu> (redefinováno v HTML 5), <menuitem>. <output>, <time>. Ukončena podpora: <frame>, frameset, <noframe>. <font>, <center>. <applet>. Úplný přehled všech HTML tagů: Martin Trnečka (Přednáška 2) Tvorba webových stránek a HTML 5 Informační systémy 36 / 46

37 Data atributy Novinka (jedno z nejlepších vylepšení) v HTML 5. Slouží pro uložení lokálních dat na webové stránce či v aplikaci - pokročilejší funkcionalita na úrovni HTML stránky. Příklad 1 <ul> 2 <li data animal type="bird">owl</li> 3 <li data animal type="fish">salmon</li> 4 <li data animal type="spider">tarantula</li> 5 </ul> 6 7 <p data obsah="ulozena data"> </p> V předchozích verzích HTML bylo něco podobného možné jen v omezené míře. Zamyšlení: Podoba internetu se dramaticky mění. Trendem moderní doby jsou webové aplikace. HTML 5 se snaží (v omezené míře) na tuto změnu reagovat. Martin Trnečka (Přednáška 2) Tvorba webových stránek a HTML 5 Informační systémy 37 / 46

38 ARIA Accessible Rich Internet Applications (WAI-ARIA) 1.0 Slouží pro vylepšení přístupnosti a pokročilejší definici sémantiky. Atribut role. Role: application, banner, complementary, contentinfo, form, main, navigation, search,... Součástí HTML 5 standardu (definováno samostatným standardem) Příklad 1 <nav role="navigation"> 2 <a href="html">html</a> 3 <a href="css">css</a> 4 <a href="js">javascript</a> 5 </nav> Martin Trnečka (Přednáška 2) Tvorba webových stránek a HTML 5 Informační systémy 38 / 46

39 Pojmenovávání elementů 1 Pro pojmenování jedinečným názvem použijeme atribut id Příklad ( <id> ) 1 <div id="content"> 2 <article> </article> 5 </div> 2 Pro pojmenování opakujícím se názvem použijeme atribut class Příklad ( <class> ) 1 <div class="navigation active"> 2 <article> </article> 5 </div> Martin Trnečka (Přednáška 2) Tvorba webových stránek a HTML 5 Informační systémy 39 / 46

40 Příklad (Komplexní příklad HTML stránky) <body> 3 <! obsah kontejneru > 4 <div id="container"> 5 <header>...</header> 6 7 <! obsah prvniho sloupce > 8 <div id="content"> 9 <article>...</article> 10 </div> <! obsah druheho sloupce > 13 <div id="sidebar"> 14 <aside>...</aside> 15 </div> <footer>...</footer> 18 </div> 19 </body> 20 </html> Martin Trnečka (Přednáška 2) Tvorba webových stránek a HTML 5 Informační systémy 40 / 46

41 HTML entity Speciální znaky. Definice (Syntaxe html entit) &nazev entity; Příklad (HTML entity) 1 2» 3 & 4 Přehled na: Martin Trnečka (Přednáška 2) Tvorba webových stránek a HTML 5 Informační systémy 41 / 46

42 Názvy Názvy souborů mají především vliv na SEO a přístupnost stránek jako celku. Příklad (Vhodný název) buckminster-fuller.html Příklad (Nevhodný název) buckminster fuller.html Poznámka: dodatečné soubory vkládané do html stránky by měli mít rozumnou velikost. Poznámka: starší literatura často uvádí znak podtržítka jako nevhodný to má především historické důvody, dnes je založeno na poznatcích z kognitivní psychologie. Martin Trnečka (Přednáška 2) Tvorba webových stránek a HTML 5 Informační systémy 42 / 46

43 Odkazy ještě jednou (lokální odkazy) Příklad 1 <body> 2 <header> 3 <h2>table of Contents</h2> 4 <nav> 5 <ul> 6 <li><a href="#intro">introduction</a></li> 7 <li><a href="#main-characters">description of the Main Characters</a></li> 8 </ul> 9 </nav> 10 </header> <article> 13 <h2 id="intro">introduction</h2> 14 <p>lorem ipsum...</p> 15 <h2 id="main-characters">description of the Main Characters</h2> 16 <p>dolor sit amet...</p> 17 </article> 18 </body> Martin Trnečka (Přednáška 2) Tvorba webových stránek a HTML 5 Informační systémy 43 / 46

44 Validní HTML Validní = syntakticky (a částečně sémanticky) korektní HTML kód vzhledem k aktuálnímu DOCTYPE. Nevalidní HTML může být renderováno nečekaným způsobem. Velký vliv na SEO. Automatická validace: Vždy budeme používat validní HTML! Martin Trnečka (Přednáška 2) Tvorba webových stránek a HTML 5 Informační systémy 44 / 46

45 Závěr Důležité pojmy: Jazyk HTML a jeho základní principy, syntaxe a sémantika jazyka HTML 5 Specifické vlastnosti jazyka HTML 5 a jejich použití. Formuláře v HTML 5. Čtení na doma: Castro E., Hyslop B., HTML 5 and CSS 3, 2012, ISBN (chapter 1-6, 15, 16, 18) - hlavní zdroj Martin Trnečka (Přednáška 2) Tvorba webových stránek a HTML 5 Informační systémy 45 / 46

46 Kniha: HTML 5 and CSS 3 Visual Quick Start Guide. Informace o knize: 7. vydání (v době vytváření tohoto kurzu vyšlo 8. vydání). Český ekvivalent HTML5 a CSS3 (Názorný průvodce tvorbou WWW stránek) od Computer press (překlad 4. vydání). Martin Trnečka (Přednáška 2) Tvorba webových stránek a HTML 5 Informační systémy 46 / 46

Jazyk C# (seminář 8)

Jazyk C# (seminář 8) Jazyk C# (seminář 8) Pavel Procházka KMI 12. listopadu 2014 Na co je dobré XML? Deklarativní jazyk reprezentující čitelně data Snadná práce s konfiguračními soubory a ukládání do souboru Human readeble

More information

Differences between HTML and HTML 5

Differences between HTML and HTML 5 Differences between HTML and HTML 5 1 T.N.Sharma, 2 Priyanka Bhardwaj, 3 Manish Bhardwaj Abstract: Web technology is a standard that allow developing web applications with the help of predefined sets of

More information

MICROSOFT WORD 2010. Mgr. Krejčí Jan (ZSJP) MICROSOFT WORD 2010 21. září 2012 1 / 21

MICROSOFT WORD 2010. Mgr. Krejčí Jan (ZSJP) MICROSOFT WORD 2010 21. září 2012 1 / 21 MICROSOFT WORD 2010 Mgr. Krejčí Jan Základní škola Jaroslava Pešaty, Duchcov 21. září 2012 Mgr. Krejčí Jan (ZSJP) MICROSOFT WORD 2010 21. září 2012 1 / 21 Microsoft Word 2010 Anotace V souboru typu pdf

More information

Web Development. Owen Sacco. ICS2205/ICS2230 Web Intelligence

Web Development. Owen Sacco. ICS2205/ICS2230 Web Intelligence Web Development Owen Sacco ICS2205/ICS2230 Web Intelligence Introduction Client-Side scripting involves using programming technologies to build web pages and applications that are run on the client (i.e.

More information

COMMONWEALTH OF PENNSYLVANIA DEPARTMENT S OF Human Services, INSURANCE, AND AGING

COMMONWEALTH OF PENNSYLVANIA DEPARTMENT S OF Human Services, INSURANCE, AND AGING COMMONWEALTH OF PENNSYLVANIA DEPARTMENT S OF Human Services, INSURANCE, AND AGING INFORMATION TECHNOLOGY GUIDELINE Name Of Guideline: Domain: Application Date Issued: 03/18/2014 Date Revised: 02/17/2016

More information

CLASSROOM WEB DESIGNING COURSE

CLASSROOM WEB DESIGNING COURSE About Web Trainings Academy CLASSROOM WEB DESIGNING COURSE Web Trainings Academy is the Top institutes in Hyderabad for Web Technologies established in 2007 and managed by ITinfo Group (Our Registered

More information

Web Authoring CSS. www.fetac.ie. Module Descriptor

Web Authoring CSS. www.fetac.ie. Module Descriptor The Further Education and Training Awards Council (FETAC) was set up as a statutory body on 11 June 2001 by the Minister for Education and Science. Under the Qualifications (Education & Training) Act,

More information

BIRD Internet Routing Daemon

BIRD Internet Routing Daemon BIRD Internet Routing Daemon Ondřej Zajíček CZ.NIC z.s.p.o. IT 13 Úvod I Úvod do dynamického routování I Představení démona BIRD I OSPF a BIRD I BGP a BIRD Dynamické routování I Sestavení routovacích tabulek

More information

Introduction to Web Technologies

Introduction to Web Technologies Introduction to Web Technologies Tara Murphy 17th February, 2011 The Internet CGI Web services HTML and CSS 2 The Internet is a network of networks ˆ The Internet is the descendant of ARPANET (Advanced

More information

Basics of Web Design: HTML5 & CSS Author: Terry Ann Felke-Morris, Ed.D.

Basics of Web Design: HTML5 & CSS Author: Terry Ann Felke-Morris, Ed.D. Chapter 1 Internet and Web Basics The Internet and the Web Web Standards and Accessibility Information on the Web Web Browsers and Web Servers Internet Protocols Uniform Resource Identifiers and Domain

More information

SAULT COLLEGE OF APPLIED ARTS AND TECHNOLOGY SAULT STE. MARIE, ONTARIO COURSE OUTLINE

SAULT COLLEGE OF APPLIED ARTS AND TECHNOLOGY SAULT STE. MARIE, ONTARIO COURSE OUTLINE SAULT COLLEGE OF APPLIED ARTS AND TECHNOLOGY SAULT STE. MARIE, ONTARIO COURSE OUTLINE COURSE TITLE: Introduction to Web Development CODE NO. : SEMESTER: 1 PROGRAM: AUTHOR: IT Studies Dennis Ochoski DATE:

More information

Web Design and Development ACS-1809. Chapter 13. Using Forms 11/30/2015 1

Web Design and Development ACS-1809. Chapter 13. Using Forms 11/30/2015 1 Web Design and Development ACS-1809 Chapter 13 Using Forms 11/30/2015 1 Chapter 13: Employing Forms Understand the concept and uses of forms in web pages Create a basic form Validate the form content 11/30/2015

More information

.NET Best Practices Part 1 Master Pages Setup. Version 2.0

.NET Best Practices Part 1 Master Pages Setup. Version 2.0 .NET Best Practices Part 1 Master Pages Setup Version 2.0 2014 CrownPeak Technology, Inc. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any means, electronic

More information

Advanced Online Media Dr. Cindy Royal Texas State University - San Marcos School of Journalism and Mass Communication

Advanced Online Media Dr. Cindy Royal Texas State University - San Marcos School of Journalism and Mass Communication Advanced Online Media Dr. Cindy Royal Texas State University - San Marcos School of Journalism and Mass Communication HTML5 HTML5 is the most recent version of Hypertext Markup Language. It's evolution

More information

Web Development I & II*

Web Development I & II* Web Development I & II* Career Cluster Information Technology Course Code 10161 Prerequisite(s) Computer Applications Introduction to Information Technology (recommended) Computer Information Technology

More information

Fast track to HTML & CSS 101 (Web Design)

Fast track to HTML & CSS 101 (Web Design) Fast track to HTML & CSS 101 (Web Design) Level: Introduction Duration: 5 Days Time: 9:30 AM - 4:30 PM Cost: 997.00 Overview Fast Track your HTML and CSS Skills HTML and CSS are the very fundamentals of

More information

Unlocking the Java EE Platform with HTML 5

Unlocking the Java EE Platform with HTML 5 1 2 Unlocking the Java EE Platform with HTML 5 Unlocking the Java EE Platform with HTML 5 Overview HTML5 has suddenly become a hot item, even in the Java ecosystem. How do the 'old' technologies of HTML,

More information

Essential HTML & CSS for WordPress. Mark Raymond Luminys, Inc. 949-654-3890 mraymond@luminys.com www.luminys.com

Essential HTML & CSS for WordPress. Mark Raymond Luminys, Inc. 949-654-3890 mraymond@luminys.com www.luminys.com Essential HTML & CSS for WordPress Mark Raymond Luminys, Inc. 949-654-3890 mraymond@luminys.com www.luminys.com HTML: Hypertext Markup Language HTML is a specification that defines how pages are created

More information

We automatically generate the HTML for this as seen below. Provide the above components for the teaser.txt file.

We automatically generate the HTML for this as seen below. Provide the above components for the teaser.txt file. Creative Specs Gmail Sponsored Promotions Overview The GSP creative asset will be a ZIP folder, containing four components: 1. Teaser text file 2. Teaser logo image 3. HTML file with the fully expanded

More information

WEB DEVELOPMENT IA & IB (893 & 894)

WEB DEVELOPMENT IA & IB (893 & 894) DESCRIPTION Web Development is a course designed to guide students in a project-based environment in the development of up-to-date concepts and skills that are used in the development of today s websites.

More information

aneb Perfekt perfektně.

aneb Perfekt perfektně. aneb Perfekt perfektně. 2013 se v angličtině nazývá Present Perfect, tedy Přítomný perfekt. Patří k časům přítomným, ačkoliv se jistě nejedná o klasický přítomný čas tak, jak jsme zvykĺı z češtiny. jistým

More information

HTML5 Standard and features. INF5750/ Lecture 6 (Part I)

HTML5 Standard and features. INF5750/ Lecture 6 (Part I) HTML5 Standard and features INF5750/9750 - Lecture 6 (Part I) Problem Area The core language of the World Wide Web is HTML The WWW is accessed through a number of devices Current HTML standard was designed

More information

WEB DESIGN COURSE CONTENT

WEB DESIGN COURSE CONTENT WEB DESIGN COURSE CONTENT INTRODUCTION OF WEB TECHNOLOGIES Careers in Web Technologies How Websites are working Domain Types and Server About Static and Dynamic Websites Web 2.0 Standards PLANNING A BASIC

More information

Introduction to Web Development

Introduction to Web Development Introduction to Web Development Week 2 - HTML, CSS and PHP Dr. Paul Talaga 487 Rhodes paul.talaga@uc.edu ACM Lecture Series University of Cincinnati, OH October 16, 2012 1 / 1 HTML Syntax For Example:

More information

HTML5 & CSS3. ( What about SharePoint? ) presented by @kyleschaeffer

HTML5 & CSS3. ( What about SharePoint? ) presented by @kyleschaeffer HTML5 & CSS3 ( What about SharePoint? ) presented by @kyleschaeffer The Agenda HTML5 What is it? What can it do? Does SharePoint do HTML5? CSS3 What is it? What can it do? Does SharePoint do CSS3? HTML5

More information

Prezentaci ukončíte stiskem klávesy ESC. GNU Emacs. Pavel Janík, CZLUG

Prezentaci ukončíte stiskem klávesy ESC. GNU Emacs. Pavel Janík, CZLUG Prezentaci ukončíte stiskem klávesy ESC. GNU Emacs Pavel Janík, CZLUG Editor nebo operační systém? Eight (eighty) megabytes and constantly swapping rozsáhlé možnosti jednoduché rozšiřování skvělá dokumentace

More information

HTML5 and CSS3. new semantic elements advanced form support CSS3 features other HTML5 features

HTML5 and CSS3. new semantic elements advanced form support CSS3 features other HTML5 features HTML5 and CSS3 new semantic elements advanced form support CSS3 features other HTML5 features fallback solutions HTML5 and CSS3 are new and evolving standards two levels of fallback different browsers

More information

Course: CSC 224 Internet Technology I (2 credits Compulsory)

Course: CSC 224 Internet Technology I (2 credits Compulsory) Course: CSC 224 Internet Technology I (2 credits Compulsory) Course Duration: Two hours per week for 15weeks, ((15 hours) Theory and (45 hours) Practical), as taught in 2010/2011 session Lecturer: Abikoye,

More information

Introduction to web development using XHTML and CSS. Lars Larsson. Today. Course introduction and information XHTML. CSS crash course.

Introduction to web development using XHTML and CSS. Lars Larsson. Today. Course introduction and information XHTML. CSS crash course. using CSS using CSS 1 using CSS 2 3 4 Lecture #1 5 6 using CSS Material using CSS literature During this, we will cover server side web with JavaServer Pages. JSP is an exciting technology that lets developers

More information

CREATING WEB PAGE WITH NOTEPAD USING HTML AND CSS

CREATING WEB PAGE WITH NOTEPAD USING HTML AND CSS CREATING WEB PAGE WITH NOTEPAD USING HTML AND CSS The following exercises illustrate the process of creating and publishing Web pages with Notepad, which is the plain text editor that ships as part of

More information

Module 6 Web Page Concept and Design: Getting a Web Page Up and Running

Module 6 Web Page Concept and Design: Getting a Web Page Up and Running Module 6 Web Page Concept and Design: Getting a Web Page Up and Running Lesson 3 Creating Web Pages Using HTML UNESCO EIPICT M6. LESSON 3 1 Rationale Librarians need to learn how to plan, design and create

More information

Web Authoring. www.fetac.ie. Module Descriptor

Web Authoring. www.fetac.ie. Module Descriptor The Further Education and Training Awards Council (FETAC) was set up as a statutory body on 11 June 2001 by the Minister for Education and Science. Under the Qualifications (Education & Training) Act,

More information

Web Application Developer s Guide for the SoundPoint IP/SoundStation IP Family

Web Application Developer s Guide for the SoundPoint IP/SoundStation IP Family Web Application Developer s Guide for the SoundPoint IP/SoundStation IP Family SIP 3.0.2 April, 2008 Edition 1725-17693-300 Rev. A SIP 3.0.2 Trademark Information Polycom, the Polycom logo design, SoundPoint

More information

HTML5 & CSS3. Jens Jäger Freiberuflicher Softwareentwickler JavaEE, Ruby on Rails, Webstuff Blog: www.jensjaeger.com Mail: mail@jensjaeger.

HTML5 & CSS3. Jens Jäger Freiberuflicher Softwareentwickler JavaEE, Ruby on Rails, Webstuff Blog: www.jensjaeger.com Mail: mail@jensjaeger. HTML5 & CSS3 and beyond Jens Jäger Freiberuflicher Softwareentwickler JavaEE, Ruby on Rails, Webstuff Blog: www.jensjaeger.com Mail: mail@jensjaeger.com 1 Content A short of history Html New Markup Webforms

More information

Lesson Review Answers

Lesson Review Answers Lesson Review Answers-1 Lesson Review Answers Lesson 1 Review 1. User-friendly Web page interfaces, such as a pleasing layout and easy navigation, are considered what type of issues? Front-end issues.

More information

any other form. the information on these sites is volatile and subject to constant changes. other records are created through these sites.

any other form. the information on these sites is volatile and subject to constant changes. other records are created through these sites. 1. Preface There are several arguments why websites must be archived. the content of intra/internet sites of public administrations can determine the acts and decisions of citizens and other services.

More information

HTML Forms and CONTROLS

HTML Forms and CONTROLS HTML Forms and CONTROLS Web forms also called Fill-out Forms, let a user return information to a web server for some action. The processing of incoming data is handled by a script or program written in

More information

Style & Layout in the web: CSS and Bootstrap

Style & Layout in the web: CSS and Bootstrap Style & Layout in the web: CSS and Bootstrap Ambient intelligence: technology and design Fulvio Corno Politecnico di Torino, 2014/2015 Goal Styling web content Advanced layout in web pages Responsive layouts

More information

Advanced Web Development SCOPE OF WEB DEVELOPMENT INDUSTRY

Advanced Web Development SCOPE OF WEB DEVELOPMENT INDUSTRY Advanced Web Development Duration: 6 Months SCOPE OF WEB DEVELOPMENT INDUSTRY Web development jobs have taken thе hot seat when it comes to career opportunities and positions as a Web developer, as every

More information

link Text

<a href=document URL... attributes-list>link Text</a> HTML LINKS: A link is specified using HTML tag . This tag is called anchor tag and anything between the opening tag and the closing tag becomes part of the link and a user can click that part

More information

Introduction to web development and JavaScript

Introduction to web development and JavaScript Objectives Chapter 1 Introduction to web development and JavaScript Applied Load a web page from the Internet or an intranet into a web browser. View the source code for a web page in a web browser. Knowledge

More information

Foundations. Web Development and Design. with HTML5. [Terry Ann Felke-Morris, Ed.D.J. 6th Edition. Harper College. Piyali Sengupta.

Foundations. Web Development and Design. with HTML5. [Terry Ann Felke-Morris, Ed.D.J. 6th Edition. Harper College. Piyali Sengupta. 6th Edition Web Development and Design Foundations with HTML5 [Terry Ann Felke-Morris, Ed.D.J Professor Harper College International Edition contributions by Piyali Sengupta PEARSON Boston Columbus Indianapolis

More information

Textbook s Website for Online Review of Each Chapter http://www.webdevfoundations.net

Textbook s Website for Online Review of Each Chapter http://www.webdevfoundations.net TAWEBDN 1A WEB DESIGN, First Semester #10099 (v.1.0) To the Student: After your registration is complete and your proctor has been approved, you may take the Credit by Examination for TAWEBDN 1A. WHAT

More information

Internet Technologies_1. Doc. Ing. František Huňka, CSc.

Internet Technologies_1. Doc. Ing. František Huňka, CSc. 1 Internet Technologies_1 Doc. Ing. František Huňka, CSc. Outline of the Course 2 Internet and www history. Markup languages. Software tools. HTTP protocol. Basic architecture of the web systems. XHTML

More information

Web Development and Design Foundations with HTML5

Web Development and Design Foundations with HTML5 8th Edition Web Development and Design Foundations with HTML5 Terry Ann Felke-Morris, Ed.D. Professor Emerita Harper College Boston Columbus Indianapolis New York San Francisco Upper Saddle River Amsterdam

More information

Web Design Specialist

Web Design Specialist UKWDA Training: CIW Web Design Series Web Design Specialist Course Description CIW Web Design Specialist is for those who want to develop the skills to specialise in website design and builds upon existing

More information

Outline. CIW Web Design Specialist. Course Content

Outline. CIW Web Design Specialist. Course Content CIW Web Design Specialist Description The Web Design Specialist course (formerly titled Design Methodology and Technology) teaches you how to design and publish Web sites. General topics include Web Site

More information

Upozorňujeme,že můžete formáty pro čtečky převádět ON-LINE na internetu do formátu PDF apod.

Upozorňujeme,že můžete formáty pro čtečky převádět ON-LINE na internetu do formátu PDF apod. Dobrý den, děkujeme za Nákup,níže máte odkazy pro bezplatné stažení.knihy jsou v archivech PDF(nepotřebujete čtečku e-knih),txt(nepotřebujete čtečku e-knih), a dále pro čtečky : soubory typu: PDB,MOBI,APNX

More information

HTML 4.01 Specification

HTML 4.01 Specification HTML 401 Specification HTML 401 Specification W3C Recommendation 24 December 1999 This version: http://wwww3org/tr/1999/rec-html401-19991224 (plain text [794Kb], gzip ed tar archive of HTML files [371Kb],

More information

HTML5 & Friends. And How They Change A Developer s Life

HTML5 & Friends. And How They Change A Developer s Life HTML5 & Friends And How They Change A Developer s Life Yang Piao yp@cmu.edu 2 HTML5? 3 What is HTML5 The markup language 5 th major version of HTML successor of HTML 4.01 Or a set of cutting-edge web technologies

More information

Contents. Downloading the Data Files... 2. Centering Page Elements... 6

Contents. Downloading the Data Files... 2. Centering Page Elements... 6 Creating a Web Page Using HTML Part 1: Creating the Basic Structure of the Web Site INFORMATION TECHNOLOGY SERVICES California State University, Los Angeles Version 2.0 Winter 2010 Contents Introduction...

More information

What is HTML? a)hyper Text Marking Language b) Hyper Text Machine Language c)hyper Text Middle Language d)hyper Text Markup Language

What is HTML? a)hyper Text Marking Language b) Hyper Text Machine Language c)hyper Text Middle Language d)hyper Text Markup Language ONE MARKS QUESTIONS What is HTML? a)hyper Text Marking Language b) Hyper Text Machine Language c)hyper Text Middle Language d)hyper Text Markup Language 1. In email address character is essential a) _

More information

Blueball First Class Sandvox Designs v2.0 Works with Sandvox 2+ only!

Blueball First Class Sandvox Designs v2.0 Works with Sandvox 2+ only! Blueball First Class Sandvox Designs v2.0 Works with Sandvox 2+ only! Overview and Usage Tips For Blueball First Class Sandvox 2 Designs Thank you for purchasing one of our original Sandvox Designs bundle.

More information

SUBJECT CODE : 4074 PERIODS/WEEK : 4 PERIODS/ SEMESTER : 72 CREDIT : 4 TIME SCHEDULE UNIT TOPIC PERIODS 1. INTERNET FUNDAMENTALS & HTML Test 1

SUBJECT CODE : 4074 PERIODS/WEEK : 4 PERIODS/ SEMESTER : 72 CREDIT : 4 TIME SCHEDULE UNIT TOPIC PERIODS 1. INTERNET FUNDAMENTALS & HTML Test 1 SUBJECT TITLE : WEB TECHNOLOGY SUBJECT CODE : 4074 PERIODS/WEEK : 4 PERIODS/ SEMESTER : 72 CREDIT : 4 TIME SCHEDULE UNIT TOPIC PERIODS 1. INTERNET FUNDAMENTALS & HTML Test 1 16 02 2. CSS & JAVASCRIPT Test

More information

Web Development and Design Foundations with HTML5

Web Development and Design Foundations with HTML5 7th Edition Web Development and Design Foundations with HTML5 Terry Ann Felke-Morris, Ed.D. Professor Harper College Boston Columbus Indianapolis New York San Francisco Upper Saddle River Amsterdam Cape

More information

Web Development CSE2WD Final Examination June 2012. (a) Which organisation is primarily responsible for HTML, CSS and DOM standards?

Web Development CSE2WD Final Examination June 2012. (a) Which organisation is primarily responsible for HTML, CSS and DOM standards? Question 1. (a) Which organisation is primarily responsible for HTML, CSS and DOM standards? (b) Briefly identify the primary purpose of the flowing inside the body section of an HTML document: (i) HTML

More information

HTML CSS Basic Structure. HTML Structure [Source Code] CSS Structure [Cascading Styles] DIV or ID Tags and Classes. The BOX MODEL

HTML CSS Basic Structure. HTML Structure [Source Code] CSS Structure [Cascading Styles] DIV or ID Tags and Classes. The BOX MODEL HTML CSS Basic Structure HTML [Hypertext Markup Language] is the code read by a browser and defines the overall page structure. The HTML file or web page [.html] is made up of a head and a body. The head

More information

IAS Web Development using Dreamweaver CS4

IAS Web Development using Dreamweaver CS4 IAS Web Development using Dreamweaver CS4 Information Technology Group Institute for Advanced Study Einstein Drive Princeton, NJ 08540 609 734 8044 * helpdesk@ias.edu Information Technology Group [2] Institute

More information

Enduring Understandings: Web Page Design is a skill that grows and develops throughout the careful planning and study of software and design.

Enduring Understandings: Web Page Design is a skill that grows and develops throughout the careful planning and study of software and design. Curriculum Map for Web Design SEPTEMBER Targeted NJ Core Curriculum Content Standards: Design develop, test, implement, update, and evaluate web solutions Technology Use, Media Literacy, Responsible Use

More information

10CS73:Web Programming

10CS73:Web Programming 10CS73:Web Programming Question Bank Fundamentals of Web: 1.What is WWW? 2. What are domain names? Explain domain name conversion with diagram 3.What are the difference between web browser and web server

More information

Web Designing with UI Designing

Web Designing with UI Designing Dear Student, Based upon your enquiry we are pleased to send you the course curriculum for Web Designing Given below is the brief description for the course you are looking for: Web Designing with UI Designing

More information

Web Design Basics. Cindy Royal, Ph.D. Associate Professor Texas State University

Web Design Basics. Cindy Royal, Ph.D. Associate Professor Texas State University Web Design Basics Cindy Royal, Ph.D. Associate Professor Texas State University HTML and CSS HTML stands for Hypertext Markup Language. It is the main language of the Web. While there are other languages

More information

HTML 4.0 Specification

HTML 4.0 Specification HTML 40 Specification REC-html40-19980424 HTML 40 Specification W3C Recommendation, revised on 24-Apr-1998 This version: http://wwww3org/tr/1998/rec-html40-19980424 Latest version: http://wwww3org/tr/rec-html40

More information

Entrance exam for PBA in Web Development

Entrance exam for PBA in Web Development Entrance exam for PBA in Web Development Fill out your personal details below. Full name: CPR-number: E-mail address: 1 PART I: Overall knowledge In this test you will find 35 questions covering different

More information

Advanced Web Design COURSE OUTLINE

Advanced Web Design COURSE OUTLINE Advanced Web Design COURSE OUTLINE 1. Course Title: Advanced Web Design 2. CBEDS Title: Other visual communications/graphics course 3. CBEDS Number: 5798 4. Job Titles: Web Design Technicians Desktop Publishers

More information

Coding Standards for Web Development

Coding Standards for Web Development DotNetDaily.net Coding Standards for Web Development This document was downloaded from http://www.dotnetdaily.net/ You are permitted to use and distribute this document for any noncommercial purpose as

More information

HTML, XHTML and CSS for Web Designers & Developers

HTML, XHTML and CSS for Web Designers & Developers HTML, XHTML and CSS for Web Designers & Developers Course ISI-1254 - Five Days - Instructor-led - Hands on Introduction This course will give any web programmer an extra edge of effectiveness on the job.

More information

Dreamweaver CS5. Module 1: Website Development

Dreamweaver CS5. Module 1: Website Development Dreamweaver CS5 Module 1: Website Development Dreamweaver CS5 Module 1: Website Development Last revised: October 29, 2010 Copyrights and Trademarks 2010 Nishikai Consulting, Helen Nishikai Oakland, CA

More information

YOUTUBE 4.0. Postup upgrade Youtube z Youtube 3.1 na Youtube 4.0 pro produkty EAGET X5R, M6, M7 a M9:

YOUTUBE 4.0. Postup upgrade Youtube z Youtube 3.1 na Youtube 4.0 pro produkty EAGET X5R, M6, M7 a M9: YOUTUBE 4.0 Postup upgrade Youtube z Youtube 3.1 na Youtube 4.0 pro produkty EAGET X5R, M6, M7 a M9: 1) V puštěném přehrávači EAGET zjistěte IP adresu vašeho zařízení (Nastavení - Systém - Síť - "IP adresa

More information

HTML and CSS 2 Class Meetings Instructor Contact Office Hours: Tuesdays 5:30-7:30 PM Online Email: Class Message List Opt Out of Class email

HTML and CSS 2 Class Meetings Instructor Contact Office Hours: Tuesdays 5:30-7:30 PM Online Email: Class Message List Opt Out of Class email HTML and CSS 2 CS50.11A Summer 201 Syllabus Instructor : Corrine Haverinen Class Meetings This class is accelerated for summer. There will be two lectures and assignments per week. There will not be live

More information

A MODEL FOR THE AUTOMATION OF HTML FORM CREATION AND VALIDATION. Keywords: html, form, web, automation, validation, class, model.

A MODEL FOR THE AUTOMATION OF HTML FORM CREATION AND VALIDATION. Keywords: html, form, web, automation, validation, class, model. A MODEL FOR THE AUTOMATION OF HTML FORM CREATION AND VALIDATION Abstract Dragos-Paul Pop 1 Adam Altar 2 Forms are an essential part of web applications, but handling large forms proves to be very time

More information

FOUNDATION OF INFORMATION TECHNOLOGY Class-X (TERM II)

FOUNDATION OF INFORMATION TECHNOLOGY Class-X (TERM II) Sample Question Paper FOUNDATION OF INFORMATION TECHNOLOGY Class-X (TERM II) TIME : 3 Hrs MM : 80. SECTION A 1. Fill in the blanks: [10] 1.1 is the extension of an XML file. 1.2 attribute is used with

More information

Lesson Overview. Getting Started. The Internet WWW

Lesson Overview. Getting Started. The Internet WWW Lesson Overview Getting Started Learning Web Design: Chapter 1 and Chapter 2 What is the Internet? History of the Internet Anatomy of a Web Page What is the Web Made Of? Careers in Web Development Web-Related

More information

Luk aˇ s R uˇ ziˇ cka Pomocn a slovesa

Luk aˇ s R uˇ ziˇ cka Pomocn a slovesa Pomocná slovesa Přehled funkcí Leden 2013 Přehled funkcí 1 děje probíhající právě ted 2 děje probíhající, ale ne nutně právě ted 3 děje probíhající dočasně 4 budoucí použití (pevná dohoda) Děje probíhající

More information

Chapter 1 Introduction to web development and PHP

Chapter 1 Introduction to web development and PHP Chapter 1 Introduction to web development and PHP Murach's PHP and MySQL, C1 2010, Mike Murach & Associates, Inc. Slide 1 Objectives Applied 1. Use the XAMPP control panel to start or stop Apache or MySQL

More information

Garfield Public Schools Fine & Practical Arts Curriculum Web Design

Garfield Public Schools Fine & Practical Arts Curriculum Web Design Garfield Public Schools Fine & Practical Arts Curriculum Web Design (Half-Year) 2.5 Credits Course Description This course provides students with basic knowledge of HTML and CSS to create websites and

More information

Introduction to XHTML. 2010, Robert K. Moniot 1

Introduction to XHTML. 2010, Robert K. Moniot 1 Chapter 4 Introduction to XHTML 2010, Robert K. Moniot 1 OBJECTIVES In this chapter, you will learn: Characteristics of XHTML vs. older HTML. How to write XHTML to create web pages: Controlling document

More information

Introduction to Web Development with Dreamweaver

Introduction to Web Development with Dreamweaver ITS Training Introduction to Web Development with Dreamweaver In this Workshop In this workshop you will be introduced to HTML basics and using Dreamweaver to create and edit web files. You will learn

More information

Missing cat website HTML&CSS. The Mission:

Missing cat website HTML&CSS. The Mission: Missing cat website HTML&CSS 1 All Code Clubs must be registered. Registered clubs appear on the map at codeclubworld.org - if your club is not on the map then visit jumpto.cc/ccwreg to register your club.

More information

CIS 467/602-01: Data Visualization

CIS 467/602-01: Data Visualization CIS 467/602-01: Data Visualization HTML, CSS, SVG, (& JavaScript) Dr. David Koop Assignment 1 Posted on the course web site Due Friday, Feb. 13 Get started soon! Submission information will be posted Useful

More information

Applying the Corporate Identity to the Web WEB GUIDELINES

Applying the Corporate Identity to the Web WEB GUIDELINES $SSO\LQJWKH&RUSRUDWH,GHQWLW\WRWKH:HE Learning Technology Section WHY HAVE A WEB CORPORATE IDENTITY? 1 1. Competitive Market Place 1 2. Complex Target Audience 1 3. Usability 1 4. Maintenance 1 WHAT IS

More information

Agenda. 1. ZAPms Konzept. 2. Benutzer-Kontroller. 3. Laout-Aufbau. 4. Template-Aufbau. 6. Konfiguration. 7. Module.

Agenda. 1. ZAPms Konzept. 2. Benutzer-Kontroller. 3. Laout-Aufbau. 4. Template-Aufbau. 6. Konfiguration. 7. Module. Agenda. ZAPms Konzept.. Benutzer-Kontroller.. Laout-Aufbau.. Template-Aufbau. 5. Bildergalerie (Beispiel). 6. Konfiguration. 7. Module. . ZAPms Konzept Benutzer Web Server Benutzer-Kontroller www.domain/index.php

More information

HAML und SASS. (und COMPASS) markup haiku vs. syntactically awesome stylesheets. Tobias Adam, Jan Krutisch mindmatters GmbH & Co.

HAML und SASS. (und COMPASS) markup haiku vs. syntactically awesome stylesheets. Tobias Adam, Jan Krutisch mindmatters GmbH & Co. Mit hotfixes von Carsten Bormann 2011-02-28, 2012-03-13 HAML und SASS (und COMPASS) markup haiku vs. syntactically awesome stylesheets Tobias Adam, Jan Krutisch mindmatters GmbH & Co. KG HAML (X)HTML Abstraction

More information

Welcome to CSE 330 Crea0ve Progamming and Rapid Prototyping. Course Informa0on

Welcome to CSE 330 Crea0ve Progamming and Rapid Prototyping. Course Informa0on Welcome to CSE 330 Crea0ve Progamming and Rapid Prototyping 1 Extensible - CSE 330 Creative Networking Programming Platform and Rapid Prototyping 1 Course Informa0on Instructor Todd Sproull todd@wustl.edu

More information

HTML5 & CSS 8 th Edition. Chapter 3 Enhancing a Website with Links and Images

HTML5 & CSS 8 th Edition. Chapter 3 Enhancing a Website with Links and Images HTML5 & CSS 8 th Edition Chapter 3 Enhancing a Website with Links and Images Chapter Objectives 1. Describe types of hyperlinks 2. Create relative links, absolute links, email links, and telephone links

More information

Note; Sample Analysis, names and product type changed to protect privacy

Note; Sample Analysis, names and product type changed to protect privacy www.sastrugimarketing.com 720.524.3609 P.O. Box 632238, Littleton, CO 80163 Note; Sample Analysis, names and product type changed to protect privacy Acme Company Site Analysis, November 2011: Performed

More information

aneb Perfektní minulost.

aneb Perfektní minulost. aneb Perfektní minulost. 2013 se v angličtině nazývá Past Perfect. Používáme jej tehdy, potřebujeme-li jasně vyjádřit, že nějaký děj proběhl ještě dříve než minulý děj, o kterém hovoříme. Podívejme se

More information

core HyperText Markup Language (HTML) Designing Documents for the World Wide Web

core HyperText Markup Language (HTML) Designing Documents for the World Wide Web core Web programming HyperText Markup Language (HTML) Designing Documents for the World Wide Web 1 2001-2003 Marty Hall, Larry Brown http:// Agenda Introduction to HTML Creating and publishing a Web page

More information

Advanced Web Design. Zac Van Note. www.design-link.org

Advanced Web Design. Zac Van Note. www.design-link.org Advanced Web Design Zac Van Note www.design-link.org COURSE ID: CP 341F90033T COURSE TITLE: Advanced Web Design COURSE DESCRIPTION: 2/21/04 Sat 9:00:00 AM - 4:00:00 PM 1 day Recommended Text: HTML for

More information

Programming exercises (Assignments)

Programming exercises (Assignments) Course 2013 / 2014 Programming exercises (Assignments) TECHNOLOGIES FOR DEVELOPING WEB USER INTERFACES Websites (HTML5 and CSS3) Table of contents Technologies for developing web user interfaces... 1 Websites

More information

Introduction to Dreamweaver

Introduction to Dreamweaver Introduction to Dreamweaver ASSIGNMENT After reading the following introduction, read pages DW1 DW24 in your textbook Adobe Dreamweaver CS6. Be sure to read through the objectives at the beginning of Web

More information

Getting Started with KompoZer

Getting Started with KompoZer Getting Started with KompoZer Contents Web Publishing with KompoZer... 1 Objectives... 1 UNIX computer account... 1 Resources for learning more about WWW and HTML... 1 Introduction... 2 Publishing files

More information

Chapter 1. Introduction to web development

Chapter 1. Introduction to web development Chapter 1 Introduction to web development HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 1 Objectives Applied 1. Load a web page from the Internet or an intranet into a web browser.

More information

USER S MANUAL JOOMLA! GOVERNMENT WEB TEMPLATE

USER S MANUAL JOOMLA! GOVERNMENT WEB TEMPLATE USER S MANUAL JOOMLA! GOVERNMENT WEB TEMPLATE 1 TABLE OF CONTENTS Introduction 3 Parts of the Government Web Template (GWT) 4 Logging In and Getting Started 5 GWT Joomla! Module Map 8 Editing the Top Bar

More information

Please select one of the topics below.

Please select one of the topics below. Thanks for choosing WYSIWYG Web Builder! In this section we will give a short introduction to Web Builder so you can start building your web site in (almost) no time. Please select one of the topics below.

More information

Course Information Course Number: IWT 1229 Course Name: Web Development and Design Foundation

Course Information Course Number: IWT 1229 Course Name: Web Development and Design Foundation Course Information Course Number: IWT 1229 Course Name: Web Development and Design Foundation Credit-By-Assessment (CBA) Competency List Written Assessment Competency List Introduction to the Internet

More information

This document will describe how you can create your own, fully responsive. drag and drop email template to use in the email creator.

This document will describe how you can create your own, fully responsive. drag and drop email template to use in the email creator. 1 Introduction This document will describe how you can create your own, fully responsive drag and drop email template to use in the email creator. It includes ready-made HTML code that will allow you to

More information

Web Design and Development ACS-1809

Web Design and Development ACS-1809 Web Design and Development ACS-1809 Chapter 1 9/9/2015 1 Pre-class Housekeeping Course Outline Text book : HTML A beginner s guide, Wendy Willard, 5 th edition Work on HTML files On Windows PCs Tons of

More information

Web Publishing Basics 2

Web Publishing Basics 2 Web Publishing Basics 2 HTML and CSS Coding Jeff Pankin pankin@mit.edu Information Services and Technology Contents Course Objectives... 2 Creating a Web Page with HTML... 3 What is Dreamweaver?... 3 What

More information

Dreamweaver CS5. Module 2: Website Modification

Dreamweaver CS5. Module 2: Website Modification Dreamweaver CS5 Module 2: Website Modification Dreamweaver CS5 Module 2: Website Modification Last revised: October 31, 2010 Copyrights and Trademarks 2010 Nishikai Consulting, Helen Nishikai Oakland,

More information