Introduction to HTML5

Objectives

• Grasp essential HTML5 components
• Utilize HTML5 for web page creation
• Incorporate images into web pages
• Design and implement hyperlinks
• Format lists and other information
• Construct data tables (rows, columns)
• Build input forms

Introduction

• HTML5 is a markup language dictating the structure and content of web documents displayed in internet browsers.
• Tables are used for structuring information from databases, visitor forms for collecting information from visitors, internal linking, and meta elements for specifying document information.

Editing HTML5

• HTML5 documents are created by typing markup text in a text editor and saving it with a .html or .htm extension.
• Web servers store HTML5 documents.
• Clients (web browsers on computers and smartphones), request specific resources from web servers, such as HTML5 documents.
• The first example message shows "welcome to HTML5!" in the browser.

Document Type Declaration

• Declaring document type(DOCTYPE) is required in HTML5 so that browsers render the page in standards mode.
• Some browsers operate in Quirks Mode to maintain backward compatibility and are not up-to-date with standards.
• Inserting comments in HTML5 markup to improve readability and describe the content of a document.
• Browsers ignore comments when rendering documents.
• Comments start with <!-- and end with -->.

Start and End Tags

• HTML5 documents delimit most elements with a start tag and end tag.
• A start tag includes the element name in angle brackets.
• An end tag includes the element name preceded by a forward slash (/) in angle brackets.
• Void elements don't have end tags.
• Start tags can have attributes to provide element information and are used to determine how to process the element.
• Each attribute has a name and a value separated by an equals sign (=).
• It is good practice to use lowercase letters for HTML5 element and attribute names.

HTML, Head and Body Elements

• Markup contains text, images, graphics, animations, audios and videos, which represents a document's content and elements that specify the document's structure and meaning.
• The html element encloses the head element.
• The head section contains information about the HTML5 document, such as character sets and title.
• The head can contain CSS3 style sheets and client-side programs called scripts.
• The body section contains the page's content, and is displayed by the browser.

Title Element

• The title element, enclosed in the head element, is a nested element.
• The head element is nested inside the html element is nested.
• Titles appear in the title bar, browser tab, and bookmarks, enabling users to return to their favorite sites.
• Search engines use the title for indexing purposes.
• Indenting nested elements emphasizes document structure and readability.

Paragraph Element

• All text between <p> and </p> form one paragraph.

Headings

• Six heading elements (h1 through h6) specify the importance of information.
• The <h1> tag is considered the most significant heading element and is rendered in the largest font.
• Each successive heading element (i.e., h2, h3, etc.) is rendered in a progressively smaller font.

W3C HTML5 Validation Service

• HTML5 documents that are syntactically correct render properly and are guaranteed.
• HTML5 documents with syntax errors might not display properly.
• Validation services ensure that an HTML5 document is syntactically correct, such as validator.w3.org/#validate-by-upload.
• Browsers attempt to render invalid HTML5 documents, however that can lead to undesirable results.

Linking

• An hyperlink contains a link to other resources and HTML5 documents and images in the same location.
• Web browsers underline text hyperlinks and color them blue by default.
• Links are created using the <a> (anchor) element.
• Attribute href(hypertext reference) specifies a resource's location.
• The href attribute specifies a web page, file, or email address.
• When a URL lacks a specific document, web servers return a default Web page.
• The default Web page is referred to as index.html, however a web server can be configured to use any file.
• Web servers return error indications to browsers (404 error) when a document cannot be located.
• Browsers will display a web page containing an error message in this case.
• The <strong> element indicates content that is highly important, and browsers typically render such text in a bold font.
• Enclosing the attribute values in single or double quotes where is recommended.
• 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., Mozilla Thunderbird, Microsoft Outlook or Apple Mail) to enable the user to write an e-mail message to the linked address.

Images

• Popular image formats used by web developers are PNG (Portable Network Graphics) and JPEG (Joint Photographic Experts Group).
• Images can be created using specialized software, such as Adobe Photoshop, G.I.M.P., Inkscape.
• Images may also be acquired from websites, many of which offer royalty-free images.
• The img element's src attribute specifies an image's location.
• An img element must have an alt attribute that displays text when the client cannot render the image.
• The alt attribute makes web pages more accessible to users, especially those with vision impairments.
• width and height are optional attributes
• If width and height are omitted, the browser uses the image's actual width and height
• Images are measured in pixels.
• Include an image's width and height within the <img> tag so the browser accurately allocates screen space before downloading it.
• Avoid distorting images by preserving the width-to-height ratio when defining new dimensions.

Void Elements

• Some HTML5 elements (void elements) contain only attributes and do not mark up texts.
• Void elements (such as the img element) can be terminated by using the forward slash character (/) inside the closing right angle bracket (>) of the start tag.

Hyperlinks

• Images can be used as hyperlinks to create graphical web pages that link to resources.

Special Characters and Horizontal Rules

• HTML5 provides character entity references (&code;) for characters that cannot be rendered otherwise.
• The code in special characters can be word abbreviations, numbers(decimal and hexadecimal).
• An horizontal rule, indicated by the <hr> tag, renders a horizontal line with extra space above and below it in most browsers.
• The <hr> element is considered a legacy element that has been deprecated.
• HTML5 character can be represented as numeric character references-decimal or hexadecimal.

Lists

• The <ul> (unordered list)element creates a bulleted list.
• Each entry is an <li> (list item) element.

Nested and Ordered Lists

• Lists can be nested to represent hierarchical relationships.

• The <ol> (ordered list) element creates a numbered list.

Tables

• Tables are frequently used to organize data into rows and columns.
• The <table>element defines an HTML5 table.
• The summary attribute summarizes the table's contents, this helps visually impaired users using the table.
• The caption element specifies a table's title.
• A recommended practice is including a general description of a table's information in the table element's summary attribute for accessibility and web pages.
• Tables split into three sections: Head ( element), Body ( element), and Foot ( element).
• The element holds table titles and column headers.
• The element displays the primary and necessary data for table.
• The element shows calculation results and footnotes.
• The element appears above the body, but displays it in the bottom of every page.
• The <tr> element that defines individual table rows.
• The element defines a header cell.
• The element contains table data elements.

Using rowspan and colspan with Tables

• Combining data cells is possible with the rowspan and colspan attributes.
• The values of these attributes specify the number of rows or columns occupied by the cell.
• The attributes can be placed inside any data cell or table header cell.
• The <br> element renders as a line brake, mark up or text following a <br>element, and it is rendered on the next line.
• Like the <img> element, <br> is an example of a void element.
• Like the <hr> element, br is considered a legacy formatting element and should be specified with CSS.

Forms

• Forms are a tool for collecting information from users.

Method Attribute of the Form Element

• A form uses the <form> element to define the form.
• Attribute method, specifies how a form's data is sent to the web server
• Using method = "post" appends form data to the browser request, which contains the protocol (HTTP) and the requested resource's URL.
• Using method = "get" appends, the form data directly to the URL script and is visible in the browser's Address field.
• The action attribute specifies the script for form data to be sent to.

Action Attribute of the Form Element

• The action attribute for the form element specifies the script to which the form data will be sent.
• Since server-side programming has not been introduced yet, setting to http://www.deitel.com for now.
• input elements specify data to provide to the script that processes the form, and is also referred to as form handler.
• An input's type is determined by its type attribute.

Hidden Inputs

• Forms can contain visual components and nonvisual components.
• Visual components-include clickable buttons and other GUI components with which users interact.
  • Nonvisual Components- "Hidden Inputs" store any data the developer wishes to specify.

Text input Element

• The <input> of type text inserts a text field into a form.
• The <label> element provides the purpose about the input element's purpose
• The size attribute specifies the number of characters visible in the text field.
• The optional attribute maxlength limits the number of characters input into a text field.

Submit and Reset input Elements

• submit input element is a button.
  • When the submit button is pressed, the form's data is sent to the location specified in the form's action attribute.
• The value attribute sets the text displayed on the button.
• The reset input element allows a user to reset all form elements to their default values.

Additional Form Elements

• There is a form that solicits user feedback about a website.
• The <textarea> element inserts a multiline text area into the form.
• The rows attribute specifies a number of rows, and the columns attribute specifies characters per line.
• Default text can be specified in fields by using the value attribute

Forms - password attribute

• The input of type "password" inserts a password box into a form.
• Allows users to enter sensitive information, such as credit card numbers and passwords, by masking the information input with another character, usually asterisks.
• The actual value input is sent to the web server,not the asterisks that mask the input.

Forms - Checkbox attribute

The checkbox input element enables users to select and option.

• When the checkbox is selected, a check mark appears in the checkbox. Otherwise, the checkbox is empty.
• Checkboxes used individually and in groups, those that are part of the same group have the same name.
• radio buttons are similar to checkboxes, except that only one radio button in a group can be selected at any time.
• All radio buttons in a group have the same name attribute but different value attributes.
• The select input provides a drop-down list of items.
• The name attribute identifies the drop-down list, and the Option element adds items to the drop-down list.

Internal Linking

• The <a> tag can be used to link to another section of the same document by specifying the element's id as the link's href.
• To link internally to an element with its id attribute set, use the syntax #id.

Meta Elements

• Reading the <meta> element's contents is one way search engines catalog pages.
• The name attribute identifies the type of meta element.
• The content attribute determines the keywords and description.
  • In Search engines, a list of content words with descriptions make web pages easy to find.
  • Also helps the search engine catalog an internet website. These elements must be placed inside the head section of an HTML5 document.