ad

Saturday, December 31, 2022

html student basic program web designing

            



         HTML 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 


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>  

In the Raigad area, Raigad is a hill fort that is around 25 kilometers from Mahad. In 1674 AD, Chhatrapati Shivaji made this fort his capital after renovating it. There is a rope-way provided at Raigad Fort that allows one to quickly ascend from the ground to the fort.

 </P>

</div>

</body>

</html>


Text colour program CSS 

output 


Text colour

 Related post 

html iframe

feedback form html & css with source code

html anchor tag

Friday, December 2, 2022

Horizontal navigation bar Web designing


 
Horizontal navigation bar

   The horizontal navigation bar is a most common type of  the navigation menu bar. It list the major page 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 CSS 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></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 CSS  Navigation Bar 

output 


Create Navigation Bar


Related post :-

inline css in html

html iframe

html id attribute