Russ Harvey Consulting - Computer and Internet Services

Cut ’N Paste HTML Editing

An HTML Primer

What is HTML? | Links | Images | Linking an Image
Paragraphs & Line Breaks | CSS | Viewing the Source

The HTML

The HTML that will send the browser to another page looks like the following:

<a href="http://www.russharvey.bc.ca/design.html#portfolio">My Design Portfolio</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 #portfolio directs the browser to a location within the listed page.
  • My Design Portfolio is the text that will appear on the page.
  • </a> closes the <a href= container tag.

How It Appears

This is how this HTML will appear in the browser:

My Design Portfolio

Discussion

Notice that only the link text is displayed on the page, and that it is coloured differently to represent a link (the link address is hidden to the viewer).

If you place your mouse over the text the cursor will change and the URL (link address) will generally appear at the bottom of your browser, if it is supported. This effect, known as DHTML for dynamic HTML, will also depend upon the way the web designer sets up the HTML on the page and if it is a recent version of HTML.

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

Creating HTML By Hand is Superior

Current web browsers and word processing programs also have the ability to create web documents, but often create very messy HTML (although the newest are better at creating cleaner sites).

Creating HTML by hand takes more time, but it also makes the page load faster and is easier to follow. If a program is used, often the layout is designed so that it is difficult to edit unless you're using a program (and a different program may critically damage the existing markup).

Return to top

Adding an Image

The ability to display images along side your text allows for a much more interesting (and informative) page.

The HTML

To add an image to your document, you use the <img> tag. It is not a container tag, but does contain a number of elements (required if you want to make the site load faster and provide hints to visitors).

To add an image enter the following HTML:

<img src="../graphics/rhcslogo.gif" width="40" height="38" alt="RHC">

  • <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 the image will appear in the browser:

RHC

Discussion

This is not a container tag so  / (notice the space before the slash) is the implied close required for XHTML (but optional in HTML 5).

This image is displayed without some of the deprecated attributes that were 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.
  • 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.

These deprecated features have been replaced by CSS (see the discussion in Adding CSS).

The use of the width and height settings is strongly recommended for traditional sites. In some cases these settings will affect responsive designs when viewing larger images on a narrow device and removing these dimension settings can allow an image to resize proportionally.

Return to top

The HTML

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

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

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

How It Appears

This is how this HTML will appear in the browser:

RHC

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 HTML looks:

<p class="small">Another
<br><a href="http://www.russharvey.bc.ca/design.html">
<img src="../graphics/rhcslogo.gif" width="40" height="38" alt="RHC" /></a>
<br>Web Creation&copy;</p>

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

  • <p class="smcenter"> is the opening tag for a paragraph. The class="smcenter" refers to a definition created in my CSS that creates a smaller font-size and centers the paragraph.
  • <br> creates a line break without adding a blank line in between.
  • &copy; creates the copyright symbol (©). There are a large number of these special symbols, 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).
  • </p> closes the paragraph tag.

How It Appears

This is how this HTML will appear in the browser:

Another
RHC
Web Creation©

Discussion

This image is now centered because it is contained within the paragraph which is defined as centered in the CSS.

Notice that I've again not included the space-slash to implicitly close this tag.

The text above and below the image is smaller than the body text. This is created by adding the “smcenter” class attribute to the text (class="smcenter"). The “smcenter” class is defined in the CSS for this page which redefines certain tags.

CSS Gives the Designer Control

I've made several references to CSS. Extensive explanations about CSS 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 it — one of the things that allow HTML 5 to work with all browsers).

One of the most important of these is the separation of content from layout. By using CSS to define the layout, the design becomes simpler, loads faster and can be more easily modified.

If you wish to learn more about CSS, have a look at the Sitepoint CSS Reference.

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 <p> at the beginning of a paragraph and </p> at the end. This creates a “container” effect with the HTML enclosing a paragraph. The </p> at the end of a paragraph is optional in earlier versions of HTML, essential in XHTML and recommended in HTML 5.

Sloppy HTML "Works"…Sort Of

Some designers choose to break with tradition and use only the <br> to make paragraph breaks or to use font size to set larger text rather than using <h1> to <h6> heading tags. While this is not technically correct, it works…sort of.

There is more to HTML design than what is visible to the casual reader. Google is “blind” and uses many of the HTML tags to determine what is relevant on the page (and your site's ranking). I'd suggest getting used to doing things the proper way to begin with.

Paragraphs & Line Breaks

The HTML used for line breaks is <br>. While the <p> tag creates a blank line after the text the <br> doesn't. This can be used to create a series of lines of text as in a postal address or a list (although using a list modified using CSS is much more effective).

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

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

and

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

How It Appears

The two sections of HTML 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 the markup.

The only difference between the two sets of instructions is that the first is two paragraphs, each marked up with a set of the <p> and </p> while the second is a single paragraph broken by the <br>.

The layout is quite different! The line break is more compact, closely connecting the link's descriptive text and the text display of the URL.

Return to top

Adding CSS

Cascading Style Sheets Save Resources

Bloated HTML Costs You

Some programs are better at rendering than others, but most such programs generate excess HTML (which increases the file sizes and download times for your pages) and many incorporate incorrect usage of HTML elements that require an understanding of HTML to correct.

For example, many use the deprecated font tag (deprecated, 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 some browsers.

I'd recommend that you learn to do at least the basics of HTML markup by hand. This will both help you to better understand how the HTML on your site functions and how you can improve upon it. It will also load faster, decreasing the chance that someone will hit the back button following a search and select another link (probably your competitor's).

An Example

Take a look at the relative number of characters required the two examples below:

<p><font="Arial, Helvetica, Helv, Geneva, sans-serif" color="#00ff00" font-size="12">Green san-serif text</p>

<p class="green">Green san-serif text</p>

The first example defines the various attributes (colour, size, font) for every new line of text. The second has an external definition of these attributes attached to the "green" class where everything is defined once in the CSS.

Can you imagine if this excess HTML is repeated 500 times (once for every line) on a website? To make matters worse, some HTML programs often just add HTML to make changes rather than to correct the original HTML. 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 place the CSS 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.

You can make one change to the CSS for our second example or take the time to make literally hundreds of changes to alter the look of a certain type of paragraph in our first example.

Current web design (if done correctly) depends less on the HTML for layout (or for how a particular element looks) and more on external style sheets.

Deprecated Risks Future Support

While current browsers still understand the old markup within the header of the page to describe 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 (probably black Times New Roman text on a white background).

This site now uses HTML 5 which has removed support for many of the features by earlier browsers, 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 HTML defining the layout is increasingly removed from the page, making the page content easier to edit.

The Difference CSS Makes — An Example

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

This demonstrates the power of CSS in both the layout of a page and in the aesthetics. The content on both pages 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 creating certain effects is to have a look at the source. Sometimes machine-created HTML is very confusing, but pages created by hand (like this one) tend to be easier to follow.

Have a look at the HTML for this page. Firefox/Mozilla and Internet Explorer users can click on View (Page) Source. Don't worry if it appears to be confusing at this time. It is easier to understand if you only look at one or two tags at a time — just as it is easier to examine one tree at a time when studying a forest.

Return to top

www.RussHarvey.bc.ca/resources/html.html
Updated: July 29, 2015

HTML is the language of websites.

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.

HTML is now maintained by the World Wide Web Consortium (W3C).

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

If you ignore the HTML (and particularly the stuff at the start of a page) in a simple web page (many larger sites are more complex) you'll see that it is normal text.

Right-click on the page, then select Source or Page Source to view the HTML behind this page 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.

The W3C has moved away from using HTML for layout 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 (inline).

HTML Standards

The document (webpage) you are viewing is created to HTML 5 standards based on the HTML 5 Specification (a work in progress). This is specified in the (currently) very simple DOC-Type at the top of the page.

Earlier versions of this page were built as HTML 4.01 Transitional which was upgraded to XHTML 1.1 Transitional. Both required more complex DOC-types.

HTML 5

The HTML 5 specification has not been finalized at the time of writing, but developers are using it today because HTML 5 is much simpler, yet more powerful, than previous version.

For example, the DOC-Type is simply <!DOCTYPE html> and there is improved support for video and other content that was only available using proprietary markups when HTML 4 was developed.

Basic HTML Structure

A Series Of Simple Tags

HTML uses a series of simple tags enclosed in < and > chevron brackets (sometimes called angle brackets) to separate the HTML 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 / (forward slash) added.

XHTML requires a space before the slash, but HTML 4 doesn't and it is optional in HTML 5.

XHTML Requires Implied Close

XHTML also requires that all tags are closed, so non-container tags like the <img> and <br> tags need to have an implied close: a space and a slash at the end of the tag (<img /> and <br />).

Of course, the <img> tag is much more complex since it needs to define at least a source, size and alternate text:

<img src="../graphics/rhcslogo.gif" width="40" height="38" alt="RHC" />

Return to top

Related Resources

Related resources on this site:

or check the resources index.

Return to top


If these pages helped you,
buy me a coffee!