TECNOLOGÍAS DE

LA INFORMACIÓN
Y COMUNICACIÓN
SEXTO SEMESTRE
Componente de Formación para el Trabajo

DATOS DEL ALUMNO

Nombre: ________________________________________________

Plan[Link]

Grupo: ________ Turno: __________ Teléfono: ________________

Guía de Aprendizaje Módulo IV:

Diseño Web
COLEGIO DE BACHILLERES DEL
ESTADO DE BAJA CALIFORNIA
JAIME BONILLA VALDEZ
Gobernador del Estado de Baja California

CATALINO ZAVALA MÁRQUEZ

Secretario de Educación y Director General del ISEP del Estado de Baja California

JAVIER GONZÁLEZ MONROY

Subsecretario de Educación Media Superior, Superior e Investigación

IVÁN LÓPEZ BÁEZ

Director General del CBBC

JESÚS ERNESTO ROBLES RODRÍGUEZ

Director de Planeación Académica del CBBC

INFORMÁTICA PARA OFICINAS (RIEMS)

Módulo IV: Páginas Web

Edición, agosto de 2013

Actualizado por: Lic. Ricardo López Navarro
Lic. Norma Vázquez Armas

Edición, agosto de 2016

Actualizado por: Lic. Amalia Elena Herrera de la Orta
Lic. Ramón Romero Rentería
Lic. María del Carmen Fernández García

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN (MEPEO)

Módulo IV: Diseño Web

Edición, febrero de 2020

Actualizado por:

Lic. Román Said Dávila Zamudio

Lic. María del Carmen Fernández García
Lic. Alma Lorena García López
Lic. Amalia Elena Herrera De la Orta
Lic. Ricardo López Navarro

En la realización del presente material, participaron:

JEFE DEL DEPARTAMENTO DE ACTIVIDADES EDUCATIVAS

M.G.P.P. Alfredo Sánchez Orozco

EDICIÓN, FEBRERO DE 2020

Lic. Gerardo Enríquez Niebla
Ing. Diana Castillo Ceceña
Lic. Guadalupe Figueroa Romero
Lic. Nidia Saraí Murguía Madrueño

La presente edición es propiedad del
Colegio de Bachilleres del Estado de Baja California.
Prohibida la reproducción total o parcial de esta obra.
 ÍNDICE

• Presentación
• Competencias Genéricas
• Competencias Profesionales Básicas
• Enfoque de la capacitación
• Propósito del módulo
• Ubicación de la capacitación
• Mapa de la capacitación

SUBMÓDULO 1: DISEÑO DE PÁGINAS WEB EN HTML .......................................... 12

SUBMÓDULO 2: HOJAS DE ESTILO CSS……..………………………………………… 110

SUBMÓDULO 3: COMUNIDADES VIRTUALES…………………………………………. 184

 PRESENTACIÓN

Con la puesta en marcha del Modelo Educativo para la Educación Obligatoria (MEPEO)
(SEP, 2017), se realizó una reestructuración de los programas de estudio de sexto semestre
por lo que fue necesario realizar una adecuación de los materiales didácticos de apoyo para
los estudiantes y docentes.

Es importante mencionar que el MEPEO, no significa un cambio total de los manifiestos y

preceptos educativos que caracterizaron la Reforma Integral de la Educación Media Superior
(RIEMS); sino que significa: fortalecimiento, articulación, organización y concreción de aspectos
educativos y pedagógicos, tal como se manifiesta en los siguientes párrafos:

“El Modelo educativo 2016 reorganiza los principales componentes del sistema educativo
nacional para que los estudiantes logren los aprendizajes que el siglo XXI exige y puedan
formarse integralmente… En este sentido, el planteamiento pedagógico -es decir, la
organización y los procesos que tienen lugar en la escuela, la prácticas pedagógicas en
el aula y el currículum- constituyen el corazón del modelo”.

“…El cambio que se plantea está orientado a fortalecer el sentido y el significado de

lo que se aprende. Se propone ensanchar y hacer más sólidos el entendimiento y
la comprensión de los principios fundamentales, así como de las relaciones que los
contenidos generan entre sí. La memorización de hechos, conceptos o procedimientos
es insuficiente y hoy ocupa demasiado espacio en la enseñanza. El desarrollo de las
capacidades de pensamiento crítico, análisis, razonamiento lógico y argumentación
son indispensables para un aprendizaje profundo que permita trasladarlo a diversas
situaciones para resolver nuevos problemas. Los aprendizajes adquieren sentido
cuando verdaderamente contribuyen al pleno desarrollo personal y de los individuos”.
(SEP, 2016: 15-18).

En este sentido, todas las Guías de Aprendizaje de los diferentes módulos fueron adecuadas
a los lineamientos pedagógicos antes citados y a los nuevos programas de estudio emanados
del MEPEO.

Conscientes de la dificultad para que el alumnado tenga acceso a una bibliografía adecuada,
pertinente y eficaz con el entorno socioeconómico actual, el CBBC brinda la oportunidad a los
estudiantes de contar con materiales didácticos para el óptimo desarrollo de los programas de
estudio de las asignaturas que comprende el Plan de Estudios Vigente. Cabe subrayar que,
dichos materiales son producto de la participación de docentes de la Institución, en los cuales
han manifestado su experiencia, conocimientos y compromiso en pro de la formación de los
jóvenes bachilleres.

Es necesario, hacer énfasis que la guía no debe ser tomada como la única herramienta de
trabajo y fuente de investigación, ya que es imprescindible que los estudiantes lleven a cabo un
trabajo de consulta en otras fuentes bibliográficas impresas y electrónicas, material audiovisual,
páginas Web, bases de datos, entre otros recursos didácticos que apoyen su formación y
aprendizaje.
 COMPETENCIAS GENÉRICAS
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.
CG1.1 Enfrenta las dificultades que se le presentan y es consciente de sus valores, fortalezas y
debilidades.
CG1.2 Identifica sus emociones, las maneja de manera constructiva y reconoce la necesidad de solicitar
apoyo ante una situación que lo rebase.
CG1.3 Elige alternativas y cursos de acción con base en criterios sustentados y en el marco de un
proyecto de vida.
CG1.4 Analiza críticamente los factores que influyen en su toma de decisiones.
CG1.5 Asume las consecuencias de sus comportamientos y decisiones.
CG1.6 Administra los recursos disponibles teniendo en cuenta las 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.
CG2.1 Valora el arte como manifestación de la belleza y expresión de ideas, sensaciones y emociones.
CG2.2 Experimenta el arte como un hecho histórico compartido que permite la comunicación entre
individuos y culturas en el tiempo y el espacio, a la vez que desarrolla un sentido de identidad.
CG2.3 Participa en prácticas relacionadas con el arte.

3. Elige y practica estilos de vida saludables.

CG3.1 Reconoce la actividad física como un medio para su desarrollo físico, mental y social.
CG3.2 Toma decisiones a partir de la valoración de las consecuencias de distintos hábitos de consumo
y conductas de riesgo.
CG3.3 Cultiva relaciones interpersonales que contribuyen a su desarrollo 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.
CG4.1 Expresa ideas y conceptos mediante representaciones lingüísticas, matemáticas o gráficas.
CG4.2 Aplica distintas estrategias comunicativas según quienes sean sus interlocutores, el contexto en
el que se encuentra y los objetivos que persigue.
CG4.3 Identifica las ideas clave en un texto o discurso oral e infiere conclusiones a partir de ellas.
CG4.4 Se comunica en una segunda lengua en situaciones cotidianas.
CG4.5 Maneja las tecnologías de la información y la comunicación para obtener información y expresar ideas.

Piensa crítica y reflexivamente.

5. Desarrolla innovaciones y propone soluciones a problemas a partir de métodos establecidos.

CG5.1 Sigue instrucciones y procedimientos de manera reflexiva, comprendiendo como cada uno de
sus pasos contribuye al alcance de un objetivo.
CG5.2 Ordena información de acuerdo a categorías, jerarquías y relaciones.
CG5.3 Identifica los sistemas y reglas o principios medulares que subyacen a una serie de fenómenos.
CG5.4 Construye hipótesis y diseña y aplica modelos para probar su validez.
CG5.5 Sintetiza evidencias obtenidas mediante la experimentación para producir conclusiones y formular
nuevas preguntas.
CG5.6 Utiliza las tecnologías de la información y comunicación para 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.
CG6.1 Elige las fuentes de información más relevantes para un propósito específico y discrimina entre
ellas de acuerdo a su relevancia y confiabilidad.
CG6.2 Evalúa argumentos y opiniones e identifica prejuicios y falacias.
CG6.3 Reconoce los propios prejuicios, modifica sus puntos de vista al conocer nuevas evidencias, e
integra nuevos conocimientos y perspectivas al acervo con el que cuenta.
CG6.4 Estructura ideas y argumentos de manera clara, coherente y sintética.

Aprende de forma autónoma.

7. Aprende por iniciativa e interés propio a lo largo de la vida.

CG7.1 Define metas y da seguimiento a sus procesos de construcción de conocimiento.
CG7.2 Identifica las actividades que le resultan de menor y mayor interés y dificultad, reconociendo y
controlando sus reacciones frente a retos y obstáculos.
CG7.3 Articula saberes de diversos campos y establece relaciones entre ellos y su vida cotidiana.

Trabaja en forma colaborativa.

8. Participa y colabora de manera efectiva en equipos diversos.

CG8.1 Propone maneras de solucionar un problema o desarrollar un proyecto en equipo, definiendo un
curso de acción con pasos específicos.
CG8.2 Aporta puntos de vista con apertura y considera los de otras personas de manera reflexiva.
CG8.3 Asume una actitud constructiva, congruente con los 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.
CG9.1 Privilegia el diálogo como mecanismo para la solución de conflictos.
CG9.2 Toma decisiones a fin de contribuir a la equidad, bienestar y desarrollo democrático de la sociedad.
CG9.3 Conoce sus derechos y obligaciones como mexicano y miembro de distintas comunidades e
instituciones, y reconoce el valor de la participación como herramienta para ejercerlos.
CG9.4 Contribuye a alcanzar un equilibrio entre el interés y bienestar individual y el interés general de la
sociedad.
CG9.5 Actúa de manera propositiva frente a fenómenos de la sociedad y se mantiene informado.
CG9.6 Advierte que los fenómenos que se desarrollan en los ámbitos local, nacional e internacional
ocurren dentro de un contexto global interdependiente.

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

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

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

CPBT1. Integra información digital mediante la creación de documentos electrónicos,

empleando software de aplicación, como procesadores de texto y editor de imágenes
de manera responsable y creativa en ámbitos laborales, escolares y la vida cotidiana.

CPBT2. Prepara información a través de la manipulación de datos y fórmulas, elaborando

gráficos en una aplicación de hoja de cálculo, resolviendo de manera creativa y eficiente
situaciones en diversos ambientes y contextos.

CPBT3. Plantea el uso y administración de plataformas electrónicas de consulta,

comunicación y distribución de contenidos multimedia, proponiendo comunidades
virtuales que le permitan comunicarse, favoreciendo su autoaprendizaje en un ambiente
innovador en sus diferentes contextos.

CPBT4. Desarrolla actividades correctivas para los problemas de operación del equipo
de cómputo, mediante la aplicación de mantenimiento preventivo y correctivo de acuerdo
a las especificaciones del fabricante, prolongando la vida útil del equipo, mostrando
responsabilidad e iniciativa en diversos ámbitos.

CPBT5. Construye sitios web creativos y funcionales mediante software de diseño web,
para transmitir información electrónica diversa a gran escala de manera responsable y
empática en contextos laborales, educativos y de la vida cotidiana.

CPBT6. Elabora diversos recursos gráficos publicitarios utilizando software de

diseño, permitiendo su publicación en medios digitales e impresos para comunicar
ideas o emociones aplicables a contextos laborales, escolares y de la vida cotidiana,
en un ambiente ético e innovador, mostrando flexibilidad y apertura a diferentes
puntos de vista.
 Enfoque de la capacitación

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

centrada en el Campo Disciplinar de Comunicación, tiene la finalidad de desarrollar en el estudiantado
las habilidades de comunicación verbales y no verbales para expresarse a través de diversos códigos
y herramientas del lenguaje mediante la aplicación de las diferentes tecnologías. Por otra parte, la
informática se vincula de manera interdisciplinar con el campo de Matemáticas y Comunicación, ya que
aportan los elementos para la resolución de problemas mediante la aplicación de fórmulas, funciones,
elaboración de gráficos en hojas de cálculo, trabajando en forma colaborativa en ambientes virtuales.

Aunado a lo anterior, la capacitación tiene como propósito general: desarrollar las competencias y
habilidades prácticas que permitan al estudiantado proponer soluciones a problemas de contexto
laboral y escolar, mediante la aplicación de las Tecnologías de la Información y Comunicación, de
forma creativa e innovadora con una postura ética y responsable como ciudadano digital.

La capacitación de Tecnologías de la Información y Comunicación, destaca el manejo avanzado de

las aplicaciones de software y hardware, para la resolución de problemas de los diferentes ámbitos de
la vida cotidiana, desarrollando los aspectos metodológicos, creativos y comunicativos, mostrando un
comportamiento propositivo en beneficio personal y de la sociedad.

La capacitación de Tecnologías de la Información y Comunicación busca desarrollar en el alumnado

las competencias profesionales, utilizando software de aplicación, los elementos de hardware, las
comunicaciones mediantes redes informáticas y el software de diseño, además de promover las
competencias genéricas, la interdisciplinariedad y los ejes transversales de vinculación laboral,
emprendimiento e iniciar, continuar y concluir sus estudios de nivel superior.

En el contexto curricular de la capacitación de Tecnologías de la Información y Comunicación, el

contenido se divide en cuatro módulos que se imparten a partir de tercer semestre, con una carga
de 7 horas semanales, cada módulo se integra por 3 submódulos, en los que se busca desarrollar el
manejo de aplicaciones de oficinas que permiten elaborar documentos electrónicos con características
avanzadas utilizando el procesador de textos, la hoja de cálculo y presentaciones electrónicas, participar
en comunidades virtuales para el intercambio de información incluyendo el ámbito educativo, aplicar
mantenimiento al equipo de cómputo; la creación de páginas web y software de diseño para comunicar
ideas e información en el entorno laboral y escolar.

Todas estas competencias posibilitan al egresado en su incorporación al mundo laboral o bien para
realizar procesos productivos independientes de acuerdo con sus intereses profesionales o a las
necesidades de su entorno social como asistente en las siguientes áreas: administrativas, soporte
técnico, publicidad y otras, en diferentes instituciones, tanto públicas como privadas.

Las enseñanzas de la capacitación Tecnologías de la Información y Comunicación en la formación para

el trabajo de los jóvenes, basada en las Normas Técnicas de Competencia Laboral (NTCL) del
Consejo de Normalización y Certificación de Competencias Laborales (CONOCER) se convierte
en una necesidad de primer orden para cumplir con las exigencias de los sectores productivos, de
contar con personal calificado que permita desarrollar las potencialidades de sus organizaciones
al promover productos y servicios tanto en el mercado nacional como internacional, además de
proporcionar las herramientas técnicas básicas a los jóvenes egresados del nivel medio superior,
que les permitirán vencer fronteras e internarse en el mundo global a través de las Tecnologías de
la Información y Comunicación (TIC), además de la utilización de las Tecnologías del Aprendizaje
y del Conocimiento (TAC).
 Propósito del Módulo
Crea, edita y estructura páginas web mediante el uso de elementos HTML y reglas de estilo
CSS, ya sea para uso particular o, existente en instituciones o empresas, y considerando en lo posible
el apoyo que proporcionan las redes sociales, desarrollando su pensamiento crítico y creativo.

Ubicación de la capacitación

1er. Semestre 2do. Semestre 3er. Semestre 4to. Semestre 5to. Semestre 6to. Semestre

Matemáticas Matemáticas
Matemáticas I Matemáticas II Matemáticas V Filosofía
III IV
Ecología y Medio
Química I Química II Biología I Biología II Geografía
Ambiente
Estructura
Historia Universal
Ética I Ética II Física I Física II Socioeconómica
Contemporánea
de México
Introducción Todas las Todas las
Metodología de Historia de Historia de
a las Ciencias asignaturas que se asignaturas que se
la Investigación México I México II
Sociales imparten en cada imparten en cada
Taller de Taller de plantel de 5to. plantel de 6to.
Lectura y Lectura y Literatura I Literatura II semestre de los semestre de los
Redacción I Redacción II Componentes de Componentes de
Formación Básica Formación Básica
Inglés I Inglés II Inglés III Inglés IV y Propedéutica y Propedéutica

CAPACITACIÓN PARA EL TRABAJO EN TECNOLOGÍAS DE LA

Informática I Informática II
INFORMACIÓN Y COMUNICACIÓN

TUTORÍAS
 Mapa de la capacitación
Tecnologías de la Información
y Comunicación

MÓDULO I MÓDULO II MÓDULO III MÓDULO IV

Configuración y
mantenimiento de Ofimática Diseño gráfico Diseño web
computadoras
Software para
SUBMÓDULO 1

Instalación y Uso avanzado del Diseño de páginas

edición de imágenes
configuración de procesador de web en HTML
de mapas de bits
hardware y software palabras
48 horas
40 horas
40 horas 40 horas

Uso avanzado de Software para

SUBMÓDULO 2

Mantenimiento a
hoja de cálculo diseño de imágenes Hojas de estilo CSS
hardware y software
vectoriales
48 horas 40 horas
40 horas
40 horas

Uso avanzado de Multimedia Comunidades

SUBMÓDULO 3

Configuración de
presentaciones virtuales
redes
electrónicas 32 horas
24 horas
32 horas
24 horas
 SUBMÓDULO 1
DISEÑO DE PÁGINAS WEB
EN HTML

Competencias Genéricas Competencias Profesionales Básicas

4. Escucha, interpreta y emite mensajes
pertinentes en distintos contextos CPBT 3. Plantea el uso y administración
mediante la utilización de medios, de plataformas electrónicas de consulta,
códigos y herramientas apropiados. comunicación y distribución de contenidos
multimedia, proponiendo comunidades virtuales
CG4.5 Maneja las tecnologías de la que le permita comunicarse, favoreciendo su
información y la comunicación para autoaprendizaje en un ambiente innovador en
obtener información y expresar ideas. sus diferentes contextos.

CPBT 6. Elabora diversos recursos gráficos

5. Desarrolla innovaciones y propone publicitarios utilizando software de diseño,
soluciones a problemas a partir de permitiendo su publicación en medios digitales
métodos establecidos. e impresos para comunicar ideas o emociones
aplicables a contextos laborales, escolares
CG5.1 Sigue instrucciones y procedimientos y de la vida cotidiana, en un ambiente ético e
de manera reflexiva, comprendiendo como innovador, mostrando flexibilidad y apertura a
cada uno de sus pasos contribuye al alcance diferentes puntos de vista.
de un objetivo.

8. Participa y colabora de manera efectiva

en equipos diversos.

CG8.1 Propone maneras de solucionar

un problema o desarrollar un proyecto
en equipo, definiendo un curso de acción
con pasos específicos.
 Formación para el Trabajo - Sexto Semestre

SUBMÓDULO

1 DISEÑO de PÁGINAS WEB EN HTML

Interdisciplinariedad Ejes Transversales

¾ Emprendimiento.
¾ Estrategias de Lectura y Escritura II ¾ Vinculación laboral
¾ Ecología y Medio Ambiente ¾ Iniciar, continuar y concluir sus estudios de
nivel superior.

Aprendizajes esperados
y Produce un sitio web utilizando los elementos básicos del lenguaje HTML en la creación
de páginas web para publicitar empresas o instituciones, entre otros; brindando un servicio
responsable a quien lo requiera, favoreciendo su pensamiento creativo.
Conocimientos Básicos Habilidades Actitudes
Introducción al diseño web. ¾ Identifica los elementos básicos del ¾ Expresa ideas y conceptos
¾ Páginas web y sitio. diseño web. favoreciendo su creatividad.
¾ Conceptos básicos (Dominio, URL,
Hosting, Applets). ¾ Diagrama la estructura de una ¾ Favorece su propio
¾ Elementos de una página web. página web. pensamiento crítico.
¾ Estándares de diseño web (W3C).
¾ Contenido y presentación. ¾ Analiza los elementos básicos de ¾ Muestra innovación en
¾ Etiquetas y atributos. un lenguaje de creación de páginas las diversas formas de
web (HTML). expresarse en su contexto.
Elementos de bloque y en línea.
¾ Utiliza los elementos de HTML para
Etiquetas básicas del documento. la creación de páginas web.
¾ !DOCTYPE.
¾ html, head, title, body.
Contenido esencial.
¾ Encabezados:
h1, h2, h3, h4, h5, h6.
¾ Párrafos.
¾ Listas.
○ Ordenada.
○ No ordenada.
¾ Multimedia.
○ Img.
○ Video.
○ Audio.
¾ Enlaces y navegación.
○ Hipervínculos.
○ Anclas.
¾ Tablas.
¾ Estructura.
○ div.
○ article, aside, footer, header.
¾ Elementos en línea.
○ em, strong, span.
¾ Atributos de identificación
○ id y class.

12 DISEÑO DE PÁGINAS WEB EN HTML

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

ACTIVIDAD DE INICIO

Lee las competencias y atributos del submódulo 1 “Diseño de Páginas Web en HTML” que debe
adquirir cada alumno y responde las siguientes preguntas, comenta tus respuestas en una plenaria
organizada por el docente.

1. ¿Qué competencias voy a desarrollar?

2. Para qué me van a servir estas competencias?

3. ¿En qué momento las puedo aplicar?

Antes de dar inicio a las actividades propias de este semestre, nos interesa conocer tus expectativas,
escribe lo que esperas del módulo "Diseño Web", el cual se imparte en sexto semestre de la
capacitación "Tecnologías de la Información y Comunicación".
__________________________________________________________________________
__________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________
____________________________________________________________________________

SUBMÓDULO 1 13
 Formación para el Trabajo - Sexto Semestre

Es muy importante para los docentes saber el grado de conocimiento con

que cuentan sus alumnos de acuerdo a los temas que se van a tratar, es por eso
que deberás responder el siguiente cuestionario, atendiendo las instrucciones que
te dé el profesor.

CONOCIMIENTOS PREVIOS

Contesta las siguientes preguntas para saber el nivel de tus conocimientos previos con que
iniciaremos este submódulo:

1.- ¿Qué entiendes por una página web?

______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________

2. ¿Qué tipo de información tienen las páginas web que has visitado?
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________

3. ¿Qué diferencia encuentras entre una página web y un sitio web?

______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________

4. ¿Qué tienen en común los sitios web que has visitado?

______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________

5. ¿Para qué crees que sirve un sitio web?

______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________

6.- ¿Qué te gustaría que tuviera el sitio web que vas a diseñar?
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________

Revisó: _____________________________________________________.

Aciertos: _______________________

14 DISEÑO DE PÁGINAS WEB EN HTML

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

ACTIVIDAD DE COEVALUACIÓN
Una vez contestado el cuestionario anterior intercambia tu guía de aprendizaje con el compañero
de al lado. El profesor mencionará las respuestas correctas para cada reactivo.

Califica las respuestas de tu compañero y anota tu nombre en el espacio que dice REVISÓ.
Anota también el número de aciertos que obtuvo.

INTRODUCCIÓN AL DISEÑO WEB

ACTIVIDAD 1

Para iniciar una página web, primero debes conocer sus características y las reglas básicas
que debes de seguir para diseñarla, por lo tanto, realiza la lectura “¿Qué es HTML?” y
responde el cuestionario que se te presenta. Pregunta a tu profesor las dudas que te vayan
surgiendo.
¿Qué es HTML?

Para abreviar una larga historia, podemos decir que un científico llamado Tim Berners-Lee inventó
HTML allá por 1990. El objetivo era facilitar a científicos de diferentes universidades el acceso a
los documentos de investigación de cada uno de ellos. El proyecto obtuvo un éxito mucho mayor
del que Tim Berners-Lee nunca hubiese llegado a imaginar. Al inventar HTML, este científico sentó
las bases de la Web tal y como la conocemos en la actualidad.

HTML es un lenguaje que hace posible presentar información (por ejemplo, investigaciones
científicas) en Internet. Lo que ves al visualizar una página en Internet es la interpretación que
hace el navegador del código HTML. Para ver el código HTML de una página solo tienes que dar
clic en la opción "Ver" de la barra de menús y elegir "Código fuente" (en Internet Explorer).

Si quieres crear sitios web, no hay otra solución que aprender HTML. Incluso si usas
un programa como Dreamweaver, por ejemplo, para la creación de sitios web, poseer unos
conocimientos básicos de HTML hace la vida mucho más fácil y tus sitios web mucho mejores.

HTML es la abreviatura de "HyperText Mark-up Language", es decir, "Lenguaje de marcado

hipertextual", y esto ya es más de lo que necesitas saber a estas alturas. En todo caso, para
mantener un buen orden, necesitas conocer su significado con mayor detalle.

• Hiper (Hyper): Es lo contrario de lineal. Los programas de la computadora se ejecutaban

de forma lineal: cuando el programa había ejecutado una acción seguía hasta la siguiente
línea, y después de ésta a la siguiente, y a la siguiente, HTML, sin embargo, ahora es
diferente: se puede ir a donde uno quiera cuando uno quiera.
• Texto (Text): Se refiere al texto de la página web.
• Marcado (Mark-up): Es lo que haces con el texto. Se marca el texto del mismo modo que
en un programa de edición de textos con encabezados, viñetas, negrita, etc.
• Lenguaje (lenguaje): Es lo que es HTML. Este lenguaje hace uso de muchos términos
en inglés.

SUBMÓDULO 1 15
 Formación para el Trabajo - Sexto Semestre

¿Cuáles son las características del lenguaje HTML?

Este lenguaje será el encargado de convertir un inocente archivo de texto inicial en una página web
con diferentes tipos y tamaños de letra, con imágenes impactantes, animaciones sorprendentes,
formularios interactivos, etc.

Estas características son las que marcaron el diseño de todos los elementos del WWW incluida la
programación de páginas web.

• La página web tiene que ser distribuida: la información repartida en páginas no muy grandes
enlazadas entre sí.
• Debe ser fácil navegar por la página.
• Tiene que ser compatible con todo tipo de ordenadores (PCs, Macintosh, estaciones de trabajo,
etc.) y con todo tipo de sistemas operativos (Windows, MS-DOS, UNIX, MAC-OS, etc.)
• Debe ser dinámico: el proceso de cambiar y actualizar la información debe ser ágil y rápido.

Reglas básicas en el diseño:

1. Tener algo interesante que decir en tu página web:

El seguir estas reglas
2. Todo el mundo ya conoce las herramientas de búsqueda. Haz te ayudará para que tu
que tus enlaces sean pertinentes al tema que estás tratando. página sea un éxito
3. Recuerda que no en todos los buscadores aparecen igual: No
hagas que tu página dependa demasiado de ciertos comandos HTML que pueden no aparecer en
todos los buscadores. Algunos buscadores pueden no aceptar tus gráficas, así que proporciona
textos alternativos.
4. Mantén tu página con un máximo de 15K en imágenes o fracciónala si ésta es muy grande.
5. No usar gráficas de otros autores si no está autorizado: Hay muchas fuentes de gráficas gratis.
También existen graficadores sencillos con los que puedes crear tus propias gráficas.
6. Reconocer el trabajo de los demás: Si algún "Sitio" te ayudó de alguna manera a construir tu
página, entonces bríndale un enlace.
7. Colocar fecha de la última revisión: Indica cuándo se realizó la última revisión. Esto hará que las
personas se motiven a leer tu página.
8. Verifica sus enlaces periódicamente: No dejes que expiren sus enlaces durante largos períodos
de tiempo. Revisa su validez.
9. Se abierto a comentarios o sugerencias: Específica vínculos de correo electrónico o, si es
posible, formularios de realimentación.
10. Practica el HTML: Usa los editores solo cuando conozcas los principios básicos del HTML.

16 DISEÑO DE PÁGINAS WEB EN HTML

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

Después de haber realizado la lectura, responde las siguientes cuestiones:

NOMBRE: ________________________________________ GRUPO: ________

1.- ¿Nombre del científico que inventó el lenguaje HTML?

____________________________________________________________________________

2.- ¿En qué año fue creado el lenguaje HTML?

____________________________________________________________________________

3.- ¿Cuál era el objetivo del científico al crear el lenguaje HTML?

____________________________________________________________________________
____________________________________________________________________________
____________________________________________________________________________

4.- ¿Qué entiendes por HTML?

____________________________________________________________________________
____________________________________________________________________________
____________________________________________________________________________
____________________________________________________________________________

5.- Define cada una de las letras que conforman la palabra HTML:

Hiper:_________________________________________________________________________
Texto:_______________________________________________________________________
Marcado:_____________________________________________________________________
Lenguaje:____________________________________________________________________

6.- Menciona 4 características del lenguaje HTML:

____________________________________________________________________________
____________________________________________________________________________
____________________________________________________________________________
____________________________________________________________________________

7.- Menciona 7 reglas básicas que debes seguir para el diseño de una página web:
____________________________________________________________________________
____________________________________________________________________________
____________________________________________________________________________
____________________________________________________________________________
____________________________________________________________________________
____________________________________________________________________________
____________________________________________________________________________

SUBMÓDULO 1 17
 Formación para el Trabajo - Sexto Semestre

INTRODUCCIÓN AL DISEÑO WEB

Páginas web y sitio ([Link], 2019)

Un sitio web es un conjunto de archivos electrónicos y páginas web referentes a un tema en

particular, incluyendo una página inicial de bienvenida generalmente denominada home page, a
los cuales se puede acceder a través de un nombre de dominio y dirección en Internet específicos.
El World Wide Web, o simplemente Web como se le llama comúnmente, está integrado por sitios
web y éstos a su vez por páginas web. La gente suele confundir estos términos, pero un sitio web
es en realidad un conjunto de páginas web. A manera de ejemplo, la Secretaría de Turismo en
México cuenta con un sitio web que se puede visitar a través de la siguiente dirección [Link]
[Link]/sectur/ y cada tema (vínculo) que se puede consultar dentro de este sitio representa una
página web.

Los sitios web son empleados por las instituciones públicas y privadas, organizaciones e individuos
para comunicarse con el mundo entero. En el caso particular de las empresas, este mensaje tiene
que ver con la oferta de sus bienes y servicios a través de Internet, y en general para eficientar sus
funciones de mercadotecnia.

El sitio web no necesariamente debe localizarse en el sistema de cómputo de su negocio. Los

archivos y documentos que integran el sitio web pueden ubicarse en un equipo en otra localidad,
inclusive en otro país. El único requisito es que el equipo en el que se almacenen los documentos
esté conectado a la red mundial de Internet. Este equipo de cómputo o servidor web, como se le
denomina técnicamente, puede contener más de un sitio web y atender concurrentemente a los
visitantes de cada uno de los diferentes sitios.

Al igual que los edificios, oficinas y casas, los Sitios Web requieren de una dirección particular
para que los usuarios puedan acceder a la información contenida en ellos. Estas direcciones, o
URLs (por sus siglas en inglés Uniform Resource Locator), aparecen cotidianamente en todos
los medios de comunicación como son prensa escrita, radio, televisión, revistas, publicaciones
técnicas y en el propio Internet a través de los motores de búsqueda (por su denominación en
inglés search engines). Los nombres de estos sitios web (dominios) obedecen a un sistema
mundial de nomenclatura y están regidos por el ICANN (Internet Corporation for Assigned Names
and Numbers).

Los sitios web pueden ser de diversos géneros, destacando los sitios de negocios, servicios, comercio
electrónico en línea, imagen corporativa, entretenimiento, redes sociales y sitios informativos.
Recuperado de: [Link]

Conceptos básicos (Dominio, URL, Hosting, Applets)

(Ing. Wellington Montilla Pujois, 2019)

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

Un hipervínculo es una conexión de una página a otro destino como, por ejemplo, otra página o
una ubicación diferente en la misma página. El destino es con frecuencia otra página Web, pero
también puede ser una imagen, una dirección de correo electrónico, un archivo (como por ejemplo,

18 DISEÑO DE PÁGINAS WEB EN HTML

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

un archivo multimedia o un documento de Microsoft Office) o un programa. Un hipervínculo puede

ser texto o una imagen.

Hosting: Hospedaje web. Espacio de disco donde se almacenan las páginas webs para que sean
accesibles a través de Internet.

Dominio: Dirección web asociada a una página web. ISP: En el ámbito del desarrollo de sitios web,
se puede decir que un ISP es un proveedor de servicios para web. Los diferentes servicios que
pueden ofrecer son: conexión a Internet, registro de dominio, hospedaje de sitios web, servicios de
contadores de servicios, libros de visitas gratuitos, estadísticas para web, entre otros. 

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

la dirección de Internet de un sitio web o un recurso del World Wide Web, junto con el protocolo
mediante el cual se tiene acceso al sitio o al recurso. El tipo más común de dirección URL es [Link]
que proporciona la dirección de Internet de una página web. Otros tipos de dirección URL son
gopher://, que proporciona la dirección de Internet de un directorio Gopher, y [Link] que proporciona
la ubicación de red de un recurso FTP.
Ejemplos: [Link] , [Link]

Applets: Programas desarrollados con Java para mejorar la presentación de las páginas web que
realizan animaciones, juegos e interacción con el usuario. El Applet es un programa que puede
incrustarse en un documento HTML (página web). Cuando un navegador carga una página web
que contiene un Applet, éste se descarga en el navegador Web y comienza a ejecutarse, lo cual
nos permite crear programas que cualquier usuario puede ejecutar. Uno de los requisitos para el
Applet funcione es tener instalado Java y que esté activado a través del explorador web.
Recuperado de: [Link]

Elementos de una página web (VirtualiaNet, 2019)

Cada día nacen cientos de páginas web ya sea para entretener a los lectores, para suministrar
información, promover intereses o con fines comerciales.

Pero muchas de ellas no cumplen con los requisitos “mínimos” que toda buena página debería
tener. A continuación se mencionan los elementos de diseño web que debes considerar para el
diseño de tu sitio o página web.
1) Contenido. Una página web debe ser atractiva. Pero no 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.

2) 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.

3) Imágenes. En el diseño web son muy importantes las buenas fotografías, preferentemente
tomadas por un profesional. Es importante que no estén pixeleadas o desenfocadas, ya que puede
causar una mala imagen del sitio en general.

SUBMÓDULO 1 19
 Formación para el Trabajo - Sexto Semestre

4) 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.
5) 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 huso
horario.
6) 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.
7) Enlaces a redes. 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.
8) Sobriedad. Una página debe permitir una fácil visualización de los contenidos (vídeos, imágenes,
textos). Saturar al cibernauta es contraproducente. Si la información o contenido tarda en
cargarse, error: eso supone una visita menos y un potencial cliente que no conoció la oferta.
Tener en cuenta los 8 puntos anteriores a la hora de optar por el diseño web es garantía de éxito.
Recuperado de: [Link]

Estándares de diseño web (W3C) ([Link], 2019)

Un estándar es un conjunto de reglas normalizadas que describen los requisitos que deben ser
cumplidos por un producto, proceso o servicio, con el objetivo de establecer un mecanismo base
para permitir que distintos elementos hardware o software que lo utilicen, sean compatibles
entre sí.

El W3C, organización independiente y neutral, desarrolla estándares relacionados con la Web

también conocidos como Recomendaciones, que sirven como referencia para construir una Web
accesible, interoperable y eficiente, en la que se puedan desarrollar aplicaciones cada vez más
robustas.

El Consorcio World Wide Web (W3C) es una comunidad internacional donde las organizaciones
Miembro, personal a tiempo completo y el público en general trabajan conjuntamente para
desarrollar estándares Web. Liderado por el inventor de la Web Tim Berners-Lee y el Director
Ejecutivo (CEO) Jeffrey Jaffe, la misión del W3C es guiar la Web hacia su máximo potencial.

La finalidad de los estándares es la creación de una Web universal, accesible, fácil de usar y en la
que todo el mundo pueda confiar. Con estas tecnologías abiertas y de uso libre se pretende evitar
la fragmentación de la Web y mejorar las infraestructuras para que se pueda evolucionar hacia una
Web con la información mejor organizada.

La creación de un estándar requiere de un proceso controlado en el que especialistas en la materia

aseguran la calidad depurando las especificaciones antes de recomendarlas en la W3C.

Si te interesa conocer la lista de comprobación de estándares web para verificar que tu sitio web
sea optimo, puedes consultarla en el siguiente link:
[Link]

20 DISEÑO DE PÁGINAS WEB EN HTML

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

Los estándares Web más conocidos y ampliamente utilizados son: HTML (HyperText Markup
Language), XML (eXtensible Markup Language) y CSS (Cascading Style Sheets).

Recuperado de: [Link]

Contenido y presentación ([Link], 2019)

La primera impresión es la que cuenta. Sorprende a tus visitantes desde el primer momento en que
entran a tu página y anímalos a que se queden y naveguen por tu web. ¿Cómo lo puedes lograr?
Estructurando muy bien el contenido de tu página de inicio para que encuentren fácilmente lo que
buscan y presentando el contenido de tal forma que sea atractivo para la vista.

Antes de comenzar con las diferentes opciones de estructura, queremos presentarte un resumen
sobre qué debes tener en cuenta y qué debes evitar a la hora de organizar el menú de navegación
y añadir títulos, textos, imágenes y otros elementos en el contenido.

Menú de navegación. Ofrece solo las pestañas necesarias (máximo 5 o 7) en el primer nivel y
que no ocupen más de una línea del menú. ¿Qué hacer con las otras pestañas? Simplemente
distribúyelas en el segundo y tercer nivel de la navegación. El objetivo principal del menú de
navegación es guiar al visitante. Entre más opciones ofrezcas, más difícil será saber por qué
camino ir. Además, una navegación muy larga puede dañar la estética de tu web.

Títulos. Introduce un “Título 1” en la parte superior del contenido de cada subpágina. Esto le
ayudará al visitante a identificar rápidamente de qué se trata tu página y a saber si lo que ofreces
es lo que busca. A medida que vas añadiendo más contenido introduce más subtítulos con el
módulo “Título 2” y “Título 3”.

Textos. Reparte tus textos de forma balanceada y evita escribir todo en un solo bloque de texto.
Así podrás presentar mejor la información. Si tu plantilla es ancha puedes introducir tus textos en
dos o más columnas para facilitar la lectura del visitante. Si por el contrario tienes una plantilla
angosta, es posible que una sola columna sea suficiente.

Imágenes. Sé generoso con las imágenes en formato horizontal y maximiza el tamaño hasta
alcanzar el ancho completo de tu plantilla. Si tus imágenes están en formato vertical, te
recomendamos introducirla en una columna y poner otra imagen o textos al costado para que
no quede un espacio en blanco.

Columnas. Distribuye el contenido en columnas para darle una apariencia más dinámica a tu
web. Es importante que seas un poco perfeccionista, es decir, que si subes tres imágenes,
todas deben tener el mismo tamaño. Lo mismo aplica para textos y otros elementos que
repartas entre columnas.

SUBMÓDULO 1 21
 Formación para el Trabajo - Sexto Semestre

Segunda área de contenido. Utiliza la segunda área de contenido para destacar tus datos
de contacto o mostrar los botones de compartir de redes sociales. La información que pongas
en esta zona estará siempre visible. Si la plantilla que has elegido tiene la segunda área de
contenido en la parte inferior, puedes aprovechar esta zona para visualizarla como si fuera
parte del pie de página (footer).

Contenido presentado Como no presentar el

correctamente contenido

Recuperado de: [Link]

presentar-el-contenido-de-tu-p%C3%A1gina/

Estructura general del diseño de una web (Fernández, 2019)

La imagen siguiente es un esquema típico de una página web. Se debe tener en cuenta que este
esquema sufre variaciones, aunque normalmente son pequeñas.

22 DISEÑO DE PÁGINAS WEB EN HTML

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

La gran mayoría de las páginas web tienen divisiones o secciones similares.

Lo usual es que, en la parte superior de la página se encuentre una cabecera, seguido de

un  cuerpo principal que suele estar flanqueado por una  columna lateral  (tanto a la izquierda
como a la derecha) o dos columnas laterales, seguidas al final de la página por un pie de página.

Cabecera

De todas las partes de la estructura del diseño web, el encabezado es la que mayor tendencia
tiene a repetirse entre páginas de un mismo sitio. Aun cuando el sitio tenga grandes diferencias

SUBMÓDULO 1 23
 Formación para el Trabajo - Sexto Semestre

en estructura y contenido entre sus páginas, si mantiene una unidad visual en su encabezado, los
usuarios percibirán la sensación de unidad que la web requiere.

La cabecera es una franja horizontal que ocupa todo el ancho de la página en la parte superior de
la misma.

Logotipo
A la izquierda del encabezado suele ubicarse el logotipo del sitio, que ocupa un área importante
dentro del mismo. Esta imagen debe tener un enlace a la página principal del sitio (home page), ya
que es uno de los estándares más respetados por los diseñadores y una de las formas que tienen
los usuarios de volver al inicio.

Zonas de navegación

Desde el final del logotipo, ocupando el centro y la zona derecha de la cabecera, frecuentemente
se sitúan una serie de zonas de navegación.

En la zona superior, se encuentran algunos enlaces generales de la página, como acceso a

usuarios registrados, registros de usuarios nuevos, acceso a perfiles, etc., así como ayudas y
buscadores internos. La zona más ancha generalmente se encuentra ocupada por el título de la
página, nombre de empresa, slogan, etc.

La zona inferior del encabezado se emplea para ubicar el menú de navegación principal, uno

de los elementos más importantes a la hora de ayudar a los usuarios a encontrar las páginas
componentes del sitio web.

24 DISEÑO DE PÁGINAS WEB EN HTML

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

Dependiendo de la complejidad del sitio, puede encontrarse solo uno de estos sistemas de
navegación o los dos.
Buscador

Otra forma de colaborar con la exploración del sitio por parte de los usuarios es la instalación de
un buscador interno.

También es aquí donde los usuarios buscan este tipo de elementos, ya que convencionalmente es
aquí donde la mayoría de los diseñadores los ubican, aunque en algunos casos, puede encontrarse
en la parte superior de alguna de las columnas laterales.
Columnas laterales

El cuerpo principal de una página web, en el diseño moderno se encuentra dividido. Una de estas
divisiones, consiste una o dos columnas laterales.

Este tipo de columnas, se emplean para ubicar algunos elementos importantes de la página,
como enlaces externos, navegación interna, publicidad, informaciones adicionales y contenidos
secundarios.

Cuando se emplea una única columna, es indistinto para los usuarios si se coloca a derecha o
izquierda del contenido, de acuerdo a estudios sobre el comportamiento de usuarios de sitios web,
ya que su ubicación no plantea dificultad alguna.

En el caso de que el diseño requiera el empleo de dos columnas, pueden ubicarse una a cada
lado del cuerpo principal de la página o ambas a uno de los lados, siendo también indiferente en
este caso si se ubican a la derecha o a la izquierda del contenido principal.

SUBMÓDULO 1 25
 Formación para el Trabajo - Sexto Semestre

Los usuarios, dado el uso continuo de estos elementos para esta función, suelen buscar zonas de
navegación en este tipo de columnas, por lo que resulta uno de los mejores lugares para colocar
menús secundarios al menú principal de la cabecera.

A continuación, vemos algunos ejemplos de columnas laterales:

Área de contenido principal

Esta zona del diseño de la página, es la que menos reglas tiene respecto de su diseño, ya que el
hecho de que en ella se encuentren los contenidos principales de la página, el diseño depende
en gran medida de los mismos, sobre todo en lo que respecta al tipo de contenidos, la cantidad,
la disposición que se desea emplear, etc.

26 DISEÑO DE PÁGINAS WEB EN HTML

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

Sin embargo, hay que considerar algunas reglas importantes y que, salvo muy raras ocasiones,
deben ser seguidas al pie de la letra.

• En la parte superior de esta área se debe colocar el título principal entre etiquetas <h1>,
ya que este título tiene las palabras clave que los usuarios luego emplearán en sus búsquedas
y será de gran importancia para que los buscadores indexen la página en forma correcta.

• En caso de que los contenidos sean muchos y haya que hacer desplazamientos importantes
hacia abajo, es de mucha utilidad colocar al final del área algún tipo de salto al inicio, para
evitar que el usuario deba realizar grandes desplazamientos.

• En el caso de que se empleen varias páginas para albergar contenidos relacionados, tanto
al inicio de la página como al final de la misma es de gran utilidad colocar un navegador de
páginas (del tipo Página anterior 1 – 2 – 3 … Página siguiente) para que la navegabilidad
entre ellas sea sencilla.

Pie de página

Finalmente, debajo de todas las secciones, se coloca una faja horizontal en cuyo interior se
colocan algunos elementos importantes, como el autor, copyright, acceso a diversas políticas del
sitio y asuntos legales, datos de contacto, enlaces a sitios relacionados, enlaces internos, etc.

Recuperado de: [Link]

ACTIVIDAD INTEGRADORA
PARTE 1
A partir de este momento vas a empezar con la estructura de tu sitio
web para eso es necesario que te organices en equipo de cuatro
integrantes, realices la lectura “Elementos de una página web” a la
par que vas desarrollando las actividades referentes al diseño de tu
página como son:

• Elegir posibles temas a tratar en la página web

• Clasifica los temas
• Escoge un tema para tu página web
• Definición de la Información a publicar
• ¿Qué fuentes de información tengo?
• Escalabilidad
• Planificación
• Definición del diseño

Pregunta al profesor todas las dudas que te vayan surgiendo.

SUBMÓDULO 1 27
 Formación para el Trabajo - Sexto Semestre

DISEÑO DE UNA PÁGINA WEB

Antes de entrar de lleno en lo que será la construcción de la página web, desarrollaremos

la metodología para el diseño de las mismas. Es importante ser originales para estructurar sus
contenidos, redactar sus textos, agregar imágenes, enlazar las páginas, etc.

1. Elegir posibles temas a tratar en la página web

Empieza haciéndote esta pregunta: ¿De qué puedo hablar en mi página web? ¿Cuál es la
temática que voy a trabajar? Para contestar estas preguntas haremos un listado de posibles
temáticas que te puedan interesar para realizar la página web. Más adelante iremos eliminando
y añadiendo otras según los factores que vamos a tener en cuenta y según cuál sea tu objetivo:
ganar muchas visitas, ganar mucho dinero, o cualquiera que sea el fin de tu página web.

TEMAS DE EJEMPLOS ANOTA TUS POSIBLES TEMAS

Capacitación de Informática
Mi artista favorito
Negocio familiar
Mi ciudad
Mi escuela

2. Clasifica los temas

Es importante saber el tipo de Web que queremos crear, es el punto de partida que afecta a
todas las etapas posteriores de creación, realizaremos un diseño, aplicaciones, navegabilidad
adecuadas al tipo de Web seleccionada, Ejemplos:

- Sitio web comvercial. - Sitio web profesional.

- Sitio web de información. - Sitio web de ocio.

EJEMPLOS: CLASIFICACIÓN
Capacitación de Informática Sitio web profesional
Mi artista favorito Sitio web de ocio
Negocio familiar Sitio web comercial
Mi ciudad Sitio web de información
Mi escuela Sitio web de información

28 DISEÑO DE PÁGINAS WEB EN HTML

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

ANOTA TUS TEMAS Y CLASIFÍCALOS SEGÚN SU TIPO

(Como se muestra en el ejemplo)
MIS TEMAS CLASIFICACIÓN

3.- Escoge un tema para tu página web

El factor más importante, es, que el tema nos apasione. De modo que de la lista de temas que
tengo, voy a ordenarlos según me gusten. (El tema que quede primero es sobre el que desarrollarás
tu sitio web).
EJEMPLOS: TEMAS ORDENADOS MIS TEMAS ORDENADOS
Mi escuela
Mi ciudad
Mi artista favorito
Capacitación de Informática
Negocio familiar

4.- Definición de la información a publicar

Después que hayas seleccionado el tema Sitio web es
necesario definir la información que se va a publicar en
el sitio web, si vas a hacer una página sobre tu escuela,
como en este caso, ¿qué vas a poner?:

ANOTA TU TEMA Y LA INFORMACIÓN QUE TE GUSTARÍA MOSTRAR EN TU SITIO WEB

(Como se muestra en el ejemplo)

EJEMPLO: MI ESCUELA MI TEMA:

Historia de mi escuela
Materias que imparten
Otros Planteles
Actividades que realiza
Envío de correos
Enlaces a otras páginas de interés

SUBMÓDULO 1 29
 Formación para el Trabajo - Sexto Semestre

5.- ¿Qué fuentes de información tengo?

Una fuente de información es el lugar del que emanan los conceptos, las ideas y los pensamientos
que sirven para la creación de nuevo conocimiento en este caso una página web. Por tanto,
en este apartado necesitamos recolectar las fuentes de información de donde vamos a extraer
información del tema del sitio web que estás diseñando.

TEMA: Mi escuela
[Link]
[Link]
Internet para buscar páginas de interés relacionados con el tema
Enlaces a direcciones de cursos como: [Link], [Link], etc.

ANOTA TU TEMA Y LAS FUENTES DE CONSULTA PARA CREAR TU SITIO WEB

(Como se muestra en el ejemplo)
FUENTES DE INFORMACIÓN DE MI TEMA:

6.- Escalabilidad

La escalabilidad se define como las visiones a corto y largo plazo acerca de nuestro sitio Web,
si a largo tiempo queremos ampliar nuestro sitio web con nuevas aplicaciones, nuevas páginas,
actualizaciones constantes de que va a depender que realicemos esto:

EJEMPLO DE LA ESCALABILIDAD EN MI PÁGINA: MI ESCUELA

El sitio se revisará constantemente y se modificará cuando ya hayan vencido los enlaces, esté
muy lenta debido a la cantidad de visitas que tenga, cuando sea necesario ampliarla, agregar
más información o enlaces. Lo que suceda primero.

MENCIONA CADA CUÁNDO VAS A REALIZAR ESCALABILIDAD EN TU SITIO WEB

(COMO SE MUESTRA EN EL EJEMPLO)

ESCALABILIDAD EN MI PÁGINA:

30 DISEÑO DE PÁGINAS WEB EN HTML

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

7.- Planificación (ejemplo)

En todo proceso de creación y diseño de páginas web el primer paso a llevar a cabo será la
planificación, que incluye la definición de:

a) OBJETIVOS: Presentar información de la preparatoria que sea atractiva para los jóvenes
de nuevo ingreso.

b) PÚBLICO: Identificar el tipo de personas a la que va dirigida la información, en este caso

todo tipo de personas podrán acceder a la página pero el público seleccionado será los
estudiantes de secundaria y todos aquellos jóvenes que estén buscando educación del
nivel medio superior.

c) CONTENIDO: Habrá información sobre el plantel y la preparación que otorga a los jóvenes.

d) ESTRUCTURA: Estará formada por una página principal que brindará información
introductoria o de presentación y ofrecerá enlaces para ir a las secciones del sitio web:
materias, capacitaciones, actividades paraescolares, etc. Tendrá otras 3 páginas web más
que estarán ligadas a la primera, como se muestra en la estructura siguiente:

[Link]

[Link] [Link] [Link]

REALIZA LA PLANIFICACIÓN DE TU SITIO WEB SEGÚN EL TEMA QUE HAYAS ESCOGIDO:

OBJETIVOS:

PÚBLICO:

CONTENIDO:

ESTRUCTURA:

SUBMÓDULO 1 31
 Formación para el Trabajo - Sexto Semestre

8.- Definición del diseño

Dependiendo del tipo de web, el tema seleccionado, definida la información y la escalabilidad,

estamos preparados para plasmar en papel el diseño del sitio web, incluyendo las páginas, los
fondos, tipos de letras, botones, formularios, links, plantillas, aplicaciones, de tal forma que
obtengamos "storyboard" (es un conjunto de ilustraciones mostradas con el objetivo de servir
de guía para entender una historia, previsualizar una animación o seguir la estructura de una
página web antes de realizarse) de los elementos y diseño que queremos implementar en
nuestro sitio web.

Ejemplo de la página principal del sitio web de mi escuela:

32 DISEÑO DE PÁGINAS WEB EN HTML

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

REALIZA EL DISEÑO DE TU PÁGINA PRINCIPAL

DEL TEMA DEL SITIO WEB QUE SELECCIONASTE

(APÓYATE EN EL EJEMPLO ANTERIOR)

SUBMÓDULO 1 33
 Formación para el Trabajo - Sexto Semestre

ETIQUETAS Y ATRIBUTOS ([Link], 2019)

Las etiquetas son la estructura básica del HTML. Estas etiquetas o tags se componen y contienen
otras propiedades, como son los atributos y el contenido.

HTML define un total de 91 etiquetas, de las cuales 10 se consideran obsoletas. Sin embargo,
una etiqueta por sí sola a veces no contiene la suficiente información para estar completamente
definida. Para ello contamos con los atributos: pares nombre-valor separados por "=" y escritos en
la etiqueta inicial de un elemento después del nombre del elemento. El valor puede estar encerrado
entre "comillas dobles" o 'simples'.

Esta sería la estructura general de una línea de código en lenguaje HTML:

<tag attribute1="value1" attribute2="value2">contenido</tag>

O lo que es lo mismo, con un ejemplo:

<a href="[Link] target="_blank">Ejemplo de enlace</a>

Donde:
•<a> es la etiqueta o tag inicial y </a> la etiqueta de cierre.
•href y target son los atributos.
•[Link] y _blank son las variables.
•Ejemplo de enlace es el contenido.

Aunque también existen elementos vacíos que no necesitan tag de cierre, cuya estructura sería
ésta:

<tag attribute1="value1" attribute2="value2" />

Estos elementos vacíos no constan de contenido, como por ejemplo, los tags <br> o <img>.

Aunque cada una de las etiquetas HTML define sus propios atributos, encontramos algunos comunes
a muchas o casi todas las etiquetas, que se dividen en cuatro grupos según su funcionalidad:

• Atributos básicos
• Atributos de internacionalización
• Atributos de eventos
• Atributos de foco

Para fines de este curso, solo haremos referencia a los atributos básicos. Los atributos básicos se
utilizan en la mayoría de etiquetas HTML y XHTML, aunque adquieren mayor sentido cuando se
utilizan hojas de estilo en cascada (CSS):

34 DISEÑO DE PÁGINAS WEB EN HTML

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

Atributo Descripción

id="texto" Establece un indicador único a cada elemento

class="texto" Establece la clase CSS que se aplica a los estilos del elemento

style="texto" Aplica de forma directa los estilos CSS de un elemento

title="texto" Establece el título del elemento (Mejora la accesibilidad)

Cuando nos iniciamos en la maquetación de sitios web, nos topamos con una duda que seguramente
le ha pasado a más de uno, ¿Debemos usar el selector “id” o el selector "class" para brindar estilos
a nuestros elementos y qué diferencia existe entre estos dos selectores?

El valor del atributo “id” de un elemento es único; es decir, no debería haber otro elemento con el
mismo nombre de identificador (id) dentro de tu documento HTML, es decir, el atributo "id" no es
repetible en otros elementos. Por otra parte, el valor del atributo “class”, a diferencia del valor del
atributo “id”, puede ser utilizado en más de un elemento de tu documento HTML, esto nos es muy
beneficioso cuando tenemos que aplicar los mismos estilos a diferentes elementos, dado que nos
permite reducir las líneas de código en nuestro archivo .css, considerándose una buena práctica. 
Recuperado de: [Link]

Elementos de bloque y en línea (Chuburu, 2019)

Todas las etiquetas del lenguaje HTML se pueden clasificar en etiquetas de línea o de bloque. 

Una etiqueta de línea es aquella que ocupa el espacio mínimo necesario en horizontal, y permite que
otro elemento se coloque a su lado. En cambio una etiqueta de bloque, ocupa todo el ancho disponible
y no permite que otro elemento se coloque a su lado (aunque aparentemente tenga lugar suficiente).

Etiquetas de línea (las más usadas): <a>, <span>, <strong>, <img>, <input>, <code>

Etiquetas de bloque (las más usadas): <h1>, <h2>, <h3>, <p>, <ul>, <li>, <div>, <header>, <nav>,
<section>, <article>, <footer>, <form>, <table>

Ejemplo:

SUBMÓDULO 1 35
 Formación para el Trabajo - Sexto Semestre

En el ejemplo de arriba los tres enlaces están escritos en etiquetas <a></a>, como son de línea se
colocan uno al lado del otro, porque tienen lugar.

En cambio los párrafos, escritos en etiquetas <p></p> aunque sean cortos y tengan lugar al
costado, se colocan uno debajo del otro.

Es imprescindible reconocer esta clasificación para poder modificar su apariencia utilizando la

propiedad display del lenguaje CSS.

Recuperado de: [Link]

¿Cómo empiezo a escribir HTML?

Para comenzar tan solo necesitas un editor de texto para escribir

las páginas y un navegador para visualizarlas.

El editor no debe formatear el texto. Usa el Bloc de notas

(Notepad), las etiquetas y sus atributos se pueden escribir en
mayúsculas o minúsculas. El lenguaje ignora, también, los
espacios en blanco seguidos, donde sólo cuenta uno de ellos.

Una vez que hayas escrito una página, guárdala en un archivo con extensión .htm o .html.

Abrir el Bloc de notas

1. Desde el botón situado, normalmente, en la esquina inferior izquierda de la pantalla.

Colocar el cursor y hacer clic sobre el botón Inicio, se despliega un menú; al colocar el cursor sobre
Programas aparece otra lista con los programas que hay instalados en tu computadora, buscar
Accesorios, seguidamente Bloc de notas, hacer clic sobre él, y se abrirá el programa.

2. Desde el icono del Bloc de notas del escritorio

• Cerrar el Bloc de notas, puedes utilizar cualquiera de las siguientes operaciones:
1. Hacer clic en el botón cerrar
2. Pulsar la combinación de teclas ALT+F4.
3. Hacer clic sobre el menú Archivo y elegir la opción Salir.

Si el documento ha sido modificado y no ha sido guardado antes de cerrar, se te pedirá confirmación

para guardarlo antes de cerrar el programa.

36 DISEÑO DE PÁGINAS WEB EN HTML

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

•Escribir en el Bloc de notas

1. Siempre que se abre el bloc de notas aparece un documento en blanco. A la hora de escribir
en él, funciona como cualquier otro editor de texto, basta con situar el cursor en el documento y
escribir. Es recomendable insertar una nueva línea para cada nueva etiqueta HTML, ya que resulta
más fácil trabajar de este modo. Si escribiéramos todo el código seguido nos resultaría difícil
interpretarlo, por ello es preferible programar insertando las etiquetas por separado, en diferentes
líneas.
A través del menú Formato, opción Fuente, puedes cambiar la fuente de todo el documento. Si lo
deseas, puedes hacer la letra algo más grande o pequeña.

•Abrir un documento

1. Pulsar la combinación de teclas Ctrl+A.

2. Hacer clic sobre el menú Archivo y elegir la opción Abrir.

Para guardar un documento, puedes utilizar cualquiera de las

siguientes operaciones.
1. Pulsar la combinación de teclas Ctrl+G.
2. Hacer clic sobre el menú Archivo y elegir la opción Guardar.

A la hora de guardar un documento no debes olvidar guardarlo con la

extensión htm o html. Por ejemplo, puedes guardar un documento
con el nombre mipá[Link].

ACTIVIDAD 2

Antes de empezar a crear el sitio web es necesario que conozcas los términos básicos que
estarás utilizando en el transcurso de este bloque, por lo que debes de realizar una búsqueda
en Internet para que puedas definirlos:

NOMBRE: ________________________________________ GRUPO: ________

Bloc de notas:
______________________________________________________________________________
_____________________________________________________________________________
______________________________________________________________________________

Buscador:
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________

SUBMÓDULO 1 37
 Formación para el Trabajo - Sexto Semestre

Compatible:
______________________________________________________________________________________
______________________________________________________________________________________
______________________________________________________________________________________

Estructura de página web:

______________________________________________________________________________________
______________________________________________________________________________________
______________________________________________________________________________________

Etiqueta:
______________________________________________________________________________________
______________________________________________________________________________________
______________________________________________________________________________________

Hipertexto:
______________________________________________________________________________________
______________________________________________________________________________________
______________________________________________________________________________________

Lenguaje html:
______________________________________________________________________________________
______________________________________________________________________________________
______________________________________________________________________________________

Marcas (tag):
______________________________________________________________________________________
______________________________________________________________________________________
______________________________________________________________________________________

Navegador:
______________________________________________________________________________________
______________________________________________________________________________________
______________________________________________________________________________________

Página web:
______________________________________________________________________________________
______________________________________________________________________________________
______________________________________________________________________________________

Plataforma:
______________________________________________________________________________________
______________________________________________________________________________________
______________________________________________________________________________________

Sitio web:
______________________________________________________________________________________
______________________________________________________________________________________
______________________________________________________________________________________

38 DISEÑO DE PÁGINAS WEB EN HTML

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

Servidor web:
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________

Vínculos
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________

Etiquetas básicas del documento.

Ahora sí, es tiempo de empezar con la programación de la página web. Es importante que
realices con tu equipo de trabajo todas las actividades que se te indican, para posteriormente
capturarlas en el bloc de notas. Pronto verás los resultados de tu página. ¡Ánimo y adelante!
Realiza la lectura “Estructura básica” a la par que van desarrollando las actividades referentes
al diseño de su página. Pregunta al profesor todas las dudas que te vayan surgiendo.

Estructura básica
DOCTYPE.
Al diseñar una página web, se indica con un código denominado DOCTYPE html (Document Type
Definition DTD), que se sitúa al inicio del documento HTML.
<!DOCTYPE html>

En los albores de Internet, los navegadores web sufrían numerosos defectos. Cuando los usuarios
diseñaban páginas web, tenían que tenerlos en cuenta. Por ejemplo, podían calcular los márgenes
alrededor de los cuadros flotantes de texto de diversas maneras, de modo que las páginas se veían
bien en un navegador pero no en otros.
Años después, las reglas HTML (y CSS, el estándar de las hojas de estilo), se estandarizaron
con mayor detalle. Con ellas, todos los navegadores podrían mostrar la misma página de igual
forma. Pero este cambio supuso un serio problema para los navegadores ya asentados que habían
existido en la época oscura de HTML, como era el caso de Internet Explorer. Tenían que admitir
los nuevos estándares y seguir enseñando correctamente las páginas web existentes, incluidas
las que dependían de los antiguos defectos.

La comunidad web adoptó una solución sencilla. Al diseñar una nueva página web moderna, se
indica este hecho mediante la inclusión de un código denominado definición de tipo de documento
(Document Type Definition DTD), que se sitúa al inicio del documento HTML. Cuando un navegador
detecta una página con una DTD, cambia a modo de estándares. Tras ello, la representa de
la forma más coherente y estandarizada posible. El resultado final es una página con el mismo
aspecto idéntico en todos los navegadores modernos. Pero cuando descubre un documento HTML
sin una DTD, aparecen problemas.

SUBMÓDULO 1 39
 Formación para el Trabajo - Sexto Semestre

• Cada página comienza con: < HTML >

• A continuación viene la cabecera, delimitada por < HEAD > < /HEAD >
• Después, el comando < BODY >, que indica el comienzo del cuerpo de la página.
• Las instrucciones HTML se escribirán a continuación, y finalizarán con < /BODY >
• La página acabará con < /HTML >

Es decir:

<HTML>
<HEAD> Definiciones de la cabecera

</HEAD>
<BODY> Instrucciones HTML

</BODY>
</HTML>

Ejemplo 1
<!DOCTYPE html>
<html>
<head>

</head>
<body>
Colegio de Bachilleres del Estado de Baja California
</body>
</html>

40 DISEÑO DE PÁGINAS WEB EN HTML

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

Etiqueta:<title> </title>

Esta etiqueta va en la parte del encabezamiento de la página web, es decir en el HEAD, y define
en su contenido el título de la página web, misma que aparecerá en la parte superior izquierda de
la pantalla de tu navegador.

Sin cerrar nuestro navegador de Internet, volvemos al editor de texto e incluimos el campo <title>
entre las etiquetas de apertura y cierre del encabezado (head).

ACTIVIDAD 3

Transcribe el código siguiente en el bloc de notas, graba el archivo con el nombre Ejercicio.
html. (CONSERVA ESTE ARCHIVO PORQUE LO VAS A UTILIZAR EN LAS ACTIVIDADES
SIGUIENTES).

Una vez realizado esto, y sin cerrar el editor de texto, vamos al navegador, da clic en el menú
archivo, selecciona la opción abrir, busca el archivo, selecciónalo y ejecútalo dando doble clic
en abrir.

Tu nueva página estará visible. Nota que el título aparecerá en la parte superior (pestaña de
la página).

Ejercicio 1:

SUBMÓDULO 1 41
 Formación para el Trabajo - Sexto Semestre

Etiqueta <body> </body>

Todo el texto, las imágenes y el formato visibles al usuario deben encontrarse entre las etiquetas

<BODY> < /BODY >

Puede llevar los siguientes atributos:

Bgcolor Define el color de fondo de la página.

Text Define el color del texto de la página.

Link Define el color de los vínculos en la página.
Alink Define el color del vínculo actual o activado en la página.
Vlink Define el color del vínculo ya visitado.
Background Define el archivo gráfico que será desplegado como fondo.
Bgsound Define el archivo de audio que se tocará en la página.
Bgproperties Define el movimiento vertical del fondo.

¿Cómo se utilizan los colores en HTML?

Se pueden llegar a tener 16 millones de colores en una página web. Existen dos formas para
aplicar colores:

1. Se especifica el color deseado directamente con el nombre del color en inglés: Ejemplo:
blue, green, yellow.
2. Se especifica el color deseado mediante números hexadecimales e j e m p l o :

#RRVVAA

Donde se indica en formato hexadecimal la proporción de rojo, verde y azul que forma el
color deseado. El símbolo # es opcional. Un número hexadecimal es un número en base 16, la
base normal utilizada es base 10 o decimal del 0 al 9. En este caso los número validos serán del 0
al 9 añadiendo desde la a o A, a la f o F. Por tanto el número 0F será el 15, 0E será 14.

En la especificación del color utilizaremos para definir la proporción de cada color un número
del 0 al FF (255), 0 indica nada de ese color y FF la mayor proporción del color.
Ejemplos de colores

#RRVVAA COLOR #RRVVAA COLOR

#FFFFFF Blanco #000000 Negro
#FF0000 Rojo #00FF00 Verde
#0000FF Azul #FF00FF Magenta
#00FFFF Cyan #FFFF00 Amarillo
#70DB93 Agua Marino #000080 Azul Marino
#FF7F00 Coral #A62A2A Café
#C0C0C0 Plomo #4F2F4F Violeta

42 DISEÑO DE PÁGINAS WEB EN HTML

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

ACTIVIDAD 4

Ingresa al bloc de notas y realiza lo siguiente:

1. Abre el archivo “[Link]”.
2. Continúa transcribiendo el ejercicio 2.
3. Graba con el mismo nombre.
4. Ejecuta y si muestra algún error corrígelo.
5. Ingresa a la página: [Link]
Checa los códigos de los colores.
6. Cambia el código del color de la página que transcribiste, graba, ejecuta y observa
la diferencia.

Texto en HTML

Un sitio web se visualiza en países distintos, que usan conjuntos de caracteres distintos.
El lenguaje HTML nos ofrece un mecanismo por el que podemos estar seguros que una serie de
caracteres raros se van a ver bien en todos los ordenadores independientemente de su juego de
caracteres. Cuando queremos poner uno de estos caracteres especiales en una página, debemos
sustituirlo por su código. Por ejemplo, la "á" (a minúscula acentuada) se escribe "&aacute;" de
modo que la palabra página se escribiría en una página HTML de este modo: p&aacute;gina.

A continuación, se muestra una lista con algunos caracteres y el nombre con el que han de ser
representados:

SUBMÓDULO 1 43
 Formación para el Trabajo - Sexto Semestre

ACTIVIDAD 5

Ingresa al bloc de notas y realiza lo siguiente:

1. Abre el archivo “[Link]”.

2. Continúa transcribiendo el ejercicio 3.
3. Graba con el mismo nombre.
4. Ejecuta y si muestra algún error corrígelo.

Ejercicio 3:

<!DOCTYPE html>
<html>
<head>
<title> MI PRIMER P&Aacute;GINA</title>
</head>
<body bgcolor=”#C0D9D9” text=”#000000”>
Colegio de Bachilleres del Estado de Baja California
Estoy aprend&iacute;endo a hacer mi p&aacute;gina WEB
</body>
</html>

Etiqueta <br>

La etiqueta <br> instruye al navegador cliente que inserte un salto de línea en un documento
HTML. La etiqueta <BR> tiene el mismo efecto que un retorno de carro en una máquina de escribir.
Es una etiqueta especial, pues no precisa de etiqueta de cierre.

Etiqueta <hr>

La etiqueta <hr> dibuja de manera predeterminada una regla horizontal alineada automáticamente,
con una apariencia de tercera dimensión. Esta etiqueta especial, como no necesita de cierre se
vale de los siguientes atributos:

Align Establece que la regla se alinee a la izquierda, centro o derecha. LEFT, CENTER o RIGHT.

NOSHADE Quita el sombreado predeterminado de la regla.

WIDTH Permite especificar el ancho de la regla (en pixeles o porcentaje).
SIZE Permite especificar el alto de la regla (en pixeles).

44 DISEÑO DE PÁGINAS WEB EN HTML

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

ACTIVIDAD 6

Ingresa al bloc de notas y realiza lo siguiente:

1. Abre el archivo “[Link]”.

2. Continúa trascribiendo el ejercicio 4.
3. Graba con el mismo nombre.
4. Ejecuta y si muestra algún error corrígelo y vuelve a ejecutar.
5. Practica los diferentes atributos de la etiqueta <hr>.

Ejercicio 4:

<!DOCTYPE html>
<html>
<head>
<title>COBACH</title>
</head>
<body bgcolor="#C0D9D9" text="#000000">
COLEGIO DE BACHILLERES DEL ESTADO DE BAJA CALIFORNIA<br>
PLANTEL “escribe el nombre de tu plantel”.<br>
<hr align=left width=100% size=10><br>
Mi p&aacute;gina WEB <br>
</body>
</html>

Contenido esencial

Encabezados:

Los títulos o encabezados se emplean al comienzo de una sección. Las etiquetas que se usan son:
Etiqueta Se ve
<h1> Título </h1> Título
<h2> Título </h2> Título
<h3> Título </h3> Título
<h4> Título </h4> Título
<h5> Título </h5> Título

<h6> Título </h6> Título

SUBMÓDULO 1 45
 Formación para el Trabajo - Sexto Semestre

ACTIVIDAD 7

Ingresa al bloc de notas y realiza lo siguiente:

1. Abre el archivo “[Link]”.

2. Continúa trascribiendo el ejercicio 5.
3. Graba con el mismo nombre.
4. Ejecuta y si muestra algún error corrígelo y vuelve a ejecutar.
5. Practica los diferentes tamaños de encabezados.

Ejercicio 5:

<!DOCTYPE html>
<html>
<head>
<title>COBACH</title>
</head>
<body bgcolor="#C0D9D9" text="#000000">
<h1 align="center">
COLEGIO DE BACHILLERES DEL ESTADO DE BAJA CALIFORNIA</h1><br>
<h2 align="center">PLANTEL MEXICALI </h2>
<hr align=center width=100%><br>
Mi p&aacute;gina WEB
</body>
</html>

Párrafos (CCM BENCHMARK, 2019)

HTML considera que los párrafos son bloques de texto. Los navegadores hacen lo posible para
adaptar el contenido de los párrafos a la ventana, a menos que los atributos NOWRAP o NOBR
estén explícitamente especificados.

46 DISEÑO DE PÁGINAS WEB EN HTML

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

Dentro de un párrafo, todos los espacios, tabuladores y saltos de línea cuentan como un espacio
simple. Para colocar textos en bloques, se utiliza el par de etiquetas <p> y </p>. Esta etiqueta
puede incluir cualquiera de los atributos mencionados anteriormente.

Etiqueta Efecto visual

<p> y </p> Párrafo

Contenedores en HTML
Las etiquetas usadas para insertar texto se llaman contenedores. 

Contenedor Efecto visual

<blockquote> y </blockquote> Texto con indentación.
<pre> y </pre> Permite escribir texto preformateado; manteniendo espacios, 
saltos de líneas y tabuladores intactos.

Recuperado de: [Link]

ACTIVIDAD 8

Ingresa al bloc de notas y realiza lo siguiente:

1. Transcribe el siguiente código html

2. Graba con el nombre “[Link]”.
3. Ejecuta y si muestra algún error corrígelo y vuelve a ejecutar.

SUBMÓDULO 1 47
 Formación para el Trabajo - Sexto Semestre

Etiquetas para el texto

El lenguaje HTML es un lenguaje de marcas, estas marcas serán fragmentos de texto destacado
de una forma especial que permiten la definición de las distintas instrucciones de HTML, tanto los
efectos a aplicar sobre el texto como las distintas estructuras del lenguaje. A estas marcas las
denominaremos etiquetas y serán la base principal del lenguaje HTML. En documento HTML será
un archivo texto con etiquetas que variarán la forma de su presentación.

Una etiqueta será un texto incluido entre los símbolos menor que < y mayor que >. El texto
incluido dentro de los símbolos será explicativo de la utilidad de la etiqueta.

Por ejemplo:
ETIQUETA SE VERÁ ASÍ
<B>Texto en Negrita</b> Texto en Negrita
<I>Itálica</i> Itálica
<B><I>Negrita e Itálica</i></b> Negrita e Itálica
<U>Subrayado</u> Subrayado Solo Explorer
<EM>Enfatizado</em> Enfatizado
<STRONG>Fuerte</strong> Fuerte
<CODE>Code Texto</code> Code Texto
<CITE> Citation Text</cite> Citation Text
<KBD>Keyboard Text</kbd> Keyboard Text
<SAMP>Sample Text</samp> Sample Text
<TT>Teletype Text</tt> Teletype Text
<VAR>Variable Element Text</var> Variable Element Text
<BIG>Texto grande</big> Texto grande
<SMALL>Texto pequeño</small> Texto pequeño
<SUB>Subindice</SUB> Subíndice
Solo Explorer
<SUP>Superíndice</SUP> Superíndice
Solo Explorer
<BLINK> Texto intermitente</blink> Texto intermitente Solo Netscape
<STRIKE>Texto tachado</STRIKE> Texto tachado
48 DISEÑO DE PÁGINAS WEB EN HTML
TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

Atributos de las etiquetas

     Las etiquetas pueden presentar modificadores que llamaremos atributos que permitirán definir
diferentes posibilidades de la instrucción HTML. Estos atributos se definirán en la etiqueta de inicio
y consistirán normalmente en el nombre del atributo y el valor que toma separados por un signo
de igual. El orden en que se incluyan los atributos es indiferente, no afectando al resultado. Si se
incluyen varias veces el mismo atributo con distintos valores el resultado obtenido será imprevisible
dependiendo de cómo lo interprete el navegador. Cuando el valor que toma el atributo tiene más
de una palabra deberá expresarse entre comillas, en otro caso no será necesario.

     Un ejemplo de atributo será:

     <A HREF="[Link] oficial de cobach</A>

     En este caso la etiqueta A presenta un atributo HREF cuyo valor es [Link]
igualmente una etiqueta podría presentar varios atributos:

     <HR ALIGN=LEFT NOSHADE SIZE=5 WIDTH=50%>

     En este caso la etiqueta HR presenta cuatro atributos. El segundo atributo NOSHADE es un
caso especial que no presenta valor. El orden en que se especifiquen los atributos no afectará al
resultado final.

ACTIVIDAD 9

Ingresa al bloc de notas y realiza lo siguiente:

1. Abre el archivo que grabaste con el nombre de “[Link]”.

2. Continua trascribiendo la parte que falta del ejercicio 7.
3. Graba con el mismo nombre y ejecuta.
4. Observa la página que te presenta, si muestra algún error corrígelo y vuelve a ejecutar.
5. Practica las diferentes etiquetas para texto.

SUBMÓDULO 1 49
 Formación para el Trabajo - Sexto Semestre

Ejercicio 7:

<!DOCTYPE html>
<html>
<head>
<title>COBACHBC</title>
</head>
<body bgcolor="#C0D0D9" text="#000000">
<h1 align="center">
COLEGIO DE BACHILLERES DEL ESTADO DE BAJA CALIFORNIA
</h1>
<h2 align="center">
PLANTEL “escribe tu plantel” </h2>
<hr width=100% size=5>
Ejemplo del uso de las etiquetas<b><i></i></b><br>
<b>Este texto est&aacute; con negrillas</b><br>
<u>Este texto est&aacute; con subrayado</u><br>
<i>Este texto est&aacute; con inclinaci&oacute;n it&aacute;lica</i><br>
Este <b>texto <i>cuenta <u>con un </u>combinado</i> de</b> todo.<br>
</body>
</html>

Etiqueta <font> </font>

Presenta atributos que nos permiten modificar el tamaño y color del texto incluido entre la etiqueta
de inicio y fin.

ATRIBUTO FUNCIÓN
Color Determina el color que se aplica al texto.
Determina el tamaño relativo del texto. Los tamaños válidos son del 1 al
Size
7, siendo el predeterminado el 3 y el más grande el 1.
Face Asigna una fuente o tipo de letra.

50 DISEÑO DE PÁGINAS WEB EN HTML

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

ACTIVIDAD 10

Ingresa al bloc de notas y realiza lo siguiente:

1. Abre el archivo que grabaste con el nombre de “[Link]”.

2. Continua trascribiendo la parte que falta del ejercicio 8.
3. Graba con el mismo nombre y ejecuta.
4. Observa la página que te presenta, si muestra algún error corrígelo y vuelve a ejecutar.
5. Practica los diferentes atributos de la etiqueta <Font>.

Ejercicio 8:

<!DOCTYPE html>
<html>
<head>
<title>COBACHBC</title>
</head>
<body bgcolor="#C0D0D9" text="#000000">
<h1 align="center">
COLEGIO DE BACHILLERES DEL ESTADO DE BAJA CALIFORNIA
</h1>
<h2 align="center">
PLANTEL “escribe tu plantel” </h2>
<hr width=100% size=5>
Ejemplo del uso de las etiquetas<b><i></i></b><br>
<b>Este texto est&aacute; con negrillas</b><br>
<u>Este texto est&aacute; con subrayado</u><br>
<i>Este texto est&aacute; con inclinaci&oacute;n it&aacute;lica</i><br>
Este <b>texto <i>cuenta <u>con un </u>combinado</i> de</b> todo.<br>
<font color="red"><font size=7>E</font>
<font color="blue"><font size=6>s</font>
<font color="green"><font size=7>T</font>
<font color="brown"><font size=6>il</font>
<font color="orange"><font size=7>O</font>
</body>
</html>

SUBMÓDULO 1 51
 Formación para el Trabajo - Sexto Semestre

ACTIVIDAD 11

NOMBRE: ________________________________________ GRUPO: ________

Después de haber practicado los ejercicios anteriores, completa la tabla siguiente

explicando la función que realiza cada etiqueta:

ETIQUETA FUNCIÓN

<!DOCTYPE html>

<html> </html>

<head> </head>

<title> </title>

<body bgcolor=" " text=" ">

<hr align=left width=100% size=10>

<br>

<h1 align="center"> </h1>

<p> </p>

<blockquote> </blockquote>

<pre> </pre>

<b> </b>

<u> </u>

<i> </i>

<font color="red"> </font>

<font size=10> </font>

52 DISEÑO DE PÁGINAS WEB EN HTML

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

ACTIVIDAD INTEGRADORA
PARTE 2

Es tiempo de que empieces a realizar tu página principal, por lo que es importante que
revises el diseño que hiciste y empieces a definir cada uno de los encabezados que van
a formar parte de tu página principal.
En el siguiente recuadro anota el código HTML con las etiquetas que vas a necesitar
para mostrar los encabezados de tu página y posteriormente los transcribes en el bloc
de notas.

SUBMÓDULO 1 53
 Formación para el Trabajo - Sexto Semestre

Listas

Con frecuencia se usan listas en los documentos. El lenguaje HTML incorpora unas listas con
viñetas sencillas o también letras o números. Para dar más vistosidad a las páginas, se suelen
emplear también imágenes que se colocan delante de cada párrafo. Vamos a ver algunas de las
posibilidades que tenemos.

Listas con viñetas (no ordenadas).

He aquí el ejemplo más sencillo de una de estas listas:
ESCRIBIMOS EN HTML SE VERÁ ASÍ
<ul> • Primer término de la lista
<li>Primer término de la lista
<li>Segundo término • Segundo término
<li>Tercer término
</ul> • Tercer término

Como ves, la lista se declara con la etiqueta <UL> y finaliza con el cierre de la misma </UL>.
También podemos modificar las viñetas por medio del atributo TYPE= circle, disc o square (círculo,
disco o cuadrado) y añadir sublistas.

ESCRIBIMOS EN HTML SE VERÁ ASÍ

<ul> • Primer término de la lista
<li type= disc>Primer término de la lista
<ul> o Sublista
<li>Sublista
<li>Otro elemento o Otro elemento
</ul>
<li type=circle>Segundo término • Segundo término
<li type=square>Tercer término
</ul> • Tercer término

Otro atributo interesante es compactar para reducir el espacio entre los elementos.
Listas con viñetas ordenadas
Estas listas se caracterizan porque aparecen números o ciertos caracteres que ordenan sus
elementos. La etiqueta usada es <OL> junto con su correspondiente de cierre </OL>. El atributo
TYPE toma ahora los valores 1, a, A, i, I. Un ejemplo de estas listas es el siguiente:

ESCRIBIMOS EN HTML SE VERÁ ASÍ

<ol type=i>
i. Primer término de la lista
<li >Primer término de la lista
ii. Segundo término
<li >Segundo término
iii. Tercer término
<li>Tercer término
iv. Cuarto
<li>Cuarto
v. Quinto
<li>Quinto
</ol>

54 DISEÑO DE PÁGINAS WEB EN HTML

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

Listas de definición
Estas listas se forman con el elemento que se define y su definición. Las etiquetas son <DL> y </DL>
para la lista y <dt> y <dd> para los elementos y sus definiciones. Un ejemplo:
 ESCRIBIMOS EN HTML SE VERÁ ASÍ
< d l >
<dt >Término 1º Término 1º
<dd>Definición del elemento 1º Definición del elemento 1º
<dt>Término 2º Término 2º
<dd>Definición del elemento 2º Definición del elemento 2º
<dt>Término 3º Término 3º
<dd>Definición del elemento 3º Definición del elemento 3º
</dl>

ACTIVIDAD 12

Realiza lo siguiente:

1. Crea una carpeta llamada sitio_practica.

2. Abre el bloc de notas y transcribe el ejercicio 9.
3. Graba el archivo en la carpeta sitio_practica con el nombre de [Link].
4. Ejecuta el archivo, si presenta errores corrígelos.
5. Observa las listas que te presenta la página.
6. Modifícala a tu gusto.
Ejercicio 9:
<!DOCTYPE html>
<html>
<head>
<title> Asignaturas</title>
</head>
<Body bgcolor = "#00FFFF">
<font color="#0000FF" size="5" face="Verdana">
<B> MAPA CURRICULAR
</font>
<hr align="center" width="100%" size="10" noshade> </hr>

<h2 align=”left> Formación para el trabajo </h2>

<ul>
<li>Planeación y Administración de Pequeños Negocios</li>
<li>Auditoría de Gestión de Calidad</li>
<li>Contabilidad Comercial y de Servicios </li>
<li>Inglés Empresarial </li>
<li>Informática para Oficinas </li>
</ul>

<h2 align=”left> Componente b&aacute;sico </h2>

<ol>
<li>Matemáticas</li>
<li>Ingles</li>

SUBMÓDULO 1 55
 Formación para el Trabajo - Sexto Semestre

<li>Informática</li>
<li>Ética y Valores</li>
<li>Introducción a las Ciencias Sociales</li>
<li>Química</li>
<li>Taller de lectura y Redacción</li>
<li>Historia de Mexico</li>
<li>Literatura</li>
<li>Biologia</li>
<li>Fisica</li>
<li>Algebra</li>
<li>Logica</li>
<li>Estructura Socioeconomica de Mexico</li>
</ol>

<h2 align=”left> Programas </h2>

<ul type=i>
<li>Orientación</li>
<li>Constrúyete</li>
<li>Paraescolares</li>
<li>Tutorías</li>
</ul>
<hr align="center" width="100%" size="2" noshade>
<p align="left">
<font color="#0000cc" size"2" face="Verdana">
<i>
&copy; 2019. Derechos reservados. <br>
Elaborado por: nombre completo
Matrícula:
Grupo: <br>
Plantel:
</i>
</font>
</p>

</Body>
</html>

56 DISEÑO DE PÁGINAS WEB EN HTML

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

SUBMÓDULO 1 57
 Formación para el Trabajo - Sexto Semestre

Multimedia

Imágenes en los documentos HTML

Etiqueta <img>

     En un documento HTML se puede incluir cualquier imagen en alguno de los siguientes formatos
gráficos: GIF, JPEG o XBM. El formato más extendido y practico es el GIF, todos los navegadores
gráficos de la Web soportan este formato, además existen gran cantidad de programas de tratamiento
de gráficos que permiten grabar los gráficos o convertir gráficos a GIF. Este formato, así mismo, utiliza
algoritmos de compresión que hacen que sus archivos sean en cuanto a su tamaño apropiados para
su transmisión por la red.

     El formato GIF es más recomendado para iconos, gráficas, y el formato JPEG es más útil para
imágenes reales como paisajes y personas.

     Para poder utilizar otro formato gráfico, necesitarás usar un enlace cuyo destino sea la carpeta del
gráfico. Al seguir el enlace se te pedirá que indiques un programa externo que se encargue de mostrar
los archivos de ese formato gráfico, por tanto no pueden insertarse dentro de documentos HTML.
Inclusión de Imágenes

     La etiqueta encargada de mostrar imágenes en HTML es IMG y tiene el siguiente formato:
<IMG SRC="URL de la Imagen" ALT="Texto alternativo a la imagen">

     En el punto del archivo HTML en el que queramos que se muestre la imagen incluimos esta etiqueta.
Se puede mostrar la imagen, al comienzo del documento, al final o intercalada en el texto. Igualmente
se puede insertar una imagen dentro de cualquiera de las estructuras del lenguaje HTML como listas,
tablas o formularios. Esta etiqueta no necesita la etiqueta de fin, ya que el efecto de la etiqueta no se
produce sobre un texto o algún elemento HTML.

     El atributo SRC indica el archivo de imagen que se incluirá en el documento. Se indicará el camino
hasta la imagen en formato URL, el archivo de la imagen deberá tener una extensión apropiada a su
formato, por ejemplo si es GIF la extensión será .gif, si es JPEG la extensión será .jpg o .jpeg, si no
se cumple esto la imagen no se mostrará de forma correcta.

     Al definir la imagen como una URL, esta imagen no es necesario que se encuentre en el servidor
local, pudiendo especificar el camino completo y el servidor donde se encuentra la imagen. En este
caso al igual que en los hiperenlaces es posible indicar direcciones de URL relativas a los documentos
actuales.

     Lo normal es referenciar una imagen que se encuentre en el servidor local, ya que el acceso a
imágenes en servidores externos puede ser más lento. Por tanto, conviene copiar las imágenes e
iconos que se usen al servidor local.

  A continuación, se explica la utilidad de cada uno de los atributos de la etiqueta IMG.

Texto alternativo
     El atributo ALT, indicará un texto alternativo a mostrar si no fue posible mostrar la imagen. Se usa
para navegadores que no permitan mostrar imágenes, sean solo texto o tenga inhabilitado el mostrar
imágenes. Se recomienda cuando existan en el documento imágenes usadas como botones, para
mostrar un texto en vez del botón en navegadores que no puedan mostrar gráficos, de esta forma se
consigue que todos los usuarios puedan consultar sus páginas.

58 DISEÑO DE PÁGINAS WEB EN HTML

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

Alineación de la imagen
     Indica cómo se alinea el texto que sigue a la imagen con respecto a ésta. Indicará si la primera
frase del texto se colocará en la parte alta de la imagen, TOP, en el punto medio de la imagen,
MIDDLE, o en la parte de abajo de la imagen, BOTTOM.
     También se pueden utilizar alineaciones un poco más avanzada, TEXTTOP se alinea justo
al comienzo del texto más alto de la línea (TOP se alinea al tamaño del primer carácter de la
línea). ABSMIDDLE, es el centro real de la imagen, con MIDDLE se coloca el texto a partir del
punto medio, con ABSMIDDLE el texto aparece centrado con la imagen. ABSBOTTOM coloca el
texto justo al final de la imagen. Se recomienda que se usen estos últimos al ser más precisa la
alineación, aunque solo son válidos para los navegadores más avanzados.

Ejemplos
Inst. <IMG SRC="[Link]" ALIGN=TOP><B>COLEGIO DE BACHILLERES DEL ESTADO
HTML DE BAJA CALIFORNIA<B>.

Resultado
COLEGIO DE BACHILLERES DEL ESTADO DE BAJA CALIFORNIA.
Explicación Como se ve solo aparece la primera frase alineada en la parte alta (TOP) de la imagen.

Inst. <IMG SRC="[Link]><B> COLEGIO DE BACHILLERES DEL ESTADO DE BAJA

HTML CALIFORNIA <B>.

Resultado

COLEGIO DE BACHILLERES DEL ESTADO DE BAJA CALIFORNIA.

Explicación En este caso el texto está alineado en la parte central de la imagen.

Inst. <IMG SRC="[Link]" ALIGN=BOTTOM><B> COLEGIO DE BACHILLERES DEL

HTML ESTADO DE BAJA CALIFORNIA. <B>.

Resultado
COLEGIO DE BACHILLERES DEL ESTADO DE BAJA CALIFORNIA.
Explicación El texto está alineado en la parte baja de la imagen.

SUBMÓDULO 1 59
 Formación para el Trabajo - Sexto Semestre

Inst.
<IMG SRC="[Link]" ALIGN=MIDDLE><IMG SRC="[Link]">
HTML

Resultado

También es posible alinear imágenes entre sí e imágenes respecto a otros elementos

Explicación
HTML.
En los casos anteriores, solo se especifica donde se coloca la primera línea del texto y el resto se incluyen
debajo de la imagen quedando un efecto muy feo cuando el texto tiene más de una línea. Existen otras
alineaciones que incluirán a la imagen insertada dentro del texto. La imagen puede quedar a la izquierda,
LEFT o a la derecha, RIGHT. No se podrá utilizar en combinación con las anteriores alineaciones.

Inst. <IMG SRC="[Link]" ALIGN=LEFT><B> COLEGIO DE BACHILLERES DEL ESTADO

HTML DE BAJA CALIFORNIA<B>

Resultado

COLEGIO DE BACHILLERES DEL ESTADO DE BAJA CALIFORNIA.

En este caso aparece la imagen insertada en el texto, de forma que esta se integra en el
Explicación
párrafo que la rodea, al contrario que en los casos anteriores.

Inst.
<IMG SRC="[Link]" ALIGN=RIGHT><B> COLEGIO DE BACHILLERES DEL
HTML
ESTADO DE BAJA CALIFORNIA<B>

Resultado
COLEGIO DE BACHILLERES DEL ESTADO DE BAJA CALIFORNIA.
Explicación En este ejemplo aparece la imagen alineada a la derecha.

Tamaño de la imagen

     Es posible cambiar el tamaño de la imagen de forma que pueda ajustarse como se desee, pudiendo
ampliar o disminuir este.
     El atributo HEIGHT determina el alto de la imagen a mostrar, se especifica en puntos de la pantalla
(pixeles) o en tanto por ciento sobre el tamaño del documento. En caso de que la imagen sea mayor o
menor se escalará a este tamaño.

     El atributo WIDTH indica el ancho al que se mostrará la imagen, escalándola a este tamaño. También
se expresará en pixeles o en tanto por ciento.

    No es necesario indicar el ancho y el alto, se puede especificar solo una de las dimensiones, ajustándose
la otra a la proporción de la imagen. Es recomendable indicar solo uno de estos parámetros para que la
imagen no se muestre deformada. Igualmente se debe usar el valor relativo en tanto por ciento si se desea

60 DISEÑO DE PÁGINAS WEB EN HTML

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

que la imagen guarde siempre una misma proporción con respecto al texto. Si se desea mostrar
dos imágenes y queremos que una ocupe un cuarto de la pantalla y la otra el espacio restante, se
indica en una el ancho (WIDTH) del 25% y en la otra del 74%, no indicando en ningún caso el alto
(HEIGHT), de esta forma independientemente como sea el tamaño de la ventana del navegador
e independientemente del monitor del cliente, siempre se podrán mostrar ambas imágenes en la
misma línea.

Inst.
<IMG SRC="[Link]" WIDTH=100 HEIGHT=25>
HTML

Resultado

Si no se indican bien ambos valores, teniendo en cuenta la proporción de la imagen ésta

Explicación
puede aparecer deformada.

Inst.
<IMG SRC="[Link]" WIDTH=75>
HTML

Resultado

En este se ve cómo al indicar uno solo de los parámetros, el otro se ajusta apropiadamente
Explicación
a la proporción de la imagen.

Inst. <IMG SRC="[Link]" ALIGN=MIDDLE WIDTH=9%> <IMG SRC="/[Link]"

HTML WIDTH=89%>

En este se ve cómo al indicar uno solo de los parámetros, el otro se ajusta apropiadamente
Explicación
a la proporción de la imagen.

Si varía el tamaño de la ventana de su navegador, comprobará que el tamaño de las

Explicación imágenes cambia, pero guardan la misma proporción, el obrero ocupa 9% de la ventana y
la barra 86% restante. Y siempre se mostrarán ambas imágenes en la misma línea.

SUBMÓDULO 1 61
 Formación para el Trabajo - Sexto Semestre

ACTIVIDAD 13

Realiza lo siguiente:

1. Abre la carpeta con el nombre sitio_practica y crea dentro una carpeta llamada imágenes.
2. Descarga el logo de COBACHBC y guárdalo en la carpeta imágenes.
3. Transcribe el código del ejercicio 10.
4. Graba en la carpeta sitio_practica con el nombre de “[Link]”.
5. Observa la página que te presenta, si muestra algún error corrígelo y vuelve a ejecutar.
6. Practica las diferentes ubicaciones de las imágenes.

Ejemplo 10:
Es necesario crear una carpeta para el sitio web
<!DOCTYPE html> donde almacenarás las prácticas realizadas.
<html> Debes guardar de forma estructurada la
<head> información, dentro de la carpeta del sitio debe
<title> COBACH </title> existir una carpeta para imágenes, videos, etc.
</head>
Esto te facilitará la publicación del sitio web.
<Body bgcolor = "#00FFFF">

<IMG SRC="imagenes/[Link]" ALIGN=MIDDLE HSPACE=100>

<font color="#0000FF" size="5" face="tahoma">
<B> COLEGIO DE BACHILLERES DEL ESTADO DE BAJA
CALIFORNIA</B>
</font>
<p align="right">

<font color="#0000cc" size"2" face="Verdana">

10 de Septiembre de 2019.
</font>
</p>

<hr align="center" width="100%" size="10" noshade>

<br>
<br>Cuerpo, contiene la información correspondiente a la página
<br>
<hr align="center" width="100%" size="2" noshade>
<p align="left">
<font color="#0000cc" size"2" face="Verdana">
<i>
&copy; 2019. Derechos reservados. <br>
Elaborado por: nombre completo
Matrícula:
Grupo: <br>
Plantel:
</i>
</font>
</p>
</body>
</html>

62 DISEÑO DE PÁGINAS WEB EN HTML

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

Etiqueta embed (AprendeWeb, 2019)

La etiqueta embed sirve tanto para incrustar archivos de audio como de video en la página web.
Esta etiqueta posee varios atributos, que pueden ser distintos en función del objeto que vayamos
a mostrar en la página.

Su sintaxis general sería la siguiente:

<embed src="..." ...(atributos) ...></embed>

La etiqueta de cierre final es conveniente ponerla para que funcione correctamente, también
podemos poner una barra inclinada al final de la etiqueta principal que sustituye a la etiqueta de
cierre (<embed ... />), en todo caso nunca debemos dejar la etiqueta sin cerrar. A continuación
vamos a ver cuáles son los principales atributos de esta etiqueta y sus valores.

Atributos referentes a vídeo y sonido

▪ src="ruta/fichero" Indica la ruta para acceder al archivo multimedia que queremos abrir.
▪ loop="numero/true/false" Define el número de veces que se reproducirá el fichero, como
valor podemos poner un numero entero, o las palabras true (infinitas veces) o false (sólo una
vez). Este atributo no funciona con todos los navegadores, especialmente con Internet Explorer
en versiones antiguas. por lo que debemos complementarlo con el siguiente.
▪ autostart="true/false" Define si el fichero debe empezar a reproducirse por sí solo a la vez
que la página (valor true), o debe necesitar la intervención del usuario mediante la consola o
código javascript para reproducirse (valor false).Tanto este atributo como los dos anteriores no
funcionan con los archivos flash de video (extensión .swf), los cuales se muestran siempre al
cargar la página y en número infinito de veces.
▪ type="tipo_fichero" Atributo importante que declara qué tipo de fichero estamos usando.

El navegador buscará el plugin o programa necesario para abrirlo, teniendo preferencia el que
hayamos indicado, dependiendo del tipo de fichero puede tomar distintos valores, los más
habituales son:

▪ type="audio/wav" : para archivos de audio con extensión .wav.

▪ type="audio/midi" : para archivos de audio con extensión .mid.
▪ type="application/mpeg" : para archivos de audio o de vídeo del tipo mpeg. Archivos con
extensiones .mp3 .mpg .mpeg .mp4 . También puede usarse con videos con extensión .avi,
ya que también lo reproduce, y a veces el usuario no tiene instalado el plugin para videos
avi. También podemos usar los valores type="audio/mpeg" o type="video/mpeg" según sea el
archivo de audio o de video.
▪ type="application/mov" : para archivos de video con extensión .mov.
▪ type="application/wmv" : para archivos de video con extensión .wmv.

SUBMÓDULO 1 63
 Formación para el Trabajo - Sexto Semestre

▪ type="application/x-shockwave-flash" : para archivos flash de video con extensión .swf.

▪ type="application/ogg" : Para archivos con extensión ogg (audio o video) y ogv(video). También
podemos emplear type="audio/ogg", para sonido o "type="video/ogg", para video.
▪ type="audio/webm" ; type="video/webm", para archivos en formato webm (recomendados por
HTML5).

Lo que indica este atributo es lo que se llama el tipo MIME al que pertenece el objeto. Cada tipo
de fichero pertenece a un tipo MIME distinto, hay que tener cuidado de poner para cada tipo de
fichero el tipo que le corresponde o que sea compatible. En el siguiente enlace hay una lista con
todos los tipos MIME aceptados, aunque la página está en inglés, creo que la tabla con los tipos
se entiende bastante bien:

[Link]
de_tipos_MIME

Utilización de la etiqueta embed

Un ejemplo de etiqueta embed para sonido es el siguiente:

<embed src="[Link]" loop="1" playcount="1" type="audio/midi" autostart="false" width="200"

height="50" />

Un ejemplo de etiqueta embed para video es el siguiente:

<embed src="[Link] type="application/mov" width="400" height="300" autostart="false"

></embed>

El problema de la etiqueta embed es que el usuario no siempre tiene instalado en su equipo los

plugins necesarios para ver el archivo, por lo que se recomienda utilizar los formatos de archivo
más usados, ya que suelen ser los formatos que soportan la mayoría de los navegadores. Otra
opción es poner un enlace al archivo para que en caso de no poder verse, el usuario pueda
descargárselo.

Recuperado: [Link]

64 DISEÑO DE PÁGINAS WEB EN HTML

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

ACTIVIDAD 14

Realiza lo siguiente:

1. Abre la carpeta con el nombre sitio_practica y crea dentro una carpeta llamada
multimedia.
2. Descarga el video de canto al COBACH 2015 y guárdalo en la carpeta multimedia.
3. En Notepad abre el archivo que guardaste con el nombre [Link].
4. Transcribe el código que falta.
5. Observa la página que te presenta, si muestra algún error corrígelo y vuelve a ejecutar.
6. Practica los diferentes tamaños y ubicaciones de la consola de reproducción de la
etiqueta embed.

Ejercicio 11.
<!DOCTYPE html>
<html>
<head>
<title> COBACHBC </title>
</head>
<Body bgcolor = "#00FFFF">
<IMG SRC="[Link]" ALIGN="MIDDLE" HSPACE=100>
<font color="#0000FF" size="5" face="TAHOMA">
<B> COLEGIO DE BACHILLERES DEL ESTADO DE BAJA CALIFORNIA</B>
</font>
<p align="right">
<font color="#0000cc" size"2" face="Verdana">
10 de Septiembre de 2019.
</font>
</p>
<hr align="center" width="100%" size="10" noshade> </hr>
<center>
<hr align="center" width="100%" size="10" noshade>
<BR>
<font color="#0000FF" size="4" face="Verdana">
<B> BIENVENID@S</B> <BR><br>
</font>
<embed src="multimedia/CantoCobachbc2015.mp4" loop="false" autoplay="true"
width="600" height="400"></embed>
</center>
<hr align="center" width="100%" size="2" noshade>
<p align="left">
<font color="#0000cc" size"2" face="Verdana">
<i>
&copy; 2019. Derechos reservados. <br>
Elaborado por: nombre completo
Matrícula:
Grupo: <br>
Plantel:
</i>
</font>
</p>
</Body>
</html>

SUBMÓDULO 1 65
 Formación para el Trabajo - Sexto Semestre

Enlaces y navegación

Hipervínculos ([Link], 2019)

Un vínculo hipertextual es un texto, botón o imagen que al seleccionar nos lleva a otra dirección
URL, página WEB o recurso.

Cuando un visitante hace clic en el hipervínculo, el destino se mostrará en su navegador web, se

abrirá o se ejecutará, en función del tipo de destino. El destino es con frecuencia otra página web,
pero también puede ser una imagen, un archivo multimedia, un documento de Microsoft Office, un
documento PDF, una dirección de correo electrónico o un programa.

Por tanto, con los hipervínculos podemos establecer “saltos” desde una página a otra, incluso a
puntos concretos dentro de páginas con contenidos extensos. Los hipervínculos pueden asociarse
a imágenes o a textos de modo que haciendo clic sobre ellos con el botón izquierdo del ratón se
accede automáticamente al destino asociado a ellos.

Lo más habitual es que el cursor tome la forma de una pequeña mano cuando pasa sobre un
hipervínculo.

Etiqueta <A> </A>

La etiqueta <A> que viene de “ancla”, denota el inicio y el final de una instrucción que contiene
alguna forma de vínculo o hipervínculo. Esta etiqueta permite al usuario vincularse a otra
ubicación dentro del mismo documento HTML, a otro sitio WEB, a un servidor FTP, enlace de
correo electrónico.

Atributos:
ETIQUETA FUNCIÓN
HREF Recurso al cual se hace referencia el hipervínculo.
ID o NAME Especifica el nombre de la posición a donde apuntar.
TARGET Destino del enlace (generalmente para páginas con Frames).
Anclas

Los hipervínculos locales o marcadores son enlaces dentro de la misma página. Es decir, al hacer
clic en uno de ellos nos llevará a una posición distinta dentro de la misma página que estamos
visualizando.

Esta técnica hace que los usuarios accedan de una manera más rápida a la información.
Para crear este tipo de enlaces hay que hacer dos operaciones:

Establecer marcadores (anclas) a lo largo de la página (son los lugares a los que queremos saltar
con los enlaces).

Poner enlaces que salten a los marcadores.

66 DISEÑO DE PÁGINAS WEB EN HTML

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

El código de los marcadores se crea con los atributos name (no recomendado) o id (recomendado):

<a name="nombre_del_marcador">Texto asociado al marcador</a> (No recomendado: no es

aceptado por las nuevas versiones de HTML, aunque se usó bastante en el pasado).

<a id="nombre_del_marcador">Texto asociado al marcador</a>

El name ó id de una etiqueta debe ser único, es decir, no puede haber dos etiquetas cuyo name ó
id sea el mismo dentro de un documento HTML.

Hay que tener en cuenta que los marcadores distinguen entre mayúsculas y minúsculas. También
que dentro de las etiquetas <a> </a> hay un texto que aparece visible para el usuario, no obstante,
es válido no incluir texto alguno.

Un hipervínculo externo es un vínculo a otro sitio web en Internet (sitio externo). Es un vínculo
a cualquier otro lugar fuera del sitio actual. Cuando ponemos un vínculo externo, escribimos
la dirección completa de la página incluido [Link] rutas que incluyen [Link]
denominamos rutas absolutas. Por ejemplo, <a href="[Link] Acceder a la
página web COBACHBC</a>

En el hipervínculo distinguimos las siguientes partes:

- Las etiquetas de apertura y cierre del hipervínculo <a> y </a>

- El atributo href, con un valor que se indica con el símbolo igual y la URL a la que dirige el
hipervínculo dentro de las comillas.

- Un texto que es el que ve el usuario como link.

Cuando creamos un vínculo, por defecto el navegador abrirá la página web destino en la misma
ventana, pero podemos pedirle al navegador que la abra “aparte”, es decir, en otra ventana. Esto
es útil por ejemplo si queremos abrir una página externa a nuestro sitio pero sin que el visitante
pierda la nuestra. Para ello utilizaremos el atributo target con alguna de las siguientes opciones.

Valores de target más habituales:

•    _blank: Abre el documento vinculado en una ventana nueva del navegador.

•    _self: Es la opción predeterminada o por defecto. Abre el documento vinculado en el mismo
marco o ventana que el vínculo.

Ejemplo:
<a href=”[Link] target=”_blank”>Ir a COBACHBC en una nueva
ventana</a>

Recuperado de: [Link]

enlaces-html-etiqueta-a-atributos-href-target-y-title-tipos-de-links-img-cu00717b&catid=69&Itemid=192

SUBMÓDULO 1 67
 Formación para el Trabajo - Sexto Semestre

ACTIVIDAD 15

Ingresa al bloc de notas y realiza lo siguiente:

1. Crea una carpeta con el nombre HIPERVÍNCULOS, dentro de esta carpeta crea otra
carpeta llamada imágenes
2. Descarga tres imágenes de internet y guárdalas en la carpeta imágenes
3. Transcribe el siguiente código.
4. Graba en la carpeta hipervínculos con el nombre de [Link].
5. Observa la página que te presenta, si muestra algún error corrígelo y vuelve a
ejecutar.

Ejercicio 12

<!DOCTYPE html>
<html>
<head>
<title>Hipervínculos y anclas </title>
</head>
<body>

<a id="arriba"></a>

En esta página puedes ir al <a href="#primero">primer</a> apartado, al <a

href="#segundo">segundo</a> o al <a href="#tercero">tercero</a>.

<a id="primero"><h1>Primer apartado</h1></a>

<img src="imagenes/[Link]" align="middle" height="25%" width="25%">

Aquí tienes el primer apartado. <br>

Al pulsar sobre el enlace, el navegador habrá saltado a esta parte de la página.<br>
Quizás si todo entra en la pantalla no logres ver el efecto pero prueba a poner más texto aquí
o hacer zoom y conseguirás verlo.
<br><br>
Volver <a href="#arriba">arriba</a>.

<a id="segundo"><h1>Segundo apartado</h1></a>

<img src="imagenes/[Link]" align="middle" height="25%" width="25%">

Aquí tienes el segundo apartado. <br>

Al pulsar sobre el enlace, el navegador habrá saltado a esta parte de la página. <br>
Quizás si todo entra en la pantalla no logres ver el efecto pero prueba a poner más texto aquí
o hacer zoom y conseguirás verlo.
<br><br>
Volver <a href="#arriba">arriba</a>.

<a id="tercero"><h1>Tercer apartado</h1></a>

<img src="imagenes/[Link]" align="middle" height="25%" width="25%">

68 DISEÑO DE PÁGINAS WEB EN HTML

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

Aquí tienes el tercer apartado. <br> Al pulsar sobre el enlace, el navegador habrá saltado a esta
parte de la página. <br>
Quizás si todo entra en la pantalla no logres ver el efecto pero prueba a poner más texto aquí o
hacer zoom y conseguirás verlo.
<br><br>
Volver <a href="#arriba">arriba</a>.

<a href=”[Link] target=”_blank”>Ir a COBACHBC en una nueva

ventana</a>

</body>
</html>

El resultado debe ser parecido a la siguiente imagen:

SUBMÓDULO 1 69
 Formación para el Trabajo - Sexto Semestre

Tablas

En HTML también podemos incluir arreglos de tablas. Se deben utilizar varias etiquetas:

Etiqueta <table></table>

Señala el inicio y final de una tabla. Sus atributos son:

ETIQUETA FUNCIÓN
Establece la alineación de la tabla o texto mediante
Align
ALIGN=LEFT o ALIGN=RIGHT.
Bgcolor Establece el color de fondo de las celdas de la tabla.
Border Determina el ancho del borde en pixeles.
BorderColor Asigna un color al borde.
BorderDark Determina el color de la parte oscura de un borde de 3 dimensiones
BorderLight Asigna el color de la parte clara de un borde de 3 dimensiones.
Caption Especifica el título para la tabla.
Cellpadding Establece la cantidad de espacio libre junto al contenido de una celda.
Cellspacing Asigna la cantidad de espacio entre las celdas de una tabla.
Width Determina el ancho de la tabla en pixeles o en un porcentaje

Etiqueta <th> </th>

Indica al navegador cliente que exhiba el texto como un encabezado en la primera fila de una
tabla. Atributos principales:

ETIQUETA FUNCIÓN
Indica el número de columnas que ocupará la celda. Por defecto ocupa
Colspan
una sola columna.
Indica el número de filas que ocupará la celda. Por defecto ocupa una sola
Rowspan:
fila.
Align Determina la posición del texto del título.

Etiqueta <tr> </tr>

Indica al navegador que exhiba el texto dentro de una fila; puede también interpretarse como
la etiqueta que define filas.

ETIQUETA FUNCIÓN
Align Alineación del texto/objeto de la celda.

70 DISEÑO DE PÁGINAS WEB EN HTML

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

Etiqueta <td> </td>

La etiqueta de datos de la tabla, es la que identifica a las columnas o celdas específicas de

una tabla. Atributos principales:

ETIQUETA FUNCIÓN
Align Alineación del texto/objeto de la celda.
Bgcolor Color de fondo de la celda.
Background Imagen de fondo de una celda.
Ancho de la celda/columna con respecto al ancho de la tabla
Width
Solo precisa definir el ancho en la primera celda de la columna.

Recuerda que dentro de una celda, puedes insertar desde texto o un gráfico hasta una tabla entera.

ACTIVIDAD 16

Realiza lo siguiente:

1. Abre la carpeta sitio_practica.

2. Descarga a la carpeta imágenes un logo para correo electrónico.
3. Abre Notepad.
4. Transcribe el ejercicio 13.
5. Graba con el nombre de [Link].
6. Ejecuta el archivo, si presenta errores corrígelos.
7. Observa la tabla que te presenta la página.
8. Modifícala a tu gusto.

Ejemplo 13:

<!DOCTYPE html>
<html>
<head>
<title> Planteles </title>
</head>

<Body bgcolor = "#00FFFF">

<IMG SRC="[Link]" ALIGN="MIDDLE" HSPACE=100>

<font color="#0000FF" size="5" face="TAHOMA">
<B> COLEGIO DE BACHILLERES DEL ESTADO DE BAJA CALIFORNIA</
B>
</font>

SUBMÓDULO 1 71
 Formación para el Trabajo - Sexto Semestre

<a href="[Link] TU DIRECCIÓN DE CORREO ELECTRÓNICO">

<img src="[Link]" align="right" height="80px" width="80px" />
</a>
<p align="right">
<font color="#0000cc" size"2" face="Verdana">
10 de Septiembre de 2019.
</font>
</p>
<hr align="center" width="100%" size="10" noshade> </hr>
<center>
<font size=3>
<table border=2 CELLSPACING=0 CELLPADDING=10
bgcolor="#ffffff">
<tr>
<td align=right>
<font size=3><strong><center>
<a href="[Link]">Inicio </a> </center> </
font>

</td>
<td align=right>
<font size=3><strong><center>
<a href="[Link]">Planteles </a></center> </font>

</td>
<td align=right>
<font size=3><strong><center>
<a href="[Link]">Capacitaciones </a> </center> </font>

</td>

<td align=right>
<font size=3><strong><center>
<a href="[Link]"> Paraescolares </a></center> </font>

</td>

</tr>
</table>
</font>

<hr align="center" width="100%" size="10" noshade>

<BR>
<br><center>
<table width=80% align=center border=3>
<tr><th colspan=3>PLANTELES OFICIALES</th></tr>
<tr align=center>
<td width=40% bgcolor="#C0C0C0"> PLANTEL
</td>
<td width=30% bgcolor="#C0C0C0"> TELÉFONO

72 DISEÑO DE PÁGINAS WEB EN HTML

 TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

</td>
<td width=30% bgcolor="#C0C0C0">UBICACIÓN
</td>
</tr>
<tr>
<td> Mexicali</td>
<td>5534340</td>
<td>Colonia Nueva</td>
</tr>
<tr>
<td>Baja California</td>
<td>5530044</td>
<td>Colonia Baja California</td>
</tr>
<tr>
<td>José Vasconcelos</td>
<td>453444</td>
<td>Nuevo Mexicali</td>
</tr>
<tr>
<td> Ciudad Morelos</td>
<td> 016585147018</td>
<td> Ciudad Morelos</td>
</tr>
<tr>
<td> Guadalupe Victoria</td>
<td> 016585162237</td>
<td> Colonia Guadalupe Victoria</td>
</tr>
<tr>
<td> Nuevo León</td>
<td>5230110 </td>
<td> Ejido Nuevo León</td>
</tr>
<tr>
<td> San Felipe</td>
<td> 5771725</td>
<td> San Felipe</td>
</tr> <tr>
<td> Nayarit</td>
<td> 5234376</td>
<td>Ejido Nayarit </td>
</tr>
<tr>
<td> Estación Coahuila</td>
<td> 016535155354</td>
<td> Estación Coahuila</td>
</tr>
</table>
<br></center>
<hr align="center" width="100%" size="2" noshade>

SUBMÓDULO 1 73
 Formación para el Trabajo - Sexto Semestre

<p align="left">
<font color="#0000cc" size"2" face="Verdana">
<i>
&copy; 2019. Derechos reservados. <br>
Elaborado por: nombre completo
Matrícula:
Grupo: <br>
Plantel:
</i>
</font>
</p>
</Body>
</html>

74 DISEÑO DE PÁGINAS WEB EN HTML

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

ACTIVIDAD INTEGRADORA
PARTE 3

En el siguiente recuadro diseña la tabla con los datos que vas a mostrar en tu segunda
página, anota también las etiquetas que creas convenientes aplicar para programar tu tabla.

SUBMÓDULO 1 75
 Formación para el Trabajo - Sexto Semestre

ACTIVIDAD 17

Realiza lo siguiente:

1. Abre la carpeta sitio_practica.

2. Abre Notepad
3. Transcribe el ejercicio 14.
4. Graba con el nombre de [Link]. (Te indicará que ya existe un archivo con
ese nombre, acepta guardar con el mismo nombre).
5. Ejecuta el archivo, si presenta errores corrígelos.
6. Observa la tabla que te presenta la página.
7. Modifícala a tu gusto.

Ejercicio 14:

<!DOCTYPE html>
<html>
<head>
<title> Asignaturas</title>
</head>
<Body bgcolor = "#00FFFF">

<IMG SRC="[Link]" ALIGN="MIDDLE" HSPACE=100>

<font color="#0000FF" size="5" face="TAHOMA">
<B> COLEGIO DE BACHILLERES DEL ESTADO DE BAJA CALIFORNIA</
B>
</font>
<a href="[Link] TU DIRECCIÓN DE CORREO ELECTRÓNICO">
<img src="[Link]" align="right" height="80px" width="80px" />
</a>
<p align="right">
<font color="#0000cc" size"2" face="Verdana">
10 de Septiembre de 2019.
</font>
</p>

<hr align="center" width="100%" size="10" noshade> </hr>

<center>
<font size=3>
<table border=2 CELLSPACING=0 CELLPADDING=10 bgcolor="#ffffff">
<tr>
<td align=right>
<font size=3><strong><center>
<a href="[Link]">Inicio </a> </center> </font>

</td>
<td align=right>
<font size=3><strong><center>
<a href="[Link]">Planteles </a></center> </font>

76 DISEÑO DE PÁGINAS WEB EN HTML

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

</td>
<td align=right>
<font size=3><strong><center>
<a href="[Link]">Capacitaciones </a> </center> </font>

</td>

<td align=right>
<font size=3><strong><center>
<a href="[Link]"> Paraescolares </a></center> </font>

</td>

</tr>
</table>
</font>
</center>
<hr align="center" width="100%" size="10" noshade> </hr>
<font color="#0000FF" size="5" face="Verdana">
<B> MAPA CURRICULAR
</font>

<h2 align=”left> Formación para el trabajo </h2>
<ul>
<li>Planeación y Administración de Pequeños Negocios</li>
<li>Auditoría de Gestión de Calidad</li>
<li>Contabilidad Comercial y de Servicios </li>
<li>Inglés Empresarial </li>
<li>Informática para Oficinas </li>
</ul>

<h2 align=”left> Componente b&aacute;sico </h2>

<ol>
<li>Matemáticas</li>
<li>Ingles</li>
<li>Informática</li>
<li>Ética y Valores</li>
<li>Introducción a las Ciencias Sociales</li>
<li>Química</li>
<li>Taller de lectura y Redacción</li>
<li>Historia de Mexico</li>
<li>Literatura</li>
<li>Biologia</li>
<li>Fisica</li>
<li>Algebra</li>
<li>Logica</li>
<li>Estructura Socioeconomica de Mexico</li>
</ol>

SUBMÓDULO 1 77
 Formación para el Trabajo - Sexto Semestre

<h2 align=”left> Programas </h2>

<ul type=i>
<li>Orientación</li>
<li>Constrúyete</li>
<li>Paraescolares</li>
<li>Tutorías</li>
</ul>
<hr align="center" width="100%" size="2" noshade>
<p align="left">
<font color="#0000cc" size"2" face="Verdana">
<i>
&copy; 2019. Derechos reservados. <br>
Elaborado por: nombre completo
Matrícula:
Grupo: <br>
Plantel:
</i>
</font>
</p>
</Body>
</html>

78 DISEÑO DE PÁGINAS WEB EN HTML

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

ACTIVIDAD 18

Ingresa al bloc de notas y realiza lo siguiente:

1. Abre la carpeta sitio_practica.

2. Descarga ocho imágenes de las distintas actividades paraescolares que se imparten
en tu plantel y guárdalas en la carpeta imágenes.
3. Transcribe el código del ejercicio 15
4. Graba con el nombre “[Link]” y ejecuta.
5. Observa la página que te presenta, si muestra algún error corrígelo y vuelve a ejecutar.
6. Modifícala a tu gusto.

Ejercicio 15:

<!DOCTYPE html>
<html>
<head>
<title> Paraescolares </title>
</head>

<Body bgcolor = "#00FFFF">

<IMG SRC="[Link]" ALIGN="MIDDLE" HSPACE=100>

<font color="#0000FF" size="5" face="TAHOMA">
<B> COLEGIO DE BACHILLERES DEL ESTADO DE BAJA CALIFORNIA</
B>
</font>
<a href="[Link] TU DIRECCIÓN DE CORREO ELECTRÓNICO">
<img src="[Link]" align="right" height="80px" width="80px" />
</a>
<p align="right">

<font color="#0000cc" size"2" face="Verdana">

10 de Septiembre de 2019.
</font>
</p>

<hr align="center" width="100%" size="10" noshade> </hr>

<center>
<font size=3>
<table border=2 CELLSPACING=0 CELLPADDING=10 bgcolor="#ffffff">
<tr>
<td align=right>
<font size=3><strong><center>
<a href="[Link]">Inicio </a> </center> </font>

SUBMÓDULO 1 79
 Formación para el Trabajo - Sexto Semestre

</td>
<td align=right>
<font size=3><strong><center>
<a href="[Link]">Planteles </a></center> </font>

</td>
<td align=right>
<font size=3><strong><center>
<a href="[Link]">Capacitaciones </a> </center> </font>

</td>

<td align=right>
<font size=3><strong><center>
<a href="[Link]"> Paraescolares </a></center> </font>

</td>

</tr>
</table>
</font>

<hr align="center" width="100%" size="10" noshade>

<BR>

<font color="#0000FF" size="4" face="Verdana">

<B> Actividades Paraescolares</B> <BR>
</font>
</center>
<table width=80% align=center border=8 CELLSPACING=0 CELLPADDING=10 bgcolor="#F1F8E0"
>
<tr>
<td><center>
<img src="[Link]" height="150px" width="150px"></center>
</td>

<td><center>
<img src="[Link]" height="150px" width="150px"></center>
</td>

<td><center>
<img src="[Link]" height="150px" width="150px"></center>
</td>

<td><center>
<img src=”[Link]” height=”150px” width=”150px”></center>
</td><br>
</tr>

<tr>

80 DISEÑO DE PÁGINAS WEB EN HTML

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

<td><center>
<img src="banda de [Link]" height="150px" width="150px"></center>
</td>

<td><center>
<img src="[Link]" height="150px" width="150px"></center>
</td>

<td><center>
<img src="[Link]" height="150px" width="150px"></center>
</td>

<td><center>
<img src="[Link]" height="150px" width="150px"></center>
</td> </center>
</tr>
</table>
</center>

<br><br>

<hr align="center" width="100%" size="2" noshade>

<p align="left">

<font color="#0000cc" size"2" face="Verdana">

<i>
&copy; 2019. Derechos reservados. <br>
Elaborado por: nombre completo <br>
Grupo:
</i>
</font>
</p>

</Body>
</html>

SUBMÓDULO 1 81
 Formación para el Trabajo - Sexto Semestre

ACTIVIDAD 19

Ingresa al bloc de notas y realiza lo siguiente:

1. Abre la carpeta sitio_practica.

2. Verifica que en la carpeta multimedia se encuentre el video del canto al COBACH que
utilizaste en la actividad 1.
3. Transcribe el código del ejemplo 16
4. Graba con el nombre [Link] y ejecuta.
5. Observa la página que te presenta, si muestra algún error, corrígelo y vuelve a ejecutar.
6. Modifícala a tu gusto.

Ejercicio 16:

<!DOCTYPE html>
<html>
<head>
<title> COBACHBC </title>
</head>
<Body bgcolor = "#00FFFF">
<IMG SRC="[Link]" ALIGN="MIDDLE" HSPACE=100>
<font color="#0000FF" size="5" face="TAHOMA">
<B> COLEGIO DE BACHILLERES DEL ESTADO DE BAJA CALIFORNIA</
B>
</font>
<a href="[Link] TU DIRECCIÓN DE CORREO ELECTRÓNICO">
<img src="[Link]" align="right" height="80px" width="80px" />
</a>
<p align="right">
<font color="#0000cc" size"2" face="Verdana">
10 de Septiembre de 2019.
</font>
</p>
<hr align="center" width="100%" size="10" noshade> </hr>
<center>
<font size=3>
<table border=2 CELLSPACING=0 CELLPADDING=10
bgcolor="#ffffff">
<tr>
<td align=right>
<font size=3><strong><center>
<a href="[Link]">Inicio </a> </center> </
font>

</td>
<td align=right>
<font size=3><strong><center>
<a href="[Link]">Planteles </a></center> </font>

82 DISEÑO DE PÁGINAS WEB EN HTML

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

</td>
<td align=right>
<font size=3><strong><center>
<a href="[Link]">Capacitaciones </a> </center> </font>

</td>

<td align=right>
<font size=3><strong><center>
<a href="[Link]"> Paraescolares </a></center> </font>

</td>

</tr>
</table>
</font>

<hr align="center" width="100%" size="10" noshade>

<BR>

<font color="#0000FF" size="4" face="Verdana">

<B> BIENVENID@S</B> <BR>
</font>

<embed src="multimedia/CantoCobachbc2015.mp4"
loop="false" autoplay="true" width="600" height="400"></embed>
</center>
<hr align="center" width="100%" size="2" noshade>

<p align="left">

<font color="#0000cc" size"2" face="Verdana">

<i>
&copy; 2019. Derechos reservados. <br>
Elaborado por: nombre completo <br>
Grupo:
</i>
</font>
</p>
</Body>
</html>

SUBMÓDULO 1 83
 Formación para el Trabajo - Sexto Semestre

ACTIVIDAD INTEGRADORA
PARTE 4

En el siguiente recuadro diseña las listas con los datos que vas a mostrar en tu tercera página,
anota también las etiquetas que creas convenientes aplicar para programar tus listas.

84 DISEÑO DE PÁGINAS WEB EN HTML

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

ACTIVIDAD 20

Después de haber practicado los ejercicios anteriores llena la siguiente tabla, explicando
la función que realiza cada una de las siguientes etiquetas:

NOMBRE: ________________________________________ GRUPO: ________

ETIQUETA FUNCIÓN

<IMG SRC="[Link]>

<IMG SRC="[Link]" ALIGN=BOTTOM

<IMG SRC="[Link]" ALIGN=MIDDLE

HSPACE=100>

<table width=80% align=center border=3></table>

<tr> </tr>

<th colspan=3>PLANTELES OFICIALES</th>

<tr align=center></tr>

<td width=40% bgcolor="#C0C0C0"> PLANTEL>
</td>

SUBMÓDULO 1 85
 Formación para el Trabajo - Sexto Semestre

ACTIVIDAD INTEGRADORA
PARTE 5

Para terminar con la elaboración de tu sitio web, anota en el recuadro siguiente las imágenes
y texto que vas a necesitar para terminar tu página principal, así como las etiquetas que creas
convenientes aplicar para codificar tu página.

86 DISEÑO DE PÁGINAS WEB EN HTML

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

ESTRUCTURA
ETIQUETA DIV ([Link], 2019)

El elemento <div> es un contenedor genérico sin un significado semántico en particular. Se utiliza

comúnmente en el desarrollo de documentos con propósitos estilísticos, en conjunto con los
atributos style y class. También puede resultar útil para proveer atributos comunes a los elementos
contenidos por él, como por ejemplo lang o title.
Los autores deberían considerar a <div>  como último recurso, reservado
únicamente para aquellos casos en los que elementos con mayor significado,
como <main>, <header>,<footer>, <nav> o <article> no son aplicables.
El siguiente ejemplo muestra un par de párrafos (elemento <p>) encerrados por un elemento <div>.
El propósito de <div> en este ejemplo, es el de aplicar un conjunto de estilos a ambos párrafos en
una sola declaración.

Ahora, un atributo title es aplicado a un grupo de elementos, encerrándolos con un <div> y

estableciendo el atributo allí. En la mayoría de los navegadores verás los contenidos del
atributo title al posar el puntero del mouse sobre cualquier elemento del grupo.

SUBMÓDULO 1 87
 Formación para el Trabajo - Sexto Semestre

Recuperado de: [Link]

ETIQUETA ARTICLE. (htmlquick, 2019)

El elemento <article> es un contenedor de bloques de contenido que se consideran independientes
del sitio web y pueden, por lo tanto, ser vistos, reutilizados y distribuidos por separado, como por ejemplo,
en la sindicación. Puedes encontrar habitualmente a este elemento encerrando artículos, entradas de blogs
o mensajes de un foro.

Cuando dos o más de estos elementos están anidados, se supone que el elemento <article> interior
guarda relación con el elemento <article> que actúa como padre. Este podría ser el caso de una entrada
de blog (siendo en sí misma un <article>), donde cada comentario puede estar encerrado por un
elemento <article>.

El elemento <article> puede ser utilizado en conjunto con otros elementos como
<header>, <footer> y <time> para agregar información acerca de su contenido. Esta
información puede ser utilizada, por ejemplo, por navegadores o lectores de noticias.

El siguiente ejemplo muestra un uso básico del elemento <article>. Dentro de éste, podemos ver
únicamente un título y un par de párrafos. Sin embargo, este contenido califica como independiente
y puede ser tratado por separado y aún tener sentido.

Recuperado de: [Link]

ETIQUETA ASIDE (htmlquick, 2019)

El elemento <aside> es un contenedor para información que se considera solo levemente

relacionada al documento o la sección en la que es definida. En otras palabras, el contenido del
elemento <aside> debe estar relacionado al contenido circundante, pero no ser completamente
necesario para su comprensión.

El elemento <aside> puede ser típicamente encontrado alrededor de enlaces de blogrolls,

enlaces al archivo, un glosario, una lista de tweets del autor, o notas, pensamientos o ideas que se

88 DISEÑO DE PÁGINAS WEB EN HTML

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

le han ocurrido al autor durante la producción del documento. Asimismo, puedes ver ejemplos
perfectos de notas al margen en revistas y diarios impresos, donde se provee información adicional
(pero no crítica) para enriquecer la experiencia del usuario.

Los autores no deberían utilizar el elemento <aside> para encerrar contenido que
no guarda relación con la sección en la que se define. Su contenido debe tener
alguna relación con su entorno.

EJEMPLOS

En este ejemplo usaremos al elemento <aside> para definir una sección de navegación con

vínculos a sitios relacionados. Puedes ver como los vínculos están, ciertamente, relacionados al
documento.

En el siguiente ejemplo, insertaremos un bloque <aside> dentro de una de las entradas del blog

(contenida por un elemento <article>), y por lo tanto, sus contenidos deberán estar relacionados a
los contenidos de dicha entrada y no a la página como un todo.

SUBMÓDULO 1 89
 Formación para el Trabajo - Sexto Semestre

Recuperado de: [Link]

ETIQUETA FOOTER (htmlquick, 2019)

El elemento <footer> representa al pie de una sección o documento, donde los autores

habitualmente colocan firmas, información acerca del autor, información de licencias, documentos
relacionados, etc. En muchos casos, los contenidos del pie de un documento son consistentes a
lo largo de todo el sitio.

Cuando un elemento <footer> es declarado dentro de un elemento de seccionamiento (como

<article> o <section>) representa un pie en el ámbito de ese elemento. De lo contrario (cuando
pertenece al elemento <body>) representa un pie para el documento entero.

Aunque es una práctica común colocar los pies al final de la página o sección, no es necesario
que ocupen ese lugar. Un pie es un pie por lo que representa, no por su ubicación.

La información de contacto acerca del autor de un documento o artículo corresponde dentro

del elemento <address> el cual podría incluirse, a su vez, dentro de un elemento <footer>.

EJEMPLOS

En el siguiente ejemplo, el elemento <footer> es usado para proveer vínculos de navegación e

información de contacto acerca del autor del documento (contenida en el elemento <address>).

90 DISEÑO DE PÁGINAS WEB EN HTML

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

Ahora, el elemento <footer> provee información sobre los derechos de copia de la sección que lo

contiene (<article>).

Recuperado de: [Link]

ETIQUETA HEADER (htmlquick, 2019)

El elemento <header> contiene al encabezado de una sección o documento, donde se

colocan habitualmente los encabezados, los vínculos de navegación, los formularios de búsqueda,
los logos, las tablas de contenidos, las introducciones, etc. En muchos casos, los contenidos del
encabezado de un documento son consistentes a lo largo de todo el sitio.

Los autores no deben confundir a los elementos <header> y <head>. Mientras que

el  elemento  head provee metadatos para el documento, <header> contiene un grupo de
elementos introductorios o de navegación.

Cuando un elemento <header> es declarado dentro de un elemento de seccionamiento

(como <article> o <section>) representa un encabezado en el ámbito de ese elemento.
De lo contrario (cuando pertenece al elemento <body>) representa un encabezado para el
documento entero.

SUBMÓDULO 1 91
 Formación para el Trabajo - Sexto Semestre

EJEMPLOS

Nuestro primer ejemplo usa un elemento <header> para agrupar un logo, el nombre de la compañía

y un formulario de búsqueda. Es muy común encontrar este formato en casos reales.

Ahora, el encabezado de este documento muestra algunos vínculos de navegación

(apropiadamente encerrados en un elemento <nav>) y una tabla de contenidos.

En nuestro tercer ejemplo, declararemos un elemento <article> con su propio encabezado

(<header>). En contraste con los ejemplos previos, en este caso el elemento <header> sólo afecta
a la sección que lo contiene..

92 DISEÑO DE PÁGINAS WEB EN HTML

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

Recuperado de: [Link]

ELEMENTOS EN LÍNEA.

ETIQUETA EM (htmlquick, 2019)

El elemento <em> representa texto con énfasis. La posición de este elemento en una oración
y las palabras que encierra son importantes para la interpretación de su significado.

El elemento <em> provee énfasis al texto que encierra. Cuando se precisa simplemente
resaltar un trozo de texto como si estuviese en un modo o voz diferente, el elemento <i>
debería usarse en su lugar.

El elemento <em> no confiere importancia a su contenido. Para otorgar importancia a un

trozo de texto usa el elemento <strong>.

EJEMPLOS

El siguiente ejemplo muestra al elemento <em> siendo usado de diferentes formas en una misma
oración, con el propósito de demostrar cómo su posición y el texto que encierra pueden cambiar el
significado que transmite a toda la oración.

SUBMÓDULO 1 93
 Formación para el Trabajo - Sexto Semestre

En los primeros tres ejemplos el autor está reafirmando algún aspecto de la misma declaración:

1. La lluvia está, en efecto, cayendo, como si alguien hubiese puesto en duda esta afirmación.
2. El día está lluvioso, como si alguien hubiese sugerido que estaba soleado o en algún otro
estado.
3. Es de día, como si alguien hubiese supuesto que era de noche.

En la oración final, el énfasis está siendo aplicado a todo el texto, evidenciando el esfuerzo del
autor en dejar el punto en claro. Este esfuerzo es usualmente la razón por la cual la oración es
acompañada por signos de exclamación.

Recuperado de: [Link]

ETIQUETA STRONG (htmlquick, 2019)

El elemento <strong> provee importancia, seriedad o urgencia al texto que contiene. Por lo tanto,

se vuelve útil para distinguir la parte importante o seria de un encabezado o párrafo, o para encerrar
texto que el autor necesita que sea leído primero o con urgencia.

Los contenidos del elemento <strong> son tradicionalmente representados por los

navegadores con texto en negrita. Sin embargo, esta conducta puede ser alterada mediante
hojas de estilos.

EJEMPLOS

En nuestro primer ejemplo crearemos un encabezado para la descripción del 8vo episodio de

nuestra serie favorita de televisión. Aquí puedes ver como el texto "Episodio 8" tiene de algún
modo menor importancia, y que el nombre del episodio es lo que realmente interesa.

94 DISEÑO DE PÁGINAS WEB EN HTML

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

Nuestro segundo ejemplo muestra una lista de acciones que la gente debería llevar a cabo en caso
de incendio. La parte más importante o urgente de ésta se marca con el elemento <strong>.

Recuperado de: [Link]

ETIQUETA SPAN ([Link], 2019)

El elemento <span> es un contenedor genérico sin un significado semántico en particular.

Es comúnmente usado en la creación de páginas con propósitos estilísticos, en conjunto con los
atributos style y class. También puede ser útil para proveer atributos, como lang o title, a porciones
aisladas de texto.

El elemento <span> está diseñado para contener líneas simples de texto únicamente. Para
bloques más grandes de contenido usa el elemento <div> en su lugar.

EJEMPLOS
El siguiente ejemplo muestra un documento diseñado para enseñar a los niños cómo pintar un
arcoíris. Para que sea más atractivo para audiencias jóvenes, sus nombres son presentados en
colores mediante el elemento <span>.

SUBMÓDULO 1 95
 Formación para el Trabajo - Sexto Semestre

Ahora, una oración contiene una palabra en otro lenguaje que está siendo encerrada con el
elemento <span>, a fines de establecer el atributo lang para la misma.

Recuperado de: [Link]

Atributos de identificación
id

El atributo global id define un identificador único (ID) el cual no debe repetirse en todo el documento.

Su propósito es identificar el elemento  al vincularlo  (usando un identificador de fragmento),  en
scripts u hojas de estilo (con CSS).

El valor de este atributo es una cadena de caracteres opaca: es decir,  el autor del sitio no debe
usarlo para proporcionar información. De forma particular, en sentido semántico por ejemplo, no
debe ser derivado de la misma cadena.

El valor de este atributo no debe contener espacios en blanco. Los navegadores tratan los IDs
que contienen espacios en blanco como si los espacios fueran parte del ID. En contraste con el
atributo class, el cual permite valores separados por espacios, los elementos pueden tener sólo
un ID definido mediante el atributo ID. Tenga en cuenta que un elemento puede tener muchos ID,
pero los demás deben ser definidos de otra forma, como por medio de un script interactuando con
el DOM. (MDN web docs Mozilla, 2019)

Recuperado de: [Link]

define,de%20estilo%20(con%20CSS)

En un documento HTML, los selectores de ID de CSS buscan un elemento basado en el contenido

del atributo id. El atributo ID del elemento seleccionado debe coincidir exactamente con el valor
dado en el selector. (MDN web docs Mozilla, 2019)

Sintaxis

96 DISEÑO DE PÁGINAS WEB EN HTML

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

Recuperado de: [Link]

Atributo Class

El  atributo global class es una lista de las clases del elemento separada por espacios. Las
clases permiten a CSS y Javascript seleccionar y acceder a elementos específicos a través de
los  selectores de clase o funciones como el método [Link] del
DOM.

Aunque la especificación no define los requerimientos para el nombre de las clases, se alienta a los
desarrolladores web a usar nombres que describan el propósito semántico del elemento, en lugar de
la presentación del elemento (e.g., atributo para describir un atributo en lugar de itálica, aunque un
elemento de esta clase puesde ser presentado por itálica). Los nombres semanticos permanecen
lógicos incluso si la presentación de la página cambia. (MDN web docs Mozilla, 2019)

Recuperado de: [Link]

class%20es,m%C3%A9todo%[Link]%20del%20DOM.

En un documento HTML, los selectores de clase buscan un elemento basado en el contenido de

su atributo class. El atributo class está definido como una lista de elementos separados por espacio,
y uno de esos elementos debe coincidir exactamente con el nombre de clase dado en el selector.

SUBMÓDULO 1 97
 Formación para el Trabajo - Sexto Semestre

98 DISEÑO DE PÁGINAS WEB EN HTML

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

ANEXOS: ETIQUETAS HTML

Marquesinas

Vamos a ver ahora lo que son las marquesinas. Son pequeñas ventanas donde vemos un texto
desplazarse. Solo son implementadas por Microsoft Internet Explorer 3.0 o superior, y no por
Netscape y los demás navegadores, donde se verá como un texto fijo.

La etiqueta básica será

<MARQUEE> y </MARQUEE>

<MARQUEE>Texto desplazándose</MARQUEE>

Esta es una marquesina por defecto, pero se pueden añadir muchos más parámetros:
 
Anchura y altura, WIDTH=x y HEIGHT=y, respectivamente, siendo x e y un número de píxeles
o un porcentaje de la pantalla.
<MARQUEE WIDTH=50% HEIGHT=80>Marquesina con el 50% de la ventana de ancho y 80
pixeles de alto</MARQUEE>

Alineamiento del texto que rodea a la marquesina, con ALIGN="xxx", que puede ser TOP
para arriba, MIDDLE en el medio o BOTTOM para abajo.

<MARQUEE WIDTH=50% HEIGHT=80 ALIGN=BOTTOM>Marquesina con "texto" alineado en la

parte inferior</MARQUEE> Texto

Color de fondo. Se hace con BGCOLOR="xxyyzz", siendo éste un número hexadecimal.

<MARQUEE BGCOLOR="AA0000">Texto desplazándose con fondo granate</MARQUEE>

Comportamiento, con BEHAVIOR="xxx". "xxx" se sustituye por dos cosas: SCROLL, por defecto,
y ALTERNATE. Con este último el texto se moverá de un lado a otro sin desaparecer.

<MARQUEE BEHAVIOR=ALTERNATE>Texto desplazándose alternadamente</MARQUEE>

Dirección del texto, con DIRECTION="xxx", siendo xxx LEFT para que se mueva hacia la
izquierda (por defecto) o RIGHT para que se mueva hacia la derecha

<MARQUEE DIRECTION=RIGHT>Texto desplazándose hacia la derecha</MARQUEE>

Cantidad de texto, con SCROLLAMOUNT=xx, siendo xxx el número de pixeles que se desplazan
en cada avance. Cuanto mayor sea más rápido avance.

<MARQUEE SCROLLAMOUNT=50>Texto avanzando rápido</MARQUEE>

Tiempo del movimiento de avance, con SCROLLDELAY=xxx, siendo xxx el número de

milisegundos que dura cada movimiento de avance. Cuanto mayor sea más lento irá.

<MARQUEE SCROLLDELAY=150>Texto avanzando lento</MARQUEE>

SUBMÓDULO 1 99
 Formación para el Trabajo - Sexto Semestre

Número de veces que aparecerá el texto, con LOOP=x siendo x en número de veces. Por defecto es
infinito.

Separación entre el texto de la marquesina y el borde de su ventana, con HSPACE=x y VSPACE=y,

siendo x los píxeles en los márgenes izquierdo y derecho, e y los píxeles en los márgenes superior e
inferior.

 Ya fuera de la etiqueta <MARQUEE>, también es posible decidir la fuente o tipo de letra en una marquesina
con la etiqueta <FONT FACE="xxx">, siendo xxx el nombre de la fuente, de la siguiente manera:

<FONT FACE="Arial">
<MARQUEE>Texto con fuente Arial</MARQUEE>
</FONT>
<marquee bgcolor="#FFFFFF"
behavior="alternate" direction="down">
VIVA MEXICO
</marquee>

Otras etiquetas útiles

Existen otras etiquetas que pueden ser útiles al momento de elaborar las páginas HTML. Se detalla
el objetivo de cada una de las etiquetas y un ejemplo.

Etiqueta de comentarios <!-- -->

Etiqueta que puede ser introducida en cualquier parte del código y que es utilizada para realizar
acotaciones o comentarios.

Sintaxis de Ejemplo:
<!-- Los comentarios se introducen de esta manera -->

Etiqueta de comentarios <comment> </comment>

Etiqueta que puede ser introducida en cualquier parte del código y que es utilizada para realizar
acotaciones o comentarios.

Sintaxis de Ejemplo:
<comment>Los comentarios se introducen de esta manera</comment>

Etiqueta <address></address>
Ofrece una manera de dar formato a un pequeño cuerpo de texto que se asemeje a la rotulación de una
carta convencional.

Sintaxis de ejemplo:
<address>Rocio Ruiz<br> POBOX
2282<br>
Mexicali- Baja California</address>

100 DISEÑO DE PÁGINAS WEB EN HTML

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

Etiqueta <cite> </cite>

El texto dentro de la etiqueta <cite> aparece en cursivas para representar una cita

Sintaxis de ejemplo:
<cite>Este texto estar&aacute; inclinado</cite>

Etiqueta <code> </code>

El texto dentro de la etiqueta <code> aparece en una fuente con caracteres mono espaciados
cuando se visualiza a través de un navegador.

Sintaxis de ejemplo:
<code>Este texto aparece con tipo de letra especial</code>

Etiqueta <credit> </credit>

Esta etiqueta se emplea para indicar los créditos por el material incluido en un documento. A
menudo se asignan créditos para las fuentes e individuos que se citan en forma directa.

Sintaxis de ejemplo:
<credit>Foto usada bajo permiso de Carlos An&iacute;barro</credit>

Etiqueta <em> </em>

Indica que se debe dar énfasis al texto que se contiene. El navegador resaltará este texto con
negritas e inclinación itálica.

Sintaxis de ejemplo:
<em>Texto resaltado</em>

Etiqueta <kbd> </kbd>

La etiqueta <kbd> indica al navegador que interprete el texto especificado en una fuente en
negritas de ancho fijo. Por lo regular, esta etiqueta se usa para ejemplificar una entrada del
teclado hecha por el usuario.

Sintaxis de ejemplo:
<kbd>Teclee su mensaje ac&aacute;:</kbd>

Etiqueta <nobr> </nobr>

La etiqueta <nobr> impide que el navegador inserte un salto de línea, incluso cuando es
adecuado el ajuste de texto. Algunas cadenas de texto no deberían romperse bajo ninguna
circunstancia. Un buen ejemplo de una cadena de texto que debe permanecer sin cortes es un
URL extenso.

SUBMÓDULO 1 101
 Formación para el Trabajo - Sexto Semestre

Sintaxis de ejemplo:
No deseo que esta dirección URL larga sea cortada:
<nobr>[Link]

Etiqueta <p> </p>

La etiqueta <p> o de párrafo, indica el inicio y el final de oraciones a exhibir con un solo párrafo.

Sintaxis de ejemplo:
<p>a partir de ahora definimos p&aacute;rrafos de esta manera.</p>
<p align=”center”>P&aacute;rrafo en el centro</p>
<p align=”left”>P&aacute;rrafo a la izquierda</p>
<p align=”right”>P&aacute;rrafo a la derecha</p>

Etiqueta <pre> </pre>

La etiqueta <pre> significa texto “preformateado” y se usa para conservar espacios y saltos de
línea en cuerpos de texto. Esta etiqueta resulta útil en el formateo de un párrafo completo que
el autor quisiera que el navegador cliente lo exhibiese palabra por palabra.

Sintaxis de ejemplo:
<pre>El texto que usted ve.
Aparecer&aacute; tal cual, incluidos los retornos de carro</pre>

Etiqueta <s> </s> o <strike> </strike>

Instruye al navegador que tache el texto incluido entre las etiquetas.

Sintaxis de ejemplo:
<strike>Este texto esta tachado</strike>

Etiqueta <strong> </strong>

Hace que el navegador exhiba el texto en negritas. Algunos navegadores muestran el texto
en cursivas.

Sintaxis de ejemplo:
<strong>Este texto esta sobre saltado</strong>

Etiqueta 

Instruye al navegador que exhiba el texto especificado como subíndice.

Sintaxis de ejemplo:
Agua: H₂0

102 DISEÑO DE PÁGINAS WEB EN HTML

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

Etiqueta 

Indica al navegador exhibir el texto especificado como super índice

Sintaxis de ejemplo:
Mate: 2*2 = 2².

Etiqueta <tt> </tt>

Etiqueta teletipo, instruye al navegador que exhiba el texto especificado en una fuente de
ancho fijo.

Sintaxis de ejemplo:
<tt>Este es un tipo de letra de teletipo</tt>

Etiqueta <var> </var>

Indica al navegador que exhiba el texto especificado en una fuente más pequeña, de ancho fijo.

Sintaxis de ejemplo:
<var>Este texto será más pequeño y de formato especial</var>

Atributo bgproperties=”fixed ” del BODY

Indica a su navegador Internet Explorer que mantenga el fondo constante y no móvil de forma
vertical.

Sintaxis de ejemplo:
<body text=”#FFFFFF” bgcolor=”#000000” background=”[Link]”
bgproperties=”fixed”>

SUBMÓDULO 1 103
 Formación para el Trabajo - Sexto Semestre

AUTOEVALUACIÓN

Una vez finalizadas las actividades de aprendizaje completa la siguiente escala de apreciación
para evaluar tu desempeño. Utiliza la siguiente escala.

Excelente

Bien

Regular

Insuficiente

CRITERIO Excelente Bien Regular Insuficiente

Contesté todas las
actividades de este
submódulo para cada uno de
los temas.
Llevé a cabo todas las
lecturas de los temas en
forma concienzuda y crítica.
Utilicé los elementos
fundamentales del diseño de
una página web.
Conocí la estructura de una
página web.
Participé con una actitud
responsable, crítica
y propositiva en las
actividades solicitadas.
Mostré en todo momento
respeto hacia mis
compañeros y profesor.

INTEGRACIÓN: En mesa redonda, menciona brevemente en forma oral las actividades

que realizaste durante el primer submódulo, enfatizando lo aprendido y la importancia que
tiene para ti el saber utilizar los elementos fundamentales del diseño de una página web y
conocer la estructura de una página web.

104 DISEÑO DE PÁGINAS WEB EN HTML

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

ACTIVIDAD INTEGRADORA

NOMBRE: GRUPO:

En trabajo colaborativo como proyecto final deberás entregar en un CD lo siguiente:

1.- El Documento en Microsoft Word del diseño de tu página web que elaboraste en la parte
1 de la actividad integradora.

2.- El archivo que elaboraste en el bloc de notas de tu página principal [Link] que incluya:

→ Encabezado.
→ Imágenes.
→ Hipervínculos a otras páginas web.
→ Hipervínculos a tus páginas.
→ Opción para enviar un correo.
→ Pie de página.

3.- El archivo que elaboraste en el bloc de notas de la segunda página, en la que apliques las
tablas.

4.- El archivo que elaboraste en el bloc de notas de la tercera página, en la que apliques listas.

5.- El archivo que elaboraste en el bloc de notas de la cuarta página donde visualice un video.

6.- Las cuatro páginas de tu sitio web FUNCIONANDO CORRECTAMENTE.

7.- El documento en Microsoft Word con las conclusiones individuales de cada uno de los
integrantes del equipo.

SUBMÓDULO 1 105
 Formación para el Trabajo - Sexto Semestre

HETEROEVALUACIÓN

El docente evaluará el trabajo de acuerdo a la siguiente rúbrica: Excelente, Bien, Regular,

Insuficiente.

Excelente Bien Regular Insuficiente

CRITERIO
12% 10% 8% 2%
• Elabora la planificación de su
página web.
Utiliza los • Realiza el diseño de su página Realiza al Realiza al
Realiza al menos
elementos web. menos 2 de menos 1 de
3 de las acciones
fundamentales • Define las imágenes y sus las acciones las acciones
mencionadas
del diseño de ubicaciones. mencionadas mencionadas
una página en la columna
• Define los enlaces a otras en la columna en la columna
web. “Excelente”.
páginas y con sus propias “Excelente”. “Excelente”.
páginas.

• Conoce los términos básicos

del lenguaje HTML.
• Conoce el cuerpo del lenguaje
HTML.
Realiza al Realiza al
• Aplica las etiquetas del Realiza al menos
Conoce la menos 2 de menos 1 de
lenguaje HTML. 3 de las acciones
estructura de las acciones las acciones
• Inserta imágenes en la página mencionadas
una página mencionadas mencionadas
web. en la columna
web, en la columna en la columna
• Inserta hipervínculos a otras “Excelente”.
“Excelente”. “Excelente”.
páginas web y a sus propias
páginas.
• Agrega la opción de envío de
correo en lenguaje HTML.

TOTALES

CALIFICACIÓN OBTENIDA

106 DISEÑO DE PÁGINAS WEB EN HTML

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

I. INFORMACIÓN GENERAL PARA EL PROCESO DE EVALUACIÓN

NOMBRE DEL EVALUADOR:

FECHA DE
APLICACIÓN:
NOMBRE DEL CANDIDATO:

IECL
Código Título: TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN
Perfil de la NTCL que se evalúa

DISEÑO DE PÁGINAS WEB EN HTML

Diseño web Hojas de Estilo CSS

Comunidades Virtuales

Código Título Nivel

Elementos: DISEÑO DE PÁGINAS WEB EN HTML

Referencia Código Título: TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN
1 de 3
Intento de Intento de
Intento de evaluación
evaluación evaluación
1 2 3

Domina el contenido No domina el contenido

Juicio de la Evaluación del

Con letra Con número
Submódulo 1

SUBMÓDULO 1 107
 Formación para el Trabajo - Sexto Semestre

Juicio de evaluación
Aprendizajes Esperados
Con letra Con número
Produce un sitio web utilizando los elementos básicos del
lenguaje HTML en la creación de páginas web.

Criterios SÍ NO N/A

Trabaja colaborativamente.

Entrega en tiempo y forma.

Elige un tema para desarrollar su página web.

Identifica las fuentes de consulta para su página web.

Define la escalabilidad de su página web.
Elabora la planificación de su página web.
Realiza el diseño de su página web.
Define las imágenes y sus ubicaciones.
Define los enlaces a otras páginas web y con sus propias páginas.
Existe un enlace o página que describa el propósito del sitio web y suministre
información de quien la publicó o respalda.
Es posible establecer contacto con los desarrolladores mediante un correo
electrónico. El autor o los autores están claramente identificados en la página.
Las imágenes presentan un tamaño adecuado, están identificadas y referenciadas.
Los encabezados, párrafos, listas, etc., presentan los mismos estilos.
Accesibilidad. Los enlaces están vigentes/activos.
Estética. El diseño y combinación de colores son adecuados.
Compatibilidad. El sitio web se ve y funciona bien independientemente del
navegador que se utilice.
Si la información publicada proviene de otras fuentes, se citan correctamente.
Los colores que maneja son claros y permiten leer la información que muestra la
página.
Muestra información del autor de la página web.
Muestra un enlace de envío de correo al autor.

108 DISEÑO DE PÁGINAS WEB EN HTML

 SUBMÓDULO 2
HOJAS DE ESTILO CSS

Competencias Genéricas Competencias Profesionales Básicas

4. Escucha, interpreta y emite mensajes
pertinentes en distintos contextos mediante la CPBT3. Plantea el uso y administración
utilización de medios, códigos y herramientas de plataformas electrónicas de consulta,
apropiados. comunicación y distribución de contenidos
multimedia, proponiendo comunidades
CG4.5 Maneja las tecnologías de la información virtuales que le permita comunicarse,
y la comunicación para obtener información y favoreciendo su autoaprendizaje en un
expresar ideas. ambiente innovador en sus diferentes
contextos.
5. Desarrolla innovaciones y propone CPBT6. Elabora diversos recursos gráficos
soluciones a problemas a partir de métodos publicitarios utilizando software de diseño,
establecidos. permitiendo su publicación en medios
digitales e impresos para comunicar ideas o
CG5.1 Sigue instrucciones y procedimientos de emociones aplicables a contextos laborales,
manera reflexiva, comprendiendo como cada escolares y de la vida cotidiana, en un
uno de sus pasos contribuye al alcance de un ambiente ético e innovador, mostrando
objetivo. flexibilidad y apertura a diferentes puntos de
vista.
8. Participa y colabora de manera efectiva en
equipos diversos.

CG8.1 Propone maneras de solucionar un

problema o desarrollar un proyecto en equipo,
definiendo un curso de acción con pasos
específicos.
 Formación para el Trabajo - Sexto Semestre

SUBMÓDULO

2 HOJAS DE ESTILO CSS

Interdisciplinariedad Ejes Transversales

¾ Emprendimiento.
¾ Estrategias de Lectura y Escritura II ¾ Vinculación laboral.
¾ Ecología y Medio Ambiente ¾ Iniciar, continuar y concluir sus estudios de
nivel superior.

Aprendizajes esperados
y Produce un sitio web utilizando los elementos básicos del lenguaje HTML, con la ayuda de las
hojas de estilo CSS, para publicitar empresas o instituciones, entre otros; como una forma de
solucionar problemas de su entorno.

y Emplea el procedimiento adecuado para publicitar un sitio web en un servidor gratuito, dando
publicidad a empresas e instituciones, entre otros; como una forma de solucionar problemas,
de manera ética y responsable.

Conocimientos Básicos Habilidades Actitudes

Enlazar hojas de estilo. ¾ Identifica los elementos ¾ Se comunica de
El modelo caja. básicos de las hojas de manera asertiva y
¾ Contenido, alto, ancho, padding, estilo. empática.
borde, margen.
¾ Establece la estructura ¾ Expresa ideas
Selectores y propiedades. y diseño de una página y conceptos
¾ Tipos de selectores. web en una hoja de favoreciendo su
¾ Nombres de propiedades. estilo. creatividad.
¾ Tipos de valores de propiedades.
¾ Construye páginas ¾ Muestra innovación
Color de fondo y color de texto. web en código HTML en las diversas
Tipografía y texto. enlazado con hojas de formas de
¾ Familia, estilo, peso, decoración, estilo CSS. expresarse en su
alineación. contexto.
¾ Sangría, interlineado, columnas. ¾ Emplea las opciones
para publicar un sitio
Posicionamiento de contenedores. web.
¾ Apilado por defecto.
¾ Flotado de elementos.
○ Izquierdo y derecho.
○ Limpieza de flotado.
Formato de contenedores.
¾ Imagen de fondo.
¾ Esquinas redondeadas.
¾ Sombra/brillo.

Publicar el sitio WEB en un servidor gratuito.

(Se sugiere el servidor 000webhost).

110 HOJAS DE ESTILO CSS

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

CONOCIMIENTOS PREVIOS

Es muy importante para los docentes saber el grado de conocimiento con que
cuentan sus alumnos de acuerdo a los temas que se van a tratar, es por eso que
deberás responder el siguiente cuestionario, atendiendo las instrucciones que te dé
el profesor.

1.- ¿Qué elementos has detectado que componen las páginas web que normalmente has visitado?
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________

2. ¿Cuáles son los fines de la creación de una página web empresarial o de servicios?
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________

3.- ¿Qué elementos consideras debería tener la página web que diseñes?
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________

Revisó: _____________________________________________________.

Aciertos: _______________________.

ACTIVIDAD DE COEVALUACIÓN

Una vez contestado el cuestionario anterior intercambia tu guía de aprendizaje con el compañero
de al lado. El profesor mencionará las respuestas correctas para cada reactivo.
Califica las respuestas de tu compañero y anota tu nombre en el espacio que dice REVISÓ
Anota también el número de aciertos que obtuvo.

SUBMÓDULO 2 111
 Formación para el Trabajo - Sexto Semestre

INTRODUCCIÓN
¿QUÉ ES UNA HOJA DE ESTILO?

¿Qué es una hoja de estilo?

En las primeras versiones del HTML, el código fuente de una página web contenía tanto la
información (el contenido) como la forma de representarse (el diseño o formato). Actualmente,
estos dos aspectos se pueden separar. La página web (el documento html) sólo debe contener
información, mientras que el formato se debe definir en las llamadas hojas de estilo (en inglés,
CSS, Cascading Style Sheets, es decir, Hojas de Estilo en Cascada).
__________________________________________________________________

El funcionamiento de las hojas de estilo es el siguiente:

• En la página web (archivo .html) se escriben las etiquetas que definen categorías o elementos.

• En la hoja de estilo (archivo .css) se escribe cómo queremos que sea el estilo de presentación
de las etiquetas (color, tamaño, fuente, bordes, márgenes, posición, etc).

• En la página web se escribe qué hoja de estilo queremos utilizar.´

Las ventajas de utilizar hojas de estilo son muchas, sobre todo permiten hacer un diseño consistente
y fácil de modificar. Si varias páginas web hacen referencia a la misma hoja de estilo, para cambiar
la apariencia de todas las páginas es suficiente con hacer los cambios en un único lugar, en la hoja
de estilo.

112 HOJAS DE ESTILO CSS

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

Sintaxis de las hojas de estilo

Una hoja de estilo es un fichero de texto plano (sin formato) en el que se define el aspecto de las
etiquetas de una página web:

Una hoja de estilo está formada por una o varias sentencias:

Existen dos tipos de sentencias: las reglas-arroba y las reglas:

Las reglas-arroba empiezan por el símbolo de arroba (@) pegado a un identificador y terminan
por un punto y coma (;):

SUBMÓDULO 2 113
 Formación para el Trabajo - Sexto Semestre

Algunas reglas-arroba (@import o @namespace) deben aparecer al principio de la hoja de estilo,

pero el resto (@font-face, @media, etc.) pueden escribirse en cualquier lugar de la hoja de estilo.

Las reglas están formadas por un selector y un bloque de declaración. El bloque de declaración
empieza y acaba con llaves { }.

Cada declaración está formada por una o varias propiedades y sus valores correspondientes.
Las propiedades van separadas entre sí por puntos y comas. El valor (o valores) van separados
de las propiedades por dos puntos. En general, si una propiedad necesita varios valores, los
valores van separados por espacios en blanco. En general, si una propiedad admite varios valores
alternativos, los valores van separados por comas.

Recuperado de: [Link]

114 HOJAS DE ESTILO CSS

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

PASOS PARA CREAR UNA PÁGINA CON ESTILO .CSS

ESCRIBIR EL CÓDIGO HTML

El paso 1 consiste en abrir tu editor de texto (Notepad, TextEdit, HTML Kit o el que desees),
comenzar con una ventana vacía y escribir lo siguiente:

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”>

<html>
<head>
<title>Mi primera página con estilo</title>
</head>

<body>

<!-- Menú de navegación del sitio -->

<ul class=”navbar”>
<li><a href=”[Link]”>Página principal</a>
<li><a href=”[Link]”>Capacitaciones</a>
<li><a href=”[Link]”>Mi Plantel</a>
<li><a href=”[Link]”>Enlaces</a>
</ul>

<!-- Contenido principal -->

<h1>Mi primera página con estilo</h1>

<p>¡Bienvenido a mi primera página con estilo!

<p>No tiene imágenes, pero tiene estilo.

También tiene enlaces, aunque no te lleven a
ningún sitio…

<p>Debería haber más cosas aquí, pero todavía no sé

qué poner.

<!-- Firma y fecha de la página, ¡sólo por cortesía! -->

<address>Creada el 19 de junio del 2020<br>
por mí mismo.</address>

</body>
</html>

La primera línea que aparece en el archivo HTML, le dice al navegador el tipo de HTML (DOCTYPE
significa DOCument TYPE - en español: TIPO de DOCumento). En este caso, se trata de la versión
4.01 de HTML.

SUBMÓDULO 2 115
 Formación para el Trabajo - Sexto Semestre

Las palabras que se encuentran entre < y > se llaman etiquetas (tags) y, como puedes ver, el
documento está entre las etiquetas <html> y </html>. Entre <head> y </head> hay espacio para
diferentes tipos de información que no aparecerán en la pantalla. Hasta ahora, el documento sólo
contiene el título pero posteriormente también se añadirá la hoja de estilos de CSS.

El <body> es dónde se sitúa el texto del documento. En un principio, cualquier cosa que se
coloque ahí será mostrado, excepto el texto que esté dentro de las siguientes etiquetas <!-- y -->,
las cuales muestran el contenido situado en ese lugar como un comentario de referencia para
nosotros mismos. El navegador la ignorará.

De las etiquetas del ejemplo, <ul> crea una “lista desordenada”, es decir, una lista en la cual los
elementos no están numerados. La etiqueta <li> indica el comienzo de un “elemento lista”. <p> es
un “párrafo”. Y <a> es un “enlace”, que es lo que crea un hipervínculo.

• “ul” representa una lista con un hipervínculo por cada elemento. Esto mostrará nuestro
“menú de navegación del sitio” con enlaces a otras páginas (ficticias) del sitio Web.
Supuestamente, todas las páginas de nuestro sitio web tienen un menú similar.

• Los elementos “h1” y “p” componen el único contenido de esta página, mientras que la
firma al final (“address”) será la misma para todas las páginas del sitio.

Observa que no cerramos los elementos "li" y "p". En HTML, se pueden omitir las etiquetas </li> y
</p>, que fue lo que hicimos aquí, precisamente para hacer el texto más sencillo de leer. Pero si
se prefiere pueden ser añadidas.

Vamos a suponer que va a ser una página de un sitio web que tendrá varias páginas similares.
Como es frecuente en páginas web, ésta tiene un menú con enlaces a otras páginas en el sitio
ficticio, un contenido único y una firma.

Ahora, selecciona “Guardar como…” del menú Archivo, ve hasta un directorio/carpeta donde
quieras guardar el documento (el escritorio puede ser una opción) y guarda el archivo como
“[Link]”. No cierres todavía el editor, lo necesitarás otra vez.

Después, abre el archivo en un navegador de la siguiente forma: encuentra el archivo con tu

administrador de archivos (Windows Explorer, Chrome o Firefox) y haz clic, o doble clic, sobre el
archivo “[Link]”. El archivo HTML debería abrirse en tu navegador predeterminado. (Si no
se abre el documento, abre el navegador y arrastra el archivo sobre él).

AÑADIR ALGUNOS COLORES

Comenzaremos con una hoja de estilo interna en el archivo HTML. Más adelante, pondremos
el HTML y el CSS en archivos diferentes. La separación de estos archivos es recomendable ya
que facilita la utilización de la misma hoja de estilo para diferentes archivos HTML: sólo tienes que
escribir la hoja de estilo una vez. Pero en este paso, vamos a dejarlo todo en el mismo archivo.

116 HOJAS DE ESTILO CSS

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

Necesitamos añadir un elemento <style> en el archivo HTML. La hoja de estilo estará en el

interior de ese elemento.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>
<head>
<title>Mi primera página con estilo</title>
<style type="text/css">
body {
color: purple;
background-color: #d8da3d }
</style>
</head>
<body>
[etc.]

Las líneas que tienes que añadir están marcadas en negro. La primera línea dice que eso
es una hoja de estilo y que está escrita en CSS ("text/css"). La segunda línea indica que hemos
añadido estilo al elemento "body". La tercera línea establece el color del texto como morado y la
siguiente línea lo que hace es darle al fondo una especie de amarillo verdoso.

Las hojas de estilo en CSS están compuestas de reglas. Cada regla tiene tres partes:

1. El selector (en el ejemplo sería: “body”), el cual le dice al navegador la parte del documento
que se verá afectada por la regla;

2. La propiedad (en el ejemplo, 'color' y 'background-color' son ambas propiedades), las cuales
especifican qué aspecto del diseño va a cambiarse;

3. Y el valor ('purple' y '#d8da3d'), el cual da el valor para la propiedad.

El ejemplo muestra que es posible combinar las reglas. Hemos establecido dos propiedades, por
lo que podemos tener dos reglas separadas:

body { color: purple }

body { background-color: #d8da3d }

Ya que las dos reglas van a afectar al elemento body, sólo tenemos que escribir "body" una vez,
y poner juntas las propiedades y valores.

El fondo del elemento body será el fondo para todo el documento. A los otros elementos (p, li,
address…) no se les ha dado ningún fondo en concreto, por lo que de forma predeterminada
no tendrán ninguno (o serán transparentes). La propiedad 'color' establece el color del texto que
se encuentra en el elemento body, pero los otros elementos que se encuentran dentro de body
heredarán ese color, a no ser que se especifique lo contrario. (Más adelante añadiremos más
colores).

SUBMÓDULO 2 117
 Formación para el Trabajo - Sexto Semestre

Ahora guarda el archivo (utiliza “Guardar” del menú Archivo) y vuelve a la ventana del navegador.
Si haces clic en "Actualizar", la página original que se mostraba al principio, pasará a ser una
página con colores. Aparte de la lista de enlaces que se encuentra al principio, el texto debería
tener ahora el color morado sobre un fondo de color amarillo verdoso.

Los colores pueden especificarse en la CSS de formas diferentes. El siguiente ejemplo muestra dos
de ellas: por el nombre (“purple”) y por el código hexadecimal (“#d8da3d”). Hay aproximadamente
140 nombres de colores y más de 16 millones de colores disponibles en código hexadecimal.

AÑADIR TIPO DE LETRA

Otra cosa que es muy fácil de hacer es añadir diferentes tipos de letra para los diversos
elementos de la página. Veamos el texto con el tipo de letra “Georgia”, excepto la cabecera h1,
que irá con “Helvética”.

En la Web, nunca puedes estar seguro de los tipos de letra que los usuarios tienen en sus
ordenadores, por lo que añadiremos algunas alternativas: si Georgia no está disponible, Times
New Roman o Times también pueden valer, y si ninguna de esas está presente, el navegador
puede utilizar cualquier otro tipo de letra con serifs. Si Helvetica no está, Geneva, Arial y SunSans-
Regular son bastante similares, y si ninguna de estas funciona, el navegador puede escoge
cualquier otro tipo de letra que no sea serif.

Añade en el editor de texto las siguientes líneas:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>
<head>
<title>Mi primera página con estilo</title>
<style type="text/css">
body {
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
</style>
</head>

<body>
[etc.]

Si guardas otra vez el archivo y haces clic en "Actualizar" en el navegador, deberían aparecer tipos
de letra diferentes para el encabezado y para el otro texto.

118 HOJAS DE ESTILO CSS

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

AÑADIR UNA BARRA DE NAVEGACIÓN

La lista que aparece al principio de la página HTML será más adelante un menú de navegación.
Algunos sitios web tienen un menú al principio o en un lado de la página, y éste debería tenerlo
también. Pondremos uno a la izquierda, ya que es más interesante ponerlo ahí que arriba.

El menú ya está en la página HTML. Es la lista <ul> que se encuentra al principio. Los enlaces que
tiene no funcionan ya que nuestro "sitio web", hasta el momento, sólo tiene una página, pero eso
no es importante ahora. Por supuesto, en un sitio web real no debería haber ningún enlace roto.

Tenemos que mover la lista a la izquierda y colocar el resto del texto un poco más hacia la derecha,
para dejar espacio para el menú. Las propiedades de CSS que vamos a utilizar son 'padding-left'
(para mover el texto del elemento body) y 'position' (para mover el menú).

En la ventana del editor, añade las siguientes líneas al archivo HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>
<head>
<title>Mi primera página con estilo</title>
<style type="text/css">
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
[Link] {
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
</style>
</head>
<body>
[etc.]

Si guardas otra vez el archivo y lo actualizas en el navegador, deberías tener la lista de enlaces a
la izquierda del texto principal.

El texto principal se ha movido hacia la derecha y la lista de enlaces está ahora a la izquierda en
lugar de estar arriba.

'position: absolute' indica que el elemento ul está situado independientemente de cualquier texto
que esté antes o después en el documento. 'left' y 'top' indican cuál es la posición. En este caso,
está a 2em de la parte de arriba de la ventana y a 1em del lado izquierdo.

SUBMÓDULO 2 119
 Formación para el Trabajo - Sexto Semestre

'2em' significa 2 veces el tamaño del tipo de letra actual. Por ejemplo, si el menú se muestra con
un tipo de letra de 12 puntos, entonces '2em' es 24 puntos. 'em' es una unidad muy útil en CSS ya
que se puede adaptar automáticamente al tipo de letra que el usuario esté utilizando. La mayoría
de los navegadores tienen un menú para aumentar o disminuir el tamaño de letra: puedes probarlo
y ver la forma en la que el menú aumenta de tamaño a la vez que lo hace el tipo de letra, lo que no
ocurriría si hubiéramos utilizado un tamaño en píxeles.
DAR ESTILO A LOS ENLACES
El menú de navegación todavía parece una lista en lugar de un menú. Vamos a cambiar su aspecto.
Quitaremos los puntos que indican los diferentes elementos de la lista y moveremos los elementos a la
izquierda, donde estaban antes los puntos. También le daremos a cada elemento un fondo blanco y un
cuadrado negro. (¿Por qué? Por nada en particular, sólo porque podemos hacerlo).
No hemos especificado el color de los enlaces, vamos a añadirlo también: utilizaremos el azul
para aquellos enlaces que el usuario no ha visitado todavía, y morado para los enlaces que ya ha
visitado:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Mi primera página con estilo</title>
<style type="text/css">
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
[Link] {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
[Link] li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
[Link] a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
</style>
</head>
<body>
[etc.]

120 HOJAS DE ESTILO CSS

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

Normalmente, los navegadores muestran los hipervínculos subrayados y con color. Los colores
son parecidos a los que especificamos aquí: azul para enlaces a páginas que no has visitado
todavía (o visitaste hace mucho tiempo), morado para páginas que ya has visitado.

En HTML, los hipervínculos se crean con elementos <a>, por lo que para especificar el color,
necesitamos añadir una regla de estilo para "a". Para diferenciar los enlaces visitados de los no
visitados, CSS proporciona dos "pseudo-classes" (:link y :visited). Se llaman “pseudo-classes”
para distinguirlas de los atributos de clase, que aparecen directamente en HTML, por ejemplo,
class="navbar".

AÑADIR UNA LÍNEA HORIZONTAL

El último elemento a añadir en la hoja de estilo es una regla horizontal para separar el texto de
la firma que se encuentra al final. Utilizaremos 'border-top' para añadir una línea punteada encima
del elemento <address>:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>
<head>
<title>Mi primera página con estilo</title>
<style type="text/css">
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
[Link] {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
[Link] li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
[Link] a {
text-decoration: none }
a:link {
color: blue }
a:visited {

SUBMÓDULO 2 121
 Formación para el Trabajo - Sexto Semestre

color: purple }
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }
</style>
</head>
<body>
[etc.]

Ahora, ya hemos terminado de darle estilo a la página.

Lo siguiente es ver cómo se pone la hoja de estilo en un archivo diferente para que de esta forma
otras páginas puedan utilizar el mismo estilo.

PONER LA HOJA DE ESTILO EN UN ARCHIVO SEPARADO

Ahora tenemos un archivo HTML con una hoja de estilo en su interior. Pero si nuestro sitio crece
desearemos añadir más páginas que compartan el mismo estilo. Hay un método más adecuado
que copiar la hoja de estilo dentro de cada página y que es: colocar la hoja de estilo en un archivo
separado, haciendo que todas las páginas estén enlazadas a esa hoja.

Para separar la hoja de estilo del archivo HTML, necesitamos crear otro archivo de texto, que esté
vacío. Puedes escoger "Nuevo" del menú Archivo del editor para crear una ventana vacía.

Después, corta y pega en la nueva ventana todo lo que hay dentro del elemento <style> del archivo
HTML. No copies las etiquetas <style> y </style>. Éstas pertenecen a HTML, no a CSS.

En la nueva ventana del editor, deberías tener la hoja de estilo completa:

body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
[Link] {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,

122 HOJAS DE ESTILO CSS

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

SunSans-Regular, sans-serif }
[Link] li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
[Link] a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }

Elige “Guardar como…” del menú Archivo, comprueba que está en el mismo directorio/carpeta que
el archivo [Link], y guarda la hoja de estilo como “[Link]”.

Vuelve a la ventana que muestra el código HTML. Borra todo lo que hay desde la etiqueta <style>
hasta </style>, ambas inclusive, y reemplázalo por un elemento <link> de la siguiente forma:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>
<head>
<title>Mi primera página con estilo</title>
<link rel="stylesheet" href="[Link]">
</head>

<body>
[etc.]

De esta forma, se le indicará al navegador que la hoja de estilo se encuentra en el archivo llamado
"[Link]". Al no especificarse ningún directorio, el navegador mirará en el mismo directorio en
el que se encuentra el archivo HTML.

Si has guardado el archivo HTML y lo has actualizado en el navegador, no deberías apreciar

ningún cambio en el aspecto de la página. Ésta sigue guardando el mismo estilo, pero ahora viene
establecido por el archivo externo.

Recuperado de: [Link]

SUBMÓDULO 2 123
 Formación para el Trabajo - Sexto Semestre

CONOCER LA TERMINOLOGÍA BÁSICA DEL SOFTWARE PARA DISEÑAR

UNA PÁGINA WEB

ACTIVIDAD 1

Para iniciar el trabajo con Dreamweaver, es necesario que conozcas la terminología que
se utiliza en este programa, por tanto, lee con atención el texto: “¿Qué es Dreamweaver?”
POSTERIORMENTE realiza una búsqueda en Internet para completar el cuadro comparativo
que se te presenta. Pregunta a tu profesor las dudas que te vayan surgiendo.

¿Qué es Dreamweaver?

Dreamweaver, actualmente de la casa de Adobe, anteriormente perteneciente a Macromedia, es la

herramienta de diseño de páginas web más avanzada, tal como se ha afirmado en muchos medios.
Aunque sea un experto programador de HTML el usuario que lo maneje, siempre encontrará en
este programa razones para utilizarlo, sobre todo en lo que a productividad se refiere.

Cumple perfectamente el objetivo de diseñar páginas con aspecto profesional, y soporta gran
cantidad de tecnologías, además muy fáciles de usar:

• Hojas de estilo y capas.

• Javascript para crear efectos e interactividades.
• Inserción de archivos multimedia.
• Además es un programa que se puede actualizar con componentes, que fabrica tanto
Macromedia como otras compañías, para realizar otras acciones más avanzadas.

Como editor WYSIWYG que es (What You See Is What You Get, “Lo que ves es lo que obtienes”,
ya que permite escribir un documento viendo directamente el resultado final), Dreamweaver oculta
el código HTML de cara al usuario, haciendo posible que alguien que no entiende el lenguaje
HTML pueda crear páginas y sitios web fácilmente.

Conceptos Básicos

Página web

Cuando pensamos en una página web debemos pensar en una empresa que tiene una jerarquía
bien establecida, un departamento de ventas, división de personal, contabilidad, diseño, etc. Cada
una de estas estructuras cumple una función determinada e importante dentro de la empresa.
Pues una página web es una sección de una estructura más grande que ofrece al navegante la
posibilidad de informarse acerca de determinado producto, servicio o la empresa.

124 HOJAS DE ESTILO CSS

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

Sitio web

En inglés website o web site, un sitio web es un sitio (localización) en la World Wide Web que
contiene documentos (páginas web) organizados jerárquicamente. Cada documento (página web)
contiene texto o gráficos que aparecen como información digital en la pantalla de un ordenador. Un
sitio puede contener una combinación de gráficos, texto, audio, video, y otros materiales dinámicos
o estáticos.

Un sitio web es un gran espacio documental organizado que la mayoría de las veces está
típicamente dedicado a algún tema particular o propósito específico. Cualquier sitio web puede
contener hiperenlaces a cualquier otro sitio web, de manera que la distinción entre sitios individuales,
percibido por el usuario, puede ser a veces borrosa.

No debemos confundir sitio web con página web; esta última es solo un archivo HTML, una unidad
HTML, que forma parte de algún sitio web. Al ingresar una dirección web, como por ejemplo
[Link], siempre se está haciendo referencia a un sitio web, el que tiene una página
HTML inicial, que es generalmente la primera que se visualiza. La búsqueda en Internet se realiza
asociando el DNS ingresado con la dirección IP del servidor que contiene el sitio web en el cual
está la página HTML buscada.

Los sitios web están escritos en código HTML (Hyper Text Markup Language), o dinámicamente
convertidos a éste, y se acceden aplicando un software conveniente llamado navegador web,
también conocido como un cliente HTTP. Los sitios web pueden ser visualizados o accedidos
desde un amplio abanico de dispositivos con conexión a Internet, como computadoras personales,
portátiles, PDAs, y teléfonos móviles.

Sitio local

Una vez definido el trabajo a realizar, todo lo guardas en una carpeta, la cual, si eres ordenado,
pondrás el nombre del cliente y dentro de ella toda la información, páginas html, imágenes, etc.
Este es el sitio local, es decir, la copia en el disco duro del sitio web en Internet.

Un sitio web está alojado en una computadora conocida como servidor web, también llamada
servidor HTTP, y estos términos también pueden referirse al software que se ejecuta en esta
computadora y que recupera y entrega las páginas de un sitio web en respuesta a peticiones
del usuario. Apache es el programa más comúnmente usado como servidor web (según las
estadísticas de Netcraft) y el Internet Information Services (IIS) de Microsoft también se usa con
mucha frecuencia.

SUBMÓDULO 2 125
 Formación para el Trabajo - Sexto Semestre

Sitio estático

Se le llama sitio estático al sitio web que no interactúa con una Base de Datos, es decir solo usa
tecnología HTML, CSS y JavaScript.

Un sitio web estático es uno que tiene contenido que no se espera que cambie frecuentemente y
se mantiene manualmente por alguna persona o personas que usan algún tipo de programa editor.
Hay dos amplias categorías de programas editores usados para este propósito que son:

• Editores de texto como Notepad, donde el HTML se manipula directamente en el programa

editor o.
• Editores WYSIWYG como por ejemplo Microsoft FrontPage y Adobe Dreamweaver, donde
el sitio se edita usando una interfaz GUI y el HTML subyacente se genera automáticamente
con el programa editor.

Sitio dinámico

Un sitio web dinámico es uno que puede tener cambios frecuentes en la información. Cuando
el servidor web recibe una petición para una determinada página de un sitio web, la página se
genera automáticamente por el software, como respuesta directa a la petición de la página. Por
tanto, se puede dar así un amplio abanico de posibilidades, incluyendo por ejemplo: (a) Mostrar el
estado actual de un diálogo entre usuarios, (b) Monitorizar una situación cambiante, o proporcionar
información personalizada de alguna manera a los requisitos del usuario individual, etc.

El sitio dinámico es aquel en el que la información que se le muestra al navegante proviene de una
base de datos, generalmente en MySql y las páginas están en formato PHP, ASP, JSP.

Sitio interactivo

Es aquel sitio que su funcionalidad depende de acciones del usuario, es decir, si presiona un
botón el sitio completo hace algo, lo más común es que estos sitios interactivos dependan de otra
tecnología para agregar interactividad, Adobe Flash.

CSS

Es un lenguaje de hojas de estilos creado para controlar el diseño de la estructura. CSS es la mejor
forma de separar los contenidos y su diseño siendo necesario para crear páginas web complejas.

Separar la estructura de los contenidos y la estructura del diseño presenta numerosas ventajas, ya
que obliga a crear documentos HTML/XHTML bien definidos.

Al crear una página web, se utiliza en primer lugar el lenguaje HTML/XHTML para marcar los
contenidos, es decir, para designar la función de cada elemento dentro de la página: párrafo,
titular, texto destacado, tabla, lista de elementos, etc.

Una vez creados los contenidos, se utiliza el lenguaje CSS para definir el aspecto de cada elemento:
color, tamaño y tipo de letra del texto, separación horizontal y vertical entre elementos, posición de
cada elemento dentro de la página, etc.

126 HOJAS DE ESTILO CSS

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

ACTIVIDAD 2

Después de haber hecho la lectura anterior, realiza una búsqueda en Internet sobre los
sitios mencionados y llena la tabla con dos ejemplos de cada uno de ellos.

NOMBRE: ________________________________________ GRUPO: ________

TIPO DE SITIO NOMBRE DEL SITIO URL

PÁGINA WEB

SITIO WEB

SITIO LOCAL

SITIO ESTÁTICO

SITIO DINÁMICO

SITIO INTERACTIVO

SUBMÓDULO 2 127
 Formación para el Trabajo - Sexto Semestre

IDENTIFICAR EL ENTORNO DEL SOFTWARE PARA DISEÑAR PÁGINAS WEB

ACTIVIDAD 3

Antes de empezar a crear la página web es necesario que conozcas el entorno de trabajo
del software Dreamweaver, por lo que es necesario que realices una búsqueda en Internet
y definas lo siguiente:

NOMBRE: ________________________________________ GRUPO: ________

CSS:
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________

Maquetación:
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________

Plantilla en Dreamweaver:
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________

Contenedor en Dreamweaver:
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________

Etiqueta Div:
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________

128 HOJAS DE ESTILO CSS

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

Región editable:
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________

Comportamientos en Dreamweaver:
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________

Tabla:
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________

Formulario:
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________

Formulario de Contacto:
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________

ACTIVIDAD 4

Realiza la lectura “DREAMWEAVER CS5” y posteriormente coloca las letras en el lugar

correspondiente de la ventana inicial de dreamwever.

DREAMWEAVER CS5

Dreamweaver CS5 Es un diseñador web que no requiere conocimientos previos de ningún lenguaje
web. Como verás, trabajando desde la vista de diseñador, podrás realizar cualquier trabajo, lo que
te facilitará la tarea de realizar un sitio web sin amplios conocimientos.

SUBMÓDULO 2 129
 Formación para el Trabajo - Sexto Semestre

Interfaz de Dreamweaver CS5

Pantalla Inicial

Desde la pantalla Inicial, puedes, desde

abrir un elemento reciente, en el que estés
trabajando, abrir un documento que quieras
añadir, o manipular, crear documentos
nuevos en diferentes formatos (html, php,
xml, javascript, etc.) y elementos destacados.
Los elementos destacados, pueden ser muy
útiles, ya que son videos de métodos de
trabajo o la utilización de algunas herramientas
específicas.

Elementos del espacio de trabajo

El espacio de trabajo incluye los siguientes elementos:

a. Barra de la aplicación. A lo largo de su parte superior, la ventana de la aplicación contiene un

conmutador de espacios de trabajo, menús (solo Windows) y otros controles de aplicación.

b. Barra de herramientas Documento. Contiene botones que proporcionan opciones para

diferentes vistas de la ventana de documento (como la vista Diseño y la vista Código),
diversas opciones de visualización y algunas operaciones comunes como la obtención de
una vista previa en un navegador.

c. Ventana de documento. Muestra el documento actual mientras lo está creando y editando.

d. Grupo de paneles. Ayudan a supervisar y modificar el trabajo realizado. Ejemplos de paneles

son: el panel Insertar, el panel Estilos CSS y el panel Archivos.

e. Espacio de trabajo. Es el área de trabajo destinada para realizar la página web.

f. Selector de etiquetas. Situado en la barra de estado de la parte inferior de la ventana de

documento. Muestra la jerarquía de etiquetas que rodea a la selección actual.

g. Inspector de propiedades. Permite ver y cambiar diversas propiedades del objeto o texto
seleccionado. Cada objeto tiene propiedades distintas. El inspector de propiedades no está
ampliado de forma predeterminada en el diseño del espacio de trabajo del codificador.

h. Panel archivos. Permite administrar los archivos y las carpetas, tanto si forman parte de un
sitio de Dreamweaver como si se encuentran en un servidor remoto.

130 HOJAS DE ESTILO CSS

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

ACTIVIDAD 5

Coloca las letras en el lugar correspondiente de la ventana inicial de dreamwever.

NOMBRE: ________________________________________ GRUPO: ________

( ) ( ) ( ) ( ) ( )

( )
( ) ( )

ACTIVIDAD 6

Ingresa al software DREAMWEAVER CS5, observa el lugar donde se encuentran ubicadas

cada una de las barras de herramientas que se describen en la lectura, posteriormente
responde cada una de las preguntas que se te presentan.

NOMBRE: ________________________________________ GRUPO: ________

Barra insertar

Una barra muy útil, ya que la mayoría de herramientas que utilizarás, están en ella o las puedes
añadir, esto facilita el no tener que ir buscando las herramientas en las diferentes ventanas.

SUBMÓDULO 2 131
 Formación para el Trabajo - Sexto Semestre

Esta barra puede ser personalizada, aunque con limitaciones. Se puede ver como menú o como
fichas que son, como se encuentra en la imagen de arriba.

Como menú, se ve que el aspecto ha cambiado, ya no están las pestañas que indicaban las
herramientas de otras secciones, como formularios, datos, spry, etc.

Pero si se da clic en el triángulo invertido que se encuentra al lado de “común“, se podrán ver en
forma de menú, las pestañas que contenía en el modo de fichas.

1.- Menciona el nombre de los botones que se encuentran en la barra de insertar:

_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________

2.- ¿En qué actividades crees que te pueden ayudar el uso de estos botones?
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
____________________________________________________________________________

Barra de herramientas del documento

En esta barra se encuentra el botón “Diseño”, está es la vista que normalmente estarás utilizando,
para personas que controlen el código HTML, algún lenguaje de programación o simplemente se
quiere ver el código, pueden verlo de dos maneras, una como vemos en la imagen superior, una es
con el botón “Dividir”, pulsando ese botón, verás la pantalla dividida, viendo en una parte el diseño
y en otra el código. Y la otra, pulsando el botón “Código”, en el que verás solamente el código de
la página y perderás de vista el diseño.

132 HOJAS DE ESTILO CSS

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

En la misma barra encontrarás el botón donde podrás agregar

los diferentes navegadores en los que quieres ver la página, aunque normalmente ya nos reconoce
los que tenemos instalados.

Dando clic sobre o pulsando la tecla F12, verás en el navegador el resultado del trabajo que
estés realizando.

También puedes ver la caja de texto , allí escribirás el título que pondrás
a tu página y al presionar la tecla F12, podrás ver que aparece en la pestaña del navegador o en
la parte de arriba de la ventana del mismo.

1.- Menciona el nombre de los botones que se encuentran en la barra de herramientas del
documento:
____________________________________________________________________________
____________________________________________________________________________

2.- ¿En qué actividades crees que te pueden ayudar el uso de estos botones?
____________________________________________________________________________
____________________________________________________________________________

Inspector de propiedades

En el inspector de propiedades como ves en la imagen de arriba, puedes visualizar y cambiar las
propiedades de los estilos CSS.

También puedes apreciar que aparecen propiedades de la parte del documento, donde puedes
aplicar etiquetas HTML que personalicen tu trabajo.

El inspector de propiedades es una de las partes que se convertirá en imprescindible en el proceso

de un diseño web.

1.- Menciona las opciones que se encuentran en el inspector de propiedades:

____________________________________________________________________________
____________________________________________________________________________
____________________________________________________________________________

SUBMÓDULO 2 133
 Formación para el Trabajo - Sexto Semestre

2.- ¿En qué actividades crees que te pueden ayudar el uso de estos botones?
____________________________________________________________________________
____________________________________________________________________________
____________________________________________________________________________
____________________________________________________________________________

Paneles y grupos de paneles

A la derecha de la pantalla, puedes apreciar que aparece un grupo de símbolos, eso son los
paneles en los que puedes encontrar los documentos que vayas creando, los comportamientos
que puedes aplicar, o has aplicado y los CSS creados.

Para visualizarlo mejor, puedes desplegarlo como vemos en la imagen de arriba, pulsando en las
dos flechas situadas en la parte superior derecha del grupo de paneles. Así podrás trabajar viendo
todo lo que contienen los paneles, si te molesta para trabajar, mejor déjalo plegado y da clic en el
icono del panel que necesites en cada momento.

134 HOJAS DE ESTILO CSS

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

1.- Menciona el nombre de los botones que se encuentran en el panel y grupo de paneles:
____________________________________________________________________________
____________________________________________________________________________
___________________________________________________________________________
____________________________________________________________________________

2.- ¿En qué actividades crees que te pueden ayudar el uso de estos botones?
____________________________________________________________________________
____________________________________________________________________________
____________________________________________________________________________
____________________________________________________________________________

Múltiples documentos

Conforme vayas trabajando, irás creando diferentes documentos, y en ocasiones, querrás tener
varios de ellos abiertos, como se aprecia en la imagen de arriba, te aparecen fichas con los
diferentes documentos abiertos o creados. Con tan solo dar clic en las diferentes pestañas, podrás
navegar por ellos sin ningún problema.

Estos son los elementos más importantes de la interfaz de Dreamweaver, con los cuales te podrás
ir familiarizando con el uso de este programa, para iniciar a crear tu página web.

1.- Menciona las opciones que se encuentran en múltiples documentos:

____________________________________________________________________________
____________________________________________________________________________
____________________________________________________________________________
____________________________________________________________________________

2.- ¿En qué actividades crees que te pueden ayudar el uso de estos botones?

____________________________________________________________________________
____________________________________________________________________________
____________________________________________________________________________
____________________________________________________________________________

SUBMÓDULO 2 135
 Formación para el Trabajo - Sexto Semestre

ACTIVIDAD 7

A partir de este momento vas a empezar con el diseño de tu web, para eso es necesario
que te organices en equipo de tres integrantes y realicen la lectura “Recomendaciones
para la estructura del sitio web” a la par que vas desarrollando las actividades referentes
al diseño de tu página. Responde las preguntas que se te presentan. Expón al profesor
las dudas que te vayan surgiendo.

Recomendaciones para la estructura del sitio web

Antes de empezar a crear un sitio web lo primero que tienes que plantearte es su organización.
Una organización muy usual es separar en carpetas los archivos diferentes, es decir, crear una
carpeta imágenes, otra para los estilos y en la carpeta raíz dejaremos los archivos HTML. Cuando
se habla de carpeta raíz, se hace referencia a la carpeta principal donde se irá creando el sitio web.

Con esto conseguirás crear un orden en tu sitio, para que cuando quieras buscar un archivo sea
fácil de localizar.

Siempre que quieras cambiar la ubicación de un archivo es recomendable hacerlo directamente

en Dreamweaver por que tiene la posibilidad de actualizar todos los vínculos sin que le ocasione
ningún problema. Si lo realizas en la carpeta raíz, fuera de Dreamweaver, tendrás que actualizar los
vínculos manualmente. De ahí la importancia de manipular los archivos y las carpetas, solamente
en la aplicación.

Otra cosa a tener en cuenta son los nombres de las páginas del sitio. La página principal deberá
llamarse index, siempre en minúsculas, ya que los servidores web son sensibles a las mayúsculas,
es decir, que diferencia mayúsculas de minúsculas.

El resto de páginas se aconseja que su nombre sea referente al contenido, NUNCA DEJAR
ESPACIOS, si el nombre es compuesto, unirlos mediante un guión o un guión bajo. También puede
unir simplemente las palabras, creando un nombre simple.

136 HOJAS DE ESTILO CSS

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

Definir el sitio

Cuando hablamos de definir un sitio nos referimos a agregar la carpeta raíz como un proyecto de
Dreamweaver, así como los archivos que contenga y así poderlos manipular de forma más sencilla.

Desde la pantalla inicial

En la pantalla inicial, te vas a

encontrar en el apartado
“Crear nuevo” “Sitio de
Dreamweaver…”, si das clic allí, te
aparecerá el cuadro de diálogo de
definición del sitio, que vemos en la
imagen siguiente.

Aquí pondrás el nombre del sitio, no

necesariamente debe coincidir con el
nombre de la carpeta y puede llevar
espacios, enseguida debes dar clic en
la carpeta que se encuentra debajo y
buscas la carpeta raíz del sitio.

ESCRIBE EL NOMBRE DE TU SITIO WEB, TAMBIÉN ANÓTALO AQUÍ PARA QUE NO SE TE OLVIDE:

SUBMÓDULO 2 137
 Formación para el Trabajo - Sexto Semestre

CON ESTO TERMINARÁS LA DEFINICIÓN DE TU SITIO WEB.

Añadir Archivos y Carpetas

Para añadir archivos, puedes o crear uno nuevo, desde el menú de archivo o desde la pantalla
inicial, pero existen otras dos formas, ya que en los casos anteriores, hay que guardar para que
se cree el archivo.

Despliega la ventana de “Archivos” de los paneles de la derecha, la primera opción es hacer clic
derecho en la carpeta raíz o en la carpeta donde queramos crear el archivo, te aparecerá un menú
y deberás dar clic en “Nuevo archivo” y te creará un archivo, le asignas el nombre y la extensión
la cambias si quieres que el archivo no sea html. Para la segunda forma, das clic en el menú de
la ventana de “Archivos”, situado en la esquina superior derecha y colocas el ratón encima de
“Archivo” y das clic en “Nuevo archivo”.

Para las carpetas, se hace lo mismo, pero seleccionando “Nueva carpeta”.

ACTIVIDAD 8

Después de haber leído el texto RECOMENDACIONES PARA LA ESTRUCTURA DEL SITIO

WEB, responde las preguntas que a continuación se presentan:

NOMBRE: ________________________________________ GRUPO: ________

1.- ¿Por qué es importante organizar las carpetas de un sitio web?

__________________________________________________________________________
__________________________________________________________________________
____________________________________________________________________________

2.- ¿Por qué es recomendable cambiar la ubicación de los archivos directamente de Dreamwever?
____________________________________________________________________________
____________________________________________________________________________
___________________________________________________________________________

3.- ¿Cuál es el nombre recomendable que se le debe de dar a la página principal y por qué?
_____________________________________________________________________________
_____________________________________________________________________________

4.- ¿Cuáles son los pasos que tienes que seguir para agregar un archivo o carpeta?
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
____________________________________________________________________________

138 HOJAS DE ESTILO CSS

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

5.- Define cómo va a quedar la estructura de tu sitio web:

DISEÑAR UNA PÁGINA WEB CON EL SOFTWARE DE APLICACIÓN

ACTIVIDAD INTEGRADORA
PARTE 1

A partir de este momento vas a empezar con la estructura de tu página web para eso es
necesario que te organices en equipo de tres integrantes para que realices la lectura
“Diseño de una página web” a la par que vas desarrollando las actividades referentes al
diseño de tu página como son:

• Elegir los posibles ramos empresariales de la página web que vayas a crear.
• Elegir la empresa o negocio del que vayas a realizar la página.
• Selección de la información que vas a publicar en tu página Web.
• Planificación de la página.

Anteriormente ya habías pensado en la estructura de tu página web, con la información

ya clara definirás el diseño de tu página.

1.- ¿De qué ramo empresarial va a ser tu sitio web?

_____________________________________________________________________________

2.- ¿A qué empresa le vas a crear el sitio web?

___________________________________________________________________________
___________________________________________________________________________

3.- ¿Qué tipo de información vas a publicar en tu sitio web?

___________________________________________________________________________
___________________________________________________________________________

4.- ¿Por qué seleccionaste ese tipo de empresa?

____________________________________________________________________________
____________________________________________________________________________

SUBMÓDULO 2 139
 Formación para el Trabajo - Sexto Semestre

Sigue los pasos que a continuación se te indican para que empieces a crear tu sitio web.
Si te surgen dudas consulta con el profesor.

Diseño de una página web

Lo primero que debes hacer cuando vas a diseñar una página web es crear tu sitio, una vez creado
el sitio, empezarás a crear cada una de las páginas web que integrarán tu proyecto.

1. Ingresa a Dreamwever.
2. Registra el nombre de tu
sitio.
3. Selecciona la carpeta en
donde lo vas a almacenar.
4. Clic en guardar.

En la siguiente ventana da
clic en Más…

140 HOJAS DE ESTILO CSS

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

Crearás una página de HTML, ya que en este caso las páginas serán estáticas. Además, puedes
usar uno de los diseños predefinidos de Dreamweaver, para más facilidad.

1.- Enseguida debes

seleccionar el diseño
2 columnas fijas, barra
lateral izquierda, como se
muestra en la imagen.

2.- Debes indicar a

Dreamweaver que el
diseño de la página debe
de hacerse en una hoja
independiente.

3.- Clic en Crear.

Este es el diseño que va a tener tu sitio web:

1.- Clic en archivo

2.- Selecciona la
carpeta de tu sitio que
ya creaste.

2.- Guarda con el
nombre de index, ya
que esta será tu página
principal.

SUBMÓDULO 2 141
 Formación para el Trabajo - Sexto Semestre

Ahora vas a modificar, el diseño de tu

página, para dejarla de acuerdo a como
quieres. Para hacer eso, te irás al panel
Estilos.

Estas son todas las reglas de estilo que

hay en la hoja. Vas a cambiar las reglas
del body, que normalmente es donde se
definen los aspectos generales del texto.
Debes hacer doble clic en body para
editarlo.

A continuacion se presenta el editor de

propiedades de CSS, desde aquí puedes
cambiar cualquier propiedad.

142 HOJAS DE ESTILO CSS

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

Por ejemplo, aquí cambiarás el tipo

de fuente y propiedades, además
de las propiedades del fondo.

Deberás justificar el texto.

Ahora ajustarás el ancho de página.

Todos los elementos están dentro
del div con la clase container, por lo
que será ahí donde establezcas el
ancho de página.

Tienes que editar la regla, dando

doble clic sobre container.

SUBMÓDULO 2 143
 Formación para el Trabajo - Sexto Semestre

El ancho lo encontrarás en las

propiedades de cuadro, lo debes cambiar
al tamaño que necesites.

El margen (margin) Auto en ambos lados

(Right, Left) se encarga de centrar el
elemento en la ventana. Puedes darle algo
de margen arriba (Top) y abajo (Bottom), si
lo quieres separar del borde.

También, puedes crear un borde alrededor.

Enseguida puedes observar cómo va

quedando en el navegador.

144 HOJAS DE ESTILO CSS

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

Verás que como el ancho es menor que la ventana, se ve el borde a los lados y la columna de la
derecha se ha ido hacia abajo, esto se debió a que las columnas tienen un ancho fijo y al reducir
el ancho general ya no caben en horizontal, por tanto, tienes que ajustar su ancho de nuevo para
que la columna de la derecha se muestre de nuevo junta, como estaba anteriormente.

El div con la clase sidebar1 es el que forma la columna. Tienes que editar su ancho y reducirlo
un poco. Para eso puedes dar clic sobre las reglas de sidebar1 y reducir el ancho del cuadro,
o directamente en estilos, en Actual, seleccionas sidebar1 e introduces directamente el ancho
modificado.

También debes cambiar el ancho de la otra columna, esto lo encontrarás en la clase content. El
ancho total es de 800 pixeles, y como la columna anterior le asignaste 140 pixeles, aquí solo te
quedan 660 para esta columna.

Bien al principio de esta página puedes distinguir tres elementos principales de diseño: el
encabezado (.header), la columna izquierda con el menú (.sidebar1) y una columna principal a la
derecha con el contenido de la página.

SUBMÓDULO 2 145
 Formación para el Trabajo - Sexto Semestre

PERSONALIZA TU PÁGINA

Ahora deberás personalizar cada uno de los elementos de tu página.

Empieza por borrar el logo,

solamente selecciona el
enlace que contiene a la
imagen y presionas la tecla
Suprimir.

Lo que sí debe aparecer en

la cabecera es el h1, por
lo que habrá que moverlo
ahí, y aquí debes cambiar
el texto por el de tu página.

Ahora, debes continuar

editando el estilo del
encabezado, en este caso
le quitarás el color de
fondo y le darás un margen
inferior.

146 HOJAS DE ESTILO CSS

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

Enseguida deberás crear una nueva regla CSS para

el h1 que esté dentro del encabezado (header h1).
Para eso, darás clic en el botón Nueva regla CSS.

Seleccionas o das clic en el botón Menos

específico y seleccionas Aceptar.

SUBMÓDULO 2 147
 Formación para el Trabajo - Sexto Semestre

PARA COLOCAR UNA IMAGEN EN EL TÍTULO, REALIZA LOS SIGUIENTES PASOS:

Para incluir una imagen en el título, pero en vez de ponerla directamente, se incluirá como fondo
de encabezado.

Para eso te irás a fondo,

seleccionarás Examinar.

Cuando hayas asignado los

cambios das clic en Aplicar.

148 HOJAS DE ESTILO CSS

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

Te darás cuenta que la imagen quedó como fondo, pero en el ejemplo queremos que quede arriba,
por lo que habrá que ajustar la posición manipulando el Padding.

Continuando con el diseño

de la página, se modificará la
columna de la izquierda, de
hecho solo se dejará el menú
y se eliminará la columna de
la izquierda que no se va a
utilizar.

Para eso se selecciona el texto

de la columna de la izquierda y
se elimina.

SUBMÓDULO 2 149
 Formación para el Trabajo - Sexto Semestre

MODIFICAR LOS VÍNCULOS

A continuación, se deben cambiar los títulos del menú de acuerdo al proyecto que estés presentando,
es decir los nombres de las páginas que se abrirán al dar clic en un enlace.

Para que puedas cambiar los

vínculos tienes que hacer lo
siguiente:

1.- Selecciona el vínculo que

quieres modificar.

2.- En la barra de propiedades

puedes agregar el archivo al cual
quieras dirigir el vínculo.

Quedando como se muestra a continuación:

150 HOJAS DE ESTILO CSS

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

Enseguida se debe modificar el borde del menú de la izquierda, para que no sobresalga el cuadro.
La regla que afecta a los enlaces del menú es [Link] a

En la imagen puedes ver que el ancho era mayor que la columna, por lo que habrá que quitar el
ancho.

Además, para que el texto no quede pegado se usa el padding, en el caso del ejemplo se usará
un alto fijo.

SUBMÓDULO 2 151
 Formación para el Trabajo - Sexto Semestre

Se utilizará una imagen de fondo

para dar el efecto de cambio de
color en los botones.

Además los elementos de lista están

dentro de una lista, que también
tienen sus estilos definidos.

Aquí deberás ajustar Margin y

Padding a tus necesidades.

152 HOJAS DE ESTILO CSS

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

Además le quitaremos el color de fondo del sidebar1.

Para que el usuario de la página perciba que un elemento de menú

se puede presionar, se puede cambiar su estilo cuando el cursor está
encima de él.

Esto lo deberás hacer con la pseudoclase:

hover. Aunque ya se tiene una regla para ello,
la editarás para hacer modificaciones.

SUBMÓDULO 2 153
 Formación para el Trabajo - Sexto Semestre

Además se creará otra regla que cambie los elementos de lista (li) cuando tengan el cursor encima.

Para crear esa regla se dará clic en

CSS de Propiedades.

Luego en el triángulo invertido de

Regla de destino.

Posteriormente se selecciona la opción <Nueva regla CSS>

Se da clic en Editar regla.

Posteriormente, se selecciona el botón
Menos especifico y se introduce el
nombre del selector, que en el caso del
ejemplo es .nav li:hover

154 HOJAS DE ESTILO CSS

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

Solamente se cambiará el color

del fondo y del borde.

Después de estas modificaciones que hiciste, revisa cómo queda tu página web, y el resultado
será algo como la siguiente pantalla:

SUBMÓDULO 2 155
 Formación para el Trabajo - Sexto Semestre

MODIFICANDO LA COLUMNA DE CONTENIDO PRINCIPAL

A continuación, trabajarás con la columna del contenido principal de la página.

La clase .content es la que define el estilo de esta columna.

Lo primero que harás es usar una

imagen para crear un pequeño
degradado en la parte superior.
Esto lo realizarás usando una
imagen de fondo.

156 HOJAS DE ESTILO CSS

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

Posteriormente editarás los encabezados, para lo cual crearás una

<Nueva regla CSS>.

Seleccionas Editar regla y en Tipo de

selector eliges Etiqueta (redefine un
elemento HTML).

Una vez hecho esto, seleccionarás

el color para la fuente y el margin.

SUBMÓDULO 2 157
 Formación para el Trabajo - Sexto Semestre

Para finalizar con los elementos de maquetación, se modifica el pie.

HASTA ESTE MOMENTO, TU PRIMER PÁGINA QUEDARÁ COMO SE MUESTRA A

CONTINUACIÓN:

Posteriormente, debes guardar tu página para asignarle el nombre que le corresponde.

158 HOJAS DE ESTILO CSS

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

ACTIVIDAD INTEGRADORA
PARTE 2

Vamos a continuar con la segunda página que en este caso es “QUIÉNES SOMOS”
según los enlaces creados en la página inicial. Sigue los pasos que aquí se te indican y
modifica la página con tu información.

1. Clic en archivo.
2. Clic en nuevo.
3. Selecciona columna fija centrada,
encabezado y pie de página.

1. Te va a proporcionar una plantilla de este tipo.

Aquí puedes hacer las modificaciones necesarias par armar tu segunda página.

2. Agrega el logotipo, encabezado y como pie de página los datos de quienes la elaboraron.

3. Puedes seguir los pasos de la página principal que ya elaboraste o la puedes elaborar con solo
copiar-pegar.

SUBMÓDULO 2 159
 Formación para el Trabajo - Sexto Semestre

TU SEGUNDA PÁGINA DEBE QUEDAR SIMILAR A LA DE LA SIGUIENTE IMAGEN:

1. Clic en Archivo.
2. Clic en guardar como.
3. Es recomendable que el nombre sea
parecido al del enlace.

160 HOJAS DE ESTILO CSS

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

ACTIVIDAD INTEGRADORA
PARTE 3

Vamos a continuar con la tercera página que en este caso es “TARIFAS” según los enlaces
creados en la página inicial. Sigue los pasos que aquí se te indican para insertar una tabla y
modifica con tu información.

1. Clic en archivo.
2. Clic en nuevo.
3. Selecciona columna
fija centrada,
encabezado y pie de
página.

1. Te va a proporcionar una
plantilla de este tipo.

2. En esta página se va a
diseñar la tabla para la
tarifa de precios.

3. Agrega el logotipo,
encabezado y como pie
de página los datos de
quienes la elaboraron.

SUBMÓDULO 2 161
 Formación para el Trabajo - Sexto Semestre

El proceso para insertar una tabla es muy sencillo:

1. Clic en el menú Insertar.

2. Selecciona Tabla.
3. Selecciona el número de columnas.
4. Selecciona el número de filas.
5. Selecciona el ancho de la tabla.
6. Clic en Aceptar.

Te muestra la tabla como la de la

imagen y lo que sigue es rellenar
la tabla y posteriormente editarla.

Además, se pueden combinar las

celdas para mejorar el aspecto de
la tabla. Para combinar las celdas
solo se seleccionan las celdas a
combinar y se da clic en el botón
que aparece indicado en la imagen
de abajo.

162 HOJAS DE ESTILO CSS

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

A continuación, para darle un mejor

aspecto, crearás una clase para definir
los estilos de la tabla.

Para eso se seleccionará <table>,

Estilos CSS y finalmente das clic
en el botón Nueva regla CSS.

SUBMÓDULO 2 163
 Formación para el Trabajo - Sexto Semestre

Enseguida, en Tipo de selector, se

selecciona Clase (puede ser aplicable a
cualquier elemento HTML). En Nombre del
selector se introduce un nombre, en el caso
del ejemplo será Tarifas.

Se edita el tipo de fuente, el fondo,

la alineación del texto (en bloque), el
cuadro, el estilo de borde.

Dejando un aspecto parecido al de esta tabla:

164 HOJAS DE ESTILO CSS

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

TU TERCERA PÁGINA TERMINADA DEBE QUEDAR ASÍ:

SUBMÓDULO 2 165
 Formación para el Trabajo - Sexto Semestre

ACTIVIDAD INTEGRADORA
PARTE 4

PUEDES AGREGAR UN FORMULARIO DE CONTACTO EN UNA PÁGINA NUEVA. Sigue

los pasos que aquí se te indican y modifica con tu información.

Insertar un Formulario de Contacto

1. Clic en archivo.
2. Clic en nuevo.
3. Selecciona columna
fija centrada,
encabezado y pie de
página.

1. Te va a proporcionar

2. Una plantilla de este tipo.

3. En esta página se va a
diseñar la tabla para la
tarifa de precios.

4. Agrega el logotipo,
encabezado y como pie
de página los datos de
quienes la elaboraron.

166 HOJAS DE ESTILO CSS

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

El proceso para insertar una tabla es muy sencillo:

1. Clic en menú Insertar.

2. Clic en Formulario.

En un formulario debes indicar una

acción. La página que se encargará
de recibir y tratar la información
introducida por el usuario.

Una vez que ya definiste el elemento de

formulario, para organizar los campos del
formulario deberás utilizar una tabla.

1. Clic en Insertar.
2. Clic en Tabla.
3. Indica el número de columnas y filas
que necesites.
4. Clic en Aceptar.

SUBMÓDULO 2 167
 Formación para el Trabajo - Sexto Semestre

Una vez insertada la tabla introducimos los controles necesarios:

1. Clic en Insertar.
2. Clic en Formulario.
3. Selecciona el control correspondiente,
por ejemplo:
• Para el Nombre, E-mail y Fecha
de Reporte selecciona: campo de
texto.
• Para Tipo de equipo seleccionas:
Botón de opción.
• Para Problema seleccionas: Área de
texto.
• Para Respaldo de información
seleccionas: Casilla de verificación.
• Para el Botón de Enviar seleccionas:
Botón.

Finalmente deberás cambiar los estilos de borde, fondo, marco, fuente, etc. para modificar el
formato del formulario.

Tiene que quedarte un

aspecto parecido al de la
imagen.

168 HOJAS DE ESTILO CSS

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

Recuerda que para el formulario de contacto definiste una acción, por lo que para que funcione
esta acción deberás crear una página la cual será la que recogerá la información del usuario. Esa
página debe tener la terminación php.

HASTA AQUÍ TU FORMULARIO DE CONTACTO EN LA PÁGINA CUARTA, QUEDA COMO

SE MUESTRA EN LA SIGUIENTE IMAGEN.

SUBMÓDULO 2 169
 Formación para el Trabajo - Sexto Semestre

ACTIVIDAD INTEGRADORA
PARTE 5

PUEDES AGREGAR UNA GALERÍA DE IMÁGENES EN UNA PÁGINA NUEVA. Sigue los
pasos que aquí se te indican y modifica con tu información.

Insertar una galería de imágenes

Por último, ya para terminar tu sitio web, deberás crear la página para mostrar la galería de
imágenes.

Para eso debes utilizar la misma plantilla que has estado utilizando.

1. Clic en archivo.
2. Clic en nuevo.
3. Selecciona columna fija
centrada, encabezado y pie de
página.

Modifica solo las regiones

editables de título y
contenidos.

170 HOJAS DE ESTILO CSS

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

Así quedaría tu
página antes insertar
las imágenes.

Ahora insertarás una imagen antes de cada encabezado.

Para eso solo te colocas antes

del encabezado de cada
equipo de cómputo:

1. Clic en el menú Insertar.

2. Selecciona Imagen.

3. Selecciona la imagen que

vas a colocar de tu carpeta
de imágenes, donde
previamente las habías
guardado.

4. Clic en Aceptar.

SUBMÓDULO 2 171
 Formación para el Trabajo - Sexto Semestre

La intención de esta página web, es que al pasar el cursor sobre el texto de la imagen, se
cambie y muestre la imagen de la computadora correspondiente, es decir, debemos asignarle
comportamientos a la imagen.

Para poder identificar la imagen para asignarle comportamientos, se le debe asignar un ID y crear
los estilos necesarios para que se muestre como quieres.

Para aplicarle los estilos necesarios de manera que se muestre como quieres, deberás crear 1.-Selecciona
Estilo

una nueva regla para esta foto.

1. Debes irte a Estilos.

2. Después selecciona el botón Nueva regla CSS
3. En nombre de selector, selecciona el nombre del ID que asignaste a la imagen.
4. En definición de regla seleccionas (solo este documento).
5. Finalmente da clic en Aceptar.

2.- Da clic en botón

Nueva regla CSS

172 HOJAS DE ESTILO CSS

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

El siguiente paso será algo que hasta este momento has realizado en el diseño de todas las
páginas, el modificar los estilos (fondo, borde, cuadro, bloque) para dar la apariencia que deseas.

Hasta aquí tu página debe ir de esta manera, la imagen la debes colocar a la derecha.

Lo siguiente será hacer que la imagen cambie cuando el cursor pase por el párrafo de otra
computadora. Para poder hacer eso, utilizarás los comportamientos.

Para poder hacer uso de los comportamientos, lo primero que se debe hacer es elegir qué
elemento (encabezado o párrafo) ejecutará el comportamiento. Para evitar problemas y como
tienes encabezado y párrafo en cada computadora, estos dos elementos se agrupan en un div.
De tal manera que cuando pases el cursor por la zona de la computadora en cuestión se cambie
la imagen.

SUBMÓDULO 2 173
 Formación para el Trabajo - Sexto Semestre

Para agrupar en un div, el procedimiento es sencillo:

1.- Seleccionas los dos

elementos (encabezado y
párrafo).

2.- Da clic en Insertar, selecciona

Objeto de diseño y finalmente da clic
en Etiqueta Div.

3.- Para finalizar la Etiqueta Div, da

clic en Aceptar.

Ahora, lo que tienes que hacer es abrir el panel

Comportamientos, que se encuentra en el menú de
ventana.

174 HOJAS DE ESTILO CSS

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

Enseguida, das clic en el icono que aparece en forma de + y eliges un comportamiento.

En el listado de comportamientos
disponibles, vas a encontrar el que
necesitas para tu página web, que
es el de Intercambiar imagen.

Después de esto, te aparece una

ventanita donde debes seleccionar
la imagen a cambiar, que es la única
que tiene asignado un ID y eliges la
imagen que la sustituirá. Como se
puede ver en la imagen siguiente.

Se debe hacer el mismo procedimiento con cada párrafo y cada imagen para que cambie el
comportamiento.

SUBMÓDULO 2 175
 Formación para el Trabajo - Sexto Semestre

FINALMENTE, LA PÁGINA QUINTA QUEDA COMO EN LA SIGUIENTE IMAGEN:

Al pasar el cursor por otro párrafo automáticamente cambia la imagen.

176 HOJAS DE ESTILO CSS

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

Con esto, habrás finalizado tu sitio web, con las diferentes páginas de enlace, con tablas, formularios
de contacto, comportamientos, estilos y muchas cosas más.

A partir de este momento, ya te corresponde a ti seguir explorando el Dreamweaver para seguir

aprendiendo más acerca del diseño de páginas web, y además, porque tendrás que diseñar tu
propio proyecto de sitio web utilizando varias páginas y las diferentes opciones como mínimo que
hasta el momento practicaste.

SUBMÓDULO 2 177
 Formación para el Trabajo - Sexto Semestre

AUTOEVALUACIÓN

Una vez finalizadas las actividades de aprendizaje completa la siguiente escala de apreciación
para evaluar tu desempeño. Utiliza la siguiente escala.

Excelente
Bien
Regular
Insuficiente

CRITERIO Excelente Bien Regular Insuficiente

Contesté todas las actividades
de este submódulo para cada
uno de los temas.

Llevé a cabo todas las

lecturas de los temas en forma
concienzuda y crítica.
Conozco la terminología básica
del software para diseñar una
página web.
Identifico el entorno del
software para diseñar páginas
web.
Diseño una página web con el
software de aplicación.
Participé con una actitud
responsable, crítica y
propositiva en las actividades
solicitadas.
Mostré en todo momento
respeto hacia mis compañeros
y profesor.

INTEGRACIÓN: En mesa redonda menciona brevemente en forma oral las actividades que
realizaste durante el segundo submódulo, enfatizando lo aprendido y la importancia que tiene
para ti el saber utilizar el software de aplicación para crear páginas web.

178 HOJAS DE ESTILO CSS

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

ACTIVIDAD INTEGRADORA

NOMBRE: ________________________________________ GRUPO: ________

En trabajo colaborativo como proyecto final deberás presentar un sitio web diseñado en
Dreamweaver, sobre un negocio, empresa o institución de servicios. Sitio que deberá contener
lo siguiente:

1. 4 páginas web que se enlacen desde una página principal.

2. Una plantilla de diseño, que crearás y que te servirá de base para tus diferentes páginas
web.

3. En las diferentes páginas que crearás debes manejar en algunas o todas según sea tu
elección: imágenes, tablas, formularios de contacto, comportamientos en las imágenes.

4. Todas las páginas deben contener encabezados, imágenes, título, texto, columnas.

5. En todas las páginas debes aplicar estilos, es decir, que tengan buena apariencia, en
cuanto a tipos de letra, colores de fondo, bordes, marcos, imágenes, la distribución de las
columnas. Es decir, las páginas deben ser agradables a la vista y presentar calidad en su
diseño.

6. En alguna de las páginas, deben aparecer los datos de los diseñadores, con información de
contacto, por si es necesario establecer comunicación con ellos.

SUBMÓDULO 2 179
 Formación para el Trabajo - Sexto Semestre

HETEROEVALUACIÓN

El docente evaluará el trabajo de acuerdo a la siguiente rúbrica: Excelente, Bien, Regular,

Insuficiente.

Excelente Bien Regular Insuficiente

CRITERIO
12% 10% 8% 2%

• Elige el ramo empresarial de

Utiliza la la página web que va a crear. Realiza al Realiza al Realiza al
terminología • Selecciona correctamente la menos 3 de menos 2 de menos 1 de
básica del información que va a publicar las acciones las acciones las acciones
software para en su página web. mencionadas mencionadas mencionadas
diseñar una • Planifica la página web. en la columna en la columna en la columna
página web. • Define el diseño de la página “Excelente”. “Excelente”. “Excelente”.
web que va a crear.

• Conoce el software de
aplicación para el diseño de
páginas web.
• Conoce la pantalla inicial del
software para el diseño de Realiza al Realiza al Realiza al
Identifica
páginas web. menos 3 de menos 2 de menos 1 de
el entorno
• Conoce cada una de las las acciones las acciones las acciones
del software
barras de herramientas del mencionadas mencionadas mencionadas
para diseñar
software de aplicación para el en la columna en la columna en la columna
páginas web.
diseño de páginas web. “Excelente”. “Excelente”. “Excelente”.
• Conoce y aplica las funciones
básicas del software de
aplicación para el diseño de
páginas web.
• Crea el sitio para el desarrollo
de la página web.
• Elige y personaliza el diseño Realiza al Realiza al Realiza al
Diseña
que de la página web. menos 3 de menos 2 de menos 1 de
una página
• Selecciona una plantilla para las acciones las acciones las acciones
web con el
la página web. mencionadas mencionadas mencionadas
software de
• Inserta imágenes en la pá- en la columna en la columna en la columna
aplicación.
gina web. “Excelente”. “Excelente”. “Excelente”.
• Inserta hipervínculos en la
página web.
TOTALES

CALIFICACIÓN OBTENIDA

180 HOJAS DE ESTILO CSS

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

INSTRUMENTOS DE EVALUACIÓN
I. INFORMACIÓN GENERAL PARA EL PROCESO DE EVALUACIÓN

NOMBRE DEL EVALUADOR:

FECHA DE APLICACIÓN:
NOMBRE DEL CANDIDATO:

IECL

Código
Título

Perfil de la NTCL que se evalúa

Unidad:

Diseñar páginas web en lenguaje HTML

HOJAS DE ESTILO CSS

Diseño web

Comunidades virtuales

Título
Código Nivel

Elementos:

Referencia Código Título

Intento de
Intento de evaluación Intento de evaluación
evaluación

1
2 3

Domina el Contenido
No Domina el Contenido

Juicio de la Evaluación del módulo

Con letra Con número
1

SUBMÓDULO 2 181
 Formación para el Trabajo - Sexto Semestre

2.1 CONOCER LA TERMINOLOGÍA BÁSICA DEL SOFTWARE PARA DISEÑAR UNA PÁGINA WEB.

CONTENIDO
SÍ NO N/A

Entrega en tiempo y forma.

Elige un tema para desarrollar su página web.

Define la estructura de la página web.

Selecciona información relevante para la página web.

Presenta el bosquejo del diseño de su página web.

Trabaja colaborativamente.

2.2 IDENTIFICAR EL ENTORNO DEL SOFTWARE PARA DISEÑAR PÁGINAS WEB.

2.3 DISEÑAR UNA PÁGINA WEB CON EL SOFTWARE DE APLICACIÓN.

CONTENIDO
SÍ NO N/A

Entrega en tiempo y forma.

Lleva a la práctica el diseño de la página web.

Define claramente las imágenes y sus ubicaciones.

Las imágenes presentan un tamaño adecuado, están identificadas y referenciadas.

Los encabezados, párrafos, listas, etc. presentan los mismos estilos de las imágenes.

Estética: El diseño y combinación de colores son adecuados.

Los colores que maneja tienen contraste y permiten leer la información que muestra la página.

Trabaja colaborativamente.

182 HOJAS DE ESTILO CSS

 SUBMÓDULO 3
COMUNIDADES VIRTUALES

Competencias Genéricas Competencias Profesionales Básicas

4. Escucha, interpreta y emite mensajes
pertinentes en distintos contextos mediante CPBT3. Plantea el uso y administración
la utilización de medios, códigos y de plataformas electrónicas de consulta,
herramientas apropiados. comunicación y distribución de contenidos
multimedia, proponiendo comunidades
CG4.5 Maneja las tecnologías de la virtuales que le permita comunicarse,
información y la comunicación para obtener favoreciendo su autoaprendizaje en un
información y expresar ideas. ambiente innovador en sus diferentes
contextos.
5. Desarrolla innovaciones y propone
soluciones a problemas a partir de métodos
establecidos.

CG5.1 Sigue instrucciones y procedimientos de

manera reflexiva, comprendiendo como cada
uno de sus pasos contribuye al alcance de un
objetivo.

8. Participa y colabora de manera efectiva en

equipos diversos.

CG8.1 Propone maneras de solucionar un

problema o desarrollar un proyecto en equipo,
definiendo un curso de acción con pasos
específicos.
 Formación para el Trabajo - Sexto Semestre

SUBMÓDULO

3 COMUNIDADES VIRTUALES

Interdisciplinariedad Ejes Transversales

¾ Emprendimiento.
¾ Estrategias de Lectura y Escritura II ¾ Vinculación laboral.
¾ Iniciar, continuar y concluir sus estudios de
nivel superior.

Aprendizajes esperados

y Elabora un plan de mercadeo (Social Media Marketing) para promocionar un producto o sitio
web, empleando la red social adecuada para impactar al segmento de mercado al que se
dirige, de manera ética y responsable.

Conocimientos Básicos Habilidades Actitudes

Conceptos básicos. ¾ Conoce los elementos de ¾ Aporta ideas en la
las redes sociales. solución de problemas
● Comunidades virtuales. promoviendo su
● Redes sociales. ¾ Utiliza las redes sociales creatividad.
para actividades de
Tipos de redes sociales. emprendimiento. ¾ Muestra flexibilidad y
apertura a diferentes
¾ Examina la estructura y puntos de vista.
● Características y ventajas. el contenido de las redes
sociales, seleccionando la
Social Media Marketing. idónea para promocionar
su producto o sitio web.
● Terminología básica.
● Uso de las redes sociales en el
Social Media Marke-ting.
● Plan de Social Media Marketing.
- Análisis.
- Planificación.
- Implementación.
- Medición.

184 COMUNIDADES VIRTUALES

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

Conceptos básicos:

Comunidades virtuales

y Se refiere a un grupo de personas unidas a través de Internet

por valores o intereses comunes, como gustos, pasatiempos o
profesiones.

y Es un determinado grupo de sujetos (individuos, colectivos e

instituciones) que concentran sus esfuerzos en el ordenamiento
de datos procesados en la Internet, a partir de servicios en línea.
En otras palabras, son grupos de individuos e instituciones
organizados cibernéticamente en torno a un margen de
intereses específicos, cuyas interacciones, vínculos, relaciones
y comunicaciones se dan a través de Red.

Enciclopedia de Conceptos (2019). “Comunidades virtuales”.

Recuperado de: [Link]

Recuperado de: [Link]

bih=374&tbm=isch&sa=1&ei=aMerXK6tOaWd_QatxIfwCg&q=comunidades+virtuales&oq=comu
nida&gs_l=img.1.0.0i67j0l9.134792.136110..137908...0.0..0.311.1168.0j7j0j1......1....1..gws-wiz-
img.c-yKD4y_Neg

Recuperado de: [Link]

Recuperado de: [Link]

Redes Sociales

Sitios de Internet formados por comunidades de individuos con intereses o actividades en común
(como amistad, parentesco, trabajo) y que permiten el contacto entre estos, de manera que se
puedan comunicar e intercambiar información.

Los individuos no necesariamente se tienen que conocer previo a tomar contacto a través de una
red social, sino que pueden hacerlo a través de ella, y ese es uno de los mayores beneficios de las
comunidades virtuales.

Recuperado de: [Link]

SUBMÓDULO 3 185
 Formación para el Trabajo - Sexto Semestre

Tipos de redes sociales

Redes genéricas. Con este término se hace referencia a las redes sociales que todas las personas
conocen, en tanto se han vuelto muy populares y son las que más abundan. Se han convertido sin
lugar a dudas del nuevo medio de comunicación de las sociedades actuales.

Estas redes sociales están compuestas por personas que se vinculan entre sí por compartir
una relación, que puede ser de amigos, de familia o bien porque tienen en común actividades o
intereses. Son muy numerosas y populares (como Facebook,Twitter, Youtube, etc.).

Recuperado de:
[Link]
h&sa=1&ei=0MirXPmKI-eN_Qby763gDw&q=redes+sociales+genericas&oq=redes+sociales+gen
ericas&gs_l=img.1.0.0j0i5i30j0i24l3.178300.179334..181839...0.0..0.166.1144.1j8......1....1..gws-
wiz-img.......[Link]

Redes profesionales. Son aquellas enfocadas, principalmente, a los negocios y actividades

comerciales. En ellas se busca establecer conexiones profesionales y no personales, y sus
objetivos van desde hacer la función de un portal de empleo, hasta poner en contacto a posibles
socios, inversores o compañeros de negocio.
Estas redes involucran individuos que comparten el ámbito laboral o que buscan ampliar sus
fronteras laborales y pueden ser abiertas o cerradas.

Recuperado de:
[Link]

186 COMUNIDADES VIRTUALES

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

Redes temáticas. Se especializan en los gustos de aquellas personas que buscan un espacio de
intercambio para intereses comunes específicos, las más habituales están relacionadas con las
aficiones, las profesiones o las búsquedas de pareja. Por el tipo de contenido compartido, podemos
encontrar redes de fotos, vídeos, música, noticias o documentos, entre otras posibilidades.

Recuperado de: [Link]

Recuperado de: [Link]

Características de las redes sociales:

1. Interacción:

La interacción se genera cuando se comparte un post de cualquier tema y este automáticamente

obtiene un “me gusta”, un “follow”, un comentario o se comparte. Esto se da porque el tema
compartido va acorde a los intereses de las personas que mantenemos en nuestra lista de
contactos. Esta es la principal característica de toda red social.

2. Personalización:

Los usuarios manejan a su gusto todo lo que publican, a quien comentan, la información que
ponen. Esto incluye la imagen de tu red social, de tu perfil, videos, foto de portada, fondo, etc. Es
decir te permite adecuarlo a tu satisfacción y personalidad.

3. Vínculos y conectividad:

Las redes sociales son un medio por el cual puedes crear lazos, es por eso que mediante su uso
es común tener dentro de los contactos a personas conocidas, predominando aquellas que no
conoces, pero con las cuales podrías establecer comunicación.

4. Tiempo real:

A diferencia de los foros, las redes sociales te permiten obtener una respuesta automáticamente
(para lo cual debes estar conectado). Esto es muy favorable, ya que nos permite entablar una
buena conversación en el momento.

5. Viralidad:

Mediante las redes sociales podemos hacer llegar un mensaje a cualquier parte del mundo con
tan solo un clic, esto se debe gracias a los contactos que manejamos y al compartirlos estos, el
mensaje se va propagando.

SUBMÓDULO 3 187
 Formación para el Trabajo - Sexto Semestre

6. Lenguaje multimedia e hipertextual:

El lenguaje multimedia se compone de gran variedad de modalidades de comunicación: visual,

auditiva, gráfica y recursos telemáticos. Las redes sociales manejan diversas herramientas que les
dan mayor peso y relevancia. Nos permiten no solo redactar, sino que podemos compartir alguna
foto, compartir videos, hacer videollamada (personal o conferencia) y muchas otras actividades
que la hacen el mejor amigo de todos.

Recuperado de: [Link]

Recuperado de: [Link]

Ventajas de las redes sociales

1. Colaboración del estudiante en clase

Las redes sociales son medios que permiten que los estudiantes entren en contacto rápidamente
con otros, es por eso que al crear proyectos en la escuela estos pueden colaborar activamente en
cuanto a búsqueda de tareas o en cuanto a las asignaciones de grupo.

2. Útiles para buscar ayuda con las tareas

Cuando los estudiantes tienes dudas acerca de alguna tarea pueden publicar rápidamente un
mensaje dando a conocer su duda y si alguien se anima a responderles. Por otro lado, también
pueden realizarle una pregunta específica al docente para que este los pueda orientar.

3. Compartir recursos

Si el profesor necesita dirigir a los estudiantes a una herramienta en línea en particular, se puede
compartir fácilmente a través de medios sociales como Twitter y Facebook. Asimismo, el profesor
puede generar mayor participación de los alumnos compartiéndoles enlaces en una determinada
cuenta que tengan en común.

4. Conexión a nivel mundial

A través de Facebook, Twitter o Linkedin te puedes poner en contacto con personas a las que hace
años que no ves.

Y no solo eso, sino conocer a gente o presentarte a personas a las que de otra manera hubiera sido
imposible contactar. Tal es el caso por ejemplo de Linkedin con jefes o presidentes de empresas.
Te pueden ayudar entre otros a:
y Buscar información.
y Contactar empresas.
y Encontrar pareja.
y Encontrar empleo.
y Hacer nuevos amigos.
y Pedir consejo a expertos.

188 COMUNIDADES VIRTUALES

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

5. Grupos

En ellos se crea una especie de «inteligencia colectiva» que conecta a personas de todas las
localizaciones del mundo.
Los hay privados y públicos y en ellos puedes preguntar tus dudas o publicar información.
También puedes hacer tu propio grupo de amigos o de profesionales con un determinado objetivo,
conectar con gente que tiene tú mismo interés.

Antes esto solo era posible a través de los foros, los cuales son mucho más opacos.

6. Denuncia social

Seguro que te llegan todos los días a tus redes sociales noticias de crímenes, corrupción, delitos etc.
Hoy en día podemos decir que gracias a las nuevas tecnologías cualquier tipo de información
puede hacerse pública mediante vías distintas, ya sea a través de redes sociales, periódicos
digitales, etc. y por tanto ser accesible a cualquier persona desde cualquier parte del mundo.

En resumen una de las razones por las que ahora se conoce tanto la corrupción, delitos o
desigualdades sociales a nivel internacional es gracias a las redes sociales.

7. Comunicación instantánea

¿Te imaginas unos años atrás cómo se comunicaban nuestros abuelos?

Es sorprendente el avance tecnológico alcanzado en los sistemas de comunicación, ya que hoy

en día tan solo con teclear en un móvil u ordenador puedes ponerte en contacto con distintas
personas a la vez en cualquier momento y desde cualquier lugar.

Entre los más conocidos se encuentra: whatsapp, skype u otras plataformas donde la comunicación
es rápida e instantánea. Y qué decir de la formación online, quien iba a imaginar hace unos años
atrás poder estudiar lo que quisieras y desde casa, todo un lujo hoy en día disponible para todo el
público.

El año pasado por ejemplo estuve en un curso en el que se compartía información en una comunidad
de Google+ de manera rápida y cómoda mientras se daba la clase.

Es decir, las redes sociales también sirven para la formación, tanto a distancia como presencial.
Puedes hacer Hangouts en Google+ y hacer seminarios. O puedes hacer comunidades de Google+
o grupos de Facebook en los que compartes información.

8. Aprender idiomas

Gracias a las nuevas tecnologías ya no hay excusas para aprender un idioma. Puedes hacerlo
cómodamente desde casa y en cualquier momento.

Hay redes sociales, como Livemocha, que sirven para aprender idiomas online.
En esta web los usuarios hablan entre ellos, corrigen ejercicios o diseñan mini lecciones. Si buscas
en internet encontrarás muchas páginas más con las que aprender cualquier idioma.
SUBMÓDULO 3 189
 Formación para el Trabajo - Sexto Semestre

9. Ampliar tu negocio

Si tienes un negocio, la gran ventaja de las redes sociales es que puedes localizar fácilmente a tus
clientes potenciales.

Además, podrás ponerte en contacto con ellos, obtener información para mejorar y darte a conocer
en tu ciudad o a nivel internacional.

10. Branding

Cada día hay más competencia para encontrar un buen trabajo, hay mucha gente formada y pocos
puestos de calidad.

Con Linkedin puedes mostrar tus habilidades, capacidades, experiencia y formación, y mostrar
esa imagen por todo el mundo. Además, puedes contactar fácilmente a empresas o personas de
interés con las que crear relaciones.

Y si estás buscando empleo existen otras plataformas como Infojob, jobtalent y otras muchas más
que te permiten subir tu currículum e inscribirte en todas aquellas ofertas que sean de tu interés.

Recuperado de: [Link]

Recuperado de: [Link]

SOCIAL MEDIA MARKETING

El Marketing Digital es una nueva área de negocios en el mundo de Internet. Si una marca no está
en la Web simplemente no existe, de ahí derivan los nuevos trabajos como Community Manager
y Social Media Manager. Las redes sociales como Facebook, Twitter, Linkedin, Instagram son una
nueva forma de llegar al cliente; muchas veces las personas piensan que estos son los principales
medios para poder comercializar un producto, pero también es necesario contar con un sitio web
y el apoyo de e-mail marketing.

Es una herramienta para que el cliente pueda estar más cerca del producto o servicio que ofrece,
con un solo clic puedes generar un buen negocio de manera rápida y sencilla. Para las empresas
es muy importante saber día a día que necesidad tiene el cliente y atender sus exigencias de una
manera ágil.

Marketing Digital es un conjunto de herramientas, estrategias y métodos utilizados para promocionar

productos y servicios por medio de Internet en dispositivos electrónicos.

Es vital mencionar que el Marketing Digital también se conoce como Web Marketing, Marketing
Online e Internet Marketing.

El marketing digital es la aplicación de las estrategias de comercialización llevadas a cabo en

los medios digitales. Todas las técnicas del mundo off-line son imitadas y traducidas a un nuevo
mundo, el mundo online. En el ámbito digital aparecen nuevas herramientas como la inmediatez,
las nuevas redes que surgen día a día, y la posibilidad de mediciones reales de cada una de las
estrategias empleadas.

Recuperado de: [Link]

190 COMUNIDADES VIRTUALES

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

Terminología básica
Community Manager

En muchas empresas y organizaciones ha surgido la necesidad de la figura del community manager

(administrador de la comunidad online), es aconsejable que éste sea más que una persona con talento
y experta en las nuevas tecnologías, una persona de dentro de la propia empresa u organización o al
menos que conozca en un grado alto sus valores, objetivos, procesos y productos para poder dialogar
objetivamente en la comunidad online con el suficiente criterio y rigor.

Recuperado de: [Link]

Recuperado de: [Link]
usados-en-marketing-de-redes-sociales/

Branding

En un anglicismo que se utiliza para hacer referencia a los procesos de construir una marca, a través
de una serie de estrategias que apuntan al valor que le otorga un cliente a la marca como tal.

Branding digital

Asesorar a los clientes en su estrategia de presencia online y estrategia en social media, creando
y gestionando para ellos los nuevos canales de difusión de valores de marca y de comunicación
con sus clientes y proveedores en las redes sociales.

Buyer Persona

El concepto Buyer Persona hace referencia al estilo de vida, hábitos, intereses, necesidades y
conductas del usuario ideal para una marca concreta. Se trata, por tanto, de una representación
ideal del público objetivo al que se dirige la empresa.

Buyer persona es uno de los términos esenciales de marketing digital ya que añade verosimilitud al
arquetipo del público al que se dirige la campaña. Así, se dota al Buyer Persona de una personalidad
completa, aunque ficticia, pero coherente con toda la información.

En definitiva, es un término empleado para facilitar la comprensión del público y enfocar

correctamente las estrategias para captar ese tipo de usuario.

Conversión

La conversión consiste en el momento “mágico” en el que el usuario realiza la acción que la

empresa ha marcado como objetivo. Es el ideal de toda campaña de marketing online: lograr
conversiones.

La acción clave que deriva en una conversión puede ser de muchos tipos: compra, registro,
clic, cumplimentación de un formulario o tiempo de permanencia en una página, entre muchas
otras. Cada sitio web o landing page determina las condiciones que se tienen que dar para que la
conversión finalmente se produzca.

SUBMÓDULO 3 191
 Formación para el Trabajo - Sexto Semestre

CPC (Coste Por Clic)

El coste por clic es la cantidad de dinero que el anunciante tendrá que abonar cada vez que un
usuario haga clic en su anuncio. Se trata de una métrica que pone en relación la inversión realizada
con la cantidad de clics conseguidos.

El CPC es la base de las campañas de Pago Por Clic (PPC) que centran sus objetivos en lograr
tráfico que se expresa en clics hacia una landing page concreta.

CTA (Llamada a la acción)

La llamada a la acción es el mensaje incluido en todo tipo de soporte de marketing digital que
se emplea para llamar la atención del usuario. Su influencia en la consecución de los objetivos
convierte a la CTA en uno de los términos esenciales del marketing digital. La llamada a la acción
es el reclamo principal con el que un sitio web, landing page, anuncio o email pretende convencer
al cliente.

La llamada a la acción tiene que focalizar la propuesta de valor de la marca de manera clara y
sencilla. Para ello es importante que se centre en las razones por las que lo que ofreces le interesa
al visitante.

Email Marketing

Se trata del marketing digital realizado con el email como principal canal. Mediante un software de
email marketing podrás llevar a cabo uno de los métodos de hacer marketing digital más eficaces.

Con campañas de email marketing no sólo puedes comunicarte con tus suscriptores fomentando
su fidelidad. También es un canal que ayuda a incrementar tanto el tráfico como las ventas.

Su alcance es superior a otros canales, por lo que resulta ideal para todo tipo de empresas.
Además, su coste es relativamente bajo en comparación al alcance que permite obtener.

192 COMUNIDADES VIRTUALES

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

Embudo de conversión

El embudo de conversión es una manera de denominar a la forma avanzada de medir el recorrido

de un usuario en los diferentes elementos de una campaña de marketing digital. Se trata de uno de
los elementos fundamentales de la analítica web. Para ello, herramientas como Google Analytics
ayudan a realizar un seguimiento exhaustivo de los usuarios en su recorrido completo hasta
efectuar la conversión.

KPI

KPI, Key Performance Indicator o Indicador Clave de Rendimiento hace referencia a las métricas
que definen los objetivos que se quieren conseguir con una estrategia de marketing online.

Existen diferentes tipos de KPIs que en todo caso es esencial que respondan a las siguientes
características:

y Específicos: Los KPIs identifican qué, dónde, cómo y cuándo se mide.

y Medibles: Permiten cuantificar las medidas y los beneficios que se esperan.
y Posibles: No tiene sentido elegir indicadores que sean imposibles de conseguir con los
recursos asignados.
y Pertinentes: Dependiendo de los objetivos que se busquen será mejor una métrica u otra.
y Limitados en el tiempo: Un KPI debe estar supeditado a un periodo temporal concreto.

Landing Page

La página de aterrizaje, landing Page, es una página en la que se trata de obtener la conversión
del usuario. Se busca que el cliente haga clic, se registre o cumplimente un formulario.

El objetivo de la landing page puede ser variado pero siempre está ligado a un factor de conversión.
Una landing page efectiva dispone de un buen titular, un formulario de captación breve, un mensaje
consistente o diversas pruebas sociales, entre otros elementos.

Lead

El lead es un usuario que ha mostrado interés en un producto o servicio. Como particularidad, el

cliente calificado como lead ha facilitado sus datos para poder recibir más información o establecer
una relación comercial con la marca.

SUBMÓDULO 3 193
 Formación para el Trabajo - Sexto Semestre

Por tanto, un lead puede ser simplemente un cliente que ha dejado sus datos para conocer más
sobre el producto o la empresa. O alguien que ha solicitado un presupuesto complementado
con un formulario. De ahí que se considere que la captación y conversión de leads es el eje
del marketing digital.

SEO (Search Engine Optimization)

La optimización de los motores de búsqueda es el conjunto de técnicas y trucos empleados

para que una marca obtenga una posición superior en un buscador. Así, se pretende mejorar el
posicionamiento para aparecer en una mejor posición en la página de resultados de determinadas
palabras clave.

El objetivo del SEO se consigue mediante posicionamiento orgánico, es decir, que en el SEO no
se paga al buscador por mejorar la posición de un resultado.

SEM (Search Engine Marketing)

Por su parte, SEM es la planificación, ejecución y análisis de las campañas de inserción de enlaces
publicitarios en los buscadores.

Las diferencias entre SEO y SEM se centran en la manera de conseguir aparecer en la página
de resultados de una keyword concreta. Mientras que el SEO opta por aparecer en los resultados
orgánicos, en el SEM se utilizan anuncios.

SMO (Social Media Optimization)

El Social Media Optimization es el conjunto de técnicas relacionada con la mejora de los contenidos
y la interacción en medios y redes sociales. La optimización en social media busca incrementar el
retorno de las acciones realizadas en los medios sociales de forma directa o indirecta.

194 COMUNIDADES VIRTUALES

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

El objetivo principal del SMO es que se comparta más y mejor el contenido. SMO busca que se
enriquezcan las aportaciones de los usuarios y que la audiencia se involucre más.

Test A/B

El Test A/B es una de las claves de éxito en una campaña de marketing online. Consiste en una
comparativa de dos elementos concretos de una campaña de marketing digital. En un Test A/B se
pueden comparar los asuntos de email, las imágenes de landing pages o newsletters, el color del
botón de la CTA o el propio contenido, entre muchos otros factores.

Ilustrado con un ejemplo, la idea esencial de un test A/B en una campaña de email marketing
es que se envía una a un porcentaje de tu lista de suscriptores una versión A de un email y otra
versión B a otro pequeño porcentaje. Con los resultados se elige un criterio ganador que hace que
el email más eficaz se envíe al resto de la base de datos.

WoM (Word of Mouth o boca oreja)

Es una manera de hacer publicidad basada en las opiniones de los clientes. Hoy en día, ha
aumentado el valor de las opiniones de los usuarios. Las campañas de Word of Mouth se basan
en el boca oreja tradicional, una forma de comunicación que pone a los usuarios en el centro de
la estrategia.

Word of Mouth es un tipo de marketing de guerrilla que intenta desarrollar mensajes adecuados
para que los usuarios quieran trasladárselos a sus contactos y allegados.

Recuperado de:
[Link]

Recuperado de:
[Link]

SUBMÓDULO 3 195
 Formación para el Trabajo - Sexto Semestre

USO DE LAS REDES SOCIALES EN EL SOCIAL MEDIA MARKETING

Antes de promocionar tu sitio web en una red social, deberás tomar en cuenta diferentes aspectos,
tales como las ventajas y desventajas que te ofrecen las diferentes redes sociales para generar
mayor alcance, ventas, etc. y en base a ello podrás elegir cual es la idónea para tu plan de social
media marketing. A continuación te mostramos las más utilizadas:

VENTAJAS:

1) Cercanía al cliente. Propicia el diálogo directo entre empresa y cliente, lo cual se traduce
en autenticidad y credibilidad.
2) Propaganda boca a boca. Los usuarios de Facebook se implican en las campañas
promocionales de las empresas y en este sentido contribuyen a difundirla entre otras
personas.
3) Tiempo real. Las páginas de fans en Facebook posibilitan el feedback (retroalimentación)
en tiempo real con el usuario.
4) Targeting. Facebook permite al anunciante dirigirse a un determinado tipo de público en
función de sus intereses.
5) Gran alcance. Facebook cuenta hoy en día con más de 500 millones de usuarios en todo
el mundo. Además, aun cuando una página tiene pocos fans, su alcance en la red de redes
es muy amplio.

DESVENTAJAS:

1) Resistencia del usuario a la publicidad. Facebook es fundamentalmente una herramienta

para la interacción social. La aceptación de la publicidad por parte del usuario en esta red
social es todavía escasa.
2) Gran esfuerzo. El diálogo directo con el cliente en Facebook conlleva un gran esfuerzo,
puesto que los contenidos deben ser relevantes y hay que actualizarlos constantemente,
algunas empresas carecen de estructuras para lograrlo.
3) Pérdida de control. En una campaña promocional o publicitaria llevada a cabo en Facebook,
el anunciante tiene escaso poder sobre ella porque no controla la plataforma empleada para
su lanzamiento.
4) Moda pasajera. El mercado de las redes sociales es un sector emergente y como tal alberga
cada vez a más empresas. Otros competidores podrían en el futuro hacer sombra a Facebook.
5) Escaso alcance. Muchas páginas de fans en Facebook llegan sólo a una pequeña mayoría
muy dispersa, que no es representativa del mercado global.

Recuperado de:
[Link]
desventajas-de-facebook-como-herramienta-corporativa

196 COMUNIDADES VIRTUALES

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

VENTAJAS:

1) Branding: Consiste en construir la imagen de marca y trasmitir valores positivos para lograr
que tus clientes se identifiquen contigo.
2) Promoción: Es una de las mejores redes para promocionar productos o servicios, hacer
publicaciones sobre eventos e incluso hablar sobre novedades internas (nuevas instalaciones,
incorporaciones en el equipo, etc).
3) Comunidad: Twitter es una puerta abierta a la comunicación y atención al usuario. Es
importante crear sentimiento de grupo con los seguidores e interactuar con ellos (contestar
sus preguntas, responder dudas, escuchar sus intereses…).
4) Hashtags: Determinar un hashtag diferente para cada uno de los tipos de contenido que se
hacen en Twitter. Gracias a la utilización de hashtags se puede monitorizar conversaciones
sobre la marca (¿qué dicen de ella los clientes?) o investigar la competencia. De esta forma,
se puede detectar cualquier posible incidencia, mejorar la forma de relacionarse con los
clientes, cambiar estrategias, etc.
5) Listas: Se pueden crear diferentes listados para controlar los clientes e incluso a otras
empresas. Cada vez que se use Twitter, se recomienda buscar las listas y ponerse al día de
todo lo que se diga en los perfiles que se tengan guardados, con el fin de saber lo que pasa
alrededor de la marca y conocer las estrategias de la competencia.

Recuperado de: [Link]

DESVENTAJAS:

1) Utilizar Twitter como plataforma publicitaria. Los usuarios de Twitter buscan elementos
que aporten valor a su navegación, por lo que la recomendación es utilizarlo para difundir
noticias o eventos relacionados con el sector que puedan ser de utilidad para tus clientes
potenciales. Lo único que se consigue lanzando mensajes publicitarios a todas horas es
aburrir al seguidor y perder público interesado.
2) Gestionar mal las críticas. Se recomienda responder siempre al usuario para intentar
solucionar su problema de la mejor forma posible y cuanto antes. Si es imposible solucionarlo
a través de la plataforma, debemos avisarle de que nos vamos a poner en contacto con él vía
telefónica para dar solución a su petición.
3) No publicar contenido frecuentemente. Se debe establecer un calendario indicando
qué días se harán las publicaciones, qué tipo de contenido se utilizará y a qué horas los
receptores son más interactivos. Si no se publica frecuentemente, se corre el riesgo de
perder seguidores y reputación.

Recuperado de: [Link]

SUBMÓDULO 3 197
 Formación para el Trabajo - Sexto Semestre

VENTAJAS:

1) A través de LinkedIn se pueden generar oportunidades de trabajo.

2) Se consigue un contacto directo con los líderes y referentes de su industria.
3) Compartir información a través de grupos.
4) Hacer preguntas a nuestra red sobre temas que nos inquieten
5) Nos permite hacer Networking desde cualquier lugar del mundo.
6) Estar en contacto con profesionales y ser localizado.
7) Ser recomendado por otros contactos.
8) Participar de foros y consultas online con profesionales afines.
9) Mantener el Curriculum Vitae online.

DESVENTAJAS:

1) Se consiguen datos personales en cuestión de minutos.

2) Se puede difamar a una persona fácilmente, y ser vistos en poco tiempo por una multitud.
3) Podría prestarse para el robo de identidad.

Recuperado de:
[Link]

VENTAJAS:

1) Vas a llevar a más visitantes a tu página web

2) Aumentarás las interacciones / reacciones
3) Obtendrás mayor alcance a tu audiencia
4) Tendrás material para complementar en tus otras redes sociales
5) Mejorarás la imagen y reputación de tu marca

DESVENTAJAS:

1) No puedes llegar a usuarios con una computadora, ya que la aplicación está limitada y se
enfoca más al uso de celular.
2) Necesitarás calidad exclusiva en tus fotografías
3) Excesiva competencia
4) Instagram podría no adaptarse al sector de tu empresa

Recuperado de:
[Link]

198 COMUNIDADES VIRTUALES

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

VENTAJAS:

1) Ofrece la posibilidad de publicar los vídeos directamente desde la página principal de

YouTube a blogs y redes sociales; enviarlos por correo electrónico, etc.
2) Es el segundo canal de búsquedas más importante del mundo, sólo detrás de Google.
3) El proceso de subir videos a tu canal es también muy sencillo y rápido. Acepta la mayoría de
los formatos de vídeo más usados, mpeg, avi, mp4, etc.
4) En tu canal tendrás centralizados todos tus vídeos, los usuarios podrán visualizar y comentar
todo el material que hayas subido.
5) La visualización desde cualquier dispositivo, portátil, Smartphone, Tablet es perfecta.
6) Mejora el resultado de las búsquedas orgánicas en Google.
7) Los videos subidos pueden ser vistos a nivel mundial.

DESVENTAJAS:

1) Los videos pueden ser bloqueados según las personas que lo vean y le disgusten.
2) Sus comentarios no tienen censura.
3) Los anuncios al igual que spotify suelen ser una molestia.

Recuperado de: [Link]

PLAN DE SOCIAL MEDIA MARKETING

¿Qué es un Plan de Social Media Marketing o Social Media Plan?

Un Plan de Social Media Marketing o Social Media Plan es un documento en el que se detallan las
estrategias de redes sociales que se van a llevar a cabo para alcanzar los objetivos de marketing
de la empresa.

En otras palabras, un Social Media Plan es un Plan de Marketing en Redes Sociales.

Digamos que es el timón que va a dirigir todas nuestras estrategias y acciones del plan de social
media y que será ejecutado por el community manager.

Recuperado de: [Link]

de_Social_Media_Marketing_o_Social_Media_Plan

SUBMÓDULO 3 199
 Formación para el Trabajo - Sexto Semestre

Análisis
En esta fase debemos llevar a cabo los siguientes aspectos:
y DAFO. El clásico análisis DAFO (Debilidades, Amenazas, Fortalezas y Oportunidades) nos
ayudará a marcar el punto de partida de nuestro Social Media Plan y conseguir una imagen
clara de la situación en la que nos encontramos.

Además de por ser el primer paso en nuestro Social Media Plan, el análisis DAFO es una de
las partes más complicadas ya que requiere una gran capacidad de análisis, mucha dedicación
y tiempo pero, sobre todo, la necesidad de ser objetivos a la hora de desarrollarlo, algo que no
siempre es fácil cuando nos enfrentamos a nuestra propia empresa.

y Benchmarking. Una vez que hemos hecho un análisis interno es momento de realizar un
estudio de lo que hace nuestra competencia en Social Media. Al analizar lo que hacen nuestros
competidores comprenderemos mejor el sector en el que nos encontramos y podremos ver
aquellas acciones que podemos imitar y aquellas que debemos desechar de nuestro Plan. Lo
cierto es que son muchas (y muy buenas) las razones por las que debemos llevar a cabo un
buen benchmarking en nuestro Social Media Plan, partiendo porque es un excelente método
para lograr nuevas ideas hasta lograr que tengas una visión general de la situación y el mercado
al que te vas a lanzar, allanándote mucho el camino hacia el éxito.

Planificación

En esta fase debemos definir los elementos principales que influyen en nuestro Social Media Plan,
y que definirán la base de nuestra estrategia en redes sociales.

y Público objetivo. Nuestra audiencia es sin duda el pilar de nuestra estrategia de Social Media.
Definir a quien nos dirigimos en el Social Media Plan nos marcará la delimitación del resto de
elementos. El tipo de lenguaje que debemos utilizar, los temas a tratar o las redes sociales en
las que debemos tener presencia vendrán dadas por nuestro target. Por todo eso es uno de los
aspectos fundamentales a determinar en nuestro Social Media Plan.

Para definir a nuestro público objetivo no basta con limitarse a los datos sociodemográficos.
Hoy en día, gracias a las plataformas de analítica online podemos acceder a una gran cantidad
de información acerca de nuestro target, lo que nos permitirá definir aún mejor a nuestro público
y, por tanto, nuestro Social Media Plan. Además de la edad o la ubicación, es interesante
contemplar otros aspectos como los intereses o el comportamiento online.

y Objetivos. ¿Qué objetivos tenemos a medio y largo plazo con nuestro Social Media Plan?
No basta con objetivos genéricos y vagos, es necesario marcar metas claras, bien definidas
y factibles con nuestros recursos. Si definimos bien los objetivos que queremos conseguir a
través del Social Media Plan nos será mucho más fácil implementar las acciones necesarias
para lograrlos y saber en todo momento si estamos cumpliendo con esa misión o no.

y Canales. Aunque pueda parecer lo contrario, hay que tener bien claro que no es imprescindible
estar en todas las redes sociales. Para elegir las redes sociales que incluiremos en nuestro
Social Media Plan, hay que centrarse únicamente en aquellas en las que se encuentra tu
público objetivo y no intentar abarcar más de lo necesario. Esto nos permitirá focalizar nuestros
esfuerzos y maximizar la eficacia de la estrategia en redes sociales.

200 COMUNIDADES VIRTUALES

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

Implementación

Ya tenemos las bases sentadas para poder poner en marcha nuestro Social Media Plan.
Ahora es el momento de ponerse manos a la obra.

y Diseño de la estrategia. Una vez que tenemos nuestro público, objetivos y canales definidos
debemos definir en el Social Media Plan las acciones que realizaremos en las diferentes
plataformas y como lo vamos a hacer.

En este sentido, lo más recomendable es desarrollar un calendario editorial para las redes
sociales en el que establezcamos tipos de contenido, periodicidad y demás aspectos
determinantes de nuestra estrategia. Con un calendario editorial podremos definir cada una de
las acciones que se ejecutarán durante el periodo que dure el Social Media Plan y facilitará el
trabajo diario, mejorando la eficacia de la estrategia definida.

y Ejecución de la estrategia. Teniendo el calendario es muy fácil ejecutar la estrategia. Sigue

el camino que has marcado en el Social Media Plan de acuerdo a tus objetivos para conseguir
tus metas.

En este punto es importante definir qué equipo va a encargarse de ejecutar cada una de las
acciones del Social Media Plan siguiendo todas las pautas definidas en la estrategia y establecer
un sistema de actuación, así como un calendario de trabajo que merita que el flujo de trabajo se
desenvuelva más eficazmente.

Medición y análisis

Es esencial llevar a cabo una correcta medición de nuestra estrategia de Social Media tanto a
corto como largo plazo. Gracias a los informes de resultados en redes sociales podremos detectar
cualquier desviación de los objetivos con el fin de corregirlas a tiempo. Además, nos indicará que
acciones funcionan y cuáles no para poder realizar los cambios oportunos en la estrategia.

En términos de medición y análisis, es esencial definir perfectamente los KPI’s que resultan más
interesantes para medir el éxito o fracaso del Social Media Plan.

Recuperado de: [Link]

SUBMÓDULO 3 201
 Formación para el Trabajo - Sexto Semestre

CASO PRÁCTICO: Puertas San Rafael

Puertas San Rafael es una empresa productora y exportadora de puertas de interior de maderas
nobles ubicada en Villacañas (Toledo) que es la zona de España en la que se concentra un mayor
número de fabricantes de puertas. Tiene una plantilla de 250 trabajadores y una producción diaria
de 2.000 unidades de puertas y 25.000 de molduras.

La empresa contaba desde el año 2001 con una página web de estilo «folleto»: prácticamente era
una copia de sus catálogos de producto, con unos contenidos muy corporativos. Por ejemplo, las
líneas de producto aparecían con nombres como, serie Europa o serie Diseño. La web tardaba
en abrirse ya que estaba hecha con una presentación en flash. La web, que estaba disponible en
dos idiomas, obligaba al usuario a pasar previamente por una página para elegir en cuál de los
dos idiomas quería ver la página; es decir, esta web respondía a un tipo de web todavía hoy muy
corriente entre webs de pymes.

El hecho de que pasados los años la web no diera los resultados esperados motivó que la gerencia
de la empresa se pusiera manos a la obra para mejorar esta herramienta. En un plazo de un mes la
empresa recibió un informe con las propuestas de mejora que se resumen a continuación, y estas
se fueron implantando poco a poco, como vemos en la siguiente imagen de la página de inicio de
la antigua web (antes del proyecto de rediseño de la web) y la nueva web (después).

202 COMUNIDADES VIRTUALES

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

ANÁLISIS

Paso 1: Estrategia digital

Antes del rediseño, la empresa no había analizado realmente para qué quería la web. La base del
nuevo proyecto debía partir de una idea clara de cuáles eran los objetivos. El nuevo portal se planteó
como un modelo de negocio del tipo e-Promotion: la web como herramienta para promocionar la
empresa y los productos, potenciar las ventas offline y fidelizar clientes. El tipo de usuario al que
se dirigiría sería de dos tipos: por una lado, clientes finales y, por otro, distribuidores y clientes
profesionales (arquitectos, constructores o diseñadores). Además, se mostraría en dos idiomas,
español e inglés, con el objetivo de alcanzar al mercado nacional y también el internacional, donde
la empresa ya tenía cierta presencia. La implicación del gerente fue decisiva para impulsar el
proyecto e involucrar al personal a colaborar en su desarrollo.

Paso 2: Análisis de la competencia

Se hizo una búsqueda de las mejores webs del sector de puertas de madera de las que se podía
extraer ideas para incorporar al nuevo proyecto web de la empresa.

Webs para el análisis de la competencia en el sector de puertas de madera.

Ámbito Ciudad/País Empresa Dirección Web

Nacional Toledo (España) Artevi [Link]/[Link]

Nacional Soria (España) Norma Doors [Link]

Nacional Toledo (España) Uniarte [Link]

Nacional Toledo (España) Visel [Link]

Internacional Estados Unidos Interior Doors [Link]

Internacional Estados Unidos Marvin [Link]

Internacional Estados Unidos Masonite [Link]

Internacional Estados Unidos Sliding Door [Link]

Internacional Estados Unidos Thermatru [Link]

Internacional Reino Unido Jeld Wen [Link]

SUBMÓDULO 3 203
 Formación para el Trabajo - Sexto Semestre

Entre las webs seleccionadas destacan las norteamericanas, por su eficacia. Son webs muy
navegables, con catálogos muy visuales y prácticos. También están adaptadas al medio Internet
utilizando interesantes herramientas 2.0, fomentando la interactividad con los usuarios. Alguna,
como la de la empresa Thermatru, tiene muy desarrollada un área específica para los clientes
profesionales: arquitectos, constructores, reformadores y tiendas detallistas. Se incluyó la web
de la empresa inglesa Jeld-Wen, filial de una empresa norteamericana, que se distingue por la
excelente organización de sus contenidos adaptados al usuario y al medio Internet.

A nivel nacional se tuvo en cuenta en la comparativa las webs de las empresas Artevi, Norma,
Uniarte y Visel. Aunque sus webs son más del tipo «web folleto», están bien estructuradas, y
alguna como la de Norma tiene un catálogo de producto muy visual y eficaz.

En definitiva se trataba de incorporar lo mejor de cada una de las webs analizadas. Entre otros
contenidos se analizaron con detalle los catálogos y las fichas de producto, la navegabilidad, algunas
herramientas interactivas muy interesantes como «Ayúdame a elegir mis puertas» de Norma o un
área de personalización e innovación de Marvin y áreas restringidas reservadas a distribuidores
y profesionales del sector como la que presentaba Thermatru o Masonite. También se analizaron
otros contenidos como páginas del tipo «Dónde comprar», FAQs (preguntas frecuentes), glosario
de términos especializados y otros que podrían ser interesantes para incorporar de alguna forma
u otra al nuevo proyecto web de Puertas San Rafael.

PLANIFICACIÓN

Paso 3: Selección y registro de dominio

Se decidió mantener el dominio [Link] para el mercado español ya que el

nombre de la empresa era muy conocido tanto para los distribuidores como para los detallistas.
Para el mercado internacional se registró el dominio: [Link]. El nombre es fácil de
memorizar, transmite lo que ofrece la empresa y el origen español de los productos. No fue posible
registrar [Link] ya que estaba registrada por una empresa norteamericana.

Paso 4: Selección del consultor informático

La empresa decidió continuar con la misma empresa que había creado la web en su momento. A
esta empresa se le facilitó el proyecto de mejoras a realizar. Puertas San Rafael tras el proyecto
de rediseño propuesto por la consultora Global Marketing (web [Link]) tenía muy claro
cómo mejorar su proyecto web: contenidos, funcionalidades, menús de navegación, navegación
de las páginas (usabilidad), palabras clave y preparación de la web para su posicionamiento,
diseño, estructura de contenidos en la página de inicio, el catálogo y la ficha de productos, etc.
La empresa de programación web debía realizar el trabajo para trasladar todas esas ideas a un
código de programación.

204 COMUNIDADES VIRTUALES

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

IMPLEMENTACIÓN

Paso 5: Diseño y creación de la web

Se propuso utilizar el gestor de contenidos de código abierto Joomla, en su última versión disponible
1.5. Se decidió crear el proyecto desde cero en lugar de modificar la web existente. La empresa
de programación web presentó un diseño basado en una plantilla de Joomla modificada para
adaptarla al proyecto requerido y, una vez aprobado por Puertas San Rafael, comenzó el trabajo
de programación.

El usuario no
Logo y tagline
tiene que
destacando elegir
los beneficios previamente
para los su idioma. La
clientes web evita paso
discriminando
por la
Menú lateral configuración
con las regional del
diferentes navegador
líneas de
Buscador bien
producto. El visible
nombre de
cada línea se Área restringida
cambio para
utilizando una distribuidores,
terminología agentes y grandes
clientes
comprensible
profesionales
para el cliente
final
e-Catálogo Imágenes
rotativas de los
acceso productos. El
inmediato al usuario al entrar
catálogo de en la web intuye
productos inmediatamente
que le ofrece la
Gráficos que empresa
transmiten la
imagen de calidad;
las certificaciones

Paso 6: Alojamiento de la web en un servidor

La web se alojó en el mismo servidor que utilizaba la empresa ya que permitía un buen alojamiento,
descarga rápida, base de datos MySQL y ofrecía un buen servicio al cliente, disponible durante 24
horas y 365 días al año, tanto por mail como por teléfono.

SUBMÓDULO 3 205
 Formación para el Trabajo - Sexto Semestre

Paso 7: Posicionamiento y marketing digital

Se analizaron las mejores palabras clave, tanto en español como en inglés, así como el título
que debía llevar cada una de las páginas del sitio y sus metatags. Hoy en día las metatags más
importantes son el título y la denominada «description». El título es el texto que aparece en la parte
superior izquierda del navegador y la metatag «description» es la que aparece debajo del título del
enlace cuando se utilizan los buscadores para localizar información en cualquiera de las páginas
web de un sitio.

El buen trabajo de preparación de las palabras clave, las metatags y del posicionamiento en
general se refleja en el hecho de que la web está altamente posicionada en Google. Si se teclea la
palabra genérica «puertas» en el buscador, la empresa aparece en una de las primeras posiciones
del buscador Google.

Al escribir “puertas” en
el buscador de Google,
puertas San Rafael
aparece como primera
de la lista en
posicionamiento. Los Enlaces de
tres primeros enlaces pago
corresponden a
enlaces de pago

Descripción
aparece debajo
del título. Es un
texto muy importe

También se realizaron una serie de propuestas para la promoción del sitio web en la red, tales
como: dar de alta el sitio web en los directorios de empresa más importantes a nivel internacional
y en directorios del sector, campaña de posicionamiento de pago por clic en Google Adwords,
contenidos en forma de vídeos y su difusión por la red, crear un perfil en Facebook y Twitter, entre
otros.

206 COMUNIDADES VIRTUALES

TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN

MEDICIÓN

Paso 8: Análisis de resultados y mantenimiento

Se insertó la herramienta Google Analytics para conocer no sólo las visitas, sino mucha más
información como: procedencia geográfica, páginas más visitadas, promedio de tiempo de visita,
contenidos más cliqueados, palabras clave utilizadas por los usuarios, etc. Un buen análisis de
estos datos permitirá ir introduciendo mejoras para incrementar la efectividad del sitio; en definitiva
incrementar las ventas y fidelizar los clientes.

Una de las grandes ventajas de haber creado el sitio web con el gestor de contenidos Joomla
es que gran parte del mantenimiento lo puede realizar personal de la empresa sin necesidad
de contar con conocimientos técnicos ni depender del consultor informático para poder realizar
cambios como publicar una nueva ficha de producto o cambiar un texto.

El proyecto de implantación se desarrolló a lo largo de tres meses y los resultados llegaron al

cabo de seis meses, en los que se duplicó el número de visitas y se mejoró el posicionamiento
de la página. Pasó de tener un Page Rank en Google de 1 a 3. El ranking de Alexa es de 76.000
entre todos los sitios web de España. Todo esto se reflejó en un incremento notable de las ventas
originadas a través de la web.

Recuperado de: [Link]

[Link]

SUBMÓDULO 3 207
Este material fue elaborado bajo la coordinación y
supervisión de la Dirección de Planeación Académica
del Colegio de Bachilleres del Estado de Baja California.

Blvd. Anáhuac #936, Centro Cívico, C.P. 21000, Mexicali,

B.C., México.

[Link]