html dom n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
HTML | DOM PowerPoint Presentation
Download Presentation
HTML | DOM

Loading in 2 Seconds...

play fullscreen
1 / 113

HTML | DOM - PowerPoint PPT Presentation


  • 213 Views
  • Uploaded on

HTML | DOM. Objectives. HTML – Hypertext Markup Language Sematic markup Common tags/elements Document 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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'HTML | DOM' - reegan


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
objectives
Objectives
  • HTML – Hypertext Markup Language
    • Sematic markup
  • Common tags/elements
  • Document Object Model (DOM)
  • Work on page | HTML | CSS | Responsive
what is html xhtml
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 xhtml1
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 Aside Footer
html 5
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 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

slide8
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
HTML: Tags
  • Hypertext MarkUp Language - HTML

Tags generally come in pairs.

Beginning Tag

<html>

</html>

Ending Tag

html elements1
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 tags1
HTML Tags
  • HTML elements that have no content - empty elements.
  • Empty elementshave 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
HTML: Attributes
  • <a href=“/” title=”google link”>Google.com</a>
  • <img src=“myimage.jpg” alt=“Company XYZ logo” />
  • <article id=“newsGlobal” class=“typeSize”></article>
html getting started robbins
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 structure1
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.
document structure doctype
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 structure2
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>

Basic structure even in complex docs.

HEAD

HTML

BODY

step 3 identify text elements
Step 3: Identify Text Elements
  • semantic markup
    • h1-6
    • p
    • br
    • em
    • blockquote
    • q
    • cite
    • code
block boxes and inline boxes
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 boxes1
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 boxes2
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
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
Structural: Paragraph Tag
  • <p>…</p>
  • Gives the appearance of paragraphs
slide26

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

slide27

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 aspectsof 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
Structural: Heading Levels
  • Groups information into major points
  • <h1>…</h1> Biggest heading level
  • <h6>…</h6> Smallest heading level
structural heading levels1
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>

slide30

<h1> Introduction</h1>

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.

<h2> Educational Conversations</h2>

structural html lists
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
Structural: Unordered Lists
  • Apples
  • Oranges
  • Pears

<ul>

<li>Apples</li>

<li>Oranges</li>

<li>Pears</li>

</ul>

structural ordered lists
Structural: Ordered Lists
  • Step 1
  • Step 2
  • Step 3

<ol>

<li>Step 1</li>

<li>Step 2</li>

<li>Step 3</li>

</ol>

structural html tables
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>

slide37

<table>

<tr><td>Row 1Col 1</td></tr>

<tr><td>Row 2 Col 1</td></tr>

</table>

tags in every html document
Tags in Every HTML Document

<!doctype html>

<html>…</ html >

<head>…</head>

<title>….</title>

<body>…</body>

html tag
<HTML> Tag
  • Reminds the browser that the document is a HTML document

<html>….</html>

head tag
<HEAD> Tag
  • Gives the browser information about the document
  • Comes after the <HTML> tag

<head>….</head>

title tag
<TITLE> Tag
  • Places information in the title bar of the browser’s window, used by search engines optimization (SEO).

<title>….</title>

comment tag
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
<BODY> Tag
  • All the information between the body tags appears in the browser’s window

<body>…</body>

common html tags elements
Common HTML Tags/elements

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

New in HTML 5

<article></article>

<aside></aside>

<section></section>

<header></header>

<footer></footer>

<figure></figure>

<figcaption></figcaption>

slide48

<section>

<section>

<article>

</section>

<h1>

<section>

<address>

<time datetime="">

<img>

</article>

</section>

</section>

slide49

<article>

<h3>

<ol>

<li></li>

</ol>

<aside>

<p>

<h3>

<ol>

<li></li>

</ol>

<h3>

</article>

</aside>

slide51

<nav> </nav>

<section>

<header><h2>By the Sea></h2></header>

</section>

<aside>

<section>

<header>

<h3>Categories</h3>

</header>

</section>

<section>

<header>

<h3>Archives</h3>

</header>

</section>

</aside>

<section>

<article>

<header><h2>This is the title…</h2></header>

</article>

</section>

html tree
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 Tree | DOM

<html>

<head>

<body>

<title>

<h1>

<p>

<strong>

html tree dom1
HTML Tree | DOM

<html>

Ancestor to all tags

Ancestor to h1, p, strong

<head>

<body>

Descendent of <html>

<title>

<h1>

<p>

Descendent of <html> and <head>

Siblings

<strong>

Child of <p>

html tree1
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.

<html>

<head>

<body>

<title>

<h1>

<p>

<strong>

visual vs structural1
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 boxes3
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 boxes4
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 boxes5
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 elements1
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 tag1
Structural: Paragraph Tag
  • <p>…</p>
  • Gives the appearance of paragraphs
slide65

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

slide66

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 aspectsof 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 levels2
Structural: Heading Levels
  • Groups information into major points
  • <h1>…</h1> Biggest heading level
  • <h6>…</h6> Smallest heading level
structural heading levels3
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>

slide69

<h1> Introduction</h1>

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.

<h2> Educational Conversations</h2>

structural html lists1
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 lists1
Structural: Unordered Lists
  • Apples
  • Oranges
  • Pears

<ul>

<li>Apples</li>

<li>Oranges</li>

<li>Pears</li>

</ul>

structural ordered lists1
Structural: Ordered Lists
  • Apples
  • Oranges
  • Pears

<ol>

<li>Apples</li>

<li>Oranges</li>

<li>Pears</li>

</l>

structural html tables1
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>

slide74

<table>

<tr><td>Row 1Col 1</td></tr>

<tr><td>Row 2 Col 1</td></tr>

</table>

linking to another document
Linking to Another Document

Null links

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

linking to another document1
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
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.

linking to a specific section of another document1
Linking to a Specific Section of Another Document

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

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

linking to a specific section of another document2
Linking to a Specific Section of Another Document

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

This anchor links to an external web site.

linking to another web site
Linking to Another Web Site

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

color equivalent
Color Equivalent
  • RED FF0000
  • GREEN 00FF00
  • BLUE 0000FF
  • MAGENTA FF00FF
  • CYAN 00FFFF
  • YELLOW FFFF00
  • BLACK 000000
  • WHITE FFFFFF
  • baker's chocolate (5C3317)
  • semi-sweet chocolate (6B4226)
color
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)
color1
Color

Hexadecimal value: FF0000

FF 00 00

Red

Blue

Green

cascading style sheets1
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.
cascading style sheets2
Cascading Style Sheets
  • A style sheet is a set of one or more rules that apply to an HTML document.

H1 { color: #000000; }

cascading style sheets3
Cascading Style Sheets

Why use styles?

cascading style sheets4
Cascading Style Sheets
  • Update the look of a Web site by changing a single document.
  • Keep content separate from styling.
external styles
External Styles

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

page2.htm

page1.htm

page3.htm

index.htm

Style.css

page4.htm

page7.htm

page5.htm

page6.htm

external styles1
External Styles

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

  • Make changes from a single document
  • Changes multiple documents

page2.htm

page1.htm

page3.htm

index.htm

Style.css

page4.htm

page7.htm

page5.htm

page6.htm

the rule
The Rule

h1 {color : #c0c0c0;}

Rule

the rule1
The Rule

A rule consists of two parts:

  • Selector - the part before the left curly brace
  • Declaration - the part within the curly braces

h1 {color : #c0c0c0;}

the rule2
The Rule

Rule

h1 {color : #c0c0c0;}

Selector

Declaration

the rule3
The Rule

body {

font-family : Verdana;

background-color: #ffffff;}

Selector

Declaration

the declaration
The Declaration

Has two parts separated by a colon:

  • Property - that part before the colon
  • Value - that part after the colon

h1 {color : #c0c0c0;}

the declaration1
The Declaration

h1 {color : #c0c0c0;}

Value

Property

the declaration2
The Declaration
  • Property is a quality or characteristic that something possesses (e.g., color, size, style).
the declaration3
The Declaration
  • Curly brackets {} help distinguish between selector, property, and value
  • Colon separates property and values
  • Semicolon separates declarations

h1 {color : #c0c0c0;}

classes
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
CSS Typography
  • Five properties control font characteristics
          • font-family
          • font-style
          • font-variant
          • font-weight
          • font-size
font family
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 & font-variant
  • font-style may be normal, italic or oblique (i.e. slanted)
  • font-variant may be normal or small-caps
font weight
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
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
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
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
Colour
  • background-color and color properties control the colour of background and text
  • Values specify colours in RGB colour space
  • rgb(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
Alignment
  • text-align property can take values left, right, center or justify

body { text-align: left }

p.display { text-align: center }

external stylesheets
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" />