Full Stack_HTML- Hypertext Markup Language

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.

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.

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>
</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>
</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-collapse: collapse;
}

• Background-color
table, th, td {
border: 1px solid white;
}
th, td {
background-color: #96D4D4;
}

• Border radius
table, th, td {
border-radius: 10px;
}
th, td {
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;
}
</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">
😀 😄 😍 💗
</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

Recommended

More Related Content

Similar to Full Stack_HTML- Hypertext Markup Language (20)

More from Jeyarajs7 (15)

Recently uploaded (20)

Full Stack_HTML- Hypertext Markup Language