Brainscape's Knowledge GenomeTM

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


See full index

Web Development Masterdeck (Codecademy) > HTML 5 > Flashcards

HTML 5 Flashcards

1
Q

What is a text editor?

A

A text editor is a program that allows us to write code.

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

What does HTML stand for?

A

Hypertext Markup Language

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

What are the rules that every html file must follow (tags)?

A

<!DOCTYPE html>

<html>
<head>
<title></title>
</head>
<body>
</body>

</html>

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

What is the shortcut (in sublime) for quickly creating the default tags for html page?

A

Type html and hit the tab key.

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

<!DOCTYPE html>

A

All HTML documents must start with a <!DOCTYPE> declaration.The declaration is not an HTML tag. It is an “information” to the browser about what document type to expect.

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

What is the difference between a tag and an element?

A

HTML element is the collection of start tag, its attributes, an end tag and everything in between (content). An HTML tag (either opening or closing) is used to mark the start or end of an element

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

<b></b>

A

<b> tag is used to highlight in bold that part of the text, which we want to make more obvious for the user.</b>

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

<p>
</p>

A

This element creates a paragraph in html file.

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

<h1>
</h1>

A

This element creates a header in html file.

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

<strong></strong>

A

The strong element will bold a text. The <b> element was used in the past.</b>

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

<em></em>

A

The emphasis element will italicize text.

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

<ol>
</ol>

A

The <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical.

Ex:

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

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

<ul>
</ul>

A

The <ul> tag defines an unordered (bulleted) list.

Ex:

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

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

<li>
</li>

A

The <li> HTML element is used to represent an item in a list. It must be contained in a parent element: an ordered list ( <ol> ), an unordered list ( <ul> ), or a menu ( <menu> ).

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

What are nested list?

A

Nested list are list inside of list.

Ex:

<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>

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

What are self closing tags?

A

A self-closing tag in HTML is a kind of HTML tag that does not need to be closed manually by its closing tag, which means it does not have a separate closing tag as </tag>. An example of this is an <img></img> tag that allows you to add an image to a web page.

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

<br></br>

A

The <br></br> tag inserts a single line break. (There is no closing tag)

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

<hr></hr>

A

The <hr> HTML element represents a thematic break between paragraph-level elements: for example, a change of scene in a story, or a shift of topic within a section.

The <hr> element is most often displayed as a horizontal rule that is used to separate content (or define a change) in an HTML page.

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

<img></img>

A

The <img></img> tag is used to embed an image in an HTML page.
Images are not technically inserted into a web page; images are linked to web pages. The <img></img> tag creates a holding space for the referenced image and it has a required attribute called src, which has to be the URL of the image.

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

What are the two required attributes for an <img></img> tag?

A
  1. src - Specifies the path to the image and must be set to the image’s source, or the location of the image. The value of src must be the uniform resource locator (URL) of the image leading to its local or web address.
  2. alt - Specifies an alternate text for the image, if the image for some reason cannot be displayed
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

What do attributes require?

A

Attributes require a name and a value.

Ex: <p lang= "en-us">Paragraph in English</p>

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

What are attributes?

A

An attribute in HTML provides additional information about an HTML element. It comes in a name and value pair with the structure name=”value”. For example, you can specify the width of an HTML element with the attribute width=”500”.

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

<a></a>

A

The anchor tag, used to specify the text that is the “anchor” for a link.

Ex:
<a>Learn to code!</a>

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

<button></button>

A

This is a button tag.

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

What is hypertext?

A

Hypertext is text that is linked to other text.

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

What does href stand for?

A

hyperlink reference

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

What is the href attribute?

A

Links are created in HTML with the href attribute.The href attribute allows us to specify the URL, or address on the web, that a link should take users to.

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

What are relative paths?

A

Relative paths are links to another page on the same website, so we can omit the first part.

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

Explain separation of concerns

A

separation of concerns is a design principle for separating a computer program into distinct sections such that each section addresses a separate concern.

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

What is the html link tag for?

A

An HTML link tag is often used to create a connection between an HTML file and the CSS file and tells the browser to apply the CSS styles to the HTML.

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

rel attribute

A

rel attribute specifies the relationship between the current document and the linked resource.

Ex:

<link></link>

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

What is an event?

A

An event is something that can happen in a browser, like clicking or hovering with your mouse.

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

How can attributes set events?

A

HTML attributes can set events, where the name of the attribute is the event and the value of the attribute is the JavaScript function that we want to execute.
Ex:
<button>Repaint</button>

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

What does SQL stand for?

A

SQL stands for structured query language.

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

What is the function of SQL?

A

SQL stores information in tables, which is simply a collection of information organized into rows and columns. I

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

What is programming?

A

programming is giving a set of instructions to a computer to execute.

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

What is the difference between programming and coding?

A

Programming is the mental process of thinking up instructions to give to a machine (like a computer) and coding is the process of transforming those ideas into a written language that a computer can understand.

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

HTML is a declarative language. How are declarative languages different than non-declarative languages?

A

Declarative languages tell an interpreter what to do, not how to do it.

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

What is the main goal of html?

A

The main goal of html is to structure a page.

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

What should we be asking ourselves when we are developing a website?

A

What are the important pieces of content? What is the information hierarchy going to look like? A good way to approach this is to look at our heading hierarchy.

41
Q

What is accessibility?

A

Accessibility is the practice of making your website useable to as many people as possible.

42
Q

What is semantic html?

A

Semantic html uses tags which best convey the underlining meaning of the content the tag contains.

43
Q

What are the advantages of coherent structure?

A
  1. Readability
  2. Accessibility
  3. Ease of styling
44
Q

What phrases should we avoid when adding alt attributes to our elements?

A

Our text should be descriptive but concise. Avoid phrases like “photo of” or “image of” because this information is redundant.

45
Q

What is divitis?

A

The excessive misuse of divs to markup a page.

46
Q

<html>
</html>

A

The <html> element will contain all of your HTML code.

47
Q

<title>
</title>

A

You can add a title to your web page by using the <title> element, inside of the head.</title>

48
Q

<!-- comment -->

.

A

Adds comments to html document

49
Q

What does the head element contain?

A

The head element contains metadata (data about data) that describes the document.

50
Q

What is the only valid direct child to an <ol> or <ul> element?

A

The <li> element.

51
Q

A

The element is used to contain characters that should be superscript such as the suffices of dates or mathematical concepts like 2^2.

Ex:

<p>On the 4th of September you will learn about E = MC2.</p>

52
Q

A

The element is used to contain characters that should be subscript. It is commonly used with foot notes or chemical formulas such as H2O.

Ex:

<p>The amount of CO2 in the atmosphere grew by 2ppm in 2009.</p>

53
Q

What is a table?

A

A table represents information in a grid format.
Ex: Financial reports, T.V. schedules, and sports results.

54
Q

<table>
</table>

A

The table element is used to create a table. The contents of the table are written out row by row.

55
Q

<tr>
</tr>

A

tr stands for table row. The tr element is used to indicate the start of each row.

56
Q

<td>
</td>

A

td stands for table data. Each cell of a table is represented using a <td> element.

57
Q

<th>
</th>

A

The <th> element is used just like the <td> element but its purpose is to represent the heading for either a column or a row. (th stands for table heading).

58
Q

How can we use the scope attribute in a table?

A

The scope attribute can be used on the <th> element to indicate whether it is a heading for a column or row.

Ex:

<th>Saturday</th>

<th>Tickets sold:</th>

59
Q

colspan attribute

A

Table data can span columns using the colspan attribute.

60
Q

rowspan attribute

A

Table data can span rows using the rowspan attribute.

61
Q

What three sections can a table be split into?

A

a head, a body, and a footer.

62
Q

<thead>
</thead>

A

A table’s head is created with the <thead> element.

63
Q

<tbody>
</tbody>

A

A table’s body is created with the <tbody> element.

64
Q

<tfoot>
</tfoot>

A

A table’s footer is created with the <tfoot> element.

65
Q

What are tags also called?

A

Markup

66
Q

What is structural markup?

A

The elements that you can use to describe both headings and paragraphs.

67
Q

<section> </section>

A

The <section> HTML element represents a generic standalone section of a document, which doesn’t have a more specific semantic element to represent it. These sections should be made up of related content, like contact information. Sections should always have a heading, with very few exceptions.

68
Q

<article></article>

A

The <article> element acts as a container for any section of a page that could stand alone and potentially be syndicated (independently distributable or reusable).

Examples: Individual article or blog entry, a comment or forum post, or any other independent piece of content.

69
Q

What should you do with a page that has several articles (or even summaries of articles)?

A

If a page contains several articles, then each individual article would live inside its own article element.

70
Q

What are some examples of nested articles?

A

A blog post might live inside one <article> element and each comment on the article could live inside its own child <article> element.

71
Q

<aside></aside>

(inside an article)

A

When the <aside> element is used inside an <article> element, it should contain information that is related to the article but not essential to its overall meaning.

Ex: A pullquote or glossary might be considered as an aside to the article it relates to.

72
Q

<aside></aside>

(outside an article)

A

When the <aside> element is used outside of an article element, it acts as a container for content that is related to the entire page. For example, it might contain links to other sections of the site, a list of recent posts, a search box, or recent tweets by the author.

73
Q

<figure></figure>

A

Contains all types of media (images, videos, graphs, diagrams, code samples, text that supports the main body of an article). The figure element should also contain a <figcaption> element which provides a text description for the content of the <figure> element.</figure>

74
Q

<audio></audio>

A

The <audio> HTML element is used to embed sound content in documents. It may contain one or more audio sources, represented using the src attribute or the <source></source> element: the browser will choose the most suitable one.</audio>

75
Q

<main></main>

A

The <main> HTML element represents the dominant content of the <body> of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application.

76
Q

What is an empty element?

A

An element with no closing tag

77
Q

<form> </form>

A

The <form> HTML element represents a document section containing interactive controls for submitting information.

78
Q

<input></input>

A

The <input></input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user. Input is a self closing tag.

79
Q

How do I create a input form that allows users to enter a text?

A

We create a form element and within our form element we add an input element and set the type to text.

Ex:

<form>
<input></input>
</form>

80
Q

How do you create a form for a user’s email?

A

We create a form element and within that element we add the input element. We set the type to email and include the value required to make adding an email required to continue.

Ex:

<form>
<input></input>
</form>

81
Q

How do you create a form for a user’s birthday?

A

We create a form element and within that element we add the input element. We set the type to date.

Ex:

<form>
<input></input>
</form>

82
Q

How do we create a reset button?

A

We create a form element and within that element we add the input element and set the type to reset.

Ex:

<form>
<input></input>
</form>

83
Q

How do we create radio buttons?

A

We create a form element and within that element we add the input element and set the type to radio. If we have multiple buttons, we need to use the name attribute. (each button should have the same name)

Ex:

<form>
Gender: <br></br>
<input></input>Male<br></br>
<input></input>Female<br></br>
<input></input>Other<br></br>
</form>

84
Q

How do we create checkboxes?

A

We create a form element and within that element we add the input element and set the type to checkbox.

Ex:

<form>
Pets: <br></br>
<input></input>Cats<br></br>
<input></input>Dogs<br></br>
</form>

85
Q

How do you create a dropdown field?

A

Create a select element and within that element add an option element. Set the value attribute to the option available in the dropdown field. Make sure to close the option tag.

Ex:
Cars: <br></br>
<select>
<option>Volvo</option>
<option>Audi</option>
<option>BMW</option>
<option>Jaguar</option>
</select><br></br>

86
Q

What is a markup language?

A

A markup language is a computer language that defines the structure and presentation of raw text.

87
Q

How does HTML work?

A

In HTML, the computer can interpret raw text that is wrapped in HTML elements.

88
Q

What is HyperText?

A

HyperText is text displayed on a computer or device that provides access to other text through links, also known as hyperlinks. You probably clicked on a couple of hyperlinks on your way to this Codecademy course.

89
Q

What is an HTML element?

A

HTML element (or simply, element) — a unit of content in an HTML document formed by HTML tags and the text or media it contains.

90
Q

What is a HTML tag?

A

HTML Tag — the element name, surrounded by an opening (<) and closing (>) angle bracket.

91
Q

What is HTML open tag?

A

Opening Tag — the first HTML tag used to start an HTML element. The tag type is surrounded by opening and closing angle brackets.

92
Q

What is HTML closing tag?

A

Closing tag — the second HTML tag used to end an HTML element. Closing tags have a forward slash (/) inside of them, directly after the left angle bracket.

93
Q

What is HTML content?

A

Content — The information (text or other elements) contained between the opening and closing tags of an HTML element.

94
Q

What can attributes do for HTML elements?

A

Usually attributes either change an element’s behavior, provide metadata about the element, or provide labeling information about the element.

95
Q

How can we validate our HTML code?

A

The best strategy is to start by running your HTML page through the Markup Validation Service — created and maintained by the W3C, the organization that looks after the specifications that define HTML, CSS, and other web technologies. This webpage takes an HTML document as an input, goes through it, and gives you a report to tell you what is wrong with your HTML.

96
Q

Why should we validate our HTML code?

A

We should do so because of the browser permissive nature - the badly-formed code will still be published but the browser will try to interpret it and this will result in unpredictable results and errors.

97
Q

How do we add a tooltip to a clickable element?

A

To add tooltips to a clickable element like a link, add it as the title attribute.

<p>
<a>Codecademy</a> is the best place to learn to code!
</p>

98
Q

What is a tooltip?

A

The tooltip, also known as infotip or hint, is a common graphical user interface (GUI) element in which, when hovering over a screen element or component, a text box displays information about that element, such as a description of a button’s function, what an abbreviation stands for, or the exact absolute time stamp over a relative time (“… ago”).

99
Q

What is the main issue with tooltips created with the title attribute?

A

The title attribute is HTML’s built-in way of creating tooltips, but is known to cause a variety of accessibility issues. Developers have come up with a number of ways to create tooltips that are more accessible, but this generally requires using CSS and JavaScript, which fall out of the scope of this deck. When creating tooltips in the wild, you should research ways to make them accessible for everyone.

Web Development Masterdeck (Codecademy) (10 decks)

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