HTML & CSS Flashcards
block element
Ocupan todo el ancho disponible
Inician en una nueva línea
inline element
Ocupan solo el espacio necesario
No inician en una nueva línea
Inline-block element
Ancho y alto como un bloque
No generan una nueva linea
header
article
section
<header>.....</header>
<article>.....</article>
<section>....</section>
aside
<aside>...</aside>
for ads, extra content, glossary entries
Ordered list
Unordered list
<ol>
<li> .....</li>
</ol>
<ul>
<li>.....</li>
</ul>
Imagen
(self close)
<img
src=” ….”
alt=”—text image description—”
width=””
height=” “
paragraph
<p> ...</p>
short text
<span> …</span>
Main Container element
comes after the head
<body> ...</body>
links
<a>….</a>
Navigational element
<nav>....</nav>
Collecting data
<form>
</form>
Defines how data is sent
method=”GET”
Visible in the URL, useful for searches
method=”POST”
Data hidden, for sensible data
Example for form with method
<form>
</form>
submit.pgp
Probides a text label for the input field
Regarding to form action(comes in the next line after this one)
Example:
<label for “username”>Username:</label>
<input></input> self closing
type: defines the input type (text, password, email, etc)
<input type=” ..” id=” ..” name=” ..”requiered>
required: Ensures users fills out the field before submussion
target element goes in the same line as action and method (form)
“_self” / (default) same tab
“_blank” / (New tab)
<form>
</form>
Search bar synthax
<form>
<input></input>
<button> Search</button>
</form>
Citation and quotation elements
<cite>
<q> quote></q></cite>
<blockquote>
</blockquote>
<cite> …</cite> element
Used to reference a creative work, author or resource
<p>The book<cite><a>Steve Jobs<a></a></cite>is truly inspirational</p>
</a></cite></p>
<q>…</q> element
Dialogue or prose is quoted in line, within other text (by default the browser will insert the proper quotation marks for us)
<p>Steve Jobs once said, <q>One home run is much better than 2 doubles</q></p>
<bloquequote> .....</bloquequote>
To quote a large block of text that comes from an external source and spans several lines
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.
<ol>
<li>blue</li>
<li>green</li>
<li>red</li>
</ol>
30.blue
31.green
32.red
Creating list
*Reversed attribute
<ol> ..</ol>
It will do a list appear in reverse order
Creating list
*Value attribute
It must be used on an individual <li> element within and ordered list to change its value within the list
<ol>
<li>cat</li>
<li>dog</li>
<li>fish</li>
<li>bird</li>
</ol>
1.cat
2.dog
9.fish
10.bird
*The number appearing below a list item with a value attribute will be recalculated accordingly
Description List
Requieres 2 block-level elements
<dt>..</dt>
Description term element
<dd>..</dd>
Description element
Adding an audio
<audio></audio>
Audio attributes
Boolean attributes:
Autoplay
Controls
Loop
—————-
Preload
Audio attribute: Autoplay
What happen when is present on the <audio> element</audio>
Nothing will appear on the page, but the audio file will automatically play upon loading
Audio attribute: Controls
Will display by default audio controls: play & pause, seek and volume controls
Audio attribute: Preload
What it helps for?
What values does it have?
*When preload attribute isn´t present on the <audio> element, all the info about the audio file is loaded</audio>
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
