code icon

CSCI 1720

Intermediate Web



Homework 1 - BS Carousels

  1. On your external drive, inside your userid.csci1720.net/labs folder, make a new folder named bs-3
  1. Download bs-3_starter_files.zip to your bs-3 folder and extract the files. I made a few little changes to the navbar, the template, and the bootstrap.html page, so your final product won’t look exactly like last week’s work
  1. Open template.html in NPP
  1. Save template.html as carousel.html

Create the Carousel

  1. Change the document’s title to Bootstrap Carousel and update the head element’s meta information
  1. Last week, we created our navbar with the template file, so that’s taken care of
  1. Change the first column’s class to col-md-12 and delete the second column
  1. Immediately inside the column, add a Heading 2 that says ‘Carousel.’ Take out the empty paragraph:
setting up carousel.html
Fig 1- Setting up the page
  1. A carousel consists of two nested divs (carousel and carousel-inner)
  1. The first, outer div (after the heading 2) has to have an id, a class="carousel", and a data-ride="carousel" attribute (which tells Bootstrap to begin animating the carousel immediately when the page loads)
setting up carousel.html
Fig 2- Setting up the carousel
  1. Now we need to add the indicators, the little lines that show which picture we’re seeing. Enter
Adding indicators
Fig 3- Adding indicators
  1. Place the cursor on the list item line and press Ctrl+d. Replace the “0" with 1 on the second list item and delete the class="active" part. Then, with the cursor on the second list item, press Ctrl+d four more times and replace the “1" with 2, 3, 4, & 5. Enter the closing list tag
Adding indicators
Fig 4- Adding indicators
  1. That takes care of the indicators. Now for the inner <div> (which, in turn has divs – holding the images - nested within it). Note that the <div> under the comment appears below the </ol>
Adding indicators
Fig 5- carousel-inner
  • carousel-inner is self-explanatory
  • role="listbox" is used for accessibility purposes. It identifies to a screen-reader or other assistive technology device that this is an element that allows a user to choose one or more options, such as images in a carousel
  • The inline styling sets the div’s width to 500px (which is the width of the images) and centers it in the column
  • The inner div is the first image
  1. Highlight the first image div (you may have to tab in on the blank line, but it’s important to highlight up to that point
adding carousel-items
Fig 6- Adding carousel-items
  1. Press Ctrl+d once
  1. Delete the “active" class from the second div. Highlight it as shown above, and press Ctrl+d four more times
adding carousel-items
Fig 7- Adding carousel-items
  1. After the last image div, press Enter, tab out, and enter the closing div tag for the inner (‘wrapper’) div
the carousel-inner completed
Fig 8- The carousel-inner completed
  1. That completes the structure of the carousel
  1. Now all you have to do is enter the src and alt information for each image. The filenames are 001.jpg, 002.jpg, and so on the alt text should be:
  • 001: src='images/001.jpg' alt='Paris Night'
  • 002: src='images/002.jpg' alt='Arc de Triomphe'
  • 003: src='images/003.jpg' alt='Eiffel Tower'
  • 004: src='images/004.jpg' alt='London City Hall'
  • 005: src='images/005.jpg' alt='Royal Artillery Museum'
  • 006: src='images/006.jpg' alt='Tower Bridge'
adding the images code
Fig 9- adding the images code
  1. Beneath the carousel code, enter a paragraph with the following text

The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.

  1. Add some inline CSS to the opening paragraph tag to set its width to 75% and margin to 2em auto
Adding a paragraph
Fig 10- Adding a paragraph
  1. Save your work and display it in a browser (Run->Launch in…)
The carousel in action
Fig 11-The carousel in action

Uploads and Such

  1. Save all of your work. Log in to your csci1720.net account (userid.csci1720.net) using FileZilla (host: csci1720.net; userid: etsuid; password: *********)
  1. Double-click on your labs folder
  1. Right-click in the whitespace in the lower-right pane and select ‘Create new directory and enter it’
  1. Name your new directory hw1_bs-3
  1. From left to right, copy your files and folders to your /labs/hw1_bs-3 directory
  1. Right-click on carousel.html (on the right side). Click ‘Copy URL(s) to clipboard’
  1. Return to your browser and open a new tab
  1. Paste the URL into the address bar
  1. Delete the ftp:// part and change the @ to a dot (.)
  1. Hit ‘Enter’. Admire your work
  1. Make sure your HTML validates OK
  1. Make any necessary changes if there are errors (in the HTML only - there will be errors in the CSS)
  1. When all is well, copy the URL of your carousel.html file to a new text file in NPP. Save the file as hw1_bs-3.txt and upload it to the D2L HW1 folder

Have a nice day 😊