CARACTERISTICAS Y TIPOS DE

WEB´S, HTML.
MODULO 3, SUB 1

1 DE ABRIL DE 2021
ING. JUAN CARLOS RODRIGUEZ FRAZ
CECYTE HOPELCHÉN
 Páginas Web

Una página web estática es un documento adaptado a la web que proporciona un

contenido fijo a todos los usuarios, es decir, es un sitio de internet que no modifica
su contenido para personalizarlo y adaptarlo a cada interacción. Por tanto, son páginas
que no se actualizan constantemente. También se conocen como páginas planas.

Funciones de las páginas web estáticas

La principal función de una página web estática es presentar una información
estable que no es necesario modificar con frecuencia. Por poner un ejemplo
claro, se pueden crear páginas web estáticas para informar sobre la dirección de
un negocio, para detallar los servicios fijos que ofrece, para contar la historia
y la trayectoria de la empresa, etc.

Ventajas de las páginas web estáticas

Algunas de las ventajas que ofrecen las aplicaciones web estáticas son:

• Funcionan en cualquier servidor.

• Tardan poco en cargar.
• Gran funcionalidad.
• No requieren instalación.
• Mejoran el posicionamiento.
• Se gasta menos en alojamiento.
• No requieren mucho mantenimiento.
Desventajas de las páginas web estáticas
Por otro lado, las desventajas de estas aplicaciones web son:

• No tienen muchas funcionalidades.

• El proceso de actualización es complejo.
• El usuario no puede seleccionar o modificar el contenido o el diseño.
• El programador tiene que acceder al servidos donde se aloja la página
para realizar cambios.
¿Qué es una aplicación web dinámica?

Las aplicaciones web son herramientas digitales pensadas para que sean
accesibles desde un navegador. Uno de los diferentes tipos de aplicaciones
web es el de la app dinámica.

Una página web dinámica es una aplicación informática que utiliza bases de
datos para cargar su información. El contenido de estas páginas cambia
siempre que el usuario entra, por tanto, la información puede variar según la
interacción del visitante de la web.

Características de una página web dinámica

Las principales características de las páginas web dinámicas son las

siguientes:

• Emplean diferentes lenguajes de programación. La estructura de estas

aplicaciones es más compleja.
• Se administran desde un CMS (content management system). Estos paneles
de administrador posibilitan que cualquiera pueda actualizar las aplicaciones
de forma sencilla, sin tener que depender constantemente de un especialista.
• No requieren entrar a un servidor para modificarlas. Los cambios o
actualizaciones se pueden llevar a cabo en tiempo real desde el panel de
administrador.

Ventajas de las aplicaciones web dinámicas

Las ventajas de las aplicaciones web dinámicas son:

• Se pueden visitar desde cualquier dispositivo conectado a internet y desde

todos los sistemas operativos.
• Cargan muy rápidamente.
• No requieren instalación.
• Su actualización es más sencilla que la de una aplicación web estática.
• Se les pueden añadir funcionalidades como foros o bases de datos .
• La interacción del usuario es más cómoda y sencilla.
• Facilita la recopilación de datos de navegación de los usuarios.
Desarrollo de aplicaciones web dinámicas

Una página web estática presenta información fija que solo se puede cambiar
con la ayuda de un programador. Modificar estas aplicaciones requiere un
esfuerzo considerable, ya que para cambiar algo en ellas el programador tiene
que reconstruir y recargar en el servidor toda la página.

Sin embargo, las aplicaciones web dinámicas son perfectas para las personas o
las empresas que necesitan actualizar constantemente sus aplicaciones
web pero no saben nada de desarrollo ni de lenguajes de programación.

Por tanto, el desarrollo de aplicaciones web dinámicas está especialmente

pensado para que, una vez construidas y terminadas, el dueño de la aplicación
pueda por sí mismo cambiar el diseño, subir contenido nuevo, modificar
la información, etc. Todo ello sin necesidad de tocar el código.
 HTML

HTML (por sus siglas en ingles, HyperText Markup

Language), es un lenguaje de marcado que nos permite
hacer la estructura de una página web. Tenemos que
aclarar que HTML no es un lenguaje de programación,
pues carece de mecanismos para ejecutar cálculos,
repeticiones o condiciones, lo que sí es, es un lenguaje de
marcado.
Es un lenguaje que le indicará al navegador web qué tipo de elemento
es el que está en la estructura de una página web.

Ahora aprenderemos cómo se debe hacer la estructura de un documento

html para que funcione correctamente, se trata de utilizar ciertas etiquetas
que indicarán información al navegador y que este lo interprete sin problemas.
Un documento HTML posee una estructura básica que contiene una
variedad de etiquetas que definen la estructura de la pagina resultante,
dichas etiquetas deben estar adecuadamente estructuradas para que la
pagina funcione sin problemas.

Recordemos que las etiquetas son quienes le dirán al navegador, qué

y cómo será la estructura de una página web.
<!DOCTYPE>
Es la declaración del tipo de documento, aquí definimos el lenguaje
que se va a utilizar, en este caso HTML5. Lenguajes anteriores como
XHTML 1.0 o HTML 4.01 tenían declaraciones de documento mucho
más complejas. El HTML5 es un esfuerzo del consorcio porque el
HTML vuelva a ser un lenguaje sencillo y comprensible por todos.
<html lang =“es”> — Etiqueta simplificada de HTML5 que nos indica
que el idioma del documento “es” de español.
Etiqueta <html>
La etiqueta <html> sirve para indicar que el documento es un
documento HTML y el navegador lo interpretara como tal. Todo el
contenido de nuestra página irá ordenadamente dentro de la etiqueta
<html> y de hecho, es lo primero que debemos escribir en nuestro
documento:
Etiqueta <head>
<head> es la etiqueta en la que ira la cabecera de nuestra página y va
justo después de la etiqueta de apertura <html>, esta etiqueta contiene
elementos que ayudarán a que nuestra página funcione correctamente
y generalmente dentro de esta etiqueta van elementos que no se
visualizan en el navegador.

Etiqueta <title>
La etiqueta <title> va dentro de la etiqueta <head> en la cabecera,
<title> contiene el título de la página y esta se muestra en la pestaña
de los navegadores, más no se ve en el cuerpo de la página.
Que necesitamos para programar con html
1. Para empezar a escribir código HTML necesitamos un editor de
código como puede ser: sublime text, notepad, visual studio
code, CoffeCup Free Editor, entre otros e incluso el famoso
bloc de notas. Para escribir código HTML nos servirá hasta el
editor más básico y sencillo.
2. Por otro lado necesitamos un navegador web que nos servirá
para visualizar el resultado de nuestro código HTML en la
pantalla.
¡Muy bien!

Cuando creamos un documento HTML debemos guardarlo con la

extensión .html o .htm para que el navegador pueda ejecutarlo como tal.

Entonces te toca a ti ahora mismo hacer lo siguiente:

Lista completa de pasos para empezar a

programar en HTML
1. Abrir tu editor de código.
2. Crear un documento y guardarlo con la extensión .html o .htm,
por ejemplo: proyecto.html en minúsculas.
3. Ahora que tienes guardado el documento, ábrelo con tu
navegador web preferido, pero seguro que el navegador te
muestra un documento en blanco, y es que aún no tenemos
contenido, nada de código en nuestro archivo o documento
HTML.
4. Ahora tenemos abierto nuestro documento HTML con el editor,
en este caso bloc de notas, y por otro lado ese mismo
documento lo tenemos abierto con nuestro navegador web.
5. Empezamos a escribir código html en el documento que
acabamos de crear.