A basic website can be designed by using HyperText Markup Language (HTML). The scripts can be written in Notepad or a text document depending on the operating system which you use .The very basic tools for creating a website start with the use of HTML tags and HTML elements. The former are often used to pass on information about the unit of the content and the latter ones are used to format tools for the webpage. While coding, the HTML attributes and values are used to provide information like placement, height etc. for the content. In addition to these, one can use color tags, picture tags and HTML division tags to create a vivid webpage.
When creating a website, many people often choose to get a web designer for help. However, there are simple ways to learn how to make a basic website yourself and they will be explained in this article.
What is HTML?
To create a website, you will need to learn the basics of HTML. HTML is the acronym for HyperText Markup Language, which is the programming language used to create hypertext documents on the World Wide Web. The language is made up of a set of codes and symbols that will generate text, images, sounds, frames and animation on your browser pages.
Two common ways to start your website are:
Creating your own codes in a simple text editor and saving them as a .htm file
Using HTML generator software
Requirements
For those using Windows, start by opening a new Notepad document.
For those running MAC, open a new SimpleText document.
For OSX users, open TextEdit and make the following changes:
1. Open your "Format" menu and choose "Plain Text"
2. Under the "Text Edit" menu, open "Preferences" window and choose the option "Ignore rich text commands in HTML files".
Example 1:
Once you have your blank document, you can start by typing in:
<html>
<head>
<title>This is the title of your page</title>
</head>
<body>
This is where all your contents will appear
</body>
</html>
Note:
1. Always save your documents with a .htm or html extension to display them in your web browser. (e.g. index.htm).
2. To edit your source document, select the "View" option on your toolbar in the browser window and select "Source".
3. Don't forget to save every change made to your document.
4. To view the modifications made to the document in the browser window, refresh the page by using the F5 key.
HTML Tags
An HTML tag is defined as a markup that is added into an HTML document to give more information about the content. An HTML tag is put in between brackets and needs a closing tag. (e.g. <html> </html>).
HTML Elements
Elements are markup tags used to format some sections of a web page. An example of an HTML element is the <b> tag, used to bold the text displayed in the browser.
<html> is used to tell your browser that the file is made up of HTML-coded data. </html> is used at the very end of the document to tell your browser that the HTML contents end there.
<head> contains the first part of the document and is where the title of your browser page will be found. It can also contain the commands used to format the display of your browser (e.g. CSS calls). </head> is then used to end this section. This part will not be displayed in your browser.
<title> will be used to label your website. </title> is hence used to indicate the end of that command.
<body> defines all the content that will be displayed in your browser.
Basic HTML Tags to Remember
Headings
Headings are used to indicate the subject of the following content in your web page. In HTML, they can vary in size, from <h1> to <h6>. Remember that <h1> will indicate the largest heading and <h6> the smallest. Also, a heading has an opening tag <h2> and a closing tag </h2>.
<h1>All about HTML</h1>
Paragraphs
Paragraphs are used to separate text blocks in your web page. In HTML, they are defined with the <p> tag. A paragraph will have an opening tag <p> and a closing tag </p>.
<p>This section has defined HTML tags</p>
Line Breaks
In HTML, line breaks DO NOT require a closing tag. Hence, they are simply defined with the <br /> tag.
<br />This section has defined HTML tags
Comments
Comments are inserted in an HTML page to locate the different sections on a webpage by its designer. They are defined with the <!--- --> tag. Comment tags are not displayed in the browser, and can hence be used anywhere in the document without affecting the format of the webpage.
<!---Content starts here --> <!---End of contents-->
Example 2
<!---Webpage starts here -->
<html>
<head>
<title>All About HTML</title>
</head>
<!---Content starts here -->
<body>
<h1> What is HTML?</h1>
<p> HTML is the acronym for HyperText Markup Language </p>
</body>
<!---Content ends here -->
</html>
<!---Webpage ends here -->
HTML Attributes and Values
HTML Attributes are information added to the elements and used to include a particular characteristic to the HTML elements. HTML attributes are always written together with a value (e.g. name="value") and are put at the start tag of an HTML element.
For example, if you want the heading to be placed at the center of your page instead of being displayed on the left by default, you can add the align attribute to the tag:
<h1 align="center">
The value will give the specific information about the attribute. A value is commonly written with the equal sign and is enclosed by quotation marks. (e.g. name="value")
Example 3
<!---Webpage starts here -->
<html>
<head>
<title>All About HTML</title>
</head>
<!---Content starts here -->
<body>
<h1 align="center">What is HTML?</h1>
<p> HTML is the acronym for HyperText Markup Language </p>
</body>
<!---Content ends here -->
</html>
<!---Webpage ends here -->
Color Tags
Color tags allow you to modify the color of the text that is displayed in the browser window. <BODY TEXT="blue"> is an example on how to modify the text color if you wish to do so.
In HTML, you can also use color codes to obtain specific colors by using hexadecimal codes. So called hexadecimal triplets correspond to the colors red, green and blue (RGB). Hence, the color tag in hexadecimal will look something like <BODY TEXT="#000258">. You can get the color codes and names by following this link: http://www.computerhope.com/htmcolor.htm
You can also use color tags to modify the background color of your website by adding the BGCOLOR attribute. Hence, <BODY BGCOLOR="#000258"> will change the background color from its default white.
Example 4
<!---Webpage starts here -->
<html>
<head>
<title>All About HTML</title>
</head>
<!---Content starts here -->
<body bgcolor= "#808080">
<body text="#ffffff">.
<h1 align="center"> What is HTML?</h1>
<p> HTML is the acronym for HyperText Markup Language </p>
</body>
<!---Content ends here -->
</html>
<!---Webpage ends here -->
Note:
1. It is advisable not to choose striking colors like yellow or pink for your text as these colors tend to be disturbing for the eyes
2. Also, try to use a maximum of 4 slightly matching color tones that correspond to the atmosphere of your website for a better harmonizing result.
3. Do not make awkward color matches like pink text on a blue background for formal websites as it will look odd.
Text Formatting
Text formatting tags allow you to modify your text display in the browser window. For example, to bold a text, you can use the <b> tag. (e.g. <b> This text will have a bold font </b>). Below is the list of the common text formatting tags that you can use to alter your text display:
1. Bold Tag
<b>This text will be in bold</b>
2. Italic Tag
<i>This text will be in italic</i>
3. Underline Tag
<u>This text will be underlined</u>
4. Emphasize Tag
<em>This will emphasize your text</em>
5. Strong Tag
<strong>This text will be strong</strong>
6. Big Tag
<big> This will define big text</big>
7. Small Tag
<small> This will define small text</small>
8. Subscript Tag
<sub>This text will be subscripted</sub>
9. Superscript Tag
<sup>This text will be superscripted</sup>
10. Center Tag
<center> This text will be centered</center>
11. Left Tag
<left>This text will display in the left hand side of the screen</left>
12. Right Tag
<right>This text will display in the right hand side of the screen</right>
13. Unordered List Tag
<ul>
<li>This is an unordered list</li>
<li>This is an unordered list</li>
</ul>
14. Ordered List Tag
<ol>
<li>This is number 1 on my list</li>
<li>This is number 2 on my list</li>
</ol>
Note:
1. These tags can also be combined. If you want an underlined bold text, you can use <u><b>This text will be bold and underlined</b></u>
2. However, always close the first tag that you have opened last. In the above example, the <u> has been opened FIRST, before the <b> tag, but has been closed LAST.
Example 5
<!---Webpage starts here -->
<html>
<head>
<title>All About HTML</title>
</head>
<!---Content starts here -->
<body bgcolor= "#808080">
<body text="#ffffff">.
<h1 align="center"> What is HTML?</h1>
<p><b>HTML is the acronym for HyperText Markup Language </b></p>
<i>The language is made up of a set of codes and symbols that will generate:</i>
<ul>
<li> text, </li>
<li> images,</li>
<li> sounds,</li>
<li> frames </li>
<li> animation on your browser pages. </li>
</ul>
<br />
Two common ways to start your website are either:
<ol>
<li><u>to create your own codes in a simple text editor and save them as a .htm file. or </u></li>
<li><u>use a HTML generator software.</u></li>
</ol>
</body>
<!---Content ends here -->
</html>
<!---Webpage ends here -->
HTML Division Tags
Horizontal Rule
Horizontal rules are used to divide or subdivide sections of your webpage. The <hr> tag is used to create a horizontal line and can be altered to create different types of lines by modifying their size, color or width.
E.g. <hr width="75%" size="2" align="center"> or <hr color="#ffffff">
Solid Line
The <hr noshade> tag is used to create a solid line. It alters slightly from the horizontal rule tag as it produces the line without the 3D cutout generated by the <hr> tag.
Example 6
<!---Webpage starts here -->
<html>
<head>
<title>All About HTML</title>
</head>
<!---Content starts here -->
<body bgcolor= "#808080">
<body text="#ffffff">.
<h1 align="center"> What is HTML?</h1>
<hr width="100%" size="2" align="center" color="#ffffff">
<p><b>HTML is the acronym for HyperText Markup Language </b></p>
<i>The language is made up of a set of codes and symbols that will generate:</i>
<ul>
<li> text, </li>
<li> images,</li>
<li> sounds,</li>
<li> frames </li>
<li> animation on your browser pages. </li>
</ul>
<br />
<hr noshade size="5">
Two common ways to start your website are either:
<ol>
<li><u>to create your own codes in a simple text editor and save them as a .htm file. or </u></li>
<li><u>use a HTML generator software.</u></li>
</ol>
</body>
<!---Content ends here -->
</html>
<!---Webpage ends here -->
Image Tags
HTML documents enable you to insert images by using image tags. You can either browse an image from an online URL or from your own computer. The image tag <img src> stands for "image source"; hence, the image path should be defined after the attribute. If the image is found in the same folder as your source document, there is no need for you to enter the whole path directory.
E.g. <img src = "http://www.theodora.com/gif4/html_colors.gif">
or <img src = "colorcode.gif"> or <img src = "colorcode.jpg">
Alignment Tag
Once more, you can use the ALIGN attribute to display the image either in the center, right-hand side or left-hand side of your browser.
E.g.1
<img src = "http://www.theodora.com/gif4/html_colors.gif" align="center">
Note: However, it might happen that your browser does not support this tag. You can hence use the <center> tag just before the image tag to center your image in the browser.
E.g.2
<center><img src = "http://www.theodora.com/gif4/html_colors.gif"></center>
Image Size
The size of your displayed image can be modified by using the WIDTH and HEIGHT attribute. You can either use percentage or the pixels to size your image.
E.g.1
<img src = "http://www.theodora.com/gif4/html_colors.gif "width="50%" height="50%">
E.g.2
<img src = "http://www.theodora.com/gif4/html_colors.gif "width="200px" height="600px">
Image Border
If you want to insert a border to your image, you can use the BORDER attribute to do so.
E.g.
<img src = "http://www.theodora.com/gif4/html_colors.gif " border="5">
Runaround Space
The runaround space refers to the space gap around the image. This is a very useful tag when you have text around your picture. It is defined using the VSPACE attribute for the top and bottom sides and HSPACE attribute is used for the left and right sides.
E.g.
<img src = "http://www.theodora.com/gif4/html_colors.gif " vspace="5" hspace="5>
Alt Attribute
The Alt attribute labels the displayed image when the mouse is rolled over it. Hence, if for some reason, the browser cannot display the image, the user can still know what image has been displayed at this specific place.
<img src = "http://www.theodora.com/gif4/html_colors.gif " alt="hexadecimal color codes">
Example 7
<!---Webpage starts here -->
<html>
<head>
<title>All About HTML</title>
</head>
<!---Content starts here -->
<body bgcolor= "#808080">
<body text="#ffffff">.
<h1 align="center"> What is HTML?</h1>
<hr width="100%" size="2" align="center" color="#ffffff">
<p><b>HTML is the acronym for HyperText Markup Language </b></p>
<i>The language is made up of a set of codes and symbols that will generate:</i>
<ul>
<li> text, </li>
<li> images,</li>
<li> sounds,</li>
<li> frames </li>
<li> animation on your browser pages. </li>
</ul>
<br />
Two common ways to start your website are either:
<ol>
<li><u>to create your own codes in a simple text editor and save them as a .htm file. or </u></li>
<li><u>use a HTML generator software.</u></li>
</ol>
<hr noshade size="5">
<h2>Color Codes</h2>
<p>You can use hexadecimal color codes provided by Theodora to create your own website atmosphere</p>
<img src = http://www.theodora.com/gif4/html_colors.gif vspace="10" hspace="10" alt="Hexadecimal Color Codes">
This is the example that you have with the vspace and hspace attribute
</body>
<!---Content ends here -->
</html>
<!---Webpage ends here -->
Linking Tags
In HTML, linking tags are used to jump from one section of the page to another or from one page to another. They are called Internal Links if they allow you to jump from one section or your own website's page to another and External Link when they open up a new browser window from another website. The major advantage of linking tags is that they allow you to create a dynamic website instead of creating a scrolling webpage.
External Link
<a href= "http://www.webaddress.com/">Web Address Link<a/> will display the "Web Address Link" as a hyperlink in your webpage and when the user will click on the text, it will load the page www.webaddress.com
Internal Link
There are two specific ways to insert an internal link:
1. To jump from the current page to another page on the same website
2. To jump from the current section of the page to another section on the same page.
To be able to jump from one section to another, you should first give a name to the section so that the tag can locate it when it is being called. For example, if the section concerning HTML Links has to be inserted in the upper section of the webpage, just above the "HTML Links" heading, insert the tag <a name="links">. The "links" value will refer to the section that has to be located; hence if a section of your webpage is based on cats, insert the tag <a name="cats"> just above the heading for cats.
After this process, you should also insert the link from which you want to jump. In this example, if you want to jump from the top of the page to the location of "HTML Links" found at the bottom part of the page, insert <a href="#links">Linking Tags</a>. The hyperlinked text "Linking Tags" will appear and when the user clicks on it, they will jump from their current location to the indicated section.
Example 8
<!---Webpage starts here -->
<html>
<head>
<title>All About HTML</title>
</head>
<!---Content starts here -->
<body bgcolor= "#808080">
<body text="#ffffff">
<a href="#color">Color Codes</a>
<br />
<a href="#links">Linking Tags</a>
<h1 align="center"> What is HTML?</h1>
<hr width="100%" size="2" align="center" color="#ffffff">
<p><b>HTML is the acronym for HyperText Markup Language </b></p>
<i>The language is made up of a set of codes and symbols that will generate:</i>
<ul>
<li> text, </li>
<li> images,</li>
<li> sounds,</li>
<li> frames </li>
<li> animation on your browser pages. </li>
</ul>
<br />
Two common ways to start your website are either:
<ol>
<li><u>to create your own codes in a simple text editor and save them as a .htm file. or </u></li>
<li><u>use a HTML generator software.</u></li>
</ol>
<hr noshade size="5">
<h2>Color Codes</h2>
<a name="color">
<p>You can use hexadecimal color codes provided by Theodora to create your own website atmosphere</p>
<img src = http://www.theodora.com/gif4/html_colors.gif vspace="10" hspace="10" alt="Hexadecimal Color Codes">
This is the example that you have with the vspace and hspace attribute
<br />You can find a useful to visit Microsoft's website by clicking on this link<a href= "http://www.microsoft.com/"> Microsoft </a>
<hr noshade size="5">
<a name="links">
<h2>Linking Tags</h2>
<br /> This section will discuss about the importance of Linking tags on your website.
</body>
<!---Content ends here -->
</html>
<!---Webpage ends here -->
Note:
These are only examples on how you can make use of the linking tags. You can of course alter their placement to make your website more user-friendly and attractive.
Target Window
The target window will load the linked page in another browser window so that the user is able to stay on your website's current page and view the hyperlinked address in another browser.
<a href= "http://www.webaddress.com/" target= "_blank">Web Address Link<a/>
Table Tags
Inserting tables in your website can be very useful to display the information in an orderly way. It will also allow you to handle your text and graphics more precisely.
The opening tag <table> is used to tell your browser that the table in the page starts there and ends with the </table> tag. You can also modify the color, size and border size of your table.
The table's size can be altered by using the <table width="0" height="0"> tag. You can either make use of the pixels or the percentage to change the size of the table.
You can make use of the tag <table border ="0"> for example to make an invisible border in your browser.
The <table cellpadding="0"> tag is used to make a space gap between the text and the inner line of the table's border.
The <table cellspacing="0"> tag is used to insert a space gap between the inner and outer line of the table's borders.
A table is made up of cells that are defined by the columns and rows within the table. A cell will be the space where your contents will be inserted. The column tag is defined as the <td> and </td> tags and the rows are defined as the <tr> and </tr> tags. To modify the cell width, you can use the <td width = "0"> tag. The size can be either set in the percentage or in pixel.
You can also align your rows and columns by adding the ALIGN attribute in your tags. Hence, to align a particular row, for example, insert the tag <tr align="top"> and to align a column, insert the tag <td align="center">
To align your cell, you can use the attribute VALIGN. <td align="center" valign="top"> will place the cell to the upper center of your page.
To span a column, you can make use of the tag <td colspan="1"> to set the number of columns the cell should span. Note that the default value is set to 1.
Also, to span a cell to a number of rows, use the <td rowspan="0"> tag.
Example 9
<!---Webpage starts here -->
<html>
<head>
<title>All About HTML</title>
</head>
<!---Content starts here -->
<body bgcolor= "#808080">
<body text="#ffffff">
<a href="#color">Color Codes</a>
<br />
<a href="#table">Table Tags</a>
<h1 align="center"> What is HTML?</h1>
<!---Your first table starts here -->
<table border="1">
<td width="1000">
<p><b>HTML is the acronym for HyperText Markup Language </b></p>
<i>The language is made up of a set of codes and symbols that will generate:</i>
<ul>
<li> text, </li>
<li> images,</li>
<li> sounds,</li>
<li> frames </li>
<li> animation on your browser pages. </li>
</ul>
<br />
Two common ways to start your website are either:
<ol>
<li><u>to create your own codes in a simple text editor and save them as a .htm file. or </u></li>
<li><u>use a HTML generator software.</u></li>
</ol>
</td>
</table>
<!---Your first table ends here -->
<h2>Color Codes</h2>
<!---Your second table starts here -->
<table border="0">
<td width="500">
<img src = http://www.theodora.com/gif4/html_colors.gif vspace="10" hspace="10" alt="Hexadecimal Color Codes">
<a name="color">
<td align="right" valign="top">
<p>You can use Hexadecimal Color Codes provided by Theodora to create your own website atmosphere. </p>More text can be added here. <p>More text can be added here.</p>More text can be added here.<p>More text can be added here.</p>More text can be added here.</p>
</td>
</td>
</table>
<!---Your second table ends here -->
<a name="table">
<h2>Table tags</h2>
This section will give you more details about table tags
<p>
<!---Your third table starts here -->
<table border="2" bordercolor="#ffffff" cellpadding="1" cellspacing="2" width="70%" valign="middle" align="center">
<th width="100%" colspan="3" bgcolor="red">Heading</th><tr>
<td colspan="3" height="50" align="center">
This is another part of the content
</td>
</tr>
<tr>
<td align="center" bgcolor="red"><i>Column 1</i></td><td align="center" bgcolor="red"><i>Column 2</i></td><td align="center" bgcolor="red"><i>Column 3</i></td></tr>
<tr>
<td rowspan="4" width="33%" align="center" bgcolor="red"> Cell Spanning in 3 Rows (2nd and 3rd merged)</td>
<td rowspan="3" width="33%" align="center" bgcolor="red"> Cell Spanning in 2 Rows (1st and 2nd Cell merged)</td>
<td width="33%" align="center" bgcolor="red">1st Cell</td>
</tr>
<td width="33%" align="center" bgcolor="red">2nd Cell</td>
</tr>
<tr>
<td width="33%" align="center" bgcolor="red">3rd Cell</td>
</tr>
<tr>
<td width="33%" align="center" bgcolor="red">3rd Cell</td><td width="33%" align="center" bgcolor="red"> 4th Cell</td>
</tr>
</table>
<!---Your third table ends here -->
</body>
<!---Content ends here -->
</html>
<!---Webpage ends here -->
HTML Frame Tags
HTML frames allow you to create independent windows within a webpage. They are very useful as they allow you to display more than one document in a webpage.
To make use of the frames, you must have at least two different .htm files, one of which will be named index.htm. The index.htm file will be where all the windows will be displayed. The frame tag is defined as <frame> and the <frameset> tag is used to define the set of frames that are being used in the index.htm file.
Example 10
<html>
<head>
<title> Try the frame tags</title>
</head>
<frameset rows="100,*">
<frame name= "top" src="banner.htm">
<frameset cols="100,*,100">
<frame name="left" src="menu.htm">
<frame name="middle" src="content.htm">
<frame name="right" src="right.htm">
</frameset>
</html>
<frameset rows> will set up the size of the rows that will be displayed in your browser.
<frameset cols> will set up the size of the columns that will be displayed in your browser.
The <frame name> tag will name the frame and is used to link them to the main window.
<frameset frameborder> tag will be used to set a border to your frames. Setting it to 0 will ensure that it will be compatible with all browsers.
<frameset framespacing> will set a space between the closest frames.
<frame marginwidth> will set the width space on both sides of the frames. The size should be set in pixels.
<frame marginheight> will set the top and bottom margin size in pixels.
The <frame scrolling> tag will able the vertical or horizontal scrollbar on your frame. Its value must either be set to "yes", "no" or "auto".
The <frame noresize> tag will not allow the user to resize the displayed frame in the browser.
