1. Introducción
HTML (Lenguaje de Marcas de Hipertexto, del inglés HyperText Markup Language) es el componente más básico de la Web. Define el significado y la estructura del contenido web. Además de HTML, generalmente se utilizan otras tecnologías para describir la apariencia/presentación de una página web (CSS) o la funcionalidad/comportamiento (JavaScript).
“Hipertexto” hace referencia a los enlaces que conectan páginas web entre sí, ya sea dentro de un único sitio web o entre sitios web. Los enlaces son un aspecto fundamental de la Web. Al subir contenido a Internet y vincularlo a las páginas creadas por otras personas, te conviertes en un participante activo en la “World Wide Web” (Red Informática Mundial).
HTML utiliza “marcas” para etiquetar texto, imágenes y otro contenido para mostrarlo en un navegador Web. Las marcas HTML incluyen “elementos” especiales como <head>, <title>, <body>, <header>, <footer>, <article>, <section>, <p>, <div>, <span>, <img>, <aside>, <audio>, <canvas>, <datalist>, <details>, <embed>, <nav>, <output>, <progress>, <video>, <ul>, <ol>, <li> y muchos otros.
Un elemento HTML se distingue de otro texto en un documento mediante “etiquetas”, que consisten en el nombre del elemento rodeado por < y >. El nombre de un elemento dentro de una etiqueta no distingue entre mayúsculas y minúsculas. Es decir, se puede escribir en mayúsculas, minúsculas o una mezcla. Por ejemplo, la etiqueta <title> se puede escribir como <Title>, <TITLE> o de cualquier otra forma.
¿Qué significa hipertexto?
Del mismo modo que un hipermercado es mejor que un mercado. El hipertexto es mejor que el texto. De manera simplificada es texto con enlaces que te llevan a otros documentos.
¿Es HTML case sensitive?
2. Estructura básica de HTML
Ahora veremos cómo combinar los elementos individuales para formar una página HTML completa:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Título de la página</title>
</head>
<body>
<h1>Esto es una cabecera</h1>
<p>Esto es un párrafo.</p>
<p id="bienvenida">¡Bienvenido!</p>
</body>
</html>
<!DOCTYPE html>: El elemento doctype. En sus inicios, cuando el HTML llevaba poco tiempo (alrededor de 1991-1992), los doctypes servían como enlaces al conjunto de reglas que la página HTML debía seguir para que fuera considerado buen HTML. En la actualidad se ignora y se considera un legado histórico que hay que incluir para que todo funcione correctamente.<html></html>: El elemento<html>. Este elemento envuelve todo el contenido de la página. A veces se lo conoce como el elemento raíz.<head></head>: El elemento<head>(cabecera). Este elemento actúa como contenedor para todos los parámetros que quieras incluir en el documento HTML que no serán visibles a los visitantes de la página.<meta charset="utf-8">: Este elemento establece que tu documento HTML usará la codificación UTF-8, que incluye la gran mayoría de caracteres de todos los idiomas humanos escritos.<title></title>: El elemento<title>. Este establece el título de la página, que es el título que aparece en la pestaña del navegador en la que se carga la página.<body></body>: El elemento<body>. Contiene todo el contenido que quieres mostrar a los usuarios cuando visitan tu página, ya sea texto, imágenes, vídeos, juegos, pistas de audio reproducibles o cualquier otra cosa.
¿Cómo vemos el código HTML de una web?
F12 o Click derecho e Inspeccionar
Veamos el código fuente de esta página web. ¿Tiene la estructura que se ha explicado?
2.1. Elemento
Los elementos HTML son los componentes básicos de un documento HTML. En esta página que estás leyendo, por ejemplo, el título, un párrafo y una imagen son elementos H1, P e IMG, respectivamente. No todos los tipos de elemento son visibles: algunos tienen como única función agrupar a otros elementos, por ejemplo.
Exploremos un poco el elemento párrafo:
Elemento y etiquetas HTML
Las principales partes de nuestro elemento son:
- La etiqueta de apertura: consiste en el nombre del elemento (en este caso, p), encerrado entre paréntesis angulares de apertura y cierre. Esta etiqueta de apertura marca dónde comienza el elemento o comienza a tener efecto. En este ejemplo, precede al comienzo del texto del párrafo.
- El contenido: Este es el contenido del elemento. En este ejemplo, es el texto del párrafo.
- La etiqueta de cierre: Es lo mismo que la etiqueta de apertura, excepto que incluye una barra diagonal antes del nombre del elemento. Esto indica dónde termina el elemento; en este caso, dónde finaliza el párrafo. No incluir una etiqueta de cierre es un error común de principiante, y puede conducir a extraños resultados.
El elemento lo conforman la etiqueta de apertura, seguida del contenido, seguido de la etiqueta de cierre.
¿Cómo se llama un elemento que tiene clave pero no tiene valor?
Elemento vacío.
2.2. Atributo
Los elementos también pueden tener atributos. Los atributos tienen este aspecto:
Atributo HTML
Los atributos contienen información extra sobre el elemento que no se mostrará en el contenido. En este caso, el atributo class asigna al elemento un identificador que se puede utilizar para dotarlo de información de estilo.
Un atributo debería tener:
Un espacio entre este y el nombre del elemento. (Para un elemento con más de un atributo, los atributos también deben estar separados por espacios). El nombre del atributo, seguido por un signo igual. Un valor del atributo, rodeado de comillas de apertura y cierre.
Nomenclatura HTML
¿Para que sirve el atributo alt o texto alternativo?
El atributo ALT o etiqueta ALT es un atributo HTML para un texto que describe una imagen. El atributo ALT se coloca directamente en la etiqueta de la imagen. Si una imagen no se puede mostrar por alguna razón, el atributo ALT proporciona texto alternativo para mostrar en su lugar.
¿Qué es un atributo booleano?
Son atributos que tienen clave pero no tienen valor. Por ejemplo en este input <input type="checkbox" name="vehicle" value="car" checked> el atributo checked es booleano.
Los valores true y false están especificamente prohibidos en los atributos booleanos. Para representar el valor false el atributo no debe aparecer.
Todos los siguientes ejemplos son correctos y equivalentes:
1
2
3
<input type="checkbox" name="vehicle" value="car" checked disabled>
<input type="checkbox" name="vehicle" value="car" checked="checked" disabled="disabled">
<input type="checkbox" name="vehicle" value="car" checked disabled="">
¿Es correcto el elemento <a href=https://www.mozilla.org/>mi sitio web favorito</a>?
¿Es correcto el elemento <a href='http://www.ejemplo.com'>Un enlace a mi ejemplo.</a>?
¿Es correcto el elemento <a href='http://www.ejemplo.com' title=Es correcto o no>Un enlace a mi ejemplo.</a>?
¿Es correcto el elemento <a href="http://www.ejemplo.com" title="¿Es 'correcto'?">Un enlace a mi ejemplo.</a>?
¿Es correcto el elemento <a href='http://www.ejemplo.com' title='¿Es 'correcto'?'>Un enlace a mi ejemplo.</a>?
¿Qué es un lenguaje de programación?
Un lenguaje de programación es un lenguaje formal que le proporciona a una persona, en este caso el programador, la capacidad de escribir (o programar) una serie de instrucciones o secuencias de órdenes en forma de algoritmos con el fin de controlar el comportamiento físico o lógico de un sistema informático, de manera que se puedan obtener diversas clases de datos o ejecutar determinadas tareas.
A todo este conjunto de órdenes escritas mediante un lenguaje de programación se le denomina programa informático.
¿Es HTML un lenguaje de programación?
Formularios
¿Cuáles son los pasos que debo seguir para poder ver que información estaría enviando a un servidor desde un formulario?
Preguntas sobre el vídeo
- ¿Para que sirve el elemento
label? - ¿Para que sirve el atributo for en un elemento
label? - ¿Para que sirve el atributo name en un elemento
input? - ¿Para que sirve el atributo
placeholder? - ¿Se te ocurre un caso real donde necesitemos utilizar dos elementos form dentro de un mismo html y tenga sentido?
- ¿Para que sirve el atributo
type="email"? - ¿Para que sirve el atributo
type="password"? ¿Se envia la contraseña encriptada si ponemos el atributotype="password"? - ¿El atributo
type="submit"en que dos elementos lo podemos usar? ¿Para que sirve este atributotype="submit"? - ¿Para qué sirve el
type="reset"? - ¿Qué tipos de input existen? text, password, email, etc.
- ¿Para qué sirve el atributo
name? ¿Y elvalue? - ¿El valor de los atributos debe ir siempre entre comillas dobles?
- ¿Qué diferencia existe entre los input
type="radio"ytype="checkbox"? - ¿Qué diferencia hay entre el
type="date"ytype="datetime-local"ytype="time"? - ¿Podemos en un input con atributo
type="number"poner números negativos? ¿Y números decimales? - ¿Cuál es el atributo que hace que solo puedas elegir una opción dentro del tipo/categoría?
- ¿Depende el formato de la fecha de la lengua en la que escribimos el html (
<html lang="es">)?