www.doc.gold.ac.uk

Download Report

Transcript www.doc.gold.ac.uk 

HTML
HyperText Markup Language-
Learning outcomes
• Code web pages using HTML
• Explain why it is advisable to use XHTML rather than
HTML
• Describe some technologies available for dynamic web
pages
• Explore some problems of html
Essential Reading
• William Buchanan, Mastering The Internet, Ch. 6-8
• Mike Lewis, “Understanding Javascript”, June-Jully 2000
• Chuck Masciano and Bill Kennedy, HTML and XHTML the
definitive guide, for reference
http://www.pcnetworkadvisor.com
• Introductory materials on HTML & XHTML either a text book such
as
– John Shelly, HTML AND CSS explained, or
– http:/www.webMonkey.com
– http://www.w3schools.com
What is an HTML File?
• HTML stands for HyperText Markup Language
• An HTML file is a text file containing small markup tags
• The markup tags tell the Web browser how to display the page
• An HTML file must have an htm or html file extension
• An HTML file can be created using a simple text editor
HTML contd.
• HyperText Markup Language--HTML is a
collection of platform-independent styles
(indicated by markup tags) that define the
various components of a World Wide Web
document. HTML was invented by Tim
Berners-Lee while at CERN, the European
Laboratory for Particle Physics in Geneva.
HTML Basics
• HTML documents are plain-text (also
known as ASCII) files that can be created
using any text editor (e.g., Emacs or vi on
UNIX machines; SimpleText on a
Macintosh; Notepad on a Windows
machine). You can also use wordprocessing software if you remember to
save your document as "text only with line
breaks".
HTML Basics
• An element is a fundamental component
of the structure of a text document. Some
examples of elements are heads, tables,
paragraphs, and lists. Think of it this way:
you use HTML tags to mark the elements
of a file for your browser. Elements can
contain plain text, other elements, or both.
HTML Basics
• To denote the various elements in an
HTML document, you use tags. HTML
tags consist of a left angle bracket (<), a
tag name, and a right angle bracket (>).
Tags are usually paired (e.g., <H1> and
</H1>) to start and end the tag instruction.
The end tag looks just like the start tag
except a slash (/) precedes the text within
the brackets.
HTML Basics
• <html>
<head>
<TITLE>A Simple HTML Example</TITLE>
</head>
<body>
<H1>HTML is Easy To Learn</H1>
<P>Welcome to the world of HTML. This is the
first paragraph. While short it is still a
paragraph!</P>
<P>And this is the second paragraph.</P>
</body>
</html>
HTML Basics
• Markup Tags
• HTML
• This element tells your browser that the file
contains HTML-coded information. The file
extension .html also indicates this an HTML
document and must be used.
HTML Basics
• HEAD
• The head element identifies the first part of
your HTML-coded document that contains
the title. The title is shown as part of your
browser's window
HTML Basics
• TITLE
• The title element contains your document
title and identifies its content in a global
context. The title is typically displayed in
the title bar at the top of the browser
window, but not inside the window itself.
HTML Basics
• BODY
• The second--and largest--part of your
HTML document is the body, which
contains the content of your document
(displayed within the text area of your
browser window).
• All other tags now come within the body
tag.
HTML Basics
• Headings
• HTML has six levels of headings, numbered 1
through 6, with 1 being the largest. Headings are
typically displayed in larger and/or bolder fonts
than normal body text. The first heading in each
document should be tagged <H1>.
• The syntax of the heading element is:
<Hy>Text of heading </Hy>
where y is a number between 1 and 6 specifying
the level of the heading.
HTML Basics
• Paragraphs
• Unlike documents in most word processors,
carriage returns in HTML files aren't significant.
In fact, any amount of whitespace -- including
spaces, linefeeds, and carriage returns -- are
automatically compressed into a single space
when your HTML document is displayed in a
browser. A Web browser ignores this line break
and starts a new paragraph only when it
encounters another <P> tag
Markup languages
• HTML places primary emphasis on structure
– paragraphs, headings, lists, images, links, ….
• HTML places secondary emphasis on style (CSS)
– fonts, colours, ….
• HTML does not label the meaning of the text (XML)
A basic document
• Every document should start with the following line
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
• There are three required elements, defined by the tags <html>,
<head> and <body>
<html>
<head>
<title>My Home Page</title>
</head>
<body>
<h1>Welcome</h1>
</body>
</html>
Basic structure elements
• first and last tags
• The HEAD section
– must come before the BODY section
– contains generic information about the document
• Elements specified in the HEAD section can include
– title, link, script, style
• The BODY section
– contains the content of the document (text, images etc)
– this content is structured by other tags
Block elements
• Block elements define sections of text, usually preceded by a
blank line
• <p></p> - paragraph
• <h1></h1>...<h6></h6> - headings
• <pre></pre> - preserve (original format)
• <blockquote></blockquote> - indented text
• <div></div> - division
– used to identify a section of the document that may be
subject to special formatting (for example, using stylesheets).
Paragraphs
Paragraphs: <p>...</p>
– force a break between the
enclosed text and the text
surrounding it
– the tagged region of text may be
subject to special formatting
<p align="center">Here is
another paragraph</p>
– align is an attribute of the
paragraph tag
– center is the value of the align
attribute
<p>here is a piece of
text that has been
placed inside a
paragraph</p>
<p align="center">Here
is another
paragraph</p>
Headings
• Six levels of importance
<h1>...<h6>
• Use headings to divide
document into sections
<html>
<head>
<title>Headings</title>
</head>
<body>
<h2>Chapter 1</h2>
<h3>1. Introduction</h3>
This is the introduction
<h3>2. Next section</h3>
This is the next section
<h4>2.1 A subsection</h4>
This is a subsection
</body>
</html>
Element relationships
• The elements marked by tags form a hierarchy
• The root element is html (marked by <html>...</html>)
• It usually has two children: head and body
– each of these are further subdivided
• There are rules for which elements can contain other elements
– e.g. headers cannot contain headers
– see http://www.w3.org/ for a full list of rules
• Elements must not overlap each other
– we cannot have: <h1>...<a..> ... </h1>...</a>
– we can have: <h1>...<a..> ... </a>...</h1>
Inline descriptive elements
Descriptive elements affect the appearance
of text depending on how the text is
described
• <em></em> emphasis, usually with
italics
• <strong></strong> strong, usually
with bold
• <cite></cite> citation, usually in
italics
• <code></code> usually results in
monotype spacing
<body>
A <em>fascinating</em>
subject that I
<strong>must</strong>
understand
</body>
Inline explicit style elements
•
•
•
•
•
•
•
•
•
<boldface></boldface>
<big></big> bigger font than surrounding text
<small></small> smaller font than surrounding text
<i></i> italics
<s></s> strikethrough
<sub></sub> subscripts
<sup></sup> superscripts
<span></span> delimits text for stylesheet control
<div></div> delimits blocks of text for stylesheet control
Inline explicit style elements
<font> attributes
• face - name of font (must be installed)
– "arial", "times", "verdana", "helvetica"
• size - absolute size (1-7), or relative to previous text
– "2", "5", "7", "+1", "-2"...
• color - hexadecimal RGB, or a named color
– "3399dd", "blue", "red"
• weight - boldness from 100, 200, ..., 900
– "100", "300", "900"
• e.g.
<font face="arial" size="+1" color="pink" weight="300">
Unordered lists
• Unordered lists <ul>...</ul>
• <li>...</li> for the list
elements
• each item has a bullet
some normal text
<ul>
<li>apples</li>
<li>oranges</li>
<li>pears</li>
<li>bananas</li>
</ul>
Ordered lists
• Ordered lists <ol>...</ol>
• <li>...</li> for the list elements
• each item has a number
some normal text
<ol>
<li>apples</li>
<li>oranges</li>
<li>pears</li>
<li>bananas</li>
</ol>
Definition lists
• <dl></dl> The enclosing tags
• <dt></dt> The definition term
• <dd></dd> The definition
<dl>
<dt>MIME</dt>
<dd>
Multipurpose...
</dd>
<dt>FTP</dt>
<dd>
File transfer...
</dd>
<dt>TCP</dt>
<dd>
Transmission...
</dd>
</dl>
Nested lists
• A list may contain another list
• The inner list is nested inside the outer
list
<body>
<ol>
<li>apples</li>
<ul>
<li>red</li>
<li>green</li>
</ul>
<li>oranges</li>
<li>pears</li>
<li>bananas</li>
</ol>
</body>
Comments
• Comments are delimited by <!-- and -->
<!– this is a comment -->
• Comments may span multiple lines
<body>
<!-this is
a comment
-->
</body>
Horizontal lines
• To insert a horizontal line to
divide up parts of a document
we use the empty tag <hr>
• Attributes: align, size (in
pixels), width (in pixels or
percentage), noshade
<body>
<h1>Chapter 1</h1>
<hr align="center" size="3" width="50%" noshade>
<h2>Introduction</h2>
</body>
Special characters
• Some characters such as <, >, " and
& have special meanings.
• To prevent them being interpreted
as HTML code, they must be written
as follows: &lt; &gt; &quot;
&amp;
• Blank space is normally ignored in
HTML. To include a space in your
document use: &nbsp;
<body>
A <em> &lt;
fascinating &gt; </em>
subject that I
<strong>m&nbsp;u&nbsp;
s&nbsp;t</strong>
understand
</body>
Links
•
•
The link (anchor) element <a>...</a> provides hypertext links
between
1. different documents (using a URL)
2. different parts of an individual document
User selection of the link (hot spot) results in
1. retrieval and display of the designated document
2. movement to relevant part of same document
<body>
The Department of
<a href="http://www.doc.gold.ac.uk/index.html"> Computer
Science</a> is a very ....
</body>
Link with URL
Example:
<body>
The Department of
<a href="http://www.doc.gold.ac.uk/index.html">
Computer Science</a> is a very ....
</body>
• The href attribute gives the URL
of the target page
• The text between the tags is
highlighted – selecting it activates
the link
Relative addressing
The
previous example gave the full path name, known as the absolute address
<a href="research.html">Research</a>
<a href=“./pub.html">Publications</a>
<a href="../../index.html">Computer Science home</a>
• The ‘root’ directory for the link is assumed to be the directory
containing the parent page of the link
Images
•
•
•
•
Images are included using the empty tag <img>
Example:
<img src="mypicture.gif" alt="my picture">
The src attribute specifies the file containing the image
– absolute or relative path names can be used (see notes for
links)
The alt attribute specifies the text to be displayed if the image is
not viewed
– some users choose not to display images (for
faster download)
– also used for compatibility with older
browsers
Image attributes
• The size attributes control the size of the image
<img src="cat.gif" height="60" width="90" align=“top” alt="cat">
• The align attribute controls the vertical location of the image, relative to
the line of text
– align="top"
top of image aligned with top of text
– align="middle" centre of image aligned with centre of text
– align="bottom" bottom of image aligned with baseline of text
• The align attribute also controls the horizontal location of the image,
relative to the line of text
– align="left" image aligned with left margin
– align="right" image aligned with right margin
Links with images
• A link element can include an image instead of text
– both images and text can be included if required
<body>
Enter my world of cats <a href="cats.html"><img
src="cat.gif" height="60" width="60" align="middle"
alt="cat"></a>
</body>
Colour
• Colours are specified with hexadecimal numbers for
the red, green and blue primary colours, preceded
by a “#”.
• To set the background colour of a web page
<body bgcolor="#994422">
Colour – RGB Model
– #ff0000 (red),
– #00ff00 (green)
– #0000ff (blue)
– #ffff00 (yellow)
– ...
– #3395ab (a pastel blue)
Colour
<body text="#994422">
• To set the colour of all text on a page
• In the body element, the colour of link text can be controlled with the
following attributes:
– link
for an un-visited link
– vlink
for a visited link
– alink
for a link that is currently selected by the mouse
• Example
<body text="#000000" link="#0000ff">
Colour
• To set the colour of an individual piece of text use the font element (or
preferably stylesheets – see later)
<body bgcolor="#3395ab">
Text in quotes <font color="#ff0000">"such as
this"</font> has a different colour
</body>
Colour names
• Netscape and Internet Explorer allow textual names for
colours instead of hexadecimal
• This is OK provided the page is not looked at by a browser that
does not support colour names
• For example
<body bgcolor="gray" text="black" link="blue">
Background patterns
• Rather than a uniform color
• You can give the background of web
page a pattern as follow:
<body background="tileimage.gif">
Forms
• Server-based programs may return data to the client
as a web page
• Client-side scripts can read input data
– To validate the data, prior to sending to server
– To use in local processing which may output web
page content that is displayed on the client
Example applications
• Questionnaires to provide feedback on a web site
• e-commerce, to enter name, address, details of purchase and
credit-card number
– request brochures from a company
– make a booking for holiday, cinema etc.
– buy a book, cd, etc
– obtain a map giving directions to a shop
• Run a database query and receive results (an important part of
e-commerce)
Input types
•
•
•
•
•
•
•
•
•
•
•
•
text
checkbox
radio
select
textarea
password
button
submit
reset
hidden
file
image
(buttons)
(options)
The method and action
attributes
• The method attribute specifies the way that form data is sent to the
server program
– GET appends the data to the URL
– POST sends the data separately
• The action attribute specifies a server program that processes the form
data (often as a URL)
<body>
<form method="POST" action="comments.php">
<h2>Tell us what you think</h2>
<!-- etc -->
</form>
</body>
The input element:
type="text"
• The type attribute specifies the
type of user input
• The name attribute gives an
identifier to the input data
<form method="POST" action="comments.php">
<h2>Tell us what you think</h2>
Name <input name="name" type="text" size="20"><br>
Address <input name="address" type="text" size="30">
</form>
The input element:
type="checkbox"
• The name attribute is used to
define a set of checkboxes
• The value attribute identifies
the individual checkbox
• If the checked attribute is set
the box is initially checked
How did you hear about this web site?<br>
A friend
<input type="checkbox" name=“name" value="friend"><br>
Search engine
<input type="checkbox" name=“name" value="engine"><br>
The input element:
type="radio"
• Radio buttons are similar to
checkboxes, but only one can be
selected
• To select a button by default, use the
checked attribute (for one button
only)
How did you hear about this web site?<br>
A friend
<input type="radio" name=“name" value="friend"><br>
Search engine
<input type="radio" name=“name" value="engine"><br>
<!– etc -->
The input element:
type="button"
• The name attribute uniquely identifies a
button
• The value attribute gives a label to the
button
• Actions can be associated with buttons
using JavaScript
– see later
Do you want to receive any further information:<br>
<input type="button" name="yes" value=" Yes ">
<input type="button" name="no" value=" No "><br>
The input element:
type="submit/reset"
• type="submit"
– clicking this button sends the
form data to the program (URL)
specified in the action
attribute of the form
• type="reset"
– clicking this button clears all
data entered so far
Thank you<br>
<input type="submit" name="send" value="Send">
<input type="reset" name="clear" value="Clear"><br>
The input element:
type="password/file/hidden"
• type="password"
– similar to type="text" except that the input is echoed
with asterisks (so not visible)
• type="file"
– provides a file dialogue box to specify a file that is sent to
the server
• type="hidden"
– similar to text input, but the value attribute is used to
specify data that is to be sent to the server. Nothing
appears on the screen.
– The data might be set by a server program to keep track of
the details of a particular transaction.
The textarea element
• Used for multi-line text input
• The size of the input area is
specified with the cols and
rows attributes
• Any text placed inside the
element appears in the input
area (this can be deleted).
Please write your comments:<br>
<textarea name="comments" rows="5" cols="20">
put text here
</textarea>
The select element
• The select element provides a menu
of options
• An option can be selected by default
using the selected attribute
(otherwise the first in the list is initially
selected)
How do you rate this site?<br>
<select name="rating">
<option>Good
<option selected>Bad
<option>Ugly
</select>
Tables
• Tables provide a means of organising
the layout of data
• A table is divided into rows and
columns: these specify the cells of
the table
Tables
• <table>
main element
• <tr>
table row
• <th>
table header
• <td>
table data
<table border="1">
<tr>
<th>Name</th>
<td>A B Morgan</td>
<td>D P Jones</td>
</tr>
<tr>
<th>Course</th>
<td>Fishing</td>
<td>Sailing</td>
</tr>
<tr>
<th>Year</th>
<td>8</td>
<td>5</td>
</tr>
<tr>
</table>
Rows and
Columns
• Cells can span
multiple columns and
multiple rows with
the colspan and
rowspan attributes
<table border="1">
<tr>
<th colspan="2">Name</th>
<th>Course</th>
<th>Year</th>
</tr>
<tr>
<td>A B</td>
<td>Morgan</td>
<td rowspan="2">Fishing</td>
<td>5</td>
</tr>
<tr>
<td>D J</td>
<td>Jones</td>
<td>8</td>
</tr>
<tr>
</table>
The align and width attributes
• The align
attribute
determines the
position of the text
within a cell
• The width
attribute
determines the
width of the row
relative to the table
<table border="1" align="center">
<tr>
<th colspan="2" width="60%">Name</th>
<th rowspan="2">Course</th>
<th rowspan="2">Year</th>
</tr>
<tr>
<th>Last</th>
<th>Init.</th>
</tr>
<tr>
<td>Morgan</td>
<td>AB</td>
<td>Fishing</td>
<td align="center">5</td>
</tr>
<!– etc -->
Table attributes
Table attributes
•
•
•
•
•
•
align alignment relative to the page
width in pixels or percentage of page width
border - width of border (pixels)
cellspacing separation between cells (pixels)
cellpadding - space around data inside cell (pixels)
bgcolor - background colour (inside cells)
Furthermore
• The <caption> element puts a title above the table
Table attributes
<table border="3" align="center" cellspacing="6"
cellpadding="6" bgcolor="cyan">
<caption>
<h2>Course Data</h2>
</caption>
<tr>
<th>Name</th>
<th>Course</th>
<th>Year</th>
</tr>
<tr>
<td>A B Morgan</td>
<td>Fishing</td>
<td>5</td>
</tr>
<!– etc -->
Frames and Framesets
• A frameset partitions a web browser
window so that multiple web documents
can be displayed simultaneously.
• Example application: To maintain a
permanently visible directory of links
within your site, while also displaying one
or more selected documents from the
site.
Framesets
<html>
<head><title>Frames 1</title></head>
<frameset cols="140,*">
<frame name="navF" src="navigation.html">
<frame name="mainF" src="intro.html">
</frameset>
</html>
• The frameset element replaces
the body element
• frameset has attributes cols or
rows, defined in terms of pixels,
percentage(%) or unspecified (*)
– this splits the window into two
or more columns or rows
Frame attributes
<frameset cols="140,*">
<frame name="navF" src="navigation.html">
<frame name="mainF" src="intro.html">
</frameset>
• The name attribute uniquely identifies the frame.
It may be used as the target in an anchor (<a>)
element
• The src attribute specifies the web page to be
placed in the frame initially (it may subsequently
be overwritten)
Frame attributes
<frameset cols="140,*">
<frame name="navF" src="navigation.html">
<frame name="mainF" src="intro.html">
</frameset>
• The scrolling attribute ("auto", "yes",
"no") specifies whether the frame is to have
scroll bars
• The frameborder attribute ("0", "1")
specifies whether the frame is to have a border
navigation.html
• The anchor tag has a target attribute
– takes the name of the frame used to display the information
• All anchors below are targeted to the "mainF" frame
<html><head><title>Navigation Bar</title></head>
<body><center>
<a href="course.html" target="mainF">HTML Course</a><br><br>
<a href="paragraph.html" target="mainF">Paragraphs</a><br>
<a href="headings.html" target="mainF">Headings</a><br>
<a href="ulists.html" target="mainF">Unordered lists</a><br>
<a href="olists.html" target="mainF">Ordered lists</a><br>
<a href="nlists.html" target="mainF">Nested lists</a><br>
<a href="intro.html" target="mainF">Home</a><br>
</center></body>
intro.html
• A simple document which is initially placed in the
"mainF" frame
• This is replaced when a user clicks on a link in the
"navF" frame
<html>
<head><title>Internet Computing</title></head>
<body>
<h2>Welcome to the HTML Course</h2>
<p>
<h4>Please select the subject of...</h4>
</p>
</body>
</html>
Nested framesets
<html>
<head><title>Frames 2</title></head>
<frameset cols="140,*">
<frame name="navF" src="navigation.html">
<frameset rows="30%,70%">
<frame name="upperF" src="intro.html">
<frame name="lowerF" src="course.html">
</frameset>
</frameset>
</html>
Noframes
• Some browsers cannot process frames. Alternative content
should be provided using the noframes element
<html>
<head><title>Frames 1</title></head>
<frameset cols="140,*">
<frame name="navF" src="navigation.html">
<frame name="mainF" src="intro.html">
</frameset>
<noframes>
<body>
Something here for browsers not supporting frames
</body>
</noframes>
</html>
Stylesheets
• One of the most important functions of HTML is its ability to
separate the content and presentation of a web document
• Aspects of the document presentation include
• positioning on the page
• choice of fonts
• colours and backgrounds
• borders
Styles
•
A style is a set of formatting instructions that can be applied
to a piece of text.
•
Styles can be defined
–
Within a single HTML tag – Inline styles
–
In the <head> section, and applied to the whole
document – Global styles
–
In external files, and can be applied to any document by
including the URI of the file – Stylesheets
Inline styles
• Every tag has a style attribute
• This can be assigned a style definition
• A style definition is a list of property-value pairs
– a property is separated from its value by a colon
– property-value pairs are separated by semi-colons
– the list is delimited by quotation marks
• A property-value pair is also called a declaration
• Inline styles only affect the text contained in the tag
<h1 style="color:#2255ff; border:ridge">Inline styles</h1>
Inline styles
<body>
<h1 style="color:blue; border:ridge">
Inline styles</h1>
<p style="margin-left:10%; background:#ffffcc">
some text . . . some text
</p>
<body>
•
The heading is boxed with the
text displayed in blue
•
The paragraph is indented by
10% (from the left) and has a
cream background
Global styles
• A style can be defined in the
head of the document using
the <style> tag
• The style declaration is
placed inside a comment so
that it can be ignored by
older browsers
• Each style rule consists of
the name of an element
(selector) followed by a list
of property-value pairs
enclosed in curly brackets
<head>
<title>Styles</title>
<style>
<!-h1 {
color: red;
border: thin groove;
text-align:center;
}
-->
</style>
</head>
<body>
<h1>Simple styles</h1>
</body>
Example
<head>
<style>
<!-h1 {
color: red;
border: thin groove;
text-align:center;
}
p {
margin-left: 10%;
border: ridge;
background: #ee8822;
}
-->
</style>
</head>
<body>
<h1>Simple styles</h1>
<p>some text . . . </p>
</body>
• A global style applies to
every instance of the
corresponding element in
the document
Stylesheets
• Styles can be declared in separate files called stylesheets.
• A stylesheet is linked to a web document by including the following line in
the head section
<link rel="StyleSheet" type="text/css" href="URL">
•
•
•
•
rel specifies the type of link being used
href specifies a hyperlink to the stylesheet file
type specifies the MIME type of the data
text/css describes the “cascading style sheets” type
Multiple stylesheets
• The first stylesheet is included using the <link> tag
• Any further stylesheets have to be imported
• The @import command is placed inside a comment
<head>
<title>Stylesheets</title>
<link rel="StyleSheet" type="text/css"
href="http://www.abc.com/mainstyles.css">
<!–
@import
url(http://www.abc.com/deptstyles.css)
url(mystyles.css)
-->
</head>
Cascading stylesheets
• Multiple stylesheets can be included in a document
• Styles defined in the first stylesheet are overridden by
corresponding styles defined in the second stylesheet
– the stylesheets are said to cascade
• Example
– mainstyles.css – the company's stylesheet
– deptstyles.css – the department's stylesheet
– mystyles.css – the user's stylesheet
• If the stylesheets are included in this order, the user's style
definitions will override the department styles, which in turn
will override the company styles
Cascading stylesheets
• Different stylesheets for different media, platforms and
systems
– Font size in CSS does not yield sam results on different
screens. On Print Media 10pt size fonts are always the
same size because the size of a pt is well defined. The
conversion of pt to px (pixel) is different on Windows,
Linux or Mac OS X platforms.
– Browser allow to customize layout and fonts
Style rules
• A style rule has two parts
– a selector (element name) and a set of declarations
• The selector associates the style rule with a HTML tag of the
same name
• Each declaration has two parts:
– a property and a value
• For readability, each declaration
should be placed on a separate line
selector {
property:
property:
property:
property:
}
value;
value;
value;
value;
Style rules
• Some properties can be given multiple values
– The browser first looks for the "Book Antiqua" font
– If this is not on the system, it looks for the Times font
– Last resort: the browser uses the generic serif font
body {
background-color: lightgreen;
}
h1 {
color: lightgreen;
background-color: blue;
font-family: "Book Antiqua", Times, serif;
border: thick groove #9baab2;
}
Properties and values
Fonts
• font-family: <family name> [<generic family>]
• font-style: normal|italic|oblique
• font-weight: normal|bold|bolder|lighter
• font-size: small|medium|large|smaller|larger
Backgrounds and colours
• color: <value>
• background-color: <value>|transparent
• background-image: URL|none
Properties and values
Text
• text-decoration:
none|underline|overline|line-through
• text-transformation:
none|capitalize|uppercase|lowercase
• text-align: left|right|center|justify
• text-indentation: length|percentage
Example: To remove underlining on links:
a:link, a:visited, a:active{text-decoration: none}
Properties and values
Boxes
• margin: length|percentage|auto {1,4}
• border-width: thin|thick|medium|length {1,4}
• padding: length|percentage {1,4}
• border-color: value {1,4}
• border-style:
none|dotted|dashed|solid|double|groove {1,4}
• ridge: value {1,4}
• width: length|percentage|auto
• height: length|auto
Properties and values
Position
• location: absolute|relative|fixed
– absolute: relative to upper left corner of window
– relative: relative to the last item
– fixed:
does not move when the page is scrolled
• left: distance from left border of window (pixels, %)
• top: distance from top border of window (pixels, %)
Classes
• Simple style rules change the appearance of all instances of
the associated element
• A class is a style definition that may be applied as and when
we choose
– if we don't want the styles, we don't have to use them
• Simple classes are applied to a single type of element
• Anonymous classes can be applied to any type of element
Simple classes
</head>
<style>
<!-h1.fred {
color: #eeebd2;
background-color: #d8a29b;
border: thin groove #9baab2;
}
-->
</style>
</head>
<body>
<h1 class="fred">A Simple Heading</h1>
<p>some text . . . some text</p>
</body>
Anonymous classes
</head>
<style>
<!-.fred {
color: #eeebd2;
background-color: #d8a29b;
border: thin groove #9baab2;
}
-->
</style>
</head>
<body>
<h1 class="fred">A Simple Heading</h1>
<p class="fred">some text . . . some text</p>
</body>
white
CSS Classes…cont.
TD {font-face : sans-serif; font-size : 12pt}
.even {background-color : #FFFFFF}
.odd {background-color : #CCCCCC}
•
In your HTML code for the table:
–
you simply reference the class to invoke the style:
•
•
<td class=“even”>display this text with a white background </td>
<td class=“odd”>and this text with a grey background
</td>
grey
IDs
<head>
<style>
<!-#list1 {
color: blue;
background: cyan;
text-decoration: underline;
border: thin groove red;
}
-->
</style>
</head>
<body>
<ul id="list1">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
</body>
• Classes specify styles for
particular instances of an
element
• IDs specify the style of a single
element
• IDs allow the
element to be
identified by other
elements on the
page
<DIV> & <SPAN> are your friends
<div> and <span> tags allow you define exceptions to the general rules
of your body text…and they are helpful tools for document
designers and web developers
<div> is usually used to designate styles for block elements that should
stand apart from the body text…like callout quotes. Everything
inside a <div> tag takes on the <div> attributes…and you can
specify classes and ids for <div> too!
Divisions and spans
• Rather than applying styles to an element itself, we
wrap the element in
– a div element (usually for block elements), or
– a span element (usually for inline elements)
• Any required formatting can then be applied to the
<div> or <span> element.
• Div and span elements become part of the document
– In particular, each can have class and id
attributes
Divisions
<head>
<style>
<!-.myclass {
color: blue;
background: cyan;
text-decoration: underline;
border: thin groove red;
}
-->
</style>
</head>
<body>
<div class="myclass">
<h2>A Simple Heading</h2>
<p>some text . . . </p>
</div>
</body>
• Styles can be applied
to blocks of HTML code
using div
Spans
<head>
<style>
<!-.myclass {
color: red;
background: cyan;
text-decoration: none;
}
-->
</style>
</head>
<body>
<span class="myclass">
<h2>A Simple Heading</h2>
<p>some text . . . </p>
</span>
</body>
• spans are similar
to divisions
Layers
• The browser maintains a stack of layers, each containing text,
images etc. The browser displays layers on top of each other
(in order).
• The <div> tag has the following attributes
– z-index: the number of the layer containing the
division
– left and top : the location (top-left corner) of the
division in pixels
– width and height: the size of the division in pixels
– position: absolute or relative
Layers
• Layers can be manipulated using JavaScript to create Dynamic
HTML pages
• Layers can also be used to organise page content
<body>
<div style="z-index:2; left:100px; top:50px; position:absolute;
background-color:red; font-size:30">
<p>THIS STUFF IS ON TOP</p>
</div>
<div style="z-index:1; left:10px; top:10px; position:absolute;
background-color:yellow; font-size:56">
<p>BACKGROUND STUFF</p></div>
</body>
Summary
By now you should be able to use:
• Tables
• Frames
• Stylesheet – CSS
– Inline style
– Embedded style
– External style
Typical exam question
• explain why is it important to separate the
content from the style.
• what is CSS?
• State three ways in which styles can be used.
And explain the advantages and disadvantages
of each one.
Next
• Look at the disadvantages of html
• XML
– Well formed vs valid xml document
• XHTML vs HTML
• DHTML
Useful sites
• http://www.w3schools.com/
• http://www.w3schools.com/html
• http://www.w3schools.com/css