Ejercitación de HTML PASO A PASO
EJERCICIO HTML:
1. Crea una página con dos párrafos. En el primero, añade varios saltos de línea.
2. Crea una página con un título de primer nivel y luego los dos títulos de segundo nivel.
Define un párrafo para cada título de segundo nivel.
<p>Hola</p> y guarda el archivo como mi_pagina.html..html para que el navegador lo reconozca como una página web..html en el explorador de archivos y elegir "Abrir con..." -> "Navegador web de su elección" para ver la página.<img>. Aquí te dejo el código básico y una explicación:<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Página con Imagen</title>
</head>
<body>
<h1>Bienvenido a mi página</h1>
<p>Aquí tienes una imagen:</p>
<img src="nombre-de-tu-imagen.jpg" alt="Descripción de la imagen" width="500" height="300">
<p>¡Espero que te guste!</p>
</body>
</html>
Explicación del código:
<!DOCTYPE html>: Declara el tipo de documento como HTML5.<html lang="es">: Define el idioma del documento como español.<head>: Contiene metadatos sobre el documento, como:<meta charset="UTF-8">: Especifica la codificación de caracteres para que el texto se muestre correctamente (incluyendo tildes y ñ).<meta name="viewport" content="width=device-width, initial-scale=1.0">: Configura la ventana de visualización para que la página sea responsiva en diferentes dispositivos.<title>Mi Página con Imagen</title>: Establece el título que aparece en la pestaña del navegador.
<body>: Contiene todo el contenido visible de tu página web.<h1>Bienvenido a mi página</h1>: Un encabezado principal.<p>Aquí tienes una imagen:</p>: Un párrafo de texto.<img src="nombre-de-tu-imagen.jpg" alt="Descripción de la imagen" width="500" height="300">: ¡Esta es la clave para la imagen!src="nombre-de-tu-imagen.jpg": Este atributo es obligatorio y especifica la ruta (source) de la imagen.Si la imagen está en la misma carpeta que tu archivo HTML, simplemente pon el nombre completo del archivo (ejemplo:
mi-foto.png,logo.gif, etc.).Si la imagen está en una subcarpeta, debes indicar la ruta relativa (ejemplo:
imagenes/mi-foto.jpg).Si la imagen está en una URL externa, puedes usar la URL completa (ejemplo:
https://www.ejemplo.com/imagenes/mi-foto.jpg).
alt="Descripción de la imagen": Este atributo es muy importante para la accesibilidad. Proporciona un texto alternativo que se muestra si la imagen no se carga, o que es leído por lectores de pantalla para personas con discapacidad visual. También es útil para SEO.width="500"yheight="300": Estos atributos opcionales te permiten especificar el ancho y alto de la imagen en píxeles. Si solo especificas uno, el navegador calculará el otro para mantener la proporción. Si no los especificas, la imagen se mostrará en su tamaño original.
<p>¡Espero que te guste!</p>: Otro párrafo de texto.
Pasos para usarlo con Notepad:
Abre Notepad (o Bloc de Notas).
Copia y pega el código de arriba en el Notepad.
Cambia
nombre-de-tu-imagen.jpgpor el nombre real de tu archivo de imagen (asegúrate de incluir la extensión correcta, como.jpg,.png,.gif, etc.). Asegúrate de que la imagen esté en la misma carpeta que el archivo HTML, o ajusta la rutasrcsegún sea necesario.
Comentarios
Publicar un comentario