Web Craft

[web craft]

Creating web pages is very much like any other craft. You start with a set of tools and materials with which you create the various parts that will be put together to form a finished product.

A web site is composed of a collection of files, text files and graphic files, that you put together on the screen using Hypertext Markup Language or HTML. "Uh Oh! You mean I have to learn a computer language??" Stay calm! Actually HTML is a Markup Language, very much like the like the "Language" used for ages by proof readers and editors when they "mark up" copy to tell the printer how they want a page to look. In this case the "printer" is your web browser (Netscape or Internet Explorer) and the page is your computer screen. For comparison, click here to see some classical editors "marks". You will see later how similar this "Mark-up" language is to HTML.

Before we get into the nuts and bolts I think you will find it easier to learn HTML if you have a good solid grasp of how the web works. When you click on a link or go to a web address, you are sending a request to a host computer, asking it to send you all of the pieces that make up the page and some instructions on how to put then together on your screen. Any web site you might visit doesn't exist as you see it, out on the web somewhere. It only exists as a folder full of files that is sent to your computer and then displayed in the form you see it by your web browser.

Another way to look at it, when you go to a web site, it's like calling a grocer and asking him to send you a recipe and bag of ingredients. Then when the groceries arrive, your personal chef follows the recipe and serves you Cotes d'Agneau with spring greens tossed with champagne vinaigrette topped with grated asiago cheese, or a peanut butter sandwitch depending on which recipe you ordered.

HTML tells your Web browser where to put the things that you see on the screen and a bit about how they should look. For example, the HTML command <center> will center text or a picture in the middle of the screen when viewed with your browser. Of course you may want the next thing on the page not centered, so most commands have a closing tag as well, in this case it would be </center>

When it comes to text , web browsers don't understand that you wrote a word in bold or made a double space between paragraphs. So you have to tell them with a little HTML command. When you want to start a new paragraph you add a at the beginning and the browser will make a double space at that point.

Just as with any craft there are many levels of expertise. A wood worker can produce wonderful hand carved objects without knowing anything about how to do fancy inlay work. The same is true here; you don't need to know everything about HTML to produce a nice Web page, just a bit of the basics. Although there are hundreds of possible commands I used only twelve or so to create The Crafts Fair Online and I think it looks pretty good if I do say so my self. It's also important to know that you don't have to memorize all the HTML commands, you can always keep a list of the ones you use regularly to copy and paste them into your document.

So, lets do a simple Web craft project.

TOOLS & MATERIALS

First you will need a text editor or word processor to write your HTML document in plain text. I use Simple Text on a Macintosh computer. If you are using a Windows computer you can use NotePad. You can use a more advanced word processor if you like but remember that HTML must be plain (not formated) text.

Next you will need some kind of a graphics program to create whatever graphics you want for your page and some way to save them in the GIF format (or JPEG if you prefer). For the Crafts Fair Online I used Color It! for Macintosh from Micro Frontier to create the graphics. If you are on a Windows machine you may want to use Paint Shop Pro from Jasc Software.

If you want to include photos of your work you will need to photograph them with a digital camera or have your printed photos scanned in GIF or JPG format. Keep in mind that because these will only be used on the computer screen you do not want very high resolution, the best computer screens can only display about 100 dpi (dots per inch), 72 dpi is the standard.

Lastly, you will need the HTML commands or tags as they are often called.

Here are the ones we'll be using for this project-

<html>
<head>
<title>title</title>
</head>
<body>
<center>
<img src="image.gif">
</center>
 



<a href="name.html">name</a>
<a href="mailto:address"> e-mail me</a>
</body>
</html>

That's it! Everything you need to create a web page. Does that look complicated? Lets compare it to these instructions for knitting a cardigan-

Row1: P1(p2-p2-k1,p2-p1-p2-k1,p2),*k4,p2, repeat from * ending p1 (p1-p2-p2pk1-p2-2-k1-p1-p2-p2-p2-k1)....

and that's just the first part of the first row!

So, now we have our HTML commands, but really what we have is the page itself. The following link will show you what that page would look like if you opened it with your Web browser. What you will see is a plain gray or white page with a "missing" graphic icon and a couple of empty links. While you are there, select "View Source" from your browser's View menu and have a look at that document. It should look just like the HTML above. While you have that open, select all the text and copy it. Now open a new document in Simple Text or NotePad and paste the HTML into it and save it. For the purpose of this tutorial lets name it "Webpage.html". This is what we will use to build on and create your page. After you have looked at the plain HTML page and saved the HTML, use the BACK button of your browser to return here.

View Plain HTML

All we need to do now is add the information and graphics that you would like to have on your page to the plain HTML document you should now have on your drive.

First, let's go through the commands and I'll explain each one. All HTML tags are enclosed within chevrons, the less-than and greater-than symbols- < and >. These tell your web browser, "Don't print this on the screen, it's an HTML tag."

PUTTING THE PARTS TOGETHER

Now you should have the plain HTML doc on your computer, Open it up again and have a look.

At the top of the page is

<html>

This tells the browser that it's an HTML document

Next is

<head>
<title>your title</title>
</head>

Head means that it's not a part of the body of the page yet but gives some information about the page. Within the head is the title of the page as it appears in the top frame of the browser's window. The first <title> command says start the title, the second </title> command says end of title. In between, where it says Your Title, is where you put the title of the page as you want it to appear in the browser window. So go ahead and change that to whatever you want.

<head>
<title>Hand Carved Walking Sticks</title>
</head>

The next command is <body>, this tells the browser that this is the beginning of the body of the page. You can also tell the browser a bit of what you want the body to look like by adding a little more information within the tag. In older browser versions the default page color is gray so lets add this to be sure the page is has a white backgound.

<body bgcolor="white">

Be sure to type that exactly as it appears here. In newer browsers if the color is unspecified the page will default to white but in older browsers the default is grey, so this tag will insure we get white. (It is possible to change it to almost any imaginable color, but for the purposes of this tutorial we'll stick with white for now.)

Next comes
<center>
<img src="image.gif">
</center>

I already explained about the <center> command, the purpose here is to place some kind of graphic heading to your page in the center at the top of the page.

Open your favorite draw or paint program and design yourself a graphic heading. It doesn't need to be anything to fancy for now; remember, this is just a beginning exercise. You need to save that file as a GIF. (If you are on a Mac there is a great little shareware program called Clip2Gif that will convert anything on the clipboard to GIF format.) Then keep this file in the same folder or directory as your HTML document.

Now you just need to change "Image.gif" to the name of your own GIF file. Note that they must be written exactly the same, if there is anything different between the actual name of the file and the way it is named in the HTML the browser won't be able to find it.

So now you should have something like

<center>
<img src="Handcarved.gif">
</center>

The img src tag tells the browser to go find your GIF and place it on the page.

You can see what I mean about a web site being a collection of files. You supply all the parts and then tell the browser how you want them put together.

 

The command forces a line break, like a carriage return. You can also use multiples to add empty space between text or objects.

So now we can start the text of your page. If you want to have a heading in bold you can put that between the tags.

WELCOME

We'll talk later about how you can make the type larger.

Now go ahead and write what you would like the page to say remembering to put a at the beginning of each paragraph.



Welcome to Craftworks Walking Sticks. We offer a wide variety of designs, each hand carved in natural hard woods. One of a kind animal designs conforming to the natural shape of the stick.

Now if you wanted to place a picture of one of your works of craft you just copy the Image tag that we used for the graphic and paste it here, then change the name of the GIF to match the GIF showing your work.

<img src="Walkingstick1.gif">

If you want it to be centered remember to enclose it in the <center> </center> tags.

CREATING A LINK

If you want to create a link to another HTML document, like another page of pictures of your work, or to another URL you use the

<a href="name.html">name</a>

command.

In this case "name.html" is the name of the html document or web address and >name< is what the link says on your page.

To see more great crafts check out <a href="http://www.craftsfaironline.com">The Crafts Fair Online</a>

Now, you'll want people to be able to get in touch with you so you'll need an Email link. It's just a slight variation on the one above.

<a href="mailto:address"> E-mail me</a>

You just put your Email address in place of "address" and whatever you want the link to say in place of >E-mail me<.

Lastly, you put

</body>
</html>

At the bottom of the page to tell the browser "That's all Folks!"

So now our basic HTML should look something like this-

<html>
<head>
<title>Hand Carved Walking Sticks</title>
</head>
<body bgcolor="white">
<center>
<img src="Handcarved.gif">
</center>
 
 WELCOME 

Welcome to Craftworks Walking Sticks. We offer a wide variety of designs, each hand carved in
natural hard woods. One of a kind animal designs conforming to the natural shape of the stick.
 
<img src="Walkingsticks1.gif">

To see more great crafts check out
<a href="www.craftsfaironline.com">The Crafts Fair Online</a>

If you have enjoyed this tutorial you can write and
<a href="mailto:Craftworks@aol.com"> let me know.</a>
</BODY>
</HTML>

One of the nice things about creating a web page, as opposed to knitting a cardigan, is that you can add, change, correct, without unraveling the whole thing. Just go back and add commands to make it look the way you want. However, you have to be very careful that you don't miss a stitch. If you have a line in bold starting with the command, you must end it with the closing tag or all of the rest of your page will be in bold type.

So, by now you should have a page of HTML with your own title, GIFs, text, Email address, etc. Be sure to save it as plain text and name it with .html (or .htm) after the name. Then put them all together in the same folder or directory. When the web browser reads your HTML file it will look for the GIFs and stuff in the same place.

Now launch your web browser and choose "Open File" from the file menu, navigate to your HTML document and open it. (In newer browsers you can just drag the icon of your HTML file into the browser window and it will open. You should see something like this. If you look at the Page Source of that page you will see that it looks exactly like the HTML above.

To make any changes you simply open the HTML document in your text editor, make the changes and save them, then go back to your browser and hit the reload button to see how the changes look.

If you are happy with it the way it is you can skip ahead to Hosting & Domains . Or, continue with lesson two to find out some simple things you can do to dress it up a bit.

HTML Lesson Two

A Free Service Of The Crafts Fair Online
| Beginner's | HTML | Design | Hosting | CGI | Promotion | Bulletin Board |