Pages

Sunday 8 November 2020

HTML PROGRAMS

HTML is a markup language for describing web documents (web pages). HTML you can create your own Web site.

• HTML stands for HyperText Markup Language

• A markup language is a set of markup tags

• HTML documents are described by HTML tags

• Each HTML tag describes the different document content

• HTML Versions: Since the early days of the web, there have been many versions

Version

Year

HTML

1991

HTML    2.0

1995

HTML    3.2

1997

HTML    4.01

1999

XHTML

2000

HTML    5

2014


Basic Structure of HTML Document

<!DOCTYPE html>

<html>

       <head>

              <title>Page Title</title>

       </head>

       <body>

          <h1>My First Heading</h1>

          <p>My first paragraph.</p>

       </body>

</html> 

Explanation:

• The <!DOCTYPE html> declaration defines this document to be HTML5

• The text between <html> and </html> describes an HTML document

• The text between <head> and </head> provides information about the document

• The text between <title> and </title> provides a title for the document

• The text between <body> and </body> describes the visible page content

• The text between <h1> and </h1> describes a heading

• The text between <p> and </p> describes a paragraph

Using this description, a web browser will display a document with a heading and a paragraph.

Web Browsers

The purpose of a web browser (Chrome, IE, Firefox, Safari) is to read HTML documents and display them.

The browser does not display the HTML tags, but uses them to determine how to display the document:



HTML Tags : HTML tags are keywords (tag names) surrounded by angle brackets:

<tagname>content goes here...</tagname> 

• HTML tags normally come in pairs like <p> and </p>

• The first tag in a pair is the start tag, the second tag is the end tag

• The end tag is written like the start tag, but with a forward slash inserted before the tag name . The start tag is also called the opening tag, and the end tag the closing tag.

HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading: 
Example
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3> 

Program :

<!DOCTYPE html>

<html>

       <head>

              <title>HTML HEADINGS</title>

       </head>

       <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> 

output:


TEXT STYLES

Program: 

<!Doctype html>

<html>

<head>

<title> character format tags </title>

</head>

<body>

<strong >Strong    Name : Ramu </strong><br><br>

<em>emphasis  Roll no:33</em> <br><br>

<cite>citation   Address : MVP </cite><br><br>

<blink >blink Collage : GVP </blink><br><br>

<tt size="4"> tele type Branch: Bcom </tt><br><br>

<kbd>keyboard Class room no: 404 </kbd><br>

</body>

</html>

Output:



Program:

<!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>

Output:


Program:

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

Output:




Program:

<!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>

Output:


Program:

<html>

<head>

</head>

<body>

<table align="center" style="border-color:cyan;border-style:solid">

<tr>

<td colspan="4" align="center">GVP</td>

</tr>

<tr>

<td>Name : </td>

<td colspan="4"><input type="text" /></td>

</tr>

<tr>

<td>Email Id  : </td>

<td><input type="text" /></td>

</tr>

<tr>

<td colspan="2" align="center"><input type="Submit" value="Submit"/></td>

</tr>

</table>

</body>

</html>

Output:


Program:
<!Doctype html>
<html>
<head>
<title> tic tac toe </title>
</head>
<body>
<FONT SIZE="10">
<!-- <table border="30" cellpadding="25" cellspacing="15"  
 bgcolor="cyan"  style="margin-top:85px; 
 margin-left:580px;border-color:red" > -->
 <table border="5" frame="border" bgcolor="cyan" cellpadding="22" cellspacing="12"  > 
 
<tr><th colspan="3" bgcolor="pink"> TIC  TAC  TOE </th></tr>
<tr bgcolor="pink" cellpadding="5" cellspacing="5"><td align="center">+ </td><td align="center"> O </td><td align="center">&nbsp- </td></tr>
<tr bgcolor="pink"><td align="center" >+ </td><td align="center"> O </td><td align="center"> - </td></tr>
<tr bgcolor="pink"><td align="center"> + </td><td align="center"> O </td><td align="center"> - </td></tr>
<caption align="top"> <font face="algerian" color="green" size="+4"> <b> Gamming tool </font> </b></caption>
</table>
</font>
</body>
</html>

Output:

Ordered List:
Ordered HTML List - The Type Attribute
The type attribute of the <ol> tag, defines the type of the list item marker:
Type    Description
type="1"   The list items will be numbered with numbers (default)
type="A"   The list items will be numbered with uppercase letters
type="a"   The list items will be numbered with lowercase letters
type="I"    The list items will be numbered with uppercase roman numbers
type="i"    The list items will be numbered with lowercase roman numbers
Numbers:
<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol> 
Uppercase Letters:
<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol> 
Lowercase Letters:
<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol> 
Uppercase Roman Numbers:
<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol> 
Lowercase Roman Numbers:
<ol type="i">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol> 

Unordered HTML List - Choose List Item Marker

The CSS list-style-type property is used to define the style of the list item marker:

Value

Description

disc

Sets the list item marker to a bullet (default)

circle

Sets the list item marker to a circle

square

Sets the list item marker to a square

none

The list items will not be marked

Example - Disc

<ul style="list-style-type:disc">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>


Example - Circle

<ul style="list-style-type:circle">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>


Example - Square

<ul style="list-style-type:square">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>


Example - None

<ul style="list-style-type:none">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul> 


Program:
<html>
<body>
<hr> ordered List
<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
<hr> Unordered List
<ul style="list-style-type:square">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul> 
<ul style="list-style-type:disc">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul> 
<ul style="list-style-type:circle">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul> 
</body>
</html>

Output:


HTML Description Lists
HTML also supports description lists.
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term: 
Example
<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl> 

Program:
<html>
<body>
<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl> 
</body>
</html>

Output:



Forms:
<html>
<head>
<title> input element in html form</title>
</head>
<body>
<p>
<center>
<h2><u>htmlform</u></h2>
<form name ="form1">
username:
<input type ="text"name="nm"size="20"maxlength="10"
<br><br>
password:
<input type ="password"name="pwd"size="20"maxlength="8"
<br><br>
gender:&nbsp;&nbsp;
male<input type="radio"name="r1"value="male">
&nbsp;
female<input type="radio"name="r1"value="female">
<br><br>
interests:&nbsp;&nbsp;
music<input type="checkbox"name="c1"value="music">
&nbsp;
movies<input type="checkbox"name="c2"value="movies">
&nbsp;
surfing<input type="checkbox"name="c3"value="surfing">
&nbsp;
reading<input type="checkbox"name"c4"value="reading">
&nbsp;
<br><br><br>
<input type="submit" name="b1" value="submit"><br>
</form>
</center>
</p>
</body>
</html>

Output:






No comments:

Post a Comment

Different Types of CSS

There are three ways of adding CSS style rules to HTML elements:        1. Inline — using the style attribute in HTML element 2. Internal — ...