Brainscape's Knowledge GenomeTM

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


See full index

HTML & CSS > HTML > Flashcards

HTML Flashcards

1
Q

What is a href?

A

href is a reference through URI, URL to reference some other document.

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

What is usually put in element?

A
  • title for the page
  • allows to provide metadata about the document for instance viewport and how it can render
  • provides scripts that make pages more interactive.

<style>

 - 
<link> 
<base> - base address with which all our links to other documents will be based on.
</style>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Placing tag in the <head> element vs after <body>

A

It is a best practice to put JavaScript tags just before the closing </body> tag rather than in the <head> section of your HTML.

When you place your JavaScript links at the bottom of your HTML body, it gives the HTML time to load before any of the JavaScript loads, which can prevent errors, and speed up website response time.

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

How do you instruct a browser to deal with text breaking and whitespace.

A 
<pre></pre> - tells the browser that this content has been preformated.
<br> - add a line break
<hr> - horizontal line
 - non breaking space
< > - symbols < >.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

How do you reference texts (for example citation or

A 
<sup></sup> - 
<cite></cite>
<abbr></abbr>
<code></code>
<samp></samp>
<blockquote></blockquote>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

What are the <div> basic tags replacements that were introduced in HTML5</div>

A
  • nav bar. Usually elements inside of are an unordered list with anchors.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

What are basic type of lists?

A

Unordered List,
<ul>
<li>2 T Wired Brain Coffee Hot Cocoa Mix</li>
<li>8 0z Milk</li>
<li>Marhsmallows (optional)</li>
</ul>

Ordered List,
<ol>
<li>Scoop Hot Cocoa Mix into a mug</li>
<li>Heat milk on thestove or in the microwav oto just below a boil</li>
</ol>

Definition lists:
<dl>
<dt>Cocoa</dt>
<dd>Cocoa is the powdered substance left after processing cacao beans</dd>

        <dt>Chocolate</dt>
        <dd>Chocolate is basically bla bla </dd>
    </dl>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

What are anchors and links?

A

Link is just another HTML element, with <a> tag (anchor) we indentify that we want to create a source or the target.</a>

There are three basic types:
Source anchor - can redirect us to a webpage, when we click on a link.

Named anchor - redirects us to a page element

Implicit anchor - redirects us to a page element using id of the element, such as <div></div></a>

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

How do you link your document through a relative link

A

<a></a>

You can also Reference anchor in another document:
<a>Location 2 </a>

redirects the browser to the top of the page

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

What are the basic attributes you can add to links?

A

target - provide context to the browser about where you want this content to be opened. target=”_blank” will open in a new window

rel=”noreferrer noopener” security related measure, when we create to that site, we don’t want that site to have access to the window that opened it

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

What is the role of HTML element

A

is for DATA.

It is not used for formatting your documents. Table of contents is not data. Displaying pictures shuld be done in grids.

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

What are the components that set up the structure of a table?

A

Caption - tells user what the table shows them (espacially assistant screen readers)
Header - top row in the table that will provide information to the users that helps them understand the data below
Body -
Footer - for aggregate values, sums, averages.

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

HTML <img></img> attributes

A

src=”wired-brain-coffee-logo.png” - where can the image file be found
alt=”wiredbraincoffe.com” - text to display or read in place of the image
height/width - control display sizing.

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

When and how do you provide alternate image sizes.

A

Alternate image sizes are needed because it needs to render differently for different devices.

srcset=”logo.png 500w, logo-250.png 250w”
sizes=”(max-width: 30em) 25vw, 33vw”
sizes tell the browser, to be relative to the viewport - allows the browser to make smart decision which image it should use.

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

What is a <span> element?</span>

A

Span element is inline container for phrasing content. It is usually used to group elements for styling purposes.
For example used for pop up text and instead of obsolete html tags s.a<strong>, <b>, <i> that we do not have control of. With <span>, we can define everything through CSS.</span></i></b></strong>

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

Emmet shortcuts

A

! - creates a html template
link - creates style link in
img - creates <img></img> tag with src=”” and alt=””
nav>ul>li*5>a - creates inside of it <ul> unordered list with 5 lists element, each of them with anchor.
</ul>

17
Q

Form input types.

A
  • default

with

  • giving logic to options

Commands:

  • generally more flexible, can be attached to javascript, also we can change the values such as color, value.
  • very useful, because it focuses the browser on the firstName element even if you click on the label.
18
Q

Form input attributes.

A

maxLength - maximum length (mby better to validate this on js)
checked - checked state for radio or checkbox
multiple/selected - allows multiple selections / indicate initial selections
rows/cols
disabled/readonly

19
Q

How are attributes with data prefix created?

A

data-* (attributes, are the attributes that were created by the developers)

HTML5 allows us to store extra information on standard, semantic HTML elements without other hacks such as non-standard attributes, extra properties on DOM.

20
Q

How can you easily make text content editable by the user?

A

You can add contenteditable attribute on html.

21
Q

Why would you want to wrap form fields with fieldset tag?

A

If you want to disable a form (ie during loading) it cannot be done with disabled attribute on the form.
The cheap way is to wrap all the inputs on the form with the fieldset. Assigning disabled attribute to fieldset will disable all fields.

22
Q

What are the accessibility a11y basics?

A
  • Write clean, semantic HTML (make use of semantic elements like secions, headers, aside, form inputs).
  • have clean structure of headings -> screen readers allow to skip content.
  • have an unique webpage title
  • all imgs should have alt attribute, unless they are decorative images -> then they should have it empty.
  • use anchors for links taht are supposed to redirect to another webpage, while buttons interact on the webpage
  • use :focus states on controls
23
Q

What is the aria attribute that allows us to dynamically change content help the screenreader announce what has been changed?

A

The concept that is helpful here is Aria live regions.

There are few properties, but the most important is

  • aria-live:POLITENESS_SETTINGS (off, polite, asertive) - is used to set the priority with which screen reader should treat updates to live regions.
  • aria-atomic=BOOLEAN - is used to set whether or not the screen reader should always present the live region as a whole even if only part of the region changes
  • aria-relevant=[LIST_OF_CHANGES] (additions, removals, text, all) - is used to set what types of changes are relevant to a live region. //Default: additions text.
24
Q

What are differences between label for, aria-label and aria-labelledby?

A
  • You should use aria-labelledby if the text is visually on-screen somewhere and this form is preferable. You should only use aria-label when it’s not possible to have the label visible on screen.
  • aria-labelledby can reference more than one text element; label can only reference one.
  • aria-labelledby can be used for a variety of elements while the label element can only be used on form elements. (even the element containing aria-labelledby can self reference to compose a better label).
  • Clicking on a label focuses the associated form field. This does not occur with aria-labelledby.

HTML & CSS (6 decks)

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