HTML & CSS Flashcards
(64 cards)
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 synthax
<a>News</a>
Navigational element
<nav>....</nav>
*Typically used for menus, sidebars or internal links
*Contain navigation links, that is mean to be in the same website.
Collecting data
<form>
</form>
When to use “action” attribute
*For saving data in a data base
*Sending info to a server
*Registration or log in
*Surveys or contact forms
<input></input>
type: defines the input type (text, password, email, etc)
<input type=” ..” id=” ..” name=” ..”requiered>
required: Ensures users fills out the field before submussion
Difference between “id” and “name” attributes
id= helps the browser and scripts find the field.
name=makes sure the server receives the value, and is key for submitted data
Hidden inputs
What are for?
For getting data in a form, the user can´t see it nor interact directly with it.
User ID, security token or for login.
Example of <input></input>
<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>
Button element
*Can contain text, images or other HTML elements.
*Default behavior is type=”submit”
<button>Enviar</button>
File input
What is it for?
Allows users to attach a file to a form
<input></input>
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
Defines a text label for the input field
Regarding to form action(comes in the next line after this one)
Example:
<label>Username:</label>
*Label may include for attribute
Essential for screen readers and accessibility tools
Submit input
What it is for?
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.
quote>
The bookSteve Jobsis truly inspirational
...element
Steve Jobs once said, One home run is much better than 2 doubles
- blue
- green
- red
- ..
- cat
- dog
- fish
- bird
Item |
---|