How to make a web site series 2: Planning a website
Simple tutorials on planning a website, which is an lens continuation from HowToMakeAWebsite_Article1
Plannning out the website
Welcome back!
Now that our environment is setup time to go over HTML! HTML is a browser side
language ( a.k.a client side language ) meaning that the web browser (i.e Internet
Explorer, Firefox, Opera, Chrome..etc ) read and translate the HTML language along with any browser side (client side) scripts like JavaScript, Vb script..etc.
More on scripts later. In the previous article I gave you this code:
<html>
<head>
<title>This is my first web site</title>
</head>
<body>
Hello Everyone, I made this!!!!
</body>
</html>
This is the most basic template to make a web page. If you look closer you'll notice
<> and </>, these are called tags, or more specifically 'open tag' and 'close tag'.
Everything in between is specific to that section. Not everything will have open and close tags, but majority of the code will. Starting at the top is the opening of the web page.
To the browser, it says ok, starting reading me at letting it know it is an html
page, while it approaches the bottom, it translates the page until which tells it to stop, and if you're wondering, it does this every time you hit the refresh button on the browser. Next is , everything in here is a special area for the browser to apply specifics things, like finding scripts or format pages(CSS pages) that are external, or apply specific scripts like JavaScript or styles like CSS ( more on that later ).
Also, you'll notice , this is the only location to apply a title that appears on the title bar on the browser for your web page.
The last thing we have is , this is the main content area where you specify the stuff you want to place in your page like article content and images..etc.
Now the most important thing that will make it a good or bad site! What is it? You ask.
Planning! ( Also the most ignored step for beginners )
Most people want to jump to the advance stuff and puff make things happen. We'll that doesn't work, it just causes more headaches in the long run. Creating a web page from scratch takes time and creativeness, since you basically have a blank canvas that you must pour your time into. Having the content first, everything else
well come together in the end, because after this it's all visual, so learning the syntax will take time but as you progress, then your site will look more like how you envisioned it.
Questions you should ask yourself when starting from scratch:
1) What do I want to convey to the person seeing my site?
2) Who is my audience? Adults, Teens, Children, Students( college, high school....etc) and so fourth.
3) What are my categories of my content
For example: A math tutoring site
1) I want to convey the everyday use of mathematics through real life examples
2) My audience: Every level of education up to 2yr college
3) Categories: Entry level math, Intermediate math, Advance Math up to college algebra.
So my web page and navigation will look like:
You get the idea. I can have four main pages, or every item can be a page on the subject. Once your planing is done, then we will need to organize it so it can look nice and easy to navigate.
Sample: Main Page with Three sub pages in my main menu and when one is clicked the side menu will display the categories for that level.
|----------------------------------------------|
| Header |
|----------------------------------------------|
| Entry Level | Intermediate | Advance|
|----------------------------------------------|
| The Body |
|----------------------------------------------|
| Footer |
|----------------------------------------------|
There are many ways to create a web page, typically you normally have a
header, menu(left side,right side, center), body, and footer. The way you organize is up to you and your creativity. Just keep in mine the person who is going to see, must find it easy to view, navigate and interesting. Otherwise, they will get bored and move on.
Think of different ways to organize your site. When you are browsing other websites, see how they organize it, look at their layout so you can get exposed to different ways on doing things.
Come up with your ideas, for now we'll use my template I drew and add your content and link in place of mine so instead of doing this tutorial with my site, by the end you will have yours done.
Let's continue to Article #3:
The Template appears!!!
Now that our environment is setup time to go over HTML! HTML is a browser side
language ( a.k.a client side language ) meaning that the web browser (i.e Internet
Explorer, Firefox, Opera, Chrome..etc ) read and translate the HTML language along with any browser side (client side) scripts like JavaScript, Vb script..etc.
More on scripts later. In the previous article I gave you this code:
<html>
<head>
<title>This is my first web site</title>
</head>
<body>
Hello Everyone, I made this!!!!
</body>
</html>
This is the most basic template to make a web page. If you look closer you'll notice
<> and </>, these are called tags, or more specifically 'open tag' and 'close tag'.
Everything in between is specific to that section. Not everything will have open and close tags, but majority of the code will. Starting at the top is the opening of the web page.
To the browser, it says ok, starting reading me at letting it know it is an html
page, while it approaches the bottom, it translates the page until which tells it to stop, and if you're wondering, it does this every time you hit the refresh button on the browser. Next is , everything in here is a special area for the browser to apply specifics things, like finding scripts or format pages(CSS pages) that are external, or apply specific scripts like JavaScript or styles like CSS ( more on that later ).
Also, you'll notice , this is the only location to apply a title that appears on the title bar on the browser for your web page.
The last thing we have is , this is the main content area where you specify the stuff you want to place in your page like article content and images..etc.
Now the most important thing that will make it a good or bad site! What is it? You ask.
Planning! ( Also the most ignored step for beginners )
Most people want to jump to the advance stuff and puff make things happen. We'll that doesn't work, it just causes more headaches in the long run. Creating a web page from scratch takes time and creativeness, since you basically have a blank canvas that you must pour your time into. Having the content first, everything else
well come together in the end, because after this it's all visual, so learning the syntax will take time but as you progress, then your site will look more like how you envisioned it.
Questions you should ask yourself when starting from scratch:
1) What do I want to convey to the person seeing my site?
2) Who is my audience? Adults, Teens, Children, Students( college, high school....etc) and so fourth.
3) What are my categories of my content
For example: A math tutoring site
1) I want to convey the everyday use of mathematics through real life examples
2) My audience: Every level of education up to 2yr college
3) Categories: Entry level math, Intermediate math, Advance Math up to college algebra.
So my web page and navigation will look like:
- Main Page
- Home
- About me
- Contact Us
- Center Main Menu
- Entry Lv Pg
- Addition
- Subtraction
- Multiplication
- Intermediate Lv Pg
- Add w/ fractions
- Square Roots
- Advance Lv Pg
- polynomials
You get the idea. I can have four main pages, or every item can be a page on the subject. Once your planing is done, then we will need to organize it so it can look nice and easy to navigate.
Sample: Main Page with Three sub pages in my main menu and when one is clicked the side menu will display the categories for that level.
|----------------------------------------------|
| Header |
|----------------------------------------------|
| Entry Level | Intermediate | Advance|
|----------------------------------------------|
| The Body |
|----------------------------------------------|
| Footer |
|----------------------------------------------|
There are many ways to create a web page, typically you normally have a
header, menu(left side,right side, center), body, and footer. The way you organize is up to you and your creativity. Just keep in mine the person who is going to see, must find it easy to view, navigate and interesting. Otherwise, they will get bored and move on.
Think of different ways to organize your site. When you are browsing other websites, see how they organize it, look at their layout so you can get exposed to different ways on doing things.
Come up with your ideas, for now we'll use my template I drew and add your content and link in place of mine so instead of doing this tutorial with my site, by the end you will have yours done.
Let's continue to Article #3:
The Template appears!!!
Planning a website: Useful links
http://www.brightcentral.net/work_plan.php
http://www.wilsonweb.com/worksheet/pageplan.htm
http://www.webcredible.co.uk/user-friendly-resources/web-usability/plan-usable-website.shtml
http://www.wilsonweb.com/worksheet/pageplan.htm
http://www.webcredible.co.uk/user-friendly-resources/web-usability/plan-usable-website.shtml
by ArkaneSteelblade
Software Developer who was given the task of webmaster and has been on both path.
My personal belief and quote:
"Keep the mind like a sponge absorbi... (more)
My personal belief and quote:
"Keep the mind like a sponge absorbi... (more)
Explore related pages
iStylr - WYSIWYG Web design 2.0- Stay updated about the first online one stop design shop, iStylr - the online WY...
Karelia Software - For You and Your Mac- Karelia Software is built around a desire to serve the Macintosh community throu...
Beginner's Guide to Web Design using CSS- Welcome to Beginner's guide to web design using CSS! Here I will put a number of...
How to make a website- How to start a website will show steps by step instructions on how to start and...
Simple Ways To Make More Money Online- I can show you a few simple ways to earn money on the internet on your spare tim...
Make a web template- This is a continuation of How to make a web site series, and show you how to cre...
