Wednesday, 21 December 2016

HTML Menu

<!doctype html>
<html>
<head>

<style>
ul, li{ padding:0px}
ul{ list-style:none}
a{ text-decoration:none}
.navtop { background:#333; height:40px; color:#fff}
.navtop h3{ padding:5px; color:black; text-shadow:0px 0px 1px red; text-shadow: 1px 1px 1px red, -1px -1px 1px blue;}
.navtop > ul{ float:left; position:relative; z-index:1; margin:0px}
hgroup{ float:left}
.navtop form{ float:right; padding:10px 10px}
.navtop > ul > li{ float:left; border-right:1px solid #fff; }
.navtop ul li a{ display:block; padding:10px 20px; color:#ccc}
.navtop ul li a:hover{ background:#f00; color:#fff}
.navtop ul .last{ border:none}
.navtop > ul > li:hover > ul{ display:block}
.navtop > ul > li > ul > li:hover ul{ display:block}
.footer{ background:#333; color:#ccc; text-align:center}
.clear{ clear:both}
.navtop > ul > li > ul li{ height:41px}
.navtop > ul > li > ul{ display:none; position:absolute; background:#333; }
.navtop > ul > li > ul > li > ul{ display:none; position:relative; left:132px; top:-41px; background:#333}
.navtop ul ul li{ border-top:1px solid #fff;}
</style>

</head>
<body >

        <p>Browser's view :</p>
        <div style="height:400px" class="highlight section" id="article3">
            <div class="navtop">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a>
                    <ul>
                        <li><a href="#">Why We</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">History</a></li>
                    </ul>
                </li>
                <li><a href="#">Career</a></li>
                <li><a href="#"><b class="caret"></b>Training</a>
                    <ul>
                        <li><a href="#">Asp.net</a>
                            <ul>
                                <li><a href="#">Core  Asp.net</a></li>
                                <li><a href="#">Adv .Net</a></li>
                                <li><a href="#">MVC</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Web Designing</a>
                            <ul>
                                <li><a href="#">HTML</a></li>
                                <li><a href="#">CSS</a></li>
                                <li><a href="#">Photoshop</a></li>
                            </ul>               
                        </li>
                        <li><a href="#">Java</a>
                            <ul>
                                <li><a href="#">Core Java</a></li>
                                <li><a href="#">Adv Java</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Php</a>
                            <ul>
                                <li><a href="#">Core Phpp</a></li>
                                <li><a href="#">My Sql</a></li>
                                <li><a href="#">Wordpress</a></li>
                                <li><a href="#">Joomla</a></li>
                            </ul>
                        </li>
                        <li><a href="#">SQT</a>
                            <ul>
                                <li><a href="#">HTML</a></li>
                                <li><a href="#">CSS</a></li>
                                <li><a href="#">Photoshop</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li class="last"><a href="#">Contact</a></li>
            </ul>
            <br>
            <h3>CSS Drop Down Menu</h3>
            </div>
        </div>
        <hr>
        </body>
</html>

at No comments:
Labels:

HTML FORM LAYOUT USING DIV


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>my webpage</title>
<style>
*{
    margin:0px;
    padding:0px;
}
.wrap{
    width:960px;            
    height:auto;
    border:1px solid red;
}
.header{
    height:100px;
    background: #21618c;
}
.nav{
    height:50px;
    background: #1abc9c;
}
.container{
    background: #f9e79f ;
}
.left{
    width:30%;
    height:250px;
    float:left;
    background: #f39c12 ;
}
.right{
    width:70%;
    height:250px;
    float:left;
}
.clear{
    clear:both;    // Clear Both will clear floating from both sides.
}
.footer{
    height:80px;
    background: #1abc9c;
}
</style>
<head>
<body>
<FONT COLOR="WHITE">
    <div class="wrap">
        <div class="header"><p> THIS IS HEADER  <p align = "middle"><a href=index.html>HOME</a> |
<a href=contact.html>CONTACT</a> |
<a href=about.html>ABOUT</a></p></p></div>
       
        <div class="nav"></div>
        <div class="container">
            <div class="left"><p> THIS IS LEFT CONTAINER</p> </div>
           
            <div class="right"><p> THIS IS RIGHT CONTAINER</p></div>
           
            <div class="clear"></div>
        </div>
        <div class="footer"> <p> THIS IS FOOTER</p></div>
       
    </div>
    </div>
    </FONT>
</body>
</html>

at No comments:
Labels:

Login Form using div tag

<!DOCTYPE>
<html> 
<head>
<style>
.loginform{ 
    padding:10px; 
    border:1px solid pink; 
    border-radius:10px; 
    width:300px;
    margin-top:10px; 
} 
.formheading{ 
    background-color:red; 
    color:white; 
    padding:4px; 
    text-align:center; 
} 
.sub{ 
background-color:red; 
padding: 7px 40px 7px 40px; 
color:white; 
font-weight:bold; 
margin-left:70px; 
border-radius:5px; 
} 
</style>
</head>
<body> 
<div class="loginform"> 
<h3 class="formheading">Please Login</h3> 
<form action="LoginServlet" method="post"> 
<table> 
<tr><td>Email:</td><td><input type="email" name="email"/></td></tr> 
<tr><td>Password:</td><td><input type="password" name="password"/></td></tr> 
<tr><td colspan="2" style="text-align:center"><input class="sub" type="submit" value="login"/></td></tr> 
</table> 
</form> 
</div> 
</body>
</html> 


at No comments:
Labels:

HTML Div tag

<html>
<head>
<title>DIV TAGS</title>
</head>
<body>
<div id="myDiv" name="myDiv" title="Example Div Element" style="font-family: Helvetica; font-size: 20pt; border: 2px solid black;">
  <div id="subDiv1" name="subDiv1" title="Subdivision Div Element" style="color: #FF0000; border: 3px dotted black;">
    <h5>Section 1</h5>
    <p>This is Paragraph 1...............</p>
    <p>This is Paragraph 2...............</p>
  </div>
  <br />
  <div id="subDiv2" name="subDiv2" title="Subdivision Div Element" style="color: GREEN;border: 2px dashed black;">
    <h5>Section 2</h5>
    <p>This is paragraph 3...............</p>
    <p>This is paragraph 4...............</p>
  </div>
</div>
</body>
</html>


at No comments:
Labels:

Tuesday, 20 December 2016

HTML FORM ACCEPTING AND DISPLAYING USER DETAILS

<!DOCTYPE html>
<html>
    <head>
        <title>Web Form</title>
 <script type="text/javascript">

          function addtext()
          {
             var fname = document.myform.first_name.value;
             var lname = document.myform.last_name.value;
             var email = document.myform.email_ID.value;
             var msg=document.myform.msg_txt.value;
             var Sex=document.myform.Sex_sp.value;
           
             document.writeln("Thank you! You have just entered the following:");
             document.writeln("<pre>");
             document.writeln("First Name    : " + fname);
             document.writeln("Last Name     : " + lname);
             document.writeln("Email Address : " + email);
             document.writeln("Message       : " + msg);
             document.writeln("Sex           : " + Sex);
          }
       
         
        </script>
   
           </head>
    <body>
        <h1>CONTACT US!</h1>
               <form name="myform">
                    First name: <input type="text" name="first_name" value=""><br/>
                    Last name : <input type="text" name="last_name" value=""><br/>
                    E-mail    : <input type="email" name="email_ID" value=""><br/><br/>
                    Message   : <br/><textarea name="msg_txt" ></textarea><br/>
                    <p>Sex:</p>
                    <input type="radio" name="Sex_sp" value="male">Male
                    <input type="radio" name="Sex_sp" value="female">Female<br/><br/>
                    <input type="Submit" value="Submit" onClick="addtext()">
    <button type="button" class="cancelbtn">Cancel</button>
                   
                </form>
         
    </body>
</html>



at No comments:
Labels:

CREATING INDIAN FLAG USING HTML TEXT BOXES

<!doctype html>
<html>
<head>
<title> FLAG </title>
</head>
<body bgcolor="white">
<center>
<form>
<textarea name="myTextBox" cols="50" rows="5"   style="background-color:orange">
</textarea>
<br>
<img src="2000px-Ashoka_Chakra.svg.png" width="100px" height="80px">
</img>
<br>
<textarea name="myTextBox" cols="50" rows="5" style="background-color:green">
</textarea>
<br>
</form>
</center>
 <body >

<hr color="orange" size="80">
<font face="algerian" color="blue" size="8">
<marquee scrolldelay="10" direction="left" behaviour="alternate" > Indian Flag </marquee>
</font>
<hr color="green" size="80">
</body>

</body>
</html>

at No comments:
Labels:

HTML Caliculator

<html>
<head>
<title> calculator </title>
<style>
.roundtable
{
    background-color:blue;
    border: 20px solid red;
    border-radius: 20px;
}

.rou
{
    border-radius: 25px;
    border: 20px solid red;
    padding: 20px;
    width: 300px;
    height: 250px;
}
</style>
</head>
<body>
<br/>
<form Name="calc">
<font size="6">
<table class="rou" align="center"  border="5" bgcolor="pink">
<caption align="bottom"> <font face="algerian" size="2" color="red" >Simple Calculator</font></caption>
<tr>
<td colspan="4"><input size="33" type="text" Name="display"></td>
</tr>
<tr align="center">
<td><input type="button" value="0" OnClick="calc.display.value+='0'"></td>
<td><input type="button" value="1" OnClick="calc.display.value+='1'"></td>
<td><input type="button" value="2" OnClick="calc.display.value+='2'"></td>
<td><input type="button" value="+" OnClick="calc.display.value+='+'"></td>
</tr>
<tr align="center">
<td><input type="button" value="3" OnClick="calc.display.value+='3'"></td>
<td><input type="button" value="4" OnClick="calc.display.value+='4'"></td>
<td><input type="button" value="5" OnClick="calc.display.value+='5'"></td>
<td><input type="button" value="-" OnClick="calc.display.value+='-'"></td>
</tr>
<tr align="center">
<td><input type="button" value="6" OnClick="calc.display.value+='6'"></td>
<td><input type="button" value="7" OnClick="calc.display.value+='7'"></td>
<td><input type="button" value="8" OnClick="calc.display.value+='8'"></td>
<td><input type="button" value="x" OnClick="calc.display.value+='*'"></td>
</tr>
<tr align="center">
<td><input type="button" value="9" OnClick="calc.display.value+='9'"></td>
<td><input type="button" value="C" OnClick="calc.display.value=''"></td>
<td><input type="button" value="=" OnClick="calc.display.value=eval(calc.display.value)"></td>
<td><input type="button" value="/" OnClick="calc.display.value+='/'"></td>
</tr>
</table>
</form></font>
</body>
</html>


at No comments:
Labels:

HTML Anchor tag

<!Doctype html>
<html>
<head>
<title> anchor tag </title>
</head>
<body>
<a href="flag.html">
<FONT FACE="ARIAL" SIZE="6">
click on this to view the external anchor tag image </a> </FONT>
<HR>
<br> CLICK ON THIS TO VIEW THE NOTES ON <a href="#WINDOWS">  WINDOWS 7 </a>
<br> CLICK ON THIS TO VIEW THE NOTES ON <a  href="#OS">  OS </a>
<br> CLICK ON THIS TO VIEW THE NOTES ON <a href="#LINUX"> LINUX </a>
<HR>

<a name="WINDOWS"> </a>
<font face="ELEPHANT" color="red" size="14">
<P ALIGN="JUSTIFY">
<BR> Windows 7 <BR>
(codenamed Vienna, formerly Blackcomb[8]) is a
personal computer operating system developed by Microsoft.
It is a part of the Windows NT family of operating systems. Windows 7 was released to manufacturing on July 22, 2009, and became generally available on October 22, 2009,[9] less than three years after the release of its predecessor, Windows Vista. Windows 7's server counterpart, Windows Server 2008 R2, was released at the same time.
Windows 7 was primarily intended to be an incremental upgrade
to the operating system intending to address Windows Vista's poor critical reception while maintaining hardware and software compatibility. Windows 7 continued improvements on Windows Aero (the user interface introduced in Windows Vista) with the addition of a redesigned taskbar that allows applications to be "pinned" to it, and new window management features. Other new features were added to the operating system, including libraries, the new file sharing system HomeGroup, and support for multitouch input. A new "Action Center" interface was also added to provide an overview of system security and maintenance information, and tweaks were made to the User Account Control system to make it less intrusive. Windows 7 also shipped with updated versions of several stock applications, including Internet Explorer 8, Windows Media Player, and Windows Media Center.
In contrast to Windows Vista, Windows 7 was generally
praised by critics, who considered the operating system to be a major improvement over its predecessor due to its increased performance, its more intuitive interface (with particular praise devoted to the new taskbar), fewer User Account Control popups, and other improvements made across the platform. Windows 7 was a major success for Microsoft; even prior to its official release, pre-order sales for 7 on the online retailer Amazon.com had surpassed previous records. In just six months, over 100 million copies had been sold worldwide, increasing to over 630 million licenses by July 2012, and a market share of 49.05% of "desktop operating systems" as of June 2016[10] according to Net Applications, making it the most widely used version of Windows.
</P> </font>

<a name="OS"> </a>
<font face="ALGERIAN" color="BLUE" size="14">
<P ALIGN="JUSTIFY">
<BR> OS <BR>
Apple Inc. is an American multinational technology company headquartered in Cupertino, California, that designs, develops, and sells consumer electronics, computer software, and online services. Its hardware products include the iPhone smartphone, the iPad tablet computer, the Mac personal computer, the iPod portable media player, the Apple Watch smartwatch, and the Apple TV digital media player. Apple's consumer software includes the OS X and iOS operating systems, the iTunes media player, the Safari web browser, and the iLife and iWork creativity and productivity suites. Its online services include the iTunes Store, the iOS App Store and Mac App Store, and iCloud.
Apple was founded by Steve Jobs, Steve Wozniak, and Ronald Wayne in April 1976 to develop and sell personal computers.[5] It was incorporated as Apple Computer, Inc. in January 1977, and was renamed as Apple Inc. in January 2007 to reflect its shifted focus toward consumer electronics. Apple (NASDAQ: AAPL) joined the Dow Jones Industrial Average in March 2015.[6]
Apple is the world's largest information technology company by revenue, the world's largest technology company by total assets,[7] and the world's second-largest mobile phone manufacturer.[8] In November 2014, in addition to being the largest publicly traded corporation in the world by market capitalization, Apple became the first U.S. company to be valued at over US$700 billion.[9] The company employs 115,000 permanent full-time employees as of July 2015[4] and maintains 478 retail stores in seventeen countries as of March 2016.[1] It operates the online Apple Store and iTunes Store, the latter of which is the world's largest music retailer. There are over one billion actively used Apple products worldwide as of March 2016.[10]
Apple's worldwide annual revenue totaled $233 billion for the fiscal year ending in September 2015.[3] This revenue generation accounts for approximately 1.25% of the total United States GDP.[11] The company enjoys a high level of brand loyalty and, according to Interbrand's annual Best Global Brands report, has been the world's most valuable brand for 3 years in a row,[12][13] with a valuation in 2015 of $170.3 billion.[14] The corporation receives significant criticism regarding the labor practices of its contractors and its environmental and business practices, including the origins of source materials.
In August 2016, after a three-year investigation by the EU's competition commissioner that concluded that Apple received "illegal state aid" from Ireland, the EU ordered Apple to pay 13 billion euros ($14.5 billion), plus interest, in unpaid taxes.[15]
</p>

<a name="LINUX"> </a>
<font face="ARIAL" color="ORANGE" size="14">
<P ALIGN="JUSTIFY">
<BR> Linux <BR>
Linux (pronounced Listeni/ˈlɪnəks/ lin-əks[9][10] or, less frequently, /ˈlaɪnəks/ lyn-əks[10][11]) is a Unix-like and mostly POSIX-compliant[12] computer operating system (OS) assembled under the model of free and open-source software development and distribution. The defining component of Linux is the Linux kernel,[13] an operating system kernel first released on October 5, 1991 by Linus Torvalds.[14][15] The Free Software Foundation uses the name GNU/Linux to describe the operating system, which has led to some controversy.[16][17]
Linux was originally developed as a free operating system for personal computers based on the Intel x86 architecture, but has since been ported to more computer hardware platforms than any other operating system.[18] Because of the dominance of Android on smartphones, Linux has the largest installed base of all general-purpose operating systems.[19] Linux is also the leading operating system on servers and other big iron systems such as mainframe computers and virtually all fastest supercomputers,[20][21] but is used on only around 2.3% of desktop computers[22][23] when not including Chrome OS, which has about 5% of the overall and nearly 20% of the sub-$300 notebook sales.[24] Linux also runs on embedded systems, which are devices whose operating system is typically built into the firmware and is highly tailored to the system; this includes smartphones and tablet computers running Android and other Linux derivatives,[25] TiVo and similar DVR devices, network routers, facility automation controls, televisions,[26][27] video game consoles and smartwatches.[28]
The development of Linux is one of the most prominent examples of free and open-source software collaboration. The underlying source code may be used, modified and distributed—​​commercially or non-commercially—​​by anyone under the terms of its respective licenses, such as the GNU General Public License. Typically, Linux is packaged in a form known as a Linux distribution (or distro for short) for both desktop and server use. Some of the most popular mainstream Linux distributions are Arch Linux, CentOS, Debian, Fedora, Gentoo Linux, Linux Mint, Mageia, openSUSE and Ubuntu, together with commercial distributions such as Red Hat Enterprise Linux and SUSE Linux Enterprise Server. Distributions include the Linux kernel, supporting utilities and libraries, many of
</p>
</body>
</html>


at No comments:
Labels:

Monday, 19 December 2016

HTML Marqueue

<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee>This is basic example of marquee</marquee>
<marquee width="50%">This example will take only 50% width</marquee>
<marquee direction="right">This text will scroll from left to right</marquee>
<marquee direction="Left">This text will scroll from right to left</marquee>
<marquee direction="up">This text will scroll from bottom to up</marquee>
<marquee direction="down">This text will scroll from top to down</marquee>
</body>
</html>


at No comments:
Labels:

HTML image

<!DOCTYPE html>
<html>
<head>
<title>HTML embed Tag</title>
</head>
<body>
<img src="yourimage.png" alt="Alternative Media" ></noembed>
</embed>
</body>
</html>


at No comments:
Labels:

HTML SUBMIT, RESET, OK BUTTONS

<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset"  value="Reset" />
<input type="button" name="ok" value="OK"  />
<input type="image" name="imagebutton" src="/html/images/logo.png" />
</form>
</body>
</html>


at No comments:
Labels: , ,

HTML File Upload Box 

<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type="file" name="fileupload" accept="image/*" />
</form>
</body>
</html>
 
 
 
at No comments:
Labels:

HTML dropdown list

<!DOCTYPE html>
<html>
<head>
<title>Select Box Control</title>
</head>
<body>
<form>
<select name="dropdown">
<option value="Maths" selected>Maths</option>
<option value="Physics">Physics</option>
</select>
</form>
</body>
</html>


at No comments:
Labels:

HTML RADIO BUTTON

<!DOCTYPE html>
<html>
<head>
<title>Radio Box Control</title>
</head>
<body>
<form>
<input type="radio" name="subject" value="maths"> Maths
<input type="radio" name="subject" value="physics"> Physics
</form>
</body>
</html>

at No comments:
Labels:

HTML CheckBox 

<!DOCTYPE html>
<html>
<head>
<title>Checkbox Control</title>
</head>
<body>
<form>
<input type="checkbox" name="maths" value="on"> Maths
<input type="checkbox" name="physics" value="on"> Physics
</form>
</body>
</html>
 
 
 
at No comments:
Labels:

Multiple Line Input Control 

<!DOCTYPE html>
<html>
<head>
<title>Multiple-Line Input Control</title>
</head>
<body>
<form>
Description : <br />
<textarea rows="5" cols="50" name="description">
Enter description here...
</textarea>
</form>
</body>
</html>
 
 
at No comments:
Labels:

HTML PASSWORD CONTROL

<!DOCTYPE html>
<html>
<head>
<title>Password Input Control</title>
</head>
<body>
<form >
User ID :  <input type="text" name="user_id" />
<br>
Password:  <input type="password" name="password" />
</form>
</body>
</html>


at No comments:
Labels:

HTML INPUT BOX

<!DOCTYPE html>
<html>
<head>
<title>Text Input Control</title>
</head>
<body>
<form >
First name:  <input type="text" name="first_name" />
<br>
Last name:  <input type="text" name="last_name" />
</form>
</body>
</html>


at No comments:
Labels:

Saturday, 17 December 2016

HTML FORMAT TABLE

<!DOCTYPE html>
<html>
<head>
<style>
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

</body>
</html>
at No comments:
Labels:

HTML IMAGE FLOAT

<!DOCTYPE html>
<html>
<body>

<p><strong>Float the image to the right:</strong></p>
<p>
<img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.
</p>

<p><strong>Float the image to the left:</strong></p>
<p>
<img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image. 
</p>

<p>Please use the CSS float property. The align attribute is deprecated in HTML 4, and not supported in HTML5.</p>

</body>
</html>
at No comments:
Labels:

HTML SPAN

<!DOCTYPE html>
<html>
<head>
<title>Span Tag Example</title>
</head>
<body>
<p>This is the example of <span style="color:green">span tag</span> and the <span style="color:red">div tag</span> alongwith CSS</p>
</body>
</html>

at No comments:
Labels:

HTML TABLE

<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border="1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>

at No comments:
Labels:

Friday, 16 December 2016

HTML HYPER LINKS COLORS

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
    color: green;
    background-color: transparent;
    text-decoration: none;
}
a:visited {
    color: pink;
    background-color: transparent;
    text-decoration: none;
}
a:hover {
    color: red;
    background-color: transparent;
    text-decoration: underline;
}
a:active {
    color: yellow;
    background-color: transparent;
    text-decoration: underline;
}
</style>
</head>
<body>

<p>You can change the default colors of links</p>

<a href="html_images.asp" target="_blank">HTML Images</a>

</body>
</html>
at No comments:
Labels:

HTML BORDER

<!DOCTYPE html>
<html>
<head>
<style>
p {
    border: 1px solid powderblue;
    margin: 50px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

</body>
</html>

at No comments:
Labels:

HTML BACKGROUND COLOR

<!DOCTYPE html>
<html>
<body>

<h2 style="background-color:red">
Background-color set by using red
</h2>

<h2 style="background-color:orange">
Background-color set by using orange
</h2>

<h2 style="background-color:yellow">
Background-color set by using yellow
</h2>

<h2 style="background-color:blue;color:white">
Background-color set by using blue
</h2>

<h2 style="background-color:cyan">
Background-color set by using cyan
</h2>

</body>
</html>
at No comments:
Labels:

COMMENTS IN HTML

<!DOCTYPE html>
<html>
<body>

<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Comments are not displayed in the browser -->

</body>
</html>
at No comments:
Labels:

HTML COMPUTER CODE

<!DOCTYPE html>
<html>
<body>

<p>Some programming code:</p>

<code>
var x = 5;<br>
var y = 6;<br>
document.getElementById("demo").innerHTML = x + y;
</code>

</body>
</html>
at No comments:
Labels:

HTML ADDRESS

<!DOCTYPE html>
<html>
<body>

<p>The HTML address element defines contact information (author/owner) of a document or article.</p>

<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

</body>
</html>


at No comments:
Labels:

HTML QUOTE

<!DOCTYPE html>
<html>
<body>

<p>Browsers usually indent blockquote elements.</p>

<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>

</body>
</html>


at No comments:
Labels:

HTML TEXT ALIGN

<!DOCTYPE html>
<html>
<body>

<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>

</body>
</html>
at No comments:
Labels:

HTML FONT SIZE

<!DOCTYPE html>
<html>
<body>

<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>

</body>
</html>

at No comments:
Labels:

HTML FONT STYLE

<!DOCTYPE html>
<html>
<body>

<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>

</body>
</html>

at No comments:
Labels:

HTML BACKGROUND

<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>



at No comments:
Labels:

HTML STYLE

<!DOCTYPE html>
<html>
<body>

<h1  style="color:red;">I am Red</h1>
<h2 style="color:blue;">I am Blue</h2>
<h3  style="color:green;">I am Green</h3>
<h4  style="color:yellow;">I am Yellow</h4 >
<h5 style="color:gray;">I am Gray</h5 >

</body>
</html>


at No comments:
Labels:

HTML SUB HEADING

<!DOCTYPE html>
<html>
<body>

<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>

<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

<h2>This is heading 2</h2>
<p>This is some other text.</p>
</body>
</html>


at No comments:
Labels:

HTML LISTS

<html>
<!-- This is 4.lists.html -->
<head>
<title> lists </title>
</head>
<body>
<p> ordered list </p>
<ol><li>list item1</li>
    <li>list item2</li>
    <li>list item3</li>
</ol> <ol start=ol style="list-style-type:upper-roman">
    <li>list item1</li>
    <li>list item2</li>
    <li>list item3</li>
</ol> <p> unordered list</p>
<p> <ul style="list-style-type:disc">
<li>chocolate</li>
<li>venilla</li>
<li>strawberry</li>
<li>mocha</li>
</ul> <ul style="list-style-type:square">
<li>chocolate</li>
<li>venilla</li>
<li>strawberry</li>
<li>mocha</li>
</ul>
<ul style="list-style-type:none">
<li>chocolate</li>
<li>venilla</li>
<li>strawberry</li>
<li>mocha</li>
</ul>
</p> <p>definition list</p><p>
<dl>
<dt> Internet Explorer</dt>
<dd> Developed by Microsoft , an integral piece of Windows Products</dd>
<dt>Mozilla FireFox</dt>
<dd> Developed by Mozill Project , an open source browser for mulitple platforms</dd>
<dt>Netscape</dt>
<dd> Developed by Netscape communications corporation one of the first graphical browsers</dd></DL>
</body>
</html>




at No comments:
Labels:

TABLE WITH IMAGE

<html>
    <head>
        <title>BAT MOBILE</title>
    </head>
 <body>
    <center><h1> THE BAT MOBILE</h1></center>
    <table style="font-size:20; align="center"; frame="box">
   <tr>
     <td><table border=1 valign="top" height="50%">
     <tr>
       <td><b>special equipment</b></td>
     </tr>
   </tr>
<td>Retractable protective armor</br></td>
</tr>
<tr>
<td>weapons system</td>
</tr>
<tr>
<td>Instructions<br>Aircraft-board computer</td>
</tr>
<tr>
<td><img src="batmobile.jpg"></td>
</tr>
</table>
</td><td>
<table border=1 valign="top">
<tr>
<td colspan="2"><b><center>
specifications/performance</br>
data</center></b></td>
</tr>
<tr>
<td><b>Engine Type</b></td>
<td>Jet Turbine</td>
</tr>
<tr>
<td><b>Thrust</b></td>
<td>150lbs@</br>103%ROS</td>
</tr>
<tr>
<td><b>Torque</b></td>
<td>1750 lbs@<br>98.7%</br>ROS</td>
</tr>
<tr>
<td><b>0 to 60 MPH </td>
<td>3.7sec</td>
</tr>
<tr>
<td><b>Top Speed</b></td>
<td>Un Known</td>
</tr>
<tr>
<td><b>Wheel base</b></td>
<td>141.0 in</td>
</tr>
<tr>
<td><b>Brake Rating</b></td>
<td>Excellent</td>
</tr>
<tr>
<td><b>length</b></td>
<td>26.07 in </td>
</tr>
<tr>
<td><b>width</td>
<td>94.4 in</td>
</tr>
<tr>
<td><b>Height</b></td>
<td>51.2 in</td>
</tr>
<tr>
<td><b> Wheels</b></td>
<td>cast alloy, 15*16.5</td>
</tr>
<tr>
<td><B>Fuel Requirements</b></td>
<td>High Cost Oct 97% Special</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

at No comments:
Labels:

TABLE, CELL PADDING AND SPACING

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> TABLE, CELL PADDING AND SPACING</TITLE>
</HEAD>
<BODY>
<TABLE BORDER="1" WIDTH="100%" CELL SPACING="20px">
<caption>TABLE, CELL PADDING AND CELL SPACING</caption>
<tr><td>CELL-1</TD></TD>CELL-2</TD><TD>CELL-3</TD><TD>CELL-4</TD></TR>
</TABLE>
</BODY>
</HTML>


at No comments:
Labels: ,

XHTML TABLE

<HTML>
<!-- XHTML TABLE -->
<HEAD>
<TITLE> A XHTML TABLE</TITLE>
</HEAD>
<BODY>
<P>
<!-- TABLE DEFINITION -->
<TABLE BORDER="1">
<!-- COLUMN GROUPING -->
<COLGROUP>
<COL WIDTH="25%">
<COL WIDTH="75%">
</COLGROUP>
<!-- TABLE CAPTION -->
<THEAD>
<TR><TD ALIGN="CENTER" COLSPAN="2">TABLE HEADER</TD></TR>
</THEAD>
<!-- TABLE FOOTER -->
<TFOOT>
<TR><TD COLSPAN="2">TABLE FOOTER</TD></TR>
</TFOOT>
<!-- TABLE BODY -->
<TBODY>
<TR><TH>HEADER CELL-1</TH><TH>
HEADER CELL-2</TH><TR>
<TR><TD>ROW-1, CELL-1</TD><TD>
ROW-1, CELL-2</TD></TR>
<TR><TD>ROW-2,CELL-1</TD><TD>
ROW-2, CELL-2</TD></TR>
</TBODY>
</TABLE>
</P>
</BODY>
</HTML>


at No comments:
Labels:

HTML HYPER LINKS

index.html
-------------------------------
<!DOCTYPE html>
<html>
<head>
<title>HOME</title>
</head>
<body bgcolor="pink">
<div id="menu" align="middle" >
<a href=index.html>HOME</a> |
<a href=contact.html>CONTACT</a> |
<a href=about.html>ABOUT</a>
</div>
<h1>This is Home page</h1>
<p>Actual content goes here.....</p>
</body>
</html>

about.html
-------------------------------
<!DOCTYPE html>
<html>
<head>
<title>ABOUT</title>
</head>
<body bgcolor="cyan">
<div id="menu" align="middle" >
<a href=index.html>HOME</a> |
<a href=contact.html>CONTACT</a> |
<a href=about.html>ABOUT</a>
</div>
<h1>This is About page</h1>
<p>Actual content goes here.....</p>
</body>
</html>

contact.html
----------------------------------
<!DOCTYPE html>
<html>
<head>
<title>CONTACT</title>
</head>
<body bgcolor="yellow">
<div id="menu" align="middle" >
<a href=index.html>HOME</a> |
<a href=contact.html>CONTACT</a> |
<a href=about.html>ABOUT</a>
</div>
<h1>This is Contact page</h1>
<p>Actual content goes here.....</p>
</body>
</html>


at No comments:
Labels:

HTML FRAMES

mainframe.html
---------------------------
<html>
<head>
<title>Frames</title>
</head>

<frameset rows="20%,60%,20%">
    <frame name="f1" src="header.html">
    <frameset cols="30%,70%">
    <frame name="f2" src="menu.html">
    <frame name="f3" src="body.html">
</frameset>
    <frame name="f4" src="footer.html">
    </frameset>
</html>

menu.html
-----------------------------
<html>
<head>
<title>menu</title>
</head>
<body bgcolor="green">
<h1> contents</h1>
<ul>
<li><a href="about.html" target="f3">About</a></li>
<li><a href="courses.html" target="f3">Courses</a></li>
<li><a href="details.html" target="f3">Details</a></li>
</ul>
</body>
</html>

header.html
------------------------------
<html>
<head>
<title>Header</title>
</head>
<body bgcolor="red">
<h1 align="center">HEADER</H1>
</body>
</html>

footer.html
--------------------------------
<html>
<head>
<title>footer</title>
</head>
<body bgcolor="blue">
<h1 align="center">FOOTER</H1>
</body>
</html>

details.html
---------------------------------
<html>
<head>
<title>Details</title>
</head>
<body bgcolor="orange">
<p>
<H1>DETAILS PAGE</H1>
</p>
</body>
</html>

courses.html
---------------------------------
<html>
<head>
<title>Courses</title>
</head>
<body bgcolor="pink">
<p>
<br>COURSES OFFERED</br>
<h1>
<UL>
<LI>B.Sc</LI>
<LI>B.Com</LI>
<LI>B.B.M</LI>
</UL>
</h1>
</p>
</body>
</html>

body.html
------------------------------------
<html>
<head>
<title>body</title>
</head>
<body bgcolor="cyan">
<h1 align="center">BODY PART</H1>
</body>
</html>

about.html
------------------------------------
<html>
<head>
<title>About</title>
</head>
<body bgcolor="yellow">
<p>
<H1>ABOUT PAGE<H1>
</p>
</body>
</html>


at No comments:
Labels:

EXTERNAL CASCADING STYLE SHEET

 EXTERNAL_CSS.html
_________________________

<html>
<head>
<title>EXTERNAL STYLE SHEET</title>
<link rel="stylesheet" type="text/css" href="p.css" />
</head>
<BODy bgcolor="cyan">
<P>An external style sheet is ideal when the style is applied to many pages</br>with an external style sheet, you can change the look of entire website by changing one file.</br> Each page must link to the style sheet using the tag link</P>
</BODY>
</html>


p.css
-------
p{
text-align:center;
font-size:30px;
font-family:TimesRoman;
color:purple;
}



at No comments:
Labels:

INTERNAL CSS (CASCADING STYLE SHEET)

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: #d0e4fe;
}

h1 {
    color: orange;
    text-align: center;
}

p {
    font-family: "Times New Roman";
    font-size: 20px;
}
</style>
</head>
<body>

<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>

</body>
</html>

at No comments:
Labels:

Thursday, 15 December 2016

HTML Form

<html>
<head>
<title>Feedback Form</title>
</head>
<body>
<h1 align="center">Feedback form</h1>
<form action="" method="get" name="f1">
<table style="font-family:TimesRoman;font-size="30", align="center">
<tr>
<td>Type:</td>
<td><select name="tp" id="tp">
<option value="1"> Request</option>
<option value="2"> Suggestion</option>
<option value="3"> Complaint </option>
</select>
</td>
</tr>
<tr>
<td>Name:</td>
<td><input type="text" name="na" id="na" />
</td>
</tr>
<tr>
<td>Phone no:</td>
<td><input type="text" name="po" id="po" />
</td>
</tr>
<tr>
<td>Email-Id:</td>
<td><input type="text" name="ei" id="ei" />
</td>
</tr>
<tr>
<td>Request question:</td>
<td><input type="text" name="rq" id="re" />
</td>
</tr>

<tr>
<td>Description:</td>
<td><input type="text" name="des" id="des" />
</td>
</tr>
<tr>
<td colspan="2" align ="center">
<input type="submit" name="submit" id="submit" value="submit"></td>
</tr>
</table>
</form>
</body>
</html>


at No comments:
Labels:

HTML Image

<!DOCTYPE html>
<html>
<body>

<img src="sample.jpg" alt="google.com" width="104" height="142">

</body>
</html>

at No comments:
Labels:

HTML Hyper Links

<HTML>
<HEAD> <h1> First Heading</h1>
<h2> Second Heading</h2>
<h3> Third Heading </h3>
<h4> Forth Heading</h4>
<h5> Fifth Heading</h5>
<h6> Sisth Heading</h6>
</HEAD>


<TITLE> My First Web Page </TITLE>
<BODY BGCOLOR= GREEN>
<br></br>
<img src="images8.jpg" width="200" height="180" /><br>Jai Ganesh!</br>

<!-- This is a comment -->


<p> Welcome to My Website </p>
<font color=YELLOW> GVP COLLEGE FOR DEGREE & PG COURSES</FONT>
<a href="second.html"> second web page</a>
</BODY>
</HTML>


at No comments:
Labels:

Tool Tip

<!DOCTYPE html>
<html>
<body>
<h2>The title attribute</h2>
<p title="I'm a tooltip">
Mouse over this paragraph, to display the title attribute as a tooltip.
</p>

</body>
</html>

at No comments:
Labels:

HTML Paragraphs

<!DOCTYPE html>
<html>
<body>

<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>

<p>
This paragraph
contains      a lot of spaces
in the source     code,
but the    browser
ignores it.
</p>

<p>
The number of lines in a paragraph depends on the size of the browser window. If you resize the browser window, the number of lines in this paragraph will change.
</p>

</body>
</html>

at No comments:
Labels:

HTML Headings

<!DOCTYPE html>
<html>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

</body>
</html>

at No comments:
Labels:
Subscribe to: Posts (Atom)

Oracle Reserved Words

Oracle  Reserved Words The following words are reserved by Oracle. That is, they have a special meaning to Oracle and so cannot be redefi...