forked from pifty/tutes-dump
203 lines
9.6 KiB
HTML
203 lines
9.6 KiB
HTML
|
<h1>Resources for Developing Your Website</h1>
|
||
|
|
<hr />
|
||
|
|
|
||
|
|
<h2>Contents</h2>
|
||
|
|
<ul>
|
||
|
|
<li><a href="#intro">Introduction</a></li>
|
||
|
|
<li><a href="#edit">Editing Text</a></li>
|
||
|
|
<li><a href="#html">Help with HTML</a></li>
|
||
|
|
<li><a href="#css">Cascading Stylesheets (CSS)</a></li>
|
||
|
|
<li><a href="#js">Javascript</a></li>
|
||
|
|
<li><a href="#other">Other Resources</a></li>
|
||
|
|
<li><a href="#books">Books</a></li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<h2><a id="intro" />Introduction</h2>
|
||
|
|
<p>So, you've followed the instructions. You've run <code>mkhomepg</code>.
|
||
|
|
You've created your first html document, and you've got as far as
|
||
|
|
displaying "Hello, World" in a browser for all to see. So far so
|
||
|
|
good. But what next? This brief tutorial aims to help you take that
|
||
|
|
next step, so you can create a web page that looks good,
|
||
|
|
performs well, and may even accomplish whatever goal you have for it.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>The Golden Rule</h3>
|
||
|
|
<p>Unless your aim is simply (and exclusively) to learn how to code a
|
||
|
|
web page, the most important consideration going into your project is
|
||
|
|
content. In general, the purpose of any web page is to provide
|
||
|
|
information or interaction of some sort. It could be to share photos
|
||
|
|
with family and friends. It could be to exchange ideas with like minded
|
||
|
|
individuals about some interest or hobby. It could be a blog for your
|
||
|
|
fevered rantings.<br />
|
||
|
|
The nature of the content is naturally up to you - that's the beauty
|
||
|
|
of it. And as it is up to you, a discussion of content beyond this simple
|
||
|
|
admonishment is beyond the scope of this tutorial. But it is
|
||
|
|
important to remember that without interesting or useful content, there simply is no point.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>Strategy</h3>
|
||
|
|
<p>I won't pretend that I can teach you all you need to know about
|
||
|
|
making a web page. But as someone who has been working with web
|
||
|
|
pages for more than five years, I do know my way around. My strategy
|
||
|
|
in this tutorial is to bring up topics of interest and then direct
|
||
|
|
you to online resources of high quality and free availability,based
|
||
|
|
on open standards.<br />
|
||
|
|
This strategy is designed to be in accord with the goals and ethos
|
||
|
|
of SDF. So while you won't find much here about <i>what to do</i> - I
|
||
|
|
hope you will benefit from my suggestions on <i>where to look</i>.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2><a id="edit" />Editing Text</h2>
|
||
|
|
<p>At their most basic level, web pages are text files. Thus, you need
|
||
|
|
a way of editing the text that will make up your web pages. If you
|
||
|
|
wish to build your web page from within your SDF shell account,
|
||
|
|
numerous text editors are available. To see a list, enter the
|
||
|
|
following commands at your shell prompt:
|
||
|
|
</p>
|
||
|
|
<pre>
|
||
|
|
$ faq
|
||
|
|
g basics
|
||
|
|
t 9
|
||
|
|
</pre>
|
||
|
|
<p>As you can see, there are quite a few to choose from. Some are
|
||
|
|
simple, and some are complex and quite amazingly powerful. I find
|
||
|
|
<code>pico</code> convenient and easy to use. Many on SDF like
|
||
|
|
<code>nano</code>. And for those who are willing to learn them there
|
||
|
|
are much more powerful editors like <code>vi</code>, <code>vim</code>
|
||
|
|
and <code>emacs</code> which offer an unmatched degree of
|
||
|
|
customization. What is important is to choose an editor that you are
|
||
|
|
comfortable working with, as you will be spending considerable time
|
||
|
|
using it.<br />
|
||
|
|
Some folks, myself included, may find it easier to do their editing
|
||
|
|
in their desktop environment. If you are an ARPA lifetime member
|
||
|
|
(one-time fee of $36), this presents no obstacle as ftp (and sftp) is
|
||
|
|
available for transfering your finished work to your
|
||
|
|
html folder on SDF.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2><a id="html" />Help With HTML</h2>
|
||
|
|
<p>Hypertext Markup Language (HTML) is the primary language of the
|
||
|
|
world wide web. In its simplest terms, it provides for structuring
|
||
|
|
the text of your web page, through the use of various "tags" which
|
||
|
|
"mark" your text with structural attributes.<br />
|
||
|
|
For example, text which falls between the opening tag <h1> and
|
||
|
|
the closing tag </h1> is interpreted by a web browser as being a
|
||
|
|
level one heading.
|
||
|
|
</p>
|
||
|
|
<p>A full description of HTML is well beyond the scope of a basic
|
||
|
|
tutorial, yet it is important that you have access to complete
|
||
|
|
information. Fortunately, what you need is indeed freely available on
|
||
|
|
the web. If you choose to ignore everything else in this tutorial, I
|
||
|
|
would like you nontheless to heed this advice. The website of the
|
||
|
|
<a href="http://www.w3c.org">World Wide Web Consortium</a> (who set
|
||
|
|
the standards and conventions for the World Wide Web) is your friend.
|
||
|
|
Visit it. Get to
|
||
|
|
<a href="http://www.w3.org/Consortium/new-to-w3c">know</a> it.
|
||
|
|
Learn to love it.
|
||
|
|
</p>
|
||
|
|
<p>Some specific HTML related pages on the W3C site which may be
|
||
|
|
helpful to you are listed below:
|
||
|
|
</p>
|
||
|
|
<ul>
|
||
|
|
<li><a href="http://www.w3.org/MarkUp/Guide/Overview.html">Getting Started with HTML</a></li>
|
||
|
|
<li><a href="http://www.w3.org/MarkUp/Guide/Advanced.html">More Advanced Features</a></li>
|
||
|
|
<li><a href="http://validator.w3.org/">HTML Validator</a></li>
|
||
|
|
<li><a href="http://www.w3.org/People/Raggett/tidy/">HTML Tidy</a></li>
|
||
|
|
</ul>
|
||
|
|
<p>Of these, perhaps the most important is the Validator. By using the
|
||
|
|
validator to check your work, you can ensure that your web page is
|
||
|
|
standards compliant - built to work in a wide variety of browsers on
|
||
|
|
any number of platforms. You'll find it also catches your typos (in
|
||
|
|
your HTML, not your content).
|
||
|
|
</p>
|
||
|
|
<p>Other HTML resources you may find useful:</p>
|
||
|
|
<ul>
|
||
|
|
<li><a href="http://www.w3schools.com/">W3 Schools</a></li>
|
||
|
|
<li><a href="http://www.ncdesign.org/">Network Communication Design</a></li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<h2><a id="css" />Cascading Stylesheets (CSS)</h2>
|
||
|
|
<p>Although HTML provides rudimentary formating capabilities through
|
||
|
|
various tags and attributes, the preferred method of setting
|
||
|
|
properties such as margins, text size, colors and other such goodies
|
||
|
|
is through the use of stylesheets. Not only do stylesheets provide
|
||
|
|
more power and flexibility than is available through pure HTML, they
|
||
|
|
also make it much easier to maintain or adjust the appearance of your
|
||
|
|
web pages. What is more, the use of style sheets can actually save
|
||
|
|
bandwidth, thus decreasing the size of and increasing the
|
||
|
|
responsiveness of you site.This is generally considered a
|
||
|
|
<a href="http://www.catb.org/~esr/jargon/html/G/Good-Thing.html">Good Thing</a>.
|
||
|
|
<br />
|
||
|
|
The W3C again provides a wealth of materials. I find the following
|
||
|
|
links useful:
|
||
|
|
</p>
|
||
|
|
<ul>
|
||
|
|
<li><a href="http://www.w3.org/Style/Examples/011/firstcss">Starting With HTML + CSS</a></li>
|
||
|
|
<li><a href="http://www.w3.org/MarkUp/Guide/Style">Adding a touch of style</a></li>
|
||
|
|
<li><a href="http://jigsaw.w3.org/css-validator/">CSSValidator</a></li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<h2><a id="js" /></a>Javascript</h2>
|
||
|
|
<p>At its core, HTML is simply a markup language, a derivative of
|
||
|
|
SGML. Even with the help of Cascading Stylesheets, it is not really a
|
||
|
|
fully functional as a layout design tool. Rather it aims at page
|
||
|
|
description - identifying your document heirarchy, describing lists
|
||
|
|
and tables, and so on. For more elaborate construction work, it is
|
||
|
|
often useful to employ a scripting language to expand your design
|
||
|
|
capabilities. Several are available, but perhaps the most popular is
|
||
|
|
the client-side running javascript.
|
||
|
|
</p>
|
||
|
|
<ul>
|
||
|
|
<li><a href="http://www.mozilla.org/js/">Javascript information at Mozilla.org</a></li>
|
||
|
|
<li><a href="http://www.w3schools.com/js/default.asp">Javascript resources at W3 Schools</a></li>
|
||
|
|
<li><a href="http://www.javascriptkit.com/javatutors/primer1.shtml">Javascript Primer at javascriptkit.com</a></li>
|
||
|
|
<li><a href="http://www.irt.org/links/JavaScript_Resources/index.html">irt.org: JavaScript Resources</a></li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<h2><a id="other" />Other Resources</h2>
|
||
|
|
<p>HTML, CSS, Javascript - these are all well established parts of
|
||
|
|
your "general purpose" web design toolkit. There are lots of more
|
||
|
|
specialized tools available as well. I will just list a few here that
|
||
|
|
you can explore in case you are interested.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<ul>
|
||
|
|
<li><a href="http://us3.php.net/FAQ.php">PHP FAQ at php.net</a> -
|
||
|
|
Server-side Scripting Language</li>
|
||
|
|
<li><a href="http://www.mysql.com/">MySQL</a> -
|
||
|
|
Database Software</li>
|
||
|
|
<li><a href="http://www.libpng.org/pub/png/">Information on PNG</a></li>
|
||
|
|
<li><a href="http://wordpress.org/">WordPress blogging software</a>
|
||
|
|
</li>
|
||
|
|
<li><a href="http://www.blackpearlcomputing.com/bpc/Bandwidth_stuff/default.html">The Bandwidth Conservation Society</a></li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<h2><a id="books" />Books</h2>
|
||
|
|
<p>For those of you who, like me, find it beneficial to work with
|
||
|
|
books in addition to online resources, I offer the following
|
||
|
|
suggestions. You may purchase these books directly from
|
||
|
|
<a href="http://www.oreilly.com/">O'Reilly</a>, or from a discount
|
||
|
|
bookstore like <a href="http://www.bookpool.com">BookPool</a>, or you
|
||
|
|
can locate a used copy from <a href="http://www.abebooks.com">ABE Books</a>
|
||
|
|
or <a href="http://www.alibris.com">Alibris</a>.
|
||
|
|
</p>
|
||
|
|
<h4>Friendly Introduction</h4>
|
||
|
|
<ul>
|
||
|
|
<li><cite>Head First HTML with CSS & XHTML</cite> Elisabeth
|
||
|
|
Freeman & Eric Freeman, O'Reilly & Associates
|
||
|
|
</ul>
|
||
|
|
<h4>References</h4>
|
||
|
|
<ul>
|
||
|
|
<li><cite>HTML: The Definitive Guide</cite> Chuck Musciano
|
||
|
|
& Bill Kennedy, O'Reilly & Associates
|
||
|
|
<li><cite>Cascading Style Sheets: The Definitive Guide</cite> Eric A.
|
||
|
|
Meyer, O'Reilly & Associates
|
||
|
|
<li><cite>Javascript: The Definitive Guide</cite> David Flanagan,
|
||
|
|
O'Reilly & Associates
|
||
|
|
<li><cite>Web Design in a Nutshell: A Desktop Quick Reference</cite>
|
||
|
|
Jennifer Niederst Robbins, O'Reilly & Associates
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<hr />
|
||
|
|
<cite>$Id: resources4web.html,v 1.2 2006/05/22 16:02:59 jboy Exp $</cite>
|