Currently Reading

With the rise of powerful and flexible WYSIWYG web editors, you might ask the value of knowing HTML. Do you really need to know code when applications like Adobe Muse, PageLines for WordPress, and Rapidweaver promise to allow page layout style web editing tools? Perhaps not, but we’ve all had the experience in Microsoft Word where a table just wouldn’t do what you wanted it to, or for the life of you, you couldn’t fix an odd page break. It was to my great dismay that Word eliminated the code revealing feature that would show you all the hidden formatting codes that were impacting your document. When something strange is happening, the best way to resolve it without starting over from scratch is to jump into the code.

So, as a service to all those who know little to nothing about HTML, I’m going to give a framework for the basics of how HTML works and give you some resources to get you started learning this easy to navigate programming language.

HyperText Markup Language (HTML)

HTML is the foundation for any website. It is the main language that builds the format for content on the we. HTML uses tags to “label” various content on your site. These tags are surrounded by <> brackets and have an opening tag and a closing tag, creating a nest for the content. The example below shows how to make a word appear bold in HTML:

Tags effectively label any content contained within them, telling a web browser what specific content should look like. There are tags, like bold, that generally have a single purpose. However, many tags have multiple purposes and can give a browser information on multiple format aspects. To do this, tag elements use attributes. Attributes are used to identify multiple aspects of a tag. So, in this hyperlink ta below, I have identified two aspects: a URL that the link will direct to, and a title that will appear when hovering the mouse over the link.

Cascading Style Sheets (CSS)

Style sheets hold all the stylistic elements of a page. Attributes of font, color, lines, shape, and much more are all controlled through CSS. Style sheets can be referenced by an HTML page. Once it is, that page can draw on the styles defined within that sheet. CSS is used to customize the tags. CSS attributes are attached to a tag using a class or using the style attribute. The code itself is stored within that style attribute, within tags in the head of an HTML document, or within a *.css file. In the example below, we have manipulated multiple text attributes using a single DIV tag.

You can do the same thing by giving the DIV tag a class and defining that class within the <style></style> tags of an HTML or within one of the CSS files the HTML page references. When doing it this way, the attributes for a specific CSS tag are nested between { } brackets like so:

Learning Resources

There are thousands upon thousands of resources on the web for learning HTML, CSS, and other web-related coding languages. Here are just a few that I’ve found helpful in the past.

• W3 Schools is a great repository for learning web coding one element at a time. This is my go to place to learn or remember what attributes are available for an y given tag element and how to format the tag data.
• Lynda.com is a popular video tutorial service that hosts 27 videos about HTML an 19 videos about CSS.
• Mozilla Thimble is a powerful learning tool for coding HTML and CSS. You enter the code into one box and instantly see how your web browser will interpret that code in the box next to it. Thimble also guides you through the process by giving hints and tips and auto-completing code as you type. If you are learning HTML and CSS for the first time, or just want to test some code out, I highly recommend trying this web app.
• Google. If you can’t find what you are looking for in one of the resources above, Google is always a great fall back. There are tons of sites and tons of content out there to help new coders learn HTML, CSS, and much more.