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. (Assumes you have an Internet account with Comcast or Century Link). 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:

<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

<p>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. </p>

 

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

<br /> to create a line break

<p> xxxxx </p> 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.

<b> xxxxx </b>  to bold the data between the start and end tags

<i> xxxxx </i>  to italisize the data between the start and end tags

<u> xxxxx </u>  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.