I found an old book in which I have written HTML codes that I used when I got started with web designing. So let me share the most basic codes that everyone should know to get started.
Creating an HTML Page
There are many software's that can be used to create HTML pages. For example using Adobe Dreamviewer you can type and make your webpage easily without having to worry about the code. Dreamviewer will automatically create the code for you. However if you want to learn how to use these codes and create a webpage manually all you need is a basic text editor like Windows Notepad. All you will need to do is to write your code in the text editor and save it as a .html file (example.html). You can then view your webpage by opening your file in a browser or re-edit by opening it with a text editor.
Header
<html>
This tag is used to tell the browser that the following code is HTML. The entire code for the web page is written in between <html> and </html> tags.Note: Almost 90% of the tags needs to be closed when opened. Tags are opened by entering the name in between triangle brackets and they are closed by adding another tag at the end with a ‘/’ followed by the name of the tag. For example: <example> … </example>.
<head>
The head tag is used to access the head of the webpage.<title>
The title tag is used to give the name of the web page or any other description on the title bar of the web page.Example:
<html>
<head>
<title> Jonnytronics Webpage Example </title>
</head>
</html>
![1 1](http://lh4.ggpht.com/-RUD7TreZgWA/UkBmL1kEXMI/AAAAAAAAd4s/RUjkk0F1m80/1_thumb72.png?imgmax=800)
Body
<body>
This tag gives access to the body of the webpage. Almost all tags have different properties and they can be accessed by naming the property inside the tag.Background Colour
Any colour can be used as a background colour on a webpage. This is done by the following property<body bgcolor = “…”>
example: <body bgcolor = “#C0C0C0”> OR <body bgcolor = “Silver”>
The colour can be written in English or in Hexadecimal. Some example colours are given below.
- Aqua - #00FFFF
- Black - #000000
- Blue - #0000FF
- Grey - #808080
- Green - #008000
- Lime - #00FF00
- Maroon - #800000
- Navy - #000080
- Olive - #808000
- Purple - #800080
- Red -#FF0000
- Silver - #C0C0C0
- Teal - #008080
- White - #FFFFFF
- Yellow - #FFFF00
Background Picture
<body background = “….jpg”>Use this tag to add a picture as the background for your web page.
Note: The address to the picture can be given relevant to the location of the webpage or the full address to the image can be given.
Text Colour
The text colour for a webpage can be given by the following tag. The colour can can be chosen by typing the name of the colour or its hexadecimal value as in the table above.<body text = “…”>
Page Margin
The page margin for a webpage can be set by the following tag. The amount of space for the margin is given by pixels or a percentage of the webpage.<body leftmargin = “…”>
Example:
<html>
<head>
<title> Jonnytronics Webpage Example </title>
</head>
<body bgcolor = "Blue" text = "White", leftmargin = "100">
This is the body of the web page </body>
</html>
![2 2](http://lh4.ggpht.com/--DFilXTidN4/UkBmNBVDDyI/AAAAAAAAd48/W4Id1Rahvyc/2_thumb2.png?imgmax=800)
Headings
There are 6 different headings in html. <h1> is that first heading (or the heading with the largest font) while <h6> is the smallest size.- <h1> - 36px
- <h2> - 24px
- <h3> - 21px
- <h4> - 18px
- <h5> - 16px
- <h6> - 14px
For example:
<h1 align = “center”, color = “blue”> Jonnytronics </h1>
It is important to note that when the heading tag is closed, the browser will automatically move to the next like. Therefore there is no need to use a tag to move to the next line.
Line Break
This tag is similar to pressing the enter key when writing a normal document. Using this tag you can move to the next line and continue typingThe tag is written as <br> and there is no need to close this tag.
Paragraph
It is possible to write a continuous paragraph inside the tags <p> and </p>. Once the paragraph is grouped in between the tag properties can be given to the entire paragraph as a whole.Comments
Just as in any other programming language, HTML too has comments. anything written inside the comment tags will not appear in the webpage. They are mainly used to give the reader of the bare code to understand what is going on in that section.
They can be written as <!--- your comment --->Example:
<html>
<head> <title> Jonnytronics Webpage Example </title> </head>
<body bgcolor = "Blue" text = "White", leftmargin = "100">
This is the body of the web page
<h1 align = "left"> Heading 1 </h1>
<h2 align = "center"> Heading 2 </h2>
<h3 align = "right"> Heading 3 </h3>
<h4> Heading 4 </h4>
<p align = "right">This is a paragraph. The entire paragraph is right justified. Any properties given to the paragraph tag will affect the entire paragraph </p>
This is not written in a paragraph. <br> <!--- This does not appear in the web page --->
<br> Line break
</body>
</html>
![3 3](http://lh5.ggpht.com/-x-fF3SN1Bd8/UkBmOSE7a4I/AAAAAAAAd5M/fKK5YIM5LhI/3_thumb%25255B2%25255D.png?imgmax=800)
Horizontal Line
The <hr> code draws a horizontal line across the webpage. The tag is like the <br> tag, it does not have a close tag.This properties of this tag can be controlled by align, colour, width, size (this is thickness), etc. The width can be given in pixels or as a percentage of the webpage. The size is the thickness of the line and it is given in pixels.
<hr align = "center", color = "red", size = "1", width = "60%">
Formatting
<font>
The font tag can be used to change the font of the text enclosed if the font is different from the font used for the entire webpage.The properties used for this font are: face, colour and size.
<font face = "Times new roman", color = "green, size = "35"> Example </font>
Other Formatting
- <b> or <strong> - Text enclosed becomes bold
- <big> - Text is big. If the tag is repeatedly used inside each other the size becomes bigger.
- <small> - Similar to the <big> tag but makes the size smaller instead
- <i> or <em> - Text enclosed becomes italic
- <u> - Text enclosed becomes underlined
- <s> or <strike> - Text enclosed are strike through
- <sup> - Text enclosed are superscript
- <sub> - Text enclosed are subscript
- <center> - Text enclosed are centred
Division Tag
This tag is used to create different segments on the webpage. The tag is written as <div>. It accepts only position attribute to position itself on the webpage.Anchor
An anchor tag is used to create a link within another word. the tag is written as <a> and it accepts the attribute href to embed the link<a href = "www.johnsamarasinghe.blogspot.co.uk"> Click here to go to my website </a>
Frames
Frames are used to divide the webpage to view 2 or more webpages. The area is separated by <frameset> tag. Using this tag the number and the size of columns can be set in percentages using the attribute cols. The number of columns do not have to be stated. The width of all the columns can be written one after the other.
Each individual frame is given the source by adding the <frame> tag within the <frameset> tag. The <frame> tag does not have to be closed. It accepts the attribute src to point to the webpage that needs to be displayed. Please see the example to understand the structure
<frameset cols="30%,50%,20%">
<!---This means there are 3 columns--->
<frame src="example1.html">
<frame src="example2.html">
<frame src="example3.html">
</frameset>
<frameset cols="30%,50%,20%">
<!---This means there are 3 columns--->
<frame src="example1.html">
<frame src="example2.html">
<frame src="example3.html">
</frameset>
The <frame> tag also accepts other attributes in addition to src.
- name – name of the frame
- scrolling – yes, no or auto
- frameborder – 1 or 0
- marginheight – height of top and bottom margins in pixels
- marginwidth – width of left and right margins in pixels
![5 5](http://lh5.ggpht.com/-tmhahpkIap0/UkBmQeannvI/AAAAAAAAd5c/cOuUFLnRwHs/5_thumb%25255B2%25255D.png?imgmax=800)
Media
Images
Images are added using the <img> tag. There is no need to close this tag. This tag accepts the following attributes- src – location or image
- width – width of image
- height - height of image
- border – 1 or 0 for presence of border
- align - align of image
- vspace- vertical space
- hspace - horizontal space
- alt – alternative text
<img src = "example.jpg", width = "180", height = "200", border = "1", align = "right", vspace = "0", hspace = "0", alt = "Example Image">
Video
Video can also be added using the <img> tag. It has the following attributes- dysrc – location of video
- width and height
- border
- align
- vspace and hspace
- start - set opening method as – File Open / Mouse Over
- loop – Number of times to repeat
Embed
The <embed> tag can be used to embed flash files in to the webpage.<object>
<embed src = "example.swf", height = "200", width = "200", alt = "Example Embed"> </embed>
</object>
Lists
Unordered lists
An unordered list is a list that has bullet points. This list is started by the tag <ul>. It accepts the attribute ‘type’ to insert the shape of the bullet point. The types are: square, circle, triangle and star
Once the list is started, each individual item on the list can be added by the <li> tag. This tag and the <ul> tag needs to be closed. It is also possible to change the bullet point in the middle of the list by adding the type attribute specific list item. The following item will return to the original type of the list.
<ul type = "square">
<li> Tea </li>
<li> Coffee </li>
<li> Water </li>
<li type = "circle"> Jug </li>
<li> Cup </li>
</ul>
<ul type = "square">
<li> Tea </li>
<li> Coffee </li>
<li> Water </li>
<li type = "circle"> Jug </li>
<li> Cup </li>
</ul>
![4 4](http://lh5.ggpht.com/-no5llHu-f2Y/UkBmRjVSYLI/AAAAAAAAd5s/EXylrS9t7Jg/4_thumb%25255B2%25255D.png?imgmax=800)
Ordered lists
An ordered list is a numbered list. It has the tag <ol> and accepts the attributes type and start. Start is the starting point of the numbered list . The type can be given as the following:
- 1 - means 1, 2, 3, 4
- A - means A, B, C, D
- a - means a, b, c, d
- I - means I, II, III, IV
- i - means i, ii, iii, iv
<ol type= "A", start = "2">
<li> Tea </li>
<li> Coffee </li>
<li value = "10"> Water </li>
<li> Jug </li>
<li type = "1"> Cup </li>
</ol>
![6 6](http://lh6.ggpht.com/-cHNRjgKsNXM/UkBmS8iOAlI/AAAAAAAAd58/-_Rqn-Cr600/6_thumb%25255B2%25255D.png?imgmax=800)
Definition list
The tag for a definition list is <dl>. The definition terms within the definition are given by <dt> and the definition of the definition term is given by <dd>.
<dl>
<dt> Tea </dt>
<dd> A drink </dd>
<dt> Cake </dt>
<dd> A desert </dd> </dl>
<dl>
<dt> Tea </dt>
<dd> A drink </dd>
<dt> Cake </dt>
<dd> A desert </dd> </dl>
![7 7](http://lh4.ggpht.com/-5zw6AHcUf50/UkBmT-pAqBI/AAAAAAAAd6I/3ofZrZXFbbg/7_thumb%25255B2%25255D.png?imgmax=800)
Tables
A table is started by the <table> tag. This tag accepts the following attributes which are self explanatory or defined above.- width and height (pixels or percentage)
- border (1 or 0)
- bordercolor
- cell padding
- cell spacing
- align
- valign
- backgroundcolor
- background (image)
A table row is created by the <tr> tag and it accepts the attribute height. Once a table row is created, it can be filled with table columns <td> which accepts the attribute width. For each column the data can be added in between their tags.
<html>
<head>
<title> Jonnytronics Webpage Example </title>
</head>
<body>
<table align = "center", width = "60%", cellpadding = "0", cellspacing = "1" border = "1">
<tr>
<td align = "center"> Name </td>
<td align = "center"> Age </td> </tr>
<tr>
<td> John </td>
<td> 20 </td> </tr>
<tr>
<td> Matthew </td>
<td> 23 </td> </tr>
</table>
</body> </html>
<html>
<head>
<title> Jonnytronics Webpage Example </title>
</head>
<body>
<table align = "center", width = "60%", cellpadding = "0", cellspacing = "1" border = "1">
<tr>
<td align = "center"> Name </td>
<td align = "center"> Age </td> </tr>
<tr>
<td> John </td>
<td> 20 </td> </tr>
<tr>
<td> Matthew </td>
<td> 23 </td> </tr>
</table>
</body> </html>
![8 8](http://lh4.ggpht.com/--lOluXRSeQg/UkBmVOxDmpI/AAAAAAAAd6c/zTAe8cdT-Z8/8_thumb%25255B2%25255D.png?imgmax=800)
Conclusion
I hope this small tutorial helped you in anyway if you are a complete beginner in HTML. If there are any mistakes that I may have mentioned in this article please let me know and I will immediately correct them. If you need advanced help please refer to other websites such as w3schools (http://www.w3schools.com/html/default.asp).
Thank you for reading