Friday, March 18, 2016

HTML5 and CSS3 - Day 3 - Part 1

Today we will finish up styling the section and footer. We will then move onto setting up our Gallery page. Most students had a difficult time following along in class with the syntax and we are all at varying levels with our keyboarding skills. Students also had varied success with getting the pages to work at all.

The first two days I wanted students to get an appreciation for how web pages come together and how they become alive! Today we will use GitHub, and if your website is not working we will get it working today, and have the start of a cool artist gallery.

First things first: Open Cloud 9 and sign in, and run your index.html page. Don't forget to click on the link and open the tab to view your site so far.


Next lets go to https://github.com/snapmt/art-history-project. You do not need to create an account we will simply click on the files we need and copy and paste those onto our files in Cloud 9. 

  1. First lets make a copy of your styles.css file. Simply save this as old_styles.css. You may need this file later when you wish to have your color codes. 
  2. Next let's grab our new CSS styles! These are located here: https://github.com/snapmt/art-history-project/blob/master/styles.css simply copy and paste these into your original styles.css file. 
  3. Press Ctrl + S and save this file.
  4. Now we can work on our gallery.html file. You will want to copy the html from GitHub and then paste this into your gallery.html file. https://github.com/snapmt/art-history-project/blob/master/gallery.html
  5. Press Ctrl+S and save the file. If you open your Gallery link in the web browser you will see six small boxes
  6. We will now create six images to fill those boxes using Pixlr.
  7. Open a new tab and go to http://pixlr.com
  8. Click on the Launch Web App button
  9. Now let's go find some images by our artist. 
  10. In Google Images I want to "View" the image and then copy the URL
  11. In Pixlr use the Open Image From URL button
  1. We now need to resize our images to have a width of ≤ 230px. Otherwise three images will not fit width wise on our page. 
  2. In Pixlr go to Image > Images Size and then enter 230 in the width box. Make sure that the Constrain proportions box is checked. 
 
  1. Next we need to go back to Cloud 9 and upload our picture into an images folder.
  2. In Cloud 9 on the left side there is a file viewer. Right click in this area and add a folder. Name this folder images
  1. Now lets upload our image to this folder go to File > Upload Local Files ... 

  1. Now the last part we need to do is add this file to our html. In gallery we need to edit a few lines. We need to edit the alt text, href value, figcaption text (title of artwork), and span text which is the year it was painted. See below! (Note: The alt text is for web browsers that do not display images. It places this alternative text in place of the image.)

<figure class="img"><img alt="title of artwork" src="/images/filename.jpg" >

    <figcaption>Title<br>

      <span>Year Painted</span></figcaption>

  </figure>

  1. Do this five more times!
  2. Don't forget to save the websites you find your images on, as we will need to cite these using EasyBib into an MLA format on our works-cited page.