Scribd
Upload
4 views

WEB

Uploaded by

nimrtakhi2004
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views

WEB

Uploaded by

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

WEB

TECHNOLOGIES

INDEX
1.
HTML

HTML stands for Hyper Text Markup Language. It is the standard


language used to create and design web pages on the internet. It was
introduced by Tim Berners-Lee in 1991 at CERN as a simple markup language.
HTML is a combination of Hypertext and Markup language. Hypertext defines
the link between the web pages and Markup language defines the text
document within the tag.
Basic Structure of an HTML Document:
<!DOCTYPE html>
<html>
<head>
<title>Title of the Document</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Common HTML tags across different categories:


1. Text Formatting Tags
 <h1> to <h6> : Headings of varying levels (from most important `<h1>`
to least important `<h6>`).
 <p> : Paragraph.
 <u> : Underlined text (though its use is discouraged for semantic
reasons).
2. List Tags
 <ul> : Unordered list.
 <ol> : Ordered list.
 <li> : List item.
Example:
<ul>
<li>Unordered List Item 1</li>
<li>Unordered List Item 2</li>
</ul>
<ol>
<li>Ordered List Item 1</li>
<li>Ordered List Item 2</li>
</ol>

3. Link Tags
 <a> : Anchor, used for hyperlinks.
 Example:
 <a href="https://www.example.com">Visit Example.com</a>
 <link> : Defines the relationship between a document and an external
resource (most commonly used to
 link to CSS stylesheets).
Example:
<link rel="stylesheet" href="styles.css">

4. Image Tag
 <img> : Image.
Example:
<img src="image.jpg" alt="Description of the image">
5. Table Tags
 <table> : Defines a table.
 <tr> : Defines a row in a table.
 <th> : Defines a header cell in a table.
 <td> : Defines a cell in a table.
Example:
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>

6. Form Tags
 <form> : Defines an HTML form for user input.
 <input> : Input fields (text, checkbox, radio buttons, etc.).
 <textarea> : Text area for multi-line text input.
 <button>`: Button.
 <select>`: Dropdown list.
 <option>`: Options within a select element.
 <label>`: Defines a label for an input element.
Example:
<form action="/submit" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br>
<label for="message">Message:</label><br>
<textarea id="message" name="message"></textarea><br>
<input type="checkbox" id="agree" name="agree">
<label for="agree">I agree to the terms and conditions.</label><br>
<input type="submit" value="Submit">
</form>

7. Document Structure Tags


 <html> : Root element of an HTML page.
 <head> : Container for metadata (title, scripts, stylesheets, etc.).
 <title> : Title of the document.
 <body> : Container for the content of the document.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Title</title>
</head>
<body>
<h1>This is the main content</h1>
<p>Some text...</p>
</body>
</html>

8. Sectioning Tags
 <header> : Represents introductory content or a group of navigational
links.
 <nav> : Defines a section with navigation links.
 <main> : Represents the main content of the document.
 <section> : Defines a section in a document.
 <article> : Represents an independent piece of content that can be
syndicated.
 <aside> : Represents content aside from the content it is placed in (like
sidebars).
 <footer> : Defines a footer for a document or section.
Example:
<header>
<h1>Website Header</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Article Title</h2>
<p>Article content...</p>
</article>
<aside>
<h3>Sidebar</h3>
<p>Content for the sidebar...</p>
</aside>
</main>
<footer>
<p>&copy; 2024 Company Name. All rights reserved.</p>
</footer>

9. Interactive Tags
 <button> : Button.
 <input type="button"> : Button.
 <input type="checkbox"> : Checkbox.
 <input type="radio"> : Radio button.
 <select> : Dropdown list.
 <option> : Options within a select element.
 <textarea> : Text area for multi-line text input.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Tags Example</title>
</head>
<body>
<form action="/submit" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br>
<label for="message">Message:</label><br>
<textarea id="message" name="message"></textarea><br>
<input type="checkbox" id="agree" name="agree">
<label for="agree">I agree to the terms and conditions.</label><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

2.
Rowspan and Colspan in HTML Table

In HTML, colspan and rowspan are attributes used within table elements
(<table>, <td>, and <th>) to specify how many columns or rows a table cell
should span, respectively.
Colspan
The colspan attribute specifies the number of columns a <td> or <th> element
should span. For example:
<table border="1">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td colspan="2">Spanning Cell</td>
</tr>
</table>

Rowspan
The rowspan attribute specifies the number of rows a <td> or <th> element
should span. For example:
<table border="1">
<tr>
<td>Cell 1</td>
<td rowspan="2">Spanning Cell</td>
</tr>
<tr>
<td>Cell 2</td>
</tr>
</table>

A table of student information using colspan and rowspan :-


<!DOCTYPE html>
<html>
<head>
<title>Student Information</title>
</head>
<body>

<h2>Student Information</h2>

<table border="1" cellpadding="5" cellspacing="0">


<tr>
<th rowspan="2">Student ID</th>
<th colspan="2">Personal Information</th>
<th rowspan="2">Grade</th>
</tr>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>101</td>
<td>John Doe</td>
<td>20</td>
<td>A</td>
</tr>
<tr>
<td>102</td>
<td rowspan="2">Jane Doe</td>
<td>22</td>
<td>B</td>
</tr>
<tr>
<td>103</td>
<td>21</td>
<td>C</td>
</tr>
</table>

</body>
</html>

Output :-

3.
CSS

CSS, which stands for Cascading Style Sheets, is a stylesheet


language used to describe the presentation and styling of HTML (HyperText
Markup Language) and XML (eXtensible Markup Language) documents. It
allows web developers to control the appearance, layout, and formatting of
web pages, making them visually appealing and user-friendly.

Key Features of CSS:


 Selectors: CSS uses selectors to target specific HTML elements on a web
page. Selectors can target elements based on their type, class, ID,
attributes, and relationships with other elements.
 Properties and Values: CSS properties define the styling attributes of
selected elements, and values specify the settings for those properties.
 Selectors Hierarchies: CSS allows for the definition of complex selectors
that target nested or specific relationships between elements.
 Box Model: CSS treats each HTML element as a rectangular box,
comprising content, padding, borders, and margins. Developers can
control the dimensions, spacing, and positioning of these boxes using
CSS properties.
 Layout and Positioning: CSS provides various layout and positioning
techniques to create responsive and flexible web page layouts. This
includes using floats, flexbox, grid layouts, and positioning properties
(relative, absolute, fixed).
 Media Queries: With media queries, CSS can adapt the styling of web
pages based on different device characteristics like screen size,
resolution, orientation, and media features (e.g., print, screen,
handheld).

Internal Styles (Embedded Styles):


Internal styles are defined within the <style> element in the <head> section of
an HTML document.
They apply to the entire document or specific sections defined by selectors.
Example:
<head> <style> p { color: red; font-size: 18px; } </style> </head>

External Styles (Linked Stylesheets):


External styles are defined in separate CSS files and linked to the HTML
document using the <link>
element.
They allow for the separation of style from content, making it easier to manage
and update styles across
multiple pages.
Example:
<head> <link rel="stylesheet" type="text/css" href="styles.css"> </head>

4.
JavaScript

JavaScript is a lightweight, interpreted programming language with


first-class functions. It's known for its dynamic, prototype-based object-
oriented nature and is designed to add interactivity and dynamic behavior to
web pages.

Features:
 Client-Side Scripting: JavaScript code runs on the client's web browser,
enabling dynamic manipulation of HTML and CSS.
 Event-Driven Programming: JavaScript allows developers to respond to
user actions and events such as clicks, form submissions, and mouse
movements.
 Asynchronous Programming: JavaScript supports asynchronous
operations using callbacks, promises, and async/await, facilitating non-
blocking I/O operations.
 DOM Manipulation: JavaScript can interact with the Document Object
Model (DOM) of a web page, allowing developers to dynamically modify
page content and structure.
 Cross-Platform Compatibility: JavaScript is supported by all major web
browsers and can be executed on various operating systems and devices.
 Extensibility: JavaScript can be extended through libraries and
frameworks such as jQuery, React, Angular, and Vue.js, which provide
additional functionalities and simplify development.
Applications:
 Web Development: JavaScript is widely used to create interactive and
dynamic web applications, including single-page applications (SPAs) and
progressive web apps (PWAs).
 Game Development: JavaScript, along with HTML5 canvas and WebGL, is
used to develop browser-based games and interactive experiences.
 Server-Side Development: With Node.js, JavaScript can be used for
server-side programming, enabling fullstack JavaScript development.
 Mobile App Development: JavaScript frameworks like React Native and
Ionic allow developers to build cross-platform mobile apps using web
technologies.
 Desktop App Development: Frameworks like Electron enable developers
to create desktop applications using JavaScript, HTML, and CSS.
 Data Visualization: JavaScript libraries like D3.js and Chart.js are used to
create interactive data visualizations and charts on the web.
5.
Javascript from

HTML CODE FOR FORM:


<!DOCTYPE html>
<html>
<head>
<title>Styled Form</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h2>Styled Form</h2>
<form id="myForm">
<div class="form-group">
<label for="name">Name:</label><br>
<input type="text" id="name" name="name">
</div>
<div class="form-group">
<label for="email">Email:</label><br>
<input type="email" id="email" name="email">
</div>
<div class="form-group">
<label for="message">Message:</label><br>
<textarea id="message" name="message"></textarea>
</div>
<input type="submit" value="Submit">
</form>
<div id="messageBox"></div>
<script src="script.js"></script>
</body>
</html>

CSS CODE FOR STYLING:


/* Reset default margin and padding */
*{
margin: 0;
padding: 0;
}
17
/* Style form container */
.form-group {
margin-bottom: 20px;
}
/* Style form labels */
label {
display: block; /* Display labels as block elements */
font-weight: bold;
margin-bottom: 5px;
}
/* Style form inputs */
input[type="text"],
input[type="email"],
textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box; /* Include padding and border in element's total width and
height */
font-size: 16px;
}
/* Style submit button */
input[type="submit"] {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
/* Change button background color on hover */
input[type="submit"]:hover {
background-color: #45a049;
}

JAVASCRIPT CODE:
document.getElementById("myForm").addEventListener("submit", function(event) {
// Prevent form submission
event.preventDefault();
// Get form values
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var message = document.getElementById("message").value;
// Validate form inputs (simple validation)
if (name === "" || email === "" || message === "") {
document.getElementById("messageBox").innerHTML = "Please fill in all fields.";
return;
}
// Submit form data (simulated)
document.getElementById("messageBox").innerHTML = "Name: " + name + "<br>Email: " +
email + "<br>Message: " + message;
});

6.
XML

XML, or Extensible Markup Language, is a markup language similar to


HTML but designed to be more flexible and extensible. XML is commonly used
for storing and transporting data, as it allows users to define their own tags and
structures, making it suitable for representing a wide variety of information.

- Tags : Like HTML, XML uses tags to define elements. However, in XML, tags
are user-defined and can be named anything.
- Attributes : XML elements can have attributes just like HTML elements,
providing additional information about the element.
- Nesting : XML elements can be nested within each other to represent
hierarchical data structures.
- Well-formedness : XML documents must adhere to certain syntax rules to be
considered well-formed, such as having a single root element and properly
nested elements.
Here's a simple example of an XML document:
```xml
<bookstore>
<book category="fiction">
<title lang="en">Harry Potter</title>
<author>J.K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
<book category="non-fiction">
20
<title lang="en">The Elements of Style</title>
<author>William Strunk Jr.</author>
<year>1918</year>
<price>9.95</price>
</book>
</bookstore>
```
In this example, `<bookstore>` is the root element, and it contains two
`<book>` elements, each representing information about a book. Each `<book>`
element has child elements like `<title>`, `<author>`, `<year>`, and `<price>`, as
well as attributes like `category` and `lang`.
XML can interact with HTML:
1. Displaying XML data in HTML:
You can use JavaScript or server-side languages like PHP to fetch XML data and
dynamically generate
HTML content to display it. Here's a simple example using JavaScript:
```html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>XML to HTML</title>
</head>
<body>
<div id="books"></div>
<script>
// XML data
var xmlData = `
<bookstore>
<book category="fiction">
<title lang="en">Harry Potter</title>
<author>J.K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
<book category="non-fiction">
<title lang="en">The Elements of Style</title>
<author>William Strunk Jr.</author>
<year>1918</year>
<price>9.95</price>
</book>
</bookstore>`;
// Parse XML string to XML document
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(xmlData, "text/xml");
// Generate HTML content from XML
var booksDiv = document.getElementById("books");
var books = xmlDoc.getElementsByTagName("book");
for (var i = 0; i < books.length; i++) {
var book = books[i];
var title = book.getElementsByTagName("title")[0].textContent;
var author = book.getElementsByTagName("author")[0].textContent;
var year = book.getElementsByTagName("year")[0].textContent;
var price = book.getElementsByTagName("price")[0].textContent;
var bookInfo = `
<div>
<h2>${title}</h2>
<p>Author: ${author}</p>
<p>Year: ${year}</p>
<p>Price: ${price}</p>
</div>`;
booksDiv.innerHTML += bookInfo;
}
</script>
</body>
</html>
7.
PHP

PHP, which stands for Hypertext Preprocessor, is a widely-used open-


source server-side scripting language. It is primarily used for web development
and can be embedded into HTML. PHP scripts are executed on the server,
generating dynamic web page content. PHP code can perform tasks such as
collecting form data, interacting with databases, managing sessions, and
generating dynamic page content. PHP was originally created by Danish-
Canadian programmer Rasmus Lerdorf in 1994 and has since evolved into a
powerful tool for web development. It's known for its simplicity, flexibility, and
wide support across different web servers and operating systems. Many
popular content management systems (CMS) such as WordPress, Joomla, and
Drupal are built using PHP, making it one of the most important languages for
web development.
PHP code example that demonstrates how to output "Hello, World!" using
PHP:
<?php
echo "Hello, World!";
?>

Conditional statements in PHP


 if statement
<?php
$age = 25;
if ($age >= 18) {
echo "You are an adult.";
} else {
echo "You are not an adult.";
}
echo "<br>";
?>

 if-elseif-else statement
<?php
$grade = 85;
if ($grade >= 90) {
echo "You got an A.";
} elseif ($grade >= 80) {
echo "You got a B.";
} elseif ($grade >= 70) {
echo "You got a C.";
} else {
echo "You need to improve your grade.";
}
echo "<br>";
?>

 Switch statement
<?php
$day = "Monday";
switch ($day) {
32
case "Monday":
echo "Today is Monday.";
break;
case "Tuesday":
echo "Today is Tuesday.";
break;
case "Wednesday":
echo "Today is Wednesday.";
break;
case "Thursday":
echo "Today is Thursday.";
break;
case "Friday":
echo "Today is Friday.";
break;
default:
echo "It's a weekend day.";
}
?>

Loops in PHP

 for Loop
for (initialization; condition; increment/decrement)
{ // code to be executed }
The for loop executes a block of code a specified number of times.
Example:
phpCopy code
for ($i = 0; $i < 5; $i++)
{ echo "The number is: $i <br>"; }
 While Loop
while (condition)
{ // code to be executed // increment/decrement }
The while loop executes a block of code as long as the specified
condition is true.
Example:
$num = 1;
while ($num <= 5)
{ echo "The number is: $num <br>"; $num++; }
3. do-while Loop:
do { // code to be executed // increment/decrement
}while (condition);
The do-while loop is similar to the while loop, but the condition is evaluated after
executing the block of code,
meaning the code inside the loop will always execute at least once.
Example:
phpCopy code
$num = 1;
do
{
echo "The number is: $num <br>"; $num++;
} while ($num <= 5);

 foreach Loop
foreach ($array as $value)
{ // code to be executed }
The foreach loop is used to loop through arrays. It iterates over each
key/value pair in an array.
Example:
$colors = array("Red", "Green", "Blue");
foreach ($colors as $color) {
echo "$color <br>";
}

8.
Forms in PHP

Definition: A PHP form is an HTML element enhanced with PHP


scriptingcapabilities to collect and process user data.
Components:
 HTML Form Elements: Inputs, selects, checkboxes, radio buttons, text
areas, and buttons define the structure of the form.
 Action Attribute: Specifies the URL where the form data is sent for
processing upon submission.
 Method Attribute: Defines the HTTP method used to submit the form
data (GET or POST).
 PHP Script: Receives and processes the form data on the server-side,
typically using the $_GET or $_POST superglobal arrays.
 Validation and Sanitization: PHP code can validate and sanitize form
inputs to ensure data integrity and security.
 Data Processing: PHP scripts can perform various actions with the
submitted form data, such as storing it in a database, sending emails, or
generating dynamic content.
Example:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/
Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
<title>Get and post!</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Get/Post</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
datatarget="#navbarSupportedContent" aria-controls="navbarSupportedContent"
ariaexpanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/cwhphp/21_Get_Post.php">Home <span
class="sronly">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" ariadisabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search"
arialabel="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST'){
$email = $_POST['email'];
$password = $_POST['pass'];
echo '<div class="alert alert-success alert-dismissible fade show" role="alert">
<strong>Success!</strong> Your email ' . $email.' and password '. $password.' has
been submitted successfully!
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>';
// Submit these to a database
}
?>
<div class="container mt-3">
<h1>Please enter your email and password</h1>
<form action="/tarvish/form.php" method="post">
<div class="form-group">
<label for="email">Email address</label>
<input type="email" name="email" class="form-control" id="email"
ariadescribedby="emailHelp">
<small id="emailHelp" class="form-text text-muted">We'll never share your email
with anyone else.</small>
</div>
<div class="form-group">
<label for="pass">Password</label>
<input type="password" class="form-control" id="pass" name="pass">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-
J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-
Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-
wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
</body>
</html>
Connect MySQL database using PHP:-
1.MySQL extension
example of how to connect to a MySQL database using mysqli:
<?php
// MySQL server configuration
$servername = "localhost"; // or your server IP address
$username = "your_username"; // MySQL username
$password = "your_password"; // MySQL password
$database = "your_database"; // MySQL database name
// Create connection
$conn = new mysqli($servername, $username, $password, $database);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
echo "Connected successfully";
// Close connection
$conn->close();
?>

You might also like