HTML | DOM. Objectives HTML – Hypertext Markup Language Sematic markup Common tags/elements ...

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


<!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.


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


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.

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>

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.

HTML | DOM. Objectives HTML – Hypertext Markup Language Sematic markup Common tags/elements ...

Documents

Transcript of HTML | DOM. Objectives HTML – Hypertext Markup Language Sematic markup Common tags/elements ...