Slaider de imagenes

MENU

anuncio

Curso basico de lenguaje de marcas lección 2

 Lección 2: Creación de Páginas Web Sencillas

¿Qué vamos a aprender?

En esta lección, aprenderás los fundamentos para construir tus propias páginas web. Descubrirás cómo organizar el contenido de manera efectiva utilizando HTML y cómo añadir elementos visuales como imágenes y enlaces.

¿Qué es HTML?

HTML (HyperText Markup Language) es el lenguaje estándar para crear estructuras de páginas web. Imagina que es el esqueleto de una página web, definiendo la organización y la estructura del contenido.


Estructura básica de una página HTML

Toda página HTML tiene una estructura básica que se compone de las siguientes etiquetas:

  • <!DOCTYPE html>: Declara el tipo de documento HTML.
  • <html></html>: Raíz de todo documento HTML.
  • <head></head>: Contiene información sobre la página, como el título.
  • <body></body>: Contiene el contenido visible de la página.

<!-- end list -->

HTML

<!DOCTYPE html>

<html>

<head>

    <title>Mi primera página web</title>

</head>

<body>

    </body>

</html>

Usa el código con precaución.

Agregando contenido a tu página

  • Encabezados: Utiliza las etiquetas <h1>, <h2>, <h3>, etc. para crear encabezados de diferentes niveles.
  • Párrafos: Utiliza la etiqueta <p> para crear párrafos.
  • Saltos de línea: Utiliza la etiqueta <br> para insertar un salto de línea.

            <!-- end list -->


HTML

<body>

    <h1>¡Bienvenido a mi página!</h1>

    <p>Este es un párrafo de ejemplo.</p>

    <p>Puedes utilizar <b>etiquetas en negrita</b> o <i>etiquetas en cursiva</i>.</p>

    <br>

    <h2>Otro encabezado</h2>

</body>

Usa el código con precaución.

Insertando imágenes

Para insertar una imagen, utiliza la etiqueta <img> y el atributo src para especificar la dirección de la imagen.

HTML

<img src="mi_imagen.jpg" alt="Descripción de la imagen">

Usa el código con precaución.

El atributo alt es importante para la accesibilidad y la optimización para motores de búsqueda.

Creando enlaces

Para crear un enlace a otra página, utiliza la etiqueta <a>. El atributo href especifica la URL del destino.

HTML

<a href="https://www.example.com">Visita mi sitio web</a>

Usa el código con precaución.

Creando listas

Puedes crear listas ordenadas y no ordenadas:

  • Listas ordenadas: Utiliza la etiqueta <ol>.
  • Listas no ordenadas: Utiliza la etiqueta <ul>.
  • Elementos de la lista: Utiliza la etiqueta <li> para cada elemento de la lista.

<!-- end list -->

HTML

<ul>

    <li>Manzana</li>

    <li>Banana</li>

    <li>Naranja</li>

</ul>

Usa el código con precaución.

Ejemplo completo

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Mi página web</title>
</head>
<body>
    <h1>¡Bienvenido a mi página!</h1>
    <p>Esta es una página web sencilla creada con HTML.</p>
    <img src="paisaje.jpg" alt="Un hermoso paisaje">
    <h2>Mis frutas favoritas</h2>
    <ol>
        <li>Manzana</li>
        <li>Banana</li>
        <li>Naranja</li>
    </ol>
    <a href="https://www.google.com">Visitar Google</a>
</body>
</html>

Usa el código con precaución.

¿Cómo ver tu página web?

  1. Guarda el archivo: Guarda el código HTML en un archivo con extensión .html (por ejemplo, index.html).
  2. Abre el archivo: Haz doble clic en el archivo para abrirlo en tu navegador web.

¡A practicar!

Ahora que conoces los fundamentos, ¡es hora de crear tus propias páginas web! Experimenta con diferentes etiquetas y atributos para personalizar tus diseños.

Recursos adicionales:

En la próxima lección, exploraremos cómo darle estilo a nuestras páginas web utilizando CSS.