View the HTML XHTML Power Point
advertisement
CSS AND XHTML
An Introduction ….
Part I:
History of the Internet
The Internet vs. The World Wide Web
When did the Internet begin?
1968
Created by the U.S. Department of Defense
Originally called ARPA
(Advanced Research Project Agency)
Why was it created?
www.nasa.gov/externalflash/SpaceAge
Who developed the Internet?
http://history.nasa.gov/sputnik
As a way to connect computers so if one machine went
down the others would keep working (SPUTNIK)
What organization used it first?
The National Science Foundation (NSF) introduced it to
college campuses in 1983.
Internet Questions
What is the Internet?
The physical connection of the
W_________ W_______ W____.
Basically it is hardware
What year do you think email began?
1971
Before the first web pages were created!
What is WWW?
World Wide Web
Began in 1991
Created by Tim Berners-Lee
He, along with his research team of scientists in Sweden,
completed it in 1989.
Their purpose was to share Physics research electronically,
therefore creating HTML code.
A piece of software that runs on the Internet that
allows users to share files.
The Beginning of the End of HTML
NETSCAPE
Web Browser
A user agent that allows you to read HTML.
MOSAIC
Developed in 93-94
Huge browser which had a large influence on HTML code
Is the only browser that had to be purchased!
1st browser that allowed for graphics to be viewed on the
Web page
Internet Explorer -- 1995
Free browser! Gave Netscape a run for its money!
Continued ….
W3C
World Wide Web Consortium
Developed in 1993
Used to set standards and recommendations
for regulating HTML
Didn’t work because Netscape was so big!
President: Tim Berners-Lee
He never trademarked or copyrighted his
Internet invention, he called it “His Gift to
the World”. He says it’s the biggest
mistake he’s ever made!
Final version of HTML is 4.01 -- 1999
Neither large browser fully supports this
standard
Part II:
Bring on XHTML
Developed to ensure proper code is written,
following standards, so that all browsers can read
all web pages
XHTML vs HTML -- The Most Important Differences:
XHTML elements must be properly nested
<p><strong><em>This is a
test</em></strong></p>
XHTML elements must always be closed
Wrong: <hr>
Wrong: <br>
Right: <hr />
Right: <br />
Wrong: <p>This is a paragraph.
Wrong: <img src =“image.gif”>
Right: <p>This is a paragraph</p>
Right: <img src=“image.gif” />
XHTML vs HTML -- The Most Important Differences:
XHTML elements must be in lowercase
Wrong: <H1>This sentence is the largest heading
size.</H1>
Right: <h1>This sentence is the largest heading
size.</h1>
XHTML documents must have one root element
<html>
<head> ... </head>
<body> ... </body>
</html>
Some More XHTML Syntax Rules
Attribute names must be in lower case
wrong: <table WIDTH="100%">
right: <table width="100%">
Attribute values must be quoted
wrong: <table width=100%>
right: <table width="100%">
Mandatory XHTML Elements
The html, head, title, and body elements must be present
This is an XHTML document with a minimum of required
tags:
<!DOCTYPE Doctype goes here>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title goes here</title>
</head>
<body>
</body>
</html>
<!DOCTYPE> Is Mandatory
There are three XHTML DTDs:
STRICT
TRANSITIONAL
The most common DTD is XHTML Transitional
Use the transitional DOCTYPE when you want to still use HTML's presentational
features.
FRAMESET
Use the strict DOCTYPE when you want really clean markup, free of
presentational clutter. Use it together with CSS.
Use the frameset DOCTYPE when you want to use HTML frames.
Note: The DOCTYPE declaration is always the first line in an XHTML
document!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Deprecated Tags
Deprecated Tag
Replacement Tag
<font>
Style sheet
<center>
<div style="text-align:center">
<menu>
<ul>
<u>
Style sheet
<b> and <i> (not deprecated, but used
with reservations)
<strong> and <em>
Deprecated Attributes
Deprecated if used in ….
Attribute
align
<caption>, <img>, <table>, <hr>,
background
<body>
bgcolor
<body>, <table> <tr> <td> <th>
hspace
<img>,<object>
vspace
<img>,<object>
size
<font>, <hr>
width
<hr>, <pre>, <td>, <th>
link, alink, and vlink
<body>
border
<img>, <object>
Let’s Key Some Code – Yippee!
Open Notepad and key the code on the handout
your were given
Once you are done, save the file as: index.html
Preview the page in your browser, proofread for
errors and edit
Resources/References
History of HTML -http://www.w3.org/People/Raggett/book4/ch02.h
tml
History of HTML/XHTML -http://www.yourhtmlsource.com/starthere/historyof
html.html
XHTML Online Quiz -http://www.w3schools.com/quiztest/quiztest.asp?qt
est=XHTML
Continued …
Validate your web pages: http://validator.w3.org/
XHTML Online Tutorial:
http://www.w3schools.com/xhtml/default.asp
HTML/XHTML Tag List:
http://www.w3schools.com/tags/default.asp
Part III:
What is CSS?
What can I do with CSS?
What is the difference between CSS and HTML?
What are the benefits of CSS?
How do you do CSS?
A look at some examples
Let’s try some!
What is CSS?
An acronym for Cascading Style Sheets
Style language that defines layout of HTML and
XHTML documents
W3C first recommended use of CSS in Dec. 1996
Slow to be broadly adopted
Supported by all major browsers (varying degrees)
What can I do with CSS?
Sitewide design changes by editing a single file
Use logical names for page elements (ie ‘header’)
Create sites faster
Reduce need for JavaScript
Absolute positioning of elements
Stacking of elements
Difference between CSS and HTML
HTML controls the content
CSS controls the way the content is displayed
What are the benefits of CSS
Faster page loading
Lowered hosting costs
Redesigns are more efficient
Redesigns are less expensive
Visual consistency maintained throughout website(s)
Better for SEO
Benefits continued
Accessibility
Competitive edge (job security)
Quick website-wide updates
Easier for teams to maintain (and individuals)
Increased usability
More complex layouts and designs
No spacer gifs
How do you incorporate CSS?
External style sheet
Internal style sheet
Inline style
External Style Sheet
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
The external sheet does NOT contain any HTML tags
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
Internal Style Sheet
<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
Inline Style
An inline style loses many of the advantages of
style sheets by mixing content with presentation. Use
this method sparingly!
<p style="color:sienna;margin-left:20px">This is a
paragraph.</p>
Cascading order
Browser default
External style sheet
Internal style sheet (in the head section)
Inline style (inside an HTML element)
An
inline style (inside an HTML element) has the highest
priority, which means that it will override a style
defined inside the <head> tag, or in an external style
sheet, or in a browser (a default value).
Example of external style sheet
h1 {
font-family: 'Times New Roman';
font-size: 36px;
background: #ffffff;
color: maroon;}
h2 {
font-family: arial,verdana,sans-serif;
font-size: 20px;
background: #ffffff;
color: black;}
p{
font-family: arial,verdana,sans-serif;
font-size: 16px;
background: #ffffff;
color: navy;}
Div - short for division
Divides the content into individual sections
Each section can then have its own formatting
.large { color: #00FF00;
size: 4pt; }
font-family:arial;
The HTML code<div class="large">
DIV sample. </div>
font-
This is a
Span
Finer level division than DIV
Can span to format a single character if needed
.largefont {
color: #0066FF;
fontfamily:arial; font-size: 6px; }
The HTML code
<span class="largefont">block level</span>.
Class versus ID
ID = Identification (ID) is unique to one person
Use
IDs when there is only one occurrence per page
Standards specify that any given ID name can only be
referenced once within a page or document
one menu per page, one banner, and usually only one
Class = There are many people in a class
Use
classes when there are more than one occurrence
per page
Lets create a style sheet
Resources
http://www.html.net/tutorials/css/lesson1.asp
http://www.adobe.com/devnet/dreamweaver/articles/why_css.htm
http://css-discuss.incutio.com/wiki/Why_Css
http://www.tizag.com/cssT/cssid.php
http://www.barelyfitz.com/screencast/html-training/css/positioning/
http://www.chromaticsites.com/blog/13-reasons-why-css-is-superior-totables-in-website-design/
