html | dom
DESCRIPTION
HTML | DOM. Objectives. HTML – Hypertext Markup Language Sematic markup Common tags/elements Document Object Model (DOM) Work on page | HTML | CSS | Responsive. Tags in Every HTML Document. … … …. …. Tag. - PowerPoint PPT PresentationTRANSCRIPT
HTML | DOM
Objectives
HTML – Hypertext Markup Language Sematic markup
Common tags/elements Document Object Model (DOM) Work on page | HTML | CSS |
Responsive
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><canvas></canvas><nav></nav><hgroup></ hgroup > (Removed)<section></section><header></header><footer></footer><figure></figure><figcaption></figcaption>W3Schools
<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.
Types of selectors | Dependent Classes Dependent Classes (when the class is applied
to a specific tag.)
h1.hiLight {background-color : blue;}.hiLight {background-color : yellow;}
<h1 class=“hiLight”>Hello World</h1><h2 class=“hiLight”>Hello World</h2><p class=“hiLight”>Hello World</p>
Types of selectors | Dependent Classes Dependent Classes (when the class is applied
to a specific tag.)
h1.hiLight {background-color : blue;}.hiLight {background-color : yellow;}
<h1 class=“hiLight”>Hello World</h1><h2 class=“hiLight”>Hello World</h2><p class=“hiLight”>Hello World</p>
VISUAL VS. STRUCTURAL
Markup
Visual vs. Structural
HTML - evolved from original version with tags suitable for marking up scientific papers.
Recent versions emphasize structural markup, but there are visual markup features left over from earlier versions.
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 – 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 <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. Apples2. Oranges3. Pears
<ol>
<li>Apples</li>
<li>Oranges</li>
<li>Pears</li>
</l>
Structural: HTML Tables
Table elements contain tr (row) elements containing td (data, i.e. cell) elements
Tables are very commonly used for page layout <table>
<tr><td>Row 1Col 1</td></tr><tr><td>Row 2 Col 1</td></tr></table>
<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