Doctype HTML Head Title Title Style: Front Page

////first activity
<!DOCTYPE html>
<html>
<head>
<title>Front page</title>
<style>
u.underline
{
text-decoration-thickness: 3px;
}
img
{
border: 9px solid green;
}
*{
box-sizing: border-box;
}
.column {
float: left;
width: 22%;
padding: 10px;
height: 500px;
}
.row:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body bgcolor="limegreen">
<u class="underline"style="font-size: 30px;">
<h1 style="color: white">MENDIOLA</h1>
</u>
<img src="C:\Users\SKI\Desktop\HTML files\des.jpg" width=1340
height=250>
<div class="row">
<div class="column" style="background-color:green;">
<h1 style="color: white">Services</h1>
<ul>
<li>
<h2 style="color: white">Painting</h2>
</li>
<li>
<h2 style="color: white">Drywall</h2>
</li>
<li>
<h2 style="color: white">Renovation</h2>
</li>
<li>
<h2 style="color: white">Gardening</h2>
</li>
<li>
<h2 style="color: white">Handywall</h2>
</li>
<li>
<h2 style="color: white">Window cleaning</h2>
</li>
<li>
<h2 style="color: white">Gutter cleaning</h2>
</li>
<li>
<h2 style="color: white">Pressure
washing</h2>
</li>
<li>
<h2 style="color: white">Rubbish Removal</h2>
</li>
</ul>
</div>
<div class="column" style="background-color:white;">
<h1>Welcome</h1>
<p><h3>Google LLC is an American multinational
technology company that specializes in Internet-related services
and products, which include online advertising technologies, a
search engine, cloud computing, software, and hardware
Google was founded on September 4, 1998, by Larry
Page and Sergey Brin while they were Ph.D. students at Stanford
University in California.In 2015, Google was reorganized as a
wholly-owned subsidiary of Alphabet Inc..
Google is Alphabet's largest subsidiary and is a
holding company for Alphabet's Internet properties and
interests. Sundar Pichai was appointed CEO of
Google on October 24, 2015, replacing Larry Page,
who became the CEO of Alphabet. On December 3,
2019, Pichai also became the CEO of Alphabet
</h3></p>
</div>
<div class="column" style="background-color:white;">
<h2><mark>Contact us</mark></h2>
<hr>
<h2><b>Phone:</b>9999999999</h2>
<h2><b>Address:</b></h2>
<h3>241A,AAA street,<br>XXXX,<br>GGG</h3>
<hr>
<a href="https://www.google.com"><img src="C:\Users\
SKI\Desktop\HTML files\goo.gif"width=68 height="68"
style="border:none;"></a>
<a href="https://www.facebook.com"><img src="C:\
Users\SKI\Desktop\HTML files\fb.png"width=68 height="68"
style="border:none;"></a><br>
<a href="https://www.whatsapp.com"><img src="C:\
Users\SKI\Desktop\HTML files\wa.jpg"width=68 height="68"
<a href="https://www.instagram.com"><img src="C:\
Users\SKI\Desktop\HTML files\insta.jpg"width=68 height="68"
</p>
</div>
</div>
</body>
</html>
//2
<!DOCTYPE html>
<html>
<head>
<title>Page</title>
<style>
#left {
text-align: left;
}
#center {
text-align: center;
}
#right{
text-align: right;
}
.main{
background-image:url(bluesmoke.jpg);
background-position: center;
background-size: cover;
font-family: sans-serif;
width: 1500px;
height:750px;
margin:auto;
}
img {
border: 7px solid #555;
}
</style>
</head>
<body>
<div class="main">
<center> <h1>Click any image</h1></center>
<div id="left">
<a href="wedding.html" target="_blank"><img src =
"C:\Users\SKI\Desktop\HTML files\n1.jpg" Natural> </a>
<h4>Click here to go to wedding page</h4>
</div>
<br>
<div id="center">
<a href="Corporate.html" target="_blank"><img src=
"C:\Users\SKI\Desktop\HTML files\csbg.jpg"></a>
<h4>Click here to go to Corporate page</h4>
</div>
<br>
<div id="right">
<a href="SocialGathering.html" target="_blank"><img
src="C:\Users\SKI\Desktop\HTML files\bg1.jpg" height=150px
width=350px></a>
<h4>Click here to go to SocialGathering page</h4>
</div>
</div>
</body>
</html>
/////3
<!DOCTYPE html>
<html>
<head>
<title>Registration page</title>
<style>
u.dotted{
border-bottom: 1px dashed #999;
text-decoration: none;
}
body{
background-image: url(bg5.jpg);
}
</style>
</head>
<body>
<center><h1><u class="dotted">Registration
Form</u></h1></center>
<form>
<center>
<table>
<tr>
<td>
<label><h3><b>Name</b></h3></label>
</td>
<td style="padding-left:30px;">
<input type="text" name = "name" placeholder="Enter
Your name here...." required>
</td>
</tr>
<tr>
<td>
<label><h3><b>Username</b></h3></label>
</td>
<input type="text" name="Username" placeholder="Enter
Username here...."required>
</td>
</tr>
<tr>
<td>
<label><h3><b>Email</b></h3></label>
</td>
<input type="email" name="email"
placeholder="Enter Email here...."required>
</td>
</tr>
<tr>
<td>
<label><h3><b>Age</b></h3></label>
</td>
<input type="number" max=60 min=18
value="18"required>
</td>
</tr>
<tr>
<td>
<label><h3><b>Password </b></h3></label>
</td>
<input type="password" name="pword"
placeholder="Enter password..."required>
</td>
</tr>
<tr>
<td>
<h3>Confirm Password</h3>
</td>
<input type="password" placeholder="Confirm Password"
id="confirm_password" required>
</td>
</tr>
<tr>
<td>
<label><h3><b>Gender</b></h3> </label>
</td>
<input type="radio" name="male">Male
<input type="radio" name="female">Female
</td>
</tr>
<tr>
<td>
<label><h3><b>Address</b></h3></label>
</td>
<textarea cols=30 rows=5 placeholder="Enter
address here...."></textarea>
</td>
</tr>
<tr>
<td>
<label><h3><b>Qualification</b></h3></label>
</td>
<select>
<option value="B.E">B.E</option>
<option value="M.E">M.E</option>
<option value="Msc">Msc</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="checkbox" required><b>I accept the
terms and conditions</b></input>
</td>
</tr>
<tr>
<div align="right">
<h4><input type="submit"value =
"Submit"></h4>
</div>
</td>
</tr>
</table>
</center>
</form>
</body>
</html>
Op:
//3b
<!DOCTYPE html>
<html>
<head>
<title>Registration page</title>
<style>
.regform
{
width: 660px;
background-color: black;
margin:auto;
color:#FFFFFF;
padding: 10px 0px 10px 10px;
text-align: center;
border-radius: 15px 15px 0px 0px;
}
.main{
background-image:url(bg2.jpg);
font-family: sans-serif;
width: 660px;
heigth:300px;
margin:auto;
}
form{
padding: 50px;
}
</style>
</head>
<body>
<div class="regform"><h2>Registration Form</h2></div>
<div class="main">
<form>
<table width="600px">
<tr><td>
<label>Name </label></td>
<td>
<input type="text" name = "name" placeholder="Enter Your
name" required><br><br>
</td>
<br>
</tr>
<tr><td>
<label>Email </label></td>
<td><input type="email" name="email" placeholder="Enter
email address" required><br><br></td>
</tr>
<tr><td>
<label>Age</label></td>
<td><input type="number" max=100 min=1><br><br>
</td></tr>
<tr><td>
<label>Phone number</label>
</td>
<td><input type="text" name="Phone number" maxlength="10"
size="10" placeholder="Enter number" required><br><br></td>

</tr>
<tr><td>
<label>Role</label></td>
<td><select>
<option value="Student">Student</option>
<option value="Trainer">Trainer</option>
<option value="Professor">Professor</option>
</select><br><br>
</td></tr>
<tr><td>
<label>How much like</label></td>
<td><input type="radio" id="Definitely"
checked="checked"name="fav" value="Definitely">
<label for="Definitely">Definitely</label>
<input type="radio" id="May be" name="fav" value="May
be">
<label for="May be">May be</label>
<input type="radio" id="Not sure" name="fav" value="Not
sure">
<label for="Not sure">Not sure</label>
<br><br>
</tr>

<tr><td>
<label>What do you like most</label></td>
<td>
<select class="option" name="subject">
<option disabled="disabled" selected="selected">Select
option</option>
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="Javascript">Javascript</option>
</select><br><br></td>
</tr>
<br><br>
<tr>

<td><label>Things improved</label></td>
<td>
<input type="checkbox">Front end projects</input><br>
<input type="checkbox">Back end projects</input><br>
<input type="checkbox">Data visualization</input><br><br>
</td>
</tr>
<tr>
<td colspan="2"style="text-align:center">
<input type="submit"value = "Submit"></td></tr>
</form>
</div>
</body>
</html>
Op//
///4
<!DOCTYPE html>
<html>
<head>
<title>iframe 1 page</title>
<style>
.top
{
width: 1400px;
background-color: blue;
color:yellow;
padding: 10px 0px 10px 10px;
text-align: center;
border-radius: 15px 15px 0px 0px;
}
</style>
</head>
<body>
<h1>
<marquee direction="right" behavior="alternate"><i>
Welcome!!!....Select Your Favorite Item
</i></marquee></h1>
<div class="top"><h1>Flipkart</h1></div>

<iframe src="C:\Users\SKI\Desktop\HTML files\fpage.png"
name="iframe_a" height="600px" width="1410px" title="Iframe
Main"></iframe>
<h1><a href="iframe2.html">Click here...Go to next
page...</a></h1>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Selected Page</title>
</head>
<body>
<img src="C:\Users\SKI\Desktop\HTML files\watch.png"
height="600px" width="1300px">
<p><a href="iframe3.html" target="iframe_a">Go to login
page</a></p>
</body>
</html>
<body>
<div class="center">
<h1>Login</h1>
<form method="post">
<div class="txt_field">
<input type="text" required>
<span></span>
<label>Username</label>
</div>
<div class="txt_field">
<input type="password" required>
<span></span>
<label>Password</label>
</div>
<div class="pass">Forgot Password?</div>
<input type="submit" value="Login">
<div class="signup_link">
Not a member? <a href="#">Signup</a>
</div>
</form>
</div>
</body>
</html>

Doctype HTML Head Title Title Style: Front Page

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Doctype HTML Head Title Title Style: Front Page

Uploaded by

Copyright:

Available Formats

////first activity

You might also like