HTML. Significa HyperText Markup Language. Y ahora es el lenguaje estándar de marcado para páginas web y aplicaciones en línea. Si haces clic derecho y luego presionas inspeccionar en una página web, verás esas cuatro letras en la etiqueta html en la parte superior del código, antes que nada.
Pero, ¿qué es exactamente HTML? ¿Para qué se usa? ¿Y en qué se diferencia de los lenguajes de programación típicos? Sigue leyendo para averiguarlo.
Entonces, ¿qué es HTML?
HTML está prácticamente en todas partes, y casi todos los programadores (novatos o profesionales) saben cómo escribir en él. En resumen, le dice a tu computador qué mostrar y dónde en el desarrollo de páginas. ¿Dónde debería ir este menú? ¿Este texto debería ser un título o un párrafo? ¿Es esto un enlace? ¿Qué tamaño debería tener esta imagen?
Pero el mayor secreto es que HTML no es realmente un lenguaje de programación. No ejecuta consultas ni algoritmos ni matemáticas sofisticadas. Lo usas principalmente para construir estructuras para tus documentos, usando tablas, secciones, párrafos y más. Es una lista muy organizada e inteligente de elementos y atributos que componen las páginas web, las aplicaciones web, los documentos y los correos electrónicos que ves todos los días.
Aquí tienes un ejemplo
Echa un vistazo al fragmento de código a continuación:
<!DOCTYPE html>
<html>
<title> Soy las palabras en la pestaña de la parte superior de la pantalla. </title>
<body>
<h1> Soy el encabezado que puedes ver </h1>
<p> Soy un texto de párrafo. </p>
<p> Soy otro párrafo. </p>
</body>
</html>
Este es un fragmento de código para un documento muy simple. Si pegamos este código en esta herramienta de vista previa de HTML, se verá así. Muy claro. Pero analicémoslo:
<!DOCTYPE html>: Esto le dice a tu computador en qué lenguaje está el documento (en este caso, es una página web).
<html>: este es el comienzo del documento. Todo vive dentro de esta etiqueta (más sobre esto a continuación).
<title>: este es el título de la página. Es lo que verán los usuarios en la pestaña de la parte superior.
<body>: Todo tu contenido vive aquí.
<h1>: este es el título principal de tu documento que los usuarios finales pueden ver.
<p>: este es el texto de párrafo estándar. Probablemente lo usarás la mayor parte del tiempo.
¿Cómo funciona HTML?
Casi todos los sitios web tendrán un montón de páginas HTML (documentos) diferentes. Toma nuestro sitio como ejemplo. Tenemos una página de inicio. Una página de contacto. Y luego tenemos un montón de blogs y artículos. Todos los cuales tienen archivos HTML separados y únicos.
En el caso de un navegador web, este leerá el archivo HTML y luego mostrará su contenido. (Te lo mostrará) Los proveedores de correo electrónico harán lo mismo con los correos HTML. Y así sucesivamente.
Pero, ¿cómo la plataforma sabe qué es qué? La respuesta: Elementos y atributos. Los archivos HTML los usan para decirle al navegador qué es cada sección y cómo debería verse. Profundicemos un poco más.
¿Qué son los elementos?
Los elementos son los diferentes tipos de secciones de tu código. Usualmente se ven como etiquetas y, por lo general, se ven en tres partes:
- Etiqueta de apertura: <p>. Le dice al navegador qué hacer con el siguiente fragmento de texto.
- El texto intermedio. (El usuario suele verlo).
- Etiqueta de cierre </p>. Le dice al navegador que deje de hacer algo.
Por ejemplo:
<p> Hay una etiqueta al comienzo de esta oración. Este escrito que estás leyendo es el contenido. Y hay otra etiqueta al final </p>.
Por lo general, siempre hay una etiqueta de apertura y cierre. Le dice al navegador cuál es el contenido, pero también cuándo debería dejar de serlo. Y si eres inteligente y configuras tu CSS, entonces tu HTML sabrá qué estilo debe tener esa sección (por ejemplo, tamaño de fuente, color, etc.).
Entonces, una etiqueta simple es <b> que resalta las cosas </b>.
Algunos de los elementos que puedes utilizar incluyen:
<!DOCTYPE html>: lo utilizarás al principio de cada documento HTML. Define el documento como HTML. Que no cunda el pánico. No necesitarás una etiqueta de cierre. Considéralo una declaración.
<html> y </html>: usualmente es lo que sigue. Le dice al navegador: Estoy usando HTML para el próximo bit. (Y no, por ejemplo, JavaScript). Cualquier otro elemento, atributo y código se ubicará dentro. No tendrás dos en el mismo documento.
<meta> y </meta>: pondrás toda tu metainformación aquí (cosas sobre el documento). Por ejemplo, una meta descripción es el texto que aparece debajo de un resultado de búsqueda de Google.
<title> y </title>: bastante obvio, pero este será el título de tu documento.
<body> y </body>: es el material visible de la página (todo el contenido principal).
<h1> y <h1>: este es un encabezado grande. Y puede ir desde h1 hasta h6.
<p> y </p>: este es un texto en párrafo.
<li> y </li>: es una lista. Lo que estamos usando ahora. Aunque estamos usando <ul> (lista desordenada).
Es posible que en algún momento veas algo llamado <div>. Es una sección diseñada con CSS.
¿Qué son los atributos?
Los atributos son características adicionales a tu código. Por lo general, viven dentro de tus etiquetas y se dividen en dos partes: el nombre y el valor. El nombre le dice al proveedor cuál es el atributo (por ejemplo, un cambio de estilo del texto), y el valor es a lo que debería cambiarse (por lo tanto, a color rojo). Entonces, si cambia el texto de tu párrafo a rojo, se vería así:
<p style = ”color: red;” ”> Este texto ahora es rojo </p>
Algunos atributos son necesarios. Por ejemplo, cuando utilizas una etiqueta <img> (para una imagen), deberás agregar un atributo src para darle una fuente. Para que la etiqueta acabe viéndose así:
<img src = ”https://ubicacióndelaimagen.com”>.
Luego podemos agregar algunos atributos más, así que añadamos restricciones en la altura y el ancho de la imagen. Entonces se verá así.
<img src = ”https://ubicacióndelaimagen.com;” ancho= ”200″ alto=”400″>
Sin ellos, la imagen recurriría a su tamaño original, que puede verse mal en tu documento. O utilizará cualquier CSS que haya configurado.
Únete a nuestro bootcamp
Si estás ansioso por aprender a programar y más, los bootcamps de Coding Dojo te enseñarán todas las habilidades necesarias para comenzar incluso desde cero.