HTML qué es
Diseño y Desarrollo web

HTML ¿Qué es y cómo crear tu primer código?

Tiempo de lectura: 4 minutos

HTML es uno de los lenguajes más utilizados para la creación de páginas web. En educación se puede utilizar como herramienta básica para la creación de páginas web sencillas desde un bloc de notas, por ejemplo. En esta nota te contamos ¿Qué es HTML y cómo crear tu primer código? ¡Sigue leyendo para más información!

HTML qué es

En inglés, HTML significa Hypertext Markup Language y en español, significa lenguaje de marcación de hipertexto. Parece un poco complicado, pero si nos ponemos a pensar podríamos decir que, HTML es la base de todo sitio web, es decir con este tipo de lenguaje, los navegadores pueden estructurar mejor la información: Encabezados, párrafos, enlaces, imágenes etc.

Asimismo, el lenguaje HTML, está compuesto por atributos y marcadores (tag), elementos fundamentales que definen cómo va a estar estructurado el contenido de un sitio web.

Anteriormente, mencionamos que HTML, es el acrónimo de Hypertext Markup Language, es decir Hipertextos, que hace referencia a textos con bloques interconectados y que pueden incluir imágenes, textos, tablas y otros elementos como también apuntar a otros hipervínculos o enlaces externos.

Por ejemplo: este es un hipervínculo que te envía a otra nota de nuestro blog para conocer las 8 Plataformas para crear un sitio web. También, te pueden llevar a documentos, pdf, número de WhatsApp, ubicación o Email.

¿Cuáles son los elementos más usados en HTML?

Ahora que ya sabes qué es html editor, te vamos a mostrar los principales marcadores que definen las funciones de los elementos que forman la estructura de un sitio web.

Antes de empezar, debemos aclarar que cada marcador siempre comienza con un signo de menor que (<), seguido del nombre de la etiqueta, y finalizando con un signo mayor que (>) y la /, de esta manera (/>). ¡Ahora sí comencemos!

Encabezado (<head>) o html head

El encabezado o cabecera de un sitio web, mayormente contiene datos o meta datos importantes de este, por ejemplo: el título del sitio web, script, enlaces y las hojas de estilo.

Cuerpo del sitio web (<body>)

Dentro de este elemento va toda la información o contenido que se encuentra dentro del sitio web. Dentro de un código HTML puede ir sólo un <body>.

Párrafo (<p>)

Cuando iniciamos un párrafo, debemos escribir el marcador <p> luego debe cerrarse con el tag </p>

Por ejemplo: <p> Encontrá en nuestro blog Recursos TIC para tus clases </p>

Encabezado (<h2> al <h6>) dentro de HTML

Por otro lado, están las etiquetas de encabezado, que se usan como título principal <h2> o subtítulos <h2>, <h3>, <h4>, <h5> y <h6>, dependiendo de la profundidad que tenga un texto, en cuanto a subtítulos.

Por su parte, en HTML el H1, es el más importante de todos, y no debe repetirse, ya que es único. Pero si, pueden repetirse los h2, h3, h4 y así sucesivamente. Aquí te mostramos html ejemplos, que pueden estar ordenados de diferentes maneras, pero es más que nada para que sepas la estructura y tamaño de cada uno.

HTML

Imagen (<img>)

Para el caso de las imágenes, no es necesario cerrar el tag, como el caso anterior, ya que al ser un contenido visual se define con la etiqueta con el atributo «src» (source). En caso de que la imagen no se cargue correctamente debemos insertar el atributo Alt, que es el nombre de la imagen.

Por ejemplo: <img src=»(enlace de la imagen)» alt=»»>

Lee también

Ancla o Anchor (<a>) en HTML pagina web

El anchor o ancla, te permite crear un hipervínculo, que es ni más ni menos que un enlace a una página interna o externa de la actual. Por lo que necesitas utilizar el atributo «href», para especificar el destino del enlace. También, puedes enlazar archivos PDF, email o teléfonos.

Por ejemplo: <a href=» (enlace)/a>

¿Cómo crear tu primer código HTML?

Ahora que sabes cuáles son los elementos para crear el código HTML, debes saber que editor utilizar para poder ponerlo en marcha. En este caso podrás utilizar un editor de texto simple (bloc de notas) y un navegador web (Chrome, Mozilla etc) para visualizar la página.

Es importante saber que, también existen editores profesionales con una gran variedad de códigos especializados en la creación de sitios web como: HTML, HTML5, CSS, entre otros. Pero para quienes los que recién empiezan a diseñar páginas básicas, es recomendable que utilicen este tipo de códigos.

Pasos para crear un HTML

Para crearlos, primero debes abrir un nuevo archivo en bloc de notas y guardarlo con el nombre miprimersitioweb.html y con la extensión .html.

Una vez abierto, deberás copiar y pegar el siguiente código. Pero ¡cuidado! dejamos algunas anotaciones para que veas cómo lo estás haciendo.

La primera parte de un código HTML, comienza con la siguiente estructura fija.

HTML ¿Qué es y cómo crearlo?

Recuerda siempre utilizar la / para cerrar una etiqueta. Una vez que hayas terminado, deberás guardar el archivo y luego el ícono tendrá la imagen de un mundito, que significará que ya creaste tu primer código en HTML, por lo que podrás acceder y de forma automática se te abrirá el navegador web para visualizar tu página.

Como veras es muy sencillo crear una página sencilla con el código HTML, solo debes tener en cuenta cuando abrir y cerrar la etiqueta y qué elementos utilizarás para poder organizar mejor la información.

Hasta acá llegamos con la información acerca de ¿Qué es HTML y cómo crear tu primer código? Esperamos que te haya sido útil.

Recorda que en SabDemarco vas a encontrar más recursos y herramientas para aprender todo sobre Diseño-Desarrollo web y programación. Sigue leyendo para más información.

¿Cómo harías tu sitio web con HTML? ¿Qué información le agregarías para destacarte?

Adriana Kreiman
Artículo
HTML ¿Qué es y cómo crear tu primer código? Aprende a crear una web
Nombre del artículo
HTML ¿Qué es y cómo crear tu primer código? Aprende a crear una web
Descripción
HTML es uno de los lenguajes más utilizados para la creación de páginas web. ¡Aprende sobre HTML y cómo crear tu primer sitio web en pocos pasos!
Autor
Publisher Name
SabDemarco
Publisher Logo

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *