If you are participating in any of my WordPress and web publishing courses, this article will be added to the required reading list on security.

A single post or Page pageview shows the entire content. A multiple post pageview (multi-post) may show the full content of each post or an excerpt.

Most WordPress Themes automatically display excerpts on specific pageviews such as Archives, Categories, Author, and Search, but leave the decision to show the excerpt or full post on the front page of the site up to the user.

By default, WordPress displays the first 55 words of a post as the excerpt length.

This tutorial covers how WordPress handles excerpts.

Manually Creating Excerpts with the More Feature

On the WordPress Post or page panel toolbar, you will find a More button.

On the visual editor, it is the odd button with two boxes separated by dashes. On the Text Editor it is the button with the word “more.”

To set the excerpt length manually using the more button:

1. Position your cursor at the point you wish the excerpt to end.
2. Click the More button.
3. On the Visual Editor, you will see a thin line and small box with the word “More” inside on the right side.
4. On the Text/HTML Editor, you will see a comment shortcode: <-- more -->.

To see how the except will look, publish the post and switch to the front page of the site. Refresh and the published post will be shown as an excerpt to that point with the words, “Continue reading,” “Read more,” or a similar phrase or symbol. This is set by each WordPress Theme.

To change the position of the More and length of the excerpt:

• For the Visual Editor, edit the post and click and drag the More symbol to where you wish the excerpt to end.
• For the HTML/Text Editor, edit the post and copy and paste the More comment code into the place where you wish the excerpt to end.

To Set An Explicit Excerpt

An explicit excerpt is one that you custom write yourself, introducing the post topic on multiple post pageviews.

To set an explicit or custom excerpt, go to the Post Panel and check the screen for the Excerpt form. If you do not see it below the post textarea or in the sidebar, go to the Screen Options button at the top right corner of the screen. Look for Excerpt and ensure it is checked. Close the Screen Options overlay and the Expert box will be set below the post editing area.

Inside the Excerpt form box, write your excerpt. When you publish the post, the excerpt will be shown on all multiple post pageviews including the front page of the site.

To Change the Full Post to Excerpt on the WordPress Theme

There are times when you will wish to change the entire WordPress Theme to show only excerpts on all multi-post pageviews including the front page. This requires editing of the WordPress Theme.

If you are going to edit the WordPress Theme, it is highly recommended you create a Child Themes, leaving the Parent Theme undisturbed to future-proof it for updates and upgrades. The following includes instructions on how to create a Child Theme in order to change the excerpt template tag.

Following the instructions on Child Themes in the WordPress Codex:

1. Create a new folder for your Child Theme under the wp-content/themes/ directory.
2. Copy and edit the style.css file from the Parent Theme to the Child Theme directory per the Child Theme instructions.
3. Copy the template file you wish to change from the Parent Theme to the Child Theme. In this example, we will use the Front Page template file home.php to set excerpts on the front page of the site. For more on selecting the appropriate template file, see Template Hierarchy.
4. Edit the home.php template file in a text editor or the WordPress Theme Editor.
5. Search for the_content() template tag.
6. Change the_content to the_excerpt.
7. Set any customization in the parameters if necessary. See The Excerpt in the WordPress Codex for specifics.
8. Save the file to the Child Theme Folder.

Test the Theme. If you see excerpts on the front page, you’ve done it right.

There are many ways to set up the excerpt on WordPress Themes. You may change the length of the excerpt. You may wish to change the “Continue Reading” or “Read More” to say “Keep reading, you might like it” or anything you wish.

You may wish to have the excerpts only show on searches, archives, categories, and tags, and full posts on the front or author pageviews. You can use conditional tags and statements to create other conditions in which the Theme will show full posts (with or without the “More” option) or excerpts.

Note that some WordPress Themes are not using the_content or the_excerpt but are using custom select queries and other post queries to generate and display content. Check with your WordPress Theme author for the specifics on how to change the Theme to accommodate excerpts.

Things You Need to Know About Excerpts in WordPress

By default, WordPress displays the first 55 words of a post.

Pages do not have explicit or custom excerpts, but you may set the “More” length. Pages are not traditionally not featured in multiple post pageviews, though they are included in search results with the default excerpt length unless set with the “More” option.

By default, WordPress will not display links or images when using the the_excerpt() template tag in WordPress Themes, which generate 55 words automatically.

Today, a WordPress Theme contains files called template files that hold the architecture of the site and template tags, code that initiates actions within the site and data from the database. The design is applied through a stylesheet, holding the instructions for the colors, images, and look and feel of the entire site.

This tutorial covers the basics of the structure of a WordPress Theme and standard customization options.

The Structure of a WordPress Site

Like all websites today, a WordPress site contains a background area, header, sidebar(s), content area, and footer.

The background area is considered the canvas that the site’s structural and design elements rest. It is usually a solid color, pattern, texture, or a design that does not overwhelm the rest of the content and design elements.

The header area content is set from within the WordPress Administration Panels through the Settings > General for the site title and site tagline.

The header art image is set from within the Appearance > Custom Header Image. WordPress now permits a wide range of images and image sizes to be used as the custom header image, and permits some level of cropping and positioning.

The sidebar(s) contain navigation, information, and design elements that complement the site’s purpose and content. In WordPress, this information is held in WordPress Widgets, modular content elements that can be moved around in the various sidebars, footers, and occasionally the header area. These are accessed and modified in Appearance > Widgets.

The footer is located at the bottom of the site. It usually features the name of the WordPress Theme and its author to give them credit, and the words “Powered By WordPress” with a link to WordPress or WordPress.com. It may also feature footer Widgets accessed through Appearance > Widgets > Footer.

The content area holds the content of the page depending upon the request of the user to view the front page, a Page, a single post, a search, categories, tags, author posts, archives, and other multiple post pageviews.

The Pageviews of WordPress

Pageviews are the different views of a web page based upon the content requested by the user.

Here is a list of the basic pageviews found on WordPress.

• Front Page: This is the front page of the site. Posts on the front page of the site are displayed in reverse chronology. It may be styled the same or differently from the rest of the site based upon the WordPress Theme’s specifications.
• Single Post Pageview: This is the view of a single post on the site. It may look the same or different from the rest of the pageviews.
• Single Page Pageview: This is the view of a single Page, the pseudo-static content of WordPress. It may look the same or different from the rest of the pageviews.
• Multi-post Pageviews: The following are known as multi-post pageviews or multiple post pageviews. The pageviews feature links to multiple posts displayed in reverse chronological order. Some WordPress Themes feature the option to add descriptive text to various multi-post pageviews. The posts may be featured by post title only, post title and excerpt of the post, or the whole post dependent upon the WordPress Theme and administrator specifications.
  • Category Pageview: This is the view of the posts within a specific category. It generally features more than one page with older and newer entries navigation at the bottom of the page. If the Theme permits it, the category pageview will display the description of the category set in the Category Panel.
  • Tag Pageview: This is the view of the posts within a specific tag, a descriptive keyword representing the index words of the site. It generally features more than one page with older and newer entries navigation at the bottom of the page.
  • Author Pageview: This is the view of the posts by a specific author. It generally features more than one page with older and newer entries navigation at the bottom of the page. If there is only one author on a site, there may not be a visible link to the author within the WordPress Theme. Some Themes are designed to show an author byline with a link to the author pageviews when a second author is added to the site. If the Theme permits it, the author pageview will display the description of the author set in the Profile Panel for that author.
  • Search Pageview: This is the view of posts generated by a search on the site. Most WordPress sites use the default search built into WordPress. Some sites integrate Google or another search engine into their site to generate search results.
  • Archive Pageview: This is the view of the posts by a specific date, typically by month though it can be displayed by day, week, month, or year.

Content in WordPress

There are four core ways WordPress manages content: posts, Pages, categories, and tags.

Pages are timeless content, and posts consist of timely content and are organized into category and tag groupings.

Pages

Pages with a capital P are the pseudo-static content web pages in WordPress. They tend to hold timeless content such as About, Contact, Events, Policies, Resources, Links, etc.

Pages are featured in key navigation menus by default on most WordPress Themes.

For more information, see WordPress Pages: Exploring the Pseudo-Static Pages of WordPress, Pages on the WordPress Codex, and Pages verses Posts on WordPress.com Support.

Posts

Posts are for the majority of your content. Posts feature timely content such as announcements, features, articles, photographs, cartoons, and general information.

Posts are grouped by categories and tags, as explained below.

Posts are featured on the front page and multi-post pageviews by default in WordPress. A post page is called a single post pageview and features a post meta data section and comments, if comments are enabled.

Excerpts

Dependent upon the WordPress Theme specifics or user control, posts featured on multiple post pageviews are displayed in full, by post title, or with the post title and an excerpt, typically the first 200 words of the blog post unless the author used the explicit excerpt feature (go to Screen Options and select the Excerpt feature to display it on the post panel).

The front pageview typically features full length posts unless the user has used an explicit excerpt or the More feature.

The More feature is a button on the post toolbar which places a shortcode comment within the post at the cursor position. This code instructs WordPress to stop the excerpt at that point.

Post Meta Data

The post meta data section of a blog post features the time and publishing date of the post, the categories and tags, and the author name in a link to their author archives.

The post meta data may be found under the post title with as little information as the author’s byline, and/or at the bottom of the post before the comments.

The post meta data section is determined by the WordPress Theme and may be different from Theme to Theme.

For more information, see Designing Your Post Meta Data Section on the WordPress Codex.

Comments

Comments are featured only on posts, below the post. By default, they are ordered descending in chronological order.

Comments generally feature the name of the commenter, their website if supplied, the date and time of the comment, and the comment itself. Most modern WordPress Theme support Gravatars which will automatically display the Gravatar of the user if they have registered that email with Gravatar.

When entering information in the comment form, users will also add their email address which is required. This information is not shown by default for the user’s privacy.

Comments may include some HTML tags. Some WordPress Themes feature a list of the allowed HTML tags.

Comments on modern WordPress Themes are displayed using threading, displaying replies to specific comments in relationship to and indented below that comment to assist with reading the chronological path and off topic discussions that may evolve on posts.

Categories

Categories are a site’s table of contents. Most sites should feature 5-12 categories at most, keeping the navigation to core content areas clean and manageable.

Categories can be set from within the Administration Panels on the Post Edit Panel or from within the Category Panel.

Category lists are features differently on each WordPress Theme. They are usually shown by default or added manually with WordPress Widgets. They may also be added to the main navigation through Custom Menus.

Categories for a specific post are always featured in the post meta data section for that post.

For more information, see Categories versus Tags – What’s the Difference and Which One?

Tags

Tags are the index words of the site. They are the keywords someone might use to search for that post or found within the post, just as index words are used in a book.

Tags are added through the WordPress Administration Panels on the Post Edit Panel or from within the Tags Panel.

Tags are featured in the post meta data section for that post, and in WordPress Widgets such as the Tag Cloud Widget.

For more information, see Tags and Tagging in WordPress.

WordPress Widgets and Design Elements

WordPress Widgets are modular design and navigation elements added to the sidebar, footer, and header areas of a WordPress Theme. The number of Widgets and their placement within a Theme is based upon the specifications of that WordPress Theme. Some allow Widgets only in the sidebar. Others allow them in the other areas or restrict the number in each area.

Each Widget features a title area and options to customize that Widget if applicable. The title area is set by default if you do not supply a title for the Widget.

Usually you can use a Widget more than once in the sidebar, footer, or elsewhere, though some WordPress Themes may restrict that.

WordPress Support lists the Widgets available in Widgets & Sidebars. The following is a general description of the most frequently used WordPress Widgets.

• Pages Widget: The Pages Widget lists links to all the Pages on your site. It can be a simple navigation list or a drop down menu. The drop down menu is not recommended as it makes the visitor work harder to find key navigation and information on your site.
• Search Widget: The Search Widget adds a search form where you wish it to appear. Some WordPress Themes feature a search form in a fixed place within the Theme such as in the header. This Widget allows you to add another one elsewhere, such as in the footer or near the bottom of your sidebar to help users search easily from anywhere on your site.
• Categories Widget: This Widget features a link list of the categories on the site. The user may choose from a simple list or a drop down menu. The drop down menu is strongly discouraged as it makes for extra work for the user to click it to see your categories. It also hides the list, masking key information and navigation points for your site’s content.
• Text Widget: The Text Widget is one of the most popular and flexible of the Widgets. You may enter text, Basic HTML, images, and many other things within it. For more details, see WordPress Tips: Exploring the WordPress Text Widget.
• Calendar Widget: The Calendar Widget displays a calendar featuring dates linked to the posts you’ve written on that date. It is not an event or appointment calendar. Few people use this any more as most visitors rarely read a site chronologically. It also serves as a reminder of how often you post, or not.
• Recent Posts Widget: This Widget displays your most recent published posts.
• Top Posts & Pages Widget: This Widget features links to your most popular posts and Pages.
• Recent Comments Widget: This Widget displays the most recent comments on your site. If you have a highly interactive site, this is recommended. If you don’t, use the real estate for something else.
• Tag Cloud Widget: The Tag Cloud Widget displays your tag keywords in a tag cloud or heat map. Tags with the most posts are featured in a larger font size and smaller ones have the least posts. By default, WordPress.com’s tag cloud shows up to 45 of your most popular tags.
• Twitter Widget: This Widget requires a link to a Twitter account. It will display the latest tweets.
• Archives Widget: This Widget is usually enabled by default. It features the months and years that you have been publishing. Each link takes you to the Archive Pageview for that date to see all the posts published that month. This is ideal for personal blogs that are chronologically focused, but serves little purpose for most sites as people don’t know nor care when something was published, they will search by keyword.
• Feed Widgets: There are two feed Widgets, RSS Widget and RSS Links Widget. The RSS Widget displays posts from any feed source. The RSS Links Widget displays the feed options on your site as images and/or text. These Widgets are called RSS, a type of feed. Any feed type will work with these.
• Follow Blog Widget: The Follow Blog Widget adds a subscription option to your site to allow visitors to subscribe to your site for email notifications. They will receive new posts by email.
• Milestone Widget: This Widget allows you to set a goal and provides an automatic count down to the deadline date.
• Image Widget: This image allows you to easily add an image or photograph to your site’s sidebar or footer.
• Meta Widget: The Meta Widget features a list of links to key WordPress sites and a login/log out link. This is an excellent feature to add if your site features multiple contributors. See How to Log Into WordPress.

Custom Menus

The menu navigation area on a WordPress site features links to key areas and information for your site.

By default, it features a link list of Pages.

If the WordPress Theme permits, it can be customized to feature links to anything and anywhere.

To create a custom menu in WordPress:

1. Go to Appearance > Menus.
2. In the form titled Menu Name, type in a unique name for your menu.
3. Click Create Menu.
4. On the left side of the panel, choose which Pages, Categories, Tags, Post Formats, and navigation options.
   • Note: If you do not see all of these options listed, go to Screen Options in the upper right corner of the panel and select these features in Show on screen.
   • If you wish to add a specific link to an internal or external web page or site, use the Custom Links option.
   • As you add each menu option, they will appear in the right side form.
     • You may click and draft these to different positions. Drag an item to the left or right to create sub-menu items.
     • You may also rename the labels.
     • You also remove the menu item.
5. When you have completed the menu, click Save.
6. In the Theme Locations section of the panel, choose the placement of the menu. Some Themes only permit one menu called the Primary Menu.
7. Click Save to complete the process.
8. Go to the front page view of your site to view the results.

If your Theme features a custom menu option in the Widgets, create another Custom Menu with a different name.

1. Go to Appearance > Widgets.
2. Select the Custom Menu Widget and drag it to a place in the sidebar or footer.
3. Go to the front page view of your site to view the results.

How to Log In and Edit Your WordPress Site

The video and tutorial, How to Log Into WordPress, explains the specifics of how to log into your WordPress site from various entry points.

All WordPress Themes also offer an Edit link visible only to logged in users such as administrators, editors, or authors.

Click this link on any post or Page to quickly access it for editing.

Permalinks: The Addresses for Your WordPress Site

A permalink is a “permanent” link to a web page.

In the early days of web publishing and blogging, there was confusion over how to link to a specific post. People would link to the page upon which they found the post, but it wasn’t the actual post but a multiple post pageview featuring many posts. The link would be to page 4 of the list of posts. As the blogger would add more posts, that post would shift to page 5, 6, and so on, and the link would no longer work as the post wasn’t there.

Permalinks were featured on multiple post pageviews near the post title or bottom of the post as a reminder that “this is the link to the post you want.”

Links used to be very ugly: example.com/category/dishes/8094/post-title-21234.html or worse.

Today, WordPress uses Pretty Permalinks to make the addresses easier to read and use.

A typical pretty permalink in WordPress is:

http://lorelleteaches.wordpress.com/2012/09/10/how-to-log-into-wordpress/

It features the domain name of the site, the year, month, date, and the post title.

Permalinks on self-hosted versions of WordPress may be set up to display the year, month, and post title, or any combination there of. It can also be set to display keywords and numbers, if the user prefers.

Permalinks on WordPress.com sites cannot be modified.

The WordPress Loop – The Engine That Makes This All Work

A WordPress Theme is made up of template files holding template tags and conditional tags and queries. It is extended through the use of WordPress Plugins.

Customization to a WordPress Theme is made through the use of a Child Theme, a Theme that overwrites the styles of its “parent” Theme to allow easy updating and upgrading of the main Theme while preserving the user’s customization.

The site design and customization is handled by the stylesheet within the WordPress Theme.

All of this is driven by the WordPress Loop, the engine that makes all of the bits and pieces of WordPress work.

The WordPress Loop, in its most simple form, looks like this with a WordPress Theme’s template files:

<?php if (have_posts()) : 
   while (have_posts()) : 
       the_post(); 
       the_content(); 
   endwhile; endif; ?>

The WordPress Loop works in conjunction with WordPress Template tags to request data from the database and the Theme based upon the user requests. Think of these as if/then conditional statements.

Examples of these if/then statements include:

• If this is the front page, show the front page of the site featuring the most recently published posts in reverse chronological order.
• If this is the single post pageview, show the post.
• If this is a category pageview, show the title as “Archive for the XYZ Category” and display the posts within that category in reverse chronological order.
• If this is the author pageview, show the title as the name of the author, display their profile biography, and display their posts in reverse chronological order.
• If the page sought is not found, show the 404 Page Not Found Error.

The WordPress Loop looks like this in a simple form, generating any pageview on the site.

<header>
<?php get_header(); ?>
</header>
<body><div id=“content”>
<?php if (have_posts()) : 
   while (have_posts()) : 
       the_post(); 
       the_content(); 
   endwhile; endif; ?>
</div>
<div id=“sidebar”>
<?php get_sidebar(); ?>
</div>
<div id=“footer”>
<?php get_footer(); ?>
</div>
</body> 

The get_header, get_sidebar, and get_footer parts of the code are template tags. They are bits of WordPress programming code that instructs the Theme to get the header, sidebar, and footer template files and include them in the generation of the page.

The most basic WordPress Theme may feature a template file called index.php featuring the code above to generate every page on the site. A modern WordPress Theme features the index.php template file as well as the header, footer, and sidebar template files. A sophisticated WordPress Theme would include even more template files to generate the pageviews per the conditions set.

By default, WordPress automatically creates (generates) a pageview based upon the user’s request according to its Template Hierarchy programming.

According to this template file hierarchy, if a template file is requested and not found, WordPress automatically falls back to recognized defaults:

1. If category with an ID number of 42 is requested, WordPress looks for category-42.php.
2. If not found, it go to the category.php template file.
3. If not found, it goes to archive.php.
4. If not found, it goes to index.php to generate the page.

Conditional Tags in WordPress add even more conditions to how a page is displayed.

• If this is the front page, show the custom sidebar for the front page.
• If this is the category page, in the sidebar show a list of posts only found within that category.
• If this is the author page, in the sidebar show a list of posts by only that author.
• If this is a post in the Automobile category, display ads related to cars in the sidebar.

The customization of WordPress with conditional tags is infinite. It is up to you as designer and developer to customize WordPress any way you want.

To see the possible, look for the section on “Study the Twenty-Eleven Theme in WordPress” in What You Most Need to Know About WordPress. The default WordPress Themes that come with the basic installation of WordPress serve as examples of the possible, and are the basis upon which many WordPress Theme designers base their Themes.

For more information on the WordPress Loop and functions, see:

• Template tags
• WordPress Loop
• The WordPress Loop in Action
• Stepping Into Templates
• Stepping Into Template Tags
• Conditional Tags
• Finding Your CSS Styles in WordPress

More on WordPress Bits and Pieces

For more information on the parts and pieces of WordPress, check out:

• What You Most Need to Know About WordPress « Lorelle on WordPress
• What I needed to learn about WordPress
• WordPress Tips
• WordPress Cheat Sheets, Checklists, and Infographics
• WordPress Theme Resources
• WordPress Under the Hood

Well you can.

HongKait offers “Top Web Annotation and Markup Tools,” a huge list of tools that allow you to annotate – write on – web pages. You can highlight sections, draw on them, doodle, whatever.

You can instantly share or save your annotations.

Think of the possibilities. You are working on a WordPress Theme with a client. They can scribble on the page making notes while you are chatting about it on the page at the same time.

Developing a WordPress Plugin? Imagine running tests with this with this level of collaboration. “What if I over it over here? How does this look to you?”

In one example, Layers, the tool allows you to add sticky notes, tweets, maps, videos, and images on web pages. Comments can be public or private. You can invite others to participate in an ongoing discussion of the web page to make it highly collaborative. Oh, this so is going to work out nice for students and clients.

Some of these are online apps, some are downloadable programs, and others are web browser extensions and add-ons. There are tons to choose from.

I’m going to use some of these in future classes to markup homework assignments, labs, etc. And what until my clients see these. Wow!

The first one deals with the most common programming mistakes, a few I’ve done myself. UI craziness and variable naming inconsistencies will often eat up my time as I resolve their issues.

The second article on database development mistakes addresses many of the issues I and others have with dealing with other people’s work. A missing mistake that should be on the list is a lack of inline documentation, the notes a developer should leave to not only remind them of what happened here and why choices were made, but informs future fixers of what is going on. Without these, we have to read the code like a book, and not everyone writes based upon readable standards. We spend too much time playing detective for the simplest of fixes.

A comment in the first article really caught my eye and sums up so much of what causes problems with the code.

This isn’t the tool’s fault — the error is between the keyboard and the chair. On the one hand, it speaks volumes about the quality of these tools that I trust them so much that I lost a lot of my vigilance; on the other hand, it is still my fault that I allow convenience to turn my brain off entirely. I have learned to slow myself down when using code completion and take the extra second or two to ensure that I have made the right choice.

The biggest problem is what is sitting in the chair – remember that next time you start blaming.

Most browser-integration tools are browser specific, compared to online tools which sit in web pages, accessible through any browser. Browser-integration tools include extensions, add-ons, and bookmarklets.

How to Add an Extension or Add-on to Your Web Browser

To add an extension or add-on tool to your browser:

• Go to the page or site for your browser’s extensions or add-ons:
  • Add-ons for Firefox
  • Chrome Web Store – Extensions
  • Internet Explorer Browser Extensions
  • Safari Extensions Gallery
  • Extensions – Opera add-ons
• Follow the instructions.

How to Add a Browser Bookmarklet to Your Web Browser

Typically, browser bookmarklets are not browser specific and can be used on any browser supporting JavaScript. Sometimes called "favelets," a bookmarklet is a script that takes action on the page you are viewing. The most common bookmarklets allow you to save a site to your online bookmarks site or share a web page with a social network. Many bookmarklets are tools to help you view the underlying code and technologies of a web page as well as to test and evaluate it.

Browser bookmarklets are stored in your browser bookmark toolbar or collection. To add a bookmarklet to your bookmark toolbar:

1. Click and drag the indicated button or link to your browser toolbar.
2. To activate the bookmarklet, click the button or link on your browser toolbar and follow its instructions.
3. To quit/turn off the bookmarklet, refresh the page or follow the instructions.

Browser Add-ons and Extensions for Evaluating, Inspecting, and Testing Web Pages

• Firebug
• Firefox Web Developer Toolbar
• Google Chrome Developer Tools
• Internet Explorer Web Developer Toolbar

Online Web Testing, Evaluation, and Validation Tools

• The W3C Markup Validation Service
• The W3C CSS Validation Service
• WAVE – Web Accessibility Evaluation Tool
• BuiltWith Technology Lookup
• The HTML5 test – How well does your browser support HTML5?
• Juicy Studio: CSS Analyser
• WDG HTML Validator
• Web Page Analyzer

Validating and Testing for Web Accessibility

As of March 2012, it is federal law that web pages meet federal laws for Equal Access and the Americans With Disabilities Act.

• IDI Web Accessibility Checker : Web Accessibility Checker
• Functional Accessibility Evaluator – University of Iowa
• Dr. Watson
• WAVE – Web Accessibility Evaluation Tool
• Web Accessibility: AccessColor Tool- free online color contrast analyser
• Welcome to the HiSoftware Cynthia Says Portal
• Pink Juice Reports
• HERA – Testing Accessibility with Style

Bookmarklets for Evaluating and Testing Web Pages

• Resizer – Codebomber
• Firebug Lite : Firebug
• Aardvark Firefox Extension
• maki : a free web design mock-up tool for pixel perfect layouts
• slayeroffice – Favelet Suite
• 32 Indispensable Bookmarklets for Web Developers and Designers – Speckyboy Design Magazine
• Favelets For The W3C Markup Validation Service
• Implementing WAVE into web pages, browsers, or other tools
• MRI – inspects CSS selectors on a web page
• XRAY – explores the "bones" of the web page
• Quick Page Accessibility Tester – Accessibility-Checking Favelets – Accessify
• Firefox Resize Bookmarklet: Now With Re-positioning
• Allan Jardine – Reflections – Design
• Wirify – The web as wireframes
• Web Development Bookmarklets Collection

Browser Testing

Browser compatibility doesn’t start and stop with testing to see if your web pages work in Internet Explorer. They must be tested across a variety of browsers as well as web viewing environments such as Web television, mobile, tablets, etc.

• Check Browser Compatibility, Cross Platform Browser Test – Browsershots
• iPad Peek – What does your web page look like on iPad
• IE NetRenderer – Browser Compatibility Check -
• mobiReady – dotMobi compliance & mobileOK checker
• resizeMyBrowser
• Support Details tests yhour browser – Imulus Tech Support Management
• Pingdom Tools
• Browser testing | Adobe BrowserLab

Collection of Lorelle’s Favorite Bookmarks and Bookmarklets for Web Development

I’ve put together a web page with my favorite web design and web development bookmarks and bookmarklets for you to see and use. These have been collected from around the web and are shared for educational purposes only with students of Lorelle VanFossen.

To use these, click and drag the link to your browser toolbar or view the source code and save this list as an html file and use the bookmark import feature of your browser to import the file.

• View the source code of a web page.
• How to save a web page to your computer
• How to view a saved web page on your computer
• How to open a web page in your text editor
• How to view the CSS/Stylesheet for a web page
• How to inspect the HTML and CSS of a web page
• How to view and edit a web page at the same time

To begin this tutorial, have your web browser and text editor open on your computer. It does not matter which browser or text editor you are using. The process is basically the same.

How to view the source code of a web page

1. Go to a web page such as the test page for the class, Welcome to Lorelle VanFossen CTEC 122 HTML Fundamentals Class on the Clark Web Server.
2. Right click on an empty space on the web page and choose View Page Source or View Source.
3. The resulting popup window (or tab) will show you the underlying HTML structure of the page.
4. You may save this to your hard drive or go back and save the entire web page to your computer.

How to save a web page to your computer

1. Go to a web page such as the test page for the class, Welcome to Lorelle VanFossen CTEC 122 HTML Fundamentals Class on the Clark Web Server.
2. Right click on an empty space on the web page and choose Save Page As or Save As.
3. Choose a file name to remind you of the purpose or content of the page.
4. Save the web page to an appropriate spot on your computer’s hard drive, such as with the rest of your class materials.

How to view a saved web page on your computer

1. In a file manager, locate the HTML version of the page in the folder where you saved it.
2. You will find the HTML page file and a folder with the same name as the web page you saved. Images and supporting code and content are found in that folder.
3. Double click on the HTML page.
4. The page will appear in your browser tabs.

How to open a web page in your text editor

1. From within the Text Editor, choose File > Open, just as you would with a word processor.
2. In the file window, locate the HTML version of the page in the folder where you saved it.
3. Choose the file and click Open or Okay.
4. The result will not be the pretty web page but the HTML source code for the web page.
5. NOTE: If you choose to experiment and edit the web page, please save it with a different name or version number.

How to view the CSS/Stylesheet for a web page

1. From within the Text Editor, choose File > Open, just as you would with a word processor.
2. In the file window, locate the HTML version of the page in the folder where you saved it.
3. In the same folder or in the accompanying folder, look for a file with the extension .css. There may be multiple CSS files. Choose the one named styles.css, stylesheet.css, or another similar name.
4. Choose the file and click Open or Okay.
5. The result will be the CSS styles for the web page.
6. NOTE: If you choose to experiment and edit the stylesheet, please save it with a different name or version number.

How to inspect the HTML and CSS of a web page

Most web browsers come with some form of web developer tool built-in. You may also add web browser extensions to inspect the HTML, CSS, and underlying technologies of a web page. Check the browser documentation as well as the source documentation from the list below.

• Firebug
• Web Developer
• Google Chrome Web Developer Tools
• Internet Explorer Web Developer Toolbar

You can find more "secret" web development tools in an article by Andi Smith with tips on which ones are built-in and how to use them. Also check out 15 Helpful In-Browser Web Development Tools from Smashing Magazine.

How to view and edit a web page at the same time

1. Open your web browser and text editor.
   • If you have a large screen or more than one screen, move the web browser to one and the text editor to another.
   • If you do not have a large screen, use a keyboard shortcut like ALT+TAB or Command+TAB to quickly switch between them, or position the windows next to each other so they split the screen.
2. Open the file you wish to edit in the text editor and in the web browser (File > Open).
3. Make edits to the file in the text editor and save them.
4. Switch focus to the web browser and reload/refresh the web page (F5).
5. Continue making edits and switching to the browser to check your results.

Want to make this process even easier? 

In this tutorial on setting the text editor default in Firefox by SpiceWorks, you can view the page source and edit it in your text editor quickly and easily.

1. Open Firefox and type in about:config into the address bar.
2. Click that you will be careful
3. In the Filter or Search, type view_source.editor. Three items will be in the results.
4. Double click view_source.editor.external.
5. Change the value to TRUE by double clicking it or choosing to edit.
6. Double click view_source.editor.path
7. Change the path to that of your editor. If you are using Notepad++, it would be c:\Program%20Files%20(x86)\Notepad++\notepad++.exe. NOTE: Firefox does not like the spaces in between the letters. Use %20 instead of spaces. It may take some playing around with the link, but it does work.
8. Close Firefox and reload it.

Firefox should now be configured to open the page source in your text editor.

To use this feature, you can copy the HTML or CSS you wish to experiment with and paste it into your web page or a test page, or you can save it to your computer along with the web page to edit and experiment with it there. Or, if it is your own web page, make the appropriate changes and upload it to your server.

Other tutorials on how to do this include:

• View Webpage Source Code in Your Favorite Text Editor – Firefox – How-To Geek
• Tip: Change Default Text Editor in Fx | Firefox Extension Guru’s Blog

There are five basic forms of links on a web page.

1. External Links
2. Internal Links
3. Jump Links
4. Image/Multimedia Links
5. Email Links

Link Basics

Links are the gateway to the web, the interconnected parts of the web that allows a web user to easily move from document to document.

A link consists of the following HTML tag structure.

<a title="Link to article title." href="http://example.com/article.html">Anchor Text</a>

1. a: The HTML Anchor tag.
2. title: It is required by US federal law and international law that all links have a descriptive title property. The value text must describe the destination link in a way that will inform the user of what the destination material is about and help them decide to click through. It should be no more than a few words and written in sentence form, a simple instructional form such as “Link to article on links.” This is read out loud by screen readers.
3. href: The Hypertext Reference is the destination link. In general, it is typically an absolute link written with the full http: address such as http//example.com/article.html.
4. Anchor Text: This is the text which the HTML Anchor tag wraps around. It is the visible element of the tag on the web page.

A link has five states:

1. Link – Unvisited link – a:link
2. Active – The user clicked the link – a:active
3. Hover – The user hovers their mouse over the link – a:hover
4. Visited – The user visited the link – a:visited
5. Focus – Visible when the user uses the Tab key to navigate the web page – a:focus

For the most part, most web designs only include the first four states.

Each of these states, called pseudo-classes, may be styled with CSS for the following:

• Underline – text-decoration: underline;
• Color – color: #ff123;
• Background – background-color: #d0d0d0;
• Border – border-bottom: 2px solid #a979c3;
• Font-weight – font-weight:normal;
• Margins and Padding – margin: 10px; padding: 5px; (used when links are design elements not article content)

An example of styling links in a CSS stylesheet might be:

a:link { color:#CC33FF; }
a:active { color:#FF33CC; border: 1px dashed #A3A3A3; }
a:hover { color:#B3002D; text-decoration: underline; }
a:visited { color:#003CF0; }

In the past, link targets were acceptable, the process of adding code to a link to force its behavior upon the user. This technique is now deprecated (not used). For history, however, the four link targets were:

• _blank – Opened link in a new window or tab
  <a title="Link" href="http://example.com/" target="_blank">link
• _self – Loaded the link in the current page (window or tab)
  <a title="Link" href="http://example.com/" target="_self">link
• _parent – Loaded the page into a parent frame (a deprecated division of the page)
  <a title="Link" href="http://example.com/" target="_parent">link
• _top – Loaded the page into the current window or tab, removing all frames (page divisions)
  <a title="Link" href="http://example.com/" target="_top">link

While there is still some debate about the blank target, it is a deprecated form, breaks web accessibility standards (and laws in some countries), and takes control away from the user. It should not be used unless absolutely necessary. A necessary usage would be for a web page tutorial with the demo forced open in a tab or window so the user could compare the two pieces of information. A warning is required as noted under External Links.

Things you should know about styling links:

• By default, links are blue and underlined. Links should be the only thing underlined on a web page. Text should not be underlined or blue as users expect these to be links.
• It is required that all links to the root domain of a web address, such as http://example.com, end with a forward slash such as http://example.com/. This does not apply to a web page address as the domain address is already closed, such as http://example.com/article.html.
• While it is considered acceptable to link to a single word, consider two to six words (not counting articles like to, it, they, etc.) in the anchor text to help the user find the link.
• Keep link styles simple and clean to improve readability of text.
• Keep link styles consistent throughout the website to help visitors recognize a link in your design.
• When using a link in a sentence, make sure to exclude punctuation.
• Link dumps are the equivalent of pooping on your web page. When you leave a link such as http://www.useit.com/alertbox/20040510.html on a web page, it is ugly and hard to read. A properly formed HTML link must be in the form of linked text such as this article, The Definitive Guide To Styling Web Links from Smashing Magazine.
• Tests should be done with colors to ensure the link colors have enough color contrast against the background colors to be clearly visible.
• Take care in adding padding, margins, backgrounds, and other design elements to links in the different states. If padding is added to the hover state but not the link state, the link will shift and move on the page. The same applies to making the hover state bold when the link is not. Keep the styles consistent through the various states.
• It is acceptable to use a bottom border or the underline text-decoration to create the underline on a link.
• It is acceptable that the underline appears only when the user hovers over the link, not in the link state.
• If a link design element is not specified, most browsers will add design defaults such as a border or underline.
• Links can be anywhere, not just in the content. They are in link lists, menus, navigation, headers, footers, images, call-to-action buttons – anywhere. Design them accordingly with the pseudo classes.

For more information on links, see the Link References and Resources section at the bottom of this document.

Return to the top ↑

External Links

External links are links to other websites and web pages.

While most people assume that a link inside the content area of a web page links to an external link, it is not always clear. Some web page designs incorporate a visual clue that the link leaves the site, giving users a choice to keep reading or visiting the site and returning.

Examples of visual clues of an external link include a link like this (external site), or a visual graphic↑ created as an HTML Character Entity or background image.

Links to files must feature words or symbols to denote that the link does not behave normally but is actually a download link such as our class syllabus (PDF).

As noted in the introduction, link targets are deprecated, therefore not an acceptable form in this class.

Return to the top ↑

Internal Links

Internal links, commonly called intrasite links, are links that link to web pages within the same site domain.

In the past, it was acceptable to use a link format called relative links. Absolute links are written with the full http:// URL structure. Relative links are written in “relationship” to the current location of the web page in relationship to the directories above and below it.

This technique hearkens back to traditional static web page structures when web pages were sorted into folders and shortcuts were made to the URL path. Here are some examples:

• http://example.com/ – Absolute link to the root domain name.
• http://example.com/web/article.html – Absolute link to the article from the root domain name and the “web” subdirectory or subfolder.
• /web/article.html – Relative link to the “article” web page below the “web” directory.
• /web/services/article.html – Relative link from the current web page to the “article” web page under the “services” subdirectory of “web.”
• article.html – Relative link to the “article” web page in the same directory as the web page.
• ../article.html – Relative link to a directory one up from where the current web page resides.
• ../web/article.html – Relative link to a directory one up from where the current web page resides and one down (the “web” directory).
• ../../article.html – Relative link two directories up from where the current web page resides.

As you can see, this structure is hard to read and harder to remember. With the arrival of dynamic websites where programming replaces static old fashioned static HTML directories, most internal links are now absolute. We will use absolute links in the class unless specifically assigned.

Internal Links to Downloadable Files

In addition to linking web pages within a website, internal links are used to link to files for downloading. All linked files must have a recognizable file extension such as jpg, gif, doc, pdf, etc. File names should not have periods, commas, slashes, or other punctuation. They may have dashes, underlines, tildes (squiggles ~), and spaces (though spaces are considered bad form for older browsers).

The format for linking to a downloadable file is the same as creating a web page links.

<a title="Link to article title." href="http://example.com/story.pdf">Anchor Text (PDF)</a>

Per the examples in External Links, downloadable file links must have an indication that the link will behave differently from a typical web page link.

Return to the top ↑

Jump Links

Jump Links are links that jump the user within a document or to a specific place within that document. This document features many jump links such as a jump link to the External Links section of the document.

The format for a jump link is as follows:

<a href="#external" title="Jump to External Link section.">External Links</a>

Note that the link is a relative link with the # (pound or number sign) as the “address” of the link followed by the identifier.

There are two ways to create a jump link within a document. For the same above link example, you could use either of the following two examples as the destination for that link.

The Anchor HTML tag has a property called name, designating the name of a position or element on the page. Rarely used but not yet deprecated, it is usually placed on a line above where you wish the user to land.

<a name="external"></a>

Current HTML versions honor the ID property of any HTML tag as a jump link “name” position, the preferred method for creating a jump link destination.

<h2 id="external">External Links</h2>

The anchor name (aka ID) must have a value that is unique and not repeated elsewhere on the page, and must start with a letter of the alphabet, not a number. It may contain a number such as header-2 or header_2, but it cannot have a space in the name.

A jump link to a link on another web page marked with the property ID would look like this:

<a href="http://example.com/article.html#external" title="Jump to External Link section on article.">External Links</a>

Another common link jump feature is to jump back to the top of the current web page, a welcome jump link on especially long web pages with table of contents at the top or some other key information. Using either the Anchor HTML name destination or ID property is acceptable, but using the ID is preferred such as this jump to the top link where you will find a table of contents list featuring jump links to the different sections of this document. Check the source code to see how those are formatted.

Return to the top ↑

Image and Multimedia Links

Images feature a “link” to their destination on the web server or web to where they are stored. They can also feature a link around them to click to a larger view of the image or to a destination represented by the image. Let’s start with the latter.

<a href="http://example.com/ballarticle.html" title="Article about red balls.">

The image is wrapped by an Anchor tag. If the user clicks on the image, they would open the article about red balls.

The image HTML tag also contains a link to the image, set by <img src>, representing image source.

Video, audio, and other multimedia also contains links within their HTML tags such as <object and <video>. We will be discussing these later when we work on embedding multimedia.

Return to the top ↑

Email Links

Email links are links to email addresses which trigger the default email program when clicked.

<a href="mailto:lorelleonwordpress@gmail.com" title="Email Lorelle.">Email me</a>

The mailto: replaces http:// as the protocol for the email address.

Unfortunately, placing your email address on a web page risks exposure to email scrapers and harvesters, bots that search the web collecting email addresses for spam (bad) purposes such as junk email. It is traditional that the email address is obfuscated, hidden in plain sight.

Once obfuscated, the above code would look like this:

<a href="mailto:lorelleonwordpress@gmail.com" title="Email Lorelle.">Email me</a>

These are HTML Character Entities, code that the web browser recognizes and converts into readable context, in this case, English. See Email Obfuscation Tools and Scripts on Lorelle Teaches WordPress and More for details and examples of obfuscation tools.

Return to the top ↑

Link References and Resources

• Links in HTML documents – W3C
• The Definitive Guide To Styling Web Links | Smashing Magazine
• Designing Hyperlinks: Tips and Best Practices
• Styling weblinks with CSS – t3node
• Visualizing Links: 7 Design Guidelines (Jakob Nielsen’s Alertbox)
• learn web standards – styling links
• Absolute vs. Relative Paths/Links | CoffeeCup Software
• Relative URLs – WebReference

I’m sharing a lot of the tutorials and guides I created for the class here which you can find in various categories but specifically under the HTML tag.

I’d like to share with you one of the great tools I uncovered. It’s called Dirty Markup and describes itself as the “Tidy and Beautify your HTML, CSS, and JavaScript code tool.”

Dirty Markup cleans up your markup. It’s that simple, but it is more than simple.

There are a lot of TiDY programs and HTML and CSS cleaners out there. What makes Dirty Markup distinctive is the ease of use and clean interface. It also cleans up HTML, CSS, and JavaScript, whereas others do only one or two things.

What it does not do is “clean” the CSS up to alphabetize it, order it, or optimize it for style grouping and shorthand. It just makes it easy to read.

Cleaning Up Your Code

When it comes to code, there is cleaning and optimization.

Cleaning your HTML and CSS involves several tasks:

• Tidying up your code so it is properly formatted with indention.
• Removing unnecessary and unwanted spaces and lines.
• Fixing up small coding mistakes such as forgotten or unnecessary semi-colons or empty containers {}, or identifying those errors to help you fix them.
• Grouping the same CSS styles into a single declaration.
• Using CSS shorthand to combine multiple lines of related styles.

The last two are rarely done by CSS cleaners, though some claim the feature. They only look for margin and padding, sometimes border, styles to consolidate. The programs will not sort through the styles and group all selectors with the same style together. That’s part of the manual labor of CSS.

If you have ever run into a client who insists upon writing content or creating web pages in Word or another word processor, WordOff is a savior. It strips away all of the unnecessary HTML and styles from Word documents and leaves them fairly well cleaned up and ready to work with in clean HTML.

HTML and CSS optimization is a form of cleaning, but its goal is to strip out EVERYTHING unwanted and unnecessary. In extreme optimization, all spaces and line breaks are removed to reduce the file sizes. Every character and space adds up. The theory is that if you remove all of the excess, it will shrink down the file size.

While this is true, few web pages today need this extreme optimization. Most web pages today are dynamically generated with content from databases, thus the size of the actual files being used is small, holding the HTML framework and database requests. However, if you are running a large and active site, HTML and CSS optimization might be a good idea to save space and speed everywhere.

Here are some reference articles to help you with cleaning, sorting, grouping, and using shorthand with your CSS.

• CSS Shorthand Guide
• CSS Property Ordering: Group Similar? Or Alphabetical? | Impressive Webs
• 7 Principles Of Clean And Optimized CSS Code | Smashing Coding
• Efficient CSS with shorthand properties

The following are more resource and reference articles to help you learn more about CSS and the tools that are available to help clean it up, along with your HTML.

• List of CSS Tools | Smashing Coding
• 18 CSS Compression Tools and Techniques | Design Shack
• 10 Tips for Writing Better CSS | Tips
• Clean CSS – A Resource for Web Designers – Optimize and Format your CSS
• 15 CSS Habits to Develop for Frustration-Free Coding – Noupe
• CSS3 Exciting Functions and Features: 30+ Useful Tutorials – Noupe
• Ten CSS tricks you may not know
• 250+ Resources to Help You Become a CSS Expert | Webdesigner Depot
• 12 Principles For Keeping Your Code Clean | Smashing Coding
• What Beautiful HTML Code Looks Like | CSS-Tricks
• Fix My HTML
• WordOff (Cleans MS Word-generated HTML Pages)

There programs designed to "tidy" your HTML and CSS into a format that meets typical standards for code layout. These take hard-to-read markup (code) and clean them up into a consistent format.

These tidy programs will not fix your broken code, but they may identify errors to help you fix it yourself.

Tidy programs were originally created by Dave Raggett to help clean up the HTML code. HTML TIDY now supports HTML5 and HTML exported from Google Docs, Word, and other publishing programs.

There is now a community supporting TIDY and you can learn more on TIDY Sourceforge Project.

There are also CSS TIDY programs. These work the same as the HTML versions. They include: CSSTidy and CSS Formatter and Optimiser/Optimizer (Online).

TIDY is available for cleaning up online or offline, and is incorporated into many text editors and programming editors. it is available for a variety of operating systems and in different programming languages such as Java, Perl, and Python.

To use these, follow the instructions provided by the developer. Always save a backup of the original file, called "about.bak" or something similar, just in case.

For online versions, it is as simple as uploading the file to be cleaned or pasting the file contents into the form. Copy the cleaned code and paste it into a copy of the file name or create a new version of the file and rename it to the desired name.

• Downloadable Versions:
  • Download TIDY for Windows, Mac, and Linux
  • HTML Tidy for Windows – HTML Tidy for Windows
  • TidyGUI (Windows)
  • Balthisar Tidy (MAC OS X)
• Online Versions:
  • HTML tidy service – W3
  • HTML Tidy Online – Infohound
  • The Dumb Terminal TIDY and HTML Validation
  • Tidy Online
• Browser Add-ons:
  • Html Validator :: Add-ons for Firefox
  • Chrome – HTML Validator
  • Chrome – HTML Tidy Browser Extension

Learn More About TIDY

• Dave Raggett’s Introduction to HTML
• HTML Slidy – Tutorial on creating Slide Shows in XHTML by Dave Raggett
• HTML Tidy – Frequently Asked Questions
• Clean up your Web pages with HTML TIDY
• CSE HTML Validator Help

WordPress Codex PHP and Programming References

• Automated Testing
• Conditional Tags
• Data Validation
• Debugging in WordPress
• Developer Documentation
• Function Reference
• Include Tags
• Plugin API
• Plugin Resources
• Query Overview
• Stepping Into Template Tags
• Stepping Into Templates
• Template Tags
• Anatomy of a Template Tag
• How to Pass Tag Parameters
• Templates
• The Loop
• The Loop in Action
• Using Subversion
• Writing a Plugin

Other WordPress and PHP References and Resources

• Using PHP Inside Content of WordPress Blogs
• WordPress functions.php Template with 15 Essential Custom Functions | Digging into WordPress
• Simple Debugging with WordPress | Fuel Your Coding
• Mastering Conditional Statements and Tags for Tweaking WordPress Blogs | Wptuts+
• Using PHP includes with WordPress — 45royale Inc. — A web design studio in Atlanta, Georgia
• Execute PHP in WordPress post, page and Widget Sidebar
• How to Allow PHP in WordPress Posts and Pages
• 25+ Extremely Useful Tricks for the WordPress Functions File
• WordPress functions.php Snippets | WP FUNCTION ME
• WordPress PHPXref – PHP Cross Reference of WordPress – Yoast

1. WordPress Internals: How WordPress Boots Up
2. WordPress Internals: How WordPress Boots Up Part 2
3. WordPress Internals: How WordPress Boots Up Part 3 – Theme.fm

As a visitor lands on a web page on a WordPress site, the browser begins the process of loading the visitor request to view a specific page. On that web page, there are codes that instruct WordPress to pull information from the site design files called WordPress Theme template files, from WordPress Plugins, from the database, and other code requests to literally build a viewable page instantly for the visitor. These articles dig deeply into how WordPress code works with all the various programs and options to generate that page.