How do I edit an HTML file

This document covers the basics of editing an HTML document, before you read these instructions you should have already chosen and downloaded your HTML editor and gotten your file off the server with FTP

Meta Tags

Open your HTML file in your editor. Toward the top of the file you’ll see a line that reads:

<meta name="description" content="Add description" />

This is your meta description tag, right now there’s a placeholder saying “Add description”, this needs to be changed to the actual description for this page. The description you put in here is the one that will be seen by google and the words contained in this description will help you get found by people looking for content relevant to this page. It is very important to NOT use the same description for all of your pages. You should make a description that is relevant to the specific page you are editing, not the site as a whole (the description you use on the home page can be more general).

If you’d like you can add a meta tag for keywords as well, but this tag is not recognized by google anymore and these keywords will only be seen by a few other spiders… it’s better to just have the description and your content speak for itself.

Make sure you don’t delete the quotes ” at the beginning or end of the content attribute, and make sure you self-end the meta tags like this />

Comments

Now let’s go down further to where we see a comment:

<!--design by: mimoYmima.com-->

This is a comment, it’s not seen by the browser or spiders. You can type whatever you want inside a comment but usually they’re used by the person who writes the original document to tell someone else something about the HTML that will make it easier to understand.

<!-- anything you type here is disregarded -->

Now let’s change something on the page. Let’s look for where the div tag for the Content starts:

<!--BEGIN: Content-->
<div id="Content">

below that a few should be some paragraphs

<p>text text text</p>

Notice how there is an opening paragraph tag <p> and a closing tag </p> after the text to enclose the paragraph. The closing tag has the back slash in it, make sure not to replace it with just a <p> or you’d be starting another paragraph.

Let’s change the text around a bit just to see how this works. Just change the text in between the opening and closing tags. Then press the apple key and S at the same time to save the document.

We’ve just made the first change that will be visible on your page, to see the change go to any web browser and go to file/open and locate the html file on your computer. When you open the file, the new paragraph should display. As you make more changes to the HTML file in your HTML editor you can keep this page open in your browser and just refresh the page to see the changes.

Keep in mind you need to save your changes in your HTML editor to see them in the browser. You’re now looking at the file on your computer, to make the changes live on the website you will need to go back to Transmit and move the file back from the left side (your computer side) to the right side (the server side). Then to see the change live on the website you’d just go to your url in the browser window and change it from the local url to that of your website.

If the file doesn’t change but you know you’ve changed it and put it up on the server, you may be ‘Cached’. Which means your browser is showing you an old version of the site which it has saved on your computer instead of refreshing to the newest version on the server .. if you think this is happening see — Caching — in the Misc section at the end of this document.

Links

Text on your site can be linked to a web page. In this example we add a link into the text of the paragraph:

<p>My name is Brent Lagerman, my website is <a href="http://www.mimoymima.com">mimoYmima</a>.</p>

The info inside the href="" attribute of the anchor tag is where the link actually goes, the text that’s actually displayed for the link is between the anchor tags <a href="http://www.link.com">Text displayed for the Link</a> and it can say whatever you want although it’s best to keep it saying what it’s linking to instead of something that means nothing like ‘click here’.

If you are linking to something on your site, that’s all you need to do, if you are linking off-site, you may want to add the class="Popup" like this:

<a href="http://www.link.com" class="Popup">Text displayed for the Link</a>

That will popup the page you are linking to in a new window.

You can put the link around as many words as you want and change the info in the href="" attribute to the website you want to link to, but make sure to include http:// before the website names or they won’t work.

To add a list of links we made a class called link-list to be used with the <ul> tag, which stands for ‘unordered list’

<h2>Here's an example of a list of links</h2>
<ul class="link-list">
<li><a href="http://www.mimoymima.com">mimoYmima</a></li>
<li><a href="http://www.mimoymima.com/sitemap.php">mYm sitemap</a></li>
<li><a href="mailto:brent@mimoYmima.com">Contact Us</a></li>
</ul>

Notice that we didn’t use the http:// in the href="" attribute for the email. When you want to have a link to someone’s email you need to use mailto: instead.

It’s easy to add more, just make a copy of one of the lines and change it around.

Images

When you save the image files don’t use spaces or capital letters, this will help avoid confusion when you’re putting in the names in the HTML. In general we try to keep a file name sorted by what it is followed by the specifics (seperated by underscores). So a photo of a bird would be photo_bird.jpg

Images are files on your server, so you don’t need to include the website name in the src="" attribute, but you would need to if you were trying to access a picture on another server:

src="http://www.yourwebsiteurl.com/images/photo_bird.jpg"

is the same as:

src="/images/photo_bird.jpg"