Lists and tables (HTML) and basic CSS declarations
Im working on a Computer Science question and need guidance to help me study.
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,
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
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.
- For Notepad users, do a “Save As,” type index.html, and choose “All files” from the
- 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).
- Enter title tag pairs and a few words between the tags. This will show in the browser tab once you
- 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:
<pclass=”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 onefamily, and use a percentage for size
- Padding
- 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;
}
- Copy the following code, but change the background color using
- 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%;
}
- Copy the following code, changing the font size to some other value:
- 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.
,%20mystyles%20(css).png?_&d2lSessionVal=hyFJhf8QSjwIiZfVVEVrhku9W&ou=110709)
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 theymatch 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, orthe 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
- ?
