First steps (use any editor)
No, it doesn't matter. NoteTab does have the shortcuts that you might like, but Dreamweaver probably does too. Use what you like. The rest of this post I wrote before getting your question so it assumes you couldn't use Dreamweaver and mentions NoteTab so you can just ignore those comments if you are not using it.
Alana,
First, to use NoteTab you don't need to know anything new to start with (it works a lot like notepad), but it will help you automatically in several ways. Most important, it will preserve what you write just as it is without any hidden formatting or anything. You just type, paste, copy, cut, etc. as you do elsewhere.
At the same time, on the left side you will see a column with short cuts. There is a dropdown box toward the top. Make sure it has HTML selected in it. Near the bottom of that column, in red, you will see a section named "Block Formatting." Scroll it up a little so you can see the items in it.
It will save you a lot of time to use a few of these and it is very easy. You can either click the item you want first and fill it in or type what you want, select it and then click and the item will be enclosed with the tags.
For example, click "paragraph block" and it will print <p></p> on the screen (a small menu may pop up about alignment, but if it does ignore it, leave blank, and click "ok." Now put your cursor in the middle and type or paste your paragraph. Or, as I often do, I just type or paste my paragraph on screen, select it with my cursor, then hit the command and it will put the marks in place.
The header command is the other one it will pay to use. When you click on it, it will pop up a box asking for a header lever, which can be numbers 1-6 with 1 already in the box. If you want a smaller header change the number and click "ok."
That is all you need to begin work. Most of what we need to do can be used just changing the content in the template, but using these two commands will help speed things up.
Now, open up your index.html file in NoteTab. You will need to decide on a way to work that is most convenient for you to be able to follow the instructions here. Either have two screens on line or print off this part to have it easily available to work back and forth.
The easiest way to do this will be to simply start at the top of the template and work our way down.
First you see these lines which are the doctype instructions.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
This is the easiest part. Just leave it alone. Every page needs one so the browser knows what version of html you are using. It must be the very first thing on the page. (You don't need to understand it. Check w3schools if you are interested. Most people just copy and paste and go on.
Next is the head section.
<head>
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="http://www.flat-stomach-exercises.com/favicon.ico" />
<title>Your Title</title>
<META Name="Description" Content="description" />
<META Name="Keywords" Content="keywords separated by commas"/>
<link rel="Shortcut Icon" href="/favicon.ico" />
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>
</head>
Start by deleting the first two lines:
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="http://www.flat-stomach-exercises.com/favicon.ico" />
You have a favicon but this item is duplicated further down and we will insert yours at that point.
Then you have the title line:
<title>Your Title</title>
Simply insert your own title.
<title>the children's party planner</title>
Next we come to some meta tags.
<META Name="Keywords" Content="keywords separated by commas"/>
Simply change this by substituting your own key words inside the second quotes after "Content." The easiest way is to cut and paste from your old file.
<META Name="Keywords" Content="everything you need to know to plan your child's party with party ideas, party themes, docorations, party supplies, childrens costumes, party games and more"/>
The next item if one for your favicon. This line is exactly the same as your old line
<link rel="shortcut icon" href="/favicon.ico">
except for the caps. Actually, yours are the correct format. With xhtml you properly should use all lower case. You may want to copy and paste yours but it shouldn't be necessary.
If you save your file and open in a browser you will now see the new title at the top of your browser. The favicon will not show because it is only online. Everything else will still look the same as the template.
Break time: I am posting this now. Let me know (Alana) if you have any trouble to this point and when you are done. I don't want posts to get too long. I may get more up before you answer, though, so you can continue to work without getting back to me since we are dealing with different time zones.
|