Lecture Notes

IT130 -- Lecture 2   (An In-Class Activity)

A quick introduction to HTML and CSS

You'll be learning about HTML and CSS in detail in this course. But, for now, I don't want to bog you down with too much detail. However, there are a few things I'd like to point out about how HTML and CSS work and how browsers handle them.

1. Start by saving file1.htm into your IT130 folder on your PC.
2. Next, save the following five image files into your images folder on your PC.
   • hangout.png   pen.jpg   clocky.jpg   usb-flash-drive.jpg   toaster.jpg.
3. Now, on your PC, double-click on the file1.htm file to see how the browser displays the file.

We can see all the images and the text, but things are not lined up, font types and sizes don't fit the design, there are no margins, etc.

So let's open file1.htm up in TextPad and make some changes that will improve the looks and readability of the file. Follow along in class.

After we get things looking like we want them, we'll open up SSH and transfer the files into your account on the students computer (a server). Then we'll check that the file displays properly when we enter the appropriate URL in the address box of a browser.