Citizenship

[et_pb_section fb_built=”1″ _builder_version=”3.0.47″][et_pb_row _builder_version=”3.0.48″ background_size=”initial” background_position=”top_left” background_repeat=”repeat”][et_pb_column type=”2_3″ _builder_version=”3.0.47″ parallax=”off” parallax_method=”on”][et_pb_text admin_label=”Text” _builder_version=”3.18.2″ background_size=”initial” background_position=”top_left” background_repeat=”repeat”]

Citizenship

Make two web pages.  The first should be saved as ‘citizenship.html’.  The second should be saved as ‘contract.html’.  The Citizenship page should use the following tags:

  • html
  • head
  • body
  • Title
  • A link tag for your stylesheet.
  • h1, h2, etc – at least two of these
  • p
  • a – the page-link tag
  • img
  • A list of some type.  Ordered, unordered, or definition.

 

Your citizenship.html page should address the following:

  • Do you believe honesty, compassion, respect, responsibility, and courage are necessary components of good citizenship? Define citizenship and these 5 components (you can use an official definition here, but please see note at bottom of the page) and describe, in at least one sentence per component, why or why not they are necessary (this, of course, must be in your own words).
  • Name at least one additional component of being a good citizen that is not listed above and describe why it is an important piece of citizenship.
  • Describe the most recent act of powerful citizenship that you performed or witness and explain what made it an act of citizenship.

 

You should link your page to a stylesheet, called style.css, and apply at least 6 styles to the page.  Some styles you could do…

 

  • Apply a background color to the ‘body’ tag.
  • Use a font other than the main font.
  • Use a different font for your headers.
  • Apply a “hover” color to your links.

 

Create another page, ‘contract.html’.  This page should contain the text in this link.  You should make links from your Citizenship page to your Contract page, and from your Contract page to your citizenship page.  If the two are in the same folder, a link to your contract.html page would look like this:

<a href=”contract.html”>My Contract</a>

Grading

The grade for your project will depend on the following things:

  1. Correct HTML.  Tags like <body>, <head>, and <p> should have end tags, tags should  be in the correct order.
  2. Correct use of CSS, mainly in a separate style sheet.
  3. Answering the questions in the assignment.  

To get an A,  you should:

  1. Use your time well.  If you spend class time on your phone or playing games, you won’t get an A.
  2. Learn as much as you can.  Try interesting things.  Look stuff up on the internet.  Amaze us.

Citations

Text you did not write, and images that you did not create (or photograph) should be cited.  There are several acceptable ways to cite text and images in this class.   The basic rules are:

  • It should be clear what content you did not create yourself.
  • It should be clear where you got that content.

One good way is to add numbered citations at the bottom of your page,  possibly below a horizontal rule <hr> tag, and use numbers in brackets [1] in your text.  Another way is to include a link right after the text that takes you to the source [Miriam Webster].  Don’t forget to cite images!  When possible, don’t just cite “Google Images”.  Google doesn’t make them – it just aggregates them.

 

And More…

these are not required but will help you learn (and might help you get an A.)

Learn about and make a table.  You can use a table to do some layout on your page – for example to put text next to a picture.  

Learn about and use a Google Font (or two) on your page.  Start at https://www.google.com/fonts

[/et_pb_text][/et_pb_column][et_pb_column type=”1_3″ _builder_version=”3.0.47″ parallax=”off” parallax_method=”on”][et_pb_text admin_label=”Text” _builder_version=”3.0.74″ background_size=”initial” background_position=”top_left” background_repeat=”repeat”]

Resources

W3 School HTML Tutorial

W3 Schools CSS Tutorial

Google Fonts
[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]