by Glenn Hefley
 Once you have your
website setup (see
the article on this if you haven't gotten that far yet) we need to put together
a website. In this article we are going to walk through the basics of this.
Even if you are planning on hiring someone to do this for you, it would be good
to know what we're going to talk about here.
The Basics
HTML is still the language of the web. Hyper Text Mark Up language is what
your browser understands completely. Everything else is a bit browser dependent.
What I mean by that is even though just about every browser understands things
like CSS, and JavaScript, they don't process them exactly the same.
You would think that by now, 20 years past the point when web pages started
to appear on the Internet, there would be a standard set for how browsers process
web pages, and there is, and it is much better than it was a few years ago.
Still, there are a few differences in the way a web page might look from one
browser to another.
HTML -- HTML (Hyper Text Mark Up language) is your basic web
languge. Use to be that you needed to know this front to back to put together
a decent website, but that's not the case any longer. Programs like Front Page,
Dreamweaver and even MS Word can take your formatted text and build the supporting
HTML for the document.
There are several sources for finding information on HTML out there. Most are
much better than I could cram into this article, so I'm going to link to a few
of them for you.
CSS -- CSS (Cascading Style Sheets) is probably the best thing
to come along for formatting websites. HTML gives us some basic page formatting
tools, and we can do quite a bit with those tools, but when you get to the point
that you really want to make your web page look and read sharp, you turn to
CSS.
 CSS is fairly easy to learn.
You don't have to know much to really make an impact on your web page. With
CSS you can set the distance between letters, and lines, add color effects to
hyperlinks, have floating help tags ... just about anything you can think up
for the layout and formatting of your page, can be done with CSS.
You don't have to believe me on this one, you can take a look for yourself
at the CSS Zen Garden collection.
Each of the web pages on CSS Zen Garden
have exactly the same HTML, the same words, and the same CSS elements. The only
difference between them is the formatting used in the CSS, and the images. That's
it. The collection is amazing, and new designs are posted often.
Other resources for information on CSS include:
The best tool I have found for learning and developing CSS on a web page is
your Firefox Browser. Firefox has an extension called Web
Developer which allows you to right click on any web page and view the CSS
used to create the page. The CSS opens up in a side window, and also allows
you to make some changes to the CSS, and see those changes happen on the web
page in real time. Of course only you can see those changes happen, but it is
a great way to learn how things work, and how they don't. Also not a bad way
to pick up some ideas.
JavaScript -- JavaScript was developed because HTML and CSS
don't do anything. Processing information, showing dynamic information, showing
a page counter, displaying the real date and time.. all of these things and
thousands of others are made possible by the use of JavaScript.
 JavaScript is not the easiest
language to learn and many people (like myself) who have been developing on
the web for years, don't get very far with the language. What stopped most people
from really developing in JavaScript was the differences between how IE and
Navigator and other browsers parsed and ran the language. It is better now (with
the newer browsers), but still quite a hassle factor involved.
Some features have to have it though. For example, if you want to check over
a form before it is submitted to the server, then JavaScript is really your
only solution. With PHP, or Perl you can check it after it gets there, but if
you want the checking to be done prior to the page submission, then you do it
with JavaScript.
JavaScript also supplies the ability to create some nice effects, such as when
the Mouse is over an image, the image changes (called a roll-over effect).
JavaScript Tutorials and Resources:
DHTML -- DHTML has come far with the new browsers, and the HTML 2.0
release. When you put everything together that we have talked about so far,
you get DHTML (Dynamic HTML). DHTML isn't really a language itself, it is the
term used to describe a webpage developed using HTML, JavaScript, and CSS together
to create effects and formatting that can not be done by either of them alone.
DOM -- Document Object Model (DOM) is a description of how
an HTML or XML document is represented in a tree structure. DOM provides an
object oriented application programming interface that allows parsing HTML or
XML into a well defined tree structure and operating on its contents.
Sound confusing? Well it probably should if you are reading this tutorial.
DOM is when things get a bit interesting on the technical side of design.. When
you get this far, you are a real Web Page designer. Until then, you are working
with basics. This isn't to say that you have to know DOM to make real web pages,
far from it, but when you start thinking you want to go Pro, then you should
at least know the basics of DOM.
A great example of DOM working as it should can be seen at the Google
Spread Sheet Program.
Some Programs to use
Front Page -- Front Page is a Microsoft program, HTML editor
for the new designer. Many designers start out with Front Page, but most of
them quickly switch to other editors when they learn the basics.
What turns most designers off of Front Page is that it adds far more code to
a page than is required for the design, and as the page is being edited "bits"
are left in there, making the source code difficult to debug when something
goes wrong. Also, Front Page relies on server side Front Page Extensions to
be installed on the server that is hosting your website. Many Web Hosting companies
do not supply them (though this has become less of a problem in the last few
years).
Front Page is WYSIWYG (What you see is what you get), meaning that you can
see the design of the page as you are creating it. Many HTML editors work with
the code directly, so you would have to write the code, save the file, then
look at the file using a browser to see if everything was going correctly.
MS Word does save as HTML, but the HTML that is saved is not
what most web designers consider 'ready for prime time'. If you are in a pinch,
what to post a page, or document, you can save your Word document as HTML, but
don't seriously consider doing it for your main web page.
 Dreamweaver from
Macromedia (which is now part of Adobe) is probably the best option for the
new designer. Most schools that I have run across use Dreamweaver when teaching
web design. The program is WYSIWYG, creates clean code when putting a page together
and allows for easy access to that code as well. Most of the professionals I
know still use the program, because it is very convenient. The draw back is
the price. About three times more expensive than Front Page.
There are several other alternative programs. Some of them are free to download
and use, so it might be a good idea to start with one or two of these and go
through some tutorials before investing in a program like Dreamweaver.
Online HTML Designer
List of Many HTML
editor programs.
My personal favorite free HTML editor is called NVu.
Easy to download and Install, and it works better than most.
Getting a Blog
 There are several
alternatives to getting a webpage up and running for your personal, and even
professional use. There are free spaces for web pages offered all over the place.
And there are several Blog programs.
Blog means Web Log, and was first conceived as a public personal log. These
public diaries are programs that are easy to learn and use, don't take much
time to add new entries to, and are hosted on servers for free, so they are
very low cost.
Most of these Blog sites allow you to alter the CSS and some of the basic HTML
of your page template, so that you can make the page design all yours.
Blog spaces form Online communities as well, and these communities can grow
to huge proportions. You might be surprised in a few months to discover just
how many people are viewing your web space per week.
Some places to look for a new web home are:
Posting the Page
Once you have made your page, you need to get it up onto the web server (this
is if you are not using a blog program as we discussed above).
Getting pages onto a web server requires FTP (File Transfer Protocal). Most
web page editors, such as Dreamweaver, allow you to setup your FTP information
and post new or edited pages directly to the web server form the editor program.
This is a very nice feature. If your editor of choice doesn't have this feature,
then you will probably want to use something like Filezilla
which is a free FTP client.
To connect and transfer files using FTP you will need:
- Web Server Name
- User Account Name
- User Password
- Directory
Your web hosting company will supply you with all of this information when
you sign up, so make sure you save that information some place you won't loose
it.
FileZilla is a great tool
to have around. A full featured FTP client, it even allows Secure FTP transfer
connections as well. Several Web Hosting companies require SSL connections for
file transfers.
When you post your web page you will need to post the HTML files, any CSS files
required by it, and all of the pictures as well.
It is wise to keep images in a folder, CSS files in a folder, and any external
JavaScript files in their own folder as well. The more organized you are in
the beginning, the less you will have to edit and re-write later on when your
little web sites starts collecting new files over a few years.
Got Questions?
If you have web page creation questions, we have answers for you. Just click
on over to the Help Forum and ask away.
There are lots of knowledgeable people around here at D-A-L, just waiting to
make sure you have the answers you are looking for.
This article may not be copied or distributed in part or in full from this site and is copyright D24 Media Limited.
|
