HTML Essential Training 1 of 3

Question 1

According to the author, what are the core languages a web designer needs to learn?

Answer 1

HTML (noun),CSS (adjective) and Javascript (verb)

Question 2

[True or False] If we open a child element, we must close it before we close the parent element.

Answer 2

True

Question 3

[Critical Thinking] Since there are now 2 different HTML specifications now being implemented at the same time, what is the author’s advice regarding these standards?

Answer 3

The author suggests that a web designer should keep track of both specifications as different browsers will implement both specifications differently. He recommends starting off learning HTML 5 syntax and focus on writing clean code.

The two different HTML specifications are HTML 5 and HTML (living standard)

Question 4

What two websites does the author believe are the most useful to us as web designers and developers?

Answer 4

www. webplatform.org - Open source site for better online documentation for web authoring. It covers web development, not just HTML.
www. developer.mozilla.org - site has organized documentation in a visually digestible format. References for both the HTML elements and attributes.

Question 5

The author identifies four things that a code editor should do, at minimum. Name two of them.

Answer 5

-code formatting options
-syntax highlighting
(Bonus 2: line numbers and code support)

Question 6

[Critical Thinking] What advantages does a tool like Chrome’s WebKit inspector have for us as developers?

Answer 6

• WebKit inspector x-ray vision
• see under hood of webpage
• inspect a specific element of a webpage and the inspector will show you the code

Question 7

In the author’s view, how is an HTML tag like a sandwich?

Answer 7

To make a sandwich, you need two pieces of bread, with HTML tags you need an opening and closing HTML tag. Without the two pieces there is no sandwich.

Question 8

[Critical Thinking] What is the purpose of using a doctype declaration?

Answer 8

Using a doctype declaration tells the software (web browser) what version of HTML is going to be used. It also tells the software which syntax to use. Doctype declaration is very helpful when reading old sites, as you can use the declaration as a reference to look up which old version of html the document was written in.

Question 9

Why does the author advocate using the lang attribute inside the tag?

Answer 9

The author’s reasoning is by using the lang attribute inside the tag, the tag tells the browser what language the HTML document is based in. Useful for online translators so translators know what language the text is written in or aid screen readers so the reader knows how to enunciate the text.

Question 10

What is the purpose of setting the charset attribute in the meta tag to utf-8? (2:20)

Answer 10

The purpose of setting charset attribute to utf-8 so the proper character encoding renders on the page.

Question 11

Why does the author advocate using the name=”description” meta tag?

Answer 11

Search engines will look into the name=”description” meta tag to add to the search engine’s results, help in indexing and searching for content within your site management system.

Question 12

[Critical Thinking] What is the purpose of the tag?

Answer 12

tag tells the browser where the visible content of the page should go. Text within the body tag will render on the webpage.

Question 13

[Critical Thinking] What is the purpose of the < p > (paragraph) tag?
< /p >

Answer 13

Since the paragraph tags are within the body tags, any text within the paragraph tags will be rendered text on the website. Additional tags are required if a person wants to modify formatting of certain words within the paragraph tags.

Question 14

[Critical Thinking] What is the difference between the block level and inline level content models?

Answer 14

< p >Block level elements, like heading and paragraph tags, take a new line or block when opening a new block level tag.< /p >
< p > Inline level elements are more character specific and do not require the start of a new line. Inline tags like < b > bold < /b > or < i > italic < /i > are wrapped around content you want to look visually different.< /p >

Question 15

Of the 7 new content models, identify which one is most like inline, and give 2 examples of elements it includes.

Answer 15

Phrasing content is the most like inline.

Ex 1) < br > element is placed after a word where you want to create a new text line. Helpful when the content is a poem that require a new text block
< p > Roses are red,< br > Violets are blue,< br > I can’t sleep at night because I have the flu! < /p >
Roses are red,
Violets are blue,
I can’t sleep at night because I have the flu!

Ex 2) < sup > element uses opening and closing tag around specific characters so the characters will be formatted like a superscript. Helpful with equations.
< p >E=MC< sup >2< /sup >< /p >
E=MC2
< /sup >

Question 16

[Critical Thinking] What is the purpose of the < pre > tag?

< /pre >

Answer 16

< pre > tag stands for preformatted. The tag tells the browser to display the text in the format in which the text was formatted within the < pre > tags. If you add three spaces between words, normally the browser will only render one space between words. If there are line breaks in the text with the use of < pre > tags, you will not have to use the < br > tags. < /pre >< /pre >

Question 17

[Critical Thinking] Why use an < em > tag instead of an < i > tag when they produce the same visual appearance?< /i >< /em >

Answer 17

< em > tags help screen readers know when to emphasize a word when dictating. <i> tag only visually emphasizes words, which only makes it non-accessibility friendly.
< /i >< /em ></i>

Question 18

[Critical Thinking] Although the heading tags have default have sizes related to them, what is the purpose of using more than one type of heading tag in our documents?

Answer 18

Heading tags help indicate the level of importance and structure of our document. Heading tags work similar to an outline. < h1 > tag is used for the main heading, < h2 > is used for subheading and < h3 > is used for sections under the sub headings. Later on you can use extensions that can help generate a document outline based on heading tags< /h3 >< /h2 >< /h1 >

Question 19

Critical Thinking] Each block level element has margins that optionally create space around them. What does the author mean when he says, “vertical margins in CSS collapse?”

Answer 19

What the author means is that vertical margins overlap each other rather than stack the margins. CSS allows developers to control the pixel size of margins. If the bottom margin of a heading and the top margin of a paragraph are the same pixel length, the margin dimensions will overlap rather than stack. If the bottom margin of a heading is 20 pixels and the top margin of a paragraph is 10 pixels, the margin rendered by the browser will be 20 pixels (not 30 pixels).

Question 20

[Critical Thinking] What does it mean when we say a tag is self closing?

Answer 20

A class of tags that do not require a closing tag is called a self closing tag. Normally tags need an opening and closing tag to mark how the browser should handle content. An example of a self closing tag is < br > for new line break in text.