CST8281 - Introduction to HTML
Download
Report
Transcript CST8281 - Introduction to HTML
Internet / Protocols / WWW
What is the Internet?
What are Internet protocols?
a network of networks – an inter-network, or Internet
the rules for transferring information between programs
HTTP - hypertext transfer protocol
FTP - file transfer protocol
SMTP – simple mail transfer protocol
What is the World Wide Web?
a set of HTML pages accessible using the HTTP protocol
1
How the WWW Works
How does a Web Browser (Firefox) fit in this picture?
- your browser connects, using the HTTP protocol, to a web server
- the web server fetches an HTML web page and sends the HTML to your browser
- your browser turns the HTML page into a nice-looking page on your screen
Internet
connection
Your computer,
Your web browser
e.g. Firefox
Internet
Their computer,
Routers
Their web server
(an HTTP server)
e.g. Apache
/mypage.html
Text file containing
an HTML web page
2
Hyper Text Markup Language - HTML
Hyper Text Markup Language (HTML) Basics
HTML is a “mark-up language”
You add the mark-up tags to your text document
Now follows a published standard via http://w3c.org/
HTML is a language of mark-up “tags” in angle brackets: <>
each tag has a name and may have one or more quoted attributes
eg. <p class=”thesis” style=”color: red”>
Tags usually come in pairs (with some exceptions)
<html>...</html>, <body>...</body>, <p>...</p>, <hr>, <br>
Web pages are free-form input; line breaks can be used most
anywhere and don't affect the appearance of the document
Yes, your entire page could be a single line of text!
3
HTML – Required Tags
<html> … </html> (Required!)
Basic tag to identify portion of file that contains HTML
<html> is an opening tag
</html> is a closing tag (note the direction of the slash!)
text between the opening and closing tag is called the “element”
<head> … </head> (Required!)
placed at the top of document immediately after the <html> tag
tags information about the document, e.g. author, style, etc.
contains the required document <title>...</title> tag
4
HTML – Required Tags
<title> … </title> (Required!)
included as an element inside the <head>…</head> section
element of this tag is the title displayed in title bar of the browser
may also be used as title of page when page is bookmarked
should be meaningful and uniquely identify the page
<body> … </body> (Required!)
included as the second element inside the <html>…</html> tags.
follows the <head>…</head> portion of the document
contains the information to be displayed in the browser window
any attributes set on this tag will apply to the entire page
5
HTML – Required Tags
<p> … </p> (Required!)
included as an element inside the <body>…</body> section
Surrounds a paragraph of text
DOCTYPE (Required!)
Must be the very first line of your file, before <html>
NOT an HTML tag; it is an instruction to your web browser
Tells the browser what version of HTML to expect
In this course we use only the “strict” HTML version 4.01 type:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
6
HTML – Required Tags
That's all you need for a basic web page!
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>My Title</title>
</head>
<body>
<p>This is my first web page.</p>
</body>
</html>
7
HTML - Basic Tags
More useful basic tags:
<br>
(no closing tag needed)
put a line break in the text (starts a new line)
<h1> … </h1> through <h6> ... </h6>
used to identify text as a Level 1 (major) to Level 6 (minor) heading
Comment Tag
<!-- comments here -->
notice that the comment is typed as an attribute inside the tag
comments may be one or multiple lines long (HTML is free-form)
text within this tag will not be displayed or processed by your browser
comments do not nest! No comments inside comments!
The comment may not contain two (or more) adjacent dashes, e.g. --
8
HTML - Basic Tags
The Anchor Tag – Hyper Linking - making the web a web
<a> … </a>
one major attribute – the location of the hyperlink:
href=”string”
element is clickable/selectable as a document hyperlink
browser attempts to load the page specified by the href= attribute
the href= string can be a relative URL on the same server:
without the leading http://host/ it is in the same directory structure:
e.g. <a href=“page2.html”>Click here to continue</a>
e.g. <a href=”images/box.jpg”>See the box here.</a>
e.g. <a href=“../another_dir/page3.html”>Click here</a>
9
HTML - Basic Tags
<a>…</a> anchor tag continued
The href= string can be an absolute URL on any server:
string can be any HTTP URL (web address) you like:
e.g. <a href=“http://www.gnu.org/philosophy/”>Free Software</a>
The href= string can be an email address:
string can be an email address preceded by “mailto:”
e.g. <a href=”mailto:[email protected]>Ian! D. Allen email</a>
Attempts to open an email client (specified in the web browser's
options) and places the specified email address in the To: field of a
new email message.
10
HTML - Basic Tags
<img>
(no closing tag needed)
used to display graphics (.jpeg, .png, .gif) in your web pages
you must specify the URL for the image source, and an alt= text
the basic attributes of <img> are:
src=”string” - the absolute or relative location of the image file
alt=”string” - Alternate Text for people who don't see images
height=”string” - image height, percent or absolute pixels (optional)
width=”string” - image width, percent or absolute pixels (optional)
title=”string” - mouse-over title of the image (optional)
Etc….
specifying height= and width= lets your browser reserve space in
the document to load the image in the background and avoid
redrawing the page after the image is fully loaded
11
HTML - Basic Tags
•
•
•
•
<hr>
(no closing tag needed)
– Hard/Horizontal Rule – draw a horizontal line
– rule appearance can be changed with styles
<blockquote> … </blockquote>
– block quotation, indented
<q> … </q>
– a short, in-line “quotation as part of running text”
<pre> … </pre>
– preformatted text (e.g. computer code or output)
– fixed-width font (e.g. Courier fixed width)
–
preserves spaces and line breaks
12
HTML - Basic Tags
•
Font-style tags – for more control, use CSS instead
•
<b> … </b> and <i> … </i>
– bold and italic text (in-line)
•
<tt> … </tt>
– Teletype Text: fixed-width font (e.g. Courier)
•
<big> … </big> and <small> … </small>
– bigger and smaller text (in-line)
13
HTML - Phrase Tags
Phrase tags – often better done using CSS
•
<em> … </em> and <strong> ... </strong>
– text to be emphasized and strongly emphasized
– browser decides how: usually italicized, made bold
Less often used:
•
<code>...</code>, <samp>...</samp>, <kbd>...</kbd>
– computer code, sample code, keyboard text
– usually rendered in Courier fixed-width
font
14
HTML – Style Element/Attribute
The <style> element and the style= attribute
•
The style= attribute can be used on most tags
–
defines features for a single HTML element, e.g.
<p style=”text-align: center”>Center me.</p>
•
The <style> element: <style type=”text/css”> ... </style>
– <style> tag always goes in the <head> section
– defines style information for the whole HTML page
– requires the type=”text/css” attribute
–
–
more details to come in the description of CSS
to link to a separate CSS style sheet, use instead:
<link rel=”stylesheet” type=”text/css” href=”string”>
15
HTML - Lists
Lists – <ul> Unordered List and <ol> Ordered List
<ul>
<li>Apple</li>
<li>Pear</li>
<li>Kiwi</li>
<li><ul>
<li>Big</li>
<li>Small</li>
</ul></li>
</ul>
<ol>
<li>Apple</li>
<li>Pear</li>
<li>Kiwi</li>
<li><ul>
<li>Big</li>
<li>Small</li>
</ul></li>
</ol>
HTML
HTML
– Unordered
- Basic Tags
Lists
•
<li>…</li>
– List Item: surrounds each list item inside a list
– used inside both <ul> and <ol> list types
•
<ul>…</ul>
– surrounds an unordered list – no numbering
– <li>...</li> items each indented and bulleted
– use styles (style= attribute) to change type of bullet:
– CSS style: list-style-type: string
•
•
string can be: circle, disc, square
e.g. <ul style=”list-style-type: square”> ... </ul>
17
HTML – Ordered Lists
•
<ol> … </ol>
– surrounds an ordered list
– items are indented and numbered (or alphabetized)
– use styles (style=) to change type of numbering:
– CSS style: list-style-type: string
•
•
–
examples of string: decimal, lower-alpha, upper-roman
e.g. <ol style=”list-style-type: upper-latin”> ... </ul>
the start= attribute determines first item's value
•
•
•
e.g. <ol start=“3”> - begin numbering at 3 (or c, or iii)
but this is deprecated, with no CSS replacement!
http://www.w3schools.com/tags/att_ol_start.asp
18
HTML – Definition List
•
<dl>…</dl>
– definition list containing <dt> and <dd> items
– <dt>...</dt> definition title
– <dd>...</dd> definition description
Example definition list containing two definitions:
•
<dl>
<dt>Hacker</dt>
<dd>An expert or enthusiast of any kind.</dd>
<dt>Cracker</dt>
<dd>An intruder into computer systems.</dd>
</dl>
19
HTML - <meta> - Page Attributes
•
<meta>
(no closing tag needed)
– used only inside <head> section of page
– gives details about page, e.g. author, keywords
– search engines may ignore keywords, since many
pages use fake keywords to boost search results
<head>
<title>CST8281 Course Homepage</title>
<meta name="Keywords" content=”Fundamentals, HTML, CSS”>
<meta name="Description" content=”An introductory course
dealing with computer and Internet fundamentals.">
<meta name="GENERATOR" content="Arachnophilia 5.4">
</head>
20
HTML - <meta> - continued
•
elements of <meta> include:
– name=string identifies what type of meta content will follow
– content=string details relating to the name
•
<meta> can also be used to have your page automatically
load another web page after a short delay:
<meta http-equiv="refresh" content="10; url=index.html">
–
note the attribute name: http-equiv=”refresh”
–
the content= string begins with number of seconds
before next page is loaded, followed by a
semicolon, then url= giving the URL of the next
page to be loaded
21
HTML – <meta> - charset – Character Set
•
Use <meta> to set the character set for the HTML page
– needed to pass W3C validation without warnings
<meta http-equiv=”Content-Type”
content=”text/html; charset=UTF-8”>
•
also frequently used: charset=iso-8859-1
–
–
–
iso-8859-1 is “Latin-1” and includes French
Latin-1 common in North America, Western Europe
but UTF-8 includes all languages (preferred)
22
HTML – Identify/Group Tags
Identifying and Grouping elements (e.g. for CSS)
•
<div>...</div>
– division or section
– groups and identifies one or more block-elements
– usually causes a line break before and after
•
<span>...</span>
– groups and identifies in-line elements (e.g. words)
– no visual change by itself (no line break)
– used to apply styles to parts of a text line, e.g.
This <span style=”color: red”>red</span> apple.
23
HTML – Entities (Special Characters)
HTML Entities – for special characters, accents, foreign
– starts with ampersand and ends with semicolon
non-breaking-space – acts like a letter
– words connected with will not separate
across a line break; they stay together as one word
– e.g. Mr. Ian! D. Allen
< (less than) = <
> (greater than) = >
" (double quote) = " ' (apostrophe) = '
& (ampersand) = &
–
many, many others!
24
HTML – Tables and
Forms
Danso Ansong
Contents
1.
HTML Tables
Nested Tables
Cells Width
Cell Spacing and Padding
Column and Row Span
26
Contents (2)
2.
HTML Forms
Form Fields and Fieldsets
Form Controls and Labels
Text field
Text area
Select
Radio button
Checkbox
Button
Image button
27
HTML Tables
HTML Tables
Tables represent tabular data
A table consists of one or several rows
Each row has one or more columns
Tables comprised of several core tags: <table></table>:
begin / end the table
<tr></tr>: create a table row
<td></td>: create tabular data (cell)
Tables should not be used for layout. Use CSS floats and
positioning styles instead
29
HTML Tables (2)
Start and end of a table
</table>
Start<table>
and end ...
of a row
Start and end of a cell in a row
<tr> ... </tr>
<td> ... </td>
30
Simple HTML Tables – Example
<table cellspacing="0" cellpadding="5">
<tr>
<td><img src="ppt.gif"></td>
<td><a href="lecture1.ppt">Lecture 1</a></td>
</tr>
<tr>
<td><img src="ppt.gif"></td>
<td><a href="lecture2.ppt">Lecture 2</a></td>
</tr>
<tr>
<td><img src="zip.gif"></td>
<td><a href="lecture2-demos.zip">
Lecture 2 - Demos</a></td>
</tr>
</table>
31
Simple HTML Tables – Example (2)
<table cellspacing="0" cellpadding="5">
<tr>
<td><img src="ppt.gif"></td>
<td><a href="lecture1.ppt">Lecture 1</a></td>
</tr>
<tr>
<td><img src="ppt.gif"></td>
<td><a href="lecture2.ppt">Lecture 2</a></td>
</tr>
<tr>
<td><img src="zip.gif"></td>
<td><a href="lecture2-demos.zip">
Lecture 2 - Demos</a></td>
</tr>
</table>
32
Simple HTML Tables
Live Demo
Complete HTML Tables
Table rows split into three semantic sections: header, body
and footer
<thead> denotes table header and contains <th>
elements, instead of <td> elements
<tbody> denotes collection of table rows that contain the
very data
<tfoot> denotes table footer but comes BEFORE the
<tbody> tag
<colgroup> and <col> define columns (most often used
to set column widths)
34
Complete HTML Table: Example
<table>
columns
<colgroup>
<col style="width:100px" /><col />
</colgroup>
th
header
<thead>
<tr><th>Column 1</th><th>Column 2</th></tr>
</thead>
footer
<tfoot>
<tr><td>Footer 1</td><td>Footer 2</td></tr>
</tfoot>
Last comes the body
<tbody>
(data)
<tr><td>Cell 1.1</td><td>Cell
1.2</td></tr>
<tr><td>Cell 2.1</td><td>Cell 2.2</td></tr>
</tbody>
</table>
35
Complete HTML Table:
Example
By default,
header(2)
text is bold and
<table>
table-full.html
centered.
<colgroup>
<col style="width:200px" /><col />
</colgroup>
<thead>
<tr><th>Column 1</th><th>Column 2</th></tr>
</thead>
<tfoot>
<tr><td>Footer 1</td><td>Footer 2</td></tr>
</tfoot>
<tbody>
Although
the footer
is
<tr><td>Cell
1.1</td><td>Cell
1.2</td></tr>
<tr><td>Cellbefore
2.1</td><td>Cell
the data in2.2</td></tr>
the
</tbody>
code, it is displayed
</table>
last
36
Nested Tables
Table data “cells” (<td>) can contain nested
tables (tables within tables):
<table>
<tr>
<td>Contact:</td>
<td>
<table>
<tr>
<td>First Name</td>
<td>Last Name</td>
</tr>
</table>
</td>
</tr>
</table>
nested-tables.html
37
Nested Tables
Live Demo
Cell Spacing and Padding
Tables have two important attributes:
cellspacing
cellpadding
cell
cell
cell
cell
cell
cell
cell
cell
Defines the
empty space
between cells
Defines the empty
space around the
cell content
39
Cell Spacing and Padding –
Example
table-cells.html
<html>
<head><title>Table Cells</title></head>
<body>
<table cellspacing="15" cellpadding="0">
<tr><td>First</td>
<td>Second</td></tr>
</table>
<br/>
<table cellspacing="0" cellpadding="10">
<tr><td>First</td><td>Second</td></tr>
</table>
</body>
</html>
40
Cell Spacing and Padding –
Example
(2)
table-cells.html
<html>
<head><title>Table Cells</title></head>
<body>
<table cellspacing="15" cellpadding="0">
<tr><td>First</td>
<td>Second</td></tr>
</table>
<br/>
<table cellspacing="0" cellpadding="10">
<tr><td>First</td><td>Second</td></tr>
</table>
</body>
</html>
41
Table Cell Spacing and Cell Padding
Live Demo
Column and Row Span
Table cells have two important attributes:
colspan
colspan="
1"
cell[1,1]
colspan="
1"
cell[1,2]
rowspan
rowspan="
2"
rowspan="
1"
cell[1,2]
cell[1,1]
cell[2,1]
cell[2,1]
colspan="
2"
Defines how
many columns
the cell
rowspan="
1"
Defines how
many rows the
cell occupies
43
Column and Row Span – Example
table-colspan-rowspan.html
<table cellspacing="0">
<tr class="1"><td>Cell[1,1]</td>
<td colspan="2">Cell[2,1]</td></tr>
<tr class=“2"><td>Cell[1,2]</td>
<td rowspan="2">Cell[2,2]</td>
<td>Cell[3,2]</td></tr>
<tr class=“3"><td>Cell[1,3]</td>
<td>Cell[2,3]</td></tr>
</table>
44
Column and Row Span –
Example (2)
table-colspan-rowspan.html
<table cellspacing="0">
<tr class="1"><td>Cell[1,1]</td>
<td colspan="2">Cell[2,1]</td></tr>
<tr class=“2"><td>Cell[1,2]</td>
<td rowspan="2">Cell[2,2]</td>
<td>Cell[3,2]</td></tr>
<tr class=“3"><td>Cell[1,3]</td>
<td>Cell[2,3]</td></tr>
Cell[1,1]
Cell[2,1]
</table>
Cell[1,2]
Cell[3,2]
Cell[2,2]
Cell[1,3]
Cell[2,3]
45
HTML Forms
Entering User Data from a Web
Page
HTML Forms
Forms are the primary method for gathering data from site
visitors
Create a form block with
Example:
<form></form>
The “method" attribute tells
how the form data should be
sent – via GET or POST
request
<form name="myForm" method="post"
action="path/to/some-script.php">
...
</form>
The "action" attribute tells
where the form data should be
sent
47
Form Fields
Single-line text input fields:
<input type="text" name="FirstName" value="This
is a text field" />
Multi-line textarea fields:
<textarea name="Comments">This is a multi-line
text field</textarea>
Hidden
fields contain data not shown to the user:
<inputused
type="hidden"
name="Account"
Often
by JavaScript
code
value="This
is a hidden text field" />
48
Fieldsets
Fieldsets are used to enclose a group of related
form fields:
<form method="post" action="form.aspx">
<fieldset>
<legend>Client Details</legend>
<input type="text" id="Name" />
<input type="text" id="Phone" />
</fieldset>
<fieldset>
<legend>Order Details</legend>
<input type="text" id="Quantity" />
<textarea cols="40" rows="10"
id="Remarks"></textarea>
The <legend>
is the fieldset's title.
</fieldset>
</form>
49
Form Input Controls
Checkboxes:
<input type="checkbox" name="fruit"
value="apple" />
Radio buttons:
<input type="radio" name="title" value="Mr." />
Radio
buttons can be grouped, allowing only one
to be selected from a group:
<input type="radio" name="city" value="Lom" />
<input type="radio" name="city" value="Ruse" />
50
Other Form Controls
Dropdown menus:
<select name="gender">
<option value="Value 1"
selected="selected">Male</option>
<option value="Value 2">Female</option>
<option
Submit
button: value="Value 3">Other</option>
</select>
<input type="submit" name="submitBtn"
value="Apply Now" />
51
Other Form Controls (2)
Reset button – brings the form to its initial state
<input type="reset" name="resetBtn"
value="Reset the form" />
Image button – acts like submit but image is
displayed and click coordinates are sent
<input type="image" src="submit.gif"
name="submitBtn"
alt="Submit"
/>
Ordinary
button – used
for Javascript,
no
default
action
<input type="button" value="click me" />
52
Other Form Controls (3)
Password input – a text field which masks the
entered text with * signs
<input type="password" name="pass" />
Multiple select field – displays the list of items in
multiple lines, instead of one
<select name="products" multiple="multiple">
<option value="Value 1"
selected="selected">keyboard</option>
<option value="Value 2">mouse</option>
<option value="Value 3">speakers</option>
</select>
53
Other Form Controls (4)
File input – a field used for uploading files
<input type="file" name="photo" />
When used, it requires the form element to have a
specific attribute:
<form enctype="multipart/form-data">
...
<input type="file" name="photo" />
...
</form>
54
Labels
Form labels are used to associate an explanatory
text to a form field using the field's ID.
<label for="fn">First Name</label>
<input type="text" id="fn" />
Clicking on a label focuses its associated field
(checkboxes are toggled, radio buttons are
checked)
Labels are both a usability and accessibility
feature and are required in order to pass
accessibility validation.
55
HTML Forms – Example
form.html
<form method="post" action="apply-now.php">
<input name="subject" type="hidden" value="Class" />
<fieldset><legend>Academic information</legend>
<label for="degree">Degree</label>
<select name="degree" id="degree">
<option value="BA">Bachelor of Art</option>
<option value="BS">Bachelor of Science</option>
<option value="MBA" selected="selected">Master of
Business Administration</option>
</select>
<br />
<label for="studentid">Student ID</label>
<input type="password" name="studentid" />
</fieldset>
<fieldset><legend>Personal Details</legend>
<label for="fname">First Name</label>
<input type="text" name="fname" id="fname" />
<br />
<label for="lname">Last Name</label>
<input type="text" name="lname" id="lname" />
56
HTML Forms – Example (2)
form.html (continued)
<br />
Gender:
<input name="gender" type="radio" id="gm" value="m" />
<label for="gm">Male</label>
<input name="gender" type="radio" id="gf" value="f" />
<label for="gf">Female</label>
<br />
<label for="email">Email</label>
<input type="text" name="email" id="email" />
</fieldset>
<p>
<textarea name="terms" cols="30" rows="4"
readonly="readonly">TERMS AND CONDITIONS...</textarea>
</p>
<p>
<input type="submit" name="submit" value="Send Form" />
<input type="reset" value="Clear Form" />
</p>
</form>
57
HTML Forms – Example (3)
form.html (continued)
58
TabIndex
The tabindex HTML attribute controls the order in which form
fields and hyperlinks are focused when repeatedly pressing
the TAB key
tabindex="0" (zero) - "natural" order
If X > Y, then elements with tabindex="X" are iterated
before elements with tabindex="Y"
Elements with negative tabindex are skipped, however, this
is not defined in the standard
<input type="text" tabindex="10" />
59
HTML Frames
<frameset>, <frame> and <iframe>
HTML Frames
Frames provide a way to show multiple HTML documents in a
single Web page
The page can be split into separate views (frames) horizontally
and vertically
Frames were popular in the early ages of HTML development,
but now their usage is rejected
Frames are not supported by all user agents (browsers,
search engines, etc). A <noframes> element is used to
provide content for non-compatible agents.
61
HTML Frames Demo
<html>
<head><title>Frames Example</title></head>
<frameset cols="180px,*,150px">
<frame src="left.html" />
<frame src="middle.html" />
<frame src="right.html" />
</frameset>
</html>
Note the target attribute applied to the <a> elements
in the left frame.
frames.html
62
Inline Frames: <iframe>
Inline frames provide a way to show one website inside
another website:
iframe-demo.html
<iframe name="iframeGoogle" width="600" height="400"
src="http://www.google.com" frameborder="yes"
scrolling="yes"></iframe>
63
HTML – Tables and Forms
Questions?
http://academy.telerik.com
Exercises
1.
Create Web Pages like the following
using tables:
2.
Create a Web
Page like the
following using
forms:
65
Exercises (2)
3. Create a Web form
that looks like this
sample:
See the image Sample-form.png
66
The Basics of
Cascading Style Sheets (CSS)
HTML: Looking Back
HTML dictates order, structure, and function
Does very little to specify layout or visual rendering
Shakespeare
Longfellow
CSS
Let’s Write Some Poetry!
YOU
Introduction
• What do you know about CSS?
• What do you hope to do with CSS?
• How familiar are you with HTML?
Presentation Summary
1. What is CSS?
2. CSS & HTML
3. The Box Model
4. Style Sheet Implementation
5. CSS Rule Structure
6. HTML & DIVs
7. Common CSS properties
8. CSS Cascade and Inheritance
9. Resources
The Purpose of CSS
If HTML is the content and meaning
➡ CSS helps to convey that meaning
Allows developers to separate the content from
layout and design
Content and design inherently different in nature
➡ Change in content does not require change in
design
CSS Zen Garden
Site using consistent HTML content
Differing external CSS files create dramatically different
layout
Support for multiple browsers
link: http://www.csszengarden.com
hint: change the styles on the page
An Example
Consider the boldface font in the following examples:
Chunky bacon is delicious.
Meaning is conveyed
by the styling
Remove the style and
meaning is lost
Today I will go outside.
Monday I will run 2 miles.
Attention is given to the
information
No additional meaning is
lost when removed
Say it out loud. The “chunky” is meant to be said strongly. If
What is CSS?
Style.css
/* Styles for sitename.com*/
CSS stands for
Cascading Style
Sheet. Typical CSS
file is a text file with an
extention.css and
contains a series of
commands or rules.
These rules tell the
HTML how to display.
body {
font-family:Arial;
background: #000;
}
*To create a style sheet, create a
file using Notepad (PC) or Text Edit
(Mac), save it as a .css document
and start writing the CSS code (see
}
#container {
text-align:left;
width:1020px;
}
#header {
height:232px;
}
#footer {
width: 100%;
padding: 0 10px;
margin-bottom: 10px;
And so on….
CSS Benefits
• Separates structure from presentation
• Provides advanced control of presentation
• Easy maintenance of multiple pages
• Faster page loading
• Better accessibility for disabled users
• Easy to learn
HTML Without CSS
“HTML without CSS is like
a piece of candy without a
pretty wrapper.”
Without CSS, HTML
elements typically flow
from top to bottom of the
page and position
themselves to the left by
default.
With CSS help, we can
create containers or DIVs
to better organize
content and make a Web
page visually appealing.
HTML & CSS
• HTML and CSS work together to produce
beautiful and functional Web sites
• HTML = structure
• CSS = style
The Box Model
CSS works on
the box model. A
typical Web page
consists of many
boxes joined
together from top
to bottom. These
boxes can be
stacked, nested,
and can float.
Header
Navigation
Content
Footer
Typical Web Page (Browser)
Container
header
menu
main
footer
Attaching a Style Sheet
Attach a style sheet to a page by adding the code to the
<head> section of the HTML page. There are 3 ways to attach
CSS to a page:
1. External Style Sheet: Best used to control styling on multiple
pages.
<link rel="stylesheet" type="text/css"
media="all" href="css/styles.css" />
2. Internal Style Sheet: Best used to control styling on one page.
<style type=“text/css”>
h1 {color: red)
</style>
3. Inline Style Sheet*: CSS is not attached in the <header> but is
used directly within HTML tags.
<p style=“color: red”>Some Text</p>
CSS Rule Structure
A CSS RULE is made up of a selector
and a declaration. A declaration consists
of property and value.
selector {property: value;}
declaration
Selectors
A selector, here in green, is often an element of
HTML.
body { property: value; }
h1 { property: value; }
em { property: value; }
p { property: value; }
Properties and Values
body {background: purple;}
h1 {color: green; }
h2 {font-size: large;}
p {color: #ff0000;} /*hexadecimal for
red*/
Properties and values tell an HTML element how to display.
body {
background: purple;
color: green;
}
*CSS code can be written in a
linear format (above) or in a block
format (below).
Grouping Selectors
Group the same selector with different declarations
together on one line.
h1 {color: black;}
h1 {font-weight: bold;}
h1 {background: white;}
Example of grouping selectors (both are correct):
h1 {
color: black;
font-weight: bold;
background: white;
}
Grouping Selectors
Group different selectors with the same declaration on
one line.
h1 {color: yellow;}
h2 {color: yellow;}
h3 {color: yellow;}
Example of grouping selectors (both are correct):
h1, h2, h3 {color: yellow;}
Comments in CSS
• Explain the purpose of the coding
• Help others read and understand the code
• Serve as a reminder to you for what it all means
• Starts with /*and ends with*/
p {color: #ff0000;} /*Company Branding*/
Paragraph
To start off our understanding of cascading style sheets, we're
going to use a special line of CSS code that does something
HTML alone could never do right… we're going to indent
every paragraph automatically.
Here's the CSS code:
p { text-indent: 3em; }
Working with Paragraph
p { text-indent: 3em; }
Then, right before your </head> tag in each page add a line
similar to this:
<link rel="stylesheet" type="text/css" href="main.css"
title="Default">
This will link a new style sheet, location main.css, to each
page. The title field is optional.
import
@import can be used in conjunction with the other methods.
Imagine you want 2 pages out of your initial 10 pages to
have, in addition to the normal indent, each and every
paragraph in blue text. You could write a second style
sheet, we'll call it coolblue.css, and inside that sheet you
have:
p { color: blue; }
import
Then, in those 2 special pages, you place the normal CSS
link, but you'll add special code,@import, to add the extra
color.
<link rel="stylesheet" type="text/css" href="main.css"
title="Default">
<style type="text/css">
<!-@import url(coolblue.css);
--></style>
Basis overview
Those are the basics. Let's review the ways you can include
a style sheet:
Write it inline inside each and every tag
Place a <style> </style> at the beginning of the web page
Dedicate and link a CSS file and write it inside that file
use @import to include it as portion of a page's CSS
Exercise 1
Use <style> to make all paragraphs have 10 spaces
indentation (hint: 6em) and make the text red. Hint:
Combine both into one line of code using the ; separator.
Remember to create a paragraph in the <body> to see the
style in action! Generic text below.
This is the first paragraph
with the red text and large indent.
This is the second paragraph
with the red text and large indent.
Solution
<html>
<head>
<style type="text/css">
<!--
p { text-indent: 6em; color: red; }
--></style>
</head>
<body>
<p>This is the first paragraph<br>
with the red text and large indent.</p>
<p>This is the second paragraph<br>
with the red text and large indent.</p>
</body>
</head>
</html>
Headers
If you want to make all H1, H2, and H3 red, and all
H4, H5, H6 yellow, your style could look like this:
h1, h2, h3 { color: red; }
h4, h5, h6 { color: yellow; }
You can use the comma to say you want to define a
style for multiple selectors at the same time.
You can set a style for nearly all HTML elements.
Selector a class of a current element
Every paragraph is now indented. But what if you want a few
paragraphs without an indent? We can define an extra
selector.
You can pick a name for these, I'm going to call minenoindent.
Here's the original code with an added noindent selector:
p { text-indent: 3em; }
p.noindent { text-indent: 0em; }
This says that any p that are part of a class
called noindent should use 0em indentation. To call that in
code, we use class.
A normal paragraph looks like this:
<p> I'm using a style with an indent. </p>
Normal paragraph
A normal paragraph looks like this:
<p> I'm using a style with an indent. </p>
I'm using a style with an indent.
A paragraph with the noindent looks like this:
<p class="noindent"> I'm using a style without an indent.
</p>
I'm using a style without an indent.
If you are going to only indent some paragraphs, but you
probably won't indent most, you can just define a special
paragraph called indent.
p.indent { text-indent: 3em; }
If that's our only style, regular <p> </p> will have no indent,
This h1 has an indent.
Imagine a selector .g, defined as { color: green; }. Every time
you use class="g" in an element the text color would be
shown in green.
ID selectors are used for special formatting of only a few
elements. ID selectors use a # instead of a .. Imagine 3
paragraphs, we'll call them par1, par2, par3. We'll make
one red, one orange, and one blue.
This h1 has an indent con’t
We could use these styles:
p#par1 { color: red; }
p#par2 { color: orange; }
p#par3 { color: blue; }
<p id="par1">I'm in red</p>
<p id="par2">I'm in orange</p>
<p id="par3">I'm in blue</p>
ID Selectors can also be element-less:
#par1 { color: red; }
...would apply to all tags that specify id="par1".
PSEUDO-ELEMENTS
There are two important pseudo-elements that are built into
CSS capable web browsers. (There are also common
pseudo-classes which you'll learn in the links chapter.)
These two elements are :first-letter and :first-line. Notice that
pseudo-elements are defined with a : instead of
a . or # (this is because they have special meanings to a
web browser).
Here's a silly example for each: Imagine you want the first
letter of each paragraph to be red, or the first-line of each
paragraph to be green.
p:first-letter { color: red; }
p:first-line { color: green; }
CSS Background, Image and Color
Styles
You are probably familiar with the <body> tag. A
typical <body> tag looks something like this:
<body background="graphic.jpg" text="#FFFFFF"
bgcolor="#000000">
To convert that into CSS, it looks like this:
body { background-image: url(graphic.jpg);
color: #FFFFFF; background-color: #000000; }
Con’t
Big deal right?
But CSS adds some special features. One of the most
important is thebackground-repeat property.
It has these values: repeat, repeat-x, repeat-y, or no-repeat. A
regular web page has a default of background-repeat:
repeat, which means the image is repeated both horizontally
and vertically. With CSS, you can set the background to
repeat horizontally (repeat-x), repeat vertically (repeat-y), or
not repeat at all (no-repeat).
Images con’t
We can edit the style mentioned above to have the body's
background never repeat by adding background-repeat:
no-repeat:
body { background-image: url(graphic.jpg);
color: #FFFFFF; background-color: #000000;
background-repeat: no-repeat; }
If you want to include the repeat in your standard
background tag (for example, if are not using CSS for the
rest of your page), you can add style="backgroundrepeat: no-repeat;", so it looks like this:
<body background="graphic.jpg" text="#FFFFFF"
bgcolor="#000000" style="background-repeat: norepeat;">
There are two more important
background
properties: background-attachment andbackground-position.
background-attachment merely allows you to decide if you
want the background to scroll or not. If you want it to scroll,
use background-attachment: scroll. If you want it to not
scroll, use background-attachment: fixed.
background-position allows you to position the background. It
takes two values, the first is the the vertical position
(in px [pixels], % [percent], or top, center, bottom) and the
second value is the horizontal position
(in px [pixels], % [percent], or left, center, right).
Key features
If you want a background to be at the top right,
use: background-position: top right. If you want it to be at
the bottom center, use background-position: bottom center.
This is typically most useful used with background-repeat:
no repeat.
Key Con’t
As you can see, the coding for the background can get
pretty long. CSS lets you combine it all into a single
property statement, known as background. It follows this
format:
background: background-color || background-image ||
background-repeat || background-attachment ||
background-position
If you want a background color of white, a background
image lightpattern.jpg, the background to never repeat,
and never scroll, you could use:
body { background: #FFFFFF url(lightpattern.jpg) no-repeat
fixed; }
Key Con’t
Remember, you'll also need to set the text color, so add color: #000000 (if
you want black text)
body { background: #FFFFFF url(lightpattern.jpg) no-repeat fixed; color:
#000000; }
Notice that the browser is smart enough to realize that a value (in this case:
background-position) is missing and it ignores that value.
Always set a text and bgcolor in <body> for full browser compatibility.
Try a background with an element other than
body. A good candidate is the p
la la la la
<html>
<head>
<style type="text/css">
<!-body { background: #EEEEEE url(/graphx/back.jpg) repeat-y scroll; }
--></style>
</head>
<body>la la la la
</body>
</html>
<html><head><style type="text/css"><!-- body { background: #FFFFFF
url(/graphx/coddsite.gif) no-repeat fixed center left; }-></style></head><body></body></html>
Typical Web Page (Browser)
Container
header
menu
main
footer
Typical Web Page (HTML)
Typical HTML Web page is made up of containers (boxes)
or DIVs. Each DIV is assigned an ID or a Class.
<div id=“container”>
<div id=“header”>Insert Title</div>
<div id=“main">content
<div id=“menu”>content</div>
</div>
<div id=“footer”>content</div>
</div>
Typical Web Page (CSS)
The CSS file uses the same DIV/ID/Class names as the
HTML and uses them to style the elements.
#container {property: value;}
#menu {property: value;}
#main {property: value;}
#footer {property: value;}
IDs and Classes
• IDs (#) are unique and can only be used once on the page
• Classes (.) can be used as many times as needed
HTML Code:
<h1 id=“mainHeading”>Names</h1>
<p class=“name”>Joe</p>
CSS Code:
#mainHeading {color: green}
.name {color: red}
CSS Box Properties
•
•
•
•
•
•
•
Background-color
Width
Padding
Margin
Border-width
Border-color
Border-style
HTML
CSS
div id=“header”
div id=“content”
div id=“footer”
#content {
background-color: #ccc;
margin-bottom: 10px;
border: 1px dashed blue;
color: #fff;
width: auto;
}
The <div> tag
The <div> tag is nothing more than a container unit that
encapsulates other page elements and divides the HTML
document into sections.
Web developers use <div> elements to group together HTML
elements and apply CSS styles to many elements at once.
For instance, by wrapping a set of paragraph elements into
a <div> element, the we can take advantage of CSS styles
and apply a font to all paragraphs at once by applying a font
style to the <div> tag instead of coding the same style for
each paragraph element.
Common CSS Layout Properties
Width
Height
Float
Clear
Border
Padding
Margin
margin
padding
width
height
•
•
•
•
•
•
•
border
Width & Height
Width and height define the width and height of an element.
div id=“box”
#box {width=“50px”}
#box {height=“auto”}
#box {width=“50em”}
#box {width=“100%”}
#box {width=“auto”}
*Width and height can be specified
in pixels, ems, percentages or set to
auto
Float: (left, right)
Float property makes elements float to the right or
left of the screen, positioned where they are in the
HTML. Floating allows word wrapping.
div id=“box”
Here is some text which
wraps around the box
floated to the left.
#box {float:left; margin-right: 10px;}
Clear: (left, right, both)
When elements are floated, they wrap around each other to
form a “caravan.” The clear property detaches an element
from the “caravan” and allows it to start on a new line.
div id=“box1”
div id=“box2”
div id=“box3”
#box3 { background-color: white; border:
1px solid #000; clear: both;}
Border (top, right, bottom, left)
div id=“box”
You can define the entire border or
only the top, bottom, left, or right. You
can also define the border using one
declaration. The code could be any of
the following:
#box {
border-top: red dotted 1px;
border-bottom: red dotted 1px;
border-left: red dotted 1px;
border-right: red dotted 1px;
}
#box {
border: red dotted 1px;
#box {
border-color: red;
border-style: dotted;
border-width: 2px;
Padding (top, right, bottom, left)
Padding is the space between the text/content and the border. You can use
padding for all around the element or specify each side of the rectangle
separately.
The code could be any of the following:
padding
padding: 10px;
Padding: 10px 10px;
div id=“box”
padding: 10px 10px 10px 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-top: 10px;
Margin (top, right, bottom, left)
Margin is the space outside the text/content and the border. You can use
margin for all around the element or specify each side of the rectangle
separately.
The code could be any of the following:
margin
margin: 10px;
or
margin: 10px 10px;
or
div id=“box”
margin: 10px 10px 10px 10px;
or
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-top: 10px;
Text Properties
MAIN HEADING
Gravida lacinia velit.
Vivamus tortor enim,
tincidunt at, pellentesque ut,
iaculis eu, quam.
To style the main heading in
the paragraph above, we assigned
a class the HTML tag.
.mainHeading {
color: red;
letter-spacing: 5px;
text-transform: uppercase;
word-spacing: 15px;
text-align: left;
font-family: Times;
text-decoration: underline;
font-size: 12px;
font-style: italic;
font-weight: bold;
}
<h3 class=“mainHeading”>Main Heading</h3>
CSS Colors
Standard
Hexadecimal
•
•
•
•
•
•
•
•
• #ffffff
• #fff
• #cccf0f3
White
Black
Blue
Fuchsia
Gray
Green
Lime
Aqua
Styling Links
The links property defines how inactive, hovered,
active, and visited link states appear to the user.
a:link {color: red; text-decoration:
none;border-bottom: 1px dashed red;
background: white;}
a:visited {color: yellow;}
a:active {color: green;}
a:hover {color: orange;}
Including Images
Properties for working with images include:
• Background-image
• Background-repeat
• Background-position
• Background-attachment
Layering
Background colors
and images are
layered like sheets
of paper one on top
of the other.
div id=“bg”
div id=“main”
div id=“box”
#bg {background:url(leaves.jpg) no-repeat top left}
#main {background-color: red}
#box {background-color: yellow}
Background-Image
The background-image property sets an image
in the background of an element.
Background images and colors are layered.
If not transparent, the last one listed in the
CSS file is visible.
li {
background-image:url(flower.jpg);
padding-left: 10px;
}
Background-Repeat
The background-repeat property sets an
image in the background of an element and
tiles, or repeats, it. Tiling is the default.
li {
background-image:url(flower.jpg);
background-repeat:no-repeat;
}
•
repeat
Possible Values > • repeat-x (horizontal)
•
repeat-y (vertical)
•
no-repeat
Image Positioning
The background-position
property positions the image
using either combined
keywords (top, bottom, left,
right, and center); length
values; or percentage values.
background-position: right top;
/*can also use number values*/
background-attachment: fixed;
/*can also use ‘scroll’*/
left
center
top
top
left
center
right
bottom
bottom
bottom
The backgroundattachment property
fixes or scrolls an
image in the browser
window. Values include
fixed and scroll.
The Power of Cascade
When multiple styles or style sheets are used, they start to
cascade and sometimes compete with one another due to
CSS’s inheritance feature. Any tag on the page could
potentially be affected by any of the tags surrounded by it.
So, which one wins? Nearest Ancestor Wins.
1. Inline style or directly applied style
2. The last style sheet declared in the <header> section
Saving Time with Inheritance
In a nutshell, inheritance (not the money you get from
your grandma) is the process by which CSS properties
applied to one tag are passed on to nested tags.
For example, the paragraph tag will inherit the same
styling as the body tag because <p> is always located
inside <body>.
<body style=“font-family: Arial”>
<p>This text will be Arial as well</p>
</body>
So, instead of styling each paragraph separately, you can define the
font color in the <body>, and everything inside will have that color.
Resources
•
•
•
•
•
http://www.w3schools.com/css/css_reference.asp (list of all CSS properties)
http://www.w3schools.com/css/
http://www.glish.com/css/
http://www.html.net/tutorials/css/
http://blog.html.it/layoutgala/
Great Book
“CSS: The Missing Manual” - by David Sawyer McFarland
Thank You
I hope you enjoyed this presentation and learned
some basic CSS. I hope this will help with
creating beautiful and functional Web sites.