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. There is no need to subscribe to view the full course. However, the first 2 videos are free, and provide a useful introduction to this application:
You are free to use any browser you are comfortable with. In this course, any screen shots will usually be taken from the Chrome browse. Firefox or Safari would be equally fine.
Project Setup
Consider creating a folder structure for your labs - starting with a folder called web-development.
You can do this any number of ways - but the simplest might be using File Explorer (Windows) or Finder (Mac). This can be located anywhere convenient - but make sure you know where it is on the file system. One useful location is C: on Windows. On Mac, your home folder. Alternatively, you might create the folder on the desktop - however this is perhaps not the best longer term location.
Students sometimes create folders like this on a folder located in Dropbox - this has the advantage that it will be continually backed up in case of an issue later.
Wherever you choose - launch Sublime Text to start the lab:
Open Sublime and choose Open Folder from the File menu, navigate to the web-development folder you have just created and click Open Folder.
In sublime click on the web-development folder, right click - and select New Folder. Enter the folder name lab-01 (this appears at the foot of the sublime menu as shown below)
Press return, and the sidebar should reveal the new folder you have created:
Now, select the lab-01 folder - and select Right-Click on the mouse. This brings up a Context menu:
Select New File - and this will create a new file:
Notice that the title in the file is 'untitled'. Select Save on the File menu and name the file index.html. This may bring up a dialog to help you locate and name the file.
Give the file the name index.html.
Make sure the file is saved into the web-development/lab-01 folder as shown above (this should be the default).
Once the file is saved, then Sublime should look like this:
Look carefully at the side bar - and make sure yours looks identical.
Now, copy paste the text below into the index.html file:
Welcome to the App Bundle Store
Now, using the File Explorer (or Finder on mac), browse to the project and its contents:
Depending on which is your default browser - opening this file (by double clicking) will let you view the file in that browser:
Note, you do not need to create files/folders from within Sublime, you can do the same using File Explorer/Finder.
One final point - make sure the, in File Explorer, the full name is visible (including the .html component). If this is not, then locate the "File name extension" setting in File Explorer:
... and make sure it is selected (as shown).
That is a lot of steps! However, once you get used to manipulating files/folders this will become easier. If this type of interaction is new to you, perhaps consider deleting everything you have created so far, and redo it again to gain some practice time.
Downloading Images
Using techniques from the previous step, create a new folder inside the lab-01 folder in your project called "images". Sublime might look like this:
All you need to do is right-click on the "lab-01" folder in sublime, and select "New Folder" from the context menu - name the folder "images"
Image Library
Below are two images:
Right click on each one of these now (in the browser you are reading this on) and select "Save Image As".
It brings up a dialog inviting you to locate the folder, and name the file, you are about to save.
Your task now is to locate the "web-development/lab-01/images" folder you have just created, and save the files in there. The files will have a default name, which you can keep.
If all of the above goes as expected, you your sublime window should look like this:
The logical structure of your project is something like this now:
web-development
└── lab-01
├── images
│ ├── banner.png
│ └── ondesoft.jpg
└── index.htmlSee if you can verify that this is the structure visually using File Explorer / Finder.
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, to create another new file called apps.html
You should now have the following folder and file structure visible in Sublime:
Make sure your sublime matches the above precisely.
Next you will write some html code into the two html files.
Copy and paste in the following code into each of the files:
index.html
<!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
from 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
<!DOCTYPE HTML>
<html>
<head>
<title>Bundle APP Store</title>
</head>
<body>
<img src="images/banner.png">
<h3>Freebie</h3>
<p>
Stacksocial just published its so called Free Ondesoft Mac Tool Bundle, which contains 5 apps
from Onesoft. The bundle is 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="One Soft">
</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
As we did in step 1, open both file using the default web browser in your workstation.
Do the pages look more or less as above?
Specifically:
- Do the images display correctly?
- Does the link in the index page work, opening the apps page from the index page? The link is embedded in the second paragraph.
- If you navigate from index to app, how do you get back?
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 lab-01 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 rel="stylesheet" href="style.css">
</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.
The header is now red.
Remove the css rule you have just introduced and replace it with this one:
body {
font-family:sans-serif;
}Refresh the browser view - and verify visually that the font has changed. If you are finding it hard to spot, remove the rule again - save and refresh - until you can see the difference.
Now append these rules - and review the effect on the rendered pages:
h1, h2
{
color: gray
}
h1 {
border-bottom: 1px solid black;
}Your css file now looks like this:
body {
font-family: sans-serif;
}
h1, h2 {
color: gray
}
h1 {
border-bottom: 1px solid black;
}Exercises
Solution So Far..
This is an archive (zip file) of a solution to the lab so far:
The exercises below can be attempted in any order. You may not have time to complete them all. They are indented to promote some experimentation on your part, and need not be submitted to the course web. If you have having issues - post on the slack "web-development" channel, or contact your tutors directly via Slack Direct Messaging.
Exercise 1: Zip Archive
Download the "Source Code" from the above link. This is a zipped archive of the completed lab. See if you can uncompress (unzip) the archive. This can usually be accomplished just be double clicking it. The unzipped archive will be contained in a folder called "bundle-store". Now, relocate (drag/drop perhaps) this unzipped archive to somewhere else on your workstation. Perhaps consider creating a new folder called "solutions" inside the "web-development" folder, and place the solution in there.
Open the solution project, both in Sublime and a browser.
Exercise 2: 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). For instance here:
Try to identify and replicate the way the code is indented in the existing content.
Exercise 3: New pages
Incorporate content into a new directions.html page. It can contain any content you think would be useful. Incorporate a link from index to this page.
Exercise 4: 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.
Exercise 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.
Exercise 5: Lists
In this lab you used the element <ul> in the index page.
Investigate the use of <ol> , find out the differences between these elements here: