~1~
~2~
Índice
Introducción..................................................................................................... 3
Desarrollo......................................................................................................... 4
Resultados........................................................................................................ 9
Conclusión...................................................................................................... 13
~3~
Introducción
Google suite (Bloc de notas) permite a los usuarios crear y gestionar
sitios web de manera fácil y sin necesidad de tener conocimientos
avanzados de programación o diseño.
En el mundo digital actual, es fundamental contar con herramientas que
nos ayuden a organizar nuestras ideas y tareas. Google Keep, parte de
Google Workspace, es una excelente opción para quienes necesitan un
bloc de notas virtual accesible desde cualquier dispositivo. Con esta
aplicación, puedes escribir notas rápidas, hacer listas de pendientes,
establecer recordatorios e incluso agregar imágenes o grabaciones de
voz para capturar información de manera sencilla. Su integración con
otros servicios de Google, como Drive y Calendar, facilita aún más la
gestión del trabajo y las actividades diarias.
Lo que hace especial a Google Keep es su facilidad de uso y versatilidad.
A diferencia de una libreta física, aquí puedes clasificar tus notas con
colores, etiquetas y compartirlas con otras personas, lo que resulta ideal
para la colaboración en proyectos o simplemente para organizar mejor la
información personal. Además, si prefieres la escritura a mano, puedes
dibujar directamente en la aplicación. Todo esto se sincroniza
automáticamente, asegurando que nunca pierdas tus anotaciones y
puedas acceder a ellas en cualquier momento y desde cualquier
dispositivo con tu cuenta de Google.
En definitiva, Google Keep es una herramienta poderosa para quienes
buscan mantener sus ideas ordenadas y accesibles en todo momento. Ya
sea que lo utilices para tomar apuntes rápidos, planificar un proyecto o
recordar tareas diarias, ofreciendo una solución práctica.
~4~
Desarrollo
Todo lo que se encuentra entre y > son etiquetas de html.
La etiqueta de <html> nos indicara que lo que estamos creando es un
html
<head> Contiene información sobre la página que NO es visible
directamente para el usuario.
<body> Contiene todo el contenido visible de la página
~5~
<title> sirve para definir el título de una página web, que aparece en la
pestaña del navegador y en los resultados de búsqueda.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> se usa
para indicar la versión del lenguaje que está utilizando.
~6~
<h1> al <h6>
se usan para definir encabezados de distintos niveles. Van desde, que es
el más grande y más importante, hasta, que es el más pequeño y menos
relevante.
<h1>→ Título principal, el más grande y relevante.
<h2>→ Subtítulo o secciones importantes dentro del contenido.
<h3>→ Encabezado para dividir temas dentro de h2
<h4>→ Se usa para subtítulos más específicos.
<h5>→ Encabezado de menor importancia dentro de la jerarquía.
<h6> → El encabezado más pequeño y menos utilizado.
<b> se utiliza para colocar texto en negrita, resaltando palabras o
frases sin agregar importancia semántica.
~7~
<img> sirve para añadir imágenes
<ul> <li> son etiquetas en HTML para crear listas.
<ul> (Lista no ordenada)
Se usa para crear listas con viñetas.
<li> (Elemento de lista)
Cada <li> define un elemento dentro de una lista, ya sea ordenada <ol>
o no ordenada <ul>
<ol> sirve para hacer listas ordenadas, es decir, listas numeradas donde
los elementos se organizan siguiendo un orden específico.
~8~
<dl> <dt> <dd> se utilizan para crear listas de definiciones, ideales
para mostrar términos con sus correspondientes explicaciones.
<dl> → Define una lista de términos.
<dt> → Representa el término o concepto que se quiere explicar.
<dd> → Contiene la definición o descripción del término.
~9~
Resultados
¿Qué es una página web? Una página web es básicamente un espacio
digital donde se muestra información, se interactúa con contenido o se
ofrecen servicios. Imagínala como una hoja en un gran libro llamado
"internet". Algunas son simples, solo con texto e imágenes, mientras que
otras tienen botones, videos y funciones interactivas.
Para nosotros, las páginas web se han vuelto indispensables. Son la
forma en que encontramos recetas, leemos noticias, compramos en
línea o simplemente pasamos el rato. Es como tener una biblioteca, una
tienda y un cine en tu bolsillo.
¿Qué es HTML? HTML es el lenguaje con el que se crean las páginas
web. Es como la estructura básica de una casa: define dónde van las
~ 10 ~
habitaciones, las ventanas y las puertas, pero no pone los muebles ni la
decoración (eso lo hacen CSS y JavaScript).
Cuando ves una página web con texto, imágenes y enlaces, todo eso
está organizado con HTML. Por ejemplo, si quieres escribir un título,
usas, si necesitas un párrafo, usas, y si quieres poner una imagen,
utilizas. Si lo pensamos en términos simples, HTML es como una receta
para una página web. Le dice al navegador qué debe mostrar y cómo
organizar los contenidos. Por ejemplo:
Con <h1> puedes definir un título grande.
Con <p> se crea un párrafo de texto.
Con <img> se insertan imágenes.
Con <a> se crean enlaces a otras páginas.
Menciona cuales fueron las etiquetas que utilizaste para la
creación de tu página web y su función.
<!DOCTYPE html>: Define el tipo de documento y la versión de
HTML utilizada (HTML5).
<html>: Indica el inicio del documento HTML. Todo el contenido
debe estar dentro de esta etiqueta.
<head>: Contiene información sobre la página, como el título y
enlaces a hojas de estilo.
<title>: Define el título que aparece en la pestaña del navegador.
<body>: Es donde se coloca el contenido visible de la página.
<h1> a <h6>: Son encabezados de diferentes niveles, de mayor
(<h1>) a menor importancia (<h6>).
<p>: Representa un párrafo de texto.
<img>: Permite insertar imágenes en la página web. Se usa el
atributo src para definir la ruta de la imagen.
<ul>: Crea una lista no ordenada (con viñetas).
<ol>: Genera una lista ordenada (con números).
<li>: Representa un elemento dentro de una lista (<ul> o <ol>).
<dl>: Define una lista de términos y descripciones.
<dt>: Indica un término dentro de una lista de definiciones (<dl>).
<dd>: Es la descripción del término (<dt>).
~ 11 ~
¿Qué es un hosting y cuál es su función?
Un hosting es básicamente el lugar donde vive tu página web en
internet. Piensa en él como el "hogar digital" de tu sitio, donde se
guardan todos los archivos, imágenes, textos y datos necesarios para
que tu página funcione correctamente.
Cuando alguien visita tu sitio web, su navegador se conecta a ese
hosting para descargar la información y mostrarla en pantalla. Si el
hosting es rápido y seguro, tu página carga sin problemas y está
protegida contra errores o ataques.
Hay distintos tipos de hosting, dependiendo de lo que necesites:
🔹 Compartido: Ideal para sitios pequeños, donde varios usuarios
comparten el mismo servidor.
🔹 VPS (Servidor Virtual Privado): Un paso más allá, con más recursos y
control.
🔹 Dedicado: Perfecto para proyectos grandes, ya que todo el servidor es
exclusivo para ti.
🔹 Cloud Hosting: Más flexible y escalable, con datos almacenados en
varios servidores en la nube.
¿Cómo agregar imágenes a tu sitio web?
Paso 1: Usa la etiqueta <img> en HTML
La etiqueta <img> se usa para mostrar imágenes en una página web.
Aquí tienes un ejemplo básico:
<img src="imágenes/foto.jpg" alt="Descripción de la imagen">
📌 Explicación:
src=¨Imágenes/foto.jpg¨ → Es la ruta donde esta guardada la imagen
alt=¨Descripción de la imagen¨ → Es un texto alternativo para mejorar
accesibilidad y mostrarlo si la imagen no carga.
Paso 2: Asegúrate de que la imagen esté en la carpeta correcta
~ 12 ~
Guarda la imagen en la misma carpeta del proyecto o en una
subcarpeta, por ejemplo:
📂 MiSitioWeb
├── index.html
├── imágenes/
│ ├── foto.jpg
Paso 3: Controla el tamaño con CSS
Si quieres ajustar el tamaño de la imagen, puedes usar CSS:
<img src="imágenes/foto.jpg" alt="Descripción" width="300"
height="200">
O con CSS separado:
img {
width: 300px;
height: auto;
Paso 4: Usa imágenes de internet
También puedes usar imágenes alojadas en la web con una URL:
<img src="https://www.ejemplo.com/imagen.jpg" alt="Imagen
desde internet">
Paso 5: Agregar imágenes como fondo
Si quieres que una imagen aparezca como fondo, usa CSS:
body {
background-image: url("imagenes/fondo.jpg");
~ 13 ~
background-size: cover;
}
~ 14 ~
Conclusión
Crear una página web desde cero es una experiencia emocionante y
creativa. Al aprender HTML, descubrimos que este lenguaje funciona
como el esqueleto de un sitio web, dándole estructura y organizando el
contenido. Ya hemos visto cómo usar etiquetas clave como <h1> para
títulos, <p> para párrafos, <img> para imágenes y listas <ul> y <ol>
para ordenar información. Cada elemento tiene su función y ayuda a que
nuestra página se vea bien organizada.
Pero el HTML por sí solo no es suficiente para que un sitio sea realmente
atractivo. Aquí es donde entran otros elementos, como CSS, que permite
personalizar colores, tamaños y la disposición de cada elemento en la
pantalla, y JavaScript, que añade interactividad para hacer que la página
reaccione a lo que el usuario hace.
Otro punto clave fue el hosting, que es el servicio que permite que
nuestra página esté disponible en internet. Sin un hosting, el sitio web
solo viviría en nuestra computadora, pero gracias a servidores que
almacenan sus archivos, cualquiera en el mundo puede visitarlo con un
simple enlace. Hay diferentes tipos de hosting, desde opciones
compartidas para proyectos pequeños hasta servidores dedicados para
sitios más grandes y con mucho tráfico.
También hablamos sobre imágenes y su importancia en la web.
Aprendimos que se pueden agregar fácilmente con la etiqueta <img>,
pero también que es fundamental organizarlas bien en carpetas y usar
el atributo alt para accesibilidad. Además, vimos cómo las imágenes
pueden usarse como fondos para hacer una página más visualmente
atractiva.
En conclusión, la creación de un sitio web es un proceso donde
combinamos estructura, diseño y funcionalidad para ofrecer una
experiencia atractiva a los usuarios. Con HTML aprendemos a construir
la base, con CSS personalizamos su apariencia y con JavaScript le damos
vida. Y para que todo esto funcione en internet, necesitamos un buen
hosting que lo mantenga accesible.
El mundo del desarrollo web es infinito, y lo que hemos visto
aquí es solo el comienzo.
~ 15 ~
