Páginas_web guia didactica.pdf

Guía didáctica
SEXTO SEMESTRE

2
Quirino Ordaz Coppel
Gobernador Constitucional del estado de Sinaloa
Juan Alfonso Mejía López
Secretario de Educación Pública y Cultura
Sergio Mario Arredondo Salas
Director General del Colegio de Bachilleres
del Estado de Sinaloa
Oscar Lara Salazar
Secretaria General del Colegio de Bachilleres
del Estado de Sinaloa
Lydia María López Barraza
Directora Académica
Responsables de compilación:
Profra. Lourdes Guadalupe Lizárraga Delgado
Profra. Paulina Ruiz Sosa
Edición con fines educativos no lucrativos.
Colegio de Bachilleres del Estado de Sinaloa

3
INDICE
Presentación
MOMENTO I
Competencias genéricas, Competencias profesionales básicas y Aprendizajes esperados.
Lecturas y actividades de aprendizaje:
1. Introducción al diseño web,
• Páginas web y sitio web
• Conceptos básicos
• Elementos de una página web
• Estándares de diseño web (W3C)
Evaluación de los aprendizajes
MOMENTO II
1. HTML
• Estructura básica de la web.
• Elementos básicos.
• Maquetación web
• Estilos básicos
• Diseño y usabilidad
MOMENTO III
1. CSS
2. Diseño de página web usando software de aplicación
3. Publicar sitio web
Portafolio de Evidencias
Bibliografía

4
Presentación
Estimados alumnos y alumnas,
Para fortalecer el desempeño académico que desarrollas en cada submódulo de tu
capacitación, ponemos a disposición una guía didáctica con lecturas básicas de los
temas que contribuyen al logro de los aprendizajes y que integran el programa de
estudio conforme a la Nueva Escuela Mexicana.
La guía es un recurso de apoyo adicional para que se trabaje de manera conjunta con
las directrices de tu profesor, lo que te permitirá explorar e indagar cada uno de los
aprendizajes abordados de manera directa en el espacio de clase y en actividades
extra-clase.
Con un lenguaje propio de la cultura juvenil, los contenidos abordados presentan
actividades de aprendizajes que permitirán contrastar situaciones de problemáticas
reales con los conocimientos adquiridos, facilitando el desarrollo de competencias
genéricas y competencias profesionales básicas para el logro del perfil de egreso del
bachillerato.
Encontrarás en el contenido: las competencias genéricas con sus atributos, y
competencias profesionales básicas que desarrollas en el submódulo de la
capacitación, así como los aprendizajes esperados en cada momento. Las lecturas y
actividades de aprendizaje abordados orientan el desarrollo de habilidades y actitudes
valorativas hacia el estudio.
Un apartado destacable es el de evaluación de los aprendizajes, donde de manera
directa participarás en un proceso de reflexión y metacognición de lo aprendido. Esto
permite que te des cuenta de los avances en cada momento y en compañía de tu
profesor y/o profesora conozcan el desempeño y evidencias de aprendizaje que tienes
integradas, lo que orienta a una mejora permanente.
Aprovecha al máximo este recurso didáctico que fue elaborado por tus maestros, para
que seas parte de la generación de jóvenes bachilleres que estamos formando en
COBAES y que se caracterizan por su emprendimiento, perfil competitivo y proactivo
acorde a la dinámica de la sociedad actual.
MC. Sergio Mario Arredondo Salas
Director General

6
MOMENTO I
MÓDULO IV. Software de diseño
Submódulo I. Páginas Web
COMPETENCIAS GENÉRICAS Y ATRIBUTOS
CG 4. Escucha, interpreta y emite mensajes pertinentes en distintos contextos mediante la
utilización de medios, códigos y herramientas apropiados.
CG 4.5. Maneja las tecnologías de la información y la comunicación para obtener información
y expresar ideas.
COMPETENCIAS PROFESIONALES BÁSICAS
CPBTIC 7. Construye sitios web creativas 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
APRENDIZAJES ESPERADOS
Construye una página web utilizando elementos del software de diseño web favoreciendo su
creatividad e innovación, para comunicar información en distintos contextos.
HABILIDADES
- Identifica los elementos básicos de un diseño web.
- Diagrama la estructura de una página web.
ACTITUDES
Se comunica de manera asertiva y empática.

7
Evaluación diagnóstica
1. Los documentos escritos en lenguaje html, publicados en internet, y que pueden ser leídos
mediante un programa navegador por cualquier otro usuario, son documentos denominados:
a) Microsoft Word b) Bloc de notas c) Página Web d) Hipertextos
2. Es el nombre que identifica un sitio web. Tiene que ser único en Internet y fueron creados para
evitar que tuviéramos que recordar las direcciones numéricas de las páginas y servidores web.
a) Dominio b) URL c) Portal d) Servidor
3. Es el protocolo de comunicación utilizado para transmitir las peticiones y archivos a través de
Internet entre el servidor y el navegador.
a) HTTP b) Dominio c) Portal d) Servidor
4. La World wide web, significa que se está hablando de una gran telaraña mundial, cuando
accedemos a una página web que la cual reconoce a dos actores principales denominados
SERVIDOR y CLIENTE
Verdadero Falso
5. Es el servicio en línea que consiste en proveer un espacio en un servidor y se utilizan
habitualmente para páginas personales de poco contenido, estos presentan algunas
limitaciones y restricciones, como no poder usar el dominio propio, poca capacidad y
velocidad. Se refiere al Hosting
a) Dedicado b) Gratuito c) Compartido d) Dominado
6. Son las tres principales etiquetas que le dan la estructura al cogido son:
a) Color, Title, base b) html, body, link c) script, tittle, head d) html, head y body
7. Es el aspecto básico de cualquier página web es:
a)
html>
<body>
</body>
<head>
</head>
</html>
b)
<html>
<head>
</head>
<body>
</body>
</html>
c)
<html>
<Title>
</Title>
<body>
</body>
</html>
d)
<html>
<Style>
</Style>
<body>
</body>
</html>
8. Es uno de los más usados en la programación web. También conocido como el idioma de
los estilos, es decir, el encargado de la estética de la web.
a) HTML b) Power point c) CSS d) JAVA

8
9. Son los tipos de vista que se pueden presentar en DreamWeaver
a) Diseño, Código, Código y diseño,
b) Imprimir, lectura y web
c) Normal, Diseño de página y vista previa
d) Código, Diseño y Web
10. Es conveniente que la página inicial del sitio tenga un nombre especifico, ya que los
navegadores buscan una página con ese nombre cuando se intenta acceder a una URL
genérica,
a) Titulo web b) Hosting c) index.htm o index.html d) document web

9
MOMENTO I.
APRENDIZAJE: Construye una página web, utilizando elementos del software de diseño web,
favoreciendo su creatividad e innovación para comunicar información en distintos contextos.
Lectura 1: Introducción al Diseño Web
Páginas web y sitio
Página Web: Está compuesta por uno o varios documentos
HTML, relacionados entre sí, mediante enlaces o
hipervínculos, que se especifica por una dirección única o
URL, pueden contener otros elementos como imágenes,
sonidos, animaciones, etc. Es parte de un sitio Web y aparte
del HTML se pueden utilizar otros lenguajes
complementarios como PHP, ASP, Javascript.
https://webprogramacion.com/imgs3/175.jpg
Existen dos tipos de página Web, conforme al modo en que se genera su contenido:
Páginas Web estáticas. Este tipo de páginas son solamente informativas, documentales, no
interactivas. Acceden a la ubicación de sus elementos y siguen un orden preconcebido, rígido,
que no permite la interacción con el usuario. Muestran el mismo contenido para todos los
usuarios, no se actualiza a menudo. También son conocidas como páginas planas y son buenas
para mostrar los productos y servicios de un negocio. Por ejemplo, ofertas de algún producto.
Páginas Web dinámicas. Se genera cuando el usuario ingresa a la página web, el cual utiliza un
lenguaje interpretado(como PHP), el cual recibe las solicitudes, las procesa en la base de datos
y genera una respuesta según sean las necesidades del usuario, una de las grandes ventajeas
de este tipo de páginas web es su versatilidad, ya que muestra información personalizada a los
usuarios. Permite la toma de decisiones y muestra selectiva de información en función de criterios
deseados. Por ejemplo: blogs, foros, tiendas, etc
Introducción al Diseño Web:
 Páginas web y sitio web
 Conceptos básicos
 Elementos de una página web
 Estándares de diseño web (W3C)

10
Sitio Web: Permite mantener una comunicación en ambos sentidos y puede atender en línea
necesidades de cientos de usuarios, el sitio web es un conjunto de páginas relacionas entre sí,
alojadas por lo general en un mismo servidor, cada sitio tiene un home page (página de inicio)
siendo el primer documento que presenta ante el usuario, cuando entra al sitio web,
colocando la dirección URL de ese sitio web en un navegador. Todos los sitios web
públicamente accesibles constituyen la gigantesca World Wide Web (www) de información.
Actividad de aprendizaje 1:
a) Realiza una investigación sobre los conceptos: página web y sitio web, para elaborar
el siguiente cuadro descriptivo.
DESCRIPCIÓN
PÁGINA WEB SITIO WEB
ESTÁTICAS DINÁMICAS
Ligas de interés:
o https://definicion.de/pagina-web/
o https://definicion.de/sitio/
https://image.slidesharecdn.com/01
queesunsitioweb-111019123939-
phpapp01/95/diferencia-entre-sitio-
web-y-pgina-web-3-
728.jpg?cb=1319029016

11
Conceptos básicos (dominio, URL, hosting, applets)
Un dominio es el nombre que identifica un sitio web. Tiene que
ser único en Internet. Un solo servidor web puede hospedar
múltiples páginas web con múltiples dominios, pero un dominio
solo puede apuntar a un servidor. Todos los servidores y páginas
de Internet tienen una dirección numérica que se conoce
como dirección IP (Protocolo de Internet).
Los dominios permiten recordar direcciones numéricas de las
paginas web para evitar al usuario tener que aprenderlas y
recordarlas al momento de querer ingresar a ella. De forma que
cuando se escribe en internet el dominio, el servidor DNS
(Servidor de Nombres de Dominio) el proveedor de web hosting
nos proporciona la dirección IP y el navegador nos envía de forma directa a esa dirección
numérica.
https://pxhere.com/es/photo/1448521
Tipos de dominios.
 Dominios Genéricos: (gTLD, siglas de geographical Top Level Domain,)
Son conocidos también como dominios internacionales o globales. Tienen tres letras, y son los
dominios .com (inicialmente previsto para empresas comerciales), .org (inicialmente previsto
para organizaciones) y .net (inicialmente previsto para empresas relacionadas con la
Internet). El dominio más popular es .com que en la actualidad cuenta ya con más de
2.000.000 de dominios registrados.
http://www.cavsi.com/preguntasrespuestas/que-es-un-dominio-generico/
DOMINIOS NO PATROCINADOS
 .biz negocios
 .com comerciales, es el más utilizado
 .edu educativos
 .gov gobierno
 .info informativos
 .int tratados internacionales
 .mil militares
 .name personales
 .net manejo de redes
 .org organizaciones
DOMINIOS PATROCINADOS
• .aero industria aeronáutica
• .cat catalanos
• .mobi dispositivos móviles
• .coop sociedades cooperativas
• .jobs empleos
• .museum museos
• .pro-credenciales profesionales
• .travel viajes

12
Caracteres permitidos en los dominios: Letras de la A a la Z (con la excepción de la ñ), Numero
del 1 al 0, guion medio “-”
Caracteres no permitidos en los dominios: espacios en blanco, acentos, signos de puntuación,
paréntesis (), guion bajo. “_”.
Nota: Un dominio puede tener como mínimo dos caracteres y como máximo 63
DNS, Domain Name System.
Los dominios de Internet son para que sea mucho más
fácil localizar un dispositivo en la red, ya que se recuerda
mejor un nombre de dominio que esta combinación de
cuatro números. Técnicamente cuando digitalizamos en
la barra de direcciones un dominio, por
ejemplo http://www.cobaes.edu.mx, en realidad
buscamos la dirección IP. Este sistema es llamado sistema de nombres de dominio, DNS.
IP: Es la identificación de una página en internet y se compone de cuatro
números que van desde el 0 al 255, por ejemplo; 217.76.130.185.
Es una etiqueta numérica que identifica un interfaz de un dispositivo dentro
de una red que aplica un protocolo IP en modelo OSI. La dirección IP puede ser pública o
privada:
 Pública: núm. único que identifica nuestra red desde el exterior.
 Dominios Territoriales: (ccTLD, siglas de country code Top Level Domains)
También llamados dominios geográficos, son los dominios
mantenidos por cada país. Estos dominios territoriales son
utilizados por las organizaciones y empresas que desean
establecerse en Internet y proteger la identidad de su marca o su
nombre comercial en un país concreto. Los dominios territoriales
tienen sus terminaciones compuestas por 2 letras. Lógicamente,
la extensión .es es la más demanda en España, seguida del .eu,
que identifica a los países europeos.
 .be (Bélgica)
 cc (Islas Cocos)
 .mx (México)
 .pt (Portugal),
 .uk Reyno Unido
 .fr (Francia),
 .de (Alemania)…
https://www.arsys.es/blog/soluciones/dominios/que-
son-los-dominios-territoriales-y-como-se-registran/

13
 Privada: Es un numero único que sirve para identificar a un dispositivo conectado a nuestra
red interna.
Portal: En este sitio web podemos encontrar de forma fácil e integrada una serie de servicios y
recursos, entre los cuales se encuentran buscadores, foros, documentos, aplicaciones, compra
electrónica, etc. Su finalidad es resolver las necesidades de un grupo de personas en
especifico dando acceso a servicios e información de alguna institución privada o pública.
HTTP (Hyper Text Transfer Protocol): Es un protocolo de comunicación que se utiliza para la
transmisión de archivos y peticiones por medio de la internet de un servidor a otro y al navegador.
Su protocolo http:// tiene que ser escrito el inicio de la dirección web. Si por alguna razón no se
teclea este protocolo el navegador lo añade de forma automática.
URL (Universal Resource Location / Localizador de recursos universal): Se trata de una cadena que
nos proporciona una dirección en internet o algún sitio web o algún otro recurso dentro de la
World Wide Web, utilizando el protocolo mediante el cual tiene acceso al sitio o al recurso.
El tipo más común de dirección URL es http://, que proporciona la dirección de Internet de una
página Web. Otros tipos de dirección URL son gopher://, que
proporciona la dirección de Internet de un directorio Gopher,
y ftp://, que proporciona la ubicación de red de un recurso FTP.
Ejemplos: http://www.desenredate.com,
http://www.google.com
Servidor: Máquina conectada a Internet, que, entre otros
servicios, ofrece albergue para páginas web haciendo que estén accesibles desde cualquier
punto de Internet. Los servidores host están conectados las 24 horas del día y todos los días del
año a internet, para cuando el usuario quiera entrar a su página web, solo debe ingresar su
dirección URL.
El servidor debe de disponer de todas las características técnicas que necesitan para
implementar un sitio web, es importante que el proveedor disponga de plataformas variadas
(Linux, Windows, UNIX, etc.) para que de esta forma las aplicaciones a montar en el sitio web
nunca tengan limitantes del sistema operativo.
Hosting: Es el servicio en línea que consiste en proveer un espacio en un servidor para subir, alojar
u hospedar información, imágenes, video o cualquier contenido accesible vía web.

14
Según las necesidades específicas del usuario, puedes escoger sobre los tipos de hosting:
o Hosting Gratuito: se utilizan habitualmente para páginas personales de poco contenido, estos
presentan algunas limitaciones y restricciones, como no poder usar el dominio propio, poca
capacidad y velocidad.
o Hosting Compartido: Es cuando un mismo servidor aloja a varios sitios web y cada cliente
paga el servicio según lo negociado trimestral, semestral o anual.
o Hosting Dedicado: Se refiere a una forma avanzada de alojamiento web en la cual una
empresa alquila o compra un servidor, en el que tiene el control absoluto y es responsabilidad
de la empresa administrarlo, los hostting dedicado pueden ser utilizado solamente para
ofrecer algún servicio de hosting compartido o para guardar únicamente información.
Applets: Es un componente de una aplicación que se ejecuta en el contexto de otro programa,
debe ejecutarse en un contenedor, y no puede ejecutarse de manera independiente, ofrece
información gráfica y en ocasiones interactúa con el usuario que normalmente lleva a cabo una
función muy específica que carece de uso independiente.
a) Elabora un separador de libros el cual contenga los conceptos de la lectura anterior.
b) Elabora tu propio concepto de IP y compártelo con un compañero.
c) Visita al menos una de las dos URL http://www.mon-ip.com/es/mi-ip/ y
https://www.cual-es-mi-ip.net/ para investigar cuál es tu IP actual y anótalo.
IP actual: __________________________________________
Ligas de interés:
o http://www.cavsi.com/preguntasrespuestas/que-es-un-dominio-generico/
o http://www.mon-ip.com/es/mi-ip/
o https://www.cual-es-mi-ip.net/

15
Elementos de una página web
Diariamente nacen cientos de páginas web para atender distintas necesidades de usuarios como
entretenimiento, suministro de información, promoción de intereses e inclusive con fines
comerciales.
Es recomendable que cumpla con ciertos requisitos mínimos, como los que se muestran en la
imagen siguiente:
https://www.cualhost.com/marketing-en-linea/elementos-de-una-pagina-web-exitosa/
Recomendaciones para el diseño de una página web:
 Fuentes: Es importante usar las mismas fuentes, pero llamativas y del mismo tamaño, sencillas
de leer, resaltando secciones interesantes del texto.
 Las imágenes: deben ser tomadas preferentemente por un profesional, pues se recomienda
que no estén pixeladas o desenfocadas. Los formatos más comunes en estos diseños son los
.gif, jpg, png, entre otros
 Imágenes complementarias: Animaciones y movimientos sirven para generar dinamismo, no
debes abusar de ellos podrían sobrecargar la página, sería ideal no sobrepasar el 20% del
total de la página para evitar saturación y distraer de cosas importantes de las que pretende
el diseño o bien sacar al usuario de esta.
 Botones: Se recomiendan prácticos y representativos, así como iconos grandes y vistosos Ya
que facilita la navegación dentro la página web. Es importante mencionar que generalmente
se espera encontrar botones de las redes sociales más comunes para interactuar con
facilidad

16
Elabora en una hoja blanca o en el cuadro de “Mi primera página web”, tu propio diseño,
donde muestres los elementos de una página web. Puedes utilizar recortes y colores.
Ligas de interés:
 https://www.cualhost.com/marketing-en-linea/elementos-de-una-pagina-web-exitosa/
 https://blog.virtualianet.com/diseno-web-los-8-elementos-imprescindibles/
Mi primera página web:

17
Estándares de diseño web (W3C)
Los estándares para un diseño web se establecen para conseguir uniformidad en el desarrollo de
las páginas web. Específicamente W3C es quien
establece estándares para conseguir sitios web
óptimos.
W3C (World Wide Web): Comunidad internacional
donde las organizaciones a tiempo completo y el
público en general trabajan conjuntamente para
desarrollar estándares Web , la misión del W3C es
guiar la Web hacia su máximo potencial.
Desarrolla especificaciones técnicas y directrices
mediante un proceso que ha sido diseñado para
maximizar el consenso sobre el contenido de un
informe técnico, de forma que se pueda asegurar la alta calidad técnica y editorial.
Si estamos aprendiendo sobre tecnología web revisemos algunos conceptos necesarios que
recomienda la W3C:
 “Diseño y Aplicaciones Web: Diseño y Aplicaciones Web incluye a los estándares para la
construcción y representación de las páginas Web, incluyendo HTML5, CSS, SVG, Ajax y otras
tecnologías para las Aplicaciones Web (“WebApps”). Esta sección también incluye sobre
cómo hacer páginas accesibles para personas con discapacidades (WCAG), aplicar
internacionalización y trabajar sobre dispositivos móviles.
 Arquitectura Web: La Arquitectura Web se centra en las tecnologías y principios
fundamentales sobre los que se sostiene la Web, incluyendo URIs y HTTP.
 Web Semántica : El W3C está ayudando en la construcción de una pila de tecnologías que
soporte una "Web de datos", el tipo de datos que se pueden encontrar en las bases de
datos. Uno de los objetivos de una página web es permitir que los equipos conectados a él
hagan su trabajo de forma mucho más rápida e útil, además de desarrollar sistemas que
soporten interacciones de confianza en la red. Una Web Semántica se refiere al formato
W3C en la web de datos enlazados (linked data). Las tecnologías de la Web Semántica
permiten a la gente crear almacenes de datos sobre la Web, construir vocabularios y

18
escribir reglas para manejar los datos. Los datos enlazados obtienen su potencial de otras
tecnologías como lo son: RDF, SPARQL, OWL y SKOS, etc.
 Tecnología XML : Las Tecnologías de XML, incluyendo XML, XQuery, XML Schema, XSLT, XSL-
FO, Intercambio Eficiente de XML (EXI) y otros estándares relacionados.
 Web de los Servicios : La Web de los Servicios se refiere al diseño basado en mensajes que
frecuentemente se encuentra en la Web y en el software empresarial. La Web de los
Servicios se basa en tecnologías como HTTP, XML, SOAP, WSDL, SPARQL, entre otras.
 Web de los Dispositivos : El W3C se centra en tecnologías que permiten el acceso a la Web
desde cualquier lugar, en cualquier momento y a través de cualquier dispositivo. Esto
incluye acceso a la Web desde teléfonos móviles y otros dispositivos móviles, además del
uso de la tecnología Web en electrónica de consumo, impresoras, televisión interactiva,
incluso en automóviles.
 Navegadores y Herramientas de Autor : Los agentes Web pretenden servir a los usuarios.
Este apartado maneja información útil a la hora de diseñar navegadores y herramientas de
autor, así como robots de motores de búsqueda, agregadores y motores de inferencia.”
(W3C, 2019). https://www.w3c.es/estandares/
Investiga y contesta las respuestas de las siguientes preguntas:
1.- ¿Qué son los estándares del diseño web?
______________________________________________________________________________________________
______________________________________________________________________________________________
______________________________________________________________________________________________
______________________________________________________________________________________________
2.- ¿Qué es la W3C?
______________________________________________________________________________________________
______________________________________________________________________________________________
______________________________________________________________________________________________
______________________________________________________________________________________________

19
3.- Describe los conceptos dentro del cuadro:
Diseño y
Aplicaciones
Web
Web
Semántica
Arquitectura
Web:
Tecnología
XML
Web de los
Servicios
Web de los
Dispositivos
Navegadores y
Herramientas de
Autor
Ligas de interés:
 https://es.slideshare.net/dwebslide/estandares-de-diseo-web
 https://www.w3c.es/
 https://www.w3c.es/Consorcio/
 https://www.w3c.es/estandares/

20
Práctica Integradora.
Elabora un separador de libros:
El separador deberá contener un glosario, donde cites 25 conceptos revisados en esta guía
didáctica, durante el momento uno. Una vez que hayas desarrollado los conceptos,
selecciona papel cartulina para que soporte y fórralo con papel Contac, finalmente perfora
la parte superior central para que le insertes un listón. (Como se observa en las imágenes
siguientes). Es válido que hagas tu propio diseño de presentación.
https:/ /prettyrobles.wordpress.com/2011/02/22/separadores-de-libros/

21
Autoevaluación
En el siguiente cuadro te invitamos a que registres las evidencias que fuiste desarrollando durante
el momento II y reflexiona sobre cómo lo lograste y lo que puedes hacer para mejorar:
Aprendizajes
esperados
Evidencias
¿Cómo lo
lograste?
¿Qué puedo
hacer para
mejorar?
De las evidencias mencionadas en el cuadro anterior, encierra en un círculo las que forman parte
de tu portafolio.
A lo largo del momento trabajaste las siguientes competencias genéricas y atributos:
Competencias genéricas Atributos
A continuación se presenta una serie de preguntas, con la intención de que reflexiones en
torno a las Competencias que desarrollaste hasta el momento:
1. Reflexiona sobre la manera en que el manejo de la tecnología te puede ayudar a expresar
ideas:
2. Describe un problema o reto que puedas solucionar a través del adecuado uso de la
tecnología:
3. ¿Qué actividades te parecieron de mayor y menor interés de las propuestas y/o realizadas
en el Momento I?

22
Coevaluación
La evaluación del trabajo entre pares, es decir, entre compañeros es formativa porque permite
revisar el grado de participación, compromiso y desempeño, lo que orienta un ejercicio de
mejora de los aprendizajes. La Coevaluación además fomenta la práctica de valores como el
respeto, honestidad y empatía.
Con al apoyo de tu profesor (a), selecciona una actividad de aprendizaje que hayas trabajado
colaborativamente. En una escala del 0 a 4 otorga un puntaje a cada integrante del equipo
según su desempeño:
4= Destacado, 3=Satisfactorio, 2= Regular, 1=Necesita mejorar, 0= No trabajó.
Actividad de aprendizaje: ____________________________________________________________________
Competencia (s) que desarrollan: _____________________________________________________________
______________________________________________________________________________________________
Criterios a evaluar
Integrantes del equipo Evaluación general
de la actividad
1 2 3 4 5
Escribe el nombre de los integrantes del equipo:
1.
2.
3.
4.
5.

23
Registra tu evaluación del Momento I
Los docentes califican los aprendizajes adquiridos en cada momento (parcial), considerando tres
aspectos:
Portafolio de evidencias 40%
Examen parcial 40%
Actividades complementarias 20%
También recuerda que para acreditar una asignatura debes cubrir el 80% de asistencia a clases,
es importante que en cada parcial revises tus asistencias.
Valora y registra tus resultados académicos del momento con la ayuda del docente.
Aspecto de evaluación ¿En qué consiste? ¿Qué resultado tienes?
Portafolio de evidencias
Son las evidencias que indicó
tu profesor para que
desarrollaras durante el
momento. Deben ser mínimo
3 evidencias.
Examen parcial
Evalúa tus conocimientos y
aprendizajes del momento.
Actividades
complementarias
Incluye tu participación,
tareas, disciplina,
responsabilidad y
proactividad dentro y fuera
del aula.
Asistencia
Registro de asistencia a clase
que tiene tu profesor durante
el momento.
Después de registrar tus avances y resultados del momento, reflexiona sobre: ¿cómo has
participado?, ¿cuál ha sido tu desempeño?, ¿qué calificación obtienes del momento? y ¿cómo
puedes mejorar?
Acércate a tu profesor, tutor de grupo u orientador educativo para compartir dudas que se te
presenten.

25
MOMENTO III.
SUBMÓDULO I. Páginas Web
H T M L.
1. Estructura básica de la web: HTML, head, body
2. Elementos básicos: Títulos, párrafos, imágenes, hipervínculos, videos.
3. Maquetación web: Tablas, divs, clases, menús.
4. Estilos básicos: Tamaño, colores, fuentes
5. Diseño y usabilidad: Márgenes y posiciones de los elementos
Lectura 1.- HTML
Estructura básica de la web: HTML, head, body
Como se explicó en el momento anterior HTML es un lenguaje de programación para el diseño
de páginas web y su característica principal es que se genera desde cero, en base a
instrucciones que se le dan a la computadora para que pueda crear algo, en este caso la
página web, estas instrucciones están basadas en códigos de palabras llamadas etiquetas, las
cuales, cada una tiene una función específica en el código, como el definir el título, los colores,
los tamaños de los textos, acomodar los párrafos, etc. Y cada etiqueta tiene su importancia en
el código, se deben colocar de forma jerárquica según su función y las necesidades que
presente el usuario para el diseño de la página web.
Las tres principales etiquetas que le dan la estructura al cogido son: html, head y body, estas le
dan el encuadre a la página y aquí se te explicara cada una. Antes de eso es importante
mencionar que todas las etiquetas van dentro de este símbolo < > y las etiquetas deben abrirse
y cerrarse en cada instrucción, para abrir una instrucción del código solo colcas la etiqueta
dentro del símbolo y para cerrar agregas una diagonal, ejemplo:
Un documento creado en HTML está contenido dentro de la etiqueta <html></html> y dentro
de la etiqueta <html>, encontramos dos subdivisiones, la cabecera, delimitada por las etiquetas
<html> instrucción abierta
</html> instrucción cerrada

26
<head></head> y el cuerpo, delimitado por las etiquetas <body></body>. Por lo tanto, el
aspecto básico de cualquier página web, es el siguiente:
<html>
<html>
<head>
</head>
<body>
</body>
</html>
La etiqueta <head> contiene información sobre la página. Por ejemplo, contiene etiquetas que
pueden decir de qué trata la página, el título que debe de mostrar en la barra del navegador, o
código javascript y estilos, que pueden estar en el propio encabezado o como enlaces a otros
archivos. Normalmente, lo que contiene esta etiqueta no se muestra en el navegador, es una
etiqueta que contiene declaraciones sobre la página, pero no contenido propiamente dicho
como texto o imágenes.
Las etiquetas que pueden ir dentro de <head> son:
<title>
<style>
<base>
<link>
<meta>
<script>
<noscript>.
Obligatoriamente una página de html debe de contener la etiqueta <title></title>, que contiene
el título de la página, que es lo que se ve en la barra de título del navegador, como un el título
puede ser "Mi primera página" y se colocaría dentro de las etiquetas <title> “Mi primera página”
</title>

27
En el <body> encontramos el contenido de la página, lo que se ve a través del navegador: texto,
imágenes, enlaces, tablas, etc... Por lo tanto, dentro del <body> pueden ir la gran mayoría de las
etiquetas HTML. El texto dentro de la etiqueta <body> debe estar, principalmente, dentro de
párrafos y en HTML, los párrafos se identifican con la etiqueta <p></p>. Dentro de los párrafos
colocaremos texto e imágenes, y algunas etiquetas que nos permitan dar formato al texto. A su
vez, dentro del <body>, disponemos de encabezados que nos permiten organizar los títulos o
rótulos del texto. Los encabezados van desde el <h1></h1> de mayor tamaño, al <h6></h6>, el
más pequeño. Por ejemplo, utilizaríamos un <h1> para poner el título principal de la página, <h2>
para los subtítulos de los textos, <h3> para la información, etc. (Aula clic, s.f.)
Actividades de aprendizaje.
Actividad. - Elabora un glosario con las etiquetas necesarias para la elaboración de una página
web, donde especifiques la etiqueta y su uso en el código.
Como se muestra en el
ejemplo, así serían los
tamaños de los textos
según cada etiqueta de
<h1> hasta el <h6>

28
Elementos básicos: Títulos, párrafos, imágenes, hipervínculos, videos.
Una página web se caracteriza por su información escrita pero su mayor atracción son sus
contenidos multimedia, como las imágenes, videos, gif, sonidos e hipervínculos. Es importante
tener en cuenta estas características al momento de diseñar una página web.
Cada uno de los elementos mencionados anteriormente con llevan al uso de una instrucción
por medio de etiquetas, que aquí se te explicaran.
Párrafos.
En HTML, los párrafos se identifican con la etiqueta <p></p>. Dentro de los párrafos colocaremos
texto e imágenes, y algunas etiquetas que nos permitan dar formato al texto. Dentro de un
párrafo no debe haber otros párrafos anidados.
A su vez, dentro del <body>, disponemos de encabezados que nos permiten organizar los títulos
o rótulos del texto. Los encabezados van desde el <h1></h1> de mayor tamaño, al <h6></h6>, el
más pequeño. Por ejemplo, utilizaríamos un <h1> para poner el rótulo principal de la página, <h2>
para los títulos de los apartados, <h3> para los apartados de segundo nivel, etc. El propio texto
de cada apartado iría fuera del encabezado contenido en párrafos <p></p> u otras etiquetas.
Es importante recordar que cada etiqueta <p></p> lleva implícito un salto de línea.
La etiqueta <p> es de tipo bloque, es decir, por defecto ocupa una línea completa en la página
web. Además, también incluye un margen superior e inferior. Por ejemplo, si escribimos dos
párrafos en la misma línea se mostrará de la siguiente forma:
Si el contenido del párrafo no cabe en una línea será el navegador web quien lo divida en varias
líneas según el ancho disponible. Por lo tanto, el número de líneas que ocupe un párrafo
dependerá del ancho disponible. (Aula clic, s.f.)
<p>Un párrafo de texto </p><p>Otro párrafo.</a >
Párrafo uno
Párrafo dos
.

29
Imágenes.
Las imágenes son un elemento esencial en las páginas web. Hasta la versión 5 de HTML se
utilizaba la etiqueta <img> para incluirlas en una página web. Pero debido a la necesidad de
crear páginas web que se adapten a dispositivos de diferente tamaño se ha incorporado la
etiqueta <picture>.
Antes de ver cómo incluir imágenes en una página web conviene distinguir los diferentes tipos
de imágenes que existen, como son mapas de bits, vectoriales y generadas dinámicamente.
Las imágenes más comunes son las de mapa de bits que están formadas por puntos de colores,
por ejemplo, una cámara de fotos digital utiliza imágenes de este tipo, los tipos de archivos más
usados son .jpg, y .png, también se utilizan mucho para gráficos y animaciones las de tipo .gif,
para crear imágenes de mapa de bits puedes utilizar programas como Photoshop y Gimp.
Las imágenes vectoriales están definidas por fórmulas matemáticas en base a vectores y
permiten ampliarlas sin perder resolución. Suelen ser gráficos, esquemas, logos, etc. Uno de los
tipos de archivos usados en la web son los. svg. Para crear imágenes vectoriales se utilizan
programas como CorelDraw, Illustrador, etc.
Con la etiqueta <img> representamos imágenes en una página web. Esta etiqueta no tiene
etiqueta de cierre, se cierra con el simbolo >, aunque también se puede cerrar con />. Para
indicar el origen de la imagen se utiliza el atributo src="ruta_imagen". Por ejemplo:
La etiqueta <picture> es la nueva manera de insertar imágenes en una página web de una
forma más flexible que con la etiqueta <img> que ha venido usándose. La etiqueta <picture> es
preferible sobre todo si queremos diseñar páginas web que se adapten a todo tipo de pantallas.
Ya que permite mostrar diferentes imágenes en función de varios parámetros, como las
dimensiones de la ventana, orientación de la ventana, tipo de imagen y resolución del
dispositivo. (Aula clic, s.f.)
<img src="gráficos/logo_cobaes.jpg"/>
que produce el siguiente resultado

30
Hipervínculos.
Un hipervínculo Son un elemento muy común en cualquier página web, de hecho, podríamos
decir que el hiperenlace o hipertexto es la instrucción o etiqueta más importante del lenguaje
HTML como se desprende del propio nombre (Hyper Text Markup Lenguage).
Un hipervínculo se escribe con la etiqueta <a> y permite ir a un recurso de internet designado
por su dirección de internet (URL). El recurso más usual es una página web, pero también puede
ser un archivo de imagen, vídeo, dirección email, etc.
Un hipervínculo tiene dos partes fundamentales, el destino y el elemento que activa el enlace, la
forma más usual de utilizar la etiqueta <a> es para enlazar con otra página web mediante un
texto, por ejemplo:
Visita Cobaes
El código correspondiente es: <a href= "http://www.cobaes.edu.mx">Visita Cobaes</a>
El elemento que activa el enlace es el texto “Visita Cobaes” que al ser pulsado nos lleva al
destino del hiperenlace. El destino se indica con el atributo href que en este caso es una
dirección de internet (URL). Al colocar el cursor en el texto del hiperenlace el cursor toma la
forma de una mano para indicarnos que se trata de un hipervínculo o podemos distinguirlo por
el diseño del texto ya que automáticamente se coloca el texto de color azul y se subraya.
También es frecuente que el elemento que activa el enlace sea una imagen, como en el
siguiente ejemplo:
El código correspondiente es:
<ahref="http ://www.cobaes.edu.mx"><imgsrc="comunes/logo_cobaes.jpg"/></a>

31
Otra forma de nombrar un hipervínculo es hiperenlace o hipertexto, y si estamos en un contexto
que se habla de Internet también se les puede llamar simplemente enlace o vínculo. (Aula clic,
s.f.)
Videos
La etiqueta vídeo incrusta un vídeo en una página web, dentro de la etiqueta se debe
especificar la fuente del vídeo mediante la etiqueta source, por ejemplo:
<video controls>
<source src="video1.mp4" type="video/mp4">
Formato de vídeo no soportado.
</video>
El atributo controls hace que aparezca una barra con los controles para arrancar/parar la
reproducción, control del volumen, etc. Antes del cierre de la etiqueta </video> se puede
escribir un texto que aparecerá si el navegador no es capaz de reproducir el formato de vídeo.
Aunque algunos navegadores no lo muestran y muestran un mensaje propio como "Origen no
válido".
Pueden aparecer tantas etiquetas source como desees, lo normal es que cada una de ellas
contenga el vídeo en un formato diferente. El navegador intentará reproducir la primera etiqueta
source y si no puede lo intentará con las siguientes. De esta forma podemos aumentar las
posibilidades de que el vídeo sea reproducido en todos los navegadores. Lo normal, es colocar
primero el formato preferido por nosotros, por ejemplo, ogg, y a continuación los formatos más
estándares, por ejemplo, mp4. (Aula clic, s.f.)
Actividad -. Coloca en cada cuadro las etiquetas para insertar imágenes y videos en una página
web, y coloca las diferentes extensiones de las imágenes que se pueden utilizar.
Etiquetas para imágenes en
HTML.
Etiquetas para videos en
HTML.
Extensiones de imágenes.

32
Maquetación web: Tablas, divs, clases, menús.
Tablas.
Las tablas nos permiten organizar la información en filas y columnas. Cada fila se divide en
celdas. La información se introduce en las celdas. Una columna está formada por las celdas
agrupadas verticalmente, en HTML no existe una etiqueta para definir columnas. Las tablas se
definen en base a las filas y a las celdas, como veremos a continuación.
La etiqueta <table> y su correspondiente etiqueta de cierre </table> definen la tabla. Entre
ambas etiquetas se escriben las etiquetas de fila <tr> y </tr> y dentro de las filas las etiquetas de
celda <td> y </td>, entre estas se escribe el contenido de la celda que puede ser cualquier
etiqueta de HTML o directamente un texto. Por lo tanto, la tabla más sencilla con una sola celda
sería esta:
Como decíamos antes, no existe una etiqueta para definir las columnas, en su lugar, el número
de celdas define el número de columnas. Todas las filas deben tener el mismo número de celdas.
Por ejemplo, una tabla con tres filas y tres columnas como se muestra a continuación, se necesita
el siguiente código. (Aula clic, s.f.)
Aquí se muestra la tabla como se verá en la página web, es decir el producto final, pero para
lograr esto se necesita un código con la etiqueta <td> que se mencionó anteriormente.
Alumnos Apellido celular
Juan Luis Rubio 66725415
Ana Maria Lopez 66232150
<table>
< >
tr
>
<td>Celda 1.1.</td
</tr>
</table>

33
En el siguiente cuadro podrás ver y analizar el código que se requiere escribir en HTML para lograr
la tabla anterior.
Divs
La etiqueta div no es más que un contenedor para otras etiquetas. Estos son los atributos más
importantes de la etiqueta div:
• id - define una id para hacer referencia el div vía javascript
• title - muestra un título del elemento
• style - define estilo vía CSS inline
• height - altura del div. Es recomendable usar CSS
• width - ancho del div. Es recomendable usa CSS
<table>
<tr>
<td> Alumnos</td>
<td> Juan Luis</td>
<td> Ana Maria</td>
</tr>
<tr>
<td> Apellido</td>
<td> Rubio </td>
<td> Lopez </td>
</tr>
<tr>
<td> Celular </td>
<td> 66725415 </td>
<td> 66232150 </td>
</tr>

34
La etiqueta div es más fácil de usar que la etiqueta table, por eso es recomendable que la utilices
cada vez que la necesites. (tutorialehtml, s.f.)
A continuación, podremos observar el código que nos genera un menú en la parte superior de
la página, creado con la etiqueta div.
Actividad. -. A continuación, escribe las líneas de código para crear una página con una tabla
de 3 columnas y 4 filas y con dos etiquetas div que digan menú y contacto.
_____________________________________________________________________________________________
_____________________________________________________________________________________________
_____________________________________________________________________________________________
_____________________________________________________________________________________________
Estilos básicos: Tamaño, colores, fuentes
Tamaño
Como se explicó anteriormente dentro del <body>, se colocará la información que deseamos
tenga nuestra página, entre títulos, subtítulos y texto en párrafos, los cuales deben tener cierto
formato, como el tamaño, color y tipo de letra, para ellos disponemos de encabezados que nos
permiten organizar los títulos o rótulos del texto. Los encabezados van desde el <h1></h1> de
mayor tamaño, al <h6></h6>, el más pequeño. Por ejemplo, utilizaríamos un <h1> para poner el
título principal de la página, <h2> para los subtítulos de los textos, <h3> para la información, etc.
Página principal Menú contacto
<div id="my_menu" align="right">
<a href="#">Pagina principal</a> | <a href="#">Menú</a> | <a href="#">contacto</a>
</div>

35
Colores
Los textos son importantes manejarlos llamativos para el diseño de una página web, claro que
también para elegir un tono de color para el texto se debe utilizar un código y cada color tiene
su propio código, como por ejemplo el color café tiene como código #a52a2a, el color verde
tiene diferentes tonalidades de verde y cada tono así como en toda la gama de colores varían
los códigos según el tipo de color y la variante del mismo, podemos tener como código los
siguientes tres en la gama de verdes #ADFF2F, #32CD32, #228B22.
Recomendaciones importantes al momento de elegir el color para el diseño de la página web.
Probablemente alguna vez te has preguntado por qué la mayoría de las páginas web que hay
en internet tienen un fondo claro y no negro. De hecho, las páginas que tienen un fondo negro
suelen quedar peor. Esto se debe al carácter expansivo de los colores, no se verá igual un texto
sobre fondo negro que blanco. El texto sobre fondo blanco es más legible y por lo tanto el lector
debe forzar menos la vista, sintiéndose agradecido. Esto también lo podemos ver en colores
claros y oscuros, no es algo que suceda únicamente en blanco y negro.
Armonía: Crear una gama de colores para nuestra web que esté compuesta por colores de la
misma gama o tono.
Como se muestra en el
ejemplo, así serían los
tamaños de los textos
según cada etiqueta de
<h1> hasta el <h6>

36
Contraste: Combinar diferentes colores para crear una gama como, por ejemplo, claros y
oscuros, cálidos y fríos, etc. Es obvio que en esta imagen cada casilla nos está expresando una
idea diferente.
fuente
La etiqueta <font> es usada para modificar el tamaño el color y la fuente del texto. Utiliza los
atributos "size", "color" y "face" para personalizar tu texto y la etiqueta <basefont> para establecer
el color, tamaño y estilo de todo un texto. A continuación, se mostrarán los diferentes códigos
para modificar las diferentes etiquetas de fuente.
Para establecer el tamaño de la fuente, usamos el atributo size. Se aceptan valores entre 1 (el
más pequeño) y 7 (el más grande). El valor estándar de un texto es 3.
<p><font size="5">Este es el tamaño de fuente 5</font></p>
Para establecer el color del texto, usaremos simplemente color y el código del color que
deseamos, utilizando la tabla de colores de la lectura anterior. (tutorialehtml, s.f.)
<font color="#990000">Este texto es #990000</font>
<br />
<font color="red">Este texto es rojo</font>
Este texto es #990000 Este
texto es rojo
Este es el tamaño de fuente 5

37
Elige un estilo de letra usando el atributo, face de la etiqueta font. Podrás escoger cualquier
fuente que tengas instalado, pero escoge la fuente con cuidado porque el usuario que visite tu
página no podrá ver la fuente si no tiene instalada tu misma fuente. Verá en cambio la fuente
por defecto, que es Times New Roman. La solución será escoger varias fuentes que sean
parecidas. (tutorialehtml, s.f.)
<p><font face="Bookman Old Style, Book Antiqua, Garamond">Este párrafo ha formateado su
fuente con la etiqueta font!</font><p>
Este párrafo ha formateado su fuente con la etiqueta font!
Para tener un texto en negrita usaremos la etiqueta <b> y para colocar una palabra o texto
tachado puede hacerse usando la etiqueta <del>, como se mostrará a continuación su código
y visualización. (tutorialehtml, s.f.)
La propiedad text-align define la alineación horizontal de un texto. Se pueden aplicar los
siguientes valores:
- left, texto alineado a la izquierda. text-align: left
- right, texto alineado a la derecha.
- center, texto alineado al centro de su contenedor, dejando igual espacio a la derecha
que a la izquierda en cada línea.
- justify, texto justificado, es decir, el texto se alinea a la derecha y a la izquierda en cada línea,
para ello se introducen espacios en blanco entre las palabras. Con la propiedad text-justify,
actualmente en estudio, se podrá elegir variar el espacio entre caracteres o entre palabras
<b>Este texto está en negrita </b >
<p>Este texto está <del>cortado</del>por una línea!</p >
Este texto está cortado por una línea!
Este texto está en negrita

38
Al alinear el texto con la propiedad text-align, las palabras nunca se cortan con un guion al llegar
al final de la línea, como se puede hacer manualmente, y de forma automática en
procesadores de texto como Microsoft Word. (Aula clic, s.f.)
Actividad. -. Diseña un código en la siguiente línea para una página web, donde coloques tu
biografía incorporando tipos de letras, negritas, color, tamaño de letra y acomodo de mínimo 3
párrafos.
Actividad. - Asiste al centro de cómputo y redacta el mismo código de la actividad anterior en
el bloc de notas y guárdalo con la extensión .html, para su visualización en cualquier navegador.
Diseño y usabilidad: Márgenes y posiciones de los elementos
Márgenes
Una página web necesita tener una orden de su contenido, para que visualmente sea
agradable para los usuarios, para ello es importante el manejo de márgenes y se emplean
capas, las cuales que hacen es que los contenidos de una página web se ubiquen en el sitio
que el diseñador desea.
Las capas, pueden ser dimensionadas empleando los atributos que definen el ancho y la altura
de las capas. Sin embargo, el empleo de otros atributos puede hacer que el ancho y la altura
finales se vea modificado.
El tamaño de las capas en CSS se fija mediante los atributos “width” (ancho) y “height” (alto),
empleando para ello cualquiera de las unidades que están permitidas.
De no marcarse estas dimensiones, las capas adquieren las dimensiones del contenido. Sin
embargo, esto puede verse afectado por la aplicación de tres atributos de las capas: márgenes,
relleno y bordes.

39
Los márgenes son el espacio que hay entre la capa y cualquier objeto adyacente. El borde es
la línea que delimita la capa. El relleno, es el espacio entre el borde de la capa y el contenido.
Cada capa tiene cuatro márgenes, los que por defecto tienen un valor cero. En el código CSS,
el margen se establece mediante el atributo “margin”, el cual es seguido de un guion (sin dejar
espacio) y el lado de la capa al cual se le determina el margen. Como se muestra en el siguiente
código. (Fernandez, 2018)
/* El siguiente es el método natural de establecer los márgenes */
#identificador
{
margin-top: 10px; margin-
right: 10px; margin-bottom:
10px; margin-left: 10px;
}
/* Su forma abreviada sería la siguiente: */
#identificador { margin: 10px; }
Posiciones
En lo que se conoce como posicionamiento CSS, el atributo de hojas de estilo en cascada que
más importancia tiene es la posición.
 position: static es el valor predeterminado del atributo y el posicionamiento normal de los
elementos en la página. Quiere decir que los elementos se colocarán según el flujo
normal del HTML, es decir, según estén escritos en el propio código HTML. Por decirlo de
otra manera, static no provoca ningún posicionamiento especial de los elementos y por
tanto, los atributos top, left, right y bottom no se tendrán en cuenta.
<div style="position: static; background-color: #ff9; padding: 10px; width: 300px;">Esto es
una capa con posicionamiento estático</div>

40
 Position: absolute: El valor absoluto en el atributo position permite posicionar elementos
de manera absoluta, esto es de manera definida por valores de los atributos top, left,
bottom y right, que indican la distancia con respecto a un punto. Las capas o
elementos con posicionamiento absoluto quedan aparte del flujo normal del HTML,
quiere decir esto que no se afectan por el lugar donde aparezcan en el código HTML y
tampoco afectan ellas a otros elementos que sí que formen parte del flujo normal del
HTML.
Los valores top, left, bottom y right se expresan con unidades CSS y son una distancia con
respecto al primer elemento contenedor que tenga un valor de position distinto de static. Si todos
los contenedores donde esté la capa posicionada con position absoluto (todos sus padres hasta
llegar a BODY) son static, simplemente se posiciona con respecto al lado superior de la página,
para el caso de top, el inferior para bottom, del lado izquierdo para left o el derecho, en el caso
de utilizar right.
Veamos el siguiente código HTML en el que hemos preparado varias capas con position
absoluto, pero con distintas características:
<div style="position: absolute; width: 100px; height: 20px; padding: 10px; background-color: #ddf;
bottom: 10px; right: 10px;">Posicionamiento absoluto con atributos bottom y right</div>
 Position: relative: El valor relative en el atributo position indica que la capa sí forma parte
del flujo normal de elementos de la página, por lo que su posición dependerá del lugar
donde esté en el código y el flujo HTML. Además, las capas con posicionamiento
relative, admiten los valores top y left para definir la distancia a la que se colocan con
respecto al punto donde esté en ese momento el flujo normal del HTML. Como afectan
al mencionado flujo del HTML, los elementos colocados después de las capas relative,
tendrán en cuenta sus dimensiones para continuar el flujo y saber dónde colocarse. Sin
embargo, no se tendrá en cuenta los top y left configurados.
<div style="position: absolute; width: 300px; height: 140px; top: 100px; left: 30px; background color:
#ff8800; color: #fff; padding: 15px;z-index: 2;"> </div> Esta capa tiene posicionamiento absoluto

41
Lo más común para la maquetación web es decir para el orden de los elementos de una página
web es utilizar el posicionamiento static, pero el posicionamiento absoluto, junto con el
posicionamiento fixed, e incluso relative, pueden ser muy útiles para diseños más complejos,
donde se requiera una mayor precisión en la colocación de los distintos elementos o las capas.
(Alvarez, 2009)
Actividad. - Elabora una página web en HTML destinado para la escuela con las siguientes
indicaciones:
1.-página principal con el nombre de la página, un logotipo y un botón de entrada
2.- segunda página con un menú de las materias que cursas con un hipervínculo a otra página
donde colocaras información sobre un tema de esa materia.
3.- Todas las páginas con fondo, edición de texto, imágenes, márgenes, hipervínculos y divs.
<h1>Hola</h1>
<div style="background-color: #606; color:#ffc; padding:10px; text-align:
center; width: 300px;">Hola esto es una prueba</div>
<div style="position: relative; width: 300px; padding: 10px; background-color:
#066; color:#ffc; top:100px; left: 30px;">capa de posicionamiento relative<br>Se
tiene en cuenta esta capa para posicionar las siguientes.</div>

42
1. Forma equipos de tres integrantes
2. Entre los integrantes del equipo busca algún tema o empresa para realizar una página
web.
3. Elabora en tu cuaderno las pantallas que vas a elaborar.
4. Con la ayuda de tus compañeros de equipo elabora la página web utilizando HTML del
tema seleccionado por el equipo, la página web deberá contar con lo siguiente:
 Texto
 Imágenes
 Video
 Hipervínculos
 Div
 Tablas
5. Una vez terminada la pagina envíala vía correo electrónico a tus compañeros de clases
y maestro.
Ligas de interés:
 https://www.youtube.com/watch?v=av_PL4_jz1I
 https://www.youtube.com/watch?v=cqMfPS8jPys
 https://www.youtube.com/watch?v=rbuYtrNUxg4
 https://www.youtube.com/watch?v=yJcoqOBklK4

43
Autoevaluación
el momento II y reflexiona sobre cómo lo lograste y lo que puedes hacer para mejorar:
Aprendizajes
esperados
Evidencias
¿Cómo lo
lograste?
¿Qué puedo
hacer para
mejorar?
De las evidencias mencionadas en el cuadro anterior, encierra en un círculo las que forman parte
de tu portafolio.
A continuación se presenta una serie de preguntas, con la intención de que reflexiones en
torno a las Competencias que desarrollaste hasta el momento:
1. ¿Qué actividades te parecieron de mayor y menor interés de las propuestas y/o
realizadas en el Momento II?
2. Al trabajar en equipos: ¿De qué manera portaste tus habilidades, valores y
destrezas para lograr los objetivos del equipo al participar en una actividad?
3. ¿Participaste dando tu punto de vista a tus compañeros y tomaste en cuenta la opinión
de cada uno de ellos?

44
Coevaluación
La evaluación del trabajo entre pares, es decir, entre compañeros es formativa porque permite
revisar el grado de participación, compromiso y desempeño, lo que orienta un ejercicio de
mejora de los aprendizajes. La Coevaluación además fomenta la práctica de valores como el
respeto, honestidad y empatía.
Con al apoyo de tu profesor (a), selecciona una actividad de aprendizaje que hayas trabajado
colaborativamente. En una escala del 0 a 4 otorga un puntaje a cada integrante del equipo
según su desempeño:
4= Destacado, 3=Satisfactorio, 2= Regular, 1=Necesita mejorar, 0= No trabajó.
Actividad de aprendizaje: ____________________________________________________________________
Competencia (s) que desarrollan: _____________________________________________________________
______________________________________________________________________________________________
Criterios a evaluar
Integrantes del equipo Evaluación general
de la actividad
1 2 3 4 5
Escribe el nombre de los integrantes del equipo:
1.
2.
3.
4.
5.

45
Registra tu evaluación del Momento II
Los docentes califican los aprendizajes adquiridos en cada momento (parcial), considerando tres
aspectos:
Portafolio de evidencias 40%
Examen parcial 40%
Actividades complementarias 20%
También recuerda que para acreditar una asignatura debes cubrir el 80% de asistencia a clases,
es importante que en cada parcial revises tus asistencias.
Valora y registra tus resultados académicos del momento con la ayuda del docente.
Aspecto de evaluación ¿En qué consiste? ¿Qué resultado tienes?
Portafolio de evidencias
Son las evidencias que indicó
tu profesor para que
desarrollaras durante el
momento. Deben ser mínimo
3 evidencias.
Examen parcial
Evalúa tus conocimientos y
aprendizajes del momento.
Actividades
complementarias
Incluye tu participación,
tareas, disciplina,
responsabilidad y
proactividad dentro y fuera
del aula.
Asistencia
Registro de asistencia a clase
que tiene tu profesor durante
el momento.
Después de registrar tus avances y resultados del momento, reflexiona sobre: ¿cómo has
participado?, ¿cuál ha sido tu desempeño?, ¿qué calificación obtienes del momento? y ¿cómo
puedes mejorar?
Acércate a tu profesor, tutor de grupo u orientador educativo para compartir dudas que se te
presenten.

47
MOMENTO III
MÓDULO IV. Software de diseño
COMPETENCIAS GENÉRICAS Y ATRIBUTOS
CG. 5. Desarrolla innovaciones y propone soluciones a problemas a partir de métodos
establecidos.
CG. 5.6. Utiliza las tecnologías de la información y comunicación para procesar e interpretar
información.
CG. 8. Participa y colabora de manera efectiva en equipos diversos.
CG. 8.1
COMPETENCIAS PROFESIONALES BÁSICAS
CPBTIC 7. Construye sitios web creativas 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
APRENDIZAJES ESPERADOS
Construye una página web utilizando elementos del software de diseño web favoreciendo su
creatividad e innovación, para comunicar información en distintos contextos.
HABILIDADES
Analiza los elementos básicos de un lenguaje de creación de páginas web (CSS)
Selecciona software de aplicación para crear páginas web
Experimenta la creación de una página web con software de aplicación y publicación gratuita,
ACTITUDES
Afronta retos asumiendo la frustración como parte de un proceso

48
MOMENTO III
Lectura 1.- Diseño de página web usando software de aplicación
CSS
El CSS refiere al acrónimo de Cascading Stylesheets (Hojas de estilo en cascada), que junto con
HTML, JavaScript y el PHP uno de los más usados en la programación web. CSS también
conocido como el idioma de los estilos, es decir, el encargado de la estética de la web,
Es en cascada porque se aplica de arriba abajo (herencia), la página web es en realidad un
documento de texto que se escribe el código HTML por otro lado el código CSS que unidos
permiten darle forma, color, etc. a una página. Es decir, con HTML damos contenido y con CSS
formato.
https://lenguajecss.com/p/css/introduccion/que-es-css
El lenguaje CSS está desarrollado por W3C, igual que el lenguaje HTML, y tiene más de 200
atributos que van creciendo en cada nuevo nivel.
Algunos elementos para dar estilos a párrafos y títulos:
Etiqueta Significado Resultado
<p align="center"> …
</p>
Justifica el texto del párrafo al
centro
Alineación centrada
<p align="left"> … </p> Justifica el texto del párrafo a la
izquierda
Alineación a la izquierda
Diseño de página web usando software de aplicación

49
<p align="right"> … </p> Justifica el texto del párrafo a la
derecha
Alineación a la derecha
<p align="justify"> … </p> Justifica el texto del párrafo a
ambos márgenes.
Es un párrafo que se
encuentra justificado a
ambos lados, en una página
web.
<b> … </b> Las etiquetas <b> y </b> definen un
texto en negrita.
Soy un texto en negrita
<i> … </i> Representa el texto en cursiva. Estoy ladeado
<u> … </u> Para subrayar el texto Subrayado
<s> … </s> Para tachar un texto Tachado
<sup> … </sup> Letra Superíndice E=mc2
<sub> … </sub> Letra Subíndice aj=bj+1
<br> Cambio de línea Simple salto de línea.
<hr> Barra horizontal
<strong> … </strong> Resalta una palabra o grupo de
palabras.
Hay cosas importantes.
<Font size = ?> … </font> Coloca tamaño de letra del 1 a 7
<Font face = ?> …
</font>
Coloca el tipo de letra, por ejemplo:
arial, verdana, times new roman,
etc.
<Font color = ?> …
</font>
Configura el color, usando valores
hexadecimales o nombre directo
(blue, green, etc).
<cite> … </cite> Para colocar una cita. Esta frase no es mía.
<body
bgcolor="#FF0000">
</body>
Para definir el color de fondo que
queramos que tenga nuestra
página.
<body
background="URL">
</body>
Puede que quieras que tu página
tenga una imagen de fondo.

50
Actividad de aprendizaje:
1.- Observa el video de “Introducción a las hojas de estilo CSS” y elabora un resumen de este. El
video lo encuentras en la liga https://www.aulaclic.es/html/secuencias/p02_hojas_estilo2.htm
Ligas de interés:
Video: Introducción a las hojas de estilo CSS https://www.aulaclic.es/html/index_rd.htm
https://www.aulaclic.es/html/index.htm
Diseño de página web usando software de aplicación
Hoy en día existe una amplia gama de editores de páginas web. Uno de los más utilizados, y que
destaca por su sencillez y por las numerosas funciones que incluye, es Dreamweaver.
Dreamweaver es un software fácil de usar que permite crear páginas web profesionales. Permite
agregar rápidamente diseño y funcionalidad a las páginas, sin la necesidad de programar
manualmente el código HTML.
Se pueden crear tablas, editar marcos, trabajar con capas, insertar objetos, etc., de una forma
sencilla y visual.
Vamos a arrancar Dreamweaver desde el botón ubicado, generalmente, en la esquina
inferior izquierda de la pantalla, pulsar en Todos los programas y buscarlo en la lista con los
programas que hay instalados en tu computadora. Buscar Adobe Dreamweaver y haz clic sobre
él para arrancar el programa.
Cerrar Dreamweaver, podemos utilizar cualquiera de las siguientes operaciones:
 Hacer clic sobre el botón cerrar en la esquina superior derecha, como en cualquier
ventana de Windows.
 Pulsar la combinación de teclas Alt + F4
 Pulsar la combinación de teclas Ctrl + Q
Hacer clic sobre el menú Archivo, y elegir la opción Salir.
Abrir un documento, puedes utilizar cualquiera de las siguientes operaciones:
 Hacer clic sobre el botón abrir de la barra de herramientas estándar.

51
 Pulsar la combinación de teclas Ctrl + O
 Hacer clic sobre el menú Archivo y elegir la opción Abrir.
 Hacer doble clic sobre el Archivo en la ventana del sitio.
 Hacer clic derecho sobre el Archivo en el explorador de Windows, y elegir la opción Abrir
con Adobe Dreamweaver.
Nuevo documento, puedes utilizar cualquiera de las siguientes operaciones.
 Hacer clic en el botón Nuevo de la barra de herramientas estándar.
 Pulsar la combinación de teclas Ctrl + N
 Hacer clic sobre el menú Archivo y elegir la opción Nuevo, después de
esto aparecerá una ventana, en la que deberás elegir la Categoría Página
en Blanco. En la segunda columna seleccionamos HTML, observamos que hay
muchos diseños ya creados que podemos elegir, elegimos en Diseño ninguno. A
continuación, pulsamos el botón Crear.
Guardar un documento, puedes utilizar cualquiera de las siguientes operaciones.
 Hacer clic en el botón Guardar de la barra de herramientas estándar.
 Pulsar la combinación de teclas Ctrl + S
 Hacer clic sobre el menú Archivo y elegir la opción Guardar.
 Para guardar todos los documentos al mismo tiempo puedes realizar cualquiera de las
siguientes operaciones:
 Hacer clic en el botón Guardar Todo de la barra de herramientas estándar.
 Hacer clic en el menú Archivo y elegir la opción Guardar Todo.
Al tener varios documentos abiertos es fácil olvidarse de todas las modificaciones hechas en
cada uno de ellos. Debes tener mucho cuidado al utilizar la opción Guardar Todo, ya que en
ocasiones es posible no desear guardar los cambios en todos los documentos modificados. Por
ellos es conveniente que al principio no utilices esta opción, al menos hasta que te hayas
habituado a manejar el programa. De todas formas, observa que cuando hay cambios sin
guardar aparece un * tras el nombre del documento.

52
Entorno de trabajo Dreamweaver:
Barra de título: Contiene el nombre del programa (Macromedia Dreamweaver 8) y
seguidamente el nombre del documento que aparecerá en el explorador y entre paréntesis, su
ubicación y el nombre del archivo en formato html. En el extremo de la derecha están los
botones minimizar, maximizar y cerrar.
 Barra de menús: Contiene las operaciones de Dreamweaver, agrupadas en menús
desplegables. Al hacer clic en Insertar, por ejemplo, veremos las operaciones
relacionadas con los diferentes elementos que se pueden insertar en Dreamweaver.
 Barra de Herramientas Estándar: contiene iconos para ejecutar de forma inmediata
algunas de las operaciones más habituales, como Abrir , etc.
, Guardar

53
 Barra de Herramientas de documento: contiene iconos para ejecutar de forma
inmediata algunas otras operaciones habituales que no incluye la barra de herramientas
estándar. Estas operaciones son las de cambio de vista del documento, vista previa, etc.
 Barra de estado: nos indica en cada momento en qué etiqueta HTML nos encontramos
(en la imagen al encontrarnos en un documento en blanco estamos directamente sobre
la etiqueta <body>).
También nos es posible alternar entre los modos de selección, mano (para arrastrar la página),
o zoom. En cualquier momento puedes seleccionar el zoom preferido desde el desplegable
zoom y ajustar la vista al porcentaje preferido (por defecto siempre viene al 100%)
Dreamweaver utiliza ventanas flotantes similares a las barras de herramientas, que se conocen
como paneles o inspectores. La diferencia entre panel e inspector es que, en general, la
apariencia y opciones de un inspector cambian dependiendo del objeto seleccionado.
A través de la opción Ventana, de la barra de menús, es posible mostrar u ocultar cada uno de
los paneles o inspectores. A continuación, se muestran los más importantes.
 El inspector de Propiedades: muestra y permite modificar las propiedades del
elemento seleccionado que son usadas de forma más frecuente. Por ejemplo,
cuando el elemento seleccionado sea texto mostrará el tipo de fuente, la alineación,
si está en negrita o cursiva, etc.
Pulsando sobre el botón se despliega para mostrar más opciones. Este botón se
encuentra en la esquina inferior-derecha.

54
https://www.aulaclic.es/dreamweaver8/t_2_1.htm
Ilustración 1 Dreamweaver (Aula clic, s.f)
 Barra de herramientas Insertar o panel de objetos: permite insertar elementos en un
documento sin la necesidad de recurrir al menú Insertar. Los elementos están
clasificados según su categoría: tablas, texto, objetos de formulario, etc. Es posible
configurar este panel para que en los botones se muestren los iconos de los objetos
(como ocurre en la imagen siguiente), para que se muestren los nombres de los
objetos, o para que se muestren ambos a la vez.
Tipos de Vistas.
Puedes cambiar las vistas del documento a través de la barra de herramientas de documento.
 Vista Diseño: Permite trabajar con el editor visual. Es la vista predeterminada de

55
Dreamweaver y la que se suele utilizar habitualmente.
 Vista Código: Se utiliza para poder trabajar en un entorno totalmente de
programación, de código fuente. No permite tener directamente una referencia
visual de cómo va quedando el documento según se va modificando el código.
https://www.aulaclic.es/dreamweaver8/t_2_2.htmI
lustración 3 Dreamweaver (Aula clic, s.f)

56
 Vista Código y Diseño: Permite dividir la ventana en dos zonas. La zona
superior
muestra el código fuente y la inferior el editor visual. Cuando se realiza un cambio en
alguna de las zonas, este cambio se aplica directamente sobre la otra.
Ayuda
A través del menú ayuda puedes:
 Acceder al cuadro de diálogo de ayuda muy
similar al de Windows donde puedes buscar
por temas, por índice o por contenido, si
seleccionas la opción Ayuda de Dreamweaver
o simplemente pulsando F1.
 Acceder a una Introducción a InContext
Editing de la página de Adobe, que muestra
un resumen de esta herramienta.
 Abrir el panel Referencia en el que encontrarás
la sintaxis y descripción de las etiquetas HTML.
 Acceder a Dreamweaver Support Center en la
web.
 Acceder al Foros en línea de Adobe. Ilustración 6 Dreamweaver (Aula clic, s.f)

57
Configuración de un sitio local a través de Dreamweaver.
Un sitio web es un conjunto de archivos y carpetas, relacionados entre sí, con un diseño similar
o un objetivo común. Es necesario diseñar y planificar el sitio web antes de crear las páginas
que va a contener.
La forma habitual de crear un sitio consiste en crear una carpeta en el disco local. Los
documentos HTML normalmente se crean dentro de dicha carpeta, mientras que para
contener las imágenes, las animaciones, las hojas de estilo, etc., se deben crear nuevas
carpetas dentro de ésta, con el objetivo de tener una mejor organización de los archivos a la
hora de trabajar. Esto es lo que se conoce como sitio local.
Después se podrán copiar los archivos en un servidor web, en el denominado sitio remoto, lo que
equivale a publicar el sitio, de modo que la gente podrá verlo en Internet.
La organización de los archivos en un sitio permite administrar y compartir archivos, mantener
los vínculos de forma automática, utilizar FTP para cargar el sitio local en el servidor, etc. Es
conveniente que la página inicial del sitio tenga el nombre index.htm o index.html, ya que los
navegadores buscan una página con ese nombre cuando se intenta acceder a una URL
genérica.
Por ejemplo, si escribiéramos la dirección genérica http://www.aulaclic.com en el navegador,
éste intentaría cargar la página http://www.aulaclic.com/index.htm, por lo que se produciría
un error en el caso de que no existiera ninguna página con el nombre index.htm.
Crear o editar un sitio sin conexión a Internet.
Una vez creadas las carpetas que formarán un
sitio local, ya es posible definir el sitio en
Dreamweaver.
1. Para ello hay que dirigirse al menú Sitio, a la
opción Administrar sitios. Aparece una ventana
que contiene la lista de sitios locales definidos con
anterioridad. Por supuesto, pueden existir varios
sitios locales en un mismo ordenador.

58
Tanto si se elige la opción Nuevo..., como si
se elige la opción Editar..., se mostrará la
misma ventana en la que definir las
características del sitio.
Las características del sitio se agrupan en
diferentes categorías que aparecen en la
parte izquierda.
Para visualizar las características de una
categoría basta con seleccionarla de la lista
haciendo clic en ella.
2. Debe definirse el Nombre del sitio y la Carpeta raíz local, que es en la que se encuentra el sitio
dentro del disco duro local.
3. A través de la categoría Mapa de diseño del sitio puede definirse la página principal del sitio,
de la que colgarán el resto de los documentos HTML dentro del sitio, si en la carpeta raíz del
sitio existe una página con el nombre index.htm, Dreamweaver la cogerá por defecto.
Estas tres características son las imprescindibles para definir un sitio local.

59
Las demás opciones en este momento no nos interesan, ya que estamos definiendo el sitio local,
y no es necesario establecer los datos del servidor en el que estará el sitio remoto.
4. Después de rellenar los datos pulsamos el botón Aceptar y abrimos el sitio.
Si preferimos utilizar un asistente para crear el sitio web sólo tenemos que seleccionar la
pestaña Básicas, en vez de la pestaña Avanzadas.
Abrir un Sitio
• Menú Sitio,
• Opción Administrar sitios.
• Seleccionar el sitio de la lista de sitios.
• Pulsar sobre el botón Listo.
También podemos utilizar el panel Archivos, buscar y seleccionar
el sitio a abrir en el menú desplegable de la pestaña Archivos.
Vistas del Sitio
Es posible visualizar un sitio en el panel Archivos o en una ventana.
• El panel Archivos se puede abrir a través del menú Ventana, opción Archivos. O
también pulsando F8.

60
• Para cambiar de una vista a otra hay que pulsar sobre el botón que aparece
en la parte superior del panel y de la ventana.
Al mismo tiempo, es posible visualizar el sitio local, el sitio remoto, el servidor remoto de prueba o
el mapa del sitio.
Esto nos sirve para ver a la vez el sitio
local (el de nuestro equipo) y el sitio
remoto (el del servidor), y poder, por
ejemplo, sincronizar los archivos, o
compararlos. También el servidor de
pruebas o las bases de datos.
En esta imagen, se visualiza el remoto
(a la izquierda) todavía vacío, y el sitio
local (a la derecha) con nuestros
archivos.
Textos.
Las características del texto seleccionado pueden ser definidas a través del menú Texto, y a
través del inspector de propiedades.

61
 Formato: Permite seleccionar un formato de párrafo ya definido
para HTML, que puede ser encabezado, párrafo o preformateado. Los encabezados
se utilizan para establecer títulos dentro de un documento. El formato preformateado
sirve para que el texto aparezca tal cual ha sido escrito, por ejemplo, si entre dos
palabras se introducen varios espacios solo se considera uno, pero al establecer el
formato preformateado se respetará que haya varios espacios en lugar de solo uno.
 Fuente: Permite seleccionar un conjunto de fuentes. Aparecen conjuntos de fuentes en
lugar de una sola, ya que es posible que al establecer una única fuente el usuario no la
tenga en su ordenador. El seleccionar un conjunto de fuentes posibilita que en el caso
de que el usuario no tenga una fuente se aplique otra del conjunto. Por ejemplo, si
seleccionamos Arial, Helvetica, Sans-serif, el texto se verá con la fuente Arial, pero si
esta no existe se verá en Helvetica.
 Tamaño: Permite cambiar el tamaño del texto. El tamaño lo podemos indicar
en diversas unidades, en píxeles, centímetros, etc.
 Color: Permite seleccionar el color de la fuente, ignorando el color que se
haya definido en las propiedades de la página. Si no se ha establecido ningún color en
las propiedades de la página ni aquí, el color del texto por defecto será el negro.
 Estilo: Estos botones permiten establecer si el texto aparecerá en negrita o en
cursiva. A través del menú Texto también se puede, entre otras cosas, subrayar el texto.
Esta opción no aparece en el panel de Propiedades ya que de normal no suele
utilizarse, debido a que los vínculos aparecen subrayados y el subrayar texto normal
podría hacer que el usuario pensara que se trata de un vínculo.
 Alinear: A través de estos botones es posible establecer la alineación del
texto de una de estas cuatro formas distintas: izquierda, centrada, derecha y justificada.

62
 Sangría: Estos dos botones permiten sangrar el texto y anular la sangría. La sangría
es una especie de margen que se establece a ambos lados del texto. En este caso los
botones se refieren a sangría a la izquierda del texto.
 Listas: Estos botones permiten crear listas con viñetas o listas numeradas, es decir,
listas ordenadas y no ordenadas.
Para que un texto que ya ha sido introducido en el documento se convierta en una lista,
simplemente hay que seleccionarlo y pulsar sobre la opción de lista correspondiente, ya sea a
través del inspector de propiedades, o a través del menú Texto.
La lista con viñetas (desordenada) se selecciona a través del botón , mientras que la lista
numerada (ordenada) se selecciona a través del botón .
Para establecer listas anidadas dentro de otras, es necesario añadir una sangría en los elementos
de la lista que se desee que pasen a formar parte de la lista anidada.
Pasos para acceder a las propiedades de la lista.
• Seleccionar el texto de la lista o tener el cursor en algún lugar de la lista.
• Menú Texto.
• Opción Lista.
En la ventana Propiedades de lista se puede especificar el tipo de lista (con números o con
viñetas), el tipo de números o viñetas que se utilizarán (en la propiedad Estilo:), y en el caso de
las listas ordenadas, el número por el que comenzará el recuento.
Creando tablas.
Menú Insertar/Opción Tabla/Núm. filas y columnas.
• Indicar el grosor del borde en pixeles, por defecto se le asigna

63
• Relleno de celda: indica la distancia entre el
contenido de las celdas y los bordes de estas.
• Espacio entre celdas: indica la distancia entre
las celdas de la tabla.
Se pueden establecer encabezados.
• En la opción texto incluimos el título de la tabla,
el cual aparecerá fuera de la tabla.
• En alinear texto indicamos donde queremos
alinear el titulo con respecto a la tabla.
• En resumen, indicamos una descripción de la
tabla.
• Clic en el botón Aceptar.
Seleccionar elementos de una tabla
Existen varias formas de seleccionar una tabla. Una de ellas es a través del menú Modificar
estando el punto de inserción en la tabla, o desplegando el menú contextual de la tabla al
pulsar con el botón derecho sobre ella. En ambos casos aparece la opción Tabla, a través de
la cual se puede elegir la opción Seleccionar tabla.

64
Otra forma de hacerlo es:
• Pulsando con el ratón sobre el borde que la rodea. O
• Pulsando sobre la etiqueta <table> que aparece en la barra de estado.
Cuando se selecciona una tabla o cuando se coloca el cursor sobre cualquier parte de la
tabla, Dreamweaver muestra en una zona verde el ancho de la tabla y de cada columna.
Junto a los anchos se encuentran unos menús desplegables (menú de encabezado de la tabla
y menú de encabezado de la columna). Estos menús permiten acceder rápidamente a
determinados comandos relacionados con la tabla.
Puede seleccionarse una fila o columna de varias formas, lo mejor es que pruebes las distintas
formas y elijas la que más te gusta. Estas son las formas de selección:
• Puedes utilizar la opción Seleccionar columna del menú de encabezado de columna
(zona verde de anchos) esto sólo es válido para seleccionar una columna.
• Manteniendo pulsado y arrastrando el ratón hasta seleccionar la columna/s o fila/s
completamente.
• También puede hacerse situando el cursor junto al borde superior o izquierdo de la
columna o fila respectivamente, de modo que el cursor cambia a la forma de una
flecha negra. Al hacer clic se selecciona la columna o fila a la que apunta dicha flecha.
• En cualquier momento, para seleccionar una fila posicionar el cursor en cualquier sitio
de la fila y sobre la etiqueta <tr> de la barra de estado o sobre la etiqueta <td> para
seleccionar la columna.

65
• Para seleccionar varias celdas contiguas, basta con mantener pulsado el ratón
mientras se arrastra sobre las celdas deseadas.
• Para seleccionar una sola celda o varias celdas no contiguas, hay que mantener
pulsada la tecla Control mientras se hace clic sobre las celdas.
Formato de tabla
Las propiedades de la tabla se especifican a través de su inspector de propiedades.
Nota: A través del inspector de propiedades se pueden modificar los valores que se
especificaron al insertar la tabla. Al mismo tiempo, pueden indicarse otros como pueden ser el
valor Alinear (que permite alinear la tabla a la izquierda, al centro o a la derecha), el color de
fondo (en Col. Fondo) o de borde de la tabla (en Col. borde), o la imagen de fondo (en Im.). Si
lo que se selecciona es una celda, o un conjunto de celdas, el inspector de propiedades
cambia, para permitir especificar otros valores.
La parte superior del inspector de propiedades en este caso sirve para especificar las
propiedades del texto que se insertará dentro de la celda (o celdas) seleccionada.
La parte inferior sirve para especificar valores propios de la celda, como puede ser el color o
imagen de fondo diferentes de los especificados para la tabla global (en Fnd), el color del
Borde de la celda, etc.
Dos opciones que posiblemente necesites utilizar con frecuencia serán Horiz y Vert, que definen
la alineación del contenido de la celda de forma horizontal y vertical respectivamente.

66
Crear Hiperenlaces.
• Seleccionar el texto u objeto que va a servir de enlace.
• Establecer el vínculo en el inspector de propiedades.
Crear vínculos:
Texto: es el texto que mostrará el enlace
• Vínculo: es la página a la que irá redirigida el enlace, si se trata de un enlace externo
deberás escribirla empezando siempre por HTTP://.
• Destino: la página donde se abrirá la página.
• Título: se trata de la ayuda contextual del vínculo, es equivalente al atributo ALT de las
imágenes.
• Tecla de acceso: atributo que facilita la accesibilidad a las páginas, habilita el acceso
al enlace mediante la pulsación de la tecla Alt más la tecla de acceso indicada.
• Índice de tabulador: Como habrás podido observar puedes saltar a través de los
enlaces pulsando la tecla Tabulador. En este campo podrás establecer un índice
indicando la prioridad del enlace y así configurar el modo en el que actuará el
Tabulador es sus diferentes saltos.

67
Destino del enlace
El destino del enlace determina en qué ventana va a ser abierta la página vinculada, puede
variar dependiendo de los marcos de que disponga el documento actual.
Puede especificarse en el inspector de propiedades a través de Dest, o en la ventana que
aparece a través del menú Insertar, opción Hipervínculo.
_blank: Abre el documento vinculado en una ventana nueva del navegador.
_parent: Abre el documento vinculado en la ventana del marco que contiene el vínculo o en
el conjunto de marcos padre.
_self: Es la opción predeterminada. Abre el documento vinculado en el mismo marco o
ventana que el vínculo.
_top: Abre el documento vinculado en la ventana completa del navegador.
Formato del enlace.
 Un texto que tiene asociado un vínculo suele aparecer subrayado. Puede adquirir
tres colores diferentes que pueden especificarse a través de las propiedades de la
página. Estos tres colores diferentes son los que se asignan como color de vínculo,
de vínculo activo, y de vínculo visitado.
 Cuando el vínculo está definido sobre una imagen, en el borde aparecen una serie
de puntitos al pulsar sobre ella.
Enlace Correo Electrónico
Es posible especificar vínculos a direcciones de correo electrónico. Esto resulta útil cuando se
desea que los visitantes de la web puedan contactar con nosotros.
• Seleccionar el texto o la imagen
deseados.
• Menú Insertar.
• Opción Vínculo de
Correo
Electrónico.
Imágenes
Todas las páginas web acostumbran a tener un cierto número de imágenes, que permiten
mejorar su apariencia, o dotarla de una mayor información visual.

68
Como se vio anteriormente Existen una serie de formatos de imagen más recomendables que
otros para ser introducidos en una página web.
Pasos para insertar una imagen.
Clic en Menú Insertar/ Opción imagen/ Buscar y seleccionar la imagen
• En la opción tipo seleccionar Todos los Archivos.
• En Relativa a es posible especificar si la imagen será relativa al documento o a la
carpeta raíz del sitio. Es preferible que sea relativa al Documento, ya que, si se mueve
todo el sitio a una ubicación diferente, la imagen puede no verse al estar siendo
buscada en la ubicación anterior.
Propiedades de la imagen.
Cuando selecciones una imagen el inspector de propiedades muestra esta apariencia:

69
• Desde el campo Alt podrás asignarle una ayuda contextual a la imagen, esta se
mostrará cuando coloques el ratón sobre ella.
• En Clase podrás asignarle un estilo que hayas creado anteriormente, así podrás darle
alineación, bordes e incluso tamaño con sólo un clic.
• Si le damos un valor al campo Vínculo convertiremos a la imagen en un link a otra
página.
• Puedes asignarle un tamaño de borde desde el campo Borde.
• Puedes seleccionar su alineación con respecto al texto desde el campo Alinear.
• Por último, las opciones Espacio V y Espacio H te serán muy útiles para separar la imagen
del texto y así no queden demasiado pegadas a él.
Cambiar el tamaño de una imagen.
Dentro de Dreamweaver puede modificarse el tamaño de las imágenes. Dicho cambio de
tamaño no se aplica directamente sobre el archivo de imagen, sino que lo que varía es la
visualización de la imagen dentro de la página.
• Selecciona la imagen.
• Arrastrar con el puntero alguno de los recuadros negros que aparecen alrededor de la
imagen.
Otra forma de hacerlo es:
• Selecciona la imagen.
• En el inspector de propiedades modifica los campos An (Anchura) o Al (Altura).
Nota: Si estos campos no contienen el tamaño original de la imagen, el valor
aparecerá resaltado en negrita y aparecerá a la derecha una flecha circular
que permite volver al tamaño original haciendo clic sobre ella.
Imagen de Sustitución Rollover.
Un rollover es una imagen que cambia por otra cuando el puntero se sitúa sobre ella. Este tipo
de imagen suele utilizarse en los menús o en los botones para desplazarnos a través de distintas
páginas.
Clic en Menú Insertar / Opción Objetos de Imagen, Seleccionar Imagen de Sustitución

70
• Especificar la imagen original y la de sustitución.
• El Texto alternativo es el texto que aparece al situar el puntero sobre una imagen.
Botones Flash
Existen otra serie de imágenes especiales, similares a los rollovers, que suelen utilizarse para crear
menús, como pueden ser los botones Flash.
Clic en Menú Insertar / Opción Media, Seleccionar Botón Flash.
• En la opción Estilo puedes seleccionar uno de los distintos formatos de botón que se
ofrecen.

71
• En la opción Texto del botón, especificar el texto que mostrara el botón, así como el
nombre con el que será guardado (Guardar Como) y el vinculo asociado (vinculo y
destino).
Nota: Es preferible guardar los botones Flash en el mismo directorio que los documentos HTML,
en lugar de la carpeta destinada a almacenar imágenes, ya que de no ser así es posible que,
al intentar asignar un vínculo dentro del propio sitio, Dreamweaver no permita guardar el botón
con ese vínculo en una ubicación diferente de la de dicho documento. Recuerda que los
botones deben guardarse con la extensión SWF.
Aplicar Marcos (frames) a la página web.
• Abrir un documento nuevo o ya
existente.
• Clic en menú Insertar.
• Opción HTML, elegir Marcos.
• Elegir el tipo de marco a crear
Por ejemplo, si insertamos un marco a la
Derecha.
El marco vacío aparecerá a la derecha del documento original. Se tienen 3 documentos: el de
la izquierda, el de la derecha y el que contiene el grupo de marcos. En este ejemplo el
documento que se tiene inicialmente es el de la izquierda, por ello en este caso el Marco Padre
(MainFrame) será el de la izquierda.
El marco padre siempre es el marco en
el que se encuentra el documento
inicial, sobre el que se han insertado el
resto de los marcos.
Pasos para Abrir el Panel Marcos:
Clic en Menú Ventana / Opción Marcos.

72
O también se puede dirigir a él: Pulsando la combinación de teclas Mayusc + F2 Seleccionar
Marcos:
• Abrir al Panel Marcos.
• Pulsar sobre ellos en el panel para pasar de uno a otro.
Otra forma de seleccionar es: Pulsando sobre el borde que rodea a los marcos.
Nota: Es necesario seleccionar los marcos para especificar las propiedades específicas de cada
uno de ellos.
Guardar documentos con marcos.
Todos los documentos que contienen marcos tienen que tener una página en cada uno de
ellos. Es por esto que, al crear algún marco, se cargan páginas nuevas por defecto en cada
uno de ellos, a excepción del marco que contiene la página original.
Estas páginas nuevas pueden ser posteriormente sustituidas por otras ya existentes, como ya
veremos más adelante.
Es necesario guardar la página que contiene el grupo de marcos, así como cada una de las
páginas que están incluidas en sus marcos.
No es conveniente guardar la primera vez los marcos con la opción Guardar todo , ya que
podemos equivocarnos al dar los nombres a los nuevos documentos.
Es preferible guardar cada documento uno por uno, a no ser que todos los marcos contengan
alguna página ya existente, ya que en ese caso el único documento al que habrá que dar
nombre será al que contiene el grupo de marcos.
• Para guardar el documento que contiene el grupo de marcos, hay que seleccionarlo
previamente.
• Para guardar cada uno de los otros documentos, simplemente hay que situar el cursor
en ellos antes de pulsar sobre Guardar Configurar
Marcos.
Una vez seleccionado un marco a través del panel Marcos, pueden establecerse sus
propiedades a través del inspector de propiedades.

73
• En Origen aparece el nombre del documento HTML que está contenido en el marco.
• En Bordes puede elegirse si aparecerá o no una línea separando el marco del resto de
marcos. En el caso de que se muestre el borde, se puede especificar un color para éste
a través de Color borde.
• Desplaz. Indica si aparecerán o no las barras de desplazamiento cuando el documento
del marco no pueda visualizarse completamente.
• Si la opción Mismo tamaño está activa, indica que los usuarios no podrán variar las
medidas del marco desde el navegador.
• El Ancho del margen y el Alto del margen indican la separación que habrá entre el
contenido del marco y sus bordes izquierdo-derecho y superior-inferior. (Aulaclic, 1999),
https://www.aulaclic.es/dreamweaver-cs5/index.htm
2.-Diseña tu propia página web, utilizando Dreamweaver, El tema a desarrollar debe apoyar al
proyecto integrador de tu plantel. La página web debe contener los siguientes elementos.
Títulos, párrafos, imágenes, hipervínculos, videos, tablas, estilos y tamaños de fuentes diferentes,
fondo de color, y video.
Sugerencia: Puedes diseñar en una hoja blanca tu página y posteriormente hacerla en
Dreamweaver
Ligas de interés:
https://www.aulaclic.es/dreamweaver-cs5/index.htm https://www.aulaclic.es/dreamweaver-
cs5/t_1_5.htm https://www.aulaclic.es/dreamweaver-cs5/t_2_1.htm
https://www.aulaclic.es/dreamweaver-cs5/t_2_2.htm https://www.aulaclic.es/dreamweaver-
cs5/t_2_4.htm https://www.aulaclic.es/dreamweaver-cs5/t_3_3.htm
https://www.aulaclic.es/dreamweaver-cs5/t_7_4.htm

74
MOMENTO III.
LECTURA 2. Publicar sitio web
Para disponer de un servidor de Internet hay dos alternativas, buscar un servidor gratuito o
contratar uno de pago. Para empezar, puede servir un servidor gratuito, que suelen ofrecer
subdominios de la forma http://www.servidor_gratuito.com/tu_subdominio, de forma que no
necesitas registrar ningún dominio ya que los subdominios no se registran.
Cómo publicar su sitio web con Dreamweaver CS (Ingles):
1.-En el menú Site, elija Manage Sites....
2.-Haga clic en New y elija FTP & RDS Server.
3.- Complete los siguientes campos y luego haga clic en OK:
o Nombre — Ingrese un nombre para su sitio. o Tipo de acceso — Elija FTP. o
Alojamiento FTP — Ingrese su nombre de dominio. Por ejemplo,
coolexample.com.
Conocimientos:
Publicar sitio web

75
o Directorio de alojamiento — Ingrese el directorio
de su cuenta de alojamiento. Si el sitio es para
su nombre de dominio principal, escriba / o deje
el campo en blanco.
o Entrada — El nombre del usuario de su cuenta
de alojamiento. Para más información, vea
Cómo encontrar el nombre de entrada o
usuario de su alojamiento.
o Contraseña — Ingrese la contraseña de su
cuenta de alojamiento. Para más información,
vea Cómo restablecer la contraseña (FTP) de su
cuenta de alojamiento.
o Elija Use passive FTP.
4.- Elija los archivos o carpetas que desee publicar y luego haga clic en Put Files.
Para publicar tu Web con Dreamweaver (español) debes seguir los siguientes pasos:
1. Abre el menú "Sitios/Sitio nuevo".
2. Accede al apartado "Datos locales" en que deberás poner nombre al sitio y seleccionar la
carpeta donde está tu página web en el disco duro.
3. Ve al apartado "Datos remotos" e introduce los siguientes datos (sustituye tudominio.com
por tu nombre de dominio): o Acceso: FTP.
o Servidor FTP: ftp.tudominio.com o Directorio en el servidor: /html/.
o Usuario: tudominio.com_ Pass: la que corresponda. Si no la recuerdas puedes
cambiarla en el apartado Web->FTP del Panel de Control.
o "FTP" del Panel de Control de tu alojamiento.
4. Pulsa "Aceptar" y ya te aparecerá el nuevo sitio creado.
5. Ya solo tienes que pulsar en "Publicar" para subir tus páginas al servidor.

76
Recupera la página web que diseñaste con Dreamweaver y publícala en un sitio web gratuito.
Una vez que la publiques, envía a tu profesor la liga de internet de la página para que evalúe tu
trabajo
1. Forma equipos de tres integrantes
2. Entre los integrantes del equipo busca algún tema o empresa para realizar una página
web.
3. Con la ayuda de tus compañeros de equipo elabora la página web utilizando CSS del
tema seleccionado por el equipo, la página web deberá contar con lo siguiente:
 Texto
 Video
 tablas
 Hipervínculos
 Imágenes
 Botones flash
 Marcos
4. Una vez terminada la página envíala vía correo electrónico a tus compañeros de clases
y maestro.
Ligas de interés:
https://mx.godaddy.com/help/como-publicar-su-sitio-web-con-dreamweaver-cs4-5005
https://www.aulaclic.es/dreamweaver-cs5/t_1_2.htm
https://www.piensasolutions.com/ayuda/hosting/dreamweaver

77
Autoevaluación
el momento III y reflexiona sobre cómo lo lograste y lo que puedes hacer para mejorar:
Aprendizajes
esperados
Evidencias
¿Cómo lo
lograste?
¿Qué puedo
hacer para
mejorar?
De las evidencias mencionadas en el cuadro anterior, encierra en un círculo las que forman
parte de tu portafolio.

78
A continuación se presenta una serie de preguntas, con la intención de que reflexiones en torno
a las Competencias que desarrollaste hasta el momento:
1. ¿Cómo te sientes trabajando en equipo? ¿Por qué?
2. ¿Qué actividades te parecieron de mayor y menor interés de las propuestas en el Momento
III?
3. ¿Cuáles son tus fortalezas y áreas de oportunidad descubiertas durante el desarrollo de las
actividades relacionadas con la construcción de páginas web?
4. Describe tres situaciones en las que podrías aplicar los conocimientos adquiridos en este
submódulo de Páginas Web.
5. Menciona de qué manera los aprendizajes adquiridos en la capacitación en Tecnologías
de la información y comunicación, contribuyen de manera positiva en tus relaciones
sociales, en tu vida cotidiana y en tu futuro profesional.

Páginas_web guia didactica.pdf

Páginas_web guia didactica.pdf

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Páginas_web guia didactica.pdf

Similar a Páginas_web guia didactica.pdf (20)

Último

Último (10)

Páginas_web guia didactica.pdf