DATE:-

16 August -31 August

TRAINER’S NAME:-
 Prof. Vandana
Rai
 Prof. Deepti
Gopal
 Session- 1

● Introduction to WWW & HTTP.

● Introduction to Web Browser and Web Server.
● Introduction to HTML
● HTML Structure and tags
DAY - 1  Head
 Title
 Body
 Paragraph
 Break
 New Line
 Heading tags (h1 to h6)
 Session- 2
● Formatting Tags
● Style tag
DAY - 2
● HTML Color Coding
● Anchor (Hyperlinks) <a>
1. I n tro du c ti o n t o
WWW & H T T P : -
 WWW:-World Wide Web, which is also known as a Web, is a collection of
websites or web pages stored in web servers and connected to local computers
through the internet. These websites contain text pages, digital images, audios,
videos, etc.

 Users can access the content of these sites from any part of the world over the
internet using their devices such as computers, laptops, cell phones, etc. The
WWW, along with the internet, enables the retrieval and display of text and
media to your device.
 A web page is given an online address called a Uniform Resource Locator
(URL). A particular collection of web pages that belong to a specific URL is
called a website, e.g., www.facebook.com, www.google.com, etc. So, the World
Wide Web is like a huge electronic book whose pages are stored on multiple
servers across the world.

 Small websites store all of their Webpages on a single server, but big websites
or organizations place their Webpages on different servers in different countries
so that when users of a country search their site they can get the information
quickly from the nearest server.
HTTP:The HyperText Transfer Protocol is the client-server network protocol
that has been in use by the World-Wide Web since 1990. Whenever you surf the
web, your browser will be sending HTTP request messages for HTML pages,
images, scripts and stylesheets. Web servers handle these requests by returning
response messages that contain the requested resource.

The core technology is HTTP - Hypertext Transfer Protocol. It's the

communication protocol you use when you browse the web. At a fundamental
level, when you visit a website, your browser makes an HTTP request to a
server. Then that server responds with a resource (an image, video, or the HTML
of a web page) - which your browser then displays for you.This is HTTP's
message-based model. Every HTTP interaction includes a request and a
response.
Browser
Whenever you issue a URL from your browser to get a web resource using HTTP,
e.g. http://www.nowhere123.com/index.html, the browser turns the URL into a
request message and sends it to the HTTP server. The HTTP server interprets the
request message, and returns you an appropriate response message, which is either
the resource you requested or an error message. This process is illustrated below:
Uniform Resource Locator (URL)
A URL (Uniform Resource Locator) is used to uniquely identify a resource over
the web. URL has the following syntax:
protocol://hostname:port/path-and-file-name
There are 4 parts in a URL:
 Protocol: The application-level protocol used by the client and server, e.g., HTTP, FTP, and
telnet.
 Hostname: The DNS domain name (e.g., www.nowhere123.com) or IP address (e.g.,
192.128.1.2) of the server.
 Port: The TCP port number that the server is listening for incoming requests from the clients.
 Path-and-file-name: The name and location of the requested resource, under the server
document base directory.
 For example, in the URL http://www.nowhere123.com/docs/index.html, the
communication protocol is HTTP; the hostname is www.nowhere123.com.
The port number was not specified in the URL, and takes on the default
number, which is TCP port 80 for HTTP. The path and file name for the
resource to be located is "/docs/index.html".
 Other examples of URL are:
• ftp://www.ftp.org/docs/test.txt
• mailto:[email protected]
• news:soc.culture.Singapore
• telnet://www.nowhere123.com/
The WEB
Internet (or The Web) is a massive distributed client/server information system as
depicted in the following diagram.

Many applications are running concurrently over the Web, such as web
browsing/surfing, e-mail, file transfer, audio & video streaming, and so on. In
order for proper communication to take place between the client and the server,
these applications must agree on a specific application-level protocol such as
HTTP, FTP, SMTP, POP, and etc.
2. Introduction to Web Browser and Web Server.
Web Browser
A web browser (also referred to as an Internet browser or simply a browser) is
application software for accessing the World Wide Web or a local website. When
a user requests a web page from a particular website, the web browser retrieves
the necessary content from a web server and then displays the page on the user's
device.

A web browser is not the same thing as a search engine, though the two are often
confused. A search engine is a website that provides links to other websites.
However, to connect to a website's server and display its web pages, a user must
have a web browser installed.
Function of Web Browser
 The purpose of a web browser is to fetch content from the Web or from a local
storage device and display it on a user's device.
 This process begins when the user inputs a Uniform Resource Locator (URL),
such as https://en.wikipedia.org/, into the browser. Virtually all URLs on the
Web start with either http: or https: which means the browser will retrieve them
with the Hypertext Transfer Protocol (HTTP). In the case of secure mode
(HTTPS), the communication between the browser and the web server is
encrypted for the purposes of security and privacy.
 Once a web page has been retrieved, the browser's rendering engine displays it
on the user's device. This includes image and video formats supported by the
browser.
 Web pages usually contain hyperlinks to other pages and resources. Each link
contains a URL, and when it is clicked or tapped, the browser navigates to the
new resource. Thus the process of bringing content to the user begins again.
 Most browsers use an internal cache of web page resources to improve
loading times for subsequent visits to the same page. The cache can store
many items, such as large images, so they do not need to be downloaded from
the server again. Cached items are usually only stored for as long as the web
server stipulates in its HTTP response messages.
Web Server.
Web server is a computer where the web content is stored.
Basically web server is used to host the web sites but there
exists other web servers also such as gaming, storage, FTP,
email etc. Web site is collection of web pages while web
server is a software that responds to the request for web
resources.
Web Server Working: Web server respond to the client
request in either of the following two ways:
● Sending the file to the client associated with the
requested URL.
● Generating response by invoking a script and
communicating with database
3. Introduction to HTML
HTML is the standard markup language for creating Web pages.

What is HTML?
 HTML stands for Hyper Text Markup Language
 HTML is the standard markup language for creating Web pages
 HTML describes the structure of a Web page
 HTML consists of a series of elements
 HTML elements tell the browser how to display the content
 HTML elements label pieces of content such as "this is a heading", "this is a
paragraph", "this is a link", etc.
 HTML stands for Hypertext Markup Language. It is used to design web pages
using a markup language. HTML is the combination of Hypertext and Markup
language. Hypertext defines the link between the web pages. A markup
language is used to define the text document within a tag which defines the
structure of web pages.
 This language is used to annotate (make notes for the computer) text so that a
machine can understand it and manipulate text accordingly. Most markup
languages (e.g. HTML) are human-readable. The language uses tags to define
what manipulation has to be done on the text.
 HTML is a markup language used by the browser to manipulate text, images,
and other content, in order to display it in the required format. HTML was
created by Tim Berners-Lee in 1991. The first-ever version of HTML was
HTML 1.0, but the first standard version was HTML 2.0, published in 1995.
Why learn HTML?
● It is a simple markup language. Its implementation is easy.
● It is used to create a website.
● Helps in developing fundamentals about web
programming.
● Boost professional career.

Supported Browsers:
● Google Chrome 93.0
● Firefox 92.0
● Internet Explorer 11.0
Elements and Tags:
HTML uses predefined tags and elements which tell the browser how to properly
display the content. Remember to include closing tags. If omitted, the browser
applies the effect of the opening tag until the end of the page.
HTML page structure: The basic structure of an HTML page is laid out below. It
contains the essential building-block elements (i.e. doctype declaration, HTML,
head, title, and body elements) upon which all web pages are created
Below is a visualization of an HTML page structure:
HERE,
<DOCTYPE! html>: This is the document type declaration (not technically a
tag). It declares a document as being an HTML document. The doctype
declaration is not case-sensitive.
<html>: This is called the HTML root element. All other elements are contained
within it.
<head>: The head tag contains the “behind the scenes” elements for a webpage.
Elements within the head aren’t visible on the front-end of a webpage.
<body>: The body tag is used to enclose all the visible content of a webpage. In
other words, the body content is what the browser will show on the front-end.
An HTML document can be created using any text editor. Save the text file
using .html or .htm. Once saved as an HTML document, the file can be opened as
EXAMPLE:- Example Explained

<!DOCTYPE html> The <!DOCTYPE html> declaration defines that this

document is an HTML5 document
<html>
● The <html> element is the root element of an
<head> HTML page
<title>Page Title</title> ● The <head> element contains meta information
about the HTML page
● The <title> element specifies a title for the HTML
</head> page (which is shown in the browser's title bar or
<body> in the page's tab)
<h1>My First Heading</h1> ● The <body> element defines the document's body,
and is a container for all the visible contents, such
<p>My first paragraph.</p> as headings, paragraphs, images, hyperlinks,
</body> tables, lists, etc.
</html> ● The <h1> element defines a large heading
HTML Tags:-
HTML Tags
The ‘<>’ brackets contain an HTML tag. There are two types of
HTML tags- empty tags or singleton tags and container tags.
Singleton tags or empty tags do not contain any content such as
an image or a paragraph and hence do not need to be closed,
whereas container tags should be closed.
Examples of:
Empty tag: <br>, <hr>,etc.
Container tags: <p>Paragraph</p>

Note: Some HTML elements have no content (like the <br> element). These
elements are called empty elements. Empty elements do not have an end tag!
What is an HTML Element?

An HTML element is defined by a start tag, some content, and an end tag:
<tagname> Content goes here... </tagname>

The HTML element is everything from the start tag to the end tag:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
 Features of HTML:

● It is easy to learn and easy to use.

● It is platform-independent.
● Images, videos, and audio can be added to a web page.
● Hypertext can be added to the text.
● It is a markup language.

Advantages:
● HTML is used to build websites.
● It is supported by all browsers.
● It can be integrated with other languages like CSS, JavaScript, etc.
Characteristics of HTML:

● Easy to understand: It is the most straightforward language you can say, very easy to grasp and easy to develop.
● Flexibility: This language is so flexible that you can create whatever you want, a flexible way to design web
pages along with the text.
● Linkable: You can make clickable text like users can connect from one page to another page or website through
these characteristics.
● Limitless features: You can add videos, gifs, pictures, or sound anything you want that will make the website
more attractive and understandable.
● Support: You can use this language to display the documents on any platform like Windows, Linux, or Mac.
● Not a Programming Language: HTML is not a programming language as it is only concerned with presenting
the information on the web. It is not used to program any logic but to give structure and semantical meaning to
our website. Though we can link JavaScript code to it which is a programming language.
● Language Support: HTML can support various other languages like JavaScript, Ruby, PHP, Perl, and many
more. You can also able to run embed python during the runtime.
Advantages of HTML:

● HTML is easy to learn, easy to apply and it’s totally free you will just need a
text editor and a browser.
● HTML is supported by all the browsers and it is the most friendly search
engine.
● HTML can easily integrate with other languages and is easy to develop.
● It is the basis of all programming languages and the lightest language ever.
● In HTML the display changes frequently depending on the window size or
the device size making it comfortable to read by the user.
 HTML EDITORS:-
HTML text editors are used to create and modify web pages. HTML codes can be
written in any text editors including the notepad. One just needs to write HTML in
any text editor and save the file with an extension “.html”.
Step 1: Open Notepad (PC)

Open Start > Programs > Accessories > Notepad

Step 2: Write Some HTML

Write or copy the HTML code into Notepad:

Step 3: Save the HTML Page

Save the file on your computer. Select File > Save as in the Notepad menu.
Name the file “filename.html"

Step 4: View the HTML Page in Your Browser

Open the saved HTML file in your favourite browser (double click on the file, or
right-click - and choose "Open with").
 HTML Coding

OUTPUT
HTML STRUCTURE AND TAGS:-
In this chapter we will show some basic HTML examples.

HTML Documents
 All HTML documents must start with a document type declaration: <!
DOCTYPE html>.
 The HTML document itself begins with <html> and ends with
</html>.
 The visible part of the HTML document is between <body> and
</body>.
Sample Program:-
<!DOCTYPE html> 1. The <!DOCTYPE> Declaration .The
<html> <!DOCTYPE>declaration represents
the document type, and helps
<body>
browsers to display web pages
correctly. It must only appear once,
<h1>My First Heading</h1> at the top of the page (before any
<p>My first paragraph.</p> HTML tags).

The <!DOCTYPE> declaration is not

</body>
case sensitive.
</html>
1. HTML Headings
In this section, we will know HTML Heading, & its implementation through
the examples. An HTML heading tag is used to define the headings of a page.
There are six levels of headings defined by HTML. These 6 heading elements
are H1, H2, H3, H4, H5, and H6; with H1 being the highest level and H6 the
least.HTML headings are defined with the <h1> to <h6> tags.<h1> defines the
most important heading. <h6> defines the least important heading.

Syntax:
<h1></h1>
<h3></h3>
<h6></h6>
Importance of Heading:
 Search Engines use headings for indexing the structure and content of the
webpage.
 Headings are used for highlighting important topics.
 They provide valuable information and tell us about the structure of the
document.
This example illustrates the HTML
heading tags.
OUTPUT
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
Horizontal rule:

 The <hr> tag which stands for the horizontal rule is used to define a thematic

break in an HTML page.

 The <hr> tag is an empty tag, and it does not require an end tag. It is basically

used to separate content.

Example: This example explains the HTML Headings with horizontal rules.
<!DOCTYPE html>
<html>
<body>
OUTPUT
<h1>Heading 1</h1>
<p>I like HTML.</p>

<!-- hr Tag is used here-->

<hr />

<h2>Heading 2</h2>
<p>I like CSS.</p>

<!-- hr Tag is used here-->

<hr />
<h2>Heading 3</h2>
<p>I like Javascript.</p>
HTML Paragraph: -
 In this section, we will know the HTML Paragraph, & its basic implementation
through the examples. The <p> tag in HTML defines a paragraph. These have
both opening and closing tags.

 So anything mentioned within <p> and </p> is treated as a paragraph. Most

browsers read a line as a paragraph even if we don’t use the closing tag i.e,
</p>, but this may raise unexpected results. So, it is both a good convention,
and we must use the closing tag.

Syntax:-
<p> Content </p>
1. In this example, we are using the <p> tag that is used for paragraphs in
HTML.

<!DOCTYPE html>
<html>

<body>
<h2>Welcome To SISTEC</h2>

<!-- Use of <p> tag -->

<p>Welcome to Computer Science Department</p>

</body>
</html>
2.This example explains the HTML <p> tag.

<!DOCTYPE html>
<html>
<body>

<p>A Computer Science portal for Student.</p>

<p>It contains well written articles.</p>

</body>

</html>
3.This example explains the HTML <p> tag having multiple lines.
<!DOCTYPE html>
<html>

<body>

<p>
This paragraph has multiple lines.
But HTML reduces them to a single line,
omitting the carriage return we have used.
</p>

<p>
This paragraph has multiple spaces.
But HTML reduces them all to a single
space, omitting the extra spaces and line we have used.
</p>
</body></html>
Break Tag:-<br> tag: There is a way to let the HTML know where the browser
needs to change the lines by using the <br> tag.

These tags do not have any closing tag. So, just a single opening tag will change
the line.
Syntax: <br>
Example: This example explains the <br> tag inside the <p> tag to add the
line-break

<!DOCTYPE html> OUTPUT

<html>

<body>
<p>
This paragraph has multiple
<br />lines. But HTML reduces them
<br />to a single line, omitting
<br />the carriage return we have used.
</p>

</body>
</html>
Align attribute: The <p> tag specifically supports the alignment attribute and
allows us to align our paragraphs in left, right, or center alignment.
Syntax:
<p align="value">
Example: This example explains the align attribute to align the content in the
<p> tag.
<!DOCTYPE html>
<html>
<body>
<p align="center">Hello students</p>
<p align="left">A Computer Science portal for students.</p>
<p align="right">It contains well written, well thought articles.</p>

</body>
</html>
New Line :- Creating a new line in HTML code. If you are writing the HTML,
you can create a new line using the <br> (break) tag, as shown in the example
below. The HTML <br> element defines a line break.
Use <br> if you want a line break (a new line) without starting a new paragraph

Example OUTPUT

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

</body>
</html>
Day 1:- Session- 2

● Formatting Tags

● Style tag

● HTML Color Coding

● Anchor (Hyperlinks) <a>

1.HTML Text Formatting

 In this Section, we will know HTML Text Formatting, & will understand
various ways of formatting the text.

 HTML facilitates the ability for formatting text just like we do in MS Word or
any text editing software. We will go through a few such options.
HTML Formatting Elements

Formatting elements were designed to display special types of text:


<b> - Bold text

<strong> - Important text

<i> - Italic text

<em> - Emphasized text

<mark> - Marked text

<small> - Smaller text

<del> - Deleted text

<ins> - Inserted text

<sub> - Subscript text

<sup> - Superscript text
<!DOCTYPE html>
<html>
<body>

<h2>Welcome To Sistec</h2>
<!--Text in Strong-->
<strong>Hello Students</strong>
<br>
<!--Text in small-->
<small>Hello Students</small>
<br>
<!--Text in Highlight-->
<mark>Hello Students</mark>

</body>
</html>
2. HTML Styles
Colors are used to make the page more attractive. Here are the different styles
which can be used to create new colors by combination of different colors. The
HTML style attribute is used to add styles to an element, such as color, font, size,
and more
Style Tag Example:-
OUTPUT
<!DOCTYPE html>
<html>
<body>

<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>
HTML Colour Coding
HTML colors are specified with predefined color names, or with RGB, HEX,
HSL, RGBA, or HSLA values.
Color Names. In HTML, a color can be specified by using a color name:
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>
</body>
</html>
OUTPUT
Background Color
You can set the background color for HTML elements OUTPUT

<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:DodgerBlue;">What is Computer</h1>
<p style="background-color:Tomato;">
a device, usually electronic, that processes data according to a set of instructions.
The digital computer stores data in discrete units and performs arithmetical and
logical operations at very high speed.
</p>
</body><html>
Text Color
You can set the color of text:
<!DOCTYPE html>
<html>
<body>

<h3 style="color:Tomato;">Hello World</h3>

<p style="color:DodgerBlue;">Welcome to world of HTML</p>
<p style="color:MediumSeaGreen;">a device, usually electronic, that processes
data according to a set of instructions. The digital computer stores data in discrete
units and performs arithmetical and logical operations at very high speed.</p>

</body>
OUTPUT
Border Color

You can set the color of borders:

<!DOCTYPE html>
<html>
<body>

<h1 style="border: 2px solid Tomato;">Hello World</h1>

<h1 style="border: 2px solid DodgerBlue;">Hello World</h1>

<h1 style="border: 2px solid Violet;">Hello World</h1>

</body>
</html>
4.Anchor (Hyperlinks)
What is a link?
 It is a connection from one web resource to another. A link has two ends, An
anchor and direction. The link starts at the “source” anchor and points to the
“destination” anchor, which may be any Web resource such as an image, a
video clip, a sound bite, a program, an HTML document or an element within
an HTML document.

 You will find many websites or social media platforms ( Like YouTube,
Instagram ) which link an image to a URL or a text to a URL etc.

 This basically means that by using the ‘a’ tag, you can link 1 element of the
code to another element that may/may not be in your code.
HTML Link Syntax
The HTML <a> tag defines a hyperlink.
It has the following syntax: Links are specified in HTML using the “a” tag.
<a href="url">link text</a>
The most important attribute of the <a> element is the href attribute, which
indicates the link's destination.
The link text is the part that will be visible to the reader.
Clicking on the link text, will send the reader to the specified URL address.

Syntax Explanation:
href : The href attribute is used to specify the destination address of the link
used. "href" stands for Hypertext reference.
Text link : The text link is the visible part of the link. It is what the viewer clicks
on.
Example
<!DOCTYPE html>
<html>
<body>

<h1>HTML Links</h1>

<p><a href="https://www.w3schools.com/">Visit W3Schools.com!</a></p>

</body>
</html>
HTML Links - Use an Image as a Link
<!DOCTYPE html>
<html>
<body>

<h2>Image as a Link</h2>

<p>The image below is a link. Try to click on it.</p>

<a href="default.asp"><img src="smiley.gif" alt="HTML tutorial"

style="width:42px;height:42px;"></a>

</body>
</html>