Conceptos Clave de HTML y Fundamentos de Redes Informáticas

Introducción a las Etiquetas HTML

Las etiquetas HTML, también denominadas tags, son los componentes fundamentales que permiten estructurar y dar formato al contenido de una página web. Con ellas, es posible especificar enlaces, insertar imágenes, gestionar correos electrónicos, controlar la alineación del texto, definir el tipo y tamaño de letra, aplicar colores, crear listas, y mucho más. Es importante destacar que las etiquetas HTML pueden escribirse tanto en mayúsculas como en minúsculas, aunque la convención moderna sugiere el uso de minúsculas para una mayor legibilidad y consistencia.

Elementos Básicos de Formato y Contenido en HTML

Párrafo de Texto

Para definir un párrafo de texto, se utiliza la etiqueta <p>:

<p>Este es un ejemplo de párrafo de texto.</p>

Insertar Enlaces (Hipervínculos)

Para crear un enlace a otra página web o recurso, se utiliza la etiqueta <a> (anchor), especificando la URL de destino en el atributo href:

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

Insertar una Imagen

Para incrustar una imagen en la página, se utiliza la etiqueta <img>. Es una etiqueta vacía (no tiene etiqueta de cierre) y requiere los atributos src (ruta de la imagen) y alt (texto alternativo para accesibilidad):

<img src="ruta/a/imagen.jpeg" alt="Descripción de la imagen">

Enlace a un Correo Electrónico

Para crear un enlace que abra el cliente de correo electrónico del usuario, se utiliza el protocolo mailto: en el atributo href de la etiqueta <a>:

<a href="mailto:[email protected]">Contactar por Email</a>

Alineación de Texto

La alineación del texto se controla preferentemente mediante propiedades CSS, como text-align:

Alinear a la Izquierda

<div style="text-align: left;">Texto alineado a la izquierda.</div>

Alinear a la Derecha

<div style="text-align: right;">Texto alineado a la derecha.</div>

Salto de Línea

Para insertar un salto de línea dentro de un bloque de texto, se utiliza la etiqueta <br> (break), que también es una etiqueta vacía:

<p>Primera línea de texto.<br>Segunda línea de texto.</p>

Tipo de Letra (Fuente)

El tipo de letra se define utilizando la propiedad CSS font-family:

<span style="font-family: 'Arial', sans-serif;">Este texto usa la fuente Arial.</span>

Texto en Negrita

Para resaltar texto en negrita, se utiliza la etiqueta <strong>, que indica importancia semántica:

<strong>Este texto está en negrita.</strong>

Texto en Cursiva

Para aplicar formato de cursiva, se utiliza la etiqueta <em> (emphasis), que también tiene un significado semántico de énfasis:

<em>Este texto está en cursiva.</em>

Texto Subrayado

Para subrayar texto, se puede usar la etiqueta <u> (underline), aunque para fines de estilo se prefiere CSS (text-decoration: underline;):

<u>Este texto está subrayado.</u>

Texto en Itálica

Similar a la cursiva, la etiqueta <em> se utiliza para texto en itálica:

<em>Este es texto en itálica.</em>

Tamaño de Letra

El tamaño de la letra se controla con la propiedad CSS font-size:

<span style="font-size: 1.2em;">Este texto tiene un tamaño de letra mayor.</span>

Subíndice

Para texto en subíndice (por ejemplo, en fórmulas químicas), se utiliza la etiqueta <sub>:

H<sub>2</sub>O

Superíndice

Para texto en superíndice (por ejemplo, exponentes matemáticos), se utiliza la etiqueta <sup>:

X<sup>2</sup>

Texto en Movimiento (Marquee)

La etiqueta <marquee>, utilizada históricamente para crear texto desplazable, está obsoleta y no se recomienda su uso. Para efectos de texto en movimiento, se deben emplear animaciones y transiciones CSS.

<!-- Ejemplo de etiqueta obsoleta -->
<marquee>Este texto se movería si la etiqueta no estuviera obsoleta.</marquee>

Color de Texto

El color del texto se define con la propiedad CSS color:

<span style="color: blue;">Este texto es de color azul.</span>

Tablas HTML

Las tablas HTML permiten organizar datos en filas y columnas de manera estructurada.

Estructura Básica de una Tabla

Una tabla se define con <table>, las filas con <tr> (table row), los encabezados de columna con <th> (table header) y las celdas de datos con <td> (table data):

<table>
  <tr>
    <th>Encabezado 1</th>
    <th>Encabezado 2</th>
  </tr>
  <tr>
    <td>Dato A1</td>
    <td>Dato A2</td>
  </tr>
  <tr>
    <td>Dato B1</td>
    <td>Dato B2</td>
  </tr>
</table>

Color de la Tabla

El color de fondo de una tabla se puede definir con CSS, por ejemplo, usando la propiedad background-color:

<table style="background-color: lightgray;">
  <!-- Contenido de la tabla -->
</table>

Ancho de la Tabla

El ancho de la tabla se controla con la propiedad CSS width:

<table style="width: 100%;">
  <!-- Contenido de la tabla -->
</table>

Ajuste de la Tabla

El ajuste o alineación de la tabla (por ejemplo, centrarla) se puede lograr con propiedades CSS como margin: auto; para tablas con un ancho definido:

<table style="width: 80%; margin: auto;">
  <!-- Contenido de la tabla -->
</table>

Fondo de Pantalla (Color de Fondo de la Página)

El color de fondo de toda la página web se define aplicando la propiedad CSS background-color a la etiqueta <body>:

<body style="background-color: white;">
  <!-- Contenido de la página -->
</body>

Listas HTML

HTML permite crear diferentes tipos de listas para organizar información.

Lista No Numerada (Desordenada)

Para crear una lista no numerada (con viñetas), se utiliza la etiqueta <ul> (unordered list). Cada elemento de la lista se define con la etiqueta <li> (list item):

<ul>
  <li>Primer elemento de la lista</li>
  <li>Segundo elemento de la lista</li>
  <li>Tercer elemento de la lista</li>
</ul>

Elemento de la Lista

La etiqueta <li> se utiliza para definir cada ítem individual dentro de cualquier tipo de lista (numerada <ol> o no numerada <ul>).

Servicios Web y Protocolos Fundamentales

HTML (HyperText Markup Language)

HTML no es un protocolo, sino el lenguaje de marcado estándar para la creación de páginas web. Es la base para estructurar y presentar el contenido en la World Wide Web, permitiendo la inclusión de texto, imágenes, videos y otros elementos multimedia.

Correo Electrónico

El correo electrónico es un servicio fundamental para el envío y recepción de mensajes digitales a través de redes informáticas.

Protocolo de Envío: SMTP

SMTP (Simple Mail Transfer Protocol) es el protocolo estándar utilizado para el envío de correos electrónicos desde un cliente de correo a un servidor, y entre servidores de correo.

Protocolo de Recepción: POP3

POP3 (Post Office Protocol version 3) es un protocolo comúnmente utilizado para la recepción de correos electrónicos, permitiendo a los clientes descargar los mensajes desde el servidor a su dispositivo local.

P2P (Peer-to-Peer)

El modelo P2P (Peer-to-Peer o "de igual a igual") es una arquitectura de red distribuida que permite el intercambio directo de archivos y recursos entre equipos conectados a internet. En una red P2P, cada participante actúa simultáneamente como cliente y como servidor, compartiendo sus propios archivos y accediendo a los de otros.

Servicio Seguro (SSH)

SSH (Secure Shell) es un protocolo de red criptográfico que proporciona una forma segura de acceder a computadoras remotas a través de una red insegura. Su función principal es encriptar la información transmitida, asegurando que solo las partes autorizadas puedan entenderla y protegiéndola de interceptaciones.

VoIP (Voice over IP)

VoIP (Voice over Internet Protocol) es una tecnología que permite la transmisión de voz y comunicaciones multimedia (como video) a través de redes IP, como internet, en lugar de las redes telefónicas tradicionales. Esto posibilita realizar llamadas telefónicas a través de internet.

Telnet

Telnet es un protocolo de red que permite el acceso remoto a otro equipo a través de una interfaz de línea de comandos. Históricamente, se ha utilizado para tareas como el servicio técnico informático remoto. Sin embargo, debido a que transmite la información sin cifrar, ha sido en gran medida reemplazado por SSH para conexiones seguras.

Podcast / Videocast

Un podcast es una serie de episodios de audio digital que un usuario puede descargar o escuchar en línea. Un videocast es su equivalente en formato de video. Ambos sirven para distribuir contenido multimedia que ya ha sido emitido, permitiendo a los usuarios acceder a él en cualquier momento y lugar, bajo demanda.

Interconexión de Redes y Enrutamiento

La interconexión de redes es el proceso mediante el cual la información se envía desde un origen hasta un destino a través de múltiples redes. En este camino, la información se encuentra con diferentes nodos, que son dispositivos (como routers) encargados de decidir la ruta óptima a seguir para que los datos lleguen a su destino.

Para tomar estas decisiones de encaminamiento, los nodos utilizan tablas de enrutamiento (o tablas de encaminamiento), que contienen información sobre las rutas disponibles y las métricas asociadas a cada una.

Routers y Subredes

Un router es un dispositivo de red que reenvía paquetes de datos entre redes de computadoras. Al estar conectado simultáneamente a dos o más redes o subredes, un router posee múltiples direcciones IP, una por cada interfaz de red a la que está conectado. Cada dirección IP lo identifica como un nodo dentro de su respectiva subred.

Ejemplos de Configuración de Routers:

• Router 1: Conecta la subred del Departamento 1 con la subred principal.
• Router 2: Conecta la subred del Departamento 2 con la subred principal.
• Router 3: Conecta la subred principal con Internet.

Dentro de una misma subred, cada nodo está directamente conectado con los demás nodos de esa subred. Sin embargo, para que un nodo se conecte con otro en una subred diferente, es indispensable que la comunicación pase a través de un router.

Los routers mantienen una tabla de encaminamiento que detalla la relación de los nodos de la subred principal (a la cual pertenece el router) y los routers a los que están conectados otros segmentos de red, facilitando así el enrutamiento de paquetes.

Códigos de Color Comunes (Hexadecimal)

En diseño web, los colores se representan a menudo mediante códigos hexadecimales. Algunos de los más comunes incluyen:

• White: #FFFFFF
• Red: #FF0000
• Green: #00FF00
• Blue: #0000FF
• Yellow: #FFFF00
• Black: #000000

Criptografía y Encriptación

La encriptación es el proceso de cifrar información, lo que significa transformarla para ocultar su contenido y hacerla ilegible para cualquier persona que no posea la clave de descifrado. Un texto encriptado o cifrado se genera mediante un algoritmo criptográfico, el cual utiliza una clave (secreta o privada) para realizar la transformación y proteger la confidencialidad de los datos.