Advertisement

The Beginner’s Guide to Web Design: Part 3

by
Student iconAre you a student? Get a yearly Tuts+ subscription for $45 →

In the final installment of the series we'll add a new page to our website where we will experiment with a few HTML elements, and expand on our CSS knowledge.


Also available in this series:

  1. The Beginner’s Guide to Web Design: Part 1
  2. The Beginner’s Guide to Web Design: Part 2
  3. The Beginner’s Guide to Web Design: Part 3

Preparation

We're going to add one new page to our website which we'll use as a sandbox for testing different HTML elements and learning to style them with CSS. We'll call this page "html-elements.html", so first thing we need to do is add a link to the page in our navigation menu.

In the "html-from-scratch.html" file, find the navigation (<nav>) section:

 
	<nav> 
	  <ul> 
	    <li><a href="my-first-webpage.html">Home</a></li> 
	    <li><a href="http://net.tutsplus.com">Nettuts</a></li> 
	    <li><a href="http://www.google.com">Google</a></li> 
	  </ul> 
	</nav>

And replace the middle link (Nettuts) with a link to a "html-elements.html" file; set the link text as "Elements":

 
	<li><a href="html-elements.html">Elements</a></li>

Now, make a copy of the "my-first-webpage.html" file and name it "html-elements.html".



Highlighting the Current Page

Inside the new HTML file, remove everything between the <section> tags to remove all the main content from the page. We'll fill in the new content shortly. First, we need to distinguish in the navigation what page we are currently on as right now each link look identical, which leads to all sorts of usability problems.

To distinuish a link to the current page from other links, we'll add a class of "current" to the <li> which contains the link to the current page.

So, on the "my-first-webpage.html" page, change the first link to:

 
	<li class="current"><a href="my-first-webpage.html">Home</a></li>

And on "html-elements.html" change the middle link to:

 
	<li class="current"><a href="html-elements.html">Elements</a></li>

This allows us to target the link of the current page with "nav .current a". Inside the CSS file, find the following style:

 
	nav a:hover { 
	  text-decoration: underline; 
	}

Change the selector to:

 
	nav a:hover, nav .current a {

You can target several elements with the selector by separating each with a comma (,). Now, if you look at each of the webpages in your browser, the appropriate link should be underlined.



Text Elements

Inside the <section> for the new page, paste the following. It contains a few new HTML elements:

 
	<h2>Text Elements</h2> 
	<p> 
	  Pellentesque habitant morbi tristique <strong>senectus et netus</strong> 
	  et <em>malesuada fames ac</em> turpis egestas. 
	  <q>Vestibulum tortor quam, feugiat vitae, ultricies eget</q> 
	  <cite>Dan Harper, 2012</cite>.<br /> 
	  Donec eu libero sit amet quam egestas semper. Aenean 
	  <a href="http://example.com">ultricies mi vitae</a> 
	   est. Mauris placerat eleifend leo. 
	</p>

Ignore the text itself, it is simply Lorem Ipsum place-holder text which has been used in the printing industries since the 1500s.

On line 3, we have the <strong> tag which by default makes text bold in the browser. Use strong to make something stand out in text. Older versions of HTML use the <b> tag; however this has since been deprecated. Stick to <strong>.

Line 4 introduces <em> which emphasises text by making it italic. Use this to make text stand out - but not as much as <strong> does. Older versions of HTML use the <i> tag; however like <b>, this has since been deprecated.

On the following line we demonstrate <q> which marks-up a small quote within your text. It automatically wraps the text inside it in “ ” quote marks.

<cite> is related to the <q> tag and should be used to add the citation for a quote in your text.


Large Quotes

We've seen how we can insert small quotes inside text using the <q> tag, but HTML also provides <blockquote> for larger quotes, like this one here at Nettuts+

This is what at <blockquote> looks like here at Nettuts+

Add the following to the new HTML following the previous text:

 
	<h2>Large Quotes</h2> 
	<blockquote> 
	  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames.</p> 
	  <p><cite>Joe Bloggs, 2010</cite></p> 
	</blockquote> 
 
	<p>Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. 
	Donec eu libero sit amet quam egestas semper.</p>

Here, you can see that we include paragraphs inside the <blockquote>. We can also use the <cite> tag inside to add a citation.


Add the following CSS style to your stylesheet to style the blockquote:

 
	blockquote { 
	  border-left: 2px solid #999; 
	  margin-left: 30px; 
	  padding-left: 10px; 
	}

Adding a small border to the left of a blockquote has become a common trend recently.


Lists

 
	<h4>Header Level 4</h4> 
	<ul> 
	  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> 
	  <li>Aliquam tincidunt mauris eu risus.</li> 
	  <li>Vestibulum auctor dapibus neque.</li> 
	</ul> 
 
	<ol> 
	  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> 
	  <li>Aliquam tincidunt mauris eu risus.</li> 
	  <li>Vestibulum auctor dapibus neque.</li> 
	</ol>

Here you see the use of an unordered list (<ul>), and an ordered list (<ol>).


You can alter the style of the bullet-points using the list-style-type CSS property. For example, we could change the bullets used for the ordered list from decimal numbers to roman with the following:

 
	section ol li { 
	  list-style-type: lower-roman; 
	}

Targetting the 'list items' inside an 'ordered list' in the 'section'.


Don't like the traditional circle bullet-point used on unordered lists? How about a square instead:

 
	section ul li { 
	  list-style-type: square; 
	}

See this page at W3Schools for all the different styles you can use.


Tables

You may have read that you shouldn't use tables in your website. That refers strictly to using tables to create the layout of your website, as we now use CSS for creating the layout.

Tables should only be used for tabular data.

To mark-up a table, use the <table> tag. Each row inside the table is then created using a <tr> tag. Each row can then one of two types of cells:

  1. Header cells which mark-up the top cell in a column;
  2. Standard cells which contain normal data.

Creating a table

Start by adding the following code to your page:

 
	<table> 
	  <tr> 
	    <th>Column #1</th> 
	    <th>Column #2</th> 
	    <th>Column #3</th> 
	  </tr> 
	</table>

You can see here we've created a new table, with a single row. This row then contains three header cells labelled "Column #1" to "Column #3".

Let's add some content to the table – add the following before the closing </table> tag:

 
	<tr> 
	  <td>Lorem ipsum</td> 
	  <td>Dolor sit amet</td> 
	  <td>Consectetuer al</td> 
	</tr> 
 
	<tr> 
	  <td>Adipiscing elit</td> 
	  <td>Habitant morbi</td> 
	  <td>Tristique senectus</td> 
	</tr> 
 
	<tr> 
	  <td>Lorem ipsum</td> 
	  <td>Dolor sit amet</td> 
	  <td>Consectetuer al</td> 
	</tr> 
 
	<tr> 
	  <td>Adipiscing elit</td> 
	  <td>Habitant morbi</td> 
	  <td>Tristique senectus</td> 
	</tr>


Styling the table

Well the content's there, and it's definitely a table, but let's add a bit of style to it.

First, we want the table to take up the whole width of its container. We also need to remove the borders in the table so we can style the rows and cells correctly. Add the following to your CSS file:

 
	table { 
	  border-collapse: collapse; 
	  width: 100%; 
	}

Now let's make the header cells stand out by setting their background colour to a dark grey, and the text colour to white:

 
	th { 
	  background-color: #222; 
	  color: #fff; 
	}

Add a small padding to each cell, along with a border to help separate each cell with the following:

 
	th, td { 
	  border: 1px solid #444; 
	  padding: 5px; 
	}

Finally we'll add some zebra-stiping (alternating row background colours) to the table:

 
	tr:nth-child(even) { 
	  background-color: #fdfdfd; 
	} 
 
	tr:nth-child(odd) { 
	  background-color: #f1f1f1; 
	}

Here we're using the new CSS3 :nth-child(odd) and :nth-child(even) selectors to target every even, and every odd numbered row.



That's a wrap!

By now you should have a solid grounding in how to mark-up simple webpages using HTML and an understanding in how CSS is used to target and style specific HTML elements on your page. We've covered a lot, but you're still in shallow waters. Keep exploring Tuts+ Premium to learn more!

Advertisement