Hello friends in this session we will see simple multiple paged website if you are visiting first time please refer volume 1, 2 and 3 for clearing previous concept . Till last session’s we saw important tags of HTML and some basic tags, image tags and hyper linking how it is used that is covered through example. I hope you tried it yourself by running HTML code I shared.
In this blog I will simple 3 paged website in which we will cover various points that is required for web designing like forms, buttons, comment section, drop down list, image hyper link, and many more. Complete source code is provided below.
Refer below image this is our home page:
Created 3 <div> spape and added <image> in those div.
There I created image maps so that when we click on image, it is redirected to new web page.
Syntax : <img src="2 states.jpg" alt="2 states" usemap="#map1" width="200" height="200">
<map name="map1">
<area shape="rect" coords="00,00,200,200" alt="2 states" href="2 states.html">
</map>
When you click 2 states book this page will open:
Dropdown list to select your city is created using <select> and provided <option> whereas <filedset> is used to group elements in the form.
When you click 3 mistakes of my life book this page will open :
Here <table> tag used to create table inside which <label> and <textarea> are placed. You need to create <tr> for new row then place <td> table data in each row.
When you click Half girlfriend book this page will open:
Here<legend> is used to create border around the form. <lable> and <textarea> is used for feedback comment. At bottom link is created for going back to home page.
To try it yourself you can simply copy paste below code as it is in notepad and save it with any name with extension .html then double click it will open in browser. Make sure to replace image path as per your image. Try it and share your experience in comments below.
---------------------------------------home.html-------------------------------------------------------------------------------------
<!DOCTYPE html>
<meta name="robots" content="noindex">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Best selling Book</title>
</head>
<body bgcolor="pink">
<center>
<!-- Header tag used to display website home page-->
<header>
<h1>Chetan Bhagat best selling </h1>
</header>
<!-- paragraph tag used to write content about books -->
<p>In this websites we will see best selling books from Chetan Bhagat.</p>
<p> You might had seen his books or even movie based on his books.</P>
<!-- Div tag used to block a section in website-->
<div>
<img src="2 states.jpg" alt="2 states" usemap="#map1" width="200" height="200">
<map name="map1">
<area shape="rect" coords="00,00,200,200" alt="2 states" href="2 states.html">
</map>
</div>
<div>
<img src="3 mistakes.jpg" alt="3 mistakes" usemap="#map2" width="200" height="200">
<map name="map2">
<area shape="rect" coords="00,00,200,200" alt="3 mistakes" href="3 mistakes.html">
</map>
</div>
<div>
<img src="half gf.jpg" alt="Half Girlfriend" usemap="#map3" width="200" height="200">
<map name="map3">
<area shape="rect" coords="00,00,200,200" alt="Half Girlfriend" href="HalfGF.html">
</map>
</div>
<!-- footer tag used to collect feedback through mail from user-->
<footer>
<p><a href="mailto:Vighneshgadekar.13@gmail.com">Click to give feedback</a></p>
</footer>
<center>
</body>
</html>
------------------------------------------------ 2 states.html------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<body>
<img src="2 states.jpg" alt="2 states" width="200" height="400">
<form action="Home.html">
<fieldset>
<legend><h2>You are from which states</h2></legend>
<label for="states">Choose your state:</label>
<select name="states" id="states">
<option value="volvo">Kolkata</option>
<option value="saab">TamilNadu</option>
<option value="opel">Maharashtra</option>
<option value="audi">Punjab</option>
</select>
</fieldset>
</form>
Click <a href="home.html"> here </a>to return home page without commenting
</body>
</html>
-----------------------------------------------half GF.html-----------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<body>
<img src="half gf.jpg" alt="Half Girlfriend" width="200" height="400">
<form action="Home.html">
<fieldset>
<legend><h2>Half Girlfriend</h2></legend>
<label for="Comment">Comment:</label><br>
<textarea id="Comment" name="Comment" rows="4" cols="50">
Click the "Submit" button and the form-data will be sent to a home page.
</textarea><br>
<input type="submit" value="Submit">
</fieldset>
</form>
Click <a href="home.html"> here </a>to return home page without commenting
</body>
</html>
--------------------------------------------3 mistakes.html------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<body>
<img src="3 mistakes.jpg" alt="3 mistakes" width="200" height="400">
<form action="Home.html">
<fieldset>
<legend><h2>mention your 3 mistakes</h2></legend>
<table>
<tr>
<td><label for="mistakes1">First mistake : </label></td>
<td><textarea id="mistakes1" name="mistakes1" rows="4" cols="50"> </textarea></td>
</tr>
<tr>
<td><label for="mistakes2">Second mistake:</label></td>
<td><textarea id="mistakes2" name="mistakes2" rows="4" cols="50"> </textarea></td>
</tr>
<tr>
<td><label for="mistakes3">Third mistake : </label> </td>
<td><textarea id="mistakes3" name="mistakes3" rows="4" cols="50"> </textarea></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="Submit"></td>
</tr>
</table>
</fieldset>
</form>
Click <a href="home.html"> here </a>to return home page without commenting
</body>
</html>
Comments
Post a Comment