ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

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

Updated on March 11, 2014

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

Comments

    0 of 8192 characters used
    Post Comment

    No comments yet.

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://hubpages.com/privacy-policy#gdpr

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)