Scribd
Upload
2 views

Internal answer key

The document provides an answer key for an internal assessment covering HTML, CSS, and JavaScript topics. It includes instructions on creating password fields, types of HTML lists, form elements, CSS selectors, text properties, JavaScript functions, and a simple online shopping application example. Each section contains explanations, syntax, and examples for better understanding of web development concepts.

Uploaded by

su ja
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

Internal answer key

The document provides an answer key for an internal assessment covering HTML, CSS, and JavaScript topics. It includes instructions on creating password fields, types of HTML lists, form elements, CSS selectors, text properties, JavaScript functions, and a simple online shopping application example. Each section contains explanations, syntax, and examples for better understanding of web development concepts.

Uploaded by

su ja
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 24

Internal-2 answer key

Part-A

1. How will you create password fields in a HTML form?

Inside the <form> element, create input fields for username and password: Use the <input> tag
with the type attribute set to “text” for username. Use the <input> tag with the type attribute set
to “password” for password. Add clear labels for each input field using the <label> tag.

2. List and explain the three flavors of HTML.

Their syntaxes are still very similar and there are only a few differences between them. Both
languages come in three flavours: frameset, transitional and strict.

3.Mention the advantages of using CSS

 Separation of Content and Style. One of the most significant advantages of CSS is its ability to
separate content from presentation. ...
 Consistency. ...
 Faster Loading Times. ...
 Responsive Design. ...
 Ease of Maintenance. ...
 Accessibility. ...
 Print-Friendly Pages. ...
 Global Styling

4. What is the need for client side scripting.

Client-side scripts are commonly used when we want to validate data before sending it to the
web server, adjusting the interface in response to user feedback, and for implementing other
advanced features.

5. Write a java script to print “Good Day” using IF-ELSE condition

The if/else statement executes a block of code if a specified condition is true. If the condition is
false, another block of code can be executed.

The if/else statement is a part of JavaScript's "Conditional" Statements, which are used to
perform different actions based on different conditions.

Part-B

6a )Define List and its types.Also write the necessary html program and Output
Over 95% of websites are coded in HTML. Lists in HTML display related information in an
organized and concise manner, making the website visually appealing and easily navigable for
the users. Therefore, understanding how to create lists with HTML is essential for a successful
web page design. In this blog, we will explore what is a list in HTML and the types of lists
available.

What Is a List in HTML?


In HTML, a list is an element used to create organized and structured lists of items. It can be
either unordered or ordered.
 Unordered (bulleted) lists use the <ul> tag along with individual <li> tags for each item in the
list.
 Ordered (numbered) lists use the <ol> and <li> tags for each item in the list.
 In addition to these two fundamental types of lists, there are also description and menu lists using
specific HTML markup, such as <dl>, <dt>, and <dd>.
 Text within any type of list must appear between opening (<ul>) and closing (</ul>) tags.
Lists are incredibly useful for organizing related pieces of information. In modern web design,
lists play a huge role, as they can be used in navigation menus or within the content itself.

From a technical standpoint, having your data arranged into lists makes documents structured,
more accessible, and generally easier to update when needed. You can learn more about
HTML/CSS by taking an online web development course.
Types of Lists in HTML
The following are the types of lists in HTML.

1. Ordered List in HTML


These are also called numbered lists in HTML. It represents the HTML list items, which are
sequentially ordered, either in increasing (1, 2, 3, etc.) or decreasing (3, 2, 1, etc.) order. An
ordered list is represented by either numbers, letters (A, B, C, etc.), or roman numerals (I, II, III,
etc.).

Syntax:

<ol>
<li> ... </li>
<li> ... </li>
<li> ... </li>
</ol>

Example:

<!DOCTYPE html>
<html>
<body>
<h2>An ordered HTML list (Stationary Items)</h2>

<ol>
<li>Pen</li>
<li>Pencil</li>
<li>Paper</li>
</ol>

</body>
</html>

2. Unordered List in HTML


An unordered list is a type of HTML element used to create a bulleted listing. Therefore, they are
also called bulleted lists in HTML. The elements are typically indicated by bullet points (•) but
can be customized with disc (◦), circle (o), and square shapes (■).

Unordered lists are used to indicate a list of items that don’t have any particular order or
hierarchy.

Syntax:

<ul>
<li>...</li>
<li>...</li >
<li>...</li >
</ul>

Example:

<!DOCTYPE html>
<html>
<body>

<h2>An unordered HTML list (Home Appliances)</h2>

<ul>
<li>Washing Machine</li>
<li>Oven</li>
<li>Gyser</li>
</ul>

</body>
</html>

6b ) Describe the form elements and its properties

The HTML <form> element can contain one or more of the following form elements:

 <input>
 <label>
 <select>
 <textarea>
 <button>
 <fieldset>
 <legend>
 <datalist>
 <output>
 <option>
 <optgroup>

The <input> Element

One of the most used form elements is the <input> element.

The <input> element can be displayed in several ways, depending on the type attribute.

Example
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
Try it Yourself »

All the different values of the type attribute are covered in the next chapter: HTML Input Types.

The <label> Element

The <label> element defines a label for several form elements.

The <label> element is useful for screen-reader users, because the screen-reader will read out
loud the label when the user focus on the input element.
The <label> element also help users who have difficulty clicking on very small regions (such as
radio buttons or checkboxes) - because when the user clicks the text within the <label> element,
it toggles the radio button/checkbox.

The for attribute of the <label> tag should be equal to the id attribute of the <input> element to
bind them together.

The <select> Element

The <select> element defines a drop-down list:

Example
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Try it Yourself »

The <option> element defines an option that can be selected.

By default, the first item in the drop-down list is selected.

To define a pre-selected option, add the selected attribute to the option:

Example
<option value="fiat" selected>Fiat</option>
Try it Yourself »
Visible Values:

Use the size attribute to specify the number of visible values:

Example
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Try it Yourself »
Allow Multiple Selections:

Use the multiple attribute to allow the user to select more than one value:

Example
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Try it Yourself »

The <textarea> Element

The <textarea> element defines a multi-line input field (a text area):

Example
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
Try it Yourself »

The rows attribute specifies the visible number of lines in a text area.

The cols attribute specifies the visible width of a text area.

This is how the HTML code above will be displayed in a browser:

7a) Define Selectors and its types. Also write the necessary html program and Output

SS selectors are used to "find" (or select) the HTML elements you want to style.

We can divide CSS selectors into five categories:

 Simple selectors (select elements based on name, id, class)


 Combinator selectors (select elements based on a specific relationship between them)
 Pseudo-class selectors (select elements based on a certain state)
 Pseudo-elements selectors (select and style a part of an element)
 Attribute selectors (select elements based on an attribute or attribute value)

This page will explain the most basic CSS selectors.

The CSS element Selector

The element selector selects HTML elements based on the element name.

Example

Here, all <p> elements on the page will be center-aligned, with a red text color:

p{
text-align: center;
color: red;
}
Try it Yourself »

The CSS id Selector

The id selector uses the id attribute of an HTML element to select a specific element.

The id of an element is unique within a page, so the id selector is used to select one unique
element!

To select an element with a specific id, write a hash (#) character, followed by the id of the
element.

Example

The CSS rule below will be applied to the HTML element with id="para1":

#para1 {
text-align: center;
color: red;
}
The CSS class Selector

The class selector selects HTML elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the class name.
Example

In this example all HTML elements with class="center" will be red and center-aligned:

.center {
text-align: center;
color: red;
}
The CSS Universal Selector

The universal selector (*) selects all HTML elements on the page.

Example

The CSS rule below will affect every HTML element on the page:

*{
text-align: center;
color: blue;
}
The CSS Grouping Selector

The grouping selector selects all the HTML elements with the same style definitions.

Look at the following CSS code (the h1, h2, and p elements have the same style definitions):

h1 {
text-align: center;
color: red;
}

h2 {
text-align: center;
color: red;
}

p{
text-align: center;
color: red;
}

7 b) Explain in detail about the Text properties.

SS Text Formatting refers to applying styles to text elements to control appearance and
layout. This includes properties for color, alignment, decoration, indentation, justification,
shadows, spacing, and direction. These properties enhance readability and aesthetics,
improving the presentation of textual content on web pages.
Syntax:
The Syntax to write this property:
Selector {
property-name : /*value*/
}
CSS Text Formatting Properties:
Example: In this example we demonstrates basic text formatting using CSS. It includes
paragraphs with different styles: changing color, aligning center, adding underline, setting
indentation, and adjusting letter spacing for improved readability and aesthetics.
HTML
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Basic Text Formatting</title>
<style>
.text-color {
color: blue;
}

.text-align-center {
text-align: center;
}

.text-decoration {
text-decoration: underline;
}

.text-indent {
text-indent: 20px;
}

.letter-spacing {
letter-spacing: 2px;
}
</style>
</head>

<body>
<p class="text-color">Changing Text Color</p>
<p class="text-align-center">Aligning Text</p>
<p class="text-decoration">Adding Text Decoration</p>
<p class="text-indent">Setting Text Indentation</p>
<p class="letter-spacing">Adjusting Letter Spacing</p>
</body>

</html>
Part-c
8 a)What is meant by function in Javascript?
A JavaScript function is a block of code designed to perform a particular task.

A JavaScript function is executed when "something" invokes it (calls it).


Example
// Function to compute the product of p1 and p2
function myFunction(p1, p2) {
return p1 * p2;
}
JavaScript Function Syntax

A JavaScript function is defined with the function keyword, followed by a name, followed by
parentheses ().

Function names can contain letters, digits, underscores, and dollar signs (same rules as
variables).

The parentheses may include parameter names separated by commas:


(parameter1, parameter2, ...)

The code to be executed, by the function, is placed inside curly brackets: {}

function name(parameter1, parameter2, parameter3) {


// code to be executed
}

Function parameters are listed inside the parentheses () in the function definition.

Function arguments are the values received by the function when it is invoked.

Inside the function, the arguments (the parameters) behave as local variables.

Function Invocation
The code inside the function will execute when "something" invokes (calls) the function:

 When an event occurs (when a user clicks a button)


 When it is invoked (called) from JavaScript code
 Automatically (self invoked)

You will learn a lot more about function invocation later in this tutorial.

Function Return

When JavaScript reaches a return statement, the function will stop executing.

If the function was invoked from a statement, JavaScript will "return" to execute the code after
the invoking statement.

Functions often compute a return value. The return value is "returned" back to the "caller":

Example

Calculate the product of two numbers, and return the result:

// Function is called, the return value will end up in x


let x = myFunction(4, 3);

function myFunction(a, b) {
// Function returns the product of a and b
return a * b;
}

8b) Develop a simple online shopping application using javascript.(Assume your own data)
<!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>Document</title>
<link rel="stylesheet" href="css/style.css">
<script type="module"
src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
</head>
<body>
<header>
<div class="nav">

<a href="#" class="logo">


<ion-icon name="fast-food"></ion-icon>
Food Delight
</a>

<div class="box">
<div class="cart-count">0</div>
<ion-icon name="cart" id="cart-icon" ></ion-icon>
</div>

<div class="cart">
<div class="cart-title">Cart Items</div>
<div class="cart-content">
<!--
<div class="cart-box">
<img src="images/97.jpg" class="cart-img">
<div class="detail-box">
<div class="cart-food-title">Special Dosai</div>
<div class="price-box">
<div class="cart-price">Rs.72</div>
<div class="cart-amt">Rs.72</div>
</div>
<input type="number" value="1" class="cart-quantity">
</div>
<ion-icon name="trash" class="cart-remove"></ion-icon>
</div>

<div class="cart-box">
<img src="images/97.jpg" class="cart-img">
<div class="detail-box">
<div class="cart-food-title">Special Dosai</div>
<div class="price-box">
<div class="cart-price">Rs.72</div>
<div class="cart-amt">Rs.72</div>
</div>
<input type="number" value="1" class="cart-quantity">
</div>
<ion-icon name="trash" class="cart-remove"></ion-icon>
</div>
-->
</div>

<div class="total">
<div class="total-title">Total</div>
<div class="total-price">Rs.0</div>
</div>

<button class="btn-buy">Place Order</button>

<ion-icon name="close" id="cart-close"></ion-icon>

</div>
</div>
</header>
<div class="container">
<h2 class="title">Discover the Best Food</h2>
<div class="shop-content">

<div class="food-box">
<div class="pic">
<img src="images/97.jpg" class="food-img">
</div>
<h2 class="food-title">Plain</h2>
<span class="food-price">Rs.40</span>
<ion-icon name="cart" class="add-cart"></ion-icon>
</div>

<div class="food-box">
<div class="pic"><img src="images/98.jpg" class="food-img"></div>
<h2 class="food-title">Paper Roast</h2>
<span class="food-price">Rs.65</span>
<ion-icon name="cart" class="add-cart"></ion-icon>
</div>

<div class="food-box">
<div class="pic"><img src="images/99.jpg" class="food-img"></div>
<h2 class="food-title">Onion Roast</h2>
<span class="food-price">Rs.80</span>
<ion-icon name="cart" class="add-cart"></ion-icon>
</div>

<div class="food-box">
<div class="pic"><img src="images/100.jpg" class="food-img"></div>
<h2 class="food-title">Egg Parotta</h2>
<span class="food-price">Rs.55</span>
<ion-icon name="cart" class="add-cart"></ion-icon>
</div>

<div class="food-box">
<div class="pic"><img src="images/101.jpg" class="food-img"></div>
<h2 class="food-title">Plain Omelette</h2>
<span class="food-price">Rs.25</span>
<ion-icon name="cart" class="add-cart"></ion-icon>
</div>

<div class="food-box">
<div class="pic"><img src="images/102.jpg" class="food-img"></div>
<h2 class="food-title">Kadai Fry</h2>
<span class="food-price">Rs.150</span>
<ion-icon name="cart" class="add-cart"></ion-icon>
</div>

<div class="food-box">
<div class="pic"><img src="images/103.jpg" class="food-img"></div>
<h2 class="food-title">Egg Veechu</h2>
<span class="food-price">Rs.65</span>
<ion-icon name="cart" class="add-cart"></ion-icon>
</div>

<div class="food-box">
<div class="pic"><img src="images/104.jpg" class="food-img"></div>
<h2 class="food-title">Egg Roast</h2>
<span class="food-price">Rs.65</span>
<ion-icon name="cart" class="add-cart"></ion-icon>
</div>

</div>
</div>
<script src="js/script.js"></script>
</body>
</html>

css/style.css
@import url('https://fonts.googleapis.com/css2?
family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');

*{
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}

body{
background-color:#4b4b4b;
}

header{
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 99;
background-color: #ff4757;
}

.nav{
max-width: 1200px;
margin: auto;
width: 100%;
height: 50px;
display: flex;
justify-content: space-between;
align-items: center;
}

.logo{
font-size: 1.1rem;
font-weight: 500;
text-decoration: none;
text-transform: uppercase;
color:#ffffff;
}

.box{
color:white;
width: 30px;
height: 30px;
text-align: center;
position: relative;
}

.cart-count{
position: absolute;
background-color: #2f3542;
top: -5px;
right: 0;
padding: 3px;
height: 20px;
width: 20px;
line-height:20px ;
border-radius: 50%;
z-index: 99;
}

#cart-icon{
font-size: 1.5rem;
cursor: pointer;
padding-top: 10px;
}

img{
width: 100%;
}

.container{
max-width: 1200px;
padding: 4rem;
margin: auto;
width: 100%;
}

h2.title{
font-size: 1.1rem;
font-weight: 500;
margin-bottom: 1.5rem;
color:#ffffff;
}

.shop-content{
display: grid;
grid-template-columns: repeat(auto-fit,minmax(220px,auto));
gap:1.5rem;
justify-content: center;
align-content: center;
}

.food-box{
position: relative;
background-color: #fff;
padding: 10px;
box-shadow: 0 1px 4px rgba(40, 37, 37, 0.1);
border-radius: 3px;
}

.pic{
overflow: hidden;
}
{
transform: scale(1.5);
}

.food-img{
transition: 0.4s;
aspect-ratio: 1/1;
object-fit: cover;
}

.food-title{
font-size: 1rem;
font-weight: 600;
color:#ff6348;
}

.food-price{
font-weight:500 ;
}

padding: 10px;
font-size: 1.1rem;
cursor: pointer;
transition: 0.5s;

.cart{
position: fixed;
top: 0;
right: -100%;
width: 400px;
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
padding: 20px;
background-color: white;
box-shadow: 0 1px 4px rgba(40, 37, 37, 0.1);
z-index: 100;
}

.cart-active{
right:0;
transition: 0.5s;
}

.cart-title{
text-align: center;
font-size: 1.5rem;
font-weight: 500;
margin-bottom: 1rem;
padding-bottom:20px ;
border-bottom: 1px solid rgba(0,0,0,0.1);
}

.cart-box{
display: grid;
grid-template-columns: 32% 50% 18%;
align-items: center;
gap: 1rem;
margin-top: 1rem;
border-bottom: 1px solid rgba(0,0,0,0.1);
padding-bottom: 10px;
}

.cart-img{
width: 75px;
height: 75px;
object-fit: cover;
border:2px solid rgba(0,0,0,0.1);
padding: 5px;
}
.detail-box{
display: grid;
row-gap: 0.5rem;
}

.price-box{
display: flex;
justify-content: space-between;
}

.cart-food-title{
font-size: 1rem;
text-transform: uppercase;
color:#ff6348;
font-weight: 500;
}

.cart-price{
font-weight: 500;
}
.
}

.total-title{
font-size: 1rem;
font-weight: 600;
}

.total-price{
margin-left: 0.5rem;
}

.btn-buy{
padding: 12px 20px;
background-color:#2f3542;
color:#fff;
border: none;
font-size: 1rem;
font-weight: 500;
cursor: pointer;
}
#cart-close{
position: absolute;
top: 1rem;
right: 0.8rem;
font-size: 2rem;
cursor: pointer;
}

You might also like