Creating an e-portfolio

I can create a new web page and make it available on the internet (1 mark)

To create an e-portfolio you need to create new pages on the community site. This is done by going from your user account to the Create Content link on the left and clicking it. Then from this page click page to create a new page. The page can then be viewed or edited depending on which tab you click. You want to edit this page to be the front page of your e-portfolio using links from it to other pages. Try planning out a structure first eg a list of subject titles on the first page with each title linked to a subject page. This page might have further links to aspects of the subject and so on.

Remembering where to find it!

Once you have created your first page you need to make a note of its URL so that you can get back to it quickly. The URL will be in the normal address field at the top of your browser page and should be something like www.theingots.org/community/node/<number> where <number> is the number of your page on the INGOT website. Write this down. There is a place in your account profile to store this URL so you don't have to remember it and you can then just click on a link in your account page to go to your e-portfolio.

Storing the E-portfolio address

To do this click on My Account on the left and then edit. Then click Profile and put your e-portfolio full address http://www.theINGOTs.org/community/node/<number> into the space marked e-portfolio. Now whenever you log in, your account page will have the link to your e-portfolio displayed.

Using HTML to set up your e-portfolio

I can make a heading in HTML (1 mark)

So far you should know how to set up an account on the community web site and you should be able to set up a page on a web site and make it available to other people. This satisfies the first two of the assessment criteria. For the next you have to show you can make a heading in HTML. In HTML headings are marked with the tags <h1>, <h2>, ... down to <h6>. The top-level heading is <h1>. You can use the other headings for side headings to give structure to your portfolio. Try to be consistent with your use of headings as it will look better.

Making links

I can make links to other web pages using URLs (1 mark)

Next you have to show you can make links to other pages. You do this by embedding the "a" tag and the address of the page to link to. This could be a new page you created or it could be any page on the internet. eg Please visit <a href=”http://theingots.org”>The INGOT</a> website would give the words The INGOT between > and < in coloured text so when the user clicks on it they are taken to the URL written into the href= bit. So click here and you go to the home page of the INGOT web site.

Making lists

I can make a list in HTML (1 mark)

Lists can be just plain lists or they can provide a menu of links to other pages. Once you can make lists you can make an index for your links. First let's do a plain list and after we will build in links.

<strong>The primary colours</strong>

<ul>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ul>

Strong makes the text bold and /strong turns bold off or you could use a heading tag. <ul> stands for “un-ordered list” and <li> for “list item”. This bit of HTML will look like this when displayed.

The primary colours

• Red
• Green
• Blue

Use this type of list for bullet lists or plain lists where the items do not have a particular order. For listing a sequence of items with a specific order, you should use ordered (ie. numbered) lists:

<strong>Recipe for cauliflower soup:</strong>
<ol>
<li>Chop 1 cauliflower and 1 onion into small pieces.</li>
<li>Gently cook them in butter.</li>
<li>Add 1 pint of white stock and simmer for 45min.</li>
<li>Remove from heat and pass through a sieve.</li>
<li>Add 1 pint of thin white sauce.</li>
</ol>

<ol> stands for ordered list and so the list items will be automatically numbered for you in a sequence. This is how the HTML will be displayed

Recipe for cauliflower soup:

1. Chop 1 cauliflower and 1 onion into small pieces.
2. Gently cook them in butter.
3. Add 1 pint of white stock and simmer for 45min.
4. Remove from heat and pass through a sieve.
5. Add 1 pint of thin white sauce.

In the example above, if you didn't do things in the right order the instructions won't give a successful result.

Making an index page

I can use the skills above to make an index page organised into sections (2 marks)

Now you have all the skills to make an index page. Index pages are necessary to keep track of all the pages and documents on a website. A good index page will use headings to organise the content into sections, and use a bullet point list of links. A final index should look something like this:

<h1>e-Porfolio Index Page</h1>
<h2>Silver Ingot Work</h2>
<ul>
<li><a href=”Example page”>My Ingot blog</a></li>
<li><a href=”Example page”>My project proposal</a></li>
</ul>
<h2>My Art Work</h2>
<ul>
<li><a href=”Example page”>My paintings</a></li>
<li><a href=”Example page”>My final project</a></li>
</ul>

Start with a main heading, then a side heading followed by an unordered list with each list item linked to a new page. (Here we have just linked to a single example page) You would create each new page using the Create Content and Page links just like for the first page and make a note of the URL so you could put it in the href="URL Page 1" part replacing Example page with the URL for each page so that when the user clicks on this link the target page will open in their browser. Here is how this code will be displayed

e-Porfolio Index Page

Silver Ingot Work

• My Ingot blog
• My project proposal

My Art Work

• My paintings
• My final project

Note that these links don't lead anywhere useful because we didn't create the pages.

Uploading files

I can upload files to my web space and make a link so other people can download the file (2 marks)

You might want to upload files to show, for example, a booklet made for a particular project, examples of your artwork or music files. The method to upload files can be slightly different on every web site. On the INGOT web site, go to the page where you will use the file and click 'edit'. Find the attachments section below the the content body, by scrolling to the bottom then do the following:

1. Click browse and select the file to attach from your file system.
2. Click Add.
3. Scroll again to the attachments section, and note down the URL where the file is located.
4. THEN scroll down and click Submit.

Note the above is also a good example of an ordered list. It matters which order you do each instruction.
Note - If you don't do the 'Submit' step at the end, the file will not be added! This is a "feature" of the Drupal software environment.

Completing an e-portfolio

I can use the above skills to make an e-portfolio for my work and maintain it myself (5 marks)

You now have the basic skills to make your portfolio and maintain it yourself. You can create and link to other pages and up load files. Your task now is to put together an e-portfolio with an index page and several linked pages with at least two files of work uploaded you would like to present to others. Its best if these files are in formats that can be utilised without forcing the user to buy particular software. You can improve the appearance and interest of your portfolio by inserting pictures.

Preparing images for web pages

I can use image editing software to prepare images for use on the web (3 marks)

File formats:
From unit 1 you should know something about file formats and file sizes. The proper graphics file formats for use on the web are JPEG for photographs (.jpg) and PNG for drawings. (.png) A popular format is GIF, but this format is outdated and should be replaced by PNG where possible. Other file formats may not work on all web browsers so they should be avoided. SVG is the vector standard but not yet supported by all browsers. Internet Explorer is the main problem and needs a plugin to display svg files. Firefox and other free browsers do support svg.

Image size:
The download size for an image should, in general, not exceed 200 KB. You need to consider the proper dimensions of the image (width and height) so that it looks good on a web browser. The image should not exceed 300 x 200 pixels (width x height) unless there are exceptional circumstances, and you should aim to make them smaller if possible. The proper image size will depend on where the image is used, so you need good judgement. Practice and experimenting with feedback from your fellow learners and teacher will support learning.
A good application for making screen captures and editing images is GIMP which can be downloaded and installed freely. It's well-suited for editing images from digital cameras and screen captures. For drawing use Inkscape and use its export facility to provide png files for the internet. Inkscape will make images without a background so that your drawing blends in with the web page background.

Inserting images into web pages

I can insert an image in HTML (1 mark)

Upload
First you have to upload the image. This is done in the same way as for uploading a file.

Find the attachments section below the the content body, by scrolling to the bottom then do the following:

1. Click browse and select the image source file to attach from your file system.
2. Click Add.
3. Scroll again to the attachments section, and note down the URL where the file is located.
4. THEN scroll down and click Submit.

You then use src (short for source) to tell the web browser where to find the image to insert in the page
<img src=”http://mywebsite.org/mypicture.png”/>
Here, the URL in the " " is the web site URL you noted down when uploading the image file. So you upload your file to a place on the web site and then tell the browser where to find it. On the INGOT web site it will probably be something like
<img src=”http://theingots.org/community/sites/default/files/active/0/myphoto.jpg”/>
Use images sparingly and avoid animated images. They generally make things look like they were done by an amateur! One useful trick professional designers use is to have a small preview version of an image linked by href to a larger version. This means pages load faster and the page is not so cluttered. Here is the code to do this
<a href=”http://mywebsite.org/large-picture.jpg”>
<img src=”http://mywebsite.org/preview.jpg”/>
</a>

We are hyperlinking the preview image to its full version in the same way that we linked a word or group of words to a web page earlier. Click on the preview image and it will call up the large image.

Finally...
You now have enough knowledge to make a basic e-portfolio. You can learn more about HTML from the web as there are plenty of free tutorials there. If you want to know how to position images, just type positioning images with HTML into a search engine like Google. The editor on the INGOT web site includes a word processor style feature you can enable by clicking rich text. This will generate the HTML tags for you but you must show you understand the basics for your silver certificate by setting up your basic e-portfolio with HTML code direct. In general hand coding is more versatile and usually produces more efficient code. You can also find out and fix things that editors don't get right.