After you’ve figured out navigation, layout, and sent out requests for content, it’s time to start building your site. This lesson deals with basic HTML and CSS along with best practices using for both.
There are many web editors out there, but for this lesson I’ll be using Dreamweaver’s basic starter page for my example.
Starting on the build
So, let’s have a look at what a blank page looks like in code. A basic Dreamweaver HTML page is shown below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document Title</title>
</head>
<body>
</body>
</html>
There are six parts here that make up a solid base for your page. Your Doctype, html tags, head tags, meta data, the title tags, and last the body tags. All are part of the HTML code.
HTML (HyperText Markup Language)
Your HTML is the skeleton for your CSS. It supports the body of your webpage while CSS provides the muscles and skin. Therefore, if your HTML is incorrect, it doesn’t matter if the CSS is perfect, your website will fail.
First off, let’s talk about HTML and XHTML (Extensible HyperText Markup Language). HTML is mainly comprised of tags like the example above. XHTML is not very different from HTML- except that it’s stricter which allows browsers to process the code faster and eliminate errors caused by incorrect markup.
For example, <img src=”example.jpg”> would not display in XHTML because the ‘img’ tag is not closed. To display correctly, it would need to look like this:<img src=”example.jpg” />
Yes, the ‘/’ needs to be at the end of every tag to close it in XHTML.
HTML is not so picky and will take either <img src=”example.jpg”> or <img src=”example.jpg” />.
Generally, it is good to use HTML for your doctype, but practice XHTML within the HTML. Why? Because it’s better for the browser.
XHTML within HTML
By following all the XHTML rules you help the browser load pages faster and it’s less confusing to search through. That’s where XHTML is a plus- however, you may not know all the rules of XHTML, or you might miss a rule by accident, rendering your whole page useless until you find the problem. HTML doesn’t care about little mistakes, so by using XHTML style in and HTML page, you cover accidental code flubs so that your page will still work when you open it.
Some major differences in XHTML and HTML
HTML
<br> <hr> <img src="example.gif">
<P>Something</P>
XHTML
<br /> <hr /> <img src="example.gif" />
<p>Something</p>
For more on XHTML rules: http://www.w3schools.com/xhtml/xhtml_html.asp
HTML Basics
NOTE: I’ll be writing in XHTML, but I use it within an HTML framework. Keep this in mind.
What is a “doctype” and why is it on my page?
First off, the doctype declaration should appear before any other markup on your page. Why? Because it is an instruction to the web browser about what version of the markup language (eg: HTML, XHTML and their variants) the page is written in.
For more on this see: http://www.w3schools.com/tags/tag_DOCTYPE.asp
Placement
The placement of code in the HTML specifies what elements are within elements and their hierarchy to other elements. For example, let’s say I wanted a box within a header. I would have:
<div id=”header”><div class=”box”>Box Content</div></div>
The ‘div’ tag calls the CSS to place the header on the page and insert the box into the header. It is very important to close your divs as it tells the CSS styling to stop past the ‘</div>’ point. It is also important to nest your tags to avoid conflicting style properties or code errors. To style the elements for each div tag, you must go into the CSS and not the HTML. Remember that most HTML is strictly for organizing.
<head>…</head>
Your ‘head’ tags should contain all information a browser needs to render the content in the ‘body’ tags as well as information pertinent to search engines and browser needs for your page.
Tags used in the ‘head’ are:
<title> ... </title> displays title of page for the browser to put on the tab or on the window’s title bar
<meta /> gives data for search engines to organize your page by/tells what your page is about
<base /> specifies a default address or a default target for all links on a page
<link /> gets a resource reference such as a CSS style sheet
An example for calling a style sheet is below.
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
So, what’s going on here?
Well, ‘rel’ says that the relationship between the current document and the linked document is that it’s a style sheet, ‘href’ calls the actual style sheet from its location, ‘type’ tells us that the style sheet is formatted in text/css, and ‘media’ tells us that it’s for a computer screen.
If you wanted to make this style sheet for a phone, you would change ‘media=”screen”’ to ‘media=”mobile”’. ‘media’ allows you to have multiple style sheets on a page that target different devices. (ex: style sheets for mobile, print, and screen)
<body>…</body>
Your ‘body’ tags contain the page elements that will show up in the browser window. Organization of these elements is key. Keep your tags correctly nested. I can not stress this enough. Keeping tags well organized in your code will help in a lot of ways.
Some commonly used tags in the ‘body’ are:
<h1> ... </h1> creates a heading with h1-h6, h1 being the largest and h6 being the smallest
<p> ... </p> organizes content into paragraphs
<a></a> designates a link
<img /> places an image within the page
<br /> puts a break in-between text
<hr /> creates a horizontal rule- ie, a line- between elements
<strong> ... </strong> strong emphasized text (bolds text)
<em> ... </em> emphasized text (italicizes text)
<ol><li> ... </li></ol> ‘ol’ is an ordered list, ‘ul’ is an unordered list, ‘li’ in both ‘ul’ and ‘ol’ is a list item
<div> ... </div> tag defines a division or a section in an HTML document- mostly used to call style elements from the CSS
<form> ... </form> used to place a form element within the page
Some natural hookups:
There are some tags that naturally have certain things following them.
For example, <a href=”...”> ... </a>.
‘a’ says that it’s a link and ‘href’ tells the link where to go. <img src=”...” /> ‘img’ says that the element is an image and ‘src’ tells the location of the image you want displayed.
Putting together CSS and HTML using ‘div’
The ‘div’ tag when used with CSS will either have ‘id’ or ‘class’ attached to it.
ex: <div id=”...”> ... </div> or <div class=”...”> ... </div>
A ‘div’ can have multiple classes attached, but only one id. Also, a certain id can only be used once on a page where as a certain class can be used multiple times.
ex: <div id=”container” class=”numberone” class=”numbertwo”> ... </div>
BEST PRACTICES
- Put CSS in the header just above the </head> tag. (In order to have all styles ready for the body when it loads.)
- Put links to scripts as well as scripts themselves (ex: jQuery, mootools, javascript) at the bottom of the page- just above the </body> tag. (This encourages faster page loading.)
- Keep things well organized and, when necessary, document where your div tags end like so:
</div> <!-- example div ends here -->
- Nest your tags.
CSS (Cascading Style Sheets)
Getting the look
The main styles of the site, look and layout, are controlled mainly through CSS. If you need to edit the presentation of an element, div, or id use CSS. CSS and HTML together make a website fast loading and easily customizable. Using a CSS style sheet, you can change an element of your site across all the pages that have that element simply by editing your CSS. This cuts down on mistakes and makes your time spent on code more efficient.
CSS Example
Some examples of CSS.
h1 {
font-size: 2.6em;
padding:5px 0 20px 0;
}
#content {
padding-top:15px;
font-family:Verdana, sans-serif;
}
.sec-nav {
padding:0;
margin:0 0 30px 0;
}
li:visited {
color: #00CC00;
text-decoration: none;
font-weight: bold;
}
Writing style
Before we get into the guts of this operation, I’m going to tell you about how people write the optional parts of code.
There are 3 types of naming conventions:
- camel case
- dash
- underscore
Let’s say I have something in my CSS I want to call “Slider Thumbnails”. Well, spaces are defined as starting something new, so I can’t use the above. Solution- one of the 3 naming conventions.
Camel Case: sliderThumbnails
Dash: slider-thumbnails
Underscore: slider_thumbnails
Which do I use? I use underscore because it seems easier to read for me, but this is all subjective. You pick the style that works best for you. What is important is that there are no spaces within the name.
About CSS
CSS can be used in three different ways: inline, internal, and external.
Inline is when you use ‘style’ attached to an element to build CSS for a single element within the HTML.
ex: <p style=”color:red;”>…</p>
Internal is when you place your CSS styles in the ‘head’ tags.
ex: <head>
<style type="text/css"> p {color:red;} </style>
</head>
External is when you have a separate style sheet and link to it from the ‘head’.
ex: <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
The external style sheet will have formatting like this inside it: p {color:red;}
What is a CSS format?
CSS creates a selector for HTML to use when you group elements you want styled on your page. The selector then has notes on what properties you want added and what you want the properties to be.
ex: selector { property:value; }
There are 2 ways of organizing CSS: single line and multiple line – both are correct so it’s a matter of preference which one you use.
selector { property:value; property:value; }
selector {
property:value;
property:value;
}
Your selector can be named anything you want. (With the exception of element selectors.)
Different types of selectors
There are different types of selectors: element, id, class, and pseudo.
Element selectors retain their proper html titles such as ‘body’, ‘p’, ‘h1’, ‘ul’, ‘ol’, ‘a’, ‘img’, etc… and do not use any identifying features. ex: img
Id selectors use ‘#’ before a name and are unique. ex: #container
Class selectors use ‘.’ before a name and are not unique. ex: .thumbnail
A pseudo selector uses ‘:’ and must be attached to an element selector. ex: a:hover
As stated before in the html section, an ‘id’ is unique and the same id can’t be used numerous times on a page. Use ‘id’s for main containers and other large boxes on a page. A ‘class’ is not unique and can be used multiple times on a page or multiple times on an element.
For more on this see: http://css-tricks.com/the-difference-between-id-and-class/
Property and value
A property in CSS tells what you want to style within the selector and the value tells how you want it styled. For instance, I would like a red boarder around my header.
ex: #header {border-color:red;}
“#header” would be my selector while “border-color” would be my property. “red” is the value I want displayed as the “border-color” on the “#header”.
There are many different types of properties. Some deal with position while others handle styles and spacing. For a full list of properties, see http://www.w3schools.com/css/css_reference.asp and scroll down to CSS Properties.
Decoding CSS
Let’s take apart this CSS.
#wordmark{
background:url(images/wordmark.png) top left no-repeat;
width:709px;
height:112px;
position:absolute;
top:0px;
left:10px;
text-indent:-9999px;
margin:0;
}
It’s an ‘id’ named wordmark.
It has a background image placed in the top left and the image is not repeated.
It’s 709×112 pixels, and its position is absolute on the page with the coordinates being top 0 and left 10. It has a text indent of -9999px, which means the text is hidden off the page, and the margin is 0 so other elements will come right up against it.
Most CSS properties are easy to figure out. Especially in things they control. Just use common sense and in most cases- what you think it does it what it does. Some tricky properties are ‘color’, which actually controls the color of your text, and ‘margin’ vs ‘padding’.
Margin determines the amount of space around your element.
Padding determines the amount of space within your element.
Bundle up
Sometimes you want to specify a lot of things that actually all relate to one property. Well, there is a way to do that.
background:#990000 url(images/footer-bg.png) top left repeat-x;
font:bold 1.7em/175% "Lucida Sans",Lucida Sans Unicode,Verdana,Helvetica,sans-serif;
border:1px #ccc dotted;
padding:4px 0 4px 4px;
margin:3px 0px 10px 15px;
This helps lighten your code and makes things run faster. It also makes things easier to find.
BEST PRACTICES
- Separate your sections with descriptive headers. (ex: /* styles for slider */)
- Use CSS to style all links and header elements so that they appear the same throughout the site.
- Watch out for conflicting CSS. In order to remove conflicts, sub list the element when necessary. (ex: #containingDiv h1)
Those of you familiar with the UA WordPress Theme have probably seen the contact form shortcode. It’s a basic contact form with a couple of customizations. For most people looking to add a contact form to a web page, the shortcode does the job. However, when you want a custom form things can get more complicated. I have recently built a new plugin that I hope will make things a bit simpler.
I’ve included a screenshot here of what that dropdown menu looks like. In this example, there are several custom templates to choose from.
