A website is composed of HTML code and CSS code. This article will teach you how to create a simple website with HTML code.
HTML stands for HyperText Markup Language and is the coding language used to construct web pages and websites. Web browsers read HTML code and render it on your computer screen in plain text, images, audio, video, or any other file that can be displayed with a browser. The most popular browsers are Chrome, Safari, Firefox, Edge, etc.
The HTML code below is not to be copied verbatim; it is meant as a sample and should not be used without first consulting an appropriate resource. This includes the DOCTYPE and meta charset tags: they must be changed (if needed) before copy/pasting this code onto your own website.
For this article we will be using the HTML tags listed below:
<!–This is just for testing–>
<h1>Heading 1</h1>
<p>This paragrahpsis longer.</p>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li></ul>
<!–This is just for testing–>
<h1>Heading 2</h1>
<p><b><u><i><font color=#ff0000>Bold, Underline, Itallic, and Red font.</font></i></u></b></p>
<em><a href=”https://www.examplesite.com”>Hyperlink to another website.</a></em></p></section>.
.post-title {
border-bottom: 1px solid #000000;
}
.post-body img {
max-width: 100%;
height: auto;
width: 90% !important;
}
<!–This is just for testing–>
</article>
<footer> Copyright © 2018 ExampleSite, All Rights Reserved. </footer>
</body>
</html>.
Home Page HTML Code (index.html):
<!DOCTYPE HTML>
<!–For debugging purposes only–>
<HTML>
<head>
<meta charset=”UTF-8″>
<title>Home Page</title>
</head>
<body>
<h1><i class=”fa fa-home”></i> Home Page</h1>
<section class=”post-title”>Section Title</section>.
<!–PASTE CODE BELOW THIS LINE–>
</div>.
</main>.
</body>.
About Us HTML Code (about.html):
<!DOCTYPE HTML>
<!–For debugging purposes only–>
<meta charset=”UTF-8″>
<HTML>
<head>
<title>About Us</title>.
</head>
<body>
<h1><i class=”fa fa-book”></i> About Page</h1>.
<section class=”post-title”>Section Title</section>.
<!–PASTE CODE BELOW THIS LINE–>
</div>.
</main>.
</body>.
Services HTML Code (services.html):
<!DOCTYPE HTML>
<!–For debugging purposes only–>
<HTML>
<head>
<meta charset=”UTF-8″>
<title>Services</title>.
</head>
<body>
<h1><i class=”fa fa-dollar”></i> Services Page</h1>.
<section class=”post-title”>Section Title</section>.
<!–PASTE CODE BELOW THIS LINE–>
</div>.
</main>.
</body>.
Blog HTML Code (blog.html):
<!DOCTYPE HTML>
<!–For debugging purposes only–>
<HTML>
<head>
<meta charset=”UTF-8″>
<title>Blog</title>.
</head>
<body>
<h1><i class=”fa fa-rss”></i> Blog Page</h1>.
<section class=”post-title”>Section Title</section>.
<!–PASTE CODE BELOW THIS LINE–>
</div>.
</main>.
</body>.
Contact Us HTML Code (contact.html):
<!DOCTYPE HTML>
<!–For debugging purposes only–>
<HTML>
<head>
<meta charset=”UTF-8″>
<title>Contact Us</title>.
</head>
<body>
<h1><i class=”fa fa-envelope”></i> Contact Page</h1>.
<section class=”post-title”>Section Title</section>.
<!–PASTE CODE BELOW THIS LINE–>
</div>.
</main>.
</body>.
In conclusion, creating a website with HTML code is not only simple but also easy once you have the appropriate knowledge.