Extension 01 - HTML/CSS/JS

[braughtg]

Extension 01 - HTML/CSS/JS

In these extensions to Tutorial 01:

• You will learn about additional
  • HTML elements including:
    • elements for collecting user input.
    • tables for displaying information.
  • CSS Selectors and HTML elements that allow more precise and flexible application of styles.

Note: The purpose here is to learn about additional HTML/CSS features. So your work will not be graded on how pretty your site is, just whether it contains the specified features.

The Workflow for Extensions

Like working on the Tutorials, there are specific steps you'll use when working on the Extensions.

Tasks

1. Find the "Quick Reference" document.
2. Find the "Extensions Workflow" heading.
3. Follow the steps in "Starting an Extension" to get setup to work on this tutorial.
4. Give the steps in "Working on Extension Tasks" a quick skim to familiarize yourself with them. You'll be using them when completing each of the sections below.

Self Check

1. Which parts of the "Extensions Workflow" seem familiar from the "Tutorials Workflow"?
2. Which parts seem different?

HTML Form Elements

HTML provides a wide variety of different input elements. It is likely that you have seen most of these at one time or another. In this section you'll see a key resource for learning about new input elements and will add some to the web site that you created in the tutorial.

Tasks

1. Visit the Mozilla Developer Network (MDN) HTML elements reference.
2. Find the section on "Forms."
3. Follow the instructions for "Working on Extension Tasks" while completing the following steps.
   • Be sure not to miss the step to "View your work in the browser" so that you can check that things are working as expected.
   • If you need to take a break the "Quick Reference" document links to instructions for "Pausing your work" and "Resuming your work" as necessary.
4. Add the following <input> elements to your page:
   • a text input where a user for a nickname. The nickname can be between 5 and 10 letters long.
   • a date input for an assignment due date. The due date must be between the start and end this month. The default due date for the input should be today's date (These values can be hardcoded for this assignment).
   • a select input where the user can choose from one of at least 3 options.
   • Notes:
     • You do not need to do anything with the values from the inputs, just have them appear on the page for now.
5. Add one of the following other form elements to your page in a creative way: <meter>, <progress>, <textarea>.

Self Check

1. Where can you find information about how to use the different HTML form elements?
2. How is the syntax different for input elements like text or date and input elements like select or textarea?

HTML Tables

Tables are often an effective way of organizing information. HTML provides the <table> element to support the creation of tables within web pages. In this section, you will learn about the <table> element and add a table to your web page.

Tasks

1. Visit the Example section of the Mozilla Developer Network (MDN) HTML table element reference.
2. Follow the instructions for "Working on Extension Tasks" while completing the following steps.
3. Study the "Basic Table" example.
4. Create a basic table with at least 4 rows and 3 columns that organizes some data of interest to you.
5. Study the "Expanded table with header cells" example.
6. Improve your table by adding headers to the table.
7. Improve the display of your table by adding some CS rules that add borders to the table.
   • Note: When updating styles you will need to hold "Shift" and click "Reload" () your web page to see the new styles.

Self Check

1. What are the main HTML elements involved in creating a table and what does each one do?
2. How are the <th> and <td> elements different?

CSS Selectors

In the tutorial you learned how to apply CSS styles to specific HTML elements. That useful when you want every element of the same type to appear in the same style. But sometimes, it will be helpful to be able to apply styles in a more fine grained way or to reuse a style on parts of a page that are not the same type of element. This section introduces you to new types of CSS Selectors that add flexibility in how styles are defined and applied.

Tasks

1. Visit the Mozilla Developer Network (MDN) Basic CSS Selectors page.
2. Follow the instructions for "Working on Extension Tasks" while completing the following steps.
3. Study the section on "Type selectors."
   • This should look familiar because the Tutorial used CSS type selectors.
4. Define a CSS rule that uses a type selector to add some additional style to the table headings.
5. Study the section on "Class selectors."
6. Define two CSS rules that use a class selector and use them style alternating rows of the table differently (e.g. like this table.
7. Use one of the class selectors that you just defined along with a <span> element to highlight a few words on the page.
8. Study the section on "ID selectors."
9. Define a CSS rule that uses an ID selector to style one specific cell within the table.

Self Check:

1. How do Type selectors, Class selectors and ID selectors apply styles to different parts of a page?
2. How do Class selectors facilitate the reuse of style definitions?
3. What is the difference between the <span> and <div> tags that were used in the examples?

Turning in Your Work

Once you have finished all of the work in this extension you will need to officially submit it.

Tasks

1. Use the steps for "Completing an Extension" in the Extensions Workflow to submit your work.

---

This Extension is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License