HTML and Web Page Design
Download
Report
Transcript HTML and Web Page Design
Bio 2900
Computer Applications in Biology
HTML and Web Page Design
Presented by
Frank H. Osborne, Ph. D.
© 2005
Introduction to HTML
• HTML is hypertext markup language.
• It is the foundation on which all Web
pages are built.
• HTML is a code that uses elements
(called tags) that indicate how certain
parts of the document are to be displayed
on the computer screen by the browser.
HTML Tags
• HTML tags are containers. They are
generally in pairs.
• The HTML tags determine what is done
to the text they contain.
• A typical pair is <b> and </b>. The first
tag begins boldface while the last tag ends
boldface. The span of text contained in
this pair of tags will appear in boldface
type when displayed by the browser.
Properties of an HTML document
• The entire document begins with <html>
and ends with </html>.
• The document has two major sections.
The first is found within the <head>
</head> pair of tags.
• The second section is found within the
<body> </body> pair of tags.
Properties of an HTML document
<html>
<head>
Special tags and properties of the document are
placed in the head section.
</head>
<body>
The document that will appear on the screen is
placed in the body section.
</body>
</html>
Typical contents for the head section
• <title>HTML and Web Page Design</title>
– indicates the title that the browser will display at the
top of the screen.
• <style type="text/css"> A place where special
css (cascading style sheets) commands are
placed </style>
• Other types of contents are possible, such as
<meta> which is used to indicate the program
that created the document as well as key words
used by search engines.
Typical contents for the body section
• <p> Indicates each paragraph. </p>
• Text appearance can be normal, bold, italics,
underlined, small caps, or teletype style.
• You can add paragraph breaks with <br />
• You can divide the screen with horizontal lines
using the <hr /> (horizontal rule) tag.
• Different sizes of type.
• Different sizes of headings.
• Colors for text or backgrounds.
Typical contents for the body section
Objects can be included in the text. These
include:
• Tables
• Lists (ordered, unordered, or definition lists)
• Images, including photographs, drawings,
audio or video files.
• Links to other parts of the document
• Links to other documents in the same directory,
• Links to other computers.
Cascading Style Sheets (css)
•
•
•
•
Once style attributes are defined, they
cascade down through the entire web page.
They can be used to change the appearance of
a specific part of text in a <span> or <div>
They can be defined at the top of the
document and pertain to all of it. (For
example you can make all instances of
boldface appear blue by using only one
command.)
They can apply to more than one file across
many Web pages.
Other Web Page Enhancements
•
•
JavaScript allows programs to be run while
the viewer is looking at the Web page.
Web logs (aka blogs)
–
–
–
–
–
Create new Web pages that are visually consistent
with the existing site
Link all pages together
Organize content based on the entry date and
user-defined categories
Offer readers alternative methods of keeping
track of what's new
Work within a Web browser.
References
Taylor, Dave. 2004. Creating cool web sites with
HTML, XHTML and CSS. New York: John
Wiley and Sons.
Vandome, Nick. 2004. Creating Web pages in
easy steps, for Windows and Mac. New York:
Barnes and Noble.
The End