How To Create My Own Web Page Using Html Code

Posted by in Articles, Html, Programming

Creating a simple webpage in HTML. Before you start coding, let me assume the following facts,
You know simple html tags like, HTML, BODY, TITLE, HEAD, TABLE, LISTS, etc. and some parameters like, WIDTH, HEIGHT, COLOR, BORDER, CELLSPACING, PADDING, etc.

Lets make a simple HTML page format as below:

To do so, we’ll be using TABLE, H1,H2, FONTS, HYPERLINKS, LISTS, HR etc.

Open up the notepad save it as “webpage.html” (with quotes)

And then create a table with similar format:

Your page will contain Page header, Navgation bar, Footer, Contents part.

To create a table similar to the format above, use the following tags.

<html>

<head>

<title>Page title</title></head>

<table width=”100%” cellpadding=”10″>

<tr width=”100% valign=”top”><h2> PAGE HEADER </h2>

<td width=”20%” valign=”top”>

NAVIGATION BAR

</td>

<td width=”80%” valign=”top”>

CONTENTS PART

</td>

<tr width=”100%” valign=”top”>FOOTER PART</tr>

</html>

Now you have the basic layout ready. The things we need now is to fill the blank tables with appropriate contents.

For example:

<html>

<body>

<table width=”100%” cellpadding=”10″>

<!– page title ->

<tr width=”100% valign=”top”><h2>Page Title</h2>

<!– end of page title ->

<hr>

</tr>

<tr>

<!– Navigation bar ->

<td width=”20%” valign=”top”>

<ul>

<li><a href=”#”>Home</a></li>

<li><a href=”#”>About Us</a></li>

<li><a href=”#”>Feedback</a></li>

<li><a href=”#”>Contact</a></li>

</ul>

</td>

<!– End of Navigation ->

<!– Body Contents ->

<td width=”80%” valign=”top”>

YOUR Contents goes here, type your text, insert hyperlinks, lists, images here to beautify your web page.

</td>

<!– End of contents ->

</tr>

</table>

<!– footer notes ->

<tr width=”100%” valign=”top”><p align=”center”>Copyright Footer note</P></tr>

<!– end of footer notes ->

</body>

</html>

The above code will give output in your browser as we’ve planned to (see the first image). Playing with the tags makes you further clear and adapted to web designing using HTML.

Adding images and other hyperlinks.

After making simple page, you can add images, colored fonts, hyperlinks etc to make it more user friendly.

You can use <a href=”#”> and <img src=”#”/> tags to include hyper links and images.

See the example below(put it under the content body tag):

<a href=”http://www.google.com”>

<img border=”0″ src=”http://www.google.com.np/intl/en_com/images/logo_plain.png”/>

</a>

<h3>is the most popular search engine in this world.</h3>

<br/>

<a href=”http://www.google.com”>Click here</a> to go to Google.com

In the above example, Google’s logo image will be loaded using, <img> tag and that tag is enveloped under <a href> tag which enables the image to be clicked.

Similarly you can envelope text to create hyperlinks.

You can also change the size and font colors by applying the following syntax.

<FONT COLOR=”color_name” size=”size_in_number”>FONT TO BE FORMATED</FONT>

To create lists of texts or navigation,

Example:

<ul>

<li><a href=”#”>Home</a></li>

<li><a href=”#”>About Us</a></li>

<li><a href=”#”>Feedback</a></li>

<li><a href=”#”>Contact</a></li>

</ul>

<ul> tag creates a list block and <li> lists them in proper line break. In above example, we’ve listed the text with hyperlinks.

After tweaking and playing with the tags you may get the good result.

For instance take the sample from below:

<html>

<body>

<table width=”100%” cellpadding=”10″>

<!– page title ->

<tr width=”100% valign=”top”><h2>Page Title</h2>

<!– end of page title ->

<hr>

</tr>

<tr>

<!– Navigation bar ->

<td width=”20%” valign=”top”>

<ul>

<li><a href=”#”>Home</a></li>

<li><a href=”#”>About Us</a></li>

<li><a href=”#”>Feedback</a></li>

<li><a href=”#”>Contact</a></li>

</ul>

</td>

<!– End of Navigation ->

<!– Body Contents ->

<td width=”80%” valign=”top”>

<a href=”http://www.google.com”><img border=”0″ src=”http://www.google.com.np/intl/en_com/images/logo_plain.png”/></a><h3>

is the most popular search engine in this world.</h3>

<br/>

<a href=”http://www.google.com”>Click here</a> to go to <Font color=”green” size=“2”>Google.com</font>

</td>

<!– End of contents ->

</tr>

</table>

<!– footer notes ->

<tr width=”100%” valign=”top”><p align=”center”>Copyright Footer note</P></tr>

<!– end of footer notes ->

</body>

</html>

It will show you the page like this:

Hope this tutorial gave you some basic idea of designing webpage using notepad and HTML.