Web Page Tutorial for Beginners(1) - Rdevg

Web Page Tutorial for Beginners(1) - Rdevg

Mr. Dev Kumar May 21, 2019

How to make a simple web page ?


⇒ I will show you how to make a simple web page using basic "HTML" and "CSS" codes.

HTML  stands for HYPERTEXT MARKUP LANGUAGE.

* HTML is used to provide content like - text, images, hyperlinks, etc., to a web page/site.

CSS stands for CASCADING STYLE SHEET.

* CSS generally is used to provide style to a web page/site.

  • There are some basic tags in HTML - <html>, <head>, <title>, <body>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <p>.

  • Closing of all above tags goes with </html>, </head>, </body>, </h1>, </p> and so on...

  • <html> tag ⇒  <html> tag is used at the beginning and ending of all html file.
  • <head> tag ⇒ <head> tag is used for add a title to a web page using <title> tag inside it.
  • <body> tag ⇒ <body> tag includes the content of our web page.
  • <h1>---<h2> tag ⇒ These tags are used inside <body> tag for making a heading for our content.
  • <p> tag ⇒ <p> tag is also used in <body> tag for writing a paragraph in a web page. 

  • Here we will use CSS inside an HTML file. 

 ►For making a simple and stylish web page i will recommend you to use an easy and simple software :

 ☆ Notepad

⇒ Notepad is an easy and simple way to create a simple web page. Only you have to follow following steps:

Step 1 : Firstly open notepad on your desktop then make and save a file with ".html" or ".htm" extension. Example : "example.html" or "example.htm".




  • Open Notepad and save it with your desire name and choose the destination of output, you can see in first image.
  • In second image you can see that the output is saved at its destination where i have chosen i.e. Desktop.

Step 2 : Now see the use of <title> tag inside <head> tag for providing title to a web page. 

INPUT


OUTPUT



Step 3 : Now see the use of <h1> tag inside <body> tag for providing heading to a web page. 

INPUT



  • In above image i have used "align" . "align" is an attribute for fix a content to a particular alignment i.e.- left , right or center.
  • I have used <strong> tag, it is generally used for making text content bold. Instead of it you can also use <b> tag.
  • I have also used <u> tag, it is used for underline the text content. 
OUTPUT



Step 4 : Now see the use of <p> tag inside <body> tag for providing paragraph to a web page.


INPUT


  • Inside <p> tag you can write any thing you like.
  • You can use <p> tag as many times as per your need.
OUTPUT



Step 5 : Now see the use of <img> tag inside <body> tag for providing image to a web page.


INPUT




  • In above picture you can see that i have used <img> tag. This tag is used for inserting image in a web page.
  • The syntax of <img> is :
<img src="image_name_with_it's_extention" alt="display_name_instead_of_image" />

OUTPUT


Step 4 : Now see the use of CSS inside a HTML file for providing some style to our web page.


INPUT


⇒ We use CSS inside HTML file using <style> tag. We denote the name of font to be changed with there tag name.
⇒ Inside tag name we write the attributes of CSS to be changed like:
  • font-family : It is used to change the style of text.
  • font-size : It is used to change the size of text.
  • color : It is used to change the color of text.
  • background-color : It is used to change the background color.
OUTPUT


By this we end our first web page tutorial for beginner - 1.
I hope this is useful for beginners.
If you have any doubt you can ask us here.


by : Rahul Dev

Thank you...
Tags
Reactions

Post a Comment

8 Comments