How to use HTML and CSS to make a Simple Webpage
Focusing on HTML today
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. 😄
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 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.
<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 the<! — — >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 the<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 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.
<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>
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.
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 😍
