How to use HTML and CSS to make a Simple Webpage (HTML Part)

Kanchana Kariyawasam

Feb 20·6 min read

https://media.giphy.com/media/fwbZnTftCXVocKzfxR/giphy.gif

First of all, we should know what is HTML? HTML is Hypertext Markup Language. As you know, HTML is not a programming language. It’s a markup language. To develop a webpage, HTML is used as making a skeleton of a page, and CSS is used as making a webpage visualization. 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. In this blog, there is an only HTML coding part. You can observe the CSS part of this webpage by go through this link. https://kanchanakariyawasam98.medium.com/how-to-use-html-and-css-to-make-a-simple-webpage-css-part-1d309b23fde5

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 define a webpage as a human body. Since that, there are head and body parts in 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. 😄

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

<!DOCTYPE html>
 <html>
 <head>
 <title>Title of the document</title>
 </head><body>
 The content of the document……
 </body></html>

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.

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

<h4>Hello</h4>

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

<p>This is a example paragraph to display usage of <p> tags </p>

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

<p>hello</p> <hr> <p>how are you? </p>

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

<! — This is a comment. Comments are not displayed in the browser →

5. To display unordered bullet points.

<ul>  <li>A</li>  <li>B</li></ul>

6. To display ordered bullet points.

<ol>  <li>A</li>  <li>B</li></ol>

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

<p>Hello, How are <b>you</b></p>

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.

<p> If you click <a href=http://www.google.com/> click me</a>,you can go to the google homepage</p>

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.

<img src=www.image.com alt=”example image width=”100px” height=”100px”>

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

<table> <tr>  <th>1st column</th>  <th>2nd column</th></tr><tr>  <td>hello</td>  <td>hi</td> </tr></table>

11. To input data — We can use <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 <label> tag to display a label of input type.

<form action=”/action_page.php”>
 <label for=”fname”>First name:</label>
 <input type=”text” id=”fname” name=”fname”><br><br>
 <label for=”lname”>Last name:</label>
 <input type=”text” id=”lname” name=”lname”><br><br>
 <input type=”submit” value=”Submit”>
</form>

You can refer more to these tags by using this link. https://www.w3schools.com/tags/tag_input.asp. 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.

<!DOCTYPE html><html>
 <head>
   <title>My Store</title> <! — To display a webpage title -->
 </head><body><div class=”first”> <! — Start a body part of webpage --> <h2 id=”h2">Parakrama Hardware</h2> <p>You can choose any item in this cart</p> <p>There are some discounts.</p> <ul> <! — In this tag we can start to make bullet points. Also there is a end tag at the end -->
 <li>If you buy more than <b>Rs1500</b>, we give <i>2% discount</i></li> <! — <li> tag is used to write bullet point. And <i> tag is used to italic word. Also there are end tags for both tags -->
 <li>If you buy more than <b>Rs2500</b>, we give <i>4% discount</i></li>
 <li>If you buy more than <b>Rs5500</b>, we give <i>6% discount</i></li>
 </ul></div>
 <table style=”width: 100%;”> <! — This tag is used to start a write contents of a table. Also, there is a CSS part called inline CSS. I have used it to chage a width of a table.100% mean is we want to display a table as full width. --> <tr> <! — To start for writing contents of a row -->
 <td> <! — To start for writing contents of a column --> <img src=”wire.jpg” alt=”wire image” width=”200px” height=”200px”><br> <! — Insert a image that is stored in my PC. Also you can use a image that has in another webpage by copy the link of it to src attribute --> <p>Electrical Wires</p>
 <p><b>Rs.1000</b><input type=”button” name=”buy” value=”Buy” id=”buy1" class=”btn”></p> <! — There is a <input> tag with type of button that is used to make a button -->
 </td>
 <td>
 <img src=”item2.jpg” alt=”grinder image” width=”200px” height=”200px”><br>
 <p>Grinder</p>
 <p><b>Rs.1000</b> <input type=”button” name=”buy” value=”Buy” id=”buy2" class=”btn”></p>
 </td>
 <td>
 <img src=”item3.jpg” alt=”socket” width=”200px” height=”200px”><br>
 <p>Sockets</p>
 <p><b>Rs.1000</b> <input type=”button” name=”buy” value=”Buy” id=”buy3" class=”btn”></p>
 </td>
 </tr>
 <tr>
 <td>
 <img src=”item4.jpg” alt=”Tool Kit” width=”200px” height=”200px”><br>
 <p>Tool Kit</p>
 <p><b>Rs.1000</b> <input type=”button” name=”buy” value=”Buy” id=”buy4" class=”btn”></p>
 </td>
 <td>
 <img src=”item3.jpg” alt=”Sockets” width=”200px” height=”200px”><br>
 <p>Sockets</p>
 <p><b>Rs.1000</b> <input type=”button” name=”buy” value=”Buy” id=”buy5" class=”btn”></p>
 </td>
 <td>
 <img src=”wire.jpg” alt=”wire image” width=”200px” height=”200px”><br>
 <p>Electrical Wires</p>
 <p><b>Rs.1000</b> <input type=”button” name=”buy” value=”Buy” id=”buy6" class=”btn”></p>
 </td>
 </tr>
 </table></body>
</html>