Introduction to HTML Tables & Linking CSS files (A, B, C) COGS3 Introduction to Computing Assignment

Transcription

1 Introduction to HTML Tables & Linking CSS files (A, B, C) COGS3 Introduction to Computing Assignment

2

3 purpose: USE BOOTSTRAP 4 simple CSS selectors & properties link CSS use NotePad++, Atom, or VSCode save your html files in the following format: cg3xzz_lastname_hw3_labx.html save your css files in the following format: cg3xzz_lastname_hw3.css cg3xzz = your class account Turning in your assignment: 1. transfer it to the class server acsweb.ucsd.edu 2. save it in your public_html/hw3 folder To receive full credit your file and directory names must follow the exact specifications outlined the instructions. Please pay particular attention to: case, hyphens, underscores, and spaces Academic Integrity all work is to be completed individually; you may work and help each other in the lab but you cannot have someone else do/think your work for you (even if you are doing the typing!) if you are repeating this class, you cannot re-submit assignments from a previous quarter. please review all ACS and UCSD academic integrity policies you will be tested on them on the midterm and final exams. the best way to learn programming is to do it give yourself the time to explore and enjoy the process.

4 use w3schools.com bootstrap 4.0 tutorial as your HTML, CSS, and BOOTSTRAP resources. Part A: Learn how to use the Bootstrap Framework to style your html pages. (Redo the schedule/tables homework assignment using Bootstrap The title of the webpage should be: Bootstratp Version: Name Account number Quarter, Year 2. Format your current schedule using the HTML <table> </table> element. Your table should have a heading row with Time (e.g. 8:00-9:00, 9:00 10:00 or on 30 minute boundaries), and the days of the week (e.g. Monday, Tuesday,, Friday). 3. Use the <caption> element to give a title to your schedule. 4. Add hyperlinks to all of your activities with a webpage. 5. Add images to your schedule associated with your extracurricular activities (e.g. if you swim, add a photo of a swimmer at the time that you would be swimming.) Make sure that your images are sized appropriately for your table. save your file as: cg3xzz_lastname_hw3_laba.html

5 Part B use the BOOTSTRAP css file and create your linked css file for schedule in Part A Part B: USE BOOTSTRAP CSS files and your own modification CSS file to link to your bootstrapped-schedule assignment (Part A) You will link the CSS files to your schedule in Part A. 1. Be sure to add the css link element to your html file (Part A) 2. Create a style definition for your table header row: the font style, color, alignment and background colors, borders, padding, etc. should be included. Be sure to add the class attribute in your html document. 3. Create a style definition that formats the TIME column in your schedule table. 4. Provide a default style for <td>, and <h1> <h6> elements. 5. Change the default colors for <a> element- provide interesting colors for a:link, a:visited; a:active 6. Change the cursor shape when one hovers over a hyperlink a:hover. save your file as: cg3xzz_lastname_hw3.css

6 Part C Part C: 1. Make a copy of your HTML file from Part B and save it in your hw3 folder using the file name below. 2. Add a narrative of how BOOTSTRAP 4.0 framework simplifies styling. 3. Discuss the steps needed to use BOOTSTRAP 4.0 (i.e. Where to download the files, how to link them, etc.) 4. Discuss your favorite BOOTSTRAP 4.0 feature. save your file as: cg3xzz_lastname_hw3_labc.html