Basic HTML

by Dick Evans

Learn the basics of using HTML to build your own personal Web page. Will learn the code behind Web pages, create a multi-page site, and upload it using FTP live to the Internet. All software used is part of Windows, so you have it on your machine already.

PART 1

Introduction

We think of the Internet and the Web as one in the same. They are not. The WWW or World Wide Web are that part of the Internet composed of pages written in HTML that are interpreted by a browser and display graphically. There are other parts of the Internet we may use and not even realize it. One is FTP or file transfer protocol. Another protocol is email.

HTML is the main programming language for Web pages. It is hypertext markup language and consists of start and end tags with content between them. Pages can be developed without the need of any special apps on your computer. We will use Notepad to create our pages and Internet Explorer (or FireFox or Chrome) to view the results of our coding.

Getting the completed pages on the Internet requires the use of FTP and the availability of a hosting service. If you have Comcast or Century Link as your Internet service provide (ISP) at your house, you already have the location to FTP your completed pages for all to see. Century Link offers 20MB of personal web space and Comcast offers 1GB.

We will start with building a simple Web page using notepad, view it in a browser, add a second and perhaps a third page, and then upload it to our Web space at our ISP.

HTML Basics 1

Build your first page using Notepad saved as index.htm and view it in Internet Explorer. Learn about tags and the skeleton of a Web page found at www.rwevans.com. Add bold type, heading styles, background color, and centering.

The Basic Html Template page is located at http://rwevans.com/basic HTML/basic template.htm. From there you can copy/paste the basic page template and the individual tags we worked on in this first part.

Notes:

tags should always be typed as lower case.
pages should be save as lower case ending in .htm
the starting page must be named index.htm
center titles, but not the detail paragraphs of information
when setting color combinations avoid black on red or blue and other combinations that are difficult to read, especially for color blind individuals.

<title> xxxxxxxx </title> to cause the wording between the start and end tags to appear in the tab of the browser displaying the page

<h1> xxxxxx </h1> to cause the data between the start and end tags to displayed as heading style 1 (the largest of the heading styles)

<center> xxxxxx </center> to cause the data between the start and end tags to be centered left to right on the page

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Learn to use “geeking” text to fill the page for testing purposes.

to create a line break

xxxxx to treat the data between the start and end tags as a paragraph with 2 line breaks after it

<body bgcolor=yellow> as an attribute of the body tag, bgcolor instructs the browser to display the background in a specific color. (see the HTML template of additional colors)

Result: a working Home Page.

HTML Basics 2

Add a link to another Web site, an email link, and more tags such as italic, underline, and a horizontal rule.

xxxxx to bold the data between the start and end tags

xxxxx to italisize the data between the start and end tags

xxxxx to underline the data between the start and end tags

<hr /> to create a horizontal line on the page

<a href=http://www.rwevans.com> xxxxxxx </a> to cause the data between the start and end tag to be displayed underlined as a link to the URL entered after href=.

<a href=mailto:dick@rwevans.com> xxxxxxx </a> to cause the data between the start and end tag to be displayed underlined as a link that causes an email to be sent to the address after href=mailto:

Result: a working Home Page with links to another site and to create an email. Italics, underlines, and horizontal rules added to the page.

PART 2

HTML Basics 3

Add a second page saved as about.htm using index.htm as a template. Add a link bar at the bottom of each page. Learn to use special characters and linking to a bookmark.

On the desktop create a folder named with your last name--all lower case. This is where we will save all the pages created in this session. The folder represents the storage space on your host site on the Internet.

We will build three pages: index.htm, about.htm. and contact .htm.

Using the Basic HTML template at www.rwevans.com and what we learned last week, create a home page for your site and save it in your folder.

Use as many paragraphs of geeking text as you want and any background color.

Now that the home page is all set, we will create two additional pages using this as the template for the other two.

In notepad with the home page open, save as about.htm and then again as contact.htm.

Open the about.htm page and change the title to About Evans (your name, not mine) and the heading to About Me.

Open the contact.htm page and change the title to Contact Evans and the heading to Contact Me.

Now we need to link the pages to each other.

On the index.htm page, under the bottom line and the following, centered:

Home | About | Contact

The vertical line is the piping character located above the Enter key on the backslash key.

Link Home to index.htm, About to about.htm, and Contact to contact.htm

Copy and paste this code to the other two pages.

On the About page let’s add an image. Locate an image being careful about copyrights and save it in your folder. Use the code found in the HTML Template page:

Substitute your image name and describe the image to the right of alt=. This description will display with the user mouses over the image.

Place this under the <hr /> line under the heading.

On the contact.htm page replace the geeking text with your name and email address as a link.

You now have a three page working site. Change the geeking text to something real and you have your own personal Web site ready to upload to a host site.

Result: a working Home Page (index.htm) that links to an about.htm page and a contact.htm page with links on the bottom of each page to go between the pages and in image sized appropriately.

Hosting Basics

How to upload a Web site to the hosting service, the storage device that will serve your pages on the Web.

If you have already opened an account wtih freehosting.com skip down to the next section.

If you have not opened an account, follow all the steps below to do so.

Open www.freehosting.com and click Get Started

At the bottom of the second column, click Order Now

Enter your last name and then Click to Continue

Fill out your details, check the box, and click Complete Order

When you receive the confirmation page, Click here to go to your Client Area

Your URL is http://evans.freehosting.com (with your name instead of mine)

Now that you have an account and a Web site address (URL) follow these steps to upload your pages.

Now we need to open the control panel (cpanel) and upload your completed pages and your image.

From the Members Area, click My Products & Services.

Click View Details

(note your username and password. I suggest you change the password to something you can remember)

Then click Login to cPanel

Under Files click File Manager, then at the popup dialog click Go

Note: At the next screen if you see a file named index.php, click its name to select the line and then delete it by clicking the big red X on the toolbar. This will be the only time you will delete this temporary file.

Then on the toolbar click Upload.

Click Choose File and one at a time upload the files in your folder.

When you have uploaded all 4 files, you can enter your URL and see your completed Web site live on the Web!

Result: a working Web site on the Internet, live.

Now you can make changes to the pages to make them yours. Replace the files on the host site using the above instructions to upload the pages you have changed or even added.