Basic Web Page Construction

1
Basic Web Page Construction

• Chapter 4

2
Topic Outline

• HTML Elements
• Web Page Formatting
• Web Page Graphics
• Hyperlinks
• Frames and Navigation
• Installing Web Pages on a Web Server

3
Introduction

• Learning Web page creation and publishing are
  EASY!
• Self-teach
• Professional Seminar
• Software Packages available for all skill levels

4
Resource Requirements

• Text-editor
• A general purpose editor for plain text files
  written in a document mark-up language
• www.textpad.com
• Similar to Notepad
• Web Browser
• Good software will expedite the process!

5
If it is easy to make the productWhy learn the
process?

• You do need to write programming commands
• in at least one document mark-up language.
• HTML
• You do not need to be a slave to your software or
  its limitations!
• Learn how to get behind the main stage through
  process short-cuts.
• Compare your softwares method to perform a
  mouse-over to the HTML command code itself
• Gain the common sense to think without software.

6
Web Page HTML Elements

• Web browsers are designed to display any ASC II
  text file with the extension
• .htm or .html.
• Even if the file is not formatted for the web.
• Practical Example Select a .txt file from
  your hard drive. Copy the file and rename it with
  the new extension .htm. In the File menu of
  your browser, select a command that allows you to
  browse your local hard drive for a file to Open.
  How does the page look?

7
Web Page DesignRule 1

• Web browsers will display any ASCII text file
  that is not formatted for the web.
• Therefore
• A web server is not needed during your design
  phase. You can view them locally on your own
  computer as you develop them.

8
No Two Browsers are Alike

• Every web browser customizes a web page to the
  limitations of the computer wishing to display
  it.
• When you open a .txt file as a .htm file, all of
  the original formatting is modified.

• Watch your browser dynamically work for you
• Resize browsers home page and watch the
  proportions of each element change.
• In order to override your browser, you can
  control the display in a variety of ways.
• (Hint Now you need HTML).

9
What is HTML?

• Hyper Markup Language is a mark-up language that
  gives Web Page authors control over a web page
• HTML elements are hidden inside the page to
  communicate with the browser.
• These elements, or commands, constrain the web
  browser to display the original formatting of the
  web page.
• Add content to a page (eg. add an image)
• Specify a style (eg. A font element)

10
HTML Elements

• HTML elements divide a web page into segments
  where different kinds of information belong.
• There are four basic web page HTML elements
• HTML, Head, Title, Body
• These elements, combined with proper HTML
  tagging, will tell the web browser how to render
  a page.

11
Additional HTML Elements To Know

• Text formatting
• Text style
• Graphics
• Background, size, color and typeface font
• How to add links and hypertext
• Tables and frames

12
HTML Tags

• Tags are used to divide a Web page into segments
  where different kinds of information belong
• The HTML element requires a pair of tags
• One to mark the beginning of the element, and one
  to mark its end.
• ltHEADgt
• HTML tags beginning with a forward slash mark the
  end an HTML element.
• lt/TITLEgt
• Nested tags produce a hierarchical structure for
  each web page

13

• ltHTMLgt
• The HTML element contains everything the browser
  nee to know about
• the Web page
• ltHEADgt
• The head element contains information that is
  not displayed in the browsers Web page display
• ltTITLEgt
• Text inside the title element appears in the
  browser windows title bar
• lt/TITLEgt
• lt/HEADgt
• ltBODYgt
• Text and graphics inside the body element are
  displayed in the browsers Web page display
• lt/BODYgt
• lt/HTMLgt

14
Adding HTML with a Text Editor

• HTML elements are added to a text file by using
  any text editor
• Insert a tag or a pair of tags to the document
  you are creating in your text editor.
• Use a simple text editor for editing HTML files
• Notepad and Textpad are BETTER because they are
  SIMPLE compared to MS WORD which is COMPLEX.
• Change the default setting file type to All
  Files when using the editors dialog box to open
  your HTML files.

15
Viewing Your Work in Progress

• Begin a .htm or .html file
• Save your file with the editors Save Command
• Load the file into your browser
• Review the page and note how it looks
• Revise your page as needed using a text or HTML
  editor

16
Basic Web Page Formatting

• Heading Element
• Adding a List
• Fonts and Type Styles

17
The Page Outline
ltHTMLgt ltHEADgt ltTITLEgt Page Title
lt/TITLEgt lt/HEADgt ltBODYgt ltH1gt Text Title
lt/H1gt Some text lt/BODYgt lt/HTMLgt
18
The Body Elements

• Heading Element
• Located at the top of your Web Page display.
• Added as an HTML element inside the body
• The 6 heading sizes
• Very large to very small
• ltH1gt very largelt/H1gt
• ltH6gtvery smalllt/H6gt
• A real example
• ltH1gt My Home Pagelt/H1gt

19
Body Elements Attributes

• A property of an HTML element consisting of an
  attribute name and an attribute value
• Many HTML elements use their own, default
  attribute values if you do not specify your own
• Specify in the Heading element
• For example Line Justification and Paragraph
• ltH1 ALIGNCENTERgtMy Home Page lt/H1gt

20
Web Page Outline Text Attributes
ltHTMLgt ltHEADgt ltTITLEgt My Home Page
lt/TITLEgt lt/HEADgt ltBODYgt ltH1 ALIGNCENTERgtMy Home
Page lt/H1gt ltPgt Welcome to my home
page! lt/Pgt lt/BODYgt lt/HTMLgt
21
Adding A List

• Bulleted List
• The unordered tag
• ltULgt
• The List Item Tag
• ltLIgt

• Enumerated List
• The ordered tag
• ltOLgt
• The List Item Tag
• ltLIgt

22
The List Example
ltULgt ltLIgtFriendslt/LIgt ltLIgtFamilylt/LIgt ltLIgt Pets
lt/LIgt lt/ULgt
23
Font Faces

• There is no set of shared fonts that all
  computers have
• Choose popular and common fonts
• Safe choices for Windows
• Sans Serif Font Arial
• Serif Font Times New Roman
• Monospaced Font Courier New
• Example
• ltFONT FACEArialgt

24
Type Styles

• ltBgt BOLD lt/Bgt
• ltIgt Italic lt/Igt
• ltFONT COLORredgt Red ltFONTgt
• ltFONT SIZE2gt SIZE lt/FONTgt

25
Basic Web Page Graphics

• Using Color
• Working with Image files
• Three Types of Hyperlinks

26
COLOR

• Backgrounds and patterns dress up text
• Choose any of 216 Web-safe colors
• Based on hexadecimal notation where each code
  contains six characters from the16 possible
  alphanumeric digits used to represent numbers in
  base 16
• Listed in text

27
How to add a background color

• Include a BGCOLOR attribute in the body element,
  with a code string for the attribute value
• ltBODY BGCOLORFFFFFFgt
• (This is the code for the color white)

28
Working With Image Files

• All artwork and photographs found on the Web are
  stored as binary files
• The Web server stores these and the HTML files
  associated with them
• There are many ways to obtain an image for the
  Web
• Digital cameras, Scanners and Software

29
Image File Formats

• GIF
• Graphics Interchange Format
• Line art, cartoons, simple images
• JPEG
• Joint Photographic Experts Group
• Photos, colorful artwork

30
Adding an Image

• Use the ltIMGgt HTML tag to place the image files
  onto a page
• The IMG tag creates an inline image on the Web
  page.
• Inline images are treated lie a single,
  alphanumeric character
• Makes manipulation easy
• Use the ltSRCgt tag to specify the file that
  contains the image.
• ltIMG SRCpets.joggt
• Image tags belong in the Web page body
• The placement of the tag in the HTML file
  determines where it appears on the web page.

31
Image Formatting

• Image formatting can improve the Web pages
  appearance
• Use the ALIGN attribute, followed by these
  attribute values
• TOP, BOTTOM, MIDDLE
• Scale the image with the Height and Width
  attribute values
• Usually in pixels
• Maintain original height width ratio
• ltIMG SRCpets.jpg
• HEIGHT54 WIDTH70
• ALIGNCENTERgt

32
Three Types of Hyperlinks

• Absolute URL Connects two Web servers
• Relative URL Connects one page to another page
  in the same Web Site
• Named Anchor Connects two locations on the same
  Web Page

33
Absolute URLs

• Absolute URL Connects two Web Servers
• Links a page written by a different author on a
  different server
• Requires your URL and the other sites URL
• Mark a label that will operate as the link on our
  Web page
• Labels can be a selection of text, a list item,
  or an image
• Use a pair of anchor tags and a hypertext
  reference to the destination URL to create the
  link
• ltA HREFhttp//www.home.com/pets/dog.jpggt
  labellt/Agt

34
Relative URL

• Relative URL Connects one page to another page
  in the same Web Site
• Does not require you to specify the URL of the
  web pages in the same directory
• Use a short-cut address that contains only the
  file name, relative to its location in the
  current directory
• ltA HREFbooklist.htmlgt label lt/Agt

35
Named Anchor

• Named Anchor Connects two locations on the same
  Web Page
• Use this link to help your reader navigate
  through a web page or document
• You must use a NAME attribute inside of the
  anchor tag to identify the destination location
  in the current document for the browser to find
  it.
• See text example, p. 187.

36
Test Your Links

• View each newly updated HTML file by saving
  before you view the page.
• This prevents replacing faulty links with good
  ones, only to have the software revert to the
  last file version saved.

37
Navigation Maps with Frames

• HTML frames are good tools to help users navigate
  your page
• Frames allow you to partition a Web page into
  multiple segments so that you can display a
  different file in each segment
• Some examples include vertical and horizontal
  frames used as navigational bars
• www.sc.maricopa.edu

38
Creating Frames

• Design so they can be viewed without excessive
  scrolling
• Determine whether or not your frame will scroll.
• Create a FRAMESET tag immediately after the HEAD
  element on your page
• FRAMESET divides the page into columns and rows
  using COLS and ROWS attributes

39
Frame Attributes and Values

• ROW and COLS attributes
• Use values to design shape
• Source attributes are used to upload other files
  to the frame space
• The scrolling attribute can be added or deleted
  by assigning to it a value of yes or no

40
A General Frame in HTML

• ltFRAMESET COLS70, 30 ROWS60, 40gt
• ltFrame SRCfigure1.html SCROLLINGnogt
• lt/FRAMESETgt

Figure 1
41
The Three Cs for Web Page Design

• Quality Content
• Reader Convenience
• Artistic composition
• In addition,
• Avoid common mistakes
• Check pages before publishing
• Use Effective Web Page Titles
• Keep Download Times Short

42
Six Steps to Publish a Web Page

• Acquire access to a Web server
• Find out the DNS address of your Web server
• Help Desk or online documentation
• Begins with ftp// or http//
• Find out what pathname is needed when you upload
  to the server
• Upload your files to the Web server
• Find out the URL to use to view your page