Tag Archives: HTML

3. Multimedia, Computing Higher

Introduction to Multimedia

So we got started on booklet 1. In this unit we will focus more on the technical aspects of multimedia.

Today we looked at the development process of multimedia and the key thing you should have taken away was this idea of target audiences. Any multimedia application must be focused on it’s target audience. A multimedia application for a primary school child will look far different than one created for a University student.

We then went on to HTML and how a WYSIWYG editor differs from a text editor.

Tomorrow you will be working with these notes.

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.

Computing Higher, Coursework

Task 3 – Adding Graphics

Images make your pages more stimulating to browse. Most people like the colorful graphics. On the other hand, pages that have very large graphics, or too many graphics, take longer to load, particularly for users connecting to the Internet by modem. The trick is to strike a balance that will make your pages stimulating but will not make them take 5 minutes to load!

Graphics are not actually part of a web page; they are stored as separate files on the web server and sent to the browser to be displayed in the approriate part of the page.

What is put into the web page (which is a text document, remember) is a hypertext link which tells the browser where the image is and what it’s name is. The browser can then collect the image and display it.

The hypertext link which collects and display a graphic looks like this…

<IMG SRC=”image_URL “>

The part of the HTML tag displayed in red above, image_URL, is the part you will change to load a specific graphic.

Right, enough theory. Let’s do it!

Step 1 . Inside the webschool folder on your hard disc is a file called construction.gif. The graphic shows some construction items and can be used to illustrate the fact that the page which displays it is still under construction. The graphic is in GIF format (more about this later).

Move this so that it is in the same folder as the web page that you want to display it.

You can search the internet for a suitable web construction graphic if you want.

Step 2. In your web page, at the point where you want the image displayed, put this HTML tag; <IMG SRC=”construction.gif”>

Step 3. Preview your page. Bet you’re not satisfied, right? There are different ways of aligning graphics, that’s why. So you might want to change this in Step 4.

Step 4. You can configure the graphic to be aligned in many different places. You can use the <CENTER> and </CENTER> to CENTER your graphic. See below for 4 other ways to align your graphic.

<IMG SRC=”construction.gif” ALIGN=”CENTER”>
Click here to see an example using this tag.<IMG SRC=”construction.gif” ALIGN=”TOP”>
Click here to see an example using this tag.

<IMG SRC=”construction.gif” ALIGN=”BOTTOM”>
Click here to see an example using this tag.

<IMG SRC=”construction.gif” ALIGN=”LEFT”>
Click here to see an example using this tag.

<IMG SRC=”construction.gif” ALIGN=”RIGHT”>
Click here to see an example using this tag.

Above you’ll notice that it doesn’t close off at the .gif”> but continues on saying align=”CENTER”>. The “>” is moved over and ends later in the command.

Step 5. One of the best sources of web compatible graphics is the web itself.
I have put some graphics on your floppy disk, ask your tutor how you load them..

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.