Scribd
Upload
11 views12 pages

Web Development

The document provides code for an HTML page with different HTML elements like headings, paragraphs, tables, links, images, lists, forms, and CSS code for styling the elements. It includes HTML boilerplate with DOCTYPE, html, head and body tags. The body contains various blocks and elements with attributes like colors, sizes etc styled using internal and external CSS.

Uploaded by

roughtanmayi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
11 views12 pages

Web Development

The document provides code for an HTML page with different HTML elements like headings, paragraphs, tables, links, images, lists, forms, and CSS code for styling the elements. It includes HTML boilerplate with DOCTYPE, html, head and body tags. The body contains various blocks and elements with attributes like colors, sizes etc styled using internal and external CSS.

Uploaded by

roughtanmayi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 12

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="[email protected]">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; &copy; &tm;</p>

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

<!--get to other type of input-->

<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 {

/*Makes changes in region specified*/


background-color: blueviolet;

h1.heading {

/*Makes changes in region specified*/

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>

<a href="#">list</a>

<a href="#">list</a>

<a href="#">list</a>

<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;

You might also like