Building Your Website From Scratch [HTML/CSS/PHP] - Part 3 03-08-2013, 05:54 PM
#1
3) Chapter 3 - Implementing PHP [Part 3]
-Split Elements
-Making Separate Folders for Elements
-The Include() Function
In this chapter we are going to make use of PHP making it easy for us to edit our website.
Lets recall the entire HTML code of our website that we had previously made:
Splitting the code simple, We will make use of comments to describe the location of a certain section so that later we can use the include function to introduce the external page for that section. Well here's my code:
Now We split the code according to the comments:
Our CSS:
Our Logo:
Our Navigation Bar:
The content section:
The footer:
After we are done with the splitting, our HTML Document will look like:
Now we have split our code, lets make separate folders to put the code files in, It will get easy for you to manage the sections of the site instead of searching and editing the Index page itself.
Now in the same directory where you have your index page, Create 2 Folders:
1) includes ( For logo etc )
2) css ( For our stylesheet )
Now we need to save each code into their respective directory, So open your favorite editor and begin:
Copy all the CSS from the split code above and save it in the css folder by the name css.php. Then copy logo code from the logo split above and save it in the includes folder by the name logo.php, now copy the nav bar code and save it in the same include folder by the name nav.php also copy all the content code and save it to the same folder by the name content.php.
Same goes with footer, save it as footer.php.
Now we are ready to include our codes in the index page via Include Function of PHP..
PHP is mainly used for web development that's why It offers wide range of built-in useful functions that makes the work of a web developer easier . The include function can be used to import the contents of a certain point from another place or a folder (Most Basic Explanation I could come up with
miling: ).
Now as our folders and index file are in place we can start to edit the index file and add php.
Our HTML Code from the previous topic is:
Now we will start adding this include function between the comments of each section:
Here are the code for all the sections:
For CSS:
For Logo:
For Nav Bar:
For Content:
For Footer:
So your final code would look like:
Upload the contents to your Web Host and enjoy your website
This is the end of the Building Your Website From Scratch [HTML/CSS/PHP] Series by Ex094.
Part 4 depends upon you guys, whether you want me to make it or not, If yes mention it in ya comment
-Split Elements
-Making Separate Folders for Elements
-The Include() Function
In this chapter we are going to make use of PHP making it easy for us to edit our website.
Split Elements:
Lets recall the entire HTML code of our website that we had previously made:
Code:
<html>
<head>
<title>Index Page</title>
<style type='text/css'>
h1,h2,p {
margin:0; /* No Space B/w text */
}
body {
font-family: segoe ui;
text-align: center; /* Center text */
background-color: #909090 ;
width:1280px;
height:700px;
}
#logo {
text-align: left; /* Align left and make adjustments */
padding-left: 20px;
padding-top: 20px;
padding-bottom: 20px; /* Space b/w the Logo and Shadow */
box-shadow: 0px 0px 10px black; /* Shadow which separates the logo from the other texts and menu */
/* Give Round Edges */
-moz-border-radius: 10px
-webkit-border-radius: 10px;
border-radius: 10px;
}
#logo:hover {
text-shadow: 0px 0px 2px #4d4d4d, 0px 5px 10px #aeaeae; /* Logo Shadow on Hover */
}
#bkg {
width:1024px;
height:600px;
margin:auto;
margin-top: 100px;
}
#menu {
padding-top: 10px;
}
#menu li {
display: inline;
list-style-type: none; /* No Bullets */
float:center;
padding:5px 30px 5px; /* Separation b/w buttons */
text-shadow: 0px 0px 2px #4d4d4d, 0px 5px 10px #aeaeae; /* Text Shadow */
background: grey;
/* Give Round Edges */
-moz-border-radius: 10px
-webkit-border-radius: 10px;
border-radius: 10px;
}
#menu li:hover {
background-color: #CC9966
}
#content {
width:1024;
height:400;
margin-top: 25px;
padding-right:2px;
padding-left: 8px;
text-align: left;
padding-top: 10px;
overflow: auto;
padding-bottom: 20px;
/*Round Edges and Shadow on the box */
-moz-border-radius: 10px
-webkit-border-radius: 10px;
border-radius: 10px;
box-shadow: 0px 0px 10px black; /* Shadow which separates the logo from the other texts and menu */
}
#footer {
margin-top: 20px;
margin-left: 12px;
padding-top: 12px;
padding-bottom: 12px;
/*Round Edges and Shadow on the box */
-moz-border-radius: 10px
-webkit-border-radius: 10px;
border-radius: 10px;
box-shadow: 0px 0px 10px black; /* Shadow which separates the logo from the other texts and menu */
}
</style>
</head>
<body>
<div id='bkg'>
<div id='logo'>
<h2>Hackcommunity - The Best Ethical Hacking Forum</h2>
<p>I am a Member Of Hackcommunity</p>
</div>
<div id='navbar'>
<ul id='menu'>
<li><a href='http://www.gigadev.tk'>Home</a></li>
<li><a href='http://www.gigadev.tk'>Downloads</a></li>
<li><a href='http://www.gigadev.tk'>About</a></li>
<li><a href='http://www.gigadev.tk'>Forum</a></li>
</ul>
</div>
<div id='content'>
<h1> What is HTML </h1>
<p>Hyper Text Markup Language (HTML) is the main markup language for creating web pages and other information that can be displayed in a web browser.HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets, within the web page content. HTML tags most commonly come in pairs like and, although some tags, known as empty elements, are unpaired, for example. The first tag in a pair is the start tag, the second tag is the end tag (they are also called opening tags and closing tags). In between these tags web designers can add text, tags, comments and other types of text-based content.</p>
<h1> What is CSS?</h1>
<p>Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL.
CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts.[1] This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. It can also be used to allow the web page to display differently depending on the screen size or device on which it is being viewed. While the author of a document typically links that document to a CSS style sheet, readers can use a different style sheet, perhaps one on their own computer, to override the one the author has specified.
CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and assigned to rules, so that the results are predictable.
The CSS specifications are maintained by the World Wide Web Consortium (W3C). Internet media type (MIME type) text/css is registered for use with CSS by RFC 2318 (March 1998), and they also operate a free CSS validation service.[2]</p>
</div>
<div id='footer'>
<p>Website Designed By <a href='http://www.gigadev.tk'>Exo94</a></p>
<p>Member Of <a href='http://www.hackcommunity.com'>Hackcommunity</a></p>
</div>
</div>
</body>
</html>Splitting the code simple, We will make use of comments to describe the location of a certain section so that later we can use the include function to introduce the external page for that section. Well here's my code:
Code:
<html>
<head>
<title>Index Page</title>
<!-- CSS Style -->
<style type='text/css'>
h1,h2,p {
margin:0; /* No Space B/w text */
}
body {
font-family: segoe ui;
text-align: center; /* Center text */
background-color: #909090 ;
width:1280px;
height:700px;
}
#logo {
text-align: left; /* Align left and make adjustments */
padding-left: 20px;
padding-top: 20px;
padding-bottom: 20px; /* Space b/w the Logo and Shadow */
box-shadow: 0px 0px 10px black; /* Shadow which separates the logo from the other texts and menu */
/* Give Round Edges */
-moz-border-radius: 10px
-webkit-border-radius: 10px;
border-radius: 10px;
}
#logo:hover {
text-shadow: 0px 0px 2px #4d4d4d, 0px 5px 10px #aeaeae; /* Logo Shadow on Hover */
}
#bkg {
width:1024px;
height:600px;
margin:auto;
margin-top: 100px;
}
#menu {
padding-top: 10px;
}
#menu li {
display: inline;
list-style-type: none; /* No Bullets */
float:center;
padding:5px 30px 5px; /* Separation b/w buttons */
text-shadow: 0px 0px 2px #4d4d4d, 0px 5px 10px #aeaeae; /* Text Shadow */
background: grey;
/* Give Round Edges */
-moz-border-radius: 10px
-webkit-border-radius: 10px;
border-radius: 10px;
}
#menu li:hover {
background-color: #CC9966
}
#content {
width:1024;
height:400;
margin-top: 25px;
padding-right:2px;
padding-left: 8px;
text-align: left;
padding-top: 10px;
overflow: auto;
padding-bottom: 20px;
/*Round Edges and Shadow on the box */
-moz-border-radius: 10px
-webkit-border-radius: 10px;
border-radius: 10px;
box-shadow: 0px 0px 10px black; /* Shadow which separates the logo from the other texts and menu */
}
#footer {
margin-top: 20px;
margin-left: 12px;
padding-top: 12px;
padding-bottom: 12px;
/*Round Edges and Shadow on the box */
-moz-border-radius: 10px
-webkit-border-radius: 10px;
border-radius: 10px;
box-shadow: 0px 0px 10px black; /* Shadow which separates the logo from the other texts and menu */
}
</style>
<!-- CSS Style -->
</head>
<!-- Site Body -->
<body>
<div id='bkg'>
<!-- Logo -->
<div id='logo'>
<h2>Hackcommunity - The Best Ethical Hacking Forum</h2>
<p>I am a Member Of Hackcommunity</p>
</div>
<!-- Logo -->
<!-- Navigation Bar -->
<div id='navbar'>
<ul id='menu'>
<li><a href='http://www.gigadev.tk'>Home</a></li>
<li><a href='http://www.gigadev.tk'>Downloads</a></li>
<li><a href='http://www.gigadev.tk'>About</a></li>
<li><a href='http://www.gigadev.tk'>Forum</a></li>
</ul>
</div>
<!-- Navigation Bar -->
<!-- Content -->
<div id='content'>
<h1> What is HTML </h1>
<p>Hyper Text Markup Language (HTML) is the main markup language for creating web pages and other information that can be displayed in a web browser.HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets, within the web page content. HTML tags most commonly come in pairs like and, although some tags, known as empty elements, are unpaired, for example. The first tag in a pair is the start tag, the second tag is the end tag (they are also called opening tags and closing tags). In between these tags web designers can add text, tags, comments and other types of text-based content.</p>
<h1> What is CSS?</h1>
<p>Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL.
CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts.[1] This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. It can also be used to allow the web page to display differently depending on the screen size or device on which it is being viewed. While the author of a document typically links that document to a CSS style sheet, readers can use a different style sheet, perhaps one on their own computer, to override the one the author has specified.
CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and assigned to rules, so that the results are predictable.
The CSS specifications are maintained by the World Wide Web Consortium (W3C). Internet media type (MIME type) text/css is registered for use with CSS by RFC 2318 (March 1998), and they also operate a free CSS validation service.[2]</p>
</div>
<!-- Content -->
<!-- Website Footer -->
<div id='footer'>
<p>Website Designed By <a href='http://www.gigadev.tk'>Exo94</a></p>
<p>Member Of <a href='http://www.hackcommunity.com'>Hackcommunity</a></p>
</div>
<!-- Website Footer -->
</div>
</body>
<!-- Website Body -->
</html>Now We split the code according to the comments:
Our CSS:
Code:
<style type='text/css'>
h1,h2,p {
margin:0; /* No Space B/w text */
}
body {
font-family: segoe ui;
text-align: center; /* Center text */
background-color: #909090 ;
width:1280px;
height:700px;
}
#logo {
text-align: left; /* Align left and make adjustments */
padding-left: 20px;
padding-top: 20px;
padding-bottom: 20px; /* Space b/w the Logo and Shadow */
box-shadow: 0px 0px 10px black; /* Shadow which separates the logo from the other texts and menu */
/* Give Round Edges */
-moz-border-radius: 10px
-webkit-border-radius: 10px;
border-radius: 10px;
}
#logo:hover {
text-shadow: 0px 0px 2px #4d4d4d, 0px 5px 10px #aeaeae; /* Logo Shadow on Hover */
}
#bkg {
width:1024px;
height:600px;
margin:auto;
margin-top: 100px;
}
#menu {
padding-top: 10px;
}
#menu li {
display: inline;
list-style-type: none; /* No Bullets */
float:center;
padding:5px 30px 5px; /* Separation b/w buttons */
text-shadow: 0px 0px 2px #4d4d4d, 0px 5px 10px #aeaeae; /* Text Shadow */
background: grey;
/* Give Round Edges */
-moz-border-radius: 10px
-webkit-border-radius: 10px;
border-radius: 10px;
}
#menu li:hover {
background-color: #CC9966
}
#content {
width:1024;
height:400;
margin-top: 25px;
padding-right:2px;
padding-left: 8px;
text-align: left;
padding-top: 10px;
overflow: auto;
padding-bottom: 20px;
/*Round Edges and Shadow on the box */
-moz-border-radius: 10px
-webkit-border-radius: 10px;
border-radius: 10px;
box-shadow: 0px 0px 10px black; /* Shadow which separates the logo from the other texts and menu */
}
#footer {
margin-top: 20px;
margin-left: 12px;
padding-top: 12px;
padding-bottom: 12px;
/*Round Edges and Shadow on the box */
-moz-border-radius: 10px
-webkit-border-radius: 10px;
border-radius: 10px;
box-shadow: 0px 0px 10px black; /* Shadow which separates the logo from the other texts and menu */
}
</style>Our Logo:
Code:
<div id='logo'>
<h2>Hackcommunity - The Best Ethical Hacking Forum</h2>
<p>I am a Member Of Hackcommunity</p>
</div>Our Navigation Bar:
Code:
<div id='navbar'>
<ul id='menu'>
<li><a href='http://www.gigadev.tk'>Home</a></li>
<li><a href='http://www.gigadev.tk'>Downloads</a></li>
<li><a href='http://www.gigadev.tk'>About</a></li>
<li><a href='http://www.gigadev.tk'>Forum</a></li>
</ul>
</div>The content section:
Code:
<div id='content'>
<h1> What is HTML </h1>
<p>Hyper Text Markup Language (HTML) is the main markup language for creating web pages and other information that can be displayed in a web browser.HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets, within the web page content. HTML tags most commonly come in pairs like and, although some tags, known as empty elements, are unpaired, for example. The first tag in a pair is the start tag, the second tag is the end tag (they are also called opening tags and closing tags). In between these tags web designers can add text, tags, comments and other types of text-based content.</p>
<h1> What is CSS?</h1>
<p>Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL.
CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts.[1] This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. It can also be used to allow the web page to display differently depending on the screen size or device on which it is being viewed. While the author of a document typically links that document to a CSS style sheet, readers can use a different style sheet, perhaps one on their own computer, to override the one the author has specified.
CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and assigned to rules, so that the results are predictable.
The CSS specifications are maintained by the World Wide Web Consortium (W3C). Internet media type (MIME type) text/css is registered for use with CSS by RFC 2318 (March 1998), and they also operate a free CSS validation service.[2]</p>
</div>The footer:
Code:
<div id='footer'>
<p>Website Designed By <a href='http://www.gigadev.tk'>Exo94</a></p>
<p>Member Of <a href='http://www.hackcommunity.com'>Hackcommunity</a></p>
</div>After we are done with the splitting, our HTML Document will look like:
Code:
<html>
<head>
<title>Index Page</title>
<!-- CSS Style -->
<!-- CSS Style -->
</head>
<!-- Site Body -->
<body>
<div id='bkg'>
<!-- Logo -->
<!-- Logo -->
<!-- Navigation Bar -->
<!-- Navigation Bar -->
<!-- Content -->
<!-- Content -->
<!-- Website Footer -->
<!-- Website Footer -->
</div>
</body>
<!-- Website Body -->
</html>Making Folders:
Now we have split our code, lets make separate folders to put the code files in, It will get easy for you to manage the sections of the site instead of searching and editing the Index page itself.
Now in the same directory where you have your index page, Create 2 Folders:
1) includes ( For logo etc )
2) css ( For our stylesheet )
Now we need to save each code into their respective directory, So open your favorite editor and begin:
Copy all the CSS from the split code above and save it in the css folder by the name css.php. Then copy logo code from the logo split above and save it in the includes folder by the name logo.php, now copy the nav bar code and save it in the same include folder by the name nav.php also copy all the content code and save it to the same folder by the name content.php.
Same goes with footer, save it as footer.php.
Now we are ready to include our codes in the index page via Include Function of PHP..
The Include() Function
PHP is mainly used for web development that's why It offers wide range of built-in useful functions that makes the work of a web developer easier . The include function can be used to import the contents of a certain point from another place or a folder (Most Basic Explanation I could come up with
miling: ).Now as our folders and index file are in place we can start to edit the index file and add php.
Our HTML Code from the previous topic is:
Code:
<html>
<head>
<title>Index Page</title>
<!-- CSS Style -->
<!-- CSS Style -->
</head>
<!-- Site Body -->
<body>
<div id='bkg'>
<!-- Logo -->
<!-- Logo -->
<!-- Navigation Bar -->
<!-- Navigation Bar -->
<!-- Content -->
<!-- Content -->
<!-- Website Footer -->
<!-- Website Footer -->
</div>
</body>
<!-- Website Body -->
</html>Now we will start adding this include function between the comments of each section:
PHP Code:
<?php include('path/to/.php'); ?>Here are the code for all the sections:
For CSS:
Code:
<?php include('css/css.php'); ?>For Logo:
Code:
<?php include('includes/logo.php'); ?>For Nav Bar:
Code:
<?php include('includes/nav.php'); ?>For Content:
Code:
<?php include('includes/content.php'); ?>For Footer:
Code:
<?php include('includes/footer.php'); ?>So your final code would look like:
Code:
<html>
<head>
<title>Index Page</title>
<!-- CSS Style -->
<?php include('css/css.php'); ?>
<!-- CSS Style -->
</head>
<!-- Site Body -->
<body>
<div id='bkg'>
<!-- Logo -->
<?php include('includes/logo.php'); ?>
<!-- Logo -->
<!-- Navigation Bar -->
<?php include('includes/nav.php'); ?>
<!-- Navigation Bar -->
<!-- Content -->
<?php include('includes/content.php'); ?>
<!-- Content -->
<!-- Website Footer -->
<?php include('includes/footer.php'); ?>
<!-- Website Footer -->
</div>
</body>
<!-- Website Body -->
</html>Upload the contents to your Web Host and enjoy your website
This is the end of the Building Your Website From Scratch [HTML/CSS/PHP] Series by Ex094.
Part 4 depends upon you guys, whether you want me to make it or not, If yes mention it in ya comment
![[+]](https://sinister.li/images/modern/collapse_collapsed.png)
