Transcript Tutorial 1 - 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 and “Edutainer”,
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 create a product
page for a startup company
Exploring the History of 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 pages and Web servers
• Each document on the WWW is referred
to as a Web page
– 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-3 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
Creating an HTML Document
• You are ready to work on the Web page
for Dave’s Devil Sticks
– Start by drawing a planning sketch or by
creating a sample document using a word
processor
Marking Elements with Tags
• The core building block of HTML is the
tag
– 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 />
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
Defining the Page Title
• Let’s add a title to the document head
– Can include only one
<html>
<head>
<title>Dave’s Devil Sticks</title>
</head>
<body>
</body>
</html>
• Placing one element within another is
called nesting
– Must close inside element before closing
outside element
– See tutorial1/dave1.htm
Adding Comments
• 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
– See tutorial1/dave2.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
Session 1.2
• You are ready to add content into the
body of Dave’s page
– First elements are block-level elements
– Open the HTML Tags demo page
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
Working with Headings
• HTML supports six heading elements,
numbered <h1> through <h6>, with
<h1> being the largest and most
prominent, and <h6> being the
smallest
– See demo page
• Your browser may use slightly different fonts
and sizes
• See tutorial1/dave3.htm
• Let’s add some headings to Dave’s page
– See tutorial1/dave3.htm
Marking Paragraph Elements
• 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/dave4.htm and view it in
your browser
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
Marking a Block Quote
• Let’s add a quote from a satisfied
customer
– Dave wants it indented from surrounding
paragraphs to emphasize it
• Tabs would be ignored
– Syntax for marking an indented, extended
quote is:
<blockquote>content</blockquote>
• See tutorial1/dave5.htm
So that’s what a
blockquote tag does!!
Marking a List
• Need to describe the list of products
– Will use a list
• HTML supports three kinds of lists:
ordered, unordered, and definition
Ordered Lists
• An ordered list is used for items that
must appear in a particular sequential
order
<ol>
<li>item1</li>
<li>item2</li>
</ol>
Unordered Lists
• When items do not need to occur in any
special order, can use an unordered list
<ul>
<li>item1</li>
<li>item2</li>
</ul>
Nesting Lists
• 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>
Definition Lists
• 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 demo page
• Let’s add an unordered list of products
– See tutorial1/dave6.htm
Exploring Other Block-Level
Elements
• Several other block-level elements are
useful
– Address element indicates contact info;
usually in italics
– Let’s add Dave’s company address
– See tutorial1/dave7.htm
– See Figure 1-25 for other block-level
elements
Working with Inline Elements
• To bold or italicize, need to use a set of
inline elements known as character
formatting elements
– See Figure 1-26
• To bold:
<p>Welcome to our <b>Chemistry
Classes</b></p>
• Inline elements can be nested to mark
text with more than one characterformatting element
<p>Welcome to <b><i>Dave’s Devil
Sticks</i></b>.</p>
• This would give you both bold AND italics
• Let’s add bold and italics to our page
– See tutorial1/dave8.htm
Using the Generic Elements:
div and span
• Most of the elements we’ve examined
have a specific meaning or purpose
– Sometimes you will want an element that
represents text without it having any other
meaning
• HTML supports two types of generic elements:
div and span
– Div element is used to mark general blocklevel content
– Span is used to mark general inline content
• Browsers recognize both, but do not
assign any default format
– Web authors can completely control the
appearance of the content through the use
of styles
• Not so with addresses or headings which have
default formats assigned to them by browsers
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: Using Element
Attributes
• We’ve been working with markup tags
– But many markup tags contain attributes
that control the use, behavior, and
sometimes the appearance of elements
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 Style Attribute
• One important attribute is the style
attribute
– Used to change how the browser displays
an element
<element style=“rules”
…>content</element>
– Where rules is a set of style rules
• Style rules are entered by specifying a
style name followed by a colon and
then a style value
– Multiple style rules are separated from
each other by a semicolon
– Will learn more about styles later; a few
here:
– Style=“text-align: alignment”
• Where alignment is left, right, center, justify
• <h1 style=“text-align: center”> … </h1>
– Style=“color: color”
• Where color is a color name
• <h1 style=“color: red”> … </h1>
– Both styles can be combined
• <h1 style=“text-align: center; color: red”> …
</h1>
• Dave suggests you center the address
text at the bottom of the page
– See tutorial1/dave9.htm
Presentational Attributes
• Presentational attributes have pretty
much been deprecated in favor of styles
– Attributes that specifically describe how
any element should be rendered, such as
<h1 align=“center”>Dave’s Devil Sticks</h1>
– Probably will not cause Web page to fail,
but should be used to ensure compatibility
with future browser versions and XHTML
Working with Empty Elements
• The product list needs descriptions of
the items
– See tutorial1/dave10.htm
• The list is a little difficult to read; the
description should be on a new line
directly below the product name
– Let’s insert a line break—example of an
empty element with no content
• Line breaks are placed within blocklevel elements such as paragraphs or
headings
– See tutorial1/dave11.htm
Marking a Horizontal Rule
• 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 (which you will learn later)
• Dave wants a rule above and below the
customer quotation and one above the
company address
– See tutorial1/dave12.htm
Inserting an Inline Image
• 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 logo.jpg
to our page (one of your data files)
• 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
block-level element like a paragraph or
heading
– See tutorial1/dave13.htm
Working with Character Sets
and Special Charactersrs
• Dave feels the address info is difficult to
read and would like a bullet separating
the different sections
– A bullet is not on your keyboard!!
Character Sets
• A character set is a collection of
characters and symbols not on your
keyboard
– Wide variety of sizes
• English—127 characters are needed
• Chinese—thousands of symbols
– Each has a name
• ASCII represents English alphabet
• Latin-1 or ISO 8859-1 supports 255 characters
• Most extended is Unicode with up to 65,536
symbols and can be used for most of the
world’s languages
– Most commonly used on the Web is UTF-8
• A compressed version of Unicode and probably
the default character set assumed by your
browser
Numeric Character References
• To store a character set, browsers have
to associate each symbol with a number
– Process is called character encoding
– The number is called the numeric character
reference
• Copyright symbol is &#169;
Character Entity References
• Another way to insert a special symbol
is to use a character entity reference
– A short memorable name is used in place
of the numeric character reference
– &copy;
– Older browsers may not recognize it
Special Characters
• Another use of character codes is to
add extra spaces
– Use &nbsp; (nonbreaking space)
• Let’s add bullets and an em-dash
– See tutorial1/dave14.htm
• Dave 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