Upload
bertram-wilson
View
226
Download
3
Tags:
Embed Size (px)
Citation preview
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.
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; }