The objective of this exercise is to help you practice using HTML tags to code a basic web page.
TIP: Mac users – read this if you get stuck: http://webdesign.about.com/od/textedit/a/aa122006.htm
Start by creating a new .html file in notepad.
Develop a basic web page using the HTML tags you learned in class. Try to make your page look different than the example HTML page that we developed during class. Include each of the following elements in ANY order:
- The correct html, head, and body tags
- Insert the following phrase, without the quotes, as your title tag: “HTML Beginner Exercise by <insert your first and last name>.” Example: HTML Beginner Exercise by Theresa Clarke
- One unordered list of items (must include at least four items)
- One ordered list of items (must include at least four items)
- A bold word or phrase anywhere on the page
- A centered word or phrase anywhere on the page
- An italicized word or phrase anywhere on the page
- A working e-mail address link (where someone can click the link and send you e-mail such as firstname.lastname@example.org)
- At least three hypertext links to other sites on the Internet
- A bit of colored text somewhere on the page using one or more of the colors on the browser-safe color palatte or HTML color names.
- At least two horizontal lines (rules) anywhere in two different areas of the page
- Two .jpg or .gif images images
- For this exercise, you should select an image that is already existing on the web. Once you find an image, you want to find the associated URL and point to it from your web page. To point to an image on the web, right click the image, view the image information, copy and paste the image’s URL into notepad using the correct HTML tags.
- Look at the image of the web page below.
- Using HTML coding, replicate the page exactly.
- Save the file with your first initial and full last name and ex2 (correct example: tclarkeex2.html). Your file name should have NO spaces.
- The hypertext links for James Madison University and email@example.com must be working links.
- Don’t forget to include the title by putting the phrase “I Love HTML!!!” in your title tag.
- Tip: There is one of each in the coding – H1, H2, and H3. Do not use the font size and bold tags.
- The title tag should not be bold, even thought looks bold in the tab on the screenshot.
HTML Practice Exercises by Theresa B. Clarke is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.