This document provides a visual step-by-step guide for displaying different types of media on a webpage. It explains how to link videos, slideshows, PDFs, and learning journals instead of directly uploading them due to limited storage. The guide instructs the user to upload media files to sites like YouTube and SlideShare first, then copy the link and paste it into the webpage to display. Steps include logging in, selecting the media type page, formatting with titles and columns, and inserting the link. Users are reminded to always log out for security after editing a page.

1. A VISUAL STEP-BY-STEP GUIDE
by Jaime Cabrera
mr.jaime.aiu@gmail.com
Image courtesy of www.profkrg.com

2. How to Display Stuff on Your Page
1. Log In
2. Upload Your Video
3. Upload Your Slideshow
4. Upload Your PDF File
5. Upload Your Learning Journal

3. LOG IN
STEP 1
Image courtesy of camskra.com

4. Go to your website.
• BSP1J (English11: Freshman Skills)
http://bit.ly/1GtRdIj
• BSMT2B (Hum 13 World
Literature) http://bit.ly/1GfoIyZ
• AAPD1BB (Hum 13 World
Literature) http://bit.ly/1K4zlep
• BSMT2C (Hum 13 World
Literature) http://bit.ly/1eAPxHa

5. Scroll down to the bottom and log in.
Image courtesy of www.jimdo.lcom

6. If you logged in before on the same
computer, this is what you might see:
Image courtesy of www.jimdo.lcom

7. Click on LOG IN NOW
Image courtesy of www.jimdo.lcom

8. IF YOU DO NOT LOG IN
• The page will be in view mode, not in edit
mode.
• You can view the page, but you cannot edit it.
• If you want to edit a page, log in.

9. DISPLAY YOUR VIDEO ON YOUR
WEB PAGE
STEP 2
Image courtesy of www.istockphoto.com

10. Uploading a Video: Warning
1. Do not upload the video to your webpage.
2. The website has limited memory.
3. Uploaded video files will be deleted.
4. The correct way is to link to your video.

11. Linking to a Video: Steps 1 & 2
1. Upload your video to YouTube.
– Sign in before you upload:
2. Copy your video’s address:

12. Linking to a Video: Step 3
3. Open your webpage.

13. Linking to a Video: Step 4
4. Open your VIDEOS page.

14. Linking to a Video: Steps 5 & 6
5. Write the title
6. Create two columns.

15. Linking to a Video: Steps 5 & 6
5. Write the title
6. Create two columns.

16. Linking to a Video: Steps 7 & 8
7. Add a text box to one column.
8. Write a title.

17. Linking to a Video: Step 9
9. Mover the
cursor until +
Add Element
appears. Click.
Then, click on
Additional
Elements.

18. Linking to a Video: Step 10
10. Click on Widget/HTML.

19. Linking to a Video: Steps 11 & 12
11. Paste
the video’s
URL address
that you
copied.
12. Save

20. DISPLAY YOUR SLIDESHOW ON
YOUR WEB PAGE
STEP 6
Image courtesy of www.istockphoto.com

21. Uploading a Video: Warning
1. Do not upload the slideshow to your
webpage.
2. The website has limited memory.
3. Uploaded slideshow files will be deleted.
4. The correct way is to link to your
slideshow.

22. Linking to a Slideshow: Step 1
1. Upload your slideshow to SlideShare.
Log in before
you upload
(You can
create a free
account first)

23. Linking to a Slideshow: Step 2
2. Copy your slideshow’s URL

24. Linking to a Slideshow: Step 3
3. Open your webpage.

25. Linking to a Slideshow: Step 4
4. Open your SLIDESHOWS page.

26. Linking to a Slideshow: Steps 5 & 6
5. Write the title and
6. Save

27. Linking to a Slideshow: Step 7
7. Create two columns.

28. Linking to a Slideshow: Steps 8 & 9
8. Add two more columns: Click 2x on the + sign.
There should be 4 columns total.
9. Save

29. Linking to a Slideshow : Steps 10 to 12
Click on + Add Element, click on Text.
10. The title should be in bold font.
11. The date should follow this format, not bold font
12. Save
10
11
12

30. Linking to a Slideshow: Step 13
13. Click on
Additional
Elements.
13

31. Link to a Slideshow: Step 14
14. Click on
Widget/HTML.
14

32. Link to a Slideshow: Steps 15 & 16
15. Paste
the video’s
URL address
that you
copied.
12. Save
15
16

33. DISPLAY A PDF FILE ON YOUR
WEBPAGE
STEP 6
Image courtesy of www.istockphoto.com

34. LINK your file, do not upload
• Create a free account in Dropbox or Mediafire
• Upload your PDF file to that account
• Copy the URL or electronic address
• To create a link to the file on your web page,
follow the same procedures for linking videos
or for linking slideshows.

35. DISPLAY YOUR LEARNING JOURNAL
ON YOUR WEBPAGE
STEP 6
Image courtesy of www.istockphoto.com

36. Upload a Learning Journal: Step 1
1. Open your webpage.

37. Upload a Learning Journal: Step 2
4. Open your JOURNALS page.

38. Upload a Learning Journal: Step 3
5. Write the title and
6. Save

39. Linking to a Slideshow: Step 7
7. Create two columns.

40. Linking to a Slideshow: Steps 8 & 9
8. Add two more columns: Click 2x on the + sign.
There should be 4 columns total.
9. Save

41. Linking to a Slideshow : Steps 10 to 12
Click on + Add Element, click on Text.
10. The title should be in bold font.
11. The date should follow this format, not bold font
12. Save
10
11
12

42. Linking to a Slideshow: Step 13
13. Click on
Additional
Elements.
13

43. Link to a Slideshow: Step 14
14. Click on
Widget/HTML.
14

44. Link to a Slideshow: Steps 15 & 16
15. Paste
the video’s
URL address
that you
copied.
12. Save
15
16

45. FINISHED
• For security reasons, make it a habit to always
log out after working on something online.
• This applies to your class website, to
Facebook, to Google, or to any email.
• If you do not log out, others may be able to
access your website. Strangers may gather
private information about you.
• Always log out when you are done: always.

46. END OF TUTORIAL
Image courtesy of www.profkrg.com