Manage Subscriptions · Subscribe Now · F.A.Q.'s
HOME · Friday, July 4, 2008
Development & Programming
HTML Primer for the Tech-Challenged
Understand its origins, learn the basics
Considering it’s the 10-year anniversary of ecommerce, we should probably pay homage to the technology that has played the biggest role in allowing online businesspeople to thrive: the HyperText Markup Language (HTML).
Actually, HTML is officially a teenager. Most historians suggest that Tim Berners-Lee, the acknowledged inventor of the Internet, created the first prototype of this tagging system in 1992. However, that’s not altogether precise considering hypertext, as a means of presenting information on computers, has its roots in academia.
According to the World Wide Web Consortium (W3C), hypertext came to life in concept as early as the 1940s.
Although already established as a concept by academics as early as the 1940s, it was with the advent of the personal computer that hypertext came out of the cupboard. In the late 1980s, Bill Atkinson, an exceptionally gifted programmer working for Apple Computer Inc., came up with an application called Hypercard for the Macintosh. Hypercard enabled you to construct a series of onscreen `filing cards' that contained textual and graphical information. Users could navigate these by pressing on-screen buttons, taking themselves on a tour of the information in the process.
Long story short, Berners-Lee took the concept, Atkinson’s application and the work he did for CERN, the European Laboratory for Particle Physics in Geneva, Switzerland, and developed a tagging system for his Internet creation that strongly resembled another markup language, the Standard Generalized Mark-up Language (SGML).
According to the W3C, SGML “is an internationally agreed upon method for marking up text into structural units such as paragraphs, headings, list items and so on.”
Most agreed that deciding not to invent HTML from scratch was a brilliant move, although standardization was still years away, However, most online entrepreneurs only care about how to use Berners-Lee’s brilliance to build a web page, so that they can display and sell products.
First, HTML is not a programming language. No code is executed or really even interpreted. HTML is read through a browser via a system of request and response, which means that a web surfer requests a page that lives on a server. The server responds with the page, displaying it to the user.
Every HTML page is comprised of a header and a body. In the header, represented by beginning and ending
tags, an HTML builder will add tags that identify the page to the browser and to search engines. The builder can also use other technologies, such as JavaScript, to render site activity such as mouseover events for images and form validation. All the code in this header area is seamless to the end-user in that it’s not readily displayed in the browser.At the most basic level, a Web page might look like this, in terms of code:
One of the most important rules of HTML is that every tag has a beginning and an end, signified by the forward-slash. For every tag, there must be an tag. This is not an absolute rule for some tags; however, don’t get hung up on it. But, most tags require a beginning and ending tags.
One of the beauties of HTML is that most browsers, particularly Internet Explorer, are quite forgiving as to HTML perfection. Most web sites have several HTML flaws that just aren’t noticeable to the end user.
While everything in the
tags is background music, all HTML contained in the tags is melody. What a user sees on a web page is accounted for within these tags, and the most basic construct for displaying information is the paragraph tag: .Put anything within these tags, and a paragraph is displayed. For example:
Our sale lasts through the weekend. Be sure to call 1-800-555-5555 for more information.
That’s a paragraph. Other useful tags to use within the body tags include bulleted and numbered lists, the
- and
- tag. For example:
<>
The best hitters, historically, in baseball include:
- Ted Williams
- Tony Gwynn
- Pete Rose
- Rod Carew
The numbered list – or, literally, the “ordered list” – works much the same way:
<>
The first five American presidents were:
- George Washington
- John Adams
- Thomas Jefferson
- James Madison
- James Monroe
In terms of strict textual display, each of these basic constructs can be contained within HTML’s most powerful display mechanism – the table. An HTML table is what it sounds like; it’s an organized way of presenting content within rows and columns. It’s most rudimentary pieces include:
The
tag itself is just a holder, but it’s required. Within its beginning and ending tags, one usually only uses tags for table rows and columns. The table column or
, which literally stands for “table data,” should be placed within a table row, or . Sometimes, HTML builders will give tables a header so as to let users know the purpose of the table, for example:
Musical Artists I Like
Country:
Johnny Cash
Rock-n-Roll:
Elvis
Soul:
James Brown
Of course, what’s the purpose of using HTML to display information if you’re not linking and showing images?
The anchor reference tag represents the magic behind hyperlinks, those blue, underlined pieces of text users click to get from one page to another. The basic format for this code is:There is no special place for this tag. It can be used within
tags or inside a bulleted or numbered list. Of course, it can be used within a table – or anywhere, really.The image source tag supplies the spark for displaying images on a web page. While it only takes HTML to display images in a browser, one element of the obvious should be explained for the beginner. You will need to save an image, and upload it to a server. When it comes time to display that image, you’ll follow this format:
Most tags, and most specifically the image source tag, allows for attributes that can be set that serve to modify the tag. The ‘src’ portion of the image source tag is one such attribute. Others include:
- Alt, which is used to provide alternate text for people who choose to view sites without text.
- Height, which is used to specify how tall the image is.
- Width, which is used to specify how wide an image is.
- Border, which is used to specify the size of a border around the image
For example:Heck, you can even hyperlink images so that users can click on them to get from one page to another:
Copy and paste any of this code into any HTML editor, save it with the name of your choice, followed by a .html file extension. Upload it to your server, and view the page. While this is merely the most basic overview of HTML, here are several useful HTML reference sites you can use:
- w3schools.com/html/html_reference.asp
- htmlgoodies.com/beyond/reference/article.php/3472851
- webmonkey.wired.com/webmonkey/reference/html_cheat sheet/
- htmlcodetutorial.com/
Perhaps the most important thing to understand about HTML is that it’s powerful enough to start an ecommerce revolution by allowing online proprietors to display product information. However, it’s simple enough that even the most novice developer can’t really ‘break’ it. Should you manage to – well, break it – utilize the following resources to help get your HTML back on track:- home.webguy-prod.com/support/solveerrors.html
- matcmp.sunynassau.edu/~glassr/html/errors.htm
- docs.yahoo.com/docs/writeus/error.html
- htmlhelp.com/tools/validator/problems.html
- annabella.net/problems.html
It took the Internet community years to develop the most basic standards for Berners-Lee’s creation. Should you not get the hang of it immediately, don’t feel badly. You’d merely be joining the thousands upon thousands of folks, who are web savvy by today’s standards but who took years to learn HTML themselves.However, if you’ll limit yourself – at least initially – to these constructs, you’ll have the basics down in no time.
Blinklist | Del.icio.us | Furl | Ma.gnolia | Newsvine | Spurl | Reddit | Technorati
Published on Thursday, September 01, 2005
Comments:
Ecommerce Articles
- Browse All Articles
- Browse our complete archive of ecommerce articles.
- Accounting, Management & Legal
- Ecommerce articles related to managing a small business including ecommerce accounting, business strategy and legal considerations.
- Conversion & Usability
- Online business articles about converting web site visitors into customers and how to gauge and improve your business website's usability.
- Development & Programming
- Articles to help designers, developers and programmers create successful, search engine friendly ecommerce websites and improve existing ones.
- Hosting, Infrastructure & Software
- Articles for ecommerce businesses about ecommerce web hosting, business infrastructure, business strategy and helpful ecommerce & small business software.
- Interviews & Profiles
- Interviews with prominent ecommerce business personalities and profiles of successful online businesses.
- Inventory & Shipping
- Ecommerce articles about inventory management, ecommerce order fulfillment and product shipping considerations.
- Marketing & Revenue Growth
- Articles relating to online marketing, email marketing and using the Internet to growing your business.
- Search Engine Optimization
- Search engine optimization articles for ecommerce business owners, strategists, marketers and developers.
- Shopping Carts & Online Payments
- Articles covering ecommerce shopping cart platforms and options for choosing an online payment gateway.
- Training & Education
- Tutorials and articles providing training and education for ecommerce business owners and developers of ecommerce websites.
Search Articles
Ecommerce Community
- Ecommerce Blogs
- Read our blogs about ecommerce topics written by industry professionals.
- Community Forum
- Connect with other ecommerce professionals to trade advice and answers in our community forum.
- Podcasts
- Check out our ecommerce podcasts covering topics ranging from interviews to tutorials.
- RSS Content Feeds
- Subscribe to our RSS feeds and have fresh ecommerce content delivered to you.
Ecommerce Resources
- Free Email Newsletter
- Sign up for Ecommerce Notes, our free email newsletter for ecommerce business owners and developers.
- Ecommerce Directory
- Browse our directory of ecommerce products and services, or submit your own listing in our directory.
- Ecommerce Glossary
- Familiarize yourself with terminology or submit terms to help others with our Ecommerce Glossary.
- Events Calendar
- Find out about upcoming ecommerce events or invite other ecommerce professionals by posting your own event.
- Press Releases
- Browse ecommerce related press releases and post your own press release for distribution.
- Ecommerce Store & Back Issues
- Pick up back issues of Practical eCommerce magazine along with other merchandise from Practical Ecommerce
About Practical eCommerce
- Frequently Asked Questions
- Look at frequently asked questions regarded using our website, subscribing to our magazine and more.
- Advertising Information
- Information about advertising in Practical eCommerce magazine, on our website, or in our email newsletters.
- Editorial Sharing
- Learn about options for sharing our content with your visitors, customers or employees.
- About Us
- Learn more about Practical Ecommerce magazine and meet our staff.
- Contact Us
- Contact Practical Ecommerce at any time for more information. We'd love to hear from you.
Advertisement
Copyright 2007 Confluence Distribution, Inc. and Practical eCommerce.
All Rights Reserved.
- tags, respectively. Literally, the UL stands for ‘unnumbered list,’ and it represents a set of bullets by which you can display information. Between the
- and
There are no comments posted for this article.