Introduction

Here you will find a great little tutorial to help you understand the basics in HTML and CSS coding. For this tutorial, you will build a fully-functional web-site using HTML and CSS which informs audiences about a Pixar character from Monsters Inc.; Mike Wazowski.  We’ll also link an external CSS stylesheet to style each of the pages. This tutorial is suitable for those with little to no experience in using HTML and CSS. 

Click here to preview a finished example of the website we are creating: Wike Wazowski Website

To begin with, you will need to acquire a program that will enable you to write HTML and CSS. ‘Text Editor’ is one such program that may be already installed on your computer, but there are better options that are freely available. Brackets and Sublime Text are free open-source text editing programs that are excellent options, but Adobe Dreamweaver is recommended. 

Adobe Dreamweaver is a software program for designing web pages, essentially a more fully featured HTML web and programming editor. The program provides a WYSIWYG (what you see is what you get) interface to create and edit web pages. Dreamweaver supports many markup languages, including HTML, XML, CSS, and JavaScript.

What is HTML?

Hypertext Markup Language is a standardized code that brings all the puzzle pieces together to view your website in a web-browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.

Download the wireframe

To assist with a planning and construction of this website, I have provided you with a wireframe/digram. You will refer to this to help construct your page. Click the button to download.

Step One: Managing you files/assets

Before we start making our website in Adobe Dreamweaver, we’ll organise all our files/assets into one folder.

For this task, you will need a profile picture. Search for Mike Wazowski in a Google web-search and save a profile image of the character. We can then go one step further and use the image to create swatches that can be used in this site. By using Adobe Photoshop, I used the eyedropper tool on the profile image and found three colours that we’ll use to represents the character. 

TASK: Organise your files into appropriately names folders

Create a new folder and call is Mike Wizowsky. Divide your assets into appropriately labelled folders and keep everything organized. Dreamweaver will require to designate a project folder in the next step, so therefore our files need to be contained within it – it will also improve our workflow and enable us to operate on a more efficient level. 

In the example (right), I have made new folder called “Mike Website” – this will be our “Root Folder”. Inside this folder, is a sub-folder called images. Place your profile image in here.

File Structure

Step Two: Open Adobe Dreamweaver & Manage a New Site

When you open Adobe Dreamweaver you will be need to manage a new site.

When you are prompted to do so, click on the ‘new site’ button and give your website a Site Name. Then, designate the folder you have created in the previous step as your Local Site Folder.This will tell Adobe Dreamweaver where to locate all our project files.

The next step is to start a new .HTML document and call it index.html. This is a conventional name for what is considered to be our websites home-page. The index.html page is the most common name used for the default page shown on a website if no other page is specified when a visitor requests the site. In other words, index. html is the name used for the homepage of the website.

Step Three: Your first line of HTML code

Make sure you are in ‘Split’ view and assess the HTML code in the code editor section.

The <!doctype html> declaration must be the very first thing in your HTML document, before the tag. The declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in.

Tip: Always add the declaration to your HTML documents, so that the browser knows what type of document to expect.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>

What are TAGS?

A HTML tag is a line of code that defines every structure on an HTML page, including the placement of text and images and hypertext links. HTML tags begin with the less-than (<) character and end with greater-than (>). These symbols are also called “angle brackets.”

LEARNING TASK: Changing your page title

Let’s start by changing the title of our web-page to ‘Home Page’. 

This is done between theTAGS. The HTML tag is one of the most important elements of an HTML document. The element is a container for all the head elements can include a title for the document, scripts, styles, meta information, and more.

Refer to the line of code (right) and change the title of your web-page to “Home Page”:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Home Page</title>
</head>

Step Four: Adding content to the ‘body’ element

Now let’s add some text to your website using HTML code. When adding content that is intended to be visible on your web-page, you need to include it in-between thetags. Lets add a few lines of code to get some text on our webpage:

In between the  tags, I have added a main heading, sub heading and paragraph text.

  • The main heading is encased in its own tag:
  • The subheading is encased in its own tag:
  • The ‘h’ tags range in numbers from 1-6; 1 being the largest heading size and 6 being the smallest heading size.
  • The body text is encased in its own tag:
  • The ‘p’ stands for paragraph and is a common tag used for regular body text
  • The text may look quite plain for now, but we’ll change the styling later using the power of CSS Adobe Dreamweaver will render your website in Live View.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Home Page</title>
</head>

<body>

<h1>Mike Wazowski - Main Heading</h1>
<h4>sub-heading</h4>
<p>paragraph text</p>

</body>

Styling text using HTML tags:

Bold Text:

Text can be styled to a basic degree using html tags. For instance, if you want your text to be bold, using the tag 

 <strong> This tag will create bold text </strong>
Italics:

You can emphasize characters/words and change them to italics using the tag. Don’t forget to close it using .

 <em> This tag will create italics </em>
Ordered/Unordered Lists:

There are two popular kids of lists that you can create using HTML; ordered lists and unordered lists.

Unordered lists look like this;

  • Item
  • Item
  • Item
  • Item
 <ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

Ordered lists look like this;

  1. Item
  2. Item
  3. Item
  4. Item
<ol>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ol>

Step 6: Attributes and adding images

All HTML elements can have attributes. Attributes provide additional information about elements, for example; The tag is used to embed an image in an HTML page. The src attribute specifies the path to the image to be displayed:

<img src="images/profile.png">

This line of code will locate and present the ‘profile.png’ which is in the images folder. The required alt attribute for the <img> tag specifies an alternate text for an image, if the image for some reason cannot be displayed. This can be due to slow connection, or an error in the src attribute, or if the user uses a screen reader.

<img src="images/profile.png" alt="Mike Wazowsky">