HTML Essential Training 3 of 3

Question 1

What is the attribute of the < a > element (anchor tag) that identifies where the user is directed when the link is clicked?

Answer 1

The target attribute

Question 2

What is the attribute of the < a > element (anchor tag) that identifies where the user is directed when the link is clicked?

Answer 2

The target attribute

Question 3

What is the purpose of the title attribute?

Answer 3

Consider it an accessibility attribute, can be read by assisted devices, screen readers and search engines. Title attribute describes the link.

Question 4

[Critical Thinking] Create the exact syntax with a document relative link to a page on a site with an appropriate title attribute.

Answer 4

< a href=”same.htm” title=”link to a page in the same directory” >same.htm< /a >

Question 5

[Critical Thinking] Create the exact syntax with a link with an absolute url to a page on another site, that pops up into a new tab or a new window.

Answer 5

< a href=”https://www.target.com/” target=”_blank” title=”link to Target.com”>Visit Target.com

Question 6

[Critical Thinking] What does the HTML download attribute do for us?

Answer 6

Download attribute forces a file, like PDF, to download rather than open in the web browser. You can also overwrite the name of the file being downloaded. Ex) Original file: tables.pdf → use download attribute: download=”desired_name” → file downloaded: desired_name.pdf

Question 7

6) When creating a link to a page region, what attribute is used to target the fragment of the page?

Answer 7

id attribute is used to target the fragment of the page.

Question 8

7) Which tag is used to designate an unordered list?

Answer 8

< ul > < /ul >

Question 9

8) [Critical Thinking] What’s the difference between an ordered list and an unordered list?

Answer 9

Ordered list have a distinct sequence to the list (1,2,3 or a,b,c) while unordered lists are bullet points or disks.

Question 10

[Critical Thinking] What is the relationship between a <dt> and a </dt><dd>?
</dd>

Answer 10

Both a <dt> and a </dt><dd> are siblings and are semantic tags. </dd><dt> means description term, while </dt><dd> means description definition. They are children of the parent <dl> tag (description list).

</dl></dd>

Question 11

10) [Critical Thinking] Which selector does the author use to target fonts on the entire page?

Answer 11

He uses the body selector. In CSS, it looks like this: body {

Question 12

11) Create the exact syntax for an HMTL comment.

Question 13

12) Which attribute do we use to apply inline styles?

Answer 13

Style attribute. Use colons to separate property: value and use semicolons to end a declaration.

Question 14

13) [Critical Thinking] Although the author shows inline styles, why does the author advocate not to use them?

Answer 14

The issue with inline styling is that the styling will only apply to the page it was written on. If you have a site with multiple pages, you would have to write the inline styling for each page. It is more efficient to have a global styling sheet so changes will be applied to all pages, saving time and effort.

Question 15

14) Write an example of an element selector.

Answer 15

p { or h1 {

Question 16

Write an example of a CSS selector that applies only to <p> tags with a class named notice?
</p>

Answer 16

p.notice {

}

Question 17

16) [Critical Thinking] Why would you declare more than one font in a font-family CSS rule?

Answer 17

Font-family declarations tell the client what type of font to render. If the client does not support the 1st font declared, the 2nd font will be rendered and so on. Additional font declaration is a fall back font for the client’s browser to render if the first font is not supported by the client’s device/ browser.

Question 18

17) [Critical Thinking] Why does the author prefer ems instead of pixels for the font-size?

Answer 18

Pixel font-sizes are absolute, font sizes will render to the size of pixel length desired. Regardless if your looking at the site on a phone or desktop, pixel size will be the same. Font size will look bigger on the phone compared to the desktop screen. ems tells the client to render the default font size. Font size will be different between each device. 2 em tells the client to render the default font size 2x bigger.

Question 19

18) [Critical Thinking] What happens when the author uses the margin property and only sets three values?

Answer 19

When only three values are used in the margin property, the first value will be the top margin value, the second value will be the right and left margin value, and the third value will be the bottom margin value. Margin shorthand values are set clockwise: margin: 0(top) 1em(right) .6em(bottom) 1em(left);

Question 20

19) [Critical Thinking] Why does the author warn about using reserved words for colors?

Answer 20

Reserved words for colors may not be consistent with all browsers. Some browsers may render the reserved word color slightly different.

Question 21

20) [Critical Thinking] What is the purpose of the rel attribute?

Answer 21

The purpose of the rel attribute is to tell the user’s browser the relationship between the current page and the link to the resource provided.

Question 22

What is the purpose of the title attribute?

Answer 22

Consider it an accessibility attribute, can be read by assisted devices, screen readers and search engines. Title attribute describes the link.

Question 23

[Critical Thinking] Create the exact syntax with a document relative link to a page on a site with an appropriate title attribute.

Answer 23

< a href=”same.htm” title=”link to a page in the same directory” >same.htm< /a >

Question 24

[Critical Thinking] Create the exact syntax with a link with an absolute url to a page on another site, that pops up into a new tab or a new window.

Answer 24

< a href=”https://www.target.com/” target=”_blank” title=”link to Target.com”>Visit Target.com

Question 25

[Critical Thinking] What does the HTML download attribute do for us?

Answer 25

Download attribute forces a file, like PDF, to download rather than open in the web browser. You can also overwrite the name of the file being downloaded. Ex) Original file: tables.pdf → use download attribute: download=”desired_name” → file downloaded: desired_name.pdf

Question 26

6) When creating a link to a page region, what attribute is used to target the fragment of the page?

Answer 26

id attribute is used to target the fragment of the page.

Question 27

7) Which tag is used to designate an unordered list?

Answer 27

< ul > < /ul >

Question 28

8) [Critical Thinking] What’s the difference between an ordered list and an unordered list?

Answer 28

Ordered list have a distinct sequence to the list (1,2,3 or a,b,c) while unordered lists are bullet points or disks.

Question 29

[Critical Thinking] What is the relationship between a <dt> and a </dt><dd>?
</dd>

Answer 29

Both a <dt> and a </dt><dd> are siblings and are semantic tags. </dd><dt> means description term, while </dt><dd> means description definition. They are children of the parent <dl> tag (description list).

</dl></dd>

Question 30

10) [Critical Thinking] Which selector does the author use to target fonts on the entire page?

Answer 30

He uses the body selector. In CSS, it looks like this: body {

Question 31

11) Create the exact syntax for an HMTL comment.

Answer 31

< !– You can write your comment or code here and code will be ignored– >

Question 32

12) Which attribute do we use to apply inline styles?

Answer 32

Style attribute. Use colons to separate property: value and use semicolons to end a declaration.

Question 33

13) [Critical Thinking] Although the author shows inline styles, why does the author advocate not to use them?

Answer 33

The issue with inline styling is that the styling will only apply to the page it was written on. If you have a site with multiple pages, you would have to write the inline styling for each page. It is more efficient to have a global styling sheet so changes will be applied to all pages, saving time and effort.

Question 34

14) Write an example of an element selector.

Answer 34

p { or h1 {

Question 35

Write an example of a CSS selector that applies only to <p> tags with a class named notice?
</p>

Answer 35

p.notice {

}

Question 36

16) [Critical Thinking] Why would you declare more than one font in a font-family CSS rule?

Answer 36

Font-family declarations tell the client what type of font to render. If the client does not support the 1st font declared, the 2nd font will be rendered and so on. Additional font declaration is a fall back font for the client’s browser to render if the first font is not supported by the client’s device/ browser.

Question 37

17) [Critical Thinking] Why does the author prefer ems instead of pixels for the font-size?

Answer 37

Pixel font-sizes are absolute, font sizes will render to the size of pixel length desired. Regardless if your looking at the site on a phone or desktop, pixel size will be the same. Font size will look bigger on the phone compared to the desktop screen. ems tells the client to render the default font size. Font size will be different between each device. 2 em tells the client to render the default font size 2x bigger.

Question 38

18) [Critical Thinking] What happens when the author uses the margin property and only sets three values?

Answer 38

When only three values are used in the margin property, the first value will be the top margin value, the second value will be the right and left margin value, and the third value will be the bottom margin value. Margin shorthand values are set clockwise: margin: 0(top) 1em(right) .6em(bottom) 1em(left);

Question 39

19) [Critical Thinking] Why does the author warn about using reserved words for colors?

Answer 39

Reserved words for colors may not be consistent with all browsers. Some browsers may render the reserved word color slightly different.

Question 40

20) [Critical Thinking] What is the purpose of the rel attribute?

Answer 40

The purpose of the rel attribute is to tell the user’s browser the relationship between the current page and the link to the resource provided.