Jozef Goetz contribution, J. Goetz, 2016  Pearson Education, Inc. All rights reserved.

Jozef Goetz contribution, 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

Jozef Goetz contribution, 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.

Jozef Goetz contribution, Introduction 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

Jozef Goetz contribution, 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

Jozef Goetz contribution, 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

Jozef Goetz contribution, 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.

Jozef Goetz contribution, 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

Jozef Goetz contribution, 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

Jozef Goetz contribution, 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

Jozef Goetz contribution, 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

Jozef Goetz contribution, 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

Jozef Goetz contribution, 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

Jozef Goetz contribution, 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.

Jozef Goetz contribution, 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.

Jozef Goetz contribution, 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.

Jozef Goetz contribution, 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.

Jozef Goetz contribution, 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.

Jozef Goetz contribution, 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

Jozef Goetz contribution, 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.

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

Jozef Goetz contribution, 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

Jozef Goetz contribution, | 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,  address) being linked

Jozef Goetz contribution, Fig. 2.4 | Linking to an e- mail address (Part 1 of 2). Hyperlink that creates a message to the address with the computer’s default program  Anchors can link to an 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 message addressed to the linked address

Jozef Goetz contribution, Fig. 2.4 | Linking to an address (Part 2 of 2).

Jozef Goetz contribution, | 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

Jozef Goetz contribution, 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.

Jozef Goetz contribution, 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.

Jozef Goetz contribution, | 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

Jozef Goetz contribution, 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

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

Jozef Goetz contribution, 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

Jozef Goetz contribution, 2016

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

Jozef Goetz contribution, 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 &

Jozef Goetz contribution, 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 ¼

Jozef Goetz contribution, 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

Jozef Goetz contribution, 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

Jozef Goetz contribution, 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

Jozef Goetz contribution, 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.

Jozef Goetz contribution, Fig | 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.

Jozef Goetz contribution, 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

Jozef Goetz contribution, 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

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

Jozef Goetz contribution, 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

Jozef Goetz contribution, 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

Jozef Goetz contribution, 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

Jozef Goetz contribution, 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

Jozef Goetz contribution, 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

Jozef Goetz contribution, Copyright (c) 2006 Prentice-Hall. All rights reserved. Effects of,, and Tags Tables By default, no border and narrow columns

Jozef Goetz contribution, 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

Jozef Goetz contribution, 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

Jozef Goetz contribution, | 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

Jozef Goetz contribution, | 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

Jozef Goetz contribution, 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

Jozef Goetz contribution, 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

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

Jozef Goetz contribution, | 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

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