   |
|
|
Arachnophilia Tutorial
![[BOOK]](http://www.stud.ntnu.no/~larsell/bilder/guestbook.gif)
|
PLEASE
SIGN THE
GUESTBOOK
|
Well, here you are reading this tutorial which means you want to build a web page. This tutorial is based on using the Arachnophellia editor even though there are a lot of editors out there, you can even use note pad, I find this one easy to use and very effective. I won't go into the advanced features in this segment but, instead center on the basics for this module. Later, as I get time I will publish a more advanced version for those who have mastered the basics.The first step. of course is to download and install Arachnophellia. You can get it HERE. Now that you have it installed lets get started.Arachnophilia Cofiguration
There is really only one configuration change I like to make which is switching the preview setting from external browser to internal browser. This is very simple to do. Open up Arachnophilia and at the top in the commands line you will see Preview. Click on that and select the menu item "Select browser,Don't launch". Select that item and then select "internal browser". Click the button to see a screenshot. Thats it for configuration for now.Getting Started
- The very first thing you should do, and this is VERY important, is to create a folder somewhere on your hard drive in which to keep all your website files and pictures. You can name it whatever you wish. I just name mine www.
- Place any images or files you wish to use in this folder such as your photo, a background, or buttons and things. I like to create a subfolder in my www directory called images to store my graphics.
Your First Webpage
Open Arachnophilia, if you dont already have it open, and click on the new html page button which is the first button on the toolbar.
- A small window will open that looks like the image below. This allows you to name your page (MyWebsite, Joe's Prose, etc...) whatever you want, and to select the text, link, and background colors. Just type in a name for now and click ok.
- Now you should have a page in front of you that looks something like this:
<!doctype html public "-//w3c//dtd html 3.2//en">
<html>
<head>
<title>My Website>/title>
<meta name="GENERATOR" content="Arachnophilia 4.0">
<meta name="FORMATTER" content="Arachnophilia 4.0">
</head>
<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000">
</body>
</html>
- Save this page to your www folder as index.html. The first page in your directory should ALWAYS be named index.html. This will load by default if someone tries to peek into your files.
- You will think this looks like greek right now but it's really pretty easy. Those marks you are looking at are called tags. Notice that for almost all tags there is a start tag <html> and an end tag </html>
- The first section is called the head. This tells the browser and search bots the name of the page and other information we will go into later.
<head>
<title>My Website>/title>
<meta name="GENERATOR" content="Arachnophilia 4.0">
<meta name="FORMATTER" content="Arachnophilia 4.0">
</head>
- Next is the body tag. Here is where you designate background, text, and link colors, as well as designate a background image. Right now we will leave it as is and start making your page.
<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000">
</body>
- Everything you want people to see goes between the body tags. That is the part of the document which is displayed when you view a webpage. Lets give a title header to your page. After the body tag (<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000">) type in a name for your page such as MY CYBERSPACE or whatever you want.
Now lets view what you just did. One of the things I love about arach is that you can view what you did without saving it so you can change it easily if you dont like the results.Go to the toolbar and click the preview button. The internal browser will show you what your page looks like so far.
- Not exactly what we want for the title, is it? Too small and not centered on the page! We will now use the <center> tag and the <h1> tags to center the text and make it larger. First type in the heading tags
<H1>MY CYBERSPACE</H1>(note that is h one not L). Preview now and you will see that the title is much larger.
- To center the title on the page, simply add the <center> tags on either side and take another look. <center><H1>MY CYBERSPACE</H1><center> Remember, from here on to stay above the </body> tag.
- Now lets put some text in your page..space down a line or two to keep your tags easy to see... and type in a few lines and preview what you've done;
<center><H1>MY CYBERSPACE</H1><center>
Thank you for visiting my website.This is my very first webpage. Take your time and look around a bit. I will be adding more as I learn how to do more things.
- Notice that your text ran all the way across the page? Thats because we didn't use any type of tag to tell the browser how to display it! There are three main tags used with text to make it look neater and more ordered. The one I use a lot on pages with a lot of text is the <blockquote> taq. This keeps margins on both sides like you would in a letter. For sentence or line breaks you would use the <br> tag to move to the next line. To start a new paragraph use the <p> tag. note that the <br> & <p> tags do not need a closing tag.
<center><H1>MY CYBERSPACE</H1><center>
<blockquote>
Thank you for visiting my website.This is my very first webpage.<br>
Take your time and look around a bit.<p>I will be adding more as I learn how to do more things.
</blockquote>
