A Web Tutorial Series: Creating Your Own Presence on the World Wide Web With Little or No Prior Experience or Costs

Intent of This First Tutorial is to Help You Get Started in as Little as an Hour

For someone who has no experience with computer programming consider the following requirements following set of questions and if you can answer yes to them then your ready to start:

  • Do you have access to a computer with internet access?

Before you answer NO to this question consider the following. There are many public sites such as local libraries and colleges and universities are well equipped and ready to serve the public. Stop by your public library or local college and ask about there rules. Some have time limits of perhaps an hour a day.if they have a large user community. Others have more generous lime limits based on availability of resources.

  • Can you type a little and by this can you at least pick out the keys by sight?
  • Do you have a fair amount of patience to learn some technical knowledge and terminology?
  • Are you make an effort to follow explicit but simple instructions?
  • Are you patient enough not to immediately expect a brilliant and shiny web site with animation, 3-D graphics, and music? You can get to that but it does require time and effort and as in most endeavors, the greater the effort, the greater the reward.

If you can answer, YES, and if you are reading this read on as to how you can build a simple webpage you can view from your machine in less than hour. It really is that easy to get started.

First a Little Terminology

You are obviously viewing this tutorial with a browser . There are a number of browsers available to use. The only obstacle you may face in accessing a particular one is that if you are using a public resource you may be as to what the IT (Information Technology) team which supports the institution has chosen to support. If you are on your own machine it may have been configured to have one or more browsers installed. For computers with the Windows operating system installed this will most likely be Internet Explorer, but there are others including: Google Chrome, Foxfire, Opera, Torch and Safari.. For Apple machines Safari has been the preferred browser but i Apple based versions of Chrome and Foxfire are available. Different browsers each have their feature pros and cons . If you are working on you own personal machine you may want to consider downloading several of them and see which you prefer.

The second thing you will need is an editor.to input text and formatting commands. The simplest Windows editor is Notepad and there is a free downloadable editor, Notepad++ which has some very nice features and is worth the time and effort to download it to your own machine.

The only investment that those reading this who will be making use of free resources will be in having to make is an investment in a USB Flash drive. They are relatively inexpensive and a 4GB (pronounced "gig") would be more than sufficient for creating web pages

The final term that we will be working on with this tutorial is HTML, which is an acronym for HyperTextMarkUp language. Other resources and their use such as scripting and programming language (e.g. PHP, JAVA) and databases (SQL) will be cover later down the path.

A Scenario: Creating Your First Web Page

Let's build your first web page and assume that you would like to put this type of information out to your website to keep friends and family aware of what you are doing and perhaps post some pictures (we'll get to pictures a little later).

I used Notepad to create two examples (contained int he snapshots)of what would be displayed in a browser. The first example mimics your text but the formatting is not perhaps what you would expect.

The second example, I changed font and style, and it did not display as entered, for reasons which will be explained here.

The third example created with OpenOffice where the text color was changed to red looks completely garbled.

Several things to note:

  • the first example demonstrates the procedure for creating a web page with plain text, but the browser did not "understand" how it should be displayed and used its "best guess" based on default parameters.set for the browser.
  • the second example with the change of fornt and style wasn't understood by the browser at all.
  • in the third example, OpenOffice (or Microsoft Word) embeds its own formatting elements which are hidden from view when you are working with the document in that particular type of product..

Although it was not emphasized, all documents to be displayed in a browser should be named <name>.html, where html is the file type.

The second thing is that html files cannot be created with word processing products such as Word or OpenOffice because of their "hidden formatting elements.

Example of a First Web Page

This is an example of what we typed in to the Notepad editor.
This is an example of what we typed in to the Notepad editor.
Doesn't  to pretty. It's not formatted as it was typed.
Doesn't to pretty. It's not formatted as it was typed.

Let's Try Something to Make it Look Pretty!

We changed the formatting options in the text.
We changed the formatting options in the text.
The formatting didn't take!
The formatting didn't take!

A Third Example With Color - Something is Very Wrong!

This file was created in OpenOffice and the color was chosen to be red.
This file was created in OpenOffice and the color was chosen to be red.
This is what the browser displayed.
This is what the browser displayed.

HTML Markup Language

Pages for display must contain proper code to achieve proper display. Thus, your webpages which you will be creating must must contain special instructions which are interpreted by the browser so that the page displays as intended.. These instructions are referred to as markup tags. Generally speaking, with few exceptions, the markup tags come in pairs. One pair to signal the beginning of an action on some text and one to signal the end of the action to be performed. HTML is the heart of creating layout for content while another product CSS which will be cover in details of content formatting.

We'll look at one such type of HTML tags , heading tags in the next example before we wrap-up this session.

HTML Heading Tags

There are six heading tags; h1 thruough h6. Note that the beginning heading tags is enclosed in carets while the ending tag has the carets and a slash .The following snapshot illustrates the result of using the folling text in a Notepad created HTML document:

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>.

and then entering the html file name on the browser's address line.

Example of Using HTML Heading Tags

Heading tags come in six "flavors".
Heading tags come in six "flavors".

HTML 5 Is the Real Thing!

HTML  has a number of related technologies such as CSS3, WebGl, and  MathML
HTML has a number of related technologies such as CSS3, WebGl, and MathML

Wrap Up and What's Next

In this tutorial we discussed the fact (and the procedure) of creating a very simple plain text file. This file was created without any HTML elements. It is not very effective however in creating stellar web pages The procedures in creation and use are not really much different if you condider the file as a "black box".

HTML is based on a very simple system of tagging text, including pictures, but it must be noted as you learn more about HTML, is is as much as art involved as science.

Using a local resource with free software is a rather painless way to start utiliize the web for both social and professional reasons.

The next tutorial we will pick up at the discussion of free web services. The positive part is they are either free or with additional priced options still rather low cost to achieve a web presence. The downside of those services is that without some elementary knowledge which we will cover over the next dozen or so tutorials trying to use thiem without some rudimentary can lead to frustration and disappointment.

Achieving a Presence on Web Promotes Businesss and Social Interaction

Interactions on the web can promote your business and social life.
Interactions on the web can promote your business and social life.

Please Rate This Article Based on How it Meets Your Needs

Cast your vote for Content of This Article

More by this Author


No comments yet.

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working