This document has been created for the use of my clients to maintain the sites I have built for them. It does not claim to be anything other than a minimum introduction to my own preferred tools for website maintenance and a utilitarian introduction to HTML. If you are not my client, a student, or a charity and find this document useful please make an appropriate donation or select one of the web hosts I recommend since I get an affiliate fee.
The internet has changed the way people get and exchange information. Who needs the yellow pages when you have an internet search engine? Suppose you want to find a vet for you new puppy near you. You probably ask your neighbors, but you might just fire up your favorite search engine and find one. Or you can't remember who directed one of your favorite movies. Or you want the up to the minute weather forecast. Or you want to find a childhood friend. Or you want a book or clothing item not easily available in stores near you.
This all means that if you have a business, you need to have an online presence so that new and old customers can find you easily. So you have someone, perhaps even me, create a website for you or at least a page on a directory of similar endeavors. But now you want to be able to make simple updates yourself; for example, add a phone number or email address. This manual is written for you.
In a Content Management System (CMS), the text and images for each page (known as the "content") are easily updated by using a web-based word-processor-style interface. So the site editors so not need to know HTML to make changes. They can update the site from anywhere with an internet connection as long as they have a username and password.
This content is kept in a database. So each "page" is a set of information from the database which is displayed within the defined look of the site (known as the template).
Some content management systems that I recommend are:
So if you are lucky enough to have a website done in a CMS, you can skip all the parts in this manual about HTML.
There are two necessary parts to having a website before you even start on the pages.
What if you have been asked to update an existing website? If you have the username and password try using the FTP instructions in this manual. If the username and password do not work for FTP then try using them them to log into your control panel which is usually your url followed by /cpanel or /menu. Once in the control panel, you can usually make an FTP account. If none of these work then contact the hosting company. If you do not know who hosts the site, read the next paragraph.
What if you have been asked to update a website and you do not have the username and password? Then you need to contact the company that is hosting the site and/or the administrative contact. You can find out that information by using a who is website, for example http://www.whois.net and if they cannot get that information it will give you a URL. Now, unless the information is private, you will see the various contacts on the account and something called name servers. Sometimes one of the contacts will be at the hosting company. Typically the hosting company can only send the password to one of those contacts so if none of them are current you will have to prove that this is your site.
Also the name servers will usually tell you who the hosting company is. For example, if you look up openskywebdesign.com you will see that the name servers are:
Name Servers:
NS8407.HOSTGATOR.COM
NS8408.HOSTGATOR.COM
which tells you that the company hosting the site is hostgator.com of whom I am an affiliate.
An easy way to find out just what company is hosting a web site is to use this handy tool: http://www.whoishostingthis.com/
Web documents are usually written in HTML (Hyper Text Markup Language) and are shown with the icon for your browser in "My Computer" or Windows "Explorer." The file type is either ".html" or ".htm" or sometimes just indicated as "web document." Dynamic documents, ones that contain programming so that they display different information depending on context, can be other types such as ".asp" or ".php". We are not going to worry about those in this document.
HTML consists of a simple set of commands, interspersed with the text, that are indicated by being within angle brackets -"<" and ">." To see some examples click on the view menu above and click "Page Source." Scroll down past the unintelligible stuff until you see this very text. Notice that there are numerous examples of HTML commands prior to the text, but fewer commands within the text itself. The command you will see most often with the text is the <p> command which indicates the start of a paragraph. Also the </p> command which indicates the end of a paragraph. Most HTML commands come in pairs. More about the specifics of HTML commands is in the section called HTML Details.
The purpose of HTML commands is to describe the desired layout and presentation of the document. These commands are then interpreted and the result displayed to the user by a web browser, such as Internet Explorer, Chrome (my preference) or Firefox - software which is easy to come by on any machine.
One of the most exciting features of HTML is the ability to link a document to other documents, not just on your web site but on any computer in the World Wide Web. These hypertext links are usually underlined and/or in blue on the page, although a modern style is to have them be a different color than the text without the underline. Also many links are indicated with buttons or menus or even dynamic menus. The style for links in this document is to have the underline appear only when your mouse cursor is on a link you have not yet visited.
Another important feature of HTML is the ability to easily include pictures and other graphic images within the text of the document. Mixing pictures and words is a very powerful way to get your message across. The image files can also be files anywhere on the web or local site. The standard type for an image is a .gif or .jpg, although other types have come into use more recently.
Presenting documents for viewing on a computer screen is different from an on paper or book presentation. No longer do we need an index - we can ask our browser to search for any character string we want. Page numbers no longer have any relevance either. Sections need to be short enough to be read in a screen or two. The table of contents is now a list of hotlinks to sections in the document. Graphics are easy to incorporate and can be prepared using any tool that can produce .gif or .jpg files.
All the major word processors support the HTML format. For example, on the File menu in WORD, when a file is opened or saved, HTML (as a web document in WORD 2000) is one of the available formats. However it is better to use a tool designed for editing web pages to do your updates.
The Composer is included with the SeaMonkey web browser (it used to be part of the Netscape and Mozilla web browsers) which can be downloaded for free to your computer from SeaMonkey. It is an easy-to-use HTML editor which lets you see the page pretty much as it will appear in a Browser while you make your changes. This is known as a WYSIWYG editor which stands for "What You See Is What You Get." If you plan to make simple changes to the text in your web page, then you can use Composer without even having to learn HTML.
More details on using Composer are in the chapter below "Using a WYSIWYG editor."
In order to move files to and from your site with ease I recommend a program called FTP_commander which can easily be downloaded for free from the web. It gives you a windows explorer-like interface to your site with two windows. The one on the left is your local computer and on the right is the web. You change directory to your local folder for your site on the left by clicking in the same way you are used to using with Windows Explorer. Click on C:/ and the the makeDir button above to make a new folder for your web site. You might call it by your website name. Then click on that folder and make another folder called by the date so Sept2010 for example. Do this each time you make a new backup. That way you have a history of what your site looked like.
To set up FTP commander to access your site you need to know your username and password. Click on the new server button and enter your URL (without the http://), username, and password in the appropriate little boxes on this window. Name it something you will remember like your actual site name. Then click OK. Once this is done, whenever you start up FTP_commander your site name will appear in the server list on the right. Now when you double click your site name, you will be connected to your site. After a pause of a few seconds, (note all the messages explaining what is happening on FTP_commander bottom bar) the filenames of all the files on your site will appear in the right window. Also if you have any subdirectories, those will appear with little manila folder icons just like they do in Windows Explorer. If you double click a folder, the right window will change and display the contents of that folder. To go back up to the main directory, double click the little up arrow icon at the top of the list of files. Note that if there is a folder called public_html or www that is where the files for your actual web site are located.
One problem with the FTP protocol is that is is not secure. Read this wikipedia article on FTP to know more. And there has been a rash of username password stealing recently. So change your password regularly.
To use a secure form of FTP, you will need a different free product, Filezilla, and you will need to find out how your particular hosting company sets up secure FTP so as to know what to put in the URL and port fields.
The first thing you want to do is to move a copy of all the files from your web site to your local pc. Highlight every file in the right window (hold the control key while you click on each one of them to do this) and then click the arrow that goes from the right to the left. To upload a file that you have changed, select it on the left and then click the arrow that points to the right.
One of the things you must do weekly (or monthly) is to check all the links on our site to make sure none are broken (e.g. clicking on them gets a 404 error or no response at all). Not only are broken links on your site annoying to your users, but they will cause search engines to downgrade your site, a very undesirable result.
XENU is a free package to check all your links. Download it and use it regularly. When an internal link is broken, if you can't figure out easily how to fix it yourself, send me an email with the cut-and-pasted XENU complaint about it. When an external link is broken, try to find the new site using Google or your own favorite search engine. If you can't find the new link, either remove it yourself or let me know. If you find the new URL, then use the section below on inserting links to be sure you change to the new link properly
If you need to work with images, you probably want to have Adobe PhotoShop. Most serious web designers use the Professional version but Photoshop Elements has more than enough for the small-time web site. The best feature of Elements for these purposes is the ability to save optimized images for the web in either GIF or JPEG formats. Note that GIF lets you use fewer colors which is an efficient way to save simple graphic images with a small number of colors. Photographs should usually be saved in optimized JPEG format. It even shows you the new and old sizes and expected download times on a high speed modem.
Photoshop Elements is not free but very affordable. Click here to buy it from Amazon.
If you need to make photo album type pages of your images, my favorite tool is ThumbsPlus from cerious.com. It has a web page wizard that will make pages of your selected images where you can select the background colors and thumbnail sizes and create just the page you want. It also is a very nice way of looking at directories of photographs and has a tool to quickly rotate them (when you held your camera sideways) among other goodies.
There are a number of good free HTML text editors available on the web. What they give you is the ability to modify the text and codes with the normal features of a word processor, buttons for bold and italic, search and replace, as well as buttons to help you make a link or insert an image easily. My preferred editor is HTML-kit which has a handy HTML code checker (F9) as well as buttons for most of the things I need. It even has a function called "Strip Surplus Tags in Word 2000 pages" which is very useful on converted documents.
I also use Arachnophilia, another free HTML editor, for its good list and table wizards.
Microsoft WORD has the ability to edit HTML files, however it
has the unfortunate tendency to redo the formatting and add extra codes.
Therefore this is not the
way I recommend working with existing web pages. It is however the way to convert
word processor documents to web pages.
WORD documents can be saved as HTML from the WORD file menu "save as Web Page" (WORD 2000) function or "save as HTML" (earlier versions of WORD) function. This means that documents can be easily written out in HTML format from WORD.
Before you make any changes be sure you have two copies of your site. One which corresponds to the site as it was before you started making changes and another which is the one you are working with. The section on FTP_commander explains how to do this. I also recommend making a backup of your site on a removable media that you store in a separate location.
Notepad on the Accessories menu can be used to edit an HTML document. You will see all the codes and text, rather than what you see in a Browser. Use search to find the text you want to modify and then change it. Be careful not to inadvertently change or delete any of the HTML commands which are between angle brackets <>
Use the "save as" on the file menu to save the document with a new name such as newfilename.html. There are several steps you must be careful to follow when you do this. First you must change the "Save as type" box to "All Files." Second, be sure to type the ".html" at the end of the name in the "File name" box. If you forget these steps, the file will be saved as a text file type instead of an html type.
After making your changes and saving the file, look at it in several browsers to check that your change was good (if you have include files, you must upload this new file to your site in order to see it properly). The URL for your new uploaded file is http://yourwebsite/newfilename.html . Once you are happy that the change is right, save it again with its old name and upload it. A trick to be sure that you get the new page when you look at your site is to hold down the control key on your keyboard while you click the refresh/reload button on the browser. This forces your Browser to go get a new copy of the page from the site rather than using the cached copy on your pc or server.
It is easy to modify a web page that has no frames or PHP commands by using the Composer program from SeaMonkey. Most other WYSIWYG Editors are too fancy and complex for the average user. You get to the COmposer from the Windows menu on the SeaMonkey Browsers Before you start using it, you must make a small correction. Please go to the edit menu and click on preferences. Now unclick the box that says "Save images and other associated files ..." Then click OK.
Composer will appear as a blank window on your screen with a toolbar that contains familiar items for anyone who uses a word processor: New, Open, Save, Print. New buttons are Publish, Image, Table, and Link. The next toolbar has a pull-down menu for the text type: normal which is "body text", plus all the header levels. This toolbar also has many familiar looking formatting buttons: Bold, Italic, Bulleted List, Numbered List, Indent, Dedent, Center, Left, Right Align, and Justify. New buttons are choose color for text, choose highlight color for text, make font smaller, and make font larger.
If you click on any element, like a table, that area is selected and you can make changes to it and even move it around!
To make a new hyperlink or correct an old one, select the text that you want to click on for your link or create the text when you make the link. Next click the Link button or type control-L. A small window will come up which is fairly self-explanatory. If you are linking to another file on your site and thus also on your local computer, click on choose file. If you are linking to a URL, you must type the full web address with the http part. For example to link to my website, you would type "http://www.kittycooper.com" not including the quotes. To make a link that sends email to an email address type the text "mailto:" in front of the actual address in that box, for example "mailto:anyone@hotmail.com" would send it to that email address.
When a WORD document is converted into HTML, WORD will automatically change the normal WORD template into the HTML template. The HTML template is very similar to the normal WORD template minus some of the options.
In the HTML template, there are shortcuts to Bold, Italic, Numbering, adding Bullets, Inserting Pictures and Bookmarks, etc. If the mouse is left over a shortcut picture for a little while, WORD will display what the shortcut refers to.
WORD doesn't always follow HTML standards. For instance, if a <dl><dl> is used, in a viewer such as Netscape or Mosaic, the text will appear indented. But a <dl><dl> will not be indented in WORD. You can do definition lists and definition terms which will be indented in WORD, but they do not seem to be indented in other browsers such as Netscape. When a certain heading or indentation is added, it is good practice to check the document in several browsers.
The HTML source can be viewed from a Browser, as well as in any plain text editor such as notepad.
Every HTML command is enclosed in angle brackets, for example <title>. Most HTML commands require a starting and terminating command to indicate that all the text between them is included in this container. The terminating command is the same as the starting command except that it is preceded within the brackets by a slash. For example,
<title>This is the title </title>.
<command1> <command2> </command2> </command1>
is the correct format, while<command1> <command2> </command1> </command2>
will confuse many Browsers, and thus produce unpredictable results.The title command just puts that text string in the title bar of the Browser. If a title is desired at the top of the document, it will have to be inserted as text.
All HTML documents must start with the command <html>. The next section of the document is known as the header and is indicated with the command <head> and terminated with the command </head>. This includes the title, a description and keyword lists for the use of web search engines, and any special styles. It can also include javascript programs for use later in the document.
Then the main part of the document is started with a <body> command and terminated with a </body>.
The <hr> command will draw a horizontal line across the page. This is a useful way to emphasize the start of a new section by putting lines before and after the section name.
The Browser that processes your HTML document will ignore extra spaces and line breaks. To skip lines, create indents, or force a line break, explicit formatting commands have to be used. These are:
The font command allows selection of specific type faces, sizes and colors for the contained text.
Several types of lists are supported in HTML, all of which are containers. The following list of the list commands was created using the Definition List type. Both other list types can be viewed in the Contents at the beginning of this document.
Another use of <dl> is to indent a section of text. Several <dl> 's followed by text without any list items will result in that text being indented.
The "A" command stands for anchor. There are two kinds of anchors: one to an external
document and one to an internal hotpoint. External documents need a URL
(Universal Resource Locator) address,
which can be to anywhere on the web or on the local server.
An internal link is indicated with the number sign character
followed by the name of the jump point, for example, "#section1".
These two types can be combined so you could, for example, link straight to
chapter 2 of someone's document.
howtoupdate.html
http://www.OpenSkyWebDesign.com/howtoupdate.html
In addition, the command should be followed by an alternate text element to be displayed while the image is loading or if the image cannot be retrieved/interpreted:
Also, you can indicate where to align the picture, right or left, so that text can go next to it. Be sure to tell the browser to put some white space between the picture and text by using HSPACE and VSPACE
Browsers that interpret HTML think that when they get to an open angle bracket, < , that an HTML command is about to start. If the text following the angle bracket cannot be interpreted, all text until the next closing angle bracket,> , will be ignored. This is true even within a pre container.
The ampersand character, &, has been designated to indicate that what follows is a command for a specific character to be displayed, it must be preceded by a space and the designator must be followed by a semi-colon.
These are the commands to show specific characters:
p {text-indent: 2em;
margin-top: 10px;
margin-bottom: 10px;}
The modern approach is to put styling cammands in one or more separate files, ".css" is the fule type for these files. Search
for CSS tutorial on the web for more information on this complex subject. CSS stands for
Cascading Style Sheet.
Tables are the tool that many web designers use to control the layout of their pages. Tables have columns and rows. A table element can span more than one row or column. The basic commands are:
In Composer, tables will appear with dotted red lines around them and each cell. On the top bar there is a menu called "Table" which has easy-to-use commands for inserting columns, rows, and cells, as well as many other useful table manipulating commands.
The following web sites are good places to start for more information on HTML, converting documents to HTML, and other web related information:
A Beginner's Guide to HTML from NCSA
The W3C - World Wide Web Consortium - Home Page
Webmonkey: many great how to articles for beginning web masters
HTML documents can be directly imported into all recent versions of
Microsoft WORD. Within the limitations of HTML, documents saved in the HTML
format will retain their original format, including hot links.
When a WORD document is saved as HTML, the HTML version will have blank lines everywhere there was a P (paragraph marker) in WORD. This means that if one presses enter (which inserts a P marker), instead of typing to the end of the line, there will be an empty line inserted when the document is saved as HTML. This may be preferred since HTML does not normally have an indent at the start of a paragraph (to have indents see section on special formatting).
However, if this extra line is not wanted, then use a SHIFT+ENTER instead of an ENTER at the end of a line. The SHIFT+ENTER will just go to the next line, not skipping a line in the final HTML version of the document.
To correct this problem in an existing document click on the SHOW/HIDE
PARAGRAPH marker, and then manually press SHIFT+ENTER everywhere there was
a P.
The procedure to set up hyperlinks in WORD is straight forward since WORD itself has an internal linking function, which is similar to the HTML one.
Bookmarks can be used to mark items and locations in a document. To define a bookmark in WORD:
To make a cross-reference to the bookmark:
Links can also be made to other documents. When in the hyperlink menu, choose to internal document instead of to bookmark, which is the default. Then just select the file that you want to link the bookmark to.
Last update March 20, 2009
Copyright © 2003 & beyond, Kitty
Cooper