HTML | DOM.

HTML | DOM

Objectives HTML – Hypertext Markup Language Common tags/elements
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 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 Aside Footer

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> 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>
Tags generally come in pairs. Beginning Tag <html> </html> Ending Tag

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

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

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

<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
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
<ul> <li>Apples</li> <li>Oranges</li> <li>Pears</li> </ul> Apples Oranges Pears

Structural: Ordered Lists
<ol> <li>Step 1</li> <li>Step 2</li> <li>Step 3</li> </ol> Step 1 Step 2 Step 3

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>….</html>
<HTML> Tag Reminds the browser that the document is a HTML document <html>….</html>

<head>….</head>
<HEAD> Tag Gives the browser information about the document Comes after the <HTML> tag <head>….</head>

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

<! - - Comments go here - - >
Comment Tag Text that shows up in the HTML source code, but does not show up in the browser window <! - - Comments go here - - >

<body>…</body>
<BODY> Tag All the information between the body tags appears in the browser’s window <body>…</body>

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>

Blog site

<nav> </nav>
<section> <header><h2>By the Sea></h2></header> </section> <aside> <section> <header> <h3>Categories</h3> </header> </section> <h3>Archives</h3> </aside> <section> <article> <header><h2>This is the title…</h2></header> </article> </section>

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 Descendent of <html> Descendent of <html> and <head> Siblings Child of <p>

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> <p> <h1> <strong>

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

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>

<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
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
<ul> <li>Apples</li> <li>Oranges</li> <li>Pears</li> </ul> Apples Oranges Pears

Structural: Ordered Lists
<ol> <li>Apples</li> <li>Oranges</li> <li>Pears</li> </l> Apples Oranges Pears

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>

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=“ Books</a> This anchor links to an external web site.

Linking to Another Web Site
<a href=“

Color Equivalent RED FF0000 GREEN 00FF00 BLUE 0000FF MAGENTA FF00FF
CYAN 00FFFF YELLOW FFFF00 BLACK WHITE FFFFFF baker's chocolate (5C3317) semi-sweet chocolate (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: FF0000 FF 00 00 Red Blue Green

Cascading Style Sheets
CSS

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

Rules, Selectors, Declarations
CSS

The Rule h1 {color : #c0c0c0;} Rule

The Rule h1 {color : #c0c0c0;} 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 Rule Rule h1 {color : #c0c0c0;} Selector Declaration

The Rule body { font-family : Verdana; background-color: #ffffff;}
Selector Declaration

The Declaration h1 {color : #c0c0c0;}
Has two parts separated by a colon: Property - that part before the colon Value - that part after the colon h1 {color : #c0c0c0;}

The Declaration h1 {color : #c0c0c0;} Value Property

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 h1 {color : #c0c0c0;}

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 font-family font-style font-variant font-weight
Five properties control font characteristics font-family font-style font-variant font-weight font-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 rgb(80%,40%,80%) rgb(204,102,204) #CC66CC
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 text-align property can take values left, right, center or justify body { text-align: left } p.display { text-align: center }

<link href="styles.css" rel="stylesheet" type="text/css" />
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" />

HTML | DOM.

Similar presentations

Presentation on theme: "HTML | DOM."— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

HTML | DOM.

Similar presentations

Presentation on theme: "HTML | DOM."— Presentation transcript:

Similar presentations

About project

Feedback