Curso de HTML5 y CSS3: Primer archivo en HTML5 --> Hola mundo.

Curso de HTML5 y CSS3: Primer archivo en HTML5 –> Hola mundo.

¿Qué es HTML5?

HTML5 es la última versión del lenguaje de marcado que se utiliza para crear y estructurar contenido en la web. A diferencia de sus predecesores, HTML5 incluye nuevas características y elementos que permiten una mayor interactividad y multimedia.

Configuración del entorno de desarrollo

Antes de escribir tu código HTML5, necesitas prepararte. Asegúrate de contar con un editor de texto adecuado; algunos recomendados son Sublime Text y Visual Studio Code. Estos editores ofrecen características como resaltado de sintaxis y autocompletado que facilitarán tu trabajo.

Tu primer archivo HTML5

Crear un archivo HTML es muy sencillo. A continuación, te mostramos cómo hacerlo:

  1. Abre tu editor de texto.
  2. Crea un nuevo archivo y guárdalo con la extensión .html (por ejemplo, primer_archivo.html).
  3. Escribe el siguiente código:
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Hola Mundo</title>
</head>
<body>
    <h1>Hola mundo</h1>
    <p>¡Bienvenido a tu primer archivo HTML5!</p>
</body>
</html>

El código anterior es la estructura básica de un documento HTML5. Vamos a desglosarlo:

  • <!DOCTYPE html>: Esta línea indica al navegador que se trata de un documento HTML5.
  • <html lang=»es»>: La etiqueta raíz del documento, donde especificamos el idioma.
  • <head>: Contiene metadatos sobre el documento, como el juego de caracteres y el título.
  • <body>: Contiene todo el contenido visible de la página, incluyendo encabezados y párrafos.

Aplicando estilos con CSS3

Ahora que tienes tu primer archivo HTML, es momento de darle un toque estético con CSS3. Para esto, puedes crear un archivo CSS separado o agregar estilos en el propio HTML. A continuación, te mostramos cómo incluir estilos directamente en tu archivo HTML:

<head>
    <meta charset="UTF-8">
    <title>Hola Mundo</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            color: #333;
        }
        h1 {
            color: #007bff;
        }
    </style>
</head>

Con este añadido, tus textos tendrán una mejor presentación. No olvides guardar los cambios y abrir el archivo en un navegador para ver los resultados.

Conclusión

Has aprendido a crear tu primer archivo HTML5 y a aplicar estilos básicos con CSS3. Este es solo el comienzo en el camino hacia el desarrollo web, donde hay muchas más técnicas y conceptos por explorar. ¡Continúa practicando y no dudes en experimentar!

Fuentes y lecturas recomendadas

Deja una respuesta

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies