Sodapdf

Hypertext Markup Language & Cascading Style Sheet
Training Report
submitted
in partial fulfillment
for the award of the Degree of
Bachelor of Technology
in
Department of Computer Science Engineering
(With Specialization In Computer Science & Engineering)
Supervisor: Submitted
By:
Mr. Ankush Sharma Yash

Chauhan
Assistant Professor Roll

No.21EMICS062
Department of Computer Science & Engineering

Modi Institute
of Technology
Rajasthan
Technical
University,
October, 2022
CANDIDATE’S DECLARATION
I hereby declare that the work, which is being presented in the Industrial Training
Report, entitled “Hypertext Markup Language & Cascading Style Sheet” in partial
fulfillment for the award of Degree of “Bachelor of Technology” in Department of
Computer Engineering with specialization in Computer Science and Engineering,
and submitted to the Department of Computer Engineering, Modi Institute of
Technology, Rajasthan Technical University is a record of my own investigations
carried under the Guidance of Assistant Professor, CSE Mr. Ankush Sharma, Dept. of
Computer Engineering.
I have not submitted the matter presented in this Industrial Training Report anywhere for
the award of anyother Degree.
Yash Chauhan
Computer Science
and Engineering
ROLL NO. :
21EMICS062
Modi Institute of Technology, Kota.
Cou
nter
Sig
ned
By:
Sup
ervi
sor:
Mr. Ankush Sharma
Assistant Professor, CSE Dept.
CERTIFICATE
This is to certify that this Industrial Training Report entitled “Hypertext Markup
Language & Cascading Style Sheet” has been successfully carried out by Mr.Yash
Chauhan (Enrolment No.: 21E1MICSM30P062), under my supervision and guidance,
in partial fulfillment of the requirement for the award of Bachelor of Technology
Degree in Computer Science & Engineering from Modi Institute of Technology, Kota.
Supervisor:
Mr. Ankush Sharma
Assistant Professor, CSE Department.
ACKNOWLEDGMENT
I would also like to give my special thanks to the Principal, Dr. Vikas Soni, Modi
Institute of Technology, for providing the opportunity to me to undertake this work.
I would like to thank my Assistant Professor and TPO, Mr. Ankush Sharma, for his
valuable guidance. I appreciate his presence for giving all discussions, suggestions and
the time for me whenever I neededhim.
Two Persons who deserves a First and Foremost mention are my Mother Mrs. Pushpa
Devi and My Father Mr. Manoj Kumar, whose strong belief in my abilities and moral
support uplifted my spirits.
Without their encouragement, I would have never imagined achieving this height in my career.
I cannot forget to mention the name of my best friends for her relentless help and motivation all
through.
Finally, I would like to thank everybody who was important to the successful realization
of this thesis, as well as expressing my apology that I could not mention personally one
by one.
Yash Chauhan
Computer Science
and Engineering
ROLL No.:
21EMICS062
Modi Institute of Technology, Kota.
TABLE OF CONTENTS
S.NO. TOPIC NAME Page.NO
Chapter 1. HTML 1
• introduction 1
• what is HTML? 1
Chapter 2. BASICS OF HTML
• HTML headings
• HTML paragraphs
• HTML horizontal rules
• HTML line breaks
• HTML text alignment
• HTML pre tags
• HTML entities
• HTML links
• HTML images
2-5
2
4
4
Chapter 3. HTML ATTRIBUTES
• Href attribute
• Srcattribute
• The Width and height attribute
• Alt attribute
• style attribute
• Lang attribute
• Title attribute
6-10
10
10
Chapter 4. HTML FORMATTING
• Bold text
• Strong text
• Italic text
• Emphasized text
• Marked/highlightedtext
• Underlined text
• Superscript text
• subscript text
• deleted text
• smaller text
• larger text
• PHRASE TAGS
• Emphasis Tag
• Marked Tag
• Strong Tag
• Abbreviation Tag
• Acronym Tag
• Text Direction Tag
• Special Terminology or Definition Tag
• Quotation Tag
• Short Quote Tag
• Text Citation Tag
• Code Tag
• Keyboard Tag
• Programming Variable Tag
• Program Output Tag
• Address Tag
11-27
11
12
13
13
14
14
15
15
16
17
18
18
19
19
20
21
22
22
23
23
24
25
25
26
26
27
Chapter5. HTML META TAG
• Definition and Usage

• global attributes
28-30
28
29
Chapter6. HTML COMMENTS 31
Chapter 7. HTML IMAGE 32
Chapter 8. HTML TABLES
• Basic HTML table tags
• Table Cells
• Table Rows
• Table Headers (th)
• HTML Table Border
• Cell Padding
• Cell Spacing
• Colspan
• Rowspan
• HTML Table Colgroup
33-36
33
33
33
34
34
35
35
35
36
Chapter 9. HTML LISTS 37-38
Chapter 10. HTML TARGET ATTRIBUTES
• HTML Blocks
• Inline Elements
39-41
39
41
Chapter 11. CSS BACKGROUNDS
• background-color
• background-image
42-48
42
43
• background-repeat 44
• background-attachment 44
• background-position 45
• background (shorthand property) 46
Chapter 12. HTML FONTS AND FORMS
• HTML Fonts
• HTML Forms
49-52
49
50
Chapter 13. HTML HEAD ELEMENT
• The HTML <head> Element
• HTML head elements13.2.The HTML <title> Element
13.3.The HTML <link> Element 13.4.The HTML <base> Element
53-55
53
53
53
54
55
Chapter 14. HTML-CSS STYLES
• CSS = Styles and Colors
• Using CSS
• Inline CSS
• Internal CSS
• External CSS
• CSS Colors, Fonts and Sizes
• CSS Border
• CSS Padding
56-64
56
56
56
57
58
59
60
61
• CSS Margin 62
• Link to External CSS 63
Chapter 15. HTML CLASS ATTRIBUTE
15.1.Introduction with Different Examples
65-73
65
Chapter 16. HTML ID ATTRIBUTE
16.1. Using The id Attribute
74-75
74
Chapter 17. HTML IFRAMES

• HTML Iframe Syntax
• Iframe - Set Height and Width
• Iframe - Remove the Border17.4.Target for a Link
76-77
76
76
76
77
Chapter 18. CSS BOX MODEL
• The CSS Box Model

• Width and Height of an Element
78-81
78
80
Chapter 19. CSS BORDERS
• The border-color Property
• The border-style Property
• The border-width Property
82-86
82
83
85
Chapter 20. CSS ICONS 87-91
Chapter 21. CSS NAVIGATION BAR
21.1.Navigation Bars 21.2.Vertical Navigation Bar
21.3. Horizontal Navigation Bar
92-97
92
93
95
Chapter 22. MY PROJECTS 98-102
LIST OF TABLES
S.No. Table Name Page

No.
5.1. Attributes of meta tags in HTML 29
8.1 Html Table Border 34
13.1.1. HTML Head Elements 53

18.1. The Different Parts in Box Model Of the CSS 78
LIST OF FIGURES
S.No. Figure Description Page

No.
7.1 MIT logo /HTML image link 32
• CSS background repeat output 44
• CSS background attachment property output 46
• The background property output 48
22.1 Screenshot 1 98
22.2
Screenshot 2 99
22.3
Screenshot 3 100
• Screenshot 4 101
• Screenshot 5 102
• Introduction
HTML
CHAPTER 1
HTML stands for Hyper Text Markup Language, which is the most
widely used language on the Web to develop web pages. HTML was
created by Bernera-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 the Html 4.01 version is widely used,
currently we are having the HTML-5 version which is an extension to
HTML 4.01, and this version was published in 2012. Originally, HTML
was developed with the intent of defining the structure of documents like
headings, paragraphs, lists, and so forth to facilitate the sharing of
scientific information between researchers. Now, HTML is being widely
used to format web pages with the help of different tags available in
HTML language.
• 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 aparagraph", "this is a link", etc.
• Basic HTML tags:
BASICS OF HTML
CHAPTER 2
a. HTML Headings: HTML headings are titles or subtitles

that you want todisplay on a webpage.
Ex:
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the

least importantheading.
Ex:
<h1>Heading1</h1>
<h2>Heading2</h2>
<h3>Heading3</h3>
<h4>Heading4</h4>
<h5>Heading5</h5>
<h6>Heading 6</h6>
• HTML Paragraphs:- A paragraph always starts on a new line,

and is usually ablock of text. The HTML <p> element defines a
paragraph.
A paragraph always starts on a new line, and browsers

automatically addsome white space (a margin) before and
after a paragraph.
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
• HTML Horizontal Rules:- The <hr> tag defines a thematic

break in anHTML page, and is most often displayed as a
horizontal rule.
The <hr> element is used to separate content (or define a

change) in anHTML page:
Example
<h1>This is heading 1</h1>

<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
The <hr> tag is an empty tag, which means that it has no end tag.
• HTML Line Breaks:- The HTML <br> element defines a line

break. Use <br> ifyou want a line break (a new line) without starting
a new paragraph:
Example
<p>This is<br>a paragraph<br>with line breaks.</p>
The <br> tag is an empty tag, which means that it has no end tag.
• Text Alignment:- The CSS text-align property defines the

horizontal textalignment for an HTML element:
Example
<h1 style="text-align:center;">Centered Heading</h1>

<p style="text-align:center;">Centered paragraph.</p>
• HTML <pre> Tag:- 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.
Example
<pre>
Text in a pre element
is displayed
in a fixed-
widthfont,
and it
preserves
bot
h spaces andline breaks
</pre>
• HTML Entities: - Reserved characters in HTML must

be replaced withcharacter entities.
Some characters are reserved in HTML.
If you use the less than (<) or greater than (>) signs in your
text, the browsermight mix them with tags.
Character entities are used to display reserved
characters in HTML.A character entity looks like
this:
&
m
e
&#entity_number;
To display a less than sign (<) we must write: < or <
• HTML Links:- HTML links are defined
with the <a> tag:Example
<a href="https://www.mitkota.com
HYPERLINK
"http://www.mitkota.com/"">This is a
link</a>The link's destination is
specified in the href attribute.
Attributes are used to provide additional information about HTML elements.
• HTML Images:- HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and height are
provided asattributes:
Example
<img src="mitkota.jpg" alt="mit" width="104" height="142">
CHAPTER 3
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"
• Href attribute
The <a> tag defines a hyperlink. The href attribute specifies the URL
of the page thelink 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
hrefattribute:</p>
<a href=‖https://www.w3schools.com‖>Visit W3Schools</a>
</body>
</html>
• The src Attribute
The <img> tag is used to embed an image in an HTML page. The

src attributespecifies the path to the image to be displayed:
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 sourceis specified in the src attribute:</p>
<imgsrc="img_girl.jpg" width="500" height="600">
</body>
</html>
There are two ways to specify the URL in the src attribute:
• Absolute URL - Links to an external image that is hosted on

another website. Example:
src="https://www.w3schools.com/images/img_girl.jpg".
Notes: External images might be under copyright. If you do not get

permission to use it, you may be in violation of copyright laws. In
addition, you cannot control external images; it can suddenly be
removed or changed.
• Relative URL - Links to an image that is hosted within the website.

Here, the URL does not include the domain name. If the URL begins
without a slash, it will be relative to the current page. Example:
src="img_girl.jpg". If the URL begins with a slash, it will be relative
to the domain. Example: src="/images/img_girl.jpg".
Tip: It is almost always best to use relative URLs. They will not break
if you change domain.
• The width and height Attributes:- The <img> tag should

also contain the width and height attributes, which specify the width
and height of the image (in pixels):
Example:
<!DOCTYPE html>
<html>
<body>
<h2>Width and Height Attributes</h2>
<p>The width and height attributes of the img tag, defines the width
and height of theimage:</p>
<imgsrc="img_girl.jpg" width="500" height="600">
</body>
</html>
• The alt Attribute:- The required alt attribute for the <img> tag
specifies an alternate text for an image, if the image for some reason
cannot be displayed. This can be due to a slow connection, or an error
in the src attribute, or if the user uses a screen reader.
Example:
<!DOCTYPE html>
<html>
<body>
<h2>The alt Attribute</h2>
<p>The alt attribute should reflect the image content, so users who
cannot see theimage get an understanding of what the image
contains:</p>
<imgsrc="img_girl.jpg" alt="Girl with a jacket" width="500" height="600">
</body>
</html>
• The style Attribute
The style attribute is used to add styles to an element, such as

color, font, size, andmore.
Example:
<!DOCTYPE html>
<html>
<body>
<h2>The style Attribute</h2>
<p>The style attribute is used to add styles to an element, such as color:</p>
<p style="color:red;">This is a red paragraph.</p>
</body>
</html>
• The lang Attribute:- You should always include the lang

attribute inside the <html> tag, to declare the language of the Web
page. This is meant to assist search engines and browsers.
The following example specifies English as the language:
<!DOCTYPE html>
<html lang=‖en‖>
<body>
</body>
</html>
• The title Attribute:- The title attribute defines some extra

information about an element. The value of the title attribute will be
displayed as a tooltip when you mouse over the element:
Example:
<!DOCTYPE html>
<html>
<body>
<h2 title=‖I’m a header‖>The title Attribute</h2>
<p title=‖I’m a tooltip‖>Mouse over this paragraph, to display the

title attribute as atooltip.</p>
</body>
<
>
:
CHAPTER 4
HTML FORMATTING
HTML Formatting is a process of formatting text for better look and feel.
HTML provides us the ability to format text without using CSS. There are
many formatting tags in HTML. These tags are used to make text bold,
italicized, or underlined.
HTML formatting tags:
Table 4.1 HTML formatting tags
• BOLD Text:
The HTML <b> element is a physical tag which display text in bold font,
without any logicalimportance. If you write anything within <b>. </b>
element, is shown in bold letters.
Example
This will produce the following result:
• STRONG Text:
The HTML <strong> tag is a logical tag, which displays the

content in bold font and informs the browser about its logical
importance. If you write anything
between<strong>???????.</strong>, an important text is shown.
Example
• ITALIC Text:
The HTML <i> element is physical element, which display the

enclosed contentin italic font, without any added importance. If
you write anything within
<i>. .......... </i> element, is shown in italic letters.
Example
• . EMPHASIZED Text:
The HTML <em> tag is a logical element, which will display the
enclosedcontent in italic font, with added semantics importance.
Example
• . MARKED/HIGHLIGHTED Text:
To mark or highlight a text, write the content within <mark>.........</mark>.
Example
• UNDERLINED Text:
Anything that appears within <u>…</u> element, is displayed

with underline asshown below:
Example
• SUPERSCRIPT Text:
The content of a ... element is written in superscript; the font size

used is the same size as the characters surrounding it but is
displayed half a character's height abovethe other characters.
Example
• SUBSCRIPT Text:
The content of a ... element is written in subscript; the font size

used is the same as the characters surrounding it but is displayed
half a character's height beneath the other characters.
Example
• DELETED Text:
Anything that appears within <del>…</del> element, is displayed
as deleted text.Example
INSERTED Text:
Anything that appears within <ins>…</ins> element is displayed
as inserted text.Example
• Smaller Text:
The content of the <small>...</small> element is displayed one font size

smaller than therest of the text surrounding it as shown below:
Example

• . Larger Text:
The content of the <big>...<big> element is displayed one font size larger
than the rest ofthe text surrounding it as shown below:
Example
• PHRASE TAGS
HTML phrase tags are unique purpose tags designed to use indefinite
cases, even thoughthey're implemented in the same manner as other tags
are used.
HTML phrase tags list:
• Emphasis Tag
• Marked Tag
• Strong Tag
• Acronym Tag
• Text Direction Tag
• Special Terminology/Definition Tag
• Quotation Tag
• Short Quote Tag
• Text Citation Tag
• Code Tag
• Keyboard Tag
• Programming Variable Tag
• Program Output Tag
• Address Tag
• Emphasis Tag
Emphasis Tag emphasizes or stresses the texts within its opening and
closing tags, that is,anything that appears within <em>...</em>element is
displayed as emphasized text.
Example:
The following word uses emphasized typeface.
• Marked Tag
The mark tag defines text with a highlighted yellow background that
should be marked or highlighted. Anything that appears with-in
<mark>...</mark>element, is displayed as marked with yellow ink.
Example:
The following word has been marked with yellow.
• Strong Tag
The mark tag defines the appearance of the text as solid or bold, which
should be more significant.Anything that appears within
<strong>...</strong>element is displayed as important text.
Example:
The following word uses a strong typeface.
Abbreviation Tag is used to give an abbreviation to any word written

within theopening<abbr>and closing</abbr> tag.
Example:
My best friend's name is Abhy.
• Acronym Tag
Acronym Tag is used to show that the text within the opening<acronym>
and closing tag</acronym>is an acronym. This tag is not supported in
HTML5.At present, the major browsers do not change the appearance of
the content of the <acronym>element.
Example:
This chapter covers marking up text in XHTML.
• Text DirectionTag
The <bdo>...</bdo>element stands for Bi-Directional Override and it is

used to overridethe currenttext direction.
Example:

This text will
go left to
right. This
text will go
right to left.
• Special Terminology / Definition Tag
Special Terminology/Definition Tag is used when HTML developers

introduce a special term and display it differently.It's Usage is similar to
italic words in the midst of a paragraph.
Typically, you would use the <dfn> element the first time you introduce a
key term. Most recent browsers render the content of a <dfn> element in
an italic font.
Example:
• Quotation Tag
Quoting Tag is used when HTML developers want to add a quote to a

passage from a different source.Text inside a <blockquote> element is
usually indented from the left and right edges of the surrounding text, and
sometimes uses an italicized font.
Example:
The following description of XHTML is taken from the W3C Web site:
XHTML 1.0 is the W3C's first Recommendation for XHTML, following
on from earlierwork on HTML 4.01, HTML 4.0, HTML 3.2 and HTML
2.0.
Short Quote Tag
Short Quote Tag is used for adding a double quote to your statement on
your web page.Text to be quoted should be placed in <q>...</q>element.
Example:
Amit is in Spain, I think I am wrong.
• Text Citations Tag
If you are quoting a text, you can indicate the source placing it between an
opening
<cite>tag andclosing</cite>tag
As you would expect in a print publication, the content of the <cite>

element is renderedin italicized text by default.
Example:
This HTML tutorial is derived from W3 Standard for HTML.
• Code Tag
Code Tag is used for making text visualization as mono-spaced font, just
like most of the programming books display code text. Any programming
code to appear on a Web page should be placed inside
<code>...</code>tags.
Example:
Regular text. This is code. Regular text.
• Keyboard Tag
The HTML <kbd> tag defines text as input from a keyboard such as the
Ctrl key, Enter,etc. Browsersrender text within <kbd> tags in monospace
font.
When you are talking about computers, if you want to tell a reader to enter
some text, youcan use the <kbd>...</kbd>element to indicate what should
be typed in.
Example:
Regular text. This is inside the kbd element Regular text.
• Programming VariablesTag
This element is usually used in conjunction with the <pre>and

<code>elements toindicate that thecontent of that element is a variable.
Example:
document.write("user-name")
• Program OutputTag
The <samp>...</samp>element indicates sample output from a program,

and script etc.Again, it is mainly used when documenting programming
or coding concepts.
Example:
Result produced by the program is Hello World!
• Address Tag
The address tag is used to specify and emphasize that a set of text is an
address.The<address>...</address>element is used to contain any address.
Example:
388A, Road No 22, Jubilee Hills - Hyderabad
• Definition and Usage:
HTML <META> TAG
CHAPTER 5
The <meta> tag defines metadata about an HTML document. Metadata is

data(information) about data.
<meta> tags always go inside the <head> element, and are typically used
to specify character set, page description, keywords, author of the
document, and viewport settings.
Metadata will not be displayed on the page, but is machine parsable.

Metadata is used by browsers (how to display content or reload page),
search engines (keywords), and other web services.
There is a method to let web designers take control over the viewport (the
user's visible area of a web page), through the <meta> tag (See "Setting
The Viewport" examplebelow).
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>All meta information goes in the head section...</p>
</body>
</html>
Output:
Attributes:-
Table 5.1. Attributes of meta tags in HTML
• Global Attributes
The <meta> tag also supports the Global
Attributes in html.More Examples
Define keywords for search engines:
<meta name="keywords" content="HTML,
CSS, JavaScript">Define a description of your
web page:
<meta name="description" content="Free Web tutorials for
HTML and CSS">Define the author of a page:
<meta name="author" content="John Doe">
Refresh document every 30 seconds:
<meta http-equiv="refresh" content="30">
Setting the viewport to make your website look good on all devices:
<meta name="viewport" content="width=device-width,
initial-scale=1.0">Setting the Viewport
The viewport is the user's visible area of a web page. It varies with the
device - it will besmaller on a mobile phone than on a computer screen.
You should include the following <meta> element in all your web pages:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This gives the browser instructions on how to control the page's dimensions and
scaling.
The width=device-width part sets the width of the page to follow the
screen-width of thedevice (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is
first loaded by thebrowser.
HTML COMMENTS
CHAPTER 6
HTML comments are not displayed in the browser, but they can help
document yourHTML source code.
HTML Comment Tag
You can add comments to your HTML source by using the following syntax:

Notice that there is an exclamation point (!) in the start tag, but not in the end tag.
Note: Comments are not displayed by the browser, but they can help
document your HTMLsource code.
Add Comments
With comments you can place notifications and reminders in your
HTML code:Example:
<!DOCTYPE html>
<html>
<body>

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

</body>
<
>
CHAPTER 7
HTML IMAGE LINKS
To use an image as a link, just put the <img> tag inside the <a> tag:
Example:
<!DOCTYPE html>
<html>
<body>
<h2>Image as a Link</h2>
<p>The image below is a link. Try to click on it.</p>
<a href=‖default.asp‖><imgsrc=‖mitlogo.jpg‖ alt=‖HTML tutorial‖

style=‖width:42px;height:42px;‖></a>
</body>
</html>
Output:
HTML TABLES
CHAPTER 8
HTML tables allow web developers to arrange data into rows and columns. A
table in HTMLconsists of table cells inside rows and columns.
• Basic HTML table tags:

• Table Cells
Syntax:
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>
Each table cell is defined by a <td> and a </td> tag. Here td

stands for table data.Everything between <td> and </td> are the
content of the table cell.
• Table Rows
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
Each table row starts with a <tr> and ends with a </tr> tag. Here tr stands for table
row.
Syntax:-
• Table Headers (th)
<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr><table>
Sometimes you want your cells to be table header cells. In those cases
use the <th> taginstead of the <td> tag:
• HTML Table Border
When you add a border to a table, you also add borders around each table cell:
Border
Collapsed Border
To add a border, use the

CSS border property on table, th,and td elements
Set the CSS border-collapse propertyto collapse.
table, th, td {
border: 1px solid black;
}
table, th, td {
border: 1px solid black; border-collapse: collapse;
Style Border
Round TableBorders
HTML tables can have borders ofdifferent styles and shapes.
With the border-radius property, theborders get rounded corners.
}
th, td {
background-color: #96D4D4;
}
table, th, td {
border: 1px solid black;border-radius: 10px;
Dotted TableBorders
With the border-style property, you canset the appearance of the border.
}
th, td {
border-style: dotted;
}
Table 8.1 Html Table Border

• Cell Padding
Example:
t
h
,
t
d
p
a
d
d
i
n
g
:
1
5
p
x
;
}
Cell padding is the space between the cell edges and the cell
content. By default thepadding is set to 0. To add padding on table
cells, use the CSS padding property.
• Cell Spacing
Cell spacing is the space between each cell. By default the space is set to
2 pixels. To change the space between table cells, use the CSS
border-spacing property on the table element.
Example:
table {
border-spacing: 30px;
}
• Colspan
Example:
<table><tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr></table>
To make a cell span over multiple columns, use the colspan

attribute.
• Rowspan
Example:
<table><tr>
<th rowspan="2">Phone</th>
<td>555-1234</td>
</tr></table>
To make a cell span over multiple rows, use the rowspan attribute.
• .HTML Table Colgroup
If you want to style the two first columns of a table, usethe <colgro
Each group is specified with a <col> element. The span attribute

specifies how manycolumns that get the style. The style attribute
specifies the style to give the columns.
Example:
<table style="width: 100%;">
<colgroup>
<col span="2" style="background-color: #D6EEEE">
</colgroup>
Output:
A basic HTML table
CHAPTER 9
HTML—LISTS
HTML lists allow web developers to group a set of
related items in lists.An unordered HTML list:
• Item
• Item
• Item
• Item
• An ordered HTML list:
• First item
• Second item
• Third item
• Fourth item
Example :
<!DOCTYPE html>
< html l>
<body>
<h2>An Unordered HTML List</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h2>An Ordered HTML List</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Output :
• An Unordered HTML List

• Coffee
• Tea
• Milk
• An Ordered HTML List
• Coffee
• Tea
• Milk
CH
APTER 10HTML LINKS - THE TARGET
ATTRIBUTE
By default, the linked page will be displayed in the current browser
window. To changethis, you must specify another target for the link.
The target attribute specifies where to open the linked

documen.Thetarget attribute canhave one of the following values:
_self - Default. Opens the document in the same window/tab as it was clicked
_blank - Opens the document in a new window or tab
_parent - Opens the document in the parent frame
_top - Opens the document in the full
body of the windowExample
Use target="_blank" to open the linked document in a new browser window or tab:
<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
• Html Blocks
Block-level Elements:
A block-level element always starts on a new line, and the browsers

automatically addsome space (a margin) before and after the element.
A block-level element always takes up the full width available

(stretches out to the leftand right as far as it can).
Two commonly used block elements are: <p>
and <div>. The <p> element defines a
paragraph in an HTML document.
The <div> element defines a division or a section in an
HTML document.The <p> element is a block-level
element.
The <div> element is a block-level element.
Example
<p>Hello World</p>
<div>Hello World</div>
CODE:
<!DOCTYPE html>
<html>
<body>
<p style="border: 1pxsolid black">Hello World</p>
<div style="border: 1px solid black">Hello World</div>
<p>The P and the DIV elements are both

block elements, and they will always start on
a new line and take up the full
width available (stretches out to the left and right as far as it can).
</p>
</body>
</html>
OUTPUT:
• Inline Elements
An inline element does not start on a new line.
An inline element only takes up as much width
as necessary.This is a <span> element inside a
paragraph.
Example
<span>Hello World</span>
CODE:
<!DOCTYPE html>
<html>
<body>
<p>This is an inline span <spanstyle="border: 1px solid black">Hello

World</span> elementinside a paragraph.</p>
<p>The SPAN element is an inline element, and will not start on a new
line and only takesup as much width as necessary.</p>
</body>
<
>
U
T
This is an inline span Hello World element inside a paragraph.
The SPAN element is an inline element, and will not start on a

new line andonly takes up as much width as necessary.
Note: An inline element cannot contain a block-level element!
CHAPTER 11
CSS BACKGROUNDS
The CSS background properties are used to add background
effects for elements.CSS background properties:
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background (shorthand property)
11.1CSS background-color
The background-color property specifies the background color of an element.
Example:-
Output:-
• CSS background-image
The background-image property specifies an image to use as the

background of anelement.
By default, the image is repeated so it covers the entire element.
Example:-
Output:-
• CSS background-repeat
By default, the background-image property repeats an image both

horizontally andvertically.
Some images should be repeated only horizontally or vertically, or they

will look strange,like this:
Example:-
Output:-
11.4 CSS background-attachment
The background-attachment property specifies whether the background

image shouldscroll or be fixed (will not scroll with the rest of the page):
Example:-
<!DOCTYPE html>
<html>
<head>
<
s
t
y
l
e
>
b
o
d
y
{
background-image:
url("img_tree.png");
background-repeat: no-
repeat; background-
position: right top;
margin-right:
200px;
background-
attachment:
fixed;
}
</style>
</head>
<body>
<h1>The background-attachment Property</h1>
<p>The background-attachment property specifies whether the background image should

scroll or befixed (will not scroll with the rest of the page).</p>
<p><strong>Tip:</strong> If you do not see any scrollbars, try to resize the browser
window.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>

</body>
</html>
Output:-
CSS background - Shorthand property

To shorten the code, it is also possible to specify all the background
properties in onesingle property. This is called a shorthand property.
Instead of writing:
Example:-
Output:
• HTML Fonts
HTML FONTS AND FORMS
CHAPTER 12
The CSS font-family property defines the font to be used for an HTML element:
Example
<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
</body>
</html>
OUTPUT:
• HTML Forms
An HTML form is used to collect user input. The user input is most often
sent to a serverfor processing.
Example
First name:
Last name:
The <form> Element
The HTML <form> element is used to create an HTML form for user input:
<form>
.
form elements
.
</form>
The <form> element is a container for different types of input

elements, such as: textfields, checkboxes, radio buttons, submit buttons,
etc.
Radio Buttons
The <input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices.
Example
A form with radio buttons:
<p>Choose your favorite Web

language:</p>
<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">

<label for="javascript">JavaScript</label>
</form>
This is how the HTML code above will be
displayed in a browser:Choose your favorite Web
language:
H
T
M
L
C
S
S
JavaScript
Checkboxes
The <input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of choices.
A Example
form with checkboxes:
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
This is how the HTML code above will be
displayed in a browser:I have a bike
h
a
v
e
c
a
r
h
a
v
e
b
o
a
t
The Action Attribute
The action attribute defines the action to be performed when the form is submitted.
Usually, the form data is sent to a file on the server when the user
clicks on the submitbutton.
In the example below, the form data is sent to a file called

"action_page.php". This filecontains a server-side script that handles the
form data:
Example
On submit, send form data to "action_page.php":
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
Tip: If the action attribute is omitted, the action is set to
the current page.The Method Attribute

The method attribute specifies the HTTP method to be used when
submitting the formdata.
The form-data can be sent as URL variables (with method="get") or

as HTTP posttransaction (with method="post").
The default HTTP method when submitting form data is GET.
<form action="/action_page.php" method="get">
<objectclass
width="200"heig
ht="200">
<paramname="code"value="applet.class">
</object>
HTML - THE HEAD ELEMENT
CHAPTER 13
The HTML <head> element is a container for

the followingelements: <title>, <style>,
<meta>, <link>, <script>, and <base>.
• The HTML <head> Element
The <head> element is a container for metadata (data about data) and is
placed betweenthe <html> tag and the <body> tag.
HTML metadata is data about the HTML document. Metadata is not displayed.
Metadata typically define the document title, character set, styles, scripts,
and other metainformation.
• HTML head Elements

• The HTML <title> Element
The <title> element defines the title of the document. The title must be
text-only, and it isshown in the browser's title bar or in the page's tab.
The <title> element is required in HTML documents!
The content of a page title is very important for search engine

optimization (SEO)! The page title is used by search engine algorithms to
decide the order when listing pages in search results.
The <title> element:
defines a title in the browser toolbar
provides a title for the page when it is
added to favoritesdisplays a title for the
page in search engine-results
A simple HTML document:
Example
<!DOCTYPE html>
<html>
<head>
<title>A Meaningful Page Title</title>
</head>
<body>
The content of the document......
</body>
</html>
Result:
The content of the body element is displayed in the browser window.

The content of the title element is displayed in the browser tab, in
favorites and in search-engine results.
• The HTML <link> Element
The <link> element defines the relationship between the current

document and an external resource.
The <link> tag is most often used to link to external style sheets:
Example
<link rel="stylesheet"
href="mystyle.css">Result:
( background-color)
Thi
s is
Hea
din
Thi
s is
para
gra
ph.
• The HTML <base> Element

The <base> element specifies the base URL and/or target for all relative
URLs in a page.The <base> tag must have either an href or a target
attribute present, or both.
There can only be one single <base> element in a document!
Example
Specify a default URL and a default target for all links on a page:
<head>
<base href="https://www.w3schools.com/" target="_blank">
</head>
<body>
<img src="images/stickman.gif" width="24" height="39" alt="Stickman">
<a href="tags/tag_base.asp">HTML base Tag</a>
</body>
HTML Styles - CSS
CHAPTER 14
CSS stands for Cascading Style Sheets.CSS saves a lot of work. It can
control the layout of multiple web pages all at once.
• CSS = Styles and Colors
Cascading Style Sheets (CSS) is used to format the layout of a webpage.
With CSS, you can control the color, font, the size of text, the spacing
between elements, how elements are positioned and laid out, what
background images or background colors are to be used, different displays
for different devices and screen sizes, and much more!
• Using CSS
CSS can be added to HTML documents in 3 ways:
• Inline - by using the style attribute inside HTML elements

• Internal - by using a <style> element in the <head> section
• External - by using a <link> element to link to an external CSS file
The most common way to add CSS, is to keep the styles in external CSS
files. However, in this tutorial we will use inline and internal styles,
because this is easier to demonstrate, and easier for you to try it yourself.
• Inline CSS
An inline CSS is used to apply a unique style to a single
HTML element.An inline CSS uses the style attribute of
an HTML element.
The following example sets the text color of the <h1> element to blue,
and the text colorof the <p> element to red:
Example:
• Internal CSS
An internal CSS is used to define a style for a single HTML page.
An internal CSS is defined in the <head> section of an HTML

page, within a <style> element.
The following example sets the text color of ALL the <h1> elements (on
that page) to blue, and the text color of ALL the <p> elements to red. In
addition, the page will be displayed with a "powderblue" background
color:
Example:
Output:
• External CSS
An external style sheet is used to define the style for many HTML pages.
To use an external style sheet, add a link to it in the <head> section of
each HTML page:Example:
The external style sheet can be written in any text editor. The file must
not contain anyHTML code, and must be saved with a .css extension.
Here is what the
"styles.css" file looks like:
"styles.css":
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p{
color: red;
}
Tip: With an external style sheet, you can change the look of an
entire web site, bychanging one file!
• CSS Colors, Fonts and Sizes
Here, we will demonstrate some commonly used CSS properties. You

will learn moreabout them later.
The CSS color property defines the text
color to be used. The CSS font-family

property defines the font to be used. The
CSS font-size property defines the text size
to be used.Example:
Use of CSS color, font-family and font-size properties:
Output:
• CSS Border
The CSS border property defines a border around an
HTML element.Tip: You can define a border for
nearly all HTML elements.
Example:
Use of CSS border property:
Output:
• CSS Padding
The CSS padding property defines a padding (space) between the text
and the border.Example:
Use of CSS border and padding properties:
Output:
• CSS Margin
The CSS margin property defines a margin (space)
outside the border.Example:
Use of CSS border and margin properties:
Output:
14.10. Link to External CSS
External style sheets can be referenced with a full URL or with a path
relative to thecurrent web page.
Example:
This example uses a full URL to link to a style sheet:
Example:
This example links to a style sheet located in the html folder on the current web site:
Example: »
This example links to a style sheet located in the same folder as the current page:
CHAPTER 15
HTML CLASS ATTRIBUTE
15.1. INTRODUCTION:
The HTML class attribute is used to specify a class for an HTML

element.MultipleHTML elements can share the same class.
The class attribute is often used to point to a class name in a style sheet. It
can also be used by JavaScript to access and manipulate elements with the
specific class name.
In the following example we have three <div> elements with a class

attribute with the value of "city". All of the three <div> elements will
be styled equally according to the .city style definition in the head
section:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.city {
backgroun
d-color:
tomato;
color:
white;
border:
2px
solid
black;
margin:
20px;
padding: 20px}
</style>
</head>
<body>
<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html>
Output:
To create a class; write a period (.) character, followed by a class name.

Then, define theCSS properties within curly braces {}:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.city {
backgroun
d-color:
tomato;
color:
white;
padding: 10px;
</style>
</head>
<body>
<h2 class="city">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>
</body>
</html>
Output:
HTML elements can belong to more than one class.
To define multiple classes, separate the class names with a space, e.g.
<div class="citymain">. The element will be styled according to all the
classes specified.
In the following example, the first <h2> element belongs to both the city
class and also tothe main class, and will get the CSS styles from both of
the classes:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.city {
backgroun
d-color:
tomato;
color:
white;
padding: 10px;}
.main {
text-align: center;
</style>
</head>
<body>
<h2>Multiple Classes</h2>
<p>Here, all three h2 elements belongs to the "city" class. In

addition, London alsobelongs to the "main" class, which center-aligns
the text.</p>
<h2 class="city main">London</h2>
</body>
</html>
Output:
Different HTML elements can point to the same class name.
In the following example, both <h2> and <p> point to the "city" class
and will share thesame style:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.city {
backgroun
d-color:
tomato;
color:
white;
padding: 10px;
</style>
</head>
<body>
<h2>Different Elements Can Share Same Class</h2>
<p>Even if the two elements do not have the same tag name, they can
both point to thesame class, and get the same CSS styling:</p>
<p class="city">Paris is the capital of France.</p>

</body>
</html>
Output:
The class name can also be used by JavaScript to perform certain

tasks for specificelements.
JavaScript can access elements with a specific class name withthe getElem
Example:
<!DOCTYPE html>
<html>
<body>
<h2>Use of The class Attribute in JavaScript</h2>
<p>Click the button to hide all elements with class name "city":</p>
<button onclick="myFunction()">Hide elements</button>
<h2 class="city">London</h2>
<script>
function myFunction() {
var x =
document.getElementsByClassNam
e("city");for (vari = 0; i<x.length;
i++) {
x[i].style.display = "none";
</script>
</body>
</html>
Output:
CHAPTER 16
HTML 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 HTMLdocument.
16.1. 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 (#), 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 . This <h1> element will be styled according to the #myHeader
style definition in the head section:
Example:
<!DOCTYPE html>
<html>
<head>
<
s
t
y
l
e
>
#
m
y
H
e
a
d
e
r
{
background-
color:
lightblue;
color: black;
p
a
d
di
n
g:
4
0
p
x;
te
xt
-
al
ig
n:
ce
nt
er
;
}
</style>
</head>
<body>
<h1 id="myHeader">My Header</h1>
</body>
</html>
Output:
The value of the id attribute must be unique within the HTML document
The id attribute is used by CSS and JavaScript to style/select a
specific elementThe value of the id attribute is case sensitive
The id attribute is also used to create HTML bookmarks
JavaScript can access an element with a specific id with the getElementById() method
CHAPTER 17
HTML IFRAMES
An HTML iframe is used to display a web page within a web page.
• HTML Iframe Syntax
The HTML <iframe> tag specifies an inline frame.
An inline frame is used to embed another document within the current HTML
document.
Syntax
<iframe src="url" title="description"></iframe>
Tip: It is a good practice to always include a title attribute for the

<iframe>. This is usedby screen readers to read out what the content of
the iframe is.
• Iframe - Set Height and Width
Use the height and width attributes to specify the
size of the iframe.The height and width are
specified in pixels by default:
Example
<iframe src="demo_iframe.htm" height="200"

width="300" title="IframeExample"></iframe>
Or you can add the style attribute and use the CSS height and width properties:
• Iframe - Remove the Border
By default, an iframe has a border around it.
To remove the border, add the style attribute and use the CSS border property:
Example
<iframe src="demo_iframe.htm" style="border:none;" title="Iframe
Example"></iframe>With CSS, you can also change the size, style and
color of the iframe's border:
Example
<iframe src="demo_iframe.htm" style="border:2px solid

red;"
title="IframeExample"></iframe>
• Iframe - Target for a Link
An iframe can be used as the target frame for a link.
The target attribute of the link must refer to the name attribute of the iframe:
CSS BOX MODEL
CHAPTER 18
All HTML elements can be considered as boxes.
• The CSS Box Model
In CSS, the term ―box model‖ is used when talking about design and layout.
The CSS box model is essentially a box that wraps around every HTML
element. It consists of: margins, borders, padding, and the actual content.
The image below illustrates the box model:
Explanation of the different parts:
Table18.1. The DIfferent parts in Box Model of The CSS
The box model allows us to add a border around elements, and to define
space betweenelements.
Example :
<!DOCTYPE html>
<html>
<head>
<
>
Background-
color:
lightgrey;
Width:
300px;
Border:
15px
solid
green;
Padding:
50px;
Margin: 20px;
</style>
</head>
<body>
<h2>Demonstrating the Box Model</h2>
<p>The CSS box model is essentially a box that wraps around every
HTML element. Itconsists of: borders, padding, margins, and the actual
content.</p>
<div>This text is the content of the box. We have added a 50px

padding, 20px marginand a 15px green border. UtEnim ad minim
veniam, quisnostrud exercitation ullamcolaboris nisi utaliquip ex
eacommodoconsequat. Duisauteirure dolor in reprehenderit in
voluptatevelitessecillumdoloreeufugiatnullapariatur.
ExcepteurSintOccaecatCupidatat non proident,
sunt in culpa quiofficiadeseruntmollitanim id
estlaborum.</div>
</body>
<
/
h
>
• Width and Height of an Element
In order to set the width and height of an element correctly in all

browsers, you need to know how the box model works.
Important: When you set the width and height properties of an element
with CSS, you just set the width and height of the content area. To
calculate the full size of an element, you must also add padding, borders
and margins.
Example :
<!DOCTYPE html>
<html>
<head>
<
>
width:
320px;
paddin
g:
10px;
border:
5px
solid
gray;
margin
: 0;
</style>
</head>
<body>
<h2>Calculate the total width:</h2>
<imgsrc="klematis4_big.jpg" width="350" height="263" alt="Klematis">
<div>The picture above is 350px wide. The total width of this element
is also350px.</div>
</body>
<
>
O
CSS BORDERS
CHAPTER 19
The Border Properties allow you to specify how the border of the box
representing anelement should look. There are three properties of a border
you can change:
The Border-color specifies the color of a border.
Theborder-stylespecifies whether a border should be solid, dashed line,

double line, orone of the other possible values.
Theborder-widthspecifies the width of a border.
Now, we will see how to use these properties with examples.

• The border-color Property
The border-color property allows you to change the

color of the border surrounding an element. You can individually change
the color of the bottom, left, top and right sides of an element's border
using the properties:
border-bottom-color changes the color of the
bottom border.border-top-color changes the
color of the top border.
border-left-color changes the color of
the left border. border-right-color
changes the color of the right border.
The following example shows the effect of all these properties:
border-color:#009900; /* Green */
</style>
<p class="example1">
This example shows all borders in different colors.
</p>
<p class="example2">
This example is showing all borders in green
color only. </p> It will produce the following
result:
• The border-style Property

The border-style property allows you to select one of the following styles of border:
• none:No border. (Equivalent of border-width:0;)

• solid:Border is a single solid line.
• dotted:Border is a series of dots.
• dashed:Border is a series of short lines.
• double:Border is two solid lines.
• groove:Border looks as though it is carved into the page.

• ridge:Border looks the opposite of groove.
• inset:Border makes the box look like it is embedded in the page.
• outset:Border makes the box look like it is coming out of the canvas.
• hidden:Same as none, except in terms of border-conflict resolution
for tableelements.
• You can individually change the style of the bottom, left, top, and
right borders ofan element using the following properties:
• border-bottom-style changes the style of bottom border.
• border-top-style changes the style of top border.
• border-left-style changes the style of left border.
• border-right-style changes the style
of right border.The following example
shows all these border styles:
<p style="border-width:4px; border-style:none;"> This is a border with none width.
</p>
<p style="border-width:4px; border-style:solid;"> This is a solid border.
</p>
<p style="border-width:4px; border-style:dashed;"> This is a dashed border.
</p>
<p style="border-width:4px; border-style:double;"> This is a double border.
</p>
<p style="border-width:4px; border-style:groove;"> This is a groove border.
</p>
<p style="border-width:4px; border-style:ridge"> This is aridge border.

</p>
<p style="border-width:4px; border-style:inset;"> This is a inset border.
</p>
<p style="border-width:4px; border-style:outset;"> This is a outset border.
</p>
<p style="border-width:4px; border-
style:hidden;">This is a hidden
border.
</p>
<p style="border-width:4px; border-top-style:solid; border-bottom-style:dashed;
This is a a border with four
different styles. </p>It will
produce the following result:
• The border-width Property
The border-width property allows you to set the width of an element

borders. The value of this property could be either a length in px, pt,
or cm, or it should be set tothin,medium, or thick.
You can individually change the width of the bottom, top, left, and right
borders of an element using the following properties:
• border-bottom-width changes the width of bottom border.

• border-top-width changes the width of top border.
• border-left-width changes the width of left border.
• border-right-width changes the width
of right border.The following example
shows all these border width:
<p style="border-width:4px; border-style:solid;"> This is a solid border

whose width is4px.
</p>
<p style="border-width:4pt; border-style:solid;"> This is a solid border

whose width is 4pt.
</p>
<p style="border-width:thin; border-style:solid;"> This is a solid border

whose width is thin.
</p>
<p style="border-width:medium;
border-style:solid;">This is a solid
border whose width is medium;
</p>
<p style="border-width:thick; border-style:solid;"> This is a solid border

whose width isthick.
</p>
<p style="border-bottom-width:4px; border-top-width:10px; border-

left-width: 2px;border-right-width:15px; border-style:solid;">
This is a a border with four different width.
</p>
It will produce the following result:
The border property allows you to specify color, style, and width of lines in one
property:
The following example shows how to use all the three properties into a
single property.This is the most frequently used property to set border
around any element.
<p style="border:4px solid red;">

This example is showing shorthand property
for border. </p>It will produce the following
result:
CSS ICONS
CHAPTER 20
Icons can easily be added to your HTML page, by using an icon library.
• HOW TO ADD ICONS
The simplest way to add an icon to your HTML page, is with an icon
library, such asFont 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 withCSS (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 inthe <head> section of your HTML page:
<script
src=https://kit.fontawesome.com/yourcode.jscrossorigin=”anonymous”>
</script>
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.jscrossorigin=‖anonymous‖
></script>
<!—Get your own code at fontawesome.com
</head>
<body>
<h1>Font Awesome icon library</h1>
<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>
<
>
• Bootstrap Icons
To use the Bootstrap glyphicons, add the following line inside the <head>
section of yourHTML page:
<link rel=‖stylesheet‖
href=‖https://maxcdn.bootstrapcdn.com/Example
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Icons</title>
<link
rel=‖stylesh
eet‖
href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css>
</head>
<body class=‖container‖>
<h1>Bootstrap icon library</h1>
<p>Some Bootstrap icons:</p>
<I class=‖glyphiconglyphicon-cloud‖></i>
<I class=‖glyphiconglyphicon-remove‖></i>
<I class=‖glyphiconglyphicon-user‖></i>
<I class=‖glyphiconglyphicon-envelope‖></i>
<I class=‖glyphiconglyphicon-thumbs-up‖></i>
<br><br>
<p>Styled Bootstrap icons (size and color):</p>
<I class=‖glyphiconglyphicon-cloud‖ style=‖font-size:24px;‖></i>

<I class=‖glyphiconglyphicon-cloud‖ style=‖font-size:36px;‖></i>
<I class=‖glyphiconglyphicon-cloud‖ style=‖font-size:48px;color:red;‖></i>
<I class=‖glyphiconglyphicon-cloud‖ style=‖font-size:60px;color:lightblue;‖></i>
</body>
<
>
• Google Icons
To use the Google icons, add the following line inside the <head> section
of your HTMLpage:
href=https://fonts.googleapis.com/icon?family=Material+Icons> Example
<!DOCTYPE html>
<html>
<head>
<title>Google Icons</title>
href=https://fonts.googleapis.com/icon?family=Material+Icons>
</head>
<body>
<h1>Google icon library</h1>
<p>Some Google icons:</p>
<I class=‖material-icons‖>cloud</i>
<I class=‖material-icons‖>favorite</i>
<I class=‖material-icons‖>attachment</i>
<I class=‖material-icons‖>computer</i>
<I class=‖material-icons‖>traffic</i>
<br><br>
<p>Styled Google icons (size and color):</p>
<I class=‖material-icons‖ style=‖font-size:24px;‖>cloud</i>
<I class=‖material-icons‖ style=‖font-size:36px;‖>cloud</i>
<I class=‖material-icons‖ style=‖font-size:48px;color:red;‖>cloud</i>
<I class=‖material-icons‖ style=‖font-size:60px;color:lightblue;‖>cloud</i>
</body>
<
>
t
Demo: Navigation BarsVertical
Home News Contact About Horizontal
CSS NAVIGATION BAR
CHAPTER 21
21.1. 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 makesperfect sense:
Example
Output:-
21.1. Vertical Navigation Bar
To build a vertical navigation bar, you can style the <a> elements
inside the list, inaddition to the code from the previous page:
Example
<!DOCTYPE html>
<html>
<head>
<
s
t
y
l
e
>
u
l
{
l
i
s
t
-
s
t
y
l
e
-
t
y
p
e
:
n
o
n
e
;
m
a
r
g
i
n
:
0
;
p
a
d
d
i
n
g
:
0
;
w
i
d
t
h
:
2
0
0
p
x
;
backgr
ound-
color:
#f1f1f
1;
border
: 1px
solid
#555;
}
li a {
d
i
s
p
l
a
y
:
b
l
o
c
k
;
c
o
l
o
r
:
#
0
0
0
;
p
a
d
d
i
n
g
:
8
p
x
1
6
p
x
;
text-decoration: none;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}
li a.active {
backgrou
nd-color:
#04AA6D
;color:
white;
}
li
a:ho
ver:n
ot(.a
ctive
){
back
grou
nd-
color
:
#555
;
color
:
whit
e;
}
</style>
</head>
<body>
<h2>Vertical Navigation Bar</h2>

<p>In this example, we center the navigation links and add a border to the navigation bar.</p>
<ul>
<li><a class="active" 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>
</body>
</html>
Output:-
21.3. Horizontal Navigation Bar
There are two ways to create a horizontal navigation bar. Using

inline or floating listitems.
Inline List Items
One way to build a horizontal navigation bar is to specify the <li>

elements as inline, inaddition to the "standard" code from the previous
page:
Example
<!DOCTYPE html>
<html>
<head>
<
s
t
y
l
e
>
u
l
{
list-
styl
e-
typ
e:
non
e;
mar
gin:
0;
p
a
d
d
i
n
g
:
0
;
o
v
e
r
f
l
o
w
:
h
i
d
d
e
n
;
background-color: #333;
}
li {
float: left;
}
li a {
d
i
s
p
l
a
y
:
b
l
o
c
k
;
c
o
l
o
r
:
w
h
i
t
e
;
text-
align
:
cent
er;
padd
ing:
14px
16px
;
text-
deco
ratio
n:
none
;
}
li a:hover {
background-color: #111;
}
</style>
</head>
<body>
<ul>
<li><a class="active" 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>
</body>
</html>
Output:-
CHAPTER 22
MY PROJECTS
Fig.22.1 Screenshot 1

Sodapdf

Uploaded by

Copyright:

Available Formats

You might also like

Sodapdf

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Sodapdf

Uploaded by

Copyright:

Available Formats

Hypertext Markup Language & Cascading Style Sheet

for the award of the Degree of

Department of Computer Science Engineering

(With Specialization In Computer Science & Engineering)

Mr. Ankush Sharma Yash

Assistant Professor Roll

Department of Computer Science & Engineering

Mr. Ankush Sharma

Assistant Professor, CSE Dept.

Assistant Professor, CSE Department.

Modi Institute of Technology, Kota.

• HTML horizontal rules

• HTML line breaks

• HTML text alignment

• HTML pre tags

Chapter 3. HTML ATTRIBUTES

Chapter 4. HTML FORMATTING

• Programming Variable Tag

• Program Output Tag

Chapter5. HTML META TAG

• Definition and Usage

Chapter6. HTML COMMENTS 31

Chapter 7. HTML IMAGE 32

Chapter 8. HTML TABLES

• Basic HTML table tags

• HTML Table Border

• HTML Table Colgroup

Chapter 9. HTML LISTS 37-38

Chapter 10. HTML TARGET ATTRIBUTES

Chapter 11. CSS BACKGROUNDS

• background (shorthand property) 46

Chapter 12. HTML FONTS AND FORMS

• The HTML <head> Element

• HTML head elements13.2.The HTML <title> Element

13.3.The HTML <link> Element 13.4.The HTML <base> Element

Chapter 14. HTML-CSS STYLES

• CSS = Styles and Colors

• CSS Colors, Fonts and Sizes

• Link to External CSS 63

Chapter 15. HTML CLASS ATTRIBUTE

15.1.Introduction with Different Examples

Chapter 16. HTML ID ATTRIBUTE

16.1. Using The id Attribute

Chapter 17. HTML IFRAMES

• Iframe - Set Height and Width

• Iframe - Remove the Border17.4.Target for a Link

Chapter 18. CSS BOX MODEL

• The CSS Box Model

Chapter 19. CSS BORDERS

• The border-color Property

• The border-style Property

• The border-width Property

Chapter 20. CSS ICONS 87-91

Chapter 21. CSS NAVIGATION BAR

21.1.Navigation Bars 21.2.Vertical Navigation Bar

21.3. Horizontal Navigation Bar

Chapter 22. MY PROJECTS 98-102

S.No. Table Name Page

To display a less than sign (<) we must write: < or <