Introduction to Computer Science – CSC101 Summer II 2011
advertisement
Introduction to Computer Science – CSC101 Lab #1 – HTML I: The Basics Due: July 13, 2011 @ 5:00pm (Wednesday) Points will be deducted for labs that are turned in late! Your Name: __________________ Summer II 2011 WFU E-mail Address:_________________ Pre-Lab Reading Assignment: If you have not completed the Pre-Lab instructions then stop now and complete them. They can be located by going to http://www.wfu.edu/~pryoree and then to the course calendar. Lab Objectives: 1. 2. 3. To create a simple home page by hand coding HTML in Notepad. Learn to use several HTML tags for basic text formatting and lists. Learn how to put your web pages on your web site on the WFU web server, and how to view them with a browser. Grading: You will be creating a single .html file in this lab that you will post on your web site on the WFU web server. I will visit your web site and look at the page. In addition there are questions on the final page of this report that you will answer. Your score for the lab will be based on the web page that you create and post on your web site and your answers to the questions. - Lab Questions: 10pts Web Page that displays properly on your site: 10pts o Proper use of <html>, <head>, <body> tags o Use of formatting tags <H1>, <H2>, or <H3> o Use of text formatting tags <strong>, <em> o Proper creation of ordered and unordered list o Proper use of <hr> tag I will check the following website for your page: http://www.wfu.edu/~yourusername/csc101/lab1/mypage.html If this link does not open up the proper webpage, you will receive no points for the completion of the page, even if it is located somewhere else. It is your responsibility to ensure this link works before handing in you lab. If you have any problems, please ask me during lab! Lab Instructions: Reminder: The WFU web server is case sensitive while Windows is not. Since you will be uploading your lab web pages to the WFU web server, you must pay close attention to the case of file names and folder names in these instructions. Also remember not to use spaces within your file names. On the other hand, when you are typing HTML tags inside of an HTML file, case is not important. You will be creating a webpage in this class which will act as your personal blog. The main purpose of this website is to teach you the basics of HTML and in addition, to be a vehicle for posting your writing assignments. I expect you to have fun with these lab assignments and in the end, make a webpage that is personal, and something you will be proud and excited to show off to others. The text that I use in the example webpages is there as a guide and you are fully welcome to change it however you want to create a truly personal page. I. Create the beginnings of a simple home page in Notepad 1) Open Notepad. Before typing any text, go ahead and save the empty file as "mypage.html" in your C:\Userdata\csc101\lab1 folder. 2) Type the following HTML code, substituting your page title for the one in the example: <html> <head> <title>The CSC101 Journal of Edward Pryor</title> </head> <body> <H2>CSC101 Blog!</H2> </body> </html> 3) Note how the corresponding opening and closing tags are paired, like opening and closing parentheses. Most—but not all—HTML tags are used in pairs. 4) Save the file. 5) Open your mypage.html file in your browser using the “File” -> “Open File” selections. Do you see how the text in your HTML file is displayed in your browser window? Do you see where the Title text appears? II. Add some Personal Information to your web page 1) Using the example above as a guide, add information about yourself to the web page. Try adding your Name and your Major. Where does this block of HTML go in your file? How are you going to make the words “Name” and “Major” appear in boldface? How do put blank lines and new lines in your webpage (similar to hitting the enter key in a word processor)? Look up the <br> and <p> tag and see what it does. Try them out in your page. 2) Make the changes described in step (1), save your file and view it in your web browser. Does it look right? Ask for help if you are confused. 3) Again, using the page above as a model, add another two pieces of information about yourself. This time, let’s underline the labels preceding this piece of information. 4) Insert a horizontal line after your personal information by typing the unpaired tag <HR>. 5) Again, make the changes described in steps (3) and (4), save your file and view it in your web browser. Does it look like you want? If not try to fix it or ask for help! III. Posting your first writing assignment 1) First let us put the date the assignment was due on your page. i. Underneath the <HR> tag, type today’s date. ii. Do you think you can make the date centered? iii. Try making the date italicized as well 2) The first question on the writing assignment was to list five facts. We’ll use an unordered (bullet) list to put that on your page. The general layout for an unordered list is: <ul> <li>Text for first list item goes here</li> <li>Text for second list item goes here</li> … <li>Text for final list item goes here</li> </ul> Use this outline to construct your first list, to save time you can just copy and paste your responses from the writing assignment. 3) Make the changes described in step (1), save your file and view it in your web browser. How does it look? Ask for help if you are confused. IV. Formatting Ordered Lists 1) Now we’ll try an ordered list for the next question in the writing assignment. The only difference between an unordered and ordered list is that we use the tags <ol> and </ol> for the ordered list. Using the example from above add an ordered list for your answer to the second question of the writing assignment. Each important event that you chose should be its own list item Make the changes described in step (1), save your file and view it in your web browser. How does it look? We’re about finished with our web page. V. Adding Your Next Response and Finishing Up 1) After the </ol> tag for you ordered list, copy and paste your response to the third and fourth questions in your document. Save the file and view it in your web browser. Does it look good? 2) For aesthetic purposes, let’s put a horizontal line after this blog entry so that we can distinguish between entries. VI. Create your homepage on the WFU web server You can skip this part if you already have a homepage on the WFU web server. If you do not have a homepage on WFU, then follow the instructions below: 1) Go to http://users.wfu.edu/update.html and log in. 2) Select the option "Create a Wake Forest Home Page" and click Continue... button. 3) Click on “Return to Options” 4) Select the option “Set Permissions for Personal Home Page” and then select “Yes” and then “Submit”. 5) To determine if you have been successful, go to http://www.wfu.edu/~yourlogin and see if you now have a generic student home page. VII. Place your new web page on the WFU web server Up to this point you have been viewing your web page as a file on your ThinkPad. Now we’re going to copy your file to the actual WFU web server for the whole world to see! After you have created your homepage in Step V, you will find a folder called “www-home on Academic File Server (Acfiles)” under My Network Places. This is a folder not physically on your ThinkPad but on the WFU web server. To publish your files on the Web, all you have to do is copy them to the correct location within this network folder. 1) Open the www-home folder. Within that folder, create a new folder named "csc101", then double click to open that folder and create a “lab1” folder. 2) Copy the file mypage.html from your hard drive into the “lab1” folder. Just ask if you need assistance. 3) To preview your web pages in your browser, try the following URL: http://www.wfu.edu/~yourusername/csc101/lab1/mypage.html This is the URL that I will visit to grade, be absolutely sure that it opens your web page. Short Answer Questions: 1. Multiple-choice: What is the correct HTML tag for inserting a line break? A. <br> B. <break> C. <lb> 2. Multiple-choice: Choose the correct HTML tag to make text bold. A. <bb> B. <strong> C. <bld> D. <bold> 3. Multiple-choice: Choose the correct HTML tag to italicize text. A. <i> B. <em> C. <ii> 4. Multiple-choice: Which tag is used for constructing an ordered (numbered) list? A. <ul> B. <dl> C. <list> D. <ol> 5. Multiple-choice: Which tag is used for constructing a bulleted list? A. <ul> B. <list> C. <ol> D. <bl> 6. True / False : HTML Tags are not case sensitive, <b> means the same as <B> 7. Multiple Choice: Both <br> and <p> tags are used for separating lines of text. Which of the following statements is correct? (Experiment if you don’t know the answer.) A. Both the <br> and <p> tags display double-spaced lines. B. Both the <br> and <p> tags display single-spaced lines. C. The <br> tag shows a double-spaced line while the <p> tag shows a single-spaced line. D. The <br> tag shows a single-spaced line while the <p> tag shows a double-spaced line. 8. True / False : HTML documents are also called web pages? 9. In your own words, what is the purpose of a web browser? (2pts)
