miércoles, 29 de abril de 2026

OpenEDG. primeros pasos HTML

 

Configuración de un entorno de desarrollo HTML

Para comenzar a escribir y probar su código HTML, necesitará un entorno de desarrollo mínimo que incluya un par de herramientas y recursos básicos. Estas herramientas incluyen a editor de texto y un navegador web.

Editor de texto

Un editor de texto es una aplicación de software que le permite crear y editar archivos de texto sin formato y escribir y editar código. Para escribir código HTML, puede utilizar cualquier editor de texto básico, como Bloc de notas en Windows o Editar texto en Mac.

Logotipos de Visual Studio Code, Sublime Text y Notepad++

Sin embargo, utilizar un editor de texto dedicado diseñado específicamente para la codificación puede mejorar enormemente su proceso de aprendizaje. Editores de texto como:

proporcionar una variedad de funciones diseñadas específicamente para codificación, tales como resaltado de sintaxis, lo que ayuda a que las diferentes etiquetas y elementos HTML sean visualmente más distintos, y finalización del código, que puede completar automáticamente el código a medida que escribe. Estas características te ayudan a Escribir código de forma más rápida y precisa, y puede reducir las posibilidades de cometer errores.

Navegador web

Es necesario un navegador web para que Abra, vea y pruebe su código HTML. La mayoría de los navegadores web modernos incluyen herramientas de desarrollo integradas que pueden ayudarle a depurar su código y analizar el rendimiento de su página web. Están diseñados para interpretar código HTML y mostrar su contenido, formato y diseño de una manera fácil de usar.

Logotipos de los navegadores Google Chrome, Mozilla Firefox y Microsoft Edge

Algunos ejemplos de navegadores web de uso común incluyen:

Para ver un archivo HTML en un navegador web, simplemente puede hacer doble clic en el archivo en su sistema de archivos, y el navegador web asociado con los archivos HTML debe abrir y mostrar el archivo. Alternativamente, puede abrir el navegador web y luego usarlo por medio de Archivo menú o un acceso directo de teclado para abrir el archivo HTML. Una vez abierto el archivo en el navegador, podrás interactuar con su contenido, seguir enlaces y navegar entre páginas, como lo harías con cualquier otra página web.

Tu primer archivo HTML

¡Genial! Estás listo para crear tu primer archivo HTML y ver tu primera página web. Para comenzar, asegúrese de tener un editor de texto y un navegador web instalados en su computadora. Estas herramientas serán tus mejores amigas a lo largo de este viaje. Una vez que los tengas listos, sigue estos tres pasos:

Paso 1 – Crear un archivo HTML

Abra su editor de texto y cree un nuevo archivo. ¡Es hora de darle vida a tu página web! Guarde el archivo con un nombre memorable y asegúrese de utilizar el .html extensión, como muestra.html. Esto le dice a la computadora que es un archivo HTML.

Paso 2 – Escribe el código HTML

¡Aquí viene la parte emocionante! Dentro de su archivo HTML, comenzará agregando la estructura esencial de un documento HTML. Lo tenemos cubierto con el código que necesita. Simplemente copie lo siguiente:

índice.html
<!DOCTYPE html>

<html>

<head>

  <title>My First Web Page</title>

</head>

<body>

  <h1>Hello, World!</h1>

  <p>This is my first web page.</p>

</body>

</html>

¡Mira eso! Has sentado las bases para tu página web. El código establece la estructura, agrega un título e incluye un encabezado y un párrafo. Siéntete libre de personalizar el contenido para expresar tu creatividad y personalidad.

No te preocupes si aún no estás familiarizado con todos los conceptos. Cubriremos todo en detalle más adelante en el curso, para que tengas una comprensión sólida. Por ahora, centrémonos en comenzar a crear su archivo HTML y abrirlo en un navegador web. ¡Se avecinan tiempos emocionantes!

Paso 3 – Guarde y abra el archivo HTML

¡Ahora es el momento de ver tu creación cobrar vida! Guarde el archivo HTML y navegue hasta la ubicación donde lo guardó. Haga doble clic en el archivo y, como por arte de magia, se abrirá en su navegador web predeterminado. ¡Voila! Verás tu página web mostrada maravillosamente.

¡Guau, lo lograste! Ha creado y abierto con éxito su primer archivo HTML. Tómese un momento para apreciar su logro y las increíbles posibilidades que le esperan en su viaje de desarrollo web.

Recuerde, esto es sólo el comienzo. Cuanto más practiques y explores, más aprenderás y descubrirás. Esperamos que pronto te diviertas experimentando con diferentes elementos HTML, agregando imágenes y jugando con estilos para hacer que tu página web sea exclusivamente tuya.

El logotipo de Edube Sandbox

Edube™ Sandbox

¡Buenas noticias! En este curso tendrás acceso a la Caja de arena Edube herramienta. Le permite escribir, probar y obtener una vista previa de su código HTML de inmediato. No es necesario instalar ni configurar ningún software en su computadora.

Para acceder a Edube Sandbox, simplemente busque y haga clic en Editor botón en su pantalla, o haga clic en el botón "Ejecutar" junto al código HTML que proporcionamos en el curso, de esta manera:

índice.html
<!DOCTYPE html>

<html>

<head>

  <title>My First Web Page</title>

</head>

<body>

  <h1>Hello, World!</h1>

  <p>This is my first web page.</p>

</body>

</html>

Una vez allí, puedes editar tu código en el editor. Con solo hacer clic en el botón "Ejecutar", verás que tu código cobra vida. ¡Esperamos que lo disfrutes!

 
Posted by at
Labels: , , , , ,

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)