ECS 162 Assignment 1

ECS 162 Assignment 1

In this assignment you'll build a simple homepage for yourself,
containing an image and some text. The image can be anything
(workplace appropriate); a portrait or selfie would help us get to
know you.
Start with a Hello World! page. To download it instead of
opening it in the browser, try right-clicking the link.
Add an image. To start with, lets use the image in this file
noFace.jpg. Again, try right-clicking to download the file
instead of opening it, and put the file into the same directory
as hello.html.
Add the image to the Web page using the HTML <img tag. Please DO NOT use the height, width, style, or other
attributes to set the size of the image. The modern way to
handle these attributes is to use CSS. Do use the "src"
attribute to tell the html file what image to use (this is
content, not appearence). Also use the "alt" attribute to
provide text to display in case the image is unavailable, or
for Web browsers for people who can't see well (also
content).
Add a short comment or joke to the image using a "title"
attribute for the image element (note: the Web page shows
adding a title to the <abbr tag and the <p tag; here we
want to add it to the <img tag). Check it by opening
hello.html in the browser, and moving the cursor over the
image. Do you see your comment or joke pop up near the
cursor? This is called a "tool tip".
Add a paragraph containing just your name using the <p
(paragraph) tag. Put the paragraph after the image, and it will
show up underneath on the Web page.
Now create a file "hello.css", which will contain the CSS for
Assignment 1 ECS 162 Spring 2019 https://web.cs.ucdavis.edu/~amenta/s19/helloWorld.html
1 of 2 6/16/2019, 9:13 AM
this Web page. To start, we'll just color the body of the Web
page. Do this by adding a selector for the body, with a color
attribute: body { background-color: lightgray; } Now connect
hello.css to the html file by adding this line to the head of
the html document: <link rel="stylesheet" type="text/css"
href="hello.css" Re-opening the html, you should see that
the background of the page is gray.
We're going to box up the image and the paragraph beneath
it in a <div element; this will make them stick together as a
unit within a larger Web page. In the html, just enclose the
image and paragraph between start and end tags for the div.
In the .css, so that we can see the div, let's give it a different
background color by adding: div { background-color: ivory; }
Finally, check that your HTML validates and your CSS
validates using these links (upload as files).
That's it! Now go ahead and add your "real" image and tool-tip.
Put your own image into the HTML, adjust your tool-tip joke or
comment,and then submit a zip file (Linux users may need to
install the zip command; please don't give us gzip, it is not the
same thing) on Canvas, containing:
Your version of "hello.html"
Your version of "hello.css"
Your image.
Before submitting, try unzipping the file in a fresh directory, and
make sure you can see the Web page correctly in Chrome. That is
how we will grade it, and if, for instance, the .css file is missing, or
in a subdirectory that is not accessible to the .html file, we will
take points off. Of course this assignment is only one point...but
in the future.
Assignment 1 ECS 162 Spring 2019 https://web.cs.ucdavis.edu/~amenta/s19/helloWorld.html
2 of 2 6/16/2019, 9:13 AM