Wednesday 18 October 2017

NIIT HTML Q1 ACTIVITY BOOK CHAPTER 5 Online registration ~ niit post

Q1) SkyLight university organizes short term training programs for its existing students to enhance their technical and professional skills. For this, you need to create a web page named
    Register displaying the details about the training sessions in the upcoming weks. In addition, you need to add a link to the online registration form on the register web page.
    However, to participate in such programs, the sudents need to enroll by filling the online registration form. For this, you need to create a form that contains the following fields.
    *First Name
    *Last Name
    *Email ID
    *Training Program
    *Roll Number
    *Contact Number
 
 In addition, you need to add two buttons, Reset and submit, on the form, as shown in the following figure.

Ans1)


Type the code in Notepad and save the file as registration.html

<html>
<head><link type="text/css" rel="stylesheet" href="Externalstylesheet/homestylesheet.css"/>
<style>

table
{
border:solid 2px navy;
font-size:20px;
float:right;
}
th{
text-align:center;
padding:3px;
}
td
{
text-align:left;
padding:3px;
}
tr
{
background-color:white;
}
h1,img{float:right;}
a{font-family:futura MD bt;
font-weight:bold;
float:left;
font-size:20px;
position:relative;
left:1000px;
}
</style>
</head>
<body>
<table>
<tr><th><b>Training Sessions in the Upcoming Weeks</b></th></tr>
<tr>
<td>A two days training session on android this weekend. Interested candidates can apply.</td>
</tr>
<tr>
<td>training on ethical hacking from 30th march,2013 to 28th april,2013. Interested candidates can apply.</td>
</tr>
<tr>
<td>Live project Training on robotics from 5th April, 2013 to 30th April, 2013. Interested candidates can apply.</td>
</tr>
<tr>
<td>Live Project Training with certification on java in the upcoming months. Interested candidates can apply after 31st may,2013.</td>
</tr>
 </table>
<br><br><br><br><br><br><br><br><br><br>
<a href="onlineregistrationfrom.html" target="frame4"><img src="images\Register Me.png" width=170 height=120</img></a>
</body>
</html>





Type the code in Notepad and save the file as onlineregistrationform.html


<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="ExternalStylesheet/homestylesheet.css"/>

<style>
button{
border:2px solid navy;
background:White;
height:40px;
width:120px;
border-radius:5px;
background-color:navy;
color:White;
}
h{
text-color:navy;
padding-left:80px;
text-align:center;
}
td{
font-size:20px;
width:400px;
padding:5px;
}
form{
border:5px solid red;
}
h1{
color:#C71585;
}
table{
margin-right:400px;
margin-left:400px;
}
</style>
</head>
<body>
<form name="form1">
<h1>Register Online</h1>
<Table>
<tr>
<td>First Name</td>
<td><input type="text" name="usrname" PlaceHolder="Enter your First Name" required></td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="email" id="mail" PlaceHolder="Enter Your email address" pattern="[^@]+@[a-zA-z]+\.[a-zA-Z]{2,6}" required></td>
</tr>
<tr>
<td> Roll Number</td>
<td><input type="text id="roll"  PlaceHolder="Enter Your Roll Number" required></td>
</tr>
<tr>
<td>Training Program</td>
<td><select id="sel">
<option value="movie">select Training</option>
<option value="andro">Andro</option>
<option value="java">Java</option>
<option value="C">Robotics</option>
<option value="hack">ethical Hacking</option>
</select></td>
</tr>
<tr>
<td> Contact NUmber</td>
<td><input type="num" id="number" PlaceHolder="Enter Your Conatct Number" required></td>
</tr>
<tr><td>
<button type="submit">Submit</button></td>
<td><Button type="reset">Reset</button>
</td></tr>
</table>
</form>
</body>
</html>


open the mainframe.html file in google chrome.

No comments:

Post a Comment