Due Oct 7, 2020. Please read the complete Lab before you start.
This lab is designed to teach you how to prepare and then publish simple websites using HTML. Using the World-Wide-Wide technologies, it is now feasible to create sophisticated multimedia documents, with text, images, audio and video, to be distributed and shared across an organization or the globe. Web publishing is becoming an emerging trend where scientists and engineers, students and teachers, friends and families, can exchange their photos, ideas, designs, products, and experiences.
After you complete this lab, you will be able to
Key concepts to discover are:
Download all necessary applications on your computer from
Download Chrome, as browser.
Download Sublime, a tex editor.
Download Fotor, a photo editor.
Download Miro, a Video Converter.
Download Cyberduck, a Secure File Transfer Protocol (SFTP) client.
Download Remote access (VPN) in order to upload your site to the UVic web server. Note that you don´t need this if you are on campus.
We will show you in class how to install these applications. The applications include a text editor (Sublime Text 3), a browser (Chrome), an image viewer (Preview or Fotor), a file transfer application (Cyberduck) and a video converter (Miro Video Convertor).
For editing HTML and CSS files, we recommend using Sublime Text 3 on
both OS X and Windows. Please don't use any word processors, e.g.,
Microsoft Word, OS X TextEdit, OS X Page. You will regret it if you do!
Sublime Text 3 will remind you to purchase an upgrade every so often.
You can just click
Cancel and continue to use for free.
For image editing and resizing, we recommend using the native Preview application on OS X, and Fotor (A Microsoft Store App) for Windows.
We recommend all students installing the Chrome browser for testing your webpages in addition to Safari on OS X and Internet Explorer (or Edge) on Windows. Our Teaching Assistants (or markers) will use primarily the Chrome browser for evaluating your assignment submissions.
Following these instructions on how to get a copy of all related files for this lab:
csc100(all lower cases with no white spaces);
lab1.zipand then choose
Extract All ...which will create a default folder called
lab1.zipwhich will create a default folder called
lab1 folder, you will find the following files:
csc100.html--- this is a sample HTML file for testing part (1),
index.html--- the first HTML file for part (2),
places.html--- the second HTML file for part (2),
style.css--- the CSS template for part (2),
part1.txt--- additional instructions for styling
.png) images for part (1) or part (2).
There are also many online how-to videos related to our labs here to help you.
All labs must be completed individually. There are two parts in this lab.
studentweb.uvic.ca. You should change the write-up and/or images. (We will discuss later on this document what it is going to be about)
Part (1) is designed to teach you about:
Part (2) is designed to teach you about:
You have received a request to help a Superhero from DC Comics or from Marvel Comics worlds. (You can be inspired and work on another superhero, there are many real ones in the new world).
Have you noticed that the film studios and production companies that create superheroes movies have created sites with great content about the films, but the superheroes do not have websites to promote themselfs as a public figure?
Your mission is to create and then publish a website for the superhero of your choice, from DC Comics or Marvel Comics worlds.
Before you start developing the site you need to develop a simple plan as follows:
1. Goals: Identify the target audience of your superhero based on his core values, interest, goals, and objectives. Think about the vision and mission of your superhero.
2. Landscape: Think through how you would like your website to be able to function. More specifically, what features need to be on your site? For this step it is helpful to create a SWOT analysis about the superhero, identifying their Strengths, Weaknesses, Opportunities, and Threats related to competition.
3. Aesthetics: What colors and images you want on your site? What kind of pictures would you use?
4. Human Computer Interaction: Action plans. How you want your audience directed through your website. By thinking through what pages you need and how they should be laid out, you will help ensure, early on, the good visitor experience.
Edit the file
lab1 folder. (Note: Don't double-click on the file. It will be
open inside your browser. Instead right-click and then choose
Open With Sublime Text. This is generally how you edit HTML files in OS X or
Windows.) Modify its content using Sublime Text
3. Don't use Textedit in OS X, Wordpad in Windows, or any word processor.
Just use Sublime Text 3 which supports
text highlighting for HTML files. (Note: Although Sublime Text is free to use, it does
occasionally ask you to register. Just click
Cancel and move
On this opportinty you could copy some paragraphs or sentences from other websites. Your write-up doesn't have to be original.
Your Part 1 must include minimally the following basic HTML tags:
and finally, you must follow the instructions in
part1.txt to add some simple style rules, including
Overall, there must be at least 3 large images (at least 600 pixel wide each) and one embedded YouTube video (use the default size from youtube) in your Part 1.
Download images from internet that are related to your write-up.
Resize/crop your images so that they are in correct width (at least 600 pixels) and aspect ratios using Preview in OS X or Fotor in Windows.
Save these images inside the folder
lab1 folder. Choose and then embed
a YouTube video that is related to your superhero. Use the
default size that is provided by YouTube.
To change the video, select a video on YouTube, click on share and then click on embed, copy the code and replace the code included in
part1.txt between "frame" and "/frame"
You must change the
csc100.html to reflect your superhero.
After you have completed editing this file, test it using your browser
on your computer. Then, you must publish your
completed part 1 to our UVic web server including
csc100.html and all
its related images.
Use our recommended SFTP client, e.g.,
Cyberduck to publish your Part 1.
Our UVic web server is
studentweb.uvic.ca. Login to
You must publish your website under your UVic's personal
Transfer your computer's local
lab1 folder to your remote
www folder on
lab1 folder must include the file
csc100.html and a collection
of related images.
To view your published webpages under your
www folder on
and replace the user name
12345 with your netlink ID. Don't forget the
The hostname is
Note: if any of your images is missing after publishing, please check the following:
csc100.jpeg. Make sure that your filename is spelled consistently inside your HTML file and in the
lab1folder. Windows is not case-sensitive; but web servers are! Filenames must have the same spelling exactly!!!
Complete part (1) first before proceed to part (2). Your part 1 is evaluated based on the following criteria:
This part is about how to use a free CSS (Cascade StyleSheet) template
to create a nice looking website. The CSS template is a file named
style.css. Do not change any of its
content. A CSS template is a stylesheet providing a standard
layout for several webpages. The layout has already been done for you,
so you don't need to make any changes to it.
lab1 folder, there are two other HTML files,
places.html, already created for you. Please place any of your
new images under this folder as well.
Your are required to design a website about your superhero using
this pre-defined CSS template,
style.css. You are required to change
the images and write-up for each subtopic, e.g.,
store *Base your selected subpages on the plan you developed in the begining of Part 1.
UPDATE: Make sure all the links inside your html files are https and not http. Check the fonts!
places.html, of these
four HTML files have been created for you. Complete the images and
content of these two files first. Then, just make copies of either
places.html to create
Change the images and content of
accordingly. You are also required to hyperlink these pages together to
form a website; that is, all buttons should work when clicked.
For each webpage, there are 1 large image (1000 by 400) and 3 small
images (300 by 150). To complete part 2, you need to complete four
That is, you need to collect 4 large images (1 per page) and 12 smaller
images, (3 per page). Use images from your own collection or download
free ones online. Just make sure that your images are free of any
For this , don't use any other free CSS template; just use the one that
we have provided,
style.css. (We will show you how to change the
template in future labs.) When you are done with this part, publish the
entire website to
studentweb.uvic.ca, similar to what you have done in part
Your part 2 is evaluated based on the following criteria:
When you are done with part (1), each
student is required to publish his/her version. Test your
published web reports on
studentweb.uvic.ca with your browser, i.e., validate
its hyperlinks and contents, before you submit to Connex.
Login to Connex. Select
CSC 100 Tab from the top. Choose
Labs & Project from the side bar. Click
Lab1. Follow the instructions
Submission text box underneath the instructions, for example,
you just enter the following information for your part 1:
netlinkID with your netlink ID accordingly. Then, click
Submit at the bottom of the submission box before the deadline.
That is it! You're done.
Lets get in touch. Send me a message: