Browsing and Publishing
Download
Report
Transcript Browsing and Publishing
Online Network Exploration
Browsing and Publishing
© McGraw Hill 2004. All rights reserved.
Overview of the World Wide Web
3
Also referred to as: Web, WWW, W3, W
Some say “Internet” or “Net” when they mean
World Wide Web
Most visible, exciting, and fastest growing part
of the Internet
Way to access large collection of info in nonlinear fashion
Overview of WWW (con’t)
WWW consists of hypertext and/or hypermedia
documents
Hypertext documents - contain links to other
documents on same computer or other computers
Hypermedia - similar to hypertext but provides links
to graphics, sounds, video
Documents are called Web pages
Hyperlinks move you from page to page
Different color text
Usually underlined
Cursor arrow changes to hand when “mousing over”
Origin of the WWW
Concept of hypertext
has been around since
the 1960’s but no way to
implement until Internet
1991 - Tim Berners-Lee
at CERN (Geneva)
developed WWW
1993 – Mosaic, first
browser with GUI, is
introduced and WWW
takes off
Picture is from “Weaving the Web” by
Tim Berners-Lee 1999
Client/Server Model
Need browser to access and display documents
(Web pages)
Browser is client, Web server is server
Data travels over the Internet through a protocol
called HTTP (Hypertext Transfer Protocol)
Browser uses a URL (Uniform Resource Locator) to
request a Web page
URL
Specifies a Web page address
Basic form: how://where/what
how - protocol (http, ftp, telnet, mailto, etc)
where - domain name of the computer
what - local name of the file (default is
index.html) including the path to it
Name can be omitted if it is index.html
Examples:
http://pubpages.unh.edu/~cs403d/CS403/index.html
http://www.cdnow.com/index.html
Web Pages
Web page is text file with .html or .htm extension to
name (eg. - mypage.html or index.html)
Web pages are created using XHTML (eXtensible
Hypertext Markup Language)
Use a text editor to type content and XHTML tags
NotePad
WordPad
Pico (Pine Composer – default Pine text editor)
vi
emacs
Hypertext Markup Language
Markup Language is different from programming
language
Defines format, not layout
Allows you to embed hypertext links
Consists of tags you include in your file
<tag> … </tag>
Every (*almost*) HTML document has 2 parts:
head and body
Hypertext Markup Language
Basic form for all HTML tags:
<tag attri1 = “v1” attri2 = “v2”>item to be
formatted</tag>
where:
tag means any HTML tag
attri1 and attri2 are two attributes (could be more or
less than two)
v1 and v2 are the values assigned to attri1 and
attri2, respectively
HTML or XHTML?
Newest version of HTML is XHTML (eXtensible
HyperText Markup Language)
XHTML was developed by W3C (World Wide Web
Consortium) to be the reformulation of HTML as an
application of XML (eXtensible Markup Language).
Oct. 1994 Tim Berners-Lee founded the W3C
W3C is an organization dedicated to developing non-proprietary
interoperable technologies for the WWW
One goal of W3C is to make the WWW universally accessible
regardless of ability, language, or culture.
XML is the standard method for creating new markup
languages that will support the use mathematical
notation, etc. as well as newer display devices like
PDAs and mobile phones.
XHTML combines language of HTML with syntax of
XML.
XML Directive
XML documents must be well-formed, i.e., it
must adhere to the syntax rules of the language.
It is recommended that XML documents begin
with an XML directive:
<?xml version= “1.0” encoding=“UTF-8”?>
-
-
-
Indicates that the document is based on the 1.0
standard.
Indicates that the character encoding in this document
is UTF-8.
Directive will be the first line in each Web page you
write.
Document Type Definition
W3C recommends identifying the type of markup
language used since multiple versions of HTML and
XHTML exist.
Version and type of XHTML is listed in the Document
Type Definition (DTD) tag – aka DOCTYPE.
Place in second line of each Web page you create:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
Basic HTML Tags
<html>
<head>
<title>Ellen’s CS403-10 Homepage</title>
</head>
<body>
Hello World!
</body>
</html>
<html> tag attributes
In XHTML the <html> tag needs to specify:
Location of the documentation for the elements being
used (called XML namespace or xmlns).
Language being used (English in our case).
<html xmlns=“http://www.w3.org/1999/xhtml”
xml:lang=“en” lang=“en”>
Basic XHTML Tags
<?xml version=“1.0” encoding=“UTF-8”?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns= “http://www.w3.org/1999/xhtml” xml:lang=“en” lang=“en”>
<head>
<title>Ellen’s CS403-10 Homepage</title>
</head>
<body>
Hello World!
</body>
</html>
Borrowing Code
Not recommended because:
Copyright issues must be considered
Some HTML code is poorly written
Some HTML code contains errors
You are probably not learning from it
Some HTML documents have inconsistent styles
since they have been cut and pasted many times
Browser Basics
Browser = Web Client = Software application that
provides an interface between users and the Internet
Browser requests and renders Web pages
Examples: Netscape Navigator, Mozilla, Firefox,
Microsoft’s Internet Explorer, Opera, Mosaic, Lynx (lynx
is a text-only browser – see option 3 on CIS Unix
Menu)
Browser Features
Title Bar - displays title of the page as specified in the
<title> … </title> tags
Menu Bar
File - exit, open a local file, etc.
Edit - text editing options, preferences
View - view source code, reload page
Go - back and forward through cached pages, home,
stop loading
Tool Bar
Back, Forward, Home, Reload, Stop, Security, Search,
Bookmarks
Browser Screen
Web Page Installation
Requirements:
Need Web pages to publish
A Web server must be available where the files can
be placed – astro.armstrong.edu
Permissions on the files must be set so that any
user anywhere can read them
The Web server has to deliver your page when
requested
Web Page Installation
Vary from site to site
%cd
Change to your home directory
%chmod og+x ~
Set permissions on home directory to be world executable
%mkdir public_html
Create public_html directory
%chmod og+x public_html
Set the permissions on public_html to be world executable
Web Page Installation
%cd public_html
Change directories to public_html
%emacs index.html
Create a file called index.html containing the
appropriate HTML code
Note: this is where you will type in all your XHTML code using the
emacs text editor.
%chmod og+r index.html
Set the permissions on the file index.html to be world
readable
Web Page Installation
To modify Web page:
%cd
Change to your home directory
%cd public_html
Change directories to public_html
%emacs index.html
Make changes to file and save changes using ctrl-o
View changes using browser (don’t forget to reload page)
To exit emacs text editor and return to shell prompt, use ctrlx ctrl-c
%
HTML Tags - <head> … </head>
<head> tag has no attributes but several tags can be
included inside it:
• <title> … </title> -defines title
• <basefont size = “n”> - n is from 1 (smallest) to 7
(largest); defines the font size in the HTML
document
• <meta> - used to include additional info; eg.,
<meta name = “keywords” content =
“woodworking, cabinet making, handmade
furniture” />
• <base> - sets global parameters like URL
HTML and Colors
Two ways to define colors in HTML
documents:
1
- Color names
Browsers have predefined lists of colors; e.g., blue,
cranberry, green, orange, red, yellow
2
- Color numbering scheme
A bit more complex but better supported across
different platforms
HTML and Colors
RGB Color Model - a way to represent colors
as combinations of red, green, and blue
Colors are represented by three two-digit
hexadecimal numbers
Each two-digit hex number signifies the
amount of one of the three colors: red, green,
and blue
RGB Color Model
digit1 digit2 digit3 digit4 digit5 digit6
red
green
blue
Each digit is a hexadecimal number (base 16)
A hexadecimal digit ranges from 0 to F
A two-digit hexadecimal number can represent
numbers from 0 to 255 in decimal
The RGB color model can represent (256)³ (over 16
million) possible color combinations
RGB Color Model - Some Colors and
Their Hex Representations
Black
Blue
Crimson
Gold
Green
Gray
#000000
#0000FF
#DC143C
#FFD700
#00FF00
#808080
Orange
Purple
Red
Salmon
White
Yellow
#FFA500
#800080
#FF0000
#FA8072
#FFFFFF
#FFFF00
RGB Color Model – Some Links
HTML Background Color Selector:
http://www.imagitek.com/bcs.html
Color Picker 3.1:
http://www.pagetutor.com/colorpicker/index.html
Color Picker: Hexadecimal Color code generator:
http://www.free-webmaster-tools.com/colorpicker.htm#colorpicker
VisiBone Webmaster’s Color Lab:
http://www.visibone.com/colorlab
HTML Tag - <body> … </body>
Body is the second and main part of every HTML
document – what you put in the body shows up on
your Web page
Has a number of attributes that lets you set global
parameters:
Text Color
Background Color
Tilings
<body> Tag and Text Color
Use the style attribute with the color property to change the
default text color for the entire document
Example 1:
<body style = “color: #800000;”> all text is maroon
Example 2:
<body style = “color: #FFFFFF;”> all text is white
Example 3:
<body style = “color: #00FF00;”> all text is green
<body> Tag and Background Color
Use background-color property to set the background of an
XHTML document to a single color
Example 1:
<body style = “background-color: #FF0000;”>
makes the background color red
Example 2:
<body style = “background-color: #0000FF;”>
makes the background color blue
Example 3:
<body style = “background-color: #000000;”>
makes the background color black
<body> Tag and Tiling
Use the background-image property to “tile” the
background of the Web page with an image (note:
image file must be located in your public_html
directory)
Example:
<body style = “background-image: url(marble.jpg);”>
makes an image called marble.jpg appear tiled in
the document area of your browser window
Changing the Font on a Page
Permits you to change the text font face from the default of
“Times New Roman”
Example 1:
<body style = “font-family: Arial;”>
makes the font face of the text for the Web page Arial
Example 2:
<body style = “font-family: Verdana, sans-serif;”>
makes the font face of the text Verdana and if it is not
available on the browser, it will use any sans-serif as
the default
Common Fonts
serif:
Times New Roman
Garamond
Century Schoolbook
sans-serif:
Arial
Verdana
Helvetica
Geneva
Century Gothic
Chicago
Tahoma
monospace
cursive
Courier New
Andale Mono
Lucida Handwriting
Apple Chancery
Script MT Bold
Swing
fantasy
Note: If the name of the font
family has more than one
word, enclose it in quotes
<body> Tag Attributes Combined
<body> tag properties of the style attribute can be
combined
Example:
<body style = “background-color: #FF0000;
color: #FFFFFF; font-family: Verdana, sans-serif;”>
makes the background color red, the text white, and the
font face Verdana
HTML Tag - Comments
<!-- comments go here -->
Provides a way to document your HTML code and
make notes to yourself
Comments are not rendered by browser
Example:
<!-- This page was created by Ellen Hepp 01/25/07-->
Note: Do not include embedded HTML code in
the comment tag as this may produce
unpredictable results
HTML Tag - Paragraph
<p> … </p>
Use the paragraph tag to break text into paragraphs
Enclose block of text with beginning and ending
paragraph tags (ending tag is considered optional
using HTML but not with XHTML)
Example:
<p>This is the title sentence for the first
paragraph.</p> <p>This is the start of paragraph
two.</p> <p>This is the third paragraph.</p>
HTML Tag - Heading <h1>…</h1> etc
Use heading tags to designate headings and subheadings
Most browsers support a hierarchy of six levels of
HTML headings where <h1> is the largest and <h6>
is the smallest
Example 1:
<h6>Copyright Ellen Hepp, 2007. All rights reserved.</h6>
Example 2:
<h1>Ellen’s Homepage for CS403</h1>
HTML Tag - Image <img />
Used to include in-line images
src attribute is used to specify the URL of the image to
be displayed
Either relative or absolute URL can be used to point
to image file
3 most common image file types have .gif, .jpg, or
.png extensions
Other attributes are:
alt - an “alternative” text string that describes the
image
height and width - the dimensions of the image in
pixels
Importance of using the alt, height, and width attributes
HTML Tag - <img /> (cont)
Example 1:
<img src = “JPG/mypicture.jpg”
alt = “Picture of Me”
height = “300”
width = “175” /> uses a relative url
Example 2:
<img src =
“http://pubpages.unh.edu/~cs403d/CS403/
GRAPHICS/Spring07/ehepp.JPG”
alt = “Picture of Ellen”
height = “150”
width = “120” /> not recommended! Uses an
absolute url
HTML Tag - Anchor <a> … </a>
Anchor tag is used to create hyperlinks
Three basic parts of a hyperlink:
Beginning and ending tag pair <a> … </a>
href attribute that specifies the URL of the page to be
loaded when the hyperlink is selected
Text or graphic that appears on-screen as the active
link
Clickable Text Hyperlinks
Text is used as the “hot spot” for the link
<a href = “mypage.html”>My Homepage</a>
Example 1:
<a href = “mypage.html”>My Homepage</a>
This uses a relative URL
Example 2:
<a href =
“http://www.usa.gov/documents/whitehouse.html”>White
House</a>
This uses an absolute URL;
Clickable Image Hyperlinks
An image is used as “hot spot” for link
Example:
<a href =
“http://www.usa.gov/wogulis/notready.html”>
<img src = “wheelbarrow.gif” alt = “Under
Construction” height = “50” width = “50”></a>
Mailto Hyperlinks
Provides a convenient way for someone viewing
your Web page to send you e-mail
Example:
<a href = “mailto:[email protected]”>Contact
Pascal</a>
A mail dialog box is launched when link is
selected; the To field is already filled in
Note: syntax for mailto: URL is different from the
http:// URL - no double slashes
Mailto Hyperlinks - cont
Modern browsers extend the mailto urls with subject and cc:
Example 1:
<a href =
“mailto:[email protected]?subject=CS403
Question”>Contact Ellen</a>
Example 2:
<a href = “mailto:[email protected]?cc =
[email protected]”>Contact Ellen</a>
Intradocument Linking
Uses the name attribute to permit you to create a
hyperlink to another part of the same document (good
for long Web pages)
name and id attributes are used to create a label
within the document
Example 1:
<a name = “top” id = “top”>My Homepage</a>
…
<a href = “#top”>Go to Top</a>
Example 2:
http://pubpages.unh.edu/~ehepp/andrew.html
Tips for Creating Hyperlinks
Try not to split hyperlinks over lines
Do not put two or more hyperlinks side by side
Do not use long lines of text as hyperlinks
Do not use underlining near hyperlinks
Do not use phrases like “click here” as the hotspot for a
hyperlink.