- Internet & the Web
Basic HTML Scripting for Beginners
Before We Get Started
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.
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.
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....
Whats Needed to Create a Website
For a Windows user (all versions)
Find it by searching for the term notepad using the start menu search pane
Tell Computers It's an 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.
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
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 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
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.
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.
Whereas an ordered list would go as follows.
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
Bullet Lists and Ordered Lists
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.