Migay Associates

Chapter 1 – HTML 5
HTML Overview – Structural HTML Tags – Adding images and other page elements –
Tables – Forms

1. Designing WebPages:
A document connected to the World Wide Web and viewable by anyone connected to the
internet that has a web browser.

The Internet is the backbone of the Web, the technical infrastructure that makes the Web
possible. At its most basic, the Internet is a large network of computers which communicate all
together.
Why Have a Web Page:
 To become known Worldwide
 Advertise and sell things
 Provide information about your products, services, company, Have Customers place
orders, Customers pay their bills
 Find out your customers pay their bills
 Find out customers opinions and preferences to improve your website, your services and
your products as well as expand your market

Web Page
A web page is a document written in hypertext (also known as HTML) that you can see
online, using a web browser. Most web pages include text, photos or videos, and links to other
web pages. A group of many web pages managed by one person or company is a website.

A webpage, or web page, is a document composed using a markup language like HTML
so that web browsers can read it. Web pages have distinct features, text, and URLs so people can
access them directly. The first web page was created by Tim Berners-Lee in 1991.

Website
A collection of web pages which are grouped together and usually connected together in
various ways. Often called a "website" or a "site."
A website is a collection of linked web pages
A website collects several interlinked web pages under a single domain for a specific
brand, company, or organization. An owner may use their website to showcase their business,
sell products, or interact with customers.

Difference between Webpage and Website:

The webpage is a single document on the web using a unique URL, while a website is a
collection of multiple web pages in which information on a related topic or another subject is
linked together under the same domain address.

Web pages and websites have different features. Some of these are,
 A web page is a single page, while a website comprises several pages.
 Visitors can reach a website through its domain URL. However, to reach a web page
visitors need not only the domain URL, but also an extension or slug.

Full Stack Development - JS Family 1

 Migay Associates

 While a website may have overarching goals (brand awareness, for example), a web page
will have a specific purpose, like displaying your company information, selling a product
or sharing a blog post.
 You can quickly create a web page, but building a website from scratch is often more
time intensive. Start your website by compiling a website launch checklist: You‟ll find
you can easily create the web pages that make up your site one-by-one.

To access a website, type its domain name in your browser address bar, and the browser will
display the website's main web page, or homepage

Web Server
A web server is a computer hosting one or more websites. "Hosting" means that all
the web pages and their supporting files are available on that computer. The web server will send
any web page from the website it is hosting to any user's browser, per user request.

Search Engine
Search engines are a common source of confusion on the web. A search engine is a
special kind of website that helps users finds web pages from other websites.

A web service that helps you finds other web pages, such as Google, Bing, Yahoo, or
DuckDuckGo. Search engines are normally accessed through a web browser (e.g. you can
perform search engine searches directly in the address bar of Firefox, Chrome, etc.) or through a
web page (e.g. bing.com or duckduckgo.com).

Viewing a web page requires a browser like Internet Explorer, Edge, Safari, Firefox, or Chrome.
For example, you are reading this web page using a browser.
Once in a browser, you can open a web page by entering the URL in the address bar.
Every Web page is given a unique Uniform Resource Locator (URL). When a user enters the
URL, the web browser downloads the file of that page and displays it to the user.
The World Wide Web, abbreviated as the www, is a global network of many web pages. They
are connected with the help of hypertext links. When a number of web pages are combined under
a domain name, a website is formed. The World Wide Web was developed by Sir Tim Berners

Full Stack Development - JS Family 2

 Migay Associates

Lee at CERN, Switzerland. It is also called the internet. The www is not under the control of any
one country or organization. It functions as a shared network of computers.
www: World Wide Web
URL: Uniform Resource Locator
Web Page: A single page on the Internet.
Website: A collection of web pages.
Domain Name: The registered address of the website. For example, Amazon.com, Flipkart.
com, etc.

The most common file format and file extension of a web page is .html, as mentioned
above. Most web pages are eventually displayed as an HTML file

In the case of this static web page, the file extension is ".htm," which is the same as a ".html"
page.
Pages generated by server-side scripts may have the extension of the programming
language used to create that script. For example, a common server-side script extension you may
see is .php for a page generated in PHP (PHP: Hypertext Preprocessor). Pages generated using
PHP often have a dynamic element, such as pulling information from a database to create the
resulting HTML page you view in your browser. Remember that the file extension is .php, but
the file format is HTML.
Below are other file extensions and file formats you may encounter when developing a web page
or browsing the Internet.
Type File extensions
HTML .htm, .html, .hta, .htc, .xhtml
Server-side includes .shtml, .shtml, .stm, .ssi, .inc
Style sheet .css, .scss, .less, .sass
JavaScript .js
XML (extensible markup language) file .xml, .dtd, .xsd, .xsl, .xslt, .rss, .rdf
JSON (JavaScript Object Notation) .json
Text file .txt
Perl .cgi, .pl
PHP .php, .php3, .php4, .php5, .tpl, .php-dist, .phtml
Python .py
Active Server page .asp, .asa
Active Server plus page .aspx, .ascx, .asmx, .cs, .vb, .config, .master
Manifest .appcache
Directory configuration .htaccess
Tag Library Descriptor .tld
SQL (Structured Query Language) file .sql
Scalable Vector Graphic .svg
VTML (Visual Tool Markup Language) .vtm, .vtml
ColdFusion Template .cfm, .cfml, .cfc
Dreamweaver template .dwt

How to find a web page

As a user surfing the Internet, to find a web page or other information use a search engine. To
find something on a website, use its search feature (if available).

Full Stack Development - JS Family 3

 Migay Associates

For the browser to access a web page on the Internet, it must know the IP address of the web
server containing the web page. For example, when you enter a domain name such as
computerhope.com, that domain name must be translated by DNS (domain name system) into
the IP address of the computerhope.com server. Once that IP address is found, the browser
contacts the server and requests the web page entered into the URL (Uniform Resource Locator).

 Internet is an International Network, made up of computers and the physical connections

(wires, routers, etc.) allowing them to communicate.
 The World Wide Web (WWW) is a collection of software that spans the Internet and
enbles the interlinking of documents and resources.
 HTTP- Stands for HyperText Transfer Protocol: Allows computers on the WWW to
communicate with one another.
 Handles the request sent to the Web Server and the response recived from the Web
server.
 URL – Uniform Resource Locator – also called the web page‟s address
 You typically type it into your web browsers location bar when you want to view a web
page

A website is a collection of interlinked web pages with a common domain name. The
website can be made by any individual, group, or company. All the websites together
constitute the World Wide Web. The website can be of several types, like an e-commerce
website, social media website, or a blog website, and every website has a different role, but
one thing is common that every website has several linked web pages.

How does a Web Page Work?

A simple web page is created using HTML, which is a markup language. However, we can also
use CSS and JavaScript to add more functionalities and make it more attractive.
It is created using HTML, hence containing different markup tags that specify how the data
should be formatted on screen.
The webpage is contained within the web server. To load this webpage, a client sends the request
to the server, and generally, the browser is known as the client, which can request the page on
the internet.
The web browser requests the page on the internet. Once it is responded to by the server, the
browser interprets the markup tags and displays them on the user's screen in the correct format.

The browser sends the request for a page or a file via an HTTP request. The HTTP is
the Hypertext Transfer Protocol, a network protocol that allows transferring hypermedia
documents over the internet between a browser and server.

Full Stack Development - JS Family 4

 Migay Associates

Once the request reaches the server, the HTTP server accepts the request, finds the requested
page, and sends it back to the browser through the HTTP response. If a server is unable to find
the requested page, it returns a 404 response.

Elements of a Webpage
The main element of the webpage is a text file composed of HTML. Apart from this, a webpage
can also have the following elements:
o CSS: The CSS code is used to make the page more interactive and control its look and
feel.
o Scripts: The JavaScript code is included in a webpage to add interactivity to the page and
add more functionalities to it.
o Media: It is used to include media components such as audio, video, and images.
Although every web page is different from another web, some components are common to
almost all the pages. Some of these components are given below; you can also relate these
elements by the given image:

1. Name of the Website: Each webpage includes the name of the website or company, or
blog to which it is attached. The name of the website and the logo are mostly situated at
the top-left corner of the page. The logo may also contain a slogan of the site or a brief
introduction to the site so that visitors can quickly identify what this site is about. It is one
of the important components of the webpage.
The website's name also has a link that can redirect to the home page of that site. The
name of the website usually includes at the header of the page.
2. Search bar: A search bar is also an important component that should present on each
page of a website or blog. The search blog allows the visitor to search related information
on that website.
3. Navigation Bar: A navigation bar is a component of a webpage that contains links to
some important sections of the website. It helps the visitors to easily traverse some major
sections of the website. It is placed mainly on the top of the web page or the left side of
the page. When the user clicks on any link given in the navigation bar, it redirects to the
page.

Full Stack Development - JS Family 5

 Migay Associates

4. Heading of the page: Heading of the page tells the main information about the page, i.e.,
what this is all about. The heading is available on the top of the page, and it is included
with the help of the <h1> tag of HTML.
5. Content of the Page: The content of the page means the information of the page. As you
are visiting this page and reading this information, all the information contained within
this page is known as the page's content. It may contain below sub-elements:
o Paragraphs: A webpage can have different paragraphs as per their length. The
opening paragraph is crucial on the whole page, as it draws the attention of the
visitor. If the first paragraph is not interesting and not related to the topic, a user
may leave the page immediately. To create a paragraph <P> tag is used in
HTML.
o Subheadings: A page may have different subheadings as per the topic, whether
related to information about something or a website's web page. In HTML from
<H2> to <H6> tags are used for including subheadings. Each page should be
divided into different subheadings to make it easier for the users to read and
understand.
o Images: Each webpage contains images to make its content more attractive. To
include an image, <img> tag is used in HTML.
6. Feedback or Comment form: Different websites include a Feedback or Comment form
on each webpage. It is used to know the visitor's views about the information of that page
and any other feedback for the page or site. It lets to know the creator of the page that if
the information is helpful or not.
7. Social Share links: Social share links allow the visitors to share that webpage with their
friends on different social sites such as Facebook, Linked In, Twitter, etc.
8. Copyright Info: Each webpage must have Copyright information along with Privacy
Policy. This information is available at the end of the page or on the footer of the page.
9. Go to Top: On most of the pages, a Back to Top button or link is available. This option
helps the users to return to the upper section of the page.
10. Advertisement Banner: Whenever you visit any good website, you see different
advertisement banners on each site's page. These banners are used to displays ads in
different places on a page. These banners are used to provide monitory benefits to the
owner of the website.
11. Previous and Next buttons or links: On most of the pages, previous and Next buttons
are available that help the user easily navigate to the previous and next page related to the
topic. A page can also have links to other pages.
12. Company Info: On the footer of the page, there is a brief introduction about the
company or website of that page. By this, visitors get to know about the company and can
build trust in it.
There can also be some additional information and tools such as a button to print the page that
can also be helpful for users.
Types of a Web page
There are mainly two types of a Web page based on functionality:
o Static Webpage
o Dynamic Webpage

Static Webpage
Static web pages are those webpage that cannot be modified or altered by the client.
These are also known as stationary or flat web pages. They are displayed on the client's browser

Full Stack Development - JS Family 6

 Migay Associates

in the same format and manner as they are saved in the webserver. Users can only load the page
and read the information but cannot perform any change on the page.
Dynamic Webpage
As the name suggests, Dynamic web pages are dynamic, which means it shows different
information at different point of time.
The dynamic webpage shows different content each time it is viewed. There are two types of
Dynamic web pages, which are:
o Server-Side Dynamic Webpage: These web pages are created using Server-side
scripting. These pages are changed when they are visited or viewed. Some examples of
server-side pages are login pages, submission forms, shopping carts, etc. Various
scripting languages such as PHP, ASP.Net, JSP, etc., can be used for server-side
scripting.
o Client-side Dynamic Webpage: These web pages are created using Client-side
scripting. These pages get changed in response to actions that occur within that page,
such as mouse or keyboard action. Scripting languages such as JavaScript, Dart, etc.,
can be used for client-Side scripting. Ex: Netflix.
Apart from these two Webpages, there are some examples of common web pages that can be
found on most of the websites, and these are as follow:
o Home Page: The home page of any website is one of the most important pages. It is
called a home page because this is like a starting point from where users can go anywhere
on that website. This page usually contains links to the important zones of the site. It can
also be known as the index page.
o Feed Page: The feed page is usually found in those websites that update content. It is
used to provide information to users for the latest information that has been updated.
o Menu Page: The menu page is created to accomplish the navigation goal. The page
contains a collection of different links that give access to different categories and zones.
o About-us Page: This page contains brief information and details of the company,
product, or website. It allows the visitors to know the details of the website that they are
using.
o Registration Page: The registration page allows users to create an account by signing up,
and hence they can create a personalized account. It helps the company to know the
visitor and provide personalized offers and deals to them.
o Contacts Page: This is a simple page made for the visitors to contact the website owner.
For any issue or any feedback, users can use this page.
o Landing Page: This is one of the special types of a Web page used as a core part of a
website or as an individual page. The main aim of creating this page is to convert the
visitors into the lead. It represents clear and focused content on a specific goal.

Server-side dynamic web page

It is created by using server-side scripting. There are server-side scripting parameters that
determine how to assemble a new web page which also include setting up of more client-side
processing.
Client-side dynamic web page
It is processed using client side scripting such as JavaScript. And then passed in to Document
Object Model (DOM).

Full Stack Development - JS Family 7

 Migay Associates

HTML Overview

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.

It is used to design web pages using a markup language. HTML is an abbreviation of

Hypertext and Markup language. Hypertext defines the link between the web pages. The
markup language is used to define the text document within the tag which defines the structure
of web pages. it is a markup language rather than a programming language. So, no such error can
occur during the execution of HTML code. HTML code was rendered by the browser. It was not
compiled or interpreted. HTML 5 is the fifth and current version of HTML. It has improved the
markup available for documents and has introduced application programming interfaces (API)
and Document Object Model (DOM).

What are the differences between HTML 4 and HTML 5

HTML4 and HTML5 are the two versions of HTML that offer more features than the
earlier versions. The following table depicts the main differences between HTML4 and HTML5.
Feature HTML 4 HTML 5
Release Date 1997 October 2014
Doctype Lengthy and complex Simplified: <!DOCTYPE html>
Declaration
Vector Graphics Requires plug-ins like Native support with <svg>
Adobe Flash
Audio/Video Requires external plugins Native support with <audio> and <video>
Support (like Flash)

Full Stack Development - JS Family 8

 Migay Associates

Semantics Limited semantic elements Rich semantic elements

like <article>, <nav>, <section>, <header>,
<footer>
APIs and DOM Limited API support Extensive APIs (offline storage, drag-drop,
etc.)
Graphics Limited; mainly through Canvas API for 2D/3D graphics
external plugins
Storage Cookies for client-side Local storage, session storage
storage
Accessibility Basic Improved with new semantic elements
Browser Consistent across modern Varies; older browsers require polyfills
Compatibility browsers
Mobile Support Limited Enhanced, with features for mobile
optimization
Form Controls Basic controls New form controls like calendar, date, time,
color picker
Scripting Heavily reliant on external More integrated scripting capabilities
scripts
Structure Less emphasis on document Strong focus on document structure
structure

Features:
 It has introduced new multimedia features which supports both audio and video controls by
using <audio> and <video> tags.
 There are new graphics elements including vector graphics and tags.
 Enrich semantic content by including <header> <footer>, <article>, <section> and
<figure> are added.
 Drag and Drop- The user can grab an object and drag it further dropping it to a new
location.
 Geo-location services- It helps to locate the geographical location of a client.
 Web storage facility which provides web application methods to store data on the web
browser.
 Uses SQL database to store data offline.
 Allows drawing various shapes like triangle, rectangle, circle, etc.
 Capable of handling incorrect syntax.
 Easy DOCTYPE declaration i.e., <!doctype html>
 Easy character encoding i.e., <meta charset=”UTF-8″>

Features of HTML
 It is easy to learn and easy to use.
 It is platform-independent.
 Images, videos, and audio can be added to a web page.
 Hypertext can be added to the text.
 It is a markup language.
HTML Elements and Tags
HTML uses predefined tags and elements that instruct the browser on how to display the
content. HTML elements include an opening tag, some content, and a closing tag. It‟s

Full Stack Development - JS Family 9

 Migay Associates

important to remember to include closing tags. If omitted, the browser applies the effect of the
opening tag until the end of the page.
This section will dive into the basic structure of an HTML page, which includes essential
building-block elements like doctype declaration, HTML, head, title, and body elements.

HTML Page Structure

The basic structure of an HTML page is shown below. It contains the essential building-block
elements (i.e. doctype declaration, HTML, head, title, and body elements) upon which all web
pages are created.

 <!DOCTYPE html> – This is the document type declaration (not technically a tag). It
declares a document as being an HTML document. The doctype declaration is not case-
sensitive.
 <html> – This is called the HTML root element. All other elements are contained within it.
 <head> – The head tag contains the “behind the scenes” elements for a webpage. Elements
within the head aren‟t visible on the front end of a webpage. HTML elements used inside
the <head> element include:
 <style> – This HTML tag allows us to insert styling into our web pages and make them
appealing to look at with the help of CSS.
 <title> – The title is what is displayed on the top of your browser when you visit a website
and contains the title of the webpage that you are viewing.
 <base> – It specifies the base URL for all relative URL‟s in a document.
 <noscript> – Defines a section of HTML that is inserted when the scripting has been
turned off in the user‟s browser.
 <script> – This tag is used to add functionality to the website with the help of JavaScript.
 <meta> – This tag encloses the metadata of the website that must be loaded every time the
website is visited. For eg:- the metadata charset allows you to use the standard UTF-8
encoding on your website. This in turn allows the users to view your webpage in the
language of their choice. It is a self-closing tag.
 <link> – The „link‟ tag is used to tie together HTML, CSS, and JavaScript. It is self-
closing.
 <body> – The body tag is used to enclose all the visible content of a webpage. In other
words, the body content is what the browser will show on the front end.

Full Stack Development - JS Family 10

 Migay Associates

An HTML document can be created using an HTML text editor. Save the text file using the
“.html” or “.htm” extension. Once saved as an HTML document, the file can be opened as a
webpage in the browser.
HTML Editing Tools:
HTML editing tools are software applications used to write and edit HTML code. These
can range from simple text editors to advanced Integrated Development Environments (IDEs).
Basic/built-in text editors are Notepad (Windows) and TextEdit (MacOS).

Examples:
1. Text Editors: Notepad (Windows), TextEdit (Mac)
2. Code Editors: Visual Studio Code, Sublime Text, Atom
3. IDEs: Adobe Dreamweaver, JetBrains WebStorm
Web Browsers
HTML does not show output on the compiler. Web browsers show the results of an HTML
code. It reads HTML files and determines how to show content with the help of HTML tags.
Any web browser (Google, Safari, Mozilla Firefox, etc) can be used to open a . HTML
file and view the results.

HTML TAGS
HTML uses specified tags and attributes to instruct browsers on how to display text, which
includes what format, style, font size, and pictures to display. HTML is a case-insensitive
language. Case insensitive means that there is no distinction between upper and lower case
(capital and small letters), which are both viewed as the same; for example, 'P' and 'p' are both
the same here. In HTML, tags are classified into two types:
 Paired tags: These tags come in pairs. They have both opening(< >) and closing(</ >)
tags. For eg, <p> ...</p>
 Empty tags: These tags do not come in pairs and contain no information. For eg, <img
src="" alt="">

An HTML document is divided into two parts:

 Head part- The title and metadata of a web document are contained in the head element.
 Body part- The body element includes the information that you wish to display on a web
page. To make your web pages HTML 4 compatible, include a document type declaration
(DTD) before the HTML element. When you create a new web page, many web
publishing software will automatically add DTD and basic tags. The first tag on a web

Full Stack Development - JS Family 11

 Migay Associates

page shows the markup language used for the document. The tag offers information about
the web page. Finally, the content appears in the tag.
Basic Structure of HTML
An HTML document's basic structure consists of5 elements:
 <!DOCTYPE>
 <html>
 <head>
 <title>
 <body>
<!DOCTYPE>
The tag in HTML is used to inform the browser about the HTML version used in the web page.
It is referred as the document type declaration (DTD). It is not really a tag/element but rather
an instruction to the browser regarding the document type. It is a null element that does not have
a closing tag and must not contain any content.
Actually, there are various types of HTML e.g. HTML 4.01 Strict, HTML 4.01
Transitional, HTML 4.01 Frameset, XHTML 1.0 Strict, XHTML 1.0
Transitional, XHTML 1.0 Frameset, XHTML 1.1, etc.

Since HTML 4.01 was based on SGML, the declaration relates to the Document Type
Declaration (DTD) in HTML 4.01. However, HTML 5 is not based on SGML (Standard
Generalized Markup Language).
Syntax of
<!DOCTYPE html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Example: In the given example, we are going to use the <!DOCTYPE html> tag to declare the
version of HTML the page is written in. It is an empty tag and does not contain any information.
<!DOCTYPE html>
<html>
<head>
<title>!DOCTYPE tag</title>
</head>
<body>
<h1> !DOCTYPE tag </h1>
</body>
</html>
Output

<html>

Full Stack Development - JS Family 12

 Migay Associates

The <html> tag in HTML is used to specify the root of HTML and XHTML pages. The <html>
tag informs the browser that this is an HTML document. It is the second outer container for
everything in an HTML document, followed by the tag. The <html> tag requires a beginning and
ending tag.
Syntax of the <html> Tag
<!DOCTYPE html>
<html>
...
</html>
Example: In the given example, we are going to use the <html> tag to show how it contains the
contents of an HTML document.
<!DOCTYPE html>
<title>HTML tag</title>
<!-- HTML tag starts here -->
<html>
<body>
<h1>html Tag</h1>
</body>
</html>
<!-- HTML tag ends here -->
Output:

<head>
The <head> tag in HTML is used to contain metadata (data about data). It is used between
the<html> and <body> tags.
The head of an HTML document is a section of the document whose content is not displayed in
the browser when the page loads. It only contains HTML document metadata, which specifies
information about the HTML document.
Depending on our needs, an HTML head might contain a lot of metadata information or can
have very little or no metadata information. However, the head section of an HTML document
plays an essential role in the creation of a website.
The document title, character set, styles, links, scripts, and other meta information are defined by
metadata.
The following is a list of metadata tags:
 <title>
 <style>
 <meta>
 <link>
 <script>
 <base>
Syntax of the <head> Tag
<!DOCTYPE html>
<html>
<head>

Full Stack Development - JS Family 13

 Migay Associates

...
</head>

</html>
Example: In this example, we are going to use the <head> tag containing the <style> (to add
CSS to our content) and <title> (to add title to our webpage) tag.
<!DOCTYPE html>
<html>
<head>
<title>head tag</title>
<style>
h1{
color: blue;
}
</style>
</head>
<body>
<h1> head tag </h1>
</body>
</html>
Output:

<title>
This <title> tag in HTML displays the title of a web page and can help in higher rankings in
search results if appropriate keywords are included.
The most significant meta element to add to our webpage is the <title> element. It gives a
relevant title to the full HTML content. It appears at the top of the browser window and gives the
webpage a fitting name when saved as a favorite or bookmark. A solid web page title will
guarantee a higher rank in search results. Thus, we must constantly utilize relevant keywords.
It can be found in all HTML/XHTML documents. The <title> element must be positioned
between the <head> element, and there can only be one title element per document.
Syntax of the <title> Tag
<!DOCTYPE html>
<html>
<head>
<title> ... </title>
</head>

</html>
Example: In this example, we are going to use the <title> tag to add a title to our webpage.
<!DOCTYPE html>
<html>
<head>

Full Stack Development - JS Family 14

 Migay Associates

<title>title tag</title>
</head>
<body>
<h1> title tag </h1>
</body>
</html>

Output:

<body>
The <body> tag in HTML specifies the main content of an HTML document that appears on the
browser. It can contain headings, text, paragraphs, photos, tables, links, videos, etc.
The <body> tag must come after the <head> tag, or it must be inserted between
the </head> and </html> tags. This tag is essential for all HTML documents and should only be
used once throughout the document.

Syntax of the <body> Tag

<!DOCTYPE html>
<html>
<head>
<title>Body Tag</title>
</head>
<body>
<h1>...</h1>
<p>...</p>
</body>
</html>
Example: In the given example, we are going to use the <body> tag to add a heading, paragraph,
and image to our webpage.
<!DOCTYPE html>
<html>
<head>
<title>Body Tag</title>
</head>
<body>

Full Stack Development - JS Family 15

 Migay Associates

<h1>Example of body tag</h1>

<p>This paragraph and the image displayed below is written between the body tag.</p>
<imgsrc="https://cdn.pixabay.com/photo/2022/07/09/13/24/mountains-
7310910__340.jpg" alt="mountains">
</body>
</html>

Output of the above code:

HTML Attribute
o HTML attributes are special words which provide additional information about the
elements or attributes are the modifier of the HTML element.
o Each element or tag can have attributes, which defines the behaviour of that element.
o Attributes should always be applied with start tag.
o The Attribute should always be applied with its name and value pair.
o The Attributes name and values are case sensitive, and it is recommended by W3C that it
should be written in Lowercase only.
o You can add multiple attributes in one HTML element, but need to give space between
two attributes.

Syntax
<element attribute_name="value">content</element>

Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1> This is Style attribute</h1>
<p style="height: 50px; color: blue">It will add style property in element</p>
<p style="color: red">It will change the color of content</p>
</body>
</html>

Output:

Full Stack Development - JS Family 16

 Migay Associates

Explanation of above example:

<p style="height: 50px; color: blue">It will add style property in element</p>

In the above statement, we have used paragraph tags in which we have applied style attribute.
This attribute is used for applying CSS property on any HTML element. It provides height to
paragraph element of 50px and turns it colour to blue.
<p style="color: red">It will change the color of content</p>

The title attribute in HTML

Description: The title attribute is used as text tooltip in most of the browsers. It display its text
when user move the cursor over a link or any text. You can use it with any text or link to show
the description about that link or text. In our example, we are taking this with paragraph tag and
heading tag.
Example
With <h1> tag:
<h1 title="This is heading tag">Example of title attribute</h1>
With <p> tag:
<p title="This is paragraph tag">Move the cursor over the heading and paragraph, and you w
ill see a description as a tooltip</p>
Code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h1 title="This is heading tag">Example of title attribute</h1>

<p title="This is paragraph tag">Move the cursor over the heading and paragraph, and you
will see a description as a tooltip</p>
</body>
</html>

Output:

Full Stack Development - JS Family 17

 Migay Associates

The src Attribute

The src attribute is one of the important and required attribute of <img> element. It is source for
the image which is required to display on browser. This attribute can contain image in same
directory or another directory. The image name or source should be correct else browser will not
display the image.
Example
<img src="whitepeacock.jpg" height="400" width="600">

Output:

Sample exercises:
 Write an HTML program to display hello world.
 Write a program to create a webpage to print values 1 to 20
 Write a program to create a webpage to print your city name in green color.
 Write a program to print a paragraph with different font and color.

Full Stack Development - JS Family 18

 Migay Associates

HTML Formatting is a process of formatting text for better look and feel. HTML provides us
ability to format text without using CSS. There are many formatting tags in HTML. These tags
are used to make text bold, italicized, or underlined. There are almost 14 options available that
how text appears in HTML and XHTML.
In HTML the formatting tags are divided into two categories:
o Physical tag: These tags are used to provide the visual appearance to the text.
o Logical tag: These tags are used to add some logical or semantic value to the text.
o Following is the list of HTML formatting text.

Element name Description

<b> This is a physical tag, which is used to bold the text written between it.
<strong> This is a logical tag, which tells the browser that the text is important.
<i> This is a physical tag which is used to make text italic.
<em> This is a logical tag which is used to display content in italic.
<mark> This tag is used to highlight text.
<u> This tag is used to underline text written between it.
<tt> This tag is used to appear a text in teletype. (not supported in HTML5)
<strike> This tag is used to draw a strikethrough on a section of text. (Not supported in
HTML5)
<sup> It displays the content slightly above the normal line.
<sub> It displays the content slightly below the normal line.
<del> This tag is used to display the deleted content.
<ins> This tag displays the content which is added
<big> This tag is used to increase the font size by one conventional unit.
<small> This tag is used to decrease the font size by one unit from base font size.

The HTML <center> is a block level element which contains both block level and inline contents
within it. The content written between the <center> elements will be displayed at the middle of
the page.
The <center> tag has been deprecated in HTML 4 and obsolete in HTML5.
Syntax
<center>Add Content Here....</center>

Following are some specifications about the <center> tag

Display Inline
Start tag/End tag Both start and End tag
Usage textual

HTML Lists
HTML Lists are used to specify lists of information. All lists may contain one or more list
elements. There are three different types of HTML lists:
1. Ordered List or Numbered List (ol)
2. Unordered List or Bulleted List (ul)
3. Description List or Definition List (dl)
HTML Ordered List or Numbered List
In the ordered HTML lists, all the list items are marked with numbers by default. It is known as
numbered list also. The ordered list starts with <ol> tag and the list items start with <li> tag.

Full Stack Development - JS Family 19

 Migay Associates

<ol type = “a”>

<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ol>

<li style="list-style-type:lower-alpha">Tea</li>

HTML Unordered List or Bulleted List

In HTML Unordered list, all the list items are marked with bullets. It is also known as bulleted
list also. The Unordered list starts with <ul> tag and list items start with the <li> tag.
<ul type = “square”>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
<ul style="list-style-type:square">
HTML Description List or Definition List
HTML Description list is also a list style which is supported by HTML and XHTML. It is also
known as definition list where entries are listed like a dictionary or encyclopedia.
The definition list is very appropriate when you want to present glossary, list of terms or other
name-value list.
The HTML definition list contains following three tags:
1. <dl> tag defines the start of the list.
2. <dt> tag defines a term.
3. <dd> tag defines the term definition (description).
<dl>
<dt> </dt>
<dd </dd>
<dt> </dt>
<dd> </dd>
<dt> </dt>
<dd> dd>
<dt> </dt>
<dd> < dd>
</dl>

HTML Table
HTML table tag is used to display data in tabular form (row * column). There can be many
columns in a row.
We can create a table to display data in tabular form, using <table> element, with the help of
<tr> , <td>, and <th> elements.
In Each table, table row is defined by <tr> tag, table header is defined by <th>, and table data is
defined by <td> tags.

Full Stack Development - JS Family 20

 Migay Associates

The <tbody> tag is used to group the body content in an HTML table.
The <tbody> element is used in conjunction with the <thead> and <tfoot> elements to specify
each part of a table (body, header, footer).
Browsers can use these elements to enable scrolling of the table body independently of the
header and footer. Also, when printing a large table that spans multiple pages, these elements can
enable the table header and footer to be printed at the top and bottom of each page.
Note: The <tbody> element must have one or more <tr> tags inside.
The <tbody> tag must be used in the following context: As a child of a <table> element, after
any <caption>, <colgroup>, and <thead> elements.
<table>
<tr>
<th> </th>
<th> </th>
</tr>
<tr>
<td> </td>
<td </td>
</tr>
<tr>
<td> </td>
<td </td>
</tr>
</table>

By using thead & tbody tags

<html>
<head>

</head>
<body>

<table>
<thead>
<tr>
<th> </th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>

Full Stack Development - JS Family 21

 Migay Associates

<tfoot>
<tr>
<td> </td>
<td> </td>
</tr>
</tfoot>
</table>

Attributes
The following is a list of attributes that are specific to the <table> tag:

Attribute Description
align Alignment of the table. It can be one of the following values: left, center, right
bgcolor Background color of the table
border Size of the frame surrounding table (in pixels)
cellpadding Space between the content of a cell and the border (in pixels)
Sets the amount of space between the cell walls and the cell content.
cellspacing Size of the space between cells (in pixels).
Sets the amount of space between cells
frame Side of the table frame is displayed. It can be one of the following values: above,
hsides, lhs, border, void, below, vsides, rhs, box
rules Lines that should be displayed. It can be one of the following values: none, groups,
rows, columns, all
summary Alternative text displayed when table can not be displayed
width Width of the table
colspan To make a cell span over multiple columns, use the colspan
rowspan To make a cell span over multiple rows, use the rowspan
Cell color Background cell color

Note
 The HTML <table> element is found within the <body> tag.
 The <table> tag is made up of <tr>, <th>, and <td> tags.
 The <tr> tag defines the table rows. There must be at least one row in the table.
 The <th> tag defines the header cells in the table which are displayed as bold, center-
aligned text.
 The <td> tag defines the standard cells in the table which are displayed as normal-weight,
left-aligned text.

<font> tag

The font tag is used to change the color, size, and style of a text and it was used in HTML4.
The base font tag is used to set all the text to the same size, color, and face.

Attribute
Size: adjust the size of the text in the HTML document using a font tag with the size
attribute
Face: set by using face attribute with font tag in HTML document

Full Stack Development - JS Family 22

 Migay Associates

Color: set the text color using a font tag with the color attribute in an HTML
document. Color can be specified either with its name or with its hex code.

<marquee>
used to scroll a image or text horizontally or vertically.
it scrolls the image or text up, down, left or right automatically
Marquee's element contains several attributes that are used to control and adjust the appearance
of the marquee.
Attribute Description
behavior It facilitates user to set the behavior of the marquee to one of the three
different types: scroll, slide and alternate.
direction defines direction for scrolling content. It may be left, right, up and
down.
width defines width of marquee in pixels or %.
height defines height of marquee in pixels or %.
hspace defines horizontal space in pixels around the marquee.
vspace defines vertical space in pixels around the marquee.
scrolldelay defines scroll delay in seconds.
scrollamount defines scroll amount in number.
loop defines loop for marquee content in number.
bgcolor defines background color. It is now deprecated.

HTML Scroll Marquee

It is a by default property. It is used to scroll the text from right to left, and restarts at the right
side of the marquee when it is reached to the end of left side. After the completion of loop text
disappears.

<marquee width="100%" behavior="scroll" bgcolor="pink">

This is an example of a scroll marquee...
</marquee>
HTML audio tag is used to define sounds such as music and other audio clips. Currently there
are three supported file format for HTML 5 audio tag.
1. mp3
2. wav
3. ogg
HTML5 supports <video> and <audio> controls. The Flash, Silverlight and similar technologies
are used to play the multimedia items.

<audio controls>
<source src="koyal.mp3" type="audio/mpeg">
Your browser does not support the html audio tag.
</audio>

Attributes of HTML Audio Tag

There is given a list of HTML audio tag.
Attribute Description
controls It defines the audio controls which is displayed with play/pause
buttons.

Full Stack Development - JS Family 23

 Migay Associates

autoplay It specifies that the audio will start playing as soon as it is ready.
loop It specifies that the audio file will start over again, every time when it is
completed.
muted It is used to mute the audio output.
preload It specifies the author view to upload audio file when the page loads.
src It specifies the source URL of the audio file.
HTML Audio Tag Attribute Example
Here we are going to use controls, autoplay, loop and src attributes of HTML audio tag.
<audio controls autoplay loop>
<source src="koyal.mp3" type="audio/mpeg"></audio>

MIME Types for HTML Audio format

The available MIME type HTML audio tag is given below.

Audio Format MIME Type

mp3 audio/mpeg
ogg audio/ogg
wav audio/wav

<video> Tag
The <video> tag is used to embed video content in a document, such as a movie clip or other
video streams.The <video> tag contains one or more <source> tags with different video sources.
The browser will choose the first source it supports. The text between
the <video> and </video> tags will only be displayed in browsers that do not support the
<video> element.

Play a video:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

Full Stack Development - JS Family 24