WebDesign HTML/CSS Flashcards
(285 cards)
1
Q
Question
A
Answer
2
Q
What does HTML stand for?
A
Hyper Text Markup Language
3
Q
Which doctype declaration does HTML5 use?
A
< !DOCTYPE html >
4
Q
How do you declare a headline?
A
< h1 >…< /h1 >
sizes range from 1 to 6
5
Q
How do you declare paragraphs in HTML?
A
< p >…< /p >
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
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
8
Q
What does the < body > element define?
A
- the document body or what is actually displayed/visible on the web page
9
Q
What does the < html > element define?
A
the whole document
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
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 >
12
Q
What is the tag to create a horizontal line in HTML?
A
< hr / >
13
Q
< br / > is an … HTML element for creating a …
A
…empty…line break
14
Q
What is the < head > element for?
A
-it only contains meta data-permissible elements: < title >, < meta >, < style >, < link >, < script >, < noscript > and < base >
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 >
16
Q
< pre > defines…
A
pre-formatted text.
17
Q
The … element defines emphasised text (italics), with added … importance.
A
…< em > …semantic
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!
19
Q
How do you format text in bold?
A
< b >text< / b > bold formatting< strong >< / strong > bold formatting with added semantic importance
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
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.
22
Q
How can you show through formatting that particular text was added to a paragraph?
A
< p >< ins >Bunnies< / ins > are cute.< / p >
23
Q
How do you create a subscript in HTML such as is required for a logarithms base?
A
< sub >…< / sub >
24
Q
How can you reformat HTML to a smaller sized text with direct formatting?
A
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 \<(not all browsers support entity names, but all support entity numbers)
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
