Web Designing Training WD - PLGPL-3

BRIGHT CAREER INFOTECH, LATUR
TRAINING
on
Web Designing and Web
Development
1
Bright Career InfoTech, Latur: (www.brightelearn.in) 9766620068
7/6/2023
Web Designing & Development
Training Objective :
To make student capable to create his/her own web site.
Training Syllabus Contains Three Modules
o HTML – Used to create the structure of a web site
o CSS – Used to provide style and design to your web site
o JavaScript – It defines behavior of your web site
o PHP
o Bootstrap
Completion : During Training we will assign web site topic
to every student and complete it within training.
2
7/6/2023 1. What is HTML?
1. HTML:
• Hypertext:
• Hypertext is a text which contains links to other pages
• Markup language:
• Markup language uses tags to define elements with in
page.
• It is used to create structure of a web page.
3
8/6/2023
1. What is HTML?
• HTML is platform independent.
• HTML is case sensitive
• HTML file has an extension .htm or. Html
• HTML uses markup tags to define a web page.
Ex: <p> </p>
• No need of any programming background
• Need a web browser installed on your computer
and a text editor like notepad or vs code editor.
4
8/6/2023
History of HTML
5
8/6/2023
HTML (Hypertext Markup Language)
• HTML Tags:
o Tags are the starting and ending parts of an HTML
element. They begin with < and end with >
o Whatever written inside < and > are called tags.
• Container tags: <body> </body>
o Having starting and end
o Required to close the tag
• Empty tags : <img>, <input>
o Doesn’t require to close
6
8/6/2023
• HTML Elements:
o Elements enclose the contents in between the tags.
o <p> Bright Career Infotech</p>
• HTML Attributes:
o It is used to define the character of an HTML element.
o <p style=“color:red;”> Bright Career Infotech</p>
o Here style is an attribute and color:red is the
property/value of the attribute
7
9/6/2023
• How to Create a Web Site
o HTML – Used to create the structure of a web site
o CSS – Used to provide style and design to your web site
o JavaScript – It defines behavior of your web site
o PHP- Server Side Scripting
8
9/6/2023
How to write HTML code?
• Structure of HTML
<!DOCTYPE html> : defines version of html
<html> : web page code
<head> : defines meta information
<title> My First Page </title>
</head>
<body> : Contents to display on web page
</body>
</html>
9
9/6/2023
My First Web Page
<!DOCTYPE html>
<html>
<head>
<title> My First Page </title>
</head>
<body>
This is my First Web Page
<p> This is my First Web Page </p>
</body>
</html>
10
9/6/2023
First Web Page tag meaning
• <!DOCTYPE>
Defines the HTML version used in the document. In this case it is HTML5.
• <html>
Opens the page. No markup should come after the closing tag (</html>).
The lang attribute declares the primary language of the page using the ISO language
codes (en for English).
• <head>
Opens the head section, which does not appear in the main browser window but mainly
contains information about the HTML document, called metadata. The closing tag is
</head>.
• <title>
The title of the page. Text written between this opening and the closing tag (</title>)
will be displayed on the tab of the page or in the title bar of the browser.
• <body>
• Opens the part of the document displayed to users, i.e. all the visible or audible
content of a page. No content should be added after the closing tag </body>.
• <p> : Represents a common paragraph of a text.
11
10/6/2023
HTML Tag: paragraph tag <p>
• <p> Defines a paragraph
• Paragraphs are the most basic HTML element.
• A paragraph always starts on a new line, and browsers automatically

add some white space (a margin) before and after a paragraph.
• <p>This is a paragraph.</p>
• <p>This is another paragraph.</p>
12
10/6/2023
• <!DOCTYPE html> Paragraph.html
• <html lang="en">
• <head>
• <title> Paragraph Tag Demo </title>
• </head>
• <body>
• <p>Name: Dr. Laxmikant Goud</p>
• <p>Education: Ph.D in Computer Science and Engg </p>
• <p>Address: Latur </p>
• <p>Trainer: Bright Career Infotech, Latur</p>
• </body>
• </html>
13
10/6/2023
• You cannot be sure how HTML will be displayed.
• Large or small screens, and resized windows will create different

results.
• With HTML, you cannot change the display by adding extra spaces
or extra lines in your HTML code.
• The browser will automatically remove any extra spaces and lines
when the page is displayed:
14
10/6/2023
• <body> Paragraph.html
• <p>
• This paragraph
• contains a lot of lines
• in the source code,
• but the browser
• ignores it.
• </p>
• <p>
• This paragraph
• contains a lot of spaces
• in the source code,
• but the browser
• ignores it.
• </body>
15
10/6/2023
HTML Tag: paragraph tag <p> Attributes
• <p style="text-align:right">This is some text in a paragraph.</p>
16
10/6/2023
<p> : Test Yourself With Exercises
• Exercise:
• Use the correct HTML tag to add a paragraph with the text
"Hello World!".
<html>
<body>
----------------------------------------------------?
</body>
</html>
17
10/6/2023
<p> : Test Yourself With Exercises
• Exercise:
• Use the correct HTML tag to add a paragraph with the text "Hello
World!".
<html>
<body>
<p>Hello World!</p>
</body>
</html>
18
10/6/2023 HTML Tag: horizontal <hr> and line break <br>
• The <hr> tag defines a thematic break in an HTML page, and is most
often displayed as a horizontal rule.
• The <hr> element is used to separate content (or define a change) in

an HTML page.
• The HTML <br> element defines a line break.
• Use <br> if you want a line break (a new line) without starting a new
paragraph.
• The <br> tag is an empty tag, which means that it has no end tag.
19
10/6/2023 HTML Tag: horizontal <hr> and line break <br>
• <!DOCTYPE html> HRandBR.html
• <head> <title> hr and br Tag Demo </title>
</head>
• <body>
• <p>Name: Dr. Laxmikant Goud <hr>
• Education: Ph.D in Computer Science and Engg <br>
• Address: Latur <br>
• Trainer: Bright Career Infotech, Latur<hr>
• </p>
• </body>
• </html> 20
10/6/2023
<hr> : Test Yourself With Exercises
• Exercise:
• Add a horizontal rule between the heading and the paragraph.
• <h1>London</h1>
• ---------------------------?
• <p>London is the capital city of England. It is the most populous city

in the United Kingdom, with a metropolitan area of over 13 million
inhabitants.</p>
21
10/6/2023
<hr> : Test Yourself With Exercises
• Exercise:
• Add a horizontal rule between the heading and the paragraph.
• <h1>London</h1>
• <hr>
• <p>London is the capital city of England. It is the most populous city

in the United Kingdom, with a metropolitan area of over 13 million
inhabitants.</p>
22
10/6/2023
<br> : Test Yourself With Exercises
• Exercise:
• Add a line break in the middle of the paragraph:
• <p>My Bonnie lies ?--------? over the ocean.</p>
23
10/6/2023
<br> : Test Yourself With Exercises
• Exercise:
• Add a line break in the middle of the paragraph:
• <p>My Bonnie lies <br> over the ocean.</p>
24
10/6/2023
HTML Tag: <pre> preformatted text
• The Poem Problem: This poem will display on a single line:
<p>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
Oh, bring back my Bonnie to me.
</p>
• Wrap this poem around HTML tags that will preserve all spaces and linebreaks
when the element is displayed.
• Solution - The HTML <pre> Element
• The HTML <pre> element defines preformatted text.
• The text inside a <pre> element is displayed in a fixed-width font (usually Courier),
25
and it preserves both spaces and line breaks:
10/6/2023
HTML Tag: <pre> preformatted text
<p> PreformattedTag.html
</p>
<pre> Output

</pre>
26
12/6/2023
HTML Tag: heading tag
• HTML provides not only plain paragraph tags, but six separate
header tags to indicate headings of various sizes and thicknesses.
• HTML headings are defined with the <h1> to <h6> tags.
• heading 1 has the largest and thickest text while heading 6 is the
smallest and thinnest, down to the paragraph level.
• <h1> defines the most important heading. <h6> defines the least
important heading.
• <h1> headings should be used for main headings, followed by
<h2> headings, then the less important <h3>, and so on.
27
12/6/2023
• Headings support all the global attributes.
<h1> defines the most important heading. <h6> defines the least important heading.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Each HTML heading has a default size. However, you can specify the size for any
heading with the style attribute, using the CSS font-size property:
<h1 style="font-size:60px;">Heading 1</h1>

28
12/6/2023
<DOCTYPE html> Heading.html
<html lang="en">
<head>
<title> Heading Tag </title>
</head>
<body>
<h1> Heading-1 </h1>
</body>
</html>
29
12/6/2023
30
12/6/2023
HTML Tag: heading tag & <p> tag example
<!DOCTYPE html> HeadingParagraph.html
<html lang="en">
<head> <title> Heading & Paragraph Tag Demo </title> </head>
<body>
<h1>Name:</h1>
<p>Dr. Laxmikant Goud </p><br>
<h2>Education:</h2>
<p>Ph.D in Computer Science and Engg </p> <br>
<h3>Address: </h3>
<p>Latur </p><br>
<h4>Trainer: </h4>
<p>Bright Career Infotech, Latur</p>
</body>
</html>
31
12/6/2023
Test Yourself With Exercises
Exercise:
Use the correct HTML tag to add a heading with the text "London".
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
32
12/6/2023
Exercise: Solution
Use the correct HTML tag to add a heading with the text "London".
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan
area of over 13 million inhabitants.</p>
<!DOCTYPE html> HeadingExcersies.html
<html lang="en">
<head>
<title> Heading Excersies </title>
</head>
<body>
<h1>London</h1>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan
area of over 13 million inhabitants.</p>
</body>
</html>
33
12/6/2023
Exercise:
Add six headings to the document with the text "Hello".
Start with the most important heading (the largest) and end with the least
important heading (the smallest).
34
12/6/2023
Exercise:
Add six headings to the document with the text "Hello".
Start with the most important heading (the largest) and end with the least important
heading (the smallest).
<html>
<body>
<h1>Hello</h1>
<h2>Hello</h2>
<h3>Hello</h3>
<h4>Hello</h4>
<h5>Hello</h5>
<h6>Hello</h6>
</body>
</html>
35
12/6/2023
HTML Tag: link anchor tag
• The <a> tag defines a hyperlink, which is used to link from one
page to another.
• The <a> tag (anchor tag) in HTML is used to create a hyperlink on
the webpage.
• This hyperlink is used to link the webpage to other web pages or
some section of the same web page.
• It’s either used to provide an absolute reference or a relative
reference as its “href” value.
• Syntax:
• <a href = "link"> Link Name </a>
36
12/6/2023
1. Link to Another Web Site: Absolute url
• Absolute url: Link to Another External Web Site
• eg.<a href=“https://www.brightelearn.in”
target=“_blank”> Bright Career Infotech</a>
• Target Specifies where to open the link, e.g. in a

new tab or window.
37
12/6/2023
2. Link to a page on the same site: relative url
• You can use a relative path to link to pages on the

same website.
• Relative url: Link to Another Web Page within a

web site
• eg. <a href=“./demo.html”> demo page </a>
• ./ refers to the web page present in current folder

38
12/6/2023
• <!DOCTYPE HTML> AnchorLinkTag.html
• <html lan="en">
• <head> <title>Link Anchor Tag </title> </head>
• <body>
• <h1> Demonstration of Link Anchor Tag </h1>
• <h2>Absolute url: Link to Another External Web Site</h2>
• <a href="https://www.brightelearn.in" target="_blank"> Bright Career Infotech,

Latur </a>
• <h2>Relative url: Link to Another Web Page within a web site</h2>
• <a href="./Paragraph.html">paragraph tag demo </a>
• </body> </html>
39
12/6/2023
• <!DOCTYPE html> Paragraph.html
• <head> <title> Paragraph Tag Demo </title> </head>
• <body>
• <p>Name: Dr. Laxmikant Goud</p>
• <p>Education: Ph.D in Computer Science and Engg </p>
• <p>Address: Latur </p>
• <p>Trainer: Bright Career Infotech, Latur</p>
• <a href="./AnchorLinkTag.html">Anchor Link tag demo </a>
• </body> </html>
40
12/6/2023
Exercise:
1. Add Links to open following web pages:
https://www.brightelearn.in
https://www.google.co.in
https://www.facebook.com
https://www.msbte.org.in
2. Add Links to all Web pages that you have created till date.
41
12/6/2023 HTML Text Formatting Tags
Tag Description
<b> Defines bold text
<em> Defines emphasized text
<i> Defines a part of text in an alternate voice or mood
<small> Defines smaller text

<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<mark> Defines marked/highlighted text
<center> You can use <center> tag to put any content in the center of the page
or any table cell.
42
12/6/2023
HTML Text Formatting Tags
HTML <b> and <strong> Elements
• The HTML <b> element defines bold text, without any extra
importance.
• Example
• <b>This text is bold</b>
• The HTML <strong> element defines text with strong importance.

The content inside is typically displayed in bold.
• Example
• <strong>This text is important!</strong>
43
12/6/2023
HTML <i> and <em> Elements
• The HTML <i> element defines a part of text in an alternate
voice or mood. The content inside is typically displayed in
italic.
• Example : <i>This text is italic</i>
• The HTML <em> element defines emphasized text. The
content inside is typically displayed in italic.
• Example: <em>This text is emphasized</em>

44
12/6/2023
HTML <small> Element
• The HTML <small> element defines smaller text:
• Example
• <small>This is some smaller text.</small>
HTML <mark> Element

• The HTML <mark> element defines text that should be marked or
highlighted:
• Example
• <p>Do not forget to buy <mark>milk</mark> today.</p>
45
12/6/2023
HTML <del> Element
• The HTML <del> element defines text that has been deleted from a document. Browsers
will usually strike a line through deleted text:
• Example deleted text
• <p>My favo
HTML <ins> Element
• The HTML <ins> element defines a text that has been inserted into a document. Browsers
will usually underline inserted text:
• Example
• <p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
• rite color is <del>blue</del> red.</p>

46
12/6/2023
HTML <sub> Element
• The HTML <sub> element defines subscript text. Subscript text appears half a
character below the normal line, and is sometimes rendered in a smaller font.
Subscript text can be used for chemical formulas, like H2O:
• Example: <p>This is <sub>subscripted</sub> text.</p>
HTML <sup> Element

• The HTML <sup> element defines superscript text. Superscript text appears half a
character above the normal line, and is sometimes rendered in a smaller font.
Superscript text can be used for footnotes, like WWW[1]:
• Example: <p>This is <sup>superscripted</sup> text.</p>

47
12/6/2023
HTML image tag: <img>
• Images can improve the design and the appearance of a web page.
• 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 is empty, does not have a closing tag.
• Syntax: <img src="url" alt="alternate text">
• src - specifies the path (URL) to the image.
• alt - Specifies an alternate text for the image
• Image present in Same/Current Folder of Web Page

48
12/6/2023
• Image Size - Width and Height
• You can use the style attribute in css to specify the width and height of an
image.
• Alternatively, you can use the width and height attributes:
<img width="500" height="600" src="penguins.jpg" alt="penguins image" >
• The width and height attributes always define the width and height of the
image in pixels.
• However, we suggest using the style attribute. It prevents styles sheets from
changing the size of images:
49
12/6/2023
• <html> <body>
• <h1> Images</h1>
• <img height="400" width="400" src="penguins.jpg" alt="image not

found">
• <img height="400" width="400" src="koala.jpg" alt="image not

found">
• <img height="400" width="400" src="jellyfish.jpg" alt="image not

found">
• </body>
• </html>
50
12/6/2023
Images in Another Folder
• If you have your images in a sub-folder, you must include the folder
name in the src attribute:
• Example
• <img height="400" width="400" src="D:/ONLINE TEACHING
CLASS BRIGHT/Web Designing Course/Excersies/Tulips.jpg"
alt="image not found">
51
12/6/2023
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:
• Example
• <img
src="https://www.w3schools.com/images/w3schools_green.jpg"
alt="W3Schools.com">
52
12/6/2023
Animated Images
• HTML allows animated GIFs:
• Example
• <img height="400" width="400" src="program.gif" alt="image not
found"> <br>
53
12/6/2023
Image as a Link
• To use an image as a link, put the <img> tag inside the <a> tag:
• Example
• <a href="https://www.brightelearn.in" target="_blank"><img
height="200" width="400" src="penguins.jpg" alt="image not
found">
• </a>
54
12/6/2023
HTML attribute bgcolor
bgcolor
• The HTML bgcolor attribute is used to set the background color of an
HTML page.
• <body bgcolor=“red”>
• <body bgcolor="rgb(255,99,71)">
• <body bgcolor="#ff6347">
• HTML colors are specified with predefined color names, or with
RGB, or HEX values.
55
12/6/2023
HTML marquee tag
<marquee>
• Marquee is one of the important tags introduced in HTML to support
such scrollable texts and images within a web page.
• The <marquee> tag is a container tag of HTML is implemented for
creating scrollable text or images within a web page from either left
to right or vice versa, or top to bottom or vice versa.
56
12/6/2023 HTML marquee tag
Attribute Description
width provides the width or breadth of a marquee. For example
width="10" or width="20%"
height provides the height or length of a marquee. For example
height="20" or height="30%"
direction provides the direction or way in which your marquee will allow you
to scroll. The value of this attribute can be: left, right, up or down
scrollamount provides value for speeding the marquee feature
behavior provides the scrolling type in a marquee. That scrolling can be like
sliding, scrolling or alternate
loop provides how many times the marquee will loop
bgcolor provides a background color where the value will be either the
name of the color or the hexadecimal color-code.
vspace provides a vertical space and its value can be like: vspace="20" or
vspace="30%"
hspace provides a horizontal space and its value can be like: vspace="20"
or vspace="30%" 57
12/6/2023
HTML marquee tag
Scroll UP
<marquee width="60%" direction="up" height="100%">
This is a sample scrolling text that has scrolls in the upper direction.
</marquee>
Scroll Down
<marquee width=“60%" direction="down" height=“100%">
This is a sample scrolling text that has scrolls texts to down.
</marquee>
58
12/6/2023
HTML marquee tag
Scroll Left to Right
<marquee width="60%" direction="right" height="100%">
This is a sample scrolling text that has scrolls texts to right.
</marquee>
Scroll Right to Left
<marquee width="60%" direction="left" height="100%">
This is a sample scrolling text that has scrolls texts to left.
</marquee>
59
12/6/2023
HTML marquee tag
Scrolling Speed
Marquee speed can be changed using the "scrollmount" attribute.
For example, if you are using scrollmount = "1" then it sets the marque to scroll very slowly,
and as you increase the "scrollmount," the scrolling speed will also increase.
<marquee behavior="scroll" direction="up" scrollamount="1">Slow

Scrolling</marquee>
<marquee behavior="scroll" direction="right" scrollamount="12">Little Fast

Scrolling</marquee>
<marquee behavior="scroll" direction="left" scrollamount="20">Fast

Scrolling</marquee>
<marquee behavior="scroll" direction="right" scrollamount="50">Very Fast

Scrolling</marquee>
60
13/6/2023
HTML font tag
<font>
• HTML has an amazing font tag that helps in customizing the colors,
sizes, and styles of web page fonts.
• Text having high readability and different styles attracts the entire
website and beautifies the content. Proper style and color to the font
can make your document more user-friendly and readable.
• Syntax: <font>This is an Sample text.</font>
61
13/6/2023
HTML font tag
<font> attributes
• For customizing your font, HTML provides three different attributes.
These are the:
• Size: Texts can be sized accordingly using the size attribute of the
font tag. The size ranges from 1 up to 7 from lowest to highest.
• Color: This can be set using the color attribute of the font tag.
• Face: This is made possible using the face attribute of the font tag.
62
13/6/2023
HTML font tag
<font> size attributes
<body>
<font size="7">Here font size is 7 which is highest</font> <br />
<font size="6">Here font size is 6</font> <br />
</body>
63
13/6/2023
HTML font tag
<font> color attributes
<body>
<font color = "#0000FF"> Color change using Hex value
</font> <br/>
<font color = "aqua"> Color change using color name </font>
</body>
64
13/6/2023
HTML font tag
<font> face attributes
<body>
<font face = "WildWest" size = "4">Font style Example
1</font> <br/>
<font face = "Monotype Corsiva" size = "6">Font style
Example 2</font>
</body>
65
13/6/2023
HTML list tag:
HTML lists are used to represent list of information in
1. Co
well formed and semantic way. 2. It
3. Mech
4. Civil
Unordered List: Used to create a list of related items, in
no particular order. <ul> • Co
• It
• Mech
Ordered List: Used to create a list of related items, in a • Civil
specific order. <ol>

Description List: Used to create a list of related items and their
descriptions
66
13/6/2023
HTML ordered list tag: <ol>
• In Ordered HTML lists, all the items are marked with
numbers by default. It is known as numbered list also.
• The ordered list starts with <ol> tag and the list items are
starts with <li> tag.
• Example:
• <ol> Output:
• <li> Web Designing </li> 1.Web Designing
• <li> Python</li> 2.Python
• <li> Advance Java </li> 3.Advance Java
• <li> Android</li> 4.Android
• </ol>
67
13/6/2023
• <ol> type Attributes: Changing the type of numeral
• You can easily change the type of numeral shown in the list
item marker by using the type attribute.
• <ol type="1 or a or A or i or I">
• Example:
• <ol type=“I”> Output:
• <li> Web Designing </li> I. Web Designing
• <li> Python</li> II.Python
• <li> Advance Java </li>
III.Advance Java
IV.Android
• <li> Android</li>
• </ol>
68
13/6/2023
• <ol> start Attributes: Manually changing the numbers
• You can easily change the type of numeral shown in the list
item marker by using the type attribute.
• Example:
• <p>
• <ol start=“3”> Output:
• <li> Web Designing </li> 3. Web Designing
• <li> Python</li> 4.Python
• <li> Advance Java </li>
5.Advance Java
6.Android
• </ol> <.p>
69
13/6/2023
• You can also explicitly set a certain list item to a specific
number.
• Further list items after one with a specified value will
continue incrementing by one from that list item's value,
ignoring where the parent list was at.
• Example:
• <p> Output:
• <ol start=“3”> 3. Web Designing
• <li> Web Designing </li> 4. Python
• <li> Python</li> 10. Advance Java
• <li value=“10”> Advance Java </li> 11. Android
• </ol> </p>
70
13/6/2023
• <ol> reverse Attribute: You can reverse the numbering by
adding reversed in your ol element:
• Example:
• <p>
• <ol reversed>
• <li> Web Designing </li> Output:
• <li> Python</li> 4. Web Designing
• <li > Advance Java </li> 3. Python
2. Advance Java
1. Android
• </ol>
• </p>
71
13/6/2023
• Assignment on Ordered List:
• Prepare a List Subjects of All Semesters from Semester 1
to 6
Branch Name: Computer Science and Engineering
1. Semester-1
1. Sub-1
2. Elective Sub-2
1. Sub-1
2. Sub-2
3. Sub-4
2. Semester-2
1. Sub-1
2. Sub-2
72
14/6/2023
HTML unordered list tag: <ul>
• An unordered list can be created with the <ul> tag and each
list item can be created with the <li> tag.
• This will produce a bulleted list (which is the default style):
• Example:
• <p>
• <ul> Output:
• <li> Web Designing </li> • Web Designing
• <li> Python</li>
• Python
• <li > Advance Java </li>
• Advance Java
• Android
• </ul>
• </p>
73
14/6/2023
HTML unordered list tag: <ul>
• type Attributes: Changing the type of list item marker
• You can easily change the type of shown in the list item marker
by using the type attribute.
• <ul type=“disc or circle or square ">
• Example:
• <p>
• <ul type=“circle”> Output:
• <li> Web Designing </li> o Web Designing
• <li> Python</li> o Python
• <li > Advance Java </li> o Advance Java
• <li> Android</li> o Android
• </ul>
• </p>
74
14/6/2023
HTML Description list tag: <dl>
• A description list is a list of terms, with a description of each
term.
• The <dl> tag defines the description list, the <dt> tag defines
the term (name), and the <dd> tag describes each term.
• Example:
• <p>
• <dl> Output:
• <dt>Coffee</dt> Coffee
• <dd>- black hot drink</dd> - black hot drink
• <dt>Milk</dt> Milk
• <dd>- white cold drink</dd>
- White cold drink
• </dl>
• </p>
75
14/6/2023
HTML List tag Summary
Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list
76
14/6/2023
Assignment
• Create an Attractive Web page which will Display
Following:
• Name of Student:
• Roll No
• Class
• College Name
• Branch Name
• List of Subjects Semester Wise
Note: Use all the Tags taken till date (9/7/2022) to make page
more attractive.
77
14/6/2023
HTML table tag: <table>
• HTML tables allow web developers to arrange data into
rows and columns.
• Each table row starts with a <tr> and end with a </tr> tag.
• <th> </th> Defines a header cell in a table
• Each table cell is defined by a <td> and a </td> tag.

Roll No Name Class
1 Rahul FE
2 Arjun SE
78
14/6/2023
HTML table tag: <table>
• HTML tables allow web developers to arrange data into
rows and columns.
• 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.
79
How to add collapsed borders to a
table (with CSS):
<style>
table,th,td
{
border: 1px solid black;
border-collapse: collapse;
}
</style>
14/6/2023
ASSIGNMENT-1
Roll No Name Class Per
1 Rahul 65
V SEM
2 AMEY 75
3 Sanket 85
IV SEM
4 Arjun 95
14/6/2023
Assignement-2
Sr.No Branch Name Course Name Join
1 Web Desinging Click Here
2 Python Click Here

Computer/IT
3 Advance Java Click Here
4 Android Click Here
5 Auto CAD Click Here

Civil
6 CATIA Click Here
14/6/2023
Assignement-3
Sr.No Page Name Description Link
1 Click Here
2 Click Here
3 Click Here
4 Click Here
5 Click Here
6 Click Here
• Table tags: Tables allow to arrange data into rows and columns.
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
14/6/2023 shift_+alt+down arrow: copy line
84
• <caption> Student list</caption>
<table border="1" bgcolor="red">
<thead>
<tr>
<th> Rollno</th>
<th> Name </th>
<th> Branch </th>
</tr>
</thead>
<tbody>
<tr>
<td>1 </td>
<td>Raj</td>
<td>Computer</td>
</tr>
</tbody> 14/6/2023
</table>
85
<table border="1" bgcolor="white">
<caption align="center">Student List</caption>
<thead>
<tr bgcolor="red">
<th> Rollno</th>
<th> Name </th>
<th> Branch </th>
<th> To Join </th>
</tr>
</thead>
<tbody>
<tr align="center">
<td bgcolor="pink">1 </td>
<td>Raj</td>
<td rowspan="2">Computer</td>
<td><button><a href="https://www.brightelearn.in">Click
Here</a></button></td>
</tr>
</tbody>
</table> 14/6/2023
86
• HTML Form: HTML form is used to collect user input.
• Form contains textfields, buttons, checkboxes, radio buttons etc
Syn: <form>
----
---
</form>
• Form Attributes:
• action= “target url”
• target=“_blank”, “_self”, “_parent”, “_top”, “framename”
• method= get, post, put etc.
• Name“= “formname”
• novalidate
• Autocomplete=“on”/”off”
87
• Form Elements:
• <label>
• <input>
• <select>
• <textarea>
• <button>
• <option>
88
<form>
<label for="uname">User Name</label>
<input type="text“ name=“username” id="uname“ placeholder=“
user name”>
<label for="upass">Password</label>
<input type="password" id="upass">
<label for="uemail"> Email</label>
<input type="email" id="uemail">
<p> Select Gender</p>
<label for="male"> Male</label>
<input type="radio" name="gender" id="male" >
<label for="female"> Female</label>
<input type="radio" name="gender" id="female">
</form>
89
<label for="country"> Select Country</label>
<select name="abc" id="country">
<option value="select">--select--</option>
<option value="India">India</option>
<option value="America">America</option>
<option value="England">England</option>
</select>
<label for="addr">Address</label>
<textarea name="add" id="addr" cols="30" rows="10"
maxlength="30" autofocus required readonly
wrap="soft">address</textarea>
<input type="submit" Value="Login">
</form>
90
• HTML Input Types
<input type=“text">
<input type="password">
<input type="email">
<input type="submit">
<input type="radio">
<input type="checkbox">
<input type="date">
<input type="datetime-local">
<input type="month">
<input type="time">
<input type="week">
91
<input type="color">
<input type="number">
<input type="file">
<input type="range">
<input type="button">
<input type="reset">
<input type="search">
<input type="url">
92
• HTML Block level & Inline elements:
• Block level : All block level elements starts with new line.
• A block level elements takes up the full width of available.
• A block level element has top and bottom margin.
• <div> div (division) Tag:
• The <div> tag is block level tag.
• It defines a division or a section in an HTML document.
• It is used as a container for HTML elements.
• It is used to create group of other tags.
• <div> ….</div>
93
• Inline element:
• An Inline elements does not start on a new line.
• An inline element takes up as much width as necessary.
• It has not any margin.
• <span>Tag:
• Span tag is used as container of inline element
• It is used for styling purpose of grouped inline elements
• It is used to change color, font , background of part of text.
• It is used to apply script to the particular part of text.
• <span> …</span>
94
• Fieldset & legend tag:
• <Fieldset>:
• It is used to set group related elements in form
• It draws a box around the related elements.
• <fieldset>….</fieldset>
• <legend>:
• It defines caption for the field set elements.
• <legend> …. </legend>
95
• Fieldset & legend tag:
• <Fieldset>: It is used to set group related elements in form
• It draws a box around the related elements.
• <fieldset>….</fieldset>
• <legend>: It defines caption for the field set elements.

• <legend> …. </legend>
• <details>: It specify additional details that the user can open

and close on demand.
• It is used to create interactive widget.
• The content of details tag is visible when open the set
attributes.
96
• <details>
• <summery> …. </summery>
• <p>….. </p>
• </details>
• <embed>: It is used for embedding external applications
generally multimedia contents like image, audio, video etc.
• It contains four attributes. 1. src 2. height 3. width 4. type
• <embed src="brightaddv.mp4" type="video/mp4">
• <video> tag: Before HTML5, video could only be played in
browser using a plug in like flash.
• HTML5 enabled video element specifies a standard way to
embed a video on a web page.
• Three formats are supported by web browser mp4. ogg, webm.
97
• syn. <video src=“” > </video>
• Attributes:
• 1. src: It is used to set source of video
• 2. Autoplay: It tells browser to start downloading video & play it
• 3. preload: It provide a hint to the browser to preload
• 4. loop: It tell the browser to automatically loop the video
• 5. Height & width: It sets the height & width of the video
• 6. controls: It shows the default video controls.
• 7. muted: It mutes the audio from the video.
• 8. poster: It loads an image to preview before loading the video
98
• <audio> tag: Before HTML5, audio could only be played in
browser using a plug in like flash.
• HTML5 audio can be added to webpages using the audio tag.
• It is an inline element, that is used to embed sound files into a
web page.
• Syn: <audio> <source src=“sample.mp3” type=“audio/mpeg”>
</audio>
• Attributes:
• 1. Autoplay: It tells browser to start downloading video & play it
• 2. preload: It provide a hint to the browser to preload
• 3. loop: It tell the browser to automatically loop the audio
• 4. controls: It shows the default video controls.
• 5. muted: It mutes the audio from the audio file.
99
• HTML Character entity: Reserved characters in HTML must be
replaced with character entities.
• It you use the less than(<) or greator than(>) signs in your text,
the browser might mix them with tags.
Syn: &entity_name; OR &#entity_number;
< less than < <
> greater than > >
& ampersand & &
" double quotation mark " "
' single quotation mark ' '
¢ cent ¢ ¢
© copyright © ©
® registered trademark ® ®
Space &#160
100
• <abbr> tag: It is used to define the abbreviation or short form
of an element.
• The abbreviation is used to provide useful information to the
browser, translation system and search engines.
• Syn: <abbr title=“”> short form </abbr>
• Eg. <abbr title=“Hyper text markup language”> HTML</abbr>
• <datalist> tag: It is used to provide autocomplete feature in

HTML files.
• It is used with an input tag, so that user can easily fill the data
in the form using select the data.
• Syn: <datalist id=“Idname”>…</datalist>
101
<bdo> tag: stands for Bi-Dirctional Override. This tag is used to specify
the text direction.
• Syn: <bdo dir=“”> contents<bdo>
• Attributes: 1. ltr 2. rtl
• <bdo dir=“ltr”> Bright</bdo> <bdo dir=“rtl”>Bright</bdo>
<figcaption> tag: It is used to set a caption to the figure element in a

document. This tag is new in HTML5.
• Syn: <figure> <figcaption> Figure caption</figcaption> </figure>
• Eg. <figcaption> Logo of bright</figcaption>
• <pre> tag: It is used to define the block of pre formatted text.

• It preserves the text spaces, line breaks, tabs & other formatting
characters are ignored by browsers.
• Syn: <pre>….</pre>
102
• <template> tag: The content of the tag is hidden from client-
side. It is inserted until activated using javascript.
• <template>…… </template>
• <iframe> tag: iframe stands for inline frame. It defines a
rectangular region within the document. It is used to embed
another document within the current document.
• The src attribute is used to specify the url of other document.
• Syn: <ifram src=“url”>… <iframe>
• sandbox attribute: The sandobx attribute permits an additional
set of restrictions for the content within the frame.
syn: <iframe sandbox=“value”>
• Eg. <iframe sandbox="allow-same-origin allow-popups"
src="./demo1.html" frameborder="0"></iframe>
103
• <svg> tag:
• SVG stands for scalable Vector Graphics.
• SVG graphics do not lose any quality if they are zoomed or
resized.
• Every element and every attribute in SVG files can be animated.
• SVG is a w3c recommendation.
<meta> tag:
The meta data means information about data.
The <meta> tag provides information about html document.
It is an empty element, because it only has an opening tag and not
closing tag.
It carries information within its attributes.
A web document can include one or more meta tags.
104
• <meta> tag Attributes:
Name: This attribute is used to define the name of the property.
http-equiv:equiv: This attribute is used to get the http response.
Content: This attribute is used to specify properties value.
Charset: This at tribe is used to specify a character encoding for
an html file.
Key points:
The <meta> tag contents are not visible on your browser.
They are just used to give additional information about the html
document.
This tag is added to our html document for the purpose of search
engine optimization.
They are added inside the <head> tag.
105
• Semantic and non semantic elements:
Html tags are classified in two types:
Semantic Element: These have meaningful names. It tells about
type of content. Eg. Header, footer, table etc.
Non Semantic Element: They do not have any meaning.
They don not tell anything about the content, they contain.
Eg. div, span
• Image map
With html image maps, you can create clickable areas on an
image.
Syn: <img src=“” usemap=“#mapname”>
<map name=“mapname”> </map>
106
3. CSS(Cascading Style Sheet)
. What is CSS:
1. CSS Stands for Cascading style sheet.
2. CSS describes how html elements are to be displayed on screen.
3. CSS saves a lot of work.
4. It can control the layout of multiple web pages all at once.
. Why CSS?
• CSS saves time: You can write CSS once and reuse in multiple html
pages.
• Easy Maintenance: To make a global change simple change the
style, and all elements in all the independent.
107
• Syntax:
• Selector Property value
• p {color: red;}
• Types of CSS:
• Inline CSS: This kind of style is specified within html tag using the
style attribute.
• Eg. <h1 style =“color:red;”>
• Internal or Embedded CSS: This can be used when a single html
document must be styled uniquely. This CSS rule set should be within
the html file in the head section.
• Eg. <head><style> p{color:red;} </style></head>
• External CSS: External CSS contains separate css file with .css
extension.
• It contains only style property with the help of tag attributes.
Eg. class, id, heading
108
• It should be linked to the html document using link tag.
• For each element, style can be set once and that will be applied
across web pages.
• Eg. h1{color:red;}
• <link rel=“stylesheet” href=“style.css”>
• CSS selectors:
• Id and classes in CSS:
• ID: The id attribute specifies a unique id for an html element.
• The value of the id attribute must be unique within html
document.
• <h1 id=“clr”> bright</h1>
• #clr{color:red;}
109
Class: The class is an attribute which specifies one or more class
names for html element.
• The class name can be used by css and javascript to perform
certain tasks for elements.
• <h1 class=“clr”> bright</h1>
• .clr{color:red;}
• .list{color:white; background-color:black;}
• .text-yellow{color:yellow;}
• .text-red{color:red};
• P{color:red;}
• ul{color:blue;}
• body{background-color:yellowgreen;}
110
CSS Selector
CSS Selectors Types
1. Simple selectors,
2. Combinator selectors,
3. Attribute Selectors,
4. Pseudo Class Selectors and
5. Pseudo Elements Selectors

111
CSS Selector
1. Simple selectors:-
1. Element Selector
2. Id Selector
3. Class Selector
4. Universal Selector
5. Grouping Selector
112
CSS Selector: 1. Simple Selector
1. Element Selector: Directly apply on HTML Tags
body{
color: white;
background-color: red;
font-family: cursive;
}
h1{
color: blue;
background-color: aqua;
font-family: sans-serif;
}
113
2. Id Selector:
Apply on Tag Id’s like Div Tag’s ID and use # for applying
css.
ID is unique and can’t be duplicate
<div id="section-1">
#section-1{
height:400px;
width:300px;
border: 100px;
display: flex;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 20px;
}
114
3. Class Selector:
Apply on Tag Id’s like Div Tag’s ID and use . for applying
css.
Class is not Unique and one class can apply to more than one tag.
<div class="section-1">
.section-1{
height:400px;
width:300px;
border: 100px;
display: flex;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 20px;
}
115
4. CSS Universal Selector
*{
Color:red;
}
It applies style to all tags present in the page. It will

apply to complete page. It used rarely.
116
5. Grouping Selector
h1,h2,p {
Color:red;
}
It applies style to more than one tags in a group.
117
CSS Selector: 2. Combinator Selector
1. Descendent Selector
2. Child Selector (>)
3. Adjacent Sibling Selector (+)
4. General Sibling Selector (~)
118
1. Descendent Selector
It is used to apply styles to the individual tags in the
section.
.name h2 (DivSpan2023.html)
{
color: blue;
margin-top: 15px;
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: 10;
}
Applies to all h2 tags in the name section
119
2. Child Selector
.section-1 > p{
color: coral;
font-size: 30px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial,
sans-serif;
}
It applies to Immediate Child tags only and not to their sub
childs.
120
3. Adjacent Selector
h1+p{
color: blue;
}
It applies style to the immediate tag of the given tag.
Applies to Immediate paragraph tag after h1 tag
121
4. General Sibling Selector
H1~p{
color: blue;
}
Applies to all paragraph tag after h1 tag
Apply to All Sibling or tag
122
CSS Selector: 3. Attribute Selector
input[type=‘text’]{
Border: 2px solid red;
}
Applies to the Attributes of the tag.
123
• It is used to select all the elements that have the specified
attribute and applies the CSS property to that attribute.
• Eg. <input type=“text”> here, text is attribute of input tag.

input[type="text"]{
color: red;
border: 5px solid;
}
input[type="password"]{
color: blue;
}
124
<a href="https://www.google.com">Google</a> <br><br>
<a href="https://www.google.co.in">Google</a><br><br>
<a href="https://www.brightelearn.in">Bright</a><br><br>
<a href="www.msbte.org.in">MSBTE</a>
• * used to apply style on the in between link*/
a[href *="google"]{
color: yellow;
• ^ sign used for begining of link*/
a[href ^="https"]
color: red;
background-color: yellow;
125
} Bright Career InfoTech, Latur: (www.brightelearn.in) 9766620068
/* $ used for End of link */
/* a[href $=".in"]
{
color: blue;
background-color: darkorange;
} */
/*Apply on the alphabet present in the link*/
/* a[href *="o"]
{
color: red;
} */
126
CSS Selector: 4. Pseudo Class Selector
• Simple Tooltip Hover
Hover over a <div> element to show a <p> element (like a
tooltip):
Example
p{
display: none;
padding: 20px;
}
div:hover p {
display: block;
}
127
• CSS - The :first-child Pseudo-class
• The :first-child pseudo-class matches a specified
element that is the first child of another element.
• Match the first <p> element
• In the following example, the selector matches any
<p> element that is the first child of any element:
• Example
• p:first-child {
• color: blue;
• }
128
• CSS - The :first-child Pseudo-class
• The :first-child pseudo-class matches a specified
element that is the first child of another element.
• Match the first <p> element
• In the following example, the selector matches any
<p> element that is the first child of any element:
• Example
• p:first-child {
• color: blue;
• }
129
CSS Selector: 4. All CSS Pseudo Classes
Selector Example Example description
:active a:active Selects the active link
:checked input:checked Selects every checked <input> element
:disabled input:disabled Selects every disabled <input> element
:empty p:empty Selects every <p> element that has no children
:enabled input:enabled Selects every enabled <input> element
:first-child p:first-child Selects every <p> elements that is the first child of its
parent
:first-of-type p:first-of-type Selects every <p> element that is the first <p> element
of its parent
:focus input:focus Selects the <input> element that has focus
:hover a:hover Selects links on mouse over
:in-range input:in-range Selects <input> elements with a value within a
specified range
:invalid input:invalid Selects all <input> elements with an invalid value
130
:link a:link Selects all unvisited links
:not(selector) :not(p) Selects every element that is not a <p> element
:nth-child(n) p:nth-child(2) Selects every <p> element that is the second child of its
parent
:nth-last-child(n) p:nth-last-child(2) Selects every <p> element that is the second child of its
parent, counting from the last child
:nth-last-of- p:nth-last-of- Selects every <p> element that is the second <p> element of
type(n) type(2) its parent, counting from the last child
:nth-of-type(n) p:nth-of-type(2) Selects every <p> element that is the second <p> element of
its parent
:only-of-type p:only-of-type Selects every <p> element that is the only <p> element of its
parent
:only-child p:only-child Selects every <p> element that is the only child of its parent
:optional input:optional Selects <input> elements with no "required" attribute
:out-of-range input:out-of-range Selects <input> elements with a value outside a specified
range
:read-onlyBright Career
input:read-only Selects <input> elements with a "readonly" attribute 131
specified
InfoTech, Latur: (www.brightelearn.in) 9766620068
:read-write input:read-write Selects <input> elements with no "readonly" attribute
:required input:required Selects <input> elements with a "required" attribute
specified
:root root Selects the document's root element
:target #news:target Selects the current active #news element (clicked on a
URL containing that anchor name)
:valid input:valid Selects all <input> elements with a valid value
:visited a:visited Selects all visited links
132
5. Pseudo Element Selector
• A CSS pseudo-element is used to style specified parts of an element.
• For example, it can be used to:
• Style the first letter, or line, of an element
• You can Select First Letter or First line of a Paragraph for Styling.
• p::first-line {
• color: #ff0000;
• font-variant: small-caps;
• }
• p::first-letter {
• color: #ff0000;
• font-size: xx-large;
• }
133
CSS Selector: <header>
The <header> element represents introductory content for its nearest
ancestor sectioning content or sectioning root element. A <header>
typically contains a group of introductory or navigational aids.
Examples:
<header>
<p>Welcome to...</p>
<h1>Voidwars!</h1>
</header>
134
CSS Selector: <main>
The <main> element contains the main content for your web
page.
This content is unique to the individual page, and should not

appear elsewhere on the site. Repeating content like headers,
footers, navigation, logos, etc., is placed outside the element.
The <main> element should only ever be used at most once on a

single page.
The <main> element must not be included as a descendant of an

article, aside, footer, header or nav element
135
<body>
<header>
<nav>...</nav>
</header>
<main>
<h1>Individual Blog Post</h1>
<p>An introduction for the post.</p>
<article>
<h2>References</h2>
<p>...</p>
</article>
136
<article>
<h2>Comments</h2> ...
</article>
</main>
<footer>...</footer>
</body>
137
CSS Selector: <section>
The <section> element represents a generic section to thematically group content.
<article>
<header>
<h2>Blog Post</h2> </header>
<p>An introduction for the post.</p>
<section>
<h3>Chapter 1</h3>
<p>...</p>
</section>
<section>
<h3>Chapter 2</h3>
<p>...</p>
</section> </article>
138
CSS Selector: <article>
<article>
The <article> element contains self-contained content like articles, blog posts, user
comments or an interactive widget that could be distributed outside the context of the
page.
<footer>
The <footer> element represents end content of web site like developed by, copyright
reserved contents, etc.
139
CSS selectors:
<header>
<p> lorem</p>
<h1>class=“main-logo”>Bright Infotech</h1>
<ul>
<li><a href=“#”> Home</a></li>
<li><a href=“#”> About us</a></li>
<li><a href=“#”> Contact us</a></li>
</ul>
</header>
<main>
<h2> Main content of our page</h2>
<section class=“my-selection”>
<h2>Heading Section</h2>
140
<article >
<h2> Article Heading</h2>
<p>Lorem</p>
</article>
<article class=“my-section”>
<h2> Article Heading</h2>
<p>Lorem</p>
<p>Lorem</p>
</article>
</section> </main>
CSS
header{background-color:yellow;}
secton.my-section{color:green;}
article.my-section{color:red}
.my-section{color:blue};
p{color:blue;}
141
CSS Colors
• color:rgb(255,100,50) : Red, Green, Blue
• color: # ff 00 00; : Hexa decimal ff:red,

00:green, 00:blue
• color: blue; : Simple color name
• color: rgba(255,100,50,1) : Red, Green, Blue, alfa

for transparency (0 to 1)
• Eg. h2{color:rgba(255,100,50,0.1);}
142
CSS Fonts
• The right font can create a strong identity for your web site.
• The font adds value to your text.
• It is also important to choose the correct color ant text size
for the font.
• Generic Font Families:
• Serif: Fonts have a small stroke at the edges of each letter.
Eg. Times new roman
• Sans-serif: Fonts have a clear line. Eg. Arial
• Monospace: All the letters have the same
fixed width.
• Cursive: Fonts imitate human handwriting.
• Fantasy: Fonts are decorative fonts. 143
CSS Fonts
• Generic Font Families:
• Serif: Fonts have a small stroke at the edges of each
letter. Eg. Times new roman
• Sans-serif: Fonts have a clear line. Eg. Arial
• Monospace: All the letters have the
same fixed width.
• Cursive: Fonts imitate human handwriting.
• Fantasy: Fonts are decorative fonts.
144
Font Selection:
• Font-family: Eg. h2{font-family:Arial, Helvetica, sans-serif;}
• Font-size
Eg .p{font-size: larger;}
• Font-weight
eg. h2{font-weight: bolder;}
• Font-variant etc.
eg. p{font-variant: small-caps;}
145
CSS Specificity
• If there are two or more conflicting CSS rules that point to
the same element, Then priority rules are applied.
• The universal selector (*) has low priority, while ID

selectors are highly priority.
• Class has higher priority than element

• ID has higher priority than class and Element
• Inline CSS has higher priority than ID, class and Element.
• Element < Class < ID < Inline CSS
146
CSS Specificity
• Class has higher priority than element
• ID has higher priority than class
• Inline CSS has higher priority than ID and class.
h1{
color: red;
}
.h1-class{
color: green;
}
#h1-id{
color: blue;
}
<h1 class="h1-class" id="h1-id" style="color: orange;">CSS
Specificity Rules</h1>
147
CSS Chrome Developer Tool
• To open: rightclick on page ->inspect or ctrl+shift+I
• Elements: Developer tool creates elements documentation.
• Sources: shows source file. You can change the style but it
changes temporary and doesn’t changes original code.
• It shows whether web site is responsive or not.
• Eg. Facebook
148
CSSBorder.html .css
CSS Borders
• CSS border properties allow us to set the style, color, and width
of the border.
• Border style: specifies the
type of border.
• Border width: sets the border
width.
• Border color: set the color of the
border.
• Border individual sides: individual sides can be set with
deifferent properties Ex: border-top-style: dotted;
• CSS Rounded Borders: The border radius property is used to
add rounded borders to an element. Ex: border-radius: 50px;
149
CSS Padding: CSSBorder.html .css
• CSS Paddings are used to create space around the element, inside any
defined border. i.e Space between border and text
• We can set different paddings for individual sides.
• It is important to add border properties to implement padding
properties.
• div{ border: 2px solid red; padding:20px;} or
• div {border: 2px solid red; padding :2px 5px 2px 5px ;}
CSS Margin:
• CSS Margins are used to create space around the element i.e Space
outside the element (space between element and page OR space
between two elements)
• We can set different margins for individual sides.
• div{ border: 2px solid red; margin:20px;} or
• div {border: 2px solid red; margin:2px 5px 2px 5px ;}
150
CSS Height and Width: CSSBorder.html .css
• CSS height and width properties are used to set height and
width of an element.
• The height and width properties do not include padding, borders
or margins
• Eg. p{height:50px; width=200px; background-color:yellow;}
CSS Box Model:
• CSS box model is a container.
• It contains multiple properties including borders, margin,
padding and the content itself.
• It is used to create the design and layout of web pages.
• Properties of box model: 1. margin 2. border 3. padding 4.
content
• Eg. div{ width=300px; border: 15px solid green; padding:50px;
margin:20px; text-align:center;}
151
h1.dotted{ CSSBorder.css
color: red;
border-style: dotted;
}
h1.dashed{
color: red;
border-style: dashed;
border-radius: 50px; /*Rounded Borders*/
}
h1.solid{
color: red;
border-style: solid;
border-width: 10px;
border-color: green;
border-bottom-style: dashed; /*Bottom Border Style*/
padding: 20px 40px 20px 40px; /*Space between border and text Top right bottom
left*/
margin: 40px; /*Space between element and page*/
152
h1.double{ CSSBorder.css
color: red;
border-style: double;
border-bottom-style: dotted;
}
h1.groove{
color: red;
border-style: groove;
border-width: 30px;
border-color: deepskyblue;
}
p{
height: 200px;
width: 800px;
border-style: solid;
border-color:red;
padding: 40px;
margin: 20px;
}
153
<!DOCTYPE html> CSSBorder.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Colors and Font Demo</title>
<link rel="stylesheet" href="CSSBorders.css">
</head>
<body>
<h1 class="dotted">Fifth Semester</h1>
<h1 class="dashed">Operating System</h1>
<h1 class="solid">Software Testing</h1>
<h1 class="double">Advance Java</h1> <br><br>
<h1 class="groove">Client Side Scripting</h1>
<h1 class="ridge">Bright Career Infotech, Latur</h1>
<p> Name: Dr. Laxmikant Goud. <br>
Education: Ph.D in Computer Science and Engg. <br>
Address: Latur <br>
Trainer: Bright Career Infotech, Latur. <br>
</p>
<h2>Computer & IT Engineering</h2>
154
</body> </html>
CSS Outline
• CSS Outline property allows us to draw a line around
the element, outside the border.
• CSS Outline properties:

1. Outline style: It tells us the style or type of outline.
• Types of outline styles: 1. Dotted 2. dashed 3. solid
4. double 5 groove 5. ridge 7 inset 8 outset
155
CSS Outline CSSBorder.html .css
• CSS Outline properties:

2. Outline color: It specifies the color of
the outline.
3. Outline width: It is used to set the
width (thickness) of outline.
4. Outline Offset: It is used toe specify
space between the outline and the border
of the element.
156
CSS Outline
Eg. p{
outline-style: dashed;
outline-color: blue;
outline-width: 10px;
outline-offset: 10px;
157
CSS Text:
• CSS text formatting properties is used to format text.
• CSS text formatting include following properties.
• 1. color :- color:red;
• 2. text-alignment :- text-align:center;
• 3. text-decoration :- text-decoration: underline;
• 4. text-transformation:- text-transform: uppercase;
• 5. text-indentation :- text-indent: 20px;
• 6.letter-spacing :- letter-spacing: 3px; word-spacing: 5px;
• 7. line-height :- line-height: 30px;
• 8. text-direction :- direction:rtl; direction:ltr;
• 9. text-shadow :- text-shadow: 3px 1px 5px yellow;
/*Horizantal vertical shadow blurr color*/
• 10. Word spacing :- word-spacing: 5px;
• 11. Vertical Alignment:- vertical-align: bottom;
158
CSS Icons
• Icon can easily added to HTML page, by using icon library.
• Ex: login icon, Logoff icon, etc
• Library: <link href="https://fonts.googleapis.com/ icon?family=
Material+Icons" rel="stylesheet">
• Eg. <span class="material-icons" style="font-size:20px;
color:green;">home</span>
• <i class="material-icons">phone</i>
159
CSS Links
• Link is a connection from one web page to another web
pages.
• CSS property can be used to style the links in various
different ways.
• States of link:
• a:link: This is normal, unvisited link.
• a:visited: This is a link visited by user at least once.
• a:hover: This is link when mouse hovers over it.
• a:active: This is a link which is just clicked.
Example:
• a:link{color:color_name;}
160
CSS Links Button
• CSS Link button:
• <p><a class="button" href="./CSSText.html">CSS Text
Demo</a></p>
• a.button:link,a.button:visited
• {
• background-color: brown;
• color: aliceblue;
• padding: 15px 25px;
• text-align: center;
• text-decoration: none;
• }
161
CSS Cursors
• Different types of cursors can be used for links.
• Cursor types:
• 1 auto 2 default 3. crosshair 4. help
5. move
• 6. Pointer 7. progress 8. wait 9. text
• Eg. <span style="cursor: auto;"> auto</span>
162
Box sizing: Border Box:
The CSS box sizing property allows us to include the padding and border in an
elements total width and height.
hr{
width: 700px;
margin: 0px;
}
div.box1{
width: 700px;
margin: 0px;
padding: 50px;
margin-bottom: 10px;
box-sizing: border-box;
}
163
MENU
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu Demo</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="heading"> <h1>INDIA</h1></div>
<div class="main-menu">
<ul>
<li class="active"><a href="#">Maharashtra</a>
<div class="sub-menu1">
<ul>
<li><a href="#">Mumbai</a></li>
<li><a href="#">Latur</a></li>
<li><a href="#">Aurangabad</a></li>
<li><a href="#">Pune</a></li>
</ul>
</div>
</li>
164
<li><a href="#">Uttar Pardesh</a>
<ul>
<li><a href="#">Luckhnow</a></li>
<li><a href="#">Kanpur</a></li>
<li><a href="#">Ayodhya</a></li>
<li><a href="#">Mirzapur</a></li>
</ul>
</div>
</li>
<li><a href="#">Madhya Pradesh</a>
<ul>
<li><a href="#">Bhopal</a></li>
<li><a href="#">Indore</a></li>
<li><a href="#">Sagar</a></li>
<li><a href="#">Ujjain</a></li>
</ul>
</div>
165
</li>
<li><a href="#">Kerala</a>
<ul>
<li><a href="#">Kochi</a></li>
<li><a href="#">Kollam</a></li>
<li><a href="#">Thiruvananthapuram </a></li>
<li><a href="#">Kannur</a></li>
</ul>
</div>
</li>
<li><a href="#">Bangal</a>
<ul>
<li><a href="#">Kolkata</a></li>
<li><a href="#">Asansol</a></li>
<li><a href="#">Siliguri</a></li>
<li><a href="#">Durgapur</a></li>
</ul>
</div>
</li>
166
<li><a href="#">Delhi</a></li>
</ul>
</div>
<div class="main-body">
<div class="main-1">
<img class="tiranga1" src="tiranga1.jpg" alt="image not found">
</div>
<div class="main-2">
<img class="tiranga1" src="janganman.jpg" alt="image not found">
</div>
</div>
</body>
</html>
167
*{ index.css
padding: 0px;
margin: 0px;
}
.heading{
width: 100%;
height: 50px;
border: 5px dashed pink;
color: black;
text-align: center;
}
.main-menu{
background-color: green;
text-align: center;
/* margin-top: 10px; */
}
168
.main-menu ul{
display: inline-flex;
list-style: none;
}
.main-menu ul li{
width: 150px;
padding: 5px;
margin: 10px;
}
.active, .main-menu ul li:hover{
color: yellow;
}
.main-menu ul li a{
text-decoration: none;
color: white;}
169
.sub-menu1{
display: none;
}
.main-menu ul li:hover .sub-menu1{
display: block;
position: absolute;
background-color: green;
margin-top: 10px;
}
.main-menu ul li:hover .sub-menu1 ul{
display: block;
margin: 15px;
}
.main-menu ul li:hover .sub-menu1 ul li{
width: 120px;
padding: 10px;
border-bottom: 2px solid black; text-align: left; }
170
.main-body{
border: solid;
display: inline-flex;
width: 100%;
}
.main-1{
width: 50%;
height: 80%;
border: 5px solid green;
}
.main-2{
width: 50%;
height: 80%;
border: 5px solid green;
}
171
.tiranga1{
width:100%;
height:100%;
object-fit:cover;
}
.tiranga2{
width:100%;
height:100%;
object-fit:cover;
}
172
THANK YOU
UNIT-1 Java Programming: Bright Career InfoTech, Latur: 9766620068 173

Online Polytechnic Classes (www.brightelearn.in)

Web Designing Training WD - PLGPL-3

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Designing Training WD - PLGPL-3

Uploaded by

Copyright:

Available Formats

BRIGHT CAREER INFOTECH, LATUR

o CSS – Used to provide style and design to your web site

o JavaScript – It defines behavior of your web site

o PHP- Server Side Scripting

• Paragraphs are the most basic HTML element.

• A paragraph always starts on a new line, and browsers automatically

• <p>This is another paragraph.</p>

• Large or small screens, and resized windows will create different

• The <hr> element is used to separate content (or define a change) in

• The HTML <br> element defines a line break.

• Add a horizontal rule between the heading and the paragraph.

• <p>London is the capital city of England. It is the most populous city

• Add a horizontal rule between the heading and the paragraph.

• <p>London is the capital city of England. It is the most populous city

• Add a line break in the middle of the paragraph:

• <p>My Bonnie lies ?--------? over the ocean.</p>

• Add a line break in the middle of the paragraph:

• <p>My Bonnie lies <br> over the ocean.</p>

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

<h1 style="font-size:60px;">Heading 1</h1>

• Absolute url: Link to Another External Web Site

• Target Specifies where to open the link, e.g. in a

• You can use a relative path to link to pages on the

• Relative url: Link to Another Web Page within a

• eg. <a href=“./demo.html”> demo page </a>

• ./ refers to the web page present in current folder

• <head> <title>Link Anchor Tag </title> </head>

• <h1> Demonstration of Link Anchor Tag </h1>

• <h2>Absolute url: Link to Another External Web Site</h2>

• <a href="https://www.brightelearn.in" target="_blank"> Bright Career Infotech,

• <h2>Relative url: Link to Another Web Page within a web site</h2>

• <a href="./Paragraph.html">paragraph tag demo </a>

• <head> <title> Paragraph Tag Demo </title> </head>

• <p>Name: Dr. Laxmikant Goud</p>

• <p>Education: Ph.D in Computer Science and Engg </p>

• <p>Address: Latur </p>

• <p>Trainer: Bright Career Infotech, Latur</p>

• <a href="./AnchorLinkTag.html">Anchor Link tag demo </a>

1. Add Links to open following web pages:

<small> Defines smaller text

• <b>This text is bold</b>

• The HTML <strong> element defines text with strong importance.

• <strong>This text is important!</strong>

• The HTML <i> element defines a part of text in an alternate

voice or mood. The content inside is typically displayed in

• Example : <i>This text is italic</i>

• The HTML <em> element defines emphasized text. The

content inside is typically displayed in italic.

• Example: <em>This text is emphasized</em>

• <small>This is some smaller text.</small>

HTML <mark> Element

• <p>Do not forget to buy <mark>milk</mark> today.</p>

will usually strike a line through deleted text:

• Example deleted text

HTML <ins> Element

will usually underline inserted text:

• <p>My favorite color is <del>blue</del> <ins>red</ins>.</p>

• rite color is <del>blue</del> red.</p>

Subscript text can be used for chemical formulas, like H2O:

• Example: <p>This is <sub>subscripted</sub> text.</p>

HTML <sup> Element