HTML & CSS

Objectives

HTML Block | Inline elementsVisual | Structural markupProject portfolio page

Block boxes and inline boxes

HTML create boxes

Block boxes and inline boxes—that correspond to the two types of tags—

• Inline tags

•Block-level tags.

Block boxes and inline boxes

Inline tags don’t create a break before or after element.

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

<q> A block-level tags create a break before and

after the element.

<p> <h>,<ol>,<div>, etc.

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

developing an <em>intelligent online tool</em>

that provides semantic as well as temporal analyses

of online educational conversations. </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>

Block boxes and inline boxes

Block InLine

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.

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.

Block boxes and inline boxes

Structural: Block-Level Elements

p – paragraphs h1, h2,…,h6 – level 1, 2,…,6 headers blockquote – long quotations div – arbitrary division <section><article><nav><aside> OL, UL, DL - list <table> for tabular data

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>

Making Links

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

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

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

This anchor links to a specific section of the current 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 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 Another Site

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

This anchor links to an external web site.

Tutorials

http://www.w3schools.com/html/

Cascading Style Sheets

CSS

Cascading Style Sheets

What are style sheets? HTML was not meant to specify

appearance for Web pages.

Tags suitable for marking up scientific papers.

Sci

enti

fic

pap

ers

Sci

enti

fic

pap

ers

HTML is for structure

Cascading Style Sheets

What are style sheets?

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

Zen Garden

Cascading Style Sheets

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

h1 { color: #000000; }

<p style="color: #C7AA8D;”> 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. </p>

<p style="color: blue;”> 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>

Cascading Style Sheets

Why use styles?

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

Keep content/structure separate from styling.

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

Cascading Style Sheets

History

CSS Level 1 – CSS1

First version of CSS (CSS Level 1 - CSS1) in 1996.

Included properties for font, color, and spacing instructions to page elements.

Lack of browser support prevented

widespread use of CSS.

CSS2

CSS Level 2 (CSS2) released in 1998.

Added positioning properties allowed

CSS to be used for page layout.

CSS2

CSS Level 2, Revision 1 (CSS2.1) minor adjustments to CSS2 and is currently a working draft or a Candidate Recommendation (W3C).

CSS2.1 and CSS3

CSS 2.1 builds on CSS2 which builds on CSS1. CSS 2.1 is derived from and will replace CSS2. CSS3 specification – Working draft

CSS

Most browsers support majority of CSS1, CSS2, and CSS2.1 specifications.

Some browsers already support features from CSS Level 3 (CSS3) - still in development.

Source : www.w3.org/Style/CSS.

Ways to Include styles in documents

Ways to Include styles in documents

Inline styles<h1 style="color: #C7AA8D;">Heading 1</h1>

Embedded External

Internal Style Sheets: Embedded

<head>

<style type="text/css“>

h1 { color : #C0C0C0; }

font-family: Arial; font-size: 1.5em; }

p { font-size: small;

font-family: sans-serif; }

</style>

</head>

External Style Sheets | Linked with HTML | 1 or more sheets

<head>

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

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

</head>

rel="stylesheet" | identifies the type of link, link to a style sheet.

type="text/css" tells browser what type of data, a text file with CSS.

Rules, Selectors, Declarations

CSS Grammar

CSS - one or more style instructions (called Rules).

Rules describe how elements get displayed.

h1 { color: green; } or h1 {color : rgb(255, 0,0);}

p { font-size: small; font-family: sans-serif; }

Style sheet | Rules

p { font-family: sans-serif; }

Rule

Style sheet | Rules

p { font-size: small; font-family: sans-serif; }

Rule Can be written this way

More about Rules | Selectors

h1 { color : #C0C0C0; }

Rule

The Rule

h1 {color : #c0c0c0;}

Selector Declaration

Rule

(What to format)

The Rule

h1 { color : #c0c0c0;

font-family : Arial;

font-size : 2em;

}

Selector

Declaration block

Rule

The Declaration

h1 { color : #C0C0C0; }

Property

Declaration - two parts separated by a colon:

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

Value

The Declaration

h1 { color : #c0c0c0; font-size : 2em;

}

p { font-family : Arial;}

Brackets distinguish declarations | rules

Colon separates property and values

Semicolon separates declarations

Types of selectors

Types of selectors

1. Tag or HTML Selectors: Page-Wide Styling

2. Class Selectors: Pinpoint Control

3. ID Selectors: Specific page sections

4. Group Selectors

Types of selectors | HTML | Tag

Tag selector

h1 {color : #c0c0c0;}

body {background-color : #FFFFFF;}

p {padding : 10px;}

Types of selectors | Classes

•Class selector

.mytext {font-family: Verdana; font-size: 14px;}

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

<span class=“mytext”>Learning CSS</span>

Types of selectors | ID

ID selectors identify:

• Major sections

• Configured with #idname

#banner { background-color : #FF00FF;}

<div id=“banner”> </div>

Types of selectors | ID

Creates a rule for an id titled “banner”. Red, large, italic font.

Applies to ID “banner”

<style type="text/css">

#banner { color : #FF0000;font-size:2em; font-style: italic;

}

</style>

<h1 id=“banner”>Hello world!

</h1>

Combining Rules | Group Selectors

h1 { color : #F1CD33; }

h2 { color : #F1CD33; }

h3 { color : #F1CD33; }

h4 { color : #F1CD33; }

h5 { color : #F1CD33; }

h6 { color : #F1CD33; }

OR Groups selector

h1, h2, h3, h4, h5, h6 { color : #F1CD33; }