MODULE 1

Introduction to web technologies

Internet and web
 Internet is a worldwide system of interconnected computer networks; these network
uses standard transmission protocol(TCP/IP) to share information across the world.
Web technologies
 Web technologies refers to “the way computer devices communicate each other” and
allow us to develop web applications with the help of predefined set of classes, objects,
methods, and properties available in markup language, style sheet language or programming
language.

Common web technologies to develop websites are as follows:

1. HTML
2. Java script
3. CSS
4. XML
5. XHTML
6. AJAX
7. ASP.NET
8. PHP

HTML -
• It is a markup language commonly used to create webpages
• It describes the structure of the webpage
• HTML is developed and maintained by world wide web consortium(W3C).
• It is derived from a more general markup language called Standard Generalized Markup
Language(SGML), which is an International Organization for Standardization (ISO) technology
that defines markup language.
• In HTML, HyperText simply means "Text within Text." A text has a link within it, is a
hypertext. Markup language: A markup language is a computer language that is used to apply
layout and formatting conventions to a text document.
• In HTML, the term hyper signifies the navigation from one location to another in a non linear
fashion. In other words, clicking a hypertext on a Web page takes you to the relevant page on
the Website or Internet, which is not necessarily the next page on the Website.
• HTML5 is the latest version of HTML, which was released in October 2009. HTML introduces a
number of new elements and attributes, such as AUDIO, VIDEO, and contentEditable, which
allow you to create more interactive Web applications and websites.

JavaScript -it is an object-oriented scripting language used to design interactive websites.

JavaScript is used to create client-side dynamic pages.

Example <script>
document.write("Hello JavaScript by JavaScript");
</script>

CSS -

 CSS stands for Cascading Style Sheet, which describes the appearance and formatting of a
web document, and how HTML elements are to be displayed on screen.

• CSS is used to design HTML tags.

• CSS is a widely used language on the web.
• HTML, CSS and JavaScript are used for web designing. It helps the web designers to apply style on
HTML tags.

XML(eXtensible Markup Language.) is a markup language based on simple and platform-

independent rules for processing and displaying textual information in a structured way.
XML has been used to develop Web documents performing various operations, such as
configuration information, publishing, Electronic Data Interchange (EDI), voicemail systems,
Remote Method Invocation(RMI) and much more.

XHTML it is a standard markup language for displaying web applications. It combines the
features of HTML and XML., and considered as a restrictive subset of SGML. XML is used to
describe data, while HTML is used to display data; therefore, their combination is a powerful
language.
It defines various types of modules, such as text and hypertext.

AJAX(Asynchronous JavaScript And XML.)

 It is a set of several technologies that help you to develop Web applications with better
user experience.
 It uses JavaScript and XML as the main technologies for developing interactive Web
applications.
 These applications are based on the AJAX Web application model, which uses JavaScript
and the XMLHttpRequest object for asynchronous data exchange.
 AJAX makes the request-response cycle of the client and server fast by updating the parts
of a Web page, without reloading the whole page.
 It works by creating an instance of the XMLHttpRequest object and sending an
HttpRequest request. This request passes over the Internet to a web server. The server
processes the HttpRequest request, creates a response, and sends the data back to the
Web browser over the internet. The Web browser processes the received data by using
JavaScript and updates the data of the Web page.

ASP.NET –
 It is a web development model, which is used to deliver interactive and data-driven web
applications over the internet.
 It consists of large number of controls such as, text boxes, buttons and labels for
assembling , configuring and manipulating code to create HTML pages.

PHP it is scripting language used to create dynamic web pages. It is an interpreted language
that is executed on server side.
 It can be deployed on any Web server, operating system or platform, such as
Windows, UNIX and Linux and supporst various databases, such as MySQL,
Oracle, Informix.
 In an HTML page the PHP code is enclosed within special PHP tag, <? php, and ?>.

Web Services (application services) these are multiplatform application components

designed to integrate with a web application over a network.

Structuring of an HTML document -

An HTML document is created by using elements and attributes and has the .html extension.
The content is displayed on the browser according to the properties and behaviors defined by the
element and attributes.
 The Basic structure has the following sections :
• Elements and attributes
• tag
• The DOCTYPE element

Elements and attributes :

 Elements are the building blocks of an HTML document
 An element provides instruction to a web browser, specifying how to display the HTML
document
 Elements are represented by tags that uses <,/, and > symbols. Most elements have an opening
tags (<element-name>), and closing tags(</element-name>) these are called starting & ending
tags,
 Syntax:
<element-name attributes-name=“attribute-value”> content </element-name>

Attributes: these are used to provide additional information about the properties and
behavior of HTML elements.
Tags : HTML elements are represented by an opening and closing tag using <and> sign. The
closing tags are written as </name of the tag>
Elements are divided into two categories :
 Container elements : it contains text or other tags ; it has both opening and closing tag
example : <title> container element </title>
 Empty elements : they do not have any content they are used for inserting a line break
or an image.
Example :<BR/>, <HR/>,<link>

<!DOCTYPE html>
<html>
<body>
<p>This is a <br> paragraph with a line break.</p>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
 <p>This is a paragraph <hr> with a line break.</p>
</body>
</html>

The DOCTYPE Element :

 It provides the Document Type Definition Declaration, for browsers to specify which
version of the markup language is used in the HTML document.
 The DOCTYPE contains ! character to indicate that the DOCTYPE element is an SGML
declaration and not html tag.
<!DOCTYPE HTML>
<HTML>
<HEAD> <TITLE>
…….. Title here…….
</TITLE>
</HEAD>
<BODY> ……content here
</BODY>
</HTML>

Understanding elements
The structure of an html element consists of three basic components:

• opening tag

• closing tag

• content of the element enclosed b/w opening & closing tag

<p>Here is the paragraph</p>

HTML elements are categorized into

1) Root 5) Flow
2) Metadata 6) Phrasing
3) Section 7) Embedded
4) Heading 8) Interactive
1. Root :
This represents the main or the starting element that should be present in all the HTML
documents.
The HTML element is the first element that comes after the <! DOCTYPE> element & within which
other HTML elements are specified. This element allows the browser to identify the document type.

Attributes Values Description

Class Class Specifies the class for an element in an

name HTML document
Id unique Specifies a unique alphanumeric
-id identifier for an element
Title Text Specifies the title of an HTML
document

2. Metadata Elements -
These are used to set the presentation or behavior of the remaining content of a document.
The elements can also be used to set a relationship of a document with other documents.

List of metadata elements -

1. TITLE-
It contains title of the element, which appears on the title bar of the web browser. It is used by
the search engine to select the document & display it in the search result.
Each HEAD element should contain a TITLE element

Attributes Description
Class Specifies the class of an element in an HTML document

Id Specifies a unique alphanumeric identifier for an element

Lang Specifies the language used by an element

Style specifies an inline style to render an element in the document

 EXAMPLE:
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
</html>

2. BASE-
It is used to specify a default URL and target for all the links in an HTML document. You can set
a base URL for all the links once at the top of the document by using the BASE element. This
element appears within the HEAD element of the document & should be used as the first
element in the HEAD element.
Attributes Description
Href Specifies a URL in an HTML document

Target Specifies the locations where the links of an HTML document open. The
following are the four possible values of the target attribute:
 _blank : Opens the link in a new window.
 _parent : Opens the link in the same frame the link is clicked.
 _self : Opens the link in the present framework.
 _top : Opens the link in the same window.
 <framework> : Opens the link in the respective frame.

<!DOCTYPE HTML>
<HTML>
<HEAD>
<BASE href= “url” target=“value”/>
</HEAD>
</HTML>

The <a> tag defines a hyperlink, which is used to link from one page to another. The
most important attribute of the <a> element is the href attribute, which indicates the link's
destination.
 <!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<base href="https://en.wikipedia.org/wiki/" target="_blank”/>
</head>
<body>
<h1>Welcome Programmers</h1>
<p> attributes of the base element</p>
<a href="HTML_attribute">click here</a> <br />
</body>
</html>

3. LINK -
It is used to link an HTML document to other HTML documents.
It defines relationship between 2 different html documents.
It contains href attribute to specify the destination URL of a link. The href attribute is a
required attribute that must have a valid URL. If this attribute is not specified, then the LINK
element does not define a link.
The LINK element also contains rel attribute that defines the relationship of the linked
documents. This attribute is also a required attribute and must have a valid value.
Attributes Values Description

Href URL Specifies the target URL you navigate to after clicking a
link
Rel Alternate, Specifies the relationship between the HTML document
author, and thetarget URL or another HTML document
first,index,next

<!DOCTYPE html>
<html>
<head>
<link href="styles.css" rel="stylesheet" > <!--linking css file-->
</head>
 <body><h1>Hello World!</h1>
<h2>linked style sheet.</h2>
<p>paragraph here</p>
</body></html>
Css file– (style.css)
*{
display: block; font-size: 20px;
}
h1 {
background-color: #05c46b;
font-family: Verdana;text-align: center;
}

NOTE - In HTML, px stands for "pixel" and is a unit of measurement used to specify the
size of elements on a webpage.

HTML LINKS -EX:

<!DOCTYPE html>
<html>
<body><h1>HTML Links</h1>
<p>
<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>
</p>
</body>
</html>

4. META element-
The META element is used to provide information about an HTML document, such as
page description and keywords. This element appears inside the HEAD element & has
five attributes : charset, content, http-equiv, name and scheme, from which only
content is a required attribute.
Metadata will not be displayed on the page, but is machine parsable.
Metadata is used by browsers (how to display content or reload page), search engines
(keywords), and other web services.

Attribute Value Description

charset Character_set Specifies the character encoding for the
 HTML document

content Text Specifies the value associated with the

http-equiv or name attribute

http-equiv content-security-policy Provides an HTTP header for
the information/value of the contentattribute
name application-name Specifies a name for the metadata

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content=“web class">
<meta name="keywords" content="HTML, CSS, XML, JavaScript">
<meta name="author" content=“author1">
<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>

5. The COMMAND Element-

HTML <command> tag support following specific attributes. It is used to execute a
command when an event is fired by a form control, such as radio button or checkbox. You can
use the COMMAND element with the context menu or toolbar.

Attributes Value Description

Type (default) command, Defined type of command.Default value

command.
checkbox ,radio
Checked [Empty string],checked Define the command is checked when
first time load.
 Label Name Define the command name.
Icon url Define the command like image icon attach.
Radiogroup Name Define the command name radio group.

<!DOCTYPE html>
<html>
<head>
<h1>Hello</h1>
</head>
<body>
<menu label="cars">
<command type="radio" radiogroup="cars" label="Ferrari"/>
<command type="radio" radiogroup="cars" label="Lamborgini"/>
</menu>
</body>
</html>

6. NOSCRIPT -
The <noscript> tag defines an alternate content to be displayed to users that have
disabled scripts in their browser or have a browser that doesn't support script.
The <noscript> element can be used in both <head> and <body>. When used inside
<head>,the <noscript> element could only contain <link>, <style>, and <meta>
elements.

7. SCRIPT-
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.

<!DOCTYPE html>
<html>
<body>
<h1> noscript element </h1>
<p>A browser with JavaScript disabled will show the text inside the noscript
element("Hello World!" will not be displayed).
 </p>
<script>
document.write("Hello World!")
</script>
<noscript>browser does not support JavaScript!</noscript>
</body>
</html>

Attributes of script
Attribute Value Description

Charset Charset Specifies the character encoding used in the script

Src URL Specifies the URL of a file that contains the script

<!DOCTYPE html>
<html>
<body>
<h1>The script element</h1>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
</body>
</html>
The innerHTML property sets or returns the HTML content (inner HTML) of an element.

8. STYLE:
The <style> tag is used to define style information (CSS) for a document
It is used to declare the style sheets within the HTML document.
It has 3 attributes: type, media, scoped.

<!DOCTYPE html>
<html>
<head>
<style>
h1 {color: red;}
 p {color:blue;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Attributes of Style element

Attribute Value Description

Media media_query Specifies what media/device the media resource is optimized for

Type text/css Specifies the media type of the <style> tag

Scoped Scoped Specifies the style elements, that is the parentelement and its
child elements

3. SECTION -
These are used to define the scope of header, footer and various other sections of
an HTML document like -

a) <BODY> which contains the main content of the document, it includes texts,
hyperlinks,images, and lists.

b) <SECTION>it is used to represent the generic section of an HTML document

c) <nav> it is used to navigate from one HTML page to another. It displays a group of
links on an HTML document and to go to particular page we can click the link
associated with that page.

d) <ARTICLE> it used to represent a section that contains the information about an html
page, such as title and date of its creation.

e) <ASIDE> allows you to create a section that is used to display information

about the content of other elements, such as time and date, current news and weather
report.

f) <HEADER> used to provide the introductory content on an HTML element can

contain headings, paragraphs, links, & other content

g) <FOOTER> used to represent the footer, which contains information such as

 links andcopyright data related to a document or section of the document

h) <ADDRESS> it is used to display the contact information (document’s owner, email

addressfor feedback, postal address etc) for a document or part of a document.

<!DOCTYPE html>
<html>
<body>
<section>
<h1>section content</h1>
</section>
<nav>
<h1>navigation content</h1>
<a href="a.html">articles</a>
</nav>
<aside style="float:right;width:100px;">
<p> this is the aside attribute</p>
</aside>
<article>
<header>
<h1>A heading here</h1>
<p>Posted by John Doe</p>
<p>Some additional information here</p>
</header>
<p>Lorem Ipsum dolor set amet....</p>
<address>
<p>name: aaaa</p>
</addres>
<footer>
<p>copyright @ 2022</p>
</footer>
</article>
</body>
</html>
 4. Heading -
It is used to create headlines of text
A heading element is defined as <Hn>, where n is 1 to 6
<!DOCTYPE html>
<html>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>

5. Flow it is used in the body of HTML document or applications. Elements of HTML that
are used to display different types of content, such as plain text, links, images in the
HTML document.
6. Phrasing used to represent the text of the HTML document <audio>, <button>, <br>
7. Embedded used to import content from other sources into the HTML document
<video>,<img>, <iframe>
8. Interactive these for user interaction. <audio>, <video>, <img>

HTML FORMATTING ELEMENTS:

Formatting elements are grouped into two categories:
a) Physical elements
b) Logical elements
Physical elements
 HTML uses physical style elements to change the appearance of text such as
bold, italic, small font etc
List of physical style elements in HTML –
 The B Element- Displays the text in bold.
 The I Element- Displays the text in italic.
 The SMALL Element- Displays the text in small font.
 The SUB Element- Displays the text in subscript.
 The SUP Element- Displays the text in superscript.
<html>
<head>
<title> physical elements</title>
</head>
<body>
<b>displaying bold text</b><br/>
<i>displaying italic text</i><br/>
<small>this is the small text</small><br/>
<p>chemical formula of water H₂O</p>
<p>(a+b)² </p>
<p>this is the example of <strong> the strong element </strong></P>
<p> the mark element is used to <mark> highlight the text</mark> in an HTML document</p>
</body>
</html>

Logical elements –
Logical elements in HTML, also known as semantic or idiomatic tags. Logical tags are used to
tell the browser what kind of text is written inside the tags. They are different from physical
tags because physical tags are used to decide the appearance of the text and do not provide any
information about the text.
Some cases when we could use logical tags are:
 When we want to write code on our website.
 When we want to Emphasize some text.
 When we want to display the abbreviation on the Web page.
 When we want to display some famous quotation on our web page.
 When we want to write some mathematical formula in terms of variables.

Tag Description

<abbr> Defines the abbreviation of text.

<address> contact information of a person or an organization.

<cite> Defines citation. It displays the text in italic format.

<code> Defines the piece of computer code.

 Tag Description

<blockquote> Defines a long quotation.

Defines the deleted text and is used to mark a portion of text which has been deleted
<del> from the document.

Defines the definition element and is used to representing a defining instance in

<dfn> HTML.

<ins> Defines inserted text.

<kbd> Defines keyboard input text.

<samp> Defines the sample output text from a computer program.

<strong> Defines strong text i.e. show the importance of the text.

Citation definition quotation and comments

<!DOCTYPE html>
<html>
<body>
<! -- Write your comments here -->
<p> <b>citation</b></p>
<p>Browsers usually display cite elements in italic. < /p>
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
<p> <b>quotation</b></p>
<p>WWF's goal is to: <q> Build a future where people live in harmony with nature
</q></p>
<p> <b>abbreviation</b></p>
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in
1948.</p>
<p> <b>address</b></p>
<address>
article is Written by <br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
 USA
</address>
<p> <b>bidirectional override</b></p>
<bdo dir="rtl">W E B</bdo>
</body>
</html>

All HTML elements can have attributes.

The href attribute of <a> specifies the URL of the page the link goes to.
The src attribute of <img> specifies the path to the image to be displayed.
The width and height attributes of <img> provide size information for images.
The alt attribute of <img> provides an alternate text for an image.
The style attribute is used to add styles to an element, such as color, font, size, and more.
The lang attribute of the <html> tag declares the language of the Web page.
The title attribute defines some extra information about an element.

<!DOCTYPE html>
<html>
<body>
<img src="img_typo.jpg" alt="Girl with a jacket">
<p>If we try to display an image that does not exist, the value of the alt attribute will be
displayed instead. </p>
</body>
</html>

Background color and text color

<!DOCTYPE html>
<html>
<body style="background-color:blue;"> ( for background)
<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am big</p>
</body>
</html>
 Tags Meaning Purpose

Bold increases the importance of the text because bold tag convert the text
<b> Bold
into bold size.

<i> Italic An Italic tag is used to define a text with a special meaning.

<u> Underline It is used to underline the text.

Big tag increase the font size by 1 (Note: You can not use the big tag in
<big> Big
HTML 5)

<small> Small A small tag defines the small text, and it is used while writing copyright.

<sub> Subscript The subscript is used for alternate baseline.

<sup> Superscript Superscript is usually used for showing elements above base-line

Strike-
<strike> It is an editing markup that tells the reader to ignore the text passage.
through

<tt> Teletype text Teletype text gives the default font-family which is monospace.