CMA Unit1

Unit 1
Chapter1
Origin and evolution of html
The first version of HTML was written by Tim Berners-Lee in 1993.

HTML is a very evolving markup language and has evolved with various versions updating.
HTML 1.0
HTML 1.0 was the first version of HTML, used from 1989 to 1994. It was a very limited version
and included only 20 elements. There wasn’t much that could be done with it and therefore most
webpages ended up looking very similar due to the inability to do things such as; alter the page
background, determine fonts and use tables and forms.
HTML 2.0
Created in 1995, this version was a significant improvement to HTML 1.0.It was able to support
the changing of a page background, text colour, text face, the use of tables and text boxes etc. It
was around this time that W3C (The World Wide Web Consortium) was created — an organisation
which develops web standards. HTML 2.0 also started to support more browsers.
HTML 3.2
In January 1997 HTML 3.2 was endorsed by the W3 Consortium and approved of by many,
including significant browsers such as Netscape and Microsoft. “HTML 3.2 included tables,
applets, text flow around images, subscripts and superscripts.” (W3.org, 1998)
HTML 4.01
This version of HTML, created in 1999, included cascading style sheets (css) which allowed
aspects such as text, colour, font and backgrounds to be easily altered. Instead of these aspects
being included directly within the webpage, they are now separated, making it much more trouble-
free.
HTML 5
HTML 5 is the current version of HTML which is used. “We’ve come a long way since HTML
could barely handle a simple page layout. HTML5 can be used to write web applications that still
work when you’re not connected to the net; to tell websites where you are physically located; to
handle high definition video; and to deliver extraordinary graphics.” (Marshall, 2017).
HTML has come very far since the first version (HTML 1.0), which only offered simple features
meaning most webpages looked very similar. Since then the W3 Consortium has been established,
css has been created, more features are supported by browsers and in general, more can be done
with HTML.
HTML Doctype Declaration

HTML Doctype Declaration refers to a Document Type Definition (DTD). A DTD refers to an
XML document format representing allowed elements in a web page. Every HTML document
requires a document type declaration. It is a directive that tells the web browser about the HTML
version and standard in which the current page is written; this helps different web browsers parse
the web page correctly. It is a null element with no closing tag.
Syntax: <!DOCTYPE html>
HTML
 HTML stands for Hyper Text Markup Language
 HTML is the standard markup language for creating Web pages
 HTML describes the structure of a Web page
 HTML consists of a series of elements
 HTML elements tell the browser how to display the content
A Simple HTML Document

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>

<p>My first paragraph.</p>
</body>
</html>
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.

<p>This is a paragraph.</p>
HTML TAG
HTML tags are like keywords which defines that how web browser will format and display the content.
With the help of tags, a web browser can distinguish between an HTML content and a simple content.
HTML tags contain three main parts: opening tag, content and closing tag.
HTML tag which is usually written as <html>…. </html> or <HTML>…. </HTML> is the only tag
that is a must for writing HTML pages. HTML tag has both an opening <html> and a closing
tag </html>. When a web browser reads an HTML document, browser reads it from top to bottom and left
to right.
HEAD TAG
The <head> tag in HTML is used to define the head portion of the document which contains
information related to the document. The information contained by the <head> element is not
displayed by the browser on the web-page.
The <head> tag contains other head elements such as <title>, <meta>, <link>, <style> <link>
etc.
In HTML 4.01 the <head> element was mandatory but in HTML5, the <head> element can be
omitted.
TITLE TAG
The title tag is an HTML code tag that allows you to give a web page a title.
The <title> element resides in the <head> tag and defines the name of the web page.
BODY TAG
HTML <body> tag defines the main content of an HTML document which displays on the browser.
It can contain text content, paragraphs, headings, images, tables, links, videos, etc.
The <body> must be the second element after the <head> tag or it should be placed between </head>
and </html> tags. This tag is required for every HTML document and should only use once in the
whole HTML document.
Syntax: <body> Place your Content here........</body>
Attribute of body tag:

 background: It contains the URL of the background image. It is used to set the background
image.
 bgcolor: It is used to specify the background color of an image.
 alink: It is used to specify the color of the active link.
 link: It is used to specify the color of visited links.
 text: It specifies the color of the text in a document.
 vlink: It specifies the color of visited links.
BASIC TEXT MARKUP TAG

1. Paragraph tag
Text is normally organised into the paragraphs in the HTML. We can't insert text directly in to the body. So we
choose the tag called paragraph. All the text document are inserted within its tag. It is denoted by
<p>...........</p>.
<p>This is a paragraph.</p>
<p>This is also a paragraph.</p>
2. Line breaks
Normally we write the paragraphs in several lines and if we want break point and start at next line, then we
should use the break tag.
Break tag doesn't have any content so starting the tag and then closing that one is not necessary in this case. Just
insert the tag <br/>.
Example:
<p>If you want to break a line <br> in a paragraph, <br> use the BR element in <br> your HTM
L document. </p>
Output:
If you want to break a line
in a paragraph,
use the BR element in
your HTML document.
3. Heading tag
A HTML heading or HTML h tag can be defined as a title or a subtitle which you want to display
on the webpage. When you place the text within the heading tags <h1>.........</h1>, it is displayed
on the browser in the bold format and size of the text depends on the number of heading.
There are six different HTML headings which are defined with the <h1> to <h6> tags, from highest
level h1 (main heading) to the least level h6 (least important heading).
<body>
<h1>Heading no. 1</h1>
</body>
Output:
Heading no. 1
Heading no. 2
Heading no. 3
Heading no. 4
Heading no. 5
Heading no. 6
4. Centering Content
You can use <center> tag to put any content in the center of the page or any table cell.
<center>
<p>This text is in the center.</p>
</center>
5. Horizontal Lines
Horizontal lines are used to visually break-up sections of a document. The <hr> tag creates a line
from the current position in the document to the right margin and breaks the line accordingly.
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
Again <hr /> tag is an example of the empty element, where you do not need opening and closing tags, as
there is nothing to go in between them.
HTML – Formatting
HTML Formatting is a process of formatting text for better look and feel. HTML provides us ability to
format text without using CSS. There are many formatting tags in HTML. These tags are used to make text
bold, italicized, or underlined.
1. Bold Text
In HTML, <b> tag and <strong> tag display the text in bold front.
The HTML <b> element is a physical tag which display text in bold font, without any logical importance.
If you write anything within <b>............</b> element, is shown in bold letters.
The HTML <strong> element defines text with strong importance. The content inside is typically
displayed in bold.
2. HTML <i> and <em> Tag
The HTML <i> tag displays the text in italics. It begins with <i> tag and ends with </i> tag.
<i>This text is italic</i>
The HTML <em> element defines emphasized text. The content inside is typically displayed in
italic.
<em>This text is emphasized</em>
3. HTML Marked formatting

If you want to mark or highlight a text, you should write the content within <mark>.........</mark>.
<p>Do not forget to buy <mark>milk</mark> today.</p>
Output: Do not forget to buy milk today

4. Underlined Text
If you write anything within <u>.........</u> element, is shown in underlined text.
5. Strike Text
Anything written within <strike>.......................</strike> element is displayed with strikethrough. It is a
thin line which cross the statement.
Example:
<p> <strike>Write Your First Paragraph with strikethrough</strike>.</p>
Output:
Write Your First Paragraph with strikethrough.
6. Superscript Text
The HTML <sup> element defines superscript text. Superscript text appears half a character
above the normal line, and is sometimes rendered in a smaller font.
Example: <p>x<sup>2</sup>+y<sup>3</sup> </p>
Output: x2+y3
7. Subscript Text
The HTML <sub> element defines subscript text. Subscript text appears half a character below
the normal line, and is sometimes rendered in a smaller font. Subscript text can be used for
chemical formulas, like H2O:
Example: <p>H<sub>2</sub> O</p>
8. Deleted Text
The HTML <del> element defines text that has been deleted from a document. Browsers will
usually strike a line through deleted text.
Example: <p>Hello <del>Delete your first paragraph.</del></p>
Output: Hello Delete your first paragraph
9. Inserted Text
The HTML <ins> element defines a text that has been inserted into a document. Browsers will
usually underline inserted text
Example: p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
Output: My favorite color is blue red
New Semantic/Structural element of html5
Many web sites contain HTML code like: <div id="nav"> <div class="header"> <div
id="footer"> to indicate navigation, header, and footer.
In HTML there are some semantic elements that can be used to define different parts of a web
page
Article & Section tag

The article and section elements are both used similarly to represent thematic parts of a document.
The primary difference between the two is that articles are meant to encapsulate content that is
self-contained.
When deciding between an article or section, consider whether the content would still make sense
if taken out of its current page. This indicates and article.
A section on the other hand, is only a part of a greater whole and does not stand on its own.
Examples of where a <section> element can be used:
 Chapters
 Introduction
 News items
 Contact information
Example of section tag:

<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international organization working on issues
regarding the conservation, research and restoration of the environment, formerly named the
World Wildlife Fund. WWF was founded in 1961.</p>
</section>
Examples of where the <article> element can be used:

 Forum posts
 Blog posts
 User comments
 Product cards
 Newspaper articles
Example of article tag:

<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. </p>
</article>
<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla
</article>
Aside tag
The <aside> element defines some content aside from the content it is placed in (like a sidebar).
The <aside> content should be indirectly related to the surrounding content.
some examples of valid asides could be:
 pull quotes
 background information
 supplementary links
Nav tag
The <nav> element defines a set of navigation links. There can be multiple <nav> elements on a
page. However, this element should be reserved for primary navigational areas rather than simply
lists of links.
<nav>
<ul>
<li><a href="mac.html" title="Mac computers">Mac</a></li>
<li><a href="ipad.html" title="Learn about iPads">iPad</a></li>
<li><a href="iphone.html" title="Learn about iPhones">iPhone</a></li>
<li><a href="support.html" title="Get support">Support</a></li>
</ul>
</nav>
Header tag
he <header> element represents a container for introductory content or a set of navigational links.
A <header> element typically contains:
 one or more heading elements (<h1> - <h6>)

 logo or icon
 authorship information
Note: You can have several <header> elements in one HTML document.
However, <header> cannot be placed within a <footer>, <address> or another <header> element.
Example:
A header for an <article>:
<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's natural environment,
and build a future in which humans live in harmony with nature.</p>
</article>
Footer tag
The <footer> element defines a footer for a document or section.
A <footer> element typically contains:
 copyright information
 contact information
 sitemap
 back to top links
 related documents
Example:
<footer>
<p>Author: Hege Refsnes</p>
<p><a href="mailto:hege@example.com">hege@example.com</a></p>
</footer>
figure and figcaption tag
The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code
listings, etc.
The <figcaption> tag defines a caption for a <figure> element. The <figcaption> element can be
placed as the first or as the last child of a <figure> element.
The <img> element defines the actual image/illustration.
Example:
<figure>
<img src="pic_trulli.jpg" alt="Trulli">
<figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>
HTML img tag

HTML img tag is used to display image on the web page. HTML img tag is an empty tag that
contains attributes only, closing tags are not used in HTML image element.
Example:
<h2>HTML Image Example</h2>

<img src="good_morning.jpg" alt="Good Morning Friends"/>
Attributes of HTML img tag

1) 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.
2) alt
The alt attribute defines an alternate text for the image, if it can't be displayed. The value of the alt
attribute describe the image in words.
3) width
It is an optional attribute which is used to specify the width to display the image. It is not
recommended now. You should apply CSS in place of width attribute.
4) height
It is used to specify the height of the image
Example:
<img src="animal.jpg" height="180" width="300" alt="animal image">

Use <img> tag as a link
We can also link an image with other page or we can use an image as a link. To do this, put <img>
tag inside the <a> tag.
<a href="https://www.javatpoint.com/what-is-
robotics"><img src="robot.jpg" height="100" width="100"></a>
List tag
HTML Lists are used to specify lists of information. All lists may contain one or more list elements.
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)
1. HTML Unordered Lists
An unordered list is a collection of related items that have no special order or sequence. This list is
created by using HTML <ul> tag. Each item in the list is marked with a bullet.
Example
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
This will produce the following result –
 Beetroot
 Ginger
 Potato
 Radish
The type Attribute
you can use type attribute for <ul> tag to specify the type of bullet you like. By default, it is a
disc. Following are the possible options :
<ul type = "square">

<ul type = "disc">
<ul type = "circle">
2. HTML Ordered Lists
In the ordered HTML lists, all the list items are marked with numbers by default. It is known as
numbered list also. The ordered list starts with <ol> tag and the list items start with <li> tag.
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
This will produce the following result
1. Beetroot
2. Ginger
3. Potato
4. Radish
The type Attribute

You can use type attribute for <ol> tag to specify the type of numbering you like. By default, it is a number.
Following are the possible options:
<ol type = "1"> - Default-Case Numerals.
<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.
Example:
<ol type = "I">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
This will produce the following result:
I. Beetroot
II. Ginger
III. Potato
IV. Radish
The start Attribute

You can use start attribute for <ol> tag to specify the starting point of numbering you need. Following are the
possible options:
<ol type = "1" start = "4"> - Numerals starts with 4.

<ol type = "I" start = "4"> - Numerals starts with IV.
<ol type = "i" start = "4"> - Numerals starts with iv.
<ol type = "a" start = "4"> - Letters starts with d.
<ol type = "A" start = "4"> - Letters starts with D.
3. HTML Definition Lists
The <dl> tag defines a description list.
The definition list is the ideal way to present a glossary, list of terms, or other name/value list.
Definition List makes use of following three tags.
 <dl> − Defines the start of the list

 <dt> − A term
 <dd> − Term definition
 </dl> − Defines the end of the list
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>
This will produce the following result:

HTML
This stands for Hyper Text Markup Language
HTTP
This stands for Hyper Text Transfer Protocol
Table tag
HTML table tag is used to display data in tabular form (row * column). There can be many
columns in a row.
We can create a table to display data in tabular form, using <table> element, with the help of <tr> ,
<td>, and <th> elements.
In Each table, table row is defined by <tr> tag, table header is defined by <th>, and table data is
defined by <td> tags.
HTML tables are used to manage the layout of the page e.g. header section, navigation bar, body
content, footer section etc. But it is recommended to use div tag over table to manage the layout of
the page .
Tag Description
<table> It defines a table.
<tr> It defines a row in a table.
<th> It defines a header cell in a table.
<td> It defines a cell in a table.
<caption> It defines the table caption.
<colgroup> It specifies a group of one or more columns in a

table for formatting.
<col> It is used with <colgroup> element to specify

column properties for each column.
<tbody> It is used to group the body content in a table.
<thead> It is used to group the header content in a table.

<tfooter> It is used to group the footer content in a table.
HTML Table Example
<body>
<table border = "1">
<tr>
<td>Row 1, Column 1</td>
</tr>
<tr>
</tr>
</table>
</body>
Here, the border is an attribute of <table> tag and it is used to put a border across all the cells.
Table Heading
Table heading can be defined using <th> tag. This tag will be put to replace <td> tag, which is used
to represent actual data cell.
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
Cellpadding and Cellspacing Attributes

There are two attributes called cellpadding and cellspacing which you will use to adjust the white
space in your table cells. The cellspacing attribute defines space between table cells, while
cellpadding represents the distance between cell borders and the content within a cell.
Colspan and Rowspan Attributes
You will use colspan attribute if you want to merge two or more columns into a single column.
Similar way you will use rowspan if you want to merge two or more rows.
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
</tr>
<tr>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
Tables Backgrounds
You can set table background using one of the following two ways −
 bgcolor attribute − You can set background color for whole table or just for one cell.
 background attribute − You can set background image for whole table or just for one cell.
Table Height and Width

You can set a table width and height using width and height attributes. You can specify table width
or height in terms of pixels or in terms of percentage of available screen area.
Form tag
An HTML form is used to collect user input. The user input is most often sent to a server for
processing.
The <form> Element
The HTML <form> element is used to create an HTML form for user input:
<form>
.
form elements
.
</form>
The <form> element is a container for different types of input elements, such as: text fields,
checkboxes, radio buttons, submit buttons, etc.
The HTML <form> element can contain one or more of the following form elements:
1. <input>
2. <label>
3. <select>
4. <textarea>
5. <button>
6. <fieldset>
7. <legend>
8. <datalist>
9. <output>
10. <option>
11. <optgroup>
The <input> Element One of the most used form element is the <input> element.
The <input> element can be displayed in several ways, depending on the type attribute.
1. HTML Input Types
Here are the different input types you can use in HTML:
 <input type="button">
 <input type="checkbox">
 <input type="date">
 <input type="datetime-local">
 <input type="email">
 <input type="file">
 <input type="image">
 <input type="month">
 <input type="password">
 <input type="radio">
 <input type="range">
 <input type="reset">
 <input type="search">
 <input type="submit">
 <input type="text">
 <input type="time">
 <input type="url">
 <input type="week">
Input Type Text
<input type="text"> defines a single-line text input field:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
First name:
Last name:
Placeholder Attribute:
<input type="text" id="fname" name="fname" placeholder=”Enter your first name”>
Input Type Password
<input type="password"> defines a password field:
Example:
<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd">
</form>
Username:
Password:
Input Type Submit

<input type="submit"> defines a button for submitting form data to a form-handler.
The form-handler is typically a server page with a script for processing input data.
Example:
<form action="/action_page.php">
<input type="text" id="fname" name="fname" value="John"><br>
<input type="text" id="lname"name="lname" value="Doe"><br>
<input type="submit" value="Submit">
</form>
First name:
Last name:
Input Type Radio
<input type="radio"> defines a radio button.
Radio buttons let a user select ONLY ONE of a limited number of choices:
If you use one name for all the radio button only one radio button can be selected.
<form>
<label> Gender: </label> <br>
<input type="radio" id="gender" name="gender" value="male"/> Male <br>
<input type="radio" id="gender" name="gender" value="female"/> Female <br/>
</form>
Input Type Checkbox
<input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of choices.
Example:
<form><input type="checkbox" id="vehicle1"name="vehicle1"value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
I have a bike
I have a car
I have a boat
Input Type Button
<input type="button"> defines a button:
Example
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
Input Type Color
The <input type="color"> is used for input fields that should contain a color.
Depending on browser support, a color picker can show up in the input field.
Example:
<form>
<label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor">
</form>
Input Type Date
The <input type="date"> is used for input fields that should contain a date.
Depending on browser support, a date picker can show up in the input field.
Example:
<form>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
</form>
We can also use the min and max attributes to add restrictions to dates:
Input Type Email
The <input type="email"> is used for input fields that should contain an e-mail address.
Depending on browser support, the e-mail address can be automatically validated when submitted.
Some smartphones recognize the email type, and add ".com" to the keyboard to match email
input.
<form>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
</form>
Input Type Image

The <input type="image"> defines an image as a submit button.
The path to the image is specified in the src attribute.
<form>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>
Input Type File
The <input type="file"> defines a file-select field and a "Browse" button for file uploads.
<form>
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
</form>
Input Type Range
The <input type="range"> defines a control for entering a number whose exact value is not
important (like a slider control). Default range is 0 to 100. However, you can set restrictions on
what numbers are accepted with the min, max, and step attributes:
<form>
<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
</form>
Input Type Url
The <input type="url"> is used for input fields that should contain a URL address.
Depending on browser support, the url field can be automatically validated when submitted.
Some smartphones recognize the url type, and adds ".com" to the keyboard to match url input.
<form>
<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage">
</form>
It will display “please enter a URL”

2. The <label> tag
The <label> element defines a label for several form elements.The <label> element is useful for
screen-reader users, because the screen-reader will read out loud the label when the user focus on
the input element.
The <label> element also help 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.
The for attribute of the <label> tag should be equal to the id attribute of the <input> element to
bind them together.
<label for="fname">First name:</label>

<input type="text" id="fname" name="fname">
3. The <select> tag

The <select> element is used to create a drop-down list.The <select> element is most often used
in a form, to collect user input.
The name attribute is needed to reference the form data after the form is submitted (if you omit
the name attribute, no data from the drop-down list will be submitted).
The id attribute is needed to associate the drop-down list with a label.
The <option> tags inside the <select> element define the available options in the drop-down list
The <select> element is used to create a drop-down list.
<label for="cars">Choose a car:</label>

<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Output:
4. Text area tag
<textarea> tag is used to insert multiple lines in a form.

The size of <textarea> can be specified either using rows or cols attributes or css.
<form>Enter your address
<textarea rows=”2” cols=”20”></textarea>
</form>
5. The <button> Element
The <button> element defines a clickable button:
<button type="button" onclick="alert('Hello World!')">Click Me!</button>

6. The <fieldset> and <legend> Elements
The <fieldset> element is used to group related data in a form.This element is used with <legend>
element which provide caption for the grouped element
<form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<input type="text" id="fname" name="fname" value="John"><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
HTML frames
HTML frames are used to divide your browser window into multiple sections where each section
can load a separate HTML document. A collection of frames in the browser window is known as
a frameset.
To use frames on a page we use <frameset> tag instead of <body> tag. The <frameset> tag
defines, how to divide the window into frames. The rows attribute of <frameset> tag defines
horizontal frames and cols attribute defines vertical frames.
HTML <frame> tag (Not supported in HTML5)

HTML <frame> tag define the particular area within an HTML file where another HTML web page can be
displayed.
A <frame> tag is used with <frameset>, and it divides a webpage into multiple sections or frames, and
each frame can contain different web pages.
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.
<iframe src="URL" title="description"></iframe>

<iframe src="https://www.w3schools.com" title="W3Schools Free Online Web Tutorials">
</iframe>
<iframe src="https://www.w3schools.com" title="W3Schools Free Online Web Tutorials">
</iframe>
HTML <link> Tag

The <link> tag in HTML is used to define a link between a document and an external resource.
The link tag is mainly used to link to external style sheets. The link element is empty, it contains
attributes only.
<link rel="stylesheet" type="text/css" href="styles.css">

 charset: It is used to specify the character encoding for the HTML linked document
 disabled: It is used to specify that the linked document is disabled.
 href: It s used to specify the URL of the linked document.
 rel: It is used to specify the relationship between the current and the linked document.
 rev: It assigns the reverse relationship from the linked document to the current document.
 sizes: It is used to specify the sizes of the icon for visual media and it only works when
rel=”icon”.
 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.
Script tag
The <script> tag is used to embed a client-side script (JavaScript).The <script> element either
contains scripting statements, or it points to an external script file through the src
attribute.Common uses for JavaScript are image manipulation, form validation, and dynamic
changes of content.
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
Video tag
The <video> tag is used to embed video content in a document, such as a movie clip or other
video streams.
The <video> tag contains one or more <source> tags with different video sources. The browser
will choose the first source it supports.
The text between the <video> and </video> tags will only be displayed in browsers that do not
support the <video> element.
<video width="320" height="240" controls>

<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag.</video>
Audio tag
<audio controls autoplay>

<source src = "/html5/audio.ogg" type = "audio/ogg" />
<source src = "/html5/audio.wav" type = "audio/wav" />
Your browser does not support the audio element.
</audio>
div tag
The <div> tag defines a division or a section in an HTML document.
The <div> tag is used as a container for HTML elements - which is then styled with CSS or
manipulated with JavaScript.
The <div> tag is easily styled by using the class or id attribute.
<html><head>
<style>
.myDiv {
border: 5px outset red;
background-color: lightblue;
text-align: center;
}
</style></head>
<body><h1>The div element</h1>
<div class="myDiv">
<h2>This is a heading in a div element</h2>
<p>This is some text in a div element.</p>
</div>
Overview and features of html5
1. Nav Tag
The <nav> tag helps in defining a set of navigation links. It helps create a section of a website that
contains navigation links
2. Audio & Video Tags

With Audio and Video tags, developers can embed videos or audio into their websites. For styling
the video tag, developers can use CSS and CSS3.
<video width="400px" height="300px" controls>

<source src=" movie.mp4 " type="video/mp4"></video>
3. Header
Typically, the header element contains heading elements, logo or icons, a search form, author’s
information, etc.
4.Footer
The <footer> tag defines the footer of a document or a section. Typically, the footer contains information
related to the author, copyright, contact information, sitemap, related documents, back to top links, etc.
5.Figure and figcaption

These elements help users to insert an image with its caption. The figcaption tag is used to add a
description for the image.
6.Canvas Tag
The canvas tag in HTML5 helps users draw graphics or images on the fly using JavaScript. We can use it for
drawing paths, boxes, circles, adding images, etc. The canvas tag has two attributes: width and height for
setting the width and height of the canvas.
<canvas id="Canvas1" width="400" height="100" style="border:2px solid;">
7. Mark
The <mark> element highlights a particular text that is of special interest to the user in an HTML
document.
8. vector graphics
It can be used to draw graphics with various shapes and colors via scripting usually JS. Vector
graphics are scalable, easy to create and edit. It also supports interactivity and animation.
<svg id = "svgelem" height = "200" xmlns = "http://www.abc.org/2000/svg">
<circle id = "redcircle" cx = "50" cy = "50" r = "50" fill = "red" />
</svg>
Unit 1
Chapter 2: Javascript
JavaScript is an object-based, client-side scripting language that you can use to make Web pages more
dynamic.
Object Based
Object based means that JavaScript can use items called objects. However, the objects are not class based
(meaning no distinction is made between a class and an instance); instead, they are just general objects.
Client Side
Client side means that JavaScript runs in the client (software) that the viewer is using, rather than on the
Web server of the site serving the page. In this case, the client would be a Web browser.
Server-Side Languages
A server-side language needs to get information from the Web page or the Web browser, send it to a
program that is run on the host’s server, and then send the information back to the browser. Therefore, an
intermediate step must send and retrieve information from the server before the results of the program are
seen in the browser.
A server-side language often gives the programmer options that a client-side language doesn’t have, such
as saving information on the Web server for later use, or using the new information to update a Web page
and save the updates
Client-Side Languages
A client-side language is run directly through the client being used by the viewer. In the case of JavaScript,
the client is a Web browser. Therefore, JavaScript is run directly in the Web browser and doesn’t need to
go through the extra step of sending and retrieving information from the Web server.
With a client-side language, the browser reads and interprets the code, and the results can be given to the
viewer without getting information from the server first. This process can make certain tasks run more
quickly
Scripting Language
A scripting language doesn’t require a program to be compiled before it is run. JavaScript runs in the
browser by being added into an existing HTML document. You can add special tags and commands to
the HTML code that will tell the browser that it needs to run a script. Once the browser sees these special
tags, it interprets the JavaScript commands and will do what you have directed it to do with your code.
For example, the following code adds some JavaScript to an HTML file that writes some text onto
the Web page. Notice the addition of tags.
General Syntactic Characteristics

Using the HTML Script Tags
Script tags are used to tell the browser where some type of scripting language will begin and end in an
HTML document. In their most basic form, script tags appear just like any other set of HTML tags:
When you use just the basic opening and closing tags like this, many browsers will assume that the
scripting language to follow will be JavaScript.
Calling External Scripts
Script tags are also useful if you wish to call an external JavaScript file in your document. An external
JavaScript file is a text file that contains nothing but JavaScript code, and it is saved with the .js file
extension. By calling an external file, you can save the time of coding or copying a long script into each
page in which the script is needed.
<script type="text/javascript" src="yourfile.js"></script>
Understanding Variables(Primitives)
A variable represents or holds a value. The actual value of a variable can be changed at any time.
Using variables offers several benefits:
● They can be used in places where the value they represent is unknown when the code is written.
● They can save you time in writing and updating your scripts.
● They can make the purpose of your code clearer
Declaring Variables
To declare text as a variable, you use the var keyword, which tells the browser that the text to follow will
be the name of a new variable:
var variablename;
For example, to name your variable coolcar, the declaration looks like this:
var coolcar;
Assigning Values to Variables
To assign a value to a variable, you use the JavaScript assignment operator, which is the equal to (=)
symbol.
var variablename=variablevalue;
Understanding Variable Types
So far, you’ve seen examples of variable values that are numbers. In JavaScript, the variable values, or
types, can include number, string, Boolean, and null.
1. Number
Number variables are just that—numbers. JavaScript does not require numbers to be declared as integers,
floating-point (decimal) numbers, or any other number type. Instead, any number is seen as just another
number, whether it is 7, –2, 3.453, or anything else.
var variablename=number;
Here are some examples:
var paycheck=1200;
var phonebill=29.99;
var savings=0;
var sparetime=-24.5;
String
String variables are variables that represent a string of text. The string may contain letters, words, spaces,
numbers, symbols, or most anything you like.
var variablename="stringtext";
some examples of string variables:
var mycar="Corvette"; var oldcar="Big Brown Station Wagon";
var mycomputer="Pentium 3, 500 MHz, 128MB RAM";
var oldcomputer="386 SX, 40 mHz, 8MB RAM";
var jibberish="what? cool! I am @ home 4 now. (cool, right?)";
The addition operator enables you to place a variable before, after, or even into the middle of a string
<script type="text/javascript">
var mycar="Corvette";
document.write("I like driving my "+mycar+" every day!");
</script>
Boolean
A Boolean variable is one with a value of true or false.
Here are examples:
var JohnCodes=true;
var JohnIsCool=false;
Instead of using the words true and false, JavaScript also allows you to use the number 1 for true and the
number 0 for false, as shown here:
var JohnCodes=1;
var JohnIsCool=0;
Null
Null means that the variable has no value. It is not a space, nor is it a zero; it is simply nothing. If you
need to define a variable with a value of null, use a declaration like this:
var variablename=null;
JavaScript Operators
An operator is a symbol or word in JavaScript that performs some sort of calculation, comparison, or
assignment on one or more values.
Common calculations include finding the sum of two numbers, combining two strings, or dividing two
numbers. Some common comparisons might be to find out if two values are equal or to see if one value
is greater than the other
1. Mathematical These operators are most often used to perform mathematical calculations on two values.
The mathematical operators will probably be the most familiar to you. They use symbols such as +, –,
and *.
2. Assignment These operators are used to assign new values to variables. One of the assignment operators
is the symbol =.
3. Comparison These operators are used to compare two values, two variables, or perhaps two longer
statements. They use symbols such as > (for “is greater than”) and < (for “is less than”).
4. Logical These operators are used to compare two conditional statements (or to operate on one statement)
to determine if the result is true and to proceed accordingly. They use symbols such as && (returns true
if the statements on both sides of the operator are true) and || (returns true if a statement on either side of
the operator is true).
5. Bitwise These are logical operators that work at the bit level (ones and zeros). They use symbols like <<
(for left-shifting bits) and >> (for right-shifting bits).
6. Special These are operators that perform other special functions of their own.
1. Mathematical operator
i. The Addition Operator (+)
Variables for Addition Results One use of the addition operator is to add two numbers to get the
mathematical result. When adding numerical values, you often assign the result to a variable and use the
variable later to make use of the result.
var thesum=4+7;
window.alert(thesum);
The result is an alert that says 11.
Type Conversions in Addition Calculations
It is important to note how JavaScript performs type conversion when working with the mathematical
operators.
var num1=4.73;
var num2=7;
var thesum=num1+num2;
The result is an alert that says 11.73
If you add a number and a string, the result will come out as though you had added two strings.
var num1=4;
var num2="7";
var thesum=num1+num2;
When they are added, they are added like strings (47)
ii. The Subtraction Operator (–)
var theresult=10-3;
window.alert(theresult);
Example 2
var num1=10;
var num2=3;
var theresult=num1-num2;
iii. The Multiplication Operator (*)
The multiplication operator is used to multiply the value on its right side by the value on its left side.
var num1=4;
var num2=5;
var thetotal=num1*num2;
window.alert(thetotal);
iv. The Division Operator (/)
The division operator is used to divide the value on its left side by the value on its right side
var num1=10;
var num2=2;
var theresult=num1/num2;
Type Conversions in Division Calculations:
var num1=3;
var num2=4;
var theresult=num1/num2;
The result in this case is 0.75, which is what you see in the alert box
v. The Modulus Operator (%)
The modulus operator is used to divide the number on its left side by the number on its right side, and
then give a result that is the integer remainder of the division.
var num1=11;
var num2=2;
var theresult=num1%num2;
vi. The Increment Operator (++)
The increment operator can be used on either side of the value on which it operates. It increases the value
it is operating on by 1, just like adding 1 to the value. The actual result depends on whether the operator
is used before or after the value it works on, called the operand.
The Increment Operator Before the Operand : When the increment operator is placed before the
operand, it increases the value of the operand by 1, and then the rest of the statement is executed. Here is
an example
var num1=2;
var theresult=++num1
Here the increment occurs first because the increment operator is in front of the operand. So, the value of
num1 is set to 3 (2+1) and is then assigned to the variable theresult, which gets a value of 3.
The Increment Operator After the Operand : If you place the increment operator after the operand, it
changes the value of the operand after the assignment.
var num1=2;
var theresult=num1++;
example
<script type="text/javascript">
num1=2;
result= ++num1;
alert("num1= "+num1+" result= "+result); // num1= 3 result= 3.
num1=2;
result= num1++;
alert("num1= "+num1+" result= "+result); // num1=3 result=2
</script>
vii. The Decrement Operator (– –)
The decrement operator works in the same way as the increment operator, but it subtracts 1 from the
operand rather than adding 1 to it.
If you place the decrement operator before the operand, the operand is decremented, and then the
remainder of the statement is executed.
Here is an example:
var num1=2;
var theresult=--num1;// num1=1 theresult=1
When you place the operator after the operand, as in the next example, the rest of the statement is executed
and the operand is decremented afterward:
var num1=2;
var theresult=num1--; // num1= 1 theresult=2
viii. The Unary Negation Operator (–)
Unary negation is the use of the subtraction sign on only a single operand.
var negnum=-3;
This defines a variable with a value of negative 3. Basically, the operator tells the browser that the 3 is
“not positive,”.
2. Understanding Assignment Operators

Assignment operators assign a value to a variable. They do not compare two items, nor do they perform
logical tests.
The Assignment Operator (=)
It assigns the value on the right side of the operator to the variable on the left side, as in this example:
var population=4500;
This assigns the value of 4500 to the variable population
3. Understanding Comparison Operators

Comparison operators are often used with conditional statements and loops in order to perform
actions only when a certain condition is met.
4. Understanding Logical Operators

i. The AND Operator (&&)
The AND Operator (&&) The logical operator AND returns true if the comparisons on both sides of the
&& operator are true
ii. The OR Operator (||)
The logical operator OR returns true if the comparison on either side of the operator returns true. So,
for this to return true, only one of the statements on one side needs to evaluate to true.
iii. The NOT Operator (!)
5. The Bitwise Operators

Bitwise operators are logical operators that work at the bit level, where there is a bunch of ones and
zeros
6. Special Operators
Objects in javascript
Objects are useful because they give you another way to organize things within a script. Rather than
having a bunch of similar variables that are out there on their own, you can group them together under an
object
Creating Objects
<script>
function car(seats,engine,theradio)
{
this.seats=seats;
this.engine=engine;
this.theradio=theradio;
}
</script>
In this code the function takes three parameters.
The keyword this in JavaScript is used to represent the current object being used, or “this object,”.
Using new keyword you can create instances of object.
Expression in javascript
An expression is a block of code that evaluates to a value. A statement is any block of code that
is performing some action.
There are five primary categories of expression in JavaScript:
 Arithmetic: uses arithmetic operators (+ - * / %).

 String: uses string operators and evaluates to a character string.
 Logical: evaluates to a boolean value of either True or False and uses boolean operators.
 Primary expressions: Consists of basic keywords and expressions.
 Left-hand side expressions: Left-hand side values which are the destination for the assignment
operator.
Primary expressions
Primary expressions consist of basic keywords in JavaScript.
this is used to refer to the current object; it usually refers to the method or object that calls it.
this is used either with the dot operator or the bracket operator.
this['element']
this.element
Grouping operator
The grouping operator ( ) is used to determine the evaluation precedence of expressions.
a*b-c
a * (b - c)
a * b - c applies the multiplication operator first and then evaluates the result of the multiplication
with - b, while a * (b - c) evaluates the brackets first.
Left-hand side expressions
new
new creates an instance of the object specified by the user and has the following prototype.
var objectName = new objectType([param1, param2, ..., paramN]);

super
super calls on the current object’s parent and is useful in classes to call the parent object’s
constructor.
super([arguments]); // parent constructor
super.method(args...) // parent's method
Screen output and keyboard input in javascript
Screen output
JavaScript can "display" data in different ways:
 Writing into an HTML element, using innerHTML.

 Writing into the HTML output using document.write().
 Writing into an alert box, using window.alert().
 Writing into the browser console, using console.log().
1. Using innerHTML
To access an HTML element, JavaScript can use the document.getElementById(id) method.
The id attribute defines the HTML element. The innerHTML property defines the HTML
content:
innerHTML refers to the contents between a tag's beginning and end
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>
Output
My First Web Page

My First Paragraph.
11
2. Using document.write()
For testing purposes, it is convenient to use document.write():
<script>
document.write(5 + 6);
</script>
Example2:<button type="button" onclick="document.write(5 + 6)">Try it</button>

3. Using window.alert()
You can use an alert box to display data:
<script>
window.alert(“welcome”);
Window.alert(5+6);
</script>
In JavaScript, the window object is the global scope object. This means that variables, properties,
and methods by default belong to the window object.
4. Using console.log()
For debugging purposes, you can call the console.log() method in the browser to display data.
<script>
console.log(5 + 6);
</script>
Keyboard input/Keyboard event in javascript

 Whenever a user presses any key on the keyboard different events are fired.
 They are keydown, keyup and keypress.
 Keyboard events belong to the keyboardevent object.
 Most browser-based games require some form of keyboard input.
1. Keydown:Keydown happens when the key is pressed down,and auto repeats if the key is
pressed down for long.
2. Keypress: This events is fired when an alphabetics,numeric,or punctuations key is pressed
down.
3. Keyup: keyup happens when the key is released.
Example:
Document.addEventListener(‘Keydown’,(event)=> {
var name=event.key;
var code=event.code;
//alert the key name & key code on keydown
Alert(‘Key pressed ${name}\n Key code value:${code}’);
},false);
The keyboard event properties
Event.code The keyboard event has two important properties: key and code. The key property
returns the character that has been pressed whereas the code property returns the physical key
code.
For example, if you press
the z characterkey,the event.key returns z and event.code returns KeyZspecifies exactly which
key is pressed. For instane ,most keybord have two shift keys;on the left and on the right side.
The event.code tells us exactly which one was pressed,and event.key is responsible for
meaning of the key: what it is(a “shift”).
addEventListener:
An event listener in JavaScript is a wat that you can wait user interaction like a click or key
press and the run some code whenever that action happens.
One common use case for event listeners is listening for click events on a button.

CMA Unit1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CMA Unit1

Uploaded by

Copyright:

Available Formats

Unit 1

The first version of HTML was written by Tim Berners-Lee in 1993.

HTML Doctype Declaration

A Simple HTML Document

<h1>My First Heading</h1>

Syntax: <body> Place your Content here........</body>

Attribute of body tag:

BASIC TEXT MARKUP TAG

<p>This is also a paragraph.</p>

<h1>Heading no. 1</h1>

<h2>Heading no. 2</h2>

<h3>Heading no. 3</h3>

<h4>Heading no. 4</h4>

<h5>Heading no. 5</h5>

<h6>Heading no. 6</h6>

<p>This is paragraph one and should be on top</p>

3. HTML Marked formatting

Output: Do not forget to buy milk today

<p> <strike>Write Your First Paragraph with strikethrough</strike>.</p>

Article & Section tag

Examples of where a <section> element can be used:

Example of section tag:

Examples of where the <article> element can be used:

Example of article tag:

The <aside> content should be indirectly related to the surrounding content.

some examples of valid asides could be:

A <header> element typically contains:

 one or more heading elements (<h1> - <h6>)

A header for an <article>:

The <footer> element defines a footer for a document or section.

A <footer> element typically contains:

figure and figcaption tag

HTML img tag

<h2>HTML Image Example</h2>

Attributes of HTML img tag

The location of image may be on the same directory or another server.

<img src="animal.jpg" height="180" width="300" alt="animal image">

1. Ordered List or Numbered List (ol)

1. HTML Unordered Lists

This will produce the following result –

The type Attribute

<ul type = "square">

2. HTML Ordered Lists

The type Attribute

The start Attribute

<ol type = "1" start = "4"> - Numerals starts with 4.

3. HTML Definition Lists

The <dl> tag defines a description list.

 <dl> − Defines the start of the list

This will produce the following result:

<table> It defines a table.

<tr> It defines a row in a table.

<th> It defines a header cell in a table.

<td> It defines a cell in a table.

<caption> It defines the table caption.

<colgroup> It specifies a group of one or more columns in a

<col> It is used with <colgroup> element to specify

<tbody> It is used to group the body content in a table.

<thead> It is used to group the header content in a table.

HTML Table Example

Cellpadding and Cellspacing Attributes

Table Height and Width