# Hosting html files on Blackboard

If you make your notes into [accessible html files](https://hackmd.io/@UoL-IWG/latexml), or if you make html files with embedded videos, sections of notes and questions, you can easily upload and host them on Blackboard.

#### :bookmark_tabs: Table of Contents
[TOC]

## Instructions with screen shots

### Upload your notes

* Zip the folder containing all html files, images, css files and java script files up together.
* In Blackboard, go to "Content Collection", and click on the name of your module.
* Click on "Upload" and then "Upload Zip Package".
* The folder will automatically unpack.
* :information_source: If you change your notes, "Upload Zip Package" again and tick the box in front of "If seleted, the system automatically overwrites the existing file with the same name." This way, all your links to the files will still work.

### Link to the notes
<!--* In the folder you just uploaded in the Content Collection, right-click on the main html file (maybe you called it index.html or notes.html) and select "copy link location" (or equivalent).
-->

* On "Learning Materials" (or where you want them), click on "Build Content" and select "Item" or "File".
<!---->
* For "File":
* Enter the name you want students to see, e.g. "HTML notes". ![Screen shot Select File](https://i.imgur.com/YCRgRVr.png "Select File" =603x236)
* "Browse Content Collection" and select the radio button next to the main html file (e.g.`index.html`). Click "Submit".
![Screen shot Browse Content Collection](https://i.imgur.com/QPBB7bs.png "Browse Content Collection" =426x152)
* Click "Submit".
* Students can now access the notes. Experiment with “open in new window”, to get it how you want it.
* For "Item":
* Create text in your item as you want it.
* Highlight the text to use as your link (e.g. "HTML notes"), and click the "Insert/Edit Link" icon in the editor. (Keep in mind the accessibility guidance about text for links.)
![Screen shot Insert/Edit Link](https://i.imgur.com/k4d9zWU.png "Insert Link" =505x203)
* For the Link Path, "Browse Content Collection" and select the radio button next to the main html file (e.g. `index.html`), as above.
![Screen shot Link Path](https://i.imgur.com/2j4aFGB.png "Link Path" =529x116)
* Click "submit".
* Students can now access the notes. Experiment with “open in new window”, to get it how you want it.
<!--* For "Weblink":
* Enter the name you want students to see, e.g. "HTML notes", and paste the URL you copied in the first step into the URL field.
* You can add a description if you want to.
* Click "submit".
* Students can now access the notes. This will always open in a new window.-->
<!--
::: warning
:warning: If you use "File" or "Item" instead of "Web Link", then the file link will break when you delete and upload a new zip package (when you need to update). The link would still work if you overwrite a single file in the content collection, but not if you delete the folder and re-upload. Unfortunately, Blackboard does not let you overwrite a whole folder.

Make sure your link looks something like this:
`https://blackboard.le.ac.uk/bbcswebdav/courses/MA1114_2020-21_Y/LALatexmlNotes/LANotes.html`
If you use this in "Web Link", then it will be reuseable when you delete and re-upload the whole folder, as long as you keep the names the same.

If it looks something like this:
`https://blackboard.le.ac.uk/bbcswebdav/pid-2496293-dt-content-rid-8900015_2/xid-8900015_2`
then it will break when you delete and re-upload.

Unfortunately, if you use the "good" type of link in the text of an item, then Blackboard renames it to the "bad" type of link.
:::-->

## Instructions without screen shots

### Upload your notes

* Zip the folder containing all html files, images, css files and java script files up together.
* In Blackboard, go to "Content Collection", and click on the name of your module.
* Click on "Upload" and then "Upload Zip Package".
* The folder will automatically unpack.
* :information_source: If you change your notes, "Upload Zip Package" again and tick the box in front of "If seleted, the system automatically overwrites the existing file with the same name." This way, all your links to the files will still work.

### Link to the notes
<!--* In the folder you just uploaded in the Content Collection, right-click on the main html file (maybe you called it index.html or notes.html) and select "copy link location" (or equivalent).
-->

* On "Learning Materials" (or where you want them), click on "Build Content" and select "Item" or "File".
* For "File":
* Enter the name you want students to see, e.g. "HTML notes".
* "Browse Content Collection" and select the radio button next to the main html file (e.g.`index.html`). Click "Submit".
* Click "Submit".
* Students can now access the notes. Experiment with “open in new window”, to get it how you want it.
* For "Item":
* Create text in your item as you want it.
* Highlight the text to use as your link (e.g. "HTML notes"), and click the "Insert/Edit Link" icon in the editor. (Keep in mind the accessibility guidance about text for links.)
* For the Link Path, "Browse Content Collection" and select the radio button next to the main html file (e.g. `index.html`), as above.
* Click "submit".
* Students can now access the notes. Experiment with “open in new window”, to get it how you want it.