Web Designing Training WD - PLGPL-4

BRIGHT CAREER INFOTECH, LATUR
TRAINING
on
Web Designing and Web
Development
1
Bright Career InfoTech, Latur: (www.brightelearn.in) 9766620068
4/7/2022
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

Completion : During Training we will assign web site topic
to every student and complete it within training.
2
4/7/2022
Web Designing & Development
➢ Daily Theory and Practical Sessions
➢ Computer Lab for Practical Sessions
➢ Hands on Practical
➢ More focus on Practical and application (web site)
development
➢ Each students create his/her own web site during training
➢ Certificate after completion
➢ Guidance for Report Writing
➢ Theory and Practical Notes tool kit will be given
3
4/7/2022 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.
4
4/7/2022
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.
5
5/7/2022
History of HTML
6
5/7/2022
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
7
5/7/2022
• 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
8
5/7/2022
• 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
9
5/7/2022
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>
10
5/7/2022
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>
11
5/7/2022
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.
12
5/7/2022
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>
13
5/7/2022
• <!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>
14
6/7/2022
• 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:
15
6/7/2022
• <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>
16
6/7/2022
<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
6/7/2022
<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
6/7/2022 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
6/7/2022 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
6/7/2022
<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
6/7/2022
<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
6/7/2022
<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
6/7/2022
<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
6/7/2022
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:
6/7/2022
HTML Tag: <pre> preformatted text
<p> PreformattedTag.html
</p>
<pre> Output

</pre>
26
6/7/2022
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
6/7/2022
• Headings support all the global attributes.
<h1> defines the most important heading.
<h6> defines the least important heading.
• Defining a 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>
28
6/7/2022
<DOCTYPE html> Heading.html
<html lang="en">
<head>
<title> Heading Tag </title>
</head>
<body>
<h1> Heading-1 </h1>
</body>
</html>
29
6/7/2022
30
6/7/2022
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
6/7/2022
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
6/7/2022
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
6/7/2022
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
6/7/2022
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
7/7/2022
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
7/7/2022
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
7/7/2022
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
7/7/2022
• <!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
7/7/2022
• <!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
7/7/2022
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
7/7/2022
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
42
7/7/2022
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
7/7/2022
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
7/7/2022
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
7/7/2022
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
• <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
7/7/2022
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
8/7/2022
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
8/7/2022
• 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
8/7/2022
• <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
8/7/2022
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
8/7/2022
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
8/7/2022
Animated Images
• HTML allows animated GIFs:
• Example
• <img height="400" width="400" src="program.gif" alt="image not
found"> <br>
53
8/7/2022
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
8/7/2022
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
8/7/2022
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
8/7/2022 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
8/7/2022
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
8/7/2022
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
8/7/2022
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
8/7/2022
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
8/7/2022
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
8/7/2022
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
8/7/2022
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
8/7/2022
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
9/7/2022
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
9/7/2022
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
9/7/2022
• <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
9/7/2022
• <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
9/7/2022
• 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
9/7/2022
• <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
9/7/2022
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>
72
9/7/2022
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>
73
9/7/2022
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>
74
9/7/2022
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
75
9/7/2022
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.
76
9/7/2022
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
77
9/7/2022
HTML table tag: <table>
• HTML tables allow
Roll Noweb developers
Name to arrange data into
Class
1 Rahul FE
rows and columns.
2 Arjun SE
• 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.
78
ASSIGNMENT-1
Roll No Name Class Per
1 Rahul 65
V SEM
2 AMEY 75
3 Sanket 85
IV SEM
4 Arjun 95
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
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
shift_+alt+down arrow: copy line
82
• <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>
</table>
83
<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>
84
• 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”
85
• Form Elements:
• <label>
• <input>
• <select>
• <textarea>
• <button>
• <option>
86
<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>
87
<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>
88
• 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">
89
<input type="color">
<input type="number">
<input type="file">
<input type="range">
<input type="button">
<input type="reset">
<input type="search">
<input type="url">
90
• 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>
91
• 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>
92
• 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>
93
• 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.
94
• <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.
95
• 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
96
• <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.
97
• 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
98
• <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>
99
<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>
100
• <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>
101
• <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.
102
• <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.
103
• 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>
104
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.
105
• 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
106
• 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;}
107
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;}
108
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>
109
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
110
<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>
111
<article>
<h2>Comments</h2> ...
</article>
</main>
<footer>...</footer>
</body>
112
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>
113
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.
114
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>
115
<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;}
116
CSS Universal Selector
*{
Color:red;
}
It applies style to all tags present in the page. It will apply to complete page. It used
rarely.
Descendent or Combinator Selectors:

It is used to apply styles to the individual tags in the section.
header.heading h1
{
background-color: yellow;
}
section.my-section1 h1
{
color: red;
}
117
CSS Adjacent Selector
h1+p{
color: blue;
}
It applies style to the immediate tag of the given tag.
118
CSS Attribute Selector
• 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;
}
119
CSS CSS Attribute Selector
<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;
background-color: red;
• ^ sign used for begining of link*/
a[href ^="https"]
color: red;
120
} Bright Career InfoTech, Latur: (www.brightelearn.in) 9766620068
CSS CSS Attribute Selector
/* $ 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;
background-color: aqua;
} */
121
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);}
122
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.
123
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.
124
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;}
125
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
126
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>
127
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
128
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
• CSS Rounded Borders: The border radius property is used to
add rounded borders to an element.
• Border : Shorthand
129
CSS Padding:
• 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 ;}
130
CSS Height and Width:
• 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;}
131
h1.dotted{
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*/
132
h1.double{
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;
}
133
<!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>CSS Colors and Font Demo</title>
<link rel="stylesheet" href="CSSBorders.css">
</head>
<body>
<h1 class="dotted">Bright Career Infotech</h1>
<h1 class="dashed">Bright Career Infotech</h1>
<h1 class="solid">Bright Career Infotech</h1>
<h1 class="double">Bright Career Infotech</h1> <br><br>
<h1 class="groove">Bright Career Infotech</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus sed reprehenderit autem
perferendis dolor facilis in impedit maiores voluptates veniam quae, ut blanditiis distinctio cum!
Provident soluta vel quia nisi perferendis. Reprehenderit,
</p>
</body>
</html>
134
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
135
CSS Outline
• 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.
136
CSS Outline
Eg. p.class1{
border: 15px solid black;
outline-style:solid;
outline-color:red;
outline-width=thick;
outline-offset:15px;
text-align:center;
background-color:yellow;}
137
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;
138
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>
139
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;}
140
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;
• }
141
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>
142
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;
}
143
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>
144
<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>
145
</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>
146
<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>
147
*{ 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; */
}
148
.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{
background-color: red;
color: yellow;
}
.main-menu ul li a{
text-decoration: none;
color: white;}
149
.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; }
150
.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;
}
151
.tiranga1{
width:100%;
height:100%;
object-fit:cover;
}
.tiranga2{
width:100%;
height:100%;
object-fit:cover;
}
152
3. Java Script
1. JavaScript Overview
1. JavaScript is a dynamic programming language.
2. It is lightweight
3. It is an interpreted programming language with object
oriented features.
4. JavaScript was first know as LiveScript, made it first
appearance in Netscape 2.0 in 1995.
2. Application of JavaScript:
1. Client side validation
2. Dynamic drop-down menus
3. Display pop-up windows and dialog boxes.
153
3. Features of JavaScript
1. All popular web browser support JavaScript.
2. It follows the syntax and structure of the C programming language.
3. It is case sensitive language.
4. It is supportable in several operating system. Eg. Win, Mac, Linux
4. Places to put JavaScript Code:
1. Between the head tag of html
<script type=“text/Javascript”>
document.write(“This is bright Infotech”);
</script>
2. Between the body tag of html
<script>
</script>
154
4. How to Write JavaScript Code
4. Places to put JavaScript Code:
1. Between the head tag of html
<script type=“text/Javascript”>
</script>
2. Between the body tag of html
<script>
</script>
3. In .js file (external JavaScript)
In html file head tag:
<script src="First.js"></script>
155
Comments in JavaScript
1. Single Line Comment
// document.write(“This is bright Infotech”);
2. Multiline Comment
/*<script>
</script>*/
156
5. Data Types:
1. Primitive:
1. String : Text
2. Number: Numeric Value
3. Boolean: True or False Value
2. Composite:
1. Object: Name and Value pair
2. Array : Multiple value in single variable
3. Function : Block of code written for specific task
3. Special :
1. Undefined : Variable whose value is not defined
2. Null : it is objective whose value is not exist i.e Nothing
157
6. Operators : Arithmetic Operators
158
• var a=prompt("Enter First Number");
• var b=prompt("Enter Second Number");
• var c=a+b; // a and b are strings
• document.write("Addition of Two Strings="+c+"<hr>");
• var x=Number(a); //Type Conversion
• var y=Number(b); //Type Conversion
• c=x+y;
• document.write("Addition of two Numbers="+c+"<hr>");
• c=a+y;
• document.write("Addition of String and Number="+c+"<hr>");
• c=x-y;
• document.write("Subtraction of two Numbers="+c+"<hr>");
• c=x*y;
• document.write("Multiplication of two Numbers="+c+"<hr>");
• c=x/y;
• document.write("Division of two Numbers="+c+"<hr>");
• c=x%y;
• document.write("Modulus of two Numbers="+c+"<hr>");
• /*c=a++;
• document.write("c=a++: "+"c="+c+" a="+a+"<hr>");
• c=++a;
• document.write("c=++a: "+"c="+c+" a="+a+"<hr>");*/
• c=a++ + ++b + a++;
• document.write("c=" +c+" a="+a+" b="+b+"<hr>");
• c=a-- - --b;
• a=10;
• b=10;
• document.write("==Operator:"+(a==b)+"<hr>");
• document.write("===Operator:"+(a===b)+"<hr>");
• document.write("!=Operator:"+(a!=b)+"<hr>");
• document.write("!==Operator:"+(a!==b)+"<hr>");
• document.write("< Operator:"+(a<b)+"<hr>");
• document.write("> Operator:"+(a>b)+"<hr>");
• document.write("<= Operator:"+(a<=b)+"<hr>");
• document.write(">= Operator:"+(a>=b)+"<hr>");
• document.write("AND Operator:"+(a<=5 && b>=5)+"<hr>");
• document.write("OR Operator:"+(a<=5 || b>=5)+"<hr>");
• document.write("+= Operator:"+(a+=b)+"<hr>");
• document.write("-= Operator:"+(a-=b)+"<hr>");
• document.write("*= Operator:"+(a*=b)+"<hr>");
• document.write("/= Operator:"+(a/=b)+"<hr>");
•
7. Variable Declaration and Assignment
1. Variable Declaration:
Syntax: var name;
Var is a keyword
Name is the name of variable followed by semicolon.
2. Variable Initialization:
Syntax: var name=value
Example: var fname=“bright”; OR
var fname;
fname=“bright”
var num=10;
document.write(fname);
document.write(num);
7. Variable Declaration and Assignment
<body>
<script>
var fname="Bright";
var num=100.25;
var flag=true;
document.write("<br>");
document.write(flag);
num=10000;
</script>
</body>
8. Popup box and Method of Output
Popup Boxes
1. alert():
• The alert() method displays an alert box with a message
and an OK button.
• The alert() method is used when you want information to
come through to the user.
• The alert box takes the focus away from the current
window, and forces the user to read the message.
• Ex:
alert("Hello! Data Saved!!");
Popup Boxes
2. confirm():
• The confirm() method displays a dialog box with a
message, an OK button, and a Cancel button.
• The confirm() method returns true if the user clicked
"OK", otherwise false.
• A confirm box is often used if you want the user to verify
or accept something.
• A confirm box takes the focus away from the current
window, and forces the user to read the message.
• Ex:
confirm(“All Information Filled!");
Popup Boxes
3. prompt():
• The prompt() method displays a dialog box that prompts
the user for input.
• A prompt box is used if you want the user to input a value.
• The prompt() method returns the input value if the user
clicks "OK", otherwise it returns null.
• It returns value in Text/String form.
• Ex:
var str=prompt("Enter Number");
document.write(str);
Method of Output:
1. document.write()
Example: var fname=“bright”;
//Display only values
//Display Message and values

document.write(“Name=“+fname);
9. Decision Statements: if()
1. if ():
if(condition)
{
statements;
}
9. Decision Statements : if() statement
Example:
var str=window.prompt("Enter Number");
var num=Number(str); //Number Function convert String
// to Number
if(num%2==0)
{
document.write("Entered Number is Even")
}
if(num%2!=0)
{
document.write("Entered Number is Odd")
}
171
• Type Conversion:
1. Automatic type conversion
2. Converting values to Numbers
eg. var a=“123”; var n=Number(a)
3. Converting values to String
eg. var a=15; var n=String(a)
4. Converting values to Boolean
eg. var a=true; var n=Boolean(a)
• Converting variables to numbers:

1. Number() eg. var a=“123”; var n=Number(a)
2. parseInt() eg. var a=“123”; var n=parseInt(a)
3. parseFloat() eg. var a=“18.5”; var n=parseFloat(a)
172
9. Decision Statements: if else()
2. if else():
if(condition)
{
statements;
}
else
{
statements;
}
9. Decision Statements : if else() statement
var num=Number(str); //Number Function convert String to
Number
if(num%2==0)
{
document.write("Entered Number is Even")
}
else
{
document.write("Entered Number is Odd")
}
174
9. Decision Statements: if else if
2. if else if():
if(condition)
{
statements;
}
else if(condition)
{
statements;
}
else
{
statements;
}
9. Decision Statements: if else if()
var str=window.prompt("Enter Percentage");
var num=Number(str); //Number Function convert String to Number
if(num>=75)
{
document.write("<b>"+"DISTINCTION");
}
else if(num>=60)
{
document.write("FIRST CLASS");
}
else if(num>=50)
{
document.write("SECOND CLASS");
}
else if(num>=40)
{
document.write("PASS");
}
else
{
document.write("FAIL");
}
9. Decision Statements: switch()
switch(expression)
{
case x:
// code block
break;
case y:
// code block
break;
default:
// code block
}
9. Decision Statements : switch() statement
var str=window.prompt("Enter Week Day (1 to 7) ");
var num=Number(str);
switch(num)
{
case 1:
window.alert("Monday");
break;
case 2:
window.alert("Tuesday");
break;
case 3:
window.alert("Wednesday"); break;
case 4:
window.alert("Thursday"); break;
case 5:
window.alert("Friday"); break;
case 6:
window.alert("Saturday"); break;
case 7:
window.alert("Sunday"); break;
default:
window.alert("Wrong Choice");
}
178
10. Looping Statements: for()
1. for():
For(initialization; test condition; incr/decr)
{
statements;
}
var str=window.prompt("Enter
Number");
var i;
for(i=0;i<=num;i++)
{
document.write("i="+i+"<br>");
}
10. Looping Statements: while()
2. while():
Initialization;
while(Expression test condition)
{
statements;
incr/decr;
}
var i=1;
while(i<=num)
{
i++;
}
10. Looping Statements: do while()
3. Do while():
Initialization;
do
{
statements;
incr/decr;
} while(expression test condition)
var i=1;
do{
i++;
}while(i<=10);
11. Break and continue: break()
4. break():
The break statement "jumps out" of a loop.
It is used with some condition.
Example:
for (let i = 0; i < 5; i++)
{
if (i === 3) Output:
i=0
{
i=1
break; i=2
}
}
11. Break and continue: continue()
5. continue():
The continue statement breaks one iteration (in the loop), if a
specified condition occurs, and continues with the next iteration in
the loop.
This example skips the value of 3:
Example:
for (let i = 0; i < 5; i++)
{ Output:
i=0
if (i === 3) i=1
{ i=2
continue; i=4
}
}
12. Array
Array:
• An array is an object that can store a collection of items.
• It is a single variable that is used to store different
elements.
• An elements of array can be accessed using index number.
Declaration:
var stud=[“raj”, “kajal”, “geeta”];
Can be declared using new keyword having same meaning
var array1= new Array(“raj”, “samir”,”kajal”)

12. Array
Array:
• An array is an object that can store a collection of items.
• It is a single variable that is used to store different
elements.
• An elements of array can be accessed using index number.
Declaration:
Can be declared using new keyword having same meaning

12. Array
Array Declaration:
Syntax:
• const array_name = [item1, item2, ...];
• Var array_name = [item1, item2, ...];
Example:
var stud=["raj","kajal","geeta"];
var array1= new Array("raj","samir","kajal");
for(var i=0;i<stud.length;i++)
{
document.write("Array Element="+stud[i]+"<br>")
}
for(var i=0;i<array1.length;i++) //.length finds length
{
document.write("Array Element="+array1[i]+"<br>")
}
12. Array
Array: can be collection of different values
const person = ["John", "Doe", 46];
for(var i in person) //using in inside for loop
{
document.write("Array Element="+person[i]+"<br>")
}
Arrays are Objects: Array Elements Can Be Objects
• Objects are having name and value pair. Objects can be declared
inside array.
const person = {firstName:"Amey", lastName:"Joshi", age:34};
document.write("First NameElement="+person.firstName+"<br>")
document.write("Last Name Element="+person.lastName+"<br>")
document.write("Array Age Element="+person.age+"<br>")
12. Array
Array Properties and Methods
.length :- Returns the number of elements
.sort() :- Sorts the array
.push("Lemon") :- Add element in array
const fruits = ["Banana", "Orange", "Apple", "Mango"];

let length = fruits.length; //Finds length of array
document.write("Array Length="+length+"<br>");
fruits.push("Lemon"); //Add element in array

for(var i in fruits) //using in inside for loop
{
document.write("Array Element="+fruits[i]+"<br>")
}
12. Array
Array Properties and Methods
.length :- Returns the number of elements
.sort() :- Sorts the array
.push("Lemon") :- Add element in array
fruits.sort(); //sort the array

for(var i in fruits)
{
document.write("Array Element="+fruits[i]+"<br>")
}
• Arrays
1. An array is an object that can store a collection of items.
2. It is a single variable that is used to store different elements.
3. An elements of array can be accessed using index number.
• Functions: Function is a block of code designed to perform a

particular task.
Syntax: function add(arg1, arg2, arg_n)
{ body of function}
• Validation
190
• Scope of Variable:
1. Local Variable: Variable declared within function called
local
<script>
function no{ var a=10; document.write(a); }
</script>
1. Global Variable: Variable declared outside of function
called global
2. <script>
3. var a=10;
4. function no{ document.write(a); }
5. </script>
191
• Events: Javascript events occurs When the user or the
browser manipulates a page.
1. onclik() 2. onchange 3. onkeyup
4. onkeydown 5. onmouseover 6.onmouseout
7. onload 8. onfocus 9. onblur
10. onsubmit
• DOM: Document object model.
• Using document object, we can add dynamic content to
our web page.
• Methods:
• 1. getElementByid() 2. getElementbyName()
• 3. getElementByTagName() 4. getElementbyClassName()
192
• Date Object: Date object can be used to get year, month
and day.
• Create date object:
• There are 4 ways to create a new date object
• 1 new Date() 2. new Date(milliseconds)
• 3. new Date(DateString)4. new Date(y, m, d, h, m, s, ms)
• Date Methods
1. getFullYear() 2. getMonth() 3. getDate()
4. getHours() 5. getMinutes() 6. getSeconds()
7. getMilliseconds() 8. geTime() 9. getDay()
193
• String: String is a collection of characters.
• Syntax: var str=“bright”
var str=‘bright’
var str=new String (“bright”)
• String functions:
1. length() 2. indexOf() 3. lastindexof()
4. substr() 5. substring() 6. toLowerCase()
7. toUpperCase()
• Array functions
1. push() 2. pop() 3. shift()
4. unshift() 5. reverse() 6. concat()
7. join() 8. sort()
194
• Type Conversion:
1. Automatic type conversion
2. Converting values to Numbers
eg. var a=“123”; var n=Number(a)
3. Converting values to String
eg. var a=15; var n=String(a)
4. Converting values to Boolean
eg. var a=true; var n=Boolean(a)
• Converting variables to numbers:

1. Number() eg. var a=“123”; var n=Number(a)
2. parseInt() eg. var a=“123”; var n=parseInt(a)
3. parseFloat() eg. var a=“18.5”; var n=parseFloat(a)
195
6. Bootstrap
• Introduction:
1. Bootstrap is the most popular front end framework in the recent time
2. It uses HTML, CSS and Javascript.
Grid classes:
196
• Bootstrap CDN(Content Delivery Network):
• For CSS File
<link rel= "stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.
css">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.
min.css">
• For Js File
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.
min.js"></script>
• For Popper.js
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min
.js"></script>
197
• The classes for Text & Background colors
• text-muted bg-muted
• text-primary bg-primary
• text-success bg-success
• text-info bg-info
• text-warning bg-warning
• text-danger bg-danger
• Image in Bootstrap:
1. rounded 2. rounded-top 3. rounded-right
4. rounded-bottom 5. rounded-left 6. rounded-circle
7. rounded-0
198
• Table in Bootstrap:
1. table 2. table-striped 3. table-dark
4. Table-bordered 5. table-hover 6. table-borderless
• Container Class:
1. container 2. container-fluid 3. jumbotron
• Bootstrap alert:
• alert-light alert-dark alert-primary
• Alert-success alert-info alert-warning
• Alert-danger alert-secondary
1. Alert links 2. closing Alert 3. Animated Alerts
199
• Button Style classes:
1 btn 2. btn-primary 3. btn-secondary
4. btn-success 5. btn-info 6. btn-warning
7. btn-danger 8. btn-dark 9. btn-light
10 btn-link
• Other Button style classes
1. Button outline
2. Button sizes
3. Block level buttons
4. Active/Disabled buttons
200
• Glyphicons: Glyphicons are icon fonts which you can use
in your web projects.
Syntax: <span class=“icon_name”></span>
Eg. <div class="container1">
<p>envelope <span class="glyphicon glyphicon-
envelope"></span></p>
Wells: Wells are used to add a rounded border around an
element with gray background color and some padding.
Eg. <div class="container">
<div class="well">Web design</div>
<div class="well well-sm">Web design</div>
<div class="well well-lg" >Web design</div></div>
201
• Pagination:
1. Basic pagination 2. Active state
3. Disabled State 4. sizing
• Badges: Badges are used to indicate some valuable heading,
warning, messages, notification counter etc.
1. Inline Badges 2. Contextual classes for badges
3. Creating Pill Badges 4. Showing Counter with Badges
Badges: Badges are used to indicate some valuable heading,
warning, messages, notification counter etc.
• Breadcrumbs: A breadcrumb is a navigation scheme that
indicates current page location the user within a website
1. Default 2. Progress bar with label
3. Colored Progress bar 4. Striped Progress Bar
5. Animated Progress Bar 6. Stacked Progress Bar
202
Panels:
1. Panel with heading 2. Panel with footer
3. Panel contextual Alternatives 4. Panel with tables
5. Panel with list groups
Bootstrap Form:
1. Vertical form 2. horizontal form 3. inline form
Card In Bootstrap:
1. Create basic card
2. Content types for card component
3. Card with header & footer
4. Customizing the card background
203
5. Customizing the card border and text
6. Creating Horizontal card
7. Placing List groups within Card
8. Card with Stretched Link
9. Text over Image in card
10. Text alignment inside card
11. Card Decks in Bootstrap
12. Creating Card group
• Spinners In Bootstrap: Are used to show loading state in
project.
1. Basic Spinner 2. Color Spinner 3. Growing Spinner
204
• Media Object: If you want to create a layout that contains
left or right aligned media object like images or video
alongside the text content.
1. Nested Media object
2. Alignment of Media object
3. Creating a Media list
• Button Groups:
1. Creating Button Toolbar 2. Sizing of Button group
3. Justified Button Groups 4. Nesting Button Groups
5. Vertical Button Groups
205
Dropdown in Bootstrap:
1. Adding Dropdowns via data attributes
1. Dropdowns within buttons
2. Dropdowns Inside Button groups
• Carousel in Bootstrap:
1. It is used to add slider to your site.
206
THANK YOU
UNIT-1 Java Programming: Bright Career InfoTech, Latur: 9766620068 207

Online Polytechnic Classes (www.brightelearn.in)

Web Designing Training WD - PLGPL-4

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

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 CSS – Used to provide style and design to your web site

o JavaScript – It defines behavior of your web site

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

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

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

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

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

• The HTML <small> element defines smaller text:

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

HTML <mark> Element

• The HTML <mark> element defines text that should be marked or

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

will usually strike a line through 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

Superscript text can be used for footnotes, like WWW[1]:

• Example: <p>This is <sup>superscripted</sup> text.</p>