Bloques HTML

Etiquetas que citan el texto
Ejemplo de uso
Elementos que agrupan el texto
Etiquetas de código de computadora

Etiquetas que citan el texto

Las abreviaturas de marcado <abbr> pueden proporcionar información útil a los navegadores, sistemas de traducción y motores de búsqueda. Utiliza el atributo title para definir el significado de la abreviación.

La etiqueta <cite> hace referencia a un trabajo creativo como un libro, película, programa de TV o canción.

La etiqueta <blockquote> define una cita larga representada como un elemento de bloque.

La etiqueta <q> define una cita corta en línea y genera comillas automáticamente.

La etiqueta <dfn> define un término y debe incluir el atributo title.

Etiqueta	Descripción	Ejemplo	Utilización
`<abbr>`	Define una abreviatura	Esto es un texto abreviado HTML	`<abbr title="HyperText Markup Language">HTML</abbr>`
`<q>`	Define una cita breve	Esto es una cita breve	`<q>Esto es una cita breve</q>`
`<blockquote>`	Cita de otra fuente	Esto es una cita de otra fuente	`<blockquote>Esto es una cita</blockquote>`
`<cite>`	Título de una obra	Esto es un título	`<cite>Esto es un título</cite>`
`<dfn>`	Define un término	Esto es un término HTML	`<dfn title="HyperText Markup Language">HTML</dfn>`

Ejemplo de uso

EL LENGUAJE HTML

Como Tim Berners-Lee, el padre de la Web, escribió en Tejiendo la Web: Yo llegué en el momento justo, interesado, cuando el hipertexto e Internet habían visto la luz. La tarea que me correspondía era hacer que casaran

EL CÓDIGO HTML

<p><strong>EL LENGUAJE <dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn></strong></p>
<blockquote><p>Como <strong>Tim Berners-Lee</strong>, el padre de la Web, escribió en <cite>Tejiendo la Web</cite>: <q>Yo llegué en el momento justo...</q></p></blockquote>

Nota: Para sangrar texto se debe usar margin-left en CSS, no <blockquote>.

Elementos que agrupan el texto

El elemento <div> se utiliza como contenedor de otros elementos HTML.

El elemento <span> se utiliza para agrupar texto en línea.

Etiqueta	Descripción	Ejemplo	Utilización
`<div>`	Define una división del contenido	El elemento <div> es un elemento en bloque.	<div>Esto es un elemento en bloque.</div>
`<span>`	Define una sección en línea	El elemento es un elemento en línea.	Esto es un <span>elemento en línea</span>

Ejemplo de uso

Elementos DIV-SPAN

HTML lenguaje de marcas de hipertexto se utiliza para el desarrollo de páginas web.

CSS hojas de estilo en cascada se utiliza para definir la presentación HTML.

JavaScript lenguaje de programación se utiliza para dar dinamismo a las páginas web.

Código HTML

<div>
  <div><span>HTML</span> ... </div>
  <div><span>CSS</span> ... </div>
  <div><span>JavaScript</span> ... </div>
</div>

Nota: Un elemento en bloque ocupa todo el ancho disponible. Un elemento en línea solo ocupa el espacio necesario.

Etiquetas de código de computadora

<code> define un fragmento de código.
<kbd> representa entrada del usuario.
<samp> representa salida del sistema.
<var> representa variables matemáticas o de programación.

Etiqueta	Descripción	Visualización	Utilización
<code>	Define código	Usar este código `function(main)`	<code>function(main)</code>
<kbd>	Entrada de teclado	`Ctrl` + `S`	<kbd>Ctrl</kbd> + <kbd>S</kbd>
<samp>	Salida del sistema	`Error: página no encontrada`	<samp>Error: página no encontrada</samp>
<var>	Variable	Einstein escribió: `E=mc²`	<var>E=mc<sup>2</sup></var>

Nota: Las etiquetas de código cambian la tipografía simulando código informático.

Errores HTML

Error 404 Not Found
Error 400 Bad Request
Error 401 Unauthorized
Error 403 Forbidden

Comandos básicos

Ctrl + S para guardar
Ctrl + C para copiar
Ctrl + V para pegar
Ctrl + X para cortar

Fórmulas históricas

a² + b² = c²
iħ (∂/∂t) ψ = Hψ
E = mc²
F = G [(m1 × m2)/r²]