Objectives
The labs are where you will do the real learning in this module. In Lab0-01 you will become familiar with the editor Sublime. We will then use this editor to create a simple multi-page web site containing a small variety of text, images and links. In this lab we will explore some of the basic features of CSS, including colours, font and interesting techniques for setting styles across entire sections of a page.
Setup
Instructions for working in Walton Building PC Labs:
If you are working on the workstations in the IT Building, choose Sublime Text 2 from the programs menu.
Proceed with the next step of the lab.
Instructions for working on your own laptop
Download and install Sublime Text 2 from
Select the appropriate download for your laptop (OS, Windows, Linux)
This site has some useful tutorial videos in how to use Sublime Text 2. You should at least watch the first 2.
We recommend using Chrome as your web browser.
First Project
If you are working on a pc in the IT lab, open your WebDevelopment folder that you created last week (on your G drive or USB drive), inside that folder create another folder called Lab01.
Open Sublime and choose Open Folder from the File menu. Navigate to the WebDevelopment folder and choose click OK.
In sublime click on the WebDevelopment folder, you should see the Lab1 folder appear.
Chose New File from the File menu, a new blank page should appear in the sublime window. Click Save on the File menu and name the file index.html, save it into the Lab1 folder. You should see the file name appear in the left panel in sublime.
Now in File Explorer create another folder in Lab1 that is called images
Next you are to save the following images into the images folder:
Right click on each one and choose Save As. Make sure you save them into the Images folder.
It is worth making sure your folder structure is the same as this:
The WebDevelopment folder will hold a folder for each lab you work on for this module. For today the Lab1 folder will contain at least one .hmtl file as well as an images folder which in turn contains 6 images.
HTML pages
We are going to create a web site that is based on the Google Play site or the Apple app store. It will present mobile apps, music, and movies to the user.
Choose New File from the File menu, next choose Save from the file menu and name it apps.html Do the same for a file named movies.html and one called music.html
You should now have the following folder and file structure:
Next you will write some html code. Copy and paste in the following code:
index.html page content
<!DOCTYPE HTML>
<html>
<head>
<title>Bundle APP Store</title>
</head>
<body>
<img src="images/banner.png"/>
<h1>Welcome to the App Bundle Store</h1>
<p>
This store brings you great app bundles week after week. We select the best power
user apps from a broad range of suppliers and combine them into great deals. These are the highest quality apps form the best publishers, at great prices.
</p>
<p>
Whether you are interested in gaming or graphics design, software development or media production - we have the bundle for you. Each <a href="apps.html">app bundle</a> is designed to compliment the others, delivering you an exciting take on a scene.
</p>
<h2>Favourites</h2>
<ul>
<li>Hype by Tumult</li>
<li>Webstorm by Idea</li>
<li>Sublime, by sublimetext.com</li>
<li>Desktop Utility by Sweet Productions</li>
</ul>
</body>
</html>apps.html page content
<!DOCTYPE HTML>
<html>
<head>
<title>Bundle APP Store</title>
</head>
<body>
<img src="images/banner.png"/><h1>Score</h1>
<h3>Freebie</h3>
<p>
Stacksocial just published its so called Free Ondesoft Mac Tool Bundle, which contains 5 apps from Ondesoft. The bundle worth $146 will be probably available only a couple of days so you’d better hurry up to get it.
</p>
<p>
<img src="images/ondesoft.jpg" alt="Black Brain Brew Elixir" />
</p>
</p>
<hr>
<h3>Macware Business Bundle</h3>
<p>
Here comes the next bundle for march. This time its macware who publish a bundle. The so called macware Business Bundle contains 6 apps at a price of only $29.99 instead of $199.94. So you can save around 84%. There is n...
</p>
</body>
</html>Remember to save your files in sublime by clicking File -> Save All
Test these pages out by opening the index.html in your browser window. Do all of the images display? Does the link to the apps.html page work?
CSS
We will now introduce a stylesheet into our project. Stylesheets are usually maintained in separate files with the .css extension. Choose New File from the File menu and name it 'style.css'.
The folder structure now looks like this:
We bind this file into the project by 'linking' it to our home page. This must be incorporated into the <head> element of each page. Currently index.html head section looks like this:
<head>
<title>Bundle APP Store</title>
</head>We can extend it with a new element to link to the stylesheet. The head section of the index.html home page should now look like this:
<head>
<title>Bundle APP Store</title>
<link type="text/css" rel="stylesheet" href="style.css" media="screen" />
</head>Save your files and open the index.html page in your browser and keep this window open. There is no visible effect on our page yet until we introduce a rule into the stylesheet.
Type all of the following into the style.css file (note the American spelling of the word color) :
h1
{
color: red;
}Save all your files. Refresh the index page in your browser and see the result of writing this one css rule.
Experiment with the following rules, introducing them one at a time and one after each other in the file:
body
{
font-family:sans-serif;
}replace the first one you wrote that changed the h1 colour to red with the following:
h1, h2
{
color: gray
}Add this as another rule to the file:
h1
{
border-bottom: 1px solid black;
}Your css file now looks like this:
Exercises
Solution So Far..
This is an archive (zip file) of a solution to the lab so far:
1. Index.html
Just to get used to the editor, create a few more new apps in the 'apps.html', perhaps you can locate content from some web source (including images). Try to identify and replicate the way the code is indented in the existing content.
2. New pages
Incorporate new content into a directions.html page. It can contain any content you think would be useful. Make sure you add the hyperlinks to the home page and to the app page so that you can navigate to them from the index.html page and back to the index.html page.
We have not covered hyperlinks yet in this lab. Read this documentation here:
and see if you can create some links.
3. Link the CSS file to all pages
Currently you may not have the CSS file 'linked' to all pages. i.e. only index.html is styled with the css rules you have defined. See if you can link the other pages now.
4. Lists
In this lab you used the element <ul>
Investigate the use of <ol> , find out the differences between these elements here:
5. Images
Investigate reducing the size of the images. Try using an image editor to reduce their size to 10% smaller. It is important to have some understanding of using an image editor. The most basic available on all windows pc/laptop's is Paint which has a resize option on the toolbar.
6. Free Code Camp
Have a look at this site here:
This is a self paced instructional web site covering a superset of the technologies we will explore in this course. You will need to sign in to make use of the materials effectively. There are a range of sign in options - we recommend you first create an account here:
and then when you sign up with FreeCodeCamp, you select the 'Sign in with Github' option.
Once you are signed in, there will be an initially overwhelming range of options and features. To get started, restrict your attention to 'Map':
In particular the HTML5 and CSS lessons here:
Use any spare time you have at the end of our web development labs to pick your way through these particular lessons.