HTML代写: Assignment 3: HTML and CSS

程序代写 CS代考

Assignment 3: HTML and CSS

Due: Due by 11:30 pm. Friday, Mar. 16, 2018. Marks: 50 marks.

Learning Goals:

At the end of this assignment you will be able to:

  •   Create, from scratch, a basic web page;
  •   Correctly place HTML tags to achieve specific formatting goals;
  •   Create a cascading style sheet to format various web page components;
  •   Include hyperlinks and images into a web page;
  •   Upload your web page and images to a web-accessible space using FTP

    Submission: This assignment is to be done individually. All that needs to be done for submission of this assignment is to type your web page URL into the Assignment 3 Submission text box. Remember to make it a clickable link. As well, include your name and student number.

    Note: You MAY NOT use a web page editor or Word Processor (for example, but not exclusive to, DreamWeaver, Front Page, Home Page, GoLive, Word, etc.) for this assignment – if it appears that you have, you will get a 0 on the assignment.

    Resources for this Lab

    1. a)  NCSA Beginners Guide to HTML. Pay particular attention to the section on HTML Documents, Markup Tags, Linking, and In-Line images. Also, your own notes from lectures will be helpful. Other useful links are:
    2. b)  Guide to HTML, Another introduction to webpage design site.
    3. c)  Web Colors This link shows you a bunch of hexadecimal colour codes.
    4. d)  CSS Tutorial A good beginner’s tutorial on implementing Cascading Stylesheets.

TASK 1: Getting Started – no marks for this TASK, but it is key to everything else.

  1. Make a folder on your disk (H: drive if you are using the lab). Call it Assignment 3. In that folder make another folder and call it www.
  2. Openatexteditor(i.e.TextPad,NotePad++,Sublime,etc.).Youwillstartto create your web page here. Save your file in your www folder. Call the file index.html It is very important that you name it index.html otherwise the web server will not use it for your default web page.
  3. Notethatonsomewebserversfilenamesarecasesensitiveandmustbe written EXACTLY. i.e. index.html For simplicity, use only lowercase letters and numbers in all of your file names. Do not use ANY CAPITAL LETTERS, SPACES or any funny characters (!/-#^*+= etc.).

TASK 1 Deliverables: There are no marks for this section, but you should still have an Assignment 3 folder created in your H:/ drive, or on your flash drive, etc. You should have created a file called index.html and it should be saved in the folder.

TASK 2: HTML Basics (20 marks)

Build a web page including the following components. Your web page be able to run in any popular web browser, Chrome, Internet Explorer, Firefox, etc. You may want to use the Web as a resource for ensuring that everything works in all browsers. You might like to validate your HTML with http://validator.w3.org

  1. Structuretags–includingopenandclosingHTMLtags,openandclosing HEAD tags, and opening and closing BODY tags. 2 marks
  2. Using the TITLE tags (must put this in the correct place — opening and closing tags needed) create a title that says CSC105 Assignment 3: My Awesome Webpage 2 mark
  3. InsideofaHEADERtag,usetheH1tagwiththealignattributeandcentre your name on one line, followed by your lab section (or lab class time) on the next using the H2 tag. DO NOT include your student number. 2 mark
  4. Use the UNORDERED LIST tags (open and close tags required) and LIST ELEMENT tags to create an unordered list where you list up to three courses you are taking. If you are only taking one course, then make some up. 3

marks

  1. Use the ORDERED LIST tag (open and close tags required) and the LIST ELEMENT tags to create an ordered list where you list three of your favourite books. Of course, be sure to order them from most favourite to least favourite. 3 marks
  2. Use the ARTICLE tag (open and close tags required), and the PARAGRAPH tag (doesn’t need a close tag, but should have one) to create two short paragraphs comparing and contrasting two different web sites on two different design, usability, and/or reliability issues.

    Use whatever web sites you like. Write in your own words. Make sure you state what components you are comparing and contrasting (e.g. navigation, colour, layout, images, information reliability, etc. ).Mark a few of the words with span tags that you want to emphasize. Later, you will give these tags ids and stylize them. Support your compare/contrast reasons.

    Each of the websites you are comparing and contrasting should have a clickable link taking the user to the website. When clicked the link should open the page in either a new tab or another instance of the web browser (Hint: use the target=”_blank” attribute of the Anchor tag — you will learn more about this in upcoming tasks, so you might want to come back to this component later.). 5 marks

  3. Use the LINE BREAK tag (this is one of the few tags that doesn’t actually have a close tag) to create two or three empty lines after the ARTICLE from above. Use the alternate text symbols to display the following items on the same line on the screen:

    <> © È

    Make sure there are at least 5 spaces visible on the web page between each these symbols (e.g. < > © È). You will need to look up the escape sequences for each of these symbols as well as the one for space. 2 marks

  4. Create one empty line (use the Line Break tag). Insert a HORZONTAL RULE tag to place a line under your work in this task. 1 mark

    NOTE: As you do the assignment, I would recommend that you view your index.html file on a regular basis in a web browser. In order to see your changes you will need to save your file. This task is a very good example of multitasking. You do not need to close index.html in order to save and view it in the browser. The best way to do this task is to have both a text editor and a web browser open.

o First, open your index.html file in the web browser (double click it).

o Second, make a change to your index.html file in a text editor and save it.

o Third, go to your web browser and select the reload or refresh button. This will reload your file in the browser with the new changes.

Task 2 Deliverables: A web page that meets all of the Task Two criteria. You will not need to attach anything to the online Assignment 3 submission. All you need to do is type in the full URL of your website. As well, add your name and student number in the submission textbox.

TASK 3: Formatting with Styles and Attributes (10 marks)

You will create a Cascading Stylesheet file named my_style.css and then link to it in your index.html file in the HEAD section. In my_style.css you will have entries for each of the questions in this task.

  1. Set up different fonts and different colours for the heading tags (H1 and H2) you used in Task 2. These different fonts and colours must be clearly viewable on your web page. 2 marks
  2. Set up a different font and colour for each of your span tags. Give each of your spans a different id and use the # selector to stylize them. These different fonts and colours must be clearly viewable on your web page. 2 marks
  3. Set up different coloured backgrounds and borders to be used for the HEADER and ARTICLE sections of your page. 4 mark
  4. Set up a different background colour for your <BODY> tag. 2 mark

You can use the Web Colors link to help you select the colour. But remember to spell colour the American way in your stylesheet (color). Also, don’t pick a colour that will obscure any of the styles you have set up. For example, if you selected #FF0000 for one of your spans, then you wouldn’t want to select it for the background where you use that span — you wouldn’t be able to see any of your text.

Task 3 Deliverables: CSS file my_style.css with all you stylesheet entries in it. The same index.html as you used in Task 2, but with the LINK tag added. This task will be a cumulative addition to index.html. You will need to upload your CSS along with your html to the www folder on the web server. You will not need to attach anything to the online Lab 3 submission. All you need to do is type in the full URL of your website. As well, add your name.

TASK 4: Images and Links

(10 marks)

Further enhance your web page with the following criteria:

  1. Give your page two <BR> tags below the Horizontal Rule (<HR> tag from Task 2). Using IMG Tags with the SRC attributes make two pictures visible on your web page. To do this you will need to put a copy of each picture in your www folder.

    If you don’t want to use your own images, you can find images online to use. When you find an image you like, move your mouse over the image and click with the right mouse key.

    For example, if I wanted to see a picture of my kids on my web page I would do the following:

    First: Put a copy of the picture file (call it joraoscar.jpg) in my www folder. Second: In my index.html, at the section where I want the picture to appear, include the IMAGE tag with the SOURCE attribute (e.g. <IMG SRC=” joraoscar.jpg”>.

    You will start out the same way for your index.html — of course, you would use your own image file name, and add a few attributes. .

    Your first image will have a text description. For the first picture please float it to the left of the description. Check out Rich’s kids as an example. You may use the Width and Height attributes of the IMG tag to set your first picture’s size, or you can set the size inside your stylesheet. Make the first image a different size than your second picture. Close with two <BR> tags.

    4 marks for this task

  2. Using information about creating links to other web pages via use of the ANCHOR tag, go into the description for your first image and create a link somewhere in the description to the web site where you got the image. For example, if I got joraoscar3.jpg from http://web.uvic.ca/~rlittle then my link would look something like this:

    <A HREF=”http://web.uvic.ca/~rlittle”> Rich’s kids </A>

    Of course, you would use a URL (Uniform Resource Locator) to the web site that your picture came from or that you want to use with your picture. 3 marks

  3. In the example above the user of my web page would click on “Rich’s kids” to go to http://web.uvic.ca/~rlittle. However, it is possible to attach links to things other than text. Make your second image into a link to the page where the image came from. The link should open in a new web page (or a new tab). 3 marks

NOTE: My example is not exactly the way yours is to look so be careful.

Task 4 Deliverables: Using the same index.html as you used in Task 2 and 3, make sure that all of the criteria listed in this Task (Task 4) are visible. Make sure that all of your links work. This task will be a cumulative addition to index.html. You will not have more than one index.html file. You will not need to attach anything to the online Assignment 3 submission. All you need to do is type in the full URL of your website. As well, add your name and student number.

TASK 5: Uploading your Web Page Files

(5 marks)

In order to make your files visible to the world, you must upload them to a webserver. When you applied for your Netlink ID you received some space on the UVic webserver. In order to get your files from here, to there, you will have to use an FTP (File Transfer Protocol) program.

We will cover how to upload in lab. This can be a difficult process, so don’t hesitate to ask for help – especially at the UVic Computer Science Consulting/Help Desk. They will know exactly when you will be needing help with this and will be ready.

Make sure that you put your files from YOUR www directory into the www directory on the Uvic web server. This is the only directory on the web server space that is automatically enabled for web pages. (Note, VERY IMPORTANT — don’t copy your entire www folder over, just the files in the folder). We will cover how to set file permissions in lab class.

Once you have it uploaded to the web server, make sure that you check to see that it works. Your web page can be viewed by anyone at http://web.uvic.ca/~userid (i.e. my netlink website would be http://web.uvic.ca/~rlittle). You should check your site on two different computers — just to make sure the site is not locating files on a local machine.

If you have tried several things and you still can’t get it to work, check out our Troubleshooting help (some of the instructions here are for different types of FTP applications, but the general ideas still apply).

  •   5 marks for working website – no flaws in the links, everything working.
  •   -1 or more for non-working links/html formatting
  •   -1 for incorrect URL provided in submission
  •   -1 for something other than index.html as main page

Task 5 Deliverables: Use FTP to get index.html and all of your image files to your NetLink account. Check the http://web.uvic.ca/~username (where ~username is your NetLink ID) on more than one computer connected to the internet.

Using the Assignments link on the CSC105 Connex page, go to Assignment 3. Here in the submission text box you enter your full name and student number. Then you put the URL of your web page. It will be http://web.uvic.ca/~username (where ~username is your NetLink ID). Make sure to make it a clickable link.

OVERALL ASSESSMENT:

Five marks are set aside for overall assessment. 4 to 5 marks are given for outstanding work. The assessment proceeds as follows:

4 – 5 marks given for strong evidence of original thinking; excellent organization; capacity to analyze and synthesize; superior grasp of subject matter with sound critical evaluations. All other material in the assignment is correctly completed in an exemplary manner.

1-3 marks given for evidence of grasp of subject matter, some evidence of critical capacity and analytic ability; reasonable understanding of relevant issues; evidence of familiarity with the concepts. All other material in the assignment is correctly completed.

Final note — the staff at the Computer Science Consultants Office (Help Desk) are there to help you. They can’t “do” the assignment for you, but they can help out with application problems, printer problems, understanding questions, saving documents, uploading and moving files, etc. Call on them for help.

To Recap the above instructions:

The host computer you are uploading to is unix.uvic.ca

When you are ready to upload your files to your netlink account (so they are viewable on the web), you must

Set your files (including the .gif or .jpg files) permissions to:

Owner: read, write, execute
Group: read, execute

Other: read, execute

IMPORTANT: UPLOADING AND SETTING PERMISSIONS CAN BE THE MOST FRUSTRATING THING YOU DO IN THIS LAB — IF YOU ARE HAVING DIFFICULTIES SEEK HELP FROM THE FOLLOWING:
1). Your TA — however, your TA may not be available at the exact moment that you need her.

2). Your professor — however he might not be available at the exact moment that you need him.

3). The consultants at the Computer Science Help Desk — available when the Help Desk is open.

4). The consultants at the main University Computer Help Desk in the basement of the Clearihue. These people really know their netlink account stuff and if you are badly stuck, they are the ones to go to.

Related Posts