Full Version: PDQ Guide for HTML for Fun and Profit
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Way back in 1996 I took an HTML class. HTML was a lot more simple back then. But those very same things I learned then are still the basic foundation of all web pages and  this simple knowledge still helps me today. As a matter of fact, over my online career, learning just very basic HTML coding has very likely been the best investment of time by learning a tech skill I've made.

Knowing just the very fundamentals of HTML can really be a huge asset. And for us marketers, there's a big difference between understanding about a dozen HTML things and programming and designing pages with HTML.

This video is a pretty good intro into HTML. Play it at 2x speed.

HTML only requires 4 tags to be a "web page":
 Copy the code above into a text editor and save it as a .html page. Then open it in your web browser. This is a blank, valid HTML page.

In general, content between the head /head tags is for the browser to use and the content between the body /body tags is for the people to see. For example, meta tags are in the header area and other things may need you to paste them into the header area. Know how to find the opening and closing tags for the header and body.

Pay special attention to brackets, tags and quote marks. These are markers and tell us where we can paste/change things. When pasting content, removing or adding an extra bracket or quote mark will be a common mistake.

There's a million ways to format and style just a single image, plus everything else you can possibly put on a web page. Business people don't need to mess with that. Instead, we can use a template.

If you post content on the web, the Paragraph and Line Break tags are used a lot and have more control over design than it may first appear.
PHP Code:
In theory, and without any styling applied, 2 line breaks = one paragraph when it comes to spacing and how they will display in the browser.

The big difference is, a paragraph will often end any styling used, while a line break will continue styling. For example, when trying to center (or not) a lot of chunks of text, Paragraph and Line Break tags can make a big difference in how they all look.

I'd add these additional elements to know:
Bold, italic, color, etc
Let's say you have a big, complicated webpage and are trying to add an email form in a particular spot on the page but can't find where to put it. Add some "markers" to point out different areas on the page.

If you are working directly in the HTML, add something like the following to different areas of the code:

Refresh your browser and look for these numbers and see where they are on the page and remove them once you've found "your spot".
Another important HTML tag to know is the Comment tag:
<!--  -->

<!-- Anything you put in between is a comment -->
Browsers ignore everything in comment tags and they are used as a way to make notes and are often used in templates to help people find bits of code.