HTML – El Blog De Jean Rodriguez; Jorge Roa

¿QUE ES HTML?

“HTML es un lenguaje de marcado que se utiliza para el desarrollo de páginas de Internet. Se trata de la siglas que corresponden a HyperText Markup Language, es decir, Lenguaje de Marcas de Hipertexto”.

No obstante, este tipo de definiciones no nos dice mucho porque la definición es técnica. Para algunas personas al leer esto, piensan que HTML incluye el diseño gráfico de las páginas web, sin embargo, eso no es cierto ya que HTML sólo sirve para indicar como va ordenado el contenido de una página web. Esto lo hace por medio de las marcas de hipertexto las cuales son etiquetas conocidas en inglés como tags.

Atributos y etiquetas de HTML

Atributos:

Aunque cada una de las etiquetas HTML define sus propios atributos, encontramos algunos comunes a muchas o casi todas las etiquetas, que se dividen en cuatro grupos según su funcionalidad:

Atributos básicos
Atributos de internacionalización
Atributos de eventos
Atributos de foco

ATRIBUTOS BÁSICOS

Los atributos básicos se utilizan en la mayoría de etiquetas HTML y XHTML, aunque adquieren mayor sentido cuando se utilizan hojas de estilo en cascada (CSS):


`id="texto"`	Establece un indicador único a cada elemento
`class="texto"`	Establece la clase CSS que se aplica a los estilos del elemento
`style="texto"`	Aplica de forma directa los estilos CSS de un elemento
`title="texto"`	Establece el título del elemento (Mejora la accesibilidad)

ATRIBUTOS DE INTERNACIONALIZACIÓN

Estos atributos se utilizan en aquellas páginas que muestran sus contenidos en varios idiomas y las que quieran indicar de forma explícita el idioma de sus contenidos:

Atributo	Descripción
`lang="codigo"`	Indica el idioma del elemento
`xml:lang="codigo"`	Indica el idioma del elemento, aunque tiene más prioridad que el atributo anterior y es obligatorio si se incluye el atributo `lang`
`dir`	Indica la dirección del texto

ATRIBUTOS DE EVENTOS

Estos atributos se utilizan en las páginas web que incluyen código JavaScript para realizar acciones dinámicas sobre los elementos de la página.

Pueden ser utilizados por: todos los elementos

Atributos	Descripción
`onclick`	Ejecuta la acción cuando se realiza un clic sobre el elemento
`ondblclick`	Ejecuta la acción cuando se realiza un doble clic sobre el elemento
`onmousedown`	Ejecuta la acción cuando se detecta el botón pulsado del ratón
`onmouseup`	Ejecuta la acción cuando se detecta que se ha soltado el botón del ratón
`onmousemove`	Ejecuta la acción cuando se detecta el movimiento del ratón sobre el elemento
`onmouseout`	Ejecuta la acción cuando el ratón abandona el elemento
`onmouseover`	Ejecuta la acción cuando se detecta que el ratón se sitúa sobre el elemento

Pueden ser utilizados por: <body>

Atributos	Descripción
`onload`	Ejecuta la acción cuando se carga el documento
`onunload`	Ejecuta la acción cuando se abandona el documento
`onresize`	Ejecuta la acción cuando se ha modificado el tamaño de la ventana del navegador

Pueden ser utilizados por: elementos de formulario y <body>

Atributos	Descripción
`onkeydown`	Ejecuta la acción cuando se detecta que la tecla esta pulsada
`onkeyup`	Ejecuta la acción cuando se detecta que se ha soltado la tecla pulsada
`onkeypress`	Ejecuta la acción cuando se pulsa una tecla

Pueden ser utilizados por: varios

Atributos	Descripción	Elementos que pueden usarlo
`onblur`	Ejecuta la acción cuando el elemento pierde el foco bien sea a través del ratón o por navegación tabulada	`<button>`, `<input>`, `<label>`, `<select>`, `<textarea>`, `<body>`
`onfocus`	Ejecuta la acción cuando el elemento obtiene el foco bien sea a través del ratón o por navegación tabulada	`<button>`, `<input>`, `<label>`, `<select>`, `<textarea>`, `<body>`
`onchange`	Ejecuta la acción cuando el valor de un control ha sido modificado	`<input>`, `<select>`, `<textarea>`
`onreset`	Ejecuta la acción cuando el formulario es restablecido a sus valores por defecto	`<form>`
`onselect`	Ejecuta la acción cuando un usuario selecciona texto en un campo de texto	`<input>`, `<textarea>`
`onsubmit`	Ejecuta la acción cuando el formulario es enviado	`<form>`

ATRIBUTOS DE FOCO

Se le denomina foco o focus, cuando un control o elemento del documento ha sido seleccionado. Cuando ese elemento deja de estar seleccionado, «pierde el foco» y es el nuevo elemento seleccionado el que se dice que tiene «el foco».

Atributos	Descripción
`accesskey="letra"`	Establece una tecla de acceso rápido a un elemento HTML
`tabindex="numero"`	Establece la posición del elemento en el orden de tabulación de la página (valor entre 0 y 32.767)
`onfocus`, `onblur`	Controlan los eventos JavaScript que se ejecutan cuando el elemento obtiene o pierde el foco

ETIQUETAS

Las etiquetas son la estructura básica del HTML. Estas etiquetas o tags se componen y contienen otras propiedades, como son los atributos y el contenido.

HTML define un total de 91 etiquetas, de las cuales 10 se consideran obsoletas. Sin embargo, una etiqueta por sí sola a veces no contiene la suficiente información para estar completamente definida. Para ello contamos con los atributos: pares nombre-valor separados por «=» y escritos en la etiqueta inicial de un elemento después del nombre del elemento. El valor puede estar encerrado entre «comillas dobles» o ‘simples’. Existen, también, algunos atributos que afectan al elemento por su presencia en la etiqueta de inicio, como puede ser el atributo ismap para el elemento <img>.

Esta sería la estructura general de una línea de código en lenguaje HTML:

<tag attribute1="value1" attribute2="value2">content</tag>

O lo que es lo mismo, con un ejemplo:

<a href="http://www.enlace.com" target="_blank">Ejemplo de enlace</a>

Donde:

<a> es la etiqueta o tag inicial y </a> la etiqueta de cierre.
href y target son los atributos.
http://www.enlace.com y _blank son las variables.
Ejemplo de enlace es el contenido.

Aunque también existen elementos vacíos que no necesitan tag de cierre, cuya estructura sería ésta:

<tag attribute1="value1" attribute2="value2" />

Estos elementos vacíos no constan de contenido, como por ejemplo, los tags <br> o <img>.

Tablas en Html

Una tabla no es otra cosa más que un medio de organizar datos en filas y columnas. Este concepto ha estado presente en nuestra sociedad por un largo período de tiempo y ha sido adoptado por HTML en sus etapas iniciales, como una forma de transmitir información que, de otro modo, no sería comprendida tan fácilmente.

En documentos HTML una tabla puede ser considerada, resumidamente, como un grupo de filas donde cada una contiene a un grupo de celdas. Esto es conceptualmente distinto a un grupo de columnas que contiene a un grupo de filas, y esta diferencia tendrá un impacto en la composición y comportamiento de la tabla.

Como muchas otras estructuras de HTML, las tablas son construidas utilizando elementos. En particular, una tabla básica puede ser declarada usando tres elementos, a saber, table (el contenedor principal), tr (representando a las filas contenedoras de las celdas) y td (representando a las celdas).

<table class="egt">
  <tr>
    <th>Hoy</th>
    <th>Mañana</th>
    <th>Miércoles</th>
  </tr>
  <tr>
    <td>Soleado</td>
    <td>Mayormente soleado</td>
    <td>Parcialmente nublado</td>
  </tr>
  <tr>
    <td>19°C</td>
    <td>17°C</td>
    <td>12°C</td>
  </tr>
  <tr>
    <td>E 13 km/h</td>
    <td>E 11 km/h</td>
    <td>S 16 km/h</td>
  </tr>
</table>

Hoy	Mañana	Miércoles
Soleado	Mayormente soleado	Parcialmente nublado
19°C	17°C	12°C
E 13 km/h	E 11 km/h	S 16 km/h

¿Quieres trabajar con nosotros?

Ponte en contacto con nosotros