D. Nixon: CS 12 > Week 8

Home (CS 12) | Assignments | Tutorials | Examples | Quizzes & Exam | Other Info | Chat

Computer Science 12


Week 8




Sunday, April 5, 2020



Assignment 8 (due next week)

  1. Necessary (and tricky!) preliminaries to the HTML assignment
  2. HTML assignment (due before our next class, April 12)
  3. Blog (due before our next class, April 12)
  4. Excel practice
  5. Excel extra-credit assignments (due Sunday, April 26)
  6. Paper on problem-solving, draft 3 (due Sunday, April 19)
  7. Powerpoint slide show, draft 2 (due Sunday, April 26)
  1. Necessary (and tricky!) preliminaries to the HTML assignment

    For your HTML assignments, you must use a plain text editor, NOT an "HTML editor" program. HTML editors (which typically hide the actual HTML) tend to add a lot of extra junk that you don't need. In your HTML assignments, you will lose points for unnecessary irrelevant junk.

    However, before you can begin creating HTML files in a plain text editor, there are some possibly tricky preliminaries you must deal with first. In the HTML-related tutorials area, see first the section on either Editing HTML files using TextEdit on a Mac or Editing HTML files using Windows Notepad, depending on which kind of machine you are using.

    On a Windows machine, another crucial preliminary issue is that you must make filename extensions visible. (Otherwise, Windows Notepad can create  *.txt  files only, not  *.html  files.) On Windows, filename extensions are invisible by default. For info on how to make them visible, see the tutorials in the sections on Filename extensions in Windows 10 and Windows 7.

    Do not attempt to create an HTML file without first taking care of the matters above.

    After you've mastered the above, use your text editor (e.g. Notepad or TextEdit) to create a blank HTML file with the filename  index.html  (exactly that filename and no other), and copy and paste into it the following text:

    <!DOCTYPE html>
    <html>
       <head>
          <title>Hi from tab!</title>
       </head>

       <body>
          <p>Hello from the main window of your browser!</p>
       </body>
    </html>

    Then save the file in your text editor.

    Then open the file in a web browser. (In Windows, right click on the filename and select a web browser other than (Microsoft) Internet Explorer or Microsoft Edge, which do not handle local files well.) You should see "Hello from the main window of your browser!" at the top of the main window. You should see "Hi from tab!" on the tab at the top.

    If you are not able to accomplish the above preliminaries, ask for help ASAP.

    Observe that the entire HTML file, except for the first line, has a structure like this:  <tag>content</tag> .  The tags are items enclosed in  <  and  > .  The tags we've seen so far are intended to be used in matching pairs, such as:

    • <html>  ...  </html>
    • <head>  ...  </head>
    • <title>  ...  </title>
    • <body>  ...  </body>
    • <p>  ...  </p>

    A pair of tags, together with whatever stuff is in between, is known as an HTML element. The tag at the beginning of an element is called the opening tag, and the tag at the end is called the closing tag. Some elements may contain other elements, e.g. the  html  element contains the  head  and  body  elements. The  head  element contains the  title  element, which contains text to be displained in the browser tab -- and would also be the title listed by search engines such as Google, if they were aware of your page. (The  head  element may also contain miscellaneous other elements that are beyond the scope of this course.) The  body  element contains everything that appears in the main window of your browser, and may contain various elements that specify the structure of the document, such as paragraphs.

    Note:  Not all HTML tags are intended to be paired or to enclose other stuff. But the specific tags we've discussed above are indeed intended to be paired.

  2. HTML assignment (due before our next class):

    A) After having created  index.html  as instructed above, modify the file in your text editor as follows:

    1. Replace  "Hi from tab!"  with your first and last name, taking care not to disturb the  <title>  and  </title>  tags.

      Save the modified file in your text editor, then reload the file in your web browser. You should now see your name on the tab.

    2. Then, in between the  <body>  and  </body>  tags, replace:

            <p>Hello from the main window of your browser!</p>

      with:

            <h1>FirstName LastName's simple website</h1>

            <p>This is a website I'm creating for Computer Science 12.</p>

      replacing  FirstName LastName  with your own actual first and last name.

      Save the file in your text editor, then reload it in your web browser to see how it looks. The first line in your main browser window should be an enlarged and bolded heading. The second line should be a normal paragraph.

      Note that the  <p>  and  </p>  tags enclose a paragraph, whereas the  <h1>  and  </h1>  enclose a main heading.

      Now try replacing  <h1>  and  </h1>  with  <h2>  and  </h2>  and see what happens.

    3. You will now be shown how to create a link in HTML. In your text editor, modify the following paragraph:

            <p>This is a website I'm creating for Computer Science 12.</p>

      so that "Computer Science 12" becomes a link to this Computer Science 12 website. Accomplish this as follows:

            <p>This is a website I'm creating for <a href="http://cs12.dnixon.nyclocal.net/">Computer Science 12</a>.</p>

      Below, the items you need to add, in order to accomplish the above, are shown in bold:

            <p>This is a website I'm creating for <a href="http://cs12.dnixon.nyclocal.net/">Computer Science 12</a>.</p>

      Note that a link is created using an  a  element. Note also that the opening  a  tag consists of more than just  <a>  -- it also contains what is known as an HTML attribute, or  name="value"  pair, where the name is  href and the value is a URL (web address).

      Be sure not to forget the closing  </a>  tag, which the  a  element also requires.

      Save the file in your text editor, then reload it in your web browser. Make sure the link works.

    B) Download the ZIP file HTML-demo.zip. Open it (by double-clicking on it, if you are using Windows) and copy the file  demo.html  into the same folder where your file  index.html  is. Then look at your copy of  demo.html  in both your text editor and your web browser to see what various HTML tags do. In particular, note that  demo.html  contains a link to  index.html .  If  demo.html  and  index.html  are together in the same folder, then the link to  index.html  in  demo.html  should work. Click on it to make sure it does work. Look at other tags/elements too, to see what they do.

    C) Using both  index.html  and  demo.html  as models, create a new HTML file with the filename  aboutme.html  which does the following:

    1. Both the browser tab and the main heading within the browser window should say:

      About FirstName LastName
      

      replacing "FirstName LastName" with your own actual first and last name.

    2. The page should contain two or three paragraphs about your life and/or your interests, possibly including your career goal and/or your hobbies. Include links to at least two relevant websites that are of interest to you. (Your inclusion of those links will count toward a significant part of your grade for the assignment.)

    Save  aboutme.html  in your text editor and open it in a web browser. Make sure the links work.

    D) Give both  index.html  and  aboutme.html  links to each other, as follows:   In  index.html ,  add the following paragraph:

          <p>Here is a page <a href="aboutme.html">about me</a>.</p>

    In  aboutme.html ,  add the following paragraph near the bottom, just above the closing  </body>  tag:

          <p>Back to <a href="index.html">my main page</a>.</p>

    Save both files in your text editor. Then open a web browser to make sure the links work. Note: the links will work only if  aboutme.html  and  index.html  are in the same folder. In your web browser, you should be able to go back and forth between the two files by clicking on the links repeatedly.

    E) When you are finished, create a new ZIP file (a.k.a. a "compressed folder") with a filename like the following (replacing "last" and "first" with your actual last and first names, as usual):

    • last-first-website-8.zip

    (To create a new empty ZIP file on a Windows machine, right-click in the empty space in a folder window, then select "New," then select "Compressed (Zipped) folder". It's actually a file, not a folder, but it will look like and appear to behave like a folder in Windows. Then rename it to give it the required filename.)

    Then copy both  index.html and  aboutme.html into the ZIP file. Your HTML homework must be submitted as a single ZIP file, NOT in the form of separate HTML files attached directly to an email message.

    Submit the ZIP file via email by no later than the beginning of next week's class, and make sure you also have access to the files during lab on that day. The ZIP file must contain both of your HTML files. The email message should have a subject line like the following:

    HW 8 HTML, LastName FirstName

    where "LastName" and "FirstName" should be replaced by your own last name and and first name, respectively.

     

  3. Blog (due before our next class):

    Before you create a blog, consider what general topic you would like to be the main focus of your blog. You may use any topic that is of interest to you, within reason, and within legal limits. (No copyright violations, no threats or other harassing content, etc.)

    You will NOT be asked to research your topic. The sole purpose of this exercise will be to give you some practice creating and posting to a blog. So, just pick a topic that you happen to be knowledgeable about, and about which you can easily write at least five or six sentences without having to think very hard. (Still, don't plagiarize. Do NOT, in this or any other exercise in this course, just copy and paste text from somewhere without giving credit.)

    Then create a blog on Wordpress.com. For details, see the tutorial Getting started on Wordpress. You may use either your real name or a psuedonym. As instructed in the above-linked tutorial, write two blog posts briefly introducing yourself and your blog's main topic.

    When you are finished with the exercise described in the tutorial, copy and paste the URL of your blog  (https://sitename.wordpress.com/  - replacing "sitename" with your actual Wordpress sitename) into an email. (Do not submit a file.) Your email must have a subject line with the following format:

    HW 8 Blog, LastName FirstName

    replacing "LastName" and "FirstName" with your own actual last and first names.

    Be sure to keep track of your username and password. You'll be asked to add more to your blog later in the semester.

  4. Excel practice:

    You will not be asked to hand in an Excel assignment next week. However, be sure to give yourself plenty of practice using the SMALL and LARGE functions and the GoalSeek tool, to prepare for next week's quiz.

  5. Excel extra-credit assignments (due three weeks from now):

    There are two extra-credit assignments that can be done in the next two weeks:

    1. Excel Solver tool:

      Work through the examples in the tutorials on the Excel solver tool included in this weeks Excel tutorials. Create spreadsheets similar to the ones in the tutorials, but using different sets of data, and use the Solver tool as instructed.

      Also write a brief paper (1 to 3 pages) explaining how you used the Solver tool. The paper does not need to go into as much detail as was asked for in the problem-solving paper, but should explain the problems well enough to show that you understand both the problems themselves and how to use the Solver tool to solve them. The paper must contain bibliographic data on whatever tutorials you used, and must contain citations for any quotes or graphics from the tutorials.

      Put at least three different (the more different from each other, the better) spreadsheet examples on different sheets within one Excel file, which must have the following filename: last-first-solver-EC.xlsx ,  where "last" and "first" must be replaced by your own actual last name and first name. The accompanying brief paper must similarly have the filename format last-first-solver-EC.docx .  Send these files together in an email with the following subject line:

      HW 9 Excel Solver EC, LastName FirstName

      where "LastName" and "FirstName" must be replaced by your own last name and and first name, respectively.

    2. Excel Array formulas

      Work through the examples in the tutorials on Excel array formulas included in this weeks Excel tutorials. Create spreadsheets similar to the ones in the tutorials, but using different sets of data, and use the array formulas as instructed.

      Put at least four different (the more different from each other, the better) spreadsheet examples on different sheets within one Excel file, which must have the following filename: last-first-array-EX.xlsx ,  where "last" and "first" must be replaced by your own actual last name and first name.

      Also write a brief paper (1 to 3 pages) explaining your examples and your use of array formulas therein. The paper does not need to go into as much detail as was asked for in the problem-solving paper, but should explain your formulas well enough to show that you understand them. The paper must contain bibliographic data on whatever tutorials you used, and must contain citations for any quotes or graphics from the tutorials. The paper must have the following filename: last-first-array-EX.docx ,  where "last" and "first" must be replaced by your own actual last name and first name.

      Send these files in an email with the following subject line:

      HW 9 Excel Array EC, LastName FirstName

      where "LastName" and "FirstName" must be replaced by your own last name and and first name, respectively.

  6. Paper on problem-solving (Draft 3 due two weeks from now)

    By now you should have written three sections of the paper, one for the problem you chose at the beginning of the semester, and one for each of the two Excel problems assigned in Week 5.

    Draft 3 of the paper must contain all of the above plus a new fourth section, discussing problem-solving techniques in general, of which your approaches to the three Excel problems are examples. Refer to the tutorials provided in Week 5, and be sure to cite them as appropriate. Put this new section at either the beginning or end of your paper, whichever flows more naturally. The new section should be at least one and a half pages long and no more than three pages long. (It may be double-spaced.)

    The paper must be a Microsoft Word document with a filename with the following format:

    • last-first-prob-solve-paper-3.docx

    where "last" and "first" should be replaced by your own last and first name. Also, together with the paper, re-submit the spreadsheet (or a corrected version thereof) that was the focus of draft 1 of your paper. Give the spreadsheet a filename like the following:

    • last-first-prob-solve-spreadsheet-1.xlsx

    again replacing "last" and "first" with your own actual last and first names. Submit both files attached to a single email message with a subject line like the following:

    HW 9 Paper Draft 3, LastName FirstName

    where "LastName" and "FirstName" should be replaced by your own last name and and first name, respectively.

  7. Powerpoint slide show, draft 2 (due due three weeks from now):

    Using this week's tutorials on PowerPoint, spend some time playing with PowerPoint's animation and transition features.

    Note that PowerPoint animations are vastly different from Scratch animations, in both their purposes and capabilities.

    Add a second part to your PowerPoint slide show comparing and contrasting the capabilities of PowerPoint animations with the capabilities of Scratch animations. The new part should be 5 to 10 slides long. Your slideshow must include demo examples of at least two of PowerPoint's animation capabilities, but must NOT contain a video file, because the latter would likely be too big to submit via email.

    Your slideshow must also contain part 1, with corrections made in view of whatever feedback you received on part 1..

    Submission instructions will be provided later.


To all information for Week 8  |  To all homework assignments



Tutorials on HTML and related topics

HTML:

HTML links:

Editing HTML files using TextEdit on a Mac:

HTML files are plain text files which must be edited in plain text mode. But TextEdit normally uses rich text format, not plain text. To make TextEdit use plain text format, see:

Editing HTML files using Windows Notepad:

Note: Editing files in Windows Notepad can be done reliably only when filename extensions are visible. See the pages below on how to make filename extensions visible in Windows 10 and Windows 7.

Filename extensions in Windows 10:

Filename extensions in Windows 7:

Important warnings about Windows Notepad: Alas, recent versions of Notepad have the following bugs (at least on Windows 7):

  1. Notepad sometimes refuses to save a file when that same file is also highlighted in a folder Window. (It will sometimes pop up a box saying "This process cannot access the file because it is being used by another process.") To get around this, move the highlight to a different file.
  2. Notepad sometimes does not save a file that has text highlighted within it. Most dangerously, the failure to save in this case is silent. Always make sure NO text in your file is highlighted before you save the file.

To avoid these bugs, you may wish to download and install another plain text editor Notepad++. However, if you're a Windows user, you should make sure you know how to use plain old Notepad too, because Notepad is available on every Windows machine.


To all information for Week 8  |  To all tutorials about the World Wide Web



Excel tutorials

On the SMALL and LARGE functions:

Sums with SMALL and LARGE functions:

Important notes:

On Goal Seek:

Range names:

Note: If you use Excel range names, cell names, etc. on a quiz or exam, you must provide a table indicating what range(s) or cell(s) your name(s) refer to.

On the Excel Solver tool (used in extra credit assignment):

On array formulas (used in extra credit assignment):

Important: Do NOT use array formulas (of the Ctrl-Shift-Enter variety) on quizzes, on the final exam, or in regularly-assigned homework. While they can be useful, they also have serious limitations, and there are good alternatives to array formulas in the vast majority of cases.


To all information for Week 8  |  To all tutorials about Excel



Tutorials on Powerpoint animations

Below are some tutorials on PowerPoint animations and transitions:


To all information for Week 8  |  To all tutorials about PowerPoint



Example files for this week

Some example files will be uploaded here.

More may appear here before and during our online class session today (April 5).


To all information for Week 8  |  To all example files



Study guide for next week's quiz

Online quiz 2, to be given on Sunday, April 12, will include the following:


To all information for Week 8  |  To all quiz and exam study guides

D. Nixon: CS 12 > Week 8