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

https://media.giphy.com/media/fwbZnTftCXVocKzfxR/giphy.gif
Title of the webpage
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document……
</body>
</html>
<h4>Hello</h4>
<p>This is a example paragraph to display usage of <p> tags </p>
<p>hello</p> <hr> <p>how are you? </p>
<! — This is a comment. Comments are not displayed in the browser →
<ul>  <li>A</li>  <li>B</li></ul>
<ol>  <li>A</li>  <li>B</li></ol>
<p>Hello, How are <b>you</b></p>
<p> If you click <a href=http://www.google.com/> click me</a>,you can go to the google homepage</p>
<img src=www.image.com alt=”example image width=”100px” height=”100px”>
<table> <tr>  <th>1st column</th>  <th>2nd column</th></tr><tr>  <td>hello</td>  <td>hi</td> </tr></table>
<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>
<!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>
Without using CSS
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. 🙌

Undergraduate of University of Moratuwa, Faculty of Information Technology

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