Scribd
Upload
13 views7 pages

Lists and Types of Lists

Dhjejdkfkdkkdndnskskslslls KH shhsjsjjsjsjskkskskskks

Uploaded by

shyamkumar4381
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
13 views7 pages

Lists and Types of Lists

Dhjejdkfkdkkdndnskskslslls KH shhsjsjjsjsjskkskskskks

Uploaded by

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

1.

Lists and types of lists


This section likely covers the concept of HTML lists and
the different ways to create them. HTML lists are used to
present information in an ordered (numbered) or
unordered (bulleted) way. There are different list tags like
<ul> for unordered lists, <ol> for ordered lists, and <li> for
list items. The notes might delve into nested lists and
styling them with CSS.

Lists and types of lists with code:


Unordered List:
HTML
<!DOCTYPE html>
<html>
<body>
<h2>My Hobbies</h2>
<ul>
<li>Reading</li>
<li>Coding</li>
<li>Playing Games</li>
< /u l >
</body>
</html>

Ordered List:
HTML
<!DOCTYPE html>
<html>
<body>
<h2>Steps to Make Coffee</h2>
<ol>
<li>Boil water</li>
<li>Add coffee grounds to filter</li>
<li>Pour hot water over grounds</li>
<li>Enjoy your coffee!</li>
</ol>
</body>
</html>
2. CSS and types of CSS
This section explores Cascading Style Sheets (CSS), a
language that controls the presentation of a web page.
The notes might cover different types of CSS like inline
styles, embedded styles, and linked stylesheets. It
could also explain basic CSS properties like font size,
color, background, and margins.
Inline Styles:
HTML
<!DOCTYPE html>
<html>
<body>
<h1 style="color: blue; font-size: 2em;">This is a
heading</h1>
</body>
</html>
Embedded Styles:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: red;
font-size: 3em;
}
</style>
</head>
<body>
<h1>This is another heading</h1>
</body>
</html>
External Stylesheet:
Create a separate CSS file (e.g., style.css) with styles:
CSS
h1 {
color: green;
font-size: 1.5em;
}
Then link it in your HTML:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>
3. Event models (without code, as it deals with
Javascript behavior)
Here are some examples of event models commonly
used in web development:

1.Click Events: This is a fundamental event that occurs


when a user clicks on an element on a webpage.

Here's an example using Javascript:


HTML
<button id="myButton">Click Me</button>

<script>
const button
=document.getElementById("myButton");
button.addEventListener("click", function() {
alert("You clicked the button!");
});
</script>

2.Form Submission Events: When a user submits a


form on a webpage, a submit event is triggered. This
allows you to capture and process the form data on
the server-side or validate it with Javascript before
submission.
Here's an example:
HTML
<form id="myForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<button type="submit">Submit</button>
</form>
<script>
const form = document.getElementById("myForm");
form.addEventListener("submit", function(event) {
event.preventDefault(); // Prevent default form
submission behavior
const name =
document.getElementById("name").value;
// Process the form data (e.g., send it to the server)
alert("Hello, " + name);
});
</script>
3.Keyboard Events: These events capture user
interactions with the keyboard, like pressing a key or
holding it down. This allows you to create keyboard
shortcuts or interactive elements that respond to
specific key presses.

Here's an example:

HTML

<input type="text" id="myInput">

<script>

const input = document.getElementById("myInput");

input.addEventListener("keydown", function(event) {

if (event.key === "Enter ") {

alert("You pressed Enter!");

}
});

</script>

4.Mouse Events: These events track mouse


movements and interactions with the webpage,
including clicks, hovering, and dragging. They are
useful for creating interactive elements and user
interfaces.

Here's an example:

HTML

<div id="myBox"></div>

<script>

const box = document.getElementById("myBox");

box.addEventListener("mouseover ", function() {

box.style.backgroundColor = "lightblue";

});

box.addEventListener("mouseout", function() {

box.style.backgroundColor = " white";

});

</script>

4. Filters and transactions (without code due


to ambiguity)
As mentioned earlier, the exact meaning of filters and
transactions depends on the context. It could refer to:

CSS filters: These are visual effects applied to


elements using CSS properties like filter: blur().
Database filtering: This involves selecting specific
data from a database based on certain criteria. (This
wouldn't involve code in the HTML or CSS file itself)
Database transactions: These ensure data
consistency when performing multiple database
operations. (This wouldn't involve code in the HTML
or CSS file itself

Example (Simplified):

1. Imagine a shopping cart scenario where a user adds


an item to their cart and their account balance
needs to be updated accordingly.
2. Javascript on the web application initiates the
actions by sending data to the server-side script.
3. The server-side script starts a database transaction.
4. It performs two operations within the transaction:
Inserts the item into the user 's cart table.
Deducts the item's price from the user 's balance
table.
5. If both operations succeed, the transaction
commits, and the changes are permanent.
6. If any operation fails (e.g., insufficient balance), the
entire transaction rolls back, undoing any changes
made so far, ensuring data integrity.

You might also like