MAULANA AZAD NATIONAL URDU UNIVERSITY

HYDERABAD-500032

INTERNSHIP TRAINING REPORT

Submitted in Partial fulfillment of the requirement for the award of

DIPLOMA
IN

COMPUTER SCIENCE & ENGINEERING

(2022-2025)

Submitted By

Name: Roll No:

NADIM UDDIN 22DPCS032HY

COMPUTER SCIENCE & ENGINEERING

MAULANA AZAD NATIONAL URDU UNIVERSITY-POLYTECHNIC
Hyderabad –500032

1
 MAULANA AZAD NATIONAL URDU
UNIVERSITY
HYDERABAD-500032

CERTIFICATE
This is to certify that MD SHAHID JAMAL have carried out an “SUMMER
INTERNSHIP-I" during the academic year 2022-2023 for the award of Diploma in
Computer Science & Engineering at Maulana Azad National Urdu University Polytechnic. The
Internship training report has been accepted as it satisfies the academic requirement with
respect to the Internship Training prescribed for the award of Diploma in Computer Science &
Engineering.

Internal Guide HOD -CSE

Mr. Syed Fazal Ul Haque Mr. Md Fasihuddin

NAME OF THE STUDENT:

NADIM UDDIN (22DPCS032HY)
 DECLARATION

I, NADIM UDDIN, Student of 3rd year 5th Semester Diploma in Computer Science &
Engineering of Maulana Azad National Urdu University, Polytechnic, Hyderabad hereby declare
that the "SUMMER INTERNSHIP-II" has been independently carried out by myself at
“TRYIDOL TECH” during the academic year 2022-23, and submitted its report in partial
fulfillment of the requirement of Diploma in Computer Science & Engineering by Maulana Azad
National Urdu University, Hyderabad.

PLACE: HYDERABAD

DATE: 16 / 08 /2024

NAME OF THE STUDENT: Signature:

NADIM UDDDIN (22DPCS032HY)

3
 INDEX.
S.NO TOPICS NAME PAGE
NO
01 ABSTRACT 06

02 INTRODUCTION OF WEB DEVELOPMENT 07

03 HISTORY OF HTML 08

04 INTRODUCTION OF HTML & SETTING UP IDE 09

05 STRUCTURE OF HTML 10-14

06 HTML, COMMENTS, ATTRIBUTES ,COLORS, IMAGES& FONTS 15-31

07 HTML TABLES, LISTS, LINKS, FORM 32-63

08 INTRODUCTION OF CSS 64

09 CSS SELECTORS 65-66

10 TYPES OF CSS 67-68

11 CSS BOX MODEL,BORDER,MARGINS PADDING 69-76

5
 ABSTRACT

Web development is one of the fastest-growing occupations in the early 21st

Century. The term web developer is used ubiquitously throughout the tech industry,
Yet unsurprisingly- to those not already a part of the development community- it isn’t
always clear what web development is or what a web developer does. To answer
these questions effectively we must first delve a tiny bit into the realm of websites
themselves: How a website recognized when a user visits the site and performs the
necessary function to display the appropriate page to the user. Websites have many
functions and can be used in various fashions; a website can be a personal website, a
commercial website, a government website or a non-profit organization website.
Website it can be work of an individual. a business or other organization, and are
typically dedicated to a particular topic or purpose. Any website can contain a
hyperlink to any other website, so the distinction between individual sites, as
perceived by the user, can be blurred. Websites are written in, or converted to, HTML
(Hyper Text Markup Language) and are accessed using a software interface classified
as a user agent. Web pages can be viewed or otherwise accessed from a range of
computer- based and Internet-enabled devices of various sizes, including desktop
computers, laptops, tablet computers and smart phones. A website is hosted on a
computer system known as a web server, also called an HTTP (Hyper Text Transfer
Protocol) server. These terms can also refer to the software that runs on these
systems which retrieves and delivers the web pages in response to requests from the
website’s users. Apache is the most commonly used web server software (according
to Netcraft statistics) and Microsoft’s IIS is also commonly used. Some alternatives,
such as Nginx, Lighttpd, Hiawatha or Cherokee, are fully functional and lightweight.
1.INTRODUCTION OF WEBDEVELOPMENT

Web development is the work involved in developing a website for the Internet
(World Wide Web) or an internet (a private network). Web development can range
from developing a simple single static page of plain text to complex web
applications, electronic businesses, and social network services. Web development
encompasses many different skills and disciplines in the production and
maintenance of websites. The different areas of web design include web graphic
design, interface design, authoring including standardized code and proprietary
software, user experience design and search engine optimization. Often many
individuals will work in teams covering different aspects of the design process,
although some designers will cover them all. The term web development is normally
used to describe the design process and D development process relating to the front
end (client side) and back end (server side) design of a website including writing
markup. Web design partially overlaps web engineering in the broader scope of web
development. Web designers are expected to have an awareness of usability and if
their role involves creating markup than they are also expected to be up to date with
web accessibility guidelines.

1.1 FEATURES OF WEB DEVELOPMENT

• Quality Web Content. There’s one primary reason people use search
engine and brows website, and that is to search for Information. …

• Clear, User-friendly Navigation.…

• Simple and Professional Web Design.…

• Webpage Speed.…

• Search Engine Optimization.…

• Web Capatibility.

7
 HTML

HISTORY OF HTML
. First Version of HTML i.e. HTML 1.0 was released in 1993 with the intention of
sharing information which can be readable and accessible Via Web Browsers. But
not much of the developers where involved in creating websites. So the language
was also not growing.

. Then in 1995 HTML 2.0 was released. This refined various core features of HTML
and as it contains all the features of HTML 1.0, it remained as the standard markup
Language for designing and creating websites until January 1997.

. And then the HTML 3.0. Where Dave Raggett who introduced a fresh paper or draft
on HTML. It included improved new features of HTML, giving more powerful
characteristics for webmasters in designing web pages. But these powerful features
of new HTML Slowed down the browser in applying further improvements.

. Then Comes the HTML 4.01 which is widely used and was a successful version of
HTML before HTML 5.0, which is currently released and used Worldwide. HTML 5 can
be said for as an extended version of HTML 4.01 which was published in the year 2012.

NEW FEATURES OF HTML 5.0

HTML was time for over a decade. Why was it updated in 2014? The most Significant
difference between older versions of HTML vs HTML 5 is the integration of video and
audio into the Language's Specifications.

Additionally, HTML 5 includes the following updates:

. New elements including video, time, nav Sections. Progress, meter, Aside and
canvas.

. New input attributes including email_ URL, dates and times.

. New APIs that offer offline caching, drag and drop support and more.
. JavaScript can now run in the background thanks to the JS web worker API.

INTRODUCTION OF HTML

WHAT IS HTML?

. HTML stands for Hypertext Markup Language.

. HTML describes the structure of web pages.

. HTML is the Standard markup language for Web Pages.

. With the help of HTML we can create our own website.

. HTML is generally used in build up the front-end.

. This is used to create the front-end and back-end of Webpage.

. HTML consists of a series of elements.

. HTML elements tell the browser how to display the content.

SETTING UP IDE:

WHAT IS IDE?

. IDE stands for Integrated Development Environment.

9
. An integrated development environment (IDE) is a Software application that
provides comprehensive facilities to Computer programmers for Software
development. Ex:- Notepad++, Brackets, HTML Editor, D coder etc.

. Through we can configure IDE's for different languages but generally different
Languages require different IDE such as:

(i) Python: Pycharm, Atom, Python IDE

(ii) HTML5: Brackets, Atom etc.

(iii) C, C++: Dev C++, Turbo C++.

STRUCTURE OF HTML

UNDERSTANDING BASIC HTML TAGS/ELEMENTS:

1. <HTML> TAG :

. The <html> tag tells the browser that this is an HTML document.

. The <html> tag represents the root of an HTML document.

. The <html> tag represents the rest of an HTML document. The <html> tag is the
container for all other HTML elements (except for the <! DOCTYPE> tag).

2. <HEAD> TAG:

. The <head> element is a container for all the head elements.

. The <head> element can include a title for the document, scripts, styles, Meta
information and more.

. The head tag contains the following tags like:

Title (mandating), meta-links, Script, style etc.

3. <TITLE> TAG:

. HTML documents Said a tags the browser this is an HTML documents

. It said the title for our HTML documents.

OR
. This element defines the title of a Web page; it appears on the upper Part of a
browser.

4. <BODY> TAG:

. The <body> tag contains all the webpage documents.

. The text under body tag is displayed on the screen of Webpage.

• The body tag contains tag like: Heading, Paragraphs, images, hyperlinks, Tables,
lists etc.

5. <HEAD> TAG:

. HTML headings are defined with the <h1>to <h6> tags. <h1> defines the most
important heading.

• <h6> defines the least important heading.

. It is used align attribute to indicate heading to position for example right, left, top,
bottom.

. HTML headings are block Level elements.

. HTML headings usually contain a title or a main topic of a certain content.

6. PARAGRAPH TAG:

. The HTML <P> element defines a paragraph. A paragraph always starts on a new
line and browser an automatically add some White space (a margin) before and after
Paragraph.
. HTML paragraphs are mainly used to group Sentences.

. It is mostly used in Web page for break the information.

7. LINE BREAK <Br> TAG:

. An HTML Line Break is used to Produce/ break text line in document.

• The <br> element defines an HTML Line break.

8. Pre- Formatted Text:

. It is used to display "as it is" format in document. Write text in a <pre> opening
and </pre> closing for display exact format.

* HTML TEXT FORMATTING:

. It is used to describe text format in document.

. Formatting text is very essential for Websites.

. One of its uses is to help readers know the important parts a web content easily.

There are following text formatting element:

. <b>- bolds a text.

. <i>- italicizes a text.

. <u>- underlines a text.

. <code> defines a text as a code.

. <tt> typewriter text.

. <em> emphasizes a text, may be boldened depending on the browser.

. <mark> marks a text like a highlighting pen.

. <q> enquotes a text.

. <S> Strikes through a text.

. <hr> Define a thematic change is the content.

. <strong> define Important text.

. <Del> define delete text.

. <ins> Defines inserted text.

. <sub> define subscript Text.

. <Sup> define super script text.

. The <h1> element defines a large heading.

PROGRAMING EXAMPLE:
<! DOCTYPE>
<html>
<head> HTML PROGRAMMING </head>
<title> Basic HTML </title>
<body>
<h1> HTML EXAMPLE </h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing
elit. <b><i>Vestibulum </b></i>sed aliquam nulla.<strong> Etiam ac dolor
vel erat</strong> pulvinar elementum quis vitae orci.<br> Aliquam erat volutpat. Aenean
semper commodo est, non vestibulum mi eleifend vel. Aenean enim est, gravida quis
eleifend sit amet, feugiat ut est. Aenean felis ex, commodo sed sapien vitae, interdum
tristique massa. </p>
<p> <b><i><u>Vivamus pellentesque augue nulla</b></i></u>, ac vehicula nunc
rutrum vitae. <q>Fusce in erat eu nulla</q> hendrerit sagittis. Sed maximus erat
bibendum, consequat urna vel, mattis justo.<br><pre> Maecenas eu justo in dui
mattis pretium placerat id odio. Donec non eleifend tellus. Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Phasellus vel tempus augue. Ut vitae lorem risus.
Praesent ut tortor orci. Mauris mattis mi nec nisi laoreet, sed rutrum tellus facilisis.
Vivamus venenatis quis nulla vitae ullamcorper.</pre> </p>
<p><hr> Ut fringilla vestibulum diam, in bibendum eros euismod eu</hr>.<code>
Nulla vestibulum,</code> ex in sagittis volutpat, orci purus
bibendum ligula,<s><mark> pellentesque sollicitudin ipsum</s></mark> augue a
leo.<br><pre> Mauris dictum rutrum ante, ac cursus elit venenatis vel. Ut quis sodales
dui.</pre> </p>

<h2>^{This is heading 2}</h2>

<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
OUTPUT:

HTML COMMENTS:

. HTML Comments starts with <! -- and ends with -->

. HTML Comments are text, Phrases or sentences inside an HTML file.

. HTML Comments help both beginners and experienced web developer to easily organize
their codes. They act like sticky notes in HTML files.

. HTML Comments are not displayed in the browser but they can help document
Your HTML Source code.
I look like this:
EX- <! -- This is a comment--> <p>
This is a Paragraph.
</P>
EXAMPLE:
<! DOCTYPE html>
<html>
<head>
<title> Try It Yourself </title>
</head>
<body>
<p> Sentences shown on browsers.
<! -- single-line comment -->
</P>
<P> Sentences shown on browsers.
<! -- this is a multi-line comments some phrases go here -->
</p>
<div> <!-- putting comments beside a start tag -->
Sentences, HTML elements and images etc. may appear here.
</div> <! -- putting comments beside a start tag -->
<p>This is a paragraph.</p>
<!--
<p>Look at this cool image:</p>
<img border="0" src="pic_trulli.jpg" alt="Trulli">
-->
</body>
</html>

OUTPUT:
Sentences shown on browsers.

Sentences shown on browsers.

Sentences, HTML elements and images etc. may appear here.

This is a paragraph.
HTML ATTRIBUTES:

. HTML attributes Provide additional information about HTML elements.

. HTML attributes are found in HTML tags.

. HTML attributes only appear at start tags. It will never be on end tags.

. HTML elements can have multiple attributes.

. HTML attributes are composed of name/Value pairs.

. There are some attributes that can be used on all HTML Elements though they may not
have effects on some elements. They are called Global attributes.

. An HTML attribute is composed of .

(i) An attribute name

(ii) An equal =sign
(iii) A value surrounded by quotation marks "value"

It looks like this: - attribute name="value"

(1) The href Attribute:

The <a> anchor tag defines a hyperlink. The href attribute specifies the URL of the page the
link goes to:
Example:-
<a href=" http://www.Youtube.Com"> You Tube</a>

(2) The Src Attribute:

The <img> tag is used to embed an image in an HTML page: The src attribute Specifies the
path to the image to be displayed.
Example <img src="IMG. girl. Jpg">

(3) The Width and Height Attributes:

The <img> tag should also contain the width and height attributes which specifies the
Width and height of the image (in Pixels).
Example: <img src= "img-girl.jpg" width="500px" height="600px" >

4) 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 Slow connection
or an error in the src attribute or if the user uses a screen reader.
Example:-
<img src="img-girl.jpg" alt="girl with a Jacket">

(5) The Style Attribute:

The Style attribute is used to add Styles to an element, such as color, font size and more.
Example:-
<P Style = "Color: Red "> This is a red paragraph </p>

(6) The Lang Attribute:

We should always include the Lang attribute inside the <html> tag, to declare the language
of the Webpage. This is meant to assist search engines and browsers.

Country codes can also be added to the language code in the Lang attribute. So the
first two characters define the language of the HTML Page, and the last two characters
define the country.
The following example specifies English as the language, and united states as the country:
<! DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>

(7) The Title Attribute:

. The title attribute defines some extra information about an element. .

The title attribute provides a tooltip for HTML Element.
. Unfortunately, it doesn't work on mobile devices.
Example: - <P title= "I'm a tooltip"> This is a Paragraph. </P>

All Attribute Programming Example:

<! DOCTYPE html>
<html>
<head>
<title> Try It Yourself </title>
</head>
<html lang="en-US">
<body>
<center><a href="http://www.google.com"><p style=”color: red”> Google</p>
</a></center>
<p title="I'm a tooltip">Mouse over this paragraph, to display the title attribute as a
tooltip.</p>
<p style="font-size: 40px; color: pink">
I am a paragraph with a size of 40 pixels and my color is gold.
</p>
<h2>The src Attribute</h2>
<p>HTML images are defined with the img tag, and the filename of the image source is
specified in the src attribute</p>
<center>
<img src="COMPUTER.jfif" width="300" height="150">
</center>
<h2>The alt Attribute</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>
<center>
<img src="network.jpg" alt="COMPUTER" width="300" height="120">
</center>
</body>
</html>
OUTPUT:

HTML COLORS:

. HTML colors define colors that we seen on a Web page.

In this lesson we will use inline styling with CSS properties color and backgroundcolor to
change the text color and /background color of HTML Elements.

* HTML Colors can be defined using the following!

Color Name:
It defines any valid color by its color name.e.g. White, Black, Red, yellow etc.

Background Color:
We can set the background color for HTML elements. Ex:
<p style="background-color: Blue "> Hello World </p>
<h1 style="background-color: red">Lorem ipsum dolor sit amet, consectetur
adipiscing elit. <b><i>Vestibulum </b></i>sed aliquam nulla.<strong> Etiam ac dolor
vel erat</strong> pulvinar elementum quis vitae orci.<br> Aliquam erat volutpat.
Aenean semper commodo est, non vestibulum mi eleifend vel. Aenean enim est,
gravida quis eleifend sit amet, feugiat ut est. Aenean felis ex, commodo sed sapien vitae,
interdum tristique massa. </h1>

TEXT COLOR:
We can set the color of text in HTML.
Example:
<P style="color: red" >Hacker Boy </p>
<div style="color: Aqua" >Hello world </div>

BORDER COLOR:
We can set the color of borders in HTML.
Example:
<h1 style="border: 2px solid tomato"> hello world </h1>
<P style="border: 2px solid green">hello world</p>

COLOR VALUES:
In HTML colors can also be specified using RGB values, and Hex values.

RGB COLOR VALUES:

. RGB Stands for Red, Green, Blue.

. It defines any valid color by this format rgb(number, number, number).e.g.

rgb(255,255, 255), (0,0,0). The number Represent the intensity of the red, green, and
blue colors in that particular order.
Ex:
<….changing text color using an RGB value….>
<p style=”color: rgb (0,128,128) this is a great time to get a job</p>

HEX Color value or Hexa decimal color value:

It defines any valid color by hash (#) followed by Letters and/or numbers. e.g.
- #ffffff, #000000
EX- <! -- changing text color using Hexa value.....>
<p style="color: #008080"> We are real</p>
PROGRAMMING:
<! DOCTYPE html>
<html>
<head>
<title> Try It Yourself </title>
</head>
<body>
<! -- changing background color using a color name -->
<div style="background-color: aqua">
<p style ="border: 2px solid Tomato;color:Black;"> Hello World</p>
<! -- changing text color using a hexadecimal value -->
<p style="color: #008080; border: 2px solid Black; color: Red ;"> Hello
World</p>
<! -- changing text color using an RGB value -->

<p style="color: rgb (0, 128, 128); border: 2px solid yellow; color: Green ;"> Hello
World</p>

</div>
</body>
</html>

OUTPUT

HTML IMAGES:

. HTML Images are indeed needed or required for any website.

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

. Images help a website become more attractive for visitors.

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 page.
The <img> tag creates a holding speed for 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

(i) Src – Specifies the path to the image
(ii) alt- Specifies an alternate text for the image.

The Src Attribute:

We use the Src Attribute to Specify an image's URL or file path.
Ex:- <Img src="Example.jpg">

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 readers, slow server).

. The value of the alt attribute should describe the image.

. If a browser cannot find an image. It will display the value of the alt attribute.
Ex:-
<img src="example.jpg" alt="I am a hero>

Image Sizing (Width and Height)

To resize an image we just need to use the width attribute to change its width and the
height attribute to change its height:
Ex :-
<img src="example. jpg" width="350" height="400"> Note:
We can use the style attribute to resize an image with the properties width and height
and the value can be in pixels as well:
Ex
<img src="example.jpg" Style="width="35: px; height: 40px ;>

Floating Image (Left or Right):

We can float an image to the left or right side of a text.
To achieve that we need to use the style attribute with the float CSS property. And left
or right value.
Ex:
<P> <img src="images / Star.png" Style="Float: Left; width: 50px; height: 50px"> The image
is floated left. </P>

OR
<P><img Src = "Smiley. gif" alt="smiley face" Style="float: right; Width: 42px; height: 42PX">
the image will Float to the Right of the text. </P>

Animated Images:
HTML allows animated GIFs.
Ex:
<img src = "Programming. gif" alt="Computer Man" Style = "width: 48px; height: 48px">

Image as a Link:
To use an image as a link. To do that just encloses the image with an <a> element with its
href attribute.
Ex:
<a href="http://www.example.com ">
<img src= "example. jpg" >
</a>

Images in Another Folder:

If you have your images in a sub-folder you must include the folder name in the Src
attribute.
Ex:
<img src="images/html5.gif" alt="HTML5 Icon" style="width: 128px; height: 128px">

Images From External (Server website):

Sometimes we need to put images from other Websites like facebook,Google etc to Our
Website.
Ex:
<img src="https:// www. Example. Com/ image.jpg">
Or
<img src="https://www.w3schools.com/image/w3 school. green. Jpg">
Images in Our Phone Storage:

If we save the example codes above anywhere in our phone storage the images will not
Show.

Because the images are only store in this app's directory and not is our Phone Storage.
Follow these steps to property insert images to our web page when we are in Our Phone
Storage.

1. Open any file manager

2. Create a folder named (example).

3. Paste any image to that folder. Remember the file name of the image.

4. Click the Try It yourself button Replace the value of the Src attribute with the file name
of the image.
Save it as index.html to the folder you have created. To save it click the menu on the upper
right corner of the editor.

PROGRAMMING EXAMPLE:
<! DOCTYPE html>
<html>
<head>
<title> Try It Yourself </title>
</head>
<body>
<img src="comput.jpeg" alt="IMAGE NOT FOUND" /><br>
<img src="computer.jpeg" width="300" height="200"><br>
<p>
<img src="html5.png" style="float: left; width: 90px; height: 90px;" /> The image
is floated left. The image is floated left. The image is floated left. The image is floated
left.
</p><br>
<p>
 <img src="computer-repair-jacksonville-fl-computer.gif" style="float:
right; width: 90px; height: 90px;" /> The image is floated right. The image is floated
right. The image is floated right. The image is floated right.
</p><br>

<a href="https://pngtree.com/free-backgrounds-photos/website">
<img src="back.jpg" width="200" height="150"> click here
</a>
</body>
</html>

OUTPUT:

HTML FONT:

Fonts play a very important role in making Website more user Friendly and increasing
Content readabilility.
Font face anal Font color depends entirely on the computer and browser that are
being used to view your page but you can use HTML <font> tag to add style, size and
color to the text on your Website.

The font tag is having three attributes called size, color and face to customize your
fonts. To change any of the font attributes at any time with in your Webpage. Simple
use the <font> tag. The text that follows will remain changed until you close with the
</ font> tag. We can change one or all of the font attributes within one <font> tag.

(i) Set Font Size:

We can set content font size using size attribute. The range of accepted values is from
1(smallest) to 7 (largest). The default size of a font is 3.
Ex:
<! DOCTYPE html>
<html> <Head>
<title> Setting font size </title>
</Head>
<body>
<font size="1"> font size="1" </ font> <br>

<font size="2"> font size="2" </ font> <br>

<font size="4"> font size="3" </ font> <br>

<font size="4"> font size="4" </ font> <br>

<font size="5"> font size="5" </ font> <br>

<font size="6"> font size="6" </ font> <br>

<font size="7"> font size="7" < /font>

</body>
</html>

OUTPUT:
*Relative Font Size:

We can Specify how many sizes larger or how many sizes smaller then the preset font
Size Should be. We can specify it like <Font size="+n”> or < Font size=”-n”> Example:
<! DOCTYPE html>
<Html>
<Head>
<title> Relative Font Size </title>
</Head>
<body>
<font size="-1"> font size="-1" </font><br>
<font size="+1" font size="+1" </font><br>
<font size="+2"> font size="+2" </font><br>
<font size="+3"> font size="+3" </font><br>
<font size="+4"> font size="+4" </font><br>
<font size="+5"> font size="+5" </font>
</body> </Body>
</Html>

OUTPUT:
 (ii) Setting Font Face:

We can set font face using face attribute but be aware that if the user viewing the
page does not have the font installed, they will not be able to see it. Instead user will
see the default font face applicable to the user's computer.

Example:

<! DOCTYPE html>

<Html>
<Head>
<title> Font Face </title>
</Head>
<Body>
<font face = "Times New Roman" size="5"> Times New Roman </font> <br>
<font face=" verdana" size="5"> Verdana </font> <br>
<font face="Comic Sans MS" size="1"> Comic Sans MS </font> <br>
<font face="Wild west" size="5"> Wild West </font><br>
<font face="Bedrock” size="6"> Bedrock </font>
</Body>
</Html>

OUTPUT:
 (iii) Setting Font Color:

We can set any font color we like using Color attribute. We can Specify the color that. We
want by either the color name or hex code for that color.
Example
<! DOCTYPE html>
<html>
<head>
<title> Setting font color
</tilte>
</Head>
<Body>
<font color="#FFOOFF"> this text is new</font><br>
<font color="pink"> this text is new</font><br>
<font color="#ff0000"> this text is new</font><br>
<font color="lime"> this text is new</font><br>
<font color="#00ffff"> this text is new</font><br>
<font color="blue"> this text is new</font>
</Body>
</html>
OUTPUT:
 HTML TABLES

HTML Table represents data in a tabular form. It is composed of columns and rows of
cells that contain data.
• The <table> element defines au HTML Table.
• As table as rows and columns.

HTML Table Element

Table Row:

A Tablet row defines through <tr> open & </tr> close tag

• Table Data:
Each Table data/cell is defined by a <td> and a < /td> tag

•Table Header:

Sometimes we want our cells to be headers in those cases we use the <th> tag instead
<td> tag
• <th> tag defines table heading

Example:

<! DOCTYPE html>

<html>
<head>
<title> Try it our self </title>
</head>
<table>
<tr>
<th>First Name </th>
<th>Last Name </th>
<th> Roll No</th>
</tr>
<tr>
<td> Nadim</td>

<td> ummid </td>

<td> 220PCS032HY </td>
</tr>
<tr>
<td> Md </td>
<td> sajid </td>
<td> 22DPCS028HY </td>
</table>
<body>
</html>

OUTPUT:

HTML Table Borders:

HTML table can have borders of different styles and shapes.

• How to Add a Border:

When you add a border to a table. You should also add borders around each table cell.
To add a border, use the CSS border property on table, th, and td elements. Ex-
: table, th, td {border: 1px Solid black}

•Different Types of Table Borders:

1. Collapsed Table Borders:
To avoid having double Borders like in the example above. Set CSS border collapse
property to collapse.

•This will make the borders collapse into a single border.

Ex -> table, th & td {border: 1 px solid black; border-collapse: collapse; }

2. Style Table Border:

If we set a background color of each all and give the border a white color (the same as
the document background) we get The impression of an invisible border.
Ex-> table, th, td {border: 1px Solid green; border collapse: Collapse ;}
Th, td {background-color: Aqua}

3. Round Table Borders:

With the border-radius property the borders get rounded corners.
Ex: - table, th, td {border: 1 PX Solid Black; border radius: 10px}

•If we skip the border around the table by leaving out table from the CSS selector Ex:
- > th, td {border: 1PX Solid black; border-radius: 10px}

4. Dotted Table Borders:

With the border-style property. We can set the appearance of the border. Some
following values are allowed:

•Dotted •Dashed.
•Solid. •Double.
• Groove. •Ridge.
• Inset. • Outset.
•None. • Hidden.

Ex-> th, td {border-Style; dotted; }

* Border-Color:
With the border color property, you com Set the color of the border. Ex
-> th, td {border-color: Green ;}
PROGRAMMING:

<! DOCTYPE html>

<html>
<head> <style> table, th, td { border: 2px solid
black; border-collapse: collapse;
} th, td { border-style: solid/dotted/dashed; background-color: aqua; border-
color: red;
}
</style>
</head>
<body>
<h2>Table With Border</h2>
<p>Use the CSS border property to add a border to the table.</p>
<table style="width: 100 %">
<tr>
<th> First name </th>
<th> Last name</th>
<th>Age</th>
</tr>
<tr>
<td> Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>

</tr>
</table>
</body>
</html>

OUTPUT:

HTML Table Paddling & Spacing:

HTML tables can adjust the padding inside the cells and also the space between the
cells.

HTML Table-Cell Padding:

Cell padding is the space between the cell edges and the cell content.
By default the paddling is set to 0. To add padding on table cells use the CSS Padding
Property.
Ex-> th, td {paddling: 15px ;}

To add padding only above the content use the padding-top property.
And the others side with the padding-bottom, padding-left and padding-right
properties.
Ex -> th, td {padding-top: 10px;
Padding-bottom: 20px;
Paddling-Left: 30px;
Padding – Right: 40px}

HTML Table-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.
Ex -> table {border-spacing: 30px ;}

PROGRAMMING:
<! DOCTYPE html>
<head>
<style> table, th, td { border: 1px
solid Black: border-
collapse: collapse} table {border-spacing
30PX } th, td { padding-top :20px;
Padding - bottom: 20px;
Padding-left: 30px;
Padding Right:30px}
</Style>
</head>
<body>
<h2> Cell Spacing </h2>
<p>change the space between the cells with the border-spacing property. </p>
<h2> Cell Padding-Top-Bottom-Left-Right </h2>
<P> we can specify different padding for all fours sides of the cell content. </P>
<table style = width: 100 %">
<tr>
<th> First name </th>
<th> Last name </th>
<th> Age with</th>
</tr>
<tr>
<td> Jill </td>
<td> Smith </td>
<td> 50 </td>
</tr>
<tr>
<td> Eve </td>
<td> Jackson </td>
<td> 94 </td>
</tr>
<tr>
<td> John </td>
<td>Doc</td>
<td> 80 </td>
</tr>
</table>
</body>
</html>
OUTPUT:

38
HTML Table Colgroup:
. The <colgroup>element is used to Style Specific columns of a table.

. If you want to style any columns of a table, used the <colgroup> and <col>
elements.

. The <colgroup> element should be used as a container for the columns

Specifications.

. Each group is specified with a <col> element.

. The Span attribute specialties how many columns that gets the style.

. The style attribute specialties the style to give the columns.

Note: The <colgroup> tag must be a child of a <table> element and should be placed
before, any other table elements, like <th> <tr> <td> etc. but after the <caption>
element if present.
Ex:-
<! DOCTYPE html>
<html>
<head> <style> table, th,
td { border: 1px solid
black; border-collapse:
collapse;
}
</style>
</head>
<body>
<h2>Colgroup</h2>
<p>Add the a colgroup with a col element that spans over two columns to define a
style for the two columns:</p>
<table style="width: 100%;">
<colgroup>
<col span="2" style="background-color: pink">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
<th>FRI</th>
<th>SAT</th>
<th>SUN</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>22</td>

42
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
</table>
</body>
</html>
OUTPUT:

HTML- LIST

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

HTML list are of 2 Types:

1. Ordered list.
2. Unordered list.

Unordered List:
. The html <UL> tag defines an unordered (bulleted) list.

. Au unordered list starts with the <ul> tag. Each list item start with the <li> tag.

. The list items will be marked with bullets (Small black circle) by default.
. The CSS list-style-type property is used to define the style of the list item
marker. It can have different values like: disc, circle, Square, none etc. Ex:

<! DOCTYPE html>

<html>
<body>
<h2>Unordered List with Disc Bullets</h2>
<ul style="list-style-type: disc;">
<li> Coffee</li>
<li> Tea</li>
<li> Milk</li>
</ul>
<h2>Unordered List with circle Bullets</h2>
<ul style="list-style-type: circle ;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h2>Unordered List with square Bullets</h2>
<ul style="list-style-type: square ;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h2>Unordered List with none Bullets</h2>
<ul style="list-style-type: none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>

44
OUTPUT:

Ordered List:
The HTML <ol> tag defines an ordered list. An order list can be numerical or
alphabetical.
An ordered list starts with the <ol> tag. Each list item start with the <li> tag. The
list items will be marked with numbers by default.

The Type Attribute:

The type attribute of the <ol> tag, defines the type of the list items marker. Like Type
= "1", type="A", type "a", "type" I" type = "i"

EX:-
<! DOCTYPE html>
<html>
<body>
<h2>Ordered List with Numbers</h2>
<ol type="1">
<li> Coffee</li>
<li> Tea</li>

<li> Milk</li>
</ol>
<h2>Ordered List with Uppercase Letter</h2>
<ol type="A">
<li> Coffee</li>
<li> Tea</li>
<li> Milk</li>
</ol>
<h2>Ordered List with Lowercase Letter</h2>
<ol type="a">
<li> Coffee</li>
<li> Tea</li>
<li> Milk</li>
</ol>
<h2>Ordered List with Uppercase Roman Numbers</h2>
<ol type="I">
<li> Coffee</li>
<li> Tea</li>
<li> Milk</li>
</ol>
<h2>Ordered List with Lowercase Roman Numbers</h2>
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>

46
OUTPUT:

HTML Description Lists:

A description list is a test of terms with a description of each term.

The <u> tag defines the descriptions list, the <dt> tag defines the term (name) and
the <dd> tag describes each terms.
Ex:-
<! DOCTYPE html>
<html>
<body>
<h2>A Description List</h2>
<dl>
<dt> Coffee</dt>
<dd>- black hot drink</dd>
<dt> Milk</dt>

<dd>- white cold drink</dd>

</dl>
</body>
</html>

OUTPUT:

HTML Links:

HTML links are very necessary for all web pages. All Web sites have links.
HTML links are hyperlinks.
Links help users Jump from their current Web page location to another.
To make html Links We Just need to use the <a> element with the href attribute that
specifies URL to a page.

Syntax:
The HTML <a> tag defines a hyper link. It has the following Syntax:
<a href="url"> link text </a>
The most important attribute of the <a> element is the href attribute which indicates
the link's destination.

48
The link text is the part that will be visible to the reader.
Clicking on the link text will send the reader to the specified URL address. Ex:-
<! DOCTYPE html>
<html>
<body>
<h1>HTML Links</h1>
<p><a href="https://www.w3schools.com/">Visit W3Schools.com!</a></p>
</body>
</html>

OUTPUT:

The Target Attribute:

By default, the linked page will be displayed in the current browser window .To
change this you must specify another target for the link.
The target attribute specifies where to open the link document. The
target attribute can have one of the following values:

. -Self: - Default. Open the document in the same window/ tab as it was clicked.
•-Blank: - Open the documents in a new window or tab.

. –Parent: - Open the document is the Parent Frame.

. –Top: - Open the document in the full body of the window.
EX:-
<! DOCTYPE html>
<html>
<body>
<h2>The target Attribute</h2>
<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools! </a>
<p>If target="_blank", the link will open in a new browser window or tab. </p>
<p>If target="_self", the link will open in a same browser window or tab. </p>
<p>If target="_parent", the link will open in a new browser window or tab. </p>
<p>If target="_blank", the link will open in a parent frame. </p>
<p>If target="_top", the link will open in the full body of the window. </p>
</body>
</html>

OUTPUT:

Html Links - Use an Image as a Link:

To use an image as a link. Just put the <img> tag inside the <a> tag.
Ex:-
<! 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"><img src="smiley.gif" alt="HTML 5" style="width: 42px; height:
42px ;">< /a>
</body>

50
</html>

OUTPUT:

Button as a Link:
To use an HTML button as a link. We have to add some JavaScript code.
JavaScript allow we to specify what happens at certain events, such as a click of a
button.

EX:-
<! DOCTYPE html>
<html>
<body>
<h2>Button as a Links</h2>
<p>Click the button to go to the HTML tutorial.</p>
<button onclick="document.location='default.asp'">HTML Tutorial</button>
</body>
</html>

OUTPUT:

Link to an Email Address:

Use mailto: Inside the href attribute to create a link that opens the users email
program (to let them) send a new mail.
Ex:-
<! DOCTYPE html>
<html>
<body>
<h2>Link to an Email Address</h2>
<p>To create a link that opens in the user's email program (to let them send a new
email), use mailto: inside the href attribute :< /p>
<p><a href="mailto:[email protected]">Send email</a></p>
</body>
</html>

OUTPUT:

HTML-Forms:

HTML forms can be used to collect user data, make a login form, registration form, a
contact form and the likes.
.The <form> element defines an HTM form.

HTML Form Elements:-

. The HTML <form> element is used to create an HTML form.

. The <form> element is a container for different types of input elements, such as:
text fields, check boxes, radio buttons, Submit buttons, etc.
EXAMPLE:

<! DOCTYPE html>

<html>

52
<body>
<h2>Text input fields</h2>
<form>
<label for="fname">First name :< /label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name :< /label><br>
<input type="text" id="lname" name="lname">
</form>
<h2>Radio Buttons</h2>
<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">
50

<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
<h2>Checkboxes</h2>
<p>The <strong>input type="checkbox"</strong> defines a checkbox :< /p>
<form action="/action_page.php">
<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><br><br>
<input type="submit" value="Submit">
</form>
<h2>HTML Forms</h2>
<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>
<p>If you click the "Submit" button, the form-data will be sent to a page called
"/action_page.php".</p>
</body>
</html>

OUTPUT:

54
HTML Form Attribute:

(1) Action Attribute:

The input actions attribute specifies the URL of the file / form-handler/ pagehandler
page usually a php page in the server side where the data is processed. EX:-
<! DOCTYPE html>
<html>
<body>
<h2>HTML Forms</h2>
<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>
<p>If you click the "Submit" button, the form-data will be sent to a page called
"/action_page.php".</p>
</body>
</html>

OUTPUT:

2. Method Attribute:
The method attribute specifies which HTTP method to use when submitting input
data to the form -handler page. It could either be GET or POST.
 GET VS. POST
Here is a Simple Table to show the difference Between the GET and POST Methods.
GET POST
Default value Not the default value
Less Secure More Secure
Data is written on the URL address Data is not written on the URL address
More Prone to Hacking Less Prone to Hacking
Must not be used when Submitting Must be used for Submitting Personal
Personal data data

EX:-
<!DOCTYPE html>
<html>
<body>

<h2>The method Attribute</h2>

<p>This form will be submitted using the GET method :< /p>
<form action="/action_page.php" target="_blank" method="get">
<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>
<p>After you submit, notice that the form values is visible in the address bar of the
new browser tab.</p>
</body>
</html>

OUTPUT:

56
3. Enctype Attribute:
(1).The enctype attribute defines the encoding of the data submitted by the form.
The enctype attribute works with the following input types: submit and image
Ex:-
<! DOCTYPE html>
<html>
<body>
<h1>The input form enctype attribute</h1>
<p>The formenctype attribute specifies how the form data should be encoded when
submitted. </p>
<form action="/action_page_binary.asp" method="post">

<label for="fname">First name :< /label>

<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="Submit">
<input type="submit" formenctype="multipart/form-data" value="Submit as
Multipart/form-data">
</form>
</body>
</html>

OUTPUT:
(4.) Name, id, class Attribute:
These attributes are used for identifying the form; for the purpose of styling and
Document Object Multiplication.
EX:-
<! DOCTYPE html>
<html>
<body>
<h2>The name Attribute</h2>
<form action="/action_page.php">
<label for="fname">First name :< /label><br>
<input type="text" id="fname" value="John"><br><br>
<input type="submit" value="Submit">
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page called
"/action_page.php". </p>
<p>Notice that the value of the "First name" field will not be submitted, because the
input element does not have a name attribute. </p>
</body>
</html>

OUTPUT:

58
(5.) Target Attribute:
The input target attribute specifies a name or a keyword that indicates where to
display the response that is received after submitting he form.
The target attribute works with the following input types: Submitted and image, Ex:-
<! DOCTYPE html>
<html>
<body>
<h1>The input Form Target Attribute</h1>
<p>The form target attribute specifies a name or a keyword that indicates where to
display the response that is received after submitting the form.</p>
<form action="/action_page.php">
<label for="fname">First name :< /label>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name :< /label>
<input type="text" id="lname" name="lname"><br>
<input type="submit" value="Submit">
<input type="submit" form target="_blank" value="Submit to a new window/tab">
</form>
</body>
</html>

OUTPUT:
HTML Form Labels:-

. An HTML term label is an inline element.

. The <labels> tag defines a label for many form elements.

. The <labels> element is useful for screen -reader users, because the screenreader
will read out Loud the label when the users focus on the input element.

. The <label> elements also help users who have difficultly clicking on very small
regions (such as radio buttons or Check boxes) - because when the user clicks the text
within the <label>element it toggles the radio buttons / check boxes.

. The form attribute of the <label> tag should be equal to the id attribute of the
<input >element to bind them together.
Ex:-
<! DOCTYPE html>
<html>
<head>
<title> Try It Yourself </title>
<style type="text/css">
label {
Border: 1px inset #0076ff;
Border-radius: 5px;
Background: #428bca;
Color: #fff;
Padding-left: 4px;

60
padding-right: 4px;
margin-right: 3px;
}

</style>
</head>
<body>
<label for="demo"> First Name: </label>
<input type="text" id="demo" />
</body>
</html>

OUTPUT:

The <Input> Element:-

. The HTML <input> element is most used form element.

. The<input> element is an empty and inline element.

. An <input> element can be displayed in many ways, depending on the type

attribute.
Here are some examples:
TYPE DESCRIPTION
<input type=”text”> Display a single line text input field
<input type=”radio”> Displays a radio button(for selecting one of many
choices)
<input type=”checkbox”> Displays a checkbox(for selecting zero or more of
many choices)
<input type=”submit”> Display a submit button(for submitting the form)
<input type=”button”> Display a click able button
<input type=”password ”> Display a password field
<input type=”reset ”> Display a reset button that will reset all form
values to their default values
<input type=”search ”> Display search fields( a search field behaves like a
regular text field)
<input type=”range”> Display a control for entering a number whose
exact value is not important(like a slider
control).Default range is 0 to 100
<input type=”number ”> Display a numeric input field

<input type=”image”> Display an image as a submit button to path to

the image is specified in the src attribute
<input type=”email”> Display input fields that should contain an email
address
<input type=”date time-local”> Display a Date and time input field with no time
zone
<input type=”Date”> Display input fields that should contain a date
<input type=”Month ”> Display to allows the user to select a month and
year

HTML Input Attribute:

1. The Value Attributes:

The input value attribute specifies an initial value for an input field.
EX:-
<! DOCTYPE html>
<html>
<body>
<h1>The input value attribute</h1>
<p>The value attribute specifies an initial value for an input field:</p>
<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">

62
</form>
</body>
</html>
OUTPUT:

2. The Disabled Attribute:

The input disabled attribute specifies that an input field should be disabled.
A disabled input field, is unusable and unclick able.
The value of a disabled input field will not be sent when submitting the form. Ex:-
<! DOCTYPE html>
<html>
<body>
<h1>The input disabled attribute</h1>
<p>The disabled attribute specifies that an input field should be disabled (unusable
and un-clickable):</p>
<form action="/action_page.php">
<label for="fname">First name :< /label><br>
<input type="text" id="fname" name="fname" value="John" disabled><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>
</body>
</html>

OUTPUT:
3. The Placeholder Attribute:
The input placeholder attributes specifies a short hint that describes the expected
value of an input field (a sample value or a short description of the expected format).

The short hint is displayed in the input field before the user enters a value.
The Placeholder attribute works with the following input Types: text, search, URL,
email and password.
EX:-
<! DOCTYPE html>
<html>
<body>
<h1> The input placeholder attribute</h1>
<p>The placeholder attribute specifies a short hint that describes the expected value
of an input field. </p>
<form action="/action_page.php">
<label for="phone">Enter a phone number :< /label>
<input type="tel" id="phone" name="phone" placeholder="123-45-678"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"><br><br>
<input type="submit" value="Submit">
</form>
</body>

64
</html>

OUTPUT:

4. The Required Attribute:

The input required attribute specifics that an input field must be filled out before
submitting the form.
The required attribute works with the following input types: text, Search, URL,
email, Password, data Pickers, number, radio and checkbox.

Ex:-
<! DOCTYPE html>
<html>
<body>
<h1>The input required attribute</h1>
<p>The required attribute specifies that an input field must be filled out before
submitting the form.</p>
<form action="/action_page.php">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<input type="submit" value="Submit">
</form>
<p><strong>Note:</strong> The required attribute of the input tag is not supported
in Safari prior version 10.1.</p>
</body>
</html>

OUTPUT:
5. List Attribute:
The input list attribute refers to a <datalist> element that contains pre-defined
options for an <input> element.
Ex:-
<! DOCTYPE html>
<html>
<body>
<h1> The input list attribute</h1>

<p> The list attribute refers to a datalist element that contains pre-defined options
for an input element. </p>
<form action="/action_page.php">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit" value="Submit">
</form>
<p><b>Note :< /b> The datalist tag is not supported in Safari 12.0 (or earlier). </p>
</body>
</html>

66
OUTPUT:

INTRODUCTION OF CSS

. CSS stands for Cascading Style Sheets

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

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

Why Use CSS?

CSS is used to define styles for your web pages, including the design, layout and
variations in display for different devices and screen sizes.
CSS 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)
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

div ,p Selects all <div> elements and all

element,element,.. <p> elements

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

68
To select an element with a specific id, write a hash (#) character, followed by the id
of the element.
Note: An id name cannot start with a number! Example:

<! 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.
Note: A class name cannot start with a number!
Example:

<! DOCTYPE html>

<html>
<head>
<style> .center {
text-align: center;
color: BLUE;
}
</style>
</head>
<body>
<h1 class="center">THE CSS CLASS SELECTOR</h1>
<p class="center">Blue color and center-aligned paragraph.</p>
</body>
</html>

OUTPUT:

The CSS element Selector

The element selector selects HTML elements based on the element name. 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>

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

OUTOUT:

TYPES OF CSS
1. 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.
Ex:
<! DOCTYPE html>
<html>
<body>
<h1 style="color: blue; text-align: center ;"> This is a heading</h1>
<p style="color: red ;"> This is a paragraph. </p>
</body>
</html>

OUTPUT:

2. Internal CSS
An internal style sheet may be used if one single HTML page has a unique style.
The internal style is defined inside the <style> element, inside the head section.
Example:
<!DOCTYPE html>
<html>
<head>
<style> body
{
background-color: linen;
}
h1 {
color: maroon; margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body> </html>

OUTPUT:

3. External CSS

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

Each HTML page must include a reference to the external style sheet file inside the
<link> element, inside the head section.

An external style sheet is a separate CSS file that can be accessed by creating a link
within the head section of the webpage

72
An external style sheet can be written in any text editor, and must be saved with a
.css extension.
The external .css file should not contain any HTML tags. EX:

<! DOCTYPE html>

<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph. </p>
</body> </html>

OUTPUT:

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.

Ex:
<! DOCTYPE html>
<html>
<head> <style> div {
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.
It consists of: borders, padding, margins, and the actual content.</p>
<div>This text is the content of the box. We have added 50px padding, 20px margin
and a 15px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui official deserunt mollit anim id
est laborum.</div>
</body>
</html>

74
OUTPUT:

CSS Borders
The CSS border properties allow you to specify the style, width, and color of an
element's border.

CSS Border Style

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

The following values are allowed:

• dotted - Defines a dotted border

• dashed - Defines a dashed border
• solid - Defines a solid border
• double - Defines a double border
• groove - Defines a 3D grooved border. The effect depends on the bordercolor
value
 • ridge - Defines a 3D ridged border. The effect depends on the border-color
value
• inset - Defines a 3D inset border. The effect depends on the border-color value
• outset - Defines a 3D outset border. The effect depends on the border-color
value

• none - Defines no border

• hidden - Defines a hidden border

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

<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body>
<h2>The border-style Property</h2>
<p>This property specifies what kind of border to display:</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>

76
<p class="double">A double border.</p> <p
class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset"> An inset border. </p>
<p class="outset"> An outset border. </p>
<p class="none">No border. </p>
<p class="hidden">A hidden border. </p>
<p class="mix">A mixed border. </p>
</body> </html>

OUTPUT:
CSS Margins
The CSS margin properties are used to create space around elements, outside of any
defined borders.

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

Margin - Individual Sides

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

• margin-top
• margin-right
• margin-bottom
• margin-left

All the margin properties can have the following values:

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

EXAMPLE:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black; margin-
top: 100px; margin-bottom:
100px; margin-right: 150px;
margin-left: 80px; background-
color: lightblue;

78
 }
</style>
</head>
<body>
<h2>Using individual margin properties</h2>
<div>This div element has a top margin of 100px, a right margin of 150px, a bottom
margin of 100px, and a left margin of 80px.</div>
</body> </html>

OUTPUT:

The auto Value

You can set the margin property to auto to horizontally center the element within its
container.

The element will then take up the specified width, and the remaining space will be
split equally between the left and right margins.

The inherit Value

This example lets the left margin of the <p class="ex1"> element be inherited from
the parent element (<div>).

CSS Padding
The CSS padding properties are used to generate space around an element's content,
inside of any defined borders.
With CSS, you have full control over the padding. There are properties for setting the
padding for each side of an element (top, right, bottom, and left).

Padding - Individual Sides

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

• padding-top
• padding-right
• padding-bottom
• padding-left

All the padding properties can have the following values:

• length - specifies a padding in px, pt, cm, etc.

• % - specifies a padding in % of the width of the containing element
• inherit - specifies that the padding should be inherited from the parent
element

EXAMPLE:
<! DOCTYPE html>
<html>
<head> <style> div { border:
1px solid black;
background-color: lightblue;
padding-top: 50px; padding-
right: 30px; padding-
bottom: 50px; padding-left:
80px;
}
</style>
</head>
<body>
80
<h2>Using individual padding properties</h2>
<div>This div element has a top padding of 50px, a right padding of 30px, a bottom
padding of 50px, and a left padding of 80px.</div>
</body>
</html>

OUTPUT: