MODULE 1

SEMANTIC WEB WITH EXAMPLE

The Semantic Web is an extension of the World Wide Web that aims to
make web content more easily understandable by machines. It involves
adding semantic metadata to web pages and resources, allowing
computers to understand the meaning of information. This enables
better search results, automated data integration, and improved
collaboration between applications.
One of the most obvious examples of the semantic web is right in your
search results: rich search results. Rich search results refer to a wide
variety of features that appear in a Google SERP beyond just the normal
search snippet of title, URL and description. Here's a SERP chock full of
rich results:

These features include:

1. Rich snippets – those results that have images, star ratings,

addresses and other information
2. Knowledge panels – More often known simply as the Knowledge
Graph, these are the boxes containing detailed information about
an entity detected as the subject of a user query
3. News Carousel – The top results from Google News search related
to the topic of the query.
4. Showtimes – When Google detects you searching for the title of a
movie currently in theaters, or you search for movie times,
showtimes for local theaters is displayed above the search results.
 SEMANTIC SEARCH ENGINE WITH EXAMPLE
One of the most obvious examples of the semantic web is right in your
search results: rich search results. Rich search results refer to a wide
variety of features that appear in a Google SERP beyond just the normal
search snippet of title, URL and description. Here's a SERP chock full of
rich results:

These features include:

1. Rich snippets – those results that have images, star ratings,

addresses and other information
2. Knowledge panels – More often known simply as the Knowledge
Graph, these are the boxes containing detailed information about
an entity detected as the subject of a user query
3. News Carousel – The top results from Google News search related
to the topic of the query.
4. Showtimes – When Google detects you searching for the title of a
movie currently in theaters, or you search for movie times,
showtimes for local theaters is displayed above the search results.

Here's a simple example of how a semantic search engine might work:

Consider a user searching for "movies directed by Christopher Nolan."

In a traditional keyword-based search engine, the engine might match

web pages that contain the exact phrase "movies directed by
Christopher Nolan." However, it may not understand the semantic
relationships between the words.

In a semantic search engine, the system understands that:

 "movies" refers to a category of creative works.

 "directed by" indicates the directorship relationship.
 "Christopher Nolan" is a specific person, likely a film director.
 TYPE OF SEARCH ENGINE
Search engines are classified into the following three categories based on how it
works.

1. Crawler based search engines

2. Human powered directories
3. Hybrid search engines
4. Other special search engines
1. Crawler Based Search Engines
All crawler based search engines use a crawler or bot or spider for crawling
and indexing new content to the search database. There are four basic steps, every
crawler based search engines follow before displaying any sites in the search results.

 Crawling
 Indexing
 Calculating Relevancy
 Retrieving the Result
Examples of Crawler Based Search Engines
Most of the popular search engines are crawler based search engines and use the
above technology to display search results. Example of crawler based search
engines:

 Google
 Bing
 Yahoo!
 Baidu
 Yandex
2. Human Powered Directories
Human powered directories also referred as open directory system depends on
human based activities for listings.

3. Hybrid Search Engines

Hybrid Search Engines use both crawler based and manual indexing for listing the
sites in search results. Most of the crawler based search engines like Google basically
uses crawlers as a primary mechanism and human powered directories as secondary
mechanism. For example, Google may take the description of a webpage from
human powered directories and show in the search results. As human powered
directories are disappearing, hybrid types are becoming more and more crawler
based search engines.
 WHAT SEARCH ENGINE DOES FOR SEMANTIC SEARCH
Here's what a semantic search engine typically does:

.
Understanding Natural Language:
.
Semantic search engines are designed to understand natural
language queries, considering the context, intent, and relationships
between words.
.
Contextual Understanding:
.
They analyze the context of the search query and content on web
pages to provide more accurate results. This involves understanding
synonyms, related terms, and the overall context of the user's query.
.
Entity Recognition:
.
Semantic search engines identify entities (such as people, places,
organizations) mentioned in the query and on web pages. This helps
in understanding the context and relationships between entities.
.
Ontology and Knowledge Graphs:
.
They often utilize ontologies and knowledge graphs to organize
information hierarchically, making it easier to understand
relationships between different concepts and entities.
.
RDF and Linked Data:
.
Semantic search engines may use Resource Description Framework
(RDF) and linked data principles to structure and interconnect
information on the web, allowing for more nuanced and context-
aware search results.
.
Enhanced Query Processing:
.
 They go beyond traditional keyword matching and employ advanced
query processing techniques to better interpret the user's intent.
.
Personalization:
.
Semantic search engines may take into account user preferences,
location, and past behavior to personalize search results for
individual users.
.
Natural Language Processing (NLP):
.
NLP techniques are often employed to extract meaning from text,
helping the search engine understand the semantics of words and
phrases.
.
Sentiment Analysis:
.
Some semantic search engines incorporate sentiment analysis to
understand the emotional tone of content, which can be important in
certain types of searches.
.
Multimodal Search:
.
In addition to text, semantic search engines may support other forms
of content, such as images, videos, and audio, allowing for a more
comprehensive search experience.
.
Continuous Learning:
.
They may use machine learning algorithms to continuously improve
their understanding of user queries and content on the web,
adapting to evolving language and information trends.
COMPARE AND CONTRAST SEMANTIC SEARCH AND SEMANTIC WEB
Create one HTML Form with one button element. On click of that the
button it will display one alert message “Welcome to Web Tech Exam”.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Web Tech Exam</title>
</head>
<body>

<form id="webTechForm">
<button type="button" onclick="displayAlert()">Click
Me</button>
</form>

<script>
function displayAlert() {
alert("Welcome to Web Tech Exam");
}
</script>

</body>
</html>
Write HTML to implement a form which has the following elements: a
textbox which can accept a maximum of 40 characters, two radio
buttons, two checkboxes, a selection list containing four items, two of
which are always visible, a submit button, clicking on which will
prompt the browser to send the form data to the server
“http://responses.mysite.com” using “POST” method.You can use any
text of your choice to label the form elements.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Sample Form</title>
</head>
<body>

<form action="http://responses.mysite.com" method="POST">

<!-- Textbox with a maximum of 40 characters -->
<label for="textbox">Textbox (max 40 characters): </label>
<input type="text" id="textbox" name="textbox"
maxlength="40"><br>

<!-- Radio buttons -->

<label>Choose one of the following:</label><br>
<input type="radio" id="radio1" name="radioGroup"
value="option1">
<label for="radio1">Option 1</label><br>
<input type="radio" id="radio2" name="radioGroup"
value="option2">
<label for="radio2">Option 2</label><br>

<!-- Checkboxes -->

<label>Choose one or more of the following:</label><br>
<input type="checkbox" id="checkbox1" name="checkbox1"
value="check1">
<label for="checkbox1">Check 1</label><br>
 <input type="checkbox" id="checkbox2" name="checkbox2"
value="check2">
<label for="checkbox2">Check 2</label><br>

<!-- Selection list with four items -->

<label for="selectList">Select one from the list:</label><br>
<select id="selectList" name="selectList">
<option value="item1">Item 1</option>
<option value="item2">Item 2</option>
<option value="item3" selected>Item 3 (default)</option>
<option value="item4">Item 4</option>
</select><br>

<!-- Submit button -->

<input type="submit" value="Submit">
</form>

</body>
</html>
WHAT IS WWW AND WHY IS IT FAMOUS?
The World Wide Web—commonly referred to as WWW, W3, or the Web
—is a system of interconnected public webpages accessible through
the Internet. The Web is not the same as the Internet: the Web is one of
many applications built on top of the Internet.

The system we know today as "the Web" consists of several

components:

 The HTTP protocol governs data transfer between a server and a

client.
 To access a Web component, a client supplies a unique universal
identifier, called a URL (uniform resource locator) or URI (uniform
resource identifier) (formally called Universal Document Identifier
(UDI)).
 HTML (hypertext markup language) is the most common format
for publishing web documents

Uses of internet/WWW:
1) Internet is used for communication
2) Internet is used for having calls
3) Getting the information of topic, which we want
4) Learning. Many students use internet for online learning
5) Getting News of all things in world
6) Watching videos and getting information
7) Accessing WWW sites for our work
IIt connected the world in a way that made it much easier for people to
get information, share, and communicate. It has since allowed people to
share their work and thoughts through social networking sites, blogs,
video sharing, and more.
WHAT ARE METADATA TOOLS AND HOW TO USE IT IN HTML.
Metadata tools are software applications or systems designed to create,
manage, analyze, and extract metadata from various types of content
and data. Metadata is descriptive information about data, providing
details about its origin, structure, content, quality, and other
characteristics.
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 will not be displayed on the page, but is machine parsable.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="This is a sample HTML document
with metadata.">
<meta name="keywords" content="HTML, metadata, web
development">
<meta name="author" content="Your Name">
<title>Sample HTML Document</title>
</head>
<body>
<!-- Content goes here -->
</body>
</html>
EXPLAIN UTILITY OF <META> TAG
Meta tags are HTML tags that provide information about a webpage's
content to search engines and users. They play a crucial role in
influencing how a website appears in search results and can impact click-
through rate (CTR). <meta name="description" content="Turn the
algorithm into a friend.
Here are some common use cases and utilities of the <meta> tag:
Character Set Declaration (charset):
 Utility: Specifies the character encoding for the HTML document.
<meta charset="UTF-8">
Viewport Configuration (viewport):
 Utility: Controls the viewport properties on mobile devices,
enabling responsive design.
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
Document Description (description):
 Utility: Provides a brief description of the content, often used by
search engines for snippets.
<meta name="description" content="This is a sample
HTML document with metadata.">
Keywords (keywords):
 Utility: Specifies a comma-separated list of keywords relevant to
the document's content.
<meta name="keywords" content="HTML, metadata,
web development">
Author (author):
 Utility: Specifies the author or authors of the document.
<meta name="author" content="Your Name">
COOKIES
Cookies are small pieces of text sent to your browser by a website
you visit. They help that website remember information about your
visit, which can both make it easier to visit the site again and make
the site more useful to you.

TYPES OF STORAGE
Session Storage:
 Scope: Limited to the duration of a page session. Data is cleared
when the browser or tab is closed.
 Storage Limit: Typically larger than cookies but limited to a few
megabytes.
 Access: Accessible only within the same tab or window that
created the data.
Local Storage:
 Scope: Persists beyond the duration of a page session. Data
remains even when the browser is closed and is available across
multiple tabs/windows with the same origin.
 Storage Limit: Larger than session storage but still limited (usually
several megabytes per domain).
 Access: Accessible across all tabs or windows with the same
origin.
Cookies:
 Scope: Persist data across multiple sessions and tabs/windows.
Has an expiration date.
 Storage Limit: Smaller than session and local storage (typically a
few kilobytes).
 Access: Sent to the server with every HTTP request, providing
server-side access.
4 METHODS FOR SESSION STORAGE
Session Storage is a client-side storage mechanism in web browsers that
allows developers to store key-value pairs for the duration of a page
session. Here are four methods commonly used with Session Storage in
JavaScript:
setItem(key, value):
 Purpose: Adds a key-value pair to the session storage.
// Setting a value in session storage
sessionStorage.setItem('username', 'john_doe');
getItem(key):
 Purpose: Retrieves the value associated with a specified key from
the session storage.
// Getting a value from session storage
const username = sessionStorage.getItem('username');
removeItem(key):
 Purpose: Removes the key-value pair associated with the
specified key from the session storage.
// Removing a value from session storage
sessionStorage.removeItem('username');
clear():
 Purpose: Clears all key-value pairs from the session storage,
effectively resetting it.
// Clearing all values from session storage
sessionStorage.clear();

// Set a value in session storage

sessionStorage.setItem('username', 'john_doe');

// Get the value from session storage

const storedUsername = sessionStorage.getItem('username');
console.log('Stored Username:', storedUsername);

// Remove the value from session storage

sessionStorage.removeItem('username');
// Clear all values from session storage
sessionStorage.clear();

4 METHODS FOR LOCAL STORAGE

Local Storage is a client-side storage mechanism in web browsers that
allows developers to store key-value pairs persistently across browser
sessions. Here are four common methods used with Local Storage in
JavaScript:
setItem(key, value):

Purpose: Adds a key-value pair to the local storage.
// Setting a value in local storage
localStorage.setItem('user', JSON.stringify({ name: 'John Doe', age:
25 }))
getItem(key):

Purpose: Retrieves the value associated with a specified key from
the local storage.

// Getting a value from local storage
const storedUser = JSON.parse(localStorage.getItem('user'));
console.log('Stored User:', storedUser);
removeItem(key):
 Purpose: Removes the key-value pair associated with the
specified key from the local storage.
// Removing a value from local storage
localStorage.removeItem('user');
clear():
 Purpose: Clears all key-value pairs from the local storage,
effectively resetting it.
// Clearing all values from local storage
localStorage.clear();

// Set a value in local storage

const user = { name: 'John Doe', age: 25 };
localStorage.setItem('user', JSON.stringify(user));

// Get the value from local storage

const storedUser = JSON.parse(localStorage.getItem('user'));
console.log('Stored User:', storedUser);

// Remove the value from local storage

localStorage.removeItem('user');

// Clear all values from local storage

localStorage.clear();