HTML | DOM
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
HTML | DOM
Objectives
HTML – Hypertext Markup Language Sematic markup
Common tags/elementsDocument 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.
Nav Article Section AsideFooter
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).
<p>This is paragraph one….</p><p>This is paragraph one….</p>
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
<html>
</html>
Beginning Tag
Ending Tag
Tags generally come in pairs.
HTML Elements
<header>
<hgroup><h1>Interface design</h1> <p>Tech spotlight on
trends</p><h2>Interface patterns</h2>
</hgroup>
</header>
Beginning Tag
Ending Tag
HTML Tags
HTML elements that have no content - empty elements.
Empty elements have start and end tags run together: <img />, <hr />,…
Empty elements such as: <hr /> Horizontal rule <br /> Line break <img /> Image <input /> Form element
HTML: Attributes
<a href=“/” title=”google link”>Google.com</a>
<img src=“myimage.jpg” alt=“Company XYZ logo” />
<article id=“newsGlobal” class=“typeSize”></article>
DOCUMENT STRUCTURE
HTML
HTML: Getting started - RobbinsRobbins 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
Step 2: Give the Document Structure
<!doctype html> <html>
<head><meta charset=“utf-8”> <title> Registration for W3 App Conference</title></head>
<body> <p>Hello, world!</p></body>
</html>
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<!doctype html>
<html><head><meta charset=“utf-8”><title>Registration for W3 App Conference!</title></head><body><section><article> <nav></nav> <p>Hello, world!</p></article></section></body></html>
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.
<p>, <h>,<div>, <section>, <article>, etc.
Inline tags don’t create a break before or after element.
<span>, <em>, <strong>, <cite>, <abbr>,<kbd>, <a>
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.
<cite>
<cite>”Mapping Temporal Relations of Discussions Software is a powerful tool”(Miller, 2010, p. 45)</cite>, it can be used on …
Structural: Block-Level Elements
p – paragraphsh1, h2,…,h6 – level 1, 2,…,6 headersblockquote – long quotations (not indented paragraphs)sectionasidearticlediv – arbitrary divisionol, ul, dl - list<table> for tabular data
Structural: Paragraph Tag
<p>…</p> Gives the appearance of paragraphs
<p> 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
<em>temporal aspects</em> of conversations. From the
diagrams, one can observe the general time and date of
discussion activity and individual patterns of interactivity.
</p>
<p> 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.
</p>
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 <h1>…</h1> Biggest heading level <h6>…</h6> Smallest heading level
Structural: Heading Levels
<h1>Heading Level 1</h1><h2>Heading Level 2</h2><h3>Heading Level 3</h3><h4>Heading Level 4</h4><h5>Heading Level 5</h5><h6>Heading Level 6</h6>
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.
<h1> Introduction</h1>
<h2> Educational Conversations</h2>
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
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Pears</li>
</ul>
Structural: Ordered Lists
1. Step 12. Step 23. Step 3
<ol>
<li>Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
</ol>
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<table><tr><td>Row 1Col 1</td></tr><tr><td>Row 2 Col 1</td></tr></table>
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.
<table>
<tr><td>Row 1Col 1</td></tr> <tr><td>Row 2 Col 1</td></tr>
</table>
Row 1 Column 1
Row 2 Column 1
COMMONLY USED ELEMENTS
Tags in Every HTML Document
<!doctype html> <html>…</ html ><head>…</head><title>….</title><body>…</body>
<HTML> Tag
Reminds the browser that the document is a HTML document
<html>….</html>
<HEAD> Tag
Gives the browser information about the document
Comes after the <HTML> tag
<head>….</head>
<TITLE> Tag
Places information in the title bar of the browser’s window, used by search engines optimization (SEO).
<title>….</title>
Comment Tag
Text that shows up in the HTML source code, but does not show up in the browser window
<! - - Comments go here - - >
<BODY> Tag
All the information between the body tags appears in the browser’s window
<body>…</body>
<!doctype html> <html>…</ html ><head>…</head><title>….</title><body>…</body>
<img><ol><li></li></ol> <ul><li></li></ul><blockquote></blockquote><table></table>
<div><form></form><input>
<h1-6></h1-6><p></p><em></em><br />
Common HTML Tags/elements
New in HTML 5<article></article><aside></aside><section></section><header></header><footer></footer><figure></figure><figcaption></figcaption>
<article>
</article>
<section>
</section><h1>
<time datetime="">
<address>
<img>
<section>
</section>
<section>
</section>
<article>
</article>
<ol><li></li></ol>
<h3>
</aside>
<aside>
<ol><li></li>
</ol>
<h3>
<h3>
<p>
Blog site
<nav> </nav><section>
<header><h2>By the Sea></h2></header>
</section><section><article><header><h2>This is the title…</h2></header>
</article></section>
<aside> <section> <header> <h3>Categories</h3> </header></section>
<section> <header> <h3>Archives</h3> </header> </section></aside>
HTML TREE: RELATIONSHIP OF ONE ELEMENT TO ANOTHER.
HTML Tree
<html><head>
<title>My Web Page Description</title></head><body><h1>Main Topic</h1>
<p>A web page about the days of the week, specifically<strong>Tuesday.</strong>
</p>
</body></html>
HTML Tree | DOM
<html>
<head> <body>
<title> <p><h1>
<strong>
HTML Tree | DOM
<html>
<head> <body>
<title> <p><h1>
<strong>
Ancestor to all tags
Ancestor to h1, p, strong
Siblings
Child of <p>
Descendent of <html>
Descendent of <html> and <head>
HTML Tree
<html>
<head> <body>
<title> <p><h1>
<strong>
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.
Related Documents
