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.
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.
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.
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.
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.
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>
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.”
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>
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.
<!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>
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>
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>
There are two popular kids of lists that you can create using HTML; ordered lists and unordered lists.
Unordered lists look like this;
<ul> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> </ul>
Ordered lists look like this;
<ol> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> </ol>
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:
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">