Scribd
Upload
20 views46 pages

HTML Theory

Uploaded by

kherrahul720
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
20 views46 pages

HTML Theory

Uploaded by

kherrahul720
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

BCA SEM 1 | Networking & Internet Environment

CHAPTER2:Basic of HTML and Advance HTML 5

Topic :Fundamental of HTML


 HTML stands for Hypertext Markup Language.
 HTML was developed by Tim Berners-Lee.
 It is not a programming language but it is markup language.
 Markup tells the web browser how to display.
 HTML browser must have .html and .htm file extension.
 It is universal language to design starting web page.
 HTML for the language describing for the web page.

Topic: HTML Tags


 HTML surrounded by angle brackets.
 Normally HTML tags come in pair <HTML>....</HTML>.
 The first tag is called starting tag and the second tag is called ending
tag.
 The text between starting tag and the ending tag elements contents.
 HTML tags are two types:
1. Standard Tag or Singular Tag:
 A singular does not need its companion or we do not need to
close this type of tag.
 For Ex. <br><hr>
2. Container Tag or Paired Tag:
 A tag is said to be paired tag if it is along with it is companion or
pair.
 for ex.<html>......</html>
<body>.....</body>
 The container tag active effect and closing tag deactivates the
effect.
 HTML tags can have attributes.
 It provides additional information about tags.
 Attributes are always specifying in opening tag.
 Multiple attributes separated with space.

Topic: HTML Elements


 An HTML element is defined by a start tag, some content, and
an end tag.
 The HTML element is everything from the start tag to the end tag:
 <tagname>Content goes here...</tagname>
Prepared by: PoojaPancholi | Shree C. U. Shah, Wadhwan Page 1
BCA SEM 1 | Networking & Internet Environment

 Examples of some HTML elements:


<h1>My First Heading</h1>
<p>My first paragraph.</p>
Topic: HTML Attributes
 All HTML elements can have attributes
 Attributes provide additional information about elements
 Attributes are always specified in the start tag
 Attributes usually come in name/value pairs
like: name="value"

Topic: HTML Page Structure


 All normal pages consists of two section:-
[Link] Section
[Link] Section
 In the head section it is use for text and tag they do not display
directly on the web page.
 The body tag is used for text and tags that are directly display on the
web page.
 Each document has <HTML>at the beginning and </HTML> at the
end telling the browser where to start and where to stop.
<HTML>
<HEAD>
...........................
............................
</HEAD>
<BODY>
............................
............................
</BODY>
</HTML>
1. <HTML> ……. </HTML>
 This tag identifies the documents as HTML documents.
 This tag contains entire documents.
 This is paired tag.
2. <HEAD> ……. </HEAD>
 The HEAD tag defines an HTML document header.
 This tag is contains information about document
including its title, script used, style definition and
document description.
Prepared by: PoojaPancholi | Shree C. U. Shah, Wadhwan Page 2
BCA SEM 1 | Networking & Internet Environment

 The browser does not display directly the information


inside head section.
 You can allow any of the following tags inside the section.
 <Title>, <link>, <basefont>,<base>,<script>, <style>.
3. <BODY> ……. </BODY>
 The BODY tag specifies the main content of a document.
 The <body> element contains all the contents of an
HTML document, such as headings, paragraphs, images,
hyperlinks, tables, lists, etc.
 Attributes of BODY tag are as follows:

Alink colo It defines the color of the active link in a


r document.
backgroun URL It determines the background image for the
d document.
Bgcolor colo It determines the background color of the
r content.
Link colo It determines the color of the unvisited link.
r
Text colo It determines the color of the text in the
r document.
Vlink colo It determines the color of the visited link.
r

4. <TITLE> …….. </TITLE>


 <title> tag contains the title of html document.
 This tag must be used inside the<head> tag.
 The title is displayed in title bar of the document.
 Example:
<html>
<head>
<title>First web page.</title>
</head>
<body>
<p>Welcome to my first web page.</p>
Prepared by: PoojaPancholi | Shree C. U. Shah, Wadhwan Page 3
BCA SEM 1 | Networking & Internet Environment

</body>
</html>

Topic: Colors in HTML:


 In HTML you can sets colors in 3 ways:
1. colorname= you can apply directly colorname to color related
attribute.
Ex: bgcolor=”red”
2. hexadecimal= hexadecimal code will start # followed by 6
characters
Ex: bgcolor= #A1B2C3
3. RGB()= in RGB() you have to supply 3 integers value between
0,255 for red, green, blue.
Exa: bgcolor= rgb(255,0,0)

Topic: Comment in HTML


 The comment tag is used to insert comments in the source code.
 Comments are not displayed in the browsers.
 You can use comments to explain your code, which can help
you when you edit the source code at a later date.
 This is especially useful if you have a lot of code.
<html>
<head><title>Comment Example</title></head>
<body>
<h1>Comment Example</h1>
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Comments are not displayed in the browser -->
</body>
</html>

Topic: HTML Heading


 HTML headings are titles or subtitles that you want to display
on a webpage.
 HTML headings are defined with the <h1> to <h6> tags.
 <h1> defines the most important heading.
 <h6> defines the least important heading.
 Search engines use the headings to index the structure and content
of your web pages.
Prepared by: PoojaPancholi | Shree C. U. Shah, Wadhwan Page 4
BCA SEM 1 | Networking & Internet Environment

 You can change the size of a heading with the style attribute, using
the font-size property
 Example:
<html>
<body>
<h1 style="font-size:60px;">Heading 1</h1>
<p>You can change the size of a heading with the style attribute,
using the font-size property.</p>
</body>
</html>

Topic: Paragraph
 A paragraph always starts on a new line, and is usually a
block of text.
 The HTML <p> element defines a paragraph.
 A paragraph always starts on a new line, and browsers automatically
add some white space (a margin) before and after a paragraph.
 You cannot change the output by adding extra spaces or extra lines in
your HTML code.
 The browser will remove any extra spaces and extra lines when
the page is displayed.
 Example:
<html>
<body>

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

Topic: Line Breaks


Prepared by: PoojaPancholi | Shree C. U. Shah, Wadhwan Page 5
BCA SEM 1 | Networking & Internet Environment

 The HTML <br> element defines a line break.


 Use <br> if you want a line break (a new line) without starting a new
paragraph:
 Example:
<html>
<body>
<p>This is<br>a paragraph<br>with line breaks.</p>
</body>
</html>

Topic: Formatting Tags


1. HTML <pre> element
 The HTML <pre> element defines preformatted text.
 The text inside a <pre> element is displayed in a fixed-width font
(usually Courier), and it preserves both spaces and line breaks:
 Example:
<pre>
Today is Thursday.
My first lecture is CS.
My second lecture is HTML lab.
My third lecture is HTML.

2. <blockquote>…..</blockquote>:
 This tag provides left and right indention to does specifying tag.
 It is used to display important information to the user.
3. <b>…..</b>:
 It display the text will bold font style.
4. <i>…..</i>:
 It displays the text with italic font style.
5. <u>…..</u>:
 It displays the text with underline font style.
6. <strike>…..</strike>:
 It displays content with strike through effect.
 Strike effect thus a horizontal line at the middle of the text.
7. <tt>…..</tt>:
 It displays the content with typewriter font.
8. <small>…..</small>:
 It displays the content with the smallest font size.
9. <big>…..</big>:
Prepared by: PoojaPancholi | Shree C. U. Shah, Wadhwan Page 6
BCA SEM 1 | Networking & Internet Environment

 It displays the text with the largest font size.


10. <strong>…..</strong>:
 It displays the text with bold face.
11. <center>…..</center>:
 It displays the text with center alignment.
12. <blink>…..</blink>:
 It displays the blinking text.
 This tag is supported only Netscape and Firefox.
13. <marquee>…..</marquee>:
 The <marquee> tag is a container tag of HTML is
implemented for creating scrollable text or images within a
web page from either left to right or vice versa, or top to
bottom or vice versa.
 Syntax:
<marquee behavior=”scroll” direction=”left”>Text</marquee>
Behavior= {scroll, slide, alternate}
Direction= {left, right, up, down}
 Attributes:
 Behavior= it specify the type of scrolling score is the default
Behavior.
 Direction= it specify the text direction of scrolling text.
 bgcolor= it is used to set bgcolor of the scrolling text.
 Loop= it set a number with determines how many times the
marquee text should be continue.
 Height= it set the height of the marquee text in pixel or
Percentage.
 Width= it sets the width of the marquee text in pixel or
percentage.
 Scrollamount= it is indicate total number of pixel the text
travel between the frame.
 Scrolldelay= it is indicate the number of milliseconds the frame
would wait c 1000ms = 1 second.
 Hspace= it indicates the horizontal space around the marquee.
 Vspace= it indicates the vertical space around the marquee.
14. <sub>…..</sub>:
 It moves the text lower than the text.
 It also display the text smaller than font size.
15. <sup>…..</sup>:
 It moves the text higher than the text.
Prepared by: PoojaPancholi | Shree C. U. Shah, Wadhwan Page 7
BCA SEM 1 | Networking & Internet Environment

 It also display the text in smaller font size.


16. <abbr>…..</abbr>:
 The HTML <abbr> element defines an abbrebrition an acronym.
 Marking abbrebriation can give useful information to the browser,
translation systems and search engine optimization.
 Example:
<abbr title = ”World Health Oraganization”> WHO </abbr>
Program:-
Formatting Tags:
<html>
<body>
<p><center>formatting tags</center></p>
<p><b> this text is bold </b></p>
<p><i> this text is italic </i></p>
<p><u> this text is underline </u></p>
<p><em> this text is emphasized </em></p>
<p><strike> display text with strike through effect </strike></p>
<p><tt> this text is type writer font </tt></p>
<p><small> this text is smallest font </small></p>
<p><big> this text is largest font </big></p>
<p><strong> this text is bold face </strong></p>
<p><blink> blinking text </blink></p>
<p>this is<sub>subscript</sub>and
<sup>superscript</sup></p>
<p>
This paragraph
Contains a lot of spaces
In the source code, but the
Browser ignore it
</p>
<pre>
My bonnie lies over the ocean.
My bonnie lies over the sea.
My bonnie lies over the ocean.
Oh, bring back my bonnie to me
</pre>
</body>
</html>

Prepared by: PoojaPancholi | Shree C. U. Shah, Wadhwan Page 8


BCA SEM 1 | Networking & Internet Environment

2. marquee tag:
<html>
<head>
<title> HTML marquee tag </title>
</head>
<body>
<marquee width="60%" direction="up" height="80px">
Shree C U Shah College
</marquee>
<br>
<marquee behavior="scroll" direction="up" scrollamount="1"
hspace="10%" vspace="5%" height="80px">Slow Scrolling</marquee>
<br><br>
<marquee behavior="slide" bgcolor="yellow" direction="right"
scrollamount="12">Little Fast Scrolling</marquee>
<marquee behavior="alternate" direction="left"
scrollamount="30" >Fast Scrolling</marquee>

</body>
</html>

17. <q>…..</q>:
 The HTML <q>element defines a “double quotation mark” in text.
 Browsers usually insert potential mark around the<q> element.
18. <em>…..</em>:
 The <em> is phrase tag. It renders emphasized text.
19. <address>…..</address>:
 The element <address> defines contact information[other/owner] of a
document or an article.
 The <address> element is usually displayed in italic.
 Most browsers will add a line break before and after the element.
20. <bdo>…..</bdo>:
 The HTML <bdo> element defines bi-directional overwrite.
 The <bdo> element is used to overwrite the current text.
 Example:
<bdo dir=”rtl”> this line will be written from right to left</bdo>
21. <mark>…..</mark>:
 This tag defines mark text use the <mark> if you want to high light
parts of your text.
Prepared by: PoojaPancholi | Shree C. U. Shah, Wadhwan Page 9
BCA SEM 1 | Networking & Internet Environment

 Example:
<p> do not forget to buy <mark> milk </mark> today </p>
22. <hr> [Horizontal Rule]:
 The <hr> defines a break in an HTML page and is most often display
as a horizontal rule.
 This tag draw a horizontal line across the screen.
 It is singular tag.
 Attributes of <hr>:
 Size= this attribute specifies the thickness of line in pixel. The size
attributes as an integer value.
Exa: size=1 for thin line and Size=5 for thick line
 Width= this attribute specifies the length of the line. The default
values of the width will 100%. You can specify the value either in
percentage or in pixel.
Exa: <hr size=5, width=25%>
 Align= this attribute specify the element of the line. The default
element is always left.
 Color= it specify the color of line.
 No shade= this attribute specify that browser do not shade the line.

Topic: The List Tags


 HTML Lists are used to specify lists of information.
 All lists may contain one or more list elements.
 We can create a list inside another list, which will be termed as nested
list.
 There are three different types of HTML lists:
1. Ordered List or Numbered List(ol)
2. Unordered List or Bulleted List(ul)
3. Description List or Definition List(dl)
Details:
1. Ordered List or Numbered List (ol):
 In the ordered HTML lists, all the list items are marked with
numbers by default.
 It is known as numbered list also.
 HTML <ol> tag is used for ordered list.
 The list items start with <li> tag.
 We can use ordered list to represent items either in numerical order
format or alphabetical order format, or any format where an order is
emphasized.
Prepared by: PoojaPancholi | Shree C. U. Shah, Wadhwan Page 10
BCA SEM 1 | Networking & Internet Environment

 There can be different types of numbered list:


I. Numeric Number (1, 2, 3)
II. Capital Roman Number (I II III)
III. Small Roman Number (i ii iii)
IV. Capital Alphabet (A B C)
V. Small Alphabet (a b c)
 Attributes of <ol> Tag:
o Start: Specifies the start value of an ordered list
o Type: Specifies the kind of marker to use in the list (1,I,A…)
o Reversed: Specifies that the list order should be reversed
(9,8,7...)
 Example:
<html>
<body>
<h1>BCA SEM 1 Subjects</h1>
<ol type="I" reversed>
<li>Maths</li>
<li>C Language</li>
<li>Computer Fundamental</li>
<li>HTML</li>
</ol>
</body>
</html>
2. Unordered List or Bulleted List (ul):
 In HTML Unordered list, all the list items are marked with bullets.
 It is also known as bulleted list also.
 The Unordered list starts with <ul> tag and list items start
with the <li> tag.
 We can use unordered list where we do not need to display
items in any particular order.
 The HTML <ul> tag is used for the unordered list.
 There can be 4 types of bulleted list:
o disc
o circle
o square
o none

 Attributes of <ul> tag:

Prepared by: PoojaPancholi | Shree C. U. Shah, Wadhwan Page 11


BCA SEM 1 | Networking & Internet Environment

o Type: Specifies the style of the bullet.


 Example:
<html>
<body>
<h1> Sports Club Games</h1>
<ul type="square">
<li>Cricket</li>
<li>Football</li>
<li>Badminton</li>
<li>Hockey</li>
</ul>
</body>
</html>
3. Description List or Definition List (dl)
 HTML Description list is also a list style which is supported by HTML
and XHTML.
 It is also known as definition list where entries are listed like a
dictionary or encyclopedia.
 The definition list is very appropriate when you want to
present glossary, list of terms or other name-value list.
 The HTML definition list contains following three tags:
o <dl> tag defines the start of the list.
o <dt> tag defines a term.
o <dd> tag defines the term definition (description).
 Attributes:
 Example:
<html>
<body>
<dl>
<dt>HTML</dt>
<dd>is a markup language</dd>
<dt>Java</dt>
<dd>is a programming language and platform</dd>
<dt>JavaScript</dt>
<dd>is a scripting language</dd>
<dt>SQL</dt>
<dd>is a query language</dd>
</dl>

Prepared by: PoojaPancholi | Shree C. U. Shah, Wadhwan Page 12


BCA SEM 1 | Networking & Internet Environment

</body>
</html>
Headings in a list:
 The LH or list header element is used to provide a title for a list.
 Instead of using the <LI> tag if we use the <LH> tag for a listed item,
it becomes a listed heading.
 Example:
<html>
<head>
<title>List Heading</title>
</head>
<body>
<ul type=”square”>
<lh>Fruits I Like:</lh>
<li>Apple</li>
<li>Grapes</li>
<li>Mango</li>
</ul>
</body>
</html>

Topic: Nested List


 A nested list in HTML is a list within a list.
 You can make a nested unordered list, a nested ordered list, or
even an ordered list nested inside an unordered list.
 Example:
<html>
<head>
<title> ordered List </title>
</head>
<body>
<h2>Nested ordered List</h2>
<ul>
<li>Progrmming Languages</li>
<ol type="a">
<li>C</li>
<li>C++</li>
<li>Java</li>
<li>Python</li>
Prepared by: PoojaPancholi | Shree C. U. Shah, Wadhwan Page 13
BCA SEM 1 | Networking & Internet Environment

</ol>
<li>DSA</li>
<ol type="a">
<li>Array</li>
<li>Linked List</li>
<li>stack</li>
<li>Queue</li>
<li>Trees</li>
<li>Graphs</li>
</ol>
</ul>
</body>
</html>

Topic: Link Tag


 A hypertext link is a piece of content that the user can click to invoke
an action.
 The most common actions are scrolling to a different place in the
current document and opening a new document.
 A hypertext link can contain text and/or graphics.
 There are two types of links: Internal and external links.
 To define a hypertext link, use the <a> tag with HREF attribute to
indicate the start of the link, and use the </a> tag to indicate the end
of the link.
 When the user clicks any content between the <a Href> and </a>
tags, the link is activated.
 The value of the HREF attribute must be a URL.
 Most browsers display hypertext links in a color different from other
texts so that users can easily identify them.
 When the mouse cursor is placed over it, the standard arrow shaped
mouse cursor changes to the shape of a hand.
 Syntax:
<a href=”location”>Hyper Text</a>
 Example:
<html>
<head>
<title>Link Example</title>
</head>
<body>
Prepared by: PoojaPancholi | Shree C. U. Shah, Wadhwan Page 14
BCA SEM 1 | Networking & Internet Environment

<p> Click on the below link to open external file…


</p>
<br>
<a href=”[Link]
<br>
<p>Click on the below link to open internal file..
<a href=”I:\html programs\p1_first.html">First Program</a>
</body>
</html>
 Attributes of Link Tag:
 href:It s used to specify the URL of the linked document.
 hreflang: It is used to specify the language for a linked document.
 rel: It is used to specify the relationship between the current and the
linked document.
 target: It is used to specify the window or a frame where the linked
document is loaded.
 type: It is used to set/return the content type of the linked document.
 Title: The title attribute specifies extra information about an element.
The information is most often shown as a tooltip text when the mouse
moves over the element.
 Example:
<html>
<head>
<title>Link To Css file</title>
<link rel=”stylesheet” type=”text/css” href=”[Link]” hreflang=”en-
us”>
</head>
<body style="text-align:center;">
<h1>GeeksForGeeks</h1>
<h2>
HTML Link hreflang Attribute
</h2>

</body>
</html>
 Target Attribute:
o The target attribute specifies where to open the linked document.
o The target attribute can have one of the following values:

Prepared by: PoojaPancholi | Shree C. U. Shah, Wadhwan Page 15


BCA SEM 1 | Networking & Internet Environment

 _blank - Opens the linked document in a new window or tab


 _self - Opens the linked document in the same window/tab
as it was clicked (this is default)
 _parent - Opens the linked document in the parent frame
 _top - Opens the linked document in the full body of the
window
 framename - Opens the linked document in a named frame
o Example
<html>
<body>
<h2>The target Attribute</h2>
<a
href="[Link]
our HTML tutorial!</a>
<p>If you set the target attribute to "_blank", the link will open in
a new browser window or tab.</p>
</body>
</html>
Topic: Images in HTML
 Images can improve the design and the appearance of a web page.
 The HTML <img> tag is used to insert an image in a web page.
 The <img> tag is empty; it contains attributes only, and does not have
a closing tag.
 The <img> tag has two required attributes:
o Src : It is a necessary attribute that describes the source or path of
the image. It instructs the browser where to look for the image on
the server. The location of image may be on the same directory or
another server.
o Alt:It is used to specify the alternate text for an image. It is useful
when the image is not displayed. It is used to give alternative
information for an image.
o Width: It is an optional attribute which is used to specify the width
to display the image.
o Height: It is an optional attribute which is used to specify the height
to display the image.
o Border: It is used to specify the border width around the image. The
default value of <img> border attribute is 0.

Prepared by: PoojaPancholi | Shree C. U. Shah, Wadhwan Page 16


BCA SEM 1 | Networking & Internet Environment

o Hspace:Itis used to specify the number of whitespaces on the left


and the right side of the image.
o Vspace:Itis used to specify the number of whitespaces on bottom
and top side of an image.
o Align:It is used to set the alignment of an image.
 left: It sets the alignment of the image to the left.
 right: It sets the alignment of the image to the right.
 top: It sets the alignment of the image to the top.
 bottom: It sets the alignment of the image to the bottom.
 Example:
<html>
<head>
<title>Image Example</title>
</head>
<body>
<h1>Good Morning Image</h1>
<img style="border:5px solid green;"
src="[Link]"
hspace="30"
vspace="30"
alt="goodmorning text"/>
</body>
</html>

Topic: MAP TAG


 The <map> tag is used to define an image map.
 An image map is an image with clickable areas.
 The required name attribute of the <map> element is associated with
the <img>'s usemap attribute and creates a relationship between the
image and the map.
 The <map> element contains a number of <area> elements, that
defines the clickable areas in the image map.
 Attributes:
 The <Area> Element:
o The <area> tag defines the clickable areas or active areas inside
the image-map which are associated with the hyperlinks.
o If you click on those areas then it will perform some action such
as open a new image, new URL, etc.

Prepared by: PoojaPancholi | Shree C. U. Shah, Wadhwan Page 17


BCA SEM 1 | Networking & Internet Environment

o This tag is always used with <map> element.


o Attribute:
 Shape: It defines the shape of area like rectangle, circle and
polygon.
 Coords: It defines the coordination of particular area.
 Href: It defines the hyperlink destination for the active area.
 Target
 alt

 Example:
<html>
<body>
<h1>The map and area elements</h1>

<p>Click on the computer, the phone, or the cup of coffee to go to a


new page and read more about the topic:</p>

<imgsrc="[Link]" alt="Workplace" usemap="#workmap"


width="400" height="379">

<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer"
href="[Link]">
<area shape="rect" coords="290,172,333,250" alt="Phone"
href="[Link]">
<area shape="circle" coords="337,300,44" alt="Cup of coffee"
href="[Link]">
</map>

</body>
</html>

Topic: Insert Audio in HTML


 The HTML <audio> element is used to play an audio file on a web
page.
 The controls attribute adds audio controls, like play, pause, and
volume.

Prepared by: PoojaPancholi | Shree C. U. Shah, Wadhwan Page 18


BCA SEM 1 | Networking & Internet Environment

 The <source> element allows you to specify alternative audio files


which the browser may choose from. The browser will use the first
recognized format.
 The text between the <audio> and </audio> tags will only be
displayed in browsers that do not support the <audio> element.
 To start an audio file automatically, use the autoplay attribute:
 This allows you to load, play, and pause audios, as well as set duration
and volume.
 There are also DOM events that can notify you when an audio begins
to play, is paused, etc.
 There are three supported audio formats in HTML: MP3, WAV, and
OGG.
 Attributes:
1. Autoplay: Specifies that the audio will start playing as soon as it is
ready
2. Controls: Specifies that audio controls should be displayed(such as
a play/pause button etc)
3. Loop: Specifies that the audio will start over again, every time it is
finished
4. Muted: Specifies that the audio output should be muted
5. Src: Specifies the URL of the audio file

 Example:
<html>
<head>
<title>Audio</title>
</head>
<body>
<h1>Click To Play Music</h1>
<audio controls>
<source src="music.mp3" type="audio/mp3">
</audio>
</body>
</html>

Topic: Insert Video in HTML


 The <video> tag is used to embed video content in a document, such
as a movie clip or other video streams.

Prepared by: PoojaPancholi | Shree C. U. Shah, Wadhwan Page 19


BCA SEM 1 | Networking & Internet Environment

 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.
 There are three supported video formats in HTML: MP4, WebM, and
OGG.
 Attributes:
1. Autoplay: Specify that the video will start playing as soon as it is
ready.
2. Controls: Specify that the video controls should be displayed. (such
as play/pause button, etc.)
3. Height: Sets the height of the video player.
4. Width: Sets the width of the video player.
5. Loop: Specifythat the video will start over again, every time it is
finished.
6. Muted: Specify that the audio output of the video should be muted.
7. Src: Specify the URL of the video file.
8. Preload:Specifies if and how the author thinks the video should be
loaded when the page loads
9. Poster: Specifies an image to be shown while the video is
downloading, or until the user hits the play button
 Example:
<html>
<head>
<title>Video play</title>
</head>
<body>
<h1>The Video Element with attributes</h1>
<video width="320" height="240" controls >
<source src="video.mp4" type="video/mp4">
</video>
</body>
</html>

Topic: Tables in HTML


 A table is grid containing rows and columns.
 Each row and column can have a heading that identifies the type of
information.

Prepared by: PoojaPancholi | Shree C. U. Shah, Wadhwan Page 20


BCA SEM 1 | Networking & Internet Environment

 Intersection of the row and the column is known as cell, which stores
data that is displayed in the table.
 A table helps in presenting complex data in a readable format.
 Table can define between <table>...</table> tags.
 Table rows can be described in <tr>...</tr> tags and table columns
can be described in <td>...</td> tags.
 Attributes of these tags help you to control alignment, spacing,
background color, etc. Of the cell.
columns

Rows

 Atrributes of <table> Tag


o Align :It is used to specify the alignment of the table. Its values
are left, center and right.
o Border :It is used to set the table border.
o Bordercolor :It is used to specify the color of the table border.
o Bgcolor :It is used to set the background color of the table.
Values are given in hexa value or color name.
o Background :It is used to set the image as background of the
table.
o Caption:The <caption> tag defines a table
[Link] <caption> tag must be inserted immediately after
the <table> tag.
o Cellspacing :It is used to specify the space between two cells.

Prepared by: PoojaPancholi | Shree C. U. Shah, Wadhwan Page 21


BCA SEM 1 | Networking & Internet Environment

o Cellpadding :It is used to specify the space between cell


boundary and text.
o Height :It is used to specify the height of the table. Values can
be given in pixel and percentage. Eg. Height= “60%”.
o Width :It is used to specify the width of the table. Values can be
given in pixel and percentage. Eg. Height= “100%”.
 Example:
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<table align= "center" border = "1" width="500" height="200”>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Rajesh</td>
<td>5000</td>
</tr>

<tr>
<td>Ramesh</td>
<td>7000</td>
</tr>
</table>
</body>
</html>

 The <th> Tag:


o It is a container tag.
o It is used to display the table Heading.
o Attributes:
o Bgcolor : used to set background color of the table heading.
o Colspan : used to merge two or more columns of the table
header.
o Rowspan : used to merge two or more rows of the table header.
 The<tr> Tag:

Prepared by: PoojaPancholi | Shree C. U. Shah, Wadhwan Page 22


BCA SEM 1 | Networking & Internet Environment

o It is a container tag.
o It is used to specify table row.
o Attribute :
o Bgcolor : used to specify background color of the table row.
 The <td> Tag:
o It is a container tag.
o It is used to display the text in the table cell.
o Attributes :
o Align : It is used to specify the alignment of the the in the cell. Its
values are left, center and right.
o Bgcolor : It is used to set the background color of the cell. Values
are given in hexa value or color name.
o Colspan : used to merge two or more cells of the table row.
o Rowspan : used to merge two or more cells of the table column.
o Valign : It is used to specify the vertical alignment of the text in
the cell. Values are center, top and bottom. Default is center.

Topic: HTML Forms


 Html Forms provide functionality to take different kinds of user input
from web page.
 It is very useful for e-commerce sites for user interaction.
 HTML forms help to submit data collected from HTML controls to a web
server.
 Forms are used to capture user inputs.
 Web page form consists of many different form elements, each with
unique name.
 These elements can include different HTML elements like text fields,
text area, radio buttons, checkboxes, dropdown lists and submit and
reset buttons.
 The web form is defined between <FORM>--- </FORM> tags.
 Each frame has unique name, which is used by JavaScript to refer to
the form and its elements.
Topic: The Form tag:
 It is used to take different kinds of user input from web page.
 Attributes :
o Name : It is used to specify unique name of form. Eg.
Name=“input”

Prepared by: PoojaPancholi | Shree C. U. Shah, Wadhwan Page 23


BCA SEM 1 | Networking & Internet Environment

o Method : It is used to specify which method form will be used to


collect information. Its values are “get and post”.
o The get method sends data captured by form elements to web
server encoded in to a URL.
o The data captured in form elements is appended to the URL.
o This technique is used when there is a small amount of data to be
sent to the web server because maximum 1024 bytes of data can
be sent using this method.
o The post method sends the data captured by form elements to
the web server as a separate bit-stream of data.
o When there is a large amount of data to be sent to the web server
post method is used.
o By default its value is get. E.g. Method=“post”
o Action : It is used to specify URL of a program on the web server
that will process the captured data of a web page that is called on
submitting the form. Eg. Action=“[Link]”.
o Target: Specify the target window or frame where the result of
the script will be displayed. It takes values like _blank, _self,
_parent etc.
 Example:
<html>
<body>
<form name=“login” method=“post” action=“[Link]”>
</form>
</body>
</html>
o In the above example, web page contains one form with unique
identification name “login”.
o The form will use post method to submit the data of HTML form
control to the web server.
o Different HTML elements are specified in type attribute of
<input> tag to capture user input.
Topic: The Input Tag
 It is used to specify input field to capture user input.
 Attributes
o Checked: The checked attribute specifies that an element should
be pre-selected (checked) when the page loads. The checked

Prepared by: PoojaPancholi | Shree C. U. Shah, Wadhwan Page 24


BCA SEM 1 | Networking & Internet Environment

attribute can be used with < input type=”checkbox” > and <
input type=”radio” >.
o Name: It is used to specify a unique name for the input element.
Eg. Name=“userid”
o Type: It is used to specify the type of the input element. Its
values are button, checkbox, file, hidden, password, radio, reset,
submit, text. Default value of type is “text” eg. Type=“hidden”.
o Value: It is used to define the default value of the element. Eg.
Value =“BCA”
o Height: It is used to specify the height of the input field.
o Width: It is used to specify the width of the input field.
o Required: This attribute specify that the input field must be filled
out before submitting the form.
o Size: It is used to specifies the width, in characters, of an
<input> element

Topic: HTML FORM CONTROLS


 There are different types of form controls that you can use to collect
data using HTML form –
o Text Input Controls
o Checkboxes Controls
o Radio Box Controls
o Select Box Controls
o File Select boxes
o Hidden Controls
o Button Controls

1. Text Input Controls


 There are three types of text input used on forms −
 Single-line text input controls
 The text field provides a single-line field in which the user can
type his text input and this text input is sent to the server.
 A text field is created using the <input> tag with the type=“text”
attribute.
 Example:
<html>
<head><title>Text Input Control</title></head>
<body>
Prepared by: PoojaPancholi | Shree C. U. Shah, Wadhwan Page 25
BCA SEM 1 | Networking & Internet Environment

<form>
First name:<input type="text" name="first_name">
<br>
Last name:<input type="text" name="lastname">
</form>
</body>
</html>

 Password input controls


 There is a special type of text field called a password field which
also gets and sends text input from the user.
 But when the user types the input, only asterisks(*) or bullets are
displayed on the screen.
 Attributes:
 Type
 Name
 Value
 Size
 Maxlength
 Following are the example in which login form is generated which
collect username and password from the user.
 Example:
<html>
<body>
<h2>Password field</h2>
<p>The <strong>input type="password"</strong> defines a
password field:</p>
<form>
User name:<br>
<input type="text" name="userid">
<br>
User password:<br>
<input type="password" name="psw">
</form>
<p>The characters in a password field are masked (shown as
asterisks or circles).</p>
</body>
</html>

Prepared by: PoojaPancholi | Shree C. U. Shah, Wadhwan Page 26


BCA SEM 1 | Networking & Internet Environment

 Multi-line text input controls


 The text field can be used to get only a single-line field as an input.
 The text area is a multiline area in which the user can type the input.
 The text area can be created by using the <textarea> tag.
 The text area will have scroll bars for viewing the entire text typed.
 Attributes:
 Rows : Used to specify the number of rows.
 Cols : used to specify the number of columns.
 Name : used to attain the content typed in the text area to submit to
the server.
 Example:
<html>
<body>
<h2>Textarea</h2>
<p>The textarea element defines a multi-line input field.</p>
<form method="post">
<textarea name="message" rows="10" cols="30">The cat was
playing in the garden.</textarea>
<br>
<input type="submit">
</form>
</body>
</html>

2. Checkbox Controls
 Checkboxes are another form of user interface to get input.
 Checkboxes let a user select ZERO or MORE options of a limited
number of choices.
 When this appears in a form, the user can select any box by clicking
on the box.
 <input type="checkbox"> defines a checkbox.
 Attributes:
o Type
o Name
o Value
o checked
 Example:
<html>

Prepared by: PoojaPancholi | Shree C. U. Shah, Wadhwan Page 27


BCA SEM 1 | Networking & Internet Environment

<body>
<h2>Checkboxes</h2>
<p>The <strong>input type="checkbox"</strong> defines a
checkbox:</p>
<form>
<input type="checkbox" name="vehicle1" value="Bike">I have a
bike
<br>
<input type="checkbox" name="vehicle2" value="Car">I have a
car
<br><br>
<input type="submit">
</form>
</body>
</html>

3. Radio Box Controls


 Radio buttons are used when out of many options; just one option is
required to be selected.
 They are also created using HTML <input> tag but type attribute is
set to radio.
 Attributes:
o Type
o Name
o Value
o Checked
 Example:
<html>
<body>
<h2>Checkboxes</h2>
<p>The <strong>input type="radio"</strong> defines a Radio
Button:</p>
<form>
Gender:
<input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="female">Female
<br><br>
<input type="submit">

Prepared by: PoojaPancholi | Shree C. U. Shah, Wadhwan Page 28


BCA SEM 1 | Networking & Internet Environment

</form>
</body>
</html>

4. Select Box Controls


 A select box, also called drop down box which provides option to list
down various options in the form of drop down list, from where a
user can select one or more options.
 List of items can be displayed on the webpage between
<select>...</select>
 List of items are specified in <option> tag which is embed between
<select>...</select>
 Attributes of <select> tag:
o Name: Used to give a name to the control which is sent to the
server to be recognized and get the value.
o Size: This can be used to present a scrolling list box.
o Multiple: If set to "multiple" then allows a user to select
multiple items from the menu.
 Attributes of <option> tag:
o Value: The value that will be used if an option in the select box
is selected.
o Selected: Specifies that this option should be the initially
selected value when the page loads.
o Label: An alternative way of labelling options
 Example:
<html>
<head>
<title>Color selection</title>
</head>
<body>
<form method=“post”>
Select your favourite color:
<select name=“color”>
<option value=“red” >red
<option value=“green” selected>green
<option value=“blue” >blue
<option value=“pink” >pink
</select>

Prepared by: PoojaPancholi | Shree C. U. Shah, Wadhwan Page 29


BCA SEM 1 | Networking & Internet Environment

</form>
</body>
</html>

5. File Select Boxes


 If you want to allow a user to upload a file to your web site, you will
need to use a file upload box, also known as a file select box.
 This is also created using the <input> element but type attribute is
set to file.
 Attribute:
o Name: Used to give a name to the control which is sent to the
server to be recognized and get the value.
o Accept: Specifies the types of files that the server accepts.
 File_extension:Specify the file extension(s)
(e.g: .gif, .jpg, .png, .doc) the user can pick from
 Audio/*:The user can pick all sound files
 Video/*: The user can pick all video files
 Image/*: The user can pick all image files
 Example:
<html>
<body>
<h1>The input accept attribute</h1>
<form>
Select image:
<input type="file" name="fileupload" accept="image/*">
<input type="submit">
</form>
</body>
</html>

6. Hidden Controls
 Hidden form controls are used to hide data inside the page which
later on can be pushed to the server.
 This control hides inside the code and does not appear on the actual
page.
 For example, following hidden form is being used to keep current
page number.

Prepared by: PoojaPancholi | Shree C. U. Shah, Wadhwan Page 30


BCA SEM 1 | Networking & Internet Environment

 When a user will click next page then the value of hidden control will
be sent to the web server and there it will decide which page will be
displayed next based on the passed current page.
 Example:
<html>
<head>
<title>Hidden Field</title>
</head>
<body>
<form>
Post title:
<input type="text" name="title" value="My excellent blog post" />
Post content:
<textarea name="content" cols="60" rows="5">
This is the content of my excellent blog post. I hope you enjoy it!
</textarea>
<button type="submit">Update post</button>
<input type="hidden" name="postId" value="34657" />
</form>
</body>
</html>

7. Button Controls
 There are various ways in HTML to create clickable buttons.
 You can also create a clickable button using <input>tag by setting
its type attribute to button.
 The type attribute can take the following values –
o Submit:
 This creates a button that automatically submits a form
 A submit button is used to send form data to a server.
 The data is sent to the page specified in the form's action
attribute.
 The file defined in the action attribute usually does
something with the received input:.
 Example: <input type=”submit” value=”Submit”>
o Reset:

Prepared by: PoojaPancholi | Shree C. U. Shah, Wadhwan Page 31


BCA SEM 1 | Networking & Internet Environment

 This creates a button that automatically resets form


controls to their initial values.
 In most forms this means that it clears the contents of the
form, but if the form started out with preloaded contents,
that is what will display when the reset button.
 Example: <input type=”reset”>
o Button:
 This creates a button that is used to trigger a client-side
script when the user clicks that button.
 The button INPUT tag gives you a way to create simple
input buttons with custom text.
 It is similar to the INPUT submit tag but is slightly more
flexible.
 Example: <input type=”button” value=”This is Text
Button”>
o Image:
 This creates a clickable button but we can use an image
as background of the button.
 Example:
<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=”image” src=”[Link]” />
</form>
</body>
</html>

Topic: The Label Element


 The <label> tag defines a label for many form elements.

Prepared by: PoojaPancholi | Shree C. U. Shah, Wadhwan Page 32


BCA SEM 1 | Networking & Internet Environment

 The <label> element is useful for screen-reader users, because the


screen-reader will read out loud the label when the user focuses on the
input element.
 The <label> element also helps users who have difficulty clicking on
very small regions (such as radio buttons or checkboxes) - because
when the user clicks the text within the <label> element, it toggles the
radio button/checkbox.

Topic: Frame
 Frames are used to split the browser window in several individual
frames that can contain a separate HTML document.
 Frames generally include navigation link, header or footers, which help
user to find and navigate to required information.
 HTML document within frame may include links to other web pages
which can be opened in the same frame or other frames.
 Frame can be defined using <FRAMESET> tag.
 Each frameset contain two or more than two frames.
 <Frame> tag is used to define frame.
 <Frameset> tags are used to contain two or more than two <Frame>
tags.
 Frameset can split the browser window in both horizontal and vertical
directions.
 The total number of values in rows and columns attribute of
<Frameset> tag determine the number of frame included in a
frameset.
 Advantages of Frames:
o The main advantage of frames is that it allows the user to view
multiple documents within a single Web page.
o It is possible to load pages from different servers in a single
frameset.
o The older browsers that do not support frames can be addressed
using the tag.
 Disadvantages of Frames:
o Frames can make the production of website complicated.
o A user is unable to bookmark any of the Web pages viewed within
a frame.
o The browser’s back button might not work as the user hopes.

Prepared by: PoojaPancholi | Shree C. U. Shah, Wadhwan Page 33


BCA SEM 1 | Networking & Internet Environment

o The use of too many frames can put a high workload on the
server.
o Many old web browser doesn’t support frames.
 Types of Frames:
o Vertical Frameset: -Vertical Frameset can split the browser
window in vertical direction.
o Example:
<html>
<frameset cols="30%,40%,30%">
<frame src="[Link]">
<frame src="[Link]">
<frame src="[Link]">
</frameset>
</html>
o Horizontal Frameset : - Horizontal frameset can split the
browser window in horizontal direction.
o Example:
<html>
<frameset rows="30%,40%,30%">
<frame src="[Link]">
<frame src="[Link]">
<frame src="[Link]">
</frameset>
</html>
Topic: The Frameset Tag:
 The <frameset> tag in HTML is used to define the frameset.
 The <frameset> element contains one or more frame elements.
 It is used to specify the number of rows and columns in frameset with
their pixel of spaces.
 Each element can hold a separate document.
 Attributes of Frameset tag are:
 cols: The cols attribute is used to create vertical frames in web
browser.
o This attribute is basically used to define the no of columns and its
size inside the frameset tag.
o The size or width of the column is set in the frameset in the
following ways:

Prepared by: PoojaPancholi | Shree C. U. Shah, Wadhwan Page 34


BCA SEM 1 | Networking & Internet Environment

o Use absolute value in pixel


Example:<frameset cols = "300, 400, 300">
o Use percentage value
Example:<frameset cols = "30%, 40%, 30%">
o Use wild card values:
Example:<frameset cols = "30%, *, 30%">
o In the above example * will take the remaining percentage for
creating vertical frame.
 rows: The rows attribute is used to create horizontal frames in web
browser.
o This attribute is used to define no of rows and its size inside the
frameset tag.
o The size of rows or height of each row use the following ways:
o Use absolute value in pixel.
o Example:
<frameset rows = "300, 400, 300">
o Use percentage value
Example:<frameset rows = "30%, 40%, 30%">
o Use wild card values
Example:<frameset rows = "30%, *, 30%">In the above example
* will take the remaining percentage for creating horizontal frame.
 border: This attribute of frameset tag defines the width of border of
each frames in pixels.
o Zero value is used for no border.
Example:<frameset border="4" frameset>
 frameborder: This attribute of frameset tag is used to specify
whether the three-dimensional border should be displayed between
the frames or not for this use two values 0 and 1, where 0 defines for
no border and value 1 signifies for yes there will be border.
 framespacing: This attribute of frameset tag is used to specify the
amount of spacing between the frames in a frameset. This can take
any integer value as an parameter which basically denotes the value in
pixel.
Example:<framespacing="20"> It means there will be 20 pixel spacing
between the frames
Topic: Attribute of Frame Tag:

Prepared by: PoojaPancholi | Shree C. U. Shah, Wadhwan Page 35


BCA SEM 1 | Networking & Internet Environment

 name: This attribute is used to give names to the frame. It


differentiate one frame from another. It is also used to indicate which
frame a document should loaded into.
 Example: <frame name = "top" src =
"C:/Users/dharam/Desktop/[Link]" />
 src: This attribute in frame tag is basically used to define the source
file that should be loaded into the frame. The value of src can be any
url.
 Example:<frame name = "left" src = "/html/[Link]" />
 marginwidth: This attribute in frame tag is used to specify width of
the spaces in pixels between the border and contents of left and right
frame.
Example:<frame marginwidth="20">
 marginheight: This attribute in frame tag is used to specify height of
the spaces in pixels between the border and contents of top and
bottom frame.
Example:<frame marginheight="20">
 scrollbar: To control the appearance of scroll bar in frame use
scrollbar attribute in frame tag. This is basically used to control the
appearance of scrollbar. The value of this attribute can be yes, no,
auto. Where the value no denotes there will be no appearance of scroll
bar.
Example:<frame scrollbar="no">
 Noresize:The noresize attribute specifies that a <frame> element
cannot be resized by the [Link] default, each <frame> in a
<frameset> can be resized by dragging the border between the
frames. However, this attribute locks the size of a frame.
Example: <frame src=”[Link]” noresize>
Topic: Noframe Tag:
 HTML <noframes> tag is used to contain an alternative text to display
if the browser does not support the <frame> content.
 It will only work, if the browser does not support the frame else, it will
be ignored by the browser.
 The <noframes> tag should be used within <frameset> element.
 Example:
<HTML>
<HEAD>
<TITLE>A simple frameset document</TITLE>
</HEAD>
Prepared by: PoojaPancholi | Shree C. U. Shah, Wadhwan Page 36
BCA SEM 1 | Networking & Internet Environment

<FRAMESET cols="20%, 80%">


<FRAMESET rows="100, 200">
<FRAME src="p11_orderlist.html">
<FRAME src="[Link]">
</FRAMESET>
<FRAME src="p12_unorderlist.html">
<NOFRAMES>
<P>This frameset document contains:
<UL>
<LI><A href="p11_orderlist.html">Some neat contents</A>
<LI><IMG src="[Link]" alt="A neat image">
<LI><A href="p12_unorderlist.html">Some other neat contents</A>
</UL>
</NOFRAMES>
</FRAMESET>
</HTML>

Topic: Inline Frame:


 You can define an inline frame with HTML tag <iframe>.
 The <iframe> tag is not somehow related to <frameset> tag, instead,
it can appear anywhere in your document.
 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.
 Attributes:
o Src : It is used to specify the path of the web page or the source.
o Name: Specify the name of an <iframe>.
o Scrolling : It is used to specify whether or not scroll bars are to
be displayed or not. Its values are auto, yes and no. Its default
value is auto. Eg : scrolling=“yes”
o Marginwidth : It is used to specify in pixels the width of the left
and the right margins for a frame. Eg. Marginwidth = “10”
o Marginheight : It is used to specify in pixels the height of the
top and bottom margins for a frame. Eg. Marginheight = “10”

o Height: It is used to specify the height of the frame.

Prepared by: PoojaPancholi | Shree C. U. Shah, Wadhwan Page 37


BCA SEM 1 | Networking & Internet Environment

o Width: It is used to specify width of the iframe.


o Frameborder: This attribute of frameset tag is used to specify
whether the three-dimensional border should be displayed
between the frames or not for this use two values 0 and 1, where
0 defines for no border and value 1 signifies for yes there will be
border.
 Example:
<html>
<head>
<title>inline frame</title>
</head>
<body>
User details : <br>
<iframe src=“[Link]” scrolling=“yes” marginwidth=“10”
marginheight=“10”>
</body>
</html>

Topic: Nested Frame:


 You can achieve more complex layouts by using
nested <frameset> tags.
 Any frame within a frameset can contain another frameset.
 For example, shows a layout of two columns, the first with two rows
and the second with three rows. This is created by nesting
two <frameset>tags with row specifications within a top-
level <frameset> that specifies the columns:
 Example:
<html>
<head>
<title>Nested Frameset</title>
</head>
<frameset cols=”50%,*”>
<frameset>
<frame src=”[Link]”>
<frame src=”[Link]”>
</frameset>

Prepared by: PoojaPancholi | Shree C. U. Shah, Wadhwan Page 38


BCA SEM 1 | Networking & Internet Environment

<frameset rows=”33%,33%,*” >


<frame src=”[Link]”>
<frame src=”[Link]”>
<frame src=”[Link]”>
</frameset>
</frameset>

Topic: HTML5 Introduction


 HTML5 is the latest and most enhanced version of HTML.
 HTML5 is the next major revision of the HTML standard superseding
HTML 4.01, XHTML 1.0, and XHTML 1.1.
 HTML5 is a standard for structuring and presenting content on the
World Wide Web.
 HTML5 is cooperation between the World Wide Web Consortium (W3C)
and the Web Hypertext Application Technology Working Group
(WHATWG).
 The new standard incorporates features like video playback and drag-
and-drop that have been previously dependent on third-party browser
plug-ins such as Adobe Flash, Microsoft Silverlight, and Google Gears.
Topic: Features of HTML5
 HTML5 introduces a number of new elements and attributes that helps
in building a modern website.
 Following are great features introduced in HTML5.
 New Semantic Elements − These are like <header>, <footer>, and
<section>.
 Forms 2.0 − Improvements to HTML web forms where new attributes
have been introduced for <input> tag.
 Persistent Local Storage − To achieve without resorting to third-
party plugins.
 WebSocket − A a next-generation bidirectional communication
technology for web applications.
 Server-Sent Events − HTML5 introduces events which flow from web
server to the web browsers and they are called Server-Sent Events
(SSE).
 Canvas − This supports a two-dimensional drawing surface that you
can program with JavaScript.
 Audio & Video − You can embed audio or video on your web pages
without resorting to third-party plugins.

Prepared by: PoojaPancholi | Shree C. U. Shah, Wadhwan Page 39


BCA SEM 1 | Networking & Internet Environment

 Geolocation − Now visitors can choose to share their physical


location with your web application.
 Microdata − This lets you create your own vocabularies beyond
HTML5 and extend your web pages with custom semantics.
 Drag and drop − Drag and drop the items from one location to
another location on a the same webpage.

Topic: HTML5 Document Structure

The following tags have been introduced for better structure −


 section − This tag represents a generic document or application
section. It can be used together with h1-h6 to indicate the document
structure.
 article − This tag represents an independent piece of content of a
document, such as a blog entry or newspaper article.
 aside − This tag represents a piece of content that is only slightly
related to the rest of the page.
 header − This tag represents the header of a section.
 footer − This tag represents a footer for a section and can contain
information about the author, copyright information, etc.
 nav − This tag represents a section of the document intended for
navigation.
 dialog − This tag can be used to mark up a conversation.

Prepared by: PoojaPancholi | Shree C. U. Shah, Wadhwan Page 40


BCA SEM 1 | Networking & Internet Environment

 figure − This tag can be used to associate a caption together with some
embedded content, such as a graphic or video.

Topic: HTML5 Attributes


 Elements may contain attributes that are used to set various
properties of an element.
 Some attributes are defined globally and can be used on any element,
while others are defined for specific elements only.
 All attributes have a name and a value and look like as shown below in
the example.
 Attributes may only be specified within start tags and must never be
used in end tags.
 HTML5 attributes are case insensitive and may be written in all
uppercase or mixed case.
 Standard Attributes:
o The attributes listed below are supported by almost all the HTML
5 tags.

Attribute Options Function

Align right, left, center Horizontally aligns tags

Places an background image behind


Background URL
an element

numeric, Places a background color behind an


Bgcolor hexidecimal, RGB element
values

Classifies an element for use with


Class User Defined
Cascading Style Sheets.

contenteditabl Specifies if the user can edit the


true, false
e element's content or not.

Specifies the context menu for an


Contextmenu Menu id
element.

data-XXXX User Defined Custom attributes. Authors of a HTML

Prepared by: PoojaPancholi | Shree C. U. Shah, Wadhwan Page 41


BCA SEM 1 | Networking & Internet Environment

document can define their own


attributes. Must start with "data-".

Specifies whether or not a user is


Draggable true,false, auto
allowed to drag an element.

Specifies the height of tables,


Height Numeric Value
images, or table cells.

Specifies whether element should be


Hidden Hidden
visible or not.

Names an element for use with


Id User Defined
Cascading Style Sheet0s.

Item List of elements Used to group elements.

Itemprop List of items Used to group items.

Specifies if the element must have


Spellcheck true, false
it's spelling or grammar checked.

Specifies an inline style for an


Style CSS Style sheet
element.

Specifies the element's corresponding


Subject User define id
item.

Tabindex Tab number Specifies the tab order of an element.

Title User Defined "Pop-up" title for your elements.

top, middle, Vertically aligns tags within an HTML


Valign
bottom element.

Specifies the width of tables, images,


Width Numeric Value
or table cells.

 Custom Attributes:
o A new feature being introduced in HTML 5 is the addition of custom data
attributes.
Prepared by: PoojaPancholi | Shree C. U. Shah, Wadhwan Page 42
BCA SEM 1 | Networking & Internet Environment

o A custom data attribute starts with data- and would be named based on your
requirement.
o Following is the simple example –
<div class = "example" data-subject = "physics" data-level = "complex">
...
</div>

o The above will be perfectly valid HTML5 with two custom attributes called
data-subject and data-level. You would be able to get the values of these
attributes using JavaScript APIs or CSS in similar way as you get for standard
attributes.

Topic: Web Forms


 Web Forms 2.0 is an extension to the forms features found in HTML4.
 Form elements and attributes in HTML5 provide a greater degree of semantic
mark-up than HTML4 and free us from a great deal of tedious scripting and styling
that was required in HTML4.
 The <input> element in HTML4
o HTML4 input elements use the type attribute to specify the data type.
 The<input> elements in HTML5
o Apart from the above-mentioned attributes, HTML5 input elements
introduced several new values for the type attribute.
 The <input> element in HTML5 is listed below:

[Link] Type & Description


.
datetime
A date and time (year, month, day, hour, minute, second, fractions
1 of a second) encoded according to ISO 8601 with the time zone set
to UTC.

datetime-local
A date and time (year, month, day, hour, minute, second, fractions
2 of a second) encoded according to ISO 8601, with no time zone
information.

date
3 A date (year, month, day) encoded according to ISO 8601.

month
4 A date consisting of a year and a month encoded according to ISO
8601.

Prepared by: PoojaPancholi | Shree C. U. Shah, Wadhwan Page 43


BCA SEM 1 | Networking & Internet Environment

week
5 A date consisting of a year and a week number encoded according
to ISO 8601.

time
6 A time (hour, minute, seconds, fractional seconds) encoded
according to ISO 8601.

number
7 It accepts only numerical value. The step attribute specifies the
precision, defaulting to 1.

range
8 The range type is used for input fields that should contain a value
from a range of numbers.

email

It accepts only email value. This type is used for input fields that
9 should contain an e-mail address. If you try to submit a simple
text, it forces to enter only email address in email@[Link]
format.

url
It accepts only URL value. This type is used for input fields that
10 should contain a URL address. If you try to submit a simple text, it
forces to enter only URL address either in [Link]
format or in [Link] format.

 The <output> Element:


 HTML5 introduced a new element <output> which is used to represent the
result of different types of output, such as output written by a script.
 You can use for attribute to specify a relationship between the output element
and other elements in the document that affected the calculation (for example,
as inputs or parameters).
 The value of for attribute is a space-separated list of IDs of other elements.
 Example:
<output name=”result”></output>

 The Placeholder Attribute:


 HTML5 introduced a new attribute called placeholder.
 This attribute on <input> and <textarea> elements provide a hint to the user
of which value can enter in the field.
 The placeholder text must not contain carriage returns or line-feeds.

Prepared by: PoojaPancholi | Shree C. U. Shah, Wadhwan Page 44


BCA SEM 1 | Networking & Internet Environment

 Here is the simple syntax for placeholder attribute −


<input type = "text" name = "search" placeholder = "search the web"/>

 The Required Attribute:


 Now you do not need to have JavaScript for client-side validations like empty
text box would never be submitted because HTML5 introduced a new attribute
called required which would be used as follows and would insist to have a value.
<input type = "text" name = "search" required/>

Topic: HTML5 Canvas Graphics


 The element defines a region in the document, which can use to draw graphics on
the fly via scripting (usually JavaScript).
 For example, it can use to draw path and shapes, graphs or even perform
animations.
 The element is only a container for graphics.
 You must use a script to draw the graphics.
 Canvas has several methods for drawing paths, boxes, circles, text, and adding
images.
 A canvas is a rectangular area on an HTML page.
 By default, a canvas has no border and no content.
 The markup looks like this:
<canvas id=”mycanvas” width=”200” height=”100”></canvas>
 Basic Canvas Example Drawing with JavaScript
o <canvas id=”mycanvas” width=”200” height=”100” style=”border:1px solid
#000000;”></canvas>
 Drawing rectangle with javascript
o var c = [Link]("myCanvas");
o var ctx = [Link]("2d");
o [Link] = "#FF0000";
o [Link](0,0,150,75);
 Draw a Line
o var c = [Link]("myCanvas");
o var ctx = [Link]("2d");
o [Link]();
o [Link](0,0);
o [Link](200,100);
o [Link]();
 Draw a Circle
o var c = [Link]("myCanvas");
o var ctx = [Link]("2d");
o [Link]();
o [Link](95,50,40,0,2*[Link]);
o [Link]();

Prepared by: PoojaPancholi | Shree C. U. Shah, Wadhwan Page 45


BCA SEM 1 | Networking & Internet Environment

 Draw a Text
o var c = [Link]("myCanvas");
o var ctx = [Link]("2d");
o [Link] = "30px Arial";
o [Link]("Hello World",10,50);

Prepared by: PoojaPancholi | Shree C. U. Shah, Wadhwan Page 46

You might also like