Category Archives: 3. Multimedia

3. Multimedia, Computing Higher

Development process for multimedia applications

This is the topic that we will be looking at this week.

  • Description of the software development process as it applies to the development of multimedia applications
  • Description of methodologies used in the creation or definition of a multimedia application, including:
    • WYSIWYG editors and text editors to create web pages
    • authoring software to create multimedia applications
    • presentation software to create presentations
  • Description of the methodologies and requirements for the display of a multimedia application, including:
    • streaming of multimedia data
    • embedded files
  • Explanation and exemplification of the terms
    • ‘codec’
    • ‘container’ file
3. Multimedia, Computing Higher

Task 7 – HTML Lists

This task will show you different ways to lay out lists of items using HTML list tags. These can be extremely useful for things like lists of school subjects, classes, or teachers.

Unordered List (with ‘bullet’ marks)
<UL>
<LI>First Row
<LI>Second Row
</UL>

This would look like:

  • First row
  • Second row

Ordered List (with numbered items)
<OL>
<LI>First row
<LI>Second row
</OL>

This would look like:

  1. First row
  2. Second row

Unordered List (not marked)
<UL>
<DT>First Row
<DT>Second Row
</UL>

This would look like:

    First row
    Second row

Step 1. If you haven’t already got a page with some items to format into a list, then add some list items to an existing page, or create a new page and add some suitable items.

Step 2. After you’ve made and previewed your listing items, try altering the size of the text using the header tags (<H1> etc) and don’t forget to close the header tags (</H1> etc).

Step 3. A slightly more complex but very common use of lists is to put clickable links into a list. You should know enough to be able to do this now. Try it on your own

3. Multimedia, Computing Higher

Task 6 – Coloured Text

Those hexadecimal colour numbers you used in task 7 can also be used to change the colour of text. More importantly, you can change the colour of text as often as you like. To do this you’ll use a new HTML tag. To follow the steps below, use a word or phrase in your own page.

Step 1. The HTML tag for changing the text colour is the <FONT> tag. Here’s the tag when it sets the colour of a phrase to red;

This is a <FONT COLOR=”AF0000″>red word. </FONT> Back to black.

And this is how it looks;

This is a red word. Back to black.

Notice that the FONT COLOR command MUST be terminated with a /FONT command. If you forget the </FONT> tag then the rest of your text will be coloured!

Step 2. You can use the same hexadecimal colour codes to experiment with setting the text colour. Here they are again…

BGCOLOR=”#000000“
BGCOLOR=”#0000DD“
BGCOLOR=”#0099FF“
BGCOLOR=”#33CC33“
BGCOLOR=”#99FF66“
BGCOLOR=”#DD0000“
BGCOLOR=”#FF3366“
BGCOLOR=”#FFFF00“
BGCOLOR=”#FFFF66“
BGCOLOR=”#000000“
BGCOLOR=”#663300“
BGCOLOR=”#990099“
BGCOLOR=”#FF0024“
BGCOLOR=”#555555“
BGCOLOR=”#777777“
BGCOLOR=”#FFFFFF“ (white)

Step 3. Now go wild! try setting both background AND font colours!
(Perhaps we should have provided some sick bags, like the airlines!?!

3. Multimedia, Computing Higher

Task 5 – Coloured Backgrounds

Now that you’ve uploaded pages to the web server you have completed all the core tasks and have acquired the core skills necessary to maintain a set of web pages. The remaining tasks are designed to increase your HTML repertoire. You may prefer to continue developing your own pages and can refer to these tasks or to the “Beginners’ Guide to HTML” as you need to. The tasks are based upon what are normally the most desired effects that people want to incorporate in their web sites as soon as they can.

Netscape uses a mid-range grey as the default background colour for web pages. This colour is very suitable for highlighting the 3D effects that are part of HTML rules and tables and is actually a very good backround colour. Nevertheless, most people want to choose something a bit livelier or which will better reflect the ethos or personality of the web site they are designing.

Changing the background colour is also a very resource-efficient change to make as it does not send any graphic files to Netscape or other web browsers, it simply instructs the browser to use a certain colour as its background colour. Here’s how to do it…

Step 1. The HTML tag for changing the background colour is actually part of the <BODY> tag which is extended slightly to include a BGCOLOR element. Here’s the tag when it sets the colour to white, like all the task pages on today’s course; <BODY BGCOLOR=”FFFFFF”>.

Remember there is only ONE <BODY> tag in a web page. It appears near the very top.

Step 2. Preview your page.

Step 3. The strange looking codes that set the colour are hexadecimal numbers (numbers to base 16) and changing the hexadecimal number changes the colour. Below is a list of some common colours and the hexadecimal numbers to obtain them. Try adjusting your new <BODY BGCOLOR=”FFFFFF”> tag by substituting some of these numbers and then previewing your page. (The ‘#’ symbol that appears in the codes below is optional. It means ‘what follows is a hexadecimal number,’ but can be omitted.)

BGCOLOR=”#000000“
BGCOLOR=”#0000DD“
BGCOLOR=”#0099FF“
BGCOLOR=”#33CC33“
BGCOLOR=”#99FF66“
BGCOLOR=”#DD0000“
BGCOLOR=”#FF3366“
BGCOLOR=”#FFFF00“
BGCOLOR=”#FFFF66“
BGCOLOR=”#000000“
BGCOLOR=”#663300“
BGCOLOR=”#990099“
BGCOLOR=”#FF0024“
BGCOLOR=”#555555“
BGCOLOR=”#777777“
BGCOLOR=”#FFFFFF“ (white)

3. Multimedia, Computing Higher

Task 4 – Adding Hypertext Links

Hypertext links are the cement that binds the World Wide Web together. You can place links on your pages that appear as blue underlined text; when the user clicks on a link they are taken to another web page. This might be another of your own web pages, or a web page created by somebody else which is hosted on a server on the other side of the world.

Step 1. Let’s start by providing a link to another of your own pages. Your index page is the front door through which users arrive. It will contain links to your other pages. You might well have started on a second page already. If you haven’t, create a new page and put a simple message on it. You can call it anything you want, but for the sake of this task, I’ll assume that its filename is page2.html. This page should be in the same folder on your Macintosh as your index page (index.html), and when you upload it to the web server it should reside in the same directory as index.html.

Step 2. In your index page (index.html) you need to add the following HTML tag…

<A HREF=”page2.html“>Page 2</A>

The first black item (page2.html) is just the filename of the page that is to be loaded when the user clicks the link. The second black item in the HTML tag (Page 2) is the text that will appear on the page as a blue, underlined link.

Step 3. Your Hypertext link should work in preview mode. Check that it does.

You can also create links to other web pages for example to link to St. Andrew’s College web server, which is http://www.stac.ac.uk/

Step 1. In your index page (index.html) you need to add the following HTML tag…

<A HREF=”http://www.coltnesshigh.n-lanark.sch.uk/“>Coltness High School</A>

The first black item (http://www.coltnesshigh.n-lanark.sch.uk/) is the URL of the page that is to be loaded when the user clicks the link. The second black item in the HTML tag (Coltness High School) is the text that will appear on the page as a blue, underlined link.

Step 2. Your Hypertext link should work in preview mode. Check that it does, so that it will work when you upload pages to the web server in task 6.

Step 3. Now find the URLs of a few interesting pages and create hypertext links in your pages to take users there. You might want to create a separate “Interesting Links” page.

3. Multimedia, Computing Higher

Task 2 – Adding & Formatting Text

It’s time to begin a step by step process of making your first web page. You now want to add a heading in your web page. A heading is a larger text that usually corresponds to the content of your page. Now in order to get it the size and position you want, you’ll have to look at the blue html tags below.

<H1>Header 1</H1>

<H2>Header 2</H2>

<H3>Header 3</H3>

<H4>Header 4</H4>

<H5>Header 5</H5>
<H6>Header 6</H6>

You should see the pattern. <H1> gives the text the largest size possible. You always have to end that tag with a </H1>. If you don’t the result will be a continuation of the heading size throughout the entire page.

If you want to center your heading on the top of your page, just add in the tag: <CENTER> and </CENTER> like this:

<HTML>
<HEAD>
<TITLE>Put Your Title Here</TITLE>
</HEAD>
<BODY>
<CENTER> <H1>Large Centred Title </H1></CENTER>

<P>
</BODY>
</HTML>

Currently your page would look like an empty window with a centered text on the top middle of your screen saying:

Large Centred Title

Now add in a <P> as you can see above the </BODY> to make all the rest of the text written later appear in a new paragraph beneath your heading.

Step 1. Add a large, centred title to your page in the way shown above.

Step 2. Now type some of the information you want on this first page. Basic information like your school’s postal address and telephone number should appear somewhere on this page, but you might want to give a description of the school that would include the number of pupils, any special strengths that thw chool has, and so on.

Remember to use the <P> tag when you want to begin a new paragraph.

Step 3. Experiment with various sizes of text and with centering parts of the information. You’ll see the results in the next task!

Step 4. Save your page with these additions before moving on to the next task.

3. Multimedia, Computing Higher

Task 1 – Creating the page skeleton

This task guides you through creating the required parts of a web page.

Step 1. Start up the Notepad editor by double-clicking the program icon.

Step 2. Type in the text below

<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>

<BODY>

</BODY>

</HTML>

Step 3. Enter your page title between the title Tags.

Notice the <HTML> and </HTML> tags at the top and bottom. These mark the beginning and end of the web page. It begins and ends the web page content.

When you add an HTML tag you usually have to close it off with the ending. (Usually the same as the start, but with a “/” before the letters)

The <HEAD> and </HEAD> just tell your browser it’s at the heading of the page. The “information” like the title is contained here.

Between the <TITLE> and </TITLE> is where you type the text you want to appear for the window name on the browser. Note that this title does NOT appear ONthe web page.

Step 4.The cursor should be positioned between the <TITLE> and </TITLE> tags, so type the title you want to use.

Step 5.Save this skeleton file with the name index.html before moving on to task 2. It is important to use the name index.html as the name for your main page as that is the filename which the server looks for if a filename is omitted from the URL. For example, the URL http://www.stac.ac.uk/ is an abbreviated URL and the web server will actually try to find a web page called http://www.stac.ac.uk/index.html.

3. Multimedia, Computing Higher

HTML Introduction

You can find these resources within the school server. HTML is a markup language that is used to describe how web pages work. It requires a special piece of software called a web browser to translate the HTML page into the multimedia page we are used to seeing.

A web server hosts the HTML pages and serves them to the browser client when requested.