Midwest Web Design: Web sites, database driven sites, hosting, tutorials

Creating an HTML Web Page

In today’s world of technology, many people want to share information with others through a universal medium which is accessible to those with a computer and Internet access. Most people want to share photographs, personal stories (blogs), link to their friends sites or simply venture into the creative world of producing electronic art. The most common way to share this information is by creating a web page with HTML.

In this article, you will learn:

Create a local folder to store your files, such as your web page and graphics
How web pages work
Browsers
DOCTYPES
Hypertext Markup Language (HTML)
- Heading tags
- Paragraph tags
- Images
- Lists
  - Unordered
  - Ordered
- Links
- Tables
- Break tag
- Comment tag
- Formatting of text
  - Different font families
  - Different font colors
  - Use of span tag

If you would like to follow creating a web page’s step-by-step development or try your hand at creating one yourself, you will find the project zip link below helpful.

Finished Page

Printable Version
Word	PDF
Download Project Files
Zip

Create your folder

When you develop web pages or websites, you create a folder on your computer which stores all web pages, images, style sheets, etc for your web page. Once you complete your web page on your computer, you upload the files from your computer to a remote server which allows your web page to be viewable to the world. Follow these steps to create your folder:

From the Desktop, double-click My Computer
From this window, double click Local Disk(C :)
- You may choose another partition of your choice
From this window, from the main menu select:
File>New>Folder
Type your first name
Press enter
Keep this window open but minimize it, by left clicking the left most button:

Minimize

How web pages work

Web pages are delivered via a network protocol, Hypertext Transfer Protocol (HTTP). When a computer connects to a network, it has access to a variety of protocols. Subsequently, when computers connect to the Internet, they have access a few other protocols, which include HTTP and File Transfer Protocol (FTP), which are the two most commonly used on the web. The process of viewing a web page or website happens like this:

A visitor opens their web browser (discussed next) and in the address bar types a complete website address, sometimes referred to as Uniform Resource Locator (URL), such as http://www.yahoo.com

Browser Address Bar

The browser uses the HTTP protocol to identify where the web page or website exists, on a remote server
Once the browser locates the web page or websites exists, it will request from the remote server to give it the specific file, in our case, index.html, since home pages for many sites use index as a naming convention
The server accepts and processes the request, and sends the browser the requested file
The browser then uses HTML to render the page to the visitor
Once the browser has finished rendering the web page or website, the visitor sees the following:

Browser Render of Yahoo

Browsers

In order to view a web page or website, you need a browser. Browsers are a software program which is capable of viewing different elements of a web page or website, such as text, images, tables, links, etc. All browsers today are free of charge and work well on Windows and Macintosh based computers. The most popular are listed below.

Microsoft Internet Explorer

If you have a Windows based computer, Internet Explorer is usually already installed. If not, you can download it at:

http://www.microsoft.com/windows/ie/default.mspx

Mozilla Firefox

If you want to support open source software initiatives and want a different taste for a browser, you may want to check out this browser at:

http://www.mozilla.com/en-US/firefox/

Opera

If you want yet another choice for a browser, you may want to check out this browser at:

http://www.opera.com/

In the end, it doesn’t matter which browser you choose, since they all support HTML, CSS, JavaScript, etc. Matter of fact, as a web developer, you will probably use all three at some point.

DOCYTPES

Since the mass movement to CSS based designs has progressed in recent years, using a correct DOCTYPE ensures that your web page(s) are confirming to standards based code. DOCTYPE stands for Document Type Declaration which is a way to validate our code against the W3C specifications. Having this in places ensures you are properly creating, nesting and closing your tags. It also ensures that you are using correct CSS. Think of a DOCTYPE as our spell checker in Microsoft Word. In Word a spell checker will ensure all content is spelled right and grammatically formed. Likewise, our DOCTYPE ensures all HTML tags are spelled and marked up correctly. Without a correct DOCTYPE, your code and CSS will be rendered incorrectly to all modern browsers. A correct DOCTYPE declaration is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

An incorrect DOCTYPE declaration is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Examples of various DOCTYPES can be found at the following address:

http://alistapart.com/stories/doctype/

Hypertext Markup Language (HTML)

Hypertext Markup Language (HTML) is a markup language used to mark-up text, images, tables, lists, and links which will be rendered and viewed in a browser. This language is a client-side language which has no programming capabilities inherently available. It’s used to provide structure and mark-up different elements (text, images, and tables) on our web page. In the following sections, we’ll see how to create these various elements and common solutions to problem which you’re likely to encounter.

Create the web page

To make our learning experience a bit more intuitive we’ll use PS Pad which is a free download. Follow these steps to download and install:

Using your browser, type the following in the address bar:
- http://www.pspad.com/
Select English at the top
From the left side, select Download
Select the Installer file
From the page you’re re-directed to, left click the Download button
Download to Local Disk (C:)
Once the download is complete, double-click the installer in order to use the program

In PS Pad, close the initial document which is provided and follow these steps to create a new HTML document:

From the main menu, select File>New
In the New file window, select HTML:

New HTML File

Click OK

Currently, PS Pad has our document in quirks mode and has unnecessary meta tags. Follow these steps to correct these problems.

Replacing the DOCTYPE Visit:

http://alistapart.com/stories/doctype/
Highlight HTML Loose
Right click and select copy
Highlight the DOCTYPE inside our file, right click and select Paste

Removing meta tags

Between the opening and closing <head> tag you see this:

Highlight the code and press delete

Continuing, you see this meta tag:

 <meta http-equiv="content-type"  content="text/html; charset=windows-1250">

Highlight the code below

<meta http-equiv="Content-Type"  content="text/html; charset=iso-8859-1" />

Inside PS Pad, highlight the original meta tag, right click and select Paste

Your code should look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD  HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"  content="text/html; charset=iso-8859-1" />
<title></title>
</head>
<body>
</body>
</html>

Follow these steps to save your file:

From the main menu, select File>Save
In the Save As dialog, navigate to your folder on local disk (c:)
In the File name text field type index.html
Click Save

We'll continue by creating our HTML structure in the next page.

top of page

Thank you for visiting Midwest Web Design.net - Come back again soon.

midwest web design

Creating an HTML Web Page

tutorial idea?