Lab 1-2: HTML for images and links
- Practice using basic web development applications including a code editor and FTP program.
- Begin learning HTML (Hypertext Markup Language), the language for structuring web pages.
- Practice uploading web files to the cs server and viewing web pages in a browser.
Add a link to your first web page
Go back to your text editor (BBEdit) and add this HTML code to the body of your first_page.html document:
<a href="http://www.wellesley.edu/"> Wellesley College </a>
Reload your local page on your browser. Do you have a working link?
Continue editing the local version of your first_page.html document, so it looks something like 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 file on your browser, often, as you are editing it.
Upload and view your page remotely
Upload your html file to the cs server using Fetch.
View your remote file by copying this URL into your browser:
Add an image to your page
Download an image from the web
Open a new tab in your browser's window, and bring up an image, any image. Right-click (ctr+click on your mac) on it, and from the pop up menu choose the 'Save Image as...' option, to save the image within the lab1 folder on your Desktop (Desktop/lab1), providing a nice, short and descriptive name for it.
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.
Finally, make sure you log out from the public computer you have been using today.