Scribd
Upload
19 views

Web Programming Lab Manual 2023

Uploaded by

kartikpatil8355
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
19 views

Web Programming Lab Manual 2023

Uploaded by

kartikpatil8355
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 53

Introduction

HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and
structure of web content. Other technologies besides HTML are generally used to describe a web page’s
appearance/presentation (CSS) or functionality/behavior (JavaScript). "Hypertext" refers to links that connect web
pages to one another, either within a single website or between websites. Links are a fundamental aspect of the Web.
By uploading content to the Internet and linking it to pages created by other people, you become an active participant
in the World Wide Web.

HTML uses "markup" to annotate text, images, and other content for display in a Web browser. HTML markup
includes special "elements" such as <head>, <title>, <body>, <header>, <footer>, <article>, <section>,<p>, <div>,
<span>, <img>, <aside>, <audio>, <canvas>, <datalist>, <details>, <embed>, <nav>, <output>, <progress>,
<video>, <ul>, <ol>, <li> and many others. An HTML element is set off from other text in a document by "tags",
which consist of the element name surrounded by "<" and ">". The name of an element inside a tag is case
insensitive. That is, it can be written in uppercase, lowercase, or a mixture. For example, the <title> tag can be
written as <Title>, <TITLE>, or in any other way.

CSS
CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on screen, paper,
or in other media. CSS saves a lot of work. It can control the layout of multiple web pages all at once. External
stylesheets are stored in CSS files. HTML was NEVER intended to contain tags for formatting a web page. HTML
was created to describe the content of a web page, like:

<h1>This is a heading</h1> <p>This is a paragraph.</p> When tags like <font>, and color attributes were added to
the HTML 3.2 specification, it started a nightmare for web developers. Development of large websites, where fonts
and color information were added to every single page, became a long and expensive process. To solve this problem,
the World Wide Web Consortium (W3C) created CSS. CSS removed the style formatting from the HTML page.

JavaScript
JavaScript), often abbreviated as JS, is a programming language that conforms to the ECMAScript specification.
JavaScript is high-level, often justin- time compiled, and multi-paradigm. It has curly-bracket syntax, dynamic
typing, prototype-based object-orientation, and first-class functions. Alongside HTML and CSS, JavaScript is one
of the core technologies of the World Wide Web. JavaScript enables interactive web pages and is an essential part
of web applications. The vast majority of websites use it for client-side page behavior, and all major web browsers
have a dedicated JavaScript engine to execute it.

1
As a multi-paradigm language, JavaScript supports event-driven, functional, and imperative programming styles. It
has application programming interfaces (APIs) for working with text, dates, regular expressions, standard data
structures, and the Document Object Model (DOM). However, the language itself does not include any input/output
(I/O), such as networking, storage, or graphics facilities, as the host environment (usually a web browser) provides
those APIs. Originally used only in web browsers, JavaScript engines are also now embedded in server-side website
deployments and non-browser applications. Although there are similarities between JavaScript and Java, including
language name, syntax, and respective standard libraries, the two languages are distinct and differ greatly in design.

Objective

To understand HTML tags to create a skeleton page

Introduction
The basic HTML skeleton is the set of tags required of every HTML web page you build. The tags that make up the
skeleton tell browsers what kind of file it is reading, and without the skeleton HTML files will not be rendered
correctly in web browsers.

The Four Skeleton Tags

There are four tags that need to be included in the skeleton. These are the structure tags, so called because they
provide browsers with the basic strucure of HTML documents. The four structure
tags are:
The <html> tag starts an HTML file and tells browsers what kind of file this is.
The <head> tag includes information about the document such as the name of the file and other technical information
like meat tags and style tags, which will be covered later in the tutorial.
The <title> tag is where you place the title of the web page. The title tag goes inside the head, between the opening
and closing head tags.
The <body> is where you place all the information that will actually show up on the web page once it is online and
opened in a browser. Whatever goes in the body of the HTML file is the content your readers will see when
they visit your site. There can be only one head, title, and body in an HTML document.

Code
1
1 <! DOCTYPE html>
3
2. HTML5 SKELETON 4
2 < html>
3 <head>
4 <! -- Single line comment -->
5 <title> Page Title </title>
6 </head>
7 <body >
8 <! --
9 Multi-line comment
10 -->
11 <h1 >This is a Heading </h1>
12 <p >This is a paragraph. </p>
13 </</body>
14 </ html>

Explanation

• The <!DOCTYPE html> declaration defines this document to be


HTML5
• The <html> element is the root element of an HTML page
• The <head> element contains meta information about the document
• The <title> element specifies a title for the document
• The <body> element contains the visible page content
• The <h1> element defines a large heading
• The <p> element defines a paragraph

1
XHTML Page

Question
Create an XHTML page using tags to accomplish the following:

1. A paragraph containing text “All that glitters is not gold”. Bold face and italicize this text
2. Create equation: x = 1/3(y21 + z21)

3. Put a background image to a page and demonstrate all attributes of background image
4. Create unordered list of 5 fruits and ordered list of 3 flowers

Explanation:

• HTML defines special elements for defining text with a special


meaning. HTML uses elements like <b> and <i> for formatting output,
like bold or italic text.

• HTML images are defined with the <img> tag. The source file (src),
alternative text (alt), width, and height are provided as
attributes

• <sub> - Subscript text

• <sup> - Superscript text

• An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

• The CSS list-style-type property is used to define the style of the list item marker

– disc Sets the list item marker to a bullet (default)


– circle Sets the list item marker to a circle
– square Sets the list item marker to a square
– none The list items will not be marked

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

• HTML also supports description lists. The <dl> tag defines the de- scription list, the <dt> tag
defines the term (name), and the <dd> tag describes each term

1
HTML Code

1 <?xml version="1.0" encoding="UTF-8"?>


2<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/
xhtml11.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

4 <head>

5 <title>SAMPLE XHTML PAGE</title>


6 <meta name="author" content="Putta" />
7 <meta name="date" content="2023-02-17T04:15:01+0530" />

8 <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

9 <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8"/>

10 <meta http-equiv="content-style-type" content="text/css"/>

11 <meta http-equiv="expires" content="0"/>

12 </head>

13 <body>
14

15 <style>

16 body {

17 background-image: url("image.png");
18 background-repeat: no-repeat;
19 background-position: right bottom;
20 background-attachment: fixed;
21 }

22 </style>
23

24 <h4>Paragraph</h4>

25 <p>

26 <b><i>All that glitters is not gold</i></b> is an aphorism stating that not


everything that looks precious or true turns out to be so.
27 While early expressions of the idea are known from at least the 12th-13th century,

the current saying is derived from a 16th-century line by William Shakespeare,


28 <b><i>All that glisters is not gold</i></b>.

29 <br /> <br />

30 <b><i>All that glisters is not gold</i></b><br />

1
CHAPTER 1. XHTML PAGE

31 Often have you heard that told.<br />


32 Many a man his life hath sold<br />
33 But my outside to behold.<br />

34 Gilded tombs do worms enfold.<br />

35 Had you been as wise as bold,<br />

36 Young in limbs, in judgment old,<br />

37 Your answer had not been inscrolled<br />

38 Fare you well. Your suit is cold<br />

39

40 -William Shakespeare, Merchant of Venice, Act II Scene 7


41 </p>

42

43 <h4>Equation</h4>
44

45

46

47 <i>x</i> = 1/3(<i>y</i><sub>1</sub><sup>2</sup> + <i>z</i><sub>1</sub><sup>2</sup>)


48

49 <h4>Unordered Fruit List</h4>


50

51 <ul>

52 <li>Banana</li>

53 <li>Mango</li>

54 <li>Grapes</li>

55 <li>Apples</li>

56 </ul>
57

58 <h4>Ordered Flower List</h4>


59 <ol>

60 <li>Jasmine</li>

61 <li>Rose</li>

62 <li>Lotus</li>

63 <li>Tulip</li>

64 </ol>

65 <br />

66 </body>

67 </html>

Dept of CSE, SIT - Prabodh C P 2


OUTPUT

Dept of CSE, SIT - Prabodh C P 3


Chapter 2

XHTML Tables

Question
Create following table using XHTML tags. Properly align cells, give suitable
cell padding and cellspacing, and apply background color, bold and emphasis
necessary

Explanation

• Each table row is defined with the <tr> tag. A table header is defined
with the <th> tag. By default, table headings are bold and centered. A
table data/cell is defined with the <td> tag.

• The <td> elements are the data containers of the table. They can
contain all sorts of HTML elements; text, images, lists, other tables,
etc.
• Use the colspan attribute to make a cell span many columns

• Use the rowspan attribute to make a cell span many rows.

Dept of CSE, SIT - Prabodh C P 4


HTML Code

1 <?xml version="1.0" encoding="UTF-8"?>


2<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/
xhtml11.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

4 <head>

5 <title>Table Demo XHTML PAGE</title>


6 <meta name="author" content="Putta" />
7 <meta name="date" content="2023-02-17T04:58:37+0530" />
8 <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
9 <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8"/>
10 <meta http-equiv="content-style-type" content="text/css"/>
11 <meta http-equiv="expires" content="0"/>
12

13 <style>

14 table, th, td {

15 border: 1px solid black;


16 border-collapse: collapse;
17 }

18 th, td{

19 padding-left: 10px;
20 padding-bottom: 20px
21 }

22 table {

23 border-spacing: 30px;
24 }

25 </style>
26

27 </head>

4
CHAPTER 2. XHTML TABLES

28 <body>
29

30 <h3>Tables in XHTML</h3>
31

32 <table align="center" width="70%" style="height:450px">


33 <tr >

34 <td rowspan="9" align="center" bgcolor=DEEEEE>


35 <b>Department</b>
36 </td>

37 <td rowspan="3" align="center" bgcolor=9E7BA0>


38 <b>Sem1</b>

39 </td>

40 <td padding:15px>
41 <em>SubjectA</em>
42 </td>

43 </tr>

44 <tr>

45 <td ><em>SubjectB</em></td>
46 </tr>

47 <tr>

48 <td ><em>SubjectC</em></td>
49 </tr>
50

51 <tr>

52 <td rowspan="3" align="center" bgcolor=9E7BA0>


53 <b>Sem2</b>
54 </td>
55 <td ><em>SubjectE</em></td>
56 </tr>
57 <tr>
58 <td ><em>SubjectF</em></td>
59 </tr>
60 <tr>
61 <td ><em>SubjectG</em></td>
62 </tr>
63

64 <tr>
65 <td rowspan="3" align="center" bgcolor=9E7BA0>
66 <b>Sem3</b>
67 </td>
68 <td ><em>SubjectH</em></td>
69 </tr>
70 <tr>
71 <td ><em>SubjectI</em></td>
72 </tr>
73 <tr>
74 <td ><em>SubjectJ</em></td>
75 </tr>
76

77 </table>
5
78

79 </body>

80 </html>

6
CHAPTER 2. XHTML TABLES

Output
=================================

Figure 2.1: Table Page

7
Chapter 3

HTML5

Question
Use HTML5 for performing following tasks:

1. Draw a square using HTML5 SVG , fill the square with green color and make 6px brown stroke width

2. Write the following mathematical expression by using HTML5 MathML: d = x2 − y2


3. Redirecting current page to another page after 5 seconds using HTML5 meta tag

Explanation
• SVG stands for Scalable Vector Graphics and it is a language for describing 2D-graphics and graphical
applications in XML and the XML is then rendered by an SVG viewer. SVG is mostly useful for vector
type diagrams like Pie charts, Two-dimensional graphs in an X,Y coordinate system etc.
• The <MATH> element is used to include math expressions in the current line.
• Using the setTimeout() Method

HTML Code

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8" />


5 <title>HTML5 Demo</title>
6 <meta http-equiv="refresh" content="5; URL=http://www.vtu.ac.in">
7 </head>

8 <body>

9 <h3>HTML5 SVG</h3>
10 <svg width="200" height="200" align="centre">
11 <rect x="50" y="50" width="100" height="100" fill="green" stroke="brown"
stroke-width="6px"/>
12 </svg>
13

14 <h3>HTML5 MathML</h3>
15

16 <math xmlns = "http://www.w3.org/1998/Math/MathML">


17 <mrow>

18 <msup><mi>d</mi></msup>
19 <mo> = </mo>
20 <msup><mi>x</mi><mn>2</mn></msup>
21 <mo>-</mo>
7
22 <msup><mi>y</mi><mn>2</mn></msup>
23 </mrow>

24 </math>
25

26 <h3>This page redirects in 5 seconds</h3>


27 </body>

28 </html>

7
CHAPTER 3. HTML5

Output
=================================

Figure 3.1: Initial Page

8
Chapter 4

HTML5 Semantic Tags

Question
Demonstrate the following HTML5 Semantic tags- < article >, < aside >, < details >, < figcaption >, <
figure >, < footer >, < header >, < main >, < mark >, < section > for a webpage that gives information about
travel experience.

HTML Code

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8" />


5 <title>HTML5 Semantic Tags Demo</title>
6

7 <style>

8 body{

9 background-color: #FFFDD0;
10 }

11 aside {

12 float: right;
13 width: 25%;

14 background-color: cyan;
15 font-style: italic;
16 padding: 15px;
17 }

18 main {

19 float: left;
20 width: 70%;

21 }

22 footer {

23 position: fixed;
9
24 left: 0;

25 bottom: 0;

26 width: 100%;
27 text-align: center;
28 }

29 mark {

30 background-color: yellow;
31 color: black;
32 }

33 figure {

34 display: inline-block;
35 margin: auto;
36 }
37

38 figcaption {

9
CHAPTER 4. HTML5 SEMANTIC TAGS

39 font-style: italic;
40 }

41 </style>
42

43 </head>

44 <body>

45 <article>

46 <header>

47 <h1>My Travelogue</h1>
48 <p>Random Escapades</p>
49 </header>
50

51

52 <main>

53 <figure>

54 <img src="journey.jpeg" alt="Example Image" width="350" height="235">


55 <figcaption>The road never ends</figcaption>
56 </figure>
57

58 <section>

59 <h2>Ooty</h2>

60<p>Ooty is a popular hill station located in the Nilgiri Hills. It is popularly


called the "Queen of Hill Stations".</p>
61 </section>

62

63 <section>

64 <h2>Mysore</h2>

65<p> The city is also known as the City of Palaces, Mysuru has always enchanted its
visitors with its quaint charm.</p>
66 </section>

67

68 </main>
69

70 <aside>

71 <section>

72 <p>Upcoming Trek planned to <mark>Kumara Parvata</mark> will be sharing detils soon<


/p>
73 <details>

74 <summary>Tentative Dates</summary>
75 <p>24th January 2023</p>
76 </details>
10
77 </section>

78 </aside>
79

80 <footer>

81 <p>&copy; 2023 Prabodh C P</p>


82 </footer>
83

84 </article>

85 </body>

86 </html>

11
CHAPTER 4. HTML5 SEMANTIC TAGS

Output
=================================

Figure 4.1: Initial Page

Figure 4.2: After clicking on Details

12
Chapter 5

Classes

Question
Create a class called income, and make it a background color of #0ff.
Create a class called expenses, and make it a background color of #f0f.
Create a class called profit, and make it a background color of #f00.
Throughout the document, any text that mentions income, expenses, or profit, attach the appro-
priate class to that piece of text. Further create following line of text in the same document:

The current price is 50| and new price is 40|

HTML Code

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8" />


5 <title>Class Selectors Demo</title>
6 <style>

7 .income {background-color: #0ff; font-style: italic;}


8 .expenses {background-color: #f0f;font-style: oblique;}
9 .profit {background-color: #ff0;font-weight: bold;}

10 .red{color: red;font-size: 24px;}

11 .strike{text-decoration: line-through; font-size: 24px;}

12 p {font-family: Cursive;}

13 </style>

14 </head>

15 <body>

16 <h1>Class Selectors Demo</h1>


17 <p>

18Income, expenses, and profit are financial terms that are used to measure the
financial health of a person or a business.
19 </p>

20 <p class="income">

21 Income refers to the amount of money received by an individual or business from


various sources such as employment, investments, or sales of goods and services.

12
Income can be earned on a regular basis, such as a salary, or irregularly, such
as a bonus or one-time payment.
22 </p>
23

24 <p class="expenses">
25Expenses, on the other hand, refer to the amount of money spent by an individual or
business to cover their costs of living or operating. Expenses can include fixed
costs such as rent or salaries, variable costs such as the cost of materials, or
discretionary costs such as entertainment or travel.
26 </p>

27

28 <p class="profit">

12
CHAPTER 5. CLASSES

29Profit is the amount of money that remains after deducting expenses from income. It
represents the financial gain or loss that a person or business has generated
over a given period of time. A positive profit means that the income was greater
than the expenses, while a negative profit means that the expenses were greater
than the income.
30 </p>

31

32 <span class="strike">The current price is 50&#8377; </span><span class="red">and new


price is 40&#8377;</span>
33

34 </body>

35 </html>

Output

=================================

13
Chapter 6

li Tag

Question
Change the tag li to have the following properties:

• A display status of inline


• A medium, double-lined, black border
• No list style type

Add the following properties to the style for li:

• Margin of 5px
• Padding of 10px to the top, 20px to the right, 10px to the bottom, and 20px to the left
Also demonstrate list style type with user defined image logos

HTML Code

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8" />


5 <title>Tag Properties </title>
6

7 <style>

8 .custom {
9 display: inline;
10 border: 2px double black;
11 list-style-type: none;
12 margin: 5px;
13 padding-top: 10px;
14 padding-right: 20px;
15 padding-bottom: 10px;
16 padding-left: 20px;
17 }

18 .logo {

19 list-style-image: url(’https://www.w3schools.com/cssref/sqpurple.gif’);
20 margin: 15px;
21 }
14
22 </style>

23 </head>
24

25 <body>

26 <h2>li Tag Property modification Demo</h2>


27 <h3>Current Top FootBall Players</h3>
28

14
CHAPTER 6. LI TAG

29 <ul>

30 <li class="custom">Lionel Messi</li>


31 <li class="custom">Kylian Mbappe</li>
32 <li class="custom">Lewandowski</li>
33 </ul>

34 <br>

35 <h2>list style type with user defined image logos</h2>


36 <h3>Current Top FootBall Goalkeepers</h3>
37 <ul class="logo">
38 <li>Emiliano Martinez</li>
39 <li>Thibaut Courtois</li>
40 <li>Yassine Bounou</li>
41 </ul>
42

43 </body>

44 </body>
Listing 6.1: 06changeTag.html
45 </html>

Output

=================================

Dept of CSE, SIT - Prabodh C P 15


Chapter 7

Signup Page

Question
Create following web page using HTML and CSS with tabular layout

HTML Code

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <title>Sign Up</title>
5 <style>

6 body {

7 font-family: Arial, sans-serif;


8 background-color: #f2f2f2;
9 }
10

16
11 .container {
12 width: 500px;
13 margin: 0 auto;
14 padding: 20px;
15 background-color: #F7E7CE;
16 border-radius: 5px;

16
CHAPTER 7. SIGNUP PAGE

17 box-shadow: 0 0 10px rgba(0,0,0,0.3);


18 }
19

20 table {
21 width: 100%;
22 }
23

24 th, td {
25 padding: 10px;
26

27 }
28

29 th {
30 text-align: left;
31 background-color: #f2f2f2;
32 }
33

34 input[type=text], input[type=password], input[type=email] {


35 width: 100%;
36 padding: 8px;
37 margin: 8px 0;
38 border: 1px solid #ccc;
39 border-radius: 4px;
40 box-sizing: border-box;
41 }
42

43 button[type=submit] {
44 background-color: #FFA500;
45 color: #fff;
46 padding: 10px 20px;
47 border: none;
48 border-radius: 4px;
49 cursor: pointer;
50 }

51 </style>

52 </head>

53 <body>

54 <div class="container">
55 <h1>Sign up Today</h1>
56 <form>

57 <table>

58 <tr>

59 <td><label for="username">Name:</label> <br>


60 <input type="text" id="username" name="username" required></td>
61 </tr>
62

63 <tr>

64 <td><label for="email">Email:</label> <br>


65 <input type="email" id="email" name="email" required></td>
66 </tr>
67

68 <tr>
17
69 <td><label for="password">Password:</label> <br>
70 <input type="password" id="password" name="password" required></
td>
71 </tr>

72 <tr>

73 <td><label for="password">Confirm password:</label> <br>


74 <input type="password" id="password" name="password" required></
td>
75 </tr>
76

18
CHAPTER 7. SIGNUP PAGE

77 <tr>

78 <td colspan="2"><button type="submit">Register</button></td>


79 </tr>

80 </table>

81 </form>

82 </div>

83 </body>

84 </html>

Output

=================================

19
Chapter 8

Calculator

Question
Create following calculator interface with HTML and CSS

HTML Code

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8" />


5 <title></title>

6 <link rel="stylesheet" type="text/css" href="calcstyle.css">


7 </head>

8 <body>

9 <div class="calculator">
10 <div class="display">
11 <p id="result">0</p>
19
12 </div>

13 <div class="buttons">
14 <button onclick="appendToDisplay(’(’)">(</button>
15 <button onclick="appendToDisplay(’)’)">)</button>
16 <button onclick="clearDisplay()">C</button>
17 <button onclick="appendToDisplay(’%’)">%</button>
18 <button onclick="appendToDisplay(’7’)">7</button>

19
CHAPTER 8. CALCULATOR

19 <button onclick="appendToDisplay(’8’)">8</button>
20 <button onclick="appendToDisplay(’9’)">9</button>
21 <button onclick="appendToDisplay(’*’)">X</button>
22 <button onclick="appendToDisplay(’4’)">4</button>
23 <button onclick="appendToDisplay(’5’)">5</button>
24 <button onclick="appendToDisplay(’6’)">6</button>
25 <button onclick="appendToDisplay(’-’)">-</button>
26 <button onclick="appendToDisplay(’1’)">1</button>
27 <button onclick="appendToDisplay(’2’)">2</button>
28 <button onclick="appendToDisplay(’3’)">3</button>
29 <button onclick="appendToDisplay(’+’)">+</button>
30 <button onclick="appendToDisplay(’0’)">0</button>
31 <button onclick="appendToDisplay(’.’)">.</button>
32 <button onclick="appendToDisplay(’/’)">/</button>
33 <button onclick="evaluate()">=</button>
34 </div>

35 </div>
36

37 </body>

38 </html> Listing 8.1: 08calcScreen.html

CSS Code

1 .calculator {

2 display: flex;
3 flex-direction: column;
4 width: 350px;
5 margin: 10px;
6 border: 1px solid #ccc;
7 border-radius: 15px;
8 background-color: #F0C0FF;
9 }
10

11 .display {
12

13 background-color: #fff;
14 border-radius: 10px;
15 box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
16 display: flex;
17 justify-content: flex-end;
18 align-items: center;
19 padding: 10px;
20 margin-left: 30px;
21 margin-right: 30px;
22 margin-top: 30px;
23 }
24

25 .buttons {

26 display: grid;
27 grid-template-columns: repeat(4, 1fr);
28 padding: 20px;
29 }
20
30

31 button {

32 padding: 20px;
33 background-color: #8D918D;
34 border: 1px solid #ccc;
35 border-radius: 10px;
36 cursor: pointer;
37 margin: 10px;
38 font-size: 18px;

21
CHAPTER 8. CALCULATOR

39 font-weight: bold;
40 }
41

42 button:hover {

43 background-color: #d9d9d9;
44 }
45

46 button:active {

47 background-color: #bfbfbf;
48 }
49

50 #result {

51 margin: 0;

52 font-size: 24px;
53 font-weight: bold; Listing 8.2: 08calcstyle.css
54 }

Output

=================================

22
Chapter 9

Scroling Text

Question
Write a Java Script program that on clicking a button, displays scrolling text which moves from
left to right with a small delay

HTML Code

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <title>Scrolling Text Example</title>


5 <style>

6 #scrollingText {
7 font-size: 24px; font-weight: bold;
8 white-space: nowrap; overflow: hidden;
9 }

10 </style>

11 </head>

12 <body>

13 <button id="startBtn">Start Scrolling</button>


14 <div id="scrollingText">This is some scrolling text!</div>
15 <script>

16 var scrollingText = document.getElementById("scrollingText");


17 var startBtn = document.getElementById("startBtn");
18 var textWidth = scrollingText.clientWidth;
19 var containerWidth = scrollingText.parentNode.clientWidth;
20 var currentPosition = 0;
21 function scrollText() {
22 if (currentPosition < containerWidth) {
23 scrollingText.style.transform = "translateX(-" + currentPosition + "px)";
24 currentPosition += 1;
25 setTimeout(scrollText, 20);
26 } else {

27 currentPosition = -textWidth;
28 scrollText();
22
29 }

30 }

31 startBtn.addEventListener("click", function() {
32 currentPosition = 0;
33 scrollText();
34 });

35 </script>

36 </body>

37 </html>

22
CHAPTER 9. SCROLING TEXT

Output
=================================

Figure 9.1: Initial Page

Dept of CSE, SIT - Prabodh C P 23


Chapter 10

Overlapping Images

Question
Create a webpage containing 3 overlapping images using HTML, CSS and JS. Further when the
mouse is over any image, it should be on the top and fully displayed.

HTML Code

1 <!DOCTYPE html>

2 <html lang="en">
3 <head>

4 <meta charset="utf-8">
5 <meta name="author" content="Putta" >
6 <title>Animal Stacking</title>

7 <style>

8 h1 {text-align: center;}
9

10 .dog {

11 position: absolute;

12 left: 10%; top: 10%;


13 z-index: 0;

14 }

15 .cat {

16 position: absolute;

17 left: 30%; top: 30%;


18 z-index: 1;

19 }

20 .horse {

21 position: absolute;

22 left: 50%; top: 50%;


23 z-index: 2;

24
24 }

25 </style>

26 <script>

27 var topIndex = 2;
28 function moveToTop(picture) {
29 picture.style.zIndex = ++topIndex;

30 }

31

32 </script>

33 </head>

34 <body>

35 <h1>Image Overlap Demo</h1>


36 <div id="image-container">
37 <img id="dog" class="dog" src="dog.jpg" onmouseover="moveToTop(this)" width="
400" height="300">

24
CHAPTER 10. OVERLAPPING IMAGES

38 <img id="cat" class="cat" src="cat.jpg" onmouseover="moveToTop(this)" width="


400" height="300">
39 <img id="horse" class="horse" src="horse.jpg" onmouseover="moveToTop(this)"
width="400" height="300">
40 </div>

41 </body>

42 </html>

Output

25
=================================

(a) Mouse over Image 1

(b) Mouse over Image 2

(c) Mouse over Image 3

25
4. Demonstrate the following HTML5 Semantic tags- < article >, < aside >, < details >, < figcaption >,
<figure >, < footer >, < header >, < main >, < mark >, < section > for a webpage that gives information
about travel experience.

This experiment uses new tags of HTML5. They are as follows.

Explaintion: <article>:The <article> tag specifies independent, self-contained content.

<aside>:The <aside> tag defines some content aside from the content it is placed in.The aside
content should be indirectly related to the surrounding content.

<details>:The <details> tag specifies additional details that the user can open and close on
demand. The <details> tag is often used to create an interactive widget that the user can open and
close. By default, the widget is closed. When open, it expands, and displays the content within.
Any sort of content can be put inside the <details> tag.

The <figcaption> tag defines a caption for a <figure> element. The <figcaption> element can be
placed as the first or last child of the <figure> element.

The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code
listings, etc.

The <header> element represents a container for introductory content or a set of navigational
links.

The <footer> tag defines a footer for a document or section.A <footer> element typically contains:

• authorship information
• copyright information
• contact information
• sitemap
• back to top links
• related documents

<main>: The <main> tag specifies the main content of a document.The content inside the <main>
element should be unique to the document. It should not contain any content that is repeated
across documents such as sidebars, navigation links, copyright information, site logos, and
search forms.

<mark>:The <mark> element is found within the <body> tag in HTML. It is used to highlight
some part of the text for quick reference inside another element, such as in a paragraph that is of
more importance or relevance to the user.

<section>:The <section> tag defines a section in a document.


HTML Code

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>HTML5 Semantic Tags Demo</title>

<style>

body{

background-color: #FFFDD0;

aside {

float: right;

width: 25%;

background-color: cyan;

font-style: italic;

padding: 15px;

main {

float: left;

width: 70%;

footer {

position: fixed;

left: 0;

bottom: 0;

width: 100%;
text-align: center;

mark {

background-color: yellow;

color: black;

figure {

display: inline-block;

margin: auto;

figcaption {

font-style: italic;

</style>

</head>

<body>

<article>

<header>

<h1>My Travelogue</h1>

<p>Random Escapades</p>

</header>

<main>

<figure>

<img src="journey.jpeg" alt="Example Image" width="350" height="235">

<figcaption>The road never ends</figcaption>

</figure>
<section>

<h2>Ooty</h2>

<p>Ooty is a popular hill station located in the Nilgiri Hills. It is popularly called the "Queen of Hill
Stations".</p>

</section>

<section>

<h2>Mysore</h2>

<p> The city is also known as the City of Palaces, Mysuru has always enchanted its

visitors with its quaint charm.</p>

</section>

</main>

<aside>

<section>

<p>Upcoming Trek planned to <mark>Kumara Parvata</mark> will be sharing detils soon</p>

<details>

<summary>Tentative Dates</summary>

<p>24th January 2023</p>

</details>

</section>

</aside>

<footer>

<p>&copy; 2023 Prabodh C P</p>

</footer>

</article>

</body>

</html>
Output
5. Create a class called income, and make it a background color of #0ff.

Create a class called expenses, and make it a background color of #f0f.

Create a class called profit, and make it a background color of #f00.

Throughout the document, any text that mentions income, expenses, or profit, attach the appropriate class
to that piece of text. Further create following line of text in the same document.

The current price is 50₹ and new price is 40₹.

Explanation: This hex color code is also a web safe color which is equal to #0ff.

This hex color code #f0f is a shade of magenta.

The color red with hexadecimal color code #f00 is a shade of red.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>Class Selectors Demo</title>

<style>

.income {background-color: #0ff; font-style: italic;}

.expenses {background-color: #f0f;font-style: oblique;}

.profit {background-color: #ff0;font-weight: bold;}

.red{color: red;font-size: 24px;}

.strike{text-decoration: line-through; font-size: 24px;}

p {font-family: Cursive;}

</style>

</head>

<body>

<h1>Class Selectors Demo</h1>

<p>
Income, expenses, and profit are financial terms that are used to measure the

financial health of a person or a business.

</p>

<p class="income">

Income refers to the amount of money received by an individual or business from

various sources such as employment, investments, or sales of goods and services.

Income can be earned on a regular basis, such as a salary, or irregularly, such

as a bonus or one-time payment. </p>

<p class="expenses">

Expenses, on the other hand, refer to the amount of money spent by an individual or

business to cover their costs of living or operating. Expenses can include fixed

costs such as rent or salaries, variable costs such as the cost of materials, or

discretionary costs such as entertainment or travel. </p>

<p class="profit">

Profit is the amount of money that remains after deducting expenses from income. It

represents the financial gain or loss that a person or business has generated

over a given period of time. A positive profit means that the income was greater

than the expenses, while a negative profit means that the expenses were greater

than the income. </p>

<span class="strike">The current price is 50&#8377; </span><span class="red">and new

price is 40&#8377;</span>

</body>

</html>
Output

6. Change the tag li to have the following properties:

• A display status of inline

• A medium, double-lined, black border

• No list style type

Add the following properties to the style for li:

• Margin of 5px

• Padding of 10px to the top, 20px to the right, 10px to the bottom, and 20px to the left

Also demonstrate list style type with user defined image logos

Explaintion: The <li> HTML element is used to represent an item in a list. It must be contained in a parent
element: an ordered list (<ol>), an unordered list (<ul>), or a menu (<menu>). In menus and unordered lists,
list items are usually displayed using bullet points. In ordered lists, they are usually displayed with an
ascending counter on the left, such as a number or letter.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />


<title>Tag Properties </title>

<style>

.custom {

display: inline;

border: 2px double black;

list-style-type: none;

margin: 5px;

padding-top: 10px;

padding-right: 20px;

padding-bottom: 10px;

padding-left: 20px;

.logo {

list-style-image: url(’https://www.w3schools.com/cssref/sqpurple.gif’);

margin: 15px;

</style>

</head>

<body>

<h2>li Tag Property modification Demo</h2>

<h3>Current Top FootBall Players</h3>

<ul>

<li class="custom">Lionel Messi</li>

<li class="custom">Kylian Mbappe</li>

<li class="custom">Lewandowski</li>

</ul>
<br>

<h2>list style type with user defined image logos</h2>

<h3>Current Top FootBall Goalkeepers</h3>

<ul class="logo">

<li>Emiliano Martinez</li>

<li>Thibaut Courtois</li>

<li>Yassine Bounou</li>

</ul>

</body>

</body>

</html>

Output

You might also like