Html Codes to Enhance Your Web Page

Html Codes to Enhance Your Web Page

007.04 HO 20

HTML CODES TO ENHANCE YOUR WEB PAGE
WEB PAGE CODES

BLINKING

Add a “blink” to a page to make text “blink.”
  • Do not overuse as this can distract from other text on the page.
  • The blink code may not work on Internet Explorer.
/
  • Open WEBPAGE1.HTM
  • Make the word HELLO! blink.
  • Add a center alignment tag .
  • Change the font color to yellow.
  • Save the file at WEBPAGE1.HTM
/ <CENTER> <BLINK<H1<FONT COLOR="YELLOW">HELLO</CENTER>
</BLINK</H1</FONT COLOR>

GIF BACKGROUNDS

Making a GIF file the background
Make sure the background is not so “busy” that the text is hard to read. / You can use a GIF file as the background on a web page by placing the file name in the BACKGROUND code.
  • Search the Internet for BACKGROUND GIF files and change your background.
  • Make any needed adjustments to your text so that is can be easily read on the new background.
  • Save the file as WEBPAGE1.HTM
/ <BODY BACKGROUND =CLOUDS.GIF
TEXT="FFFFFF" LINK="3232CD">

007.04 HO 20

CONTINUED

HTML CODES TO ENHANCE YOUR WEB PAGE

FONTS DISPLAYED

Displaying a particular font on your web page in the browser
The font must be a true type font. / You may specify which font will be used in the browser by adding a <FONT FACE=> tag.
  1. Change the font type to be displayed as Arial.
  1. Place the code after the beginning <BODY> code
  1. Save the file.
/ <BODY BGCOLOR=2F24F4 TEXT="FFFFFF" LINK="3232CD">
<FONT FACE=”ARIAL”>
Listed below are some other tags or attributes to enhance your web page.
Using a GIF file to make a bulleted list / Using a small GIF image you may create a bulleted list by placing the GIF in front of the text and a <BR> tag between each line. / <IMG SRC="bullet.gif"> Mother<BR>
<IMG SRC="bullet.gif"> Father<BR>
<IMG SRC="bullet.gif"> Brother<BR>
<IMG SRC="bullet.gif"> Sister<BR>
Including an e-mail address
This feature will work only when you publish your page and access it online. / You may include your e-mail address for comments or responses.
If you have an e-mail program open on your computer, this should open the compose window with this address showing. / Please send comments to
<A HREF=mailto:> </A>
Changing the paragraph alignment.
The default alignment for a paragraph is left. / You can center, right align or justify a paragraph in your web page. / <P ALIGN=center/right/justify>
</P>

007.04 HO 20

CONTINUED

HTML CODES TO ENHANCE YOUR WEB PAGE
Listed below are some other tags or attributes to enhance your web page.
Adding animated horizontal rulers and counters / Animated horizontal rulers add movement and pizzazz to your Web page. When choosing an animated ruler, it must compliment the background.
Web page counters allow you to determine how many visitors your web page has had.
Both of these can be located on the Internet.
  1. Search the Internet for horizontal rulers or counters and copy the GIF file to your web page directory.
  1. Then place the file in your web page as you would any other image.
/ <IMG SRC=”blueruler.gif”>
<IMG SRC=”webcounter.gif”>

007.04 HO 21

ENHANCING YOUR WEB PAGE

Open or create one of the web pages from HO 19 in 007.03.

View the web page and make any needed changes.

Use the following rubric as a guide to enhancing your web page.

RUBRIC

_____Web page displays in the browser without HTML errors...... 10 points

_____Add blinking text (Remember to make it small—not distracting.)...... 10 points

_____Change to a GIF file as the background...... 10 points

_____Display all text as Arial...... 10 points

_____Change your unordered list to a bulleted list with a GIF file as the bullet...... 10 points

_____Include an e-mail address at the bottom of the page...... 10 points

_____Change the horizontal rulers to an animated horizontal ruler...... 10 points

_____Add a counter, centered below your e-mail address...... 10 points

_____Overall impression...... 20 points

(Good use of white space, no typographical or grammatical errors, appropriate

use of features.)

_____TOTAL POINTS

007.04 HO 22

CREATING A WEB SITE
TERMS

Web Page – A page written so that it can be displayed in a browser.

Home Page – The first page displayed in the web site. This page will include links to other pages in the web site.

Web Site – A group of related, linked pages.

Linear Web Site

Displays web pages in a straight line. Appropriate when information must be read one page before another. Each page would include a link to the next page and may have a link back to the home page.

Hierarchical Web Site

Displays web pages in a tree-like structure. The home page would have an index or table of contents. You would display general information on the first pages and more detailed information on the next pages.

Integrating Technology and Internet Use—1

Computer Applications II—BE 6412

Summer 2000

007.04 HO 22

CONTINUED

Webbed Web Site

Web pages have no set structure. This structure is good for information that does not have to be read in any particular order. The World Wide Web itself is based on this structure. Users can link from one page to the next in the order of their choice.

Narrow Web Site

A web site where the home page is the index and all other web pages are individually linked to the home page. The user must return to the home page in order to go to another page in the web site. This is a very time consuming way to navigate through a web site but is often where you begin creating a web site.


007.04 HO 22

CONTINUED

CREATING A WEB SITE

In order to create a web site, you must create two or more pages that are related and link these pages together so that the user can move from one page, usually the home page, to the other page.

Steps to Creating a Web Site
  1. Determine the content of your web pages.
  2. Gather information for all pages.
  3. Collect files, graphics, animated GIFs, etc. for the pages.
  4. Decide the tool to be used to create the web page.

 HTML Code

 Web Editor

Sample of Personal Narrow Web Site

Linking Pages in a Web Site

HTML CODE

<A HREF="filename of file to link to.HTML"> </A> / Add the text you want displayed before the A HREF tag with the word HERE between the > and </A>.
To return to the home page from a link, you would use the same code. / For Family Information, CLICK<A HREF="filename of next page.HTML">HERE </A>
To Return to the Home Page CLICK<A HREF="filename of home page.HTML">HERE </A>

WEB EDITOR

If you are using a Web editor, follow the directions for that particular program.

007.04 HO 23

CREATING AND LINKING A WEB SITE

Using the skills you have learned, create a narrow web site with a minimum of three pages linked to the home page.

  1. Create a new folder or use a new disk to create your web site.
  2. Select a topic for your web site.
  3. Suggestions for your page:

 Personal page

 Page for an organization to which you belong

 Your family tree

 Page of hobbies or personal interest

 You and your vacations

  1. Collect information for your page including data and files.
  2. Sketch a storyboard of your pages.
  3. Determine if you will use HTLM code or a web authoring program.
  4. Create your pages. All pages must be in the same directory.
  5. View in the browser.
  6. Modify as needed.

007.04 HO 23

CONTINUED

CREATING AND LINKING A WEB SITE RUBRIC

If a feature is listed, it should be displayed in the web site.

_____Web page displays in the browser without HTML errors...... 10 points

_____Specific font such as Arial designated...... 5 points

_____Used colored text on all pages...... 5 points

_____Headings different size from other text...... 5 points

_____Appropriate use of bold, italics, underline on all pages...... 5 points

_____Background, color or GIF on all pages...... 5 points

_____Appropriate graphics on all pages...... 5 points

_____Appropriate use of bold, italics, underline on all pages...... 5 points

_____Used colored text on all pages...... 5 points

_____Ordered/Unordered list on all pages...... 5 points

_____Horizontal Rule, may be animated...... 6 points

_____Appropriate animated GIF...... 6 points

_____Add a counter and your e-mail address to the home page...... 6 points

_____Links to three other pages you have created...... 6 points

_____Return to home page link...... 6 points

_____Overall impression...... 15 points

(Good use of white space, no typographical or grammatical errors, appropriate

use of features.)

_____Total Points out of 100 points

When you have completed your web site, ask your teacher to grade the site online.

007.04 HO 24

STEPS TO PUBLISHING A WEB PAGE

Step 1

If you are publishing a web page as an assignment at school, follow county procedures for parental permission. You may have to have a permission form signed in order to publish the page.

Step 2

Locate a web server which will allow you to publish your page. Consider the following:

  • School/county web server, if available
  • Internet provider web server if this service is offered
  • Free web server space such as:
  1. GeoCities.com
  2. Angelfire.com
  • Search the Internet for other sites
  • Ask about using web servers space at a community college or university in your area
  • Purchase web server space as a last resort

Step 3

The instructions for uploading your page to the web server will differ for each site. You will usually do one of the following:

  • FTP the files – requires an FTP program which can be downloaded from the Internet
  • Upload the files with software from the web server you are using

Step 4

A good web page is updated weekly. Once you publish your page, update regularly. Users like to see the date the page was last updated to determine the age of the information. Consider placing this information on your site.

Integrating Technology and Internet Use—1

Computer Applications II—BE 6412

Summer 2000

Top View