HTML & CSS Flashcards

(64 cards)

1
Q

block element

A

Ocupan todo el ancho disponible
Inician en una nueva línea

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

inline element

A

Ocupan solo el espacio necesario
No inician en una nueva línea

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

Inline-block element

A

Ancho y alto como un bloque
No generan una nueva linea

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

header
article
section

A

<header>.....</header>

<article>.....</article>

<section>....</section>

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

aside

A

<aside>...</aside>

for ads, extra content, glossary entries

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

Ordered list
Unordered list

A

<ol>
<li> .....</li>
</ol>

<ul>
<li>.....</li>
</ul>

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

Imagen
(self close)

A

<img
src=” ….”
alt=”—text image description—”
width=””
height=” “

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

paragraph

A

<p> ...</p>

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

short text

A

<span> …</span>

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

Main Container element
comes after the head

A

<body> ...</body>

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

Links synthax

A

<a>News</a>

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

Navigational element

A

<nav>....</nav>

*Typically used for menus, sidebars or internal links

*Contain navigation links, that is mean to be in the same website.

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

Collecting data

A

<form>
</form>

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

When to use “action” attribute

A

*For saving data in a data base

*Sending info to a server

*Registration or log in

*Surveys or contact forms

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

<input></input>
type: defines the input type (text, password, email, etc)

A

<input type=” ..” id=” ..” name=” ..”requiered>

required: Ensures users fills out the field before submussion

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

Difference between “id” and “name” attributes

A

id= helps the browser and scripts find the field.

name=makes sure the server receives the value, and is key for submitted data

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

Hidden inputs

What are for?

A

For getting data in a form, the user can´t see it nor interact directly with it.

User ID, security token or for login.

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

Example of <input></input>

A

<form>
<input></input>
<button>Send</button>

"process.php" tells the browser where to send the form data once the user submits it.

"37" is the number given to the user for his aplication, but he is unable to see it.
</form>

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

Button element

A

*Can contain text, images or other HTML elements.

*Default behavior is type=”submit”

<button>Enviar</button>

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

File input

What is it for?

A

Allows users to attach a file to a form

<input></input>

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

Defines how data is sent

A

method=”GET”
Visible in the URL, useful for searches
method=”POST”
Data hidden, for sensible data

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

Example for form with method

A

<form>
</form>

submit.pgp

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

Defines a text label for the input field
Regarding to form action(comes in the next line after this one)

A

Example:
<label>Username:</label>

*Label may include for attribute

Essential for screen readers and accessibility tools

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

Submit input

What it is for?

A

Submit button is created using <input></input> element with a type attribute value of “submit”

<input></input>

value attribute specify the text that appears withing the button.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
"text" and "username" what are for (regarding to attributes type and name)
"text" ( Denotes a single line of text input. "username" ( Essencial when we need to send data from the form to the server)
26
what it is for?
Used to capture text based data, but larger passager of text spanning multiple lines. *Only name attribute applies here* Ex:
27
Fieldset block-level element What it is for?
Wraps related elements, specifically within a
for better organization, like
.
28
*Legend element
Is like *heading* element, but for the
. On the page will appear within the top left part of the fieldset border.
29
*Disabled boolean attribute
*Turns off an element *When is applied to a
will disable all of the form controls within the fieldset.
30
*Placeholder
Probides a hint or top within the form, that dissapear once is clicked in
31
*Required
Boolean attribute that enforces users to fill it in order to submit it. So an error message will be displayed requesting the user to complete the field
32
*Radio button* Multiple choice inputs & menus
Allow users to make a quick chocie from small list of options, in order to select only one. *Each radio button element should have the same name attribute value Ex: Friday Saturday Sunday
33
*Radio Button* What is about boolean attribute "checked" in my code?
To preselect a radio button for user Friday
34
*Check boxes* (Multiple choice inputs & menus) What is the difference between radio buttons and check boxes?
Check boxes allow users *to select multiple values* and radio buttons limit users to select only one value.
35
target element goes in the same line as action and method (form) "_self" / (default) same tab "_blank" / (New tab)
36
Search bar synthax
37
Citation and quotation elements
quote>
38
... element
Used to reference a creative work, author or resource

The bookSteve Jobsis truly inspirational

39
... element
Dialogue or prose is quoted in line, within other text (by default the browser will insert the proper quotation marks for us)

Steve Jobs once said, One home run is much better than 2 doubles

40
.....
To quote a large block of text that comes from an external source and spans several lines
41
Creating lists *( Start attribute)
By default in ordered lists the browser gives a number to each item. So start attribute defines the number from which and ordered should start.
  1. blue
  2. green
  3. red
30.blue 31.green 32.red
42
Creating list *Reversed attribute
    ..
It will do a list appear in reverse order
43
Creating list *Value attribute
It must be used on an individual
  • element within and ordered list to change its value within the list
    1. cat
    2. dog
    3. fish
    4. bird
    1.cat 2.dog 9.fish 10.bird *The number appearing below a list item with a value attribute will be recalculated accordingly
  • 44
    Description List
    Requieres 2 block-level elements
    ..
    Description term element
    ..
    Description element
    45
    Drop-down lists
    Wraps all of the menu options *Selected* boolean attribute to preselect an option for users
    46
    In drop-down lists what is it for boolean attribute *multiple* ??
    When added to the
    47
    Adding an audio
    48
    Audio attributes
    Boolean attributes: Autoplay Controls Loop ---------------- Preload
    49
    Audio attribute: Autoplay What happen when is present on the
    Nothing will appear on the page, but the audio file will automatically play upon loading
    50
    Audio attribute: Controls
    Will display by default audio controls: play & pause, seek and volume controls
    51
    Audio attribute: Preload What it helps for? What values does it have? *When preload attribute isn´t present on the
    Helps to identify what if any information about the audio file should be loaded before the clip is playing Values: *None: Any information *Auto: All info about an audio file *Metadata: Preload just some info
    52
    element Attributes? *same as audio*
    Attributes: src, autoplay, controls, loop & preload) and poster attribute. *If the "controls" boolean attribute is not especified the video will display.
    53
    Poster attribute in video element. What is it for?
    Allow to specify an image in the form of URL, to be shown before a video is played. Same fallbacks and synthax as audio.
    54
    Another way for adding content from another page is adding Inline Frames, so we we use it
    element to embed media onto a page from an external website. It has default styles, but we adjust it with HTML attributes or CSS.
    55
    element: What it is for?
    Used to identify &wrap self-contained content in the form of media (images, audio-clips, videos, and so on)
    56
    element What it is for?
    Used for describing figure element, like "alt" attribute with element.
    A beautiful black dog.
    57
    ..
    element
    We use it to initialize a table on a page. The information withing this element will be tabular data displayed in columns and rows
    58
    Table row (Vertical columns)
    .. Once a table is defined a table row wlement may be added.
    59
    Table data (Horizontal cells)
    ... Once table is defined and rows, date cell should be added
    60
    Table header
    ... To designate a heading for a column or row of cells.
    61
    Main 2 scope attributes for a table header are:
    scope="col" ---->vertical scope="row"----->horizontal col= Every cell within the column relates directly to that table reader row=Every cell withing the row relates directly to that table header.
    Item
    62
    Table caption ....
    Element that provides a title for a table, by default it is positioned at the top of a table.
    ..........
    63
    Table head, body & foot
    .. Wraps heading row or rows, it should be placed after .. Should contain the primary data within a table .. Contains data that outlines the contents of a table.
    64
    Combining cells
    *colspan: to merge cells horizontally *rowspan: to merge cell vertically