Web Design Project

Web Design Project - Help Your Community

We've been learning about web design during the last several weeks, and now it's your chance to show off those HTML skills.

In this project, you will create a One-page website which helps your community. Your task is to conduct online research about the topic, write a summary about it, and create hyperlinks to exciting websites for additional information. Be creative and have fun creating your informational website.

Or

You can create a One-page website about your favorite borough in New York City. Explain why your borough is exciting. What's the history behind it? What are some of the tourist attractions? How did the borough get its name? What nationalities have lived or are living there? What famous people were born in the borough, etc.

Remember, you will have to conduct some online research to gather your information.

How does the Internet work?

This 5-minute video does a really good job explaining how the Internet works without getting too technical.

While watching this video, listen to these key terms:

Server
Files
ISP
IP Address
Router

HTML Lessons:

During this unit, we will be covering six lessons in HTML. Each lesson will cover specific topics therefore it is important to be present and to take notes in each lesson. If you miss a class, please let me know.

Basic Intro - This lesson covers the basic HTML needed to create a single webpage, the Tags used, the sections of a webpage, and how to convert the Notepad file into a webpage. The file will be saved as index.html.
Color Background and Text - This lesson introduces the code to change the background color of a webpage and text. The Notepad file will be saved as color.html.
Pictures In A Webpage - How to insert a picture in a webpage (as an object or as a background). The Notepad file will be saved as pictures.html.
Hyperlinks - This term is used to describe a link to another file (webpage, movie file, sound file, etc). This lesson will cover how to go to other webpages from the existing webpage. The file will be called links.html.
Audio input - Students will be introduced to embedding WAV and MP3 files to a webpage. The Notepad file will be saved as audio.html.
Video input - This lesson in incorporates videos created in class to be embedded into a new webpage. The Notepad fill will be saved as video.html.
Tables - This new code allows web designers to create professional-looking layouts that can be customized to fit any design style. The Notepad file will saved as tables.html.

The "Key" to web design: Extensions

When creating your web pages, keep in mind Extensions. An "extension" is like your last name, it tells what family you belong to, who recognizes you, and who is associated with you. In technology, computers need to know the extension of a file to know which computer software will open that file. For example, you can find the extension of computer file in the name.

For example, if you created a report in MS Word and you saved in your computer with the name "biography", the software MS Word will automatically add another piece to the name. So the name will actually be "biography.doc" where .doc is the piece of information which tells the computer what software made that file and in what it well open.

If you made an MS Excel document, let's say, a graph for Science class, and you saved the file "graphingliquids", MS Excel will add another piece to that name and thus the actually name of that file will be "graphicliquids.xlc". The .xlc is the Extension of the file.

In web design, Extensions are important. In order to convert your Notepad file, which has the HTML code, to a webpage, you have to name the file with the ".html" extension. For example, if you are ready to see you webpage, name the file "testwebpage.html", The extension will tell your computer to open this file in a Browser program such as Google Chrome, Internet Explorer, Mozilla, etc. If you do not add the ".html" at the end, the document will open either in Notepad, or in MS Word.

Pictures also have Extensions. Most pictures are either Jpegs, or Gifs. In order to add pictures to your webpages, you need to know the extensions. for example, a picture may be called "scoobydoo", but in reality, the full name may be "scoobydoo.jpg" or "scoobydoo.gif" or something else! To find out, right-click on the image and select Save Image As... you will see a window pop-up, and before saving it, the window will say what type of picture it is. Types of pictures are better explained further down.

When saving a picture from the Internet, you may change the name of the file, but DO NOT change the format.

When you save a document, a dialogue box pops up telling what Extension it will have and what program it will open it.

Another important lesson is knowing where you are saving your files. You can avoid frustration if you are organized.

What Types of pictures do you want to use?

Back in the early days of the Internet (early 1990's), images came in different Formats, in other words, images were saved different ways, depending on the software. The earliest were Bitmap images, but the file sizes were huge and thus reached the screen very slowly. Next came GIF's, and the quality was OK, but reached the screen faster. Then, finally JPEGs came around and everyone loved them because the images reached the user's screen the fastest and with great quality. Nowadays, Shockwave files are the newest format, but some new devices (Mac's iPads) do not play shockwave files so JPEGs are still being used today.

JPEGs ( .jpg or .jpeg )

JPEGs offer the best quality in a small file size for quicker visibility.

Bitmap ( .bmp )

BITMAPs were awful picture formats. The images were large and of poor quality.

GIF ( .gif )

GIFs pictures and animation are ok in small sizes, but if enlarged the images look pixalated or "blocky" (like Bitmaps).

Shockwave ( .swf)

Shockwave files are the latest image types, but some electronic devices do not play or show them.

Vocabulary

Here are some web terms you will need to be familiar with before creating your website:

Web page - is a text document that contains instructions for the Browsers to read in order to construct the layout of a web page on you screen.
Internet - This word is composed of two words: Inter and Net. The prefix Inter means connection between two or more things like an Interview, Intercom, Intersection. The word Net is short for Network. In essence, the word Internet describes the connection of two or more computers.
Browser - This is a software that "reads" HTML. The browser's job is to piece together a webpage through the browser to be displayed on your monitor. Examples of browsers are Internet Explorer, Google Chrome, Mozilla Firefox, Opera, and Mac Safari.
HTML - This is one of the languages used to create a webpage. The acronym stands for HyperText Markup Language and this is the language you will using to create your webpage.

Lesson Resources

During the HTML lesson, you may use these links to help understand some of the topics covered in the lesson.

Sound Files

Video Files

HTML Tips

Names of Web Colors

Create Font Images

Website Project

Create a One-page website based on one of the topics provided by Mr. Munoz. The topics are important to our community as it affects every aspect our lives. The person you may be helping is someone you know.

Or

Discover the amazing history behind one of the New York City boroughs (Manhattan, Queens, The Bronx, Brooklyn and Staten Island). Consider the following to concentrate your research:

How did the borough get its name?
Who were the first inhabitants and when did they settle?
What famous landmarks can we find there?
What famous people were born or lived there?
What are some of the best things about this borough?
What are some of the issues facing the borough today?

Online Research - Who can you trust?

The Internet is full of information - both good and bad. It's up to you to investigate and read the information carefully.
Remember, just because it's online, it doesn't make it true.

One of the best way to consider the information truthful is if the webpage you are looking at comes from a:

College or University
City or Federal organization
Museum

Project Requirements

The webpage file name is project.html
The webpage will contain 3 paragraphs.
Add two pictures about your topic
Add two hyperlinks to existing websites which provide additional information.
Sources of your information

Extra Credit - Earn more points by doing one or more of the following:

Add a background color to the webpage (+5 points)

and/or

Add a background image to the webpage. Make sure the image doesn't interfere with the text (+5 points)

and/or

Create a 1 minute video about your topic with music (+15 points)

The Topics

Choose only one topic from the list below. If you have your own topic in mind, ask Mr. M for approval.

Importance of recycling
The dangers of pollution to our community
Eating Healthier. What should we eat more often or less?
Bullying in schools. What are the signs of bullying? What can we do?
Taking care of pets. Be specific on the animal - What should we do? What should we feed them? What are the laws for pet ownership?
Uniforms (are you pro or con and why)
Expensive fads (clothing, toys, jewelry, etc) - Why do people spend so much to fit in?

The importance of voting
Health effects of smoking
Game violence. How does it affect the behavior of children?
Sports pressure. What are the effects of pressure on men and women to win?
Effects of fast food on our bodies. What can happen to it?
School safety. What dangers do kids face in schools?
Cartoons and violence - is there a connection to bad behavior and aggression?

Answer these questions to develop your three paragraphs. These are just guides, so you can write more

First Paragraph - (5 -10 sentences) This is all about you - it's a autobiography. What are your interests? Who do you admire? What are your future goals? Where are you from? What is your favorite food? What do you do well? What is your favorite hobby/subject?
Second Paragraph - Describe in 5-10 sentences why you chose your topic. How does it impact your life? What has been your experience? Is there someone you know who is impacted? Do you worry about it? What are some of the best things about it? Have you tried something to solve the issue, but failed? How long have you dealt with this issue? Does it make you feel safe? Where have gone to find more information about your subject?
Third Paragraph - Based on your online readings, describe in 10-15 sentences that support your topic. Your task is to read online articles which talk about your topic and extract some data which you will use in your website. For example if you are talking about the history of Brooklyn, provide evidence of who lived there, why is the borough important, etc. If talking about a social topic, provide information that a reader can use to help them deal with it.
DO NOT COPY AND PASTE - it is easy to do it, but that is considered plagiarism, in other words CHEATING! You will not be allowed to resubmit.

What's the code again?

Need the code to start your webpage? No problem. Copy and paste this code unto Notepad and save the file as project.html. Once you have the code, your job now as a web designer is to fill in the missing information. Good luck and if you need help, politely ask Mr. M.

Copy and paste this code in Notepad
Please Note: Do not change the text that's in red. The blue text is replaced by your research and information.

<html>
<head>
<title>Your First Name and Class goes here</title>
</head>
<body>
<H1>The Name of Your Topic goes here</H1>
First Paragraph info goes here
Second Paragraph info goes here
Third Paragraph info goes here
<img src="image1.jpg" width="300">
<img src="image2.jpg" width="300">
 
<a href="http://www.website1.com">This first link takes the person to another website</a>
 
<a href="http://www.website2.com">This the second link you provide. Make sure both links work.</a>
Sources: Place here the web or domain address where you gathered your info here (Ex. www.msn.com/money)
</body>
</html>

Remember to place all the images in the same folder as your webpage. I suggest you create a new folder and call it webproject.

How should my webpage look like?

Your webpage should something look like this when it's complete

Your webpage, when complete, will provide info on the topic you chose. The goal is to help others in your family, friends, or community.

For the Webmasters... Tables

The above webpage is considered a First Generation webpage. In other words, it's a very basic layout where the objects (pictures, texts, etc) move around and rearranges itself according to the size of the user's (you) monitor.

However, you can create a layout that is more advanced using Tables (these pages are considered Third Generation because the layout is customizable). This code allows you to customize and set the objects in one location, regardless of the monitor size. Why use Tables? It provides a "cleaner" look, the webpage looks more professional, and the content is easier to read and follow.

To create this webpage using Tables, download this Notepad file which contains the HTML code

Download

Click on the Download button to open the Notepad document which makes this webpage using Tables

Where does your information come from?

Your information comes from the Internet, but that doesn't mean its reputable, or trustworthy. What to look for in a reputable site?

When was the article written?
Who wrote it?
Does the website come from a magazine, university, news company, medical institution?

Once you have your information, go to this website to create a proper citation for your source of data in MLA or APA format (just like a college student):http://citationmachine.net/index2.php

Need more help?

Here's a word document with the description of the Tags and their functions. Let me know if you need additional help.

Download this word for definitions of the tags you will be using.

For the Web Masters...

Want to add color to your background? Replace your <body> tag with this:

<body bgcolor="nameofcolor">

Want to add an image to your background? Replace your <body> tag with this code. Please Note: not all images are meant to be backgrounds. Make sure it doesn't interfere with your text.

<body background="picture.jpg">

More great sites to add some "coolness" to your website:

www.cooltext.com - makes great text graphics to be used like pictures
www.web-source.net/html_codes_chart.htm - Great website to get quick HTML tips and tricks (Mr. M uses this site for advice)
www.goodellgroup.com/tutorial/ - Step by step instructions to create a website. Simple for kids to follow, and educational for adults.

How are you going to submit your Web Design Project??

Follow these steps to submit your work. If you don't, you will submit an incomplete work.

Create a new folder and name it with your FULL NAME & Class
Place the webpage, pictures, and anything else that's part of your project in this folder.
Right-click on the folder and select Send to --> Compressed (zipped) Folder
A new folder will be created next to the original folder. The difference of the new one is the little "zipper" on the folder.
Go to Mr. M's website and click on Submit Your Work.
Fill out the form, and at the bottom click the Browse button.
Look for the folder with the little zipper and select it.
The name of the folder will appear next to the Browse button
Press the Submit button.

This is a compressed folder, or zipped folder.

In some computers, zipped folders look like this.

Right click on the folder you want to send, select "Send To", and click on "Compressed folder". A new folder icon will appear with a little zipper on it. Send this to Mr. M for a grade.

Website Project Rubric

Your Web Design Project will be evaluated by this rubric. Make sure you read what is required to earn the best score. Good luck!

CATEGORY	4	3	2	1	Total
Content Accuracy	All information provided by the student on the Web site is accurate and all the requirements of the assignment have been met.	Almost all the information provided by the student on the Web site is accurate and all requirements of the assignment have been met.	Almost all of the information provided by the student on the Web site is accurate and almost all of the requirements have been met.	There are several inaccuracies in the content provided by the students OR many of the requirements were not met.
Color Choices	Colors of background, fonts, unvisited and visited links form a pleasing palette, do not detract from the content, and are consistent across pages.	Colors of background, fonts, unvisited and visited links do not detract from the content, and are consistent across pages.	Colors of background, fonts, unvisited and visited links do not detract from the content.	Colors of background, fonts, unvisited and visited links make the content hard to read or otherwise distract the reader.
Spelling and Grammar	There are no errors in spelling, punctuation or grammar in the final draft of the Web site.	There are 1-3 errors in spelling, punctuation or grammar in the final draft of the Web site.	There are 4-5 errors in spelling, punctuation or grammar in the final draft of the Web site.	There are more than 5 errors in spelling, punctuation or grammar in the final draft of the Web site.
Links (content)	All links point to high quality, up-to-date, credible sites.	Almost all links point to high quality, up-to-date, credible sites.	Most links point to high quality, up-to-date, credible sites.	Less than 3/4 of the links point to high quality, up-to-date, credible sites.
Images (accessibility)	The images are appropriate to the content, are visible and are of recommended size.	The images are appropriate to the content, are visible, but the sizes are too large or too small to be viewed adequately.	Only one image is shown in the webpage with appropriate content and size.	No images are visible in the webpage.
Sources of Your Research	At least two cited sources are provided. The sources are from reputable locations such as website, magazine, book, encyclopedia using MLA or APA format	One cite source is provided. The source is from reputable location such as website, magazine, book, encyclopedia using MLA or APA format	Only one source is cited, but it is not in MLA or APA format.	No sources are provided