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.
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.
index.html
<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>Need a Personal Tutor?
I am here to help you with your Programming journey. HTML, CSS, JavaScript, ReactJS, NextJS, C, C++, C#, SQL and more.
Adding Paragraphs in HTML
To add Paragraphs in HTML we have P tags for that.
index.html
<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.
index.html
<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.
index.html
<html>
<body background="myimage.jpg">
</body>
</html>Need a Personal Tutor?
I am here to help you with your Programming journey. HTML, CSS, JavaScript, ReactJS, NextJS, C, C++, C#, SQL and more.
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.
Controls attribute will give us some controls to Control Audio File on our HTML File.
index.html
<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.
Controls attribute will give us some controls to Control Video File on our HTML File.
index.html
<html>
<body>
<video src="myvideo.mp4" controls></video>
</body>
</html>Styling HTML Elements:
To Style HTML Elements we use CSS.
Need a Personal Tutor?
I am here to help you with your Programming journey. HTML, CSS, JavaScript, ReactJS, NextJS, C, C++, C#, SQL and more.
Including CSS in HTML Webpage:
To Include CSS in HTML we have to Write HTML's Style Tag inside the Header Tags.
index.html
<html>
<head>
<style>
//CSS Code...
</style>
</head>
<body> </body>
</html>Selecting HTML Elements in CSS:
index.html [Selecting HTML Element using Tag Name]
<html>
<head>
<style>
p{
//P Tag is Selected..
}
</style>
</head>
<body>
<p> Paragraph Text...</p>
</body>
</html>index.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>index.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:
index.html [Changing Font Size using CSS]
<html>
<head>
<style>
#myParagraph{
font-size:14px;
}
</style>
</head>
<body>
<p id="myParagraph"> Paragraph Text...</p>
</body>
</html>index.html [Changing Font Color using CSS]
<html>
<head>
<style>
#myParagraph{
color:red;
}
</style>
</head>
<body>
<p id="myParagraph"> Paragraph Text...</p>
</body>
</html>index.html [Changing Background Color using CSS]
<html>
<head>
<style>
#myParagraph{
background-color:black;
}
</style>
</head>
<body>
<p id="myParagraph"> Paragraph Text...</p>
</body>
</html>index.html [Changing Text Alignment using CSS]
<html>
<head>
<style>
#myParagraph{
text-align:center;
}
</style>
</head>
<body>
<p id="myParagraph"> Paragraph Text...</p>
</body>
</html>index.html [Changing Opacity using CSS]
<html>
<head>
<style>
#myParagraph{
opacity:0.5;
}
</style>
</head>
<body>
<p id="myParagraph"> Paragraph Text...</p>
</body>
</html>index.html [Changing Margin using CSS]
<html>
<head>
<style>
#myParagraph{
margin:100px;
}
</style>
</head>
<body>
<p id="myParagraph"> Paragraph Text...</p>
</body>
</html>index.html [Changing Padding using CSS]
<html>
<head>
<style>
#myParagraph{
padding:15px;
}
</style>
</head>
<body>
<p id="myParagraph"> Paragraph Text...</p>
</body>
</html>index.html [Changing width using CSS]
<html>
<head>
<style>
img{
width:100px;
}
</style>
</head>
<body>
<img src="myimage.jpg" />
</body>
</html>index.html [Changing Height using CSS]
<html>
<head>
<style>
img{
height:100px;
}
</style>
</head>
<body>
<img src="myimage.jpg" />
</body>
</html>index.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>On This Page
Need a Personal Tutor?
I am here to help you with your Programming journey. HTML, CSS, JavaScript, ReactJS, NextJS, C, C++, C#, SQL and more.
