Sigurdhsson

Hello again. In case you didn’t know already, this is the second part of a series of tutorials called the Web 101, which aims to teach anyone how to create websites using modern techniques, such as HTML and CSS. Anyway, today we’re going to take care of the things that essentialy make the web what it is. “Content is king” is a common, and very true saying – and today you’re going to learn how to use HTML and CSS to create a basic yet stylish presentation of the king. In case you haven’t read part one yet, do that first.

The structure

First, we need to create a HTML document with the actual content. If you need some dummy text during this part, go to lipsum.com and get four or five paragraphs of Lorem Ipsum. Let’s get started. First, create a new HTML document with the basic elements just as you did in part one. Give the document a suitable title and headline.

Readable content

We’ll start by adding some text to the document. Text is usually placed inside paragraph elements, which you create using the p tag. Here’s an example:

<p>This is a paragraph of text. Text is usually meaningfull, but right now I'm just stalling to make the article longer.</p>
<p>This is another paragraph. Dividing text into paragraphs makes it easier to read. The text looks longer, too.</p>

Create a few paragraphs of text in your document now. As with all visible things, they go into the body element, and it’s quite logical that they go in after the headline. To make the text more interesting, you can emphasize some of it with an em element, or really emphazise it using a strong element. There’s also special elements for quoting text, among other things. For now we will move on though.

Pretty pictures

What if you’re writing about your vacation or something, then? You feel something’s missing – it’s dull and colorless, you need something liven it up. That’s where images come in. They’re easily added to your document using an img element. An img elemet should have two so-called attributes: the image URL is specified in the src attribute and the alt attribute should contain a text alternative to the picture. This is often a short description. Here’s an example:

<img src="http://sigurdhsson.org/wp-filez/voices.jpg" alt="Screencap from the anime movie Voices of a distant star">

This will display the specified image, and if you hover over it, or turn off image displaying in your browser, you should see the alternative text. Now, try inserting an image in your document. You can put it anywhere inside the body element, as long as you don’t put it inside a p element. They are for text only, and can’t contain other so-called block-level elements. Elements like em, strong, a etc. are fine inside p elements though. Now, the image will probably look like it was thrown in there, and it might look ugly, but we’ll take care of that later.

Making contact

The last important HTML feature we will discuss today is the a element. With this, you can link to other web pages, both you own and external ones. This way you can refer your readers to other places, i.e. “Please check Tom’s blog for more information,” or “Check out my page about skin diseases.” (I know, I’m not good at thinking up examples.) Here’s another example:

<p>Use <a href="http://google.com">Google</a> to search the internet!</p>

As you may notice, the a element is inside a p element. This is because a is an inline element, an such elements must always be inside block elements. Insert a few links in your document and save it. They’ll turn blue and when you click them you will be taken to the target specified in the href attribute. Don’t feel bad for thinking these links look ugly, most people do. We’ll change this in a moment.

The aesthetics

Time to make this look good. Create a CSS document and reference it in the HTML file, just like you did last time. We’ll start by formatting the text. To do this, we’ll format the p element. Have a look at this example:

p{
  font-family: Georgia, serif;
  line-height: 1.2em;
  width: 20em;
}

This sets the font of all p elements to Georgia, and sets the line height to 1.2 ems. An em is equal to the height of one character, so in his case it is equivalent to setting the line height in Word (or any other word-processing software) to 1.2. Note that the dot is used as a decimal point, not a comma. This might confuse people that come from non-english countries. We also set the width to 20 ems, effectively cutting the text off at roughly 40 characters.

Now we’re going to take care of the image. What we’re going to do is to add a border, some padding (space between the border and the image), a margin (space between border and surrounding elements) and finally float the element, in this case to the left. This will make the text wrap around the image. Have a look:

img{
  border: 3px black solid;
  padding: 3px;
  margin: 1em;
  float: left;
}

As you might have figured, the border will be 3 pixels wide, black, and in one peice. You can change the style by replacing solid with something else, such as dotted or dashed. There’s a lot of styles but frankly, solid, dotted and dashed are the only that look good.

What about those links then? Well, this gets tricky – links can have three states. They can be normal, visited or active. Additionally, they can have a hover style, which is active when the mouse hovers over it, and a selected style, used when the link is tabbed to. To make this easy, we will style all states the same way, and make the hover style different. Here’s an example:

a{
  color: #990000;
  font-weight: bold;

}


	
a:hover{
  color: #cc0000;

}

The first rule makes the link a dark red, with a bold text style. This style should be thought through, because it is of some importance that the link can be distinguished from normal text. Note that when you use this, the link will still be underlined, because CSS rules are accumulating. Just because we add a new set of rules it doesn’t mean the old ones are discarded. To remove a previous rule you have to override it by specifying a new value. Now, the only thing the hover style does is to apply a lighter red. This is a subtle change used on many sites, but you can do practically anything here. I just happen to think this looks pretty good. Again, the style inherits from previous styles, so it’ll still be bold and underlined – but since we override the color rule, the color will be different.

That’s all for now. Join me next time when I’ll be talking about lists (I promise this time) and divisions.