HTML

HTML
Krishnan T
Subject Matter Expert
TrainLab Academy
Introduction
 Every website has two parts:
 Front-end
 Back-end
 The front end is responsible for the visual look and feel of the website
or app that a user will interact with (the client side). The front-end is
built using a combination of technologies such as Hypertext Markup
Language (HTML), JavaScript and Cascading Style Sheets (CSS).
 Back end development focuses on the side of a website users can't see
(the server side).
 A full stack developer is someone who works with both the front end
and back end of a web application.
HTML
 HTML stands for Hyper Text Markup Language.
 HTML is the standard markup language for creating Web
pages.
 With HTML you can create your own Website.
 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 Element
 An HTML element is defined by a start tag, some content, and
an end tag:
 <tagname>Content goes here...</tagname>
Example:
Start tag Elementcontent Endtag
<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br> none none
 Some HTML elements have no content (like the <br>

element). These elements are called empty elements. Empty
elements do not have an end tag!
HTML Document
Example
<!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
HTML Editors
 Web pages can be created and modified by using professional HTML

editors.
 For learning HTML a simple text editor like Notepad (PC) or
TextEdit (Mac).
Step 1: Open Notepad (PC)
 Windows 8 or later:
◦ Open the Start Screen (the window symbol at the bottom left on your screen).
Type Notepad.
 Windows 7 or earlier:
◦ Open Start > Programs > Accessories > Notepad
Step 2: Write Some HTML
◦ Write or copy the following HTML code into Notepad
Step 3: Save the HTML Page

 Name the file "index.html"
Step 4: View the HTML Page in Your Browser

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> Declaration
 The <!DOCTYPE> declaration represents the document type,

and helps browsers to display web pages correctly.
 It must only appear once, at the top of the page (before any
HTML tags).
 The <!DOCTYPE> declaration is not case sensitive.
<!DOCTYPE html>
HTML Headings
 HTML headings are defined with the <h1> to <h6> tags.
 <h1> defines the most important heading.
 <h6> defines the least important heading:
Example: Output:
<h1>This is heading 1</h1>
Example: Describe metadata within an HTML document:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
</head>
<body>
<p>All meta information goes in the head section...</p>
</body>
</html>
Examples
 Define keywords for search engines:
<meta name="keywords" content="HTML, CSS, JavaScript">

 Define a description of your web page:
<meta name="description" content=“Demo for HTML and

CSS">
 Define the author of a page:
<meta name="author" content="John Doe">

 Refresh document every 30 seconds:
<meta http-equiv="refresh" content="30">

 Setting the viewport to make your website look good on all
devices:
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
HTML Paragraphs
 HTML paragraphs are defined with the <p> tag.
Example: <p>This is a paragraph. </p>
HTML Links
 HTML links are defined with the <a> tag.
Example:
<a href="https://www.google.com">Clickhere for link</a>
 The link's destination is specified in the href attribute.
 Attributes are used to provide additional information
about HTML elements.
HTML Images
 HTML images are defined with the <img> tag.

 The source file (src), alternative text (alt), width, and height are
provided as attributes.
Example:
<img src=“image.jpg" alt=“google.com" width="104"
height="142">
 src - Specifies the path(source or location) to the image.

 alt - Specifies an alternate text for the image, if the image for
some reason cannot be displayed.
View HTML Source
View HTML Source Code:
 Right-click on an HTML page and select "View Page Source"
(in Chrome) or "View Source" (in Edge), or similar in other

browsers. This will open a window containing the HTML
source code of the page.
Inspect an HTML Element:

 Right-click on an element (or a blank area), and choose
"Inspect" or "Inspect Element" to see what elements are used

to build the webpage (you will see both HTML and CSS).
<video width="320" height="240"
controls>
<source src="movie.mp4" type=
"video/mp4">
</video>
Audio
<audio controls>
<source src=“PATH" type="audio/mp3">
</audio>
Other Attributes:
autoplay,loop,muted
HTML Elements
 An HTML element is defined by a start tag, some content, and

an end tag.
 The HTML element is everything from the start tag to the end
tag.
<tagname>Content goes here...</tagname>
Nested HTML Elements

 HTML elements can be nested (this means that elements can
contain other elements).

 All HTML documents consist of nested HTML elements.
Empty HTML Elements
 HTML elements with no content are called empty elements.
 The <br> tag defines a line break, and is an empty element
without a closing tag.

HTML is Not Case Sensitive
 HTML tags are not case sensitive.
 <P> is same as <p>
 The HTML standard does not require lowercase tags, but
W3C recommends lowercase in HTML

 World Wide Web Consortium (W3C) is an international
community where Member organizations, a full-time staff, and

the public work together to develop Web standards.
HTML Attributes
 HTML attributes provide additional information about HTML
elements.
 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“
HTML Horizontal Rules
 The <hr> tag defines a thematic break in an HTML page, and
is most often displayed as a horizontal rule.

 The <hr> element is used to separate content (or define a
change) in an HTML page.

The href Attribute
 The <a> tag defines a hyperlink. The href attribute specifies
the URL of the page the link goes to
 <a href="https://www.google.com">Visit page</a>
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:
 <img src="img.jpg">
There are two ways to specify the URL in the src attribute:
Absolute URL - Links to an external image that is hosted on another
website.
src=" https://www.caranddriver.com/shopping-advice/g26100588/car-types/
".
Notes: External images might be under copyright. If you do not get

permission to use it, you may be in violation of copyright laws. In addition,
you cannot control external images; it can suddenly be removed or
changed.
Relative URL - Links to an image that is hosted within the website. Here, the
URL does not include the domain name. If the URL begins without a slash,
it will be relative to the current page.
src="img_girl.jpg".
If the URL begins with a slash, it will be relative to the domain.
src="/images/img_girl.jpg".
Tip: It is almost always best to use relative URLs. They will not break if you
change domain.
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.
<img src="img_girl.jpg" alt="Girl with a jacket">
Note: If we try to display an image that does not exist, the value
of the alt attribute will be displayed instead.
The style Attribute

 The style attribute is used to add styles to an element, such as
color, font, size, and more.

<p style="color: red;">This is a red paragraph.</p>
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.
 The following example specifies English as the language:
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
 Country codes can also be added to the language code in
the lang attribute. So, the first two characters define the language of
the HTML page, and the last two characters define the country.
<html lang="en-US">
Example:
The lang attribute in HTML allows you to set content for languages other than
English.
Along with English added content in French and Spanish as well.
<!DOCTYPE html>
<html>
<body>
<h2>English</h2>
<p lang="en">This is demo text</p>
<h2>French</h2>
<p lang="fr">Ceci est un texte de démonstration</p>
<h2>Spanish</h2>
<p lang="es">Este es un texto de demostración</p>
</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:

<p title="I'm a tooltip">Mouse over this paragraph, to display
the title attribute as a tooltip.</p>
Example: Use of the title attribute in an HTML document:
<!DOCTYPE html>
<html>
<body>
<p><abbr title="World Health Organization">WHO</abbr> was
founded in 1948.</p>
<p title=“HTML tutorials">Ethnotech.com</p>
</body>
</html>
 The title attribute specifies extra information about an element.

 The information is most often shown as a tooltip text when the
mouse moves over the element.
HTML Headings
 HTML headings are defined with the <h1> to <h6> tags.
<h1> headings should be used for main headings, followed

by <h2> headings, then the less important <h3>, and so on.
Bigger Headings
 Each HTML heading has a default size. However, you can
specify the size for any heading with the style attribute, using
the CSS font-size property:
<h1 style="font-size:60px;">Heading 1</h1>
Output:
HTML Styles and Colors
 The HTML style attribute is used to add styles to an element, such as color, font,
size, and more.
Syntax: <tagname style="property: value;">
Example:
Text Color
 The CSS color property defines the text color for an HTML element
<p style="color:red;">I am red</p>

<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am big</p>
Background Color
 Set the background color for a page to powderblue.
<body style="background-color: powderblue;">
 Set background color for two different elements.

<h1 style="background-color:darkgreen;">This is a heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>
Fonts
 The CSS font-family property defines the font to be used for an
HTML element.
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
Text Size
 The CSS font-size property defines the text size for an HTML
element.
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
Text Alignment
 The CSS text-align property defines the horizontal text alignment
for an HTML element.

<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
Border Color
 To set the color of borders
<h1 style="border:2px solid Tomato;">Hello World</h1>

<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
Color Values
 Colors can also be specified using RGB values, HEX values, HSL
values, RGBA values, and HSLA values.

<h1 style="background-color:rgb(255, 99, 71);"> Hi </h1>
<h1 style="background-color:#ff6347;"> Hi </h1>
<h1 style="background-color:hsl(9, 100%, 64%);"> Hi </h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);"> Hi </h1>

<h1 style="background-color:hsla(9, 100%, 64%, 0.5);"> Hi </h1>
HTML RGB and RGBA 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 Color Values

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!
 For example, rgb(255, 0, 0) is displayed as red, because red is set
to its highest value (255), and the other two (green and blue) are
set to 0.
 Experiment by mixing the RGB values below:
RGBA Color Values
rgba(red, green, blue, alpha)
 The alpha parameter is a number between 0.0 (fully
transparent) and 1.0 (not transparent at all):

 Experiment by mixing the RGBA values below:
HTML HEX Colors
 In HTML, a color can be specified using a hexadecimal value
in the form: #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.
 To display black, set all color parameters to #000000.
 To display white, set all color parameters to #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.
HTML Text Formatting
 Formatting elements were designed to display special
types of text:
 <b> - Bold text
 <strong> - Important text
 <i> - Italic text
 <em> - Emphasized text
 <mark> - Marked text
 <small> - Smaller text
 <del> - Deleted text
 <ins> - Inserted text //underline inserted text
 <sub> - Subscript text
 <sup> - Superscript text
Example:
<!DOCTYPE html>
<html>
<body>
<p><b>This text is bold</b></p>
<p><i>This text is italic</i></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
<p><em>This text is emphasized.</em></p>
<p>Do not forget to buy <mark>milk</mark> today.</p>
</body>
</html>
 The HTML <em> element defines emphasized text. The content

inside is typically displayed in italic.
HTML Quotation and Citation Elements
HTML <q> for Short Quotations
 Browsers normally insert quotation marks around the quotation.
<p>WWF's goal is to: <q>Build a future where people live in

harmony with nature.</q></p>
HTML <abbr> for Abbreviations

 The HTML <abbr> tag defines an abbreviation or an acronym, like
"HTML", "CSS", "Mr.", "Dr.", "ASAP", "ATM".

 Marking abbreviations can give useful information to browsers,
translation systems and search-engines.

 Use the global title attribute to show the description for the
abbreviation/acronym when you mouse over the element.

<p>The <abbr title="World Health Organization"> WHO
</abbr> was founded in 1948.</p>
HTML <address> for Contact Information
 The HTML <address> tag defines the contact information for the
author/owner of a document or an article.

 The contact information can be an email address, URL, physical
address, phone number, social media handle, etc.

 The text in the <address> element usually renders in italic, and
browsers will always add a line break before and after

the <address> element.
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
HTML <cite> for Work Title
 The HTML <cite> tag defines the title of a creative work (e.g. a
book, a poem, a song, a movie, a painting, a sculpture, etc.).

 The text in the <cite> element usually renders in italic.
<p> <cite>The Scream</cite> by Edvard Munch. Painted in

1893.</p>
HTML <bdo> for Bi-Directional Override

 BDO stands for Bi-Directional Override.
 The HTML <bdo> tag is used to override the current text
direction.
<bdo dir="rtl">This text will be written from right to left</bdo>
HTML Comments
 Comments are not displayed by the browser, but they can help
document your HTML source code.
 You can also hide more than one line, everything between
the  will be hidden from the display.
 Comments can be used to hide parts in the middle of the HTML
code.

Example:

<p>This is a paragraph.</p>
<p>This  is a paragraph.</p>
HTML Styles - CSS
 CSS stands for Cascading Style Sheets.
 Cascading Style Sheets (CSS) is used to format the layout of a
webpage. It can control the layout of multiple web pages all at
once.
 With CSS, you can control the color, font, the size of text, the
spacing between elements, how elements are positioned and laid
out, what background images or background colors are to be
used, different displays for different devices and screen sizes, and
much more!
 The word cascading means that a style applied to a parent
element will also apply to all children elements within the parent.
So, if you set the color of the body text to "blue", all headings,
paragraphs, and other text elements within the body will also get
the same color (unless you specify something else)!
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.
Example:
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
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.

Example:<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
</body>
</html>
External CSS
 An external style sheet is used to define the style for many HTML pages.
 To use an external style sheet, add a link to it in the <head> section of each HTML
page.
Example: Save file with .html extension

 <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
</body>
</html>
< ! - -save as "styles.css": - - >
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p{
color: red;
}
 The external style sheet can be written in any text editor. The file
must not contain any HTML code, and must be saved with a .css
extension.
 With an external style sheet, you can change the look of an entire
web site, by changing one file!
HTML Links
 HTML links are hyperlinks.
 The HTML <a> tag defines a hyperlink.
Syntax: <a href="url">link text</a>

Example: To create a link to google.com:
<!DOCTYPE html>
<html>
<body>
<h3>HTML Links</h3>
<a href="https://www.google.com/"> Visit Google !</a>
</body>
</html>
The target Attribute
 By default, the linked page will be displayed in the current
browser window. To change this, you must specify another

target for the link.
 The target attribute specifies where to open the linked document.
 The target attribute can have one of the following values:
 _self - Default. Opens the document in the same window/tab

as it was clicked
 _blank - Opens the document in a new window or tab
 _parent - Opens the document in the parent frame
 _top - Opens the document in the full body of the window
Example:
<a href="https://kptcl.karnataka.gov.in/" target="_blank"> Visit
KPTCL!</a>
Absolute URLs vs. Relative URLs
 In absolute URL, a full web address is specified in the href attribute. An
absolute URL contains all the information necessary to locate a resource. It

typically begins with http:// or https:// .
 A relative URL typically contains only the path to a specific file. The forward
slash basically tells the browser to go to the domain of the site. A local link (a
link to a page within the same website) is specified with a relative
URL (without the "https://www" part).
Example:
<h2>Absolute URLs</h2>
<p><a href="https://www.google.com/">Google</a></p>
Link to home page: href="http://sites.ru/shop/"

Link to the product page: href=http://sites.ru/shop/t-shirts/t-shirt-life-is-good/
<h2>Relative URLs</h2>
Link from home page to product page: href="t-shirts/t-shirt-life-is-good/"
Link from product page to home page : href="../../"
Button as a Link
Example:
<p>Click the button to go to the Google.</p>
<button onclick="document.location=
'https://www.google.com/'">Search here</button>
HTML Tables
 HTML tables allow web developers to arrange data into rows and columns.
HTML Table Tags
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
<colgroup> Specifies a group of one or more columns in a table for
formatting
<col> Specifies column properties for each column within a
<colgroup> element
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
<style>
table, th, td {
border:1px solid black; border-collapse: collapse;
}
</style>
<h2>TH elements define table headers</h2>
<table style="width:100%">
<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>John</td>
<td>Robert</td>
<td>Ruby</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
HTML Lists
 HTML lists allow to group a set of related items in lists.
Unordered HTML List

<h2>An Unordered HTML List</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
 An unordered list starts with the <ul> tag. Each list item starts
with the <li> tag.

 The list items will be marked with bullets by default.
Ordered HTML List
<h2>An Ordered HTML List</h2>

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
 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.
HTML 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.
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
HTML Block and Inline Elements
 A block-level element always starts on a new line, and the
browsers automatically add some space (a margin) before and
after the element.
 A block-level element always takes up the full width available
(stretches out to the left and right as far as it can).
 Two commonly used block elements are: <p> and <div>.
 The <p> element defines a paragraph in an HTML document.
 The <div> element defines a division or a section in an HTML

document.
 The <div> element is often used as a container for other HTML
elements.
 The <div> element has no required attributes,
but style, class and id are common.
Inline Elements
 An inline element does not start on a new line.
 An inline element only takes up as much width as necessary.
 This is a <span> element inside a paragraph.

HTML Iframes
 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>
Example:
<iframe src="https://www.unsplash.com/" height="300"

width="400"></iframe>
<iframe src="https://www.vtu.co.in/" height="300"

width="400"></iframe>
Embed YouTube video using iframe
 You can also add a YouTube video on your webpage using
the <iframe> tag. The attached video will be played at your

webpage and you can also set height, width, autoplay, and
many more properties for the video.
Following are some steps to add YouTube video on your
webpage:
 Goto YouTube video which you want to embed.
 Click on SHARE ➦ under the video.
 Click on Embed <> option.
 Copy HTML code.
 Paste the code in your HTML file
 Change height, width, and other properties (as per
requirement).
HTML JavaScript
 JavaScript makes HTML pages more dynamic and interactive.
 A Script is a small program which is used with HTML to make

web pages more attractive, dynamic and interactive, such as an
alert popup window on mouse click. Currently, the most popular
scripting language is JavaScript used for websites.
Example:
<button type="button"
Onclick = "document.getElementById('demo').innerHTML =
Date()" >
Click me to display Date and Time.</button>
The HTML <script> Tag
 The HTML <script> tag is used to specify a client-side script. It may
be an internal or external JavaScript which contains scripting

statements, hence we can place <script> tag within <body> or
<head> section.
 It is mainly used to manipulate images, form validation and change
content dynamically. JavaScript uses document.getElementById()

method to select an HTML element.
Example1:
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello
JavaScript!";
</script>
 The above JavaScript example writes "Hello JavaScript!" into an
HTML element with id="demo“.

Example2:
<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>
The HTML <noscript> Tag
The HTML <noscript> tag defines an alternate content to be

displayed to users that have disabled scripts in their browser or
have a browser that doesn't support scripts.
Example:
<noscript>Sorry, your browser does not support

JavaScript!</noscript>
Note:
A browser without support for JavaScript will show the text
written inside the noscript element.
HTML Layout
 HTML layouts provide a way to arrange web pages in well-
mannered, well-structured, and in responsive form or we can
say that HTML layout specifies a way in which the web pages
can be arranged.
 Web-page layout works with arrangement of visual elements
of an HTML document.
 Web page layout is the most important part to keep in mind
while creating a website so that our website can appear
professional with the great look.
 Every website has a specific layout to display content in a
specific manner.
HTML Layout Elements
 <header> - Defines a header for a document or a section
 <nav> - Defines a set of navigation links
 <section> - Defines a section in a document
 <article> - Defines an independent, self-contained
content
 <aside> - Defines content aside from the content (like a
sidebar)
 <footer> - Defines a footer for a document or a section
 <details> - Defines additional details that the user can
open and close on demand
 <summary> - Defines a heading for the <details> element
HTML Entities
 HTML character entities are used as a replacement of reserved
characters in HTML. You can also replace characters that are
not present on your keyboard by entities.
 HTML entities provide a wide range of characters which can
allow you to add icons, geometric shapes, mathematical

operators, etc.
 Each entity starts with symbol ampersand (&) and ends with a
semicolon (;).
Syntax:
&entity_name;
OR
&#entity_number;
HTML Character Entities
Result Description Entity Entity
Name Number
non-breaking space
< less than < <
> greater than > >
& ampersand & &
" double quotation mark " "
' single quotation mark (apostrophe) ' '
¢ cent ¢ ¢
£ pound £ £
¥ yen ¥ ¥
€ euro € €

Example:
<!DOCTYPE html>
<html>
<body>
<h1>HTML Entity Example</h1>
<h2>The greater-than sign: > </h2>
<h2>The cent sign: ¢ </h2>
<h2>The pound sign: £ </h2>
<h2>The pound sign: £ </h2>
</body>
</html>
HTML URL Encode
 HTML URL - Uniform Resource Locators
 A URL is another word for a web address.
 A URL can be composed of words (e.g. google.com), or an
Internet Protocol (IP) address (e.g. 192.68.20.50).
 Most of the user use URL in the form of words because it is
easy to remember than numbers.
 Web browsers request pages from web servers by using a URL.
 A Uniform Resource Locator (URL) is used to address a
document (or other data) on the web.
Syntax of a URL:
scheme://prefix.domain:port/path/filename
scheme://prefix.domain:port/path/filename
 scheme is used to define the type of Internet service (most

common is http or https).
 prefix is used to define a domain prefix (default for http is
www).
 domain is used to define the Internet domain name (like
google.com).
 port is used to define the port number at the host (default for
http is 80).
 path is used to define a path at the server (If omitted: the root
directory of the site).
 filename is used to define the name of a document or resource.
Following is a list of some common types of schemes used
in URL:
 http(Hyper Text Transfer Protocol):

◦ Common web pages. Not encrypted.
 https (Secure Hyper Text Transfer Protocol):
◦ Secure web pages. Encrypted.
 ftp(File Transfer Protocol):
◦ Downloading or uploading files.
 file:
◦ A file on your computer.
URL Encoding
 URL encoding is used to convert non-ASCII characters into a

format that can be used over the Internet because a URL is
sent over the Internet by using the ASCII character-set only. If
a URL contains characters outside the ASCII set, the URL has
to be converted.
 In URL encoding, the non-ASCII characters are replaced with
a "%" followed by hexadecimal digits.
 URLs cannot contain spaces. URL encoding normally replaces
a space with a plus (+) sign, or %20.
HTML Forms
 An HTML form is used to collect user input. The user input is
most often sent to a server for processing.
 An HTML form is a section of a document which contains
controls such as text fields, password fields, checkboxes, radio
buttons, submit button, menus etc.
 An HTML form facilitates the user to enter data that is to be
sent to the server for processing such as name, email address,
password, phone number, etc. .
 HTML forms are required if you want to collect some data from
of the site visitor.
 Example: If a user want to purchase some items on internet,
he/she must fill the form such as shipping address and
credit/debit card details so that item can be sent to the given
address.
HTML Form Syntax
<form action="server url" method="get|post">
//input controls e.g. textfield, textarea, radiobutton, button
</form>
Submit button control Syntax:
<input type="submit" value="submit">
HTML Form Tags
 <form> It defines an HTML form to enter inputs by the used side.

 <input> It defines an input control.
 <textarea> It defines a multi-line input control.
 <label> It defines a label for an input element.
 <fieldset> It groups the related element in a form.
 <legend> It defines a caption for a <fieldset> element.
 <select> It defines a drop-down list.
 <optgroup> It defines a group of related options in a drop-down
list.
 <option> It defines an option in a drop-down list.
 <button> It defines a clickable button.
Form Input types
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

HTML form Attribute
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.
 Always use POST if the form data contains sensitive or
personal information.
GET: Sends form data via a URL string
 Appends the form data to the URL, in name/value pairs
 NEVER use GET to send sensitive data! (the submitted form
data is visible in the URL!)

 The length of a URL is limited (2048 characters)
 Useful for form submissions where a user wants to bookmark
the result
 GET is good for non-secure data, like query strings in Google
POST: Sends form data via the server

 Appends the form data inside the body of the HTTP request
(the submitted form data is not shown in the URL)

 POST has no size limitations, and can be used to send large
amounts of data.
 Form submissions with POST cannot be bookmarked
The below diagram shows the difference between get
and post
HTML Quick List
The basic HTML document
<! DOCTYPE html>

<Html>
<Head>
<Title> Document Title </ title>
</ Head>
<Body> visible text ... </ body>
</ Html>
Basic tab (Basic Tags)
<H1> the biggest title </ h1>

<H2>... </ H2>
<H3>... </ H3>
<H4>... </ H4>
<H5>... </ H5>
<H6> smallest heading </ h6>
<P> This is a paragraph. </ P>
<Br> (line feed)
<hr> (horizontal)
<! - This is a comment ->
Text Formatting (Formatting)
<B> bold text </ b>
<Code> computer code </ code>
<Em> emphasized text </ em>
<I> italic text </ i>
<Kbd> keyboard </ kbd>
<Pre> preformatted text </ pre>
<Small> smaller text </ small>
<Strong> important text </ strong>
<Abbr> (acronym) <address> (contact information)
<bdo> (text direction) <blockquote> (from another source reference
section)
<cite> (working name) <del> (deleted text) <ins > (insert text)
<sub> (subscript text) <sup> (superscript text)
Links (Links)
Common link:
<a href = http://www.example.com/>link text </ a>
image link:
<a href = "http://www.example.com/">
<img src = "URL" alt = "replacement text"> </ a>
Mail link:
<a href = "mailto: webmaster@example.com"> Send e-mail </
a>
Bookmark:
<a id = "tips"> Tips section </ a> <A href = "#tips"> Skip Tips
section </ a>
Style / Block (Styles / Sections)
<Style type = "text / css">
h1 {Color: red ;} p {Color: blue ;}
</ Style> <Div> block-level elements in the document </ div> <Span> docu-
ment inline elements </ span>
Unordered list
<Ul>
<Li> item </ li>
<Li> item </ li>
</ Ul>
Ordered List
<Ol>
<Li> The first </ li>
<Li> Second item </ li>
</ Ol>
Definition List
<Dl>
<Dt> Item 1 </ dt>
<Dd> Item Description 1 </ dd>
<Dt> Item 2 </ dt>
<Dd> Description Item 2 </ dd>
</ Dl>
Tables (Tables)
<Table border = "1">
<Tr>
<Th> table header </ th>
<Th> table header </ th>
</ Tr>
<Tr>
<Td> table data </ td>
<Td> table data </ td>
</ Tr>
</ Table>
Frame (Iframe)
<Iframe src = "demo_iframe.htm"> </ iframe>
Forms (Forms)
<Form action = "demo_form.php" method = "post / get">
<Input type = "text" name = "email" size = "40" maxlength = "50">
<Input type = "password">
<Input type = "checkbox" checked = "checked">
<Input type = "radio" checked = "checked">
<Input type = "submit" value = "Send">
<Input type = "reset">
<Input type = "hidden">
<Select>
<Option> Apple </ option>
<Option selected = "selected"> banana </ option>
<Option> Cherry </ option>
</ Select>
<Textarea name = "comment" rows = "60" cols = "20"> </ textarea>
</ Form>

HTML

Uploaded by

HTML

Uploaded by

HTML

 Some HTML elements have no content (like the <br>

<h1>My First Heading</h1>

 Web pages can be created and modified by using professional HTML

Step 3: Save the HTML Page

Step 4: View the HTML Page in Your Browser

 All HTML documents must start with a document type

 The <!DOCTYPE> declaration represents the document type,

 <h6> defines the least important heading:

<p>All meta information goes in the head section...</p>

<meta name="keywords" content="HTML, CSS, JavaScript">

<meta name="description" content=“Demo for HTML and

<meta name="author" content="John Doe">

<meta http-equiv="refresh" content="30">

Example: <p>This is a paragraph. </p>

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

 src - Specifies the path(source or location) to the image.

(in Chrome) or "View Source" (in Edge), or similar in other

Inspect an HTML Element:

"Inspect" or "Inspect Element" to see what elements are used

 An HTML element is defined by a start tag, some content, and

Nested HTML Elements

contain other elements).

 The <br> tag defines a line break, and is an empty element

without a closing tag.

 <P> is same as <p>

 The HTML standard does not require lowercase tags, but

W3C recommends lowercase in HTML

community where Member organizations, a full-time staff, and

 Attributes provide additional information about elements.

 Attributes are always specified in the start tag.

 Attributes usually come in name/value pairs

is most often displayed as a horizontal rule.

change) in an HTML page.

the URL of the page the link goes to

 <a href="https://www.google.com">Visit page</a>

The src Attribute

The src attribute specifies the path to the image to be

Notes: External images might be under copyright. If you do not get

alternate text for an image, if the image for some reason

The style Attribute

color, font, size, and more.

when you mouse over the element:

 The title attribute specifies extra information about an element.

<h1> headings should be used for main headings, followed

<p style="color:red;">I am red</p>

<body style="background-color: powderblue;">

 Set background color for two different elements.

for an HTML element.

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

values, RGBA values, and HSLA values.

<h1 style="background-color:rgba(255, 99, 71, 0.5);"> Hi </h1>

RGB Color Values

color with a value between 0 and 255.

transparent) and 1.0 (not transparent at all):

in the form: #rrggbb

values between 00 and ff (same as decimal 0-255).

 To display white, set all color parameters to #ffffff.

is green, and 240 is blue.

and 100% is the full color.

 The HTML <em> element defines emphasized text. The content

<p>WWF's goal is to: <q>Build a future where people live in

HTML <abbr> for Abbreviations

"HTML", "CSS", "Mr.", "Dr.", "ASAP", "ATM".

translation systems and search-engines.

abbreviation/acronym when you mouse over the element.

author/owner of a document or an article.

address, phone number, social media handle, etc.

browsers will always add a line break before and after

book, a poem, a song, a movie, a painting, a sculpture, etc.).

<p> <cite>The Scream</cite> by Edvard Munch. Painted in

HTML <bdo> for Bi-Directional Override

 The HTML <bdo> tag is used to override the current text

 An internal CSS is defined in the <head> section of an HTML page,

within a <style> element.

Example: Save file with .html extension

non-breaking space

< less than < <

> greater than > >

& ampersand & &

" double quotation mark " "

' single quotation mark (apostrophe) ' '

¢ cent ¢ ¢

£ pound £ £

¥ yen ¥ ¥

€ euro € €