Harvesting the Web part 2

1
Harvesting the Web(part 2)
Harvest District Roundtable
Cub Scout/Boy Scout Joint Session October 9, 2007
2
Harvesting the Web
Review from Last Month
Web Hosting 1. Free site 2. Paid
site Creation Tools 1. Paid software (e.g.
FrontPage) 2. Freeware software (e.g. NVu,
Geocitys creation tool) 3. Text editors (e.g.
MS Notepad) Policies for Web Site 1. BSA
policies do not apply to unit sites, but ... 2.
Districts and Councils may choose to omit links
based on lack of conforming to BSA
policies. Usage of BSA Trademarks and Logos 1.
Artwork may not be modified from original
design. 2. BSA artwork usage policies can be
found at http//www.scouting.org/identity
/. 3. BSA licensing information for commercial
use can be found at http//www.bsalicensi
ng.org.
3
Web Harvesting the Web
First Things First - Design of Web Site
What is the Layout Going to Look Like? 1. Use
a storyboard to design the layout of the
site. 2. What are your visitors expectations
and limitations. What Markup Language
to Use 1. HTML 2. XHTML What Creating
Tool or Tools to Use? 1. HTML converter - MS
Word or other word processors. 2. HTML editor
- FrontPage 3. Simple text editor -
Notepad Who Will Have Access to What Areas? 1.
General public areas 2. Restricted access areas
4
Harvesting the Web
HTML Programming
Types of HTML tags 1. Two-sided tag A.
Opening tag ltelementgt B. Closing tag
lt/elementgt 2. One-sided tag or Empty tag A.
Consists of only an opening tag
ltelementgt. Note With XHTML one-sided tags must
include a space and slash character
before the closing brace (gt). (Example ltbr
/gt) 3. Comment tag - used for developers
purposes only. Will not be
processed by web browsers. A. Opening tag
lt!-- B. Closing tag --gt 4. Deprecated
tags - tags that are identified as obsolete.
Usage of these tags will not
be supported by future web
browsers.
5
Harvesting the Web
HTML Document Parts
lt!DOCTYPEgt Tag 1. Very first tag in
document 2. Tell browse which HTML or XHTML
specification is being used by the
document. lthtmlgtlt/htmlgt Tags 1. Defines a HTML
document. 2. May include the Document Type
Definition (DTD) 3. Opening and closing tags
encompass all other HTML elements. ltheadgtlt/headgt
Tags 1. Contains information about the
document. 2. Following tags may be used in the
head section ltbasegt, ltlinkgt, ltmetagt,
ltscriptgt, ltstylegt, and lttitlegt
(bold text identifies two-sided
tags) ltbodygtlt/bodygt Tags 1. Contains the
visible content for the document.
6
Harvesting the Web
A Simple Web Page
lt!DOCTYPE HTML PUBLIC -//W3C//DTD HTML
4.01//ENgt lthtmlgt ltheadgt lttitlegtMy
Hellolt/titlegt ltmeta nameauthor
contentHarvest District Roundtablegt
lt/headgt lt!-- This is where the visible part of
the web page begins (any text between the comment
opening tag and closing tag will be ignored by
the browser) --gt ltbodygt Hello World
!!!! lt/bodygt lt/htmlgt
7
Harvesting the Web
This is what it will look like ...
Notice there is only one space between World
and !!!!. Thats because multiple white spaces
are condensed into one space.
8
Harvesting the Web
OK, so I we can make a simple web page. Now what
is next?
9
Harvesting the Web
Lets do something with our text ...
We can change the the FONT TYPE
From this Hello World !!!!
ltp style"font-family Times Roman"gtHello
World !!!! lt/pgt To this Hello World !!!!
ltp style"font-family
Arial"gtHello World !!!! lt/pgt
Note the ltpgt is the paragraph tag
10
Harvesting the Web
And we can do this with our text ...
We can change the the FONT SIZE
From this Hello World !!!!
ltp style"font-size 12pt"gtHello World
!!!! lt/pgt To this Hello World !!!! ltp
style"font-size 24pt"gtHello World !!!! lt/pgt
11
Harvesting the Web
Not only can we change the font type and size, we
can change the weight of the type-face, font
style, and direction of the typing.
Examples Bold
ltbgtBoldlt/bgt emphasized
ltemgtemphasizedlt/emgt Italics
ltigtItalicslt/igt Subscript
ltsubgtSubscriptlt/subgt esreveR
ltbdo dirrtlgtReverselt/bdogt Normal
ltbdo dirltrgtNormallt/bdogt
12
Harvesting the Web
Text is good but what about pizzazz?
GRAPHICS, now were talking ...
ltimg srcharvestnt.gifgt
Warning make sure the complete path is included
in the source reference.
13
Harvesting the Web
How do I make the graphic move? There are two
main ways to have animated graphics
1. Animated GIF file ltimg
srcanimated.gifgt Note the GIF file
must be a paletted 8-bit color file with the
background color selected
to have the background invisible. 2. Embedded
object ltobject idMediaPlayer
gt
ltparam namefilename valuemyvideo.wmvgt

. . .
lt/objectgt
14
Harvesting the Web
What about moving object to various positions on
the page?
Several tags are available
ltdivgt - This tag defines a division or
section on the document and is used to
group elements together and apply a
common styles to the elements. ltspangt -
This tag is used to group in-line elements
together. Many developers
will use these two tags synonymously, but their
designs are different. lttablegt - This tag
sets up a table with rows and columns of cells,
similar to a
spreadsheet. ltolgt ltulgt - These two types of
tags define list. The first, ltolgt, defines
ordered or numbered lists.
The second defines bullet list. ltdlgt
- This tag is used to define definition list. The
are two other tags that are used ltdtgt
for definition term and ltddgt for definition
description. ltframesetgt - This tag defines the
layouts of multiple frames in a document. This
tag also requires the use
of the ltframegt tag. Note The lt!DOCTYPEgt tag
must be set to XHTML 1.0 Frameset DTD!!
15
Harvesting the Web
How do I add more pages to the site? First,
other pages need to be creates. Next, pages need
to be linked together using the ltagt or anchor tag.
lta hrefnextpage.htmlgtNext Pagelt/agt
Next Page lta
hretnextpage.htmlgtltimg srcarrow.gifgtlt/agt
Note The anchor tag may be used to skip to other
areas on the current document by use
of bookmarks.
16
Harvesting the Web
"Never increase, beyond what is necessary, the
number of entities required to explain anything
William of Ockham (1285-1349)
In simpler terms Keep it simple, Make it Fun!
17
Harvesting the Web
Reference W3 Schools - a web site the
provides tutorial for HTML, XHTML, browser
and server scripting, cascading style sheets,
etc. Web address http//www.w3school
s.com