or
| | Html Codes| Cgi Files| Putting Files on the Web| End of Document and Links| | Music Ideas| | Books| |
Step One:
To get started on your first parish web page, try saving a special sample page page (when you open it, right mouse click and save as). Off line you can then read it in more detail.
Copy it and save it in another name;open it up (by double clicking the file).
Now the real test comes: Click on View and then source.
The computer now shows you source code in Notepad. Try changing the text like the heading above. Put in your own heading..close and save. Now open it up(by double clicking the file) and then press your Refresh/Reload Button and you will see your own heading on the page... Use your back button or the linlk on sample page to return back here.
One excellent resource for information is Web Pro Design, which contains links to almost everything you would want to know.
Step 2:Codes
You will notice a lot of codes which determine the size of the print,(<H1>, <H2>, <H3>, <H4>,), the style (bold print <B> or Italics <I>, center <center>, Line Break <br>.). These codes must be turned on and off. They are always surrounded by < and >. To turn off use / (e.g </H2>). Try writing a line that has <H2> size text, is bold and italic and is centered. Like the following:
You will notice in the source code that the codes for head, title and Body do not appear on the web page. These are only seen in the source code page. All pages begin with <HTML> and end with </HTML>. The code <HTML> is followed by <Head></Head> and in between the Head is <TITLE></TITLE> The title is also important for the web search engines because this is what they use to classify your web page. Ask yourself if someone was looking for your page in a web search what are the key words that will lead them to finding you. These are the words that must appear in your Title code (for example Homepage of John Smith Swords, Dublin Ireland) .
The title code is folowed by the Body code which determines the colour of the links, the background colour of the page, the colour of the text etc. All the contents of your web page are between the <Body> and </Body> For example, the <Body> part can have the following in it:
<Body Background="images/stargb.gif" BGColor="#000000" Text="#CCFFFF" Link="#ff8040" VLink="#FFCC99" ALink="#ff0000">
The above tells the browser that the background of the web page will be the picture starbg.gif; the background colour (BGCOLOR) would be black if there wasn't a picture. The text will be white; The link will be orange; the virtual link (visited links) will be brown; while the active link (Alink) is red only while the mouse is clicked on the link (When you click on the link it will change from orange (Unvisited) to red and if you return back to the page it will be brown (Visited) in the above example)..
The numbers with # refer to the colour and your web design software will do this easily. If you were desinging for people who are using Internet Explorer 4.0 or Netscape 4.0 you can simply use the name of the colour (e.g. Brown, Red etc). The background of the page is also important. On this page I am using a picture called brickw.jpg which gives the nice effect of a brick wall. Equally one could have different plain colour backgrounds. Note also that when you view a web page your computer makes a copy of the html page and every graphic on it...you will find all of them in the Cache folder of your browser (that is your Internet Explorer or Netscape Folder). Try for example to find the file brickw.jpg (On Windows 95...click :start :programmes :windows explorer :tools and then :find brickw.jpg). This is why you can view this webpage off line.
It is good to get used to the codes. You will find the full listing of HTML codes at Netscape Com and at Microsoft Com. See also All About HTML. One excellent site which contains information on all aspects of web design is Netpedia
There are also a number of software programmes available to make the job of web design easier. You will find many shareware versions of these on Computer Magazine CD's and also at Download Com and Windows95.Com. I like a programme called "Arachnophilia" which is the best I have seen and is "CareWare" (The licence agreement on it is worth reading for its creation is truly a work of love). Microsoft Publisher 97 also has a programme which can automatically convert your publication into a web page.The only disadvantage is that it creates web pages that take up a lot of space which is alright if you only intend to have one or two pages.
If you would like to see an example of a simple html page (using Microsoft Publisher 98), visit a page I designed for my
brother.
For recommended books see Books below.
You can also have a go at the interactive page maker on this website where you can design your own page and learn the codes in the process.
2) a list of the names and addresses of Parish Clergy/Team (See my example). Try as above changing the text on the Clergy page.
3) The Times of Masses and Services (See an my example).
The above three pages would be enough to have your web page up and running. But what about the photographs, I hear you say. To begin, do not worry about the photos. Get the information there first. To have a photograph of your church, you will need a scanner or a digital camara. If you know someone who has a scanner, they might scan the photo for you. You can buy a hand held scanner for under £200 (colour). I recommend that you buy one that is external (that is, you plug it into the printer socket at the back). Installing an internal scanner card is not easy despite what computer shops might tell you. Even better are the new range of digital camaras which are easy to install and take fantastic pictures and even photos of photos (See the photos in my Photo Page)
If you want more advice on the The Parish Webpage and even free webspace visit RC NET. It is also worth visiting Catholic Forum and Parishes Online. These sites provide tremendous help for Catholic Parishes and free web hosting for your parish web page. So now there really is no excuse why there should not be a web page for every parish in this diocese and all dioceses.
If you don't want to go to the trouble of learning web design, you can always get a company to design it for you. One person who has designed a website for a Dublin Parish and who also designed the National Jubilee Site is Steve Jacobs. You can contact him at (01) 836 9056 or 087 237 2337 and , , steve@itxpertise.com
If you want background music, simply add the code:
<BGSOUND SRC="mymusic.mid" loop=1 > between the <head> and <Body Background >code at the top of the page. Loop=1 means that the tune will place more than once. You can change this as needed.
The width and height will determine if the player is to be seen or not. In the above example it will not be seen.
The only problem with above is that people who do not have a music player will not hear it. But with Netscape Plugins and Explorer 3.0 or higher this is not a problem.
If you would like to add music the easy way, see below.
Where do I get the music files? There are some very good midi websites (all music files end with ".mid"). Visit Win95 Midi Archive and Midi File Farm to get you started. For Religious midi music visit Lutheran Hymnal Music and the best of all is The Ultimate Catholic Midi Collection. Happy Listening!.
An animated graphic is a set of images that is run like a slide show..one image after another run in sequence. There are a number of animated graphics on the INDEX Page of this website. The picture below is put together using a GIF Construction kit which is a piece of software that makes it easy to put together a set of photos, provided they are exactly the same size. One can also have small animated graphics like the smiling face.
The above code will only work with Internet Explorer 3.0 or higher. To have code that works with both Netscape and Internet Explorer, one is best to use a music player like crescendo. It means that the surfer will have to have this in order to hear music. You can write the code so that the music player can be seen on the page or be invisible. The code to add would look something like this:
<!-- * -->
<!-- Sound for Netscape Navigator 3.0 and above with LiveAudio plug-in
-->
<EMBED SRC="peace.mid" height=2 width=2 autostart=true hidden=true>
<!-- * -->
You can find out more information on the gif contruction kit at Alchemy Mindworks Com.
There is also much that can be done in the area of photo editing. Packages like Photostudio and Polaroid Photomax are very useful.
If you create a banner for your website, you can also advertise free through Advertise Ireland.
The first thing one needs is a browser that supports Javascript (Internet Explorer 3.0 or higher; or Netscape 2.0 or higher). Otherwise all you will see is the source code all over the place...
It is important to distinguish the difference between Javascripts and Java. I have tried some of the Java applets but it is very difficult and open to a lot of bugs. I suspect you would have to be a very good computer progammer to write pages with Java...
I prefer the simpler Javascripts which use Forms. I have a load of examples in my parish website.
Here you will see a clock and date clock on the page...a countdown,
a birthday programme. a colour changing programme,
a Thought For Day Alert, and a number of alerts
(messages that pop up on the press of a button or action).. There are great possibilities with Javascripts like for example
a time clock.
Lets take the example of a simple alert...On your page you could have
a button that the surfer presses...on pressing...a programme is run which basically
tells the computer to pop up a text message which you have written.
Now lets look at the code: <A HREF="ad1.html" onMouseOver="window.status='You too can design a web page'; return true"><IMG SRC="ad1.jpg" width=89 height=144 alt="FR AQUINAS DUFFY"></a>
You can also use the mouse over code to generate alert messages like below:
Place your cursor here
Code: <A HREF="" ONMOUSEOVER="alert['You see you really can design.']]>Place your cursor here</a>
The item welcoming you to this page is a "Prompt" which allows for the surfer to enter text. Here is an example of a prompt that produces a different answer for each choice. You will find the code by pressing View and then Source .
A good use of javascript is to use a script to redirect pages. This is a nice neat way of having a menu of your website on your index page. Or indeed to have a pop up menu which opens a different page. Here is an example:
For the above, you need a javascript which explains how to open a popup window and the size of the window. Here is the code:
|
<script language="JavaScript"> <!-- function openWindow(url, myname) { popupWin = window.open(url, myname, 'resizable=yes,menubar=yes,scrollbars=yes,width=300,height=300'); } //--> </script> |
And you need a form like the following:
|
<Form Name= 'myform'> <SELECT NAME="Choose Page" onchange="window.location=this.options[this.selectedIndex].value;" Size=3> <OPTION VALUE="javascript:openWindow('javas/index.html', 'mynameWin')"> Page 1 <OPTION VALUE="javascript:openWindow('javas/page2.html', 'mynameWin')">Page 2 <OPTION VALUE="javascript:openWindow('javas/page3.html', 'mynameWin')">Page 3 </SELECT> </FORM> |
Javascripts are very precise. One error and you will have problems. You most definitely must remember every dot and comma. Even then they might not work in some situations. I haven't shown you how your name is appearing in the alert messages but have a look at the source code and you will find out. See also the use of Javascripts and Pop-Up Menus on Springfield Parish Index Page. Visit also Cut and paste Javascripts which has excellent scripts for teachers. Also visit Website Abstraction for the one of the best collection of javascripts. Other Javascript sites are:
Javascripts make many things possible. See for example my page on the Periodic Table
which features a javascript by Matthew Hoesch which shows and gives detailed information on the elements of
the periodic table (Good for the exam revision!).
|
The CGI/Perl Cookbook | Craig Patchett & Matthew Wright |
CGI Programming with Perl
| Shishir Gundavaram |
Javascript: the Definitive Guide | Flanagan |
Programming Pearls
: | Jon Bentley |
Instant HTML: | Stephen Wright |
Instant IE4 Dynamic HTML: | Alex Homer |
You will find a very large selection of computer books at:
There are also detailed books on every aspect of web design from perl scripts to javascripts.
I have to admit that I am new to Style Sheets. You will need Internet Explorer 4.0 of Netscape 4.0 if you want to use them. Basically, one can create a file that will determine how text will look on a particular page. For example, you can have a <H3> text of a particular size, style and colour.
Everytime that you then use this tag the text will appear as you have designed it to appear. Open a blank text file using notepad or arachnophila. Put the following in and nothing else.
Here is an example of a stylesheet I use:
Body { font-family: arial; color: maroon;
background-color: white;
margin-left: 10px}
H1 { font-size: 20pt; color:orange }
H2 { font-family: Verdana; font style: bold; font-size: 16pt; color: purple }
H3 { font-family: Verdana; font-size: 11pt; color: brown}
H4 { font-size: 10pt; color: red }
Now save this file with any name but with the file ending .css (example style.css). Remember this file must be on your server. The next step then is to create a text page. You can see an example. Between the <head> and </head>tag put the following code
<LINK REL=STYLESHEET HREF="style.css" TYPE="text/css">
Experiment with using different attributes and see the outcome. You can assign larger size text to any attribute and even have different size margins for particular paragraphs.
The whole question of what is called the cgi-bin is one that has mystified me until I decided to learn how to use cgi files. Very few Service Providers in Ireland seem to offer the user the facility of using the cgi-bin. So unless you have an account elsewhere or access to a cgi-bin, this section will not be for you.
We are all familar with the counter clock and web hits on the page but rarely do
we need to know how it works. Basically, it is a little programme which
gives the instructions of where the picture files of the digits are and
where the number of hits are stored that produces the nice picture
of a number telling you that you are visitor number X.
This file is a cgi file and it is in a folder called the cgi-bin which is
located on the server where you have your account. There are a number
of various cgi files that can do eveything from counting the number of "hits" to your
webpage to message boards, forwarding of email and guestbooks and lots more.
If you want to use these, you need to be able to have access to your cgi bin,
you need to be able to use a piece of software called Telnet which enables you
to connect directly to your server's computer. But first have a look at
examples on my website of cgi files at work.
If you don't have access to a cgi bin but you would like to be able to forward mail from a guestbook without knowing anything about cgi files, then visit cgi-free.com. Here you just fill in a form, pick what you want and they give you the code to put on your html page and away you go. But choice will be limited and there will be ads. You can also get a free web counter clock in a similar way at Pagecount.com
The Hard Way
Learn about Telnet and about cgi-files, if you have access to a cgi-bin. Download cgi scripts from Dream Catchers Technologies and read the "Readme" files that come with each script. There are also plently of links there from which one can learn a lot. See also Matt Wright's Scripts.
The Easy Way
1) Most Service providers allow you some space for a homepage. You must have an account with a service provider which you probably have if you a reading this. It must be non-commercial.
2) You will need software to transfer the files called FTP (File Transfer Programme). Again you will find these on computer magazine CD's or at Download Com. The best I have seen is WS FTP95 LE. Using these programmes one can connect up and transfer the files from your computer to the public directory of your service provider's computer into your own user folder. These files can be updated offline and copied over replacing the existing files.
If you are feeling adventurous see my example of the use of the <IFRAME> tag with Internet Explorer 3.0 on my explorer test page. Again as regards books, see the Books Section of this page.
Best of luck!!!
Have a look at my current parish website Springfield Parish and
also the Missing Irish People Website that I designed and maintain.
Fr Aquinas T. Duffy
This page was last updated on Wed, August 15, 2001
