INFORMÁTICA PARA OFICINAS Módulo IV - Páginas Web 2018-1 PDF

MIGUEL ÁNGEL MENDOZA GONZÁLEZ
Secretario de Educación y Bienestar Social y Director General del ISEP del Estado de Baja California
IVÁN LÓPEZ BÁEZ
AMPARO AIDÉ PELAYO TORRES
INFORMÁTICA PARA OFICINAS

Módulo: Páginas Web
Primera edición, febrero de 2012
Segunda edición, febrero de 2014
Diseñado por:
Lic. Ricardo López Navarro
Ing. Jesús Arturo González Hernández
Revisado por: Lic. Norma Vázquez Armas

Lic. Ricardo López Navarro
Tercera edición, febrero de 2015
Actualizado por:
Lic. Norma Vázquez Armas
Con el apoyo en la revisión de la mesa técnica, integrada por:

Lic. Nilda Cortés Rosales
Lic. Miguel Ángel López Muñoz
Lic. Gilberto Ortiz Meza
Cuarta edición, febrero de 2016
Quinta edición, febrero de 2017
Agradecemos el apoyo de la Academia Estatal.
En la realización del presente material, participaron:
JEFA DEL DEPARTAMENTO DE ACTIVIDADES EDUCATIVAS

Lic. Teresa López Pérez
EDICIÓN, FEBRERO DE 2018

Lic. Gerardo Enríquez Niebla
Ing. Diana Castillo Ceceña
La presente edición es propiedad del

Colegio de Bachilleres del Estado de Baja California.
Prohibida la reproducción total o parcial de esta obra.
Este material fue elaborado bajo la coordinación y supervisión de la

Dirección de Planeación Académica del Colegio de Bachilleres del Estado de Baja California.
Blvd. Anáhuac #936, Centro Cívico, Mexicali, B.C., México.
www.cobachbc.edu.mx
PRESENTACIÓN
PRESENTACIÓN DEL MÓDULO
MAPA DE LA CAPACITACIÓN
SUBMÓDULO 1: DISEÑAR PÁGINAS WEB EN LENGUAJE HTML ...................... 2
SUBMÓDULO 2: UTILIZAR SOFTWARE DE APLICACIÓN PARA

EL DISEÑO DE PÁGINAS WEB ..................................................68
SUBMÓDULO 3: PUBLICAR PÁGINAS WEB Y ESTABLECER

COMUNICACIÓN VÍA INTERNET .............................................134
PÁGINAS ELECTRÓNICAS ................................................................................166

En el marco de la Reforma Integral de la Educación Media Superior, Colegio de Bachilleres
GHO(VWDGRGH%DMD&DOLIRUQLD&%%&VHKDSURSXHVWRODPHWDGHIRUPDU\FRQVROLGDUHOSHU¿OGH
egreso en el bachiller, poniendo a disposición del alumno los elementos necesarios que le permitan
crecer y desarrollar conocimientos, habilidades, actitudes y valores para poder enfrentar los retos de
un mundo globalizado, vertiginoso, competitivo y complejo. Por tanto, es importante que el proceso
educativo implemente estrategias que contemplen actividades de aprendizaje en diversos contextos
y escenarios reales, donde el estudiante con creatividad, habilidad y destreza sepa desarrollar,
movilizar y transferir las competencias adquiridas.
(QYLUWXGGHORJUDUORDQWHULRU\FRQVFLHQWHGHODGL¿FXOWDGSDUDTXHHODOXPQDGRWHQJD
DFFHVR D XQD ELEOLRJUDItD DGHFXDGD SHUWLQHQWH \ H¿FD] FRQ HO HQWRUQR VRFLRHFRQyPLFR
actual, el CBBC brinda la oportunidad a los estudiantes de contar con materiales didácticos
para el óptimo desarrollo de los programas de estudio de las asignaturas que comprende
el Plan de Estudios Vigente. Cabe subrayar que, dichos materiales son producto de la
participación de docentes de la Institución, en los cuales han manifestado su experiencia,
conocimientos y compromiso en pro de la formación de los jóvenes bachilleres.
Los materiales didácticos se dividen en dos modalidades: Guía de Actividades del

Alumno para el Desarrollo de Competencias, dirigida a las asignaturas de los Componentes
de Formación Básica y Propedéutica, y Guía de Aprendizaje; para las capacitaciones del
Componente de Formación para el Trabajo. Cabe señalar que, los materiales se encuentran
en un proceso permanente de revisión y actualización por parte de los diferentes equipos
docentes así como del equipo editorial. Las guías se pueden consultar en la página Web del
CBBC: www.cobachbc.edu.mx en la sección alumnos / material didáctico.
Es necesario, hacer énfasis que la guía no debe ser tomada como la única herramienta
de trabajo y fuente de investigación, ya que es imprescindible que los estudiantes lleven a
FDERXQWUDEDMRGHFRQVXOWDHQRWUDVIXHQWHVELEOLRJUi¿FDVLPSUHVDV\HOHFWUyQLFDVPDWHULDO
audiovisual, páginas Web, bases de datos, entre otros recursos didácticos que apoyen su
formación y aprendizaje.
En la dinámica laboral actual se presenta una creciente automatización de los procesos de la
información, lo que genera la necesidad de desarrollar las competencias necesarias para resolver
la problemática que este contexto demanda.
La capacitación en ,QIRUPiWLFDSDUD2¿FLQDVte proporciona las herramientas necesarias para que

adquieras conocimientos y desarrolles habilidades y destrezas, así como una actitud responsable
que te permita incursionar en los sitios de inserción laboral en el ámbito de la Informática, de
manera exitosa. Así mismo, podrás desarrollar competencias relacionadas, principalmente, con la
participación en los procesos de comunicación en distintos contextos, la integración efectiva a los
equipos de trabajo y la intervención consciente, desde tu comunidad en particular, en el país y el
mundo en general, todo con apego al cuidado del medio ambiente.
/DFDSDFLWDFLyQVHLQLFLDHQHOWHUFHUVHPHVWUHFRQHOPyGXOR6RIWZDUHSDUD2¿FLQDVTXHWHSHUPLWH
adquirir las competencias para elaborar documentos de texto, hojas de cálculo y bases de datos,
mediante el empleo de programas de cómputo.
(QHOPyGXORGHFXDUWRVHPHVWUH&RQ¿JXUDFLyQ\0DQWHQLPLHQWRGH&RPSXWDGRUDVGHVDUUROODUiV
ODVFRPSHWHQFLDV,QVWDODU\FRQ¿JXUDUFRPSRQHQWHVItVLFRV\OyJLFRVGHXQDFRPSXWDGRUDDSOLFDU
PDQWHQLPLHQWRDORVFRPSRQHQWHVOyJLFRV\ItVLFRVGHXQDFRPSXWDGRUDLQVWDODU\FRQ¿JXUDUXQD
red de área local para compartir recursos de hardware y software y administrar los recursos y
detectar los problemas de una red de cómputo.
Con el módulo de quinto semestre, Creación y Edición de Objetos, desarrollarás las competencias:
Utilizar software de aplicación para elaborar presentaciones electrónicas, para editar imágenes y
para elaborar animaciones de objetos y videos.
Con el módulo denominado Páginas Web, que corresponde al sexto semestre, desarrollarás las
competencias: Diseñar páginas Web en lenguaje HTML, utilizar software de aplicación para el
diseño de páginas Web, publicar páginas Web y establecer comunicación vía Internet.
Todas estas competencias te dan la posibilidad de que al egresar, te incorpores al mundo laboral o
desarrolles procesos productivos independientes, de acuerdo con tus intereses profesionales o las
necesidades en tu entorno social.
La capacitación se compone de cuatro módulos, el primer módulo consta de tres submódulos,

el segundo consta de cuatro submódulos, el tercero tres submódulos y el último consta de tres
submódulos. Todos los módulos tienen una duración de 112 horas, dando un total de 448 horas para
MAPA DE LA CAPACITACIÓN
5TO. 6TO.
3ER. SEMESTRE 4TO. SEMESTRE
SEMESTRE SEMESTRE
MÓDULOS
Creación y
INFORMÁTICA PARA OFICINAS
Mantenimiento de Edición de Páginas Web.

(112 hrs.) Computadoras. Objetos. (112 hrs.)
(112 hrs.) (112 hrs.)
SUBMÓDULOS
Utilizar software
Utilizar software
de aplicación Diseño de
de aplicación para componentes
para elaborar páginas web
elaborar documentos físicos y lógicos de
presentaciones en HTML.
de texto. una computadora.
electrónicas. (48 hrs.)
(32 hrs.) (40 hrs.)
(24 hrs.)
Utilizar
Aplicar
Utilizar software Utilizar software software de
mantenimiento a
de aplicación para de aplicación aplicación
los componentes
elaborar hojas de para editar para el diseño
lógicos y físicos de
cálculo. imágenes. de páginas
una computadora.
(40hrs.) (40 hrs.) web.
(40 hrs.)
(48 hrs.)
una red de
área local para
compartir recursos Utilizar software Publicar
Utilizar software de hardware y de aplicación páginas web
de aplicación para software. para elaborar y establecer
elaborar bases de (16 hrs.) animaciones de comunicación
datos.
Administrar los objetos y videos. vía internet
(40 hrs.)
recursos y detectar (48 hrs.) (16 hrs.)
los problemas
de una red de
cómputo. (16 hrs.)
JUSTIFICACIÓN
Este módulo, es el cuarto de cuatro que conforman la capacitación para el trabajo:

,QIRUPiWLFDSDUD2¿FLQDV que se imparte en el Colegio de Bachilleres del Estado de Baja
California.
La capacitación, en su conjunto, ofrece al educando una formación basada en competencias

que le permite iniciarse en diversos aspectos del ámbito laboral, fomentando una actitud
positiva hacia el trabajo y, en su caso, su integración al sector productivo.
Sustenta su currícula en los siguientes UHIHUHQWHVQRUPDWLYRV:

1) Principios básicos de la Reforma Integral de la Educación Media Superior (RIEMS)
consignados en el Acuerdo 442 por el que se establece el Sistema Nacional de
%DFKLOOHUDWRHQXQPDUFRGHGLYHUVLGDGSXEOLFDGRHQHO'LDULR2¿FLDOGHOD)HGHUDFLyQ
'2)HOGtDGHVHSWLHPEUHGH\PRGL¿FDGRVHJ~Q$FXHUGRSXEOLFDGRHQ
el DOF el día 23 de junio de 2009.
3URPXHYH GH PDQHUD HVSHFt¿FD VHLV GH ODV RQFH FRPSHWHQFLDV JHQpULFDV TXH VH
describen en el Acuerdo 444, publicado en el DOF el día 21 de octubre de 2008;
asimismo, en el Acuerdo 488 ya mencionado.
3) En este módulo y para el desarrollo de las competencias profesionales que promueve
se basa en la Norma Técnica de Competencia Laboral Institucional elaborada bajo
la metodología de la tercera generación del CONOCER, en marzo de 2011, bajo los
títulos y códigos siguientes:
- INFORMÁTICA PARA OFICINAS NIE: CBBCNTI3G.00A
(/$%25$&,Ï1'('2&80(1726<&2081,&$&,Ï10(',$17((/(03/(2
DE LAS CARACTERÍSTICAS AVANZADAS DE APLICACIONES DE CÓMPUTO
NTCL: CINF 0376.01
/RVVLWLRVGHLQVHUFLyQ en el mercado de trabajo de este módulo, son: áreas administrativas,

contables o comerciales; centros de cómputo, cibercafés; instituciones educativas;
LQVWLWXFLRQHV ¿QDQFLHUDV EDQFRV R¿FLQDV S~EOLFDV \ SULYDGDV KRWHOHV VXSHUPHUFDGRV
cines, restaurantes; talleres de servicio y reparación de equipo electrónico; sector industrial
y de servicios.
Los UHVXOWDGRVGHDSUHQGL]DMHGHOPyGXOR son: Diseñar páginas web en lenguaje html,
Utilizar software de aplicación para el diseño de páginas web, además de Publicar páginas
web y establecer comunicación vía internet. Por otra parte, el estudiante desarrolla las
FRPSHWHQFLDVJHQpULFDVQHFHVDULDVSDUDDFWXDUFRQH¿FLHQFLDQRVyORHQHOWUDEDMRVLQR
a lo largo de la vida, de conformidad con el desempeño integral de la capacitación de
,QIRUPiWLFDSDUD2¿FLQDV
Que seas competente en diseñar, estructurar y crear una página web en lenguaje html, haciendo
uso de las tecnologías de la información y la comunicación para procesar e interpretar ideas.
Diseñar, estructurar y crear una página web.
1.1 Utilizar los elementos fundamentales del diseño de una página web.
1.2 Manejar los elementos básicos del lenguaje HTML en la creación de páginas web.
Las competencias profesionales que se desarrollan en este submódulo son:
1. Utiliza procedimientos y herramientas para el desarrollo de documentos electrónicos de acuerdo

a los requerimientos.
2. Programa y administra páginas web para la difusión y captación de la información.
3. (ODERUD SiJLQDV ZHE FRQ DQLPDFLRQHV LQWHUDFWLYDV GH DSOLFDFLyQ JHQHUDO \ HVSHFt¿FD HQ XQ
ambiente multimedia.
Las competencias genéricas así como sus atributos que tienen mayor probabilidad
de desarrollarse para contribuir a las competencias profesionales son:
COMPETENCIAS:
4. Escucha, interpreta y emite mensajes pertinentes en distintos contextos mediante la utilización
de medios, códigos y herramientas apropiados.
5. Desarrolla innovaciones y propone soluciones a problemas a partir de métodos establecidos.
ATRIBUTOS:
4.1 ([SUHVDLGHDV\FRQFHSWRVPHGLDQWHUHSUHVHQWDFLRQHVOLQJtVWLFDVPDWHPiWLFDVRJUi¿FDV
4.5 Maneja las tecnologías de la información y la comunicación para obtener información y expresar
ideas.
5.6 Utiliza las tecnologías de la información y comunicación para procesar e interpretar información.
El objetivo de este submódulo es prepararte para que aprendas a diseñar y

estructurar un Sitio web en lenguaje html.
2
DIAGNÓSTICO
Antes de dar inicio a las actividades propias de este semestre, nos interesa conocer tus expectativas,
escribe lo que esperas del módulo "Páginas Web", el cual se imparte en sexto semestre de la
FDSDFLWDFLyQ,QIRUPiWLFDSDUDR¿FLQDV
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
En ELQDV realiza una lectura sobre la presentación, competencias y contenidos

del primer submódulo "Diseñar páginas web en lenguaje html" que deben
alcanzar cada alumno. Responde las preguntas y comenta tus respuestas en
HTXLSRGHSHUVRQDV organizados y guiados por el docente.
¢4XpFRPSHWHQFLDVYR\DGHVDUUROODU"
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
¢3DUDTXpPHYDQDVHUYLU"
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
¢(QTXpPRPHQWRODVSXHGRDSOLFDU"
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
3
Es muy importante para los docentes saber el grado de conocimiento con que
cuentan sus alumnos de acuerdo a los temas que se van a tratar, es por eso
que deberás responder el siguiente cuestionario, atendiendo las instrucciones
que te dé el profesor.
CONOCIMIENTOS PREVIOS
Contesta las siguientes preguntas para saber el nivel de tus conocimientos previos con que
iniciaremos este submódulo:
¢4XpHQWLHQGHVSRUXQDSiJLQDZHE"
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
¢4XpWLSRGHLQIRUPDFLyQWLHQHODVSiJLQDVZHETXHKDVYLVLWDGR?
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
¢4XpGLIHUHQFLDHQFXHQWUDVHQWUHXQDSiJLQDZHE\XQVLWLRZHE"
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
¢4XpWLHQHQHQFRP~QORVVLWLRVZHETXHKDVYLVLWDGR?
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
¢3DUDTXpFUHHVTXHVLUYHXQVLWLRZHE"
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
¢4XpWHJXVWDUtDTXHWXYLHUDHOVLWLRZHETXHYDVDGLVHxDU"
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
Revisó: _____________________________________________________.
Aciertos: _______________________.
4
Una vez contestado el cuestionario anterior intercambia tu guía de aprendizaje con el compañero
de al lado. El profesor mencionará las respuestas correctas para cada reactivo.
&DOL¿FDODVUHVSXHVWDVGHWXFRPSDxHUR\DQRWDWXQRPEUHHQHOHVSDFLRTXHGLFH5(9,6Ï
Anota también el número de aciertos que obtuvo.
¿Qué es HTML?
Para abrHYLDUXQDODUJDKLVWRULDSRGHPRVGHFLUTXHXQFLHQWt¿FR
OODPDGR7LP%HUQHUV/HHLQYHQWy+70/DOOiSRU(OREMHWLYR
HUD IDFLOLWDU D FLHQWt¿FRV GH GLIHUHQWHV XQLYHUVLGDGHV HO DFFHVR
a los documentos de investigación de cada uno de ellos. El
proyecto REWXYR XQ p[LWR PXFKR PD\RU GHO TXH 7LP %HUQHUV
Lee nunca hubiese llegado a imaginar. Al inventar HTML, este
FLHQWt¿FRVHQWyODVEDVHVGHODZHEWDO\FRPRODFRQRFHPRVHQ
la actualidad.
HTML es un lenguaje que hace posible presentar

LQIRUPDFLyQSRUHMHPSORLQYHVWLJDFLRQHVFLHQWt¿FDVHQ,QWHUQHW
Lo que ves al visualizar una página en Internet es la interpretación
que hace el navegador del código HTML. Para ver el código HTML
de una página solo tienes que dar clic en la opción "Ver" de la barra de menús y elegir "Código
fuente" (en Internet Explorer).
Si quieres crear sitios web, no hay otra solución que aprender HTML. Incluso si usas un
programa como Dreamweaver, por ejemplo, para la creación de sitios web, poseer unos conocimientos
básicos de HTML hace la vida mucho más fácil y tus sitios web mucho mejores.
+70/ HV OD DEUHYLDWXUD GH +\SHU7H[W 0DUNXS /DQJXDJH HV GHFLU /HQJXDMH GH PDUFDGR
hipertextual", y esto ya es más de lo que necesitas saber a estas alturas. En todo caso, para
PDQWHQHUXQEXHQRUGHQQHFHVLWDVFRQRFHUVXVLJQL¿FDGRFRQPD\RUGHWDOOH
• Hiper (Hyper): Es lo contrario de lineal. Los programas de la computadora se ejecutaban de

forma lineal: cuando el programa había ejecutado una acción seguía hasta la siguiente línea,
y después de ésta a la siguiente, y a la siguiente, HTML, sin embargo, ahora es diferente: se
puede ir a donde uno quiera cuando uno quiera.
5
• Texto (Text) .
• Marcado (Mark-up): Es lo que haces con el texto. Se marca el texto del mismo modo que
en un programa de edición de textos con encabezados, viñetas, negrita, etc.
• Lenguaje (lenguaje): Es lo que es HTML. Este lenguaje hace uso de muchos términos en
inglés.
¿Cuáles son las características del lenguaje HTML?
Este lenguaje será el encargado de convertir un inocente archivo de texto inicial en una página
web con diferentes tipos y tamaños de letra, con imágenes impactantes, animaciones sorprendentes,
formularios interactivos, etc.
Estas características son las que marcaron el diseño de todos los elementos del WWW incluida
la programación de páginas Web.
La página Web tiene que ser distribuida: la información repartida en páginas no muy grandes
enlazadas entre sí.
Debe ser fácil navegar por la página.
Tiene que ser compatible con todo tipo de ordenadores (PCs, Macintosh, estaciones de
etc.)
Debe ser dinámico: el proceso de cambiar y actualizar la información debe ser ágil y rápido.
Reglas básicas en el diseño:

1. Tener algo interesante que decir en tu PÁGINA web:
2. Todo el mundo ya conoce las herramientas de búsqueda. Haz
que tus enlaces sean pertinentes al tema que estás tratando.
3. Recuerda que no en todos los buscadores aparecen igual: No hagas que tu página dependa
demasiado de ciertos comandos HTML que pueden no aparecer en todos los buscadores.
4. Mantén tu página con un máximo de 15K en imágenes o fracciónala si ésta es muy grande.
5.
tus
6. Reconocer el trabajo de los demás: Si algún "Sitio" te ayudó de alguna manera a construir tu
página, entonces bríndale un enlace
7. Colocar fecha de la última revisión: Indica cuándo se realizó la última revisión. Esto hará que
las personas se motiven a leer tu página.
8.
períodos de tiempo. Revisa su validez.
9.
posible, formularios de realimentación.
10.Practica el HTML: Usa los editores solo cuando conozcas los principios básicos del HTML.
6
NOMBRE: ________________________________________ GRUPO: ________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
____________________________________________________________________________
____________________________________________________________________________
____________________________________________________________________________
___________________________________________________________________________
Híper:_______________________________________________________________________
Texto:_______________________________________________________________________
Marcado:_____________________________________________________________________
Lenguaje:____________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
7
ACTIVIDAD INTEGRADORA
PARTE 1
A partir de este momento vas a empezar con la estructura de tu sitio web para eso es
necesario que te organices en equipo de tres integrantes, realices la lectura “estructura
de una página web” a la par que vas desarrollando las actividades referentes al diseño de
tu página como son:
• Elegir posibles temas a tratar en la sitio web.

•
• Escoge un tema para tu sitio web.
•
•
• Escalabilidad.
•
•
Pregunta al profesor todas las dudas que te vayan surgiendo.
DISEÑO DE UNA PÁGINA WEB
Antes de entrar de lleno en lo que será la construcción de la página web, desarrollaremos

la metodología para el diseño de las mismas. Es importante ser originales para estructurar sus
contenidos, redactar sus textos, agregar imágenes, enlazar las páginas, etc.
1. Elegir posibles temas a tratar en la página web.
temáticas que te puedan interesar para realizar la página web. Más adelante iremos eliminando
y añadiendo otras según los factores que vamos a tener en cuenta y según cuál sea tu objetivo:
TEMAS DE EJEMPLOS ANOTA TUS POSIBLES TEMAS

Capacitación de Informática
Mi artista favorito
Negocio familiar
Mi ciudad
Mi escuela
8
2.
Es importante saber el tipo de Web que queremos crear, es el punto de partida que afecta a
todas las etapas posteriores de creación, realizaremos un diseño, aplicaciones, navegabilidad
adecuadas al tipo de Web seleccionada. Ejemplos:
EJEMPLOS: CLASIFICACIÓN
Capacitación de Informática Sitio Web profesional
Mi artista favorito Sitio Web de ocio
Negocio familiar Sitio Web comercial
Mi ciudad Sitio web de información
Mi escuela Sitio web de información
ANOTA TUS TEMAS Y CLASIFÍCALOS SEGÚN SU TIPO.

(Como se muestra en el ejemplo)
MIS TEMAS CLASIFICACIÓN
3.- Escoge un tema para tu página web.
El factor más importante, es, que el tema nos apasione. De modo que de la lista de temas
que tengo, voy a ordenarlos según me gusten. (El tema que quede primero es sobre el que
desarrollarás tu sitio web).
EJEMPLOS: TEMAS ORDENADOS MIS TEMAS ORDENADOS

Mi escuela
Mi ciudad
Mi artista favorito
Capacitación de Informática
Negocio familiar
9
Después que hayas seleccionado el tema Sitio web es necesario
ANOTA TU TEMA Y LA INFORMACIÓN QUE TE GUSTARÍA MOSTRAR

EN TU SITIO WEB. (Como se muestra en el ejemplo).
EJEMPLO: MI ESCUELA MI TEMA:

Historia de mi escuela
Materias que imparten
Otros Planteles
Actividades que realiza
Envío de correos
Enlaces a otras páginas de interés
5.- ¿Qué fuentes de información tengo?
Una fuente de información es el lugar del que manan los conceptos, las ideas y los pensamientos
que sirven para la creación de nuevo conocimiento en este caso una página web. Por tanto, en este
apartado necesitamos recolectar las fuentes de información de donde vamos a extraer información
del tema del Sitio Web que estás diseñando.
TEMA: Mi escuela
www.cobachbc.edu.mx
Internet para buscar páginas de interés relacionados con el tema
Enlaces a direcciones de cursos como: www.aulaclic.com, www.aulafacil.com, etc.
10
ANOTA TU TEMA Y LAS FUENTES DE CONSULTA PARA CREAR TU SITIO WEB.
(Como se muestra en el ejemplo)
FUENTES DE INFORMACIÓN DE MI TEMA:
6.- Escalabilidad
/DHVFDODELOLGDGVHGH¿QHFRPRODVYLVLRQHVDFRUWR\ODUJRSOD]RDFHUFDGHQXHVWURVLWLR:HE
si a largo tiempo queremos ampliar nuestro sitio web con nuevas aplicaciones, nuevas páginas,
actualizaciones constantes de que va a depender que realicemos esto:
EJEMPLO DE LA ESCALABILIDAD EN MI PÁGINA: MI ESCUELA
(OVLWLRVHUHYLVDUiFRQVWDQWHPHQWH\VHPRGL¿FDUiFXDQGR\DKD\DQYHQFLGRORVHQODFHVHVWp
muy lenta debido a la cantidad de visitas que tenga, cuando sea necesario ampliarla, agregar
más información o enlaces. Lo que suceda primero.
MENCIONA CADA CUANDO VAS A REALIZAR ESCALABILIDAD EN TU SITIO WEB.

(Como se muestra en el ejemplo).
ESCALABILIDAD EN MI PÁGINA:
11
3ODQL¿FDFLyQHMHPSOR
En todo proceso de creación y diseño de páginas web el primer paso a llevar a cabo será la
SODQL¿FDFLyQTXHLQFOX\HODGH¿QLFLyQGH
a) OBJETIVOS: Presentar información de la preparatoria que sea atractiva para los

jóvenes de nuevo ingreso.
b) PÚBLICOLGHQWL¿FDUHOWLSRGHSHUVRQDVDODTXHYDGLULJLGDODLQIRUPDFLyQHQHVWHFDVR
todo tipo de personas podrán acceder a la página pero el público seleccionado será los
estudiantes de secundaria y todos aquellos jóvenes que estén buscando educación del nivel
medio superior.
c) CONTENIDO: habrá información sobre el plantel y la preparación que otorga a los jóvenes.
d) ESTRUCTURA: Estará formada por una página principal que brindará información y ofrecerá
enlaces para ir a las secciones del sitio web: materias, capacitaciones, paraescolares, etc.
Tendrá otras 3 páginas web más que estarán ligadas a la primera, como se muestra en la
estructura siguiente:
12
REALIZA LA PLANIFICACIÓN DE TU SITIO WEB SEGÚN EL TEMA QUE HAYAS SELECCIONADO:
13
'H¿QLFLyQGHOGLVHxR
'HSHQGLHQGRGHOWLSRGHZHEHOWHPDVHOHFFLRQDGRGH¿QLGDODLQIRUPDFLyQ\ODHVFDODELOLGDG
estamos preparados para plasmar en papel el diseño del sitio web, incluyendo las páginas,
los fondos, tipos de letras, botones, formularios, links, plantillas, aplicaciones... de tal forma
que obtengamos "storyboard" (es un conjunto de ilustraciones mostradas con el objetivo de
servir de guía para entender una historia, previsualizar una animación o seguir la estructura de
una página web antes de realizarse) de los elementos y diseño que queremos implementar en
nuestro sitio web.
Ejemplo de la página principal del Sitio web de mi escuela:
14
REALIZA EL DISEÑO DE TU PÁGINA PRINCIPAL DEL TEMA DEL SITIO WEB QUE
SELECCIONASTE.
(Apóyate en el ejemplo anterior)
15
¿Cómo empiezo a escribir HTML?
1RWHSDGR%ORFGHQRWDVes un
Para comenzar tan solo necesitas un editor de texto para escribir las editor de texto simple incluido
páginas y un navegador para visualizarlas. en los sistemas operativos
de Microsoft desde 1985. Su
El editor no debe formatear el texto. Usa el Bloc de notas funcionalidad es muy sencilla,
(Notepad), las etiquetas y sus atributos se pueden escribir en con capacidades de formato
mayúsculas o minúsculas. El lenguaje ignora, también, los espacios (negrita, cursiva...) propias
de procesadores de textos, o
en blanco seguidos, donde sólo cuenta uno de ellos.
facilidades de programación.
Una vez que hayas escrito una página, guárdala en un archivo con extensión .htm o .html.
• Abrir el Bloc de notas
1. Desde el botón Inicio situado, normalmente, en la esquina inferior izquierda

de la pantalla. Colocar el cursor y hacer clic sobre el botón Inicio, se despliega un menú; al
colocar el cursor sobre Programas aparece otra lista con los programas que hay instalados
en tu computadora, buscar Accesorios, seguidamente Bloc de notas, hacer clic sobre él, y
se abrirá el programa.
2. Desde el icono del Bloc de notas del escritorio .
• Cerrar el Bloc de notas, puedes utilizar cualquiera de las siguientes operaciones:
1. Hacer clic en el botón cerrar
2. Pulsar la combinación de teclas ALT+F4.
3. Hacer clic sobre el menú Archivo y elegir la opción Salir.
6L HO GRFXPHQWR KD VLGR PRGL¿FDGR \ QR KD VLGR JXDUGDGR DQWHV GH FHUUDU VH WH SHGLUi
FRQ¿UPDFLyQSDUDJXDUGDUORDQWHVGHFHUUDUHOSURJUDPD
• Escribir en el Bloc de notas
1. Siempre que se abre el bloc de notas aparece un documento en blanco. A la hora de escribir
en él, funciona como cualquier otro editor de texto, basta con situar el cursor en el documento
y escribir. Es recomendable insertar una nueva línea para cada nueva etiqueta HTML, ya
que resulta más fácil trabajar de este modo. Si escribiéramos todo el código seguido nos
resultaría difícil interpretarlo, por ello es preferible programar insertando las etiquetas por
separado, en diferentes líneas.
A través del menú Formato, opción Fuente, puedes cambiar la fuente de todo el documento.
Si lo deseas, puedes hacer la letra algo más grande o pequeña.
16
• Abrir un documento
Como el Bloc de notas
sirve originalmente para
1. Pulsar la combinación de teclas Ctrl+A.
escribir documentos de
2. Hacer clic sobre el menú Archivo y elegir la opción Abrir. texto, cuando le decimos
Abrir, por defecto nos
Para guardar un documento, puedes utilizar cualquiera de las muestra los documentos
siguientes operaciones. con extensión .txt, nuestras
páginas tienen la extensión
1. Pulsar la combinación de teclas Ctrl+G. .htm o html, por lo que,
debemos cambiar en el
2. Hacer clic sobre el menú Archivo y elegir la opción Guardar.
cuadro de diálogo, abrir,
A la hora de guardar un documento no debes olvidar guardarlo con el tipo de archivo para asi
visualizar todos y poder
la extensión htm o html. Por ejemplo, puedes guardar un documento
abrir así nuestras páginas.
con el nombre mipágina.htm.
1.2 MANEJAR LOS ELEMENTOS BÁSICOS DEL LENGUAJE HTML EN LA CREACIÓN

DE PÁGINAS WEB
Antes de empezar a crear el sitio web es necesario que conozcas los términos básicos
que estarás utilizando en el transcurso de este bloque, por lo que debes de realizar una
E~VTXHGDHQ,QWHUQHWSDUDTXHSXHGDVGH¿QLUORV
NOMBRE: ________________________________________ GRUPO: ________
Bloc de notas:
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
Buscador:
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
Compatible: __________________________________________________________________
_____________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
17
Estructura de página web:
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
Etiqueta:
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
Hipertexto:
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
Lenguaje html:
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
Marcas (tag):
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
Navegador:
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
Página web:
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
Plataforma:
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
Sitio web:
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
Servidor web:
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
Vínculos
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
18
Ahora sí, es tiempo de empezar con la programación de la página web. Es importante
que realices con tu equipo de trabajo todas las actividades que se te indican, para
posteriormente capturarlas en el bloc de notas. Pronto verás los resultados de tu página.
¡Ánimo y adelante!
Realiza la lectura “estructura básica” a la par que van desarrollando las actividades referentes
al diseño de su página. Pregunta al profesor todas las dudas que te vayan surgiendo.
Estructura básica
• Cada página comienza con: < HTML > .
• A continuación viene la cabecera, delimitada por < HEAD > < /HEAD >
• Después, el comando < BODY >, que indica el comienzo del cuerpo de la página.
• /DVLQVWUXFFLRQHV+70/VHHVFULELUiQDFRQWLQXDFLyQ\¿QDOL]DUiQFRQ< /BODY >
• La página acabará con < /HTML >

Las etiquetas pueden estar escritas
en minúsculas o mayúsculas y no
Es decir: marca error por eso, pero sí sería un
error no escribirlas correctamente,
<HTML> lo que ocasionaría que no se
<HEAD> mostrara correctamente nuestra
'H¿QLFLRQHVGHODFDEHFHUD página Web. Sin embargo, es
</HEAD> recomendable que adoptemos un
<BODY> solo formato al escribirlas, es decir
Instrucciones HTML o todas las etiquetas las escribimos
solo con minúsculas o todas las
</BODY>
escribimos con mayúsculas, esto
</HTML> para evitar que al momento de subir
las páginas al servidor, los enlaces
generen error.
Ejemplo 1
<html>
<head>
</head>
<body>
COLEGIO DE BACHILLERES DEL ESTADO DE BAJA CALIFORNIA

</body>
</html>
19
Etiqueta:<title></title>
(VWDHWLTXHWDYDHQODSDUWHGHOHQFDEH]DPLHQWRGHODSiJLQDZHEHVGHFLUHQHO+($'\GH¿QH
en su contenido el título de la página web, misma que aparecerá en la parte superior izquierda de
la pantalla de tu navegador.
Sin cerrar nuestro navegador de Internet, volvemos al editor de texto e incluimos el campo
<title> entre las etiquetas de apertura y cierre del encabezado (head).
20
Trascribe el código siguiente en el bloc de notas, graba el archivo con el nombre
INDEX.HTML. (CONSERVA ESTE ARCHIVO PORQUE LO VAS A UTILIZAR EN LAS
ACTIVIDADES SIGUIENTES). Una vez realizado esto, y sin cerrar el editor de texto,
vamos al navegador, da clic en el menú archivo, selecciona la opción abrir, busca el
archivo, selecciónalo y ejecútalo dando doble clic en abrir. Tu nueva página estará visible.
Nota que el título aparecerá en la parte superior (pestaña de la página).
Ejemplo 2:
<html>
<head>
<title> MI PRIMER PÁGINA</title>
</head>
<body>
</body>
</html>
21
Etiqueta <body> “ “ </body>
Todo el texto, las imágenes y el formato visibles al usuario deben Los atributos se
encontrarse entre las etiquetas incluyen en la eti-
queta de apertura,
separados por un
<BODY> “ “ < /BODY > .
espacio.
Puede llevar los siguientes atributos:
Bgcolor 'H¿QHHOFRORUGHIRQGRGHODSiJLQD.
Text 'H¿QHHOFRORUGHOWH[WRGHODSiJLQD.
Link 'H¿QHHOFRORUGHORVYtQFXORVHQODSiJLQD.
Alink 'H¿QHHOFRORUGHOYtQFXORDFWXDORDFWLYDGRHQODSiJLQD.
Vlink 'H¿QHHOFRORUGHOYtQFXOR\DYLVLWDGR.
Background 'H¿QHHODUFKLYRJUi¿FRTXHVHUiGHVSOHJDGRFRPRIRQGR.
Bgsound 'H¿QHHODUFKLYRGHDXGLRTXHVHWRFDUiHQODSiJLQD.
Bgproperties 'H¿QHHOPRYLPLHQWRYHUWLFDOGHOIRQGR.
¿Cómo se utilizan los colores en HTML?
Se pueden llegar a tener 16 millones de colores en una página web. Existen dos formas para aplicar
colores:
6HHVSHFL¿FDHOFRORUGHVHDGRGLUHFWDPHQWHFRQHOQRPEUHGHOFRORUHQLQJOHV(MHPSOR
blue, green, yellow
6H HVSHFL¿FD HO FRORU GHVHDGR PHGLDQWH Q~PHURV KH[DGHFLPDOHV H M H P S O R
#RRVVAA
Donde se indica en formato hexadecimal la proporción de rojo, verde y azul que forma el
color deseado. El símbolo # es opcional. Un número hexadecimal es un número en base 16, la base
normal utilizada es base 10 o decimal del 0 al 9. En este caso los número validos serán del 0 al 9
añadiendo desde la a o A a la f o F. Por tanto el número 0F será el 15, 0E será 14.
22
(QODHVSHFL¿FDFLyQGHOFRORUXWLOL]DUHPRVSDUDGH¿QLUODSURSRUFLyQGHFDGDFRORUXQQ~PHUR
del 0 al FF (255), 0 indica nada de ese color y FF la mayor proporción del color.
Ejemplos de colores:
Ingresa al bloc de notas y realiza lo siguiente:
1 Abre el archivo “index.html”.

3 Continúa trascribiendo el ejercicio 3
4 Graba con el mismo nombre.
5 Ejecuta y si muestra algún error corrígelo.
5 Ingresa a la página http://www.usuarios.sion.com/pauluk/coloreshtml.htm
Checa los códigos de los colores.
6 Cambia el código del color de la página que transcribiste, graba, ejecuta
y observa la diferencia.
Ejemplo 3:
<html>
<head> <title>MI PRIMER PÁGINA</title> </head>
<body bgcolor=”#DCDCDC” text=”#000000”>
</body>
</html>
23
Texto en HTML
Un sitio web se visualiza en países distintos, que usan conjuntos de caracteres distintos.
El lenguaje HTML nos ofrece un mecanismo por el que podemos estar seguros que una serie de
caracteres raros se van a ver bien en todos los ordenadores independientemente de su juego de
caracteres. Cuando queremos poner uno de estos caracteres especiales en una página, debemos
sustituirlo por su código. Por ejemplo, la "á" (a minúscula acentuada) se escribe "á" de
modo que la palabra página se escribiría en una página HTML de este modo: página.
A continuación, se muestra una lista con algunos caracteres y el nombre con el que han de ser
representados:
24
Ejemplo 4:
<html>
<head> <title> MI PRIMER PÁGINA</title> </head>
<body bgcolor=”#C0D9D9” text=”#000000”>
Estoy aprendíiendo a hacer mi página WEB
</body>
</html>
Nota que el texto

se encuentra de
corrido en una sola
¿ODSDUDEDMDUGH
línea utilizaremos la
siguiente etiqueta.
25
Etiqueta 
La etiqueta instruye al navegador cliente que inserte un salto de línea en un documento
HTML. La etiqueta tiene el mismo efecto que un retorno de carro en una máquina de
escribir. Es una etiqueta especial, pues no precisa de etiqueta de cierre.
Etiqueta <hr>
La etiqueta <hr> dibuja de manera predeterminada una regla horizontal alineada

automáticamente, con una apariencia de tercera dimensión. Esta etiqueta especial, como no
necesita de cierre se vale de los siguientes atributos:
Establece que la regla se alinee a la izquierda, centro o derecha. LEFT,CENTER

Align
o RIGHT
NOSHADE Quita el sombreado predeterminado de la regla.
WIDTH 3HUPLWHHVSHFL¿FDUHODQFKRGHODUHJODHQSL[HOHVRSRUFHQWDMH.

SIZE 3HUPLWHHVSHFL¿FDUHODOWRGHODUHJODHQSL[HOHV.
26

3 Continúa trascribiendo el ejercicio 5.
5 Ejecuta y si muestra algún error corrígelo y vuelve a ejecutar.
5 Practica los diferentes atributos de la etiqueta <hr>.
Ejemplo 5
<html>
<head>
<title>COBACH</title>
</head>
<body bgcolor="#C0D9D9" text="#000000">
COLEGIO DE BACHILLERES DEL ESTADO DE BAJA CALIFORNIA 
3/$17(/0(;,&$/,EU!
<hr align=left width=100% size=10> 
Mi página WEB 
</body>
</html>
27
Encabezados
Los títulos o encabezados se emplean al comienzo de una sección. Las etiquetas que se usan son:
Etiqueta Se ve
<h1> Título </h1> Título

K!TítuloK! Título

3 Continúa trascribiendo el ejercicio 6.
5 Ejecuta y si muestra algún error corrígelo y vuelve a ejecutar.
5 Practica los diferentes tamaños de encabezados.
Ejemplo 6:
<html>
<head> <title>COBACH</title> </head>
<h1 align="center">
COLEGIO DE BACHILLERES DEL ESTADO DE BAJA CALIFORNIA</h1> 
KDOLJQ FHQWHU!3/$17(/0(;,&$/,K!
<hr align=center width=100%> 
Mi página WEB
</body>
</html>
28
Etiquetas para el texto
El lenguaje HTML es un lenguaje de marcas, estas marcas serán fragmentos de texto

GHVWDFDGRGHXQDIRUPDHVSHFLDOTXHSHUPLWHQODGH¿QLFLyQGHODVGLVWLQWDVLQVWUXFFLRQHVGH+70/
tanto los efectos a aplicar sobre el texto como las distintas estructuras del lenguaje. A estas marcas
las denominaremos etiquetas y serán la base principal del lenguaje HTML. En documento HTML
será un archivo texto con etiquetas que variarán la forma de su presentación.
Una etiqueta será un texto incluido entre los símbolos menor que < y mayor que >. El texto
incluido dentro de los símbolos será explicativo de la utilidad de la etiqueta.
29
Por ejemplo:
ETIQUETA SE VERÁ ASÍ

Texto en Negrita Texto en Negrita
Itálica Itálica
Negrita e Itálica 1HJULWDH,WiOLFa
Subrayado Subrayado Solo Explorer
Enfatizado Enfatizado
Fuerte Fuerte
<CODE>Code Texto</code> Code Texto
<CITE> Citation Text</cite> Citation Text
<KBD>Keyboard Text</kbd> Keyboard Text
<SAMP>Sample Text</samp> Sample Text
<TT>Teletype Text</tt> Teletype Text
<VAR>Variable Element Text</var> Variable Element Text
<BIG>Texto grande</big> Texto grande
Texto pequeño Texto pequeño
Subindice Subíndice Solo Explorer
Superíndice Superíndice
Solo Explorer
<BLINK> Texto intermitente</blink> Texto intermitente Solo Netscape
<STRIKE>Texto tachado</STRIKE> Texto tachado
Atributos de las etiquetas
/DVHWLTXHWDVSXHGHQSUHVHQWDUPRGL¿FDGRUHVTXHOODPDUHPRVDWULEXWRVTXHSHUPLWLUiQGH¿QLU
GLIHUHQWHVSRVLELOLGDGHVGHODLQVWUXFFLyQ+70/(VWRVDWULEXWRVVHGH¿QLUiQHQODHWLTXHWDGHLQLFLR
y consistirán normalmente en el nombre del atributo y el valor que toma separados por un signo
de igual. El orden en que se incluyan los atributos es indiferente, no afectando al resultado. Si se
incluyen varias veces el mismo atributo con distintos valores el resultado obtenido será imprevisible
dependiendo de cómo lo interprete el navegador. Cuando el valor que toma el atributo tiene más de
una palabra deberá expresarse entre comillas, en otro caso no será necesario.
Un ejemplo de atributo será:
$+5() KWWSFREDFKEFHGXP[!3iJLQDR¿FLDOGHFREDFK$!
En este caso la etiqueta A presenta un atributo HREF cuyo valor es http://cobachbc.edu.mx
30
Igualmente una etiqueta podría presentar varios atributos:
<HR ALIGN=LEFT NOSHADE SIZE=5 WIDTH=50%>
En este caso la etiqueta HR presenta cuatro atributos. El segundo atributo NOSHADE es un

FDVRHVSHFLDOTXHQRSUHVHQWDYDORU(ORUGHQHQTXHVHHVSHFL¿TXHQORVDWULEXWRVQRDIHFWDUiDO
UHVXOWDGR¿QDO
1 Abre el archivo que grabaste con el nombre de index.html.

2 Continua trascribiendo la parte que falta del ejercicio 7.
3 Graba con el mismo nombre y ejecuta.
4 Observa la página que te presenta, si muestra algún error corrígelo y vuelve
a ejecutar.
5 Practica las diferentes etiquetas para texto.
EJEMPLO 7:
<html>
<head>
<title>COBACH</title>
</head>
<h1 align="center">
</h1> 
<h2 align="center">
3/$17(/0(;,&$/,
</h2>
<hr width=100% size=5> 
Ejemplo del uso de las etiquetas 
Este texto está con negrillas 
Este texto está con subrayado 
Este texto está con inclinación itálica 
Este texto cuenta con un combinado de todo. 
</body>
</html>
31
Etiqueta 
3UHVHQWDDWULEXWRVTXHQRVSHUPLWHQPRGL¿FDUHOWDPDxR\FRORUGHOWH[WRLQFOXLGRHQWUHODHWLTXHWD
GHLQLFLR\¿Q
ATRIBUTO FUNCIÓN
Color Determina el color que se aplica al texto.
Determina el tamaño relativo del texto. Los tamaños válidos son

Size
del 1 al 7, siendo el predeterminado el 3 y el más grande el 1.
Face Asigna una fuente o tipo de letra.

2 Continua trascribiendo la parte que falta del ejercicio 8.
a ejecutar.
5 Practica los diferentes atributos de la etiqueta .
32
Ejemplo 8:
la
<html> siguiente: NORMA, Nota que la
primera N es más grande que el
<head> <title>COBACH</title> </head> demás texto. Usaremos el tamaño
<body bgcolor="#FFFFFF" text="#000000"> 7 para la letra N, el tamaño 6 para
<h1 align="center"> las l e t r a s O R y e l t a m a ñ o 7
COLEGIO DE BACHILLERES DEL ESTADO para las letras MA.
DE BAJA CALIFORNIA</h1> 
KDOLJQ FHQWHU!3/$17(/0(;,&$/,K!
<hr width=100% size=5> 
Ejemplo del uso de las etiquetas 
Este texto está con negrillas 
Este texto está con subrayado 
Este texto está con inclinación itálica 
Este texto cuenta con un combinado de todo. 
N
or
ma 
</body>
</html>
33
DESPUÉS DE HABER PRACTICADO LOS EJERCICIOS ANTERIORES, COMPLETA
LA TABLA SIGUIENTE EXPLICANDO LA FUNCIÓN QUE REALIZA CADA ETIQUETA:
34
Es tiempo de que empieces a realizar tu página principal, por lo que es importante que
UHYLVHVHOGLVHxRTXHKLFLVWH\HPSLHFHVDGH¿QLUFDGDXQRGHORVHQFDEH]DGRVTXHYDQ
formar parte de tu página principal.
En el siguiente recuadro anota las etiquetas que vas a necesitar para mostrar los
encabezados de tu página y posteriormente los transcribes en el bloc de notas.
35
Imágenes en los documentos HTML
Etiqueta <img>
En un documento HTML se puede incluir cualquier imagen en alguno de los siguientes formatos
JUi¿FRVGIF, JPEG o XBM. El formato más extendido y practico es el GIF, todos los navegadores
JUi¿FRV GH OD :HE VRSRUWDQ HVWH IRUPDWR DGHPiV H[LVWHQ JUDQ FDQWLGDG GH SURJUDPDV GH
WUDWDPLHQWRGHJUi¿FRVTXHSHUPLWHQJUDEDUORVJUi¿FRVRFRQYHUWLUJUi¿FRVD*,)(VWHIRUPDWRDVt
mismo, utiliza algoritmos de compresión que hacen que sus archivos sean en cuanto a su tamaño
apropiados para su transmisión por la red.
(OIRUPDWR*,)HVPiVUHFRPHQGDGRSDUDLFRQRVJUi¿FDV\HOIRUPDWR-3(*HVPiV~WLOSDUD
imágenes reales como paisajes y personas.
3DUDSRGHUXWLOL]DURWURIRUPDWRJUi¿FRQHFHVLWDUiVXVDUXQHQODFHFX\RGHVWLQRVHDODFDUSHWD
GHOJUi¿FR$OVHJXLUHOHQODFHVHWHSHGLUiTXHLQGLTXHVXQSURJUDPDH[WHUQRTXHVHHQFDUJXHGH
PRVWUDUORVDUFKLYRVGHHVHIRUPDWRJUi¿FRSRUWDQWRQRSXHGHQLQVHUWDUVHGHQWURGHGRFXPHQWRV
HTML.
Inclusión de Imágenes
La etiqueta encargada de mostrar imágenes en HTML es IMG y tiene el siguiente formato:
<IMG SRC="URL de la Imagen" ALT="Texto alternativo a la imagen">
En el punto del archivo HTML en el que queramos que se muestre la imagen incluimos esta
HWLTXHWD6HSXHGHPRVWUDUODLPDJHQDOFRPLHQ]RGHOGRFXPHQWRDO¿QDORLQWHUFDODGDHQHOWH[WR
Igualmente se puede insertar una imagen dentro de cualquiera de las estructuras del lenguaje
+70/FRPROLVWDVWDEODVRIRUPXODULRV(VWDHWLTXHWDQRQHFHVLWDODHWLTXHWDGH¿Q\DTXHHOHIHFWR
de la etiqueta no se produce sobre un texto o algún elemento HTML.
El atributo SRC indica el archivo de imagen que se incluirá en el documento. Se indicará el

camino hasta la imagen en formato URL, el archivo de la imagen deberá tener una extensión
apropiada a su formato, por ejemplo si es GIF la extensión será .gif, si es JPEG la extensión será
.jpg o .jpeg, si no se cumple esto la imagen no se mostrará de forma correcta.
$OGH¿QLUODLPDJHQFRPRXQD85/HVWDLPDJHQQRHVQHFHVDULRTXHVHHQFXHQWUHHQHOVHUYLGRU
ORFDO SXGLHQGR HVSHFL¿FDU HO FDPLQR FRPSOHWR \ HO VHUYLGRU GRQGH VH HQFXHQWUD OD LPDJHQ (Q
este caso al igual que en los hiperenlaces es posible indicar direcciones de URL relativas a los
documentos actuales.
Lo normal es referenciar una imagen que se encuentre en el servidor local, ya que el acceso a
imágenes en servidores externos puede ser más lento. Por tanto, conviene copiar las imágenes e
iconos que se usen al servidor local.
A continuación, se explica la utilidad de cada uno de los atributos de la etiqueta IMG.
36
Texto alternativo
El atributo ALT, indicará un texto alternativo a mostrar si no fue posible mostrar la imagen. Se
usa para navegadores que no permitan mostrar imágenes, sean solo texto o tenga inhabilitado
el mostrar imágenes. Se recomienda cuando existan en el documento imágenes usadas como
de esta forma se consigue que todos los usuarios puedan consultar sus páginas.
Alineación de la imagen
Indica cómo se alinea el texto que sigue a la imagen con respecto a ésta. Indicará si la primera
frase del texto se colocará en la parte alta de la imagen, TOP, en el punto medio de la imagen,
MIDDLE, o en la parte de abajo de la imagen, BOTTOM.
También se pueden utilizar alineaciones un poco más avanzada, TEXTTOP se alinea justo al
comienzo del texto más alto de la línea (TOP se alinea al tamaño del primer carácter de la línea).
ABSMIDDLE, es el centro real de la imagen, con MIDDLE se coloca el texto a partir del punto
medio, con ABSMIDDLE el texto aparece centrado con la imagen. ABSBOTTOM coloca el texto
aunque solo son válidos para los navegadores más avanzados.
Resul-
tado
37
resto se incluyen debajo de la imagen quedando un efecto muy feo cuando el texto tiene más
de una línea. Existen otras alineaciones que incluirán a la imagen insertada dentro del texto.
La imagen puede quedar a la izquierda, LEFT o a la derecha, RIGHT. No se podrá utilizar en
combinación con las anteriores alineaciones.
38
Tamaño de la imagen
Es posible cambiar el tamaño de la imagen de forma que pueda ajustarse como se desee,
pudiendo ampliar o disminuir este.
El atributo HEIGHT 'HWHUPLQD HO DOWR GH OD LPDJHQ D PRVWUDU VH HVSHFL¿FD HQ SXQWRV GH OD
pantalla (pixeles) o en tanto por ciento sobre el tamaño del documento. En caso de que la imagen
sea mayor o menor se escalará a este tamaño.
El atributo WIDTH indica el ancho al que se mostrará la imagen, escalándola a este tamaño.
También se expresará en pixeles o en tanto por ciento.
1RHVQHFHVDULRLQGLFDUHODQFKR\HODOWRVHSXHGHHVSHFL¿FDUVRORXQDGHODVGLPHQVLRQHV
ajustándose la otra a la proporción de la imagen. Es recomendable indicar solo uno de estos
parámetros para que la imagen no se muestre deformada. Igualmente se debe usar el valor relativo
en tanto por ciento si se desea que la imagen guarde siempre una misma proporción con respecto
al texto. Si se desea mostrar dos imágenes y queremos que una ocupe un cuarto de la pantalla
y la otra el espacio restante, se indica en una el ancho (WIDTH) del 25% y en la otra del 74%,
no indicando en ningún caso el alto (HEIGHT), de esta forma independientemente como sea el
tamaño de la ventana del navegador e independientemente del monitor del cliente, siempre se
podrán mostrar ambas imágenes en la misma línea.
39
Si varía el tamaño de la ventana de su navegador, comprobará que el tamaño de las
imágenes cambia, pero guardan la misma proporción, el obrero ocupa 9% de la ventana y

2 Continúa trascribiendo la parte que falta del ejercicio 9.
a ejecutar.
5 Practica las diferentes ubicaciones de las imágenes.
40
Ejemplo 9:
(V QHFHVDULR TXH OD LPDJHQ
<html> OODPDGD VH HQFXHQWUH HQ
<head> OD FDUSHWD HQ GRQGH HVWiV
JXDUGDQGRWRGRVORVHMHUFLFLRV
<title> COBACH </title> SDUD TXH HO QDYHJDGRU SXHGD
</head> PRVWUDUOD GH OR FRQWUDULR WH
SUHVHQWDUiVRORXQFXDGUR
<Body bgcolor = "#00FFFF">
<IMG SRC="NOMBRE DE TU IMAGEN" ALIGN=MIDDLE HSPACE=100>


 COLEGIO DE BACHILLERES DEL ESTADO DE BAJA CALIFORNIA

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

<a href="http://cobachbc.edu.mx/">COBACH </a> 



05 noviembre del 2011


</Body>
</html>
41
Tablas
En HTML también podemos incluir arreglos de tablas. Se deben utilizar varias etiquetas:
Etiqueta <table></table>
ETIQUETA FUNCIÓN
Establece la alineación de la tabla o texto mediante
Align
ALIGN=LEFT o ALIGN=RIGHT.
Bgcolor Establece el color de fondo de las celdas de la tabla.
Border Determina el ancho del borde en pixeles.
BorderColor Asigna un color al borde.
BorderDark Determina el color de la parte oscura de un borde de 3 dimensiones
BorderLight Asigna el color de la parte clara de un borde de 3 dimensiones.
Caption .
Cellpadding Establece la cantidad de espacio libre junto al contenido de una celda.
Cellspacing Asigna la cantidad de espacio entre las celdas de una tabla.
Width Determina el ancho de la tabla en pixeles o en un porcentaje
Etiqueta <th> </th>
tabla. Atributos principales:
ETIQUETA FUNCIÓN
Indica el número de columnas que ocupará la celda. Por defecto ocupa una
Colspan
sola columna.
Rowspan:
Align Determina la posición del texto del título.
42
Etiqueta <tr> </tr>
ETIQUETA FUNCIÓN
Align Alineación del texto/objeto de la celda.
Etiqueta <td> </td>
tabla. Atributos principales:
ETIQUETA FUNCIÓN
Align Alineación del texto/objeto de la celda.
Bgcolor Color de fondo de la celda.
Background Imagen de fondo de una celda.
Ancho de la celda/columna con respecto al ancho de la tabla

Width
columna.
entera.
1 Trascribe el ejercicio 10.

2 Graba con el nombre de Planteles.Html.
3 Ejecuta el archivo, si presenta errores corrígelos.
4 Observa la tabla que te presenta la página.
5 Modifícala a tu gusto.
43
Ejemplo 10:
<html>
<head>
<title> PLANTELES </title>
</head>
 COLEGIO DE BACHILLERES DEL ESTADO DE BAJA CALIFORNIA

 <center>
<table width=80% align=center border=3>
Graba con el
<tr><th colspan=3>PLANTELES OFICIALES</th></tr> nombre de
<tr align=center> ³SODQWHOHVKWPO´
<td width=40% bgcolor="#C0C0C0"> PLANTEL y abre la página
</td> en tu navegador.
<td width=30% bgcolor="#C0C0C0"> TELÉFONO
</td>
<td width=30% bgcolor="#C0C0C0">UBICACIÓN
</td>
</tr>
<tr>
<td> Mexicali</td>
<td>5534340</td>
<td>Colonia Nueva</td>
</tr>
<tr>
<td>Baja California</td>
<td>5530044</td>
<td>Colonia Baja California</td>
</tr>
<tr>
<td>José Vasconcelos</td>
<td>453444</td>
<td>Nuevo Mexicali</td>
</tr>
<tr>
<td> Ciudad Morelos</td>
<td> 016585147018</td>
<td> Ciudad Morelos</td>
</tr>
<tr>
<td> Guadalupe Victoria</td>
<td> 016585162237</td>
44
<td> Colonia Guadalupe Victoria</td>
</tr>
<tr>
<td> Nuevo León</td>
<td>5230110 </td>
<td> Ejido Nuevo León</td>
</tr>
<tr>
<td> San Felipe</td>
<td> 5771725</td>
<td> San Felipe</td>
</tr> <tr>
<td> Nayarit</td>
<td> 5234376</td>
<td>Ejido Nayarit </td>
</tr>
<tr>
<td> Estación Coahuila</td>
<td> 016535155354</td>
<td> Estación Coahuila</td>
</tr>
</table>
 </center>
</Body>
</html>
45
PARTE 3
En el siguiente recuadro diseña la tabla con los datos que vas a mostrar en tu segunda
página, anota también las etiquetas que creas convenientes aplicar para programar tu
tabla.
46
Listas
Con frecuencia se usan listas en los documentos. El lenguaje HTML incorpora unas listas
con viñetas sencillas o también letras o números. Para dar más vistosidad a las páginas,
se suelen emplear también imágenes que se colocan delante de cada párrafo. Vamos a ver
algunas de las posibilidades que tenemos.
Listas con viñetas desordenadas

He aquí el ejemplo más sencillo de una de estas listas:
ESCRIBIMOS EN HTML SE VERÁ ASÍ

<ul>
<li>Primer término de la lista • Primer término de la lista
<li>Segundo término • Segundo término
<li>Tercer término • Tercer término
</ul>
&RPRYHVODOLVWDVHGHFODUDFRQODHWLTXHWD8/!\¿QDOL]DFRQHOFLHUUHGHODPLVPD8/!
7DPELpQSRGHPRVPRGL¿FDUODVYLxHWDVSRUPHGLRGHODWULEXWR7<3( FLUFOHGLVFRVTXDUH
(círculo, disco o cuadrado) y añadir sublistas.

<ul>
<li type= disc>Primer término de la lista
<ul> • Primer término de la lista
<li>Sublista * Sublista
<li>Otro elemento * Otro elemento
</ul> • Segundo término
<li type=circle>Segundo término • Tercer término
<li type=square>Tercer término
</ul>
Otro atributo interesante es compactar para reducir el espacio entre los elementos.
47
Listas con viñetas ordenadas
Estas listas se caracterizan porque aparecen números o ciertos caracteres que ordenan
sus elementos. La etiqueta usada es <OL> junto con su correspondiente de cierre </OL>. El
DWULEXWR7<3(WRPDDKRUDORVYDORUHVD$L,8QHMHPSORGHHVWDVOLVWDVHVHOVLJXLHQWH

<ol type=i>
<li >Primer término de la lista i. Primer término de la lista
<li >Segundo término ii. Segundo término
<li>Tercer término iii. Tercer término
<li>Cuarto iv. Cuarto
<li>Quinto v. Quinto
</ol>
/LVWDVGHGH¿QLFLyQ
(VWDV OLVWDV VH IRUPDQ FRQ HO HOHPHQWR TXH VH GH¿QH \ VX GH¿QLFLyQ /DV HWLTXHWDV VRQ
'/!\'/!SDUDODOLVWD\GW!\GG!SDUDORVHOHPHQWRV\VXVGH¿QLFLRQHV8QHMHPSOR

<dl>
<dt >Término 1º Término 1º
<dd>'H¿QLFLyQGHOHOHPHQWR 'H¿QLFLyQGHOHOHPHQWR
<dt>Término 2º Término 2º
<dt>Término 3º Término 3º
</dl>
1 Trascribe el ejercicio 11.

2 Graba con el nombre de capacitaciones.html
3 Ejecuta el archivo, sí presenta errores corrígelos.
4 Observa las listas que te presenta la página.
48
Ejemplo 11:
<html>
<head>
<title> PLANTELES </title>
</head>

<ul>
<li>Planeación y Administración de Pequeños Negocios</li>
<li>Auditoría de Gestión de Calidad</li>
<li>Contabilidad Comercial y de Servicios </li>
<li>Inglés Empresarial </li>
</ul> Graba con el nombre de
<ol> y abre la página en tu

<li>Matemáticas</li> navegador.
<li>Inglés</li>
<li>Informática</li>
<li>Ética y Valores</li>
<li>Introducción a las Ciencias Sociales</li>
<li>Química</li>
<li>Taller de lectura y Redacción</li>
<li>Historia de Mexico</li>
<li>Literatura</li>
<li>Biología</li>
<li>Física</li>
<li>Álgebra</li>
<li>Lógica</li>
<li>Estructura Socioeconómica de México</li>
</ol>
<ul type=i>
<li>Orientación</li>
<li>Constrúyete</li>
<li>Paraescolares</li>
<li>Tutorías</li>
</ul>
49
</center>

<Marquee
heigh=50 bgcolor=cyan>OBSERVAS TRES TIPOS DE LISTAS
</Marquee>
DKUHI ¿OHAQUÍ ANOTA LA UBICACIÓN DE TU PÁGINA PRINCIPAL/index.
html">Principal</a> 

</Body>
</html>
50
PARTE 4
En el siguiente recuadro diseña las listas con los datos que vas a mostrar en tu tercera
página, anota también las etiquetas que creas convenientes aplicar para programar tus
listas.
51
Hipervínculos
Un vínculo hipertextual es un texto, botón o imagen que al seleccionar nos lleva a otra dirección
URL, página WEB o recurso.
Etiqueta <A> </A>
/DHWLTXHWD$!TXHYLHQHGH³DQFOD´GHQRWDHOLQLFLR\HO¿QDOGHXQDLQVWUXFFLyQTXHFRQWLHQH
alguna forma de vínculo o hipervínculo. Esta etiqueta permite al usuario vincularse a otra
ubicación dentro del mismo documento HTML, a otro sitio WEB, a un servidor FTP, enlace de
correo electrónico.
Atributos:
ETIQUETA FUNCIÓN
HREF Recurso al cual se hace referencia el hipervínculo.
NAME .
TARGET Destino del enlace (generalmente para páginas con Frames).

2 Continúa transcribiendo la parte que falta del ejercicio 12.
a ejecutar.
5 Practica los hipervínculos.
52
Ejemplo 12: $17(6 '( (03(=$5 (6 1(&(6$5,2
48( '(6&$5*8(6 &$'$ 81$ '( /$6
,0È*(1(6 '( 3$5$(6&2/$5(6 < /$6
<html>
*8$5'(6'(1752'(81$&$53(7$'(
<head> ,0È*(1(6(1780(025,$86%
<title> COBACH </title>
</head>
ERG\EJFRORU FFFFFFWH[W ႇႇႇOLQN FF!,0*65& HQFDEH]DGRMSJ!
<center>

<table border=10 CELLSPACING=0 CELLPADDING=0><tr>
<td align=right>
<center>
3/$17(/0(;,&$/,FHQWHU!
</td></tr>
</table> <hr>
KUHI ¿OH$48Ë$127$/$8%,&$&,Ï1'(783È*,1$'(7$%/$6/planteles.html">Planteles</
a> ||
D KUHI ¿OH$48Ë $127$ /$ 8%,&$&,Ï1 '( 78 3È*,1$ '( /,67$6/capacitaciones.
html">Materias</a>
<hr>
</center>

<tr>
<td>
<img src="porra2.jpg" height="150px" width="150px">
</td>
<td>
<img src="americano.jpg" height="150px" width="150px">
</td>
<td>
<img src="basqueboll.jpg" height="150px" width="150px">
</td>
<td>
<img src="banderitas.jpg" height="150px" width="150px">
</td> 
</tr>
</table>
53
<tr>
<td>
<img src="banda de guerra.jpg" height="150px" width="150px">
</td>
<td>
<img src="escolta.jpg" height="150px" width="150px">
</td>
<td>
<img src="danza.jpg" height="150px" width="150px">
</td>
<td>
<img src="teatro.jpg" height="150px" width="150px">
</td>
</tr> Graba con el nombre de
</table> ³LQGH[KWPO´ y abre la
</center> página en tu navegador.
 
<a href="mailto:$127$78',5(&&,Ï1'(&255(2(/(&75Ï1,&2">
<img src="buzon.jpg" height="32px" width="32px" />
</a>
</Body>
</html>
54
Después de haber practicado los ejercicios anteriores llena la siguiente tabla, explicando
la función que realiza cada una de las siguientes etiquetas:
55
Para terminar con la elaboración de tu sitio web, anota en el recuadro siguiente las
imágenes y texto que vas a necesitar para terminar tu página principal así como las
HWLTXHWDVTXHFUHDVFRQYHQLHQWHVDSOLFDUSDUDFRGL¿FDUWXSiJLQD
56
Marquesinas
Vamos a ver ahora lo que son las marquesinas. Son pequeñas ventanas donde vemos un texto
desplazarse. Solo son implementadas por Microsoft Internet Explorer 3.0 o superior, y no por
1HWVFDSH\ORVGHPiVQDYHJDGRUHVGRQGHVHYHUiFRPRXQWH[WR¿MR
La etiqueta básica será
<MARQUEE> y </MARQUEE>
<MARQUEE>Texto desplazándose</MARQUEE>
Esta es una marquesina por defecto, pero se pueden añadir muchos más parámetros:
Anchura y altura, WIDTH=x y HEIGHT=y, respectivamente, siendo x e y un número de pixeles o

un porcentaje de la pantalla.
<MARQUEE WIDTH=50% HEIGHT=80>Marquesina con el 50% de la ventana de ancho y 80

pixeles de alto</MARQUEE>
Alineamiento del texto que rodea a la marquesina, con ALIGN="xxx", que puede ser TOP para
arriba, MIDDLE en el medio o BOTTOM para abajo.
0$548((:,'7+ +(,*+7 $/,*1 %27720!0DUTXHVLQDFRQWH[WRDOLQHDGR

en la parte inferior</MARQUEE>Texto
Color de fondo. Se hace con BGCOLOR="xxyyzz", siendo éste un número hexadecimal.
<MARQUEE BGCOLOR="AA0000">Texto desplazándose con fondo granate</MARQUEE>
Comportamiento, con BEHAVIOR="xxx". "xxx" se sustituye por dos cosas: SCROLL, por defecto,
y ALTERNATE. Con este último el texto se moverá de un lado a otro sin desaparecer.
<MARQUEE BEHAVIOR=ALTERNATE>Texto desplazándose alternadamente</MARQUEE>
Dirección del texto, con DIRECTION="xxx", siendo xxx LEFT para que se mueva hacia la
izquierda (por defecto) o RIGHT para que se mueva hacia la derecha
<MARQUEE DIRECTION=RIGHT>Texto desplazándose hacia la derecha</MARQUEE>
Cantidad de texto, con SCROLLAMOUNT=xx, siendo xxx el número de pixeles que se desplazan
en cada avance. Cuanto mayor sea más rápido avance.
<MARQUEE SCROLLAMOUNT=50>Texto avanzando rápido</MARQUEE>
57
Tiempo del movimiento de avance, con SCROLLDELAY=xxx, siendo xxx el número de
milisegundos que dura cada movimiento de avance. Cuanto mayor sea más lento irá.
Número de veces que aparecerá el texto, con LOOP=x siendo x en número de veces. Por defecto
Separación entre el texto de la marquesina y el borde de su ventana, con HSPACE=x

y VSPACE=y, siendo x los píxeles en los márgenes izquierdo y derecho, e y los pixeles en los
márgenes superior e inferior.
<MARQUEE>, también es posible decidir la fuente o tipo de letra en una

marquesina con la etiqueta , siendo xxx el nombre de la fuente, de la siguiente
manera:

<MARQUEE>Texto con fuente Arial</MARQUEE>

<marquee bgcolor="#FFFFFF"
behavior="alternate" direction="down">
VIVA MEXICO
</marquee>
Otras etiquetas útiles
Existen otras etiquetas que pueden ser útiles al momento de elaborar las páginas HTML. Se detalla
el objetivo de cada una de las etiquetas y un ejemplo.
Etiqueta de comentarios 
Etiqueta que puede ser introducida en cualquier parte del código y que es utilizada para realizar
acotaciones o comentarios.
Sintaxis de Ejemplo:
Etiqueta de comentarios <comment> </comment>
Etiqueta que puede ser introducida en cualquier parte del código y que es utilizada para realizar
acotaciones o comentarios.
58
6LQWD[LVGH(MHPSOR
<comment>Los comentarios se introducen de esta manera</comment>
Etiqueta <address></address>
Ofrece una manera de dar formato a un pequeño cuerpo de texto que se asemeje a la rotulación de
una carta convencional.
6LQWD[LVGHHMHPSOR
<address>Rocio Ruiz 
32%2;EU!
0H[LFDOL%DMD&DOLIRUQLDDGGUHVV!
Etiqueta <cite> </cite>
El texto dentro de la etiqueta <cite> aparece en cursivas para representar una cita
6LQWD[LVGHHMHPSOR
<cite>Este texto estará inclinado</cite>
Etiqueta <code> </code>
El texto dentro de la etiqueta <code> aparece en una fuente con caracteres mono espaciados
cuando se visualiza a través de un navegador.
6LQWD[LVGHHMHPSOR
<code>Este texto aparece con tipo de letra especial</code>
Etiqueta <credit> </credit>
Esta etiqueta se emplea para indicar los créditos por el material incluido en un documento. A menudo
se asignan créditos para las fuentes e individuos que se citan en forma directa.
6LQWD[LVGHHMHPSOR
<credit>Foto usada bajo permiso de Carlos Aníbarro</credit>
Etiqueta 
Indica que se debe dar énfasis al texto que se contiene. El navegador resaltará este texto con
negritas e inclinación itálica.
59
Sintaxis de ejemplo:
Texto resaltado
Etiqueta <kbd> </kbd>
/DHWLTXHWDNEG!LQGLFDDOQDYHJDGRUTXHLQWHUSUHWHHOWH[WRHVSHFL¿FDGRHQXQDIXHQWHHQQHJULWDV
GHDQFKR¿MR3RUORUHJXODUHVWDHWLTXHWDVHXVDSDUDHMHPSOL¿FDUXQDHQWUDGDGHOWHFODGRKHFKD
por el usuario.
<kbd>Teclee su mensaje acá:</kbd>
Etiqueta 
La etiqueta impide que el navegador inserte un salto de línea, incluso cuando es
adecuado el ajuste de texto. Algunas cadenas de texto no deberían romperse bajo ninguna
circunstancia. Un buen ejemplo de una cadena de texto que debe permanecer sin cortes es un URL
extenso.
6LQWD[LVGHHMHPSOR
No deseo que esta dirección URL larga sea cortada:

QREU!KWWSZZZEROLYLDLQWHUQHWFRPLUFQREU!
Etiqueta 

/DHWLTXHWDS!RGHSiUUDIRLQGLFDHOLQLFLR\HO¿QDOGHRUDFLRQHVDH[KLELUFRQXQVRORSiUUDIR
6LQWD[LVGHHMHPSOR
S!DSDUWLUGHDKRUDGH¿QLPRVS DDFXWHUUDIRVGHHVWDPDQHUDS!
Párrafo en el centro
Párrafo a la izquierda
Párrafo a la derecha
Etiqueta <pre> </pre>
/DHWLTXHWDSUH!VLJQL¿FDWH[WR³SUHIRUPDWHDGR´\VHXVDSDUDFRQVHUYDUHVSDFLRV\VDOWRVGHOtQHD
en cuerpos de texto. Esta etiqueta resulta útil en el formateo de un párrafo completo que el autor
quisiera que el navegador cliente lo exhibiese palabra por palabra.
6LQWD[LVGHHMHPSOR
<pre>El texto que usted ve.

Aparecerá tal cual, incluidos los retornos de carro</pre>
Etiqueta <s> </s> o <strike> </strike>
Instruye al navegador que tache el texto incluido entre las etiquetas.
60
<strike>Este texto esta tachado</strike>
Etiqueta 
Hace que el navegador exhiba el texto en negritas. Algunos navegadores muestran el texto en
cursivas.
6LQWD[LVGHHMHPSOR
Este texto esta sobre saltado
Etiqueta 
,QVWUX\HDOQDYHJDGRUTXHH[KLEDHOWH[WRHVSHFL¿FDGRFRPRVXEtQGLFH
6LQWD[LVGHHMHPSOR
Agua: H20
Etiqueta 
,QGLFDDOQDYHJDGRUH[KLELUHOWH[WRHVSHFL¿FDGRFRPRVXSHUtQGLFH
6LQWD[LVGHHMHPSOR
Mate: 2*2 = 22.
Etiqueta <tt> </tt>
(WLTXHWDWHOHWLSRLQVWUX\HDOQDYHJDGRUTXHH[KLEDHOWH[WRHVSHFL¿FDGRHQXQDIXHQWHGHDQFKR¿MR
6LQWD[LVGHHMHPSOR
<tt>Este es un tipo de letra de teletipo</tt>
Etiqueta <var> </var>
,QGLFDDOQDYHJDGRUTXHH[KLEDHOWH[WRHVSHFL¿FDGRHQXQDIXHQWHPiVSHTXHxDGHDQFKR¿MR
6LQWD[LVGHHMHPSOR
<var>Este texto será más pequeño y de formato especial</var>
$WULEXWREJSURSHUWLHV ´¿[HG´GHO%2'<
Indica a su navegador Internet Explorer que mantenga el fondo constante y no móvil de forma
vertical.
6LQWD[LVGHHMHPSOR
<body text=”#FFFFFF” bgcolor=”#000000” background=”fondo.gif”

EJSURSHUWLHV ´¿[HG´!
61
8QDYH]¿QDOL]DGDVODVDFWLYLGDGHVGHDSUHQGL]DMHFRPSOHWDODVLJXLHQWHHVFDODGHDSUHFLDFLyQ
para evaluar tu desempeño. Utiliza la siguiente escala.
,QVX¿FLHQWH
Regular
Bien
Excelente
Contesté todas las actividades de

este submódulo para cada uno
de los temas.
Llevé a cabo todas las lecturas de
los temas en forma concienzuda
y crítica.
8WLOLFp ORV HOHPHQWRV IXQGDPHQ
tales del diseño de una página
web.
Conocí la estructura de una

página web.
Participé con una actitud

responsable, crítica y propositiva
en las actividades solicitadas.
Mostré en todo momento respeto

hacia mis compañeros y profesor.
INTEGRACIÓN: En mesa redonda, menciona brevemente en forma oral las actividades que
realizaste durante el primer submódulo, enfatizando lo aprendido y la importancia que tiene
para ti el saber utilizar los elementos fundamentales del diseño de una página web y conocer la
estructura de una página web.
62
sitio
la parte 1 de la actividad integradora.
incluya:
apliques las tablas.
apliques listas.
63
El docente evaluará el trabajo de acuerdo a la siguiente rúbrica: ,QVX¿FLHQWH 5HJXODU %LHQ
Excelente.
Excelente Bien Regular ,QVX¿FLHQWH

CRITERIO
12% 10% 8% 2%
• (ODERUDODSODQL¿FDFLyQGHVX
página web.
• Realiza el diseño de su página Realiza al Realiza al

Utiliza los web. Realiza al menos
menos 2 de menos 1 de
elementos 3 de las acciones
las acciones las acciones
fundamentales mencionadas
mencionadas mencionadas
del diseño de una • 'H¿QHODVLPiJHQHV\VXV en la columna
ubicaciones. en la primera en la primera
página web. anterior.
columna. columna.
• 'H¿QHORVHQODFHVDRWUDV
páginas y con sus propias
páginas.
• Conoce los términos básicos del

lenguaje HTML.
• Conoce el cuerpo del lenguaje

HTML.
• Aplica las etiquetas del lenguaje Realiza al

Realiza al Realiza al
HTML. menos 1 de
menos 3 de menos 2 de
Conoce la las acciones
las acciones las acciones
estructura de mencionadas
• Inserta imágenes en la página mencionadas mencionadas
una página web. en la
web. en la columna en la columna
columna
anterior. anterior.
anterior.
• Inserta hipervínculos a otras
páginas web y a sus propias
páginas.
• Agrega la opción de envió de

correo en lenguaje HTML
TOTALES
CALIFICACIÓN OBTENIDA
64
INSTRUMENTOS DE EVALUACIÓN
I. INFORMACIÓN GENERAL PARA EL PROCESO DE EVALUACIÓN
NOMBRE DEL EVALUADOR:

FECHA DE
NOMBRE DEL CANDIDATO: APLICACIÓN:
IECL
Código Título: INFORMÁTICA PARA OFICINAS
Perfil de la NTCL que se evalúa
DISEÑAR PÁGINAS WEB EN LENGUAJE HTML
Diseñar páginas
web en lenguaje Utilizar software de aplicación para el diseño de páginas
web
HTML.
Publicar páginas web y establecer comunicación vía

Internet.
Código Título Nivel
Elementos: DISEÑAR PÁGINAS WEB EN LENGUAJE HTML

Referencia Código Título: INFORMÁTICA PARA OFICINAS
1 de 3
Intento de Intento de
Intento de evaluación
evaluación evaluación
3
1 2
Domina el contenido No domina el contenido

Juicio de la Evaluación del Con número
Con letra
Submódulo 1
Juicio de evaluación
Contenido
Con letra Con número
C.1.1
C.1.2
C.1.1 UTILIZAS LOS ELEMENTOS FUNDAMENTALES DEL DISEÑO DE UNA PÁGINA WEB.
C.1.2 CONOCES LA ESTRUCTURA DE UNA PÁGINA WEB.
CONTENIDO SÍ NO N/A
Trabaja colaborativamente.
Entrega en tiempo y forma.
Elige un tema para desarrollar su página web.
65
66
Que seas competente en el uso de software de aplicación para el diseño de páginas web, haciendo
uso de las tecnologías de la información y la comunicación para procesar e interpretar ideas.
Uso de software de aplicación para el diseño de páginas web.
2.1 Conocer la terminología básica del software para diseñar una página web.
2.3 Diseñar una página web con el software de aplicación.
1. Programa y administra páginas web para la difusión y captación de la información.

2.
ambiente multimedia.
Las competencias genéricas así como sus atributos que tienen mayor probabilidad
de desarrollarse para contribuir a las competencias profesionales son:
COMPETENCIAS:
3. Escucha, interpreta y emite mensajes pertinentes en distintos contextos mediante la utilización
de medios, códigos y herramientas apropiados.
4. Desarrolla innovaciones y propone soluciones a problemas a partir de métodos
establecidos.
ATRIBUTOS:
4.1
ideas.
El objetivo de este submódulo es prepararte para utilizar software de aplicación en

el diseño de páginas web.
68 UTILIZAR SOFTWARE DE APLICACIÓN PARA EL DISEÑO DE PÁGINAS WEB

DIAGNÓSTICO
En ELQDV realiza una lectura sobre la presentación, competencias y contenidos
del segundo submódulo "Utilizar software de aplicación para el diseño de
páginas web" que deben alcanzar cada alumno. Responde las preguntas y
comenta tus respuestas en HTXLSRGHSHUVRQDV organizados y guiados por
el docente.
¢3XHGRGHVDUUROODUODVFRPSHWHQFLDVFRQORVFRQWHQLGRVGHOVXEPyGXOR"([SOLFD
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
¢&XiOGHODVFRPSHWHQFLDVHVODTXHPiVPHSXHGHVHUYLU"¢3RUTXp"
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
¢&RQVLGHUDVTXHKD\PHUFDGRGHWUDEDMRSDUDODVFRPSHWHQFLDVTXHYDVDGHVDUUROODU"
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
2 69
Es muy importante para los docentes saber el grado de conocimiento con que
cuentan sus alumnos de acuerdo a los temas que se van a tratar, es por eso
que deberás responder el siguiente cuestionario, atendiendo las instrucciones
que te dé el profesor.
¢4XpHOHPHQWRVKDVGHWHFWDGRTXHFRPSRQHQODVSiJLQDVZHETXHQRUPDOPHQWHKDVYLVLWDGR"
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
¢&XiOHVVRQORV¿QHVGHODFUHDFLyQGHXQDSiJLQDZHEHPSUHVDULDORGHVHUYLFLRV"
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
¢4XpHOHPHQWRVFRQVLGHUDVGHEHUtDWHQHUODSiJLQDZHETXHGLVHxHV"
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
Revisó: _____________________________________________________.
Aciertos: _______________________.

Una vez contestado el cuestionario anterior intercambia tu guía de aprendizaje con el compañero de
al lado. El profesor mencionará las respuestas correctas para cada reactivo.
2.1 CONOCER LA TERMINOLOGÍA BÁSICA DEL SOFTWARE PARA DISEÑAR UNA

PÁGINA WEB.
Para iniciar el trabajo con Dreamweaver, es necesario que conozcas la terminología

que se utiliza en este programa, por tanto, lee con atención el texto: “¿Qué es
Dreamweaver?” POSTERIORMENTE realiza una búsqueda en Internet para completar
el cuadro comparativo que se te presenta. Pregunta a tu profesor las dudas que te
vayan surgiendo.
¿Qué es Dreamweaver?
Dreamweaver, actualmente de la casa de Adobe, anteriormente perteneciente a
Macromedia, es la herramienta de diseño de páginas web más avanzada, tal como se ha
lo maneje, siempre encontrará en este programa razones para utilizarlo, sobre todo en lo
Cumple perfectamente el objetivo de diseñar páginas con aspecto profesional, y soporta

gran cantidad de tecnologías, además muy fáciles de usar:
• Hojas de estilo y capas

• Javascript para crear efectos e interactividades
• Inserción de archivos multimedia...
• Además es un programa que se puede actualizar con componentes, que fabrica
tanto Macromedia como otras compañías, para realizar otras acciones más
avanzadas.
que obtienes”, ya que ),

Dreamweaver oculta el código HTML de cara al usuario, haciendo posible que alguien que
no entiende el lenguaje HTML pueda crear páginas y sitios web fácilmente.
2 71
Conceptos Básicos
Página Web
Cuando pensamos en una página web debemos pensar en una empresa que tiene una
jerarquía bien establecida, un departamento de ventas, división de personal, contabilidad,
diseño, etc. Cada una de estas estructuras cumple una función determinada e importante
dentro de la empresa. Pues una página web es una sección de una estructura más grande
que ofrece al navegante la posibilidad de informarse acerca de determinado producto,
servicio o la empresa.
Sitio web
En inglés website o web site, un sitio web es un sitio (localización) en la World Wide Web
que contiene documentos (páginas web) organizados jerárquicamente. Cada documento
SiJLQDZHEFRQWLHQHWH[WRRJUi¿FRVTXHDSDUHFHQFRPRLQIRUPDFLyQGLJLWDOHQODSDQWDOOD
GHXQRUGHQDGRU8QVLWLRSXHGHFRQWHQHUXQDFRPELQDFLyQGHJUi¿FRVWH[WRDXGLRYLGHR
y otros materiales dinámicos o estáticos.
Un sitio web es un gran espacio documental organizado que la mayoría de las veces está
WtSLFDPHQWH GHGLFDGR D DOJ~Q WHPD SDUWLFXODU R SURSyVLWR HVSHFt¿FR &XDOTXLHU VLWLR ZHE
puede contener hiperenlaces a cualquier otro sitio web, de manera que la distinción entre
sitios individuales, percibido por el usuario, puede ser a veces borrosa.
No debemos confundir sitio web con página web; esta última es solo un archivo HTML, una
unidad HTML, que forma parte de algún sitio web. Al ingresar una dirección web, como
por ejemplo www.wikimedia.org, siempre se está haciendo referencia a un sitio web, el
que tiene una página HTML inicial, que es generalmente la primera que se visualiza. La
búsqueda en Internet se realiza asociando el DNS ingresado con la dirección IP del servidor
que contiene el sitio web en el cual está la página HTML buscada.
Los sitios web están escritos en código HTML (Hyper Text Markup Language), o
dinámicamente convertidos a éste, y se acceden aplicando un software conveniente
llamado navegador web, también conocido como un cliente HTTP. Los sitios web pueden
ser visualizados o accedidos desde un amplio abanico de dispositivos con conexión a
Internet, como computadoras personales, portátiles, PDAs, y teléfonos móviles.
Sitio local
8QD YH] GH¿QLGR HO WUDEDMR D UHDOL]DU WRGR OR JXDUGDV HQ XQD FDUSHWD OD FXDO VL HUHV
ordenado, pondrás el nombre del cliente y dentro de ella toda la información, páginas html,
imágenes, etc. Este es el sitio local, es decir, la copia en el disco duro del sitio web en
Internet.

Un sitio web está alojado en una computadora conocida como servidor web, también llamada
servidor HTTP, y estos términos también pueden referirse al software que se ejecuta en esta
computadora y que recupera y entrega las páginas de un sitio web en respuesta a peticiones
del usuario. Apache es el programa más comúnmente usado como servidor web (según las
estadísticas de Netcraft) y el Internet Information Services (IIS) de Microsoft también se usa
con mucha frecuencia.
Sitio estático
Se le llama sitio estático al sitio web que no interactúa con una Base de Datos, es decir solo
usa tecnología HTML, CSS y JavaScript.
Un sitio web estático es uno que tiene contenido que no se espera que cambie frecuentemente
y se mantiene manualmente por alguna persona o personas que usan algún tipo de programa
editor. Hay dos amplias categorías de programas editores usados para este propósito que
son:
• Editores de texto como Notepad, donde el HTML se manipula directamente en el

programa editor o
• (GLWRUHV:<6,:<*FRPRSRUHMHPSOR0LFURVRIW)URQW3DJH\$GREH'UHDPZHDYHU
donde el sitio se edita usando una interfaz GUI y el HTML subyacente se genera
automáticamente con el programa editor.
Sitio dinámico
Un sitio web dinámico es uno que puede tener cambios frecuentes en la información.
Cuando el servidor web recibe una petición para una determinada página de un sitio web,
la página se genera automáticamente por el software, como respuesta directa a la petición
de la página. Por tanto, se puede dar así un amplio abanico de posibilidades, incluyendo
por ejemplo: (a) Mostrar el estado actual de un diálogo entre usuarios, (b) Monitorizar una
situación cambiante, o proporcionar información personalizada de alguna manera a los
requisitos del usuario individual, etc.
El sitio dinámico es aquel en el que la información que se le muestra al navegante proviene

de una base de datos, generalmente en MySql y las páginas están en formato PHP, ASP,
JSP.
Sitio interactivo
Es aquel sitio que su funcionalidad depende de acciones del usuario, es decir, si presiona un
botón el sitio completo hace algo, lo más común es que estos sitios interactivos dependan
de otra tecnología para agregar interactividad, Adobe Flash.
2 73
CSS
Es un lenguaje de hojas de estilos creado para controlar el diseño de la estructura. CSS es

la mejor forma de separar los contenidos y su diseño siendo necesario para crear páginas
web complejas.
Separar la estructura de los contenidos y la estructura del diseño presenta numerosas

YHQWDMDV\DTXHREOLJDDFUHDUGRFXPHQWRV+70/;+70/ELHQGH¿QLGRV
$OFUHDUXQDSiJLQDZHEVHXWLOL]DHQSULPHUOXJDUHOOHQJXDMH+70/;+70/SDUDPDUFDU
los contenidos, es decir, para designar la función de cada elemento dentro de la página:
párrafo, titular, texto estacado, tabla, lista de elementos, etc.
8QDYH]FUHDGRVORVFRQWHQLGRVVHXWLOL]DHOOHQJXDMH&66SDUDGH¿QLUHODVSHFWRGHFDGD
elemento: color, tamaño y tipo de letra del texto, separación horizontal y vertical entre
elementos, posición de cada elemento dentro de la página, etc.

Después de haber hecho la lectura anterior, realiza una búsqueda en Internet sobre los
sitios mencionados y llena la tabla con dos ejemplos de cada uno de ellos.
2 75
2.2 IDENTIFICAR EL ENTORNO DEL SOFTWARE PARA DISEÑAR PÁGINAS WEB.
Antes de empezar a crear la página web es necesario que conozcas el entorno de

trabajo del software Dreamweaver, por lo que es necesario que realices una búsqueda
HQ,QWHUQHW\GH¿QDVORVLJXLHQWH

Realiza la lectura “DREAMWEAVER CS5” y posteriormente coloca las letras en el lugar
correspondiente de la ventana inicial de dreamwever.
DREAMWEAVER CS5
Dreamweaver CS5 Es un diseñador web que no requiere conocimientos previos de ningún lenguaje
web. Como verás, trabajando desde la vista de diseñador, podrás realizar cualquier trabajo, lo que
te facilitará la tarea de realizar un sitio web sin amplios conocimientos.
Interfaz de Dreamweaver CS5
Pantalla inicial
Desde la pantalla inicial, puedes, desde abrir un elemento

reciente, en el que estés trabajando, abrir un documento
que quieras añadir, o manipular, crear documentos nuevos
en diferentes formatos (html, php, xml, javascript,etc) y
elementos destacados. Los elementos destacados, pueden
ser muy útiles, ya que son videos de métodos de trabajo o
ODXWLOL]DFLyQGHDOJXQDVKHUUDPLHQWDVHVSHFt¿FDV
2 77
Elementos del espacio de trabajo
El espacio de trabajo incluye los siguientes elementos.
$ Barra de la aplicación. A lo largo de su parte superior, la ventana de la aplicación contiene

un conmutador de espacios de trabajo, menús (solo Windows) y otros controles de aplicación.
% Barra de herramientas Documento. Contiene botones que proporcionan opciones para
diferentes vistas de la ventana de documento (como la vista Diseño y la vista Código),
diversas opciones de visualización y algunas operaciones comunes como la obtención de
una vista previa en un navegador.
&Ventana de documento. Muestra el documento actual mientras lo está creando y editando.
'Grupo de paneles. $\XGDQDVXSHUYLVDU\PRGL¿FDUHOWUDEDMRUHDOL]DGR(MHPSORVGHSDQH

les son: el panel Insertar, el panel Estilos CSS y el panel Archivos.
( Espacio de trabajo. Es el área de trabajo destinada para realizar la página web.
) Selector de etiquetas. Situado en la barra de estado de la parte inferior de la ventana de

documento. Muestra la jerarquía de etiquetas que rodea a la selección actual.
* Inspector de propiedades. Permite ver y cambiar diversas propiedades del objeto o texto
seleccionado. Cada objeto tiene propiedades distintas. El inspector de propiedades no está
DPSOLDGRGHIRUPDSUHGHWHUPLQDGDHQHOGLVHxRGHOHVSDFLRGHWUDEDMRGHOFRGL¿FDGRU
+Panel archivos. Permite administrar los archivos y las carpetas, tanto si forman parte de un
sitio de Dreamweaver como si se encuentran en un servidor remoto.

Coloca las letras en el lugar correspondiente de la ventana inicial de dreamwever.
Ingresa al software DREAMWEAVER CS5, observa el lugar donde se encuentran

ubicadas cada una de las barras de herramientas que se describen en la lectura,
posteriormente responde cada una de las preguntas que se te presentan.
Una barra muy útil, ya que la mayoría de herramientas que utilizarás, están en ella o las puedes
añadir, esto facilita el no tener que ir buscando las herramientas en las diferentes ventanas.
2 79
Esta barra puede ser personalizada, aunque con limitaciones. Se puede ver como menú o como
¿FKDVTXHVRQFRPRVHHQFXHQWUDHQODLPDJHQGHDUULED
Como menú, se ve que el aspecto ha cambiado, ya no están las pestañas que indicaban las
herramientas de otras secciones, como formularios, datos, spry, etc.
Pero si se da clic en el triángulo invertido que se encuentra al lado de “común“, se podrán ver en
IRUPDGHPHQ~ODVSHVWDxDVTXHFRQWHQtDHQHOPRGRGH¿FKDV
1. Menciona el nombre de los botones que se encuentran en la barra de insertar: ____________

___________________________________________________________________________
___________________________________________________________________________
2. ¿
___________________________________________________________________________
___________________________________________________________________________
Barra de herramientas del documento
En esta barra se encuentra el botón “Diseño”, está es la vista que normalmente estarás utilizando,
para personas que controlen el código HTML, algún lenguaje de programación o simplemente se
quiere ver el código, pueden verlo de dos maneras, una como vemos en la imagen superior, una es
con el botón “Dividir”, pulsando ese botón, verás la pantalla dividida, viendo en una parte el diseño
\HQRWUDHOFyGLJR<ODRWUDSXOVDQGRHOERWyQ³&yGLJR´HQHOTXHYHUiVVRODPHQWHHOFyGLJRGH
la página y perderás de vista el diseño.

En la misma barra encontrarás el botón donde podrás agregar los
diferentes navegadores en los que quieres ver la página, aunque normalmente ya nos reconoce los
que tenemos instalados.
Dando clic sobre o pulsando la tecla F12, verás en el navegador el resultado del trabajo que
estés realizando.
También puedes ver la caja de texto , allí escribirás el título que

pondrás a tu página y al presionar la tecla F12, podrás ver que aparece en la pestaña del navegador
o en la parte de arriba de la ventana del mismo.
0HQFLRQDHOQRPEUHGHORVERWRQHVTXHVHHQFXHQWUDQHQODEDUUDGHKHUUDPLHQWDVGHOGRFXPHQWR
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
¢(QTXpDFWLYLGDGHVFUHHVTXHWHSXHGHQD\XGDUHOXVRGHHVWRVERWRQHV"BBBBBBBBBBBBBBBBB
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
Inspector de propiedades
En el inspector de propiedades como ves en la imagen de arriba, puedes visualizar y cambiar las
propiedades de los estilos CSS.
También puedes apreciar que aparecen propiedades de la parte del documento, donde puedes
aplicar etiquetas HTML que personalicen tu trabajo.
2 81
El inspector de propiedades es una de las partes que se convertirá en imprescindible en el proceso
de un diseño web.
0HQFLRQDODVRSFLRQHVTXHVHHQFXHQWUDQHQHOLQVSHFWRUGHSURSLHGDGHV
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
Paneles y grupos de paneles
A la derecha de la pantalla, puedes apreciar que aparece un grupo de símbolos, eso son los paneles
en los que puedes encontrar los documentos que vayas creando, los comportamientos que puedes
aplicar, o has aplicado y los CSS creados.

Para visualizarlo mejor, puedes desplegarlo como vemos en la imagen de arriba, pulsando en las
GRVÀHFKDVVLWXDGDVHQODSDUWHVXSHULRUGHUHFKDGHOJUXSRGHSDQHOHV$VtSRGUiVWUDEDMDUYLHQGR
todo lo que contienen los paneles, si te molesta para trabajar, mejor déjalo plegado y da clic en el
icono del panel que necesites en cada momento.
0HQFLRQDHOQRPEUHGHORVERWRQHVTXHVHHQFXHQWUDQHQHOSDQHO\JUXSRGHSDQHOHV
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
Múltiples documentos
Conforme vayas trabajando, irás creando diferentes documentos, y en ocasiones, querrás tener
YDULRVGHHOORVDELHUWRVFRPRVHDSUHFLDHQODLPDJHQGHDUULEDWHDSDUHFHQ¿FKDVFRQORVGLIHUHQWHV
documentos abiertos o creados. Con tan solo dar clic en las diferentes pestañas, podrás navegar
por ellos sin ningún problema.
Estos son los elementos más importantes de la interfaz de Dreamweaver, con los cuales te podrás
ir familiarizando con el uso de este programa, para iniciar a crear tu página web.
0HQFLRQDODVRSFLRQHVTXHVHHQFXHQWUDQHQP~OWLSOHVGRFXPHQWRV
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
¢(QTXpDFWLYLGDGHVFUHHVTXHWHSXHGHQD\XGDUHOXVRGHHVWRVERWRQHV"BBBBBBBBBBBBBBBB
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
2 83
A partir de este momento vas a empezar con el diseño de tu web, para eso es necesario
que te organices en equipo de tres integrantes y realicen la lectura “Recomendaciones
para la estructura del sitio web” a la par que vas desarrollando las actividades referentes
al diseño de tu página. Responde las preguntas que se te presentan. Expón al profesor
las dudas que te vayan surgiendo.
Recomendaciones para la estructura del sitio web

Antes de empezar a crear un sitio web lo primero que tienes que plantearte es su organización.
Una organización muy usual es separar en carpetas los archivos diferentes, es decir, crear una
carpeta imágenes, otra para los estilos y en la carpeta raíz dejaremos los archivos HTML. Cuando
se habla de carpeta raíz, se hace referencia a la carpeta principal donde se irá creando el sitio web.
Con esto conseguirás crear un orden en tu sitio, para que cuando quieras buscar un archivo sea
fácil de localizar.
Siempre que quieras cambiar la ubicación de un archivo es recomendable hacerlo directamente

en Dreamweaver por que tiene la posibilidad de actualizar todos los vínculos sin que le ocasione
ningún problema. Si lo realizas en la carpeta raíz, fuera de Dreamweaver, tendrás que actualizar los
vínculos manualmente. De ahí la importancia de manipular los archivos y las carpetas, solamente
en la aplicación.
Otra cosa a tener en cuenta son los nombres de las páginas del sitio. La página principal deberá
llamarse index, siempre en minúsculas, ya que los servidores web son sensibles a las mayúsculas,
es decir, que diferencia mayúsculas de minúsculas.
El resto de páginas se aconseja que su nombre sea referente al contenido, NUNCA DEJAR
ESPACIOS, si el nombre es compuesto, unirlos mediante un guion o un guion bajo. También puede
unir simplemente las palabras, creando un nombre simple.

'H¿QLUHOVLWLR
&XDQGRKDEODPRVGHGH¿QLUXQVLWLRQRVUHIHULPRVDDJUHJDUODFDUSHWDUDt]FRPRXQSUR\HFWRGH
Dreamweaver, así como los archivos que contenga y así poderlos manipular de forma más sencilla.
Desde la pantalla inicial
En la pantalla inicial, te vas a

encontrar en el apartado “Crear
nuevo” “Sitio de Dreamweaver…”,
si das clic allí, te aparecerá el
FXDGUR GH GLiORJR GH GH¿QLFLyQ
del sitio, que vemos en la imagen
siguiente.
Aquí pondrás el nombre del sitio, no

necesariamente debe coincidir con el
nombre de la carpeta y puede llevar
espacios, enseguida debes dar clic en
la carpeta que se encuentra debajo y
buscas la carpeta raíz del sitio.
ESCRIBE EL NOMBRE DE TU SITIO WEB, TAMBIÉN ANÓTALO AQUÍ PARA QUE NO SE TE OLVIDE:
_______________________________________________________________________________________
CON ESTO TERMINARÁS LA DEFINICIÓN DE TU SITIO WEB.
2 85
Añadir Archivos y Carpetas
Para añadir archivos, puedes o crear uno nuevo, desde el menú de archivo o desde la
pantalla inicial, pero existen otras dos formas, ya que en los casos anteriores, hay que
guardar para que se cree el archivo.
Despliega la ventana de “Archivos” de los paneles de la derecha, la primera opción es

hacer clic derecho en la carpeta raíz o en la carpeta donde queramos crear el archivo, te
aparecerá un menú y deberás dar clic en “Nuevo archivo” y te creará un archivo, le asignas
el nombre y la extensión la cambias si quieres que el archivo no sea html. Para la segunda
forma, das clic en el menú de la ventana de “Archivos”, situado en la esquina superior
derecha y colocas el ratón encima de “Archivo” y das clic en “Nuevo archivo”.
Para las carpetas, se hace lo mismo, pero seleccionando “Nueva carpeta”.
Después de haber leído el texto RECOMENDACIONES PARA LA ESTRUCTURA DEL

SITIO WEB, responde las preguntas que a continuación se presentan:
Después de haber leído el texto RECOMENDACIONES PARA LA ESTRUCTURA DEL

SITIO WEB, responde las preguntas que a continuación se presentan:
NOMBRE: ________________________________________ GRUPO: ________

¢3RUTXpHVLPSRUWDQWHRUJDQL]DUODVFDUSHWDVGHXQVLWLRZHE"
________________________________________________________________________
_______________________________________________________________________
________________________________________________________________________
¢3RU TXp HV UHFRPHQGDEOH FDPELDU OD XELFDFLyQ GH ORV DUFKLYRV GLUHFWDPHQWH GH
'UHDPZHYHU" BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
________________________________________________________________________
________________________________________________________________________
¢&XiOHVHOQRPEUHUHFRPHQGDEOHTXHVHOHGHEHGHGDUDODSiJLQDSULQFLSDO\SRUTXp"
________________________________________________________________________
________________________________________________________________________
¢&XiOHVVRQORVSDVRVTXHWLHQHVTXHVHJXLUSDUDDJUHJDUXQDUFKLYRRFDUSHWD"BBBBB
________________________________________________________________________
________________________________________________________________________

'H¿QHFyPRYDDTXHGDUODHVWUXFWXUDGHWXVLWLRZHE
2.3 DISEÑAR UNA PÁGINA WEB CON EL SOFTWARE DE APLICACIÓN
PARTE 1
A partir de este momento vas a empezar con la estructura de tu página web para eso es
necesario que te organices en equipo de tres integrantes para que realices la lectura
“diseño de una página web” a la par que vas desarrollando las actividades referentes al
diseño de tu página como son:
• Elegir los posibles ramos empresariales de la página web que vayas a crear.
• Elegir la empresa o negocio del que vayas a realizar la página.
• Selección de la información que vas a publicar en tu página Web.
• 3ODQL¿FDFLyQGHODSiJLQD
Anteriormente ya habías pensado en la estructura de tu página web, con la

LQIRUPDFLyQ\DFODUDGH¿QLUiVHOGLVHxRGHWXSiJLQD
¢'HTXpUDPRHPSUHVDULDOYDDVHUWXVLWLRZHE"
______________________________________________________________________________
¢$TXpHPSUHVDOHYDVDFUHDUHOVLWLRZHE"BBB______________________________________
______________________________________________________________________________
2 87
¢4XpWLSRGHLQIRUPDFLyQYDVDSXEOLFDUHQWXVLWLRZHE"
______________________________________________________________________________
______________________________________________________________________________
¢3RUTXpVHOHFFLRQDVWHHVHWLSRGHHPSUHVD"BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
______________________________________________________________________________
______________________________________________________________________________
Siguelos
Sigue lospasos
pasosque
quea acontinuación
continuaciónseseteteindican
indicanpara
paraque
queempieces
empiecesa acrear
creartutusitio
sitioweb.
web.Si
Si te surgen dudas consulta con el profesor.
te surgen dudas consulta con el profesor.
Diseño de una página web

Lo primero que debes hacer cuando vas a diseñar una página web es crear tu sitio, una vez
creado el sitio, empezarás a crear cada una de las páginas web que integrarán tu proyecto.
1. Ingresa a Dreamwever.
2. Registra el nombre de tu sitio.
3. Selecciona la carpeta en donde lo
vas a almacenar.
4. Clic en guardar.
En la siguiente ventana da clic en más…

Crearás una página de HTML, ya que en este caso las páginas serán estáticas. Además,
SXHGHVXVDUXQRGHORVGLVHxRVSUHGH¿QLGRVGH'UHDPZHDYHUSDUDPiVIDFLOLGDG
(QVHJXLGDGHEHV
seleccionar el diseño
FROXPQDV¿MDVEDUUD
lateral izquierda, como se
muestra en la imagen.
'HEHVLQGLFDUD
Dreamweaver que el
diseño de la página debe
de hacerse en una hoja
independiente.
&OLFHQ&UHDU
ESTE ES EL DISEÑO QUE VA A TENER TU SITIO WEB:
&OLFHQDUFKLYR
6HOHFFLRQDODFDUSHWDGH
tu sitio que ya creaste.
*XDUGD FRQ HO QRPEUH

de index, ya que esta será
tu página principal.
2 89
Ahora vas a
PRGL¿FDUHO
diseño de tu
página, para
dejarla de acuerdo
a como quieres.
Para hacer eso,
te irás al panel
Estilos.
Estas son todas

las reglas de estilo
que hay en la hoja.
Vas a cambiar las
reglas del body, que
normalmente es
GRQGHVHGH¿QHQORV
aspectos generales
del texto. Debes
hacer doble clic en
body para editarlo.

A continuación se presenta el
editor de propiedades de CSS,
desde aquí puedes cambiar
cualquier propiedad.
Por ejemplo, aquí cambiarás

el tipo de fuente y
propiedades, además de las
propiedades del fondo.
'HEHUiVMXVWL¿FDUHOWH[WR
2 91
Ahora ajustarás el ancho
de página. Todos los
elementos están dentro
del div con la clase
container, por lo que será
ahí donde establezcas el
ancho de página.
Tienes que editar la regla,
dando doble clic sobre
container.
El ancho lo encontrarás en
las propiedades de cuadro,
lo debes cambiar al tamaño
que necesites. El margen
(margin) Auto en ambos
lados (Right, Left) se encarga
de centrar el elemento en la
ventana. Puedes darle algo
de margen arriba (Top) y
abajo (Bottom), si lo quieres
separar del borde.

También, puedes crear un
borde alrededor.
Enseguida puedes
observar cómo va
quedando en el
navegador.
Verás que como el ancho es menor que la ventana, se ve el borde a los lados y la columna
de la derecha se ha ido hacia abajo, esto se debió a que las columnas tienen un ancho
¿MR\DOUHGXFLUHODQFKRJHQHUDO\DQRFDEHQHQKRUL]RQWDOSRUWDQWRWLHQHVTXHDMXVWDU
su ancho de nuevo para que la columna de la derecha se muestre de nuevo junta, como
estaba anteriormente.
2 93
El div con la clase sidebar1es el que forma la columna. Tienes que editar su ancho y reducirlo
un poco. Para eso puedes dar clic sobre las reglas de sidebar1 y reducir el ancho del cuadro,
o directamente en estilos, en Actual, seleccionas sidebar1 e introduces directamente el
DQFKRPRGL¿FDGR
También debes cambiar el ancho de la otra columna, esto lo encontrarás en la clase content.
El ancho total es de 800 pixeles, y como la columna anterior le asignaste 140 pixeles, aquí
solo te quedan 660 para esta columna.
Bien al principio de esta página puedes distinguir tres elementos principales de diseño: el
encabezado (.header), la columna izquierda con el menú (.sidebar1) y una columna principal
a la derecha con el contenido de la página.

PERSONALIZA TU PÁGINA
Ahora deberás personalizar cada uno de los elementos de tu página.
Empieza por borrar el logo,

solamente selecciona el
enlace que contiene a la
imagen y presionas la tecla
Suprimir.
Lo que sí debe aparecer en la

cabecera es el h1, por lo que
habrá que moverlo ahí, y aquí
debes cambiar el texto por el
de tu página.
Ahora, debes continuar

editando el estilo del
encabezado, en este caso le
quitarás el color de fondo y le
darás un margen inferior.
2 95
Enseguida deberás crear una nueva regla CSS para
el h1 que esté dentro del encabezado (header h1).
Para eso, darás clic en el botón Nueva regla CSS.
Seleccionas o das clic en el

botón 0HQRVHVSHFt¿FR y
seleccionas Aceptar.

PARA COLOCAR UNA IMAGEN EN EL TÍTULO, REALIZA LOS SIGUIENTES PASOS:
Para incluir una imagen en el título, pero en vez de ponerla directamente, se incluirá como
fondo de encabezado.
Para eso te irás a fondo,

seleccionarás Examinar.
Cuando hayas
asignado los
cambios das clic
en Aplicar.
2 97
Te darás cuenta que la imagen quedó como fondo, pero en el ejemplo queremos que quede
arriba, por lo que habrá que ajustar la posición manipulando el Padding.
Continuando con el diseño

GH OD SiJLQD VH PRGL¿FDUi
la columna de la izquierda,
de hecho solo se dejará
el menú y se eliminará la
columna de la izquierda que
no se va a utilizar.
Para eso se selecciona el

texto de la columna de la
izquierda y se elimina.

MODIFICAR LOS VÍNCULOS
A continuación, se deben cambiar los títulos del menú de acuerdo al proyecto que estés
presentando, es decir los nombres de las páginas que se abrirán al dar clic en un enlace.
Para que puedas

cambiar los vínculos
tienes que hacer lo
siguiente:
6HOHFFLRQDHOYtQFXOR
TXHTXLHUHVPRGL¿FDU
(QODEDUUDGH
propiedades puedes
agregar el archivo al cual
quieras dirigir el vínculo.
Quedando como se muestra

a continuación:
2 99
(QVHJXLGDVHGHEHPRGL¿FDUHOERUGHGHOPHQ~GHODL]TXLHUGDSDUDTXHQRVREUHVDOJDHO
cuadro. La regla que afecta a los enlaces del menú es XOQDY a
En la imagen puedes
ver que el ancho era
mayor que la columna,
por lo que habrá que
quitar el ancho.
Además, para que

el texto no quede
pegado se usa el
padding, en el caso
del ejemplo se usará
XQDOWR¿MR.

Se utilizará una imagen de
fondo para dar el efecto
de cambio de color en los
botones.
Además los elementos de

lista están dentro de una
lista, que también tienen
VXVHVWLORVGH¿QLGRV
Aquí deberás ajustar Margin

y Padding a tus necesidades.
2 101
Además le quitaremos el color de fondo del sidebar1.
Para que el usuario de la página perciba que un elemento

de menú se puede presionar, se puede cambiar su estilo
cuando el cursor está encima de él.
Esto lo deberás hacer con la

pseudoclase: hover. Aunque
ya se tiene una regla para
ello, la editarás para hacer
PRGL¿FDFLRQHV

Además se creará otra regla que cambie los elementos de lista (li) cuando tengan el cursor
encima.
Para crear esa regla se dará

clic en CSS de Propiedades.
Luego en el triángulo
invertido de Regla de
destino.
Posteriormente se selecciona la opción <Nueva

regla CSS>
Se da clic en Editar regla.

Posteriormente, se selecciona
el botón específico y se
introduce el nombre del selector,
que en el caso del ejemplo es
.nav li:hover
2 103
Solamente se cambiará
el color del fondo y del
borde.
'HVSXpV GH HVWDV PRGL¿FDFLRQHV TXH KLFLVWH UHYLVD FRPR TXHGD WX SiJLQD :HE \ HO
resultado será algo como la siguiente pantalla:

MODIFICANDO LA COLUMNA DE CONTENIDO PRINCIPAL
A continuación, trabajarás con la columna del contenido principal de la página.
La clase .contentHVODTXHGH¿QHHOHVWLORGHHVWDFROXPQD
Lo primero que harás es

usar una imagen para crear
un pequeño degradado
en la parte superior. Esto
lo realizarás usando una
imagen de fondo
2 105
Posteriormente editarás los encabezados, para lo cual
crearás una <Nueva regla CSS>.
Seleccionas Editar regla y

en Tipo de selector eliges
(WLTXHWD UHGH¿QH XQ
elemento HTML).
Una vez hecho esto,

seleccionarás el color para
la fuente y el margin.

3DUD¿QDOL]DUFRQORVHOHPHQWRVGHPDTXHWDFLyQVHPRGL¿FDHOSLH
HASTA ESTE MOMENTO, TU PRIMER PÁGINA QUEDARÁ COMO SE MUESTRA A

CONTINUACIÓN
Posteriormente, debes guardar tu página para asignarle el nombre que le corresponde.
2 107
PARTE 2
Vamos a continuar con la segunda página que en este caso es “QUIENES SOMOS”
según los enlaces creados en la página inicial. Sigue los pasos que aquí se te indican y
PRGL¿FDODSiJLQDFRQWXLQIRUPDFLyQ
1. Clic en archivo
2. Clic en nuevo
3. Selecciona columna
¿MDFHQWUDGD
encabezado y pie de
página
1. Te va a proporcionar una
plantilla de este tipo.
2. Aquí puedes hacer las

PRGL¿FDFLRQHVQHFHVDULDV
para armar tu segunda página.
3. Agrega el logotipo,
encabezado y como pie de
página los datos de quienes la
elaboraron.
4. Puedes seguir los pasos

de la página principal que
ya elaboraste o la puedes
HODERUDUFRQVRORFRSLDUSHJDU

TU SEGUNDA PÁGINA DEBE QUEDAR SIMILAR A LA DE LA SIGUIENTE IMAGEN:
1. Clic en Archivo.
2. Clic en guardar como.
3. Es recomendable que el
nombre sea parecido al
del enlace.
2 109
PARTE 3
Vamos a continuar con la tercera página que en este caso es “TARIFAS” según los
enlaces creados en la página inicial. Sigue los pasos que aquí se te indican para insertar
XQDWDEOD\PRGL¿FDFRQWXLQIRUPDFLyQ
1. Clic en archivo.
2. Clic en nuevo.
3. SeleFFLRQDFROXPQD¿MD
centrada, encabezado y
pie de página.
2. En esta página se va a
diseñar la tabla para la
tarifa de precios.
encabezado y como pie
de página los datos de
quienes la elaboraron.

El proceso para insertar una tabla es muy sencillo:
1. Clic en el menú Insertar.
2. Selecciona Tabla.
3. Selecciona el número de
columnas.
4. 6HOHFFLRQDHOQ~PHURGH¿ODV
5. Selecciona el ancho de la
tabla.
6. Clic en Aceptar.
Te muestra la tabla como

la de la imagen y lo que
sigue es rellenar la tabla y
posteriormente editarla.
Además, se pueden
combinar las celdas para
mejorar el aspecto de la
tabla. Para combinar las
celdas solo se seleccionan
las celdas a combinar y
se da clic en el botón que
aparece indicado en la
imagen de abajo.
2 111
A continuación, para darle
un mejor aspecto, crearás
una clase SDUD GH¿QLU ORV
estilos de la tabla.
Para eso se seleccionará

<table>, Estilos CSS y
¿QDOPHQWH GDV FOLF HQ HO
botón Nueva regla CSS.

Enseguida, en Tipo de selector,
se selecciona Clase (puede ser
aplicable a cualquier elemento
HTML). En Nombre del selector
se introduce un nombre, en el
caso del ejemplo será Tarifas.
Se edita el tipo de fuente,

el fondo, la alineación
del texto (en bloque),
el cuadro, el estilo de
borde.
Dejando un aspecto parecido al de

esta tabla:
2 113
TU TERCERA PÁGINA TERMINADA DEBE QUEDAR ASÍ:

PARTE 4
PUEDES AGREGAR UN FORMULARIO DE CONTACTO EN UNA PÁGINA NUEVA.

6LJXHORVSDVRVTXHDTXtVHWHLQGLFDQ\PRGL¿FDFRQWXLQIRUPDFLyQ
Insertar un Formulario de Contacto
1. Clic en archivo.
2. Clic en nuevo.
3. 6HOHFFLRQDFROXPQD¿MD
centrada, encabezado y pie
de página.
2. En esta página se va a
diseñar la tabla para la
tarifa de precios.
encabezado y como pie
de página los datos de
quienes la elaboraron.
2 115
El proceso para insertar una tabla es muy sencillo:
1. Clic en menú
insertar.
2. Clic en formulario.
En un formulario
debes indicar una
acción. La página
que se encargará
de recibir y tratar
la información
introducida por el
usuario.
8QD YH] TXH \D GH¿QLVWH HO

elemento de formulario, para
organizar los campos del
formulario deberás utilizar
una tabla.
1. Clic en insertar.
2. Clic en tabla.
3. Indica el número de
FROXPQDV\¿ODVTXH
necesites.
4. Clic en aceptar.

Una vez insertada la tabla introducimos
los controles necesarios:
1. Clic en Insertar.
2. Clic en Formulario.
3. SeleccLRQDHOFRQWUROFRUUHVSRQ
diente, por ejemplo:
x Para el NoPEUH (PDLO \ )HFKD GH

Reporte selecciona: campo de texto.
x Para Tipo de equipo seleccionas:
Botón de opción.
x Para Problema seleccionas: Área de
texto.
x Para Respaldo de información
seleccionas: &DVLOODGHYHUL¿FDFLyQ
x Para el Botón de Enviar seleccionas:
Botón.
)LQDOPHQWHGHEHUiVFDPELDUORVHVWLORVGHERUGHIRQGRPDUFRIXHQWHHWFSDUDPRGL¿FDU
el formato del formulario.
Tiene que quedarte un

aspecto parecido al de la
imagen.
2 117
5HFXHUGD TXH SDUD HO IRUPXODULR GH FRQWDFWR GH¿QLVWH XQD acción, por lo que para que
funcione esta acción deberás crear una página la cual será la que recogerá la información
del usuario. Esa página debe tener la terminación php.
HASTA AQUÍ TU FORMULARIO DE CONTACTO EN LA PÁGINA CUARTA, QUEDA

COMO SE MUESTRA EN LA SIGUIENTE IMAGEN.

PARTE 5
PUEDES AGREGAR UNA GALERÍA DE IMÁGENES EN UNA PÁGINA NUEVA. Sigue

ORVSDVRVTXHDTXtVHWHLQGLFDQ\PRGL¿FDFRQWXLQIRUPDFLyQ
Insertar una galería de imágenes
Por último, ya para terminar tu sitio web, deberás crear la página para mostrar la galería de
imágenes.
Para eso debes utilizar la misma plantilla que has estado utilizando.
1. Clic en archivo.
2. Clic en nuevo.
3. 6HOHFFLRQDFROXPQD¿MDFHQWUDGD
encabezado y pie de página.
0RGL¿FDVRORODVUHJLRQHVHGLWDEOHVGH
título y contenidos.
2 119
Así
quedaría
tu página
antes de
insertar
las
imágenes.
Ahora insertarás una imagen antes de cada encabezado.
Para eso solo te colocas antes del

encabezado de cada equipo de
cómputo:
1. Clic en el menú Insertar.
2. Selecciona imagen.
3. Selecciona la imagen que vas

a colocar de tu carpeta de
imágenes, donde previamente
las habías guardado.
4. Clic en Aceptar.

La intención de esta página web, es que al pasar el cursor sobre el texto de la imagen,
se cambie y muestre la imagen de la computadora correspondiente, es decir, debemos
asignarle comportamientos a la imagen.
3DUDSRGHULGHQWL¿FDUODLPDJHQSDUDDVLJQDUOHFRPSRUWDPLHQWRVVHOHGHEHDVLJQDUXQ,'
y crear los estilos necesarios para que se muestre como quieres.
Para aplicarle los estilos

necesarios de manera que
se muestre como quieres,
deberás crear una nueva regla
para esta foto.
1. Debes irte a Estilos.

2. Después selecciona el
botón Nueva regla CSS
3. En nombre de selector,
selecciona el nombre
del ID que asignaste a
la imagen.
4. (QGH¿QLFLyQGHUHJOD
seleccionas (solo este
documento).
5. Finalmente da clic en
Aceptar.
2 121
El siguiente paso será algo que hasta este momento has realizado en el diseño de todas las
SiJLQDVHOPRGL¿FDUORVHVWLORVIRQGRERUGHFXDGUREORTXHSDUDGDUODDSDULHQFLDTXH
deseas.
Hasta aquí tu página debe ir de esta manera, la imagen la debes colocar a la derecha.
Lo siguiente será hacer que la imagen cambie cuando el cursor pase por el párrafo de otra
computadora. Para poder hacer eso, utilizarás los comportamientos.
Para poder hacer uso de los comportamientos, lo primero que se debe hacer es elegir que
elemento (encabezado o párrafo) ejecutará el comportamiento. Para evitar problemas y
como tienes encabezado y párrafo en cada computadora, estos dos elementos se agrupan
en un div. De tal manera que cuando pases el cursor por la zona de la computadora en
cuestión se cambie la imagen.

Para agrupar en un div, el procedimiento es sencillo:
6HOHFFLRQD ORV GRV

elementos (encabezado y
párrafo).
'D FOLF HQ Insertar,

selecciona Objeto de
diseño\¿QDOPHQWHGDFOLF
en Etiqueta Div.
3DUD¿QDOL]DUOD Etiqueta Div, da

clic en Aceptar.
Ahora, lo que tienes que hacer es abrir el panel

Comportamientos, que se encuentra en el menú de
ventana.
Enseguida, das clic en el icono que aparece en forma

de + y eliges un comportamiento.
2 123
En el listado de comportamientos
disponibles, vas a encontrar el que
necesitas para tu página web, que
es el de Intercambiar imagen.
Después de esto, te aparece

una ventanita donde debes
seleccionar la imagen a
cambiar, que es la única que
tiene asignado un ID y eliges
la imagen que la sustituirá.
Como se puede ver en la
imagen siguiente.
Se debe hacer el mismo procedimiento con cada párrafo y cada imagen para que cambie
el comportamiento.

FINALMENTE, LA PÁGINA QUINTA QUEDA COMO EN LA SIGUIENTE IMAGEN:
Al pasar el cursor por otro párrafo automáticamente cambia la imagen.
2 125
&RQHVWRKDEUiV¿QDOL]DGRWXVLWLRZHEFRQODVGLIHUHQWHVSiJLQDVGHHQODFHFRQWDEODV
formularios de contacto, comportamientos, estilos y muchas cosas más que pudiste
practicar.
A partir de este momento, ya te corresponde a ti seguir explorando el Dreamweaver para

seguir aprendiendo más acerca del diseño de páginas web, y además, porque tendrás que
diseñar tu propio proyecto de Sitio Web utilizando varias páginas y las diferentes opciones
como mínimo que hasta el momento practicaste.

AUTOEVALUACIÓN
apreciación para evaluar tu desempeño. Utiliza la siguiente escala.

Ins
Regular
Bien
Excelente
CRITERIO Excelente Bien Regular

Contesté todas las actividades
de este submódulo para cada
uno de los temas.
Llevé a cabo todas las
lecturas de los temas en forma
concienzuda y crítica.
Conozco la terminología básica
del software para diseñar una
página web.
para diseñar páginas web.
Diseño una página web con el

software de aplicación.

Mostré en todo momento
respeto hacia mis compañeros
y profesor.
INTEGRACIÓN: En mesa redonda menciona brevemente en forma oral las

actividades que realizaste durante el segundo submódulo, enfatizando lo aprendido
y la importancia que tiene para ti el saber utilizar el software de aplicación para
crear páginas web.
2 127
NOMBRE: ________________________________________ GRUPO: ________
(QWUDEDMRFRODERUDWLYRFRPRSUR\HFWR¿QDOGHEHUiVSUHVHQWDUXQ6LWLR:HEGLVHxDGR
en Dreamweaver, sobre un negocio, empresa o institución de servicios. Sitio que deberá
contener lo siguiente:
SiJLQDVZHETXHVHHQODFHQGHVGHXQDSiJLQDSULQFLSDO
8QD SODQWLOOD GH GLVHxR TXH FUHDUiV \ TXH WH VHUYLUi GH EDVH SDUD WXV GLIHUHQWHV
páginas web.
(Q ODV GLIHUHQWHV SiJLQDV TXH FUHDUiV GHEHV PDQHMDU HQ DOJXQDV R WRGDV VHJ~Q
sea tu elección: imágenes, tablas, formularios de contacto, comportamientos en las
imágenes.
7RGDVODVSiJLQDVGHEHQFRQWHQHUHQFDEH]DGRVLPiJHQHVWtWXORWH[WRFROXPQDV
(QWRGDVODVSiJLQDVGHEHVDSOLFDUHVWLORVHVGHFLUTXHWHQJDQEXHQDDSDULHQFLDHQ
cuanto a tipos de letra, colores de fondo, bordes, marcos, imágenes, la distribución de
las columnas. Es decir, las páginas deben ser agradables a la vista y presentar calidad
en su diseño.
(Q DOJXQD GH ODV SiJLQDV GHEHQ DSDUHFHU ORV GDWRV GH ORV GLVHxDGRUHV FRQ
información de contacto, por si es necesario establecer comunicación con ellos.

HETEROEVALUACIÓN
El docente evaluará el trabajo de acuerdo a la siguiente rúbrica:

Excelente.
Excelente Bien Regular

CRITERIO
12% 10% 8% 2%
• Elige el ramo empresarial de

Utiliza la
la página web que va a crear. Realiza al Realiza al Realiza al
terminología
• Selecciona correctamente la menos 3 de menos 2 de menos 1 de
básica del
información que va a publicar las acciones las acciones las acciones
software
en su página web. mencionadas mencionadas mencionadas
para diseñar
• en la columna en la primera en la primera
una página
• anterior. columna. columna.
web.
web que va a crear.
• Conoce el software de
aplicación para el diseño de
páginas web.
• Conoce la pantalla inicial del
software para el diseño de Realiza al Realiza al Realiza al
páginas web. menos 3 de menos 2 de menos 1 de
el entorno
• Conoce cada una de las las acciones las acciones las acciones
del software
barras de herramientas del mencionadas mencionadas mencionadas
para diseñar
software de aplicación para en la columna en la columna en la columna
páginas web.
el diseño de páginas web. anterior. anterior. anterior.
• Conoce y aplica las
funciones básicas del
software de aplicación para
el diseño de páginas web.
• Crea el sitio para el

desarrollo de la página web.
• Elige y personaliza el diseño Realiza al Realiza al Realiza al
Diseña
que de la página web. menos 3 de menos 2 de menos 1 de
una página
• Selecciona una plantilla para las acciones las acciones las acciones
web con el
la página web. mencionadas mencionadas mencionadas
software de
• Inserta imágenes en la en la columna en la columna en la columna
aplicación.
página web. anterior. anterior. anterior.
• Inserta hipervínculos en la
página web.
TOTALES
2 129
2.1 CONOCER LA TERMINOLOGÍA BÁSICA DEL SOFTWARE PARA DISEÑAR UNA PÁGINA WEB.
Elige un tema para desarrollar su página web.
Selecciona información relevante para la página web.

Presenta el bosquejo del diseño de su página web
Trabaja colaborativamente
2.2 IDENTIFICAR EL ENTORNO DEL SOFTWARE PARA DISEÑAR PÁGINAS WEB.

2.3 DISEÑAR UNA PÁGINA WEB CON EL SOFTWARE DE APLICACIÓN.
Lleva a la práctica el diseño de la página web.
referenciadas.
Los encabezados, párrafos, listas, etc. Presentan los mismos estilos de las
imágenes.
Estética: El diseño y combinación de colores son adecuados.
Los colores que maneja tienen contraste y permiten leer la información que
muestra la página.
Trabaja colaborativamente.
2 131
MIS NOTAS:
132
Que seas competente en publicar páginas web haciendo uso de las tecnologías de la información
y la comunicación para procesar e interpretar ideas.
COMPETENCIAS:
Publicar una página web.
CONTENIDO:
3.1 Conoces las opciones para publicar una página web.
3.2 Publicas páginas web.
• Programa y administra páginas web para la difusión y captación de la información.
Las competencias genéricas así como sus atributos que tienen mayor probabilidad de
desarrollarse para contribuir a las competencias profesionales son:
COMPETENCIAS:
1. Escucha, interpreta y emite mensajes pertinentes en distintos contextos mediante
la utilización de medios, códigos y herramientas apropiados.
2. Desarrolla innovaciones y propone soluciones a problemas a partir de métodos
establecidos.
ATRIBUTOS:
4.1 Expresa ideas y conceptos mediante representaciones lingüísticas, matemáticas o

JUi¿FDV
ideas.
El objetivo de este submódulo es prepararte para que aprendas a publicar una página web.
134 PUBLICAR PÁGINAS WEB Y ESTABLECER COMUNICACIÓN VÍA INTERNET

DIAGNÓSTICO
En binas realiza una lectura sobre la presentación, competencias y contenidos
del tercer submódulo "Publicar páginas web y establecer comunicación vía
Internet" que deben alcanzar cada alumno. Responde las preguntas y comenta
tus respuestas en equipo de 6 personas organizados y guiados por el docente.
¢4XpFRPSHWHQFLDVYR\DGHVDUUROODU"
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
¢3DUDTXpPHYDQDVHUYLU"
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
¢(QTXpPRPHQWRODVSXHGRDSOLFDU"
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
3 135
Es muy importante para los docentes saber el grado de conocimiento con que cuentan
sus alumnos de acuerdo a los temas que se van a tratar, es por eso que deberás
responder el siguiente cuestionario, atendiendo las instrucciones que te dé el profesor.
Contesta las siguientes preguntas para saber el nivel de tus conocimientos previos con que
iniciaremos este submódulo:
¢6DEHVTXpHVXQVHUYLGRU"
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
¢&RQRFHVDOJ~QVHUYLGRUSDUDSXEOLFDUSiJLQDVZHE"
______________________________________________________________________________
______________________________________________________________________________
¢(QDOJ~QPRPHQWRKD]SXEOLFDGRXQDSiJLQDZHE"
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
¢&UHHVTXHHVGLItFLOSXEOLFDUXQDSiJLQDZHE\SRUTXp"
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
¢6DEHVTXpHVXQGRPLQLR"
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
Revisó: _____________________________________________________.
Aciertos: _______________________.

Una vez contestado el cuestionario anterior intercambia tu guía de aprendizaje con el
compañero de al lado. El profesor mencionará las respuestas correctas para cada reactivo.
&DOL¿FDODVUHVSXHVWDVGHWXFRPSDxHUR\DQRWDWXQRPEUHHQHOHVSDFLRTXHGLFH5(9,6Ï
3.1 CONOCER LAS OPCIONES PARA PUBLICAR UNA PÁGINA WEB.
¢4Xp HV SXEOLFDU XQD SiJLQD ZHE \ FyPR KDFHUOR" 'HVSXpV GH KDFHU QXHVWUD SiJLQD
(incluyendo textos, imágenes, videos y otros archivos) solamente la vemos nosotros ya que
está almacenada en nuestra máquina. Para que todo el mundo pueda verla la tenemos que
publicar (subir) a un servidor. (Que no es más que una computadora central que siempre
está conectada). El servidor hosting es el lugar en donde subiremos nuestra página que es
medido en megabytes, normalmente todos los proveedores de acceso a Internet ofrecen
KRVWLQJHOSURYHHGRUHVDTXLHQSDJDPRVSRUFRQHFWDUQRVDLQWHUQHW([LVWHQLQ¿QLGDGGH
proveedores de hosting gratuitos, que con solo llenar un formulario desde su web podemos
conseguir de manera rápida y gratuitamente espacio para nuestra web. Cuando solicitamos
los servicios de una conexión a Internet (el servidor) al que pagamos la factura por navegar,
ofrecen una serie de recursos gratuitos por utilizar sus redes y servicios como pueden
ser: cuentas de correo, discos duros virtuales donde alojar tus archivos y un sinfín de
promociones, pero también un ESPACIO WEB, o cuenta FTP.
Antes de empezar a publicar tu sitio web es necesario que conozcas los términos básicos
que estarás utilizando en el transcurso de este bloque, por lo que realiza una búsqueda
HQHOHFWUyQLFD\GH¿QDVORVLJXLHQWH
Alojamiento web:
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
Alojamiento compartido:
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
3 137
Alojamiento gratuito:
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
Alojamiento revendedor:
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
Contraseña:
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
Dominio:
______________________________________________________________________________
______________________________________________________________________________
Página web:
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
Página Web Estática:

______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
Página Web Dinámica:

______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
Página Web Interactiva:
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
Página Web Animada:

______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________

Proveedor:
______________________________________________________________________________
______________________________________________________________________________
_____________________________________________________________________________
Servidor:
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
Servidor Dedicado:
__________________________________________________________________________
_________________________________________________________________________
_________________________________________________________________________
Servidor Virtual:
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
Sitio:
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
Transferencia de páginas web:

______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
Antes de publicar tu página web
• Revisa tu página en más de un navegador al menos en el Explorer, Mozilla Firefox

y Google Chrome. Lo que en un navegador queda bien en otro puede causar
estragos.
• Antes de publicar tu página, prueba tu página en tu computadora y en un Mac, el
resultado puede ser muy diferente.
• Si tu sitio no está terminado, no lo publiques. Ahórrate gifs o frases como “en
construcción”. Todos los buenos sitios están en construcción detrás del escenario.
•
• Deja que tus visitantes hagan el trabajo duro: incluye una dirección en la que tus
3 139
de contacto demuestra demasiada frialdad, e Internet es útil precisamente para
lograr la personalización.
• Antes y después de publicar tu página, checa todos tus enlaces. Enseña la página
antes de publicarla a amigos y conocidos, sus opiniones te podrán ayudar a evitar
errores que tú no has advertido y a mejorar el aspecto de tu sitio.
¿Qué es un servidor de hosting?
Para que una página web pueda ser vista en Internet por cualquier persona conectada
a la red, esta página debe estar alojada en un servidor de hosting. Estos servidores son
simplemente máquinas similares a un PC, con su memoria y su procesador que están
conectados a Internet de manera que abastecen la red de todo aquello que “guardan” en
sus discos duros.
Por tanto, lo que hacemos al contratar un servicio de hosting (también llamado hospedaje
web) es alquilar una parte de ese disco duro para copiar allí nuestras páginas y a la vez
utilizar los recursos del servidor para poder enviar correos con nuestro nombre de dominio,
instalar programas que automaticen algunas de las funciones de nuestra Web, revisar las
estadísticas de las visitas que recibimos. Los puntos fundamentales a la hora de valorar un
servicio de hosting son:
• Tiempo de conectividad se mide en porcentaje:
Es el tiempo que el servidor está perfectamente conectado a la red haciendo posible

que tu sitio web esté operativo. A veces el servidor puede sufrir alguna incidencia y
99% real sería ya una buena opción.
• Espacio en disco duro del servidor:
Es el espacio medido en Mb que alquilamos para subir nuestras páginas y resto de

archivos. Si solo vas a alojar unas cuantas páginas no necesitarás mucho espacio
más o menos grandes desde tu página tendrás que contar con el tamaño de estos
archivos.
• Transferencia mensual:
Es la cantidad de Mb que se descargan desde el servidor al mes. Nuevamente, si solo
necesites entre 500Mb y 2 Gb.

• Bases de datos SQL, autoresponders, estadísticas, directorio cgi-bin para instalar
tus propios scripts.

Son también elementos que te serán necesarios antes o después. Procura que estas
aplicaciones estén disponibles desde el panel de control del hosting, y asegúrate de que en
un futuro siempre puedas ampliar tu servicio a uno de mayores prestaciones sin tener que
crear una nueva cuenta.
Estructura de directorios
• A partir del directorio principal de tu página, puedes crear la estructura de

directorios. Se recomienda que crees un directorio por cada sección que tenga
tu espacio Web, siempre que ésta conste de varios archivos html o de imágenes.
• De esta forma será más compacto el acceso a la información, ya que la URL
forma sencilla secciones. Si creas todos los archivos en el directorio principal, te
cada archivo.
• Se recomienda la creación de un directorio de imágenes, uno de íconos y

otro de fondos, aunque si no son muchos se pueden incluir todos en el directorio
de imágenes. Estos elementos podrán referenciarse fácilmente y de manera
uniforme en todos los documentos de tu espacio web. La estructura básica de su
espacio web podría ser:
En el directorio de imágenes
se incluirán todas las imágenes
de ámbito general, por ejemplo
logotipo, íconos de uso frecuente
y las imágenes usadas por
documentos del directorio
principal. En el directorio de la
página dos, o en su directorio de
imágenes, se podrán incluir las
imágenes que sean exclusivas
de esa sección. De esta forma se
conseguirá una mayor ordenación
de tu espacio web y las referencias
a las imágenes podrían ser más
consistentes desde cualquier
directorio de tu espacio web.
3 141
Basándote en la “Estructura de directorios” que se te presenta como ejemplo, diseña la
estructura del directorio de tu SITIO WEB.

Alojamientos y dominios
pueda ser accedida por los usuarios en cualquier parte del mundo. Para esto tenemos dos opciones:
• El alojamiento pagado es más apropiado para sitios empresariales ya que poseen su

nombre de dominio aparte de otros servicios como servidor de correos, bases de datos,
foros, chat, estadísticas, etc).
• El alojamiento gratuito es más apropiado para páginas personales. Varios portales en
Internet proporcionan alojamiento gratuito con ciertas restricciones.
Internet. Por ejemplo, un nombre de dominio puede ser GOOGLE.COM, SECMAS.GUA.NET o bien
LECCIONWEB.ORG, etc.
Pero para tener un Nombre de Dominio no es indispensable tener un servidor propio o una
dirección IP, basta con tener una página puesta en cualquier servidor (gratuito o pagado) para poder
que venden nombres de dominio tienen un servicio gratuito que se denomina redireccionamiento
larga como http://www.000WEBHOST.COM/Area11/PANADERIALAPONDEEROSA podemos

hacer que nuestro Nombre de Dominio apunte hacia esa dirección por medio del redireccionamiento
y podría llamarse por ejemplo: PANADERIALAPONDEROSA.COM
Lo ideal de los Nombres de Dominio es que sean nombres pequeños ya que ellos se graban
más fácilmente, por ejemplo un nombre corto como GOOGLE.COM a todo mundo se le queda
grabado pero un nombre como BUSCADORDEPAGINASWEBGOOGLE.COM sería muy difícil de
recordar siempre.
Para poder tener nuestro propio Nombre de Dominio es necesario comprarlo, aunque en la
actualidad hay bastantes lugares que ofrecen Nombres de Dominio gratuitos, pero esto en realidad
no es un Nombre de Dominio sino que es un Subdominio; la forma como esto funciona es que uno
aplica para tener un nombre como por ejemplo: PANADERIALAPONDEROSA.COM entonces el
dueño de ese Dominio .TK lo que hace es crear un redireccionamiento dentro de su servidor para
que apunte hacia nuestra dirección URL; ahora bien, todo tiene un costo y es que siempre que uno
entre a esos lugares de redireccionamiento gratuito, se desplegará un anuncio y muchas veces
es un poco molesto. Los Nombres de Dominio en la actualidad no son muy caros de comprar en
HOSTNDOMAINS.COM por ejemplo, un nombre de dominio puede costar alrededor de US$9.90
por año.
Hospedaje Gratis.
Hay compañías que ofrecen hospedaje gratis. A cambio de que en tu página aparezcan anuncios de
esa compañía y de algunas otras. El hospedaje gratuito es una buena idea, si tu página es personal,
por ejemplo, una página dedicada a tus pasatiempos, amigos, a tu mascota, a tus viajes, etc.
3 143
Ventajas
• Gasto cero: No pagamos ni la transferencia, ni el registro de dominio, es todo gratis.
• Respaldo: Por ejemplo si estamos en blogger todo el sistema se encuentra respaldado
por Google, en este caso muy difícilmente tendremos problemas de backups, servers
caídos, etc.
Desventajas:
• Poca identidad: Los dominios que utilizan estos sistemas que realmente son subdominios
del dominio principal muchas veces dan una sensación aparente de poca seriedad.
• )DOWD GH )OH[LELOLGDG 1R SRGHU KDFHU PRGL¿FDFLRQHV GH QXHVWUD SODQWLOOD D OD
imposibilidad de instalar plugins y cosas de ese estilo en un principio pueden no molestar
pero en cuanto pasan los meses empieza a pesar este aspecto.
• Una dependencia peligrosa: En un principio olvidarnos de los gastos de alojamiento es
atractivo, pero a la vez es un poco peligroso, ya que puede desaparecer el sitio y los
clientes quedan en el aire.
• Problemas para migrar:
Es importante que conozcas los sitios que te proporcionan alojamiento web para que,
llegado el momento puedas seleccionar el lugar en donde publicarás tu SITIO WEB.
Realiza una búsqueda electrónica sobre los sitios que te proporcionan dicho servicio y
llena la siguiente tabla:
SITIOS QUE PROPORCIONAN ALOJAMIENTO GRATUITO:

SITIO CARACTERÍSTICAS URL
Es uno de los nuevos servidores de alojamiento
gratuito. Permite hasta 25 megas, además de
http://www.miarroba.
Mi@rroba soportar bases de datos en Mysql, aplicaciones
com
en PHP4 y otros servicios como contadores,
libros de visitas, subdominios, estadísticas, etc.

SITIOS QUE VENDEN ALOJAMIENTO:
SITIO CARACTERÍSTICAS URL COSTO/PERIODO
3 145
3.2 PUBLICAR PÁGINAS WEB Y ESTABLECER COMUNICACIÓN VÍA INTERNET
Aportación de:
L.I. América Galindo García
Plantel Miguel Hidalgo y Costilla
PARTE 1
En equipo de trabajo, publica la página que elaboraste en el bloque dos, para eso tendrás
que leer “Publicar Páginas Web” a la par que vas siguiendo los pasos que ahí se indican
para que publiques tu página en uno de los sitios de la tabla anterior.
PUBLICAR PÁGINAS WEB

Para poder publicar nuestro sitio utilizaremos un servicio de hosting gratuito y muy amigable para
programadores HTML, no necesitas ser un experto para administrar y mucho menos para publicar,
en este sitio puedes crear tu propio sitio WEB ya que cuenta con su propio editor HTML, o tu propio
blog de una forma fácil, cómoda y práctica, dispondrás de un asistente para hacer tus páginas
o solucionar dudas o problemas los cuales te pudieras enfrentar en el transcurso o desarrollo
contadores de visitas, etc. Sin más preámbulo el hosting o sitio de alojamiento que utilizaremos
será www.galeon.com el cual maneja tres diferentes modalidades:
1. Modalidad Gratuita:
Galeón Basic con 15 MB de espacio, Asistente para principiantes y Administrador

Web. Esta modalidad es gratuita pero a cambio se emitirá publicidad de HispaVista
en tu página web. Esta modalidad es ideal para hacer tu primera página web.
2. Modalidad de pago: Galeón Plus con 1 GB de espacio, sin publicidad y con FTP. Incluye
extras como estadísticas, más plantillas, Ebooks, etc. Es igual de sencillo que Galeón Basic
pero con más prestaciones. Ideal si quieres un hosting sencillo.
3. Hosting avanzado:
Galeón Profesional, es un hosting con prestaciones avanzadas, que incluye el panel de

control Plesk, herramientas de programación, bases de datos, 52 aplicaciones preinstaladas,
cuentas de correo ilimitadas, etc. Ideal para hacer negocios por Internet, para empresas
o para los que desean tener una Web con prestaciones profesionales.

¿POR QUÉ UTILIZAR GALEÓN?
15 MB de espacio para alojar tu página web
2 direcciones para tu página web

Podrás elegir la que te resulte más fácil de recordar:
http://nombre.galeon.com o http://www.galeon.com/nombre/.
Administración por web

Utilizando nuestro Administrador de Ficheros desde tu navegador, podrás subir los
archivos desde tu ordenador, organizarlos en carpetas, borrarlos, renombrarlos...
Asistente con plantillas para principiantes

En cuatro sencillos pasos: elige un tema, decide qué páginas incluyes, selecciona la
SODQWLOODHOHVWLORTXHPiVWHJXVWH\GDOHHOFRORUTXHSUH¿HUDV£<DWLHQHVZHE
Editor HTML
6LFRQRFHVHOOHQJXDMHGHFUHDFLyQGHSiJLQDV\TXLHUHVFUHDURPRGL¿FDUODVWX\DVRQ
OLQH XVD HVWD KHUUDPLHQWD 0X\ ~WLO SDUD KDFHU FRQ UDSLGH] SHTXHxDV PRGL¿FDFLRQHV
en tu web.
Cuenta de e-mail
Una dirección de correo electrónico con tu nombre de usuario:
nombredeusuario@galeon.com.
Blog con Wordpress

Publica opiniones, obtén comentarios, envía fotografías... con el software de blogs más
popular, el Wordpress.
Accesorios para tu página

Foros, chat, formulario de recomendación y formulario de contacto.
3 147
Nota: lo más importante es que tu página web no expira, puedes tenerla alojada por mucho
tiempo y no existirá problema alguno, puedes quitar, borrar o agregar vínculos, fotos,
información, etc. sin ningún inconveniente, pero siempre debes tener en mente que solo te
ofrece 15 megas de espacio.
A continuación se te mostrará paso a paso como darte de alta en www.galeon.com, y

posteriormente la publicación de tu sitio web, antes de realizar tu registro tienes que
considerar varios aspectos:
1. El nombre de tu sitio tiene que hacer referencia al proyecto que realizaste en

Dreamweaver.
2. 'HEHVGHFRQWDUFRQXQFRUUHRHOHFWUyQLFRHQGRQGHWHHQYLDUiQODFRQ¿UPDFLyQ
de tu cuenta.
3. Lee las instrucciones cuidadosamente al momento de ingresar los datos que se
requiere en los formularios de galeón.
REGÍSTRATE EN GALEON.COM
1. Ingresa a www.galeon.
com
2. Clic en REGÍSTRATE
GRATIS
Nota: Debes dar de alta o registrar tu cuenta en tu propia computadora ya que si se

UHDOL]DQ YDULDV SHWLFLRQHV GH XQ PLVPR VHUYLGRU FUHDUi FRQÀLFWRV \ QR SHUPLWLUi
realizar tu registro.

INICIO DE REGISTRO
Esta será la primer pantalla que te mostrará galeón al registrarte ten cuidado con el nombre
de usuario y contraseña, éstos tienen que ser familiares para ti.
ESTA SERÁ LA DIRECCIÓN DE TU SITIO WEB, ESCRÍBELO SIN ESPACIOS EN BLANCO,

Y SIN LA LETRA Ñ.
En esta sección del formulario son datos personales, le permite a galeón conocer tus gustos y
preferencias en donde después te mandará ofertas a tu cuenta de correo electrónico.
3 149
En esta pantalla solo pedirá tu autorización para cambiar tu página de inicio, si no palomeas
la opción y das clic en aceptar no existirá ningún inconveniente.
<¿QDOPHQWHJDOHyQWHFRQ¿UPDFRPRQXHYRXVXDULR\WHGLFHTXHSDUDDFWLYDUWXFXHQWD
tienes que ingresar a tu correo electrónico.

3RU ~OWLPR HVWH HV HO PHQVDMH TXH DSDUHFHUi HQ HO ,1%2; GH WX FRUUHR HOHFWUyQLFR
FRQ¿UPDQGRWXXVXDULR\FRQWUDVHxD7LHQHVTXHGDUOHFOLFDOHQODFHTXHJDOHyQWHHQYtD
para activar tu cuenta en el sitio.
<OLVWR\DWLHQHVWXDORMDPLHQWRJUDWLV
3 151
1RWD (O DGPLQLVWUDGRU GH ¿FKHURV WH SHUPLWH RUJDQL]DU FDUSHWDV DUFKLYRV LPiJHQHV
sonido y video.
EXPLORANDO EL ADMINISTRADOR DE FICHEROS

(QHOPRPHQWRTXHGDVFOLFHQHODGPLQLVWUDGRUGH¿FKHURVDSDUHFHUiHVWDSDQWDOODHQ
donde localizarás los siguientes elementos:

Antes de publicar en galeon.com considera los siguientes aspectos:
1. Galeón no acepta que los nombres de tus archivos lleven caracteres inválidos
como espacios en blanco, guion bajo, guion medio, puntos, comas, la letra ñ.
2. Galeón no acepta nombres muy largos en las imágenes, video y páginas web.
3. Sé práctico, que tu Index sea tu página inicial y tus vínculos sean nombres cortos
que hagan referencia a la información que estás manejando.
4. Te recomiendo que si tienes que cambiar el nombre a algún archivo, hazlo antes
GHVXELUORFRQHODGPLQLVWUDGRUGH¿FKHURVGHJDOHyQ
5. 3DUD TXH QR WH FRQIXQGDV OOHYD XQ RUGHQ SDUD LGHQWL¿FDU WXV DUFKLYRV SXHGHV
subir primero el Index con sus imágenes, después un vínculo con sus imágenes
y así sucesivamente. Así sabrás qué imagen va en que página web.
7H UHFXHUGR TXH DQWHV GH VXELU WXV DUFKLYRV R ¿FKHURV FXLGHV HO QRPEUH GH ORV
mismos siguiendo las características que galeón aprueba, al momento de dar clic en
VXELU¿FKHURVWHDSDUHFHUiODVLJXLHQWHSDQWDOOD\OHGDVFOLFHQHOERWyQ%URZVHSDUD
buscar y empezar a subir tus páginas web, imágenes, video, etc.
3 153
Tus archivos se aparecerán de la siguiente manera mostrando todos los archivos que
has subido.
Observaciones:
En dado caso que hayas subido un archivo que no usas en tu sitio, simplemente
OR VHOHFFLRQDV \ HQ WX EDUUD GH KHUUDPLHQWDV GH ¿FKHURV OH GDV FOLF HQ ERUUDU \ VH
HOLPLQDUiGHWXOLVWDGH¿FKHURV
Algo muy relevante en galeón es que al momento de subir tus archivos HTML lo
más seguro es que no se visualizarán tus imágenes, pero no te preocupes es solo
XQD SHTXHxD PRGL¿FDFLyQ TXH WHQGUiV TXH KDFHU 7RPD HQ FXHQWD ODV VLJXLHQWHV
instrucciones.

SE ABRIRÁ EL EDITOR DE HTML, Y DEBERÁS UBICAR DONDE INSERTASTE LAS
IMÁGENES.
Paso 2:
0RGL¿FDUHO
URL de la
imagen
6HPRGL¿FDHO85/GHWRGDVODVLPiJHQHV\DTXHDOPRPHQWRGHVXELUQXHVWUDVSiJLQDVya
QRH[LVWHODFDUSHWD donde originalmente teníamos nuestros archivos, así que la borramos
y quedaría de la siguiente manera:
3 155
7HQGUiVTXHKDFHUHVWDPRGL¿FDFLyQHQFDGDXQDGHWXVSiJLQDVZHESDUDSRGHUYLVXDOL]DU
tus imágenes y lo mismo harás con tus vínculos. Si no realizas este cambio tu página se
visualizará de la siguiente manera:
<FRQODPRGL¿FDFLyQVHYLVXDOL]DUiGHODVLJXLHQWHPDQHUD

Ahora sí
cierra cesión, abre el Internet Explorer y escribe:
www.galeon.com y no debes tener ningún problema en visualizar tu

proyecto, siempre y cuando hayas seguido correctamente las instrucciones.
Te recuerdo que el hosting es gratuito y galeón usará tu sitio para mostrar publicidad.
Cuida el COPIAR y PEGAR de la información ya que como trabajamos en editor HTML tienes que
utilizar el código correcto. Visualiza la última página se mirará de esa manera si publicas sin código.
http://galeon.com/statusgear/algo1.html
http://galeon.com/trompetasgera/index.html
www.galeon.com/mexicaliweb
3 157
PARTE 2
Después de haber publicado tu SITIO WEB, redacta los comentarios sobre el proceso
que seguiste.
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________

CICLO DE VIDA DE LAS PÁGINAS WEB
• Promoción de la página
Es un paso imprescindible si deseamos dar a conocer el web que hemos construido

para que sea muy visitado. Con el diseño y la publicación del sitio web en el servidor
no se termina el trabajo. Una de las tareas más importantes para el éxito de la web
HVSURPRFLRQDUODDGHFXDGDPHQWHGHPDQHUDTXHVXGLUHFFLyQ¿JXUHHQHOPD\RU
número de sitios. Las acciones que se pueden realizar para promocionar una página
son muchas y variadas, como incluir la dirección en nuestros correos electrónicos
o intercambiar banners, pero la más importante es aparecer listados en los
buscadores más utilizados como: Google, AltaVista, etc. Estas tareas de promoción
no son nada complicadas y cualquiera puede realizarlas sin ningún problema, pero
conseguir que nuestra web se encuentre situada entre los primeros resultados de
OD E~VTXHGD UHYLVWH PiV GL¿FXOWDG /D FODYH SDUD HVWDU OLVWDGR HQ EXVFDGRUHV HV
conseguir enlaces en otras páginas hacia tu sitio. Si bien en Google podrás dar de
alta tu dirección, probablemente no conseguirás aparecer en el buscador hasta que
otras personas enlacen con tu sitio en sus webs. Realmente Google no necesita que
registres tu página en el servidor, sino que automáticamente cuando encuentre un
enlace a tu web en otra página, lo seguirá e indexará tu sitio. Cuando consigas una
buena cantidad de enlaces, si además tu sitio lo has construido de manera amistosa
a buscadores, conseguirás aparecer en las búsquedas en una mejor posición.
Ejemplo para publicar tu página en el buscador de AltaVista:
'HEHUHPRVLQJUHVDUDOEXVFD
dor en donde queremos poner
nuestra página, en este caso
es: http://www.altavista.com
2. Aparecerá una página donde

debes de dar clic en “ENVÍE
UN SITIO”.
3 159
3. Aparecerá una página donde debes de
dar clic en "ENVÍO BÁSICO" que es la
forma gratuita de poner nuestra página.
5. Sigue los pasos que allí se detallan para

TXHHOVHUYLGRUGH$/7$9,67$YHUL¿TXHVL
la página cumple son sus requisitos y, si
los cumple, deberemos esperar de 2 a 4
semanas para ver que aparezca en los
resultados de sus búsquedas.
• Actualizar las páginas
Mantener actualizadas las páginas es una de las claves del éxito y una de las
necesidades más importantes. El último "truco" para que nuestra página sea muy
visitada y que los visitantes entren una y otra vez se trata de mantenerla siempre
bien actualizada. Hay algunas webs que se prestan más que otras a tener los
contenidos actualizados, como son las páginas donde se pueden ver contenidos
de actualidad, pero en general todas las páginas pueden mantener secciones con
contenidos actualizables. Este es un aspecto muy importante, pues si el navegante
se percata de que los contenidos se renuevan constantemente volverá con el
tiempo unas cuantas veces. Para dar una imagen de web actualizada se pueden
utilizar imágenes o textos que resalten donde ponga "nuevo" o "new". También será
adecuado poner un área en un sitio visible donde se enumeren las novedades del
sitio. Por lo general habrá que volver siempre sobre este punto para ver qué hay de
nuevo y dónde se puede renovar el contenido del web. No es bueno tener un enlace
que no lleva a ningún sitio, igual que no es bueno tener una dirección de correo que
no existe ya. Además, si tenemos un área de noticias no será bueno que la última
noticia sea de hace tres meses porque da la impresión de que nunca renovamos
los contenidos. Si no mantenemos nuestro sitio actualizado el visitante entrará una
vez a la página pero no lo volverá a hacer nunca, con lo que habremos perdido una
oportunidad de hacernos de un cliente o un visitante asiduo.

PARTE 3
Realiza una investigación electrónica sobre los buscadores que existen en Internet,
selecciona el que creas conveniente, registra tu página web y realiza un resumen sobre
el proceso de publicación, mencionando el buscador que seleccionaste y los pasos que
seguiste para hacer el registro.
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
_____________________________________________________________________
_____________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
3 161
apreciación para evaluar tu desempeño. Utiliza la siguiente escala.
Insu
Regular
Bien
Excelente
CRITERIO Excelente Bien Regular
Contesté todas las actividades de

este submódulo para cada uno
de los temas.
Llevé a cabo todas las lecturas de

los temas en forma concienzuda
y crítica.
Conozco las opciones para

publicar una página web.
Publico la página web.

Mostré en todo momento respeto

hacia mis compañeros y profesor.
INTEGRACIÓN: En mesa redonda menciona brevemente en forma oral las

actividades que realizaste durante el tercer submódulo, enfatizando lo aprendido
y la importancia de conocer los sitios que existen en Internet para publicar una
página web.

NOMBRE: ________________________________________ GRUPO: ________
En equipo de trabajo, publica la página que elaboraste en el bloque dos y en la página

que te indique tu profesor publica la dirección electrónica de tu SITIO WEB, así como el
buscador en donde la registraste.
HETEROEVALUACIÓN
El docente evaluará el trabajo de acuerdo a la siguiente rúbrica:

Excelente.
Excelente Bien Regular

CRITERIO
12% 10% 8% 2%
•
gratuitos para publicar una
Realiza al Realiza al Realiza al
Conoce las página web.
menos 3 de menos 2 de menos 1 de
opciones •
las acciones las acciones las acciones
para venden alojamiento para
mencionadas mencionadas mencionadas
publicar una publicar una página web.
en la columna en la primera en la primera
página web. • Selecciona el sitio
anterior. columna. columna.
adecuado para publicar
una página web.
• Publica la página web. Realiza al Realiza al Realiza al

• Registra la página web en menos 3 de menos 2 de menos 1 de
Publicas
un buscador. las acciones las acciones las acciones
páginas
• Publica la dirección mencionadas mencionadas mencionadas
web.
electrónica de la página en la columna en la columna en la columna
web. anterior. anterior. anterior.
TOTALES
3 163
Selecciona el sitio adecuado para publicar la página web.
Publica la página web.
Registra la página web en un buscador.
Publica la dirección electrónica de la página web en el sitio indicado por el

docente.
Anexa los comentarios en el sitio indicado por el docente, sobre el proceso
de publicación de la página web.
Anexa los comentarios en el sitio indicado por el docente sobre el proceso
de registro de la página web en el buscador.
Ingresa a la página web al dar clic en la dirección electrónica que publicó.
3 165
PÁGINAS ELECTRÓNICAS
1. http://roble.pntic.mec.es/apuente/html/paginas/contenidos.htm
2. http://es.html.net/tutorials/html/
3. http://platea.pntic.mec.es/rluna/CursoHTML/t3.htm
4. http://sitiocop24.galeon.com/
5.
6. http://cevug.ugr.es/downloads/public/curso_DreamWeaver04.pdf
7.
8.
9.
10. http://platea.pntic.mec.es/~abercian/guiahtml/imagenes.htm
11.
166
167
168

INFORMÁTICA PARA OFICINAS Módulo IV - Páginas Web 2018-1 PDF

Cargado por

Copyright:

Formatos disponibles

INFORMÁTICA PARA OFICINAS Módulo IV - Páginas Web 2018-1 PDF

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

INFORMÁTICA PARA OFICINAS Módulo IV - Páginas Web 2018-1 PDF

Cargado por

Copyright:

Formatos disponibles

MIGUEL ÁNGEL MENDOZA GONZÁLEZ

IVÁN LÓPEZ BÁEZ

AMPARO AIDÉ PELAYO TORRES

INFORMÁTICA PARA OFICINAS

Revisado por: Lic. Norma Vázquez Armas

Tercera edición, febrero de 2015

Con el apoyo en la revisión de la mesa técnica, integrada por:

JEFA DEL DEPARTAMENTO DE ACTIVIDADES EDUCATIVAS

EDICIÓN, FEBRERO DE 2018

La presente edición es propiedad del

Este material fue elaborado bajo la coordinación y supervisión de la

SUBMÓDULO 1: DISEÑAR PÁGINAS WEB EN LENGUAJE HTML ...................... 2

SUBMÓDULO 2: UTILIZAR SOFTWARE DE APLICACIÓN PARA

SUBMÓDULO 3: PUBLICAR PÁGINAS WEB Y ESTABLECER

PÁGINAS ELECTRÓNICAS ................................................................................166

Los materiales didácticos se dividen en dos modalidades: Guía de Actividades del

La capacitación en ,QIRUPiWLFDSDUD2¿FLQDVte proporciona las herramientas necesarias para que

La capacitación se compone de cuatro módulos, el primer módulo consta de tres submódulos,

Mantenimiento de Edición de Páginas Web.

Este módulo, es el cuarto de cuatro que conforman la capacitación para el trabajo:

La capacitación, en su conjunto, ofrece al educando una formación basada en competencias

Sustenta su currícula en los siguientes UHIHUHQWHVQRUPDWLYRV:

/RVVLWLRVGHLQVHUFLyQ en el mercado de trabajo de este módulo, son: áreas administrativas,

Diseñar, estructurar y crear una página web.

Las competencias profesionales que se desarrollan en este submódulo son:

1. Utiliza procedimientos y herramientas para el desarrollo de documentos electrónicos de acuerdo

El objetivo de este submódulo es prepararte para que aprendas a diseñar y

En ELQDV realiza una lectura sobre la presentación, competencias y contenidos

HTML es un lenguaje que hace posible presentar

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

Reglas básicas en el diseño:

• Elegir posibles temas a tratar en la sitio web.

Pregunta al profesor todas las dudas que te vayan surgiendo.

DISEÑO DE UNA PÁGINA WEB

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

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

TEMAS DE EJEMPLOS ANOTA TUS POSIBLES TEMAS

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

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

EJEMPLOS: TEMAS ORDENADOS MIS TEMAS ORDENADOS

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

EJEMPLO: MI ESCUELA MI TEMA:

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

Internet para buscar páginas de interés relacionados con el tema

Enlaces a direcciones de cursos como: www.aulaclic.com, www.aulafacil.com, etc.

FUENTES DE INFORMACIÓN DE MI TEMA:

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

MENCIONA CADA CUANDO VAS A REALIZAR ESCALABILIDAD EN TU SITIO WEB.

a) OBJETIVOS: Presentar información de la preparatoria que sea atractiva para los

• Abrir el Bloc de notas

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

2. Desde el icono del Bloc de notas del escritorio .

• Cerrar el Bloc de notas, puedes utilizar cualquiera de las siguientes operaciones:

1. Hacer clic en el botón cerrar

2. Pulsar la combinación de teclas ALT+F4.

3. Hacer clic sobre el menú Archivo y elegir la opción Salir.

• Escribir en el Bloc de notas

1.2 MANEJAR LOS ELEMENTOS BÁSICOS DEL LENGUAJE HTML EN LA CREACIÓN

NOMBRE: ________________________________________ GRUPO: ________

NOMBRE: ________________________________ GRUPO:

• /DVLQVWUXFFLRQHV+70/VHHVFULELUiQDFRQWLQXDFLyQ\¿QDOL]DUiQFRQ< /BODY >

WIDTH 3HUPLWHHVSHFL¿FDUHODQFKRGHODUHJODHQSL[HOHVRSRUFHQWDMH.