Wad Lab Manual
Wad Lab Manual
HTML stands for Hyper Text Markup Language, which is the most widely used language on Web
to develop web pages. HTML was created by Berners-Lee in late 1991
Currently we are having HTML-5 version which is an extension to HTML 4.01, and this version was
published in 2012.
HTML is a MUST for students and working professionals to become a great Software Engineer
specially when they are working in Web Development Domain.
<!DOCTYPE html>
<html>
<head>
<title>Learning HTML</title>
</head>
<body>
<h1>Aditya College of Engineering</h1>
<p>We the students belongs to CSE_IOT</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)
6
• 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
OUTPUT:
7
EXERCISE-2
Web Browser
A web browser is a software application specifically for the purpose of reading HTML instructions and
displaying the resulting Web page. It is fully functional software that can interpret and display HTML
Web pages, applications, JavaScript, AJAX and other content hosted on Web servers. HTML is
responsible for telling a Web browser how text and other objects in a Web document should appear.
How a Web Browser Work
A web browser typically reads and renders HTML documents. This happens inside the browser as two
stages - the parsing stage and the rendering stage. During the parsing stage, the browser reads the
markup in the document, breaks it down into components, and builds a document object model (DOM).
When the DOM tree has been constructed, and any CSS style sheets have been loaded and parsed, the
browser starts the rendering stage. Each node in the DOM tree will be rendered and displayed in the
browser.
All web activity begins on the client side, when a user starts his or her browser. Each browser renders
HTML a bit differently such as handles JavaScript, multimedia, style sheets, and other HTML add-ins
differently. Web browsers were created specifically for the purpose of reading HTML instructions and
displaying the resulting Web page. So when you work with HTML, you need to test your pages on as
many different browsers as you can.
8
EXERCISE-3
3. Learn HTML Using notepad or Text Edit.
➢ Web pages can be created and modified by using professional HTML editors.
➢ However, for learning HTML we recommend a simple text editor like Notepad (PC) or Text
Edit (Mac).
➢ We believe that using a simple text editor is a good way to learn HTML.
➢ Follow the steps below to create your first web page with Notepad or Text Edit.
Windows 8 or later:
Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad.
Windows 7 or earlier:
Open Start > Programs > Accessories > Notepad
HTML text editors are used to create and modify web pages. HTML codes can be written in any
text editors including the notepad. One just needs to write HTML in any text editor and save the
file with an extension “.html” or “.htm”. Some of the popular HTML text editors are given below:
• Notepad
• Notepad++
• Sublime Text 3
• Atom
9
1. Open any of the text editors of your choice. Here we are using the notepad text editor.
10
4. Save the file with a suitable name of your choice and .html extension.
Open the saved HTML file in your favorite browser (double clicks on the file, or right-click – and
choose “Open with”).
11
12
EXERCISE-4
1. HTML tag: It is the root of the HTML document which is used to specify that the document is
HTML.
Syntax:
Code:
<html>
<head>
<title>Title of your web page</title>
</head>
<body>HTML web page contents </body>
</html>
Output:
2.Head tag: The head tag is used to contain all the head elements in the HTML file. It contains the
title, style, meta, … etc tag.
Syntax:
Code:
13
Output:
3.Body tag: It is used to define the body of an HTML document. It contains images, tables, lists, …
etc.
Syntax:
Code:
Output:
Syntax:
14
Code:
<title>tab name</title>
Output:
Syntax:
<head>
<title>Heading Tags</title>
</head>
<body>
<h1>Aditya College of Engineering</h1>
<h2> Aditya College of Engineering </h2>
<h3> Aditya College of Engineering </h3>
<h4> Aditya College of Engineering </h4>
<h5> Aditya College of Engineering </h5>
<h6> Aditya College of Engineering </h6>
</body>
</html>
15
Output:
Syntax:
<p> Statements... </p>
Code:
<p>We the Students belongs to CSE_IOT</p>
Output :
Syntax:
Code:
<em>Aditya College of Engineering</em>
16
Output:
Syntax:
<b> Statements... </b>
Code:
<b>Bold word</b>
Output:
Syntax:
<i> Statements... </i>
Code:
<i>Aditya College of Engineering</i>
17
Output:
Syntax:
<u> Statements... </u>
Code:
<u>Aditya College of Engineering</u>
Output:
18
HTML Elements
An HTML element is the collection of start and end tags with the content inserted in between them.
Syntax:
<tagname > Contents... </tagname>
i) Opening tag: It is used to tell the browser where the content material starts.
ii) Closing tag: It is used to tell the browser where the content material ends.
iii) Content: It is the actual content material inside the opening and closing tag.
Combining all these 3 parts results in an overall HTML Element.
Example 1: In this example <p> is a starting tag, </p> is an ending tag and it contains some
content between the tags, which form an element
<!DOCTYPE html>
<html>
<head>
<title>HTML Elements</title>
</head>
<body>
<p>Hi Everyone</p>
</body>
</html>
19
Output:
Nested HTML Elements: The HTML element is use inside the another HTML Element is called
nested HTML elements.
Example
This example describes the use of the Nested HTML elements. Here, <html> tag contains the
<head> and <body>.The <head> and <body> tag contains another elements so it is called nested
element.
<!DOCTYPE html>
<html>
<head>
<title>HTML Elements</title>
</head>
</body>
</html>
20
Output:
21
EXERCISE-5
Declaration of a Doctype:
A DOCTYPE declaration appears at the top of a web page before all other elements. According to
the HTML specification or standards, every HTML document requires a document type declaration
to ensure that the pages are displayed in the way they are intended to be displayed.
The DOCTYPE for HTML5 is case-insensitive and can be written as shown below:
< !DOCTYPE html >
The HTML <doctype> tag is used for specifying which version of HTML the document is using. This
is referred to as the document type declaration (DTD).
NOTE − The <!DOCTYPE> tag does not have an end tag!.
Example
<!DOCTYPE html>
<html>
<body>
<h1>HTML doctype declaration</h1>
<h2>This is HTML5 Doctype Tag</h2>
</body>
</html>
22
Output:
HTML 5 Declaration
Browser Support
23
EXERCISE-6
<body>
<p>Document content goes here.....</p>
</body>
</html>
Output:
Comments do not nest which means a comment cannot be put inside another comment. Second the
double-dash sequence "--" may not appear inside a comment except as part of the closing --> tag. You
must also make sure that there are no spaces in the start-of comment string.
24
Example
Here, the given comment is a valid comment and will be wiped off by the browser.
<!DOCTYPE html>
<html>
<head>
<title>Valid Comment Example</title>
</head>
<body>
<!-- This is valid comment -->
<p>Document content goes here.....</p>
</body>
</html>
Output:
But, following line is not a valid comment and will be displayed by the browser. This is because there
is a space between the left angle bracket and the exclamation mark.
<!DOCTYPE html>
<html>
<head>
<title>Invalid Comment Example</title>
</head>
<body>
< !-- This is not a valid comment -->
<p>Document content goes here.....</p>
</body>
</html>
25
Output:
Multiline Comments
So far we have seen single line comments, but HTML supports multi-line comments as well.
You can comment multiple lines by the special beginning tag <!-- and ending tag --> placed before the
first line and end of the last line as shown in the given example below.
Example
<!DOCTYPE html>
<html>
<head>
<title>Multiline Comments</title>
</head>
<body>
<!--
This is a multiline comment and it can
span through as many as lines you like.
-->
</html>
26
Output:
27
EXERCISE-7
HTML Lists
HTML lists allow web developers to group a set of related items in lists.
Example
• Item
• Item
• Item
• Item
1. First item
2. Second item
3. Third item
4. Fourth item
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles) by default:
Example:
<!DOCTYPE html>
<html>
<body>
<ul>
<li> Library</li>
<li>Racks </li>
<li>Books </li>
</ul>
</body>
</html>
28
Output:
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
Example:
<!DOCTYPE html>
<html>
<body>
<ol>
<li> Library</li>
<li> Racks</li>
<li> Books</li>
</ol>
</body>
</html>
29
Output:
HTML Links
What is a link?
It is a connection from one web resource to another. A link has two ends, An anchor and direction.
The link starts at the “source” anchor and points to the “destination” anchor, which may be any
Web resource such as an image, a video clip, a sound bite, a program, an HTML document or an
element within an HTML document. You will find many websites or social media platforms ( Like
YouTube, Instagram ) which link an image to a URL or a text to a URL etc.
This basically means that by using the ‘a’ tag, you can link 1 element of the code to another
element that may/may not be in your code.
Syntax Explanation:
href : The href attribute is used to specify the destination address of the link used. "href" stands for
Hypertext reference.
Text link : The text link is the visible part of the link.
30
Example:
<!DOCTYPE html>
<html>
<h3>Example Of Adding a link</h3>
<body>
</html>
Output:
31
Internal Links:
An internal link is a type of hyperlink whose target or destination is a resource, such as an image or
document, on the same website or domain.
Example:
<!DOCTYPE html>
<html>
<h3>Internal Link and External Link Example</h3>
<body>
//internal link
//external link
<p><a href="http://www.acoe.edu.in/">Aditya College of Engineering
</a> It is a link to the Aditya College of Engineering website on the World Wide Web.</p>
</body>
</html>
Output:
32
33
EXERCISE-8
8. Write HTML Programs using HTML img tag, HTML table tag.
HTML Images
Images can improve the design and the appearance of a web page.
Images are not technically inserted into a web page; images are linked to web pages. The <img> tag
creates a holding space for the referenced image.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
Syntax
The required src attribute specifies the path (URL) to the image.
Example:
<!DOCTYPE html>
<html>
<body>
<h2>Alternative text</h2>
<p>The alt attribute should reflect the image content, so users who cannot see the image get
an understanding of what the image contains:</p>
</body>
</html>
34
Output:
The alt Attribute
The required alt attribute provides an alternate text for an image, if the user for some reason cannot
view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).
<!DOCTYPE html>
<html>
<body>
<h2>Alternative text</h2>
<p>The alt attribute should reflect the image content, so users who cannot see the image get
an understanding of what the image contains:</p>
</body>
</html>
Output:
If a browser cannot find an image, it will display the value of the alt attribute:
<!DOCTYPE html>
<html>
<body>
<p>If a browser cannot find the image, it will display the alternate text:</p>
</body>
</html>
You can use the style attribute to specify the width and height of an image.
35
Example:
<!DOCTYPE html>
<html>
<body>
<h2>Image Size</h2>
<p>Here we use the style attribute to specify the width and height of an image:</p>
</body>
</html>
If you have your images in a sub-folder, you must include the folder name in the src attribute:
To point to an image on another server, you must specify an absolute (full) URL in the src attribute:
Tables are useful for various tasks such as presenting text information and numerical data. It can be
used to compare two or more items in the tabular form layout. Tables are used to create databases.
An HTML table consists of one <table> element and one or more <tr>, <th> and <td> elements
The <tr> element defines a table row, the <th> element defines a table header, and the <td> element
defines a table cell.
36
Example:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>CSE Departments</h1>
<table>
<tr>
<th>Department</th>
<th>No Of Students</th>
</tr>
<tr>
<td>CSE</td>
<td>100</td>
</tr>
<tr>
<td>CSE-IOT</td>
<td>80</td>
</tr>
<tr>
<td>CSE-AIML</td>
<td>60</td>
</tr>
</table>
</body>
</html>
37
OUTPUT:
Adding a border to an HTML Table: A border is set using the CSS border property. If you do not
specify a border for the table, it will be displayed without borders.
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
38
<tr>
<td>Priya</td>
<td>Sharma</td>
<td>24</td>
</tr>
<tr>
<td>Arun</td>
<td>Singh</td>
<td>32</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
<td>41</td>
</tr>
</table>
</body>
</html>
OUTPUT:
Adding Collapsed Borders in an HTML Table: For borders to collapse into one border, add the
CSS border-collapse property.
39
Example:
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Priya</td>
<td>Sharma</td>
<td>24</td>
</tr>
<tr>
<td>Arun</td>
<td>Singh</td>
<td>32</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
<td>41</td>
</tr>
</table>
</body>
</html>
40
OUTPUT:
Adding Cell Padding in an HTML Table: Cell padding specifies the space between the cell
content and its borders. If we do not specify a padding, the table cells will be displayed without
padding.
Adding Left Align Headings in an HTML Table: By default, the table headings are bold and
centered. To left-align the table headings, we must use the CSS text-align property.
Example:
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 20px;
}
th {
text-align: left;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
41
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Priya</td>
<td>Sharma</td>
<td>24</td>
</tr>
<tr>
<td>Arun</td>
<td>Singh</td>
<td>32</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
<td>41</td>
</tr>
</table>
</body>
</html>
OUTPUT:
Adding Cells that Span Many Columns in HTML Tables: To make a cell span more than one
column, we must use the colspan attribute.
Adding Cells that span many rows in HTML Tables: To make a cell span more than one row,
we must use the rowspan attribute.
42
Example:
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<h2>Cell that spans two columns:</h2>
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Vikas Rawat</td>
<td>9125577854</td>
<td>8565557785</td>
</tr>
</table>
</body>
</html>
OUTPUT:
43
Example:
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<h2>Cell that spans two rows:</h2>
<table style="width:100%">
<tr>
<th>Name:</th>
<td>Vikas Rawat</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>9125577854</td>
</tr>
<tr>
<td>8565557785</td>
</tr>
</table>
</body>
</html>
OUTPUT:
44
Performing Experiments on CSS Concepts
EXERCISE-10
10. Write a Simple Example Of CSS (CASCADING STYLE SHEET).
Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify
the process of making web pages presentable.
CSS is a MUST for students and working professionals to become a great Software Engineer specially
when they are working in Web Development Domain.
Some of the key advantages of learning CSS:
• Create Stunning Web site - CSS handles the look and feel part of a web page. Using CSS, you
can control the color of the text, the style of fonts, the spacing between paragraphs, how columns
are sized and laid out, what background images or colors are used, layout designs,variations in
display for different devices and screen sizes as well as a variety of other effects.
• Become a web designer - If you want to start a carrer as a professional web designer, HTML
and CSS designing is a must skill.
• Control web - CSS is easy to learn and understand but it provides powerful control over the
presentation of an HTML document. Most commonly, CSS is combined with the markup
languages HTML or XHTML.
• Learn other languages - Once you understands the basic of HTML and CSS then other related
technologies like javascript, php, or angular are become easier to understand.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
45
color: white;
text-align: center;
}
p{
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>
</body>
</html>
OUTPUT:
46
Advantages of CSS
• CSS saves time − You can write CSS once and then reuse same sheet in multiple HTML pages.
You can define a style for each HTML element and apply it to as many Web pages as you want.
• Pages load faster − If you are using CSS, you do not need to write HTML tag attributes every
time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag. So less code
means faster download times.
• Easy maintenance − To make a global change, simply change the style, and all elements in all
the web pages will be updated automatically.
• Superior styles to HTML − CSS has a much wider array of attributes than HTML, so you can
give a far better look to your HTML page in comparison to HTML attributes.
• Multiple Device Compatibility − Style sheets allow content to be optimized for more than one
type of device. By using the same HTML document, different versions of a website can be
presented for handheld devices such as PDAs and cell phones or for printing.
• Global web standards − Now HTML attributes are being deprecated and it is being
recommended to use CSS. So it’s a good idea to start using CSS in all the HTML pages to make
them compatible to future browsers.
47
EXERCISE-11
11.Write a HTML Program by applying CSS.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: pink;
}
h1 {
color: blue;
text-align: center;
}
{
font-family: Times New Roman;
font-size: 35px;
}
</style>
</head>
<body>
</body>
</html>
OUTPUT:
48
EXERCISE-12
A CSS comprises of style rules that are interpreted by the browser and then applied to the corresponding
elements in your document. A style rule is made of three parts −
• Selector − A selector is an HTML tag at which a style will be applied. This could be any tag like
<h1> or <table> etc.
• Property − A property is a type of attribute of HTML tag. Put simply, all the HTML attributes
are converted into CSS properties. They could be color, border etc.
• Value − Values are assigned to properties. For example, color property can have value
either red or #F1F1F1 etc.
• You can put CSS Style Rule Syntax as follows −
selector { property: value }
CSS selectors are used to "find" (or select) the HTML elements you want to style.
The element selector selects HTML elements based on the element name.
49
Example
Here, all <p> elements on the page will be center-aligned, with a red text color:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: center;
color: red;
}
</style>
</head>
<body>
</body>
</html>
OUTPUT:
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":
50
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
</body>
</html>
OUTPUT:
The class selector selects HTML elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the class name.
Example
In this example all HTML elements with class="center" will be red and center-aligned:
<!DOCTYPE html>
<html>
<head>
<style>
.center {
51
text-align: center;
color: red;
}
</style>
</head>
<body>
</body>
</html>
OUTPUT:
You can also specify that only specific HTML elements should be affected by a class.
Example
In this example only <p> elements with class="center" will be red and center-aligned:
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
</body>
</html>
52
OUTPUT:
The universal selector (*) selects all HTML elements on the page.
Example
The CSS rule below will affect every HTML element on the page:
<!DOCTYPE html>
<html>
<head>
<style>
*{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>
53
OUTPUT:
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):
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>
54
OUTPUT:
Element,element,.. div, p Selects all <div> elements and all <p> elements
55
EXERCISE-13
13.Write HTML Programs using CSS Colours and CSS Backgrounds.
CSS background-color
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
OUTPUT:
56
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:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p{
background-color: yellow;
}
</style>
</head>
<body>
</body>
</html>
57
OUTPUT:
CSS background-image
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("nature.gif");
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
58
OUTPUT:
The background image can also be set for specific elements, like the <p> element:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p{
background-image: url("paper.gif");
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
OUTPUT:
59
EXERCISE-14
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:
• Content - The content of the box, where text and images appear
• Padding - Clears an area around the content. The padding is transparent
• Border - A border that goes around the padding and content
• Margin - Clears an area outside the border. The margin is transparent
The box model allows us to add a border around elements, and to define space between elements.
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>
60
<h2>Demonstrating the Box Model</h2>
<p>The CSS box model is essentially a box that wraps around every HTML element. It
consists of: borders, padding, margins, and the actual content.</p>
<div> We the students belongs to CSE-IOT learning CSS Box Model. This text is the content
of the box. We have added a 50px padding, 20px margin and a 15px green border. </div>
</body>
</html>
OUTPUT:
61
EXERCISE-15
o Border
o Margin
o Padding
o Content
Border Field
It is a region between the padding-box and the margin. Its proportions are determined by the width and
height of the boundary.
Margin Field
This segment consists of the area between the boundary and the edge of the border.
The proportion of the margin region is equal to the margin-box width and height. It is better to separate
the product from its neighbor nodes.
Padding Field
This field requires the padding of the component. In essence, this area is the space around the subject
area and inside the border-box. The height and the width of the padding box decide its proportions.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 320px;
padding: 10px;
margin-left:50px;
}
62
</style>
</head>
<body>
</body>
</html>
OUTPUT:
63
EXERCISE-16
16.Write HTML Programs using CSS Text and Font Properties.
TEXT FORMATTING
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid gray;
padding: 8px;
}
h1 {
text-align: center;
text-transform: uppercase;
color: #4CAF50;
}
p{
text-indent: 50px;
text-align: justify;
letter-spacing: 3px;
}
</style>
</head>
<body>
<div>
<h1>Text Formatting</h1>
<p>This text is styled with some of the text formatting properties. The heading uses the text-align,
text-transform, and color properties. The paragraph is indented, aligned, and the space between
characters is specified.</p>
</div>
</body>
</html>
64
OUTPUT:
Text Color
The color property is used to set the color of the text. The color is specified by:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: blue;
}
h1 {
color: green;
}
</style>
</head>
<body>
</body>
</html>
65
OUTPUT:
66
EXERCISE-17
17.Write HTML Programs using CSS Icons.
CSS ICONS
Icons can easily be added to your HTML page, by using an icon library.
All the icons in the library can be formatted using CSS. They can be customized according to size,
color, shadow, etc. The icon is a graphical representation that conveys the specific meaning for which
it is used for & helps to navigate accordingly.
There are 3 types of icon libraries available, namely
• Font Awesome Icons
• Google Icons
• Bootstrap Icons
We will include the required CDN link from the available icon library, which will help us to use the
pre-defined icon classes or we can customise it using the CSS.
Approach: In order to use icons, we need to add the required CDN link inside the <head> section.
The following steps to add the predefined class in the HTML:
• Add the name of the icon class to any inline HTML element.
• The <i> and <span> elements are widely used to add icons.
• All the CSS icons are scalable vector icons that can be customized with the required CSS
properties such as size, color, shadow, etc.
To use Font Awesome Icons, add the following link inside the <head> section.
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Syntax:
<i class="fa fa-cloud"></i>
67
Example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h1>My Icons</h1>
<i class="fa fa-cloud" style="font-size:32px;"></i>
<i class="fa fa-heart" style="font-size:32px;"></i>
<i class="fa fa-file" style="font-size:32px;"></i>
<i class="fa fa-car" style="font-size:32px;"></i>
<i class="fa fa-bars" style="font-size:32px;"></i>
</body>
</html>
OUTPUT:
We can use the font-size property to make it large-size icons for display. The below example
illustrates the use of the font-size property.
68
Example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h1>My Icons</h1>
<i class="fa fa-cloud" style="font-size:32px;"></i>
<i class="fa fa-heart" style="font-size:32px;"></i>
<i class="fa fa-file" style="font-size:32px;"></i>
<i class="fa fa-car" style="font-size:32px;"></i>
<i class="fa fa-bars" style="font-size:32px;"></i>
</body>
</html>
OUTPUT:
69
EXERCISE-18
18.Write HTML Programs using CSS Links and Lists.
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
• unordered lists (<ul>) - the list items are marked with bullets
• ordered lists (<ol>) - the list items are marked with numbers or letters
The following example shows some of the available list item markers:
70
Example:
<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
</head>
<body>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>
OUTPUT:
CSS LINK
With CSS, links can be styled in many different ways.
Styling Links
Links can be styled with any CSS property (e.g. color, font-family, background, etc.).
72
In addition, links can be styled differently depending on what state they are in.The four links states
are:
<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/* selected link */
a:active {
color: blue;
}
</style>
</head>
<body>
</body>
</html>
73
OUTPUT
When setting the style for several link states, there are some order rules:
74