Scribd
Upload
88 views51 pages

HTML Basics for Engineering Students

The document provides an introduction to HTML5, describing what HTML is, the main HTML tags and their purposes. It discusses the basic structure of an HTML page, including the <head> and <body> sections. It describes common HTML tags for text formatting like <b>, <i>, <u> and different types of HTML elements like container elements and void elements.

Uploaded by

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

HTML Basics for Engineering Students

The document provides an introduction to HTML5, describing what HTML is, the main HTML tags and their purposes. It discusses the basic structure of an HTML page, including the <head> and <body> sections. It describes common HTML tags for text formatting like <b>, <i>, <u> and different types of HTML elements like container elements and void elements.

Uploaded by

Macos
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 51

CS8651- INTERNET PROGRAMMING UNIT- 2:HTML

1.9. Introduction to HTML5


What is HTML?
 HyperText Markup Language (HTML) is the main markup language for creating web
pages and other information that can be displayed in a web browser. HTML is a text
file containing small mark-up tags and commandsthat tell Web browsers how to
display the page.
o HTML stands for Hyper Text Markup Language
o HTML is not a programming language, it is a markup language
o A markup language is a set of markup tags
o HTML uses markup tags to describe web pages
 The purpose of a web browser (like Internet Explorer) is to read HTMLdocuments and
display them as web pages. The browser does not display theHTML tags, but uses the
tags to interpret the content of the page:
o The text between <html> and </html> describes the web page
o The text between <body> and </body> is the visible page content
o The text between <head> and </head> is not displayed in the browser
o The text between <h1> and </h1> is displayed as a heading
o The text between <p> and </p> is displayed as a paragraph

1.9.1. HTML TAGS / HTML ELEMENTS


 HTML markup tags are usually called HTML tags.
 HTML tags are keywords surrounded by angle brackets like <html>
 HTML tags normally come in pairs like <b> and </b>
 The first tag in a pair is the start tag, the second tag is the end tag
 Examples of tags: <b> <i> <u>
1.11.2..Types of HTML elements/Tags:

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 1 -


CS8651- INTERNET PROGRAMMING UNIT- 2:HTML

HTML Elements broadly categorized in to two. They are :


i) Container Element / Container Tag
ii) Void element / Empty tag

Syntax for container Element:


<tag-name [attribute-name=attribute-value…]> some content </tag-name>
 An HTML element starts with a start tag / opening tag
 An HTML element ends with an end tag / closing tag
 The content of the element is everything between the start and the end tag
 Most HTML elements can have attributes.
 A container tag affects enclosing text in some way.
 Container Element further divided into two they are
i) Block level container tag
 This element enclose its content as tags as well as text
 Example::<head>,<body> tags
<body bgcolor=green>
<font face=verdana color=red>hello</font>
</body>
ii) Text level container tag
 This element enclose its content as only text
 Example: <i>,<u>,,<font>,<p> tags
<u> underline</u>
<font size=6>Hello</font>

Syntax for void Element / Empty Element


<tag-name [attribute-name=attribute-value…] />
 Some HTML elements have empty content, which have no end tag, and starttag ends
with /
 Example:
<hr color=red width=80% /> <br/>
 Empty tags do not affect text adjacent to the tags.

Attributes

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 2 -


CS8651- INTERNET PROGRAMMING UNIT- 2:HTML

 HTML elements can have attributes


 Attributes provide additional information about an element
 Attributes are always specified in the start tag
 Attributes come in name/value pairs like: attribute-name="attribute-value"
 Attributes are used to describe the properties of a tag. Attributes are always specified
as part of a start tag and always consist of the attribute name followed by an equal sign,
followed by the attribute value.
 Example: <body bgcolor=”purple”>. Here bgcolor is an attribute of body tag,which
will determine the background color of the document

1.11.3. BASIC STRUCTURE / LAYOUT OF HTML PAGE


 All WebPages have an <html> tag at the beginning and </html> at the end, telling the
browser where the document starts and where it stops
 An HTML 5 document is composed of three parts:
i) A line containing HTML version information:<!DOCTYPE>
ii) A header section (delimited by the HEAD element),
iii) A body section, which contains the document's actual content.

 The following figure shows structure of html page:


Version info
Head section
Body section

 <DOCTYPE…> contains encoding information, document type and its version


information
 The head section is used for text and tags that do not show directly on thepage.
It includes the <title> , <meta> tags , CSS and scripting information.
 The body section is used for text and tags that are shown directly on thepage
of the browser.
 A basic structure of simple webpage is given below:

<!DOCTYPE...html [version, encode information.].>


<html>
<head>
<title> title of the HTML Page </title>
<meta name="…" content="…" />
<meta name="…" content="…" />
…

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 3 -


CS8651- INTERNET PROGRAMMING UNIT- 2:HTML

<style type="text/css”>
…<!- css code placed here ->
</style>
<script language="javascript”>
//javascript code placed here
</script>
</head>
<body>
<!- content that to be displayed in the browser placed here ->
</body>
</html>

<!DOCTYPE> and Version Info


 Since there are a number of different versions of HTML, it's a good idea to declare what
version of HTML you're using right away. The very first item in your document
should be a declaration of version information if version attribute is ignored in
<DOCTYPE version=5 assumed.
<!DOCTYPE HTML>

<Head> Section
 Head section enclosed between <head> and </head> tag.
 The head section of the webpage includes all the stuff that does not displayeddirectly
on the client area of browse.
<title> Element
 This is called a nested element, because it’s enclosed in the head element’s start and
end tags.
 The <title> and </title> tags encapsulate the title of your web page. Its contentis
displayed in the title bar of the browser.
<meta> Element
 Another component in the head section is Meta tags. Meta tags are used to give
information about author of the page, software used to create current page. An example
given below:
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">

 It also includes keywords for search engine to list your web page during
searches.This helps to improve the rankings in search engines.
 An example given below:
<meta name="keywords" content="HTML, XHTML, CSS, tutorials " />

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 4 -


CS8651- INTERNET PROGRAMMING UNIT- 2:HTML

 It is also used to provides an instruction to browser about how often the page should
refreshed automatically, what character set should be used to interpret current
document, redirection information, etc
<meta http-equiv="refresh" content="10;url=http://www.tizag.com"/>
<meta charset="UTF-8">
<script> tags
 Quite often the head section contains Scripts like Javascript or VBScript which are
programming languages for more complex HTML pages. Javascriptand VBScript are
used either to validate HTML form input controls, or to generate animation and change
content of the HTML page dynamically
<style> tag

 Finally, more and more pages contain codes for cascading style sheets (CSS).
CSS is a rather new technique for optimizing the layout of major websites. CSS are
used to format content of the HTML in programmer friendly mannere

<Body> Section
 The body of the document contains all that can be seen when the user loads the page. It
may consist of text, images, tables, forms, list items, special characters etc related tags.
 It may also contain user interface controls such as textbox, list box, drop downlist, text
area, password field, video, audio controls, etc
 Body section always will begin with <body> and end with </body> tags.
<body> tag has the following attributes:
o bgcolor – define background color of the document
o text – define foreground color of the entire document
o background – bring the background image instead of background color
o alink – define active link color
o vlink – define visited link color
o link – define not yet visited link color or new link color
o leftmargin, topmargin, rightmargin, bottommargin – define
corresponding margin of the page. The values should given in pixel
o bgproperties=fixed/scroll. It determines whether background image should
be placed multiple time or not. If fixed is given as value, whenthe content of
the web document grow more than one page the background image will not be
pasted multiple time
Example::
<body bgcolor="black" text="red"
link="yellow" alink="orange"

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 5 -


CS8651- INTERNET PROGRAMMING UNIT- 2:HTML

vlink="white" background="image.gif">

Comment Element / <!-- --> Element


 A comment is a way for you as the web page developer to control what linesof code
are to be ignored by the web browser and not displayed by browsers.
 HTML5 comments start with <!-- and end with -->. To add comments in theHTML
documents the following tag is used:
<!-- your comment here -->
(or)
<!--
your comment here
…
-->
Example:

<p>This is a paragraph.</p>
<!--This is a comment and it is not displayed in the browser-->
<p>This is another paragraph</p>
Output:
This is a paragraph.
This is another paragraph
1.11.4. TEXT FORMATTING S TAGS

Tag Name with Attribute Description Output


HTML Text Formatting Tags
<b> bold text </b> This will makes the enclosed bold text
text bold
<big>big text </big> This will makes the text larger
than normal text
<em>emphasized</em> emphasised text Emphasized
<font> … </font> It is used to change either courier
Attributes: color,size or face of the
color = colour enclosed text
face = typeface e.g.:<font face="Courier"
size = 1 to 7 size=4> courier </font>
<i> italic </i> Make enclosed text Italic Italic
<small>small</small> Relatively smaller font

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 6 -


CS8651- INTERNET PROGRAMMING UNIT- I: WEBSITE BASICS

<strike> strike </strike> Strikethrough Strike

<strong>strong</strong> strong (usu. bold) Strong


<sub> … </sub> Subscript. H2 O
E.g.: H<sub>2</sub>O
<sup> … </sup> Superscript. 12th STD
E.g.: 12<sup>th </sup> STD
<tt>typewriter text</tt> typewriter text (e.g. Courier)
<u> underline </u> Underline Underline

<blink>…</blink> Makes the enclosing text to blink. Only Netscape


browser supports this tag
<marquee></marquee> This tag is used to scroll the text in different
attributes: direction. Based on behavior. E.g.:
scrollamount=integer <marquee direction=up behavior=slide>
scrolldelay=number hello
direction= up|down|left|right </marquee>
behavior= This will make the text to scroll from bottom to topone
scroll|slide|alternate height= time. And stop scrolling
height in pixel width= width
in pixel
bgcolor= background clr

HTML Citations, Quotations, and Definition Tags


Tag Meaning
<abbr> Defines an abbreviation or acronym
Example:
The <abbr title="World Health Organization">WHO</abbr>
was founded in 1948.
Output:

<address> Defines contact information for the author/owner of a document


Example: Output:
<address>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 7 -


CS8651- INTERNET PROGRAMMING UNIT- I: WEBSITE BASICS

<bdo> Defines the text direction


Example: output:
<bdo dir="rtl">
This text will go right-to-left.
</bdo>

<blockquote> Defines contact information for the author/owner of a document


Example:
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The
world’s leading conservation organization, WWF works in 100
countries
</blockquote>
Output:

<q> Defines an inline quotation


Example:
<p>WWF's goal is to:
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>
Output:
WWF's goal is to: “Build a future where people live in harmony
with nature.” We hope they succeed.
<cite> Defines the title of a work
Example:
<p><cite>The Scream</cite> by Edward Munch. Painted in
1893.</p>
Output:
The Scream by Edward Munch. Painted in 1893.
<dfn> Defines a definition term
Example: <dfn>Definition term</dfn>
Output: Definition term

1.11.5. Heading
 Some text in web document may be more important than other text. HTML5 provides
six heading elements (h1 through h6) for specifying the relative importance of
information.

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 8 -


CS8651- INTERNET PROGRAMMING UNIT- I: WEBSITE BASICS

 Heading element h1 is considered the most significant one and is typically


rendered in a larger font than the other five.
 Each successive heading element (h2, h3, etc.) is typically rendered in a
progressively smaller font.
 Example: output:
<h1>heading level - 1 </h1>
<h2>heading level - 2 </h2>
<h3>heading level - 3 </h3>
<h4>heading level - 4 </h4>
<h5>heading level - 5 </h5>
<h6>heading level - 6 </h6>

1.11.6. Images:<img> element


 Other than text, web pages may also contain images, animations, graphics, audios and
even videos. The most popular image formats used by web developers today are PNG
(Portable Network Graphics), GIF (Graphics Interchange Forma)t and JPEG (Joint
Photographic Experts Group).
 <img> is an void Element is used to embed image in your web pages alongwith
text / paragraph. It contains more attributes. Other than SRC, all attributes are
optional. The lists of attributes are

Attribute Description
Src URL address of an image file,
Width It determines the width of the image in pixel
height It determines the height of the image in pixel
Align It determine alignment of the text along with image. The
possible values are top, bottom, middle, absmiddle,
absbottom, abstop, left, right
Alt This information useful for the user those who viewing your web
page with CUI based browser such as LYNX. Since CUI browser
does not have capability to show image, in that place the text
assigned to alt will be displayed. In the GUI browse, this will be
shown as tool tip, when user moves mouse over the image

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 9 -


CS8651- INTERNET PROGRAMMING UNIT- I: WEBSITE BASICS

Border It define thickness of the border of the image. Based on whole


number assigned to this attribute, the border of theimage will
be displayed with more or less thickness.

Example:
<!DOCTYPE html>
<body>
<p>
<img src = "fish.jpg" width = "160" height = "140"
border=10 alt = "fishes in the river" />
<img src = "flow11.jpg" height = "150" border=5
alt = "marigold flower" />
</p>
</body>
</html>
Output:

1.11.7. LISTS ELEMENTS / LIST TAGS


 Information provided in the form of list is more human readable than information
provided in the form of paragraph. HTML supports three types of lists. They are:
 ordered lists
 unordered lists
 definition lists

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 10 -


CS8651- INTERNET PROGRAMMING UNIT- I: WEBSITE BASICS

1.11.7.1. Unordered Lists


 It consist of items displayed with a bullet next to each one. Within the list, individual
items are represented with the <li> tag.
 The attribute of the <ul> is type. It allows you to change the type of bullet shown
next to each item in the list.

The possible values for type attribute is disc (),circle (o),square (■)
Example: output in the browser:
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

1.11.7.2. Ordered Lists


 Ordered list are used to display numbers in front of each items, instead of bullets. It
has two attributes
o The start attribute allows you to specify the starting number for a list.
o The type attribute within the ordered lists allow you specify the type of
numbering system. possible value for type=”1/A/a/I,I”
o Type value and its possible series are listed below:
1 = 1,2,3,4,….
A = A,B,C,D,…
a = a,b,c,d,…
I = I,II,III,IV,…
i = i,ii,iii,iv,…
 Example: <ol type=”A” start=”5”> generating ordered list starting alphabet E.
<ol type=A start=5> output in the browser:
<li>Coffee</li> E. Coffee
<li>Milk</li> F. Milk
</ol>

1.11.7.3. Definition Lists


 It consists of list of terms and their associated definitions. They are enclosed
between <dl> tags and </dl>

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 11 -


CS8651- INTERNET PROGRAMMING UNIT- I: WEBSITE BASICS

 Each term in the list is identified by the <dt> tag. Description of each term is identified
by <dd> tag must follow the <dt> tag to provide the definition of the preceding term.
o <dl> - definition list
o <dt>- definition term
o <dd>- definition description
Syntax: Output:
<dl>
<dt>…</dt>
<dd>…</dd>
<dt>…</dt>
<dd>…</dd>
…
</dl>
Example:
<dl>
<dt>Java</dt>
<dd>A programming language</dd>
<dt>HTTP</dt>
<dd>Hyper Text Transfer Protocol</dd>
</dl>

1.11.7.4. <dir> Element


 This tag will work in the same way as <ul> except. It will move the content one tab
towards right side. List items are represented using <li>

1.11.7.5. Nested Lists


 Lists may be nested to represent hierarchical relationships, as in a multilevel outline.
Any combination of <OL> and <UL> can be nested at any level of depth
 An example of nested list is given below:
<!DOCTYPE html>
<body>
<h2> Hotel Hiland - Menu</h2>
<ul>
<li>break fast / dinner
<ol type="a">
<li>Idli
<ul>
<li>Rava Idli
<li>mini idli

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 12 -


CS8651- INTERNET PROGRAMMING UNIT- I: WEBSITE BASICS

</ul> Output:
<li>Dosai
<ul>
<li>Rava Dosai
<li>ghee Dosai
</ul>
<li>chapatti
</ol>
<li>lunch
<ol type="i">
<li>Meals
<ul>
<li>Ordinary
<li>Spl. Meals
</ul>
<li>Mini Meals
<ul>
<li>lemon rice
<li>sambar rice
</ul>
</ol>
</ul>
</body>
</html>

1.11.8. Tables

 Tables are frequently used to organize data into rows and columns. Toconstruct
table the following HTML elements are used:
 <table> - is the outer most tag that encapsulates all other following tag. Its
attributes includes:
o border=integer - define the border of the table
o bgcolor=#rrggbb – define background color of the table
o background=url – define background picture of the table
o align = left|right|center- define alignment of table within the page
o cellpadding =integer – define space allowed within the cell in pixel
o cellspacing =integer – define gap or space between cells in pixels

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 13 -


CS8651- INTERNET PROGRAMMING UNIT- I: WEBSITE BASICS

o width =integer – define width of the table in terms o f percentage of browser


window
 <caption align="top|bottom">…</caption> - It is used to define table title. This
element must be positioned inside <table>, but not inside of <thead>,<thead>, and
<tbody>
 Table consists of following three sections:
o <thead> - define table header. It encapsulates row in which each column defined
using <th>. It is an option section
o <tbody> - define table body where actual data to be displayed. It encapsulates
multiple rows in which each column defined using either <td> or <th>.
o <tbody> - define table body where table’s primary data to be displayed. It
encapsulates multiple rows in which each column defined using <td>
o <tfoot> - define table footer . It encapsulates rows in which each column defined
using either <th>. The text placed in the footer commonly includes calculation
results and footnotes. It is an optional section
 <tr> - define table row.All three sections <thead>, <tbody>, and <tfoot> consists of
one or more row. It consists of following attributes, which are also applicable to
<td> and <th>:
o bgcolor=#rrggbb – define background color of the table
o background=url – define background picture of the table
o align = left|right|center- define horizontal alignment of text within cell
o valign = top|middle|bottom - define vertical alignment of text within cell
 <td> - define table data (or) cell (column) within each row.
 <th> - define table heading (or) cell (column) within each row. Text placed in this cell
displayed in center of the cell with bold. Both <td> and <th> consist of following
attributes:
o rowspan=integer – used to merge two or more cell horizontally
o colspan=integer – used to merge two or more cell horizontally

 Example 1
<!DOCTYPE html>
<html>
<body>
<table border = "5" bgcolor=pink>
<caption><strong>Table of Fruits (1st column) and
Their Prices (2nd column)</strong> </caption>
<thead>
<tr>
<th>Fruit</th>
<th>Price</th>
</tr>
</thead>

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 14 -


CS8651- INTERNET PROGRAMMING UNIT- I: WEBSITE BASICS

<tfoot>
<tr>
<th>Total</th> <th>$3.75</th>
</tr>
</tfoot>

<tbody>
<tr>
<td>Apple</td>
<td>$0.25</td>
</tr>
<tr>
<td>Orange</td>
<td>$0.50</td>
</tr>
<tr>
<td>Banana</td>
<td>$1.00</td>
</tr>
<tr>
<td>Pineapple</td>
<td>$2.00</td>
</tr>
</tbody> </table> </body> </html>

Output:

Example 2: Using rowspan and colspan with Tables

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 15 -


CS8651- INTERNET PROGRAMMING UNIT- I: WEBSITE BASICS

<!DOCTYPE html>
<html>
<body>
<table border = "10">
<tbody>
<tr>
<th colspan=3>Price List of seeds(per Kg)</th>
</tr>
<tr>
<th rowspan=2>Paddy</th>
<td>Ponni</td>
<td>Rs. 150</td>
</tr>
<tr>
<td>Sorna</td>
<td>Rs. 90</td>
</tr>
<tr>
<th rowspan=3>Millet</th>
<td>Co-1</td> Outpiut:
<td>Rs. 80</td>
</tr>
<tr>
<td>Co-2</td>
<td>Rs. 110</td>
</tr>
<tr>
<td>ADT-95</td>
<td>Rs. 90</td>
</tr>
</tbody>
</table>
</body>
</html>

1.11.9. ANCHOR Element \ HTML HYPERLINKS (LINKING)


 One of the most important HTML5 features is the hyperlink, which links other
resources, such as web documents and images Anchor tag (<A>) is used to establish
link between multiple web pages.
 When a user clicks a hyperlink, the browser tries to execute an action associated with
it Some of action includes:

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 16 -


CS8651- INTERNET PROGRAMMING UNIT- I: WEBSITE BASICS

o navigate to a URL
o open an e-mail client
o download executable file to client machine
 in web page, Any displayed element can act as a hyperlink.such as text,
image, etc
 Web browsers typically underline text hyperlinks and color their text blue by
default
 We use =Anchor Element (<A>) to define hyperlink with href attributes
 Linking can be of two types:
o Internal linking: linking different part of the same web document
o External linking: linking external resources

1.11.9.1. INTERNAL LINKING \ INTERNAL DOCUMENT REFERENCE


 internal linking—a mechanism that enables the user to jump betweenlocations in
the same document.
 Internal linking is useful for long documents that contain many sections.
 Clicking an internal link enables the user to find a section without scrolling
through the entire document
 To define internal hyperlink destination, we have to use following syntax:
<a name=”somename”> destination content here </a>
 It is similar to book mark in the book

 To define internal hyperlink, we have to use following syntax:


<a href=”somename”> hypertext </a>

 Example::INTERNAL.HTML
<!DOCTYPE html>
<html>
<body>
<a name="top"> <hr color="red" /> </a>
<h2 align="center">
<a href="#favorite">Click here to see my favorite</a>
</h2>
<hr color="red" />
<pre>
1
2
3
4
5
6
7

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 17 -


CS8651- INTERNET PROGRAMMING UNIT- I: WEBSITE BASICS

8
9
10
11
12
13
14
15
16
17 output, after clicking link
18
19
20
21
22
23
24
25
26
</pre>
<hr color="red" />

<a name="favorite">My Favorites</a>


<hr color="red" />
<ul>
<li> listening music
<li> swimming in the sea
<li> Reading News paper
<li> Watching TV
</ul>
<hr color="red" />
<a href="#top">back to top</a>
<hr color="red" />
</body>
</html>

1.11.9.2. EXTERNAL LINKING / EXTERNAL DOCUMENT REFERENCE


 External linking— is a mechanism that enables the user create a hyperlink in
the current web document to any external resources such as another web
documents, image, link to client email software etc
 Example:
<!DOCTYPE html>
<html>
<body>
PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 18 -
CS8651- INTERNET PROGRAMMING UNIT- I: WEBSITE BASICS

<h1>Click link to take action</h1>


<ul>
<li><a href = "http://www.google.co.in">google search engine</a></li>
<li><a href = "INTERNAL.HTML#favorite">My favcorites</a></li>
<li><a href = "http://www.dinamalar.com/download/latha.ttf">
Download Tamil font</a></li>
<li><a href = "mailto:[email protected]?subject=Test">
send e-mail</a></li>
</ul>
</body>
</html>

 In the above code, first link consist of absolute address, where as second link
consist of relative address, which also contain internal link to particular part of
corresponding document.
 output fo the above code

1.11.9.3. Using Images as Hyperlinks


 An an image hyperlink can be created by by nesting an <img> element within an
<A>-anchor element shown below:
<a href = "contact.html">
<img src = "images/contact.jpg" alt = "Contact Me" />
</a>

 The img element’s src attribute value specifies that this image (contact.jpg) resides
in a directory named images. The image directory and the the current HTML
document are in the same directory

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 19 -


CS8651- INTERNET PROGRAMMING UNIT- I: WEBSITE BASICS

1.11.10. HTML Forms and Its Control Elements


• HTML5 provides a mechanism, called a form, for collecting data from a user for
submitting to server side program for processing

1.11.10.1. <form> Element


• <form> element has following attributes:
 method="get|post"
 Action="URL-Address-of-server-Script"
• Example:
<form method = "post" action = "http://www.xyz.com">

 Within the <form> element, you can include the following html elements to
define various UI controls including the following:
• <input> - it is used to define text field, password filed, check box, radio
button, push button, hidden field, submit and reset buttons
• <textarea> - it is used to define multiline text box
• <select> & <option> - it is used to define dropdown list
• <fieldset> and <legand> - it is used is used to group form controls into
logical, related “chunks.” with title caption

Difference between post and get:


 Using method = "post" appends form data to the browser request, which contains the
protocol (HTTP) and the requested resource’s URL. This method of passing data to the
server is transparent, not visible to user
 Using method = "get", appends the form data directly to the end of the URL of the
script, where it’s visible in the browser’s Address field

1.11.10.2. <input> Element


 <input /> element has attribute type, which is responsible for creating UI
controls such as textbox, password field, check box, radio button, button, reset and
submit button. Type has the following possible values:
o text creates an input text box that consists of a single line. Width of thebox is
controlled by the size attribute, default size is 20 characters wide.
o password Exactly like text, except the characters input by the visitor will
reflect back as asterisks.
o checkbox Creates a box that can be checked. You can have multiple
checkboxes in a selection, and all of them may be checked if applicable.
o radio This creates a radio button. You can have as many as you want in a give
subject area, but only one may be selected.

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 20 -


CS8651- INTERNET PROGRAMMING UNIT- I: WEBSITE BASICS

o submit This control creates the familiar "submit" button, which appearsas a
raised button with a push-button look. The word on the control canbe customized
using the value attribute.
o reset The same in appearance and customization features as submit, this control
will clear the form so the sire visitor can re-enter his or her answers.
o file This creates a file selection control. The site visitor can then selecta file to
upload.
o hidden Hidden controls are those that don't render in the browser. They are
used to insert information for the recipient of the form data.
o image Allows for the insertion of a custom image. This gives the designer the
ability to use a graphic for submit and reset instead of the default option.
o button Creates a push button. These must be associated with a scriptin order
to work, since there is no built-in action for them

Example:
<form method="get" action = "http://www.xyz.com/validate.php">
User Name:
<input type = "text" autofocus name="username"/>
<p>
Password :
<input type = "password" name="passwd"/>
</p> <p>
<input type = "submit" value = "Login" />
<input type = "reset" value = "Clear" />
</form>
Output:

Example of creating radio button:


<fieldset>

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 21 -


CS8651- INTERNET PROGRAMMING UNIT- I: WEBSITE BASICS

<legend>select our gender:</legend>


<input type = "radio" name="gender" value ="M"/> Male
<input type = "radio" name="gender" value="F" checked/> Female
</fieldset>

Output:

Example of creating radio button:


<fieldset>
<legend>you are interested in:</legend>
<input type = "checkbox" name="interest" value="Music"/> Listening music
<input type = "checkbox" name="interest" value="TV"/> Watching TV
<input type="checkbox" name="interest" value="newspaper"/>Reading
Newspaper
</fieldset>
Output:

Example of Creating BUTTON and its output:


<input type="button" value="Hello world!">

1.11.10.3. <select> and <option> Element


Example of Creating combo box:
District:
<select name="district">
<option value="Chennai">Chennai</option>
<option value="CGL">Chengalpet</option>
<option value="VPM" selected>villupuram</option>
</select>
Output:

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 22 -


CS8651- INTERNET PROGRAMMING UNIT- I: WEBSITE BASICS

Example of Creating LIST:


Hobbies:<br/>
<select name="hobby" size=3 multiple>
<option value="surfing" selected>surfing net</option>
<option value="travelling">travelling</option>
<option value="temple" selected>visiting temple</option>
<option value="cooking">cooking food</option>
</select>
OUTPUT:

1.11.10.4. <textarea> Element : creating multiline textbox


Example:
your suggestion:<br/>
<textarea name="suggestion" rows=10 cols=25>
</textarea>
Output:

1.11.10.5. New HTML 5 Form Input controls


 HTML5 includes new input controls with types for colors, dates, times, e- mail
addresses, numbers, ranges of integer values, telephone numbers, URLs,
search queries, months and week. The type attribute takes following values:
color | datetime | datetime-local | time | month | week | url | search | range |
number | tel
 browsers that don’t support these input types simply render them as standard
text input elements
 The new HTML 5 input types are self validating on the client side, eliminating
the need to add complicated JavaScript code
 HTML 5 introduces the following attributes for input controls:

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 23 -


CS8651- INTERNET PROGRAMMING UNIT- I: WEBSITE BASICS

i) Autofocus – it is used to put input cursor in the corresponding control


when web page is loaded
ii) Autocomplete – allows you to remember previously typed words in the
corresponding controls
Type Description
color The color type is used for input fields that should contain a color.
Date The date type allows the user to select a date
datetime The datetime type allows the user to select a date and time (with
time zone).
datetime- The datetime-local type allows the user to select a date and time (no
time zone).
local
email The email type is used for input fields that should contain an e-mail
address. the value of this field is automatically validated(@ , .com)
month The month type allows the user to select a month and year.
number The number type is used for input fields that should contain a numeric
value. You can also set restrictions on what numbers are accepted.
Use the following attributes to specify restrictions:
 max - specifies the maximum value allowed
 min - specifies the minimum value allowed
 step - specifies the legal number intervals
 value - Specifies the default value
range The range type is used for input fields that should contain a value
from a range of numbers. You can also set restrictions on what
numbers are accepted.
Use the following attributes to specify restrictions:
 max - specifies the maximum value allowed
 min - specifies the minimum value allowed
 step - specifies the legal number intervals
 value - Specifies the default value
search The search type is used for search fields (a search field behaves like
a regular text field).
tel Define a field for entering a telephone number
time The time type allows the user to select a time with no time zone

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 24 -


CS8651- INTERNET PROGRAMMING UNIT- I: WEBSITE BASICS

url The url type is used for input fields that should contain a URL
address. The value of the url field is automatically validated when
the form is submitted
week The week type allows the user to select a week and year

 Following example demonstrate various features of new HTML 5 controls:

Example:
<!DOCTYPE html>
<body>
<h2>New HTML5 Form Controls Demo</h2>
<form method = "post" action = "http://www.xyz.com">
<p>Text Color:
<input type = "color" autofocus/> Hexadecimal code such as #ADD8E6)
</p>
<p>Date of Joining:
<input type = "date" required"/>(yyyy-mm-dd)
</p>
<p>Time of present at office:
<input type = "datetime-local" /> (yyyy-mm-ddThh:mm)
</p>
<p>Email:
<input type = "email" placeholder = "[email protected]" required />
</p>
<p>Year and Month you got promotion:
<input type = "month" />(yyyy-mm)
</p>
<p>Font Size:
<input type = "number" min = "1"
max = "7" step = "1" value = "4""/>
(Enter a number between 1 and 7)
</p>
<p>Your Age:
<input type = "range" min = "17"
max = "55" value = "17"/>(valid between 17 and 55)
</p>
<p>Residence Telephone Number:
<input type = "tel" placeholder = "(###) ###-####"pattern
= "\(\d{3}\) +\d{3}-\d{4}" required />
</p>
<p>Time at which left office:
<input type = "time" placeholder = "hh:mm"/>

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 25 -


CS8651- INTERNET PROGRAMMING UNIT- I: WEBSITE BASICS

</p>
<p>URL address:
<input type = "url" placeholder = "http://www.domainname.com" />
</p>
<p>Week:
<input type = "week" />(yyyy-Wnn, such as 2012-W01)
</p>
<p>
<input type = "submit" value = "Submit" />
<input type = "reset" value = "Clear" />
</p> </form> </body></html>
Output generated in google Chrome:

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 26 -


CS8651- INTERNET PROGRAMMING UNIT- I: WEBSITE BASICS

When user clicks color control, output obtained in internet explorer 8:

Various error message displayed in google chrome, while user entered


invalid inputs and submitted form:

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 27 -


CS8651- INTERNET PROGRAMMING UNIT- I: WEBSITE BASICS

placeholder Attribute
 The placeholder attribute allows you to place temporary text in a text field.
 Generally, placeholder text is light gray and provides an example of the text
and/or text format the user should enter
 When the focus is placed in the text field, the placeholder text disappears—it’s
not “submitted” when the user clicks the Submit button
required Attribute
 The required attribute forces the user to enter a value before submitting the

form. You can add required to any of the input types. For example, if the user
fails to enter value in the required filed and clicks the Submit button,, then
system will transfer focus to corresponding filed with error message and
asking the user to enter the information

1.11.11. Semantic elements / Page-Structure Elements

 Semantic elements are introduced to standardize web documents structure


and make not only readable to human, but also readable by machine, so that
visually impaired user can understand what the browser is displaying
 Page-structure elements that meaningfully identify areas of the page as headers,
footers, articles, navigation areas, asides, figures and more
PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 28 -
CS8651- INTERNET PROGRAMMING UNIT- I: WEBSITE BASICS

 A semantic element clearly describes its meaning to both the browser and the
developer.
 Examples of non-semantic elements: <div> and <span> - Tells nothing about
its content.
 Examples of semantic elements: <form>, <table>, and <img> - Clearly
defines its content.

 HTML5 offers new semantic elements to clearly define different parts of a web
page:
 <header>
 <nav>
 <section>
 <article>
 <aside>
 <figcaption>
 <figure>
 <footer>

(i) <section> Element


 The <section> element defines a section in a document. A section is a thematic
grouping of content, typically with a heading
Example:
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is. .. </p>
</section>

(ii) <article> Element


 The <article> element represents an independent piece of content of a

document, such as a blog entry or newspaper article


 Examples of where an <article> element can be used:
 Forum post
 Blog post
 News story
 Comment
 Example:
<article>
<h1>anti CAA protest</h1>
PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 29 -
CS8651- INTERNET PROGRAMMING UNIT- I: WEBSITE BASICS
<p> Citizenship Amendment Act (CAA) Protest erupted in UP, West

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 30 -


CS8651- INTERNET PROGRAMMING UNIT- I: WEBSITE BASICS

Bengal, assam, karnataka,. Atleast 6 people killed in UP at the anti


CAA protest on Dec 22, 2019 at 3:00 PM.
</p>

</article>

(iii) <nav> Element


 The <nav> element represents a section of the document intended for
navigation

 The <nav> element defines a set of navigation links. However, not all links in a
document should be inside a <nav> element
<nav>
<a href="/html/">HTML</a> | Output:
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

(iv) <aside> Element


 The <aside> element describes content that’s related to the surrounding content
(such as an article) but is somewhat separate from the flow of the text
 The <aside> element is used to identify content that is related to the primary
content of the webpage, but does not constitute the primary content of the
page.
 Advertisements, Author information, related links, and related content are
examples of content that may be found in an aside element
 Example:
<!DOCTYPE html>
<html>
<body>
<p>My family and I visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
<p>It is a theme park in Disney World, Florida.</p>
</aside>
</body>
</html>

(v) <header> Element

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 31 -


CS8651- INTERNET PROGRAMMING UNIT- I: WEBSITE BASICS

 The <header> element specifies a header for a document or section. The


<header> element should be used as a container for introductory content. You
can have several <header> elements in one document.
 The following example defines a header for an article:
<article>
<header>
<h1>Internet Explorer 9</h1>
<p><time pubdate datetime="2011-03-15"></time></p>
</header>
<p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
the public on March 14, 2011 at 21:00 PDT. ... </p>
</article>

(vi) <footer> Element


 The <footer> element is a structural element used to identify the footer of a
page, document, article, or section.
 A <footer> typically contains
i) copyright
ii) authorship information
iii) links to terms of use
iv) contact information
 Example:
<footer>
<p>Posted by: Ronald Trump</p>
<p>on <time pubdate datetime="2012-03-01">2012-03-01</time></p>
</footer>

(vii) <figure> and <figcaption> Elements


 The <figure> element is intended to be used in conjunction with the
<figcaption> element to mark up diagrams, illustrations, photos, and code
listing etc
 The <figcaption> tag defines a caption for a <figure> element. The
<figcaption> element can be placed as the first or last child of the <figure>
element. Only one <figcaption> element may be nested within a <figure>
 Example:
<figure>
<img src="tajmahal.jpg" width="304" height="228">
<figcaption>Fig1. Taj Mahal, India.</figcaption>
</figure>

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 32 -


CS8651- INTERNET PROGRAMMING UNIT- I: WEBSITE BASICS

(viii) <summary> Element and <details> Element


 A <summary> element may only be used as the first child of a <details>

element. When the user clicks on the summary, the parent <details> element
is toggled open or closed, and then a toggle event is sent to the <details>
element, which can be used to let you know when this state change occurs
 Example:
<article>
…
<p>
<details>
<summary>Recent Edition Testimonials</summary>
<ul>
<li>"Updated to reflect the state of the art in Java technologies; its deep and
crystal clear explanations make it indispensable.
<li>Gives new programmers the benefit of the wisdom derived from many years
of software development experience."
</ul>
</details></p></article>
Output:before clicking arrow mark

Output: after clicking arrow mark

(ix) <meter> element


 The meter element renders a visual representation of a measure within a range
 An example is given to display face book survey using meter

<section id = "3">
<h2>Results from our Facebook Survey</h2>
<p>If you were a nonprogrammer about to learn Java for the first
time, would you prefer a course that taught Java in the
context of Android app development? Here are the results from
our survey:</p>
PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 33 -
CS8651- INTERNET PROGRAMMING UNIT- I: WEBSITE BASICS

0<meter min = "0"


max = "54"
value = "14"></meter> 54
<p>Of the 54 responders, 14 (green) would prefer to
learn Java in the context of Android app development.</p>
</section>

Output:

(x) Text-Level Semantics: <mark> Element and <wbr> Element

 The <mark> element highlights the text that’s enclosed in the element.
 We use the <wbr> element to prevent a word from breaking in an awkward
place.
 Example
<html><body>
<p> this is sample paragraph to demonstrate mark. <mark>This is marked
text</mark>. This is outside marked text</p>
<h6>&copy; 2018 by Krishnan &amp; <wbr>Associates</wbr>, Inc<h6>
</body></html>

Output:

1.11.12. input Element autocomplete Attribute and datalist element

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 34 -


CS8651- INTERNET PROGRAMMING UNIT- I: WEBSITE BASICS

1.11.12.1. input Element autocomplete Attribute


 The autocomplete attribute can be used on input types to automatically fill
in the user’s information based on previous input—such as name, address or
e-mail.
 You can enable autocomplete for an entire form or just for specific elements.
 For example, an online order form might set automcomplete = "on" for the
name and address inputs and set autocomplete = "off" for the credit card and
password inputs for security purposes.
 The autocomplete attribute works only if you specify a name or id attribute for
the input element.

1.11.12.2. datalist Element


 The datalist element provides input options for a text input element.
 In this example, we use a datalist element to obtain the user’s qualification.
 Using Opera, IE 8, when the user clicks in the text field, a drop-down list of
qualification appears. If the user types "M" in the text field, the list on months
is narrowed to MA, MBA, MCA and ME.
 An example given below:
<!DOCTYPE html>
<body>
<h1>Autocomplete and Datalist Demo</h1>
<form method = "post" autocomplete = "on">
<p>Name:
<input type = "text" id = "eName" placeholder = "Name" required/>
</p>
<p>Email:
<input type = "email" id = "email" placeholder = "[email protected]" />
</p>
<p>Educational Qualification:
<input type = "text" id = "txtList" placeholder = "Select a qualification"
list = "qualification" />
<datalist id = "qualification"/>
<option value = "BSc"/> <option value = "BA"/>
<option value = "BE"/> <option value = "ME"/>
<option value = "MBA"/> <option value = "MA"/>
<option value = "MCA"/>
</datalist>
</p>

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 35 -


CS8651- INTERNET PROGRAMMING UNIT- I: WEBSITE BASICS

<p>
<input type = "submit" value = "Submit" />
<input type = "reset" value = "Clear" />
</p>
</form>
</body>
</html>

Output:
Name with autocomplete:

Data list with educational qualification:

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 36 -


CS8651- INTERNET PROGRAMMING UNIT- I: WEBSITE BASICS

1.11.13. Drag and Drop


 A drag operation could be the default action of a mousedown event that is
followed by a series of mousemove events, and the drop event could be
triggered by the mouse being released.
 drag-and-drop operations have the following:
1. Must have a starting point such as
 where the mouse was clicked, or
 the start of the selection or
 element that was selected for the drag
2. May have any number of intermediate steps
 elements that the mouse moves over during a drag, or
 elements that the user picks as possible drop points
3. Must either have an end point
 the element above which the mouse button was released, or
 the element that was finally selected, or be canceled
 The end point must be the last element selected as a possible drop
point before the drop occurs

Make an element draggable perform the following:

1. To make an element draggable, the element must use draggable attribute, and
set an event listener for dragstart that stores the data being dragged.
2. In the even handler you needs to store data into the DataTransfer object and
set the allowed effects such as copy, move, link, or some combination

To accept a drop, the drop target has to listen to the following events:

1. The dragenter event handler reports whether or not the drop target is potentially
willing to accept the drop, by canceling the event. This event handling is optional
2. The dragover event handler specifies what feedback will be shown to the user,
by setting the dropEffect attribute of the DataTransfer associated with the
event. This event also needs to be canceled.
3. The drop event handler has a final chance to accept or reject the drop. If the
drop is accepted, the event handler must perform the drop operation on the
target.Otherwise, the drop operation is rejected.
 [NOTE:If drop is accepted, this event needs to be canceled, so that the
dropEffect attribute's value can be used by the source]

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 37 -


CS8651- INTERNET PROGRAMMING UNIT- I: WEBSITE BASICS

An Example is given below:


<!DOCTYPE HTML>
<html><head>
<style type="text/css">
div{
width:150px;
height:120px;
border:1px solid #aaaaaa;
}
</style>
<script>
function startDrag(event)
{
event.dataTransfer.setData("Text",event.target.id);
}
function allowDrop(event)
{
event.preventDefault();
}
function acceptDrop(event)
{
event.preventDefault();
var data=event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<img id="myImg" src="fish.jpg"
draggable="true" ondragstart="startDrag(event)" >
<br>
<p>Drag the fish image into the rectangle:</p>
<div id="div1"
ondrop="acceptDrop(event)"
ondragover="allowDrop(event)"> </div>
</body>
</html>

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 38 -


CS8651- INTERNET PROGRAMMING UNIT- I: WEBSITE BASICS

Output:
Before drop: after drop:

Example 2:
<!DOCTYPE html>
<head>
<script>
function dragStartHandler(event) {
event.dataTransfer.setData("Text",event.target.id);
event.dataTransfer.effectAllowed = 'move'; // only allow moves
}

function dragOverHandler(event)
{
event.preventDefault();
}
function dropHandler(event)
{
event.preventDefault();
var data=event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
</script>

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 39 -


CS8651- INTERNET PROGRAMMING UNIT- I: WEBSITE BASICS

<body>
<p>What fruits do you like?</p><hr/>
<ol ondragstart="dragStartHandler(event)">
<li draggable="true" data-value="apples" id="a">Apples</li>
<li draggable="true" data-value="oranges" id="b">Oranges</li>
<li draggable="true" data-value="pears" id="c">Pears</li>
</ol>

<p>Drop your favorite fruits below:</p><hr/>


<ol ondragover="dragOverHandler(event)"
ondrop="dropHandler(event)">
<li value="fruit-grape">Grapes</li>
</ol>
Output:
Before drop: after drop:

1.11.14. HTML5 Audio Element


 HTML5 defines a new element which specifies a standard way to embed an

audio file on a web page using an <audio> element.


 Example:
<!DOCTYPE html>
<body>
<audio controls>
<source src="love.wav" type="audio/wavg">
<source src="Aarao.mp3" type="audio/mpeg">

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 40 -


CS8651- INTERNET PROGRAMMING UNIT- I: WEBSITE BASICS

Your browser does not support the audio element.


</audio>
</body>
</html>

Output in Chrome: Output in firefox:

 The control attribute adds audio controls like play, pause, and volume.
 You should also insert text content between the <audio> and </audio> Element
for displaying in the browsers that does not support the <audio> element.
 The <audio> element allows multiple <source> elements.
 <source> elements can link to different audio files. The browser will use the
first recognized format. Currently, there are 3 supported file formats for the

<audio> element: MP3, Wav, and Ogg


 MIME Types for Audio Formats are for mp3 - audio/mpeg, Ogg - audio/ogg,
wav- audio/wav

 HTML5 Audio Tags


Tag Description
<audio> Defines sound content
<source> Defines multiple media resources for media elements, such as
<video> and <audio>
The <source> tag allows you to specify alternative video/audio files
which the browser may choose from, based on its media type or codec
support.

 Attributes of <Audio> tag

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 41 -


CS8651- INTERNET PROGRAMMING UNIT- I: WEBSITE BASICS
Attribute Value Description

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 42 -


CS8651- INTERNET PROGRAMMING UNIT- I: WEBSITE BASICS

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
Preload auto Specifies if and how the author thinks the audio should
metadata be loaded when the page loads
none
src URL Specifies the URL of the audio file

 Attributes of <source> element


Attribute Value Description
Media media_query Specifies the type of media resource
Src URL Specifies the URL of the media file
Type MIME_type Specifies the MIME type of the media resource

1.11.14. HTML5 Video Control


 HTML5 defines a new element which specifies a standard way to embed a
video/movie on a web page using the <video> element.
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls poster="sunflower.jpg">
<source src="bear.mp4" type="video/mp4">
<source src="lion.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
Output:

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 43 -


CS8651- INTERNET PROGRAMMING UNIT- I: WEBSITE BASICS

 The control attribute adds video controls, like play, pause, and volume.
 It is also a good idea to always include width and height attributes. If height and
width are set, the space required for the video is reserved when the page is loaded.
However, without these attributes, the browser does not know the sizeof the
video, and cannot reserve the appropriate space to it. The effect will be that the
page layout will change during loading (while the video loads).
 You should also insert text content between the <video> and </video> tags for
displaying in the browsers that do not support the <video> element. The
<video> element allows multiple <source> elements.
 <source> elements can link to different video files. The browser will use the
first recognized format.
 Currently, there are 3 supported video formats for the <video> element: MP4,
WebM, and Ogg
 MIME Types for Video Formats
Format MIME-type
MP4 video/mp4
WebM video/webm
Ogg video/ogg

 HTML5 Video Tags


Tag Description
<video> Defines a video or movie
<source> Defines multiple media resources for media elements, such as

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 44 -


CS8651- INTERNET PROGRAMMING UNIT- I: WEBSITE BASICS

<video> and <audio>


<track> Defines text tracks in media players

 <video> tag Optional Attributes


Attribute Value Description
Autoplay - Specifies that the video will start playing as soon as it
is ready
Controls - Specifies that video controls should be displayed (such
as a play/pause button etc).
Src URL Specifies the URL of the video file
Width Pixels Sets the width of the video player
Height Pixels Sets the height of the video player
Loop - Specifies that the video will start over again, every time
it is finished
Muted - Specifies that the audio output of the video should be
muted
Poster URL Specifies an image to be shown while the video is
downloading, or until the user hits the play button
Preload auto Specifies if and how the author thinks the video should
metadata be loaded when the page loads
none

1.11.15. HTML 5 CANVAS


 The <canvas> element is used to draw graphics, on the fly, on a web page via
scripting (usually JavaScript).
 The <canvas> element is only a container for graphics. You must use a script to
actually draw the graphics.
 Canvas has several methods for drawing paths, boxes, circles, text, and adding
images.
 The following example shows how to create canvas and draw object on canvas
using javascript. Always specify an id attribute, and a width and height attribute
to define the size of the canvas. You can have multiple <canvas> elements on one
HTML page. To add a border, we used the style attribute
<!DOCTYPE html>

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 45 -


CS8651- INTERNET PROGRAMMING UNIT- I: WEBSITE BASICS

<html>
<body>
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #0000FF;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
/*The fillStyle property can be a CSS color, a gradient, or a pattern The default
fillStyle is #000000 (black) */
ctx.fillRect(0,0,150,75);
</script> Its output shown in the browser is given below:

</body>
</html>

Canvas Coordinates
 The canvas is a two-dimensional grid.
 The upper-left corner of the canvas has coordinate (0,0)
 So, the fillRect() method above had the parameters (0,0,150,75).
 This means: Start at the upper-left corner (0,0) and draw a 150x75 pixels
rectangle.

Canvas - Paths
 To draw straight lines on a canvas, we will use the following two methods:

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 46 -


CS8651- INTERNET PROGRAMMING UNIT- I: WEBSITE BASICS

o moveTo(x,y) defines the starting point of the line


o lineTo(x,y) defines the ending point of the line
 To actually draw the line, we must use one of the "ink" methods, like stroke ().
EXAMPLE:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #ff0000;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
OUTPUT:
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
</body>
</html>
Define a starting point in position (0,0), and an ending point in position (200,100).
Then use the stroke() method to actually draw the line

Drawing Circle on the Canvas


 To draw a circle on a canvas, we will use the following method:
arc(x,y,r,start,stop)
 To actually draw the circle, we must use one of the "ink" methods, like stroke()
or fill().
EXAMPLE:
 In the previous example replace the javascript code with the following code:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 47 -


CS8651- INTERNET PROGRAMMING UNIT- I: WEBSITE BASICS

ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
The output will look like the following:

Write text in the Canvas


 To draw text on a canvas, the most important property and methods are:
- font - defines the font properties for text
- fillText(text,x,y) - Draws "filled" text on the canvas
- strokeText(text,x,y) - Draws text on the canvas (no fill)
 Using fillText():Example: In the previous example replace the javascript code
with the following code you will get output similar to the right side one:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);

Using strokeText():
 In the previous example replace fillText( ) with the following code:
ctx.strokeText("Hello World",10,50);
 Then you would get out put similar to the following: 

Canvas - Gradients
 Gradients can be used to fill rectangles, circles, text, etc. Shapes on the canvas
are not limited to solid colors.There are two different types of gradients:

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 48 -


CS8651- INTERNET PROGRAMMING UNIT- I: WEBSITE BASICS

createLinearGradient(x,y,x1,y1) - Creates a linear gradient


createRadialGradient(x,y,r,x1,y1,r1) - Creates a radial/circular gradient
 Once we have a gradient object, we must add two or more color stops.The
addColorStop() method specifies the color stops, and its position along the
gradient. Gradient positions can be anywhere between 0 to 1.
 To use the gradient, set the fillStyle or strokeStyle property to the gradient, and
then draw the shape, like a rectangle, text, or a line. Using
createLinearGradient() in JavaScript code:
var c=document.getElementById("myCanvas");
Output:
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"green");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

Drawing image on Canvas


 To draw an image on a canvas, we will use the following method:
drawImage(image,x,y)
 HTML and JavaScript code to draw image given below:
<!DOCTYPE html>
Output:
<html>
<body>
<p>Image to use:</p>
<img id="scream"
src="fish.jpeg"
align="left" />
<p>Canvas:</p>
<canvas id="myCanvas"
width="150"
height="120" style="border:1px solid #FF0000;">

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 49 -


CS8651- INTERNET PROGRAMMING UNIT- I: WEBSITE BASICS

Your browser does not support the HTML5 canvas tag.


</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var im=document.getElementById("scream");
ctx.drawImage(im,10,10);
</script>
</body>
</html>

1.11.15. Features of HTML 5


New Features HTML5 introduces a number of new elements and attributes that can
help you in building modern websites. Here is a set of some of the most prominent
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 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 webpages without
resorting to third-party plugins.
 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 the same webpage

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 50 -


CS8651- INTERNET PROGRAMMING UNIT- I: WEBSITE BASICS

1.11.17. REMOVED ELEMENTS FROM HTML5


The following HTML 4.01 elements are removed from HTML5:
- <acronym> - <center> - <frameset>
- <applet> - <dir> - <noframes>
- <basefont> - <font> - <strike>
- <big> - <frame> - <tt>

PANIMALAR ENGINEERING COLLEGE, DEPT. OF CSE PAGE - 51 -

You might also like