Tuts Master 😉

How to Create a Website Using HTML on Notepad

Create a Website Using HTML on Notepad

Write a code for creating a website using HTML or HTML5? This basic build block concept is required for web page development. The recent version is HTML5 so we will most probably use HTML 5 coding structure for creating a website.

You can copy this below code and use it on your editor and customize it if you alredy know something about website development.

Make sure you do it on your own, if you are trying for the first time then you should try it by yourself typing codes one by one.

Also Learn: Introduction of HTML and Syntax.

Code for Creating a Website Using HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5 Structure</title>
<meta name="description" content="HTML5 Structure">
<meta name="author" content="NewTutorialslab.com">
<link rel="stylesheet" href="css/styles.css?v=1.0">
</head>
<body>
<script src="js/scripts.js"></script>
</body>
</html>

This above structure is used to create any webpage using HTML or HTML5. So you just need to understand the structure first and then learn and manipulate the codes as per your requirements. In-depth we will be talking about HTML, CSS, JavaScript on their individual tutorials section. You can check those as well for more in-depth knowledge about web programming or website development. But for now, let’s have a simple checklist and create a simple webpage.

  • Should have a title tag.
  • Should contain an external CSS file.
  • If required JavaScript as well.
  • Web Page Title: My Blog, Title Should be Heading 1 – 75PX, Color: #F00, Align: Center;
  • Description: Let me introduce myself; Font size: 22px color: #F00; Align: Center;
  • Secondary Title: About me – H2 – 42PX, Color: #000, Align: Center; Padding-top: 50px;
  • Description: Describe Yourself
  • Use Hyperlink to linking back to your profile

That is our requirement for this particular webpage. In this we are not going to use PHP, we will try to use simple HTML, HTML5, CSS and Less JavaScript. And especially we are not using perfect div structure on this coding because we need to learn element s and their positioning first; CODE WITHOUT USING CSS

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Blog</title>
<meta name="description" content="Let me
introduce myself">
<meta name="author" content="Satya J.">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>My Blog</h1>
<p>Let me introduce myself</p>
<h2>About me</h2>
<p>A quick brown fox jumps over the lazy dog.
That's it. If you want to know more about me then
please feel free to visit the link</p>
</body>
</html>

Final HTML Code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Blog</title>
<meta name="description" content="Let me
introduce myself">
<meta name="author" content="Satya J.">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>My Blog</h1>
<p>Let me introduce myself</p>
<h2>About me</h2>
<p>A quick brown fox jumps over the lazy dog.
That's it. <br/>
If you want to know more about me then please feel
free to visit the link <br/>
<a href="#">...Read more</a></p>
</body>
</html>

  Final CSS CODE

h1{
font-size: 75px;
text-align: center;
color: #f00;
}
p{
font-size: 20px;
text-align:center;
color: #f00;
}
h2{
font-size: 42px;
text-align: center;
color: #000;
padding-top: 50px;
}
a{
font-size: 20px;
text-align: center;
}

In