HTML Basics PDF

Part 1 Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc. 2013. All Rights Reserved. © 2008 Pearson Education, Inc. All rights reserved.  HTML5 (HyperText Markup Language 5) ▪ markup language that specifies the structure and content of documents t...

Part 1 Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc. 2013. All Rights Reserved. © 2008 Pearson Education, Inc. All rights reserved.  HTML5 (HyperText Markup Language 5) ▪ markup language that specifies the structure and content of documents that are displayed in web browsers  We introduce some basics, then cover more sophisticated HTML5 techniques such as: ▪ tables, which are particularly useful for structuring information from databases (i.e., software that stores structured sets of data) ▪ forms for collecting information from web-page visitors ▪ internal linking for easier page navigation ▪ meta elements for specifying information about a document 3 © 2008 Pearson Education, Inc. All rights reserved.  We’ll create HTML5 documents by typing HTML5 markup text in a text editor (such as Notepad, TextEdit, vi, emacs) and saving it with the.html or.htm filename extension.  Computers called web servers store HTML5 documents.  Clients (such as web browsers running on your local computer or smartphone) request specific resources such as HTML5 documents from web servers.  This first example displays the message Welcome to HTML5! in the browser. 4 © 2008 Pearson Education, Inc. All rights reserved.  Using TextEdit in MacOS: https://www.lifewire.com/edit-html-with-textedit-3469900  Using Notepad In Windows: https://www.w3schools.com/html/html_editors.asp © 2008 Pearson Education, Inc. All rights reserved.  The document type declaration (DOCTYPE) is required in HTML5 documents so that browsers render the page in standards mode.  Some browsers operate in Quirks Mode to maintain backward compatibility with web pages that are not up-to-date with the latest standards. Comments:  Insert comments in your HTML5 markup to improve readability and describe the content of a document.  The browser ignores comments when your document is rendered.  Comments start with. 6 © 2008 Pearson Education, Inc. All rights reserved.  HTML5 documents delimit most elements with a start tag and end tag.  A start tag consists of the element name in angle brackets ▪ For example,  An end tag consists of the element name preceded by a forward slash (/) in angle brackets ▪ For example,  There are several so-called “void elements” that do not have end tags.  Many start tags have attributes that provide additional information about an element, which browsers use to determine how to process the element.  Each attribute has a name and a value separated by an equals sign (=). 7 © 2008 Pearson Education, Inc. All rights reserved.  HTML5 markup contains text (and images, graphics, animations, audios and videos) that represents the content of a document and elements that specify a document’s structure and meaning. ▪ The html element encloses the head section (represented by the head element) and the body section (represented by the body element). ▪ The head section contains information about the HTML5 document, such as the character set (UTF-8, the most popular character-encoding scheme for the web) that the page use—which helps the browser determine how to render the content—and the title. ▪ The head section also can contain special document-formatting instructions called CSS3 style sheets and client-side programs called scripts for creating dynamic web pages. ▪ The body section contains the page’s content, which the browser displays when the user visits the web page. 8 © 2008 Pearson Education, Inc. All rights reserved.  The title element is called a nested element, because it’s enclosed in the head element’s start and end tags.  The head element is also a nested element, because it’s enclosed in the html element’s start and end tags.  The title element describes the web page. ▪ Titles usually appear in the title bar at the top of the browser window, in the browser tab on which the page is displayed, and also as the text identifying a page when users add the page to their list of Favorites or Bookmarks, enabling them to return to their favorite sites. ▪ Search engines use the title for indexing purposes and when displaying results 9 © 2008 Pearson Education, Inc. All rights reserved.  All text placed between the and tags forms one paragraph.  HTML5 provides six heading elements (h1 through h6) for specifying the 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. 10 © 2008 Pearson Education, Inc. All rights reserved. © 2008 Pearson Education, Inc. All rights reserved. © 2008 Pearson Education, Inc. All rights reserved.  HTML5 documents that are syntactically correct are guaranteed to render properly.  HTML5 documents that contain syntax errors may not display properly  Validation services (e.g., validator.w3.org/#validate-by-upload) ensure that an HTML5 document is syntactically correct 13 © 2008 Pearson Education, Inc. All rights reserved.  A hyperlink references or links to other resources, such as HTML5 documents and images.  Web browsers typically underline text hyperlinks and color them blue by default. 14 © 2008 Pearson Education, Inc. All rights reserved.  Links are created using the (anchor) element.  Attribute href (hypertext reference) specifies a resource’s location, such as ▪ a web page or location within a web page ▪ a file ▪ an e-mail address  When a URL does not indicate a specific document on the website, the web server returns a default web page. This page is often called index.html, but most web servers can be configured to use any file as the default web page for the site.  If the web server cannot locate a requested document, it returns an error indication to the web browser (known as a 404 error), and the browser displays a web page containing an error message. 15 © 2008 Pearson Education, Inc. All rights reserved. Note:  The strong element indicates that the content has high importance. Browsers typically render such text in a bold font. © 2008 Pearson Education, Inc. All rights reserved. © 2008 Pearson Education, Inc. All rights reserved. Hyperlinking to an E-Mail Address ▪ 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. 18 © 2008 Pearson Education, Inc. All rights reserved. © 2008 Pearson Education, Inc. All rights reserved. © 2008 Pearson Education, Inc. All rights reserved.  The most popular image formats used by web developers today are PNG (Portable Network Graphics) and JPEG (Joint Photographic Experts Group).  Users can create images using specialized software, such as Adobe Photoshop (www.photoshop.com), G.I.M.P. (www.gimp.org), Inkscape (www.inkscape.org) and many more.  Images may also be acquired from various websites, many of which offer royalty-free images. 21 © 2008 Pearson Education, Inc. All rights reserved. © 2008 Pearson Education, Inc. All rights reserved. © 2008 Pearson Education, Inc. All rights reserved.  The 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 24 © 2008 Pearson Education, Inc. All rights reserved. © 2008 Pearson Education, Inc. All rights reserved. alt Attribute  A browser may not be able to render an image.  Every img element in an HTML5 document must have an alt attribute.  If a browser cannot render an image, the browser displays the alt attribute’s value.  The alt attribute is also important for accessibility—speech synthesizer software can speak the alt attribute’s value so that a visually impaired user can understand what the browser is displaying. For this reason, the alt attribute should describe the image’s contents. 26 © 2008 Pearson Education, Inc. All rights reserved. Void Elements  Some HTML5 elements (called void elements) contain only attributes and do not mark up text (i.e., text is not placed between a start and an end tag).  You can terminate void elements (such as the img element) by using the forward slash character (/) inside the closing right angle bracket (>) of the start tag.  For example, lines 15–16 of Fig. 2.6 could be written as follows: 27 © 2008 Pearson Education, Inc. All rights reserved. Using Images as Hyperlinks  By using images as hyperlinks, you can create graphical web pages that link to other resources.  In Fig. 2.7, we create five different image hyperlinks.  Clicking an image in this example takes the user to a corresponding web page—one of the other examples in this chapter. 28 © 2008 Pearson Education, Inc. All rights reserved.  HTML5 provides character entity references (in the form &code;) for representing special characters that cannot be rendered otherwise  The code can be: ▪ Word abbreviations ▪ Numbers  Decimal  Hexadecimal 30 © 2008 Pearson Education, Inc. All rights reserved.  Figure 2.9 demonstrates how to use special characters in an HTML5 document.  For an extensive list of character entities, see www.w3.org/TR/REC-html40/sgml/entities.html 32 © 2008 Pearson Education, Inc. All rights reserved. © 2008 Pearson Education, Inc. All rights reserved. © 2008 Pearson Education, Inc. All rights reserved.  A horizontal rule, indicated by the tag renders a horizontal line with extra space above and below it in most browsers.  The horizontal rule element should be considered a legacy element and you should avoid using it.  CSS can be used to add horizontal rules and other formatting to documents.  Special characters can also be represented as numeric character references—decimal or hexadecimal (hex) values representing special characters. ▪ For example, the & character is represented in decimal and hexadecimal notation as & and &, respectively. 35 © 2008 Pearson Education, Inc. All rights reserved.  Unordered list element ▪ creates a list in which each item in the list begins with a bullet symbol (typically a disc) ▪ Each entry is an (list item) element. Most web browsers render these elements with a line break and a bullet symbol at the beginning of the line. 36 © 2008 Pearson Education, Inc. All rights reserved. © 2008 Pearson Education, Inc. All rights reserved. © 2008 Pearson Education, Inc. All rights reserved. Nested Lists  Lists may be nested to represent hierarchical relationships, as in a multi-level outline.  Figure 2.11 demonstrates nested lists and ordered lists.  The ordered-list element creates a list in which each item begins with a number. 39 © 2008 Pearson Education, Inc. All rights reserved. © 2008 Pearson Education, Inc. All rights reserved. © 2008 Pearson Education, Inc. All rights reserved. © 2008 Pearson Education, Inc. All rights reserved. © 2008 Pearson Education, Inc. All rights reserved.  Tables are frequently used to organize data into rows and columns.  The element defines an HTML5 table  The summary attribute summarizes the table’s contents and is used by speech devices to make the table more accessible to users with visual impairments.  The caption element specifies a table’s title.  It’s good practice to include a general description of a table’s information in the table element’s summary attribute—one of the many HTML5 features that make web pages more accessible to users with disabilities.  Speech devices use this attribute to make the table more accessible to users with visual impairments. 44 © 2008 Pearson Education, Inc. All rights reserved. © 2008 Pearson Education, Inc. All rights reserved. © 2008 Pearson Education, Inc. All rights reserved. © 2008 Pearson Education, Inc. All rights reserved. © 2008 Pearson Education, Inc. All rights reserved.   A table can be split into three distinct sections: ▪ Foot ( element) ▪ Head ( ▪ Body (  Calculation results. element). element).  Footnotes.  Table titles  Primary table  Above body section in the  Column headers. data. code, but displays at the bottom in the page.  Element ▪ Defines individual table rows ▪ Element  Defines a header cell  Element ▪ Contains table data elements 49 © 2008 Pearson Education, Inc. All rights reserved. Using rowspan and colspan with Tables  Figure 2.13 introduces two new attributes that allow you to build more complex tables.  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.  The element is render as a line break in most browsers—any markup or text following a br element is rendered on the next line.  Like the element, br is an example of a void element.  Like the element, br is considered a legacy formatting element that you should avoid using—in general, formatting should be specified using CSS. 50 © 2008 Pearson Education, Inc. All rights reserved. © 2008 Pearson Education, Inc. All rights reserved. © 2008 Pearson Education, Inc. All rights reserved. © 2008 Pearson Education, Inc. All rights reserved. © 2008 Pearson Education, Inc. All rights reserved.  HTML5 provides forms for collecting information from users.  Figure 2.14 is a simple form that sends data to the web server for processing. 55 © 2008 Pearson Education, Inc. All rights reserved. method Attribute of the form Element  A form is defined by a element ▪ Attribute method specifies how the 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. ▪ The other possible value, method = "get", appends the form data directly to the end of the URL of the script, where it’s visible in the browser’s Address field. ▪ The action attribute of the form element specifies the script to which the form data will be sent 58 © 2008 Pearson Education, Inc. All rights reserved. action Attribute of the form Element ▪ The action attribute of the form element specifies the script to which the form data will be sent. ▪ Since we haven’t introduced server-side programming yet, we set this attribute to http://www.deitel.com for now. ▪ input elements that specify data to provide to the script that processes the form (also called the form handler). ▪ An input’s type is determined by its type attribute. 59 © 2008 Pearson Education, Inc. All rights reserved. Hidden Inputs  Forms can contain visual and nonvisual components.  Visual components: include clickable buttons and other graphical user interface components with which users interact.  Nonvisual components: called hidden inputs, store any data that you specify, such as e-mail addresses and HTML5 document file names that act as links. 60 © 2008 Pearson Education, Inc. All rights reserved. text input Element  The of type text inserts a text field into the form, which allows the user to input data.  The element provides users with information about the input element’s purpose  The size attribute specifies the number of characters visible in the text field.  Optional attribute maxlength limits the number of characters input into a text field. 61 © 2008 Pearson Education, Inc. All rights reserved.  submit and reset input Elements  The 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. 62 © 2008 Pearson Education, Inc. All rights reserved. Additional Form Elements  Figure 2.15 contains a form that solicits user feedback about a website.  The element inserts a multiline text area into the form.  The number of rows is specified with the rows attribute, and the number of columns (i.e., characters per line) with the cols attribute.  Default text can be specified in other input types, such as text fields, by using the value attribute. 63 © 2008 Pearson Education, Inc. All rights reserved. © 2008 Pearson Education, Inc. All rights reserved. © 2008 Pearson Education, Inc. All rights reserved. © 2008 Pearson Education, Inc. All rights reserved. © 2008 Pearson Education, Inc. All rights reserved. © 2008 Pearson Education, Inc. All rights reserved. © 2008 Pearson Education, Inc. All rights reserved.  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. 70 © 2008 Pearson Education, Inc. All rights reserved.  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 can be used individually and in groups. checkboxes 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. ▪ The option element adds items to the drop-down list. 71 © 2008 Pearson Education, Inc. All rights reserved. © 2008 Pearson Education, Inc. All rights reserved.  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. 73 © 2008 Pearson Education, Inc. All rights reserved. © 2008 Pearson Education, Inc. All rights reserved. © 2008 Pearson Education, Inc. All rights reserved. © 2008 Pearson Education, Inc. All rights reserved.  One way that search engines catalog pages is by reading the element’s contents. ▪ The name attribute identifies the type of meta element ▪ The content attribute  Of a keywords meta element: provides search engines with a list of words that describe a page, which are compared with words in search requests  Of a description meta element: provides a three- to four-line description of a site in sentence form, used by search engines to catalog your site. This text is sometimes displayed as part of the search result 78 © 2008 Pearson Education, Inc. All rights reserved. © 2008 Pearson Education, Inc. All rights reserved.