Brainscape's Knowledge GenomeTM

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


See full index

CS50 Web > HTML & CSS > Flashcards

HTML & CSS Flashcards

1
Q

What is the documentation type declaration for HTML5 ?

A

<!DOCTYPE html>

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

What is DOM?

A

DOM aka document object model is the tree-like structure describing how the HTML elements are related.

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

What is the use <head> element ?

A

The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag. Metadata is data about the HTML document. Metadata is not displayed. Metadata typically defines the document title, character set, styles, scripts, and other meta information.

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

What are HTML attributes?

A

Attributes provide additional information about elements. It is a piece of markup language used to adjust the behavior or display of an HTML element. For example, attributes can be used to change the color, size, or functionality of HTML elements.

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

How to represent comments in HTML?

A

<!-- type comment here -->

gives us a comment in HTML.

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

How to write HTML elements?

A

<tagname> Content goes here... </tagname>

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

What is <br></br> tag?

A

It can be used in between elements for a line break, which is nothing but a blank self-closing element

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

What is href attribute?

A

The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to.</a>

eg:
<a> Takes to styles page </a>

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

Define 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. It is a self closing element.

eg:
<img></img>

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

What are two ways to specify the URL in the src attribute?

A
  1. Absolute URL: Links to an external image that is hosted on another website.
    eg:
    <img></img>
  2. Relative URL: Links to an image that is hosted within the website. Here, the URL does not include the domain name. If the URL begins without a slash, it will be relative to the current page. Example: src=”img_girl.jpg”. If the URL begins with a slash, it will be relative to the domain. Example: src=”/images/img_girl.jpg”.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

What is 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 a slow connection, or an error in the src attribute, or if the user uses a screen reader.

eg:
<img></img>

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

What is 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.

eg:

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

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

What are HTML headings?

A

HTML headings are titles and subtitles that you want to display on a webpage.
It’s size ranges from <h1> to <h6>

HEADINGS ARE VERY IMPORTANT!!!!!!
Search engines use the headings to index the structure and content of your web pages.

Users often skim a page by its headings. It is important to use headings to show the document structure.

<h1> headings should be used for main headings, followed by <h2> headings, then the less important <h3>, and so on.

Note: Use HTML headings for headings only. Don't use headings to make text BIG or bold.
</h3></h2></h1>

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

HTML Paragraphs and Displays

A

The HTML <p> element defines a paragraph.
A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph.

With HTML, you cannot change the display by adding extra spaces or extra lines in your HTML code.

The browser will automatically remove any extra spaces and lines when the page is displayed.

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

What is 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> tag is an empty tag, which means that it has no end tag.

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

How to have a passage displayed with space and other lines like a poem?

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.

eg:

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

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

What is HTML style?

A

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

<tagname>
</tagname>

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

What is CSS background-color property defines the background color for an HTML element ?

A

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

eg:

<body>

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

</body>

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

Text Color in HTML

A

The CSS color property defines the text color for an HTML element.

eg:

<h1>This is a heading</h1>

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

Fonts in CSS

A

The CSS font-family property defines the font to be used for an HTML element

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

Text size in CSS

A

The CSS font-size property defines the text size for an HTML element

22
Q

Text Alignment

A

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

23
Q

HTML formatting elements

A

<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text (highlighted)
<small> - Smaller text
<del> - Deleted text (browser usually strike a line over text)
<ins> - Inserted text (browser usually underline inserted text)
- Subscript text
- Superscript text</ins></del></small></mark></em></i></strong></b>

These are not self-closing elements, every elements need a closing tag.

24
Q

HTML Quotation

A

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

The HTML <q> tag defines a short quotation.
Browsers normally insert quotation marks around the quotation.</q>

25
Q

HTML Citation elements

A
  1. HTML <abbr> for abbreviations.
    The HTML <abbr> tag defines an abbreviation or an acronym, like “HTML”, “CSS”, “Mr.”, “Dr.”, “ASAP”, “ATM”.
    Marking abbreviations can give useful information to browsers, translation systems and search-engines.</abbr></abbr>
  2. HTML <address> for Contact Information
    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.
  3. HTML <cite> for Work Title
    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.).
    Note: A person’s name is not the title of a work.
    The text in the <cite> element usually renders in italic.</cite></cite></cite>
  4. HTML <bdo> for Bi-Directional Override
    BDO stands for Bi-Directional Override.
    The HTML <bdo> tag is used to override the current text direction
    eg:
    <bdo>This text will be written from right to left</bdo></bdo></bdo>
26
Q

HTML RGB Colors

A

An RGB color value represents RED, GREEN, and BLUE light sources.
And it can be specified as an RGB value, using this formula:
rgb(red, green, blue)

To display white, set all color parameters to 255, like this:
rgb(255, 255, 255) and it can be changed the color by experimenting the value of rgb.

27
Q

HTML RGBA Colors

A

RGBA color values are an extension of RGB color values with an Alpha channel - which specifies the opacity for a color.

An RGBA color value is specified with:

rgba(red, green, blue, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all)

28
Q

HTML HEX Color Values

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.

29
Q

HTML HSL Colors

A

HSL stands for hue, saturation, and lightness and can be specified in the form:
hsl(hue, saturation, lightness)
eg, hsl(0, 100%, 50%)

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.

30
Q

HTML HSLA Color Values

A

HSLA color values are an extension of HSL color values, with an Alpha channel - which specifies the opacity for a color.

An HSLA color value is specified with:

hsla(hue, saturation, lightness, alpha)
eg: hsla(0, 100%, 50%, 0.5)

An alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):

31
Q

HTML Styles - CSS

A

CSS stands for Cascading Style Sheets
CSS saves a lot of work. It can control the layout of multiple web pages all at once.
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!

32
Q

How to use an external CSS?

A

To use an external style sheet, add a link to it in the <head> section of each HTML page.

eg:

<head>
<link></link>
</head>

The external style sheet can be written in any text editor. The file must not contain any HTML code, and must be saved with a .css extension.

Here is what the “styles.css” file looks like:

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

Tip: With an external style sheet, you can change the look of an entire web site, by changing one file!

33
Q

Some CSS properties

A

color: the color of text
text-align: where elements are placed on the page
background-color: can be set to any color
width: in pixels or percent of a page
height: in pixels or percent of a page
padding: how much space should be left inside an element
margin: how much space should be left outside an element
font-family: type of font for text on page
font-size: in pixels
border: size type (solid, dashed, etc) color

34
Q

What is HTML Links - Hyperlinks

A

HTML links are hyperlinks. You can click on a link and jump to another document. When you move the mouse over a link, the mouse arrow will turn into a little hand.

35
Q

HTML links - Syntax

A

The HTML <a> tag defines a hyperlink. It has the following syntax:
<a> link text </a></a>

The most important attribute of the <a> element is the href attribute, which indicates the link’s destination.</a>

The link text is the part that will be visible to the reader.

Clicking on the link text, will send the reader to the specified URL address.

By default, links will appear as follows in all browsers:

  • An unvisited link is underlined and blue
  • A visited link is underlined and purple
  • An active link is underlined and red
36
Q

HTML Links - The target Attribute

A

By default, the linked page will be displayed in the current browser window. To change this, you must specify another target for the link.

The target attribute specifies where to open the linked document.

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

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

38
Q

Button as a Link

A

To use an HTML button as a link, you have to add some JavaScript code.

JavaScript allows you to specify what happens at certain events, such as a click of a button:

Eg:
<button>HTML Tutorial</button>

39
Q

How to change colors of links?

A

Here, an unvisited link will be green with no underline. A visited link will be pink with no underline. An active link will be yellow and underlined. In addition, when mousing over a link (a:hover) it will become red and underlined:

<style>

a:link {
  color: green;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}
</style>
40
Q

HTML Links: Create Bookmarks

A

To create a bookmark - first create the bookmark, then add a link to it.

When the link is clicked, the page will scroll down or up to the location with the bookmark.

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

Example
<a>Jump to Chapter 4</a>
You can also add a link to a bookmark on another page:

<a>Jump to Chapter 4</a>

41
Q

HTML images

A

Images can improve the design and the appearance of a web page.
eg: <img></img>
Image tag is empty that means it is a self closing tag.
The <img></img> tag has two required attributes:
1. src - Specifies the path/URL to the image.
2. alt - Specifies an alternate text for the image.

42
Q

Image Size - Width and Height

A

The style attribute to specify the width and height of an image.

Eg:
<img></img>

43
Q

Image Floating

A

The CSS float property to let the image float to the right or to the left of a text:

Example

<p><img></img>
The image will float to the right of the text.</p>

<p><img></img>
The image will float to the left of the text.</p>

44
Q

Common Image Formats supported in all browsers

A

Abbreviation File Format File Extension

APNG Animated Portable Network Graphics .apng
GIF Graphics Interchange Format .gif
ICO Microsoft Icon .ico, .cur
JPEG Joint Photographic Expert Group image .jpg,
.jpeg, .jfif,
.pjpeg, .pjp
PNG Portable Network Graphics .png
SVG Scalable Vector Graphics .svg

45
Q

How to create an Image map?

A

The idea behind image map is that you should be able to perform different actions depending on where in the image you click.

46
Q

What is steps for image map?

A
  1. The image is inserted using the <img></img> tag. The only difference from other images is that you must add a usemap attribute:
    <img></img>
    The usemap value starts with a hash tag # followed by the name of the image map, and is used to create a relationship between the image and the image map.
  2. Add a <map> element. The <map> element is used to create an image map, and is linked to the image by using the required name attribute.

<map>

3. Add a clickable areas using an <area></area> element.
You can choose one of these values for shape:
rect, circle, poly, default.

eg: <area></area>
</map>

47
Q

The HTML <picture> Element</picture>

A

The <picture> element contains one or more <source></source> elements, each referring to different images through the srcset attribute. This way the browser can choose the image that best fits the current view and/or device.</picture>

Each <source></source> element has a media attribute that defines when the image is the most suitable.

Example:

Show different images for different screen sizes:

<picture>
<source></source>
<source></source>
<img></img>
</picture>

48
Q

HTML Favicon

A

A favicon is a small image displayed next to the page title in the browser tab.
To add a favicon to your website, either save your favicon image to the root directory of your webserver, or create a folder in the root directory called images, and save your favicon image in this folder. A common name for a favicon image is “favicon.ico”.

Next, add a <link></link> element to your “index.html” file, after the <title> element.</title>

49
Q

Tables in HTML

A

Tag Description

<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
<colgroup> Specifies a group of one or more columns in a table for formatting
<col></col> Specifies column properties for each column within a <colgroup> element
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
</tfoot></tbody></thead></colgroup></colgroup></caption></td></tr></th></table>

50
Q

HTML Forms

A

The HTML <form> element is used to create an HTML form for user input.
An <input></input> element can be displayed in many ways, depending on the type attribute.
for eg.:
<!DOCTYPE html>

<html>
<head>
<title>Forms</title>
</head>
<body>
<form>
<input></input>
<input></input>
<div>
Favorite Color:
<input></input> Blue
<input></input> Green
<input></input> Yellow
<input></input> Red

</div>
<input></input>
</form>
</body>
</html>

CS50 Web (1 decks)

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