HTML Flashcards

1
Q

• Where do you put non-visible content about the HTML document?

A

nested within the head element

this is not visible

This is where metadata is stored

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

• Where do you put visible content about the HTML document?

A

Within the body element

….

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

• Where do the

and tags go in a valid HTML document?

A

<

begins before the body and after the html element

body happens after the losing tag of the element

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q
  • What is the purpose of a declaration?
A

The DOCTYPE declaration is an instruction to the web browser about what version of HTML the page is written in. This ensures that the webpage is parsed the same way by different web browsers

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

Is an HTML list a block element or an inline element?

A

Block element

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

What is the difference between an ordered list and an unordered list in HTML?

A
  • Ordered list uses numbers, unordered makes a list with data, usually bullet points
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

List 5 html elements

A

html, p, body, h1, img

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

Give an example of an HTML entity (escape character)

A

ampersand (&) with &

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

How do block-level elements affect the document flow?

A

A Block-level element occupies the entire horizontal space of its parent element (container), and vertical space equal to the height of its contents, thereby creating a “block”.

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

What is a relative URL?

A

A relative URL is a URL that only includes the path. The path is everything that comes after the domain, including the directory and slug. Because relative URLs don’t include the entire URL structure, it is assumed that when linking a relative URL, it uses the same protocol, subdomain and domain as the page it’s on.

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

What is an absolute URL

A

includes full link to website

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

What HTML tag is used to link to another website

A

an anchor tag

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

What is the purpose of an HTML attribute?

A

HTML attributes can be used to change the color, size, and other features of HTML elements. For example, you can use an attribute to change the color or size of a font for a text element or the width and height for an image element.

name - value

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

Escape Characters

A

There are some characters that are used in and reserved by HTML code. (For example, the left and right angled brackets.)

For example, to write a left angled bracket, you can use either < or <. For an ampersand, you can use either & or &.

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

How do you indicate the relative link to a parent directory?

A

../filename

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

How do you indicate the relative link to a child directory?

A

example/index.html

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q
  1. How do you indicate the relative link to a grand parent directory?
A

../../

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

How do you indicate the relative link to the same directory?

A
  1. state name of file you’re looking for ./.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

What is the purpose of an HTML form element?

A
  1. To collect data from users – group up form control elements, to send over to server – encapsulate all form control elements
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

Give five examples of form control elements.

A

Checkboxes, drop down, option, select, text input, password, file upload, text area

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

Give three examples of type attribute values for HTML elements.

A
  1. – date, image, file, submit, text,radio
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

Is an HTML element a block element or an inline element?

A

Inline

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

Span

A

default inline

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

div

A

default block

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

Attribute

A

name -> value

26
Q

What are the six primary HTML elements for creating tables?

A
  • Table tr td th tbody thead tfoot
27
Q

What purpose do the thead and tbody elements serve?

A

The HTML element defines a set of rows defining the head of the columns of the table.

28
Q

Tr

A

start of row

29
Q

td

A

start of cell

30
Q

td col span

tr col span

A

The colspan attribute can be used on a

or element and indicates how many columns that cell should run across

31
Q

td rowspan

A

The rowspan attribute can be used on a

or element to indicate how many rows a cell should span down the table.

32
Q

Everything about Tables

A
33
Q

All excape characters

A
34
Q

Selector and Declaration

A
35
Q

Where do you put the label?

A

AboVE or to thE lEFt:

● Text inputs ● Text areas
● Select boxes ● File uploads

to thE rIGht:

● Individual checkboxes ● Individual radio buttons

36
Q

How do make a dead-link?

A

Sometimes you want to add a elements to your website before you know where they will link.

This is also handy when you’re changing the behavior of a link using JavaScript

37
Q

How do you create an internal link?

A
38
Q

How do you make a site open in a new tab?

A
39
Q

How do you turn an image into a link?

A

40
Q

How to build a web form?

A

You can build web forms that actually submit data to a server using nothing more than pure HTML. You can do this by specifying an action attribute on your form element.

For example:

41
Q

radio buttons

A

All related radio buttons should have the same name attribute to create a radio button group. By creating a radio group, selecting any single radio button will automatically deselect the other buttons within the same group ensuring only one answer is provided by the user.

3 ways:

Indoor

Indoor

Indoor

42
Q

Meta tag, what goes in?

A

Metadata elements, such as link, meta, title, and style, typically go inside the head element.

Example title

43
Q

negative margin

A

An element’s margin controls the amount of space between an element’s border and surrounding elements.

If you set an element’s margin to a negative value, the element will grow larger.

Try to set the margin to a negative value like the one for the red box.

Change the margin of the blue box to -15px, so it fills the entire horizontal width of the yellow box around it.

44
Q

sizing fonts etc

A

The two main types of length units are absolute and relative. Absolute units tie to physical units of length. For example, in and mm refer to inches and millimeters, respectively. Absolute length units approximate the actual measurement on a screen, but there are some differences depending on a screen’s resolution.

Relative units, such as em or rem, are relative to another length value. For example, em is based on the size of an element’s font. If you use it to set the font-size property itself, it’s relative to the parent’s font-size.

45
Q

!important

A

In many situations, you will use CSS libraries. These may accidentally override your own CSS. So when you absolutely need to be sure that an element has specific CSS, you can use !important.

Let’s go all the way back to our pink-text class declaration. Remember that our pink-text class was overridden by subsequent class declarations, id declarations, and inline styles.

Let’s add the keyword !important to your pink-text element’s color declaration to make 100% sure that your h1 element will be pink.

An example of how to do this is:

color: red !important;

46
Q
A
47
Q

figure element, fig caption

A

<figure>
<img src=”pic_trulli.jpg” alt=”Trulli” style=”width:100%”>
<figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>

placed under img, does not effect document flow

48
Q

Action Attribute –

A

The action attribute indicates where form data should be sent. For example,

tells the browser that the form data should be sent to the path /submit-url.

48
Q

Action Attribute –

A

The action attribute indicates where form data should be sent. For example,

tells the browser that the form data should be sent to the path /submit-url.

49
Q

name attribute

A

In order for a form’s data to be accessed by the location specified in the action attribute, you must give the text field a name attribute and assign it a value to represent the data being submitted. For example, you could use the following syntax for an email address text field: .

50
Q

fieldset

A

The fieldset element is used to group related inputs and labels together in a web form. fieldset elements are block-level elements, meaning that they appear on a new line.

51
Q

legend

A

The legend element acts as a caption for the content in the fieldset element. It gives users context about what they should enter into that part of the form.

52
Q

article elements commonly contain multiple elements that have related information.

A

<article>

<p>French Vanillap>

<p>3.00p>

article>

<article>

<p>Caramel Macchiatop>

<p>3.50p>

article>

53
Q

How to make everything inside a div appear next to each other,

instead of:

A

The p elements are nested in an article element with the class attribute of item. You can style all the p elements nested anywhere in elements with a class named item like this:

.item p { }

Using the above selector, add a display property with value inline-block so the p elements behave more like inline elements.

54
Q

a:visited

A

Step 81

You change properties of a link when the link has actually been visited by using a pseudo-selector that looks like a:visited { propertyName: propertyValue; }.

Change the color of the footer Visit our website link to be grey when a user has visited the link.

Submit and go to next challenge

55
Q

a:active

A
56
Q

a:active

A
57
Q
A

add

58
Q

What does UTF-8 mean?

A

To tell browsers how to encode characters on your page, set the charset to utf-8. utf-8 is a universal character set that includes almost every character from all human languages.

59
Q

How to make sure, there is no horizontal scroll bar with a body of 100%

A

Now, get rid of the horizontal scroll-bar, by setting the body default margin added by some browsers to 0.

60
Q

DIRECT DESCENDENT

A

DIV > A

means the first child that is a direct descendent, so it could be the last thing in a whole list that is a direct child

61
Q

h1 + p

A

first p after an h1