TICS 4to SEMESTRE - Submódulo 1. - Páginas Web

CUA DERN ILLO DE
S U B M O D U L O 1 . - PÁ G I N A S W E B
IV
S EMESTRE
Directorio
Dr. Rafael Romero Mayo
Director General
Mtra. Yolanda Loría Marín

Directora Académica
Lic. Mario Velázquez George

Subdirector Académico
Mtra. Cindy Jazmín Cuellar Ortiz

Jefa del Departamento de Docencia y Apoyo Académico
Revisión y aprobación:
M. T. I. José Miguel Quiñones Gurubel
Jefe de Materia del Área de Informática
Elaboraron:
M. E. Asunción Tzec Pat

Docente de Informática del Plantel Nicolas Bravo
Lic. Miguel Fernando Magaña Galan

Docente de Informática del Plantel Isla Mujeres
Mtro. Manuel Alejandro Mex Mena

Docente de Informática del Plantel Cancún Dos
Mtro. Adrián Gamael Trejo Uco

Docente de Informática del Plantel Chetumal Dos
Lic. Jonathan Ricardo Rojas Arreola
Docente de Informática del Plantel Puerto Morelos
Derechos reservados
© Colegio de Bachilleres del Estado de Quintana Roo 2021.
Avenida Héroes #310 entre Justo Sierra y Bugambilias
Col. Adolfo López Mateos
Chetumal, C.P. 77010, Othón P. Blanco, Quintana Roo.
2
PRESENTACIÓN
Estimada y estimado estudiante:
Me es grato darte la bienvenida al nuevo semestre que estás por iniciar. En la Dirección General
del Colegio de Bachilleres de Quintana Roo, somos conscientes de las circunstancias que te
rodean y que han afectado al mundo desde hace más de año y medio; por ello, el cuadernillo
que ahora posees, es producto de un esfuerzo y trabajo conjuntos entre los docentes y los
responsables de las áreas académicas de nuestras oficinas centrales.
Si bien es cierto la pandemia continúa, ello no representa un impedimento para no

cumplir con nuestra labor educativa, razón esencial de nuestra gran institución. Por ello, hoy
más que nunca, la labor académica es vital para alcanzar nuestro principal objetivo: tu
formación escolar que contribuya a consolidar tu proyecto de vida.
El contenido de este Material didáctico del estudiante, te permitirá continuar con tu

proceso de enseñanza-aprendizaje desde casa. Por supuesto, estarás respaldado por la asesoría
y seguimiento de cada uno de tus docentes y autoridades educativas.
Cada una de las personas que laboramos en el Colegio de Bachilleres del Estado de
Quintana Roo ponemos lo mejor de nosotros para seguir caminando juntos, aun en la
pandemia, generando resiliencia y fortaleciendo las competencias académicas y
socioemocionales que nos permitan salir adelante.
Te invito a no bajar la guardia en lo académico y en el cuidado de tu salud. Trabaja

intensamente, con compromiso y con responsabilidad; sé responsable y perseverante, ello te
llevará al éxito y a cumplir tus metas. Te deseo lo mejor para este semestre que inicia.
Dr. Rafael Romero Mayo

Director General
3
ÍNDICE
PRESENTACIÓN .................................................................................................................................................3
INTRODUCCIÓN ................................................................................................................................................5
Submódulo I. Páginas web. ................................................................................................................................6
Parcial 1 ...................................................................................................................................................................8
Actividad 1 .........................................................................................................................................................8
Actividad 2 ...................................................................................................................................................... 14
Actividad 3 ...................................................................................................................................................... 20
Parcial 2 ................................................................................................................................................................ 27
Actividad 4 ...................................................................................................................................................... 27
Actividad 5 ...................................................................................................................................................... 36
Actividad 6 ...................................................................................................................................................... 42
Actividad 7 ...................................................................................................................................................... 47
Parcial 3 ................................................................................................................................................................ 51
Actividad 8 ...................................................................................................................................................... 51
Actividad 9 ...................................................................................................................................................... 64
BIBLIOGRAFÍA................................................................................................................................................. 65
4
INTRODUCCIÓN
La capacitación para el trabajo: Tecnologías de la Información y Comunicación se encuentra

centrada en el campo disciplinar de Comunicación, tiene la finalidad de desarrollar en el
estudiantado las habilidades de comunicación verbales y no verbales para expresarse a través
de diversos códigos y herramientas del lenguaje mediante la aplicación de las diferentes
tecnologías. Por otra parte, la informática se vincula de manera interdisciplinar con el campo
de Matemáticas y Comunicación, ya que aportan los elementos para la resolución de problemas
trabajando en forma colaborativa en ambientes virtuales.
Aunado a lo anterior, la capacitación tiene como propósito: desarrollar las competencias y

habilidades prácticas que permitan al estudiantado proponer soluciones a problemas de
contexto escolar y laboral, mediante la aplicación de las Tecnologías de la Información y
Comunicación, de forma creativa e innovadora con una postura ética y responsable como
ciudadano digital.
La enseñanza de la capacitación Tecnologías de la Información y Comunicación en la formación

para el trabajo de los jóvenes, basada en las Normas Técnicas de Competencia Laboral (NTCL)
del Consejo de Normalización y Certificación de Competencias Laborales (CONOCER) se
convierte en una necesidad de primer orden para cumplir con las exigencias de los sectores
productivos, de contar con personal calificado que permita desarrollar las potencialidades de
sus organizaciones al promover productos y servicios tanto en el mercado nacional como en el
internacional, además de proporcionar las herramientas técnicas básicas a los jóvenes
egresados del nivel medio superior, que les permitirán vencer las fronteras e internarse en el
mundo global a través de las Tecnologías de la Información y Comunicación (TIC), además de
la utilización de las Tecnologías del Aprendizaje y del Conocimiento (TAC).
El presente cuadernillo de actividades de la asignatura de “Submódulo 1.- Páginas Web.” se

elaboró como una herramienta valiosa para los alumnos que no tienen conectividad o acceso a
un entorno de educación en línea, y servirá de apoyo para que realicen sus actividades
académicas. Su contenido y estructura, incentivara a que se desempeñen de forma eficiente,
con una visión competente e innovadora.
Esta modalidad de aprendizaje es autónoma por lo que te recomendamos dedicar un horario

determinado de, localiza un espacio que te permita estar cómodo y evita las distracciones, de
igual forma, revisa las instrucciones las actividades para completarlas con éxito.
Como recomendación final, te pedimos que en la medida de tus posibilidades te mantengas

comunicado con tu maestro o maestra para establecer las fechas y mecanismos de entrega,
criterios de evaluación, estamos para apoyarte y acompañarte en tu educación.
5
Submódulo I. Páginas web.
Evaluación diagnóstica
Responde las siguientes preguntas sobre el tema de “Páginas Web” que se presentan.
1. Es un documento o información electrónica capaz de contener texto, sonido, vídeo,

programas, enlaces, imágenes, hipervínculos y muchas otras cosas, adaptada para la
llamada World Wide Web, y que puede ser accedida mediante un navegador web
a) Protocolo
b) Página web
c) URL
d) HTML
2. Es un lenguaje de marcado que se utiliza para el desarrollo de páginas de Internet
a) Protocolo
b) Página web
c) URL
d) HTML
3. Normativas y los criterios que fijan cómo deben comunicarse los diversos componentes
de un cierto sistema de interconexión. Esto quiere decir que, a través de este protocolo,
los dispositivos que se conectan en red pueden intercambiar datos.
a) Protocolo
b) Página web
c) URL
d) HTML
4. Es una colección de páginas web relacionadas y comunes a un dominio de internet o

subdominio en la World Wide Web dentro de Internet.
a) Protocolo
b) Página web
c) URL
d) Sitio web
5. Es una computadora de gran potencia que se encarga de “prestar el servicio” de

transmitir la información pedida por sus clientes (otros equipos, dispositivos móviles,
impresoras, personas, etc.)
a) Servidor web
b) Página web
c) Portal web
d) Sitio web
6. Es un nombre fácil de recordar asociado a una dirección IP física de Internet. Se trata del
nombre único que se muestra después del signo @ en las direcciones de correo y
después de www. en las direcciones web.
a) Hosting
b) Página web
c) URL
d) Dominio
7. Es la dirección específica que se asigna a cada uno de los recursos disponibles en la red
con la finalidad de que estos puedan ser localizados o identificados.
a) Hosting
b) Página web
c) URL
d) Dominio
6
8. Es un servicio de alojamiento en línea que te permite publicar un sitio o aplicación web
en Internet.
a) Hosting
b) Aplets
c) URL
d) Dominio
9. Es una aplicación diseñada con el fin de facilitar la creación y edición de documentos

HTML o XHTML.
a) Aplets
b) Editor web
c) Maquetación
d) Dominio
10. Es un componente de una aplicación que se ejecuta en el contexto de otro programa, por
ejemplo, en un navegador web.
a) Aplets
b) Editor web
c) Maquetación
d) Dominio
11. Es el proceso en el que el prototipo gráfico también denominado «layout» (con los
requisitos estructurales y estéticos definidos y aprobados en un análisis inicial) pasa a
transformase en código html, css y js (estándares web) para que los navegadores puedan
interpretarlo correctamente.
a) Aplets
b) Editor web
c) Maquetación
d) Dominio
12. Es un lenguaje que define la apariencia de un documento escrito en un lenguaje de

marcado (por ejemplo, HTML).
a) Aplets
b) CSS
c) HTML
d) Hosting
13. es un software, aplicación o programa que permite el acceso a la Web, interpretando la

información de distintos tipos de archivos y sitios web para que estos puedan ser vistos.
a) Navegador
b) Buscador
c) Editor web
d) Dirección IP
14. Protocolo de comunicación que permite las transferencias de información a través de

archivos en la World Wide Web
a) FTP
b) HTTP
c) URL
d) HTML
7
Parcial 1
Actividad 1
➢ Aprendizaje Esperado: Construye una página web, utilizando elementos del software de diseño
web, favoreciendo su creatividad e innovación, para comunicar información en distintos contextos.
➢ Atributo (s): 4.5 Maneja las tecnologías de información y la comunicación para obtener información
y expresar ideas/ 5.6 utiliza las tecnologías de información y la comunicación para procesar e
interpretar información.
➢ Conocimiento (s): Páginas web y sitio/Conceptos básicos (dominio, URL, hosting, applets).
Lectura previa
Introducción al diseño web
¿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.
En Internet existen más de mil millones de páginas Web de diversa índole y diverso contenido,
provenientes del mundo entero y en los principales idiomas hablados. Esto representa el
principal archivo de información de la humanidad que existe actualmente, almacenado a lo
largo de miles de servidores a lo largo del planeta, a los que es posible acceder velozmente
gracias a un sistema de protocolos de comunicación (HTTP).
En muchos casos, el acceso a una página Web o a sus contenidos puntuales puede estar
sometido a prohibiciones, pagos comerciales u otro tipo de métodos de identificación (como el
registro on-line).
El contenido de esta inmensa biblioteca virtual no está del todo supervisado, además, y su
regulación representa un reto y un debate para las instituciones tradicionales de la humanidad,
como la familia, la escuela o incluso las leyes de los países.
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.
8
Por último, no es lo mismo hablar de página Web (Webpage) y de sitio Web (Website), ya que
estos últimos contienen un número variable de las primeras.
¿Para qué sirve una página Web?
Las páginas Web también permiten la interacción con el usuario.
Las páginas Web cumplen básicamente con la tarea de brindar información de cualquier índole
y en cualquier estilo o grado de formalidad.
Algunas, al mismo tiempo, permiten distintos grados de interacción entre usuarios o con
alguna institución, como son las páginas de foros, servicios de citas o redes sociales, las páginas
de compra y venta de bienes, las páginas de consulta o de contacto con empresas,
instituciones gubernamentales o con ONGs, e incluso las páginas de soporte técnico
especializado.
En principio, las funciones de una página Web son tan amplias como la demanda de los
usuarios y la oferta de sus creadores.
Tipos de página Web
Existen dos tipos de página Web, conforme al modo en que se genera su contenido:
Páginas Web estáticas. Operan mediante la descarga de un fichero programado en código

HTML, en el que están todas las instrucciones para que el navegador reconstruya la página
Web, accediendo a las ubicaciones de sus elementos y siguiendo un orden preconcebido, rígido,
que no permite la interacción con el usuario. Este tipo de páginas son meramente informativas,
documentales, no interactivas.
Páginas Web dinámicas. A diferencia de las anteriores, las páginas Web dinámicas se generan
en el momento mismo del acceso del usuario, empleando para ello algún lenguaje interpretado
(como el PHP), lo cual le permite recibir solicitudes del usuario, procesarlas en bases de datos
y ofrecer una respuesta acorde a sus requerimientos.
Las páginas Web requieren de un navegador Web para ser utilizadas.
Un navegador Web es un software de aplicación que sirve para abrir páginas Web tanto en
una ruta local (como el disco rígido) o provenientes de la Internet.
9
Conceptos básicos para la creación de una página web.
Una página web está compuesta por uno o varios documentos html relacionados entre sí
mediante hipervínculos (enlaces). Además, estos documentos pueden contener otros elementos
como pueden ser imágenes, sonidos, animaciones multimedia, aplicaciones.
Página web: Documento realizado en HTML y que es parte de un sitio Web. Aparte del HTML
se pueden utilizar otros lenguajes complementarios como PHP, ASP, Javascript.
Sitio web: Página principal y sus otras páginas, gráficos, documentos, multimedia y otros
archivos asociados que se almacenan en un servidor Web o en el disco duro de un equipo.
HTML: (Lenguaje de marcado de hipertexto) Lenguaje estándar de marcas empleado para

documentos del World Wide Web.
Hipervínculo: Al hipervínculo se le suele llamar "enlace web" o en su versión anglosajona

"link". Un hipervínculo es una conexión de una página a otro destino como, por ejemplo, otra
página o una ubicación diferente en la misma página. El destino es con frecuencia otra página
Web, pero también puede ser una imagen, una dirección de correo electrónico, un archivo
(como por ejemplo, un archivo multimedia o un documento de Microsoft Office) o un
programa. Un hipervínculo puede ser texto o una imagen. lenguaje de programación: Lenguaje
con el que está desarrollada una página web.
Editor: Programa utilizado para crear páginas web. Ejemplos: Word press y Adobe
Dreamweaver.
Servidor: Máquina conectada a Internet que -entre otros servicios- ofrece albergue para páginas
web haciendo que estén accesibles desde cualquier punto de Internet.
Cliente FTP: Programa que permite conectarse al servidor para publicar páginas web.
Hosting: Hospedaje web. Espacio de disco donde se almacenan las páginas webs para que sean
accesibles a través de Internet.
Dominio: Dirección web asociada a una página web.
10
ISP: En el ámbito del desarrollo de sitios web, se puede decir que un ISP es un proveedor de
servicios para web. Los diferentes servicios que pueden ofrecer son: conexión a Internet,
registro de dominio, hospedaje de sitios web, servicios de contadores de servicios, libros de
visitas gratuitos, estadísticas para web, entre otros.
URL: (Universal Resource Location / Localizador de recursos universal) Cadena que

proporciona la dirección de Internet de un sitio Web o un recurso del World Wide Web, junto
con el protocolo mediante el cual se tiene acceso al sitio o al recurso. El tipo más común de
dirección URL es http://, que proporciona la dirección de Internet de una página Web. Otros
tipos de dirección URL son gopher://, que proporciona la dirección de Internet de un
directorio Gopher, y ftp://, que proporciona la ubicación de red de un recurso FTP. Ejemplos:
http://www.desenredate.com , http://www.google.com
Applets: Programas desarrollados con Java para mejorar la presentación de las páginas Web
que realizan animaciones, juegos e interacción con el usuario.
Frames (marcos: Áreas rectangulares que subdividen las ventanas de algunas páginas Web,
cada una de las cuales contiene un documento de hipertexto independiente de los demás.
webmaster: Un webmaster es el encargado de crear, diseñar, estructurar, maquetar, publicar,
promocionar y mantener un sitio web.
Tablas: Elemento para distribuis uniformemente y de forma tabulada información en una

página web.
Banner: Elemento gráfico con forma rectangular, normalmente animado, cuyo contenido es
publicidad.
Imagen: Archivo gráfico que se puede insertar en una página Web y mostrar en un explorador
de Web. Existen diferentes formatos: GIF, JPEG, BMP, TIFF, WMF y PNG, entre otros.
Propiedades: Características de un elemento del Web actual, como el título y la dirección URL
de un Web o el nombre y el valor inicial de un campo de formulario. También puede especificar
propiedades para elementos de página como tablas, gráficos y elementos activos.
11
Instrucciones
1. Lee cada uno de los enunciados y completa el crucigrama.
Evaluación
12
Actividad 1 – Conceptos Básicos de páginas web
Nombre: ________________________________ Fecha:________________ Puntuación: ____________
N° Aspectos a evaluar Si No
1. Contesto correctamente que es un Hipervínculo
2. Contesto correctamente que es HTTP
3. Contesto correctamente que es una Página web
4. Contesto correctamente que es un Navegador
5. Contesto correctamente que es el Dominio
6. Contesto correctamente que es HTML
7. Contesto correctamente que es un página estática
8. Contesto correctamente que es un Servidor
9. Contesto correctamente que es el Hosting
10. Contesto correctamente que es un Editor
13
Actividad 2
➢ Aprendizaje Esperado: 1. Construye una página web, utilizando elementos del software de
diseño web, favoreciendo su creatividad e innovación, para comunicar información en distintos
contextos.
➢ Atributo (s): 4.5 Maneja las tecnologías de información y la comunicación para obtener
información y expresar ideas/ 5.6 utiliza las tecnologías de información y la comunicación para
procesar e interpretar información.
➢ Conocimiento (s): Elementos de una página web.
Lectura previa
Elementos que componen una página Web

● ¿Cómo está compuesta una página Web?
● ¿Qué información debe tener una página Web?
Las principales características que constituyen una página en Internet son:
Diseño web creativo, ordenado y fácil de navegar

Entre los elementos de un sitio web exitoso está un diseño amigable y fácil de navegar, esto
permitirá que el usuario se sienta cómodo y permanezca más tiempo en el sitio.
Este es un ejemplo de un sitio web que combina el mensaje y la usabilidad:
14
Secciones y páginas internas bien definidas
Antes de crear tu sitio web, define cuales son las que tendrá tu sitio, esto evitará que al
momento de diseñarlo estés improvisando y creando estructuras que sean confusas para tus
visitantes.
Texto
El texto es el elemento más significativo de cualquier sitio Web porque los usuarios navegan
por la Web fundamentalmente en busca de información expresada en hipertexto.
Imágenes
Aunque no debe abusar de las imágenes por el riesgo de aumentar el peso de la página, y por
lo tanto, los tiempos de descarga. Las imágenes constituyen un elemento esencial para ofrecer
información visual del contenido y mostrar un diseño atractivo y personal.
15
Hipervínculos [relacionar la página mediante enlaces]
Los hipervínculos son enlaces (links) que sirven para mejorar la navegación dentro de la
página. Normalmente se realizan entre dos páginas web de un mismo sitio, pero un enlace
también puede apuntar a una página de otro sitio web, a un fichero, a una imagen.
Algunos enlaces que puedes considerar son los siguientes:
● Datos de contacto visibles y de fácil acceso.
● Botones que dirijan a tus Redes Sociales.
● Formularios de contacto visible y claro.
● Mapa de la ubicación de tu sitio [Aquí puedes aprovechar Google Maps].
● Páginas complementarias [Términos de Uso y Aviso de Privacidad].
● Formularios.
● Herramientas.
Web hosting (Espacio web donde se almacena la información de la página)
Existen servicios de hosting gratuitos y de paga, pero si deseas un sitio web que tenga todas las
partes necesarias para que sea de calidad, obviamente es mejor contratar un buen servicio de
paga.
Para que nuestro sitio Web sea visible ante todos necesitamos colocarlo en un servidor.
16
Un nombre de dominio
El nombre de dominio es la primera parte de una dirección Web que identifica al servidor que
almacena y sirve su sitio.
Otros elementos
Otros elementos bastante comunes y que su inclusión debería evaluarse si son necesaria o no,
ya que pueden ser demasiado pesadas y alentar el tiempo de carga del sitio web o simplemente
ser un distractor.
Video
Mientras Internet es cada vez más asequible, confiable y veloz, los programas de edición de
video se hacen más cercanos a los usuarios.
Ahora es más fácil realizar un video desde una cámara digital o un teléfono móvil con cámara
incorporada y que termine subiendo a la Web para ponerlo al alcance de todos.
Animaciones en Flash
Es una imagen animada, fácil de crear y sobre todo que ocupa poca memoria. Tiene diferentes
usos, desde la creación de dibujos animados hasta el despliegue de dibujos interactivos.
Sonidos
Un elemento cada vez más importante. La comercialización de nuevos dispositivos digitales

móviles como el iPhone ha potencializado este elemento.
Además de incorporar sonido en la página Web puede descargar de ellas archivos de audio
para sus dispositivos móviles.
El formato MP3 es el más conocido y más usado por su calidad y nivel de compresión.
Banner
Una imagen fija o animada utilizada generalmente para publicidad.
17
Marcos
También llamados frames, son una especie de recuadro independiente en el que puede cargar
una página Web.
De esta forma es posible dividir una página Web en diferentes partes o ventanas, cada una con
sus propios bordes y barras de desplazamiento, cargando dentro de cada una de ellas una
página web externa independiente.
Instrucciones
1. Escribe dentro del recuadro una F si la afirmación es Falso o un V si es verdadero.
Enunciado F V
Un Diseño web creativo permitirá que el usuario se sienta cómodo y permanezca

más tiempo en el sitio.
Los banners son una especie de recuadro independiente en el que puede cargar una
página Web
Los Marcos son una imagen fija o animada utilizada generalmente para publicidad.
Para que nuestro sitio Web sea visible ante todos necesitamos colocarlo en un
servidor.
Los hipervínculos son enlaces (links) que sirven para mejorar la navegación dentro
de la página.
El nombre de dominio es la primera parte de una dirección Web que identifica al

servidor que almacena y sirve su sitio.
El texto constituye un elemento esencial para ofrecer información visual del

contenido y mostrar un diseño atractivo y personal.
Una imagen es el elemento más significativo de cualquier sitio Web porque los
usuarios navegan por la Web fundamentalmente en busca de información
expresada en hipertexto
Definir las secciones y paginas internas evitará que al momento de diseñarlo estés
improvisando y creando estructuras que sean confusas para tus visitantes
Uno de los enlaces importantes y que debes considerar en tu página web son los
Datos de contacto
18
Evaluación
Actividad 1 – Elementos básicos de una página web
Nombre: ________________________________ Fecha:________________ Puntuación: ____________
N° Aspectos a evaluar Si No
1. Determino como verdadero que un Diseño web creativo permite que el

usuario se sienta cómodo y permanezca más tiempo en el sitio.
2. Determino como falso que los banners son una especie de recuadro
independiente en el que puede cargar una página Web
3. Determino como falso que los Marcos son una imagen fija o animada utilizada
generalmente para publicidad.
4. Determino como verdadero que para que nuestro sitio Web sea visible ante
todos necesitamos colocarlo en un servidor.
5. Determino como verdadero que los hipervínculos son enlaces (links) que
sirven para mejorar la navegación dentro de la página.
6. Determino como verdadero que el nombre de dominio es la primera parte de
una dirección Web que identifica al servidor que almacena y sirve su sitio.
7. Determino como falso que el texto constituye un elemento esencial para
ofrecer información visual del contenido y mostrar un diseño atractivo y
personal.
8. Determino como falso que una imagen es el elemento más significativo de
cualquier sitio Web porque los usuarios navegan por la Web
fundamentalmente en busca de información expresada en hipertexto
9. Determino como verdadero que definir las secciones y paginas internas evita
que al momento de diseña se esté improvisando y creando estructuras que sean
confusas para los visitantes
10. Determino como verdadero que uno de los enlaces importantes y que debes
considerar en tu página web son los Datos de contacto
19
Actividad 3
➢ Aprendizaje Esperado: Construye una página web utilizando elementos del software de diseño
web favoreciendo su creatividad e innovación para comunicar información en diferentes contextos.
➢ Atributo (s): 4.5 Maneja las tecnologías de la información y la comunicación para obtener
información y expresar ideas. / 5.6 Utiliza las tecnologías de la información y la comunicación para
procesar e interpretar información.
➢ Conocimiento (s): Elementos de una página web.
Lectura previa
Elementos básicos de un sitio Web y sus partes
El diseño Web puede ser fascinante.

Crear sitios Web atractivos y profesionales es el sueño de millones de diseñadores de todo el
mundo que utilizan las tecnologías de Internet.
Un sitio Web debe ser sobre todo accesible, intuitivo y agradable.

La organización inicial es muy importante para poder utilizar eficazmente las herramientas y
tomar decisiones oportunas.
Vamos a iniciar con la concepción del diseño Web, a explicar las estrategias de diseño y a cómo
organizar las ideas.
El comprender el proyecto desde esta etapa, permite un ahorro significativo de recursos en el
momento de la implementación.
20
Las páginas Web
Posiblemente el término página Web sea el más utilizado en Internet, precisamente porque
cuando navega por la red lo hace en busca de páginas electrónicas.
Las páginas Web son el soporte de la información en la Web.
Los componentes de una página web son: imágenes, textos y otros contenidos multimedia. Las
secciones internas se encuentran enlazadas de manera que el usuario puede navegar de una
página a otra utilizando hipervínculos, un concepto de interactividad surgido con el fenómeno
Internet.
NOTA:
Las partes que forman a una página Web son conjunto de textos, imágenes, audio, video y
otros contenidos.
Los Sitios Web

Un sitio Web es una localización en la Web que contiene varias páginas Web organizadas
jerárquicamente.
Cada sitio tiene una página de inicio que corresponde a la página principal, llamada en
inglés Home Page.
Es la primera página que se visualiza cuando se accede a un sitio tecleando el nombre del
dominio en la barra del navegador.
Un sitio tiene generalmente más de una página Web y su objetivo principal es ofrecer la
información que necesitan los usuarios y proporcionársela de manera que puedan asignarla
fácilmente.
NOTA:
En ocasiones se utiliza el término página Web para referirse a un sitio Web. Un sitio Web es un
conjunto de páginas Web. Las páginas Web constituyen archivos únicos con un nombre
asignado.
21
Elementos que componen una página Web
¿Cómo está compuesta una página Web?
¿Qué información debe tener una página Web?
Las principales características que constituyen una página en Internet son:
TEXTO
El texto es el elemento más significativo de cualquier sitio Web porque los usuarios navegan
por la Web fundamentalmente en busca de información expresada en hipertexto.
NOTA:
Los textos han convertido el inglés en el idioma universal de la red. En su objetivo por alcanzar
la mayor audiencia posible, muchos sitios ofrecen su información y sus servicios en su idioma
natal y en otros idiomas, fundamentalmente en inglés.
IMÁGENES
Aunque no debe abusar de las imágenes por el riesgo de aumentar el peso de la página, y por
lo tanto, los tiempos de descarga. Las imágenes constituyen un elemento esencial para ofrecer
información visual del contenido y mostrar un diseño atractivo y personal.
22
ESPACIO WEB
Para que nuestro sitio Web sea visible ante todos necesitamos colocarlo en un servidor.
UN NOMBRE DE DOMINIO
El nombre de dominio es la primera parte de una dirección Web que identifica al servidor que
almacena y sirve su sitio.
HIPERVÍNCULOS
Por sí misma, una página Web no puede hacer mucho. La magia de verdad comienza cuando
relaciona varias páginas mediante enlaces.
23
VIDEO
Mientras Internet es cada vez más asequible, confiable y veloz, los programas de edición de
video se hacen más cercanos a los usuarios.
Ahora es más fácil realizar un video desde una cámara digital o un teléfono móvil con cámara
incorporada y que termine subiendo a la Web para ponerlo al alcance de todos.
ANIMACIONES EN FLASH
Es una imagen animada, fácil de crear y sobre todo que ocupa poca memoria. Tiene diferentes
usos, desde la creación de dibujos animados hasta el despliegue de dibujos interactivos.
24
SONIDOS
Un elemento cada vez más importante. La comercialización de nuevos dispositivos digitales

móviles como el iPhone ha potencializado este elemento.
Además de incorporar sonido en la página Web puede descargar de ellas archivos de audio
para sus dispositivos móviles.
El formato MP3 es el más conocido y más usado por su calidad y nivel de compresión.
OTROS ELEMENTOS
Otros elementos bastante comunes son:
Banner: Una imagen fija o animada utilizada generalmente para publicidad.
Marcos: También llamados frames, son una especie de recuadro independiente en el que puede
cargar una página Web.
De esta forma es posible dividir una página Web en diferentes partes o ventanas, cada una con
sus propios bordes y barras de desplazamiento, cargando dentro de cada una de ellas una
página web externa independiente.
Los marcos se usaron mucho en un momento determinado, pero además de crear algunos
inconvenientes en el diseño, es una opción que no se recomienda ya que los motores de
búsqueda no indexan correctamente los sitios realizados con marcos.
Actualmente se pueden obtener los mismos resultados con CSS.
Formulario: Zona para introducir datos o comentarios. Una plantilla o página con espacios
vacíos para llenarse con alguna finalidad.
También se utiliza para referirse al conjunto de campos solicitados por un determinado
programa, los cuales se almacenan para su manipulación y uso posterior.
25
Instrucciones
1. Con base a la lectura anterior responde el siguiente crucigrama.
Evaluación
Aciertos 8 Aciertos 7 Aciertos 6 Aciertos 5 Aciertos 4 Aciertos menos de 4
10 9 8 7 6 5
26
Parcial 2
Actividad 4
información y expresar ideas/ 5.1 Sigue instrucciones y procedimientos de manera reflexiva,
comprendiendo como cada uno de sus pasos contribuye al alcance de un objetivo./ 5.6 Utiliza las
tecnologías de la información y comunicación para procesar e interpretar información./ 8.1 Propone
maneras de solucionar un problema o desarrollar un proyecto en equipo, definiendo un curso de
acción con pasos específicos.
➢ Conocimiento (s): Estructura básica de la web: Html, head, body/ Elementos básicos: Títulos,
párrafos, imágenes, hipervínculos, videos.
Lectura previa
Los sitios web están conformados por páginas interrelacionadas, por lo que, vamos a tener
archivos html, entre ellos uno con el nombre de index, que el principal; estos van a tener texto,
imágenes, etc.
Antes de empezar a construir una página es fundamental hacer un boceto, para tener una guía
clara del diseño que se busca tener cuando se inicien a construir las páginas web.
Es importante que todo esté bien organizado tanto para que a un usuario le resulte cómodo
navegar por ella, como para que al autor le sea fácil poder modificarla o añadir información.
Cuando estructuramos un documento html es debes considerar las siguientes partes:
1. Utilizar la etiqueta html como principal.

2. Encabezado (Etiqueta head)
3. Codificación de caracteres.
4. El cuerpo (Etiqueta body )
La etiqueta <head></head> integra la información como: título, palabras clave que identifican
los bots de los motores de búsqueda, así como otros datos que no son parte del contenido, los
cuales no se visualizan en el navegador. Hay que tomar en cuenta que pueden tener disponible
a la información a través de otros métodos.
Es importante mencionar que es recomendable especificar un elemento <meta> con propiedad

charset="utf-8"> la cual funciona para establecer como los símbolos o caracteres se van a
representar en lenguaje humano, en donde el más común es UTF-8 sin embargo, hay otros
útiles.
27
La etiqueta <body></body> almacena todo contenido en un documento html.; solo puede
haber una. Se integran algunos elementos como:
1. Títulos.
2. Tablas.
3. Formularios.
4. Párrafos.
5. Imágenes.
6. Enlaces.
7. Videos.
8. Entre otros.
Una vez que ya conoces la estructura de un documento html, se debe de tomar en cuenta que
escribir cada uno de los elementos se debe de tener un estilo de desarrollo, por ejemplo, tal vez
prefieras escribir el código de arriba hacia abajo sin sangrías, solo escribir los elementos en el
interior de la etiqueta. Por ejemplo:
O tal vez deseas distinguir con sangrías para identificar mejor en que etiqueta o elemento se
está trabajando. Por ejemplo:
Así mismo, no te frustres con memorizarte el nombre de las etiquetas y elementos, hoy en día
existen softwares que nos ayudan a definirlos como: “Dreamweaver” en donde la estructura
ya se encuentra establecida; solo tenemos que seleccionar los elementos desde la pestaña
insertar que integra la aplicación y se cuenta con una vista previa definida para poder visualizar
los avances.
28
Menú en donde se agregan los elementos de las etiquetas base.
Elementos básicos
Dentro de la etiqueta de <head></head> se establece un título utilizando el elemento

<title></title>. Los diseñadores de páginas web deben utilizar este elemento para identificar
claramente el contenido en la página:
En la etiqueta <body></body> como ya tiene conocimiento, se escribe el contenido; con la

etiqueta <h1></h1> se representa un título de nivel 1. Por lo que los títulos desde h1 a h6 se
integran con secciones implícitas, así mismo organizan con una estructura jerárquica. Su
sintaxis es la siguiente:
<body><h1>Este es el contenido de la etiqueta h1 de diseño</h1>
</body>
De igual forma tenemos la etiqueta <p></p>, que hace alusión a todos los párrafos que
nosotros insertamos a nuestro contenido:
La sintaxis es la siguiente:
<body><p>Este es el contenido de la etiqueta P de diseño</p>
</body>
29
A continuación, se muestra un ejemplo con su aplicación:
Se interpreta en el navegador de internet así:
30
Una vez que ya has entendido como redactar texto en un documento html, ahora vamos a ver
como insertar imágenes; pero antes ten encuentra que en la carpeta donde estás trabajando tu
página, es recomendable hacer una carpeta en donde solo se encuentren las imágenes que vas
a insertar.
Ejemplo:
Ahora trabajaremos con elementos, que a diferencia de las etiquetas, se llaman de la siguiente
forma: <nombreEtiqueta propiedades />
Vamos a empezar con elemento <img>; para llamarlo solo tenemos que escribir <img
propiedades /> por tratarse de un elemento que va a dar valor a un objeto.
Este elemento <img> inserta una imagen, que es un recurso externo que puede ser referenciado
en el cuerpo (etiqueta body) d. para ubicarlo debemos especificar con el atributo src, así mismo
utilizaremos width para especificar lo ancho y height para especificar lo alto.
Siguiendo con el ejemplo anterior, ahora vamos a insertar la imagen Joan Sebastián Bach en la
parte superior de nuestro cuerpo (body) utilizando la propiedad src en donde tenemos que
ubicar su ubicación tomando a partir de la carpeta que estamos trabajando; quedando de la
siguiente forma:
Entrada de Propiedad src con dirección de imagen entre comillas; así mismo Salida
img tenemos width, height con los que ponemos dimensiones a la imagen. de img
<img src="imagenes/bach. Jpg”width="200" height="150 />
Notas:
Imágenes es el nombre la carpeta en donde se encuentran las imágenes dentro de la carpeta en
la que se está diseñando.
Bach.jpg es el nombre la imagen a referenciar con respectiva extensión de archivo.
Con la propiedad widht se da valor a lo ancho de la imagen y con height a lo alto, tales valores
entre comillas.
31
Integrándose al código previo, quedaría así:
Su interpretación de la siguiente forma:
32
Ahora vamos a insertar un vínculo básico con el elemento <a> el cual se utilizará para
insertar vínculos dentro del contenido del documento (body). Estos vínculos al usuario
trasladarse de un documento a otro, ya sea que este en la web o lo tengamos en alguna
carpeta de nuestra computadora.
¿Cómo lo usamos?
Entrada de Atributo de elemento con URL a Separador Texto Fin de

elemento vincular entre comillas descripti elemen
vo to
<a href="https://es.wikipedia.org/wiki > Saber </a >
/Johann_Sebastian_Bach" más del
autor
Notas:
El separador mayor que, se utiliza para poder hacer la descripción en donde va a dar clic el
usuario.
Este elemento se puede utilizar directamente en la etiqueta body o en las etiquetas de los
títulos (h1 a h9) o en párrafo (p).
Se agrega al código previo de la siguiente forma:
33
Interpretándose así:
Ahora te voy a mostrar cómo puedes insertar un video, para ello recomiendo que, así como
las imágenes, se cuente con una carpeta para guardar los videos que se van a insertar en la
página.
Quedando así:
¿Cómo se insertan los videos?
Para insertar los videos se debe utilizar el elemento video con las propiedades src para
escribir la dirección del video, width para anchura del video, height para la altura del video,
controls para que se pueda reproducir y pausar video, con esto ya se encuentra el video
insertado; pero se va juntar con el contenido previo, por lo ideal es utilizar una etiqueta
<div></div> para dividir el contenido dentro de la etiqueta <p></p> con esto al agregar un
texto relacionado al video y abajo aparecerá el video. La etiqueta se verá más a detalle
posteriormente.
Un ejemplo sería el siguiente:

Etiqueta Texto Etiqueta para Elemento video Propiedades de video necesarias para Cierre de etiquetas y
de párrafo relacionado al dividir el para definirlo. poder reproducirlo. elementos.
video dentro de contenido
párrafo. previo.
<p> Te invito a ver el <div> <video src="videos/producto.mp4" </video>

video width="384" height="288" controls> </div></p>
34
Instrucciones
1. Una vez que termines de leer realiza lo siguiente:

2. Lee la pregunta o descripción del crucigrama.
3. Identifica la respuesta en una columna (Vertical) o fila (horizontal)
4. Considera que las respuestas no deben tener espacio.
5. Posteriormente revisa el instrumento de evaluación para validar como se va a calificar la actividad.
3
2 5
4 6 8
1 10 9
Horizontales
1.- Este es el contenido de la etiqueta h1 de diseño es un ejemplo de:
6.- Es nombre del archivo principal que recibe el archivo principal de una página html.
7.- Es una de las etiquetas principales html que integra información como: título, de codificación de
caracteres o de los motores de búsqueda, los cuales no son parte del contenido.
8.- Es la etiqueta que sirve para integrar todo el contenido de un documento html.
Verticales
2.- Se utiliza para insertar vínculos dentro del contenido del documento (body).
3.- ¿Cómo se nombra la propiedad del elemento meta que se llama en la etiqueta body la cual funciona
para establecer una codificación de caracteres?
4.- Es un elemento que llama en la etiqueta head y que se utiliza para identificar el contenido de una
página:
5.- Es el elemento que se utiliza para situar un video dentro de un documento html.
9.- Este elemento llama una imagen, externa que puede ser referenciado en el cuerpo. (etiqueta body)
10.- Es el nombre de la propiedad de un elemento video o img que es donde se escribe la dirección del
archivo.
35
Evaluación
La actividad va a ser evaluada con la siguiente rúbrica:
Ponderación Puntos
Criterios 10 9 8 6
Sobre saliente Satisfactorio Requiere mejora No satisfactorio
Respuestas 8 a 10 acertadas. 6 a 8 acertadas De 4 a 6 Menos de 3
correctas acertadas, acertadas.
en
crucigrama.
Actividad 5
información y expresar ideas/ 5.1 Sigue instrucciones y procedimientos de manera reflexiva,
comprendiendo como cada uno de sus pasos contribuye al alcance de un objetivo./ 5.6 Utiliza las
tecnologías de la información y comunicación para procesar e interpretar información./ 8.1 Propone
maneras de solucionar un problema o desarrollar un proyecto en equipo, definiendo un curso de
acción con pasos específicos.
➢ Conocimiento (s): Estilos básicos: Tamaño, colores, fuentes.
Lectura previa
También en importante hacer mención que html a títulos en modo jerárquico o párrafos, tal
cual como lo hemos visto previamente, sin embargo, tienen una fuente y tamaño predefinido;
por lo que nosotros podríamos cambiar sus propiedades utilizando el elemento <font>
El elemento <font> funciona para personalizar el tamaño, el color y la fuente del texto. Para
ello utilizamos los atributos "size", "color" y "face" para personalizar texto.
El elemento <font> ya se ha quedado atrás, debido a que tiene varias desventajas utilizarlas;
por ejemplo: sí una fuente que se llama no está instalada en el navegador del usuario no
funciona, por lo que se ha optado ya que se usa CSS para establecer el estilo de texto,
obteniéndose un resultado idéntico, pero sin limitaciones. Más adelante se te enseñará como
utilizar css.
36
El tamaño de la fuente
Para poder definir un tamaño de fuente utilizamos la propiedad size= “Valor entero”.Los
tamaños aceptados son entre 1 (el más pequeño) y 7 (el más grande). EL tamaño del texto
promedio es 3.
A continuación, se muestra un ejemplo para llamarla:

Entrada de etiqueta Propiedad con Separador Texto a aplicar Salida de etiqueta p
p y elemento font valor de tamaño de obligatorio propiedad y elemento font.
fuente
<p><font size="5" > Este es el tamaño </font></p>
de fuente 5
El color de la fuente
Ahora sí se quiere aplicar un color a la fuente, se utiliza la propiedad color y código de color,
los cuales puedes consultar en el siguiente sitio web de adobe color:
https://color.adobe.com/es/create/color-wheel
Aquí te escribo ejemplos de código de colores:

fuente
color="#D45248 de fuente 5 y rojo
37
Estilo de letra de la fuente
Para elegir un estilo, ahora se utilizará la propiedad face del elemento font. Se puede elegir
cualquier fuente que se tenga instalada por el usuario, por es eso hay que tener cuidado al
escogerlas porque sí el usuario visita la página y no tiene la fuente instalada, verá la que está
por defecto que es: Times New Roman. La recomendación para evitar ese problema es que
escriban varias fuentes parecidas y de tal forma se podrá elegir de izquierda a derecha hasta
que se encuentre una disponible.
Para poder llamar la fuente ahora solo hay que agregar la propiedad face con el valor que será
el nombre de la fuente, sí se van a elegir varias solo se separa con comas.

fuente
color="#D45248 de fuente 5 y rojo
face="Bookman
Old Style, Book
Antiqua,
Garamond"
A continuación, se muestra cómo queda aplicada el tamaño de fuente, color tipo de letra en
título del texto previo:
Se interpreta de la siguiente forma en el navegador:
38
Como se puede notar, ahora el título: “Obras para la orquesta” tiene un color de fuente rojo
(posiblemente en cuadernillo se muestre negro oscuro por tema de impresión) el cual se
estableció con el código: #990000", un tamaño de 6 y una fuente que pudo haber sido Bookman
Old Style o Book Antiqua.
Instrucciones
A continuación, se muestra una estructura html en donde deberás realizar la siguiente

simulación html:
1. Deberás escribir un título al documento html.

2. Escribe un título con la primera jerarquía (h1) en el contenido el cual va a ser: Mis
aprendizajes
3. Escribe un párrafo, en donde redactes de forma breve, lo que has aprendido hasta ahora de
la materia.
4. Aplicar color #990000.
5. Aplicar tamaño 5
6. Aplicar fuente arial o Book Antiqua.
7. El ejercicio lo podrá realizar en el cuadernillo o en libreta o en su caso lo que el profesor
recomiende.
39
Sección para resolver actividad
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
40
Evaluación
• La actividad será evaluada con la siguiente lista de cotejo:
Lista de cotejo de actividad: “Simulación html”

Criterio SI NO
1. Escribe correctamente el titulo con la sintaxis de html.
2. Escribe correctamente el párrafo con la sintaxis de html.
3. Se aplica correctamente a su párrafo con la sintaxis de html.
4. Aplica correctamente el tamaño de fuente con la sintaxis de html.
5. Aplica correctamente el color con la sintaxis de html.
6. Aplica correctamente las fuentes solicitadas con la sintaxis html.
7. El trabajo se entrega limpio.
Calificación
41
Actividad 6
➢ Aprendizaje esperado: Construye una página web utilizando elementos del software de
diseño web favoreciendo su creatividad e innovación para comunicar información en
diferentes contextos.
➢ Atributo (s):
o 4.5 Maneja las tecnologías de la información y la comunicación para obtener
información y expresar ideas.
o 5.6 Utiliza las tecnologías de la información y la comunicación para procesar e
➢ Conocimiento (s): Maquetación web: Tablas, divs.
Lectura previa
Maquetación web: Tablas, divs.

Antes de crear una página web, primero debes saber qué es la maquetación web. La idea
es que cualquier sitio web sea lo suficientemente interactivo como para transmitir por completo
la identidad de tu marca.
La maquetación web es el proceso de planificación, conceptualización y organización de

contenido de una página web, es decir, asegura que los textos, las imágenes, los vídeos, como
todo lo que quieras añadir a una página web, estén estructurados para crear una buena
experiencia de usuario.
Cuando se desarrolla una página web en base al diseño de una imagen y se le otorgan
funciones por medio de código, se dice que está maquetada.
La maquetación web implica separar los elementos de la imagen y, dependiendo de la

función que deba desempeñar cada elemento, desarrollar y estructurar el código que le permita
a cada uno tener su orden y su aplicación.
Los elementos visuales que percibe el usuario al entrar a una página web, se conoce
como la “interfaz de usuario“ y se puede diseñar por un profesional en programas de edición
de imagen como Photoshop o Illustrator.
Cuando se separa la imagen final del diseño por elementos, se otorga a cada uno su
función y se le da un orden por medio de un lenguaje de programación, el resultado será una
página maquetada para web.
La maquetación web combina el diseño con la programación de una página, ya que lo

que se busca es brindarle al usuario una experiencia agradable a la vista, contenido
comprensible y buena usabilidad del sitio, según sus necesidades.
42
Al combinar la estructura de un código (HTML) y sus estilos aplicados (CSS), se hace la
función de maquetar. Los elementos del sitio se definen por medio de contenedores (divs) que
se posicionan a través de hojas de estilo. Se suelen emplear diseños específicos a las necesidades
del sitio así como a su tipo de usuario, distribuyendo los distintos elementos visuales o
interactivos en un espacio determinado dentro de la página.
Tablas
Una tabla no es otra cosa más que un medio de organizar datos en filas y columnas. una
tabla básica puede ser declarada usando tres elementos, a saber, <table> (el contenedor
principal), <tr> (representando a las filas contenedoras de las celdas) y <td> (representando a
las celdas).
Una celda de encabezado es un tipo especial de celda utilizada para organizar y

categorizar otras celdas en la tabla.
43
Construiremos una tabla para mostrar información acerca del clima en los próximos
días. Aquí, las celdas de encabezado, representadas por el elemento <th>, son ubicadas en la
primera fila de la tabla, encima de las celdas comunes.
Dejémoslo más claro con un ejemplo:

<table>
<tr>
<th>Hoy</th>
<th>Mañana</th>
<th>Domingo</th>
</tr>
<tr>
<td>Soleado</td>
<td>Mayormente soleado</td>
<td>Parcialmente nublado</td>
</tr>
<tr>
<td>19°C</td>
<td>17°C</td>
<td>12°C</td>
</tr>
<tr>
<td>E 13 km/h</td>
<td>E 11 km/h</td>
<td>S 16 km/h</td>
</tr>
</table>
Al realizar la ejecución del código mostrado, el resultado será:
44
Etiqueta DIV
En un documento HTML el elemento "div" permite crear divisiones, también llamadas secciones
o zonas. Las divisiones se utilizan para agrupar elementos y aplicar estilos
La etiqueta <div> define una división. Esta etiqueta permite agrupar varios elementos de bloque
(párrafos, encabezados, listas, tablas, divisiones, etc). En principio, los navegadores no muestran nada
especial cuando se crea una división, salvo que se dé formato a la división con la hoja de estilo.
Veamos un ejemplo de la etiqueta div:
<div>
<p>El hombre es fuego; la mujer, estopa; llega el diablo y sopla.</p>
</div>
<div>
<p>Para el amor y la muerte, no hay cosa fuerte.</p>
</div>
<div>
<p>Viejo el pajar, malo de encender y peor de apagar.</p>
</div>
Al realizar la ejecución del código mostrado, el resultado será:
45
Instrucciones: Observa cuidadosamente cada uno de los elementos de las dos tablas que se te
presentan. Deberás relacionar las etiquetas de la tabla 1 con la descripción de la tabla 2. En la
tabla 1 deberás escribir la letra que corresponda a la descripción presentada en la tabla 2. Valor
por cada respuesta correcta 2 puntos.
46
Actividad 7
➢ Aprendizaje esperado: Construye una página web utilizando elementos del software de
diseño web favoreciendo su creatividad e innovación para comunicar información en
diferentes contextos.
➢ Atributo (s):
o 4.5 Maneja las tecnologías de la información y la comunicación para obtener
información y expresar ideas.
o 5.6 Utiliza las tecnologías de la información y la comunicación para procesar e
➢ Conocimiento (s): Diseño y usabilidad.
Lectura previa
Diseño y usabilidad.
Alineación
La alineación de texto u objetos es la forma en la cual se visualizará y posicionará nuestra
información o elemento. En una página web, la alineación del texto es importante para poder visualizar
la forma correcta nuestra información, en un procesador de texto es muy fácil realizar esta operación,
pero en HTML para alinear el texto utilizamos el atributo align:
align=left para alinear a la izquierda
align=right para alinear a la derecha
align=center para centrar el texto
align=justify para justificar el texto
Para que quede claro lo anterior, hagamos unos pequeños ejemplos empleando los comandos
de alineación.
• Alineación a la izquierda: align=left
<p align="left">alineamos el texto a la izquierda</p>
47
alineamos el texto a la izquierda
• Alineación a la derecha: align=right
<p align="right">alineamos el texto a la derecha</p>
alineamos el texto a la derecha
• Centramos el texto: align=center
<p align="center">centramos el texto</p>
centramos el texto
• Justificamos el texto: align=justify
<p align="justify">Justificamos el texto</p>
Justificamos el texto
Bordes
Un elemento o sección pueden tener bordes, los bordes pueden tener grosor, color y estilo de
borde. Sus propiedades son:
• border-width Especifica el ancho del borde, normalmente en pixelesEs la menor unidad o cada
punto que forma parte de una imagen digital.. También se puede usar los valores predefinidos:
thin, medium, ó thick.
• border-color Especifica el color del borde. Los valores se pueden asignar indicando el nombre
del color (red,black, white etc), el código rgb (rgb(255,0,0)) ó el código hexadecimal (#ff0000).
• border-style Especifica el estilo de borde a mostrar el cual puede ser: none, hidden, dotted,
dashed, solid, doublé, groove, ridge, inset, outset.
La forma de aplicar lo anterior lo podemos visualizar de la siguiente forma, recordando que las
etiquetas mencionadas deben de ir dentro de la etiqueta del elemento al cual queremos agregar la
configuración deseada:
border-style:solid;
border-width:5px;
border-color:#ff0000
48
49
Instrucciones: A continuación encontrarás varias afirmaciones sobre las alineaciones y bordes
de un elemento. Responde si son VERDADERAS o FALSAS marcando con una X.
50
Parcial 3
Actividad 8
➢ Atributo (s): 4.5 Maneja las tecnologías de la información la comunicación para obtener información
expresar ideas.
5.1 Sigue instrucciones y procedimientos de manera reflexiva, comprendiendo como cada uno de
sus pasos contribuye al alcance de un objetivo.
5.6 Utiliza las tecnologías de la información comunicación para procesar e interpretar información.
8.1 Propone maneras de solucionar un problema o desarrollar un proyecto en equipo, definiendo
un curso de acción con pasos específicos.
➢ Conocimiento (s): Diseño de página web usando software de aplicación.
Lectura previa
DISEÑO DE PÁGINA WEB USANDO SOFTWARE DE APLICACIÓN

Todos cometemos errores y esto también aplica a la escritura de código. Tanto si eres un principiante
como un experimentado en el tema, cometer un error en tu código puede causarte un verdadero dolor
de cabeza. Así como utilizamos todo tipo de herramientas para ayudarnos con tareas sencillas, como la
corrección ortográfica al escribir, un editor HTML te ayuda a enmendar los errores que se comenten al
escribir código. O quizá estés un poco cansado de escribir etiquetas HTML, si es así en este tema vamos
a explicar cómo ahorrarte ese trabajo. Un editor web también ayuda en otros muchos aspectos de la
creación de páginas web.
¿Qué es un editor Web?

Un editor Web sería cualquier aplicación que nos permita crear, editar y guardar una página Web. Como
ya hemos visto, una página no es más que un archivo de texto, por lo que cualquier programa que nos
permita editar texto, puede funcionar como un editor Web.
Si bien cualquier editor de textos puede hacer este trabajo, no significa que tengas que hacerlo sin
ningún tipo de ayuda. Las funciones adicionales, la comprobación de errores y un editor más intuitivo
en general pueden facilitarte la vida significativamente a la hora de escribir código y optimizar tu
proceso de desarrollo web. Los fundamentos de los editores de HTML son los mismos: te ayudan a
escribir código resaltando las sintaxis, insertando elementos y estructuras HTML de uso común, y
ofreciendo autocompletado.
El texto que utiliza un editor de HTML también se puede traducir a otros lenguajes, como CSS, XML o
JavaScript. Pero como sabemos, no todas las cosas están hechas de la misma manera. Algunos editores
pueden ser más fáciles de usar, mientras que otros brindan mayor funcionalidad.
Podemos considerar tres categorías de editores Web:
Editores de texto.
Nos permiten editar el código fuente puro y duro, como puede ser el bloc de notas o notepad++.
51
Editores de HTML.
Como su nombre lo indica, los editores de HTML textuales se basan en texto. Debes tener
conocimientos de HTML para utilizar este tipo de editores. Funcionan como los editores de texto,
pero pueden tener algunas opciones más avanzadas. Como mostrar las etiquetas de colores, o
cerrarlas automáticamente. También incluyen la apertura de archivos, ya sea un solo archivo, un
proyecto completo o múltiples proyectos, y es algo disponible en todos los editores. Al utilizar
un editor basado en texto, no puedes ver una vista previa en vivo del sitio.
Este tipo de editor puede ofrecer más libertad y opciones personalizadas. Con un editor textual,
puedes optimizar mejor las páginas web para los motores de búsqueda. Por ejemplo, es posible
crear una página web que siga las Pautas de accesibilidad del contenido web (WCAG, por sus
siglas en inglés), para que las personas con discapacidades puedan ver tu página web.
Editores WYSIWYG.
Este es el acrónimo de What You See Is What You Get (Lo que ves es lo que obtienes).Por un
lado, nos permiten editar el código fuente como los editores de HTML. Y por otro, nos permiten
trabajar en vista de diseño. Es decir, ver la página como se vería en un navegador mientras la
editamos. La mayoría de estos editores suelen tener opciones para realizar tareas adicionales de
forma más fácil, como por ejemplo, crear elementos de un formulario, insertar menús, e incluso
código JavaScript tipo AJAX. Editores de este tipo pueden ser Amaya o Dreamweaver.
Escribir directamente el código fuente nos da un mayor control sobre la página, obteniendo un código
más preciso y sin etiquetas innecesarias. Pero el tener que escribir cada etiqueta hace que sea mucho
más lento y que debamos conocer mejor el HTML.
Utilizar editores WYSIWYG resulta más cómodo. Ya que no hemos de preocuparnos por la mayoría de
las etiquetas, y escribimos el texto como lo haríamos en un procesador de texto. No obstante, no siempre
se generará el código que queramos. Y sobre todo si utilizamos editores no especializados, como Word
que permite guardar como página web, aunque generando un código muy "sucio". Por ejemplo, crear
un html con Word en el que sólo ponga "Hola mundo", con letra Arial y tamaño 16px, genera un archivo
de 22KB y 400 líneas de código.
Lo habitual es realizar el grueso de la página en vista de diseño, sobre todo escribir el texto. Y después,
cosas más concretas y correcciones, realizarlas sobre el código fuente. Esto también depende de los
conocimientos de cada uno.
Nota: Aunque en un editor WYSIWYG podemos ver cómo quedará la página,

siempre hemos de probarla en los navegadores más utilizados, en este momento
xplorer y Mozilla Firefox.
Para realizar este curso, te recomendamos que no pierdas de vista el código fuente, e intentes trabajar
directamente con él la mayoría de las veces, sobre todo al hacer cosas nuevas. Puede que vayas un poco
más despacio al principio, pero aprenderás mucho mejor el HTML, y después no tendrás problema para
utilizar cualquier editor.
52
Elegir un editor
Existe un gran número de editores Web, unos más completos que otros, con más o menos opciones y
con más o menos fallos.
Y como al elegir cualquier programa, lo primero es optar por una solución gratuita o de pago. Para
realizar nuestra página Web, vamos a utilizar un editor WYSIWYG. Uno de los mejores (si no el mejor)
editor de este tipo es Dreamweaver, de Adobe. Es un editor muy completo, y el elegido por la mayoría
de desarrolladores profesionales. Pero se trata de un editor de pago, aunque es cierto que podemos
probarlo gratuitamente durante 30 días. En cuanto a opciones gratuitas, podemos encontrar, entre otros,
Bluefish, más enfocado a programadores; Amaya, desarrollado por el consorcio W3C; Atom; Sublime
Text o KompoZer. Nos hemos quedado con este último por ser bastante simple e intuitivo.
¿Qué es Kompozer?
Kompozer es un editor WYSIWYG (What You See Is What You Get = Lo que ves es
lo que tienes) de páginas web. Resulta una herramienta de uso fácil, de libre
distribución y de uso gratuito basado en el motor de Mozilla.
Este programa es el sucesor no oficial del conocido editor Nvu 1.0 y se propone
como alternativa ya que Nvu no se actualiza desde el 2005 y una nutrida
comunidad de usuarios desarrolladores se han encargado de evolucionar Nvu bajo
esta nueva denominación con múltiples correcciones y parches.
Podemos descargar KompoZer este es la URL: https://kompozer.net/download/. No requiere

instalación, basta con descomprimirlo en una carpeta y ejecutarlo, aunque sí deberemos instalar el
paquete de idiomas en español como se explica en el sitio.
53
El entorno de KompoZer
Vamos a echar un vistazo al entorno del editor KompoZer, y ver cómo realizamos con él las acciones
más comunes.
El aspecto general es el siguiente:
❖ En la parte superior encontramos la barra de título, donde se ve el título de la hoja.
Debajo, encontramos una barra de menús, desde la que podemos acceder a todas las opciones del
programa. Las opciones más comunes, como Guardar, Nuevo, o insertar Enlaces o Imágenes las
encontramos en la llamada barra de redacción:
❖ Debajo de esta barra, encontramos las barras de formato, pensadas para formatear el documento.
Normalmente no utilizaremos estos formatos, ya que todo lo referente al estilo lo trabajaremos

directamente sobre la hoja de estilos. Pero si encontramos dos desplegables muy interesantes. El
primero, que en la imagen muestra Texto en el cuerpo, nos permite elegir el elemento que contienen
el texto que escribimos, por ejemplo: un encabezado o un párrafo. El segundo, que en la imagen
54
muestra (sin clase) nos permite asignar una clase al texto. Si seleccionamos un fragmento de texto,
y le asignamos una clase, encerrará el texto en una etiqueta <span> con la clase dada.
❖ En la parte central, encontramos el área de edición, donde podemos editar el contenido de nuestra página.
Podemos tener varias abiertas en distintas pestañas.
La forma en que podemos ver y trabajar con la página, depende del modo de edición, de los cuatros
disponibles en la parte inferior:
• Normal. Con este modo, vemos el diseño de la página como se mostraría en un navegador.
Aunque aparecen algunas marcas más, como información de la ubicación de algunas etiquetas
especiales, como comentarios y scripts, y líneas rojas punteadas en los bordes de tablas y
divisiones.
• El modo Etiquetas HTML funciona como el anterior, pero mostrando en cada etiqueta un
cuadradito amarillo con su identificador.
• El modo Código fuente nos permite trabajar directamente sobre el código fuente de la página.
• El modo Vista preliminar, muestra la página como se vería en un navegador, sin ninguna marca
adicional.
También podemos ver el resultado en nuestro navegador predeterminado pulsando la tecla F5.
❖ En la parte inferior, en la barra de estado, encontramos una barra que muestra la jerarquía de etiquetas que
hay sobre el lugar donde está el punto de inserción.
Es decir, lo que aquí vemos son todas las etiquetas que contienen a lo que tenemos seleccionado,
desde la más inmediata a la derecha del todo, a la primera, que suele ser el <body>.
Esto nos permite seleccionar cualquier etiqueta y todo su contenido sólo haciendo clic sobre ella.
55
Si hacemos clic derecho sobre una etiqueta, aparece un menú con opciones muy útiles:
▪ Seleccionar hace lo mismo que la hacer clic sobre la etiqueta.
▪ Eliminar etiqueta borra la etiqueta, pero no su contenido. Muy útil,
por ejemplo, para quitar un span.
▪ Cambiar etiqueta, sustituye una etiqueta por otra sin lateral si
contenido. Por ejemplo, podemos cambiar un párrafo por un
encabezado.
▪ ID muestra una lista de los ID que utilicemos en nuestros estilos, y
nos permite asignárselos a un elemento.
▪ Clases, como con ID, muestra las clases disponibles y nos permite
asignarlas al elemento. Además, nos muestra la clase ya asignada a
un elemento, pudiendo quitarla.
▪ Estilos en línea. Nos permite definir el estilo del elemento, para lo que creará el atributo style.
▪ Propiedades avanzadas. Accedemos a una ventana en la que podemos ver todos los atributos del
elemento y sus valores, editarlos, eliminarlos o añadir nuevos. También podremos definir el estilo
incrustado.
Podemos mostrar u ocultar todas estas barras a través del menú Ver → Mostrar / Ocultar.
Opciones de configuración
Vamos a cambiar algunas de las opciones que vienen por defecto en KompoZer antes de comenzar a
crear nuestras páginas.
La ventana de Opciones es accesible a través del menú Herramientas → Preferencias.... La ventana

aparece dividida en cuatro secciones:
En General, nos aseguraremos de que está marcada la opción Usar estilos CSS
en lugar de elementos y atributos HTML.
En Config. Nuevas páginas, si no lo está, en Conjunto de caracteres,

seleccionaremos Occidental (ISO-8859-1).
En Avanzado, vamos a cambiar las siguientes opciones:
• En la sección Marcado, vamos a configurar el Lenguaje como XHTML1

y el DTD como Estricto. Si quieres saber qué es esto y qué es el Doctype,
consulta este avanzado.
• Nos aseguraremos de que está marcada la opción Dentro de un párrafo,

pulsar Enter lo cierra y crea uno nuevo.
56
• En Mostrar los siguientes caracteres como entidades, seleccionaremos Los anteriores y las
letras Latin-1, para que, al introducir caracteres, como letras acentuadas, KompoZer los
sustituya por la entidad correspondiente.
Esto no quiere decir que debamos de seleccionar estas opciones para poder crear una página, pero son
las que utilizaremos en el curso.
Crear y guardar una página
Para crear una nueva página, basta con pulsar el botón . Esto creará una página.
Con las opciones que hemos configurado, el código de la página tendrá este aspecto
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type" />
<title></title>
</head>
<body>
<br />
</body>
</html>
Cuando realicemos cambios en la página, y no los hayamos guardado, aparecerá un pequeño icono en
la pestaña
Para guardar los cambios, podemos pulsar la combinación de teclas Ctrl + S, o el botón .
La primera vez que guardemos la página, deberemos indicar el título que le queremos dar (el contenido
de la etiqueta title en la cabecera), y su ubicación.
Escribir texto en KompoZer

La forma de escribir el texto, utilizar el teclado, etc. es la misma que con cualquier editor de texto.
Es importante saber en qué elemento estamos escribiendo. Normalmente lo haremos dentro de párrafos
y encabezados, incluso en divisiones. Esto podemos seleccionarlo en el primer desplegable de la barra
de herramientas. En otras ocasiones, utilizaremos otros elementos como listas o tablas. Recuerda, que
siempre puedes saber en qué etiqueta estamos mirándolo en la barra de estado.
57
Nota: En este curso crearemos páginas XHTML Estrict, que no permiten escribir directamente sobre el
cuerpo del documento, hay que utilizar párrafos.
A la hora de escribir dentro de un párrafo, cuando pulsemos la tecla Intro crearemos un salto de línea.
Esto se debe a que cerramos el párrafo y comenzamos uno nuevo, porque así lo hemos elegido en las
opciones. Si lo que queremos es crear un salto dentro del párrafo, lo que equivaldría a una etiqueta html
del tipo <br />, tenemos que mantener pulsada la tecla Mayúsculas (Shift) mientras pulsamos
Entrar/Enter.
Hojas de estilo en KompoZer

Ya vimos cómo podemos definir un estilo incrustado para el elemento. Vamos a ver ahora como crear
y definir una hoja de estilo.
Todo lo referente a la hoja de estilo, se gestiona utilizando el Editor CSS, accesible a través del botón
Crear o adjuntar una hoja de estilo
Desde la ventana del editor, pulsamos sobre el desplegable de arriba a la

izquierda, y seleccionamos Elem. enlace, ya que una hoja es eso, un archivo
externo que se enlaza.
58
La zona de la derecha cambiará como se ve en la imagen:
Si ya tenemos creada la hoja, solo tenemos que seleccionarla pulsando en Escoja archivo. Si la hoja aún
no existe, basta con introducir el nombre que queramos, para crear una hoja en la misma carpeta que la
página. En ambos casos, pulsamos en Crear hoja de estilos. Si no existía aún, el archivo no se creará
hasta que no definamos algún estilo. Para cerrar la ventana, pulsamos Aceptar.
Con esto, lo que hemos hecho realmente es incluir en la cabecera de la página la llamada a la hoja de
estilo. Puedes comprobarlo en la vista Código fuente.
Definir y editar un estilo
Podemos definir un estilo desde el mismo Editor CSS, pero seleccionando en el

menú la opción Regla.
59
Lo primero que tendremos que elegir será el selector que queremos utilizar. Podemos seleccionar una
de las opciones, según el tipo de selector, pero es más cómodo escribir directamente el selector que nos
interesa, por ejemplo body; o .miclase; o div#principal p... etc, cualquier selector válido.
Cuando lo tengamos, pulsamos en Crear regla de estilo. Nos encontraremos con una serie de
pestañas:
La pestaña General nos permite editar el estilo directamente, escribiendo propiedades y valores. El
resto de pestañas se refieren a categorías de propiedades, y en ellas podremos definir el estilo de forma
gráfica, lo que puede resultarnos más cómodo e intuitivo.
Los distintos selectores que definamos, aparecerán "colgando" de la hoja de estilo, en el panel de la
izquierda, para que podamos editarlos. Si queremos borrar el estilo seleccionado, debemos pulsar el
icono , y para cambiar el selector pulsamos en . Para editar las propiedades del estilo, no tenemos
más que cambiar lo que queramos en las distintas pestañas.
60
Por ejemplo, la categoría de Texto tiene el siguiente aspecto:
Podemos elegir el tipo de letra o fuente desde los desplegables, así como el color, tamaño y otras
características.
En la parte inferior de la ventana podemos previsualizar el aspecto del texto según los valores que
hayamos elegido.
Para elegir un color para el texto podemos escribir su valor en el campo Color o hacer clic en el botón
de la derecha para que se abra una ventana donde podremos seleccionar el color deseado.
61
Nota: La versión que hemos utilizado durante este curso (0.7.10) tiene un fallo o “bug”, que se produce
si intentamos definir estilos para varios selectores sin aceptar los cambios. Por eso, recomendamos
definir el nuevo selector y su estilo, aceptar los cambios, y volver a abrir el editor CSS para crear el
siguiente estilo.
Instrucciones
Conforme a la lectura previa, identifica y selecciona la respuesta que consideres correcta sobre
como publicar sitios web.
1. ¿Qué creamos con un editor web?

a) El código HTML y CSS de nuestra página.
b) Una imagen del aspecto de la página.
c) La página de verdad, como se verá, sin código fuente.
d) La parte de la página que no podemos crear con un editor de texto.
2. ¿Qué es un editor WYSIWYG?

a) Un editor de páginas web con caracteres orientales.
b) Un editor que nos permite trabajar con la página viéndola como se verá en un navegador.
c) Un editor que sólo nos sirve para editar el código fuente, aunque formateado con colores.
d) Un editor que no trabaja con el código fuente.
62
3. ¿Qué ventajas tiene escribir el código fuente directamente?
a) Que es más rápido hacer las páginas.
b) Que no requerimos de programas de pago.
c) Que nos da mayor control sobre el código, y nos ayuda a aprender.
d) Ninguna, ya nadie hace páginas web así.
4. ¿Cuál de estas afirmaciones sobre KompoZer no es cierta?

a) Es un editor web gratuito.
b) Es un editor WYSIWYG.
c) Permite programación avanzada, como acceder a bases de datos.
d) Permite crear hojas de estilo.
5. ¿Qué editor mínimo necesitamos para crear nuestra página?

a) El más avanzado que podamos encontrar, y si podemos, uno de pago.
b) Realmente no necesitamos un editor complejo, podríamos crear la página con el bloc de notas o
programas similares.
c) Cualquiera que incluya un editor especializado en CSS.
6. Una de las ventajas de KompoZer es que vemos la página exactamente como se verá en el navegador.
a) Sí, es uno de los pocos editores que lo consiguen
b) Sí, aunque no es exactamente igual, y siempre habrá que ver la página con los principales navegadores
c) No, porque aunque sí nos la muestra, no nos permite trabajar con ella.
d) No, KompoZer no tiene esta funcionalidad.
7. Al escribir texto en un editor como KompoZer...

a) Al pulsar intro/Enter, cerrará el párrafo actual y comenzará uno nuevo.
b) Cambiará los caracteres especiales por la entidad HTML correspondiente, si asi lo hemos puesto.
c) Podremos cambiar el tipo de encabezado eligiéndolo de un menú.
d) Todas las opciones son ciertas.
8. Para definir una regla de estilo CSS en KompoZer...

a) Hemos de escribir cada propiedad y su valor manualmente.
b) Tenemos un editor CSS en el cual aparecen todas las propiedades.
c) Sólo podemos crear estilos incrustados en la propia página.
d) KompoZer no nos permite trabajar con estilos.
63
Actividad 9
➢ Atributo (s): 4.5 Maneja las tecnologías de la información la comunicación para obtener información
expresar ideas.
5.1 Sigue instrucciones y procedimientos de manera reflexiva, comprendiendo como cada uno de
sus pasos contribuye al alcance de un objetivo.
5.6 Utiliza las tecnologías de la información comunicación para procesar e interpretar información.
8.1 Propone maneras de solucionar un problema o desarrollar un proyecto en equipo, definiendo
un curso de acción con pasos específicos.
➢ Conocimiento (s): Publicar sitio web.
Lectura previa
PUBLICAR SITIO WEB

Una vez tenemos terminada nuestra página web sólo queda publicarla en Internet para hacerla accesible
a los millones de internautas de todo el mundo. Hoy en día nos parece normal que cualquier persona
del planeta pueda ver nuestras páginas web en Internet, pero hasta la década de 1990 a nadie se le
hubiera ocurrido soñar que sería tan fácil y tan barato poder comunicarse con tanta gente.
Básicamente para publicar hace falta tener acceso a un servidor de Internet y disponer de una forma de
subir los archivos al servidor. También es conveniente saber lo que es un dominio de Internet y cómo
hacer que nuestra página sea encontrada por los buscadores.
Pero si lo que te interesa es simplemente escribir en Internet y no te atrae la parte técnica o informática,
lo más adecuado es utilizar los blogs gratuitos como Blogger o WordPress.com, que ofrecen un buen
servicio gratuito y son sencillos de usar para montar un blog de casi cualquier cosa sin apenas
conocimientos. Pero por ejemplo no te dejan poner publicidad que tu desees limitando la publicidad a
la que las propias empresas gestionan y con ciertas limitaciones que pueden no interesarte.
Introducción
La práctica habitual es diseñar las páginas web de nuestro sitio web en el disco duro del equipo para
luego enviarlos al servidor web junto con los archivos multimedia referenciados (imágenes,
animaciones, audios, etc). A este proceso se le llama publicación web. Mediante este procedimiento se
pone a disposición de cualquier usuario con acceso a Internet las páginas web del centro o proyecto al
pasar a estar alojadas físicamente en un ordenador servidor con acceso permanente desde Internet.
La subida de archivos desde el equipo local al servidor se puede realizar mediante un programa que
utiliza el protocolo FTP (File Transfer Protocol = Protocolo de Transmisión de Archivos). Esta
transferencia de archivos se realiza en modo autentificado, es decir, introduciendo un nombre de
usuario y contraseña para evitar que otras personas puedan publicar en nuestro espacio web.
64
En consecuencia, antes de afrontar la tarea de publicación será necesario obtener los siguientes datos
del administrador del servidor web:
• Dirección del servidor FTP: Es la URL del servidor que atiende peticiones de conexión por FTP
para la subida de archivos. Si el servidor web es del CNICE puede ser uno de estos:
roble.pntic.mec.es, ficus.pntic.mec.es, centros5.pntic.mec.es, etc. Si es Yahoo será:
ftp.es.geocities.com
• Usuario y Contraseña: Son los datos de la cuenta que es necesario introducir para realizar una
subida autentificada de recursos y que estos recursos se alojen en la ubicación correcta del
servidor.
• Dirección del servidor HTTP: Es la URL del servidor web que nos permitirá acceder a nuestras
páginas usando el navegador web. Ejemplo: http://roble.pntic.mec.es/usuario/
También podemos publicar en un servidor local instalado en nuestro ordenador, de esta forma
podremos probar las páginas dinámicas sin subirlas a Internet, por ejemplo, mediante WAMP
o XAMPP podemos instalar un entorno con el servidor APACHE, PHP, MySQL en
Windows. Para Linux XAMPP o LAMP.
Servidores
Para que tu página se vea desde Internet simplemente tiene que estar almacenada en un servidor de
Internet. Es decir, debes disponer de espacio en un servidor para poder subir tus archivos, donde
cualquiera pueda verlos.
Cualquiera puede tener un servidor de Internet, sólo hace falta un ordenador, una dirección IP fija, una
conexión telefónica y un software adecuado, como el servidor Apache, que además es gratuito. Esto
explica el gran crecimiento inicial de Internet. Han surgido miles de servidores que comparten su
información por el simple gusto de aprender y enseñar. Y muchos más que esperan hacer negocio en la
red.
De todas formas, crear un servidor tiene cierta complejidad y se sale del ámbito de este curso, además
necesitarías una conexión permanente a Internet y un ordenador con el servidor web en funcionamiento
las 24 horas del día.
Para acceder a un servidor de Internet hay dos alternativas, buscar un servidor gratuito o contratar uno
de pago. Para empezar, puede servir un servidor gratuito, pero para cosas más serias es conveniente
utilizar un servidor de pago.
65
a) Servidores gratuitos.
Podemos diferenciar dos alternativas gratuitas:
• Sitios especializados. Existen algunos sitios web especializado en ofrecer espacio gratuito como
LucusHost, Tripod, SW Hosting, Galeon, 000Webhost, etc. La mayoría colocarán publicidad en las
páginas alojadas. Los servidores gratuitos pueden imponer restricciones en el uso de ciertas
instrucciones de programación web y no te permiten cambiar la configuración del servidor. Cada
vez es más difícil encontrar servidores gratuitos con un mínimo de calidad. Google Sites es un caso
aparte.
Algunos proveedores anuncian servidores gratuitos, pero al leer el contrato con detalle podemos
encontrar condiciones como que sólo es gratuito el primer mes, que hay que tener un número
mínimos de visitas, etc.
También hay que destacar que la mayoría de servidores gratuitos no admiten el uso de páginas
dinámicas ni bases de datos.
• Proveedores de acceso. Cuando contratas un servicio de conexión a Internet a través de un

proveedor, suelen ofrecer de forma gratuita un espacio web en sus servidores. Si ya tienes contratada
una conexión a Internet, revisa las condiciones porque probablemente tienes derecho a un espacio
gratuito en el servidor.
Ventajas y desventajas de alojar tu web en un hosting gratuito

Como todo en esta vida, el alojamiento web gratuito tiene un lado positivo y otro negativo y para
que los conozcas, te los contamos a continuación.
Ventajas
• No tiene ningún coste: obvio, pero como no deja de ser su principal virtud (y casi la única) es
imposible no decirla.
• Perfecto para hacer pruebas: o para proyectos amateurs que no tengan ninguna aspiración.
• Sin barreras de entrada: No tienes excusa para decir que no tienes por dónde empezar. Puedes
hacer pruebas con él y más delante decidir si te lanzas a un hosting profesional.
Desventajas
• Poco tiempo online: no es que el servicio dure poco y tengas que cambiar de proveedor de
forma constante, pero los servidores son más inestables y, por tanto, tu web está menos tiempo
online. Esto es un problema muy habitual en los servicios de hosting gratuitos ya que,
obviamente, la empresa que te cede el hosting gratuito lo hace con la esperanza de que, en
algún momento, te conviertas en un cliente de pago. Esto no tiene porqué ser necesariamente
malo. Puedes ‘probar’ el servicio y si empiezas a tener tráfico y necesitas más recursos ya tienes
todo montado en sus servidores así que lo más seguro es que te conviertas en su cliente de
pago. Por eso mismo el hosting gratuito está pensado para que falle y se caiga cuando el sitio
Web crezca lo suficiente como para convertirse en uno de pago.
66
• Sin marcas patrocinadoras: un hosting gratuito incluso vende el espacio disponible a los
banners del espacio que te ofrecen gratuitamente, a empresas de terceros por lo que ni siquiera
ellos tienen control sobre la publicidad que se va a mostrar en tu sitio Web. Esto puede ser un
problema si, por ejemplo, en tu página hablas sobre tecnología, pero la publicidad que se
muestra son juguetes para bebés o si no quieres que se muestre ningún banner de publicidad,
ya que no tendrás control o beneficio sobre ello.
• Limitaciones muy altas: tanto de ancho de banda como de espacio web, lo que se traduce en
que, ante cualquier mínimo pico de visitas, tu sitio se cae.
• Poca ayuda ante problemas: ya que en algunos hostings ni siquiera cuentan con servicio
técnico y los que lo tienen, desde luego que no destacan por su calidad.
• Velocidad de carga lenta: debes olvidarte de que tu sitio cargue rápido si lo alojas en un
hosting gratuito. Y, por tanto, de que Google te de mejores posiciones.
• Sin dominio: Algunas de estas soluciones tampoco permiten que uses tu propio dominio
para gestionar el espacio que te ofrecen de manera gratuita, por lo que tendrás que conformarte
con subdominios del tipo: http://TuSitio.NombreDelHost.com. No como en la mayoría de
alojamientos de pago, donde la compra incluye el registro de un dominio. Aquí tendrás que
pagar por él.
• Sin garantías: Pero la mayor desventaja del hosting gratuito es que no sabes cuándo puede
terminar. Las empresas pueden decidir cambiar de estrategia en cualquier momento, o incluso
dejar de existir, por lo que todo tu sitio Web puede dejar de existir en un instante sin que
puedas hacer nada por remediarlo. Cualquier proyecto medio serio no debería elegir la opción
de un hosting gratuito.
b) Servidores de pago.
Si quieres tener un lugar más profesional donde colocar tus páginas o las de tu empresa puedes
utilizar los servicios de empresas especializadas que por menos dinero de lo que piensas te ofrecen
muchos servicios, prueba a visitar Arsys, hostgator, hostinger, , Bluehost o Alojalia y ver sus
condiciones y tarifas.
Los servidores pueden ser de dos tipos básicos, compartidos o dedicados. Un servidor compartido
(shared hosting) es aquel que comparte máquina física con otros servidores compartidos. En un
servidor dedicado una máquina física soporta un solo servidor dedicado.
En un servidor compartido no se te permiten cambiar completamente la configuración del servidor,

ni hacer reinicios físicos de la máquina, mientras que un servidor dedicado puedes hacer todo lo que
quieras puesto que el servidor está completamente a tu disposición. Inicialmente es preferible un
servidor compartido ya que es más asequible y ofrece prácticamente todos los servicios que son
necesarios para un uso particular o profesional. Un servidor dedicado es conveniente para un sitio
web con muchas visitas o si se requiere una configuración muy especial del servidor.
Los servidores ubicados en EE.UU. ofrecen más recursos por el mismo precio, pero con el
inconveniente de la atención al cliente en inglés: lista de los mejores (https://websitesetup.org/best-
web-hosting-sites/).
67
A la hora de contratar un servidor ten en
cuenta que es importante la velocidad con
la que las páginas se cargan en Internet y
no todos ofrecen la misma velocidad de
transferencia o ancho de banda. Algunos
servidores ofrecen "espacio ilimitado" pero
en realidad quieren decir "espacio
suficiente" para la mayor parte de los
usuarios.
También es importante fijarse en las

condiciones del servicio de atención al
cliente que ofrecen los distintos
proveedores.
Hosting de Pago, Ventajas y Desventajas

Por supuesto, un hosting gratuito no puede darte lo mismo que uno de pago. Si bien parece que es
lo mismo en realidad no es así. Un hosting de pago te dará más recursos, más espacio, más memoria,
más número de conexiones y más soporte técnico que uno gratuito.
Un servicio que ofrece el hosting de pago son las copias de seguridad que los gratuitos no ofrecen.
Esto puede parecer no muy importante al principio, pero cuando lleves meses trabajando en tu sitio
Web, sólo de pensar que todo puede perderse por un descuido, te hace cambiar de opinión
rápidamente.
El soporte técnico también es algo muy importante, sobre todo si no tienes amplios conocimientos
en hosting. El saber que no estás sólo ante el peligro y que cuentas con un grupo de técnicos
especializados para ayudarte a resolver cualquier problema que tenga tu sitio Web es algo que puede
convertirse en imprescindible.
Hay que tener en cuenta que la caída de un hosting, es decir, que no esté accesible a los usuarios,
puede durar muchas horas o tardar días en solucionarse. Es posible que esto no te importe mucho al
principio, pero créeme que será tan importante para ti como el respirar.
Con un hosting de pago las caídas temporales de servicio suelen ser anecdóticas, llegando a
porcentajes de actividad del 99,9%. Además, cualquier cambio o desconexión temporal del servidor
por cualquier motivo es anunciado con anterioridad para que nunca te tome por sorpresa.
68
Dominios de Internet
Hoy en día, tanto las empresas como los autónomos no pueden casi arreglárselas sin una página web
propia. Una página de empresa es un recurso importante si quieres aumentar tu volumen de ventas,
conseguir nuevos clientes o presentar productos de forma eficaz. Incluso en ámbitos privados se crean
cada vez más páginas web para poder compartir una afición con otras personas.
Un servidor web necesita disponer de un dominio de Internet para que se

pueda acceder a él en la forma http://www.nombre_dominio.com. Por
ejemplo, si quieres disponer del sitio web http://www.dibujosdemotos.com
deberás contratar el registro del dominio "dibujosdemotos.com" (siempre que
alguien no lo haya registrado antes).
Los dominios hay que contratarlos en un registrador autorizado por un

periodo de tiempo determinado. Las empresas que ofrecen alojamiento
también suelen ofrecer registro de dominios.
Por lo general, los particulares constan de un presupuesto más bajo que el de las empresas para la
creación de una página web. Incluso entre autónomos, empresas emergentes y multinacionales existen
diferencias. Aunque sí hay una cosa que tienen en común: necesitan un dominio para su página para
que los usuarios puedan acceder de alguna manera a ella. Hay direcciones de Internet clasificadas en
diferentes tipos de precios, ¿pero por qué?
¿Por qué hay diferencias de precios en los dominios?
Es cierto que el Sistema de Nombres de Dominio, en inglés “Domain Name System” (DNS), es decir,
las extensiones de los dominios, gozan de una reputación diferente. Esto se refleja de igual manera en
el precio. Mientras que extensiones como .com pertenecen a las extensiones de dominios más populares,
poco a poco otros TLD nuevos van apareciendo.
Por último, existen también diferentes proveedores de dominios, cuya diferencia de precios no es
generalmente evidente, pero si es cierto que muchos de ellos tienen ofertas especiales cada cierto
tiempo. Es cierto que el precio no es el único factor para la elección de un proveedor de dominios, pero
merece definitivamente la pena comparar diferentes proveedores.
Para que puedas entender por lo que estás pagando, aquí tienes una explicación breve sobre el formato
de un dominio: cada dominio está compuesto por componentes diferentes, que juntos dan como
resultado lo que técnicamente se llama un Fully Qualified Domain Name (FQDN). Si echas un vistazo
a la línea del navegador, el dominio empieza (de izquierda a derecha) después del protocolo (por lo
general https://), a lo que le siguen:
• Dominio de tercer nivel: subdominio, se refiere a una subsección, en su mayoría para páginas
web de www
• Dominio de segundo nivel: nombre del dominio, lo puedes elegir libremente, contiene
normalmente el nombre de la marca o del proyecto web
69
• Domino de nivel superior: extensión del dominio, los TLD son limitados, se diferencian dos
tipos:
o Los dominios de nivel superior por código de país (ccTLDs): son específicos para cada
país o región, por ejemplo, .mx, .us o .eu
o Los dominios genéricos de nivel superior (gTLDs): son genéricos; hacen referencia a
áreas temáticas, por ejemplo, .com, .org o .edu
Si vas a comprar un dominio, elige uno de nivel superior o de segundo nivel, ya que los subdominios,
por norma general, pueden elegirse libremente.
Los servidores gratuitos suelen ofrecer subdominios de la forma

http://www.servidor_gratuito.com/tu_subdominio, de forma que no necesitas registrar ningún
dominio ya que los subdominios no se registran.
Subir archivos al servidor

Lo normal es desarrollar nuestro sitio de forma local, es decir, en nuestro propio equipo. Pero una vez
conseguimos un servidor, gratuito o de pago, tenemos que subir a él todos nuestros archivos.
Hay varias opciones a la hora de subir los archivos al servidor:
• Utilizar un programa específico para ello como el Filezilla (gratuito).
Se trata de un cliente FTP. Para transferir ficheros por FTP se necesita tener instalado un programa
cliente de FTP en nuestro ordenador y conocer la dirección del servidor FTP con el que queremos
conectar. Nuestra dirección nos la proporcionará la empresa con la que tengamos el alojamiento.
Una vez conectado, los programas FTP tienen un interfaz bastante simple. Básicamente, nos
muestran los archivos de nuestro equipo a un lado, y los del servidor a otro. Con lo que no
tenemos más que arrastrar y soltar archivos de un lado a otro.
La principal ventaja del FTP, a parte de su comodidad, es que nos permite subir varios archivos y
carpetas enteras a la vez, sin tener que ir uno por uno.
• Utilizar un editor de páginas web que incorpore esta funcionalidad. Por ejemplo, el Dreamweaver.
Algunos editores profesionales incorporan el acceso FTP. Esto que nos permite subir y descargar
los archivos cómodamente usando el interfaz del editor. Además, nos permiten tenerlos
sincronizados, e ir subiendo automáticamente aquellos archivos que vayamos actualizando.
• Utilizar las facilidades proporcionadas por la empresa de hosting.
Realmente no necesitamos ninguno de los programas anteriores, aunque casi siempre sean de
mejor calidad. Toda empresa de hosting nos proporciona un interfaz a través del que subir
archivos al servidor. Este interfaz depende de la empresa. Los de alojamientos gratuitos suelen
ser bastantes simples, permitiéndonos subir unos pocos archivos cada vez a través de un
formulario web. Esto resulta muy tedioso si tenemos que subir un sitio completo de tamaño
medio. Los alojamientos de pago suelen tener un mejor servicio. Algunos implementan un
interfaz muy completo (WebFTP) que realmente puede sustituir al cliente FTP.
70
Obtener visitantes
Una vez tengas tu página en Internet te interesará que la visiten muchas personas (sobre todo si te lo
planteas como un negocio). Para ello lo fundamental es que la página tenga contenido interesante, buen
diseño y se actualice periódicamente.
Además de lo anterior aún hay algunas otras cosas que se pueden hacer para conseguir más visitas y
que vamos a detallar a continuación.
Los visitantes llegan por primera vez a una página web de dos formas básicas, una es a través de los
buscadores y la segunda a través de enlaces que los internautas encuentran en otras páginas. No hay
una estadística oficial de la importancia de cada vía de acceso, pero se estima que es más importante a
través de los buscadores, en torno a un 80-90%, aunque inicialmente los enlaces tienen más importancia
porque sin ellos no podremos subir puestos en los buscadores.
Para conseguir visitas provenientes de los buscadores hay que utilizar técnicas de posicionamiento y
para conseguir visitas desde otras páginas hay que conseguir enlaces. Aunque ambas están
relacionadas, ya que cuantos más enlaces tengamos, mejor apareceremos en los buscadores, y viceversa.
Aunque algunos se empeñan en decir que las técnicas de posicionamiento e intercambios influyen
mucho en el número de visitas recibidas (y cobran mucho dinero por aplicarlas) en realidad lo más
importante es el contenido de la web, ya que, con un buen contenido, los propios buscadores te incluyen
automáticamente en sus buscadores en una buena posición y los webmasters incluyen enlaces a tu
página sin pedírselo. Esto no quiere decir que no haya que utilizar estas técnicas, sino que su
importancia es relativa y supeditada al contenido de la página.
❖ Posicionamiento.
Fundamentalmente nos vamos a referir al posicionamiento en el buscador Google, porque es el más

utilizado y porque los demás buscadores se basan en cosas similares para ordenar sus resultados.
Cuando una persona introduce una o varias palabras claves en un buscador, éste realiza complejos
procesos para obtener una lista de resultados con las páginas que mejor responden a esa búsqueda.
Estos procesos son secretos y los buscadores sólo dan una información general de los factores que
influyen en los resultados. Esto es así por dos motivos, el primero para que la competencia no los copie
y el segundo para que los creadores de las páginas no hagan trampas para obtener mejores posiciones.
Además, según unos van descubriendo los entresijos de los buscadores, los otros los van cambiando
para penalizar a los tramposos. Al final, desde el punto de vista del creador de páginas web, se impone
el sentido común, y lo mejor es dedicarse a mejorar en contenido en lugar de andar bordeando el límite
de lo permitido en técnicas de posicionamiento.
Después de estos preámbulos, vamos ya con las técnicas de posicionamiento.
Hay que decir que conseguir buen posicionamiento es una tarea que requiere bastante tiempo, hasta las
dos o tres semanas no se ven los primeros resultados y hacen falta varios meses para empezar a ver
realmente el lugar que le corresponde a nuestro sitio web. Hay que tener en cuenta que, dado el gran
número de páginas existentes, a los robots de los buscadores (también conocidos como arañas o crawlers)
les lleva bastantes días encontrar las páginas nuevas.
71
1. Contenido de calidad. Como ya hemos dicho éste es el factor primordial para obtener un buen
posicionamiento. Sin contenido de calidad no hay nada que hacer, con contenido de calidad lo
demás viene rodado. Contenido de calidad quiere decir contenido interesante, bien redactado y
con diseño agradable. Una página con un buen contenido y mal posicionamiento tardará más
en alcanzar una buena posición, pero lo conseguirá.
2. Sitio bien estructurado y sencillo. Para los robots de Google cuanto más fácil sea extraer la
información de la página tanto mejor. Hay que colocar suficientes enlaces de texto y con las
palabras clave adecuadas y huir de las excesivas florituras y virguerías técnicas.
3. Lograr enlaces desde otros sitios web. El factor de más peso en el PageRank de Google es el
número y la calidad de los enlaces que apuntan a nuestro sitio. Informa de la existencia de tu
página a todo el mundo, principalmente a los sitios de temática similar. En el punto siguiente
daremos más información sobre este tema.
4. Alta en Google. El primer paso para conseguir una buena posición en Google es aparecer en el
buscador. Para hacerlo visita esta página: addurl.
5. Infórmate de las reglas de los buscadores y no te las saltes, si lo haces y te penalizan perderás
muchos meses para recuperar tu posicionamiento. En esta página tienes información sobre las
directrices de calidad de Google.
6. Sobre el diseño de la página ten en cuenta estas recomendaciones, si utilizas demasiado Flash,
frames, DHTML, JavaScript y mucha programación web harás más difícil el trabajo de los robots.
Es conveniente utilizar títulos cortos y claros, con los estilos de encabezados (h1, h2). Los títulos
son fundamentales en las búsquedas, procura utilizar el sinónimo más común, por ejemplo,
coches, vehículos, autos, automóviles, carros. Hay herramientas para ver cuáles son las palabras
más buscadas. Google no reconoce el texto incluido en imágenes, no utilices imágenes para los
títulos ni para los enlaces principales del sitio web. Si utilizas imágenes, usa el atributo ALT para
poner el texto relevante.
7. Dar de alta en directorios importantes como Dmoz. Aunque han perdido importancia todavía
son una forma de conseguir enlaces.
8. Para conocer las palabras clave más usadas hay herramientas como la proporcionada por Google
AdWords. Con ella podemos ver la relevancia de palabras clave y las búsquedas que se han
hecho con esas palabras.
9. Enlazar las páginas desde el propio sitio web de forma bien estructurada.
10. Informar a Google de las actualizaciones con Sitemaps.
Hay algunas recomendaciones que son contradictorias, por ejemplo, los enlaces con html son mejor
indexados por los robots que los incluidos en funciones javascript, pero los menús con javascript son
más intuitivos para los usuarios y mejoran el diseño de la página.
72
Como resumen podríamos decir que todas las técnicas de posicionamiento se resumen en dos, la
primera es que generes contenido de calidad y la segunda que utilices las técnicas con sentido común y
sin hacer trampas.
❖ Conseguir enlaces.
1. Como venimos diciendo, la mejor forma de conseguir que otros webmasters enlacen nuestra
página es creando una página con contenido y diseño de calidad, así los webmasters
considerarán que poner un enlace a nuestra página es algo útil para sus visitantes.
2. Dar a conocer nuestro sitio web. Esta tarea es muy importante, sobre todo en una primera fase,
ya que es casi la única forma de conseguir enlaces. Conseguir enlaces es realmente difícil por lo
que no queda otro remedio que invertir tiempo y esfuerzo en ello. Hay que buscar sitios de
temática similar y registrarse, participar en las actividades, contestar preguntas en los foros,
aportar algo de forma que luego podamos pedir a los demás usuarios y al webmaster que visiten
y recomienden nuestro sitio. En función de la temática de nuestro sitio deberemos buscar
participar en determinados lugares como Foros, Blogs, Directorios, Redes sociales, etc.
3. Intercambios de enlaces. Buscar sitios web de temática similar al nuestro y comprobar si tienen
una sección de intercambio de enlaces, si es así escribirles y proponerles un intercambio. Lo
lógico es que los intercambios se realicen entre sitios de un Page Rank similar, por lo cual, al
principio hay que dirigirse a sitios con un PageRank bajo ya que en otro caso será difíicil que
acepten el intercambio. Según vaya aumentando nuestro PageRank podremos solicitar
intercambios con sitios más importantes.
4. Amigos. Si conocemos a personas relacionadas con el mundo de las páginas web hay que
comunicarles nuestro nuevo sitio web. Por supuesto, también debemos intentarlo con nuestros
amigos del ciberespacio, hay muchas redes sociales, por ejemplo Hi5, Facebook, Orkut, con
cientos de comunidades en las cuales podemos participar y obtener visitas de nuestros nuevos
"amigos".
Para conocer el Page Rank de una web, puedes instalar la barra de Google, visitar sitios especializados,
o con herramientas como Seo Quake
Publicidad
Una vez tenemos publicada nuestra página en Internet y conseguidos muchos visitantes puede ser
interesante incluir publicidad en ella. De forma mucho más sencilla de lo que pudiera parecer se pueden
poner anuncios comerciales y conseguir dinero. La cantidad de dinero es proporcional al número de
visitantes de la página.
Hay diferentes sistemas de publicidad en páginas web que, a efectos de este curso, agruparemos en
estas categorías: publicidad contextual, publicidad directa, publicidad por registro y publicidad por
agencia.
• La publicidad contextual es un sistema que inserta de forma automática publicidad relacionada con
el contenido de la página web, por ejemplo, si la página habla de deporte, se insertarán anuncios de
anunciantes relacionados con el deporte. Cada vez que un usuario hace clic en un anuncio el propietario
73
de la página recibe una cantidad de dinero que varía según cada anuncio. El sistema más popular de
publicidad contextual es AdSense de Google, y lo vamos a ver más en detalle a continuación.
• La publicidad directa es la que el propietario de la página acuerda directamente con el anunciante,

en función del tipo de publicidad y del número de visitantes se pacta el precio. Una variante de este
tipo de publicidad es el patrocinio mediante el cual una empresa o entidad paga una cantidad al mes
por aparecer como patrocinador de la página. Existen programas gratuitos que permiten gestionar este
tipo de publicidad contabilizando los clics.
• La publicidad por registro o afiliación se basa en pagar por cada registro o venta que produzca el
anuncio, a diferencia de la publicidad contextual que paga cada vez que el usuario hace clic en el
anuncio, independientemente de lo que pase después. Es decir, en la publicidad por registro o venta el
sistema controla si el usuario que hace clic acaba registrándose o comprando el producto anunciado, y
en caso afirmativo el propietario de la página web recibe la comisión pactada previamente. Estos
sistemas se basan en guardar una cookie apuntándose número IP, en el ordenador del usuario cuando
este hace clic en el anuncio, y comprobando luego si, en un plazo determinado de días, el usuario acaba
comprando el producto o registrándose en la tienda on-line. En estos sistemas se ofrecen altas
comisiones, pero el número conversiones de clics en registros o compras son bajos. Ejemplos de este
tipo de publicidad son la publicidad que ofrecen los casinos on-line, TradeDoubler también tiene una
sección con este tipo de publicidad.
• La publicidad por agencia está reservada al sector empresarial, al contrario que los otros sistemas
que hemos visto anteriormente y que pueden ser utilizados por autores de páginas web particulares.
Las agencias de publicidad en internet gestionan los anuncios de los grandes medios de comunicación
y de empresas importantes.
❖ AdSense de Google.
Como decíamos, este es el sistema más extendido de publicidad contextual y vamos a verlo con más
detenimiento. Hay otros sistemas que tienen un funcionamiento muy similar, como Yahoo,
Tradedoubler.
AdSense es un sistema que supuso en el momento de su nacimiento para los pequeños webmasters o
propietarios de páginas web un incremento de hasta cinco veces en las ganancias que se estaban
consiguiendo hasta ese momento. Como consecuencia, algunos de ellos se pudieron dedicar
profesionalmente a crear páginas web, aumentando la competitividad en un mundo hasta ese momento
bastante "amateur" o de aficionados, lo cual trajo consigo un aumento de la calidad o de la
comercialidad, según se quiera ver.
Los sistemas de anuncios que prometen grandes ingresos suelen resultar, al final, poco satisfactorios.
Los formatos más usuales de publicidad son el banner, el anuncio de texto, anuncios multimedia y
anuncios incrustados en los vídeos.
También se puede poner publicidad en los dispositivos móviles.
El sistema AdSense es utilizado por propietarios de páginas web (webmasters) y se encarga de mostrar
anuncios de empresas (anunciantes) que quieren hacer publicidad en Internet.
74
Los anunciantes utilizan el sistema AdWords para contratar con Google su publicidad. Simplificando
un poco podemos decir que los anunciantes no saben "a priori" donde se van a mostrar sus anuncios y
los webmasters no saben qué anuncios se van a mostrar en sus páginas. Google se encarga de colocar
cada anuncio en las páginas que mejor se le adapten, y cuando un usuario hace clic en un anuncio cobra
al anunciante y paga al webmasters, por supuesto, quedándose una comisión.
Si se muestra un anuncio y nadie hace clic, ni el anunciante paga ni el webmaster cobra. Esto no es así
en otros sistemas de publicidad donde se paga y cobra por mostrar el anuncio, independientemente de
si el usuario hace clic o no.
Decidir qué anuncio se muestra y en qué página no es un asunto trivial y Google tiene en cuenta varios
factores para establecer una subasta instantánea entre las páginas y los anuncios de forma que se
optimice el proceso para las tres partes implicadas. Uno de los factores que se usa es el contenido de la
página, de forma que los anuncios tengan relación con las páginas, así es más probable que el usuario
haga clic en el anuncio que es de un tema que le interesa, por esto a este tipo de publicidad se le llama
contextual.
Este sistema (AdSense-AdWord) es la pieza fundamental que explica por qué Google a logrado en tan
pocos años ser una de las grandes empresas de informática del mundo, ya que antes de implantar este
sistema Google tenía un buscador que usaba mucha gente, pero no generaba apenas dinero.
AdSense es un sistema que puede ser utilizado tanto por pequeños webmasters como por grandes
empresas, es sencillo de utilizar y no hace falta estar dado de alta como una empresa o un autónomo
para usar AdSense. Es necesario poseer un dominio de internet y tener acceso a un servidor. Una vez
dado de alta sólo hay que elegir uno de los formatos de anuncios disponibles, según el lugar de la página
donde vamos a incluirlo y copiar el código generado por AdSense en dicho lugar. A los pocos minutos
AdSense empezará a registrar los clics que realicen los visitantes de nuestra página y podremos
comprobar el dinero generado mediante diferentes herramientas proporcionadas por el sistema.
La pregunta es ¿Cuánto dinero puedo ganar con AdSense? y la respuesta es fácil y poco precisa:
depende de los clics que los usuarios hagan en los anuncios. Esto, a su vez, depende de varias cosas, la
más importande es el número de visitantes de la página, pero también influye la calidad de la página
ya que un mismo anuncio puede producir diferentes ingresos en una página o en otra. La calidad de la
página la determina Google según varios parámetros que tienen en cuenta la importancia de la página,
el diseño, la historia de la página dentro de AdSense, etc.
El dato más manejado para medir las ganancias de una web es el eCPM (Coste por mil impresiones
efectivo). Según Google, para los sitios grandes, el eCPM varía entre 0,05 y 5,0 USD, si tomamos el valor
medio 2,52 quiere decir que por cada mil páginas que vean nuestros usuarios ganaremos 2,52 USD (1,7
euros). Para los sitios pequeños quizás el eCPM varíe entre 0,10 y 0,40 euros.
Con estos datos puedes realizar una estimación de lo que puedes ganar con tu web, conociendo el
número de impresiones de páginas, ingresos = (impresiones x eCPM) / 1000. Por ejemplo, si tienes un
millón de impresiones de páginas en un mes, y suponemos un valor medio del eCPM de 0,25 euros para
un sitio pequeño, los ingresos serían (1.000.000 x 0.25 ) /1000 = 250 euros al mes.
Hay un míinimo de dinero al que hay que llegar para recibir el pago, el mínimo para España en 2009
anda sobre 70 euros. En AdSense se pueden poner anuncios de contenido, que son los más normales, y
también anuncios de búsqueda, así como anuncios para móviles. En una página además de los anuncios
75
de AdSense, también se pueden poner otro tipo de anuncios, aunque tampoco es recomendable poner
excesiva publicidad porque el usuario se puede enfadar y no volver más.
Instrucciones
1. Conforme a la lectura previa, identifica y selecciona la respuesta que consideres correcta

sobre como publicar sitios web.
1. ¿A qué llamamos publicar una página web?

a) A una vez acabada, enviar correos a nuestros contactos con la página.
b) A hacer que sea accesible a través de Internet.
c) A permitir que cualquiera pueda hacer modificaciones en la página.
2. Podemos poner a nuestro sitio cualquier dominio que se nos ocurra, siempre que usemos la terminación
(.es, .co, .mx)
a) Verdadero.
b) Falso.
3. Para subir archivos a un servidor, normalmente podemos...

a) Utilizar un cliente FTP.
b) Subir archivos a través de un formulario web.
c) Cualquiera de las anteriores, si están disponibles.
4. ¿A qué se denomina posicionamiento web?

a) A la posición que ocupa nuestra web en el ranking general.
b) Al tipo de diseño empleado en una página web.
c) A la importancia que tiene un sitio para un buscador al realizar una búsqueda por determinadas palabras.
d) A las veces que el sitio aparece en la lista del buscador.
5. ¿Qué es indexar un sitio web?

a) Crear un índice con la estructura de nuestro sitio.
b) Colocar la página index.html en la raíz del sitio.
c) Dar de alta nuestra página en Google.
d) Que un buscador revise nuestra página, siguiendo todos sus enlaces, y guardándola para buscar en ella.
6. ¿Por qué es importante tener enlaces a nuestra página?

a) Porque así aparecemos mejor posicionados.
b) Porque los buscadores podrán acceder a nuestra página.
c) Porque pueden traernos visitantes.
d) Todas las anteriores son ciertas.
76
7. ¿Para los buscadores, importa la temática del sitio que enlaza al nuestro?
a) Sí, es más valioso un enlace de un sitio de la misma temática.
b) Sí, pero hace que el enlace sea menos valioso.
c) No, sólo importa es la cantidad de enlaces.
d) No, porque no podemos controlar quiénes nos enlazan.
8. ¿Qué es la publicidad contextual?

a) La que está formada por enlaces de texto.
b) La que se inserta disimulada en el texto, como si fuesen enlaces normales.
c) La que se muestra relacionada con el contenido de la página.
d) La que se pacta directamente con el anunciante.
9. ¿Qué páginas pueden mostrar publicidad de AdSense?

a) Solo las grandes compañías.
b) Sólo los blogs que emplean Blogger, que también pertenece a Google.
c) Sólo páginas de la misma temática que AdSense
d) En principio cualquier página, salvo que Google no la crea adecuada.
10. En publicidad web, ¿qué es el pago por clic?

a) Son anuncios a pantalla completa, que el usuario debe de ocultar haciendo clic en una esquina.
b) Que se cobra sólo si los visitantes pulsan sobre el anuncio.
c) Que se cobra sólo si el visitante compra algún producto del anunciante.
d) Es una forma de llamar a la publicidad web en general.
77
BIBLIOGRAFÍA
Anciano, J. T. (2016). Manual de Introducción al lenguaje HTML. Formación para el Empleo. Editorial CEP, S.L.
aulaClic S.L. (Enero de 2010). Unidad 13. Publicar. Recuperado el 20 de Noviembre de 2021, de
https://www.aulaclic.es/paginas-web/t_13_1.htm
aulaClic S.L. (Enero de 2010). Unidad 4. Editor Web. Recuperado el 28 de Octubre de 2021, de
https://www.aulaclic.es/paginas-web/t_4_1.htm
B., G. (s.f.). ¿Qué es un hosting y cómo funciona? Recuperado el 25 de Octubre de 2021, de

https://www.hostinger.mx/tutoriales/que-es-un-hosting
Delgado, H. (2012). Elementos básicos de un sitio Web y sus partes. Recuperado el 31 de Octubre de 2021, de
https://disenowebakus.net/elementos-de-un-sitio-web.php
Galera, T. G. (s.f.). Introducción al editor KompoZer. Recuperado el 25 de Octubre de 2021, de

https://recmestreacasa.gva.es/webzip/b6150f0d-f569-496f-9fcc-ef98c5250bf9/index.html
GOMEZ, A. R. (2013). Computación dinámica II: Excel 2013, HTML, Dreamweaver. GRUPO EDITORIAL EXODO.
Hostcupon.com. (29 de Junio de 2021). Los 10 mejores hostings gratis para iniciarte en el mundo de las páginas web sin
invertir dinero. Recuperado el 29 de Noviembre de 2021, de https://www.hostcupon.com/hosting-gratis/
Hostinet S.L.U. (2003). ¿Hosting Gratuito o Hosting de Pago? Recuperado el 28 de Noviembre de 2021, de
https://www.hostinet.com/formacion/hosting-alojamiento/hosting-gratuito-o-hosting-de-pago/
IONOS España S.L.U. (15 de Abril de 2021). ¿Cuánto cuesta un dominio web? Consejos para planificar tu presupuesto.
Recuperado el 22 de Noviembre de 2021, de https://www.ionos.es/digitalguide/dominios/consejos-sobre-
dominios/cuanto-cuesta-un-dominio-web/
IONOS España S.L.U. (14 de Mayo de 20219). Dominios: conceptos básicos. Recuperado el 20 de Noviembre de 2021, de
https://www.ionos.es/digitalguide/dominios/consejos-sobre-dominios/que-es-un-dominio/
Luna, A. C. (2014). Creación de páginas web. Málaga : ICB.
Pujols, W. M. (s.f.). Conceptos básicos para la creación de una pagina web. Recuperado el 25 de Octubre de 2021, de
https://clasew.jimdofree.com/conceptos-b%C3%A1sicos-de-una-pagina-web/
Sanchez, H. (2 de Noviembre de 2021). Todos los Elementos de Una Página Web y Sus Partes. Recuperado el 2021, de
https://www.cualhost.com/marketing-en-linea/elementos-de-una-pagina-web-exitosa/
Universidad de Valencia. (2008). Conceptos básicos. Recuperado el 16 de Noviembre de 2021, de

https://www.uv.es/fragar/html/html0101.html
Universidad de Valencia. (2008). El entorno de Kompozer. Recuperado el 4 de Noviembre de 2021, de

Universidad de Valencia. (2008). Kompozer. Recuperado el 2 de Noviembre de 2021, de

78

TICS 4to SEMESTRE - Submódulo 1. - Páginas Web

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

TICS 4to SEMESTRE - Submódulo 1. - Páginas Web

Cargado por

Copyright:

Formatos disponibles

CUA DERN ILLO DE

Mtra. Yolanda Loría Marín

Lic. Mario Velázquez George

Mtra. Cindy Jazmín Cuellar Ortiz

M. E. Asunción Tzec Pat

Lic. Miguel Fernando Magaña Galan

Mtro. Manuel Alejandro Mex Mena

Mtro. Adrián Gamael Trejo Uco

Estimada y estimado estudiante:

Si bien es cierto la pandemia continúa, ello no representa un impedimento para no

El contenido de este Material didáctico del estudiante, te permitirá continuar con tu

Te invito a no bajar la guardia en lo académico y en el cuidado de tu salud. Trabaja

Dr. Rafael Romero Mayo

La capacitación para el trabajo: Tecnologías de la Información y Comunicación se encuentra

Aunado a lo anterior, la capacitación tiene como propósito: desarrollar las competencias y

La enseñanza de la capacitación Tecnologías de la Información y Comunicación en la formación

El presente cuadernillo de actividades de la asignatura de “Submódulo 1.- Páginas Web.” se

Esta modalidad de aprendizaje es autónoma por lo que te recomendamos dedicar un horario

Como recomendación final, te pedimos que en la medida de tus posibilidades te mantengas

1. Es un documento o información electrónica capaz de contener texto, sonido, vídeo,

4. Es una colección de páginas web relacionadas y comunes a un dominio de internet o

5. Es una computadora de gran potencia que se encarga de “prestar el servicio” de

9. Es una aplicación diseñada con el fin de facilitar la creación y edición de documentos

12. Es un lenguaje que define la apariencia de un documento escrito en un lenguaje de

13. es un software, aplicación o programa que permite el acceso a la Web, interpretando la

14. Protocolo de comunicación que permite las transferencias de información a través de

Introducción al diseño web

¿Qué es una página Web?

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

¿Para qué sirve una página Web?

Las páginas Web también permiten la interacción con el usuario.

Tipos de página Web

Páginas Web estáticas. Operan mediante la descarga de un fichero programado en código

Las páginas Web requieren de un navegador Web para ser utilizadas.

HTML: (Lenguaje de marcado de hipertexto) Lenguaje estándar de marcas empleado para

Hipervínculo: Al hipervínculo se le suele llamar "enlace web" o en su versión anglosajona

Dominio: Dirección web asociada a una página web.

URL: (Universal Resource Location / Localizador de recursos universal) Cadena que

Tablas: Elemento para distribuis uniformemente y de forma tabulada información en una

Nombre: ________________________________ Fecha:________________ Puntuación: ____________

1. Contesto correctamente que es un Hipervínculo

2. Contesto correctamente que es HTTP

3. Contesto correctamente que es una Página web

4. Contesto correctamente que es un Navegador

5. Contesto correctamente que es el Dominio

6. Contesto correctamente que es HTML

7. Contesto correctamente que es un página estática

8. Contesto correctamente que es un Servidor

9. Contesto correctamente que es el Hosting

10. Contesto correctamente que es un Editor

Elementos que componen una página Web

Diseño web creativo, ordenado y fácil de navegar

Web hosting (Espacio web donde se almacena la información de la página)

Un elemento cada vez más importante. La comercialización de nuevos dispositivos digitales

Una imagen fija o animada utilizada generalmente para publicidad.

1. Escribe dentro del recuadro una F si la afirmación es Falso o un V si es verdadero.

Un Diseño web creativo permitirá que el usuario se sienta cómodo y permanezca

El nombre de dominio es la primera parte de una dirección Web que identifica al

El texto constituye un elemento esencial para ofrecer información visual del

Actividad 1 – Elementos básicos de una página web

Nombre: ________________________________ Fecha:________________ Puntuación: ____________

1. Determino como verdadero que un Diseño web creativo permite que el

Nombre: ____________________ Fecha: Puntuación:

Nombre: ____________________ Fecha: Puntuación: