Web
Design
The purpose of this page is to help those of you that are interested in web design learn more about it. We have some basic tutorials here that will help get you started.
Table of Contents
- Getting Started
- How the internet works
- What to put on your web page
- HTML basics: How to build a web page
- Free Hosting Services
- What Next
Getting Started
First things first, learning how to build web pages can be a lot of fun! I'm assuming that you already have some interest, otherwise you wouldn't be here. :) That being said, learning even the basics of web site design may take more than just a few minutes, or even a few hours of sitting in front of a computer. Hang around & give this tutorial a chance, I'll do my best at making this as fun and as easy to learn as possible!
How the internet works
I'm guessing that right now your computer is turned on and that you're in front of it. My psychic powers are also telling me that above this web page are a few buttons, a back button, a home button, etc... Well that *thingie* that you are looking at right now as you read is called a web browser. People use web browsers to, browse, or *surf* the internet.What to put on your web page
When you type a web address into your browser, say http://google.com, the browser goes onto the internet and tries to find that web page on a web server. Web servers are special computers on the internet that wait for web page requests. When somebody requests a page, the server gives it to them.
This concept can be a bit difficult to grasp, so I have included a little illustration below.
We will get to how to put a web page on a server in a second. Before placing your web page on a server we have to know how to build a web page... and before building a web page you need to know what goes on a web page.
So, the question is, "What am I going to put on my web page?" That's simple! You can put ANYTHING on your web page. That's exactly why so many people make web pages, so they can express themselves.HTML basics: How to build a web page
I have decided to build my web page about a dog, Angus. And why not? He's the coolest dog ever!!
Behind every web page is HTML. We don't need to worry about what H-T-M-L stands for, just know that HTML is a kind of computer
programming language 1.
All you need to build a web page is a simple text editor like notepad. --->
Roll up your sleeves, we're about to get into the nity-gridy...
The best and fastest way to learn HTML and web design is to try it yourself. If you want to try the examples yourself on your own computer you can. Type the examples below into a text editor like notepad, then save the file asFirst of all, HTML is all text, that's why we are using a text editor like notepad to build our web page. As you see on this web page, some of the words are blue, some are bright yellow/green. Whenever we want the text on our web pages to look a certain way we need to tell the browser how to display the text. For instance, if we want our text to display our dog's name, Angus, and to stand out in bold we would wrap his name in the "bold" tag like so:angus.html
Be sure that the file ends in.html.
Now you should be able to open that page up in your browser by double-clicking on it.
That would display " Angus " to the web browser.
pretty easy huh?
Go ahead and copy and paste the code in the gray box into your file,angus.html. Save it, then preview it.
Every HTML document starts and ends with tags too. We wrap our whole document in the <html> </html> tags so the browser know what kind of document we have.
There are MANY HTML tags -- more than I'm going to mention here. Try to follow along with the HTML document I have created below about my dog.
If you have any questions about what the different tags stand for look them up here to get a description of what that tag does.
This HTML document has some tags in it that we haven't discussed yet. It also calls an image into the page :)
Copy and paste the text below into angus.html. Save it -- then preview it.
That would display " Angus " to the web browser.
pretty easy huh?
Go ahead and copy and paste the code in the gray box into your file,angus.html. Save it, then preview it.
Every HTML document starts and ends with tags too. We wrap our whole document in the <html> </html> tags so the browser know what kind of document we have.
There are MANY HTML tags -- more than I'm going to mention here. Try to follow along with the HTML document I have created below about my dog.
If you have any questions about what the different tags stand for look them up here to get a description of what that tag does.
This HTML document has some tags in it that we haven't discussed yet. It also calls an image into the page :)
Copy and paste the text below into angus.html. Save it -- then preview it.
Your file should look like this when you are done.
When you save and preview your page it should look like this...
That's it! You've created your very own web page!
Free Web Hosting
Every web site needs a home. To share your site with your friends you need to put it on a server that is connected to the internet. Web hosting companies are in the business of providing web servers connected to the internet just for this purpose.
My very first website was hosted at Geocities. It's a wonderful place to start your first web page. The only trouble with them is that they put an ad banner on your page. The good news is that if you have a Yahoo! email address it will be super easy to sign up for a Geocities account.
New users sign up here.
You can search Google for other free web hosting companies -- I'm sure there are new ones every week. Just be sure to go with a dependable company that will still be around in a year.
What Next
It's now up to you to become an HTML Ninja if you so wish. If you like the internet and web design you can learn more from some of these books below. You can search our online catalog for books on WEB DESIGN or start with one of the 2 books below. Don't forget to write a review on the books you do read.
Web Design for Dummies
Sams teach yourself Macromedia Dreamweaver MX 2004 in 24 hours
There are also plenty of great web sites out there full of HTML tutorials and other web goodies. Check them out!