Brainscape's Knowledge GenomeTM

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


See full index

The Web Developer Bootcamp > Introduction to HTML > Flashcards

Introduction to HTML Flashcards

1
Q

Markup is used to…

A

…annotate text, images, and other content for display in a browser.

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

General Structure of HTML Code

A

This is content.

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

Attributes of <a>:
target</a>

Example
1. </a><a>text</a>

A

target specifies the browsing context used to display the link.

Example Output
target=”_blank” opens the link in a new tab

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

Attributes of <a>:
title</a>

Example
1. </a><a>Homepage</a>

A

title specifies extra information about the link, which will appear as a tooltip when hovered over.

Example Output
The link will have a tooltip that says “The Homepage” when hovered over.

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

Attributes of <a>:
href</a>

Example
1. </a><a>link text</a>

A

href specifies the web address the hyperlink will point to.

Example Output
“link text”, when clicked, will open website.com.

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

Attribute:

class

A

The class attribute gives the element an identifying name that can be used to target the element later.

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

What is the purpose of an attribute?

A

Attributes contain information about the element that doesn’t appear in the actual content.

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

What part of the following is an attribute?

  1. <p>My cat is grumpy.</p>
A

class=”editor-note” is the attribute.

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

Empty (Void) Elements

Example
1. <img></img>

A

Empty elements consist only of a single tag.
They are usually used to insert or embed something.

Example Output
The code embeds image.jpg into the web page.

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

Inline Elements

Example
1. <em>This</em><strong> is</strong><em> Inline.</em>

A

Inline elements are contained within block-level elements and do not cause a new line to appear.

Example Output
This(Italic) is(bold) Inline(Italic).

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

Block-Level Elements

Example
1. <p>This</p><p> is</p><p> Block-Level.</p>

A

Block-level elements form a visible block on the page.
They begin on a new line and are followed by a new line.

They tend to be structural elements, such as menus, paragraphs, lists, footers, etc.

Example Output
This
is
Block-Level.

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

Nested Elements

Example
1. <p>My cat is <strong>very</strong> angry.</p>

A

Elements can be nested inside of each other.

Example Output
My cat is very(bold) angry.

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

What is MDN?

A

The Mozilla Developer Network is a good resource for web developers.
Read the relevant MDN page before each video.

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

How do I find what I need on MDN?

A

Search “keyword + MDN” on Google to find what you need.

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

<a></a>

A

Creates a hyperlink.

“a” stands for anchor.

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

<em></em>

A

Gives text an italic emphasis.

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

Are tag names case-sensitive?

A

No, though standard convention is to start all tags with a lower-case letter.

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

<p></p>

A

Creates a paragraph.

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

<strong></strong>

A

Makes text bold.

<b> is being deprecated.</b>

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

What does it mean to sat something is being deprecated?

A

It is being phased out.

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

<h1></h1>

A

Indicates the largest header.

22
Q

<p>This is a paragraph.</p>

What is the tag?

A

<p> is the opening tag.

| </p>

is the closing tag.

23
Q

<p>This is a paragraph.</p>

What is the content?

A

“This is a paragraph.” is the content.

24
Q

<p>This is a paragraph.</p>

What is the element?

A

<p>This is a paragraph.</p>

is the element.

25
Q

What is a boolean attribute?

Example
1.
2.

A

An attribute written without values (because there is only one possible value it can have).

Example Output
The markup outputs two boxes, the first white and able to be typed in, the other grayed out and disabled.

26
Q

Is it possible to write attribute values without quotation marks?

Example 1
1. <a>Mozilla Homepage</a>

A

Yes, but it is not good practice.

Example Output
The markup outputs a link to mozilla.org with text “Mozilla Homepage”.

27
Q

What will happen to the following snippet of code, written without quotation marks?

  1. <a>Mozilla</a>
A

The browser will misinterpret the markup, seeing the title attribute as 3 attributes - a title attribute with value “The” and 2 boolean attributes.

28
Q

Which of the following are acceptable use(s) of quotation marks for attribute values?

  1. <a>link</a>
  2. <a>link</a>
  3. <a></a>
A

These are both acceptable:

  1. <a>link</a>
  2. <a>link</a>

This is not:
3. <a></a>

29
Q

Would the following piece of code work as expected? Why or why not? If not, how can it be changed such that it works?

  1. <a>link</a>
A

The code would not work as expected because the same quotation style is used inside the quotation marks for the title attribute.

This could be fixed by simply using double quotations, like this:
1. <a>link</a>

Or, we could replace the quotation mark inside the title attribute with an HTML entity, like this:
1. <a>link</a>

30
Q

In the boilerplate code below:

  5. Test Page
  8. <p>This is a test page.</p>

What is ?

A

This must be included for everything on the page to work properly. It ensures that the document uses HTML5 markup,
It is a relic from early HTML.

31
Q

In the boilerplate code below:

  5. Test Page
  8. <p>This is a test page.</p>

What is ?

A

The element wraps all the content on the page.

32
Q

In the boilerplate code below:

  5. Test Page
  8. <p>This is a test page.</p>

What is ?

A

The element acts as a container for everything on the page that isn’t content displayed to the user.
This includes keywords and a page descriptor to appear in search results, CSS, character set declarations, and more.
Only ONE allowed in .

33
Q

In the boilerplate code below:

  5. Test Page
  8. <p>This is a test page.</p>

What is ?

A

This element sets the character set the document will use to UTF-8, which includes most characters from most human languages.
Setting this simplifies character handling using different scripts.

34
Q

In the boilerplate code below:

  5. Test Page
  8. <p>This is a test page.</p>

What is ?

A

The element sets the title of the page.

This is what will appear in the browser tab and is used to describe the page when you bookmark it.

35
Q

In the boilerplate code below:

  5. Test Page
  8. <p>This is a test page.</p>

What is ?

A

The element contains all of the content you wish to display on the page.
Only ONE allowed in HTML.

36
Q

Whitespace in HTML

Example
1.  <p>Dogs are silly.</p>
2. 
3, <p>Dogs          are
4.                       silly.</p>
A

Whitespace in HTML is used for readability, but the HTML parser reduces it down to a single space.
The two snippets of code in the example are identical.

Example Output
Dogs are silly.
Dogs are silly.

37
Q

Entity References

A

In HTML, the characters , “, ‘, and & are part of HTML syntax itself.
So, to display these characters in our text without it being interpreted as code, we must use entity references.

38
Q

What is the character reference for

A

<

39
Q

What is the character reference for >?

A

>

40
Q

What is the character reference for “?

A

”

41
Q

What is the character reference for ‘?

A

’

42
Q

What is the character reference for &?

A

&

43
Q

Would the following piece of code work as expected? Why or why not? If not, how can it be changed such that it works?

  1. <p>In HTML, you define a paragraph using the </p><p> element.</p>
A

The code would not work as expected.
It uses special characters within the text, which would be interpreted by the HTML parser as markup.

Example Output
In HTML, you define a paragraph using the
element.

This can be fixed by using entity references in place of those characters.
1. <p>In HTML, you define a paragraph using the <p> element.</p>

Corrected Output
In HTML, you define a paragraph using the <p> element.</p>

44
Q

How to I turn a section of content in an HTML document into a comment?

A

A comment in HTML must be wrapped between .

Example

  1. <p>I'm not inside a comment.</p>

Example Output
I’m not inside a comment.

45
Q

Sublime Shortcut:

Auto-generate Boilerplate HTML

A

Make sure the document is saved as a .html.

Type html and hit tab.

46
Q

Sublime Shortcut:

Comments

A

Select lines you wish to comment and hot CTRL + /

47
Q

Attributes of

lang

A

Including a valid lang declaration helps screen readers determine the proper language to announce and ensures important metadata in , such as , are announced properly.

48
Q

<h1> vs <h6></h6></h1>

A

<h1> is the largest header

| <h6> is the smallest header</h6></h1>

49
Q

<ol></ol>

A

Creates an ordered (numbered) list. Each item must be listed in its own <li> tag.</li>

50
Q

<ul></ul>

A

Creates an unordered (bulleted) list. Each item must be listed in its own <li> tag.</li>

51
Q

Sublime Shortcut:

Autocomplete Tags

A

Type tag name and hit tab.

52
Q

Sublime Shortcut:

Duplicate a Line

A

CTRL + SHIFT + D

The Web Developer Bootcamp (3 decks)

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