HTML & CSS

DEMYSTIFIED
Complete and Concise Web Design & Development Coding Crash Course

D-WYSE
Copyright © 2022 D-WYSE
All Rights Reserved
This book or parts thereof may not be reproduced in any form, stored in any retrieval system, or
transmitted in any form by any means—electronic, mechanical, photocopy, recording, or otherwise—
without prior written permission of the publisher, except as provided by United States of America
copyright law and fair use.
Disclaimer and Terms of Use
The author and publisher of this book and the accompanying materials have used their best efforts in
preparing this book. The author and publisher make no representation or warranties with respect to the
accuracy, applicability, fitness, or completeness of the contents of this book. The information contained
in this book is strictly for informational purposes. Therefore, if you wish to apply the ideas contained in
this book, you are taking full responsibility for your actions.
Printed in the United States of America
 CONTENTS
CONTENTS
INTRODUCTION
PART ONE (HTML)
CHAPTER ONE
GETTING STARTED WITH HTML
Internet and how does it work
A list of NSP is given below
UUNet
History of the Internet
Layers of TCP/IP
Why is the internet considered the best invention?
Role of the internet globally
How useful is the Internet?
Components of the internet
Difference between WWW and the Internet?
Future and its roles
Advantages of the Internet
Disadvantages of the Internet
Domain, IP, and Browsers
What is a web browser?
What is a search engine?
History of web browsers
What is behind a browser?
What is a domain name?
IP (Internet Protocol) address
Types of IP address
Features of IP v6
Browser wars
HTML in Real World
Features of HTML
Characteristics of HTML
Advantages of HTML
Disadvantages of HTML
Importance of HTML
Elements & tags
Difference between elements and tags
Basic HTML Tags
What are the two components of attributes?
Difference between tags and attributes
HTML Syntax
Basic HTML Elements
HTML Future
Text Editor
Installation of Visual Studio Code
Exploring Visual Studio Code
Creating a file
Saving a file
Search a text in a file
Source control
Run and debug
Extensions
Shortcut keys
Editor’s settings
HTML Extensions
CSS Extensions
JavaScript Extensions
Visual studio code themes
CHAPTER TWO
INTRODUCTION TO HTML
HTML Introductory
HTML Elements
HTML Uses
Applications of HTML
Benefits of HTML
HTML Version and its uses
Why should we use HTML?
History of HTML
Basics Tags of HTML
 Doctype tag
HTML tag
Head tag
Title tag
Title elements
Body tag
P tag
Br tag
Assignment
HTML Attributes
a href attribute
Link redirection with a tag
src attribute
Resizing an image in HTML
alt attribute
style attribute
HTML Elements
Block-level element
Inline elements
Assignment
HTML Links
Target attribute
Links, color and Bookmarks
Links
How to apply color on the button
Assignment
CHAPTER THREE
CONCEPT IN HTML FORMATTING
HTML Formatting
What is HTML formatting?
<b> tag
<strong> tag
<i> and <em> tags
<mark> tag
<u> tag
<strike> tag
<tt> tag
<sup> tag
<sub> tag
<del> tag
Assignment
HTML Style
Text color
Background color
Font-family
Font-size
Text-align
Assignment
HTML Quotations
<blockquote> for long quotations
<q> for short quotations
<abbr> for abbreviation tag
<address> tag
<cite> tag
<bdo> tag
Assignment
HTML Comments
Single line comment
Multiline Comments
Commenting Script Code
Commenting style sheets
HTML Colors
Background colors
Text color
Border color
RGB colors
RGBA colors
HEX color
Assignment
HTML Image part 1
Image floating
Image as a link
Animated Images
HTML Image part 2
Image maps
Syntax
The Areas
 Background Images
Assignment
HTML Image part 3
Background Repeat
Picture Element
Common Image Formats
Assignment
Table in HTML
Colspan
Rowspan
Assignment
Lists in HTML
Ordered List or Numbered List
Unordered list or Bulleted list
Description list or Definition list
Nested List
HTML Block and Inner Elements
HTML Block
Inline Element
HTML with CSS
HTML Style - CSS
Inline CSS
Internal CSS
External CSS
CHAPTER FOUR
HTML CLASSES, ID, AND LAYOUT
HTML Class Attribute
What are the HTML class attributes?
HTML Id Attribute
Class-work
HTML with JavaScript
HTML Responsive Design
Syntax
HTML Iframes
iframe syntax
Width and Height of iframe
HTML File Paths
HTML Doctype
HTML - The Head Element
HTML <title> element.
HTML <style> element
HTML <link> element
HTML <meta> tag
HTML <script> element
HTML Layout Elements
<header>
<nav>
<section>
<footer>
<summary>
HTML Meta
HTML Semantic Elements
HTML5 <article> element:
HTML5 <header> element
HTML5 <footer> element
HTML Style Guide and Coding Conventions
Using Lowercase Element Names
Close All HTML Elements
Always Quote Attribute Values
syntax
syntax
Spaces and equal size
syntax
Blank line and Indentation
Meta Data
Setting the viewport.
HTML Entities
How to use an entity.
syntax
Combining diacritical marks
Non-breaking space
HTML Symbols
Assignment
Using Emojis in HTML
HTML Charset Attribute
HTML Encoding (Character Sets)
Why is UTF-8 supported by HTML4?
 UTF-8 syntax for HTML4
HTML Uniform Resource Location (URL)
Common URL Schemes
URL Encoding
CHAPTER FIVE
HTML FORMS
HTML Forms part 1
Why Use HTML Form?
Syntax for form
List of input types and their description
Text field
Radio buttons
Assignment
HTML Forms part 2
Checkboxes
Submit Button
Assignment
HTML Forms Attributes
HTML Action Attribute
Target attribute
List of target attributes
HTML Method Attribute
Post method
Get method
HTML novalidate attribute HTML5
HTML Forms Elements
<select> element
<textarea> element
<button> element
<fieldset> and <legend> elements
Datalist Element
Assignment
HTML Input Attributes
HTML Value Attribute
HTML Read-only Attribute
HTML Disabled Attribute
HTML Min and Max Attribute
HTML Placeholder attribute
HTML Required Attribute
HTML height and width attribute
Assignment
CHAPTER SIX
HTML GRAPHICS
HTML Canvas Graphics
Canvas tag with JavaScript
Drawing circle on Canvas
HTML SVG Graphics
What is SVG
SVG Circle Example
Rectangle Example
HTML Canvas vs. SVG
Comparison between Canvas & SVG
CHAPTER SEVEN
HTML MEDIA
HTML Multimedia
Multimedia formats
Common video format
Common audio formats
HTML Video
HTML Video Element
HTML Audio
HTML Plug-ins
The object element
The Embed element
PART TWO
(CSS)
CHAPTER EIGHT
FUNDAMENTAL APPROACH TO CSS
Introduction to CSS
CSS Advantages
 CSS Inclusion In HTML
Inline Stylesheet
Internal Stylesheet
External Stylesheet
HTML code
CSS code
CSS Basics
The General Rule
Our First Stylesheet
Inline Styling
CSS Commenting
CHAPTER NINE
STYLE BEAUTIFICATION
CSS Colors
The mathematical concept of colors
Decimal – Base 10
Binary – Base 2
Hexadecimal – Base 16
How color works on CSS
Hexadecimal example
RGB example
RGBA example
CHAPTER TEN
CSS CUSTOMIZATION
Background Color
HTML
CSS
Browser
HTML
CSS
Background Image
Border Styling
Margin on element
Padding on element
Assignment
CHAPTER ELEVEN
CSS SELECTOR
The Basic: Element, Id & Class
Element Selector
Id Selector
Class Selector
CHAPTER TWELVE
INTRODUCTION TO CHROME INSPECTOR
Google Chrome Inspection
CHAPTER THIRTEEN
MORE ADVANCED SELECTORS
Asterisk selector
Descendant Selector
Adjacent selector
Attributes selector
Nth of type
CHAPTER FOURTEEN
SPECIFICITY AND THE CASCADE
Inheritance
Specificity
Assignment
CHAPTER FIFTEEN
TEXT AND FONTS
Font Family
Font Size
Font Weight
Line Height
Text Alignment
Text Decoration
Using Google Fonts
Conclusion
INDEX

INTRODUCTION
Every building lays a hidden foundation, upholding the structure without HTML and CSS there won’t be anything called a
website. This two-part series provides an in-depth look at the fundamentals of coding in HTML and CSS. We will start by
exploring HTML Development using some of the most commonly used tags and attributes.

In any field of the tech industry, it is highly recommended to learn the foundational concept of how the internet works and
without websites' actualization of the internet, it might be far away from reality. In this guide, you will be taught beyond the
scope of Hypertext Markup Language and Cascading Stylesheet. The foundational concept of the internet and how it works,
Domain name, IP address, and a lot more, how everything interrelates with each other.

Many books have discussed WHAT but only a few discussed HOW, this guide is only recommended for whosoever is
willing to LEARN and eager to PRACTICE. If these two ingredients are not in place, then don’t get this guide. Beyond
selling, our core value is to impart practical knowledge to as many as we can reach out to.

Lastly, with HTML and CSS, you can build a good frontend responsive website from scratch, no website can survive
without HTML & CSS which is the foundational structure website. Isn’t it amazing to know that websites like Facebook,
Google, Amazon, and a lot more are built on HTML & CSS?

Let's get started.

PART ONE (HTML)

 CHAPTER ONE

GETTING STARTED WITH HTML

Internet and how does it work

An important aspect of our daily life is the internet, without it, everything seems bleak. You would not be able to connect to
the world or you cannot run the offices or your personal business, even at times your home.

What the internet does is connect two or more computers. It is an interconnected network. With the help of the internet, the
world is connected. It connects millions of web servers, limitless data, etc. and you can access that with the help of a web
browser. We learn about that in the next section.

There are a large number of internet networks, and they are connected. We can say it is the backbone of the internet, and
they are the network service providers or NSP.

A list of NSP is given below

UUNet
Cerfnet
IBM
BBN planet
SprinNet, etc.

History of the Internet

Do you know the internet is around 25 years old? Let’s see our internet investors.

Robert Elliot Khan was born on 23rd December 1938. He is an American electrical engineer
Winton Gray Cerf was born on 23rd June 1943. He is an American internet pioneer, and he is also recognized as the
father of the internet. He shared the title father of the internet with Bob Kahn

On January 1st, 1983, the internet came into being.

We needed a set of rules and specifications, which were called protocols before the internet era. There were few computer
networks present, but they did not have the standard protocols, then a communications protocol was established called
transfer protocol or Internet Protocol.

Layers of TCP/IP
There are four layers of TCP or IP.

Application layer.
Transport layer.
Internet layer
Network interface.

Why is the internet considered the best invention?

The internet allows you to communicate with anyone present on the planet.
You can have full conversations, text, or send emails anywhere in seconds.

There are countless apps and social networks that are there for you to be in touch with the world. The world without the
internet right now looks practically impossible.
Role of the internet globally
The internet has opened a new world for many people. Many opportunities are available through it. The internet produced a
new level of innovation and opportunities. It knows no boundary but brings huge economic chances for people in every
country.

The internet allows people to improve the quality of their life. With almost three million users, the internet is emerging as
one of the most important tools of communication.

How useful is the Internet?

The internet is a virtual networking medium that can be connected and used on various devices.

It enables users to send, receive, collect, store, update, delete, and many other observations of the data across the world.

Components of the internet

Do you know about the components of the internet? If your reply is no. Let us learn about it. The hardware includes cables
that carry information from your computer to another with time. New hardware confidence has emerged like routers,
servers, cell phone towers, satellites, radios, smartphones, and other devices. All these components form the network of
networks.
Difference between WWW and the Internet?
WWW is a common point of connectivity for information sharing that is created by a global network of computers, it is a
connection between computers and countless other devices that form a huge network of systems.

The internet has influenced almost every aspect of human life, not only private life, but also public services, it also allows
the public to know what the government is doing now. Even people on the street know what is happening among the
political parties and the government officials. Anyone can launch and allow the public to criticize what the producers offer.
In other words, the internet provides open access to anything and everything going on in the world today.

Future and its roles

The internet is for everyone. It gives us a new platform in business and public services. It provides energy for more people
to shape their own life by taking advantage of the wide-open opportunities.

How does the internet affect your life? Have you ever given it a second thought? If the answer is no, let us find out. The
internet is bringing culture closer to more people, making it easier and quicker accessibility.

It also nurtures the rise of new forms of expression for art and the spread of knowledge. Some would say that the internet is
not just a technology, but a cultural artifact in its own right.

Advantages of the Internet

The internet provides information on almost every subject imaginable, it is a powerful search engine that can research your
home vs. research libraries. Information at various levels of study, everything from scholarly articles to the ones directed at
children. Message boards where people can discuss ideas on any topic. Ability to get a wide range of opinions, where people
can find others that have a similar interest in whatever they are interested in.

Disadvantages of the Internet

The internet is filled with lots of wrong information. Anyone can post anything, true or false. Some predators hang out on
the internet, waiting to get unsuspecting people in dangerous situations. People can also be addicted to the internet and thus
causing problems in their interactions with friends and loved ones.

Domain, IP, and Browsers

In this section, we are going to talk about:

Web browser?
Search engine?
Popular browsers
The domain name and IP addresses

What is a web browser?

A web browser is an application used to access and view websites. When you type something on the web browser, it accepts
your request and shows you the content of the website on your screen.

Common web browsers include:

Microsoft Edge
Google Chrome
Mozilla Firefox
Opera
Apple Safari, etc.

What is a search engine?

A search engine is a website where users can search internet content. Users enter the desired search term into the search
field. The search engine then looks through its index for relevant websites and displays them in the form of a list.

For example, when you open Google Chrome and search for something, Google has the crawl to display the website on your
computer screen.
Google is a search engine while Chrome is a web browser. There are many search engines available.

Examples of famous search engines are:

Google
Yahoo
Bing
DuckDuckGo
Baidu Internet Explorer, etc.

History of web browsers

The history of web browsers from the year 1990 to 2015 are:

1990 - World Wide Web

1992 - Lynx was a text-bases browser
1993 - Mosaic allowed images
1994 - Noticeable improvement to Mosaic
1995 - Internet Explorer's debut
1996 - Opera started as a research project
2003 - Apple's Safari was released
 2004 - Mozilla launches Firefox
2007 - Mobile Safari was introduced
2008 - Google Chrome appeared
2011 - Opera Mini was released
2015 - Microsoft Edge was born
What is behind a browser?
The user interface is the browser wrapper, it includes the address bar, back, and forward buttons, minimize, maximize,
exit buttons, tabs, and the reload page button.

These are standards in all browsers, although they aren't technically required. All these elements are usually found on every
browser page to ensure usability. The browser acts as a client to contact the web server and request information. When you
search for something on Google and click on a link or enter the URL in the address board, the webserver locates and sends
the information you just requested to the web browser. It does this by first performing a domain name system to find the
correct IP address.

What is a domain name?

Domain names are used in URLs to identify a particular webpage. For example, in the URL https://www.amazon.com/, the
domain name is amazon.com. After that, it sends a hypertext transfer protocol request to the web server, which sends a
response with HTML and CSS and other content files to the browser.

The browser then communicates with the network to ask for all the documents that make up the beach. Browsers can also
display other more advanced material like interactivity and animations made with JavaScript with internal JavaScript
interpreters.

IP (Internet Protocol) address

An IP address is a unique address that identifies a device on the internet or a local network. IP stands for Internet Protocol.

These are the rules applied to the content sent through the internet. The purpose of an IP address is to handle the connection
between devices that sends and receives information across a network.

The IP address uniquely identifies every device on the internet. If a device doesn't have an IP address, it would be
impossible to have contact with them. An IP address serves two principal functions. It identifies the host, and it provides the
location of the host in the network. It produces a path to the host.

Its role has been characterized as follows:

The name of the IP address indicates what we seek and address.

An address indicates where it is
A route indicates how to get there

The head of each IP packet contains the IP address of the sending host and destination host. An example of an IP address
would be 501.358.10.512

All devices that connect to an internet connection have a unique IP address, which means there is a need for billions of IP
addresses. This requirement is fulfilled by the new IP version. IP v6, IP addresses are broken into two parts network address
and host address. This is where it all comes together.

The first few packets in an IP address identify the network. The exact amount of packets depends on the class of the
network.

Types of IP address
There are four different types of IP addresses they are:

Public
Private
Static
Dynamic
The public and private are indicative of the location of the network. Private is being used inside a network, while the public
is used outside of a network. Static and dynamic indicate permanency.

Features of IP v6
The main features of the IP v6 are now listed below:

End-to-end connectivity: IP v6 stands for internet protocol version 6 provides better end-to-end connectivity
than IP v4.
Faster routing: It has comparatively faster routing.
Ease of administration: IPv6 offers ease of administration, more than IPv4
Security: It provides more security for applications and networks.
Multicast and Anycast abilities: It provides better multicast and anycast abilities.
Better mobility features: It provides better mobility features than IP v4
Follows the key design principles: IP v6 follows the key design principles of IP v4 so that the transition from IP
v4 to IP v6 is moved up.

These are the key features of IP v6 when compared to IP v4. However, IP v6 is not as popular as IP v4.

Browser wars
Several web browser producers were trying to be in the first position, resulting in conflicts. As mentioned, browser wars
have been happening since Internet Explorer and Netscape Navigator went up against each other to be the best-in-class
browsers of the 90s. Several web browser producers were trying to be in the first position, resulting in conflicts. As
mentioned, browser wars have been happening since Internet Explorer and Netscape Navigator went up against each other to
be the best-in-class browsers of the 90s.

Netscape had previously been leading the market, but with the release of Internet Explorer 3, Microsoft took the lead since it
was included in the Windows OS. It became the first choice for many desktop users.

That same situation happened when Safari came to be in 2003. But as users were previously on Internet Explorer or
Navigator, Safari was pre-installed on the desktop, so it automatically gained more users. After some time, Internet Explorer
took over Navigator.

That is until Google Chrome was released in 2008 and quickly thought to be the fabled browser, which we still see today.
We have also seen increased mobile use and differences in mobile browsers, as well as the introduction of HTML 5 and CSS
3. This all contributes to the browser wars between Internet Explorer, Safari, Firefox, Chrome, Opera, and recently Edge
to be the preferred browser for surfing the World Wide Web.

That competition comes in the form of frequent browser updates and version releases that you may notice today, as each
browser tries to one-up the other in speed, security features, and design developers favored the browser, which was
compatible with that development.

For example, most people avoid developing in Internet Explorer since it is known to be so problematic. In the mid-nineties,
if you wanted to use a web browser, you had to go to the local electronic shop and buy one for yourself. No browsers came
with their operating system, as they do now.

For years, Microsoft had ignored the web and focused much on their platform. But soon, Bill Gates realized how the web is
going to make a big impact on the future. Microsoft is already dominating the operating system using a share with 90
percent. But Netscape was the one that dominated the web browser's usage share with 80 percent.

That means if you're buying Microsoft Windows, you'll need a web browser separately first. Microsoft sent its engineer to
Netscape to discuss the future of Microsoft and the web. Things didn't go well between Microsoft and Netscape, and after
some time the two companies directly spoke. Netscape's popularity was increasing, and then, just after 15 days of that IPO
launch (initial public offering), Microsoft had their browser ready, which is the Internet Explorer.

The Internet Explorer version one was released by Microsoft to challenge the Netscape Navigator. Internet Explorer version
1 was nothing in front of the world-class web browser of that time. Only a little damage was done to Netscape's popularity.
Because of this, people at Netscape started taking Microsoft Web plan lightly.
But on 7th December 1995, Bill Gates held a press conference launching Internet Explorer version 2, his intentions were
clear, he did not want to enter the market. He wanted to dominate it. Version 2 came with a few major improvements in a
very short time in the upcoming years. Both the companies waged war against each other. One would release a minor
change. The second would do the same to give a challenge. Both of the companies were releasing minor changes every
month, the war was going at a rapid pace.

Next, is the result of the war.

Microsoft ended up winning the browser wars, and Internet Explorer came to dominate the market in the 1990s. However,
Internet Explorer's market share has gradually been destroyed by the arrival of new browsers such as Google Chrome,
Mozilla Firefox, Safari, and Opera, sparking a new round of browser wars.

Here is the next question coming up. What is the best browser?

2021 the best web browser is Mozilla Firefox

The best for Mac is Google Chrome
The best browser for mobile phones is Opera mini.
The fastest web browser is Vivaldi
The most secure web browser is Tor
The best and coolest browser experience is Brave

And this is all about the history of browser wars.

HTML in Real World

HTML stands for hypertext markup language for creating web pages. It is known as the skeleton structure of the webpage; It
describes the structure of a web page, which consists of a series of elements. The elements tell the browser how to display
the content. Hypertext Markup language is a set of markup symbols or codes inserted into a file intended for display on the
internet. HTML Elements are the foundational structure used to construct web pages and this structure is represented by < >
tags.

The markup tells the web browsers how to display the web pages, words, and images. The hypertext markup language or
HTML is a standard markup language for documents designed to be displayed in a web browser. It can be assisted by
technologies such as cascading style sheets, which is CSS, and scripting languages such as JavaScript. HTML documents
are files that end with a .html or .htm extension. If you want to write your HTML page, you will use an editor

HTML works with any web browser online and offline, web browsers obtain HTML script from a web server or local
storage. For more insight, the hypertext is a text that contains links to all other text, the next term is markup which means to
mark something up. For example, it is all about the content, the last word in a hypertext markup language is language, and
language implies that it has its syntax which is why it is the standard markup language for web pages.

HTML is a code used to structure a web page and its content. For example, content should be structured within a set of
paragraphs. A list of bulleted points or using images and data tables.
HTML was written by Tim Berners-Lee in 1993. Since then, there have been many different versions of HTML. The most
widely used version throughout the 2000s was HTML 4.0, which became an official standard in December 1999.

Features of HTML
Stream video from a website figure: The video element allows you to easily stream video from a website figure.
Display visual content: Figure elements can be used to display visual content, such as photos, illustrations,
diagrams, or code snippets.
Section element: Section elements like “devs”, “aside”, “group”, “section” and others can be used to organize
web page content into thematic groups.
Nav: The nav element is used for the part of a website that links to other pages on the site. The links can be
organized in several ways, which stands for navigation. Below, the links are displayed within the paragraph
elements, and an unordered list could also be used.
Header: The header element can be used to group introductory elements on a website, such as a company, logo,
navigation items, and sometimes a search form
Footer: The footer element is typically found at the bottom or foot of a web page. It can contain copyright
information, links to social media, and additional site navigation items.

Characteristics of HTML
These are the characteristics of HTML:

It is easy to learn and easy to use.

It is platform-independent.
Images, video, and audio can be added to a web page.
Hypertext can be added to the text.
It is a markup language.

Advantages of HTML
It is easy to understand and use.
It is supported by all the browsers.
The HTML syntax is very similar to XML syntax
HTML is free
The fundamental structure of all web design
It is supported by most web development tools.
HTML is the most search-friendly programming language.
It is based on websites from Flying Cow Design.

Disadvantages of HTML
HTML can create only static and plain pages, if you like dynamic pages then HTML alone isn't useful.
Security features are not good at HTML, but if we would like to write down long code for creating a web page
then it is not advisable yet.
It produces some level of complexity.

Importance of HTML
HTML is a language used to tell your web browser what each part of a website is.
Using HTML, you can define headers, photographs, links, images, and more.
Your browser knows how to structure the web page you are looking at with the help of HTML.

Elements & tags

Elements are responsible for creating web pages and defining content on the web page
An element in HTML usually consists of a start tag, that is tag name followed by a close tag, the tag name, and
content inserted between them.
Technically, an element is a collection of start tag attributes and content in between them, then a closing tag.
Tags, it designs the basic layout and formatting of web pages by using tags and attributes.
The tag name tells the tag's purpose
 And the attributes that follow the tag name give additional information about the web browser
Difference between elements and tags
As we already know about elements and tags. Let us make a differentiation between them

Element is a set of opening and closing tags in use

Tags of labels are used to mark up the beginning and the end of an element.
All tags have the same format, they begin with the less than sign and end with a greater than sign.

Basic HTML Tags

Let's jump into the next topic about 10 basic HTML tags, so let us look at those 10 tags:

<html>: The HTML tag is the root element in which all tags come into existence
<head>: The head tag is the document head which gives visibility on what the HTML page is all about
<title>: The title is a bit similar to the head tag, the tag gives brief descriptive insight about the HTML page
which specifically define the document title
<body>: The body is the host of contents where all displayed contents can be seen, which is where almost all the
tags and elements reside.
<h1> to <h6>: The h1 is used to defines HTML headings
<p>: It defines the paragraph. Paragraphs are usually represented in visual media as blocks of text separated from
adjacent blocks by blank lines and or first-line indentation.
<a>: The “a href” tag helps to minimize the need for heavy content by linking other pages together for flexibility,
the “a tag” is also known as the hyperlink
<img>: The img defines an image tag, this gives access to image visibility
<src>: The src stands for source which defines a location of an item to be called upon into the HTML page

NOTE: the HTML tag is the most powerful one. <strong>: The HTML strong importance element indicates that its contents
have strong importance, seriousness, or urgency, browsers typically render the contents in bold type.

Once again, what is an HTML element? For example, an HTML element is defined by a start tag, some content, and an end
tag.

What are the two components of attributes?

HTML attributes are generally classified as required attributes, optional attributes, standard attributes, and even attributes.

Required attributes, and optional attributes: Usually, the required and optional attributes modify specific HTML
elements.
Standard attributes and even attributes: the standard attributes can be applied to most HTML elements

Difference between tags and attributes

The difference between tags and attributes are as follows:

A tag is the simplest form of information used in HTML

Attributes have extra information
Tags are also used to mark up the start and end of an HTML element.
An attribute defines a property of an element constitution of a value pair and appears within the elements start-tag

HTML Syntax
The syntax is the arrangement of elements and attributes to create well-formed documents in HTML. This is the purpose of
elements and attributes, and the logical (sense and reference) relationship between elements and the attributes of those
elements.

Basic HTML Elements

The basic elements of the HTML page are:
 Text header denoted using the h1, h2, h3, h4, h5, and h6
Paragraph denoted using the “p tag”
Horizontal ruler denoted using the “hr tag”
And a link to denote the using a that is the “anchor tag”

HTML Future
The future of HTML lies in retaining the bulk of the behavioral semantics of HTML and its tagset and associated CSS
standard while moving to a fully XML compliant syntax.

In our view, this should take a phased approach as the evolving future of HTML
The primary HTML is enhanced minimally to accommodate XML.
In the succeeding phase HTML is altered to have a well-formed XML syntax alongside and current syntax(es)
The semantics of HTML is exposed uniformly through an XML document object model via CSS so that any tag
can access the semantic behavior of HTML
XML integrates with HTML
In the last phase, HTML is subsumed by XML
While the semantics (layout behaviors) are retained as a presentation capability.

This approach provides a smooth migration path for HTML Future.

Text Editor

What is a text editor? A text editor is a type of computer program that edits plain text. As you can see above, there are more
than five text editors such as sublime text, visual studio code, atom, brackets, and notepad++, which are highly
recommended. For this guide, I highly recommend Visual Studio Code

Installation of Visual Studio Code

You might want to argue that Visual Studio Code is not a proper IDE, but you will are wrong. The community describes it as
a freeware source code editor. But this code is so highly extensible that with the right set of plugins and extensions, we
developers can coax it into behaving similarly to some full-fledged IDEs.

You can safely conclude that this code is a much better software tool for someone who's into web development. Vs code
stands for visual studio code which includes great tooling for web technologies such as JSX/React, HTML, CSS, SCSS,
Less, and JSON.

Let’s start with the installation of visual code. I will be showing you the step-by-step procedure to install it. Begin by going
to your favorite browser and searching for visual code. Click on the download button as illustrated below
When the website opens, you can see the option to download for Windows. Simply click on the download button for the
windows option depending on your operating system. Then it starts downloading the executable file.

Once the file is downloaded, open it

Immediately you double click on it, you will be brought into the “license agreement” just tick on “I accept the agreement”
then hit the “next button” to proceed
The next step indicates the location where the visual code will be installed on your operating system. If you want to change
the part, you can select your desired location and then click on the “next button”.
This step asks you if you want to create a start menu folder. Just keep it unchecked and click on next.
This step includes some additional options to choose from, such as creating a desktop icon, etc. So, check all the options and
click next.

This stage almost completes all the installation, once all the files are extracted, click on the “next button”
Visual studio code takes a few seconds to install. So, wait for it to be completed and click on the “finish button”.
Exploring Visual Studio Code

Let us come back and try to understand the various icons present inside visual studio code, and how we can use the editor
after opening the visual studio code. On the left-hand side, as illustrated below, you will see various icons. The first icon,
which looks like two files is called Explorer once you click on Explorer,

a separate menu with the button opens folder appears. We can open the entire folder or a particular file using this option.
Creating a file
Now, let us create a new file for HTML. To do so, click on the file option present behind the open editors, the first icon is for
"new file"

Click on the "New file" in the left menu, a file will be created.

Saving a file
You can name the file with the extension, according to the language you intend to code in. For HTML, name the file as
“index.HTML”, simply press Ctrl + S to save the newly created file as index.HTML

You can also decide not to add the extension, to do that you have to select the extension from the “save as type” it will be
changed from “plain text” to “HTML”
Search a text in a file
Now, if you want to search in the whole folder, use a search icon that is at the left of the visual studio code.

Source control
The third icon after the search icon is source control, visual studio code has very good support
Run and debug
The fourth option icon is for running and debugging

Extensions
The last icon is for extensions.

You can use various extensions which are given by the Visual studio code community. You can search for any programming
language that will give you the recommendations to choose from. Now that you have installed Vs code, let’s see some
features that will boost productivity.

The first one is “IntelliSense”. IntelliSense offers code completion and quick info on the Functions parameters list. This
means that it will help you arrange your parameters, which you pass when you call a function in the order in which the
arguments are originally defined in the function definition.

Shortcut keys
Press “Ctrl + Space” in the code to see the various parameters. Once you click on “HTML sample”
You will get a better view of HTML structural codes

The second interesting feature is code navigation. This helps in navigating between files when you're exploring a project
while working on a task. You will find yourself quickly jumping between the same set of files.

Visual studio code provides two powerful commands to navigate in and across files with easy-to-use key bindings, hold
“Ctrl” and press “tab” to view a list of all files that open in an editor group to open one of these files. Alternatively, you can
use "alt + left" or "alt + right" to navigate between files and find locations, and edit locations. These shortcuts allow you to
navigate between these locations easily.
The third feature is the web crumbs, the bread crumbs are a navigation bar in visual studio code. You can quickly navigate
between folders files and symbols

Once you click on any icon, let's say HTML, you will receive a dropdown menu of other submenus under it like a structural
order. This base is the navigation, including the folders and files editor settings

Editor’s settings
Next, let's open the editor settings, there are many more things to customize for Mac users, you can press “Command +
Comma”, for windows users it is "Ctrl + Comma". You will open a page where the screen splits into two, one on the left
side, where you will see a lot of possible configurations on the right side. You will be able to create your custom settings to
override whatever is on the left.
The first thing to do here is to change the font family and font size to something that you like, click on “text editor” which
will give you access to the “font customization”

For font family type “Consolas, ‘Courier’, monospace”

Font size use 14

Let’s go back to HTML settings. Visual studio code has a valid way of splitting lines by the number of characters. If you
have a long paragraph of text in your HTML and if you hit save, you may notice that the long paragraph gets split into two
lines of code. It's pretty weird because you want to use HTML tags to split them properly.
What you can do is set the wrap line length property to zero. This prevents this visual studio code from acting weirdly. These
settings can be seen under “extension”, locate “HTML” and then look for “wrap line length”.

Add extensions to your code by clicking on the extension icon. As you can see, it has around 1000 installations with five-
star reviews.

Search whatever extension you want to install in the extension field, click on install, and you are done. There are plenty of
extensions available for HTML, CSS, and Js
HTML Extensions
This visual studio code has cool HTML extensions, the ones I use mostly are:

Auto close tag: Auto close tag helps you close HTML tags automatically.
Lesser keystrokes: You can write lesser keystrokes, which is always helping.
Auto rename tag: It has to rename the closing tag when you change the opening tag. It is a lifesaver because
chances are that you might forget to rename the closing tag when changing the opening tag.

CSS Extensions
IntelliSense for CSS names: IntelliSense for class names gives you auto class completions when you are writing
classes. It doesn't always work, but when it works, it is useful.
Sass: For CSS, you install this extension named Sass because it gives us syntax highlighting for scss files both
for .sass and .scss.
Prettier: it keeps your code clean. If you don't want to spend hours debugging your code, just use this

JavaScript Extensions
Now will see JavaScript extensions for JavaScript install these extensions:

JavaScript standardjs styled snippets: These are some snippets that can help you increase your coding speed. For
example, if you type cl followed by "tab", you will get console.log. You can find a list of snippet extension
keyboards in the snippet itself.
Sublime babble: Next is sublime babble, it gives you better syntax highlighting for JavaScript files when you use
newer JavaScript syntax to babble. This is pretty self-explanatory.
npm IntelliSense: npm IntelliSense is good when you use npm modules in the code. It tells you auto-complete
node modules, which is awesome.

Visual studio code themes

In addition to extensions, you can also personalize visual studio code by installing themes. You can open the extension panel
and type in a search. If you find a theme you like, you can click the install button. You will have to reload after installing,
but other than that, there's nothing to it. Some popular themes are:

Night Owl
Dracula
Noctis
OneeDark, etc.

Let's install Dracula search for "Dracula" in the extension search bar. As you can see, there are billions of Dracula themes.
 CHAPTER TWO

INTRODUCTION TO HTML

HTML Introductory

HTML is a scripting language that is used to create frontend applications with the help of the front interface, users can
interact with complex software applications. Note that HTML is a markup language and not a programming language.
HTML stands for Hypertext Markup Language.

It can also embed code written in a programming language like JavaScript, due to which web pages are made interactive.
HTML Elements
The elements in HTML that are used to create a web page, there are many elements, but the most common and useful
elements are:

Headers
Paragraph
Content
And links

With these HTML elements, you can create a structural web page. Open a website, let’s use the YouTube website

If you are using Google Chrome, right-click on the site (YouTube) and select the “Inspect” option

After doing this, you will see the complete source code of the YouTube website. As you can see below, the source code
positioning might vary but one thing is common, the codes’ structure must reflect HTML foundational structure which are
HTML elements (head, body, etc.)
HTML Uses
HTML allows you to design web pages.
Character tags are used for production in their portals and can be possible because of HTML.
With the help of HTML, you can add links to any external website on any web page so that users can easily
navigate to other pages using any of the available links.

Applications of HTML
Let us discuss the applications of HTML.

Open applications of HTML on both mobile and laptop devices.

Not only this, big brokers like Chrome, Firefox, Safari also use HTML to serve web material for better
performance.
Different mobile brokers like Opera, Firefox, Microsoft Edge, Dolphin Puffin are all using HTML for better
presentation.
Apart from this, HTML helps the primary certification channel system on any web page, and because of that, the
traffic can be stopped, meaning we also get security because of HTML. And this is amazing.

Benefits of HTML
HTML is an independent platform.
It is accepted at the worldwide level; HTML can support all types of browsers.
It is very easy to learn and use at the same.
Most importantly, the biggest advantage is that HTML is available in all browsers by default, so you don't need to
buy or install HTML
You can also design your web pages with the help of HTML, which supports a variety of colors, formats, and
layouts.
The syntax of HTML and XML is very similar, there is no significant difference between these two platforms.
It supports developer tools like HTML FrontPage, Dreamweaver, etc.
HTML is user-friendly.
Everyone has adopted it, which is why HTML has become a necessity for every developer today.

HTML Version and its uses

In this section, we will be discussing the uses, and versions of HTML.

Why should we use HTML?

Versions and difference
 Why we abandoned the version 3.0
Versions such as:
HTML 1.0
HTML 2.0
HTML 3.2
HTML 4.01
HTML 5

According to the needs of the software industry, it doesn't stay the same for long before an improved set of standards and
specifications are brought in to allow the easier creation of prettier and more efficient sites.

Why should we use HTML?

HTML takes up less space.
HTML is more forgiving, in case you forget to put some tags, your code will still work fine.
It is easier to learn.
Some older browsers respond more effectively to HTML compared to XHTML.

History of HTML
HTML, W3C, and WHATWG have initially developed HTML in 1993. W3C mainly checked for standards or rules of
HTML. Since the initial release, lots of versions of HTML have been developed. Initially, its version was 1.0 or simply
HTML

HTML 1.0
The first version is HTML 1.0. It was the first release of HTML to the world, and not many people were involved
in website creation. The language was very limited. Simple text tags or paragraph tags were introduced in the
first version. Since the web development area was just starting to rise, it was so limited.

The styling element was also not introduced, and the idea of how a page should be rendered on the browser was
not taken into consideration. The initial version of HTML does not support tables, font support, etc. as it provides
us in the latest version.

HTML 2.0
The second version is HTML 2.0. HTML 2.0 was developed in 1995 and it was an improvement of HTML 1.0.
HTML 2.0 included everything from the original HTML 1.0 specifications but added a few new features to the
mix.
It was more improved in terms of the markup tags and the form concept was developed in this version. But still,
they had basic tags like text boxes, buttons, etc. Also, the table came as an HTML tag.
HTML 3.2
The third version HTML 3.0, was developed in 1997 after it was developed, the next version of HTML was 3.2,
with version 3.2 of HTML tags being improved more. It was worth noting that because of W3C standard
maintenance, the newer version of HTML was 3.2. Now HTML 3.2 has better support for new form elements.
Note another important feature that HTML 3.2 implemented was CSS support. CSS stands for Cascading Style
Sheet.

It is CSS that provides features to make HTML tags look better on rendering it on browsers. CSS helps to style
HTML elements with the up-gradation of browsers to HTML 3.0. The browser also supported frame tags,
although HTML specifications still do not support frame markup tags.

In that era more and more people were getting into HTML games after the HTML 2.0 release, people wanted
more abilities and tags. They wanted to enhance the look of their sites, and this was the reason why the trouble
started.

A company called Netscape was a clear leader in the browser market at that time, with the browser called
Netscape Navigator to fulfill the wishes of HTML authors. They produced new tags and attributed them to their
Netscape Navigator browser. This caused big problems as other browsers tried to replicate the effects of these
tags so as not to be left behind, but could not get the browsers to display things the same way.
 This meant that if you designed a page with Netscape, the page would look bad in other browsers. This confused,
and irritated the mark of pioneers. There was an HTML working group led by a man named Dave Raggett, who
introduced a new HTML draft, HTML 3.0 that included many new and improved abilities for HTML and
promised far more powerful opportunities for their masters to design their pages. Sadly, the browsers were slow
in implementing any of the new improvements, only adding in a few and leaving out the rest. So, the HTML 3.0
version was a failure. It had to be abandoned.

Thankfully, the people in charge noted this, and future improvements were always designed to be modular. This
meant they could be added in stages, which makes it easier on the browser companies. So, this was the story
behind the version of HTML 3.2.

HTML 4.01
HTML 4.0 was a large evolution of the HTML standards and the last iteration of classic HTML. It was
developed in 1999. Earlier in development, it had the code-name Cougar HTML 4.0 which was recommended by
the W3C in December 1997
and became the official standard in April 1998.
HTML 5
Now, we have the latest and the most efficient version of HTML, which is HTML 5 for a developer, it was used
in 2004. It came up with lots of HTML tag supports. HTML 5 provides support for new form elements like
"input elements of different types", "geolocations support tags" etc.

This is the specification that we will be working with HTML 5 for the next decade at least, so the process of its
development is relatively slow and considered. So, we hope you guys have understood the difference between
the versions and the uses.

In conclusion, there are a lot of versions of HTML which are being developed. Some initial version of 1.0 to the
latest version of 5.2. HTML has been developed a lot, HTML 5 has developed new tags and the support of form
elements. So, these were the different versions of the HTML

Basics Tags of HTML

Examples of HTML tags syntax "doctype", "HTML tag", "head tag", "title tag", "body tag", "heading tag",
"paragraph tag" and lot more. HTML document structure explained with HTML, head and body tags assignment.

In the previous section, we learned about different versions of HTML. In this section, we are going to learn about the basic
tags of HTML. Let us get started.

First, let us understand what basic HTML tags are:

There is a range of HTML tags that help in designing a web page.

These HTML tags are like keywords, which define how a web browser will format and display the content.
With the help of these tags, a web browser can distinguish between HTML content and simple text content.
HTML tags contain three main parts, opening tag, content inside the tag, and closing tag, apart from this. There
are a few HTML tags that are unclosed tags, which means you don't need a closing tag

Let’s get back to our basic tag syntax

Content area tag and example would be "p", this is a simple paragraph which is an HTML tag that stands for
paragraph. You will see closing and ending tags and text content between the opening and closing p tag
 You can use as many tags as you want in your HTML document.
But one thing you need to keep in mind is that all HTML tags must be enclosed within a bracket also called angle
brackets.
Every tag in HTML performs different tasks.

Look at the various basic facts, but before that, we create a file in vs code and name it has basictags.HTML. Look at the
various basic facts, but before that, we create a file in vs code and name it has basictags.HTML. The first tag in the HTML
code structure which is "doctype" is used to specify the version of HTML used in the document. This is referred to as the
document type declaration or DTD.

The doctype declaration is an instruction to the web browser about what version of HTML in the document is in use. The
doctype declaration is an instruction to the web browser which explains the version of HTML the page is written in.

It ensures that the webpages went through the same way by different web browsers. Doctype doesn't have a closing tag
before starting any HTML document. You must always start with a document-type declaration that is doctype HTML.

Doctype tag
Here is an example of "doctype" in modern browsers that support HTML 5. Almost 95% of all browsers today support
HTML files.

This is a simple doctype with HTML as doctype tag attribute, the attribute is a new technical word, it means property of
something. Slight warning, don't confuse attribute with content, an attribute is property of tag, and the content is between
opening and closing tag.

For example, Hello World is the content, since it is enclosed inside the p tag. Let us save this file and see the output. Simply
locate the location in which it was saved from your local disk, and double click on it to open and see the result.
Below is the output and it illustrates the name in which it will be used to save your page followed by the URL location from
our local disk and finally our “Hello World” which was written in the paragraph tag

HTML tag
The HTML tag represents the root of an HTML document. The HTML tag is a container for all other HTML elements,
except for the doctype which indicates the version you are using is HTML 5. Now here is an example of an HTML tag. If
you notice here, I have included "language attributes" in the HTML tag, which is used to declare the languages of the web
page.

Save this file and see the output.

Head tag
The head tag in HTML is used to define the head portion of the document, which contains information related to the
document. We can make use of different headings in HTML. There are six levels of headings that can be used for the
elements; h1, h2, h3, h4, h5, and h6. Whenever you display any heading, the browser adds one line to the form and one line
after that heading. Here is an example below.
Title tag
The title tag defines the title of the document. The title must be text-only and it is shown in the browser's title bar or the
page tab. The contents of a page title are very important for search engine optimization. The page title is used by search
engine algorithms to decide the order when listing pages in search results.

Title elements
The title element defines a title in the browser toolbar which provides a title for the page when it is added to favorites and
also displays a title for the page in search engine results. Here is an example of the title tag.
Your title of the web page is different headings, note the title tag is required in its HTML documents, which if not provided,
the document name will replace it by default since it must not be left empty.

Body tag
The body tag defines the document's body. The body element contains all the contents of an HTML document, such as
heading, paragraph, images, hyperlinks, tables, lists, form, etc. After saving this file

You will see the output of the body tag.

P tag
And now we have a p tag HTML paragraph or HTML p tag is used to define a paragraph in a webpage, an HTML <p> tag
indicates the starting of a new paragraph. Here is an example.

After saving this file, you will see the output of the paragraph tag.
Br tag
The br tag stands for breaks, whenever you use the br element, anything following it starts from the next line. This tag is an
example of an empty element where you do not need an opening and closing tag as there is nothing to go in between them.
The br tag has a space between the character br and the forward slash. If you make this space, older browsers will have
trouble rendering the line.

If you missed the forward-slash character and just use br, it is not valid in xHTML. Here is an example of br tag

Now save this file and see the output. As you can see, a single line of code is divided into multiple lines

Assignment
Make a web page that outputs the following content
Hint: There are three headings and two paragraphs. The title of the page should be "Chapter 1: Down the Rabbit-Hole"

Robert in the Farmland

Section 1

Chapter 1: Down the Rabbit-Hole

Robert was beginning to get very extremely tired of being inactive by her brother on the farmland, and of having nothing to
do: once or twice she had peeped into the book her brother was reading.

But it had no images or conversations in it, "and what is the use of a book," thought Robert "without images or
conversations"

So, he was wondering in his mind (as well as he might for the activity of the day, made him feel very stressed out and
thoughtless), whether the pleasure playing with a little stick would be worth the trouble of throwing and getting up to pick
the little stick when suddenly a Black Rabbit with ran close by him.

HTML Attributes
HTML plays a vital role in the Web development area, you cannot develop any website without knowing HTML.

HTML attributes are special words that provide additional information about the elements or attributes that are modifiers of
the HTML element. In simple words, each element or tag can have attributes that define the behavior of that element.

They must follow a few steps by applying attributes.

Attributes should always be applied with the start tags.

The attribute should always be applied with its name and value pair.
The attributes, names, and values are case sensitive, and it is recommended by W3C that it should be written in
lowercase only.
Add multiple attributes in one HTML element but you need to give space between two attributes

a href attribute
Let us see some of the attributes in the HTML:

The href attribution or a tag defines a hyperlink. Hyperlink redirects us to a different page
The href attribute specifies the URL of the page
Firstly, create a new file and name it attributes.HTML

Link redirection with a tag

Save this file and run it as you will see the output from the illustration below
If you click on the given link, you will be directed to google.com

src attribute
Let’s see another example, src attribute which stands for source attribute:

The image tag is used to insert or embed an image on an HTML page

And the src attribute specifies the path to the image to be displayed.
The image will be in the directory.

The example refers to an image that is located in the HTML folder direction. The code would be as follows.
Save this file and run it, the image is the illustration below

Resizing an image in HTML

Also, you can add width and height attributes to this image in the image tag itself. Let's specify the values of these attributes,
which has 150 for width and 100 for height
Again, save this file and run it. You will see that the width and height of the image have changed. So, this is how you can
change the size of the image using width and height attributes within the image tag.

alt attribute
Here, we have one more attribute called the all to attribute. All the attributes for the image tag specify an alternate text for an
image. So, let's still make use of our src attribute image, include alt in the image tag and give the image text as “HTML tag
image”, save this example and run it.

You might be wondering why the alt = “HTML tag image” is not being displayed on the browser. Yes, the alt = “HTML tag
image” will not be visible in your result except if the image for some reason cannot be displayed. This can also be due to a
slow connection or an error in the src attribute, or if the user uses a screen reader, this happens sometimes which will be easy
to rectify back, that is when the alt will take effect.
For example, if you mistakenly rename the image with the wrong file name, or without an image src name

As you can see the image source name has been removed and below is our output

style attribute
The style attribute is used to add styles to an element such as color, font, size, etc. It is also called inline CSS. Let’s start
with the color attribute to apply color to the text, try this attribute with an example.

Now, save this file and run it. Yes, the text color has changed to green.
Next, apply font, family, and size to this text. See this example by saving this file and then running it.

As you can see, the color has been changed to blue and size to 200 percent and font family to Arial. This is how to apply a
style to the text.

HTML Elements
Let's see the agenda of this section, at the start we will be learning:

The meaning of HTML elements and some basic examples

The main two types in the element section
block element
in-line element
 anchor tag
span tag
An HTML element is an individual component of an HTML document that represents semantics or meaning. For example,
the title element represents the title of the document, the head element specifies the header, etcetera.

Most of the HTML elements are written with an opening tag and a closing tag with content in between. Elements can also
contain attributes that define the additional properties.

For example, a paragraph that is represented by the "p" element would be written as opening “p” tag content and then
closing the “p” tag. These HTML elements are responsible for creating web pages and defining content in that web page.

Technically, an element is a collection of start tag attributes and tag content between them. Note some of the HTML
elements do not have a closing tag and content. These elements are termed empty elements or self-closing elements or you
can also call them void elements.

Now, let's start with an example. For this, open a file and rename this file as elements.HTML. Save this file and run it.

As you can see, through the example, every original element is written with an opening and closing tag. Note, the doctype
declaration itself is not an HTML tag. Every HTML document requires a document type declaration to ensure that your
pages are displayed correctly, and it tells you the version of HTML also.
And in the above example, the break line does not have an opening and closing tag in HTML. All the elements do not
require a start tag and end tag. Such elements are known as void elements or empty elements. Also, these elements are called
unpaired, that some void elements represent a line break such as “br tag”, the “hr tag” represents a horizontal line, etc. in
HTML elements, there are two types of elements, such as block-level element and inline elements for the default display
and styling. For HTML all the elements are divided into two categories.

Block-level element
This block-level element structures the main part of a web page by dividing a page into specific blocks. A block-level
element always starts with the new line and takes the full weight of the web page from left to right.

And also, these elements can contain block-level as well as inline elements. These are the block-level elements in HTML,
which you can see from the below illustration such as address tag, article tag, aside tag, blockquote tag, video tag, etc.

Let's see an example of a block-level element. Save this file and run
The output is illustrated below.

We have used a tag that defines a section in a web page and takes the full width of the page. We have used a style attribute
which is used to style the HTML content and the background color shows that it is a block-level element.

Inline elements
In-line elements are those elements that differentiate the part of a given text and are provided with a particular function. For
example, if you want to make any particular word bold or italic, you can do that with inline elements.

These elements do not start with a new line and take width as per requirement. The inline elements are mostly used with
other elements.

Here is the following list of elements from the above illustration; tags such as anchor tag, bold, button tag, code tag, image
tag, etc. In this example, we have used two inline elements anchor tag and span tag.
Understand what an anchor tag is. The HTML anchor tag defines a hyperlink that links one page to another page, and that
can create hyperlinks to other web pages, as well as files, locations, or any URL.

The href is an attribute that is the most important attribute of the HTML tag and links to the destination page, or URL. Now,
let's understand the span tag, HTML span tag is used as a generic container of inline elements. This tag is used for styling
purposes to group inline elements, this span tag doesn't have any default meaning or rendering.

Save this file and run it, you will see the output from the below illustration.

Assignment
Here is an assignment for you Can you make a web page that outputs the following content? Hint: in this assignment, a div
tag, anchor tag, span tag is used. The heading of the page should be "My Website".

HTML Links
When we talk about HTML, links play an important role in the discussion.

We will be discussing links in HTML. Below is the agenda of this section:

First, we will see what the links are.

A syntax of <a href=""></a> tag
An example of links
Link to an image
Target attribute of HTML
Assignment

Using Wikipedia, have you ever noticed some words or texts are blue by default on the page and when you click on those
words? A new Wikipedia page opens having the information about that word.
Those are the links to a different page because HTML links are hyperlinks. A hyperlink is a text or an image you can click
on and jump to another document with HTML.

HTML easily adds hyperlinks to any HTML page link such as home page, about page, or even a test by creating a hyperlink.
You can also create a hyperlink for an external website, to make a hyperlink on the HTML page, use the opening tag <a>
and closing tag </a> which are tags used to define the links.

This is a syntax of hyperlinks, using <a href= "url">link text</a> which is to give a hyperlink or to text in the body section

In this example, we have created an HTML page having a link that redirects you to the particular page, the "href" attribute
specifies the destination address that is "https://www.wikipedia.com"
The linked text is a visible part, but clicking on the link text will send you to the invisible specified address in the backend

Once you click on the link, it will automatically redirect you to the programmed link. The link does not have to be a text or
an HTML image or any other HTML element. In the above example, we are giving a hyperlink to an image using a href tag
on an image
Target attribute
The target attribute specifies where to open the linked document. This example will open the linked document in a new
browser window or a new tab when you set the target to underscore blank. It will redirect to a different page and will open a
new tab.

Links, color and Bookmarks

It allows you to describe the structure of a web page, HTML is like a base in the web development process.

In this section, we are going to discuss how we can apply colors to links and create bookmarks. Let’s see the agenda for this
section:

How to give colors to the links and example

How to apply color on the button
What are bookmarks and an example of a bookmark?

Links
A link is an HTML object that allows you to jump to a new location when you click or tap it. Links are found on almost
every web page and they provide a simple means of navigating between pages on the web.
Links can be attached to text, images, or other HTML elements, in HTML, links are displayed in a different color depending
on whether it has been visited, unvisited, or is active. The links are displayed in multiple ways such as:

Unvisited link: The color of this link is blue and underlined, it simply means that you have not visited the link
earlier.
Visited link: The visited link is underlined in purple color which means you have visited the link earlier or several
times.
Active link: An active link is underlined in red this means that you have already been active on the link. You can
also change the link state by using style

Let’s save this file and run it

You should see the color of the link has changed into the set color which is the color green. We have given the color code in
the style attribute of the HTML page.
How to apply color on the button
The HTML button element represents a clickable button used to submit forms or to visit any website. For example, we have
applied the link to a button, save this file and see the output.

If your web page is too long and you want to directly go to a certain part without scrolling manually, then the bookmarks
will help you with that

First, you need to create a link

And then give the name to the part

From the below example, we created different p tags representing different sections of the web page. We created a link
having the location of the last section of the web page, which is a scripting language, and gave the name last to that section.

If you click on the link, you will directly go to the scripting language section of the page.
Here is the bottom of the above page illustration which you will be bringing into

Assignment
Create a web page having 8 chapters and give a bookmark to the 4th chapter. And <p> tag will represent a single
chapter
 CHAPTER THREE

CONCEPT IN HTML FORMATTING

HTML Formatting

A fundamental understanding of website design starts with HTML. But depending on your eventual career path, it certainly
doesn't have to end there. HTML knowledge allows an easier transition to other website design platforms, including Php,
JavaScript, SQL, and many others, which certainly shows how important it is to make your base perfect in that HTML.

HTML formatting is a process of formatting text for a better look and feel, HTML provides you with the ability to format
text without using CSS. There are many formatting tags in HTML and these tags are used to make text bold, italicized, or
underlined. You are going to learn the concept of HTML formatting. But first, let us see the agenda of this section

What is HTML formatting?

Some tags, which are useful formatting

Let us get started.

What is HTML formatting?

HTML provides you with the ability to format text without using CSS.
There are many formatting tags in HTML
HTML provides several tags that you can use to make some text on your web pages that appear differently than
normal text.

HTML formatting tags are divided into two categories which are:

Physical tag: is used to provide a visual appearance to the text

Logical tag: is used to add some logical or semantic value to the text.

The table below shows more options available for how text can be formatted in HTML

Element Name Description

<b> Bold text
 <strong> Important text
<i> Italic text
<em> Emphasized text
<mark> Marked text
<u> Underline text
<tt> Appear in a text in teletype
<strike> Draw a strikethrough on a section of text
<sup> Superscript text
<sub> Subscript text
<del> Delete text

<b> tag
Let's see each tag one by one, the HTML <b> element is a physical tag that displays text in bold font. If you write anything
within the element, it is shown in bold letters. In this example we have written, "this text is bold" in the tags.

The required texts are in bold

<strong> tag
The HTML strong tag is a logical tag, which displays the content in bold font and informs the browser about its logical
importance. If you write anything between the opening <strong> tag and the closing </strong> tag, it will indicate that the
text is important.

Here is an example of strong text. In this example we have written, this text is important in the strong tags.

The text will display as important text, see the output, the required text are in a strong tag

<i> and <em> tags

Italic text and emphasized text. The HTML <i> element is a physical element that displays the enclosed content in an italic
font without any added importance. If you write anything in <i> element is shown in italic letters.
The HTML <em> tag is a logical element that displays the enclosed content in italic font with added semantics importance.

In this example, we are using italic text on the p tag let see the output. Now you can see the text is italicized on the browser.

Here is an example of emphasized text. In this example we have written, this is an important content in the <em> tags. Let's
see the output.
The text is displayed as important content. The required texts are italic

<mark> tag
If you want to mark or highlight a text, you should write the content within the opening mark tag and closing mark tag as
shown below

In this example, we have written <mark> tags, so that the text that is shown below will be highlighted.
<u> tag
. If you write anything within the <u> tag, it will be shown in an underlined text format.

In this example, we have written, "write your first paragraph in underlined text" in the <u> tags
<strike> tag
Strike tag, anything which has been written within a strike tag is displayed with a strikethrough. It can be also known as a
thin horizontal line that crosses over the text.

Here is an example of strike text. Here we have written "write your first paragraph with strikethrough" in the strike tags.

The required texts are strikethrough

<tt> tag
<tt> tag is also known as monospace. If you want each letter to have the same width, then you should write the content with
the <tt> tag. In this example, we have written, “write your first paragraph in a monospaced font.” in the <tt> tags and it
will be the same, but let's see the output.

<sup> tag
<sup> tag represents a superscript text, if you put the content within opening <sup> tag and closing <sup> tag, it is shown in
the superscript form. It means it will display half of the character's height above other characters.

We have written "write your first paragraph in superscript" in the sup tag. So, it will be displayed half of the character's
height above the other characters. Let's see the output

The required texts are placed on a superscript tag

<sub> tag
<sub> tag stands for subscript text, if you put the content within a subscript tag, it is shown in subscript, meaning that, it will
display half of the character's height below the other characters.

Here is an example of subscript text. In this example we have written, "write your first paragraph in subscript" in the
<sub> tag.

The subscript text is displayed half of the character's height below the other characters.

<del> tag
<del> tag represents a delete tag, anything that is put or placed within the del tag is displayed as deleted text.

Here is an example of a deleted text, we are using the deleted text, the written "delete your first paragraph." in the <del>
tags
Let's see the output on the browser. As you can see, it is a bit similar to the strikethrough tag and we got the required output.

Assignment
Add extra importance to the word “eroding” in the paragraph below. And also make use of superscript on “government” and
subscript for its “citizen”

<p>WWF mission is to stop the eroding of our planet's natural environment. </p>

<p>The US government is willing to help its citizen to make life easier and in return enhance the growth of the
country</p>

Hint: Use <b> tag for the first paragraph and the second paragraph should be as instructed

HTML Style
Welcome to another section called HTML styling, styling your webpage is as important as structuring it. Styling your web
page makes it more professional and more attractive HTML Style is used to change or add the style on existing HTML
elements because of the styling, the web page becomes more attractive to the eye of a visitor.

Most businesses know that having a good website design is important. After all, your online presence can make or break
your business, and unfortunately, HTML allows you to use a variety of styles to your web pages.

First, let's see where we can use our styling properties and some important things to know before diving into HTML styling.
The style tag is used to define style information, inside the style element, you specify how HTML elements should look in a
browser.

There is a default style for every HTML element. For example, the background color is white, the text color is black, etc.
The style attribute can be used with any HTML tag. To apply the style to any HTML tag, you should have a basic knowledge
of CSS properties. For example, color, background, color, text, align, font, family, font, size, etc. and if no CSS
foundational knowledge, you can still learn by following this guide from the beginning till the end to get the foundational
understanding of HTML and CSS which we are going to cover in the second part of this guide.

Colors play a vital role in the world in which we lived. In HTML, the color properties are used to define the text color, using
colors on the text helps to present data more effectively. It attracts the user's attention. Color increases brand recognition,
highlights important website elements, and influences how people feel about a website.

Text color
Now, here is an example of styling HTML tags by color property of CSS. In this example, we are given the color green to
the text "HTML styling" and also "This is Magenta Color" save the file and see the output.

As you can see from the below illustration, we got the green-colored text and also the magenta-colored text.

Background color
Let us move on to our next property HTML style background color. The background color properties are used to define the
background color for the HTML tag. The "background-color" attribute is used with the HTML body tag with the CSS
property background color when it comes to product images.
It is important to mix colors between the background of the image and the main object in focus. Different background colors
will communicate a different mood and tone to the image, and the background colors should be changed to match that of the
subject.

In this example, we will be using a background color. The attribute is used with HTML h3 tags. Property like this style is
equal to background color yellow-green which means since we are not assigning a text color, by default black will be
assigned to it. And also, another background color is blue and the text color of cornsilk. Let us see the output.

Here we go, as you can see, below is the result of the above codes

Font-family
The Font Family property specifies the font family of the HTML tag. The CSS font-family property allows you to specify
the style of the text on a web page. For instance, you can use the font-family property to use the "Arial font" or "the
cursive genetic font" for all text on a web page.

The font tag plays an important role in the web page to create an attractive and readable web page. The font tag is used to
change the color, size, and style of a text. The base font tag is used to set all the text to the same size, color and face.

Here is an example of font-family property. In this example, we are applying some font family to the <h3> element which
is "times, new roman", while on the <p> tag we are using a font family called "Arial". Let's see the output
The font family of the required text has changed.

Font-size
The font-size property is used to define the text size of the HTML tag. Font size sets the font size of the text inside the
element to which it is applied, and that of its descendants.

For example, let’s apply the font size 200 percent and 400 percent to the specific text of the elements and see the output.
As you can see, the required font size is displayed on the browser

Text-align
The text-align property is used to set the horizontal alignment of a text, a text can be left or right, centered or justified
aligned. This attribute is used in all elements. The alignment principle states that multiple objects are set to be aligned when
they are placed, such that their left or right edges or center lines, line up in a common position.

Let’s apply the aligned properties right to the <h3> tag and center to the <p> tags respectively and see the output

The property has been applied successfully

Assignment
There is an assignment for you.

Use the correct HTML attribute to set the color of the text in the paragraph to blue.

HTML Quotations
In this section, we are covering the basic to advanced concepts of HTML. We are going to learn about HTML quotation.

First, let’s see the elements:

<blockquote>
<q>
<abbr>
<address>
<cite>
<bdo>

<blockquote> for long quotations

The first element is the HTML blockquote tag, which is used to define a block of text, that is quoted from another source.
The browser usually displays the content within a blockquote tag as indented text. If you want to insert a long quote, then
use blockquote and for short or inline quotes use <q> tag syntax.

Here is an example of a block code tag.

In this example, we have given the blockquote tag to the content of the element, which will display since it is quoted from
another source.

The required texts are on display within the blockquote

<q> for short quotations
HTML <q> for short quotation, HTML <q> tag is used to put a small quotation. To do so, write your text within an opening
<q> and closing <q> tag. In this example, you have taken the <q> tag which is a standard quotation tag used for short
quotations and is applied to the text "Reality is finally better than your dreams"

The browser normally inserts a quotation mark around the quotation

<abbr> for abbreviation tag
HTML abbr tag is used to represent an acronym or abbreviation of a longer board or phrase, such as WWW, HTML, HTTP,
etc. The content written between <abbr> tag renders with dotted underline in some browsers. This tag can be used with the
title attribute option and the value of the title. The attribute will pop up when the mouse hovers over the content written
between the <abbr> tag syntax.

Here is an example of the <abbr> tag in this example, we are using the <abbr> tag to the text. Marking up abbreviations can
give useful information to browsers, translation systems, and search engines.

Let's see the output. Great World Health Organization is transformed to the WHO until it is hovered on before the full
meaning will surface
<address> tag
The HTML address tag defines the contact information for the author or 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 vendors in italic and browsers will always add a line break before and after the address element.

Here is an example of an address tag. In this example, we are using the address tag, the address tag in HTML indicates the
content information of a person or an organization. Let’s see the output

As seen, the output is written by Smith Robert, visit us at example.com followed by Box 596, Disneyland, and the country
that is the USA. The content is an address
<cite> tag
The HTML cite tag defines the title of creative work. For example, a book, a poem, a song, a movie, a painting, a sculpture.

In this example, let’s use the cite tag, the HTML cite element defines the title of a work. The text in the site element is
usually rendered in italic. Let’s see the output

Look at the required title of work in italic

<bdo> tag
HTML <bdo> stands for bi-directional overwrite. The HTML <bdo> tag is used to override the current text direction.

Here, we are using the bdo tag, bdo tag sets the direction of content within it to render on the browser from left to right or
right to left.
As you can see, the direction of the syntax has changed.

Assignment
Here is a simple assignment for you.

Use an HTML element to add quotation marks around the letters "cool".

HTML Comments
Commenting is the art of describing what your program is going to do in “high level” English statements, commenting is
best done before actually writing the code for your program.

Comments are also great for debugging HTML because you can comment out HTML lines of code one at a time to search
for errors. HTML allows you to use comments whenever you want.

Single line comment

Now, let's see the syntax, write your comments here.
In this example, we have given a single-line comment. This is an exclamation point is in this start tag, but not in the end tag.
Comments are ignored by the compiler

To see that, let's save the file and see the output, the comments have been ignored.

Multiline Comments
HTML also supports multi-line comments as well. You can comment on multiple lines by the special beginning tag and
ending tag placed before the first line and end of the last line. As shown in the example given below syntax

This is a multi-line comment and it can span through as many lines as you like.
Commenting Script Code
Note that if you are using JavaScript or VBScript in your HTML code, then it is recommended to put that script code inside
proper HTML comments so that the old browser can work properly.

Here is an example of commenting script code. In this example, we are using commenting scripting code. All text on a line
that follows two forward slashes would be considered a comment and will not be executed when the script is run

Commenting style sheets

If you are using a cascading stylesheet in your HTML code, then it is recommended to put that style sheet code inside proper
HTML comments so that the old browsers can work properly.

Using the commenting stylesheets inside HTML the style sheet in HTML is known as inline styling. Inside the style sheet,
we are using the comments, the border shown in the output. This script code will be ignored due to the comment out.
Commenting lines is the easiest thing to do in programming
HTML Colors
Color is an important aspect of life. HTML allows you to use a variety of beautiful colors, and colors are very important to
give a good look and feel to your website.

In this section, we will be learning about the colors in HTML. You can specify colors on page level using body tag, or you
can set colors for individual tags using the background-color attribute. HTML colors are specified with predefined color
names or with RGB, HEX, HSL, RGBA, or HSLA values.

Background colors
The background color also used as “bgcolor” sets a color for the background of the page, you can set the background color
for HTML elements.

Below is an example of background color in this example, we are using background color. And also, we are given the
background color “palevioletred” and “chartreuse”. Let's see the output

The background color has been displayed.

Text color
Now, text color, as you know and learned in the previous section, the CSS color property defines the text color for an HTML
element.

In this example, we are using the text color to set the text color in HTML and then use this style attribute. We used the color
chartreuse to the text “Hello World”.

The text color is displayed.

Border color
With border color, you can set the color of borders. Here is an example of border color we will be giving colors to the border
of the text.

The borders are showing colors.

RGB colors
RGB colors, here is an example of RGB color.
Here the colors are displayed according to the values, for example, RGB (255, 0, 51) is displayed as red because red is set to
its highest value which goes on and on.

RGBA colors
RGBA color values are an extension of RGBA color values with an alpha channel that specifies the opacity for color, and the
color value is specified with RGBA (red, green, blue, alpha). An alpha parameter is a number between 0.0 fully transparent
and 1.0 not transparent at all.

For example, let’s use different RGBA color attributes to h1 tags. It will show the opacity according to the given values.

It has been displayed now.

HEX color
HEX color value is hexadecimal color is specified with RRGGBB, while RR is (red), GG is (green), and BB is (blue).
Hexadecimal integers specify the components of the color are RR (red), GG (green), and BB (blue) are hexadecimal values
between 00 and ff same as decimal 0 to 255 to display black, set all color parameters to 00 like the illustration below

To display white, set all the color parameters to #ffffff like this

Here is an example of HEX color. Let's see the output.

Once you understand how they work, you can easily change the red, blue, or green values to create a different shade. Here,
the codes are shown in hexadecimal format. For example, the first color red which is #ff0000 as red because red is set to its
highest value and the other two are set to 0000. In another example, #ffd900 is displayed as yellow because red is set to its
highest value and the other two are set to 00aa

Assignment
Here is an assignment for you. Set the border for <h1> to purple and <p> to green solve the assignment.
I know from now on your website will be more attractive from all the colors. You will apply to it everything you've learned
today.

HTML Image part 1

An effective website design should fulfill its intended function by conveying its particular message while simultaneously
engaging the visitor. Several factors such as consistency, colors, imagery, simplicity, and functionality all contribute to good
website design.

HTML allows you to embed images on the web page. And in this section, we are going to learn about HTML images.
Images can improve the design and the appearance of a web page. The HTML image tag is used to embed an image on a
web page.

Images are not technically inserted into a web page but linked to web pages. The image tag creates a holding space for the
referenced image. The image tag is empty. It contains attributes only and does not have a closing tag.

Syntax, the image tag has two required attributes src which stands for source or specifies the part to the image, alt specifies
an alternate text for the image.

Here is an example of an image tag. In this example, we are using an image tag to display an image. The required src
attribute specifies the path that is URL to the image of the required src. Your picture HTML_img.HTML is the name or
sometimes you can specify the path also, the alt attribute defines an alternate text for the image if it can be displayed and
you have given the height and weight of the image.

The image has been displayed successfully.

Image floating
Image floating uses the CSS floating property to allow the image to float to the right or the left of a text.

Here, we will be applying the float to the image so that it can float to the right of the page.

The required image has been displayed on the right-hand side of the browser.
Image as a link
The next property is "image as a link". HTML allows us to click on the image and go to a different page. It is called
"image" links, to use an image as a link, put the <image> tag inside the <a> tag.

In this example, we are given a link to the image.

As you can see, both the image and the text possess the hyperlink attribute which also mean that both the text and image can
be separated, whenever you hover on it, your browser will reflect the hyperlink of the image and text depending on how it
was structured
Once you click on either the text or image, it will redirect you to your linked URL. We are brought to google because google
is the set element.

Animated Images
The next type of image is "animated images" HTML allows animated gifs.

In this example, we are using animated images, adding an animated image in HTML is quite easy. You need to use the image
tag with the src attribute. It is the same as adding the normal image.
Also, the animated image has been displayed on the browser,

HTML Image part 2

Image maps
The idea behind an image map is that you should be able to perform different actions depending on where in the image you
click.
To create an image map. You need an image and some HTML code that describes the clickable areas

Syntax

The Areas
A clickable area is defined using an area element shape, you must define the shape for the clickable area. And you have to
choose one of these values; "rect" which stands for the rectangular region, "circle" which defines a circular region, "poly"
the polygonal region, and "default" is the entire region.

You must also define some coordinates to be able to place the clickable area onto the image. Let’s use the shape as an
example.

The shape is equal to "rect" and the coordinates for shape is equal to "rect", it comes in pairs, one for the x-axis and one for
the y axis. The <rect> element is a basic SVG shape that draws rectangles, defined by their position, width, and height. The
rectangles may have their corners rounded.

Here is an example of the shape "rect". The width and height attributes of the "rect" element define the height and the weight
of the rectangle. A rectangle is a display positioned at X and Y, which sides length w and h that is width and height.

The coordinate 34, 44, is located at 34 pixels from the left margin and 44 pixels from the top. The coordinates 270, 350 are
located at 270 pixels from the left margin and 350 pixels from the top. Let's see the output.

We got the image of the required shape.

Background Images
A background image can be specified for almost any HTML element. To add a background image on an HTML element, use
the HTML style attribute and the CSS background-image property.

Let’s apply the images to the background of <div> and <p> elements and see the output.

As you can see, images are displayed in the background.

Assignment
Here is an assignment for you. Use the correct HTML to make the image become a link to default.HTML

HTML Image part 3

Lesson modules:

The remaining HTML images, types

Examples of HTML images with detailed explanations.

Background Repeat
The background-repeat CSS property sets, how background images are repeated. A background image can be repeated along
the horizontal and vertical axis, or not repeated at all. They are like the background image from repeating itself set the
background of each property to no-repeat.

For example, the images are going to repeat in the background.

The image has been repeated in the background.

Picture Element
Let's move to the next image which is the "picture element" The HTML picture element allows you to display different
pictures for different devices or screen sizes. The HTML picture element gives web developers more flexibility in specifying
image sources. The picture element contains one or more source elements, each referring to different images through the src
set attribute.

This way, the browser can choose the image that best fits the current view or device. Each source element has a media
attribute that defines when the image is the most suitable.

Here we gave different source media at a different width. Now, let's see the output.
Resize the browser to see different versions of the picture loading at different viewport sizes.

You can see different images in different sizes on the browser. The browser looks for the first source element or the media
quality that matches the user's current viewport width and fetches the image specified in the src set attribute. These are some
common images format that we can use with HTML image
Common Image Formats
Abbreviation File Format File Extension These are the abbreviations format
APNG Animated Portable Network .apng file extensions:
Graphics
Assignment
GIF Graphics Interchange .gif
Format set the background image at no
ICO Microsoft Icon .ico .cur repeat.
JPEG Join Photographic Expert .jpg .jpeg .jfif,
Group image .pjpeg .pjp
PNG Portable Network Graphics .png
SVG Scalable Vector Graphics .svg
Table in HTML
Data presentation in a table format aids convenience. HTML allows create of tables and represents the data into them. To
create table tables, we will use an HTML table tag. HTML table tag is used to display data in tabular form.

There can be many columns in a row to create a table using the table tag. Let’s see what are table tags and how we are going
to need them when creating a table.

You can create a table to display data in tabular form using table element with the help of <tr>, <td>, <th> elements. In each
table, the table row is defined by <tr> tag, the table header is defined by <th> tag and table data which is the main dataset in
the row, and the column is defined by <td>.

By default, the text <th> elements are bold and centered. By default, the text in <td> elements are regular and left-aligned.

Now here is an example of a simple table.

In this example, there are three columns. As you know, <th> is used to create a column heading and there are three rows
<td> representing data in the table. Each row has three data items. In the heading, we gave style to the table.

We are setting the "border to 2px solid black" and "border-collapse". CSS property sets whether cells inside a table have
shared or separate borders to the tags. Let's see the output on the browser.
The table has been created, the first name, last name, and age. All the headings columns of the table are properly fit into
each field
Colspan
There are two more parts to the table concept. First is an HTML table cell that spans many columns to make a cell span
more than one column, use the “colspan attribute”. It allows a single table cell to span the width of more than one cell or
column, it also provides the same functionality as a merged cell in a spreadsheet program like Excel.

In this table, we have created two columns. We used the colspan as equal to two attributes on the second column. That
means we can have two <td> elements in a single column, this specifies the number of columns that the cell fills. The value
must be an integer. Let’s see the output.

The telephone column has two data items.

Rowspan
The next one is the HTML table cell that spans many rows, to make a cell span more than one row, use the rowspan
attribute.

Here is an example of adding many rows, it is just like colspan. But instead of spanning the column here, span the roll into
more than one cell. Let's see the output.
We have given the headings horizontally, so you can understand this concept better, on the second row, we have applied the
row span attribute.
Assignment
Fill in the blanks as illustrated below

Lists in HTML
Lists are very important in our day-to-day life, as well as in programming, we can create the lists by using HTML. Let's get
started.

HTML lists are used to specify lists of information. All lists may contain one or more list elements, there are three different
types of lists and they are:

Ordered list or Numbered list

Unordered list or Bulleted list
Description list or Definition list
Ordered List or Numbered List
The ordered list start with <ol> tag, the listing item starts with <li> tag. The list items are marked with numbers. By default,
it is also known as a numbered list.

We will be creating an ordered list of beverages. Let us see the output

This is the ordered list, it automatically sets the numbers to the list items.

Unordered list or Bulleted list

In the HTML unordered list, all the list items are marked with bullets. It is also known as a bulleted list. The unordered list
starts with <ul> tag each list item starts with <li> tag.

Now here is an example of an unordered list. We are creating an unordered list and it does not have any numbers. It can
have a disks symbol or sockets symbol instead of numbers. Let's see the output.
This is the unordered list that was created.

Description list or Definition list

The next is a description list.

HTML also supports description lists and description lists can be divided into three categories such as:

A description list is a list of the term with the description of each <dl> tag that defines the start of the list
The <dt> tag defines the term
The <dd> tag defines the term definition description list.

Here we are creating a list as a description. Coffee and milk are the main items that define a tone with that definition. Let’s
see the output.
We have successfully created the description list.

Nested List
HTML nested list is a list within another list. If you want a bullet list inside a numbered list, then such type of list will be
called a nested list.

For example, the main list items are coffee, tea, and milk, but we have nested the black tea and green tea inside it. Let's see
the output.
The list has been nested successfully inside another list

HTML Block and Inner Elements

HTML allows us to use a variety of elements to make the base of any website attractive.

Welcome to this section. In this section, we are going to learn about HTML block and inline elements in HTML and a couple
of examples with them. Every HTML element has a default display value, depending on what type of element it is.

There are two display values

Block
Inline
HTML Block
A block level element always starts on a new line and takes up the full weight available, stretches out to the left and right as
far as it can. It has a top and a bottom margin, but as in line, Element does not.

Here is a list of some block level elements in HTML

<address>
<article>
<aside>
<canvas>
<div>
<table> etc.

The div tag is known as a division tag. The div tag is used in HTML to make divisions of content on the web page like text,
images, header footer, navigation bar, etc. As we kThe div tag is a block-level tag.

Now here is an example of a block-level element. The "Hello world" is inside of the block level div tag. Let's see the
output

You can see the div element being displayed.

Inline Element
Inline element does not start on a new line, it only takes up as much weight as necessary, it is a span element inside a
paragraph. Here are the inline elements in HTML.

<a>
<bottom>
<i>
<span>
<br>
<strong>

The HTML span element is a generic inline container for inline elements and content. It is used to group elements for styling
purposes by using the class or id attributes. A better way to use it is when no other semantic element is available. The span
tag is very similar to the div tag, but div is a block-level tag and span is that inline tag.

The span element will not start on a new line it only takes up as much width as necessary. We have given the style to the
words Hello world, but it does not start from the new line. Let's see the output.

The style has been applied to the words and it is in the same line.

HTML with CSS

HTML allows you to meet the structure of your website efficiently. To do this, want to make your website attractive, you are
going to need CSS. Now, let's see what it is.

HTML Style - CSS

It stands for cascading style sheets and it also saves a lot of work. It can control the layout of multiple web pages all at once.
It is used to apply the style in the page, which is made up of HTML elements.

It describes the look of the webpage since this provides very style properties such as background color, padding, margin,
border color, and many more. To style a web page each property in CSS has a name-value pair and each property is
separated by a semicolon.

To use CSS with HTML document there are three ways

 Inline CSS: It defines CSS properties using style attributes in the HTML elements.
Internal or embedded CSS: It defines CSS using a style tag in the head section
External: It defines all CSS properties in a separate document CSS file and then includes the file with HTML file
using a tag in section.

Inline CSS
CSS is used to apply a unique style to a single HTML element, and inline CSS uses the style attribute of an HTML element,
we can use as many properties as we want, but each property should be separated by a semicolon.

In this example, we are using the inline CSS property on the <h1> and <p> elements, we are applying the blue and red color
on these elements. Let's see the output.

The colors have been applied successfully, this is how we use inline CSS.

Internal CSS
Internal CSS is used to define a style for a single HTML page and internal CSS as defined in the head section of an HTML
page within a style element, to use internal CSS, we can use class and id attributes.

Inside the head tag in which we have given the style to the HTML element. It is in the same file as the HTML, that is why
we call it internal CSS.
You can see the CSS being applied to the elements.

External CSS
External CSS contains a separate CSS file, which only contains style code using the class name, id name, tag name, etc. you
can use this CSS file in any HTML file by including it in the HTML file using the <link> tag. There are multiple HTML
pages for an application that uses similar CSS, then we can use external CSS

There are two files that we need to create to apply external CSS.

First, create the HTML file, make sure you save it with an HTML extension
Create a CSS file and save it using the CSS extension. This file will only contain the styling code

Now link the CSS file in your HTML file by using the tag in the header section of the HTML document, the CSS file style
.CSS. Create a CSS file, and import it to the HTML file.

Give some colors to the HTML elements and saved them with the CSS extension as shown in the above illustration.

In the head section, link the CSS file to the HTML so that all the CSS will be applied to the HTML elements.
All the success has been applied to the HTML element successfully.
 CHAPTER FOUR

HTML CLASSES, ID, AND LAYOUT

HTML Class Attribute

What are the HTML class attributes?
The middle-class attribute is used to specify a class for an HTML element. Multiple HTML elements can share the same
class. The HTML class attribute is used to specify a single or multiple class name for an HTML element. While the class
name can be used by CSS and JavaScript to do some tasks for HTML elements.

You can use this class in CSS with the specific class by typing dot character, followed by the name of the class for selecting
elements. A class attribute can be defined with <style> tag or in a separate file using dot (.) character. In an HTML
document, you can use the same class attribute name with different elements, to create an HTML class first define the style
for the HTML class using the <style> tag within the head section.

Here is an example of a class attribute in this example

Created a class city with the dot (.) character notation and then set the background color, text color, border color, etc. Then
assign that class to every div, which means all the CSS properties, which you have defined in the class are going to be
applied on the div.

Let's move on to our next point, while the class city has been applied to all the div's
Define multiple classes, and when we do that, we separate the class names with a space. Example div class is equal to city
main

The element will be styled according to all the classes specified. Here is an example of multiple classes in this example,
created two classes city and main. Both the classes should have different CSS properties defined. All three <h2> elements
belong to the city class. In addition, London also belongs to the main class, which center aligns the text. Now, let's see the
output.
You should get the required output.
HTML Id Attribute
The HTML Id attribute is used to specify a unique ID from an HTML element. You cannot have more than one element with
the same ID in an HTML document. The Id attribute is used to point to a specific style declaration in a style sheet. It is also
used by JavaScript to access and manipulate the element with this specific Id.

The syntax for an Id is a hash (#) character followed by an Id name, then defines the CSS properties within curly braces.

Here is an example of an ID attribute. In this example, there is an <h1> element. We have created the Id as "my header"
and defined the CSS properties in it. The Id is assigned to the <h1> element which has to be unique. Let's see the output

The CSS properties of the Id are properly set. You might remember earlier I mentioned that Id and class attributes are
similar, but there is one difference. The difference between them is that Id is unique on a page and can only apply to one
element, while class selector can apply to multiple elements.
Class-work
Look at the question shown below and fill in the blanks.

HTML with JavaScript

JavaScript codes are the important elements to develop websites, especially when it comes to handling user inputs and
validation, you can use JavaScript to develop the backend of the web application. The major focus is on HTML and CSS but
for comprehension, there is a need to do a quick discussion on it, since HTML can integrate with it. In this section, we are
going to learn how to use HTML with JavaScript.

A script is a small program that is used with HTML to make web pages more attractive. JavaScript makes its HTML pages
more dynamic and interactive. The most popular scripting language used for websites is JavaScript. To include JavaScript
code into the HTML page, you need a script tag.

The HTML script tag is used to define a client site script. The script element either contains script statements, or it points to
an external script file through the src attribute common uses of JavaScript are image manipulation, form validation, and
dynamic changes of content. To select an HTML element, JavaScript most often uses the document dot get element by Id
method. We can place script tags within a body or a head section.

JavaScript uses document dot get element by Id to select an element with the help of that Id's. Selecting the p element,
having an Id demo, and changing it to Hello JavaScript. Let's see the output
Set the "Hello JavaScript" in the p element through your <script> tag by using JavaScript to implement it. This is how you
can use HTML with JavaScript

HTML Responsive Design

When a user views a website in a mobile tab or any other device, it should adapt to its size and it should prevent the visitors
on those devices from needing to do extra work to read your content. You can do this when you create a website using
HTML.

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 viewport responsive web design uses HTML and CSS to resize, hide,
shrink, enlarge or remove the content. It makes the content look good on any screen.

Points to consider when creating a responsive webpage:

 Setting viewport: To create a responsive website, add the metal tag to all your web pages. This will set the
viewport of your page, which will give the browser instructions on how to control the pages, dimensions, and
scaling
Syntax

Responsive images: responsive images can be scaled nicely to fit any browser size
Weight property: Weight property set the CSS weight property to 100 percent to make the image responsive and
scale up and down. The image can be scaled larger than its original size.
Syntax

Max weight property: This method is best and most used because it facilitates that the image will be scaled down
if it has to, but never scale up to be larger than its original size

Syntax

Media Queries: a CSS media query is a W3C recommendation and a serious CSS3 module that is used to adapt
to conditions such as screen resolution. For example, a smartphone screen vs. a computer screen. In addition to
resizing text and images, it is also common to use media queries in responsive web pages. With media queries,
you can define completely different styles for different browser sizes. The media quality technique was first used
in CSS3. It became a W3C recommendation in June 2012.

It is an extension of media-dependent style sheets used in different media types, that is, screen and print found in
CSS2. The most commonly used media feature is weight. It uses the media rule to include a block of CSS
properties only if a certain condition is true.

Here is an example of responsive design. Several classes are applied to different tips. In this example, we are
giving different CSS properties for different devices.

With the <metal> tag, we are setting the viewport. We are setting different widths to different devices so that the
width will appear according to the devices. If the browser size is smaller than the maximum weight, the max-
width property has no effect. It is different for different devices.
The max-width property defines the maximum width of an element. If the browser size is larger than the maximum weight,
it will automatically change the height of the element.

There is div's present with an image. You should check whether this page has become responsive or not
Let's change the size of the browser, and the size of all the elements has changed accordingly. That means the page has
become responsive, this is how you can make your website responsive.

HTML Iframes
HTML iframe is used to display a nested webpage, a webpage within a webpage. The HTML <iframe> tag defines an inline
frame. Hence, it is also called an inline frame, and an HTML iframe embeds another document within the current HTML
document in the rectangular region. The webpage content and the iframe contents can interact with each other using
JavaScript.
iframe syntax

Width and Height of iframe

Set width and height of the iframe, use the height and width attributes to specify the size of the iframe. By default, the
attribute values are specified in pixels, but you can also set them in percent, that is 50 percent, 60 percent, etc.

When the target attribute of a link matches the name of an iframe, the link will open in the iframe. In this example, we have
set an iframe, which is going to display another web page. By default, an iframe contains a border around it. By default, an
iframe contains a border around it. You can remove the border by using style attribute and CSS border property and iframe
can be used as a target frame for a link.

The target attribute of the link must refer to the name attribute of the <iframe> tag. We have given the use of Wikipedia first,
then we created a hyperlink and the target is the iframe. Next, is the <p> tag and the target link is a Facebook webpage. Let's
see the output.

This is an iframe where you can embed another webpage. First, there is a URL of Wikipedia, in the iframe when you click
on the link below the iframe which is Facebook, you will be referred to another webpage.
HTML File Paths
An HTML file path describes the location of a file in a website's folder structure, file paths are like an address of a file for a
web browser. You can link any external resource to add to your HTML file with the help of file paths such as images file,
CSS file, JS file, video, etc. The src or href attributes require an attribute to link any external source to an HTML file, take a
look at the table from the illustration below.

<img src=“picture.jpg”> The “picture.jpg” file is located in the same

folder as the current page
<img src=“images/picture.jpg”> “picture.jpg” file is located in the images
folder in the current folder
<img src=“/images/picture.jpg”> “picture.jpg” file is located in the images
folder at the root of the current web
<img src=“../picture.jpg”> “picture.jpg” file is located in the folder one
level up from the current folder
File parts are used when linking to external files like web pages, images, style sheets, Java scripts.

There are two types of file path

Absolute file path: This kind of file path specifies the URL address. Here is an example of an absolute file path.
In this example, you have been given the full path to the image the full URL is given.
The image has been displayed

Relative file path: The relative file path specifies a file that is related to the location of the current page. A file
path points to a file in the images folder located at the root of the current web.
Here is an example of a relative file path in this example, you have just given the folder name above the image.
You can get the image this way also, let's see the output.
You should get this image.

HTML Doctype
HTML doctype tag is used to inform the browser about the version of HTML used in the document, it is called the document
type declaration. All HTML documents must start with the doctype declaration. Technically, doctype is not a tag or element,
it is just an instruction to the browser about the document type. It is a null element that does not contain a closing tag and
must not include any content within it. There are many types of HTML. Examples include HTML 4.01 strict HTML 4.01
transitional, HTML 4.01 frameset, XHDML 1.0 strict, XHTML 1.0 transitional, XHTML 1.0 frameset, XHTML 1.1, etc.

The Doctype Declaration refers to document type declaration in HTML 4.01, etc. because HTML 4.01 was based on SGML
but HTML 5 is not an SGML based language. The doctype declaration differs between HTML versions. The HTML 5
doctype declaration is given below which is the syntax
Doctype specifications

Here is an example of the HTML document with a doctype declaration. This is the title, this is the content of the document,
you can see it on the top of the illustrated image below. We have declared the <!Doctype HTML>, then we have started the
actual HTML tag, then there are <head> <title> and <body> tags also.

HTML - The Head Element

The head element is a container for metadata data, data about data, and displays between the HTML tag and the body tag an
HTML head can contain lots of metadata information or can have very little or no information. It depends on our
requirement, but the head part has a crucial role in an HTML document while creating a website.

Metadata defines the document title, character set, styles, links, scripts and other meta information. This is a list of tags
mostly used in metadata:

<title>
<style>
<metal>
<link>
<script>.

HTML <title> element.

The title element defines a title in the browser toolbar, it provides a title for the page when it is added to favorites. It also
displays the title for the page in search engine results.

As you can see in the title tag, we wrote a text which is going to be displayed in the browser toolbar.
HTML <style> element
The HTML style element is used to style the HTML page. The style element can have CSS properties for that HTML page
only if you want to apply CSS for multiple pages, then you should use a separate CSS file.

Here is an example of a style element in the style tag of the page in the head section. Set some CSS properties to the
particular elements and see the output.
You now have the required output as declared in the style element in the head tag.

HTML <link> element

The Link Element defines the relationship between the current document and an external resource. The link tag is most often
used to link to external style sheets. The Link element contains mainly two attributes which are "rel" and "href" the "rel"
attribute indicates that it is a stylesheet and "href" gives support to the external file.

Here is an example of a linked element, create a file named style.css externally

And link it here. In the stylesheet illustrated above, you have given different CSS properties to the elements.

The linked tag works fine

HTML <meta> tag
The HTML meta element is used to specify the character set page description, keywords, photos, and other metadata on the
web page. Metadata is mainly used by browsers, search engines, and other web services to rank your web pages better.

Now, let's see how to use metadata to define a character set. The charset attribute specifies the character encoding.

Here is an example of metadata with the help of a meta tag. Specify the name, content, charset, etc., and set it to UTF 8
which means it can handle or display any language

HTML <script> element

The script element is used to define client-side JavaScript. For example, write "Hello JavaScript" into an HTML element
with Id equal to "demo" p element, and it should have the "id" demo. There is a button, click on that button. JavaScript
writes "Hello JavaScript" into an HTML element with Id is equal to demo.
Click on the “try it” button, the “a paragraph”

You should get the “Hello JavaScript” in replacement of “A Paragraph”

HTML Layout Elements

The layout of your web page is important for users' approachability. When a user sees a website that has an easy and
attractive layout, he or she will automatically be attracted to it. Websites often display content in multiple columns like a
magazine or a newspaper. HTML layout provides a way to arrange web pages in well-mannered, well-structured, responsive
form, or we can say that HTML layout specifies a way in which the web pages can be arranged.

Web page layout work with the 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 your website can appear professional while looking good.

HTML has several semantic elements that define the different parts of a web page such as:
 <header>: It is used to define a header for a document or a section.
<nav>: It is used to define a container for navigation links.
<section>: It is used to define a section in a document
<article>: It is used to define an independent, self-contained article
<aside>: It is used to define content aside from the content like a sidebar
<footer>: It is used to define a footer for a document or a section, it is used to define additional details.
<summary>: It is used to define a heading for the detail element.

<header>
The header element is used to create the header section of the web pages. The header contains the introductory, heading
element, logo, or icon for the web page and authorship information.

Here is an example of the HTML header. Set the header in the body section with some width and height. There should be
an HTML element as well. Use header tags in the header style and give the background color, height, etc.

Let’s see the output

<nav>
The nav element is a container for the main block of navigation links. It can contain links for the same page or other pages.
Know that it is just a container for the navigation links. So, we have created unordered lists of navigation links in the nav
element. Let's see the output.
You have created a navigation element successfully. You have links and a heading.

<section>
HTML section elements represent a separate section of our web page, which contains related elements grouped. It can
contain text, images, tables, videos, etc.

HTML is a mark of language which is used for creating attractive web pages with the help of styling and looks in a nice
format on a web browser. Below, we have created a section element with h2 and p tags as discussed earlier. We created a
separate section for you to add images, text or tables, etc.
You can see the section is created.

<footer>
HTML footer element defines the footer for that document or webpage. It almost contains information about the author,
copyright, other links, etc. Footer tag creates a footer on the web page. We have applied some style and width, etc. This is an
example of a footer.

We have created the footer successfully.

<summary>
This element is used with the detail element in a Web page. It is used as summary captions about the content of the details
element.

In this used the <details> tag first and inside that we have used the summary tag and the <p> tag for showing the content.
Let's see the output

Here is our output, as you can see there is an arrow button once you click on it, it will show all the summary beneath it

HTML Meta
HTML meta tag is used to represent the metadata about the HTML document. It specifies page description, keyboards,
copyright, language, author of the documents, etc. with the help of a meta tag. You can experiment and preview how your
web page will display on the browser.
The meta tag is placed within the <head> tag and it can be used more than one time in a document. Let's see some specific
syntax of meta tag, which shows the different uses of a meta tag.

It defines character encoding. The value of the charset is UTF-8 which means it supports displaying of any language. It
specifies the list of keywords that are used by search engines. It defines the website description, which is useful to provide
relevant searches performed by search engines.

It specifies the author of the page. It is useful to extract author information by the content management system
automatically. It provides instruction to the browser to automatically refresh the content after every 50 seconds or any given
time.

In this example, we have set a URL with content, so that it will automatically redirect the given page after the provider time.

It specifies the viewport to control the page dimension and scaling so that your website looks good on all devices. If this tag
is present, it indicates that this page mobile device supported

Here is an example of HTML meta. This example shows the use of a meta tag with an HTML document. In this example,
we have used all the meta tags, which we have seen earlier. For example, meta tag will not be displayed on the browser but
it provides the metadata about the HTML document
HTML Semantic Elements
In any language, it is essential to understand the meaning of words during communication, and if this is computer
communication, then it becomes more critical. HTML5 provides more semantic elements, which make it easy to understand
the code.

Semantics define the meaning of words and phrases that is, semantic elements have a simple and clear meaning for both the
browser and the developer.

In HTML4, we have seen <div>, <span>, etc. which are non-semantic elements, they don't tell anything about its content.
On the other hand, <form>, <table> and <article> etc. are semantic elements because they clearly define their content in
HTML

HTML5 semantic elements are supported by all major browsers. Now, let's see some examples of these semantic elements
used in HTML5

HTML5 <article> element:

It defines article content within the document, page, application, or website. It can be used to represent a forum post, a
magazine, a newspaper article, or a big story.

Here is an example of an HTML article element. In this example, we have the content of Amazon, Facebook, and Google
websites using the <a> tag. We have given three options; home of resource, home of social media, and home of research.
Let’s see the output.

So, when we click on these options, we are redirected to the website's content.

HTML5 <header> element

The header element represents the header of the document, which can contain introductory content or navigation links.

Here, we have created a header with some options. And we are displaying just the header for simplicity. The data is in the
header tags.

We have used the unordered list to display, which is in the nav or navigation element. Let us see the output
This is our simple header element.

HTML5 <footer> element

This tag defines the footer of an HTML document or a page. Set the “copyright 2019. All rights reserved”, message in the
footer tag. You might have seen this kind of copyright dissolved message at the end of any webpage.
It is a brief indication of the privacy of data. Let's see what it looks like.

HTML Style Guide and Coding Conventions

Using Lowercase Element Names
First, let‘s see some guidelines and tips for creating good HTML code, use "lower case element names". HTML allows
mixing uppercase and lowercase letters in element names. However, we recommend using lowercase element names
because mixing uppercase and lowercase names look bad, unorganized, and disorderly.

Close All HTML Elements

The next one is to close all HTML elements; in HTML you do not have to close all elements. However, we strongly
recommend closing all HTML elements like the below illustration.
Always Quote Attribute Values
Always quote attribute values, HTML allows attributes values without quotes. However, we recommend quoting attribute
values because developers normally go to attribute values. Quoted values are easier to read. You must use codes if the value
contains space.

syntax

The next interesting point is always specified alt, width, and height for images. All this specify the alt attribute for images,
the attribute is important. If the image for some reason cannot be displayed. Also, all these define the width and height of
images. This reduces flickering because a browser can resolve space for the image before loading.

syntax

Spaces and equal size

HTML allows spaces around equal signs, but space less is easier to read and groups entities better together

syntax

Blank line and Indentation

Do not add blank lines, spaces, or indentations without a reason for readability, add blank lines to separate, large, or logical
code blocks. For readability, add those spaces of indentation, and do not use the tab key. Here is an example of a block line
and indentation.
From the above illustration, Tokyo is the capital of Japan, the center of the Great Tokyo Area, and the most populous
metropolitan area in the world. It is the seat of the Japanese government and the Imperial Palace, and the home of the
Japanese imperial family. In this example, we have added space between lines for the sake of readability.

Meta Data
Let’s understand metadata to ensure proper interpretation and correct search engine indexing. Both the language and the
character encoding "meta charset is equal to charset" should be defined as early as possible in an HTML document.

Here we have the set of meta tags at the top of the document in the head tag, which is usually recommended

Setting the viewport.

The viewport is a user's visible area of a web page. It varies with the device. It will be smaller on a mobile phone than on a
computer screen.

It should include the following meta element in all your web pages.
This gives the browser instructions on how to control the page's dimensions and scaling.

The width is equal to the device-width part, it sets the width of the page to follow the screen width of the device, which will
vary depending on the device

The initial scale is equal to one point zero part sets the initial zoom level when the page is fast loaded by the browser

HTML Entities
HTML character entities are used as a replacement for reserved characters in HTML. You can also replace characters that
are not present on your keyboard with entities, HTML entities provide a wide range of characters that can allow you to add
icons, geometric shapes, mathematical operators, etc.

If you use less than or greater than symbols in your text, the browser can mix them with tags. That is why character entities
are used in HTML to display dissolved characters.

How to use an entity.

You can use an entity in your HTML document by name or by a numerical character reference. Each entity starts with the
symbol ampersand and ends with a semicolon

syntax
Here is a table of the most used HTML character entities Result.

Result Description Entity Name

Non-breaking space &nbsp;
< Less than &lt;
> Greater than &gt;
& Ampersand &amp;
" Double quotation &quot;
mark
' Single quotation &apos;
mark (apostrophe)
£ Pound &pound;
€ Euro &euro;
¥ yen &yen;
© copyright &copy;
® Registered &reg;
trademark

Here is an example of HTML entities. The content is written in quotation marks. Let's see the output

We can see the double quote

Combining diacritical marks

A diacritical mark is a glyph added to a letter. Some diacritical marks like grave (‘) and acute (’) are called accents.
Diacritical marks can appear both above and below a letter, inside a letter, and between two letters diacritical marks can be
used in combination with alphanumeric characters to produce a character that is not present in the character set used on the
page.

This is a table containing a few diacritical marks.

You can see the first column is of the result of the mark as a character that is not present in the character set.

Non-breaking space
Non-breaking space is a commonly used entity in HTML, it is a non-breaking space. And non-breaking space is a space that
cannot break into a new line separated by a non-breaking space that will stick together (not break into a new line).

This is handy when breaking the words that might be disruptive. For example;

Another common use of the non-breaking space is to prevent browsers from truncating spaces in HTML pages. If you write
10 spaces in your text, the browser will remove nine of them. To add real spaces to your text, you can use the &nbsp;
character entity.

HTML Symbols
Many mathematical, technical, and currency symbols are not present on a normal keyboard. We have to use HTML entity
names to add such symbols to an HTML page. If no entity name exists, you can use an entity number, a decimal, or
hexadecimal reference.

Here is an example of HTML symbols.

So, in this example, we are using the "rupee symbol", then the "euro symbol". And after that, the "dollar symbol". Let's see
the output

All the symbols that have been displayed by HTML support some mathematical symbols. For example, for all, partial
differential, there exists, empty sets, etc. HTML allows us to use several Greek symbols as well.

Greek capital letter alpha, Greek capital letter beta, Greek capital letter gamma, Greek capital letter delta, etc.
Some important symbols are supported by HTML. For example; copyright signs, registered signs, euro signs, trademark
signs, etc.

Assignment
Create a <p> element with the message. "This product is of 30 dollars, and the output should display the dollar sign

Using Emojis in HTML

If you use a smartphone, you have an idea of what emojis are, a feature of popular communication apps. Emojis are often
used to express emotions in online communication.

Emojis are characters from the UTF-8 characters set, emojis look like images or icons, but they are not. They are letters
from the UTF-8 which is the Unicode character set.

HTML Charset Attribute

The HTML charset attribute, to understand this, you need to know that to display an HTML page correctly. A web browser
must know the correct set used on the page. This is specified in the meta tag UTF-8 characters.

Many UTF-8 characters cannot be typed on a keyboard, but they can always be displayed using numbers called entity
numbers.

Here is an example of UTF-8 characters, the meta charset is equal to UTF-8, greater than element, defines the characters set
the characters A, B, and C and are displayed by the numbers &#65, &#66, and &#67, to let the browser understand that you
are displaying a character, you must start the entity number with and hashtag then end with a semicolon. Let's see the output.
We got the characters

Emoji characters are also characters from the UTF-8 alphabet. Here is an example of UTF-8 characters.

The emojis have been displayed. We have used &#128512 for the first emoji, and we have used &#128516 for the second
emoji, and lastly &#128151 for the third emoji
HTML Encoding (Character Sets)
HTML charset is also called HTML character set or HTML encoding to display an HTML page correctly. A web browser
must know which character set to use.

The character set is as follows:

ASCII character set: ASCII was the first character encoding standard. It defined 128 different characters that
could be used on the internet. Number 0 to 9, English Letter A to Z and some special characters like an
exclamation, dollar, plus, minus, bracket, at, less than, and greater than.

ASCII uses the values from 0 to 31 and 127 for control characters. ASCII uses the values from 32 to 126 for
letters, digits, and symbols, ASCII does not use the values from 128 to 255

ANSI character set: the ANSI character set and ANSI stands for American National Standards Institute. It is a
character set standard, which is an extended version of the standard ASCII. ANSI is identical to ASCII for its
values which is from 0 to 127, ANSI has a proprietary set of character for the values from 128 to 159. And ANSI
is identical to UTF-8 for the values from 160 to 255
ISO-8859-1 character set: The ISO-8859-1 character set which is identical to ASCII for its values is also from 0
to 127. ISO-8859-1 does not use the values from 128 to 159, ISO-8859-1 is identical to UTF-8 but the values
from 160 to 255
UTF-8 character set: UTF-8 is a variable with character encoding which covers almost all of the characters and
symbols in the world, ANSI (windows-1252) was the original window character set that supported 256 different
characters codes. ISO-8859-1 was a default character set for HTML4 this character set also supported 256
different character codes

Why is UTF-8 supported by HTML4?

Because ANSI and ISO-8859-1 were so limited that HTML4 also supported UTF-8. The default character encoding for
HTML5 is UTF-8.

UTF-8 syntax for HTML4

HTML Uniform Resource Location (URL)

URL stands for uniform resource locator. It's a web address. A URL can contain words such as google.com or an internet
protocol IP address that is 192.205.52.01 But most of the users use URL in the form of words because it is easier to
remember than numbers.

The syntax of a URL can be seen above scheme is used to define the type of internet service most common is HTTP or
HTTPS. A prefix is used to define a domain prefix, the default for HTTP is WWW. The domain is used to define the
internet domain name like amazon.com. The port is used to define the port number as the host, default for HTTP. The path
is used to define a path at the server if permitted, the root directory of the site file name is used to define the name of a
document or source.

Common URL Schemes

Http (HyperText Transfer Protocol): These are common webpages; they are not encrypted as Https is secured.
Https (Secure HyperText Transfer Protocol): These are secure web pages that are encrypted.
Ftp (File Transfer Protocol): It allows you to download and upload files

URL Encoding
URL encoding is used to convert non-ASCII characters into a format that can be used over the internet because the URL is
sent over the internet by using the ASCII character set only. If a URL content character is outside the ASCII set, the URL has
to be converted in URL encoding, the non-ASCII characters are replaced with the percent followed by hexadecimal digits.
URL cannot contain spaces. URL encoding normally replaces a space with a plus sign or a percent 20

CHAPTER FIVE

HTML FORMS

HTML Forms part 1

A form powers the conversion process, forms collect information, and add to your contacts database. Any new information
that is collected will be added to the existing contact information. HTML allows us to work with forms.

HTML Form is used to collect user input. The user input is most often sent to a server for processing, such as name, email
address, passport, phone number, etc. An HTML form is a section of a document that contains controls such as text fields,
passport fields, checkboxes, radio buttons, submit buttons, menus.

Why Use HTML Form?

HTML forms are required if you want to collect some data from the site visitor. For example, if a user wants to purchase
some items on the internet, he or she must fill out the form, such as shipping, address, and credit or debit card details, so that
the item can be sent to the given address.
Form Element: HTML form element is used to create an HTML form for user input.

Syntax for form

The form element is a container for different types of input elements such as text fields, checkboxes, radio buttons, submit
buttons, etc.

Input element: The HTML input element is the most useful, and the input element can be displayed in many ways,
depending on the type attribute.

List of input types and their description

The input type is equal to text displays a single-line text input field

A radio button for selecting one of many choices.

Displays a checkbox for selecting zero or more of many choices.

Displays a submit button for submitting the form.

 Displays all clickable button

Text Field: HTML input text field and label element. Text field, the default width of text input fields is 20 characters. The
input type is equal to text is less than this defines a single line input field for text input.

Label element: The label tag defines a label for many form elements. The label element is useful for screen reader users
because a screen reader will read out loud. The label when the user focuses on the input element, the label element also
helps users who have difficulty clicking on very small regions, such as video buttons or checkboxes. Because when the user
clicks the text within the label element, it toggles the radio button or checkbox.

Text field
In this example, we have a label and a text field. Do we have a name and username? Let's see the output.

As you can see on the browser, we have a label and a text field.
Radio buttons
The radio button is used to select one option from multiple options. It is used for the selection of gender, quiz questions, etc.
If you use one name for all the radio buttons, only one radio button can be selected at a time. This defines a radio button.

Now, here is an example of an HTML radio button. In this example, we have three labels and radio buttons. Choose one
option from HTML, CSS, and JavaScript. Now, let's see the output on the browser.

You can see three options, click on one of these options, on the radio button only one option is allowed on multiple options
to pick from
Assignment
Create a radio button with options

Cricket
Football
Tennis.

HTML Forms part 2

Checkboxes
The next input type is checkboxes, this defines a check box. Checkboxes allow a user to select zero or more options of a
limited number of choices.

In this example, there is a button and three checkboxes having id, name, and value. We can click as many checkboxes as we
want.
Submit Button
HTML input type is equal to submit. This is used to add a submit button on a web page when the user clicks on the subject
button. The form gets submitted to the server syntax.

The type is equal to submit specifies that it is a submit button. The value attribute can be anything that you write on a button
on a web page. The name attribute can be omitted just mainly for calling of an element while using an external script

In this form, we are using input fields, labels and buttons. The values of inputs are already given in the action attribute of the
form. We have to provide the name of the page on which we want to display our data.
You can see a form here with already provided values. When you click on the submit button, the values will be submitted to
the required page. Here you will not use any server-side scripting language, for example, PHP that is why you cannot submit
the values.

Assignment
Here is an assignment for you

Create a checkbox having three options

JavaScript
HTML
CSS

Solve the assignment

HTML Forms Attributes

The form attributes in HTML
An example of the form attribute
Detailed explanation.

HTML Action Attribute

The action attribute of the form element defines the process to be performed on the form when a form is submitted or it is
URL to process the form information. The action attribute value defines the webpage where information proceeds, it can be
.php, .jsp, .asp, or any URL where you want to process your form.

Now here is an example of an HTML form attribute

If the action attribute is omitted, the action is set to the current page. In this example, there is a form having input fields and
a button when we click on the button the values of the form go to the page, which we have provided to the action attribute.
Let's see the output
When you click on the button, the values should be submitted to the next page, but you’re not using any server-side
language here. That is why it is not possible.

Target attribute
The targeted attribute defines where to open the response after submitting the form, these are the keywords used with the
target attribute.

List of target attributes

_blank: The response is displayed in a new window or tab
_self: The response is displayed in the current window
_parent: The responses displayed in the parent frame
_top: The responses are displayed in the full body of the window.
Frame name: the response is displayed in a named frame.

Here is an example of an HTML targeted attribute when submitting this form.

The result will be opened in a new browser tab, but we are not using any server-side language.

HTML Method Attribute

The attribute specifies the HTTP method to be used when submitting the form data. The form data can be sent as URL
variables with method is equal to get or as HTTP post transaction with method is equal to post.

Post method
You can use the post value of the method attribute when we want to process the sensitive data, as it does not display the
submitted data in the URL.

Here is an example of the HTML post method, here we used the post method
After you submit

Notice that the form inputted values are not visible in the address bar of the new browser tab.
Get method
The get value of the method attribute is a default value while submitting the form. But this is not secure as it displays data in
the URL after submitting the form.

So here is an example of the HTML Get method. Here, we have used the get method. Let's see the output

When we click on the submit button, it does not get submitted because we are not using any server-side scripting language.

But if you look at the address bar, you can see the name-value appended. It appends the form data to the URL in name or
value pairs, don’t use get to send a sensitive data
HTML novalidate attribute HTML5
The novalidated attribute is a newly added Boolean attribute of HTML5. If you apply this attribute in the form, then it does
not perform any type of validation and submits the form.

Here is an example of an HTML novalidate attribute. Here, we have to use the novalidated keyword in the form tag, so it
will not be validated while submitting.

HTML Forms Elements

A webform or HTML form on a webpage allows a user to enter data that is sent to a server for processing. For example,
forms can be used to enter shipping or credit card data to order a product or can be used to retrieve search results from a
search engine.

The form tag is used to create an HTML form for user input. HTML form elements can contain one or more of the following
elements we already know the input and label. Let’s see a list of form elements.

<select>
<textarea>
<button>
<fieldset>
<legend>
<datalist>
<select> element
The <select> element defines a drop-down list, below is an example of an HTML select element, in the select element we
have an option. The option element defines as an alternative that can be selected by default. The first item in the dropdown
list is selected, if you have a list of options, see the output

The first element Volvo is selected by default. We can select anything from the dropdown list and submit

<textarea> element
The textarea element defines a multi-line input field. Here is an example of an HTML text data element.
The rows attribute specifies the visible number of lines in a text area. The cols attribute specifies the visible width of a
textarea. Let’s see the output.

The text area has been displayed

<button> element
Use the button element, which defines a clickable button. As you can see, we created a button using the button element. And
when we click on the button, the on-click event, the alert will be displayed on the browser screen. Let's see the output
When you click on the button, the alert will be displayed.

<fieldset> and <legend> elements

The fieldset element is used to group related data in a form. The legend element defines a caption for the fieldset element.
Here is an example of an HTML fieldset element. In this example, we have used fieldset to group related data inside the
fieldset, person is the caption set using legend. Inside legend, you have a normal form.

The form has been displayed inside a fieldset and the caption person is also displayed
Datalist Element
The datalist element specifies a list of pre-defined options for an input element. Users will see a dropdown list of the
predefined options as input data. The list attribute of the input element must refer to the Id attribute of the datalist element.

Here is an example of HTML Datalist element. In this example, you can see that the list attribute of the input element is
referring to the Id attribute of the datalist element. Inside the datalist, we have some options from which we have to choose
the required one. Let's see the output.

When we click on the text field, we get the predefined list of options we can choose any of them and submit.
Assignment
Create a button named "Click here", and when we click on the button, there should be an alert message saying "Welcome".

HTML Input Attributes

HTML Value Attribute
The first is the HTML value attribute, the input value attribute specifies an initial value for an input field. Let see the
example, on submitting, send form data to form named action underscore page dot php to process the input value of the full
name is "Will" and the value of the last name "Smith" is defined to the last name. Let's see the output.

The values are displayed in the text fields.

HTML Read-only Attribute
The read-only attribute specifies that an input field is read-only. A read-only input field cannot be modified. However, a user
can tab to it highlighted and copy the text from it. The value of a read-only input field will be sent when submitting the
form.

Here is an example of an HTML read-only attribute. So, in this example, we are using the read-only attribute, the read-
only attribute specifies that an input field should be read-only and cannot be changed. Let's see the output.

There are two text fields, try to change the value, you will notice that you cannot change the "first name input" because you
have applied the read-only attribute to it.
HTML Disabled Attribute
A disabled input field is unusable and clickable. The value of a disabled input field will not be sent when submitting the
form. For example, we have applied the read-only attribute to the first text field of the form. Let's see the output.

The first field has been disabled, as shown below it is faded.

HTML Min and Max Attribute
The input min and max attributes specify the minimum and maximum values for an input field. The min and max attribute
work with these input types, number, range, date, DateTime-local, month, time, and week.

In this example, we have applied the min and max attributes to the date type attributes. First, we have to enter a date before
1980-01-01. Otherwise, it would be invalid.

Max is equal to 1979-12-31, then we have to enter a date after 2000-01-01. Otherwise, it would be invalid. Min is equal to
2000-01-02. Let's see the output.

Enter 01-01-1990 in the first field and 01-01-1999 in the second field, if you try to submit, you are going to get an error
message.

Change the first option correctly as 01-01-1970, and submit. You will get an error message for the second option until it is
also changed above 2000-01-01 before you will be able to proceed
Assuming you entered all the input correctly and click on the submit button. You won’t see the error message again, but the
value hasn't been submitted because you have not used any server-side scripting language.

HTML Placeholder attribute

The input placeholder attributes to specify a short hint that describes the expected value of an input field, a sample value, or
a short description of the expected format. The short hint is displayed in the input field before the user enters a value.

The placeholder attribute works with these input types, text, search, url, tel, email, and password. In this example, use the
placeholder attribute on the phone number. The placeholder attribute specifies a short hint, which is 123-45-678. It describes
the expected value of an input field. Let's see the output in the output.
You can see the hint is displayed in the text field

HTML Required Attribute

The input required attribute specifies that an input field must be filled out before submitting the form. The required attribute
works with the following input types, text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.
Here is an example of HTML input required attribute. In this example, use the required attribute on the first text field.

Submit without entering any value. The invalid message has been displayed, so this text file has to be filled, this is exactly
what the required attribute is all about.
HTML height and width attribute
The input height and width attributes specify the height and width of input, type is equal to image greater than element.
Specify both the height and width attributes for images without these attributes. The browser does not know the size of the
image and cannot resolve the appropriate space for it.

Here is an example of the HTML height and width attribute. In this example, we are using a height and width attribute on
the image, the height and width are both 48.

The image has been displayed with the required size.

Assignment
Create two fields and make the first field read-only and the second field disabled
In the input field below, add a placeholder that says "Your name here"
 CHAPTER SIX

HTML GRAPHICS

HTML Canvas Graphics

The HTML canvas element is used to draw graphics on a web page. The graphics to the left is created with canvas. It shows
four elements a red rectangle, a gradient rectangle, a multicolor rectangle, and a multicolor text.

The HTML canvas element is used to draw graphics on the fly via JavaScript. The canvas element is only a container for
graphics. You must use JavaScript to draw the graphics. Canvas has several methods for drawing paths, boxes, circles, text,
and adding images.

For example, we have a canvas, having Id my canvas, always specify an Id attribute to be referred to in a script and a width
and height attribute to define the size of the canvas. To add a border, use the style attribute as shown below

A canvas is a rectangular area on an HTML page. By default, the canvas has no border and no content.

Canvas tag with JavaScript

HTML canvas tag with JavaScript, a canvas is a two-dimensional grid. Here is an example of an HTML image JavaScript
tag. Here we are using canvas width 200 and height 100 in the script tag. We write code for JavaScript, so we have created a
variable to store the Id of the canvas.
The document method gets element by Id returns an Element object representing the element whose Id property matches the
specified string coordinates 0,0 define the upper left corner of the canvas. The parameters 0,0,200 and 100 are used for the
fill react method. This parameter will fill the rectangle, starting with the upper left corner and drawing a 200 by 100
rectangle. Let's see the output

We got the required output

Drawing circle on Canvas

Drawing circle on canvas, now if you want to draw a circle on the canvas. You can use the arc() method, arc(x, y, r, start,
stop)

To sketch a circle on an HTML canvas using one of the ink() methods like stroke(), or fill(), get context, return the context
that the view is currently running in, ctx.arc represents the context.arc x y or s angle.

The angle counterclockwise x (95) and y (50) are the coordinates of the circle then the arc is the radius (40,0), s angle, and e
angles are the starting and the ending angle in the radians respectively. With the stroke method, we have drawn a circle. Let's
see the output
We have created this circle successfully.

HTML SVG Graphics

The meaning of HTML SVG Graphics
Its syntax
Example of SVG

What is SVG
SVG stands for Scalable Vector Graphics. It is used to define graphics for the web. SVG is a W3C recommendation, HTML
SVG. It is an element that is a container for SVG graphics. SVG has several methods for drawing paths, boxes, circles, text,
and graphic images, HTML SVG is a modularized language used to describe graphics in XML. It describes two-dimensional
vector and mixed vector/raster graphics in XML, it is a W3C recommendation.
SVG images and the behaviors are defined in XML text files. So as XML files, you can create and edit SVG images within
the text editor. But generally, drawing programs like, ink, space, are preferred to create, SVG is mostly used for vector-type
diagrams like pie charts, 2-dimensional graphs in an x y coordinate system, etc.

SVG Circle Example

In this example, we are using SVG circle, the “cx” and “cy” attributes define the “x” and “y” coordinates of the center of the
circle, if “cx” and “cy” are omitted, the circle center will be set to zero. The “r” attribute defines the radius of the circle, we
have set the radius of color to black and the “stroke-width” is “3 pixel” and we have “filled” the circle with the color “red”.

The circle has been displayed successfully on the browser.

Rectangle Example
The next is the HTML SVG rectangle example, the width and height attributes of the width of the rectangle. The style
attributes of the "rect" element define the height and width of the rectangle.

The "style" attribute is used to define CSS properties for the rectangle, the CSS "fill" property defines the field color of the
rectangle, the CSS "stroke-width" property defines the width of the border of the rectangle while the CSS "stroke" property
defines the color of the border of the rectangle.
The rectangle has been displayed successfully. It has a radius of three, and we have filled it with the color blue.

HTML Canvas vs. SVG

SVG is a language for describing 2D graphics in XML, Canvas draws 2D graphics on the fly with JavaScript. SVG is XML-
based, which means that every element is available within the SVG DOM. You can attach JavaScript event handles for an
element in SVG. In SVG each drawn shape is remembered as an object if attributes of an SVG object are changed, the
browser can automatically re-render the shape. Canvas is rendered pixel by pixel.

In Canvas, once a graphic is drawn, it is forgotten by the browser. If its position should be changed, the entire scene needs to
be redrawn, including any object that might have been covered by the graphic.

Comparison between Canvas & SVG

Here are some important differences between these two:

Canvas raster-based is composed of a pixel.

SVG is a vector-based is composed of shapes
Canvas has poor scalability. Not suitable for printing at higher resolution
SVG has better scalability, it can be printed with high quality at any resolution.
Canvas gives better performance with a smaller surface or larger number of objects.
SVG gives better performance with a smaller number of objects or larger surfaces.
Canvas can be modified through script only.
SVG can be modified through script and CSS, a single element of the canvas is similar to the image in behavior.
Canvas diagrams can be saved in PNG or JPG format
In SVG that are multiple graphic elements that become part of the page's DOM tree.
 CHAPTER SEVEN

HTMLError! Bookmark not defined. MEDIA

HTML Multimedia
Multimedia on the web is sound, music, videos, movies, and animations. It is very user-friendly. It doesn't take much energy
out of the user in the sense that you can sit and watch the presentation. You can read the text and hear the audio. It is multi-
sensorial. It uses a lot of the user's senses while making use of multimedia, for example, hearing, seeing, and talking.

Multimedia comes in different formats, it can be almost anything you can all see, like images, music, sound, videos, records,
films, animations, and more.

Multimedia makes use of a computer to present and combine text, graphics, audio, and video with links and tools that let the
user navigate, interact, create and communicate. For example, if you have no computer to provide interactivity, you have
mixed media, not multimedia. The first web browser had support for text, only limited to a single font in a single color.
Later, came browsers that support colors, fonts, images, and multimedia. Webpages often contain multimedia elements of
different types and formats.

Multimedia formats
Multimedia formats like audio or video are stored in multimedia files. The most common way to discover the type of file is
to look at the file extension, multimedia files, formats and different extensions like .wav, .mp3, .mp4, .mpg, .wmv, and .avi.
video formats.

Common video format

The MP4, WebM, and Ogg formats are supported by HTML.
The MP4 format is recommended by YouTube.

Let's see the format file and their description:

Format File Description

MPEG-4 or MP4 .mp4 Moving pictures expert group.
Commonly used in videos,
cameras, and TV hardware.
Supported by all browsers.
Recommended by YouTube.
WebM .webm WebM was developed by Mozilla,
Opera, Adobe, and Google. Supported
by HTML

Ogg .ogg Theora Ogg was developed by the

Xiph.Org foundation and supported by
HTML
 Flash .swf Flash was developed by Macromedia.
.flv It often requires an extra component
(plug-in) to play in web browsers.

Common audio formats

MP3 is the best format for compressed recorded music. The DOM MO3 has become synonymous with digital music. If your
website is about recorded music and MP3 is a choice, only MP3, WAV, and Ogg audio are supported by the HTML standard.

Let’s see the various formats

Format File Description

MP4 .mp4 MP4 is a video format but can also be

used for audio which is supported by
all browsers.
MP3 .mp3 MP3 files are the sound part of MPEG
files, they are the most popular format
for music players. It combines good
compression (small files) with high
quality. It is also supported by all
browsers.
Ogg .ogg Xiph.Org foundation. It is supported
by HTML
Wav .wav IBM and Microsoft. Plays well on
Windows, Macintosh, and Linux
operating systems. It is supported by
HTML

HTML Video
The HTML video element is used to show a video on a web page, the video tag is used to embed video content in a
document such as a movie clip, or other video streams. The text between the video and video tags will only be displayed in
browsers that do not support the video element.

There are three supported video formats in HTML which are MP4, WebM, and OGG. HTML5 supports <video> tag also.
The HTML video tag is used for streaming video files such as movie clips or song clips on the web page.

HTML Video Element

HTML Video element to show a video in HTML use the video element. Here is an example of a video element. In this
example, we are using the video element, the “src” attribute specifies the location that is the URL of the video file. This
example uses an MP4 file and will work on Chrome, Edge, Firefox, and Opera.

Set the height and weight of the video screen, the control specifies that video controls should be displayed, such as a play or
pause button, etc.
The video has been displayed successfully.

HTML Audio
HTML audio element is used to play an audio file on a web page. The audio HTML element is used to embed sound content
in documents, it may contain one or more audio sources, they are presented using the "src" attribute or the source element.
The browser will choose the most suitable one. It can also be a destination for streaming media using a media stream.

Using the example to the image element, include a path to the media you want to embed inside the “src” attribute in the
audio element. Give the name of the MP3 that is the output that played the audio.
The music has started.

HTML Plug-ins
Plug-ins are computer programs that extend the standard functionality of the browser. Plug-ins were designed to be used for
many different purposes to run Java applets, to run Microsoft ActiveX controls, to display flash movies, to display maps, to
scan for viruses, to verify a bank Id.

The object element

The object element is supported by all browsers.
The object element defines an embedded object within an HTML document.
It was designed to embed plugins like Java Applets, PDF readers, and flash players in web pages, but can also be
used to include HTML in HTML.

The object HTML element represents an external resource that can be treated as an image, a nested browsing context, or a
resource to be handled by a plug-in. The height attribute specifies the height of the element in pixels. The width attribute
specifies the width of the input element. In this example, the external resource is an image that we have specified in the data
attribute.

The image with the required height and width has been displayed.
The Embed element
The embed element is supported in all major browsers. The embed element is also defined as an embedded object within an
HTML document, web browsers have supported the embed element for a long time. However, it has not been a part of the
HTML specification before HTML 5.

The embed tag in HTML is used for embedding external applications, which are generally multimedia content like audio or
video in an HTML document. This content is provided by an external application or another source of interactive content,
such as a browser plugin. We are embedding an image here.

The image has been displayed on the browser.

PART TWO

(CSS)
 CHAPTER EIGHT

FUNDAMENTAL APPROACH TO CSS

Introduction to CSS
CSS is a technology that is very popular and is indispensable for the web designing concept. CSS can be said to be the skin
that covers the skeleton structure of HTML in looking professional.

Nowadays, a lot of concepts like Bootstrap are based on CSS. Before learning the CSS concept, the candidate must be
familiar with the HTML and after that, you must have a web browser and a text editor which has been settled in our HTML
section

CSS stands for cascading stylesheet. The stylesheet is a list of a document that contains a list of all the styles which you
want to define for a particular element on the web pages.

For example, if you want to make a particular design for the heading tags, you can create a sheet of those styles similarly for
all the different tags. It is used to control the style of the website. So, this style sheet will help you out in making this set of
stage rules

Secondly, there is something called cascading, cascading means a flow, whenever you will make changes on the top, it will
flow in the downward direction which means if you make any changes will be reflected in the pages as well on the pages
that are using those particular stylesheets by the time we will start discussing the working or the functionality of CSS, we
will get to know how we can make the different sheets for different documents through the stylesheet which in return will
reflect in our HTML output.

It is used to control the style of a webpage, it will contain a list of styles for a specific element, or as for your choice, like
you just want to make some list of styles and on any particular element, you can apply that. For example, if I have designed
some font family, the text color, or something for a specific text, you can apply this particular setting to the heading, also to
the paragraph as well. Handling the look of the web pages, it will contain the exact layout of a particular page, so how you
want your page to look. You can make that all inside this CSS

CSS Advantages
Saves time in such a way that newly created HTML files or multiple files can easily be transformed with a single
CSS file
Page loads faster with CSS most especially creating CSS files separately gives the web page an edge on the
browser to load fast since the declaration is not jammed pack together in a single file
Easy maintenance: in a situation where there are multiple HTML pages with CSS changes can take effect on all
document
Superior style to HTML when it comes to effect dominance CSS take effect on any HTML codes
Mobile device compatibility with CSS compatibility there is a high level of compatibility on all devices

CSS Inclusion In HTML

Inline Stylesheet
Internal Stylesheet
External Stylesheet

The first one is the inline stylesheet, inline stylesheets are something real. You will write any style and use this style attribute
to write all the style rules in this CSS Style. You will write the CSS code inside the head section of the HTML document
inside the CSS style tag. All the style rules will be applicable for the current HTML page only.

Whichever HTML you are putting, you can use, the name selector, Id selector, class selector, universal vector, whatever. But
that will be applicable for the current page only if you want to write a stylesheet that should be applicable for all the pages of
your website. Then you will have to create a separate file with an extension .css and then you will write all these tiles inside
that file later.
There are two different ways of including those style rules in any HTML page that is “linking” and “importing”. These are
the two ways that will help us out in getting this style from a separate CSS document. And we will implement that on our
current HTML page. Let's see a practical implementation of the different ways how we can link this stylesheet with the
HTML

Inline Stylesheet
To work with the inline stylesheet, there are a couple of tags, they are <h1> and <h2> tag and style written inside of it.
Every styling of HTML written inside of its tag is known as an inline stylesheet.

Note: Whatever name you will be saving your file, make sure you include .css as the extension for the CSS stylesheet

And here is the output of this HTML code

Internal Stylesheet
The internal stylesheet is another way of styling HTML content in a limitless way. To make use of the internal stylesheet,
your styling must be located in between the <head> tag, in other to achieve this, you must use a tag called <style> tag and
then write your styling. Below is a simple internal styling of <h1> tag and <h2> tag
As you can see, the color and text alignment has taken effect automatically.

External Stylesheet
The external stylesheet is the best and highly recommended use for professionals which enables your codes to be neat and
well-structured in a separate file which reduces the codes on the HTML file. The external stylesheet can also be used for
multiple HTML files without any complications. Below is an example of separate HTML & CSS file

First, let us see the HTML content, as seen below, only the <link> tag is associated with the external CSS file, the “href” tag
as discussed earlier is used to locate a file, in our case we are locating the CSS file which is saved in the same directory or
folder. If the HTML and CSS files are saved separately then a forward slash is required to demarcate it as a way of locating
the directory. The next is the “type” tag which is similar to “href” but it is mainly to tell the name of the script we are
linking, and lastly “rel” tag work hand in hand with type, it specifies the name of the scripting language for HTML to make
use of in passing command to the text.

Note: the “href” tag must be the exact name your CSS file is saved with, in our case, it is style.css which is the universal
name of styling a single external stylesheet

HTML code

Here is the CSS code, the <h1> element and <h2> element have been styled in a separate CSS stylesheet

CSS code

As you can see, <h1> and <h2> elements are now reflecting the color, text alignment and the background color
CSS Basics
In this section, we are going to be looking at a high-level overview of how CSS works and what it does.

We will be discussing these three important things:

Define CSS and the role that it plays in Web development

View websites before and after CSS has been added
Understand the "general rule" for CSS syntax

Remember that CSS is often considered the adjectives or the skin where HTML would be the nouns. So, HTML is the
structure used to set headings, bullet points, paragraphs, and other structural foundations. We use CSS to make the headings
purple and font size 50pixel if need be, border styling, changing of text positioning, etc.

It is used to describe how things should look, the stylesheet's other part is the sheet’s part of it and what that means is that
we are going to be writing our CSS separately from the HTML. CSS is a separate document that we then include in our
HTML. Let's start by taking a look at some examples, there is a site that I like called "CSS Zen Garden"
The point of this site is to show you the variety of things you can accomplish with just CSS. If you take a look at the site as
illustrated below, you will notice that you have some markup. Let's look at the "HTML file" as illustrated below

Assuming, you only download the HTML file for now, below will be what your browser will reflect the opposite of the first
illustration because it is without CSS

This is the core file that every single page on "CSS Zen Garden" uses, you can see it is pretty basic, we have got some
headings, we have got some paragraphs, some links, some bullet points at the bottom and then the whole idea of this site is
that contributors take this HTML and write their CSS without changing the HTML at all

So, you only change the CSS, the structure is the same and you end up with different results. The above illustration is one,
and on the left-hand side of the website, you can check out a few others and there is a bunch of them on the site.
And actually, you can contribute your own if you want to, let’s look at other customized CSS webpages. This one is
radically different, different total layout, color scheme, images, and so on.

This one is also very different, It has a nice loading animation all done with CSS, you can scroll down and you will have this
effect where your content scrolls but the background image is static
We have this radically different one as well in a slant positioning

You can spend all day checking different webpage which is built with CSS.
It is the skin as discussed earlier, it is an adjective for your structure, it can be changed.

The General Rule

Let's discuss the general rule that every line of CSS must follow; the illustrated image below simply means, we select
(selector) something like all <h1> or every anchor tag inside of a <li> tag

Select HTML elements by referencing existing HTML, and then inside the curly brace you will apply some styles, and they
follow this key-value pair format above where you have a property colon, and then a corresponding value, and then a semi-
colon. You can have more than one different property that you are changing, but they always follow the above syntax
property colon value.

So, here are two examples, the first section is going to select all h1 tags, it is going to select all h1 on a page, and then it will
give them the color of purple, and font size of 56, then the next selector which is your img tag border-color red and border
width of 3 pixels.

In a webpage you are not always going to select all h1 tags and all image tags, you will have multiple sections on the
nuances of selecting things sometimes we want to select tons of things, sometimes we are doing one small element at a time.
So, there is a lot of options there but it always follows the above general rule format. Select curly brace and then inside the
curly braces, we have key-value pairs that are just properties that we are changing.
Our First Stylesheet
Inline Styling

Let’s write some CSS code, but before we do that though we need to have some HTML that will style. Go to visual studio
code to make a new file and save it on a folder or any location of your choice, making sure it can be easily accessed. Let's
name it aboutme.HTML and the code will look like the illustration image below

As you can see, the selected <li> changes to the color purple which is “playing guitar”
If I want all three of these li's tags to be purple, you need to go ahead and duplicate the style on other items every time.
Imagine, if there are hundreds of them which might be a lot of work in duplicating it on all.

And then if I decide oh no, I want them to be green, then I need to go and change all the items one after the other. And
obviously, that problem is much worse when you have hundreds of the same elements with the same style on a given page.
So, this is a bad idea
And the other reason this is not a great idea is that we want to separate our HTML from CSS. It is the idea of the separation
of concerns, we want our CSS to be self-contained in its file and our HTML to its file with just the structure, CSS is just the
style.

Get rid of the inline style. And the other way is something called a style tag which is also known as internal styling as
discussed earlier. So, a style tag allows you to write CSS syntax where you will select things and have the curly braces
which you couldn't do in inline styling, but what you can do is to style your HTML document inside the head section, just
create a tag called style, and give it the type equals text/css attribute in the opening style tag.

CSS Commenting
Remember you have the general rule which is the selector and then you have a property inside the curly braces and then
value followed by a semi-colon.
To comment in CSS, use slash and the asterisk at the beginning of the commented area, and then asterisk and slash at the end
of the commented area. Start by changing the h1 to be purple, write that and follow the general rule pattern, write h1, and
again you will spend a lot of time on the different types of selectors.

Let’s discuss the element selector which is the case h1, add a property into the h1 selector. The first thing we are going to be
adding into our h1 selector is color, so let's say color and then give it purple and save the file and reload your browser, which
in return you will get purple

As you can see your h1 element has been styled with the set color purple
The next thing that we can do is to change all the li's to orange, to do that, select with an element selector again, and you can
just do this right after the h1 selector, you don't need any comma or any other punctuation mark.

The reason we are doing this is to show you that the li element won't only select one li element not all

Refresh all the three li's elements, they should now be color orange

Likewise, with the h1 element, if we have multiple h1 it will also reflect on the rest element. Let's create an additional h1
element and save the file
Once you refresh your browser your page will reflect the additional h1 element as shown in the illustrated image below

Also, if you define another for h1 element style afterward and say it should be blue

It turns blue. All of them turns blue

You will learn a lot more about what happens when there is conflicting style information. And in this case, it was changed to
purple, and then back to blue. So, the problem with what you just did is that although your CSS looks fine, unfortunately, it
is still in inline and internal HTML.

As said earlier, separate your HTML and CSS, cos you don't want them to be nested inside the HTML. So functionally, it
works the same way, we don't see any visual difference but well what we want to do is to use a link tag as was briefly
discussed earlier.

A link tag allows you to write a CSS in a separate file and then connect with the link tag inside of your head tag which will
go get the contents of that file and style everything in our HTML. To write that, create a new file name it as app.css, it can
be whatever you want but must end with the extension of .css

Next, define a few styles inside the app.css file, note you are still making use of your “aboutme.HTML” file, the only
difference is that we have removed all the previous inline and internal styling.

So let's say “h1” is our selector and then we are passing a property of color then giving the property a value which is let say
red and also style the “li” selector bypassing the property of color and adding its value to be green and also let change “h4”
as well to the color purple.

Refresh your browser, as you can see nothing happens because it has not yet been linked in your HTML file
So, we made a file but it is not connected, to connect it, we need to use the link tag inside the link tag type “href” equals the
file name location which is app.css the type will always remain the same which is “text/css” and also the “rel” which is a
stylesheet template. Save and refresh your browser

Now, as you can see, we have red as <h1>, purple as <h4>, and green as <li>.
 CHAPTER NINE

STYLE BEAUTIFICATION

CSS Colors
In this section, we are going to be discussing the different ways of describing and representing colors in CSS. In our
previous writing, we have just been using simple elementary school colors like red, green, blue, purple, etc. although they
work perfectly well, they are not nice colors because it does not give room for flexibility and you probably never use them
because most designers and most people making websites have a very specific color palette.

Whether it is something that is following the brand color like a very specific shade of green for a brand or if it is a color
palette that a designer or someone has created, almost nobody uses just the plain default red, green, purple, and the usual
normal colors.

CSS provides a few different color systems that we can work with, and these are color systems by the way that exist outside
of the CSS. So, if you have some familiarity with photography or printing and you have worked with colors before, you may
have encountered some of these.

The first one is something called hexadecimal and before we discussed why it is called hexadecimal, what that means, let’s
look at a few examples

From the above illustration, the first thing we are doing is selecting all h1 and changing their text color to black, the next
thing we are doing is selecting all h2 changing the color to be a shade of purple, and then selecting all h3 and changing them
to be a shade of pink.

What you will notice is that rather than having a word like red, purple, blue, we now have this hash symbol (#) and it is
technically called an octothorpe followed by six digits. So, to get black, it is six zeros to get purple, you will notice it is
numbered but there is also an alphabetic letter of B in-between the six digits. And lastly, to get this pinkish color, it is again
numbers and letters this time letter F.
The mathematical concept of colors
We are going to do a short math discussion; it is something that is interesting but it is also informative and will help to
understand how hexadecimal works.

Decimal – Base 10
If you go back to middle school decimal system was taught, and let's suppose I want to create a three-digit number which is
1unit, 10units, and 100units.

But the idea is that each place in our regular base 10 which is what the above illustration means base 10 decimal number
system, I have 10 choices for every slot I can do 0 to 9. So, that is base 10 that's what we are used to working with our digits
are 0, 1, 2, 3, 4, 5, 6, 7, 8, 9.

Binary – Base 2
But there are other number systems, so you may have heard of binary before, and that is base 2, and that means we only
have 0 and 1 as our options. So, if I wanted to build a three-digit binary number the largest one I can build is 111 which is
not the same as one hundred and eleven.

Hexadecimal – Base 16
So, hexadecimal is base 16, which means that we have 16 choices and those choices go from 0 to 9, and then rather than
going to 10, 11, 12, 13, 14, 15, hexadecimal instead includes letters. So, we have 0 to 9 and then A to F, the largest
hexadecimal three-digit number would be FFF and the smallest hexadecimal three-digit number would be 000. It is just like
any other number system except that we have 16 choices.

And the reason hexadecimal is used rather than using just decimal to name color, is it can give us a lot more choices while
keeping the names of the color relatively short. Hexadecimal is just taking colors and giving them numeric names, and if we
use base 10, we only have 10 choices per digit. So, we need to use more digits if we use binary and we need to use a ton of
digits to represent colors, it comes with hundreds of thousands of digits.

So, hexadecimal numbers are six digits long, starting with a hash symbol and then one digit two, three, four, five, and six. It
works in such a way that it is not just a random number, there is an actual little bit of a system, so the first two numbers
correspond to how much red is in the color, the next two correspond to how much green, and the last two correspond to how
much blue is in the color.
How color works on CSS
Back to our aboutme.HTML and app.css. We are going to be modifying the app.css file. If you could remember, we have h1,
h4, and li elements. Let’s work with h1 and style it with hexadecimal, all we do is to type color followed by a semi-colon
then a hash symbol then the six digits.

Hexadecimal example
So let's start by defining a red color and remember the first two are red, so our first two-digit, if we want full red, it would be
“ff” because that is the highest number the green and blue can be “00” which is a lower number

Open the file, you will see that all h1 are in red

So, let us go back to the “app.css” file and let play with the h1 by introducing a little bit of green by giving it eight, and you
will see we get a slight orange
RGB works slightly differently, but essentially, if we added up red, green, and blue up so full red, full green, and full blue,
the result color is not like a brown or black like you might expect. It is white and this is actually how light works in the real
world, if you could take two LED lights or three LED lights, a red, green, and blue, and combine them and shine them
together, you would get white light. So, that is how this color works.

Most often than not, you will not be building the color yourself, hence, you don’t need, don't have to be able to identify this
color as some sort of shade of purple or green or whatever it is. What you most often will do is have a color picker
(www.colorpicker.com), the color picker site will be helpful on color mixture
There are all sorts of color pickers, there is some that are on your machine if you have a Mac or PC, you can download one,
some of them are included but we can also just go online and if we want like a dark purple shade, it can be adjusted and also
a variety of purple will be shown and you can decide the shade to select. The hexadecimal number will be included for
selection also

You can just copy the purple hexadecimal color number and use it

Refresh your browser. So, this is most often what you will do, you will have a color picker. Initially, you will pick your
colors, and then you just refer back to them

RGB example
The next color system we are going to discuss is RGB, so RGB works similarly except the syntax is slightly different. In
RGB, there are three channels just like with hexadecimal, there is red, green, and blue.
RGB is in base 10, we have three different channels red, green, and blue. The syntax is the color colon and then the word is
the letters RGB followed by a parenthesis and then the value of our red, the value of our green, and the value of our blue.

And those range from 0 to 255. In this case, we are saying all “h1” are RGB where red is up which is 255, and blue is also
0. And then we get the light green result for h1 as seen above.

So, in the case of “h2” RGB color is set as red is 100, green is 0 and blue is 100 which in return gives us purple as
illustrated above. And lastly in the case of “h3” RGB color is set as red is 11, green is 99 while blue is 150 which preceded
the other colors, and in return, it gives us light blue.

Now, let do a few examples

In our app.css clear all the styling code and let's do a purple with RGB color. So, we just type the word color colon rgb
followed by a parenthesis, and then we need our channels, so the first one if we want a purple or want some red, let's do red
60, 0 green, and then 100 blue
And then save it and refresh your browser, the previous light purple will turn into a dark purple

And if we want black color everything will be turned off to zero, just as we did with the hexadecimal point which will be
“#000000”

So, RGB is very similar to the decimal, the only difference is the syntax, so rather than writing out something like this
#000000 in hexadecimal instead in RGB we have three slots RGB(0,0,0) which goes from 0 to 255

RGBA example
And one other syntax we will be discussing is RGBA. RGBA works just like RGB except there is a small twist which is
there is a fourth channel called "alpha" which is how you can make colors transparent.

RGBA is great if you want to have one color that you are making more or less transparent, it works in such a way that it is
the same syntax except we write RGBA and then we have four channels that we need to fill out, and the first three are just
like before (RGB), they range from 0 to 255 but the last channel on the "alpha" channel ranges from 0.0 to 1.1

So, we are going to be looking at a few examples

Below, we are setting all the first three channels of h1, h2, and h3 to be the same color as far as the RGB channels are
concerned, so 11 red, 99 green, and 150 blue, and then the fourth channel we are changing is the alpha or changing the
transparency.

With the first transparency, there is no effect which we ended up with the first blue. Next, when we set alpha to be point six,
we get this much lighter and more transparent blue. And then lastly, we set it to be point two and we get the last color which
is barely seen

So, let us do another example, which is RGBA and this time, make a green color by giving the color green 200, and a little
bit of blue, let’s say 100, and then we need our alpha to start with 1
As you can see, the color is green

Now, let's change the transparent to 0.4

The green color has faded

In summary, we have built-in colors which most people don't use. We have hexadecimal. We have RGB, and then RGBA
where the A stands for "alpha" or “transparency”.

CHAPTER TEN

CSS CUSTOMIZATION

Background Color
In this chapter, we are going to be covering two new properties "background" which is used to change the color or the
background image of an element, and "border". Let’s start with the background.

HTML
CSS

Here is our result. Notice that we have a gray background on the entire <body>, and then we have a blue background on the
<div> tag which carries the styled element, and inside the <div> will also specifically styled the <p> tag which stands for a
paragraph by adding text color to be white

Browser

Go ahead and try this using the aboutme.HTML that we have been working with “the app.css.”, and make some changes to
the existing file.

HTML

Let’s modify the "my hobbies" which is in the <h4> tag, and give it a background color of orange. And then inside the curly
braces, type background colon followed by RGB parenthesis inside it let make an orange color by making the red 255, a
little green 100, and a little blue 80 and save the file
CSS

And let us refresh our browser, as you can see “my hobbies” which is the <h4> tag background color of orange has been
added into it

Next, give the background which is the HTML body something you see often on a website where the entire body
background is a new color. Apply the style to the body also by typing body curly brace inside it, write background color
colon pink

As you can see from the below illustration, the entire body background color of the webpage which is color pink has been
effective. So, that is the background property being used to change the color of any element
Background Image
You can also use the background property to change the background to be an image, to specify the background but instead of
a color, type, URL followed by a parenthesis in-between the parenthesis is where your image location will be declared. You
can also paste an image link from a website into the parenthesis

Let’s make use of a simple HTML file along with the CSS style for better comprehension

Below should be the outcome, depending on your image, not like the color that is universal in usage, images vary except you
have the exact image been used. Also, add style to your <div> tag and also <p> tag but the major focus is on background
image just in case we didn’t make mention of other parts
Another example of a background image; still making use of our aboutme.HTML file and app.css file. Assuming after
linking an image online and the result of the image spread across the whole webpage

As you can see, the linked image has occupied the whole webpage

To make it the actual size of the image, there is another property that you can set which is background-repeat, and set this is
to be "no-repeat" and save it

Now, we have set the background of the body and it is not repeating, but you will also notice that it is not stretching out to
cover the entire body.
So, if you want it stretched out across the entire screen or the entire body, there is one other property, we can set which is the
background size.

As you can see it now takes up the entire body, Of course, it is not the best image for this because it is a little blurry

But when you are doing a background image usually want to make sure you have something that is either large and high
resolution or something that has a smaller image that can be repeated seamlessly unlike the above-illustrated image. It is not
symmetrical on both axes, so if we repeat it, it is very clear that there is a division in the edges. Okay, so that is a
background and using background color and background image.

Border Styling
The next thing we are going to be discussing is how we get a border on our web page, let go and add borders to all h1. Just
for a reminder, we are still making use of our aboutme.HTML file and app.css file, nothing changes on the aboutme.HTML
file, our changes will only be on the “app.css” file which is our stylesheet

A border in CSS has three different parts, there is width, color, and style. So, let's start by giving a border color to h1 by
typing within the parenthesis of the h1 border-color colon and the chosen color let just go with purple
And if you refresh your browser and don't see anything that looks like a border, that is because currently, your border has no
width

Next, let’s give it a width, “border-width colon” let say 5px, px stand for pixel, it is a name of image measurement extension

Refresh your browser, and you will notice that nothing still happens.
You’re missing the style, you will see that none of this works unless you have all three of them set. So, in the border style,
there are a few different options, you can say a solid, a dash, a dotted border. There are a few others, most of the time what
you see is just solid

So, type border 5pixel purple, to get a border around all the h1
There is another shortcut syntax that you can use to set all three of these elements (width, color, style) there is the equivalent
syntax that is called border colon the width 5px, the style solid, and the color purple, and let’s remove the previous three
lines of the border

You will notice that nothing changes, it is the same outcome (it is identical)

Play around the border a bit by changing the 5px to 2px and changing the solid to dashed then the purple to orange color but
this time use RGB color red 255, green 68, and blue 0.
As seen below, the dashed border has been effected. We have not been seeing this dashed border style on a website back in
the 90s using the dash, usually, all you see is a thin one-pixel or two-pixel solid border

So just to recap on the border, you can set properties individually or you can use the shortcut and syntax and set the width,
the style, and the color all in one line.

Margin on element

Margin allows you to add spacing around the perimeter of your element, a margin can be added to any element such as a
table, img, text, and many more.

Margin has four dimensions which are margin-top, margin-bottom, margin-right, and margin-left. For example, let's style
our h1 with a margin-top
As you can see, the margin-top has taken effect on such a border, the reason for the border is to be able to differentiate the
difference between margin and padding.

Padding on element
Similar to margin, padding allows you to add spacing within the perimeter of your element, a margin can be added to any
element such as a table, img, text, and many more. Let get started

The above-illustrated image is where we stopped, so this will be what we are going to use as a continuation to get a proper
understanding of how padding works. Padding has four dimensions, they are padding-top, padding-bottom, padding-right,
and padding-left. For example, delete the margin-top styling and replace it with h1 padding-top

As you can see, the padding-top starts within, the reason for the border is to be able to differentiate the difference between
margin and padding.
Assignment
Create margin bottom, right and left with <h1> element

Create padding bottom, right and left with <p> element

CHAPTER ELEVEN

CSS SELECTOR

The Basic: Element, Id & Class

In this chapter, we are going to be focusing on three CSS selectors; element, Id, and class. There are also more options for
selecting elements we are going to learn, we will see the different selectors that we can make use of, and build a simple to-
do list together.

Make a new file, save the file as todolist.HTML, and then lay the HTML structure, on the <title> tag name it "todo list"
inside the <body> tag type <h1> element and then insert also "todo list" there, followed by a <ul> and <li> but in each <li>
type some text and a little checkbox.
If you still remember how to do checkbox, it is input type equals checkbox, and then you have your text which is “Purchase
Gold”, then duplicate the <li> and rename it as “Buy Groceries” and the third one as “Get This Guide”

So, if you open the above HTML file in your browser, you are going to see a blank and not styled version of your list item.

The next thing is to connect a stylesheet. To do that, connect the non-existing stylesheet and create the stylesheet. Some
people would call this an error-driven development, where we write something that we know won't work which is the link of
the uncreated stylesheet, and then we make it work afterward. Name it todo.css in-between your <head> tag

Create the “todo.css” file, make sure both documents are saved in the same folder. And just to make sure that it is connected,
do something like body background orange

If you refresh your browser, you will get the orange background as a sign that your stylesheet is properly connected with
your HTML file

Element Selector
Element selector is the type of tags as you can specify <div> or <p> or <body> and then it will select all corresponding
elements in all instances that match
In the above instance, we have two <div> and each <div> has two <p>, so set all div’s to background purple, to get two
purple divs. Likewise, set all paragraphs tag to be color yellow, to get four yellow paragraphs.

Back to our todo list, select the <body>, do the same for all <li> and give them a border of 2px solid red
Id Selector
Next, single out one <li> or one <h1> or one instance of something. For example, we are selecting the third <li> and turning
it yellow by altering the HTML slightly and then using a hook that we include into our HTML tag, in our CSS we refer back
to it and turn it yellow.

The first step is to add a hook which is called Id, and the Id works in such a way that you can add it as an attribute to any
element Id equals, and then in quotes, any name that you want. You can refer to that later by writing hash sign and then the
name of the Id and that will select the one element that matches that Id name

In return below is the outcome.

So back to our “to-do list”, let's apply the same to our “to-do list”. Let's say that we want "get this guide" <li> list item to
look slightly different, what you can type within or inside the opening tag of the <li> at the front and type the name of Id to
be given to it like unique (this can be any name at all).

It is a way to target one individual element and one note about an Id, it can only appear on a page one time, trying to
duplicate it on other tags becomes invalid HTML. So, it is always supposed to be a one time on a page, it is purely used to
fetch a single element out, you can, however, have multiple Id's on a page as long as they don't appear more than once.

let's go with the unique Id and give it a background-color

Go to your CSS file and write unique, start the styling Id with a hashtag, followed by the name of the Id which is linked to
an element, in our case, it is our <li> that has the name "unique".

This informs CSS that you mean the Id, simply write a CSS inside the #unique curly brace inside it, do a background color,
and make it yellow. Save the file.

Refresh your browser, as you can see, only the specified <li> which is the last <li> "get this guide" receive the effect as
declared. As you can see the stated <li> has taken the declared effect of the yellow background
There are a few things I want to point out, the first is that the element code for the border is still working which turns all <li>
and gives them a red border including the Id selector that we applied yellow background into, and then we are adding on top
of that border by including a yellow background only to the last <li> base on the hook that we added and called in Id inside
our HTML <li>

To sum up, an Id as a way to single out an element, you can only use an Id once per page but we can have as many Id as we
want on a page, Id's are great to single out an individual element but oftentimes we want to have multiple elements that look
similar but we don't want all <li> for instance

Class Selector
To style half of the <li> one way and half of them another way, we could use a class to achieve that. Class works like an Id,
except it is called a class and we can apply it to any number of an element on a page. As you can see below, we are applying
a class called the "highlight" to the first paragraph and the third paragraph

And then we refer to it in our CSS with a dot instead of a hash sign. So, again to contrast that from the previous selected Id,
use the "hash sign" to select but in the class selector we use "dot sign", otherwise they work the same way

As you can see, our duplicated class appears effectively in the applied area
Now, let’s apply the same example to our "to-do list" as a way of practicalizing it. Add a class into your HTML, this time,
we are using the first two <li> left to practicalize this by strikethrough, so there will be a lint through the text, so when we
look at "purchase gold" and "buy groceries" there should be a strikethrough going through the text.

Remember that the third <li> won't be included since it has an Id attribute. On the first two <li> add a class and this time,
the class element will be named as "settled", save it

If you refresh the browser and nothing happens, that’s because you don't have any style yet on the first two elements. Go to
CSS and write dot followed by the name of the class which is settled inside curly brace and pass the style inside. Introduce a
new style of colored text-decoration, and text-decoration is a way to add a line through but there are a few things that you
can do, you can add an underline, you can add a wavy underline, line-through, and then overlined which is a line through
except it is placed on the top
Refresh your browser and see the result.

One quick note on the HTML file, since the first two items have been strikethrough, you can also decide to make the
checkbox ticked whenever the page load or the browser refreshes

The line through or strikethrough items have been ticked, the checked effect is not from CSS but it is important just to know
that you can do that.

We have the element selector to select all of a given element all <li>, <div>, <p>, etc. We have the Id selector which will
select the one element with the matching Id and we always need to use a hash sign or symbol. And then lastly, we have the
class selector which is very similar to the Id selector except that we select the class name as many times as we want on a
given page, unlike an Id which is only once.
 CHAPTER TWELVE

INTRODUCTION TO CHROME INSPECTOR

Google Chrome Inspection

In this section, we are going to be highlighting some of the developer tools that Google Chrome gives us to work with
HTML and CSS. For easy understanding, we are going to use our "todo list"

Highlight two things, first, "view page source" just like we did with the HTML, right-click on any page, let us make use of
our “todo list”. Once you right-click on the webpage, multiple options will be shown, select “view page source”

“View page source” will redirect you to the HTML codes as shown below.
We can't change the codes but you can right-click on inspect element

To launch the element inspector, to get a new view. You will learn about all of these soon. For now, we are just starting at
this element's tab. So, what this is, it is actually a nice interactive representation of all of HTML elements, we have our
<doctype>, <HTML>, <head>, <title>, <body>, and so on
You will notice some things if you hover over these elements. For example, hover on h1 from the elements tab it will
highlight the “todo list” which is inside your h1 tag, and also a little box indicating the hovering element which is <h1>
element that was hovered on.

As long as you keep on collapsing the little arrow icon, more embedded elements will be shown

What you should focus on is the CSS style tab below the elements tab, it can be located at the bottom of any angle of the
browser the mean thing is to locate it.
Note: Any area you click on the styles for that selected element, it will be shown to you for inspiration if need be, and
temporary changes can be made if need be as said earlier, this is just to debug.

We can click on any tags or elements for adjustment which will be effective in as much that the page is not refreshed or
reloaded, as you can see, the color of a border was selected which popup multiple colors selections
Don't forget that the changes don’t change the original file at all, this is only in the browser as soon as you refresh this page
or close the window the changes go away.

So, this is useful in two different ways, first is to work on your code or page and test things out and see what happens when
you change any elements, and the other useful thing is looking at someone else code.

In summary, we just want to demonstrate that you can open inspector in google chrome, and you can view HTML and CSS,
and not only can you view it but you can manipulate it. You can interact with it; you can try changing things and you can do
that on your site or you can do that on anyone else site. And so it is useful when you want to replicate somebody's design
where you want to replicate an effect.

CHAPTER THIRTEEN

MORE ADVANCED SELECTORS

In this section, we are going to discuss other ways of selecting elements aside from the three main ones that we have seen
so far. And just to recap those three are the element selector, the class selector, and the Id selector. Element selector will look
like <li>, <div>, <p>, etc. And class will look like .unique, .img, .table, etc. While Id selector will look like #unique, #img,
# table, etc. And whatever we put inside will target an Id or a class or all elements of a type.
In this chapter, we will be focusing on five of them which. To begin, create an HTML file name demo.HTML as shown
below.

Here is the reflection of the above codes. this is some basic HTML where we have <h1> as "selector demo" below it is a
link tag that goes to google followed by a URL with three <li> tags, then we have an <h4> as "popular sites" with another
<ul> with three <li>, and then another <h4> with three <li> and each has a link element, the first one also goes to "Google",
the second one goes to "Facebook" and the last one goes to "Amazon"
Asterisk selector
So, we have a simple hypertext markup and then we have a stylesheet included called selectors.css, in here, fill out your
CSS, and the very first one we are going to discuss is called the asterisk selector, it will select everything on the page. This is
not something you should do often, but it looks like this

And then whatever you do, it will apply to every single element. Let’s make use of border as an example, border 1px solid
light grey
And you can see, every single element on the page, the body, h1, h4, every link, ul, li, all get a border around it. This isn't
something you need to do a lot but you will see it occasionally.

Descendant Selector
The next one is the descendant’s selector and this one you will use and see all the time, the descendant selector takes two or
more tag names or two or more selectors and chains them together.

For example, if we want to select all of the anchor <a> tags that are inside of an <li> only the anchor <a> tag inside of an
<li> not the anchor <a> tag outside of an <li>. We are going to be selecting all the anchor tag that are descendants of an
<li>.

To do that, the syntax looks like <li> space then an anchor <a> tag
This will select everything that is a <a> tag inside of an <li> and you can keep going with this if you had more to also
rewrite the above-illustrated code like the one below. Every anchor tag that is inside of a <li> is also inside of a <ul> which
is what we have in our HTML but that is redundant in our case

And we could also say every anchor tag or everything the class ".hello" inside of a <li> but we don’t have any markup that
matches that

Every anchor tag inside of an <li>, and let just give it a color of red, then save it

As you can see, once you refresh your browser or reload it, the effect will automatically take place, those three anchor tags
are now red while the one outside of <li> is unchanged.
Adjacent selector
The adjacent selector allows you to select elements that come after other elements which are not nested inside like a <li>
nested inside a <ul>, it allows us to select a sibling.

Let’s select all <ul> that come after an <h4> and we mean the same level not indented not inside the <h4> but directly after
just as a sibling on the same level of an <h4>, so that is called the adjacent selector and it looks like this

Without the plus sign, this would be all our <ul> inside a <h4> but with a plus sign, it indicates that we are calling a separate
selector together not nested. Let's see our it works, we are going to be adding a border 4px solid red, and we should see
these, the two <ul> after all the <h4> elements that are adjacent, they come after the <h4> on the same level having a red
border
Attributes selector
The attribute selector is a way to select elements based on any attribute, in our case we are going to do a selection href
attribute, we are going to check it out by turning all the links to Google where href is google.com, and also going to make
them one color but you could also use this to select all images of a particular source or all inputs of a particular type like all
checkboxes or all password field or something similar.

For the syntax, type anchor tag and then square braces, and inside type the attribute that we are looking for as shown in the
illustration below, href equals google.com which will select every anchor tag

Give it a color, let’s give it a background blue

As you can see, the two links that are carrying Google URL has been identified with a yellow background color but the other
two links don't go to Google, they go to Facebook and Amazon so they are unchanged
You will see attribute selector a lot or will have an input type that equals text if you want it to style all text input differently,
or if you want it to style all checkboxes one way because all inputs even though there are so many different inputs color, to
color inputs and file pickers, password, email, submit button, etc. They are all input tags. Simply selecting by input is going
to give you all different types of inputs.

Nth of type
Nth of type take a number like three or five, and then it selects every end of a specific element, so if you want to select every
5th <div>, or every second <li>, or the tenth paragraph on a page, you can use nth of type.
In this case, if you want to select the final <ul> and do something to the final URL and the third one. Let's say you want to
give it a different border or different background, select <ul> colon followed by the nth of type bracket inside the
parenthesis, enter a number like three, then type background, and give it obvious background like light green

Only the third <ul> turned light green

This is useful if you want to select something down the page.

CHAPTER FOURTEEN

SPECIFICITY AND THE CASCADE

In this section, we will be discussing inheritance and specificity.

Inheritance
We have a simple HTML file below that has a single <ul> with four <li> inside, and we are going to write our style in a
<style> tag, we will be working with internal CSS but it is always better to do this in an external stylesheet

So, we are going to style the <ul> and give it a color of purple
And when we do that, you will see that when we refresh the <li> become purple. So, what happened there? You know that
we styled the <ul> and the <li> was indirectly changed and it inherited that color from the parent element

Another example of that is by adding a paragraph above the <ul> that means it is not inside the <ul> tag

The <p> tag turns out to be black which is text default color on a browser
Let's clear all our internal stylesheet codes and type body curly brace color red semicolon

As you can see, everything is now red

So, this is demonstrating the concept of inheritance, where if we set a property on a parent element, it can also affect a child
element. So, if you want it to make all paragraphs <p> and list items <li> red. You don't have to set paragraphs <p> and turn
them red, and then select list item <li> and turn them red. Just select the body, which will take effect on all the elements

So, the next thing that you are going to be shown is what happens if you specify paragraph <p> tag and style it green

If you refresh, you will see of course that the paragraph turned green

Likewise, if you want the <ul> to turn blue and also the <li> inside the <ul> because they inherit from that.
What is happening here is demonstrating the idea of specificity in CSS. As you can see, the blue of <ul> has overridden the
body color of green. So, you have multiple styles that could be impacting this same <li>, it could be red, and which start as
green, and then returning it blue because they’re supposed to be green

If you proceed and inspect one of these elements, you will notice that <ul> is inherited which tells us that the blue color is
“inherited from <ul>”

And if you scroll down a bit, you will see an inheritance from <body> the color is red but it is crossed out which means it is
not being applied at all, and instead, the blue style is being applied

This shows us this red style coming from the <body> tag is attempting to be applied or it is targeting the <ul> element that
we have selected but it is crossed off which means it is not being applied
Specificity
Specificity is this idea in CSS that we can have multiple styles targeting one element.

The <li> is being turned red or it is being targeted by the <body> styling which is red, also being targeted by the <ul>
styling which turns everything in the <ul> to be blue. And so, CSS has to decide which one wins.

And in this case, whatever style is closest to the element or whichever one is more specific and so what that means is that
the <body> is very general, it is everything, and the <ul> is more specific which is going to win out. But this is just a simple
case.

Add in more selectors that are <li> color to be orange

And as you would expect it makes all <li> orange color

And if we highlight one of the orange elements and right-click to inspect it

It has been turned red by the <body> but that is crossed off, it has turned blue by the <ul> selector, and then it turned orange
by the <li> selector and that one wins out because it is the closest element to the text.
These are all simple cases where it is pretty clear which one wins. Let's introduce something on top of the two of the <li>,
let style the first <li> and the last <li> an inline styling by passing a class into it called "highlight"

Style the class in the internal stylesheet, give it a color of green, and save it

Refresh your browser, as you can see that the highlight class wins and it turned purple because of that highlight class.
This is showing us something where a <li> styling is directly targeting all <li> making them orange, and then "class
selector" is also directly targeting a few <li> that have the class attribute of purple, and in the battlefield of overriding
selectors class wins out because a class declaration is closer than element declaration

There are actually very specific rules for how this works and we are going to show it to you in just a second but before that,
we just want to add one more example so let's say we also give one of the class elements an Id element called "special"

We will target that Id element called "special", give it a color of “hot pink” and save it

And then refresh or reload your browser, you will see that Id element wins out
And one more time, if you highlight the pink text and inspect it

You will see that you have a style from the <body> that is not applied, one from the <ul> that is inherited but not applied
Another one from the <li> that is not applied, one from the class that is not applied, and then one from the Id special that is
applied. So, in this case, the Id wins because it is the closest to styling

As mentioned earlier there are very specific rules as to how this works. How is specificity calculated? When CSS sees that
there are 3 or 4 different colors that this <li> could be targeting, how does it know which one to pick, and the way that it
does, it runs the calculation so it assigns a numeric value to each of those selectors.

So, it is going to assign a numeric value to the <ul>, and then to <li>, and then to ".highlight", and then to "#special". And
as we know the Id named "special wins out" is not necessary because of the order of arrangement but because of the
closeness to the <li>
Assignment
In this exercise, you will cover everything that we have discussed as far as CSS selectors, you will not build any sort of
complete cohesive website. This one is more of a traditional exercise with a bunch of problems very short problems. There
is a material link where you can have access to download the HTML and CSS file both the exercise and the solution

https://drive.google.com/drive/folders/1jtAgz8evYtBJirPonn_g-MliBuyji-hl?usp=sharing

Below is a preview of the HTML file, the CSS is connected to it but nothing is styled on it, which is where your assignment
comes in
And below is the preview of the CSS file, it is empty aside from a bunch of comments and these comments give you
instructions for what you need to do.

The first line of text is the most important line “style the HTML elements according to the following instructions, and do
not alter the existing HTML to do this right. Only the CSS should be worked upon.”
 CHAPTER FIFTEEN

TEXT AND FONTS

In this chapter, we are going to focus on fonts in CSS, and having fun picking fonts for a webpage is important. But we are
also going to cover a lot of other properties that are related to fonts and to text which are:

Font family
Font size
Font weight
Line height
Text alignment
Text decoration

And the first thing, we are going to do is to get a simple HTML text that we are going to style. We have a simple font for the
HTML file, let’s add some HTML codes by writing a <h1> so that we can see a header and style it, and then some
paragraphs.

Save the HTML file as “fonts.HTML” while CSS file as “style.css”

And call it a font demo page, then rather than just typing some random words which don't reflect what the English language
looks like on a page, use "lorem ipsum generator", so for those of you who don't know "lorem ipsum generator", it is used to
generate a bunch of random text that is an English word. It doesn't mean anything at all but it at least looks like real words,
so it is a placeholder text

Click on the link below to generate “lorem ipsum generator”s

https://baconipsum.com/

Once you open the above link, below is where you will be brought in to check on the “give me bacon” which in return will
generate the “lorem ipsum generator”
As you can see the “lorem ipsum generator” has been generated, it provided some text that looks like something you would
have on a website
We are going to be making use of the first two paragraph

Here is the preview outcome of the above HTML file

Here is a site that we are going to be styling and the first thing that we want to do is to discuss how we want to assign a font
to anything. And before we can even do that, you need to know which font you have available to you in the browser. There
is no easy answer as to which fonts a computer has available in the browser, and that is because they are different on every
machine.

Font Family
On www.cssfontstack.com

That shows depending on if you are on a Mac or Windows are. Scroll down for more options and percent of the chances
Mac or Windows has on such fonts.

If you look at some of the fonts like "Book Antiqua" that indicates “Windows” has a higher percentage.
And "Geneva" indicates “Mac” has a higher percentage.

Mainly, it is just to know the chances of the fonts you are going to use on their visibility on your operating system. Windows
is highly recommended due to the higher level of its usage. These fonts are pretty limited, so we are going to see how we
include custom fonts later in another section.

But for now, let's just pick one out of the fonts, let go with "ariel". So, to use that, we are going to assign that to our
font.HTML paragraph text

Select a paragraph and type "font-family" as "Arial" just like that in our linked stylesheet which is “style.css”
If you refresh, you will see that the "Arial" font has been effective

One quick note, you can also put quotes around it which is valid, sometimes you will have to do that if you have a font that
has a number at the beginning

There are other fonts you can play around with, so let's try "Georgia"

Type <h1> "Georgia", save the file

Reload the file on the browser

And you can see it changes the font, we are going to see how to use a lot more fonts and how to include custom ones. For
now, we are just going to focus on the built-in system default fonts which are a little bit limited, and even then, there is no
guarantee as you can see there is not any that 100 percent of machines have.

Font Size
The next property we are going to be focusing on is "font-size". Font size controls how big the font is or how small the font
is of a given element. Let’s select and change our font size to our <h1> by making it a lot bigger. The first way to change
your font style is called pixel or px and we have seen it a little bit before in the border section.

Give it something huge like 200px and save it

Go back to the browser, you can see a gigantic font of 200pixel

You can go over the font size and click on it, to make a temporary change to the font on the browser, you can change it to
100px, 60px, 85px, or whatever you want, you also can play around in the browser, and the change reflected immediately
which help you to know just in case you are not sure about the font size to use.

As mentioned earlier, this is not the only way of picking a font size or unit, there is another popular unit called em is a
relative font-size 1em is equivalent to 16px

For example, if I put a <span> tag in-between a text. This is probably our first time seeing it, and what the span does is just a
way to group text without actually making a difference visually. So, it is just a way of making an element around the word
"amet spare ribs turkey"

If you refresh it, nothing changes at all

So, it is a way to highlight or to single out some line and then do something to it, and we are just going to make it bigger. We
use an em or we use the em units and if we wanted to make this double the size of the font of the text around it.

Let’s now style the span and then we just say font-size 2.0em which is going to be double the font size of the enclosing
element of the parent element which is the paragraph <p> tag. Once we refresh our browser, the <span> element is now
double the font size of the paragraph element

But you didn't explicitly tell it how many pixels to make it, it just knew how big the paragraph element was, and then it
doubled it.

For example, let's increase the font size of the paragraph text into 40px
As you can see, the increment in the paragraph element will also result in the increment of the span element, since we make
use of em the increment will not be the same as the px unit

One question about "em" that comes up a lot is, what is the initial value of "em", what is the top-level because we can't just
keep inheriting from a parent and there has to be some source of truth, there has to be like, at the very top-level element that
has a font size, and that changes depending on the browser which is a little bit frustrating but it is usually about 16pixel so
that is no guarantee but it is usually around 16px.

So, what most people would do is set a font size on the body at the very beginning. So, something like this body font size

Font Weight
In this section, we are going to continue using the fonts.HTML and style.css as examples. The font-weight of a font refers to
how bold or lightweight the text is. Basically how thick the actual font is or how thick the lines are. For example, select all
paragraphs and style them with a font-weight to be bold which is one of the options, save the file

And then we are going to view the file on the browser by refreshing or reloading the page. And you will see that the
paragraph becomes bolded
Likewise, you can go back to your stylesheet and change it back to normal or you could just delete it.

Note that certain fonts will let you use a numeric value as well and that ranges from 100 to 800, and there is no number
between 100 and 800, it is every hundred like 100, 200, 300 to 800. So that depends on the font itself if you have that which
range from lightest, heavy, heaviest, etc. We are going to see how to use that very soon when we are going to be discussing
Google fonts

Line Height
Line height does exactly what it sounds like it does, it controls the height of a given line, so if we go back to our browser, we
take a look at the current paragraph positioning to see the effect when we add our line height.

And if you have ever had to change line spacing in something like Microsoft Word before you need to set it to be 1.5, 2.0, or
more. With line spacing, you can do the same thing with CSS. So, let's select the paragraph tag which is the <p> element
followed by a curly brace and then line-height with a number of the height positioning.

And this will multiply the current line height which is always determined by the font itself We are going to have a larger
space between lines

Reload see that you are double spaced. Usually, we don't do much with line height aside from maybe 1.5 or 2
Text Alignment
The next one is the text alignment, just like Microsoft Word or any word processor. Text aligns control how the text of a
given element is aligned, if it is to the left, to the right, or the center.

By default, all text start from the left-hand side, if you use text-align, you can say text-align to be right, and it will all be
moved to the right-hand side. And if we do text-align to be center, it will all be moved to the center.

Let's make use of our <h1> to centralize it, select the h1 followed by a curly brace and then text-align center, save it

As you can see the <h1> element is now inline to the center

And we can do the same thing to paragraph by selecting p followed by a curly brace and then text-align to be center, save it
Once you refresh or reload it, you will notice the positioning of the paragraph text is now at the center rather than left

Text Decoration
Text decoration is used to give a text an underline effect, a strikethrough, or an overline. To give all paragraphs an underline
effect, type p followed by a curly brace, inside it, type text-decoration colon then writes underlined and save it.

Refresh or reload your browser page that carries the font.HTML file. As you can see, we get a lot of underlined text

And we can do the same thing for h1 and but we will set a line through for it
We get the line through. So, that is the basics of font and text-based properties in CSS

Using Google Fonts

Google has about 100+ fonts online for free that you can include in your application with just a few clicks.

Open your browser, make sure you have an internet connection, use the below link for quick access to google
fonts

https://fonts.google.com/

You will see various fonts as shown below

Sort them by popularity, alphabetical, most recent, trending, etc.

Pick two fonts here that are very distinct so don't judge based on which one to pick, just for the understanding,
you can go back and select your preferred choice, click on “Raleway”

You will be brought here; you are going to be seeing various “raleway font”, make use of “regular 400 italics”

On the right-hand side, you will see “select this style”, click on it
At your top right-hand side, you will notice a little added dot which indicates that “raleway font” has been added
to your collection

Next, search for one more font like “Indie flower”, click on it

“Indie flower” only has one style, select the font which is “regular 400”

On the right-hand side click on the “select this style”

It will be added to the collection list at the right top corner of your browser, click on the icon

A little popup box will appear at the right-hand side of your browser, immediately you click the little icon beside
“Download family”

Below the fonts review is the link that will be embedded or inserted inside the head tag
Copy and paste it into your HTML file, as you can see the links have been added into the head tag below our
external linked stylesheet.

You will also notice the link tag is almost the same type of tag, the only difference between the stylesheet and the
one is the "href" so rather than styles.css, it is the URL link of google, and if you look closely at the Google
URL, you will notice the two fonts that were added.

The next step is to use it, but before then, check out the present look of your fonts.HTML file from our browser to
recognize the effect of the newly added fonts when it takes place
 Start by changing the <h1> element, by making the h1 use the indie flower font. Change the h1 font family from
"Georgia" to "Indie flower"

Refresh or reload your browser to see the effect, and just in case your browser is not giving you the font or still
maintaining the previous font, recheck the process or make sure you are connected to the internet for better
synchronization.

As you can see the newly font effect has taken place

Do the same thing to our paragraph element by making use of “raleway font”. We have to replace our previous
paragraph font family which is “Arial” to “raleway”, save it
 Refresh or reload your browser to see the effect. As you can see our paragraph font is now “raleway font”

Google Fonts is a great resource, and if you have your customized fonts, to make use of them, use the link tag to make the
browser get the location rather than linking to one of the google fonts, it will only link to your font but, it works the same
way except rather than including a google font, you can also include your custom font.

Luckily, Google fonts have all sorts of great fonts, you can make an awesome website, and plenty of people use Google
fonts exclusively even for professional websites.

Conclusion
Without technology, life won’t have been an adventure, one of the irresistible effects of technology has been the web which
makes the earth a global village in reaching out to people without cost. Beyond using the web, it is very important to know
the nitty-gritty of how the web is formed. This guide was written to help you understand the concept behind a website.

We are glad that you have made the right choice by picking up this guide and finally went through the whole process of
understanding the fundamental concept of a website through this guide. Now you are qualified as a web designer, your
feedback is very important to us to keep encouraging us in adding more value to life.
 INDEX

<
<address> tag, 105
<bdo> tag, 108
<del> tag, 95
<i> and <em> tags, 88
<mark> tag, 90
<strong> tag, 87
<sup> tag, 93
<tt> tag, 93
<u> tag, 91

A
abbreviation tag, 104
Adjacent selector, 294
alt attribute, 68, 118, 177
Animated Images, 122
Apple Safari, etc., 20
Application layer., 16
Asterisk selector, 291
Attributes selector, 295

B
Background Color, 263
Background colors, 112
Background Image, 266
Baidu Internet Explorer, 21
Bing, 21
Block-level element, 73
blockquote, 73, 102, 103
body tag, 56, 61, 62, 98, 112, 161
Bookmarks, 79
Bootstrap, 231
Border color, 114
Border Styling, 269
br tag, 63, 73
browser, 14, 19, 20, 21, 22, 24, 25, 26, 27, 29, 33, 54, 55, 56, 57, 59, 60, 69, 79, 87, 89, 95, 96, 100, 102, 104, 108, 110, 120, 121, 122, 127, 128, 130, 152, 153,
154, 155, 158, 160, 162, 169, 172, 173, 177, 179, 180, 183, 185, 187, 192, 193, 198, 199, 204, 213, 219, 220, 222, 226, 227, 228, 231, 232, 238, 245, 247,
249, 257, 259, 264, 269, 270, 276, 277, 281, 283, 284, 288, 289, 294, 299, 305, 306, 314, 316, 317, 318, 319, 320, 321, 322, 324, 325, 328, 330, 331

C
Canvas Graphics, 215
Cascade, 298
Cascading Style Sheet, 54
charset attribute, 165, 185
Checkboxes, 194
cite tag, 106, 107
Class Selector, 281
code navigation, 43
Colspan, 132
Commenting Script Code, 110
Commenting style sheets, 111
computer, 16, 18, 20, 32, 153, 173, 179, 222, 227, 314
computers, 14, 18
Content, 50, 57
CSS, 12, 22, 24, 27, 31, 32, 33, 47, 48, 54, 70, 85, 86, 96, 97, 98, 99, 113, 119, 125, 126, 130, 141, 142, 143, 144, 146, 148, 149, 150, 152, 153, 154, 156, 158,
163, 164, 193, 196, 219, 221, 230, 231, 232, 233, 235, 236, 237, 238, 239, 240, 241, 242, 244, 245, 248, 251, 254, 263, 264, 266, 269, 275, 279, 280, 282,
283, 284, 285, 288, 289, 291, 298, 302, 303, 308, 309, 310, 311, 322, 325
CSS Customization, 263

D
Datalist Element, 206
Descendant Selector, 293
diacritical mark, 182
Doctype tag, 58
Domain names, 22
DuckDuckGo, 21

E
Element Selector, 277
Elements & tags, 29
Embed element, 228
extension, 27, 40, 46, 47, 48, 49, 115, 144, 153, 222, 232, 233, 248, 269
Extensions, 42, 47, 48

F
fieldset, 202, 205, 206
font, 45, 54, 70, 71, 87, 88, 89, 93, 96, 99, 100, 222, 231, 237, 241, 311, 314, 315, 316, 317, 318, 319, 320, 321, 322, 324, 325, 327, 328, 330, 331
font customization, 45
Font Family, 99, 314
Font Size, 317
Font Weight, 321
Fonts, 311, 325, 331
font-size, 100, 317, 318, 319

G
Get method, 200
glyph, 182
Google, 12, 20, 21, 22, 24, 26, 51, 174, 223, 285, 291, 295, 296, 321, 325, 329, 331, 332
Google Chrome, 20, 21, 24, 26, 51, 285
Graphics, 129, 215, 218

H
Head tag, 59
Headers, 50
HEX color, 116
href attribute, 65, 295
HTML, 12, 13, 14, 22, 24, 26, 27, 28, 29, 30, 31, 32, 33, 39, 40, 43, 44, 46, 47, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 61, 62, 65, 67, 68, 69, 71, 72, 73, 74, 75, 76,
77, 78, 79, 80, 81, 85, 86, 87, 88, 89, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 106,107, 108, 109, 110, 111, 112, 113, 118, 120, 122, 123, 125, 126, 127,
128, 130, 132, 133, 134, 135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 149, 150, 151, 152, 156, 158, 160, 161, 162, 163, 165, 166, 167, 169,
170, 172, 173, 174, 175, 176, 177, 178, 180, 181, 182, 183, 184, 185, 187, 188, 189, 190, 191, 193, 194, 195, 196, 198, 199, 200, 201, 202, 203, 205, 206,
207, 208, 209, 210, 212, 213, 215, 216, 217, 218, 219, 220, 222, 223, 224, 225, 226, 227, 228, 231, 232, 233, 234, 235, 236, 237, 238, 241, 242, 244, 248,
249, 254, 263, 264, 265, 266, 267, 269, 275, 276, 277, 279, 280, 281, 282, 284, 285, 286, 289, 290, 291, 293, 298, 308, 309, 310, 311, 313, 315, 321, 324,
329, 330
HTML Media, 222

I
Id Selector, 279
Image maps, 123
Inheritance, 298
Inline element, 140
Inline elements, 75
IntelliSense, 42, 48
Internal Stylesheet, 232, 234
internet, 12, 14, 15, 16, 17, 18, 19, 20, 22, 23, 27, 187, 188, 189, 190, 325, 330
Internet layer, 16
IP address, 12, 22, 23, 188
IP v4, 23, 24
IP v6, 23, 24

J
JavaScript, 22, 27, 48, 50, 85, 110, 146, 149, 150, 151, 152, 156, 165, 166, 193, 196, 215, 216, 220
JavaScript Extensions, 48
JSON, 33
JSX/React, 33

L
Less, 33, 181
Line Height, 322
Links, 76, 79, 80
 M
Margin, 272, 273
Microsoft, 20, 21, 24, 25, 26, 52, 129, 224, 227, 322, 323
Microsoft Edge, 20, 21, 52
Min and Max Attribute, 210
Mozilla Firefox, 20, 26
Multiline Comments, 110
Multimedia, 222

N
navigation bar, 44, 139
Nested List, 138
Netscape, 24, 25, 54, 55
Network interface, 16
Nth of type, 297

O
Opera, 20, 21, 25, 26, 52, 223, 225

P
p tag, 31, 57, 58, 62, 89
Picture Element, 127
placeholder attributes, 212
Plug-ins, 227

R
Radio buttons, 192
Read-only Attribute, 208
Required Attribute, 213
RGB colors, 114
RGBA colors, 115
Rowspan, 133
Run and debug, 41

S
SCSS, 33
Single line comment, 109
Source control, 41
Specificity, 298, 303
src attribute, 67, 68, 69, 118, 122, 151
Strike tag, 92
style attribute, 70, 74, 81, 96, 113, 125, 142, 156, 215, 232
Style Beautification, 251
stylesheet, 111, 164, 231, 232, 233, 234, 235, 236, 237, 249, 269, 276, 277, 291, 298, 300, 305, 315, 321, 329
subscript, 94, 95, 96
superscript, 93, 94, 96
syntax, 27, 28, 31, 32, 48, 52, 56, 76, 77, 102, 104, 108, 109, 110, 149, 156, 161, 172, 177, 178, 180, 188, 195, 218, 237, 241, 244, 258, 260, 271, 272, 293, 295

T
Target attribute, 76, 79, 197
Text, 31, 32, 97, 101, 113, 191, 192, 311, 323, 324
Text color, 97, 113
text editor, 32, 45, 218, 231
Text Editor, 32
Text field, 191, 192
Text-align, 101
textarea, 202, 203, 204
Title elements, 60
Title tag, 60
Transport layer., 16

U
URL encoding, 189

V
visual studio code, 32, 33, 39, 41, 44, 46, 47, 48, 242
Visual studio code themes, 48

W
web crumbs, 44
website, 12, 20, 27, 28, 29, 33, 50, 51, 52, 53, 65, 77, 81, 85, 96, 97, 112, 118, 139, 141, 152, 155, 158, 162, 166, 167, 172, 173, 174, 223, 231, 232, 239, 265,
266, 272, 308, 312, 332

Y
Yahoo, 21