Laboratory: Making Your Own Web Site
Summary: In this laboratory, you will have the
to design and develop your own Web site.
If you have not already created your
directory in the previous lab (because you did it with someone else on
their account), please go to the previous lab and complete
steps 8 and 9.
I have made a basic HTML template page that you can use to get
Please begin by copying it into your public_html directory
the following steps.
Notice that the template Web page is named index.html. You
will recall that the main page for your Web site should have this
name. (If someone tries to view your Web page, but only specifies the
directory it is in as the URL, then the web server will automatically
look for a file named index.html.)
- Open a terminal window, and then move to your public_html
- Copy the template page into your current directory:
cp ~davisjan/share/csc105/index.html .
- Make your copy of the file readable by everyone:
chmod 644 index.html
Here is where you get to make your own Web site! Your site may be
serious or goofy. It may be about you, an interest you have, or a
pretend organization or interest.
- Open the file index.html with the editor gedit:
gedit index.html &
- Find the title tags, and replace the title text with the
correct title for your Web page. Recall that the "title" will appear on
the tab icon if someone has multiple tabs open in their browser when
they view your page.
- Open a second tab on your browser, and use it to view your Web
page. Recall that your Web page will have the following URL (where you
replace username with your own username).
- Open a third tab and use it to view the "HTML Demo" page that we
generated in lecture.
Remember that you can view its html source by right-clicking on
it and selecting View Page Source. You may find this useful
for reminding yourself of various html tags that you would like to use.
Some last-minute tips...
Your site should have at least the following items:
- Please keep in mind that your Web site will be completely public,
and be sure that you only publish material you are comfortable with
letting anyone see.
- It is wise to avoid putting your exact email address on
the Web. (This is a sure way to increase the amount of spam you get.)
If you want to post your email address, there are various ways to
modify it such that humans can read it, but computer programs searching
for addresses might be fooled.
- Please remember to scale any images you use to a size that can be
downloaded quickly (say a maximum of 600 pixels on a side). Recall that
you learned how to do this in a previous lab about digital images.
- Any images you use must be free of copyright restrictions. One
place to get such images is http://public-photo.net. You can also email photos that you took, e.g., on a smartphone, to yourself.
- Also remember to set the permissions on each of your Web pages
(and images) such that everyone can read them. You can do this with the
following command (where you replace 'webpage' with the name of your
own html file).
chmod 644 webpage.html
- two Web (HTML) pages that are related to one another
- a link from your index.html page to your second page
- a list or a table
- one or more images
If you place images on your Web page that you did not create, you must make sure
you have permission and cite the source.
One source of permissible images is the Creative Commons section of
Flickr. To find it, use advanced
search and limit your search to Creative Commons images. Look here for
more information about Creative
Other options include Public
Domain Photos, or searching Google
Images using the "Advanced Search" feature for images with
Other things you might like to do...
If you have an idea of what you would like to do, but don't know how to
do it in HTML, you can try some of these strategies:
- Set a background color or image for your pages.
- Place images inside a table to arrange them in rows.
- Post artwork you may have made in a previous lab.
- Ask me or a colleague for help.
- Find a Web page that does what you want to do, and view its page
- Search for instructions on Google.
- Examine the list of HTML Tags.