Accessibility in the context of a Web site is the degree to which that Web site is usable by people with disabilities. Web pages often have access issues for the following groups of people:
Definition: An affiliate program is an Internet marketing practice that connects businesses selling products online with websites related to those products. The websites are run by third parties who sell products and services for the Internet company and in return receive a small commission.
Definition: An intelligent agent automates tasks such as Web searching, to make Web pages more interactive.
AJAX stands for Asynchronous JavaScript and XML.
AJAX is a way of developing Web applications that combines:
An anchor is another word for internal link or bookmark on a web page. An anchor is a link that links within the same page of the document.
Alternate Definition of AnchorSome designers use the term anchor to refer to any hyperlink on a web page. This definition stems from the fact that the HTML tag to create a link is the tag or anchor tag.
Anti-aliasing is a process where the edges of images and fonts have pixels added to blend the edge of the item into the background. The goal of anti-aliasing is to make the fonts and images appear less jagged on a computer monitor and make the curves smoother. Another term for this is font smoothing because it is primarily used on fonts to make them appear smoother.
Definition: Related to the ear and hearing. Aural on Web pages refers to aural style sheets used by Web designers to make their pages audible and accessible to visually impaired customers.
Definition: The horizontal or lateral angle of sound in an aural style sheet, with the computer in the center. Setting the azimuth for different voices creates a natural way to tell voices apart, as stereo and 5-speaker audio set ups will place the sounds in different locations, spatially.
A backlink is a link coming from another website to your own. The number and quality of backlinks that your site has can affect your search engine optimization efforts, as some search engines provide significant weight to the backlinks of a site.
If you are working on an SEO campaign, you should include efforts to get links to your site on related sites with high ranking in search engines for the terms you are targeting. This "link love" will help improve your search engine ranking as well. Try to avoid being linked on link farms as that can hurt your search engine results.
Google says
avoid links to web spammers or "bad neighborhoods" on the web, as your own ranking may be affected adversely by those links
A bad neighborhood on the Web is any website that uses any dirty tricks to try and increase their site's rankings or do harm to customers reading the site. These include:
All of these things will get a site penalized or banned from Google and other search engines, and if you link to these sites, your site will be penalized.
How to Check if a Site is a Bad NeighborhoodSearch Google for links to that site. If there are none, chances are the site has been banned. In the Google search engine, type:
site: URL
If no results are found, it's not a good idea to link to that site, as it is probably considered a bad neighborhood.
Bandwidth is the amount of data that is requested from your website over time. Bandwidth is expressed in terms of kilobits per second (Kbps).
Most Web hosting providers put a cap on bandwidth. If your website gets enough requests to go over that cap, you might be charged extra fees, or the requests might be denied.
The fold in web design is the position on a web page where the majority of browsers viewing the page will begin to scroll. Elements that are positioned “below the fold” are not seen when the page first loads. And some people believe that it's important to design web pages that don't scroll, or that keep only less important information below the fold.
The location of the fold differs depending upon the screen size and how big the browser window is. To determine where the fold is for your web page, you need to determine what resolution and browser window size your customers are browsing at. Here are some general locations of the fold for different browser sizes:
The short definition is that block-level elements are elements that create blocks or large groupings of text.
block-level elements have some specific distinctions from inline elements:
An anchor is another word for internal link or bookmark on a web page. An anchor is a link that links within the same page of the document.
Alternate Definition of AnchorSome designers use the term anchor to refer to any hyperlink on a web page. This definition stems from the fact that the HTML tag to create a link is the <a> tag or anchor tag.
In the option tag, selected is a boolean attribute:
<option value="test" selected="selected">test</option>
The bounce rate is the percentage of visits that come to the site and only view one page. This is a good metric to have as you can then determine how popular your site is as well as how effective (or not effective) your navigation is.
In Web design a breadcrumb or breadcrumb trail is the part of the navigation that shows you where you are, similar to the fairy tale "Hansel and Gretel". Breadcrumb trails are often found near the top of Web pages and define both the current location within the site hierarchy as well as primary pages above the current page.
At the top of the page it says: "About > Computing & Technology > Web Design / HTML" That is a breadcrumb trail for this page.
Internet Explorer, Netscape, Opera, Firefox, Google Chrome
A CAPTCHA™ is a part of a web form that attempts to ensure that the person filling out the form is indeed a person, and not a computer. The goal of a CAPTCHA is to reduce the amount of spam received by forms from
The term CAPTCHA is trademarked by Carnegie Mellon University and stands for Completely Automated Public Turing test to Tell Computers and Humans Apart.
Definition: The cascade in CSS or cascading style sheets is the ability to have multiple styles from different sources merge together into one definitive style. CSS defines the cascade in several ways, but the simplest is to remember that style properties that come later are more likely to be applied than those that come earlier.
Computer programs and operating systems that are case-sensitive read names as different if the case of the name is different. For example, on a case-sensitive operating system (like UNIX) the following are three different files:
It is especially important that Web designers on Windows machines pay attention to the case of their file names. Windows is not a case-sensitive operating system, but most Web servers run UNIX or Linux, and both of these are case-sensitive. If you upload a file named "myWebPage.html" you will not be able to access it without the capital letters in your Web URL.
Definition: Content Management System. A tool for managing content, usually on a Web site, that separates the design, interactivity, and content from one another to make it easier for content authors to provide content.
To write a comment in HTML or XHTML, type: <!-- comment text -->
To write a comment in CSS, type: /* comment text */
To write a comment in XML, type: <!-- comment text -->
A Web page is a series of containers, the most inclusive one being the <html> element that contains the entire Web page.
A container element is defined as an element that contains other HTML elements (including text).
Container elements are always block-level elements.
Paragraphs of text and images
Continuos media is content that is not split into one or more discrete pages. It is different from paged media because it can scroll forever without page breaks, page numbers or other aspects of printed media.
Continuous media includes the following media types:
The media types handheld and tv are both continuous and paged media.
Web pages are the most commonly seen example of continuous media.
On ecommerce websites, conversions are very important. A conversion happens when a customer who is viewing the site takes an action that the marketing intended. This typically means:
Some designers forget that even if a site isn't focused on ecommerce, conversions are important. An information site that relies on ad views needs to convert a first-time customer into a returning customer. An education website needs to turn readers into students. A marketing site needs to move people from the web to their brick and mortar presence. And so on.
Conversions are important to web design and ecommerce. And the conversion funnel is a metaphor that is used to describe how people move from being first time visitors through your site to finally converting into customers of your site.
This process is a funnel because typically a large number of people start out at your site or at an advertisement for your site and they are gradually winnowed down to the small percentage that convert. The typical rate ranges from between 0.1% to 10% depending upon what you're trying to convert - for example, converting a customer used to getting free resources into one who pays for a resource will typically have a much lower conversion rate than a funnel for converting a first-time visitor into a second-time visitor.
Conversions are important to web design and ecommerce. And the conversion rate is the number of conversions your site gets measured against the number of pageviews or impressions. It is defined as:
Conversion Rate = # of goals achieved / visits
The conversion rate is a way of measuring the success of your website. The higher your conversion rate the better your site is functioning. But remember that this is only true if you are measuring conversions of something valuable to your site. Good measurements include:
Definition:
A cookie has a very different definition for web designers and developers than it does for many people. A cookie on the web is a line of text that is saved to a computer's hard drive that can be accessed and written by websites.
A CSS framework is a library of CSS files that are used to make development of standards-based XHTML and CSS Web pages quick and painless. A CSS framework typically provides CSS styles for:
Cursive is a type of generic font family used in CSS for HTML fonts.
A cursive font is one that has letters that are connected together like cursive handwriting. Cursive fonts are often more decorative than standard fonts with lots of curves and swooshes.
Using Cursive FontsCursive fonts are best used sparingly for decorative text. They are often more difficult to read in large blocks. Also, there is only one web safe cursive font: Comic Sans MS. And this font is as widely disliked as it is liked, so use it with caution.
Common Cursive FontsSome common cursive fonts include:
p { color: #f00; }
The "{ color: #f00; }" is the declaration block and defines the paragraphs as red.
The XML declaration statement is a required element of an XML document. It tells the user agent that the document is an XML document and what version of XML it is using.
The XML declaration statement is a required part of the XML prolog and must be present to write a well-formed XML document.
<?xml version="1.0">
A dedicated server is a Web server that is leased or owned outright. Dedicated servers provide you exclusive use of the Web server resources for your business.
In most cases, you'll have full control of the server, including root access and server administration. Some dedicated server plans provide administration consoles to manage the server. While others require you use helpdesk employees to manage your Web server. Make sure that you know what access your plan provides.
The <font> tag has been deprecated in XHTML 1.0
There are several definitions of the term design that can apply to building websites:
Approximate a color that cannot be displayed in the current palette by combining different color pixels side by side.
Dithering in GIF images ise used to reduce banding in gradients of color. GIF images are, by definition, a finite set of colors, and by dithering the graphics designer can fool the eye to make the image look like it has more colors than it does.
Benefits of DitheringDNS stands for Domain Name Service.
DNS is the TCP/IP stack that converts IP addresses into domain names. If you purchase a domain name, DNS servers are given the IP address of your Web server and the corresponding domain name. Then, when someone comes to your domain, the DNS server translates that to an IP so it knows where to send the request.
Definition:
The DOCTYPE
declaration is an instruction found at the top of an HTML or XHTML document that tells the user agent what version of HTML the document uses.
The correct DOCTYPE
for modern documents is the HTML5 DOCTYPE
:
<!doctype html>
On the Internet or Web a domain is the name by which a computer is identified. It is mapped to a number called an IP address.
Domains can be purchased in any combination of letters, numbers, and hyphens (-) and up to between 26 and 63 characters long (not including the TLD: .com, .net, .org, etc.).
Some example domain names include:
webdesign.about.com
www.about.com
slashdot.org
A domain name is a case-insensitive string of letters, numbers, and hyphens that is used to define the location of a website. Domain names are used as pointers to IP addresses. Domain names are typically arranged hierarchically, with the more generic names on the right. For example in my domain name:
webdesign.endchapter.net
There are three parts (separated by periods). The most specific is my site name "webdesign". This is followed by the company name "about", and finally the top-level domain name (TLD) "com".
Most website domain names start with "www" because they were placed on the www or Web machine for their company. A company might have other domain names that are not websites, such as FTP sites or email servers and older technology like gopher.
Most Windows machines are set to 96 dpi, while Macs are set to 72 dpi.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> - specifies HTML 4.0 Transitional DTD
Ecommerce is the sale of goods and services on the web or through other online mechanisms.
Web designers who focus on ecommerce sites need to focus on issues like conversion rate and the conversion funnel. They also have to be able to accept monetary transactions from credit cards and online services like PayPal. Shopping carts are a common tool found on ecommerce websites and many designers use click heat maps to improve site performance.
An easy way to get started with ecommerce is to install and configure a tool like osCommerce to help you build catalogs and shopping carts without reinventing the wheel.
An elastic layout is a style of Web layout design that uses percentages or ems for widths and a max-width style to ensure that the content is not too long. Elastic widths stretch when font sizes are increased or decreased. This is what makes them elastic - they flex to accomodate the browser width and the reader's font preferences.
In XHTML, a complete tag and all its contents is an element, e.g. <p>paragraph</p>
<style type="text/css">
p { color: #00f; }
</style>
EPUB is an abbreviation of the term “electronic publication”. EPUB is a free and open-source ebook publishing platform that is used by many vendors for ebooks. An EPUB book will be a zipped file with the extension .epub
and a very specific file structure.
EPUB content is written in XML and XHTML. And you can learn more about the EPUB format and how to write ebooks using EPUB in the EPUB section of this site.
An external link is a hyperlink that points to another website on the internet, typically on another domain from the current website.
Your linking strategy should include what types of sites you will and will not link to as well as how many external links there should be on any given page. External links are important to web pages because they provide additional information and give your audience a breadth of resources to follow.
External links on your site become backlinks for the sites you link to. And many sites are more likely to link to you if you link to them first.
External links are written using the anchor tag in HTML.
<link rel="stylesheet" type="text/css" href="/styles.css" />
Definition:
Fantasy is a type of generic font family used in CSS for HTML fonts.
A fantasy font is one that is very dynamic and different from standard fonts. Their style is often exaggerated and more typical of posters and quirky themes. They are fonts that are not easily categorized into the other generic font families.
A favicon or Favorites Icon is a small graphic that is associated with a page or Web site. The favicon allows the Web developer to customize the site in the Web browser, both in the tab bar that is displayed in many browsers as well as in the bookmarks when a site is saved.
It was named the favicon because it was first developed in Internet Explorer, which calls bookmarked sites "favorites" and this icon was displayed in the favorites menu.
Most site favicons are designed as a small rendition of their logo or other branding mechanism.
A favicon or Favorites Icon is a small graphic that is associated with a page or Web site. The favicon allows the Web developer to customize the site in the Web browser, both in the tab bar that is displayed in many browsers as well as in the bookmarks when a site is saved.
It was named the favicon because it was first developed in Internet Explorer, which calls bookmarked sites "favorites" and this icon was displayed in the favorites menu.
Most site favicons are designed as a small rendition of their logo or other branding mechanism.
A first visit is a visit from someone who has never come to your site before.
The point of the Web page where the eye is drawn to. A focal point is the most important part of the page or the part of the page that is the most dominant.
Good design uses a focal point to create a page that has a purpose. The focal point of the Web page should be the element that is most important on the page. It gives the eye a place to rest and allows the viewer to determine the point of a page very quickly.
The fold in web design is the position on a web page where the majority of browsers viewing the page will begin to scroll. Elements that are positioned “below the fold” are not seen when the page first loads. And some people believe that it's important to design web pages that don't scroll, or that keep only less important information below the fold.
The location of the fold differs depending upon the screen size and how big the browser window is. To determine where the fold is for your web page, you need to determine what resolution and browser window size your customers are browsing at. Here are some general locations of the fold for different browser sizes:
times new roman; courier new 5pt bold
Garamond, Times, Helvetica, Geneva
A font stack is a list of fonts in a CSS font-family declaration. The fonts are listed in order of preference by the Web designer. A font stack allows a designer to control the look of the fonts on the Web page even if the computer doesn't have the best font for the job.
How to Choose a Good Font Stack
font-family: Geneva, Arial, Helvetica, Sans-Serif;
italics, underline, bold; in CSS: font-style: italics;
in CSS: font-weight: bold;
FQDN is a abbreviation for the term "Fully Qualified Domain Name". This refers to the full domain name of a URL. It is "fully qualified" because it is completely defined separate from the IP address where it is located.
http://webdesign.endchapter.net/
Since web browsers have been around as long as the Web, it is possible to have customers viewing your web pages in browsers that are extremely old and missing features of more modern browsers. Graceful degradation is a strategy of handling web page design for different browsers.
A web design that is built to gracefully degrade is intended to be viewed first by the most modern browsers, and then as older, less feature-rich browsers view it it should degrade in a way that is still functional, but with fewer features.
The main difference between the graceful degradation strategy and progressive enhancement is where you start your design. If you start with the lowest common denominator and then add features for more modern browsers for your web pages, you're using progressive enhancement. If you start with the most modern, cutting edge features, and then scale back, you're using graceful degradation.
Graceful Degradation Doesn't Mean Telling Your Readers, "Download the Most Recent Browser"One of the reasons many modern designers don't like the graceful degradation approach is because it often turns into a demand that readers download the most modern browser for the page to work. But this is not graceful degradation. If you find yourself wanting to write "download browser X to get this feature to work", you have left the realm of graceful degradation and moved into browser-centric design.
A good rule of thumb is to follow the same rules for graceful degradation as you would for progressive enhancement:
Then go out and build the most cutting-edge design you can! Just make sure that it degrades in less functional browsers but still works.
Heuristics are the rules surrounding usable Web pages. Heuristics are most often considered "rules of thumb" because they are so well known and understood.
An example of a Web heuristic is the convention that the home page of the site is where the most general information is found.
Navigation in a column on the left or a row of tabs across the top is another example of a common Web heuristic.
Hexadecimal numbers or "hex" numbers are a base-16 numbering system used to define colors on Web pages. A hex number is written from 0-9 and then A-F.
Web colors are written as three sets of hex pairs. The first set represents the red hue, the second the green hue, and the third the blue. White is written as ff ff ff or #ffffff
while black is 00 00 00 or #000000
.
When using hexadecimal colors in web design you are using the RGB color model. This is a color model that describes projected colors—colors as they are seen directly by our eyes, not reflected off of any surface. Computer displays work with color this way, and so the RGB color model is most appropriate for web designs. If your pages are going to be printed, you might consider switching to a reflected color model such as CMYK for your print style sheets.
Red = #ff0000
Green = #00ff00
A hit is a request for a file from a Web server. This includes every stylesheet, javascript file, and image on a Web page. And as such is a bad metric to use for evaluating Web page popularity.
Web server analytics that show you only the number of hits that a site gets are not giving you a lot of information. In fact, a single Web page can generate dozens or possibly hundreds of hits to the server. And if you judge a site's popularity on the number of hits it gets, you'll most likely be very disappointed unless your Web pages are very plain, with no CSS, scripts or images. A much better metric to use is the pageview.
Hits are a valuable metric for Web server administrators. They can tell an admin how hard a server is being worked, and give him or her an idea of when the hardware will need to be upgraded.
HSL is an abbreviation of hue, saturation, and lightness. It is a color model used to describe colors in a way that is easier for humans to interpret than the straight RGB color model.
HSL colors are described with three values, in order:
To pick a color using HSL, first choose the hue you want to use. Red is 0 or 360°, green is 120° and blue is 240°. Then decide how saturated and light or dark you want it.
The benefit to HSL colors is that they are a lot easier to guess at. You simply start with a hue on the color wheel and then adjust the saturation and lightness until you've got the one you want.
HSL is sometimes called HSB for hue, saturation, and brightness. And sometimes HSV for hue, saturation, and value.
HSL is a color system that is available in CSS 3. To use it, you separate the three values as numbers like you would in RGB colors:
Red: hsl(0,100%,100%)
Green: hsl(120,100%,100%)
Blue: hsl(240,100%,100%)
Some Commonly Used Hue Numbers
HTML or Hypertext Markup Language is the language that the Web is written in.
HTML code usually means the markup language HTML that allows web browsers to render web content.
Many people refer to the language that builds web pages as HTML code. HTML is the language that is used to write web pages. But the term “code” is misleading. Many people consider code to mean a programming language like C++ or Perl, and so they don't consider HTML to be code.
HTML Codes Are Different
HTML codes are special characters that cannot be rendered with keyboard characters (like Ǽ or ė) or characters that are used in HTML itself (like <, >, and &).
HTML code looks like this:
<html lang="en">
<head>
<title>My Web Page</title>
</head>
<body>
<h1>My Web Page</h1>
<p>
This is my web page.
</p>
</body>
</html>
Definition:
HTML codes are special characters or character entities that can be used in web pages to display characters that otherwise would be difficult to type or use.
Types of HTML Codes
There are two types of HTML codes that can be used in web pages:
Using HTML Codes
Every character that is a part of your website's character set can be written encoded with HTML codes or character entities. I have listed them in several easy-to-use lists:
An HTML tag is a code that describes how a Web page is formatted. HTML tags are defined by the characters < and >.
There are dozens of HTML tags in valid HTML, another dozen or so deprecated tags (tags that are no longer part of the specification), and a few tags for specific browsers like Internet Explorer only tags, Netscape only tags, MSN TV/WebTV only tags, and others.
HTTPS stands for HyperText Transfer Protocol over SSL (Secure Socket Layer). It is a TCP/IP protocol used by Web servers to transfer and display Web content securely. The data transferred is encrypted so that it cannot be read by anyone except the recipient.
HTTPS is used by any Web site that is collecting sensitive customer data such as banking information or purchasing information. If you are making a transaction online, you should make sure that it is done over HTTPS so that the data remains secure.
You can tell when a page is using HTTPS in two ways:
Learn more about HTTPS and how to add it to your Web server with my article What is HTTPS
Use links and anchor tags to create hypertext on Web pages.
An image map in XHTML or Web Development is an image that has different clickable elements within the same single image. This allows Web developers to define only portions of the image as clickable while others are not, or to define specific areas of the image to point to different URLs.
A client-side image map in XHTML would have the following code:
<img src="/image" usemap="#map" />
<map name="map" id="map">
<area shape="rect" coords="0,10,20,40" href="/URL" alt="click here" />
</map>
An impression is an advertising term refering to each time an advertisement is loaded on the screen. Whenever a customer loads an advertisement, that is an impression.
The short definition is that inline elements are elements that are found in the text of the HTML document. They are also sometimes called text level elements.
Inline elements have some specific distinctions from block-level elements:
<a href="/" style="text-decoration: none;">
An internal link is a link on a web page that links to another page on the same site or domain. Most internal links are used as navigation around the site or to provide additional information about a topic.
Your site linking strategy should include which pages should include internal links, how many there should be on a given page, and their placement in the document (within the content, as navigation, or attached to images).
The most important thing to remember about internal links is their location in relation to the home page. The most important pages on your website should always be only 1-3 clicks away from the home page. Google recommends this as well as a way to ensure that their spider can find your important pages.
Alternate Definition of an Internal Link
Beyond being links to other pages on the same domain, internal links (often called bookmarks or ) are also the links within one page. These links are usually found in tables of contents or as navigation within a long page. They allow designers to point to just the part of the page that is relevant.
IP stands for Internet Protocol. It is a packet-based protocol for delivering data across networks, specifically the Internet.
IP addresses are a string of four numbers separated by dots. These numbers can then be translated into a domain name.
Some example IP addresses include:
63.251.36.255
66.35.250.150
An IP address is the numerical designation of a computer attached to the Internet. They are usually written as 4 groups of 3 numbers (IPv4). Domain names use IP addresses as their address so that Web browsers can find their location on the Internet.
Some example IP addresses include:
63.251.36.255
66.35.250.150
IRI is an abbreviation that stands for Internationalized Resource Identifier. An IRI is a sequence of characters from the Universal Character Set (Unicode). An IRI is intended to replace URIs for identifying resources. However, in the case of resource retrieval, IRIs are mapped to URIs for backwards compatibility and because most user agents can only retrieve URIs. IRIs are defined in RFC 3987.
IRIs are written: scheme : path
similar to URIs. The primary difference is that you can use Unicode characters in an IRI, and you cannot in a URI.
Schemes include: file
, http
, ftp
, news
, mailto
, gopher
.
The adjustment of spacing between pairs of letters in words. Usually defined by the font family. Kerning creates letter forms similar to ligatures when the letters are pushed together until they are touching. Kerning is a form of micro whitespace that allows you to control the legibility of text on Web pages.
In SEO, the keywords or keyword phrase is the phrase that the author is trying to target for search engines. Most of the time, you should focus on one keyword or keyword phrase per page.
Keywords should represent the main point of a page. They are the words that someone would type into a search engine and find your page.
The keywords for this page might be:
keywords, keyword phrase
LAMP is an acronym that stands for Linux, Apache, MySQL, and PHP (or Perl or Python). It is a Web development platform that defines the Operating System (Linux), Web Server (Apache), database (MySQL), and scripting language (PHP, Perl, or Python).
The space between lines of type. In CSS, this is referred to as line-height. Leading is a form of micro whitespace that allows you to control the legibility of text on Web pages.
line-height: 80%;
Definition: An image or portion of text that is highlighted in some way (usually underlined on the web) and connects the current document to another. Hyperlinks are what make plain text into hypertext. Links are an important part of web pages. They connect documents on the same site together using internal links and direct readers to more information using external links. Web designers should create linking strategies for their websites to make sure that they are linking to the best information for their customers. You should also regularly use a link checker to make sure that all the links on your site still work.
Also known as: Hyperlink
A link farm is a website set up with the sole purpose of increasing the link popularity of other sites by increasing the number of incomming links to those sites. They are typically made up of long lists of unrelated links. Some link farms are created as networks of sites that contain numerous links to one another.
Nearly all search engines remove link farms from their directories when they find them. And many also penalize other sites that link to them. It is not a good idea to link to a link farm if you rely at all on organic search for pageviews.
The term “long tail” refers to a typical graph of probability distribution. In a typical probability distribution, the majority of the items graphed will be in the middle portion, with a the distribution getting thinner and smaller as you move to the right.
When you apply this to SEO, you can see that there are a small number of keywords that are extremely popular, a large group that has middling popularity, and then lots and lots of different keyword phrases that get only a few clicks. The red area of the image, represents the long tail.
What the Long Tail Is NOT
Some people will tell you that a long tail keyword phrase is defined by the length of the phrase. While this may have been true several years ago, it is no longer true. A long tail keyword phrase is a phrase of any length that gets a small amount of search traffic. Long tail keywords were defined by their length because people used to only search for one or two words at a time. But that is no longer true.
A long tail keyword phrase is also not a phrase that generates only one or two results. For example, you can do a search for your own website by putting in the URL of your site. This should generate just your site in the results. But it is so specific that the likelihood that anyone is searching for it other than you is very low. Do research on the phrases you are considering and make sure they are not so specific that they are unhelpful.
Placeholder text or “lorem ipsum” is dummy text used by designers in preliminary designs to highlight the design, colors, and layout of a page. It is a form of scrambled latin text that is designed to mimic the flow of words, sentences, and paragraphs in English and other latin languages.
Placeholder text like lorem ipsum is used by web designers when they are submitting a web page design for review and they don't want the reviewers to get hung up on the contents of the text. It is most often used in preliminary designs to get a sense of the colors, designs, and layout of a page or site. The non-English words allow the viewers to look at the page and recognize the sections of the page that are for text without needing to read that content.
In fact, the standard lorem ipsum text is so commonly used in designs, that many people see the words “Lorem ipsum dolor...” and they immediately stop reading because they recognize that it is placeholder text.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
MAMP is an acronym that stands for Macintosh, Apache, MySQL, and PHP (or Perl or Python). It is a Web development platform that defines the Operating System (Linux), Web Server (Apache), database (MySQL), and scripting language (PHP, Perl, or Python).
Definition: The characters and codes that change a text document into an XML or other Markup Language document. This includes the < and > characters as well as the elements and attributes of a document.
Definition: In HTML, a marquee is a small section of the browser window that displays text that rolls across the screen. This tag works only in Internet Explorer.
Meta data is data about data. In other words, it is information about the Web page that it is currently on. Meta data is usually information that is more useful to programs and scripts than to the customers reading the page. So, meta data is stored in meta tags that are hidden in the <head> of the HTML document.
Meta data is most often used for search engine optimization (SEO). The two most critical meta tags used in SEO are: description and keywords. These are sometimes used by search engines to place the pages in the search directory, and they are used to provide a short description of the Web page in the search results.
A meta tag is a specific HTML tag used to define meta data on your Web pages.
The most commonly used meta tags are:
Meta tags are placed in the <head> of an HTML document, and they typically do not display where the reader can easily see them. They are used to provide additional information about the page either for databases and search engines or for the author of the site to keep a record of the pages.
Meta tags are written using the <meta> HTML tag, and typically look something like this:
<meta name="keywords" content="meta tags, search engine optimization, SEO" />
Meta Tags and Search Engine Optimization (SEO)
Meta tags are most often used for search engine optimization (SEO). The two most critical meta tags used in SEO are: description and keywords. These are sometimes used by search engines to place the pages in the search directory, and they are used to provide a short description of the Web page in the search results.
Meta Tags and Page Refresh
The meta refresh tag is often used to redirect your customers from one Web page to another. It is a simple and reliable way to get your customers to the correct page of your site without requiring any server or programming knowledge.
MIME stands for Multipurpose Internet Mail Extensions. And a MIME type tells the browser or user agent what type of program various file types and extensions are.
There are many, many different MIME types. On the web the most common ones are used with multimedia such as audio files and video files.
MIME type information is maintained by the Internet Engineering Task Force (IETF).
text/html is the HTML MIME type
The verb “to minify” means to make something smaller.
In web design and development this refers to the process of removing unnecessary whitespace and other characters from HTML, CSS, and JavaScript to make them download more quickly.
While many developers minify their HTML, CSS, and JavaScript using a program, I don't recommend it in most cases. Because programs tend to be very literal and can remove things that should be left in the file. Instead, if you need to minify your HTML, CSS, and JavaScript, you should do it manually and very carefully.
What Can Be Removed to Minify HTML?
To minify HTML effectively, you can remove:
You should never remove quotation marks around tag attributes. While this is valid in some HTML DTDs, it can cause problems with older browsers and make the code even more confusing for people editing it.
What Can Be Removed to Minify CSS?
To minify CSS effectively, you can remove:
}
)You should be very careful when removing the semi-colons. If you remove one from the middle of a style property, it will break that property and could make the rest of the document unusable as well.
Definition: A monospace font looks like a typewriter font. Each letter takes up the same width and the rest - including i and w. Monospace fonts are best used to define code and pre-formatted text.
Most search engines offer two types of search results to their customers: paid results (typically at the top or on the side) and organic or natural results. While paid results can get your Web site to rank higher for a specific keyword phrase (because you've paid to be high in the results), most customers consider these results to be little better than advertising, and will often skip over them in favor of the natural or organic search results.
An organic search is a search that generates results that were not paid advertisements. Many customers feel that these results are a more accurate reflection of what they might want when searching for a specific phrase, because they are generated by popularity and common usage.
When you do SEO or search engine optmization you are attempting to adjust the content of your Web pages to rank well in the organic search results.
Definition: Placing one element inside another. When two tags are opened, they must be closed in the reverse order.
A new visitor is someone who has never come to your website before. It is important to make a good impression on new visitors so that they become a repeat visitor
A non-breaking space is a white space character that HTML will not collapse.
Non-breaking spaces are used to hold open table cells and add spacing between words. It is also common to use non-breaking spaces to add tabs to HTML or to indent the first line of a paragraph.
Many of the ways non-breaking spaces are used can be done using the CSS properties margin and padding. You can also affect the white space of your web pages with the white-space property.
Writing a Non-Breaking Space in HTML
Use the HTML code:
or the numerical code
.
Some people refer to a non-breaking space as an “nbsp” in reference to the HTML character code.
this text is indented 3 spaces.
The HTML is:
this text is indented 3 spaces.
Normal flow is the way that elements are displayed in a Web page in most circumstances. All elements in HTML are inside boxes which are either inline boxes or block boxes.
Laying Out Block Boxes
In normal flow, block boxes are positioned on a page one after the other (in the order they're written in the HTML). They start in the upper left of the containing box and stack from top to bottom. The distance between each box is defined by the margins with top and bottom margins collapsing into one another.
For example, you might have the following HTML:
<div style="width:200px;margin:5px;border:solid thin black;">This is the first div. It's 200 pixels wide with a 5px margin around it.</div>
<div style="width:390px;height:20px;margin:10;border:solid thin black;">This is a wider div.</div>
<div style="width:400px;margin:15px;border:solid thin black;">This is a div that's a bit wider than the second one.</div>
Each div is a block element, so it will be placed below the previous block element. Each left outer edge will touch the left edge of the containing block.
Laying Out Inline Boxes
Inline boxes are laid out on the page horizontally, one after the other beginning at the top of the container element. When there isn't enough space to fit all the elements of the inline box on one line, they wrap to the next line and stack vertically from there.
For example, in the following HTML:
<p>This text is <b>bold</b> and this text is <i>italics</i>. And this is plain text.</p>
The paragraph is a block element, but there are 5 inline elements:
Most search engines offer two types of search results to their customers: paid results (typically at the top or on the side) and organic or natural results. While paid results can get your Web site to rank higher for a specific keyword phrase (because you've paid to be high in the results), most customers consider these results to be little better than advertising, and will often skip over them in favor of the natural or organic search results.
An organic search is a search that generates results that were not paid advertisements. Many customers feel that these results are a more accurate reflection of what they might want when searching for a specific phrase, because they are generated by popularity and common usage.
When you do SEO or search engine optmization you are attempting to adjust the content of your Web pages to rank well in the organic search results.
An external link is a hyperlink that points to another website on the internet, typically on another domain from the current website.
Your linking strategy should include what types of sites you will and will not link to as well as how many external links there should be on any given page. External links are important to web pages because they provide additional information and give your audience a breadth of resources to follow.
External links on your site become backlinks for the sites you link to. And many sites are more likely to link to you if you link to them first.
Paged media is content that is split into one or more discrete pages. It is different from continuous media because it includes things like headers on every page, page numbers, and other features of printed documents.
Paged media includes the following media types:
The media types handheld and tv are both continuous and paged media.
Printed documents are the most commonly seen example of paged media.
A pageview is a request for an item called a page in Web analytics. A page is loosely defined as all the requests required to build one Web page. A pageview can include many hits, as the page is built with CSS, scripts, and images.
Pageviews are a good unit of measure in Web analytics. The number of pageviews a website gets is a measure of how popular it is and how attractive it will be to advertisers. Most Web analytics tools will show you pageviews.
PDF stands for “portable document format”. It is a file format that was created by Adobe as a way to store documents for exchanging. The PDF format was meant to be independent of the hardware or platform it was being viewed on.
In many ways, a PDF document was intended to be a digital print out of a document. Like a paper print out, it cannot be readily changed (without appropriate software) and looks the same no matter what operating system displays it.
Placeholder text or “lorem ipsum” is dummy text used by designers in preliminary designs to highlight the design, colors, and layout of a page. It is a form of scrambled latin text that is designed to mimic the flow of words, sentences, and paragraphs in English and other latin languages.
Placeholder text like lorem ipsum is used by web designers when they are submitting a web page design for review and they don't want the reviewers to get hung up on the contents of the text. It is most often used in preliminary designs to get a sense of the colors, designs, and layout of a page or site. The non-English words allow the viewers to look at the page and recognize the sections of the page that are for text without needing to read that content.
In fact, the standard lorem ipsum text is so commonly used in designs, that many people see the words “Lorem ipsum dolor...” and they immediately stop reading because they recognize that it is placeholder text.
A podcast is a digital recording that is sent to subscribers over the Internet through an RSS feed. A podcast can be sent as audio or video files.
The term was developed by combining the words "iPod" and "broadcast". There are many ways to promote your podcast, including direct from the Apple iTunes store.
Since web browsers have been around as long as the Web, it is possible to have customers viewing your web pages in browsers that are extremely old and missing features of more modern browsers. Progressive enhancement is a strategy of handling web page design for different browsers.
Progressive enhancement is a way of designing web pages so that the more features a user agent supports, the more features the web page will have. It is the opposite of the design strategy graceful degradation that builds pages for the most modern browsers first and then converts them to work with less functional browsers.
How to Use Progressive Enhancement
When you create a web design using progressive enhancement, the first thing you do is create a design that works for the lowest common denominator. At it's core, progressive enhancement says that your content should be available to all web browsers, not just a sub-set.
All your HTML should be valid and semantically correct so that the widest variety of user agents can view the page.
Design and layout is added in using external style sheets. And these styles are written to enhance the page as the user agents gain functionality.
Behaviors are added using external scripts. And these scripts are written to take advantage of browser support, but not deny access if that support is unavailable.
An XML prolog consists of a declaration of the version of XML being used as well as the DTD that the document will validate against.
XML documents do not have to have the DTD to be well-formed, but it is required to be valid.
<?xml version="1.0">
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
margin, font-family, border-color
Definition: A CSS selector that selects part of a document based on some characteristic other than the element name, attributes or content.
The first letter or first line of a paragraph is a pseudo-element.
p:first-letter
p:first-line
A repeat visitor is someone who comes to your website more than once. Repeat visitors are important as it means that your site keeps its value for your customers.
Some examples of replaced elements are:
Most small monitors are set at 640x480 resolution, but some are defaulting to 800x600 and higher.
RGB is an abbreviation for "Red Green Blue". RGB is a color model used on displays where red, green, and blue light are combined to make millions of colors.
RGB is how colors combine on screens because they are viewed directly, and not reflected off anything - like colors in traditional color theory which is based on reflective colors usually on paper.
CSS allows you to use RGB codes to define your website colors. To define a color in RGB with CSS, write:
rgb(255,0,0)
The numbers go from 0 to 255, and they are listed in order—red, green, blue.
Red = rgb(255,0,0)
Green = rgb(0,255,0)
Blue = rgb(0,0,255)
RSS is an abbreviation that stands for either:
The most common definition is Really Simple Syndication.
RSS is a type of XML that allows Web content producers to provide content from their website for publication on other websites. It allows readers of the website to stay informed easily about changes on that website because the information is collected in a standard format and is readable by many different types of RSS tools and RSS readers.
RSS scraping is the use of full-feed RSS feeds to populate another website without providing attribution or links back to the content originator. Another form of RSS scraper may or may not provide attribution, but they also make changes to the content - removing links, changing words, or otherwise modifying the content that was syndicated.
p { color: #f00; } OR html, body { color: #000; }
Definition: A serif is the tiny stroke at the end of the main strokes of a font character. A font family that does not have these serifs is called a sans-serif font. Sans-serif fonts are best used online, as they are easier to read there. On the Web serifs can make the fonts more difficult to read, especially at small sizes, but sans-serif fonts do not have this problem.
Definition: Saturation is the amount of hue that is in a color. More white added to a color results in a lower saturation.
Definition: Schema are XML documents that describe other XML documents. They are used instead of a DTD.
Definition:
A script is a small bit of code that enables web browsers to do something rather than just displaying static results. Scripts are used in web design to create dynamic pages and DHTML. The most commonly used scripting language in web design is JavaScript, but many developers also write scripts in ActiveX.
In CSS the selector is the element or item that the CSS will be applied to.
p { color: #f00; } The "p" is the selector, indicating all paragraphs. html, body { color: #000; } The "html, body" is the selector, indicating both the html and body tags.
Definition: A serif is the tiny stroke at the end of the main strokes of a font character. A font family that has these serifs is called a serif font. Serif fonts are best used in print, as they are easier to read there. On the Web the serifs can make these fonts more difficult to read, especially at small sizes, as most computer monitors don't have the resolution to display them clearly.
SGML stands for Standard Generalized Markup Language. It is a markup language used to define documents. SGML describes the structure of a document and is the basis for both HTML and XML.
SOAP is an acronym that stands for: Simple Object Access Protocol.
SOAP is an XML-based protocol to allow you to activate an application or object within an application across the Internet. SOAP is used for distributed computing and Internet applications. It was developed by a group of vendors, including Microsoft, to revolutionize how web applications are developed.
Outside of web development SOAP stands for Symbolic Optimal Assembly Programming.
If you have two style properties on the same element, the last one defined in the document will be the most specific and take effect. For example:
p { color : blue; }
p { color : yellow }
All paragraph tags will be yellow.
SGML stands for Standard Generalized Markup Language. It is a markup language used to define documents. SGML describes the structure of a document and is the basis for both HTML and XML.
Streaming media are multimedia that are sent continuously by the web server to the client. Typically they are treated as a form of presentation or broadcast that is delivered to the customers.
Streaming media can be sent as video or sound files. They can be served by a standard web server using HTML or by a streaming server set up specifically for the task.
Many sites use streaming to server larger video (and audio) files because streaming is somewhat less arduous on the server. Streaming also allows larger files that would take hours to download completely to be viewed relatively quickly. The user begins viewing the file while the server continues sending the rest of the file in the background as they watch or listen.
Other sites use streaming media because the files are not downloaded by the customer. They are viewed as soon as they arrive at the client. This provides a level of copyright protection that straight download of video and audio files does not. Keep in mind that streaming is not a secure method of protecting your video and audio copyright, but it does provide some protection.
A subdomain is a more specific portion of a domain name. Subdomains are used to divide up Web domains without registering a new domain name.
Subdomains use the Web server to define the location of files for that site, rather than using DNS. The easiest way to do this is to set up virtual hosting on an Apache Web server.
Subdomains are the most specific portion of the domain name, so they are found in the left-most portion of the domain name. Such as:
webdesign.about.com
www.about.com
<a>, </strong>, <html>
Notepad - a text editor, HomeSite - an HTML text editor
TLD stands for Top-Level Domain and TLDN stands for Top-Level Domain Name.
A TLD or TLDN is the most generic portion of a domain name. It is found in the rightmost position of a domain name.
There are two types of TLDs:
Some commonly used generic TLDs include:
.com, .edu, .net, .org
Some commonly used country code TLDs include:
.au (Australia), .de (Germany), .fr (France), .uk (United Kingdom), .us (United States)
The space between letters in a block of text. In CSS this is defined with the letter-spacing property. Tracking is a form of micro whitespace that allows you to control the legibility of text on Web pages.
letter-spacing: -0.5px;
In CSS 2 the universal selector is a selector that selects any element in your document.
* { ... }
The "*" is the universal selector, indicating all tags in the document.
URI is an abbreviation that stands for Uniform Resource Identifier. It is a codification of addresses to internet objects. For example, a URL and a URN are both URIs. URIs are described in RFC 1630.
URI are written: scheme : path
Schemes include: file
, http
, ftp
, news
, mailto
, gopher
.
http://webdesign.endchapter.net/index.htm is a URL.
urn:abc:123,456 is an example of a URN
Usability is the process of making a website easy for customers to use. It encompases the heuristics of the site as well as the methods that people use to manipulate the site.
A website is considered usable if the customers coming to that site can find what they need and accomplish their goals.
Firefox and Internet Explorer are user agents.
A valid XML document is any document that can be validated (correctly) against a DTD or XML Schema. While it is useful for a document to be valid, it is not vital. In fact, many XML documents are created and used daily without ever going near a schema or DTD.
When you validate a web language like HTML, XML, or CSS, you are checking it against the standard for that language. In most cases, the standard you want to validate against is defined at the top of the document in the DTD. For example, to write a valid HTML 4 document you need to have the following doctype at the top of your document:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
This tells the browser or other user agent that you are writing HTML 4.01 Transitional HTML. And if you validated it in an HTML validator, that is the doctype or DTD that the validator would check it against.
How to Validate HTML, CSS, and XML
The easiest way to validate HTML and CSS is to use an online validator. Most web browsers do not check that the HTML or CSS is valid before attempting to render it. But it is still important to write valid HTML and CSS because invalid code can introduce errors and inconsistencies in how your pages are rendered.
You can also validate your XML using an online tool like the W3C validator, but if your XML doesn't have a doctype defined, it will only verify that your document is well-formed, and not if it is valid or not.
This may seem confusing, but it makes sense if you think about it. Validating a web document is checking it against a pre-defined standard. If you don't define what standard you are using for your XML, there is nothing to validate against.
The other way to validate an XML document is with a validating parser. This is an XML user agent that checks the XML against its DTD. If there is no DTD defined, then a validating parser will just make sure the XML is well-formed.
A visit is a series of requests from the same uniquely identified individual (a visitor) in a set period of time. A visit is made up of several hits and pageviews and often shows a track through a site.
Visits are usually defined as a set period of time, typically 24 hours or 1 hour. For example, if you go to a certain site 3 times in the same day, if their visit period is 24 hours, your 3 pageviews will be ascribed to 1 visit. But if their visit period is 1 hour, and you visited in 3 different hours, your pageviews will be logged as 3 different visits. It's important to know what the log analysis software defines as a visit period.
Visits are calculated by setting a cookie or web bug on the customer. Some Web analytics packages will calculate visits based on Web logs, without setting a cookie, but these, while useful, are not going to be as accurate as the cookied method. Because of dynamic IPing and other anonymizing techniques, non-cookied visits are based on educated guesses.
A visitor is a unique individual coming to a website.
The best way to identify a visitor is with a cookie that identifies that unique system. But many Web analytics packages try to identify visitors through IP address and browser/OS information. It is possible to get decent information without a cookie, but cookies are more accurate.
The number of visitors to your website is an excellent metric regarding how popular your site is. The more visitors your site has, the more attractive your site will be to advertisers.
A void element is a tag that does not require a closing tag to be valid HTML. The most common void elements are:
WAMP is an acronym that stands for Windows, Apache, MySQL, and PHP (or Perl or Python). It is a Web development platform that defines the Operating System (Windows), Web Server (Apache), database (MySQL), and scripting language (PHP, Perl, or Python).
A web application is much more than just a plain website. In fact, the most interesting web applications are web pages that are nearly indistinguishable from their offline counterparts (from the perspective of the user). Web applications use the web browser as a way of connecting to networked tools and systems.
Web applications are stored on web servers, and use tools like databases, JavaScript (or Ajax or Silverlight), and PHP (or ASP.Net) to deliver experiences beyond the standard web page or web form. A well known web appplications is Google Docs. This is a word processor that is delivered completely inside a web browser.
Benefits of Web Applications
Web applications allow companies to deliver complex programs without a complicated roll-out schedule. Since all you need is a web browser and a URL to the application, most employees will be able to access the application immediately. Web applications store all their data on the server, so users don't need a lot of extra hard drive space to install and use a web application.
Drawbacks of Web Applications
Web applications run inside a web browser, which already has an expected use. Changing that use, by opening windows without controls or other techniques, can confuse the user. Also, many web applications are written with only one web browser (typically Internet Explorer) in mind. While this makes the work easier for the application developer, it can cause problems for users who use any other browser beyond the supported one. Finally, if the data is stored on an external server, and the company running that web application goes out of business, users may lose all their data unexpectedly.
A Web designer is someone who designs Web pages. A Web designer is more focused on the look and feel of a website than how it works, and often uses WYSIWYG editors rather than diving into the HTML directly.
Web designers have the following skills:
Companies looking for Web designers are looking for people with a good aesthetic sense that can build and maintain websites that look good.
Web designers won't be asked to build Web programs or applications or maintain databases for data driven websites.
Web Designer is Used as a Catchall
Some people use the term Web Designer to refer to anyone who does anything on a website. Most freelancers refer to themselves as Web designers.
Be sure to read the job description carefully for any job you are applying for to make sure you meet the requirements.
A Web developer is someone who programs Web pages. A Web developer is more focused on the way a website works than how it looks. They typically use HTML text editors and work with databases and programming languages as well as HTML.
Web developers have the following skills:
Companies looking for Web developers are looking for people with a strong programming skills that can build and maintain websites that function well.
Web developers won't be asked to create the look and feel of a website.
Web Developer is Used to Mean Programmer
Some people use the term Web developer to mean programmer or administrator. Web developers are sometimes asked to do all back-end work and do hardly anything in HTML.
Be sure to read the job description carefully for any job you are applying for to make sure you meet the requirements.
http://endchapter.net is a Web page.
A Web server is a computer that is set up with software and networking capabilities to deliver Web pages on the Internet or an Intranet. Web servers use programs such as Apache or IIS to deliver Web pages over the http protocol.
Web standards is a general term for the formal specifications and rules surrounding building web pages. Web standards are formulated and maintained by the W3C. There are standards for:
Designers that choose to use web standards can create pages that display more consistently in most web browsers.
When you start writing XML, you will hear over and over the two terms "well formed" and valid. They are not the same thing. You can have a well formed XML document that is not valid, and a valid document that is not well formed. Basically, a well formed document is one that meets the minimum criteria for XML processors and validators to read the document.
An XML document consists of text, but the text forms two different things:
When writing well formed XML documents, there are some specific rules you should follow:
You will find that most of the rules that apply to well formed XML also apply to HTML, well XHTML that is. This is because XHTML is HTML that is rewritten to XML specifications.
White space is the empty spaces in a design. White space is used to separate disparate design elements and group similar ones. White space is the lack of graphics or text in the layout.
White space is not always “white” — it is the empty parts of the page, but if the page has a different background color that will be the color of the white space.
White Space Characters
In HTML there are several characters that create white space. They are: a space, a tab, and a carriage return (or linefeed).
Arguably the best known wiki is the Wikipedia an online encyclopedia in wiki format.
A wireframe is a visual representation of a website. It allows designers and developers to present proposed functions, graphic elements, structure, and content of a website with simple line drawings.
A website wireframe typically consists of:
FrontPage, DreamWeaver
The logo EndChapter created for our business was beyond our expectations! It completely transformed our marketing and brand! Thank you!
EndChapter has managed an extremely intricate website for our organization, and we could love them more!
EndChapter oozes with creativity and professionalism. Their talent was affordable and highly impressive!