Basic HTML Page Assignment
It's time to create our first web page. It will be a simple page about a movie you enjoy.
Base everything on HTML5 standards and make sure your text looks fairly okay on both a desktop and a mobile device such as your phone. (We will refine our presentation later, for now, just produce something reasonable.)
Here is the HTML5 boilerplate. It can, along with MDN, serve as a basic reference for all the work we are doing. Don't copy the entire HTML Boilerplate example page, just copy individual tags or elements from the page. Let me say it again, just to be clear. Don't copy the whole index.html page from HTML5 Boilerplate. Instead, just look at the particular tags referenced in this assignment. For instance, when I'm asking for the html tag with the lang set to English, HTML5 Boilerplate has it almost right:
<html class="no-js" lang="">
But let's skip the no-js and use English as the language:
The charset and viewport tags are exactly right. Again, I just want to see the tags I explicitly call out below. Don't include other tags.
Make it simple, so long as it meets the requirements discussed in class. There will be an example provided during class.
At least meet the following guidelines:
- Use an opening html tag the lang set to English. More on MDN.
- Add a meta charset UTF8 tag.
- Use a meta viewport tag to set things up for mobile.
- Use a body and head tag
- Add a title tag
- Write the name of your favorite movie using the largest heading tag
- Write the name of the director of the movie and make the name italic with em tag.
- Write a very brief description of the movie in a paragraph tag
- Bold at least one word with the strong tag.
- Do not use a break tag
- Use an hr tag just before the paragraph element. Use your discretion, but you might want to use it to separate the heading from the paragraph.
You are free to design the page as you want. If you want some direction, then the hierarchy of elements on the page might look like this:
- paragraph listing the director's name.
- the hr tag
- The paragraph describing the movie.
Don't forget to close the body and html tags. If you need more help, use the JsObjects HTML and CSS reference page.