HTML Programming Tutorial for Graduates and Engineers

Introduction

Hypertext markup language (HTML) is the basic language used to create documents for the Web

HTML is a formal Recommendation by the World Wide Web Consortium (W3C) for web pages

HTML describes the structure of Web pages using markup

Browsers use HTML Tags to render the content of the page

Writing Simple HTML Programs

Simple Hello World HTML

<!DOCTYPE html> <html> <head> <title> Hello World </title> </head> <body> <h1>Hello World </h1> </body> </html>

Login Screen Design

<!DOCTYPE html> <html lang = "en"> <head> <title> demo program </title> </head> <body style="background-color:green;margin-top:100px;margin-left:100px;"> <table style="color:white; background-color:blue;font-size:14px;font-family:verdana;width:300px;heoght:80px;"> <tr><th colspan="2" style="text-align:center; background-color:grey;">login form</th></tr> <tr><td>username</td><td><input type="text"name="fname" id="ss"></td></tr> <tr><td>password</td><td><input type="password" name="fname" id="ss"></td></tr> <tr><td>User type </td><td> <select name="JOB"> <option>Admin</option> <option>User</option> <option>Security</option> </select> </td> </tr> <tr><td colspan="2" align="center"><input type="button" name="login"id ="login" value="login"> <input type="button" name="cancel"id ="cancel" value="cancel"></td></tr> </tr> </table> </body> </html>

Using Simple Progress Bar

<!DOCTYPE html> <html lang = "en"> <body> <progress id='p' max='6770'><span>0</span>%</progress> </body> </html>