Table of Contents

Day-1..................................................................................................................................................5
HTML Introduction................................................................................................................................5
What is HTML?..........................................................................................................................6
A Simple HTML Document.................................................................................................6
Example....................................................................................................................................6
Example Explained.............................................................................................................6
What is an HTML Element?................................................................................................7
Day-2..................................................................................................................................................8
What is a text editor?...........................................................................................................8
Day-3..................................................................................................................................................9
HTML Tags...................................................................................................................................9
Day-4................................................................................................................................................11
HTML Text Formatting..................................................................................................................11
HTML Formatting Elements............................................................................................11
HTML <img> Tag..........................................................................................................................11
HTML - Audio & Video..................................................................................................................11
Embedding Video..................................................................................................................12
Embedding Audio..................................................................................................................12
Day-5................................................................................................................................................14
HTML <pre> Tag...........................................................................................................................14
Definition and Usage..........................................................................................................14
HTML Div Tag....................................................................................................................................14
HTML <br> tag..................................................................................................................................15
Syntax........................................................................................................................................15
Day-6................................................................................................................................................16
HTML <p> Tag...............................................................................................................................16
Definition and Usage..........................................................................................................16
HTML hr tag.......................................................................................................................................16
HTML hr tag..................................................................................................................................16
Day-7................................................................................................................................................17
HTML Table........................................................................................................................................17
HTML Table Tags.........................................................................................................................17
HTML Table Example.................................................................................................................18
Day-8................................................................................................................................................19
Cellpadding and Cellspacing...........................................................................................................19
What is Cellpadding?.................................................................................................................19
Features of Cellpadding........................................................................................................21
What is Cellspacing?.................................................................................................................21
Features of Cellspacing........................................................................................................22
Day-9................................................................................................................................................24
HTML Form........................................................................................................................................24
Why use HTML Form..................................................................................................................24
HTML Form Syntax.....................................................................................................................24
HTML Form Tags.........................................................................................................................24
Day-10.............................................................................................................................................26
CSS Introduction............................................................................................................................26
What is CSS?............................................................................................................................26
Why Use CSS?.........................................................................................................................26
CSS Solved a Big Problem................................................................................................26
CSS Saves a Lot of Work!.................................................................................................27
CSS Syntax................................................................................................................................27
Types of CSS (Cascading Style Sheet)......................................................................................27
Day-11.............................................................................................................................................29
CSS Selectors..........................................................................................................................29
Day-12.............................................................................................................................................30
The CSS element Selector...............................................................................................30
Example..................................................................................................................................30
The CSS id Selector.............................................................................................................30
Example..................................................................................................................................30
Day-13.............................................................................................................................................31
The CSS class Selector.......................................................................................................31
Example..................................................................................................................................31
The CSS Universal Selector.............................................................................................31
Example..................................................................................................................................31
Day-14.............................................................................................................................................32
The CSS Grouping Selector.............................................................................................32
Example..................................................................................................................................32
All CSS Simple Selectors...................................................................................................33
Day-15.............................................................................................................................................34
CSS Backgrounds..........................................................................................................................34
 CSS background-color........................................................................................................34
Example..................................................................................................................................34
Other Elements......................................................................................................................34
Example..................................................................................................................................34
Opacity / Transparency......................................................................................................35
Example..................................................................................................................................35
Transparency using RGBA................................................................................................35
Example..................................................................................................................................36
The CSS Background Color Property.........................................................................36
CSS background-image.....................................................................................................36
Example..................................................................................................................................36
Example..................................................................................................................................36
Example..................................................................................................................................37
The CSS Background Image Property.......................................................................37
Day-16.............................................................................................................................................38
CSS Lists...........................................................................................................................................38
Unordered Lists:....................................................................................................................38
Ordered Lists:.........................................................................................................................38
HTML Lists and CSS List Properties...........................................................................38
Different List Item Markers.............................................................................................39
Example..................................................................................................................................39
An Image as The List Item Marker..............................................................................39
Example..................................................................................................................................39
Position The List Item Markers.....................................................................................39
Example..................................................................................................................................40
Remove Default Settings.................................................................................................40
Example..................................................................................................................................40
List - Shorthand property................................................................................................40
Example..................................................................................................................................41
Styling List With Colors.....................................................................................................41
Example..................................................................................................................................41
Day-17.............................................................................................................................................43
CSS Borders....................................................................................................................................43
CSS Border Style...................................................................................................................43
Example..................................................................................................................................44
CSS Border Width.................................................................................................................45
 Example..................................................................................................................................45
Day-18.............................................................................................................................................46
CSS Tables.......................................................................................................................................46
Day-19.............................................................................................................................................47
The position Property........................................................................................................47
position: static;......................................................................................................................47
Example..................................................................................................................................48
position: relative;.................................................................................................................48
Example..................................................................................................................................48
position: fixed;.......................................................................................................................48
Example..................................................................................................................................48
position: absolute;...............................................................................................................49
Example..................................................................................................................................49
position: sticky;.....................................................................................................................49
Example..................................................................................................................................50
Day-20.............................................................................................................................................51
Table Borders..........................................................................................................................51
Example..................................................................................................................................51
Full-Width Table.....................................................................................................................51
Example..................................................................................................................................51
Day-21.............................................................................................................................................52
HTML <frame> Tag......................................................................................................................52
What to Use Instead?.........................................................................................................52
Example..................................................................................................................................52
Day-22.............................................................................................................................................53
HTML <form> Tag.........................................................................................................................53
Example..................................................................................................................................53
Definition and Usage..........................................................................................................53
Attributes..................................................................................................................................53
Global Attributes...................................................................................................................55
Event Attributes....................................................................................................................55
More Examples.......................................................................................................................55
Example..................................................................................................................................55
Day-23.............................................................................................................................................57
How to include frameset inside another frameset in HTML ?.....................................................57
Example.....................................................................................................................................57
Day-24.............................................................................................................................................59
Day-25.............................................................................................................................................61
CSS Navigation Bar......................................................................................................................61
Navigation Bars.....................................................................................................................61
Navigation Bar = List of Links.......................................................................................61
Example..................................................................................................................................61
Example..................................................................................................................................61
CSS Vertical Navigation Bar......................................................................................................62
Example..................................................................................................................................62
Day-26.............................................................................................................................................63
W3.CSS Containers.......................................................................................................................63
The Container Class.............................................................................................................63
Containers Provides Equality.........................................................................................63
Articles and Sections..........................................................................................................63
Example..................................................................................................................................63

Day-1
HTML Introduction
HTML is the standard markup language for creating Web pages.

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.
A Simple HTML Document
Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

Example Explained
 The <!DOCTYPE html> declaration defines that this document is an
HTML5 document
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the HTML page
 The <title> element specifies a title for the HTML page (which is
shown in the browser's title bar or in the page's tab)
 The <body> element defines the document's body, and is a container
for all the visible contents, such as headings, paragraphs, images,
hyperlinks, tables, lists, etc.
 The <h1> element defines a large heading
 The <p> element defines a paragraph

What is an HTML Element?

An HTML element is defined by a start tag, some content, and an end tag:

<tagname> Content goes here... </tagname>

The HTML element is everything from the start tag to the end tag:

<h1>My First Heading</h1>

<p>My first paragraph.</p>
Start tag Element content End tag

<h1> My First Heading </h1>

<p> My first paragraph. </p>

<br> none none

 Day-2
What is a text editor?
A text editor refers to any form of computer
program that enables users to create, change, edit,
open and view plain text files. They come already
installed on most operating systems but their
dominant application has evolved from notetaking
and creating documents to crafting complex code.
Today, text editors are a core part of a developer’s
toolbox and are most commonly used to create
computer programmes, edit hypertext markup
language (HTML), and build and design web pages.
Examples of commonly used text editors include:
 Notepad
 Atom
 Notepad++
 Sublime Text
 VS Code
 Day-3
HTML Tags
As told earlier, HTML is a markup language and makes use of
various tags to format the content. These tags are enclosed
within angle braces <Tag Name>. Except few tags, most of the
tags have their corresponding closing tags. For
example, <html> has its closing tag </html> and <body> tag
has its closing tag </body> tag etc.

Above example of HTML document uses the following tags −

Sr.N
Tag & Description
o

<!DOCTYPE...>
1
This tag defines the document type and HTML version.
<html>
This tag encloses the complete HTML document and mainly
2
comprises of document header which is represented by
<head>...</head> and document body which is represented by
<body>...</body> tags.
<head>
3
This tag represents the document's header which can keep other
HTML tags like <title>, <link> etc.
<title>
4
The <title> tag is used inside the <head> tag to mention the
document title.
<body>
5
This tag represents the document's body which keeps other
HTML tags like <h1>, <div>, <p> etc.
6 <h1>
 This tag represents the heading.
<p>
7
This tag represents a paragraph.

To learn HTML, you will need to study various tags and

understand how they behave, while formatting a textual
document. Learning HTML is simple as users have to learn the
usage of different tags in order to format the text or images to
make a beautiful webpage.
 Day-4
HTML Text Formatting
HTML contains several elements for defining text with a special
meaning.

HTML Formatting Elements

Formatting elements were designed to display special
types of text:

 <b> - Bold text

 <strong> - Important text
 <i> - Italic text
 <em> - Emphasized text
 <mark> - Marked text
 <small> - Smaller text
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text
 <sup> - Superscript text

HTML <img> Tag

<img src="img_girl.jpg" alt="Girl in a
jacket" width="500" height="600">

HTML - Audio & Video

he HTML5 <audio> and <video> tags make it simple to add
media to a website. You need to set src attribute to identify the
media source and include a controls attribute so the user can play
and pause the media.
Embedding Video

Here is the simplest form of embedding a video file in your

webpage −

<!DOCTYPE HTML>

<html>
<body>

<video width = "300" height = "200" controls

autoplay>
<source src = "/html5/foo.ogg" type
="video/ogg" />
<source src = "/html5/foo.mp4" type =
"video/mp4" />
Your browser does not support the <video>
element.
</video>

</body>
</html>

Embedding Audio

HTML5 supports <audio> tag which is used to embed sound

content in an HTML or XHTML document as follows.

<audio src = "foo.wav" controls autoplay>

Your browser does not support the <audio> element.
</audio>
The current HTML5 draft specification does not specify which
audio formats browsers should support in the audio tag. But most
commonly used audio formats are ogg, mp3 and wav.

You can use <source&ggt; tag to specify media along with media
type and many other attributes. An audio element allows multiple
source elements and browser will use the first recognized format
−

<!DOCTYPE HTML>

<html>
<body>
<audio controls autoplay>
 <source src = "/html5/audio.ogg" type =
"audio/ogg" />
<source src = "/html5/audio.wav" type =
"audio/wav" />
Your browser does not support the <audio>
element.
</audio>
</body>
</html>
 Day-5
HTML <pre> Tag
Definition and Usage
The <pre> tag defines preformatted text.

Text in a <pre> element is displayed in a fixed-width font, and the text

preserves both spaces and line breaks. The text will be displayed exactly as
written in the HTML source code.

<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
</pre>

HTML Div Tag

The HTML <div> tag is used to group the large section of
HTML elements together.

We know that every tag has a specific purpose e.g. p tag is

used to specify paragraph, <h1> to <h6> tag are used to
specify headings but the <div> tag is just like a container
unit which is used to encapsulate other page elements and
divides the HTML documents into sections.

The div tag is generally used by web developers to group

HTML elements together and apply CSS styles to many
elements at once. For example: If you wrap a set of
paragraph elements into a div element so you can take the
advantage of CSS styles and apply font style to all
paragraphs at once instead of coding the same style for
each paragraph element.
1. <div style="border:1px solid pink;padding:20px;font-
size:20px">
2. <p>Welcome to Javatpoint.com, Here you get tutorials on latest technolo
gies.</p>
3. <p>This is second paragraph</p>
4. </div>

HTML <br> tag

The <br> tag in HTML document is used to create a line break in a text.

It is generally used in poem or address where the division of line is

necessary. It is an empty tag, which means it does not need a company of
end tag. If you place the <br> tag in the HTML code, then it works the
same as pressing the enter key in a word processor.

Note: Don't use br tag for the margin between two paragraphs, use CSS margin
property instead.
Syntax
1. Text <br> Text
 Day-6
HTML <p> Tag
Definition and Usage
The <p> tag defines a paragraph.

Browsers automatically add a single blank line before and after

each <p> element.

HTML hr tag
HTML <hr> tag is used to specify a paragraph-level thematic break in
HTML document. It is used when you abruptly change your topic in your
HTML document. It draw a horizontal line between them. It is also called a
Horizontal Rule in HTML.

HTML hr tag
1. <h2>HTML</h2>
2. <p>HTML is a language for describing web pages.</p>
3. <hr/>
4. <h2>HR Tag </h2>
5. <p> HR tag is used to draw a horizontal line within the texts to sepate co
ntent.<p>
 Day-7
HTML Table
HTML table tag is used to display data in tabular form (row * column).
There can be many columns in a row.

We can create a table to display data in tabular form, using <table>

element, with the help of <tr> , <td>, and <th> elements.

In Each table, table row is defined by <tr> tag, table header is defined by
<th>, and table data is defined by <td> tags.

HTML tables are used to manage the layout of the page e.g. header
section, navigation bar, body content, footer section etc. But it is
recommended to use div tag over table to manage the layout of the
page .

HTML Table Tags

Tag Description

<table> It defines a table.

<tr> It defines a row in a table.

<th> It defines a header cell in a table.

<td> It defines a cell in a table.

<caption It defines the table caption.

>

<colgroup It specifies a group of one or more columns in a table for

> formatting.

<col> It is used with <colgroup> element to specify column properties

for each column.

<tbody> It is used to group the body content in a table.

 <thead> It is used to group the header content in a table.

<tfooter> It is used to group the footer content in a table.

HTML Table Example

Let's see the example of HTML table tag. It output is shown above.

<table>
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
<tr><td>James</td><td>William</td><td>80</td></tr>
<tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
</table>
 Day-8
Cellpadding and Cellspacing
The cellpadding and cellspacing are two distinct notions in the world
of HTML, CSS, and XHTML. The cellpadding and cellspacing
characteristics are used to format table cells, and both attributes are
utilized to insert the whitespaces in the cells of the table. The distance
between cells in a grid layout is known as cellspacing. In contrast, the
space around each cell is referred to as cell padding. Cellpadding and
cellspacing are two ways to enhance the appearance of your website.

The primary distinction between these techniques is that cellpadding is

utilized to define the width between the cell content and its edge. In
contrast, cellspacing determines the distance between single cells, and
these attributes' width may be measured in pixels or percentages.
Cellpadding and cellspacing characteristics are utilized to modify the
distance between text and the surrounding cell wall, cells, and cells within
a table element.

In this article, you will learn about the difference between Cellpadding
and Cellspacing. But before discussing the differences, you must know
about Cellpading and Cellspacing with their features.

What is Cellpadding?
Cellpadding is the attribute that defines the space in a cell between the
cell content and its border. To put it another way, it is the attribute of the
table tag (<table>) that specifies the spacing between the cell content
and its border. In HTML, the unit of this distance might be represented in
pixels or as a percentage. The cellpadding attribute value may
alternatively be 0 to meet the needs of the consumers. It is utilized to
separate the text from one another, improving the appearance.

HTML older versions include the cellpadding command. However,

subsequent versions of HTML5 do not support cellpadding. As a result,
the CSS is utilized as a substitute to give the same formatting as needed.

Syntax:

You may apply the following syntax to utilize the cellpadding attribute:

1. <table cellpadding="value" >.....</table>

Example:
 Let's take a cellpadding example to understand how you can use
cellpadding in HTML.

<!DOCTYPE html>
<html>
<head>
<style>
td { background:pink;}
</style>
<title>
Web table
</title>
</head>
<body>
<table border="2" cellpadding="15">
<tr>
<td>Java</td>
<td>JavaScript</td>
<td>C++</td>
</tr>
<tr>
<td>Python</td>
<td>Nodejs</td>
<td>Angular</td>
</tr>
</table>
</body>
</html>

Output:
 Features of Cellpadding
There are various features of Cellpadding. Some important features of
cellpadding are as follows:

1. It mainly connects with single cells.

2. Cellpadding can be created using the HTML <table> tag.
3. Cellpadding allows you to simply regulate the white space between a cell
border and its content.
4. You have to set the attribute type to cellpadding.

What is Cellspacing?
Cellspacing is something different from cellpadding. In HTML, cellspacing
is yet another attribute of the table tag. It regulates the distance between
the single cells in a table. By using this feature, developers might simply
change the space between the edges of several adjacent cells. It
enhances the table's readability. The cell border appears to increase as
the number of cellspacing increases.

Cellspacing is most commonly utilized in web design. Different

programming languages utilize different syntax for cellspacing, like CSS
utilizes the "border-spacing" property, whereas HTML utilizes
the "cellspacing" property.

Syntax:

You may apply the following syntax to utilize cellspacing attribute:

1. <table cellspacing="value" >.....</table>

Example:

Let's take a cellspacing example to understand how you can use

cellspacing in HTML.

<!DOCTYPE html>
<html>
<head>
<style>
td { background:pink;}
</style>
<title>
Web table
</title>
</head>
<body>
<table border="3" cellspacing="25">
<tr>
<td>Java</td>
<td>JavaScript</td>
<td>C++</td>
</tr>
<tr>
<td>Python</td>
<td>Nodejs</td>
<td>Angular</td>
</tr>
</table>
</body>
</html>

Output:

Features of Cellspacing
There are various features of Cellspacing. Some important features of
cellspacing are as follows:

1. It is far less effective than the cell padding method.

2. It associates with numerous cells rather than simply one.
3. Cellspacing can be simply created by utilizing the HTML table> tag.
Features Cellpadding Cellspacing

Definition It is the attribute that It regulates the distance

defines the space in a cell between the single cells in
between the content and its a table.
border.

Number of It deals with a single cell. It deals with multiple cells.

cells

Process of It can be created with the It can be created with the

Creation HTML <table> tag, but the HTML <table> tag, but the
type attribute is set to type attribute is set to
cellpadding. cellspacing.

Default Its default value is 1. Its default value is 2.

Value

Effectiven It is more extensively It is less effective than

ess employed and thought to be Cellpadding.
more efficient than
Cellspacing.

Example <table cellpadding="value" <table cellspacing="value"

>.....</table> >.....</table>
 Day-9

HTML Form
An HTML form is a section of a document which contains controls such as
text fields, password fields, checkboxes, radio buttons, submit button,
menus etc.

An HTML form facilitates the user to enter data that is to be sent to the
server for processing such as name, email address, password, phone
number, etc. .

Why use HTML Form

HTML forms are required if you want to collect some data from of the site
visitor.

For example: If a user want to purchase some items on internet, he/she

must fill the form such as shipping address and credit/debit card details so
that item can be sent to the given address.

HTML Form Syntax

1. <form action="server url" method="get|post">
2. //input controls e.g. textfield, textarea, radiobutton, button
3. </form>

HTML Form Tags

Let's see the list of HTML 5 form tags.

Tag Description

<form> It defines an HTML form to enter inputs by the used side.

<input> It defines an input control.

<textarea> It defines a multi-line input control.

<label> It defines a label for an input element.

<fieldset> It groups the related element in a form.

<legend> It defines a caption for a <fieldset> element.

<select> It defines a drop-down list.

<optgroup> It defines a group of related options in a drop-down list.

<option> It defines an option in a drop-down list.

<button> It defines a clickable button.

 Day-10

CSS Introduction
CSS is the language we use to style a Web page.

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 stylesheets are stored in CSS files

Why Use CSS?

CSS is used to define styles for your web pages, including the design, layout
and variations in display for different devices and screen sizes.

CSS Solved a Big Problem

HTML was NEVER intended to contain tags for formatting a web page!

HTML was created to describe the content of a web page, like:

<h1>This is a heading</h1>

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

When tags like <font>, and color attributes were added to the HTML 3.2
specification, it started a nightmare for web developers. Development of
large websites, where fonts and color information were added to every single
page, became a long and expensive process.

To solve this problem, the World Wide Web Consortium (W3C) created CSS.

CSS removed the style formatting from the HTML page!

CSS Saves a Lot of Work!
The style definitions are normally saved in external .css files.

With an external stylesheet file, you can change the look of an entire website
by changing just one file!

CSS Syntax

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.

Types of CSS (Cascading Style Sheet)

 Read
 Discuss
 Courses

Cascading Style Sheet (CSS) is used to set the style in

web pages that contain HTML elements. It sets the
background color, font-size, font-family, color, … etc.
properties of elements on a web page.
There are three types of CSS which are given below:
 Inline CSS
 Internal or Embedded CSS
 External CSS
Inline CSS: Inline CSS contains the CSS property in the
body section attached to the element is known as inline
CSS. This kind of style is specified within an HTML tag
using the style attribute.
 Day-11
CSS Selectors
CSS selectors are used to "find" (or select) the HTML elements you want to
style.

We can divide CSS selectors into five categories:

 Simple selectors (select elements based on name, id, class)

 Combinator selectors (select elements based on a specific relationship
between them)
 Pseudo-class selectors (select elements based on a certain state)
 Pseudo-elements selectors (select and style a part of an element)
 Attribute selectors (select elements based on an attribute or attribute
value)

This page will explain the most basic CSS selectors.

 Day-12

The CSS element Selector

The element selector selects HTML elements based on the element name.

Example
Here, all <p> elements on the page will be center-aligned, with a red text
color:

p {
text-align: center;
color: red;
}

The CSS id Selector

The id selector uses the id attribute of an HTML element to select a specific
element.

The id of an element is unique within a page, so the id selector is used to

select one unique element!

To select an element with a specific id, write a hash (#) character, followed
by the id of the element.

Example
The CSS rule below will be applied to the HTML element with id="para1":

#para1 {
text-align: center;
color: red;
}
 Day-13

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:

.center {
text-align: center;
color: red;
}

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:

* {
text-align: center;
color: blue;
}
 Day-14

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):

h1 {
text-align: center;
color: red;
}

h2 {
text-align: center;
color: red;
}

p {
text-align: center;
color: red;
}

It will be better to group the selectors, to minimize the code.

To group selectors, separate each selector with a comma.

Example
In this example we have grouped the selectors from the code above:

h1, h2, p {
text-align: center;
color: red;
}

All CSS Simple Selectors

Selector Example Example description
#id #firstname Selects the element with id="firstname"

.class .intro Selects all elements with class="intro"

element.class p.intro Selects only <p> elements with class="intro"

* * Selects all elements

element p Selects all <p> elements

element,element,. div, p Selects all <div> elements and all <p> elements
.
 Day-15
CSS Backgrounds
The CSS background properties are used to add background effects for elements.

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

Example
The background color of a page is set like this:

body {
background-color: lightblue;
}

With CSS, a color is most often specified by:

 a valid 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.

Other Elements
You can set the background color for any HTML elements:

Example
Here, the <h1>, <p>, and <div> elements will have different background
colors:

h1 {
background-color: green;
}

div {
background-color: lightblue;
}
p {
background-color: yellow;
}

Opacity / Transparency
The opacity property specifies the opacity/transparency of an element. It can
take a value from 0.0 - 1.0. The lower value, the more transparent:

Example
div {
background-color: green;
opacity: 0.3;
}

Note: When using the opacity property to add transparency to the

background of an element, all of its child elements inherit the same
transparency. This can make the text inside a fully transparent element hard
to read.

Transparency using RGBA

If you do not want to apply opacity to child elements, like in our example
above, use RGBA color values. The following example sets the opacity for the
background color and not the text:

You learned from our CSS Colors Chapter, that you can use RGB as a color
value. In addition to RGB, you can use an RGB color value with
an alpha channel (RGBA) - which specifies the opacity for a color.

An RGBA color value is specified with: rgba(red, green, blue, alpha).

The alpha parameter is a number between 0.0 (fully transparent) and 1.0
(fully opaque).

Tip: You will learn more about RGBA Colors in our CSS Colors Chapter.

Example
div {
background: rgba(0, 128, 0, 0.3) /* Green background with 30%
opacity */
}
The CSS Background Color
Property
Property Description

background-color Sets the background color of an element

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
Set the background image for a page:

body {
background-image: url("paper.gif");
}

Example
This example shows a bad combination of text and background image. The
text is hardly readable:

body {
background-image: url("bgdesert.jpg");
}

Note: When using a background image, use an image that does not disturb
the text.

The background image can also be set for specific elements, like the <p>
element:
Example
p {
background-image: url("paper.gif");
}

The CSS Background Image

Property
Property Description

background-image Sets the background image for an element

 Day-16
CSS Lists
Unordered Lists:
o Coffee
o Tea
o Coca Cola

 Coffee
 Tea
 Coca Cola

Ordered Lists:
1. Coffee
2. Tea
3. Coca Cola

I. Coffee
II. Tea
III. Coca Cola

HTML Lists and CSS List

Properties
In HTML, there are two main types of lists:

 unordered lists (<ul>) - the list items are marked with bullets
 ordered lists (<ol>) - the list items are marked with numbers or letters

The CSS list properties allow you to:

 Set different list item markers for ordered lists

 Set different list item markers for unordered lists
 Set an image as the list item marker
 Add background colors to lists and list items
Different List Item Markers
The list-style-type property specifies the type of list item marker.

The following example shows some of the available list item markers:

Example
ul.a {
list-style-type: circle;
}

ul.b {
list-style-type: square;
}

ol.c {
list-style-type: upper-roman;
}

ol.d {
list-style-type: lower-alpha;
}

Note: Some of the values are for unordered lists, and some for ordered lists.

An Image as The List Item

Marker
The list-style-image property specifies an image as the list item marker:

Example
ul {
list-style-image: url('sqpurple.gif');
}
Position The List Item Markers
The list-style-position property specifies the position of the list-item
markers (bullet points).

"list-style-position: outside;" means that the bullet points will be outside the
list item. The start of each line of a list item will be aligned vertically. This is
default:

 Coffee - A brewed drink prepared from roasted coffee beans...

 Tea
 Coca-cola

"list-style-position: inside;" means that the bullet points will be inside the list
item. As it is part of the list item, it will be part of the text and push the text
at the start:

 Coffee - A brewed drink prepared from roasted coffee beans...

 Tea
 Coca-cola

Example
ul.a {
list-style-position: outside;
}

ul.b {
list-style-position: inside;
}

Remove Default Settings

The list-style-type:none property can also be used to remove the
markers/bullets. Note that the list also has default margin and padding. To
remove this, add margin:0 and padding:0 to <ul> or <ol>:

Example
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
List - Shorthand property
The list-style property is a shorthand property. It is used to set all the list
properties in one declaration:

Example
ul {
list-style: square inside url("sqpurple.gif");
}

When using the shorthand property, the order of the property values are:

 list-style-type (if a list-style-image is specified, the value of this

property will be displayed if the image for some reason cannot be
displayed)
 list-style-position (specifies whether the list-item markers should
appear inside or outside the content flow)
 list-style-image (specifies an image as the list item marker)

If one of the property values above is missing, the default value for the
missing property will be inserted, if any.

Styling List With Colors

We can also style lists with colors, to make them look a little more
interesting.

Anything added to the <ol> or <ul> tag, affects the entire list, while
properties added to the <li> tag will affect the individual list items:

Example
ol {
background: #ff9999;
padding: 20px;
}

ul {
background: #3399ff;
padding: 20px;
}

ol li {
background: #ffe5e5;
 color: darkred;
padding: 5px;
margin-left: 35px;
}

ul li {
background: #cce5ff;
color: darkblue;
margin: 5px;
}

Result:

1. Coffee
2. Tea
3. Coca Cola

 Coffee
 Tea
 Coca Cola
 Day-17
CSS Borders
The CSS border properties allow you to specify the style, width, and color
of an element's border.

I have borders on all sides.

I have a red bottom border.

I have rounded borders.

I have a blue left border.

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
Demonstration of the different border styles:

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;}

Result:

A dotted border.

A dashed border.

A solid border.

A double border.

A groove border. The effect depends on the border-color value.

A ridge border. The effect depends on the border-color value.

An inset border. The effect depends on the border-color value.

An outset border. The effect depends on the border-color value.

No border.

A hidden border.

A mixed border.
CSS Border Width
The border-width property specifies the width of the four borders.

The width can be set as a specific size (in px, pt, cm, em, etc) or by using one
of the three pre-defined values: thin, medium, or thick:

Example
Demonstration of the different border widths:

p.one {
border-style: solid;
border-width: 5px;
}

p.two {
border-style: solid;
border-width: medium;
}

p.three {
border-style: dotted;
border-width: 2px;
}

p.four {
border-style: dotted;
border-width: thick;
}

Result:

5px border-width
medium border-width
2px border-width
thick border-width
 Day-18
CSS Tables
The look of an HTML table can be greatly improved with CSS:

Company Contact Country

Alfreds Futterkiste Maria Anders Germany

Berglunds snabbköp Christina Berglund Sweden

Centro comercial Moctezuma Francisco Chang Mexico

Ernst Handel Roland Mendel Austria

Island Trading Helen Bennett UK

Königlich Essen Philip Cramer Germany

Laughing Bacchus Winecellars Yoshi Tannamuri Canada

Magazzini Alimentari Riuniti Giovanni Rovelli Italy

 Day-19

The position property specifies the type of positioning method used for
an element (static, relative, fixed, absolute or sticky).

The position Property

The position property specifies the type of positioning method used for an
element.

There are five different position values:

 static
 relative
 fixed
 absolute
 sticky

Elements are then positioned using the top, bottom, left, and right properties.
However, these properties will not work unless the position property is set
first. They also work differently depending on the position value.

position: static;
HTML elements are positioned static by default.

Static positioned elements are not affected by the top, bottom, left, and right
properties.

An element with position: static; is not positioned in any special way; it is

always positioned according to the normal flow of the page:

This <div> element has position: static;

Here is the CSS that is used:

Example
div.static {
position: static;
border: 3px solid #73AD21;
}

position: relative;
An element with position: relative; is positioned relative to its normal
position.

Setting the top, right, bottom, and left properties of a relatively-positioned

element will cause it to be adjusted away from its normal position. Other
content will not be adjusted to fit into any gap left by the element.

This <div> element has position: relative;

Here is the CSS that is used:

Example
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}

position: fixed;
An element with position: fixed; is positioned relative to the viewport, which
means it always stays in the same place even if the page is scrolled. The top,
right, bottom, and left properties are used to position the element.

A fixed element does not leave a gap in the page where it would normally
have been located.

Notice the fixed element in the lower-right corner of the page. Here is the
CSS that is used:

Example
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
 border: 3px solid #73AD21;
}

position: absolute;
An element with position: absolute; is positioned relative to the nearest
positioned ancestor (instead of positioned relative to the viewport, like fixed).

However; if an absolute positioned element has no positioned ancestors, it

uses the document body, and moves along with page scrolling.

Note: Absolute positioned elements are removed from the normal flow, and
can overlap elements.

Here is a simple example:

This <div> element has position: relative;

This <div> element has position: absolute;

Here is the CSS that is used:

Example
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}

div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}

position: sticky;
An element with position: sticky; is positioned based on the user's scroll
position.

A sticky element toggles between relative and fixed, depending on the scroll
position. It is positioned relative until a given offset position is met in the
viewport - then it "sticks" in place (like position:fixed).
Note: Internet Explorer does not support sticky positioning. Safari requires a
-webkit- prefix (see example below). You must also specify at least one
of top, right, bottom or left for sticky positioning to work.

In this example, the sticky element sticks to the top of the page ( top: 0),
when you reach its scroll position.

Example
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
 Day-20
Table Borders
To specify table borders in CSS, use the border property.

The example below specifies a solid border for <table>, <th>, and <td>
elements:

Firstname Lastname

Peter Griffin

Lois Griffin

Example
table, th, td {
border: 1px solid;
}

Full-Width Table
The table above might seem small in some cases. If you need a table that
should span the entire screen (full-width), add width: 100% to the <table>
element:

Firstname Lastname

Peter Griffin

Lois Griffin

Example
table {
width: 100%;
}
 Day-21

HTML <frame> Tag

What to Use Instead?
Example
Use the <iframe> tag to embed another document within the current HTML
document:

<iframe src="https://www.w3schools.com"></iframe>
 Day-22
HTML <form> Tag
Example
An HTML form with two input fields and one submit button:

<form action="/action_page.php" method="get">

<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>

More "Try it Yourself" examples below.

Definition and Usage

The <form> tag is used to create an HTML form for user input.

The <form> element can contain one or more of the following form elements:

 <input>
 <textarea>
 <button>
 <select>
 <option>
 <optgroup>
 <fieldset>
 <label>
 <output>

Attributes
Attribute Value Description
accept- character_set Specifies the character encodings
charset that are to be used for the form
submission

action URL Specifies where to send the form-

data when a form is submitted

autocomplet on Specifies whether a form should

e off have autocomplete on or off

enctype application/x-www- Specifies how the form-data should

form-urlencoded be encoded when submitting it to
multipart/form-data the server (only for method="post")
text/plain

method get Specifies the HTTP method to use

post when sending form-data

name text Specifies the name of a form

novalidate novalidate Specifies that the form should not be

validated when submitted

rel external Specifies the relationship between a

help linked resource and the current
license document
next
nofollow
noopener
 noreferrer
opener
prev
search

target _blank Specifies where to display the

_self response that is received after
_parent submitting the form
_top

Global Attributes
The <form> tag also supports the Global Attributes in HTML.

Event Attributes
The <form> tag also supports the Event Attributes in HTML.

More Examples
Example
An HTML form with checkboxes:

<form action="/action_page.php" method="get">

<input type="checkbox" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" name="vehicle3" value="Boat" checked>
<label for="vehicle3"> I have a boat</label><br><br>
 <input type="submit" value="Submit">
</form>
 Day-23
How to include frameset inside another
frameset in HTML ?
The frameset is the collection of frames in the browser window. It is used to
specify the number of rows and columns in a frameset with their pixels of
space. There are some real-world applications of frameset like while making
the website for any purpose, the developer first makes the design of the
whole website where he divides the whole website into some frames such
that each frame has some function. Let’s take an example of a news website,
there are various sections like trending, latest, business, cricket news, etc
and there is also a slider in some websites which scrolls the image after
some seconds.
In this article, we will discuss for creating a nested frameset or a frameset
inside another frameset. Let’s see an example to understand the topic much
better. Comments are added in the code for better understanding.

Example

 HTML
<!DOCTYPE html>
<html>

<head>
<title>Nested Framesets in HTML</title>
</head>

<!-- Frameset tag starts from here -->

<!-- We divide the whole website into three rows -->

<!-- "*" divides equally based on the left space -->
<frameset rows="50%,*,*">

<!-- Here we are defining the columns

in the first row -->
<!-- It is set to 100% which means that
it will cover first row by 100% -->
<frameset cols="100%">

<!-- Defining the frame which is

to be inserted -->
<frame name="frame1" src="frame1.html">
 </frameset>

<!-- Here we are defining the columns

in the second row -->
<frameset cols="*, *, *">
<frame name="frame2" src="frame2.html">
<frame name="frame3" src="frame3.html">
<frame name="frame4" src="frame4.html">
</frameset>

<!-- Now the final third row which will

cover the rest space -->
<frame name="frame5" src="frame5.html">

</frameset>
<!-- frameset tag ends here -->

</html>
 Day-24
Below are the codes for frame1.html, frame2.html, frame3.html,
frame4.html, frame5.html:
 frame1.html

<html>

<head>
<title>frame1</title>
</head>

<body bgcolor="aqua">
<center>
<img src="gfglogo.png" alt="gfglogo"
width="400" height="350"><br>
frame1
</center>
</body>

</html>

 frame2.html

<html>

<head>
<title>frame2</title>
</head>

<body bgcolor="hotpink">
frame2
</body>

</html>

 frame3.html

<html>

<head>
<title>frame3</title>
</head>

<body bgcolor="lightgreen">
frame3
</body>

</html>
 frame4.html

<html>

<head>
<title>frame4</title>
</head>

<body bgcolor="grey">
frame4
</body>

</html>

 frame5.html

<html>

<head>
<title>frame5</title>
</head>

<body bgcolor="yellow">
frame5
</body>

</html>
 Day-25
CSS Navigation Bar
Navigation Bars
Having easy-to-use navigation is important for any web site.

With CSS you can transform boring HTML menus into good-looking navigation
bars.

Navigation Bar = List of Links

A navigation bar needs standard HTML as a base.

In our examples we will build the navigation bar from a standard HTML list.

A navigation bar is basically a list of links, so using the <ul> and <li>
elements makes perfect sense:

Example
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>

Now let's remove the bullets and the margins and padding from the list:

Example
ul {
list-style-type: none;
margin: 0;
padding: 0;
}

Example explained:
  list-style-type: none; - Removes the bullets. A navigation bar does
not need list markers
 Set margin: 0; and padding: 0; to remove browser default settings

The code in the example above is the standard code used in both vertical,
and horizontal navigation bars, which you will learn more about in the next
chapters.

CSS Vertical Navigation Bar

To build a vertical navigation bar, you can style the <a> elements inside the
list, in addition to the code from the previous page:

Example
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}

li a {
display: block;
width: 60px;
background-color: #dddddd;
}
</style>
</head>
<body>

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

<p>A background color is added to the links to show the link

area.</p>
<p>Notice that the whole link area is clickable, not just the
text.</p>
</body>
</html>
 Day-26
W3.CSS Containers
The Container Class
The w3-container class adds a 16px left and right padding to any HTML
element.

The w3-container class is the perfect class to use for all HTML container
elements like:

<div>, <article>, <section>, <header>, <footer>, <form>, and more.

Containers Provides Equality

The w3-container provides equality for all HTML container elements:

 Common margins
 Common paddings
 Common alignments
 Common fonts
 Common colors

To use a container, just add a w3-container class to any element:

Articles and Sections

The w3-container class can be used to style <article> and <section>
elements:

Example

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container w3-red">
<h1>Header</h1>
</div>

<img src="img_car.jpg" alt="Car" style="width:100%">

<div class="w3-container">
<p>A car is a wheeled, self-powered motor vehicle used for transportation. Most
definitions of the term specify that cars are designed to run primarily on roads.
(Wikipedia)</p>
</div>

<div class="w3-container w3-red">

<h5>Footer</h5>
</div>

</body>
</html>