SlideShare a Scribd company logo
Full Stack
Fundamentals of Web Design
• Web design refers to the design of websites
that are displayed on the internet.
• It usually refers to the user experience aspects
of website development rather than software
development.
Web Page & Web Site
Webpage Website
Webpage consists of content
regarding a single entity type
Website constitutes content
regarding several entities
A direct URL link or a website can
be used to access it
A domain address is used to access
it
A combination of webpages is
created using HTML and CSS
Information is in HTML language
An individual hypertext document
linked under a website
A collection of multiple pages
hosted on the server
Stores the contents or resources
that are to be displayed on a
website
Is a place used to display the
content
Webpage Website
Comparatively, less complex More complex to develop
Less time to develop Takes more time to develop
The web page address of any
specific website is directly
dependent on the website address
(domain). Webpage will not work
if the domain is down
Website address (domain) is
independent of webpage address.
If the webpage is deleted for any
reason, the website will still
continue to work. All other linked
webpages will also work as usual
Examples: Contact page,
Registration Page, Service Page,
About Us page and so on
Examples: Flipkart.com,
Nykaa.com, Amazon.com and
more
Web Application
• A Web application (Web app) is an application
program that is stored on a remote server
and delivered over the Internet through a
browser interface.
• Web services are Web apps by definition and
many, although not all, websites contain Web
apps.
Full Stack_HTML- Hypertext Markup Language
Web Application Website
Web application is designed
for interaction with end users.
Website basically contains
static content.
The user of web application
can read the content of web
application and also
manipulate the data.
The user of website only can
read the content of website
but not manipulate .
The web application site
should be precompiled before
deployment.
The website does not need to
be precompiled .
The function of a web
application is quite complex.
The function of website is
simple.
Web Application Web Site
Web application is interactive
for users.
Web site is not interactive for
users.
The browser capabilities
involved with a web application
is high.
The browser capabilities
involved with web site is high.
Integration is complex for web
application because of its
complex functionality.
Integration is simpler for web
site.
Web application mostly requires
authentication
In web site authentication is not
necessary.
EXAMPLE :- Amazon, Facebook,
etc.
EXAMPLE :- Breaking News,
Aktu website, etc.
Client-Server Architecture
• A client server application uses a two-tier
architecture whereas a web application uses
multi-tier architecture which consists of; user
client, middle tier, and application server.
• A web application uses a single-user system
unlike a client server application which uses
two users: client and server.
Full Stack_HTML- Hypertext Markup Language
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.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
• The <!DOCTYPE html> declaration defines that this document
is an HTML5 document
• The <html> element is the root element of an HTML page
• The <head> element contains meta information about the
HTML page
• The <title> element specifies a title for the HTML page (which
is shown in the browser's title bar or in the page's tab)
• The <body> element defines the document's body, and is a
container for all the visible contents, such as headings,
paragraphs, images, hyperlinks, tables, lists, etc.
• The <h1> element defines a large heading
• The <p> element defines a paragraph
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>
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>.
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML Attributes
• All HTML elements can have attributes
• Attributes provide additional information about
elements
• Attributes are always specified in the start tag
• Attributes usually come in name/value pairs
like: name="value"
The href Attribute
• The <a> tag defines a hyperlink.
The href attribute specifies the URL of the page
the link goes to:
<!DOCTYPE html>
<html>
<body>
<h2>The href Attribute</h2>
<p>HTML links are defined with the a tag. The link address is specified
in the href attribute:</p>
<a href="https://www.beejaacademy.com">Visit Beeja Academy</a>
</body>
</html>
The src Attribute
• The <img> tag is used to embed an image in an HTML page.
• The src attribute specifies the path to the image to be displayed
<!DOCTYPE html>
<html>
<body>
<h2>The src Attribute</h2>
<p>HTML images are defined with the img tag, and the filename
of the image source is specified in the src attribute:</p>
<img src="img_girl.jpg" width="500" height="600">
</body>
</html>
The width and height Attributes
• The <img> tag should also contain the width and height attributes,
which specifies the width and height of the image (in pixels)
<!DOCTYPE html>
<html>
<body>
<h2>Width and Height Attributes</h2>
<p>The width and height attributes of the img tag, defines the width
and height of the image:</p>
<img src="img_girl.jpg" width="500" height="600">
</body>
</html>
The alt Attribute
• The required alt attribute for the <img> tag
specifies an alternate text for an image, if the
image for some reason cannot be displayed.
• This can be due to slow connection, or an error in
the src attribute, or if the user uses a screen
reader.
<!DOCTYPE html>
<html>
<body>
<h2>The alt Attribute</h2>
<p>The alt attribute should reflect the image content, so users who
cannot see the image gets an understanding of what the image
contains:</p>
<img src="img_girl.jpg" alt="Girl with a jacket" width="500"
height="600">
</body>
</html>
The style Attribute
• The style attribute is used to add styles to an element, such as color,
font, size, and more.
<!DOCTYPE html>
<html>
<body>
<h2>The style Attribute</h2>
<p>The style attribute is used to add styles to an element, such as
color:</p>
<p style="color:red;">This is a red paragraph.</p>
</body>
</html>
The lang Attribute
• You should always include the lang attribute
inside the <html> tag, to declare the language of
the Web page. This is meant to assist search
engines and browsers.
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
The title Attribute
• The title attribute defines some extra information about an element.
• The value of the title attribute will be displayed as a tooltip when you
mouse over the element
<!DOCTYPE html>
<html>
<body>
<h2 title="I'm a header">The title Attribute</h2>
<p title="I'm a tooltip">Mouse over this paragraph, to display the title
attribute as a tooltip.</p>
</body>
</html>
HTML Styles
• Use the style attribute for styling HTML elements
• Use background-color for background color
• Use color for text colors
• Use font-family for text fonts
• Use font-size for text sizes
• Use text-align for text alignment
HTML Text Formatting
• <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
HTML Colors
• HTML colors are specified with predefined color
names, or with RGB, HEX, HSL, RGBA, or HSLA
values.
• <h1 style="background-color:DodgerBlue;">Hello
World</h1>
• <h1 style="color:Tomato;">Hello World</h1>
• <h1 style="border:2px solid Tomato;">Hello
World</h1>
HTML RGB Colors
• An RGB color value represents RED, GREEN, and
BLUE light sources.
• An RGBA color value is an extension of RGB with
an Alpha channel (opacity).
• rgb(red, green, blue)
• Each parameter (red, green, and blue) defines
the intensity of the color with a value between 0
and 255.
• This means that there are 256 x 256 x 256 =
16777216 possible colors!
RGBA Color Values
• RGBA color values are an extension of RGB color
values with an Alpha channel - which specifies
the opacity for a color.
• An RGBA color value is specified with:
• rgba(red, green, blue, alpha)
• The alpha parameter is a number between 0.0
(fully transparent) and 1.0 (not transparent at all)
HEX Color Values
• #rrggbb
• Where rr (red), gg (green) and bb (blue) are hexadecimal
values between 00 and ff (same as decimal 0-255).
• For example, #ff0000 is displayed as red, because red is
set to its highest value (ff), and the other two (green and
blue) are set to 00.
• Another example, #00ff00 is displayed as green, because
green is set to its highest value (ff), and the other two
(red and blue) are set to 00.
• To display black, set all color parameters to 00, like this:
#000000.
• To display white, set all color parameters to ff, like this:
#ffffff.
HSL Color Values
• hsl(hue, saturation, lightness)
• Hue is a degree on the color wheel from 0 to 360. 0 is
red, 120 is green, and 240 is blue.
• Saturation is a percentage value, 0% means a shade of
gray, and 100% is the full color.
• Lightness is also a percentage value, 0% is black, and
100% is white.
• Saturation
• Saturation can be described as the intensity of a color.
• 100% is pure color, no shades of gray
• 50% is 50% gray, but you can still see the color.
• 0% is completely gray, you can no longer see the color.
HTML Styles - CSS
• CSS stands for Cascading Style Sheets.
• CSS saves a lot of work. It can control the layout
of multiple web pages all at once.
• CSS can be added to HTML documents in 3 ways:
• Inline - by using the style attribute inside HTML
elements
• Internal - by using a <style> element in
the <head> section
• External - by using a <link> element to link to an
external CSS file
Inline CSS
• An inline CSS is used to apply a unique style to a single HTML
element.
• An inline CSS uses the style attribute of an HTML element.
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
</body>
</html>
Internal CSS
• An internal CSS is used to define a style for a single HTML page.
• An internal CSS is defined in the <head> section of an HTML page, within a <style> element.
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
External CSS
• An external style sheet is used to define the style for many HTML pages.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
"styles.css":
body {
background-
color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
HTML Images
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>
<h2>Width/Height Attributes or Style?</h2>
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
<img src="html5.gif" alt="HTML5 Icon"style="width:128px;height:128px;">
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Images on Another Server</h2>
<img src=“Image link" alt="lamborghini"
style="width:500px;height:500px;">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>The picture Element</h2>
<picture>
<source media="(min-width: 650px)" srcset="img_food.jpg">
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg" style="width:auto;">
</picture>
</body>
</html>
HTML Favicon
• A favicon is a small image displayed next to the page title in the browser
tab.
<!DOCTYPE html>
<html>
<head>
<title>My Page Title</title>
<link rel="icon" type="image/x-icon" href=“Image location or Link">
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
HTML Tables
<!DOCTYPE html>
<html>
<style>
table, th, td {
border:2px solid black;
}
</style>
<body>
<h2>A basic HTML table</h2>
<table style="width:100%">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial
Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
</body>
</html>
Table Borders
• When you add a border to a table, you also add
borders around each table cell:
• To add a border, use the CSS border property
on table, th, and td elements:
• Example
table, th, td {
border: 1px solid black;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
• Background-color
table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}
• Border radius
table, th, td {
border: 1px solid black;
border-radius: 10px;
}
th, td {
border: 1px solid black;
border-radius: 10px;
}
• Dotted Table Borders
– dotted
– dashed
– solid
– double
– groove
– ridge
– inset
– outset
– none
– hidden
th, td {
border-style: dotted;
border-color: #96D4D4;
}
!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
border-collapse: collapse;
}
</style>
<body>
<h2>Set the height of the second row to 200
pixels</h2>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr style="height:200px">
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
<table>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>43</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>57</td>
</tr>
</table>
tr:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
}
th:nth-child(even),td:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
}
HTML Lists
• HTML lists allow web developers to group a set
of related items in lists.
Unordered HTML List
• An unordered list starts with the <ul> tag. Each
list item starts with the <li> tag.
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ordered HTML List
• An ordered list starts with the <ol> tag. Each list
item starts with the <li> tag.
• The list items will be marked with numbers by
default
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
HTML Description Lists
• HTML also supports description lists.
• A description list is a list of terms, with a description of each
term.
• The <dl> tag defines the description list, the <dt> tag defines
the term (name), and the <dd> tag describes each term
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Value Description
disc Sets the list item marker to a bullet
(default)
circle Sets the list item marker to a circle
square Sets the list item marker to a square
none The list items will not be marked
<!DOCTYPE html>
<html>
<body>
<h2>Unordered List with Circle Bullets</h2>
<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Type Description
type="1" The list items will be numbered with numbers
(default)
type="A" The list items will be numbered with uppercase
letters
type="a" The list items will be numbered with lowercase
letters
type="I" The list items will be numbered with uppercase
roman numbers
type="i" The list items will be numbered with lowercase
roman numbers
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Letters</h2>
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
HTML class Attribute
• The HTML class attribute is used to specify a class for an HTML element.
• Multiple HTML elements can share the same class.
<!DOCTYPE html>
<html>
<head>
<style>
.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
.main {
text-align: center;
}
</style>
</head>
<body>
<h2>Multiple Classes</h2>
<h2 class="city
main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>
</body>
</html>
HTML Iframes
• An HTML iframe is used to display a web page
within a web page.
• The HTML <iframe> tag specifies an inline
frame.
• An inline frame is used to embed another
document within the current HTML document.
• Syntax
<iframe src="url" title="description"></iframe>
HTML JavaScript
• JavaScript makes HTML pages more dynamic and
interactive.
• The HTML <script> tag is used to define a client-side script
(JavaScript).
• The <script> element either contains script statements, or
it points to an external script file through the src attribute.
• Common uses for JavaScript are image manipulation,
form validation, and dynamic changes of content.
• To select an HTML element, JavaScript most often uses
the document.getElementById() method.
• This JavaScript example writes "Hello JavaScript!" into an
HTML element with id="demo"
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<p>JavaScript can change the content of an HTML element:</p>
<button type="button" onclick="myFunction()">Click Me!</button>
<p id="demo">This is a demonstration.</p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
</body>
</html>
HTML Responsive Web Design
• Responsive web design is about creating web
pages that look good on all devices!
• A responsive web design will automatically
adjust for different screen sizes and viewports.
• Responsive Web Design is about using HTML
and CSS to automatically resize, hide, shrink,
or enlarge, a website, to make it look good on
all devices (desktops, tablets, and phones)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>Responsive Image</h2>
<p>When the CSS width property is set in a percentage value, the image will
scale up and down when resizing the browser window. Resize the browser
window to see the effect.</p>
<img src="image.jpg" style="width:100%;">
</body>
</html>
Emojis in HTML
• Emojis are characters from the UTF-8
character set: 💗
😄 😍
• Emojis look like images, or icons, but they are
not.
• They are letters (characters) from the UTF-8
(Unicode) character set.
• UTF-8 covers almost all of the characters and
symbols in the world.
• <meta charset="UTF-8">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>Sized Emojis</h1>
<p style="font-size:48px">
&#128512; &#128516; &#128525; &#128151;
</p>
</body>
</html>
HTML Forms
• An HTML form is used to collect user input. The user input is most often sent to
a server for processing.
<!DOCTYPE html>
<html>
<body>
<h2>HTML Forms</h2>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Type Description
<input type="text"> Displays a single-line text input
field
<input type="radio"> Displays a radio button (for
selecting one of many choices)
<input type="checkbox"> Displays a checkbox (for selecting
zero or more of many choices)
<input type="submit"> Displays a submit button (for
submitting the form)
<input type="button"> Displays a clickable button
Form Attributes
The Action Attribute
• The action attribute defines the action to be
performed when the form is submitted.
• Usually, the form data is sent to a file on the
server when the user clicks on the submit
button.
• In the example below, the form data is sent to
a file called "action_page.php".
• This file contains a server-side script that
handles the form data
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname
" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname
" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
The Target Attribute
• The target attribute specifies where to display the
response that is received after submitting the form.
• The target attribute can have one of the following
values
Value Description
_blank The response is displayed in a new window or tab
_self The response is displayed in the current window
_parent The response is displayed in the parent frame
_top The response is displayed in the full body of the window
framename The response is displayed in a named iframe
The Method Attribute
• The method attribute specifies the HTTP method
to be used when submitting the form data.
• The form-data can be sent as URL variables
(with method="get") or as HTTP post transaction
(with method="post").
• The default HTTP method when submitting form
data is GET.
• Example
<form action="/action_page.php" method="get">
The Autocomplete Attribute
• The autocomplete attribute specifies whether
a form should have autocomplete on or off.
• When autocomplete is on, the browser
automatically complete values based on
values that the user has entered before.
• Example
<form action="/
action_page.php" autocomplete="on">
The Novalidate Attribute
• The novalidate attribute is a boolean attribute.
• When present, it specifies that the form-data
(input) should not be validated when
submitted.
• Example
• A form with a novalidate attribute:
• <form action="/action_page.php" novalidate>
HTML Input Types
• <input type="button">
• <input type="checkbox">
• <input type="color">
• <input type="date">
• <input type="datetime-
local">
• <input type="email">
• <input type="file">
• <input type="hidden">
• <input type="image">
• <input type="month">
• <input type="number">
• <input type="password">
• <input type="radio">
• <input type="range">
• <input type="reset">
• <input type="search">
• <input type="submit">
• <input type="tel">
• <input type="text">
• <input type="time">
• <input type="url">
• <input type="week">
HTML Multimedia
• Multimedia on the web is sound, music, videos,
movies, and animations.
• To show a video in HTML, use
the <video> element:
• Example
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
HTML <video> Autoplay
• To start a video automatically, use
the autoplay attribute:
• Example
• <video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
HTML Audio
• The HTML <audio> element is used to play an audio file
on a web page.
• The HTML <audio> Element
• To play an audio file in HTML, use the <audio> element:
• Example
• <audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Full Stack_HTML- Hypertext Markup Language

More Related Content

Similar to Full Stack_HTML- Hypertext Markup Language (20)

HTML & CSS.ppt
HTML & CSS.pptHTML & CSS.ppt
HTML & CSS.ppt
vaseemshaik21
 
Html Workshop
Html WorkshopHtml Workshop
Html Workshop
vardanyan99
 
Web Page Designing
Web Page DesigningWeb Page Designing
Web Page Designing
Amit Mali
 
html and css- 23091 3154 458-5d4341a0.ppt
html and css- 23091 3154 458-5d4341a0.ppthtml and css- 23091 3154 458-5d4341a0.ppt
html and css- 23091 3154 458-5d4341a0.ppt
ahoveida
 
Introduction to Web Techniques_Key componenets_HTML Basics
Introduction to Web Techniques_Key componenets_HTML BasicsIntroduction to Web Techniques_Key componenets_HTML Basics
Introduction to Web Techniques_Key componenets_HTML Basics
DeepakUlape2
 
Web forms and html (lect 1)
Web forms and html (lect 1)Web forms and html (lect 1)
Web forms and html (lect 1)
Salman Memon
 
Frontend Devlopment internship batch 2024.pptx
Frontend Devlopment internship batch 2024.pptxFrontend Devlopment internship batch 2024.pptx
Frontend Devlopment internship batch 2024.pptx
bankheleom
 
Frontend Devlopment internship batch 2024-2.pptx
Frontend Devlopment internship batch 2024-2.pptxFrontend Devlopment internship batch 2024-2.pptx
Frontend Devlopment internship batch 2024-2.pptx
bankheleom
 
web page.pptxb dvcdhgdhdbdvdhudvehsusvsudb
web page.pptxb dvcdhgdhdbdvdhudvehsusvsudbweb page.pptxb dvcdhgdhdbdvdhudvehsusvsudb
web page.pptxb dvcdhgdhdbdvdhudvehsusvsudb
natiwoss2009
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
Himanshu Pathak
 
BITM3730Week1.pptx
BITM3730Week1.pptxBITM3730Week1.pptx
BITM3730Week1.pptx
MattMarino13
 
Html-meeting1-1.pptx
Html-meeting1-1.pptxHtml-meeting1-1.pptx
Html-meeting1-1.pptx
YoussefAbobakr
 
Basic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJS
Basic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJSBasic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJS
Basic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJS
Deepak Upadhyay
 
1-22-24 INFO 2106.pptx
1-22-24 INFO 2106.pptx1-22-24 INFO 2106.pptx
1-22-24 INFO 2106.pptx
MattMarino13
 
Day1-HTML-CSS some basic css and html.pdf
Day1-HTML-CSS some basic css and html.pdfDay1-HTML-CSS some basic css and html.pdf
Day1-HTML-CSS some basic css and html.pdf
enasashri12
 
Unit2_2024.pptx are related to PHP HTML CSS
Unit2_2024.pptx are related to PHP HTML CSSUnit2_2024.pptx are related to PHP HTML CSS
Unit2_2024.pptx are related to PHP HTML CSS
abhinandankondekar2
 
Web development Training in Ambala ! Batra Computer Centre
Web development Training in Ambala ! Batra Computer CentreWeb development Training in Ambala ! Batra Computer Centre
Web development Training in Ambala ! Batra Computer Centre
jatin batra
 
gdsc-html-ppt.pptx
gdsc-html-ppt.pptxgdsc-html-ppt.pptx
gdsc-html-ppt.pptx
yuvakiran15
 
Java script and html new
Java script and html newJava script and html new
Java script and html new
Malik M. Ali Shahid
 
Java script and html
Java script and htmlJava script and html
Java script and html
Malik M. Ali Shahid
 
Web Page Designing
Web Page DesigningWeb Page Designing
Web Page Designing
Amit Mali
 
html and css- 23091 3154 458-5d4341a0.ppt
html and css- 23091 3154 458-5d4341a0.ppthtml and css- 23091 3154 458-5d4341a0.ppt
html and css- 23091 3154 458-5d4341a0.ppt
ahoveida
 
Introduction to Web Techniques_Key componenets_HTML Basics
Introduction to Web Techniques_Key componenets_HTML BasicsIntroduction to Web Techniques_Key componenets_HTML Basics
Introduction to Web Techniques_Key componenets_HTML Basics
DeepakUlape2
 
Web forms and html (lect 1)
Web forms and html (lect 1)Web forms and html (lect 1)
Web forms and html (lect 1)
Salman Memon
 
Frontend Devlopment internship batch 2024.pptx
Frontend Devlopment internship batch 2024.pptxFrontend Devlopment internship batch 2024.pptx
Frontend Devlopment internship batch 2024.pptx
bankheleom
 
Frontend Devlopment internship batch 2024-2.pptx
Frontend Devlopment internship batch 2024-2.pptxFrontend Devlopment internship batch 2024-2.pptx
Frontend Devlopment internship batch 2024-2.pptx
bankheleom
 
web page.pptxb dvcdhgdhdbdvdhudvehsusvsudb
web page.pptxb dvcdhgdhdbdvdhudvehsusvsudbweb page.pptxb dvcdhgdhdbdvdhudvehsusvsudb
web page.pptxb dvcdhgdhdbdvdhudvehsusvsudb
natiwoss2009
 
BITM3730Week1.pptx
BITM3730Week1.pptxBITM3730Week1.pptx
BITM3730Week1.pptx
MattMarino13
 
Basic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJS
Basic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJSBasic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJS
Basic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJS
Deepak Upadhyay
 
1-22-24 INFO 2106.pptx
1-22-24 INFO 2106.pptx1-22-24 INFO 2106.pptx
1-22-24 INFO 2106.pptx
MattMarino13
 
Day1-HTML-CSS some basic css and html.pdf
Day1-HTML-CSS some basic css and html.pdfDay1-HTML-CSS some basic css and html.pdf
Day1-HTML-CSS some basic css and html.pdf
enasashri12
 
Unit2_2024.pptx are related to PHP HTML CSS
Unit2_2024.pptx are related to PHP HTML CSSUnit2_2024.pptx are related to PHP HTML CSS
Unit2_2024.pptx are related to PHP HTML CSS
abhinandankondekar2
 
Web development Training in Ambala ! Batra Computer Centre
Web development Training in Ambala ! Batra Computer CentreWeb development Training in Ambala ! Batra Computer Centre
Web development Training in Ambala ! Batra Computer Centre
jatin batra
 
gdsc-html-ppt.pptx
gdsc-html-ppt.pptxgdsc-html-ppt.pptx
gdsc-html-ppt.pptx
yuvakiran15
 

More from Jeyarajs7 (15)

Python Using Face Detection Coding Session
Python Using Face Detection Coding SessionPython Using Face Detection Coding Session
Python Using Face Detection Coding Session
Jeyarajs7
 
Python Using Face Detection Coding Session
Python Using Face Detection Coding SessionPython Using Face Detection Coding Session
Python Using Face Detection Coding Session
Jeyarajs7
 
Full Stack_Reac web Development and Application
Full Stack_Reac web Development and ApplicationFull Stack_Reac web Development and Application
Full Stack_Reac web Development and Application
Jeyarajs7
 
AI PPT 2023 for College Students and Arts
AI PPT 2023 for College Students and ArtsAI PPT 2023 for College Students and Arts
AI PPT 2023 for College Students and Arts
Jeyarajs7
 
AI PPT 2023 for College Students and Arts
AI PPT 2023 for College Students and ArtsAI PPT 2023 for College Students and Arts
AI PPT 2023 for College Students and Arts
Jeyarajs7
 
Technology Readiness Level in Computer Sci
Technology Readiness Level in Computer SciTechnology Readiness Level in Computer Sci
Technology Readiness Level in Computer Sci
Jeyarajs7
 
Technology Readiness Level in Computer Sci
Technology Readiness Level in Computer SciTechnology Readiness Level in Computer Sci
Technology Readiness Level in Computer Sci
Jeyarajs7
 
DIGITAL MARKETING UPDATE VERSION NEW ONE
DIGITAL MARKETING UPDATE VERSION NEW ONEDIGITAL MARKETING UPDATE VERSION NEW ONE
DIGITAL MARKETING UPDATE VERSION NEW ONE
Jeyarajs7
 
IT Related file Hardware and Software SPec
IT Related file Hardware and Software SPecIT Related file Hardware and Software SPec
IT Related file Hardware and Software SPec
Jeyarajs7
 
Cream & Pastel Palette Healthcare Center Characters By Slidesgos.pptx
Cream & Pastel Palette Healthcare Center Characters By Slidesgos.pptxCream & Pastel Palette Healthcare Center Characters By Slidesgos.pptx
Cream & Pastel Palette Healthcare Center Characters By Slidesgos.pptx
Jeyarajs7
 
Math Subject for Elementary - 5th Grade_ Fractions I _ by Slidesgo.pptx
Math Subject for Elementary - 5th Grade_ Fractions I _ by Slidesgo.pptxMath Subject for Elementary - 5th Grade_ Fractions I _ by Slidesgo.pptx
Math Subject for Elementary - 5th Grade_ Fractions I _ by Slidesgo.pptx
Jeyarajs7
 
About Mental Health - Mrs.Sivakakthi.pptx
About Mental Health - Mrs.Sivakakthi.pptxAbout Mental Health - Mrs.Sivakakthi.pptx
About Mental Health - Mrs.Sivakakthi.pptx
Jeyarajs7
 
Machine Coding , Machine Language and AI
Machine Coding , Machine Language and AIMachine Coding , Machine Language and AI
Machine Coding , Machine Language and AI
Jeyarajs7
 
Basics of Fullstack like Web Development
Basics of Fullstack like Web DevelopmentBasics of Fullstack like Web Development
Basics of Fullstack like Web Development
Jeyarajs7
 
C Programming with oops Concept and Pointer
C Programming with oops Concept and PointerC Programming with oops Concept and Pointer
C Programming with oops Concept and Pointer
Jeyarajs7
 
Python Using Face Detection Coding Session
Python Using Face Detection Coding SessionPython Using Face Detection Coding Session
Python Using Face Detection Coding Session
Jeyarajs7
 
Python Using Face Detection Coding Session
Python Using Face Detection Coding SessionPython Using Face Detection Coding Session
Python Using Face Detection Coding Session
Jeyarajs7
 
Full Stack_Reac web Development and Application
Full Stack_Reac web Development and ApplicationFull Stack_Reac web Development and Application
Full Stack_Reac web Development and Application
Jeyarajs7
 
AI PPT 2023 for College Students and Arts
AI PPT 2023 for College Students and ArtsAI PPT 2023 for College Students and Arts
AI PPT 2023 for College Students and Arts
Jeyarajs7
 
AI PPT 2023 for College Students and Arts
AI PPT 2023 for College Students and ArtsAI PPT 2023 for College Students and Arts
AI PPT 2023 for College Students and Arts
Jeyarajs7
 
Technology Readiness Level in Computer Sci
Technology Readiness Level in Computer SciTechnology Readiness Level in Computer Sci
Technology Readiness Level in Computer Sci
Jeyarajs7
 
Technology Readiness Level in Computer Sci
Technology Readiness Level in Computer SciTechnology Readiness Level in Computer Sci
Technology Readiness Level in Computer Sci
Jeyarajs7
 
DIGITAL MARKETING UPDATE VERSION NEW ONE
DIGITAL MARKETING UPDATE VERSION NEW ONEDIGITAL MARKETING UPDATE VERSION NEW ONE
DIGITAL MARKETING UPDATE VERSION NEW ONE
Jeyarajs7
 
IT Related file Hardware and Software SPec
IT Related file Hardware and Software SPecIT Related file Hardware and Software SPec
IT Related file Hardware and Software SPec
Jeyarajs7
 
Cream & Pastel Palette Healthcare Center Characters By Slidesgos.pptx
Cream & Pastel Palette Healthcare Center Characters By Slidesgos.pptxCream & Pastel Palette Healthcare Center Characters By Slidesgos.pptx
Cream & Pastel Palette Healthcare Center Characters By Slidesgos.pptx
Jeyarajs7
 
Math Subject for Elementary - 5th Grade_ Fractions I _ by Slidesgo.pptx
Math Subject for Elementary - 5th Grade_ Fractions I _ by Slidesgo.pptxMath Subject for Elementary - 5th Grade_ Fractions I _ by Slidesgo.pptx
Math Subject for Elementary - 5th Grade_ Fractions I _ by Slidesgo.pptx
Jeyarajs7
 
About Mental Health - Mrs.Sivakakthi.pptx
About Mental Health - Mrs.Sivakakthi.pptxAbout Mental Health - Mrs.Sivakakthi.pptx
About Mental Health - Mrs.Sivakakthi.pptx
Jeyarajs7
 
Machine Coding , Machine Language and AI
Machine Coding , Machine Language and AIMachine Coding , Machine Language and AI
Machine Coding , Machine Language and AI
Jeyarajs7
 
Basics of Fullstack like Web Development
Basics of Fullstack like Web DevelopmentBasics of Fullstack like Web Development
Basics of Fullstack like Web Development
Jeyarajs7
 
C Programming with oops Concept and Pointer
C Programming with oops Concept and PointerC Programming with oops Concept and Pointer
C Programming with oops Concept and Pointer
Jeyarajs7
 
Ad

Recently uploaded (20)

Webinar On Steel Melting IIF of steel for rdso
Webinar  On Steel  Melting IIF of steel for rdsoWebinar  On Steel  Melting IIF of steel for rdso
Webinar On Steel Melting IIF of steel for rdso
KapilParyani3
 
02 - Ethics & Professionalism - BEM, IEM, MySET.PPT
02 - Ethics & Professionalism - BEM, IEM, MySET.PPT02 - Ethics & Professionalism - BEM, IEM, MySET.PPT
02 - Ethics & Professionalism - BEM, IEM, MySET.PPT
SharinAbGhani1
 
Software Developer Portfolio: Backend Architecture & Performance Optimization
Software Developer Portfolio: Backend Architecture & Performance OptimizationSoftware Developer Portfolio: Backend Architecture & Performance Optimization
Software Developer Portfolio: Backend Architecture & Performance Optimization
kiwoong (daniel) kim
 
Research_Sensitization_&_Innovative_Project_Development.pptx
Research_Sensitization_&_Innovative_Project_Development.pptxResearch_Sensitization_&_Innovative_Project_Development.pptx
Research_Sensitization_&_Innovative_Project_Development.pptx
niranjancse
 
22PCOAM16 _ML_Unit 3 Notes & Question bank
22PCOAM16 _ML_Unit 3 Notes & Question bank22PCOAM16 _ML_Unit 3 Notes & Question bank
22PCOAM16 _ML_Unit 3 Notes & Question bank
Guru Nanak Technical Institutions
 
Forecasting Road Accidents Using Deep Learning Approach: Policies to Improve ...
Forecasting Road Accidents Using Deep Learning Approach: Policies to Improve ...Forecasting Road Accidents Using Deep Learning Approach: Policies to Improve ...
Forecasting Road Accidents Using Deep Learning Approach: Policies to Improve ...
Journal of Soft Computing in Civil Engineering
 
IOt Based Research on Challenges and Future
IOt Based Research on Challenges and FutureIOt Based Research on Challenges and Future
IOt Based Research on Challenges and Future
SACHINSAHU821405
 
Presentación Tomografía Axial Computarizada
Presentación Tomografía Axial ComputarizadaPresentación Tomografía Axial Computarizada
Presentación Tomografía Axial Computarizada
Juliana Ovalle Jiménez
 
SEW make Brake BE05 – BE30 Brake – Repair Kit
SEW make Brake BE05 – BE30 Brake – Repair KitSEW make Brake BE05 – BE30 Brake – Repair Kit
SEW make Brake BE05 – BE30 Brake – Repair Kit
projectultramechanix
 
Call For Papers - International Journal on Natural Language Computing (IJNLC)
Call For Papers - International Journal on Natural Language Computing (IJNLC)Call For Papers - International Journal on Natural Language Computing (IJNLC)
Call For Papers - International Journal on Natural Language Computing (IJNLC)
kevig
 
May 2025: Top 10 Read Articles Advanced Information Technology
May 2025: Top 10 Read Articles Advanced Information TechnologyMay 2025: Top 10 Read Articles Advanced Information Technology
May 2025: Top 10 Read Articles Advanced Information Technology
ijait
 
Numerical Investigation of the Aerodynamic Characteristics for a Darrieus H-t...
Numerical Investigation of the Aerodynamic Characteristics for a Darrieus H-t...Numerical Investigation of the Aerodynamic Characteristics for a Darrieus H-t...
Numerical Investigation of the Aerodynamic Characteristics for a Darrieus H-t...
Mohamed905031
 
Irja Straus - Beyond Pass and Fail - DevTalks.pdf
Irja Straus - Beyond Pass and Fail - DevTalks.pdfIrja Straus - Beyond Pass and Fail - DevTalks.pdf
Irja Straus - Beyond Pass and Fail - DevTalks.pdf
Irja Straus
 
Computer_vision-photometric_image_formation.pdf
Computer_vision-photometric_image_formation.pdfComputer_vision-photometric_image_formation.pdf
Computer_vision-photometric_image_formation.pdf
kumarprem6767merp
 
PREDICTION OF ROOM TEMPERATURE SIDEEFFECT DUE TOFAST DEMAND RESPONSEFOR BUILD...
PREDICTION OF ROOM TEMPERATURE SIDEEFFECT DUE TOFAST DEMAND RESPONSEFOR BUILD...PREDICTION OF ROOM TEMPERATURE SIDEEFFECT DUE TOFAST DEMAND RESPONSEFOR BUILD...
PREDICTION OF ROOM TEMPERATURE SIDEEFFECT DUE TOFAST DEMAND RESPONSEFOR BUILD...
ijccmsjournal
 
Rigor, ethics, wellbeing and resilience in the ICT doctoral journey
Rigor, ethics, wellbeing and resilience in the ICT doctoral journeyRigor, ethics, wellbeing and resilience in the ICT doctoral journey
Rigor, ethics, wellbeing and resilience in the ICT doctoral journey
Yannis
 
May 2025: Top 10 Cited Articles in Software Engineering & Applications Intern...
May 2025: Top 10 Cited Articles in Software Engineering & Applications Intern...May 2025: Top 10 Cited Articles in Software Engineering & Applications Intern...
May 2025: Top 10 Cited Articles in Software Engineering & Applications Intern...
sebastianku31
 
Artificial Power 2025 raport krajobrazowy
Artificial Power 2025 raport krajobrazowyArtificial Power 2025 raport krajobrazowy
Artificial Power 2025 raport krajobrazowy
dominikamizerska1
 
Transformimet e sinjaleve numerike duke perdorur transformimet
Transformimet  e sinjaleve numerike duke perdorur transformimetTransformimet  e sinjaleve numerike duke perdorur transformimet
Transformimet e sinjaleve numerike duke perdorur transformimet
IndritEnesi1
 
First Review PPT gfinal gyft ftu liu yrfut go
First Review PPT gfinal gyft  ftu liu yrfut goFirst Review PPT gfinal gyft  ftu liu yrfut go
First Review PPT gfinal gyft ftu liu yrfut go
Sowndarya6
 
Webinar On Steel Melting IIF of steel for rdso
Webinar  On Steel  Melting IIF of steel for rdsoWebinar  On Steel  Melting IIF of steel for rdso
Webinar On Steel Melting IIF of steel for rdso
KapilParyani3
 
02 - Ethics & Professionalism - BEM, IEM, MySET.PPT
02 - Ethics & Professionalism - BEM, IEM, MySET.PPT02 - Ethics & Professionalism - BEM, IEM, MySET.PPT
02 - Ethics & Professionalism - BEM, IEM, MySET.PPT
SharinAbGhani1
 
Software Developer Portfolio: Backend Architecture & Performance Optimization
Software Developer Portfolio: Backend Architecture & Performance OptimizationSoftware Developer Portfolio: Backend Architecture & Performance Optimization
Software Developer Portfolio: Backend Architecture & Performance Optimization
kiwoong (daniel) kim
 
Research_Sensitization_&_Innovative_Project_Development.pptx
Research_Sensitization_&_Innovative_Project_Development.pptxResearch_Sensitization_&_Innovative_Project_Development.pptx
Research_Sensitization_&_Innovative_Project_Development.pptx
niranjancse
 
IOt Based Research on Challenges and Future
IOt Based Research on Challenges and FutureIOt Based Research on Challenges and Future
IOt Based Research on Challenges and Future
SACHINSAHU821405
 
Presentación Tomografía Axial Computarizada
Presentación Tomografía Axial ComputarizadaPresentación Tomografía Axial Computarizada
Presentación Tomografía Axial Computarizada
Juliana Ovalle Jiménez
 
SEW make Brake BE05 – BE30 Brake – Repair Kit
SEW make Brake BE05 – BE30 Brake – Repair KitSEW make Brake BE05 – BE30 Brake – Repair Kit
SEW make Brake BE05 – BE30 Brake – Repair Kit
projectultramechanix
 
Call For Papers - International Journal on Natural Language Computing (IJNLC)
Call For Papers - International Journal on Natural Language Computing (IJNLC)Call For Papers - International Journal on Natural Language Computing (IJNLC)
Call For Papers - International Journal on Natural Language Computing (IJNLC)
kevig
 
May 2025: Top 10 Read Articles Advanced Information Technology
May 2025: Top 10 Read Articles Advanced Information TechnologyMay 2025: Top 10 Read Articles Advanced Information Technology
May 2025: Top 10 Read Articles Advanced Information Technology
ijait
 
Numerical Investigation of the Aerodynamic Characteristics for a Darrieus H-t...
Numerical Investigation of the Aerodynamic Characteristics for a Darrieus H-t...Numerical Investigation of the Aerodynamic Characteristics for a Darrieus H-t...
Numerical Investigation of the Aerodynamic Characteristics for a Darrieus H-t...
Mohamed905031
 
Irja Straus - Beyond Pass and Fail - DevTalks.pdf
Irja Straus - Beyond Pass and Fail - DevTalks.pdfIrja Straus - Beyond Pass and Fail - DevTalks.pdf
Irja Straus - Beyond Pass and Fail - DevTalks.pdf
Irja Straus
 
Computer_vision-photometric_image_formation.pdf
Computer_vision-photometric_image_formation.pdfComputer_vision-photometric_image_formation.pdf
Computer_vision-photometric_image_formation.pdf
kumarprem6767merp
 
PREDICTION OF ROOM TEMPERATURE SIDEEFFECT DUE TOFAST DEMAND RESPONSEFOR BUILD...
PREDICTION OF ROOM TEMPERATURE SIDEEFFECT DUE TOFAST DEMAND RESPONSEFOR BUILD...PREDICTION OF ROOM TEMPERATURE SIDEEFFECT DUE TOFAST DEMAND RESPONSEFOR BUILD...
PREDICTION OF ROOM TEMPERATURE SIDEEFFECT DUE TOFAST DEMAND RESPONSEFOR BUILD...
ijccmsjournal
 
Rigor, ethics, wellbeing and resilience in the ICT doctoral journey
Rigor, ethics, wellbeing and resilience in the ICT doctoral journeyRigor, ethics, wellbeing and resilience in the ICT doctoral journey
Rigor, ethics, wellbeing and resilience in the ICT doctoral journey
Yannis
 
May 2025: Top 10 Cited Articles in Software Engineering & Applications Intern...
May 2025: Top 10 Cited Articles in Software Engineering & Applications Intern...May 2025: Top 10 Cited Articles in Software Engineering & Applications Intern...
May 2025: Top 10 Cited Articles in Software Engineering & Applications Intern...
sebastianku31
 
Artificial Power 2025 raport krajobrazowy
Artificial Power 2025 raport krajobrazowyArtificial Power 2025 raport krajobrazowy
Artificial Power 2025 raport krajobrazowy
dominikamizerska1
 
Transformimet e sinjaleve numerike duke perdorur transformimet
Transformimet  e sinjaleve numerike duke perdorur transformimetTransformimet  e sinjaleve numerike duke perdorur transformimet
Transformimet e sinjaleve numerike duke perdorur transformimet
IndritEnesi1
 
First Review PPT gfinal gyft ftu liu yrfut go
First Review PPT gfinal gyft  ftu liu yrfut goFirst Review PPT gfinal gyft  ftu liu yrfut go
First Review PPT gfinal gyft ftu liu yrfut go
Sowndarya6
 
Ad

Full Stack_HTML- Hypertext Markup Language

  • 2. Fundamentals of Web Design • Web design refers to the design of websites that are displayed on the internet. • It usually refers to the user experience aspects of website development rather than software development.
  • 3. Web Page & Web Site Webpage Website Webpage consists of content regarding a single entity type Website constitutes content regarding several entities A direct URL link or a website can be used to access it A domain address is used to access it A combination of webpages is created using HTML and CSS Information is in HTML language An individual hypertext document linked under a website A collection of multiple pages hosted on the server Stores the contents or resources that are to be displayed on a website Is a place used to display the content
  • 4. Webpage Website Comparatively, less complex More complex to develop Less time to develop Takes more time to develop The web page address of any specific website is directly dependent on the website address (domain). Webpage will not work if the domain is down Website address (domain) is independent of webpage address. If the webpage is deleted for any reason, the website will still continue to work. All other linked webpages will also work as usual Examples: Contact page, Registration Page, Service Page, About Us page and so on Examples: Flipkart.com, Nykaa.com, Amazon.com and more
  • 5. Web Application • A Web application (Web app) is an application program that is stored on a remote server and delivered over the Internet through a browser interface. • Web services are Web apps by definition and many, although not all, websites contain Web apps.
  • 7. Web Application Website Web application is designed for interaction with end users. Website basically contains static content. The user of web application can read the content of web application and also manipulate the data. The user of website only can read the content of website but not manipulate . The web application site should be precompiled before deployment. The website does not need to be precompiled . The function of a web application is quite complex. The function of website is simple.
  • 8. Web Application Web Site Web application is interactive for users. Web site is not interactive for users. The browser capabilities involved with a web application is high. The browser capabilities involved with web site is high. Integration is complex for web application because of its complex functionality. Integration is simpler for web site. Web application mostly requires authentication In web site authentication is not necessary. EXAMPLE :- Amazon, Facebook, etc. EXAMPLE :- Breaking News, Aktu website, etc.
  • 9. Client-Server Architecture • A client server application uses a two-tier architecture whereas a web application uses multi-tier architecture which consists of; user client, middle tier, and application server. • A web application uses a single-user system unlike a client server application which uses two users: client and server.
  • 11. 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.
  • 12. <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
  • 13. • The <!DOCTYPE html> declaration defines that this document is an HTML5 document • The <html> element is the root element of an HTML page • The <head> element contains meta information about the HTML page • The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab) • The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc. • The <h1> element defines a large heading • The <p> element defines a paragraph
  • 14. 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>
  • 15. 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>. <!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
  • 16. HTML Attributes • All HTML elements can have attributes • Attributes provide additional information about elements • Attributes are always specified in the start tag • Attributes usually come in name/value pairs like: name="value" The href Attribute • The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to:
  • 17. <!DOCTYPE html> <html> <body> <h2>The href Attribute</h2> <p>HTML links are defined with the a tag. The link address is specified in the href attribute:</p> <a href="https://www.beejaacademy.com">Visit Beeja Academy</a> </body> </html>
  • 18. The src Attribute • The <img> tag is used to embed an image in an HTML page. • The src attribute specifies the path to the image to be displayed <!DOCTYPE html> <html> <body> <h2>The src Attribute</h2> <p>HTML images are defined with the img tag, and the filename of the image source is specified in the src attribute:</p> <img src="img_girl.jpg" width="500" height="600"> </body> </html>
  • 19. The width and height Attributes • The <img> tag should also contain the width and height attributes, which specifies the width and height of the image (in pixels) <!DOCTYPE html> <html> <body> <h2>Width and Height Attributes</h2> <p>The width and height attributes of the img tag, defines the width and height of the image:</p> <img src="img_girl.jpg" width="500" height="600"> </body> </html>
  • 20. The alt Attribute • The required alt attribute for the <img> tag specifies an alternate text for an image, if the image for some reason cannot be displayed. • This can be due to slow connection, or an error in the src attribute, or if the user uses a screen reader.
  • 21. <!DOCTYPE html> <html> <body> <h2>The alt Attribute</h2> <p>The alt attribute should reflect the image content, so users who cannot see the image gets an understanding of what the image contains:</p> <img src="img_girl.jpg" alt="Girl with a jacket" width="500" height="600"> </body> </html>
  • 22. The style Attribute • The style attribute is used to add styles to an element, such as color, font, size, and more. <!DOCTYPE html> <html> <body> <h2>The style Attribute</h2> <p>The style attribute is used to add styles to an element, such as color:</p> <p style="color:red;">This is a red paragraph.</p> </body> </html>
  • 23. The lang Attribute • You should always include the lang attribute inside the <html> tag, to declare the language of the Web page. This is meant to assist search engines and browsers. <!DOCTYPE html> <html lang="en"> <body> ... </body> </html>
  • 24. The title Attribute • The title attribute defines some extra information about an element. • The value of the title attribute will be displayed as a tooltip when you mouse over the element <!DOCTYPE html> <html> <body> <h2 title="I'm a header">The title Attribute</h2> <p title="I'm a tooltip">Mouse over this paragraph, to display the title attribute as a tooltip.</p> </body> </html>
  • 25. HTML Styles • Use the style attribute for styling HTML elements • Use background-color for background color • Use color for text colors • Use font-family for text fonts • Use font-size for text sizes • Use text-align for text alignment
  • 26. HTML Text Formatting • <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
  • 27. HTML Colors • HTML colors are specified with predefined color names, or with RGB, HEX, HSL, RGBA, or HSLA values. • <h1 style="background-color:DodgerBlue;">Hello World</h1> • <h1 style="color:Tomato;">Hello World</h1> • <h1 style="border:2px solid Tomato;">Hello World</h1>
  • 28. HTML RGB Colors • An RGB color value represents RED, GREEN, and BLUE light sources. • An RGBA color value is an extension of RGB with an Alpha channel (opacity). • rgb(red, green, blue) • Each parameter (red, green, and blue) defines the intensity of the color with a value between 0 and 255. • This means that there are 256 x 256 x 256 = 16777216 possible colors!
  • 29. RGBA Color Values • RGBA color values are an extension of RGB color values with an Alpha channel - which specifies the opacity for a color. • An RGBA color value is specified with: • rgba(red, green, blue, alpha) • The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all)
  • 30. HEX Color Values • #rrggbb • Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-255). • For example, #ff0000 is displayed as red, because red is set to its highest value (ff), and the other two (green and blue) are set to 00. • Another example, #00ff00 is displayed as green, because green is set to its highest value (ff), and the other two (red and blue) are set to 00. • To display black, set all color parameters to 00, like this: #000000. • To display white, set all color parameters to ff, like this: #ffffff.
  • 31. HSL Color Values • hsl(hue, saturation, lightness) • Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue. • Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color. • Lightness is also a percentage value, 0% is black, and 100% is white. • Saturation • Saturation can be described as the intensity of a color. • 100% is pure color, no shades of gray • 50% is 50% gray, but you can still see the color. • 0% is completely gray, you can no longer see the color.
  • 32. HTML Styles - CSS • CSS stands for Cascading Style Sheets. • CSS saves a lot of work. It can control the layout of multiple web pages all at once. • CSS can be added to HTML documents in 3 ways: • Inline - by using the style attribute inside HTML elements • Internal - by using a <style> element in the <head> section • External - by using a <link> element to link to an external CSS file
  • 33. Inline CSS • An inline CSS is used to apply a unique style to a single HTML element. • An inline CSS uses the style attribute of an HTML element. <!DOCTYPE html> <html> <body> <h1 style="color:blue;">A Blue Heading</h1> <p style="color:red;">A red paragraph.</p> </body> </html>
  • 34. Internal CSS • An internal CSS is used to define a style for a single HTML page. • An internal CSS is defined in the <head> section of an HTML page, within a <style> element. <!DOCTYPE html> <html> <head> <style> body {background-color: powderblue;} h1 {color: blue;} p {color: red;} </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
  • 35. External CSS • An external style sheet is used to define the style for many HTML pages. <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> "styles.css": body { background- color: powderblue; } h1 { color: blue; } p { color: red; }
  • 36. HTML Images <!DOCTYPE html> <html> <head> <style> img { width: 100%; } </style> </head> <body> <h2>Width/Height Attributes or Style?</h2> <img src="html5.gif" alt="HTML5 Icon" width="128" height="128"> <img src="html5.gif" alt="HTML5 Icon"style="width:128px;height:128px;"> </body> </html>
  • 37. <!DOCTYPE html> <html> <body> <h2>Images on Another Server</h2> <img src=“Image link" alt="lamborghini" style="width:500px;height:500px;"> </body> </html>
  • 38. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <h2>The picture Element</h2> <picture> <source media="(min-width: 650px)" srcset="img_food.jpg"> <source media="(min-width: 465px)" srcset="img_car.jpg"> <img src="img_girl.jpg" style="width:auto;"> </picture> </body> </html>
  • 39. HTML Favicon • A favicon is a small image displayed next to the page title in the browser tab. <!DOCTYPE html> <html> <head> <title>My Page Title</title> <link rel="icon" type="image/x-icon" href=“Image location or Link"> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> </body> </html>
  • 40. HTML Tables <!DOCTYPE html> <html> <style> table, th, td { border:2px solid black; } </style> <body> <h2>A basic HTML table</h2> <table style="width:100%"> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> </table> </body> </html>
  • 41. Table Borders • When you add a border to a table, you also add borders around each table cell: • To add a border, use the CSS border property on table, th, and td elements: • Example table, th, td { border: 1px solid black; } table, th, td { border: 1px solid black; border-collapse: collapse; }
  • 42. • Background-color table, th, td { border: 1px solid white; border-collapse: collapse; } th, td { background-color: #96D4D4; }
  • 43. • Border radius table, th, td { border: 1px solid black; border-radius: 10px; } th, td { border: 1px solid black; border-radius: 10px; }
  • 44. • Dotted Table Borders – dotted – dashed – solid – double – groove – ridge – inset – outset – none – hidden th, td { border-style: dotted; border-color: #96D4D4; }
  • 45. !DOCTYPE html> <html> <style> table, th, td { border:1px solid black; border-collapse: collapse; } </style> <body> <h2>Set the height of the second row to 200 pixels</h2> <table style="width:100%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr style="height:200px"> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </table> </body> </html>
  • 47. tr:nth-child(even) { background-color: rgba(150, 212, 212, 0.4); } th:nth-child(even),td:nth-child(even) { background-color: rgba(150, 212, 212, 0.4); }
  • 48. HTML Lists • HTML lists allow web developers to group a set of related items in lists. Unordered HTML List • An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
  • 49. Ordered HTML List • An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. • The list items will be marked with numbers by default <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
  • 50. HTML Description Lists • HTML also supports description lists. • A description list is a list of terms, with a description of each term. • The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl>
  • 51. Value Description disc Sets the list item marker to a bullet (default) circle Sets the list item marker to a circle square Sets the list item marker to a square none The list items will not be marked
  • 52. <!DOCTYPE html> <html> <body> <h2>Unordered List with Circle Bullets</h2> <ul style="list-style-type:circle;"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </body> </html>
  • 53. Type Description type="1" The list items will be numbered with numbers (default) type="A" The list items will be numbered with uppercase letters type="a" The list items will be numbered with lowercase letters type="I" The list items will be numbered with uppercase roman numbers type="i" The list items will be numbered with lowercase roman numbers
  • 54. <!DOCTYPE html> <html> <body> <h2>Ordered List with Letters</h2> <ol type="A"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> </body> </html>
  • 55. HTML class Attribute • The HTML class attribute is used to specify a class for an HTML element. • Multiple HTML elements can share the same class. <!DOCTYPE html> <html> <head> <style> .note { font-size: 120%; color: red; } </style> </head> <body> <h1>My <span class="note">Important</span> Heading</h1> <p>This is some <span class="note">important</span> text.</p> </body> </html>
  • 56. <!DOCTYPE html> <html> <head> <style> .city { background-color: tomato; color: white; padding: 10px; } .main { text-align: center; } </style> </head> <body> <h2>Multiple Classes</h2> <h2 class="city main">London</h2> <h2 class="city">Paris</h2> <h2 class="city">Tokyo</h2> </body> </html>
  • 57. HTML Iframes • An HTML iframe is used to display a web page within a web page. • The HTML <iframe> tag specifies an inline frame. • An inline frame is used to embed another document within the current HTML document. • Syntax <iframe src="url" title="description"></iframe>
  • 58. HTML JavaScript • JavaScript makes HTML pages more dynamic and interactive. • The HTML <script> tag is used to define a client-side script (JavaScript). • The <script> element either contains script statements, or it points to an external script file through the src attribute. • Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content. • To select an HTML element, JavaScript most often uses the document.getElementById() method. • This JavaScript example writes "Hello JavaScript!" into an HTML element with id="demo"
  • 59. <!DOCTYPE html> <html> <body> <h1>My First JavaScript</h1> <p>JavaScript can change the content of an HTML element:</p> <button type="button" onclick="myFunction()">Click Me!</button> <p id="demo">This is a demonstration.</p> <script> function myFunction() { document.getElementById("demo").innerHTML = "Hello JavaScript!"; } </script> </body> </html>
  • 60. HTML Responsive Web Design • Responsive web design is about creating web pages that look good on all devices! • A responsive web design will automatically adjust for different screen sizes and viewports. • Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones)
  • 61. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <h2>Responsive Image</h2> <p>When the CSS width property is set in a percentage value, the image will scale up and down when resizing the browser window. Resize the browser window to see the effect.</p> <img src="image.jpg" style="width:100%;"> </body> </html>
  • 62. Emojis in HTML • Emojis are characters from the UTF-8 character set: 💗 😄 😍 • Emojis look like images, or icons, but they are not. • They are letters (characters) from the UTF-8 (Unicode) character set. • UTF-8 covers almost all of the characters and symbols in the world. • <meta charset="UTF-8">
  • 63. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <h1>Sized Emojis</h1> <p style="font-size:48px"> &#128512; &#128516; &#128525; &#128151; </p> </body> </html>
  • 64. HTML Forms • An HTML form is used to collect user input. The user input is most often sent to a server for processing. <!DOCTYPE html> <html> <body> <h2>HTML Forms</h2> <form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> </form> </body> </html>
  • 65. Type Description <input type="text"> Displays a single-line text input field <input type="radio"> Displays a radio button (for selecting one of many choices) <input type="checkbox"> Displays a checkbox (for selecting zero or more of many choices) <input type="submit"> Displays a submit button (for submitting the form) <input type="button"> Displays a clickable button
  • 66. Form Attributes The Action Attribute • The action attribute defines the action to be performed when the form is submitted. • Usually, the form data is sent to a file on the server when the user clicks on the submit button. • In the example below, the form data is sent to a file called "action_page.php". • This file contains a server-side script that handles the form data
  • 67. <form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname " value="John"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname " value="Doe"><br><br> <input type="submit" value="Submit"> </form>
  • 68. The Target Attribute • The target attribute specifies where to display the response that is received after submitting the form. • The target attribute can have one of the following values Value Description _blank The response is displayed in a new window or tab _self The response is displayed in the current window _parent The response is displayed in the parent frame _top The response is displayed in the full body of the window framename The response is displayed in a named iframe
  • 69. The Method Attribute • The method attribute specifies the HTTP method to be used when submitting the form data. • The form-data can be sent as URL variables (with method="get") or as HTTP post transaction (with method="post"). • The default HTTP method when submitting form data is GET. • Example <form action="/action_page.php" method="get">
  • 70. The Autocomplete Attribute • The autocomplete attribute specifies whether a form should have autocomplete on or off. • When autocomplete is on, the browser automatically complete values based on values that the user has entered before. • Example <form action="/ action_page.php" autocomplete="on">
  • 71. The Novalidate Attribute • The novalidate attribute is a boolean attribute. • When present, it specifies that the form-data (input) should not be validated when submitted. • Example • A form with a novalidate attribute: • <form action="/action_page.php" novalidate>
  • 72. HTML Input Types • <input type="button"> • <input type="checkbox"> • <input type="color"> • <input type="date"> • <input type="datetime- local"> • <input type="email"> • <input type="file"> • <input type="hidden"> • <input type="image"> • <input type="month"> • <input type="number"> • <input type="password"> • <input type="radio"> • <input type="range"> • <input type="reset"> • <input type="search"> • <input type="submit"> • <input type="tel"> • <input type="text"> • <input type="time"> • <input type="url"> • <input type="week">
  • 73. HTML Multimedia • Multimedia on the web is sound, music, videos, movies, and animations. • To show a video in HTML, use the <video> element: • Example <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>
  • 74. HTML <video> Autoplay • To start a video automatically, use the autoplay attribute: • Example • <video width="320" height="240" autoplay> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> </video>
  • 75. HTML Audio • The HTML <audio> element is used to play an audio file on a web page. • The HTML <audio> Element • To play an audio file in HTML, use the <audio> element: • Example • <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>