Russ Harvey Consulting - Computer and Internet Services

Cut ’N Paste HTML Editing

An HTML primer

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.

A section of the monitor displays some HTML code.

I've revised this page to accommodate changes in acceptable HTML and CSS practices, particularly for HTML5. If you're using earlier versions of HTML (not recommended) or XHTML, the rules are different.

I've used green text to separate HTML and CSS elements from the text to make it easier to understand.


Introduction

I'd recommend learning at least the basics of HTML markup to better understand how HTML functions.

This page will teach you the basics of HTML: creating a simple link then working your way through other HTML elements until you understand how links, images and paragraph elements work and the basics of using CSS.

Hand Coded Sites Generally Loads Faster

Each example on this page is generated by hand rather than using HTML-generating software. Creating HTML by hand takes more time, but the page loads faster and the HTML source is easier to follow.

People are very impatient. When your site loads quickly, it decreases the chance that someone will return to their search results for an alternative (probably your competitor's site).

WordPress and other CMS-based software can generate pretty decent websites, but are quite limited in their flexibility and they usually load much slower. Fortunately, high speed Internet access is more forgiving than in the early days of the Web.

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 than machine-generated sites.

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.

Don't worry if the displayed content is confusing. 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

Let's start by learning how to create an HTML link. The ability to link text is what makes HTML so powerful compared to printed text.

The HTML

The HTML link that links to another page looks like the following:

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

This is only a snippet of HTML for demonstration purposes.

Normally there is additional HTML elements that create paragraphs as well as the punctuation normally used in written text:

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

How It Appears

The browser will display that modified example HTML as follows:

Web Design Primer.

Discussion

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

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 either on a website or in an email.

The Link Address

The link address is the content that directs the browser to another location. Since it is hidden to the viewer it is easy to forget this fact.

If you place your mouse over the text the cursor will change and the browser will display the actual URL (link address):

Relative and Absolute Links

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

For an external link (one that takes you to another website) you need to use an absolute link:

<a href="https://russharvey.bc.ca/resources/self.html">Web Design Primer</a>

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

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 relevant information within that page.

This is accomplished by inserting an element ID (id="image") to a heading:

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

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

which displays as follows:

See adding an image for details.

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

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

which displays as follows:

Learn HTML basics.

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

These are both relative links to the sections from within this site. If you were linking to this content from another site, you would include the full address:

Congratulations! You now know the basics of linking text using HTML.

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 would use the following HTML:

<img src="../graphics/rhcslogo.gif" alt="RHC">

How It Appears

This is how the image will appear in the browser:

RHC

Discussion

<img>, unlike the paragraph tag (<p>), is not a container tag so it doesn't have a matching closing tag with a slash like the paragraph's </p>.

Implied Close

An implied close (the / at the end of the original element before the closing >)

<img src="../graphics/rhcslogo.gif" alt="RHC"/>

is required for XHTML but should not be included in HTML5:

Height and Width

These attributes can enable you to modify how the image is displayed using pixels or percentages. Including the actual size in pixels enables the browser to create a placeholder for images to speed up loading times for the page.

The use of the height and width settings is strongly recommended for non-responsive websites. I use them for small images in HTML5. It would be displayed as follows:

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

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

Obsolete Attributes

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

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

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

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 — to my web design services introductory 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 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:

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>

I've simplified the HTML by using a relative link address.

How It Appears

This is how this HTML will appear in the browser:

Another
RHC
Web Creation©

This layout is a legacy once included at the bottom of websites I'd designed, linking back to my design page. I've since replaced the graphic with a simple text link that works better in responsive sites.

Discussion

We've added text to the image, separating the text and linked images using the <p> and <br> elements. Notice the difference in how each displays.

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.

Symbols

Notice the © symbol (&copy;). 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). Copying and pasting content from MS Word or from a browser displaying these symbols can create havoc. It is best to paste plain text and to manually replace any symbols with their HTML counterparts.

CSS Gives the Designer Control

I've made several references to CSS (cascading style sheets). 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.

One of the most important of benefits 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.

CSS doesn't interfere with the display by older browsers because they ignore it (they don't understand what to do with it). This allows HTML5 to work with all browsers because they display the raw HTML without enhancements, although it degrades the user experience.

Learning More About CSS

If you wish to learn more about CSS, have a look at W3Schools CSS tutorial.

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

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.

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…well, 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

<br> is the HTML element used for line breaks. 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">Example Websites & Blogs</p>

The browser will display the content in the center, separated by an empty line:

RHC Design Portfolio

Example Websites & Blogs

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>
Example Websites & Blogs</p>

The browser will display the content in the center, but without any space between the two lines:

RHC Design Portfolio
Example Websites & Blogs

Discussion

Both examples are centered using CSS but the way the content is displayed is different:

Application

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

Call to book
an appointment!

The break element can also be used to create a series of lines of text without spaces such as a postal address:

<p>123 Main Street<br>
Victoria, BC<br>
V8V 1X2</p>

The browser will display the address without any space between the lines as is standard practice for mailing addresses:

123 Main Street
Victoria, BC
V8V 1X2

In both examples, a line break is more compact, more aesthetically appealing.

Return to top

Adding CSS

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 no longer supported 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 on your whole site.

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:

{
	max-width: 100%;
	font-family: Lucida Console,Andale Mono,Courier New,monospace;
	margin: 0.75em 0;
	line-height: 1.3;
	font-size: 1em;
	color: #060;
	background-color: #fff;
}

The paragraph size and some other attributes are 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 #060 and #fff which are probably not supported in older browsers (those required the full #006600 and #ffffff).

Most designers no longer support older browsers because HTML5 provides for a legacy solution which will display content, if 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.

One change to the CSS can alter the look of any HTML element throughout your entire 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 HTML element looks).

I recommend linking 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. A couple of pages have specific css embedded at the top of the page for styles not used elsewhere on the site.

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

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

HTML is a Markup Language

HTML is HyperText Markup Language, introduced by Tim Berners-Lee in 1989, 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).

A Series Of Simple Tags

HTML uses a series of simple tags enclosed in < and > chevron brackets to separate the HTML from displayed text.

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

Essentially, HTML takes plain text and places instructions around it to have the text displayed a certain way when viewed in a web browser.

Just as you don't normally see the “behind the scenes” workings of a word processing document, your viewers shouldn't see the what's behind your web page except for instructional pages like this.

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.

Check out the source HTML behind this page to see what I mean.

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 Websites

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. Most people were using dial-up modems on telephone lines that offered a fraction of the speed and bandwidth we take for granted today.

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.

Related Resources

On this site:

Found this resource useful?
Buy Me A Coffee

 

Return to top
RussHarvey.bc.ca/resources/html.html
Updated: November 14, 2024