HTML Quiz
If you need to create a link to a file that is one level above the current file from which are linking you would use this syntax:
../thefile.html
When you want to link from one page to another you use this element:
<a></a>
If you want to insert a line-break in your page use this element:
<br>
Every HTML page needs to include these four tags:
<html>, <head>, <title>, <body>
When you have a short quote on your page, this element is the most appropriate:
<q>
If you want your page to display a "name" at the very top of the browser window you would use these tags:
<title></title>
Explain what we mean by "above the fold" and how this relates to web design.
Above the fold is a term that dates from the days of newspapers. It refers to the fact that most people will see the content that appears before the "fold" in the paper, therefore it is the most important area. In web design we can not count on a specific place that the "fold" will appear, due to the fact that different people may have different sized monitors, different resolutions, etc. Therefore, while we can aim to place our most important information at the top of the page, we can't guarantee, like we can with a newspaper, exactly how many people will see how far down the page without scrolling.
Explain what "alternative text" is and how and why you would use it.
Alternative text is descriptive text that you add to an image via the "alt" attribute. It is used for two purposes: 1. for visually impaired visitors where some type of device may be used to read a website aloud, the alternative text serves as a description of the image; 2. if a web browser is unable to display an image for any reason, some of them may display the alternative text in its place. You should always try to be as descriptive as possible with your alternative text.
An "element" is composed of three parts. Please name the three parts and give me a concrete example.
An element consists of an opening tag, some content and a closing tag. An example might be: <p>This is a paragraph.</p>
The "href" code found in an anchor element is an example of a:
Attribute
Explain the similarities and differences between an "ordered" list and an "unordered" list. Name things they have in common and things that are different about them.
Both "ordered" lists and "unordered" lists create HTML lists. An ordered list uses the <ol> element and an unorded list uses the <ul> element. Both lists use <li> elements to hold each item in the list. Ordered lists number the list items with numerals, lettters or other characters. Unordered lists simply place a bullet or similar character in front of the list item. In both cases these characters can be changed using CSS. Both lists are block level elements.
To tell the browser what type of HTML you are using on your page you add this as the first thing on the page:
Doctype
True Or False Proportion is one of the best approaches to achieving unity in a layout.
False
True Or False The two main forms of visual balance are: symmetrical balance and bilateral balance.
False
True Or False GIF images have the best transparency features.
False
True Or False If one element contains another it is considered to be the "guardian" of the enclosed element.
False
True Or False If you need to you can create your own HTML tags, just so long as they follow certain rules.
False
True Or False One of the tried and true methods of creating a "focal point" or adding emphasis on your page is to use balance.
False
True Or False Only the PNG image format supports animation.
False
True Or False The <img> element is a block level element.
False
True Or False . The "href" attribute is how you specify the location of an image file.
False
True Or False Proportion is one of the best approaches to achieving unity in a layout.
False
True Or False The GIF image format is the best one to use for photographs.
False
True Or False The JPEG image format is a "lossless" format.
False
Pythagoras and his followers observed a mathematical pattern that occurred so often in nature they believed it to be divinely inspired. They called it:
Golden Ratio
The last "numbered version" of HTML was:
HTML 5
In The Principles Of Beautiful Web Design Jason Beard says that there are five main ways to create "emphasis" in a design. Name as many of the five as you can.
Placement Continuance Isolation Contrast Proportion
The term used to describe a website that adapts to the size of the device using it (resizing images, discarding images, changing the number of columns, etc.) is:
Responsive Layout
I often use the term "semantic coding" in class. Tell me what it means and give me a concrete example.
Semantic code is code which describes the content it contains. It tells us something about the content. This is important for web browsers and other devices and especially as we move into the future where more and more devices will be reading HTML code. It allows the device to learn something about the content, to ascertain what kind of content it is. For example if we use <p> tags on a block of text, it tells the device reading the code that this is a paragraph. If we use <ul> and <li> tags on a group of items it tells the device that this is a list. On the other hand, if we us <div> tags the element doesn't tell us anything about the content. Divs are generic containers, they are not semantic, they do not describe the content they contain. They do, however, have their purposes. Not ALL elements are going to be semantic. Whenever possible always use an element that describes the content it contains.
Explain the difference between the "title" element and the "title" attribute.
The "title" element is an HTML element that is found in the <head> of your document. It gives the page a title. Search engines give a lot of importance to the text placed in the title element, so it is important to make sure your title is descriptive. The "title" attribute is an attribute that can be placed on an element, usually the anchor or image element, that creates a pop up "tool tip" when someone rolls their mouse over the element.
Explain the concept we today refer to as "the rule of thirds." Where did it come from? How is it most often applied to web design?
The rule of thirds is a simplified version of the golden ratio as first proposed by the Pythagoreans who observed a mathematical pattern that occurred so often in nature that they believed it to be divinely inspired. A line bisected by the golden ratio is divided into two sections, one of which is approximately twice the size of the other. Dividing a composition into thir
True Or False An attribute tells you something about the element which contains it.
True
True Or False What you put in the "body" element of your HTML page is what viewer's see when the page is displayed in a browser.
True
True Or False <p>, <blockquote>, <ol>, <ul> and <li> are all block elements.
True
True Or False HTML and CSS are the two main languages we use to create web pages.
True
True Or False It is possible to created "nested" lists (one list inside another).
True
True Or False It's important to design and style websites where users recognize each page as belonging to the same site.
True
True Or False When you place an image on an HTML page you should always specify the width and the height of the image.
True
True Or False HTML gives us an easy way to specifiy "special characters" (such as the ">," "<" and "&" symbols) in our content using a simple abbreviation called a "character entity."
True
Proximity and repetition are two approaches to achieve:
Unity
The organization which oversees standards and spefications for using HTML and CSS is:
W3C (World Wide Web Consortium)
In this class, when we connect to a remote server we use this "protocol":
ftp and/or sftp
If we want to link to a specific place on a page we use a:
id attribute
The "home" page, or "default" page for any website is usually:
index.html
These elements are all inline elements:
none of the above
If you want a link to open a page in a new window use this attribute and value in your link element:
target= "_blank"
The two main standpoints from which most people determine whether a website is "good" or "bad" are:
usability and aesthetics
What does HTML stand for? Also, explain what the "HT" means and what the "ML" means.
HTML stands for "HyperText Markup Language." The HyperText refers to the fact that you can create links in your text that go to other web pages or websites. The Markup Language refers to the fact that we use HTML to "mark up" our text by adding elements that give out content structure.
<h1> and <h2> tags are examples of:
Headings
ell me as much as you can about the GIF image format. Explain what it is best used for (and why) along with any features and capabilities it has.
The GIF format also work best for images with a few solid colors, and images with lines, like logos, clip art, and small text in images. GIF can represent images with up to 256 different colors. GIF is also a "lossless" format. GIF also supports transparency, but allows only one color to be set to "transparent." Files tend to be larger than their JPEG equivalents. This is the only format that supports animation.
Tell me as much as you can about the JPEG image format. Explain what it is best used for (and why) along with any features and capabilities it has.
The JPEG format work best for continuous tone images, like photographs. They can represent images with up to 16 million different colors. Is a "lossy" format because to reduce the file size, it throws away some information about the image. It does not support transparency. Files are smaller for more efficient web pages. It does not support animation..
Tell me as much as you can about the PNG image format. Explain what it is best used for (and why) along with any features and capabilities it has.
The PNG format work best for images with a few solid colors, and images with lines, like logos, clip art, and small text in images. PNG can represent images with millions of different colors. PNG comes in three flavors: PNG-8, PNG-24, and PNG-32, depending on how many colors you need to represent. PNG compresses the file to reduce its size, but doesn't throw anything way. So, it is a "lossless" format. It allows colors to be set to "transparent" so that anything underneath the image will show through. Files tend to be larger than their JPEG equivalents, but can be smaller or larger than GIF depending on the number of colors used.
