Scribd
Upload
6 views

Web Ass1

HTTP and HTTPS are protocols for transmitting data. HTTP transmits data without encryption, making it less secure, while HTTPS transmits encrypted data using SSL/TLS to securely transmit sensitive information like credit card numbers. HTTPS is more secure but experiences slower page loading speeds compared to HTTP due to the additional encryption processing required. Google gives preference to HTTPS secure websites over HTTP websites.

Uploaded by

Rakshitha Manjunath
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
6 views

Web Ass1

HTTP and HTTPS are protocols for transmitting data. HTTP transmits data without encryption, making it less secure, while HTTPS transmits encrypted data using SSL/TLS to securely transmit sensitive information like credit card numbers. HTTPS is more secure but experiences slower page loading speeds compared to HTTP due to the additional encryption processing required. Google gives preference to HTTPS secure websites over HTTP websites.

Uploaded by

Rakshitha Manjunath
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 16

HTTP HTTPS

The full form of HTTP is the The full form of HTTPS is Hypertext Transfer
Hypertext Transfer Protocol. Protocol Secure.

It is written in the address bar as It is written in the address bar as https://.


http://.

The HTTP transmits the data over The HTTPS transmits the data over port number
port number 80. 443.

It is unsecured as the plain text is It is secure as it sends the encrypted data which
sent, which can be accessible by hackers cannot understand.
the hackers.

It is mainly used for those It is a secure protocol, so it is used for those


websites that provide information websites that require to transmit the bank account
like blog writing. details or credit card numbers.

It is an application layer protocol. It is a transport layer protocol.

It does not use SSL. It uses SSL that provides the encryption of the
data.

Google does not give the Google gives preferences to the HTTPS as
preference to the HTTP websites. HTTPS websites are secure websites.

The page loading speed is fast. The page loading speed is slow as compared to
HTTP because of the additional feature that it
supports, i.e., security.
HTML Lists
HTML Lists are used to specify lists of information. All lists may contain one or more list
elements. There are three different types of HTML lists:
1. Ordered List or Numbered List (ol)
2. Unordered List or Bulleted List (ul)
3. Description List or Definition List (dl)
HTML Ordered List
In the ordered HTML lists, all the list 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 start with <li>
tag.
<ol>
<li>Aries</li>
<li>Bingo</li>
<li>Leo</li>
<li>Oracle</li>
</ol>
Output:
1. Aries
2. Bingo
3. Leo
4. Oracle
The type Attribute.
You can use type attribute for <ul> tag to specify the type of bullet you like. By default, it
is a disc. Following are the possible options.
<ul type = "square">
<ul type = "disc">
<ul type = "circle">
Example:
<ul type = "square">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
Output:
 Beetroot
 Ginger
 Potato
 Radish
HTML Unordered List
In HTML Unordered list, all the list items are marked with bullets. It is also known as
bulleted list also. The Unordered list starts with <ul> tag and list items start with the <li> tag.
<ul>
<li>Aries</li>
<li>Bingo</li>
<li>Leo</li>
<li>Oracle</li>
</ul>
Output:
o Aries
o Bingo
o Leo
o Oracle
HTML Text Formatting Elements

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


HTML Table - Colspan
To make a cell span over multiple columns, use the colspan attribute:
Example:
<table>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>43</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>57</td>
</tr>
</table>

HTML Table - Rowspan


To make a cell span over multiple rows, use the rowspan attribute:
Example:
<table>
<tr>
<th>Name</th>
<td>Jill</td>
</tr>
<tr>
<th rowspan="2">Phone</th>
<td>555-1234</td>
</tr>
<tr>
<td>555-8745</td>
</tr>
</table>

HTML Table - Cell Padding


Cell padding is the space between the cell edges and the cell content.
By default, the padding is set to 0.
HTML Table - Cell Spacing
Cell spacing is the space between each cell. By default, the space is set to 2 pixels.
<!DOCTYPE html>
<html>
<head>
<style>
table {
border;
width: 50%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
</style>
</head>
<body>

<table>
<tr>
<th colspan="2" rowspan="2">merged cell</th>
<th>Column 3</th>
</tr>
<tr>

<td>Column 3</td>

</tr>

<tr>

<td>Column 1</td>

<td>Column 2</td>
<td>column 3</td>

</tr>

</table>

</body>

</html>

<body>

<h1>numbers</h1>

<ol>

<li>Ice Cream</li>

<li>Chocoba</li>

<li>Cold Coffee</li>

</ol>

<h1>ALPHABET</h1>

<ol type="A">

<li> Sugar</li>

<li>Salt</li>

<li>Sour</li>

</ol>

<h1>alphabet</h1>

<ol type="a">

<li>car</li>

<li>card</li>

<li>cash</li>

</ol>
<h1>Roman Numerals</h1>

<ol type="I">

<li>Aeroplane</li>

<li>Bus</li>

<li>Ship</li>

</ol>

<h1>Small Roman Numerals</h1>

<ol type="i">

<li>Air</li>

<li>Water</li>

<li>Fire</li>

</ol>

Image description

<

<html lang="en">

<body>

<h1>Image Description Example</h1>

<img src="C:\Users\raksh\OneDrive\Pictures\Screenshots\xyz.png" alt="Image Description" width=60% height=60%>

<p>

This is Marianne.

</p>

</body>

</html>
Selector Forms:
The selector can have variety of forms:
1. Simple selector form
2. Class selector
3. Id selector
4. Contexual Selectors
5. Universal selector
6. Pseudo classes
1.Simple selector forms
• The selector is a tag name or a list of tag names, separated by commas
• Consider the following examples, in which the property is font-size and the property value
is a number of points :
• h1, h3 { font-size: 24pt ;}
• h2 { font-size: 20pt ;}
2.Class Selector
• Used to allow different occurrences of the same tag to use different style specifications
• A style class has a name, which is attached to a tag name
p.normal {property/value list}
p.warning{property/value list}
• The class you want on a particular occurrence of a tag is specified with the class attribute of
the tag
• For example,
<p class = "normal">
A paragraph of text that we want to be presented in ‘normal’
presentation style</p>
<p class = "warning">
A paragraph of text that is a warning to the reader ,which should be
presented in an especially noticeable style.
</p>
CLASSES
• HTML and XHTML require each id be unique– therefore an id
value can only be used once in a document.
• You can mark a group of elements with a common identifier
using the class attribute.
3.id Selectors
• An id selector allow the application of a style to one specific element.
• General form:
#specific-id {property-value list}
Example:
#section14 {font-size: 20}
Specifies a font size of 20 points to the element
<h2 id = “section14”>Hello</h2>
4.Contexual selectors
• Selectors can also specify that the style should apply only to elements in certain positions in
the
document .This is done by listing the element hierarchy in the selector.
Eg: body b em {font-size: 24pt ;}
• In the eg, selector applies its style to the content of emphasis elements that are descendants
of bold elements in the body of the document.
It is also called as descendant selectors. It will not apply to emphasis element not descendant
of bold face element.
5.Universal Selectors
• The universal selector denoted by an asterisk(*). It applies its style to all elements in the
document
For Eg:
* {color : red}
Makes all elements in the document red.
6.Pseudo Classes
• Pseudo classes are styles that apply when something happens, rather than because the target
element(tag) simply exists. Names begin with colons
The style of hover pseudo classes apply when the mouse cursor is over the element.The style
of focus pseudo classes apply when an element has focus (mouse cursor over the element and
click the left mouse button)
Example:
• Input:hover {color: red;}
Pseudo Class Example
<!-- pseudo.html -->
<!DOCYPE html>
<html lang=”en”>
<head>
<title>Pseudoclasses</title>
<meta charset=”utf-8” />
<style type = "text/css">
input:hover {color: red;}
input:focus {color: green;}
</style>
</head>
<body>
<form action = "">
<p>
Your name:
<input type = "text" />
</p>
</form>
</body>
</html>
form
<!DOCTYPE html>

<html>

<head>

<title>Personal Details Form</title>

</head>

<body>

<h2>Personal Details Form</h2>

<form action="submit.php" method="post" enctype="multipart/form-data">

<label for="name">Name:</label>

<input type="text" id="name" name="name" required><br><br>

<label for="password">Password:</label>

<input type="password" id="password" name="password" required><br><br>

<label for="email">Email:</label>

<input type="email" id="email" name="email" required><br><br>

<label>Gender:</label>

<input type="radio" id="male" name="gender" value="male">

<label for="male">Male</label>

<input type="radio" id="female" name="gender" value="female">

<label for="female">Female</label><br><br>

<label for="contact">Contact:</label>

<input type="text" id="contact" name="contact"><br><br>

<label for="qualifications">Educational Qualifications:</label>

<select id="qualifications" name="qualifications">

<option value="none">Select</option>

<option value="engineering">Engineering</option>

<option value="science">Science</option>

<option value="arts">Arts</option>

</select><br><br>
<label for="branches">Branch:</label>

<select id="branches" name="branches" style="display: none;">

<option value="none">Select</option>

</select><br><br>

<label>Hobbies:</label><br>

<input type="checkbox" id="chess" name="hobbies[]" value="playing chess">

<label for="chess">Playing Chess</label><br>

<input type="checkbox" id="books" name="hobbies[]" value="reading books">

<label for="books">Reading Books</label><br><br>

<label for="address">Address:</label>

<textarea id="address" name="address"></textarea><br><br>

<label for="resume">Attach Resume:</label>

<input type="file" id="resume" name="resume"><br><br>

<input type="submit" value="Submit">

</form>

<script>

document.getElementById("qualifications").addEventListener("change", function () {

var degree = this.value;

var branchesSelect = document.getElementById("branches");

var branches = branchesSelect.getElementsByTagName("option");

// Hide all branches

for (var i = 0; i < branches.length; i++) {

branches[i].style.display = "none";

// Show branches based on the selected degree

if (degree === "engineering") {

branchesSelect.style.display = "block";

branchesSelect.options[1].style.display = "block"; // Show Engineering branches


} else if (degree === "science") {

branchesSelect.style.display = "block";

branchesSelect.options[2].style.display = "block"; // Show Science branches

} else if (degree === "arts") {

branchesSelect.style.display = "block";

branchesSelect.options[3].style.display = "block"; // Show Arts branches

} else {

branchesSelect.style.display = "none"; // Hide the branches select if "Select" is chosen

});

</script>

</body>

</html>

You might also like