Russ Harvey Consulting - Computer and Internet Services

Web Design Tools

HTML, JavaScript, SEO & standards

HTML Basics | .htaccess | JavaScript | SEO
Standards | HTML Validation

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

A computer monitor shows some HTML code. HTML, CSS, JavaScript and PHP are displayed on tiles around the monitor.

The shift from slower connections to broadband as well as from computers to mobile devices has significantly affected how websites are built today.

Larger Graphics and Mobile Dominate

The emerging dominance of mobile has had an impact on both website layout and content.

Your design cannot assume that wide layouts or even multi-column layouts work as you once could. This is further complicated by the variations in how different browsers and operating systems display the content.

Single-column layouts are far more common with stacked content where you scroll down the page rather than moving from page to page.

These sites tend to make use of very large graphics and video with very sparse text.

Consider Suitability

Before making a move to that style, consider the suitability for your site and whether the intended content would work with such a layout.

I didn't feel that approach would accommodate the content for this site in a manner that was accessible because my content is heavily dependent upon text.

Blogging Software and CMSs

Content management systems (CMSs) like WordPress, Blogger, Joomla and Drupal allow you to build and edit websites with tools similar to a word processor.

CMSs generate sites on the fly using content stored in a database which makes searching them easier, but also may impede load times.

I find using WordPress frustrating because of limitations inherent in any such program. More specialized CMSs (those designed for a particular industry or non-profit sector) can be even more so.

I sometimes feel like I'm playing Scrabble® with seven hard-to-use consonants that must fit within the framework of the previous rounds.

HTML Basics

You may need to know enough about the HTML and CSS underlying the structure of websites so you can correct a problem with your site or to incorporate some of the newer techniques you observe on other sites.

Definitions

First, a few basic terms:

HTML is a Markup Language

HTML is a markup language forming the base of most websites.

Other elements like CSS and JavaScript modify how that HTML is displayed, but cannot exist on their own.

What Does “Markup” Mean?

Adding bold or italics to a selection of text in Microsoft Word doesn't alter the underlying text, only the way it is marked up.

Likewise, HTML doesn't alter the text, only how it is marked up.

Check the Source

If you look closely at this page's source, you'll see that this is so.

A Simple HTML Example

This simple HTML example:

<p>This is a sentence with some <strong>bold text<strong>.</p>

is displayed as follows:

This is a sentence with some bold text.

Explanation

Notice that other than some markup contained within chevron brackets (< and >) there is only plain text.

The use of <strong> rather than <b> (bold) allows devices like screen readers to interpret the markup in a way that can be depicted without visual signals. Similarly, I recommend using <em> (emphasis) rather than <i> (italics)

Most HTML elements have both a beginning and ending tag. Exceptions include:

Basic HTML Editing

Cut 'N Paste HTML Editing is a very basic introduction to HTML. It is not an extensive education in HTML but will help you do minor edits on a simple HTML document.

More advanced sites use extensive imported libraries, PHP, JavaScript and other features that make it more difficult for someone to edit without advanced knowledge.

More Extensive HTML Instruction

For more extensive instruction in HTML check out these resources:

HTML References

*Deprecated HTML elements will not be supported by future browsers.

HTML Basics

HTML Courses

Other Resources

Cascading Style Sheets

When this page was first written, Cascading Style Sheets (CSS) was a relatively new technology and HTML3 was in common use. Early CSS did not support many of the features currently supported by CSS3 on HTML5.

Adding CSS shows how CSS is incorporated into HTML.

CSS Placement in a Document

CSS can be defined at the top of a page or in a linked external CSS file. You can also redefine an element within a page, but that is not as useful because it only affects that one element in one location.

External CSS Advantages

By defining the way elements like headers and paragraphs display (e.g., the font, colour, indent, spacing and more) in an external CSS file, you can avoid repeatedly re-defining these elements if a simple change is needed site-wide.

An Example

For example, if you'd built a 30-page site to display everything in Arial brown, only to find out that the customer wanted Verdana and hated brown, the amount of work you had to do would depend on how the site was coded:

Isolated CSS

While it is good practice to have a similar style across your site, you may want an effect on a single page. Rather than including that in the site-wide external CSS file, consider placing it at the top of the page(s) affected.

An example is the brown quoted text in Alice with CSS which isn't used elsewhere on the site.

CSS Inheritance

CSS inheritance is an important concept to understand. CSS placed higher in the style sheet is inherited by elements further down that aren't redefined.

It is a good practice to define the over document styling at the top of the CSS file including the basics of how paragraphs, headers and similar main elements of the page are defined.

You can then redefine certain elements such as smaller or larger text further down while retaining the basic structure.

CSS Example Sites

These sites pioneered using CSS2 to display its power and flexibility:

CSS-based art is pretty amazing. Some browsers have issues displaying them correctly.

CSS Reference Links

Return to top

.htaccess

Hosting sites based upon Apache use a text file called .htaccess (pronounced H-T access) to manage permissions, redirect 404s and moved pages. Use of .htaccess may be restricted by your hosting company or may require special settings.

Free .htaccess generator provides a quick way to generate .htaccess and .htpasswd settings.

Return to top

JavaScript

What is JavaScript?

JavaScript is a scripting language was developed by Netscape and is primarily used to make websites more interactive. This use of JavaScript is sometimes referred to as Dynamic HTML (or DHTML).

JavaScript is Not Java

While both Java and JavaScript are registered trademarks of Oracle (which purchased Sun Microsystems, Inc., the original developer), JavaScript is not Java.

This site uses JavaScript to open links pointing to external sites in a new window (or tab) while retaining compliance with HTML standards.

More detailed information about JavaScript and how it differs from Java:

JavaScript Support Varies

Not all browsers are created equal when it comes to the implementation of JavaScript. Choose your use of JavaScripts carefully so as not to disappoint your viewers.

As well, JavaScript can be disabled within a browser, degrading the user's experience on a JavaScript-enhanced site. This is often done to avoid security problems as well as to remove the JavaScript support used to display the annoying popups and tracking employed on some sites.

JavaScript Issues

Not all is well with JavaScript. Many sites use third-party JavaScript that may contain vulnerabilities their developers or users don't understand or mitigate.

JavaScript powers today's rich, highly customized web experience and enables digital transformation across all industry sectors. The fact that it remains largely unguarded is both surprising and disappointing. Websites generate massive volumes of high-value data, making them a primary target for attackers. The fundamental issue with the way today's websites are secured is that user data is greatly exposed to third-party applications and services and that data leakage is occurring even from trusted third-party resources.
— Tala Security CEO Aanand Krishnan

More JavaScript Information

Here are some JavaScript sites that may be useful to you:

Return to top

Search Engine Optimization

Search engine optimization (SEO) is the methods used to obtain the best ranking possible when specific search terms are entered into a search engine.

Consider this: the person searching for information and the website's owner have different goals when it comes to search engine results.

Results are skewed when sites purchase their ranking, especially for search terms that have no relevancy. Too many Google sponsored sites are click-bait for malware.

SEO and Site Ranking

Most search engines will determine your ranking based upon the relevance of the information on your site.

When you do a search on Google — doesn't matter what you're searching for — which would you rather find? A website that used every single SEO trick in the book to game their way to the top? Or would you rather find a website that has exactly what you're looking for — backed by authoritative and reliable content?
— Kyle Reyes

SEO Pitfalls

Site rankings are at least partly determined by how many sites link back to you. Authority sites are more likely to have top ranking.

One of the most critical factors is how the domain name relates to the search as well as how long the domain has been active.

Users have tried to use “link exchanges” and other techniques to improve their site's ranking. Unless your links are relevant to the content on your site, they could decrease your search standings.

Google introduced Penguin back in April 2012 to combat web spam and to penalize websites whose SERPs relied on exploiting "black hat" SEO tactics (e.g. keyword stuffing, link schemes, cloaking, duplicate content, etc.).
Search Engine Journal

Fake “Resources”

Another annoying practice is the creation an otherwise very useful resource unrelated to the site's purpose. After the marketing team gets many sites to link to that resource, they remove it, redirecting site visitors to the main site content. Unless folks check their links, this can retain a significant number of unwanted referrals.

A SEO company may provide you with short-term success.

However, if your site gets banned from a major search engine because that SEO company used tactics that Google penalizes you will have a much bigger problem.

Adding Your Site

To get your website linked, click on the Help menu for the search engine you wish to list your site with. Each search engine has a different method for submitting new sites for inclusion and there are no guarantees.

Remember, the site will require a reason to list your site in their search results. Provide quality, original material that others will find useful or entertaining.

Search Tools For Your Site

If your site contains more than just a few pages, you might wish to consider adding a search facility for your site. While the major search engines can do an excellent job of providing a listing of relevant pages on your site, you might wish to keep visitors on your site as they search for something there rather than sending them off to compare your pages with your competitor's site.

Return to top

Design Standards

Web designers don't have the control that print designers take for granted.

Web sites are created and will be viewed using different web browsers and operating systems.

This means web developers don't have the absolute control that you would have with a print project.

Differences Affect What is Displayed

Your site will be viewed on different

Web Standards

Following official web standards minimizes the problems your site visitors may encounter and can help your site to display optimally on all devices.

W3C

W3C is the body working to set the standards for HTML, CSS, XML, DOM and other aspects of the Web.

The W3C site's content may be a bit intimidating since it is aimed at those designing and building browsers rather than the average web designer, but it is where those standards are created. Unfortunately, the implementation of those standards is less than perfect.

Issues with Specific Browsers

Many designers used to build sites for compliance then add hacks to deal with Internet Explorer's quirks (one of the most famous being the “Holy Hack”).

This dominance ended with the demise of Microsoft support for IE.

Chrome: The New Standard

Google Chrome is now used by many developers, replacing Internet Explorer as their primary test browser.

Independent standards setting bodies like the World Wide Web Consortium (W3C) once ruled the web, with a collaborative approach to standards that competing browsers had to follow. Today, the standard is simple: Does your page work in Chrome?
ZDNET

Even though many other browsers are Chrome-based, if a site won't load in your preferred browser you're probably better off going elsewhere for your information.

Concerns

While this has standardized design expectations there are some concerns.

Chrome's dominance in the browser market allows Google to manipulate web design in much the same way as Microsoft did for years with Internet Explorer. Google also dominates the search and advertising markets, effectively controlling the Web.

Because the Internet's currency is people's private data, personal privacy is threatened while a few tech companies profit.

I recommend Mozilla Firefox and advise against using Chrome.

Accessibility

You need to make your site accessible to those using screen readers and other tools to "view" web content.

Watching a visually-impaired person try to set up an eTransfer on her bank's website was a very painful experience and is subject to existing or pending legislation in many jurisdictions.

Imperfect Standards

Unfortunately, the implementation of web standards is less than perfect.

These sites will help you to recognize and minimize the impact browser shortcomings will have on visitors to your site:

Cascading Style Sheets

Cascading style sheets (CSS) has moved from merely altering HTML to replacing much of the layout and design functions that HTML performed in earlier versions. The CSS Zen Garden demonstrates the power of using CSS for layout.

HTML5 Browser Support

HTML5 provides for advanced display methods for current (modern) browsers as well as providing a fall-back for legacy browsers. Legacy plugins have been replaced with built-in technologies for displaying multimedia and PDFs.

Many of the legacy HTML5 test sites are now gone because modern browsers were designed for HTML5.

User Groups

Sometimes it just helps to talk to someone that has faced the same challenges and can provide a working solution.

Return to top

HTML Validation

Validation tools will help you to avoid HTML errors, spelling mistakes and design mistakes that stop users with different or older browsers from viewing your web pages.

Spell Checkers

Most of the spelling checkers will not recognize Canadian spellings of words such as colour or flavour nor most proper names.

However, you can add these to the dictionary.

HTML/CSS Validation

Addons for Web Developers

Firefox has a number of addons that make validating your pages much easier. Most have now been replaced with Firefox Developer Tools.

Unsigned Addons

Firefox now treats unsigned addons with suspicion and many older ones now carry a permissions warning.

This affects the following addons:

Google Chrome Alternatives

There are alternatives available for Google Chrome. Note: Chrome cannot stop these extensions from tracking your browsing history.

Addons that display Google PageRank no longer work.

Related Resources

On this site:

Found this resource useful?
Buy Me A Coffee

 

Return to top
RussHarvey.bc.ca/resources/web.html
Updated: September 11, 2024