Session-1

Contents
• Web Design
• Web Development
• Type of Web Development
• Front-end, Back-end and Full stack
• Network
• Internet
• WWW
• URL
• HTML
 What is Web Design
• Web design refers to the process of creating
and designing websites. This includes the
layout, color schemes, typography, and
overall visual aesthetics of a website. Web
design also involves user experience (UX)
design, which focuses on how users interact
with a website and ensuring that the site is
easy to use, intuitive, and efficient.
 What is Web Development
• Web development refers to the process of
building and maintaining websites and web
applications. It involves the use of
programming languages, such as HTML,
CSS, and JavaScript, as well as web
development frameworks and tools, to
create websites and web applications that
are functional, interactive, and responsive.
Example
 What is a User-Friendly Website?

• Choose Color Carefully

• Effective Navigation
• Mobile Compatibility
• Simple Forms
• Easily Spottable Content
Architecture
• Clear Call-to-Action Information
• Fast Load Times
• Improve Your Site Layout
Website Vs Web Application

?
 Website Vs Web Application
• Website typically provides static content,
while a web application provides dynamic
content and interactive functionality.
• A website is a collection of web pages
that are designed to provide information
or content to visitors. Websites typically
contain information about a company,
organization, or individual, and may
include static pages such as an "About
Us" page, a "Contact Us" page, and a
blog.
 Cont..
• On the other hand, a web application
is a software application that runs on
a web server and is accessed through
a web browser. Web applications
provide dynamic content and
interactive functionality, such as user
authentication, data input and
storage, and real-time updates.
Examples of web applications include
online banking systems, social media
 What is Network

• A computer network is an interconnection between

two or more computers. It is done to share
information and resources.
 What is Internet
• Internet is the network of computer linking
many different types of computers all over the
world.
• It is a very large wide-area network
connecting computer and networks around
the world.
• Its makes its possible for millions of users to
connect to one another via telephone lines ,
cable lines and satellites.
What is WWW
 World Wide Web
• The World Wide Web ("WWW" or
simply the "Web") is a system of
interlinked, hypertext documents
that runs over the Internet. With a
Web browser, a user views Web
pages that may contain text, images,
and other multimedia and navigates
between them using hyperlinks.
 World Wide Web
• Latest revolution in the internet scenario
• Allow multimedia document to be shared
between machines
-> Containing text, Image, video ,animation.
• Basically a huge collection of inter-linked
documents
-> Billions of documents
-> Inter-linked in any possible way
 WWW
• The world wide web is also called the web ,is
an information space where document and
other web resources are identified by uniform
resource locators, interlinked by hypertext
links and accessible via the internet.
 What is Server
• A server is a specialized computer connected to a
network which provides resources or services.
• The main job of a web server is
to display website content through
storing, processing and delivering
webpages to users.
• Service provided by web server are
A)Delivers web pages to client. B)Web
Hosting C)File Transfer D)Gaming
Plateform. ANS 4. Apache, IIS, Nginx,
GWS etc.
Example
 Where do the document reside ?
• On web server
• Also called Hyper text transfer protocol (HTTP)
Server.
• They are actually written in
-> Hyper Text Markup Language (HTML)
• Document get formatted/displayed using
-> Web Browsers
* Internet Explorer
* Netscape
* Mosaic
* Konguerer
 What is Web Browser
• A web browser is an application for
accessing web documents and
service. When a user requests a web
page from a particular website, the
browser retrieves its files from a web
server and then displays the page on
the user's screen.
 Web Browsers

• The purpose of a web browser (Chrome, IE,

Firefox, Safari) is to read HTML documents and
display them.
• The browser does not display the HTML tags,
but uses them to determine how to display
the document:
How Web Browser Work
 Parser
• The browser parses HTML into a DOM
tree. HTML parsing involves tokenization
and tree construction
 Rendering or Layout Engine
• A browser engine (also known as a
layout engine or rendering engine) is a
core software component of every major
web browser. The primary job of a
browser engine is to transform HTML
documents and other resources of a
web page into an interactive visual
representation on a user's device.
• Rendering is the process of generating
HTML markup to display web pages in
the browser
 Topics
• HTTP
• Introduction of HTML
• HTML Structure
• HTML Tags
• HTML Tables
• HTML Lists
• HTML Forms
 HTTP
Hyper Text Transfer Protocol
• A Protocol using web clients (browsers)
interact with web servers
• It is a stateless protocol
-> fresh connection for every item to be
downloaded
• Transfer hypertext across the internet.
• A text with links to other text documents.
 HTTP
• Web client (Browsers) and web server
communicate via HTTP
• Basic step
-> client open socket connection to the http
server
1. Typically run over port 80 or 8080 .
-> client send http request to server
-> Server sends back response
-> Server close connection
 Diagram
Web Server 1

HTTP
Request

Web Server 3
HTTP
Response HTTP
Request

Web Client
HTTP HTTP
Request Response

HTTP
Response

Web Server 2
 How can see http Request/Response

• Enter URL-> drdineshsharma.com

Right Click and Select Inspect
Click on Network
Select Any Request
 What is HTML?

• HTML is the standard markup language for creating Web

pages.
• HTML stands for Hyper Text Markup Language
• HTML describes the structure of Web pages using markup
• HTML elements are the building blocks of HTML pages
• HTML elements are represented by tags
• HTML tags label pieces of content such as "heading",
"paragraph", "table", and so on
• Browsers do not display the HTML tags, but use them to
render the content of the page
 HTML
• Hypertext Markup Language
• Constitutes a collection of platform
independence style.
• Style indicated by markup tags
• It is effective language for designing
webpages.
 What is HTML really
• Plain-text document can be created using any
text editor.
• WYSIWYG editors are also available
• Hypertext– is a kind of textual document where
you can have links to other document. In HTML
this kind of links are allowed. So that in sense
HTML is Hypertext.
• Markup– In HTML all style are specified by
something called markup tags.
 What is markup language
• One where we can embed. Special
tags or formatting comments in the
text.
• To describe how the text should be
displayed/printed.
 HTML is markup language
• Special formatting codes( called tags) to
adjust fonts, create bulleted lists, create
forms, display images, create tables etc.
 HTML tags
• The left and right brackets are used to enclose
all special instructions called tags.
• Two classes of tags :
• <i> Good Morning </i>
• Those which appear individually.
• <img src=“baby.jpg”/>
• most of the tags belongs to first category.
 Some Points
• 1. Most of the tags belongs to the first
category.
• 2. Tags are case insensitive
• 3. Tags may be nested
• Most browsers have a view source menu
options.
• 4. Browsers ignore all extra spaces and
carriage returns within a html documents.
 Cont..
• It is good practice to use white space in a html
document
• Improve readability
 Cont..
• Some tags can have one or more attributes to
define some additional characteristics of the
tags
• <img src=“baby.img”>
• <body text=“white” bgcolor=“red”>
• Unrecognized tags
• Browsers normally ignore tags it does not
recognize.
 Comment Line
• Comment are included between
• <!--- and --->
• Comments can not be nested
• <--- hello html --->
• <--- -------------------------
• --->
 The <!DOCTYPE> Declaration
• The <!DOCTYPE> declaration represents the
document type, and helps browsers to display
web pages correctly.
• It must only appear once, at the top of the page
(before any HTML tags).
• The <!DOCTYPE> declaration is not case sensitive.
• The <!DOCTYPE> declaration for HTML5 is:
• <!DOCTYPE html>

<!DOCTYPE html>
 HTML Versions

1991 HTML first published

1995 HTML 2.0

After HTML 4.01 was released, focus
shifted to XHTML and its stricter standards.
1997 HTML 3.2

1999 HTML 4.01 XHTML 2.0 had even stricter standards

than 1.0, rejecting web pages that did not
2000 XHTML 1.0 comply. It fell out of favor gradually and
was abandoned completely in 2009.
2002
-2009 XHTML 2.0
HTML5 is much more tolerant and can
handle markup from all the prior versions.

Though HTML5 was published officially in 2012, it

2012 HTML5
has been in development since 2004.
 HTML Editors

• Write HTML Using Notepad or TextEdit


jEdit

Notepad++ (Windows only)

Kate (Windows: partial)

gedit

Emacs

Vim

VSCode etc
 Notepad
• Step 1: Open Notepad (PC)
• Windows 8 or later:
• Open the Start Screen (the window symbol at
the bottom left on your screen). Type Notepad.
• Windows 7 or earlier:
• Open Start > Programs > Accessories > Notepad
 Step 1: Open TextEdit (Mac)

• Open Finder > Applications > TextEdit

• Also change some preferences to get the
application to save files correctly. In Preferences >
Format > choose "Plain Text"
• Then under "Open and Save", check the box that
says "Ignore rich text commands in HTML files".
• Then open a new document to place the code.
 Step 2: Write Some HTML

• Write or copy some HTML into Notepad.

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>
 A Simple HTML Document

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>
 Example Explained
• The <!DOCTYPE html> declaration defines this document to
be HTML5
• The <html> element is the root element of an HTML page
• The <head> Used to provide a information about webpage.
• Nested within itself other tags like
• <base> <meta> and <title>
<base>
• Attribute href=url
• Specify the base pathname for all relatively URLs in the
document
• No end tag.
 Cont..
<meta>
Used to provide information about the document
• Keywords or descriptions to add search engines
<title> element specifies a title for the document
Usually appear on the title bar of the browser
window.
 Meta

• Tag defines metadata about an HTML document.

Metadata is data (information) about data.
• 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.
Meta for SEO
 <body>
• The <body> element contains the visible page
content
• Attributes:
• Background=url specify an image file to be used
as background
• Bgcolor=color set the background color of the
document
• Text=color set the default color for the normal
text in the document
 Paragraphs and Headings
• <Hn>…..</Hn>
• Used to generate headings 1<=n<=6
• Six different level of heading
• <P>
Paragraph markar used to separate text in
paragraph
End tag </p> is optional
 HTML Tag Reference
Tag Description

<html> Defines the root of an HTML document

<body> Defines the document's body

<head> A container for all the head elements (title,

scripts, styles, meta information, and
more)
<p> </p>
<h1> to <h6> Defines HTML headings

<hr>,<hr size=“20”> Produce a horizontal line which can be

< hr width=“75%>, <hr used to delimit sections
align=“left” width=“120”>
Example
Example of h and hr tags
 Step 3: Save the HTML Page

• Save the file on your computer. Select File >

Save as in the Notepad menu.
• Name the file "index.htm" and set the
encoding to UTF-8 (which is the preferred
encoding for HTML files).
 HTML Formatting Elements
<b> Bold text

<strong> Important text

<i> Italic text

<em> Emphasized text

<mark> Marked text

<small> Small text

<del> Deleted text

<u> Underline text

<sub> Subscript text

<sup> Superscript text

 Step 3: Save the HTML Page

You can use either .htm or .html as file extension. There

is no difference, it is up to you.
Step 4: View the HTML Page in Your Browser
 HTML Attributes
• Attributes provide additional information about
HTML elements.
• HTML Attributes
• All HTML elements can have attributes
• Attributes provide additional information about
an element
• Attributes are always specified in the start tag
• Attributes usually come in name/value pairs
like: name="value"
 List
• All lists must contain one or more list elements.
Lists may contain −
• <ul> − An unordered list. This will list items
using plain bullets.
• <ol> − An ordered list. This will use different
schemes of numbers to list your items.
• <dl> − A definition list. This arranges your items
in the same way as they are arranged in a
dictionary.
 HTML Unordered Lists

• An unordered list is a collection of related

items that have no special order or sequence.
This list is created by using HTML <ul> tag.
Each item in the list is marked with a bullet.
 Example

• <html> <head> <title>HTML Unordered

List</title> </head> <body> <ul>
<li>Beetroot</li> <li>Ginger</li>
<li>Potato</li> <li>Radish</li> </ul> </body>
</html>
 The type Attribute

• You can use type attribute for <ul> tag to

specify the type of bullet you like. By default,
it is a disc. Following are the possible options −
 Example
• <html>
• <head>
• <title>HTML Unordered List</title>
• </head>
• <body>
• <ul type = "square">
• <li>Beetroot</li>
• <li>Ginger</li>
• <li>Potato</li>
• <li>Radish</li>
• </ul>
• </body>
• </html>
 Examples
• <html>
• <head>
• <title>HTML Unordered List</title>
• </head>
• <body>
• <ul type = "disc">
• <li>Beetroot</li>
• <li>Ginger</li>
• <li>Potato</li>
• <li>Radish</li>
• </ul>
• </body>
• </html>
 HTML Ordered Lists

• If you are required to put your items in a

numbered list instead of bulleted, then HTML
ordered list will be used. This list is created by
using <ol> tag. The numbering starts at one
and is incremented by one for each successive
ordered list element tagged with <li>.
 Example
• <html>
• <head>
• <title>HTML Ordered List</title>
• </head>
• <body>
• <ol>
• <li>Beetroot</li>
• <li>Ginger</li>
• <li>Potato</li>
• <li>Radish</li>
• </ol>
• </body>
• </html>
 The type Attribute

• You can use type attribute for <ol> tag to

specify the type of numbering you like. By
default, it is a number. Following are the
possible options −
 Example
• <html>
• <head>
• <title>HTML Ordered List</title>
• </head>
• <body>
• <ol type = "1">
• <li>Beetroot</li>
• <li>Ginger</li>
• <li>Potato</li>
• <li>Radish</li>
• </ol>
• </body>
• </html>
 The start Attribute

• You can use start attribute for <ol> tag to

specify the starting point of numbering you
need. Following are the possible options −
 Example
• <html>
• <head>
• <title>HTML Ordered List</title>
• </head>
• <body>
• <ol type = "i" start = "4">
• <li>Beetroot</li>
• <li>Ginger</li>
• <li>Potato</li>
• <li>Radish</li>
• </ol>
• </body>
• </html>
 Definition List
• Specified using the tag
• <DL>………</DL>
• Each definition comprises of a definition term
(<DT>) and a definition description (<DD>)
• Web browsers format each definition on a
new line and indent it.
 Example
• <h1> Some Important Protocol </h1>
• <DT>
• <DT>TCP
• <DD> Transmission Protocol
• <DT>UDP
• <DD>User Datagram Protocol
• <DT>IP
• <DD> Internet Protocol
• </DT>
 Nesting of Lists
• Any List can be nested within another list
• When unnumbered lists are nested , the
browser automatically uses a different bullets
symbol for each level.
• When numbered list are nested by default
every level is numbered using the number
(1,2,3…)
 Example
• <OL>
• <li> one</li>
• <li> two</li>
• <OL>
• <li> Inner one</li>
• <li> Inner two</li>
• </OL>
• <li> Three</li>
• </OL>
 HTML TEXT FORMATTING
Some Formatting Tags are 1,b-Bold, 2.i-Italic,
3.code-Computer code,4.sub-Subscript & 5.sup-Superscript

<html><body>

<b>Confidence</b><br />
<big>Hardwork</big><br />
<i>Preseverance</i><br />
<code>Samsung CRT</code><br /> Implement it as a Exercise
This is_subscript<br /> (Practical)
This is^superscript

</body></html>
 HTML STYLE ATTRIBUTES
Tags Description

<center> Defines centered content

<font> Defines HTML fonts

<s> and <strike> Defines strikeout text

<u> Defines underlined text

Attributes Description

Align Defines the alignment of text

Bgcolor Defines the background color

Color Defines the text color

 Hyperlink
• HTML has ability to text and/or images to
another documents or section of a document.
• These links are called Hyperlinks.
• Browsers by default highlights the hyperlinks
with color and/or underline
• Specify using the anchor tag
• <a>…….</a>
 Cont..
• Require an attribute called “HREF” which
specify the path of the resources to be linked
• <a href=“google.com”> Search </a>
 The href Attribute

• HTML links are defined with the <a> tag. The

link address is specified in the href attribute:
• <a href="https://www.w3schools.com">This is
a link</a>
 The src Attribute

• HTML images are defined with the <img> tag.

• The filename of the image source is specified
in the src attribute:
• <img src="img_girl.jpg">
 The width and height Attributes

• Images in HTML have a set of size attributes,

which specifies the width and height of the
image:
• <img src="img_girl.jpg" width="500" height="
600">
 The alt Attribute

• The alt attribute specifies an alternative text

to be used, when an image cannot be
displayed.
• The value of the attribute can be read by
screen readers. This way, someone "listening"
to the webpage, e.g. a blind person, can
"hear" the element.
• <img src="img_girl.jpg" alt="Girl with a
jacket">
 HTML Links

• HTML links are hyperlinks.

• You can click on a link and jump to another
document.
• When you move the mouse over a link, the
mouse arrow will turn into a little hand.
• Note: A link does not have to be text. It can be
an image or any other HTML element.
 Example
• <a href="https://www.w3schools.com/
html/">Visit our HTML tutorial</a>
• The href attribute specifies the destination
address (https://www.w3schools.com/html/) of
the link.
• The link text is the visible part (Visit our HTML
tutorial).
• Clicking on the link text will send you to the
specified address.
 Local Links

• The example above used an absolute URL (A full

web address).
• A local link (link to the same web site) is specified
with a relative URL (without http://www....).
Example:
• <a href="html_images.asp">HTML Images</a>
 HTML Link Colors

• By default, a link will appear like this (in all

browsers):
• An unvisited link is underlined and blue
• A visited link is underlined and purple
• An active link is underlined and red
• You can change the default colors, by using
styles:
 Visited Link

Unvisited Link
 HTML Links - The target Attribute

• The target attribute specifies where to open the

linked document.
• The target attribute can have one of the following
values:
• _blank - Opens the linked document in a new
window or tab
• _self - Opens the linked document in the same
window/tab as it was clicked (this is default)
 Example

• <a href="https://
www.w3schools.com/" target="_blank">Visit
W3Schools!</a>
• <a href="https://www.w3schools.com/
html/" target="_self">HTML5 tutorial!</a>
 This link open in a new tab
This link open in same
tab Link will open in new tab

Link will open in same tab

 Create a Bookmark

• HTML bookmarks are used to allow readers to

jump to specific parts of a Web page.
• Bookmarks can be useful if your webpage is
very long.
• To make a bookmark, you must first create the
bookmark, and then add a link to it.
• When the link is clicked, the page will scroll to
the location with the bookmark.
 Example

• First, create a bookmark with the id attribute:

• <h2 id="C4">Chapter 4</h2>
• Then, add a link to the bookmark ("Jump to
Chapter 4"), from within the same page:
• <a href="#C4">Jump to Chapter 4</a>
• Or, add a link to the bookmark ("Jump to Chapter
4"), from anotherpage
<a href="html_demo.html#C4">Jump to Chapter
4</a>
 Image
• Images can improve the design and the
appearance of a web page.
• <img src="pulpitrock.jpg" alt="Mountain View">
 The alt Attribute

• The alt attribute provides an alternate text for

an image, if the user for some reason cannot
view it (because of slow connection, an error in
the src attribute, or if the user uses a screen
reader).
• The value of the alt attribute should describe
the image:
• <img src="img_chania.jpg" alt="Flowers in
Chania">
If a browser cannot find an image, it will display
the value of the alt attribute:
 HTML Table

• An HTML table is defined with the <table> tag.

• Each table row is defined with the <tr> tag. A
table header is defined with the <th> tag. By
default, table headings are bold and centered.
A table data/cell is defined with the <td> tag.
 Example
• <table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
 Table Tag Description
Tag Description
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
<colgroup> Specifies a group of one or more columns in a table for formatting

<col> Specifies column properties for each column within a <colgroup>

element
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
Border attribute
 HTML 5 <caption> Tag
• The HTML <caption>tag is used for
creating table captions. It is used in
conjunction with the <table> tag.
• The <caption> tag must be inserted
immediately after the <table> tag. A
table should have no more than one
caption.
 HTML 5 <colgroup> Tag
• The HTML <colgroup> tag is used for specifying
properties for a group of columns within a table.
• Must be used as a child of a <table> element, after
any <caption> elements and before any
<thead><tbody><tfoot> and <tr> elements.
• If you need to apply different properties to a
column within a colgroup, you can use the HTML
<col> tag within the colgroup tag.
Example
<thead><tfoot><tbody>
Example
 <th> Tag
• The HTML <th> tag is used for specifying
a header cell (or table header) within a
table.
• This tag must be nested inside a <tr>
tag, which in turn must also be nested
correctly. You can find out more by
viewing the <teble> tag specifications.
Example
 HTML 5 <address> Tag

• The HTML <address> tag is used for

indicating an address, usually related to
authorship of the current document, or a
section of the document.
• If the tag applies to the body element, then
it applies to the document as a whole.
• <address> tag must not be used to
represent arbitrary addresses (e.g. postal
addresses), unless those addresses are
contact information for the section. To
display postal addresses, simply use the
<p> tag.
Address
 HTML <area> Tag
• The <area> tag defines an area inside an
image map (an image map is an image with
clickable areas).
Example
 HTML <audio> Tag

• The audio tag is used to embed sound content in a

document, such as music or other audio streams.
 Attributes
Attribute Value Description

autoplay autoplay Specifies that the audio will start playing as soon as
it is ready

controls controls Specifies that audio controls should be displayed

(such as a play/pause button etc)

loop loop Specifies that the audio will start over again, every
time it is finished

muted muted Specifies that the audio output should be muted

preload auto Specifies if and how the author thinks the audio
metadata should be loaded when the page loads
none

src URL Specifies the URL of the audio file

Example
 Video Tag

• Tag is used to embed video content in a document,

such as a movie clip or other video streams
 Attributes
Attribute Value Description
autoplay autoplay Specifies that the video will start playing as soon as it is ready

controls controls Specifies that video controls should be displayed (such as a

play/pause button etc).
height pixels Sets the height of the video player
loop loop Specifies that the video will start over again, every time it is finished

muted muted Specifies that the audio output of the video should be muted

poster URL Specifies an image to be shown while the video is downloading, or

until the user hits the play button

preload auto Specifies if and how the author thinks the video should be loaded
metadata when the page loads
none
src URL Specifies the URL of the video file
width pixels Sets the width of the video player
Del and ins Tag
 Adding a Border

• If you do not specify a border for the table, it will

be displayed without borders.
• A border is set using the CSS border property:
• Example
• table, th, td {
border: 1px solid black;
}
 HTML Table - Collapsed Borders

• If you want the borders to collapse into one

border, add the CSS border-collapse property:
Example
• table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
 HTML Table - Adding Cell Padding

• Cell padding specifies the space between the

cell content and its borders.
• If you do not specify a padding, the table cells
will be displayed without padding.
• To set the padding, use the
CSS padding property:
Example
• th, td {
padding: 15px;
}
 HTML Table - Left-align Headings

• By default, table headings are bold and centered.

• To left-align the table headings, use the CSS text-
align property:
Example
• th {
text-align: left;
}
 HTML Table - Adding Border Spacing

• Border spacing specifies the space between the

cells.
• To set the border spacing for a table, use the
CSS border-spacing property:
Example
• table {
border-spacing: 5px;
}
 HTML Table - Cells that Span Many Columns

• To make a cell span more than one column, use

the colspan attribute:
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>