Creating Web Pages using HTML

 

 

Background.  Hypertext Markup Language (HTML) is the language used to create the pages for World Wide Web browsers such as Netscape and Internet Explorer.  Generally, it is no longer necessary to learn HTML because there now exist a variety of front end processors to develop the necessary code. FrontPage, PageMaker and DreamWeaver are three of the biggest front end development tools.  The user works in a WYSIWYG (What You See Is What You Get) environment and the program develops the HTML that underlies it.  Thus, it is entirely acceptable for you to take this page very lightly, there is not much call for developing basic HTML.  On the other hand, there are some distinct advantages to having at least some sense of how HTML works and there are times when you need to resort to direct use of HTML when your front end processor lacks desired features.

HTML Commands.  HTML uses a set of formatting tags to determine things such as whether items are bolded, centered, where to separate paragraphs, underlined and on and on. Typically the tags come in pairs, surrounding the text they are intend to mark up.

Fore example, bolding text on a page would look like

<B>this text is bolded</B>

HTML commands almost always begin with a < (less than sign) and end with a > (greater than sign). When used in pairs, HTML tags are always related. The closing tag is just the initial tag with a / added in front of it.

White space, anything that is not a printable character, is generally ignored by HTML. Blank lines or spaces will generally not affect your Web page. The tags are not case sensitive.

 

 

Essential and Most Basic HTML Tags. 

  • The <HTML> Tag - The first set of tags is <HTML> and </HTML>. These tags should surround all of your HTML text and indicate the Hypertext Markup Language is being used.
  • The <TITLE> Tag - This set of tags is <TITLE> and </TITLE>. These tags are used to create the title that will appear on the title bar when the page is being viewed.
  • The <BODY> Tag - This set of tags is <BODY> and </BODY>. These tags are used to surround the body of your webpage. They should surround most of your document.
  • The <U> Tag - This set of tags is <U> and </U>. These tags are used to underline any text that appears between them.
  • The <B> Tag - This set of tags is <B> and </B>. These tags are used to make any text that appears between them bold.
  • The <I> Tag - This set of tags is <I> and </I>. These tags are used to italicize any text that appears between them.
  • The <CENTER> Tag - This set of tags is <CENTER> and </CENTER>. These tags are used to center any text that appears between them.
  • The <HR> Tag - This tag creates a spacer line.
  • The <BLINK> Tag - This set of tags is <BLINK> and </BLINK>. These tags are used to make any text that appears between them blink.
  • The <P> Tag - This set of tags is <P> and </P>. This tag creates a new paragraph.
  • The <BR> Tag - This tag creates a break so that what follows starts on a new line.

 

 

Creating a First Web Page and Viewing It.  After starting Word type these following lines in the file

<HTML>

<HEAD>

<TITLE>Your name's Home Page</TITLE>

</HEAD>

<BODY>

Welcome to your name's Home Page

</BODY>

</HTML>

Now you should save your file

    1. Select Save As from the File Menu
    2. Make sure you are in a directory where you want to put your web pages such as WWW
    3. Make sure the extension option is set for .HTML
    4. Name the file yourname.html

Now you should view your HTML file

    1. Launch Netscape
    2. Select Open Page
    3. Find your file using Choose File
    4. Select Open

 

 

Adding an Image.  The image file should either be in the same directory as your HTML file or a subdirectory. I like to put all of my images in a subdirectory so I will use this approach. The image file should have either a .gif or .jpg extension and be of the corresponding type of image.

The tag to insert the image is

<IMG SRC=filename>

For example I want to view the image

<IMG SRC="images/bluerain.jpg">

You should look at the document source to see the HTML.

 

 

Creating a Link to Another Site on the Internet.  A link allows someone accessing your webpage to link to another site or page on the Internet. The tag to establish the link is constructed as follows

<A HREF="http://faculty.quinnipiac.edu/business/foxzy">Zy's HomePage</A>

this would establish the following link

Zy's HomePage

Normally, you need to include the name of the file in the path for the page location.  In this instance the filename can be left out because I have named my homepage Index.htm and this is the default location.

Using an Image as a Link.  An image can be used to link to another page by putting the image source in place of the linking text

<A HREF="http://faculty.quinnipiac.edu/business/foxzy">

<IMG SRC="images/blighten.jpg"></A>

This gives the following

 

 

 

Adding a Background Color.  To change the background color you need to modify the <BODY> tag to be something like

<BODY BGCOLOR=RED>

 

Using a Background Image.  To use an image for a background you need to modify the <BODY> tag to something like

<BODY BACKGROUND="images/bluerain.jpg">

 

 

You are the Hit Counterth person to access this webpage!