Original File Was S10lab3.Tex s4

CSCE 102 Lab 3 CSCE 102 — Lab 3 — Images and CSS General information  Always read the entire assignment before you start so that you can develop a well thought out plan.  Always bring your book and lecture notes to lab.  Use clean indentation so your code will be easy to read.  Include the closing tags when you enter the opening tags so you will not forget them and so that you can 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 USB memory stick 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  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.

Problem: Write the code to create an HTML5 compliant document with CSS to create a web page with the following specifications.

Part 1 Getting Started In-class Assignment 1. Open up the editor and save the blank file as lab3Axx.html in your All_102Submissions folder, where xx are your first and last name initials. Turn on word wrap in your editor by checking “wrap” under the options menu. 2. Use your code from last week as a template for this week’s lab by copying, pasting and deleting. Be certain that your html element has a closing html tag. Test your code as you work.

Note: Filenames: (lab3Axx.html where xx is your first and last name initials; in your All_102Submissions folder.) lab3Axx.html Due at the end of class  Insert a short paragraph about Hurricane Irma.  Insert a heading above the paragraph using the h1 heading element.  Insert a heading below the paragraph using the h1 heading element.  Insert the style element 1 in the head and use CSS to apply style to the h1s and the paragraph elements that you have inserted. You select the styles.  Insert a comment (HTML) with today’s date, your name, and section above the style element.  Insert a comment (CSS) with your name and major inside the style element. Note: A CSS comment is not the same as an HTML comment.  Insert a heading below the last h1 using the h3 heading element that contains your name.  Insert two headings below that using h2 heading elements.  Assign the h3 the background color of green within the style element.  Insert a local style to change the text color of the paragraph to red and indent the paragraph.  Use a class to make the last h2 and the h3 both appear on the right edge of the screen.

Part 2 Due the night before you next lab lab3Bxx.html Specifications  Briefly discuss Autonomous Cars in two/three paragraphs. Your discussion should include: 1. What technology makes it possible? 2. Ethical issues with Autonomous Cars. 3. Potential benefits.  Be certain to use your own words – do not plagiarize.  Insert appropriate headings using the heading elements.  Cite the sources at the bottom of the page, using the MLA format.( If you need to include a greater than sign or less than sign, see page 44 in your textbook.)

Styling with CSS 3. Create an internal style sheet (put the CSS code section within the style element within the head element) to implement CSS rules1 .

1Terminology: A style sheet consists of a list of rules.(Chapter 5) A CSS rule consists of one or more selectors and a declaration block. A selector consists of an element name, class, and/or id. A declaration block consists of a list of declarations in curly braces. A declaration consists of a property and value separated by a colon (:) and followed by a semi-colon (;). An extensive list of properties and  Use CSS to double space the second paragraph (just the second) using a local style.  Use CSS to center the headings.  Use a background color for the entire page (See Chapter 4)  Use a text color for the headings and paragraphs.  Apply style to make the page readable and look as professional as you can with in these specifications.

Configuring the folder view— If you did not do this last week do it now. You will need this to use images.

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

1. Go to the start menu and select computer 2. Click on Organize tab at the top left of the folder window 3. Select Folder and search options 4. Click on the View tab 5. And un-check the Hide extensions for known file types box Images 1. Inside your All_102Submissions folder create a new folder called All_Images You will be saving all of your images to this folder. When setting the path in the src attribute of the img tag you will need to tell the browser to look for the All_Images folder by specifying the path name. For example: All_Images/______Where you fill the blank with the name and extension of the image you want to display. (See page 53, under Absolute Hyperlinks – it gives an example of a file that was in a different folder) 2. Include two images with captions; try to find an image that is related to your topic if you can. Center the images on the page using a div element and associated CSS. Google Images is a good service for finding images. Updating All_Index_xx.html 1. Open your All_Index_xx.html file in SciTE and insert links to lab3Axx.html and lab3Bxx.html at the bottom of the page. 2. Insert your image at the top of All_Index_xx.html.

their respective values can be found on pages 407-413 of your textbook and at https://www.w3schools.com/css/default.asp