There are four tasks to complete in this workshop. They are listed below and can be accessed from the JohnAllanSandbox course on Desire2Learn, in the Table of Content. Please complete these in this order. 1. HTML Review Activity 2. Creating an image link 3. Attributes 4. Lists

1. HTML Basics 2
1
AllanWicks2015
Workshop Preparation
1. Launch a browser
2. Open D2L at CNA-Q
3. Locate the course JohnAllanSandbox
4. Click on the CONTENT button (on the blue navigation bar)
Note: you are a student on this course
Workshop flow
There are five taskstocomplete inthisworkshop. Theyare listedbelow andcanbe accessedfromthe
JohnAllanSandbox course onDesire2Learn,inthe Table of Content. Please complete these inthisorder.
1. HTML Review Activity
2. Creating an image link
3. Attributes
4. Lists
5. CNA-Q Templates

2. HTML Basics 2
2
AllanWicks2015
HTML Tag Activity – Creating an Image link
In the course JohnAllanSandbox
1. Click on the CONTENT button on the navigation bar
2. Open the activity “2. Creating an Image Link”
3. Click on the CNA-Q icon
 Note: A pop up window appears. This is a real-time HTML editor. The data
is entered into the top section and the results appear below.
4. In the top section, delete all of the text, Look at the bottom section of the
page (it should appear empty)
5. Type the anchor tags. <a> </a>
6. Type the href attribute <a href=""> </a>
7. Insert the URL between the quotation marks (copy and paste it from here)
<a href="http://apps.pixlr.com/editor/"> </a>
8. Type the visible text in between the angled brackets > <
<a href="http://apps.pixlr.com/editor/">Pixlr Editor Help </a>
9. In the bottom section, click on the link, target webpage should appear as
below (please be patient as this make take a few secs.)

3. HTML Basics 2
3
AllanWicks2015
10.On the D2L course, delete the HTML pop up
11.Click on the CNA-Q icon to launch a new fresh HTML editor pop up
12. You are now going to set up an image from a remote website to be the link.
13.In the top section, delete the link text “Pixlr Editor Help”
<a href="http://apps.pixlr.com/editor/"> </a>
14.Insert the img tag
<a href="http://apps.pixlr.com/editor/"><img src =””></a>
15.Type or paste as text the web address of the image(picture)
<a href="http://apps.pixlr.com/editor/"><img src
=”http://www.focadoemti.com.br/wp-content/uploads/2013/08/logo-
pixlr-editor.jpg”></a>
16.In the bottom section, click on the image link, target webpage should
appear
17.Select the checkbox for the file content
18.Return to the Course Table of Contents

4. HTML Basics 2
4
AllanWicks2015
HTML Image Tag Activity - Attributes
In the course JohnAllanSandbox
1. Click on Table of Contents
2. Click on the CONTENT button on the navigation bar
3. Open the activity “3. Attributes”
4. Click on the CNA-Q icon at the bottom of this screen.
 Note: A pop up window appears. This is a real-time HTML editor. The data
is entered into the top section and the results appear below.
5. In the top section, delete all of the text, Look at the bottom section of the
page (it should appear empty)
6. In the top section, type or copy and paste the Image container (tags and
content)
<img src="http://bit.ly/18awjnS">
7. In the bottom section, the image should appear (it is a bit large)
8. In the top section, add width and height attributes (please type these)
<img src="http://bit.ly/18awjnS" width="128" height="128">
9. The image should appear smaller
10.Alter the dimensions until you feel the image is at a suitable size
11.Add an ALT tag to allow Screen Readers to understand the content or
purpose of the image. As well it helps with screen tips.
<img src="http://bit.ly/18awjnS" alt="HTML Icon" width="128" height="128">
12. Set the border of the image to 3 points
<img src="http://bit.ly/18awjnS" alt="HTML Icon" width="128" height="128"
border=3>
13.The image should have a bounding box or border

5. HTML Basics 2
5
AllanWicks2015
More HTML tags
Ordered or numbered list <ol> The ordered list tag works with the list item <li> tag
An ordered list in HTML is written as below.
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
In the course Your Sandbox
1. Click on the CONTENT button on the navigation bar
2. Click on the New button
3. Select Create a file (HTML page)
4. Type a page title “My List”
5. Click on the HTML Source Editor button
6. Click inside the body tags
7. Type <ol> </ol> to define the ordered list
8. Click within the ol tags
9. Insert three list items by typing <li> </li> <li> </li> <li> </li>
10.Type coffee, tea, milk inside of each of these li tags
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
11.Click on the Save button
An ordered or numbered list should appear
12.Click on the Publish button
13.Your D2L HTML page is saved

6. HTML Basics 2
6
AllanWicks2015
Unordered or bulleted list <ul>
The ordered list tag works with the list item <li> tag
An ordered list in HTML is written as below.
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
In the course Your Sandbox
1. Click on the CONTENT button on the navigation bar
2. Click on the My List document (at the bottom of the screen)
3. Click on the Edit HTML button
4. Click on the HTML Source Editor button
5. Change the <ol> </ol> tags to <ul> </ul>
6. Click on the Save button
7. A bulleted or list should appear
8. Click on the Update button