Russ Harvey Consulting - Computer and Internet Services

Cut ’N Paste HTML Editing

An HTML Primer

Text Links | Images | Image Links | Paragraphs/Line Breaks | Adding CSS
What is HTML?

HTML is the language of websites.

Generating HTML By Hand

This page will teach you the basics of how HTML works using hand-generated examples. You'll be taken through a progression of learning how to create a basic link, adding an image, adding a link to the image, adding paragraphs & line breaks and finally adding CSS to enhance your page.

Each example is generated by hand rather than by HTML-generating software. While current word processing programs have the ability to create web documents, they often create very messy HTML.

Creating HTML by hand takes more time, but it also makes the page load faster and is easier to follow.

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 select another link from their search results (probably your competitor's).

Legacy HTML Programs Often Messy

Legacy HTML programs like Microsoft FrontPage and older versions of DreamWeaver often complicated the layout making them difficult to edit outside of that program (and a different program often critically damaged the existing markup).

Modern programs like recent versions of DreamWeaver are much more compliant and produce more orderly HTML content.

WordPress and other CMS-based sites can generate pretty decent sites, but are quite limited in their ability to exceed the original design and they load much slower.

Viewing 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. Most browsers allow you to right-click on the page then select View Page Source or some variation. If you need more exact instructions or aren't using a mouse, see How to view the HTML source code of a web page.

  • Firefox and Chrome users select View Page Source;
  • Opera users select Page Source; and
  • Internet Explorer users select View 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

The HTML

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

<a href="../design.html#portfolio">My Design Portfolio</a>

  • <a href=" creates the opening part of the tag.
  • ../design.html is the URL or link address.
  • #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 either as a tool-tip by the cursor or at the bottom of your browser.

Relative or Absolute

In the example above, I've used a relative link (a link that points to a page in a location relative to the current page on the same site).

For an external link you need to use an absolute link:

<a href="https://www.russharvey.bc.ca/design.html#portfolio">My Design Portfolio</a>

  • <a href=" creates the opening part of the tag.
  • https:// tells the browser to expect a secure 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.

It is often useful to point exactly to content within a page. This can allow you to refer to an exact location (an element ID indicated by # followed by the element ID) either on the current page (#image) or to within another page (web.html#primer). Try both, clicking on the back button to return here:

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

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 (recommended 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. ../ tells the browser to drop one directory level before looking for the graphics folder.
  • width="40" height="38" tells the browser the dimensions of the image in pixels. The browser call create a placeholder 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

The use of an implied close (the ending slash) and how it is displayed depends upon which version of HTML or XHTML you're using:

  • XHTML requires an implied close: <img src="../graphics/rhcslogo.gif" width="40" height="38" alt="RHC" />).
  • HTML 5 doesn't require an implied close (and, if used, a preceding space is optional): <img src="../graphics/rhcslogo.gif" width="40" height="38" alt="RHC"/>).

Though optional in HTML 5, I prefer to include the implied close for clarity.

Deprecated Attributes

I've displayed the image without any of the deprecated attributes that were allowable in HTML 4.01 Transitional:

  • border="0" was used to remove the border around linked images; and
  • vspace="0" and hspace="25" were used to indicate how much vertical and horizontal space, in pixels, there should surrounding this image.

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

Height and Width

The use of the height and width settings is strongly recommended for traditional sites. I use them for smaller images in HTML 5.

For responsive web designs removing these dimension settings for larger images allows the image to resize proportionally when displayed on a narrow device.

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="../services.html"><img src="../graphics/rhcslogo.gif" width="40" height="38" alt="RHC"/></a>

  • <a href="../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 is the same as we worked on previously.
  • </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 hover your mouse over the image you'll see the link destination. Clicking on the image above will take you to RHC Services (use the back button to return to this page).

Discussion

Again, this image is displayed without some of the deprecated attributes.

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

I used to include this linked image at the bottom of websites that I design with the link going back to my design page. The additional text indicates that I've designed the page.

Here is how the HTML looks:

<p class="smcenter">Another
<br><a href="../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> is the opening tag for a paragraph.
  • 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 (©).*
  • </p> closes the paragraph tag.

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

How It Appears

This is how this HTML will appear in the browser:

Another
RHC
Web Creation©

Discussion

Normally I'd use the full https://www.russharvey.bc.ca/design.html address in an external site pointing to my site, but have simplified the HTML by reducing it to a relative link.

The image is now centered because it is contained within the paragraph which is defined as centered in the CSS. The text above and below is also centered and smaller because of the class="smcenter" CSS attribute.

Notice that I've not included the space-slash to implicitly close the <img> tag.

CSS Gives the Designer Control

I've made several references to CSS (more about CSS is included in the Adding CSS section).

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 — something that allows 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 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 class="center"><a href="../other.html">RHC Design Portfolio</a></p>
<p class="center">https://www.RussHarvey.bc.ca/design.html</p>

and

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

How It Appears

The two sections of HTML display as follows:

RHC Design Portfolio

https://www.RussHarvey.bc.ca/other.html

and

RHC Design Portfolio
https://www.RussHarvey.bc.ca/other.html

Discussion

Examine the differences in the effect of a simple change in the markup. Which layout is more aesthetically appealing?

Both the link and the text are centered using CSS (more about that later) in both examples.

The only difference between the two sets of instructions is that the first is broken into two paragraphs 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.

Again, I've used a relative link to the page rather than the absolute link indicated in the line below the link to simplify matters. Were I to place this on another site external to this one it would have to be an absolute link with the full https://www.RussHarvey.bc.ca/design.html link.

Return to top

Adding CSS

Cascading Style Sheets Save Resources

Bloated HTML Costs You

Early versions of HTML used attributes within the HTML itself to style content. This styling was repeated for every line of HTML on the site.

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

Two Examples

Take a look at the number of characters required for displaying the example below:

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

Using this approach, you would need to redefine the various HTML attributes (colour, size, font) for every new line of text.

Instead, you can use CSS to define the green font and many other attributes which can be used multiple times without having to repeat the "green" class attributes:

.green
{
	font-family: Arial, Helvetica, Helv, Geneva, sans-serif;
	color: #0f0;
	background-color: #fff;
}

This results in much fewer characters in the HTML:

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

 

Can you imagine how much excess bloat this extra HTML generates when repeated hundreds or thousands of times (once for every line on a website)?

Discussion

Style sheets are wonderful tools that allow you to define each HTML object once for the entire site.

You can place the CSS at the top of each page, but I recommend that you link to a single external css 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 to alter the look of an HTML element throughout your site.

In the example above, the paragraph size would have been defined earlier in the CSS (cascading means that attributes are inherited). Shortcuts like the color attributes #0f0 and #fff weren't supported in older browsers.

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

HTML 5 & CSS

This site now uses HTML 5 which has removed support for many of the features used by earlier browsers, like <center>, tables for layout and border="0" within 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 lighter and easier to edit.

The Difference CSS Makes — An Example

The following two examples will give you an idea of what a difference this makes. Both 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 two-page example 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 when using CSS.

Return to top

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

Current web browsers include Firefox, Apple Safari, Microsoft Edge, Google Chrome and Opera.

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.

Viewing the Page Source

Of course, it is different if you wish to create or edit the content of a website. Then you need to view the HTML behind the site.

If you ignore the HTML (and particularly the stuff at the start of a page) in a simple web page you'll see mostly normal text surrounded by tags enclosed by chevron brackets:
<a href="#">link text</a>.

Check out the source HTML behind this page to see what I mean. (How do I do that?)

Many larger sites are far more complex and harder to interpret the source but the examples on this page are much simpler.

Today's Web Not Anticipated

The current use of HTML for fancy layouts and colour schemes was never intended by Berners-Lee. His goal was simple communication between scientists.

Early Attempts

Early websites used frames or tables in attempts to reproduce the precise layouts of print media. Generally these attempts failed, sometimes horribly. Early styling was embedded within websites, creating bloated sites that loaded slowly.

Today's websites are complex, multi-source database-driven sites containing visual media and out-sourced content (including ads) and are full of scripts and other invasive attempts to cull personal information.

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 W3C HTML 5.x Specification (a work in progress). This is specified in the very simple DOCTYPE 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 prior to the HTML 5 makeover. Both required more complex DOCTYPES.

HTML 5

HTML 5 is much simpler, yet more powerful, than previous versions.

For example, the DOCTYPE is simply <!DOCTYPE html> and there is improved support for video and other content that was only available using plugins 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.

This page will show you the basics of HTML. Start with Text Links and work your way through enhancements until you understand the basics of links, images, CSS and paragraph elements.

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!


www.RussHarvey.bc.ca/resources/html.html
Updated: November 13, 2018