Lecture 01

11/3/2009
Review HTML
What is HTML?
HTML is a language for describing web pages.
HTML stands for Hyper Text Markup Language
HTML is not a programming language, it is a markup language
A markup language is a set of markup tags
HTML uses markup tags to describe web pages
Review HTML
HTML Tags
HTML markup tags are usually called HTML tags
HTML tags are keywords surrounded by angle brackets
like <html>
HTML tags normally come in pairs like <b> and </b>
The first tag in a pair is the start tag, the second tag is
the end tag
Start and end tags are also called opening tags and
closing tags
1
11/3/2009
Review HTML
HTML Documents = Web Pages
HTML documents describe web pages
HTML documents contain HTML tags and plain text
HTML documents are also called web pages
The purpose of a web browser (like Internet Explorer or

Firefox) is to read HTML documents and display them as web
pages. The browser does not display the HTML tags, but uses
the tags to interpret the content of the page:
Review HTML
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph</p>
</body>
</html>
Example Explained
The text between <html> and </html> describes the web page
The text between <body> and </body> is the visible page content
The text between <h1> and </h1> is displayed as a heading
The text between <p> and </p> is displayed as a paragraph
2
11/3/2009
Basic HTML
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<html>
<body>
<h1>This is heading 1</h1>

</body>
</html>
Basic HTML
HTML Paragraphs
HTML paragraphs are defined with the <p> tag.
<html>
<body>
<p>This is a paragraph.</p>
</body>
</html>
3
11/3/2009
Basic HTML
HTML Links
HTML links are defined with the <a> tag.
<html>
<body>
<a href="http://www.w3schools.com"> This is a link

This is a link</a>
</body>
</html>
HTML ELEMENTS
An HTML element is everything from the start tag to the end tag:
Start tag Content End tag

<p> This is a paragraph </p>
<a href="default.htm" > This is a link </a>
An HTML element starts with a start tag / opening tag

An HTML element ends with an end tag / closing tag
The element content is everything between the start and the end tag
Some HTML elements have empty content
Empty elements are closed in the start tag
Most HTML elements can have attributes
4
11/3/2009
HTML Attributes
HTML elements can have attributes
Attributes provide additional information about the element
Attributes are always specified in the start tag
Attributes come in name/value pairs like: name="value“
Attribute values should always be enclosed in quotes. Double style quotes
are the most common, but single style quotes are also allowed.
Attribute Example
HTML links are defined with the <a> tag. The link address is provided as an
attribute:
<a href="http://www.w3schools.com">This is a link</a>
HTML layouts
Table: One very common practice with HTML, is to use HTML tables to format the
layout of an HTML page.
<html>
<body>
<table border="0" width="100%" cellpadding="10">
<tr>
<td width="50%" valign="top">
This is some text. This is some text. This is some text. This is
some text. This is some text.
</td>
<td width="50%" valign="top">
Another text. Another text. Another text. Another text.
Another text. Another text. Another text.
</td>
</tr>
</table>
</body>
</html>
5
11/3/2009
HTML layouts
Frame: you can display more than one HTML document in the same browser
window. Each HTML document is called a frame, and each frame is
independent of the others.
The disadvantages of using frames are:
The web developer must keep track of more HTML documents
It is difficult to print the entire page
<html>
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
</html>
HTML layouts
<html>
<frameset rows="25%,50%,25%">
<frame src="frame_c.htm">
</frameset>
</html>
6
11/3/2009
HTML layouts
The Frameset Tag
The <frameset> tag defines how to divide the window into
frames
Each frameset defines a set of rows or columns
The values of the rows/columns indicate the amount of screen
area each row/column will occupy
HTML layouts
The Frame Tag
The <frame> tag defines what HTML document to put into each
frame
<frameset cols="25%,75%">
</frameset>
The first column is set to 25% of the width of the browser window.
The HTML document "frame_a.htm" is put into the first column.
The second column is set to 75% of the width of the browser window.
the HTML document "frame_b.htm" is put into the second column.
7
11/3/2009
HTML layouts
Font: you can specify both the size and the type of the browser
output.
<html>
<body>
<p><font size="2" face="Verdana">

This is a paragraph.
</font></p>
<p><font size="5" face="Times" color="red">

This is another paragraph.
</font></p>
</body>
</html>
HTML layouts
Font Attributes
Attribute Example Purpose

size="number" size="2" Defines the font size
size="+number" size="+1" Increases the font size
size="-number" size="-1" Decreases the font
size
face="face-name" face="Times" Defines the font-name
color="color-value" color="#eeff00" Defines the font color
color="color-name" color="red" Defines the font color
8
11/3/2009
HTML layouts
The <font> Tag Should NOT be Used
The <font> tag is deprecated in the latest versions of HTML
(HTML 4 and XHTML).
The World Wide Web Consortium (W3C) has removed the
<font> tag from its recommendations.
In future versions of HTML, style sheets (CSS) will be used to
define the layout and display properties of HTML elements.
HTML 4.0
HTML 3.2 Was Very Wrong !
The original HTML was never intended to contain tags for
formatting a document. HTML tags were intended to define the
content of the document like:
<p>This is a paragraph</p>
<h1>This is a heading</h1>
When tags like <font> and color attributes were added to the
HTML 3.2 specification, it started a nightmare for web
developers. Development of large web sites where fonts and
color information had to be added to every single Web page,
became a long, expensive and unduly painful process.
9
11/3/2009
HTML 4.0
In HTML 4.0 all formatting can be removed from the HTML
document and stored in a separate style sheet.
Because HTML 4.0 separates the presentation from the
document structure, we have what we always needed: Total
control of presentation layout without messing up the document
content.
HTML 4.0
What Should You do About it ?
Do not use presentation attributes inside your HTML tags if you
can avoid it. Start using styles!
Do not use deprecated tags. Visit our complete HTML 4.01
Reference to see which tags and attributes that are
deprecated.
10
11/3/2009
CSS
CSS stands for Cascading Style Sheets
Styles define how to display HTML elements
Styles were added to HTML 4.0 to solve a problem
External Style Sheets can save a lot of work
External Style Sheets are stored in CSS files
With HTML 4.0 all formatting can be moved out of the HTML
document and into a separate style sheet.
CSS
CSS syntax is made up of three parts: a selector, a property and a value
selector {property:value}
The selector is normally the HTML element/tag you wish to define

the property is the attribute you wish to change, and each property can
take a value.
The property and value are separated by a colon, and surrounded by curly
braces
Ex. body {color:black}
p {font-family:"sans serif"}
p {text-align:center;color:red}
11
11/3/2009
CSS
Grouping
You can group selectors. Separate each selector with a comma.
In the example below we have grouped all the header
elements. All header elements will be displayed in green text
color:
h1,h2,h3,h4,h5,h6
{
color:green
}
CSS
Class selector: you can define different styles for the same type of HTML
element.
p.right {text-align:right}
p.center {text-align:center}
You have to use the class attribute in your HTML document:

<p class="right">This paragraph will be right-aligned.</p>
<p class="center">This paragraph will be center-aligned.</p>
You can also omit the tag name in the selector to define a style that will be
used by all HTML elements that have a certain class. In the example below, all
HTML elements with class="center" will be center-aligned:
.center {text-align:center} <h1 class="center">This heading will be center-

aligned</h1>
<p class="center">This paragraph will also be
center-aligned.</p>
12
11/3/2009
CSS
Add Styles to Elements with Particular Attributes
You can also apply styles to HTML elements with particular
attributes.
The style rule below will match all input elements that have a
type attribute with a value of "text"
input[type="text"] {background-color:blue}
CSS
The id Selector
You can also define styles for HTML elements with the id selector. The id
selector is defined as a #.
The style rule below will match the element that has an id attribute with a
value of "green"
#green {color:green}
The style rule below will match the p element that has an id with a value of
"para1"
p#para1
{
text-align:center;
color:red
}
13
11/3/2009
CSS
<html>
<head>
<style type="text/css">
#para1
{
text-align:center;
color:red
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the
style.</p>
</body>
</html>
CSS
CSS Comments
Comments are used to explain your code, and may help you
when you edit the source code at a later date. A comment will
be ignored by browsers. A CSS comment begins with "/*", and
ends with "*/", like this:
/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial
}
14
11/3/2009
CSS
External Style sheet
An external style sheet is ideal when the style is applied to
many pages. With an external style sheet, you can change the
look of an entire Web site by changing one file.
Each page must link to the style sheet using the <link> tag. The
<link> tag goes inside the head section
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
CSS
An external style sheet can be written in any text editor. The
file should not contain any html tags.
Your style sheet should be saved with a .css extension.
An example of a style sheet file is shown below:
hr {color:sienna}
p {margin-left:20px}
body {background-image:url("images/back40.gif")}
15
11/3/2009
CSS
Inline Styles
An internal style sheet should be used when a single document
has a unique style. You define internal styles in the head
section of an HTML page, by using the <style> tag, like this:
<head>
<style type="text/css">
hr {color:sienna}
p {margin-left:20px}
body {background-image:url("images/back40.gif")}
</style>
</head>
Exercise: Design your web with CSS

Study CSS from web page:
http://www.w3schools.com/css/demo_default.htm
Study the CSS for different style related to each
component of the web page. You can use Firebug

as a tool to explore the website.
16

Lecture 01

Uploaded by

Copyright:

Available Formats

Lecture 01

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lecture 01

Uploaded by

Copyright:

Available Formats

11/3/2009

HTML documents contain HTML tags and plain text

HTML documents are also called web pages

The purpose of a web browser (like Internet Explorer or

<h1>This is heading 1</h1>

<a href="http://www.w3schools.com"> This is a link

Start tag Content End tag

An HTML element starts with a start tag / opening tag

<p><font size="2" face="Verdana">

<p><font size="5" face="Times" color="red">

Attribute Example Purpose

The selector is normally the HTML element/tag you wish to define

You have to use the class attribute in your HTML document:

.center {text-align:center} <h1 class="center">This heading will be center-

Exercise: Design your web with CSS

component of the web page. You can use Firebug

You might also like