Transcript Chapter 1 - Cal State LA - Instructional Web Server

XP
Tutorial 1
Developing a Basic Web
Page
1
Introducing the World Wide Web XP




Network - linking computers, sharing
resources
host or node - access network
Server - resources available to network
Client-server network
2
Introducing the World Wide Web XP





linked within a local area network (LAN)
Metropolitan area network (MAN)
linked across a wide area network (WAN)
Personal area network (PAN)
Wireless (WLAN)
3
Introducing the World Wide Web XP

Internet -global network - connects IP networks



IP - internet protocol - basic protocol
WEB - internet-based distributed information
system
Network is computer
4
Structure of the Internet
XP
5
The Development of the Word Wide Web

WWW - grows rapidly - extent, capabilities,
applications, global expansion







XP
Powerful tool - mass communication, e-business, ecommerce
Strength - openness, speed, low cost of entry
Internet
Intranet
Extranet
Hyperlinks
Virtual office or store - always open, supported
by workers from anywhere
6
Linear versus hypertext
documents
XP
7
Hypertext Documents

Enabling technologies










XP
Networking protocols
Data encoding formats
Clients (browsers)
Servers
Markup and styling languages
Client-side and server-side programming
HTTP - hypertext transfer protocol
CSS
Javascript
CGI - common gateway interface
8
Hypertext Documents



XP
Web site
Web page
Web - consists of vast collection of documents
located on computers throughout the world - in
special formats and retrieved through server
programs on each computer
9
Web Servers and Web Browsers XP





A Web page is stored on a Web server, which in turn makes
it available to the network
To view a Web page, a client runs a software program called
a Web browser, which retrieves the page from the server and
displays it
Text-based browser - Lynx
Graphical browser - opera, firefox, IE, Netscape, Safari
Sufficient understanding - master new communication medium





Artistic design
Visual communication
Information architecture
Color and graphics
programming
10
Using a browser to view a Web document from
XP
a Web server
11
HTML: The Language of the Web XP




Hypertext Markup Language
A markup language - language that
describes a document’s structure and content
HTML - not a programming language or a
formatting language
Styles - format descriptions written in a
separate language from HTML that tell
browsers how to render each element.
12
The History of HTML




XP
The first version of HTML - Standard
Generalized Markup Language (SGML)
Deprecated
XML - extensible markup language
XHTML - extensible hypertext markup
language
13
Tools for Creating
HTML Documents



XP
Basic text editor - Notepad
HTML Converter - converts formatted text into
HTML code
HTML Editor – create an HTML file by inserting
HTML codes for you as you work
14
Creating an HTML DocumentXP

Core - web site development



Visual communication design
Programming
Good web site


Serve intended purpose
Structure and organize content of site - effective
and efficient deliver
Convenient
 Pleasing
 Functional
 Attractive

15
Creating an HTML DocumentXP

To achieve goals - expertly produced site - more cost
effective than other mass communications










Information architecture
Visual communication design
Color and graphics
Fonts
Layout
Visual hierarchy
Symmetry
Balance
Unity
Variation
16
Creating an HTML Document XP
17
Creating an HTML Document
XP
•Element - distinct object
•Document
•Paragraph
•Heading
•Page title
18
Marking Elements with Tags XP





The core building block of HTML - tag, which marks
each element in a document
A two-sided tag <element>content</element>
A two-sided tag’s opening tag (<p>) and closing tag
(</p>) - completely enclose its content
A one-sided tag contains no content; general syntax
for a one-sided tag:
<element />
A third type of tag is the comment tag, which you can
use to add notes to your HTML code
<!– comment -->
19
White Space and HTML




XP
HTML file documents - composed of text
characters and white space
White space - blank space, tabs, and line
breaks within the file
HTML treats each occurrence of white space
as a single blank space
Use white space - document more readable
20
Element Attributes


XP
Many tags contain attributes that control
the behavior, and in some cases the
appearance, of elements in the page
Attributes are inserted within the tag
brackets
<element attribute1=“value1” attribute2=“value2” …/>
for one-side tags
<element attribute1=“value1” attribute2=“value2”
…>content</element>
for two-sided tags
21
The Structure of an HTML FileXP


<html> - </html>
Anything between these two tags makes up the
content of the document, including all other
elements, text, and comments

Head element - information about document





Title element
Body element - contains all content of web page
Nesting
Block level elements - separate section
Inline elements
22
Initial HTML code in chem.htm
XP
23
Initial Web page viewed in Internet
XP
Explorer
24
Creating Headings

XP
HTML supports six heading elements
25
Styles




XP
Inline styles
Text-align style - horizontally align
Presentational attributes specify exactly
how the browser should render an element
Creating paragraphs - start a new line
26
Creating Lists




XP
HTML supports three kinds of lists: ordered,
unordered, and definition
Ordered list - appear in a particular sequential
order
Unordered list - do not need to occur in any
special order
One list can contain another list; this is called
a nested list
27
Applying a Style to a List
XP
28
Creating a Definition List


XP
The definition list contains a list of
definition terms, each followed by a
definition description
Web browsers typically display the
definition description below the definition
term and slightly indented
Chemistry I
An introductory course requiring solid algebra
skills
29
Working with Inline Elements




XP
Character formatting elements - format text
characters
A logical element describes the nature of the
enclosed content, but not necessarily how that
content should appear
A physical element describes how content should
appear, but doesn’t indicate the content’s nature
You should use a logical element that accurately
describes the enclosed content whenever possible,
and use physical elements only for general content
30
Working with Empty Elements





XP
To display a graphic - inline image - displays a
graphic image located in a separate file within the
contents of a block-level element
Horizontal line - the one-sided tag <hr />
A pixel - dot on your computer screen that
measures about 1/72” square
Other empty elements - line breaks and meta
elements
Meta elements are placed in the document’s head
and contain information about the document that
may be of use to programs that run on Web servers
31
Working with Special Characters
XP

Occasionally you will want to include
special characters in your Web page that
do not appear on your keyboard
₤

®
HTML supports the use of character
symbols that are identified by a code
number or name
&code
32
Working with Special Characters
XP
33
Summary:
Tips for Good HTML Code
XP
Use line breaks and indented text to make
your HTML file easier to read
 Insert comments into your HTML file to
document your work
 Enter all tag and attribute names in
lowercase
 Place all attribute values in quotes
 Close all two-sided tags

34
Summary:
Tips for Good HTML Code




XP
Make sure that nested elements do not cross
Use styles in place of presentational elements
whenever possible
Use logical elements to describe an element’s
content
Use physical elements to describe the
element’s appearance
35
Summary:
Tips for Good HTML Code



XP
Include the alt attribute for any inline image to
specify alternative text for non-graphical
browsers
Know your market and the types of browsers
that your audience will use to view your Web
page
Test your Web page on all relevant browsers
36
XP


Assign #1 - Chapter 1, Tutorial 1, print html
code only (due 9/26/06).
Assign #2 - Case Problem #1, pg. 46-48,
Case Problem #2, pg. 48-50, print HTML code
only (due 10/3/06).
37