2-Lec 2-3- HTMLof software engineering.pptx

hyml

1. OVERVIEW Website creation roles Equipment Software

2. Website Creation Roles Content Design Coding: Frontend Coding: Backend

3. Content Information architecture Organizes content logically for ease of findability Content strategy Ensures that text supports the brand/marketing goals; may include data modeling and updating schedules as well as extending brand voice to social media

4. Design User Experience (UX) Makes sure whole experience with the site and the product is favorable based on user testing Interaction Design (IxD) Focuses on how to use the site, including its User Interface (UI) Visual Design Creates the “look and feel” of the site

5. Coding: Frontend Development Authoring/Markup (HTML) Styling (CSS) JavaScript and DOM Scripting Frameworks

6. Coding: Backend Development Server software (ex: Apache, MS IIS) Web application languages (ex: PHP, Ruby, .NET) Database software (ex: MySQL, Oracle)

7. Other Web Roles Product manager Guides product in a way that meets business goals Project manager Coordinates team, schedule, and processes SEO specialist Ensures site is highly ranked in web searches Multimedia producer Creates sound, video, animation, and interactive media.

8. OVERVIEW The internet vs. the web History of the web What servers do What browsers do URLs How web pages are constructed

9. Internet vs. Web internet International network of connected computers protocol A standardized method for transferring data or documents over a network (for example, FTP, STMP, HTTP) web Information shared over the internet using the Hypertext Transfer Protocol (HTTP), which is one of many ways to share information over the internet

10. A Brief History of the Web Started at CERN, a particle physics lab in Geneva, Switzerland 1989: Tim Berners-Lee proposed a system for sharing documents via “hyperlinks” 1990: Prototypes built, first by Tim B-L, then Robert Cailliau 1992: Approximately 25 servers worldwide 1993: Web opened up for commercial use

11. The Web Server server A program that delivers documents and data on request web server Any computer running web server software

12. . IP address A unique number assigned to a device connected to the internet (IP = Internet Protocol). Example: 199.27.145.64 Domain Name System (DNS) A system that allows internet users to refer to servers by name rather than number Domain name A name assigned to a web server (easier to use than IP numbers). Example: oreilly.com DNS server A server that matches domain names to their respective IP addresses The Web Server (cont’d)

13. The Browser The software that requests data or documents from the web server Also referred to as the client or user agent Could be on a desktop machine, smartphone, other connected device, or an assistive device such as a screen reader The program in the browser that interprets HTML/CSS/JavaScript is called the rendering engine

14. Server-side vs. Client-side Indicates which machine is doing the processing: Client-side applications run on the user’s machine Server-side applications use the processing power of the server

15. Web Page Addresses (URLs) URL = Uniform Resource Locator Every page and resource on the web has its own URL

16. Identifies the protocol as “web” (HTTP) Identifies the site by its domain name Path through directories on the server to the target file Parts of a URL

17. The protocol is implied and will be added by browser Domain name is identified If there is no path or filename, it means the URL is pointing to a default file (usually index.html ) What’s Going On with Simple URLs http:// example.com /index.html

18. Anatomy of a Web Page The page you see in the browser window is nearly always made up of multiple files, including: An HTML document (gives the content structure) Style sheets (describes how it should look) Images and other media (embedded on the page on the fly) Scripts (add behaviors and functionality)

19. A Web Page and Its Components

20. What Style Sheets Do Browser’s default rendering Simple style sheet applied

21. Web Page Assembly Process Request a page using its URL Browser sends HTTP request to server Server returns the file (or a “404 Not Found” message) Browser looks at the HTML document. If there are external files (like images or style sheets), it contacts the server again for each resource The server returns the additional files, and the browser assembles the final page

22. Multitude of devices Web standards Progressive enhancement Responsive web design Accessibility Site performance

23. A Multitude of Devices Your web pages will be viewed on all manner of devices, large and small, fast and slow, visual and non-visual. One of the challenges of being a web designer is creating a good experience regardless of the browsing device. Brad Frost’s depiction of the web viewing environment.

24. Web Standards The World Wide Web Consortium (W3C) writes the specifications for web technologies: w3.org/standards Sticking with web standards ensures consistency across browsers and forward-compatability .

25. Progressive Enhancement Progressive enhancement is a strategy for coping with unknown browser capabilities. Start with baseline experience that provides content and basic functionality even on minimal browsers and assistive devices Layer on styles, scripts, and advanced features for browsers that can handle them Finish with “nice to have” effects (like animation) that aren’t critical to the brand or functionality

26. Progressive Enhancement (cont’d) HTML strategy Write in a logical order, with elements marked up in a meaningful way Style strategy Use universally supported properties as the baseline and add cutting-edge styles as embellishment Scripting strategy Make sure basic functionality (like content display, linking, and forms) are possible when JavaScript is turned off. Enhance the experience when JavaScript is available

27. Responsive Web Design Responsive web design is a strategy for dealing with unknown screen size: The heart of the method is using one HTML source for all devices and swapping out the styles based on the size of the browser window (viewport) It is preferred to building separate sites just for mobile devices (“m.dot” sites) It may not be the solution for all sites, but making sites that adapt to screen size is now common practice

28. Responsive Web Design (cont’d) Page layout changes based on the width of the screen.

29. Site Performance It is critical that web pages display as quickly as possible. Users on mobile devices generally leave a page if it does not display in 3 seconds. Even milliseconds can affect the bottom line on retail sites.

30. Site Performance Tips Make image files as small as possible. Streamline HTML markup. Keep JavaScript to a minimum. Add scripts in a way that they don’t block page rendering. Don’t load unnecessary assets. Reduce the number of times the browser makes requests of the server.

31. Site Performance Tools Use a waterfall chart to see what assets are downloading for your page and how many milliseconds they take. This tool is built into the Chrome browser (Developer > Developer Tools).

32. Attendance

33. 4 CREATING A SIMPLE PAGE (HTML OVERVIEW)

34. How markup works: Elements and attributes Minimal HTML document structure Identifying text elements: Block and inline Troubleshooting and validating HTML

35. Content Without Markup Without HTML markup to describe content structure, text runs together; line breaks are ignored: Black Goose Bistro The Restaurant The Black Goose Bistro offers casual lunch and dinner fare in a relaxed atmosphere. The menu changes regularly to highlight the freshest local ingredients. Catering You have fun. We'll handle the cooking. Black Goose Catering can handle events from snacks for a meetup to elegant corporate fundraisers. Location and Hours Seekonk, Massachusetts; Monday through Thursday 11am to 9pm; Friday and Saturday, 11am to midnight

36. What Browsers Ignore Multiple character spaces (white space) Line breaks (carriage returns) Tabs Unrecognized markup

37. Markup Basics Text must be marked up meaningfully and accurately ( semantically ) with HTML tags: Browsers need markup to display content correctly. Markup makes content elements available to scripts and style rules. Markup aids search engines.

38. Anatomy of an HTML Element tag The element name in angle brackets element The content and its markup (start and end tags)

39. Some Elements Are Empty Some elements have no content and provide a simple directive. They are called empty elements :

40. Attributes Attributes are instructions that clarify or modify an element. They appear in the opening tag after the element name: < element attribute =" value " >Content</ element > <a href=" http://oreilly.com " >O’Reilly site</a>

41. Attributes (cont’d) There can be more than one attribute in a tag: They are separated by spaces and can go in any order.

42. Attributes (cont’d) Most attributes take values, which follow an = sign; some are single descriptive words. A value might be a number, word, string of text, URL, or measurement. Quotation marks aren’t strictly required but are recommended for consistency. Single or double quotation marks are okay. Attribute names and values are defined in the HTML specification. Some attributes are required.

43. Nesting Elements Putting elements inside other elements is called nesting . Make sure closing tags don’t overlap: <div> <h1> Headline </h1> <p> This is <em> emphasized </em> text. </p> </div>

44. HTML Comments To leave a note in an HTML document, mark it up as a comment : <!-- start global navigation --> <ul> … </ul> <!-- end global navigation and begin the main header for content page --> Text between <!-- and --> won’t display in the browser. Keep in mind that they are still visible in the source.

45. Minimal Document Structure It is recommended that HTML documents have the following minimal structure: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> Title here </title> </head> <body> <!-- Page content goes here.--> </body> </html>

46. Minimal Document Structure (cont’d) The DOCTYPE declaration lets browsers know that the document is written according to the HTML5 specification: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Title here</title> </head> <body> [Page content goes here.] </body> </html>

47. Minimal Document Structure (cont’d) The html element is the root element that contains all the elements in the document: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Title here</title> </head> <body> [Page content goes here.] </body> </html>

48. Minimal Document Structure (cont’d) The head element contains elements that pertain to the document and are not rendered as content, such as title , metadata , style sheets , and scripts : <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Title here</title> </head> <body> [Page content goes here.] </body> </html>

49. Minimal Document Structure (cont’d) meta elements provide document metadata . In this case, it says that the document uses an expanded character set (UTF-8). It could also provide keywords, author information, publishing status, and more: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Title here</title> </head> <body> [Page content goes here.] </body> </html>

50. Minimal Document Structure (cont’d) The title element is required. Titles display in the browser tab and bookmark lists, and are used by search engines: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> Title here </title> </head> <body> [Page content goes here.] </body> </html>

51. Minimal Document Structure (cont’d.) The body element contains the content of the document. The content is everything you want to show up in the browser window: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Title here</title> </head> <body> [Page content goes here.] </body> </html>

52. A Structured Document With the document structure in place, there is a title in the browser tab, but the content is still unstructured. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Black Goose Bistro</title> </head> <body> Black Goose Bistro The Restaurant The Black Goose Bistro offers casual lunch and dinner fare in a relaxed atmosphere. The menu changes regularly to highlight the freshest local ingredients. … Location and Hours Seekonk, Massachusetts; Monday through Thursday 11am to 9pm; Friday and Saturday, 11am to midnight </body> </html>

53. Marking Up Content The purpose of HTML is to add meaning and structure to the content. This is called semantic markup . It is not intended to describe how the content should look (its presentation). The way elements relate to one another forms an outline-like structure called the DOM (Document Object Model) . The DOM is the foundation on which you apply styles and scripts.

54. Basic Text Elements With headings ( <h1> ) and paragraphs ( <p> ) identified, the browser can display the content appropriately: … <body> <h1> Black Goose Bistro </h1> <h2> The Restaurant </h2> <p> The Black Goose Bistro offers casual lunch and dinner fare in a relaxed atmosphere. The menu changes regularly to highlight the freshest local ingredients. </p> <!--more content--> </body>

55. Block and Inline Elements Block elements Major components of the page that display like rectangular blocks stacking up on the page Example: headings, paragraphs, long quotations Inline elements Appear within the text flow of a block element Example: emphasized text, links, abbreviations

56. Block and Inline Elements (cont’d) Block elements (headings, paragraphs) outlined in RED . Inline element (emphasized text) outlined in BLUE .

57. Style Sheets HTML only describes structure, not presentation Presentation is controlled by style sheets (CSS) Browsers have their own style sheets (user agent style sheets) with default styles for HTML elements You can write your own styles to override the default styles

58. Style Sheets (cont’d) Margin around page Headings bold and large Space added above block elements Emphasized text in italic font The browser parsed the markup and used its built-in style sheet to format the text elements in the example:

59. Troubleshooting HTML Small mistakes and missing characters can cause HTML documents to “break.” Common mishaps: Missing closing tag (or / in closing tag) Missing closing bracket in a tag Missing quotation mark around an attribute value Not saving your document before viewing changes in the browser

60. Troubleshooting (cont’d) When a slash is omitted, the browser doesn’t know when the element ends:

61. Troubleshooting (cont’d) A missing end bracket makes the browser interpret all the following characters as part of the tag:

62. Validating Your Documents Validate a document to make sure that you have abided by the HTML rules and that there are no errors: Include the DOCTYPE declaration Indicate the character encoding Include required attributes Don’t use non-standard elements Don’t mismatch tags Nest elements correctly (no overlaps) Check for typos and other minor errors

63. Validating Your Documents Use a validator tool like the one at html5.validator.nu . Upload a document or provide a link, and the validator returns an error report.

64. 5 MARKING UP TEXT

65. General block elements Breaks Lists Page organizing elements Inline elements Generic elements ARIA introduction Escaping characters

66. Markup Tips It is important to mark up content semantically, in a way that accurately describes the content’s meaning or function. This ensures your content is accessible in the widest range of viewing environments: Desktop and mobile browsers Assistive reading devices Search engine indexers

67. Paragraphs <p> </p> Paragraphs are the most rudimentary elements in a text document. <p> Serif typefaces have small slabs at the ends of letter strokes. In general, serif fonts can make large amounts of text easier to read. </p> <p> Sans-serif fonts do not have serif slabs; their strokes are square on the end. Helvetica and Arial are examples of sans-serif fonts. In general, sans-serif fonts appear sleeker and more modern. </p>

68. Headings <h#> </h#> There are six levels of headings ( h1 to h6 ). <h1> Top-Level Heading </h1> <p>This is a regular paragraph that will display at the browser's default font size and weight for comparison.</p> <h2> Second-Level Heading </h2> <h3> Third-Level heading </h3> <p>This is another paragraph for comparison. Of course, you can change the presentation of all of these elements with your own style sheets.</p> <h4> Fourth Level Heading </h4> <h5> Fifth Level Heading </h5> <h6> Sixth-Level Heading </h6> <p>This is another paragraph to show the default relationship of headings to body paragraphs. Of course, you can change the presentation of all of these elements with your own style sheets.</p>

69. Headings (cont’d) h1 h2 h3 h4 h5 h6

70. Headings (cont’d) Used to create the document outline. Help with accessibility and search engine indexing. Recommended to start with h1 and add subsequent levels in logical order. Don’t choose headings based on how they look; use a style sheet to change them.

71. Long Quotations (blockquotes) <p>Renowned type designer, Matthew Carter, has this to say about his profession:</p> <blockquote> <p>Our alphabet hasn't changed in eons; there isn't much latitude in what a designer can do with the individual letters.</p> <p>Much like a piece of classical music, the score is written down. It's not something that is tampered with, and yet, each conductor interprets that score differently. There is tension in the interpretation.</p> </blockquote> <blockquote> </blockquote>

72. Preformatted Text <pre> </pre> Preformatted text preserves white space when it is important for conveying meaning. By default, pre text displays in a constant-width font, such as Courier. <pre> This is an example of text with a lot of curious whitespace. </pre>

73. Line Breaks <br> The empty br element inserts a line break. <p>So much depends <br> upon <br><br> a red wheel <br> barrow</p>

74. Thematic Breaks (Horizontal Rules) <hr> Indicates one topic has completed and another one is beginning. Browsers display a horizontal rule (line) in its place: <h3>Times</h3> <p>Description and history of the Times typeface.</p> <hr> <h3>Georgia</h3> <p>Description and history of the Georgia typeface.</p>

75. Lists There are three types of lists in HTML: Unordered lists Ordered lists Description lists

76. Unordered Lists In unordered lists items may appear in any order (examples, names, options, etc.). Most lists fall into this category. <ul> </ul> Defines the whole list <li> </li> Defines each list item

77. Unordered Lists (cont’d) <ul> <li> Serif </li> <li> Sans-serif </li> <li> Script </li> <li> Display </li> <li> Dingbats </li> </ul> You can change the appearance of the list dramatically with style sheet rules.

78. Ordered Lists In ordered lists items occur in a particular order, such as step-by-step instructions or driving directions. <ol> </ol> Defines the whole list <li> </li> Defines each list item

79. Ordered Lists (cont’d.) <ol> <li> Gutenberg develops moveable type (1450s) </li> <li> Linotype is introduced (1890s) </li> <li> Photocomposition catches on (1950s) </li> <li> Type goes digital (1980s) </li> </ol>

80. Description Lists Description lists are used for any type of name/value pairs , such as terms/definitions, questions/answers, etc. <dl> </dl> Defines the whole list <dt> </dt> Defines a name, such as a term <dd> </dd> Defines a value, such as a definition

81. Description Lists (cont’d) <dl> <dt> Linotype </dt> <dd> Line-casting allowed type to be selected, used, then recirculated into the machine automatically. This advance increased the speed of typesetting and printing dramatically. </dd> <dt> Photocomposition </dt> <dd> Typefaces are stored on film then projected onto photo-sensitive paper. Lenses adjust the size of the type. </dd> </dl>

82. Page Organizing Elements HTML5 introduced elements that give meaning to the typical sections of a web page: main header footer section article aside nav

83. Main Content <main> </main> Identifies the primary content of a page or application Helps users with screen readers get to the main content of the page Requires JavaScript workaround in Internet Explorer <body> <header>…</header> <main> <h1>Humanist Sans Serif</h1> …content continues… </main> </body>

84. Headers and Footers <header> </header> <footer> </footer> header identifies the introductory material that comes at the beginning of a page, section, or article (logo, title, navigation, etc.). footer indicates the type of information that comes at the end of a page, section, or article (author, copyright, etc.)

85. Headers and Footers (cont’d) <article> <header> <h1>More about WOFF</h1> <p>by Jennifer Robbins, <timedatetime="2017-11-11"> November 11, 2017</time></p> </header> <!-- ARTICLE CONTENT HERE --> <footer> <p><small>Copyright &copy;2017 Jennifer Robbins.</small></p> <nav> <ul> <li><a href="/">Previous</a></li> <li><a href="/">Next</a></li> </ul> </nav> </footer> </article>

86. Sections <section> </section> section identifies thematic section of a page or an article. It can be used to divide up a whole page or a single article: <section> <h2>Typography Books</h2> <ul> <li>…</li> </ul> </section> <section> <h2>Online Tutorials</h2> <p>These are the best tutorials on the Web.</p> <ul> <li>…</li> </ul> </section>

87. Articles <article> </article> article is used for self-contained works that could stand alone or be used in a different context (such as syndication). Useful for magazine/newspaper articles, blog posts, comments, etc. <article> <h1>Get to Know Helvetica</h1> <section> <h2>History of Helvetica</h2> <p>…</p> </section> <section> <h2>Helvetica Today</h2> <p>…</p> </section> </article>

88. Aside (Sidebar) <aside> </aside> aside identifies content that is separate from but tangentially related to the surrounding content (think of it as a sidebar). <h1>Web Typography</h1> <p>Back in 1997, there were competing font formats and tools for making them…</p> <p>We now have a number of methods for using beautiful fonts on web pages…</p> <aside> <h2>Web Font Resources</h2> <ul> <li><a href="http://typekit.com/">Typekit</a></li> <li><a href="http://fonts.google.com">Google Fonts</a></li> </ul> </aside>

89. Navigation <nav> </nav> nav identifies the primary navigation for a site or lengthy section or article. It provides more semantic meaning than a simple unordered list. <nav> <ul> <li><a href="/">Serif</a></li> <li><a href="/">Sans-serif</a></li> <li><a href="/">Script</a></li> <li><a href="/">Display</a></li> <li><a href="/">Dingbats</a></li> </ul> </nav>

90. Inline Elements Called text-level semantic elements in the spec. Describe the types of elements that appear in the flow of text. a em strong q abbr cite dfn code var samp kbd sub/sup mark time data ins/del b i s u small bdi/bdo data span

91. Inline Elements Emphasis <em> </em> Text that should be emphasized. Usually displayed in italics. <p> <em> Arlo </em> is very smart.</p> <p>Arlo is <em> very </em> smart.</p> <strong></strong> Text that is important, serious, or urgent. Usually displayed in bold. <p>When returning the car, <strong> drop the keys in the red box by the front desk </strong> .</p> TIP: Use these elements semantically, not to achieve font styles. Think of how it would be read with a screen reader.

92. Inline Elements Short Quotations <q> </q> For quoted phrases in the flow of text. Browsers add appropriate quotation marks automatically. <p>Matthew Carter says, <q> Our alphabet hasn't changed in eons. </q> </p>

93. Inline Elements Abbreviations and Acronyms <abbr> </abbr> The title attribute provides the long version of a shortened term, which is helpful for search engines and assistive devices. <abbr title="Points" > pts. </abbr> <abbr title="American Type Founders" > ATF </abbr>

94. Inline Elements Superscript and Subscript   Causes the selected text to display in a smaller size and slightly above ( sup ) or below ( sub ) the baseline. <p>H ₂ 0</p> <p>E=MC ² </p>

95. Inline Elements Citations <cite> </cite> Identifies a reference to another document. <p>Passages of this article were inspired by <cite> The Complete Manual of Typography </cite> by James Felici.</p>

96. Inline Elements Defining Terms <dfn> </dfn> Identifies the first and defining instance of a word in a document. There is no default rendering, so you need to format them using style sheets. <p> <dfn> Script typefaces </dfn> are based on handwriting.</p>

97. Inline Elements Code-Related Elements <code> </code> Code in the flow of text <var> </var> Variables <samp> </samp> Program sample <kbd> </kbd> User-entered keyboard strokes

98. Inline Elements New Semantic Definitions for Old Presentational Inline Elements <b> </b> Phrases that need to stand out without added emphasis or importance ( bold ) <i> </i> Phrases in a different voice or mood than the surrounding text (i talic ) <s> </s> Text that is incorrect ( strike-through ) <u> </u> Underlined text, when underlining has semantic purpose <small> </small> Addendum or side note ( smaller text size )

99. Inline Elements Highlighted Text <mark> </mark> For phrases that may be particularly relevant to the reader (for example, when displaying search results): <p> ... PART I. ADMINISTRATION OF THE GOVERNMENT. TITLE IX. TAXATION. CHAPTER 65C. MASS. <mark> ESTATE TAX </mark> . Chapter 65C: Sect. 2. Computation of <mark> estate tax </mark> .</p>

100. Inline Elements Dates and Times <time> </time> Provides machine-readable equivalents for dates and times. The datetime attribute specifies the date/time information in a standardized time format: <time datetime="1970-09-05T01:11:00"> Sept.5, 1970, 1:11a.m. </time>

101. Inline Elements Machine-Readable Information <data> </data> Helps computers make sense of content. The value attribute provides the machine-readable information. <data value="12"> Twelve </data> <data value="978-1-449-39319-9" > CSS: The Definitive Guide </data>

102. Inline Elements Inserted and Deleted Content <ins> </ins> <del> </del> Markup for edits indicating parts of a document that have been inserted or deleted: Chief Executive Officer: <del title="retired" > Peter Pan </del><ins> Pippi Longstocking </ins>

103. Generic Elements <div> </div> Indicates division of content (generally block-level) <span> </span> Indicates a word or phrase Generic elements are given semantic meaning with the id and class attributes. They are useful for creating “hooks” for scripts and style rules.

104. Div Example Use the div element to create a logical grouping of content or elements on the page. It indicates that they belong together in some sort of conceptual unit or should be treated as a unit by CSS or JavaScript. <div class="listing" > <img src="images/felici-cover.gif" alt=""> <p><cite>The Complete Manual of Typography</cite>, James Felici</p> <p>A combination of type history and examples of good and bad type design.</p> </div>

105. Span Example Use the span element for text and other inline elements for which no existing inline element currently exists. In this example, a span is used to add semantic meaning to telephone numbers: <ul> <li>John: <span class="tel" > 999.8282 </span> </li> <li>Paul: <span class="tel" > 888.4889 </span> </li> <li>George: <span class="tel" > 888.1628 </span> </li> <li>Ringo: <span class="tel" > 999.3220 </span> </li> </ul>

106. id and class Attributes id Assigns a unique identifier to the element. class Classifies elements into a conceptual group. Use the id attribute to identify. Use the class attribute to classify. NOTE: id and class can be used with all HTML elements.

107. The id Attribute The value of an id attribute must be used only once in a document. Here it identifies a listing for a particular book by its ISBN: <div id="ISBN0321127307" > <img src="felici-cover.gif" alt=""> <p><cite>The Complete Manual of Typography</cite>, James Felici</p> <p>A combination of type history …</p> </div> Here it identifies a particular section of a document: <section id="news" > <!-- news items here --> </section>

108. The class Attribute A class value may be used by multiple elements to put them in conceptual groups for scripting or styling. Here several book listings are classified as a “listing”: <div id="ISBN0321127307" class="listing" > … </div> <div id="ISBN0881792063" class="listing" > … </div> An element may belong to more than one class. Separate class values with character spaces: <div id="ISBN0321127307" class="listing book nonfiction" >

109. Brief ARIA Introduction ARIA (Accessible Rich Internet Applications) is a standardized set of attributes for making pages easier to navigate and use with assistive devices. ARIA defines roles , states , and properties that developers can add to markup and scripts to provide richer information. www.w3.org/TR/html-aria

110. ARIA Roles Roles describe or clarify an element’s function in the document. Examples: alert , button , dialog , slider , and menubar <div id="status" role="alert" >You are no longer connected to the server.</div>

111. ARIA States and Properties ARIA defines a long list of states and properties that apply to interactive elements and dynamic content. Properties values are likely to be stable (example: aria-labelledby ). States have values that are likely to change as the user interacts with the content (example: aria-selected ).

112. Escaping Characters Escaping a character means representing it by its named or numeric character entity in the source. Some characters must be escaped because they will be mistaken for code (example: the < character would be parsed as the start of an HTML tag). Some characters are invisible or just easier to escape than find on the keyboard.

113. Character Entity References Character entities always begin with & and end with ; . Named entities Use a predefined name for the character (example: &lt; for the less-than symbol < ) Numeric entities Use an assigned numeric value that corresponds to its position in a coded character set, such as UTF-8 (example: &#060; for the less-than symbol < ). A complete list of HTML named entities and their Unicode code-points is at www.w3.org/TR/html5/syntax.html#named-character-references .

114. Character Description Entity name Decimal Hexadecimal < Less-than symbol &lt; &#060; &#x3C; > Greater-than symbol &gt; &#062; &#x3E; " Quote &quot; &#160; &#x22; ' Apostrophe &apos; &#039; &#x27; & Ampersand &amp; &#038; &#x26; Escaping HTML Syntax Characters Always escape < , > , and & characters in content. Escape " and ' when they are in attribute values. (Additional non-required character entities are listed in Chapter 5.)

115. 6 ADDING LINKS

116. The a element External links with absolute URLs Links with relative pathnames Linking within a page (fragments) Targeting browser windows Mail links

117. Adding Links <a> </a> <a href="URL" > Link text or image </a> The href attribute provides the location (URL) of the resource. You can link to any resource: HTML documents Images Movies PDFs More!

118. href Attributes Absolute URLs begin with the protocol (ex: http:// ). Relative URLs provide the path to a file on the same server as the document containing the link (ex: /directory/document.html ). Long URLs can make the markup look complicated, but the structure is the same:

119. External Links External links go to pages that are not on your server. An absolute URL is required, including “ http:// ” <li><a href=" http:// www.foodnetwork.com" >The Food Network</a></li>

120. Linking on Your Own Site When no protocol is provided, the browser looks on the current server for the resource. A relative pathname describes how to get to the resource starting from the current document. Pathnames follow UNIX syntax conventions.

121. Example Server Directory Structure The following relative pathname discussions are based on this site structure. The root directory is called jenskitchen . How it looks in the MacOS Finder

122. Linking in the Same Directory When the linked document is in the same directory as the current document, just provide its filename: href=" about.html "

123. Linking into a Lower Directory If the linked file is in a directory, include the directory name in the path. href=" recipes/salmon.html "

124. Linking into Two Directories Include each subdirectory name in the path to the linked document: href=" recipes/pasta/couscous.html "

125. Linking to a Higher Directory To back up a level, the ../ stands in for the name of the higher directory: href=" ../index.html "

126. Linking Up Two Directory Levels Include a ../ for each level you need to back up to: href=" ../../ index.html "

127. Site Root Relative Paths Starting the path with a slash / means the pathname starts at the root directory. You don’t need to write the name of the directory. href=" / recipes/salmon.html ” NOTE: Site root relative URLs are more flexible because they work from any document on the site. DOWNSIDE: They won’t work on your own computer because the / will be relative to your hard drive. You’ll need to test it on the actual web server.

128. Image src Pathnames Relative pathnames are also commonly used to point to image files with the src attribute: <img src =" /images/icons/next.svg " alt="next">

129. Linking Within a Page (Fragments) Linking to a specific point on a web page is called linking to a document fragment. This is useful for providing links down to content from the top of a long document.

130. Linking to a Fragment For example, to create a link from the letter H in a list at the top of the page to the “H” heading farther down in the document: Step 1: Identify the target destination. Use the id attribute to give the target element a unique name: <h2 id="startH" >H</h2> Step 2: Link to the target (#). The # symbol before the name indicates that the link goes to a fragment: <p>… F | G | <a href= "#startH" > H </a> | I | … </p>

131. Targeting Browser Windows The target attribute in the a tag tells the browser the name of the window in which you want the linked document to open: <a href= " recipes.html " target="_blank" >Recipe book</a> target= " _blank " Always opens a new browser window. target= " name " Opens a new window with that name and then opens all subsequent targeted links with that name in the same window. It may also open in an embedded frame (iframe) with that name.

132. Mail Links Use the “mailto” protocol to make a linked email address open in a mail program: <a href= "mailto:[email protected]" >Email WonderWoman</a> ([email protected]) NOTE: Most browsers are configured to open the computer’s primary email program, but this may not work for some users. Be sure the email address is included on the page and use the mailto link as progressive enhancement.

133. 7 ADDING IMAGES

134. Web image formats The img element Attributes for the img element Adding an SVG to a page

135. Web Image Formats Image formats appropriate for web pages: PNG JPEG GIF SVG WebP (up and coming, not yet widely supported)

136. Bitmapped vs. Vector Formats PNG , JPEG , GIF , and WebP are bitmapped formats. SVG is a vector format.

137. The img Element <img src="" alt=""> Embed images on the page with the empty img element. The src and alt attributes are required. img can be used for PNG, JPEG, GIF, and SVG. NOTE: Special markup is recommended for experimenting with cutting-edge image formats like WebP.

138. The img Element (cont’d) <p>This summer, try making pizza <img src="pizza.png" alt="" > on your grill.</p> The img element tells the browser to make a server request for the image and display it in its place:

139. The src attribute The value is the location (URL) of the image file. Use the relative pathname conventions to point to the image on the server. PERFORMANCE TIP: Take advantage of caching (temporary storage). For the same image used repeatedly, using the same pathname reduces the number of calls to the server. <img src="/images/icon/next.png" alt="Next">

140. The alt Attribute The alt attribute provides alternative text for those who are not able to see it. It is required for every img element in order for the HTML to be valid. It is used by screen readers, search engines, and graphical browsers when the image fails to load. <p> If you're <img src="/images/smiley.png" alt="happy"> and you know it, clap your hands.</p>

141. Alternative Text Tips Alternative text (alt text) should convey the same information and function as the image. If the image is purely decorative and shouldn’t be read aloud, include the alt attribute with an empty value: <img src="flowers.svg" alt="" > Consider what the alt text would sound like when read aloud by a screen reader. Is it helpful or a hindrance? When an image is used as a link, the alt text serves as the linked text. Write what you’d want the link to say, don’t just describe the image. Avoid starting alt text with “An image of” or “Graphic of”.

142. width and height Attributes The width and height attributes set the dimensions of the image on the page in number of pixels. They help the browser maintain space for the image in the layout while the files load. Don’t use width and height attributes if you are sizing the image with style sheets or if the size changes in a responsive layout. If the attribute values do not match the dimensions of the image, the image will resize and may be distorted or blurry. <img src="flowers.svg" alt="" width="120" height="160" >

143. Adding SVG Images SVG images are unique: SVG is a vector format, made up of shapes and paths. Those shapes and paths are described in a text file using the Scalable Vector Graphic markup language. The elements in an SVG can be styled with CSS and scripted for interactivity. Because they are vector, SVGs can resize with no loss of quality.

144. SVG Example < svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 180" > <rect width="300" height="180" fill="purple" rx="20" ry="20" /> <text x="40" y="114" fill="yellow" font-family="'Verdana-Bold'" font-size="72" > hello! </text> </svg> Compare the SVG source to the image. The svg element contains a rectangle ( rect element) and a text element:

145. Adding SVG to a Page There are several ways to add an SVG image to a web page: <img> element <object> element <svg> element directly in HTML (inline SVG)

146. Adding SVG with the img Element You can add an .svg file to the page with the img element: <img src="/images/circle.svg" alt=""> PROS: Easy and familiar Universally supported CONS: Can’t manipulate the SVG with scripts or styles. The SVG can’t contain any external resources such as images or fonts.

147. Embedding SVGs with object The content of the object element is a fallback text or image that displays if the SVG is not supported: <object type=" image/svg+xml " data=" pizza.svg "> <img src=" pizza.png " alt="pizza"> </object> PROS: SVG can be scripted and use eternal files (images and fonts). CONS: You can’t change styles with the same CSS used for the document. May be buggy in some browsers.

148. Inline SVGs with the svg Element You can paste the content of the SVG text file directly into the HTML source. This is called using the SVG inline . PROS: Can take full advantage of scripting and styling the SVG because the elements in the SVG are part of the DOM for the document. CONS: Code can get extremely long and unwieldy. Harder to maintain images embedded in the source Can’t take advantage of caching repeated images Not universally supported

149. Example of an Inline SVG <p>This summer, try making pizza <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72" width="100" height="100" > <circle fill="#D4AB00" cx="36" cy="36" r="36"/> <circle opacity=".7" fill="#FFF" stroke="#8A291C" cx="36.1" cy="35.9" r="31.2"/> <circle fill="#A52C1B" cx="38.8" cy="13.5" r="4.8"/> <circle fill="#A52C1B" cx="22.4" cy="20.9" r="4.8"/> <circle fill="#A52C1B" cx="32" cy="37.2" r="4.8"/> <circle fill="#A52C1B" cx="16.6" cy="39.9" r="4.8"/> <circle fill="#A52C1B" cx="26.2" cy="53.3" r="4.8"/> <circle fill="#A52C1B" cx="42.5" cy="27.3" r="4.8"/> <circle fill="#A52C1B" cx="44.3" cy="55.2" r="4.8"/> <circle fill="#A52C1B" cx="54.7" cy="42.9" r="4.8"/> <circle fill="#A52C1B" cx="56" cy="28.3" r="4.8"/> </svg> on your grill.</p>

150. 7B RESPONSIVE IMAGE MARKUP

151. How responsive images work High-density displays Variable-width images Art direction with the picture element Alternative image types

152. About Responsive Images Responsive image markup allows us to deliver images that are appropriate for the user’s viewing environment . How it works: You provide multiple image versions. You specify sizes and preferences with responsive image markup. The browser makes the final selection.

153. About Responsive Images (cont’d) Responsive image markup addresses four scenarios: Sending larger images to high-density screens Sending a variety of image sizes for different screen sizes Sending alternately cropped images for small screens (art direction) Providing alternative image formats with smaller file sizes to supporting browsers

154. High-Density Displays (x-descriptor) Screens and images are made up of squares of colored light called pixels . T On standard screens, the pixels in an image and CSS measurements map one-to-one with the device pixels . High-density displays fit 2x , 3x , or 4x the number of device pixels in the same amount of space. High-density devices use a measurement called reference pixels for page layout. Images and CSS measurements map with the reference pixel grid (not the tiny device pixels).

155. High-Density Displays (cont’d)

156. High-Density Displays (cont’d) In order for images to look sharp and not blurry on high-density displays, they need to map with the device pixels . Example: For an image that displays at 200 pixels wide in the layout , provide these versions: 200px wide image for standard screens 400px wide image for 2x high-density screens 600px wide image for 3x high-density screens 800px wide image for 4x high-density screens

157. High-Density Displays (cont’d) The srcset attribute in the img element lists image alternatives based on pixel density, specified with an x-descriptor ( # x ): <img src="/images/photo-200px.jpg" alt="" srcset="/images/photo-400px.jpg 2x, /images/photo-600px.jpg 3x" > The src attribute is required. Use it for the standard image. The srcset value is a comma-separated list of alternative image URLs followed by an x-descriptor. A device with a standard screen density gets only the 200px wide version of the image. Higher densities get larger images.

158. High-Density Displays (cont’d) X-descriptors tell the browser to make an image selection based on screen resolution only . Use x-descriptors for images that stay the same pixel dimensions regardless of the screen size and layout changes.

159. Variable-Width Images (w-descriptor) When images resize based on the size of the screen or browser window (such as in a responsive layout). Use the srcset attribute with a w-descriptor and the sizes attribute to make a viewport-based selection :

160. Variable-Width Images (cont’d) <img src="strawberries-640.jpg" alt="baskets of ripe strawberries" srcset=" strawberries-480.jpg 480w, strawberries-960.jpg 960w, strawberries-1280.jpg 1280w, strawberries-2400.jpg 2400w " sizes="100vw" > The src attribute is required and specifies the default image size . The value of srcset is a comma-separated list of images and w-descriptors. w-descriptors list the actual image width (in pixels) . The sizes attribute specifies the size at which the image appears in the layout. In this example, it is 100% the width of the browser (100 viewport-width units).

161. Variable-Width Images (cont’d) If the image proportion changes based on the size of the viewport, use a media condition in the sizes attribute to test for the screen width and determine the image size: sizes = ( media-feature: condition ) length

162. Variable-Width Images (cont’d.) <img src="strawberries-640.jpg" alt="baskets of ripe strawberries" srcset="strawberries-240.jpg 240w, strawberries-480.jpg 480w, strawberries-672.jpg 672w" sizes=" (max-width: 480px) 100vw, (max-width: 960px) 70vw, 240px "> If the viewport is 480 pixels or less, the image fills 100% of the viewport width. If the viewport is wider than 480 pixels but less than 960 pixels ( max-width: 960px ), the image appears at 70% of the viewport width. If the viewport is wider than 960 pixels, the image gets sized to exactly 240 pixels. Now that the browser knows the width of the viewport and how big the image will appear within it, it can select the most appropriate image from the srcset list to download.

163. Art Direction Selection (picture element) Details may be lost in images scaled down to fit small screens. To change the image itself rather than just resizing it, make an art-direction-based selection with the picture and source elements: Provide differently cropped versions. Provide both landscape (wide) and portrait (tall) versions. Change or remove text in images to keep it legible.

164. Art Direction Selection (cont’d)

165. Art Direction Selection (cont’d) <picture> <source media= "(min-width: 1024px)" srcset= "icecream-large.jpg" > <source media= "(min-width: 760px)" srcset= "icecream-medium.jpg" > <img src="icecream-small.jpg" alt="hand holding ice cream cone and text that reads Savor the Summer"> </picture> The picture element has no attributes; it is a wrapper for source and img elements. The img element is required and must go last in the list. source elements test for media conditions ( media attribute) and provide alternative image options for each size ( srcset ).

166. Alternative Image Formats (type Attribute) New, efficient image formats (WebP, JPEG 2000, and JPEG XR) are available, but aren’t supported by every browser. Use the picture and source elements with the type attribute for image-format-based selections : <picture> <source type="image/webp" srcset="pizza.webp"> <source type="image/jxr" srcset="pizza.jxr"> <img src="pizza.jpg" alt=""> </picture> Browsers use the first image format they support and don’t download the rest.

167. Browser Support picture , source , srcset , and sizes are supported by all current browser versions. Every technique includes a standards img element as a reliable fallback. For better support, use the Picturefill polyfill script that makes older browsers support the new markup ( scottjehl.github.io/picturefill ).

168. 8 TABLE MARKUP

169. How tables are structured Table headers Cell spanning (rows and columns) Table captions Row and column groups

170. Tabular Data HTML table markup is for data arranged into rows and columns.

171. HTML Table Structure Tables are made up of cells arranged into rows. A simple table

172. HTML Table Structure (cont’d.) How it looks using markup ( table , tr , th , and td ): NOTE: Columns are implied by the number of cells in each row (not created with column elements).

173. HTML Table Structure (cont'd) The same table written in code: <table> <tr> <th> Menu item </th> <th> Calories </th> <th> Fat (g) </th> </tr> <tr> <td> Chicken noodle soup </td> <td> 120 </td> <td> 2 </td> </tr> <tr> <td> Caesar salad </td> <td> 400 </td> <td> 26 </td> </tr> </table> Default browser display:

174. The table Element <table> </table> Identifies tabular material Contains some number of row ( tr ) elements Optionally, may also have a caption element and row and column group elements

175. Table Row (tr) Element <tr> </tr> tr stands for “table row.” The only thing that can go between tr tags is some number of th (header) and td (data cell) elements. There may be no text content in a row that is not contained within a header or data cell.

176. Table Cells <td> </td> td stands for “table data.” Cells can contain any type of web content. All content in a table must be contained in td tags.

177. Table Headers <th> </th> th stands for “table header.” Headers provide information about the cells in the row or column they precede. They are key tools for making table content accessible. Screen readers may read headers aloud before each data cell, providing context that is missing when you can’t see the table. Headers are often rendered in a bold font by default.

178. Table Columns Are Implied <table> <tr> <th> Burgers </th> <td> Organic Grass-fed Beef </td> <td> Black Bean Veggie </td> </tr> <tr> <th> Fries </th> <td> Hand-cut Idaho potato </td> <td> Seasoned sweet potato </td> </tr> </table> This table would have 2 rows and 3 columns (because there are 3 cells defined in each row):

179. Spanning Cells Spanning Stretching a cell to cover several rows or columns Column span Stretching a cell to the right over subsequent columns Row span Stretching a cell downward over several rows

180. Column Spans <table> <tr> <th colspan="2" >Fat</th> </tr> <tr> <td>Saturated Fat (g)</td> <td>Unsaturated Fat (g)</td> </tr> </table> Notice that the first tr element only has one cell in it now. Every row should have the same number of cells or equivalent colspan values. Use the colspan attribute to specify the number of columns the cell should span over:

181. Row Spans <table> <tr> <th rowspan="3" >Serving Size</th> <td>Small (8oz.)</td> </tr> <tr> <td>Medium (16oz.)</td> </tr> <tr> <td>Large (24oz.)</td> </tr> </table> The rowspan attribute to specifies the number of rows the cell spans: Notice that the td elements that were spanned over are no longer in the source.

182. Table Caption <caption> </caption> Provides a title or description for the table Improves table accessibility The caption element must appear first in the table element. The caption displays above the table by default.

183. Table Caption (cont’d) <table> <caption> Nutritional Information </caption> <tr> <th>Menu item</th> <th>Calories</th> <th>Fat (g)</th> </tr> …table continues… </table>

184. Row and Column Groups For complicated tables, you can create semantic groups of rows and/or columns that describe the table’s structure. Row group and column group elements also provide more “hooks” for scripting and styling.

185. Row Groups <thead> </thead> <tbody> </tbody> <tfoot> </tfoot> Provide additional semantic structure Row group elements may contain one or more tr elements (no direct text content). Some browsing agents may repeat the header and footer rows on tables that span multiple pages.

186. Row Groups (cont’d) <table> … <thead> <!-- headers --> <tr></tr> <tr></tr> <tr></tr> <thead> <tbody> <!-- data --> <tr></tr> <tr></tr> <tr></tr> <tr></tr> <tr></tr> <tr></tr> </tbody> <tfoot> <!-- footnote --> <tr></tr> </tfoot> </table> NOTE: this table also utilizes row and column spans.

187. Column Groups <colgroup> </colgroup> <col> </col> Allows you to assign id and class names to columns so they can be accessed by scripts or styles colgroup elements go at the start of the table, after the caption element if there is one. colgroup elements contain no content; they only provide an indication of column structure

188. Column Groups (cont’d) If you need to access individual columns, identify them with col elements: <table> <caption>…</caption> <colgroup></colgroup> <colgroup span="2" ></colgroup> <colgroup span="2" ></colgroup> <!-- rest of table... --> The number of columns in a group is noted with the span attribute: <colgroup></colgroup> <colgroup> <col class="start"> <col class="end"> </colgroup> <colgroup> <col class="start"> <col class="end"> </colgroup>

189. 9 FORMS

190. How forms work The form element Text entry controls Buttons Menus Specialized inputs Form accessibility Form design tips

191. How Forms Work Web forms have two components: The form on the page that collects input An application on the server that processes the collected information

192. 4. The application processes the information. 5. The application returns a response (for example, a thank you message or reloading the page). 1. Browser renders the form inputs as indicated in the markup. 2. User enters information in the form and hits Submit. 3. The browser encodes the information entered and sends it to the server. Web Form Transaction

193. Web Processing Applications Web forms may be processed by any of the following technologies: PHP ( .php ) Microsoft ASP ( .asp ) Microsoft ASP.net (. aspx ) Ruby on Rails JavaServer Pages ( .jsp ) Python

194. The form Element <form action=" URL " method=" POST or GET " > <!-- Form content and inputs here --> </form> The form element is a container for all the content in the form and its input controls. The action and method attributes are necessary for interacting with the processing program.

195. The action Attribute The action attribute provides the location of the script or application that will process the collected form data. <form action="mailinglist.php" method="POST">

196. The method Attribute The method attribute specifies how the encoded information should be sent to the server (GET or POST): GET : The encoded data is tacked onto the URL sent to the server: get http://www.bandname.com/mailinglist.php ?name=Sally%20Strongarm&email=strongarm%40example.com POST : Data is send in a separate transaction and can be encrypted with HTTPS. NOTE: POST is the most common method. <form action="mailinglist.php" method="POST" >

197. Form Control Elements <input type="text"> <input type="submit"> <input type="checkbox"> <select> Form control elements (also called widgets ) collect data from the user. A few examples:

198. Form controls collect data in variable/value pairs . Examples: variable = "email" value = [email protected] variable = "color" value = green Form Control Elements (cont’d)

199. Variables (the name Attribute) A variable is a bit of information collected by a form control (example: the user’s last name). The required name attribute in the control element provides the name of the variable for that control: <input name="lastname" > NOTE: The variable name is also programmed into the web processing script or app, so the name in the markup must match the name in the processor.

200. Values The data entered or selected by the user in the form control is the value that gets sent to the server. It is paired with the variable for that control. You can provide a default value with the value attribute: Name: <input name="lastname" value="Unknown" > In this example, if the text input is left blank, the value “Unknown” would be sent to the server for the variable “lastname”.

201. FORM CONTROL ELEMENTS Text Entry Input <input type="text" name="color" value="Red" maxlength="24"> type : Type of input control, in this case a single-line text field name : Required variable name value : Default text that appears in the field and is sent to server if the field is left blank maxlength , minlength : Sets a character limit for the field size : The length of the field in number of characters (CSS is more common for sizing) <input type="text">

202. FORM CONTROL ELEMENTS Password Field <input type="password" name="pswd" maxlength="10"> Like a text entry field, except the characters are obscured from view The data entered is not encrypted on the way to the server (unless it uses HTTPS, a secure web protocol). <input type="password">

203. FORM CONTROL ELEMENTS Multi-line Text Entry <textarea name="entry" rows="6" cols="64" > This band is totally awesome! </textarea> The content of the textarea element is the default value. rows : The number of rows tall the field is initially drawn (users can write more) cols : Width of initial text field, in number of characters maxlength , minlength : Limits the number of characters that can be entered <textarea> </textarea>

204. These input types are more semantically rich than a default text field. Browsers may provide keyboards tailored to the input type. Browsers may validate entries on the fly without using the server application. FORM CONTROL ELEMENTS Specialized Text Entry Fields <input type="search"> <input type="email"> <input type="tel"> <input type="url">

205. Specialized Text Entries (cont’d) <input type="tel" name=""> <input type="email" name=""> Numerical keyboard provided on iOS Opera looks for email address structure

206. FORM CONTROL ELEMENTS Submit and Reset Buttons <input type="submit"> Submits the collected form data to the server. Does not require a variable name ( name attribute): <input type="reset" value="Start over"> Resets the form to its defaults Less common with the rise of JavaScript for form handling Change the button text with the value attribute.

207. FORM CONTROL ELEMENTS Custom Buttons <button> </button> The button element is used for creating custom buttons with JavaScript. <input type="button"> Creates a custom button that has no predefined function and can be customized with JavaScript <input type="image" alt=""> Allows an image to be used as a button to replace the Submit button. It requires a descriptive alt attribute value.

208. FORM CONTROL ELEMENTS Radio Buttons <p>How old are you?</p> <ol> <li><input type="radio" name="age" value="under24" checked > under 24</li> <li><input type="radio" name="age" value="25-34" > 25 to 34</li> <li><input type="radio" name="age" value="35-44" > 35 to 44</li> <li><input type="radio" name="age" value="over45" > 45+</li> </ol> NOTE: You can’t belong to more than one age group, so radio buttons are the right choice for this list. Only one radio button may be selected at a time. <input type="radio">

209. Radio Buttons (cont’d.) Applying the same variable name to input elements binds them together as a mutually exclusive set of options. The value for each button must be provided with the value attribute. The checked attribute causes an option to be selected when the page loads. Only one input may be checked. <input type="radio" value="">

210. FORM CONTROL ELEMENTS Checkbox Buttons NOTE: You can like more than one type of music, so checkbox buttons are the right choice for this list. <p>What type of music do you listen to?</p> <ul> <li>< input type="checkbox" name="genre" value="punk" checked> Punk rock</li> <li>< input type="checkbox" name="genre" value="indie" checked> Indie rock</li> <li>< input type="checkbox" name="genre" value="hiphop"> Hip Hop</li> <li>< input type="checkbox" name="genre" value="rockabilly"> Rockabilly</li> </ul> Multiple checkbox buttons may be selected. <input type="checkbox">

211. Checkbox Buttons (cont’d) Applying the same variable name to input elements binds them together as a group. The value for each button must be provided with the value attribute. The checked attribute causes an option to be selected when the page loads. Multiple buttons in a group may be checked. <input type="checkbox" value="">

212. FORM CONTROL ELEMENTS Drop-down Menus The select element creates a drop-down menu when there is no size attribute (or if size="1" ). The select element contains some number of option elements. The content of the option element is the value sent to the server (or one can be provided with the value attribute). <select> </select> <option> </option> <optgroup> </optgroup>

213. Drop-down Menus (cont’d.) <p>What is your favorite 80s band? <select name="EightiesFave"> <option>The Cure</option> <option>Cocteau Twins</option> <option>Tears for Fears</option> <option>Thompson Twins</option> <option value="EBTG" >Everything But the Girl</option> <option>Depeche Mode</option> <option>The Smiths</option> <option>New Order</option> </select> </p> The select menu drops down to reveal options when the user clicks on it.

214. FORM CONTROL ELEMENTS Scrolling Menus The same markup as drop-down menus, but the size attribute specifies how many lines to display. The multiple attribute allows more than one option to be selected. <p>What is your favorite 80s band? <select name="EightiesFave" size="6" multiple> <option>The Cure</option> ... </select> </p>

215. Scrolling Menus (cont’d) Use the optgroup element to create a conceptual group of options. The label attribute provides the the heading for the group: <select name="icecream" size="7" multiple> <optgroup label="traditional"> <option>vanilla</option> <option>chocolate</option> </optgroup> <optgroup label="fancy"> <option>Super praline</option> <option>Nut surprise</option> <option>Candy corn</option> </optgroup> </select>

216. FORM CONTROL ELEMENTS File Upload Control The file input type allows a user to select a document from their hard drive to be submitted with the form data. The method must be set to POST, and the encoding type must be included. <form action="/client.php" method="POST" enctype="multipart/form-data" > <label>Send a photo to be used as your online icon <em>(optional)</em><br> <input type="file" name="photo"> </label> </form> <input type="file">

217. FORM CONTROL ELEMENTS Hidden Control Sometimes it is necessary to feed values to the processing script/app that don’t come from the user. Hidden controls don’t display in the browser. <input type="hidden"> < input type="hidden" name="success-link" value="http://www.example.com/thankyou.html">

218. FORM CONTROL ELEMENTS Date and Time Controls A starting value may be provided in standard date-time format. <input type="date"> <input type="time"> <input type="datetime-local"> <input type="month"> <input type="week"> <input type="date" name=" birthday " value=" 2017-01-14 ">

219. Date and Time Controls (cont’d) Browsers may display date and time selection widgets (not universally supported). On non-supporting browsers, date and time inputs display as usable text-entry fields.

220. FORM CONTROL ELEMENTS Numerical Controls <input type="number"> <input type="range"> Number and range controls collect numerical data. Browsers may render counter or slider widgets. Both types accept min and max attributes for setting limits on the allowed values.

221. FORM CONTROL ELEMENTS Color Selector <input type="color"> The color input type is intended to provide a pop-up color picker. It is not well supported. Non-supporting browsers display a text-entry field.

222. Form Accessibility Users may not be able to see the form. They may be listening to it with a screen reader. Whereas sighted users can see at a glance how elements are organized, form accessibility features create semantic connections between form components.

223. FORM ACCESSIBILITY Labels The label element associates a descriptive label with a form field. Implicit association The label text and form control are both contained within the label element: <li> <label> Red <input type="radio" name="color" value="red"> </label> </li> Explicit association Matches the label with the control's ID reference using the for attribute: <li> <label for= " form-colors-red "> Red </label> <input type="radio" name="color" value="red id= " form-colors-red " ></li> <label> </label>

224. FORM ACCESSIBILITY Fieldsets and Legends fieldset Indicates a logical grouping of controls (examples: credit card name, number, date, etc.). By default, rendered with a box around the set of controls. legend Provides a caption for the enclosed fields. By default, it’s displayed along the top edge of the fieldset. <fieldset> </fieldset> <legend> </legend>

225. Fieldsets and Legends (cont’d) <fieldset> <legend> Customer Information </legend> <ul> <li><label>Full name: <input type="text" name="fullname"></label></li> <li><label>Email: <input type="text" name="email"></label></li> <li><label>State: <input type="text" name="state"></label></li> </ul> </fieldset>

226. Form Design Tips Avoid unnecessary questions. Consider the impact of label placement. Labels above fields tend to lead to faster completion. Choose input types carefully. Group related inputs. Primary actions (e.g., “Buy”) should be visually dominant to secondary actions (e.g., “Back”).

227. 10 EMBEDDED MEDIA

228. iframes Generic object element Video players Audio players Canvas

229. Window-in-a-Window (iframe) <iframe> </iframe> The iframe element lets you embed a separate HTML document on a page. It displays in its own window-in-a-window (called a nested browsing context ). Commonly used to embed videos, maps, and advertising

230. iframe (cont’d) <h1>An Inline Frame</h1> <iframe src="glossary.html" width="400" height="250"> Your browser does not support inline frames. Read the <a href="glossary.html">glossary</a>. </iframe> The content of the iframe element is a fallback that displays if iframe is not supported. The width and height attributes specify the size of the window in pixels.

231. The object Element <object> </object> <param> </param> <object data="picture.svg" type="image/svg+xml"> <img src="picture.png" alt=""> </object> A generic element for embedding media on a web page. The media may require a plug-in to run. The data attribute points to the media file. The type attribute is the type of media (its MIME type). The content of the object element is a fallback if the media type isn’t supported.

232. The object Element (cont’d) <object type="video/quicktime" data="movies/hekboy.mov" width="320" height="256"> <param name="autostart" value="false"> <param name="controller" value="true"> </object> Some media formats may require that the object contain a number of param elements that set parameters specific to that type of media. Example: Starting a video automatically or displaying player controls

233. Embedded Video HTML5 introduced the video element for embedding a video player on a web page. There is also an API for controlling video play. <video src ="windtunnel.mp4" width= "320" height= "262" poster="windtunnel_still.jpg" controls autoplay> Get the <a href="windtunnel.mp4">MP4 wind tunnel video</a> </video> <video> </video>

234. Embedded Video (cont’d.) The content in the video element is a fallback for browsers that don’t support the HTML5 video element (e.g., providing a link to the video). video element attributes: width/height : Specific dimension in pixels poster : Provides location of still image to show before video plays controls : Indicates that the video player controls should be visible autoplay : Makes the video start playing automatically

235. Video Formats Browsers are inconsistent about which video formats they support (see table). Best supported format: MP4 (H.264) [MPEG-4 video container, H.264 video compression, and AAC audio compression] Format Type IE MS Edge Chrome Firefox Safari Opera Android Browser iOS Safari MP4 (H.264) video/mp4 mp4 m4v 9.0+ 12+ 4+ Yes* 3.2+ 25+ 4.4+ 3.2+ WebM (VP8) video/webm webm webmv – – 6+ 4.0+ – 15+ 2.3+ – WebM (VP9) video/webm webm webmv – 14+ 29+ 28+ – 16+ 4.4+ – Ogg Theora video/ogg ogv – – 3.0+ 3.5+ – 13+ 2.3+ –

236. Video Formats (cont’d.) <source> </source> To provide several video format options, list them in source elements in the video element. The browser downloads the first file it supports, so put the videos with the smallest file sizes first. <video id="video" controls poster="img/poster.jpg"> <source src="clip.webm" type="video/webm"> <source src="clip.mp4" type="video/mp4"> <source src="clip.ogg" type="video/ogg"> <a href="clip.mp4">Download the MP4 of the clip.</a> </video>

237. <audio> </audio> <source> </source> The audio element embeds an audio player on the page, similar to video , but with no height , width , or poster attributes: <audio id="threeoclock" controls preload="auto" > <source src="jetfighter.mp3" type="audio/mp3"> <source src="jetfighter.ogg" type="audio/ogg"> <source src="jetfighter.webm" type="audio/webm"> <p>Download <a href="jetfighter.mp3">"Jet Fighter"</a></p> </audio> Audio Players

238. Audio Formats Format Type IE MS Edge Chrome Firefox Opera Safari iOS Safari Android MP3 audio/mpeg mp3 9.0+ 12+ 3.0+ 22+ 15+ 4+ 4.1 2.3+ WAV audio/wav or audio/wave – 12+ 8.0+ 3.5+ 11.5+ 4+ 3.2+ 2.3+ Ogg Vorbis audio/ogg ogg oga – – 4.0+ 3.5+ 11.5+ – – 2.3+ MPEG-4/AAC audio/mp4 m4a 11.0+ 12+ 12.0+ – 15+ 4+ 4.1+ 3.0+ WebM/Vorbis audio/webm webm – – 6.0+ 4.0+ 11.5+ – – 2.3.3+ WebM/Opus audio/webm webm – 14+ 33+ 15+ 20+ – – – Browsers are inconsistent in audio format support (see table). Best supported format: MP3

239. Adding Text Tracks <track> </track> The track element provides text that is synchronized with the audio or video. Useful for: Subtitles Captions Descriptions for sight impaired Chapter titles Metadata (non-displaying)

240. Adding Text Tracks (cont’d.) <video width="640" height="320" controls> <source src="japanese_movie.mp4" type="video/mp4"> <source src="japanese_movie.webm" type="video/webm"> <track src="english_subtitles.vtt" kind="subtitles" srclang="en" label="English subtitles" default> <track src="french.vtt" kind="subtitles" srclang="fr" label="Sous-titres en français"> </video> The track element goes inside the video or audio element you want to annotate. The src attribute points to a text file in .vtt format.

241. Canvas <canvas> </canvas> The canvas element embeds a 2-D bitmapped drawing area that is controlled by JavaScript functions. It is useful for games and drawing interfaces. majong.frvr.com muro.deviantart.com

242. Canvas (cont’d) //draw face my_canvas.beginPath(); my_canvas.arc(100, 100, 75, (Math.PI/180)*0, (Math.PI/180)*360, false); // circle dimensions my_canvas.strokeStyle = "black"; // circle outline is black my_canvas.lineWidth = 3; // outline is three pixels wide my_canvas.fillStyle = "yellow"; // fill circle with yellow my_canvas.stroke(); // draw circle my_canvas.fill(); // fill in circle my_canvas.closePath(); A sample of the JavaScript used to draw this simple graphic.