On Making a Web Site – HTML / CSS Layout

Attributes

Some HTML elements can or need to use attributes. Attributes give an element more details and help refine what it’s supposed to do. I’m making them sound a bit esoteric here, but they really are easy. Attributes go inside the opening tag of an element. Here’s an example of an anchor (link) element:

1

<a href="http://www.ianswenson.com/">my web site</a>

Here is that example on a web page: my web site

Now the anchor element is denoted by the <a></a> tags, but that isn’t enough by itself. We put some text inside it and all the browser knows is that it’s supposed to be a link, but it doesn’t know where to send the user when he or she clicks on it. That’s what the href attribute is for (stands for html reference).

Here’s another common element that requires attributes:

1

<img src="picture.jpg" width="320" height="240" alt="This is a picture of some sort." />

The <img /> element is for images. You’ll notice right off the bat that it’s different than all the other elements you’ve seen so far. Instead of having opening and closing tags, it is self closing — ergo the forward slash before the closing bracket.

You assign the picture location with the src attribute. Width and height are in pixels, so you don’t specify the unit of measurement (as you do in CSS). The alt attribute is for a user who has images turned off or a screen reader. It is required for semantically correct code; you can leave it blank (alt="") but it’s a poor practice.

Not all HTML elements need attributes (although anchor and image elements do or they’re worthless), but you’ll use attributes a lot in order to interact with your CSS. We’ll get into that a bit later.

Boxes

HTML primarily uses boxes. You could, if you wanted to, assign a border to every box on a web page and you’d see loads of rectangles. A box, by default, gives you what they call in the printing world a line break. That means each box will be stacked on top of each other vertically not standing next to each other horizontally.

The paragraph element in HTML is a box element. It can be assigned its own margin, border, and padding (we’ll get to those more in the CSS section). And when you close it, it will by default provide its own line break.

But not all elements in HTML are set to display like box elements. You also have what are called inline elements. These do not provide line breaks, nor can they get assigned margin, border, or padding. You’ve already seen an example of this: the strong element. Most inline elements are used to modify text.

Now I’m going to introduce you to two HTML elements that you’ve likely not come across if you haven’t played with CSS before. The <div> element and <span> element are two you will use commonly from here on out. Div means division, but I’ll just call it a div.

A span is a great way to style text to your liking and a div is a good way to make a box out of thin air. But why would you want to make a box out of thin air? There are many answers to that question, but the primary purpose is for layout. It’s nice to be able to grab a few items and separate them from others. This will make more sense soon I promise. But for now, a usage example of divs and spans:

1
2
3
4
5
6
7
8
9
10
11
12
13

<html>
<head>
	<title>Divs and Spans</title>
</head>
<body>
	<div>
		<p><span>Lorem ipsum</span> dolor sit amet, consectetuer adipiscing elit.</p>
	</div>
	<div>
		<p>Pellentesque <span>ipsum urna, dictum vel, porttitor at,</span> luctus a, arcu.</p>
		<p>Donec turpis. Duis molestie felis at magna. Etiam vitae lorem.</p>
	</div>
</body></html>

The box elements here are the body, div, and paragraph elements and the only inline elements are the two span elements.

Now if you were to plug this code into an .html file and fire it up in your browser, you wouldn’t notice much of a difference from the previous example. Only the unbolded text and the title would visually separate the two pages. However, with CSS, the two pages could be drastically different…

page 1 page 2 page 3 page 4 page 5 page 6

Jul 30.08

Filed under: This Site by ianswens

One Response to “On Making a Web Site – HTML / CSS Layout”

  1. May 26th, 2009

    john commented thusly:

    Very helpful. Just wanted to say thanks.

Leave a Reply

You must be logged in to post a comment.