• Home »
• Self-Help Resources »
• Website Design »
• Cut 'N Paste HTML Editing

Cut ’N Paste HTML Editing

An HTML primer

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

All trademarks, company names or logos are the property of their respective owners.

Generating HTML By Hand

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.

Each example is generated by hand (not 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 functions on your site and how you can improve upon it.

It will also load faster, decreasing the chance that someone will to their search results (probably visiting your competitor's site next).

Legacy HTML Programs Often Messy

Early HTML programs produced complicated HTML layout. Editing the resulting HTML with a different program often critically damaged the existing markup.

Modern programs 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. Pages created by hand tend to be easier to follow.

Machine-generated HTML can be very confusing.

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, Edge and Chrome users select View Page Source.
• Safari users select Show Page Source.

Don't worry if it appears to be confusing at this time. Just as it is easier to examine one tree at a time when studying a forest, it is easier if you only look at one or two HTML tags at a time.

Return to top

Creating a Link

The HTML

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

<a href="self.html">Web Design Basics</a>

• <a href=" creates the opening part of the tag.
• self.html is the URL (link address).
• Web Design Basics is the descriptive linked 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:

Web Design Basics

Discussion

This is only a snippet of HTML for demonstration purposes. Normally there is additional HTML, text and punctuation.

The Linked Text

Notice that only the linked text is displayed on the page, and that it is coloured differently than regular text.

However, the linked text has nothing to do with where the link takes you.

You can't trust link text to tell you where the link goes (the same is true in an email).

The Link Address

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 appear either as a tool-tip next to the cursor or at the bottom of your browser window.

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://russharvey.bc.ca/resources/self.html">Web Design Basics</a>

• <a href=" creates the opening part of the tag.
• https:// tells the browser to expect a secure web location.
• russharvey.bc.ca is the domain.
• / is how directories are broken down on the web.
• resources is a directory on that domain.
• self.html is the page within that directory.
• Web Design Basics is the linked text that will appear on the page.
• </a> closes the <a href= container tag.

Most Canadian domains only use .ca but I've held this domain since a time when only nationally-registered companies and organizations were eligible to register a .ca domain (hence the .bc provincial indicator).

Internal Links

It is often useful to point to a section within the page rather than just linking to the page and hoping the site visitor can find the information within that page.

This is accomplished by inserting an element ID such as id="image" to a section heading:

<h2 id="image">Adding an Image</h2>

or a paragraph:

<p id="results">Note the results…</p>

Once you've created the element ID, you can link to that section of the page directly by using # followed by the element ID.

<p>See <a href="#image>Adding an Image</a> for details.</p>

Linking to a different page simply requires adding the page's address.

<p>Learn <a href="web.html#primer>HTML terminology</a>.</p>

Try both, using the browser's back button to return to this page:

• #image is an internal link on this page.
• web.html#primer is an internal link on web.html.

These are both relative links to the sections from within this site. When used externally to this site, they would include the full address:

• https://russharvey.bc.ca/resources/html.html#image
• https://russharvey.bc.ca/resources/web.html#primer

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:

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" />).
• HTML5 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 HTML5, 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 HTML5.

For responsive web designs specifying height and width can be a problem for larger images. Using special CSS and removing the fixed image height and width allows the image to resize proportionally when displayed on a narrow device.

Return to top

Adding a Link to an Image

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

• <a href="../design.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:

If you hover your mouse over the image you'll see the link destination — to my Web Design & Maintenance page

Click on the image to visit the page then use the back button to return to this page.

Discussion

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

Changing Directories

Notice the ../ before design.html. The current page is located within the resources directory and the linked page is one directory down at the root domain level.

The full addresses of the current and destination pages should show you why that is necessary:

• https://russharvey.bc.ca/resources/html.html
• https://russharvey.bc.ca/design.html

Adding HTML Text to the Image

Unfortunately, linking only the image doesn't provide much explanation of where the link takes you.

To provide a better explanation, we'll add some more HTML:

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

Several New Elements

We've added several elements. The first is the <p> 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.
• Another is the text appearing on top of the image.
• <br> creates a line break without adding a blank line in between.
• Web Creation © is the text appearing below the image.
• </p> closes the paragraph tag.

How It Appears

This is how this HTML will appear in the browser:

Another

Web Creation©

Discussion

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

Normally I'd use the full https://russharvey.bc.ca/design.html address when linking from an external site. I have simplified the HTML by reducing it to a relative link for this example.

Text and Image Centred

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. This is optional in HTML5.

Symbols

Notice the © symbol (©). There are a large number of these special symbols. Unfortunately, many of the newer ones have strange effects in older browsers (if they appear at all).

CSS Gives the Designer Control

I've made several references to CSS (see also 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 HTML5 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.

Learning More About CSS

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

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 therefore your site's ranking). I'd suggest doing things the proper way.

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.

Lines Separated by <p>

The following lines are separate paragraphs:

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

RHC Design Portfolio

https://RussHarvey.bc.ca/portfolio.html

Lines Separated by<br>

The following lines are within a single paragraph but broken by a line break:

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

RHC Design Portfolio
https://RussHarvey.bc.ca/portfolio.html

Discussion

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

I have used these sorts of layouts with a call to action:

Call to book
an appointment!

Centered Using CSS

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

Line Breaks for Postal Addresses

The break element can be used to create a series of lines of text that normally are not separated with spaces between each line such as a postal address:

<p>123 Main Street<br>
Anytown, BC</a>
A1B 2C3</p>

Return to top

Adding CSS

Cascading Style Sheets Save Resources

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.

The deprecated (unsupported in the future) font tag used to be commonly used to declare the style elements of the text in a paragraph. This is now accomplished using CSS.

Displaying Green Serif Text

Suppose you want to display your text in a green serif font. Let's look at how much extra HTML is required for every line to make that simple change without CSS.

Without CSS:

When using only HTML (no CSS) the HTML is quite extensive (109 HTML characters)

<p><font="Georgia,Times,"Times New Roman",serif;" color="#060"; background-color="#fff"; font-size="12";>This is green serif text.</p>

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

With CSS:

If you use CSS to define the green font:

.green
{
font-family: Georgia,Times,"Times New Roman",serif;
color: #060;
background-color: #fff;
}

the HTML is reduced to only 21 HTML characters:

<p class="green">This is green serif text.</p>

Bloated HTML Costs You

Think about how much excess HML bloat would be added to this page if every line had to carry the extra HTML. What about for this whole site?

Discussion

The extra CSS does add 104 characters to your external CSS file, but it is required only once.

I use the following CSS to display the HTML examples on this page in a green monospace font:

{
font-family: Lucida Console,Andale Mono,Courier New,monospace;
font-size: 1em;
color: #060;
background-color: #fff;
}

In the example above, the paragraph size would have been defined earlier in the CSS (cascading means that attributes are inherited).

If you were doing this on a single line, you'd probably be better off figuring out whether that single line needs to be displayed differently are use an alternative method of setting the text apart (e.g., bold or italics).

Shortcuts May Work Only in Modern Browsers

I've used the color attribute shortcuts #0f0 and #fff which are probably not supported in older browsers (those required the full #00ff00 and #ffffff).

Most designers no longer support older browsers because HTML5 provides for a legacy solution which will display content, but often not as nicely (i.e., the content degrades gracefully).

Easy Site-wide Changes

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

You can place inline CSS at the top of a page for CSS elements not required elsewhere on the site.

You can make one change to the CSS to alter the look of an HTML element throughout your site.

Site Layout Depends Mostly on CSS

Current web design (if done correctly) depends very little on the HTML for layout (or for how a particular element looks).

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. This site uses a different style sheet for my personal pages because it has a different look and feel.

HTML5 & CSS

This site now uses HTML5 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) with the exception that the second page has NO CSS applied (use your browser's back button to return to this page):

• Alice's Adventures in Wonderland — with CSS
• Alice's Adventures in Wonderland — without CSS

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.

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. These attempts failed, sometimes horribly.

Early styling was embedded within websites, creating bloated sites that loaded slowly.

Modern Sites Complex

Today's websites are complex, multi-source database-driven sites containing visual media and out-sourced content (including ads).

They are full of cookies, scripts, analytics and other invasive attempts to cull personal information.

CSS For Layout

The W3C no longer supports using HTML for layout and instead 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.

CSS is generally moved to an external file rather than placed inline at the top of the page.

HTML Standards

This site is created following HTML5 standards based on the W3C HTML5.x Specification. This is specified in the very simple DOCTYPE at the top of the page.

Earlier versions of this site were built as HTML 4.01 Transitional which was later upgraded to XHTML 1.1 Transitional prior to the HTML5 makeover. Both required more complex DOCTYPES.

HTML5

HTML5 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 to separate the HTML from displayed text.

Related Resources

On this site:

• Resources index
• Designing your own website.
• Web design resources.
• Multiple screen resolutions.

Found this resource useful?