Computer Memory Writing Assignment

Hello Students,

Use your notes from todays lecture and complete the writing assignment below and add to your CSS project:

Understanding Computer Memory Assignment:

1. Add your notes from the lecture and the following writing assignment to your CSS page
2. Write 2 paragraphs answering these questions: 
1. With all the electronic devices you own estimate how much memory they store in total
2. How many 5" floppy drives would you have to carry to equal the memory you have access to with all your personal electronics and media (including CD's, DVD's, HD's, etc..) 

Have fun! - Mr.W

CSS Mini Page + Writing Assignment

Hello Students,

Read the details of this project thoroughly before beginning, it consists of 2 parts. Part 1 is a writing assignment that must be created as a simple HTML page and includes organization of your notes taken in-class during lectures. The second assignment is to create a CSS script to enhance the look of the HTML page. Due on Friday

Part 1:

Writing Assignment - A Summary of our studies in ROP Web Design including all class notes

1. Create a new blank HTML file
2. Format the HTML file with the proper HTML tags and Doctype declaration
3. Write a title for your page. Format it with the h1 tag
4. Write a subtitle for your page that includes your name and grade and what city you where born in. Format it with the h2 tag
5. In your own words write a paragraph that summarizes your experience with computers and programming before this class began. Format it with the paragraph tag
6. In your own words, write a second paragraph that summarizes what you have learned so far in this ROP Web Design class.Format it with the paragraph tag
7. Add your notes from the previous lecture "how the internet works" and "the history of the internet" and todays lecture as well "CSS".
8. Save your document in a new project folder called "mini css site" and make sure it is called "index.html"

Part2:

CSS Assignment - Format Your Content

1. Create a new blank CSS file
2. Create a set of CSS Rules to format your h1, h2 and p tags
3. Use CSS to modify the color of your text, the font and the text size
4. Use CSS to modify your p tag to indent your text and create a colored background for the paragraph
5. Explore CSS properties to enhance your page, use CSS creatively!
6. Save your CSS document in the same folder as your HTML file
7. Create a link in the head of your HTML document to link to your CSS file

Resources:

Link: Sitepoint.com - CSS Properties Resource

Video: How To Use CSS Tutorial

Basic HTML Assignment: Mini Website

Hello Students!
Your Basic HTML Assignment is to create a simple 4 page website that is about anything you like, favorite band, food, movie, actor or actress, etc. You will create a menu for navigation on a home page, and 3 other pages. These can be About, Contact and Sites of Interest. You could also have page titles, pictures or examples of your subject matter. Each page should have a menu for navigation plus content such as text or pictures. Each page should have an image or photo and text, links, lists etc. A full page is not necessary, the focus here is creating navigation, links and using color and embedding images.

Subject Matter: You can make your website about anything you like. You can make it about yourself, a favorite band, tv show, movie, food, car, place etc. The idea is to introduce me, the reader, to your interests. If you already have an idea for your site ask me and we can think about how to structure your website.

For help: Google it or ask your neighbor before asking your instructor. Below are notes about the tags we discussed in class as well as extra's. Or check out the barebones HTML guide on the link list on the side of this blog.

REQUIREMENTS:

• You must code this project in HTML from scratch.

• You must insert the proper HTML tags, Use appropriate headings to structure each of  your pages.

• Each page must contain a simple menu at the top for navigation, and a signature at the bottom to end the page such as your name, a quote or something else unique.

• Must have a total of  4 pages, more is allowed for extra credit. Page titles can be "Home, About, Contact, Favorite Websites, etc.."

• Include 1 image or photo on each page.

• Include at least 2 lists (ordered or unordered)

• Include at least 3 links to external websites (for instance the class blog etc...).

• You must include your email address either on your contact page or in your menu.

• Each page must have a background image or color

• Your home page must be titled "index.html" and be organized in a folder with all other html files and images.

• Make sure all pages have the .htm or .html extension and all images or photos are formatted for web correctly (jpg, gif, png) and reside in the same folder as the html files.

HTML NOTES:

Tags are used to format your text, text can be a link, a list, a paragraph, big, small, red, blue etc. In html tags are made like this:

<></>

You must always begin and end your tag, tags effect everything in between them. If you forget to end a tag it will effect everything after it. So to make some text look bold I would write my HTML like this:

Here is some <strong>bold</strong> text

And it would be rendered like this:

Here is some bold text

Remember that your document must be formatted, it has an html tag, plus a head and a body. Most of the content your site goes in the body. It basically looks like this:

<html>

      <head>

      </head>

             <body>

             </body>

</html>

You can also make the title of your document show up in the window. The title tag is:

<title>this is my website isn't it cool</title>

Other tags change the way text looks, like bold or italic. Try some of these others:

<i></i> makes text italic

<tt></tt> makes text teletype

<h1></h1> makes text into a header, 1 is the largest, 6 is the smallest

<hr></hr> puts a horizontal line on your page

<center></center> makes text align center

<blockquote></blockquote> makes the text indented

You can also format large pieces of text like a paragraph with the p tag:

<p></p>

If you want that paragraph oriented, you can add the align command:

align="center"

align="right"

align="left"

So if you want a paragraph that is left oriented, then your tag looks like this:

<p align="left"></p>

To make text into a link you can use the a tag. To link to a local document you can

write your html like this:

<a href="aboutme.html">About Me"</a>

If your link goes to an external site then you must include the entire URL like this:

<a href="http://www.myblogwebsite.com">My Blog"</a>

You can set the color of several different things in HTML. In the <body> tag, the bgcolor, text, link, vlink, and alink attributes define the colors for the page background, text, unvisited links, visited links, and active links (i.e. the moment the link is being clicked on).

To change text color for part of a page, use the <font> container tag with a color attribute.

Color attribute values take one of the following forms:

"#RRGGBB", where RR, GG, and BB are the red, green, and blue components of the color, in hex, ranging from 00 to FF.

One of sixteen "widely understood color names": aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white (white), or yellow (yellow)

Hex code color chart from w3schools.com

HTML COLOR AND BACKGROUND TAGS

Adding color to your html files is easy. You can also use images for backgrounds as well.

Adding a background color is easy, add the bgcolor tag to your body tag. Pick a color from the chart above and type in the 6 digit hexadecimal code.

<body bgcolor="669933">

Adding a background image is easy too. Use the background tag to repeat an image across your background.

<body background="yourfilenamehere.jpg">

Check out these tags below to add color to text. Remember just wrap these tags around the text you want to modify.

<font size="3" color="red">This is some text!</font>

<font size="2" color="blue">This is some text!</font>

<font face="verdana" color="green">This is some text!</font>

Embedding images is easy too, but I will let you figure that one out on your own!  ;-)

Check out this website called HTML MADE EASY:

http://www.jmarshall.com/easy/html/

- Mr.Wilson

Link: Color Values in HTML

More tags and other basic elements in HTML

Ok have fun!