Designers Become Front-enders Part 1

At figleaves.com recently the design team that are mostly pure designers expressed an interest in learning HTML and CSS.

They have little to no knowledge of any HTML so I thought about it and wondered as alien as it seems to me how many people out there using the web or designing for it actually don’t know what it is made of and would be interested in learning how to do it. Hence the reason for this blog post, it is the first part in what I will be teaching to the designers here so they can have a better understanding of what my team do and perhaps teach themselves to do it as well.

Designers become front-enders

So you want to learn a bit of html, well you asked for it!

It isn’t pretty and it isn’t easy, that’s a lie it is incredibly easy and your teacher is beautiful.

So why do you want to learn html and css? I expect the answer is the same as why I started myself. I began life as a graphic designer and thoroughly enjoyed it but always felt I was missing something. I assumed it was my skills not quite being good enough and making my posters or designs come to life. But I have learnt that it is the “coming to life” part that was all that was missing. When it comes to now designing for the web you can do whatever weird and wacky things you want, you can get it to slide, bounce flip do the fandango whatever you bloomin well want and then just have the skills to make it do all of that on a screen. So that may be a way off yet but once you learn the fundamentals and understand why parts are done certain ways then I guarantee you will go on and make some incredible pieces.

When it comes to designing for the web you already have the vision as to not see it as a flat piece of work on a sheet of paper, you know you want it to move, to hover, to scroll whatever and now you want to know how to do that. So let’s get started!

Let’s start from the top

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<head>

<title>figleaves.com</title>

</head>

<body>

How does that look to you? Confusing, weird, ugly, boring? Don’t worry it still looks the same to me especially boring. Well that is the first parts of any webpage you will ever build it is what tells the browser that this is a html page and should be rendered as such and them some other bits and bobs.

Break it down ho ho ho hoo stop hammertime!

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

Right here goes. This is the very first part in any html document it tells the browser the document type (!doctype) that it is html and to use transitional as the validation. Do not get too hooked up on this it is just so it knows how strict or not the html should be written. I do not want to get too much into this as frankly you won’t ever look at it again after this.

In fact even now most people will be simply using the html 5 mark up of <!DOCTYPE html> which now just has to tell the browser this is html, that is it good huh!

I forgive you if you fall asleep for this next part but I should probably give you some detail so here is all the declarations and what they mean from the W3C. Oh and W3C are the guys who set all the validation rules and tell you if your code is good and will render well etc. Again don’t get too hooked up on that as if you really want to do some great creative pieces you sometimes have to break them validation rules but at all times it is best to keep within them. Search engines will like you browsers will like you and your site will run well.

Common DOCTYPE Declarations

HTML 5

<!DOCTYPE html>

HTML 4.01 Strict

This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

HTML 4.01 Transitional

This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

HTML 4.01 Frameset

This DTD is equal to HTML 4.01 Transitional, but allows the use of frameset content.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”>

XHTML 1.0 Strict

This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

XHTML 1.0 Transitional

This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

XHTML 1.0 Frameset

This DTD is equal to XHTML 1.0 Transitional, but allows the use of frameset content.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

XHTML 1.1

This DTD is equal to XHTML 1.0 Strict, but allows you to add modules (for example to provide ruby support for East-Asian languages).

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

I can’t believe frameset is even mentioned that is ridiculously old and really just don’t worry about it.

Moving on

<html> well it is exactly what it says really this tells the document that this is where the html page starts. It is used to describe your page content.

HTML stands for Hyper Text Markup Language
HTML is not a programming language, it is a markup language
A markup language is a set of markup tags
The purpose of the tags are to describe page content

<head> The <head> element is a container for all the head elements. Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more.

The following tags can be added to the head section: <title>, <base>, <link>, <meta>, <script>, and <style>.

In the head section is where you can put links to load your css files, javascript files etc. It is also where your site title lives, you know the bit of writing you see at the top of your browser window (figleaves.com – Bras, Panties, Swimsuits, and Full Figure Lingerie). It is where all your meta tags can go such as meta description – a small description of your site that appears under the search result name in google, meta keywords – keywords for search engines to look for. Generally you would only do the following:

The charset bit is again just for validation and sometimes languages, it for the character encoding in pages, what characters are allowed to render etc. Geeky I know don’t worry that is all I am going to say about it.

Move your body wiggle your bottom

So then you reach your <body> tag well this is where everything sits that is going to be visual by the browser. So all your hard work as the designer comes to life here.

So now things get a little more interesting, hopefully.

This is where you will use all your “visual” tags. So if something is a main header you would use <h1> if it was a paragraph you use <p> bold <b> or <strong> etc etc now I could go through and write every tag and explain what they all do but, well this would just be huge then and stupidly boring and laborious. Your main tags you will use are:

Heading Elements

<h1>Largest Heading</h1>

<h6>Smallest Heading</h6>

Text Elements

<p>This is a paragraph</p>
<br /> (line break)
<hr /> (horizontal rule)
<pre>This text is preformatted</pre>

Logical Styles

<em>This text is emphasized</em>
<strong>This text is strong</strong>
<code>This is some computer code</code>

Physical Styles

<b>This text is bold</b>
<i>This text is italic</i>

Links

Ordinary link: <a href=”http://www.example.com/”>Link-text goes here</a>
Image-link: <a href=”http://www.example.com/”><img src=”URL” alt=”Alternate Text” /></a>
Mailto link: <a href=”mailto:webmaster@example.com”>Send e-mail</a>

A named anchor:
<a name=”tips”>Tips Section</a>
<a href=”#tips”>Jump to the Tips Section</a>

Unordered list

Ordered list

<ol>
<li>First item</li>
<li>Second item</li>
</ol>

Definition list

<dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl>

Tables – only on email or tabular data! Do not use these to build your site! Or you might as well and go and live back in the 90’s

<table border=”1″>
<tr>
<th>Tableheader</th>
<th>Tableheader</th>
</tr>
<tr>
<td>sometext</td>
<td>sometext</td>
</tr>
</table>

For a full list going into forms and block quotes etc take a look here or google it:

http://www.w3schools.com/html/html_quick.asp

The main thing is to always remember to close your tags and think about them logically if it is a bullet list well it is an unordered list. Tables are a bit different, firstly these are not used that often anymore and it won’t be too long until they are wiped out completely (Steve Hoskins prediction right there, note it down). Tables need to be thought about in a excel spreadsheet way each tr (table row) is a row of cells or tabular data (td). If the row above has 4 td’s the one below must have 4 td’s for the table to line up. Or you can use colspans to take up more than one column and rowspans to take up more than one row.

For example:

<table>
<tr>
<th>Tableheader</th>
<th>Tableheader</th>
</tr>
<tr>
<td>sometext</td>
<td>sometext</td>
</tr>
<tr>
<td colspan=”2”>this takes up both columns</td>
</tr>
</table>

To learn more about these you should visit http://www.tizag.com/htmlT/tables.php it will teach you all you need to know for email building!

One tag you will use A LOT!!! Is <div> with id’s and classes. These are what really build the structure of your site and separate sections and panels and footers etc. The id’s and classes are what are used with your css style sheets to build the framework of your site. We will get on to that later.

After all of your visual tags and your page is built you then end the body and html with </body> and </html>.

That in a nutshell is html! Congratulations you are now a fully fledged front end developer. Errr not quite although essentially you can build with just all them tags. It will just be pretty damn ugly and nothing at all like your wondrous design.

CSS – The good stuff!

What is CSS?

CSS stands for Cascading Style Sheets
Styles define how to display HTML elements
Styles were added to HTML 4.0 to solve a problem
External Style Sheets can save a lot of work
External Style Sheets are stored in CSS files

Styles Solved a Big Problem

HTML was never intended to contain tags for formatting a document.

HTML was intended to define the content of a document, like:

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large web sites, where fonts and color information were added to every single page, became a long and expensive process.

To solve this problem, the World Wide Web Consortium (W3C) created CSS.

In HTML 4.0, all formatting could be removed from the HTML document, and stored in a separate CSS file.

All browsers support CSS today.

CSS Saves a Lot of Work!

CSS defines HOW HTML elements are to be displayed.

Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file!

CSS Syntax

A CSS rule has two main parts: a selector, and one or more declarations:

The selector is normally the HTML element you want to style.

Each declaration consists of a property and a value.

The property is the style attribute you want to change. Each property has a value.

The id and class Selectors

In addition to setting a style for a HTML element, CSS allows you to specify your own selectors called “id” and “class”.

The id Selector

The id selector is used to specify a style for a single, unique element.

The id selector uses the id attribute of the HTML element, and is defined with a “#”.

The style rule below will be applied to the element with id=”para1″:

The class Selector

The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.

This allows you to set a particular style for many HTML elements with the same class.

The class selector uses the HTML class attribute, and is defined with a “.”

You can also specify that only specific HTML elements should be affected by a class.

E.g p.bordered {border: 1px solid red;}

This is where I could go into every single css property that there is available but again I would fear your heads rolling off so let’s try and keep it concise. If you want to know all the css properties available and how to use them I recommend going here http://htmldog.com/reference/cssproperties/

The most important things to understand is how floats work and the box-model.

Floats

With CSS float, an element can be pushed to the left or right, allowing other elements to wrap around it.

Float is very often used for images to align text to the left or right and wrapping around the image, but it is also useful when working with layouts. A good example being a menu floated to the left hand side of the main content. You have one div floated left with a width for the menu and then another div with the main content width a width floated left and margined away.

How Elements Float

Elements are floated horizontally, this means that an element can only be floated left or right, not up or down.

A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element.

The elements after the floating element will flow around it.

The elements before the floating element will not be affected.

If an image is floated to the right, a following text flows around it, to the left

Floating Elements Next to Each Other

If you place several floating elements after each other, they will float next to each other if there is room.

Turning off Float – Using Clear

Elements after the floating element will flow around it. To avoid this, use the clear property.

The clear property specifies which sides of an element other floating elements are not allowed.

The CSS Box Model

All HTML elements can be considered as boxes. In CSS, the term “box model” is used when talking about design and layout.

The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.

The box model allows us to place a border around elements and space elements in relation to other elements.

The image below illustrates the box model:

Explanation of the different parts:

Margin – Clears an area around the border. The margin does not have a background color, it is completely transparent
Border – A border that goes around the padding and content. The border is affected by the background color of the box
Padding – Clears an area around the content. The padding is affected by the background color of the box
Content – The content of the box, where text and images appear

In order to set the width and height of an element correctly in all browsers, you need to know how the box model works.

That’s all folks!

Seeing as this is only an introduction to HTML and CSS I think you have just about had enough thrown at you for one session! I encourage you to go out re-read this and experiment. It is a very difficult subject to explain with words, you need to use working examples to really get to grips with both html and css.

STRONGLY RECOMMEND!!!

Not sure if you got that but I strongly recommend you check this out. A free 30 day course on html and css and it covers all the topics and with a modern approach too. Also if you are anything like me and hate reading and would rather watch and do, then this is a video course too and it takes 20-30 mins a night that’s it! He says after rambling on, but I have honestly tried to keep it brief and concise and leave with many questions to go out there and find out more for yourselves, it really is the best way for you to pick things up and find “your own way” of doing things. Of course I am always here for any questions as well. Oh yeah! so the course is here:

http://learncss.tutsplus.com/