How to create a webpage for your diploma project

Access to create a diploma project

When it is your cohort's turn to submit the diploma project, the entire cohort will gain access to publish their diploma projects on AHO's website.

How to log in

1. Go to AHO's student project administration page.
2. Log in via Feide using your school account associated with AHO.
3. Optional: Click "Språkinnstillinger" (language settings) and select English to change the interface language.
4. Open the folder for your study programme.
5. Select the folder for the year you are submitting your diploma project.

Note: You can only create your webpage in the folder that matches the correct study programme and year. Make sure you select the correct folder before proceeding.

How to create a diploma project

1. Click on "Create collection" and select the folder type "Student project".
2. Enter the project title in the "Title" field. The folder name will automatically be the same as the title and will form the last part of the project's URL.
3. Click "Ok" to create the project folder.

Contents in the folder

After creating the collection for your diploma project, it will contain two elements:

• Index.html: This is where you edit the content of your project's webpage.
• Picture-gallery: A folder where you upload images if you wish to include an image gallery (slideshow) showcasing your project.
  • You can also add individual images. More on this later in the guide.

Upload images

There are two ways to upload images: as individual images or as an image gallery.

Upload individual images

• Go to the project folder (not picture gallery) and select "Upload file". You can also drag and drop files.
• This is where you upload the main image, the author's portrait, and any other images you wish to use on the web page.

Upload Images to the Image Gallery (Slideshow)

• Open the "picture-gallery" folder and select "Upload File". You can also drag and drop files.
• Any images uploaded here will automatically appear in the project's image gallery.

Add Additional Image Galleries

If you would like to add more image galleries to the project, follow these steps:

1. Open the project folder.
2. Click "New Folder" and select "Standard Folder" as the folder type.
3. Give the folder a name, for example "picture-gallery-2", and click "Create".
4. Click "Upload File" to upload images. You can also drag and drop files.
5. Return to the project folder and open "index.html".
6. Click "Edit" and insert a line break where you would like the new gallery to appear.

7. Select "Insert Component" as shown below:

   

8. Select "Image Gallery".
9. Select "Browse".
10. Choose the folder you have just created, for example "picture-gallery-2".
11. Select "Create Link" and then click "OK".
12. Click "Save and View" to see the new image gallery.

Fill in empty fields

1. Click "index.html" to open the project's webpage.
2. Click the "Edit" tab to start editing the page.

• Special Settings: Select your study programme, fields of expertise, and year. If the fields of expertise is not relevant, you can skip this step.
• Title: Enter the title of the diploma project.
• Introduction: Enter the first paragraph or introduction, limited to 2–4 sentences. If the introduction is longer, break it up and place the remainder in the "Main Content" field.
• Image: Select the main image that will be displayed at the top of the page. Click "Browse" to upload the image, and remember to add alternative text that describes the content of the image. Imagine describing the image to someone who can't see!
• Author: Enter the name of the project's author. If it's your project, use your name.

Add main content

This is where you add text and images that describe your project.

Text

• Paste the text as plain text.
• If you paste from a website, use the "Paste as plain text" button in the toolbar.
• If you paste from a Word document, use the button next to it, "Paste from Word".
• Or, you can use the keyboard shortcut Cmd + Opt + Shift + V for Mac or Ctrl + Shift + V for Windows.

Headings

To create headings in the text, use the paragraph format button in the toolbar. The default format is "Normal".

• Use Heading 2 for the first level of headings.
• Ensure that heading levels follow the correct order without skipping levels (e.g., go from Heading 2 to Heading 3, not from Heading 2 to Heading 4).
• Do not use bold text in the body to create headings. Always use the correct heading format.

Supervisor

Enter the name of your supervisor(s) in the grey box.

Add Images

There are two ways to add images to the website: individual images and an image gallery.

Add Individual Images

1. Click "Insert Image Using File Manager" as shown below:

   

2. Select the image you would like to insert.
3. Remember to add alternative text (alt text).
4. Click "OK".

Edit the image gallery

The image gallery displays images in a carousel, allowing users to scroll through them. Upload or delete images from the "picture-gallery" folder until you are satisfied with the selection.

Remove the image gallery

If you do not want an image gallery in your project, follow these steps:

1. Find the dashed image gallery box located just above the horizontal line above "Contact".
2. Highlight the code that starts with ${images:gallery ...
3. Press backspace to delete it.

Add video

You can add video to your diploma project either by uploading it directly to your project folder and inserting it using the built-in "Embed Media" tool, or by embedding a video from an external platform such as Vimeo or YouTube.

See this guide on how to add video (uio.no)

Contact and portrait image

In this section, add the portrait image, the author's name, and contact information.

Portrait image

• Add the portrait image the same way as an individual image.
• Remember to add the person's name as alternative text.

Name and Email Address

Enter your name and email address as plain text.

Note: You will lose access to your AHO email address after completing your studies, so it may be a good idea to use an alternative email address.

You can also add a link to your LinkedIn profile or personal website.

1. Write a clear and descriptive link text.

2. Highlight the link text and select "Link" from the toolbar, as shown below:

   

3. Paste the URL into the URL field and click "OK".

When You Are Finished

Click "Save and View" – and that's it! Well done.

If you need to make further changes, click "Edit".

Important: Do not publish the project yourself. The Communications team will publish it once all projects have been quality-checked.