Should web designers know HTML and CSS? This question has been an on going argument for several years. On one side of the fence is the school of thought where the web designer should only focus on the design and let a web developer handle the code. This is a flawed way of thinking. Learning how to use HTML and CSS will only make you a better web designer, even if your on a team with a developer. Doing is knowing and having this knowledge will help you tremendously.

Let’s start with the basics of HTML. HTML stands for Hyper Text Markup Language but nobody calls it that. For most it’s just HTML. It is the foundation of a website. There are other things that go into the site to make it up like CSS and Javascript but for now we are going to focus on HTML.

For this first project we will create a simple website. To start you will need a text editor. You can use your notepad but I recommend getting one of these editors:

• Text Mate
• Coda
• BB Edit

Step One:Content

In this example we are going to make a simple site (no CSS) that is for a farm that sells produce. When completed the site will comunicate the following things:

• The name of the farm
• Where the farm is located
• What the farm is selling and how much it costs
• When the farm is open for business
• Contact Info

It should be noted that this is a very simple and abridged version of making a website. This has omitted the UX portion and strategy in order to just focus on learning HTML

Farmer Bob provided us with the following information:

• Rolling Hills Farm
• 2426 Old State Rd. Sometown Ohio, 55555
• Corn $5 for a dozen & Tomatoes $6 a basket
• M-F 8 am 6 pm, Sat 8am-4pm Closed Sundays
• Cell 555.555.5555 email rollinghillsfarm@gmail.com

We have our basic content from Farmer Bob and we are ready to get started. Open up a new document in your text editor and type the following information:
Rolling Hills Farm
2426 Old State Rd. Sometown Ohio, 55555
Corn $5 a dozen Tomatoes $6 a basket
Hours: M-F 8.am - 6.pm Sat 8.am - 4.pm Closed Sundays
Contact Info.
cell: 555.555.5555
email: rollinghillsfarm@gmail.com


Next save the document as index.html in a folder on your desktop called farm_site. Drag your index.html file into your web browser. You will probably should see a long line of text. This does’t look very good because we haven’t done any mark up. Mark up is used to add semantic structure and define the text document. It gives the text structure that makes it easier to understand. Clear your text document and we will set up the global structure first.

To do this we need to define the doctype. Open you your text document and type:

This is the HTML 5 doctype. The tags we will be using are HTML 4 but they work with HTML 5.

After we have the doc type we next place the an HTML tag like this.

The HTML lang=”en” tag is for english. Make sure you always close your tags. This HTML tag will wrap the document and it is where we put the rest of our tags.

Next we will need to create our head tags. The will look like this and are placed between our tags.

The head tags will not render on the site, your not going to see them but this is where we put meta information, style sheets and java script. We will not be using any stylesheets or java script for this example. We will however place a meta tag here. It will look like this:

Charset is the character set being used. Most of time we will use this one. You will notice that the meta tag doesn’t have a closing tag. This is because the meta tag is a void element. There is nothing to put inside the tag.

After this we will put our title tag. The title tag is what will show up in your browser tab as the title of the site. Have you ever seen a site title that says “Just another WordPress blog”? This happend because they forgot to edit the title tag or the area in the WordPress editor that has the title tag. This is just one of many examples that will illustrate why learning HTML/CSS/JQuery will make you a better web designer. For our site we are going to type in Rolling Hills Farm.

Save your .html document and view it in your web browser. It should look something like this:

In order to have content display on a page we have to add the tags. The Body tag goes after the tag but between the tags:

In between the body tags is where you will put the content of the website. We were given the example content above and we should assign a hierarchy to the items. Here is how I would group the content:

1. The name of the farm
2. What they sell and how much it costs
3. The location and hours of operation
4. Contact info

The next step would be to structure this hierarchy with using html. For the number one item we are going to use a header tag. Header tags range from h1′s all the way to h6′s. H1′s are the most important and H6′s are the least import. Let’s take a look at how this code would look if we only use heading tags.

Save your file and refresh your browser. You should now have something that looks like this:

This gives us the content with a hierarchy but it is not really the best way to use headings. A heading briefly describes the topic of the section it introduces. The first heading, Rolling Hills Farms is fine. It introduces the topic of the entire site. The others have information that could be listed out and then given a proper title and format. To do this we are going to use html lists.

The two most common types of html lists are ordered and unordered lists. This is an ordered list is:

1. first item listed
2. second item listed
3. third item listed

This is what the code for an ordered list:

The “ol” inside the tag is stands for ordered list. In between the open and closed “ol” tags live the list items. For those you use open and closed list tags.

If you don’t want to use numbers to order your list you can make an unordered list. This is an unordered list:

• list item
• list item
• list item

This is the code for an unordered list:

List items will use bullets instead of numbers. You can also have nested levels in your list. Here is an example of a nested unordered list:

• list item
  1. nested list item
  2. nested list item
• list item
• list item
This is what the code for this looks like:

Notice we have nested the ordered list inside of a list item in an unordered list. You can mix and match list types. The browser will give you different bullets to indicate the levels of nesting on unordered list. Just remember that list start first with open and closed “ol” or “ul” tags and then each item is an open and closed list tag. Let’s apply this to the items for this example site. The code will look like this:



Save out your document and view it in your browser. It should look like this:


By using list tags in combination with our header tags we are able to assign a clear hierarchy. Sometimes the “address” tag will be used for the address but for this example we kept it in an unordered list.

Let’s consider if we had no knowledge of HTML and we as designers took the information farmer Bob gave us and went strait to designing. We probably would have still established a hierarchy and did a visual layout. We would have then sent our concept(s) off to farmer Bob for approval, got them approved and passed them off to a developer. The developer then would look at this design in terms of content and hierarchy and begin to do the markup. Essentially translating the visual design language into HTML and CSS (even though we haven’t covered CSS yet )a language we don’t understand.

If we as designers don’t understand HTML then we aren’t speaking the same language. Things might get lost in translation. Again, learning this can only make you a better web designer. It’s time to embrace code as web designers. Stop making up excuses and being lazy. I think you will find that most developers are very open and will gladly help you learn.

In Part Two of HTML for Designers we will look at the site from the visual design perspective and learn how to take a basic home page concept and make it work using HTML.