UNIT 1 (8).pptx

18IST42 – WEB TECHNOLOGY
INTRODUCTION
Prepared by,
Dr.C.R.Dhivyaa

Unit – I Introduction to Internet and HTML
Evolution of the Internet and World Wide Web– Web
Basics – Multitier Application Architecture – Client–
Side Scripting versus Server–Side Scripting –
Introduction to HTML5: Headings – Linking – Images –
Lists – Tables– Forms – Internal Linking – Meta
Elements

Evolution of the Internet and
World Wide Web

Evolution of the Internet
What is internet?(Global network of computers)
● It is a linking of many computers all over the world

EVolution of the Internet(ARPANET)
● ARPANET was the network that became the basis for the Internet.
● Implemented in late 1960’s by ARPA (Advanced Research Projects
Agency of DOD)
● In 1969, the idea became a modest reality with the interconnection of
four university computers.
● The initial purpose was to communicate with and share computer
resources among mainly scientific users at the connected institutions.
● Networked computer systems of a dozen universities and institutions
with 56KB communications lines
● Grandparent of today’s Internet
● Became clear that key benefit was allowing fast communication between
researchers – electronic-mail (email)

ARPA’s goals
● Allow multiple users to send and receive information at same time
● Network operated packet switching technique
○ Digital data sent in small packages called packets
○ Packets contained data, address info, error-control info and
sequencing info
○ Greatly reduced transmission costs of dedicated communications
lines
Network designed to be operated without centralized control
If portion of network fails, remaining portions still able to route packets

TCP/IP
● The protocol(set of rules) for communicating over the ARPANET became
known as TCP(Transmission Control Protocol)
● Ensured that messages were properly routed and that they arrived intact
● Organizations implemented own networks(Used both for intra-
organization and inter-organization communication)
Challenge-Huge variety of networking hardware and software appeared
● ARPA achieved inter-communication between all platforms with
development of the IP(internet Protocol)
● Internetworking Protocol
● Current architecture of Internet
● Combined set of protocols called TCP/IP

The Internet
● Limited to universities and research institutions
● Military became big user
● Next, government decided to access Internet for commercial purposes
Internet traffic grew
● Businesses spent heavily to improve Internet
● Better service their clients
● Fierce competition among communications carriers and hardware and
software suppliers
Result
● Bandwidth (info carrying capacity) of Internet increased tremendously
● Costs plummeted

Evolution of World Wide Web(WWW)
● The World Wide Web allows computer users to locate and view multimedia-
based documents on almost any subject over the Internet
● In 1989, Tim Berners-Lee of CERN (the European Organization for Nuclear
Research) began to develop a technology for sharing information via
hyperlinked text documents.
● Berners-Lee called his invention the HyperText Markup Language (HTML).
● He wrote the Hypertext Transfer Protocol (HTTP)—a communications
protocol used to send information over the web.
● In 1990 he introduced tools( HTTP,HTML, web browser)
first website http://info.cern.ch/

● 1993 -> Mosaic web browser(one of the first web browsers)
● 1994 -> W3C(consortium) at MIT in USA
○ The World Wide Web Consortium (W3C) is an international
community where Member organizations, a full-time staff, and the
public work together to develop Web standards(include Extensible
HyperText Markup Language (XHTML), Cascading Style Sheets
(CSS) and the Extensible Markup Language (XML))
● end of 1994(large no of websites got activated)
● 1996-1998- trade marketing started
● 1999-2000 – entrepreneurs started selling their ideas
● 2002-till – various development

URL(Uniform Resource Locator)
● Specifies the address of the web page displayed in the browser window
● Each web page on the internet is associated with a unique URL.
● URLs usually begin with http://
HTTPS
● URLs of websites that handle private information such as credit card numbers
,often begin with https://, the abbreviation for HTTPS(Hypertext Transfer
Protocol Secure)
● It is the standard for transferring encrypted data on the web
● It combines HTTP with Secure Socket Layer(SSL) and the more recent Transport
Layer Security(TLS) cryptographic schemes for securing communications and
identification information over the web.

Web 2.0
•In 1990s internet was a place mainly for viewing the required information.
(one direction)
•Then around 2004, a new web tools came up to add content to the web. The
web became a two-way communication.(read & write)
•Two-way mode is popularized as web 2.0
○ Simply retrieving the information
○ Collaborate and share information online.
○ Transition form static HTML web pages to dynamic web page

Web basics
● A web page or webpage is a document, commonly written in HTML, that is
viewed in an Internet browser.
● A web page can be accessed by entering a URL address into a browser's
address bar
● A web page may contain text, graphics, and hyperlinks to other web pages
and files.
Hyperlinks
● HTML documents normally contain hyperlinks, which, when clicked, load a
specified web document.
● Both images and text may be hyperlinked.
● Hyperlinks can reference other web pages, e-mail addresses, files and
more

URIs and URLs
● URIs (Uniform Resource Identifiers) identify resources on the Internet.
● URL standards for Uniform resource locator and it is a subset of URI or
Uniform Resource Identifier.
● URL includes location as well as the protocol to retrieve the resource
● Common URLs refer to files, directories or server-side code that
performs tasks such as database lookups, Internet searches and
business-application processing
● If you know the URL of a publicly available resource anywhere on the
web, you can enter that URL into a web browser’s address field and the
browser can access that resource.

Parts of a URL
● A URL contains information that directs a browser to the resource
that the user wishes to access.
● Web servers make such resources available to web clients.
● Popular web servers include Apache’s HTTP Server and Microsoft’s
Internet Information Services (IIS).
Example:
http://www.deitel.com/books/downloads.html

Example:
http://www.deitel.com/books/downloads.html
http://→ HyperText Transfer Protocol (HTTP)
www.deitel.com → fully qualified hostname(name of the web
server) which maintains resources
The hostname www.deitel.com is translated into an IP (Internet
Protocol) address—a numerical value that uniquely identifies the
server on the Internet.
An Internet Domain Name System (DNS) server maintains a
database of hostnames and their corresponding IP addresses and
performs the translations automatically.
/books/downloads.html→ specifies the resource’s location
(/books) and name (downloads.html) on the web server.

Making a Request and Receiving a Response
● When given a web page URL, a web browser uses HTTP to request the
web page found at that address.
● Figure 1.8 shows a web browser sending a request to a web server

The request (in its simplest form) is
GET /books/downloads.html HTTP/1.1
● The word GET is an HTTP method indicating that the client wishes to
obtain a resource from the server.
● The remainder of the request provides the path name of the resource
(e.g.,an HTML5 document) and the protocol’s name and version number
(HTTP/1.1).
Any server that understands HTTP (version 1.1) can translate this request
and respond appropriately

Figure 1.9 shows the web server responding to a request

The server first sends a line of text that indicates the HTTP version,
followed by a numeric code and a phrase describing the status of the
transaction.
For example,HTTP/1.1 200 OK indicates success,
Whereas HTTP/1.1 404 Not found informs the client that the web server
could not locate the requested resource

HTTP Headers
● The server sends one or more HTTP headers, which provide additional
information about the data that will be sent.
Content-type: text/html
● The information provided in this header specifies the Multipurpose
Internet Mail Extensions (MIME) type of the content that the server is
transmitting to the browser.
● The MIME standard specifies data formats, which programs can use to
interpret data correctly.
● For example, the MIME type text/plain indicates that the sent
information is text that can be displayed directly. Similarly, the MIME
type image/jpeg indicates that the content is a JPEG image.

HTTP get and post Requests
● The two most common HTTP request types (also known as request
methods) are get and post.
● A get request typically gets (or retrieves) information from a server,
such as an HTML document, an image or search results based on a
user-submitted search term.
● A post request typically posts (or sends) data to a server. Common
uses of post requests are to send form data or documents to a
server.

Get vs Post
Get
A get request appends data to the URL, e.g.,
www.google.com/search?q=deitel
Data is visible to everyone in the URL
Post
A post request sends form data as part of the HTTP message, not as part
of the URL
Data is not displayed in the URL

Client-Side Caching
● Browsers often cache (save on disk) recently viewed web
pages for quick reloading.
● It is the most efficient type of caching, because it allows
browsers to access files without communicating with the
web server.

Multitier Application Architecture

Multitier Application Architecture
● Web-based applications are often multitier applications that divide
functionality into separate tiers
● It is also referred to as n-tier applications
● Figure presents the basic structure of a three-tier web-based application.

1.Bottom tier
● The bottom tier (also called the data tier or the information tier) maintains
the application’s data. This tier typically stores data in a relational database
management system(RDBMS).
2.Middle tier
● The middle tier implements business logic, controller logic and presentation
logic to control interactions between the application’s clients and its data.
● The middle tier acts as an intermediary between data in the information tier
and the application’s clients
● The middle-tier controller logic processes client requests (such as requests
to view a product catalog) and retrieves data from the database.
● The middle-tier presentation logic then processes data from the information
tier and presents the content to the client. Web applications typically
present data to clients as HTML documents.

● Business logic in the middle tier enforces business rules and ensures
that data is reliable before the application updates a database or
presents data to users.
● Business rules dictate how clients access data and how applications
process data.
● For example, a business rule in the middle tier of a retail store’s web-
based application might ensure that all product quantities remain
positive. A client request to set a negative quantity in the bottom tier’s
product information database would be rejected by the middle tier’s
business logic.

3.Top Tier
● The top tier, or client tier, is the application’s user interface, which
gathers input and displays output.
● Users interact directly with the application through the user interface,
which is typically a web browser or a mobile device.
● In response to user actions (e.g., clicking a hyperlink), the client tier
interacts with the middle tier to make requests and to retrieve data
from the information tier.
● The client tier then displays the data retrieved for the user.

Client-Side Scripting versus Server-Side Scripting

Client-Side Scripting
● Client-side scripting with JavaScript can be used to validate user input, to interact with
the browser, to enhance web pages, and to add client/server communication between a
browser and a web server.
● web browsers execute client side scripting.
Limitations:
● Client-side scripting does have limitations, such as browser dependency;
● Another issue is that client-side scripts can be viewed by the client by using the
browser’s source-viewing capability.
● Sensitive information, such as passwords or other personally identifiable data, should
not be on the client. All client-side data validation should be mirrored on the server.

Server-Side Scripting
● Web servers are used to execute server side scripting. They are basically used to
create dynamic pages.
● Scripts can be written in any of a number of server-side scripting language
available.
● It is used to retrieve and generate content for dynamic pages.
● Programmers have more flexibility with server-side scripts, which often generate
custom responses for clients.
● For example, a client might connect to an airline’s web server and request a list of
flights from Boston to San Francisco between April 19 and May 5. The server
queries the database, dynamically generates an HTML document containing the
flight list and sends the document to the client. This technology allows clients to
obtain the most current flight information from the database by connecting to an
airline’s web server.
● Server-side scripting languages have a wider range of programmatic capabilities
than their client-side equivalents. Server-side scripts also have access to server-
side software that extends server functionality—Microsoft web servers use
ISAPI (Internet Server Application Program Interface) extensions and Apache
HTTP Servers use modules.

Client side scripting Server side scripting
Source code is visible to user.
Source code is not visible to user because it’s
output of server side is a HTML page.
It usually depends on browser and it’s version.
In this any server side technology can be used
and it does not depend on client.
It runs on user’s computer. It runs on web server.
It does not provide security for data. It provides more security for data.
It is a technique used in web development in
which scripts runs on clients browser.
It is a technique that uses scripts on web
server to produce a response that is customized
for each clients request.
HTML, CSS and javascript are used. PHP, Python, Java, Ruby are used.

Introduction
•HTML stands for Hyper Text Markup Language
•Markup language is language of writing layout information within documents
•Berners-lee defined HTML 1.0 in 1990
•HTML 2.0 was released in 1995
•In January 1997, HTML 3.2 became the official standard.
•In December of 1997, HTML 4.0 was published as a recommendation by the W3C.
•HTML 4.01 is a revised version of HTML 4.0 that includes several changes to the
HTML specification.
•In 1998, W3C introduced eXtensible Markup Language(XML)
•XHTML is the next phase in the evolution of HTML.
In January of 2000, XHTML became a standard together with HTML 4.01.
•W3C introduced HTML 5.0 which is finalized in October 2014

First HTML5 Example
<!DOCTYPE html> It is an "information" to the browser about what document type to expect.
<html>
<head>
<meta charset = "utf-8">
<title>Welcome</title>
</head>
<body>
<p>Welcome to HTML5!</p>
</body>
</html>
Unicode Transformation Format specifies the
character encoding for the HTML
document UTF-8 character set, which
covers almost all of the characters and
symbols in the world!

Headings
<!DOCTYPE html>
<html>
<head>
<title>Heading</title>
</head>
<body>
<h1>Level 1 Heading</h1>
<h2>Level 2 heading</h2>
</body>
</html>

Formatting Text
Tags
● <p>- Align paragraph
● <br> or <br/>- Single line break
● <pre>- preserve the white spaces and lines in the text
● <div>- Make division of sections in the html document

<!DOCTYPE html>
<html>
<head>
<title>formatting text</title>
</head>
<body>
<p>
The name India is derived from Indus, which is derived from the Old Persian word Hindu, from
Sanskrit
</p>
<div>
India is the seventh-largest country by geographical area. The second-most populous country with
over 1.2 billion people. The most populous democracy in the world.
</div>
<pre>
Chennai being the fourth most populous metropolitan area and the fifth most populous city in India
It is also the world's 36th largest metropolitan area
Cricket is the most popular sport in Chennai
Chennai is the base for the large Tamil movie industry, known as Kollywood, home to most of the
movie studios
</pre>
</body>
</html>

Setting Font Style
<!DOCTYPE html>
<html>
<head>
<title>setting font style</title>
</head>
<body>
<b>welcome to kongu engineering college</b><br>
<i>welcome to kongu engineering college</i><br>
<strong>welcome to kongu engineering college</strong><br>
<strike>welcome to kongu engineering college</strike><br>
<center>welcome to kongu engineering college</center><br>
</body>
</html>

Setting Font and Colors
<!DOCTYPE html>
<html>
<head>
<title>setting font and colors</title>
</head>
<body bgcolor=”pink”>
<h1>India</h1>
<font face="arial" color="red" size="5">
India is a country that occupies the greater part of South Asia<br>
<font face="timesnewroman" color="green" size="6">
India is a country that occupies the greater part of South Asia
</body>
</html>

Horizontal Rules
<!DOCTYPE html>
<html>
<head>
<title>horizontal rules</title>
</head>
<body bgcolor="pink">
<h1>India</h1>
<hr/>
<font face="arial" color="red" size="5">
India is a country that occupies the greater part of South Asia<br>
<font face="timesnewroman" color="green" size="6">
India is a country that occupies the greater part of South Asia
</body>
</html>

Image
•Images can be included using img element
•Attributes:
src: The image file’s location is specified with the src (source)
attribute(relative path)
alt: text description of image. If a browser cannot render an
image, the browser displays the alt attribute’s value.
height / width: Dimensions of area that image will occupy (it is measured in
pixels(picture elements)
Void Elements:
● Some HTML5 elements (called void elements) contain only attributes and
do not mark up text (i.e., text is not placed between a start and an end
tag).
● you can terminate void elements (such as the img element) by using the
forward slash character (/) inside the closing right angle bracket (>).

<!DOCTYPE html>
<html>
<head>
<title>Image</title>
</head>
<body>
<img src = "rose.jpg" width = "300" height = "300" alt = "rose"/>
<img src = "ros.jpg" width = "300" height = "300" alt = "RED ROSE"/>
</body>
</html>

Linking(hyperlink)
● One of the most important HTML5 features is the hyperlink, which
references (or links to) other resources, such as HTML5 documents and
images.
● Web browsers typically underline text hyperlinks and color their text blue by
default
● Links are created using the a (anchor) element.
● It defines a hyperlink to the URL assigned to attribute href (hypertext
reference), which specifies a resource’s location, such as
○ a web page or location within a web page
○ a file
○ an e-mail address

<!DOCTYPE html>
<html>
<head>
<title>Image</title>
</head>
<body>
<h1>Here are my favorite sites:</h1>
<strong>Click a name to visit that site.</strong><br>
<a href = "http://www.facebook.com">Facebook</a><br>
<a href = "http://www.twitter.com">twitter</a><br>
<a href = "http://www.google.com">google</a><br>
</body>
</html>

Hyperlinking to an E-Mail Address
<!DOCTYPE html>
<html>
<head>
<title>link</title>
</head>
<body>
click the link
<a href = "mailto:crdhivyait@gmail.com">mail</a>
</body>
</html>

Link to webpage
link.html
<!DOCTYPE html>
<html>
<head>
<title>link</title>
</head>
<body>
click the link to view image<br>
<a href = "image.html">click</a>
</body>
</html>

Using Images as Hyperlinks
tajmahal.html
<!DOCTYPE html>
<html>
<head>
<title>link</title>
</head>
<body bgcolor="red">
<h1><center>TAJMAHAL</center></h1>
<p>The Taj Mahal was built by the Mughal emperor Shah Jahān (reigned 1628–
58) to immortalize his wife Mumtaz Mahal (“Chosen One of the Palace”), who
died in childbirth in 1631, having been the emperor’s inseparable companion since
their marriage in 1612.
</p>
</body>

imagelink.html
<!DOCTYPE html>
<html>
<head>
<title>link</title>
</head>
<body>
click the link to view image<br>
<a href = "tajmahal.html">
<img src = "tajmahal.jpg" width = "300" height = "300" alt =
"tajmahal"/>
</a>
</body>
</html>

List
HTML lists allow web developers to group a set of related items in lists.
Types:
ordered list
1. An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
2. The list items will be marked with numbers by default
unordered list
● A list that does not order its items by letter or number
● An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
● The list items will be marked with bullets (disc) by default

<!DOCTYPE html>
<html>
<head>
<title>Unordered list</title>
</head>
<body>
<h1> My favorite drinking items
</h1>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul type="circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul type="square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Unordered list

<!DOCTYPE html>
<html>
<head>
<title>Ordered list</title>
</head>
<body>
<h1> My favorite drinking items </h1>
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Ordered list

Nested list
● Lists may be nested to represent hierarchical relationships, as in a
multilevel outline
● A nested list is simply a list that occurs as an element of another list

<!DOCTYPE html>
<html>
<head>
<title>nested list</title>
</head>
<body>
<h1> My favorite items </h1>
<ol>
<li>Food items
<ul><li>biriyani</li>
<li>dosai</li>
<li>chicken rice</li>
</ul>
</li>
<li>Drinking items
<ul><li>coffee</li>
<li>tea</li>
<li>milk</li>
</ul>
</li>
</ol>
</body>
</html>

Table
● Tables are frequently used to organize data into rows and columns.
● Tables are defined with the table element
● The caption element specifies a table’s title
● A table has three distinct sections—head, body and foot
● The head section is defined with a thead element which contains header
information such as column names.
● Each tr element defines an individual table row.th (table heading)
● Each td element defines an individual table data(column).
● The body section, or table body, contains the table’s primary data is defined
in a tbody element.
● The tfoot section is defined with a tfoot (table foot) element. The text
placed in the footer commonly includes calculation results and footnotes.

<!DOCTYPE html>
<html>
<head>
<title>Table</title>
</head>
<body>
<table border = "1">
<caption><strong>Table of Fruits and Their Prices</strong>
</caption>
<thead>
<tr>
<th>Fruit</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>$1.00</td>
</tr>
<tr>
<td>Orange</td>
<td>$2.00</td>
</tr>
<tr>
<td>Banana</td>
<td>$1.50</td>
</tr>
<tr>
<td>Pineapple</td>
<td>$2.50</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Total</th>
<th>$7.00</th>
</tr>
</tfoot>
</table>
</body>
</html>

Using rowspan and colspan with Tables
The rowspan attribute specifies the number of rows a
cell should span.
The colspan attribute defines the number of columns a
cell should span.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<caption><strong>Rowspan</strong></caption>
<tbody>
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</tbody>
</table>
</body></html>
Rowspan

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<caption><strong>Columnspan</strong></caption>
<tbody>
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</tbody>
</table>
</body>
</html>
ColumnSpan

<!DOCTYPE html>
<html>
<head>
<title>Table rowspan and column span</title>
</head>
<body>
<caption>A more complex sample
table</caption>
<thead>
<tr>
<th rowspan = "2">RESULTS
COMPARISON </th>
<th colspan = "4">
Students mark comparison
</th>
</tr>
<tr>
<th>student1</th>
<th>student2</th>
<th>student3</th>
<th>student4</th>
</tr>
<tbody>
<tr>
<th>Web technology</th>
<td>80</td><td>85</td><td>90<
/td><td>92</td>
</tr>
<tr>
<th>Web technology lab</th>
<td>85</td><td>95</td><td>90<
/td><td>82</td>
</tr>
</tbody>
</table>
</body>
</html>

Forms
● HTML5 provides a mechanism, called a form, for collecting data from a
user.
● Data that users enter on a web page is normally sent to a web server that
provides access to a site’s resources

<!DOCTYPE html>
<html>
<head>
<title>form</title>
</head>
<body>
<h1>Feedback Form</h1><br>
<p>Please fill out this form to help us improve our site<br><br><br>
Name:<input type="text" name="firstname" value=""><br><br>
Comments:<br><textarea cols="40" rows="5" name="address"></textarea><br><br>
E-Mail address:<input type="text" name="email" value=""><br><br>
Things you liked:<br>
<input type="checkbox" name="checkbox1" value="site design" checked="checked">site design
<input type="checkbox" name="checkbox2" value="links">links
<input type="checkbox" name="checkbox3" value="ease of use">ease of use
<input type="checkbox" name="checkbox4" value="images">Images
<input type="checkbox" name="checkbox5" value="source code">Source code<br><br>
Text box
Text area
Text box
Check box

How did you get to our site:<br>
<input type="radio" name="radio1" value=“search engine" checked="checked"> search engine
<input type="radio" name="radio2" value=“Links from another site">Links from another site
<input type="radio" name="radio3" value=“Deitel.com website">Deitel.com website
<input type="radio" name="radio4" value=“Reference in a book">Reference in a book
<input type="radio" name="radio5" value=“other">other<br><br>
Rate our website:
<select>
<option selected>Amazing</option>
<option>5</option>
<option>4</option>
<option>3</option>
<option>2</option>
<option>1</option>
</select><br><br>
<input type="submit" value="submit">
<input type="reset" value="clear">
</forms></body></html>
Radio button
Menus
Button

Hidden field
● The <input type="hidden"> defines a hidden input field.
● A hidden field let web developers include data that cannot be seen or
modified by users when a form is submitted.
● A hidden field often stores what database record that needs to be updated
when the form is submitted.

<!DOCTYPE html>
<html>
<head>
<title>form</title>
</head>
<body>
<h1>A Hidden Field</h1>
<form method = "post" action = "http://www.deitel.com">
<label>Name:</label>
<input type="text" name="fname" value=""><br><br>
<label>Password</label>
<input type="password"name="p1" value="">
<input type="hidden" name = "recipient" value = "deitel@deitel.com"><br><br>
<input type="submit" value="Submit">
<input type="reset" value="clear">
</form>
</body>

Internal Linking
● Internal linking—a mechanism that enables the user to jump between
locations in the same document.
● Internal linking is useful for long documents that contain many sections.
● Clicking an internal link enables the user to find a section without
scrolling through the entire document.

<!DOCTYPE html>
<html>
<head><meta charset = "utf-8">
<title>Internal linking</title>
</head>
<body>
<img src="internet.jpg" height="200" width="200">
<h1 id = "features">The Best Features of the Internet</h1>
<a href = "#drawbacks">Go to Drawbacks of Internet</a>
<ul>
<li>You can meet people from countries around the world.</li>
<li>You have access to new media as it becomes public:
<ul>
<li>New games</li>
<li>New applications
<ul>
<li>For Business</li>
<li>For Pleasure</li>

</li>
<li>Around the clock news</li>
<li>Search Engines</li>
<li>Shopping</li>
<li>Programming
<ul>
<li>HTML5</li>
<li>Java</li>
<li>Dynamic HTML</li>
<li>Scripts</li>
<li>New languages</li>
</ul>
</li>
</ul>
</li>
<li>Links</li>
<li>Keeping in touch with old friends</li>
<li>It is the technology of the future!</li>
<li>Extension of Existing IT Technology.</li>
<li>Flexibility of Communication</li>
<li>Security</li>
<li>Low Cost</li>
</ul>
<h1 id = "drawbacks">Drawbacks of Internet</h1>
<a href = "#features">Go to Favorite Features </a>
<ol>
<li>Addiction, time-waster, and causes distractions</li>
<li>Health issues and obesity.</li>
<li>Cyberbullying</li>
</ol>
</body>
</html>

Meta Elements
● Meta elements, which specify information about a document.
● Two important attributes of the meta element are name, which identifies the
type of meta element, and content, which provides the information search
engines use to catalog pages.
● <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 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.

<!DOCTYPE html>
<html>
<head>
<title>welcome</title>
<meta name = "keywords" content = "web page, design,HTML5, tutorial, personal, help, index,
form,contact, feedback, list, links, deitel">
<meta name = "description" content = "This website will help you learn the basics of HTML5 and
web page design through the use of interactive examples and instruction.">
</head>
<body>
<h1>Welcome to Our Website!</h1>
<p>We have designed this site to teach about the wonders of<strong><em>HTML5</em></strong>.
<em>HTML5</em> is better equipped than <em>HTML</em> to represent complex
data on the Internet. <em>HTML5</em> takes advantage of XML's strict syntax to ensure well-
formedness. Soon you will know about many of the great features of<em>HTML5.</em></p>
<p>Have Fun With the Site!</p></body></html>

Frames and Frame set in HTML
● 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.

<!DOCTYPE html>
<html>
<frameset cols="50%,50%">
<frame src="form.html" name="left">
<frameset rows="50%,50%">
<frame src="ol.html" name="right1">
<frame src="ul.html" name="right2">
</frameset>
</frameset>
</html>

Frames in HTML5.0(IFrame)
● An iFrame is an inline frame used inside a webpage to load another HTML document inside
it.
● It allows you to open new document inside the main browser's window. Inline frame is also called
floating frame.
!DOCTYPE html>
<html>
<head>
<title>welcome</title>
</head>
<body>
<iframe src="ul.html" height="500" width="500"></iframe>
<iframe src="ol.html" height="500" width="500"></iframe>
</body>
</html>

UNIT 1 (8).pptx

More Related Content

Similar to UNIT 1 (8).pptx

More from DrDhivyaaCRAssistant

Recently uploaded

UNIT 1 (8).pptx