End Sem

Question:
Create an HTML document that includes the following elements:
1. Use character entities to display the temperature symbol (the small raised circle)
and a nonbreaking space.
2. Insert a horizontal rule with a thickness of 3 pixels.
3. Include an image of a car with the file name "car.jpg." Set the alt attribute to "Pic
of a Car" and scale the image to occupy 50% of the display width.
4. Create a hypertext link with the text "Visit our homepage" that points to a
document named "index.html" in the same directory.
5. Add another hypertext link with the text "Contact us" that opens an email to
"info@example.com" when clicked.
6. Finally, create a link that opens a new window and points to a page named
"Image.html" with the text "Open Page in a new window."
ANS:
<html>
<title>sample page</title>
<body>
<hr/>
temperature symbol: ° <br>
nonbreaking space:
<hr/>
<img src='car.jpeg', alt='Pic of a Car', width=50%/>
<a href='index.html'>Visit our homepage</a>
<br>
<a href='info@example.com'>Contact us</a>
<br>
<a href='Image.html'>Open Page in a new window</a>
</body>
</html>
Question:
Create an HTML document that includes the following lists:
1. Create an unordered list (<ul>) with at least three list items (<li>). Use different
bullet types for each item: one with the default disc, one with a circle, and one
with a square.
2. Next, create an ordered list (<ol>) with at least three list items (<li>). Use different
numbering styles for each item: one with Arabic numerals (default), one with
uppercase letters, and one with lowercase Roman numerals.
3. Finally, create a definition list (<dl>) with at least three term-definition pairs. Use
the <dt> tag for terms and the <dd> tag for definitions. Include various HTML
elements like images or links within the list items.
ANS:
<html>
<body>
<ul>
<li type='disc'> hello</li>
<li type='circle'> hello</li>
<li type='square'> hello</li>
</ul>
<ol>
<li type='1'> hello</li>
<li type='A'> hello</li>
<li type='I'> hello</li>
</ol>
<dl>
<dt>hello</dt>
<dd>hi</dd>
</dl>
</body>
</html>
Question:
border='1', cellpadding='10', cellspacing='5'
ANS:
<html>
<body>
<table border='1', cellpadding='10', cellspacing='5'>
<thead>STUDENT DATA</thead>
<tr>
<th colspan=4>B TECH CSE</th>
</tr>
<tr>
<th rowspan=4>DETAILS</th>
<th>Roll NO</th>
<th>Name</th>
<th>DOB</th>
</tr>
<tr>
<td align='center'>1</td>
<td>AAA</td>
<td>01-01-1992</td>
</tr>
<tr>
<td>BBB</td>
<td>02-02-1992</td>
</tr>
<tr>
<td>CCC</td>
<td>03-03-1992</td>
</tr>
</table>
</body>
</html>
Question:
ANS:
<html>
<body>
<form>
Name:
<input type='text'/> <br><br>
Age:
<input type='text'/> <br><br>
Password:
<input type='password'/> <br><br>
Interests:
Movies<input type='checkbox', name = 'Interests', value =
'Movies', checked='checked'/>
Travel<input type='checkbox', name = 'Interests', value =
'Travel'/>
Music<input type='checkbox', name = 'Interests', value =
'Music'/> <br><br>
Gender:
Male<input type='radio', name = 'gender', value = 'male',
checked='checked'/>
Female<input type='radio', name = 'gender', value ='female'/>
<br><br>
<select>
<option value='in'>India</option>
<option value='ne'>Nepal</option>
<option value='sri'>Srilanka</option>
</select> <br><br>
<select multiple size=3>

<option value='in', selected='selected'>India</option>
<option value='ne'>Nepal</option>
<option value='sri'>Srilanka</option>
</select> <br><br>
Address:<br>
<textarea rows=5, cols=50></textarea> <br><br>
<input type='submit'/> <input type='reset'/>

</form>
</body>
</html>
Question:
Create an HTML document that uses both inline styles, document-level styles, and an
external style sheet to style various elements. Apply different styles for the following:
1. Use inline styles to make a paragraph (<p>) have red text and a font size of 18px.
2. Use document-level styles to set the background color of all <h2> headings to
yellow and increase their font size to 30px.
3. Create an external style sheet named "styles.css" and link it to the HTML document
using the <link> tag. In this external style sheet, apply styles to make all paragraphs
(<p>) use a sans-serif font-family and have a red text color. Also, set the
background color of <h2> headings to yellow.
ANS:
<html>
<head>
<link type = 'text/css' href='style.css'/>
</head>
<body>
<p style = 'color:red; font-size=18px'>hi</p>
<h2>hello</h2>
<h1>hello</h1>
</body>
<style>
h2{background-color:yellow; font-size=30px}
</style>
</html>
Style.css
h1 {color:red; font-family: sans-serif; background-color:yellow;}
Question:
Create an HTML document with various elements and apply styles using different selector
forms in CSS. Demonstrate the use of the following selector forms:
1. Simple Selector Forms:

 Apply a style to all <h1> elements with a blue color.
 Apply a style to all <h2> and <h3> elements with a green color.
2. Class Selectors:
 Define two classes: .normal and .warning.
 Apply the .normal class to a paragraph (<p>) and set specific styles.
 Apply the .warning class to another paragraph and set different styles.
3. Generic Selectors:
 Define a generic class named .sale that can be applied to both <h3> and <p>
elements.
 Apply the .sale class to an <h3> and a <p> with specific styles.
4. id Selectors:
 Define an id selector for an element with the id section14 and set a specific
style.
 Apply this id selector to an <h2> element within the document.
5. Contextual Selectors:
 Use a descendent selector to style ordered list items within unordered
elements.
 Use a child selector to style list items (<li>) directly nested within an ordered
list (<ol>).
6. Pseudo Classes:
 Apply styles using the :hover pseudo class for an interactive effect.
 Apply styles using the :focus pseudo class for elements in focus.
7. Universal Selector:
 Use the universal selector (*) to set a common style for all elements in the
document.
ANS:
<html>
<head>
</head>
<body>
<h1>H1</h1>
<h2 class=h23>h2</h2>
<h3 class=h23>h3</h3>
<p class=normal>nomral</p>
<p class=warning>warning</p>
<h3 class=sale>h3 sale</h3>
<p class=sale>p sale</h3>
<p id=section14>section14</p>
<h2 id=section14>h2 section14</h2>
<ul>
<li>One</li>
<ol>
<li>two</li>
<li>three</li>
</ol>
</ul>
</body>
<style>
h1{color:blue;}
.h23{color:green;}
.normal{color:blue;}
.warning{color:red;}
.sale{font-size:25px;}
#section14{color:white;background-color:blue;}
ul ol li {color:red;}
h1:hover{color:red}
h2:focus{color:red}
*{font-family:Arial}
</style>
</html>
The Box Model
Question:
Create an HTML document that includes a box with the following specifications:
1. Apply a border to the box with a style of "dotted," a width of "2px," and a color of
"green."
2. Set the margin of the box to "10px" on all sides.
3. Apply padding to the box with a value of "15px" on all sides.
ANS:
<html>
<head>
</head>
<body>
<h1>INTRODUCTION TO HTML</h1>
</body>
<style>
h1{border-style:dotted; border-width:2px; border-color:green;
padding:15px; margin:10px; }
</style>
</html>
Question:
Create an HTML document that includes a body element with the following specifications:
1. Set a background image for the body using the background-image property. Use
the image "planes.jpg."
2. Ensure that the background image does not repeat using the background-repeat
property.
3. Position the background image at the bottom of the body using the background-
position property.
4. Additionally, set the background image to cover the entire screen using the
background-size property.
ANS:
<html>
<head>
</head>
<body>
<h1>INTRODUCTION TO HTML</h1>
</body>
<style>
body{background-image: url('car.jpeg');
background-repeat: no-repeat;
background-position: bottom;
background-size:100%}
</style>
</html>
Question
Java script vs Java (code: MUTE)
Feature JavaScript Java

Model Object based model Object oriented model
A dynamically-typed language, meaning A statically-typed language, where variable
Type System variable types can change. types are fixed.
Execution Interpreted by the browser's JavaScript Compiled, runs on the Java Virtual
Environment engine. Machine (JVM).
Front-end web development. Server-side Used in enterprise applications, mobile
Usage development. applications (Android) and more.
Explicit /direct embedding - <script></script> in head OR body

Implicit/indirect embedding - <script src=’script.js’> in head
Question:
1. Create an HTML document with a button that triggers an alert dialog displaying a
custom message.
2. Add another button that triggers a confirm dialog asking the user if they want to
continue. Display a message based on the user's choice.
3. Include a third button that triggers a prompt dialog asking the user for their name.
Display a personalized greeting on the page using the entered name.
<!DOCTYPE html>
<html>
<head>
<script>
function al(){
alert('Hello world');
}
function conf(){
var a = confirm('Do you want to continue?');
if (a==1){
document.write('yes');
}
else{
document.write('no');
}
}
function prom(){
var name = prompt('Enter your name ');
document.write('welcome, ' + name);
}
</script>
</head>
<body>
<input type='submit' onclick='al()' value='alert'/>
<input type='submit' onclick='conf()' value='confirm'/>
<input type='submit' onclick='prom()' value='prompt'/>
</body>
</html>
Question:
Sum of two numbers using prompt
<!DOCTYPE html>
<html>
<head>
<script>
function sum(){
var a = prompt('Enter number 1');
var b = prompt('Enter number 2');
document.write(parseInt(a)+parseInt(b));
}
</script>
</head>
<body>
<input type='submit' onclick=sum() value='add'>
</body>
</html>
Question
Difference between pre increment and post increment
++a (pre-increment):
This form increments the value of a before the value is used in an expression.
The updated value is immediately used.
a = 5;
b = ++a; // Increment 'a' first, then assign to 'b'
// Now, a is 6, and b is 6
a++ (post-increment):
This form increments the value of a after the current value is used in an expression.
The original value is used before the increment takes place.
a = 5;
b = a++; // Assign the current value of 'a' to 'b', then increment
'a'
// Now, a is 6, but b is 5
TYPE CONVERSIONS
Implicit type conversions
var result1 = 7 * "3"; // Result: 21

var result2 = "3" * 7; // Result: 21
var result3 = "A" * 7; // Result: NaN
var strResult = 20 + 20 + "ABC"; // Result: "40ABC"

var strResult2 = "ABC" + 2020; // Result: "ABC2020"
var strResult3 = "ABC" + 20 + 20; // Result: "ABC2020"
Explicit type conversions
Use the String() constructor or the toString method.

var num = 123;
var str1 = String(num); // Result: "123"
var str2 = num.toString(); // Result: "123"
var str_binary = num.toString(2); // Result: "110"
Use the Number() constructor or subtract zero

var strNum = "7";
var num1 = Number(strNum); // Result: 7
var num2 = strNum - 0; // Result: 7
parseInt and parseFloat

var intResult = parseInt("72AB"); // Result: 72
var floatResult = parseFloat("3.14"); // Result: 3.14
Creating objects:
Create my_car and add some properties.
// Create an Object my_car

var my_car = new Object();
// Create and initialize the ‘make’ property

my_car.make = "Ford";
// Create and initialize ‘model’ property

my_car.model = “SUV";
The delete operator can be used to delete a property from an object.
delete my_car.model
FOR PHP
FOR JAVASCRIPT
JSON.parse() – converting json string to java script object
JSON.stringify() – converting js object to JSON string

LARAVEL FRAMEWORK
MVC Architecture:
 Model-View-Controller
 Organizes code into three interconnected parts:
o Models:
 Handle data interactions
 Represent database tables
 Define relationships between data
o Views:
 Handle user interface and presentation
 Contain HTML, CSS, and JavaScript
 Render visual elements based on data from Models
o Controllers:
 Act as "middlemen" between Models and Views
 Handle incoming requests
 Retrieve data from Models
 Pass data to Views for rendering
 Process user input

End Sem

Uploaded by

Document Information

Original Description:

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

End Sem

Uploaded by

Copyright:

Available Formats

Question:

Create an HTML document that includes the following elements:

<select multiple size=3>

<input type='submit'/> <input type='reset'/>

1. Simple Selector Forms:

2. Set the margin of the box to "10px" on all sides.

3. Apply padding to the box with a value of "15px" on all sides.

Feature JavaScript Java

Explicit /direct embedding - <script></script> in head OR body

Implicit type conversions

var result1 = 7 * "3"; // Result: 21

var strResult = 20 + 20 + "ABC"; // Result: "40ABC"

Explicit type conversions

Use the String() constructor or the toString method.

Use the Number() constructor or subtract zero

parseInt and parseFloat

// Create an Object my_car

// Create and initialize the ‘make’ property

// Create and initialize ‘model’ property

The delete operator can be used to delete a property from an object.

JSON.parse() – converting json string to java script object

JSON.stringify() – converting js object to JSON string

You might also like