Objectives
folders · head · title · link · image · references
Setup
Make sure you have downloaded and installed Sublime Text 3 from
Select the appropriate download for your laptop (OS, Windows, Linux)
This site has some useful tutorial videos in how to use Sublime Text. You should at least watch the first 2 videos.
We recommend using Chrome as your web browser.
First Project
Consider creating a folder structure for your labs - starting with a folder called web-development
Open Sublime and choose Open from the File menu, navigate to the web-development folder you have just created and click Open.
In sublime click on the web-development folder, right click - and select New Folder. Enter the folder name lab01. In Sublime, you should see the following in the sidebar:
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 lab01 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
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%.
</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:
Make sure this file is in the lab01 folder - and not in the images folder. This can be hard to see exactly in sublime - so consult Explore/Finder to make sure it is in the correct location.
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 content into a new directions.html page. It can contain any content you think would be useful. Incorporate some links in each page so you can move around in the site from page to page.
3: Link the CSS file to all pages
Currently you may not have the CSS file 'linked' to app.html or the directions.html page. i.e. only index.html is styled with the css rules you have defined. See if you can link the other pages now.
4: HTML Reference
If you are finding initial contact with HTML a little challenging - this is an excellent starter resource to review:
It is short read.
5: Lists
In this lab you used the element <ul>
Investigate the use of <ol> , find out the differences between these elements here: