How To Create A Html Page On Notepad

How to Create a Website using HTML on Notepad | Notepad++

Hello, guys Welcome. In this tutorial, we are going Know How to Create a Website using HTML on Notepad Text Editor.

Steps we are going to Talk about in this Tutorial:

Step 1. Open Notepad.

Step 2. Create HTML file.

Step 3. Insert HTML Elements Using HTML Tags.

Step 4. Save and Run the HTML File.

Step 5. Enjoy your Website.

How to Create a Website using HTML on Notepad

Add Headings and Paragraphs:

Adding Headings in HTML

To insert Headings in HTML we have Six Tags for That. From H1 to H6. Where H6 Gives the Smallest Headline Font Size and H1 Gives the Biggest Headline Font Size.

                              <html>     <head>       <title></title>     </head>     <body>              <h1>Headline 1</h1>         <h2>Headline 2</h2>         <h3>Headline h3</h3>         <h4>Headline 4</h4>         <h5>Headline 5</h5>         <h6>Headline 6</h6>              </body>   </html>

Adding Paragraphs in HTML

To add Paragraphs in HTML we have P tags for that.

                              <html>     <body>               <p>This is My First HTML Paragraph</p>              </body>   </html>

Add Images

Adding Images in HTML:

By using HTML's IMG tag we can Insert Images in HTML.
Provide Image path inside the SRC Attribute.
For Image Height Width Customization we Have HTML's Height Width Attributes.

                              <html>     <body>             <img src="myimage.jpg"/>          </body>   </html>

Adding Background Image in HTML:

To add a Background Image to a Webpage we have to use HTML's background Attribute inside the body starting tag.
And inside the background attribute, we have to give our Image's Path.

                              <html>          <body background="myimage.jpg">     </body>        </html>

Adding Audio and Video Files:

Adding an Audio file in HTML:

To Insert audio file in HTML We have Audio Tags for That.
Inside the SRC attribute, we have to Give our Audio file's Path.
Controle attribute will give us some controls to Control Audio File on our HTML File.

                              <html>     <body>             <audio src="myaudio.mp3" controls></audio>          </body>   </html>

Adding a Video File in HTML:

To Insert audio file in HTML We have Video Tags for That.
Inside the SRC attribute, we have to Give our Video file's Path.
Controle attribute will give us some controls to Control Video File on our HTML File.

                              <html>     <body>             <video src="myvideo.mp4" controls></video>          </body>   </html>

Styling HTML Elements:

To Style HTML Elemets we use CSS.

Including CSS in HTML Webpage:

To Include CSS in HTML we have to Write HTML's Style Tag inside the Header Tages.

                              <html>     <head>                <style>         //CSS Code...         </style>              </head>     <body> </body>   </html>

Selecting HTML Elemnts in CSS:

Selecting HTML Element using Tag Name:

                              <html>     <head>                <style>         p{         //P Tag is Selected..         }         </style>              </head>     <body>        <p> Paragraph Text...</p>     </body>   </html>

Selecting HTML Element using ID Name:

                              <html>     <head>                <style>         #myParagraph{         //P Tag is Selected..         }         </style>              </head>     <body>        <p id="myParagraph"> Paragraph Text...</p>     </body>   </html>

Selecting HTML Element using Class Name:

                              <html>     <head>                <style>         .myParagraph{         //P Tag is Selected..         }         </style>              </head>     <body>        <p class="myParagraph"> Paragraph Text...</p>     </body>   </html>

Styling HTML using CSS:

Changing Font Size using CSS:

                              <html>     <head>                <style>         #myParagraph{           font-size:14px;         }         </style>              </head>     <body>        <p id="myParagraph"> Paragraph Text...</p>     </body>   </html>

Changing Font Color using CSS:

                              <html>     <head>                <style>         #myParagraph{           color:red;         }         </style>              </head>     <body>        <p id="myParagraph"> Paragraph Text...</p>     </body>   </html>

Changing Background Color using CSS:

                              <html>     <head>                <style>         #myParagraph{           background-color:black;         }         </style>              </head>     <body>        <p id="myParagraph"> Paragraph Text...</p>     </body>   </html>

Changing Text Alignment using CSS:

                              <html>     <head>                <style>         #myParagraph{           text-align:center;         }         </style>              </head>     <body>        <p id="myParagraph"> Paragraph Text...</p>     </body>   </html>

Changing Opacity using CSS:

                              <html>     <head>                <style>         #myParagraph{           opacity:0.5;         }         </style>              </head>     <body>        <p id="myParagraph"> Paragraph Text...</p>     </body>   </html>

Changing Margin using CSS:

                              <html>     <head>                <style>         #myParagraph{           margin:100px;         }         </style>              </head>     <body>        <p id="myParagraph"> Paragraph Text...</p>     </body>   </html>

Changing Padding using CSS:

                              <html>     <head>                <style>         #myParagraph{           padding:15px;         }         </style>              </head>     <body>        <p id="myParagraph"> Paragraph Text...</p>     </body>   </html>

Changing width using CSS:

                              <html>     <head>                <style>         img{           width:100px;         }         </style>              </head>     <body>        <img src="myimage.jpg" />     </body>   </html>

Changing Height using CSS:

                              <html>     <head>                <style>         img{           height:100px;         }         </style>              </head>     <body>        <img src="myimage.jpg" />     </body>   </html>

Changing Text's Line Height using CSS:

                              <html>     <head>                <style>         #myParagraph{           line-height:20px;         }         </style>              </head>     <body>        <p id="myParagraph"> Paragraph Text.... </p>     </body>   </html>