A webpage is a hybrid of wordprocessor technology and computer language. Using some web-editors, the actual content of the page can be typed just as though it were a wordprocessor document. However, unlike the printed page, a webpage allows the opportunity of linking to other web resources, inserting photographs, video, and audio, and creating a more interactive reading experience. On this page we will show you the basic elements of a webpage, and how to create them.
  

A webpage is written using a computer language called Hyper-Text Markup Language, or HTML. "Hyper-Text" refers to the ability to link to other resources. Based on early computer data storage systems, hyper-text provides the possibility of moving between portions of the written text at ease. The simplest example is a book's table of contents with links to each chapter heading. A similar use would be an index or concordance linking back to the original word in the book. The more complex examples of hyper-text would allow the reader to jump from a passage to the concordance and back to other places in the book where similar words ar used or concepts are discussed. Hyper-text is the most powerful aspect of webpages, and is the reason that the internet is the comprehensive data resource that we so highly value. However, the aspect of HTML that we are going to focus on here is "markup."

"Markup" is the way in which a typed text is turned into a webpage. Essentially, it is the way in which the webeditor inserts codes to designate bolded text, italics, font sizes and styles, etc... On the rest of this page you will learn the basics of HTML markup.

What to call your files: HTML file naming conventions

When the computer reads a file from the hard-disk or the internet, it needs to know basic information about the digital code that it receives and how to interpret it. Most of this information is communicated by the other computer from which the file comes (the remote "server") and by the file name itself. Standard webpages are written in HTML code, and so have a file name ending in .HTM or .HTML. This is called a file "extension." The difference between the two "extensions" is not relevant to your webpage editing concerns, however the shorter three character extension derives from the MS-DOS requirement for a three or less character extension. The proper HTML designation is the longer .HTML however all web browsers recognise the shorter as a synonym. Use whichever you feel comfortable with.

Possible extensions for web resources include: HTM or HTML (for HTML pages); PDF (for Adobe PDF files); JS (for JavaScript files); and GIF, JPG or JPEG (for graphics files). All other file formats and extensions are restricted on this website. Speak to the webeditor if you want to use another format.

MS-DOS also had another restriction: a maximum of eight characters in the file name. Thus, filenames were shortened and abbreviated to accomodate the MS-DOS standard. However, MS-DOS limitations have not been applied to internet protocols. The internet generally uses the UNIX file naming conventions. This means that all files must have a name and extension separated by a period. The actual filename can be much longer, but should be kept short for simplicity. Valid characters include all 26 English characters, numbers 0 to 9, hyphens (-), and underscores (_). All other characters are invalid, including spaces, commas, colons, semi-colons, slashes (/), backslashes (\), hashes (#), brackets, parentheses, apostrophes, quotes, exclamation marks, question marks, asterixes, and ampersands. The period is reserved for separating filenames from their extensions. These valid characters are the same for all internet addresses, whether webpages or email. Periods and "@" are used for domain names and email addresses.

Note: all web addresses, email addresses, and filenames are NOT case-sensitive. We recommend using lowercase for addresses and filenames.

The complete internet address of a webpage consists of a string in the format: http://server.domain.top_domain/filename.extension. For example, one valid address for this webpage is http://www.ecumenism.net/tech/html_code.htm. This is called the URL or Universal Resource Location. You do not have to worry about the complete URL, since it is beyond your control. You can only select your filenames.

Having said that you can select your own filenames, it should be immediately mentioned that you MUST call your first page index.htm or index.html. If neither of these files are found in your webspace, users will not normally find your page. An address such as www.ecumenism.net is interpreted by the web-browser as www.ecumenism.net/index.htm. If that file is not found, the file index.html is attempted. If that is not found, the "404 error: file not found" page will be displayed. All other filenames are up to you. There are no reserved filenames, provided you use the HTM or HTML extension.

Please be careful to avoid the use of spaces in file names. Spaces are allowed in Windows long filenames but not in UNIX. Many browsers and internet "file servers" will not accept spaces.

Basic HTML outline

If you have the luxury of using a "What you see is what you get" (WYSIWYG) editor for your website you will probably not need most of the remaining instructions. However, it is helpful to look at the code to correct or clarify your intentions. If you look at the code you will see a basic outline such as the following:

<html>
<head>
...
</head>

<body>
...
</body>
</html>

The code is created with a series of "tags" identified with < and > characters. <html> is used to instruct the web broiwser to interpret the file content as HTML code. <head> and </head> enclose the head of the file and <body> and </body> enclose the visible content of the webpage. Detailed instructions for developing the header tags can be found on our page "Headers in HTML files." You should ensure that you examine those instructions before publishing any file on the internet. The instructions below will assist you in developing the body of the webpage, enclosed by the <body> and </body> tags.

All HTML markup using the same tag format. Each tag has a pair. For example, to designate a new paragraph place <p> in the text at the start of the paragraph. At the end of the paragraph insert a </p> tag. Other tags have similar open and closing tags. Closing tags are required for more recent web browsers, and should always be used to ensure that all visitors can view the webpage.

NOTE: There are a limited number of tags that do not include a closing tag. These include <br> for a line-break and <hr> for a horizontal rule. To ensure future compatibility with XML (a new web encoding language) these tags should be written as <br /> and <hr /> thus closing the tag.

HTML tags used in the body of the webpage are either "block elements" or "inline elements." Block elements are those that are laid-out on the screen or page in relation to the margins. Text will flow around some block elements, such as images. Other block elements involve a line feed, such as paragraphs or horizontal rules. Inline elements are those that only affect the individual characters to which they are applied. Examples are bolding and italics. The browser already knows how to interpret the tags, but it is possible to modify the default settings using stylesheets.

Proper nesting of tags is essential. Improper nesting may lead to confusion for some browsers. The general rule is to close tags in the opposite order from which they were opened. Open block elements first and then inline elements, and close them in the reverse order. For example: 

<p><strong><em> ... </em></strong></p>

instead of 

<p><strong><em> ... </p></strong></em>

Paragraphs and other "block elements"

Block elements are rendered by the browser between the four margins according to the width, height and other details of the element. Block elements are placed at the point in the HTML code where they are to appear on the webpage. Subsequent block and inline elements will appear to the right, left or bottom, space permitting. All block elements use a rectangular space on the page. It is impossible in HTML to have a block element edge that is curved.

Blockquotes
Use <blockquote>. Blockquotes allow text that is uniformly indented. It uses the default paragraph specification and adds a left and right indent. Some browsers also justify the text, or allow specification of alignment as in the paragraph tag.
Horizontal rules
Use <hr /> to insert a horizontal line. Horizontal rules always imply a line feed and carriage return. Additional qualifiers can be added to <hr /> tags. The basics are: 
align="left" (or right or center)
height="1px" (measured in pixel sizes)
width="100%" (measured in percentage of block within which it is nested, or in pixels)
noshade (indicates a solid line)
color="black" (use any web color name, rgb numbers, or hex code. Not supported in Netscape.)

For example, a solid pale blue line 2 pixels high, 250 pixels wide, centred on the screen can be inserted using this code: 

<hr noshade color="#b1b1d8" height="2px" width="250px" align="center" />
Hyperlinks
Use <a > ... </>. A hyperlink is used to link to an internet resource. This is the "hyper-text" part of HTML. A fully qualified URL is required, although it may use absolute or relative paths. The entire text or image enclosed by the tags will be linked to the URL. Hyperlinks may also connect to bookmarks. Some examples are given here: 
<a href="http://www.ecumenism.net/">Ecumenism in Canada / Oecuménisme au Canada</a>
<a href="headers.htm#dublin">Dublin Core Metadata</a>
<a href="#outline">Basic HTML outline</a>

Text links are coloured and underlined by the user's browser preferences unless this is modified by the page's stylesheet. Images are normally given a border to indicate the presence of a link. On our website, text links do not use standard colours and are not underlined except when the user's mouse hovers over the link. As well, our images have no border.

Images
To place an image on the page, use the tag <img src=" ... " />. Note that the <img> tag does not have a closing tag, and so must have an " /" to ensure compatibility with XML. Additional qualifiers can be added to <img> tags. The basics are: 
src=" ... " (location of the image using a properly formatted URL with either a relative or absolute path.)
align="left" (or right, center, top, middle, bottom, abstop, absmiddle, absbootm, baseline)
height="100" (measured in pixels)
width="100" (measured in pixels)
border="0" (measured in pixels)
alt="This is our logo" (or other alternate text to be displayed for users with images turned off)

Multiple qualifiers can be used. Separate them by a blank space. Dimensions will be changed proportionally if only one dimension is provided. Here is an example used to display the WCC logo: 

<img src="graphics/logos/wcc_sm.gif" align="right" alt="World Council of Churches" height="75">

In this example, the image will be shown at the right margin, and all subsequent text on the webpage will scroll around the image. Notice that a relative path was used in the URL. Please use relative paths whenever possible. It is strongly discouraged to call images from another website. Copy the image wherever possible.

Line breaks
Use <br /> to indicate a line feed and carriage return. The next line will begin at the left margin. A qualifier can be added to indicate a linebreak to the line after the end of another block element. For example: 
<br clear="left" />

will line feed until the left margin is clear. Other options are "all" or "right". Notice that <br /> has no closing tag.

Lists
Numbered lists are created using <ol> ... </ol>. Bulleted (i.e. unordered) lists are created using <ul> ... </ul>. Each item of the list is also enclosed in "list item" <li> ... </li> tags. For example, consider this numbered list: 
<ol>
<li type="1">First item</li>
<li type="1">Second item
   <ol>
   <li type="a">First sub-item</li>
   <li type="a">Second sub-item</li>
   </ol></li>
<li type="1">Third item</li>
</ol>

Take notice that the sub-menu is completely nested inside the <li> ... </li> tags of the second item. This example looks like this:

  1. First item
  2. Second item
    1. First sub-item
    2. Second sub-item
  3. Third item

"Type" is used to specify the format of the numbering or bullets. Numbered lists can use Arabic or Roman numbers and uppercase or lowercase letters. A variety of bullets can be specified for "unordered" lists.

Paragraphs
Use <p> ... </p> to enclose a new paragraph. The default setting will provide a carriage return to the left margin and then leave a blank line before beginning the next paragraph. Indents, alignment, and other paragraph formatting can be set using stylesheets or on each individual paragraph tag. To specify the alignment, use: 
align="left"  (or right, center, justify)
Tables
Tables are the most complex block element available in HTML. Tables are created using a series of nested tags, specifying table, row, and cell details. To create a basic two row, two column table with a 1 pixel border use the following: 
<table border="1px"><tr>
  <td> Cell one </td>
  <td> Cell Two </td>
</tr>
<tr>
  <td> Cell Three </td>
  <td> Cell Four </td>
</tr>
</table>

The table will look like this:

Cell one Cell Two
Cell Three Cell Four

The dimensions of each cell will automatically be set by the browser based on the specified width of the table and the height of the content of the cells. Cells in the same column will have the same width, and cells in the same row will have the same height. Leading and trailing spaces will be truncated in each cell. Some additional specifications of the <table> tag are: width, height, border, align, valign, cellspacing, and cellpadding. <td> tags can take specifications of width, height, border, align, nowrap, and various color and background specifications.

Bold, italics, and other "inline elements"

Bold
Use <strong> ... </strong> or <b> ... </b> to indicate bold text. <strong> is used with newer browsers. <b> is used in older browsers but is no longer recommended.
Superscript and subscript
Use <sup> ... </sup> for superscripted text, and <sub> ... </sub> for subscripted text. The height above or below the line, and the font size is specified by the browser or stylesheet. These tags are not recommended, because very few browsers or printers can render them nicely. These tags extend the line height causing an unusual blank space above or below the line.
Italics
Use <em> ... </em> or <i> ... </i> to enclose italicised text. <em> is used with newer browsers. <i> is used in older browsers but is no longer recommended.
Span
<span> is a very helpful tag. It allows the assignment of styles to particular characters or strings. The various specifications are found in the Cascading Style Sheet (CSS) manual. Span also allows the attribution of a "class" or "id" to a character or string of characters. This is particularly helpful on this website to specify language variables for various text.
Underline
Use <u> ... </u> to mark text for underlining. The actual format of the underlining is specified in the stylesheet and is browser specific.

Forms and input fields

Forms are used for user input. Text boxes, selection lists, radio buttons, and check boxes provide a number of methods for users to interact with the web page. Before we look at the various form elements, we should first consider the function of a form. Each form connects the web page to an external process, such as a CGI or ASP script. The script receives input from the form and executes it accordingly. Forms are particularly helpful for collecting specific information and emailing it to a specified address. Another purpose is for developing dynamic content. The user selection can be used to place cookies, select content from a database, or enter new information in a database. Forms are very powerful when connected to powerful external computer programs.

Every form is built inside the <form> ... </form> tags. These tags have certain essential specifications: a method and an action. It is recommended that you also assign a name to the form. You'll find out why later. Only two possible methods exist: GET or POST. Strangely, in most cases these are interchangeable. The method is dependent on the web server that hosts the "action". The action requires a properly formatted URL with either a relative or an absolute path. The content of the form fields is sent to the URL specified and executed as a "server-side" process. Response to the user is handled by the external process. An example of a form is shown below: 

<form name="formmail" method="POST" action="../txt/formmail.asp">
   <input type="text" name="email" id="email" size="20" />
   <input type="submit" value="Submit" name="submit" id="submit" />
   <input type="reset" value="Reset" name="reset" id="reset" />
</form>

Please notice that in addition to naming the form, we have also ID'd each input field. This is not absolutely required. The complete ID of the email field is document.form.formmail.email. This allows us to manipulate the values of each field using various scripts. The above example produces a form that looks like this:

Notice also that the <input ... /> tag does not have a closing tag. In order to ensure compatibility with XML, you should add the extra / as shown here. This form will only work if there is actually a file called formmail.asp in the txt directory. There isn't, so don't bother trying this one.

Input fields
The <input ... /> tag shown above uses type="text". You can also specify hidden, checkbox, radio, button, submit, and reset. Each field must be named, and might also require a value="..." variable. Radio fields can be duplicated as follows:


Name each <input> field using the same "name" to create a toggle on/off radio option as above.

Field labels
You can also assign an ID to any form field and enclose the neighbouring text in <label for="..."> ... </label> tags. When the user clicks on the text (try above), the field is toggled; on/off, true/false, checked/unchecked. Be careful, each field ID must be unique. You may place the <label> tags around various text and images. Remember, these field ID's can also be manipulated using scripts.
Selection lists
A <select> field provides the user a specified list from which to select their choice. This can be used for listing limited options. Many websites use the <select> field for listing states, provinces or countries. Selection lists ensure that the users provide input in a standard format. An example of a <select> field is: 
<select name="church">
  <option selected>Church of the Redeemer</option>
  <option>Church of the Rock</option>
</select>

To specify each item in the selection list, use the <option> tags. Items will appear in the order in which they are entered. One item can be pre-selected if this feature is helpful, but is not necessary. The <option> tag can also use a value="..." variable. If no value variable is specified, the form will send the text between the <option> tags to the external process. If a different value is desired, specify values as necessary. For example: 

<option value="QC">Québec</option>
<option value="SK">Saskatchewan</option>
Text area
A <textarea> tag is similar to an <input type="text" /> field, except that it allows multiple rows. Height is specified using rows="..." Width is specified using cols="..." <textarea> also has a closing tag. The text enclosed between the tags will be the default value of the field.