You must be logged in to post messages.
Please login or register

Halls of Valhalla
Moderated by Yeebaagooon

Hop to:    
loginhomeregisterhelprules
Welcome! You are not logged in. Please Login or Register.
57 replies
Age of Mythology Heaven » Forums » Halls of Valhalla » A complete guide to creating websites
Bottom
Topic Subject: A complete guide to creating websites
« Previous Page  1 2 3  Next Page »
Guard of Olympus
Mortal
posted 03 April 2011 09:55 AM EDT (US)   






The Complete Guide to Creating Websites


By Guard of Olympus






This is a thread dedicated to a turoial I am writing. It'll contain 25 parts that are all divided into posts. You can find the table of contents further down...
I don't know if there's a large intrest for this, but anyways, enjoy!



Intro One: Introduction

What is this?

This is a tutorial intended for the absolute beginner and it will teach you how to create a fully functioning website using modern standards such as HTML, CSS, Javascript and in the end we'll implement our website into a CMS making it easy to update.

Why are you doing this?

I thought it'd be cool to do a tutorial on making websites because so few know how to create a nice site even though it's very simple. I've also been thinking about creating a blog and I'll be able to post this tutorial as content on that blog. I also think people from these forums can benefit from learning these things, it might also generate some more activity here on the forums which I guess would be nice.

How many parts will you write?

I've planned to write 25 parts, one or two a week so it'll take quite a lot of time to finish, but it'll be great to try out this project.

Do you need any help?

Yes, I'd like some help with a couple of things:


  • Spellchecking - I'm not natively english

  • Feedback - If something's confusing or wrong, please tell me about it




T A B L E   O F   C O N T E N T S

0. Introduction
0.1 Tools
1. The basics of html
2. Basic html elements
3. Layout elements
4. Understanding layout elements and where they are to be placed
5. CSS syntax
6. Why you should use css
7. Styling properities
8. Creating a mockup
9. Creating the basic website and design - Typography, margins, padding and colour.
10. Other css resources
11. Beginning with javascript
12. Choosing a javascript library
13. Jquery functions and syntax
14. Creating the javascript
15. Jquery resources
16. Introduction to Wordpress
17. Wordpress vs other cms
18. Usage of CMS'
19. Installing wordpress
20. Converting html/css/javascript website to Wordpress step 1
21. Converting html/css/javascript website to Wordpress step 2
22. Converting html/css/javascript website to Wordpress step 3
23. Finishing website
24. Further reading
25. Usefull resources




I also apreciate feedback on this idea!

Am I crazy and is there absolutely no interest for a tutorial like this? Please tell me! Are you intrested in learning and think that this tutorial is a good idea? Tell me that too! I apreciate any feedback.


~Guard of Olympus ~
_______________________________________
Jag ser mot solen och tankarna de för mig hem till AomH SD igen
Learn how to create a website from scratch!
_______________________________________
Dark Times|My work (4.6)|Teaser #2

[This message has been edited by Guard of Olympus (edited 05-25-2011 @ 02:21 PM).]

Author
Replies:
Guard of Olympus
Mortal
posted 03 April 2011 10:13 AM EDT (US)     1 / 57  
Intro Two: Tools



So what tools are needed for creating websites? There are a large number of free tools that are awesome, and here's what I'll be using.

Firefox 4 is a modern web browser that was just recently released. It's awesome.









Notepad ++ is a great coding editor for Windows. What's even better is that it's completely free. It has some great features and a lot of plug-ins.






Photoshop is a great image editing tool, but if you don't have it regular Paint will do just fine.






So that's it...Those are the primary tools I'm using for this tutorial. Great resources for photoshop can easily be found through Google, but I just thought I'd recommend www.psd.tutsplus.com, a great site created by Envato.
~Guard of Olympus ~
_______________________________________
Jag ser mot solen och tankarna de för mig hem till AomH SD igen
Learn how to create a website from scratch!
_______________________________________
Dark Times|My work (4.6)|Teaser #2

[This message has been edited by Guard of Olympus (edited 04-03-2011 @ 11:33 AM).]

The Legacy
Mortal
(id: Ienzo)
posted 03 April 2011 10:29 AM EDT (US)     2 / 57  
Good luck teaching CSS. You'll need it.
“And those who were seen dancing were thought to be insane by those who could not hear the music.”
― Friedrich Nietzsche
Guard of Olympus
Mortal
posted 03 April 2011 10:42 AM EDT (US)     3 / 57  
Alright, thank you...It shouldn't be too hard once you get a grip of the basic syntax...
 element name   { properity: value }
h1 { color: red }
~Guard of Olympus ~
_______________________________________
Jag ser mot solen och tankarna de för mig hem till AomH SD igen
Learn how to create a website from scratch!
_______________________________________
Dark Times|My work (4.6)|Teaser #2
Guard of Olympus
Mortal
posted 03 April 2011 11:17 AM EDT (US)     4 / 57  
Part One: Basics of Html


If you've ever tried modding in AoM, you'll most likely feel a bit comftable with coding in HTML. Html isn't really a programming language, but more of a describing language. You can think of as html the body of the website, aswell as all information search engines will get is based on html.

Html uses the file extension .html, so any file you save as .html will be able to be read by a browser.

HTML have two different types of elements.

The first type of element is the type of element that surrounds soemthing, let's say text. This is done by opening the elemnent for text, which is a paragraph tag. It looks like this.



<p>   //That opens a paragraph tag


After that you can insert all the text you want in your paragraph, let's say we want to insert the classic "Hallo World" example:


 <p> Hello World


So now we've opened a paragraph tag or element, but to not have all our conents such as lists and images and lists inside paragraph tags (html breaks if you do so) we must close the paragraph. This is done by entering the same tag as we started with (p) and then putting a / just after the opening < of this closng tag, like this:



 <p>Hello World </p>


It works like this for any of these surrounding elements.


 <ul> Opens unordered list

<li>Opens list item </li> Closes list item
</ul> Closes unordered list



Now let's see what our first example looks like in Firefox. If you open Firefox you'll see that the text Hello world appears.


The other type of elemnts are those that are all within one tag, one example of such are images, line breaks and hrs:



<img src="lalala" /> Ends with />
<br /> Line break
<hr /> Horizontal rule


That's all for today I think. Next time I'll explain some more basics of html, then we'll move on to layout and css.
~Guard of Olympus ~
_______________________________________
Jag ser mot solen och tankarna de för mig hem till AomH SD igen
Learn how to create a website from scratch!
_______________________________________
Dark Times|My work (4.6)|Teaser #2

[This message has been edited by Guard of Olympus (edited 04-05-2011 @ 09:50 AM).]

The Legacy
Mortal
(id: Ienzo)
posted 03 April 2011 12:19 PM EDT (US)     5 / 57  
Will you be teaching FTP usage as well? Knowing how to use FTP is essential if you want to upload your website after all.

EDIT: That is, unless you're using Wordpress as a replacement. FTP is still a useful thing to learn though.
“And those who were seen dancing were thought to be insane by those who could not hear the music.”
― Friedrich Nietzsche

[This message has been edited by Ienzo (edited 04-03-2011 @ 12:20 PM).]

Guard of Olympus
Mortal
posted 03 April 2011 12:32 PM EDT (US)     6 / 57  
I'll upload wordpress to the server and let it handle everything else. ALso, note that the word complete in the title may not mean that you will learn everything there's to learn,. there's a lot more to learn than any one person can ever teach.
~Guard of Olympus ~
_______________________________________
Jag ser mot solen och tankarna de för mig hem till AomH SD igen
Learn how to create a website from scratch!
_______________________________________
Dark Times|My work (4.6)|Teaser #2

[This message has been edited by Guard of Olympus (edited 04-03-2011 @ 12:33 PM).]

Eurotool
Hero
posted 03 April 2011 06:57 PM EDT (US)     7 / 57  
Very good, very good. But your ref #0 doesn't work :/
꧁ 𝓎𝑒𝓈, 𝒾 𝓁𝒾𝓀𝑒 𝓅𝑒𝓅𝑒 ꧂
That AoM Guy
Mortal
(id: aom expert)
posted 03 April 2011 10:31 PM EDT (US)     8 / 57  
Yeah I wanna know how to make my own legit website for free. Is this possible?
Eurotool
Hero
posted 03 April 2011 10:36 PM EDT (US)     9 / 57  
[This message has been edited by Guard of Olympus (edited 04-03-2011 @ 12:33 PM).]
Holy sh*t your "edit message" is bold !
꧁ 𝓎𝑒𝓈, 𝒾 𝓁𝒾𝓀𝑒 𝓅𝑒𝓅𝑒 ꧂
That AoM Guy
Mortal
(id: aom expert)
posted 03 April 2011 10:42 PM EDT (US)     10 / 57  
At first I assumed it was part of his sig... but really, wth?

edit: I

edit: think

edit: it

edit: comes

edit: from editing your message too many times? nah.

Perhaps he stared a [b] at the end of his sig and didn't finish it.

[This message has been edited by Aom Expert (edited 04-03-2011 @ 10:46 PM).]

Troy_Im_No_Noob
Mortal
posted 04 April 2011 01:02 AM EDT (US)     11 / 57  
Sorry if you've mentioned it somewhere, I haven't taken the time to read through any parts yet, but do you have to purchase any software to use this guide properly?
1. Perfection is impossible.
2. Nothing is impossible.
3. There are always exceptions.
Guard of Olympus
Mortal
posted 04 April 2011 10:18 AM EDT (US)     12 / 57  
You do not have to purchase anything to use this guide correctly, see the tools section.

On the sig thing, I haven't properly cloesed my opeining bold tag.

EDIT: edited
~Guard of Olympus ~
_______________________________________
Jag ser mot solen och tankarna de för mig hem till AomH SD igen
Learn how to create a website from scratch!
_______________________________________
Dark Times|My work (4.6)|Teaser #2

[This message has been edited by Guard of Olympus (edited 04-04-2011 @ 10:23 AM).]

Guard of Osiris
Mortal
posted 04 April 2011 10:23 AM EDT (US)     13 / 57  
If you have a [ b ] in your text without a [ /b ] then the edit messages will become bolded.
castwcrt rip 2010-2010
Guard of Osiris
Mortal
posted 04 April 2011 10:27 AM EDT (US)     14 / 57  
Ninja'd.
castwcrt rip 2010-2010
Guard of Olympus
Mortal
posted 04 April 2011 10:52 AM EDT (US)     15 / 57  
Related lesson 1: The Structure of websites

Hello and welcome to this realated lesson. What is a related lesson you might ask, and my answer is that it's something related to building websites, that may be obvious to some but usefull for others. They can also contain some tips for creating websites that are not directly related to html, css, javascript etcetera. My plan for this kind of quick course is that I'll be able to show of tricks for indenting code, writing faster code, debugging code and in this case, understanding the structure of websites.

Websites need to have a basic structure. The homepage that you want to be found first should, for example always be named index.html or index.php. From this file you can link to other html files and mages, that can be namned in whatever way you like. The place where your .html is located is called the root folder, and if you're working locally you must have websites in separate folders. I prefer the below basic structure for making my websites.




If you have any questions, please post them!
~Guard of Olympus ~
_______________________________________
Jag ser mot solen och tankarna de för mig hem till AomH SD igen
Learn how to create a website from scratch!
_______________________________________
Dark Times|My work (4.6)|Teaser #2
Myles_Kennedy
Mortal
(id: Jack D P)
posted 04 April 2011 04:50 PM EDT (US)     16 / 57  
Good work so far Olympus, very easy to understand. Could help me a bit in the future.
"I even heard rumors of a return of the SST (hint, hint..)" - Elrich

You heard it folks... Spam him until he makes a new SST thread!
papaya
ಠ_ಠ
(id: X_MOSS)
posted 04 April 2011 06:52 PM EDT (US)     17 / 57  
<hr /> Horizontal row -- Needn't ever be used
I would disagree, the horizontal rule is actually a useful tag at times. For example, the line separating your post from your signature on this forum is a <hr> element.
oh you can wait for what I can give
you know what I am so you know how I live
try to look proud but you’re not in the slightest
its happening now and it’s always been like this.
buppy
Mortal
(id: pubby8)
posted 04 April 2011 07:11 PM EDT (US)     18 / 57  
There are 129,000,000 almost-identical guides out there.
That AoM Guy
Mortal
(id: aom expert)
posted 04 April 2011 07:15 PM EDT (US)     19 / 57  
On the sig thing, I haven't properly cloesed my opeining bold tag.
I knew it!
Troy_Im_No_Noob
Mortal
posted 05 April 2011 05:42 AM EDT (US)     20 / 57  
There are 129,000,000 almost-identical guides out there.
And the problem is finding one of the 20 good ones almost them all, and then even further amongst the 100,000,000,000 unrelated pages that come up in search engines.
1. Perfection is impossible.
2. Nothing is impossible.
3. There are always exceptions.
Guard of Olympus
Mortal
posted 05 April 2011 08:42 AM EDT (US)     21 / 57  
@Pubby| I agree there are a lot of similar guides, but not so many that guide you from the very beginning to implementing your website in a CMS, you can view it as somekind of html all the way to php tutorial. I'll also try to point people at the great resources I've found during the not so long time I've been intrested in web design.

@Papaya| Very true, my mistake. Thak you for telling.

@Everyone else| Thank you for the feedback, soon more to come...
~Guard of Olympus ~
_______________________________________
Jag ser mot solen och tankarna de för mig hem till AomH SD igen
Learn how to create a website from scratch!
_______________________________________
Dark Times|My work (4.6)|Teaser #2

[This message has been edited by Guard of Olympus (edited 04-05-2011 @ 08:42 AM).]

Guard of Olympus
Mortal
posted 05 April 2011 09:36 AM EDT (US)     22 / 57  
Part Two: Basic Html Elements

Hello and welcome to part two (Fifth if you count with the related post and the intro posts. ), this time I'm going to explain the most basic html elemnts, now that you (hopefully) have an understanding of how they work.


HTML is really only meant to be what describes the content, and you should always think of it that way. There's not really any need for bolding tags and html colours, because all of this can be handled by css, css is what describes how html looks but more on that later. Anyway, html documents start by declaring the html doctype. This is good practise but not necessary for your html to be viewed by the browser. It looks like this:


<!DOCTYPE HTML>

After the doctype you should insert the html tag, inside which all other html goes. It looks like this.

<html>

</html>

Now inside the html, there are always two different areas, one for the information search engines and browsers will pick up such as page titles, keywords and the character set you're using (needn't bother to much about that one unless you want to write with certain symbols that the regular charset doesn't support), and one where all the information you'll see on screen goes...The first of these two is called head and looks like this.

<head>

</head>

The other one is called body and looks like this:

<body>

</body>

We'll be focusing mainly on the body today, but just for good practise you can paste this into your html document:

<!DOCTYPE html>
<html>
   <head>
      <title>This is an HTML document... </title>

   </head>
   <body>

   </body>

</html>


Alright, so now that you've got the basic structure of each individual html document it's time to learn the basic html tags such as lists, text, headers, images, links and such.


Regular text, blockquotes and headers

We've already seen text at work, it uses the paragraph tag (see lesson one), but here's how blockquotes (quotes) and headers work.

<h1>Text here</h1> // Gives a large heading
<h2>Text here</h2> // Gives a slighly smaller heading
<h3>Text here</h3> // Gives a mesium heading
<h4>Text here</h4> // Rather small heading
<h5>Text here</h5> // Small Heading
<h6>Text here</h6> // Very small heading

// You should only use the largest heading once, but you can use the others several times...

<blockquote> Quote here </blockquote>

// Easy to understand I think...

Ordered and unordered lists

I belive we've also already touched on the subject of lists, but here's a quick summary anyways:

<ul> // Starts unordered list
<li>Text here</li> // Opens and closes a list item 
</ul> // Closes the unordered list

<ol> // Starts ordered list
<li>Text here</li> // Opens and closes a list item 
</ol> // Closes the ordered list


Images and links

These are a little bit tricky, but I'm sure you'll understand.

Images and links can either exist on the net when you decide to link to them in your html document, or you can have them as files in your websites folder. I usually put all my images in a separate images folder under the root folder, which is where all html files exist. Any file can be a link, not only html documents but also music and images. Images on the other hand can only be images, and the code for getting an image to display on your website is as following:

<img src="images/image.jpg" alt="Describing the image is done here" />

// Basically what you do by doing this is declaring where to img src is located and how you would describe it... 
The source of the image is declared after the src= and inside the " ". 
Note that you must include the file extension for the image at the end of the image name, so if your image is a png you must have it be "filename.png".
 Note also that if the image wasn't located inside the image folder there'd be no need for having the filename be "images/image.jpg"...


Linking to another file is done this way:

<a href="filename.html">The link text that'll be displayed</a> // Builds on the same foundations as images...

That's it for this time, hopefully I wasn't too confusing this time either ut if so, just tell me! Next time we'll start with layout elements in HTML, but if you want to know some more about all the tags W3SChools explains them all here.
~Guard of Olympus ~
_______________________________________
Jag ser mot solen och tankarna de för mig hem till AomH SD igen
Learn how to create a website from scratch!
_______________________________________
Dark Times|My work (4.6)|Teaser #2

[This message has been edited by Guard of Olympus (edited 04-05-2011 @ 09:46 AM).]

DragonQ
SC2H Seraph
posted 05 April 2011 10:44 AM EDT (US)     23 / 57  
At least you're using valid (X)HTML, unlike a lot of sites. JPEGs suck for screenshots though, use PNGs.
Take my love, take my land, take me where I cannot stand.
I don't care, I'm still free, you can't take the sky from me.
Take me out to the black, tell them I ain't comin' back.
Burn the land and boil the sea, you can't take the sky from me.
There's no place I can be, since I found Serenity.
But you can't take the sky from me...
The Legacy
Mortal
(id: Ienzo)
posted 05 April 2011 12:34 PM EDT (US)     24 / 57  
JPEGs suck for screenshots though, use PNGs.
This. PNGs allow for higher quality results since there's no compression involved. But if the image is a large size, the size of the file would be much bigger than JPG.
“And those who were seen dancing were thought to be insane by those who could not hear the music.”
― Friedrich Nietzsche
Guard of Olympus
Mortal
posted 08 April 2011 01:10 PM EDT (US)     25 / 57  
Part Three: Layout Elements

So now that you understand the basics of HTML we'll proceed on by starting with layout elements, which are the html tags that are to be used for layouts (surprise, surprise!).

Layout elements hold other html inside of them, and these layout elements are to be placed in the body of the html.

These are the most important layout elements:


<div></div> //Can be any of the below plus many more
<header></header> // The page header
<nav></nav> // Where the navigation goes
<aside></aside> // A sidebar
<footer></footer> // The Footer


This was just a very short introduction, next time we'll dissect a website to see where the different elements are used, you'll also be introduced to Firebug. I'd also really apreciate some feedback on the previous parts.
~Guard of Olympus ~
_______________________________________
Jag ser mot solen och tankarna de för mig hem till AomH SD igen
Learn how to create a website from scratch!
_______________________________________
Dark Times|My work (4.6)|Teaser #2
« Previous Page  1 2 3  Next Page »
Age of Mythology Heaven » Forums » Halls of Valhalla » A complete guide to creating websites
You must be logged in to post messages.
Please login or register
Hop to:    
Age of Mythology Heaven | HeavenGames

Copyright © 1997–2024 HeavenGames LLC. All rights reserved.
v2.5.0