Today in this world every person related to the Internet.So we can say its Internet era, almost everyone wants to create their own web presence by either hosting their own blog, articles, photos, videos, reviews, etc etc. But some people decide to do something bigger by their own way. When you having a website under your own name and group, so that you can proudly walk forward to your friends and say “Yes, I have my own website”.But the real thing is that this thing happens no longer because having a website is easy in today’s time.

Here You Learn How To Create Web Pages.

To create attractive web pages we need to know about Basic HTML. If you are creative and creative some design again and again then you can create amazing web pages by knowing some information.

These are some snaps shots of web pages.

What Is a Web site

A website is an arrangement of web pages, photos, articles, videos or any other digital media organized perfectly where the user can easily navigate around it and get the information which they came looking. 13facts.info is the best example of a website. A website is hosted on the web servers connected to the Internet or private networks. Every web site has their URL or IP address, even each media uploaded on the web site has its own URL (Uniform Resource Locator ). There are some domain such as–

.com – Commercial websites

.net- Network related websites

.edu – Educational related websites

.org – organization related websites

There are even country based domain extension, such as –

.in – INDIA

.au – AUSTRALIA

.br – BRAZIL

.co – COLOMBIA

.eg – EGYPT

HTML PROGRAMMING

HTML mean Hyper Text Markup Language which we used to create web pages. Everyone which is related to the internet or web designing needs to have some knowledge of HTML that how its work and how its codes are written. An HTML file contains “markup tags” which tells us how to browser follow instructions of these tags.

Now we start a look on web page designing using basic HTML programming. BY read carefully and keep in mind these codes we learn it quickly.

Need a Stuff

Editor- We need an editor program on which we will write our HTML codes. Notepad++ ( a free program ), is the best editor it is very easy to use and you can easily manage your complex HTML codes with ease as it also shows HTML tags, attributes, contents with different colors.
Image Editor – By using the internet we get all resources which we will use on web pages so we no need any software for image editing or no need any software like photoshop for graphic and designing.

Creative – you have to so creative and done experiment continues using Basic HTML in NOTEPADE++. The interface of this software could be something like this

The first thing that we have to save it with any name with extension “.html” or “.htm”. Ex- index.html
Here .html or .htm extension tells the Web Browser that its a HTML file.

Warnings
If you want to build a website you need to Try learning other programming languages like php, javascript, css, etc which will help you make professional looking websites. But before moving to advance designing you need to have basic concept.

Start With Basic

Web page starts with the tag telling the web browser the start of the HTML document and ends with which indicates the browser that it is the end of the HTML document, there are more tags which you will be learning more, but we will see these tags, etc are not displayed in the web browser. The browser only displays the content between the tags, but the tags themselves are hidden.
Here is the Syntax of atag or we can say, the basic structure of the web page –

 

There is two type of tags:

Container tag/Non-Empty tags

Container tags are also known as Non-Empty tags. These types of tags require opening as well as closing.
Example:,,,, <i> these types of tags requires closing.</i>

Every container tag is closed by giving a slash sign ( / ) just before the name of the tag

B. Empty tag/Non-Container tags

Empty tags are also known as Non-Container tags. These types of tags don’t require closing even if you have opened it.

Example:
, , etc

Attributes

Every tag have their own attributes and each attribute provides additional information about a tag. Attributes are always used within the tag and in the following manner –

The following example will make it clear – Suppose if you want to have a background color of your web page as black then you will use “bgcolor” attribute within the tag.

Open Notepad++ and type the following code –

Web Designing

You are learning Web Designing

You are learning Web Designing

You are learning Web Designing

You are learning Web Designing

You are learning Web Designing

<font face=”Cooper Black” color=”green” size=”4″>You are learning Web Designing</font>

<font face="broadway" color="red" size="6">You are learning Web Designing</font>
<font face="Aerial" color="yellow" size="8"> You are learning Web Designing</font>

<font face=”Comic Sans MS” color=”purple” size=”10″> You are learning Web Designing</font>

Web Designing

You are learning Web Designing

You are learning Web Designing

You are learning Web Designing

You are learning Web Designing

You are learning Web Designing

 

As you have already saved it with .html extension ( if not done then do it now ), you just need to click on “Save” option from “File” menu on the menu bar.

As you can see main tags have “light blue” color, contents that are displayed on web browsers have “black” color, attribute have “red” color while a value of attributes has “purple” color. This is the main reason why we use Notepad++, you can easily distinguish all stuff very easily.

If you want to use break tags you can change it by using
[break tag. It’s an empty tag] or

[paragraph tag. It’s a container tag].

where you want to break the line use(
) or from where you want to start a new paragraph (

).

After you use
tag or

tag you will see the output like this:- You can also use the hexadecimal number of any color.

As you see here that all the text are in written in one complete line, but you can change it by using
[break tag. It’s an empty tag] or

[paragraph tag. Its a container tag].

You need to use it just where you want to break the line (
) or from where you want to start a new paragraph (

).

After you use
tag or

tag you will see the output like this:- You can also use the hexadecimal number of any color. Like you can also use this line for displaying text in red color

Make More Attractive Your Text

Now you have learned how to assign the size, color, face to your text in web pages. Now let us learn how to make text look BOLD, italic and underlined!

To make text look BOLD in your web pages use tag. It’s a container tag so you need to close it every time you open it
Example of tag:-

You are learning Web Designing
To make text look Italic in your Web pages use tag. It’s also a container tag so you need to close it every time you open it.
Example of tag:-

Learning web Desiging

<b>You are learning Web Designing</b>

To make text look underlined, you have to use tag.
It’s also a container tag.
Example of tag:-

learning web Designing

Here is how you will type it on the Notepad++

Web Designing

 

This is text will be displayed with default color, size and font style. you are learning web designing

Learning Web Designing

To make text Italic in your Web pages use tag. Its also a container tag so if you open it you have close it also.
Example of this tag:-

Learning Web Designing

Here is how you will use it on the Notepad++

Web Designing

 

This is text will be displayed with default color, size and font style. Learning web designing

text displayed in italic 
text displayed underlined

 

Here is how you can use the code in Notepad++

Warnings
While using two or more container tags on text, you should take very careful while closing those tags. Suppose you opened tag for a text before tag then you should close that tag first then tag.
If the opening pattern of tags are like this —

then the closing pattern of tags should be like this —

In opening pattern of tags shows that “tag A” have to be opened before “tag B” and “tag B” have been opened before “tag C”

And in a closing pattern of tags shows that “tag A” have been closed at last, “tag B” have been closed just after “tag C” while “tag C” has been closed at the first.

It might have got very confusing here. Don’t worry I will show you with an example –

Suppose here is the code–

You are learning Web Designing

as you can see the closing pattern of tags is just opposite of the opening pattern of the tags

similarly, if

Learning Web Designing

here the closing pattern of tags is just opposite to the opening pattern of tags.

The , and tags which we saved earlier will give this output:-

HEADINGS in HTML:

There are six levels of heading in HTML. These are –

 

        1. <h1> </h1> -- the biggest

     

     

 

 

        1. <h2> </h2>

       

       

 

 

        1. <h3> </h3>

       

       

 

 

        1. <h4> </h4>

       

       

 

 

        1. <h5> </h5>

       

       

 

 

        1. <h6> </h6> -- the smallest

       

       

 

 


This is how you will use the heading tags in your web page

<h1> example of heading </h1>

example of h1 heading

<h2> example of heading </h2>

example of h2 heading

<h3> example of heading </h3>

example of h3 heading

<h4> example of heading </h4>

example of h4 heading

similar for
and you can even use bold, italic, underline tags to customize it more
The output will be like this:-

WHAT YOU HAVE LEARNED in THIS STEP

You learned the following things:-

Basic structure of web page
what are container and non-container tags.
How to add text, background color and title to you web page
How to make your text more customized using bold, italic, underline and heading tags and some attributes.
What should be the closing pattern of tags.
Step 3CUSTOMIZING YOUR WEB PAGE
Customizing your web page means enhancing the look of your page. You can do this by adding pictures, videos and other media files too such as audio clips (.mp3, .wmv, etc)

ADD BACKGROUND IMAGE
Here I will tell you how you will add images to your web pages instead of colors as we did earlier.

 

For adding image as a background:-

Using Background attribute:

By using background attribute you can easily add image as a background. This is how you will be using it-

<body background="image source">

Here you will replace “image source” [without the quotes] with the complete path of the image.

Example: Suppose your image is stored in the folder named “pictures” located in the “C” drive of your computer, then you will be using the following path for this image:-

E:\image\something.jpg

 

Here example.jpg is your image name with .jpg extension.

Tips
You can even know the complete path of your images by opening it with internet explorer. You can do it by right clicking the image and selecting Internet explorer or any other browser from the open with option.

<img style="border:5 solid yellow" src="F:\Wallpaper\Wallpapers5\abismo.jpg" height="200" width="400" alt="image">

OR

<img style="border:5 dotted red" src="F:\Wallpaper\Wallpapers5\abismo.jpg" height="200" width="400" alt="image">

You can use “bgcolor” and “background” attribute at the same, just to ensure that the web browser displays the color assigned if it fails to show the background image.

Using the Style Attribute:
This method gives you more flexibility and command over your background images. Use the following code:-

 

ADDING IMAGE to YOUR WEB PAGE

For adding images to your web pages you will be using tag. Some of the attributes of tag are:
alt: every text assigned with this attribute will be displayed by the web browser when the image will be being loaded or if its unable to display the images.
src: you will use this attribute to assign the path of the image you want to display on your web page
height/width: these attributes are used to assign height and width of the image. You can set the height and width of you image by either percentage value or by pixel value.
align: using this attribute you can position your images either on right or left side of your web page.

Tips
You can also apply border to your image by using “style” attribute:
image

OR

image

You can choose any size and color of your border but remember to use “solid” or “dotted” before color name.

ADDING VIDEO to YOUR WEB PAGE
You can simply use tag to add videos.

<embed src="E:\image\video1.mp4" height = "350" width="500" autostart="false"></embed>

If you change the “autostart” value to “true” then your video will start playing as soon as you open your web page.

ADDING AUDIO to YOUR WEBPAGE
You can add music to your web page in the same way to added video. Just instead of video file path use the path to your music file.

embed src="E:\image\song.mp3" height="100" width="100" autostart="false"></embed>

If you use this tag then you will see a audio player on your web page.

You can also run any audio file in the background by using this tag:

Here “loop” represents the number of times you want to play the audio. You can use 0, 1 ,2 ,3 ,4 ,5 or any other number, depending on your interest.

Use this tag just after thetag:

<body><bgsound src="files/ck.MP3" loop="infinite">XXXXXXXXXXXXXXXXXXXXXXXXXXXXX</body>

 

Using tag will not add any music player to your web page but still you will be hearing it.

WHAT YOU LEARNED in THIS STEP
You learned following things:

How to add image as a background.
How to add images within your webpage.
How to add Video, audio and background music to your web page.
Step 4ADD LINKS, TABLES, LISTS and COMMENTS to YOUR WEB PAGE
Here you will learn how to link pages, add tables, lists and even comments to your Web page.

ADD LINKS
If you want to link a different site or any other web page, then you have to use tag also known as anchor tag. If your web page is named “something.html” and is stored in the folder named “webpages” and you wanna link it to your web pages, then you will use the following code:-
somthing

<a href="webpages/something.html" rel="nofollow" target="_blank" >Something</a>

This code will display the text “Something” in a underlined blue font, the same as this one WonderHowTo. If you want to change the color of the unvisited , visited and active link, then you have to use the following attribute with the <body>  tag:-

<body link="blue" alink="purple" vlink="red">

 

If you want to link any Website to your web page then use the URL of that web page withing the tag –

<<a href="https://www.13facts.info/">13facts</a>

GIVE NAME to ANY SECTION of YOUR WEB PAGE
You can use “name” attribute of the tag to give unique name to any section of your web page. In other words, You create a bookmark within your web page. You can use this bookmark to create links directly to this section

<a name="section name">My section</a>

Now you can create direct links to the section named “My section” withing the same web page using this code format –

<a href="#section name" rel="nofollow" target="_blank" >Link to My section of this web page</a>

If you want to link this section from another web page, then use this code format:-

<a href="index.html#section name">Link to the My section of ck web page</a>

ADDING CLICKABLE IMAGE
To make any image clickable, you just need to use tag before the tag.
Here is an example:

<a href="http://google.com" rel="nofollow" target="_blank" ><img src="path of the image "></a>

So, any click on this image will redirect the web browser to google.com

ADDING TABLES to YOUR WEB PAGE
You add tables in you web page using

<table><tr><td>xxxxxxxxxxxx</td><td>xxxxxxxxxxxxx</td></tr>
<tr><td>xxxxxxxxxxxxxx</td><td>xxxxxxxxxxxxxxxxxxx</td></tr>

</table>

tag. For rows you have to usetag and each column is divided into cells using
a

tag.

The syntax of

tag:

If you will use “border” attribute then assign it some value then the table will be displayed with borders but if you will not use “border” attribute, the the table will have no border.You can also assign different colors to border.If you want to give different border size and color to each cell, then separately use “style” attribute withtag.

Cellpadding and Cellspacing:Example:
<table cellpadding=”4″>
Cell padding:Example:
<table cellspacing=”4″>
Cell padding is an attribute of

 

xxxxxxxxxxxx xxxxxxxxxxxxx
xxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxx

tag. By using cell padding attribute you can set the amount of space between the contents of the cell and the cell wall.Ex:-Cell spacing:
Cell spacing is also an attribute oftag. By using cell spacing attribute you can set the amount of space between the table cells.Ex:-ADDING BACKGROUND COLOR and IMAGE to TABLE

BACKGROUND COLOR:

You can background color to your table and cells simply by using “bgcolor” attribute. BACKGROUND IMAGE:
If you think that adding colors as a background in you table is not so appealing, then no problem. You can use background attribute to add any images as background of your table or to each cell separately.See image for more reference.ADDING LISTS to YOUR WEB PAGE

<center><table bgcolor="yellow" cellpadding="20" cellspacing="25" style="border:10 solid green">
<tr><td bgcolor="light blue" style="border:4 solid red">xxxxxxxxxxxx</td>
<td bgcolor="purple" style="border:5 dotted purple">xxxxxxxxxxxxx</td></tr>
<tr><td style="border:5 solid blue">xxxxxxxxxxxxxx</td>
<td bgcolor="pink">xxxxxxxxxxxxxxxxxxx</td></tr>

<list>

There are three types of lists in HTML:-Unordered Lists
Ordered Lists
Definition Lists
UNORDERED LISTS
An unordered list starts with the tags and each list item starts with the tag

 

 

<li>List number 1</li> <li>List number 2</li> <li>List number 3</li>
  • tag.Example:-
          • List number 1

         

         

     

     

          • List number 2

         

         

     

     

          • List number 3

         

         

     

 

Output:- All the list items written within

tag will be displayed with bullets. If you want to change the shape of these bullets from circle to square then use “type” attribute.

<ul type="square"><li>List number 1</li>
<li>List number 2</li>
<li>List number 3</li>

</ul>
Example:-

          • List number 1

         

         

     

     

          • List number 2

         

         

     

     

          • List number 3

         

         

     

    Output:- Try using “disc” value in “type” attribute!

    ORDERED LIST

    An ordered list starts with the

      1. tag and each list start with

      2. tag.
        Example:-Try this tag yourself and see the effect:-Suppose you want to start your list with number 5 or any alphabet C instead of 1 or A, then try using “start” attribute.Example:-You can get the same result but by using different method.

        <ol type="alphabetic">
        <li>List number 1</li>
        <li>List number 2</li>
        <li>List number 3</li>
        
        </ol>
      3. a. List number 1
      4. b. List number 2
      5. c. List number 3

    If you use “value” attribute with

      1. tag then you will get the same result. But here is a twist, suppose you started your first list with number 5 but wanted to list second item with number 10, then you will use the following cod:-
        <ol><li value="5">List number 1</li><li value="10">List number 2</li>
        <li value="20">List number 3</li> </ol>
              1. List number 1

             

             

         

         

              1. List number 2

             

             

         

         

              1. List number 3

             

             

         

        DEFINITION LIST
        Definition list contains list of items with a description or definition of each item.

        Every definition list start with

      2. <dt> tag which is used within the <dl> tag defines a definition list. <dd> tag which is used within <dt> tag defines the description for each list.

        Example:-

        <dl>
        <dt>Item number 1</dt>
        <dd>Definition or Description for 1st Item</dd>
         <dt>Item number 2</dt> <dd>Definition or Description for 2nd Item</dd>
        <dt>Item number 3</dt> <dd>Definition or Description for 3rd Item</dd>
        
        </dl>
NESTED LISTNested list is not any new type of list but a combined use to unordered list and ordered list.If you are still confused about how to create Nested list then Following the instructions below:-

Hope this helps you!

ADDING COMMENTS to YOU HTML CODE
The comment tag is used to add comments to your HTML code or source code. Contents within these tags are not displayed by the browser. Comment tag is just used to keep you HTML code confusion free or add description if youR Web Page has very complex source code. Adding comment tag helps you when you edit the code for updating your web page.

Example of Comment tag:-

<!–Text within these tags are not displayed by the Web Browser–>

WHAT YOU LEARNED in THIS STEP
How to add links, make images clickable and give name to any section of web page.
How to add table and customize it.
How to add ordered, unordered, definition and nested list.
Step 5ADD MORE EFFECTS to TEXT and YOUR WEB PAGE
ADD HORIZONTAL LINE

If you want to add a horizontal line in your web page, then you have to use <hr> tag. Its a non-container tag, so you don’t need to close it.

Attributes of <hr> tag:

        • Width:- Assign value in pixel or percentage.

       

       

 

 

        • Size:- Assign value in pixel or percentage.

       

       

 

 

        • Align:- Assign value ( left, center, right ) to specify the alignment of horizontal line.

       

       

 

 

        • Color:- Give color to Horizontal line

       

       

 

 

        • noshade:- This attribute specifies that horizontal line should be displayed without shaded.

       

       

 

 

        • Style:- You can use this attribute to give dotted or solid border of any color to it.

       

       

 

 


tag. Its a non-container tag, so you don’t need to close it.

Attributes of


tag:

Width:- Assign value in pixel or percentage.
Size:- Assign value in pixel or percentage.
Align:- Assign value ( left, center, right ) to specify the alignment of horizontal line.
Color:- Give color to Horizontal line
noshade:- This attribute specifies that horizontal line should be displayed without shaded.
Style:- You can use this attribute to give dotted or solid border of any color to it.

Different types of horizontal line with their codes

ADD MARQUEE EFFECT
By using tag you can make text, photos, horizontal line and many more things scroll horizontally or vertically automatically.

Attributes of <marquee> tag:-

Scrollamount:- Scrollamount attribute defines the value by which the content withing tag should move.
Direction:- Direction attribute defines the direction in which the content should move. ( right, left, up and down)
There are many more.

    • <marquee scrollamount="12" direction="right">You are learning Web Designing</marquee>

 

    • <marquee scrollamount="2" direction="left">You are learning Web designing</marquee>

 

    • <marquee behavior="alternate" width="600" height="100"><font color="red" size="5"><b>You are learning Web designing<b></font></marquee>

 

    • <marquee behavior="scroll">You are learning Web Designing</marquee>

</ul

      • <marquee behavior="slide">You are learning Web Designing</marquee>

 

 

      • <marquee direction="up">You are learning Web designing</marquee>

 

      • <marquee direction="down">You are learning Web designing</marquee>

 

 

      • <marquee bgcolor="yellow" vspace="50" hspace="50"> You are learning Web designing</marquee>

 

Here “vspace” means “vertical space” and “hspace” means “horizontal space”. Assigning value to these attributes will leave space vertically and horizontally.

    • <marquee scrollamount="20" loop="2"> you are learning web designing</marquee>

 

Try using these examples and modify it according to your needs:

You are learning Web Designing
You are learning Web designing
You are learning Web designing

 


tag to make it scroll in any direction.
You can use tag for creating sliding images.
ADD SUBSCRIPT, SUPERSCRIPT and STRIKE
SUBSCRIPT and SUPERSCRIPT:
Use and tags to give subscript and superscript affect to any text or number. Generally, these tags are helpful while creating Science subject (mathematics, physics, chemistry, etc) related web pages.

STRIKE:
This tag ( ) will display a line through the middle of the text.

Use <sub> and <sup> tags to give subscript and superscript affect to any text or number.

  • STRIKE:

This tag ( <strike> ) will display a line through the middle of the text.

NOW GET READY to EXPERIMENT

I should now stop here because this article has already reached more than 5 thousand words and if I keep writing then this article will no longer be called as “How-To-Design Amazing web pages using basic HTML” but may get a tag of “Basic Web Designing Manual”. But, you now know almost very much of the basic HTML. Just Go and keep experimenting and exploring with your existing knowledge!

Happy Web Designing!!

xxxxxxxxxxxx xxxxxxxxxxxxx
xxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxx

Leave a Reply

Your email address will not be published. Required fields are marked *