Skip to main content

HTML WEB PAGE DESIGN - How to Create simple HTML web page

How to Design Simple HTML Web page

In this article, we are going to learn how to design HTML web page. This article is used to let you know, how to create a simple web page using HTML. With this article you will come to know how to create the simple web page from scratch. To create the web page one should use the editors like notepad or Dreamweaver or Notepad++ etc. Here we are using Notepad ,in this connection steps are initiated to be as following

HTML  Web Page Design

A web page is a part of a website, containing information about a particular topic. You can create a custom web page using HTML. You can put anything you want on your web page like images, tables, hyperlinks, etc.

Open Notepad:
To open the Notepad one has to go to Start -> All Programs -> Accessories ->Notepad. 
how to create simple html web page
Notepad

 Once Notepad is open write the coding their as given below


1.<HTML> is the first tag of the web page and you have to write it at the top of the notepad.


Create html web page
Create simple HTML web page 


 2. Next tag is <head> tag.  The <head> tag  is a container for all the head elements can include a title of the web page, script tag, style tag, meta data.
design simple html web page
design simple Html web page 


3.After writing the <head> tag next tag is <title> tag which is used for writing title of the my web page. Write any text between <title> and </title> tags, then close the head tag. 

how to design simple html web page
how to design simple web page 

4. After closing the head tag the start the <body> tag in which one can write any text, display images, draw tables. make lists etc. 


how to design simple html web page
how to create simple web page

 5. After writing the text close the </body> tag and then close the </html> tag. Now basic structure of the HTML is ready, lets apply formatting to the web page. If you want to change the background color of the web page then you have to apply an attribute of the body tag i.e. bgcolor

how to design simple html web page
how to create a simple web page

the above code will change the background color of the web page to the red color.now I want to change the color of the text from black to any other color then text attribute is used. It is the attribute of the body tag.
how to design simple html web page
how to create simple web page


the above code will change both the background color and the color of the text.

 6. If you want to apply background  image then we have to use background attribute of  the body tag.
how to design simple html web page
how to create simple web page

so the full program is 

how to design simple html web page
how to create simple web page
To save the file File->Save as-> Enter file name with the extension i.e. .html or .htm and then open the Internet explorer or any other browser. File ->open -> Browse-> select file name-> click on the open button
HTML Web page design
HTML WEB PAGE DESIGN - OUTPUT 


In this article, you have learned how to create or design web page using text editors 

NEXT

Comments

Post a Comment

Popular posts from this blog

Table in HTML

Table is used to store data in the form of rows and columns.<Table> </Table > tag is used for creating the table.   Tags used for creating  the table  is as follows Tags Description <table></table> <tr></tr> It defines the table row. <th></th> It defines the table heading. <td></td> It defines the table data. <caption></caption> It defines the caption of the table. Attributes of the <table></table> tag. Attributes Value Description Bgcolor Color name Changes the background color of the table. Background Path of the image Applies the image as the background. Border Value (eg. 1,2,10) It is used to apply the border thickness of the table. BorderColor Color name It changes the color of the table bord...
Post a Comment
Read more

Linking in html

Linking is used for linking the web page with the another web page. One can create linking with  <a> </a> tag. It is also called anchor tag. One can create linking with the text, linking with the image. The attribute of <a></a> href="path" target="frame name" or _top or _blank or _self or _parent Linking with the Text  One can create linking with the text. Example of it is given below   Example <html> <head> <title> linking with text </title> </head> <body> <a href="file:///C:/Program%20Files/Java/jre1.8.0_31/Welcome.html">click here</a> </body> </html> The output of the above  code is Linking with Image Now, one can also create linking with the image. Example <html> <head> <title> linking with image </title> </head> <body> <a href="file:///C:/Program%20Files/Java/jre1.8.0_31/Wel...
Post a Comment
Read more

HTML FRAMES - HTML Frames Example with Output

Post Updated :16-02-2018 HTML Frames is used to display more than one file. It is used to divides the browser window into different parts or sections  i.e.  row-wise or column-wise or row and column-wise . Each section can display HTML files.To create a frame  two tags are used they are <frameset> and <frame> tag. Attributes of  <frameset>    tag 1. Cols=value is % or pixels 2. Rows= values in % or pixels Attributes of <frame> tag 1. Src= "path" 2. Name="name of the frame" 3. Border= value in pixels 4. Noresize 5. Scrolling="true" or "false" 6. Marginwidth=value in % or pixels 7. Marginheight=value in % or pixels If I want to divide the browser into two columns. The following example will be used to divide the window into 2 section. In the example given below we are using to divide the browser into equal sections i.e. 50% each. HTML Frames Example with Output Simple example of two- framed page ...
Post a Comment
Read more