Fundamentos HTML
HTML es la base de la mayoría de las páginas web: es la forma en que les decimos a los navegadores que estructuren el contenido en títulos, encabezados, párrafos, imágenes, enlaces, listas, formularios, tablas y más.
HTML es la abreviatura de hypertext markup language, el lenguaje central de la World Wide Web. Originalmente diseñado como un lenguaje para explicar semánticamente documentos científicos, se ha adaptado para describir la estructura básica de páginas web y aplicaciones en línea.
Publicado por primera vez por Tim Berners-Lee en 1989, HTML ahora se usa en el 94 % de todos los sitios web, y probablemente en todos los que visitas.
Hypertext o hipertexto es un texto que contiene referencias a otro texto o páginas, también conocido como hipervínculos. Los hipervínculos permiten ir a cualquier parte de la web con un clic del mouse. En lugar de leer una página web en el orden lineal que el autor presentó como en la versión impresa; podemos usar hipervínculos para saltar a otra sección de la misma página, a una página diferente en el sitio web actual o a un sitio web completamente nuevo.
Markup o marcado se refiere a cómo HTML «marca» la página con anotaciones dentro del archivo HTML. Estas anotaciones no se muestran en la página web en sí; funcionan detrás de escena y les dicen a los navegadores cómo mostrar el documento a los visitantes. Pronto aprenderemos más sobre esto
Hoy en día, la mayoría de los desarrolladores utilizan la versión 5.3 de HTML, que es la más actualizada y que comúnmente conocemos como HTML5. Esta versión busca ofrecer elementos y atributos nuevos a los usuarios, adecuados a las necesidades de programación web modernos.
¿Cómo escribir HTML?
HTML, básicamente, es una estructura que consta de etiquetas y atributos. Para ayudarte a visualizar esta sintaxis, aquí hay un gráfico:
Etiquetas HTML
Los elementos HTML se designan mediante etiquetas. La mayoría de los elementos tienen una etiqueta de apertura y cierre. Las etiquetas de apertura preceden al texto y contienen el nombre del elemento entre corchetes «<» y «>». Las etiquetas de cierre son idénticas a las etiquetas de apertura, excepto por una barra inclinada hacia atrás que precede al nombre del elemento. HTML te permite crear diversos elementos que serán proyectados en las páginas, por ejemplo al poner el color de fondo.
Los nombres de los elementos no distinguen entre mayúsculas y minúsculas. Es decir, se pueden escribir en mayúsculas, minúsculas o alguna combinación de las dos. Por ejemplo, la etiqueta
también se puede escribir como
. Aun así, se considera una buena práctica escribir siempre el nombre en minúsculas.
Atributos HTML
HTML es ante todo una forma de estructurar. Si bien todos los elementos HTML necesitan etiquetas, solo algunos requieren atributos. Un atributo proporciona información adicional sobre el elemento HTML y esta información puede ser esencial o no esencial.
Por ejemplo, un elemento de imagen siempre debe tener un atributo de origen cuyo valor sea la URL de la imagen o la ruta del archivo; de lo contrario, el navegador no sabrá qué imagen proyectar. Lo mismo ocurre con el elemento ancla, que se utiliza para crear hipervínculos: requiere contener un atributo href, cuyo valor especifique el destino del enlace; de un modo opuesto, si un visitante hace clic en el elemento ancla, el navegador no lo enviará a ninguna parte.
Ahora que entendemos la importancia de los atributos, asegurémonos de entender cómo encontrarlos y escribirlos. Un atributo siempre se encuentra en la etiqueta de apertura de un elemento HTML y tiene la sintaxis: nombre=valor o name=value.
Muchos elementos tienen su propio conjunto de atributos que afectan la forma en que se representa el contenido en la página. Los atributos se pueden escribir en cualquier orden dentro de la etiqueta de apertura. No obstante, no debes escribir varias instancias del mismo atributo dentro de la misma etiqueta HTML.
Cómo crear un archivo HTML
Para hacer un sitio web con este lenguaje, primero debes generar un archivo HTML. Este archivo contendrá todo el código HTML de tu página web y se cargará en tu servidor web. De esa manera, cuando un visitante busque tu sitio web, el servidor enviará el archivo HTML al navegador del visitante y el navegador mostrará la página, en consecuencia.
En seguida, te explicaré el proceso paso a paso para que puedas crear un archivo HTML para tu proyecto web. Haremos el archivo HTML lo más simple posible para que los principiantes puedan seguirlo.
PASO 1 – Agrega una declaración <!DOCTYPE>
Para comenzar, debes declarar el tipo de documento como HTML y darle una estructura. Para hacerlo, agrega el código especial <!DOCTYPE html> en la primera línea del archivo.
<!DOCTYPE html>PASO 2 – Añade un elemento
Después, querrás definir el elemento raíz del documento. Dado que este elemento indica en qué idioma vas a escribir, siempre será en un documento HTML5.En la línea debajo de la declaración DOCTYPE, agrega una etiqueta de apertura <html>. Debajo de eso, incluye una etiqueta de cierre </html>.
<!DOCTYPE html>
<html>
</html>PASO 3 – Indica un atributo de idioma
Dentro de la etiqueta de apertura del elemento html, también debes incluir un atributo lang (idioma) . Esto ayudará a los lectores de pantalla a determinar en qué idioma está el documento, lo que hará que tu sitio web sea más accesible. Sin un atributo de idioma, los lectores de pantalla utilizarán de forma predeterminada el idioma del sistema operativo, lo que podría dar lugar a errores de pronunciación del título y otro contenido de la página.Dado que estamos escribiendo esta publicación en español, estableceremos el valor del atributo lang del archivo en «es».
<!DOCTYPE html>
<html lang=”es”>
</html>PASO 4 – Agrega una sección de cabeza y cuerpo
Un documento HTML se compone de dos partes: la sección principal y la sección del cuerpo. El encabezado contiene metainformación sobre la página, así como cualquier CSS interno. El navegador no muestra esta información a los lectores. La sección del cuerpo contiene toda la información que será visible en la parte frontal como tus párrafos, imágenes y enlaces. Para crear estas secciones, agrega una etiqueta <head></head> y luego una etiqueta <body></body> entre <html> y </html> en tu documento.
<!DOCTYPE html>
<html lang=”es”>
<head></head>
<body></body>
</html>PASO 5 – Introduce un título en la sección de encabezado
En la sección de encabezado, querrás nombrar tu documento. Escribe un nombre, por ejemplo «Mi primera Web» y luego envuélvelo en etiquetas <title></title>.
<head>
<title>Mi Primera Web</title>
</head>PASO 6 – Agrega etiquetas style y cualquier CSS interno en la sección principal
También debes agregar etiquetas <style></style> dentro de la sección de encabezado. Entre estas etiquetas, añade cualquier CSS interno que estés usando para diseñar tu HTML. En lugar de inventar algunas reglas de CSS, solo incluiremos un comentario en CSS como marcador de posición. También puedes añadir comentarios en HTML para cualquier cosa que no desees que el navegador muestre.Nota: en muchos documentos HTML no verás etiquetas de estilo ni CSS. Eso probablemente significa que la página está usando una hoja de estilo externa, una forma común de agregar CSS a HTML. En el caso de una hoja de estilo externa, verás un enlace en la sección principal del documento.
<head>
<title>Mi página HTML</title>
<link rel="stylesheet" href="style.css">
<!-- Este enlace es necesario si usas una hoja externa-->
<style>
/* Estas etiquetas son necesarias si usas CSS interno */
</style>
</head>PASO 7 – Añade elementos HTML en la sección del cuerpo
En la sección del cuerpo se requiere incluir un encabezado y un párrafo. Escribe el nombre del encabezado y lo envuelves en etiquetas <h1></h1> , y escribes el párrafo entre etiquetas <p></p>
<body>
<h1>Este es un título</h1>
<p>Este es un párrafo.</p>
</body>El Resultado
<!DOCTYPE html>
<html lang=”es”>
<head>
<title>Mi página HTML</title>
<link rel="stylesheet" href="style.css">
<!-- Este enlace es necesario si usas una hoja externa-->
<style>
/* Estas etiquetas son necesarias si usas CSS interno */
</style>
</head>
<body>
<h1>Este es un encabezado</h1>
<p>Este es un párrafo.</p>
</body>
</html>
ETIQUETAS HTML
La primera versión de HTML constaba de solo 18 etiquetas.
Desde entonces, se han lanzado cuatro versiones con docenas de etiquetas agregadas en cada versión. En la versión más reciente, HTML5, hay 110 etiquetas HTML.
Los elementos HTML suelen aparecer en minúsculas, con una etiqueta de inicio, una etiqueta de finalización y algo de contenido en el medio.Ahora, repasaremos los elementos más comunes y sus etiquetas.
Párrafo o Paragraph <P></P>
«El elemento de párrafo HTML representa un párrafo. Al colocar etiquetas <p></p> alrededor del texto, significa que el texto comience en una nueva línea.
Imagen o Image <img>
El elemento de imagen HTML incrusta una imagen en el documento. Requiere un atributo src (source) para representarla correctamente. También se debe incluir un atributo alt en caso de que la imagen no se cargue correctamente o el lector tenga una falla visual.
Encabezados o Headings – desde <h1> hasta <h6>
«Los elementos de encabezado HTML representan diferentes niveles de encabezados de sección. <h1> es el nivel de sección más alto y el más destacado, mientras que <h6> es el más bajo y, por lo tanto, menos destacado.
División <div></div>
El elemento de división de contenido HTML (div) es un contenedor genérico a nivel de bloque para «contenido de flujo o flow content». El contenido de flujo es una categoría de elementos HTML que contienen texto o contenido incrustado. Los elementos de ancla, cita en bloque y encabezado se consideran contenido de flujo.
En el back end, los elementos div ayudan a organizar el código en secciones claramente marcadas. En el front end agregan saltos de línea antes y después del contenido. De lo contrario, no afectan el contenido o el diseño de la página a menos que se diseñen con CSS.
Ancla o Anchor <a></a>
El elemento de anclaje HTML crea un hipervínculo. El elemento ancla requiere un atributo href, que especifica el destino del enlace. El destino puede ser otra sección en la misma página web u otra página en el mismo sitio, o sitios web, archivos y direcciones de correo electrónico externos.
Lista desordenada <ul></ul>
«El elemento de lista desordenada de HTML se usa para agrupar elementos cuando el orden no importa. Las listas de compras, por ejemplo, no necesitan seguir un orden en particular. Los elementos de la lista deben estar definidos por la etiqueta <li> y luego envueltos en el elemento <ul>.
Lista ordenada <ol></ol>
El elemento de lista ordenada de HTML se utiliza para agrupar elementos cuando el orden es importante. Las recetas, por ejemplo, siguen un orden particular. Los pasos deben estar definidos por la etiqueta <li> y luego envueltos en el elemento <ol>.
Una lista ordenada comenzará en el número 1 por defecto. Si deseas comenzar en otro número, simplemente agrega un atributo de inicio y establece el valor en el número que deseas.
Énfasis o Emphasis <em></em>
Este elemento de HTML enfatiza el texto que contiene. Los navegadores normalmente representan el texto en cursiva.
Fuerte o Strong <strong></strong>
El elemento strong de HTML indica que el texto que contiene es de gran importancia o urgencia. Los navegadores normalmente representan el texto en negrita
Anotación no articulada <u>
El elemento de anotación no articulado (unarticulated annotation) marca el texto como si tuviera algún tipo de anotación no textual. Por ejemplo, puedes usar este elemento para anotar errores ortográficos.
Si deseas subrayar el texto para cualquier otro propósito que no sea representar una anotación no textual, utiliza otro elemento HTML o propiedad CSS. Por ejemplo, si quieres subrayar el texto para la decoración, usa la propiedad de decoración de texto de CSS y configúrala como «subrayado»
Tabla o Table <table>
«El elemento <table> crea una tabla para organizar el contenido de una manera que sea fácil de leer de un vistazo. Requiere otros tres elementos HTML: las etiquetas <tr>, <th> y <td>
La etiqueta <tr> define una fila de la tabla.
La etiqueta <th> determina el encabezado de la tabla.
La etiqueta <td> establece los datos de la tabla (es decir, las celdas de la tabla).
Sección o Section <section></section>
Se trata de un elemento HTML semántico que representa secciones independientes de contenido relacionado en una página web. Por ejemplo, un elemento de sección se puede utilizar para agrupar información de contacto.
Salto de línea o Line Break <br>
El elemento line break crea un salto de línea donde se coloca. Eso significa que puedes agregarlo donde quieres que termine el texto en la línea actual y continuar en la siguiente. Este elemento se puede utilizar para mostrar poemas, letras de canciones u otras formas de contenido en las que la división de líneas sea significativa.
Atributos más comunes en HTML
Los atributos modifican los elementos HTML de diferentes maneras. Pueden cambiar la apariencia del elemento, aplicar identificadores únicos para que CSS pueda orientar los elementos o proporcionar la información necesaria a los lectores de pantalla.
Los atributos suelen aparecer en minúsculas y como pares de nombre/valor, con los valores entre comillas.
Atributo de estilo o Style Attribute
El atributo de estilo contiene CSS en línea. Este CSS anulará cualquier estilo establecido en la sección de encabezado del documento o en una hoja de estilo externa. Solo se aplicará al elemento HTML que tenga el atributo de estilo en su etiqueta de apertura.
Atributo de identificación o ID Attribute
El atributo ID se utiliza para identificar un solo elemento en un archivo HTML. Eso significa que el valor de un atributo de ID no debe repetirse dentro del mismo archivo. Al usar este valor único puedes apuntar a un solo elemento con CSS interno o externo.
Atributo de clase o Class Attribute
El atributo de clase se utiliza para identificar un grupo de elementos con el mismo nombre y personalizar ese grupo, creando efectivamente un nuevo grupo de elementos.
Los botones Bootstrap, por ejemplo, están todos etiquetados con la clase .btn, por lo que tienen el mismo estilo básico: fuente de 14 px, tamaño mediano, bordes redondeados, etc.
Atributo Href
Un atributo href contiene el destino de un enlace. Este atributo siempre debe incluirse con un elemento ancla.
Atributo de origen o Source Attribute
Al igual que un elemento ancla necesita un atributo href, una imagen necesita un atributo fuente. Contiene la ruta al archivo de imagen o su URL.
