Educational Resource From University of Scranton

1
Educational Resource FromUniversity of Scranton

• Homepage Development
• using
• HyperText Markup Language (HTML)

2
Course Outline

• Basic Web Concepts
• Web Site Development
• Planning/Building Your Home Page
• HTML Tools
• HTML Syntax
• Build a Page

3
Concepts World Wide Web

• A distributed hypermedia system
• A system for disseminating (servers) and
  retrieving (clients/browsers) hypermedia
  resources on local or global computer networks
• For your Home Page to be on the web, it must
  reside in a directory that is accessible by a web
  server program

4
Concepts What Is A Web Site?

• A dynamic shared information source
• Easy to update
• On public Internet or private Intranet
• A hierarchy of linked pages
• Graphical easy to navigate
• Interactive
• User navigates
• Interaction with databases
• Email links
• Multi-user interaction - chat, malls

5
Tools Browsers

• Allow viewing of web pages
• Determine format (font, size, page width,
  hypertext color, etc) of HTML elements
• Have navigation tools
• Have other utilities email, newsgroups,
  calendar, conferencing
• Freeware, Shareware Commercial

6
Tools Popular Browsers

• Communicator/Navigator (Netscape)
• home.netscape.com
• Explorer (Microsoft)
• www.microsoft.com
• Mosaic (NCSA at UIUC)
• www.ncsa.uiuc.edu/SDG/Software/mosaic-w/
• Complete list at
• www.yahoo.com

Each browser has different capabilities - not all
display information the same way.
7
Web Site Development

• Web Hosting
• Cost
• Web Page Concept Structure
• Design Basics/Tradeoff Considerations

8
Web Hosting

• Location of Web Server
• Internal
• External
• Platform of Web Server
• Content placement
• Select Internet Service Provider

9
Content Placement

• FTP
• Telnet
• Directory structure
• Path specification http//machine.owner.domain/dir
  ectory/filename
• http//www.intel.com/docs/pentium.html
• Protocol http
• Server www.intel.com
• Directory Path docs
• Filename pentium.html

10
Cost Considerations

• High volume sites need high bandwidth
• High volume complexity Higher costs
• Typical fee
• Initial setup
• Page Development
• Monthly service
• Monthly maintenance (changing links, text,
  images)
• Extra charge for additional space and pages

11
Markup Language

• What is a Markup Language?
• Def A system of marking tags which define the
  role of text blocks in the document (i.e.
  heading, paragraph, list, etc).
• Note Markup tags describe what the text is but
  not how it appears to the reader.
• Example ltTITLEgtThis text is the titlelt/TITLEgt

12
Hypertext

• What is Hypertext?
• Text which, when clicked with a mouse, will
  hot-link
• elsewhere in the document,
• elsewhere in the computer, or
• elsewhere on the network.
• What is Hypermedia?
• Includes text, graphics, video, sound, etc.

13
Design Your Site

• Do it yourself
• Html editors
• Graphics editors
• Design Services
• Domain Name - registration and ownership
• Development of site
• Links
• Custom Graphics
• Forms
• Search Engine registration

14
Web Site Goals

• What Do You Want To Do On the Web?
• Product Information
• Company Profile
• Shopping Catalog
• Customer Support
• Online Documentation/Information
• Gathering Feedback Data

15
Home Page Design
Waterfall Skyscraper Mesh
16
Organization and Navigation

• Break up your content into main topics
• Organization Options
• Linear Organization (Like a Print Document)
• Hierarchical Organization (Menu System)
• Combination
• Provide navigation tools on every page

17
Writing For On-line

• Write clearly and be brief
• Organize your pages for quick scanning
• Headings, Lists, Menus, Tables
• Make each page stand on its own
• Be careful with emphasis (blinking, capitals)
• Use accepted graphic design techniques

18
Design Page Layout

• Dont overuse images
• Reuse key images
• Use small informative images
• Consider thumbnail graphics
• Use care with backgrounds and link colors
• Group related information visually
• Use a consistent layout font

19
Using Links

• Use link menus with descriptive text
• Use navigation links throughout your site
• Links back home
• Links to top bottom
• Links to purchase forms or registration
• Graphic links need alternate text links
• Graphics may be turned off

20
More Hints

• Welcome visitors to your site
• Know your audience
• Tell them what resources you have
• Have links to other related places
• Emphasize content over form
• No Under Construction
• Coming Attractions Is OK

21
Page Length

• One Large Web Page
• Easy to Maintain
• Mirrors Real World Documents
• Easier to Print
• Slow Download
• Many Linked Web Pages
• Loads Quicker
• View Entire Sub Page on One Screen
• Difficult to Maintain
• May be Too Many Links to Access the Info

22
Integration with Databases

• Enabled through various helper applications
• CGI Scripts (Common Gateway Interface)
• Forms Handlers
• Supports interactive searching
• Most databases provide web interface support
• Oracle, Access, FileMaker Pro

23
TOOLS CONSTRUCTION

• HTML Editors (Authoring)
• Microsoft FrontPage 98/2000
• Trout Software Hippie 98
• Namo WebEditor
• Sausage Inc HotDog Pro
• SoftQuad HoTMetal/Pro
• Quarterdeck WebAuthor
• Coriolis All-in-One Web Surfing
• Interleaf Cyberleaf
• IT Solutions WebPages

24
TOOLS CONSTRUCTION

• HTML conversion software
• Add on to software packages
• Internet Publisher for WordPerfect
• Internet Assistants for MSOffice
• Word, Excel, PowerPoint, Access
• Built into MSOffice Suite

25
Other Web Tools

• Browsers/Viewers
• QuickTime (movies)
• MPEG Play
• Wplany (sound)
• Compression Software
• Winzip

• Image Map Editors
• Mapedit
• Map THIS!
• Picture Conversion/Manipulation
• Lview Professional
• Paint Shop Pro
• WinJPEG

http//www.tucows.com
26
Building with HTML

• HTML is composed of Characters and Tags
• Characters
• Basic ASCII is preferred for portability
• Tags are delimited by angle brackets (lt and gt)
• Used for
• Identifying document parts
• Formatting text
• Specifying hypertext links
• Including pictures and sound
• Define input fields for interactive pages

27
HTML Sample Code
ltHTMLgt ltHEADgtltTITLEgtVeren Services Web
Designlt/TITLEgt ltMETA NAME "Keywords Content
Web Design Webpage Hosting"gt ltMETA NAME
"Description" ContentWeb Design and Web
Hosting"gt lt/HEADgt lt!- Last modified on Fri
October 14 121030 EST 2005 by
EEHealy-gt ltBODYgt ltPgtlta href "http//www.veren.co
m/index.html"gtltIMG SRClogo.gif" ALTVeren
Services Web Design"gtlt/agtlt/Pgt ltPgtProviding
clients with web pages that are designed to
include a full-featured, value-added Internet
Consulting Service.lt/Pgt lt/BODYgt lt/HTMLgt
28
HTML Tags

• Document Structure Tags
• Text-Related Tags
• Character Style Tags
• Link Tags
• Meta Tags

29
Document Structure

• ltHTMLgt
• ltHEADgt
• ltTITLEgtThis is the titlelt/TITLEgt
• lt/HEADgt
• ltBODYgt
• Body of Web page goes here
• Information that is seen in the browser
• lt/BODYgt
• lt/HTMLgt

30
Meta Tags

• Keywords descriptions help search engines find
  you
• Meta Tags are optional in the head portion of a
  Web page
• ltMeta Name "Keywords
  Content Keywords Phrases"gt
• ltMeta Name "Description" ContentDescription
  of your site"gt

31
Text-Related

• Paragraph
• ltPgt Ends a line, leaves a blank line, then
  starts a new line at the left margin
• Line Break
• ltBRgt Ends a line, then starts a new line at the
  left margin.
• Heading Tags
• ltH1gtHeading Level 1lt/H1gt
• ltH6gtHeading Level 6lt/H6gt
• Horizontal Rule
• ltHRgtDraws a horizontal line

32
Hyperlinks

• Inserting Hypertext Links
• ltA HREFhttp//www.veren.comgtVERENlt/Agt
• Starting anchor tag ltA HREFURLgt
• Specify hypertext ECRC
• Ending anchor tag lt/Agt

33
Graphics In HTML

• Pictures
• Image Maps
• Hyper Images (buttons)
• Background Images
• Animations (series of graphics)
• Many available free on the Internet

34
Inserting Graphics

• In-line Image
• ltIMG SRCURL of Graphicgt
• External Images, Sounds, Animations
• ltA HREF URL of Graphicgtclick herelt/Agt
• Note You can replace the click here text with
  an in-line image and create a clickable image
  which links to another file.
• Examples
• ltA HREFlogo.jpggtltA HREFhttp//www.veren.com/
  images/logo.gifgt

35
Now What!

• Lets build a Web Page!