MODULE 1

• Web, is an information system where

documents and other web resources are
identified by Uniform Resource Locators,
which may be interlinked by hypertext, are
accessible over the Internet.
• Internet Interconnected cn use to
communicate b/w n/w and device
Module­1
Web browsers, web servers, MIME, URL, HTTP
Introduction to HTML5 tags, Basic syntax and structure, text markups, images, lists,
tables, progress, Media tags-audio and video, forms, span and div tags.
Module­2
Introduction to CSS, Levels of CSS, Selectors, Font, color and Text Properties, BOX
Model, Introduction to JavaScript, JavaScript variables, operators, Conditional and
loop statements in JavaScript, Functions and Arrays in JavaScript
Module­3
Event Handling and Document Object model in JavaScript, Handling strings and
working with
window object
Module­4
Introduction to AngularJS, Expressions, Modules, Directives, Model, Data binding,
Controllers,
Scopes, Filters
Module­5
Services, Tables, Select box, Forms, Events, Validations
 Introduction about Internet
• Origins
• 1960s :Department of Defence (DoD) became interested
in developing a new large-scale computer network
• communications, program sharing, and remote
computer.
• The DoD’s Advanced Research Projects Agency (ARPA)
funded the construction of the first such network. Hence
it was named as ARPAnet.
• The primary early use of ARPAnet was simple text-based
communications through e-mail
 Late 1970s and early 1980s
• BITNET, Time NETwork, began at the City
University of New York. It was built initially to
provide electronic mail and file transfers.
• CSNET is an acronym for Computer Science
NETwork. Its initial purpose was to provide
electronic mail.
 1990s
• NSFnet which was created in 1986 replaced
ARPAnet by 1990.
• It was sponsored by the National Science
Foundation (NSF).
• By 1992 NSFnet, connected more than 1
million computers around the world.
• In 1995, a small part of NSFnet returned to
being a research network. The rest became
known as the Internet.
 What Is the Internet?

• The Internet is a huge collection of computers

connected in a communications network.
• The Transmission Control Protocol/Internet
Protocol (TCP/IP) became the standard for
computer network connections in 1982.
• One node on this local network is physically
connected to the Internet
• So, the Internet is actually a network of networks,
rather than a network of computers.
• Obviously, all devices connected to the Internet
must be uniquely identifiable
 Internet Protocol Addresses
• The Internet Protocol (IP) address of a machine connected
to the Internet is a unique 32-bit number.
• IP addresses usually are written (and thought of) as four 8-
bit numbers, separated by periods.
• The four parts are separately used by Internet-routing
computers to decide where a message must go next to get
to its destination.
• For example, the IP for United Airlines (www.ual.com) is
209.87.113.93. So, if a browser is pointed at
http://209.87.113.93, it will be connected to the United
Airlines Web site
 Domain Names
• The IP addresses are numbers. Hence, it would be difficult
for the users to remember IP address.
• To solve this problem, text based names were introduced.
These are technically known as domain name system (DNS).
• These names begin with the names of the host machine,
followed by progressively larger enclosing collection of
machines, called domains.
• There may be two, three or more domain names. DNS is of
the form
hostname.domainName.domainName .
Example: ajiet.edu.in
 The steps for conversion from DNS to IP:
1) The DNS has to be converted to IP address before
destination is reached.
2) This conversion is needed because computer understands
only numbers. The conversion is done with the help of name
server.
3) As soon as domain name is provided, it will be sent across
the internet to contact name servers.
4) This name server is responsible for converting domain name
to IP If one of the name servers is not able to convert DNS to
IP, it contacts other name server.
5) This process continues until IP address is generated.
6) Once the IP address is generated, the host can be accessed.
The hostname and all domain names form what is known as
FULLY QUALIFIED DOMAIN NAME. This is as shown below:
 The World Wide Web

Origins
i)Tim Berners Lee and his group proposed a new protocol for
the Internet
ii. The proposed new system was designed to allow a user
anywhere on the Internet to search for and retrieve
documents from the databases on any number of different
document-serving computers.
iii. The system used hypertext, which is text with embedded
links to text in other documents to allow non sequential
browsing of textual material.
iv. The units of web are referred as pages, documents and
resources.
v. Web is merely a vast collection of documents, some of which
are connected by links.
vi. These documents can be accessed by web browsers and are
 Web or Internet
• It is important to understand that the Internet
and the Web is not the same thing.
• The Internet is a collection of computers and
other devices connected by equipment that
allows them to communicate with each other.
• The Web is a collection of software and
protocols that has been installed on most, if
not all, of the computers on the Internet
 Web browsers

• The web browser is an application software to explore

www (World Wide Web). It provides an interface
between the server and the client and it requests to
the server for web documents and services.
• Documents provided by servers on the Web are
requested by browsers, which are programs running
on client machines.
• They are called browsers because they allow the user
to browse the resources available on servers.
• Mosaic was the first browser with a graphical user
interface.
• A browser is a client on the Web because it initiates
the communication with a server, which waits for a
• In the simplest case, a browser requests a static
document from a server.
• The server locates the document among its servable
documents and sends it to the browser, which
displays it for the user.
• Sometimes a browser directly requests the execution
of a program stored on the server. The output of the
program is then returned to the browser.
• Examples: Internet Explorer, Mozilla Firefox, Netscape
Navigator, Google Chrome, Opera etc.,
 Web Servers
• Web servers are programs that provide documents to
requesting browsers.
• Example: Apache
Web server operations:
• All the communications between a web client and a web server
use the HTTP
• When a web server begins execution, it informs the OS under
which it is running & it runs as a background process
• A web client or browser, opens a network connection to a web
server, sends information requests and possibly data to the
server, receives information from the server and closes the
connection.
• The primary task of web server is to monitor a communication
port on host machine, accept HTTP commands through that
port and perform the operations specified by the commands.
 MIME(Multipurpose Internet Mail
Extensions)
• Multipurpose Internet Mail Extension (MIME) is a
standard that was proposed by Bell
Communications in 1991 in order to expand the
limited capabilities of email.
• MIME is a kind of add-on or a supplementary
protocol that allows non-ASCII data to be sent
through SMTP.
• It allows the users to exchange different kinds of
data files on the Internet: audio, video, images,
application programs
 Why do we need MIME?
• Simple Mail Transfer Protocol (SMTP):
• SMTP has a very simple structure
• Its simplicity however comes with a price as it
only sends messages in NVT 7-bit ASCII format.
• It cannot be used for languages that do not
support 7-bit ASCII format such as French,
German, Russian, Chinese and Japanese, etc. so
it cannot be transmitted using SMTP. So, in
order to make SMTP more broad, we use MIME.
 Purpose and Functionality of MIME
• MIME transforms non-ASCII data at the sender
side to NVT 7-bit data and delivers it to the
client SMTP.
• The message on the receiver side is
transferred back to the original data. As well
as we can send video and audio data using
MIME as it transfers them also in 7-bit ASCII
data.
 Features of MIME
• It is able to send multiple attachments with a
single message.
• Unlimited message length.
• Binary attachments (executables, images,
audio, or video files)
• MIME provided support for varying content
types and multi-part messages.
 Working of MIME –
• Suppose a user wants to send an email
through a user agent and it is in a non-ASCII
format so there is a MIME protocol that
converts it into 7-bit NVT ASCII format.
It supports multiple attachments in a single e-mail.
It supports the non-ASCII characters.
It supports unlimited e-mail length.
It supports multiple languages.
 URL (Uniform Resource Locators)

• A URL or Uniform Resource Locator is a Unique identifier

that is contained by all the resources available on the
internet.
• It can help to locate a particular resource due to its
uniqueness. It is also known as the web address.
• A URL consists of different parts like protocol, domain
name, etc.
• The users can access the URLs by simply typing them inside
the address bar or by clicking any button or link web page.
• If the web browser wants some document from web
server, just giving domain name ,because domain name
can only be used for locating the server.
• The general format of URL is: scheme: object-
address
• Example: http: www.vtu.ac.in/results.php
• The scheme indicates protocols being used. (http,
ftp, telnet...)
• In case of http, the full form of the object address of
a URL is as follows: //fully-qualified- domain-
name/path-to-document
• https://www.geeksforgeeks.org/
HTTP (Hypertext Transfer Protocol)
• Request Phase
1. HTTP method Domain part of the URL HTTP
version
2.Header fields
3. Blank line
4. Message body
• HTTP request: GET/storefront.html HTTP/1.1
HTTP Request Method
• The format of a header field is the field name
followed by a colon and the value of the field.
There are four categories of header fields:
1. General: For general information, such as the date
2. Request: Included in request headers
3. Response: For response headers
4. Entity: Used in both request and response headers
A wildcard character, the asterisk (*), can be used to
specify that part of a MIME type can be anything.
 The Response Phase:
The general form of an HTTP response is as
follows:
1. Status line
2. Response header fields
3. Blank line
4. Response body
 HTTP/1.1 200 OK
• The status codes begin with 1, 2, 3, 4, or 5.
• The general meanings of the five categories
specified by these first digits are show
 Introduction to XHTML5 tags
• XHTML5 is a document that conforms to both the HTML and XHTML
syntax by using a common subset of both the HTML and XHTML.
• A group of developers at Opera and Mozilla formed the WHATWG (Web
Hypertext Application Technology Working Group) group within the
W3C, and worked to enhance the features of HTML to higher versions.
• The WHATWG group was very small group led by Ian Hickson. By 2009,
the W3C supported the WHATWG group and the work done by them
and named it as HTML5.
• There are three main aims of HTML5:
• 1. Specify how browsers should deal with invalid markup.
• 2. Provide an open, non proprietary programming framework (via
JavaScript) for creating rich web applications.
• 3. Be backwards compatible with the existing web programs.
 Links (anchor tag )
• <a href=“link”>web</a>
 HTML Character Entities
• Some characters are reserved in HTML.
• Entity names or entity numbers can be used to display reserved
HTML characters.
Entity names look like this:
&entity_name;

Entity numbers look like this:

&#entity_number;

To display a less than sign (<) we must write: &lt; or &#60;

• < (less than) = &lt;
• > (greater than) = &gt;
• A commonly used HTML entity is the non-breaking space: &nbsp;
• https://www.w3schools.com/html/html_entities.asp
 HTML Entity Example
<!DOCTYPE html>
<html>
<body>
<h1>HTML Entity Example</h1>
greater than &gt;
<br> ampersand&amp;
<br>double quotation mark &quot;
<br>single quotation mark &apos;
<br>cent &cent;
<br>pound &pound;
<br>yen &yen;
<br>euro &euro;
<br>copyright &copy;
<br>trademark &reg;
</body>
 HTML <hr> Tag
• The <hr> tag defines a the matic break in an
HTML page (e.g. a shift of topic).
• The <hr> element is most often displayed as a
horizontal rule that is used to separate
content (or define a change) in an HTML page.
• https://www.w3schools.com/tags/tryit.asp?fil
ename=tryhtml_hr_test
 HTML <meta> Tag
• The <meta> tag defines metadata about an HTML
document. Metadata is data (information) about
data.
• <meta> tags always go inside the <head> element,
and are typically used to specify character set, page
description, keywords, author of the document, and
viewport settings.
• Metadata is used by browsers (how to display
content or reload page), search engines (keywords),
and other web services.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content=“ajiet">
<meta name="keywords" content=“department">
<meta name=“college name” content=“ajiet”>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>All meta information goes in the head section...</p>
</body>
</html>
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_meta
 HTML Links - Hyperlinks
• You can click on a link and jump to another
document.
• The term “hyper” means beyond and “link” means
connection
• Whichever text helps in navigation is called hypertext
• Hyperlinks can be created using (anchor tag)
• The attribute that should be used for is href
• Syntax: <a href="url">link text</a>
• https://www.w3schools.com/html/tryit.asp?filename
=tryhtml_links_w3schools
 Images
The <img> tag has two required attributes:

• src - Specifies the path to the image

• alt - Specifies an alternate text for the image
Syntax:<img src="url" alt="alternatetext">

The src Attribute

• The required src attribute specifies the path (URL) to the image.
• Example:https
://www.w3schools.com/html/tryit.asp?filename=tryhtml_imag
es_alt_chania
 The alt Attribute
• The required alt attribute provides an
alternate text for an image,
Example:
• https://www.w3schools.com/html/tryit.asp?fil
ename=tryhtml_images_attributes
 HTML Lists
Unordered HTML List
• An unordered list starts with the <ul> tag.
Each list item starts with the <li> tag.
• The list items will be marked with bullets
(small black circles) by default:
Example:
• https://www.w3schools.com/html/tryit.asp?fil
ename=tryhtml_lists_unordered
 Ordered HTML List
• An ordered list starts with the <ol> tag. Each
list item starts with the <li> tag.
• The list items will be marked with numbers by
default:
• example
• https://www.w3schools.com/html/tryit.asp?fil
ename=tryhtml_lists_ordered
 HTML Description Lists
• HTML also supports description lists.
• A description list is a list of terms, with a
description of each term.
• The <dl> tag defines the description list,
the <dt> tag defines the term (name), and
the <dd> tag describes each term:
• https://www.w3schools.com/html/tryit.asp?file
name=tryhtml_lists_description
Extra examples:
• https://www.w3schools.com/html/html_lists.as
 Table
• The <table> tag defines an HTML table.
• An HTML table consists of one <table> element
and one or more <tr>, <th>, and <td> elements.
• The <tr> element defines a table row, the <th>
element defines a table header, and the <td>
element defines a table cell.
• An HTML table may also include <caption>, <
colgroup>, <thead>, <tfoot>, and <tbody>
elements.
 Table
<!DOCTYPE html>
<html>
<head>
<h1>The table element</h1>
</head>
<body>
<h2> <table align="center" border="10" cellspacing="10" cellpadding="10"></h2>
<tr>
<th>Sl.no</th>
<th>Name</th>
<th>Roll number</th>
<th>Address</th>
</tr>

<tr>
<td><center>01</center></td>
<td bgcolor="red">Shree</td>
<td>MCA001</td>
<td>Mangalore</td>
</tr>

<tr>
<td><center>02</center></td>
<td bgcolor="green">Ram</td>
<td>MCA003</td>
<td>Banglore</td>
</tr>

<tr>
<td><center>03</center></td>
<td bgcolor="pink">Kishna</td>
<td>MCA003</td>
<td>Mysure</td>
</tr>
</body>
<!DOCTYPE html>
<html>
<head>
<h1>The table element</h1>
</head>
<body>
<caption>student Details</caption>
<h2> <table align="center" border="10" cellspacing="10" cellpadding="10"></h2>
<col span="1" style="background-color:red">
<col style="background-color:yellow">
<col style="background-color:green">
<col style="background-color:pink">
<tr>
<th>Sl.no</th>
<th>Name</th>
<th>Roll number</th>
<th>Address</th>
</tr>
<tr>
<td><center>03</center></td>
<td>Kishna</td>
<td>MCA003</td>
<td>Mysure</td>
</tr>
</body>
</html>
 Progress
• The <progress> tag represents the completion
progress of a task.
• Attribute
 Example
<!DOCTYPE html>
<html>
<body>

<h1>The progress element</h1>

<label for="file">Downloading progress:</label>

<progress id="file" value="40" max="50"> 40% </progress>

</body>
</html>
 Media Tags
• The media attribute specifies what
media/device the linked document is
optimized for.
• This attribute is used to specify that the target
URL is designed for special devices (like
iPhone) , speech or print media.
• This attribute can accept several values.
 Media Tag Applies to
• The media attribute can be used on the
following elements:
1. A link with a media attribute: Example
2. An image map, with a clickable area: Example
3. Link Example: Two different style sheets for
two different media types (screen and print)
4. Source Example :Use of the media attribute
5. Style Example: Specify the style to use for print
 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 <source> tag is used to specify multiple media resources
for media elements, such as <video>, <audio>, and <picture>.
• The text between the <video> and </video> tags will only be
displayed in browsers that do not support the <video>
element.
• There are three supported video formats in HTML: MP4,
WebM, and OGG.
 Audio tag
• The <audio> tag is used to embed sound content in
a document, such as music or other audio streams.
• The <audio> tag contains one or more <source>
tags with different audio sources. The browser will
choose the first source it supports.
• The text between the <audio> and </audio> tags
will only be displayed in browsers that do not
support the <audio> element.
 Forms
• The <form> Element
• The HTML <form> element is used to create
an HTML form for user input:
• The <form> element is a container for
different types of input elements, such as: text
fields, checkboxes, radio buttons, submit
buttons, etc.
 The <input> Element
• The HTML <input> element is the most used
form element.
• An <input> element can be displayed in many
ways, depending on the type attribute.
 Text Fields
• The <input type="text"> defines a single-line input field for text
input.
Example:

<h2>Text input fields</h2>

<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
Example:
<!DOCTYPE html>
<html>
<body>

<h2>HTML Forms</h2>

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value=" "><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value=" "><br><br>
<input type="submit" value="Submit">
</form>

<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>

</body>
</html>
 The <label> Element
• The <label> tag defines a label for many form
elements.
• The <label> element is useful for screen-
reader users.
 Radio Buttons
• The <input type="radio"> defines a radio button.
• Radio buttons let a user select ONE of a limited number of choices.

Example:
<h2>Radio Buttons</h2>

<p>Choose your favorite Web language:</p>

<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
 Checkboxes
• The <input type="checkbox"> defines a checkbox.
• Checkboxes let a user select ZERO or MORE options of a limited number of
choices.

Example:
<h2>Checkboxes</h2>
<p>The <strong>input type="checkbox"</strong> defines a checkbox:</p>
<form action="/action_page.php">
<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><br><br>
<input type="submit" value="Submit">
</form>
 The Submit Button
• The <input type="submit"> defines a button
for submitting the form data to a form-
handler.
• The form-handler is typically a file on the
server with a script for processing input data.
• The form-handler is specified in the
form's action attribute.
 Example
<h2>HTML Forms</h2>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname"
value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
<p>If you click the "Submit" button, the form-data will be sent to a
page called "/action_page.php".</p>
 <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.
• To create a menu item<select>tag is used. And to
insert the item in the menu<option> tag.
• 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.
 Example
<h1>The optgroup element</h1>

<p>The optgroup tag is used to group related options in a drop-down list:</p>

<form action="/action_page.php">
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
<br><br>
<input type="submit" value="Submit">
</form>
 Text area
• The <textarea> tag defines a multi-line text input control.
• The <textarea> element is often used in a form, to collect
user inputs like comments or reviews.
• A text area can hold an unlimited number of characters,
and the text renders in a fixed-width font (usually
Courier).
• The size of a text area is specified by
the cols and rows attributes (or with CSS).
• The id attribute is needed to associate the text area with
a label.
 Example
<h1>The textarea element</h1>

<form action="/action_page.php">
<p><label for="hi">Text area element</label></p>
<textarea id="hi" name="w3review" rows="4" cols="50">welcome to ajiet.
and here web technology class is going on</textarea>
<br>
<input type="submit" value="Submit">
</form>

<p>Click the "Submit" button and the form-data will be sent to a page on
the
server called "action_page.php".</p>
 Form action attribute
• The form action attribute specifies where to send the
form-data when a form is submitted.
• This attribute overrides the form's action attribute.
 example
<!DOCTYPE html>
<html>
<body>

<h1>The button formaction attribute</h1>

<form action="/action_page.php" method="get">

<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<button type="submit">Submit</button>
<input type="reset" value="reset"/>
</form>

</body>
</html>
<!DOCTYPE html> Registration form

<body><head>
<title> Complete Form</title>
</head>
<body><h1>Registration Form</h1>
<form action="">
<p><label>Enter your email id:
<input type="text"name="myname"size="24"maxlength="25"/>
</label></p>
<p>
<label>Enter the password:
<input type="password"name="mypass"size="20"maxlength="20"/>
</label>
</p>
<p>Sex</p>
<p><label><input type="radio" name="act"value="one"/>Male</label>
<label><input type="radio" name="act"value="two"/>Female</label></p>
<p>Whichof the following Accounts do you have?</p>
<p><label><input type="checkbox" name="act"value="one"/>Gmail</label>
<label><input type="checkbox" name="act"value="two"/>Facebook</label>
<label><input type="checkbox" name="act"value="three"/>Twitter</label>
<label><input type="checkbox" name="act"value="four"/>Google+</label></p>
<p>AnySuggestions?</p>
<p><textarea name="feedback"rows="5"cols="100">
</textarea>
</p><p>Click on Submit if you want to register</p>
<p><input type="SUBMIT"value="SUBMIT"/>
 example
<html>
<head>
<title>To Demonstrate Horizontal Frames using rows
Attribute</title>
</head>
<frame setrows="*,*">
<frame src="C:\Users\USER\Desktop\1.jpg"/>
<frame src="C:\Users\USER\Desktop\1.jpg"/>
</frameset>
</html>
 Frames

• The browser window can be used to display more than one

document at a time. The window can be divided into rectangular
areas, each of which is a frame. Each frame is capable of displaying
its own document.
Framesets:
• The number of frames and their layout in the browser window are
specified with the <frameset>tag.
• A frameset element takes the place of the body element in a
document. A document has either a body or a frameset but cannot
have both.
• The<frameset>tag must have either arrows or a cols attribute.(or
both)
• To create horizontal frames, rows attribute is used.
• To create vertical frames, cols attribute is used.
 example
<html>
<head>
<title>To Demonstrate Horizontal Frames using rows
Attribute</title>
</head>
<frame setcols=“50%,40%",
<frame src="C:\Users\USER\Desktop\1.jpg"/>
<frame src="C:\Users\USER\Desktop\1.jpg"/>
</frameset>
</html>