Open Sky Web Design of Albuquerque NM logo

Basic Web Site Maintenance:
How to update your website without being an HTML expert

by Kitty Munson Cooper

  1. Overview
    1. The Internet
    2. CMS: Content Management Systems
    3. Web Site Hosting and Domain Registration
    4. Accessing an Existing Site
    5. HTML
  2. Tools for updating your site
    1. Composer - an easy way to make changes to a web page
    2. FTP and FTP_commander - moving files to and from your site
    3. XENU - checking all the links on your site
    4. Adobe Photoshop Elements - working with images
    5. ThumbsPlus - making photo album style pages
    6. HTML-kit, Arachnophilia - free text editors designed for HTML
    7. Microsoft WORD - converting existing documents
  3. Changing a web page
    1. Using a text editor
    2. Using a WYSIWYG editor - Seamonkey (or Mozilla or Netscape) Composer
    3. Using a Word Processor such as WORD
  4. HTML Details
    1. HTML basic commands: < title, head, body, hr>
    2. HTML text formatting: < br, p, pre, div >
    3. HTML Fonts and Style: < h?, b, i, em, tt >
    4. HTML Lists: < ol, ul, dl, li, dt, dd >
    5. Linking to other documents or sections: < a href=, a name= >
    6. Including Images: Photoshop, ThumbsPlus and < img src= >
    7. How to include angle brackets in the text
  5. More advanced HTML commands
    1. Specifying font, white space and other styles throughout your document - <style>
    2. Page layout - tables
  6. More information about HTML on the internet
  7. HTML Documents and WORD
    1. Converting a WORD Document to HTML
    2. Creating Hypertext Links


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.

  1. The Internet

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.

  1. CMS: Content Management Systems

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.

  1. Web Site Hosting and Domain Registration

There are two necessary parts to having a website before you even start on the pages.

  1. Accessing an Existing Site

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 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 you will see that the name servers are:

Name Servers:

which tells you that the company hosting the site is

An easy way to find out just what company is hosting a web site is to use this handy tool:

  1. HTML

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.

  1. Tools for updating your site

  1. Composer - an easy way to make changes to a web page

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."

  1. FTP and FTP_commander - moving files to and from your site

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.

  1. XENU - checking all the links on your site

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

  1. Adobe Photoshop and Photoshop Elements

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.

  1. ThumbsPlus

If you need to make photo album type pages of your images, my favorite tool is ThumbsPlus from 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.

  1. HTML-kit, Arachnophilia - free text editors designed for HTML

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.

  1. Microsoft WORD - converting existing documents

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.

  1. Changing a web page

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.

  1. Using a Text Editor

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.

  1. Using a WYSIWYG Editor - SeaMonkey Composer

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 "" 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 "" would send it to that email address.

  1. Using a Word Processor

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.

  1. HTML details

  1. HTML basic commands: < title, head, body, hr >

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>.

When using multiple container commands, they must be correctly nested. For example,

<command1> <command2> </command2> </command1>

is the correct format, while

<command1> <command2> </command1> </command2>

will confuse many Browsers, and thus produce unpredictable results.

Note that HTML commands are not case sensitive.

<title> command

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.

<html> and <head> commands

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.

<body> command

Then the main part of the document is started with a <body> command and terminated with a </body>.

<hr> - horizontal rule command

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.

  1. HTML text formatting: < br, p, pre >

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:

Paragraph. Inserts a blank line on most browsers but doesn't normally indent(see style section for how to add the indent as used in this document). Not a container thus no terminator is required, but a terminator is customarily used anyway. Also it can be used to indicate whether that block of text should be centered, aligned right or left, or even justified (not all browsers support justification). For example, <p align="center">. When using an alignment specification, an ending </p> is needed.
Break. Forces a line break. Not a container thus no terminator is required.
Preformatted. Allows text to appear "as is." A container, thus a terminating </pre> is required. The font will always be terminal type. Note that bold and italic commands can be used within a pre.
Definition List. This can be used to force the contained section of text to indent, as well as for lists which are described later. A container command, thus it needs terminating.

  1. HTML Fonts and Style: < font, h?, b, i, em, strong, tt >

The font command allows selection of specific type faces, sizes and colors for the contained text.

<font face="verdana">
The face keyword can be used to select a specific font face. The sans serif faces, Verdana and Arial, seem to be best for web use, according to various studies.
<font color="white">
Any color can be selected, click here for the common color names, or the color wheel, or the web safe color table (less important than it used to be).
<font size=-1>
The size can be from the largest (5) to the smallest (1) or specified relative to the current font size via + or -.
Also there are 6 header levels to choose from, which start quite large at level 1 and decrease down to level 6. These can also be used to control the relative size and boldness of the font in use. The format is <h1> through <h6>, referred to as <h?>. Bold and Italic are supported, as is switching to terminal type (fixed width) font. These commands are summarized below:

Header level ?. Usually bold with size varying, lower number is bigger. Container.
Bold. All text will be bold until the terminating </b>
Italic. All text will be italic until the terminating </i>
Emphasis. Most Browsers display this as Italic. A container.
Strong Emphasis. Most Browsers display this as Bold. A container.
Terminal type. Switch to terminal type face, where the letters all are the same width. A container.

  1. HTML Lists: < ol, ul, dl, li, dt, dd >

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.

Ordered List. Every item on the list gets a number starting at one. The key word type= can be used to get Roman numerals or letters instead of numbers. For example <ol type=A>. Items are indicated with a <li> command.
Unordered List. Every item on the list gets a bullet. Items are indicated with a <li> command.
Definition List. This is a list of the type term followed by a definition. Items are indicated as follows:
Define Term. The item which will be further described.
Definition Description. The further description.
Note that the lists above are <dl>lists where the HTML command is the term <dt>and the description underneath is the definition <dd >. The table of contents for this document is an ordered list with unordered sublists beneath chapters 3 and 5.

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.

This example of indentation was created with 2 <dl>'s

  1. Linking to other documents or sections: <a href=, <a name=

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.

The URL for a local document, like this one, would be:
or when accessed from a page not on my website:
The HTML syntax for linking to an external document from a web page is:

<A HREF="http://websitename/optionaldirectory/filename"> Heading for external link</A>

notice the the URL is within quotes following the <A HREF=

Here is how to link to a section within that document:

<A HREF="http://websitename/filename#section_name" > Heading for this link </A>

The syntax for linking to an internal hotpoint is:

<A HREF="#label"> Heading for Hotlink </A>

Then the point to be linked to is indicated by the following command:

<A NAME="label"> Usually the same heading </A>

Including Images: PhotoShop Elements < img src= >

Linking in images is easy if you have an image file in the .jpg or .gif format. If it needs to be changed into the right format or just saved efficiently for faster load time, then start your PhotoShop Elements. Open the image and use the "save for web" option on the file menu. A window will appear with the save options in the upper right corner. If the image is a graphic or a simple photo with few colors try saving it as a GIF with 4, 8, or 16 colors (less colors make a smaller image). The image on the right shows you a section of your new picture. If there is loss of color, try more colors or a JPEG.

Just indicate the file with the IMG command, not a container, as follows:
<IMG SRC="filename" >

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:

<IMG SRC="filename" alt="text string">

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

<IMG SRC="filename" ALIGN=left HSPACE=10 VSPACE=10>

How to include angle brackets, ampersands, and other special characters in the text

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:

<, used to display opening angle bracket
> , used to display closing angle bracket
& , used to display ampersand
used to display the ASCII character indicated by the number number
This link has a list of all the special character codes:


  • More advanced HTML commands
  • Specifying font, white space and other styles throughout your document - <style>

    The <style> command is used to start a section which is a list of how the elements in your document appear. It can only be used in the header section of the document. You can specify the font, text color, how the anchors to other URLs look, how your lists and paragraphs appear, among many other items. Have a look at the source for this document to see all the specified styles. One important example is the way paragraphs are defined for this document which gives them an indent and less white space between paragraphs. This specification looks like this:
    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.

    Page layout - tables

    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:

    start a table
    start a table row
    start a cell within that row
    All these commands must be terminated by ending command, e.g. </table>

    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.

  • More information about HTML on the internet
  • 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

    HTML Converters and Filters

    Webmonkey: many great how to articles for beginning web masters

  • HTML Documents and WORD
  • Converting a WORD Document to HTML

    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.

    Paragraph Marks can be a Problem

    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.

      Creating Hypertext Links in WORD

      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:

      1. Select the text, item, or location you want to mark.
      2. From the Edit menu, choose Bookmark.
      3. In the bookmark name box, type a name for the bookmark.
      4. Choose the add button.

      To make a cross-reference to the bookmark:

      1. Select the text that you will want to click on to jump to the bookmark.
      2. From the Insert menu select hyperlink.
      3. From the Bookmark menu, choose the bookmark that you will want to jump to.
      4. Then select ok. This will link the text 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