Lo que hacemos con HTML es dar el formato a los datos de una página para que el navegador los pueda mostrar de manera correcta. Para que te hagas una idea, con HTML se hace la estructura básica y luego aparecen las hojas de estilo (CSS) para poder transformarla de forma mucho más personalizada.
¿Cual es la historia del HTML?
El código HTML fue creado por un físico del instituto de investigación CERN llamado Tim Berners-Lee, y su idea principal era crear un sistema de hipertexto con el que los usuarios pudieran moverse de unos textos a otros por medio de enlaces.La primera versión de HTML se publicó en 1991 y constaba de 18 etiquetas, posteriormente en cada nueva que se ha ido lanzando se han agregado otras y también atributos que son lo que modifica a estas (Luego veremos esto más en profundidad).
En estos momentos HTML es un estándar en el mundo de internet y los encargados de su mantenimiento y desarrollo son los miembros del World Wide Web Consortium (W3C).
¿Cómo funciona exactamente el HTML?
Este código del que acabamos de hablar se escribe en un archivo que tendrá la extensión .htm o .html y se puede leer con cualquier navegador de internet como por ejemplo Chrome, Safari, Edge, Firefox Para cada página que ves en una web, por ejemplo la principal, el sobre mi, el contacto, etc, se crea un HTML diferente.Ese código HTML está formado por etiquetas que a su vez se pueden modificar mediante otra cosa llamada elementos.
Lo normal es que las etiquetas se abran con el nombre de las mismas, después se muestren los atributos y finalmente se cierren de nuevo con el nombre, aunque también hay algunas como <img> que no tienen etiqueta de cierre.
Las etiquetas van dentro de los símbolos mayor que y menor que “<etiqueta>”. Te voy a mostrar a continuación un ejemplo de etiqueta HTML con sus atributos:
< a href = ”https://enlace.com”> texto ancla</a>
Ahí puedes ver la etiqueta < a > con el atributo href que tiene un valor de enlace.com, con la etiqueta que contiene el texto ancla y se cierra en </a>. Esto para que te hagas una idea, sería un enlace que haría que al pulsar en la palabra “texto ancla” dentro de un texto, fuera a la web enlace.com.
¿Cuales son las principales etiquetas del HTML?
Después profundizaremos mucho más en esto, pero es bueno que empieces ya a conocer cuales son las principales etiquetas del HTML y cómo se usan en un documento real.Etiqueta <a>
La etiqueta HTML <a> sirve para poder crear hipervínculos o enlaces, es decir, para crear elementos que permitan a los usuarios navegar de una página a otra. Ejemplo de etiqueta <a>:< a href = ”aquí pondriamos la URL donde queremos enlazar”>Aquí el texto que queremos que se pueda pulsar</a>
Recuerda que este ejemplo es con texto, pero los enlaces se pueden poner en otros sitios como imágenes, como cuando ves un botón en una página web que al pulsarlo lleva a algún sitio.
Atributos de la etiqueta <a>
download: Indica el archivo que se va a descargar si se hace clic en el enlace.
href: Indica la página web a la que está apuntando ese enlace.
hreflang: Indica el idioma del archivo al que está apuntando el enlace.
media: Aquí podemos indicar el dispositivo para el que está optimizado el archivo destino.
rel: Establece la relación entre el archivo actual y el que estamos enlazando.
target: Indica donde se tiene que abrir el archivo destino.
title: Es una descripción del enlace que además se muestra al pasar el ratón por encima del mismo.
type: Indica el tipo de fichero al que estamos enlazando.
Etiqueta <br>
Con esta etiqueta lo que hacemos es un salto de línea, simplemente tenemos que introducirla en cualquier parte del documento HTML y hará un espacio.Etiqueta <div>
La etiqueta <div> sirve para dividir el contenido en bloques que posteriormente podremos formatear con CSS. Es una forma de ordenar los contenidos dentro del código HTML, pero recuerda que la recomendación es usarlo solo cuando no haya otro elemento más apropiado como <nav> o <article>.Etiqueta <form>
La etiqueta <form> nos permite añadir un bloque con el que los usuarios podrán enviar datos al servidor, en otras palabras, un formulario. Cuando ves una caja de comentarios, un formulario de contacto, una encuesta y cosas parecidas, normalmente están dentro de una etiqueta <form>.Etiquetas de <h1> a <h6>
Estas etiquetas sirven para generar encabezados que tienen distintos tamaños, siendo el h1 el más grande y el h6 el más pequeño.Etiqueta <html>
Es la etiqueta principal de un documento HTML y contiene todo el contenido del documento excepto <! DOCTYPE>. Lo que hay que hacer es abrir esta etiqueta y no cerrarla hasta que acabemos de introducir todos los datos del documento.Etiqueta <img>
La etiqueta <img> sirve para establecer un espacio para la imagen que designemos en ella. Un ejemplo sería:<img src=”url de la imagen” alt=”texto alternativo”/>
Etiqueta <p>
Con la etiqueta <p> indicamos a los navegadores que lo que hay dentro de ella es un párrafo.Etiqueta <table>
Nos permite crear una tabla en la que podremos agregar columnas y filas con el uso de <td> y <tr>.¿Cómo se vería el HTML de una página?
Vamos a ver un código HTML de ejemplo:<!DOCTYPE html>
<html>
<head>
<title> Página de ejemplo </title>
<meta charset=utf-8″>
</head>
<body>
<h1> Este es un encabezado </h1>
<p> Este es un ejemplo de una página HTML básica. </p>
</body>
</html>
¿Qué es HTML5?
Es una actualización que vino de la versión anterior (HTML4) y que utiliza las mismas reglas, pero si que incorpora algunas etiquetas y atributos nuevos que sobre todo han ayudado a que se mejore la semántica.Algunos de los nuevos elementos son: <article>, <aside>, <audio>, <bdi>, <canvas>, <datalist>, <details>, <embed>, <figure>, <figcaption>, <footer>, <header>, <keygen>, <mark>, <meter>, <nav>, <output>, <progress>, <rp>, <rt>, <ruby>, <time>, <track>, <video> <wbr>.
También hay algunas nuevas opciones para los formularios que nos permiten introducir datos específicos como teléfono, url, correo electrónico, fecha y hora, etc
Hay algunos elementos que se han eliminado, son: <acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <strike>, <tt>.
Además la declaración doctype también se ha simplificado y ahora se muestra de esta manera:
<! doctype html>
¿Cómo se crea y se visualiza un documento HTML?
Hay editores de programación que nos simplifican mucho el trabajo a la hora de escribir HTML, pero al ser un lenguaje de marcado, bastaría con escribir el código en cualquier editor de texto y guardarlo con la extensión .htm o .html. Después tendremos que subir el archivo a un servidor para poder abrirlo desde un navegador web o también abrirlo en local.¿Cómo aprender HTML?
En este momento la información gratuita que hay sobre HTML en internet es grandísima, por lo que si quieres aprender, lo tienes muy sencillo. Aprender HTML requiere casi de manera inmediata aprender también CSS, te dejo un curso a continuación con el que podrás introducirte en ambos.¿Te quedan dudas?, ¿Quieres aportar algo? No dudes en hacerlo en los comentarios.
Fuente: este post proviene de Guillermo del Pino Consultor SEO, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
Creado: