ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

Basic HTML Scripting for Beginners

Updated on August 16, 2014
Martin Heeremans profile image

Martin Heeremans is an HTML Professional, Computer Coding Buff and Author of several books.

Geek Speak

Before We Get Started

Like anything that someone would try to learn and master, HTML takes time to fully understand. However, don't be discouraged. By the end of this article, you will create your very own webpage.
Like anything that someone would try to learn and master, HTML takes time to fully understand. However, don't be discouraged. By the end of this article, you will create your very own webpage.

Here's What You Will Learn Today

It is essential that the person reading this understands that website building isn't an overnight process.

This article will teach someone who has absolutely no knowledge of website scripting how to use the most fundamental of all the languages. HTML.

It's for this reason that I don't want to overload the reader. HTML is the basis that the entire language of a website comprises of.

HTML, CSS, PHP and Javascript are all used. The latter adds features like drop-down menu's, contact us forms, polls, tracking visitor views/ stats, website security scripting etc...

Once HTML is understood, the rest of the scripting languages become a lot easier to learn as they all follow the same pattern of scripting.

Don't turn away thinking that these steps are all going to be to hard to understand and that creating your own website is impossible. Because it really isn't. When anything is explained the right way, it really becomes much easier.

Let's begin the first step...

So what is HTML

HTML is an acronym. It's common name is Hyper-Text Mark-Up Language.

The script is written using the ASC (American Standards Code) scripting language.

Let's break that down a bit.

Hyper-Text refers to the scripting method that is being used.

Mark-Up Language is the the extra attributes and elements added to the basic script.

HTML is the standard language, or script, that a website uses to display it's primary content.

The reason we call it a language and not a code is quite straightforward. One system (server/host) is where the code is written/saved.

The browser that you use (Internet Explorer etc..) is, essentially, a translator. It takes that code saved on the server and displays it on your screen by referencing the HTML tags within the document.

So with that in mind, what goes on when we access a website is essentially a conversation between computers.

HTML is used for every website. It must be learnt in order to create a website.

Stuff like titles, paragraphs, tables, ordered lists, images, Links etc, can be considered as the core of language.

Other scripts like CSS are added to the basic code to enhance it's layout and improve its appearance.

Javascripting is used to give more functionality and add extra content.

PHP is not really a script that is used for a website. It's a language that can be entered into a HTML script, but it is used by the server.

HTML scripts, or tags, consist of an element with attributes added to it.

For Illustrative Purposes....

This right now has only been quickly written to illustrate some basic elements, and some attributes. As we're focusing on HTML at the moment, specific rendering and displaying of the webpage is rather limited.
This right now has only been quickly written to illustrate some basic elements, and some attributes. As we're focusing on HTML at the moment, specific rendering and displaying of the webpage is rather limited.

Whats Needed to Create a Website

For a Windows user (all versions)
Notepad
Find it by searching for the term notepad using the start menu search pane

Tell Computers It's an HTML Document

This is the basic setup for any HTML document.
This is the basic setup for any HTML document.

Let's Start by Creating a HTML Document

The differences between an element and attribute will be more easily understood if we get you to first create a basic script.

First you will need to open notepad.

Notepad can easily be found on any windows system by clicking on start and typing notepad into the search pane and hitting enter. Windows will locate the program for you, all you have to do is click on the notepad icon when it's displayed in the search result.

Once opened it's time to set up the document so computers know it's a HTML document. Click on the picture to see an example of what is about to be explained.

As you can see there are 3 main tags in the document. The head section and the html and body sections.

The html section tells all computers that this document is using the HTML scripting language.

The head section consists of tags that, are for the most part, not seen by a visitor. The only tag that a visitor will see is the title tag.

The body section is the area where all the websites data is entered. Tags for paragraphs, titles, pictures, tables, etc... are all entered here.

Did you notice that each section has an opening tag <tag inserted here> (i.e <body>) and a closing tag </tag inserted here> (i.e</body>). This tells the browser that anything placed within those tags is part of that section.

The same rule applies when entering script commands within either the body section or head section. An initial tag will be used to open a sequence as well as a closing tag to tell the browser that a sequence/script command/function has finished.

So you can see the essential first tags, your document should appear like so.

<html>

<head>

</head>

<body>

</body>

</html>

Note; We didn't include the language tag that is used on the example script. The tag is only essential if you plan to make a webpage that the whole world will see, but it is only written in english. The tag is used to tell a search engine that the page is written in English.

Web Scripting Standards

<html> </html>
<head> </head>
<body> </body>
This section is used to tell a computer that the following tags are written using the HTML scripting language.
Meta-data along with the tab title and many other tags are inserted here. Most of it will not be seen by a visitor.
All website tags used to display the websites content are placed within this section.

Heading Tag

Style Tag

Heading Tag and Style Attributes

Now we have all the necessary tags needed to put content between, we can start to build a website!

Let's start your website with a heading tag. The heading tag has a font sizing scheme from 1-6. There is a logical reason for the need for different sized headings.

A more important heading will have a lower number tag. So if the heading tag being used is going to be the title for the page, then the lowest number is used. This will ensure that you will not only see that it's the most important aspect on the page, the scripting tells other computers or browsers the same thing. The lower the number the bigger the font. i.e <h1> </h1> is the highest priority tag - See picture Heading Tag.

Remember, always start any element with the opening tag (in this instance <h1>) enter your information, then end the sequence with a closing tag (in this instance </h1>).

I suppose now that we have a heading for the page, let's add some flare to it. We will use the style tag. <style="background-color:grey;"> - See picture Style Tag.

The style tag lets you add background color changes. It can be used to change colors on any part of the page. Any element can have the attribute added to it.

So if you wanted to change a heading color like we have done in the example, add the attribute to the opening tag, after the <h1 before the >. i.e <h1 style="background-color:grey;">Your Heading</h1>

The same rule applies to change the background color. The style tag gets added with the body tag.

Now you have created a tag, element and attribute, before we show you more scripts it is best to understand exactly what is a tag, attribute and element.

Tag, Element and Attribute Breakdown

Paragraph Tag

Table With Border Tag

Paragraph and Table Tags

As you now have a heading tag for your page lets put a paragraph in. We will use the paragraph tag <p> </p> - See picture Paragraph Tag.

The paragraph tag <p> doesn't have the same hierarchy ordering as the heading tag <h1 - h6>, it is simply the opening tag <p> and the closing tag </p>.

The paragraph, like the heading tag, or any other tag for that matter, can have attributes added to the element.

Just as the heading had its own background color, so too can the paragraph tag. You can insert images, videos, links absolutely anything into the paragraph tag. You can also give it a border using the border tag. <p border="1">your content</p>.

For the website that needs to display information that is best suited for a table, you can use the table tag. See picture Table With Border.

This tag has 3 elements so for a new script writer, it can be tricky. The <table> the <tr> (table row/column tag) and the <td> (table data tag) elements are used.

Here is a quick look at a table with a single column.

<table>

<tr>

<td>information...</td>

<td>information...</td>

</tr>

</table>

The <tr> tag creates the column. To add extra columns wherever you want a new row to start, close off the row you're on using the closing tag </tr>, and create a new row with a fresh <tr> tag. If you prefer a border add the border attribute in the opening table tag. i.e <table border="1">.


Bullet List and Ordered List Tag

Picture and Horizontal Rule Tag

Bullet List, Ordered Lists, Picture and Horizontal Rule Tags

A bullet list is useful if you want to display dot point information about a particular product. Whereas, the ordered list (numbered list) is useful if you need to display information that has to be organised. See picture Bullet List and Ordered List Tag.

Both lists use the same element tag to list product specifics, but use a different opening and closing tag.

A bullet list uses the un-ordered list tag <ul>. An ordered list (numbered list) uses the ordered list tag <ol>.

A bullet list appears as so.

<ul>

<li>product data</li>

<li>product data</li>

</ul>

Whereas an ordered list would go as follows.

<ol>

<li>specific data</li>

<li>specific data</li>

</ol>

Just as this article has pictures, so too can your website. Whether you want them in the body as the background or in a paragraph by itself with a border is entirely up to you.

The tag used is the image source tag <img src="your-images-location">. See Picture and Horizontal Rule Tags.

In the example the image is placed in it's own section using a paragraph tag <p>.

To find an images location on your hard-drive, open up an internet browser and type file:///C:/

Surf through your HDD by clicking on the link. Go back using the back and forward browser buttons.

When you find your picture from a HDD, copy and paste the URL into the tag between the " ".

If you like a picture from a website, go to the the website, right click on the picture and click on copy image URL. Paste that link into the tag appropriately.

The horizontal rule tag is a very handy tag that will add a line, horizontally across the screen. See Picture and Horizontal Rule Tags.

This is only one of few tags that don't have an opening and closing sequence. The tag both opens and closes in the same sequence.

The tag is simply <hr />. Note the space after hr. This space is what tells the browser that the following / will end that tag.

Basic Tags and Elements

Pictures and Background Tags
Paragraphs and HeadingTags
Tables
Bullet Lists and Ordered Lists
Horizontal Rule
Pictures are placed within the body section of the HTML document. <img src="yourimageslocation">
A heading, or title for a paragraph, is inserted using the heading tag. <h1>your heading</h1>
Tables are created by entering the table tag and then listing the table contents using the table data tag. <table> <td>row 1</td> </table>.
To create a bullet list, the unordered tag is used and data is inserted using the list tag. <ul> <li>one</li> <li>two</li> </ul>.
The horizontal rule tag places a vertical line across the screen. The tag opens and closes in the same sequence. <hr />
Backgrounds can be added using the style tag. <style="bacground-color:red;">
Paragraphs are inserted using the paragraph tag. <p>your paragraph here</p>
A table can have a border thickness from 1-5 using the border tag.<table border="1"> <td>row1</td> </table>
An numbered list is created using the ordered list tag. <ol> <li>one</li> <li>two</li> </ol>
The tag is useful to add a visual difference to a webpage.

One More Thing... Save it as an HTML File Too!!!

So, you have done all this work building your first website, let's not forget to save it correctly.

When you have completed your script, save it with whatever name you want to call it, with a .htm or .html prefix at the end of the name (e.g your-file-name.html).

Now this may sound trivial but this is in fact the most important part of the procedure. If you don't save the file with .html or .htm at the end of the filename, it won't open in the browser window.

To locate your website go to your documents folder. The name you saved it with will be there followed by the browsers symbol that is set as the default browser for your system.

Double click on the file to open your webpage. It will open up in your browsers window.

If you would like to make further changes to your website, click on your websites icon in your documents folder once, then right click. In the menu select the "open with" option and choose notepad. Now you can make further changes to your document.

That's it, Well Done!

If you have gotten to this part of the article and have successfully completed your HTML script, well done and congratulations. If you haven't yet given HTML website scripting a go, try making your first script now. You will be surprised at how easy it is and how much fun website scripting can be.

As stated before though, this is the bare basics of HTML.

There are more tags and scripts than you could poke a stick at, so keep on doing what you're doing and you will get there. In the meantime I will continue to add more hubs that will show more HTML features, show you HTML5 scripting and get you ready to learn CSS (cascade style sheeting) and every other script to enhance the look of your website.

How Did You Go?

Did you end up building your own website?

See results

Comments

Submit a Comment

  • WriterJanis profile image

    Janis 3 years ago from California

    You've done a very nice job at explaining things with your step by step instructions.

  • Martin Heeremans profile image
    Author

    Martin Heeremans 3 years ago from Australia

    Thanks for your compliment.

    Did you end up building a website?

  • thumbi7 profile image

    JR Krishna 3 years ago from India

    Good information. Useful for people like me who do not know much about these.

    Thanks for sharing

  • smga22 profile image

    smga22 3 years ago from Dhaka, Bangladesh

    Useful Information. Thanks for sharing this Hub.

Click to Rate This Article