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
What is hypertext?
Hypertext is text that is linked to other text.
26
What does href stand for?
hyperlink reference
27
What is the href attribute?
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.
28
What are relative paths?
Relative paths are links to another page on the same website, so we can omit the first part.
29
Explain separation of concerns
separation of concerns is a design principle for separating a computer program into distinct sections such that each section addresses a separate concern.
30
What is the html link tag for?
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.
31
rel attribute
rel attribute specifies the relationship between the current document and the linked resource. Ex:
32
What is an event?
An event is something that can happen in a browser, like clicking or hovering with your mouse.
33
How can attributes set events?
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:
34
What does SQL stand for?
SQL stands for structured query language.
35
What is the function of SQL?
SQL stores information in tables, which is simply a collection of information organized into rows and columns. I
36
What is programming?
programming is giving a set of instructions to a computer to execute.
37
What is the difference between programming and coding?
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.
38
HTML is a declarative language. How are declarative languages different than non-declarative languages?
Declarative languages tell an interpreter what to do, not how to do it.
39
What is the main goal of html?
The main goal of html is to structure a page.
40
What should we be asking ourselves when we are developing a website?
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
What is accessibility?
Accessibility is the practice of making your website useable to as many people as possible.
42
What is semantic html?
Semantic html uses tags which best convey the underlining meaning of the content the tag contains.
43
What are the advantages of coherent structure?
1. Readability 2. Accessibility 3. Ease of styling
44
What phrases should we avoid when adding alt attributes to our elements?
Our text should be descriptive but concise. Avoid phrases like "photo of" or "image of" because this information is redundant.
45
What is divitis?
The excessive misuse of divs to markup a page.
46
The element will contain all of your HTML code.
47
</div> </div> <div class='card-face answer'> <div class='answer-content'> You can add a title to your web page by using the <title> element, inside of the head. </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":48,"qSoundUrl":null,"resources":{"deckId":12482075,"packId":21156140,"cardId":412102780},"returnTo":"/packs/21156140/subscribe"}' id='card-412102780'> <div class='header'> 48 </div> <div class='card-face question'> <div class='question-content'> <!-- comment -->. </div> </div> <div class='card-face answer'> <div class='answer-content'> Adds comments to html document </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":49,"qSoundUrl":null,"resources":{"deckId":12482075,"packId":21156140,"cardId":412102781},"returnTo":"/packs/21156140/subscribe"}' id='card-412102781'> <div class='header'> 49 </div> <div class='card-face question'> <div class='question-content'> What does the head element contain? </div> </div> <div class='card-face answer'> <div class='answer-content'> The head element contains metadata (data about data) that describes the document. </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":50,"qSoundUrl":null,"resources":{"deckId":12482075,"packId":21156140,"cardId":412102782},"returnTo":"/packs/21156140/subscribe"}' id='card-412102782'> <div class='header'> 50 </div> <div class='card-face question'> <div class='question-content'> What is the only valid direct child to an <ol> or <ul> element? </div> </div> <div class='card-face answer'> <div class='answer-content'> The <li> element. </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":51,"qSoundUrl":null,"resources":{"deckId":12482075,"packId":21156140,"cardId":412102783},"returnTo":"/packs/21156140/subscribe"}' id='card-412102783'> <div class='header'> 51 </div> <div class='card-face question'> <div class='question-content'> <sup> </div> </div> <div class='card-face answer'> <div class='answer-content'> The <sup> 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 4<sup>th</sup> of September you will learn about E = MC<sup>2</sup>.</p> </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":52,"qSoundUrl":null,"resources":{"deckId":12482075,"packId":21156140,"cardId":412102784},"returnTo":"/packs/21156140/subscribe"}' id='card-412102784'> <div class='header'> 52 </div> <div class='card-face question'> <div class='question-content'> <sub> </div> </div> <div class='card-face answer'> <div class='answer-content'> The <sub> 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 CO<sub>2</sub> in the atmosphere grew by 2ppm in 2009.</p> </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":53,"qSoundUrl":null,"resources":{"deckId":12482075,"packId":21156140,"cardId":412102785},"returnTo":"/packs/21156140/subscribe"}' id='card-412102785'> <div class='header'> 53 </div> <div class='card-face question'> <div class='question-content'> What is a table? </div> </div> <div class='card-face answer'> <div class='answer-content'> A table represents information in a grid format. Ex: Financial reports, T.V. schedules, and sports results. </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":54,"qSoundUrl":null,"resources":{"deckId":12482075,"packId":21156140,"cardId":412102786},"returnTo":"/packs/21156140/subscribe"}' id='card-412102786'> <div class='header'> 54 </div> <div class='card-face question'> <div class='question-content'> <table> </div> </div> <div class='card-face answer'> <div class='answer-content'> The table element is used to create a table. The contents of the table are written out row by row. </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":55,"qSoundUrl":null,"resources":{"deckId":12482075,"packId":21156140,"cardId":412102787},"returnTo":"/packs/21156140/subscribe"}' id='card-412102787'> <div class='header'> 55 </div> <div class='card-face question'> <div class='question-content'> <tr> </div> </div> <div class='card-face answer'> <div class='answer-content'> tr stands for table row. The tr element is used to indicate the start of each row. </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":56,"qSoundUrl":null,"resources":{"deckId":12482075,"packId":21156140,"cardId":412102788},"returnTo":"/packs/21156140/subscribe"}' id='card-412102788'> <div class='header'> 56 </div> <div class='card-face question'> <div class='question-content'> <td> </div> </div> <div class='card-face answer'> <div class='answer-content'> td stands for table data. Each cell of a table is represented using a <td> element. </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":57,"qSoundUrl":null,"resources":{"deckId":12482075,"packId":21156140,"cardId":412102789},"returnTo":"/packs/21156140/subscribe"}' id='card-412102789'> <div class='header'> 57 </div> <div class='card-face question'> <div class='question-content'> <th> </div> </div> <div class='card-face answer'> <div class='answer-content'> 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). </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":58,"qSoundUrl":null,"resources":{"deckId":12482075,"packId":21156140,"cardId":412102790},"returnTo":"/packs/21156140/subscribe"}' id='card-412102790'> <div class='header'> 58 </div> <div class='card-face question'> <div class='question-content'> How can we use the scope attribute in a table? </div> </div> <div class='card-face answer'> <div class='answer-content'> The scope attribute can be used on the <th> element to indicate whether it is a heading for a column or row. Ex: <th scope = "col">Saturday</th> <th scope= "row">Tickets sold:</th> </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":59,"qSoundUrl":null,"resources":{"deckId":12482075,"packId":21156140,"cardId":412102791},"returnTo":"/packs/21156140/subscribe"}' id='card-412102791'> <div class='header'> 59 </div> <div class='card-face question'> <div class='question-content'> colspan attribute </div> </div> <div class='card-face answer'> <div class='answer-content'> Table data can span columns using the colspan attribute. </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":60,"qSoundUrl":null,"resources":{"deckId":12482075,"packId":21156140,"cardId":412102792},"returnTo":"/packs/21156140/subscribe"}' id='card-412102792'> <div class='header'> 60 </div> <div class='card-face question'> <div class='question-content'> rowspan attribute </div> </div> <div class='card-face answer'> <div class='answer-content'> Table data can span rows using the rowspan attribute. </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":61,"qSoundUrl":null,"resources":{"deckId":12482075,"packId":21156140,"cardId":412102793},"returnTo":"/packs/21156140/subscribe"}' id='card-412102793'> <div class='header'> 61 </div> <div class='card-face question'> <div class='question-content'> What three sections can a table be split into? </div> </div> <div class='card-face answer'> <div class='answer-content'> a head, a body, and a footer. </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":62,"qSoundUrl":null,"resources":{"deckId":12482075,"packId":21156140,"cardId":412102794},"returnTo":"/packs/21156140/subscribe"}' id='card-412102794'> <div class='header'> 62 </div> <div class='card-face question'> <div class='question-content'> <thead> </div> </div> <div class='card-face answer'> <div class='answer-content'> A table’s head is created with the <thead> element. </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":63,"qSoundUrl":null,"resources":{"deckId":12482075,"packId":21156140,"cardId":412102795},"returnTo":"/packs/21156140/subscribe"}' id='card-412102795'> <div class='header'> 63 </div> <div class='card-face question'> <div class='question-content'> <tbody> </div> </div> <div class='card-face answer'> <div class='answer-content'> A table’s body is created with the <tbody> element. </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":64,"qSoundUrl":null,"resources":{"deckId":12482075,"packId":21156140,"cardId":412102796},"returnTo":"/packs/21156140/subscribe"}' id='card-412102796'> <div class='header'> 64 </div> <div class='card-face question'> <div class='question-content'> <tfoot> </div> </div> <div class='card-face answer'> <div class='answer-content'> A table’s footer is created with the <tfoot> element. </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":65,"qSoundUrl":null,"resources":{"deckId":12482075,"packId":21156140,"cardId":412102797},"returnTo":"/packs/21156140/subscribe"}' id='card-412102797'> <div class='header'> 65 </div> <div class='card-face question'> <div class='question-content'> What are tags also called? </div> </div> <div class='card-face answer'> <div class='answer-content'> Markup </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":66,"qSoundUrl":null,"resources":{"deckId":12482075,"packId":21156140,"cardId":412102799},"returnTo":"/packs/21156140/subscribe"}' id='card-412102799'> <div class='header'> 66 </div> <div class='card-face question'> <div class='question-content'> What is structural markup? </div> </div> <div class='card-face answer'> <div class='answer-content'> The elements that you can use to describe both headings and paragraphs. </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":67,"qSoundUrl":null,"resources":{"deckId":12482075,"packId":21156140,"cardId":412102800},"returnTo":"/packs/21156140/subscribe"}' id='card-412102800'> <div class='header'> 67 </div> <div class='card-face question'> <div class='question-content'> <section> </section> </div> </div> <div class='card-face answer'> <div class='answer-content'> 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. </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":68,"qSoundUrl":null,"resources":{"deckId":12482075,"packId":21156140,"cardId":412102801},"returnTo":"/packs/21156140/subscribe"}' id='card-412102801'> <div class='header'> 68 </div> <div class='card-face question'> <div class='question-content'> <article></article> </div> </div> <div class='card-face answer'> <div class='answer-content'> 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. </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":69,"qSoundUrl":null,"resources":{"deckId":12482075,"packId":21156140,"cardId":412102802},"returnTo":"/packs/21156140/subscribe"}' id='card-412102802'> <div class='header'> 69 </div> <div class='card-face question'> <div class='question-content'> What should you do with a page that has several articles (or even summaries of articles)? </div> </div> <div class='card-face answer'> <div class='answer-content'> If a page contains several articles, then each individual article would live inside its own article element. </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":70,"qSoundUrl":null,"resources":{"deckId":12482075,"packId":21156140,"cardId":412102803},"returnTo":"/packs/21156140/subscribe"}' id='card-412102803'> <div class='header'> 70 </div> <div class='card-face question'> <div class='question-content'> What are some examples of nested articles? </div> </div> <div class='card-face answer'> <div class='answer-content'> A blog post might live inside one <article> element and each comment on the article could live inside its own child <article> element. </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":71,"qSoundUrl":null,"resources":{"deckId":12482075,"packId":21156140,"cardId":412102804},"returnTo":"/packs/21156140/subscribe"}' id='card-412102804'> <div class='header'> 71 </div> <div class='card-face question'> <div class='question-content'> <aside></aside> (inside an article) </div> </div> <div class='card-face answer'> <div class='answer-content'> 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. </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":72,"qSoundUrl":null,"resources":{"deckId":12482075,"packId":21156140,"cardId":412102805},"returnTo":"/packs/21156140/subscribe"}' id='card-412102805'> <div class='header'> 72 </div> <div class='card-face question'> <div class='question-content'> <aside></aside> (outside an article) </div> </div> <div class='card-face answer'> <div class='answer-content'> 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. </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":73,"qSoundUrl":null,"resources":{"deckId":12482075,"packId":21156140,"cardId":412102806},"returnTo":"/packs/21156140/subscribe"}' id='card-412102806'> <div class='header'> 73 </div> <div class='card-face question'> <div class='question-content'> <figure></figure> </div> </div> <div class='card-face answer'> <div class='answer-content'> 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. </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":74,"qSoundUrl":null,"resources":{"deckId":12482075,"packId":21156140,"cardId":412102807},"returnTo":"/packs/21156140/subscribe"}' id='card-412102807'> <div class='header'> 74 </div> <div class='card-face question'> <div class='question-content'> <audio></audio> </div> </div> <div class='card-face answer'> <div class='answer-content'> 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> element: the browser will choose the most suitable one. </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":75,"qSoundUrl":null,"resources":{"deckId":12482075,"packId":21156140,"cardId":412102808},"returnTo":"/packs/21156140/subscribe"}' id='card-412102808'> <div class='header'> 75 </div> <div class='card-face question'> <div class='question-content'> <main></main> </div> </div> <div class='card-face answer'> <div class='answer-content'> 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. </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":76,"qSoundUrl":null,"resources":{"deckId":12482075,"packId":21156140,"cardId":412102810},"returnTo":"/packs/21156140/subscribe"}' id='card-412102810'> <div class='header'> 76 </div> <div class='card-face question'> <div class='question-content'> What is an empty element? </div> </div> <div class='card-face answer'> <div class='answer-content'> An element with no closing tag </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":77,"qSoundUrl":null,"resources":{"deckId":12482075,"packId":21156140,"cardId":412102811},"returnTo":"/packs/21156140/subscribe"}' id='card-412102811'> <div class='header'> 77 </div> <div class='card-face question'> <div class='question-content'> <form> </form> </div> </div> <div class='card-face answer'> <div class='answer-content'> The <form> HTML element represents a document section containing interactive controls for submitting information. </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":78,"qSoundUrl":null,"resources":{"deckId":12482075,"packId":21156140,"cardId":412102812},"returnTo":"/packs/21156140/subscribe"}' id='card-412102812'> <div class='header'> 78 </div> <div class='card-face question'> <div class='question-content'> <input> </div> </div> <div class='card-face answer'> <div class='answer-content'> The <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. </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":79,"qSoundUrl":null,"resources":{"deckId":12482075,"packId":21156140,"cardId":412102813},"returnTo":"/packs/21156140/subscribe"}' id='card-412102813'> <div class='header'> 79 </div> <div class='card-face question'> <div class='question-content'> How do I create a input form that allows users to enter a text? </div> </div> <div class='card-face answer'> <div class='answer-content'> We create a form element and within our form element we add an input element and set the type to text. Ex: <form> <input type="text"> </form> </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":80,"qSoundUrl":null,"resources":{"deckId":12482075,"packId":21156140,"cardId":412102814},"returnTo":"/packs/21156140/subscribe"}' id='card-412102814'> <div class='header'> 80 </div> <div class='card-face question'> <div class='question-content'> How do you create a form for a user's email? </div> </div> <div class='card-face answer'> <div class='answer-content'> 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 type="email" required> </form> </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":81,"qSoundUrl":null,"resources":{"deckId":12482075,"packId":21156140,"cardId":412102815},"returnTo":"/packs/21156140/subscribe"}' id='card-412102815'> <div class='header'> 81 </div> <div class='card-face question'> <div class='question-content'> How do you create a form for a user's birthday? </div> </div> <div class='card-face answer'> <div class='answer-content'> We create a form element and within that element we add the input element. We set the type to date. Ex: <form> <input type="date"> </form> </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":82,"qSoundUrl":null,"resources":{"deckId":12482075,"packId":21156140,"cardId":412102816},"returnTo":"/packs/21156140/subscribe"}' id='card-412102816'> <div class='header'> 82 </div> <div class='card-face question'> <div class='question-content'> How do we create a reset button? </div> </div> <div class='card-face answer'> <div class='answer-content'> We create a form element and within that element we add the input element and set the type to reset. Ex: <form> <input type="reset"> </form> </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":83,"qSoundUrl":null,"resources":{"deckId":12482075,"packId":21156140,"cardId":412102818},"returnTo":"/packs/21156140/subscribe"}' id='card-412102818'> <div class='header'> 83 </div> <div class='card-face question'> <div class='question-content'> How do we create radio buttons? </div> </div> <div class='card-face answer'> <div class='answer-content'> 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> <input type="radio" name="gender">Male<br> <input type="radio" name="gender">Female<br> <input type="radio" name="gender">Other<br> </form> </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":84,"qSoundUrl":null,"resources":{"deckId":12482075,"packId":21156140,"cardId":412102820},"returnTo":"/packs/21156140/subscribe"}' id='card-412102820'> <div class='header'> 84 </div> <div class='card-face question'> <div class='question-content'> How do we create checkboxes? </div> </div> <div class='card-face answer'> <div class='answer-content'> We create a form element and within that element we add the input element and set the type to checkbox. Ex: <form> Pets: <br> <input type="Checkbox">Cats<br> <input type="Checkbox">Dogs<br> </form> </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":85,"qSoundUrl":null,"resources":{"deckId":12482075,"packId":21156140,"cardId":412102821},"returnTo":"/packs/21156140/subscribe"}' id='card-412102821'> <div class='header'> 85 </div> <div class='card-face question'> <div class='question-content'> How do you create a dropdown field? </div> </div> <div class='card-face answer'> <div class='answer-content'> 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> <select> <option value="Volvo">Volvo</option> <option value="Audi">Audi</option> <option value="BMW">BMW</option> <option value="Jaguar">Jaguar</option> </select><br> </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":86,"qSoundUrl":null,"resources":{"deckId":12482075,"packId":21156140,"cardId":445730896},"returnTo":"/packs/21156140/subscribe"}' id='card-445730896'> <div class='header'> 86 </div> <div class='card-face question'> <div class='question-content'> What is a markup language? </div> </div> <div class='card-face answer'> <div class='answer-content'> A markup language is a computer language that defines the structure and presentation of raw text. </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":87,"qSoundUrl":null,"resources":{"deckId":12482075,"packId":21156140,"cardId":445730909},"returnTo":"/packs/21156140/subscribe"}' id='card-445730909'> <div class='header'> 87 </div> <div class='card-face question'> <div class='question-content'> How does HTML work? </div> </div> <div class='card-face answer'> <div class='answer-content'> In HTML, the computer can interpret raw text that is wrapped in HTML elements. </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":88,"qSoundUrl":null,"resources":{"deckId":12482075,"packId":21156140,"cardId":445730922},"returnTo":"/packs/21156140/subscribe"}' id='card-445730922'> <div class='header'> 88 </div> <div class='card-face question'> <div class='question-content'> What is HyperText? </div> </div> <div class='card-face answer'> <div class='answer-content'> 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. </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":89,"qSoundUrl":null,"resources":{"deckId":12482075,"packId":21156140,"cardId":445731067},"returnTo":"/packs/21156140/subscribe"}' id='card-445731067'> <div class='header'> 89 </div> <div class='card-face question'> <div class='question-content'> What is an HTML element? </div> </div> <div class='card-face answer'> <div class='answer-content'> HTML element (or simply, element) — a unit of content in an HTML document formed by HTML tags and the text or media it contains. </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":90,"qSoundUrl":null,"resources":{"deckId":12482075,"packId":21156140,"cardId":445731085},"returnTo":"/packs/21156140/subscribe"}' id='card-445731085'> <div class='header'> 90 </div> <div class='card-face question'> <div class='question-content'> What is a HTML tag? </div> </div> <div class='card-face answer'> <div class='answer-content'> HTML Tag — the element name, surrounded by an opening (<) and closing (>) angle bracket. </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":91,"qSoundUrl":null,"resources":{"deckId":12482075,"packId":21156140,"cardId":445731115},"returnTo":"/packs/21156140/subscribe"}' id='card-445731115'> <div class='header'> 91 </div> <div class='card-face question'> <div class='question-content'> What is HTML open tag? </div> </div> <div class='card-face answer'> <div class='answer-content'> Opening Tag — the first HTML tag used to start an HTML element. The tag type is surrounded by opening and closing angle brackets. </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":92,"qSoundUrl":null,"resources":{"deckId":12482075,"packId":21156140,"cardId":445731119},"returnTo":"/packs/21156140/subscribe"}' id='card-445731119'> <div class='header'> 92 </div> <div class='card-face question'> <div class='question-content'> What is HTML closing tag? </div> </div> <div class='card-face answer'> <div class='answer-content'> 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. </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":93,"qSoundUrl":null,"resources":{"deckId":12482075,"packId":21156140,"cardId":445731134},"returnTo":"/packs/21156140/subscribe"}' id='card-445731134'> <div class='header'> 93 </div> <div class='card-face question'> <div class='question-content'> What is HTML content? </div> </div> <div class='card-face answer'> <div class='answer-content'> Content — The information (text or other elements) contained between the opening and closing tags of an HTML element. </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":94,"qSoundUrl":null,"resources":{"deckId":12482075,"packId":21156140,"cardId":445803295},"returnTo":"/packs/21156140/subscribe"}' id='card-445803295'> <div class='header'> 94 </div> <div class='card-face question'> <div class='question-content'> What can attributes do for HTML elements? </div> </div> <div class='card-face answer'> <div class='answer-content'> Usually attributes either change an element’s behavior, provide metadata about the element, or provide labeling information about the element. </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":95,"qSoundUrl":null,"resources":{"deckId":12482075,"packId":21156140,"cardId":446079966},"returnTo":"/packs/21156140/subscribe"}' id='card-446079966'> <div class='header'> 95 </div> <div class='card-face question'> <div class='question-content'> How can we validate our HTML code? </div> </div> <div class='card-face answer'> <div class='answer-content'> 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. </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":96,"qSoundUrl":null,"resources":{"deckId":12482075,"packId":21156140,"cardId":446080024},"returnTo":"/packs/21156140/subscribe"}' id='card-446080024'> <div class='header'> 96 </div> <div class='card-face question'> <div class='question-content'> Why should we validate our HTML code? </div> </div> <div class='card-face answer'> <div class='answer-content'> 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. </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":97,"qSoundUrl":null,"resources":{"deckId":12482075,"packId":21156140,"cardId":446658779},"returnTo":"/packs/21156140/subscribe"}' id='card-446658779'> <div class='header'> 97 </div> <div class='card-face question'> <div class='question-content'> How do we add a tooltip to a clickable element? </div> </div> <div class='card-face answer'> <div class='answer-content'> To add tooltips to a clickable element like a link, add it as the title attribute. <p> <a href="https://www.codecademy.com" title="Codecademy is an online learning platform">Codecademy</a> is the best place to learn to code! </p> </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":98,"qSoundUrl":null,"resources":{"deckId":12482075,"packId":21156140,"cardId":446658827},"returnTo":"/packs/21156140/subscribe"}' id='card-446658827'> <div class='header'> 98 </div> <div class='card-face question'> <div class='question-content'> What is a tooltip? </div> </div> <div class='card-face answer'> <div class='answer-content'> 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"). </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":99,"qSoundUrl":null,"resources":{"deckId":12482075,"packId":21156140,"cardId":446658870},"returnTo":"/packs/21156140/subscribe"}' id='card-446658870'> <div class='header'> 99 </div> <div class='card-face question'> <div class='question-content'> What is the main issue with tooltips created with the title attribute? </div> </div> <div class='card-face answer'> <div class='answer-content'> 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. </div> </div> </div> </div> </div> </div> <div class='flashcards-sidebar'> <div class='sidebar-header'> <div class='react-component' id='flashcards-search-bar'> <div class='placeholder market-search-bar' id='flashcards-search-bar-placeholder'></div> </div> </div> <div class='sidebar-content'> <p class='deck-subject-heading'> <a class="decks-in-subject-link" href="/packs/web-development-masterdeck-codecademy-21156140"><span class="pack-name">Web Development Masterdeck (Codecademy)</span> (10 decks) </a></p> <ul class='deck-list-items'> <a class='deck-link ' href='/flashcards/the-internet-and-core-technologies-12482076/packs/21156140'> <li class='deck-list-item'>The Internet and Core Technologies</li> </a> <a class='deck-link selected' href='/flashcards/html-5-12482075/packs/21156140'> <li class='deck-list-item'>HTML 5</li> </a> <a class='deck-link ' href='/flashcards/css-12482077/packs/21156140'> <li class='deck-list-item'>CSS</li> </a> <a class='deck-link ' href='/flashcards/javascript-12482073/packs/21156140'> <li class='deck-list-item'>Javascript</li> </a> <a class='deck-link ' href='/flashcards/web-design-13742879/packs/21156140'> <li class='deck-list-item'>Web Design</li> </a> <a class='deck-link ' href='/flashcards/responsive-web-design-13746685/packs/21156140'> <li class='deck-list-item'>Responsive Web Design</li> </a> <a class='deck-link ' href='/flashcards/javascript-arrays-14447746/packs/21156140'> <li class='deck-list-item'>Javascript (Arrays)</li> </a> <a class='deck-link ' href='/flashcards/javascript-loops-14747219/packs/21156140'> <li class='deck-list-item'>Javascript (Loops)</li> </a> <a class='deck-link ' href='/flashcards/javascript-functions-14758471/packs/21156140'> <li class='deck-list-item'>Javascript (Functions)</li> </a> <a class='deck-link ' href='/flashcards/javascript-oop-13893574/packs/21156140'> <li class='deck-list-item'>Javascript (OOP)</li> </a> </ul> </div> </div> </div> <div id='tooltip-controller'></div> <div data='{"packId":21156140,"source":"spaced-repetition-modal","subject":"Web Development Masterdeck (Codecademy)","resources":{"deckId":12482075,"packId":21156140},"returnTo":"/packs/21156140/subscribe"}' id='spaced-repetition-modal-controller'></div> <div id='banner-controller'></div> <div id='dialog-modal-controller'></div> <div class='band band-footer'> <div class='footer-main'> <ul class='sections'> <li class='section key-links'> <p class='section-heading'> Key Links </p> <ul class='options-list'> <li class='option'> <a id="footer-pricing-link" class="option-link" href="/pricing?paywall=upgrade">Pricing</a> </li> <li class='option'> <a class="option-link" href="/companies">Corporate Training</a> </li> <li class='option'> <a class="option-link" href="/teachers">Teachers & Schools</a> </li> <li class='option'> <a class="option-link" target="_blank" rel="nofollow noopener noreferrer" href="https://itunes.apple.com/us/app/brainscape-smart-flashcards/id442415567?mt=8">iOS App</a> </li> <li class='option'> <a class="option-link" target="_blank" rel="nofollow noopener noreferrer" href="https://play.google.com/store/apps/details?id=com.brainscape.mobile.portal">Android App</a> </li> <li class='option'> <a class="option-link" target="_blank" rel="noopener" href="https://www.brainscape.com/faq">Help Center</a> </li> </ul> </li> <li class='section subjects'> <p class='section-heading'> Subjects </p> <ul class='options-list'> <li class='option'> <a class="option-link" href="/subjects/medical-nursing">Medical & Nursing</a> </li> <li class='option'> <a class="option-link" href="/subjects/law">Law Education</a> </li> <li class='option'> <a class="option-link" href="/subjects/foreign-languages">Foreign Languages</a> </li> <li class='option'> <a class="option-link" href="/subjects-directory/a">All Subjects A-Z</a> </li> <li class='option certified-classes'> <a class="option-link" href="/learn">All Certified Classes</a> </li> </ul> </li> <li class='section company'> <p class='section-heading'> Company </p> <ul class='options-list'> <li class='option'> <a class="option-link" href="/about">About Us</a> </li> <li class='option'> <a target="_blank" class="option-link" rel="nofollow noopener noreferrer" href="https://brainscape.zendesk.com/hc/en-us/articles/115002370011-Can-I-earn-money-from-my-flashcards-">Earn Money!</a> </li> <li class='option'> <a target="_blank" class="option-link" href="https://www.brainscape.com/academy">Academy</a> </li> <li class='option'> <a target="_blank" class="option-link" href="https://brainscapeshop.myspreadshop.com/all">Swag Shop</a> </li> <li class='option'> <a target="_blank" rel="nofollow noopener" class="option-link" href="/contact">Contact</a> </li> <li class='option'> <a target="_blank" rel="nofollow noopener" class="option-link" href="/terms">Terms</a> </li> <li class='option'> <a target="_blank" class="option-link" href="https://www.brainscape.com/academy/brainscape-podcasts/">Podcasts</a> </li> <li class='option'> <a target="_blank" class="option-link" href="/careers">Careers</a> </li> </ul> </li> <li class='section find-us'> <p class='section-heading'> Find Us </p> <ul class='social-media-list'> <li class='option twitter-badge group'> <a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://twitter.com/Brainscape"><img data-src="/pks/images/shared/twitterx-af917e8b474ed7c95a19.svg" alt="twitter badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="24" height="24" /></a> </li> <li class='option linkedin-badge group'> <a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://www.linkedin.com/company/brainscape/"><img data-src="/pks/images/shared/linkedin-2f15819658f768056cef.svg" alt="linkedin badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="24" height="24" /></a> </li> <li class='option facebook-badge group'> <a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://www.facebook.com/Brainscape"><img data-src="/pks/images/shared/facebook-1598a44227eabc411188.svg" alt="facebook badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="24" height="24" /></a> </li> <li class='option youtube-badge group'> <a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://www.youtube.com/c/BrainscapeNY"><img data-src="/pks/images/shared/youtube-7f2994b2dc1891582524.svg" alt="youtube badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="24" height="24" /></a> </li> <li class='option pinterest-badge group'> <a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://www.pinterest.com/brainscape/"><img data-src="/pks/images/shared/pinterest-04f51aa292161075437b.svg" alt="pinterest badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="24" height="24" /></a> </li> <li class='option tiktok-badge group'> <a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://www.tiktok.com/@brainscapeu"><img data-src="/pks/images/shared/tiktok-644cf4608bd73fbbb24f.svg" alt="tiktok badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="24" height="24" /></a> </li> <li class='option insta-badge group'> <a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://www.instagram.com/brainscape/"><img data-src="/pks/images/shared/insta-210cc2d059ae807961d2.svg" alt="insta badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="24" height="24" /></a> </li> </ul> <div class='get-the-app'> <div class='qr-code'> <img data-src="https://www.brainscape.com/assets/cms/public-views/shared/shortio-from-homepage.png" alt="QR code" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="130" height="130" /> </div> <div class='app-badges'> <div class='badge apple-badge'> <a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://apps.apple.com/us/app/brainscape-smart-flashcards/id442415567"><img data-src="/pks/images/shared/apple-badge-b6e4f380fb879821d601.svg" alt="apple badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="124" height="50" /></a> </div> <div class='badge android-badge'> <a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://play.google.com/store/apps/details?id=com.brainscape.mobile.portal&utm_source=global_co&utm_medium=prtnr&utm_content=Mar2515&utm_campaign=PartBadge&pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1"><img data-src="/pks/images/shared/android-badge-a2251833dc7f6ca8879c.svg" alt="android badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="124" height="50" /></a> </div> </div> </div> </li> </ul> </div> <div class='footer-blurb'> Brainscape helps you reach your goals faster, through stronger study habits. <br> © 2025 Bold Learning Solutions. <a class="option-link" href="/terms">Terms and Conditions</a> </div> </div> <script> if (typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ === 'object') { __REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function() {}; } </script> <script> window.addEventListener('load', () => { setTimeout(() => { const script = document.createElement('script'); script.src = "/pks/js/public-flashcards-page-9140413b5150ce9700f9.js"; script.defer = true; document.body.appendChild(script); }, 0); }); </script> <script src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js" defer="defer"></script> <script> document.addEventListener("mainSharedready", () => { GaHelper.setGaDimension("dimension1","No"); }); </script> <script type='application/ld+json'> {"@context":"https://schema.org/","@type":"Quiz","about":{"@type":"Thing","name":"HTML 5"},"hasPart":[{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What is a text editor?","acceptedAnswer":{"@type":"Answer","text":"A text editor is a program that allows us to write code."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What does HTML stand for?","acceptedAnswer":{"@type":"Answer","text":"Hypertext Markup Language"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What are the rules that every html file must follow (tags)?","acceptedAnswer":{"@type":"Answer","text":" "}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What is the shortcut (in sublime) for quickly creating the default tags for html page?","acceptedAnswer":{"@type":"Answer","text":"Type html and hit the tab key."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"","acceptedAnswer":{"@type":"Answer","text":"All HTML documents must start with a declaration.The declaration is not an HTML tag. It is an \"information\" to the browser about what document type to expect."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What is the difference between a tag and an element?","acceptedAnswer":{"@type":"Answer","text":"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"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"","acceptedAnswer":{"@type":"Answer","text":" tag is used to highlight in bold that part of the text, which we want to make more obvious for the user. "}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"","acceptedAnswer":{"@type":"Answer","text":"This element creates a paragraph in html file."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"","acceptedAnswer":{"@type":"Answer","text":"This element creates a header in html file."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"","acceptedAnswer":{"@type":"Answer","text":"The strong element will bold a text. The element was used in the past."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"","acceptedAnswer":{"@type":"Answer","text":"The emphasis element will italicize text."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"","acceptedAnswer":{"@type":"Answer","text":"The tag defines an ordered list. An ordered list can be numerical or alphabetical. Ex: Coffee Tea Milk "}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"","acceptedAnswer":{"@type":"Answer","text":"The tag defines an unordered (bulleted) list. Ex: Coffee Tea Milk "}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"","acceptedAnswer":{"@type":"Answer","text":"The HTML element is used to represent an item in a list. It must be contained in a parent element: an ordered list ( ), an unordered list ( ), or a menu ( )."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What are nested list?","acceptedAnswer":{"@type":"Answer","text":"Nested list are list inside of list. Ex: Coffee Tea Black tea Green tea Milk "}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What are self closing tags?","acceptedAnswer":{"@type":"Answer","text":"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 . An example of this is an tag that allows you to add an image to a web page."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"","acceptedAnswer":{"@type":"Answer","text":"The tag inserts a single line break. (There is no closing tag)"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"","acceptedAnswer":{"@type":"Answer","text":"The 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 element is most often displayed as a horizontal rule that is used to separate content (or define a change) in an HTML page."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"","acceptedAnswer":{"@type":"Answer","text":"The 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 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."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What are the two required attributes for an tag?","acceptedAnswer":{"@type":"Answer","text":"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"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What do attributes require?","acceptedAnswer":{"@type":"Answer","text":"Attributes require a name and a value. Ex: Paragraph in English"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What are attributes?","acceptedAnswer":{"@type":"Answer","text":"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\"."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"","acceptedAnswer":{"@type":"Answer","text":"The anchor tag, used to specify the text that is the \"anchor\" for a link. Ex: Learn to code!"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"","acceptedAnswer":{"@type":"Answer","text":"This is a button tag."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What is hypertext?","acceptedAnswer":{"@type":"Answer","text":"Hypertext is text that is linked to other text."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What does href stand for?","acceptedAnswer":{"@type":"Answer","text":"hyperlink reference"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What is the href attribute?","acceptedAnswer":{"@type":"Answer","text":"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."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What are relative paths?","acceptedAnswer":{"@type":"Answer","text":"Relative paths are links to another page on the same website, so we can omit the first part."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"Explain separation of concerns","acceptedAnswer":{"@type":"Answer","text":"separation of concerns is a design principle for separating a computer program into distinct sections such that each section addresses a separate concern."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What is the html link tag for?","acceptedAnswer":{"@type":"Answer","text":"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."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"rel attribute","acceptedAnswer":{"@type":"Answer","text":"rel attribute specifies the relationship between the current document and the linked resource. Ex: "}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What is an event?","acceptedAnswer":{"@type":"Answer","text":"An event is something that can happen in a browser, like clicking or hovering with your mouse."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"How can attributes set events?","acceptedAnswer":{"@type":"Answer","text":"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: Repaint"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What does SQL stand for?","acceptedAnswer":{"@type":"Answer","text":"SQL stands for structured query language."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What is the function of SQL?","acceptedAnswer":{"@type":"Answer","text":"SQL stores information in tables, which is simply a collection of information organized into rows and columns. I"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What is programming?","acceptedAnswer":{"@type":"Answer","text":"programming is giving a set of instructions to a computer to execute."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What is the difference between programming and coding?","acceptedAnswer":{"@type":"Answer","text":"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."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"HTML is a declarative language. How are declarative languages different than non-declarative languages?","acceptedAnswer":{"@type":"Answer","text":"Declarative languages tell an interpreter what to do, not how to do it."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What is the main goal of html?","acceptedAnswer":{"@type":"Answer","text":"The main goal of html is to structure a page."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What should we be asking ourselves when we are developing a website?","acceptedAnswer":{"@type":"Answer","text":"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."}}],"educationalAlignment":[{"@type":"AlignmentObject","alignmentType":"educationalSubject","targetName":"HTML 5"}]} </script> </body> </html>