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
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.
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 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.
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>
<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.
<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>….</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>
<section> <section> <article> </section> <h1> <section> <address> <time datetime=""> <img> </article> </section> </section>
<article> <h3> <ol> <li></li> </ol> <aside> <p> <h3> <ol> <li></li> </ol> <h3> </article> </aside>
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 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>
<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>
<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.
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 Document <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>
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 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
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 Sheets A style sheet is a set of one or more rules that apply to an HTML document. H1 { color: #000000; }
Cascading Style Sheets Why use styles?
Cascading Style Sheets 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" />