Cergy LEA Multimedia: Class 6: Assignments to Turn in & Beginning Websites

Last week’s group projects were a success! I hope you learned something and had fun.

HOMEWORK & ASSIGNMENTS TO HAND IN THIS WEEK (15/16 March 2010)

1) Read: Bonnie Raindrop and Stacy Meyn, An overview of the website creation process, Women’s Business Institute. (This text was sent to you via your UCP email address at the beginning of the semester. If you lost it, get a copy from your colleagues).

Discussion of article:

What do you need to do to prepare for designing a website BEFORE you begin the technical part?

What questions must you ask in order to define your goals?

What other things should you consider?

2) Plan your website content: BOTH ASSIGNMENTS TO WRITE ON PAPER & HAND IN TO THE INSTRUCTOR! (10% of your grade)

1) Graphic depiction of the architecture of the site, for example, layout, titles and how the pages will be linked. Use this tutorial to help you plan your website http://cat.xula.edu/tutorials/planning/. On this website, look at the sections marked “Drawing Sketches” and “Make a flow chart”.

2) Fairly well researched and thought out paragraph about your subject and the motivation you had for choosing the subject (100 -200 words IN FRENCH). Graded on seriousness of subject and preparation.

Beginning your websites. HTML basic page

Starting your WEB SITE, First Page

Follow these steps carefully and also listen verbal to the instructions by the teacher. (If you get lost, you can follow the same first steps on this website: http://www.tips-tricks.com/begin.asp )

- KEEP the Browser window OPEN. To have both windows open, click on the Tiling (mosaic) function at the top right corner of your screen. Please use Firefox Mozilla.

If you are working on your own, from home, then you can also try out these two tutorials to learn how to write your first webpage.

Beginning website tutorial: http://www.pageresource.com/html/index2.htm

Web creation tutorials: http://www.yourhtmlsource.com/

Step One: Starting a page.

Open BlocNotes or WordPad (whichever is on the computer you have). To find this, go to the list of programs, open Accessories and then chose BlocNotes or WordPad.
At the top of the page, write a < followed by the letters HTML (in capital or lower case lettering), then follow that with a >. These “pointed brackets” tell the computer that this is a technical command, part of your CODE.
Go to the next line. Inside pointed brackets, write the word HEAD.
Go to the next line. Again inside pointed brackets, write the word TITLE.
Then without pointed brackets write Your Name_The subject of your Website.
Go to the next line. Inside pointed brackets, write /TITLE. The slash tells the computer that it should stop applying the command that you started earlier.
Go to the next line. Inside pointed brackets, write /HEAD.
Go to the next line. Inside pointed brackets, write /HTML.

It’s time to save your document. But, let’s be organized first.

Go to SAVE AS (enregistrer sous) and type in the name of the drive your USB flash drive is plugged into, e.g. E://

Open a FOLDER (Dossier) in your USB flash drive called FirstName_LastName_Gr1 (or Gr2, etc), e.g. Mary_Smith_Gr6.

Next, save the file as YourName_FirstWebpage.htm. Do NOT forget the dot HTM

Save this as simple text (txt) if the computer asks you.

Double check. Do you have the file saved in YOUR folder on YOUR flash drive? Now let’s go to the next step. (if you forgot your Flash drive, you will have to bring one next week and begin again).

Step Two: Verifying the code and headline.

Open a second Browser window or tab, so that you have TWO internet windows open.
In One you will keep this blog, or an internet page with instruction. With the other you will verify your site. How do you do this? You will see …
In the second Browser window, go to the top menu bar and choose “File” (Fichier), then choose “Open a File” (Ouvrir un fichier).
Choose the file you just created and saved called YourName_FirstWebpage.htm (to find it, remember to write in E://). OPEN it.
You should have a white screen. But, if you look at the very top of the screen, you should see your name in the Headline. Do you?

Step Three: Writing your first words in the Body.

Go back to the Bloc-notes document. Create some space between the /HEAD and /HTML. This is where you will place the body, or the main section of your web page. /HTML should ALWAYS be the last line of code, the last thing you see on the page, the last line of your CODE.
In this space you will first write, inside pointed brackets as usual, the word BODY.
Go to the next line. Inside pointed brackets write the word H1. Then, with NO brackets, write some kind of greeting, like Hello, or Salut. After that, inside pointed brackets, write /H1.
Go to the next line. Inside pointed brackets, write /BODY. (This is all for right now)
Save (not Save As = pas enregistrer sous)
Go back to the Website Verification Internet Browser window. Click on Refresh the page. What do you see?

Website REQUIREMENTS: (read the syllabus brochure handout for more detail)

You MUST have 3 distinct web pages (in English) linked together into a website. It must contain (technically): different fonts, different sizes of lettering, varied layout of text and images, different colors, at least one table, at least one list, images, internal links (anchors), external links, navigational tools and at least 50-100 words of ORIGINAL CONTENT in English per page. If your page is only images, you must add another page with some text.

HOMEWORK

Practice writing Code and using TAGS (the commands).

http://www.w3schools.com/html/html_intro.asp

http://www.ibdhost.com/help/html/

http://www.htmlcodetutorial.com/document/

http://www.devx.com/projectcool/Article/19816

Find out what a “color code” is.

Find out how to write bold, underlined, italic or colored text.

Find out how to center your writing, or to align the text on the right hand side of the page.

Here are some websites to help you. Use these or find your own.

Useful HTML tags:

http://cat.xula.edu/tutorials/