Forms: The Real Connection to the User

A form allows a user to enter data that is sent to a server for processing.
Wikipedia

Forms on WordPress have the same limitations that an HTML form has. Granted, WordPress comes with a built-in form-making tool to make a contact form, and a tutorial for how to use that can be found in the “More Information” section below, but that’s not what I’ll be talking about.

WordPress also has numerous Plugins that allow you to utilize a tool for creating custom forms, or you could create your own with some HTML. If you just install a Plugin, the creation process is dictated by that specific Plugin, so in this tutorial I’ll be talking about making forms with raw HTML.

What Can a Form do?

A form consists of a number of varying input types, that you supply to the user, in hopes of receiving feedback. There are 23 different input types, along with the “select” element for creating a drop-down list. The full list of input types can be found on an HTML input tutorial page.

Since forms have so many input types, the applications for their use are almost endless. You could create an embedded calculator to determine a person’s BMI (Body Mass Index), or you could use a form to have users complete a survey. You could even use a form to allow users to alter program variables for software that you are running.

How do I Make an HTML form?

Technical Cafe actually has a great video that goes over the basics of creating an HTML form. Just watch the video below, and you can apply the basic input types they talk about with other input types to fully utilize the form creation possibilities of HTML.

More Information

• Contact Form – WordPress
• Ninja Forms Plugin
• Form Maker Plugin

WordPress Words: DIV

A “DIV” is an HTML element that divides sections of your WordPress site.

Example: A user can customize their site by adding DIV tags around their content sections in the text editor. Then they can add custom CSS to their DIV’s by going to the Theme Editor in
Appearance–>Editor–>style.css and adding a new line in the file.

.main-grid-content {display:inline-block;background-color:#FFF;}

About the Word

The DIV tag in HTML is used widely on most websites today. By default, a DIV is a block level element, which means it will take up all of the horizontal space  in its current container. In WordPress DIV’s are used to create new sections of content within your site, that may be linked to current classes or new ones.

New sections can help you separate portions of your site to add embedded maps, special offers, promotions, contact information, images and other content.

For More Information

• MDN HTML Element: <div>
• How to Use DIV Tags in WordPress
• DIV Shortcode Plugin
• How to Use a DIV With WordPress

Web Accessibility: How Screen Readers Read a Website

Screen readers are assisting eyes of a screen that uses verbal translation. Screen Readers work by translating screen text into computerized speech so that a person can listen to the screen content. Currently these audio devices read content is a linear format.

Experienced screen interface users have concocted a few methods as ways to “skim” the web content. Some methods include: Using the links to parachute from link to link. Using Headings to bungee jump to other Headings- where Headings available.

When Web developers conveniently define these element, visitors can use ARIA Landmarks and HTML5 sectioning tags to navigate through a site.

Web Accessibility: Lists

Why should we use lists? Why are lists important to web accessibility? How do are lists need to be structured in compliance with web accessibility laws?

Using ul, ol, and dl elements for defining list content ensures users with disabilities can easily distinguish a list from the rest of the content and move between items of a list and between lists themselves. You should write link text that clearly communicates the target of the link making navigation easier for all users. Using link lists also makes it easier to find and update links on web resources.

According to the Web Accessibility Guidelines (WAC), website designers and developers are required to:

WordPress Word: PHP

PHP is a recursive acronym for Hypertext Preprocessor. Its main focus is server side scripting which is specifically suited for web developers to write dynamic pages quickly.
PHP Manual – What is PHP?

How Does PHP Work?

When someone visits your PHP webpage, your web server processes the PHP code. It then determines which parts it needs to show to visitors. This includes content and pictures and hides file operations.  Then translates your PHP into HTML. After it translates into HTML, this sends the webpage to your visitor’s web browser. This means that PHP is a powerful behind the scenes scripting language that your visitor’s wont see.

All WordPress sites use PHP to process the data and generate a web page. Code snippets created with PHP, JavaScript, and other web programming languages used in the core of WordPress for redundant and frequently accessed programming are called Template Tags.

Web Accessibility: Providing Descriptive Titles for Web Pages

The objective of this technique is to give each Web page a descriptive title. Descriptive titles help users find content, orient themselves within it, and navigate through it. A descriptive title allows a user to easily identify what Web page they are using and to tell when the Web page has changed.
W3C Working Group Note

Having a descriptive title for web pages is vital for many reasons, but according to the W3C Working Group Note, it is especially important in regards to web accessibility practices and guidelines.

Tutorial: How to Create a Link List

Links are a vital part of the World Wide Web. Anything can be made into a link, from words and phrases to images. A link list is, as the name implies, a list of links. In HTML, a list of links can be easily coded with <ul>, <ol>, <li>, and <a> tags. In WordPress, these are the same exact tags used to create a link list inside a post.

In this tutorial, I will walk you through the process on how to create a link list inside a post. Lorelle’s article, “The Art of List Making,” is a valuable resource on making link lists and it serves as very useful information for this tutorial.

In this tutorial, I will guide you through creating three different types of link lists in both the text and visual editors: the unordered list, the ordered list, and the nested list.

WordPress Words: HTML

HTML, or Hypertext Markup Language, is a markup language used to describe the semantic content of web pages. It is usually used with CSS and/or JavaScript. WordPress renders web pages to conform to the HTML5 standard. The standard is set by the World Wide Web Consortium.
W3C.org

The term HTML stands for Hypertext Markup Language. This is the language that the browser understands in order to bring you the contents of you web page. According to the article “HTML- HyperText Markup Language” on Webopedia, “HTML defines the structure and layout of a Web document by using a variety of tags and attributes.”

HTML consists of tags that hold the design and structural elements of a web page such as the header, headings, lists, images, and content in general. CSS (Cascading Style Sheets) hold the instructions to design the HTML architecture of a site, influencing colors, positioning, size, and design elements.

HTML in WordPress

HTML is the underlying architecture of a web page. In WordPress, HTML is found in WordPress Themes, holding the PHP and WordPress code to generate and display the web page.

HTML is generated when creating a post or Page in WordPress. The user has two choices when creating content in WordPress, using the Visual Editor that hides the HTML tags, or using the Text Editor that displays the HTML tags.

In the post or Page Edit Screen, there are two tabs above the content and toolbar area to the right labeled Visual and Text. The Visual Editor is where you can type in what it is you would like to say, and then WordPress does all the code for you automatically. The Text tab is the “behind the scenes” of what you’ve written in the visual editor. This will show you where all the tags that are surrounding your tags and giving them certain attributes.

Adding Some Style

HTML allows you to build a base structure of how you want your page to look. You can think of HTML as the bones of your website. However, without Cascading Style Sheets (CSS) you’re websites appeal may fall flat.  Alexandrea Chaudoin wrote an article for ClarkWP about what CSS is, and what it can do to give your site the extra push it deserves.

More information on HTML

• WordPress Support: Beginning HTML
• WordPress Codex: Writing Code in Your Posts
• Webopedia: HTML- HyperText Markup Language
• YouTube Video: WordPress: Tip on How to insert HTML Code

Related Articles:

• WordPress Words: CSS
• WordPress Words: Blockquotes

WordPress Words: CSS

Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.
World Wide Web Consortium (W3)

Example: “The CSS in this part of the code is not coded correctly. Are you sure that the color of that Page is correct in the CSS?”

According to the W3C (or World Wide Web Consortium), Cascading Style Sheets, or CSS, is a mechanism used in web development to style certain elements of a website. CSS originally applies to web coding alongside other languages, such as Hypertext Markup Language (HTML) and JavaScript/jQuery/jQuery Mobile. Currently the latest version of CSS, CSS3, is being used for many websites today.

What is the history behind CSS development? In Chapter 20 of Cascading Style Sheets, designing for the Web by Håkon Wium Lie and Bert Bos, both Lie and Bos delineate the origins of CSS from 1994 to their present year in 1999. Looking back over twenty years ago, it is easy to see how much of a struggle it was to establish CSS as a fundamental part of web browsers and the construction of the World Wide Web in general.

Installing WordPress on Amazon Web Services

Amazon Web Services  (AWS) offer a way to host your own WordPress sight with no hardware and little to no expense on a small WP blog site. This is ideal if you want to start working with a self hosted WordPress site for developmental purposes, monetization of your blog, or just good ol’ bragging rights.

In this article I will go into an overview of the EC2 service and the various Virtual Machines (referred to as instances from here on out) that are free and paid. Some may be free to download and initially spin up but may incur an additional cost to the AWS price tier even if you are in the Free Tier. Even though I discuss the free tier exclusively and micro-instances it should be mentioned that the AWS allows for scalability of your WordPress site so it can grow as your site(s) grow.

There are various pre-made instances for use with your AWS account that are configured for just about “one touch” configuration. Some are free, others are free to upload to AWS but incur a usage cost, and others cost for upload and usage. A few of the providers are; Bitnami, JumpBox, and Turnkey Linux. If you do choose to go with these “one click” solutions be sure to read all the print to verify if there are any charges for the instance or use of and how the charges are calculated.

Plugins: The Fancy Gallery Light

When you want to add a gallery to your page or post, the Fancy Gallery Light Plugin will help you to create a gallery where the images stand out.

Fancy Gallery Light

This Plugin will add all the pictures you want together, and create the correct HTML short code for the gallery to be added in the Text editor. All you will have to do is choose your images, size them, add alt text, and add the short code to the text editor, the plugin does the rest.

Why Not Center?

In order to write valid HTML, you need to avoid the elements that have been deprecated. Many HTML tags, including the <center> tag, are now obsolete. It turns out that HTML, like all technology, is constantly evolving, changing, and improving. While the HTML tag is still part of the HTML specification, it will not be included in the future. If it’s not included, browsers won’t support it. This will result in Web pages that may not work in future websites or applications.

Why is the <center> tag deprecated?

Many HTML elements are deprecated in favor of CSS style sheets, the design aspect of the HTML architecture. The <center> tag is one of those elements. While it once centered whatever it wrapped around, CSS styles now manage the centering process.

This article is about how the <center> tag came to be gone from HTML, no longer supported by the time HTML 4 (XHTML 1) was adopted, and why.

The SEO of the HTML Anchor Text

You finally finished your website and uploaded it to the Internet. Maybe it is a blog, a personal website, or an e-commerce website that sells products. In all of these cases, you now wait to see how many visitors come to the website or read your blog article.

How to Create and Use Abbreviations in HTML

Our friend the <acronym> tag has been deprecated with the release of HTML5, so how does this affect the use of acronyms generated with HTML? Well, we have a new friend! The <abbr> tag joins the HTML element list with HTML5.

How to Embed a Google Map

There are a lot of tutorials on how to use Google Maps in WordPress, so here is a very simple and detailed way of doing it.

Embed a Map

It’s quite simple actually. Begin by going to Google Maps. From there you can type in the exact address you’re looking for or a general location and click enter on your keyboard (or click the little blue search button).