Web Design Test

Write a CSS code for the browser to ignore and disable a rule.

/*.....................;*/

Explain font stack?

A font-stack is a list of multiple fonts that the web browser uses in an attempt to display text onscreen.

At present, Font-size property can be controlled in the following measurements - Absolute-size, Length, Percentage and Relative-size. What do each of these measurements indicate?

Absolute-size - are a set of keywords such as xx-small, x-small, small, medium, large, x-large and xx-large - these indicate predefined font sizes. Length - is usually a number followed by an absolute units designator or a label, such as centimeter (cm), millimeter (mm), inch (in), point (pt), pica (pc) OR relative units designator or label such as em, ex (the height of the lowercase 'x') or pixel (px). Percentage - an integer (a number, digit) followed by the percent sign (%). The value will be a percentage of the parent object font-size. Relative-size - a set of keywords such as larger and smaller that are interpreted as relative to the font-size of the parent object.

Define the purpose of an external style sheet and one of the benefits of using an external style sheet.

An external style sheet is a text document with the extension .css This document contains CSS rules that define (describe) the appearance of HTML elements. Because external style sheets can be linked to multiple HTML pages, they provide one central location for your styles. One benefit to this is the ability to update the style of an entire site with a single change to a CSS rule. Other benefits include the ability to use multiple style sheets for organizational purposes and to specify specific style sheets for printing or optimize the display for mobile devices.

List four of the most reliable fonts for web use.

Arial, Verdana, Georgia, Times New Roman, Courier, Trebuchet, Lucida, Tahoma and Impact are at present the most reliable fonts for both Windows and Mac platforms for web use.

Explain your understanding of 1 em = 100% = 16 pixels.

If I assume that my default browser text-size is 16 pixels and that my web page body font-size is set to 100% then the em equivalent of the above two measurements is 1.

List three significant differences between XHTML and HTML.

In XHTML all tags must be lowercase, requires all tags to be closed, requires proper nesting of tags.

What do the acronyms .JPG, .GIF, .PNG and .TIF file extensions (file formats) stand for?

JPG stands for Joint Photographic Experts Group GIF stands for Graphic Interchange Format PNG stands for Portable Network Graphics TIF or TIFF stands for Tagged Image File format

What are some benefits to creating well-structured web pages?

Less code, ease of maintenance, accessibility, search engine optimization and device compatibility

If you were designing a web page that is based upon a 960 px width, approximately how many pixels wide would one image need to be to fit 3 images with a 10 px border between each image?

One image would approximately need to be 313 px wide. Web Design does not require knowledge of atomic Physics but it does need you to have a basic knowledge of Math to make simple calculations.

Which is the more important factor to pay attention to when resizing an image for the web: pixel size or resolution and why?

Pixel size (the number of pixels in an image) is more important for web images. However, resolution (the amount of information on the screen) will matter in print design and printed output.

Explain 'Slicing an image' and provide two useful reasons for it.

Slicing an image is to cut a large image into smaller parts. The smaller parts of an image are held together by a CSS. Slicing is useful because download time is reduced. Also, slicing a large image into smaller parts allows you to save each part of the same image into different formats (file types).

Why aren't pixels and points the best choices for setting font size in web design?

Some web browsers such as IE6 and IE7 do not resize pixel-based text if the user chooses to override the default settings. Points on the other hand are a system of measurement designed for print and though they are available for web use, they indicate an absolute unit of measurement and do not scale on the screen.

What is the best format for an animated graphic that contains many gradients and why should you use it conservatively (less often)?

The GIF format is currently the only format that supports animation.

What format can you save in that allows you to fade an image and see through to the objects underneath it on the web page?

The PNG-24 format allows you save an image with varying levels of transparency.

What is the best way to increase or decrease space between two text blocks (for example the space between a heading and a paragraph)?

The best way to increase or decrease space between two text blocks is to use margins, padding or some combination of the two. All CSS elements are based on a box model and the space outside of the element is controlled by invisible padding. In the case of a paragraph that is below a heading, you would only need to set the top margin/padding or bottom margin/padding values not the right or left values.

What is em when referring to font-size? What are the main two advantages?banana-split-icebox-cake

The em is as it applies to font-size in CSS is a relative unit of measurement. A unit of 1em is equivalent to the default font-size of the web browser (traditionally 16 pixels). Because em units are relative, they scale well when resized in a browser. They also allow the designer to link elements such as paragraphs and headings to a specific value in the body. This allows for easy resizing of text if needed

What is the equivalent of 1.25 em in pixel number and how did you arrive at the figure?

The equivalent of 1.25 em in pixel size is 20 pixels and I arrived at this figure by multiplying 1.25 by 16 (the default browser text-size) 1.25em X 16px = 20px

Why would you choose GIF as a file format over PNG-8, or JPG?

The main reason why you would choose GIF for a particular file is if it includes animation. GIF is the only file format that supports animation. You might also choose GIF if you have an image with lots of solid colors in it.

Joanne has defined the paragraph rule in her CSS the following way: p { font-family:Marlet; } Marlet is a specific font style. Is this the best way for her to define her paragraph font style for all the browsers in the world? Briefly explain your answer.

This is not the best way for Joanne to define her paragraph style. Because fonts defined in a style sheet only appear on the user's page if they have the font installed on their system, it is best to use a font-stack.

Should the Unsharp mask filter be applied every time you resize an image?

Yes, it is recommended that you apply unsharp mask each time you resize an image. However, be careful not to apply the same amount each time. The amount you apply will vary depending on the result you see on the screen. To see the most accurate preview, ensure to always view at 100% view.

What is a doctype and how does it relate to page validation?

a declaration at the start of your HTML document used by a web browser to determine what markup language and version is used on the page. Page validation is a good way to check your page for problems such as missing tags or typographical errors in your code.

How would you describe a file with a .css extension?

a text file

How do you write the image tag?

does not require an opening and a closing tag and you write it as follows - <img />

What is the alt attribute?

represents the text equivalent for the image.