Bienvenidos a su sitio Web de la materia de Tecnología e Informática

Creación de Página Web con Bloc de Notas

byRichard Jose olaya torrijo -
0

Guía de Trabajo – Creación de Página Web con Bloc de Notas

Área: Tecnología e Informática
Grado: 11°
Tema: Desarrollo de páginas web en HTML usando Bloc de Notas

Objetivo

Aprender a crear, guardar y visualizar una página web sencilla utilizando código HTML desde cero.

1. ¿Qué es HTML?

HTML (HyperText Markup Language) es el lenguaje que se usa para estructurar el contenido de las páginas web. Está compuesto por etiquetas que indican cómo debe mostrarse la información.

Ejemplo de etiqueta:

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

2. Estructura básica de un documento HTML

Todo archivo HTML debe tener la siguiente estructura mínima:

<!DOCTYPE html>
<html>
<head>
<title>Título de mi página</title>
</head>
<body>
<h1>Bienvenidos</h1>
<p>Este es un párrafo de ejemplo.</p>
</body>
</html>

  • <html> … </html> → Todo el contenido de la página.

  • <head> … </head> → Información de la página (no visible directamente).

  • <title> … </title> → Título que aparece en la pestaña del navegador.

  • <body> … </body> → Todo lo que se ve en la página.

3. Pasos para crear tu primera página web

  1. Abrir Bloc de Notas

    •  Menú Inicio → escribir "Bloc de Notas" → Abrir.

  2. Escribir el código HTML
    Copia el siguiente ejemplo:

<!DOCTYPE html>
<html>
<head>
<title>Mi Primera Página</title>
</head>
<body>
<h1>Hola, esta es mi primera página web</h1>
<p>Estoy aprendiendo HTML usando Bloc de Notas.</p>
<a href="https://www.google.com">Visitar Google</a>
</body>
</html>

  1. Guardar el archivo

    • Archivo → Guardar como…

    • Nombre: index.html

    • Tipo: Todos los archivos

    • Codificación: UTF-8

    • Guardar en el escritorio.

  2. Abrir en un navegador

    • Busca el archivo index.html en tu escritorio.

    • Haz doble clic y se abrirá en el navegador.

4. Ejercicios prácticos

  1. Cambia el título de la página por tu nombre.

  2. Agrega un segundo párrafo con información sobre ti.

  3. Inserta una imagen usando:

<img src="https://www.ejemplo.com/imagen.jpg" width="300">

  1. Agrega un enlace a una página de tu interés.

5. Reto final

Crea una página web que contenga:

  • Un título grande con tu nombre.

  • Dos párrafos de presentación.

  • Una imagen.

  • Un enlace a tu red social favorita.

Guarda tu trabajo como proyecto.html y preséntalo al docente.

إرسال تعليق

Post a Comment (0)

أحدث أقدم