Advertisement

The Beginner’s Guide to Web Design: Part 1

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

Throughout this series you will learn how to create a website using the latest in web design techniques (HTML5 & CSS3). This series is aimed at those with absolutely zero previous knowledge of web design.


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

Modern Web Browser

As we're going to be creating our web pages using the latest standards (HTML5 and CSS3), we need a modern web browser which can understand the latest in web technologies.

Versions of Microsoft's Internet Explorer browser below IE8 simply won't cut it. If you're using IE7 or below, download one of the web browsers below.

If you're already using a different web browser, please check it matches the minimum requirements below for best performance.

"Why do I need a certain browser?" you may ask. Well, as HTML5 is relatively new, older browsers do not understand how to read the code and turn it into a webpage correctly.


Text Editor

HTML files are simply text files with a .html extension, so you don't need any specialist or expensive software like Dreamweaver to create them. In fact, your computer comes pre-installed with software which you can write webpages in – 'Notepad' on Windows, or 'TextEdit' (in 'plain text mode') on Mac.

While the software pre-installed on your computer will do, it's far from the best. I recommend downloading Notepad++ if you're on Windows or TextWrangler on Mac. Both programs are completely free and offer a number of features useful to web developers, such as syntax highlighting, tabbed file editing and line numbering.

For Mac users, I highly recommend purchasing either TextMate, Coda or Espresso. Windows users, try E-TextEditor.




Introduction to HTML

Every website on the internet is written in Hyper-Text Markup Language (HTML). The HTML language has grown and been extended over the years as the web has become more mainstream and websites find themselves requiring new features.

The HTML language is maintained by the World Wide Web Consortium (W3C) and the latest specification is currently HTML 5, which has added a number of new features to the language and is helping to pave the way to more interactive and feature-rich web pages.

A simple HTML page looks like:

 
	<!doctype html> 
	<html> 
	  <head> 
	    <title>Hello, World!</title> 
	  </head> 
	  <body> 
	    <p>Hello, and welcome to my website.</p> 
	  </body> 
	</html>

The above code will create the following website when opened in a web browser:


HTML is a very simple language to learn. You are simply inserting 'tags' within your content which outline how each bit of content should be displayed in a web browser.

For example, you'd insert tags into your page where you want new paragraphs of text to begin, to make text a heading within the document, to insert images, links to other pages on your site or elsewhere on the Internet etc.

HTML tags are wrapped inside < > angle brackets. Looking at the previous example, you will see every 'tag' is a pair. We have <html> at the top, and </html> at the bottom.

<html> informs the web browser that everything inside the tag pair is HTML code. The </html> tag tells the browser the HTML content has ended. The 'slash' in the last tag denotes this as the 'closing' tag.


NOTE: The <!doctype html> line must be included at the top of any HTML5 for it to be considered "valid" code. This line tells the web browser the Document Type of the rest of the page–in other words, which version of HTML the document is marked up in so that the browser can render it correctly.


The <head> … </head> section immediately following is where you place information about the webpage which will not be shown in the main page itself, but holds meta data about your page for the browser.

Inside the <head> section, we have the text "Hello, World!" wrapped inside <title> … </title> tags.

<title> literally contains the title of the current webpage which is used by the web browser to name the window/tab:


Following the <head> section, we have <body>. This is where the actual content for your webpage is placed. In the body we have a <p> tag with a little welcome text inside.

<p> marks-up a paragraph on your page. For example:

 
	<p>Once upon a time in a land far, far away there lived a princess who lived happily ever after.</p> 
 
	<p>The End.</p>

Marks-up two paragraphs of text. If we were to view that in a browser, we'll see the following:


You may be wondering why we need these <p> and </p> tags to display a paragraph. Well, if we didn't, and wrote the webpage like this:

 
	Once upon a time in a land far, far away there lived a princess who lived happily ever after. 
 
	The End.

The page will look like this in a browser:


As you can see, the browser ignores any formatting we make in the file. We could write our example webpage as follows and it will display the same in the browser:

 
	<!doctype html><html><head><title>Hello, World!</title></head><body><p>Hello, and welcome to my website</p></body></html>

The browser is only interested in what the HTML tags tell it to do. It will ignore any whitespace you include in the document (extra spaces, tabs, new lines etc.)


Creating a simple web-page


Now you understand the very basics of HTML, let's make our first ever webpage! The image above is what this page will eventually look like.

Create a new folder somewhere on your computer and name it 'html-from-scratch'. Using your preferred text editor, create a new blank file and save it in this folder as 'my-first-webpage.html'.

Enter the following in file:

 
	<!doctype html> 
	<html> 
	  <head> 
	    <title>HTML From Scratch</title> 
	  </head> 
	  <body> 
	    <!-- content goes here --> 
	  </body> 
	</html>

The above is a basic HTML 5 file layout. We've declared the Document Type on the first line, opened our <html> and <head> tags and set "HTML From Scratch" as the title for the page. We then close the head and open the body.

On line 7 we have included a comment. Use comments to leave extra info in your code which won't be displayed in your webpage. Mark-up a comment by wrapping your text inside <!-- and --> tags.

Finally, we close off our opened body and html tags to finish the document.


Header

Remove the <!-- content goes here --> line from your source code and type out the following:

 
	<header> 
	  <h1>HTML From Scratch</h1> 
	</header>

The <header> tag is a new element introduced in HTML5 which exists to mark-up and structure the 'header' section of a webpage. The header is the top section of a webpage, usually where the site's name is.

Prior to HTML5 we used <div id="header"> and </div> (or something similar), but I won't go into details about older specifications of HTML as we're learning the latest standard.

IMPORTANT: <header> is not to be confused with <head>. They are both completely different tags.

Inside our header we include a <h1> tag. H1 is used to mark-up the main heading on your page (in this case, the name of our site). HTML contains header tags from 1-6, with <h1> being the largest, most-important title on the page down to <h6>.



Navigation

Next, we'll mark-up the navigation menu for the website. Following the closing </header>, type out the following:

 
	<nav> 
	  <ul> 
	    <li>Home</li> 
	    <li>Nettuts</li> 
	    <li>Google</li> 
	  </ul> 
	</nav>

This chunk of code may appear a little scary, but let's break it down. The block above marks-up a navigation area (<nav>) which contains an unordered list (<ul>) with three list items (<li>).

<nav> is a new HTML5 element for marking-up a navigation area on a website. This is typically used to hold the main navigation menu for your website, however since we're only creating a single web-page right now, we'll just make a link to Nettuts and Google. <ul> creates a bullet-point list, and each <li> item (list item) is a new bullet-point in the list.

Save your file, and open 'my-first-webpage.html' in your web browser. You should see this:


As you can see, the <title> tag is working correctly, the <h1> tag displays a large title at the top of the page, and our bullet-point navigation list is displaying correctly.

You may notice that we have one problem with our navigation list right now: the items aren't hyper-links and so they aren't clickable. To fix this, change the three list items (<li>) to:

 
	<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>

Inside each of our <li> list items, we've made the text into hyper-links. The <a> tag creates an anchor - a hyper-link to another page on your website or another location on the Internet.

For the anchor tag to actually link somewhere, we provide it with the address to link to inside an 'href' parameter. Parameters go inside the opening tag (<a href="">...</a>).

On our webpage, the 'Home' link goes to the current page ('my-first-webpage.html'), 'Nettuts' goes to Nettuts (http://net.tutsplus.com) and the 'Google' link goes to, you guessed it, Google.



Main Content

Following the </header> tag, type out the following:

 
	<section> 
	  <p>This is the main content for my website.<br /> 
	  Here is some stuff about me:</p> 
 
	  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p> 
	</section>

The <section> tag is also new in HTML5 (we used to use something like <div id="content">) and literally creates a 'section' of content on the webpage. In this case, we're using <section> to mark-up the main section of the page where our content goes.

Inside, we have two paragraphs containing random text. Notice in the first paragraph we have a <br /> tag. This is a line break; in other words, the text following it will display on a new line, but in the same paragraph.

The <br /> tag is special as it does not have a closing tag. Instead, the closing forward-slash ('/') is included at the end of the tag. This is because a line-break contains no content, it exists purely for aesthetic purposes, otherwise we'd be writing <br></br> which is a little pointless.

Several other tags are also self-closing, such as <img /> and <hr />, which we'll look at later.



Images

Inside your 'html-from-scratch' folder, create a new folder named 'images'. Save the image below into that folder (right-click, Save Image As):


Now, back inside the main content for the website, before the closing </section> tag, enter the following to insert the image on our page:

 
	<img src="http://tutsplus.s3.amazonaws.com/tutspremium/web-development/076_beginnerWebDesign/part1/images/envato-stock.jpg" alt="Envato Stock Image" />

The <img /> tag, like the anchor tag, is self-closing and accepts most of it's contents as parameters in the opening tag.

src="..." stands for 'source' (the path to the image). The image could be stored somewhere elsewhere on the Internet, or locally with the webpage. Here, we've set the tag to display the image we saved in our images directory.

alt="..." contains the 'Alternative Text' which will be displayed if the image fails to load. You usually briefly describe the image here.

Take a look at the page now. The image should display:



The Sidebar

Next, let's mark-up the sidebar of our webpage. Enter the following after the closing </section> tag:

 
	<aside> 
	  <hr /><h2>Sidebar</h2> 
	  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas:</p> 
	  <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> 
	</aside>

<aside> is a HTML5 tag for marking-up a section of your webpage set aside of the main content, such as a sidebar, which contains less-important information content than the main section of the page.

Inside our sidebar, we have a third-level heading (H3) titled "Sidebar", a paragraph containing some random place-holder text and then an unordered list with 3 items.

Take a look at your page, and you should see the above content directly below what we placed in the <section> tag. Don't worry that the sidebar isn't actually a sidebar yet, this is the way HTML was designed. More on that shortly.



The Footer

In the footer, the very bottom, of our website, we will include a small copyright notice. Some websites take their footer a little further and other details such as a sitemap.

 
	<footer> 
	  <p> 
	    Copyright &copy; Your Name 2010.<br /> 
	    Part of a tutorial for <a href="http://net.tutsplus.com">Nettuts+</a>. 
	  </p> 
	</footer>

<footer> is also a new tag introduced in HTML5. You're probably getting the hang of this now, and should notice we've included a paragraph in the footer containing our copyright notice and a line break, followed by a link back to Nettuts.

NOTE: See that '&copy;' in our footer? That's a HTML entity. This entity will display a copyright symbol (©) when rendered in the browser.

Read more on HTML character entities on Wikipedia.



In Part 2

That concludes the first part of this series. In just a short space of time, you've already accomplished quite a lot! You've learnt a number of basic HTML tags, and hand-coded your first webpage.

In the next part, we'll be learning how to use HTML's partner-in-crime–CSS–to make the webpage look nice, and turn the basic, un-styled page above into our final product:


Advertisement