Scribd
Upload
3 views35 pages

Web-tech-2

This document is a lab report on Web Technology submitted by Shishir Thapa to Sujan Shrestha at Tribhuvan University. It covers various aspects of CSS, including types of CSS, color settings, background properties, borders, the box model, display properties, and navigation bars, along with examples of PHP basics such as variables, data types, and control structures. The conclusion emphasizes the importance of CSS in creating responsive web layouts and the role of PHP in generating dynamic content.

Uploaded by

Bijay Kc
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
3 views35 pages

Web-tech-2

This document is a lab report on Web Technology submitted by Shishir Thapa to Sujan Shrestha at Tribhuvan University. It covers various aspects of CSS, including types of CSS, color settings, background properties, borders, the box model, display properties, and navigation bars, along with examples of PHP basics such as variables, data types, and control structures. The conclusion emphasizes the importance of CSS in creating responsive web layouts and the role of PHP in generating dynamic content.

Uploaded by

Bijay Kc
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/ 35

TRIBHUVAN UNIVERSITY

Faculty of Humanities and Social Science


G.P. Koirala Memorial (Community) College
Sifal, Kathmandu
A Lab
Report
On

Subject: Web Technology

Submitted By: Shishir Thapa Submitted To: Sujan Shrestha

Roll No.: 26 Submission Date: 2025/04/19

Semester: 3rd sem Signature:


Introduction to CSS
CSS (Cascading Style Sheets) is a styling language used to design web pages by
controlling the layout, colors, fonts, and overall appearance of HTML elements.
It allows developers to separate content from design, making websites more
visually appealing, responsive, and easier to maintain.

Types of CSS
 Internal CSS
Input:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internal CSS Example</title>
<style>
body {
background-color: lightblue;
font-family: Arial, sans-serif;
}
h1 {
color: darkblue;
text-align: center;
}
p{
font-size: 18px;
color: darkslategray;
}
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is an example of using internal CSS to style a webpage.</p>
</body>
</html>

Output:

 External CSS
Input:
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>External CSS Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<style>
</style>
<body>
<h1>Welcome to My Website</h1>
<p>This is an example of using external CSS. </p>
</body>
</html>
Style.css
Body{
background-color: aqua blue;
font-family: Arial, sans-serif;
}
h1 {
color: darkblue;
text-align: center;
}
p{
font-size: 18px;
color: darkslategray;
}

Output:
 Incline CSS
Input:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline CSS Example</title>
</head>
<body>
<h1 style="color: darkblue; text-align: center;">Welcome to My Website</h1>
<p style="font-size: 18px; color: darkslategray;">This is an example of using inline CSS to
style a webpage.</p>
</body>
</html>
Output:

CSS Color
CSS allows you to set colors for text, backgrounds, borders, and more using
different color formats.
Named Color
Hexadecimal Color (#RRGGBB)
RGB Color
Input:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Colors</title>
<style>
body {
background-color: #10f577;
}
h1 {
color: rgb(255, 100, 50);
}
p{
color: hsl(210, 80%, 40%);
}
</style>
</head>
<body>
<h1>Welcome to CSS Colors</h1>
<p>Colors make your website visually appealing!</p>
</body>
</html>

Output:
CSS Background
Background-color,background-image, background-repeat, background-attachment, and
background-position
Input:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Background Properties</title>
<style>
body {
background-color: lightgray;
background-image: url("background.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
}
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This page demonstrates various background properties in CSS.</p>
</body>
</html>

Output:

CSS border:
border-style, border-color, border-width, and shorthand property
Input:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Borders</title>
<style>
div {
width: 300px;
padding: 20px;
text-align: center;
border: 5px dashed red;
}
</style>
</head>
<body>
<div>This is a box with a dashed red border.</div>
</body>
</html>
Output:

Box model:
css margin, css padding, margin and padding shorthand property
Input:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Box Model</title>
<style>
.box {
width: 300px;
background-color: lightblue;
padding: 20px;
margin: 30px;
border: 5px solid blue;
}
</style>
</head>
<body>
<div class="box">This is a box with margin, padding, and a border.</div>
</body>
</html>

Output:

CSS display
inline, block, flex, grid
Input:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Display Example</title>
<style>
.inline-example {
display: inline;
color: red;
}
.block-example {
display: block;
background-color: lightblue;
margin: 10px 0;
}
.flex-container {
display: flex;
justify-content: space-between;
}
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
}
</style>
</head>
<body>
<span class="inline-example">This is inline</span>
<div class="block-example">This is block</div>
<div class="flex-container">
<div class="block-example">Flex Item 1</div>
<div class="block-example">Flex Item 2</div>
<div class="block-example">Flex Item 3</div>
</div>
<div class="grid-container">
<div class="block-example">Grid Item 1</div>
<div class="block-example">Grid Item 2</div>
<div class="block-example">Grid Item 3</div>
</div>
</body>
</html>

Output:

CSS overflow, float


Input:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Float Example</title>
<style>
img {
float: left;
margin-right: 15px;
}
p{
text-align: justify;
}
</style>
</head>
<body>
<img src="https://via.placeholder.com/150" alt="Image">
<p>This is an example of using the float property in CSS. The image is floated to the left,
and the text wraps around it. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
</body>
</html>

Output:

CSS Navbar:
Horizontal

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontal Navbar</title>
<style>
/* Navbar container */
.navbar {
background-color: #333;
overflow: hidden;
display: flex;
justify-content: center; /* Centers navbar items horizontally */
}

/* Navbar links */
.navbar a {
color: white;
padding: 14px 20px;
text-align: center;
text-decoration: none;
display: block; /* Makes each link block-level */
}

/* Hover effect */
.navbar a:hover {
background-color: #ddd;
color: black;
}
</style>
</head>
<body>
<div class="navbar">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#contact">Contact</a>
</div>
</body>
</html>

Vertical
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Navbar</title>
<style>
/* Navbar container */
.navbar {
width: 200px;
background-color: #333;
height: 100vh; /* Full height of the screen */
display: flex;
flex-direction: column; /* Stack items vertically */
}

/* Navbar links */
.navbar a {
color: white;
padding: 14px 20px;
text-align: center;
text-decoration: none;
display: block; /* Makes each link block-level */
}

/* Hover effect */
.navbar a:hover {
background-color: #ddd;
color: black;
}
</style>
</head>
<body>
<div class="navbar">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#contact">Contact</a>
</div>
</body>
</html>
Conclusion
In conclusion, this CSS project highlights the essential techniques for building well-
structured and responsive web layouts. By using CSS Grid and Flexbox, we were able to
create a clean and organized design, including elements like a header, navbar, sidebars, main
content, and footer. The project also focused on responsive design, ensuring the layout adapts
seamlessly across different screen sizes. Overall, this project enhanced our understanding of
CSS and its role in creating modern, user-friendly websites.
PHP:

a. “Hello World” print with php tag


<?php
// echo can take multiple parameters
echo "Hello", " ", "World", "!";

// print can only take one argument


print "Hello World";

?>
b. Difference between echo and print
ans:

echo print
Doesn't return anything Always returns 1
Can take multiple parameters Can only take one argument
Slightly faster Slightly slower

c. PHP variables, datatypes (Int, string, float, boolean,array)


Variables in PHP:
<?php
$variableName = "value"; // Basic variable declaration
$_privateVar = 42; // Valid variable name
$user1 = "John"; // Valid variable name
?>

PHP Data Types:


1. Integer (Int)
<?php
$age = 25; // Positive integer
$temperature = -5; // Negative integer
$population = 7800000; // Large integer
?>
2. String
<?php
$name = "John Doe"; // Double quotes
$color = 'blue'; // Single quotes
$greeting = "Hello, $name!"; // Variable interpolation in double quotes

// Heredoc syntax (for multi-line strings)


$longText = <<<EOT
This is a multi-line string
that preserves line breaks
and indentation.
EOT;
?>

3. Float (Floating Point Number / Double)


<?php
$price = 9.99; // Decimal float
$scientific = 1.2e3; // Exponential notation (1.2 × 10³ = 1200)
$negativeFloat = -3.14; // Negative float
?>

4. Boolean:
<?php
$isLoggedIn = true;
$hasPermission = false;
// Common boolean evaluations
$isGreater = (10 > 5); // true
$isEqual = (10 == "10"); // true (loose comparison)
?>

6. Array
<?php
// Indexed array
$fruits = array("Apple", "Banana", "Orange");
// or short syntax (PHP 5.4+)
$fruits = ["Apple", "Banana", "Orange"];

// Associative array
$person = [
"name" => "John",
"age" => 30,
"isStudent" => false
];

// Multi-dimensional array
$matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
?>
d. Difference between “ and ‘
ans:
Use single quotes when:
• You need literal strings
• You're not using variables or special escapes
• You want minimal parsing overhead
Use double quotes when:
• You need variable interpolation
• You need escape sequences like \n, \t
• Readability is improved by seeing variables directly in string
Example:
<?php
$count = 5;
$item = "apple";

// Double quotes - variables interpreted


echo "I have $count ${item}s"; // I have 5 apples

// Single quotes - everything literal


echo 'I have $count ${item}s'; // I have $count ${item}s

// Concatenation alternative
echo 'I have ' . $count . ' ' . $item . 's'; // I have 5 apples
?>

E. PHP inside existing HTML tag: best for generating single html document, or static
document
Ans:
Using PHP Inside HTML Tags for Document Generation
When working with PHP to generate HTML documents, you have two main approaches for
integrating PHP code within HTML tags. The choice depends on whether you're creating a
single HTML document or static files
For Generating Single HTML Documents (Dynamic Content)
Best approach: Use PHP directly embedded in HTML tags when you need to:
• Generate content dynamically
• Insert variable values
• Conditionally render elements
• Create templates that will be processed on each request
•
For Generating Static HTML Documents
Best approach: Use PHP to generate static files when you need to:
• Create cached versions
• Generate one-time output
• Improve performance for rarely-changing content
• Pre-render pages for deployment

F . PHP outside existing HTML tag: best for generating multiple document dynamically
<?php
// Configuration and data preparation
$documents = [
['Welcome' => 'Home', 'content' => 'Welcome to our site'],
['Our company' => 'About', 'content' => 'Our company history'],
['Touch' => 'Contact', 'content' => 'Get in touch']
];

foreach ($documents as $doc) {


// Start output buffering
ob_start();

// Generate HTML structure


?>
<!DOCTYPE html>
<html>
<head>
<title><?= htmlspecialchars($doc['Welcome']) ?></title>
<meta charset="UTF-8">
</head>
<body>
<h1><?= htmlspecialchars($doc['Our company’]) ?></h1>
<div class="content"><?= $doc['content'] ?></div>
</body>
</html>
<?php

// Get buffered content


$html = ob_get_clean();

// Save to file
$filename = strtolower($doc['save']) . '.html';
file_put_contents($filename, $html);

echo "Generated: $filename\n";


}
?>

G. Control Structure: IfElse, IfElseifElse, switch, while, dowhile, for, foreach


Ans:
if...else:
if...elseif...else:

Switch:
Loops:
<?php
echo "<h3>1. while loop</h3>";
$i = 1;
while ($i <= 3) {
echo "while loop: $i <br>";
$i++;
}

echo "<h3>2. do...while loop</h3>";


$j = 1;
do {
echo "do...while loop: $j <br>";
$j++;
} while ($j <= 3);
echo "<h3>3. for loop</h3>";
for ($k = 1; $k <= 3; $k++) {
echo "for loop: $k <br>";
}

echo "<h3>4. foreach loop</h3>";


$fruits = ["Apple", "Banana", "Mango"];
foreach ($fruits as $fruit) {
echo "foreach loop: $fruit <br>";
}
?>

OUTPUT:
H. String handling function: strlen, trim, strtolower, strtoupper
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<?php
$user=" Shishir Thapa ";
echo strlen($user);
echo"<br>";
echo strlen(trim($user));
echo"<br>";
echo trim($user);
echo"<br>";
echo strtoupper($user);
echo"<br>";
echo strtolower($user);
?>
</body>
</html>
I. PHP constant

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<?php
$a=10;
$b="20";
echo var_dump($b);
echo"<br>";
$b=(int)$b;
echo var_dump($b);
echo"<br>";
$a+=$b;
echo $a;
echo"<br>";
define('PI','3.14');
echo PI;
?>
</body>
</html>

OUTPUT:

J. PHP Function
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<?php
//function
$isRaining=FALSE;
$a=50;
$b=70;
function myFunction($a,$b){
echo"Return string from my function<br>";
echo $a+$b;
echo"<br>";
}
myFunction($a,$b);
if($isRaining){
echo"Take an umbrella";
}else{
echo"Enjoy the sunshine";
}
?>
</body>
</html>
OUTPUT:

K. Associative array
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<?php
$std=[
[
"RollNo"=>20,
"FullName"=>"3hishir",
"Semester"=>"3rd",
"Faculty"=>"Humanities and Social Science",
"Program"=>"BCA",
"SGPA"=>3.65
],

[
"RollNo"=>27,
"FullName"=>"3hreejan",
"Semester"=>"3rd",
"Faculty"=>"Humanities and Social Science",
"Program"=>"BCA",
"SGPA"=>3.59
]
];

foreach($std as $index=>$record){
echo "Student " . ($index + 1) . " Details:<br>";
foreach($record as $key => $value){
echo $key.":".$value."<br>";
}
echo "<br>";
}
?>
</body>
</html>
L. Print user-entered data from a sample form on the webpage using $_GET["name"] or
$_POST["name"]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Info Form</title>
</head>
<body>
<form action="test5.php" method="get">
<label for="name">Full Name:</label><br>
<input type="text" name="name" id="name" required><br>

<label for="email">E-mail:</label><br>
<input type="email" name="email" id="email" required><br>

<label for="address">Address:</label><br>
<input type="text" name="address" id="address" required><br>

<label for="contact">Contact:</label><br>
<input type="text" name="contact" id="contact" required><br>

<label for="faculty">Faculty:</label><br>
<input type="text" name="faculty" id="faculty" required><br><br>

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


</form>
</body>
</html>
php file (test5)

<?php
if($_SERVER["REQUEST_METHOD"]=="GET"){
$Fullname=$_GET["name"];
$email=$_GET["email"];
$address=$_GET["address"];
$contact=$_GET["contact"];
$faculty=$_GET["faculty"];
echo"Welcome, $Fullname!<br>";
echo"Your email address is: $email<br>";
echo"Your address: $address<br>";
echo"Your contact number: $contact<br>";
echo"Your faculty: $faculty<br>";
}
?>

You might also like