STUDENT INFO AND ORDER /UNORDER LIST
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align:center;
</style>
</head>
<body bgcolor="#ffff">
<h1 >Student Information </h1>
<h2> ordered list</h2>
<ol >
<li>Student Name: Tarek Rahman</li>
<li>Student ID:2023-0101-18-135</li>
<li>Father Name:Hasan Mahmud</li>
<li>Mother Name:Jannatul Ferdous</li>
<li>Address:Jomidharhat,Noakhali</li>
<li>Department:CST </li>
</ol>
<h3>un ordered list</h3>
<ul>
<li>Computer Science</li>
<li>Electrical Engineering</li>
<li>Electronics Engineering</li>
<li>Civil Engineering</li>
<li>Mechanical Engineering</li>
<li>Architecture Engineering</li>
</ul>
<h4>Description:</h4>
<p>
<b>Web Development:</b> Web development is the process of creating, designing,
and maintaining websites or web applications for the Internet. It includes
several tasks such as web design, content development, coding, database
management, and web security. Web development is mainly divided into three parts:
front-end, back-end, and full-stack. The front-end is the part of a website that
users see and interact with. It is built using HTML, CSS, and JavaScript. The
back-end works behind the scenes; it handles databases, servers, and application
logic using programming languages like PHP, Python, or [Link]. A full-stack
developer can work on both the front-end and back-end. The goal of web
development is to create websites that are fast, user-friendly, secure, and
responsive on all devices. In short, web development combines creativity and
technical skills to build modern, functional, and attractive websites used by
millions of people around the world
</p>
<P>
<b>Html:</b> HTML (HyperText Markup Language) is the standard language used
to create and design web pages. It provides the basic structure of a webpage by
using different tags and elements. HTML tells the web browser how to display
text, images, links, tables, and other content on a webpage. It is not a
programming language but a markup language that defines the structure and layout
of a website. Every webpage you see on the Internet is built using HTML.
</P>
<P>
<b>CSS :</b> CSS (Cascading Style Sheets) is a style sheet language used to
design and format the appearance of web pages written in HTML. It controls how
elements such as text, colors, fonts, spacing, and layouts look on a webpage. CSS
helps make web pages attractive and user-friendly by separating the content
(HTML) from the design (style). With CSS, developers can create responsive
websites that work well on all devices like mobiles, tablets, and computers.
</P>
</body>
</html>
OUTPUT:
CONTACT FROM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Beautiful Form</title>
<style>
body {
font-family:Arial,sans-serif;
background: color #f0f4f8;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
margin:0;
}
.form-container{
background-color:#ffffff;
padding:30px 40px;
border-radius:12px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
width:100%;
max-width:400px;
}
h2{
text-align:center;
color:#0f172a;
margin-bottom:20px;
}
input,textarea{
width:100%;
padding:12px;
margin-bottom:15px;
border:1px solid #cbd5e1;
border-radius:8px;
font-size:16px;
}
input:focus,textarea:focus{
border-color:#3b82f6;
outline:none;
box-shadow:0 0 5px rgba(59,130,246,0.5);
}
button{
width:100%;
padding:12px;
background-color: #3b82f6;
color:white;
border:none;
border-radius:8px;
font-size:16px;
cursor:pointer;
transition:background-color 0.3s;
}
button:hover {
background-color:#2563eb;
</style>
</head>
<body>
<div class="form-container">
<h2>Contact Form </h2>
<form action="#" method="post">
<input type="text" name="name" placeholder="Your Name" required>
<input type="email" name="email" placeholder="Your
Email"required>
<input type="tel" name="phone" placeholder="Your Phone Number">
<textarea name="message" rows="5" placeholder="Your Message"
required></textarea>
<button type="submit">send</button>
</form>
</div>
</body>
</html>
OUTPUT:
TABLE WITH RAWSPAN COLUMNSPAN
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, initial-scal=1.0">
<title>test</title>
</head>
<body>
<h2> testing table 4 <sup>th</sup> semester</h2>
<table border ="2px solid green">
<thead>student table</thead>
<tr>
<th>Sl No </th>
<th>Customer Name</th>
<th>Customer Address</th>
<th>Phone Number</th>
<th> Secondary Number</th>
<th>Date of Birth</th>
<th>Customer Type</th>
</tr>
<tr>
<td>501</td>
<td >Abid</td>
<td>Dhaka</td>
<td>0215258623</td>
<td>5454545</td>
<td>21/10/2001</td>
<td>Occasional</td>
</tr>
<tr >
<td>502</td>
<td>Asad</td>
<td rowspan="2" >Chittagong</td>
<td colspan="2">25622343</td>
<!-- <td >25622343</td> -->
<td>21/12/2002</td>
<td rowspan="3">Regular</td>
</tr>
<tr>
<td>503</td>
<td>karim</td>
<!-- <td>chittagong</td> -->
<td colspan="2">22262212</td>
<!-- <td>22262212</td> -->
<td>18/05/1998</td>
<!-- <td>Regular</td> -->
</tr>
<tr>
<td>504</td>
<td>Rahim</td>
<td>khulna</td>
<td>1212225</td>
<td>45454545</td>
<td>03/03/2000</td>
<!-- <td>Regular</td> -->
</tr>
<tr>
<td>505</td>
<td>Kamrul</td>
<td>Cumilla</td>
<td>255555585</td>
<td>254545555585</td>
<td>21/12/2002</td>
<td>Irregular</td>
</tr>
<tr>
<td>506</td>
<td>Sajid</td>
<td>Sylhet</td>
<td>255555552</td>
<td>45453434</td>
<td>18/05/1998</td>
<td>Regular</td>
</tr>
</table>
</body>
</html>
OUTPUT:
HTML ,CSS AND JS FILE CONNECTION EXAMPLE
HTML FILE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document1</title>
<link rel="stylesheet" href="[Link]">
<script src="[Link]" ></script>
</head>
<body>
<h2>testing our page</h2>
<div class="container">
<h3>HTML Definition:</h3>
<p>HTML (HyperText Markup Language) is a markup language used to create and
structure web pages. It helps define the layout and content of a website by
organizing elements such as text, images, links, tables, and forms. HTML tells
the web browser how to display these elements properly. It is the basic building
block of web development and is used together with CSS and JavaScript to create
complete and interactive websites.</p>
</div>
<from action="">
<input type="button"name="test" value="open the page" onclick="start()">
<div class="container">
</from>
</body>
</html>
CSS FILE:
body{
background-color: lightgreen;
}
.container{
background-color: aqua;
border: 200;
margin: 100;
padding: 200;
}
JS FILE:
function start(name){
let x = 20;
let y = 10;
let z = x+y;
[Link]("The two number addition is:",z,"<br>");
let a = 15;
let b = 12;
let c = a-b;
[Link]("the two number sunscription is:",c,"<br>");
//multiflication
let d = 20
let e = 10
let f = d*e
[Link]("the two number multification is:",f , "<br>")
// division
let m = 20;
let n = 10;
let o = m+n ;
[Link]("the two number division is:",o,);
alert("welcome our page")
}
start();
OUTPUT:
HTML BASIC EXAMPLE
HTML FILE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic file</title>
<link rel="stylesheet" href="color .css">
</head>
<body>
<p>My aim in life is to become a successful computer professional.I want to
build a strong career in the field of computer science and information
technology</b>. From an early age, I have been <br> interested in computers and
how software works. <em>I believe that technology can make life easier and help
solve many real-world problems</em>. By becoming a skilled professional, I want
to contribute to society through innovative ideas and useful digital solutions.
<i>To achieve my aim, I am studying hard, improving my technical skills, and
learning new technologies</i>. I know that success requires dedication, patience,
and continuous [Link] shedding, the intentional cutting of electricity
supply when demand exceeds generation, is a major issue in many developing
nations, disrupting daily life by halting work, study, and business, especially
affecting students, workers, and hospitals with its darkness and power loss,
often caused by insufficient power plants, <u>high consumption, and
infrastructure issues</u>, requiring increased generation and conservation to
solve. With honesty, hard work, and determination, I hope to achieve my aim in
life and make my family and country proud.</p>
<!-- <div id="first" class="">
<p>Web design is the process of planning, conceptualizing, and arranging
content for the internet, focusing on a website's overall look, feel, and user
experience (UX/UI), ensuring it's visually appealing, easy to use, accessible,
and functions well across all devices (responsive design).</p>
</div> -->
<div id="uniqueIdentifier" class="containerClass">
<h2>This is a Div Element</h2>
<p>This content is inside a div that has both a unique ID
("uniqueIdentifier") and a class ("containerClass").</p>
</div>
<!-- Another div using only the class, demonstrating reusability -->
<div class="containerClass">
<p>This div only uses the class, so it shares the font and color styles
but not the background or border styles of the ID.</p>
</div>
</body>
</html>
CSS FILE:
#uniqueIdentifier{
border:4ch;
background-color: aqua;
}
.containerClass{
background-color: blanchedalmond;
}
OUTPUT:
HTML AND CSS FILE
HTML FILE:
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS Example</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h2>HTML & CSS Example</h2>
<!-- Table -->
<table>
<tr>
<th>Name</th>
<th>Class</th>
</tr>
<tr>
<td>Rahim</td>
<td>10</td>
</tr>
<tr>
<td>Karim</td>
<td>12</td>
</tr>
</table>
<!-- Image -->
<img src="ffff" alt="Sample Image">
<!-- Link -->
<br>
<a href="[Link] >Go to website</a>
</body>
</html>
CSS FILE:
body{
background-color: #f2f2f2;
margin: 20px;
font-family: Arial;
}
h2{
color: darkblue;
}
/* Table Style */
table{
border-collapse: collapse;
width: 50%;
background-color: white;
}
table, th, td{
border: 2px solid black;
}
th, td{
padding: 10px;
text-align: center;
}
th{
background-color: lightblue;
}
/* Image Style */
img{
width: 200px;
border: 3px solid black;
margin-top: 20px;
}
/* Link Style */
a{
display: inline-block;
margin-top: 20px;
padding: 10px;
text-decoration: none;
background-color: green;
color: white;
border-radius: 5px;
}
a:hover{
background-color: darkgreen;
}
OUTPUT:
CONSOLE ,DOCUMENT WITH JS FILE
HTML FILE:
<!DOCTYPE html>
<html>
<head>
<title>JS Console & Document Example</title>
</head>
<body>
<h2>JavaScript Output Example</h2>
<div id="output"></div>
<script src="[Link]"></script>
</body>
</html>
JS FILE:
[Link]("This is console output");
[Link]("JavaScript is working properly");
let outputDiv = [Link]("output");
[Link] = "This is document output<br>";
[Link] += "Hello JavaScript<br>";
let a = 10;
let b = 20;
let sum = a + b;
[Link]("Sum = " + sum);
[Link] += "Sum = " + sum;
OUTPUT:
JS FUNCTION CODE
HTML FILE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Arrow Functions Demo</title>
</head>
<body>
<h1>function test</h1>
<script src="[Link]"></script>
</body>
</html>
JS FILE:
function greet(name) {
[Link]("Hello, " + name + "!");
}
greet("Tarek");
OUTPUT:
PHP SYNTAX AND PROGRAM
Php syntax:
<?php
echo "Hello World";
?>
Php programe:
Output: