Internet

Internet began as a research network funded by Advanced Research Projects Agency (ARPA) of the US
Defense department, when the first node of the ARPANET was installed at the University of California at
Los Angeles in Sept‟ 1969.

The various services provides on the internet are: ftp, telnet, www, http/https, smtp, pop, imap, dns, etc.
Each internet service is implemented on an internet server via dedicated software known as “daemon”.

In 1983, DNS (domain name system) was developed to rationally assign names and addresses to
computers linked to the internet e.g. gmail.com.

URL (uniform resource locator) was standardized in 1994 to uniquely identify documents on the internet.
The format of the URL is as follows:
protocol://server.subDomain.domainName.topLevelDomain/directory/filename.filetype
e.g. http://www/ieee.msit.in/events/seminar.html
# URI (I:Identifier) = URL and URN; URN (N:Name) is URL without any protocol.

The “world wide web” started in 1989 at CERN, Geneva Switzerland. CERN stands for Couseil European
pour la Recherche Nucleaire (European Organization for Nuclear Research).
Tim-Berners Lee is known as “Father of www”.
Tim-Berners Lee wanted to develop a hypertext (text linked to a resource) system in order to enable
information sharing among geographically separated teams of researchers in a more efficient and easy
manner. The main purpose for which www was designed to deliver are:
i. Linking a multiplicity of documents located on computers within internet.
ii. Making retrieval of documents quick and easy.
iii. One of the original purpose of the web was to disseminate research for academic use.
iv. The main use of the web now is for entertainment and business purpose.
Tools for www: web server (Apache HTTP Server / Microsoft’s IIS i.e. Internet Information
Services / nginx / GWS (Google Web Server) / LiteSpeed), browser, plugin, search engines.

www makes use of http (hypertext transfer protocol) to transfer hypertext.

The standard ports for HTTP connections are 80 and 8080.
HTTP defines methods to indicate the desired action to be performed on the identified resource. The two
most used methods of HTTP are GET and POST used to send messages to server.
GET sends message as a part of URL, therefore is fast but less secure, used for small messages.
POST sends message as data packets, used for medium-large messages, more secure.
GET is used for fetching documents; POST used for updating data, sending login info, etc.
DELETE removes a file from the server.
HTTPS = HTTP over SSL (Secure Socket Layer), port 443.

Users typically use a program that uses SMTP for sending e-mail and either POP3 or IMAP for
receiving e-mail. POP creates local copies of e-mails and deletes original from the server. IMAP keeps
mail on remote e-mail server and allows you to view your mail from more than one place.

To identify the nature of data transmitted, the internet uses a standard list of filename extensions called
Multipurpose Internet Mail Extensions (MIME) e.g. jpg, mpg, etc.
SGML (Standard Generalized Markup Language) is a standard for defining generalized
markup languages for documents, developed by ISO in 1986.
The derivatives of SGML are HTML, XML and WML.

HTML was developed by W3C (WWW Consortium) in 1993 as a markup language for
hypertext documents.

Extensible Markup Language (XML) is a markup language that defines a set of rules for
encoding documents in a format that is both human-readable and machine-readable; developed
by W3C in 1996. XML was designed to store and transport data.

Wireless Markup Language (WML), based on XML, is a markup language intended for
devices that implement the Wireless Application Protocol (WAP) specification, such as mobile
phones. It provides navigational support, data input, hyperlinks, text and image presentation, and
forms, much like HTML (HyperText Markup Language).

XML and HTML were designed with different goals:

● XML was designed to carry data - with focus on what data is
● HTML was designed to display data - with focus on how data looks
● XML tags are not predefined like HTML tags are
 HTML
HTML DOM (Document Object Model).

Contents of <head>
<title> is for title of html page
<style> is for internal CSS
<link> is for external CSS
<script> for script file e.g. JavaScript file,
<base> for base URL
<meta name=“keywords” contents=“HTML,CSS,XML,JavaScript”>
<meta name=“author” contents=“Tim”>
<meta name=“description” contents=“Web Engineering Tutorial”>
<meta charset="UTF-8">

<body background=“a.jpg” bgcolor=“blue” text=“red”>

Contents of body
Heading tags: <h1>heading1</h1> <h6>heading6</h6>
Text Formatting tags: <b>boldtext</b> <u>underlinedtext</u> <i>italictext</i>
Empty tags: LineBreak<br> Horizontal Rule<hr>
Paragraph: <p style="background-color:Tomato;"></p>

A <span> element used to color a part of a text:

<p>My mother has <span style="color:blue">blue</span> eyes.</p>

A <div> section in a document that will be displayed in blue:

<div style="color:#0000FF">
<h3>This is a heading</h3><p>This is a paragraph.</p>
</div>
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
<img src="pulpitrock.jpg" alt="Mountain View" width="500" height="377">

<ol type=“1”>
Ordered List. Value of type can be “1” (default) or “A” or “a” or “I” or “I”
<li>item1</li>
<li>item2</li>
</ol>

<ul type=“1” style="list-style-type:disc">

Unordered List. Value of list-style-type can be “disc” (default) or “circle” or “square” or “none”.
<li>item1</li>
<li>item2</li>
</ul>

<table width=“100%” align=“center” border=“1” cellpadding=“10”>

<caption>Table1</caption>
<th><td>Name</td><td>Age</td></th>
<tr><td>Ravi</td><td>20</td></tr>
<tr><td>Aditya</td><td>21</td></tr>
</table>

<frameset cols=”25%,50%,25%”>
<frame name=“left” src=“a.html”>
<frame name=“left” src=“b.html”>
<frame name=“left” src=“c.html”>
</frameset>

<form>
<input type=“text” name=“t1”>
<input type=“password” name=“p1”>
<input type=“submit” name=“s1”>
<input type=“reset” name=“r1”>
<input type=“button” onclick=“alert(„Hello World!‟)” value=“Click Me!”>
<input type=“radio” name=“gender” value=“male” checked>Male
<input type=“checkbox” name=“vehicle” value=“bike” checked>Bike
<select name=“cars”>
<option value=“volvo”>Volvo</option>
<option value=“fiat”>Fiat</option>
</select>
<textarea name=“message” rows=“10” cols=“30”> This is text area. </textarea>
<button type=“button” onclick=“alert(„Hello World!‟)”>“Click Me!”</button>
</form>
 CSS
CSS stands for Cascading Style Sheets.
CSS describes how HTML elements are to be displayed on screen, paper, or in other media.
CSS saves a lot of work. It can control the layout of multiple web pages all at once.

CSS components: selector{declaration-block} e.g. h1{color:blue; font-size:12px;}.

The declaration block consists of property and its value, separated by semi-colons.

CSS can be added to HTML elements in 3 ways:

Inline - by using the style attribute in HTML elements
Internal - by using a <style> element in the <head> section
External - by using an external CSS file

Inline CSS: <h1 style="color:blue;">This is a Blue Heading</h1>

Internal CSS:
<html><head><style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style></head><body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

External CSS:

<html><head><link rel="stylesheet" href="styles.css"></head>

<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

styles.css
body { background-color: powderblue; }
h1 { color: blue; }
p { color: red; }
CSS selectors
● Element selector e.g. div{color:blue;}, p{font-size:18px;}
● Group selector e.g. div, p { font-size : 18px; }
● ID selector e.g. #para1{text-align:center;color:red;} <p id=“para1”>Text</p>
● Class selector e.g. .center{text-align:center;color:red;}
<h1 class=“center”>Text1</h1> <p class=“center”>Text2</h1>

CSS Box Model

All HTML elements can be considered as boxes. In CSS, the term "box model" is used when
talking about design and layout.
The CSS box model is essentially a box that wraps around every HTML element. It consists of:
margins (outermost), borders, padding, and the actual content (innermost).

Explanation of the different parts:

● Content - The content of the box, where text and images appear
● Padding - Clears an area around the content. The padding is transparent
● Border - A border that goes around the padding and content
● Margin - Clears an area outside the border. The margin is transparent
The box model allows us to add a border around elements, and to define space between
elements.
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
</style>
</head>
<body>
<h2>Demonstrating the Box Model</h2>
<p>The CSS box model is essentially a box that wraps around every HTML element. It consists
of: borders, padding, margins, and the actual content.</p>
<div>This text is the actual content of the box. We have added a 25px padding, 25px margin and
a 25px green border. </div>
</body>
</html>
 XML

Figure 1 XML DOM

XML tags identify the data and are used to store and organize the data, rather than specifying
how to display it like HTML tags, which are used to display the data.
XML tags are user-defined. XML tags are case-sensitive. XML tags must be closed in an
appropriate order.

An XML document is a basic unit of XML information composed of elements and other markup
in an orderly package.
A simple document is shown in the following example:
<?xml version = "1.0"?>
<contact-info>
<name>Tanmay Patil</name>
<company>TutorialsPoint</company>
<phone>(011) 123-4567</phone>
</contact-info>
XML declaration contains details that prepare an XML processor to parse the XML document.
It is optional, but when used, it must appear in the first line of the XML document.
<?xml
version = "version_number"
encoding = "encoding_declaration"
standalone = "standalone_status"
?>
<?xml version = "1.0" encoding = "UTF-8" standalone = "no" ?>
<?xml version = '1.0' encoding = 'iso-8859-1' standalone = 'no' ?>
Parameter “standalone” informs the parser whether the document relies on the information from
an external source, such as external document type definition (DTD), for its content. The default
value is set to no. Setting it to yes tells the processor there are no external declarations required
for parsing the document.
There are two current versions of XML. The first (XML 1.0) was initially defined in 1998. The
second (XML 1.1) was initially published on February 4, 2004. XML 1.1 is not very widely
implemented.

<?xml version="1.0"?>
<catalog>
<book id="bk101">
<author>Gambardella, Matthew</author>
<title>XML Developer's Guide</title>
<price>44.95</price>
<publish_date>2000-10-01</publish_date>
</book>
<book id="bk112">
<author>Galos, Mike</author>
<title>Visual Studio 7: A Comprehensive Guide</title>
<price>49.95</price>
<publish_date>2001-04-16</publish_date>
</book>
</catalog>
XML DTD
The purpose of a DTD is to define the structure of an XML document. It defines the structure
with a list of legal elements. With a DTD, you can verify that the data you receive from the
outside world is valid.

<!DOCTYPE note
[
<!ELEMENT note (to,from,heading,body,footer)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT body (#PCDATA)>
<!ELEMENT footer (#PCDATA)>
<!ENTITY nbsp "&#xA0;">
<!ENTITY writer "Writer: Donald Duck.">
<!ENTITY copyright "Copyright: W3Schools.">
]>
<note>
<to>Tove</to>
<from>Jani</from>
<body>Don't forget me this weekend!</body>
<footer>&writer;&nbsp;&copyright;</footer>
</note>

!DOCTYPE note defines that the root element of the document is note
!ELEMENT note defines that the note element must contain the elements: "to, from, body,
footer"
!ELEMENT to defines the to element to be of type "#PCDATA"
An !ENTITY has three parts: an ampersand (&), an entity name, and a semicolon (;). The XML
parser replaces the entity with its value defined in the DTD.
#PCDATA means parseable text data, CDATA is non-parseable text data (ignored by parser).

XML‟s CDATA section

The term CDATA means, Character Data. By using CDATA section, you are commanding the
parser that the particular section of the document contains no markup and should be treated as
regular text.
<script>
<![CDATA[
<message> Welcome to TutorialsPoint </message>
]] >
</script >
Characters between these two enclosures are interpreted as characters, and not as markup. This
section may contain markup characters (<, >, and &), but they are ignored by the XML
processor.
 XHTML
● XHTML stands for EXtensible HyperText Markup Language
● XHTML is almost identical to HTML
● XHTML is stricter than HTML
● XHTML is HTML defined as an XML application

The most important differences b/w HTML and XHTML are:

● The XHTML must begin with DOCTYPE and xmlns declaration.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
● <html>, <head>, <title>, and <body> are mandatory
● XHTML elements must be properly nested
● XHTML elements must always be closed e.g. empty elements like <br> and <hr> should
also be closed like <b /> and <hr />
● XHTML elements must be in lowercase e.g. <p> and not <P>
● XHTML documents must have one root element
● Attribute names must be in lower case e.g. <table width=“100%”>
● Attribute values must be quoted e.g. <table width=“100%”>

XSLT (eXtensible Stylesheet Language Transformations)

With XSLT you can transform an XML document into HTML.

XSLT uses XPath to find information in an XML document.

XPath uses path expressions to select nodes in an XML document. The node is selected by
following a path or steps. The most useful path expressions are listed below:

Path Expression Result

bookstore Selects all nodes with the name "bookstore"
Selects the root element bookstore
/bookstore Note: If the path starts with a slash ( / ) it always represents an absolute
path to an element!
bookstore/book Selects all book elements that are children of bookstore
//book Selects all book elements no matter where they are in the document
Selects all book elements that are descendant of the bookstore element,
bookstore//book
no matter where they are under the bookstore element
//@lang Selects all attributes that are named lang
 XML XSLT
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>

<breakfast_menu> <html xsl:version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<food>
<name>Belgian Waffles</name> <body style="font-family:Arial;font-size:12pt;background-
<price>$5.95</price> color:#EEEEEE">
<description>Two of our famous Belgian
Waffles with plenty of real maple <xsl:for-each select="breakfast_menu/food">
syrup</description> <div style="background-color:teal;color:white;padding:4px">
<calories>650</calories> <span style="font-weight:bold"><xsl:value-of select="name"/> -
</food> </span>
<xsl:value-of select="price"/>
<food> </div>
<name>Homestyle Breakfast</name> <div style="margin-left:20px;margin-bottom:1em;font-size:10pt">
<price>$6.95</price> <p>
<description>Two eggs, bacon or sausage, <xsl:value-of select="description"/>
toast, and our ever-popular hash <span style="font-style:italic"> (<xsl:value-of select="calories"/>
browns</description> calories per serving)</span>
<calories>950</calories> </p>
</food> </div>
</xsl:for-each>
</breakfast_menu> </body>
</html>

WML
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml" >
<wml>
<card id="main" title="First Card">
<p mode="wrap">This is a sample WML page.</p>
</card>
</wml>

WMLScript is a procedural programming language and dialect of JavaScript used for WML
pages and is part of the Wireless Application Protocol (WAP).
WMLScript is a client-side scripting language and is similar to JavaScript. Just like JavaScript
WMLScript is used for tasks such as user input validation, generation of error message and other
Dialog boxes etc.

WAP tools: Nokia WAP Phone Simulator, Nokia WAP Gateway Simulator, Apache Web Server
for WAP.
 HTML5
In year 2000, the World Wide Web Consortium (W3C) recommended XHTML 1.0.
The W3C HTML5 recommendation was released 28 October 2014.
● HTML5 has reduced need for external plugins, like Flash.
● HTML5 has new form controls, like calendar, date, time, email, URL, search.
● HTML5 has new content specific elements, like article, footer, header, NAV, section.
● HTML5 has the canvas element for drawing.
● In HTML5, JS GeoLocation API helps in identifying location.
● <html>, <head>, <body> tages can be omitted.
● The attributes of <body> and <table> tags have been obsoleted and CSS styling is
recommended to format body and table. <frame> have been obsoleted as well.

<!DOCTYPE html>
<meta name=viewport” content=”width=device-width, initial-scale=1.0”>
<img src=”a.jpg” style=”width=100%;”>
<h1 style=”font-size:10vw”>Hello World!</h1>
<input type=”email” name=“email”>
<input type=”date” name=“bday”>
<input type=”search” name=“googlesearch”>