Scribd
Upload
11 views11 pages

Web Site Development

The presentation discusses how to create a basic personal website using CSS and PHP includes. Key steps include creating folders in XAMPP, writing CSS stylesheets, creating PHP include files for headers, footers and navigation, and building sample pages that bring the includes together. The goal is to demonstrate basic website structure and templating.

Uploaded by

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

Web Site Development

The presentation discusses how to create a basic personal website using CSS and PHP includes. Key steps include creating folders in XAMPP, writing CSS stylesheets, creating PHP include files for headers, footers and navigation, and building sample pages that bring the includes together. The goal is to demonstrate basic website structure and templating.

Uploaded by

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

Presentation Of

Web Sit Development

Presented by
Md Atiqur Rahman (Polash)
Chief Technical Officer(CTO)
Doel e-Services
Web: doelhosting.com
Email: [email protected]
Mobile:01720981682
7/30/23 Web Design and Development 1
Today Objective
• Create Css
• Include Page
• Web Site Design

7/30/23 Web Design and Development 2


Create personal Website
• At First Create a new folder inside the
• Xampp ->htdocs->personal website
• Run your Apache and Mysql
• Write Your Brower address bar:
localhost/personal website
• Now go to your personal website folder create
new file name style.css

7/30/23 Web Design and Development 3


style.css
body{ .menu {
width:1000px; width: 25%;
margin: 0 auto; }
} .content {
*{ width: 75%;
box-sizing: border-box; }
} .menu ul {
.header, .footer { list-style-type: none;
background-color: grey; margin: 0;
color: white; padding: 0;
padding: 15px; }
} .menu li {
.column { padding: 8px;
float: left; margin-bottom: 8px;
padding: 15px; background-color: #33b5e5;
} color: #ffffff;
.clearfix::after { }
content: ""; .menu li:hover {
clear: both; background-color: #0099cc;
display: table; }
7/30/23 Web Design and Development 4
}
script.php
<style> li a:hover:not(.active) {
ul {
background-color: #111;
list-style-type: none;
margin: 0; }
padding: 0; .active {
overflow: hidden; background-color: #4CAF50;
background-color: #333;
}
}
li { </style>
float: left; <head>
}
<meta http-equiv="Content-Type"
li a {
content="text/html; charset=utf-
display: block;
color: white;
8" />
text-align: center; <title>Name</title>
padding: 14px 16px; <link href="style.css"
text-decoration: none; rel="stylesheet" type="text/css">
}
</head>

7/30/23 Web Design and Development 5


footer.php
<div class="footer">
<p>Design and Developed by <a
href="http://doelhosting.com/">Doel e-
Services</a></p>
</div>

7/30/23 Web Design and Development 6


header.php
<div class="header">
<div class="clearfix">
<div class="column menu" style="height:130px;">
<img src="doel logo.jpg" style="height:120px; width:120px;border-radius: 10px;" />
</div>
<div class="column content" style="height:130px;">
<h1 style="margin:0px;">Name</h1>
<p>Designation</p>
<p>Organization Name</p>
</div>
</div>

</div>
<ul >
<li><a class="active" href="index.php">Home</a></li>
<li><a href="about_me.php">About Me</a></li>
<li><a href="gallery.php">Gallery</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
7/30/23 Web Design and Development 7
index.php
<!DOCTYPE html >
<?php include('script.php');?>
<body>

<?php include('header.php'); ?>

<div class="clearfix">
<h1>Personal Detail write here</h1>
</div>
<?php include('footer.php'); ?>

</body>
</html>
7/30/23 Web Design and Development 8
about_me.php
<!DOCTYPE html>
<?php include('script.php');?>
<body>

<?php include('header.php'); ?>

<div class="clearfix">

<h1>About Me write here</h1>

</div>
<?php include('footer.php'); ?>

</body>
</html>
7/30/23 Web Design and Development 9
contact.php
<!DOCTYPE html>
<?php include('script.php');?>
<body>

<?php include('header.php'); ?>

<div class="clearfix">

<h1>Contact Address write here</h1>

</div>
<?php include('footer.php'); ?>

</body>
</html>

7/30/23 Web Design and Development 10


• Any Question

7/30/23 Web Design and Development 11

You might also like