Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

Tin hoc co so > html > Flashcards

html Flashcards

1
Q

HTML Paragraphs

A

HTML paragraphs are defined with the <p> tag:

Example
</p><p>This is a paragraph.</p>

<p>This is another paragraph.</p>

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

HTML Links

A

HTML links are defined with the <a> tag:</a>

</a><a>This is a link</a>
»>HTML links are defined with the a tag:

This is a link

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

HTML Images

A

HTML images are defined with the <img></img> tag.

The source file (src), alternative text (alt), width, and height are provided as attributes:
<img></img>

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

HTML Elements

A

The HTML element is everything from the start tag to the end tag:

Content goes here…
Examples of some HTML elements:

<h1>My First Heading</h1>

<p>My first paragraph.</p>

**The <br></br> tag defines a line break, and is an empty element without a closing tag:

Example

<p>This is a <br></br> paragraph with a line break.</p>

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

The src Attribute

A

The <img></img> tag is used to embed an image in an HTML page. The src attribute specifies the path to the image to be displayed:

Example
<img></img>

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

The width and height Attributes

A

The <img></img> tag should also contain the width and height attributes, which specifies the width and height of the image (in pixels):

Example
<img></img>

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

The alt Attribute

A

The required alt attribute for the <img></img> tag specifies an alternate text for an image, if the image for some reason cannot be displayed. This can be due to slow connection, or an error in the src attribute, or if the user uses a screen reader.

Example
<img></img>

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

The style Attribute

A

The style attribute is used to add styles to an element, such as color, font, size, and more.

Example

<p>This is a red paragraph.</p>

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

The lang Attribute

A

You should always include the lang attribute inside the tag, to declare the language of the Web page. This is meant to assist search engines and browsers.

The following example specifies English as the language:

…

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

The title Attribute

A

The title attribute defines some extra information about an element.

The value of the title attribute will be displayed as a tooltip when you mouse over the element:

Example

<p>This is a paragraph.</p>

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

Summary

A

All HTML elements can have attributes
The href attribute of <a> specifies the URL of the page the link goes to
The src attribute of <img></img> specifies the path to the image to be displayed
The width and height attributes of <img></img> provide size information for images
The alt attribute of <img></img> provides an alternate text for an image
The style attribute is used to add styles to an element, such as color, font, size, and more
The lang attribute of the tag declares the language of the Web page
The title attribute defines some extra information about an element</a>

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

Bigger Headings

A

Each HTML heading has a default size. However, you can specify the size for any heading with the style attribute, using the CSS font-size property:

Example

<h1>Heading 1</h1>

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

HTML Horizontal Rules

A

The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.

The <hr> element is used to separate content (or define a change) in an HTML page:

Example
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

Solution for Poem Problems - The HTML <pre> Element

</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:

Example

<pre>
My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.
</pre>

</pre></pre>

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

HTML Styles

A

The HTML style attribute is used to add styles to an element, such as color, font, size, and more

<p>I am normal</p>

<p>I am red</p>

<p>I am blue</p>

<p>I am big</p>

***Background Color
The CSS background-color property defines the background color for an HTML element.

Example
Set the background color for a page to powderblue:

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

Hoặc:

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

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

Text Alignment

A

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

Example

<h1>Centered Heading</h1>

<p>Centered paragraph.</p>

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

Summary 2

A

Use the style attribute for styling HTML elements
Use background-color for background color
Use color for text colors
Use font-family for text fonts
Use font-size for text sizes
Use text-align for text alignmen

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

HTML Formatting Elements

A

Formatting elements were designed to display special types of text:

<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
 - Marked text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text

VD: <p><b>This text is bold.</b></p></sup></sub></ins></del></small></em></i></strong></b>

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

HTML <blockquote> for Quotations</blockquote>

A

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

Browsers usually indent <blockquote> elements.

Example

<p>Here is a quote from WWF's website:</p>

<blockquote>
For 50 years, WWF has been protecting the future of nature.

</blockquote>

</blockquote></blockquote>

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

HTML for Short Quotations

A

The HTML tag defines a short quotation.

Browsers normally insert quotation marks around the quotation.

Example

<p>WWF's goal is to: Build a future where people live in harmony with nature.</p>

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

HTML <abbr> for Abbreviations</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.

Tip: Use the global title attribute to show the description for the abbreviation/acronym when you mouse over the element.

Example

<p>The <abbr>WHO</abbr> was founded in 1948.</p>

</abbr>

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

HTML <address> for Contact Information</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.

The text in the <address> element usually renders in italic, and browsers will always add a line break before and after the <address> element.

Example
<address>
Written by John Doe.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address></address></address></address>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

HTML <cite> for Work Title</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>

Note: A person’s name is not the title of a work.

The text in the <cite> element usually renders in italic.</cite>

Example

<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>

</cite></cite>

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

HTML for Bi-Directional Override

A

BDO stands for Bi-Directional Override.

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

Example
This text will be written from right to left

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

HTML Quotation and Citation Elements

A

Tag Description
<abbr> Defines an abbreviation or acronym</abbr>

<address> Defines contact information for the author/owner of a document
Defines the text direction
<blockquote> Defines a section that is quoted from another source
<cite> Defines the title of a work
Defines a short inline quotation</cite></blockquote></address>

</abbr>

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

HTML Comment Tags

A

<p>This is a paragraph.</p>

27
Q

Background Color

A

<h1>Hello World</h1>

<p style="">Lorem ipsum…</p>

28
Q

Text color

A

<h1>Hello World</h1>

<p>Lorem ipsum...</p>

<p>Ut wisi enim...</p>

29
Q

Border color

A

<h1>Hello World</h1>

<h1>Hello World</h1>

<h1>Hello World</h1>

30
Q

Color values: RGB

A
  • RGB color: represents RED, GREEN, and BLUE light sources.
    + rgb(0, 255, 0): green
    + rgb(0, 0, 0): black
    + rgb(255,255,255): white
    +rgb(255, 165, 0): yellow
    +rgb(0, 0, 255): blue
    + rgb(60, 60, 60)/rgb(100, 100, 100)/rgb(140, 140, 140) /rgb(180, 180, 180) /rgb(200, 200, 200) /rgb(240, 240, 240) : gray
  • An RGBA color value is an extension of RGB with an Alpha channel (opacity): rgba ( đỏ, lục , lam, alpha ); alpha từ 0-1.

VD:

<h1>rgb(255, 0, 0)</h1>

<h1>rgb(0, 0, 255)</h1>

31
Q

Color value HEX

A

rrggbb

In HTML, a color can be specified using a hexadecimal value in the form:

Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-255).
For example, #ff0000 is displayed as red, because red is set to its highest value (ff), and the other two (green and blue) are set to 00.

Another example, #00ff00 is displayed as green, because green is set to its highest value (ff), and the other two (red and blue) are set to 00.

To display black, set all color parameters to 00, like this: #000000.

To display white, set all color parameters to ff, like this: #ffffff.
Shades of gray are often defined using equal values for all three parameters:#404040,#686868,#a0a0a0
VD: <h1 style="background-color:#ff0000;">#ff0000</h1>

<h1>#0000ff</h1>

<h1>#3cb371</h1>

<h1>#ee82ee</h1>

32
Q

Color value HSL

A

*HSL stands for hue, saturation, and lightness.
+hsl(hue, saturation, lightness)

  • Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.
  • Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color.
  • Lightness is also a percentage value, 0% is black, and 100% is white.
  • Shades of gray are often defined by setting the hue and saturation to 0, and adjust the lightness from 0% to 100% to get darker/lighter shades:
    *HSLA color values are an extension of HSL with an Alpha channel (opacity).
    + hsla(hue, saturation, lightness, alpha)
    alpha: 0-1: fully transparent- not transparent at all
33
Q

What is CSS?

A

Cascading Style Sheets (CSS) is used to format the layout of a webpage.

With CSS, you can control the color, font, the size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colors are to be used, different displays for different devices and screen sizes, and much more!

Tip: The word cascading means that a style applied to a parent element will also apply to all children elements within the parent. So, if you set the color of the body text to “blue”, all headings, paragraphs, and other text elements within the body will also get the same color (unless you specify something else)!

34
Q

Using CSS

A

CSS can be added to HTML documents in 3 ways:

Inline - by using the style attribute inside HTML elements
Internal - by using a element in the section
External - by using a element to link to an external CSS file

35
Q

Inline CSS

A

An inline CSS is used to apply a unique style to a single HTML element.

An inline CSS uses the style attribute of an HTML element.

The following example sets the text color of the <h1> element to blue, and the text color of the </h1><p> element to red:

Example
</p><h1 style="color:blue;">A Blue Heading</h1>

<p>A red paragraph.</p>

36
Q

Internal CSS

A

An internal CSS is used to define a style for a single HTML page.

An internal CSS is defined in the section of an HTML page, within a element.

The following example sets the text color of ALL the <h1> elements (on that page) to blue, and the text color of ALL the </h1><p> elements to red. In addition, the page will be displayed with a “powderblue” background color:

Example

</p>

body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

37
Q

External CSS

A

An external style sheet is used to define the style for many HTML pages.

To use an external style sheet, add a link to it in the section of each HTML page:

Example

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

38
Q

CSS Colors, Fonts and Sizes

A

Here, we will demonstrate some commonly used CSS properties. You will learn more about them later.

The CSS color property defines the text color to be used.

The CSS font-family property defines the font to be used.

The CSS font-size property defines the text size to be used.

Example
Use of CSS color, font-family and font-size properties:

h1 {
  color: blue;
  font-family: verdana;
  font-size: 300%;
}
p {
  color: red;
  font-family: courier;
  font-size: 160%;
}

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

39
Q

CSS Padding

A

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

Example
Use of CSS border and padding properties:

p {
border: 2px solid powderblue;
padding: 30px;
}

40
Q

CSS Margin

A

The CSS margin property defines a margin (space) outside the border.

Example
Use of CSS border and margin properties:

p {
border: 2px solid powderblue;
margin: 50px;
}

41
Q

Link to External CSS

A

External style sheets can be referenced with a full URL or with a path relative to the current web page.

Example
This example uses a full URL to link to a style sheet:

42
Q

Chapter Summary CSS

A

Use the HTML style attribute for inline styling
Use the HTML element to define internal CSS
Use the HTML element to refer to an external CSS file
Use the HTML element to store and <link></link> elements
Use the CSS color property for text colors
Use the CSS font-family property for text fonts
Use the CSS font-size property for text sizes
Use the CSS border property for borders
Use the CSS padding property for space inside the border
Use the CSS margin property for space outside the border

43
Q

Define an HTML Table

A

The tag defines an HTML table.

Each table row is defined with a tag. Each table header is defined with a tag. Each table data/cell is defined with a tag.

By default, the text in elements are bold and centered.

By default, the text in elements are regular and left-aligned.

Example
A simple HTML table:

Firstname
Lastname 
Age

Jill
Smith 
50

Eve
Jackson 
94

Note: The elements are the data containers of the table.They can contain all sorts of HTML elements; text, images, lists, other tables, etc.

44
Q

HTML Table - Add a Border

A

To add a border to a table, use the CSS border property:

Example
table, th, td {
border: 1px solid black;
}

45
Q

HTML Table - Collapsed Borders

A

To let the borders collapse into one border, add the CSS border-collapse property:

Example
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
46
Q

HTML Table - Add Cell Padding

A

Cell padding specifies the space between the cell content and its borders.

If you do not specify a padding, the table cells will be displayed without padding.

To set the padding, use the CSS padding property:

Example
th, td {
padding: 15px;
}

47
Q

HTML Table - Left-align Headings

A

By default, table headings are bold and centered.

To left-align the table headings, use the CSS text-align property:

Example
th {
text-align: left;
}

48
Q

HTML Table - Add Border Spacing

A

Border spacing specifies the space between the cells.

To set the border spacing for a table, use the CSS border-spacing property:

Example
table {
border-spacing: 5px;
}

49
Q

HTML Table - Cell that Spans Many Columns

A

To make a cell span more than one column, use the colspan attribute:

Example

Name
Telephone

Bill Gates
55577854
55577855
50
Q

HTML Table - Cell that Spans Many Rows

A

To make a cell span more than one row, use the rowspan attribute:

Example

Name:
Bill Gates

Telephone:
55577854

55577855
51
Q

HTML Table - Add a Caption

A

To add a caption to a table, use the tag:

Example

Monthly savings

Month
Savings

January
$100

February
$50

Note: The tag must be inserted immediately after the tag.

52
Q

Chapter Summary Table

A

Use the HTML element to define a table
Use the HTML element to define a table row
Use the HTML element to define a table data
Use the HTML element to define a table heading
Use the HTML element to define a table caption
Use the CSS border property to define a border
Use the CSS border-collapse property to collapse cell borders
Use the CSS padding property to add padding to cells
Use the CSS text-align property to align cell text
Use the CSS border-spacing property to set the spacing between cells
Use the colspan attribute to make a cell span many columns
Use the rowspan attribute to make a cell span many rows
Use the id attribute to uniquely define one table

53
Q

Unordered HTML List

A

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The list items will be marked with bullets (small black circles) by default:

Example
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul></li></ul>
54
Q

Ordered HTML List

A

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers by default:

Example
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol></li></ol>
55
Q

HTML Description Lists

A

HTML also supports description lists.

A description list is a list of terms, with a description of each term.

The <dl> tag defines the description list, the <dt> tag defines the term (name), and the </dt><dd> tag describes each term:

Example
<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl></dd></dl>
56
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>

57
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>

58
Q

Ordered HTML List - The Type Attribute

A

The type attribute of the <ol> tag, defines the type of the list item marker:

Type Description
type=”1” The list items will be numbered with numbers (default)
type=”A” The list items will be numbered with uppercase letters
type=”a” The list items will be numbered with lowercase letters
type=”I” The list items will be numbered with uppercase roman numbers
type=”i” The list items will be numbered with lowercase roman numbers
Numbers:

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

</ol>

59
Q

Control List Counting

A

By default, an ordered list will start counting from 1. If you want to start counting from a specified number, you can use the start attribute:

Example
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
60
Q

HTML Description Lists

A

A description list is a list of terms, with a description of each term.

The <dl> tag defines the description list, the <dt> tag defines the term (name), and the </dt><dd> tag describes each term:

Example
<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl></dd></dl>
61
Q

Block-level Elements

A

A block-level element always starts on a new line.

A block-level element always takes up the full width available (stretches out to the left and right as far as it can).

A block level element has a top and a bottom margin, whereas an inline element does not.

The <div> element is a block-level element.</div>

62
Q

Inline Elements

A

An inline element does not start on a new line.

An inline element only takes up as much width as necessary.

This is a <span> element inside a paragraph.</span>

63
Q

The <div> Element

</div>

A

The <div> element is often used as a container for other HTML elements.

The <div> element has no required attributes, but style, class and id are common.

When used together with CSS, the <div> element can be used to style blocks of content:</div></div></div>

64
Q

The <span> Element</span>

</span>

A

The <span> element is an inline container used to mark up a part of a text, or a part of a document.</span>

The <span> element has no required attributes, but style, class and id are common.</span>

When used together with CSS, the <span> element can be used to style parts of the text:</span></span></span>

Tin hoc co so (4 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions