Archivos HTML: cómo abrirlos y crear un sitio web

Actualmente el uso de Internet y de las páginas web está completamente extendido, de tal forma que difícilmente entenderíamos su carencia. Al visitar nuestras páginas web favoritas vemos que están llenas de elementos como texto, imágenes, etc. Para conocer su creación hay que remontarse a la aparición del HTML, ya que no en vano son los base de todo lo que vemos en la pantalla de nuestra computadora.

Por eso hoy vamos a hablar del archivo HTML. Sabremos qué es exactamente y para qué sirve, así como su origen. También veremos cómo funciona, cómo crear uno fácilmente o cuáles son los mejores programas para abrirlos y editarlos.

¿Qué son los archivos HTML?

Cuando hablamos de HTML ( Lenguaje de marcado de hipertexto) archivos, lo hacemos en un formato de archivo de lenguaje de mercado de hipertexto, que se utiliza como base de una página web. Se almacena en formato de texto estándar y contiene diferentes etiquetas que se encargan de definir tanto el diseño como el contenido de la página web, incluidos los textos, tablas, imágenes e hipervínculos que se muestran en ella. Su uso es principalmente online y se visualizan en navegadores web. Este lenguaje es fácil de aprender y se puede traducir a otros como JavaScript, XML o CSS.

donde surge

Fue en 1991 cuando Tim Berners-Lee, junto con otros ingenieros del CERN, se encargaron de introducir archivos HTML como una forma para que los navegadores web interpreten, lean y muestren páginas web. Desde entonces y hasta el día de hoy, se ha convertido en un estándar en el desarrollo web. En el camino ha habido diferentes revisiones como HTML 2 (1995), HTML 3 (enero de 1997), HTML 4 (diciembre de 1997) y, finalmente, HTML 5 (2014).

En 2004, un grupo formado por los principales desarrolladores de navegadores, incluidos Google, Apple, Mozilla y Firefoxcreó el QUÉ (The Web Hypertext Application Technology Working Group) que en español sería el Grupo de Trabajo de Tecnología de Aplicaciones Web de Hipertexto. Este grupo es responsable del desarrollo y avance del formato HTML.

Como funciona

A través de el lenguaje de marcas, se presentan los elementos HTML que componen las estructuras de las páginas web. Normalmente, cada elemento incluye una etiqueta de apertura encerrada entre corchetes angulares ( ) y una etiqueta de cierre también encerrada entre corchetes, pero con una barra inclinada entre las etiquetas ( ).

Posteriormente, con el tiempo, otras tecnologías web como el código CSS (.css) y JavaScript (.js) se han ido introduciendo en las páginas web HTML actuales. En general, los desarrolladores crean y editan los archivos HTML y luego los suben a los servidores web de los navegadores, que se encargan de analizar e interpretar en segundos, mostrándonos el resultado final cuando visitamos la página. Es por eso que nunca vemos el código fuente HTML en el navegador.

Para explicar la estructura básica de un documento HTML, debemos saber que existen tres etiquetas que lo describen ya través de las cuales se ofrece información sencilla sobre el mismo. Estas etiquetas no afectan en absoluto la apariencia del documento, sino que simplemente enmarcan y estructuran el archivo HTML:

  • y : rodea el documento e indica el idioma en que está escrito.
  • : Especifica el prefacio para el resto del archivo. En su interior hay unas etiquetas, destacando el título que se encarga de identificar el contenido de la página. Solo puede haber un título en cada documento y, si es posible, manténgalo breve y significativo. Además, en el encabezado no debe haber texto del documento.
  • : aquí encontramos el contenido principal o causa del documento. Esta es la parte del documento HTML que se muestra en la computadora.

Ver vista previa de HTML desde el navegador

Como hemos comentado, los navegadores web se encargan de interpretar el código HTML para mostrarnos todo el contenido de forma gráfica, ya sea en forma de texto, imágenes o vídeos, tal y como ha sido diseñado. Sin embargo, es posible ver una vista previa de una página web HTML de cualquier web desde el navegador, siguiendo unos pasos determinados según el que utilicemos

  • Google Chrome: desde su menú de opciones, haciendo clic en “Más herramientas” y “Herramientas para desarrolladores”.
  • Mozilla Firefox : En su menú de opciones selecciona “Más herramientas” y “Fuente de la página”.
  • Microsoft Edge – Haciendo clic en “Más herramientas” y “Herramientas de desarrollador” dentro de su menú de opciones.
  • safari de manzana : en su menú de opciones haciendo clic en “Ver código fuente”.

Estos son solo algunos ejemplos dentro de los navegadores más populares, pero prácticamente cualquier navegador web del mercado tiene la posibilidad de poder visualizar el código HTML.

Cómo crear fácilmente un archivo HTML

Si queremos crear un archivo HTML de forma rápida y sencilla, podemos hacer uso de estos editores de texto gratuitos, que nos permitirán crearlo y guardarlo en cuestión de segundos.

Bloc de notas

Es un editor sencillo integrado en Windows, a través del cual se puede utilizar para escribir pequeños documentos de texto como notas. Al mismo tiempo, también se puede utilizar para crear fácilmente un archivo HTML. Para ello, solo será necesario abrirlo desde el buscador del menú Inicio.

Una vez abierto solo tenemos que escribir el código que necesitamos. Una vez terminado, hacemos clic en la pestaña “Archivo”, se abrirá un menú desplegable donde seleccionamos “Guardar como” .

Ahora dentro de la pestaña Tipo en la parte inferior de la ventana, debemos cambiar la opción “Documentos de texto (*.txt)” a “Todos los archivos (*.*)” . De esta forma, nuestro archivo se guardará como un documento HTML. Todo lo que queda es seleccionar la ubicación del archivo y agregarle un nombre junto con la extensión “html”. Todo lo que queda es hacer clic en Guardar para convertir nuestro documento de texto en un archivo HTML.

Bloc de notas++

Este es posiblemente el mejor editor de texto alternativo al Bloc de notas de Windows. Es un programa gratuito y de código abierto compatible con diferentes lenguajes de programación, tiene soporte nativo para Windows y con el que podemos crear un archivo HTML de forma muy sencilla. Para comenzar, simplemente descárguelo del sitio web del desarrollador .

Una vez descargado e instalado, solo nos queda ejecutarlo para que aparezca su interfaz. Escribimos el código deseado y una vez terminado pulsamos en la pestaña “Archivo”. Esto abrirá un menú desplegable donde elegiremos el “Guardar como” opción.

En la nueva ventana que aparece, vamos a la pestaña Tipo, donde desplegamos todas las opciones y seleccionamos “Lenguaje de marcado de hipertexto (*.hmtl, *.htm, *.shmtl, *.shtm, *.xhtml, *. xht, *.hta)” . Ahora solo nos queda introducir el nombre deseado para el archivo HTML y la ubicación donde queremos que se almacene. Finalmente, haga clic en “Guardar”.

EditPad Lite

Otro programa editor de texto muy popular es EditPad Lite, que tiene una versión gratuita para uso personal. Tiene soporte completo para Unicode y permite la edición directa de archivos de texto utilizando codificaciones de texto y saltos de línea de Windows. A pesar de que su interfaz está en inglés y es fácil e intuitiva, permitiéndonos crear nuestro archivo HTML en cuestión de segundos. Para ello, lo primero es descargarlo de su sitio web oficial .

Lo instalamos y lo ejecutamos para que aparezca su interfaz. Aquí escribimos el código que necesitamos y una vez terminado hacemos clic en la pestaña Archivo. Esto abrirá un menú desplegable donde seleccionamos el Opción “Guardar como”.

En la nueva ventana emergente que aparece, vamos a la sección Tipo, ubicada en la parte inferior. Aquí desplegamos la lista y elegimos “Documentos HMTL (* .html, * .htm, * .shtml, * .hta)” . Ahora solo nos queda darle un nombre y una ruta para guardar el archivo. Finalmente pulsamos en Guardar y ya tenemos creado nuestro archivo HTML.

Los mejores programas para abrir y editar un archivo HTML

Para poder ver una vista previa de los archivos HTML, nuestro propio navegador web puede ser suficiente. Sin embargo, si queremos abrir y editar archivos HTML, lo mejor es utilizar diferentes tipos de programas de desarrollo web como los que vamos a ver a continuación.

código de estudio visual

Microsoft es la empresa encargada de desarrollar este editor de código fuente que funciona con múltiples lenguajes de programación, incluyendo HTML . Cuenta con soporte para depuración de control integrado de Git, resaltado de sintaxis, finalización de código inteligente, fragmentos y refactorización de código. También admite el uso de fragmentos, lo que nos ayuda a reducir drásticamente el tiempo dedicado a escribir código. Por supuesto, el software es personalizable, lo que nos permitirá configurarlo todo, desde el espacio de trabajo hasta la configuración de HTTP o CCS.

Visual Studio Code es una aplicación multisistema que podemos Descárgalo gratis de su sitio web.

Texto sublime

Esta aplicación de edición de texto para profesionales se ha convertido en una de las mejores opciones para abrir y editar archivos HTML y CSS , junto con otros lenguajes de programación. Con él podremos saltar a cadenas o símbolos, definir varias sintaxis, resaltar código, seleccionar varias líneas y hacer una edición dividida. También es compatible con atajos de teclado, lo que nos permitirá dominar y reducir el tiempo de programación y depuración. Está especialmente dirigido a usuarios avanzados, por lo que no está indicado para usuarios novatos que empiezan a hacer sus primeros trabajos de programación.

Sublime Text es multiplataforma y tiene una versión gratuita que podemos descargar del sitio web del desarrollador .

adobe dreamweaver cc

Esta aplicación ha sido creada y desarrollada por Adobe para convertirse en uno de los estándares de la industria cuando se trata de diseñar una página web en HTML , ya que cuenta con ciertas funciones para crear páginas con las últimas innovaciones en diseño junto con un aspecto moderno y que permite cierta flexibilidad para facilitar nuestro trabajo. Su evolución a lo largo del tiempo ha llevado a este software a convertirse en una de las opciones preferidas por los diseñadores web. Además, si no sabemos programar, incluye una serie de módulos predefinidos para ayudarnos a crear sitios web.

Podemos descargar una versión de prueba de Dreamweaver del sitio web de Adobe. Si queremos usarlo de forma permanente, deberemos pagar una suscripción de 24,19 euros al mes.

Related Posts