Html Basics Flashcards

1
Q

<pre></pre>

A

The HTML <pre> element defines preformatted text.

The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks:</pre></pre>

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

<hr></hr>

A

horizontal line

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

text-align

A

The CSS text-align property defines the horizontal text alignment for an HTML element:

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

The HTML element defines text that should be marked or highlighted:

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

<ins></ins>

A

The HTML <ins> element defines a text that has been inserted into a document. Browsers will usually underline inserted text:</ins>

</ins>

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

A

The HTML element defines subscript text. Subscript text appears half a character below the normal line, and is sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like H2O:

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

A

The HTML element defines superscript text. Superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font. Superscript text can be used for footnotes, like WWW[1]:

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

<blockquote></blockquote>

A

The HTML <blockquote> element defines a section that is quoted from another source.

</blockquote>

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

The HTML tag defines a short quotation.

Browsers normally insert quotation marks around the quotation.

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

<abbr></abbr>

A

The HTML <abbr> tag defines an abbreviation or an acronym, like “HTML”, “CSS”, “Mr.”, “Dr.”, “ASAP”, “ATM”.</abbr>

Marking abbreviations can give useful information to browsers, translation systems and search-engines.</abbr>

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

<address></address>

A

The HTML <address> tag defines the contact information for the author/owner of a document or an article.

The contact information can be an email address, URL, physical address, phone number, social media handle, etc.</address>

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

<cite></cite>

A

The HTML <cite> tag defines the title of a creative work (e.g. a book, a poem, a song, a movie, a painting, a sculpture, etc.).</cite>

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

dir=”rtl”

A

BDO stands for Bi-Directional Override.

The HTML tag is used to override the current text direction:

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

The CSS border

A

The CSS border property defines a border around an HTML element.
p {
border: 2px solid powderblue;
}

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

padding

A

The CSS padding property defines a padding (space) between the text and the border.

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

target attributes

A

The target attribute can have one of the following values:

_self - Default. Opens the document in the same window/tab as it was clicked
_blank - Opens the document in a new window or tab
_parent - Opens the document in the parent frame
_top - Opens the document in the full body of the window

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

absolute URL vs relative URL

A

Both examples above are using an absolute URL (a full web address) in the href attribute.

A local link (a link to a page within the same website) is specified with a relative URL (without the “https://www” part):

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

Link to an Email Address

A

Use mailto: inside the href attribute to create a link that opens the user’s email program (to let them send a new email):
<a>Send email</a>

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

Link Buttons

A

A link can also be styled as a button, by using CSS:

a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
background-color: red;
}

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

Create a Bookmark in HTML

A

First, use the id attribute to create a bookmark:

<h2>Chapter 4</h2>

Then, add a link to the bookmark (“Jump to Chapter 4”), from within the same page:
<a>Jump to Chapter 4</a>

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

bookmark on another page:

A

You can also add a link to a bookmark on another page:

<a>Jump to Chapter 4</a>

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

An image map is an image with clickable areas

A

<img></img>

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

Background Image on a HTML element

A

To add a background image on an HTML element, use the HTML style attribute and the CSS background-image property:
style=”background-image: url(‘img_girl.jpg’);”>

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

Background Image on a Page

A

If you want the entire page to have a background image, you must specify the background image on the element:
body {
background-image: url(‘img_girl.jpg’);
}

25
Q

To avoid the background image from repeating itself

A
background-repeat property to no-repeat
body {
  background-image: url('example_img_girl.jpg');
  background-repeat: no-repeat;
}
26
Q

Background Cover

A
body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
27
Q

Background Stretch

A
body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}
28
Q

<hr></hr>

A

horizontal line

29
Q

text-align

A

The CSS text-align property defines the horizontal text alignment for an HTML element:

30
Q
A

The HTML element defines text that should be marked or highlighted:

31
Q

<ins></ins>

A

The HTML <ins> element defines a text that has been inserted into a document. Browsers will usually underline inserted text:</ins>

</ins>

32
Q

A

The HTML element defines subscript text. Subscript text appears half a character below the normal line, and is sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like H2O:

33
Q

A

The HTML element defines superscript text. Superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font. Superscript text can be used for footnotes, like WWW[1]:

34
Q

<blockquote></blockquote>

A

The HTML <blockquote> element defines a section that is quoted from another source.

</blockquote>

35
Q
A

The HTML tag defines a short quotation.

Browsers normally insert quotation marks around the quotation.

36
Q

<abbr></abbr>

A

The HTML <abbr> tag defines an abbreviation or an acronym, like “HTML”, “CSS”, “Mr.”, “Dr.”, “ASAP”, “ATM”.</abbr>

Marking abbreviations can give useful information to browsers, translation systems and search-engines.</abbr>

37
Q

<address></address>

A

The HTML <address> tag defines the contact information for the author/owner of a document or an article.

The contact information can be an email address, URL, physical address, phone number, social media handle, etc.</address>

38
Q

<cite></cite>

A

The HTML <cite> tag defines the title of a creative work (e.g. a book, a poem, a song, a movie, a painting, a sculpture, etc.).</cite>

39
Q

dir=”rtl”

A

BDO stands for Bi-Directional Override.

The HTML tag is used to override the current text direction:

40
Q

The CSS border

A

The CSS border property defines a border around an HTML element.
p {
border: 2px solid powderblue;
}

41
Q

padding

A

The CSS padding property defines a padding (space) between the text and the border.

42
Q

target attributes

A

The target attribute can have one of the following values:

_self - Default. Opens the document in the same window/tab as it was clicked
_blank - Opens the document in a new window or tab
_parent - Opens the document in the parent frame
_top - Opens the document in the full body of the window

43
Q

absolute URL vs relative URL

A

Both examples above are using an absolute URL (a full web address) in the href attribute.

A local link (a link to a page within the same website) is specified with a relative URL (without the “https://www” part):

44
Q

Link to an Email Address

A

Use mailto: inside the href attribute to create a link that opens the user’s email program (to let them send a new email):
<a>Send email</a>

45
Q

Link Buttons

A

A link can also be styled as a button, by using CSS:

a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
background-color: red;
}

46
Q

Create a Bookmark in HTML

A

First, use the id attribute to create a bookmark:

<h2>Chapter 4</h2>

Then, add a link to the bookmark (“Jump to Chapter 4”), from within the same page:
<a>Jump to Chapter 4</a>

47
Q

bookmark on another page:

A

You can also add a link to a bookmark on another page:

<a>Jump to Chapter 4</a>

48
Q

An image map is an image with clickable areas

A

<img></img>

49
Q

Background Image on a HTML element

A

To add a background image on an HTML element, use the HTML style attribute and the CSS background-image property:
style=”background-image: url(‘img_girl.jpg’);”>

50
Q

Background Image on a Page

A

If you want the entire page to have a background image, you must specify the background image on the element:
body {
background-image: url(‘img_girl.jpg’);
}

51
Q

To avoid the background image from repeating itself

A
background-repeat property to no-repeat
body {
  background-image: url('example_img_girl.jpg');
  background-repeat: no-repeat;
}
52
Q

Background Cover

A
body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
53
Q

Background Stretch

A
body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}
54
Q

HTML List Tags

A

Tag Description

<ul> Defines an unordered list
</ul>

<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list
</dt><dd> Describes the term in a description list</dd></dl></li></ol>

55
Q

Here are the block-level elements in HTML:

A

<address><blockquote><dd><div><dl><dt><h1>-<h6><hr></hr><li><ol><p></p><pre><ul></ul></pre></ol></li></h6></h1></dt></dl></div></dd></blockquote></address>

56
Q

Here are the inline elements in HTML:

A

<a><abbr><acronym><b><big><br></br><cite><code><dfn><em><i><img></img><kbd><samp><select><small><span><strong><textarea><time><tt><var></samp></kbd></i></em></dfn></code></cite></big></b></acronym></abbr></a></var></tt></time></textarea></strong></span></small></select></samp></kbd></i></em></dfn></code></cite></big></b></acronym></abbr></a>

57
Q

File Path Examples

A

Path Description
<img></img> The “picture.jpg” file is located in the same folder as the current page
<img></img> The “picture.jpg” file is located in the images folder in the current folder
<img></img> The “picture.jpg” file is located in the images folder at the root of the current web
<img></img> The “picture.jpg” file is located in the folder one level up from the current folder

58
Q

You should include the following element in all your web pages:

A