I have a client right now who is interested in learning as much as she can about web design as we build a site for her. I directed her to teamtreehouse.com to get some foundational web design knowledge. I used a few of the Treehouse videos in my web design class last fall. Overall, the learning program they offer there is very high quality and up-to-date with current web standards and trends (a very rare thing in the world of web design education).
But, I hadn’t worked my way through the program myself. I always feel a bit uncomfortable recommending something I haven’t tried myself. I also like hearing fundamental concepts explained—you know, the kind of things you take for granted because you understand them on a level that is beyond words. Connecting that knowledge with language deepens the understanding and becomes an excellent tool for teaching and/or demonstrating expertise.
So, I watched a handful of videos today. Here are my notes:
HTML Introduction and History
- Markup language shapes text in a way that makes it easier to understand. It adds annotation, semantic meaning.
- HTML is a markup language that can be interpreted by web browsers. Other markup languages exist.
- Programming languages determine behavior, markup determines structure. (HTML is not a programming language)
- HTML tells browsers how to process various parts of a document: paragraphs, images, headers, etc.
- The internet is the system of connected computing hardware located all over the world. The World Wide Web is not the internet. The World Wide Web is just one particular use case of the internet. Other uses include: VoIP, gaming, apps
- Sir Tim Berners Lee invented HTML and the World Wide Web in the late ’80s. He was a physicist and contracter for CERN. He wanted to develop a better way of sharing documents. He created HTML by adding hyperlinking to an existing markup language. He also founded the W3C, the international organization that maintains the HTML specification and supports further development of it.
Learning HTML
- HTML/web design is fun because you can instantly see the results of your efforts in a browser
- no single technology or language enables the creation of websites, rather, a broad collection of technologies provide the pieces needed to build a complete website.
- HTML = Structure
- CSS = Presentation
- Javascript = Behavior
- To make a website, all we need is a text editor and a web browser. Every computer comes with a text editor.
Markup Element Highlights
I won’t bore you or myself with all the details of HTML tags covered in the videos, but here are a few nifty new things I learned.
- the technical name for <hr> and other elements that are self-contained, don’t require a closing tag, is void element.
- the cite attribute can be used on <blockquote> to include the source of the quote. example: <blockquote cite=”http://example.com”>
- <q> can be used for inline quotations and also accepts the cite attribute
- <abbr> is used on acronyms and you can add the expansion of the acronym by adding a title attribute. example: <abbr title=”Self-Contained Underwater Breathing Apparatus”>SCUBA</abbr>
- <address> is for addresses (duh) and if it’s parent is the <body> tag, it is considered the contact information for the entire page. If it is nested in a div, it is considered the contact information for the content around it, for example, a list of names with addresses. (I bet the use of <address> is really helpful for localized search engine rankings)
- <wbr> is optional whitespace. You can use it to indicate the best place for the browser to add a line break in a long word (or a url), but the line break appears only when needed! This is the equivalent of optional hyphen available in layout programs like Adobe InDesign. (I’ve previously longed for a tag like this, who knew it already existed!)
A friend passed along this link recently: http://www.iowagetonline.com/ It looks like Google and Intuit are teaming up with economic development agencies to get Iowa small businesses online for free. How cool! Here’s the full scoop at
There is an entire discipline of psychology that studies the symbolism and meaning of color. Colors, and combinations of them, can convey very specific moods. Web site owners would do well to gain a basic knowledge of the colors that best convey the purpose of their business. Following are a few examples of adjectives and the colors that may help convey them: