Learn HTML for Beginners-Part-2
Learn HTML for beginners
Introduction
Introduction to HTML? Hpertext Markup Language(HTML) played a vital role in launching the web as we know today. Time Berners Lee while woring in CERN Lab has developed the language and the journey of html reached today's HTML5 version. As a result of html language introdocution the handling of structure and relating to the pages helped developers to connect and send information , which marked the beginning of Internet era. Cascading Sytle Sheets(CSS) in suport with html language provided substantial benefits to the web page by adding more flexibility and easy understanding and also made it design perfect with colours and styles being added to the web pages. By the introduction of javascript, which helped in achieving interactive websites and web pages became more flexible and appealing.
Lists and Tables
The lists and Tables in html helps in arranging the data and menu lists for recipes etc. in a sophisticated and design it beautifully and represent the data in a very clear manner for understanding the concept by common man. In this way all the items and descriptions arranged in a sequency, easy access and reading possible
First of all we will do with the list items using ul code then we will repeat the same ol code, see how it behave
<head>
<title> My Web Page </title>
</head>
<body>
<ul>
<li> Apple </li>
<li> Orange </li>
<li> Grapes </li>
<li> Banana </li>
</ul>
</body>
</html>
- Apple
- Orange
- Grapes
- Banana
<head>
<title> My Web Page </title>
</head>
<body>
<ol>
<li> Apple </li>
<li> Orange </li>
<li> Grapes </li>
<li> Banana </li>
</ol>
</body>
</html>
- Apple
- Orange
- Grapes
- Banana
Tables in html
Let us learn how tables behave in the same way, how to code a table for systematic data presentation
<head>
<title> My Web Page </title>
</head>
<body>
<table>
<th> Name of Fruit </th>
<td> Apple </td>
<td> Orange </td>
</table>
</body>
</html>
| Name of Fruit |
|---|
| Apple |
| Orange |
Tables in html
We need Forms to handle various occasion where data needs to be filled in a form and the when filtered the form data will be saved in a web page or in google sheets.
<head>
<title> My Web Page </title>
</head>
<body>
<form action="#" method="post">
<label for ="name">Name:</label> <input="text" id="name" name="name" required>
<label for ="email">Email:</label> <input="email" id="email" name="email" required>
<label for ="password">Password:</label> <input="password" id="password" name="password">
<label for ="course">Select Course:</label> <select id="course" name="course">
<option>HTML</option> <option>CSS</option> <option>Javascript</option> <option>PHP</option> </select>
<label>Gender</label> <input type="radio" name="gender">Male <input type="radio" name="gender">Female
<label for ="message">Message:</label> <textarea id="message" name="message" rows="4"></textarea>
</form>
</body>
</html>
Example: Simple Form
when you click on the submit button the data will be transferred to excel sheet or google sheet or even for temporary purpose to the web page. Normally for transfer of data PHP along with mysql or sqlite will provide better safety. The html will be used for display of the form and we can save the form separate as form.html