2. Jozef Goetz contribution, 2016 1 J. Goetz, 2016  2008 2012 2014 Pearson Education, Inc. All rights reserved.

3. Jozef Goetz contribution, 2016 2 To read between the lines was easier than to follow the text. —Henry James High thoughts must have high language. —Aristophanes Yea, from the table of my memory I’ll wipe away all trivial fond records. —William Shakespeare He had a wonderful talent for packing thought close, and rendering it portable. —Thomas Babington Macaulay

4. Jozef Goetz contribution, 2016 3 OBJECTIVES In this chapter you will learn:  To understand important components of HTML5 documents.  To use HTML5 to create web pages.  To add images to web pages.  To create and use hyperlinks to navigate web pages.  To mark up lists of information.  To create tables with rows and columns of data and control table formatting.  To create and use forms to get user input.  To make web pages accessible to search engines using tags.

5. Jozef Goetz contribution, 2016 4 2.1Introduction 2.2Editing HTML5 2.3First HTML5 Example 2.4 W3C HTML5 Validation Service 2.5 Headings 2.6 Linking 2.7 Images 2.8 Special Characters and Horizontal Rules 2.9 Lists 2.10 Tables 2.11 Forms 2.12 Internal Linking 2.13 meta Elements 2.14 Wrap-Up 2.15 Web Resources

6. Jozef Goetz contribution, 2016 5 2.1 Introduction  XHTML (Extensible HyperText Markup Language)  markup language for creating web pages  Based on HTML (HyperText Markup Language)  legacy technology of the World Wide Web Consortium (W3C)  XHTML 1.0 strict  Allows only a document’s content and structure to appear in a valid XHTML document, and not its formatting  Formatting is specified with Cascading Style Sheets - CSS

7. Jozef Goetz contribution, 2016 6 2.2 Editing HTML5  We write HTML5 in its source-code format using a text editor (e.g. Notepad, Notepad++, Crimson Editor, KompoZer, TextEdit etc.)  A machine that runs a specialized piece of software called a web server stores HTML5 documents

8. Jozef Goetz contribution, 2016 7 Good Programming Practice 2.1  Assign filenames to documents that describe their functionality.  This practice can help you identify documents faster.  It also helps people who want to link to a page, by giving them an easy-to-remember name.  For example, if you are writing an HTML5 document that contains product information, you might want to call it products.html.

9. Jozef Goetz contribution, 2016 8 2.3 First HTML5 Example  In HTML5, text is marked up with elements delimited by tags that are names contained in pairs of angle brackets  Every HTML5 document contains a start tag and an end tag  Some elements may contain attributes that provide additional information about the element  Comments in HTML5 always begin with .  The browser ignores all text inside a comment

10. Jozef Goetz contribution, 2016 9 2.3 First HTML Example (Cont.)  Every HTML document contains a head element which generally contains:  A title  A body element  head element  generally is not rendered in the display window

11. Jozef Goetz contribution, 2016 10 2.3 First HTML Example (Cont.)  The title element:  Names a web page  Usually appears in the colored bar (called the title bar) at the top of the browser window  Is the text identifying a page when users add your page to their list of Favorites or Bookmarks

12. Jozef Goetz contribution, 2016 11 2.3 First HTML Example (Cont.)  The body element:  Contains the document’s content, which may include text and tags  All text placed between the and tags forms one paragraph Creates a p element within the body, which displays welcome text

13. Jozef Goetz contribution, 2016 12 Fig. 2.1 | First XHTML/HT ML example. Creates a head element Creates a title element, which contains the text Welcome Creates a p element within the body, which displays welcome text HTML comments, not interpreted by the browser

14. Jozef Goetz contribution, 2016 13 2.3 First HTML Example (Cont.)  HTML documents delimit an element with start and end tags  A start tag consists of the element name in angle brackets (e.g., )  An end tag consists of the element name preceded by a forward slash ( / ) in angle brackets (e.g., )  Many start tags have attributes that provide additional information about an element  Each attribute has a name and a value separated by an equals sign ( = )  name=value

15. Jozef Goetz contribution, 2016 14 Good Programming Practice 2.2 – 2.3  Place comments throughout your markup.  Comments help other programmers understand the markup, assist in debugging and list useful information that you do not want the browser to render.  Comments also help you understand your own markup when you revisit a document to modify or update it in the future. Indenting nested elements emphasizes a document’s structure and promotes readability.

16. Jozef Goetz contribution, 2016 15 Common Programming Error 2.1 – 2.2  Not enclosing attribute values in either single or double quotes is a syntax error.  Using uppercase letters in an HTML element or attribute name is a syntax error.  However, some web browsers may still render the element correctly.

17. Jozef Goetz contribution, 2016 16 Common Programming Error 2.3  HTML does not permit tags to overlap a nested element’s end tag must appear in the document before the enclosing element’s end tag.  For example, the nested HTML tags hello cause a syntax error,  because the enclosing head element’s ending tag appears before the nested title element’s ending tag.

18. Jozef Goetz contribution, 2016 17 Good Programming Practice 2.4  Use a consistent title -naming convention for all pages on a site.  For example, if a site is named “Bailey’s Website,” then the title of the contact page might be “Bailey’s Website - Contact.”  This practice can help users better understand the website’s structure.

19. Jozef Goetz contribution, 2016 18 2.4 W3C HTML Validation Service  HTML documents that are syntactically correct are guaranteed to render properly  HTML documents that contain syntax errors may not display properly  Most current browsers attempt to render HTML documents even if they are invalid.  This often leads to unexpected and possibly undesirable results.

20. Jozef Goetz contribution, 2016 19 2.4 Validation Service  Use a validation service, such as the W3C MarkUp Validation Service, to confirm that an HTML document is syntactically correct.  Validation services  e.g., validator.w3.org ensure that an HTML document is syntactically correct

21. Jozef Goetz contribution, 2016 20 2.5 Headings  HTML provides six headings (h1 through h6) for specifying the relative importance of information  Heading element h1 is considered the most significant heading and is rendered in the largest font  Each successive heading element (i.e., h2, h3, etc.) is rendered in a progressively smaller font  The text size used to display each heading element can vary significantly between browsers.  Placing a heading at the top of every HTML page helps viewers understand the purpose of each page.  Use larger headings to emphasize more important sections of a web page.

22. Jozef Goetz contribution, 2016 21 Fig. 2.2 | Heading elements h1 through h6. Creates six headings, each with decreasing significance

23. Jozef Goetz contribution, 2016 22 2.6 Linking  A hyperlink references or links to other resources, such as HTML documents and images  Web browsers typically underline text hyperlinks and color them blue by default

24. Jozef Goetz contribution, 2016 23 2.3 | Linking to other web pages. Creates anchor elements that link to the URL specified in the href attribute  The strong element typically causes the browser to render text in a bold font  Users can insert links with the a (anchor) element.  The href attribute specifies the resource  page,  file,  e-mail address) being linked

25. Jozef Goetz contribution, 2016 24 Fig. 2.4 | Linking to an e- mail address (Part 1 of 2). Hyperlink that creates a message to the address deitel@deitel.com with the computer’s default e-mail program deitel@deitel.com  Anchors can link to an e-mail address using a mailto: URL  When a user clicks this type of anchored link, most browsers launch the default e- mail program (e.g., Outlook Express) to initiate an e-mail message addressed to the linked address

26. Jozef Goetz contribution, 2016 25 Fig. 2.4 | Linking to an e-mail address (Part 2 of 2).

27. Jozef Goetz contribution, 2016 26 2.7 | Images in HTML files. Specifies the image file’s location Specifies the image’s width Specifies the image’s height Specifies text to display if the image is unavailable  The img element’s src attribute specifies an image’s location  Every img element must have an alt attribute, which contains text that is displayed if the client cannot render the image  The alt attribute makes web pages more accessible to users with disabilities, especially vision impairments  Width and height are optional attributes  If omitted, the browser uses the image’s actual width and height  Images are measured in pixels

28. Jozef Goetz contribution, 2016 27 Good Programming Practice 2.5  Always include the width and the height of an image inside the tag.  When the browser loads the HTML file, it will know immediately from these attributes how much screen space to provide for the image and will lay out the page properly, even before it downloads the image.  Including the width and height attributes in an tag can result in the browser’s loading and rendering pages faster.

29. Jozef Goetz contribution, 2016 28 Common Programming Error 2.4  Entering new dimensions for an image that change its inherent width-to-height ratio distorts the appearance of the image.  For example, if your image is 200 pixels wide and 100 pixels high, you should ensure that any new dimensions have a 2:1 width-to-height ratio.

30. Jozef Goetz contribution, 2016 29 2.7 | Images in HTML files. Specifies the image file’s location Specifies the image’s width Specifies the image’s height Specifies text to display if the image is unavailable  Some HTML elements are empty elements that contain only attributes and do not mark up text  Empty elements (e.g., img) must be terminated,  either by using the forward slash character inside the closing right angle bracket />  or by explicitly writing an end tag

31. Jozef Goetz contribution, 2016 30 Fig. 2.7 | Images as link anchors (Part 1 of 2). Creates a hyperlinked image  Create an image hyperlink by nesting an img element in an anchor element

32. Jozef Goetz contribution, 2016 31 Fig. 2.7 | Images as link anchors (Part 1 of 2).

33. Jozef Goetz contribution, 2016 32 2.8 HTML Special Characters  HTML provides special characters such as quotes, copyright symbol, etc.  Character entity references (in the form &code; )  Numeric character references (e.g. & ) Numeric Code Character Code &#169© © &#60 < < &#62 > > &#38& &amp &#160blank  See the Special Characters section textbook for a detailed list – appendix A p.898

34. Jozef Goetz contribution, 2016

35. 34  Most browsers render a horizontal rule, indicated by the or for XHTML tag, as a horizontal line  The hr element also inserts a line break above and below the horizontal line 2.8 HTML Horizontal Rule

36. Jozef Goetz contribution, 2016 35 Fig. 2.9 | Inserting special characters (Part 1 of 2). Inserts a horizontal rule, with a line break before and after Inserts the special characters © and &

37. Jozef Goetz contribution, 2016 36 Fig. 2.9 | Inserting special characters (Part 2 of 2). Makes the 2 superscript Makes the 1 subscript Creates a strikethrough effect Emphasizes text Inserts the special symbols < and ¼

38. Jozef Goetz contribution, 2016 37 2.9 Lists  Unordered list element ul  creates a list in which each item in the list begins with a bullet symbol (called a disc)  Each entry is an li (list item) element.  Most web browsers render these elements with a line break and a bullet symbol at the beginning of the line

39. Jozef Goetz contribution, 2016 38 2.9. HTML Ordered List  Contains the ordered list  Two main ways to customize ordered lists  how they are numbered –type attribute  the number with which the list starts –start attribute  Ex:  Contains an list item

40. Jozef Goetz contribution, 2016 39 2.9. Ordered List  Type attribute can take one of five values  “1” Specifies standard Arabic numerals –1, 2, 3, 4,5  “a” Specifies lowercase letters –a, b, c, d, e  “A” Specifies uppercase letters –A, B, C, D, E  “i” Specifies lowercase Roman numerals –i, ii, iii, iv, v  “I” Specifies uppercase Roman numerals –I, II, III, IV, V

41. Jozef Goetz contribution, 2016 40 2. Ordered List  Both the start and type attributes are used in the tag  start=“1” is the default value  type=“1” is the default value  By using the value attribute in the tag, numbering can be reassigned at any point  So, it will start from MCXI.

42. Jozef Goetz contribution, 2016 41 Fig. 2.10 | Unordered list containing hyperlinks Creates an unordered list Makes hyperlinked elements into individual list items  Unordered list element ul  creates a list in which each item in the list begins with a bullet symbol (called a disc)  Each entry is an li (list item) element.

43. Jozef Goetz contribution, 2016 42 2.9 Lists (Cont.)  The ordered list element ol creates a list in which each item begins with a number  Lists may be nested to represent hierarchical data relationships

44. Jozef Goetz contribution, 2016 43 2.9 HTML Unordered List  HTML 3.2 provided ways to customize unordered lists  They have been deprecated in HTML 4.0 in favor of using style sheets  Contains the unordered list  The type attribute customizes unordered lists  the type attribute has 3 possible values –disc - default –square, –circle  the type attribute is used in the tag  Contains an list item

45. Jozef Goetz contribution, 2016 44 Fig. 2.9 | Nested and ordered lists (Part 1 of 2). A single list element

46. Jozef Goetz contribution, 2016 45 Fig. 2.9 | Nested and ordered lists (Part 2 of 2). Creates an ordered list within a list element Another single unordered list element Creates an ordered list within this list element Ends the list element Ends nested list

47. Jozef Goetz contribution, 2016 46 2.10 Using Tables  An HTML table is composed of rows and columns -- similar to a spreadsheet.  Each individual table cell is at the intersection of a specific row and column.  tag Contains the table Common attributes:  border,  width,  align  tag Contains a table row  tag Contains a table data

48. Jozef Goetz contribution, 2016 47 2.10 Tables  table element  defines an HTML table  Attribute summary summarizes the table’s contents and is used by speech devices to make the table more accessible to users with visual impairments  Element caption describes the table’s content  The text inside the tag is rendered above the table in most browsers

49. Jozef Goetz contribution, 2016 48 Table Parts  Caption indicates what the table is about  Table headings label the rows, columns, or both  Table cells are the individual rectangles in the table  Table data are the values in the table cells

50. Jozef Goetz contribution, 2016 49 Table Parts   Beginning and end of the table  (table row)  Beginning and end of a row in the table  Several can be nested inside the  (table data)  Beginning and end of a cell (column) in the table row  Several can be nested inside the  (table header - optional)  Element th  Defines a header cell  Special type of cell that contains headers  Text inside cell is bold and centered

51. Jozef Goetz contribution, 2016 50 Copyright (c) 2006 Prentice-Hall. All rights reserved. Effects of,, and Tags Tables 1 2 3 4 5 6 7 8 9 By default, no border and narrow columns

52. Jozef Goetz contribution, 2016 51 Common Table Attributes 1.align  W3C has deprecated the use of this attribute with the tag.  Use ….. 2.border 3.bordercolor 4.width (the width of the table)  Percentage or pixels? 5.height 6.cellspacing  the distance between the cells in pixels  default is 2 pixels 7.cellpadding  the distance between the cell content and the edge of the cell in pixels  default is 1 pixels 8.bgcolor - deprecated 9.summary  specifies a summary of the table contents that can be accessed by a screen reader 10.title - some browsers  >=explorer 5.x and >=Netscape 6  displays when the mouse passes over the table

53. Jozef Goetz contribution, 2016 52 Table Section Tags  A table can be split into three distinct sections:  Header  Appears at top of each printed page of a multi-page table   Footer  Appears at bottom of each printed page of a multi- page table  Calculation results   Body  Contains main content of the table   Headers and footers are not supported in all browsers

54. Jozef Goetz contribution, 2016 53 2.10 | Creating a basic table (Part 1 of 2). Begins a new HTML table Sets the table’s border to be one pixel wide Sets the table’s width to 40% of the screen Describes the table’s contents in the summary attribute Sets the text above the table Creates a head element Creates a table heading cell in the new table row Makes a new table row Creates the next cell in the row

55. Jozef Goetz contribution, 2016 54 2.10 | Creating a basic table (Part 2 of 2). Creates a foot section Creates table header cells at the bottom of the table Creates a body section Inserts a cell in the body of the table Ends the table

56. Jozef Goetz contribution, 2016 55 colspan Attribute Birthday List James 11/08 Karen 4/17  colspan  Specify number of columns to span  The cell will then take up that many columns in the table  Syntax:  text

57. Jozef Goetz contribution, 2016 56 rowspan Attribute James 11/08  Specify number of rows to span  The cell will then take up that many rows in the table  Syntax:  text

58. Jozef Goetz contribution, 2016 57 Copyright (c) 2006 Prentice-Hall. All rights reserved. Effects of Headers and Footers Title of the Table The footer appears at the bottom

59. Jozef Goetz contribution, 2016 58 2.11 | Complex HTML table (Part 1 of 2). Makes the header cell span 2 rows  You can merge data cells with the rowspan and colspan attributes  The values of these attributes specify the number of rows or columns occupied by the cell  Can be placed inside any data cell or table header cell

60. Jozef Goetz contribution, 2016 59 2.11 | Complex HTML table (Part 2 of 2). Makes the header cell span 4 columns