Getting started information
The ins and outs of maintaining your website.
(Aka: your website owners manual)
by Kristina Deppe
WebSavvyMama.com
For Web Mama E-cart help please refer to this series of specific tutorials: http://websavvymama.com/blog/?cat=4
FTP, what is it? (loading and downloading)
Editing the content of your page
What is HTML and what are the basics you'll probably use?
Helpful HTML tags to know
Basic Table information
Basic Graphic information
Basic Link Information
Accepting Payments, Paypal and Mals:
What should/can I include on my website?
FTP, what is it and how do I use it?
A FTP client is the means of connecting to a computer or website to download or upload files. First you'll need a way to download your listing page and upload it when its complete. There are many shareware programs available. Many are not all they are cracked up to be. I've found the most reliable one so far to be "Smart FTP", they offer a 30 day trial and you can continue to use it past the trial if its for personal use or purchase a copy for very cheap. Dreamweaver and some other html editors may have an FTP built in, if you have one of these programs feel free to use them. Once you've decided on a FTP you'll input your hosting accounts login data and it'll connect you.
When you signed up at with your host you were given this information:
User ID: ID you log into your account with
FTP login: This is what the FTP address is, either an IP address, specific FTP address or use your domain "xxxxx.com"
FTP login ID: UserID for FTP if different than your main account login
Password: yourpassword
Keep this information in a safe place! Now you have all the means to log in! If useing Smart FTP, once logged in you'll have 2 windows. If you dont please refer to the tutorials at Smart FTP for further information. One will be the directory on your host showing your pages and one will be your computer directory. First you want to create a place on your own computer where you are going to store your files. You want to create a backup of all your work. Once you have a place to drop your files, find it in your computer directory window on SmartFTP. Click on the file you want to edit and drag it into your folder on your computer. Congrats, you have just downloaded your page! Now you're ready to get to work! After you are done editing your page you reverse that drag and drop and drop your edited page into the host Directory and click "overwrite" when it prompts you to. Thats it!
Editing the content of your Page.
Now that you have your page downloaded you'll want to edit the contents. Open it in NotePad. (I'm asuming here you dont have a HTML editor). I mark your page up according to where you can and cannot add information. This will help guide you when editing your page while you are learning.
Your description/content area may be as long as you like and includes any info you planned on including in your page. Make sure you stay within the indicators marked on your page. The indicators will NOT show up in your listing so dont worry. When you are completed with your listing save it. Now you are ready to upload it to your host, refer back to the FTP section.
What is HTML and what are the basics you'll probably use?
HTML is the language your web browser reads. Its a mix of codes you'll use to get your page to look a certain way and get the text to act certain ways. Here are the basics you'll probably use. But you are not limited to these, feel free to explore the web to learn more! Be aware of how wide your tables and images are.. if they are wider than your page you coudl have layout issues. If you go over this it may either overlap outside your listing or push your page down on the page. The behavior will be determined by the different web browsers.
Helpful HTML tags to know:
Simply hitting 'enter' will not start a new line. Same is true for bolding the content using your word pad and any other attributes. Browsers dont recognize these comands unless they are coded in.
| <p> </p> | indicates new paragraph, any text typed after will appear 2 lines down. | ||||||
| <br> | indicates a line break, any text typed after will appear 1 line down. | ||||||
| <pre> </pre> | is a preformatted code. It displays type exactly as it is typed, extra spaces, returns and all. | ||||||
| <blockquote> </blockquote> | The blockquote indents the pragraph on all sides. Often used with customer comments or quotes. | ||||||
| <b> </b> | Bold attribute, anything inside this tag will appear bold. | ||||||
| <i> </i> | Italic attribute, anything inside this tag will appear italicized. | ||||||
| <center> </center> | |
||||||
| align="right" (is now obsolete in IE7) style="float:right;" |
Inserted into a paragraph type tag will align the paragraph to the right. Applied to an image it will align the image to the right and cause other text to wrap around it. | ||||||
| align="center" (is now obsolete in IE7) style="float:center;" | Inserted into a paragraph type tag will align the paragraph to the center. Applied to an image it will align the image to the center and cause other text to wrap around it. | ||||||
| align="left" (is now obsolete in IE7) Use the style tag instead: style="float:left;"
|
Inserted into a paragraph type tag will align the paragraph to the left. Applied to an image it will align the image to the left and cause other text to wrap around it.You do NOT need to use this to align text as text is automatically defaulted ot teh left, but it does come in handy to use with images. Explained better in the image section. | ||||||
| <font> </font> | The font tag effects the way text looks. Many atributes can be added into this tag. Examples:
|
Basic table information
Gallery and ordering info you may want placed in tables for easier arranging and editing.
The following is what you need to know regaurding editing them. There are endless ways to use and edit a table including, border, color, width, height, spacing and padding. A search on the internet can turn up lots of resources explaining all these variations, for our purposes I'm keeping it simple.
This code is where the table starts, this sets up width and spacing. Ignore, dont edit. The numbers all will vary though depending on the usage of the table.
<table width="x" border="x" cellspacing="x" cellpadding="x">
This code declares the beging of a new row in your table.
<tr align="left" valign="top">
This code declares the start of an actual table spots that are in the row. Each row must have the same amount of td (cell) sections.
<td>
Each code has a closer, this is the HTML which ends the function. For a table you'll have </td> </tr> </table>
When editing table content you edit the content between the following codes:
<td> content </td>
A basic table code may look like this:
<table cellpadding="0" cellspacing="0" border="1">
<tr><td>Content 1</td><td>Content 2</td></tr>
<tr><td>Content 3</td><td>Content 4</td></tr>
</table>
On the web it would look like this:
| Content 1 | Content 2 |
| Content 3 | Content 4 |
Basic Graphic information
All images used need to be stored somewhere on the web to be able to use them on the web. The basic place to store them is on your host of course! When possible try to upload them to your file called "images" for easy organizing, just remember to include the title of the images folder when you are linking it.
To place images you use the <img src="yourfolder/imagename.gif"> code. If the image is hosted on the same host as your website you do not need to have a complete URL. Its ideal to already have your images to the size you need instead of relying on height and width codes to change them. This will keep loading times down and also help reduce file sizes when smaller images are used. It also makes it easier on YOU to add more pictures if you have less code to worry about! A program like Irfan View is a great resizer and its free!
To make a thumbnail you actually need 2 images; a small one and a large one. Insert your small image and surround it by a link to the large one. Its that easy! Example: <a href="url to large image"><img src="small image url" border="0"></a>
Aligning images so text wraps around them. Do you want your image inserted into a paragraph and the test to wrap around it? All you need to do is add the align property to your image tag.
The align properties are: align="right", align="left", and align="center" .
** Update: Now in IE 7 the align property doesn't work. Instead give it the propery style="float:left;" or style="float:right;" for the same effect.
To add a border simply add the border="" tag and give it a number, ex border="2"
To add horizontal padding you include hspace="10" to add verticle padding include vspace="10" (change 10 to whatever space you want) Example: <img src="url to image" align="right" hspace="10" border="2" vspace="2" >
See example to the right that has a right align and horizontal padding of 10 verticle align of 2 and border of 2.
Making a Image a link. (Banner links etc)
Follow the same rules as making a text link but instead of inserting text, insert the image code.
ex: <a href="http://websavvymama.com" target="_blank"><img src="http://www.babyspaceslings.com/websavvybannersm.gif" border="0"></a>
Looks like: and is a clickable link to a new window.
Basic Link Information
Links are pretty easy to apply. You just need to know what the link is that you are going to and how you want it to appear. If its not on your domain/host you will need to type out the full web address like this: <a href="http://www.domain-name.com/page-to-access.html">Text to appear</a>. If the link is located somewhere on your website you can use a shortened version <a href="yourpage.html">Text to appear</a>.
Format:
start with <a href= insert "location always surrounded by quotations.html" followed by > insert test to appear and close with </a>
translates to: insert text to appear
You can also indicate if you want the link to open in a new broswer window. To do this you include target="_blank" in the link code and it will open in a new window. Completed it would look like this: <a href="http://websavvymama.com" target="_blank">Web Savvy Mama</a> appearing as: Web Savvy Mama
Accepting Payments, Paypal and Mals:
You have your listing up, how do you accept payments? First you have to decide what kinds of Paypal payments you want to accept: eChecks, FundedPayPal or Credit cards via Paypal. You can accept all or only one, its your choice, just make sure to make that clear to your shoppers!
You can use Paypal solely and place paypel buttons (read below) or you can set up a Mals account which is also free and use thier shopping cart feature. If you are using Mals in conjunction with Paypal please visit the Mals site for more information on set up, dont worry its easy!
If you are listing one of a kind items you may not want to include a "buy now" or "add to cart" button. If you do, more than one person may buy the item before you remove the product. In the case of one of a kind items I suggest including your email address and having them contact you directly for availibility. This way you can invoice your customer or give them your payment options and you avoid having two people inadvertently buying the same item.
If your item is a continual listing or you have multiples you may want to include the "Buy now" or "Add to cart" button options. As long as this is a restockable item you wont have to edit your listing if a item sells.
Whats the difference between "buy now" and "add to cart"? Both bottoms are created on your paypal account. Under your merchant tools tab on the right hand side you'll see both options. Both buttons allow you to set shipping, extra options, and other preferences. After you select your button features it generates a HTML code for you to use. Simply place this code in your listing where you want it. "Buy Now" button is exactly what it says. You are buying it immediately and only that item, your customer will not be able to buy more than one type of item at a time. "Add to Cart" allows your customer to add the item to thier cart and continue shopping and add more items from your store if they chose. If you use the "Add to Cart" button make sure to also include a "Veiw Cart" button which is also generated by Paypal. Customers will onyl be able to add items to thier cart that are listed at your store and by the same paypal account. They will have to "check out" before shopping at another store.
What should/can I include on my website?
You may add anything you want on your website.
Reccomended inclusions are:
-Contact information. How can they contact you directly if they have questions?
-Store description
-Policies and anything relating directly to how you opperate your business. Do you have store hours? Do you accept returns?
-Shipping and payment options.
Other inclusions to consider:
-Pictures, your customers will want to see what they are buying.
-Descriptions, include accurate and detailed descriptions.
There are limitless possibilities for customizing your page. Helpful tutorial websites can help you to find the code you need, I encourage you to familiarize yourself with the codes you will be using regularily. And most importantly backup your website often by downloading the files for safe keeping.
All content copyright Kristina Deppe and may not be reprinted or distributed without prior written permission.