Mod 3 Flashcards

1
Q

What are HTML elements?

A

HTML structures documents by using elements. Elements can stand on their own or be nested within other elements. For example, a paragraph element might exist within a section element or a table row will be within a table. The way elements are represented in HTML is by using a pair of opening and closing tags. An opening tag has the element name enclosed in <> and a closing tag has the element name enclosed in </>.

Example:

<h1>Display this as the highest level heading.</h1>

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

What are the parts in the basic structure of an HTML document?

A

-The first line <!DOCTYPE html> is called the Document Type Declaration.
-Following this, we have the <html> element which is the root element of the document. Often has lang attribute.
-Inside the <html> element, we have the elements <head> and <body>.

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

What is a <head> element in HTML?

A

The <head> element is used to specify meta-data about the document and is also called the header of the document. It helps the browser and robots (e.g., search engine crawlers) understand what is on the page.

Within <head> - </head>, the browser tab title will show the contents of the <title> element.</title>

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

What is a <body> element in HTML?

A

The <body> element contains the actual content which will be visible in the browser. The actual content the user will see all goes in the body of the page.

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

What are HTML attributes?

A

Attributes are used to provide additional information about an element. Attributes are usually specified using the syntax of attribute-name=”attribute-value” or attribute-name=’attribute-value’.

Example:
<input></input>

The type attribute of this element determines the behavior of this element.

The checked attribute doesn’t have a value. A check-box is checked if the attribute checked exists and it is unchecked if that attribute does not exist. The value of the checked attribute is meaningless.

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

What are HTML entities?

A

Certain characters in HTML are reserved for special use. We can display these characters using entities, which act as special codes for characters. Entities are strings that begin with & and end with ; and are provided to display reserved characters as well as characters that may be difficult to type on a keyboard.

Entity Description
< Displays <
> Displays >
& Displays &
" Displays “

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

In HTML, what is the difference between block-level elements and in-line elements?

A

Block-level elements break up the flow on the content and are typically displayed by browsers with a newline both before and after the element. (like <p>)
As opposed to this in-line elements do not break the flow of the content. (like <span>)</span>

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

When should you use an HTML Heading?

A

If you would potentially find something listed in the table of contents, it is a great candidate for a heading. Headings should be used to add organization to a document. So any section or sub section that needs a title can use a heading for it. One could make a good argument that they could also be used to add a title to something like an image.

Headings should be used for organization, not style.

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

What is an HTML <div> element used for?

A

The div element, e.g., <div>Content Here</div>, is used to divide content. It should be used as a last resort when no other element makes sense. If you want to divide content purely for stylistic reasons this is the element to use. It conveys no meaning and just generically divisions content.

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

What is an HTML <section> element used for?

A

The section is used to make a thematic grouping of content. It is a group of content that is all related but does not quite stand on its own. Usually the first child of a section will be a heading that describes what is in that section. If there is not a good way to classify the content in the section using a heading, you may want to consider using a div instead. A section should only be used if all the content is related.

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

What is an HTML <article> element used for?

A

The article element is structurally the same as the section except that it is an <article> tag instead of a <section> tag. The requirements for a article are stricter than a section. Not only should the content all be related but the content should generally stand on its own as a composition.

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

What is an HTML <anchor> element?</anchor>

A

The content between the <a> and </a> tags should describe the link when someone clicks to navigate to it. The href attribute is used to specify the URL where the link will take the user when it is clicked.

Example:
<a>A link to MDN.</a>

The anchor element can also be used to link to a specific location in a document. To do this:

  1. Add an id attribute to the element we want to link to ( Like: <h2 id="browsers">Browsers</h2>)
  2. In the URL, add the value of the id attribute at the end, preceded by a hash symbol #.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

How does the HTML img element work?

A

The img tag is used to display images: <img></img>. The src attribute is required and indicates the URL where the image is located. No closing tag is used for images. By default images display in-line. So no new line is made for them. The alt attribute is not required, but is very important for accessibility.

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

What is the HTML <strong> element?</strong>

A

The strong element marks text that is more important, e.g., <strong>This is important</strong>. It requires an opening and closing tag.

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

What is the HTML <b> element?</b>

A

The b element makes text stylistically different from other text. Look at me, I am <b>different</b>. This could be used to highlight keywords in a paragraph or conform to style guidelines set by some journal. It does not give additional meaning to the text. Text inside a b element is no more important than text outside of the b element.

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

What is the HTML <em> element?</em>

A

The em element adds emphasis to a word. Often making it italic. “I love kittens” suggests that the emphasis is on the I.

17
Q

What are the three kinds of HTML lists?

A
  1. unorder list:

<ul>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ul>

The ul element starts and ends the unordered list. It can only contain list items, li as children. Those list items can however contain most other HTML elements. The above list will looks like this:

-first item
-second item
-third item

  1. ordered list

<ol>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ol>

Numbered or otherwise sequenced, unlike unordered lists. (like the list we are using for list types)

  1. definition lists

<dl>
<dt>Name</dt>
<dd>Godzilla</dd>
<dt>Born</dt>
<dd>1952</dd>
<dt>Birthplace</dt>
<dd>Japan</dd>
<dt>Color</dt>
<dd>Green</dd>
</dl>

Name
Godzilla
Born
1952
Birthplace
Japan
Color
Green

18
Q

What are the elements of an HTML table?

A

<table>
<caption>Characteristics with positive and negative sides</caption>
<thead>
<tr>
<th>Characteristic</th>
<th>Negative</th>
<th>Positive</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mood</td>
<td>Sad</td>
<td>Happy</td>
</tr>
<tr>
<td>Grade</td>
<td>Failing</td>
<td>Passing</td>
</tr>
</tbody>
</table>

  1. table: opens and closes the table
  2. caption: represents the title and description of the table
  3. thread: the table header. It can contain rows that represent the header of the table. Typically contains th elements
  4. tbody: he body of the table and contains the rows that actually have data in them, typically td cells
  5. tr: a row in the table, contains td or th
  6. td: a data cell. Each cell is one column if every row has the same number of cells. Use colspan attribute to span multiple columns
  7. th: his is a header cell it should signify what is in the column below it or the row beside it.
19
Q

What file in the root directory is commonly used as the homepage?

A

index.html

20
Q

What is an absolute URL?

A

An absolute URL is a complete URL to a resource including the protocol and the domain name. For example:

The URL https://module3.cs290.com/index.html

21
Q

What is a relative URL?

A

A relative URL points to a location relative to the file in which we use that URL.

22
Q

What is the HTML link element?

A

link is used to specify a relationship between a document and an external resource. The href attribute is used to specify the URL of the external resource. The rel attribute, which stands for “relationship”, is used to specify the relationship between the external resource and the HTML document. Two commonly used values of rel are stylesheet and icon.

23
Q

What is the HTML script element?

A

We add JavaScript code to an HTML document using the script element. We can either simply embed JavaScript code inside an opening and a closing

 tag or use the script tag to refer to a JavaScript file using the src attribute to specify the URL for that file.
24
Q

What is an HTML form element?

A

We add a form to an HTML document using a form tag that must have an opening and a closing tag. In addition to general content like paragraphs, headers or images forms almost always include input elements.

The form tag itself has two very important attributes.

  • The first is action which specifies where the request from the form should be sent. When we want to submit the form to the same website from which the webpage containing the form was download, it is typical to use an absolute URL without the protocol and the domain name.
  • The second important attribute is method which specifies the HTTP method to be used in the HTTP request sent when the form is submitted. The typical values are GET or POST.
25
Q

In HTML, what is a query string?

A

Example:

http://localhost:3000/review?name=Nauman+Chaudhry&email=chaudhrn%40oregonstate.edu&referrer=friend&rating=yes&comments=Testing+the+form&subscribe=on

The ? indicates the start of the query string. The query string is composed of key-value pairs, with an = between a key and its corresponding value, and an & separating the different key-value pairs.

26
Q

What is percent or URL encoding?

A

The process whereby certain special characters that have a specific meaning within URLs are encoded with other characters.

Example:

the @ character in the email has been replaced by %40

27
Q

Consider an Express server is running the following code

‘use strict’;

const express = require(‘express’);
const app = express();
const PORT = 3000;

app.use(express.static(‘public’));

app.listen(PORT, () => {
console.log(Server listening on port ${PORT}...);
});

There is a public directory at the root level and it includes one file named index. The server receives a GET request for the resource /

What will the server return as the response?

A

404 status code, i.e., resource not found