Computer Science - Web Technologies

Question 1

Web Technologies

Answer 1

HTML and CSS are mark-up languages used to create a webpage. It is possible to combine these with the programming language JavaScript to process and display data dynamically on a webpage. Search engines index pages and can be used to locate the information that you need in the vast array of data on the World Wide Web.

Question 2

HTML

Answer 2

• HTML stands for Hypertext Markup Language
• is the standard markup language for web pages.
• Tags are used to specify elements of a webpage
• Tags can be used to define structural elements of a page, such as a navigation bar or a footer
• A web browser will interpret the tags to display the page
• HTML can be combined with CSS
• CSS standards Cascading Style Sheets
• CSS can be in tandem to improve on the default presentation of elements and a skilled design can use CSS to create stunning web sites

Question 3

HTML - How to write in HTML

Answer 3

• To write HTML, a text editor and a web browser are needed
• there are a wide variety of text editors that can be used
• some websites allow you to write HTML code and have the results displayed directly in your browser
• HTML docs have the file extension .html
• HTML docs also, if saved, usually default to opening up in your web pages
• You can view an HTML doc either as the web page or as the HTML code which generates that page
• It is important to remember that the type of application you use to open the HTML file will impact its display.

Question 4

HTML - HTML tags

Answer 4

• The <p> tag is used to specify a paragraph and must be ended with </p>
• A paragraph is a basic building block of a webpage.
• There are some rules for displaying paragraphs
• By default, browsers separate paragraphs with a single black line and the text is left-justified
• You can override the default browser presentation rules by using CSS.
• The process of processing the HTML for display purposes is called rendering
• Semantic HTML is the term used where tags have been used purposefully to reinforce the meaning of content on a page
• semantically correct HTML helps to make sure that people and machines make sense of it
• This allows the page to be correctly interpreted by screen readers and other user devices.

Question 5

HTML - HTML page structure

Answer 5

• The entire content for an HTML page would be enclosed by a pair of tags.
• The section contains any content that doesn’t appear directly in the main window of the page
• The that will appear with the tab for the page when it is viewed in a web browser
• Below the head section is the which contains the main content of the page
• Leaving multiple spaces or moving text onto a new line in your code does NOT mean that space is placed on the page your visitors will see.
• The <br></br> tag will add an extra blank line anywhere on the page
• The <br></br> tag does not have a closing tag because it has no content to enclose
• You can also use comments in your markup

Question 6

HTML - Headings

Answer 6

• Headings are used on web pages to introduce a section of the page
• The HTML tag for headings is , where the # is replaced by a number between 1 to 6.
• The higher the number in the heading tag, the lower the priority of the heading
• The lower the priority of the heading the smaller the text the browser
• Heading tags also have semantic meaning within the page.
• Things that shouldn’t be headings if they aren’t tagged as them
• The main <h1> heading tag is used by search engines in summarisations, as well as to help users skim over the content and provide extra information to users of assistive technology
</h1>

Question 7

HTML - Images

Answer 7

• The image tag is <img></img>
• The syntax for it is <img></img> where src has the link for the image, and alt has the description for the description
• The image has to be saved in the same folder as the HTML code
• There is no closing tag for the image tag
• another piece of information needed for the image is the height and width of the image, which can be used to change the size of the shape
• It is not recommended you re-size the image through HTML code because doing this means you need to download the original image before it can be resized, which can take some time, The browser may also not be the best tool to resize the image, as there is always specialist image editing programs instead as well as the fact that there must be careful to keep the aspect ratio the same to make sure the image does not become distorted

Question 8

HTML - Hyperlinks

Answer 8

• A hyperlink is a piece of text that when clicked on, will transfer you to another page
• The tag for a hyperlink is <a></a>
• The tag must have a href after the a which specifies the target of the link
• An unvisited link is underlined and blue, a visited link is underlined and purple and an active link are underlined and red.
• the </a><a> tag stands for anchor</a>
• </a>

Question 9

HTML - Lists

Answer 9

• A list is a very useful thing to have on a web page
• A list is creating using <ol> for an ordered list or </ol><ul> for an unordered list
• Individual items are added with the <li> tag
• to end the list you would use either </li> or </ul>
• Lists can also be used to create menus and navigation bars
• in this case the list items will be hyperlinks and their layout and appearance will be customised using CSS.

Question 10

HTML - Forms

Answer 10

• The HTML tag for forms is
• Forms also use the HTML tag to insert things into the form, such as buttons or search bars
• Forms are used to enter data
• To input things into forms more information is needed, these are known as attributes, and can contain things such as the type of data being added, the name for which it can be searched for in code, as well as what it does.

Question 11

HTML - Divisions

Answer 11

• The HTML tag for page divisions is <div>
• The Div tag is used to crease page divisions, which are containers or boxes
• The containers or boxes can contain other elements on the page, such as text, images or form elements.
• the <div> tag can also be used to group pieces of content together within other <div> tags and then define a set of CSS style rule-set that will apply to everything in the container
• Each division must contain a unique ID, which is used to identify it.</div></div></div>

Question 12

CSS

Answer 12

• CSS is Short for Cascading Style Sheets
• used to style the content of web pages
• CSS tells the browser how each element should appear
• allows a single style sheet to be attached to every page across every page
• Used to define all aspects of the appearance of web pages, including the design, layout and variations in display for different devices and screen sizes

Question 13

CSS - CSS Syntax

Answer 13

• simple syntax and uses several English keywords to specify the names of various style properties
• Each rule or rule-set consists of one or more selectors and a declaration block
• There are a few key things used in CSS, these are the selector and the declaration block.
• The selector targets the element that you want to target
• The declaration block contains multiple declarations, with each declaration being made up of a CSS property and value, which could be colour for the property and grey for the value
• If no font is defined by the CSS code then whatever the browser default is will instead be the font of the webpage, the same is equal for other things which haven’t been defined

Question 14

CSS - CSS Properties

Answer 14

• A property is a particular thing that can be changed such as the background colour.
• There is a list of properties with which you need to be familiar for the exam, these are:
○ Background-color: Changes the colour of the
background
○ Border-color: Changes the colour of the
border around an element
○ border-style: Changes the style of the border
○ border-width: Change the width of the border
can be set to thin/medium/thick, or a specific
width of pixels
○ color: Changes the colour of the text, can be
specified with a word or as a hexadecimal
value
○ font-family: changes the font
○ font-size: changes the size of the font
○ height: changes the height of the element
○ width: changes the width of the element

Question 15

CSS - Element Selectors

Answer 15

• An element selector applies a CSS rule-set to a standard HTML tag
• The name of the selector is the name of the element that you wish to style

Question 16

CSS - ID selectors

Answer 16

• Used to target elements that are unique on an HTML page.
• When you have a single element that needs a specific style, you can use an ID selector
• The selector begins with a # to denote that is an ID selector
• ID selectors cannot start with a number or include spaces
• to apply the style on the web page, you must include the ID name, without the #, within the relevant tag

Question 17

CSS - Class selectors

Answer 17

• Allows you to apply a CSS rule-set to a defined group of elements
• starts with a “.”
• cannot start with a number or include spaces
• To apply to an HTML element, you specify the name of the class, without the dot, within the HTML tag
• Class selectors can be applied multiple times on the same page and can be applied to any HTML element where the properties are relevant

Question 18

CSS - External Style Sheets

Answer 18

• An external style sheet is a file that contains the rules you have written
• they are linked to your HTML file, using the link tag in the head section
• The link tag is
• Once the file is linked the rules are applied to the matching elements
• If an element does not have a style rule, they will be styled using the default settings
• If you are maintaining a multi-page website, the same style sheet can be linked to every web page

Question 19

CSS - Inline Styles

Answer 19

• An inline style allows you to add a style rule-set within an HTML tag
• The rule-set applies only to the tag in which it is embedded

Question 20

JavaScript

Answer 20

• Widely-used programming language that can be used to add interactivity to your web pages
• Can be used to gather and process input from users
• can create dynamic page elements and do useful things such as validate data
• mainly for client-side processing
• code is interpreted on the end user’s computer system by their web browser

Question 21

JavaScript - How to use JavaScript

Answer 21

• Small chunks can be included in an HTML page using the tag
• Can also be written as functions, but unlike the script tag it will only be executed when called upon
• Code can also be executed when events occur, this can be the push of a button executing a function or something along those lines.

Question 22

JavaScript - Programming Constructs

Answer 22

• to declare a variable in JavaScript you use the keyword var, this only needs to be done once per variable
• JavaScript is case sensitive
• “if”, “else” and “else if” can be used to determine which code should be executed
• JavaScript code does not need to be indented, but it does help with being able to read it
• count controlled loops can also be used, such as for loops, while loops, etc.
• Arrays can also easily be defined
• Arrays are indexed from 0 in JavaScript
• There is no fixed size for Arrays in JavaScript
• All subroutines are called functions in JavaScript
• A function may or may not return a value

Question 23

JavaScript - Output Methods

Answer 23

• Alert Boxes are a simple and easy way to display a message to users
• however they are rarely used on live web pages, they can be annoying to click on a button to dismiss the message. However, used sparingly it can be appropriate
• can be a useful technique to use if you wish to quickly display some information when working with a web page during development
• you can also use JavaScript to provide output information to users by writing the result directly onto the web page
• The final method of producing an output allows you to directly change the value of a specific HTML element

Question 24

JavaScript - Input Methods

Answer 24

• HTML forms are widely used to collect data from the person using a website
• even simple search boxes are embedded within form tags
• the tag for forms is and

Question 25

Compression Techniques

Answer 25

• Many different types
• employed in different situations depending on the nature of the data
• categorised as lossy or lossless
• Lossy techniques lose data permanently, while lossless techniques can be reconstructed to their original form.

Question 26

Compression Techniques - Run-length encoding

Answer 26

• Lossless compression technique
• finds ‘runs’ or repeated binary patterns and replaces them with a single instance of the pattern as well as how many times it’s repeated
• Runs are not usually processed row by row, there may be long runs that span several rows
• Well suited for image data, especially files with smaller colour palettes
• Typically encoded into 2 bytes one byte for the pattern and another for the number of repetitions
• Only achieves significant reductions in file size if there are long runs of data
• in extreme cases of no repeated patterns, the file size could instead be double that of the original

Question 27

Compressional Techniques - Dictionary-based methods

Answer 27

• lossless technique
• relies on finding patterns of data
• instead of looking for unique letters like Run-length encoding, it looks for unique words
• each word would be saved as a unique byte and compressed

Question 28

Compressional Techniques - Compressing bitmapped graphics

Answer 28

• JPEG compression is a technique that exploits the fact that real-life image data is not made up of a grid of discrete pixels but is made up of continuous variations in the colour spectrum
• JPEG takes advantage of the fact that the difference in colour between individual pixels is imperceptible to store fewer colour codes.
• the JPEG compression algorithm discards colour information that cannot be processed by the human eye and finds patterns in the remaining colour values
• Blocks of similar colour values are represented as a single colour that is determined from sampling the pixels within the block.
• This reduces the amount of data needed to be stored and thus reduces the file size
• Under standard settings, a single colour is recorded for every block of nine pixels, achieving a reduction in file size of around 90%
• It s a lossy compression algorithm
• achieves a compression ratio of 10:1 with little noticeable loss in image quality
• This means a file of 36MB can be compressed down to 3.6MB

Question 29

Compressional Techniques - Compressing sound files

Answer 29

• The common technique for compressing sound files is MP3
• MP3 is a lossy compression technique for sound files
• It works on the basis that there are certain sounds which cannot be heard by the human ear, and others that are heard much better than others
• It would remove quiet sounds which cannot be heard completely to decrease the size of the sound file
• Achieves a similar degree of compression as JPEG, compressed files are typically 10% of the original file size
• Sound quality is affected by the quality of equipment being used to play and listen to music, and the environment in which the file is being played.

Question 30

Compression Techniques - Zip Files

Answer 30

• Zip is a compression format that takes a collection of one or more files and/or folders and reduces them into a single file
• This can be useful to send multiple files over emails, or if the format of the original files is blocked
• Zip format is also useful for uploading or downloading files to remote servers, especially when the receiving server automatically unzips (decompresses) content.