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:
That AoM Guy
Mortal
(id: aom expert)
posted 10 April 2011 02:49 PM EDT (US)     26 / 57  
So is it possible to make your own website (domain) for free?
Guard of Olympus
Mortal
posted 11 April 2011 01:44 AM EDT (US)     27 / 57  
Not really, no, but you can have a subdomain for free. This tutorial and the techniqes used will however be completely free
~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 17 April 2011 04:49 AM EDT (US)     28 / 57  
Part Four: Understanding basic layout elemnts




Hi and sorry for not posting anything in this tutorial lately, I've been rather busy, but now it's finally time for the next part in this long tutorial. Anyway, you can see an image right next to this text, and it's a screenshot of one of my favourite web-design related websites: Css-tricks.com. I highly recomend you all to check it out. But that's not the reason it's the motive of the screenshot, it's because it's very clear where the aside is located, where the nav and the header and so on. As you can see, in the header there is a logo and an add. Just below the header there's a nav where the most important links and a searchbar exists. Beneath this, an aisde contains advertisements and links and polls and other cool stuff, and to the right of it the latest from the blog can be found. There's really lots of cool stuff so I once again recomend you to check that site out, excellent screencasts aswell.

So, the header should always be the "head" of the page, at the top. Divs can contain any content that doesn't fit into any other elemnts such as footer, aside, article and section. Nav contains the main navigation and perhaps also a search and other related links. An aside is a sidebar, a bar at the side of the content . The footer is below everything, it's the foot of a web page. If everything's cxlear then next time I'll move on to basic Css syntax, and after that we'll start creating our page.

E X C E R C I S E

I'll also give you an excercise, and that is to check out different websites to see if you can find where their header, footer, aside and nav is positioned. Then you'll try to figure out what content is usual for the different areas, and finally you create a basic web page in just html containing the right type of content in the right places. You can also use a tool called Firebug (Google search) to fiind these different elemnts, but I wont explain how to use that, I'll just tell you to go look for it on css-tricks.com, which I've talked a lot about in this post .
~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
That AoM Guy
Mortal
(id: aom expert)
posted 17 April 2011 11:02 AM EDT (US)     29 / 57  
Any of you guys ever heard of this book or have it?:
http://www.amazon.com/Html-Publishing-Internet-Windows-Great-Looking/dp/1566042291
I have it and it is the most straightfoward book on html I have ever seen. Just wondering.
Guard of Olympus
Mortal
posted 17 April 2011 11:35 AM EDT (US)     30 / 57  
Seems there isn't so much interest. :/
~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
That AoM Guy
Mortal
(id: aom expert)
posted 17 April 2011 11:44 AM EDT (US)     31 / 57  
Just keep posting. I'm sure people are reading.
Guard of Olympus
Mortal
posted 17 April 2011 12:55 PM EDT (US)     32 / 57  
Will do, thank you.
~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
Eurotool
Hero
posted 19 April 2011 07:44 PM EDT (US)     33 / 57  
I was asking me how sites or even HG forums do to transform HTML from posts into plain text, not codage... are every < and > "protected", so they can't apply as code or there is just some "no-HTML" zone ?
꧁ 𝓎𝑒𝓈, 𝒾 𝓁𝒾𝓀𝑒 𝓅𝑒𝓅𝑒 ꧂
That AoM Guy
Mortal
(id: aom expert)
posted 19 April 2011 08:17 PM EDT (US)     34 / 57  
^I wonder how many sites or even HG's forums transform from HTML messages to plain text
papaya
ಠ_ಠ
(id: X_MOSS)
posted 19 April 2011 10:27 PM EDT (US)     35 / 57  
There is code for the greater than (>) and less than (<) symbols.

> = &gt;
< = &lt;

When you post a > or < here, the forum code converts them into &gt; and &lt; respectively. How exactly it's done, however, is way beyond the scope of this thread.
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.

[This message has been edited by PaPaya (edited 04-19-2011 @ 10:29 PM).]

Eurotool
Hero
posted 20 April 2011 01:13 PM EDT (US)     36 / 57  
Oh yeah, thanks
꧁ 𝓎𝑒𝓈, 𝒾 𝓁𝒾𝓀𝑒 𝓅𝑒𝓅𝑒 ꧂
That AoM Guy
Mortal
(id: aom expert)
posted 20 April 2011 01:52 PM EDT (US)     37 / 57  
I eventually found out that was the problem with my favorite things thread. I had a "<" somewhere and *heyhey* wouldn't work.
Guard of Olympus
Mortal
posted 27 April 2011 11:09 AM EDT (US)     38 / 57  
Part Five: Basic CSS syntax

Hello everyone, last week I was on vacation and so no posts in this thread, but now I'm back with the next part in this tutorial, and it's from now on it's going to start geting advanced. Today, AoMHers, we start using CSS. Css stands for cascading style sheets, and you can think of it as what describes a body. Css uses the html tags such as h1 and a hrefs (links, remember?) and styles them to modify for example colour, background, border, border radius, text-shadow and font size. So how does this work? First, create a document and savce it as style.css, perhaps in your css folder. Then link to it inside the head tag: Now here's how the syntax of the .css file works:



html tag that you want to style   { css properity such as colour or background: value; }

h1   {color: red; }

You can also have many different styles:

h1 {
color: red;  // Text colour is red
background: blue; // Background of the text is blue
width: 400px; // Width of the heading is 400 pixels
height: 55px; // Height is 55 pixels
}

Any html tag within the body can be styled, it's not just limited to largeb headings. Let's make a nice looking buttons of all links:

a {
color: green; 
background: grey;
border: 1px solid black; // Sets a one pixel wide border
-moz-border-radius: 7px; // Sets border radius in mozilla browsers, the below one in webkit browsers such as chrome and safari.
-webkit-border-radius: 7px;
}


Alright, so that makes sense, we've just created a button out of every link on the page. But this also creates a problem, doesn't it? What if we only want a few links to behave like buttons? This is where a new aspect of html comes in: Classes and IDs. Classes and IDs are things you can put inside any html tag name like this:


<a href="#" id="anID" class="aClass">Button</a>

Classes and Ids are made so that they can be used by css on only tags that contains the sopecified ID or class as shown above. You target these classes and links in css like this:

.classnamehere {color: red; } // A class with the name of classnamehere has its text color set to red

#idname {color: red; } // An Id with the name of idname has its color set to red


I hope you understand what I talked about in this lesson, otherwise just ask in the comments and I'll try to explain what you don't understand. Thank you and I hope you look forward to the next part in this tutorial, goodbye!




~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
papaya
ಠ_ಠ
(id: X_MOSS)
posted 27 April 2011 03:37 PM EDT (US)     39 / 57  
Good work, although perhaps you should explain the difference between ID's and classes?
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.
Guard of Olympus
Mortal
posted 27 April 2011 04:16 PM EDT (US)     40 / 57  
Basically an Id you can only use once on every page while a class can be applied many times, which makes classes the ideal solution for generic buttons, seeing how you'll likely want atleast more than one on a few pages.

Thank you for the suggestion, much apreciated coming from someone more advanced in the field of websites than I am.
~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 28 April 2011 12:05 PM EDT (US)     41 / 57  
Part Six: Why you should use css

Hello everyone and I'm back with the next part of this tutorial, this lesson will be much shorter seeing how it's pretty obvious why you should use css instead of html to style your webpages. Html has some elements that can be used to affect the apperence of your website, such as the center tag, bgut you should never use these. Why? Well, for one reason you should always keep the content of a website (html) and the way the website looks (css) and behaves (javascript, PHP or other server side scripting language) separate from each others, for the exact same reasons as you name your triggers in aom: Readability and making bug fixes easier.

Another reason is that it is standard on the web, and you should learn to respect web standards, without them the web would be a complete mess, everyone would make their websites different and there'd be a whole lot of web browsers behaving differently.

Really short lesson, but not a much to go cover so I hope you get the basics. I guess there are more reasons. Next lesson we'll discuss some really intresting stuff.
~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-28-2011 @ 12:06 PM).]

RAMINO
Banned
posted 10 May 2011 04:12 PM EDT (US)     42 / 57  

[This message has been edited by DragonQ (edited 05-11-2011 @ 10:53 AM).]

Vladiovostok
Banned
posted 11 May 2011 10:11 AM EDT (US)     43 / 57  

[This message has been edited by DragonQ (edited 05-11-2011 @ 10:53 AM).]

Guard of Olympus
Mortal
posted 11 May 2011 10:17 AM EDT (US)     44 / 57  
GTFo of my thread.
~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
TwoHeadH
Banned
posted 11 May 2011 12:52 PM EDT (US)     45 / 57  
[ Message deleted by Yeebaagooon at 06-18-2011 06:57 AM ]
Guard of Olympus
Mortal
posted 25 May 2011 02:20 PM EDT (US)     46 / 57  
PhotobucketGoing through some of the most important things you can style with CSS coming up next.

Part Seven: Basic styling properities

Hey everyone, sorry for not posting in a really long time, I kind of forgot about this project but now I'm back to post more! In this lesson, that I'll hopefully be able to keep short and concise, we'll go through the most basic properities(things you can style with css).

We'll use a two selectors (such as divs and paragraphs) to demonstrate how these style works.

p - Color, font size, font-family, font-weight

div - Width, height, background, border, float

Colour:

Color sets the text colour of the the selector, for example this sets the text colour to red:


p {color: red; }


Font-size, family and weight

These have to do mainly with typography. Check example below:


p {
 font-size: 16px; // SETS THE SIZE OF SELECTORS TEXT TO 16 PIXELS
 font-weight: bold; // For bold text
 font-family: georgia // Sets georgia as the font
}


Width and height

Width and height are pretty simple to understand right?


div { width: 400px; height: 400px; }



Background & Border

Background is the image, color or gradient that comes behinf the contents of a selector, for example a div. We'll focus on the background color for now, because the other two are a bit more advanced. A border is something the edge of the selctor, it can be solid, dotted, set to inset and some other things.


div {
 width: 400px;
 height: 400px;
 background: blue; // Sets Background to blue
 border: 1px // The width of the border\\ solid // could be dotted or inset\\ black //The color;


I think that's it for now, we're gonna get in to much more advanced stuff once we start creating our final HTML and css, so stay tunes til' next lesson. I'd as usually love some feedback, thanks!
~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
Barney Speed
Banned
posted 13 June 2011 03:19 PM EDT (US)     47 / 57  
Yeah, Olympus! What are you ¿A mortal?
The Legacy
Mortal
(id: Ienzo)
posted 14 June 2011 00:07 AM EDT (US)     48 / 57  
I'M NOT A MORTAL HAHAHAH CUSTOM TIIIIITLEEEEEE
“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 14 June 2011 05:25 AM EDT (US)     49 / 57  
Why is it always my threads to be spammed?

Oh well, next part hopefully coming soon
~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
That AoM Guy
Mortal
(id: aom expert)
posted 18 June 2011 01:05 AM EDT (US)     50 / 57  
I want you to know I've been reading this every time its updated.
« 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