Quick Technology Index


Share Button


First, give me a very quick summary of HTML.

HTML stands for “Hyper Text Markup Language” and it is the language that browsers understand in order to construct and display web pages. It’s not a programming language, so you can’t perform sophisticated loops, if statements, or construct “objects” with methods. Chances are that you will have some sort of graphical tool to create web pages through a slick user interface rather than by hand coding HTML. So taking the time to learn the language thoroughly is questionable unless you are a developer of some sort Footnote 1: If you are, I’m sorry about that. . However, there are some basic concepts of HTML that are important to understand if you’re going to have any exposure to it at all.

HTMLComic

An HTML document contains the text that goes on a given web page along with all the instructions for how to display that text – in tables, in bulleted lists, in italics, etc. For example, when your browser receives (for the ten thousandth time) the string “<p><b>Victoria’s Secret</b></p>”, it knows to start a new paragraph and to display the text “Victoria’s Secret” in bold. The opening “<b>” and closing “</b>” strings tells the browser to highlight the text in between in boldface. Similarly, the opening and closing set of Ps Footnote 2: Speaking of “Ps”, did I ever tell ya how to catch a polar bear? You cut a hole in the ice. Then you spread a bunch of peas around the hole. When the polar bear comes up to take a pea, you kick him in the ice hole. My dad taught me that joke when I was five.  I’ll never forget the look on my kindergarten teacher’s face when I told her or the subsequent beating either. (P is for “paragraph”) tell the browser to insert a blank line before and after the text. Such special “tags” are not displayed on the web page itself, but are instructions to the browser on how to format and display the rest of the information coming across. Closing tags are the same as opening tags except they have a forward slash at their beginning.

Give me 4 sentences or less explaining tags

Then there’s a whole bunch of special tags defined by the HTML standard. Tags exist to create the web page title (“<TITLE>”), center text (“<CENTER>”), change the font (“<FONT>”), create tables with cells of information (“<TABLE>”), create bulleted lists (“<OL>”), create hyperlinks to other pages (“<a>”), and embed images in the page (“<IMG>”) just to name a few. You can also create objects intended to gather information and send it back to the server. Text entry fields, buttons, or checkboxes, for example, are created with the “<INPUT>” tag.

Can you pass a tag parameters?

Some tags take parameters. For example, when embedding an image, you have to tell the browser the name of the file that contains the graphics to be embedded on the page. That is, you can’t just say <img> and expect the browser to know what image to place there. Rather, you specify what image should be placed at this point by adding the appropriate “tag parameter”, like so:

<img src = http://www.congress.gov/images/109thCongress/ChristmasParty/caughtInCrapper.jpg>

Tell me very fast about the main parts of an HTML document

An HTML document has a header and a body. The header is used to embed special instructions to the browser such as the title of the web page, keywords that search engines should use to help people find the page, cascading style sheets (that establish the colors, fonts Footnote 3: You can define a font using standard HTML or using Cascading Style Sheets, which is a file of instructions that accompanies the HTML file. It works either way, but using CSS is a newer and better technique. CSS replaces many parts of old-style HTML, but both techniques are supported. and such for the whole web site), and possibly even JavaScript code (that makes the page’s buttons, lists, and knobs fancier and able to behave a little more like the interfaces for desktop applications). No text in the HTML header section ever displays on the web page. It just contains stuff that allows the browser to better display the contents of the body. It’s the body that really contains the bulk of the information and it has the text that will appear on the web page. The following HTML file demonstrates these principles:

<html>

<head>

<title>

This string appears in the top frame of the browser. Look here!

</title>

</head>

<body>

Last night I stayed up all night playing poker with tarot cards. I got a full house and four people died. -S. Wright

</body>

</html>

If you enter these lines into a file and then drag and drop that file into a browser, it will look like this:

Browser window for previous HTML code

The white space and tabs in the HTML source above is ignored. (Development tools and developers alike are notorious for not making source code easy to read. You can’t even get most developers to take a shower, let alone to keep their source code neat.Footnote 4: My wife is nodding her head in agreement with this sentence, but she also knows that I was a programmer for 20 years. Hmmmm. I think I may be insulted here. )

How does HTML differ from this XML I've been hearing about?

HTML is often confused with related technologies such as XML, XHTML or HTTP. XML is not the parent or child of HTML – it’s the sibling. XML and HTML look very similar, but they have different purposes. HTML is about displaying text while XML is about holding data in an organized format for easy parsing. HTML contains only tags defined by the official standard. XML on the other hand, lets users make up their own tags so their data can be put in a form that is self-describing. HTML is understood by browsers but XML is understood by custom programs that recognize the meaning of the tags invented by developers. An XML document might look like this:

<CompanyABCMemo>

<To> Glenn</To>

<From>HR Department</From>

<Subject>Pack Your Bags</Subject>

<MemoContent>…and the horse you rode in on.</MemoContent>

</CompanyABCMemo>

The opening and closing XML tags look just like opening and closing HTML tags. Some browsers can display XML documents in an organized fashion (try dragging and dropping one into your browser), but a browser doesn’t really understand what to do with company memos. By contrast, a browser knows exactly what the “<b>…</b>” HTML tags mean – to perform the action of bolding the enclosed text.

So what's XHTML?

Extensible HyperText Markup Language (XHTML) is really just newer version of the HTML standard and is almost indistinguishable from the HTML 4.01 standard. XHTML changes the HTML syntax slightly to conform to commonly used XML practices or even XML standards. (Your web pages are probably already in XHTML but developers may still imprecisely refer to the source as HTML.) For example, old HTML allowed you to omit the closing “</html>” tag. XHTML does not allow such laziness and requires that you include all closing tags so that your HTML can be processed by XML parsing code.

What's the difference between HTML and HTTP?

Even seasoned developers sometime say HTML when they mean HTTP, and vis-versa. HTML is the standard for how web page information will be displayed while HTTP is the standard for how web page information will be transmitted, so the distinction is subtle. When information destined to a browser or to a web server is transmitted, it’s HTTP while it is on the wire, even though HTML is ultimately inside that request. When it’s unpacked, it’s HTML again. In addition to transmitting HTML, HTTP can also send graphics, sound files, XML files and other file types.

So what are the key technologies that accompany HTML and why are they needed?

HTML was invented a long time ago and the demands for fancy user interfaces have increased many times over. Consequently, the IT industry has compensated for a number of HTML’s shortfalls with all kinds of augmenting technologies. For example, HTML provided only weak support for dynamically constructing web page information based on database values. Java Server Pages (JSPs), Microsoft’s Active Server Pages (ASPs), PHP, CGI, Python, Ruby, Flash, and a host of other technologies were introduced to blend traditional programming constructs (like “if-then” statements) directly with the HTML, allow for database access, and to add support for impressive graphics.

Very quickly then - what are Cascading Style Sheets (CSS)?

HTML by itself does not provide mechanisms to ensure all the web pages for a given web site have a consistent look and feel, so the technology of Cascading Style Sheets (CSS) was introduced. Style sheets allow web developers to establish cross-page consistency in font, background color, bulleting, indentation, and other visual attributes. CSS separates the text and image content from the artistic design of the site (fonts, image placement, etc.) A single HTML file can be associated with several different CSS files so that the same HTML file can appear different depending if it’s being displayed in a desktop browser, from a cell phone, or when destined for a printer.

The HTML-augmenting technologies are countless. Just a few of these are:

  • Active X – A way of attaching programs to a web page so that it is downloaded to the browser machine and run locally (it has to be a Microsoft operating system machine). This provides web pages with all the features of a local program, albeit at the cost of potentially compromised security. To compensate for this hole in security, the browser prompts “Are you sure you trust the guys who own this web site? They seem pretty shady to me.” before it runs the program.
  • Applets – Conceptually the same as Active X, although applets solve the security problem in a different way. With applets, access to the disk drive is simply disallowed. Applets are no longer widely used as a number of other industry standards have replaced them.
  • Cascading Style Sheets (CSS) – CSS augments the vocabulary of HTML to allow colors, fonts, and text placement to be consistent across all web pages in a company. CSS is used, for example, to ensure the title and graphics at the top of a corporation’s web pages are consistent. (Go to http://www.csszengarden.com to see how the same web page can be dramatically transformed by different style sheets Footnote 6: csszengarden can be a little deceptive though. Many of the effects aren’t entirely due to a change in the style sheet. You may apply a different style sheet and suddenly see text printed at an angle. CSS can’t do this. The artist has created an image with the text in it and rotated that text with a tool like Adobe Illustrator. The artist has cheated since the idea of the site is to demonstrate the power of CSS and not to replace text with images. Nevertheless, the effect of different style sheets can be astounding and the power of CSS well demonstrated by this site. . Just click on the links on the right hand side of the page to apply different style sheets to the same web page.)
  • Dynamic HTML or DHTML– Essentially HTML+CSS+JavaScript+CGI+Active X+other. It’s not a standard but just a term the industry uses to describe all the technologies that support the dynamic construction of web pages (web pages that usually need to interact with a database in order to calculate the appropriate HTML).
  • Flash – A widely used product by Adobe that gives web pages animation that can even respond to user clicks and keystrokes.
  • JavaScript – Ironically this technology has almost nothing to do with Java. JavaScript is a simple language that most browsers support that allows for very simple logic to be performed in the web page itself. It’s becoming very widely accepted and 9 out of 10 browsers in use today are configured to allow JavaScript. Text entry fields can be validated, text can be conditionally displayed, cookies can be created to maintain state as users travel from one page to another, etc.
  • XSL (Extensible Style Sheet Language) – A language used to specify how XML data files should be displayed in a browser (that is, converted to HTML). Even though most browsers can already display XML files, the resulting web page is crude. XSL tells the browser how to display the data fields in an XML file. With XSL, you can force the browser to use certain fonts, colors, indentation, or even tables to display a given XML file. This is very useful if, for example, you have a catalog of products in XML format and you want to convert that entire XML file into something that looks respectable on the web.

So is HTML easy to read?

HTML rapidly becomes unreadable as the page’s complexity increases. To see this for yourself, go to your favorite web page Footnote 5: If you are not in the privacy of your own home, perhaps you shouldn’t go to your FAVORITE web page. , and, from Microsoft’s Internet Explorer, select from the pulldown menu “View” and then “Source”. This option displays the HTML source for the web page you are on. It’s undoubtedly pretty cryptic. It will give you a headache. Any Microsoft Word document can be saved as an HTML file. Try turning one of your Word documents into a web page and see how complex it is. (You can drag and drop the resulting HTML file into a browser to see how it will look when served out from the web server.) You really need a tool like Adobe Dreamweaver or Microsoft FrontPage to be able to effectively navigate an HTML file.

---

What are the common mistakes that companies make even after all these years with HTML?

HTML is a pretty widely used and understood technology.  On the other hand, think for a moment about the top three most common and most costly mistakes that companies make with HTML.  They make those mistakes all the time.  If you’re drawing a blank or only thinking about minor HTML annoyances then it might be worth a few bucks to order the book now and get the full picture.  Don't just settle for the excerpt above - our book is chocked full of common mistakes that companies make on HTML and on a lot of other technologies too.  A few dollars spent today might save you a lot of headaches in a few months.   (At the very least, the book comes with a number of cartoons, which, according to my dogs Wrecks and Lucy-fur, are hysterical.)  Leverage off our "school-of-hard-knocks" experience and click the “Buy Now” button below!