LAYOUT USING TABLES

LAYOUT USING TABLES :   

The layout using Tables are the simplest and most popular way of creating layouts . These tables are arranged in columns and rows, so it can utilized in many ways according to the need .

EXAMPLE:-

<html>
<head>
<title>Layout using Tables</title>
</head>
<body>



<table width="100%" border="0">
<tr>
<td colspan="2"bgcolor="steelblue">
<center>  
<h1>BIG CATS</h1>
</center>
</td>
</tr>


<tr valign="top">

<td bgcolor="#48D1CC" width="50">
<b>Main Menu</b><br />
Tiger<br />
Lion<br />
Cheetah
</td>

<td bgcolor="#eee" width="100" 
height="200">
The tiger (Panthera tigris) 
is the largest cat species
</td>

</tr>


<tr>
<td colspan="2"bgcolor="steelblue">
<center>
Copyright  2019
</center>
</td>
</tr>

</table>
</body>
</html>

OUTPUT:-  

sk.

LAYOUT USING div ELEMENT :

LAYOUT USING div ELEMENT : 

<span style="font-size: x-large;">The div element is used in this layout it is a block level element used for grouping HTML elements.</span><span style="font-size: x-large;"><br /></span><span style="font-size: x-large;"><b><u>EXAMPLE</u></b> :</span><br />

<html>

<head>
<style>
#header {
    background-color:steelblue;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#48D1CC;
    color:white;
    height:350px;
    width:110px;
    float:left;
    padding:5px;       
}
#section {
    width:350px;
    float:left;
    padding:10px;    
}
#footer {
    background-color:steelblue;
    color:white;
    clear:both;
    text-align:center;
   padding:5px;    
}
</style>
</head>

<body>

<div id="header">
<h1>BIG CATS</h1>
</div>

<div id="nav">
Tiger<br>
Lion<br>
Cheetah<br>
</div>

<div id="section">

<h2>Tiger</h2>

<p>
The tiger (Panthera tigris) 
is the largest cat species, 
reaching a total body length 
of up to 3.38 m (11.1 ft) over
curves and weighing up to 388.7
kg (857 lb) in the wild.

<p>
The tiger populations 
occurring in small pockets 
isolated from each other, of 
which about 2,000 exist on the
Indian subcontinent.
</p>

</div>

<div id="footer">
Copyright  2015
</div>

</body>
</html>

OUTPUT:-  

sk.

HTML LAYOUT

HTML LAYOUT :-   

A webpage layout gives a structure to the website , layout is very important to give better look to the website .

WEB SITE LAYOUT :

Header : Header Defines a header for a document or a section .

Navigation : Navigation Defines a container for navigation links .

Content : Defines a section of the page with document or article and other information .

Sidebar : Defines content aside from the main content of the page .

Footer : Defines a footer for a document or a section .

Transition

Transition:-  

Transitions allows you to change property values smoothly from one value to another, over a given duration. To create a transition effect, you must specify two things, the CSS property you want to add an effect to and the duration of the effect.If the duration part is not specified, the transition will have no effect, because the default value is 0.

EXAMPLE:-

<html>
<head>
<style> 

#a {

    width: 100px;
    height: 100px;
    background: steelblue;
    -webkit-transition: width 2s; 
    transition: width 2s;

}

#a:hover {
    width: 400px;
}





#b {

width: 100px;
height: 100px;
background: turquoise;
-webkit-transition: width 2s, 
height 2s, -webkit-transform 2s; 
transition: width 2s, height 2s, 
transform 2s;

}

#b:hover {

width: 300px;
height: 300px;
-webkit-transform: rotate(180deg); 
transform: rotate(180deg);

}


</style>
</head>

<body>

<h3> Transition  </h3>

<div id ="a">
</div>

<p>Hover over the div element above, 
to see the transition effect.</p>

<div id ="b">
</div>

</body>
</html>

OUTPUT:-

ANIMATION

ANIMATION:-   

An animation lets an element gradually change from one style to another, we can change as many CSS properties and many times as we want.

• To use CSS3 animation, we must first specify some keyframes for the animation.Keyframes hold what styles the element will have at certain times.
• When we specify CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the new style at certain times.
• To get an animation to work, we must bind the animation to an element.

EXAMPLE:-

<html>
<head>
<style>
 
div {
width: 200px;
height: 150px;
background-color: steelblue;
position: relative;
-webkit-animation-name: example; 
-webkit-animation-duration: 4s; 
-webkit-animation-iteration-count:3; 
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
}


@-webkit-keyframes example {

0%   {background-color:steelblue; 
left:0px; top:0px;}
25%  {background-color:yellow; 
left:200px; top:0px;}
50%  {background-color:blue; 
left:200px; top:200px;}
75%  {background-color:green; 
left:0px; top:200px;}
100% {background-color:orange; 
left:0px; top:0px;}

}


</style>
</head>
<body>

<p><h3>ANIMATION</h3> </p>

<div></div>

</body>
</html>

OUTPUT:-

FORMS

FORMS:-  

A form on a web page allows a user to enter data that is sent to a server for processing.

EXAMPLE:-

<html>

<head>

<style> 

<!-- This is for Padded field -->

input[type=text] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
}

<!-- This is for Bordered Field -->

input[type=text1] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 4px solid steelblue;
border-radius: 4px;
}


<!-- This is for image Field -->


input[type=text2] {
width: 100%;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url
('sicon.png');
background-position: 10px 10px; 
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
}


<!-- This is for Animated Field -->


input[type=text3] {
    
width: 130px;
box-sizing: border-box;
border: 3px solid steelblue;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('sicon.png');
background-position: 10px 10px; 
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s 
ease-in-out;
transition: width 0.4s ease-in-out;
}

input[type=text3]:focus {
    width: 60%;
}

</style>

</head>

<body>

<h3>Padded Text fields:</h3>

<form>

<label for="fname">First Name
</label>
<input type="text" id="fname" 
name="fname">
<label for="fname">Last Name</label>
<input type="text" id="lname" 
name="lname">

</form>




<h3> Bordered Text Fields</h3>



<form> 

<label for="fname">First Name</label>
<input type="text1" id="fname" 
name="fname">
<label for="lname">Last Name</label>
<input type="text1" id="lname" 
name="lname">

</form>



<h3>Text Fields with icon/image </h3>

<form>

<input type="text2" name="search" 
placeholder="Search..">

</form>




<h3> Animated Text Field </h3>


<form>

  <input type="text3" name="search" 
placeholder="Search..">

</form>






</body>
</html>

OUTPUT:- 

sk.

DROPDOWN

DROPDOWN:-

A drop-down menu is a graphical control element, similar to a list box, that allows the user to choose one value from a list. When a drop-down list is inactive, it displays a single value. When activated, it displays (drops down) a list of values, from which the user may select one.

EXAMPLE:-

<html>
<head>
<style>

.dropdown1 {
    position: relative;
    display: inline-block;
}

.dropdown1-content {
    display: none;
    position: absolute;
    background-color: lightgrey;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px 
    rgba(0,0,0,0.2);
    padding: 12px 16px;
}

.dropdown1:hover .dropdown1-content {
    display: block;
}





.dropbtn {
    background-color: steelblue;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}



.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px 
    rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover 
{background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: turquoise;
}
</style>
</head>
<body>

<h2>Dropdown Menu</h2>
<p>Move the mouse over the button to 
open the dropdown menu.</p>

<div class="dropdown">

<button class="dropbtn">Dropdown
</button>

<div class="dropdown-content">

<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>

</div>
</div>

  





<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the text 
below to open the dropdown 
content.</p>

<div class="dropdown1">
  <span>Mouse over me</span>
  <div class="dropdown1-content">
    <p>Hoverable Dropdown</p>
  </div>
  </div>



</body>
</html>

OUTPUT:-

sk.1

sk.2