Introducción a las Páginas Web
¡Bienvenidos al mundo del desarrollo de páginas web! Aquí descubrirás cómo convertir ideas en realidad digital, creando sitios que no solo son visualmente atractivos, sino también funcionales y accesibles para todos. Comenzaremos explorando los fundamentos del diseño y la programación web, aprendiendo a usar herramientas y lenguajes como HTML, CSS y JavaScript.
Prepárate para desatar tu creatividad mientras construimos desde lo más básico hasta proyectos más complejos, paso a paso, de manera clara y amigable. ¡Vamos a empezar!
HTML y Su Evolución
Antes de empezar el desarrollo, conozcamos un poco sobre el origen del lenguaje que abrió un mundo de tecnologias sorprendentes en la web, hablamos del HTML.
HTML en español se traduce como Lenguaje Marcado de Texto, es decir, un lenguaje con marcas que va a permitir estructurar y organizar el texto para que este sea legible. Además, permite, por medio de las etiquetas, establecer ciertas relaciones, hipervínculos y otras modificaciones.
Su origen se remonta a 1980, cuando el físico Tim Berners-Lee, trabajador del CERN (Organización Europea para la Investigación Nuclear) propuso un nuevo sistema de "hipertexto" para compartir documentos.
 |
| Tim Berners Lee, creador de HTML. |
En 1991, se publicó el primer documento documento con la descripción de HTML bajo el nombre Etiquetas HTML (Etiquetas HTML).
En 1995, publicó el estándar HTML2.0. A pesar de su nombre, HTML 2.0 es el primer estándar oficial de HTML.
En 1996, los estándares de W3C (World Wide Web Consortium). Incorporan los últimos avances de las páginas web desarrolladas como applets de Java y texto que fluye alrededor de las imágenes.
En 1997, se publicó la versión HTML 3.2 y es la primera recomendación de HTML publicada por el W3C.
En 1998, se publicó HTML4.0. Sus novedades: hojas de estilos CSS, la posibilidad de incluir pequeños programas o scripts en las páginas web, mejoras de la accesibilidad de las páginas, tablas y mejoras en los formularios.
En 1999, se publicó la última especificación oficial de HTML y se denominó HTML 4.01. Se trata de una actualización y actualización de la versión HTML 4.0.
2000, 26 de enero, se publicó La primera versión de XHTML se denomina XHTML 1.0 (y posteriormente se revisó el 1 de Agosto de 2002). XHTML 1.0 es una adaptación de HTML 4.01 al lenguaje XML.
2004, el W3C se centró en el desarrollo del estándar XHTML. Por este motivo, las empresas Apple, Mozilla y Opera mostraron su preocupación por la falta de interés del W3C en HTML y decidieron organizarse en una nueva asociación llamada WHATWG (Web Hypertext ApplicationTechnology Working Group).
2007, en marzo, el W3C decidió retomar la actividad estandarizadora de HTML.
2008, 22 de enero, la actividad actual del WHATWG se centra en el futuro estándar HTML 5, y en cuya fecha se publicó el primer borrador oficial.
 |
| HTML, CSS y Javascript. Se han vuelto pilares fundamentales para el desarrollo web. |
Diferencias entre HTML, XHTML y HTML5.
Desde su origen, HTML es el estándar original para estructurar y presentar contenido en la web. Es bastante flexible y permisivo. Por ejemplo, no es necesario cerrar todas las etiquetas (como <img> o <br>), y es posible escribir etiquetas en mayúsculas o minúsculas.
El formato es un documento de texto que utiliza etiquetas para definir la estructura del contenido. No requiere validación estricta. Los navegadores suelen interpretar incluso documentos HTML mal formados.
XHTML
Fue introducido en 2000 como una versión más estricta y estructurada de HTML basada en XML (Extensible Markup Language). Todas las etiquetas deben estar cerradas y las etiquetas deben estar en minúsculas.
Los documentos XHTML deben ser validados rigurosamente según las reglas de XML. Un documento mal formado no será procesado correctamente por los navegadores.
HTML5
Es la evolución de HTML y XHTML, introducido oficialmente en 2014. Es una respuesta a las necesidades de la web moderna. Permite una sintaxis flexible como HTML, pero también admite una sintaxis más estricta como XHTML. Las etiquetas pueden ser escritas en minúsculas o mayúsculas, y algunas etiquetas de auto-cierre son opcionales.
Es un formato de texto que incluye nuevas API y capacidades semánticas mejoradas. Aunque es más permisivo, HTML5 promueve prácticas de codificación más rigurosas. Los navegadores modernos manejan HTML5 de manera robusta incluso si no está perfectamente formateado.
HTML5 introduce nuevas etiquetas semánticas (como <article>, <section>, <nav>), soporte para multimedia (como <video> y <audio>), y API para interacción dinámica (como Canvas, Web Storage, etc.). Es compatible hacia atrás con versiones anteriores de HTML, pero también introduce muchas nuevas capacidades para aplicaciones web modernas.
Una vez conocidas las diferencias sobre su historia, ya podemos empezar.
DESARROLLO DE PAGINAS WEB: HERRAMIENTAS.
Para escribir la base de un sitio web debemos encontrar un editor de texto cuyas funciones adicionales son la comprobación de errores, una interfaz intuitiva y herramientas adicionales para optimizar el proceso de desarrollo web.
Entre los editores más populares para el HTML tenemos: Atom, Notepad++, Adobe Dreamweaber, Sublime Text y Visual Studio Code. El desarrollo de paginas para esta asignatura lo realizaremos en Sublime Text.
En este enlace tienes una guía para su instalación y extensiones recomendadas:
DESARROLLO DE PAGINAS WEB: Creación de documentos con Sublime Text.
Una vez instalado Sublime Text junto con su plugin de autocompletado Emmet, la creación de los documentos base para tu pagina web debe ser organizada. Previamente deberás crear una carpeta para guardar los siguientes archivos en la imagen:
- Una carpeta para guardar código de estilos CSS para adornar la pagina, este tema se explorará más adelante.
- Una carpeta para guardar código JavaScript, lenguaje de programación que dará interactividad a la pagina (y se explorara más adelante).
- Una carpeta de imágenes para adjuntar a la pagina por medio de código HTML.
Y por ultimo y más importante, nuestro documento HTML, el cual se recomienda nombrar la primera pagina del proyecto como index.html. Se recomienda que los nombres de todos los archivos sean en minúsculas.
Estructura de una página web.
Una página web posee esta estructura básica.
Cabecera o header.
- Cuerpo o body.
- Pie de página o footer.
Cabecera o header.
Es la parte superior de la página web. Aquí suele incluirse la información básica de la empresa o marca y es consistente en todo el sitio, es decir, se repite en cada página de la web por la que navegas.
Cuerpo o body.
Esta es la parte de la web que alberga el contenido principal de tu página. Esta parte sí es diferente en cada página de tu sitio.
Pie de página o footer.
El pie de página o footer es la parte inferior de una página web. Al igual que la cabecera, se repite y es consistente en cada página.
En Codigo HTML, se expresa como la siguiente imagen, aqui tenemos un ejemplo basico en la creacion de una pagina web.
 |
| Nuestro primeros pasos en HTML, normalmente inicia sin formato ni espacios entre párrafos. Conforme exploremos las etiquetas, crearemos paginas mas detalladas. |
EXPLORANDO EL DOCUMENTO.
En el documento podemos notar otras etiquetas que son fundamentales:
<HTML>…</HTML> Engloba toda la página web, que consta de cabecera y cuerpo.
<HEAD>…</HEAD> Engloba la cabecera de la página, contiene un conjunto de informaciones que no se muestran en la ventana, pero pueden ayudar a los navegadores a interpretar o a encontrar correctamente la página.
<TITLE>…</TITLE> En su contenido se muestra en la barra del título de la ventana del navegador.
<META> Metadatos donde la cabecera admite propiedades especiales para el documento.
<BODY>…</BODY> Delimita y engloba el cuerpo de la página, que son el conjunto de informaciones (texto e imágenes) que se muestran en la página, así como las indicaciones de cómo deben mostrarse.
EXPLOREMOS LAS ETIQUETAS HTML.
Etiquetas de Texto: Encabezados
El texto de la página se puede estructurar en encabezados por distintos apartados de la página, que pueden tener los niveles de 1 a 6 (siendo 1 el más importante) y párrafos normales. Etiqueta: <h1>...</h1>
Etiquetas de texto: Parrafos.
<P>...</P> <P align="center">...</P>
Posee el atributo align permite alinear el texto del párrafo. Se puede aplicar igual a las etiquetas <H1>, <H2>, etc ...
<BR> Permite partir un párrafo empezando una línea nueva pero sin dejar espacio.
<HR> Pone una linea horizontal de separación. (admite atributos)
Usando las etiquetas <p>
Etiquetas de Texto: Formato.
El formato de caracteres permite cambiar tanto el tipo de fuente como su tamaño y aspecto. Se pueden utilizar varias etiquetas HTML para dar distintos formatos a un grupo de caracteres:
Negrita: <B>…</B>
Cursiva: <I>…</I>
Subrayado: <U>…</U>
Teletipo: <TT>…</TT>
Tachado: <STRIKE>...</STRIKE>
Etiqueta de Enlaces.
<a>...</a> Sirven para acceder desde una página a otra página o a otro recurso disponible.
Ejemplo: Si escribimos <a href="pagina2.html">Pagina 2</a> en el documento, nos aparecerá respectivamente en el documento.
Deberás crear el documento 'pagina2.html' para que el enlace funcione, asegúrate de que ambos documentos estén en la misma ubicación.
Propiedad target de <a>.
Este atributo especifica como abrir el siguiente documento del enlace.
<a target="_blank|_self">
- _blank abre el enlace en una ventana o pestaña nueva.
- _self abre el enlace en la misma pestaña donde se le ha hecho click (modo marcado por defecto).
Listas.
Puedes agrupar objetos y párrafos a través de estas etiquetas.
<OL> ... </OL> - Lista numerada.
<LI> ... </LI> - Elementos de la lista.
Imagenes.
Muestra una imagen, que normalmente es de tipo GIF, JPG o PNG Admite atributos width y height para ajustar el tamaño. Asegúrate de que la ruta del archivo sea el correcto, el nombre también es importante.
<img src="ArchivoImagen.png">
 |
| (De arriba a abajo)Vista en HTML y visto en el navegador. |
Video y Sonido.
Adjunta archivos de video y audio a tu pagina con:
<video> Admite los atributos width y height para ajustar el tamaño, tal como las imágenes.
<audio> Adjunta un archivo de sonido para reproducir.
<source> Nos facilita especificar la ruta del archivo y su formato.
Video y audio poseen los siguientes atributos: controls nos permite reproducir y pausar el video. autoplay inicia la reproducción del archivo una vez cargada la pagina.
 |
| Utilizando video y sonido. |
Tablas.
Una tabla permite buscar con rapidez y facilidad valores entre diferentes tipos de datos que indiquen algún tipo de conexión. Aquí están las etiquetas de formato basico:
<table> Inicializa el formato de tabla.
<tr> Representa un renglón de la tabla.
<th>Representa una celda de encabezado con formato de negritas y texto centrado.
<tr> Representa una celda normal sin formato. Puede soportar los archivos de imagenes, listas, enlaces otras tablas, etc.
Las etiquetas <th> y <td> poseen los atributos colspan y rowspan para combinar un determinado numero de celdas y mejorar el formato de la tabla.
La tabla dibujada en el navegador, se añadieron estilos para que los bordes sean visibles ya que el formato no se ve por si solo.
Formularios
Un formulario en HTML es usado para recoger informacion de un usuario, y posteriormente enviarlo para procesar esos datos. Las etiquetas:
Similar a las tablas, <form> es un contenedor para diferentes tipos de entrada de datos, como texto, checkbox, botones, etc.Esta etiqueta se complementa con algunas de las siguientes:
<input> Despliega una línea de entrada de texto, tiene diferentes tipos.
<label> Es el texto que lees antes de responder o completar un formulario, se asocia con input.
<button> Un botón normal para hacer click.
<select> Despliega una lista de opciones a elegir.
<textarea> Para introducir texto en multilínea.
<fieldset> Contenedor decorativo para agrupar una sección formulario.
<legend> Sirve como encabezado para el fieldset.
Nos ayudan a poner mas detalle a los ya que el contenedor <form> no se ve por si solo, tal como sucede con las tablas.
Esta etiqueta tiene un rol importante para las aplicaciones web por medio de las siguientes propiedades que veremos a continuacion.
 |
| Vista del formulario en el navegador. |
PROPIEDADES ACTION Y METHOD DE <FORM>
Estas propiedades le permiten al formulario procesar los datos introducidos:
- El atributo action define la ubicación (URL) donde se envían los datos del formulario.
- El atributo method define con qué método HTTP se envían los datos (generalmente get o post).
Sobre los valores get y post:
GET:
- Agrega los datos del formulario en la URL.
- El tamaño de una URL es limitado (3000 caracteres).
- Nunca lo uses para enviar datos sensibles como una contraseña (se verá en la URL).
- Es útil para un usuario que quiere guardar un resultado como favorito.
- Es recomendado usarlo en datos que no son sensibles, por ejemplo una búsqueda en Google.
En las siguientes imagenes, hemos creado un archivo en blanco llamado 'submit-form.html' donde enviaremos los datos, con el formulario de ejemplo.
- Envía los datos del formulario dentro del cuerpo de la solicitud HTTP (estos datos no se muestran en la URL)
- No tiene limite de caracteres.
- Los envíos de formulario con POST no pueden ser marcados como favorito.
Post es un valor importante dentro de los formularios, por lo que su uso requiere de conocimientos adicionales como la programación en el lado del servidor y bases de datos. Muy pronto se verán temas que trataran más a fondo el uso de los formularios.
Hasta aquí hemos finalizado la Unidad 1 ¡Felicidades!