Queen Vectoria’s Corner, Dreamweaver Diary: HTML Basics

What is HTML? 

 

Tim Berners-Lee, left, and Robert Cailliau, right, inventors of the World Wide Web (WWW or Web), pose next to the first Web server, which ran on this NeXT computer, during the 20th anniversary celebration of the World Wide Web at the European Organization for Nuclear Research (CERN) in Meyrin near Geneva, Switzerland, Friday, March 13, 2009. (AP Photo/KEYSTONE/Martial Trezzini)

According to the World Wide Web Consortium (W3), HTML was invented as a collaboration between British CERN physicist Tim Berners-Lee and Belgian data systems engineer Robert Cailliau back in 1989 but was not made publicly available until 1991. Their initial goal was not to “invent” the Internet, but rather to simply devise a means through which CERN scientists might be able to collaborate more easily with one another. Nevertheless, as a consequence of inventing this language, these individuals are responsible for all the cat memes and other time-wasting devices that exist at our fingertips.

So, hooray for CERN and Large Hadron Colliders, God Particles, and cat memes!

But, what is HTML?

Those who have used WordPress for a while will be familiar with the text prompt that is used for inputing information that goes into the pages and blogs.

You will be aware of the fact that two tabs exist on the upper right hand corner, one reading “visual” and the other reading “text.” With “visual,” you  can pretty much see what your page or post will look like before you actually submit it for publication. With “text,” though, all that information that you entered looks like a bunch of coded gibberish. That coded gibberish is called HTML or Hypertext Markup Language. It’s the main markup language that is used for displaying web pages and other information that appears on your web browser. It is a sort of universal language that all web browsers speak.

HTML is not particularly hard to learn. The W3 Schools provides a handy free online tutorial.

Here is a sample HTML script based on the sample HTML script that the W3 Schools provide:

<!DOCTYPE html>
<html>
<body>
<h1>Introduction to HTML</h1>
<p>Learning HTML is remarkably easy! In this little paragraph, we will explain why learning HTML is easier than herding cats.</p>
</body>
</html>

Here is what all this information means:

  1. DOCTYPE defines the document type.
  2. <html> and </html> describe the webpage.
  3. <body> and </body> frame the visible text within the webpage. Anything that is not within these two markers will not appear on the page.
  4. <h1> and </h1> refer to a heading style
  5. <p> and </p> refer to the paragraph

If we do it right, this is what it will look like:

Learning the basics of HTML, thus, are not so hard. And, as you can see, once you know a little HTML code, you can write it anywhere. This is why many web design instructors suggest that you may be just as well off using Windows Notepad or Apple TextEdit instead of going out and buying  an expensive program such as Dreamweaver.

Essentially, the rules of HTML are simple. The web browser needs to know where the frames are. For instance, <html> and </html> both inform the browser that something is going to go inside of an HTML page. You might think of this as the town crier announcing, “Hear ye, hear ye!”

Toot! Toot! I have a bold HTML proclamation to make!

The next frame informs the browser that a body is going to appear on the screen, so you need a <body> to mark the frame’s beginning and a </body> to mark the frame’s ending.

<b> As a rule, the beginning and ending of every frame must be marked, otherwise the browser will simply believe that the frame is without end. For instance, the “<b>” that began this paragraph signifies bold text. If I do not close up the frame, the entire page will appear in bold. The backslash exists as a sort of dam, shoring up the waters. Here is how this paragraph will look if I do not close up the dam:

As a rule, the beginning and ending of every frame must be marked, otherwise the browser will simply believe that the frame is without end. For instance, the “<b>” that began this paragraph signifies bold text. If I do not close up the frame, the entire page will appear in bold. The backslash exists as a sort of dam, shoring up the waters. Here is how this paragraph will look if I do not close up the dam:

Disaster! So, if I want to highlight a single word, say the word “word,” I would write <b>word</b>, and it would end up looking like this when I am done: word.

And that’s the word on that.

Or, perhaps, this is the word?

So, learning the rules of HTML are not hard. More than anything, it requires a little memorization. For a quick guide, W3 Schools comes through again with this nice little quick list (link). I would recommend bookmarking this site on your browser and then writing down some of the more commonly used HTML codes.

With Dreamweaver, as Classroom in a Book points out, you can actually create your entire website just typing out HTML code, but then why would you do this? Considering that the bare bones edition is about $150 (US), why would you limit yourself to typing in HTML?

The quick answer is that you wouldn’t. However, when something goes wrong (and something always goes wrong where programming is concerned), it is good to be able to know that you can switch to Code mode and track down the source of the problem. To do this you need to speak a little HTML.

HTML is not so difficult to learn, and you actually start to pick it up pretty quickly as you use WordPress more and more often. As you discover new things about it, you will learn that you can make words appear in different colors or have text blink or scroll across the screen like a marquee.

This is pretty cute, but unless you’re trying to host a 90s flashback party (aka Party like it’s Windows 95), your HTML-built webpage isn’t going to impress anyone. It’s a rather primitive and limiting language.

This is why CSS was invented . . .

Recommended texts:

I happen to think the W3 Schools are a pretty good resource. In addition to teaching CSS, HTML, JavaScript, they provide you with certification. Now, I’m not sure if these certificates are something that you can show your potential employer in order to impress them, but they do look pretty nice on your refrigerator door.

Classroom in a Book recommends the following books, and while I haven’t read them, they do look pretty good. So, now you may take your pick.

HTML, XHTML, and CSS: Visual QuickStart Guide (6th edition) by Elizabeth Castro. Peachpit Press, August 2006. ISBN: 0-321-43084-0

Publisher’s Description: Need to learn HTML fast? This bestselling reference’s visual format and step-by-step, task-based instructions will have readers up and running in no time. Web expert and bestselling author Castro uses crystal-clear instructions and friendly prose to introduce all of today’s HTML and XHTML essentials.

HTML and XHTML Pocket Reference by Jennifer Niederst Robbins. O’Reilly, 2006. ISBN: 978-0-596-52727-3

Publisher’s Description: After years of using spacer GIFs, layers of nested tables, and other improvised solutions for building your web sites, getting used to the more stringent standards-compliant design can be intimidating. HTML and XHTML Pocket Reference is the perfect little book when you need answers immediately.

Jennifer Niederst-Robbins, author Web Design in a Nutshell, has revised and updated the fourth edition of this pocket guide by taking the top 20% of vital reference information from her Nutshell book, augmenting it judiciously, cross-referencing everything, and organizing it according to the most common needs of web developers. The result is a handy book that offers the bare essentials on web standards in a small, concise format that you can use carry anywhere for quick reference.

HTML and XHTML Pocket Reference features easy-to-find listings of every HTML and XHTML tag, and every Cascading Style Sheet value. It’s an indispensable reference for any serious web designer, author, or programmer who needs a fast on-the-job resource when working with established web standards.

Head First HTML with CSS & XHTML by Elizabeth and Eric Freeman. O’Reilly, 2006. ISBN: 978-0-596-10197-8

Publisher’s Description: This unique guide fills a need for an entry-level book on Web programming with HTML and CSS. It uses the engaging, multi-sensory “Head First” learning approach to deliver insights into cutting-edge Web design and development.

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Connecting to %s