HTML - Kirkwood Web Certificate Server
Download
Report
Transcript HTML - Kirkwood Web Certificate Server
HTML
Cyndi Hageman
The Internet
The internet is a worldwide collection
of computer networks sharing
information via a common set of
networking and software protocols.
History
1960’s – funded by the Department
of Defense – they wanted
computers that could communicate
in spite of a nuclear attack.
ARPAnet was available and used by
defense conractors and academic
institutions.
1990’s businesses wanted it opened
up for unrestricted traffic.
History (cont.)
Internet was too disorganized – it was
hard to connect and the information was
sent in pieces.
CERN came up with HTML browser
software that unified text, graphics and
sounds
NCSA at the University of Illinois created
Mosaic, the first web browser to interpret
HTML. It was free.
How it all works
Every computer is identified by a
number. Numbers are too difficult
to remember so every site is also
identified by name.
http – Hypertext Transfer Protocol is
the means of transferring web
pages. The client requests a page,
the page is sent to the client from
the server via http
How it all works (cont.)
www is the prefix (world wide web)
Domain name – the unique given
name of a web site
Domain
.com
.net
.org
.edu
.gov
commercial
internet service provider
nonprofit organization
educational institution
US government
W3C
World Wide Web Consortium
Define the standard of HTML and
XHTML
Standardize any technology related
to the web
css
Xml
http
Things to Know
Window – the browser window that
opens
Web page/document – the content
of a page that is displayed in a
window
url – uniform resource locator – web
page address
HTML vs. CSS
HTML and XHTML are all about
structure of a web page. It lays out
how the content of the web page
are to appear.
CSS makes that content look good.
CSS is all about appearance.
HTML Tags
HTML is created by using tags.
Most tags have an opening tag and
a closing tag and you place the
content between the tags.
There are some that do not require
a closing tag in HTML.
XHTML vs. HTML
The highest level of HTML is 5
http://webdesign.about.com/od/ht
ml5/qt/what_is_html5.htm
The next generation is XHTML 1.0.
XHTML
Lower case
All tags need a closing tag
Tags must be properly nested
Basic HTML Document
<html>
<head>
</head>
<body>
</body>
</html>
Basic XHTML Document
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">
<html xmlns=“http://www.w3.org/1999/xhtml>
<head>
</head>
<body>
</body>
</html>
XHTML
Like HTML but uses DTD to define XML
elements
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xht
ml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
>
XHTML
Nested Tags
Same as current HTML
<b>This statement is <i>itallic</i></b>
End Tags are required
<p></p>
<br />
<input type = “text” name=“txtName” />
XHTML
Case sensitive
All html tags need to be lower case
Attributes in Quotes
All attribute values must be in double
quotes
<table name=“tblTableOne” cols=“3”
rows=“5” width=“500”>
XHTML
Explicit Attribute values
All attributes must have a value
<option “IA” selected=“selected”>
<input type=“radio” name=“rdoMF” value=“M”
checked=“checked”>
Special Characters
Put javascript in external files
<img src=“saltandpepper.jpg” alt=“Salt &
Pepper”>
See appendix F for character definitions
XHTML
Name vs. Id
XHTML has a strong preference for the
Id tag
If you have to use the name attribute
for a tag, then also add the id attribute
DTD
The doctype declaration should be the
very first thing in an HTML document,
before the <html> tag.
The doctype declaration is not an HTML
tag; it is an instruction to the web
browser about what version of the
markup language the page is written in.
The doctype declaration refers to a
Document Type Definition (DTD). The
DTD specifies the rules for the markup
language, so that the browsers can
render the content correctly.
DTD
HTML 4.01 Strict
contains all HTML elements and
attributes, but does not include
presentational or deprecated elements
(like font). Framesets are not allowed.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
DTD
HTML 4.01 Transitional
contains all HTML elements and
attributes, including presentational and
deprecated elements (like font).
Framesets are not allowed.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
>
DTD
HTML 4.01 Frameset
equal to HTML 4.01 Transitional, but
allows the use of frameset content.
<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01
Frameset//EN"
"http://www.w3.org/TR/html4/fram
eset.dtd">
DTD
XHTML 1.0 Strict
contains all HTML elements and
attributes, but does not include
presentational or deprecated elements
(like font). Framesets are not allowed.
The markup must also be written as wellformed XML.
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xht
ml1-strict.dtd">
DTD
XHTML 1.0 Transitional
contains all HTML elements and
attributes, including presentational and
deprecated elements (like font).
Framesets are not allowed. The markup
must also be written as well-formed XML.
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xht
ml1-transitional.dtd">
DTD
XHTML 1.0 Frameset
equal to XHTML 1.0 Transitional,
but allows the use of frameset
content.
<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0
Frameset//EN"
"http://www.w3.org/TR/xhtml1/DT
D/xhtml1-frameset.dtd">
DTD
XHTML 1.1
equal to XHTML 1.0 Strict, but
allows you to add modules (for
example to provide ruby support for
East-Asian languages).
<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DT
D/xhtml11.dtd">
<title></title>
Located in the <head></head>
Used to give a title to the page. It
shows up in the browser window.
Helps web search engines to find
your page.
Comments
You should always put comments in
your code to define your page. You
may not be the one maintaining the
page after it is built.
<!-- put comments here -->
Comments are ignored by the
browser but can be seen when the
client views the source.
Headings
Heading tags are used to put titles
or subtitles on your page.
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
Text
You can separate or distinguish text in
different ways
<p></p> - paragraph – puts one blank line
after the text
<br> - line break – moves text to the next line
with no blank line between
<div></div> - allows you to divide your page
in sections – puts one blank line after text
<span></span> - allows you to distinguish
inline text to apply a style or format.
italic
<i></i> - physical element that will
make the text italic.
<em></em> - logical element that
will make the text italic and will
make the text accessible to screen
readers.
bold
<b></b> - physical element that
makes text appear bold.
<strong></strong> - logical
element that makes text appear
bold and is accessible to screen
readers.
Nesting Elements
Elements need to be nested
properly to be displayed properly by
the browser and to be validated
correctly
The tag that is opened first, must
be closed last
<p>The article will be featured in
the <b>Cedar Rapids
Gazette</b></p>
Other Content Tags
<address></address> - text is an
address and is displayed in italic
<blockquote></blockquote> indents the text on the left and
right and some browsers display in
italic
<cite></cite> - indicates a citation
or reference and displays in italic.
Page 77 for more content tags
Character Entities
Begin with & and end with ;
Examples
®
registered symbol
© copywright symbol
non-breaking space
« left-pointing double angle
quotation mark
¼
one quarter fraction
½
one half fraction
¾
three quarters fraction
Character Entities (cont.)
http://www.evolt.org/article/ala/17/
21234/
http://htmlhelp.com/reference/html
40/entities/
Horizontal Rule
<hr />
Provides a line on the page give a
visual separation
You can set attributes within the tag
to determine appearance such as
size and color.
Text Size
<big></big> - makes the text one
size bigger than the default.
<small></small> - makes the text
one size smaller than the default.
Unordered Lists
Lists items using a bullet or an
image in place of a bullet
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
Ordered List
Lists items with numbers, letters or
roman numerals
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
Definition List
Used to create a glossary or FAQ
page
<dl> <!--definition list -->
<dt>
<!--definition term-->
</dt>
<dd>
<!--definition
description-->
</dd>
</dl>
Nested Lists
Lists can contain other lists
The browser will automatically the
bullets or numbering style based on
the level of nesting
Nested Lists (cont.)
<ul>
<li>Movie Channels
<ul>
<li>HBO</li>
<li>Show Time</li>
</ul>
</li>
<li>Learning Channels
<ul>
<li>Discovery Channel</li>
<li>History Channel</li>
</ul>
</li>
</ul>
Linking
One of the best features of HTML is
our ability to link to other pages
You can link to another page in your
web site, an outside url, another
part of the page you are on or an
email address.
Use the <a> tag or anchor tag to
create a link.
Inter document linking
You can link to a page within your
web site.
You should try to list the entire path
to that file
<a href =
“/default.htm”>Home</a>
External Link
You can create a link to another
web page outside of your website
Consider using the target attribute
to open up a new window
<a href=“http:www.adobe.com”
target = “_blank”>Download latest
version of Adobe Reader</a>
Email link
You can create an email link to open
the users default email program and
specify the email addres it is to be
sent to.
<a href=
“mailto:[email protected]?S
ubject=Site Feedback” title=“Email
Web Help”>Web Help</a>
Intra-document links
You can create a bookmark on a
page using a named anchor
The spot on the page you want to
set as a bookmark uses the name
attribute with no href.
The link you want to create that
makes the user jump to a named
anchor uses the href.
Intra-document links (cont.)
<a href=“#movie”>Movie
Channels</a>
<a name=“movie”>Available Movie
Channels Through
Cable</a><p>We offer several
movie channels including HBO,
Show Time and Stars</p>
GIF Images
Graphic Interlaced Format
Used for buttons, logo’s, drawings
and non-photographic images
Download quickly
Limited to 256 colors
Created in graphic design programs
such as Photoshop, Paint Pro or
Fireworks
GIF Variations
Interlaced – gif will come into focus
gradually while the rest of the page loads
Transparent – page background can show
through transparent parts of the image so
you can have curved edges or other
shapes
Animated – images saved in a single file
that allow for simple animated images.
JPG Images
Joint Photographic Experts Group
Used for photographic images
Usually a bit bigger in size than gif
images and may take longer to load
Image Tag
<img /> - does not require a closing tag
Src attribute defines the path to where
the image is stored.
Width and height – you can define the
width and height of an image so the
browser does not have to determine the
dimensions of the image
<img src=“images/mypic.jpg” width=“120”
height=“200” />
Alternative Text
Description of the image or
indication of the purpose of the
image
Displayed if users shut off images in
their browser
Screen readers read the alternative
text
Screen tip on mouseover
Image Border
You can use the border attribute to
create or remove a border on an
image.
Set the border thickness in pixels:
border = “1”
border = “0” – no border
Aligning Text
The <img> tag embeds the image
in the HTML document.
Text will appear above or below the
image
Use align attribute to align text the
left, right, top or middle of the
image.
Image as a Hyperlink
You can make an image a hyperlink
by wrapping an <a> around the
<img> tag
<a href=“default.htm”><img
src=“images/logo.gif” /></a>
Image Map
You can use an image map to make part
of an image linkable – may be used when
displaying a map and you can click on
different states to display different pieces
of information.
Ismap – server side processing of clicking
on a map.
Usemap – client side processing of
clicking on a map.
http://www.image-maps.com/
Usemap Example
<a href=“processmap.asp”>
<img src=“images/map2.gif” ismap
usemap=“#map2”>
</a>
<map name=“map2”>
<area coords = “0,0,49,49”
href=“Iowa.html”>
<area coords = “50,0,99,49“
href=“Illinois.html”>
</map>
Attributes
Tags such as <body>, <div> or <table>
can have attributes set within the tag for
a background image, background color or
link state
Bgcolor- set this to give that element a
background color
Background – set this attribute to the url
of an image to give it a background
image.
Attributes (cont.)
In the <body> tag you can set the state
of links
Link=“orange” - sets any link in the body
of that page to orange before it is visited
Vlink=“red” - once a link is visited, it sets
the color to red.
Alink=“green” - when you click on a link
to make it actve the color will be green.
These attributes are deprecated in HTML
4.0 because they should now be set with
styles.