Transcript Creating a Web Page - Saddleback College

Saddleback College
Welcome to CIM 271A
XHTML WEB PAGE
DEVELOPMENT--BEGINNING
Lesson Plan
•
•
•
•
Introduction
Syllabus
Certificate Programs
Tutorial 1 - Developing a Basic Web
Page
– Session 1.1
– Session 1.2
• Review
Developing a Basic Web Page
Maureen Smith
Professor, Saddleback College
Tutorial 1
Objectives
• Review the history of the Internet, the
Web, and HTML
• Describe different HTML standards and
specifications
• Learn about the basic syntax of HTML
code
• Mark elements using two-sided and
one-sided tags
• Insert an element attribute
• Create comments
• Describe block-level elements and inline
elements
• Specify an element’s appearance with
inline styles
• Create and format different types of
lists
•
•
•
•
•
•
Create boldfaced and italicized text
Describe logical and physical elements
Define empty elements
Insert an inline image into a Web page
Insert a horizontal line into a Web page
Store meta information in a Web
document
• Display special characters and symbols
Session 1.1
• In this session you will help an
instructor create a Web page for his
class
Introducing the World Wide
Web
• Computers (nodes) that are linked together
form a network (LAN/WAN/client-server)
• Today the Internet is a structure made up of
millions of interconnected computers whose
users can communicate with each other and
share information
• Late 1960s was called ARPANET and
consisted of two network nodes connected by
a phone (UCLA and Stanford)
– But there were problems
– Computer in Bethesda might have
information on breast cancer, but if you
didn’t know that computer existed and how
to reach it, the Internet offered few tools
to help you get there
– What was needed was a tool that would be
easy to use and would allow quick access
to any computer on the Internet,
regardless of its location
• This tool would prove to be the World
Wide Web
The development of the World
Wide Web
• World Wide Web organizes Internet’s
vast resources to give you easy access
to information
– In 1989, Timothy Berners-Lee and others
at CERN nuclear research facility near
Geneva, Switzerland, laid foundation of the
Web
– They developed a system of hypertext
documents that made it easy to move from
one source of information to another
– A hypertext document is an electronic file
that contains elements that you can click to
open another document
• This offers new way of progressing
through series of documents
– With hypertext you progress through pages
in whatever way is best suited to you
– Lets you skip from one topic to another
• Two familiar sources of hypertext are
Windows Help files and Macintosh
HyperCard stacks
– Click or highlight phrase or keyword known as a link
– Clicking a link takes you to another section
of the document or another document
entirely
• Entire collection of linked documents is
called a Web site
– Hypertext documents within a Web site are
known as Web pages
• So hypertext as implemented by the
CERN group involves jumping from one
document to another on computers
scattered all over the world
• The Web is not limited to reading text
– Web documents can contain graphics,
video clips, sound clips, and more recently,
programs that can be run directly from the
page
– Source of information and can be a work of
art
• Final feature that contributes to Web’s
popularity is that it gives users ability to
easily create their own Web documents
– Other Internet tools often require expertise
of a computer systems manager
– In 1993 there were only a couple hundred
Web sites worldwide; by 1999 there were
almost 174 million
– So a good place to post a resume
Web servers and Web
browsers
• Web has two components: the Web
server and the Web browser
– Web server is the computer that stores the
Web document that users access
– Web browser is the software that accesses
the Web document and displays its
contents on the user’s computer
• Can locate a document on a server anywhere in
the world
• Browsers are either text-based like the
Lynx browser found on UNIX machines
or graphical like Netscape Navigator
– With text-based, you navigate by typing
commands; with graphical, use mouse to
move from page to page
– Browsers are available for virtually every
computer platform
HTML: the Language of the
Web
• When a browser locates a Web
document on a server, it needs a way to
interpret what it finds
– To create a Web document, you use a
special language that browsers can read
called a markup language—it describes a
document’s structure and content
– Most common is Hypertext Markup
Language or HTML (not a programming or
formatting language)
• HTML doesn’t necessarily tell you how a
browser will display a document
– If you want to format your document,
preferred method is to use styles
– Styles are format descriptions written in a
separate language from HTML that tell
browsers how to render each element
The History of HTML
– First version was created using the
Standard Generalized Markup Language
(SGML)—1980s
• It is a metalanguage or language used to
create other languages
– No one organization was responsible for
the language, so changes could be made
• Competing browsers introduced some
differences called extensions
• Netscape and IE added the most
– More options but more complicated
• Ultimately a group of Web developers,
programmers, authors called the World Wide
Web Consortium, or W3C, created a set of
standards that all browsers were to follow
– www.w3c.org for services they offer
• Figure 1-4 shows versions of HTML that W3C
has released
• Older features are often deprecated or
phased out by W3C
– Doesn’t mean you can’t continue to use
them
– For older browsers you may need to use
them
– So be familiar
• Future Web development is focusing on
two other languages: XML and XHTML
– Extensible and Extensible Hypertext
Markup Languages
– Using XML, developers can create
documents that obey specific rules for
content and structure
• HTML includes a wide variety of rules without a
built-in mechanism for enforcing them
• One of the markup languages created
with XML is XHTML, a stricter version of
HTML
– Designed to address problems of different
and competing versions of HTML, and to
better integrate HTML with XML
• HTML will not become obsolete anytime
soon
– HTML and XHTML overlap and the Web is
full of old HTML documents
– And we still need to support older browsers

• So become well-versed in the history of
HTML
– Impacts how you write your code
• Know your market
– Older browsers?
• And test!
– Don’t assume that if your page works in
one browser, it will work in another
Tools for Creating HTML
Documents
• HTML documents are simple text files
– Just need a basic text editor such as
Notepad
• HTML converter converts formatted text
into HTML code (such as Word)
– Does not do a good job—too much code
and difficult to edit the code

• HTML editor inserts HTML codes for you
as you work (such as DreamWeaver)
– Will usually still have to work directly with
HTML code to create a finished document
Session 1.2
• In this session you begin entering the
text that will form the basis of your Web
page
– Start by drawing a planning sketch or by
creating a sample document using a word
processor
Creating an HTML document
• Identify the different elements
– A distinct object like a paragraph, heading,
or the page’s title
– Steven’s handout includes several:
heading, photo, horizontal line,
introductory paragraph, two main sections,
etc.
– Take note of any formatting such as bold
and italics
Marking Elements with Tags
• A tag marks each element
– Can be either two or one-sided
– A two-sided tag contains some content
• You apply a tag to document content
using the syntax:
<element>Document Content</element>
Or
<element />
• Can always identify a tag by the
brackets (<>) that enclose the name
– Some tags can include attributes, or
additional information placed within the
brackets that defines the tag’s appearance
– Tags usually come in pairs: the opening tag
is the first tag, which tells the browser to
turn on the feature and apply it to the
document content that follows
– Browser applies the feature until it
encounters the closing tag, which turns off
the feature
– Note that closing tags are identified by the
slash ( /) that precedes the tag name
– Not every tag has an opening and closing
tag
• Some are known as one-sided tags
(empty) because they require only the
opening tag
• Two-sided tags require both
• Earlier versions of HTML allowed you to
omit a closing tag if the surrounding
code clearly indicated the tag’s content,
but this practice is no longer
recommended

– XHTML requires both an opening and
closing tag for a two-sided tag
• HTML allows you to enter element
names in upper or lowercase
– But XHTML strictly requires lowercase, so
we will follow that convention
• A one-sided tag contains no content
– HTML allows you to omit the space and
slash, but XHTML does not
<br />
• Third type of tag is the comment tag
Comment
– Used to add notes to your code
– Not required and not displayed by browser
– Useful for documenting code for yourself
and others
<!– comment 
– Where comment is the text of your note
White Space and HTML
• Any tag can be extended over several
lines
– As simple text files, HTML documents are
composed of characters and white space
• Blank spaces, tabs, line breaks
– HTML treats each occurrence of white
space as a single blank space
• No difference between a blank space, tab, or
line break
• Extra white space is collapsed into a
single occurrence
– Used to make your code more readable
Element Attributes
• Many tags contain attributes that
control behavior or appearance of
elements
<element attribute1=value1”
attribute2=“value2”
…>content</element>
• Can list attributes in any order but must
separate them with white space
– Lowercase
– Enclose values within quotation marks
• XHTML requires them
The Structure of an HTML File
• Most fundamental element is the HTML
document itself—marked with two-sided
HTML tag
<html>
</html>
– Anything between makes up document
• HTML document is divided into two
sections: head and body
– Head element contains info re document—
title or keywords for a search engine
• Not displayed within web page, but title will be
in title bar
– Body element contains all the content
displayed in the Web page
• And contains code that tells browser how to
render that content
<html>
<head>
</head>
<body>
</body>
</html>
– Body follows head element
• Let’s add a title element
– Can include only one
<html>
<head>
<title>Mr. Dube’s Chemistry Classes</title>
</head>
<body>
</body>
</html>
• Placing one element within another is
called nesting
– Must close inside element before closing
outside element
– See tutorial1/chem1.htm
Displaying an HTML File
• The file you are creating is the HTML
file
– A browser will not display the HTML file,
but will display the formatted page
– Should occasionally display it with a
browser to verify that there are no syntax
errors or other problems
• Might view in several browsers to check for
differences
Working with Block-Level
Elements
• Now we insert content
– Most marked with a block-level or an inline
element
• Block-level contains content displayed in a
separate section within the page, setting it off
from other blocks; paragraphs, headings
• Inline is part of the same block; words/phrases
within a paragraph
Creating Headings
• HTML supports six heading elements,
numbered <h1> through <h6>, with
<h1> being the largest and most
prominent, and <h6> being the
smallest
– See Figure 1-8
• Your browser may use slightly different fonts
and sizes
Inserting an Inline Style
• Headings are aligned with left margin
– Some need to be centered
– To use styles to control appearance of an
element, such as alignment, use the style
attribute
<element style=“style1: value1; style2:
value2; style3: value3; …”>
– Styles specified as attributes in a tag are
also referred to as inline styles
Applying the Text-Align Style
• Text-align style tells the browser how to
horizontally align contents of an
element
– Has four values: left, right, center, justify
• Justify would spread contents to touch left and
right margins
<h1 style=“text-align: center”>Chemistry
Class</h1>
• Most browsers also support the align
attribute
<h1 align=“center”>Chemistry
Class</h1>
– BUT USE IT WITH OLDER BROWSERS!
• HTML attributes such as align are
known as presentational attributes
– Specify exactly how browser should render
an element
• Let’s add headings to the chemistry file
and then view it in the browser
– See tutorial1/chem2.htm
Creating Paragraphs
• Next thing to do is enter information for
each section
<p>content</p>
– When a browser encounters the opening
<p> tag, starts a new line with a blank
space above it
• Paragraphs will display more reliably it you
consistently use a closing tag and XHTML
requires it
– See /tutorial1/chem3.htm and view it in
your browser
Creating Lists
• Need to describe the three courses that
the school offers
– Will use a list
• HTML supports three kinds of lists:
ordered, unordered, and definition
Creating an Ordered List
• An ordered list is used for items that
must appear in a particular sequential
order
<ol>
<li>item1</li>
<li>item2</li>
</ol>
Creating an Unordered List
• When items do not need to occur in any
special order, can use an unordered list
<ul>
<li>item1</li>
<li>item2</li>
</ul>
Creating a Nested List
• One list can contain another
– Useful to combine two different types of
lists
<ol>
<li>Conceptual Chemistry
<ul>
<li>Introductory course</li>
<li>No algebra required</li>
</ul>
</li>
</ol>
Applying a Style to a List
• If you don’t want your list items marked
with either numbers or bullets, can
specify a different marker by applying
the following style to ordered or
unordered lists
list-style-type: type
– where type is one of the markers shown in
Figure 1-15
• A graphic image can be substituted for
a list marker
list-style-image: url(file)
– where file is the name of an image file
containing the marker
– See Figure 1-16
• Each list item is itself a block-level
element
– By default each list marker is placed
outside its corresponding block
– This can be changed
list-style-position: position
– where position is either “outside” or
“inside”
– See Figure 1-17
• These three styles can be combined
list-style: type url(file) position
– This could show type as a square for textbased browsers, and url(flask.jpg) for
graphical browsers
Creating a Definition List
• The definition list contains a list of
definition terms, each followed by a
description
<dl>
<dt>term</dt>
<dd>definition</dd>
</dl>
• Browsers typically display the definition
description below the definition term
and slightly indented—see page 29
• Let’s add an unordered list of classes to
the chemistry Web page using a square
marker placed outside the block
– See tutorial1/chem4.htm
Using Other Block-Level
Elements
• Several other block-level elements are
useful
– Address element indicates contact info;
usually in italics
– Can indicate long quoted passages by
using blockquote element; typically
indented
– See Figure 1-20
Working with Inline Elements
• To bold or italicize, need to use a set of
inline elements known as character
formatting elements
– See Figure 1-21
• To bold:
<p>Welcome to our <b>Chemistry
Classes</b></p>
• Let’s add bold and italics to our page
– See tutorial1/chem5.htm
Understanding Logical and
Physical Elements
• Figure 1-21 shows some overlap in the
way the content appears in a browser
– Italics could be <dfn>, <em>, <I>, or
<var>
– Why so many?
– While HTML can control the way text
appears, the main purpose of the language
is to create a structure for the contents
– While some browsers render different
elements the same, it’s important to
distinguish between how a browser
displays an element and the element’s
purpose in the document
– So page elements are organized in two
types: logical and physical
– A logical element, like <cite>, describes
the nature of the content, but not
necessarily how that content should appear
– A physical element, like <b>, describes
how content should appear but doesn’t
indicate it’s nature
• Different browsers display logical
elements differently
• So in general, should use a logical
element that accurately describes the
content whenever possible
Session 1.3: Working with Empty
Elements
• We’ve been working with two-sided
tags
– Now it’s time to add images and horizontal
lines with empty elements
Inserting a Graphic
• You insert an inline image
– Displays a graphic located in a separate file
within the contents of a block-level element
– Two formats are most widely used:
• GIF or JPEG
• You can use Photoshop to convert images to
either
<img src=“file” alt=“text” />
– Important to include alt text in all inline
images
• Some browsers do not display images
• HTML does not require it, but XHTML does
• If image is in same folder as HTML file,
don’t need path info
• Let’s add an image file called dube.jpg
to our page
• We are going to center it
– Since the img element is an inline, it does
not support alignment attributes
– To center it, need to place it within a blocklevel element like paragraph
– See tutorial1/chem6.htm
Inserting Horizontal Lines
• The horizontal line lends shape to the
appearance
– You use the <hr /> (horizontal rule) tag to
create a horizontal line
– One-sided
– Used to separate sections of a page
• To modify it’s size, can use the styles
width and height
– Measured in pixels
• A pixel is a dot on your screen that measures
about 1/72” square
– Or you can specify a width value as a
percentage of the page’s width
• Default is 100% (width of the Web page);
default height is 2 pixels
• Can set the line’s color using a color
style or a background-color style
– We use either the name of a color or an
RGB color value
• Browsers understand basic color names like red
or blue
– Some browsers use the color style and
some use the background-color style
• Best to include both
<hr style=“color: red; background-color:
red; width: 50%; height: 5” />
• Default is not standard across browsers
– Typically the line extends across complete
width at a height of 2 pixels
– Some browsers display the line in solid
black; others apply a chiseled or embossed
effect
– Let’s add a red one, 2 pixels high
– See tutorial1/chem7.htm
Other Empty Elements
• Other empty elements you may want to
use include line breaks and meta
elements
– <br /> tag creates a line break; starts a
new line without a space above it
– Can use them in groups to control the
spacing of different sections
• Meta elements are placed in head
section
– Contain info re the document that may be
of use to programs that run on servers
<meta name=“text” content=“text”
scheme=“text” http-equiv=“text” />
• Name specifies name of a property for the
page; content provides a property value;
scheme provides format of the property; httpequiv takes place of name attribute for some
browsers
<meta name=“author” content=“Stephen
Dube” />
– stores name of the Web page’s author that
can be used for a search like Google
• Can also show keywords and a description of
the page
• A document’s head can contain several
meta elements
Working with Special
Characters
• Some characters do not appear on your
keyboard
– Math symbols, copyright
• Stephen’s last name uses an accented
letter, “é”, and is used 3 times
• Character symbols are identified by a
code number or name
&code;
– where code is either a name or number
• Code numbers are preceded by a pound
symbol (#)
• See Figure 1-29 and the appendix
– See tutorial1/chem8.htm
• Stephen is pleased!
Tips for Good HTML Code
• Use line breaks and indented text to
make your file easier to read
• Insert comments to document your
work
• Enter all tag and attributes in lowercase
• Place all attribute values in quotes
• Close all two-sided tags
• Make sure nested elements do not cross
• Use styles in place of presentational
attributes whenever possible
• Use logical elements to describe an
element’s content
• Use physical elements to describe the
element’s appearance
• Include alt attribute for any inline image
• Know your market and the types of
browsers that your audience will use
• Test your page on all relevant browsers