Original file was S10Lab3.tex



CSCE 102 Lab 2

CSCE 102 Lab 2 —Template, Links, and Lists

General information

• Always bring your book and lecture notes to lab.

• Use clean indentation so your code will be easy to read.

• Include the matching closing tag when you enter the opening tag so you will not forget them and so that you can reliably test the code as you enter it.

• Maintain backup copies of all of your work throughout the semester.

• Work from your X drive when you are in the lab and copy your work to your flash drive at the end of lab. Don't put your flash drive in until you are ready to copy.

• Remember to save your work and test frequently as you add code.

Academic honesty

• Remember the work you turn in, must be your own.

• Never allow anyone access to your files.

• Never give anyone your password.

• Do not let anyone use your USB memory.

• Never give anyone a printed copy of your code.

• Never allow anyone to copy your work.

• Do not copy from the web.

• Your text and your code are to be written by you.

• It is good to help your classmates, explain the code, talk about how it works, help debug, but your work will not be identical.

Configuring the folder view. You will need this set for the rest of the semester, especially when we start working with images.

This makes the file extensions visible in the list of files in the folder.

1. Open a folder window

2. Click on the View tab in the top menu bar

3. And be certain that File name extensions is checked.

4. You should then be able to see the file extensions by the file names.

Problem:

You will first create a template that you can use for the rest of the semester. And then practice writing the code to create HTML5 compliant documents containing links to the web, internal links using fragment identifiers, and ordered and unordered lists.

Part A ̶ In-class Assignment: Getting Started ̶ Creating a Template

1. Open the editor (SciTE) and you will have a blank page.

2. Open last week’s code (All_Index_xx.html) by dragging and dropping the icon, from the folder, on top of the open SciTE window.

3. Use file save-as and save the file as A_Template_xx.html in your All_102_Submissions folder. (As always the xx is replaced by your first and last name initials.)

4. Turn on word wrap in your editor by checking “wrap” under the options menu. You will need to do this every time you open SciTE.

5. In A_Template_xx.html delete everything between the opening and closing body tags.

6. Change the title to: Template xx (The xx is replaced by your first and last name initials.Each week you need to replace the title.)

7. Change the comment in the head to contain your name, your section, your Lab instructor’s name, the words Lab 2 Template and today’s date.

8. Save the file (A_Template_xx.html). (You can use Control s to save.)

• Your template must contain the required elements: html, head, title, meta, and body.

• Look and be certain that that the elements have closing tags.

o The meta element has no closing tag; it is an empty or void element.

• If you made corrections be certain to save.

• You now have a template that you can use throughout the semester.

Part A (Continued) lab2Axx.html ̶ Due at the end of class

9. Now, use file save-as and save the template as lab2Axx.html in your All_102Submissions folder, where the xx is replaced by your first and last name initials.

• For the rest of the semester the xx will be your first and last initials.

10. Change the content of the title element.

❖ For the rest of the semester you can open the template file in SciTE and use save-as and save the template with the new file name, update the title, and you will not need to retype the basic required elements.

11. Insert a comment with today’s date, your name, and section below the Meta element.

In the Body (Everything that shows on the page is in the body)

12. Insert an h2 that says: Creating Lists and Trying Links!

• Remember to enter the closing tags when you enter the opening tags, save your file often, and test your code in Firefox, or Chrome, as you work. You can test your file in the other browsers when you finish.

13. Create an unordered list that contains the courses that you are currently taking.

14. Insert an appropriate heading above the list.

15. Below that list, create a list of keyboard shortcuts that looks similar to (contains all of the same shortcuts in the same order) the list shown below:

1. Ctrl and s - Saves the document

2. Ctrl and z – undo

3. Ctrl and y – redo

4. Ctrl and x - Deletes the selected area and copies to the clipboard

5. Ctrl and c - Copies the selected area to the clipboard

6. Ctrl and a - Selects the entire document

7. Ctrl and v - Pastes from the clipboard

8. Ctrl and f – find, search the page

16. Insert a heading using an h1 above the list of keyboard shortcuts.

17. Insert a paragraph that explains which of the shortcuts above you think are the most useful and why.

18. Below that paragraph, create an unordered list that contains links to USC, MYSC, and the USC department website for your major.

19. Above the list of links insert an h2 that says: Useful USC Links:

20. Below that list, create an unordered list that contains three links to the headings that you have created for your other lists; one to your courses, the keyboard shortcuts and one to the USC useful links.

• Hint: You will be using fragment identifiers (internal links ̶ linking within a document) as shown on pages 250-251 in your Web Design text book. (Also, in your lecture notes)

1. Give each heading (that is above a list), an id attribute.

• You make up the attribute value for the id.

o The id cannot be a number and cannot contain any spaces.

o Ids must be unique within the HTML document.

o All attribute values are enclosed in quotation marks.

2. Make your browser window small when testing the code.

• When you click the link, the page will scroll in the browser window to place the particular heading near the top of the browser window.

• You can see this happen only if your browser window is small enough so that the heading does not already show in the browser window.

❖ Note: You have created two files A_Template_xx.html and lab2Axx.html in your All_102Submissions folder.

❖ If you have completed both the template and lab2Axx.html, start working on part B.

Part B ̶ More Practice (lab2Bxx.html) ̶ Due the night before you next lab

1. Open your template in SciTE and save the file in your ALL_102_Submissions folder as lab2Bxx.html.

2. Remember to update the title.

3. Insert an h1 that says : More Fun with Links and Lists

4. Insert a heading that says: Ten National Parks in the United States

5. Create an unordered list that contains ten of the national parks in the US.

6. Insert an h1 that says :East coast states from Virginia to Georgia

7. Create an unordered list that contains the US east coast states from Virginia to Georgia

• Under South Carolina, nest an unordered list containing 10 state parks including Hickory Knob State Park.

• Under Hickory Knob State Park, nest an ordered list of five things to do or see there.

▪ Note: The entire nested list closes before the li closes - that it is nested inside of the li element.

8. Insert a heading that says Phrase/in-line Elements.

9. Below the heading insert a description list (pg 42) that contains eight phrase elements from your text book (pg 36) along with an explanation of what each one does - use your own words. Look them on the web under W3 Schools and see what they do. Try them out in your explanation,

10. Insert a heading that says: Links to the lists above

• Create an unordered list that contains links to the different topics in this document:

o The topics were:

National Parks

East Coast States from Virginia to Georgia

Phrase Elements

o These are internal links/fragment identifier (Like in part A above)

▪ Insert ids in the headings and remember to make the browser window small when testing, if necessary.

Updating All_Index.html

• Open your All_Index_xx.html file in SciTE (drag the icon from the folder and drop it on top of the open lab2Bxx.html file in SciTE. There will now be two tabs in SciTE, lab2Bxx.html and All_Index_xx.html.

• In All_Index_xx.html insert links to A_Template_xx.html, lab2Axx.html and lab2Bxx.html at the bottom of the page.

• Put all of your links in an unordered list.

[pic]

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download