ad

Thursday, May 4, 2023

html table program

 HTML TABLE  CREATE

   

     PROGRAM

             (USE FOR THE HTML CODE  )


<!doctype html>

<html> 

<table border="4">

<tr>

<th colspan="8" align="center" bgcolor="#f5c869">TIME TABLE</th>

</tr>

<tr align="center" bgcolor="#ff9999">

<th>Time</th>

<th>Monday</th>

<th>Tuesday</th>

<th>Wednesday</th>

<th>Thursday</th>

<th>Friday</th>

<th>saturday</th>

</tr>

<tr>

<td bgcolor="#ff9999">10-11</td>

<td bgcolor="#42f7c0">DCN</td>

<td bgcolor="#42f9f9">WT</td>

<td bgcolor="#42f7c0">DCN</td>

<td bgcolor="#e699ff">DS</td>

<td bgcolor="#26b0D2">English</td>

<td bgcolor="#e699ff">Maths</td>

</tr>     <tr>

<td bgcolor="#ff9999">11-12</td>

<td bgcolor="#e699ff">DS</td>

<td bgcolor="#42f9f9">Marathi</td>

<td bgcolor="#42f9f9">WT</td>

<td bgcolor="#42f7c0">DCN</td>

<td bgcolor="#bddbbd">SE </td>

<td bgcolor="#26b0D2">HINDI</td>

</tr>

<tr align="center">

<td bgcolor="#ff9999">12-1</td>

<td bgcolor="#bddbbd">SE </td>

<td bgcolor="#26b0D2">HINDI</td>

<td bgcolor="ff99b3">BMB</td>

<td bgcolor="#e699ff">DS</td>

<td bgcolor="#00ff00">Mini pro</td>

<td bgcolor="#bddbbd">SE</td>

</tr>  <tr>

<td bgcolor="#ff9999">1-1.40</td>

<td colspan="6" align="center" bgcolor="#f5c869">Lunch Break</td>

</tr>

<tr align="center">

<td bgcolor="#ff9999">1.40-2.40</td>

<td bgcolor="#26b0D2">BMB</td>

<td bgcolor="#42f7c0">DCN</td>

<td bgcolor="#e699ff">Marathi</td>

<td bgcolor="#42f9f9">Marathi</td>

<td bgcolor="#e6ffe6">DM</td>

<td bgcolor="#00ff00">Mini pro</td>

</tr>

<tr align="center">

<td bgcolor="#ff9999">2.40-3.40</td>

<td bgcolor="#42f9f9">WT</td>

<td bgcolor="#e699ff">DS</td>

<td bgcolor="#e6ffe6">DM</td>

<td bgcolor="#42f9f9">WT</td>

<td bgcolor="#00ff00">Mini pro</td>

<td>sports</td>

</tr>

<tr align="center">

<td bgcolor="#ff9999">3.40-4.40</td>

<td bgcolor="#00ff00">Mini pro</td>

<td>Library</td>

<td bgcolor="#bddbbd">SE&PM</td>

<td bgcolor="#e6ffe6">DM</td>

<td bgcolor="#00ff00">Mini pro</td>

<td>GFM</td>

</tr>

</tr>

</table>

</html>

 

 OUTPUT

html table

Related post :-

html form input type

drop down button 

Labels: ,

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 


form

Related Post :-

how to create a register form

inline css in html

html ordered list

Labels: ,

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

Labels: , ,

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

Labels:

Wednesday, November 23, 2022

CSS Menu Design

 


    CSS Menu Design

Css menu design

Webpage menus play necessary part on the web. When designing menus, usability is the key. In this section we are going to show you how to create a simple, usable and functional horizontal menu with HTML and CSS step by step. We assume that you have a basic knowledge of HTML and CSS.

A navigation bar needs standard HTML as a base. In our examples we will build the navigation bar from a standard HTML list. A navigation bar is basically a list of links, so using the <ul> and <li> elements make perfect sense.


Create Navigation menu .

 Example 

<!DOCTYPE html>

<html>

<body>

<ul>

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

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

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

 <li><a href ="#contacts">Contacts</li>

<li><a href="#downloads">Downloads</li>

</ul>

</body>

</html>


Create Navigation menu

 output 

Create Navigation menu

Create Navigation menu (margins, padding)

2. Example 

<!DOCTYPE html>

<html>

<head>

<style>

ul{

 list-style-type: none;

margin: 0px;

padding: 0px;

</style>

</head>

<body>

<h1>college of Computer science</h1>

<ul>

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

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

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

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

<li><a href="#downloads">Downloads</li>

</ul>

</body>

</html>

Create Navigation menu output 


Create Navigation menu

Vertical Navigation Bar


A vertical navigation bar is a collection of links on each page's left or right side. Merits of Vertical Navigation. A more considerable number of top-level linkages is possible.


Everything is apparent. While many of the pages on your website are hidden from view in drop-down menus in a horizontal menu, vertical menus let you list every page down the side of the page. Because of this, vertical menus are a fantastic alternative for lengthy, single-page websites and make navigating them easier.


Vertical Nevigation Bar Example

<!DOCTYPE html>

<html>

<head>

<style>

ul{

lilist-style-type: none;

margin: 0px; 

padding:0px;

}

li a{

display:block;

background-color: #f09d28;

 text-align: left;

text-decoration:none; 

width:100px;

padding: 8px 10px;

color:yellow; }

</style>

</head>

<body>

<h1>College of Computer science</h1>

<ul>

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

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

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

<li><a href="#downloads">Downloads</li>

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

</ul></body> </html>


Vertical Nevigation Bar output 


Vertical Nevigation Bar


Create a basic vertical Nevigation Bar with a background color and Change the background color of the when links when the user moves the mouse over them.

For Example

<!DOCTYPE html>

 <html> 

<head>

 <style>

 ul(list-style-type: none;

margin: 0px;

 padding: 0px;

}

li a{

display:block;

background-color:#f09d28;

text-align:left;

text-decoration:none;

width:100px;

padding: 8px 10px;

color: yellow;

}

li a:hover

{

background-color:red; 

opacity:0.8;

 color:white; }

 </style>

</head>

 <body

<h1>College of Computer science</h1>

<h3> change the link color on hover </h3>

<ul>

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

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

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

 <li><a href="#downloads">Downloads</li>

</ul> </body>

</html>

Output 
















Related post 

Labels:
Subscribe to: Comments (Atom)