Web Development

HTML
<!DOCTYPE html>
<html>
<head>
<title>My page</title>
<link rel="icon" href="https://th.bing.com/th/id/OIP.lhB-

dFEzDFWcyNdk8qYYmAHaHx?pid=ImgDet&rs=1">
</head>
<body>
<table>
<tr>
<th>name</th>
<th>age</th>
<th>class</th>
</tr>
<tr>
<td> tomi</td>
<td>20</td>
<td>13</td>
</tr>
<tr>
<td> tomi</td>
<td>20</td>
<td>13</td>
</tr>
</table>
<h2 style="color:blue; background-color: yellow;" >Hello

world</h2>
<h1>Hello world</h1>
<p title="test">
My paragraph is vwry small<br>
this is a new line ....
</p>
<pre>
hello
<hr> /*creates a line after certain spacing */
ooooooo
b ,strong , em , i
use mark to highlight

del for scratched
ins underlined text
subcript 7<sub>3
superscript 7<sup>3
</pre>
<a href = "https://www.google.co.in/"
target="_blank">Click this link</a>
/*here target decides how your new web page will open.
Here _blank opens up a new pg*/
<img src =
"https://th.bing.com/th/id/OIP.HxV79tFMPfBAIo0BBF-
sOgHaEy?pid=ImgDet&rs=1" height="200" width="200"
alt = "this image is of nature">
<a href="sulakheta22.comp@coeptech.ac.in">send me an
email</a> mailto
<ol>
<li>ul for unordered list</li>
<li>ol for ordered lists</li>
<li>dt for heading and dd for discription</li>
<li>Name 3</li>
</ol>
div to make a block
<div style="color: green;background-color:

yellowgreen;">
<h1>lalalal</h1>
<b>this is bold</b>
</div>
<div style="color: blue;background-color: violet;">
<h1>lalalal</h1>
<b>this is bold</b>
</div>
<!a--iframe gives a literal window in our html page-->
<iframe src="https://www.bing.com/images/search?
q=image%20of
%20t&form=IQFRBA&id=E63ECC7D3BFFD4D1713C4129BA
DE0588DBFCEF76&first=1&disoverlay=1" style="border:
none;"
<p>this is dollar sign &dollar; © &tm;</p>
<form action="form.html" method="POST">

<label>Name</label><br>
<input type="text" name="username"
id="username"> <br>
<label>I am not a robot</label><br>
<input type="checkbox"><br>
<label>I am not a robot</label><br>
<input type="radio"><br>
<input type="submit" value="MESSAGE">
</form>
</body>
</html>
Css
/*Has comments like c prog*/
/*Making changes to a part with specified id */
(#id .class)
#Tab {
/*Makes changes in region specified*/
background-color: lightpink;
.heading {

background-color: blueviolet;
h1.heading {
background-color: blueviolet;
h1 , pre{
background-color: greenyellow;
* {/*for text*/
color: black;
body{
background-color: beige;
/*background-image:
url(https://th.bing.com/th/id/OIP.fYfYIoke4vzKVeq6TyHgHA
HaQC?pid=ImgDet&w=1125&h=2436&rs=1);
/*background-position: bottom;*/
/*opacity: 1 /*0 to 1(opaque) tranperency;*/
p , table {
/*margin-position to specify margin */

/*margin-left: 100px; can use % instead of px*/
/*margin:50px 50px ;*/
border-style: dashed solid double;
/*border-top-style: dashed*/
border-width: 5px 18px;
border-color: purple red darkblue deeppink;
padding: 40px;
border-radius: 15%;
height: 10%;
width: 50%;
outline-style: solid;
outline-offset: 10px;
body{
text-indent: 30px;
font-family: 'Lucida Sans', Geneva, Verdana, sans-serif;
font-style: italic;
font-weight: normal;
font-size: 18px;/*can also use em */
#Tab , td ,th{
border: 2px solid black;

border-collapse: collapse;
padding: 10px;
td{
/*background-color: violet;*/
color: blue
tr:hover {
background-color: yellow;
pre{
color: blue;
text-align-last: center;
p.para{
/*vertical-align: top;*/
/*text-decoration-line: underline;
text-decoration-color:blueviolet ;
text-decoration-style: solid ;
text-decoration-thickness: 4px;*/
text-decoration: underline blueviolet solid ;
a{
text-transform: uppercase;
/*combinators in css*/
h1 + b{
color: red;
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>hi
<b> hey</b>
<br>hello
whatsupp
</h1>
<b>i am red</b>
<b>i am not red</b>
</body>
</html>
Creating a dropdown menu
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="dpd">
<button class="dropdownbutton">dropdown
button</button>
<div class="dropdown-menu">
<a href="#">list</a>
</div>
</div>
</body>
</html>
.dropdownbutton{
background-color: yellow;
color: blue;
.dropdown-menu{
display:none ;
background-color: lightblue;
}
.dropdown-menu a{
display:block;
.dropdown-menu a:hover{
background-color: white;
.dpd:hover{
background-color: green
.dpd:hover .dropdown-menu{
display: block;

Web Development

Uploaded by

Document Information

Original Description:

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

Web Development

Uploaded by

Copyright:

Available Formats

HTML

<link rel="icon" href="https://th.bing.com/th/id/OIP.lhB-

<h2 style="color:blue; background-color: yellow;" >Hello

My paragraph is vwry small<br>

this is a new line ....

<hr> /*creates a line after certain spacing */

use mark to highlight

ins underlined text

<a href = "https://www.google.co.in/"

target="_blank">Click this link</a>

Here _blank opens up a new pg*/

alt = "this image is of nature">

<li>ul for unordered list</li>

<li>ol for ordered lists</li>

<li>dt for heading and dd for discription</li>

div to make a block

<div style="color: green;background-color:

<div style="color: blue;background-color: violet;">

<!a--iframe gives a literal window in our html page-->

<p>this is dollar sign &dollar; &copy; &tm;</p>

<form action="form.html" method="POST">

<input type="text" name="username"

<label>I am not a robot</label><br>

<input type="submit" value="MESSAGE">

/*Making changes to a part with specified id */

/*Makes changes in region specified*/

/*Makes changes in region specified*/

/*Makes changes in region specified*/

/*opacity: 1 /*0 to 1(opaque) tranperency;*/

/*margin-position to specify margin */

/*margin:50px 50px ;*/

border-style: dashed solid double;

border-width: 5px 18px;

border-color: purple red darkblue deeppink;

font-family: 'Lucida Sans', Geneva, Verdana, sans-serif;

font-size: 18px;/*can also use em */

border: 2px solid black;

text-decoration: underline blueviolet solid ;

<link rel="stylesheet" href="style.css">

<b>i am not red</b>

Creating a dropdown menu

<link rel="stylesheet" href="style.css">

You might also like

<hr> /creates a line after certain spacing /

<p>this is dollar sign &dollar; © &tm;</p>

/Making changes to a part with specified id /

/Makes changes in region specified/

/Makes changes in region specified/

/Makes changes in region specified/

/opacity: 1 /0 to 1(opaque) tranperency;*/

/margin-position to specify margin /

/margin:50px 50px ;/

font-size: 18px;/can also use em /