WebDesign HTML/CSS Flashcards Preview

Cert IV Programming > WebDesign HTML/CSS > Flashcards

Flashcards in WebDesign HTML/CSS Deck (285):
1

Question

Answer

2

What does HTML stand for?

Hyper Text Markup Language

3

Which doctype declaration does HTML5 use?

< !DOCTYPE html >

4

How do you declare a headline?

< h1 >...< /h1 >

sizes range from 1 to 6

5

How do you declare paragraphs in HTML?

< p >...< /p >

6

Give the hyperlink tag to a homepage Sweetheart.com.

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

  • the page will open in the current window

7

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

  • 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

8

What does the < body > element define?

  • the document body or what is actually displayed/visible on the web page

9

What does the < html > element define?

the whole document

10

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

< br / >

  • close all elements if you need stricter validation or make your document readable by XML parsers

11

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

< 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 >

12

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

< hr / >

13

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

...empty...line break

14

What is the < head > element for?

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

15

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

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

16

< pre > defines...

pre-formatted text.

17

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

...< em > ...semantic

18

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

< 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!

19

How do you format text in bold?

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

20

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

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

21

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

< 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.

22

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

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

23

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

< sub >...< / sub >

24

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

textsuitable for footmarks

25

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

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

26

In HTML, how do you format short quotes correctly?

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

27

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

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

28

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

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

29

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

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

30

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

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

31

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?

32

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

< var >x< / var >

33

What does CSS stand for?

Cascading Style Sheets

34

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

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

35

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

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

36

Why would you use inline styling for CSS?

To apply a unique styling to a single HTML element.

37

Why would you use internal styling for CSS?

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.

38

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.

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

39

"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!

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

40

Why would you use external style sheets?

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

41

What is the CSS Box Model?

~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

42

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

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

43

What does the CSS padding property do and how?

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

44

What does the CSS margin property do and how?

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

45

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

p { border:1px solid black; }

46

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?

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

47

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

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

48

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

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

49

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

-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

50

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

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

51

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

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}

52

The target attribute of a link specifies...

...where to open the linked document.

53

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

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

54

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

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

55

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

< 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

56

How do you target frames via a link?

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

57

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

-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

58

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

~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 >

59

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

~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 >

60

How do screen readers work? (3)

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

61

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

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

62

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

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

63

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

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

64

How do you access an image from an image server?

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

65

How do you create an image map?

< 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 >

66

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

~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

67

Tables are defined with the ... tag.

< table >...< / table >

68

Tables are divided into table rows with the ... tag.

< tr >...< / tr >

69

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.

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

70

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

~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

71

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

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

72

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

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

73

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

cell content, its borders, without

74

How do you set a cell padding of 5 pixel?

th, td { padding: 5px;}

75

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

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

76

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

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

77

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?

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

78

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

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

79

How do you specify an overall headline for your table?

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

80

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...

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

81

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

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

82

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)

~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

83

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

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

84

< thead > is used to …

...group header content in a table.

85

< tbody > is used to …

...group body content in a table.

86

< tfoot > is used to …

...group footer content in a table.

87

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

-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

88

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

~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

89

What types of HTML lists exist?

~unordered lists-ordered lists-description lists

90

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

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

91

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

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

92

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

~round bullet / disc

93

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

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

94

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

the HTML type attributestyle sheets

95

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

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

96

A HTML description list is ...

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

97

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

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

98

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

ul#fantasy li { display:inline;}

99

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.

block levelinlineinline elementsblock level elements

100

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

a), d) and e)

101

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

a), c) and e)

102

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 >

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

103

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

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

104

Classing HTML elements means...

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

105

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.

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

106

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.

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.

107

Could you use the table element to design a layout?

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.

108

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

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

109

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

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

110

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

-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

111

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

~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

112

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

~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

113

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

~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

114

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

-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

115

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

~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

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

details { display:block;}

117

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

-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

What is RWD? (3)

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

What is Bootstrap? (3)

~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

When and how was Bootstrap invented?

-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

Why use Bootstrap? (4)

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

What does Bootstrap include? (5)

~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

What are HTML forms mainly used for?

~to pass data to a server

124

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

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

125

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

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

126

What is an iframe?

~used to display a web page within a web page

127

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

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

128

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

with the attribute frameborder="0"

129

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

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

130

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

140(17 from HTML, 123 from CSS)

131

List the 17 colours from HTML.

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

132

What is the hexadecimal code for black?

#000000

133

What is the hexadecimal code for white?

#FFFFFF

134

What is the hexadecimal code for yellow?

#FFFF00

135

Colours are displayed on digital devices combining...

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

136

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

-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

How many different colours can be displayed in RGB?

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

138

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

16384

139

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

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

140

What are the 3 functions the title element provides?

~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

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

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

142

What is the main function of the style element?

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

143

What are meta tags for? (4)

~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

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

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

145

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

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

146

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

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

147

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

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

148

The script tag is used to...

...define a client-side JavaScript.

149

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!".

< 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

What are character entities? (3)

~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

What do character entities look like?

&entity_name; OR entity_number; E.g. to display a less than sign, you would use < or

152

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 ...

pre-formatting  for non-breaking space 

153

Give the character entities for the copyright sign.

© OR ©

154

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

glyphsaccentscharacter entities

155

A HTML symbol entity can be displayed using...

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

156

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

#NAME?

157

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

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

What is a character encoding standard or character set?

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

159

What character sets exist?

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

160

What is ASCII? (3)

-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

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

-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

What is UTF-8 (Unicode)?

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

163

What is ISO-8859-1?

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

164

How is UTF-8 declared in HTML5?

< meta charset="UTF-8" >

165

How is ISO-8859-1 declared in HTML4?

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

166

What does URL stand for?

Uniform Resource Locator

167

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.

wordsInternet Protocol (IP)< a >address

168

What syntax rules does a web address follow?

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

169

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

-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

What type of URL schemes exist?

http - https - ftp - file

171

What does http stand for?

HyperText Transfer Protocol

172

What does https stand for?

Secure HyperText Transfer Protocol

173

What does ftp stand for?

File Transfer Protocol

174

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 ...

ASCIIURL encodingASCII%hexadecimalspacesURL encodingspace%20

175

What is XHTML essentially?

It is HTML written as XML.

176

What does XHTML stand for?

EXtensible HyperText Markup Language

177

What are the basic properties of XHTML? (4)

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

178

Why was XHTML invented?

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

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

~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

Give the doctype declaration for XHTML.

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

181

Declare the xmlns attribute for XHTML.

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

182

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

~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

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

~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

You can validate your XHTML documents with the ...

W3C Validator

185

What does a radio button do?

Lets you select one among a limited number of choices.

186

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

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

187

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

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

188

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

-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

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

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

190

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

~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

What does a form-handler method attribute do?

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

192

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

~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

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

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

194

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?

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

195

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

~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

What does the < legend > form element do?

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

List all 8 form attributes that exist.

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

198

What is the form attribute accept-charset for?

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

199

What is the form attribute enctype for?

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

200

What is the form attribute novalidate for?

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

201

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

-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

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

-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

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

< 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

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

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

205

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

< 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

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

< button type="button" onclick="alert('Hello World!')" >Click Me!< / button >

207

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

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

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

< 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

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

< optgroup >

210

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

< 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

Create a password field.

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

212

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

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

213

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

< 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

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

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

215

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

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

216

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

~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

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

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

218

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

-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

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

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

220

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

-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

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

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

222

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

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

223

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

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

224

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

-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

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

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

226

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

-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

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

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

228

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

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

229

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

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

230

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

-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

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

-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

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

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

233

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

-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

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

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

235

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

-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

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

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

237

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

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

238

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

~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

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

max - min - pattern - required - step

240

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

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

What does the required input restriction attribute do?

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

242

What does the pattern input restriction attribute do?

~specifies a regular expression to check the input value against

243

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

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

What is the purpose of the input value attribute?

~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

What is the purpose of the input readonly attribute?

the input field is read only (cannot be changed)

246

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

~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

What is the purpose of the input size attribute?

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

248

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

~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

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

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

250

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

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

251

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

...input form attribute.

252

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

< 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

What is the input formaction attribute for? (3)

~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

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.

form-data encodedmethod="post"overrides

255

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 ...

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

256

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

-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

What does the input formtarget attribute do? (3)

-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

Create a button submitting date to a new window.

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

259

What does the input multiple attribute do? (3)

~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

Create a file upload that accepts multiple files.

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

261

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

< 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

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

-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

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

text - search - url - tel - email - password

264

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

hintexpected

265

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

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

266

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

< 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

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

compelscannot be submitted

268

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

< 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

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

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

270

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

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

271

What is an API?

an Application Programming Interface

272

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

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

273

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

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

274

HTML5 Local Storage is a powerful replacement for ...

... cookies.

275

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

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

276

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

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

277

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

< frame > < frameset > < noframes >

278

What does the following statement mean?display:block

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

279

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

~display it as inline element

280

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

header, footer, section { display:block}

281

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

282

What is the Shiv Solution?

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

283

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

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

284

What are the properties of block-level elements?

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

What are the properties of inline elements?

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