0% found this document useful (0 votes)
48 views69 pages

Wad Lab Manual

Uploaded by

sidhu.valavala
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
48 views69 pages

Wad Lab Manual

Uploaded by

sidhu.valavala
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 69

HTML (Hyper Text Markup Language)

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.

Some of the key advantages of learning HTML:


➢ Create Web site - You can create a website or customize an existing web template if you know
HTML well.
➢ Become a web designer - If you want to start a carrer as a professional web designer, HTML
and CSS designing is a must skill.
➢ Understand web - If you want to optimize your website, to boost its speed and performance, it
is good to know HTML to yield best results.
➢ Learn other languages - Once you understand the basic of HTML then other related
technologies like java script, php, or angular are become easier to understand.

Performing Experiments on HTML Concepts


EXERCISE-1
1. Write a Simple Example Of HTML

<!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

2. Explanation of Browsers and HTML

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.

Web Browser HTML Support

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.

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.

Step 1: Open Notepad (PC)

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

Notepad: Notepad is a simple text editor. It is an inbuilt desktop application available in

Steps to write HTML code in Editor:

9
1. Open any of the text editors of your choice. Here we are using the notepad text editor.

2. Create new file: File->New File or Ctrl+N

3. Write HTML code in 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

4. Write HTML Programs using HTML tags, Elements and Attributes

Most Commonly used HTML tags

HTML contains lots of predefined tags

1. HTML tag: It is the root of the HTML document which is used to specify that the document is
HTML.

Syntax:

<html> Statements... </html>

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:

<head> Statements... </head>

Code:

<head>Contains elements describing the document</head>

13
Output:

3.Body tag: It is used to define the body of an HTML document. It contains images, tables, lists, …
etc.

Syntax:

<body> Statements... </body>

Code:

<body>The content of your HTML page</body>

Output:

4.Title tag: It is used to define the title of an HTML document.

Syntax:

<title> Statements... </title>

14
Code:
<title>tab name</title>

Output:

5.Heading tag: It is used to define the heading of an HTML document.

Syntax:

<h1> Statements... </h>


<h2> Statements... </h2>
<h3> Statements... </h3>
<h4> Statements... </h4>
<h5> Statements... </h5>
<h6> Statements... </h6>
Code:
<!DOCTYPE html>
<html>

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

6.Paragraph tag: It is used to define paragraph content in an HTML document.

Syntax:
<p> Statements... </p>

Code:
<p>We the Students belongs to CSE_IOT</p>

Output :

7.Emphasis tag: It is used to render as emphasized text.

Syntax:

<em> Statements... </em>

Code:
<em>Aditya College of Engineering</em>

16
Output:

8. Bold tag: It is used to specify bold content in an HTML document.

Syntax:
<b> Statements... </b>

Code:
<b>Bold word</b>

Output:

9.Italic tag: It is used to write the content in italic format.

Syntax:
<i> Statements... </i>

Code:
<i>Aditya College of Engineering</i>

17
Output:

10.Underline tag: It is used to set the content underline.

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>

HTML Element: The HTML element consist of 3 parts

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>

<h2>Welcome To Aditya College of Engineering</h2>

<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 style="text-align: center">

<h1>Aditya College of Engineering</h1>

<p>We the Students belongs to CSE_IOT</p>

</body>
</html>

20
Output:

21
EXERCISE-5

5. Explanation of HTML Doctype Elements.


Doctype:
A doctype or document type declaration is an instruction that tells the web browser about the
markup language in which the current page is written. The Doctype is not an element or tag, it lets
the browser know about the version of or standard of HTML or any other markup language that is
being used in the document.

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

In HTML5 there is only one declaration i.e.


<!DOCTYPE html>

Browser Support

Chrome Firefox IE Opera Safari Android

Yes Yes Yes Yes Yes Yes

23
EXERCISE-6

6. Write HTML Programs using HTML Comment tag.


Comment is a piece of code which is ignored by any web browser. It is a good practice to add comments
into your HTML code, especially in complex documents, to indicate sections of a document, and any
other notes to anyone looking at the code. Comments help you and others understand your code and
increases code readability.
HTML comments are placed in between <!-- ... --> tags. So, any content placed with-in <!-- ... --> tags
will be treated as comment and will be completely ignored by the browser.
Example
<!DOCTYPE html>
<html>

<head> <!-- Document Header Starts -->


<title>This is document title</title>
</head> <!-- Document Header Ends -->

<body>
<p>Document content goes here.....</p>
</body>

</html>

Output:

Valid vs Invalid Comments

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.
-->

<p>Document content goes here.....</p>


</body>

</html>

26
Output:

27
EXERCISE-7

7. Write HTML Programs using HTML Lists and Links.

HTML Lists

HTML lists allow web developers to group a set of related items in lists.

Example

An unordered HTML list:

• Item
• Item
• Item
• Item

An ordered HTML list:

1. First item
2. Second item
3. Third item
4. Fourth item

Unordered HTML List

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>

<h2>An unordered HTML list</h2>

<ul>
<li> Library</li>
<li>Racks </li>
<li>Books </li>
</ul>

</body>
</html>

28
Output:

Ordered HTML List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers by default:

Example:

<!DOCTYPE html>
<html>
<body>

<h2>An ordered HTML list</h2>

<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.

HTML Link Syntax


Links are specified in HTML using the “a” tag.

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>

<p>Click on the following link</p>

<a href = " http://www.acoe.edu.in/">Aditya College of Engineering </a>


</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

<p><a href="html_contribute.asp/"> Aditya College of Engineering Contribute


</a> It is a link to the contribute page on Aditya College of Engineering website.</p>

//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.

HTML Images Syntax

The HTML <img> tag is used to embed an image in 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.

The <img> tag has two required attributes:

• src - Specifies the path to the image


• alt - Specifies an alternate text for the image

Syntax

<img src="url" alt="alternatetext">

The src Attribute

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>

<img src="img_chania.jpg" alt="Flowers in Chania" width="460" height="345">

</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).

The value of the alt attribute should describe the image:

<!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>

<img src="img_chania.jpg" alt="Flowers in Chania" width="460" height="345">

</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>

<img src="wrongname.gif" alt="Flowers in Chania">

</body>
</html>

Image Size - Width and Height

You can use the style attribute to specify the width and height of an image.

Alternatively, you can use the width and height attributes:

35
Example:

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

<!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>

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

</body>
</html>

Images in Another Folder

If you have your images in a sub-folder, you must include the folder name in the src attribute:

<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">


Images on Another Server/Website

Some web sites point to an image on another server.

To point to an image on another server, you must specify an absolute (full) URL in the src attribute:

HTML Table tag


Definition and Usage

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.

The <table> tag defines an HTML table.

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

CSS is the acronym for "Cascading Style Sheet".

CSS is the language we use to style an HTML document.

CSS describes how HTML elements should be displayed.

Why to Learn CSS?

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>

<h1>My First CSS Example</h1>


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

</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>

<h1>Aditya College Of Engineering</h1>


<p>We the Students of CSE-IOT.</p>

</body>
</html>

OUTPUT:

48
EXERCISE-12

12.Write HTML Programs using CSS Selectors, Properties and Values.

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 }

Example − You can define a table border as follows −


table{ border :1px solid #C00; }
Here table is a selector and border is a property and given value 1px solid #C00 is the value of that
property.
You can define selectors in various simple ways based on your comfort.
CSS Selectors

CSS selectors are used to "find" (or select) the HTML elements you want to style.

We can divide CSS selectors into five categories:

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


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

The CSS element Selector

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>

<p>Every paragraph will be affected by the style.</p>


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

</body>
</html>

OUTPUT:

The CSS id Selector

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

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

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

Example

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

50
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>

<p id="para1">Hello World!</p>


<p>This paragraph is not affected by the style.</p>

</body>
</html>

OUTPUT:

The CSS class Selector

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

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

Example

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

<!DOCTYPE html>
<html>
<head>
<style>
.center {

51
text-align: center;
color: red;
}
</style>
</head>
<body>

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


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

</body>
</html>

OUTPUT:

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>

<h1 class="center">This heading will not be affected</h1>


<p class="center">This paragraph will be red and center-aligned.</p>

</body>
</html>

52
OUTPUT:

The CSS Universal Selector

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

Example

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

<!DOCTYPE html>
<html>
<head>
<style>
*{
text-align: center;
color: blue;
}
</style>
</head>
<body>

<h1>Hello world!</h1>

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


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

</body>
</html>

53
OUTPUT:

The CSS Grouping Selector

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

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

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

All CSS Simple Selectors

Selector Example Example description

#id #firstname Selects the element with id="firstname"

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

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

* * Selects all elements


-

element p Selects all <p> elements

Element,element,.. div, p Selects all <div> elements and all <p> elements

55
EXERCISE-13
13.Write HTML Programs using CSS Colours and CSS Backgrounds.
CSS background-color

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

Example

The background color of a page is set like this:

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
</style>
</head>
<body>

<h1>Hello World!</h1>

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

</body>
</html>

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>

<h1>CSS background-color example!</h1>


<div>
This is a text inside a div element.
<p>This paragraph has its own background color.</p>
We are still in the div element.
</div>

</body>
</html>

57
OUTPUT:

CSS background-image

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

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

Example

Set the background image for a page:

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("nature.gif");
}
</style>
</head>
<body>

<h1>Hello World!</h1>

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

</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>

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

</body>
</html>

OUTPUT:

59
EXERCISE-14

14.Write HTML Programs using CSS Box Model.


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:

• 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

15.Write HTML Programs using CSS Margins, Paddings and Borders.

o Border
o Margin
o Padding
o Content

Now, we are going to determine the properties one by one in detail.

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;

border: 5px solid gray;

margin-left:50px;

}
62
</style>

</head>

<body>

<h2>Calculate the total width:</h2>

<div>The total width of this element is 350px.</div>

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

• a color name - like "red"


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

Example:

<!DOCTYPE html>
<html>
<head>
<style>
body {
color: blue;
}

h1 {
color: green;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>


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

</body>
</html>

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.

Method 1: Font Awesome Icons

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>

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


<i class="fa fa-car" style="font-size:34px;"></i>
<i class="fa fa-car" style="font-size:36px;"></i>
<i class="fa fa-car" style="font-size:48px;color:red;"></i>
<i class="fa fa-car" style="font-size:60px;color:lightblue;text-shadow:2px 2px 4px #000000;"></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

HTML Lists and CSS List Properties

In HTML, there are two main types of lists:

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

The CSS list properties allow you to:

• Set different list item markers for ordered lists


• Set different list item markers for unordered lists
• Set an image as the list item marker
• Add background colors to lists and list items

Different List Item Markers

The list-style-type property specifies the type of list item marker.

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

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>

<h2>The list-style-type Property</h2>

<p>Example of unordered lists:</p>


<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<p>Example of ordered lists:</p>


<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
71
</ol>

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

• a:link - a normal, unvisited link


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

<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
color: red;
}

/* visited link */
a:visited {
color: green;
}

/* mouse over link */


a:hover {
color: hotpink;
}

/* selected link */
a:active {
color: blue;
}
</style>
</head>
<body>

<h2>Styling a link depending on state</h2>

<p><b><a href=" https://www.aec.edu.in/" target="_blank">Aditya College</a></b></p>


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

</body>
</html>

73
OUTPUT

When setting the style for several link states, there are some order rules:

• a:hover MUST come after a:link and a:visited


• a:active MUST come after a:hover

74

You might also like