Web Development Building Your Website From Scratch [HTML/CSS/PHP] - Part 1

CyberGod · Jan 1, 2022

Table Of Contents:

1) Chapter 1 - The Basics [Part 1]
-What is HTML?
-What is CSS?
-What is PHP?
- Choosing An Editor
2) Chapter 2 - Building From Scratch [Part 2]
-Constructing the Index Page (HTML)
-Using Div Tags (HTML)
-Styling Your Website (CSS)
-Finishing Touches (CSS)

3) Chapter 3 - Implementing PHP [Part 3]
-Split Elements
-Making Separate Folders for Elements
-The Include() Function

4) Chapter 4 - Host Your Own Web Server [Part 4] [Optional]
-Setting up Virtual Environment
-Installing Turn Key Lamp
-Setting Up Virtual Servers
-Configure Internet Access
-Configure SSH and SFTP Access
-Securing Your Apache Server

Chapter 1 - The Basics

This chapter will help you understand the basics, for more you can always Google.
Before moving to build our very own website from scratch we must be familiarized with HTML, PHP and CSS. So first of all lets see what HTML is?

What is HTML?
Tim Berners-Lee is the man behind HTML, The full form of HTML is Hyper Text Markup Language, It is the most utilized markup language for the construction of a Website. It basically consists of tags enclosed in angle brackets like:

Code:

Code:

<b>  </b>

In HTML all your code and other tags are enclosed in a major tag which is the <html> tag. "The purpose of a web browser is to read HTML documents and compose them into visible or audible web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page." - Wiki

!!!A document containing HTML has the .html extension!!!

Your HTML document consists of elements like the one PARAGRAPH, BOLD, TITLE etc, An element consists of 3 basic components:

1) A pair of tags
2) A starting tag
3) A closing tag

And also some ATTRIBUTES with the start tag. An example of Elements is:

Code:

Code:

<p> This is A Paragraph </p>
<h1> This is a Big Heading </h1>

Attribute are additional codes for an Element to give it a style or change it's look, If you don't understand me then here's an example:

For paragraph;
Code:

Code:

<p> Hey I wanna learn to make a site from scratch </p>

If you want to leave comments in the code, the syntax for that is:

Code:

Code:

/* Your comment */

Now what I want is to make that word blink so I'll make use of an attribute:
Code:

Code:

<p style='text-decoration:blink'> Hey </p>

Test that code and the text will blink. A better way to style your text and other elements is by using the CSS which we will learn in the next chapter. An attribute is separated by a ' = ' like in the example above.
Before going into the next chapter take a Look at these links containing tags, elements and attributes, You might take some time in learning those but once your start practicing you'll get the hang of it.

Here's a Hello World in HTML:

Code:

Code:

<html>
<head>
<title>Hello World</title>
<head>
<body>
<h1> Hello World! </h1>
</body>
</html>

List of HTML Elements
List of HTML Tags
List of HTML Attributes
Practice HTML online using http://htmledit.squarefree.com/

What is CSS?

CSS is Cascading Style Sheet, As the name suggests it is used to style or change the formatting of a mark up language like HTML (Recall the example of Attribute). The basic syntax of CSS is:

Code:

Code:

selector id {
...CSS Code...
}

I will not go into depth of CSS as it's not that hard, you just need to practice it. Now we will change the style of that paragraph text we learned in the attributes section in HTML, using CSS. So first we should know how will use or link the CSS to a particular element. You can include CSS from a external file 'name.css' into your HTML document using:

Code:

Code:

<link href='/direction/to/stylesheet/folder/name.css' rel='stylesheet'>

But if you want to include the CSS into your HTML document internally, then we can do this:

Code:

Code:

<style type='text/css'>
...Your CSS Styling..
</style>

Now to the actual example part, First we shall include the style tags for the CSS Styling of the paragraph text:

Code:

Code:

<html>

<head>

<title>CSS Example</title>

</head>

<style type='text/css'>

...Our Styling Here...

</style>

<body>

<p> I wanna Blink this text man and make it green in color and also center it! </p>

</body>

</html>

Now lets add some code to the styling. We will do that one-by-one! First we link the CSS to the bold text.

Code:

Code:

<style type'text/css>
p {

}
</style>

Now we want the text to blink to for that we do:

Code:

Code:

<style type'text/css>
p {
text-decoration: blink;
}
</style>

Remember to add a semicolon ' ; ' in the end of every attribute in CSS

For making the text green, the attribute for that we use is color (See the HTML Attribute List):

Code:

Code:

<style type='text/css>
p {
text-decoration: blink;
color:#00FF00;
}
</style>

To center the text, the attribute we use is text-align, so:

Code:

Code:

<style type='text/css>
p {
text-decoration: blink;
color:#00FF00;
text-align: center;
}
</style>

COngratz, Our CSS is now finally complete and out complete code is:
Code:

Code:

<html>
<head>
<title>CSS Example</title>
</head>

<style type='text/css>
p {
text-decoration: blink;
color:#00FF00;
}
</style>

<body>

<p> I wanna Blink this text man and make it green in color and also center it! </p>

</body>

</html>

Remember, this code will style all the text covered with the paragraph tags, to separately stylize the section or text we use the DIV tags to make what we can call 'Sections' in the website and then format them separately. We will learn how to use DIV tags later in the tutorial.

Remember PRACTICE PRACTICE AND PRACTICE! You can't get a skill unless you practice it!

What is PHP?

PHP stands for Hypertext Preprocessor and it's a server side language meaning that the script gets executed on the server. It' has become a very popular web development language to make dynamic websites, CMS, OOP programming and more. For now we will only touch the basics and the parts that we are going to include in making our site.

A PHP code is enclosed in php tags like:

PHP Code:

Code:

<?php //Your Code ?>

Lets make our first script, the Hello World! In PHP, to print out a word or sentence we use echo.

PHP Code:

Code:

<?php echo 'Hello World' ?>

Whoops! Did the code above give you an error?? That is because we forgot to put the ' ; ' semicolon in the end of the code. Remember mates that you should make this your habit otherwise you'll get an error.

Modify the code and the correct one is:

PHP Code:

Code:

<?php echo 'Hello World'; ?>

Make sure the file containing the PHP code has the .php extension otherwise it won't work.

Comments can be included in PHP by putting railing slashes in front of your text:

PHP Code:

Code:

<?php
// Hey this is a Comment
?>

Choosing Your Editor: I recommend three editors, One is Sublime text 2 and the other ones are Notepad++ and Adobe Dreamweaver. They have syntax highlighting and code completion so they make your work easier and also allow you to view live web page without executing the webpage , Or if you like one of your own you can continue with that.

So this is the end of part 1 of my series How to Build your Website From Scratch using HTML/CSS/PHP, till now you would have understood the basics of PHP, HTML and CSS.
Stay tuned for Part 2 which is the real deal. I'll be releasing it soon Smile
Regards,
@CyberGod

Web Development Building Your Website From Scratch [HTML/CSS/PHP] - Part 1

CyberGod

Administrator