INSTITUTO BET-EL DE PASTO
Año lectivo 2024
Guía de trabajo
ÁREA: Tecnología e ASIGNATURA: Tecnología e
PERIODO: 4
informática informática
DOCENTE: Alejandra Luna GRADO: NOVENO FECHA: 28/10/2024
VAMOS A CREAR UNA PÁGINA WEB
Abrir el bloc de notas: el block de nota es un editor de texto que viene preinstalado con el sistema
operativo Windows. Por lo tanto, no necesita descargar e instalar éste.
¿Cómo usar el Bloc de notas para HTML?
El Bloc de notas es como otros editores de HTML. Puede abrir, editar, guardar todo el proceso que
puede hacer con otros editores de HTML, pero no es compatible con muchas funciones que admite otro
editor HTML como: Resaltador de sintaxis, predicción de código, generador de código automático e
identificador de etiqueta de inicio y cierre.
Hora de empezar a crear
<! DOCTYPE html5>
Este código le dice al navegador web qué lenguaje estamos usando (HTML) o (HTML5), cada página
que desarrolles siempre debe iniciar con este código.
Ahora estamos listos para comenzar una estructura real de tu primera página web. Comience
agregando el siguiente código a su documento, directamente debajo de nuestro último código:
<html>
</html>
La etiqueta de inicio <html> le dice al navegador que queremos comenzar nuestro documento; De
igual manera, la etiqueta final </html> le dice al navegador que queremos finalizar nuestro
documento. Antes de que podamos agregar cualquier contenido emocionante a nuestra página, hay
un elemento más que debemos agregar. Inserte el siguiente código directamente debajo de la
etiqueta de inicio <html>
<body>
</body>
El elemento <body> aloja todo el contenido que desea mostrar a la audiencia que visite tu página, ya
sea (texto, imágenes, videos, juegos o cualquier otra cosa.).
¡Ahora, agregaremos nuestro primer contenido a nuestra página! ¿Qué tal un gran título en negrita?
Agrega el siguiente código debajo de la etiqueta de inicio <body>
<h1>Mi primera página web con el bloc de notas de Windows </h1>
¿cuándo y cómo usar la etiqueta <h1>?
Decidimos usar la etiqueta <h1> para describir nuestro encabezado porque este es el encabezado
más importante (y único) en nuestra página. utilizaremos las etiquetas <h1>, <h2> y <h3>
dependiendo de la importancia o si es un título o si es subtitulo.
para ilustrar agreguemos una lista con viñetas a nuestra página. Agregue el siguiente código
directamente debajo de su etiqueta final </h1>:
<ul>
<li> HTML </li>
<li>Java </li>
<li>JavaScript</li>
</ul>
El elemento <ul> es el código de “Lista desordenada” y el elemento <li> es el código de
“elemento de lista”; en ocasiones no querrás hacer listas ordenadas sino listas
desordenadas para ello podrías reemplazar <ul> por <ol> como en este ejemplo:
<ol> <li> HTML </li>
<li>Java </li>
<li>JavaScript</li>
</ol>
PARA VUALIZAR TU PÁGINA WEB:
Llego la hora de guardar nuestro documento y luego ver cómo se ve en nuestro
navegador. Desde el bloc de notas, haga clic en Archivo y luego en Guardar como,
nombrar el archivo así: mi_primer_pagina_web.html. Es muy importante que nuestro
archivo termine con la extensión “.html”. Esto le dice a nuestro pc qué tipo de archivo es.
Si está en una PC con Windows, asegúrese de hacer clic en el cuadro desplegable debajo
de la entrada del nombre del archivo, etiquetado como “Tipo:” y seleccione la opción
“Todos los archivos”. Esto asegurará que su documento se guarde en el formato correcto.
Continue y guarde su documento.
Ejecutemos el archivo en el navegador web
Listo ahora debes de buscar en el lugar donde guardaste el archivo y darle doble clic y se
ejecutara en el navegador de tu preferencia veras el título en negrita y una lista
desordenada de tres enunciados.