HTML | DOM

HTML | DOM

Objectives

HTML – Hypertext Markup Language Sematic markup

Common tags/elementsDocument Object Model (DOM)Work on page | HTML | CSS | Responsive

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.

Document Structure | DocType If you do not declare a specific DocType

correctly a visitor’s browser must "guess" usually by applying the loosest possible

DocType or a "quirks" mode DocType of its own) resulting in slower rendering.

result in display variation between browsers.

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



<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




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


Structural: Heading Levels

Groups information into major points <h1>…</h1> Biggest heading level <h6>…</h6> Smallest heading level


<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



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.

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


<span>, <em>, <strong>, <cite>, <abbr>,<kbd>, <a>

See page 85 in Robbins text for list of inline elements



<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




course management system and diagrams the

<em>temporal aspects</em> of conversations. From the



</p>

<p> I am seeking funds to assist me in further developing

an intelligent online tool that provides semantic as well as


</p>

In the summer of 2008, I developed Mapping Temporal




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


Structural: Heading Levels Groups information into major points <h1>…</h1> Biggest heading level <h6>…</h6> Smallest heading level


<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



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

MAKING LINKS & COLOR

Linking to Another Document

Null links

<a href =“#”>This is a NULL link</a>

Linking to Another Document

<a href =“document.htm”>Text that acts as the link</a>

This anchor links to a document in the same folder as the current web page.

Linking to a Specific Section of Another Document

<a href=“document.htm#SectionTitle”>Text that acts as the link</a>

<a name=“SectionTitle”> </a>

This anchor links to a specific section of the document.htm page, which is in the same folder and the current web page.


<a href=“books/document.htm”>Read Books</a>

This anchor links to the document.htm page, which is in a folder titled books.


<a href=“http://www.cnn.com”>Read Books</a>

This anchor links to an external web site.

Linking to Another Web Site

<a href=“http://www.yahoo.com”>Yahoo</a>

http://www.yahoo.com/

Color Equivalent

REDRED FF0000 FF0000 GREEN GREEN 00FF00 00FF00 BLUEBLUE 0000FF 0000FF MAGENTA MAGENTA FF00FF FF00FF CYAN CYAN 00FFFF 00FFFF YELLOW YELLOW FFFF00 FFFF00 BLACKBLACK 000000 000000 WHITE FFFFFFWHITE FFFFFF baker's chocolatebaker's chocolate (5C3317) (5C3317) semi-sweet chocolatesemi-sweet chocolate (6B4226) (6B4226)

Color

Colors are defined using a hexadecimal notation for the combination of Red, Green, and Blue color values (RGB).

The lowest value that can be given to one light source is 0 (hex #00). The highest value is 255 (hex #FF)

Color

Hexadecimal value: FF0000Hexadecimal value: FF0000

FF 00 00FF 00 00

Red

GreenBlue

CASCADING STYLE SHEETS

CSS

Cascading Style Sheets

What are style sheets?

HTML was not meant to specify an exact appearance for your Web pages.

CSS (Cascading Style Sheets) allows you to specify more information about the appearance of elements on a Web page.


A style sheet is a set of one or more rules that apply to an HTML document.

H1 { color: #000000; }


Why use styles?


Update the look of a Web site by changing a single document.

Keep content separate from styling.

External Styles

page4.htm

page6.htmpage7.htm

page2.htmpage3.htmpage1.htm

index.htm Style.cssStyle.css

page5.htm

<link rel="styleSheet" type"text/css" href="styles.css">

External Styles

page4.htm

page6.htmpage7.htm

page2.htmpage3.htmpage1.htm

index.htm Style.cssStyle.css

page5.htm

• Make changes from a single document• Changes multiple documents

• Make changes from a single document• Changes multiple documents

<link rel="styleSheet" type"text/css" href="styles.css">

RULES, SELECTORS, DECLARATIONS

CSS

The Rule

h1 {color : #c0c0c0;}

Rule

The Rule

A rule consists of two parts:

Selector - the part before the left curly brace

Declaration - the part within the curly braces


The Rule


Selector Declaration

Rule

The Rule

body {font-family : Verdana;background-color: #ffffff;}

Selector Declaration

The Declaration

Has two parts separated by a colon: Property - that part before the colon

Value - that part after the colon


The Declaration


Property Value

The Declaration

Property is a quality or characteristic that something possesses (e.g., color, size, style).

The Declaration

Curly brackets {} help distinguish between selector, property, and value

Colon separates property and values

Semicolon separates declarations


Classes

Classes (applies to more than one type of element – several different styles for the same element.

.mytext {font-family: Verdana; font-size: 10pt;}

<p class=“mytext”>Hello World</p>

CSS Typography

Five properties control font characteristics

font-familyfont-stylefont-variantfont-weightfont-size

font-family

Value is a list of font names in decreasing order of preference

p { font-family: "The Sans", Verdana, Helvetica, sans-serif }

Names separated by a space should be in “ “

font-style & font-variant

font-style may be normal, italic or oblique (i.e. slanted)

font-variant may be normal or small-caps

font-weight

Values normal and bold have expected effect

Many font families have more than two weights, with no standard names

font-weight may be 100, 200,…, 900

font-size

Sizes relative to browser default may be chosen from xx-small, x-small, small, medium, large, x-large, xx-large

Sizes may be a percentage of inherited value, or specified in em units of inherited font

Leading

line-height property specifies leading

Use percentage (150%), ratio (1.5) or ems (1.5em) to specify leading relative to font size

font property

Combine all five font properties into a single declaration for font Can include composite size/leading Order is unspecified, but browsers seem to prefer style, variant, weight, size, family

p { font: italic bold 14pt/21pt "The Sans", Verdana, Helvetica, sans-serif }

Colour

background-color and color properties control the colour of background and textValues specify colours in RGB colour spacergb(r%, g%, b%)rgb(r, g, b) where r, g, b are in range 0–255#rrggbb where rr, gg, bb are hex values

rgb(80%,40%,80%) rgb(204,102,204) #CC66CC

Alignment

text-align property can take values left, right, center or justify

body { text-align: left } p.display { text-align: center }

External Stylesheets

Can put a collection of rules in a file and refer to it from within an HTML document

link element with href attribute points to stylesheet, rel="stylesheet", type="text/css“

<link href="styles.css" rel="stylesheet" type="text/css" />

Documents

HTML | DOM