Lab 02 – Bring on the Style – and ClickJacking

Introduction

Web sites are meant to provide information, promote something, and/or attract users.  Up till now, we have looked mostly at the structure of web pages.  Now we will look at formatting – an important additional aspect of good web site design. The techniques used in HTML5 are cascading style sheets (CSS).  For this lab, dress up your site using CSS.

Part of the role of web author is to be creative, using the available tools.  Again, this lab will be building on the pages you created last week.  Therefore, it is highly recommended that you use a copy of the pages you created last week as the basis for this lab.  At a minimum your store Home Page (index.html), products page and sign-up form from the previous labs are required and shall be adapted to CSS.  In addition, your pages should convey a set purpose, be organized in such a way that it promotes that purpose, and be visually appealing. 

Since the focus in this lab is on appearance, a larger than usual portion of your grade will depend upon aesthetics.

Lab Requirements

Directory: You must create a folder under your public_html called "Lab02" (without the quotes) and store your work in that directory. You should copy your lab from last week into this directory and make changes to it here!  Make sure you do not modify the files in Lab01 folder. Note: You do not have to have Lab 1 completed in order to work on this lab, but you do need your store home page (index.html), products page (products.html), and sign-up form!

 

1.      (5 points) New style sheet: Create an external style sheet to contain a core set of styles used in all pages within this lab’s site.  The name of the style sheet must be “styles.css” (without the quotes).  At a minimum, define the following CSS properties for some element:

Ø  background-color

Ø  color

Ø  margin-xxx (left, right, top, or bottom) or padding

Ø  border-style or border-color or border-width

Ø  text-decoration or text-align or font-weight or font-size

 

2.      (2 points) Existing HTML pages: modify all of your existing HTML5 pages (that you have copied into the Lab02 directory) to link to the style sheet you created above. Then make any additional changes to each page so that the overall appearance is noticeably different now that the stylesheet has been added (hint: you don’t necessarily have to modify the body of your page to achieve this, though it is fine to do so).  Try to make use of CSS to make your pages more attractive and more functional.

 

3.      (4 points) New HTML5 page: Create a new page, “detail.html”, that provides details about one specific product in your list of products. Provide a link from the products list to the new page and ensure the new page links back to your products list. 

Ø  In an embedded stylesheet, define at least two classes. Apply styling using those classes

Ø  Use span or div tags in styling

Ø  Use a floating technique to put an image on the right or left side of a page

Ø  Use the CSS properties

Ø        position

Ø        opacity

 

4.      (2 points) Navigation bar: Create and style a navigation bar for your website. The navigation bar should have at least 2-3 links: to the home page (index.html), to the products.html page, and to sign-up form, if that is on a different page. Add the navigation bar to all the pages on your website.

 

5.      (4 points) ClickJacking Attack:

i)        Check out my version on w3school and support my site by clicking on the like button!

ii)      Did you get click-jacked?!  Take a look at my source code to see how I did it. Another example, with overlapping frames, is available here.

iii)    Your task is to implement a clickjack attack on your index.html.  Find a social media icon image such as (facebook like, yik yak, twitter, Instagram) and place it near the top of your page.

iv)    Add an invisible iframe positioned over the image, so when the user presses that image, you run some obnoxious media from the internet (ex. youtube, play music, etc). The site inside the iframe does not have to open in a new tab but it does need to play media inside the iframe. The trick is to make the iframe align exactly on top of the icon

 

6.      (1 points) Validation: Validate your CSS code using the CSS validator at http://jigsaw.w3.org/css-validator/. 

7.      (1 points) Modify the main student page of your web site (default.html) to add four new links to Lab02/index.html, Lab02/products.html, Lab02/detail.html, and Lab02/styles.css. Do not remove the links to the previous labs. 

 

Your web page must be constructed using Notepad++ or a similar text-only editor. The use of programs such as Microsoft Word, Microsoft Frontpage, DreamWeaver, ColdFusion, Mozilla Composer, etc. will be considered an honor offense.

Deliverables

  1. Your main web page should be called "index.html" (without the quotes).
  2. Your pages should contain all of the elements described in the requirements section above.

3.      All of your files should be in a folder called "Lab02" (without the quotes) on the Web drive. Your instructor will assume that your web pages are viewable at http://mope.academy.usna.edu/~mXXXXXX/Lab02/index.html where XXXXXX is your alpha number. You may want to check that this URL is viewable and that everything works correctly from a computer where somebody else is logged in. If you've goofed and linked to a file on your X drive, this will help you catch it!

4.      The main student page of your web site (default.html) must be modified to add four new links to Lab02/index.html, Lab02/products.html, Lab02/detail.html, and Lab02/styles.css. Do not remove the links to the previous labs. 

  1. (1 points) Turn in (due before lab on Friday):
    1. Paper submission:  turn in the following hardcopy at the beginning of class on the due date, stapled together in the following order (coversheet on top):
      1. A completed assignment coversheet.  Your comments will help us improve the course.
      2. First page of the output of the CSS validator, as run on your final Lab02/styles.css file.  This is a different validator, see http://jigsaw.w3.org/css-validator/ (Note: you will have to use the “File Upload” or “Direct input” option for this to work).
    2. Electronics submission: zip your Lab02 folder with all its contents and upload the zip file to Lab02 assignment on Blackboard.

 

When finished, the structure of your web site should look like this: (items in blue shall undergo creation/modification during this lab)

            \\mope.academy.usna.edu\mXXXXXX\public_html

                        default.html                            (main page for the course; has links to each week’s lab)

Lab01/

                                    index.html

newindex.html            (page that redirects to index.html)

                                    products.html

                                    signup.html (optional)

                        Lab02/

                                    index.html                   (modify to use CSS and ClickJacking attack)

                                    products.html              (modify to use CSS)

                                    signup.html                 (modify to use CSS – if you had this page from Lab 02)

                                    detail.html                   (new page with details on one of your products and additional CSS styling)

                                    styles.css                     (new stylesheet)