File Types & HTML | Digitaltechnology

Topic One: FILE TYPES & HTML

It is very importanat that everyone understands how computers store data. Fundamentally there are 5 data types:

Text
Numbers
Images
Audio
Video

Most files types are predominently one data type, for example a word document is text - letters, numbers and symbols. It may also contain images, but the main purpose of a word processor is to edit text not images.

Different file formats can have the same data content but due to the way it is formatted can take up different amounts of memory.

CLASS ACTIVITY

Open Notepad and write your name and address. Save the file as NOTEPAD.txt.

Open Word and write the same content. You can even copy and paste it, if you like. Save the files as WORD.docx

If you have these two files side by side in a folder you should be able to see the differnce in sizes of these files.

IIn the image above you can see that the Notepad.txt file is much smaller than the Word.docx file, even though the text content is the same. This is because Notepad is only keeping a record of the bytes that represent each letter and symbol, while Word has a whole range of formatting functions saved inside the file along with the text content - such as font, fon size and colour, paragraphs, alignments etc.

When we investigate image file types we can see that images can be made up pixels or objects.

CLASS ACTIVITY

Open Word and using Shapes from the Insert menu draw a house with a tree. Have alook at the images above if you need an idea. When you create your image it is easy to resize the shapes, change the outline or fill colours.

Next - Open Paint and try to re-create your drawing. You will find that you can no longer re-size your shapes. This is because the shapes are only editing the pixels and filling them with colour. Once those pixels are coloured you can't edit them the same way as in Word. To edit it, you need to use the erase tool to remove the colour from the pixels. To draw the trees you may need to free-draw the leaves which will leave a pixelated curve - not a smooth curve the word objects created.

Now let's save the Word drawing as VECTOR and the Paint drawing as RASTER, and look at the files sizes.

Depending on the size of your paint document you will have a differnce in file size!

Raster Images are saved as pixels. Photographs need to be saved as raster images so that they can hold millions of colours to approximate reality. Vector images are made of separate objects. These images are often diagrams or illustrations.

If you click on the image above it will take you to an excellent website that goes into more detail.

Gomez Graphics: https://vector-conversions.com/vectorizing/raster_vs_vector.html

SOUND & VIDEO

Sound is the compression of air molecules in waves that moves the diaphram in your ear (your ear drum) back and forth to to create electrical signals to your brain. Until computers came along, the only way to record sound was with allowing the soundwaves to move a needle dragged thour wax or vinyl (records) or electronically on magnetic tape. Both these methods are analog.

To allow computers to record sound, the sound needs to be sampled and converted into a number. Everything needs to be saved as number on a computer (that is why it is called digital).

Sound must be sampled 44,100 times per second to approximate real analog continuous sound. watch the video below for more information as to how that is done. Sound files are much larger files that text or image due to the number of samples needed.

With video files, sound is saved into one track alongside a video track made up of 24 photographic raster image slices per second.

Clearly this file type uses the most memory of all - 24 raster images per second + 44,100 sound samples per second. That's a lot of file!

ASSESSMENT TASK: PART A

Creating the Content for your Website

Students will use what they learned in Year 7 about File Types to create a summary in Word under the following headings:

Values (How do computers store numbers?)
Text (How do computers store texts?)
Images (How do computers store images)
Audio (How do computers store audio?)
Video (How do computers store videos?)

Don't forget to illustrate your summary with appropriate illustrations. If you find something online - ensure you copy the URL of where the illustration was found to list as a source under the resource. See the example below.

By now you should have plenty of experience of publishing your work in Word. Now we are going to explore ONLINE publishing.

WEB DEVELOPMENT

Web pages are made of HTML code (HyperText Markup Language). It is comprised of <tags> that control how text and images are displayed through a browser.

The image above shows the icons for the five main browsers used. A browser is software that interpretes web pages and the resources they display. Below is an illustration of a very simple HTML page and how it is interpreted by the broswer Google Chrome.

You should remember doing this task in Year 7 when you editied templates provided. You can see that the heading "Ms Farrell's Social & Ethical Investigation Website" is a larger font in the second image, but in the first images you can see that the two tags <H1> and </H1> are used to modify that text. the <H1> is the open tag and the </H1> is the close tag. Everything between these tags sis affected by the Heading 1 tags.

You can see hyperlinks HOME, ISSUE IN THE NEWS, CONSEQUENCES and KEEPING SAFE in the second image. How each of these are linked is using the <a href> tag. To make a relative link it is important that the destination page (wher hte link takes you) exists! Many learners of HTML often create links to pages that don't exist and expect the links to work. If you want to learn the latest version of HTML go to the definitive source of HTML: The World Wide Web Concortium's tutorial pages.

First a template must be created where ALL the HTML page names pre-defined.

Example:

home.html

news.html

consequences.html

safety.html

Now when you create you template you can create your menu of hyperlinks:

<a href = "news.html">ISSUES IN THE NEWS</a>

<a href = "consequences.html">CONSEQUENCES</a>

<a href = "safety.html">KEEPING SAFE</a>

Once your template has been created with the header and menu you can go ahead and make all four of your pages. They need to be all located in ONE folder. Don't forget to include the "images" folder to store all you images resources. The image below shows all four html files in the same folder with an images folder. If the default browser on your computer is not Chrome, you might have a differnt icon.

CLASS ACTIVITY

Use GROK LEARNING to learn some more advanced skills in HTML: https://groklearning.com/learn/intro-html-css-1/intro1/0/

You will complete the first THREE modules in this Lesson.

ASSESSMENT TASK: PART B

Creating the Website to publish your Content

Students need to use the skills they learned in the three modules above to edit the following text into a page that looks like the image below. The text below needs to be edited and formated for the home.html page of the website. Students will put the summaries (from PART A of the assessment Task) into each of the five pages for each data type. This means the Menu needs to have the following links:

<a href="values.html">VALUES</a>

<a href="images.html">IMAGES</a>

<a href="audio.html">AUDIO</a>

<a href="video.html">VIDEO</a>

File Types

A file format is a standard way that information is encoded for storage in a computer file. It specifies how bits are used to encode information in a digital storage medium. File formats rely on the type of data being stored.

There are Five Data Types

Values
Text
Images
Audio
Video

Some file formats are designed for very particular types of data: PNG files, for example, store bitmapped images Other file formats, however, are designed for storage of several different types of data such as multimedia which includes any combination of audio and video, with or without text (such as subtitles), and metadata.

A text file can contain any stream of characters, including possible control characters, and is encoded in one of various character encoding schemes. Some file formats, such as HTML, scalable vector graphics, and the source code of computer software are text files with defined syntaxes that allow them to be used for specific purposes.

This information came from Wikipedia.

Your home page should like the image below (only YOUR name is NOT Ms Farrell!). You will have five links to your five pages and links to the sources of your information.