Editing Your Website

Introduction

In the old days — the 1990's — it was difficult enough to set up a website that most people who owned one also knew how web pages work. Nowadays, it's common for the proud owner of a nice new website to have little or no understanding of how the darn thing works. For the most part, this is fine — most of us manage to drive competently without understanding how cars work. However, even website owners who are glad to hire help to build their sites often want to be able to make some changes on their own.

There are many tools, free and otherwise, that can help satisfy this eminently reasonable ambition, and most are designed to make it easy. Our experience, however, is that even the best, most thoughtfully designed tools still require a rudimentary understanding of how a web page works. Thus this quick tutorial.

How Do I Edit My Website?

A website is made up of (a) one or more files that are (b) stored on a computer that is visible to the Internet and prepared to deliver ("serve") those files on request (a "web server"). The files we are interested in are your "web pages" — generally plain text files whose names end in ".htm", ".html", ".php" or ".asp."

Editing your website is a 3-step process:

1. Get a copy of the web pages you want to edit.
2. Edit them (or create a new web page).
3. Copy ("upload") the new or edited web pages to the web server.

Getting Web Pages from Your Website

You may already have copies of the files that make up your website, and can just edit them directly. But normally you will want to retrieve ("download") a fresh copy of the most current files from the server computer that hosts your website. If you are reading this tutorial, those files are probably stored on a web server owned by a company that provides "web hosting" services. When you signed up with the web hosting company, you should have received a user name and password that allows you to copy and store web pages (and other files) on the web server.

There are several ways to retrieve web pages from your website:

• Most web hosts offer a "control panel"—a set of online tools for managing your site. You enter the address of the control panel in your web browser, and then supply your user name and password. One of the tools available on the control panel will be a file manager that allows you to download files from (and upload files to) the website. This method can be slow and clunky, but it works.
• You can also use a standalone program to transfer files from (and to) the web server. These programs are called FTP clients (FTP stands for "file transfer protocol"). You will need to provide the basic connection details to the program — the address of the site ("mywebsite.com") and your user name and password — but it's pretty straightforward from there. There are any number of good, free programs for this purpose, including Filezilla, which is probably the most popular. There are even a number of browser plugins (e.g. FireFTP, for Firefox) which permit you to download and upload files directly from your browser.
• Most specialized web page editing programs, including all of the programs mentioned below, have a built-in FTP feature (sometimes called something like "sync manager") that can connect directly to your website, allowing you to edit and transfer files within the same program (again, you will need to supply the basic connection details).
• Finally, your website may be set up to use a specialized tool for editing the content of a page while keeping you from unintentionally changing the basic page layout and style. If your site was built using Dreamweaver, you may be able to use a companion program called Contribute to do this. There are also a growing number of services or methods that a website developer can use to make portions of pages editable right in a web browser (they only work if you have a password, of course).

Once you're in, navigating around the web server can be a little confusing.  It's important to note that with most web hosts, your space on the web server consists of a root directory with a number of sub-directories.  The files that make up your website will generally be in one of these sub-directories, which is usually called "public_html", but may also be called "public" or "www" or "htdocs."  Talk to the person who set up your website if you're not sure.

Editing a Web Page

A web page is simply a plain text file that contains the content to be displayed on the page, along with the instructions on how to display that content.

The "plain text" part is important. It means that any program capable of reading or creating a text file can open or create a web page. You don't need a special program! One of the easiest ways to create a web page is to use Notepad, the simple text editor that comes bundled with Microsoft Windows (or TextEdit, the Mac equivalent). There are lots of other programs available, too; for example, Windows users can use Notepad++, a free text editor that is small, quick and remarkably capable. And yes, you can use Microsoft Word or other word processors, but it's vital to know that a normal word processing document is not plain text! You'll need to save any file you create in a word processor as text only. Eventually you may want to start using a specialized program designed specifically to make editing web pages easier, but these tools can be daunting to a novice. Dreamweaver is a well-known but expensive web editor; Aptana, Komodo and NetBeans are full-fledged, free and very capable web editors too.

Copying Web Pages to Your Website

Copying an edited (or new) web page to your website is called "uploading." You use the same techniques you used to download the web page from your website, just in the opposite direction.

HTML Basics

So, if a web page is simply plain text, what is HTML? As mentioned above, in addition to content, a web page also contains the instructions that tell your browser how to display the content. These instructions are written using HTML (for "hypertext markup language"). HTML is just a standard notation for instructions about how to display a web page.

The instructions sit right there in the text of the page, and consist of simple "tags" to explain, for example, when a word should be bold or where a paragraph begins and ends. Since the page content and the HTML instructions live together in the same file, you need a way to distinguish the HTML instructions from the content. This is done by enclosing the HTML tags in angle brackets (aka the "greater than" and "less than" symbols). Virtually all HTML tags come in pairs, one to mark the beginning of the content to which the tag applies, and one to mark the end (end tags simply insert a slash mark in front of the tag name). For instance, to make a word appear in italics, you use the "em" (for "emphasis") tag like this: <em>italics</em>.

Of course, it does get a little more complicated. An HTML tag may contain additional instructions that look something like this: <tag attribute1="value" attribute2="value" style="styletype: value; styletype2: value;">, but that's a topic for another day.

Practical lesson: Don't edit stuff between < > brackets unless you know what you're doing. Also, for reasons that should be obvious, you can't use the < or > symbols directly in your text -- you'll need to use a special code instead (see below).

The structure of an HTML document

In addition to marking the content of your page to indicate what it should look like, a web page needs three other HTML elements: <html> and </html> at the beginning and end, and inside those tags, two other tags: <head> ... </head> is an area for information about the page (more on this later), and <body> ... </body> is the place where all of your content goes.

So the basic structure of a web page looks like this:

Practical lesson: Never delete <html>, <head> or <body> tags!

Most of the time you should ignore everything in the <head> area, with the exception of the contents of the <title> tag.  The <title> is the text that appears at the very top of a browser window when you're looking at the page. More important, it is also the name that's used when a visitor bookmarks your site (or puts it in their "favorites" folder), and it is also one of the most important things a search engine looks at to figure out what your site is about.  Current best practice is to have a title with two parts: a brief, clear and appropriate title for the page, followed by the name of your website.  As an example, look at the title of this page.

What can I edit safely?

Generally, you can safely edit any text in the <body> area that is not enclosed in < > brackets. To give a practical example, assume that you have a web page that looks like this when you go to edit it:

You can edit everything between the <title> tags ("My Page"), everything between the <h1> tags ("This is my web page!"), everything between the <p> tags ("This is not..." and "So there!"), and also the text that hangs out there by itself ("&copy; 2010 Tech-Tamer"). To see what this would look like in your browser, click here.

Other Stuff to Leave Alone

JavaScript:  In addition to information stored between < > brackets, HTML files often contain small programs, or scripts, that tell the browser how to make the web page more interactive. If you don't know what they do, it's usually best to leave them alone.

JavaScript is the most common type of script, and you find it embedded between "<script>" "</script>" tags. JavaScript commands are directed to browsers, which follow any JavaScript instructions that come up as the page is being opened and viewed.

Server Scripts: So far we've talked about plain HTML files, the ones whose names end in ".html" or ".htm". But if you've paid attention to web page addresses much, you've probably noticed that many web pages don't end with either of these, but with".php", ".asp" or ".aspx". These web pages are actually still HTML files, but with a twist. The different endings tell the web server that the file contains programs that need to be processed before the contents are given to the browser that made the request. When a server is asked for a page ending in ".php," for example, it knows to send the page to a program called PHP, which performs whatever commands are contained in the file and then passes the resulting HTML on to the browser.

For purposes of this tutorial, all you need to know is how to avoid messing up the programming. In both php and asp files, the programs are bracketed by special tags. In the case of php files, program commands are surrounded by "<?php" (sometimes abbreviated to "<?") and "?>" tags. In asp files, the commands are between "<%" and "%>" tags. Just leave these commands alone, and you should be fine.

Some Special Rules for Text

For the most part, you can type normal text into your web page, and get what you expect when it appears in a browser. There are, however, a few rules to keep in mind.

Line breaks and spacing

Hitting the "enter" key to insert a new line in your web page has no effect on the HTML that will be displayed in a browser. In fact, all carriage returns, tabs and any sequence of more than one space are ignored when the browser displays the contents of your page. To make the point more graphically, the following two excerpts produce exactly the same output in a browser:

For the tags to use instead, see below under Basic HTML Formatting.

Special Characters

Although normal punctuation can be typed as is, some special characters, like the angle brackets discussed above, have to be typed in as codes. For instance, the copyright symbol (©) is written as "&copy;". If you want more than one space to appear in a row, the second and following spaces need to be entered as "&nbsp;". The ampersand (&) is "&amp;". And if you want to use “nice curly quotes” like these, use "&ldquo;" and "&rdquo;". You can find a reference list of these and other special symbols and characters (including accented letters, spanish punctuation marks, and a whole host of other useful stuff) at www.w3schools.com.  As a practice tip, while it is true that any special character can be entered as a number, HTML is much easier to read if you use the nickname (assuming a nickname is available); for example, enter the ™ symbol as "&trade;" rather than "&#8482;".

Links

What would a web page be without a few links? To put the hyper into your text, you need to know how to insert a link. A link is just an HTML "<a>" tag, with instructions on what to link to. So a link to this web page would look like this:

For a witty, incisive introduction to editing your website, click <a href="http://www.tech-tamer.com/editHTML">here</a>.

If you want to link to a web page on your own site, you can (usually) omit everything in the "href" that comes before the actual name of the web page, like this: href="editHTML". You can also tell the browser that the linked page should be opened in a new window, by adding a target="_blank" instruction to the "a" tag, like this: <a href="editHTML" target="_blank">.  Opinions differ on whether this is a good idea: a user who is sent to a new window can't use the back button to return to your site; on the other hand, your site is still open in the browser.

Basic HTML Formatting

• To insert a new paragraph, put the text between <p> and </p>.
• To insert a simple line break within a paragraph (that is, without adding the extra space that usually comes after a paragraph) use <br /> (note that this is one of the few HTML tags that does NOT come as a pair).
• For bold, surround the text with <strong> and </strong>. (The older <b> tag still works, but is "deprecated," which means it may not work in the future.)
• For italics (emphasis), use <em>. (<i> also works, but is also deprecated.)
• Headings should be enclosed in "h" tags. Use <h1> and </h1> to surround main headings, <h2> for secondary headings, <h3>  for third-level headings, and so on (up to 6 levels). Browsers interpret "h" tags as a special kind of paragraph, and will automatically separate the heading text from other text, and increase the size of the font. The <h1> tag is particularly important; second only to the <title> discussed above, the <h1> tags are the most important text on a page to a search engine.  Every page should have one and only one <h1> tag, and the text of the heading should be clear, topical and concise.
• Bulleted lists (like this one) require two tag types: <ul> and </ul> around the whole list, and then <li> and </li> around each listed item of text.
• Numbered lists work the same way, but use <ol> instead of <ul> (<ul> stands for "unordered list" while <ol> stands for "ordered list.")  Conveniently enough, an <ol> list will number the list for you automatically. 
• Definition lists are similar.  The entire list is surrounded by <dl> and </dl>, but there are two (or more) internal tags for each item: text on the left (often a term to be defined), surrounded by a <dt></dt>, and text to be shown to the right (often the definition), surrounded by <dd></dd>.  A single <dt> can have several <dd>s.  As a random example:
  <dl>

  <dt>Giles' tasks</dt>

  <dd>Update website</dd>

  <dd>Take out trash</dd>

  <dt>Lisa's tasks</dt>

  <dd>Supervise</dd>

  </dl>

• For an indented paragraph (often used when quoting long passages), use <blockquote> </blockquote>.

Some Simple Paragraph Formatting

Aligning the text inside of paragraphs and headings can be done with a simple "align" command. Your choices are:

< p align="right"></p>

< p align="left"></p>

< p align="center"></p>

You can justify your paragraph so that its right edges line up on the page, by using <p align="justify">.  However, many browsers do not handle justification well, with the result that using justification is rarely a good idea.

Positioning Stuff on the Page

Old-style webpages use <table> tags to place and align text on the page.  Modern practice favors the use of <div>s.  However, using <div> tags is not intuitive, and requires some knowledge of CSS (see below under Advanced Formatting).  Tables, on the other hand, are familiar to anyone who has ever used a spreadsheet.  A table can therefore be a useful quick fix if you need to spread text across the page in columns.

Some quick tips:

• There are many, many options for table borders, but if you don't want any, add border="0" to the table tag.
• If you want an empty cell, use '<td>&nbsp;</td>' (i.e. a cell containing a single non-breaking space).  Some browsers do funny things with cells that have no content.
• Each row should have the same number of columns, usually one cell per column.  To make one cell span several columns (as in the first row of the table above), use <td colspan="x">, replacing x with the total number of cells to be combined.
• Text within a <td> can be aligned the same way that you can align text in a paragraph (see above).
• For more on tables, see the summary at www.w3schools.com.

Advanced Formatting

HTML and an adjunct language called CSS ("cascading style sheets") can be used to do all sorts of additional, nifty tricks, including changing the type, size and color of the fonts you use and positioning elements on the page.   All of this is, however, beyond the scope of this little tutorial.  There are lots of resources on the web; www.w3schools.com is a great place to start.