Cut ’N Paste HTML Editing

An HTML Primer

What is HTML? - Creating a Link - Adding an Image
Adding a Link to an Image - Paragraph & Line Breaks
Adding CSS - Checking Out the Source

What is HTML?

HTML is a Markup Language

HTML is HyperText Markup Language, introduced by Tim Berners-Lee in 1990, as a method of quickly displaying information on the World Wide Web, invented only one year prior.

Markup Language, Not Code

While HTML is often referred to as code, it is not computer code. HTML is a markup language as the M in HTML indicates.

Essentially, HTML takes plain text and places instructions around it to have the text displayed a certain way in a Web browser (a piece of software used to display HTML-enhanced content). Just as you don't normally see the "code" behind a word processing document, your viewers shouldn't see the "code" behind your Web page.

Of course, it is different if you wish to create or edit the content of a Website. Then you need to view the markup behind the scenes.

If you ignore the HTML (and particularly the stuff at the start of a page) in a simple Web page you'll see that it is merely normal text. (Click on View, then Source or Page Source when the simple page is visible to see what I mean.)

HTML is in Transition

The current use of HTML for fancy layouts and colour schemes was never intended by Berners-Lee. HTML is now maintained by the World Wide Web Consortium (W3C) which is moving away from using HTML for layout purposes in favour of using cascading style sheets (CSS) for both the layout and special effects on Websites.

This makes pages easier to edit because there is less HTML visible on the page, particularly if the CSS is removed to an external file (like this page) rather than placed at the top of the page (like the simple Web page I mentioned a moment ago).

HTML Standards

The document (Web page) you are viewing is created to HTML 4.01 Strict standards based on the HTML 4.01 Specification (fourth generation). This is specified in the DOC-Type at the top of the page. Earlier versions of this page were built as HTML 4.01 Transitional which meant that they were able to include additional tags to make it read properly for earlier Web browsers (programs such as Netscape and Internet Explorer).

Basic HTML Structure

While you can use most recent word processors and any number of Web page creation software titles to create your own Web site, there comes a time when you may need to know enough about the underlying code to correct a problem with your page or incorporate some of the newer techniques you observe while surfing other sites.

A Series Of Simple Tags

HTML uses a series of simple tags enclosed in the < and > chevron brackets (sometimes called angle brackets) to separate the HTML code commands from text. Most tags have a beginning and an ending tag (referred to as container tags), where the ending tag is identical to the opening tag, except that is has a / added.

Creating a Link

The Code (Markup)

For example, the code that will send the browser to another page looks like the following:

<a href="http://www.russharvey.bc.ca/design.html#other">Other Design Considerations</a>

<a href=" creates the opening part of the tag.
http:// tells the browser to expect a Web location.
www.russharvey.bc.ca/design.html is the URL or link address. The #other directs the browser to a location within the listed page.
Other Design Considerations is the text that will appear on the page. This address is hidden to the viewer.
</a> closes the <a href= container tag.

How It Appears

This is how this tag will appear in the browser:

Other Design Considerations

Discussion

Notice that only the link text is displayed on the page, and that it is coloured differently to represent a link. If you place your mouse over the text the cursor will change and the URL (link address) will appear at the bottom of your browser, if it is supported by your browser. This effect, known as DHTML for dynamic HTML, will also depend upon the way the Web designer sets up the code on the page and if it is a recent version of HTML.

Congratulations! You now know the basics of creating an HTML tag!

Coding By Hand is Superior

Current Web browsers and word processing programs also have the ability to create Web documents, but often they can create very messy HTML code.

Coding by hand takes more time, but it also makes the page load faster and is easier to follow if someone without that particular HTML generator needs to alter the code (display different information).

Return to top

Adding an Image

One of the advantages of HTML and the Web browser over the Gopher sites that predated them (imagine a Web page with no images or fancy text or layouts) is the ability to display images inline with your text. Newer browsers and HTML standards allow for greater precision than the earliest attempts.

The Code

To add a graphic image to your document, you use the <img> tag, which is not a container tag, but contains a number of optional components.

To add an image enter the following code:

<img src=" tells the browser to expect an image.
../graphics/rhcslogo.gif gives the name of the image to be displayed and its location. Note the use of ../ to indicate that the image is located in a directory at the same directory level as the page calling for the image. This page is in a directory one level beyond the www root directory and so is the graphics directory.
width="40" height="38" tells the browser what the dimensions of the image are (in pixels) to speed up loading times for the page.
alt="RHC" indicates the text that should be used in place of the graphic if a browser is told not to display graphics, or if a text-only browser is viewing the page.
> is the close of the image tag information.

Notice that each of the image properties are followed by an equals sign, then the property defined within quotation marks.

How It Appears

This is how this code will appear in the browser:

Discussion

This image is displayed without some of the deprecated attributes that are allowable in HTML 4.01 Transitional but which might create problems in the future. These include:

border="0" used to be included to remove the border around linked images. This feature is replaced by commands in the style sheet (CSS).
vspace="0" and hspace="25" were used to indicate how much vertical and horizontal space should be between this image and any surrounding text or other objects, measured in pixels. Again, CSS is now used for layout.

Return to top

Adding a Link to an Image

The Code

To add a link to this image we just combine the code for a link with the linking text replaced by the image code:

<a href="http://www.russharvey.bc.ca/design.html#other"> is the linking code that tells the browser where to go when the viewer clicks on the image.
The code for the image goes in between.
</a> is the closing tag for the linking code.

How It Appears

This is how this code will appear in the browser:

If you click on the image above, the browser will go to this link.

Discussion

Again, this image is displayed without some of the deprecated attributes to avoid future problems when updating the page according to stricter standards.

Instead of using text to indicate where this link goes, the graphic is used instead.

I normally use this link at the bottom of Websites that I design with the link going back to my design page. Additional text is included to indicate that I've designed the page. Here is how the code looks:

Another
 <a href="http://www.russharvey.bc.ca/design.html">
<img src="../graphics/rhcslogo.gif" width="40" height="38" alt="RHC"></a>
 Web Creation©

We've added several elements. The first is the (or paragraph) tag and it's closing tag. There is also the line break. The difference in their effect is explained in the next section.

 is the opening tag for a paragraph. The class="small" refers to a definition created in my CSS that creates a smaller font-size and centers the paragraph.
  creates a line break without adding a blank line in between.
© creates the copyright symbol (©). There are a large number of these, and they were greatly expanded in HTML 4.01. Unfortunately, many of the newer ones have strange effects in older browsers, if they appear at all.
 closes the paragraph tag.

How It Appears

This is how this code will appear in the browser:

Another

Web Creation©

Discussion

This image is now centered because it is contained within the paragraph which is defined as centered in the CSS. Note the / used in the   to implicitly close this tag. This is something that is not necessary in HTML 4.01 transitional, but is as you move to HTML 4.01 Strict and XHTML 1.0 Transitional.

Notice how the text above and below the image is smaller than this text. This is created by adding the class="small" code which is related to the Cascading Style Sheet (CSS) used on this page that redefines certain tags.

CSS Gives the Designer Control

I've made reference to Cascading Style Sheets (CSS). Extensive explanations about their usage is beyond the scope of this introduction to HTML. Suffice it to say that CSS gives a great deal of control to the Web designer without seriously interfering with the display by older browsers (which ignore it since they don't understand what to do with the code involved.

Return to top

Paragraph and Line Breaks

The last part of a link I place is the text display of the URL after the identifying text. However, in order to separate it an place it on another line you must first understand how to use the paragraph and line break commands.

Doing It Right

The proper use of the paragraph break is to place a  at the beginning of a paragraph and  at the end. This creates a "container" effect with the code enclosing a paragraph. The  at the end of a paragraph is optional in earlier versions of HTML, but is essential as you move into more modern versions and into XHTML.

Sloppy Coding "Works"

Some designers choose to break with tradition and use only the  at the end of each paragraph, then use a blank line to separate the paragraphs in your code. While this is not technically correct, it works. If you are creating the newer dynamic HTML you will need to use both a beginning and ending tag for that code to work, so I'd suggest getting used to doing things the proper way to begin with.

Paragraphs & Line Breaks

The code used for line breaks is  . While the  tag creates a blank line after the text the   doesn't. This can be used to create a series of lines of text as in a postal address or a list (although HTML has better ways of handling lists, particularly in conjunction with CSS).

You can see the difference in the following two ways of adding the URL at the end of an image followed by a link:

<a href="http://www.RussHarvey.bc.ca/other.html">RHC Design Portfolio</a>
http://www.RussHarvey.bc.ca/design.html

and

<a href="http://www.RussHarvey.bc.ca/other.html">RHC Design Portfolio</a> 
http://www.RussHarvey.bc.ca/design.html

How It Appears

The two sections of code display as follows:

RHC Design Portfolio

http://www.RussHarvey.bc.ca/design.html

and

RHC Design Portfolio
http://www.RussHarvey.bc.ca/design.html

Discussion

Examine the differences in the effect of a simple change in code.

The only difference between the two sets of instructions is that the first is two paragraphs, each coded with a set of the  and paragraph tags and the second is a single paragraph broken by the   line break code. The view is quite different! The line break is more compact but the paragraph break sets the link's descriptive text and the text display of the URL (address).

Return to top

Adding CSS

Cascading Style Sheets Save Resources

Bloated Code Costs You

Some programs are better at rendering than others, but most such programs generate excess code (which increases the file sizes and download times for your pages) and make mistakes that require the understanding of HTML code to correct.

For example, many use the deprecated font tag (depricated, meaning that it won't necessarily be supported in future browsers) around every line to render the page in Arial or Verdana rather than the default Times New Roman font used by the browser.

I'd suggest that you learn to do at least the basics of HTML coding by hand. This will both help you to better understand how your page functions and how you can improve upon it. It will also load faster, decreasing the chance that someone will hit the stop button and select another link (your competitor's).

An Example

For a moment, ignore what the code below means and take a look at the relative sizes of Example 1 and Example 2:

<font="Arial, Helvetica, Helv, Geneva, sans-serif" color="#00ff00" font-size="12">Example 1

Example 2

Example 1 defines the various attributes (colour, size, font) for every new line of text. Example 2 has an external definition of these attributes attached to the "green" class where everything is defined once in a Cascading Style Sheet (CSS).

Can you imagine if this excess code is repeated 500 times (once for every line) on a Website? To make matters worse, some programs would often just add code to make changes to how a page looked rather than to correct the original code. I've seen pages where the attributes for a single line of text has been redefined a half-dozen times or more!

Discussion

Style sheets are wonderful tools that allow you to define each HTML object once. You can either place the code at the top of each document, but I recommend that you link to a single external css/text file for the entire site. This way you can change the look of an entire site by changing a few characteristics in a single file. Imagine, one change in Example 2 or literally hundreds of changes to alter the look of a certain type of paragraph in Example 1.

Future Web design is going to depend less on the HTML code for layout or for how a particular element looks and more on external style sheets.

While current browsers still understand the code within the header of the page (that describes the colours for the page background, text and links) these elements are now deprecated and may not be supported in future browsers. If this happens, your page will appear in whatever format the browser is designed with (usually black Times New Roman text on a white background).

For example, this site now uses HTML 4 Strict which has removed support for many of the added features that make this page display better in Netscape 4, like <center>, the use of tables for layout and the use of border="0" in the <img> tag to avoid a border in linked images. CSS is now used to create these effects. There is the added bonus that the layout code is increasingly removed from the page, making it easier to edit.

An Example of the Difference CSS Makes

The following two examples will give you an idea of what a difference this makes. The pages are identical except that the second page has no CSS applied (use your browser's back button to return to this page):

This gives you an example of the power of CSS in both the layout of a page and in the aesthetics of page colour. The "information" is unchanged, but the presentation is clearly superior with CSS.

Return to top

Checking Out the Source

One of the best ways to learn how Web designers are using code to create certain effects is to have a look at the source code that creates it. Sometimes machine-created code is very confusing, but pages (like this one) that are hand-coded tend to be easier to follow.

Have a look at the HTML code for this page. Firefox/Mozilla and Internet Explorer users can click on View (Page) Source. Don't worry if it appears to be a confusing bunch of code at this time. If you look at one or two tags at a time, it is easier to take in just as it is easier to study a forest by examining one tree at a time.

Return to top

More About HTML

The following related pages offer more information about HTML:

Return to top

www.RussHarvey.bc.ca/resources/html.html
Updated: February 12, 2008