Saturday, December 31, 2022

html student basic program web designing

                     HTML FORM

 

               form


html form is a section of a document which contains controls such as text ,Password fields,  checkboxes, radio buttons,submit tbuton, menus etc.


 Student information basic program

<!doctype html>
<html>
<head>
<title> student form html</title>
</head>
<body>
<h1>student basic information</h1>
<form>
<label for="firstname">First Name:</label><br>
<input type="text" id="firstname" name="firstname"><br>
<label for="lastname">last name:</label><br>
<input type="text" id="lastname" name="firstname"><br>
<label for ="address">Address:</label><br>
<textarea></textarea><br>
<label for="contact num">contact num:</label><br>
<input type="text" id="contact num" name="contact num"><br>
<label for="email">Email</label><br>
<input type="email" id="email" name="email"><br>
<label for="Password">password</label><br>
<input type="password" id="password" name="password"><br>
<label for="gender">Gender</label><br>
<input type="radio" id="gender" name="gender" value="male">Male<br>
<input type="radio" id="gender" name="gender" value="female">Female<br>
<input type="submit" value="submit">
</form>
</body>
</html>
</form>

Form output 

Tuesday, December 6, 2022

html background color

 

 CSS Framework 

CSS Framework


Background color Example 

<!Doctype html>
<html> 
 <head>
<meta name="viewport" contente="width=device-width, initial scale=1">
<link rel="stylesheet"
 href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
 <div classe="W3-container">
<h1>Background Colors</h1>
<p>The w3-color classes use background colors for HTML elements </p>
</div>

<div class="W3-container w3-red">
<h3>red colour</h3>
<P>Since red is the color of blood, it has historically been associated with sacrifice, danger, <br>and courage. Modern surveys in Europe and the United States show red is also the color most commonly associated with heat, activity</p>
 </div>

<div class="W3-container w3-blue"> 
<h3>Blue </h3> 
<P>The color blue represents both the sky and the sea and is associated with<br> open spaces, freedom,</p>

 <div class="w3-container w3-pink">  <h3>pink </h3>
 <P>The color pink symbolizes joy and happiness. The third Sunday of the advent <br>is said to be pink-colored according to Christianity <p>
</div>

</body>

</html>

Background color output 


Background color


Text colour program CSS 

Example 


<!DOCTYPE html>

<html>

<body>

<div class="W-container">

<h1>Text Colors</h1>

<p>The w-text-color classes defines text colors for T elements.</p> 

</div>

<div class=w-container w-text-red">

<h2>INDIA</h2>

<p>India, also known as the Republic of India, is a country is South Asia It is the seventh largest<br> country by area and with more than 3 billion people, it is the second most pupulous country as well as the most populous <br>democracy in the world, 

</div>

 <div class="w-container w-text-purple">

<h3>Maharashtra</h3>

<p>  

Raigad is a hill fort situated at about 25 Km from Mahad in the Raigad district. Chhatrapati Shivaji<br> renovated this fort and made it his capital in 1674 AD. The rope-way facility is available<br> at Raigad Fort, to reach at the fort from ground in few </P>

</div>

</body>

</html>


Text colour program CSS 

output 


Text colour

 Refer 


css border bottom property

horizontal navigation bar

front end back end


Knowledge result

Cccgggis a state in the western peninsular region of India occupying a substantial portion of the Deccan Plateau. Maharashtra is the second-most 

Friday, December 2, 2022

Horizontal navigation bar Web designing

 Horizontal navigation bar


Horizontal Nevigation Bar


   The horizontal navigation bar is the most common type of navigation menu. It lists the major pages side-by-side and is placed in the website header.


Horizontal navigation bar Example 

<!DOCTYPE html>

<html>

<head><style>

ul{

list-style-type: none;

 margin: 0; padding: 0; 

overflow: hidden; 

background-color: #f09d28;}

li {

float: left; 

border-right:1px solid #bbb; } 

li:last-child { border-right: none;}

li a{ display: block; 

color: white; 

text-align: center;

padding: 14px 16px; text-decoration: none;

background-color:#f09d28;

 color: yellow;}

li a:hover:not(.active) { background-color: #111;}

.active {background-color: #2BE40; color:red;}

 </style>

<h1> College of computer </h1>

<li><a class="active" href="#home">Home</a></li>

 <li><a href="#About">About us</a></li>

 <li><a href="#courses">Courses</a></li>

<li style="float: right"><a href="download">download</a></li>

</ul></body>

</head></html>


Horizontal navigation bar Output


Horizontal navigation bar

Create Navigation Bar Program


<!DOCTYPE HTML>

<html>

<head>

<title>Example shows </title>

<style>

body {

margin: 0px; }

ul{

list-style-type: none;

margin: 0px; padding: 0px;

width: 25%;

background-color:#f1f1f1;

position: fixed; height: 100%;

overflow: auto;

}

li a {

display: block;

color: #000;

padding: 8px 16px; text-decoration: none;

}

li a.active {

background-color: #f09d28; 

color:white; }

li a:hover:not(.active) {

background-color:#555; color:white;

}

</style>

</head>

<body>

<h2 style="text-align:center;"> Welcome ClassRoom </h2>

<ul>

<li><a class="active" href="#home">Home</a></li>

<li><a href="#about">About</a></li>

<li><a href="#meditation">Meditation</a></li>

<li><a href="#gallery">Gallery</a></li>

<li><a href="#contact">Contact</a></li>

</ul>

<div style="margin-left:25%; padding:1px 16px; height:1000px;">

 <h2>This is my Own Earth</h2>

<h4>The happiness of your life depends upon the quality of your thoughts: therefore, guard accordingly, and take care that you entertain no notions unsuitable to virtue and reasonable nature.<br>Believe in yourself when everything seems to be wrong. Believe in tomorrow will be another day</h4>

<p>I am not a Handsome guy, but I can give my hand-to-some one who needs help. <br></p>

</div>

</body>

</html>


Create Navigation Bar output 


Create Navigation Bar


Refer

css border bottom property

css background color

css border cell