Learning the Core of HTML

Anyone can learn HTML. 

Don't let the syntax overwhelm you. Web 2.0 tools eliminate the need to learn, memorize, and type 99% of the HTML tags.

Here is a holistic view of referencing and linking that is the core of HTML.

What is a Link?

A link, like this HTML link to it's definition at Wikipedia, becomes an interactive element that users can click to view references. Stretching the definition, it can also bring images and videos onto a page, like the image at the top right.

Whether writing news, commentary, comments, journals, or academic papers - the core of any non-fiction REQUIRES references. Instead of inconvenient footers at the bottom of a page, HTML embeds the link and allow readers to jump to the referenced material. Thus, the link becomes hyper text that enables the reader to interact with a document.

To the reader, the link most often appears as underlined text. They click to activate. It's so simple and intuitive that elementary students use the web everyday.

Creating Links and References

Creating links and references confuse many writers. Whether a link to embed an image, ad frame, or video, hyper text to another page, or other uses of references - many have learned the mechanics for one service without understanding the basic concepts. Variation of steps, phases, and interfaces confuse. Thus, when faced with a new web 2.0 service, fear reigns.

The holistic view is simple. Master these three issues to better understand any web 2.0 service.

• Uploading the source file
• Copy the URL or address
• Paste into your document

Uploading Files to the Internet Cloud

Before you can link or reference, the image, photo, video, or text file must be uploaded to some server on the Internet. 

• If you're linking another website, skip this step. It's already uploaded. 
• If you're linking a previously published page, skip this step. 
• If you're linking an ad service, skip this step.
• If you're linking a photo, upload to a server like Yahoo's FlickR, Google's Picasa, or Facebook Photos, or hundreds of public servers.
• If you're linking a video, upload to Google's Youtube, Yahoo's FlickR, or any number of 3rd party services.
• If you're linking media from public sources, find the item and skip this step.

Web 2.0 services call the network of public servers available, the cloud. Most public servers are free.

Uploading moves a file from your computer to a server. The uploading steps are different for each service, but very similar. 

Each uploader may offer services to upload in batch, convert files to different formats and sizes, and otherwise simplify the task.

Copy the File Address to the Clipboard

Every page, image, video, or file on the Internet has an address. Software uses the term URL, URI, address box, domain name, file directory, or other terminology. They all refer to the address of a file.

Find a file on the Internet and copy the address into the clipboard.

• You can use Google, Yahoo, or Microsoft Live to search for pages, images, or video. Click to follow a link and the address is available in the address box for copying.
• Using PC browsers, the right-click menu allows you to point to a link copy it's address. 
• Pointing to a photo, you can right-click to get the address of the photo. Note the confusion between the address of the photo versus the address of the page that contains the photo. Copy the address that match your need.
• Youtube has a special feature that provides the HTML tags needed to embed a video on a page. Click and copy to the clipboard.
• Ad services also provide HTML tags. Find the tag and copy.

Paste to Your Page

When requested, paste the address on the clipboard into your page. Depending on the service and the element you wish to create, the steps vary greatly. Conceptually, it's the same. The address embeds the referenced element on your page. 

• Using a graphical interface like a blog, iconic tools allow embedding of links, images, and HTML. Select the item you need and paste the clipboard address into the right box.

If the target is an image or video, the embedded results show immediately. If the target is a link, the hypertext shows with an underline. (Note, that it's possible for the underline to be turned off via CSS and other settings of HTML.)

Copy and paste the file address. It's that simple.

Copy and Paste Shortcut

Many services with graphical text editors allow copying and pasting of text that already includes the link code. This means, you can drag the mouse to lasso words, pictures, and links. When pasted, all those elements become part of your HTML document.

Experiment with your blog or CMS software to see if this shortcut is supported.

Exploring the Link and URL Address

To better understand the process, let's take a look at an address and a link. An address looks like this:

http://www.blogger.com/post-create.g?blogID=8964xxxxx006013

Here is a breakdown of the parts.

• The http:// is a protocol for hypertext transfer. Other protocols are used on the Internet to transfer mail, voice, and other services.
• The www.blogger.com is a domain name. This is the unique name for a server on the Internet.
• The /post-create.g part is a path through the server to a file on the server.
• The ?blogID=... is a query string used by the program on the server.

Addresses can be ugly. Copy and paste avoids typing errors and having to understand it's parts.

When used as a link, the HTML shows something like the following:

<a href="http://www.blogger.com/post-create.g?blogID=8964xxxx06013">Sample</a>

• Angle brackets signal HTML code instructions in a page.
• The longest, most complex part of a link is the address.
• 'Sample' is the hypertext'd phrase. 
• The 'a' tag starts the link. The '/a' tag ends the link.

Here is the HTML for the top-right image:

<img src="http://upload.wikimedia.org/...HTML.svg/150px-HTML.svg.png" />

Note the address of the image and the HTML img tag for embedding the image on this page.

HTML is 100% syntax. Like grammar rules, proper use is required. Unlike grammar rules, failure leads to pages that don't work rather than just a poor grade ;-)

tEarn Intra versus Exit Links

A link can bind two pages of the same website or different sites. tEarn (Tag, Earn) distinguishes links that allow users to explore the pages of a site; versus links that lead users to exit a site. The latter links are called exit links; and tEarn activates exitmericals.

Conclusion

Fortunately, web 2.0 services eliminate the need to deal with HTML and addresses. However, understanding this core lesson allows writers to control and troubleshoot problems.