Desarrollo de

páginas Web

Escuela de Código
Pilares Topiltzin
Temario
● Atributos.
l. Introducción
● Sección.
● Listas.
● Fundamentos técnicos de una página web.
● Tablas.
● Tecnologías de software para el desarrollo
● Enlaces.
de páginas web.
● Imágenes.
● Cómo funciona el navegador.
● Videos.
● Formularios.
II. Herramientas para la creación de páginas
● Atributos de Input.
web.
● Contenedores.
● Etiqueta Meta.
● Editor de texto.
● Editores de texto en línea.
V. Lenguaje CSS.
III. Estructura básica de un documento HTML
● Selectores
● Seudo Clases y seudo Elementos
● Experiencia de Usuario
● Modelo de Cajas
● Interfaz de usuario
● Estilos de Textos
● Uso de Float
IV. Lenguaje HTML
● Estilos de Tabla
● Estilos de Lista.
● Introducción a HTML.
● Proyecto Tu primer página WEB
 ● Fundamentos técnicos de una
página web.

I. ● Tecnologías de software para el

desarrollo de páginas web.
Introducción
● Cómo funciona el navegador.
¿Qué es una página Web?

Se conoce como página Web, página electrónica o página digital a un documento digital de
carácter multimediático (es decir, capaz de incluir audio, video, texto y sus combinaciones),
adaptado a los estándares de la World Wide Web (WWW) y a la que se puede acceder a
través de un navegador Web y una conexión activa a Internet. Se trata del formato básico
de contenidos en la red.

Las páginas Web se encuentran programadas en un formato HTML o XHTML, y se

caracterizan por su relación entre unas y otras a través de hipervínculos: enlaces hacia
contenidos diversos que permiten una lectura compleja, simultánea y diversa, muy distinta
a la que podemos hallar en los libros y revistas.
 World Wide Web
En informática, la World Wide Web (La Web) o red informática mundial es un sistema que funciona a
través de Internet, por el cual se pueden transmitir diversos tipos de datos a través del Protocolo de
Transferencia de Hipertextos o HTTP, que son los enlaces de la página web.
Origen
La World Wide Web (la
Web) nació en el CERN, el
Centro Europeo de Física
Nuclear, en Ginebra (Suiza),
de la mano del ingeniero y
físico británico Tim
Berners-Lee como un
sistema de intercambio de
datos entre los 10.000
científicos que trabajaban en
la institución. Berners-Lee
creó el sitio el 20 de
diciembre de 1990, pero
entonces solo era accesible
desde el CERN.
¿Cómo era la primer página Web?

https://worldwideweb.cern.ch/browser/
Desarrollar Páginas Web

Las páginas web son el ejemplo más conocido de hipertexto e

hipermedia pero existen otros sistemas que también se basan
en estos dos conceptos.

● 1.1 Fundamentos Técnicos de una

página Web
Hipertexto
Es conjunto estructurado de textos, gráficos etcétera, unidos entre sí por enlaces y conexiones
lógicas. Un texto normal como por ejemplo, un libro, normalmente está limitado a una organización
lineal o secuencial. Sin embargo, el hipertexto permite saltar de un punto a otro, en un mismo texto, o
a otro texto a través de referencias.

De este modo, en lugar de leer el texto de forma continua, en el hipertexto ciertos términos están
relacionados y el texto se puede leer siguiendo diferentes caminos. Las relaciones en el hipertexto se
establecen entre lo que se suele llamar como referencias, enlaces, vínculos o hipervínculos.
Hipermedia
Multimedia: un sistema multimedia es un sistema de
comunicación en el que se emplean dos o más medios de
comunicación distintos de forma concurrente. Un sistema
multimedia puede integrar texto, voz, audio, fotografías, gráficos
interactivos, vídeos, realidad virtual y otros.

Por lo tanto. Podemos definir Hipermedia como:

Un conjunto estructurado de diversos medios como textos,
gráficos, imágenes y sonidos unidos entre sí por enlaces y
conexiones lógicas para la transmisión de información.

Si la multimedia proporciona una gran riqueza a la información,

el hipertexto aporta una estructura que permite que la
información pueda presentarse y explorarse siguiendo distintas
secuencias de acuerdo a las necesidades y preferencias del
usuario. Existen muchos sistemas que se basan en el hipertexto y
la hipermedia pero, la web es el sistema más conocido y por eso
la web se ha convertido en sinónimo de hipertexto e hipermedia.
Lenguajes de Etiquetas
Los lenguajes de etiquetas, también conocidos como lenguajes de marcado o de marcas,
son los que nos permiten estructurar un documento mediante el uso de etiquetas. Los
lenguajes de etiquetas no se identifican con los de programación; esto ocurre
principalmente porque los lenguajes de etiquetas no definen algunos aspectos básicos
presentes en los lenguajes de programación, como es el caso de funciones aritméticas
o el uso de variables, por citar algunos ejemplos.

Cuando queremos crear o dar formato a una página web, se nos presentan múltiples
herramientas, pero todas tienen algo en común: el lenguaje de marcas.
Características
● Uso del texto plano: Al ser un ● Facilidad de procesamiento:
texto plano cualquier persona Permite el desarrollo de lenguajes
puede leer y editar esa información. especializadas según el tipo de
Los caracteres pueden codificarse documento que necesitemos
en distintas codificaciones (UTF-8, procesar.
ASCII,…)
● Flexibilidad: Posibilidad de
● Es un Lenguaje compacto: Las combinación con otros lenguajes
etiquetas de marcas se mezclan
con el contenido del mismo.

● Independencia del dispositivo: Al

ser independiente del dispositivo
nos permite mostrar el contenido.
El lenguaje de marcas más
conocido y extendido es el HTML
(“HyperText Markup Language”,
“Lenguaje de Marcado de
Hipertexto”) y es el mismo que Tim
Berners-Lee a inicios de 1990 creó
como un subconjunto de SGML
(Standard Generalized Markup
Language, otro lenguaje de
marcado).
HTML es el lenguaje de etiquetas
que funciona como una de las
piedras angulares de la World Wide
Web, llamado también como la
Web, que no es más que un
conjunto de documentos de
hipertexto y/o hipermedios (páginas
web) enlazados entre sí y
accesibles desde internet.
Versiones
HTML ha tenido muchas actualizaciones a lo largo del tiempo, y la última versión de HTML es HTML5. En HTML5 se
destacan sus características semánticas, las posibilidades multimedia que incorpora, las nuevas funciones para
formulario y las características que se definen para poder integrarse con tecnologías que permitirán abrir una nueva etapa
en Internet, en lo que se refiere a la arquitectura de las aplicaciones.
 Beneficios de HTML
1. Incorporación de video. 3. Un código más limpio. 5. Optimización para móviles.

HTML5 proporciona un estándar para Para los desarrolladores Web, tratar de hacer Actualmente, sabemos que los teléfonos
mostrar videos, haciendo que su cambios, en un código desordenado, puede celulares y tabletas, no pueden ser ignorados.
incorporación sea sencilla y popular. tornarse en una situación de terror. Sin Por esta razón, HTML5 es aún más increíble,
embargo, HTML5 ha sido creado para ofrecer ya que está optimizado para desarrollar sitios
2. Experiencia de usuario. un código más limpio, que soluciona el tan y aplicaciones móviles. Esto significa que, con
aquejado problema de tener que hacer HTML5, podrás llevar a cabo proyectos
Gracias a que HTML5 ofrece una gran modificaciones en un sitio Web. responsivos y funcionales para todo tipo de
variedad de herramientas, se pueden dispositivos.
diseñar y presentar sitios y aplicaciones 4. Compatibilidad múltiple entre
Web que superen las expectativas de los navegadores. 6. Una mejor posibilidad de ranking.
usuarios.
Los diseñadores Web pueden estar tranquilos HTML5 ofrece un código optimizado para ser
de que, los sitios o sistemas que desarrollen, leído por los motores de búsqueda con mayor
serán compatibles en todos los navegadores. facilidad. Debido a esto, el contenido de un
sitio Web desarrollado con HTML5, podrá ser
comprendido para, consecuentemente,
obtener un mejor ranking en las búsquedas.
1.2 Tecnologías de software para
el desarrollo de páginas web
CSS
Las hojas de estilo en cascada, tal es su traducción del inglés Cascading Style
Sheets (CSS), tienen como función establecer reglas de representación de un
documento en un medio o dispositivo.

Mediante estas reglas podremos establecer medidas, colores o cualquier otra

característica de representación de una página web, para que se vea reflejada
en una pantalla de monitor, de un dispositivo móvil, una tablet, una impresora,
un dispositivo braille o un televisor.

La función principal de CSS es, por lo tanto, la de permitir separar el contenido y

la estructura que se define en un documento HTML, de la representación, que
queda a cargo de las hojas de estilos.
Con CSS Sin CSS
JavaScript
JavaScript es un lenguaje multiparadigma que requiere de un
intérprete para ser ejecutado, permite la creación de páginas
dinámicas, con código que puede ejecutarse desde el lado
cliente, alivianando la tarea del servidor y disminuyendo la
cantidad de peticiones que se le hagan.

Por sus características, resulta útil para validación de

formularios, mostrar y aplicar efectos, y exhibir avisos en
pantalla.
Ajax

JavaScript Asíncrono + XML (AJAX) no es una tecnología por sí misma, es un término que
describe un nuevo modo de utilizar conjuntamente varias tecnologías existentes. Esto
incluye: HTML o XHTML, CSS, JavaScript, DOM, XML, XSLT, y lo más importante, el objeto
XMLHttpRequest.

Cuando estas tecnologías se combinan en un modelo AJAX, es posible lograr aplicaciones

web capaces de actualizarse continuamente sin tener que volver a cargar la página
completa. Esto crea aplicaciones más rápidas y con mejor respuesta a las acciones del
usuario.
1.3 Funcionamiento del navegador
 ¿Cómo funciona un navegador Web?
Un navegador web te lleva a cualquier lugar de Internet. Recupera información de otras partes
de la web y la muestra en tu escritorio o dispositivo móvil.

La información se transfiere mediante el Protocolo de Transferencia de Hipertexto (HTTP), que

define cómo se transmiten el texto, las imágenes y el video en la web. Esta información debe
compartirse y mostrarse en un formato consistente para que las personas que utilizan cualquier
navegador, en cualquier parte del mundo, puedan ver la información.
Estándar Web

Lamentablemente, no todos los

fabricantes de navegadores eligen
interpretar el formato de la misma manera.
Para los usuarios, esto significa que un
sitio web puede funcionar y verse
diferente. Crear una experiencia
consistente entre navegadores, para que
los usuarios puedan disfrutar de internet,
sin importar el navegador que elijan, se
llama estándares web.
Navegador Web

Cuando el navegador web obtiene datos de un servidor conectado a Internet,

utiliza un software llamado motor de renderizado para traducir esos datos en
texto e imágenes.

Estos datos están escritos en "lenguaje de marcas de hipertexto" (HTML) y los

navegadores web leen este código para construir lo que vemos, escuchamos y
experimentamos en Internet.
Motor de Renderizado

La función principal de un motor de navegación es

transformar los documentos HTML y otros recursos de una
página web en una representación visual interactiva en el
dispositivo del usuario (esta función se denomina
renderización).
Motor de Renderizado
Hipervínculos
Los hipervínculos permiten a los usuarios seguir una ruta a otras páginas o sitios en la web. Cada página
web, imagen y video tiene su propio Localizador Uniforme de Recursos (URL), que también se conoce
como dirección web. Cuando un navegador visita un servidor en busca de datos, la dirección web le dice
al navegador dónde buscar cada elemento que se describe en el html, que luego le dice al navegador
dónde situarlo en la página web.

Un hipervínculo, es una conexión directa entre dos espacios virtuales en el mundo digital. Es la forma
más rápida que existe en internet de llegar de un punto a otro, con este viajamos a la velocidad de 1 clic.
II.
Herramientas ● Editor de texto.
● Editores de texto en línea.
para la creación
de páginas web
Editor de textos

Un editor de texto es un programa informático que permite

crear, abrir, ver y modificar el contenido de un documento.

Los editores de texto se proporcionan con los sistemas

operativos y paquetes de desarrollo de programación.
Características
● Cortar, copiar y pegar

● Dar formato a un texto

● Buscar y reemplazar

● Deshacer y Rehacer
¿Para qué sirven?
Los programadores de software, los desarrolladores web y de aplicaciones
utilizan editores de texto para leer, escribir y editar el código fuente de muchos
lenguajes de programación y marcado.

El uso del editor de texto para el código fuente es el propósito principal de los
editores de texto y hay muchas otras características del software de edición de
texto creadas para ayudar a estos usuarios a leer y escribir código. Como vamos
a aprender el lenguaje HTML también necesitamos un editor de texto.
Ejemplos

● Notepad++
● Sublime Text
● Atom
● Ultraedit
● Vim
● CoffeeCup
● Komodo Edit
● TextMate
● Visual Studio Code
● BBEdit
Editor de textos en línea
Un editor de texto en línea son editores de textos pero al cual puedes acceder desde cualquier
navegador web.

Algunos de estos editores de textos te permiten crear cuentas personales de tal manera que no
necesitas guardar en el ordenador en el que trabajas ningún documento, todo se guarda en tu
cuenta personal y puedes tener accesos en cualquier momento a tu proyecto o trabajo desde
cualquier ordenador y desde cualquier lugar donde esté.

Una de las grandes ventajas que tiene con respecto a los editores de texto que instalas en el
ordenador es que de alguna manera puedes hacer a un lado las restricciones de hardware o
software del ordenador para editar, modificar, crear algún archivo o documento.
Ejemplos

1. JSFiddle
2. CodeSandbox
3. CodeAnywhere
4. StackBlitz
5. AWS Cloud9
6. Gitpod
7. Theia
8. GitHub Codespaces
9. JetBrains
10. CodeTasty
11. Replit
12. PaizaCloud
HTML Imágenes
HTML Audio
HTML Video
Estructura en Carpetas
Actividad

Con apoyo de Bloc de Notas

● Crear página web con HTML

● Título
● Párrafos
● Imagen
● Contenido relacionado a un tema en particular