Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
2 views

Actc HTML Notes

The document provides an overview of web designing, focusing on HTML as the standard language for creating interactive websites. It explains the basic structure of HTML documents, various HTML tags, and their attributes, as well as how to format text, create tables, and insert images. Additionally, it covers the components of the web, including webpages, websites, web browsers, and web servers.

Uploaded by

vermavikas305
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

Actc HTML Notes

The document provides an overview of web designing, focusing on HTML as the standard language for creating interactive websites. It explains the basic structure of HTML documents, various HTML tags, and their attributes, as well as how to format text, create tables, and insert images. Additionally, it covers the components of the web, including webpages, websites, web browsers, and web servers.

Uploaded by

vermavikas305
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 48

WEB DESIGNING

The internet is a powerful media to transmit information. The pages of


information displayed on the internet are referred to as webpages. The
standards and formats for presenting text and graphics on the internet are
developed and approved by WWW governing authorities. The growing
demand for attractive presentation of information using electronic means
gave rise to the invention of websites.

How does the web work?


WWW stands for world wide web normally referred to as web.

HTML INTRODUCTION
HTML is a standard language for developing and creating interactive
websites, introduced by Tim Berners Lee. HTML documents are created in
any text editor for and can be run(executed) on any computer that has a web
browser. HTML is compatible with most of the web browsers.
Components of web
Web uses the following Terms:
• Webpage:
A simple text file created using HTML.

• Website:
A collection of interlinked web pages containing text, images, audio and
videos. For Example, www. ebalbharati.in

• Web Browser:
A web browser is a software used to view web pages or websites
available on the internet For Example Internet Explorer, Google
Chrome, Mozilla Firefox.

• Web Server:
A Web server is an application or a computer that sends webpages over
the internet using the HTTP protocol. The functionality of website is
managed by web server. For Example, Apache, nginx, IIS, etc.

• URL (Uniform Resource Locator):


It is an address of a web page on the internet. The web pages are
retrieved from the original location with the help of URL.

• HTTP:
HTTP (Hypertext Transfer Protocol) is a protocol used by WWW for
client server communication.

• HTML:
Hyper Text Markup Language, enables to write code for a webpage. All
the webpages in a website are linked with one another, with the help of
hypertext links.

Basic structure: -
➢ HTML tags are keywords enclosed within angular brackets, that
define how your web browser must format and display the content.
➢ Tags are not case sensitive.
➢ Every HTML page is enclosed within two tags <html> and </html>.
➢ This page is divided into two sections internally, head section and
body section.
➢ Head section contains title of the document which is enclosed within
<Title> and </Title> of <Head> and </Head>.
➢ The actual text of the document is written within <Body> and
</Body>.
An attribute: -
An attribute defines a property for an element, consists of an
attribute/value, and appears within the element's start tag. Sometime we
need additional information with a tag.

Classification of HTML Tags


HTML tags are categorized as:
1. Container tags
2. Empty tags

Container Tags:
Container Tags are also called paired tags. Container Tags have a beginning
tag and an end tag. The end tag is similar to the beginning tag but with a ''/''
in front of it. For Example, <head> </head>, <body> </body>.

Empty Tags:
Empty tags are standalone tags and do not have an end tag. <hr> , <br> and
<img> <br> is an example of singular tag/Empty tag.

Basic structure of HTML

Purpose of tags:
• <html> and </html>
This tag indicates that the document is an html file.

• <head> and </head>


It includes <Title> within it, the text within <head> is not displayed on
the webpage. This is used for search engine optimization.

• <title> and </title>


The content within this tag is displayed on the title bar.

• <body> and </body>


This tag includes all content which is to be developed in the web
browser. Most of the tags are included in this tag.
Basic structure of webpage:

Program-1
<html>
<head>
<title>ACTC COMPUTER EDUCATION</title>
</head>
<body>
let's Start! <br>
HTML is the standard markup language for creating Web pages. HTML
describes the structure of a Web page. HTML consists of a series of elements.
HTML elements tell the browser how to display the content.
</body>
</html>
<center> tags:
The <center> tag in HTML is used to set the alignment of text into the
center.

Body Tag Attribute


The < body > tag contains all the text and graphics of the document with all
the HTML tags that are used for control and formatting of the page.
Some commonly used attributes in the tag are listed below:
• Bgcolor:
Sets the background color of your page.

• Background:
Adds a background image to your page. If you use this attribute, the
background image will take the place of any background color you
may have specified.

• Text:
Changes the default text color the browser will display on your page.

• Link
Changes the color of all of the non-visited links on your page. The
default setting for a non-visited link is usually blue.

Background change and text color:

Program-2
<html>
<head><title> Background Color. </title></head>
<body bgcolor="yellow" text="Blue">
Hello! How are you? The background color has been set to BLUE and the
foreground text color has been set to yellow.......
</body>
</html>
Background Color and link use:

Program-3
<!DOCTYPE html>
<html>
<head>
<title>
HTML body link Color
</title>
</head>
<body bgcolor="#84f4f3" link = "red">
<center>
ACTC COMPUTER EDUCATION <br>
<a href="actc.html">Best Computer Knowledge Provided here </a><br>
</center>
</body>
</html>
Background image and link use:

Program-4
<html>
<head>
<title>Background image and link use:</title>
</head>
<body background="F:\ACTC ALL NOTES\ACTC ALL
PHOTOS\PHOTOSHOP TOOLS\download (1).jpg" text="white"
Link="yellow">
Background image and link use:<br>
<a href="#">Link Color</a>
</body>
</html>
Text formatting element
Text formatting is used to make a document look attractive thereby
enhancing its appearance. The list of different text level formatting tags are
as: -

Tag Name Description


<b> Displays text within it in Bold like Hello.

<i> Displays text within it in italicized manner like Hello.

<u> Displays text with underline like Hello.


<small> Displays text in small font size.
<sub> Displays text in subscript form.

<sup> Displays text in superscript form.


Anything that appears within <del> … </del> element, is
<del>
displayed as deleted text.

The HTML <mark> element defines marked or


<mark>
highlighted text

Program-5
<!DOCTYPE html>
<html><head>
<title>text formatting tags</title>
</head><body>
<b>This text is bold</b><br><br>
<i>This text is italic</i><br><br>
<u>This text is underline</u><br><br>
<small>This text is small.</small><br><br>
This is <sub>subscript</sub>.<br><br>
This is<sup>superscript</sup> . <br><br>
<del>This text is deleted from the document</del><br><br>
<mark>This text is marked</mark><br><br></body> </html>
Heading levels
HTML provides six levels of heading tags. The range is from 1 to 6. These
heading levels are represented as <H1> Text content </H1>. The <H1> tag
displays text in bold and with largest heading level whereas <H6> tag
displays text in the smallest heading level.

Program-6
<!DOCTYPE html>
<html>
<head>
<title>Heading levels</title>
</head>
<body>
<H1>Heading level 1 Text is largest in size</H1>
<H2>Heading level 2 </H2>
<H3>Heading level 3</H3>
<H4>Heading level 4</H4>
<H5>Heading level 5</H5>
<H6>Heading level 6 Text is smallest in size</H6>
</body>
</html>
horizontal ruled line
<Hr> tag is used to display horizontal ruled line. It is a singular tag. The
attributes with <hr> tag:

• color:
Sets color for the horizontal ruled line.

• width:
It specifies the length of the ruled line in % or pixels.

• size:
It sets thickness of a ruled line.

Program-7
<!DOCTYPE html>
<html>
<head>
<title> horizontal ruled line </title>
</head>
<body>
your horizontal ruled line goes here. <hr size="5" color="red"
width="70%">
The rest of the text is separated by HR tag.
</body>
</html>
Inserting an image
<IMG> tag is used to insert an image within a webpage. It uses following
attributes:

• src:
It is used to specify the path of an image file. The popular extensions of
image file are png, jpg and gif.

• height:
Specifies height of the image in pixels.

• width:
Specifies width of the image in pixels.

• alt:
It is referred as alternate text. It specifies the description of the image

• hspace
The HTML <object> hspace Attribute is used to specify the number of
whitespaces on the left and right side of an object.

• vspace
The HTML <img> vspace Attribute is used to specify the number of
whitespaces on bottom and top side of an image.

• Align
The <img> align attribute is used to set the alignment of an image. It is
an inline element. It is used to specify the alignment of the image
according to surrounding elements.

<IMG> is an empty tag. The syntax used in code is as:


<IMG src="photo.jpg" height="400" width="400" alt="image">

Program-8
<!DOCTYPE html>
<html>
<head>
<title>Inserting an Image</title>
</head>
<body>
<IMG src="D:\ IMAGES\ACTC LOGO.jpg" height="200" width="400"
alt="image">
</body>
</html>

Program-9
<html>
<head>
<title> Images </title></head>
<body>
<h1><center><u> DIFFERENT TYPES OF COMPUTER:</u></center>
</h1>
<hr size=3 noshade>
<img src="C:\ ALL IN ONE COMPUTER.png" alt="All In One Computer"
height=150 Width=150 border=5 align=top><b>All In One Computer
</B></IMG>
<hr Size=3 noshade width=250>
<img src="C:\ DESKTOP COMPUTER.png" The Computer
Giant" hspace=100 align=middle><b>The Destop Computer</B></img>
<hr size=3 noshade width=250>
<img src="C:\ MAINFRAME COMPUTER 2.jpg" alt="The twins"
Height=100 width=100 vspace="40">
<b>The Mainframe Computer</b></img>
</body>
</html>
A paragraph
<P> tag is used to define paragraphs. It is a container tag. It uses following
attributes:

• align:
It aligns the paragraph to the left, right or center.

Program-10
<!DOCTYPE html>
<html>
<head>
<title>A paragraph</title>
</head>
<body>
<p align ="left"> This is left aligned paragraph </p>
<p align= "right"> This is right aligned paragraph </p>
<p align ="center"> This is center aligned paragraph </p>
</html>

Creating a table
A table is made up of rows and columns. A table in a webpage is
created by using <table> tag, which is a container tag. The tags
and attributes used to create a table are as follows :
• <table>:
It is used to indicate creation of a table.

• <caption>:
It is used to specify a table heading. It has align attribute which can have
'top' or 'bottom' as it’s values. Top is the default value.

• <tr>:
This tag is used to create each row of the table.

• <th>:
It indicates table heading. <th> is generally used for first row column
content of the table. It displays content in the bold format. It can be
replaced with <td>.

• <td>:
It specifies data within the table (cell content).

The attributes of table are :


• Border:
This attribute is required to display a border for the entire table. It has
a numbered value. If border attribute is not specified, a table is created
without the border for both table as well as columns.

• Bordercolor:
It displays border in a specific color.

• Align:
It aligns the table either to the left, right or center.

• Bgcolor:
Sets the background color for the table.
The attributes of the <tr>, <th>, <td> :
• Align:
It aligns the text horizontally. The values are aligned to the left, right or
center.

• Valign:
• It aligns the text Vertically. The values are aligned to the Bottom &
middle.

• Colspan:
This attribute is used within <td> or <th>. It creates a single column
spanning across the table. It takes a numbered value, based on the
number of columns to be spanned in a table.

• Rowspan:
This attribute is used within <td> or <th>. It creates a single row
spanning across the table. It takes a numbered value, based on the
number of rows to be spanned in a table.
Program-11
<!DOCTYPE html>
<html>
<head>
<title>Table with 4 rows and 3 columns
</title>
</head>
<body>
<h3>Table columns and Rows use:</h3>
<table border="2">
<tr><th>Sr. No.</th>
<th>Input Device</th>
<th>Output Device</th> </tr>
<tr> <td>1</td> <td>Keyboard</td>
<td>Monitor</td> </tr>
<tr> <td>2</td> <td>Mouse</td>
<td>Printer</td> </tr>
<tr> <td>3</td> <td>Joystick</td>
<td>Plotter</td> </tr>
<tr> <td>4</td> <td>Scanner</td>
<td>Speaker</td> </tr>
<tr> <td>5</td> <td>Digital Camera</td>
<td>Projector</td> </tr>
</table><br>
<table border="2">
<tr><th>Sr. No.</th>
<th>Software Device</th>
<th>Hardware Internal Device</th> </tr>
<tr> <td>1</td> <td>Microsoft Windows</td>
<td>Motherboard </td> </tr>
<tr> <td>2</td> <td>Linux</td>
<td>Hard Disk</td> </tr>
<tr> <td>3</td> <td>Ms Office</td>
<td>SMPS</td> </tr>
<tr> <td>2</td> <td>Chrome</td>
<td>RAM</td> </tr>
<tr> <td>3</td> <td>Ms Dos</td>
<td>CPU</td> </tr>
</table>
</body>
</html>

Use of rowspan attribute in a table :

Program-12
<html>
<head><title> Table with rowspan attribute </title></head>
<body>
<h3>Table Rowspan use:</h3>
<table border="3">
<tr>
<th>ID </th>
<th>Name </th>
<th>Course </th>
<th>Software </th></tr>
<tr>
<td rowspan="5">C1256R</td>
<td rowspan="5">ADCA</td>
<td> Ms-Office
<td> Word, Excel, Powerpoint </tr>
<tr>
<td> Graphic Designing
<td> Corel Draw, PhotoShop, Illustrator, Indesign, Flash, Premiere Pro</tr>
<tr>
<td> Web Designing
<td> Html, CSS, Javascript, Dreamweaver </tr>
<tr>
<td> Advance Excel
<td> Excel Many Formula's </tr>
<tr>
<td> Accounting
<td> Tally </tr>
<tr>
<td rowspan="3">C1285R</td>
<td rowspan="3">DCA/WD</td>
<td> Ms-Office
<td> Word, Excel, Powerpoint </tr>
<tr>
<td> Graphic Designing
<td> Corel Draw, Photoshop, Illustrator, InDesign, Flash, Premiere
Pro</tr>
<tr>
<td> Web Designing
<td> Html, CSS, JavaScript, Dreamweaver </tr>
<tr>
<td rowspan="3">C1285R</td>
<td rowspan="3">E-Accounting</td>
<td> Ms-Office
<td> Word, Excel, Powerpoint </tr>
<tr>
<td> Advance Excel
<td> Excel Many Formula's </tr>
<tr>
<td> Accounting
<td> Tally, Busy </tr>
</table>
</body>
</html>

Use of colspan attribute in a table :

Program-13
<!DOCTYPE html>
<html>
<head><title> Table with rowspan attribute </title></head>
<body>
<h3>Table Colspan use:</h3>
<table border="3" width="100%">
<tr>
<th colspan="4" bgcolor="yellow"><font face="Arial black" size="6"
color="blue">ACTC</font></th>
<tr>
<th colspan="4" bgcolor="hotpink"><font
color="green">OFFICE</font></th>
<tr>
<th colspan="2"><font color="#a811b6">Administration</font></th>
<th colspan="2"><font color="#6f35bd">Management</font></th>
<tr>
<th><font color="#d30b35">Facility</font>
<th><font color="#467706">Certificate </font>
<th><font color="#5671d6">Records</font>
<th><font color="#1bb9c7">Fee Receipt </font>
<tr>
<th colspan="4" bgcolor="pink"><font color="red">LAB</font></th>
<tr>
<th colspan="2"><font color="#0651cd">Practical </font></th>
<th colspan="2"><font color="#a60a99">Theory </font></th>
<tr>
<th><font color="#49ec29">5 Days</font>
<th><font color="#c8ca0e">On Computer </font>
<th><font color="#ca6b0e">Saturday </font>
<th><font color="#ca290e">On Board </font>
<tr>
<th colspan="4" bgcolor="#f8b5fe"><font color="yellow">ENGLISH
LAB</font></th>
<tr>
<th colspan="2"><font color="#ff0000">Elementry </font></th>
<th colspan="2"><font color="#1a09c1">SSS </font></th>
<tr>
<th><font color="#1795ba">Grammer</font>
<th><font color="#17ba82">Vocabulary </font>
<th><font color="#9917ba">Role Play </font>
<th><font color="#ba6017">Debate</font>
<tr>
<th><font color="#1795ba">American Accent</font>
<th><font color="#17ba82">Conversation </font>
<th><font color="#9917ba">Public Speaking</font>
<th><font color="#ba6017">Group Discussion </font>
</table>
</body>
</html>

Use of all attribute in a table :

Program-14
<!DOCTYPE html>
<html>
<head><title> Table with rowspan attribute </title></head>
<body>
<h3>Table Pro use:</h3>
<table border="3" width="80%" bgcolor="yellow" cellspacing="0"
cellpadding="3">
<tr>
<th rowspan="2" bgcolor="yellow" width="20%"> <img src="C:\ ACTC
LOGO.jpg" width="100%" height="50">
<th colspan="2" bgcolor="#00fffc"><font face="cambria"
color="red">COMPUTER GENERATION</font>
<th Rowspan="2" width="20%" bgcolor="white"> <img src="C:\
COMPUTER-LEFT.jpg" width="80%" height="50">
<tr bgcolor="#f9dbff">
<th>&nbsp;
<th>&nbsp;
<tr bgcolor="#8ddbf1">
<th Height="40" width="20%" valign="top"><font
color="#d14976">Generation
<th width="40%" valign="bottom"><font color="green">Time
Period</font>
<th colspan="2" width="40%"><font color="#bf07e0">Technology in
use</font>
<tr>
<th align="left"><font color="#964ef9">I.</font>
<td align="left">1945-1956
<td colspan="2" align="left"><font face="arial" color="#b40044">Vacuum
Tube</font>
<tr>
<th align="left"><font color="#4e8ef9">II.</font>
<td align="center">1956-1963
<td colspan="2" align="left"><font face="Comic Sans MS"
color="#34a2ba"><b>Transistors</b></font>
<tr>
<th align="left"><font color="#62f94e">III.</font>
<td align="right">1964-1971
<td colspan="2" align="left"><font color="violet">IC Chips</font>
<tr>
<th align="left"><font color="#d87e1d">IV.</font>
<td align="left">1971-2000
<td colspan="2" align="left"><font face="Courier New" color="blue">VLSI
Chips</font>
<tr>
<th align="left"><font color="#ff07df">V.</font>
<td align="center">2000-----
<td colspan="2" align="left"><font face="arial black"
color="hotpink">Parallel Processing</font>
</table>
</body>
</html>

Creating hyperlinks in a webpage:


Hyperlinks are used to connect one document with another document. In
HTML, Links are created by using tag.
Syntax: <a href= “mypage.html”> Click here for my page </a>.
The href attribute in the above syntax is used to specify address of the file
(URL) which needs to be opened on clicking.
The target attribute can have the following values,
The target attribute can have the following values:-

• _blank:
This is the most used option. You can open the linked page on a new
window/tab by setting the target attribute value as _blank.

• _self:
This is the default value. It helps open the linked page in the same
window frame.
Program-15
<html>
<head>
<title>hyperlink</title>
</head>
<body bgcolor="yellow" Link="blue">
<h1>Hyperlink</h1>
<h3>The linked page on a new window/tab by setting the target attribute
value as _blank.</h3>
<a href="Document.pdf" target="_Blank">Open PDF Document</a>
<h3>The linked page in the same window frame by setting the target
attribute value as _self.</h3>
<a href="Document.pdf" target="_Self">Open PDF Document</a>
</body>
</html>

Image hyperlink:

Many websites have images as hyperlink. For example, the previous arrow
is an image which on clicking displays a previous webpage. The arrow is
actually an image hyperlink.

Syntax:<a href = "Mypage2.html"><Img src = "arrow. gif" alt = "Click on


arrow"></a>
Program-16
<html>
<head>
<title> Hyperlink Images</title>
</head>
<body bgcolor="yellow">
<center><h1> LINKS TO CUTE BABIES </h1></center>
<p><b> Click on the thumbnail to enlarge the image...</b>
</p>
<a href="C:\Users\Deepak\Desktop\BABY IMAGES\55.jpg">
<img src="C:\Users\actck\OneDrive\Desktop\YASH SAINI\POWERPOINT
WORK\PRACTICAL 2 IMAGES\MAINFRAME COMPUTER 2.jpg" height=200
width=200 border="2" alt="The Great Laugh"></a>
<a href="C:\Users\Deepak\Desktop\BABY IMAGES\99.jpg">
<img src="C:\Users\actck\OneDrive\Desktop\YASH SAINI\POWERPOINT
WORK\PRACTICAL 2 IMAGES\MOUSE.jpg" height=200
width=200 alt="The Twins" border="2"></a>
<a href="C:\Users\Deepak\Desktop\BABY IMAGES\66.jpg">
<img src="C:\Users\actck\OneDrive\Desktop\YASH SAINI\POWERPOINT
WORK\PRACTICAL 2 IMAGES\MONITOR.jpg" height=200
width=200 alt="The Computer Giant" border="2"></a>
<P>Many websites have images as hyperlink.</P>
</body>
</html>
HTML LISTS
Lists are primarily used to increase the readability of the information.
HTML provides three types of lists mentioned below:

• Unordered Lists
• Ordered Lists
• Definition Lists

Unordered Lists
These lists are bulleted lists. This means that a bullet is inserted at the start
of an item. An unordered list starts with the “<ul>” tag. Each list item starts
with the “<li>” tag. The list items are marked with bullets i.e small black
circles by default.
• Type
➢ Disc
Displays a solid black dot
➢ Circle
Display a solid black square
➢ Square
Display a hollow circle

Program-17
<!DOCTYPE html>
<html>
<head><title>Unordered Lists </title></head>
<body>
<h1>All the different list types for ul</h1>
<ul type="circle">
<li>Computer</li>
<li>Laptop</li>
<li>All in Computer</li>
</ul>
<ul type="disc">
<li>Cabinet</li>
<li>Monitor</li>
<li>keyboard</li>
<li>Mouse</li>
<li>Joystick</li>
</ul>
<ul type="square">
<li>Hard Disk</li>
<li>Ram</li>
<li>SMPS</li>
<li>CPU</li>
<li>Cpu Fan</li>
</ul>
</body>
</html>

Ordered Lists
An ordered list is numbered. Ordered lists have basically the same syntax
as unordered lists, except that the <ul> ...... </ul> tags are replaced by the
<ol> ...... </ol> tags. The result is a list with numbers instead of bullets.
• Reversed
Specifies that the list order should be reversed (9,8,7...)
• Start
Specifies the start value of an ordered list
• Type
Specifies the kind of marker to use in the list
Program-18
<!DOCTYPE html>
<html>
<head><title>Ordered Lists </title></head>
<body>
<h1>All the different list types for ol</h1>
<b>Parts of Computer</b>
<ol type="I">
<li>Keyboard</li>
<li>Mouse</li>
<li>Monitor</li>
<li>CPU</li>
</ol>
<b>Computer Components</b>
<ol type="A">
<li>Hardware</li>
<li>Software</li>
</ol>
<b>Hardware Components</b>
<ol type="A" start="10">
<li>Motherboard, Hardisk</li>
<li>SMPS, CPU Fan</li>
<li>RAM CPU</li>
</ol>
<b>Software Components</b>
<ol type="1">
<li>Microsoft window, Unix, Linux</li>
<li>MS Office, Chrome, Opera</li>
<li>MS DOS, Adobe, MySQL</li>
</ol>
<b>Types of Computer Memory</b>
<ol type="i">
<li>Primary Memory</li>
<li>Secondary Memory</li>
</ol>
<b>Primary Memory</b>
<ol type="a">
<li>RAM</li>
<li>ROM</li>
</ol>
<b>Secondary Memory</b>
<ol type="1" reversed>
<li>FLOPPY DISK DRIVE</li>
<li>HARD DISK</li>
<li>PEN DRIVE</li>
</ol>
</body>
</html>
Unordered and Ordered Lists

Program-19
<html>
<head><title>Html List </title></head>
<body bgcolor="yellow" text="red">
<h2>Diploma Courses:-</h2>
<ul>
<li> <b>Advance Diploma In Computer Application </b>
<ol type="A">
<li>Microsoft Office
<ol type="1">
<li>Microsoft word
<li>Microsoft Excel
<li>Microsoft Powerpoint</ol>
<li> Graphic Designing
<ol type="I">
<li>Pagemaker, Corel Draw, Photoshop
<li>Illustrator, Indesign, Flash</ol>
<li> Web Designing
<ol type="a">
<li>HTML, CSS
<li>Java Script, Dreamweaver </ol>
<li> Advance Excel
<ol type="i">
<li>Many Types of formulas</ol>
<li> Accounting
<ol type="1">
<li>Tally Prime
</ol></ol></ul>
<ul>
<li> <b>E-Accounting </b>
<ul type="circle">
<li> Microsoft Office
<ul type="square">
<li>Microsoft word
<li>Microsoft Excel
<li>Microsoft Powerpoint</ul>
<li> Accounting
<ul type="disc">
<li>Tally Prime
<li>Taxation
<li>E-Taxation
<li>Busy</ul>
<li> Advance Excel
<ul type="circle">
<li>Many Types of formulas
</ul>
</body>
</html>
Description Lists
HTML Description List or Definition List displays elements in definition
form like in dictionary.
The 3 HTML description list tags are given below:
• <dl> tag
Description Lists are used with description list tag <dl> tag in HTML.
• <dt> tag
Defines a term in a description list.
• <dd> tag
Describes the term in a description list.

Program-20
<html>
<head><title> HTML Definition Lists</title></head>
<body>
<h2>Web uses the following Terms: </h2>
<dl>
<dt><b>Hypertext Markup Language</b></dt>
<dd> It is a language for describing how pages of text, graphics and other
information are organised, formatted and linked. </dd>
<br>
<dt><b>Website:</b></dt>
<dd>A collection of interlinked web pages containing text, images, audio
and videos. For Example, www. ebalbharati.in </dd><br>
<dt><b><dfn>Web Browser:</dfn></b></dt>
<dd> It is a program that interprets (HTML) command collect, arrange and
display the parts of a webpage. </dd><br>
<dt><b><dfn>Web Server:</dfn></b></dt>
<dd> A Web server is an application or a computer that sends webpages
over the internet using the HTTP protocol. The functionality of website is
managed by web server. For Example, Apache, nginx, IIS, etc. </dd>
</dl>
</body>
</html>
HTML FRAMES
HTML Frames are used to divide the web browser window into multiple
sections where each section can be loaded separately. A frameset tag is the
collection of frames in the browser window.
Creating Frames: Instead of using body tag, use frameset tag in HTML to use
frames in web browser.

Frameset Tag Attributes: -


• Rows
Specifies the number or size of rows in a frameset.
• Cols
Specifies the number or size of Column in a frameset.

Program-21
<!DOCTYPE html>
<html>
<head>
<title>Example of HTML Frames using row attribute</title>
</head>
<frameset rows = "20%, 60%, 20%">
<frame src ="C:\Users\actck\OneDrive\Desktop\YASH SAINI\WORK IN
PROGRESS\html work\ul.html">
<frame src ="C:\Users\actck\OneDrive\Desktop\YASH SAINI\WORK IN
PROGRESS\html work\UNORDERED.HTML" >
<frame src ="C:\Users\actck\OneDrive\Desktop\YASH SAINI\WORK IN
PROGRESS\html work\ol.html">
</frameset>
</html>
Program-22
<!DOCTYPE html>
<html>
<head>
<title>Example of HTML Frames using row attribute</title>
</head>
<frameset cols = "30%, 40%, 30%" >
<frame src ="C:\Users\actck\OneDrive\Desktop\YASH SAINI\WORK IN
PROGRESS\html work\ul.html">
<frame src ="C:\Users\actck\OneDrive\Desktop\YASH SAINI\WORK IN
PROGRESS\html work\UNORDERED.HTML" >
<frame src ="C:\Users\actck\OneDrive\Desktop\YASH SAINI\WORK IN
PROGRESS\html work\ol.html">
</frameset>
</html>
Frame Tag Attributes: -
• src
This attribute specifies the document that will be displayed by the
frame.
• name
This attribute is used for labeling frames. Without labeling, every link
will open in the frame that it's in – the closest parent frame. See
the target attribute for more information.
• noresize
This attribute prevents resizing of frames by users.
• scrolling
This attribute defines the existence of a scrollbar. If this attribute is not
used, the browser adds a scrollbar when necessary. There are two
choices: "yes" for forcing a scrollbar even when it is not necessary and
"no" for forcing no scrollbar even when it is necessary.
• marginheight
This attribute defines the height of the margin between frames.
• marginwidth
This attribute defines the width of the margin between frames.
• frameborder
This attribute allows you to specify a frame's border.

Program-23
<HTML>
<HEAD>
<title>A frameset document</title>
</HEAD>
<FRAMESET cols="33%,33%,33%">
<FRAMESET rows="*,300">
<FRAME src="C:\Users\actck\OneDrive\Desktop\YASH
SAINI\POWERPOINT WORK\PRACTICAL 2 IMAGES\ALL IN ONE
COMPUTER.png" scrolling="no">
<FRAME src="C:\Users\actck\OneDrive\Desktop\YASH
SAINI\POWERPOINT WORK\PRACTICAL 2 IMAGES\KEYBOARD.jpg"
marginwidth="20" marginheight="20">
</FRAMESET>
<FRAME src="C:\Users\actck\OneDrive\Desktop\YASH
SAINI\POWERPOINT WORK\PRACTICAL 2 IMAGES\MOUSE.jpg"
frameborder="0">
<FRAME src="C:\Users\actck\OneDrive\Desktop\YASH
SAINI\POWERPOINT WORK\PRACTICAL 2 IMAGES\COMPUTER
RIGHT.png" frameborder="1">
</FRAMESET>
</HTML>

iFrame Tag
The” iframe” tag defines a rectangular region within the document in which
the browser can display a separate document, including scrollbars and
borders. An inline frame is used to embed another document within the
current HTML document.
Program-24
<!DOCTYPE html>
<html>
<head>
<title>HTML iframe Tag</title>
</head>
<body>
<center>
<h1>ACTC KHANPUR</h1>
<h2>HTML iframe Tag</h2>
<iframe src=
"C:\Users\actck\OneDrive\Desktop\YASH SAINI\WORK IN
PROGRESS\html work\hyperlink images.html" height="200"
width="400">
</iframe>
</center>
</body>
</html>
Forms in HTML
HTML forms or web forms are a powerful medium for interacting with
users. They have interactive controls for submitting information. Web
forms enable us to collect data or personal information from site visitors,
such as names, email addresses, passwords, phone numbers, etc.
An HTML or a Web form helps collect user input. HTML forms can have
different fields, such as text areas, text boxes, radio buttons, checkboxes,
drop-down lists, file uploads, etc.

Process to Create Forms Using HTML


HTML <form> Element
To create an HTML form, we will use the HTML <form> element. It starts
with the <form> tag and ends with the </form> tag. We can add the input
elements within the form tags for taking user input.

These are the following HTML <form> elements: -

• <label>
It defines label for <form> elements.
• <input>
It is used to get input data from the form in various types such as
text, password, email, etc by changing its type.
• <button>
It defines a clickable button to control other elements or execute a
functionality.
• <select>
It is used to create a drop-down list.
• <textarea>
It is used to get input long text content.
• <fieldset>
It is used to draw a box around other form elements and group the
related data.
• <legend>
It defines a caption for fieldset elements.
• <option>
It is used to define options in a drop-down list.
Program-25
<!DOCTYPE html>
<html>
<head>
<title>HTML FORMS</title>
</head>
<body>
<form>
<fieldset>
<legend>Personal Details</legend>
<p><label>
Salutation
<br />
<select name="salutation">
<option>--None--</option>
<option>Mr.</option>
<option>Ms.</option>
<option>Mrs.</option>
<option>Dr.</option>
<option>Prof.</option>
</select>
</label>
</p>
<p><label>First name: <input name="firstName" /></label>
</p>
<p><label>Last name: <input name="lastName" /></label>
</p>
<p>Gender:
<label><input type="radio" name="gender"
value="male" />
Male
</label>
<label><input type="radio" name="gender"
value="female" />
Female
</label>
</p>
<p><label>Email:<input type="email"
name="email" />
</label>
</p>
<p><label>Date of Birth:<input type="date" name="birthdate">
</label>
</p>
<p><label>
Address :<br>
<textarea name="address" cols="30"
rows="3">
</textarea>
</label></p>
<p><button type="submit">Submit</button></p>
</fieldset>
</form>
</body>
</html>
Form <Input> Type
Input Type Description
<input type=”text”> Creates a one line textbox
Creates a radio button. The radio button allows
<input type=”radio”>
one option selection against multiple choices.
Creates a checkbox. It allows more than one
<input type=”checkbox”>
selection against multiple choices
Displays a button for submitting the form data to a
<input type=”submit”>
server.
The password input type is used to create text
<input type=”password”>
contents in the form of '*' asterik or '•' disc.
The reset control clears the text content entered in
<input type=”reset”>
the form.
<input type=”button”> It displays push button which activates on events.
<input type=”color”> Defines a color picker.

<input type=”number”> Defines a field for entering a number

<input type=”url”> Defines a field for entering a URL.

<input type=”image”> Defines an image as a submit button.

Defines a date picker with the year, month and


<input type=”date”>
day
<input type=”email”> Defines a field for an e-mail address
Defines a month and year control in format is
<input type=”month”>
"YYYY-MM"

<input type=”range”> Define a range control. Default range is 0 to 100.

Defines a date picker that includes the year,


<input type= “datetime-local”>
month, day and time

<input type=”time”> Defines a control for entering a time.

<input type=”week”> Defines a week and year control.

Defines a text field for entering a search string like


<input type=”search”>
a site search or Google search.

Defines a file-select field and a "Browse" button


<input type=”file”>
for file uploads.
Used to define input fields that should contain a
<input type=”tel”>
telephone number.
Programme-26
<html>
<form>
<fieldset>
<legend><font color="red">Student Registration Form</font></legend>
Admission Date:-<input type="datetime-local"><br>
First Name:- <input type="text" name="FirstName" maxlength="50"
placeholder="first name">
Last Name <input type="text" name="LastName" maxlength="50"
placeholder="last name"><br>
Student Image:- <input type="file"> <br>
Email ID:- <input type="email" name="EmailID" maxlength="100"
placeholder="actckhanpur1@gmail.com"> <br>
Mobile Number:- <input type="tel"placeholder="XXXX-XX-XXXX"
pattern="[0-9]{4}-[0-9]{2}-[0-9]{4}"><BR>
Gender:- <input type="radio" name="Gender" value="Male">
Male
<input type="radio" name="Gender" value="Female" />
Female<BR>
Date of Birth(DOB):-
<select name="BirthDay" id="Birthday_Day">
<option value="-1">Day:</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="BirthdayMonth" id="Birthday_Month">
<option value="-1">Month:</option>
<option value="January">Jan(1)</option>
<option value="February">Feb(2)</option>
<option value="March">Mar(3)</option>
<option value="April">Apr(4)</option>
<option value="May">May(5)</option>
<option value="June">Jun(6)</option>
<option value="July">Jul(7)</option>
<option value="August">Aug(8)</option>
<option value="September">Sep(9)</option>
<option value="October">Oct(10)</option>
<option value="November">Nov(11)</option>
<option value="December">Dec(12)</option>
</select>
<select name="BirthdayYear" id="Birthday_Year">
<option value="-1">Year:</option>
<option value="2017">2024</option>
<option value="2016">2023</option>
<option value="2015">2022</option>
<option value="2014">2021</option>
<option value="2013">2020</option>
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
</select><BR>
Address:- <br />
<textarea name="Address" rows="5" cols="50"></textarea><BR>
City:-<input type="text" name="City" maxlength="50"
placeholder="Delhi">
Pin Code:- <input type="Number" name="PinCode" maxlength="6"
placeholder="560068">
State:-<input type="text" name="State" maxlength="50" placeholder="New
delhi"><br>
Skills:-<br>
<input type="range"> Teamwork Skill <br>
<input type="range"> Communication Skill <br>
<input type="range"> Flexibility <br>
<input type="range"> Computer Skill <br>
Hobbies:-<br>
<input type="checkbox" name="Hobby Drawing" value="Drawing" />
Drawing
<input type="checkbox" name="Hobby Singing" value="Singing"> Singing
<br>
<input type="checkbox" name="Hobby Dancing" value="Dancing">Dancing
<input type="checkbox" name="Hobby Cooking" value="Cooking">
Sketching <br>
<input type="checkbox" name="Hobby Other" value="Other">Others
<input type="text" name="Other_Hobby" maxlength="50"
placeholder="Ex- Teaching" /><br>
Qualification:- <br>
<input type="checkbox" name="HighSchool" value="High School" >
High School(10th)
<input type="checkbox" name="HigherSchool" value="Higher School" >
Higher School(12th)<br/>
<input type="checkbox" name="Graduation" value="Graduation" />
Graduation(Bachelors)
<input type="checkbox" name="Post Graduation" value="Post Graduation"
/>
Post Graduation (Masters) <br/>
<input type="checkbox" name="Phd" value="Phd"> PHD <br>
<center> <input type="submit"> <input type="reset"></center> </form>
</html>

You might also like