HTML

HyperText Markup Language

WEB PAGE
• A web page or webpage is a document, commonly written in
HTML, that is viewed in an Internet browser.
• A web page can be accessed by entering a URL address into a
browser's address bar.
• A web page may contain text, graphics, and hyperlinks to other
web pages and files.
• Web pages have many uses.
• A cheap and easy way to spread information to a large audience.
• Another medium to market your business.
 Introduction to HTML
• Web pages are written in HTML - a simple scripting language.
• HTML is short for Hyper Text Markup Language.
• Hypertext is simply a piece of text that works as a link. Markup
Language is a way of writing layout information within
documents.
• Basically, an HTML document is a plain text file that contains text
and nothing else.
• When a browser opens an HTML file, the browser will look for
HTML codes in the text and use them to change the layout, insert
images, or create links to other pages.
• The extension of the file is .html (or) .htm
• You have to use Geany editor for a Web document.
HTML Editors
• Since HTML documents are just text files they can be written in
even the simplest text editor Notepad or Notepad++.
• We can use WYSIWYG editor . It is an acronym for "what you
see is what you get.“
• It is a type of editing software that allows users to see and edit
content in a form that appears as it would when displayed on an
interface, webpage, slide presentation or printed document.
• One of the most popular WYSIWYG editors are Front page and
Dreamweaver.
 Features of HTML
• HTML helps to build structure of a website and is a widely used Markup
language.
• It is easy to learn.
• Every browser supports HTML Language.
• HTML is lightweight and fast to load.
• Storage of big files are allowed because of the application cache feature.
• Do not get to purchase any extra software because it’s by default in every
window.
• Loose syntax (although, being too flexible won’t suit standards).
• HTML is simple to edit as being a plain text.
• It integrates easily with other languages such as JavaScript, CSS etc.
 History of HTML
• The first publicly available description of HTML was a document
called "HTML Tags", first mentioned on the Internet by Berners-
Lee in late 1991.
• November 24, 1995 - HTML 2.0 was published
• January 1997 - HTML 3.2 was published as a W3C
Recommendation.
• December 1997 - HTML 4.0 was published as a W3C
Recommendation.
• December 1999 - HTML 4.01 was published as a W3C
Recommendation.
• Latest Release – HTML 5.0 / 4 February 2014;
HTML TAG
• An HTML tag is a piece of markup language used to indicate the
beginning and end of an HTML element in an HTML document.

• Part of an HTML element, HTML tags help web browsers convert

HTML documents into web pages.
Structure of HTML Page
HTML Head Section
 META TAG
• Define keywords for search engines
Example : <meta name="keywords" content="HTML, CSS, JavaScript">
• Define a description of your web page:
Example : <meta name="description" content="Free Web tutorials for HTML
and CSS">
• Define the author of a page:
Example : <meta name="author" content=“RAM">
• Refresh document every 30 seconds:
Example : <meta http-equiv="refresh" content="30">
• Setting the viewport to make your website look good on all devices:
Example : <meta name="viewport" content="width=device-width,
initialscale=1.0">
HTML BODY SECTION
• HTML body section is a main contain section of web page all contain
that will be seen when the user loads the webpage.
• HTML body section supported all the contains such as text,
hyperlinks, images, Special Character, lists, tables, frames, forms etc.
• It's most powerful section and important section to display web
page.
HTML Block and Inline Elements
• Every HTML element has a default display value, depending on what
type of element it is.
• There are two display values: block and inline.
• A block-level element always starts on a new line, and the browsers
automatically add some space (a margin) before and after the element.
• A block-level element always takes up the full width available
(stretches out to the left and right as far as it can).
• Two commonly used block elements are: <p> and <div>.
• An inline element does not start on a new line.
• An inline element only takes up as much width as necessary.
Headings
• Search engines use the headings to index the structure and content of
our web pages.
• Users skim our pages by its headings. It is important to use headings
to show the document structure.
• <h1> headings should be used for main headings, followed by <h2>
headings, then the less important <h3>, and so on.
 Headings with various levels
Example
<html>
<body>
<hr>
<h1 align = "right">Heading 1</h1>
<hr>
<h2 align = "center">Heading 2</h2>
<h3 align ="left">Heading 3</h3>
<h4><font color = "#00FF00">Heading 4</font></h4>
<h5><font color="blue"> Heading 5</font></h5>
<h6>Heading 6</h6>
</body> </html>
OUTPUT
 Paragraph and division element
• The <p> element defines a paragraph in an HTML document.
• The <div> element defines a division or a section in an HTML
document.
<html> <body>
<p>Hello World</p> <div><Hello World</div>
<p>The P and the DIV elements are both block elements, and they will
always start on a new line and take up the full width available (stretches
out to the left and right as far as it can).</p>
</body> </html>
Formatting text
• <b> tag
Anything that appears within <b>...</b> element, is displayed in bold
• <i>
Anything that appears within <i>...</i> element is displayed in italics
• <u> Anything that appears within <u>...</u> element, is displayed
with underline
• <strike>
Anything that appears within <strike>...</strike> element is displayed
with strikethrough
 Formatting text
• <tt>The content of a <tt>...</tt> element is written in monospaced font. Most of
the fonts are known as variable-width fonts because different letters are of
different widths (for example, the letter 'm' is wider than the letter 'i'). In a
monospaced font, however, each letter has the same width.
• <sup>The content of a ^... element is written in superscript
• <sub>The content of a _... element is written in subscript
• <ins>Anything that appears within <ins>...</ins> element is displayed as
inserted text.
• <del>Anything that appears within <del>...</del> element, is displayed as
deleted text.
 Formatting text
• <big>The content of the <big>...</big> element is displayed one font size larger
than the rest of the text surrounding.
• <small>The content of the <small>...</small> element is displayed one font size
smaller than the rest of the text surrounding.
• <span>The <span> tag is used to group inline-elements in a document.
The <span> tag provides no visual change by itself.
 HTML <PRE> TAG
The <pre> tag defines preformatted text.
Text in a <pre> element is displayed in a fixed-width font, and the text preserves
both spaces and line breaks. The text will be displayed exactly as written in the
HTML source code.
<html>
<body>
<h1>The pre element</h1>
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves both spaces and
line breaks
</pre>
</body>
</html>
 Logical Tag
• <em>
Anything that appears within <em>...</em> element is displayed as
emphasized text.
• <mark>
Anything that appears with-in <mark>...</mark> element, is displayed as
marked with yellow ink.
• <strong>
Anything that appears within <strong>...</strong> element is displayed as
important text.
• <abbr>
You can abbreviate a text by putting it inside opening <abbr> and closing
</abbr> tags. If present, the title attribute must contain this full description and
nothing else
 Logical Tag
• <bdo>...</bdo>
The <bdo>...</bdo> element stands for Bi-Directional Override, and it is used to
override the current text direction.
• <dfn>...</dfn>
The <dfn>...</dfn> element (or HTML Definition Element) allows you to specify that
you are introducing a special term. Its usage is similar to italic words in the midst
of a paragraph.
• <blockquote>...</blockquote>
When you want to quote a passage from another source, you should put it in
between<blockquote>...</blockquote> tags.
• <q>...</q>
The <q>...</q> element is used when you want to add a double quote within a
sentence.
 Logical Tag
• <address>
The <address>...</address> element is used to contain any address
 Color
• Values for BGCOLOR and COLOR.
• All colors can be specified as a six character hexadecimal value:
RRGGBB
Example: 3 ways
• <body bgcolor =“FF0000”>
• <body bgcolor =“red”>
• <body bgcolor =“rgb(255,0,0)”>
• 16 Basic Colors: Black, Gray, Silver, White, Yellow, Lime, Aqua
Fuchsia, Red, Green, Blue, Purple, Maroon, Olive, Navy, Teal.
LIST
• How to specify the items
• There are 3 different types of lists.
1. Create an unordered list.
2. Create an ordered list.
3. Create a defined list.
Creation of an ordered list
• An ordered list starts with the <ol> tag. Each list item starts with the
<li> tag.
• The list items will be marked with numbers by default:
<OL>
<LI> List item …</LI>
<LI> List item …</LI>
<LI> List item …</LI>
</OL>
• We have the choice of setting the TYPE Attribute to one of five
numbering styles.
Type attribute in an Ordered list
Type and Start attribute in Ordered list
• You can specify a starting number for an ordered list
ORDERED LIST
<html>
<body text ="#FF0000">
<h2>An ordered HTML list</h2>
<ol type ="a" start ="4" >
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
UNORDERED LIST
• An unordered list starts with the <ul> tag. Each list item starts with the
<li> tag.
• The list items will be marked with bullets (small black circles) by
default:
Unordered list demo
<html>
<body text ="##0000FF">
<h2>Unordered List with Disc Bullets</h2>
<h1>
<ul type ="circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</h1>
</body>
</html>
Definition list
• A definition list is a list of items, with a description of each item.
• The tag defines a definition list.
• The tag is used in conjunction with (defines the item in the list) and
(describes the item in the list)
 Definition list demo
<html>
<head>
<title> How to use definition / description list </title>
</head>
<body>
<dl>
<dt> HTTP </dt>
<dd> Hyper Text Transfer Protocol </dd>
<dt> HTML </dt>
<dd> Hyper Text Markup Language </dd>
<dt> FTP </dt>
<dd> File Transfer Protcol </dd>
</dl>
</body>
</html>
 Nested list
• Place one list within another list. <ul type="square">
<html> <li>Green Tea</li>
<head> <li>Black Tea</li>
</ul>
<title>How to create a Nested list</title> </li>
</head> </ul>
<body> </body>
<h1>Nested Ordered list</h1> </html>
<ul>
<li>Milk</li>
<li>Coffee</li>
<li>Tea
OUTPUT
Design the following layout using list
 LINK
• The anchor <a> tag defines a hyperlink, which is used to link from one page
to another.
• The most important attribute of the <a> element is the href attribute, which
• indicates the link's destination.
• By default, links will appear as follows in all browsers:
• An unvisited link is underlined and blue
• A visited link is underlined and purple
• An active link is underlined and red
• Internal - Links to anchors on the current page.
• Local - Links to other pages within your site.
• Global - Links to outside of your site.
LINK
 Link demo
<html>
<head>
<title>How to create a link between pages</title>
</head>
<body>
<h1>Link</h1>
<a href="[Link]">Ordered list</a> <br/>
<a href="[Link]">Unordered list</a> <br/>
<a href="[Link]">definition list</a> <br/>
<a href="[Link]">First</a>
</body>
</html>
OUTPUT
Internal link
• HTML Internal Link is linked within the same web page. This link can
be absolute path or relative path.
• HTML internal link name is followed by (#). HTML <a> tag is use
for anchor point name, which is referred to a internal link into a same
page.
• When click on this anchor link, It's referred link automatically scrolls
and display on browser.
 Internal link demo
• <html>
• <head><title>Internal link demo </title>
• </head>
• <body>
• <h1> Internal link </h1>
• <a name="top">TOP</a> <br/>
• <a href="#bottom">BOTTOM </a>
• <p>Internal link demo</p>
• <a name="bottom">Bottom </a><br/>
• <a href="#top">TOP </a>
• </body>
• </html>
OUTPUT
EMAIL LINK
• HTML <a> tag provides you option to specify an email address to
send an email. While using <a> tag as an email tag, you will use
mailto: email address along with href attribute.
• Following is the syntax of using mailto instead of using http.
<a href = "mailto: abc@[Link]">Send Email</a>
 Email LinK Demo
<!DOCTYPE html>
<html>
<head>
<title>Email Link Example</title>
</head>
<body>
<h2>Click the link to send an email</h2>
<!-- Basic Email Link -->
<p>
<a href="[Link] Simple Email</a>
</p>
<!-- Email with Subject and Body -->
<p>
<a href="[Link]
Send Email with Subject & Message
</a>
</p>
</body>
</html>
 Folder link
• With HTML, absolute pathnames begin with a slash (/) and are followed by a
sequence of folders beginning with the highest level folder and proceeding to the
folder that contains the file.
Example
• <a href="D:/Winter Semester 2022-2023/Theory materials/Module 1/Module 1 -
Introduction - Part - [Link]">Unit I Material</a>

• <a href="[Link] [Link]!</a>

• You can link directly to a file on an FTP server. When the user clicks on the link, the
file downloads automatically using the browser’s built-in FTP functions and is saved
on the user's machine.

• < a href="[Link] </a>

Example : folder link
<html>
<head>
<title> how to use email link </title> </head>
<body>
<a href="D:/Winter Semester 2022-2023/Theory materials/Module
1/Module 1 - Introduction - Part - [Link]">Unit I Material</a> <br/> <br/>
<a href="[Link] [Link]!</a>
</body>
</html>
 IMAGE
• In HTML, images are defined with the tag.
• It is empty, which means that it contains attributes only, and has no
closing tag.
• The value of the src (source) attribute is the URL of the image you
• want to display.
• The alt attribute specifies alternate text to be displayed if for some reason
the browser cannot find the image, or if a user has image files disabled.
• To define the height and width of the image, use the height andwidth
attributes.
• Use the align attributes to place images within your body, tables, or
sections.
 Image demo
<html>
<head> <title> How to place the image on the web document
</title></head>
<body>
<img src="[Link]" width="200" height="200" border="5"align="right"/>
</body>
</html>
 Image Map
• An image map allows you to use one image but make different areas
of that image clickable. Each part of the picture behaves like a
separate button or link.

• Example:
If you have a map of India → click Delhi → open one link; click
Mumbai → open another.
 Image map
<html>
<head>
<title>
HTML area coords Attribute </title>
</head> <body>
<img src="[Link]" alt="alt_attribute" width="300" height="119"
usemap="#shapemap"/>
 Image map Cont.
<map name="shapemap">
<!-- area tag contained image. -->
<area shape="poly" coords="59, 31, 28, 83, 91, 83" href= "[Link]"
alt="Triangle">
<area shape="circle" coords="155, 56, 26" href= "[Link]" alt="Circle">
<area shape="rect" coords="224, 30, 276, 82" href= "[Link]"
alt="Square">
</map>
</body>
</html>
Output-Image Map
Target attribute in anchor tag
• The target attribute specifies where to open the linked document.
• <a href="[Link]" target="_self"> RED </a> <br/> <br/>
 Frame
• Frames allow for multiple ".html" documents to be displayed inside.
• Frames are most typically used to have a menu in one frame, and
content in another frame. When someone clicks a link on the menu that
web page is then opened on the content page.
• frameset - The parent tag that defines the characteristics of this frames
page. Individual frames are defined inside it.
• <frameset rows = “20%, 30%, *" border="7" bordercolor="yellow">
• <frameset COLS = "20%, 30%, *" border="7" bordercolor="yellow">
Frame demo
<html>
<head> <title>Frames</title> </head>
<frameset COLS = "20%, 30%, *" border="7" bordercolor="yellow">
<frame src = "[Link]"/>
<frame src="[Link]" />
<frame src="[Link]"/>
</frameset>
</html>
 Nested frame demo
<html>
<head>
<title> Nested frame demo </title></head> <frameset rows="50%, *">
<frameset cols ="35%, *">
<frame src ="[Link]" marginwidth="50" scrolling="no"/> <frame src
="[Link]" marginwidth="0"/>
</frameset>
<frame src ="[Link]"/> </frameset>
</html>
 Nested Frame demo 2
<html>
<head>
<title> how to display _parent </title> </head>
<frameset rows ="*, *" > <frameset cols="*,*,*"> <frame
src="[Link]"/> <frame src="[Link]"/> <frame src="[Link]"/>
</frameset>
<frameset cols="*,*"> <frame src="[Link]"/> <frame src="[Link]"/>
</frameset>
</frameset>
</html>
Target attribute demo
<html>
<head>
<title> Link file </title></head>
<body>
<a href="[Link]" target="_blank">RED</a><br/>
<a href="[Link]" target="right">GREEN</a><br/>
<a href ="[Link]" target="right">BLUE</a> </body>
</html>
OUTPUT
IFRAME TAG
• It define an inline frame with HTML tag .
• It can appear anywhere in your document.
• It defines a rectangular region within the document in which the browser can
display a separate document, including scrollbars and borders.
<html>
<head>
<title> Inline frame demo
</title> </head>
<body>
<iframe src="[Link]" name="iframe" width="400" height="200"
marginwidth="25" marginheight="100"/>
</body>
</html >
OUTPUT-IFRAME
Table
• The tag is used to begin a table.
• Within a table element are the <tr> table rows and <td> table columns tags
• A table cell is defined by <td> and </td>
• The border attribute defines table border.
• Use rowspan to span multiple rows and colspan to span multiple columns.
• With the cellpadding and cellspacing attributes, you will be able to adjust
the white space on your tables.
• Spacing defines the width of the border, while padding represents the
distance between cell borders and the content.
 Table demo
<html> <head>
<title> simple table </title> </head>
<body>
<table border = "2" bordercolor="red" width="50%" height="25%" cellpadding="20" cellspacing="20" > <caption> Mark list </caption>
<tr align="right">
<th> register no </th>
<th>name</th>
<th> mark </th> </tr>
<tr>
<td align="center"> 100 </td>
<td> Rama </td>
<td> 95 </td>
</tr>
</table>
</body>
</html>
Colspan
<html> <head>
<title> How to use column span </title> </head>
<body>
<table border = "2" bordercolor="red" width="50%" height="25%" >
<caption> Mark list </caption>
<tr>
<th colspan ="2" > register no and name</th><th> mark </th> </tr>
<tr>
<td colspan ="2" align ="center"> 100 Rama </td><td align="center"> 95
</td> </tr>
</table></body> </html>
Rowspan
<html> <head>
<title> How to create simple table </title> </head>
<body>
<table cellpadding="10" cellspacing="10" width="100%"><caption> Mark list
</caption>
<tr>
<th> register no </th> <th> name </th><th> mark </th> </tr>
<tr>
<td rowspan="2"> 100 101 </td> <td> Rama </td><td> 95 </td> </tr>
<tr>
<td> Aprameya </td> <td> 97</td> </tr> </table> </body>
</html>
OUTPUT-Rowspan
Table background Properties
<html> <head>
<title> How to use background color </title> </head>
<body>
<table border = "2" bordercolor="red" width ="50%" height="30%"
bgcolor="lime" > <caption> Mark list </caption>
<tr >
<th> register no </th> <th>name</th><th bgcolor ="yellow"> mark </th>
</tr>
<tr bgcolor ="blue">
<td > 100 </td> <td > Rama </td><td> 95 </td> </tr>
</table> </html>
Table background Properties
<html> <head>
<title> How to use background image </title> </head>
<body>
<table border = "2" bordercolor="red" width ="50%" height="30%"
background="[Link]" > <caption> Mark list </caption> <tr>
<th> register no </th> <th>name</th><th> mark </th> </tr>
<tr>
<td> 100 </td> <td> Rama </td>
<td> 95 </td> </tr>
</table> </body> </html>
HTML Entities
• Some characters are reserved in HTML.
• If you use the less than (<) or greater than (>) signs in your text, the
browser might mix them with tags.
• Character entities are used to display reserved characters in HTML.

Example :
• To display a less than sign (<) we must write:
HTML Entities
Character Entity demo
<html>
<head>
<title> How to represent indian rupee </title> </head>
<body>
<h1> price ₹ 500 </h1>
<h1> price ₹ 1500 </h1>
<h1> price ₨ 2500 </h1>
<h1> price ₨ 3500 </h1>
</body>
</html>
HTML FORM
• HTML forms are used to pass data to a server
• A form can contain input elements like label, text fields, checkboxes,
radio-buttons, submit buttons, select lists, text-area and more.
• <form method = “get/post” action =“[Link]”>
• method - We will only be using the post functionality of method,
which sends the data without displaying any of the information to the
visitor.
• action - Specifies the URL to send the data .
HTML FORM LAYOUT
Form - <INPUT> TAG
• Few attributes of <input> tag.
• Type - Determines what kind of input field it will be.
• Possible choices are text, submit and password.
• name - Assigns a name to the given field so that you may reference it
later.
• size - Sets the horizontal width of the field. The unit of measurement is in
blank spaces.
• maxlength - Dictates the maximum number of characters that can be
entered.
Form - <INPUT> TAG demo
<html>
<body>
<form method="post" action ="[Link]">
Name: <input type ="text" size = "15" maxlength="25"> <br/><br/>
Password : <input type="password" size = "15"
maxlength="10"><br/><br/>
<input type ="submit" value="SEND">
<input type ="reset" value ="Reset form fields"><br/>
</form> </body> </html>
 Form Input Radio button
• Radios are types of input forms that allow a user to pick an either/or type
of selection.

• value - specifies what will be sent if the user chooses this radio button.
Only one value will be sent for a givengroup of radio buttons.

• name - defines which set of radio buttons that it is a partof. Below we

have 2 groups . Gender and religion

• By using the checked attribute, we can tell our form to automatically

"check" a default radio
Form Input Radio button
<html> <body>
Select your gender and religion
<form method="post" action ="[Link]"> Gender :
<input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="female"> female <br/><br/>
Religion :
<input type="radio" name="religion" value="Hindu">Hindu <input
type="radio" name="religion" value="Christian">Christian
<input type="radio" name="religion" value="Muslim">Muslim <br/><br/>
<input type ="submit" value="SEND">
<input type ="reset" value ="Reset form fields"><br/>
</form> </body> </html>
Form – Input check box
• Check boxes allow for multiple items to be selected for a certain group
of choices.
• The check box's name and value attributes behave the same as a radio
button.
• It is possible to precheck the input boxes for your viewers using the
checked attribute.
• Simply set the checked attribute to yes or no
 Form – Input check box demo
<html> <!-- Vegetable Section -->
<head> <b>Vegetable :</b>
<title>Fruits and Vegetables</title> <input type="checkbox" checked> Onion
</head> <input type="checkbox" checked> Brinjal
<body> <input type="checkbox"> Cucumber
<br><br>
<h3>Fruits and Vegetable</h3>
<form> <!-- Buttons -->
<!-- Fruits Section --> <input type="submit" value="SEND">
<b>Fruits :</b> <input type="reset" value="Reset form fields">
<input type="checkbox" checked> Orange
<input type="checkbox"> Apple </form>
<input type="checkbox" checked> Grapes
</body>
<br><br>
</html>
Form – Input check box demo output
 Form – Text area
• The wrap attribute refers to how the text reacts when it reaches the end of
each row in the text field.
• Wrapping can be one of three settings: soft, hard, off
• Soft forces the words to wrap once inside the text area but when the form
is submitted, the words will no longer appear as such (Line breaks will
not be added).
• Hard wraps the words inside the text box and places line breaks at the
end of each line so that when the form is submitted it appears exactly as it
does in the text box.
• Off sets a textarea to ignore all wrapping and places the text into one
ongoing line.
 Form – Text area demo
<html>
<body>
<textarea cols="20" rows="5" wrap="hard"> HTML element represents a multi-
line plain-text editing control, useful when you want to allow users to enter a
sizeable amount of free-form text, for example a comment on a review or
feedback form </textarea>
<textarea cols="20" rows="5" readonly="yes" disabled="yes"> HTML element
represents a multi-line plain-text editing control, useful when you want to allow
users to enter a sizeable amount of free-form text, for example a comment on a
review or feedback form </textarea>
</form>
</body >
</html>
Form Input Select
• Drop down lists are the basic selection forms.
• By default the first coded will be displayed or selected as the
default. We can change this using the selected attribute.
• We use the size attribute to break out from the single displayed drop
down list
• We can further add to our selection forms by adding the multiple
attribute. This allows the user to select more than one entry from
your selection forms. Obviously this attribute does not work with
the single drop down lists.
 Form Input Select demo
<!DOCTYPE html>
<html>
<body>
<h2>Select Menu Example</h2>
<form>
<label>Choose one subject:</label><br>
<select>
<option>Blockchain Technology</option>
<option>Cryptography</option>
<option>Machine Learning</option>
<option>Deep Learning</option>
</select>
 Form Input Select demo
<br><br>
<label>Select multiple subjects:</label><br>
<select size="4" multiple="yes">
<option>Blockchain Technology</option>
<option>Cryptography</option>
<option>Machine Learning</option>
<option>Deep Learning</option>
</select>
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
 Grouping of form elements
• The <fieldset> tag is used to group related elements in a form.
• The <legend> tag is used to define a caption for the <fieldset> element.
<html>
<head><title>Formdemo </title></head>
<body> <form>
<fieldset>
<legend> personal details </legend>
Name : <input type ="text" name="sname"/> <br/><br/> Mobile : <input type ="number"
name="mobile"/> <br/><br/> Email : <input type ="text" name="email"/> <br/><br/>
</fieldset>
</form>
</body>
</html>
 Uploading a file
• The <input type="file"> defines a file-select field and a "Browse" button for file
uploads.
• To define a file-select field that allows multiple files to be selected, add the multiple
attribute.
<html>
<head>
<title>File Upload Box</title> </head>
<body><form >
<input type="file" name="fileupload" accept="image/* " />
</form >
</body>
</html>
 Formatted form
<html>
<head> <title> how to use the fieldset </title>
</head>
<body>
<form>
<table border="2">
<tr><td>Register number :</td><td><input type="text" name ="regno" size = "20"/>
</td></tr>
<tr><td>Name :</td><td><input type ="text" name ="stuname" size ="25"/></td></tr>
<tr><td>Gender</td><td><input type ="radio" name ="Gender" checked/> Male <br/>
<input type ="radio" name ="Gender"/> Female</td></tr>
 Formatted form
<tr><td>Course</td><td><input type ="checkbox" name ="course"/> OS
<br/> <input type ="checkbox" name ="course"/> DS <br/>
<input type ="checkbox" name ="course" checked/> CN <br/></td></tr>
<tr><td>Country</td><td><select name="country" size="3">
<option selected>India </option> <option>England </option>
<option>Albania </option> <option>Algeria</option> </select></td></tr>
<tr><td>CV</td><td><input type="file" name ="fileupload" /> </td></tr>
<tr><td><input type ="submit" name="register"/></td>
<td><input type ="reset" name="Clear"/></td</tr>
</form> </body>
</html>
Formatted form Output
 Audio tag
• The <audio> tag is used to embed sound content in a document, such as music
or other audio streams.
• The <audio> tag contains one or more <source> tags with different audio
sources. The browser will choose the first source it supports.
• The text between the <audio> and </audio> tags will only be displayed in
browsers that do not support the <audio> element.
• Autoplay Specifies that the audio will start playing as soon as it is ready
• Controls Specifies that audio controls should be displayed (such as a play/pause
button etc)
• Loop Specifies that the audio will start over again, every time it is finished
• Muted Specifies that the audio output should be muted
• Src Specifies the URL of the audio file
Audio tag demo
<html>
<body>
<audio controls loop>
<source src="audio2.mp3" type="audio/mpeg"> Your browser does not
support the audio element.
</audio>
</body>
</html>
 Video tag
• The <video> tag is used to embed video content in a document, such
as a movie clip or other video streams.
• The <video> tag contains one or more <source> tags with different
video sources. The browser will choose the first source it supports.
• The text between the <video> and </video> tags will only be
displayed in browsers that do not support the <video> element.
• Autoplay specifies that the video will start playing as soon as it is
ready
• Height Sets the height of the video player
 Video tag demo
<html>
<body>
<video width="320" height="240" controls>
<source src="video2.mp4" type="video/mp4"> Your browser does not
support the video tag.
</video>
</body>
</html>
 Marquee tag
• An HTML marquee is a scrolling piece of text displayed either
• horizontally across or vertically down your webpage depending on the
settings.
Attributes:
• width, height
• direction= up ,down ,left or right
• behavior – type of scrolling -> scroll, slide and alternate
• loop – how many time to scroll
• hspace = %
• vspace = %
• scrolldelay- This specifies how long to delay between each jump
Marquee tag Demo
<!DOCTYPE html>
<html>
<body>
<marquee>This is line 1 scrolling text...</marquee>
<marquee direction="right">This is line 2 scrolling
text...</marquee>
</body>
</html>