CAPACITACIÓN DESARROLLO DE SOFTWARE

MODULO No. II PROGRAMACIÓN WEB

II. Programación Web
GUIA DEL ESTUDIANTE

DATOS DEL ESTUDIANTE

Nombre______________________________
Plantel ____________ Grupo _____ Turno
 COLEGIO DE BACHILLERES DE TABASCO
MTRO. ERASMO MARTÍNEZ RODRÍGUEZ
Director General

C.P. SONIA LÓPEZ IZQUIERDO

Directora Académico

DRA. GISELLE OLIVARES MORALES

Subdirectora de Planeación Académica

MTRA. GABRIELA RUIZ BECERRA

Jefe de Departamento de Capacitación para el Trabajo

CAPACITACIÓN DESARROLLO DE SOFTWARE

MÓDULO IV. PROGRAMACIÓN WEB

SUBMÓDULO II ROGRAMACIÓN WEB

EDICIÓN. OCTUBRE 2020.

En la realización del presente material participaron:

Mtro. René Talavera Ruz
Dra. Nancy Virginia Alvarez Camacho
Mtro. Miguel Ángel Martínez de la Cruz
Mtro. Alexander Martínez Hernández
Mtro. Francisco de la Cruz López

Revisado por:

Mtro. René Talavera Ruz

Dra. Nancy Virginia Álvarez Camacho

Este material fue elaborado bajo la coordinación y supervisión de la Dirección Académica del
Colegio de Bachilleres del Estado de Tabasco [Link]

2
 Tabla de Contenido.
Contenido
Fundamentación....................................................................................................................... 5
Enfoque de la Capacitación. ...................................................................................................... 8
Ubicación de la Capacitación ................................................................................................... 10
Mapa de la Capacitación TICS.................................................................................................. 11
Evaluación por competencias .................................................................................................. 12
Competencias Genéricas ......................................................................................................... 14
COMPETENCIAS ...................................................................................................................... 18
Temario.................................................................................................................................. 19
Encuadre de la materia. .......................................................................................................... 22
Submódulo II. Programación Web ........................................................................................... 23
Situación Didáctica ................................................................................................................. 24
Evaluación Diagnostica ........................................................................................................... 26
Lectura No 1. Conceptos básicos páginas web y sitios web ....................................................... 28
Actividad 1. Crucigrama de Páginas Web y Sitios Web ............................................................. 35
Lectura No 2. Elementos de un Página Web ............................................................................. 37
Actividad 2. Lo Más Básico de una Web ................................................................................... 41
Lectura No 3. Estándares de Diseño Web (W3C) ...................................................................... 42
Lectura No 4. La Estructura de la Web ..................................................................................... 48
Actividad 3. Estructurando Mi Página Web .............................................................................. 55
Practica 1. Mi Primer Página Web ........................................................................................... 57
Lectura No 5. Elementos Básicos Títulos, Hipervínculos y Videos .............................................. 60
Actividad 4. Aprendo a Identificar Los Elementos Básicos: Títulos, Párrafos, Imágenes,
Hipervínculos, Videos, Sonidos................................................................................................ 66
Practica 2. Elaboras una Página Web con Elementos Básicos .................................................... 68
Practica 3. Mejorando Mi Página Web ..................................................................................... 71
Lectura No 6. Estilos: Fuente, Tamaño y Colores ..................................................................... 74
Practica 4. Enchulando Mi Web ............................................................................................... 80
Lectura No 7. Uso de Tablas en HTML ...................................................................................... 84

3
Practica 5. Tablas en HTML ..................................................................................................... 91
Lectura No 8. Uso de Clases, Menús y Formularios en HTML .................................................... 96
Actividad 5. Clases, Menús y Formularios Parte 1 .................................................................. 110
Practica 6. Uso de Clases, Menús y Formularios ..................................................................... 113
Lectura No 9. ¿Qué es JavaScript? ......................................................................................... 117
Actividad 6. ¿Qué es JavaScript? ........................................................................................... 124
Lectura No 10. Instrucciones en JavaScript ............................................................................ 125
Actividad 7. Instrucciones en JavaScript ................................................................................ 142
Ejemplo Guiado .................................................................................................................... 143
Lectura No 11. Condiciones y Ciclos ....................................................................................... 147
Actividad 8. Condiciones y Ciclos ........................................................................................... 160
Actividad 8. Condiciones y Ciclos ........................................................................................... 161
Actividad 10. Mi Página Enciclada ......................................................................................... 169
Practica 7. Usando JavaScript en Mi Página Web ................................................................... 177
Lectura No 11. ¿Cómo Publico Mi Página Web? ..................................................................... 181
Actividad 11. Publicando la Página Web Parte 1 .................................................................... 194
Practica 8. Publicando Mi Página Web ................................................................................... 196
Situación Didáctica ............................................................................................................... 196
Bibliografía ........................................................................................................................... 200
Anexos ................................................................................................................................. 201
APUNTES O NOTAS ............................................................................................................... 201

4
 Fundamentación.
Teniendo como referencia el actual desarrollo económico, político, tecnológico y cultural de México,
la Dirección General del Bachillerato dio inicio a la Actualización de Programas de Estudio integrando
elementos tales como los aprendizajes claves, contenidos específicos y aprendizajes esperados que
atienden al Nuevo Modelo Educativo para la Educación Obligatoria. Además de conservar el
enfoque basado en competencias, hacen énfasis en el desarrollo de habilidades socioemocionales
y abordan temas transversales tomando en cuenta lo estipulado en las políticas educativas vigentes.
Considerando lo anterior, dicha actualización tiene como fundamento el Programa Sectorial de
Educación 2013 2018, el cual señala que la Educación Media Superior debe ser fortalecida para
contribuir al desarrollo de México a través de la formación de hombres y mujeres en las
competencias que se requieren para el progreso democrático, social y económico del país, mismos
que son esenciales para construir una nación próspera y socialmente incluyente basada en el
conocimiento. Esto se retoma específicamente del objetivo 2, estrategia 2.1., en la línea de acción
r,

Asimismo, este proceso de actualización pretende dar cumplimiento a la finalidad esencial del
ra síntesis personal y
social que le permita acceso a la educación superior, a la vez que le dé una comprensión de su
[1], así
como los objetivos del Bachillerato General que expresan las siguientes intenciones formativas:
ofrecer una cultura general básica: que comprenda aspectos de la ciencia; de las humanidades y de
la técnica a partir de la cual se adquieran los elementos fundamentales para la construcción de
nuevos conocimientos; proporcionar los conocimientos, los métodos, las técnicas y los lenguajes
necesarios para ingresar a estudios superiores y desempeñarse de manera eficiente, a la vez que se
desarrollan las habilidades y actitudes esenciales sin que ello implique una formación técnica
especializada para la realización de una actividad productiva socialmente útil.
El Componente de Formación Profesional aporta al estudiantado elementos que le permiten
iniciarse en diversos aspectos del sector productivo, fomentando una actitud positiva hacia el
trabajo y en su caso, su integración al mismo. Los módulos que conforman este programa son el
resultado del trabajo colegiado con personal docente que imparte esta capacitación en los
diferentes subsistemas coordinados por esta Dirección General, quienes brindan su experiencia y
conocimientos buscando responder a los diferentes contextos existentes en el país, así como a la
formación de una ciudadanía socialmente útil, para que el estudiantado cuente con la opción de
iniciar una ruta laboral que le promueva una proyección hacia las diferentes modalidades laborales.
Aunado a ello, en virtud de que la Educación Media Superior debe favorecer la convivencia, el
respeto a los derechos humanos y la responsabilidad social, el cuidado de las personas, el
entendimiento del entorno, la protección del medio ambiente, la puesta en práctica de habilidades
productivas para el desarrollo integral de los seres humanos, la actualización del presente programa
de estudios, incluye temas transversales que según Figueroa de Katra (2005)[2], enriquecen la labor
formativa de manera tal que conectan y articulan los saberes de los distintos sectores de aprendizaje
que dotan de sentido a los conocimientos disciplinares, con los temas y contextos sociales,
culturales y éticos presentes en su entorno; buscan mirar toda la experiencia escolar como una
oportunidad para que los aprendizajes integren sus dimensiones cognitivas y formativas,
favoreciendo de esta forma una educación incluyente y con equidad.

5
De igual forma, con base en el fortalecimiento de la educación para la vida, se abordan dentro de
este programa de estudios los temas transversales, mismos que se clasifican a través de ejes
temáticos de los campos Social, Ambiental, Salud y Habilidad Lectora como en el componente
básico, con la particularidad de que se complementen con características propias de la formación
para el trabajo. Dichos temas no son únicos ni pretenden limitar el quehacer educativo en el aula,
ya que es necesario tomar en consideración temas propios de cada comunidad, por lo que el
personal docente podrá considerar ya sea uno o varios, en función del contexto escolar y de su
pertinencia en cada submódulo.
Eje transversal Emprendimiento: se sugiere retomar temas referentes a la detección de
oportunidades y puesta en práctica de acciones que contribuyen a la demostración de
actitudes tales como iniciativa, liderazgo, trabajo colaborativo, visión, innovación y
creatividad promoviendo la responsabilidad social.
Eje transversal Vinculación Laboral: se recomienda abordar temas referentes a la realización
de acciones que permiten al estudiantado identificar los sitios de inserción laboral o
autoempleo.
Eje transversal Iniciar, Continuar y concluir sus estudios de nivel superior: se recomienda
abordar temas referentes a los mecanismos que permiten al estudiantado reflexionar sobre
la importancia de darle continuidad a sus estudios superiores.

Asimismo, otro aspecto importante que promueve el programa de estudios es la

interdisciplinariedad entre asignaturas del mismo semestre, en donde diferentes disciplinas se
conjuntan para trabajar de forma colaborativa para la obtención de resultados en los aprendizajes
esperados de manera integral, permitiendo al estudiantado confrontarse a situaciones cotidianas
aplicando dichos saberes de forma vinculada.
Por otro lado, en cada submódulo se observa la relación de la competencias genéricas y
profesionales básicas, los conocimientos, las habilidades y actitudes que darán como resultado los
aprendizajes esperados, permitiendo llevar de la mano al personal docente con el objetivo de
generar un desarrollo progresivo no sólo de los conocimientos, sino también de aspectos
actitudinales.
En ese sentido, el rol docente dentro del proceso de enseñanza aprendizaje, tiene un papel
fundamental, como lo establece el acuerdo Secretarial 447, ya que el profesorado que imparte el
componente de formación profesional, es quien facilita el proceso educativo al diseñar actividades
significativas que promueven el desarrollo de las competencias (conocimientos, habilidades y
actitudes); propicia un ambiente de aprendizaje que favorece el conocimiento social, la
colaboración, la toma responsable de decisiones y la perseverancia a través del desarrollo de
habilidades socioemocionales del estudiantado, tañes como la confianza, seguridad, autoestima,
entre otras, propone estrategias disciplinares y transversales en donde el objetivo no es la
formación de técnicas en diferentes actividades productivas, sino la promoción de las diferentes
competencias profesionales básicas que permitan a la población estudiantil del Bachillerato General
tener alternativas para iniciar una ruta a su integración laboral, favoreciendo el uso de herramientas
tecnológicas de la información y la comunicación; así como el diseño de instrumentos de evaluación
que atiendan al enfoque por competencias.

6
Es por ello que la Dirección General del Bachillerato a través del Trabajo Colegiado busca promover
una mejor formación docente a partir de la creación de redes de gestión escolar, analizar los
indicadores del logro académico del estudiantado, generar técnicas exitosas de trabajo en el aula,
compartir experiencias de manera asertiva, exponer problemáticas comunes que presenta el
estudiantado respetando la diversidad de opiniones y mejorar la práctica pedagógica, donde es
responsabilidad del profesorado; realizar secuencias didácticas innovadoras a partir del análisis de
los programas de estudio, promoviendo el desarrollo de habilidades socioemocionales y el abordaje
de temas transversales de manera interdisciplinar; rediseñar las estrategias de evaluación y generar
materiales didácticos.
Finalmente, este programa de estudios brinda herramientas disciplinares y pedagógicas al personal
docente, quienes deberán, a través de los elementos antes mencionados, potenciar el papel de los
educandos como gestores autónomos de su propio aprendizaje, promoviendo la participación
creativa de las nuevas generaciones en la economía, en el ámbito laboral, la sociedad y la cultura,
reforzar el proceso de formación de la personalidad, construir un espacio valioso para la adopción
de valores y el desarrollo de actitudes positivas para la vida.

[1] Diario Oficial de la Federación (1982). México.

[2] Figueroa de Katra, L. (2005). Desarrollo curricular y transversalidad. Revista Internacional
Educación Global, Vol. 9. Guadalajara, Jalisco, México. Asociación Mexicana para la Educación
Internacional. Recuperado de:
[Link]

7
 Enfoque de la Capacitación.
La capacitación de Desarrollo de Software pertenece al campo disciplinar Comunicación, que tiene
como fin desarrollar en el estudiantado las habilidades comunicativas, verbales y no verbales para
que se expresen a través de diversos códigos y herramientas del lenguaje por medio de los
diferentes lenguajes de programación. Estos lenguajes de programación se vinculan de forma
interdisciplinar con el campo de Matemáticas y con el de Comunicación, al aportar mediante la
programación la solución de diversas problemáticas.
El propósito general de la capacitación de Desarrollo de software es: Evalúa estrategias para el
desarrollo de software, identificando, clasificando y diseñando softwares mediante diversos
lenguajes de programación, para mejorar su entorno, demostrando consciencia social y
responsabilidad ante las problemáticas de su contexto.
El uso de los lenguajes de programación en esta capacitación demuestra el manejo en forma
avanzada de dichos lenguajes para la solución de diversas problemáticas de la vida cotidiana y del
contexto, con un desarrollo metodológico, creativo y comunicativo en pro del beneficio personal y
social.
La capacitación de Desarrollo de software busca que el estudiantado desarrolle las competencias
profesionales en el desarrollo de sistemas y aplicaciones para Internet y celular, en donde también
se desarrollan las competencias genéricas, la interdisciplinaridad y los ejes transversales de
vinculación laboral, emprendimiento y la continuación de sus estudios a nivel superior.
El contenido de la capacitación de Desarrollo de software se divide en cuatro módulos, impartidos
a partir del tercer semestre con una carga de 7 horas semanales, cada módulo se integra por dos
submódulos en los que se busca desarrollar en el estudiantado la creación de programas con
características avanzadas, utilizando C++, Java, Visual .NET, así como la creación de aplicaciones
móviles y juegos, además de diseño y programación en robótica, esto con el fin de desarrollar
software con bases de datos y creación de páginas web comunicando ideas e información en el
entorno laboral y escolar.
El Módulo I. Programación básica, el estudiantado revisará sistemas de información mediante
software de programación de alto nivel.
El Módulo II. Programación web, en este apartado se analizará la creación de bases de datos y sitios
web mediante el software de programación adecuado.
El Módulo III. Aplicaciones para web, el estudiantado utilizará software de aplicación y elementos
multimedia para crear sitios web.
El Módulo IV. Aplicaciones móviles, en este apartado se construirá soluciones para aplicaciones
móviles y juegos, así como propuestas para robótica básica respetando su arquitectura y anatomía.
Todas las competencias mencionadas hacen posible en el egresado tener los conocimientos,
técnicas, métodos y lenguajes necesarios en el desarrollo de software para ingresar a estudios
superiores y desempeñarse de forma eficiente, además de desarrollar las habilidades y actitudes
necesarias para la realización de una actividad productiva socialmente útil como auxiliar en áreas
de desarrollo de software en diferentes instituciones públicas o privadas.

8
La Capacitación de Desarrollo de software en la formación para el trabajo del estudiantado está
basada en las Normas Técnicas de Competencia Laboral (NTCL) del Consejo Nacional de
Normalización y Certificación de Competencias Laborales (CONOCER), son una necesidad para
cumplir con las exigencias del mundo actual y de los sectores productivos, porque hoy en día se
exige tener trabajadores calificados, capaces de desarrollar en todo momento las áreas de la
organización en la cual están inmersos, promoviendo los productos o servicios en el entorno
nacional o internacional, proporcionando las herramientas y técnicas que son básicas para los
egresados del nivel medio superior, que les va a permitir vencer todas las fronteras e incorporarse
al mundo globalizado por medio de la programación, así como de las Tecnologías de la información
y del conocimiento

UINF0947.01 Operar las herramientas de cómputo en ambiente de red.

EC0835 Ejecución de software con codificación de comandos y datos orientada a objetos.
EC0160 Desarrollo de código de software.

9
Ubicación de la Capacitación

10
Mapa de la Capacitación TICS

11
 Evaluación por competencias
Con base en el Acuerdo 8/CD/2009 del comité Directivo del Sistema Nacional de Bachillerato,
denominado Padrón de Buena Calidad del Sistema Nacional de Educación Media Superior (PBC
SINEMS), la evaluación es un proceso continuo que permite recabar evidencias pertinentes sobre el
logro de aprendizajes del estudiantado tomando en cuenta la diversidad de estilos y ritmos, con el
fin de realimentar el proceso de enseñanza aprendizaje y mejorar sus resultados.
De igual manera, el Modelo Educativo para la Educación Obligatoria (SEP 2017) señala que la
evaluación es un proceso con el objetivo de mejorar el desempeño del estudiantado e identificar
sus áreas de oportunidad. Además, es un factor que impulsa la transformación de la práctica
pedagógica y el seguimiento de los aprendizajes.
Para que la evaluación sea un proceso transparente y participativo donde se involucre al personal
docente y al estudiantado, debe favorecerse:
La autoevaluación. En la cual el bachiller valora sus capacidades con base a criterios y
aspectos definidos con claridad por el personal docente, quien debe motivarle a buscar que
tome conciencia de sus propios logros, errores y aspectos a mejorar durante su aprendizaje.
La coevaluación. Por medio de la cual los estudiantes pertenecientes al grupo valoran,
evalúan y realimentan a un integrante en particular respecto a la presentación de evidencias
de aprendizaje, con base en criterios, consensuados e indicadores previamente
establecidos.
La heteroevaluación. La cual es un juicio emitido por el personal docente sobre las
características del aprendizaje del estudiantado, señalando las fortalezas y aspectos a
mejorar, teniendo como base los aprendizajes logrados y evidencias específicas.

Para evaluar por competencias, se debe favorecer el proceso de formación a través de:
La evaluación diagnóstica. La cual se realiza antes de algún proceso educativo (curso,
secuencia o segmento de enseñanza) para estimar los conocimientos previos del
estudiantado, identificando sus capacidades cognitivas con relación al programa de estudios
y apoya al personal docente en la toma de decisiones para el trabajo en el aula.
La evaluación formativa. Se realiza durante el proceso educativo y permite precisar los
avances logrados en el desarrollo de competencias por cada estudiante, advirtiendo las
dificultades que encuentra durante el aprendizaje. Tiene por objeto mejorar, corregir o
reajustar su avance y se fundamenta, en parte en la autoevaluación. Implica una reflexión y
un diálogo con el estudiantado acerca de los resultados obtenidos y los procesos de
aprendizaje y enseñanza que le llevaron a ello, permite estimar la eficacia de las
experiencias de aprendizaje para mejorarlas y favorecer su autonomía.
La evaluación sumativa. Se realiza al final de un proceso o ciclo educativo, considerando el
conjunto de diversas evidencias que surgen de los aprendizajes logrados.

Con el fin de que estudiantado muestre el saber hacer que subyace en una competencia, los
aprendizajes esperados permiten establecer una estrategia de evaluación, por lo tanto, contienen
elementos observables que deben ser considerados en la evaluación tales como:

12
 La participación (discurso y comunicación, compromiso, empeño e iniciativa, cooperación).
Las actividades generativas (trabajo de campo, proyectos, solución de casos y problemas,
composición de textos, arte y dramatizaciones).
Las actividades de análisis (comprensión e integración de conceptos como interpretación,
síntesis y clasificación, toma de decisiones, juicio y evaluación, creación e invención y
pensamiento crítico e indagación).

Para ello se consideran instrumentos que pueden agruparse principalmente en (Díaz Barriga, 2014):
Rúbricas: Son guías que describen las características específicas de lo que se pretende
evaluar (productos, tareas, proyectos, exposiciones, entre otras) precisando los niveles de
rendimiento que permiten evidenciar los aprendizajes logrados de cada estudiante, valorar
su ejecución y facilitar la realimentación.
Portafolios: Permiten mostrar el crecimiento gradual y los aprendizajes logrados con
relación al programa de estudios, centrándose en la calidad o nivel de competencia
alcanzado y no en una mera colección al azar de trabajos sin relación. Estos establecen
criterios y estándares para elaborar diversos instrumentos para la evaluación del
aprendizaje ponderando aspectos cualitativos de lo cuantitativo.
Lista de cotejo. Es considerada un instrumento de observación y verificación porque
permite la revisión de ciertos indicadores durante el proceso de aprendizaje, su nivel de
logro o la ausencia del mismo.

Los trabajos que se pueden integrar en un portafolio y que pueden ser evaluados a través de rúbricas
son: ensayos, videos, series de problemas resueltos, trabajos artísticos, trabajos colectivos,
comentarios a lecturas realizadas, autorreflexiones, reportes de laboratorio, hojas de trabajo,
guiones, entre otros, los cuales deben responder a una lógica de planeación o proyecto.
Con base en lo anterior, los programas de estudio de la Dirección General del bachillerato al incluir
elementos que enriquecen la labor formativa tales como la transversalidad, las habilidades
socioemocionales y la interdisciplinariedad trabajadas de manera colegiada y permanente en el
aula, consideran a la evaluación formativa como eje central al promover una reflexión sobre el
progreso del desarrollo de competencias del estudiantado. Para ello, es necesario que el personal
docente brinde un acompañamiento continuo con el propósito de mejorar, corregir o reajustar el
logro del desempeño del bachiller, sin esperar la conclusión del semestre para presentar una
evaluación final.

13
 Competencias Genéricas Clave
Se autodetermina y cuida de sí
1. Se conoce y valora a sí mismo y aborda problemas y retos teniendo en cuenta
los objetivos que persigue.
1.1. Enfrenta las dificultades que se le presentan y es consciente de CG1.1.
sus valores, fortalezas y debilidades.
1.2. Identifica sus emociones, las maneja de manera constructiva y CG1.2.
reconoce la necesidad de solicitar apoyo ante una situación que lo
rebase.
1.3. Elige alternativas y cursos de acción con base en criterios CG1.3.
sustentados y en el marco de un proyecto de vida.
1.4. Analiza críticamente los factores que influyen en su toma de CG1.4
decisiones.
1.5. Asume las consecuencias de sus comportamientos y decisiones. CG1.5.
1.6. Administra los recursos disponibles teniendo en cuenta las CG1.6.
restricciones para el logro de sus metas.
2. Es sensible al arte y participa en la apreciación e interpretación de sus
expresiones en distintos géneros
2.1. Valora el arte como manifestación de la belleza y expresión de CG2.1.
ideas, sensaciones y emociones.
2.2. Experimenta el arte como un hecho histórico compartido que CG2.2.
permite la comunicación entre individuos y culturas en el tiempo y
el espacio, a la vez que desarrolla un sentido de identidad.
2.3. Participa en prácticas relacionadas con el arte. CG2.3.
3. Elige y practica estilos de vida saludables
3.1. Reconoce la actividad física como un medio para su desarrollo CG3.1.
físico, mental y social.
3.2. Toma decisiones a partir de la valoración de las consecuencias de CG3.2.
distintos hábitos de consumo y conductas de riesgo.
3.3. Cultiva relaciones interpersonales que contribuyen a su desarrollo CG3.3.
humano y el de quienes lo rodean.
Se expresa y comunica
4. Escucha, interpreta y emite mensajes pertinentes en distintos contextos
mediante la utilización de medios, códigos y herramientas apropiados
4.1. Expresa ideas y conceptos mediante representaciones CG4.1.
lingüísticas, matemáticas o gráficas.

14
4.2. Aplica distintas estrategias comunciativas según quienes sean sus CG4.2.
interlocutores, el contexto en el que se encuentra y los objetivos
que persigue.
4.3. Identifica las ideas clave en un texto o discurso oral e interfiere CG4.3.
conclusiones a partir de ellas.
4.4. Se comunica en una segunda lengua en situaciones cotidianas CG4.4.
4.5. Maneja las tecnologías de la información y la comunicación para CG4.5.
obtener información y expresar ideas
Piensa crítica y reflexivamente
5. Desarrolla innovaciones y propone soluciones a problemas a aprtir de
métodos establecidos
5.1. Sigue instrucciones y procedimientos de manera reflexiva, CG5.1.
comprendiendo como cada uno de sus pasos contribuye al
alcance de un objetivo
5.2. Ordena información de acuerdo a categorías, jerarquías y CG5.2.
relaciones
5.3. Identifica los sistemas y reglas o principios medulares que CG5.3.
subyacen a una serie de fenómenos
5.4. Construye hipótesis y diseña y aplica modelos para probar su CG5.4.
validez
5.5. Sintetiza evidencias obtenidas mediante la experimentación para CG5.5.
producir conclusiones y formular nuevas preguntas
5.6. Utiliza las tecnologías de la información y comunciación para CG5.6.
procesar e interpretar información
6. Sustenta una postura personal sobre temas de interés y relevancia
general, considerando otros puntos de vista de manera crítica y
reflexiva
6.1. Elige las fuentes de información más relevantes para un propósito CG6.1.
específico y discrimina entre ellas de acuerdo a su relevancia y
confiabilidad
6.2. Evalúa argumentos y opiniones e identifica prejuicios y falacias CG6.2.
6.3. Reconoce los propios prejuicios, modifica sus puntos de vista al CG6.3.
conocer nuevas evidencias, e integra nuevos conocimientos y
perspectivas al acervo con el que cuenta
6.4. Estrcutura ideas y argumentos de manera clara, coherente y CG6.4.
sintética
Aprende de forma autónoma
7. Aprende por inciativa e interés propio a lo largo de la vida
7.1. Define metas y da seguimiento a sus rocesos de cosntrucción de CG7.1.
conocimiento

15
7.2. Identifica las actividades que le resultan de menor y mayor interés CG7.2.
y dificultad, reconociendo y controlando sus reacciones frente a
retos y obstáculos
7.3. Articula saberes de diversos campos y establece relaciones entre CG7.3.
ellos y su vida cotidiana

Trabaja en forma colaborativa

8. Participa y colabora de manera efectiva en equipos diversos
8.1. Propone maneras de solucionar un problema o desarrollar un CG8.1.
proyecto en equipo, definiendo un curso de acción con pasos
específicos
8.2. Aporta puntos de vista con apertura y considera los de otras CG8.2
personas de manera reflexiva
8.3. Asume una actitud constructiva, congruente con los CG8.3.
conocimientos y habilidades con los que cuenta dentro de
distintos equipos de trabajo

Participa con responsabilidad en la sociedad

9. Participa con una conciencia cívica y ética en la vida de su comunidad, región,
México y el mundo
9.1. Privilegia el diálogo como mecanismo para la solución de CG9.1.
conflictos
9.2. Toma decisiones a fin de contribuir a la equidad, bienestar y CG9.2.
desarrollo democrático de la sociedad
9.3. Conoce sus derechos y obligaciones como mexicano y miembro CG9.3.
de distintas comundiades e instituciones, y reconoce el valor de la
participación como herramienta para ejercerlos
9.4. Contribuye a alcanzar un equilibrio entre el interés y bienestar CG9.4.
individual y el interés general de la sociedad
9.5. Actúa de manera propositiva frente a fenómenos de la sociedad y CG9.5.
se mantiene informado
9.6. Advierte que los fenómenos que se desarrollan en los ámbitos CG9.6.
local, nacional e internacional ocurren dentro de un contexto
global interdependiente

16
10. Mantiene una actitud respetuosa hacia la interculturalidad y la diversidad de
creencias, valores, ideas y prácticas sociales
10.1. Reconoce que al diversidad tiene lugar en un espacio CG10.1.
democrático de igualdad de dignidad y derechos de todas las
personas, y rechaza toda forma de discriminación
10.2. Dialoga y aprende de personas con distintos puntos de vista y CG10.2.
tradiciones culturales mediante la ubicación de sus propias
circunstancias en un contexto más amplio
10.3. Asume que el respeto de las diferencias es el principio de CG10.3.
integración y convivencia en los contextos local, nacional e
internacional

11. Contribuye al desarrollo sustentable de manera crítica, con acciones

responsables
11.1. Asume una actitud que favorece la solución de problemas CG11.1.
ambientales en los ámbitos local, nacional e internacional
11.2. Reconoce y comprende las implicaciones biológicas, CG11.2.
económicas, políticas y sociales del daño ambiental en un
contexto global interdependiente
11.3. Contribuye al alcance de un equilibrio entre los intereses de corto CG11.3.
y largo plazo con relación al ambiente

17
COMPETENCIAS PROFESIONALES CLAVE
1. Descubre sistemas de información mediante la codificación y CPBDS1
compilación de instrucciones pertinentes utilizando software de
programación, de forma creativa y responsable, en diversos
ámbitos.

2. Predice sistemas de información a través de sus fundamentos, CPBDS2

utilizando software de programación que cumpla con los
requerimientos de funcionalidad y rendimiento en diferentes
contextos, siendo creativo y reflexionando sobre las
consecuencias que se deriven de su toma de decisiones.

3. Estructura bases de datos relacionadas con situaciones sociales CPBDS3

de su comunidad utilizando la programación y mostrando un
comportamiento metódico además de organizado, con la finalidad
de promover un pensamiento crítico y analítico.

4. Construye sitios web creativos y funcionales mediante software de CPBDS4

diseño web, para transmitir información a gran escala de forma
responsable y empática en diversos contextos.

5. Prueba la funcionalidad de los sitios web, acorde a las CPBDS5

necesidades y requerimientos de los usuarios, para el manejo de
datos a gran escala, actuando con eficiencia y reflexionando sobre
diferentes posturas de conducirse en el contexto.

6. Explica la creación de sitios web creativos a través de la utilización CPBDS6

de software de aplicación y elementos multimedia para la
optimización de páginas web, favoreciendo la solucion a diversas
situaciones de su entorno, actuando de manera consciente y
previniendo riesgos.

7. Recomienda soluciones mediante software de aplicación, para CPBDS7

aplicaciones móviles y juegos, relacionándose con sus semejantes
de forma colaborativa, mostrando disposición al trabajo metódico
y organizado en diferentes contextos.

8. Selecciona propuestas de robótica básica, a través de sus CPBDS8

fundamentos, arquitectura y anatomía, en cualquier ámbito,
afrontando retos y asumiendo la frustración como parte de un
proceso.

18
 Temario
¿QUE
VEREMOS ESTE
SEMESTRE?

Diseño web.
Conceptos básicos: página web, sitio, dominios, URL, hostings, applets.
Elementos de una página web.
Estándares de diseño web (W3C).

HTML y CSS.
Estructura básica de una página web: html, head, title, body.
Elementos básicos de una página web: títulos, párrafos, imágenes, hipervínculos, video,
sonidos, fuentes, tamaño, colores.
Uso de tablas, divs, clases, menús, formularios, márgenes y posición de los elementos de la
página web.
Uso de JavaScript.

Desarrollo de páginas web con software de aplicación.

Publicación de páginas web.

19
 DOSIFICACIÓN PROGRAMÁTICA
Asignatura y Clave: MODULO II. PROGRAMACIÓN WEB
Sem: 4TO Periodo :21-21B
Momento Tiempo Fecha
Bloque Conocimientos Semana Observaciones
(minutos) inicio
Apertura 100 ENCUADRE, Y
EVALUACION
DIAGNOSTICA
CONSTRUYE T
22 26
CONCEPTOS
de
150 BASICOS, PAGINAS 1ra revisión de portafolios.
Submódulo II. PROGRAMACIÓN WEB

8 marzo
WEB Y SITIO Evaluación sumativa.
de
(DOMINIO, URL,
2021
HOSTINGS, APPLETS)

100 ELEMENTOS DE UNA

PAGINA WEB

Desarrollo 100
ESTANDARES DE
DISEÑO WEB(W3C)
12 16
de abril 15 de abril. Reunión de
ESTRUCTURA BASICA 9
250 de academias
DE LA WEB:
2021
HTML,[Link]

Desarrollo 350 ELEMENTOS

BASICOS: TITULOS,
19 23
PARRAFOS,
de abril
IMÁGENES, 10
de
HIPERVINCULOS,
2021
VIDEOS, SONIDOS

Desarrollo 350 ELEMENTOS

BASICOS: 26 30
HIPERVINCULOS, de abril
11
VIDEOS, SONIDOS de
2021

20
 Desarrollo 250 03 07
ESTILOS BASICOS:
de Evaluación
FUENTES, TAMAÑO Y
12 mayo extraordinaria Intrasemestral.
COLORES
de Suspensión 05 de mayo
USO DE TABLAS
100 2021
Desarrollo 350 10 14
USO DE TABLAS,
de Evaluación
DIVS, CLASES,
13 mayo extraordinaria Intrasemestral.
MENUS,
de 10 de mayo
FORMULARIOS
2021
Desarrollo 100
MARGENES Y
17 21
POSICION DE LOS
de
ELEMENTOS DE LA
14 mayo
PAGINA WEB
de
USO DE JAVASCRIPT
250 2021

Desarrollo 350 24 28
de
USO DE JAVASCRIPT
15 mayo
de
2021
Desarrollo 150 31 de
USO DE JAVASCRIPT
mayo
PUBLICAR SITIO WEB 2da revisión de portafolios.
200 16 04 de
Evaluación sumativa.
junio de
2021
Cierre 350 07 11
PUBLICAR SITIO WEB de junio
17
de
2021
Cierre 350 14 18
de junio
ENTREGA PROYECTO 18
de
2021
Totales .

ELABORÓ: Mtro. René Talavera Ruz, Dra. Nancy Virginia Alvarez Camacho, Mtro. Miguel
Angel Martínez de la Cruz, Mtro. Alexander Martínez Hernández, Mtro. Francisco de la
Cruz López.

21
 Encuadre de la materia.
Criterios de evaluación

Situación didáctica. Puntaje

30
Actividades Puntaje
Actividad 1. Conceptos Básicos de Páginas Web. 1
Actividad 2. Edita tu Página Web. 1
Actividad 3. Estructurando Mi Página Web. 1
Actividad 4. Aprendo los elementos Básicos. 1
Actividad 5. Clases y Menús Parte 1 y Parte 2. 1
Actividad 6. ¿Qué es JavaScript? 1
Actividad 7. Instrucciones en JavaScript. 2
Actividad 8. Condiciones y Ciclos en JavaScript. 3
Actividad 9. Condiciones en Mi Página. 3
Actividad 10. Mi Página En-ciclada. 3
Actividad 11. Publicando la Página Web. 3
Total 20%
Prácticas Puntaje
Practica 1. Mi Primer Pagina Web 3
Practica 2. Elaboras una Página web con elementos básicos 3
Practica 3. Mejorando mi Pagina web 3
Practica 4. Enchulando mi Web. 3
Practica 5. Tablas en HTML. 3
Practica 6. Uso de Clases, Menús y Formularios. 3
Practica 7. Usando JavaScript en Mi Página. 3
Practica 8. Publicando Mi Página Web 4
Total 25%
Examen 20%
ConstruyeT 5%
Total 100%

22
 Submódulo II. Programación Web

Propósito del Submódulo

Crea sitios web mediante software de diseño para que sean creativos, funcionales y coadyuven en la
transmisión de información en la vida cotidiana, mostrando un comportamiento responsable y aceptando
diferentes puntos de vista.

Aprendizajes Esperados
Establece HTML y CSS, en forma creativa, para la construcción de una página web, demostrando
respeto por las opiniones de los demás y aportando ideas en la solución de problemas.
Propone el software de aplicación, demostrando su creatividad e innovación, para la
construcción de páginas web, responsabilizando de sus decisiones y de la comunicación de
información en distintos contextos

Competencias
Genéricas Profesionales
5. Desarrolla innovaciones y propone soluciones a problemas a
partir de métodos establecidos. (CG5)
5.2. Ordena información de acuerdo a categorías, jerarquías y
relaciones. (CG5.2) 3. Estructura bases de datos relacionadas con situaciones
5.6. Utiliza las tecnologías de la información y comunicación sociales de su comunidad utilizando la programación y
para procesar e interpretar información. (CG5.6) mostrando un comportamiento metódico además de
8. Participa y colabora de manera efectiva en equipos diversos. organizado, con la finalidad de promover un pensamiento crítico
(CG8) y analítico. (CPBDS3).
8.1. Propone maneras de solucionar un problema o
desarrollar un proyecto en equipo, definiendo un curso de
acción con pasos específicos. (CG8.1)

23
 Situación Didáctica
Empresa para conectarla al
Título:
Diseñar una Página Web, en equipo de 5 integrantes, que permita innovar y
fortalecer la forma en que ofertan sus productos pequeñas y medianas
Propósito: empresas de la localidad, utilizando el software Sublime Text y las
herramientas que ofrece la programación en HTML y CSS, para ser
presentada en un foro de emprendimiento.
La Automatización de la mayoría de los procesos sociales a
permitido la mejora en muchas de las actividades que antes eran
imposibles de realizar hasta hace algunos años. Esta apertura para la
implementación de procesos automatizados ha hecho que las
empresas desde el más grande consorcio hasta la pequeña tienda de
la esquina necesiten estar presentes en este constante proceso
Contexto: de actualización y adentramiento en el mundo digital, dentro de este
planteamiento los alumnos de la Capacitación de Desarrollo de
Software pueden ayudar a las Pymes o pequeños negocios de su
localidad, con el propósito de tener un mayor alcance y tener un mejor
impacto en la sociedad para que todas las personas
conozcan los productos que ofrecen.
¿Sabes que sucede al entrar a la página web?
¿Sabes en donde se almacenan las páginas web?
Conflicto
¿Cuál es la diferencia entre un sitio web y pagina web?
cognitivo ¿Qué lenguajes de programación se utilizan para crear una página
web?

24
 Instrumento de Evaluación Situación Didáctica
INSTRUMENTO DE EVALUACION
LISTA DE COTEJO
SITUACION DIDÁCTICA
DATOS GENERALES
Nombre(s) del alumno(s) Matricula(s)

Producto: Documento electrónico y/o impreso Fecha

Materia: Hoja de Cálculo Aplicado

Nombre del docente Firma del docente

VALOR OBSERVACIONES
OBTENIDO CALIF
CRITERIO INDICADORES PONDERACIÓN Y/O SUGERENCIAS
SI NO DE MEJORA
Muestra el proceso de 1
1 investigación de una pequeña o
mediana empresa de su localidad.
Identifica y ordena la información 1
2
investigada de la empresa.
Presenta un diseño innovador en 1
3 la presentación de la página web
de la empresa.
Utiliza y distribuye la estructura 1
completa de una página web
4
tomando en cuenta la
maquetación.
Aplica el uso de tablas en el 1
5
diseño de la página.
Aplica el uso de Estilos CSS en el 1
6
diseño de la página.
Se muestra la inserción de 1
7
imágenes en la página web.
Se muestra la creación de un 1
8
menú funcional en la página web
Se muestra la inserción de audio 1
9
y video en la página web.
Se publicó la página web de 1
10 forma correcta y presenta la
dirección URL.

CALIFICACION

25
 Instrucciones: Lee cuidadosamente los siguientes cuestionamientos y
selecciona en base a tus conocimientos la respuesta que consideres correcta

1. ¿Es un documento electrónico multimedia capaz de incluir audio, video, texto y ( C )

sus combinaciones, adaptado para la world wide web, que se visualizan
mediante navegadores web?
A) Sitio web B) Internet C)Páginas D)URL
Web
2. ¿Es un lugar en la world wide web donde se almacenan documentos, entre ellos ( A )
páginas web, organizados jerárquicamente?
A} Sitio web B) Dominio c) Applet D)Hipertexto
de Internet

3. ¿Es el nombre único con el que una página web o un sitio web se identifica en la ( C )
red?
A) URL B) Hosting C)Dominio D) HTML
de internet

4. ¿Es la dirección única y específica que se asigna a cada uno de los recursos que ( C )

ser localizados por el navegador y visualizados por el usuario?

A) Dirección IP B) Hosting C) URL D) Dominio de
internet

5. ¿Es una etiqueta de HTML utilizada para dar prioridad a un título principal? ( D )
A) <p>Mi primera B) <h2>Mi C) <body>mi D) <h1>Mi primera
página web</p> primera primera página web</h1>
página página web
web</h1> </body>

6. ¿Cuál de las etiquetas se emplea para crear un hipervínculo a otra página web? ( A )
A) <a> </a> B) <p> </p> C) <video> D) <h1> </h1>

7. ¿Es un elemento que debe llevar toda página web? ( C )

A) Archivos B) Sitio C) Imágenes D) Dirección IP

8. ¿Es la parte del desarrollo web que se encarga de la lógica de la misma y que ( D )
funcione?
A) Programas B) Sitios C) Front end D) Back end

26
9. ¿Como se le llama al proceso de diseñar las páginas web de nuestro sitio web en ( A )
el disco duro del equipo para luego enviarlos al servidor web junto con los
archivos multimedia referenciados (imágenes, animaciones, audios, etc)?
A) Publicar el sitio web B) Usar un C)Hosting D) Almacenamiento
dominio web

10. Significa Protocolo de Transferencia de Hipertexto, y es necesario nos permite ( B )

realizar una petición de datos y recursos, como pueden ser documentos HTML.
A) HTML B) HTTP C) FTP D) PHP

11. Vínculo asociado a un elemento de un documento con hipertexto, que apunta a ( A )

un elemento de otro texto u otro elemento multimedia.
A) Hipervínculo B) Referencia C) Enlace D) Dominio

12. Aparece en la parte superior de tu sitio y a lo largo de tus páginas. ( D )

A) Hipervínculo B) Imagen C) Body D) Encabezado

13. Es el servicio que provee a los usuarios de Internet un sistema para poder ( C )
almacenar información, imágenes, vídeo, o cualquier contenido accesible
vía web.
A) Dominio B) Protocolo C) Hosting D) Estructura

14 Es un programa informático que procesa una aplicación del lado del servidor, ( A )
realizando conexiones bidireccionales o unidireccionales y síncronas o
asíncronas con el cliente y generando o cediendo una respuesta en cualquier
lenguaje o aplicación del lado del cliente
A) Servidor HTTP B) Hosting C) Dominio D) Protocolo

15 Es un protocolo de comunicación de datos digitales clasificado funcionalmente ( B )

en la capa de red según el modelo internacional OSI.
A) FTP B) IP C) HTTP D) TCP

27
Instrucciones: Realiza el análisis de la siguiente información, posteriormente, completa

la Actividad 1. Elementos de una página web.

CONCEPTOS BÁSICOS PÁGINAS WEB Y SITIOS WEB

Página Web

Se conoce como página web o electrónica a un documento

digital de carácter multimedia (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.
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.

El hipertexto o hipervínculo, es un
mecanismo de comunicación que permite
desde un documento navegar a otro
documento. Este mecanismo se realiza
insertando un enlace en algún texto del
documento y es una facilidad que provee el
lenguaje HTML.

28
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. Esta compuesta generalmente por diferentes elementos como
texto, imágenes, videos, etc. Este tipo de páginas son meramente
informativas, documentales, no interactivas (su contenido siempre es el
mismo).

Páginas Web dinámicas

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. Es decir, su contenido
se construye a partir de la información introducida por el usuario

Sitio web
Un sitio web es un lugar en la World Wide Web donde se almacenan documentos, entre ellos
páginas web, organizados jerárquicamente. Es decir, un sitio web es un conjunto de varias páginas
web y otros archivos.
Al sitio web se ingresa usando el dominio que identifica la ubicación del sitio, y cada una de las
páginas del sitio tiene una dirección URL única que la identifica y mediante la cual se puede acceder
a ella.

29
Dominio de internet
Se conoce como dominio en Internet al nombre único con el que una página web o un sitio web se
identifica en la red. Es una secuencia única de caracteres asociadas a las direcciones numéricas y
que se muestra después del signo @ en las direcciones de correo electrónico y después de www. en
las direcciones web. El utilizar un nombre de dominio en lugar de una dirección IP para identificar
una ubicación en Internet, es mucho más fácil recordar y escribir direcciones web.

Los dominios se dividen en tres grupos:

Dominios de Nivel Dominios de Nivel Dominios de

Superior Superior Tercer Nivel
Genéricos Geográfico
(gTLD, generic (ccTLD, country
Top-Level code Top-Level
Domain) Domain)

Dominios de Nivel Superior Genéricos, (gTLD, generic Top-Level Domain)

30
Este tipo de dominios son los de uso común y más utilizados a nivel mundial, no se ajustan a un país
determinado y sus terminaciones definen el servicio para el cual se utilizan, por ejemplo:
.com Sitio comercial .info Sitio informativo
.net Empresa de servicios de Internet .biz Sitio de negocios
.org Organización sin fines de lucro .edu Sitio educativo

Dominios de Nivel Superior Geográfico, (ccTLD, country code Top-Level Domain)

Son conocidos también como dominios territoriales y son usados por países o territorios
dependientes; se componen de 2 caracteres. Algunos ejemplos de dominios territoriales son:
.jp Japón .pe Perú
.mx México .pr Puerto Rico
.pa Panamá .uk Reino Unido

Dominios de Tercer Nivel

Los dominios de tercer nivel son aquellos que resultan tras combinar un dominio genérico (gTLD) y
uno geográfico (ccTLD); los alcances del dominio genérico son delimitado por el dominio territorial.
Por ejemplo, .[Link] y .[Link] son dominios de tercer nivel de tipo comercial para México y
Colombia respectivamente. Estos son algunos ejemplos de dominios de tercer nivel en México:

.[Link] Entidades comerciales .[Link] Instituciones Educativas

.[Link] Proveedores de redes .[Link] Entidades Gubernamentales
.[Link] Organizaciones no lucrativas

URL
Un Localizador de Recursos Uniforme, más conocido como URL (Uniform Resource Locator) es la
dirección única y específica que se asigna a cada uno de los recursos que hay en Internet (sitios web,

por el usuario.

31
Cuando un usuario quiera navegar por la red y acudir a determinados sitios o páginas web, deberá
hacer uso de este URL, que le da al navegador la información necesaria para identificar los
documentos, que los encuentre y, de inmediato, se los muestre al navegante.
Una dirección url de una página web podría tener la siguiente estructura:

Hosting
El hosting o alojamiento web es un servicio para proporcionar espacio en línea para el almacenaje
de páginas web. Estas páginas web estarán disponibles vía World Wide Web. Las compañías que
ofrecen el servicio se suelen llamar empresas de hosting. Algunos servicios que pueden ofrecer los
alojamientos son: FTP, cuentas de correo, control de acceso, estadísticas de rendimiento o visitas,
etc

Los alojamientos tienen asociadas una serie características. Algunas son:

Espacio en disco o cuota: es la cantidad de disco duro que tendremos para almacenar datos
(correos, base de datos, código de la web, imágenes, archivos descargables, ...).
Transferencia: es la capacidad de intercambio de datos, es decir, cada vez que alguien
accede a nuestra página web, se consume una cantidad de bytes.

32
 Tipo de software: la mayor parte de los alojamientos tienen los servicios LAMP (Linux,
Apache, MySQL y PHP). Es importante saber qué software y versión necesitará nuestra
página web.

Tipos de hosting
Los diferentes tipos de alojamiento disponibles según las necesidades son:

Tipos de Hosting

Servidor
Alojamiento Servidor Hosting grid
Privado Virtual
compartido dedicado
(VPS)

Alojamiento compartido: la empresa pone muchos sitios web en el mismo servidor físico.
Cada cliente tiene su propia asignación de espacio web físico y un conjunto de límites de
ancho de banda.
Servidor Privado Virtual (VPS): También se conoce como Servidor Dedicado Virtual. Es un
servidor que se divide en servidores más pequeños lógicamente. Al cliente se le da su propia
partición, que se instala con su propio sistema operativo
Servidor dedicado: En este tipo de alojamiento, un único servidor dedicado está
configurado para un solo cliente. Es comúnmente utilizado por las empresas que necesitan
la potencia, control y seguridad que ofrece un servidor dedicado.
Hosting grid: Consiste fundamentalmente en utilizar clústeres de servidores para acercar
las ventajas de una infraestructura de servidores compleja a usuarios que contratan
servicios de alojamiento compartido y siempre a una fracción de coste.

Applets
Los Applet son programas desarrollados en Java que se integran en una
página o sitio web y se emplean para brindar nuevas funciones que no
se pueden desarrollar usando HTML. Estos se descargan directamente
de la web y se ejecutan en el navegador de la máquina del usuario final
(siempre y cuando dicho navegador tenga soporte para Java).

33
El Applet tiene una función específica, por ejemplo: calcular
valores de figuras geométricas, velocidades u otros, mostrar
imágenes con sonidos, presentar gráficos interactivos que
reaccionen a acciones hechas con el mouse de la computadora,
entre otros.

34
 Instrucciones: Después de haber analizado la

Horizontales Verticales
1. Tipo de página web que operan mediante la 6. Documento digital de carácter multimedia (capaz de incluir
descarga de un fichero programado en código audio, video, texto y sus combinaciones), adaptado para world
HTML. Este tipo de páginas no interactivas (su wide web.
contenido siempre es el mismo).
2. Mecanismo de comunicación que permite desde 7. Es un lugar en la world wide web donde se almacenan
un documento navegar a otro documento. documentos, entre ellos páginas web, organizados
jerárquicamente.
[Link] de dominios de nivel superior que son los de 8. Son programas desarrollados en Java que se integran en una
uso común y más utilizados a nivel mundial, no se página o sitio web y se emplean para brindar nuevas funciones
ajustan a un país determinado y sus terminaciones que no se pueden desarrollar usando HTML.
definen el servicio que ofrecen.
4. Tipo de página web que se generan en el 9. Es nombre único con el que una página Web o un sitio Web
momento mismo del acceso del usuario, empleando se identifica en la red.
para ello algún lenguaje interpretado (como el PHP),
lo cual le permite recibir solicitudes del usuario.
5. Es un servicio para proporcionar espacio en línea 10. Es la dirección única y específica que se asigna a cada uno
para el almacenaje de páginas web. de los recursos que hay en Internet (sitios web, páginas web,

navegador y visualizados por el usuario.

35
 Bibliografía

1. Raffino, M. (5 de julio de 2020). PÁGINA WEB. [Link]. Recuperado el 19 de octubre de

2020 de [Link]
2. Estrada, s. (s.f.). ¿CUÁL ES LA DIFERENCIA ENTRE UN SITIO WEB Y UNA PÁGINA WEB?.
ingenioLab. [Link]
web/
3. Raffino, M. (17 de julio de 2020). DOMINIO EN INTERNET. Concepto de. Recuperado el 19 de
octubre de 2020 de [Link] #ixzz6aqiRU eFd
4. Tipos de Dominios - Conocimiento - [Link] . Tipos de Dominios. [Link]. Com.
Recuperado el 28 de octubre de 2020 de [Link]
knowledgebase/32/[Link]
5. [Link]. (s.f.). ¿Qué es una URL y para que sirve?. 2020, octubre 28, de [Link]
Recuperado de [Link]
6. Arume. (01 de Abr Dominio y Alojamiento, ¿qué
Son?.[Link]/blog/dominio-alojamiento/.
7. Desarrollo de Aplicaciones WEB. Práctica Alojamiento Web. Universidad de Murcia.
[Link].[Link]
18/[Link]
8. Arguedas Matarrita, Carlos Alberto y Bejarano Salazar, Ana Gabriela (2015). USO DE APPLETS DE
JAVA EN EL CURSO EN LÍNEA DE FÍSICA II, VALORACIÓN DEL ESTUDIANTADO PARA SU
APLICACIÓN EN SECUNDARIA. Atenas, 2 (30), 109-122. [Fecha de Consulta 28 de Octubre de
2020]. ISSN:. Disponible en: [Link]
9. Glosario informático - Definición de términos informáticos. Applet - Sección BD/
Programación. [Link]. Obtenido el 28 de octubre de 2020 de
[Link]

36
Instrucciones: Realiza el análisis de la siguiente información, posteriormente, completa

la Actividad 2. Lo Más Básico de la Web.

LECTURA 2

Textos, imágenes, audio, video y otros contenidos

Cuando hablamos de las partes de una página web,

generalmente nos referimos a su estructura. Es decir,
todo el conjunto de elementos o de diseño o
funcionalidades, tales como secciones o menús, que
hacen la página web navegable y funcional. También es
muy común referirnos a las partes de una página web
cuando hablamos de contenido.
Hoy en día, la presencia digital es un factor muy
importante para cualquier negocio. Seguramente alguna

simple dicho, la Internet es parte de nuestras vidas, y

ahora es prácticamente normal querer encontrar
cualquier negocio o marca en el mundo digital.
La Página Web o Electrónica es un documento electrónico capaz de contener: texto, imágenes,
sonido, videos, enlaces, programas, etc., que puede ser desplegado a través de un navegador como:
Chrome, Firefox, Explorer, etc. Ejemplos:
[Link]
[Link]

El Sitio Web es una colección de páginas web que se agrupan y conectan entre sí, regularmente en
el mismo dominio o subdominio. Igual se accede a ellos por medio de un navegador; Estos se
encuentran alojados en un servidor. Ejemplos:

[Link]
[Link]

Nadie puede dudar que Internet ha marcado un antes y un después en el mundo de las profesiones
y que ha revolucionado la manera de entender incluso los negocios. Hoy en día una página web es
una parte indispensable de la imagen de una persona, empresa o institución.

37
Principales Características que constituyen una página en Internet son:

Contenido

Una página web debe ser

solo a la vista, sino también en el contenido.
Eso significa que debe tener contenido
interesante que atraiga (y atrape) al público
objetivo. De hecho, ninguna página puede
considerarse exitosa si no cuenta con un
contenido atractivo y actualizado con cierta
frecuencia.
Eso servirá no solo para aumentar el número
de nuevas visitas, sino para que los antiguos
visitantes consulten la página a menudo y la
usen como referencia.

Tipografía.
Es importante usar fuentes llamativas pero sencillas
de leer. También es importante variar el tamaño de
una misma fuente para resaltar secciones
interesantes del contenido y del texto.

Imágenes.

En el diseño web es muy importante

las buenas fotografías,
preferentemente tomadas por un
profesional. Es importante que no
estén pixeladas o desenfocadas, ya
que puede causar una mala imagen
del sitio en general.

Animaciones y movimiento.

Para generar una sensación de dinamismo es bueno utilizar elementos animados. Pero atención: no
abuses de ellos, ya que pueden sobrecargar la página.
Lo ideal es que no sobrepasen el 20% del total de la página ya que de otra forma pueden causar
saturación, distraer la atención de cosas importantes que se quieren decir y por último sacar al
usuario del sitio.

38
 Botones e iconos.

Utilizar botones prácticos y representativos, así como

iconos grandes y vistosos aumenta la facilidad de
navegación en la página. Pero no es necesario colocar
accesorios que no brinden un valor real, por ejemplo,
un reloj para clientes que se encuentran en el mismo
uso horario.

Fondos claros y sencillos.

Los fondos claros o totalmente blancos
facilitan la visualización, pero también dan
un aspecto despejado a la página
resaltando las imágenes. Existe la
tendencia a utilizar fondos negros para
lecturas largas, para no cansar al lector
con la luz del monitor.

Dominio
El nombre de dominio es la primera parte de una
dirección Web que identifica al servidor que
almacena y sirve su sitio.

Enlaces a redes.
En la actualidad es de gran ayuda para los usuarios colocar enlaces a redes sociales con las cuales
interactúan con facilidad. Esto ayuda además a crear comunidad.

39
Sobriedad.
Una página debe permitir una fácil visualización de los contenidos (vídeos, imágenes, textos).

Texto
Elemento más significativo de cualquier sitio Web
porque los usuarios navegan por la Web
fundamentalmente en busca de información
expresada en hipertexto.

40
 Instrucciones: Después de haber analizado la Lectura 2 Elementos de una
Página Web De acuerdo con las siguientes definiciones, anota del lado derecho
el concepto al que corresponde.

Definición Concepto
1. Usar fuentes llamativas pero sencillas de leer Tipografía.
2. Dirección Web que identifica al servidor que almacena
Dominio.
y sirve su sitio.
3. En la actualidad es de gran ayuda para los usuarios
Enlaces a Redes.
colocar enlaces a redes sociales.
4. Facilitan la visualización, pero también dan un aspecto
Fondos claros y sencillos.
despejado a la página resaltando las imágenes.
5. Debe tener contenido interesante que atraiga (y
Contenido.
atrape) al público objetivo.
6. Fácil visualización de los contenidos (vídeos, imágenes,
Sobriedad.
textos).
7. Utilizar botones prácticos y representativos, así como
iconos grandes y vistosos aumenta la facilidad de Botones e iconos.
navegación en la página.
8. Lo ideal es que no sobrepasen el 20% del total de la
página ya que de otra forma pueden causar saturación,
Animaciones y movimientos.
distraer la atención de cosas importantes que se
quieren decir y por último sacar al usuario del sitio.
9. Es importante que no estén pixeladas o desenfocadas,
ya que puede causar una mala imagen del sitio en Imágenes.
general.

Conceptos: Contenido, Tipografía, Imágenes, Animaciones y movimientos, Botones e Iconos, Fondos

claros y sencillos, Dominio, Enlaces a redes, Sobriedad.

41
Instrucciones: Realiza el análisis de la siguiente información, posteriormente, contesta

las preguntas que se solicitan.

LECTURA 3 ESTANDARES DE DISEÑO WEB (W3C)

Hace unos años, el desarrollo de páginas

web era caótico, había que realizar una versión
de cada página web para prácticamente cada
navegador. Cuando hablamos de estándares
web, a lo que nos referimos son
especificaciones formales a las que Internet
debe cumplir. Por lo tanto, con frecuencia se
trata menos de cómo aparece la interfaz de un
sitio web y más sobre cómo está estructurado
el back-end del mismo.

Back-E

Funciones de un Back-End:
El Desarrollo de funciones que simplifiquen el proceso de desarrollo.
Acciones de lógica.
Conexión con bases de datos.
Uso de librerías del servidor web (por ejemplo, para implementar temas de caché o para
comprimir las imágenes de la web).

42
 El desarrollador de Front-end
se encarga de implementar
todo lo relacionado con la
parte visible, lo que «toca» el
usuario cuando navega por la
web. Resumiendo, al máximo
el Front-end trabaja
con HTML, CSS y JavaScript.

Los estándares web no se centran solo en el desarrollo web. Tocan navegadores, HTTP, software de
diseño y desarrollo, así como dispositivos de consumo. Esencialmente, los estándares web se
desarrollan y formalizan para dar fuerza y consistencia al núcleo de la web. Cuanto más nos
adherimos a estos estándares, más accesible será la web para todos. Para dar solución a este
problema, el W3C lanzó una iniciativa en 1997 para lograr la accesibilidad web (Web Accessibility
Initiative o WAI) y que se siguieran una serie de estándares o normas.

Los estándares web se introdujeron para proteger el

ecosistema web, para mantenerlo abierto, gratuito y
accesible para todos. Se perseguía poner la web en
una burbuja protectora y no tener que construir
sitios web adaptables a navegadores específicos.
Cuando se introdujeron los estándares, se alentó a
los creadores de navegadores a adherirse a una forma estandarizada de hacer las cosas, lo que
resultó en una compatibilidad cruzada cada vez más fácil para los creadores de contenido y ya no
hubo necesidad de crear múltiples versiones del mismo sitio web.

Algunos de los estándares Web más conocidos y ampliamente utilizados son:

HTML (HyperText Markup Language), para definir la estructura de los documentos.
XML (eXtensible Markup Language), que sirve de base para un gran número de tecnologías.
CSS (Cascading Style Sheets), que permite asignar estilos para la representación de los
documentos.
JavaScript, que permite otorgar dinamismo y funcionalidad.

43
Los estándares web, se basan en tres aspectos fundamentales:
La interacción con el usuario, buscando una comunicación armoniosa entre el mismo y la
aplicación.
La optimización del modo en que se le presentan los datos al usuario, ayudando a que
conozca en qué parte del ambiente de trabajo está situado y en qué momento.
La estructura del sistema optimiza la ubicación de los componentes y las distintas secciones
que se definen.

Describiendo los estándares.

HTML
El Lenguaje de Marcado de Hipertexto, en inglés, Hypertext Mark-Up Language,
(HTML) es el lenguaje de marcado predominante para la construcción de páginas
Web. Permite representar el contenido enriquecido en forma de texto, así como
complementar el texto con objetos, como el caso de las imágenes. HTML describe
la estructura del contenido, además, puede manejar la apariencia de un documento
y también su comportamiento a través de un script, por ejemplo JavaScript. El lenguaje HTML
pretende continuamente proporcionar funcionalidades más avanzadas para crear páginas más ricas
en contenido.
Asimismo, se ha definido una especificación compatible con HTML: el XHTML (Extensible Hypertext
Markup Language), que suele definirse como una versión XML de validación de HTML, proporciona
un esquema XML que permita validar el documento para comprobar si está bien estructurado.
El HTML dinámico (DHTML o Dynamic HTML) no es un estándar definido por el W3C, sino que es un
término de mercado que utilizan Netscape y Microsoft para referirse al conjunto de nuevas
tecnologías de Web. Dicho conjunto comprende: - HTML - Hojas de estilo (CSS) - JavaScript Esta
conjunción de tecnologías permite ofrecer al usuario interfaces gráficas mucho más ricas y a la vez
complejas, controlar formularios de forma más eficiente, brindar un número de facilidades al
usuario y proporcionar un intercambio más interactivo.

44
XML
El Lenguaje de Marcas Extensible, en inglés, Extensible Markup Language, (XML)
es un metalenguaje extensible de etiquetas desarrollado por el W3C. Es un
estándar que supera los límites de la Web. Se trata de un formato de datos que
se ha adoptado prácticamente de forma universal y que soluciona complejas
necesidades. XML no es realmente un lenguaje en particular, sino una manera de definir lenguajes
para diferentes necesidades. El Lenguaje de Marcado Extensible no ha nacido sólo para su aplicación
en Internet, sino que se propone como un estándar para el intercambio de información estructurada
entre diferentes plataformas. XML es una tecnología sencilla que tiene a su alrededor otras que la
complementan. Tiene un papel muy importante en la actualidad ya que permite la compatibilidad
entre sistemas para compartir la información de una manera segura, fiable y fácil.

CSS
Las Hojas de Estilo en Cascada, del inglés, Cascade StyleSheets (CSS) es un lenguaje
de hojas de estilos creado para controlar la presentación de los documentos
electrónicos definidos con HTML y XHTML. CSS es la mejor forma de separar
contenido y presentación; es imprescindible para crear aplicaciones Web
complejas. Separar contenido y presentación, brinda numerosas ventajas, ya que
obliga a crear documentos HTML/ XHTML bien definidos, mejora la accesibilidad
del documento, reduce la complejidad de su mantenimiento y permite visualizar el mismo
documento en infinidad de dispositivos diferentes. El lenguaje CSS se utiliza para definir el aspecto
de todos los contenidos, el formato de tablas, la separación, el color, tamaño y tipo de letra de
titulares y/o textos, la tabulación con la que se muestran los elementos de una lista o menú.
Las ventajas de utilizar CSS son:

Control centralizado de la presentación de un sitio Web completo con lo que se agiliza de

forma considerable la actualización de este.

45
 Los Navegadores permiten a los usuarios especificar su propia hoja de estilo local que será
empleada en una aplicación Web, con lo que aumenta considerablemente la accesibilidad,
por ejemplo, personas con deficiencias visuales pueden configurar su propia hoja de estilo
para aumentar el tamaño del texto o remarcar más los enlaces.
Una página puede disponer de diferentes hojas de estilo según el dispositivo que la utilice.

JavaScript.
JavaScript tiene objetos predefinidos que puedes utilizar en tus proyectos. Es
como si alguien ha estado programando objetos para que tu puedas
aprovecharte de ellos, sin tener que programarlos tú de cero. Los objetos son
como envoltorios de código. En JavaScript, prácticamente todo son objetos.
Por poner un ejemplo, los números y las cadenas de caracteres son
transformados por el interprete del lenguaje en objetos. Pero como los números
y las cadenas tienen características diferentes, JavaScript ofrece de forma nativa objetos distintos
para trabajar con ellos. Los objetos primitivos más utilizados son los siguientes:

Números (number)
Cadenas de texto (string)
Valores booleanos (boolean)
Arreglos o una variable que contiene otras variables (array)

PREGUNTAS:
1. ¿Qué es un estándar de diseño web?
2. ¿Por qué son importante conocer los estándares?
3. ¿Menciona por lo menos 3 estándares utilizados para el diseño web?
4. ¿Qué sabia sobre el tema?
5. ¿Qué aprendí?

46
 WEBGRAFIA

1. [Link]
2. [Link]
3. [Link]
4. [Link]
5. [Link]
6. [Link]
7. [Link]
8. [Link]
9. [Link]
10. [Link]
11. [Link]
web/#:~:text=Un%20sitio%20web%20o%20cibersitio,a%20un%20dominio%20de%20inter
net.&text=Todas%20esas%20p%C3%A1ginas%20web%20vinculadas,a%20trav%C3%A9s%2
0de%20un%20navegador.

47
Instrucciones: Realiza el análisis de la siguiente información, posteriormente, completa

la Actividad 3. Estructurando la Web.

LECTURA 4 LA ESTRUCTURA DE LA WEB

Para crear una página web se necesita un documento

HTML utilizando tres elementos o tags principales que
cualquier sitio Web usa: html, head y body.
Un documento web (o página web) es, un conjunto de
tags(etiquetas) HTML que se escriben en un editor de
texto plano (sin formato) y se ejecutan en un navegador
web.
Para crear un verdadero documento HTML comenzará
con tres elementos contenedores:

<html>
<head>
<body>
Estos tres se combinan para describir la estructura básica de la página:

<html>: Este elemento envuelve todo el contenido de la página (excepto la Document Type
Definition)

<head>: Este elemento designa la parte de encabezado del documento. Puede incluir
información opcional sobre la página Web, como puede ser el título (el navegador lo
muestra en la barra de título), palabras clave de búsqueda opcionales y una hoja de estilo
opcional.

48
 <body>: Este elemento alberga el contenido de su página Web, es decir, aquello que
queremos que aparezca en el área de navegación del navegador.

Sólo hay una manera correcta de combinar estos tres elementos. He aquí su colocación exacta, con
el DOCTYPE al comienzo de la página:

<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
</body>
</html>

Toda página Web utiliza esta estructura básica. Los puntos suspensivos (...) muestran dónde
insertaría la información adicional. Una vez colocado el esqueleto XHTML, debe añadir dos
conectores más a la mezcla. Toda página Web requiere un elemento <title> en la sección del
encabezado. A continuación, deberá crear un contenedor para el texto en la sección del cuerpo de
texto (<body>).

Un elemento contenedor de texto multiuso es <p>, que representa un párrafo. Veamos con más
detalle los elementos que hay que agregar:

<title>: Establece el título de la página Web, el cual tiene varias funciones. Primero, los
navegadores lo muestran en la parte superior de la ventana. Segundo, cuando un visitante
crea un marcador para la página, el navegador emplea el título para etiquetarlo en el menú
Marcadores (o favoritos). tercero, cuando la página aparece en una búsqueda Web, el motor
de búsqueda suele enseñar este título como primera línea en los resultados, seguido de un
fragmento del contenido de la página.

49
 <p>: Indica un párrafo. Los navegadores no los sangran, pero añaden un pequeño espacio
entre varios consecutivos para mantenerlos separados.

He aquí la página con estos dos nuevos ingredientes:

<!DOCTYPE html>
<html>
<head>
<title>Bienvenido a mi sitio Web</title>
</head>
<body>
<p></p>
</body>
</html>

Si abre este documento en un navegador Web, verá que la página está vacía, pero ahora aparece el
título.

Cuando un navegador muestra una página Web, el título se presenta en la parte superior de la
ventana, con el texto al final. Si el suyo utiliza la navegación por pestañas, el título también aparece
en [Link] y como está ahora, este documento HTML es una buena plantilla para futuras páginas.
La estructura básica está en su lugar; simplemente necesita cambiar el título y añadir algo de texto.

Lo primero que tenemos que saber es que en toda página web existen dos partes claramente
diferenciadas: la cabecera, o head, y el cuerpo, o body. Es vital que la extensión del archivo
sea .html, ya que sólo por la extensión el sistema operativo reconoce este archivo como un
documento web, y no como un simple y archivo de texto. El nombre del archivo deberá escribirse
de preferencia en minúsculas y sin espacios ni caracteres especiales.

50
Los únicos signos de puntuación admitidos son el punto (sólo uno), que lo usaremos para separar el
nombre de la extensión y el guion bajo. Ejemplo:

El nombre podrá contener letras y números, pero deberá empezar por una letra. Así mismo, nos
abstendremos de meter en el nombre de un archivo letras acentuadas, eñes, cedillas, o cualquier
otro carácter de algún alfabeto local.

Únicamente se admiten los caracteres del alfabeto internacional (ingles).

Observe los siguientes ejemplos:

pá[Link] es incorrecto, pues tiene una letra acentuada.

Pagina [Link] es incorrecto, pues tiene un espacio en blanco y una mayúscula

cañ[Link] es incorrecto, pues tiene una eñe.

pagina/[Link] es incorrecto, pues tiene un carácter no permitido (la barra)

pagina1-htm es incorrecto, porque la extensión no está separada del nombre por un punto
y porque emplea un carácter no permitido. (el guión normal).

[Link] es incorrecto, porque hay más de un punto. Sólo debe usarse uno, para
separar el nombre de la extensión.

[Link] es correcto

pagina_1.html es correcto

[Link] es correcto

Puede que todas estas precauciones le parezcan excesivas ahora. La mayoría de ellas son realmente
innecesarias en Windows, pero no olvide que está trabajando en la Red.

Los servidores web son mucho más sensibles a determinados aspectos del nombre de los ficheros
que su máquina local. Otra norma importante es que los archivos llevan una extensión, pero las
carpetas en las que las guardamos no. Así pues, en el nombre de una carpeta nunca incluiremos
puntos.

51
Una vez que haya guardado su código en su carpeta con el nombre adecuado, cierre el bloc de notas.
En su carpeta, además del bloc de notas, verá el ícono que representa al archivo que acaba de
grabar.

Observe que el ícono recuerda al de Explorer o Google Chrome (suponiendo que alguno de ellos sea
su navegador por defecto). Esto es así porque al haber guardado el fichero con la extensión .htm el
sistema operativo reconoce este fichero como documento web (también llamado documento html).

Si graba incorrectamente la extensión, el ícono será diferente y no podrá usar su archivo como
documento web. Para ejecutar la página que acaba de crear, haga doble clic sobre el ícono.
Automáticamente, se abrirá el navegador y se cargará la página. La ruta completa de acceso y el
nombre del fichero aparecerán en la barra de dirección.

Ahora veamos en detalle cuál es el código de esta página que hemos creado y qué es lo que hace.
En primer lugar, encontramos el tag <html>. Este tag se emplea siempre para iniciar el código html,
es la forma de decirle al navegador que en este punto empieza el código. Por esta razón se pone
esta línea siempre como la primera del código.

No incluiremos ningún tag antes de este, con excepción del DOCTYPE. Por el contrario, al
final del código tenemos el tag </html> , que le indica al navegador que el código finaliza
en ese punto.
No deberemos incluir ningún tag ni nada más después de esta línea. Observe que el tag de
finalización es igual al de inicio, pero incluyendo la barra inclinada al principio.
Dentro del código html encontraremos claramente diferenciados los dos bloques que
mencionamos antes: el head (cabecera) y el body (cuerpo de la página).

52
Veamos el código de la cabecera:

<head>
<title>
Título de la página
</title>
</head>

Al igual que el código general, la cabecera tiene un principio indicado por <head> y un final indicado
por </head>. Todo lo que queramos incluir en la cabecera irá colocado entre estas dos líneas. Como
decíamos antes, en la cabecera incluiremos algunos datos generales de configuración de la página.
En esta plantilla sólo hemos incluido el título de la página.

El título de la página se incluye entre los tags <title> y </title>, que indican, respectivamente, el
comienzo y final de dicho título. El título es un literal (una cadena de texto) que aparecerá en la
barra de título del navegador en tiempo de ejecución (cuando se ejecute la página). Este título es
solamente eso: un texto libre para que aparezca en la página y no tiene nada que ver con el nombre
que le dimos al fichero.

El body incluye, tal como lo mencionaba anteriormente, todo lo que queramos visualizar en el área
de navegación. Se inicia con el tag <body> y se finaliza con el tag </body>. Como vemos en el archivo
que hemos creado, de momento no hemos incluido nada. Por esta razón, al ejecutar la página, se
ve el área de navegación vacía. Dentro del body iremos metiendo código e iremos visualizando los
resultados.

En la zona del código reservada para body de la página entre las líneas <body> y </body>
podemos teclear lo siguiente:

53
 Esto es una línea de texto.

Por lo tanto, su código quedará como sigue:

<!DOCTYPE html>
<html>
<head>
<title>
Mi Primer pagina Web
</title>
</head>
<body bgcolor="red">
<P><FONT COLOR="WHITE">COLEGIO DE BACHILLERES DE TABASCO <BR></P
>
<P>CAPACITACIÓN DE DESARROLLO DE SOFTWARE<BR>
<P>MODULO IV. DISEÑO DIGITAL <BR></P>
<P>SUBMODULO I. PAGINAS WEB<BR> </FONT></P>
</body>
</html>

El resultado en la pantalla será como el que se muestra:

Como ve para mostrar un texto en el área de navegación, basta con incluir dicho texto dentro del
cuerpo de la página.

IMPORTANTE: Si te diste cuenta en el código dentro de la etiqueta de <body> agregamos un

atributo que se llama BGCOLOR este genera que el fondo de la página se torne en color rojo,
o el color en ingles que decidas, también se pueden usar los códigos de colores que se verán más
adelante. La etiqueta <P> permite escribir en líneas de párrafo cada que se apertura una de estas
etiquetas le indica al lenguaje que se está iniciando un nuevo párrafo, se usa para darle un poco más
de orden a la página aunque si no se usa solo se obtendrán líneas de texto del ancho de la misma
página. y por último la etiqueta <BR> que permite hacer un salto de línea esta no necesita tener una
etiqueta de cierre.
54
Instrucciones: Después de haber analizado la Lectura 4 La Estructura de la
Página Web Recorta las etiquetas correspondientes y pégalas en el recuadro
para que formes la estructura básica de la página que se muestra en la figura.

CODIGO EN HTML

55
 ESPACIO DE RECORTES
<BR MI EMPRESA <BR <BR

<HEAD> </BODY> <TITLE>

<BODY
</HTML> </HEAD>
</FONT>
</P>

<FONT

ESTA ES LA ESTRUCTURA BÁSICA DE UNA PAGINA WEB, CON ESTA

PUEDES COMENZAR A CONSTRUIR LA PAGINA WEB DEL NEGOCIO LOCAL PARA

E

EL CUAL DESEAS CREAR LA PAGINA WEB. Y CONFORME AVANCES EN ESTA MATERIA

VERAS COMO ADQUIERE UN MEJOR DISEÑO.

<HTML> <!DOCTYPE HTML> <P>

56
Instrucciones: Escribe la estructura básica de un programa de HTML en la aplicación

SublimeText, o en la aplicación que tu docente te solicite, si NO puedes realizarlo en

la aplicación puedes escribir a mano el código.

MI PRIMER PAGINA WEB

1. Investiga el nombre y el giro de una empresa pequeña o mediana de tu localidad que desee
que se construya una página web básica para su negocio. Puede ser incluso una tiendita o
si en tu casa tienen algún tipo de negocio familiar puedes empezar a construir su página
web para colocarla en Internet.
2. Cuando tengas el nombre y giro del negocio o empresa, puedes empezar a construir la
estructura básica de la página web, siguiendo el ejemplo y sustituyendo la información
correspondiente como nombre del negocio:

NOTA: Lo que se encuentra subrayado y con color de fuente roja es información que
puedes sustituir en base a la empresa, giro o colores que quieras utilizar para la pagina
web.
<!DOCTYPE HTML>

<HTML>

<HEAD>

<TITLE>TIENDITA DOÑA CHONA </TITLE>

</HEAD>

<BODY BGCOLOR="BLUE">

<P><FONT COLOR="WHITE">GIRO DE LA EMPRESA</FONT></P>

57
<P><FONT COLOR= ESTE ESPACIO PUEDES EMPEZAR A
UTILIZARLO PARA ESCRIBIR UN POCO ACERCA DEL GIRO DE LA EMPRESA O UN POCO DE SU
HISTORIA PARA IRLA CONOCIENDO POCO A POCO RECUERDA QUE PUEDES USAR LA ETIQUETA
<BR> PARA DAR UN SALTO DE LINEA EN LA INFORMACION

<BR></FONT></P>

<P><FONT COLOR="BLACK">PRODUCTOS QUE VENDE</FONT></P>

<P><FONT COLOR= WHITE ESTE ESPACIO PUEDES COLOCAR LOS

PRODUCTOS QUE OFERTA Y ALGUNAS PROMOCIONES CON LAS QUE CUENTE
<BR></FONT></P>
</BODY>

</HTML>
3. Realiza una captura de pantalla de como quedo tu pagina hasta este punto imprímela y
pégala en este espacio, de igual forma si no puedes imprimirla puedes dibujar como quedo.

CAPTURA DE PANTALLA O DIBUJO DE PRACTICA 1

58
 INSTRUMENTO DE EVALUACIÓN
LISTA DE COTEJO

DATOS GENERALES
Nombre(s) del alumno(s) Matricula(s)

Producto: Código y Captura o Dibujo Página Web Fecha

Materia: Submódulo II. Páginas Web
Nombre del docente Firma del docente

VALOR
OBTENIDO OBSERVACIONES Y/O
CALIF
CRITERIO INDICADORES PONDERACIÓN SUGERENCIAS DE
SI NO MEJORA

La página tiene un nombre en la pestaña del 1

1 navegador.
Contiene el Giro de la empresa en las 1
2 etiquetas <P>
Aplica las etiquetas <font> para dar color al 2
3 texto de forma correcta
Contiene la información de los productos y 2
4 promociones del comercio de la localidad.
Sustituye el texto subrayado y en rojo por la 1
5 información propia de la empresa.

6 Aplica un color de fondo a la página web 1

Se distingue la estructura de HTML 1
7 aplicando las etiquetas básicas.
Muestra la captura de pantalla o el dibujo 1
8 del diseño final de la práctica.

CALIFICACIÓN

59
Instrucciones: Realiza el análisis de la siguiente información, posteriormente, completa

la Actividad 4. Aprendo a identificar los elementos básicos.

LECTURA 5 ELEMENTOS BÁSICOS TÍTULOS, HIPERVINCULOS Y

VIDEOS

Etiquetas de Títulos
Hay hasta 6 etiquetas en HTML para definir títulos o secciones. Todas ellas llevan por defecto el
texto en negrita, y son: <h1>, <h2>, <h3>, <h4>, <h5> y <h6>.
La etiqueta <h1> es la de mayor importancia y por tanto se utiliza para definir los titulares de la
página. La importancia del resto de etiquetas es descendente, de forma que la etiqueta <h6> es la
que se utiliza para delimitar las secciones menos importantes de la página.
Todas ellas tienen su respectiva etiqueta de cierre, y al igual que en los párrafos, el texto del título
va encerrado entre las etiquetas de apertura y cierre:

<h1> Texto_del_título de nivel 1 </h1>

<h2> Texto_del_título de nivel 2 </h2>

<h6> Texto_del_título de nivel 6 </h6>

Puedes probar tus códigos en HTML de forma online y observar el ejemplo con el uso de etiquetas
de título escaneando el siguiente código.

60
Etiquetas párrafo
Párrafos. Tal vez la etiqueta más utilizada en la composición de páginas sea la etiqueta que define
los párrafos. esta es la etiqueta:

<p> Texto_del_parrafo </p>

Para crear un párrafo se encierra su texto entre las etiquetas <p> ..... </p>. Los párrafos creados con
HTML son elementos de bloque, por lo que siempre ocupan toda la anchura del elemento que los
contiene (por defecto la ventana del navegador). La etiqueta crea un salto de línea de manera que
el elemento siguiente se coloca siempre empezando una nueva línea. Observa el siguiente ejemplo:
[Link]

Etiqueta Imágenes
Cómo insertar una imagen:

<img src="img_girl.jpg" alt="Girl injacket" width="500" height="600">

61
La <img>etiqueta se utiliza para incrustar una imagen en una página HTML.
Las imágenes no se insertan técnicamente en una página web; las imágenes están vinculadas a
páginas web. La <img>etiqueta crea un espacio de espera para la imagen referenciada.
La <img>etiqueta tiene dos atributos obligatorios:
src: especifica la ruta a la imagen
alt: especifica un texto alternativo para la imagen, si la imagen por alguna razón no se puede
mostrar

Nota: Además, siempre especifique el ancho y el alto de una imagen. Si no

se especifican el ancho y el alto, la página puede parpadear mientras se
carga la imagen.
Sugerencia: para vincular una imagen a otro documento, simplemente
anide la <img>etiqueta dentro de una etiqueta <a> (vea el ejemplo a
AQUÍ PUEDES VER UN EJEMPLO continuación).

Etiqueta Hipervínculos
La <a>etiqueta define un hipervínculo, que se utiliza para vincular de una página a otra.
El atributo más importante del <a>elemento es el atributo href, que indica el destino del enlace.
De forma predeterminada, los enlaces aparecerán de la siguiente manera en todos los navegadores:
Un enlace no visitado está subrayado y en azul
Un enlace visitado está subrayado y en violeta
Un enlace activo está subrayado y en rojo

De forma predeterminada, la página vinculada se mostrará en la ventana del navegador actual. Para
cambiar esto, debe especificar otro destino para el enlace.
El target atributo especifica dónde abrir el documento vinculado.
El target atributo puede tener uno de los siguientes valores:
_self- Defecto. Abre el documento en la misma ventana / pestaña en la que se hizo clic
_blank - Abre el documento en una nueva ventana o pestaña
_parent - Abre el documento en el marco principal
_top - Abre el documento en el cuerpo completo de la ventana.

62
Ejemplo
Utilice target = "_ blank" para abrir el documento vinculado en una nueva ventana o pestaña del
navegador:
<a href="[Link] target="_blank">Visit W3Schools!</a>

Ejemplo
Cómo usar una imagen como enlace:
<a href="[Link]
<img border="0" alt="W3Schools" src="logo_w3s.gif" width="100" height="100">
</a>
Ejemplo
Cómo abrir un enlace en una nueva ventana del navegador:
<a href="[Link] target="_blank">Visit [Link]!</a>

Ejemplo
Cómo vincular a una dirección de correo electrónico:
<a href="[Link] email</a>
Ejemplo
Cómo vincular a otra sección de la misma página:
<a href="#section2">Go to Section 2</a>

URL absolutas frente a URL relativas

Ambos ejemplos anteriores utilizan una URL absoluta (una dirección web completa) en el href
atributo. Un enlace local (un enlace a una página dentro del mismo sitio web) se especifica con una
URL relativa (sin la parte "https: // www"):

Ejemplo
<h2>Absolute URLs</h2>
<p><a href="[Link]
<p><a href="[Link]
<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/[Link]">CSS Tutorial</a></p>
Puedes probar tú mismo como se

observan cada uno de los ejemplos:

63
Etiqueta Videos
El <video>elemento HTML se utiliza para mostrar un video en una página web.
El elemento HTML <video>

Para mostrar un video en HTML, use el <video>elemento:

Ejemplo:

<video width="320" height="240" controls>

<source src="movie.mp4" type="video/mp4">
<source src="[Link]" type="video/ogg">
Your browser does not support the video tag.
</video>

Cómo funciona
El controls atributo agrega controles de video, como reproducción, pausa y volumen.
Es una buena idea incluir siempre width y height atributos. Si no se configuran el alto y el
ancho, la página puede parpadear mientras se carga el video.
El <source>elemento le permite especificar archivos de video alternativos entre los que el
navegador puede elegir. El navegador utilizará el primer formato reconocido.
El texto entre el <video>y </video>etiquetas sólo se mostrará en los navegadores que no
soportan el <video>elemento.

HTML <video> Reproducción automática

Para iniciar un video, use automáticamente el autoplay atributo:

Ejemplo
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="[Link]" type="video/ogg">
Your browser does not support the video tag.
Puedes probar tú mismo como se
</video> observan cada uno de los ejemplos

64
Video HTML: métodos, propiedades y eventos

El DOM HTML define métodos, propiedades y eventos para el <video>elemento. Esto le permite
cargar, reproducir y pausar videos, así como configurar la duración y el volumen. También hay
eventos DOM que pueden notificarle cuando un video comienza a reproducirse, se pausa, etc.

Etiqueta Audio
El elemento HTML <audio>
Para reproducir un archivo de audio en HTML, use el <audio>elemento:

Ejemplo

<audio controls>
<source src="[Link]" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Audio HTML: cómo funciona

El controls atributo agrega controles de audio, como reproducción, pausa y volumen.
El <source> elemento le permite especificar archivos de audio alternativos entre los que
puede elegir el navegador. El navegador utilizará el primer formato reconocido.
El texto entre el <audio>y </audio>etiquetas sólo se mostrará en los navegadores que no
soportan el <audio>elemento.

Formatos de audio HTML

Hay tres formatos de audio compatibles: MP3, WAV y OGG. El soporte del navegador para los
diferentes formatos es:

65
 Instrucciones: Después de haber analizado la Lectura 5 Elementos Básicos
Títulos, Hipervínculos Y Videos Observa la siguiente página web en desarrollo y
coloca dentro del circulo el número de las etiquetas HTML que le corresponde a
cada elemento. Después contesta las preguntas que se solicitan

IDENTIFICA
LAS
ETIQUETAS

NOTA: En la siguiente página encontraras los números con las etiquetas correspondientes y recuerda
que algunas etiquetas pueden repetirse. No olvides contestar las preguntas.

66
 TABLA DE ETIQUETAS Y PREGUNTAS

Etiquetas Preguntas

¿Qué atributos agrega controles para pausa, reproducción y volumen?

1. <audio>

¿Por qué de todas las etiquetas de encabezado esta se considera la más

importante?
2. <h1>

¿Cuál es la importancia de los atributos src y alt dentro de esta etiqueta?

3. <img>

¿Para qué sirve esta etiqueta?

4. <p>

¿Cómo representarías el código en HTML usando esta etiqueta en la imagen

anterior?
5. <h2>

¿Cuál es la función del atributo source en esta etiqueta?

6. <video>

¿Como se escribiría en HTML para que aparezca el titulo como en la figura

anterior?
7. <title>

67
Instrucciones: Escribe la estructura de una Página Web utilizando los elementos
básicos, en la cual describirás tu asignatura favorita en la aplicación SublimeText, o en
la aplicación que tu docente te solicite, si NO puedes realizarlo en la aplicación puedes
escribir a mano el código.

PRÁCTICA 2 ELABORAS UNA PÁGINA WEB CON ELEMENTOS BÁSICOS

1. En tu editor de código crea un nuevo archivo llamado [Link]

2. Analiza y escribe el código para elaborar tu página web
3. Tu página web debe de llevar lo siguiente
a) Una imagen como logotipo
b) Un título con el nombre de tu página web
c) Una descripción de que trata tu pagina
d) Incluir un subtítulo de un tema
e) Agregar una descripción de ese tema
f) Incluir una imagen referente al tema
g) Incluir un subtítulo para visualizar un video
h) Incluir un video
4. Observa cómo debe de quedar y guíate de este prototipo adáptalo a tu asignatura preferida.

68
 Código HTML de la pagina

<!DOCTYPE HTML> -
Está destinado a indicar
<HTML> la codificación de caracteres
<head> utilizada para HTML 5
<meta charset="utf-8">
<title>Mi Blog de Informática</title>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>
<div id="contenedor">
<header>
<img src="[Link]" alt="No imagen" width="150" height="100"></a>
<h1>Blog de informática</h1>
<p id = "ptitulo">Aquí encontraras información de la asignatura de
informática, te invito a conocer mi portafolio de actividades. </p>
</header>

<section id="uno">
<h2>¿Sabes qué es la informática?</h2>
<p>La informática es el tratamiento automático de la información, se deriva
del término francés informatique que quiere decir información automática.
</p>
<img class="sec" src="[Link]" alt="No imagen" width="250"
height="150">

<h2>Te invito a ver un video para que conozcas un poco más. </h2>
<video width="320" height="185" controls><source src="pagweb.mp4"
type="video/mp4">
<link rel="stylesheet" type="text/css"
Tu navegador no soporta video. href="[Link]">
</video>
El atributo REL se usa para definir la
</section > relación entre el archivo enlazado y el
</div> documento
HTML. REL=StyleSheet especifica
</body> un estilo persistente o preferido mientras
que REL="Alternate StyleSheet" define
</html> un estilo alterno.

NOTA: LAS ETIQUETAS SUBRYADAS Y EN COLOR AZUL TU DOCENTE PODRÁ EXPLICARTE SU

FUNCIONAMIENTO DENTRO DEL CODIGO HTML.

69
 INSTRUMENTO DE EVALUACIÓN
LISTA DE COTEJO

DATOS GENERALES
Nombre(s) del alumno(s) Matricula(s)

Producto: Código y Captura o Dibujo Página Fecha

Web
Materia: Submódulo II. Páginas Web
Nombre del docente Firma del docente

VALOR OBSERVACIONES
OBTENIDO CALIF Y/O
CRITERIO INDICADORES PONDERACIÓN
SUGERENCIAS
SI NO
DE MEJORA
El código se encuentra 1
estructurado de forma
1
correcta.

Incluye las etiquetas HTML 1

correspondientes para los
2
títulos.

Utiliza las etiquetas para 2

3 inserción de videos.

Utiliza las etiquetas para 2

4 inserción de imágenes.

Entrega en tiempo y forma. 1

5
Muestra los controles del 1
6
video.
Utiliza diversas etiquetas 2
7 de títulos

CALIFICACIÓN

70
Instrucciones: Escribe la estructura de una Página Web utilizando los elementos
básicos, en la cual describirás tu asignatura favorita y podrás ir mejorando con nuevas
etiquetas y elementos en la aplicación SublimeText, o en la aplicación que tu docente te
solicite, si NO puedes realizarlo en la aplicación puedes escribir a mano el código.

PRÁCTICA 3 MEJORANDO MI PÁGINA WEB

1. Abre el archivo [Link] de la practica 2

2. Colócate al final de tu página debajo donde agregaste el video
3. Agrégale tus datos personales utilizando las etiquetas correspondientes
4. Utiliza hipervínculos para ir a tus redes sociales (Facebook, Instagram, YouTube) los
hipervínculos deben de abrirse en otra pestaña del navegador
5. Añade un audio de podcast
6. Observa cómo debe de quedar y guíate de este prototipo adáptalo a tu asignatura preferida.

71
 Código HTML de la pagina

<video width="320" height="185" controls><source src="pagweb.mp4"

type="video/mp4"> RECUERDA ESTA SECCIÓN NO TIENES QUE VOLVER A ESCRIBIRLA
Tu navegador no soporta video. YA LA CREASTE EN LA PRACTICA 2 EN EL
</video> ARCHIVO [Link] SOLO LA MUESTRO
COMO REFERENCIA
</section >
<section id="dos">

<h3>Esta pagina esta elaborada por:</h3>

<p>Nombre del alumnos del cobatab</p>

<p>Te invito a seguirme en mis redes sociales</p>

<br>

<a href="[Link] target="_blank">Mi Facebook</a>

<a href="[Link] target="_blank">Mi Twitter</a>

<h3>Escucha el mensaje del día que tengo para tí</h3>

<audio controls>

<source src="[Link]" type="audio/ogg">

<source src="podcast.mp3" type="audio/mp3">

Tu navegador no soporta video.

</audio>

</section>

</div>

</body>

</html>

72
 INSTRUMENTO DE EVALUACIÓN
LISTA DE COTEJO
Práctica 3:

DATOS GENERALES
Nombre(s) del alumno(s) Matricula(s)

Producto: Código y Captura o Dibujo Página Fecha

Web
Materia: Submódulo II. Páginas Web
Nombre del docente Firma del docente

VALOR OBSERVACIONES
OBTENIDO CALIF Y/O
CRITERIO INDICADORES PONDERACIÓN
SUGERENCIAS
SI NO
DE MEJORA
El código muestra la 1
1 estructura correcta de una
página web en HTML.
Incluye las etiquetas HTML 2
2 correspondientes al tema de
la lectura.
Se aplican correctamente las 2
3 etiquetas para inserción de
audio.
Se aplican correctamente las 2
4 etiquetas para el uso de
hipervínculos
Al realizar el uso de 1
hipervínculos estos se
5
apertura en otra ventana o
pestaña
Se muestran los controles de 1
6
audio y video.
Entrega en tiempo y forma 1
7

CALIFICACIÓN

73
Instrucciones: Realiza el análisis de la siguiente información, posteriormente, realiza

la Práctica 4. Enchulando Mi Web.

LECTURA 6 ESTILOS: FUENTE, TAMAÑO Y COLORES

¿Qué es CSS?

CSS son las siglas de C ascading S tyle S heets

CSS describe cómo se mostrarán los elementos HTML en pantalla, papel o en otros medios.
CSS ahorra mucho trabajo. Puede controlar el diseño de varias páginas web a la vez
Las hojas de estilo externas se almacenan en archivos CSS
CSS es el lenguaje que usamos para diseñar un documento HTML.
CSS describe cómo se deben mostrar los elementos HTML.

¿Por qué utilizar CSS?

CSS se utiliza para definir estilos para sus páginas web, incluido el diseño y las variaciones en la
visualización para diferentes dispositivos y tamaños de pantalla.

Sintaxis CSS
Un conjunto de reglas CSS consta de un selector y un bloque de declaración:
El selector apunta al elemento HTML al que desea aplicar estilo.
El bloque de declaración contiene una o más declaraciones separadas por punto y coma.
Cada declaración incluye un nombre de propiedad CSS y un valor, separados por dos puntos.
Varias declaraciones de CSS se separan con punto y coma y los bloques de declaración están
rodeados por llaves.

74
Ejemplo
En este ejemplo, todos los elementos <p> estarán alineados al centro, con un color de texto rojo:
p{
color: red;
text-align: center;
}
Ejemplo explicado
P es un selector en CSS (apunta al elemento HTML que desea diseñar: <p>).
color es una propiedad y redes el valor de la propiedad
text-align es una propiedad y center es el valor de la propiedad

Selectores CSS
Los selectores CSS se utilizan para "buscar" (o seleccionar) los elementos HTML que desea aplicar
estilo.
Podemos dividir los selectores de CSS en cinco categorías:
Selectores simples (seleccione elementos basados en nombre, identificación, clase)
Selectores de combinador (seleccione elementos basados en una relación específica entre
ellos)
Selectores de pseudo-clase (seleccione elementos basados en un cierto estado)
Selectores de pseudoelementos (seleccionar y aplicar estilo a una parte de un elemento)
Selectores de atributos (seleccione elementos basados en un atributo o valor de atributo)

El selector de elementos CSS

El selector de elementos selecciona elementos HTML según el nombre del elemento.
Ejemplo
Aquí, todos los elementos <p> de la página estarán alineados al centro, con un color de texto rojo:
p{
text-align: center;
color: red;
}

75
Altura y ancho de CSS
Las propiedades height y width se utilizan para establecer la altura y el ancho de un
elemento.
Las propiedades de alto y ancho no incluyen relleno, bordes ni márgenes. Establece la altura
/ ancho del área dentro del relleno, borde y margen del elemento.

Ejemplo
Establezca la altura y el ancho de un elemento <div>:
div {
height: 200px;
width: 50%;
background-color: powderblue;
}
Colores CSS
Los colores se especifican utilizando nombres de colores predefinidos o valores RGB, HEX, HSL,
RGBA, HSLA.

Color de fondo CSS

Puede establecer el color de fondo de los elementos HTML:

Ejemplo
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>

Color de texto CSS

AQUÍ PODRAS
Puede establecer el color del texto: ENCONTRAR LOS
CODIGOS DE COLORES
Ejemplo
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

76
 Color de texto

Para color esta propiedad se utiliza para establecer el color del texto. El color viene especificado
por:
un nombre de color, como "rojo"
un valor HEX, como "# ff0000"
un valor RGB, como "rgb (255,0,0)"

Consulte Valores de color de CSS para obtener una lista completa de posibles valores de color.
El color de texto predeterminado para una página se define en el selector de cuerpo.
body {
color: blue;
}

h1 {
color: green;
}

Color del borde CSS

Puede establecer el color de los bordes:

Ejemplo
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
Inténtalo tú mismo "
Fuentes CSS
Las propiedades de fuente CSS definen la familia de fuentes, la negrita, el tamaño y el estilo de un
texto.

77
Familias de fuentes CSS
En CSS, hay dos tipos de nombres de familias de fuentes:
familia genérica: un grupo de familias de fuentes con un aspecto similar (como "Serif" o
"Monospace")
familia de fuentes: una familia de fuentes específica (como "Times New Roman" o "Arial")

Familia tipográfica
La familia de fuentes de un texto se establece con la font-family propiedad.
La font-family propiedad debe contener varios nombres de fuentes como sistema de
"reserva". Si el navegador no admite la primera fuente, intenta la siguiente fuente y así
sucesivamente.
Comience con la fuente que desee y termine con una familia genérica, para permitir que el
navegador elija una fuente similar en la familia genérica, si no hay otras fuentes disponibles.

Estilo de fuente
La font-style propiedad se usa principalmente para especificar texto en cursiva.
Esta propiedad tiene tres valores:
normal: el texto se muestra normalmente
cursiva: el texto se muestra en cursiva
oblicuo: el texto es "inclinado" (oblicuo es muy similar a la cursiva, pero menos compatible)

Peso de fuente
La font-weight propiedad especifica el peso de una fuente:

Tamaño de fuente
La font-size propiedad establece el tamaño del texto.
Ser capaz de administrar el tamaño del texto es importante en el diseño web. Sin embargo,
no debe utilizar ajustes de tamaño de fuente para que los párrafos se vean como
encabezados o los encabezados se vean como párrafos.
Utilice siempre las etiquetas HTML adecuadas, como <h1> - <h6> para los títulos y <p> para
los párrafos.
El valor del tamaño de fuente puede ser un tamaño absoluto o relativo.

78
Tamaño absoluto:
Establece el texto en un tamaño especificado
No permite que un usuario cambie el tamaño del texto en todos los navegadores (malo por
razones de accesibilidad)
El tamaño absoluto es útil cuando se conoce el tamaño físico de la salida

Tamaño relativo:
Establece el tamaño relativo a los elementos circundantes
Permite a un usuario cambiar el tamaño del texto en los
navegadores.

AQUÍ PODRAS
ENCONTRAR UN CURSO
COMPLETO SOBRE CSS

79
Instrucciones: Escribe la estructura de una Página Web utilizando los elementos
básicos, y podrás ir mejorando con nuevas etiquetas aplicando Estilos CSS y elementos
en la aplicación SublimeText, o en la aplicación que tu docente te solicite, si NO puedes
realizarlo en la aplicación puedes escribir a mano el código.

PRÁCTICA 4 ENCHULANDO MI WEB

1. Abre el archivo [Link] de la practica 3

2. Abre también un archivo nuevo en tu editor de código favorito crea un archivo llamado
[Link].
3. A tu página web es decir, en el archivo [Link] en la etiqueta meta colócale el código de
enlace a la hoja de estilos de CSS, asegúrate sea el nombre de [Link], si ya lo tienen no
lo modifiques.

<link rel="stylesheet" type="text/css" href="[Link]">

4. Ahora dentro del archivo CSS escribe el código correspondiente para que tu página web
tenga un estilo único:
a. Cambia tamaño de letra
b. Colores de letras
c. Posiciones
d. Tipo de letra

NOTA: Puedes seguir el ejemplo del código que escribirás en el archivo [Link] como se muestra
a continuación, Y RECUERDA TU PUEDES CAMBIAR EL ESTILO, color, fuente, tipo de fuente, en base
a lo que tú quieras mostrar

80
 Código HTML de la Página

body{
background: white;
}

#contenedor{
width: 960px;
margin: auto;
}

header{
height: 200px; RECUERDA QUE ESTE
background: violet; CODIGO TIENES QUE
} COLOCARLO EN EL ARCHIVO
[Link] y vincularlo a la
header img{ página [Link]
margin-top: 20px;
margin-left: 20px;
}

header h1{ PUEDES USAR LA

margin-right: 170px; APLICACIÓN SUBLIME TEXT
float: right; E INCLUSO EN EL BLOC DE
color: violet; NOTAS PREGUNTALE A TU
font-style: bold; PROFESOR COMO HACERLO
font-size: 50px;
color: white;
}

#ptitulo{
text-align: center;
font-size: 15px;
color: white;
font-style: bold;
}

#uno{
background: pink;
}
section h2{
font-style: bold;
font-size: 30px;
margin: auto;
}

81
 p{
margin: auto;
font-size: 20px;
}
.sec{
margin-left: 320px;
}
video{
margin-left: 300px;
}
#dos{
background: violet;
}
a{
margin-top: 30px;
text-decoration: none;
text-align: center;
padding: 10px;
font-size: 20px;
background: white;
border-radius: 6px;
margin-left: 20px;
}
audio{
margin-left: 300px;
}

5. Guarda los cambios en tu sitio web y una vez completado enséñaselo a tu profesor.

82
 INSTRUMENTO DE EVALUACIÓN
LISTA DE COTEJO
Práctica 4 Enchulando Mi Web

DATOS GENERALES
Nombre(s) del alumno(s) Matricula(s)

Producto: Código y Captura o Dibujo Página Fecha

Web
Materia: Submódulo II. Páginas Web
Nombre del docente Firma del docente

VALOR OBSERVACIONES
OBTENIDO CALIF Y/O
CRITERIO INDICADORES PONDERACIÓN
SUGERENCIAS
SI NO
DE MEJORA
Se aplican los atributos 1
necesarios para insertar los
1
colores de fondo.

La página web muestra un 2

2 diseño llamativo.

Utilizo atributos y etiquetas 2

3 propias del lenguaje CSS.

Cambio el tamaño de los 2

4 textos.

Los hipervínculos se abren en 1

5 otra ventana o pestaña.

6 Entrega en tiempo y forma 2

CALIFICACIÓN

83
Instrucciones: Realiza el análisis de la siguiente información, posteriormente, realiza

la Práctica 5. Tablas en HTML.

LECTURA 7 USO DE TABLAS EN HTML

Una tabla en un conjunto de celdas

organizadas dentro de las cuales
podemos alojar distintos contenidos. En
un principio nos podría parecer que las
tablas son raramente útiles y que pueden
ser utilizadas principalmente para listar
datos como agendas, resultados y otros
datos de una forma organizada. Nada más lejos de la realidad. Hoy, gran parte de los diseñadores
de páginas basan su maquetación en este tipo de artilugios. En efecto, una tabla nos permite
organizar y distribuir los espacios de la manera más optima. Nos puede ayudar a generar texto en
columnas como los periódicos, prefijar los tamaños ocupados por distintas secciones de la página o
poner de una manera sencilla un pie de foto a una imagen. Puede que en un principio nos resulte
un poco complicado trabajar con estas estructuras, pero, si deseamos crear una página de calidad,
tarde o temprano tendremos que vérnoslas con ellas y nos daremos cuenta de las posibilidades nos
ofrecen. Para empezar, nada más sencillo que por el principio: las tablas son definidas por las
etiquetas.
<table> y </table>
Dentro de estas dos etiquetas colocaremos todas las otras etiquetas, textos e imágenes que darán
forma y contenido a la tabla. Las tablas son descritas por líneas de izquierda a derecha. Cada una de
estas líneas es definida por otra etiqueta y su cierre:
<tr> y </tr>

84
 Asimismo, dentro de cada línea, habrá diferentes celdas. Cada
una de estas celdas será definida por otro par de etiquetas.
Dentro de estas etiquetas será donde coloquemos nuestro
contenido. Las etiquetas son:
<td> y </td>

Aquí se tiene un ejemplo de estructura de tabla:

<table>
<tr>
<td>Celda 1, Linea1</td>
<td>Celda 2, Linea2</td>
</tr> ESTE ES EL RESULTADO
DEL CODIGO NOTARAS
<tr> QUE AUN NO TIENE
<td>Celda 1, Linea1</td> BORDE

<td>Celda 2, Linea2</td>
</tr>
</table>

Nota: Hasta aquí hemos visto todas las etiquetas que necesitamos conocer para crear tablas. Existen
otras etiquetas, pero lo que podemos conseguir con ellas se puede conseguir también usando las
que hemos visto. Por poner un ejemplo, señalamos la etiqueta, que sirve para crear una celda cuyo
contenido esté formateado como un título o cabecera de la tabla. En la práctica, lo que hace es
poner en negrita y centrado el contenido de esa celda, lo que se puede conseguir aplicando las
correspondientes etiquetas dentro de la celda. Así:

<td align="center"><b>contenido de la celda</b></td>

A partir de esta idea simple y sencilla, las tablas adquieren otra magnitud cuando les incorporamos
toda una batería de atributos aplicados sobre cada tipo de etiquetas que las componen. A lo largo
de esta lectura nos adentraremos en el estudio de estos atributos de manera a proporcionaros los
útiles indispensables para una buena puesta en página.

85
Tablas en HTML. Atributos para filas y celdas.
Hemos visto que las tablas están compuestas de líneas que, a su vez, contienen celdas. Las celdas
son delimitadas por las etiquetas <td> o por las etiquetas <th> (si queremos texto en negrita y
centrado) y constituyen un entorno independiente del resto del documento. Esto quiere decir que:
Podemos usar prácticamente cualquier tipo de etiqueta dentro de la etiqueta para, de esta
forma, dar forma a su contenido.
Las etiquetas situadas en el interior de la celda no modifican el resto del documento.
Las etiquetas de fuera de la celda no son tenidas en cuenta por ésta.

Así pues, podemos especificar el formato de nuestras celdas a partir de etiquetas introducidas en
su interior o mediante atributos colocados dentro de la etiqueta de celda o bien, en algunos casos,
dentro de la etiqueta, si deseamos que el atributo sea válido para toda la línea. La forma más útil y
actual de dar forma a las celdas es a partir de las hojas de estilo en cascada que ya tendréis la
oportunidad de abordar más adelante. Veamos a continuación algunos atributos útiles para la
construcción de nuestras tablas. Empecemos viendo atributos que nos permiten modificar una celda
en concreto o toda una línea:
align Justifica el texto de la celda del mismo modo que si fuese el de un párrafo.
valign Podemos elegir si queremos que el
texto aparezca arriba (top), en el centro
(middle) o abajo (bottom) de la celda.
bgcolor Da color a la celda o línea elegida.
bordercolor Define el color del borde.

Otros atributos que pueden ser únicamente asignados a una celda y no al conjunto de celdas
de una línea son:
background Nos permite colocar un fondo para la celda a partir de un enlace a una imagen.
height Define la altura de la celda en pixels o porcentaje.
width Define la anchura de la celda en pixels o porcentaje.
colspan Expande una celda horizontalmente.
rowspan Expande una celda verticalmente.

86
Nota: El atributo height no funciona en todos los navegadores, además, su uso no está muy
extendido. Las celdas por lo general tienen el alto que necesitan para que quepa todo el contenido
que se le haya insertado, es decir, crecen lo suficiente para que quepa lo que hemos colocado
dentro. El atributo width si que funciona en todos los navegadores y lo tendréis que utilizar
constantemente. Si le asignamos un ancho a la celda, el ancho será respetado y si dicha celda tiene
mucho texto o cualquier otro contenido, la celda crecerá hacia abajo todo lo necesario para que
quepa lo que hemos colocado.
Un matiz al último párrafo. Se trata de que, si definimos una celda de un ancho 100 por ejemplo, y
colocamos en la celda un contenido como una imagen que mida más de 100 pixeles, la celda crecerá
en horizontal todo lo necesario para que la imagen quepa. Si el elemento, aunque más ancho, fuera
divisible (como un texto) el ancho sería respetado y el texto crecería hacia abajo o lo que es lo
mismo, en altura, como señalábamos en el anterior párrafo.

Estos últimos cuatro atributos descritos son de gran utilidad. Concretamente, height y width nos
ayudan a definir las dimensiones de nuestras celdas de una forma absoluta (en pixels o puntos de
pantalla) o de una forma relativa, es decir por porcentajes referidos al tamaño total de la tabla.

Ejemplo:
<table width= Dará una anchura de 80 pixels a la celda. Sin embargo,
Dará una anchura a la celda del 80% de la anchura de la tabla.

Hay que tener en cuenta que, definidas las dimensiones de las celdas, el navegador va a hacer lo
que buenamente pueda para satisfacer al programador. Esto quiere decir que puede que en algunas
ocasiones el resultado que obtengamos no sea el esperado. Concretamente, si el texto presenta una
palabra excesivamente larga, puede que la anchura de la celda se vea aumentada para mantener la
palabra en la misma línea. Por otra parte, si el texto resulta muy largo, la celda aumentara su altura
para poder mostrar todo su contenido. Análogamente, si por ejemplo definimos dos anchuras
distintas a celdas de una misma columna, el navegador no sabrá a cual hacer caso. Es por ello que
resulta conveniente tener bien claro desde un principio como es la tabla que queremos diseñar. No
está de más si la prediseñamos en papel si la complejidad es importante.

87
 El HTML resulta en general fácil pero las
tablas pueden convertirse en un
verdadero quebradero de cabeza si no
llegamos a comprenderlas
debidamente. Los atributos rowspan y
colspan son también utilizados
frecuentemente. Gracias a ellos es
posible expandir celdas fusionando éstas con sus vecinas. El valor que pueden tomar estas etiquetas
es numérico. El número representa la cantidad de celdas fusionadas.

Así, Fusionara la celda en

cuestión con su vecina a la derecha

Del mismo modo

Expandirá la celda hacia abajo
fusionándose con la celda inferior

El resto de los atributos presentados presentan una utilidad y uso bastante obvios. Los dejamos para
que ustedes los exploren.

Atributos de la tabla
Además de los atributos específicos de cada celda o línea, las tablas pueden ser adicionalmente
formateadas a partir de los atributos que nos ofrece la propia etiqueta.
Align. Alinea horizontalmente la tabla con respecto a su entorno.
Background. Nos permite colocar un fondo para la tabla a partir de un enlace a una imagen.
Bgcolor. Da color de fondo a la tabla.
Border. Define el número de pixels del borde principal.
Bordercolor. Define el color del borde.
Cellpadding. Define, en pixels, el espacio entre los bordes de la celda y el contenido de la
misma.

88
 Cellspacing. Define el espacio entre los bordes (en pixels).
Height. Define la altura de la tabla en pixels o porcentaje. width Define la anchura de la
tabla en pixels o porcentaje

Los atributos que definen las dimensiones, height y width, funcionan de una manera análoga a la de
las celdas tal y como hemos visto. Contrariamente, el atributo align no nos permite justificar el texto
de cada una de las celdas que componen la tabla, sino más bien, justificar la propia tabla con
respecto a su entorno.
Los atributos cellpading y cellspacing nos
ayudaran a dar a nuestra tabla un aspecto más
estético. En un principio puede parecernos un
poco confuso su uso pero un poco de practica
será suficiente para hacerse con ellos. En la
siguiente imagen podemos ver gráficamente el
significado de estos atributos.
Puedes comprobar por ti mismo que los atributos definidos para una celda tienen prioridad con
respecto a los definidos para una tabla. Podemos definir, por ejemplo, una tabla con color de fondo
rojo y una de las celdas de color de fondo verde y se verá toda la tabla de color rojo menos la celda
verde. Del mismo modo, podemos definir un color azul para los bordes de la tabla y hacer que una
celda particular sea mostrada con un borde rojo. (Aunque esto no funcionará en todos los
navegadores debido a que algunos no reconocen el atributo bordercolor)

89
Tablas anidadas
Muy útil también es el uso de tablas anidadas. De la misma forma que podíamos incluir listas dentro
de otras listas, las tablas pueden ser incluidas dentro de otras. Así, podemos incluir una tabla dentro
de la celda de otra. El modo de funcionamiento sigue siendo el mismo, aunque la situación puede
complicarse si el número de tablas embebidas dentro de otras es elevado. Vamos a ver un código
de anidación de tablas. Veamos primero el resultado y luego el código, así conseguiremos
entenderlo mejor. Recuerda que para que el borde una tabla se vea debes usar el atributo border.

<tr>

Celda de la tabla principal

</td>

<tr>
<td> Tabla anidada, celda 1</td>
<td> Tabla anidada, celda 2</td>
</tr>
<tr>
<td> Tabla anidada, celda 3</td>
<td> Tabla anidada, celda 4</td>
</tr>
</table>
</td>
</tr>
</table>

90
Instrucciones: Escribe la estructura de una Página Web utilizando los elementos
básicos, y agrega Tablas para dar una mejor distribución a la página web, no olvides si
gustas agrega estilos CSS puedes utilizar SublimeText, o en la aplicación que tu docente
te solicite, si NO puedes realizarlo en la aplicación puedes escribir a mano el código.

PRÁCTICA 5 TABLAS EN HTML

1. Crea una carpeta que se llame PRACTICA 5, recuerda aquí deberás guardar todos los
archivos generados e incluso las imágenes y archivos de estilos.
2. Descarga la imagen de [Link] si es posible y guárdala en la carpeta creada, o
puedes utilizar otra imagen de tu preferencia toma en cuenta el nombre de la imagen ya
que debe ser idéntico en el código.
3. Apertura un archivo nuevo que le nombraremos PRACTICA [Link], en el software que
estés utilizando para HTML guárdalo en la carpeta creada del mismo nombre, puede incluso
utilizar bloc de notas. Vamos a ir creando una tabla con la forma del horario de clases para
ello copia el siguiente código.

91
4. Hasta este punto tendremos creado lo que se muestra en la siguiente imagen.

5. Muy bien hecho hasta este punto te hemos mostrado como crear la estructura. Ahora es
momento en que TU continúes el código desde la última etiqueta de cierre </TR> que se
muestra encerrada y con una mano en la página anterior, para completar el horario de
clases. Puedes usar las mismas materias o puedes sustituirlas por las que tu llevas.
6. Tu producto final deberá quedar algo como se muestra en la figura.

7. Bien ahora CAMBIA y aplica los TUS COLORES Y ESTILOS PARA QUE TENGA UNA FORMA MAS
LLAMATIVA MIENTRAS MAS CREATIVO MEJOR.
8. Recuerda ir guardando los cambios y todos los archivos generados tenerlos guardado en la
carpeta nombrada PRACTICA 5.
9. Para ir finalizando ahora en la siguiente pagina copia o toma una captura de tu código
completo y pégalo en el recuadro correspondiente.
10. También comparte una captura de pantalla o dibuja como quedo tu horario de clases con
los colores y estilos que aplicaste.

92
CODIGO COMPLETO DEL HORARIO DE CLASES

93
CAPTURA O DIBUJO DEL HORARIO DE CLASES

94
 INSTRUMENTO DE EVALUACIÓN
LISTA DE COTEJO
Práctica 5 Tablas en HTML

DATOS GENERALES
Nombre(s) del alumno(s) Matricula(s)

Producto: Código y Captura o Dibujo Página Fecha

Web
Matéria: Submódulo II. Páginas Web
Nombre del docente Firma del docente

VALOR OBSERVACIONES
OBTENIDO CALIF Y/O
CRITERIO INDICADORES PONDERACIÓN
SUGERENCIAS
SI NO
DE MEJORA
Se muestra el uso de tablas 1
1 en la estructura HTML.

Se observa el uso de colores 2

2 dentro de las celdas.

Se aprecia el uso de colores 1

3 en los bordes de la celda

Se observa el uso de 2
4 imágenes dentro de las tablas

Se muestra el uso de los 1

atributos de centrado dentro
5
de la tabla

Se observa el uso del atributo 2

6 Colspan.

Se muestra de forma 1
7 estructura la tabla.

CALIFICACIÓN

95
Instrucciones: Realiza el análisis de la siguiente información, posteriormente, realiza

la Actividad 5. Clases y Menús Parte 1 y 2

LECTURA 8 USO DE CLASES, MENÚS Y FORMULARIOS EN

HTML

El atributo class

Dado que el número de etiquetas del HTML es reducido, es probable que en una página web se
quiera dar un formato distinto a elementos con la misma etiqueta. Se puede sortear esta limitación
utilizando clases, que se pueden asignar a cualquier elemento de una página web.

Las clases se asignan con el atributo class. El valor del atributo class (el nombre de la clase) sólo
pueden contener caracteres ingleses, números, guiones y subrayados, aunque el primer carácter no
puede ser ni un número ni un guion.
A continuación, observamos un ejemplo aplicando el atributo class en un archivo de estilos CSS.

RECUERDA ESTE ES EL ARCHIVO DE

TU [Link]

Y ASI ES COMO SE VE
RECUERDA ESTE ES EL ARCHIVO
[Link]

96
Los navegadores distinguen los nombres de clases escritos en mayúsculas o minúsculas. En estos
apuntes se recomienda utilizar únicamente minúsculas. Observemos aquí un Ejemplo claro:

OBSEVA EL USO DE MAYUSCULAS Y

MINUSCULAS EN EL NOMBRE DE LAS Y ASI ES COMO SE VE
CLASES

A un elemento con clase se le aplica tanto la regla de la clase como la regla de la etiqueta general
(esta es una característica del mecanismo de cascada de las hojas de estilo). En el ejemplo siguiente,
en la hoja de estilo se ha escrito una regla para párrafos <p> en general y otra regla para los párrafos
de clase aviso. El elemento con clase hereda las propiedades de los elementos sin clase.

OBSERVEMOS QUE EL PARRAFO EN

COLOR ROJO HEREDO EL ATRIBUTO
DE ESTILO DE LETRA ASIGNADO AL
PRIMERO

Combinar varias clases simultáneamente

Un elemento puede tener asignado varias clases. Para asignar varias clases a un elemento, hay que
escribir en el atributo class los nombres de todas las clases que se quieren aplicar, separados por
espacios.

97
El orden en que se escriban los nombres de las clases en el atributo class no es importante, aunque
sí que es importante el orden de las reglas en la hoja de estilo. Como muestran los dos ejemplos
siguientes, si la misma propiedad está definida en varias clases y a un elemento tiene asignado varias
clases, se aplica la definición de la clase que aparece después en la hoja de estilo (esta es una
característica del mecanismo de cascada de las hojas de estilo).

Se puede escribir un selector que se aplique únicamente a los elementos que tienen definidas varias
clases.

98
Asignar la misma clase a distintos elementos
Se pueden asignar la misma clase a elementos distintos:

definiendo la clase para cada elemento, en cuyo caso cada elemento puede tener
propiedades distintas, aunque el nombre de la clase sea el mismo.

definiendo una clase universal, en cuyo caso todos los elementos tienen las mismas
propiedades.

Número de clases

En principio, se suelen definir tantas clases como tipos de elementos distintos queremos mostrar,
pero se podría definir una clase menos aprovechando que también podemos definir en la hoja de
estilo la etiqueta sin clase. Los dos ejemplos siguientes darían el mismo resultado.

En este primer ejemplo, para distinguir las intervenciones de los dos personajes en un diálogo, se
da clase a todos los párrafos. Los nombres de la clase son los nombres de los personajes.

99
En este segundo ejemplo, para distinguir las intervenciones de los dos personajes en un diálogo,
sólo se da clase a los párrafos de uno de ellos. El nombre de la clase es el nombre del personaje. La
propiedad que antes se establecía en la clase del segundo personaje, esta vez se establece para la
etiqueta general (sin clase).

100
La ventaja del segundo método es que hay que asignar menos clases. El inconveniente es que las
propiedades de la clase no definida hay que asignarla a la etiqueta general y se aplican a todos los
elementos. En general, suele ser más conveniente definir tantas clases como elementos distintos,
salvo que una de las clases se tenga que aplicar a casi todos los elementos (más que el resto de
clases juntas, por ejemplo) en cuyo caso se puede omitir esta clase y dejarla como etiqueta general.
Pero este es un aspecto para valorar en cada página en concreto.

¿Cómo crear un Menú en HTML?

En este espacio aprenderás a crear un menú en HTML. Por lo general, para crear un menú utilizamos
una lista desordenada. Se puede utilizar div, span, p u otras etiquetas, pero la lista desordenada le
da más flexibilidad.
En primer lugar, abra la página HTML por medio de su editor.
La lista desordenada es creada con ayuda de las etiquetas <ul>. Abra la etiqueta ul y cierre ella:
<ul></ul>
Luego hay que añadir los elementos de la lista a la lista. Cada botón del menú será un elemento de
la lista. Apliquemos las etiquetas de <li> y </li>
Vamos a crear un menú con cinco elementos:

1 <ul>
2 <li>Home</li>
3 <li>About</li>
4 <li>Services</li>
5 <li>Partners</li>
6 <li>Contacts</li>
7 </ul>

Lo último que necesitamos hacer es añadir enlaces a los botones de nuestro menú. En HTML enlaces
son creados mediante la etiqueta <a>.

1 <ul>
2 <li><a href="#">Home</a></li>
3 <li><a href="#">About</a></li>
4 <li><a href="#">Services</a></li>
5 <li><a href="#">Partners</a></li>
6 <li><a href="#">Contacts</a></li>
7 </ul>

101
Como puede notar cada etiqueta <a> tiene un parámetro href. Parámetro href define la dirección
URL o el fichero vinculado con un elemento del menú. Reemplace el símbolo # con el nombre de
fichero o la dirección URL para activar los enlaces. Esto se refiere si existe alguna página o parte
de la página que este vinculada a ese botón del menú.

¿Cómo crear un Menú Vertical y Horizontal en HTML/CSS?

Este tutorial le ayudará a crear un menú vertical y horizontal en HTML usando estilos CSS. Antes de
continuar asegúrese de que Usted sabe las etiquetas HTML de la lista desordenada. Además, por
favor consulte el tutorial ¿cómo crear un menú en HTML?.
Ok, en primer lugar, hay que crear un menú HTML usando la lista desordenada:

1 <ul>
2 <li><a href="#">Home</a></li>
3 <li><a href="#">About</a></li>
4 <li><a href="#">Services</a></li>
5 <li><a href="#">Partners</a></li>
6 <li><a href="#">Contacts</a></li>
7 </ul>
Luego hay que crear un nuevo fichero CSS y adjuntarlo a la página HTML:

1 <link href="[Link]" rel="stylesheet" type="text/css" />

Asegúrese de poner el código CSS en la etiqueta <head> de su página html.

También puede utilizar los estilos en línea (online).

1 <style type="text/css">
2 ...here goes your CSS styles...
3 </style>

102
Como resultado debe obtener el siguiente código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

1
"[Link]
2
<html xmlns="[Link]
3
4
<head>
5
<link href="[Link]" rel="stylesheet" type="text/css" />
6
</head>
7
8
<body>
9
10
<ul>
11
<li><a href="#">Home</a></li>
12
<li><a href="#">About</a></li>
13
<li><a href="#">Services</a></li>
14
<li><a href="#">Partners</a></li>
15
<li><a href="#">Contacts</a></li>
16
</ul>
17
18
</body>
19
</html>

La lista desordenada tiene sus propios estilos, así que sin los cambios adicionales obtiene un menú
vertical. Para obtener el menú horizontal es necesario hacer algunos cambios en HTML y CSS.
En primer lugar, hay que añadir una nueva clase a la lista, reemplace <ul> con <ul class="horizontal">
Ahora en el fichero CSS vamos a crear el menú horizontal. La lista desordenada tiene valores de
margen y relleno (margin and padding) asignados por defecto. Tenemos que limpiar ellos:

1 [Link]{
2 margin:0;
3 padding:0;
4}
Luego haga los cambios para que sus elementos de la lista se muestren de manera horizontal:

1 [Link] li{
2 display:block;
3 float:left;
4 padding:0 10px;
5}

103
 AQUÍ PUEDES VER UN
Hemos añadido el valor de relleno horizontal (padding) a los VIDEOTUTORIAL PARA
ENTENDER MIEJOR LOS MENÚS
elementos de la lista para que luego no se peguen unas a otras.
Ahora su menú está listo, asigne enlaces, añada un poco de colores
y fondo y ya.

FORMULARIOS
Un formulario es un conjunto de controles (botones, cajas de texto,
casillas de verificación, botones radio, etc) que permiten al usuario
introducir datos y enviarlos al servidor web para su procesamiento.

La etiqueta que delimita un formulario es la etiqueta <form> ...</form>. Los atributos más
importantes de la etiqueta <form> son:
action: contiene el nombre del agente que procesará los datos remitidos al servidor (por
ejemplo, un script de PHP)
method: define la manera de enviar los datos al servidor. Los valores posibles son:
o get: los valores enviados se añaden a la dirección indicada en el atributo action
o post: los valores se envían de forma separada
Si el atributo method no está establecido, el formulario se comporta como si el valor
fuera get.
La etiqueta <form> es un elemento de bloque. En su interior puede haber cualquier elemento típico
de una página web (párrafos, imágenes, divisiones, listas, tablas, etc.), además de las etiquetas que
crean los controles.

104
Las etiquetas que crean los controles en los formularios
son <input>, <button>, <select>, <optgroup>, <option> y <textarea>. Además, se pueden
estructurar los controles con las etiquetas <fieldset> y <legend>. Por último, la
etiqueta <label> permite mejorar la accesibilidad de los controles. El navegador envía únicamente
los datos de los controles contenidos en el formulario. En una misma página puede haber varios
formularios que envíen datos al mismo o a diferentes agentes.

Atributos comunes de los controles.

El atributo type
El atributo type de la etiqueta <input> indica el tipo de control de que se trata.
En HTML 4.01, los tipos de <input> eran: botón para enviar submit, botón para
reiniciar reset, texto text, contraseña password, archivo file, imagen image y oculto hidden.
En HTML 5 se añadieron los tipos de <input>: botón button, número number,
búsqueda search, teléfono tel, dirección web url, dirección de correo email, fecha date,
hora time, color color y rango range.
En HTML 5.1 se añadieron los tipos de <input>: mes month, semana week y fecha y hora
local datetime-local.

El atributo name
El atributo name identifica al control.
Todos los controles de un formulario deben tener el atributo name porque, en general, sólo se
envían los controles que lo tienen (aunque hay excepciones, como los controles de tipo imagen o
los botones, que no los necesitan). En general, los atributos name no se deben repetir, porque no
se recibiría toda la información al enviarla. La única excepción es el botón radio, como se explica en
el apartado correspondiente.

El atributo value
El atributo value permite establecer el valor inicial de un control, aunque cada control lo utiliza de
una forma ligeramente distinta y algunos controles no lo admiten (área de texto, archivo o imagen).
En algunos casos (botones) el valor se muestra al usuario y el usuario no puede modificarlo.

105
En otros casos (cajas de texto, contraseña) el valor
se muestra en la página y el usuario puede
modificarlo. En otros casos (casillas de verificación,
botones radio, opciones de menú, oculto) el valor
no se muestra en la página y el usuario no puede
modificarlo.
En algunos casos (botones, oculto, botones radio)
el atributo value es necesario. En otros casos
(casilla de verificación, opciones de menú) es conveniente. En otros casos (cajas de texto,
contraseña, imagen) puede omitirse. En el caso del selector de archivo, los navegadores no lo
admiten por motivos de seguridad.

El atributo required
El atributo required permite indicar qué controles es obligatorio rellenar para enviar el formulario.

Si alguna de las opciones de un botón radio tiene establecido el atributo required, el control es
obligatorio.

El atributo placeholder
El atributo placeholder, permite mostrar en los controles de texto un texto que desaparece al
escribir en el control.

106
El atributo size
El atributo size permite establecer la longitud de los controles de texto (text, password, search,
etc.). Por omisión, las cajas suelen tener 20 caracteres de longitud.

Los atributos maxlength y minlength

Los atributos maxlength y minlength permiten establecer la longitud máxima y mínima,
respectivamente, que puede escribir el usuario en un control de texto (text, password, search, etc.).

El atributo autofocus
El atributo autofocus permite indicar el control que debe tener el foco al cargarse el formulario.
Este atributo facilita la accesibilidad del formulario pues permite que el usuario pueda empezar a
rellenar el formulario sin necesidad de hacer clic en el elemento. Como el navegador desplaza
automáticamente la página hasta la posición del elemento, se recomienda que el elemento con
atributo autofocus se encuentren al principio de la página, para que el desplazamiento no confunda
al usuario.
Nota: En estos apuntes (lecciones y ejercicios) no se utiliza este atributo porque como en las páginas
se incluyen varios formularios en distintas posiciones de la página, el desplazamiento automático a
un elemento con atributo autofocus puede confundir al lector.

107
El atributo disabled
El atributo disabled permite deshabilitar el control. Una vez deshabilitado, el control ni siquiera
puede coger el foco.

El atributo readonly
El atributo readonly hace que el control no sea modificable, aunque el control puede coger el foco.

El atributo tabindex
El atributo tabindex permite controlar el orden en que el foco pasa de un elemento a otro mediante
el tabulador (Tab para avanzar y Shift+Tab para retroceder). Los valores de tabindex pueden ser
números naturales (incluido el cero), no necesariamente consecutivos. Si no está presente, los
controles se visitan en el orden en que aparecen en el texto. Si está presente, los controles se visitan
de menor a mayor.

SI DESEAS CONOCER MAS ATRIBUTOS DE LOS

FORMULARIOS DA CLIC EN ESTE CODIGO

108
 Bibliografía

Marco, B. S. (Octubre de 2016). Páginas Web HTML y hojas estilos CSS. Obtenido de
[Link]
Marco, B. S. (Junio de 2020). Páginas web HTML y hojas de estilo CSS. Obtenido de
[Link]
Theme Technologies LLC. Operated by Jetimpex Inc. (Marzo de 2020). MonsterHelp.
Obtenido de [Link]
[Link]

109
 Instrucciones: Después de haber analizado la Lectura 8 Uso de Clases, Menús y
Formulario en HTML Completa la siguiente tabla con el concepto o nombre de
etiqueta o atributo faltante.

Definición Etiqueta o Atributo

1. Sólo pueden contener caracteres ingleses, números, guiones

y subrayados, aunque el primer carácter no puede ser ni un
número ni un guion.
2. required

3. Es un conjunto de controles (botones, cajas de texto, casillas

de verificación, botones radio, etc) que permiten al usuario
introducir datos y enviarlos al servidor web para su
procesamiento

4. <ul>

5. Sirve para añadir los elementos de la lista a la lista.

6. Define la dirección URL o el fichero vinculado con un elemento

del menú

7. method

8. Las etiquetas que crean los controles en los formularios son

9. <label>

10. Hace que el control de un formulario no sea modificable,

aunque el control puede coger el foco.

110
Parte 2.

Instrucciones: Escribe el código para la siguiente captura de pantalla que se te

presenta.

111
 INSTRUMENTO DE EVALUACIÓN
LISTA DE COTEJO

DATOS GENERALES
Nombre(s) del alumno(s) Matricula(s)

Producto: Código y Captura o Dibujo Página Fecha

Web
Materia: Submódulo II. Páginas Web
Nombre del docente Firma del docente

VALOR OBSERVACIONES
OBTENIDO CALIF Y/O
CRITERIO INDICADORES PONDERACIÓN
SUGERENCIAS
SI NO
DE MEJORA
Se observa el uso de la 1
1 etiqueta <form>

Aplica espacio proporcional a 1

los campos de nombre y
2
dirección.

Se muestra el uso de los 2

3 botones de Enviar y Borrar

Se muestra el uso de los 2

4 atributos type, name, value

Se observa el uso del color 1

5 azul dentro de las opciones.

Se muestra la estructura de la 1
6 pagina web en HTML

CALIFICACIÓN

112
Instrucciones: Escribe la estructura de una Página Web utilizando los elementos
básicos, muy bien ahora te ayudaremos generar un menú que puedes utilizar para tu
Situación Didáctica no olvides si gustas agrega estilos CSS puedes utilizar
SublimeText, o en la aplicación que tu docente te solicite, si NO puedes realizarlo en
la aplicación puedes escribir a mano el código.

PRÁCTICA 6 USO DE CLASES, MENÚS Y FORMULARIOS

1. Abre Sublime Text, o la aplicación donde realizaras la codificación en HTML.

2. Empieza a escribir el siguiente código:

113
114
 3. Guarda tu archivo como [Link] o la extensión de tu aplicación en la que
programas.
4. Ahora Guarda como nuevamente [Link] si lo realizaste en el bloc de
notas para poder ver el resultado, si lo realizaste en otra aplicación que permite
previsualizar el código encontraras el mismo resultado.
5. Muy bien ya codificaste tu Menú debes obtener una pantalla como la siguiente.

6. Recuerda que puedes cambiar los nombres si te das cuenta se sustituyó la palabra Submenú
por la de Producto de igual forma puedes cambiar los estilos o colores que desees utilizar.

7. Guarda los cambios que realizaste en la programación y

actualiza el sitio HTML para que se reflejen los cambios.

8. Entrega tu práctica a tu docente para su revisión

Observa el siguiente video en el código QR para entender mejor

cada sección de la práctica.

IMPORTANTE:
EMPIEZA A DISEÑAR LA PAGINA WEB DE LA SITUACIÓN DIDACTICA APLICANDO LO APRENDIDO
PUEDES USAR ESTE MENU PARA AGREGARLO O TOMARLO COMO BASE, VE AVANZANDO EN EL
DISEÑO Y CONSULTA CON TU DOCENTE SOBRE LOS AVANCES O DUDAS QUE TENGAS.

115
 INSTRUMENTO DE EVALUACIÓN
LISTA DE COTEJO

DATOS GENERALES
Nombre(s) del alumno(s) Matricula(s)

Producto: Código y Captura o Dibujo Página Fecha

Web
Materia: Submódulo II. Páginas Web
Nombre del docente Firma del docente

VALOR OBSERVACIONES
OBTENIDO CALIF Y/O
CRITERIO INDICADORES PONDERACIÓN
SUGERENCIAS
SI NO
DE MEJORA
Se observa la estructura de la 1
1 página web en HTML

Se aplica los estilos para el 2

2 menú

Cambia el color del fondo del 2

menú en base a sus
3
necesidades.

Aplica el uso de las listas de 2

manera correcta y en forma
4
de cascada.

Genera los submenús dentro 2

5 de los otros menús.

Entiende la forma en que los 1

6 estilos se aplican a las listas.

CALIFICACIÓN

116
Instrucciones: Realiza el análisis de la siguiente información, posteriormente, realiza

la Actividad 6. ¿Qué es JavaScript?

LECTURA 9

JavaScript es uno de los más potentes e importantes lenguajes de programación en la actualidad,

por tres enfoques claros: es útil, práctico y está disponible em cualquier navegador web. JavaScript
fue creado por Brendan Eich y vio la luz en el año 1995 con el nombre de LiveScript que luego fue
nombrado JavaScript, nace como un lenguaje sencillo destinado a añadir algunas características
interactivas a las páginas web. Sin embargo, hoy en día ha crecido de manera acelerada y es el
lenguaje de programación que se utiliza en casi todos los sitios web en el mundo.
El poder de JavaScript está disponible principalmente en el lado
frontend, agregando mayor interactividad a la web, también puedes
usar las librerías y framework como: jquery, angular, backbone, react
y demás escritas sobre JavaScript y que ayudan a crear una mejor
experiencia de usuario en nuestros sitios web.
Las características de JavaScript que lo hacen uno de los más populares en la actualidad son:
1. Es liviano.
2. Multiplataforma, ya que se puede utilizar en Windows, Linux o Mac y en el navegador de tu
preferencia.
3. Es imperativo y estructurado, mediante un conjunto de instrucciones indica a la
computadora que tarea debe realizar.
4. Prototipado, debido a que usa prototipos en vez de clases para el uso de herencia.
5. Orientado a objetos y eventos.
6. Es interpretado, no se compila para poder ejecutarse.

117
Estas son las características que hacen de JavaScript un lenguaje que permite desarrollar
aplicaciones gigantes y potentes, como lo es: google doc, facebook, twitter e incluso capaz de
ejecutarse en el servidor como un servidor web muy rápido.
JavaScript es un lenguaje de programación o de secuencias
de comandos que permite implementar funciones
complejas en páginas web, cuando en una página web se
muestran actualizaciones de contenido, mapas interactivos,
animación de gráficos 2D y 3D, desplazamiento de
máquinas reproductoras de video, etc., podemos decir que
es probable que JavaScript está involucrado. Es la tercera
capa de las tecnologías web estándar, dos de las cuales
HTML y CSS se ha revisado en apartados anteriores

HTML es el lenguaje de marcado que se usa para estructurar y dar significado al contenido
web, esto puede ser párrafos, encabezados, tablas de datos o insertando imágenes y videos
en la página.
CSS es un lenguaje de reglas de estilo que se usa para aplicar estilo al contenido HTML, para
dar color al fondo y tipos de letra, así como distribuir el contenido en múltiples columnas.
JavaScript es un lenguaje de secuencias de comandos que permite crear contenido de
actualización dinámica, controlar multimedia, animar imágenes y prácticamente todo lo
demás. Es sorprendente lo que se puede lograr con unas pocas líneas de código JavaScript.

Las tres capas se superponen muy bien. Se tiene una etiqueta de texto simple. Usamos HTML
para darle estructura y propósito.

Se mostraría lo siguiente:
Player 1: Chris
Podemos agregar algo de CSS a la mezcla para que se vea bien:
118
Finalmente se puede agregar algo de JavaScript para implementar un comportamiento dinámico:

El núcleo del lenguaje JavaScript del lado del cliente consta de algunas características de
programación comunes que permiten hacer cosas como:
Almacenar valores útiles dentro de variables. En el ejemplo anterior, se pide que ingreses
un nuevo nombre y luego almacenamos ese nombre en una variable llamada name.
Operaciones sobre fragmentos de texto conocidas

name para crear l

119
 Se ejecuta el código en respuesta a ciertos eventos que ocurren en una página web. Se
puede usar un evento clic en nuestro ejemplo anterior para detectar cuándo se hace clic en
el botón y luego ejecutar el código que actualiza la etiqueta de texto.

Lo que es más emocionante es la

funcionalidad construida sobre el
lenguaje JavaScript de lado del
cliente. Las denominadas interfaces
de programación de aplicaciones
(API) las cuales proporcionan
herramientas adicionales para
utilizar en el código JavaScript.
Las API son conjuntos de bloques de construcción de código listos para usar que permiten a un
desarrollador implementar programas que de otra forma sería difícil o imposible implementar.
Generalmente se dividen en dos categorías:

Las APIs del navegador están integradas en dicho navegador web y pueden exponer datos del
entorno informático circundante o realizar tareas complejas y útiles. Algunas son:
La API del DOM (Documente Object Model) permite manipular HTML y CSS, crear, eliminar
y cambiar el HTML, aplicar dinámicamente nuevos estilos a la página. Cada vez que aparece
una ventana emergente en una página, o se muestra algún nuevo contenido, ese es el DOM
en acción.
La API de Geolocalización recupera información geográfica. Así es como Google Maps puede
encontrar tu ubicación y trazarla en un mapa.
Las APIs Canvas y WebGL permiten crear gráficos animados en 2D y 3D.
APIs de audio y video como HTMLMediaElement y WebRTC te permite hacer cosas
realmente interesantes con multimedia como reproducir audio y video directamente en una
página web, o tomar video de tu cámara web y mostrarlo en la computadora de otra
persona.

120
Las APIs de terceros no están integradas en el navegador de forma predeterminada y por lo general
se debe obtener un código e información de algún lugar de la web. Estos pueden ser:
La API de Twitter te permite hacer cosas como mostrar tus últimos tweets en tu sitio web.
La API de Google Maps y la API de OpenStreetMap te permiten insertar mapas
personalizados en tu sitio web y otras funciones similares.
Cuando cargas una página web en tu navegador, estás ejecutando tu código HTML, CSS y JavaScript
dentro de un entorno de ejecución que es la pestaña del navegador.

Un uso muy común de JavaScript es

modificar dinámicamente HTML y
CSS para actualizar una interfaz de
usuario a través de la API del
modelo de objetos del documento.
Hay que tener en cuenta que el
código de los documentos web
generalmente se cargan y ejecutan en el orden en que aparecen en la página. Si JavaScript se carga
e intenta ejecutarse antes de que se haya cargado el HTML y el CSS al que afecta, pueden producirse
errores.
Cuando el navegador encuentra un bloque de JavaScript, generalmente lo ejecuta en orden, de
arriba abajo. Por ello hay que tener cuidado con el orden en el que colocas las cosas.
Veamos el orden de nuestro ejemplo.

121
Aquí se selecciona un párrafo de texto (línea 1), luego adjuntamos un detector de eventos (línea 3)
de modo que cuando se hace clic en el párrafo, el bloque de código updateName() (líneas 5 8) se
ejecuta. El bloque de código updateName() estos tipos de bloques de código reutilizables se
denominan funciones, la cual piede al usuario un nuevo nombre y luego inserta ese nombre en el
párrafo para actualizar la pantalla.
Si se cambia el orden de las dos primeras líneas de código ya no
funcionaría, en su lugar se obtendría un error en la consola del
desarrollador del navegador TypeError: para is undefined. Lo cual significa
que el objeto para aún no existe, por ello no se puede agregar un detector
de eventos. JavaScript es un lenguaje de programación interpretado ligero.
El navegador web recibe el código JavaScript en su forma de texto original
y ejecuta el script a partir de ahí. La mayoría de los intérpretes de JavaScript modernos utilizan una
técnica llamada compilación en tiempo real para mejorar el rendimiento; el código fuente de
JavaScript se compila en un formato binario más rápido mientras se usa el script, de esta forma se
puede ejecutar lo más rápido posible. Sin embargo, JavaScript todavía se considera un lenguaje
interpretado, ya que la compilación se maneja en el entorno de ejecución, en lugar de antes.
JavaScript se aplica a la página HTML de manera similar a CSS. Mientras que CSS usa elementos
<link> para aplicar hojas de estilo externas y elementos <style> para aplicar hojas de estilo internas
a HTML, JavaScript solo necesita un amigo en el mundo de HTML el elemento
{htmlelement(

122
 Bibliografía.
Alvarez, Miguel Angel, Gutiérrez, Manu. (2007). Manual de JavaScript. [Link]
Recuperado de:
[Link]
Gauchat, J. D. (2012). El gran libro de HTML5, CSS3 y JavaScript. Primera edición. Editorial
Marcombo. España. ISBN: 9788426717825.

123
 Instrucciones: Después de realizar la Lectura 9. ¿Qué es JavaScript? Señalando lo
más importante resuelve la siguiente sopa de letras.

J A V A S C R I P T E S M U U
Y P D I V S A V N A C E R T P
I I D O L S O N J Q U E R Y D
M U L T I P L A T A F O R M A
C O D I G O G M L W E B G I T
B R E N D A N E I C H R A R E
P O P U L A R E V E N T O S N
L I M P E R A T I V O O I M A
P R O T O T I P A D O P O S M
C O M A N D O S N U C L E O E
O D A T N E I R O B J E T O S
Q U E R Y S E L E C T O R I B
E S T R U C T U R A D O L E Y
I N T E R P R E T A D O H A C
E R L I V E S C R I P T L O C
O N T O S T Y L E D O E L I M
S C R I P T P T Y P E E T U D
E L U N D E F I N E D H O Y .

JAVASCRIPT UPDATENAME QUERYSELECTOR API

CSS NUCLEO BRENDAN EICH LIVESCRIPT
LIVIANO PROTOTIPADO MULTIPLATAFORMA IMPERATIVO
OBJETOS ORIENTADO ESTRUCTURADO EVENTOS
NAME CANVAS INTERPRETADO WEBGI
CODIGO POPULAR COMANDOS JQUERY
STYLE SCRIPT UNDEFINED TYPE

Escribe la frase que esconde las letras restantes.

ES MUY DIVERTIDO LOGRAR LO IMPOSIBLE Y HACERLO CON TODO EL
IMPETÚ DEL HOY

124
Instrucciones: Realiza el análisis de la siguiente información, posteriormente, realiza

la Actividad 7. Instrucciones en JavaScript

LECTURA 10 INSTRUCCIONES EN JAVASCRIPT

Como cualquier otro lenguaje de programación, JavaScript tiene algunas características especiales:
sintaxis, modelo de objetos, etc. Claramente, cualquier cosa que diferencia un lenguaje de otro.
Además, JavaScript es un lenguaje relativamente especial en su acercamiento a las cosas. Esta parte
es esencial para cualquier principiante de programación e incluso para aquellos que ya conocen un
lenguaje de programación debido a que las diferencias con otros lenguajes de programación son
numerosas.

JavaScript es un lenguaje de programación de scripts (secuencia de comandos) orientado a objetos.

Esta descripción es un poco rudimentaria, hay varios elementos que vamos a explicar.

Es un lenguaje de programación En primer lugar, un lenguaje de programación es un

lenguaje que permite a los desarrolladores escribir código fuente que será analizado por un
ordenador.
Un desarrollador o programador es una persona que desarrolla programas. Puede ser un
profesional (un ingeniero, programador informático o analista) o un aficionado.
El código fuente está escrito por el desarrollador. Este es un conjunto de acciones, llamadas
instrucciones, lo que permitirá dar órdenes al ordenador para operar el programa. El código
fuente es algo oculto, como un motor en un automóvil está oculto, pero está ahí, y es quien
asegura que el coche puede ser conducido. En el caso de un programa, es lo mismo, el
código fuente rige el funcionamiento del programa. Dependiendo del código fuente, el
ordenador realiza varias acciones, como abrir un menú, iniciar una aplicación, efectuar
búsquedas, en fin, todo lo que el equipo es capaz de hacer.

125
 JavaScript te permite programar scripts. Como se mencionó
anteriormente, un lenguaje de programación es utilizado para escribir
código fuente a ser analizada por un ordenador. Hay tres formas de
usar el código fuente:

Lenguaje compilado como: El código fuente se da a un programa llamado compilador que

lee el código fuente y lo convierte en un lenguaje que el equipo será capaz de interpretar:
el lenguaje binario, es de 0 y 1. Lenguajes como C o C ++ son lenguajes compilados muy
conocidos.
Lenguaje precompilado: aquí, el código fuente se compila en parte, por lo general en un
código más fácil de leer para el ordenador, pero que todavía no es binario. Este código

código. Lenguajes como C # o Java se llaman precompilados.

Lenguaje interpretado: en este caso, no hay compilación. El código fuente se mantiene sin
cambios, y si desea ejecutar este código, debemos proporcionar un intérprete que va a leer
y realizar las acciones solicitadas.

Los scripts son en su mayoría interpretados. Y cuando decimos

que JavaScript es un lenguaje interpretado, lo que significa que es
un lenguaje interpretado. Por tanto, es necesario contar con un
intérprete para ejecutar código Javascript, y el intérprete que se
utiliza una frecuencia: se incluye en tu navegador de internet.
Cada navegador tiene un intérprete Javascript, que varía en
función del navegador. Si está utilizando Internet Explorer, el
intérprete es llamado JScript (versión 9 intérprete llamado
Chakra), en Mozilla Firefox se llama SpiderMonkey y el motor V8
es el de Google Chrome.

126
Queda un aspecto a analizar: orientado a objetos. Este concepto es bastante complicado de
configurar. Sin embargo, un lenguaje de programación orientado a objetos es un lenguaje que
contiene elementos, llamados objetos y los objetos diferentes tienen características específicas y
formas de uso diferente.

El lenguaje proporciona objetos básicos, como imágenes, fechas, cadenas de caracteres... También
es posible crear tus propios objetos para hacer la vida más fácil y obtener un código fuente más
claro (fácil de leer) y una forma de programar mucho más intuitivo (lógica).

JavaScript es un lenguaje utilizado principalmente con el lenguaje HTML, se aprenderá cómo

integrar este lenguaje en tus páginas web, descubrir su sintaxis básica y mostrar un mensaje en la
pantalla del usuario.

¡Hola Mundo! ¡No se deroga la regla tradicional de que todos los tutoriales de programación
", ("¡Hola Mundo!" en español) al usuario. A
continuación, se muestra un programa HTML simple que contiene la instrucción Javascript, situada
dentro de un elemento

<!DOCTYPE html> Al ejecutarlo aparece lo siguiente:

<html>
<head>
<title>¡Hola Mundo!</title>
</head>
<body>
<script>
Alert('¡Hola Mundo!');
</script>
</body>
</html>

En el código HTML indicado anteriormente, vemos algunas nuevas características. En primer lugar,
un elemento <script> está presente: es él quien tiene el código JavaScript de la siguiente manera:

Alert(¡Hola Mundo!)

Es una declaración, es decir, una orden, o más bien una acción que el equipo tendrá que hacer. los
lenguajes de programación consisten en una secuencia de instrucciones que, colocados de extremo
a extremo, permiten obtener un programa o un script completo.

127
En este ejemplo, no es una instrucción: se llama a la función alert. El cuadro de diálogo de alert ()
alert () es una declaración simple, llamada función, que muestra un cuadro de diálogo que contiene
un mensaje. este mensaje se coloca entre comillas, entre los paréntesis de la function alert ().

Sintaxis de JavaScript.

La sintaxis de Javascript no es complicada. Generalmente, las instrucciones deben estar separadas

por un punto y coma que se coloca al final de cada instrucción:

Código: JavaScript

sentencia_1;

sentencia_2;

sentencia_3;

Algunas secuencias de comandos están disponibles en un formato comprimido, es decir, todo el

código se escribe como secuencia, no hay retornos de línea. Esto reduce considerablemente el
tamaño de una secuencia de comandos y sirve para asegurar que la página se carga más
rápidamente. Existen programas para "comprimir" el código JavaScript. No hay que olvidar un solo
punto y coma el código comprimido no va a funcionar porque las instrucciones no están
debidamente separadas. También es una de las razones por las que siempre se pone el punto y
coma al final de la instrucción.
Javascript no es sensible a los espacios. Esto significa que puedes alinear las instrucciones que
quieras, siempre que no interfiera con la secuencia de comandos. Por ejemplo, esto es correcto:

Código JavaScript

instruccion_1;

instruccion_1_1;

instruccion_1_2;

instruccion_2; instruccion_3;

128
La sangría en la programación informática es una manera de estructurar el código para hacerlo más
legible. Las instrucciones son priorizadas en varios niveles y espacios de usos o lengüetas para
desplazar a la derecha y crear una jerarquía. Un ejemplo de código sangrado:

Código: JavaScript

function interruptor(elemID) {

var elem = [Link](elemID);

if ([Link] == 'block') {

[Link] = 'none';

} else { [Link] = 'block';

Comentarios.

Los comentarios son anotaciones realizadas por el desarrollador para explicar el funcionamiento de
un script, una instrucción o incluso un grupo de instrucciones. Los comentarios no interfieren con la
ejecución de un script. Hay dos tipos de comentarios: los de fin de línea y los multilínea.

Comentarios de fin de línea. Se utilizan para comentar una instrucción. Comienza con dos barras de
división:

Código: JavaScript

sentencia_1 / / Esta es mi primera instrucción

sentencia_2; / / La tercera declaración es la siguiente:

sentencia_3;

El texto colocado en un comentario se ignora cuando se ejecuta un script, lo que significa que puedes
poner un comentario, incluso en una instrucción (que, obviamente, no se ejecutará):

129
Código: JavaScript

sentencia_1 / / Esta es mi primera instrucción

sentencia_2; / / La tercera declaración da problemas, la cancelo temporalmente / /

sentencia_3;

Comentarios multilínea. Este tipo permite saltos de línea. Un comentario multilínea comienza con
/ * y termina con * /:

Código: JavaScript

/ * Este script consta de tres pasos:

- Instrucción uno está haciendo algo

- Instrucción dos para otra cosa

- Instrucción tres que pone fin a la secuencia de comandos * /

sentencia_1;

sentencia_2;

sentencia_3 / / Fin del script

Ten en cuenta que un comentario de varias líneas se puede mostrar en una sola línea:

Código: JavaScript

sentencia_1 / * Esta es mi primera instrucción * /

sentencia_2;

130
Funciones.

En el ejemplo de ¡Hola mundo!, Se utilizó la función alert (). Una función consiste en dos partes: su
nombre, seguido por un par de paréntesis (una apertura y un cierre): Código: JavaScript

myFunction () / / "function" quiere decir "función" en Inglés

Entre paréntesis se indican los argumentos que también se llaman parámetros. Estos contienen los
valores que se pasan a la función. En el caso de ¡Hola mundo!, Son las palabras "¡Hola, mundo! " lo
que se transfieren como parámetros:

Código: JavaScript

alert ('Hola mundo!');

Colocar el código JavaScript en la página HTML.

Los códigos JavaScript son insertados a través del elemento <script>. Este elemento tiene un
atributo de tipo que se utiliza para indicar el tipo de lenguaje que vamos a utilizar. En nuestro caso,
es JavaScript.

Para situar el código JavaScript directamente en una página web, nada más simple, siguiendo el
ejemplo de ¡Hola, mundo!: se coloca el código en el elemento <script>

Código: HTML

<!DOCTYPE html>
<html>
<head>
<title>¡Hola Mundo!</title>
</head>
<body>
<script>
Alert('¡Hola Mundo!');
</script>
</body>
</html>
Los comentarios de encuadramiento se utilizan para aislar el código Javascript para que el Validator
W3C (World Wide Web Consortium) no los interprete.

131
Los comentarios de encuadramiento son como los comentarios HTML:

Código: HTML

<body>
<script>
<!--
Valor 1> valor_2;
//-->
<script>
</body>

Es posible, y conveniente escribir el

código JavaScript en un archivo externo
con la extensión. Js. Este archivo se
llama desde la página web mediante el
elemento <script> y su atributo src que
contiene la dirección URL del archivo. Js.

He aquí un pequeño ejemplo:

Código: JavaScript - contenido de ficheros [Link]

alert ('¡Hola mundo!');

Código: HTML - Página Web

<! DOCTYPE html>

<html>
<head>
<title>¡Hola Mundo!</title>
</head>
<body>

</body>
</hmtl>

El archivo [Link] se encuentra en el mismo directorio que el programa en HTML.

132
La mayoría de los cursos de Javascript, y ejemplos, muestran la necesidad de colocar el elemento
<script> dentro de <head> cuando se utiliza para cargar un archivo JavaScript. Eso es correcto, sí,
pero hay mejoras.

Una página web es leída por el navegador de forma lineal, es decir, en primer lugar, lee <head>,
después los elementos de <body> uno después del otro. Si se llama a un archivo JavaScript desde el
principio de la carga de la página, el navegador por lo tanto cargará este archivo, y si es grande, la
carga de la página se desacelerará. Esto es normal, ya que el navegador cargará el archivo antes de
empezar a mostrar el contenido de la página. Para superar este problema, es conveniente colocar
los elementos <script> justo antes de cerrar <body>.

Código: HTML

<!DOCTYPE html>
<html>
<head>
<title>¡Hola Mundo!</title>
</head>
<body>
<p>
<!--
Contenido de la página Web

-->
</p>
</script>
// Un poco de código JavaScript...
</script>

</body>
</html>
Acorde a ello podemos decir lo siguiente:

Las instrucciones deben estar separadas por un punto y coma.

Un código JavaScript bien presentado es más legible y más fácil de editar.
Es posible incluir comentarios con los caracteres / /, / * y / *.
Los códigos Javascript son colocados en un elemento de script.
Es posible incluir un archivo JavaScript con el atributo src del elemento <script>.

133
Variables

Una variable es un espacio de almacenamiento en un

ordenador para grabar cualquier tipo de datos como
una cadena de caracteres, un valor numérico o
estructuras un poco más específicas.

Declarar una variable En primer lugar, ¿qué significa "declarar una variable"? Se trata simplemente
de espacio de almacenamiento de reserva en memoria, nada más. Una vez que se declara la
variable, puedes comenzar a almacenar datos sin problema. Para declarar una variable, primero
debes encontrar un nombre. Es importante destacar que el nombre de una variable puede contener
sólo caracteres alfanuméricos, es decir, letras de la A a la Z y números del 0 al 9, guion bajo (_) y
dólar ($) también son aceptados.

El nombre de la variable no puede comenzar con un número y no puede consistir únicamente de

palabras clave utilizadas por Javascript. Por ejemplo, no se puede crear una variable llamada var
porque encontrarás que esta palabra clave ya está en uso, sin embargo, puedes crear una variable
llamada var_. En las palabras clave utilizadas por JavaScript, se pueden llamar "palabras reservadas",
simplemente porque no tienes el derecho de usarlos como nombres de variables. Para declarar una
variable, simplemente hay que escribir la siguiente línea:

Código: JavScript

var miVariable;

JavaScript es un lenguaje sensible en las denominaciones, ten

cuidado de no confundir las mayúsculas y minúsculas. En el
siguiente ejemplo, tenemos tres variables diferentes
declaradas:

Código: JavaScript

var miVariable;

var mivariable;

var MIVARIABLE;

134
La palabra clave var está presente para indicar que se declara una variable. Una vez que se declara,
se puede almacenar lo que quieras:

Código: JavaScript

var miVariable;

miVariable = 2;

El signo = se utiliza para asignar un valor a la variable, aquí le hemos asignado el número 2. Cuando
das un valor a una variable, decimos que se trata de una asignación, ya que asigna un valor a la
variable. Es posible simplificar el código en una sola línea:

Código: JavaScript

var miVariable = 5.5 / / Como puedes ver, los números decimales se separan con un punto

Del mismo modo, puedes declarar y asignar variables en una sola línea:

Código: JavaScript

var miVariable1, miVariable2 = 4, miVariable3;

Aquí hemos declarado tres variables en una fila, pero sólo la segunda tiene valor asignado . Y la
última posibilidad, que puede ser útil de vez en cuando:

Código: JavaScript

var miVariable1, miVariable2;

miVariable1 = miVariable2 = 2;

Ambas variables ahora contienen el mismo número 2. Puedes hacer lo mismo con tantas variables
como desees.

A diferencia de muchos lenguajes, JavaScript es un lenguaje de tipado dinámicamente. Esto significa,

generalmente, que cualquier declaración de variables se hace con la palabra clave var
independientemente de su contenido, mientras que, en otros lenguajes, como el C, es necesario
especificar el tipo de contenido que tendrá que contener la variable.

135
En JavaScript, nuestras variables son tipeadas dinámicamente, lo que significa que puedes asignarle
texto primero y luego borrarlo y poner un número cualquiera y sin restricciones. Vamos a empezar
por ver cuáles son los tres tipos principales de JavaScript.

El tipo numérico (número): representa cualquier número, ya sea un entero, un número

negativo, en notación científica, etc. Este es el tipo de números. Para asignar un tipo
numérico a una variable, sólo tienes que escribir el número var numero = 5; Al igual que
muchos lenguajes, JavaScript reconoce varios formatos para los números, como por
ejemplo escribir var numero = 5.5 o en notación científica var número = 3.65 e5, o escribir
el número hexadecimal, var numero= 0x391; En resumen, hay diferentes maneras de
escribir los valores numéricos.
Cadenas de caracteres (alias string): Este tipo representa texto. Puede asignarse de dos
maneras diferentes.

Código: JavaScript

var text1 = "Mi primer texto" / /

Con comillas var text2 = 'Mi segundo mensaje' / / Con apóstrofos Es importante tener en
cuenta que si escribes miVariable var = '2 ', el tipo de esta variable es cadena de caracteres
y no un tipo numérico. Otro punto importante, si usas apóstrofos para "enmarcar" el texto
y deseas utilizar apóstrofos en el texto mismo, entonces tienes que "escapar" de los
apóstrofos como se indica seguidamente:

Código: JavaScript

var text = 'Esto \' es algo ';

¿Por qué esto? Porque si no cancelas tu apóstrofo, Javascript cree que el texto se detiene
en el apóstrofo contenido en la palabra "es". Ten en cuenta que este problema es idéntico
al de las comillas. En nuestro caso, solemos utilizar apóstrofos, pero cuando el texto los
contiene también entonces las comillas pueden ser muy útiles.

136
 Booleanos (booleano): un tipo booleano permite dos estados verdadero o falso. Estos dos
estados se pueden escribir como sigue:

Código: JavaScript

var EsVerdader = true; var EsFalso = false;

Puede ser que tengas en alguna ocasión la necesidad de probar la existencia de una variable o
comprobar su tipo. En tales situaciones, la instrucción typeof es muy útil.

Operadores aritméticos.

Ahora que se declarar una variable y se asignar un valor, Operador Símbolo

podemos comenzar con los operadores aritméticos. Suma +

El último operador, módulo, es simplemente el resto de una Resta -

división. Por ejemplo, si se divide 5 entre 2 se tiene resto 1, que Multiplicación *

es el módulo. División /
Módulo %
Programar el cálculo es casi tan fácil como en una calculadora,
por ejemplo:

Código: JavaScript

var resultado = 3 + 2;

alert (resultado) / / Muestra « 5 »

Así que puedes hacer cálculos con dos números, es bueno, pero con dos variables que contienen
números en sí es más útil:

Código: JavaScript

var número1=3, número2 = 2, resultado;

resultado = numero1 * numero2;

alert (resultado) / / Muestra: « 6 »

137
El operador +, además de las sumas, se puede

hacer lo que se conoce como concatenación entre

cadenas. La concatenación es añadir una cadena al
final de otra, como en este ejemplo:

Código: JavaScript

var hola= 'Hola', nombre = 'tu', resultado;

resultado = hola + nombre;

alert (resultado) / / muestra: « Holatu »

La concatenación es un buen momento para introducir la primera interacción con el usuario a través
de la función prompt (). He aquí cómo se usa:

Código : JavaScript

var NombreUsuario = prompt('Introduce nombre:');

alert(NombreUsuario); //

Muestra el nombre introducido. La función prompt () se utiliza como alert (), pero tiene una pequeña
particularidad. Devuelve lo que el usuario escribió bajo una cadena de caracteres, es por eso que
escribió esto:

Código: JavaScript

var texto = prompt ('Entra algo:');

Así, el texto escrito por el usuario terminará almacenado directamente en el texto variable.

Código: JavaScript

var inicio = 'Hola', nombre, final = ' !', resultado;

nombre= prompt ("¿Cuál es tu nombre? ');

resultado = inicio + nombre + final

alert (resultado);

138
Ten en cuenta que en nuestro caso concatenamos cadenas de caracteres, pero se pueden
concatenar una cadena y un número de la misma manera:

Código : JavaScript

var text o= 'Un nombre : ', numero= 42, resultado;

resultado= texto + numero;

alert(resultado); // Muestra: « Un nombre : 42 »

Ahora trataremos de hacer una adición con números proporcionados por el usuario:

Todo lo que se escribe en el campo de texto prompt () se recupera como una cadena de caracteres,
aunque sea un número. Por lo tanto, si se utiliza el operador +, no será una suma sino una
concatenación. Se ha de efectuar una conversión. El concepto es simple: convertir la cadena en un
número. Para ello, necesitarás la función parseInt () que se utiliza de esta manera:

Código: JavaScript

var texto = '1313', numero;

numero = parseInt(texto);

alert(typeof numero); // Muestra : « numero »

alert(numero); // Muestra : « 1313 »

Ahora que ya sabes cómo usarlo, vamos a ser capaces de adaptar nuestro código: Código: JavaScript

var primero, segundo, resultado;

primero = prompt ('Ingrese el primer número: ");

segundo = prompt ('Ingrese el segundo número:');

resultado = parseInt (primero) + parseInt (segundo);

alert (resultado);

Ahora, si escribes dos veces la cifra 1, el resultado es 2.

139
Eventos.

Una de las características principales de JavaScript es la posibilidad que ejecute código cuando
ocurre un evento. Un ejemplo de algunos eventos en JavaScript es:

onLoad: Cuando carga un documento HMTL.

onUnload: cuando se abandona un documento
HTML.
onMouseOver: el ratón pasa por encima de un
enlace.
onClick: se hace click sobre un enlace o un campo
de un formulario.
onSubmit: al enviar un formulario.
onChange: al cambiar el contenido de un campo
de un formulario.
KeyDown: cuando el usuario presiona una tecla
KeyUp: cuando el usuario suelta una tecla.

140
Bibliografía.

Alvarez, Miguel Angel, Gutiérrez, Manu. (2007). Manual de JavaScript. [Link]

Recuperado de:

[Link]

Gauchat, J. D. (2012). El gran libro de HTML5, CSS3 y JavaScript. Primera edición. Editorial
Marcombo. España. ISBN: 9788426717825.

141
 Instrucciones: Después de realizar la Lectura 10. Instrucciones en JavaScript
señalando lo más importante relaciona las siguientes columnas.

1. Deben estar separadas por un punto y Funciones ( 4 )

coma (;) que se coloca al final
2. Está escrito por el desarrollador. Sangría ( 7 )

3. Es un lenguaje de programación de Lenguaje interpretado ( 8 )

scripts

4. Consiste en dos partes: su nombre Instrucciones ( 1 )

seguido por un par de paréntesis.

5. Es un espacio de almacenamiento en Orientado a objetos ( 12 )

un ordenador.

6. El código fuente se da a un programa Código fuente ( 2 )

llamado compilador.

7. En la programación es una manera de Comentarios ( 10 )

estructurar el código

8. En este caso no hay compilación y el <script> ( 11 )

código fuente se mantiene sin
cambios.

9. En su mayoría son interpretados Variables ( 5 )

10. Son anotaciones realizadas por el JavaScript ( 3 )

desarrollador para dar explicaciones.

11. Los códigos son insertados a través de Scripts ( 9 )

este elemento.

12. Es un concepto bastante complicado Lenguaje compilado ( 6 )

de configurar.

142
 Instrucciones: Realiza el siguiente ejemplo paso a paso.

Ingresa a Sublime Text o Bloc de notas.

Empieza escribir la primera parte de la página HTML.

<!DOCTYPE html>
<html>
<head>
<title>Formularios en HTML y JavaScript</title>
Escribiremos el elemento <script>.

<script language="javascript">

Escribimos la función dentro del elemento <script>.

function calculos(formulario)
{
var n1,n2,n3,n4,n5,n6,n7;
n1=parseInt([Link]);
n2=parseInt([Link]);
n3=n1+n2;
n4=n1-n2;
n5=n1*n2;
n6=n1/n2;
n7=n1%n2;
[Link]=n3;
[Link]=n4;
[Link]=n5;
[Link]=n6;
[Link]=n7;
}

143
Cerramos el elemento >script>.

</script>

Cerramos el head.

</head>

Escribimos las siguientes instrucciones.

<body bgcolor="silver">

<font color="red">

<marquee>

<h1>Operaciones básicas</h1>

</marquee>

<center>

<h2>Introduce el valor de dos números</h2>

<hr size=10 color="pink">

Insertamos el formulario.

<form name="form1">

Se crean los primeros elementos del formulario.

Número 1:<input type="text" name="n1" size="3"><br>

Número 2:<input type="text" name="n2" size="3"> <br>

Se inserta el botón para el formulario.

<input type="button" value="¡Calcular!" onclick="calculos(form1)"> <br>

144
Se insertan los elementos del formulario para mostrar los resultados.

La suma de los números es:<input type="text" name="n3" size="3"><br>

La resta de los números es:<input type="text" name="n4" size="3"><br>

La multiplicación de los números es:<input type="text" name="n5" size="3"><br>

La división de los números es:<input type="text" name="n6" size="3"><br>

El residuo de los números es:<input type="text" name="n7" size="3"><br>

Cerrar el formulario.

</form>

Colocar el resto de las instrucciones.

</center>

<hr size=10 color="pink">

</font></body>

</html>

Guardar el archivo. Das clic en archivo, Guardar como, escribes el nombre

[Link] y das clic en guardar.
No cerrar el Sublime texto o bloc de notas por cualquier error que se presente para
corregirlo.
Buscas el archivo en tu carpeta y lo abres.
Se abrirá el explorador y mostrará la siguiente pantalla.

145
Escribir el valor en Número 1 y Número 2.
Dar clic en el botón calcular.

Mostrará la siguiente pantalla.

Ahora puedes cambiar el estilo de la página con CSS.

146
Instrucciones: Realizar la lectura subrayando lo más relevante para resolver la

Actividad 8. Condiciones y ciclos en JavaScript.

LECTURA 11

Aprendimos cómo crear y modificar variables. Aun así, se sienten un tanto limitados nuestros
códigos. Las condiciones amplían las posibilidades del código para ser más abiertas porque las
condiciones afectan directamente cómo el código va a reaccionar a ciertos criterios. En la mayoría
de las condiciones, se tiene un tipo famoso de variable: boolean.

Las variables boolean nos sirven para obtener un resultado como verdadero (true) o falso (false)
cuando se verifica una condición. Para aquellos que se preguntan el significado, una condición es
una especie de "test" para comprobar que una variable contiene un cierto valor.

Operadores de comparación.

Como su nombre indica, estos operadores pueden realizar comparaciones entre diferentes valores
entre ellos. En total, hay muchos, ocho, aquí están:

Operador Significado
= Igual
!= Diferente a Contenido y tipo igual a
=== Contenido y tipo igual de
!== Contenido o tipo diferente de
> Mayor que
>= Mayor o igual que
< Menor que
<= Menor o igual que

147
Código: JavaScript

var numero1 = 2, numero2 = 2, numero3 = 4, resultado;

resultado = numero1 == numero2 / / En lugar de un único valor, se han escrito dos con el
operador de comparación entre ellos

alert (resultado) / / Muestra "true", si la condición se verifica porque las dos variables
contienen el mismo valor

resultado = numero1 == numero3;

alert (resultado) / / Muestra "false", la condición no es verificada porque 2 es distinto de 4

resultado = numero1 < numero3;

alert (resultado) / / Muestra "true", la condición es verdadera porque 2 es inferior a 4

Operadores lógicos.

Puesto que funcionan con el mismo principio como una tabla electrónica de verdad. Antes de
describir su funcionamiento, lo primero que debes hacer es una lista, son tres:

Operador Tipo de lógica Utilización

&& Y valor1 && valor2
|| O valor1 || valor2
! NO !valor

Código: JavaScript

var resultado = true && true;

alert (resultado) / / Muestra "verdadero"

resultado = true && false;

alert (resultado) / / Muestra: "false"

resultado = false && false;

alert (resultado) / / Muestra: "false"

148
Condiciones.

Hay tres tipos de condiciones, vamos a empezar con la condición if else que se utiliza con frecuencia.

Código: JavaScript

if (true) {

alert ("Este mensaje se muestra bien.");

if (false) {

alert ("No hay necesidad de insistir, este mensaje

no se mostrará.");

Veamos de qué está constituida una condición:

De la estructura condicional if;

Paréntesis que contienen la condición de analizar, o más precisamente el valor booleano
devuelto por los operadores condicionales;
Llaves que definen la porción de código que se ejecutará si la condición es verdadera.
Nótese que colocamos aquí la primera llave al final de la primera línea de condición, pero
puede colocarse más o menos como se desee (por debajo, por ejemplo).

Como se puede ver, el código de condición se ejecuta si el booleano recibido es true (verdadero),
mientras que false (falso) evita la ejecución de código. Y en vista de que los operadores
condicionales reenvían booleanos, vamos a ser capaces de usarlos directamente en nuestras
condiciones:

Código: JavaScript

if (2 <8 && 8> = 4) {/ / Esta condición devuelve "true", entonces el código se ejecuta
alert ('La condición está verificada.');
}
if (2> 8 | | 8 <= 4) {/ / Esta condición devuelve "false", el código no se ejecuta
alert ("La condición no se verifica, pero nunca lo sabrá, pues el código no se está
ejecutando ").;

149
 }

Función confirm().

Su uso es sencillo: se pasa un parámetro que es una cadena que se mostrará en pantalla y lo vuelve
a booleano dependiendo de la acción del usuario,. Por ejemplo:

Código: JavaScript

if (confirm ('¿Desea ejecutar el código javascript de esta página?

')) {

alert ('El código se ha ejecutado bien')

El código se ejecuta cuando se hace clic en el botón Aceptar y no se

ejecuta cuando se haga clic en el botón Cancelar (ambos botones
aparecerían en pantalla, junto con la pregunta de si se desea usar el
código JavaScript). En el primer caso, la función devuelve true y en el
segundo caso, devuelve false. Lo que hace q ue sea una característica
muy conveniente para el uso con las condiciones.

Ya puedes ejecutar un código si una condición es verdadera y si no es

verdad, pero sería bueno saber operar como sigue:

Una primera condición debe analizarse;

Una segunda condición está presente y se pondrá a prueba si la
primero falla;
Y si ninguna condición se verifica (es verdadera), la estructura else
es entonces la que actúa.

Este tipo de estructura es muy útil para verificar varias condiciones a la vez y ejecutar su código
correspondiente. La estructura else if lo permite, por ejemplo:

150
Código: JavaScript

var suelo = parseInt (prompt ("Escriba el piso, donde el ascensor debería parar (-2 a 30): "));

if (piso == 0) {

alert ('Usted ya está en la planta baja.');

} else if (-2 <= suelo && piso <= 30) {

alert ("Dirección a la planta nº" + suelo +'!');

else {}

alert ("El piso especificado no existe.");

Ten en cuenta que la estructura else if se puede usar repetidamente, lo único que se necesita para
trabajar es que debe tener delante de ella una estructura if.

Condición Switch.

Vimos el funcionamiento de la condición if else

que es muy útil en muchos casos, sin embargo,
no es muy conveniente para cada caso, y es

que se logra con la instrucción switch.

Un ejemplo: tenemos un mueble con cuatro

cajones, cada uno conteniendo diferentes
objetos, y es necesario que el usuario pueda conocer el contenido de cada cajón, que ha sido cifrado.
Si lo hiciéramos con if else sería muy largo y tedioso. El mayor problema es tener que volver a escribir
siempre la condición, pero con switch es un poco más fácil:

151
Código: JavaScript

var cajon = parseInt (prompt ('Elegir el cajón abierto (1-4): '));

switch (cajon) {
case 1:
alert ('Contiene varias herramientas de dibujo: papel, lápices, etc. ')
break;
case 2:
alert ('Contenido hardware: cables, componentes, etc. ')
break;
case 3:
alert ('¿Ah, el cajón está cerrado malo?');
break;
case 4:
alert ('Contiene ropa: camisas, pantalones, etc. ')
break;
default:
alert ("La noticia del día: el gabinete contiene sólo cuatro cajones y, hasta que se demuestre
lo contrario, los cajones negativos no existen");
}

Condiciones ternarias.

Y finalmente aquí está el último tipo de condicional, el ternario. Son muy especiales, en primer lugar,
porque son muy rápidas para escribir (pero no leer) y sobre todo porque devuelven un valor. Para
que puedas entender qué escenario se puede utilizar las condiciones ternarias, vamos a empezar
por un pequeño ejemplo con la condición if else:

Código: JavaScript

var Mensajeinicio = 'Su categoría:',

Mensajefin, adulto = confirm ("¿Eres mayor de edad? ');
Mensajefin = adulto ? '18 + ':' -18 ';
alert (Mensajeinicio + Mensajefin);

Entonces, ¿cómo es el ternario? Para entender esto debemos mirar la línea 4 del código anterior:
Mensajefin = adulto? '18 + ':' -18 ';

152
Si desglosamos esta línea se puede ver:

Variable Mensagefin que va a recibir el resultado del ternario;

Adulto variable que será analizada por el ternario;
Un signo de interrogación seguido de un valor (número, texto, etc.)
Dos puntos (:) seguidos de un segundo valor, y, finalmente, punto y coma marca el final de
la línea de comandos.

El funcionamiento es sencillo: si la variable adulto es true (verdadera) entonces el valor devuelto

por la condición ternaria será el escrito después del signo de interrogación, si es false (falsa),
entonces el valor devuelto será el que aparece después de los dos puntos

Ciclos (bucles).

Antes de ver ciclos, hablaremos del Incremento. Considera el cálculo siguiente: Código: JavaScript

var numero = 0;

numero = numero + 1;

La variable número contiene el valor 1. La

instrucción para añadir uno es bastante
pesada para escribir y recordar, somos
perezosos. Javascript, al igual que otros
lenguajes de programación, permite lo que
se llama incremento y su opuesto
decremento,

Funcionamiento El incremento agrega una unidad a un número utilizando una sintaxis corta. En
contraste, el decremento permite restar uno.

153
Código: JavaScript

var numero = 0;

numero ++;

alert (numero) / / Muestra: "1" numero --;

alert (numero) / / Muestra: "0"

Se trata por lo tanto un método lo suficientemente rápido como para sumar o restar una unidad a
una variable.

El orden de los operadores. Hay dos formas de uso del incremento, de acuerdo con la posición del
operador ++ (o --). Vimos que se podía colocar después de la variable, pero puede situarse delante.

Código: JavaScript

numero_1 var = 0;

numero_2 var = 0;

número_1++; ++numero_2;

alert (numero_1) / / Muestra: "1"

alert (numero_2) / / Muestra: "1"

numero_1 y numero_2, tienen dos incrementos. ¿Cuál es la diferencia entre los dos
procedimientos? La diferencia está en el hecho de prioridad de la operación, y es importante si se
desea recuperar el resultado del incremento. En el siguiente ejemplo, ++numero devuelve el valor
de número incrementado, es decir 1.

Código: JavaScript

var numero = 0;

var salida = ++numero;

alert (numero) / / Muestra: "1"

alert (salida) / / Muestra: "1"

154
Ahora, si el operador se coloca después del incremento variable, la operación devuelve el valor del
número antes de que se incremente:

Código: JavaScript

var numero = 0;

var salida = número++;

alert (número) / / Muestra: "1"

alert (salida) / / Muestra: "0"

Aquí, por lo tanto, la operación numero++ no ha devuelto número con el valor incrementado.

Ciclo o bucle while.

Un bucle es una estructura condicional, similar a lo visto

previamente, excepto que se trata de repetir una serie de
instrucciones. La repetición es hasta que lo indique el bucle.
Cada vez que el bucle se repite se efectúa una iteración o
repetición.

Para ejecutar un ciclo o bucle, es necesario definir una

condición. Mientras que sea verdadera (true), el ciclo o
bucle se repite. Una vez que la condición es falsa (false), el
ciclo o bucle se detiene. Aquí se muestra un ejemplo de la
sintaxis de un ciclo o bucle while:

Código: JavaScript

while (condicion) {
sentencia_1;
sentencia_2;
sentencia_3; }

El ciclo o bucle se repite mientras que la condición sea válida. Esto significa que hay que fijar a la
vez, de modo que la condición ya no lo es, de lo contrario el ciclo o bucle se repetirá
indefinidamente. Como ejemplo, vamos a incrementar un número, que es 1, hasta 10:

155
Código: JavaScript

var numero = 1;

while (numero <10) {

número++; }

alert (numero) / / Muestra: "10"

En primer lugar, el número es 1. Al llegar al ciclo o bucle preguntará si el número es menor que 10.
Como es verdadero, se ejecuta el ciclo o bucle, y el número se incrementa. Siempre que las
instrucciones en elciclo o bucle se estén ejecutando, la condición del ciclo o bucle es reevaluada
sobre la conveniencia de volver a ejecutar el ciclo o bucle o no. En este ejemplo, el ciclo o bucle se
repite hasta que el número es igual a 10. Si el número es 10, el número de condición <10 es falso, y
se detiene el ciclo o bucle. Cuando el ciclo o bucle termina, las instrucciones posteriores al bucle
(alert () en nuestro ejemplo) se ejecutan normalmente.

Do while.

Este bucle se asemeja mucho al bucle

while, excepto que en este caso el bucle
se ejecuta siempre por lo menos una
vez. En el caso de un bucle while, si la
condición no es válida, el bucle no es
ejecutado Con do while, el bucle se ejecuta una vez, entonces la condición se comprueba para
determinar si el bucle debe continuar. La sintaxis de un bucle do while es:

Código: JavaScript

do {

sentencia_1;

sentencia_2;

sentencia_3;

} while (condición);

156
Hay una diferencia fundamental de escritura respecto al bucle while, que puede hacer ver la
diferencia entre ambos. Sin embargo, el uso de do while no es muy común, y es muy posible que no
tengas nunca que usarlo porque los programadores suelen emplear un bucle while normal con una
condición que hace que siempre se ejecute una vez. Atención a la sintaxis del ciclo do while: hay un
punto y coma después del paréntesis de cierre de while.

Ciclo o bucle for.

El bucle for se ve en su aplicación como

parecido al bucle while, pero su
arquitectura parece complicado al
principio. El bucle for es un bucle que
funciona de forma bastante simple,
pero muy compleja para los
principiantes debido a su sintaxis. Una vez que el bucle está controlado, es muy probable que se
utilice muy a menudo. El diagrama de un bucle for es:

Código: JavaScript

for (inicio; condicion, incremento) {

sentencia_1;

sentencia_2;

sentencia_3;

En los paréntesis del bucle ya no se encuentra la condición, sino tres bloques: inicio, condición e
incremento. Estos tres bloques están separados por un punto y coma, que es un poco como si los
paréntesis contuvieran tres instrucciones distintas.

El bucle por lo tanto tiene tres bloques que lo definen. El tercer bloque es el incremento que se
utiliza para el incremento de una variable en cada iteración del bucle. Por lo tanto, el bucle es útil
para contar y para repetir el bucle un número determinado de veces. En el siguiente ejemplo, vamos
a mostrar cinco veces un cuadro de diálogo con alert (), que muestra el número de cada iteración:
157
Código: JavaScript

for (var iter = 0; iter <5; iter++) {

alert ('Nº. Iteración' + iter);

En el primer bloque de inicialización, inicializamos una variable llamada iter que vale 0, la palabra
clave var se requiere, como cualquier inicialización. Se define en la condición de que el bucle
continúa mientras que iter es estrictamente menor que 5. Por último, en el bloque de incremento,
se indica que iter se incrementará en cada iteración completa.

Los tres bloques que forman el bucle for no se ejecutan al mismo tiempo:

Inicio: justo antes de que comience el bucle. Es como si las instrucciones fueron escritas
justo antes del bucle, un poco como un bucle while;
Condición: antes de cada iteración del bucle, al igual que la condición de un bucle while;
Incremento: después de cada ciclo. Esto significa que si ejecutas un break en un bucle for,
el paso en el bucle a partir de break no será contabilizado.

El bucle for es muy utilizado en Javascript, y no el bucle while, a diferencia de otros lenguajes de
programación.

158
Bibliografía.

Alvarez, Miguel Angel, Gutiérrez, Manu. (2007). Manual de JavaScript. [Link]

Recuperado de:

[Link]

Gauchat, J. D. (2012). El gran libro de HTML5, CSS3 y JavaScript. Primera edición. Editorial
Marcombo. España. ISBN: 9788426717825.

159
 Instrucciones: Después de realizar la Lectura 8. Condiciones y ciclos señalando lo
más importante resuelve el siguiente crucigrama.

1 2
B 3 D 5 4
1 C O N D I C I O N E S W E
O F C H L
2 F A L S E E 3 L O G I C O S
E L M L E
A S P E 6
4 C O N F I R M E A D
5 I N C R E M E N T O
A W
C H
I I
6 F O R L
N E

Horizontales.

1. Amplían las posibilidades del código para ser más abiertos.

2. Es un resultado que se obtiene cuando se verifica una condición.
3. Estos operadores funcionan con el mismo principio como una tabla electrónica de verdad.
4. El uso de esta función es sencillo y para un parámetro que es una cadena.
5. Agrega una unidad a un número utilizando una sintaxis costa.
6. Su arquitectura parece complicada al principio.

Verticales.

1. Es un tipo famoso de variables.

2. Estos operadores realizan comparaciones entre diferentes valores.
3. Es el primer tipo de condiciones.
4.
5. Para ejecutar este ciclo es necesario definir una condición verdadera.
6. Este ciclo se ejecuta por lo menos una vez.

160
 Instrucciones: Realiza la siguiente actividad para utilizar condiciones en
JavaScript en una página HTML respetando las indicaciones.

Software a utilizar:

Sublime text o bloc de notas.

Condiciones:

Los seres humanos siempre estamos tomando decisiones que afectan nuestras vidas, desde la más
sencilla ¿qué voy a comer hoy?, hasta la más complicada ¿qué voy a hacer en mi vida, elijo estudiar
programación o astronomía?

Situación planteada.

La pizzería Bella Pizza ofrece pizzas vegetarianas y no vegetarianas a sus clientes. Los ingredientes
para cada tipo de pizza aparecen a continuación.

Ingredientes vegetarianos: Pimiento y tofu.

Ingredientes no vegetarianos: Peperoni, Jamón y Salmón.

Escribir un programa que pregunte al usuario si quiere una pizza vegetariana o no, y en función de
su respuesta le muestre un menú con los ingredientes disponibles para que elija. Solo se puede
elegir un ingrediente además de la mozzarella y el tomate que están en todas las pizzas. Al final se
debe mostrar por pantalla si la pizza elegida es vegetariana o no y todos los ingredientes que lleva.

161
Procedimiento:

Ingresar a Sublime text o Bloc de notas.

Empieza escribir la primera parte de la página HTML.

<!DOCTYPE html>
<html>
<head>
<title>Página en HTML con condiciones en JavaScript</title>
Escribirmos el elemento <script>.

<script language="javascript">
Escribimos la función dentro del elemento <script>.

function condicion(formulario)
{
var n1,n2,n3,n4;
n1=parseInt([Link]);
if(n1==1)
{
n4='Vegetariana';
n2=parseInt(prompt("Los ingredientes de la pizza vegetariana son: 1. Pimiento 2.
Tofu"));
if(n2==1)
{
n3='Pimiento';
}
else
{
n3='Tofu';
}
}
Else

162
 {
n4='No vegetariana';
n2=parseInt(prompt("Los ingredientes de pizzas no vegetarianas son: 1. Peperoni 2.
Jamón 3. Salmón"));
if(n2==1)
{
n3='Peperoni';
}
if(n2==2)
{
n3='Jamón';
}
if(n2==3)
{
n3='Salmón';
}
}
[Link]=n3;
[Link]=n4;
}
Cerramos el elemento >script>.

</script>
Cerramos el head.

</head>
Escribimos las siguientes instrucciones.

<body bgcolor="black">
<font color="white">
<marquee>
<h1>Pizzeria Bella Pizza</h1>

163
</marquee>
<center>
<h2>Bienvenidos</h2>
<hr size=15 color="white">
<h3>Pizzas</h3>
<h3>1. Vegetarianas</h3>
<h3>2. No vegetarianas</h3>
<h3>Ingredientes vegetarianos</h3>
<h3>1. Pimiento</h3>
<h3>2. Tofu</h3>
<h3>Ingredientes no vegetarianos: </h3>
<h3>1. Peperoni</h3>
<h3>2. Jamón</h3>
<h3>3. Salmón</h3>
Insertamos el formulario.

<form name="form1">
Se crean los primeros elementos del formulario.

¿Qué pizza desea ordenar 1 o 2?<input type="text" name="n1" size="3"><br>

Se inserta el botón para el formulario.

<input type="button" value="Elegir" onClick="condicion(form1)"><br>

Se insertan los elementos del formulario para mostrar los resultados.

Pizza <input type="text" name="n3"> con mozarella, tomate y <input type="text"

name="n2"><br>
Cerrar el formulario.

</form>
Colocar el resto de las instrucciones.

</center>
<hr size=15 color="white">
</font></body>
</html>

164
Guardar el archivo. Das clic en archivo, Guardar como, escribes el nombre
[Link] y das clic en guardar.
No cerrar el Sublime texto o bloc de notas por cualquier error que se presente para
corregirlo.
Buscas el archivo en tu carpeta y lo abres.
Se abrirá el explorador y mostrará la siguiente pantalla.

Escribir el valor en

Dar clic en el botón Elegir.

Mostrará la siguiente pantalla. (Siguiente Página)

165
Escribes el número que desees en el cuadro de texto y das clic en aceptar.

Se muestra la siguiente pantalla. (Siguiente Página)

166
Insertar debajo de la palabra Bienvenido la imagen de una pizza ni muy grande ni muy
pequeña.
Cambia el estilo de la página con CSS

167
 INSTRUMENTO DE EVALUACIÓN
LISTA DE COTEJO
Actividad 6. Condiciones en mi página

DATOS GENERALES
Nombre(s) del alumno(s) Matrícula

Producto: Página Web con código JavaScript Fecha:

Materia: Submódulo II. Páginas Web Periodo: 21 A
Nombre del docente: Firma del docente:

VALOR OBSERVACION
CRITERIO INDICADORES OBTENIDO PONDERACIÓN CAL ES Y/O
SI NO IF SUGERENCIAS
DE MEJORA
1 Crea el archivo HTML con 1
la estructura de la página
Web.
2 Crea el código en 2
JavaScript
3 Incluye la imagen en el 1
centro
4 Crea el CSS para los estilos 1

5 Incluye diferentes colores 1

de texto por medio de los
estilos
6 Crea el formulario en la 2
página Web
7 Realiza la ejecución de la 1
página Web sin errores
8 Entrega en tiempo y forma 1

CALIFICACIÓN

168
 Instrucciones: Realiza la siguiente actividad para utilizar ciclos en
JavaScript en una página HTML respetando las indicaciones.

Software a utilizar:

Sublime text o bloc de notas.

Situación planteada.

Una empresa realiza una bonificación especial para 5 empleados que escogieron al azar, para las
bonificaciones se tendrán en cuenta dos aspectos, antigüedad en la empresa y número de hijos
teniendo en cuenta lo siguiente.

Antigüedad:

Menos de 5 años no tiene bonificación.

De 6 a 10 años, bonificación 5% del salario.
Más de 10 años bonificación 10% del salario.

Número de hijos:

1 hijo bonificación 5000.

2 hijos bonificación 10000.
3 hijos bonificación 15000.
4 hijos o más bonificación 20000.

La empresa necesita una página Web que le permita calcular:

1. Bonificación total de cada empleado.

2. Bonificación total pagada a todos los empleados por antigüedad.
3. Total, de empleados con menos de 3 hijos.

169
Procedimiento:

Ingresar a Sublime text o Bloc de notas.

Empieza escribir la primera parte de la página HTML.

<!DOCTYPE html>

<html>

<head>

<title>Página en HTML con ciclos en JavaScript</title>

Escribimos el elemento <script>.

<script language="javascript">

Escribimos la función dentro del elemento <script>.

<script language="javascript">

Escribimos la función dentro del elemento <script>.

function ciclo(formulario)

var n0,n1,n2,n3,n4,n5,n6,n7,n8;

n5=0;

n6=0;

n7=0;

n0=parseInt([Link]);

while (n7 < n0)

n1=parseInt(prompt("Salario del empleado:"));

n2=parseInt(prompt("Antiguedad del empleado:"));

n3=parseInt(prompt("Numero de hijos del empleado:"));

if(n2<=5)

170
n4=0;

};

if((n2>5) || (n2<=10))

n4=n1*(5/10);

n6=n6+n4;

};

if(n2>10)

n4=n1*(10/100);

n6=n6+n3;

};

if(n3==1)

n8=n4+5000;

n5++;

};

if(n3==2)

n8=n4+10000;

n5++;

};

if(n3==3)

n8=n3+15000;

};

if(n3>=4)

171
 {

n8=n3+20000;

};

alert("La bonificación total del empleado es:" + n8);

n7++;

};

[Link]=n6;

[Link]=n5;

Cerramos el elemento >script>.

</script>

Cerramos el head.

</head>

Escribimos las siguientes instrucciones.

</script></head>

<body bgcolor="gold">

<font color="white">

<marquee>

<h1>Ciclos en JavaScript</h1>

</marquee>

<center>

<h2>Datos de los empleados beneficiados</h2>

<hr size=20 color="silver">

<h3>Para iniciar da clic en Beneficio</h3>

Insertamos el formulario.

<form name="form1">

Se crean los primeros elementos del formulario.

172
Número de empleados beneficiados:<input type="text" name="n1" size="3"><br>

Se inserta el botón para el formulario.

<input type="button" value="Elegir" onClick="condicion(form1)"><br>

Se insertan los elementos del formulario para mostrar los resultados.

Bonificación total pagada a todos los empleados por antiguedad:<input type="text"

name="n2"><br>

Total de empleados con menos de 3 hijos:<input type="text" name="n3"><br>

Cerrar el formulario.
</form>
Colocar el resto de las instrucciones.

</form>

<hr size=20 color="silver">

</font>

</center>

</body>

</html>

Insertar debajo de Datos de los empleados beneficios la imagen que se muestra ni muy
grande ni muy pequeña. Solicitarla al docente.

173
Guardar el archivo. Das clic en archivo, Guardar como, escribes el nombre
[Link] y das clic en guardar. En donde CCGH son las
iniciales de tu nombre y E el grupo.
No cerrar el Sublime texto o bloc de notas por cualquier error que se presente para
corregirlo.
Buscas el archivo en tu carpeta y lo abres.
Se abrirá el explorador y mostrará la siguiente pantalla.

Escribir el valor en:

Dar clic en el botón Beneficio.

Mostrará la siguiente pantalla. (siguiente página)

174
Se escriben los datos que se solicitan y al final muestra la siguiente pantalla.

Cambia el estilo de la página con CSS.

175
 INSTRUMENTO DE EVALUACIÓN
LISTA DE COTEJO
Actividad 10. Mi página enciclada

DATOS GENERALES
Nombre(s) del alumno(s) Matrícula

Producto: Página Web con ciclos en JavaScript Fecha:

Materia: Submódulo II. Páginas Web Periodo: 21 A
Nombre del docente: Firma del docente:

OBSERVACIONE
CRITERIO INDICADORES VALOR PONDERACIÓN CA S Y/O
OBTENIDO LIF SUGERENCIAS
SI NO DE MEJORA
1 Crea el archivo HTML con la 1
estructura de la página
Web
2 Crea el código con ciclos en 2
JavaScript
3 Incluye la imagen en el 1
centro
4 Crea el CSS para los estilos 1
5 Incluye diferentes colores 1
de texto por medio de los
estilos
6 Crea el formulario en la 2
página Web
7 Realiza la ejecución de la 1
página Web sin errores
8 Entrega en tiempo y forma 1

CALIFICACIÓN

176
Instrucciones: Escribe la estructura de una Página Web utilizando los elementos
básicos, y agrega lo visto en JavaScript, no olvides si gustas agrega estilos CSS puedes
utilizar SublimeText, o en la aplicación que tu docente te solicite, si NO puedes
realizarlo en la aplicación puedes escribir a mano el código.

PRÁCTICA 7 USANDO JAVASCRIPT EN MI PÁGINA WEB

Conocimientos:

Sublime text o bloc de notas.

HTML
CSS
JavaScript
Condiciones.
Ciclos

.Software a utilizar.

Sublime text o bloc de notas.

Materiales.

Solicitar al docente las siguientes imágenes.

LotipoCinemex.
ImagenPelicula1.
ImagenPelicula2
ImagenPelicula3
ImagenPelicula4
ImagenPleicula5

177
Situación planteada:

Realizar la página web que simule la venta de boletos en Cinemex, el usuario seleccionará la película
a ver, el número de boletos a compra, el complejo cuenta con 5 salas de exhibición. No olvidando
lo siguiente:

Miércoles: Costo de la entrada $45 pesos. Mayores de 60 años y menores de 12 pagan $42
pesos.
Días restantes:

- Funciones antes de las 18:00 horas tienen un costo de $52 pesos.

- Funciones después de las 18:00 horas tienen un costo de $65 pesos.

Pantalla Digital 3D tiene un costo de $80 pesos todos los días.

El trabajador del cine preguntará el número de personas, adultos, niños, adultos mayores.

Tipo de sala:

1. Normal.
2. 3D.

Número de sala.

1. Sala 1.
2. Sala 2
3. Sala 3
4. Sala 4.
5. Sala 5.

Día de la semana.

1. Lunes.
2. Martes.
3. Miércoles.
4. Jueves.
5. Viernes.
6. Sábado.
7. Domingo.

178
Dependiendo de la selección se obtiene el total a pagar, mismo que se va a ir almacenando en un
acumulador. Utilizar condiciones.

La función JavaScript se repetirá hasta que el usuario conteste que no desea introducir otro cliente.
Utilizar ciclos.

Al salir del ciclo se mostrarán los totales por sala en pesos y el total de boletos vendidos también
por sala.

Procedimiento:

Ingresar a Sublime text o bloc de notas.

Crear un archivo nuevo.
Crear la página HTML.
Crear el código JavaScript con acumulador, condiciones y ciclo.
Crear el CSS para estilo.
Introducir el logotipo de Cinemex.
Mostrar una imagen de película para cada sala.
Mostrar el total por cada sala en pesos.
Mostrar total de boletos vendidos por cada sala.
Mostrar el total de boletos vendidos en todas las salas.
Guardar con el nombre Practica7UsandoJavaScriptCCGH4E. Donde CCGH son las iniciales de
tu nombre y E es el grupo.

179
 INSTRUMENTO DE EVALUACIÓN
LISTA DE COTEJO
Práctica 7. Usando JavaScript en Mi Página Web

DATOS GENERALES
Nombre(s) del alumno(s) Matrícula

Producto: Página Web con condiciones y ciclo Fecha:

en JavaScript
Materia: Submódulo II. Páginas Web Periodo: 21 A
Nombre del docente: Firma del docente:

OBSERVACION
CRITERIO INDICADORES VALOR PONDERACIÓN CAL ES Y/O
OBTENIDO IF SUGERENCIAS
SI NO DE MEJORA
1 Crea el archivo HTML con 1
la estructura de la página
Web
2 Crea el código con 2
condiciones y ciclo en
JavaScript
3 Incluye las imágenes 1
solicitadas
4 Crea el CSS para los estilos 1
5 Utiliza los acumuladores 1
solicitados
6 Crea el formulario en la 1
página Web
7 Realiza la ejecución de la 1
página Web sin errores
8 Muestra los totales 1
solicitados
9 Entrega en tiempo y 1
forma

CALIFICACIÓN

180
Instrucciones: Realizar la lectura subrayando lo más relevante para resolver la

Actividad 11 y Práctica 8. Publicando la Página Web Dispositivos Móviles.

LECTURA 11 PUBLICANDO LA PAGINA WEB

Determinando la mejor Opción para mi Pagina Web

Para poder publicar tu web en Internet y que todo el mundo pueda verla necesitas una serie de
recursos. No basta con planear la página web y desarrollar la web. Una vez la tienes creada hay que
hacerla accesible a cualquiera que quiera visitarla. Para ello, los siguientes pasos pueden ayudarte.
Debes empezar con conocer dos conceptos indispensables para lograr este propósito, hosting y
domino, vamos a identificar cada uno.

¿Qué es un dominio de internet y cuál es su importancia para un sitio web?

A grandes rasgos, un dominio web es el nombre único que se le asigna a un sitio web. Haciendo
una analogía: si un sitio web es una casa, el dominio es su dirección. Cada sitio web tiene un nombre
de dominio, y este nombre es único para cada sitio.

En términos prácticos, el dominio es una dirección virtual que identifica la presencia en internet de
una persona, empresa u organización, y que sirve para dirigir a los visitantes hacia un sitio web, así
como para crear cuentas personalizadas de correo electrónico. Estrictamente hablando, el dominio
es una cadena de caracteres única que un usuario debe ingresar a un navegador web para acceder
a un sitio web específico.

181
Por ejemplo, para visitar el sitio de GoDaddy no basta con

solamente le indicará al buscador que se ponga a buscar

todo lo relacionado con GoDaddy, como se ve en este
ejemplo:

Así, para acceder directamente al dominio de GoDaddy

lo correcto sería escribir: [Link].

Internet es una inmensa red de computadoras conectadas entre sí a través de una infraestructura
global. Para identificarlas, a cada computadora se le asigna una dirección Protocolo de Internet (IP
en inglés), que es una compleja cadena de números y letras que las computadoras usan para
reconocer un sitio web. Una dirección IP típica se ve así:

[Link]

¡Imagínate que tuvieras que recordar todos estos números para visitar tus páginas web favoritas!

Pues precisamente los dominios de internet fueron inventados para resolver este problema. De ahí
la importancia de tener un nombre de dominio simple y fácil de recordar, dado que esto ayuda a
que las personas puedan encontrar tu sitio web sencillamente.

Ahora, los nombres posibles para tener un sitio web son finitos, así como la competencia por estar
en la mente de los usuarios, así que existe una alta demanda en el mercado de dominios de internet.
Como resultado, cada nombre de dominio tiene un valor monetario y se puede comprar, vender e
intercambiar a través de varios distribuidores en línea.

182
 Elementos que forman la estructura de un dominio de internet

Muchas veces se habla de diferentes tipos de dominios, pero en realidad todo se reduce a los dos
componentes principales del dominio web: un nombre y una extensión de dominio.

[Link]
Ahora entiendo
la importancia
del dominio y
hosting

Partes del dominio

El nombre de dominio es básicamente la parte que va después del (o, en el
caso de tu correo, lo que sigue al signo de @) y la extensión de dominio es la parte final

Tipos de dominios web

Utilizando un lenguaje más técnico, el nombre y la extensión representan a los dos niveles que
construyen un dominio web, y existen términos específicos para identificarlos: la extensión se
conoce como dominio de nivel superior (TLD por sus siglas en inglés) y el nombre se identifica
como dominio de segundo nivel (SLD). En el ejemplo que mostramos arriba, el nombre de dominio
misitioweb

Estos términos suenan complejos, pero podemos aclararlos al explicar los tipos de dominios que
existen:

Dominios de nivel superior (TLD). También denominados sufijos o extensiones de dominio, los TLD
son el segmento final del nombre de un dominio. Como ya lo mencionamos, el TLD en nuestro

La Corporación de Internet para la Asignación de Nombres y Números (ICANN), que es una

organización sin fines de lucro con sede en Estados Unidos, es la encargada de crear e implementar
las políticas para los nombres de dominio, así como de verificar los registros de sitios en las
diferentes extensiones disponibles. Para ICANN, hay dos tipos principales de extensiones de
dominio:

183
 Dominios genéricos o gTLD (generic Top-Level Domain)

Son el tipo más común de extensión. Las 5 más utilizadas son: .com, .net, .org, .edu y .gob. Su
función es definir el propósito de un sitio web, por ejemplo para fines comerciales (.com) o
educativos (.edu).

Y últimamente han aparecido muchos dominios genéricos nuevos. Algunos ejemplos son:

Dominios geográficos o ccTLD (country code Top-Level Domain)

Se utilizan para localizar un dominio en un territorio o país determinado. Se conforman por dos
letras asociadas con el país de origen, por ejemplo: .mx es la extensión para México, .us para
Estados Unidos y .uk para el Reino Unido. Muchas compañías u organizaciones prefieren registrar
su dominio con estas extensiones para señalar que están ubicadas en dicho país o que hacen
negocios en cierta región.

Dominios de segundo nivel (SLD). Es la sección después del www. y antes de la extensión o TLD, y
es la parte más importante del dominio porque representa la identidad principal del sitio web ante
los usuarios. Así, el papel del SLD es reforzar la identidad de la marca o del sitio web. En nuestro
ejemplo, justamente, la marca y el dominio son uno mismo: misitioweb.

Dominios de tercer nivel. Existe una subcategoría de los TLD, que consiste en combinar un dominio
genérico de primer nivel con una extensión de país. El ejemplo más claro es

Esta es la opción a la que acuden muchos negocios nuevos que quieren registrar un dominio que ya
está ocupado en el TLD de primer nivel, además de que suelen ser más económicos.

184
 Diferencia entre dominio y URL

Antes hablamos sobre los caracteres que conforman al nombre de dominio, y quisimos incluir este
punto particular porque sabemos que algunas personas pueden confundir al dominio con la URL,
pese a que existen diferencias sustanciales.

¿Qué es una URL?

URL son las siglas en inglés de Uniform Resource Locator o Localizador Uniforme de Recursos, que
es la dirección específica asignada a cada uno de los recursos disponibles en la red, con la finalidad
de que estos puedan ser localizados o identificados. Por ejemplo, la siguiente URL:

[Link]

Te lleva directamente al sitio de GoDaddy donde se encuentra nuestro buscador de nombres de

dominio.

Como puedes ver, esta URL contiene el dominio principal de GoDaddy ([Link]) y otros
elementos:

El protocolo y el certificado de seguridad. El inicio de una URL es el protocolo de entrada,

que indica al navegador cómo acceder a un recurso web específico. La mayoría de las
direcciones web utilizan HTTP (Protocolo de transferencia de hipertexto) o el estándar
recomendado HTTPS (HTTP con certificado de seguridad SSL). En el ejemplo anterior,
https://

185
Cabe mencionar que en los inicios de internet, los certificados de seguridad sólo los utilizaban los
sitios de e-Commerce para proteger los datos financieros de sus clientes. Hoy en día, hasta los sitios
web informativos los utilizan para darle seguridad al usuario que navega por sus páginas. La forma
más fácil de identificarlo es por el símbolo del candado junto a la URL:

Aprende que es el Certificado de

seguridad SSL

El subdominio. Es un subgrupo de los tipos de dominio ya mencionados y sirve para crear

secciones diferenciadas dentro del dominio principal. Si la URL incluye un subdominio,
éste viene antes del nombre del dominio, separado por un punto. En nuestro ejemplo,
[Link] mx. es el subdominio. (Ojo:
no confundir con una extensión .mx, que en este caso sería otro dominio totalmente
distinto al principal).

Como podrás notar, no todos los subdominios incluyen las siglas www. de World Wide Web antes
del nombre de dominio, y tú como usuario quizá ya te acostumbraste a escribirlo sin las iniciales
RLs sin subdominio también
son comunes.

La ruta. Esta sección de la URL define el recurso exacto que se va a mostrar en el

navegador web. Es todo lo que aparece después del nombre de dominio. En el ejemplo,
la ruta sería: /domains/domain-name-search. Es importante notar que la ruta siempre
empieza con una diagonal (/) y distingue entre mayúsculas y minúsculas.

El directorio o subcarpeta. Esencialmente, esta sección de la URL es una carpeta dentro

del sitio web principal que alberga el recurso específico. En nuestro
ejemplo, /domains/ es el directorio. Algunas URL tienen subcarpetas dentro de los
directorios.

186
 El nombre del archivo. Es la última sección de la URL. Le indica al servidor web el
documento exacto que debe mostrar al usuario final. En nuestro ejemplo, el archivo o
página es /domain-name-search. Las extensiones de archivo comunes incluyen .pdf,
.png y .html.

Con todo lo visto hasta ahora, en el siguiente gráfico podrás ver claramente las partes que
conforman una URL:

En conclusión, la principal diferencia entre dominio y URL es que el primero es el nombre del sitio
web, mientras que el segundo se utiliza para acceder a una página específica del sitio web. Así, cada
página, imagen o medio tiene una URL única.

¿Cómo funciona un dominio y cuál es el rol del Servidor de Nombres de Dominio?

Ahora sabes que el dominio web es el nombre de tu sitio en internet, que tiene dos secciones
principales digamos que es como el nombre y apellido de una persona
que agregues a ese dominio servirán para encontrar una página o archivo específico en internet.

Ahora llega el momento de explicar cómo funciona todo en conjunto.

A grandes rasgos, un Domain Name System también denominado Servidor de Nombres de

Dominio o DNS por las siglas del inglés es una gran base de datos que contiene muchas direcciones
IP (¿recuerdas que hablamos de ellas en el primer punto?), así como el listado de personas,
entidades o empresas que reclaman la propiedad sobre dichos sitios.

El proceso que te permite ingresar a un sitio web a través de un sistema DNS ocurre en milisegundos
y de forma imperceptible para el ojo humano. A continuación, lo resumimos:

187
1. Cuando escribes el dominio [Link] en tu navegador web y das clic al botón
Enter, inmediatamente se envía una solicitud al proveedor de servicios de internet (ISP
en inglés, es decir, tu compañía telefónica o proveedor de banda ancha) que cuenta con
servidores DNS propios, también llamados solucionadores de DNS.

2. El solucionador de DNS de tu ISP reenvía la solicitud a un servidor de nombres de raíz,

que revisa si en los servidores del ISP existe alguna referencia almacenada en caché
(temporalmente) sobre la IP o la fuente directa del dominio [Link]. Si es así,
el solucionador recibe los datos de la página; si no, acude a un nivel superior.

3. Entonces, el solucionador de DNS reenvía la solicitud a un servidor de nombres de

dominio superior, donde se ubican todos los dominios .com. Este DNS responde a la
solicitud con la información sobre algún servidor de nombres asociado con el dominio
[Link] (por ejemplo, algún DNS de GoDaddy).

4. El solucionador acude al DNS de GoDaddy asociado con [Link], obtiene la

dirección IP (por ejemplo: [Link]) asociada y la transmite de regreso al usuario.

5. Finalmente, el navegador web obtiene la IP, recupera los archivos del sitio web y te
muestra la página web en tu pantalla.

Ejemplo de consulta de dominio de internet

188
¿Y por qué es importante el DNS?

Como mencionamos anteriormente, un DNS se utiliza comúnmente para asignar nombres de

dominio a direcciones IP, particularmente la dirección IP del hosting donde se aloja tu dominio.
Saber esto es importante en caso de tener que redirigir tu dominio a otro servicio de hosting.

Por eso es fundamental que, al adquirir un dominio, registres el DNS del hosting que vayas a utilizar

En general, los DNS de un dominio utilizan dos direcciones IP: una para el DNS primario y otra para
el DNS secundario. Esto se hace en caso de que la primera IP tenga problemas o deje de funcionar.
Normalmente se parecen a esto:

[Link]
[Link]

Así, si tu dominio no está correctamente configurado o tus DNS no apuntan a un hosting particular,
los usuarios de internet no podrán acceder a tu sitio y verán un error como este:

189
 ¿Cómo puedo registrar un dominio web?

Antes de comprar tu dominio, es importante que conozcas la estructura a

través de la cual se realiza el registro en internet. En este proceso participan
tres actores esenciales que, ordenados de forma jerárquica, se
llaman registro, registrador y registrante:

Registro. Es la organización que posee los derechos de las extensiones de dominio. El registro se
encarga de crear dominios de nivel superior, así como de establecer las pautas para usar los TLD y
distribuir los derechos para vender esos dominios a los registradores. Algunos registros populares
son:
CONSULTA EL QR
PARA VER COMO LA
1. Donuts EMPRESA GODADDY
TE AYUDA A
REGISTRAR UN SITIO
2. VeriSign

3. Afilias

4. Amazon Registry Services

5. Global Registry Services

Registrador. Es la plataforma mediante la cual se pueden adquirir dominios. Es

el intermediario ante el registro para vender extensiones a los usuarios que quieren
adquirirlas.

Siempre que quieras comprar un dominio deberás acudir con un registrador.

Esta estructura permite que varios registradores ofrezcan las mismas extensiones de dominio, y
explica también por qué es posible encontrar un mismo nombre de dominio en varios registradores.

Además de la compra-venta, otras funciones del registrador son: administrar, renovar o transferir
los registros de nombres de dominio a otros registradores, y ofrecer un sistema para gestionar los
registros de los usuarios.

Registrante. Es la persona, entidad o empresa que registra un dominio en un registrador.

Es decir, es el dueño del dominio.

190
En palabras más simples, tú como registrante podrías
GoDaddy, pero a su vez GoDaddy trabajó con el registro de VeriSign para poder ofrecerte ese
dominio.

Y una vez que hayas encontrado tu dominio ideal, debes seguir estos sencillos pasos para registrarlo:

1. Ir con un registrador y verificar la cuota de registro del dominio que quieres.

2. Crear una cuenta con el proveedor de tu elección.

3. Pagar el dominio, lo cual te dará derecho a ser propietario de ese dominio por una
cantidad determinada de tiempo.

4. Si lo deseas, puedes obtener servicios adicionales como seguridad SSL si tu proveedor

los ofrece.

¿Cómo hacer que mi dominio aparezca en internet?

Para llevar tu propuesta a internet, además de un dominio necesitarás tener bajo control los
elementos básicos de la web, que son sitio, página y hosting.

El sitio y la página los conoces bien: uno es el conjunto de páginas y archivos (como imágenes o
lo que ve el usuario en una sola
URL
experiencia a los potenciales visitantes de tu sitio.

¿Qué es el hosting?

Por su parte, el hosting o alojamiento web son las computadoras donde se almacenan los datos de
tu sitio en línea. A estas computadoras se les denomina servidores, y las empresas de hosting
ofrecen servidores web como un servicio.

Retomando la analogía que escribimos al principio, el dominio es la dirección, el sitio web es la casa,
una página web puede ser uno de los ladrillos y el hosting es el terreno donde está construida. Para
que tengas un mayor control sobre los datos de tu sitio, así como de la configuración de sus
servidores, lo más recomendable es comprar tu dominio y hosting de una misma compañía.

191
Así también podrás administrarlos con una sola cuenta y aprovechar los descuentos que suelen
ofrecer por adquirir un paquete con ambos servicios Si acaso ya contrataste estos elementos por
separado, ¡no te preocupes! Solamente necesitarás enviar a tu proveedor de hosting la información
proporcionada por el sistema de denominación de dominio, o DNS.

Protección de marca y otras consideraciones sobre registro de dominios

Debes considerar que puedes usar tu nombre con varias extensiones (o sea, con diferentes dominios
de nivel superior), pero sólo se pueden registrar una vez

Así que es importante registrar tu dominio lo antes posible para evitar perder el nombre perfecto
para tu página, y evitar que otras personas o compañías puedan realizar acciones especulativas con
tu nombre. Y algo todavía más importante es que, antes de efectuar el registro, te asegures
de verificar que el nombre elegido de dominio no pertenezca a una marca registrada, ya que
podrías tener problemas judiciales por apropiación indebida de propiedad intelectual.

Estas son otras cuestiones que debes tomar en cuenta antes de registrar un dominio de internet:

Opciones a la medida. En el mercado hay varias promociones de paquetes donde puedes

adquirir hosting web con dominio incluido. Aquí sólo debes asegurarte de elegir el plan
que más te convenga, para que no pagues un espacio de almacenamiento o una cantidad
de dominios que no vas a usar.

Validez del registro. Entre los varios datos del contrato de registro debe aparecer tu
nombre como registrante (propietario) y como contacto administrativo. Aunque
también puedes registrarte como anónimo.

Herramientas de administración. El registrador debe ofrecerte una plataforma para

hacer modificaciones básicas en los datos de tu registro de dominio como son: cambiar
y actualizar el contacto administrativo y de facturación; redirigir el dominio a una URL
diferente; modificar las DNS del dominio; revisar la fecha de expiración del registro para
renovación.

192
 Estabilidad y soporte técnico. Un registrador serio siempre estará disponible para
resolver tus dudas y responder en caso de problemas técnicos. Asimismo, los
registradores de prestigio no desaparecerán de la noche a la mañana, por lo que tendrás
certeza de que tu dominio siempre estará ahí.

Ahora que estoy listo para comprar un dominio, ¿qué sigue?

Está más que claro que el marketing digital es imprescindible en esta época de tecnologías móviles
y redes sociales. Tan sólo por mencionar un dato, los expertos estimaron en el año 2019 que más
de 155 millones de personas en América Latina adquirirían productos y servicios en línea, un 18%
más comparado con las 126.8 millones de compras registradas en la región dos años antes.

Considerando este dato, debes pensar que tener un dominio web te da la posibilidad de crear una
presencia digital atractiva y accesible en todo momento, dirigida a los consumidores de hoy que
usan internet para cualquier consulta: desde decidir qué desayunar hasta planear sus vacaciones o
una boda.
Ahora que aprendiste el funcionamiento de los dominios de internet, sus características y las
particularidades del proceso de registro, estás listo para dar el primer paso hacia la creación de tu
sitio web. Para eso te recomendamos el Creador de páginas web de GoDaddy, una herramienta de
edición y publicación en línea que te ayuda a crear una página web fácilmente y sin necesidad de
contar con habilidades técnicas.

193
Instrucciones: Usando colores diferentes encuentra y encierra los
términos relacionados con la Publicación Web

194
 PARTE 2.
Instrucciones: Coloca el termino para completar el enunciado de forma correcta los
términos relacionados con la Publicación Web

195
Instrucciones: Con el equipo de 5 integrantes formado, y tu Pagina Web que da solución

a la Situación Didáctica plateada lista y totalmente funcional. Realiza:

PRÁCTICA 8 PUBLICANDO MI PAGINA WEB SITUACIÓN DIDACTICA

Instrucciones
Accesa a la siguiente pagina de Hosting gratuito [Link]
1. Da clic en Empezar y selecciona Hosting Gratuito
2. Da clic en Registro Gratuito en la página puedes hacer uso de tu correo electrónico o el
correo de Gmail del equipo.

196
 3. Se presenta una pantalla de bienvenida y damos clic en
not my first rodeo, take me to the Panel.(Este no es mi primer
rodeo, muéstrame el Panel).

4. Escribimos el nombre de nuestro proyecto este será el

nombre de la empresa de la situación didáctica seguido de las
siglas SD o el indicado por tu docente. Ejemplo MITIENDASD y
damos clic en Generate Password(Generar Contraseña).
5. Damos clic en SUBMIT

6. Nos solicita dar clic Upload your site que es la herramienta que vamos a utilizar en este caso
como ya tenemos creado nuestra pagina y solamente vamos a subirlo para publicarlo en
internet.
7. Se presenta la pantalla parecida a un explorador que es el lugar donde nos permitirá subir
cada uno de los archivos que integran la pagina web entre ellos el [Link] y todas las
imágenes o videos que la forman.

En esta sección es donde subiremos todos nuestros archivos con extensión HTML como por ejemplo
el [Link] y todo los creados para la pagina web, para el caso de las imagen y videos se les
recomienda crear en este mismo apartado una carpeta para este fin que veremos más adelante.

197
8. Da clic en la opción Upload Files.
9. Selecciona y Agrega uno por uno los archivos de la pagina web como se muestra en la
imagen.

10. Crea una Nueva Carpeta y coloca como

nombre exactamente el mismo nombre que
le colocaste en tu computadora en este
caso usaremos como ejemplo el nombre
IMÁGENES es muy importante que le
coloques el mismo nombre a la carpeta en
donde están guardadas tus imágenes de
forma local.
11. Agrega a la Carpeta IMÁGENES
todas las imágenes que se utilicen en la
pagina de la misma forma que agregaste los
archivos de [Link] y los demás, recuerda
solo en esta carpeta colocaras las imágenes
y videos.

12. Regresa al sitio donde aparece tu perfil de registro y ahí podrás observar la pagina creada
da clic sobre ella junto con ella la dirección o URL de tu página, esta la puedes copiar para
después compartirla con tu docente y tus compañeros, como se muestra en la figura.

198
 13. Puedes dar clic en el link para ver su presentación en el navegadora web.

14. En este caso solo se vera la dirección y las imágenes predeterminadas por ser un ejemplo
en tu caso se debe ver tu pagina web terminada con todas sus imágenes y video.

SI QUIERES VER EL PROCESO PASO A PASO ACCESA AL CODIGO QR

15. ENTREGA EN EL FORMATO QUE TE SOLICITA TU DOCENTE LA

DIRECCION URL PARA SU EVALUACIÓN FINAL.
16. ESTA ACTIVIDAD SE EVALUA CON LA LISTA DE COTEJO DE LA
SITUACION DIDACTICA LOCALIZA AL INICIO DEL SUBMODULO.

199
 Bibliografia Formato APA
BIBLIOGRAFIA

Bibliografía
Marco, B. S. (Octubre de 2016). Páginas Web HTML y hojas estilos CSS. Obtenido de
[Link]
Marco, B. S. (Junio de 2020). Páginas web HTML y hojas de estilo CSS. Obtenido de
[Link]
Theme Technologies LLC. Operated by Jetimpex Inc. (Marzo de 2020). MonsterHelp.
Obtenido de [Link]
[Link]

Alvarez, Miguel Angel, Gutiérrez, Manu. (2007). Manual de JavaScript. [Link]

Recuperado de:
[Link]
[Link]
Aniel Guti. Aprende Web. (2018).Crea y Diseña tus sitios en la Web.
Recuperado de: [Link]

Gauchat, J. D. (2012). El gran libro de HTML5, CSS3 y JavaScript. Primera edición. Editorial
Marcombo. España. ISBN: 9788426717825.

200
201
 ACTIVIDAD 1. DE REFORZAMIENTO

Instrucciones: Escribe el código HTML, y en lo hoja de estilos CSS, para la

obtener la siguiente imagen.

HTML([Link]) HOJA DE ESTILOS CSS ([Link])

. tabla .modo2 {
font-size: 12px;
font-weight:bold;
background-color: #fdfdf1;
<tr> background-image: url(fondo_tr02.png);
<th>Fecha</td> background-repeat: repeat-x;
<th>Unidades Vendidas </td> color: #990000;
<th>Precio por unidad </td> font-
<th>IVA por unidad </td> </tr> text-align:left;
}
.tabla .modo2 td {
<th>29/10/07</td>
padding: 5px;
<td>520</td> border-right-width: 1px;
border-bottom-width: 1px;
<td> border-right-style: solid;
</tr> border-bottom-style: solid;
border-right-color: #EBE9BC;
<th>29/10/07</td> border-bottom-color: #EBE9BC;
}
<td>520</td>
.tabla .modo2 th {
background-image: url(fondo_tr02a.png);
background-position: left top;
</tr> font-size: 12px;
</table> font-weight:bold;
background-color: #fdfdf1;
background-repeat: repeat-x;
color: #990000;
font- ;
text-align:left;
border-right-width: 1px;
border-bottom-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-right-color: #EBE9BC;
border-bottom-color: #EBE9BC;
}

202
 ACTIVIDAD 2. DE REFORZAMIENTO

Instrucciones: Resuelve el siguiente Crucigrama con las etiquetas que

aprendiste a utilizar en HTML y CSS.

203
 ACTIVIDAD CONSTRUYE T
Instrucciones: Resuelve la Actividad Construye T

204
205
206
207
208
209
210
211