"Una página web es un documento de la World Wide Web «con dirección propia». Las páginas web son entregadas por un servidor web al usuario y mostradas en un navegador web para que actúe como «unidad de recuperación» de la información almacenada en su interior. Un sitio web está formado por muchas páginas web enlazadas bajo un nombre de dominio común. El nombre «página web» es una metáfora de las páginas de papel encuadernadas en un libro."

Probablemente esta definición solo te haya ayudado un poco a aclarar la pregunta. Veamos un video que probablemente te ayude un poco más a aclarar tus ideas.

5.1.2 ¿Cómo funciona un sitio web?

Imagina que una web funciona como una tienda física.

El escaparate es lo primero que ves al pasar por delante: está decorado, con carteles bonitos, productos bien colocados... Eso sería el frontend de una web: lo que ves en la pantalla.
En una web, eso se diseña con HTML, CSS (colores, formas, estilos) y JavaScript (interacción, animaciones...).
Pero, detrás del escaparate, hay un almacén: donde están realmente los productos, bien organizados. Eso sería el backend de la web: la parte que no ves, pero que se encarga de que todo funcione.
Allí está la base de datos, que guarda información como los productos, los usuarios, los pedidos, etc.

Ejemplo real 1: Amazon

El escaparate (frontend) sería lo que ves al entrar en Amazon: el buscador, las imágenes de productos, botones de "comprar", reseñas…
El almacén (backend) es el sistema que guarda todos los productos, controla si están disponibles, registra tu compra y la envía. Usa una base de datos enorme con millones de productos y usuarios.

Ejemplo real 2: Netflix

El escaparate es lo que ves al entrar: los menús, portadas de series, el botón de reproducir…
El almacén es donde están guardadas las películas, la información de tu cuenta, tu historial, tus listas… Todo eso está en bases de datos que el sistema usa para mostrarte recomendaciones.

5.1.3 ¿Cómo se forma un sitio web?

Un sitio web se compone de diferentes archivos. Unos archivos son código como los documentos html, las hojas de estilo y los programas javascript; otros archivos son recursos como imágenes o vídeos.

Cuando un dispositivo cliente quiere acceder a una página web, los archivos que componen el sitio web se descargan desde el servidor al cliente.

En ese momento, el navegador (Mozilla, Chrome, etc.) interpreta el código (html, css y js) y muestra la web al usuario. Estos archivos son troceados en paquetes para su envío.

Dividimos el desarrollo web en dos áreas diferenciadas (cliente y servidor).

CLIENTE

En el entorno cliente creamos las páginas web con las que interactúan los usuarios y utilizamos principalmente los lenguajes:

HTML para estructurar y organizar los contenidos.
CSS para conseguir una apariencia determinada.
JavaScript para controlar el comportamiento.

SERVIDOR

En el entorno servidor se crean páginas web dinámicas, normalmente insertando datos desde una base de datos dentro de plantillas HTML. Para ello, solemos utilizar:

Frameworks web escritos en lenguajes como python, php o javascript que hacen más fácil escribir y escalar aplicaciones web.
Bases de datos SQL/NoSQL (almacenan datos en tablas / o bien mediante modelos más flexibles como pares clave-valor o colecciones).

Estoy seguro que tras ver el video, tienes mucho más claro qué es una página web. ¿Aún tienes dudas?.

Los equipos conectados a la web se dividen en clientes y servidores.

Los clientes son los dispositivos de los usuarios, éstos emplean un navegador para acceder a la información (Firefox, Chrome, etc).

Por otro lado, los servidores son los ordenadores que almacenan sitios y aplicaciones web. Utilizan un software especial, que les permite escuchar las peticiones de los clientes, procesarlas y enviar una respuesta. Normalmente, los servidores se encuentran situados en centros de datos.

HTTP (Protocolo de Transferencia de HiperTexto) es empleado en la comunicación entre clientes y servidores, y DNS (Sistema de Nombres de Dominios) se encarga de traducir nombres en direcciones IP.

5.1.4 HTML, CSS y JAVASCRIPT

Estos son los tres lenguajes principales que se utilizan en el front-end de nuestra aplicación, es decir, se utilizan en el lado del cliente en el propio navegador. Pero ¿cuál es la diferencia entre ellos? ¿Son realmente todos lenguajes de programación?

Su nombre proviene del inglés Hyper Text Markup Language, que significa "lenguaje de marcado de hipertexto".

Imagínate una página web, como la que estás leyendo ahora mismo. Puedes ver que hay varios elementos separados, como encabezado, título, párrafos, imágenes y tantos otros. Toda la organización de estos elementos se realiza mediante HTML. Se utiliza para crear toda la estructura de la página y, para ello, utiliza las famosas tags (etiquetas) para indicar dónde se implementará cada tipo de elemento.

Por ejemplo, si desea insertar un párrafo en la pantalla, puedes usar la tag <p> para eso, colocando el texto deseado dentro del elemento, como se muestra a continuación:

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

Cascading Style Sheet, más conocido como CSS, es un lenguaje de estilos que, como HTML, tampoco se considera un lenguaje de programación. Es la encargada de separar la parte estructural de la aplicación (que estará en manos de HTML) de la parte estética. Para usar CSS, usamos la siguiente sintaxis:

selector {

propiedad: valor;

}

Agrega movimiento a las páginas web, además de permitir el procesamiento y transformación de los datos enviados y recibidos. Te permite crear contenidos que se actualizan de forma dinámica y animada, dando vida a aplicaciones que antes solo estaban estructuradas estáticamente con HTML.

Siempre que vea un cuadro de alerta sonando en un sitio web, o un mecanismo de autocompletar en algún campo, sepa que Javascript está funcionando. Un ejemplo de código usando el cuadro de alerta:

alert(‘Hello World’);

Comparando cada uno de ellos ahora, podemos usar el cuerpo humano como una página web como ejemplo, de la siguiente manera:

HTML es el esqueleto, formado por los huesos que lo sostienen. CSS es la piel, el cabello y las ropas, creando la apariencia que realmente vemos cuando miramos a alguien. Y por fin, Javascript es el músculo que le da movimiento al cuerpo.

Actividad 5.1: Nuestra primera página web

En esta actividad debes realizar los siguientes pasos:

Con un editor de textos crea un nuevo archivo escribiendo en su interior la estructura básica de una web como hemos visto en clase, tienes que mostrar el mensaje Empezamos con HTML.
A continuación guarda tu archivo con el nombre actividad1a_nombreyapellidos.html
Abre tu archivo con un navegador de internet y observa lo que ocurre.
Realiza modificaciones en el documento para que en el navegador se va una página similar a la de la imagen. Guarda este archivo con el nombre actividad1b_nombreyapellidos.html

Para modificar los encabezados utiliza las etiquetas de encabezado que van desde h1 hasta h6.

5.2 HTML.

5.2.1 HyperText Markup Language

HTML (HyperText Markup Language) es el lenguaje de marcado que se usa para crear páginas web. Define la estructura y el contenido de una página.

5.2.2 Estructura básica de una página HTML

- Un archivo HTML contiene una estructura básica que se organiza mediante etiquetas (tags). Estas etiquetas delimitan elementos como títulos, párrafos, imágenes, etc.

- La estructura básica de una página HTML es:

DOCTYPE: Informa al navegador que el documento está en HTML5.
html: Es el contenedor de toda la página.
head: Contiene información sobre la página (metadatos), como el título.
body: Contiene el contenido visible de la página.

Etiquetas HTML principales

Encabezados: Se utilizan para los títulos de la página, desde <h1> (mayor importancia) hasta <h6> (menor importancia).
Párrafos: <p> define un párrafo de texto.
Enlaces: <a> crea un hipervínculo. Se utiliza el atributo href para especificar la URL de destino.

<a href="https://www.ejemplo.com">Visita Ejemplo</a>

Listas:

No ordenadas (<ul> y <li>): listas de elementos sin orden específico.

<ul>

<li>Elemento 1</li>

<li>Elemento 2</li>

</ul>

Ordenadas (<ol> y <li>): listas con orden numérico.

<ol>

<li>Elemento 1</li>

<li>Elemento 2</li>

</ol>

Imágenes: <img> inserta una imagen. Usa src para indicar la ruta de la imagen y alt para una descripción.

Atributos comunes en HTML

Los atributos son características que podemos agregar a las etiquetas para modificar su comportamiento o apariencia. Ejemplos de atributos comunes:
- id: Identificador único para un elemento.
- class: Nombre de clase que se puede compartir entre varios elementos para estilos en CSS.
- src: Fuente de una imagen o archivo.
- alt: Texto alternativo para imágenes.

Actividad 5.2: Crear una tarjeta de presentación

Objetivo: Practicar el uso de etiquetas y atributos básicos.
Instrucciones:
1. Crea una nueva página HTML con el título “Tarjeta de Presentación”.
2. Dentro del cuerpo, agrega un título principal con tu nombre completo.
3. Escribe un párrafo describiendo tus intereses o hobbies.
4. Añade una imagen de perfil (puede ser de internet o una imagen local) usando la etiqueta para subir imágenes y especifica un texto alternativo.
5. Crea un enlace que lleve a tu sitio web favorito o a tu perfil de una red social.
Desafío: Usa clases (class) para estilizar tu nombre y párrafo, pensando en cómo podrían verse en una tarjeta de presentación. (PARA LLEGAR AL 10 - BLV)

Actividad 5.3: Crear una página de lista de tareas

Objetivo: Aprender a crear listas ordenadas y no ordenadas en HTML.
Instrucciones:
1. Crea un archivo HTML titulado "Lista de Tareas".
2. Agrega un encabezado principal con el texto "Mis Tareas Diarias".
3. Crea una lista ordenada con las tareas que realizas por la mañana.
4. Crea una lista no ordenada con las tareas de la tarde.
5. Incluye un último encabezado con el título "Mis Objetivos Semanales" y añade una lista no ordenada con tus metas o actividades para la semana.
Desafío: Usa el atributo id para identificar cada sección y piensa en cómo cada sección podría ser estilizada de forma diferente. (PARA LLEGAR AL 10 - BLV)

Actividad 5.4: Crear una página de galería de fotos

Objetivo: Practicar el uso de imágenes y enlaces.
Instrucciones:

Crea un archivo HTML titulado "Galería de Fotos".
Dentro del cuerpo, agrega un encabezado que diga "Mi Galería de Fotos".
Inserta al menos 4 imágenes utilizando la etiqueta de imágenes, y asegúrate de que cada imagen tenga un texto alternativo.
Debajo de cada imagen, incluye un enlace que permita descargar la imagen (puede ser un enlace falso con # para practicar la estructura).
Agrega un párrafo al final de la galería invitando a ver la colección completa y enlaza a una página externa de galerías de fotos o una URL relacionada.

Desafío: Intenta agregar una breve descripción debajo de cada imagen usando etiquetas <figcaption> o <p>. (PARA LLEGAR AL 10 - BLV)

TABLAS

¿Qué es una tabla?

Una tabla es una estructura que permite organizar los datos en filas y columnas. Al igual que en una hoja de cálculo o una tabla en un documento de texto, cada celda contiene un dato. En HTML, las tablas se construyen utilizando varias etiquetas especiales.

Estructura básica de una tabla

La estructura básica de una tabla en HTML es la siguiente:

<table>

<tr>

<td>Celda 1</td>

<td>Celda 2</td>

</tr>

</table>

Explicación

<table>: Inicio de la tabla
<tr>: Fila de la tabla
<td>: Celda de datos

Encabezados de tabla

Para destacar los títulos de cada columna, usamos la etiqueta <th> (table header) en lugar de <td>. Los encabezados se muestran en negrita y centrados por defecto.

<table>

<tr>

<th>Nombre</th>

</tr>

<tr>

</tr>

</table>

Añadir un borde a la tabla

Por defecto, las tablas en HTML no tienen bordes visibles. Si queremos que las celdas tengan líneas que las separen, podemos usar el atributo border:

...

</table>

Título de la tabla: <caption>

La etiqueta <caption> permite añadir un título descriptivo a la tabla. Este título aparece justo encima de la tabla.

<caption>Horario Escolar</caption>

<tr>

<th>Lunes</th>

<th>Martes</th>

</tr>

</table>

Celdas que ocupan varias filas o columnas

Para unir varias columnas usamos colspan y para unir filas usamos rowspan.

Ejemplo con colspan:

<tr>

<td colspan="2">Recreo</td>

</tr>

Ejemplo con rowspan:

<tr>

<td rowspan="2">Matemáticas</td>

<td>Lunes</td>

</tr>

<tr>

<td>Martes</td>

</tr>

BUENAS PRÁCTICAS

Usa <th> solo para encabezados.
Usa <caption> si la tabla representa información importante.
No abuses de colspan y rowspan.
Usa CSS para mejorar el aspecto visual.

RESUMEN

Etiqueta - Significado

<table> - Crea una tabla

<tr> - Fila de la tabla

<td> - Celda de datos

<th> - Celda de encabezado

<caption> - Título de la tabla

border - Atributo para mostrar bordes

colspan - Une varias columnas

rowspan - Une varias filas

Actividad 5.5: Diseña tu horario de clase

Objetivo: Practicar la creación de tablas en HTML utilizando las etiquetas básicas y algunos atributos avanzados.

Instrucciones:

Vas a crear una tabla en HTML que represente tu horario de clases. Para ello, sigue estas indicaciones:

Crea una página HTML sencilla con una tabla que incluya:

- Una fila de encabezado con las columnas: Hora, Lunes, Martes, Miércoles y Jueves.
- Seis franjas horarias (puedes inventarlas).
- Asignaturas en cada celda según tu horario (puedes usar clases reales o inventadas).

Añade un título a la tabla utilizando la etiqueta <caption>.
Usa las etiquetas adecuadas: <table>, <tr>, <th>, <td>.
Añade un recreo que ocupe todas las columnas usando el atributo colspan.
Incluye al menos una asignatura que dure dos horas seguidas, utilizando el atributo rowspan.
Asegúrate de que la tabla tenga bordes visibles (border="1").

Recomendación:

Antes de escribir el código, haz un pequeño boceto en tu cuaderno para organizar qué asignaturas pondrás y dónde irá el recreo o la asignatura doble.

Page updated

Google Sites

Report abuse