Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

Cert IV Programming > WebDesign HTML/CSS > Flashcards

WebDesign HTML/CSS Flashcards

1
Q

Question

A

Answer

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

What does HTML stand for?

A

Hyper Text Markup Language

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Which doctype declaration does HTML5 use?

A

< !DOCTYPE html >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

How do you declare a headline?

A

< h1 >…< /h1 >

sizes range from 1 to 6

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

How do you declare paragraphs in HTML?

A

< p >…< /p >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

Give the hyperlink tag to a homepage Sweetheart.com.

A

< a href=”http://www.sweetheart.com” > This is the link to Sweetheart< /a >

  • the page will open in the current window
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Explain < img src=”w3schools.jpg” alt=”W3Schools.com” width=”104” height=”142” >. (4)

A
  • tag to display an image
  • the src attribute links to where the image is located, in this case, the same folder the HTML file is in
  • alt is the text that is displayed if you hover over the picture or that is displayed in case the picture won’t load
  • width and height refer to the display properties, not the actual size of the image, it will be resized to fit
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

What does the < body > element define?

A
  • the document body or what is actually displayed/visible on the web page
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

What does the < html > element define?

A

the whole document

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

How do you close a break element? Why should you close it when it is anyway empty?

A

< br / >

  • close all elements if you need stricter validation or make your document readable by XML parsers
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

How can you display a tool tip about an element for screen readers? (3)

A

< p title=”paragraph about zoos in Chicago” >text text< /p >

  • screen reader reads it to a blind person
  • is also displayed when you hover over element

< p title=”mouse” >< /p >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

What is the tag to create a horizontal line in HTML?

A

< hr / >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

< br / > is an … HTML element for creating a …

A

…empty…line break

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

What is the < head > element for?

A

-it only contains meta data-permissible elements: < title >, < meta >, < style >, < link >, < script >, < noscript > and < base >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

How do you avoid the “poem problem”, that lines and spaces are ignored in HTML?

A

If you wrap paragraphs not in < p >, but in < pre > tags, all spaces will be honoured.< pre >text will show this way< / pre >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

< pre > defines…

A

pre-formatted text.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

The … element defines emphasised text (italics), with added … importance.

A

…< em > …semantic

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

How do you italicise “flower” in the following text paragraph?< p >The red poppy, was the famous flower blooming across Flanders during WWI< / p >

A

< p >The red poppy, was the famous < i >flower< / i > blooming across Flanders during WWI< / p >< em > also italicises, but with added semantic importance; do not use it for formatting alone!

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

How do you format text in bold?

A

< b >text< / b > bold formatting< strong >< / strong > bold formatting with added semantic importance

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

How do you highlight text by colouring its background, similarily to using a text marker in a book?

A

< mark >text< / mark > …text will be highlighted in front of a yellow background

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

How can you can you create strikethrough formatting? And why would this be used?

A

< del >puppy< / del > …puppy will be cancelled out-emphasises that something is now deleted and still inform users that it once existed/was considered/etc.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

How can you show through formatting that particular text was added to a paragraph?

A

< p >< ins >Bunnies< / ins > are cute.< / p >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

How do you create a subscript in HTML such as is required for a logarithms base?

A

< sub >…< / sub >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

How can you reformat HTML to a smaller sized text with direct formatting?

A

textsuitable for footmarks

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

How can you reformat HTML to a smaller sized text with direct formatting?

A

< small >text< / small > -suitable for footmarks

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

In HTML, how do you format short quotes correctly?

A

< q >Flowers are beautiful!< / q > -text in quotes will normally be wrapped in quotation marks

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
27
Q

In HTML, how do you format long quotes (several lines) correctly? (3)

A

< blockquote >text text< / blockquote >-quote will generally be indented-you can inbuilt a reference to the source: cite=”http://www.text.com”

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
28
Q

In HTML5, what is a clever way to show your readers what an abbreviation stands for?

A

< abbr title=”Woof Dog Home” >WDH< / abbr >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
29
Q

With HTML tags, how can you show/highlight text to the reader designated as computer code? (3)

A

< code >command blah< / code >-you can achieve richer effects with CSS-text is usually displayed in the font family Monospace

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
30
Q

With HTML tags, how can you show/highlight text similar to computer code as keyboard input or computer output? (3)

A

< samp >sample output< / samp >< kbd >keyboard input< / kbd >-all displayed in font family Monospace

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
31
Q

How do you insert comments in HTML, which show text or code that should not be displayed in the browser, for example reminders or for debugging?

A
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
32
Q

In HTML5, what is the tag for defining/formatting a mathematical variable?

A

< var >x< / var >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
33
Q

What does CSS stand for?

A

Cascading Style Sheets

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
34
Q

What are the 3 ways in which CSS can be added to HTML?

A

-inline - with a style attribute in tags-internal - with a style element in the head section-external - by linking to an external .css file

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
35
Q

What is the general CSS syntax for internal / external CSS?

A

element { property:value ; property:value }element…HTML, e.g. pproperty…CSS, e.g. colorvalue…CSS, e.g. red

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
36
Q

Why would you use inline styling for CSS?

A

To apply a unique styling to a single HTML element.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
37
Q

Why would you use internal styling for CSS?

A

You can define a common style for all HTML elements on a page, e.g. every instance where you find an H1 heading it will be displayed in red.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
38
Q

Use internal CSS styling to colour the page background black, to double the size of the h1 headlines and to change the font of text to Verdana.

A

body { color:black;}h1 { font-size:200%;}p { font-family:verdana;}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
39
Q

“Colour” the following text in blue using inline CSS styling. Assume it’s a headline of the highest order.Come to the Blue Mountains today!

A

< h1 style=”color: blue;” >Come to the Blue Mountains today!< / h1 >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
40
Q

Why would you use external style sheets?

A

The same styling can be applied to several pages of a homepage at once.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
41
Q

What is the CSS Box Model?

A

~every HTML element has a box around it, even if its invisible~with CSS you can make it visible with the border property and style it

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
42
Q

How do you link to an external style sheet called minnie.css?

A

in the head section: < link rel=”stylesheet” type=”text/css” href=”minnie.css” >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
43
Q

What does the CSS padding property do and how?

A

-defines a space inside the border of an HTML elementp { padding:10px; }

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
44
Q

What does the CSS margin property do and how?

A

-defines a margin outside the border of an HTML elementp {margin:30px; }

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
45
Q

How do you make the invisible box around an HTML element visible?

A

p { border:1px solid black; }

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
46
Q

You can internally style HTML elements by referring to them directly in the head section, but how can you achieve a different styling for some items or an item of the same type of element?

A

1) use the id attribute to assign an individual styling for a single element2) use the class attribute to assign a styling to you chosen group of elements

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
47
Q

Show how the id attribute is used on a p element called “bunny”, which should be coloured blue.

A

p#bunny { color:blue; }< p id=”bunny” >Bunnies are different< / p >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
48
Q

Show how the class attribute is used on 2 p elements of the group to be called “error”, which should be coloured red.

A

p.error { color:red; } < p class=”error” >I beg to differ.< / p >< p class=”error” >I differ, too.< / p >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
49
Q

What is the difference linking to another website and linking to a different page within your website?

A

-linking outside requires an absolute URL (a full web address with http://)-linking within uses a relative URL, e.g. a page in the current folder can be targeted by just linking to the pages title

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
50
Q

By default, links will appear like this in all browsers:-an unvisited link –a visited link –an active link -

A

~an unvisited link - underlined & blue~a visited link - underlined & purple~an active link - underlined & red

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
51
Q

How can you change the default link colours for hover, visited, active and default with CSS?

A

a:hover {color:yellow; background-color:black}a:visited {color:red; background-color:black}a:active {color:blue; background-color:transparent}a:link {color:black; background-color:transparent}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
52
Q

The target attribute of a link specifies…

A

…where to open the linked document.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
53
Q

Open http://www.lambda.info in a new window or tab using HTML.

A

< a href=”http://www.lambda.info” target=”_blank” >Visit Lambda!< / a >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
54
Q

Open http://www.omega.info in the parent frame using HTML.

A

< a href=”http://www.omega.info” target=”_parent” >Visit Omega!< / a >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
55
Q

Open http://www.potatoes.info in the full body of the window using HTML.

A

< a href=”http://www.potatoes.info” target=”_top” >Visit Potatoes!< / a >-if page is locked in a frame, you can break out of it with _top

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
56
Q

How do you target frames via a link?

A

< a href=”http://www.candice.edu” target=”framename” >Directory< / a >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
57
Q

How do you turn an image into a link? (3)

A

-wrap the link around the image-don’t forget to add alt and style-style=”border:0;” will prevent IE9 and earlier from displaying a border around the image

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
58
Q

How do you bookmark / link to a certain place inside a HTML document from inside the page?

A

~create a link to your bookmark< a href=”#tips” >Go to the Tips Section< / a >-mark the target section with an ID< a id=”tips” >Tips Section< / a >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
59
Q

How do you bookmark / link to a certain place inside a HTML document from another page?

A

~create a link to your bookmark< a href=”http://www.thispage.com/page01.htm#tips” >Visit the Tips Section< / a >-mark the target section with an ID< a id=”tips” >Tips Section< / a >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
60
Q

How do screen readers work? (3)

A

~reproduce HTML as text-to-speech, sound icons or braille output-they read alt attributes-alt attributes should accurately describe the image they represent

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
61
Q

What are the 2 ways to specify width and height of an image?

A

CSS in tag styling:style=”width:128px;height:128px”HTML width & height attributes:< img width=”128” height=”128” >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
62
Q

What is the benefit of using CSS in tag styling for height and width instead of HTML attributes?

A

~prevents internal or external style sheets to change the default size of an image

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
63
Q

How do you access an image in a sub-folder?

A

< img src=”/images/smilie.gif” >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
64
Q

How do you access an image from an image server?

A

~you enter the URL, the pertinent sub-folders and the file name< img src=”http://www.mouse.co.jp/mickey_and_minnie/mickey.gif” >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
65
Q

How do you create an image map?

A

< img src=”planets.jpg” alt=”Planets” usemap=”#planetmap” style=”width:145px;height:126px;” >< map name=”planetmap” >< area shape=”rect” coords=”0,0,82,126” alt=”sun” href=”sun.htm” >< area shape=”circle” coords=”90,58,3” alt=”Mercury” href=”mercury.htm” >< / map >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
66
Q

How can I let an image float around text / a paragraph?

A

~you can only use CSS, the align attribute is not supported anymore in HTML5< img src=”true” alt=”true” style=”float: left;” >-the image floats to the left of the text

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
67
Q

Tables are defined with the … tag.

A

< table >…< / table >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
68
Q

Tables are divided into table rows with the … tag.

A

< tr >…< / tr >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
69
Q

Table columns are achieved by dividing table rows into table data with the … tag. The first row’s columns are usually reserved for the table headings, so in the first row … is replaced by the … tag.

A

< td > tag, < td >, < th >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
70
Q

How do you specify a border for a table in HTML, without using CSS?

A

~place the border attribute within the table tag < table border=”1” style=”width:100%” >-use style sheets instead, the border attribute is on its way to deprecation

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
71
Q

How do you use CSS to draw a simple border around your table?

A

table, th, td { border: 1px solid black;}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
72
Q

If you want to display table borders without inner margins between the table rows and cells, how would you achieve this best?

A

table, th, td { border-collapse: collapse;}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
73
Q

Cell padding specifies the space between the … and … The default is displayed … padding.

A

cell content, its borders, without

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
74
Q

How do you set a cell padding of 5 pixel?

A

th, td { padding: 5px;}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
75
Q

By default, all major browsers display table headings as … and …Which CSS property helps you to left-align the table headings?

A

bold, centered.th { text-align: left;}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
76
Q

To increase the space between cells of a table, you can use the following property…

A

table { border-spacing: 5px;}-does not work, if you used border collapse as well

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
77
Q

If you have a table with 3 headlines (3 columns) and if you wanted to merge headline 1 and 2 to span two columns, how would you do it?

A

< tr > < th colspan=”2” >Name< / th > < th >Age< / th >< / tr >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
78
Q

If you want a table cell to span 2 rows, how would you do it?

A

< tr > < th rowspan=”2” >Animals:< / th > < td >Tiger< / td >< / tr >< tr > < td >Rhinoceros< / td >< / tr >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
79
Q

How do you specify an overall headline for your table?

A

< caption >Title of Table< / caption > -the caption tag follows immidiately after the table tag

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
80
Q

If you use internal style sheets to format your table, consider that all tables in a document will be formatted the same way. To style a table individually, use the following…

A

table#IndivBunnyTable { width: 100%; background-color: blue;}< table id=”IndivBunnyTable” >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
81
Q

Using style sheets, how could you achieve an alternating background colour pattern (every other row is light gray) for your table.

A

table#01 tr:nth-child(even) { background-color: #eee;}table#01 tr:nth-child(odd) { background-color: #fff;}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
82
Q

How can you apply a specific type of formatting to a group of one or more columns, instead of repeating the styles for each cell, for each row? (4)

A

~use the < colgroup > element-it mirrors the table, but only its columns: < colgroup >< col >< col >..< / colgroup >-< col > is an empty element-must be located after < table > and < caption >, but before all others

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
83
Q

Write up a simple colgroup for a table with 3 columns, the second and the third column are both green.

A

< colgroup > < col > < col span=”2” style=”background- color:green >< / colgroup > -Note: You have to declare only one of the spanned columns

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
84
Q

< thead > is used to …

A

…group header content in a table.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
85
Q

< tbody > is used to …

A

…group body content in a table.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
86
Q

< tfoot > is used to …

A

…group footer content in a table.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
87
Q

What are the benefits of using < tbody >, < thead > or < tfoot > in a table? (4)

A

-used to group and structure content in a table-those 3 elements can then be formatted using style sheets-you could e.g. enable scrolling only for the body section of a table-when printing large tables across multiple pages, header and footer can be print

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
88
Q

How do you use thead, tbody and tfoot? (3)

A

~the elements should frame the rows and tabledata they are supposed to encompass-thead comes after table, caption and colgroup elements, but before all other-tfoot comes after table, caption, colgroup, thead, but before tbody

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
89
Q

What types of HTML lists exist?

A

~unordered lists-ordered lists-description lists

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
90
Q

Make an unordered list with the items of coffee, chocolate and milkshake.

A

< ul > < li >Coffee< / li > < li >Chocolate< / li > < li >Milkshake< / li >< / ul >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
91
Q

How do you change the bullet type of an unordered list? What types of bullets exist?

A

< ul style=”list-style-type:circle” >-disc, circle, square, none

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
92
Q

Which bullet type is used as default in an unordered list?

A

~round bullet / disc

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
93
Q

Make an ordered list with the items of cinnamon, blue cheese and mango.

A

< ol > < li >Cinnamon< / li > < li >Blue cheese< / li > < li >Mango< / li >< / ol >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
94
Q

You use … to format the marker of an ordered list and … to format the bullets of an unordered list.

A

the HTML type attributestyle sheets

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
95
Q

How do you change the marker type of an ordered list? What types of markers exist?

A

< ol type=”A” >< / ol > 1 (numbers, default), A (uppercase letters), a (lowercase letters), I (uppercase Roman numbers) and i (lowercase Roman numbers)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
96
Q

A HTML description list is …

A

… a special type of structured list, where a term is introduced and its description follows in the next line with indentation.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
97
Q

Make a HTML description list with the followering content:national colours - green and yellowAborigines - longest continuing culture on Earth

A

< dl > < dt >national colours< / dt > < dd >- green and yellow< / dd > < dt >Aborigines< / dt > < dd >- longest continuing culture on Earth< / dd >< / dl >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
98
Q

Tweak the following code so the list becomes displayed horizontally.< ul > < li >mermaid< / li > < li >unicorn< / li > < li >harpye< / li >< / ul >

A

ul#fantasy li { display:inline;}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
99
Q

Most HTML elements are divided into … and … elements. The former will be automatically formatted with a linebreak before and after it, the latter has no inherent formatting. Both are like containers: … for text, … for other elements.

A

block levelinlineinline elementsblock level elements

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
100
Q

Which ones of these are block level elements?a) < p >b) < a >c) < b >d) < div >e) < blockquote >

A

a), d) and e)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
101
Q

Which ones of these are inline elements?a) < img >b) < ul >c) < span >d) < h2 >e) < td >

A

a), c) and e)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
102
Q

Style the background of the following text black, the text colour white.< h2 >London< / h2 >< p >London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.< / p >

A

< div style=”background-color: black; color: white; margin: 20px; padding: 20px;” >< / div >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
103
Q

Colour the background of “long tusks” blue. The gigantic mammoth has long tusks.

A

The gigantic mammoth has < span style=”background-colour: red;” >long tusks< / span >.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
104
Q

Classing HTML elements means…

A

…grouping elements by the attribute class to assign similar formatting to the whole group.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
105
Q

Assign a class to the following text and change it’s background colour to orange.My Neighbour TotoroTotoro are basically 3 fantasy animals, that look like a mix of a cat and a tanuki. There is a large one, a medium-sized one and a tiny white one.

A

.totoro { background-color:orange;} < div class=”totoro” >< h2 >My Neighbour Totoro< / h2 >< p >Totoro are basically 3 fantasy animals, that look like…< / p >< / div >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
106
Q

Use a class attribute to style all instances of the word “red” occurring in the text red.During WWI thousands of soldiers died on the battlefields of Flanders. Strikingly, a sea of red poppies grew across the burial grounds. That is why the red poppy became the symbol of Armistice Day.

A

span.red {color:red;}During WWI thousands of soldiers died on the battlefields of Flanders. Strikingly, a sea of < span class=”red” >red< / span > poppies grew across the burial grounds. That is why the < span class=”red” >red< / span > poppy became the symbol of Armistice Day.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
107
Q

Could you use the table element to design a layout?

A

You could and many developers have done so, because table elements can be easily styled through CSS. But remember < table > was not designed for that purpose, use < div > instead.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
108
Q

HTML5 has 8 new elements, especially invented to make designing layouts easier. What are they?

A

header - nav - footer - section - article - aside - details - summary

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
109
Q

What does the < header > element stand for? (3)

A

~defines a header for a document or a section-usually reserved for the logo, banner, heading elements, etc.-new in HTML5, all latest browsers

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
110
Q

What does the < nav > element stand for? (4)

A

-defines a container for navigation links-reserved for the navigation bar alone-in the past, it was a column to the left, nowadays, it’s often a horizontal bar below the banner-new in HTML5, all latest browsers

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
111
Q

What does the < section > element stand for? (4)

A

~defines a section in a document-nowadays, pages are often complex: this would be reserved for structuring content into sections, chapters, headers, footers, etc.-on a simple traditional website it wud be the main body content of the page-new in HTML5, all latest browsers

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
112
Q

What does the < article > element stand for? (3)

A

~defines an independent self-contained article, independent from rest of page -its the container of a self-contained topic on the same page: a forum post, a blog post, a news story or a comment-new in HTML5, all latest browsers

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
113
Q

What does the < aside > element stand for? (4)

A

~defines content aside from the content it is placed in-could be a sidebar or further information about an article, etc.-must always be related to the surrounding content-new in HTML5, all latest browsers

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
114
Q

What does the < footer > element stand for? (3)

A

-defines a footer for a document or a section-very commonly it’s a bar right across the bottom of the page with authorship, copyright and contact information, sitemap, back to top links, related documents, etc.-new in HTML5, all the later version browser

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
115
Q

What does the < details > element stand for? (5)

A

~latest, not supported by IE or Firefox-additional details the user can hide on demand-interactive widget the user can open or close-by default its closed-comes with a simple open attribute

116
Q

How can you use CSS to display or not display the contents of the details tag in HTML5 (without using the attribute open)?

A

details { display:block;}

117
Q

What does the < summary > element stand for? (4)

A

-defines visible heading for details element-element can be clicked to view/hide details-is first child of details element-only supported in latest versions of chrome, safari and opera!

118
Q

What is RWD? (3)

A

Responsive Web Design-create web sites which adjust & align themselves according to what media tool you use for viewing them-a must for tablets and mobile devices

119
Q

What is Bootstrap? (3)

A

~most popular CSS framework for RWD-helps develop sites that look nice at any size: screen, laptop, tablet or phone-free collection of tools available at GitHub

120
Q

When and how was Bootstrap invented?

A

-invented by Mark Otto & Jacob Thornton at Twitter as a framework to encourage consistency across internal tools-released as open source product in Aug 2011 at GitHub

121
Q

Why use Bootstrap? (4)

A

1) Mobile-first approach2) Browser-support: all popular browsers3) RWD: adjusts to desktops, tablets, etc.4) Ease of use: only need to know HTML & CSS

122
Q

What does Bootstrap include? (5)

A

~scaffolding: layout, grid system, fluid gridsystem, RWD-base CSS: classes for forms, etc.-components: icons, dropdowns, etc.-JS plugins: custom jQuery plugins-customisable components

123
Q

What are HTML forms mainly used for?

A

~to pass data to a server

124
Q

What kind of input elements can HTML forms contain? (9)

A

~text fields-text area-radio-buttons-submit buttons-select lists-checkboxes-legend-label elements-fieldset

125
Q

Create a simple text fields for your user to enter his or her first name.

A

< form >First name: < br / >< input type=”text” name=”firstname” >< / form >

126
Q

What is an iframe?

A

~used to display a web page within a web page

127
Q

What is the basic syntax of an iframe? (3)

A

< iframe src=”mypage.htm” width=”400” height=”300” >< / iframe >-width & height specifies the size of the display-can also be specified in percent

128
Q

By default an iframe is displayed with borders and scrollbar, how can you remove them?

A

with the attribute frameborder=”0”

129
Q

Use an iframe as the target frame for a link to WoofDogSite.

A

< iframe src=”iframe.htm” name=”iframe1” >< / iframe >< p >< a href=”http://www.woof.de” target=”iframe1” >WoofDogSite< / a >< / p >

130
Q

How many written colours are supported by all browser for HTML and CSS?

A

140(17 from HTML, 123 from CSS)

131
Q

List the 17 colours from HTML.

A

aqua, blue, navy, tealgreen, lime, olivered, fuchsia, purple, maroonblack, white, gray, silverorange, yellow

132
Q

What is the hexadecimal code for black?

A

000000

133
Q

What is the hexadecimal code for white?

A

FFFFFF

134
Q

What is the hexadecimal code for yellow?

A

FFFF00

135
Q

Colours are displayed on digital devices combining…

A

…red (R), green (G) and blue (B), RGB, light.

136
Q

Explain how colours are used in HTML / CSS. (5)

A

-colours are defined using a hexadecimal (hex) notation for the light of Red, Green, and Blue values (RGB)-lowest value for each light source is 0 (hex 00), highest is 255 (hex FF)-hex values are written as # followed by either three or six hex characters

137
Q

How many different colours can be displayed in RGB?

A

-16 million different colours (256 x 256 x 256)

138
Q

Most modern monitors are capable of displaying at least … different colours.

A

16384

139
Q

Which tag shows a message in case JavaScript code cannot be displayed by the user’s browser?

A

< noscript >Sorry, your browser does not support JavaScript!< / noscript >

140
Q

What are the 3 functions the title element provides?

A

~displays a title for the page in search engine results-defines a title in the browser toolbar-provides a title for the page when it is added to favorites

141
Q

What does the base element do? Give an example for a base element declaration.

A

~specifies the base URL/target for all relative URLs in a page< base href=”http://www.mausi.de/images/” target=”_blank” >

142
Q

What is the main function of the style element?

A

~is used to specify how HTML elements should render in a browser

143
Q

What are meta tags for? (4)

A

~to provide data information about data-metadata will not be displayed on the page, but will be machine parsable-used to specify page description, keywords, author of the document, last modified, etc.-metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services

144
Q

Declare likely search engine keywords in a meta tag for a website which sells cupcakes.

A

< meta name=”keywords” content=”cupcakes, cakes, baking, pastry, chocolate” >

145
Q

Declare a meta description for the web page of a no-kill shelter.”Rescuing dogs and cats from pounds in NSW”

A

< meta name=”description” content=”Rescuing dogs and cats from pounds in NSW” >

146
Q

In a meta tag, define the author of a web page as Arnold Schwarzenegger.

A

< meta name=”author” content=”Arnold Schwarzenegger” >

147
Q

Give the meta tag to refresh a web page every 30 seconds.

A

< meta http-equiv=”refresh” content=”30” >

148
Q

The script tag is used to…

A

…define a client-side JavaScript.

149
Q

Write the code for the following simple JavaScript program:On click of a button (“Click here”), a paragraph of text (“A Paragraph”) changes into the message, “Hello Gonzo!”.

A

< script >function myFunction() { document.getElementById(“demo”).innerHTML = “Hello Gonzo!”;}< / script >< p id=”demo” >A Paragraph< / p >< button type=”button” onclick=”myFunction()” >Click here< / button >

150
Q

What are character entities? (3)

A

~some characters are reserved for tags, e.g. greater than.-to use them for another purpose on your web page, you must use the corresponding character entity - also if you want to display a character that is not on your keyboard

151
Q

What do character entities look like?

A

&entity_name; OR entity_number; E.g. to display a less than sign, you would use < or <(not all browsers support entity names, but all support entity numbers)

152
Q

Remember, using more than one space in a sequence will get those in excess truncated. To avoid that, you have to use … or the character entity name … or the character entity number …

A

pre-formatting for non-breaking space

153
Q

Give the character entities for the copyright sign.

A

© OR ©

154
Q

Diacritical marks are … added to a letter. An example are … Glyphs can also be displayed using …

A

glyphsaccentscharacter entities

155
Q

A HTML symbol entity can be displayed using…

A

…entity names, a hexadecimal entity number or a decimal entity number.e.g. for the EURO symbol€€€

156
Q

What kind of symbols can be displayed using entity numbers or names? (4)

A

NAME?

157
Q

When using entity numbers or names can every symbol be displayed in every browser?

A

No, disregarding the way used to display the symbol, some symbols are not supported by some browsers (e.g. Firefox support is quite limited).

158
Q

What is a character encoding standard or character set?

A

~it defines the characters that can be displayed on the web page-e.g. ASCII

159
Q

What character sets exist?

A

-ASCII-ANSI (Windows-1252)-ISO-8859-1-UTF-8 (Unicode)

160
Q

What is ASCII? (3)

A

-first character encoding standard-defines 127 different alphanumeric characters that could be used on the internet-supported numbers (0-9), English letters (A-Z), and some special characters

161
Q

What is ANSI (Windows-1252)? (3)

A

-the original Windows character set-supported 256 different character codes -it is virtually identical to ISO-8859-1, but has a few extra characters

162
Q

What is UTF-8 (Unicode)?

A

~covers almost all of the characters and symbols in the world-default for HTML5, but HTML4 can read it, too

163
Q

What is ISO-8859-1?

A

~default character set for HTML4-also - like ANSI - supported 256 different character codes-if a browser detects ISO, it will default to ANSI

164
Q

How is UTF-8 declared in HTML5?

A

< meta charset=”UTF-8” >

165
Q

How is ISO-8859-1 declared in HTML4?

A

< meta http-equiv=”Content-Type” content=”text/html;charset=ISO-8859-1” >

166
Q

What does URL stand for?

A

Uniform Resource Locator

167
Q

A URL can be composed of … (www.blob.de) or an … (…) address (192.68.20.50). When you click on a link in an HTML page, an underlying … tag points to an … on the web.

A

wordsInternet Protocol (IP)< a >address

168
Q

What syntax rules does a web address follow?

A

scheme://host.domain:port/path/filename

169
Q

Describe scheme://host.domain:port/path/filename. (6)

A

-scheme: defines the type of Internet service (most common is http)-host: defines the domain host (default host for http is www)-domain: defines the Internet domain name-port: defines the port number at the host (default for http is 80)-path: defines a pa

170
Q

What type of URL schemes exist?

A

http - https - ftp - file

171
Q

What does http stand for?

A

HyperText Transfer Protocol

172
Q

What does https stand for?

A

Secure HyperText Transfer Protocol

173
Q

What does ftp stand for?

A

File Transfer Protocol

174
Q

URLs can only be sent over the Internet using the … character set. … converts characters into a format that can be transmitted over the Internet. It replaces non … characters with a “…” followed by … digits. URLs cannot contain …! … normally replaces a … with a plus (+) sign, or …

A

ASCIIURL encodingASCII%hexadecimalspacesURL encodingspace%20

175
Q

What is XHTML essentially?

A

It is HTML written as XML.

176
Q

What does XHTML stand for?

A

EXtensible HyperText Markup Language

177
Q

What are the basic properties of XHTML? (4)

A

~almost identical to HTML-stricter than HTML=HTML defined as an XML application-supported by all major browsers

178
Q

Why was XHTML invented?

A

A lot of web pages contain bad HTML coding (wrong nesting, unclosed tags, etc.). Some browser might still be able to interpret these pages, others not. However, especially the new compact mobile devices require strong validation to display content correctly.

179
Q

What are the most important differences XHTML has from HTML in terms of document structure? (3)

A

~must have an XHTML DOCTYPE declaration-< html >, < head >, < title >, and < body > are mandatory-he xmlns attribute in < html > must specify the xml namespace for the document

180
Q

Give the doctype declaration for XHTML.

A

< ! DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd” >

181
Q

Declare the xmlns attribute for XHTML.

A

< html xmlns=”http://www.w3.org/1999/xhtml” >

182
Q

What are the most important differences between XHTML elements and HTML elements? (4)

A

~must be properly nested-must always be closed, including empty elements (e.g. < hr / >)-XHTML elements must always be in lower case-XHTML documents must have one root element –>

183
Q

What are the most important differences between XHTML attributes and HTML attributes? (3)

A

~attribute names must be in lower case-attribute values must always be quoted (e.g. width=”100%”)-attribute minimisation is forbidden / attributes must come in name-value pairs (e.g. < input disabled=”disabled” > instead of < input disabled >)

184
Q

You can validate your XHTML documents with the …

A

W3C Validator

185
Q

What does a radio button do?

A

Lets you select one among a limited number of choices.

186
Q

Draw up a simple radio button with the choices dog or cat.

A

< form >< input type=”radio” name=”pet” value=”dog” checked=”checked” >Dog< br / >< input type=”radio” name=”pet” value=”cat” >Cat< / form >

187
Q

For a radio button, what does the checked attribute do?

A

~choose which choice is selected by default-is an attributed that can be minimised

188
Q

How does a submit button work and what is a form-handler? (3)

A

-if clicked submits a form to a form-handler-form-handler is typically a server page with a script for processing input data-form-handler is specified in the form’s action attribute

189
Q

Create a simple form for the user to enter his/her state with a submit button and a form-handler.

A

< form action=”action_page.php” >State:< br / >< input type=”text” name=”state” value=”NT” >< br / >< br / >< input type=”submit” value=”Submit” >< / form >

190
Q

What does a form-handler action attribute do? (3)

A

~defines the action to be performed when the form is submitted-normally, the form is submitted to a web page on a web server-if action attribute is omitted, action is set to the current page

191
Q

What does a form-handler method attribute do?

A

-specifies the HTTP method (GET or POST) to be used when submitting forms-has 2 possible values - GET and POST

192
Q

When should you use the GET value for the method attribute of a form-handler? (3)

A

~best suited to short amounts of data-when there is not sensitive information (will be visible in page address)-if form submission is passive (like a search engine query)

193
Q

When should you use the POST value for the method attribute of a form-handler?

A

~if form is updating data, or includes sensitive information (password)-submitted data is not visible in the page address

194
Q

For the submission of a form to a server to be carried out, at all, apart from the handler, what syntax item needs to be there?

A

Every input item must have a name attribute. Without it, the item will be left out of the submission.

195
Q

What does the < fieldset > form element do? (3)

A

~as a structural element, fieldset groups related data in a form-should encompass the form data it is to group-visually, combined with legend, it creates a nice border + headline for a form

196
Q

What does the < legend > form element do?

A

It is the alter ego of the caption or the summary element in terms of being the first child of its parent element, fieldset, and forming its structural headline.

197
Q

List all 8 form attributes that exist.

A

~accept-charset-action-autocomplete-enctype-method-name -novalidate-target

198
Q

What is the form attribute accept-charset for?

A

~specifies the charset used in the submitted form, if it is to differ from the character set of the original page

199
Q

What is the form attribute enctype for?

A

~specifies the encoding of the submitted data, if it is to differ from the encoding of the current page

200
Q

What is the form attribute novalidate for?

A

~specifies that the browser should not validate the form-its a minimised attribute

201
Q

What are the default values for the form attributes (excluding novalidate and name)?

A

-accept-charset: the page charset-action: the submitting page-autocomplete: on - browser auto completes form-enctype: is url-encoded-method: GET - insensitive data submission-target: “_self” - open in current page / frame

202
Q

What are possible values for the following form attributes:accept-charset,autocomplete,enctype,method,novalidate, and target

A

-accept-charset: UFT-8, ISO-8859-1, ASCII, ANSI-autocomplete: on or off-enctype: application/x-www-form-urlencoded-method: GET or POST-novalidate: novalidate-target: _blank, _self, _parent, _top, framename

203
Q

Create a simple drop-down list with 3 car brands as choice.

A

< form action=”action_page.php” >< select name=”cars” >< option value=”volvo” >Volvo< / option >< option value=”bmw” >BMW< / option >< option value=”vw” >Volkswagen< / option >< / select >< br / >< br / >< input type=”submit” >< / form >

204
Q

How can you preselect one of the items of your drop-down list?

A

The minimised attribute “selected” could be added to the desired option element.

205
Q

Create a text area with size 30 x 10 and the pre-written sentence “The dog was playing with the cat in the garden.”

A

< form action=”action_page.php” >< textarea name=”message” rows=”10” cols=”30” >The dog was playing with the cat in the garden.< / textarea >< br / >< br / >< input type=”submit” >< / form >

206
Q

Create a button which if clicked opens a message box with the message “Hello World!”

A

< button type=”button” onclick=”alert(‘Hello World!’)” >Click Me!< / button >

207
Q

Which function does the < label > element have in a form?

A

In a radio button list, if you have labels properly declared, the user can also click the word (label) to select a choice, not only the radio button directly.

208
Q

Create a simple radio button list with two choices and properly declared labels.

A

< form action=”demo_form.asp” > < label for=”python” >Python< / label > < input type=”radio” name=”Language” id=”python” value=”python” >< br / > < label for=”ruby” >Ruby< / label > < input type=”radio” name=”Language” id=”ruby” value=”ruby” >< br / >< br / > < input type=”submit” value=”Submit” >< / form >

209
Q

If you have a longer drop-down list, you can group related content using the … element.

A

< optgroup >

210
Q

Create a simple 4 items select list (Suzuki, Toyota, Mercedes, Audi), including 2 categories (Japanese and German cars).

A

< select > < optgroup label=”Japanese Cars” > < option value=”suzuki” >Suzuki< / option > < option value=”toyota” >Toyota< / option > < / optgroup > < optgroup label=”German Cars” > < option value=”mercedes” >Mercedes< / option > < option value=”audi” >Audi< / option > < / optgroup >< / select >

211
Q

Create a password field.

A

< form >User password:< br / >< input type=”password” name=”psw” >< / form >

212
Q

How do you create a submit button to send your form data to your form-handle page?

A

< input type=”submit” value=”Submit” >-if you forget the value attribute, the button will have the default text “submit query”

213
Q

Create two checkboxes with the following values…I am employedI am an entrepreneur(without handler and submission)

A

< form >< input type=”checkbox” name=”occupation” value=”Employed” >I am employed< br / >< input type=”checkbox” name=”occupation” value=”Entrepreneur” >I am an entrepreneur< / form >

214
Q

Which new form input types did HTML5 add? (13)

A

colordate - datetime - datetime-localemail - telmonth - week - timenumber - rangesearch - url

215
Q

What happens if a new input type introduced since HTML5 is not supported by your user’s browser?

A

They will be read as input type=”text”.

216
Q

What is the function of the input type=”date” value and how is it supported? (5)

A

~specifies a field where you can enter a date-on entering you will GET a date picker, drop-down or wheel menu, where you can choose the date-new in HTML5-not supported by Mozilla & Internet Explorer-you can add restrictions like max or min, but they are even more sparsely supported

217
Q

Create a date form field with restrictions of minimum age 1/01/1930 and maximum age today. Leave out handler and submission.

A

Birthday:< br / >< input type=”date” name=”bday” max=”2014-11-23” min=”1930-01-01” >

218
Q

What is the function of the input type=”color” value and how is it supported? (4)

A

-is used for input fields that should contain a color-comes with a colour picker if supported-new in HTML5-not supported by IE & Safari (Picker won’t show up)

219
Q

Create a colour input field for a form (no handler or submission).

A

Select your favorite colour:< input type=”color” name=”favcolor” value=”#ff0000” >

220
Q

What is the function of the input type=”range” value and how is it supported? (4)

A

-is used for input fields that should contain a value within a range-input field can be displayed as a slider control-new in HTML5-not supported by IE 9 and earlier & Firefox older versions (slider won’t show up)

221
Q

Create a range input field for a form with values ranging from 0 to 10 (no handler or submission).

A

Points:< input type=”range” name=”points” min=”0” max=”10” >

222
Q

What is the form input type “month” for and how well supported is it? (3)

A

-allows the user to select a month and year-new in HTML5-not supported by IE & Firefox (month picker won’t show up)

223
Q

Create a month input field for a form (no handler or submission).

A

Birthday (month and year):< input type=”month” name=”bdaymonth” >

224
Q

What is the form input type “week” for and how well supported is it? (3)

A

-allows the user to select a week and year-new in HTML5-not supported by IE & Firefox (week picker won’t show up) & Safari has issues

225
Q

Create a week input field for a form (no handler or submission).

A

Select a week:< input type=”week” name=”year_week” >

226
Q

What is the form input type “time” for and how well supported is it? (3)

A

-allows the user to select a time (no time zone)-new in HTML5-not supported by IE & Firefox (time picker won’t show up)

227
Q

Create a time input field for a form (no handler or submission).

A

Select a time:< input type=”time” name=”usr_time” >

228
Q

What is the difference between the form input type “datetime” and “datetime-local”?

A

Both allow the user to select a date and time, but “datetime” also allows the selection of a time zone.

229
Q

Write 2 input fields, one for “datetime” and one for “datetime-local”.

A

Birthday (date and time):< input type=”datetime” name=”bdaytime” >< input type=”datetime-local” name=”bdaytime” >

230
Q

How well supported are input type “datetime-local” and “datetime”? (3)

A

-datetime is not supported by Firefox, IE and Chrome; Safari has issues-datetime-local is not supported by Firefox and IE-new in HTML5

231
Q

What is the form input type “email” for and how well supported is it? (4)

A

-is used for input fields that should contain an e-mail address-depending on browser support, the e-mail address can be automatically validated when submitted-some smartphones recognise the email type, and adds “.com” to the keyboard to match email input-

232
Q

Create an email input field for a form (no handler or submission).

A

E-mail:< input type=”email” name=”email” >

233
Q

What is the form input type “tel” for and how well supported is it? (3)

A

-is used for input fields that should contain a telephone number-currently supported only in Safari 8-once you try typing, it will show the telephone keyboard

234
Q

Create a telephone input field for a form (no handler or submission).

A

Telephone:< input type=”tel” name=”usrtel” >

235
Q

What is the function of the input type=”url” value and how is it supported? (4)

A

-is used for input fields that should contain a URL address-depending on browser support, the url field can be automatically validated when submitted-some smartphones recognise the url type, and adds “.com” to the keyboard to match url input-not supported

236
Q

Create a url input field for a form (no handler or submission).

A

Add your homepage:< input type=”url” name=”homepage” >

237
Q

Write a search Google input field for a form (no handler or submission).

A

Search Google:< input type=”search” name=”googlesearch” >

238
Q

What is the search input field used for and how well is it supported? (3)

A

~is used for search fields-a search field behaves like a regular text field-new in HTML5 and not supported in all browsers but chrome & safari

239
Q

Name input restriction attributes that are new in HTML5? (5)

A

max - min - pattern - required - step

240
Q

Explain < input type=”number” name=”points” min=”0” max=”100” step=”10” value=”30” >.

A

Type/number: number fieldName/points: title of the fieldMin/0: the minimum value for the field is 0Max/100: the maximum value for the field is 100Step/10: you can enter numbers in steps of 10Value/30: the default value for the input field

241
Q

What does the required input restriction attribute do?

A

~specifies that an input field is required (must be filled out)

242
Q

What does the pattern input restriction attribute do?

A

~specifies a regular expression to check the input value against

243
Q

What other input restrictions exist besides the new ones from HTML5 and name and value? And what do they do? (4)

A

disabled: input field should be disabledmaxlength: maximum number of characters for an input fieldreadonly: input field is read only (cannot be changed)size: width (in characters) of an input field

244
Q

What is the purpose of the input value attribute?

A

~specifies the initial value for an input field-e.g. you could write a default message in a text field, which would give the user an example / help how to fill out the text field correctly

245
Q

What is the purpose of the input readonly attribute?

A

the input field is read only (cannot be changed)

246
Q

What is the purpose of the input disabled attribute? (4)

A

~specifies that the input field is disabled-a disabled element is un-usable and un-clickable-disabled elements will not be submitted-minimised attribute

247
Q

What is the purpose of the input size attribute?

A

~specifies the size (in characters) for the input field

248
Q

What is the purpose of the input maxlength attribute? (4)

A

~the maximum allowed length for the input field-input control will not accept more than the allowed number of characters-does not provide any feedback: if you want to alert the user, you must write JS code-JS provides many ways to add illegal input:(to) safely restrict input, restrictions must be checked by the receiver (the server) as well

249
Q

Which ATTRIBUTES did HTML5 add for the input element? (18)

A

~autocomplete - autofocus-height - width-form - formaction - formenctype - formmethod - formnovalidate - formtarget-min - max - step - required - pattern-multiple-placeholder-list

250
Q

What is the purpose of the input autofocus attribute? (3)

A

~an input element is automatically given focus when the page loads-minimised attribute-not supported in IE9 and earlier

251
Q

A field outside a form can still be made part of a certain form using the …

A

…input form attribute.

252
Q

Show how you can make the external input field, Last Name, part of the form “Melonz1”.

A

< form action=”action_page.php” id=”Melonz1” >First Name: < input type=”text” name=”fname” >< br / >< input type=”submit” value=”Submit” >< / form >Last name: < input type=”text” name=”lname” form=”Melonz1” >

253
Q

What is the input formaction attribute for? (3)

A

~specifies the URL of a file that will process the input control when the form is submitted-overrides the action attribute of the < form > element-is used with type=”submit” and type=”image”

254
Q

The formenctype attribute specifies how the … should be … when submitting it to the server (only for forms with …). The formenctype attribute … the enctype attribute of the form element.

A

form-data encodedmethod=”post”overrides

255
Q

The formnovalidate specifies that the … should not be validated when submitted. So using it, you could specify that specific input should not be validated, whereas … or … should be validated. This is the case because the formnovalidate attribute … the novalidate attribute of the form element. However, the formnovalidate attribute can only be used with …

A

input element other inputthe rest of the formoverridestype=”submit”

256
Q

What is the input formmethod attribute used for? (3)

A

-defines the HTTP method for sending specific form-data to the action URL-overrides the method attribute of the form element-can be used with type=”submit” and type=”image”

257
Q

What does the input formtarget attribute do? (3)

A

-specifies a name or a keyword that indicates where to display the response that is received after submitting the form-overrides the target attribute of the form element-can be used with type=”submit” and type=”image”

258
Q

Create a button submitting date to a new window.

A

< input type=”submit” formtarget=”_blank” value=”Submit to a new window” >

259
Q

What does the input multiple attribute do? (3)

A

~specifies that the user is allowed to enter more than one value in the input element-works with the following input types: email, and file-not supported in IE9 and earlier

260
Q

Create a file upload that accepts multiple files.

A

< form action=”action_page.php” > Select images: < input type=”file” name=”img” multiple > < input type=”submit” >< / form >

261
Q

Create an input field that can contain only three letters (no numbers or special characters).

A

< form action=”action_page.php” > Country code: < input type=”text” name=”country_code” pattern=”[A-Za-z]{3}” title=”Three letter country code” > < input type=”submit” >< / form >

262
Q

What is the input pattern attribute for? How can you help the user? How is it supported? (4)

A

-specifies a regular expression that the input element’s value is checked against -you can use it to establish input restrictions-use the global title attribute to describe the pattern to help the user-not supported in IE9 below and Safari

263
Q

Which input types can the pattern attribute restrict? (6)

A

text - search - url - tel - email - password

264
Q

The placeholder attribute specifies a … that describes the … value of an input field (a sample value or a short description of the format).

A

hintexpected

265
Q

With which input types can the placeholder attribute interact? (6)

A

text - search - url - tel - email - password.

266
Q

Create 2 textfields that ask for your first and your second pet with placeholders.

A

< form action=”action_page.php” > < input type=”text” name=”pet1” placeholder=”First pet” >< br / > < input type=”text” name=”pet2” placeholder=”Last pet” >< br / > < input type=”submit” value=”Submit” >< / form > –>

267
Q

The input required attribute … a user to fill out the input field, else the form …

A

compelscannot be submitted

268
Q

Create a text input field for donations with an alternative submit button picture.

A

< form >I want to donate: < input type=”number” name=”don_amt” / >$< br / >< input type=”image” src=”button.gif” alt=”Submit” width=”48” height=”48”/ >< / form >

269
Q

What is special about the input type=”image” in combination with a button?

A

~upon submission, the exact coordinates (x and y) of where the user clicked on the picture will be submitted, too

270
Q

What will happen if you do not specify the size (height and width) of an image?

A

If the browser does not know the size, the page will flicker while images load.

271
Q

What is an API?

A

an Application Programming Interface

272
Q

List the most interesting new HTML5 categories/elements? (4)

A

~semantic elements, e.g. < section >-form controls, e.g. range-graphic elements: < svg > & < canvas >-multimedia elements: < audio > & < video >

273
Q

List the most important new HTML5 API’s? (6)

A

~HTML Geolocation-HTML Drag and drop-HTML Local Storage-HTML application Cache-HTML web Workers-HTML SSE

274
Q

HTML5 Local Storage is a powerful replacement for …

A

… cookies.

275
Q

List the 6 HTML 4.01 elements that have been removed in HTML5 to be replaced by CSS.

A

< basefont > < big > < center > < font > < strike > < tt >

276
Q

List the 3 HTML 4.01 elements that have been replaced by new HTML5 elements.

A

< applet > to < object >< dir > to < ul >< acronym > to < abbr >

277
Q

List the 3 HTML 4.01 elements that have been removed without replacement in HTML5.

A

< frame > < frameset > < noframes >

278
Q

What does the following statement mean?display:block

A

~convert the element to a block-level element-block-level means with a linebreak before and after

279
Q

If an old browser finds an unrecognised HTML5 element, what will it do with it?

A

~display it as inline element

280
Q

Redefine header, footer and section of HTML5 as block-level elements, so older browsers don’t treat them as inlines.

A

header, footer, section { display:block}

281
Q
A

< script >document.createElement(“mouse”)< / script >< style >mouse { display:block; padding:50px; background-color:#000;}< mouse >Hello, Mouse!< / mouse >

282
Q

What is the Shiv Solution?

A

-a “HTML5 Enabling JavaScript” developed by Sjoerd Visscher to enable IE8 and earlier versions to allow styling of new HTML elements

283
Q

Give the statement you have to add to your head element to enable “the shiv” for older IE browsers.

A

[if lt IE 9] > < script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js” >< / script >< ! [endif]

284
Q

What are the properties of block-level elements?

A

is 100% of the width of its parent element as tall as its content each element will appear on a new line, separated by the margin set on them

285
Q

What are the properties of inline elements?

A

are as tall and as wide as their content can’t set width or height on inline elements — they just sit inside the content of block level elements sit on the same line with other inlines and text wrapping if there is no space on the line, inline elements flow to the next line

Cert IV Programming (7 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions