[_wind]

I'm dedicating this thread to the Brotherhood:
[img]http://i1.minus.com/iLbdJjhOluAEW.png[/img]

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

<p>
Hello world!
</p>

<p> is followed by a matching </p>.

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 <h1> and </h1> is displayed as a heading
  


• The text between <p> and </p> 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:


[!] 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:


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

<h1>This is a heading 1</h1>
<h2>This is a heading 2</h2>
<h3>This is a heading 3</h3>
<h4>This is a heading 4</h4>
<h5>This is a heading 5</h5>
<h6>This is a heading 6</h6>

Paragraphs:
Paragraphs contain the main content of your page.

Code

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

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

Code

<a href="https://hackforums.net">This is a link</a>

Images:
Images are the graphics of your site.

Code

<img src="http://x.hackforums.net/images/modern_bl/groupimages/english/complexity.gif" alt="Complexity Userbar">

You can adjust the width and height of the images as follows:
<img src="blah" ... width="Insert width" height="Insert height">

Formatting:
Make the text on your site look cool!

*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 <p> 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

<h1 id="header 1">Test</h1>

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 rel="stylesheet" type="text/css" href="FILENAMEHERE.css">
</head>

<body>
<p>Hi guys!</p>
... 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.</p>

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.SPAM.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:

• http://www.templateworld.com/free_templates.html
  


• http://www.templatemo.com/
  


• http://www.freecsstemplates.org/‎
  

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!

---

Post is reserved for future updates.

[InspectorGadget]

Very nice tutorial - thanks buddy. Keep up to the HQ work!

[Nas]

very lq thread, no grammer, does not help. LQ user

Very HQ!

[h0lybyte]

I would include a section on setting up and using wordpress as a framework for your guide.
WP is a great learning tool because you can do CSS edits and have a preview without going through the uploading procedure for each edit.

[_wind]

I would include a section on setting up and using wordpress as a framework for your guide.
WP is a great learning tool because you can do CSS edits and have a preview without going through the uploading procedure for each edit.

Wordpress is a CMS (Content Management System). Wordpress is more fit for beginners; it's more of an easier approach for web design.

However, I might include a Wordpress section in Setting up if there is high demand.

Thanks for your input.

[xhflhkeuhwguu34]

Nice tutorial, you kinda skimmed past CSS/JS though.

[_wind]

Nice tutorial, you kinda skimmed past CSS/JS though.

Good point; Ill expand those sections tomorrow.

---

I've updated a CSS and JS sections to be much longer. Good luck with your sites!

[Doxicity]

This is a very nice tutorial, and extremely in-depth. I'm sure that it will help a lot of members. Good luck!

[Nozemi™]

Very nice guide! Though I believe you forgot to explain the <head></head> tags in the start of the HTML. But other than that this guide is very nice as far as I can see! Keep up this HQ posting, that makes a good community with lots of useful information.

[Rap!st]

I quickly went trough this tutorial just to help you out with any mistakes.

- Html aint a programming language since you're not programming anything with it, you're using html and css for the design and structure of your website.

- You've forgot to explain the header text.

Other than that it seems like a HQ tut, well done.

#about wordpress.

You said "Wordpress is for noobs and you don't need any prior knowledge for it"
Aint that actually what peole here search for if they don't know how to do this trough html/css/java etc.
It could also be quite difficult if it goes to creating functioning template's or modules for it.

Again, I'm not here to disrespect you or your tutorial. I'm just posting this to help you.

Great work,

Rapist🤝

Edit: Rep+ for your contribution and time to explain this to people.

[_wind]

-snip-

Thanks so much; I fixed <header> and added <title>.

I'm going to add a Wordpress section in Managing your site.

[Rap!st]

You're welcome buddy, keep up the good work.

Rapist🤝

[J4mie]

VERY good, well in depth guide... been looking for a little extra help in these particular areas. thanks for you're help fellow Empire member <3

[HueyTheGod]

No offense and nice try and all, but you can't just cover parts of HTML and CSS like this. And don't get me started on the Javascript.

Personally, TNB is good for learning these languages easily. The w3schools link is only useful for being a wiki, and not a teacher.

You are going to have to go more in-depth on each language, and Javascript isn't even that vital unless you plan on making a more complicated site.

[xhflhkeuhwguu34]

No offense and nice try and all, but you can't just cover parts of HTML and CSS like this. And don't get me started on the Javascript.

Personally, TNB is good for learning these languages easily. The w3schools link is only useful for being a wiki, and not a teacher.

You are going to have to go more in-depth on each language, and Javascript isn't even that vital unless you plan on making a more complicated site.

Javascript is vital for many things like interactivity. I wouldn't say it's not vital.