HTML & CSS. Objectives HTML Block | Inline elements Visual | Structural markup Project portfolio...

transcript

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.

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

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

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

Linking to Another Document

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

Linking to a Specific Section of A Document

This anchor links to a specific section of the current page .

Linking to a Specific Section of Another Document

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

This anchor links to an external web site.

Tutorials

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

Cascading Style Sheets

What are style sheets? HTML was not meant to specify

appearance for Web pages.

Tags suitable for marking up scientific papers.

HTML is for structure

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

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>

Why use styles?

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

Keep content/structure separate from styling.

External Styles

htmpage7.htm

htmpage3.htmpage1.htm

index.htm Style.cssStyle.css

• Make changes from a single document• Changes multiple documents

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.

CSS Level 2 (CSS2) released in 1998.

Added positioning properties allowed

CSS to be used for page layout.

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

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

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

Embedded External

Internal Style Sheets: Embedded

<head>

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>

</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; }

Style sheet | Rules

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

Rule Can be written this way

More about Rules | Selectors

h1 { color : #C0C0C0; }

The Rule

h1 {color : #c0c0c0;}

Selector Declaration

(What to format)

The Rule

h1 { color : #c0c0c0;

font-family : Arial;

font-size : 2em;

Selector

Declaration block

The Declaration

h1 { color : #C0C0C0; }

Property

Declaration - two parts separated by a colon:

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

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

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

Types of selectors | ID

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

Applies to ID “banner”

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

</style>

<h1 id=“banner”>Hello world!

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

HTML & CSS. Objectives HTML Block | Inline elements Visual | Structural markup Project portfolio...

Documents