ECS 189H Assignment 1
Due 10pm, Friday April 7.
In this assignment you'll build a simple homepage for
yourself and your portfolio.
Your image can
be anything; a portrait or
selfie would help us get to know you, but any image is OK.
- 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. We'll do that using CSS, which we will start
to cover on Wednesday.
Do use the "src"
attribute to tell the html file what image to use.
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.
- 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 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 worry about what your "real" image and
tool-tip comment will
be.
Put you own image into the HTML, adjust your tool-tip
joke or comment,and then
submit, on Canvas:
-
Your version of "hello.html"
-
Your version of "hello.css"
- Your image.
