Welcome to the Part 2 of Building Your Website From Scratch [HTML/CSS/PHP] Series, In this tutorial we'll be making our website from scratch without any help of a free template etc.
Chapter 2 - Building From Scratch [Part 2]
-Constructing the Index Page (HTML)
-Using Div Tags (HTML)
-Styling Your Website (CSS)
-Finishing Touches (CSS)
Note: Before you continue make sure you've thoroughly read the the Part 1 of this tutorial, If not go here and learn first
hellofhackers.com
Constructing the Index Page:
OK so now we will code our basic Index page, We'll be using the Hello World example to build it. We've learned in the first part that HTML elements are enclosed in <html> tags, our first task is to type it down in your editor:
Now for the title of the page that we see on the top of our browser, we use the <title> tags but before that we put in the <head> tags. The head tags contains the title of the document or style or a script etc. So our code will look like this:
You should now see the title of you web page, for the content you want to put on your website like any article or a blog post. Contents go inside the <body> tags. A <body> tag defines the body of the document:
The body of a document contains text, links, tables, images and other contents.
For the hello world example we want to put a heading and a big one, In html we can use the <h> tags to define weather a text is a heading. The <h> tag vary in size, they are from <h1> to <h5>. For better understanding we are going to list the Hello World text in all the <h> tags. Remember that this will go in the body tag as it's a content that we want the user to read.
Open this page in your browser and see the result for yourself, you'll see the text in different sized headings, of course it's up to you to choose which heading suits you the best. For me I'll choose the <h2> tag so the code looks like:
Till this point consider the heading as your logo, Now we will add some content like a paragraph text using the <p> tags which determine a paragraph in the document:
Congratulations, You have just completed your BASIC Index page. Now we will be using DIV tags to make our work easier and manage different sections of the site independently.
DIV tags lets you identify sections in a HTML Document, they can be used easily to associate CSS with different sections in a website like Logo, Content etc make's your code look neat and helps you manage sections easily. So lets use DIV tags and split our HTML Document into sections, For now we are going to make 5 sections having similar id attribute as the names:
1)Logo (id='logo')
2)Background(id='bkg')
3)Nav Bar(id='navbar')
4)Content(id='content')
5)Footer(id='footer')
The basic div syntax is:
First lets add the logo and content section so:
Now to add the Nav Bar section, We will use the unordered list tags to make a list of links. The tag we will use is the <ul> and inside that tag the items will be encoded with <li> (List Item) tags, Here's the code:
We have given an id to the menu items so that we can style them easily so don't get confused, You can give id to everything.
After the we will add the footer section:
Now that we have split our document in different section you can view the page, The site will look a little nasty so here's when CSS and Styling comes in. The whole html code after adding div sections is:
So we have completed the code of our website but by viewing it looks out of format. We need to reduce the space between the text in the footer, we need to center our logo, we need to remove the bullets from menu etc etc.
![[Image: NhEAZw1.png]](http://i.imgur.com/NhEAZw1.png "[Image: NhEAZw1.png]")
Lets start with the CSS, first we will make a style section inside the head tags of our site document after the title tags:
Code:
Now we will introduce some styling, First of all I want to have a background and all the text centered also minimal space between the text just like the paragraph above so for that lets take the whole body tag and link it to the CSS:
Code:
The firs CSS Style removes the margins, the second CSS assigns the font to all the text on the webpage as Segoe UI, Centers the text and sets the Background to the respective color.
Now we will add CSS for the logo, I'll be aligning the logo text to the left as a part of my design and will be adjusting it using the padding, What it does is that it make the area around the text in an element clear so I don't look messy.
Code:
Play with the values of the padding to understand how it works I will not go into details as you have to practice in order to lean how they function.
Then we will be adding a CSS for the id='bkg' which will hold the content, menu and log:
Code:
We have set the width and height of the container as we don't want the text to hover all over the page, remember in this tutorial I'm making a compact website. The margin clears an area around an element (outside the border) so I'm applying the margins to center our container.
Next is our menu, First we will have to get rid of those bullets in the list and make the text come in line. For that we use the list-style and display prop. of CSS:
Code:
Now we have chosen the menu plus the li(List) because the list is inside the menu div tags so watch out for this.
And for the menu add this:
Code:
This will separate the logo from the menu with some space looking more clean.
Now we shall setup the section where our content will appear, We will be setting the width, height, padding and margin for the content so that it distinguishes from the menu and the footer and also the text inside it doesn't merge with the border making the text look dirty and unreadable.
Code:
I've aligned the text to the left same as the logo to make it look good, Adding padding and margin gives a cleaner look.
Again I'm saying that unless you play with the code yourself and alter the values you won't be able to learn properly!
We also have a problem, What if out content section gets filled with text? The text will come out of the container so the website will look bad. We have a simple solution:
Code:
Add this to the CSS Above, this will automatically detect spill and a scroll bar will appear..
Finally our Footer, We will do the padding and margin styling here too as the footer is too much stacked to the container of our text:
Code:
Final Touches
Now our Site looks ok but we might want to add some extra effects just for good looking. I want to add shadows on the text and the logo etc so first we will add shadow to the logo. Normal the logo will appear a little dim but when someone hovers the mouse on it, the logo will glow Just like the logo of Hackcommunity:
Code:
Add this after the #logo CSS, you can change the color of the shadow by replacing the color code after '#' in the Style.
The containers have sharp pointy edges, we want to make them round. For that we use:
Code:
Put this inside the #logo, #menu li, #footer and the #content CSS. Now refresh the page and you'll get rounded corners which looks nice.
We want shadows on the boxes too, For that we use the box-shadow property.
Code:
Also we want the menu buttons to change colors once someone hovers mouse over it, for that add this code after the #menu li
Code:
Now you have completed you first Website from scratch, You should be proud.
The complete HTML Code of my website is:
Code:
Chapter 2 - Building From Scratch [Part 2]
-Constructing the Index Page (HTML)
-Using Div Tags (HTML)
-Styling Your Website (CSS)
-Finishing Touches (CSS)
Note: Before you continue make sure you've thoroughly read the the Part 1 of this tutorial, If not go here and learn first
Building Your Website From Scratch [HTML/CSS/PHP] - Part 1
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 -...
hellofhackers.com
OK so now we will code our basic Index page, We'll be using the Hello World example to build it. We've learned in the first part that HTML elements are enclosed in <html> tags, our first task is to type it down in your editor:
Code:
<html>
</html>
Code:
<html>
<head>
<title>Index Page</title>
</head>
</html>
Code:
<html>
<head>
<title>Index Page</title>
</head>
<body>
/* The body of the HTML Document */
</body>
</html>For the hello world example we want to put a heading and a big one, In html we can use the <h> tags to define weather a text is a heading. The <h> tag vary in size, they are from <h1> to <h5>. For better understanding we are going to list the Hello World text in all the <h> tags. Remember that this will go in the body tag as it's a content that we want the user to read.
Code:
<html>
<head>
<title>Index Page</title>
</head>
<body>
<h1>Hello World</h1>
<h2>Hello World</h2>
<h3>Hello World</h3>
<h4>Hello World</h4>
<h5>Hello World</h5>
</body>
</html>
Code:
<html>
<head>
<title>Index Page</title>
</head>
<body>
<h2>Hello World</h2>
</body>
</html>
Code:
<html>
<head>
<title>Index Page</title>
</head>
<body>
<h2>Hello World</h2>
<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>
</body>
</html>Using The DIV Tags
DIV tags lets you identify sections in a HTML Document, they can be used easily to associate CSS with different sections in a website like Logo, Content etc make's your code look neat and helps you manage sections easily. So lets use DIV tags and split our HTML Document into sections, For now we are going to make 5 sections having similar id attribute as the names:
1)Logo (id='logo')
2)Background(id='bkg')
3)Nav Bar(id='navbar')
4)Content(id='content')
5)Footer(id='footer')
The basic div syntax is:
Code:
<div id='section_id'>
</div>
Code:
<html>
<head>
<title>Index Page</title>
</head>
<body>
<div id='logo'>
<h2>Hello World</h2>
</div>
<div id='content'>
<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>
</div>
</body>
</html>Now to add the Nav Bar section, We will use the unordered list tags to make a list of links. The tag we will use is the <ul> and inside that tag the items will be encoded with <li> (List Item) tags, Here's the code:
Code:
<div id='navbar'>
<ul id='menu'>
<li>Home</li>
<li>About Me</li>
<li>Contact Form</li>
</ul>
</div>After the we will add the footer section:
Code:
<div id='footer'>
<p>Website Designed By Exo94</p>
<p>Member Of Hackcommunity</p>
</div>
Code:
<html>
<head>
<title>Index Page</title>
</head>
<body>
<div id='logo'>
<h2>Hello World</h2>
</div>
<div id='navbar'>
<ul>
<li>Home</li>
<li>About Me</li>
<li>Contact Form</li>
</ul>
</div>
<div id='content'>
<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>
</div>
<div id='footer'>
<p>Website Designed By Exo94</p>
<p>Member Of Hackcommunity</p>
</div>
</body>
</html>Styling Our Website
So we have completed the code of our website but by viewing it looks out of format. We need to reduce the space between the text in the footer, we need to center our logo, we need to remove the bullets from menu etc etc.
Lets start with the CSS, first we will make a style section inside the head tags of our site document after the title tags:
Code:
Code:
<head>
<title>Index Page</title>
<style type='text/css'>
</style>
</head>Now we will introduce some styling, First of all I want to have a background and all the text centered also minimal space between the text just like the paragraph above so for that lets take the whole body tag and link it to the CSS:
Code:
Code:
h1,h2,p {
margin:0; /* min Space B/w Paragraphs*/
}
body {
font-family: segoe ui;
text-align: center; /* Center text */
background-color: #909090 ;
}The firs CSS Style removes the margins, the second CSS assigns the font to all the text on the webpage as Segoe UI, Centers the text and sets the Background to the respective color.
Now we will add CSS for the logo, I'll be aligning the logo text to the left as a part of my design and will be adjusting it using the padding, What it does is that it make the area around the text in an element clear so I don't look messy.
Code:
Code:
#logo {
text-align: left; /* Align left and make adjustments */
padding-left: 20px;
padding-top: 20px;
padding-bottom: 20px; /* Bottom Spacing for menu and shadow*/
}Play with the values of the padding to understand how it works I will not go into details as you have to practice in order to lean how they function.
Then we will be adding a CSS for the id='bkg' which will hold the content, menu and log:
Code:
Code:
#bkg {
width:1024px;
height:600px;
margin:auto;
margin-top: 100px;
}We have set the width and height of the container as we don't want the text to hover all over the page, remember in this tutorial I'm making a compact website. The margin clears an area around an element (outside the border) so I'm applying the margins to center our container.
Next is our menu, First we will have to get rid of those bullets in the list and make the text come in line. For that we use the list-style and display prop. of CSS:
Code:
Code:
#menu li {
display: inline;
list-style-type: none; /* No Bullets */
float:center;
padding:5px 30px 5px; /* Separation b/w buttons */
}Now we have chosen the menu plus the li(List) because the list is inside the menu div tags so watch out for this.
And for the menu add this:
Code:
Code:
#menu {
padding-top: 10px;
}This will separate the logo from the menu with some space looking more clean.
Now we shall setup the section where our content will appear, We will be setting the width, height, padding and margin for the content so that it distinguishes from the menu and the footer and also the text inside it doesn't merge with the border making the text look dirty and unreadable.
Code:
Code:
#content {
width:1024;
height:400;
margin-top: 25px;
padding-right:2px;
padding-left: 8px;
text-align: left;
padding-top: 10px;
padding-bottom: 20px;
}I've aligned the text to the left same as the logo to make it look good, Adding padding and margin gives a cleaner look.
Again I'm saying that unless you play with the code yourself and alter the values you won't be able to learn properly!
We also have a problem, What if out content section gets filled with text? The text will come out of the container so the website will look bad. We have a simple solution:
Code:
Code:
overflow: auto;Add this to the CSS Above, this will automatically detect spill and a scroll bar will appear..
Finally our Footer, We will do the padding and margin styling here too as the footer is too much stacked to the container of our text:
Code:
Code:
#footer {
margin-top: 20px;
margin-left: 12px;
padding-top: 12px;
padding-bottom: 12px;
}Final Touches
Now our Site looks ok but we might want to add some extra effects just for good looking. I want to add shadows on the text and the logo etc so first we will add shadow to the logo. Normal the logo will appear a little dim but when someone hovers the mouse on it, the logo will glow Just like the logo of Hackcommunity:
Code:
Code:
#logo:hover {
text-shadow: 0px 0px 2px #4d4d4d, 0px 5px 10px #aeaeae; /* Logo Shadow on Hover */
}The containers have sharp pointy edges, we want to make them round. For that we use:
Code:
Code:
/* Give Round Edges */
-moz-border-radius: 10px
-webkit-border-radius: 10px;
border-radius: 10px;Put this inside the #logo, #menu li, #footer and the #content CSS. Now refresh the page and you'll get rounded corners which looks nice.
We want shadows on the boxes too, For that we use the box-shadow property.
Code:
Code:
box-shadow: 0px 0px 10px black;Also we want the menu buttons to change colors once someone hovers mouse over it, for that add this code after the #menu li
Code:
Code:
#menu li:hover {
background-color: #CC9966
}Now you have completed you first Website from scratch, You should be proud.
The complete HTML Code of my website is:
Code:
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>