Font

A graphical representation of text that may include a different typeface, point size, weight, or design. In the picture to the right, are some examples of different computer fonts.

Users who're using Microsoft Windows can find all of the fonts installed on their computer by browsing to the C:\Windows\Fonts or C:\Winnt\Fonts directory. A listing of other font related questions are also found below.

• 
  

Deprecated

Term used when describing software or a software feature that may still work but should be avoided when developing as it may be removed in the future and no longer work. For example, the <font>HTML tag is a deprecated feature and should be avoided.

Meta tags

Tags within HTML that help define the contents of a web page. Meta tags help Internet search engines and browser display search results and web pages more appropriately.

<meta content="text/html; charset=utf-8" http-equiv="Content-Type">

Identify the content type and charset of the web page being displayed and how to display it. Although this line can be specified in a meta tag if you have access to the .htacess file define the charset in that file instead so it doesn't have to be specified in every web page.

<meta http-equiv="Computer Hope" content="no-cache">

Indicate to the browser being used to not cache the page. This will make sure the latest information is displayed to the visitor. It is only recommended that this tag be used on a page that is frequently updated since it will decrease the time it takes to load the page.

<meta name="audience" content="all">

Used with parental control software and robots to know the ages of viewers that can visit the page.

<meta name="author" content="www.computerhope.com">

Description of the author of the page.

<meta name="Content-Language" content="english">

Language the page is written in, in this case English.

<meta name="description" content="Helping you with ALL your computer questions">

One of the most important meta tags, this describes what the page contains. This is one of the many things used by search engines to help classify and rank your page.

<meta name="GENERATOR" content="Microsoft FrontPage 4.0">

The software used to generate the web page.

<meta name="keywords" content="computer, technical, free, help, support">

Keywords separated by commas that help describe what the page contains. Because of abuse, many search engines, including Google no longer look at the keywords.

<meta name="page-topic" content="Free Computer help">

Topic of the page, used by some search engines. Not all pages need this.

<meta name="page-type" content="Technical Support">

The page, used by some search engines. Not all pages need this.

<meta name="ProgId" content="FrontPage.Editor.Document">

Program used to edit the file. Similar to the generator.

<meta name="publisher" content="www.computerhope.com">

Publisher of the web page.

<meta name="revisit-after" content="15 days">

Notice to web robots indexing the page when to revisit next.

<meta name="ROBOTS" content="Index, ALL">

Notice to web robots what pages to index. It is still recommended that the robots.txt file be used.

<meta name="ROBOTS" content="Index, FOLLOW">

Notice to web robots what action to take on the page, in this case follow all links on the page.

• Additional HTML tag help and support.

Italic

Style of font that slants the letters evenly to the right. This text should be in italics.

Create italic text in HTML

<i>This text should be in italics</i>

Creating italicized text in a word processor such as Microsoft Word

1. Highlight the text you want to be italic.
2. Click the I button, which is often in-between the B and U for bold and underline.

The shortcut key to make text italic is almost always Ctrl + i.

Also see: Bold, Font, Oblique, Slant, Underline

Resolution

1. The image quality of a printer or monitor. With monitors, the resolution is measured by the number of pixels horizontal by pixels vertically or in this example 640 x 480. When increasing the resolution, the values increase, the image becomes more crisp, and text and images become smaller because more pixels per-inch are being displayed.

As the resolution is increased the requirements required by your monitor and video card also increase. With older computers and hardware many higher resolutions are not supported.

Degree

1. A unit of temperature. For example, a computer case monitor may display the temperature of a case being 92°.

• Information about inserting a degree symbol into a web page can be found on our extended special HTML characters page.

2. Diploma awarded in the United States Colleges and Universities that are given to students upon the completion of their objectives. These objectives vary on the difficulty, minor, length, and the College or University. Associates degree, Bachelor degree, Masters degree and PhD degree are all examples of the degrees that may be awarded.

Copyright

Protection for any published work that helps to prevent that work from being used without prior authorization. A copyright may be indicated by the word "Copyright", or a C surrounded by a circle ( © ), followed by the date of when the work was published, and finally the author of the work. When work is copyrighted, it may not be reproduced in any fashion unless the owner of the work grants proper rights. Computer Hope is not meant to be used as legal representation and how a copyright is interpreted could vary, if you have additional questions or concerns about legalities you should consult an authorized legal consultant or attorney.

Example of a copyright:

Copyright © 2011 Computer Hope ® All rights reserved.

A copyright for Computer Hope can be found at the bottom of each of our pages. Clicking the Copyright will link you to our legal page that contains additional legal information relating to Computer Hope and our copyrights.

• Information about inserting a Copyright symbol in a web page can be found on our extended special HTML characters page.

NBSP

Alternatively referred to as a fixed space or hard space, NBSP is short for Non-Breaking SPace and is used in programming, HTML, and word processing to create a space in a line that cannot be broken by word wrap on in the case of HTML create multiple spaces.

Creating a fixed space in a word processor

To create a fixed or hard space in a word process such as Microsoft Office or Open office use one of the below keyboard shortcuts.

Windows users: CTRL + ALT + SPACE, CTRL + SPACE, or hold down ALT and press 0160 on the num pad.
Apple users: OPTION + SPACE

Creating a NBSP in HTML

An example of how a user may insert a NBSP in HTML would be by adding the below extended HTML tag.

&nbsp;

or

&#160;

In the above examples using this tag would allow you to create multiple spaces in a row, something that cannot be done by only pressing the space bar. To do this you would have to type one of the above tags multiple times for the amount of spaces you needed.

• Full listing of Extended special HTML characters

Chevron

1. A "V"- or ">"-like marking. Many software programs have severalchevron-like markings that enable the user to expand a menu or view other options that may not currently be visible. For example, MicrosoftWindows users may notice that their menus have two down arrows at the bottom of their menu to display any menu option that has not been used recently. Below is an example of a chevron in the Microsoft Window XP Systray (two small arrows pointing to the left). Also See the menu definition for another visual example of a chevron.

2. These markings are also referred to as a guillemet, angled quotes,fast forward, and rewind and are displayed as either " « " or " » ".

En dash

A dash smaller than an em dash but usually longer than a regular hyphen, the en dash is often used in place of the word "to" such as 10–5 p.m.

WYSIWYG

Disebut sebagai wizz-e rambut palsu , WYSIWG pendek untuk Apa yang anda lihat Apakah What You Get dan istilah yang dicipta oleh Charles Simonyi pada tahun 1974 untuk menggambarkan keupayaan dapat memaparkan fail atau dokumen yang betul-betul bagaimana ia akan dicetak atau dilihat.

Nota: Sesetengah pengguna boleh mengelirukan WYSIWYG dengan WYS1WYG. Ini adalah misspelling biasa WYSIWYG; I (i) tidak 1 (satu).

How do I view the source code of a web page?

Question

How do I view the source code of a web page?

Answer

All Internet browsers allow users to view the HTML or other source code of any of the web pages they visit. For example, a user can easily view the code used to generate this page by following the below examples. Below is a listing of some of the different major browsers and how to view the source code in each of those browsers.

Microsoft Internet Explorer users
Mozilla Firefox and Netscape users
Opera user

When viewing the source code of a web page it is important that you keep in mind that only information and code that is not processed by the server will be displayed in the source code. For example, almost all Internet search engines process information on the server and then display the results on a web page. This means you can view the code used to generate the results page but you cannot view the search engine's source code.

This rule applies to all server side scripts, SSI, and code. Therefore, features such as search engines, forums, polls, chat, etc. will not display their code, and copying the information from the source code will likely only cause errors or direct you back to page you copied the information from.

Microsoft Internet Explorer users

To view the source code of a web page in Microsoft Internet Explorer, follow the below steps.

1. Open Internet Explorer
2. Click View
3. From the drop-down-menu click "Source"

Once the above steps have been completed a new window will open displaying the source code.

Mozilla Firefox and Netscape users

To view the source code of a web page in Mozilla Firefox or Netscape, follow the below steps.

1. Open Mozilla Firefox or Netscape
2. Click View
3. From the drop-down-menu click "Page Source"

or

1. Press CTRL+U

Once the above steps have been completed a new window will open displaying the source code.

 In Firefox you can highlight the portion of a web page you want to view the source code of and then right-click that highlighted section and click View Selection Source.

 Use the Firebug add-on to not only view the source code of a page but change and view those changes live through the browser.

Opera users

To view the source code of a web page in Opera, follow the below steps.

1. Open Opera
2. Click View
3. From the drop-down-menu click "Source"

or

1. Press CTRL+F3

Once the above steps have been completed a new window will open displaying the source code.

How can I check my web page for errors?

Question

How can I check my web page for errors?

Answer

There are dozens of services available that are capable of checking your website for errors and finding ways of improving your web page. Below is a listing of some of our favorite free online services.

General website / HTML checks

• Silktide Nibbler - Fantastic free online service that gives you a good complete overview of your website with an overall score.
• Feng-GUI - Great service that allows you to upload a picture of your home page or other pages and generate a heat map of where the visitor's eyes are most likely to go first.
• W3C markup validation - The source to go to check HTML, XHTML or other markup language you use on your web page for errors.
• Google Webmaster Tools - A must for any Webmaster. With this free service you can quickly identify any page or links with errors, scan for malware, find pages with short or missing titles, find duplicate meta tags, and much more.
• IE NetRender - Great online service that allows you to easily see how your page is displayed in different versions of Microsoft Internet Explorer. This is really helpful if you need to test your web page in an older browser such as IE6, which had a lot of compatibility and other issues with CSS.
• HTML Tidy - Simple and easy to use online tool that allows you to quickly identify any HTML errors you may have on your page.

CSS checking

• W3C CSS validation service - Fantastic service that will display any issues errors or compliance warnings you have with any CSS code.
• CSS Compressor - Although not a service to validate for errors this is a great tool to use after your CSS code has been verified. Using this tool you can shrink your CSS file to help the overall load time of every page that links to the .CSS file and decrease the overall amount of bandwidth you use.

Speed test

• WebPagetest - Our favorite tool for testing a web pages load time.
• Pingdom Tools - Fantastic service that gives you a good and easy to read overview of how long it takes for something to load on your web page. Keep in mind most web site visitors only spend a few seconds on each page they visit.
• WebSiteOptimization - Another great service to find how much time it takes to load your web page and what you can do to help decrease the overall time it takes to load it.
• Web Page Content Compression Verification - Great tool to quickly test an individual page or element on the page (such as a .CSS or .JS file) to see if it's being compressed before being sent using gzip.

Accessibility

• Browsershots - Excellent online tool to quickly test how accessible your web page is in all of the Internet browsers.
• Colorblind filter - Fantastic page to see how your page would look to someone who has colorblindness. This is an easy way to make sure that someone with colorblindness whose visiting your site is not going to miss something because your color scheme is bad.
• HERA - Great page to quickly verify if everyone regardless of any disability can view your page they may have.
• html2txt - A great method of converting your HTML page into a text document. This is helpful because many accessibility tools for the blind will convert pages to text, using this tool you can get a good idea how someone who's blind may read your page.

Mobile-readiness

• mobiReady - By far the best site and service for checking how compatible your website or blog is when being viewed on a mobile device. This service not only gives you detailed information on why your website may or may not work but also gives live demos on how the page will load on different mobile devices.

Analyze

• Google Analytics - Fantastic free service offered by Google that gives you full details of the visitors visiting your website, what browsers they're using, where they're leaving, what they searched for, and much more. After making sure your website has no errors having this services is always a good idea to help identify any other problems the above services may have not identified.

Checking a Blog

If your page is a blog consider running it through Is My Blog Working? to check to see if the blog is working and get other technical details about it. This can give you additional details about your page as well as anything you may want to change or add to the page.

Test

Having friends, family, and co-workers viewing your website is a great way to make sure your website not only works but works on different computers. Other services like fivesecondtest is also another great free way of testing the overall appeal of your site.

CSS

1. Short for Cascading Style Sheet, CSS is a specification first completed in 1996 by W3C that enables a web developer to create a look and feel for his or her page. For example, CSS may define how each of the pages look by defining the fonts used, colors, table borders, etc within a .css file. The CSS file could then be loaded onto any web page and if the developer ever wanted to change the look or feel of their pages could change the CSS file instead of editing each page. Below is a basic example of CSS code that could be stored in a .css file, in this example the CSS code is defining the fonts to be used in the page, the color of the links, color of the visited links, and color of the links when the mouse is over the link.

body {
font: normal 100% "trebuchet ms", Arial, Helvetica, sans-serif;
}
a {
color: #000000;
}
A:visited {
color: #005177;
}
a:hover {
color: #005177;
}

The above CSS code can be inserted into the <HEAD></HEAD> section of the HTML on a page using the below code or can be stored in a separate CSS file and called with <link rel="stylesheet" type="text/css" href="URL or path to css file here">

<style type "text/css">
<!--
above code inserted here-->
</style>

• How can I check my web page and CSS for errors?

2. Short for Content Scramble System, CSS is a protection scheme used to help protect copyrighted material store don DVD's from being copied.

• The official Content Scramble System website can be found at:http://www.dvdcca.org/css/

W3C

Short for World Wide Web Consortium, W3C is an organization founded by Tim Bernes-Lee in 1994 to help with the development of common protocols for the evolution of the World Wide Web.

• How can I check my web page for errors?
• The official W3C page is found at http://www.w3.org

How do I indent text on my web page or in HTML?

Question

How do I indent text on my web page or in HTML?

Answer

There are several different methods of indenting text. However, for compatibility between multiple browsers and accessibility we will only be listing the most popular methods of indenting text on your web page.

Recommended method

For indenting text or a paragraph, the most commonly recommended method would be to use CSS. Below are different examples of how CSS can be used to indent text. Each of these examples below would be placed in-between your <head></head> HTML tags.

The example below would create a style class named "tab" that would indent the text and paragraph 40 pixels from the left.

<style>
<!--
.tab { margin-left: 40px; }
-->
</style>

Once the above code is in-between your <head> tags you can use it at any point by adding it to your paragraph (<p>) tags as shown below.

<p class="tab">This is a tab</p>

If you plan on using this CSS on multiple pages we'd recommend that you create a .css file and link to that .css file on each of your pages instead of adding the above code to all of your pages. To do this add the line below in-between your <head> tags and create the .css file you're linking to, in the example below we've named our .css file "basic."

<link rel="stylesheet" type="text/css" href="http://www.example.com/basic.css">

Once this .css file has been created edit the file and add the same .css code, excluding the <style> and comment tags into it as shown below.

.tab { margin-left: 40px; }

Finally, once the above steps have been completed, you can tab any text using the same <p class="tab"> example we showed above.

In addition to indenting a whole paragraph of text, other forms of indenting can also be done. For example, if you wanted to only indent the first line of a paragraph instead of using the above CSS line, you would use the line below.

.tab { text-indent:40px }

Alternative solution

Another commonly used method of indenting text is using the <blockquote> tags as shown in the below example. Although this is a much easier solution and a solution most people still use, there are a lot of accessibility issues that can be caused by using this solution to indent your text. This tag is meant for quoting text and not for indenting.

<blockquote>This text would be indented</blockquote>

Extended special HTML characters and codes

About extended special HTML characters and how to apply

In order to insert some characters in HTML a special code known as extended HTML must be added to the code. If these codes are not used properly you'll often get a box, other text garbage, or your page will not be displayed properly because the browser does not properly understand the character. Most users first encounter this problem when attempting to add characters such as " & ", " " ", " > ", and " < ."

In the case of the less than and greater than these characters cannot be used in your HTML code because the HTML markup is generated using these characters. Using these characters instead of the extended HTML causes the web page to not load properly.

To properly insert a "<" or ">" or any extended HTML into your HTML instead of using these characters on your keyboard type the HTML extended code. For the less than ( < ) as shown in the below chart it's "&lt;" for the greater than ( > ) it's "&gt;" all extended HTML code begins with an ampersand (&) and is followed by a semicolon ( ; ). In addition to using the HTML code that is often easier to remember using the ISO code also works.

Finally, if you're using a WYSIWYG HTML editor make sure you're inserting these codes into the HTML code and not the page layout.

List of extended special HTML characters and code

Punctuation	HTML	ISO code	Name or meaning
–	–	–	En dash
—	—	—	Em dash
¡	¡	¡	Inverted exclamation
¿	¿	¿	Inverted question mark
"	"	"	Quotation mark
«	«	«	Angled quotes / guillemet
»	»	»	Angled quotes / guillemet
	 	 	Non-breaking space
&	&	&	Ampersand
¢	¢	¢	Cent
©	©	©	Copyright
°	°	°	Degree
÷	÷	÷	Divide
>	>	>	Greater than
<	&lt;	&#60;	Less than
µ	&micro;	&#181;	Micron
·	&middot;	&#183;	Middle dot
¶	&para;	&#182;	Pilcrow (paragraph sign)
±	&plusmn;	&#177;	Plus/minus
€	&euro;	&#8364;	Euro
π	&pi;	&#928;	Pi
£	&pound;	&#163;	British Pound Sterling
®	&reg;	&#174;	Registered
§	&sect;	&#167;	Section
¥	&yen;	&#165;	Japanese Yen
´		&#180;	Acute accent with no letter grave
`		&#96;	Accent/reversed apostrophe with no letter
á	&aacute;	&#225;	Lowercase "a" with acute accent
Á	&Aacute;	&#193;	Uppercase "A" with acute accent
à	&agrave;	&#224;	Lowercase "a" with grave accent
À	&Agrave;	&#192;	Uppercase "A" with grave accent
â	&acirc;	&#226;	Lowercase "a" with circumflex
Â	&Acirc;	&#194;	Uppercase "A" with circumflex
å	&aring;	&#229;	Lowercase "a" with ring
Å	&Aring;	&#197;	Uppercase "A" with ring
ã	&atilde;	&#227;	Lowercase "a" with tilde
Ã	&Atilde;	&#195;	Uppercase "A" with tilde
ä	&auml;	&#228;	Lowercase "a" with diaeresis/umlaut
Ä	&Auml;	&#196;	Uppercase "A" with diaeresis/umlaut
æ	&aelig;	&#230;	Lowercase "ae" ligature
Æ	&AElig;	&#198;	Uppercase "AE" ligature
ç	&ccedil;	&#231;	Lowercase "c" with cedilla
Ç	&Ccedil;	&#199;	Uppercase "C" with cedilla
é	&eacute;	&#233;	Lowercase "e" with acute accent
É	&Eacute;	&#201;	Uppercase "E" with acute accent
è	&egrave;	&#232;	Lowercase "e" with grave accent
È	&Egrave;	&#200;	Uppercase "E" with grave accent
ê	&ecirc;	&#234;	Lowercase "e" with circumflex
Ê	&Ecirc;	&#202;	Uppercase "E" with circumflex
ë	&euml;	&#235;	Lowercase "e" with diaeresis/umlaut
Ë	&Euml;	&#203;	Uppercase "E" with diaeresis/umlaut
í	&iacute;	&#237;	Lowercase "i" with acute accent
Í	&Iacute;	&#205;	Uppercase "I" with acute accent
ì	&igrave;	&#236;	Lowercase "i" with grave accent
ì	&Igrave;	&#204;	Uppercase "I" with grave accent
î	&icirc;	&#238;	Lowercase "i" with circumflex
Î	&Icirc;	&#206;	Uppercase "I" with circumflex
ï	&iuml;	&#239;	Lowercase "i" with diaeresis/umlaut
Ï	&Iuml;	&#207;	Uppercase "I" with diaeresis/umlaut
ñ	&ntilde;	&#241;	Lowercase "n" with tilde
Ñ	&Ntilde;	&#209;	Uppercase "N" with tilde
ó	&oacute;	&#243;	Lowercase "o" with acute accent
Ó	&Oacute;	&#211;	Uppercase "O" with acute accent
ò	&ograve;	&#242;	Lowercase "o" with grave accent
Ò	&Ograve;	&#210;	Uppercase "O" with grave accent
ô	&ocirc;	&#244;	Lowercase "o" with circumflex
Ô	&Ocirc;	&#212;	Uppercase "O" with circumflex
ø	&oslash;	&#248;	Lowercase "o" with slash
Ø	&Oslash;	&#216;	Uppercase "O" with slash
õ	&otilde;	&#245;	Lowercase "o" with tilde
Õ	&Otilde;	&#213;	Uppercase "O" with tilde
ö	&ouml;	&#246;	Lowercase "o" with diaeresis/umlaut
Ö	&Ouml;	&#214;	Uppercase "O" with diaeresis/umlaut
ß	&szlig;	&#223;	ess-tsett
ú	&uacute;	&#250;	Lowercase "u" with acute accent
Ú	&Uacute;	&#218;	Uppercase "U" with acute accent
ù	&ugrave;	&#249;	Lowercase "u" with grave accent
Ù	&Ugrave;	&#217;	Uppercase "U" with grave accent
û	&ucirc;	&#251;	Lowercase "u" with circumflex
Û	&Ucirc;	&#219;	Uppercase "U" with circumflex
ü	&uuml;	&#252;	Lowercase "u" with diaeresis/umlaut
Ü	&Uuml;	&#220;	Uppercase "U" with diaeresis/umlaut
ÿ	&yuml;	&#255;	Lowercase "y" with diaeresis/umlaut

Back to HTML and web design help

HTML

Developed by Tim Berners-Lee in 1990, HTML is short for HyperText Markup Language and is a language used to create electronic documents, especially pages on the World Wide Web, that contain connections called hyperlinks to other pages. Every web page you see on the Internet, including this one contains HTML code that helps format and show text and images in an easy to read format. Below is an example of a basic web page in HTML code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en"><head>
<title>Example page</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
</head>
<body>
<h1>This is a heading</h1>
<p>This is an example of a basic HTML page.</p>
</body></html>

In the very basic above example are the key parts to every web page. The first DOCTYPE line describes what encoding the page uses. For most pages, unless they are using XML this line will work. Next, the HTML tag begins letting the browser know that HTML code is being used until it is terminated at the end of the page. Next, the head section contains header information about the page, which will almost always contain the title of the page and the meta tags. Finally, the body section is all content that is viewable on the browser. For example, all the text you see here is contained within the body tags.

• Complete information and help with HTML.
• Extended special HTML characters and codes.
• How do I view the source code of a web page?

Choose your own background color

Choose your own background color

Example 1:

C h o o s e your o w n b a c k g r o u n d color!

Example 2:

Change the background color:  [Black] [Dark Red] [Brown] [Dark Green] [Dark Blue] [Gray] [Red] [Yellow] [Green] [Blue] [Violet] [Mauve] [Peach] [Orange] [Tan] [Light Gray] [Light Yellow] [Light Green] [Light Blue] [White] 

For source code on both of these examples, see the cool HTML tricks page.