HTML Images and Links
Lab Assignment

Learning Objectives:

By the end of this assignment, you will be able to:

1. Edit pages.

2. Add image links to larger images.

3. Add text links to other pages

4. Edit, resize and optimize photographs

5. Insert a background image into a page 

Overview

You will be modifying your assignment page by adding links and graphics to the page.  You will also be creating a new page on any topic you want (you will be using html 5, links, web optimized graphics and thumbnail graphics) 

Part 1  Creating a new page using HTML 5, graphics and links

Minimum requirements:

To see a video demonstration, watch: https://youtu.be/iAhsLGJci9A

1.  Create 3 sections in your page that display or hide content.  To do this, use the <details> and <summary> tags.

2.   The content must include text and a thumbnail graphic that links to a larger graphic. 

The content can be whatever you want as long as it adheres to NMC's Title IX and the student code of conduct.  If you use images that are not your own, make sure they are royalty free.  If you have taken information from a website, make sure you cite the information and if it is a direct quote, make sure you enclose it in double quotes.

You can get download royalty free graphics from pixabay.com or from LunaPics. If you use LunaPics, instead of uploading a graphic, use the File Menu, Sample Image command (if you don't like the image, you can use the command over and over until there is something you like).

Example #1: 

Here's the code used to create the example:

<details>
    <summary><strong>Tiger</strong></summary>
    <p>
        <a href="media/tigerOptimzed.jpg"> <img alt="tiger thumbnail" src="media/thumbnailTigerOptimzed.jpg" style="width: 200px; height: 120px; float: left"></a>
        "The largest of all the Asian big cats, tigers rely primarily on sight and sound rather than smell for hunting. They typically hunt alone and stalk prey.
        A tiger can consume up to 88 pounds of meat at one time. On average, tigers give birth to two to four cubs every two years. If all the cubs in one litter die,
        a second litter may be produced within five months. Tigers generally gain independence at two years of age and attain sexual maturity at age three or four
        for females and at four or five years for males. Juvenile mortality is high however—about half of all cubs do not survive more than two years. Tigers have
        been known to reach up to 20 years of age in the wild. Males of the largest subspecies, the Amur (Siberian) tiger, may weigh up to 660 pounds.
        For males of the smallest subspecies—the Sumatran tiger—upper range is at around 310 pounds. Within each subspecies, males are heavier than females. "
        <cite>Retrieved from https://www.worldwildlife.org/species/tiger on September 8, 2017</cite>
    </p>
</details>br>

Example #2: 

Here's the code:

<details>
    <summary><strong>Brookly Bridge</strong></summary>
        <p>
            <a href="media/brooklybridgeNight.jpg">
            <img alt="brooklyn bridge thumbnail" src="media/ThumbnailBrooklybridgeDay.jpg" style="width: 200px; height: 127px; float: left;" title="Click to see bridge at night"></a>
            "The Brooklyn Bridge looms majestically over New York City’s East River, linking the two boroughs of Manhattan and Brooklyn.
            Since 1883, its granite towers and steel cables have offered a safe and scenic passage to millions of commuters and tourists,
            trains and bicycles, pushcarts and cars. The bridge’s construction took 14 years, involved 600 workers and cost $15 million
            (more than $320 million in today’s dollars). At least two dozen people died in the process, including its original designer.
            Now more than 125 years old, this iconic feature of the New York City skyline still carries roughly 150,000 vehicles and pedestrians every day."
            <cite>Retrieved from http://www.history.com/topics/brooklyn-bridge on September 8, 2017</cite>
        </p>
</details>

2.  For each image, you need to create a web optimized image (width of 400 pixels and size of approx 50KB) AND you also need a thumbnaiil (width of approximately 200 pixels and size of approximately 20KB)  So, you will need 3 images with the width of 400 pixels and the same 3 images with a width of 200 pixels

3.  Create the file using the format shown below:

The line breaks and horizontal rule between <details> segments provides enough space so they shouldn't overlap (you may need additional breaks depending upon your content).  When we learn css, it will be easier to position content :)

The css we are using is for the image dimensions  (width and height) and to make the image display on the left side so the text can flow around it  (that is what float:left does)

To see the cat example live, go to:  bigCats.html

4.  Determine a name for your page that makes sense.  For example, If I had 3 bridges on the page, I would call it bridges.html or bridges-at-night-and-day.html

5.  Make sure your images are all in the Lesson3/media folder and that the page you create is in the Lesson3 folder.

6.  Transfer the page to the Lesson3 folder on the web

7.  Transfer the images into the Lesson3/media folder on the web.

Part 2  Updating your assignment page with links

To see a video demonstration, watch: https://youtu.be/bRbdHB2pM2E

1. Open assignments.html for editing (it should be in your CIT180 folder)   We are going to make a few modifications, add some text and convert existing text into links. 

2  In the Textbook Assignment Section, we are adding the Lesson 3 heading and pages as shown below:

3.  In the Lab Assignment Section, we are adding the lesson 3 headings and pages as shown below:

4.  Save your changes.

5.  The next step is to add the links to the assignment file for Lessons 2 and 3.  For Lesson 2, the assignments are in the Lesson2 folder.  All the links should begin with Lesson2/   followed by the name of the page.  You will be adding the anchor <a> tags after the opening <p> and placing the closing anchor </a> tag before the closing </p>

Example Before:

<p>bottom-navigation.html</p>

Example After:

<p><a href="Lesson2/bottom-navigation.html">bottom-navigation.html</a></p>

NOTE:  If you spelled Lesson2 with a lowercase L, you need a lowercase L here.

Graphic example showing the Lesson2 links:

6.  You will need to do the same thing for Lesson3 (this week's assignments).  All the links should begin with Lesson3/ followed by the name of the page.

7.  For the lab assignment, in Lesson 2, you will be linking the page to itself.  So, your link will look something like this:

<p><a href="assignments.html">assignments.html</a></p>

8.   For Lesson 3, you will need to do something similar for one of the links.  The other link is to a page you created.  That page should be in the Lesson3 folder, so the link will be very similar to step 6 above.

Example:

Remember, the file you created in Lesson 3 isn't named bigCats, so you will need to insert your own file name instead! 

9. Once you have created the links, save your page and view it offline in the web browser.  The links should work (you should be able to click on them and go to the page you specified). 

If the links do NOT work, double check the spelling, the upper/lowercase of the names and then make sure you have the files in the folders you are telling the browser to look in. 

If you need help, transfer the Lesson3 folder/files to the Internet and email me (I need to see this online in order to help you!)

Part 3 - Adding a graphic to your assignment page.

Pages like our assignment page typically have images display in the background because the main focus of the page is the links.  We don't get into CSS until next week, but I am going to show you how to put an image in the background.  This involves adding a style attribute to the <body> tag.

Background images are typically very large.  PowerPoint background images work well in web pages when we want the image to run along the side or top.  Here's a link to a site that has many free backgrounds with various themes:  http://www.freepptbackgrounds.net/     

The other option you have is to use a photograph you like and adjust the transparency setting using LunaPic.

I will go through both options :)

Option 1:  Using http://www.freepptbackgrounds.net/ 

To see a video demonstration, watch: https://youtu.be/lcZ0fNou75A

To use this site:

1)  Click the category menu and select an image category that interests you

or

Click the color menu and select a color range you like.

2)  After making your menu selection, scroll down and look at the patterns.

3)  Find a pattern you like, then click on it and see variations below the pattern.  A variation that has white on the left side will work for our page.

In the example below, the pattern in the bottom right will work well for the page because there is plenty of room for text to display.

4)  Left click the thumbnail to get a larger image.  You will notice the mouse is a magnifying glass - click it to get an even larger image.

5)  Next, right click the image, select Save Target As or Save Image As 

6)  Navigate to the CIT180/media folder    NOTE:  If you don't have a media folder inside CIT180, create one now by clicking the New Folder command and name the folder media

7)  Make sure the CIT180/media folder is open.  You should change the file name to make it easier to add to your page.  In the Filename box, enter background and then click on Save

Option 2:  Using an image in the background that needs lightening 

If you want to put a photograph in the background or you find a pattern that has darker colors, you can lighten the image using LunaPic (you need to modify the transparency of the image which will make it lighter).  

To see a video demonstration, watch: https://youtu.be/1ZjIKy8uZ9s

Here's what you need to do:

1)  Upload the image to LunaPic

2)  Use the Adjust menu and select Alpha Transparency. 

3)  Drag the slider to the transparent side  (usually around 1/2 to 3/4 works well)  It is going to look really light and that is OK. 

4)  Save the file as a png or jpg file

Adding the background image to your page

At this point, you should have an image we can add to the assignments page.

To see a video demonstration, watch: https://youtu.be/QpsSDsSgTnU

1)  To add the image, modify the <body> tag to the following:

<body style="background-image:url('media/background.jpg'); background-repeat:no-repeat;background-size:100%;">

NOTE:  background-image: is the style that adds the background.  By default, backgrounds repeat across the screen and then vertically down the screen.  Adding background-repeat:no-repeat turns that feature off. The background-size style set to 100% will make the image always fill the screen proportionally no matter how large or small it is. There are a couple other sizing commands we can use to make the image fill the screen. If proportion doesn't matter, you can use background-size:cover

2)  Save your changes and view the file offline in the browser (see example below)

3.  Transfer the assignments.html file to the CIT180 folder.  Be careful when you drag the file - you don't want to place it inside Lesson2 or Lesson3

4.  Transfer the background.jpg file that is in the CIT180/media folder to the CIT180/media folder on the server.  If the folder doesn't exist, then left drag the entire folder (be careful not to put it inside Lesson2 or Lesson3)

To see a demonstration showing how to transfer the pages, watch: https://youtu.be/rKUuOeAvjH0

Grading: