Original file was S10Lab3.tex - University of South Carolina



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.

12. Insert an h2 that says: Playing with Lists and 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 exactly five things that bring you joy.

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) the list shown below:

• Ctrl and a - Selects the entire document

• Ctrl and x - Deletes the selected area and copies to the clipboard

• Ctrl and c - Copies the selected area to the clipboard

• Ctrl and v - Pastes from the clipboard

• Ctrl and f – find, search the page

• Ctrl and s - Saves the document

• Ctrl and y – redo

• Ctrl and z – undo

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

17. Below that list, create an ordered list that contains links to Google, USC, and two of your favorite websites.

18. Above the list of links insert an h3 that says: My List of Links

19. Below that list, create an ordered list that contains three links to the headings that you have created for your other lists:  Joyful things, keyboard shortcuts, and the list of 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 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 h2 that says : More Practice with Lists and Links

4. Insert a heading that says: List of East Coast States

5. Create an ordered list that contains all US states that are on the East coast.

• Under South Carolina, nest an ordered list containing exactly 6 towns in SC with one of them being Columbia.

• Under Columbia, nest an unordered list of five things to do or see in Columbia.

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

6. Create an unordered list of what you should do to prepare for a hurricane. (Research this – don’t just make it up)

• Under one of the list items in the list, nest an ordered list with steps of how you would accomplish that particular list item.

• Insert an appropriate heading above the hurricane preparedness list.

7. Insert a list of something that you might need a list of; you decide and include a heading above it.

• Nest another list under one list item – again you make it up.

• Above this list, insert an appropriate heading for this list.

8. Insert a heading that says Phrase Elements.

9. Below the heading insert a description list (pg 42) that contains 6 phrase elements from your text book (pg 36) along with an explanation of what each one does - use your own words.

10. Insert a heading that says: Links to topics on this page

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

o The topics were:

East Coast States

Hurricane preparedness

Your list

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 ordered list.

[pic]

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

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

Google Online Preview   Download