HTML Flashcards

1
Q

Define Syntax

A

The way in which words are put together to define phrases, clauses, and sentences. In this case, html syntax tells the web browser how to display a web page.

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

What is the purpose of a Web Browser?

A

To transform code into a recognizable web page.

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

What does HTML stand for?

A

Hyper Text Markup Language. Hyper Text means “text with links”

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

What language affects the layout of a web page?

A

CSS = Cascading Style Sheets

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

What syntax makes up the “skeleton” of an HTML webpage?

A

<!DOCTYPE html>

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

Describe a tag.

A

Words inside of horizontal carrots. Example: <strong></strong> These are html tags.

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

What is the difference between and opening and a closing tag?

A

is an opening tag. is a closing tag. / is the difference between the two.

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

What is “nesting” tags? Give an example.

A

Nesting tags is a tag inside a tag. Some text!

For example Tags must be closed in the correct order to properly nest.

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

What are the two primary parts to a html file?

A

The head and the body.

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

Define the head.

A

The head includes important information about the webpage such as the title.
<!DOCTYPE>

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

Define the title.

A

The words we see on the browser tab.
<!DOCTYPE>

A TITLE

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

What is an element?

A

The element is all content within and including tags.

For example: element = + content +

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

Define the body?

A

The content that is visible on the webpage.

Body tags are not nested inside the “head” tags.

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

Define a paragraph.

A

Tags placed inside the body in which text can be placed on the body of the webpage.

For example: <p>This is text</p>

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

What are heading tags?

A

are examples of opening and closing heading tags.

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

Explain how to change a headings font size?

A

Headings are labeled 1-6 to affect the font size of the text between the tags. <h1> being the largest font size and <h6 being the smallest font size.

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

Describe a tag that would be used to display an image.

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

How would you link an image so that a user could click on the image to display another website?

A

Surround the image tag with the <a> tag.</a>

For example:
<a>Learn to code!</a>

The image tag may be placed where “Learn to code” is located to make the image link to another website.

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

How would link text to another website (hypertext)?

A

<a>Learn to code!</a>

“Learn to code” is the displayed text on the webpage. The information within the <a> tags tells the text to link to a specified website.</a>

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

Why is indentation important when writing your code?

A

Indentation helps to keep code organized and readable especially if you have to come back to it after a period of time.

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

What is an ordered list?

A

A numbered list located in the body of a webpage.

For example the below text would be ordered by number:
<ol>
<li>Raindrops on roses</li>
<li>Whiskers on kittens</li>
<li>Bright copper kettles</li>
</ol>
  1. Raindrops on roses
  2. Whiskers on kittens
  3. Bright copper kettles
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

What are the tags used for an ordered list?

A

<ol></ol>

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

What is an unordered list

A

A bullet list located in the body of a webpage.

For example the below text would be ordered as bullets:
<ul>
<li>Raindrops on roses</li>
<li>Whiskers on kittens</li>
<li>Bright copper kettles</li>
</ul>

Raindrops on roses
Whiskers on kittens
Bright copper kettles

24
Q

What are the tags used for an unordered list?

A

<ul></ul>

25
Q

How would you create a list inside a list (nested list)?

A
<ol>
	<li>Dad's interests
		<ul>
			<li>football</li>
			<li>knitting</li>
		</ul>
	</li>
	<li>Mom's interests
		<ul>
			<li>hating football</li>
			<li>skydiving</li>
		</ul>
	</li>
</ol>
26
Q

How do you comment out a line of code?

A

<!-- -->

For example: <!-- Comment this code out -->

27
Q

What is an attribute?

A

An attribute is a characteristic or some description for the content in the element as withsrcin<img></img>andhrefin<a>.</a>

28
Q

What code would be used to change font size in a paragraph?

A

Use thestyleattribute. Make it equal to font-size, followed by a colon, the size you want, and end it withpx(short for “pixels”).

For example: <p style="font-size: 12px;"></p>

Note: If you’re having trouble with your font sizes, reset your browser’s zoom by pressing Cmd-0 or Ctrl-0.

29
Q

What code would be used to change text color in a heading?

A

To change the color of text add the style attribute in the opening tag, then make the style equal to “color:blue” (or whatever color you like).

For example: <h2 style="color: red;"></h2>

30
Q

How would you change the colorandthe size of the text in the heading?

A

Add a semi-colon between color and size.

For example: <h2 style="color: green; font-size: 12px;"></h2>

31
Q

What code would be used to change font type in a heading?

A

This is called the font family. To change font type, simply add the style attribute in the opening tag, then make the style equal to “font-family:Helvetica” (or whatever font you like).

For example: <h2 style="font-family: Garamond;">

32
Q

Give an example of a code element that would be used to change font family, color and size in a paragraph.

A

<p>
</p>

33
Q

Give an example of a code element that would be used to change the body background color to brown.

A
34
Q

Give an example of a code element that would be used to change the ordered list background color to yellow.

A

<ol></ol>

35
Q

Give an example of a code element that would center the alignment of a header.

A

<h1></h1>

36
Q

Give an example of a tag that would make surrounding text bold.

A

<strong></strong>

37
Q

Give an example of a tag that would italicize surrounding text.

A

<em></em>

38
Q

What is a table?

A

Used to store tabular data so it is easy to read neatly in a table with rows and columns.

39
Q

What tag is used to display text or images in a table on a webpage.

A
40
Q

What tag is used to create rows?

A
41
Q

What tag is used to create columns?

A
42
Q

Give an example of code that you would add to the body of the webpage and would display three rows and two columns of information.

A

King Kong
1933

            Dracula
            1937

            Bride of Frankenstein
            1938
43
Q

What tags are used for table head and table body?

A
44
Q

How would you describe

A

The tag can be thought of as containing information about a table.

45
Q

How would you describe

A

The tag can be thought of as containing the actual tabular data.

46
Q

Where are the tags located on the webpage?

A

is located within or nested in the of the webpage.

47
Q

Where are the tags located on the webpage?

A

is located outside and above the tags within or nested in the of the webpage.

48
Q

Give an example of code that you would add to the body of the webpage and would format a table using and .

A

Famous Monster
Birth Year

                King Kong
                1933     

                Dracula
                1897

                Bride of Frankenstein
                1935
49
Q

What tags is used for a Table Title and where are these tags placed?

A

Use the tags with text nested inside the tags.

50
Q

How is the Table Title centered over the table?

A

For centering the Table Title, use the colspan attribute within the tag.

For example: 3 columns across!

51
Q

Describe the <div> tag.

A

Short for “division,”<div>allows you to divide your page into containers (that is, different pieces) to style different parts of your website individually.

For example:

<div></div>

This defines an area 50 x 50 px that has a background color of red on your webpage.

52
Q

Is it possible to make a <div> link to another website link?

A

Yes.

For example:
<a><div style="width: 50px; height: 50px; background-color: red;"></div></a>

53
Q

What does the <span> tag allow?</span>

A

Allows you to control styling for smaller parts of your page, such as text. For example, if you always want the first word of your paragraphs to be red, you can wrap each first word in<span></span>tags and make them red using CSS.

54
Q

Give an example for the use of <span> in your code to change only one word’s text color.</span>

A

<p>This text is black, except for the word <span>red</span>!</p>

55
Q

Give an example for the use of <span> in your code to change only one word’s text color.</span>

A

<p>My favorite font is <span>Futura</span>!</p>

56
Q

What is a description list?

A

Description lists are used for any type of name/value pair such as terms and their definitions.

57
Q

What are the elements of a description list?

A

<dl>Description List</dl>

<dt>Term or a label</dt>

<dd>Value, such as a description or a definition</dd>