Basic guide for making a website

Guest

Unregistered

4 Years of Service

03-30-2014, 05:41 AM

#1

Let's say you are new to web development and want to start up your own site. At the end of this tutorial, you should be able to make your own site and manage it as you wish. We won't be using free web development sites such as Webs, Wix, or Weebly.

In this tutorial, I'll cover:

The programming languages used on the web
What you will need
A-Z guide on how to start up a site

== Programming Languages you should know ==

HTML
CSS
Javascript

In this tutorial, we will be making a static webpage. For more info, search up Web 2.0 on Google. I will be covering the basics of HTML, but for detailed tutorials on HTML, CSS, and Javascript check out http://www.w3schools.com/. I won't be covering HTML5 in this tutorial.

Without further ado, let's get started on the basics of HTML.

HTML

What is HTML?

HTML stands for Hyper Text Markup Language. HTML is used to make the back bone of your site. HTML achieves color, text, font, graphics, and hyperlinks in code similar to BBCode.

HTML syntax
HTML uses angle brackets: < & >

Every pair of opening brackets must have matching closing brackets, exactly like BBCode.

Ex.

Code:
Hello world!

is followed by a matching
.

This is the basics of an HTML document:

The DOCTYPE declaration defines the document type
The text between <html> and </html> describes the web page
The text between the <head> and </head> is the header
The text between <title> and </title> is this part:
The text between <body> and </body> is the visible page content
The text between and is displayed as a heading
The text between and
is displayed as a paragraph

Every HTML document starts with a <!DOCTYPE html>.

It is then usually followed up with a <html>, and <body>.

This is the HTML structure:
[Image: 5Zy3q.png]

[!] Remember to put a <!DOCTYPE html> before the document!

You can use a HTML tester such as: http://www.draac.com/htmltester.html

to test your code without needing to save and run everytime.

Testing the code above, something like this should appear:
[Image: 5Zygp.png]

In conclusion, HTML is the back bone of your site, it is used everywhere, and the usage is as following:

Headings:
Headings start from 1 to 6. 1 is big, while 6 is small. Headings are used for titles/subtitles of your page.

Code:
This is a heading 1

This is a heading 2

This is a heading 3

This is a heading 4

This is a heading 5

This is a heading 6

Paragraphs:
Paragraphs contain the main content of your page.

Code:
This is a paragraph.

This is another paragraph.

Links:
Links are the clickable things that redirect you to another page.

Code:
[url=http://hackforums.net]This is a link[/url]

Images:
Images are the graphics of your site.

Code:
[img]http://x.hackforums.net/images/modern_bl/groupimages/english/complexity.gif[/img]

You can adjust the width and height of the images as follows:
[img]blah[/img]

Formatting:
Make the text on your site look cool!
[Image: 5ZyMd.png]

*Image taken from W3Schools

You can try the code above in an online code tester.

CSS

What is CSS?
CSS stands for Cascading Style Sheets. CSS is used to make your site look pretty and appealing to whoever visits your site.

CSS Syntax
A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly brackets.

Code:
p {color:red;text-align:center;}

This would make all tags red and aligned in the center.

CSS comments are like comments in Java, they start with /* and end with */.

Code:
/*This is a comment*/

Comments make your code more readable so you seem more organized.

Why is CSS so useful?

I mean, I could always change the color via HTML, but if you use CSS, it saves you work from copy/pasting your color codes, fonts, all around your website.

Color
Color in CSS can be specified through 3 different ways.

a HEX value - like "#ff0000"
an RGB value - like "rgb(255,0,0)"
a color name - like "red"

CSS id's

CSS id's/variables contain a chunk of code which define something. CSS id's start with a pound sign/hash tag ("#")

For example:

Code:
#header1

{

text-align:center;

color:red;

}

It's like Twitter all over again!

Now, in HTML, any thing that will have an id of header1.

So:

Code:
Test

Will be aligned in the center and colored red.

[!] Never start id's with a number.

Inserting CSS

There are currently 3 supported ways of inserting CSS:

External
Internal
In-line

External

External means that the .css file (stylesheet) is applied to multiple web pages. This could be for example:

index.html
about.html
purchase.html

Could all use the same style sheet over and over.

In your document, <head> comes before <body>.

Insert the <link> tag to link an external CSS page.

Example:

Code:
<head>

<link type="text/css" href="FILENAMEHERE.css">

</head>

<body>

Hi guys!

... more stuff here

</body>

Internal
If you have multiple pages with unique styles, Internal would be your choice.

Internal styles use the <style> tag.

An example is below:

Code:
<head>

<style>

hr {color:sienna;}

p {margin-left:20px;}

body {background-image:url("https://www.google.com/images/srpr/logo11w.png");}

</style>

</head>

In-line
In line style sheets are defined in your parenthesis. In-line styles require more work to get the same style for multiple things.

In-line styles are used like this:

Code:
<p style="color:sienna;margin-left:20px;">This is a paragraph.

That paragraph will be sienna colored, and the margin to the left will have 20px.

Adding Background

Background can be one of the things that make your site appealing. You can either add a repeating background or a non repeating background.

In CSS, a solid color background would look like this:

Code:
body {background-color:#b0c4de;}

This would give you a light grayish/blue background.

To add a background image, the code is:

Code:
body {background-image:url('somecooltexture.png');}

Make sure your text is still readable.

Setting repeat

To decide if you want your background to repeat or not, do the following:

Repeat:

Code:
background-repeat:repeat;

No repeat:

Code:
background-repeat:no-repeat;

Text decoration
To change your text to be overlined, crossed out, or underlined, you can pick one of the following codes to your liking.

Code:
h1 {text-decoration:overline;}

h2 {text-decoration:line-through;}

h3 {text-decoration:underline;}

Text Transformation

In programming languages such as Java and C++, you have to manually convert them to uppercase with a for loop. In CSS, they have default functions built in for you to use.

Code:
p.uppercase {text-transform:uppercase;}

p.lowercase {text-transform:lowercase;}

p.capitalize {text-transform:capitalize;}

Changing fonts
To make your website look more dazzling, you need to change fonts.

Code:
p{font-family:"Times New Roman", Times, serif;}

This would give you the text in Times New Roman, which is in the Times family, and serif.

That's all I have for CSS, good luck with decorating your site!

Javascript

What is Javascript?
Javascript is a code similar to Java that can be inserted into HTML. Javascript is used by sending eMails, forms, and much more.

Javascript is one of the most fun languages to use on the web. In the following paragraphs, I'll explain everything you need to know about Javascript.

Javascript syntax

All Javascript functions end with a semicolon (;)
There are sub function that are used with a dot (.) ex. x.innerHTML

Javascript code is written between <script> tags. In the example below, I'll make a pop-up saying: Hello world!

Code:
<script>

alert("Hello world!");

</script>

On page reload, an alert box will pop up.

Functions

Functions are the interactive part of web coding. I'll make an alert box pop up when a button is clicked. Functions always start and end in a curly brace; like Java.

Code:
[color=#FF0000]<script>

function myFunction()

{

alert("I love Javascript!");

}

</script>[/color]

[color=white]<body>

<button type="button" onclick="myFunction()">Click me!</button>

</body>

[/color]

When the button is clicked(highlighted in white), it will activate the function: myFunction(). (shown in red). An alert box will popup saying: "I love Javascript!".

Changing styles

CSS and HTML and static. Their style stays the same. With Javascript, you can modify the styles in-code.

First, you need to get the ID of the element.

Code:
x=document.getElementById("paragraph1")

Then you are free to do as you please. In this case, I will change the color.

Code:
x.style.color="#ff0000";

Comments
Comments help clean up your code and make stuff more readable.

In Javascript, comments are defined like:

Code:
//This is a comment

...some code here

Multi lined comments are like this:

Code:
/*

Developer: Un.titled

Comment: I have swag

Date: 01/10/13

*/

Variables

Variables store data for future use. They are very useful and are found everywhere in programming.

Variables are defined like:

Code:
var x=5;

var y=2;

You can then carry on to do some operation with variables like:

Code:
alert("2+5 is " + (x + y));

alert(x*y);

alert(x%y);

if(x>y){

alert("x is bigger than y");

}

And so on, and so forth.

Loops
Loops are the things where you execute your code, make comparisons and where your algorithms take place.

Javascript has 2 loops.

While and For.

Code:
//This is the for loop

for(int i=0;i<10;i++){

alert(i);

}

That will print numbers from 1 to 10.

Code:
//This is the while loop

while(true){

alert("hi");

}

This will keep printing out "hi" infinitely, and crash your browser.

Great! Now you're finished the basics. Let's get onto making your site, shall we?

== What you will need==

To startup a site for others to view, you will need:

A domain name http://namecheap.com/
Hosting (Free or Paid) http://www.000webhost.com/ or http://www.hostgator.com/
A text editor http://notepad-plus-plus.org/ or http://www.adobe.com/products/dreamweaver.html

== Making and uploading your site==

Open up your text editor and start coding your website. Refer to the section above about HTML and CSS to make your site. For beginners I recommend using Dreamweaver, as it's drag and drop. You also get instant results. If you don't have the money, you can always use Notepad++. In your site folder, you should have an index.html file, style.css, an images folder, and somewhere to put your Javascript files.

index.html is the home of your site, and you can add more pages, by duplicating it and renaming it to something like about.html. Add a hyperlink from page to page, and your site should be done very soon.

Once everything is set, use an FTP client (https://filezilla-project.org/) to upload your files to a host. Link your domain name to the host, and enter the domain name into your navigation bar. You will be redirected to the index.html of your site, and voila.

If coding a site is too stressful for you, you can download some templates, open the .html file and edit the code to your liking. Some places to find template would be:

More content will be added soon, but for now, this is it.

Thanks for reading and the best wishes for your future site!

[!] If you need help, don't hesitate to contact me via PM, I'll gladly help you out!

Go Upstairs

Reply

Guest

Unregistered

4 Years of Service

03-30-2014, 05:42 AM

#2

This is a beautiful tutorial! Thank you for this addition

Go Upstairs

Reply

Lord Royal