Introduction to HTML5 PDF

Introduction to HTML5 Introduction  HTML5 (HyperText Markup Language 5) ◦ markup language that specifies the structure and content of documents that are displayed in web browsers  Here we will study: ◦ Basics HTML ◦ tables, which are particularly useful for structuring...

Introduction to HTML5 Introduction  HTML5 (HyperText Markup Language 5) ◦ markup language that specifies the structure and content of documents that are displayed in web browsers  Here we will study: ◦ Basics HTML ◦ 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 2 Editing HTML5  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 3 First HTML5 Example Next figure shows an HTML5 document named main.html. This first example displays the message Welcome to HTML5! in the browser. 4 First HTML5 Example(Cont’s) First HTML5 Example(Cont’s) Document Type Declaration  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. 6 First HTML5 Example(Cont’s) 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. 7 First HTML5 Example(Cont’s) html, head and body Elements  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 First HTML5 Example (cont.) Start Tags and End Tags  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 (=). 9 First HTML5 Example (Cont.) Title Element  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. how ? ◦ Titles usually appear in the title bar at the top of the browser window, in the browser tab on which the page is displayed, ◦ title element describes 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 10 First HTML5 Example (Cont.) Paragraph Element (...)  All text placed between the and tags forms one paragraph. 11 Headings  HTML5 provides six heading elements (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. ◦ Text size used to display each heading element can vary between browser, thus we can use CSS to control size and other text properties  Placing a heading at the top of each page helps viewers understanding the purpose of the page  Headers also help create an outline for a document and are 12 Example Linking 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 Example Linking (Cont.)  The strong element indicates that the content has high importance. Browsers typically render such text in a bold font.  Links are created using the a (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. 16 Linking (Cont.) 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. 17 Example Example(Cont’ s) Images  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 Express (www.photoshop.com), G.I.M.P. (www.gimp.org), Inkscape (www.inkscape.org) and many more.  Images may also be acquired from various 20 Example Images (cont.)  The img element’s src attribute specifies an image’s location  Every img element should have an alt attribute, which contains text that is displayed if the client cannot render the image  Width and height are optional attributes  If omitted, the browser uses the image’s actual width and height  Images are measured in pixels 22 Images (Cont.) 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: 23 Images (Cont.) Using Images as Hyperlinks  By using images as hyperlinks, you can create graphical web pages that link to other resources.  In Next figure, we create five different image hyperlinks.  Clicking an image in this example takes the user to a corresponding web. 24 Example Special Characters and Horizontal Rules  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 26 Example Special Characters and Horizontal Rules (Cont.)  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. 29 Lists Unordered list element ul ◦ creates a list in which each item in the list begins with a bullet symbol (typically 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 30 Example Lists (Cont.) Nested Lists  Lists may be nested to represent hierarchical relationships, as in a multi-level outline.  Next demonstrates nested lists and ordered lists.  The ordered-list element ol creates a list in which each item begins with a number. 32 Example Example(Cont’s) Tables  Tables are frequently used to organize data into rows and columns.  The table element defines an HTML5 table  The caption element specifies a table’s title. A table can be split into three distinct sections: ◦ Head (thead element)  Table titles  Column headers ◦ Body (tbody element)  Primary table data ◦ Table Foot (tfoot element)  Calculation results  Footnotes  Above body section in the code, but displays at the bottom in the page 35 Tables (Cont.) tr Element ◦ Defines individual table rows Element th  Defines a header cell Td Element ◦ Contains table data elements 36 Example Example(Cont’s) Tables (Cont.) Using rowspan and colspan with Tables  Next Figure 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 br 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 img element, br is an example of a void element.  Like the hr element, br is considered a legacy formatting element that you should avoid using—in general, formatting should be 39 Example Example(Cont’s)