Portland Community College | Portland, Oregon Portland Community College

Creating a new HTML file based on an existing file

Creating new HTML pages for your class is made easier by using the Browse for a Template button. Choose a page or template that is similar to the one you want to create the content and formatting will be copied into your new file. You can then simply edit the content.

  • What is required: A D2L Brightspace course and an HTML file

Creating a new HTML file based on an existing file

  1. Click on Content from the course navigation bar
  2. From the Table of Contents on the left, select the module you want to add the file to
  3. Click the Upload/Create button
  4. Select Create a File
  5. Enter a title for your document
  6. Click the Browse for a Template button
  7. Choose the HTML file you would like to use as a template or Navigate to the HTML-templates folder (if present), open the folder and select the format you want. (template_lecture.html is a good all purpose template)
  8. Click the Add button
  9. You now have a template to work in. Simply edit the file and save it.
  10. When saving, don’t overlook the Change Path option.  This allows you to store your new file in the appropriate folder in the Manage Files area.
  11. While working on a new/template page, keep in mind the seven accessibility standards:
  • Headings – Use properly formatted headings to structure the page
  • Lists – Format lists as lists
  • Images and Graphics (including Graphs, Maps & Shapes) – Provide alternative text descriptions for images and shapes
  • Links – Write meaningful link text that indicates the link’s destination
  • Tables – Create data tables with column headers and ensure a proper reading order in tables
  • Color – Don’t use color alone to convey meaning and use sufficient color contrast
  1. For complete accessibility information, visit the Accessibility website.

Update Existing HTML Page to the New PCC Template

These instructions are for updating the the existing pages in your course to the new PCC Template.

Video Tutorial
Convert an old PCC Template:
  1. Copy the following text using CTRL + C (Cmd + C for MacOS):
    <link rel="stylesheet" href="/shared/css/5.0/css/stylesheet.css" type="text/css">
  2. Go to the HTML page you would like to update, click on the drop-down menu and select Edit HTML
  3. In the bottom right corner of the editor window, click on the HTML Source Editor </> icon
  4. About the 5th line down you should see: <link rel=”stylesheet” type=”text/css” href=”/shared/css/TemplateFiles/stylesheet.css” />
  5. Highlight <link rel=”stylesheet” type=”text/css” href=”/shared/css/TemplateFiles/stylesheet.css” /> and delete it
  6. Press CTRL + V (Cmd + V for MacOS) to paste in the new style sheet link from Step 1
  7. Click on the Save button to leave the HTML Source Editor
  8. Check to make sure that everything is still formatted correctly and click on the Save and Close button to save the page
Apply template to a blank HTML page:
  1. Copy the following text using CTRL + C (Cmd + C for MacOS):
    <link rel="stylesheet" href="/shared/css/5.0/css/stylesheet.css" type="text/css">
  2. Go to the HTML page you would like to update, click on the drop-down menu and select Edit HTML
  3. In the bottom right corner of the editor window, click on the HTML Source Editor </> icon
  4. In the first several lines of text, you should see <head> </head>. Note: It is possible for there to be some text in between <head></head>screenshot of code where <head> and </head> are highlighted
  5. Press CTRL + V (Cmd + V for MacOS) to paste stylesheet code from step (1) in between <head> and </head>.  If there is existing text, simply select all text in between and paste the stylesheet code in its place
  6. Click on the Save button to leave the HTML Source Editor
  7. You can now design your page with the H1, H2, H3, Tables, images, etc in the D2L editor and it will have PCC template design
  8. When you are finished, click on the Save and Close button to save the page