Lab : images, links, lists, validation
Overview
Editing your first web page to include lists, links and an images.
Goals
- Practice using basic web development applications including a code editor (Atom) and and FTP program (Cyberduck).
- Practice uploading web files to the cs server and viewing web pages (local and remote ones) in a browser.
- Begin learning HTML (Hypertext Markup Language), the language for adding content and giving structure to your web pages.
Get started
Connect to your cs account, using Cyberduck, and download your lab1 folder. (You should have uploaded this folder at the end of lab1). This will be your starting point for this lab. Rename the lab1 folder to lab2.
Add an external link to a web page
Open the .html file within lab2 in your text editor. Add this HTML code to the body of it:
<a href="http://www.wellesley.edu/"> Wellesley College </a>
Load this page on your browser. Do you have a working link?
Now the local version of your first_page.html document, should look similar to this:
Add a couple more sentences of text to your document. Include a link to your high school, or your favorite news site, or anything else you would like.
View your local html document on your browser often, as you are editing it. (in Chrome: File --> Open File...)
Upload and view your page remotely
Upload your lab2 folder to your cs account on the server, using Cyberduck. Put lab2 inside your public_html folder.
View your remote file by copying this URL into your browser:
http://cs.wellesley.edu/~yourusername/lab2/first_page.html
(replace yourusername
).
Add an image
download an image from the web
First, create a sub folder, named images, within your lab2 folder.
Open a new tab in your browser's window, and bring up an image, any image.
- Right-click (ctrl+click on your mac) on the image.
- From the pop up menu choose the option 'Save Image as...'
- Save the image within the lab2/images folder on your Desktop (Desktop/lab2/images), providing a nice, short but descriptive name for it.
add the image to your web page
Now add it to your web page. As a reminder, here is the html tag you need to use:
<img src="image file name" alt="short description of the image" height="xxx">
Again, upload your final version to your account on the cs server, and view your file remotely. Don't forget to upload the image file (some times referred to as "supporting material")
as well as your html file to the server, or to simplify things, just upload the entire lab1
folder.
Any concerns you may be having regarding the copying and using in your web page an image, any image, from the web??
HTML Validation
The W3C (the organization that controls HTML) provides an online tool you can use to determine if you've written valid HTML5 code.
Visit the validator at https://validator.w3.org and check your work from today's lab to see if you have any issues.
Some web developers like to give their pages the “WC3 HTML5 Valid” stamp of approval by displaying this little icon with a quick link to re-validate the page:
It's like a badge of honor.
To display the WC3 HTML5 Valid icon on your page, paste this code right before the closing </body>
tag:
<p>
<a href="https://validator.w3.org/check?uri=referer">
<img
src="https://cs.wellesley.edu/~cs110/Icons/valid-html5v2.png"
alt="Valid HTML 5"
title="Valid HTML 5"
height="31" width="88">
</a>
</p>
Once you've added the validation icon, re-upload to the server, and view the page remotely.
Add Comments
Add some informative comments at the top of your page. Example:
<!--
FILE NAME: first_page.html
WRITTEN BY: Wendy Wellesley
DATE: Sept, 2021
PURPOSE: CS115 Lab 2 Practice
-->
Add in-line comments as you think necessary/useful.
Add list(s)
Continue editing the local copy of your web page. Add the necessary html code to produce a list (an ordered, or an unordered, or perhaps both) on the page. The contents of the list(s) is up to you.
Once more, upload the newest version of your page on the server, and check to make sure it looks good on your browser.
One step further...
- Can you add the necessary html code to produce a list of three items, in which the second item itself is a list of two items? Reminder: indentation is very helpful in producing correct and readable code!
Try to introduce an error in your html code. Perhaps "forget" to close a list tag :) Does your code validate now?
- Can you add a clickable image to your page? That is, an image that once clicked, will take the user to another web page.
As always, after a few changes upload and check your page from the server!
More time in your hands?
If you have more time, create a second html page, and save it within the lab2 folder. Then add a hyperlink from the first page to the new one, and vice versa. Now the two pages are inter-linked!