Introducing HTML 5 Creating Web Pages with HTML 5 1

Web Pages, Servers, and Browsers 2  Web pages  Documents on the Web  Can contain images, video and sound clips  Stored on Web servers  Web browser  Used to view a Web page  Interprets the HTML and scripting language such as JavaScript and jQuery  HyperText Markup Language  Allows users to click items called links to open documents

HTML: The Language of the Web 3  Web page  Text file written in HyperText Markup Language (HTML)  Markup language  Describes structure and content of a document  Extensions  Differences in the language introduced by competing browsers

HTML: The Language of the Web 4  World Wide Web Consortium (W3C) World Wide Web Consortium (W3C)  Creates standards for browser manufacturers  Has no enforcement power but recommendations are usually followed  Companion site is  Provides online tutorials, documentation, and quizzesonline tutorialsdocumentation

The Structure of an HTML File 5  DOCTYPE tag  HTML tag  Root element  Can have only one root element  Head element  Contains information about the document  Can contain meta elements  Instructions in this section are done before the page is displayed and remains in memory.  Body element  Contains content to be displayed in the Web page  Sequential process of each line content

tags 6  tags are elements that provide information about the page – not the pages content  - describes content of page and used by search engines for SEO  - provides metadata – information about the content  - specifies a file that should be linked to the web page - not a link that is clicked  - contains script, not HTML nor CSS  - CSS styles

Versions of HTML and XHTML 7 What's a deprecated tag / attribute? Older HTML tags and attributes Superseded by other more functional or flexible alternatives (whether as HTML or as CSS) Eventually these tags are likely to become obsolete Deprecated HTML tags examples Inserts applet references an object sets font styles centers elements directory list adds search field menu list strike through text style sheetstext underline text style sheetstext

HTML: The Language of the Web 8  Direction of Web development  Focused on improving XML and XHTML  XML combined with CSS style sheets provides the same functionality as HTML, but with greater flexibility  XHTML was designed to overcome some of the problems with competing HTML standards and the inconsistent interpretation of the language by browsers.  HTML5 implements a complete separation of structure and presentation

Creating an HTML Document 9  Element  A distinct feature of a document  Each feature is marked within the HTML file with a tag  Tags are either Container tags or Empty tags  Container tags:  Have an Opening tag ( ) and a closing tag ( ) Meaning that the paragraph tag effects everything contained between the open and closing tags only.  Self closing tags  Have no content  the opening tag closes itself Note: There is a space between “br” and “/”.

Attributes 10  Tell more about an element  Appear INSIDE the opening tag only  Some attributes are global attributes  Some attributes are core attributes (most likely to use)  id  class  title  lang

HTML5 compliant code 11  Tags and attribute names in lowercase, instead of  Closing tags are required, i.e., a paragraph item must be coded here are lists of my items.  Empty tags must be closed, i.e., must be coded.  Attributes must be assigned a value, for instance the attribute to designate which image to display must be coded as src = “dog.jpg”  Attribute values must be in quotes. Example: align = “center”

HTML5 compliant code 12  Correct nesting. Closing tags always appear in reverse order of the opening tags.  The alt attribute is required for all images and should be assigned a meaningful description - if none exists, may be assigned with empty quotes. alt = “Sally Jones, Professor” alt = “ “ (Used in the case of decorative graphics)

Working with Block-level Elements 13  Elements are either Block-level, Inline, or Structural  Block-level elements  Contains content displayed in a separate section within the page  Examples: headings, Paragraphs, lists, tables, divisions, and spans  Note: DIV and SPAN are grouping tags  Inline elements  Placed within block-level elements  Not separated from other page content  Examples: Italics and bold

Creating Headings 14  Headings  Titles placed within the page body  HTML supports six heading elements, numbered h1 through h6  defines the most important heading. defines the least important heading.  Syntax to mark a heading element content

Creating Paragraphs 15  Paragraphs  Another popular block-level element  To mark content as a paragraph content  The tag starts a new line with a blank space above it, separating the new paragraph from the preceding element.

Creating Lists 16  HTML supports three kinds of lists:  an ordered list, which is used to display information in a numeric order  an unordered list, which list items are not listed in a particular order i.e. bullets  a definition list, which is a list of terms, each followed by a definition line that is typically indented slightly to the right

Ordered Lists 17 Item1 Item2... “ option ” specifies the type of character used to number the list of items: “ 1 ” displays with numbers (default) “a”, “A” displays either lowercase or uppercase letters. “i”, “I” displays Roman numerals 1.Conceptual Chemistry 2.Chemistry 3.Advanced Placement Chemistry a.Conceptual Chemistry b.Chemistry c.Advanced Placement Chemistry Output to the page

Unordered Lists 18 Item1 Item2... “ option ” specifies the type of symbol used to display the list of items: “ disc ” (default) “square” “circle” o Conceptual Chemistry o Chemistry o Advanced Placement Chemistry  Conceptual Chemistry  Chemistry  Advanced Placement Chemistry Output to the page

Definition List 19 Conceptual Chemistry An introductory course requiring basic arithematics Chemistry I An introductory course requiring solid algebra skills Conceptual Chemistry An introductory course requiring basic mathematics Chemistry I An introductory course requiring solid algebra skills

Block elements for special types of text 20   Used for portions of code that are formatted with line breaks and spaces  Preserves whitespace and uses a monospaced font   Used for quotations   Used for contact information for the development or owner of a web site

Block-level Elements 21

Structuring a page 22  Generic elements  - divides page content into sections that can be formatted and positioned using styles  - identifies text that can be formatted using styles  Semantic elements  - top of page  - generic section of page  - composition, like a newspaper article  - links to other pages  - sidebar  - bottom of page

Inline elements 23  Coded within a block element  Those that format text:  - bold  - italics  - subscript  - superscript  Those that identify content – convey meaning  - abbreviations  - citations  - computer code  - definitions  - emphasis  - keyboard entries (monospaced font)  - quotations  - mark a sequence of characters  - strongly emphasized  - computer variables

Inline elements - continued 24  Semantic inline elements  - 2 or more headings that form a composite heading  - date and time  datetime – attribute defining the format  pubdate – attribute indicating the date is the actual publication date for the article that contains the element  - an illustration referred to from the main content of the document  - caption that identifies a figure

Special Characters 25  Characters not represented on the keyboard, or  Characters that may have significance to the markup language.  Special Characters such as, and &, for example, should be represented by their character entities such as < for & for &. for a nonbreaking space (use multiple times for spacing).

Creating New Lines 26  Breaks  The tag inserts a single line break.  The tag is an empty tag which means that it has no end tag.  This text contains a line break.  Horizontal Rules  The tag defines a thematic break in an HTML page (e.g. a shift of topic).  The element is used to separate content (or define a change) in an HTML page 

Creating Links 27  A hyperlink (or link) is a word, group of words, or image that you can click on to jump to another document.  When you move the cursor over a link in a Web page, the arrow will turn into a little hand.  tag defines a hyperlink.  The most important attribute of the element is the href attribute, which indicates the link’s destination.  By default, links will appear as follows in all browsers:  An unvisited link is underlined and blue  A visited link is underlined and purple  An active link is underlined and red  SYNTAX  Mark content with a container tag: content  EXAMPLE Pixal Products

Comments 28  Comment Tag  Used to add notes with the code <!-- Chemistry Class Web Page Created for Robert Service High School -->

Working with Images 29  Inline images  Displays a graphic image located in a separate file within the contents of a block-level element  Most widely viewable in one of three file formats  JPEG, GIF (proprietary), or PNG  To markup an inline image  The alt attribute is used for users who do not display images.