Yashaswi Academy for Skills

About the Tutorial

HTML stands for Hyper Text Markup Language, which is the most widely used language on
Web to develop web pages.

HTML was created by Berners-Lee in late 1991 but "HTML 2.0" was the first standard
HTML specification which was published in 1995. HTML 4.01 was a major version of
HTML and it was published in late 1999. Though HTML 4.01 version is widely used but
currently we are having HTML-5 version which is an extension to HTML 4.01, and this
version was published in 2012.

Audience

This tutorial is designed for the aspiring Web Designers and Developers with a need to
understand the HTML in enough detail along with its simple overview, and practical
examples. This tutorial will give you enough ingredients to start with HTML from where you
can take yourself at higher level of expertise.

Prerequisites

Before proceeding with this tutorial you should have a basic working knowledge with

Windows or Linux operating system, additionally you must be familiar with:

 Experience with any text editor like notepad, notepad++, or Edit plus etc.

 How to create directories and files on your computer.

 How to navigate through different directories.

 How to type content in a file and save them on a computer.

 Understanding about images in different formats like JPEG, PNG format.

 Table of Contents

About the Tutorial

.............................................................................................................................................
i

Audience
.............................................................................................................................................
i

Prerequisites
.............................................................................................................................................
i

Table of Contents
............................................................................................................................................
ii

No. Topics Hrs

1 Learn the Basics of HTML 2 Hrs Theory + 3 Hrs Practical= 5 Hrs

2 Understand HTML document structure 2 Hrs Theory + 3 Hrs Practical= 5 Hrs

3 Get to know CSS selectors 2 Hrs Theory + 3 Hrs Practical= 5 Hrs

4 Put a CSS stylesheet together 2 Hrs Theory + 3 Hrs Practical= 5 Hrs

5 Get Bootstrap 2 Hrs Theory + 3 Hrs Practical= 5 Hrs

6 Pick a design 2 Hrs Theory + 3 Hrs Practical= 5 Hrs

7 Customize your website with HTML and CSS 2 Hrs Theory + 3 Hrs Practical= 5 Hrs

8 Add content and images 2 Hrs Theory + 3 Hrs Practical= 5 Hrs

9 Fine-tune colors and fonts 2 Hrs Theory + 3 Hrs Practical= 5 Hrs

10 Create additional pages 2 Hrs Theory + 3 Hrs Practical= 5 Hrs

Total Hrs 50

Web Designing

 It is a collection of linked documents on the network of computers all over the

world.
 All the computers in the Web can communicate with each other using HTTP.
How does the WWW work?

 Web pages are files, stored on computers called web servers.

 Computers reading the web pages are called web clients.
 Web clients view the pages with a program called a web browser.
 Popular browsers are Internet Explorer and Mozilla Firefox.

How does a Browser Fetch a Web Page?

 A browser fetches a page from a web server by a request.

 A request is a standard HTTP request containing a page address.
 An address may look like this: http://www.microsoft.com/page.htm.

How does a Browser Display a Web Page?

 All web pages contain instructions for display

 The browser displays the page by reading these instructions.
 The most common display instructions are called HTML tags.
 HTML tags look like this <p>This is a Paragraph</p>.

What is a Web Server?

 The collection of all your web pages is called your web site.
 To let others view your work, you must publish your web site.
 To publish your work, you web site must be copied to a web server.
 Most common is to use an Internet Service Provider (ISP) to host web site.

What is an Internet Service Provider?

 An ISP provides Internet services.

 A common Internet service is web hosting.
 Web hosting means storing your web site on a public server.
 Web hosting normally includes email services.
 Web hosting often includes domain name registration.

What is Web Hosting?

Renting a server from an Internet Service Provider (ISP) is a common option. Here are some
advantages:
Connection Speed
Most ISP providers have very fast connections to the Internet, like full T3 fiber-optic 45Mps
connections equivalent.

Powerful Hardware

Service providers often have many powerful web servers that can be shared by several
companies. You can also expect them to have an effective load balancing, and necessary
backup servers.

Security and Stability

Internet Service Providers are specialists on web hosting. Expect their servers to have more
than 99% up time, the latest software patches, and the best virus protection.

How to select an ISP to host a web site (Things to Consider)

24-hour support

Make sure your Internet service provider offers 24-hours support. Toll-free phone could be
vital if you don't want to pay for long distance calls.

Daily Backup

Make sure your service provider runs a secure daily backup routine, otherwise you may lose
some valuable data.

Traffic Volume

Study the provider's traffic volume restrictions. Make sure that you don't have to pay a
fortune for unexpected high traffic if your web site becomes popular.

Bandwidth or Content Restrictions

Study the provider's bandwidth and content restrictions. If you plan to publish pictures or
broadcast video or sound, make sure that you can.

Email Capabilities

Make sure your provider fully supports the email capabilities you need.
Database Access

Make sure your provider fully supports the database access you need if you plan to use
databases from your site

What is a Domain Name?

A domain name is a unique name for a web site, like microsoft.com and w3schools.com.

Domain names must be registered. When domain names are registered they are added to a
large domain name register, and information about your site - including your internet IP
address - is stored on a DNS server.

DNS stands for Domain Name System. A DNS server is responsible for informing all other
computers on the Internet about your domain name and your site address.

How to Registering a Domain?

Domains can be registered from domain name registration companies such as

http://www.dotdnr.com.

Domain Name Registration provides registration services for .com .net .org .biz .info .us
.nu .ws .cc and .tv domains.

Newer domain extensions such as .biz .info and .us have more choices available.

Choosing Your Domain

Choosing a domain is a major step for any individual or organization.

The shorter your domain, the easier it is to reach and the less are the chance the user will
make a typographical error while typing it.

Meaningful

Clear - Clarity is important when selecting a domain name.

Exposure - Search engines index your site and rank it for relevance against terms people
search for online. In order to maximize your sites exposure, consider including a relevant
search term in your domain.
An HTML file can be created using any text editor. NotePad is such an editor and is part of
the typical installation on Windows computers. Here is a simple example based on favorite or
best Web sites for some special hobby or task. Before doing this exercise, you should select a
topic and find two or three Web sites for the topic. You also need to download an image from
each site. Images can be copied from a Web site to your own machine by positioning the
cursor over the image and then clicking on the right mouse button. You will get a dialogue
box with one option, Save Image As. You then get a chance to rename the image and also
locate it in a specific folder.

1. Start NotePad. This can usually be done by clicking on the Start button, then

on Accessories and then on NotePad.
2. Immediately put in what can be called the basic template by typing the following into
the editor. You skip lines by hitting the enter key. Make sure it looks exactly like this
and that you haven’t forgotten one of the < or > symbols.
<html>
<head> <title> </title>
</head>
<body>
</body>
</html>
3. Your example is going to require more than one line in the body portion of the file,
but you can always insert new lines. Type in a title between the <title> and
the </title> tags. It can be My First HTML File.
4. We can make the body of this example begin with a large heading. (The temptation to
use the term title is strong, but we will not, because this would confuse the html
document title with the title inside the text.) Directly under the <body> tag, type in

<h1> The Best Web Sites for ...</h1>

Replace the three dots after the word, for, by the topic that you are using for this
assignment.

5. At this point, you should compose a general paragraph on your topic and then a
paragraph about each of the sites you have found. Enter the text below the heading.
Here is a short example:

If you are online and want or need to find out what is happening in the world, you can
go to any of many news sites.
The site I use the most is the online New York Times.

One disadvantage of this site is that to go beyond the first page, you need to subscribe.
It is free, but you need to choose a logon name and a password. However, you can
arrange to save the information on the computer that you typically use. If you do this,
you do not need to be concerned with logging on. The New York Times site is
changed a few times during the day. It contains audio and video.

 
  
6. The example we have given above will work as an HTML file. However, it can be
improved in several ways. First of all, even though the text as written appears to have
a paragraph break after the first sentence and another one before ‘One disadvantage..’,
the browser will display this as one continuous piece of text. For the most part,
browsers ignore spacing and line breaks.
7. To put in a break, use the <p> tag in your example to break up the text into
paragraphs. In terms of content, describe the type of owner of each of your examples
and the business purposes, if any, for your site.
8. We want hyperlinks in our example. To do this, we put the phrase ‘Online New York
Times’ between an <a> tag and an </a> tag:

<a href="http://www.nytimes.com"> Online New York Times </a>

Insert <a> tags for each of your sites. What you put in-between the <a> and </a> tags
is up to you. But you need to put in something! It can be the official name or
something descriptive.

9. Now decide where you want to put your images. Use the img tag. Note: you can insert
the same image more than once.
10. You are now ready to try out your HTML file. Click on File in NotePad and
then Save As. Now give your file a name and also change the extension
from .txt to .htm. Let us say you named it test1.htm
11. Minimize NotePad (by clicking on the underscore in the upper right corner of the
window). Open up Netscape or whatever browser you use. Note: you can do this even
in situations where you usually dial-in to an Internet Service Provider (such as Pace)
first. You may get a message from the browser that it has failed to locate the home
 page. If you are doing this in a computer classroom or in the open labs, the computer
is [almost] always online.

Click on OK to close that dialogue box. Now (assuming you are using Netscape),
click on File and then Open Page and Browse. You are opening a local file instead of
going to a Web site. Use the operating system’s procedure for finding the file you just
saved. Click on it and then click on Open. Your HTML file should be displayed in the
browser. Notice any problems and fix them in NotePad. When you get back into the
browser, you will have to click on ReLoad to get the newest version. If reload does
not work, hold down the shift key while clicking on ReLoad. (In Internet Explorer,
use the control key.)
 

12. One other change you may make to your file is to adjust the size of the images. You
can do this by adding parameters to the img tag. For example,

<img src="picture.gif" align = left width = 100>

will align the image to the left. It will also change the width of the image to 100 pixels
and make the height whatever size that will preserve the proportions of the original
image. You can use both width and height parameters to set both values.

13. Lastly, return to the browser and reload your local file. You can now check to see that
your links work correctly.
 1. Learn the Basics of HTML

Introduction
HTML Basics

In HTML coding there are various tags that we must consider and include while starting to
code in HTML. These tags help in organization and basic formatting of elements in our script
or web pages. These step by step procedures will guide you through the process of writing
HTML.

What is HTML?

 HTML stands for Hyper Text Markup Language

 HTML is the standard markup language for creating Web pages
 HTML describes the structure of a Web page
 HTML consists of a series of elements
 HTML elements tell the browser how to display the content
 HTML elements label pieces of content such as "this is a heading", "this is a
paragraph", "this is a link", etc.

Learn HTML Using Notepad or Text Edit

Web pages can be created and modified by using professional HTML editors.

However, for learning HTML we recommend a simple text editor like Notepad (PC) or
TextEdit (Mac).

Below mentioned are the basic HTML tags which divides the whole document into various
parts like head, body etc.
  Every HTML document begins with a HTML document tag. Although this is not
mandatory but it is a good convention to start the document with this below mentioned
tag:
<! DOCTYPE html>
 <html> : Every HTML code must be enclosed between basic HTML tags. It begins
with <html> and ends with </html> tag.
 <head> : The head tag comes next which contains all the header information of the
web page or document like the title of the page and other miscellaneous information.
These information’s are enclosed within head tag which opens with <head> and ends
with </head>. The contents will of this tag will be explained in the later sections of
course.
 <title> : We can mention the title of a web page using the <title> tag. This is a header
information and hence mentioned within the header tags. The tag begins
with <title> and ends with </title>
 <body> : Next step is the most important of all the tags we have learned so far. The
body tag contains the actual body of the page which will be visible to all the users. This
opens with <body> and ends with </body>. Every content enclosed within this tag will
be shown on the web page be it writings or images or audios or videos or even links.
We will see later in the section how using various tags we may insert mentioned
contents into our web pages.

1)Example

<html>
<head>
<!-- Information about the page -->
 <!--This is the comment tag-->
 <title>Wel come to Yashaswi</title>
</head>
<body>
 <!--Contents of the webpage-->
</body>
</html>

This code won’t display anything. It just shows the basic pattern of how to write the HTML
code and will name the title of the page as Wel Come Yashaswi. <! – – comment here – – >
is the comment tag in HTML and it doesn’t reads the line present inside this tag.
 2.HTML Headings
These tags help us to give headings to the content of a webpage. These tags are mainly
written inside the body tag. HTML provides us with six heading tags from <h1> to <h6>.
Every tag displays the heading in a different style and font size.

Example

<html>
<head>
    <title>Wel Come Yashaswi</title>
</head>
<body>
    <h1> Wel Come Yashaswi </h1>
    <h2> Wel Come Yashaswi </h2>
    <h3> Wel Come Yashaswi </h3>
    <h4> Wel Come Yashaswi </h4>
    <h5> Wel Come Yashaswi </h5>
    <h6> Wel Come Yashaswi </h6>
</body>
</html>

Output-

Wel Come Yashaswi

Wel Come Yashaswi
Wel Come Yashaswi
Wel Come Yashaswi

Wel Come Yashaswi

 3.HTML Paragraph

These tags help us to write paragraph statements in a webpage. They start with the <p> tag
and ends with <p>. Here the <br> tag is used to break line and acts as a carriage
return. <br> is an empty tag.

Example:

<html>
<head>
    <title>Yashaswi</title>
</head>
<body>
    <h1>Wel come to Yashaswi</h1>
    <p>
    A Computer Science portal <br> 
    A Computer Science portal <br>
    A Computer Science portal <br>
    </p>
</body>
</html>

Output -

Wel come to Yashaswi

A Computer Science portal

A Computer Science portal
A Computer Science portal
 4.HTML Horizontal Lines

The <hr> tag is used to break the page into various parts, creating horizontal margins with
help of a horizontal line running from left to right hand side of the page. This is also an empty
tag and doesn’t take any additional statements.

Example:

<html>
<head>
    <title>Yashaswi</title>
</head>
<body>
    <h1>Welcome to Yashaswi</h1>
    <p>
    A Computer Science portal <br> 
    A Computer Science portal <br>
    A Computer Science portal <br>
    </p>
    <hr>
    <p>
    A Computer Science portal <br> 
    A Computer Science portal <br>
    A Computer Science portal <br>
    </p>
    <hr>
</body>
</html>

Output:

Welcome to Yashaswi

A Computer Science portal

A Computer Science portal
A Computer Science portal
A Computer Science portal
A Computer Science portal
A Computer Science portal

5. HTML Elements

An HTML element is defined by a starting tag. If the element contains other content, it ends
with a closing tag, where the element name is preceded by a forward slash as shown below
with few tags:

Start Tag Content End Tag

<p> This is paragraph content. </p>

<h1> This is heading content. </h1>

<div> This is division content. </div>

<br />

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

All HTML documents consist of nested HTML elements.

The following example contains four HTML elements (<html>, <body>, <h1> and <p>):

Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

Output:

My First Heading

My first paragraph.

Example Explained

The <html> element is the root element and it defines the whole HTML document.

It has a start tag <html> and an end tag </html>.

Then, inside the <html> element there is a <body> element:

6.HTML Attributes
 All HTML elements can have attributes
 Attributes provide additional information about elements
 Attributes are always specified in the start tag
 Attributes usually come in name/value pairs like: name="value"

1) The href Attribute

The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link
goes to:

Example
<!DOCTYPE html>

<html>

<body>

<h2>The href Attribute</h2>

<p>HTML links are defined with the a tag. The link address is specified in the href attribute:</p>

<a href="https://www.yashaswigroup.in/ ">Visit YASHASWI</a>

</body>

</html>

Output

The href Attribute

HTML links are defined with the a tag. The link address is specified in the href
attribute:

Visit YASHASWI

2)The src Attribute

If we want to insert an image into a webpage, then we need to use the <img> tag and the src
attribute. We will need to specify the address of the image as the attribute’s value inside the
double quote.

Example

<!DOCTYPE html>

<html>

<body>

<h2>The src Attribute</h2>

<p>HTML images are defined with the img tag, and the filename of the image source is
specified in the src attribute:</p>

<img src="img_girl.jpg" width="500" height="600">

</body>

</html>

Output:

3) alt Attribute : As the name goes this is an alternate tag that is used to show or display
something if the primary attribute i.e., the <img> tag, fails to display the value assigned to it.
This can also be used to describe the image to a developer who is actually sitting at the
coding end.

Example

<html>

<head>

<title>alt Attribute</title>

</head>

<body>
<!--If the image is not found or the img field 

 is left blank the alt value gets displayed-->

<img src="https://media.geeksforgeeks.org/wp-content/cdn-
uploads/Geek_logi_-low_res.png" alt="The Logo"><br>

<img src="" alt="Since the src value is blank,the alt value is displayed">

</body>

</html>

Output

3)The width and height Attribute : This attribute is used to adjust the width and height of
an image.

Example:

<html>

<head>

<title>Width and Height</title>

</head>
<body>

<img src="https://media.geeksforgeeks.org/wp-content/cdn-
uploads/Geek_logi_-low_res.png" width="300px" height="100px" >

</body>

</html>

Output:

7.HTML | Paragraph
<p> tag:
The <p> tag in HTML defines a paragraph. These have both opening and closing tag. So
anything mentioned within <p> and </p> is treated as a paragraph. Most browsers read a line
as a paragraph even if we don’t use the closing tag i.e, </p>, but this may raise unexpected
results. So, it is both a good convention and we must use the closing tag.
Syntax:
<p> Content </p>
Example

<!DOCTYPE html>
<html>
<head>
    <title>Paragraph</title>
</head>
<body>
    <p>Wel come to Yashaswi.</p>
    <p>It contains well written, well thought articles.</p>
</body>
</html>

Output

Wel come to Yashaswi.

It contains well written, well thought articles.

 As already mentioned, the<p>tag automatically adds space before and after any
paragraph, which is basically margins added by the browser.
 If a user adds multiple spaces, the browser reduces them it to a single space.
 If a user adds multiple lines, the browser reduces them to a single line.

Example

<!DOCTYPE html>
<html>
<head>
    <title>Display_Paragraph</title>
</head>
<body>
    <p>
    This paragraph has multiple
    lines. But HTML reduces them
    to a single line, omitting
    the carriage return we have used.
    </p>
      
    <p>
    This paragraph      has multiple
    spaces.     But HTML reduces   them
    all to a     single space,   omitting
    the extra   spaces and line    we have used.
    </p>
</body>
</html>

Output

This paragraph has multiple lines. But HTML reduces them to a single line, omitting the carriage return we have
used.

This paragraph has multiple spaces. But HTML reduces them all to a single space, omitting the extra spaces and
line we have used.

<br> tag:
There is a way to let the HTML know where does the browser need to change the lines by the
use of <br> tag. These tags do not have any closing tag. So, just a single opening tag will
change the line.
Syntax:
<br>
Example

<!DOCTYPE html>
<html>
<head>
    <title>Display_Paragraph</title>
</head>
<body>
    <p>
    This paragraph has multiple<br>lines. 
    But HTML reduces them<br>to a single
    line, omitting<br>the carriage return
    we have used.
    </p>
</body>
</html>

Output:

This paragraph has multiple

lines. But HTML reduces them
to a single line, omitting
the carriage return we have used

8. HTML Styles

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

Example

<!DOCTYPE html>
<html>

<body>

<p>I am normal</p>

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

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

<p style="font-size:50px;">I am big</p>

</body>

</html>

Output:

I am normal

I am red

I am blue

I am big

9.HTML Text Formatting

HTML provides us with the ability for formatting text just like we do it in MS Word or any
text editing software. In this article, we would go through few such options.
1. Making text Bold or Strong: We can make the text bold using the <b> tag. The tag uses
both opening and closing tag. The text that needs to be made bold must be
within <b> and </b> tag.
We can also use the <strong> tag to make the text strong, with added semantic importance. It
also opens with <strong> and ends with </strong> tag.
 Example:

<!DOCTYPE html>
<html>
<head>
    <title>Bold</title>
</head>
<body>
    <!--Normal text-->
    <p>Wel come all</p>
    <!--Text in Bold-->
    <p><b>Wel come all</b></p>
    <!--Text in Strong-->    
    <p><strong> Wel come all</strong></p>
</body>
</html>

Output
Wel come all

Wel come all

Wel come all

2.Making text Italic or emphasize: The <i> tag is used to italicise the text. It opens with <i>

and ends with </i> tag.
The <em> tag is used to emphasize the text, with added semantic importance. It opens with
<em> and ends with </em> tag.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Italic</title>
</head>
<body>
    <!--Normal text-->
    <p>Wel come all</p>
    <!--Text in Italics-->
    <p><i> Wel come all </i></p>
    <!--Text in Emphasize-->    
    <p><em> Wel come all </em></p>
</body>
</html>

Output:

Wel come all

Wel come all

Wel come all

3.Highlighting a text: It is also possible to highlight a text in HTML using the <mark> tag.

It has a opening tag <mark> and a closing tag </mark>.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Highlight</title>
</head>
<body>
    <!--Text in Normal-->
    <p>Wel come all</p>
    <!--Text in Highlight-->    
    <p><mark>Wel come all</mark></p>
</body>
</html>

Output

Wel come all

Wel come all

4.Making a text Subscript or Superscript: The <sup> element is used to superscript a text

and <sub> element is used to subscript a text. They both have opening and a closing tag.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Superscript and Subscript</title>
</head>
<body>
    <!--Text in Normal-->
    <p>Hello GeeksforGeeks</p>
    <!--Text in Superscript-->    
    <p>Hello ^{GeeksforGeeks}</p>
    <!--Text in Subcript-->    
    <p>Hello _{GeeksforGeeks}</p>
</body>
</html>

Output

Hello GeeksforGeeks
 Hello GeeksforGeeks

Hello GeeksforGeeks

5.Making text smaller: The <small> element is used to make the text smaller. The text that
needs to be displayed smaller should be written inside <small> and </small> tag.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Small</title>
</head>
<body>
    <!--Text in Normal-->
    <p>Wel come all</p>
    <!--Text in small-->    
    <p><small>Wel come all</small></p>
</body>
</html>

Output

Wel come all

Wel come all

6.Striking through the text: The <del> element is used to strike through the text marking
the part as deleted. It also has an opening and a closing tag.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Delete</title>
</head>
<body>
<!--Text in Normal-->
 <p>Hello GeeksforGeeks</p>
 <!--Text in Delete-->    
 <p><del>Hello GeeksforGeeks</del></p>
</body>
</html>

Output:
7.Adding a text: The <ins> element is used to underline a text marking the part as inserted
or added. It also has an opening and a closing tag.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Inserting</title>
</head>
<body>
 <!--Text in Normal-->
 <p>Hello GeeksforGeeks</p>
 <!--Text in Insert-->    
 <p><ins>Hello GeeksforGeeks</ins></p>
</body>
</html>

Output:
 10. HTML Quotations

The Quotation elements in HTML are used to insert quoted texts in a web page, that is,
portion of texts different from the normal texts in the web page.
Below are some of the most used quotation elements of HTML:
1) <q> element:
The <q> element is used to set a set of text inside the quotation marks. It has both opening
and closing tags.
Example:
<!DOCTYPE html>
<html>
<head>
    <title>Quotations</title>
</head>
<body>
    <h3>Wel Come</h3>
    <p>The quick brown fox jumps over the lazy dog<br></p>
    <!--Inside quotes-->
    <p><q>The quick brown fox jumps over the lazy dog</q></p>
</body>
</html>

Output

Wel Come

The quick brown fox jumps over the lazy dog

“The quick brown fox jumps over the lazy dog”

2.<blockquote> element:
The <blockquote> element is also used for quotations in a different way. Instead of putting
the text in quotes, it changes the alignment to make it unique from others. It has both opening
and closing tags.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Blockquote</title>
</head>
<body>
    <h3>Wel come</h3>
    <p>The quick brown fox jumps over the lazy dog<br></p>
    <!--Inside blockquotes-->
    <p><blockquote>The quick brown fox jumps 
over the lazy dog</blockquote></p>
</body>
</html>
Output
Wel come

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

3. <address> element:
Using the <address> element, we can define an address in a webpage and the text put inside
the address tag will be emphasized. It has both opening and closing tags.

Example:

<!DOCTYPE html>

<html>

<head>

<title>Address</title>

</head>

<body>

<h3>Welcome</h3>

<address>

<p>Address:<br>

710-B, Advant Navis Business Park,<br>

Sector-142, Noida Uttar Pradesh – 201305</p>

</address>

</body>

</html>

Output
Welcome

Address:
710-B, Advant Navis Business Park,
Sector-142, Noida Uttar Pradesh – 201305
 11. HTML Tables
A table is an arrangement of data in rows and columns, or possibly in a more complex
structure. Tables are widely used in communication, research, and data analysis.
 Tables are useful for various tasks such as presenting text information and numerical
data.
 Tables can be used to compare two or more items in tabular form layout.
 Tables are used to create databases.

1)Defining Tables in HTML

An HTML table is defined with the “table” tag. Each table row is defined with the “tr” tag. A
table header is defined with the “th” tag. By default, table headings are bold and centered. A
table data/cell is defined with the “td” tag.

Example:

<!DOCTYPE html>
<html>
  
<body>
  
    <table style="width:100%">
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Priya</td>
            <td>Sharma</td>
            <td>24</td>
        </tr>
        <tr>
            <td>Arun</td>
            <td>Singh</td>
            <td>32</td>
        </tr>
        <tr>
            <td>Sam</td>
            <td>Watson</td>
            <td>41</td>
        </tr>
    </table>
  
</body>
  
</html>

Output
2)Adding a border to a HTML Table: A border is set using the CSS border
property. If you do not specify a border for the table, it will be displayed without
borders.

Example:

<!DOCTYPE html>
<html>
  
<head>
    <style>
        table, th, td {
            border: 1px solid black;
        }
    </style>
</head>
  
<body>
    <table style="width:100%">
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Priya</td>
            <td>Sharma</td>
            <td>24</td>
        </tr>
        <tr>
            <td>Arun</td>
            <td>Singh</td>
            <td>32</td>
        </tr>
        <tr>
            <td>Sam</td>
            <td>Watson</td>
            <td>41</td>
        </tr>
    </table>
</body>
  
</html>

Output
3)Adding Collapsed Borders in a HTML Table: For borders to collapse into one
border, add the CSS border-collapse property.

Example:

<!DOCTYPE html>
<html>
  
<head>
    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
        }
    </style>
</head>
  
<body>
  
    <table style="width:100%">
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Priya</td>
            <td>Sharma</td>
            <td>24</td>
        </tr>
        <tr>
            <td>Arun</td>
            <td>Singh</td>
            <td>32</td>
        </tr>
        <tr>
            <td>Sam</td>
            <td>Watson</td>
            <td>41</td>
        </tr>
    </table>
</body>
  
</html>
Output

4) Adding Border Spacing in a HTML Table: Border spacing specifies the space

between the cells. To set the border spacing for a table, we must use the CSS
border-spacing property.

Example:

<html>
  
<head>
    <style>
        table, th, td {
            border: 1px solid black;
        }
          
        table {
            border-spacing: 5px;
        }
    </style>
</head>
  
<body>
  
    <table style="width:100%">
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Priya</td>
            <td>Sharma</td>
            <td>24</td>
        </tr>
        <tr>
            <td>Arun</td>
            <td>Singh</td>
            <td>32</td>
        </tr>
        <tr>
            <td>Sam</td>
            <td>Watson</td>
            <td>41</td>
        </tr>
    </table>
</body>
  
</html>

Output

12.HTML Lists
What is a list?
A list is a record of short pieces of information, such as people’s names, usually
written or printed with a single thing on each line and ordered in a way that makes a
particular thing easy to find.

For example:
 A shopping list
 To-do list
Lists in HTML

HTML offers three ways for specifying lists of information. All lists must contain one or more
list
elements.

The types of lists that can be used in HTML are :

 ul : An unordered list. This will list items using plain bullets.
 ol : An ordered list. This will use different schemes of numbers to list your items.
 dl : A definition list. This arranges your items in the same way as they are arranged
in a dictionary.
The Unordered HTML List

An unordered list starts with the “ul” tag. Each list item starts with the “li” tag.The list items
are marked with bullets i.e small black circles by default.

Example:
<!DOCTYPE html>
<html>
<body>
  
<h2>Grocery list</h2>
  
<ul>
  <li>Bread</li>
  <li>Eggs</li>
  <li>Milk</li>
  <li>Coffee</li>
</ul>  
  
</body>
</html>

Output

The HTML Unordered List has various List Item Markers:-

1. Disc : Sets the list item marker to a bullet i.e default.

Example:

<!DOCTYPE html>
<html>
<body>
  
<h2>Unordered List with Disc Bullets</h2>
<h2>Grocery List</h2>
  
<ul style="list-style-type:disc">
  <li>Bread</li>
  <li>Eggs</li>
  <li>Milk</li>
  <li>Coffee</li>
</ul>  
  
</body>
</html>

Output :

2. Circle : Sets the list item marker to a circle.

<!DOCTYPE html>
<html>
<body>
  
<h2>Unordered List with Circle Bullets</h2>
  
<h2>Grocery list</h2>
  
<ul style="list-style-type:circle">
  <li>Bread</li>
  <li>Eggs</li>
  <li>Milk</li>
  <li>Coffee</li>
</ul>  
</body>
</html>

Output

The HTML Ordered List

An ordered list starts with the “ol” tag. Each list item starts with the “li” tag. The list
items are marked with numbers by default.
Example:

<!DOCTYPE html>
<html>
<body>
  
<h2>Grocery List</h2>
  
<ol>
  <li>Bread</li>
  <li>Eggs</li>
  <li>Milk</li>
  <li>Coffee</li>
</ol>  
  
</body>
</html>

Output
 13.HTML Images

With HTML you can display images in a document.

The Image Tag and the Src Attribute
In HTML, images are defined with the <img> tag.
The <img> tag is empty, which means that it contains attributes only and it has
no closing tag.
To display an image on a page, you need to use the src attribute. Src stands for
"source". The value of the src attribute is the URL of the image you want to display
on your page.
The syntax of defining an image:
<img src="url">
The URL points to the location where the image is stored. An image named
"boat.gif" located in the directory "images" on "www.w3schools.com" has the URL:
http://www.w3schools.com/images/boat.gif.
The browser puts the image where the image tag occurs in the document. If you
put an image tag between two paragraphs, the browser shows the first paragraph,
then the image, and then the second paragraph.
The Alt Attribute
The alt attribute is used to define an "alternate text" for an image. The value of
the alt attribute is an author-defined text:
<img src="boat.gif" alt="Big Boat">
The "alt" attribute tells the reader what he or she is missing on a page if the
browser can't load images. The browser will then display the alternate text instead
of the image. It is a good practice to include the "alt" attribute for each image on a
page, to improve the display and usefulness of your document for people who
have text-only browsers.
Image Tags
Tag Description
<img> Defines an image
<map> Defines an image map
<area> Defines an area inside an image map

Images can improve the design and the appearance of a web page.

Example-

<!DOCTYPE html>

<html>

<body>

<h2>HTML Image</h2>

<img src="Desert.jpg" alt="" width="500" height="333">

</body>

</html>

Output
 14.HTML Tables
HTML tables allow web developers to arrange data into rows and columns.

Define an HTML Table

The <table> tag defines an HTML table.

Each table row is defined with a <tr> tag. Each table header is defined with a <th> tag. Each
table data/cell is defined with a <td> tag.

By default, the text in <th> elements are bold and centered.

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

Example

<!DOCTYPE html>

<html>
<head>

<style>

table {

font-family: arial, sans-serif;

border-collapse: collapse;

width: 100%;

td, th {

border: 1px solid #dddddd;

text-align: left;

padding: 8px;

tr:nth-child(even) {

background-color: #dddddd;

</style>

</head>

<body>

Output

HTML Table

Company Contact Country

Alfreds Futterkiste Maria Anders Germany

Centro comercial Moctezuma Francisco Chang Mexico

 Ernst Handel Roland Mendel Austria

Island Trading Helen Bennett UK

Laughing Bacchus Winecellars Yoshi Tannamuri Canada

Magazzini Alimentari Riuniti Giovanni Rovelli Italy

Example- HTML Table - Add a Border

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

border: 1px solid black;

</style>

</head>

<body>

<h2>Table With Border</h2>

<p>Use the CSS border property to add a border to the table.</p>

<table style="width:100%">

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Age</th>

</tr>
 <tr>

<td>Jill</td>

<td>Smith</td>

<td>50</td>

</tr>

<tr>

<td>Eve</td>

<td>Jackson</td>

<td>94</td>

</tr>

<tr>

<td>John</td>

<td>Doe</td>

<td>80</td>

</tr>

</table>

</body>

</html>

Output

Table With Border

Use the CSS border property to add a border to the table.

Firstname Lastname Age

Jill Smith 50
Eve Jackson 94
John Doe 80
 15.HTML The id Attribute
The HTML id attribute is used to specify a unique id for an HTML element.

You cannot have more than one element with the same id in an HTML document.

Using The id Attribute

The id attribute specifies a unique id for an HTML element. The value of the id attribute must
be unique within the 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 the specific id.

The syntax for id is: write a hash character (#) character, followed by an id name. Then,
define the CSS properties within curly braces {}.

In the following example we have an <h1> element that points to the id name "myHeader".
This <h1> element will be styled according to the #myHeader style definition in the head
section:

Example

<!DOCTYPE html>

<html>

<head>

<style>

#myHeader {

background-color: lightblue;

color: black;

padding: 40px;

text-align: center;

</style>

</head>

<body>

<h2>The id Attribute</h2>

<p>Use CSS to style an element with the id "myHeader":</p>

<h1 id="myHeader">My Header</h1>

</body>
</html>

Output

The id Attribute
Use CSS to style an element with the id "myHeader":

My Header

16. HTML Layout Elements and Techniques

HTML Layout Elements

HTML has several semantic elements that define the different parts of a web page:
  <header> - Defines a header for a document or a section
 <nav> - Defines a set of navigation links
 <section> - Defines a section in a document
 <article> - Defines an independent, self-contained content
 <aside> - Defines content aside from the content (like a sidebar)
 <footer> - Defines a footer for a document or a section
 <details> - Defines additional details that the user can open and close on
demand
 <summary> - Defines a heading for the <details> element

HTML Layout Techniques

There are four different techniques to create multicolumn layouts. Each technique has its pros
and cons:

 CSS framework
 CSS float property
 CSS flexbox
 CSS grid

1.CSS Introduction
What is CSS?

 CSS stands for Cascading Style Sheets
  CSS describes how HTML elements are to be displayed on screen, paper, or in other
media
 CSS saves a lot of work. It can control the layout of multiple web pages all at once
 External style sheets are stored in CSS files.

CSS Syntax

A CSS rule-set consists of a selector and a declaration block:

The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by semicolons.

Each declaration includes a CSS property name and a value, separated by a colon.

Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded
by curly braces.

Example

In this example all <p> elements will be center-aligned, with a red text color:

<!DOCTYPE html>

<html>

<head>

<style>

p{

color: red;

text-align: center;

</style>

</head>

<body>

<p>Hello World!</p>

<p>These paragraphs are styled with CSS.</p>

</body>

</html>

Output

Hello World!

These paragraphs are styled with CSS.

Example Explained

 p is a selector in CSS (it points to the HTML element you want to style: <p>).
 color is a property, and red is the property value
 text-align is a property, and center is the property value.

2. The CSS class Selector

The class selector selects HTML elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the class name.

Example

In this example all HTML elements with class="center" will be red and center-aligned: 

<!DOCTYPE html>

<html>

<head>

<style>

.center {

text-align: center;

color: red;

</style>

</head>

<body>

<h1 class="center">Red and center-aligned heading</h1>

<p class="center">Red and center-aligned paragraph.</p>

</body>

</html>

Output:

Red and center-aligned heading

Red and center-aligned paragraph.

i)The CSS Universal Selector

The universal selector (*) selects all HTML elements on the page.

Example

The CSS rule below will affect every HTML element on the page:

<!DOCTYPE html>

<html>

<head>

<style>

*{

text-align: center;

color: blue;

</style>

</head>

<body>

<h1>Hello world!</h1>

<p>Every element on the page will be affected by the style.</p>

<p id="para1">Me too!</p>

<p>And me!</p>
 </body>

</html>

Output

Hello world!

Every element on the page will be affected by the style.

Me too!

And me!

ii) The CSS Grouping Selector

The grouping selector selects all the HTML elements with the same style definitions.

Look at the following CSS code (the h1, h2, and p elements have the same style definitions):

Example

<!DOCTYPE html>

<html>

<head>

<style>

h1, h2, p {

text-align: center;

color: red;

</style>

</head>

<body>

<h1>Hello World!</h1>

<h2>Smaller heading!</h2>

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

</body>

</html>
Output

Hello World!

Smaller heading!
This is a paragraph.

3.CSS Comments
Comments are used to explain the code, and may help when you edit the source code at a
later date.

Comments are ignored by browsers.

A CSS comment is placed inside the <style> element, and starts with /* and ends with */:

Example
<!DOCTYPE html>

<html>

<head>

<style>

/* This is a single-line comment */

p{

color: red;

</style>

</head>

<body>

<p>Hello World!</p>

<p>This paragraph is styled with CSS.</p>

<p>CSS comments are not shown in the output.</p>

</body>

</html>
Output

Hello World!

This paragraph is styled with CSS.

CSS comments are not shown in the output.

4.CSS Colors

Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA
values.

CSS Color Names

In CSS, a color can be specified by using a color name:

Tomato

Orange

DodgerBlue

MediumSeaGreen

Gray

SlateBlue

Violet
Example
<!DOCTYPE html>

<html>

<body>

<h1 style="background-color:Tomato;">Tomato</h1>

<h1 style="background-color:Orange;">Orange</h1>

<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>

<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>

<h1 style="background-color:Gray;">Gray</h1>

<h1 style="background-color:SlateBlue;">SlateBlue</h1>

<h1 style="background-color:Violet;">Violet</h1>

<h1 style="background-color:LightGray;">LightGray</h1>

</body>

</html>

5.CSS Text Color

You can set the color of text:

Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.

Example

<!DOCTYPE html>

<html>

<body>
<h3 style="color:Tomato;">Hello World</h3>

<p style="color:DodgerBlue;">Lorem ipsum dolor sit amet, consectetuer

adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat.</p>

<p style="color:MediumSeaGreen;">Ut wisi enim ad minim veniam, quis

nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat.</p>

</body>

</html>

Output:

Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.

6.CSS Border Color

You can set the color of borders:

Example
<!DOCTYPE html>

<html>

<body>

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

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

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

</body>

</html>

Output:

Hello World
Hello World
Hello World

7.CSS Backgrounds

The background-color property specifies the background color of an element.

Example

The background color of a page is set like this:

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-color: lightblue;

</style>

</head>

<body>

<h1>Hello World!</h1>

<p>This page has a light blue background color!</p>

</body>

</html>

CSS background-image

The background-image property specifies an image to use as the background of an element.

By default, the image is repeated so it covers the entire element.

Example:

<!DOCTYPE html>
<html>

<head>

<style>

body {

background-image: url("Desert.jpg");

</style>

</head>

<body>

<h1>Hello World!</h1>

<p>This page has an image as the background!</p>

</body>

</html>

8.CSS Borders
CSS Border Style

The border-style property specifies what kind of border to display.

The following values are allowed:

 dotted - Defines a dotted border

 dashed - Defines a dashed border
 solid - Defines a solid border
 double - Defines a double border
 groove - Defines a 3D grooved border. The effect depends on the border-color value
 ridge - Defines a 3D ridged border. The effect depends on the border-color value
 inset - Defines a 3D inset border. The effect depends on the border-color value
 outset - Defines a 3D outset border. The effect depends on the border-color value
 none - Defines no border
 hidden - Defines a hidden border

The border-style property can have from one to four values (for the top border, right border,
bottom border, and the left border).

Example

<!DOCTYPE html>
<html>

<head>

<style>

p.dotted {border-style: dotted;}

p.dashed {border-style: dashed;}

p.solid {border-style: solid;}

p.double {border-style: double;}

p.groove {border-style: groove;}

p.ridge {border-style: ridge;}

p.inset {border-style: inset;}

p.outset {border-style: outset;}

p.none {border-style: none;}

p.hidden {border-style: hidden;}

p.mix {border-style: dotted dashed solid double;}

</style>

</head>

<body>

<h2>The border-style Property</h2>

<p>This property specifies what kind of border to display:</p>

<p class="dotted">A dotted border.</p>

<p class="dashed">A dashed border.</p>

<p class="solid">A solid border.</p>

<p class="double">A double border.</p>

<p class="groove">A groove border.</p>

<p class="ridge">A ridge border.</p>

<p class="inset">An inset border.</p>

<p class="outset">An outset border.</p>

<p class="none">No border.</p>

<p class="hidden">A hidden border.</p>

<p class="mix">A mixed border.</p>

</body>

</html>

Output

The border-style Property

This property specifies what kind of border to display:

A dotted border.

A dashed border.

A solid border.

A double border.

A groove border.

A ridge border.

An inset border.

An outset border.

No border.

A hidden border.

A mixed border.
 9.CSS Margins
The CSS margin properties are used to create space around elements, outside of any defined
borders.

With CSS, you have full control over the margins. There are properties for setting the margin
for each side of an element (top, right, bottom, and left).

Margin - Individual Sides

CSS has properties for specifying the margin for each side of an element:

 margin-top
 margin-right
 margin-bottom
 margin-left

All the margin properties can have the following values:

 auto - the browser calculates the margin

 length - specifies a margin in px, pt, cm, etc.
 % - specifies a margin in % of the width of the containing element
 inherit - specifies that the margin should be inherited from the parent element

Tip: Negative values are allowed.

Example

<!DOCTYPE html>

<html>

<head>

<style>

div {

border: 1px solid black;

margin-top: 100px;
 margin-bottom: 100px;

margin-right: 150px;

margin-left: 80px;

background-color: lightblue;

</style>

</head>

<body>

<h2>Using individual margin properties</h2>

<div>This div element has a top margin of 100px, a right margin of 150px, a bottom margin
of 100px, and a left margin of 80px.</div>

</body>

</html>

CSS Outline
An outline is a line that is drawn around elements, OUTSIDE the borders, to make the element
"stand out".

CSS Outline Style

The outline-style property specifies the style of the outline, and can have one of the following
values:

 dotted - Defines a dotted outline

 dashed - Defines a dashed outline
 solid - Defines a solid outline
 double - Defines a double outline
 groove - Defines a 3D grooved outline
 ridge - Defines a 3D ridged outline
 inset - Defines a 3D inset outline
 outset - Defines a 3D outset outline
 none - Defines no outline
 hidden - Defines a hidden outline

The following example shows the different outline-style values:

Example
<!DOCTYPE html>
<html>

<head>

<style>

p {outline-color:red;}

p.dotted {outline-style: dotted;}

p.dashed {outline-style: dashed;}

p.solid {outline-style: solid;}

p.double {outline-style: double;}

p.groove {outline-style: groove;}

p.ridge {outline-style: ridge;}

p.inset {outline-style: inset;}

p.outset {outline-style: outset;}

</style>

</head>

<body>

<h2>The outline-style Property</h2>

<p class="dotted">A dotted outline</p>

<p class="dashed">A dashed outline</p>

<p class="solid">A solid outline</p>

<p class="double">A double outline</p>

<p class="groove">A groove outline. The effect depends on the outline-color value.</p>

<p class="ridge">A ridge outline. The effect depends on the outline-color value.</p>

<p class="inset">An inset outline. The effect depends on the outline-color value.</p>

<p class="outset">An outset outline. The effect depends on the outline-color value.</p>

</body>

</html>

Output
 CSS Text

Text Color

The color property is used to set the color of the text. The color is specified by:

 a color name - like "red"

 a HEX value - like "#ff0000"
 an RGB value - like "rgb(255,0,0)"

Look at CSS Color Values for a complete list of possible color values.

The default text color for a page is defined in the body selector.

Example
<!DOCTYPE html>

<html>

<head>

<style>

body {

color: blue;
}

h1 {

color: green;

</style>

</head>

<body>

<h1>This is heading 1</h1>

<p>This is an ordinary paragraph. Notice that this text is blue. The default text color for a
page is defined in the body selector.</p>

<p>Another paragraph.</p>

</body>

</html>

Output

This is heading 1

This is an ordinary paragraph. Notice that this text is blue. The default text color
for a page is defined in the body selector.

Another paragraph.
 CSS Icons
How To Add Icons

The simplest way to add an icon to your HTML page, is with an icon library, such as Font
Awesome.

Add the name of the specified icon class to any inline HTML element (like <i> or <span>).

All the icons in the icon libraries below, are scalable vectors that can be customized with CSS
(size, color, shadow, etc.)

Font Awesome Icons

To use the Font Awesome icons, go to fontawesome.com, sign in, and get a code to add in
the <head> section of your HTML page:

<script src="https://kit.fontawesome.com/yourcode.js"></script>

Read more about how to get started with Font Awesome in our Font Awesome 5 tutorial.

Note: No downloading or installation is required!

Example

<!DOCTYPE html>

<html>

<head>

<title>Font Awesome Icons</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<script src="https://kit.fontawesome.com/a076d05399.js"></script>

<!--Get your own code at fontawesome.com-->

</head>

<body>
<p>Some Font Awesome icons:</p>

<i class="fas fa-cloud"></i>

<i class="fas fa-heart"></i>

<i class="fas fa-car"></i>

<i class="fas fa-file"></i>

<i class="fas fa-bars"></i>

<p>Styled Font Awesome icons (size and color):</p>

<i class="fas fa-cloud" style="font-size:24px;"></i>

<i class="fas fa-cloud" style="font-size:36px;"></i>

<i class="fas fa-cloud" style="font-size:48px;color:red;"></i>

<i class="fas fa-cloud" style="font-size:60px;color:lightblue;"></i>

</body>

</html>

Output

CSS Links

With CSS, links can be styled in different ways.

Text Link   Text Link   Link Button  Link Button

Styling Links
Links can be styled with any CSS property (e.g. color, font-family, background, etc.).

In addition, links can be styled differently depending on what state they are

in.

The four links states are:

 a:link - a normal, unvisited link

 a:visited - a link the user has visited
 a:hover - a link when the user mouses over it
 a:active - a link the moment it is clicked

Example-

<!DOCTYPE html>

<html>

<head>

<style>

/* unvisited link */

a:link {

color: red;

/* visited link */

a:visited {

color: green;

/* mouse over link */

a:hover {
 color: hotpink;

/* selected link */

a:active {

color: blue;

</style>

</head>

<body>

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>

<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in
order to be effective.</p>

<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be
effective.</p>

</body>

</html>

Output

This is a link

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order
to be effective.

Note: a:active MUST come after a:hover in the CSS definition in order to be

effective.
 Bootstrap Basics
What is Bootstrap?

 Bootstrap is a free front-end framework for faster and easier web development
 Bootstrap includes HTML and CSS based design templates for typography, forms,
buttons, tables, navigation, modals, image carousels and many other, as well as
optional JavaScript plugins
 Bootstrap also gives you the ability to easily create responsive designs.

Bootstrap Grid System

Bootstrap's grid system allows up to 12 columns across the page.

If you do not want to use all 12 columns individually, you can group the columns together to
create wider columns:

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1

 span 4  span 4  span 4

span 4 span 8

span 6 span 6

span 12

Grid Classes

The Bootstrap grid system has four classes:

  xs (for phones - screens less than 768px wide)
 sm (for tablets - screens equal to or greater than 768px wide)
 md (for small laptops - screens equal to or greater than 992px wide)
 lg (for laptops and desktops - screens equal to or greater than 1200px wide)

The classes above can be combined to create more dynamic and flexible

Bootstrap Text/Typography
Bootstrap's Default Settings
Bootstrap's global default font-size is 14px, with a line-height of 1.428.

This is applied to the <body> element and all paragraphs (<p>).

In addition, all <p> elements have a bottom margin that equals half their

computed line-height (10px by default).

Bootstrap vs. Browser Defaults

In this chapter, we will look at some HTML elements that will be styled a little
bit differently by Bootstrap than browser defaults.

<h1> - <h6>
By default, Bootstrap will style the HTML headings (<h1> to <h6>) in the
following way:

Example
<!DOCTYPE html>

<html lang="en">

<head>

<title>Bootstrap Example</title>
 <meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

<h1>h1 Bootstrap heading (36px)</h1>

<h2>h2 Bootstrap heading (30px)</h2>

<h3>h3 Bootstrap heading (24px)</h3>

<h4>h4 Bootstrap heading (18px)</h4>

<h5>h5 Bootstrap heading (14px)</h5>

<h6>h6 Bootstrap heading (12px)</h6>

</div>

</body>

</html>

Output

h1 Bootstrap heading (36px)

h2 Bootstrap heading (30px)
h3 Bootstrap heading (24px)
h4 Bootstrap heading (18px)
h5 Bootstrap heading (14px)
h6 Bootstrap heading (12px)

Bootstrap Tables
Bootstrap Basic Table

A basic Bootstrap table has a light padding and only horizontal dividers.

The .table class adds basic styling to a table:

Example
<!DOCTYPE html>

<html lang="en">

<head>

<title>Bootstrap Example</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

</head>
<body>

<div class="container">

<h2>Basic Table</h2>

<p>The .table class adds basic styling (light padding and only horizontal dividers) to a
table:</p>

<table class="table">

<thead>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Email</th>

</tr>

</thead>

<tbody>

<tr>

<td>John</td>

<td>Doe</td>

<td>[email protected]</td>

</tr>

<tr>

<td>Mary</td>

<td>Moe</td>

<td>[email protected]</td>

</tr>

<tr>
 <td>July</td>

<td>Dooley</td>

<td>[email protected]</td>

</tr>

</tbody>

</table>

</div>

</body>

</html>

Output

Basic Table
The .table class adds basic styling (light padding and only horizontal dividers) to a table:

Firstname Lastname Email

John Doe [email protected]

Mary Moe [email protected]

July Dooley [email protected]

Bootstrap Alerts

Alerts
Bootstrap provides an easy way to create predefined alert messages:

×Success! This alert box indicates a successful or positive action.

×Info! This alert box indicates a neutral informative change or action.

×Warning! This alert box indicates a warning that might need attention.

×Danger! This alert box indicates a dangerous or potentially negative

action.

Alerts are created with the .alert class, followed by one of the four

contextual classes .alert-success, .alert-info, .alert-warning or .alert-
danger:

Example

<!DOCTYPE html>

<html lang="en">

<head>

<title>Bootstrap Example</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></sc
ript>

</head>

<body>

<div class="container">

<h2>Alerts</h2>

<div class="alert alert-success">

<strong>Success!</strong> This alert box could indicate a successful or

positive action.

</div>

<div class="alert alert-info">

 <strong>Info!</strong> This alert box could indicate a neutral informative
change or action.

</div>

<div class="alert alert-warning">

<strong>Warning!</strong> This alert box could indicate a warning that

might need attention.

</div>

<div class="alert alert-danger">

<strong>Danger!</strong> This alert box could indicate a dangerous or

potentially negative action.

</div>

</div>

</body>

</html>

Output

Alerts
Success! This alert box could indicate a successful or positive action.

Info! This alert box could indicate a neutral informative change or action.

Warning! This alert box could indicate a warning that might need attention.

Danger! This alert box could indicate a dangerous or potentially negative action.

 Bootstrap Buttons

Button Styles
Bootstrap provides different styles of buttons:

Basic Default Primary Success Info Warning Danger Link

To achieve the button styles above, Bootstrap has the following classes:

 .btn
 .btn-default
 .btn-primary
 .btn-success
 .btn-info
 .btn-warning
 .btn-danger
 .btn-link

The following example shows the code for the different button styles:

Example
<!DOCTYPE html>

<html lang="en">

<head>

<title>Bootstrap Example</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

<h2>Button Styles</h2>

<button type="button" class="btn">Basic</button>

<button type="button" class="btn btn-default">Default</button>

<button type="button" class="btn btn-primary">Primary</button>

<button type="button" class="btn btn-success">Success</button>

<button type="button" class="btn btn-info">Info</button>

<button type="button" class="btn btn-warning">Warning</button>

<button type="button" class="btn btn-danger">Danger</button>

<button type="button" class="btn btn-link">Link</button>

</div>

</body>

</html>

Output
 Bootstrap Glyphicons

Glyphicons
Bootstrap provides 260 glyphicons from the Glyphicons Halflings set.

Glyphicons can be used in text, buttons, toolbars, navigation, forms, etc.

Here are some examples of glyphicons:

Envelope glyphicon: 

Print glyphicon: 
Search glyphicon: 

Download glyphicon:

Example

<!DOCTYPE html>

<html lang="en">

<head>

<title>Bootstrap Example</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></sc
ript>

</head>

<body>

<div class="container">

<h2>Glyphicon Examples</h2>

<p>Envelope icon: <span class="glyphicon glyphicon-

envelope"></span></p>

<p>Envelope icon as a link:

<a href="#"><span class="glyphicon glyphicon-envelope"></span></a>

</p>

<p>Search icon: <span class="glyphicon glyphicon-search"></span></p>

<p>Search icon on a button:

<button type="button" class="btn btn-default">

 <span class="glyphicon glyphicon-search"></span> Search

</button>

</p>

<p>Search icon on a styled button:

<button type="button" class="btn btn-info">

<span class="glyphicon glyphicon-search"></span> Search

</button>

</p>

<p>Print icon: <span class="glyphicon glyphicon-print"></span></p>

<p>Print icon on a styled link button:

<a href="#" class="btn btn-success btn-lg">

<span class="glyphicon glyphicon-print"></span> Print

</a>

</p>

</div>

</body>

</html>

Output