How to use HTML and CSS to make a Simple Webpage

Focusing on HTML today

Kanchana Kariyawasam
Feb 20 · 6 min read
Photo by Greg Rakozy on Unsplash

First of all, we should know what is HTML? HTML is referred to as the Hypertext Markup Language. As you might have realized, HTML is not a programming language. It’s a markup language. To develop a webpage, HTML is used to make skeletons of a page, and CSS is used with the visualization of the webpage. In this blog, I would like to define some HTML, CSS techniques and make a small real-world webpage using those techniques step by step.

We will only be focusing on the HTML aspect through this blog. You can look into the CSS part of this webpage by going through this link: How to use HTML and CSS to make a Simple Webpage (CSS Part)

At the present we use HTML5. Because of that, we define that technique above our HTML code. So, we use <!DOCTYPE html> tag. You can use any text editor to write HTML tags such as notepad, notepad++, Subline Text, and Visual Studio Code.

We can relate a webpage to a human body. Since you can find head and body parts on a webpage. There are finishing tags of many tags such as </html> and </head>. Also, there are some tags that do not have finishing tags like <br>. We are using some HTML tags to define them. <title></title> tag is in the <head></head> tags and the description of our page is in <body> tags. The title of the webpage is naming the webpage according to an attractive and meaningful name. 😄

Screenshot by Author — Title of the webpage

Below, there are some tags that are used for making a small webpage.

In HTML, there are many tags. In this blog, I would like to describe some of them. Below, there are some tags and explanations of those tags.

  1. <h1>, <h2>, <h3>, <h4>, <h5>, <h6> — We can use these tags to define a header. However, if we use the<h1> tag, the font size of the title is bigger. Like that, we can place the font sizes as <h2> > <h3> > <h4> > <h5> > <h6>where > denotes greater than. The smallest font size has the <h6> tag. Also, we write end tags of this tags.

2. <p> — We can use this tag to display paragraphs.

3. <hr> — We can use this tag to display a horizontal line. But there is no end tag.

4. To comment, We can use the<! — — >tag for commenting.

5. To display unordered bullet points.

6. To display ordered bullet points.

7. To bold the word/paragraph — We use the<b> tag for bold. There is also an end tag.

8. To link another webpage — We use <a></a> tags between a word that is used as the hypertext. Also, we write a link to a webpage that is used for linking with href attribute.

9. To insert an image — We use the <img> tag to insert an image. There are no end tags. Also, there is an src attribute that is used to link an image. Also, we can write the width and height attribute to change the size of an image. And there is an alt attribute to display alternative words of the image.

10. · To make a table — We can insert a table like this. Also, there are end tags of all the tags. <table> is used for start a table. <th> is used to write table head. <td> is used to write columns and <tr> is used to write row

11. To input data — We can use the<input> tag for it. There are many <input> tags with different types like button, submit, text and radio. <form> </form> tags are a container for different types of input elements. Also, we use the<label> tag to display a label of input type.

You can refer more to these tags by using this link. There are only fundamental tags of using HTML. If you want to learn more, you can visit W3 School Tutorials by using this link. Also, I highly recommend it.

As I told you, I would like to make a simple webpage by using simple HTML and CSS. In this blog, there is an only HTML part. You can refer to these tags and get an idea of how to make a webpage using HTML. I have made a webpage for a Hardware shop. Also, I have described the usage of each tag in front of the tags by using comments. Finally, you can see an image to preview the version of the final webpage that is made by HTML+CSS.

Gif From: HostGator
Gif From: Giphy

You deserve it! Now lets the output of these HTML tags. In the end, I have presented an image that is made by using both HTML and CSS.

Screenshot by Author — Without using CSS
Screenshot by Author — With CSS

So, I think you can get an idea about my code. If you think this is an important to you, please give me a clap & share it with another person. 🙌

😍 Thank you for reading my Third blog on Medium 😍


Knowledge Sharing Program

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store