260 lines
12 KiB
HTML
260 lines
12 KiB
HTML
<!--startcut ==============================================-->
|
|
<!-- *** BEGIN HTML header *** -->
|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
|
|
<HTML><HEAD>
|
|
<title>Modest Home on the Web LG #75</title>
|
|
</HEAD>
|
|
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#0000AF"
|
|
ALINK="#FF0000">
|
|
<!-- *** END HTML header *** -->
|
|
|
|
<CENTER>
|
|
<A HREF="http://www.linuxgazette.com/">
|
|
<IMG ALT="LINUX GAZETTE" SRC="../gx/lglogo.png"
|
|
WIDTH="600" HEIGHT="124" border="0"></A>
|
|
<BR>
|
|
|
|
<!-- *** BEGIN navbar *** -->
|
|
<IMG ALT="" SRC="../gx/navbar/left.jpg" WIDTH="14" HEIGHT="45" BORDER="0" ALIGN="bottom"><A HREF="williamson.html"><IMG ALT="[ Prev ]" SRC="../gx/navbar/prev.jpg" WIDTH="16" HEIGHT="45" BORDER="0" ALIGN="bottom"></A><A HREF="index.html"><IMG ALT="[ Table of Contents ]" SRC="../gx/navbar/toc.jpg" WIDTH="220" HEIGHT="45" BORDER="0" ALIGN="bottom" ></A><A HREF="../index.html"><IMG ALT="[ Front Page ]" SRC="../gx/navbar/frontpage.jpg" WIDTH="137" HEIGHT="45" BORDER="0" ALIGN="bottom"></A><A HREF="http://www.linuxgazette.com/cgi-bin/talkback/all.py?site=LG&article=http://www.linuxgazette.com/issue75/zhaoway.html"><IMG ALT="[ Talkback ]" SRC="../gx/navbar/talkback.jpg" WIDTH="121" HEIGHT="45" BORDER="0" ALIGN="bottom" ></A><A HREF="../faq/index.html"><IMG ALT="[ FAQ ]" SRC="./../gx/navbar/faq.jpg"WIDTH="62" HEIGHT="45" BORDER="0" ALIGN="bottom"></A><A HREF="lg_backpage.html"><IMG ALT="[ Next ]" SRC="../gx/navbar/next.jpg" WIDTH="15" HEIGHT="45" BORDER="0" ALIGN="bottom" ></A><IMG ALT="" SRC="../gx/navbar/right.jpg" WIDTH="15" HEIGHT="45" ALIGN="bottom">
|
|
<!-- *** END navbar *** -->
|
|
<P>
|
|
</CENTER>
|
|
|
|
<!--endcut ============================================================-->
|
|
|
|
<H4 ALIGN="center">
|
|
"Linux Gazette...<I>making Linux just a little more fun!</I>"
|
|
</H4>
|
|
|
|
<P> <HR> <P>
|
|
<!--===================================================================-->
|
|
|
|
<center>
|
|
<H1><font color="maroon">Modest Home on the Web</font></H1>
|
|
<H4>By <a href="mailto:zw@debian.org">zhaoway</a></H4>
|
|
</center>
|
|
<P> <HR> <P>
|
|
|
|
<!-- END header -->
|
|
|
|
|
|
|
|
|
|
<h2>Introduction</h2>
|
|
|
|
<p> We will build a small homepage site without server side
|
|
scripts. This is suitable for people who do not run their own web
|
|
servers or have no priviledge to use server side facilities. We will
|
|
use JavaScript and Lex to simulate some effects of template files to
|
|
ease the maintaining tasks. We will use Makefile to automate the
|
|
uploading, and use CSS to provide fancy formatting effects. We will
|
|
use only standard HTML in our main content file, thus provide a good
|
|
chance for any browsers to surf our web site easily.
|
|
|
|
<p> The weird choice of using Lex to present a template effect is
|
|
because I want to pretend that I am a guru. And gurus often use
|
|
complicated or even brain damaged tools to fulfil simple and sometime
|
|
stupid tasks. Of course, if I am a true guru, I'd rather write a
|
|
similar tool by myself from scratch using LISP or C. But since I am
|
|
only pretending I am one, so forget about it.
|
|
|
|
<h2>HTML and CSS</h2>
|
|
|
|
<p> There is a wonderful <a href="http://www.debian.org">Debian</a>
|
|
package which provides great documentation on standard CSS and HTML
|
|
practice. That is <code>wdg-html-reference</code> package. If you are
|
|
serious into HTML 4 and CSS, then you'd better <code>apt-get</code>
|
|
into that package, and read the documents there. They're easy to
|
|
follow. Only remember one thing though, a good understanding on CSS
|
|
does NOT mean that you should use every possible effects on your
|
|
homepage. A good taste is more important than a good technique. At the
|
|
end of this article, I presented some <a href="#example">example
|
|
files</a>, you could keep them handy when reading through.
|
|
|
|
<p> I will not duplicate those excellent documentation on HTML and CSS
|
|
here, and there are many more high quality documents outside on the
|
|
web and in the bookstore. Even better, you could use your browser's
|
|
"View Source" menu item to sneak in every webpage that you're
|
|
interested to learn from. I will provide you one advice though, that
|
|
is you should keep it simple, keep your homepage simple unless you
|
|
have a big team of webmasters and webmistress work for you, or you
|
|
have a lot and a lot of free time to work on your homepage.
|
|
|
|
<p> Simple does not necessarily mean ugly, sometime simple is
|
|
considered beauty, expecially when the CSS is available to nearly
|
|
everyone now. So your best practice (pretending that I am an
|
|
expert. heh) is to use standard HTML in your content file, and use the
|
|
HTML tags as logically as you can.
|
|
|
|
<p> For example, you may want to use <code><i></code> to
|
|
empasize a sentence or a word, DON'T, use <code><em></code>
|
|
instead. Then use CSS to provide the desired effects. That's the whole
|
|
point. And not to forget to appreciate the <a
|
|
href="http://www.mozilla.org">Mozilla</a> web browser which is nearly
|
|
the most standard compliant one out there. (Hint, use it to test your
|
|
webpage!)
|
|
|
|
<h2>Using JavaScript</h2>
|
|
|
|
<p> Why using JavaScript? Since we are only building a modest
|
|
homepage, we won't need those fancy features, not to mention those
|
|
annoying pop-ups. The reason we are using JavaScript is that it could
|
|
present us some template like features which could ease our task
|
|
maintaining big bunch of webpages. Modest homepage does NOT mean that
|
|
we cannot put many files there. ;)
|
|
|
|
<p> For example, if we want to present a navigation menu for our
|
|
webpage, we will have to copy and paste our menu paragraph in HTML
|
|
into every content file (as mentioned above, we do not have enough
|
|
priviledges to use any server side facilities.), and what if we want
|
|
to change the style used for our menu? That's a big nightmare to
|
|
adjust each webpages for that.
|
|
|
|
<p> Instead we could write our menu in a JavaScript, and include the
|
|
following in each of our webpages:
|
|
|
|
<p>
|
|
<code>
|
|
<script type="text/javascript" src="header.js" charset="iso-8859-1">
|
|
</script>
|
|
</code>
|
|
|
|
<p> When we want to add an item to our menu, we only need to change
|
|
the <code>header.js</code> file, then viola, every webpages are
|
|
changed accordingly.
|
|
|
|
<p> The syntax of JavaScript is very easy to learn, by reading some <a
|
|
href="#example">examples</a>, you could get nearly the whole
|
|
idea. Since we are using JavaScript to present navigation menus, we
|
|
could even ease the task of generating menus by hand too. Go check out
|
|
the example <code>header.js</code> at the end of this article.
|
|
|
|
<h2>Using Lex</h2>
|
|
|
|
<p> Lex is presented in the Debian package <code>flex</code>. It is a
|
|
GNU tool. What lex do is to scan the input file, and whenever a
|
|
regular expression is met, execute some C code. So we can use it to
|
|
scan our templates then generate the HTML files. Lex could turn your
|
|
dull project of maitaining a stupid personal homepage into an exciting
|
|
C programming journey. Isn't it wonderful?
|
|
|
|
<p> Lex is a scanner generator, which means, we use lex to generate
|
|
our scanner, then using our scanner to scan our template files to
|
|
generate HTML files. How could lex generate a scanner? It does this by
|
|
reading a rules file written by us. Basically, we design some set of
|
|
rules, then using this rules in our content files. And we write a
|
|
rules file for Lex, then we use lex to read our rules file and
|
|
generate a scanner, then we use the scanner to scan our content file
|
|
to get the desired HTML file. And, it's very simple! Gurus R Us!
|
|
|
|
<p> What makes a rule? A rule is made of two parts. The first part is
|
|
a regular expression (regex) similar to that you found in
|
|
<code>perl</code> or <code>egrep</code>. The second part is a small
|
|
part of C code. Whenever a regex is found met, then the C code will be
|
|
executed. The following is a sample rule from our example rules file:
|
|
|
|
<pre>
|
|
\"header\" {
|
|
if (flag_lex == 1 && flag_key == 1 && current_key == HERE)
|
|
{
|
|
fprintf(yyout,
|
|
"<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0//EN\""
|
|
"\"http://www.w3.org/TR/REC-html40/strict.dtd\">"
|
|
"<html><head><title>{zhaoway} %s</title>"
|
|
"<link rel=\"stylesheet\" href=\"style.css\" type=\"text/css\">"
|
|
"<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">"
|
|
"<meta name=\"description\" content=%s>"
|
|
"<meta name=\"keywords\" content=%s></head><body>"
|
|
"<script type=\"text/javascript\" src=\"header.js\" charset=\"iso-8859-1\">"
|
|
"</script>\n",
|
|
keys[TITLE], keys[DESCRIPTION], keys[KEYWORDS]
|
|
);
|
|
|
|
flag_key = 0;
|
|
}
|
|
else ECHO;
|
|
}
|
|
</pre>
|
|
|
|
<p> The above code means that, when "header" is appeared in the input
|
|
file, and some conditions are satisfied, then we will replace it with
|
|
a big bunch of HTML codes. The corresonding example content file is as
|
|
the following:
|
|
|
|
<pre>
|
|
<lex title="home page" description="zhaoway's homepage." />
|
|
<lex keywords="zhaoway, personal, homepage, diary, curriculum, vitae, resume" />
|
|
<lex here="header" />
|
|
</pre>
|
|
|
|
<h2>Making the upload</h2>
|
|
|
|
<p> When doing the upload, to decide which file on the server needs to
|
|
be updated is difficult, and that task should be automated indeed. So
|
|
we use Make to do it. The basic idea is to touch a blank
|
|
<code>some.html.upload</code> file whenever <code>some.html</code> is
|
|
uploaded. When <code>some.html</code> is newer than
|
|
<code>some.html.upload</code> that means it needs to be uploaded to
|
|
the server again. The following <code>Makefile</code> rule shows that:
|
|
|
|
<pre>
|
|
%.upload: %
|
|
lftp -c "open -u \"$(USER),$(PASS)\" $(SITE); put $<"
|
|
touch $@
|
|
</pre>
|
|
|
|
<h2>Conclusion</h2>
|
|
|
|
<p> Makefile and Lex themselves warrantize lengthy articles. They are
|
|
very traditional Unix tools for C development. But could be very
|
|
useful in maintaining webpages. We cannot explore the details of them
|
|
very carefully. This article is just mean to raise your imagination
|
|
with these traditional Unix tools.
|
|
|
|
<h2><a name="example">Example files available</a></h2>
|
|
|
|
<ul>
|
|
<li><a href="misc/zhaoway/Makefile.txt">Makefile</a></li>
|
|
<li><a href="misc/zhaoway/scan.l.txt">scan.l</a> Lex rules file</li>
|
|
<li><a href="misc/zhaoway/index.scan.txt">index.scan</a> Template file for index.html</li>
|
|
<li><a href="misc/zhaoway/header.js.txt">header.js</a></li>
|
|
<li><a href="misc/zhaoway/footer.js.txt">footer.js</a></li>
|
|
<li><a href="misc/zhaoway/style.css.txt">style.css</a></li>
|
|
</ul>
|
|
|
|
<p> You could visit <a href="http://www.zhaoway.com">my homepage</a>
|
|
for the resulted effects. Have fun and good luck!
|
|
|
|
<!-- *** BEGIN bio *** -->
|
|
<SPACER TYPE="vertical" SIZE="30">
|
|
<P>
|
|
<H4><IMG ALIGN=BOTTOM ALT="" SRC="../gx/note.gif">Zhaoway</H4>
|
|
<EM>zhaoway lives in Nanjing, China. He divides his time among his
|
|
beautiful girlfriend, his old Pentium computer, and pure
|
|
mathematics. He wants to marry now, which means he needs money, ie., a
|
|
job. Feel free to help him come into the sweet cage of marriage by
|
|
providing him a job opportunity. He would be very thankful! He is also
|
|
another volunteer member of the <a href="http://www.debian.org">Debian
|
|
GNU/Linux</a> project.</EM>
|
|
|
|
<!-- *** END bio *** -->
|
|
|
|
<!-- *** BEGIN copyright *** -->
|
|
<P> <hr> <!-- P -->
|
|
<H5 ALIGN=center>
|
|
|
|
Copyright © 2002, zhaoway.<BR>
|
|
Copying license <A HREF="../copying.html">http://www.linuxgazette.com/copying.html</A><BR>
|
|
Published in Issue 75 of <i>Linux Gazette</i>, February 2002</H5>
|
|
<!-- *** END copyright *** -->
|
|
|
|
<!--startcut ==========================================================-->
|
|
<HR><P>
|
|
<CENTER>
|
|
<!-- *** BEGIN navbar *** -->
|
|
<IMG ALT="" SRC="../gx/navbar/left.jpg" WIDTH="14" HEIGHT="45" BORDER="0" ALIGN="bottom"><A HREF="williamson.html"><IMG ALT="[ Prev ]" SRC="../gx/navbar/prev.jpg" WIDTH="16" HEIGHT="45" BORDER="0" ALIGN="bottom"></A><A HREF="index.html"><IMG ALT="[ Table of Contents ]" SRC="../gx/navbar/toc.jpg" WIDTH="220" HEIGHT="45" BORDER="0" ALIGN="bottom" ></A><A HREF="../index.html"><IMG ALT="[ Front Page ]" SRC="../gx/navbar/frontpage.jpg" WIDTH="137" HEIGHT="45" BORDER="0" ALIGN="bottom"></A><A HREF="http://www.linuxgazette.com/cgi-bin/talkback/all.py?site=LG&article=http://www.linuxgazette.com/issue75/zhaoway.html"><IMG ALT="[ Talkback ]" SRC="../gx/navbar/talkback.jpg" WIDTH="121" HEIGHT="45" BORDER="0" ALIGN="bottom" ></A><A HREF="../faq/index.html"><IMG ALT="[ FAQ ]" SRC="./../gx/navbar/faq.jpg"WIDTH="62" HEIGHT="45" BORDER="0" ALIGN="bottom"></A><A HREF="lg_backpage.html"><IMG ALT="[ Next ]" SRC="../gx/navbar/next.jpg" WIDTH="15" HEIGHT="45" BORDER="0" ALIGN="bottom" ></A><IMG ALT="" SRC="../gx/navbar/right.jpg" WIDTH="15" HEIGHT="45" ALIGN="bottom">
|
|
<!-- *** END navbar *** -->
|
|
</CENTER>
|
|
</BODY></HTML>
|
|
<!--endcut ============================================================-->
|