lists and tables html and basic css declarations

Content

Choose a topic that is simple and needs no research, such as your pets, a hobby, fun things to do in your community, favorite television shows, fun foods, etc . You will write one paragraph, one list, and one table focused on the same main topic, and all content must be original.

Follow the instructions below, providing the content in order. Save your work frequently. Much of the information you need is below or in the Reading PDF. Lists and tables (HTML) and basic CSS declarations are found in the eBook reading. If you would like additional assistance , you can visit the Hoonuit site linked in the Course Resources section of the course and look for HTML5 & CSS3 – Basics Training.

Coding: HTML

• Open your clean editor.
• Type the Doctype declaration on the top line (see the Reading PDF).
• Save this document as index .html.
  • For Notepad users, do a “Save As,” type index.html, and choose “All files” from the dropdown menu before clicking the Save button.
  • For TextEdit users, choose “Save” in the File menu, use the “Save As” field and type index.html. In the pop-up, choose “Use .html” and save.
• Enter the html (including lang=”en “ in the beginning tag), head, and body tag pairs.

• In the head:
  • Enter title tag pairs and a few words between the tags. This will show in the browser tab once you are done .
  • Enter comments (see the Reading PDF) that include your name, the date, your professor’s name, and the URL where you found your image (or the fact that the image is indeed your own).
  • Enter a link to CSS (see the Reading PDF).

• In the body:
  • Enter h1 tags with a suitable page title for your topic.
  • Enter p tags and type a paragraph of at least 60 words about your topic.
  • Under this, code your image. Use the code below, replacing buddy.jpg with the actual name of your image and “my dog” with a suitable description of your image:

    < img src=”images /buddy.jpg” alt=”my dog” />

• Enter h2 tags with a suitable title for a list.
• Write either an ordered or unordered list related to your main topic. Include at least 5 list items.
• Enter h2 tags again, this time with a suitable title for a table.
• Code a table of at least three rows and three columns and insert content that is logical for your topic. The top row must use < th > tags for headings.
• Enter coding for a website hyperlink. It would be good to use the URL to a related website, but if you are not aware of one, you can link to Google’s home page. This link must open in a new window:
  
  Google

• Enter coding for an email link. Use your school email for this.
• Enter coding for a copyright line. Use character code for the © symbol, and include the current year and your first and last names:
  
  <p class=”copyright “> © Year Your Name</ p br > (it is a single tag) where you feel you need to separate items.
• Save your index.html one more time.

Coding: CSS

• Open a new document in your clean editor.
• Type the charset statement on the top line (see the Reading PDF).
• Save this document as mystyles .css.

• Enter instructions for the body
  • Padding – 20px on right and left
  • Font style and size – choose two options and one family, and use a percentage for size

• Enter instructions for the h1 tags
  • Align the heading to center
  • Assign a color other than black to the text
  • Change the percentage size to something larger than the body

• Enter instructions for styling the table
  • Copy the following code, but change the background color using hexcode :

    table {
    border: 1px solid #000000;
    border-collapse: collapse;
    }
    th {
    border: 1px solid #000000;
    background-color: #A5D19B;
    }
    td {
    border: 1px solid #000000;
    padding: 5px;
    }

• Enter instructions for the copyright class
  • Copy the following code, changing the font size to some other value:

    .copyright {
    text-align: center;
    font-size: 95%;
    }

• Save your mystyles .css one more time.

Assembling Your Assignment

Create a folder and name it with your first and last names.

• Place your index.html and mystyles .css in the folder.
• Create another folder inside the same folder and name it images.
  • Place your image in the images folder.

Check your work. Some troubleshooting help:

• If the image does not show, is it in the images folder? Is it named properly in the code, with the same capitalizations (if any) and file extension? Is the img tag written without errors?
• If the list seems to have empty list items, look for missing end-li tags.
• If the content under the list does not align correctly, did you insert the end- ul or end-ol tag?
• If the table is askew, count the number of < td > tag pairs and make sure they match for each < tr > pair. Check for all end-tags.
• If the page is still just plain serif font, check the link tag for errors. Is it in the head? Is the name of the css file correct? Are all quote marks included?
• If the top heading is not centered and in a color other than black, or the table has no color or borders, or the copyright date is not aligned center, check your CSS for missing semicolons at the ends of declarations.

If you found this assignment easy and wish for an additional challenge, you may add any of the following to your index page at your discretion. These actions cannot replace any of the required coding and will not carry points, but provide additional practice for those who wish to do them. Again, do not code beyond the allowed activities.

• Hyperlink the image to the image’s original source
• Merge some cells in the table (if logical)
• Nest a sublist inside your list
• Use <em> or <strong> tag pairs for select words or phrase
•