HTML | DOM

Objectives  HTML – Hypertext Markup Language  Sematic markup  Common tags/elements  Document Object Model (DOM)  Work on page | HTML | CSS | Responsive  Assignment

HTML: BACKGROUND

What is Html/Xhtml?  HTML 5 is still a draft  HTML (4.01) is subsumed as XHTML 1.0  Extensible HyperText Markup Language (XHTML) extends HTML - reformulated in XML

What is Html/Xhtml?  XHTML was a cleaner and clearer standard compared to early versions of HTML.  HTML 5 offers new elements for better semantics, structure, drawing, media content, and handling of forms.  NavArticleSectionAsideFooter

HTML 5  Emphasizes semantics.  Removes some presentational elements.  Introduces new elements such as header, footer, article, sections, nav.  Use elements that best describe your content.  Work from the content outward.

HTML Elements  HTML markup divides a document into elements (i.e., paragraphs). This is paragraph one…. Element Content Element

HTML  Each individual markup code is referred to as an element or tag.  Each type of element has a name.  A, P, DIV, ARTICLE, IMG, ETC.  Each element is introduced by a start tag and terminated by an end tag

HTML: Tags  Hypertext MarkUp Language - HTML Beginning Tag Ending Tag Tags generally come in pairs.

HTML Elements Interface design Tech spotlight on trends Interface patterns Beginning Tag Ending Tag

HTML Tags  HTML elements that have no content - empty elements.  Empty elements have start and end tags run together:,,…  Empty elements such as:  Horizontal rule  Line break  Image  Form element

HTML: Attributes  Google.com 

DOCUMENT STRUCTURE HTML

HTML: Getting started - Robbins Robbins suggest beginning with the following steps:  Step 1: Start with Content  Examine content so you can determine appropriate markup  Step 2: Give the Document Structure  Step 3: Identify Text Elements  semantic markup E.g., h1-6, p, em, blockquote, q

Step 2: Give the Document Structure

Registration for W3 App Conference Hello, world!  A DTD – “defines the legal structure, elements, and attributes that are available for use in a document that complies to the DTD."  Definition of what is legal syntax in HTML and what isn't.

Step 2: Give the Document Structure Registration for W3 App Conference! Hello, world! HEAD BODY HTML Basic structure even in complex docs.

Step 3: Identify Text Elements  semantic markup h1-6 p br em blockquote q cite code

INLINE AND BLOCK LEVEL ELEMENTS

Block boxes and inline boxes  Block boxes and inline boxes—that correspond to the two types of tags—block-level and inline tags.

Block boxes and inline boxes  A block-level tag creates a break before and after the element.,,,,, etc.  Inline tags don’t create a break before or after element.,,,,,, See page 85 in Robbins text for list of inline elements

Block boxes and inline boxes  Inline tags don’t create a break before or after element. ”Mapping Temporal Relations of Discussions Software is a powerful tool”(Miller, 2010, p. 45), it can be used on …

Structural: Block-Level Elements p – paragraphs h1, h2,…,h6 – level 1, 2,…,6 headers blockquote – long quotations (not indented paragraphs) section aside article div – arbitrary division ol, ul, dl - list for tabular data

Structural: Paragraph Tag  …  Gives the appearance of paragraphs

In the summer of 2008, I developed Mapping Temporal Relations of Discussions Software (MTRDS) as a tool to analyze the temporal aspects of online course discussions. This Web-based prototype imports discussion files from a course management system and diagrams the temporal aspects of conversations. From the diagrams, one can observe the general time and date of discussion activity and individual patterns of interactivity. I am seeking funds to assist me in further developing an intelligent online tool that provides semantic as well as temporal analyses of online educational conversations.

In the summer of 2008, I developed Mapping Temporal Relations of Discussions Software (MTRDS) as a tool to analyze the temporal aspects of online course discussions. This Web-based prototype imports discussion files from a course management system and diagrams the temporal aspects of conversations. From the diagrams, one can observe the general time and date of discussion activity and individual patterns of interactivity. I am seeking funds to assist me in further developing an intelligent online tool that provides semantic as well as temporal analyses of online educational conversations.

Structural: Heading Levels  Groups information into major points  … Biggest heading level  … Smallest heading level

Structural: Heading Levels Heading Level 1 Heading Level 2 Heading Level 3 Heading Level 4 Heading Level 5 Heading Level 6

In the summer of 2009, I developed Mapping Temporal Relations of Discussions Software (MTRDS) as a tool to analyze the temporal aspects of online course discussions. This Web-based prototype imports discussion files from a course management system and diagrams the temporal aspects of conversations. From the diagrams, one can observe the general time and date of discussion activity and individual patterns of interactivity. I am seeking funds to assist me in further developing an intelligent online tool that provides semantic as well as temporal analyses of online educational conversations. Introduction Educational Conversations

Structural: HTML Lists  ul – unordered list  ol – ordered list  li – list element  dl – definition list Use pairs of dt (term) and dd (definition) elements within dl

Structural: Unordered Lists  Apples  Oranges  Pears Apples Oranges Pears

Structural: Ordered Lists 1. Step 1 2. Step 2 3. Step 3 Step 1 Step 2 Step 3

Structural: HTML Tables  Table elements contain tr (row) elements containing td (data, i.e. cell) elements  Tables are used for tabular data  Tables commonly used for page layout – not recommended Row 1Col 1 Row 2 Col 1

Tables commonly used for page layout – not recommended Proper use of table

Tables commonly used for page layout – not recommended Should not uses tables for layout.

Row 1Col 1 Row 2 Col 1

Row 1 Column 1 Row 2 Column 1

COMMONLY USED ELEMENTS

Tags in Every HTML Document … …. …

Tag  Reminds the browser that the document is a HTML document ….

Tag  Gives the browser information about the document  Comes after the tag ….

Tag  Places information in the title bar of the browser’s window, used by search engines optimization (SEO). ….

Comment Tag  Text that shows up in the HTML source code, but does not show up in the browser window

Tag  All the information between the body tags appears in the browser’s window …

… …. … Common HTML Tags/elements New in HTML 5

Blog site

By the Sea> This is the title… Categories Archives

HTML TREE: RELATIONSHIP OF ONE ELEMENT TO ANOTHER.

HTML Tree My Web Page Description Main Topic A web page about the days of the week, specifically Tuesday.

HTML Tree | DOM

HTML Tree | DOM Ancestor to all tags Ancestor to h1, p, strong Siblings Child of Descendent of Descendent of and

HTML Tree Document Object Model – DOM Markup gives document structure. Underlying document hierarchy is important. Elements follow or nested within one another - creates relationships between elements. Gives browsers cues on how to handle content. Foundation on which we add styles and behaviors with JavaScript.