Informatica-Oficinas Paginas Web

COLEGIO DE BACHILLERES DEL ESTADO DE BAJA CALIFORNIA
INFORMTICA PARA OFICINAS
PGINAS WEB
GUA DE APRENDIZAJE
PROGRAMA DE DESARROLLO EDUCATIVO
COLEGIO DE BACHILLERES DEL ESTADO DE BAJA CALIFORNIA
LIC. RAFAEL AYALA LPEZ

DIRECTOR GENERAL
ING. ANA LILIA MARTNEZ MUOZ

DIRECTORA DE PLANEACIN ACADMICA
Edicin, febrero de 2012
Diseado por:
Lic. Ricardo Lpez Navarro Ing. Jess Arturo Gonzlez Hernndez Lic. Norma Vzquez Armas Lic. Ricardo Lpez Navarro
Revisores:
La presente edicin es propiedad del Colegio de Bachilleres del Estado de Baja California, prohibida la reproduccin total o parcial de esta obra.
En la realizacin del presente material, participaron: JEFE DEL DEPARTAMENTO DE ACTIVIDADES EDUCATIVAS, Teresa Lpez Prez; COORDINACIN DE EDICIN, Roque Juan Soriano Moreno; EDICIN, Elvia Mungua Carrillo.
PRESENTACIN INSTITUCIONAL
Impartir educacin de calidad del nivel medio superior, con un enfoque humanista, propedutico y de capacitacin para el trabajo, dentro de un ambiente que fomente los valores universales, la creatividad y la efectividad de las actividades acadmicas, deportivas, sociales y culturales; con el propsito de alcanzar la excelencia, la formacin integral del educando y la consolidacin de nuestra Institucin como un sistema educativo de vanguardia, es nuestra Misin. Para lograrla son mltiples las acciones que da a da realiza el personal docente, administrativo y tcnico del Colegio, quienes con el liderazgo y entrega de la Direccin General suman esfuerzos para mantener la calidad del servicio educativo que proporcionamos a los jvenes de Baja California, mejorndola continuamente. Comprometidos as, conscientes de la dificultad que existe para que nuestros alumnos tengan acceso a una bibliografa suficiente y pertinente al entorno econmico y social que viven y les rodea, es que la Institucin, con el afn de que todos los jvenes dispongan oportunamente de materiales didcticos y bibliogrficos modernos y adecuados para el mejor desarrollo de los programas de las asignaturas del Plan de Estudios y con el apoyo otorgado por el Gobierno Federal a travs de la Secretara de Educacin Pblica y el Gobierno del Estado, ponemos a la disposicin de los estudiantes, textos como el que presentamos en esta ocasin, aprovechando as, la experiencia de sus docentes para fortalecer el proceso enseanza-aprendizaje y lograr el acceso a la excelencia educativa que pretendemos. Este material que desea fortalecer el componente de formacin para el trabajo, tiene la intencin de brindar elementos para la prctica enseanza-aprendizaje y es producto de un gran esfuerzo institucional que conjuga la participacin de los docentes en el diseo, del personal de la Direccin de Planeacin Acadmica en la revisin tcnica y edicin, y de la Direccin Administrativa a travs de la Unidad de Diseo Grfico e Imprenta en su impresin, reproduccin y distribucin a todos los planteles.
NDICE
INTRODUCCIN
SUBMDULO 1:
DISEAR PGINAS WEB EN LENGUAJE HTML ....................... 1
SUBMDULO 2:
UTILIZAR SOFTWARE DE APLICACIN PARA EL DISEO DE PGINAS WEB ................................................. 63
SUBMDULO 3:
PUBLICAR PGINAS WEB Y ESTABLECER COMUNICACIN VA INTERNET............................................. 131
BIBLIOGRAFA
................................................................................................... 163
Mdulo
Introduccin
En la dinmica laboral actual se presenta una creciente automatizacin de los procesos de la informacin, lo que genera la necesidad de desarrollar las competencias necesarias para resolver la problemtica que este contexto demanda. La capacitacin en Informtica para Oficinas te 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 insercin laboral en el mbito de la Informtica, de manera exitosa. As mismo, podrs desarrollar competencias relacionadas, principalmente, con la participacin en los procesos de comunicacin en distintos contextos, la integracin efectiva a los equipos de trabajo y la intervencin consciente, desde tu comunidad en particular, en el pas y el mundo en general, todo con apego al cuidado del medio ambiente. La capacitacin se inicia en el tercer semestre, con el mdulo Software para Oficinas, que te permite adquirir las competencias para elaborar documentos de texto, hojas de clculo y bases de datos, mediante el empleo de programas de cmputo. En el mdulo de cuarto semestre, Configuracin y Mantenimiento de Computadoras, desarrollars las competencias: Instalar y configurar componentes fsicos y lgicos de una computadora, aplicar mantenimiento a los componentes lgicos y fsicos de una computadora, instalar y configurar una red de rea local para compartir recursos de hardware y software y administrar los recursos y detectar los problemas de una red de cmputo. Con el mdulo de quinto semestre, Creacin y Edicin de Objetos, desarrollars las competencias: Utilizar software de aplicacin para elaborar presentaciones electrnicas, para editar imgenes y para elaborar animaciones de objetos y videos. Con el mdulo denominado Pginas Web, que corresponde al sexto semestre, desarrollars las competencias: Disear pginas Web en lenguaje HTML, utilizar software de
aplicacin para el diseo de pginas Web, publicar pginas Web y establecer comunicacin va 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 capacitacin se compone de cuatro mdulos, el primer mdulo consta de tres submdulos, el segundo consta de cuatro submdulos, el tercero tres submdulos y el ltimo consta de tres submdulos. Todos los mdulos tienen una duracin de 112 horas, dando un total de 448 horas para toda la capacitacin de Informtica para Oficinas. El mapa de la capacitacin est compuesto por mdulos y submdulos, los cuales se dividen de la siguiente manera:
3ER. SEMESTRE
4TO. SEMESTRE
5TO. SEMESTRE
6TO. SEMESTRE
MDULOS
Software para oficinas (112 hrs.) Configuracin y mantenimiento de computadoras (112 hrs.) Instalar y configurar componentes fsicos y lgicos de una computadora. (40 Hrs.) Aplicar mantenimiento a los componentes lgicos y fsicos de una computadora. (40 Hrs.) Instalar y configurar una red de rea local para compartir recursos de hardware y software. (16 Hrs.) Administrar los recursos y detectar los problemas de una red de cmputo. (16 Hrs.) Creacin y edicin de objetos (112 hrs.) Pginas web (112 hrs.)
SUBMDULOS
Utilizar software de aplicacin para elaborar documentos de texto. (32 Hrs.)
Utilizar software de aplicacin para elaborar presentaciones electrnicas. (24 Hrs.)
Diseo de pginas Web en HTML (48 hrs.)
Utilizar software de aplicacin para elaborar hojas de clculo. (40 Hrs.) Utilizar software de aplicacin para elaborar bases de datos. (40 Hrs.)
Utilizar software de aplicacin para editar imgenes. (40 Hrs.) Utilizar software de aplicacin para elaborar animaciones de objetos y videos. (48 Hrs.)
Utilizar software de aplicacin para el diseo de pginas Web. (48 Hrs.) Publicar pginas Web y establecer comunicacin va Internet (16 Hrs.)
II
Submdulo
PROPSITO: Al trmino del submdulo, sers competente para disear y crear una pgina web en lenguaje html. El presente submdulo tiene como objetivo prepararte para que aprendas a disear y estructurar una pgina web. Por lo que como proyecto elaborars el diseo de una pgina web personal en cdigo HTML en el editor de texto bloc de notas con las caractersticas siguientes: Una pgina principal que incluya: Encabezado Imgenes Hipervnculos a otras pginas web Hipervnculos a tus pginas. Opcin para enviar un correo Una segunda pgina, en la que apliques las tablas Y por ltimo una pgina, en la que apliques listas. Las tres pginas deben de estar enlazadas entre s y a una pgina en internet.
COMPETENCIAS:
Utiliza procedimientos y herramientas para el desarrollo de documentos electrnicos de acuerdo a los requerimientos. Programa y administra pginas web para la difusin y captacin de la informacin. Elabora pginas web con animaciones interactivas de aplicacin general y especfica, en un ambiente multimedia.
CONTENIDOS: 1.1 1.2 Utilizar los elementos fundamentales del diseo de una pgina web. Manejar los elementos bsicos del lenguaje HTML en la creacin de pginas web.
Disear pginas web en lenguaje HTML
ACTIVIDAD 1
En binas realiza la lectura de las competencias que se pretende alcanzars al trmino del submdulo. Posteriormente responde las preguntas y termina comentando tus respuestas a travs de una discusin guiada por el docente a la vez que atiendes las explicaciones y ejemplos del mismo.
1.- Qu competencias voy a desarrollar? ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ 2.- Para qu me van a servir? ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ 3- En qu momento las puedo aplicar? ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________
ACTIVIDAD 2 En binas comenta los lugares por los que has navegado en internet y trata de recordar lo que has observado en cuanto a la estructura, informacin, enlaces etc. de cada uno de los sitios que has visitado y responde las siguientes preguntas, posteriormente en una lluvia de ideas guiada por el docente comenta el tipo de pgina que te gustara disear y menciona l por qu? 1.- Que entiendes por una pgina web? ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________
2. Qu tipo de informacin tiene las pginas web que has visitado?
____________________________________________________________________________ ____________________________________________________________________________ __________________________________________________________________________

3. Qu diferencia encuentras entre una pgina web y un sitio web?
____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ___________________________________________________________________________

4. Qu tienen en comn los sitios web que has visitado?
____________________________________________________________________________ ____________________________________________________________________________ ___________________________________________________________________________

5. Para qu crees que sirve una pgina web?
____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ 6.- Qu te gustara que tuviera la pgina web que disears? ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________
1.1 UTILIZAS LOS ELEMENTOS FUNDAMENTALES DEL DISEO DE UNA PGINA WEB.
ACTIVIDAD 3 Para iniciar una pgina web, primero debes de conocer sus caractersticas y las reglas bsicas que debes de seguir para disearla, por lo tanto realiza la lectura Qu es HTML? y elabora un resumen. Pregunta a tu profesor las dudas que te vayan surgiendo.
Qu es HTML? Para abreviar una larga historia, podemos decir que un cientfico llamado Tim Berners-Lee invent HTML all por 1990. El objetivo era facilitar a cientficos de diferentes universidades el acceso a los documentos de investigacin de cada uno de ellos. El proyecto obtuvo un xito mucho mayor del que Tim Berners-Lee nunca hubiese llegado a imaginar. Al inventar HTML, este cientfico sent las bases de la web tal y como la conocemos en la actualidad. HTML es un lenguaje que hace posible presentar informacin (por ejemplo, investigaciones cientficas) en Internet. Lo que ves al visualizar una pgina en Internet es la interpretacin que hace el navegador del cdigo HTML. Para ver el cdigo HTML de una pgina slo tienes que dar clic en la opcin "Ver" de la barra de mens y elegir "Cdigo fuente" (en Internet Explorer). Si quieres crear sitios web, no hay otra solucin que aprender HTML. Incluso si usas un programa como Dreamweaver, por ejemplo, para la creacin de sitios web, poseer unos conocimientos bsicos de HTML hace la vida mucho ms fcil y tus sitios web mucho mejores. HTML es la abreviatura de "HyperText Mark-up Language", es decir, "Lenguaje de marcado hipertextual", y esto ya es ms de lo que necesitas saber a estas alturas. En todo caso, para mantener un buen orden, necesitas conocer su significado con mayor detalle.
Hiper (Hyper): Es lo contrario de lineal. Los programas de la computadora se ejecutaban de forma lineal: cuando el programa haba ejecutado una accin segua hasta la siguiente lnea, y despus de sta a la siguiente, y a la siguiente, HTML, sin embargo, ahora es diferente: se puede ir a donde uno quiera cuando uno quiera. . Texto (Text): Se refiere al texto de la pgina web. Marcado (Mark-up): Es lo que haces con el texto. Se marca el texto del mismo modo que en un programa de edicin de textos con encabezados, vietas, negrita, etc. Lenguaje (lenguaje): Es lo que es HTML. Este lenguaje hace uso de muchos trminos en ingls.
Cules son las caractersticas del lenguaje HTML? Este lenguaje ser el encargado de convertir un inocente archivo de texto inicial en una pgina web con diferentes tipos y tamaos de letra, con imgenes impactantes, animaciones sorprendentes, formularios interactivos, etc. Estas caractersticas son las que marcaron el diseo de todos los elementos del WWW incluida la programacin de pginas Web. L a pgina Web tiene que ser distribuida: La informacin repartida en pginas no muy grandes enlazadas entre s. Debe ser fcil navegar por la pgina. Tiene que ser compatible con todo tipo de ordenadores (PCs, Macintosh, estaciones de trabajo, etc.) y con todo tipo de sistemas operativos (Windows, MS-DOS, UNIX, MACOS, etc.) Debe ser dinmico: el proceso de cambiar y actualizar la informacin debe ser gil y rpido.
Reglas bsicas en el diseo 1. Tener algo interesante que decir en tu PGINA web: 2. Todo el mundo ya conoce las herramientas de bsqueda. Haz que tus enlaces sean pertinentes al tema El seguir estas reglas te que estas tratando. ayudar para que tu 3. Recuerda que no en todos los Buscadores aparecen pgina sea un xito igual: No hagas que tu pgina dependa demasiado de ciertos comandos HTML que pueden no aparecer en todos los buscadores. Algunos buscadores pueden no aceptar tus grficas, as que proporciona textos alternativos. 4. Mantn tu pgina con un mximo de 15K en imgenes o fraccinala si sta es muy grande. 5. No usar grficas de otros autores si no est autorizado: Hay muchas fuentes de grficas gratis. Tambin existen graficadores sencillos con los que puedes crear Tus propias grficas. 6. Reconocer el trabajo de los dems: Si algn "Sitio" te ayud de alguna manera a construir tu pgina, entonces brndale un enlace 7. Colocar fecha de la ltima revisin: Indica cundo se realiz la ltima revisin. Esto har que las personas se motiven a leer tu pgina. 8. Verifica sus enlaces peridicamente: No dejes que expiren sus enlaces durante largos perodos de tiempo. Revisa su validez. 9. Se abierto a comentarios o sugerencias:Especifica vnculos de correo electrnico o, si es posible, formularios de realimentacin. 10. Practica el HTML: Usa los editores solo cuando conozcas los principios bsicos del HTML.
ACTIVIDAD 4
Despus de haber realizado la lectura, redacta tu resumen
______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ _____________________________________________________________________
ACTIVIDAD INTEGRADORA PARTE 1 A partir de este momento vas a empezar con la estructura de tu pgina web para eso es necesario que te organices en equipo de tres integrantes para que realices la lectura estructura de una pgina web a la par que vas desarrollando las actividades referentes al diseo de tu pgina como son: Elegir posibles temas a tratar en la pgina web Clasifica los temas Escoge un tema para tu pgina web Definicin de la Informacin a publicar. Qu fuentes de informacin tengo? Escalabilidad Planificacin Definicin del diseo
Pregunta al profesor todas las dudas que te vayan surgiendo.
DISEO DE UNA PGINA WEB Antes de entrar de lleno en lo que ser la construccin de la pgina web, desarrollaremos la metodologa para el diseo de las mismas. Es importante ser originales para estructurar sus contenidos, redactar sus textos, agregar imgenes, enlazar las pginas, etc, 1. Elegir posibles temas a tratar en la pgina web Empieza hacindote esta pregunta De qu puedo hablar en mi pgina web? Cul es la temtica que voy a trabajar? Para contestar estas preguntas haremos un listado de posibles temticas que te puedan interesar para realizar la pgina web. Ms adelante iremos eliminando y aadiendo otras segn los factores que vamos a tener en cuenta y segn cul sea tu objetivo: ganar muchas visitas, ganar mucho dinero, o cualquiera que sea el fin de tu pgina web.
TEMAS DE EJEMPLOS Lenguaje HTML Capacitacin de Informtica Mi artista favorito Portafolio de evidencias de mis materias Negocio familiar Mi ciudad Mi escuela
ANOTA TUS POSIBLES TEMAS
2. Clasifica los temas Es importante saber el tipo de Web que queremos crear, es el punto de partida que afecta a todas las etapas posteriores de creacin, realizaremos un diseo, aplicaciones, navegabilidad adecuadas al tipo de Web seleccionada, Ejemplos: Sitio Web comercial. Sitio Web de informacin. Sitio Web profesional. Sitio Web de ocio.
EJEMPLOS: Lenguaje HTML Capacitacin de Informtica Mi artista favorito Portafolio de evidencias de mis materias Negocio familiar Mi ciudad Mi escuela
CLASIFICACIN Sitio Web profesional Sitio Web profesional Sitio Web de ocio Sitio web de informacin Sitio Web comercial Sitio web de informacin Sitio web de informacin
ANOTA TUS TEMAS Y CLASIFCALOS SEGN SU TIPO. (Como se muestra en el ejemplo)
MIS TEMAS
CLASIFICACIN
3.- Escoge un tema para tu pgina web El factor ms importante, es, que el tema nos apasione. De modo que de la lista de temas que tengo, voy a ordenarlos Segn me gusten. (El tema que quede primero es sobre el que desarrollars tu pgina web)
EJEMPLOS: TEMAS ORDENADOS

Mi escuela Mi ciudad Mi artista favorito Capacitacin de Informtica Negocio familiar Portafolio de evidencias de mis materias Lenguaje HTML 4.- Definicin de la Informacin a publicar.
MIS TEMAS ORDENADOS
Despus de que hayas seleccionado el tema de la pgina web es necesario definir la informacin que se va a publicar en el sitio Web, si vas a hacer una pgina sobre tu escuela, como en este caso, qu vas a poner?:
Es importante no elegir temas de descargas ilegales, ni en los que se apoye al terrorismo, ni trataremos con datos que puedan estar protegidos por las leyes de proteccin de datos o contenidos con derechos de autor.
ANOTA TU TEMA Y LA INFORMACIN QUE TE GUSTARA MOSTRAR EN TU PGINA (Como se muestra en el ejemplo)
EJEMPLO: MI ESCUELA
Historia de mi escuela Materias que imparten Otros Planteles Actividades que realiza Envi de correos Enlaces a otras pginas de inters
MI TEMA:
5.- Qu fuentes de informacin tengo? Una fuente de informacin es el lugar del que manan los conceptos, las ideas y los pensamientos que sirven para la creacin de nuevo conocimiento en este caso una pgina web. Por lo tanto, en este apartado necesitamos recolectar las fuentes de informacin de donde vamos a extraer informacin del tema de nuestra pgina web
TEMA: Mi escuela
www.cobachbc.edu.mx http://www.e-local.gob.mx/work/templates/enciclo/bajacalifornia/municipios/02002a.htm Internet para buscar pginas de inters relacionados con el tema Enlaces a direcciones de cursos como: www.aulaclic.com, www.aulafacil.com, etc.
ANOTA TU TEMA Y LAS FUENTES DE CONSULTA PARA CREAR TU PGINA WEB. (Como se muestra en el ejemplo)
FUENTES DE INFORMACIN DE MI TEMA:
6.- Escalabilidad La escalabilidad se define como las visiones a corto y largo plazo acerca de nuestro sitio Web, si a largo tiempo queremos ampliar nuestro sitio Web con nuevas aplicaciones, nuevas pginas, actualizaciones constantes de que va a depender que realicemos esto:
EJEMPLO DE LA ESCALABILIDAD EN MI PGINA: MI ESCUELA

La pgina se revisara constantemente y se modificara cuando ya hayan vencido los enlaces, este muy lenta debido a la cantidad de visitas que tenga, cuando sea necesario ampliarla, agregar ms informacin o enlaces. Lo que suceda primero.
10
MENCIONA CADA CUANDO VAS A REALIZAR ESCALABILIDAD EN TU PGINA.

(Como se muestra en el ejemplo)
ESCABILIDAD EN MI PGINA:
7.- Planificacin En todo proceso de creacin y diseo de pginas Web el primer paso a llevar a cabo ser la planificacin, que incluye la definicin de: a) OBJETIVOS: Presentar informacin de la preparatoria que sea atractiva para los jvenes de nuevo ingreso.
b) PBLICO: identificar el tipo de personas a la que va dirigida la informacin, en este caso todo tipo de personas podrn acceder a la pgina pero el pblico seleccionado ser los estudiantes de secundaria y todos aquellos jvenes que estn buscando educacin del nivel medio superior. c) CONTENIDO: habr informacin sobre el plantel y la preparacin que otorga a los jvenes. d) ESTRUCTURA: Estar formada por una pgina principal que brindara informacin y ofrecer enlaces para ir las secciones del sitio web: materias, capacitaciones, Paraescolares, etc. Tendr otras 3 pginas web ms que estarn ligadas a la primera como se muestra en la estructura siguientes:
Principal.html
Historia.html
Planteles.html
Materias.html
11
REALIZA LA PLANIFICACIN DE TU PGINA WEB SEGN EL TEMA QUE HAYAS ESCOGIDO:
OBJETIVOS:
PBLICO:
CONTENIDO:
ESTRUCTURA:
12
8.- Definicin del diseo Dependiendo del tipo de Web, el tema seleccionado, definida la informacin y la escalabilidad, estamos preparados para plasmar en papel el diseo de la pgina Web, incluyendo las pginas, 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 gua para entender una historia, previsualizar una animacin o seguir la estructura de una pgina web antes de realizarse) de los elementos y diseo que queremos implementar en nuestro sitio Web. Ejemplo de la pgina web de mi escuela
LOGOTIPO
ENCABEZADO
HISTORIA
(Enlace)
PLANTELES
(Enlace)
MATERIAS
(Enlace)
DESCRIPCIN DE LA PGINA
PARAESCOLAR (Imagen)
ENVO DE CORREO
DERECHOS RESERVADOS
13
REALIZA EL DISEO DE TU PGINA WEB. (Apyate en el ejemplo)
14
Cmo empiezo a escribir HTML? Para comenzar tan slo necesitas un editor de texto para escribir las pginas y un navegador para visualizarlas. El editor no debe formatear el texto. Usa el Bloc de notas ( Notepad ), las etiquetas y sus atributos se pueden escribir en maysculas o minsculas. El lenguaje ignora, tambin, los espacios en blanco seguidos, donde slo cuenta uno de ellos.
Notepad o Bloc de notas es un editor de texto simple incluido en los sistemas operativos de Microsoft desde 1985. Su funcionalidad es muy sencilla, con capacidades de formato (negrita, cursiva...) propias de procesadores de textos, o facilidades de programacin.
Una vez que hayas escrito una pgina, gurdala en un archivo con extensin .htm o .html. Abrir el Bloc de notas
situado, normalmente, en la esquina inferior 1. Desde el botn Inicio izquierda de la pantalla. Colocar el cursor y hacer clic sobre el botn 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 botn cerrar 2. Pulsar la combinacin de teclas ALT+F4. 3. Hacer clic sobre el men Archivo y elegir la opcin Salir. Si el documento ha sido modificado y no ha sido guardado antes de cerrar, se te pedir confirmacin para guardarlo antes de cerrar el programa. 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 lnea para cada nueva etiqueta HTML, ya que resulta ms fcil trabajar de este modo. Si escribiramos todo el cdigo seguido nos resultara difcil interpretarlo, por ello es preferible programar insertando las etiquetas por separado, en diferentes lneas. A travs del men Formato, opcin Fuente, puedes cambiar la fuente de todo el documento. Si lo deseas, puedes hacer la letra algo ms grande o pequea.
15
Abrir un documento
1. Pulsar la combinacin de teclas Ctrl+A. 2. Hacer clic sobre el men Archivo y elegir la opcin Abrir. Para guardar un documento, puedes utilizar cualquiera de las siguientes operaciones. 1. Pulsar la combinacin de teclas Ctrl+G. 2. Hacer clic sobre el men Archivo y elegir la opcin Guardar. A la hora de guardar un documento no debes olvidar guardarlo con la extensin htm o html. Por ejemplo, puedes guardar un documento con el nombre mipgina.htm.
Como el Bloc de notas sirve originalmente para escribir documentos de texto, cuando le decimos Abrir, por defecto nos muestra los documentos con extensin .txt, nuestras pginas tienen la extensin .htm o html, por lo que, debemos cambiar en el cuadro de dilogo, abrir, el tipo de para asi archivo visualizar todos y poder as nuestras abrir pginas.
1.2
MANEJAR LOS ELEMENTOS BSICOS DEL LENGUAJE HTML EN LA ACTIVIDAD 2 CREACIN DE PGINAS WEB
ACTIVIDAD 5 Antes de empezar a crear la pgina web es necesario que conozcas los trminos bsicos que estars utilizando en el transcurso de este bloque, por lo que es necesario que realices una bsqueda en Internet y definas lo siguiente: Bloc de Notas: ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ Buscador: ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ Compatible: ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________
Estructura de pgina web:
16
____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ Etiqueta: ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ Hipertexto: ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ Lenguaje html: ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ Marcas (tag) ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ Navegador: ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ Pgina web: ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ Plataforma: ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ Servidor web: ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ Vnculos ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________
17
Ahora s, es tiempo de empezar con la programacin de la pgina 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 veras los resultados de tu pgina. nimo y adelante!! Realiza la lectura estructura bsica a la par que van desarrollando las actividades referentes al diseo de su pgina. Pregunta al profesor todas las dudas que te vayan surgiendo.
Estructura bsica

Cada pgina comienza con: < HTML > . A continuacin viene la cabecera, delimitada por < HEAD > < /HEAD > Despus, el comando < BODY >, que indica el comienzo del cuerpo de la pgina. Las instrucciones HTML se escribirn a continuacin, y finalizarn con < /BODY > La pgina acabar con < /HTML >
Es decir: <HTML> <HEAD> Definiciones de la cabecera </HEAD> <BODY> Instrucciones HTML </BODY> </HTML>
Las etiquetas pueden estar escritas en minsculas o maysculas y no marca error por eso, pero si sera un error no escribirlas correctamente, lo que ocasionara que no se mostrara correctamente nuestra pgina Web. Sin embargo es recomendable que adoptemos un solo formato al escribirlas, es decir o todas las etiquetas las escribimos solo con minsculas o todas las escribimos con maysculas, esto para evitar que al momento de subir las pginas al servidor, los enlaces generen error.
Ejemplo 1 <html> <head> </head> <body> COLEGIO DE BACHILLERES DEL ESTADO DE BAJA CALIFORNIA </body> </html>
18
Etiqueta:<title></title> Esta etiqueta va en la parte del encabezamiento de la pgina web, es decir en el HEAD, y define en su contenido el ttulo de la pgina web, misma que aparecer en la parte superior izquierda de la pantalla de tu navegador. Sin cerrar nuestro navegador de Internet, volvemos al editor de texto e incluimos el campo <title> entre las etiquetas de apertura y cierre del encabezado (head). ACTIVIDAD 6 Trascribe el cdigo siguiente en el bloc de notas, graba el archivo con el nombre index.html. Una vez realizado esto, y sin cerrar el editor de texto, vamos al navegador, da c l i c e n e l m e n a r c h i v o , selecciona la opcin abrir, busca el archivo, seleccinalo y ejectalo dando doble clic en abrir. Tu nueva pgina estar visible. Nota que el ttulo aparecer en la parte superior (pestaa de la pgina). Ejemplo 2: <html> <head> <title> MI PRIMER PGINA</title> </head> <body> COLEGIO DE BACHILLERES DEL ESTADO DE BAJA CALIFORNIA </body> </html>
19
Etiqueta <body>
</body>
Todo el texto, las imgenes y el formato visibles al usuario deben encontrarse entre las etiquetas <BODY> < /BODY > .
Los atributos se incluyen en la etiqueta de apertura, separados por un espacio.
Puede llevar los siguientes atributos:
Bgcolor Text Link Alink Vlink Background Bgsound Bgproperties
Define el color de fondo de la pgina Define el color del texto de la pgina Define el color de los vnculos en la pgina Define el color del vnculo actual o activado en la pgina Define el color del vnculo ya visitado Define el archivo grfico que ser desplegado como fondo Define el archivo de audio que se tocar en la pgina. Define el movimiento vertical del fondo.
20
Cmo se utilizan los colores en HTML? Se pueden llegar a tener 16 millones de colores en una pgina web. Existen dos formas para aplicar colores: 1. Se especifica el color deseado directamente con el nombre del color en ingles: Ejemplo: blue, green, yellow 2. Se especifica el color deseado mediante nmeros hexadecimales e j e m p l o : #RRVVAA
Donde se indica en formato hexadecimal la proporcin de rojo, verde y azul que forma el color deseado. El smbolo # es opcional. Un nmero hexadecimal es un nmero en base 16, la base normal utilizada es base 10 o decimal del 0 al 9. En este caso los nmero validos sern del 0 al 9 aadiendo desde la a A a la f F. Por tanto el nmero 0F ser el 15, 0E ser 14. En la especificacin del color utilizaremos para definir la proporcin de cada color un nmero del 0 al FF (255), 0 indica nada de ese color y FF la mayor proporcin del color. Ejemplos de colores : #RRVVAA #FFFFFF #FF0000 #0000FF #00FFFF #70DB93 #FF7F00 #C0C0C0 COLOR Blanco Rojo Azul Cyan Agua Marino Coral Plomo #RRVVAA #000000 #00FF00 #FF00FF #FFFF00 #000080 #A62A2A #4F2F4F ACTIVIDAD 7 Ingresa al bloc de notas y realiza lo siguiente: Abre el archivo index.html. Contina trascribiendo el ejercicio 3 Graba con el mismo nombre. Ejecuta y si muestra algn error corrgelo. Ingresa a la pgina http://www.usuarios.sion.com/pauluk/coloreshtml.htm Checa los cdigos de los colores. 6 Cambia el cdigo del color de la pgina que transcribiste, graba, ejecuta y observa la diferencia. 1 3 4 5 5 COLOR Negro Verde Magente Amarillo Azul Marino Caf Violeta
21
Ejemplo 3: <html> <head> <title>MI PRIMER PGINA</title> </head> <body bgcolor=#DCDCDC text=#000000> COLEGIO DE BACHILLERES DEL ESTADO DE BAJA CALIFORNIA </body> </html>
22
Texto en HTML
Una pgina Web se visualiza en pases 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 pgina, debemos sustituirlo por su cdigo. Por ejemplo, la "" (a minscula acentuada) se escribe "á" de modo que la palabra pgina se escribira en una pgina HTML de este modo: página. A continuacin se muestra una lista con algunos caracteres y el nombre con el que han de ser representados:
Ejemplo 4: <html> <head> <title> MI PRIMER PGINA</title> </head> <body bgcolor=#C0D9D9 text=#000000> COLEGIO DE BACHILLERES DEL ESTADO DE BAJA CALIFORNIA Estoy aprendíiendo a hacer mi página WEB </body> </html>
Nota que el texto se encuentra de corrido en una sola fila, para bajar de lnea utilizaremos la siguiente etiqueta.
23
Etiqueta <br> La etiqueta <br> instruye al navegador cliente que inserte un salto de lnea en un documento HTML. La etiqueta <BR> tiene el mismo efecto que un retorno de carro en una mquina 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
automticamente, con una apariencia de tercera dimensin. Esta etiqueta especial, como no necesita de cierre se vale de los siguientes atributos:
Align NOSHADE WIDTH SIZE
Establece que la regla se alinee a la izquierda, centro o derecha LEFT,CENTER o RIGHT Quita el sombreado predeterminado de la regla Permite especificar el ancho de la regla (en pixeles o porcentaje) Permite especificar el alto de la regla (en pixeles)
24
ACTIVIDAD 8 Ingresa al bloc de notas y realiza lo siguiente: 1 3 4 5 5 Abre el archivo index.html. Contina trascribiendo el ejercicio 5 Graba con el mismo nombre. Ejecuta y si muestra algn error corrgelo y vuelve a ejecutar. 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<br> PLANTEL MEXICALI.<br> <hr align=left width=100% size=10><br> Mi página WEB <br> </body> </html>
25
Encabezados Los ttulos o encabezados se emplean al comienzo de una seccin. Las etiquetas que se usan son:
Etiqueta
<h1> Ttulo </h1>
Se ve
Ttulo
<h2> Ttulo </h2>

<h3> Ttulo </h3>
<h4> Ttulo </h4> <h5> Ttulo </h5>
Ttulo
Ttulo
Ttulo Ttulo
<h6> Ttulo </h6>
Ttulo
ACTIVIDAD 9 Ingresa al bloc de notas y realiza lo siguiente: 1 3 4 5 5 Abre el archivo index.html. Contina trascribiendo el ejercicio 6 Graba con el mismo nombre. Ejecuta y si muestra algn error corrgelo y vuelve a ejecutar. Practica los diferentes tamaos de encabezados
Ejemplo 6: <html> <head> <title>COBACH</title> </head> <body bgcolor="#C0D9D9" text="#000000"> <h1 align="center"> COLEGIO DE BACHILLERES DEL ESTADO DE BAJA CALIFORNIA</h1><br> <h2 align="center">PLANTEL MEXICALI </h2> <hr align=center width=100%><br> Mi página WEB </body> </html>
26
Etiquetas para el texto
El lenguaje HTML es un lenguaje de marcas, estas marcas sern fragmentos de texto destacado de una forma especial que permiten la definicin de las distintas instrucciones de HTML, tanto los efectos a aplicar sobre el texto como las distintas estructuras del lenguaje. A estas marcas las denominaremos etiquetas y sern la base principal del lenguaje HTML. En documento HTML ser un archivo texto con etiquetas que variarn la forma de su presentacin. Una etiqueta ser un texto incluido entre los smbolos menor que < y mayor que >. El texto incluido dentro de los smbolos ser explicativo de la utilidad de la etiqueta.
27
Por ejemplo:
ETIQUETA
<B>Texto en Negrita</b> <I>Itlica</i> <B><I>Negrita e Itlica</i></b> <U>Subrayado</u> <EM>Enfatizado</em> <STRONG>Fuerte</strong> <CODE>Code Texto</code> <CITE> Citation Text</cite> <KBD>Keyboard Text</kbd> <SAMP>Sample Text</samp> <TT>Teletype Text</tt> <VAR>Variable Element Text</var> <BIG>Texto grande</big> <SMALL>Texto pequeo</small> <SUB>Subindice</SUB> <SUP>Superndice</SUP> <BLINK> Texto intermitente</blink> <STRIKE>Texto tachado</STRIKE>
SE VER AS
Texto en Negrita Itlica Negrita e Itlica Subrayado Solo Explorer Enfatizado Fuerte Code Texto Citation Text Keyboard Text Sample Text Teletype Text Variable Element Text Texto grande Texto pequeo
Subndice
Solo Explorer Solo Explorer
Superndice
Texto intermitente Solo Netscape Texto tachado
Atributos de las Etiquetas Las etiquetas pueden presentar modificadores que llamaremos atributos que permitirn definir diferentes posibilidades de la instruccin HTML. Estos atributos se definirn en la etiqueta de inicio y consistirn 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 cmo lo interprete el navegador. Cuando el valor que toma el atributo tiene ms de una palabra deber expresarse entre comillas, en otro caso no ser necesario. Un ejemplo de atributo ser: <A HREF="http://cobachbc.edu.mx">Pgina oficial de cobach</A> En este caso la etiqueta A presenta un atributo HREF cuyo valor es http://cobachbc.edu.mx Igualmente una etiqueta podra presentar varios atributos:
28
<HR ALIGN=LEFT NOSHADE SIZE=5 WIDTH=50%> En este caso la etiqueta HR presenta cuatro atributos. El segundo atributo NOSHADE es un caso especial que no presenta valor. El orden en que se especifiquen los atributos no afectar al resultado final. ACTIVIDAD 10 Ingresa al bloc de notas y realiza lo siguiente: 1 2 3 4 Abre el archivo que grabaste con el nombre de index.html. Continua trascribiendo la parte que falta del ejercicio 7. Graba con el mismo nombre y ejecuta. Observa la pgina que te presenta, si muestra algn error corrgelo y vuelve a ejecutar. 5.- Practica las diferentes etiquetas para texto.
EJEMPLO 7: <html> <head> <title>COBACH</title> </head> <body bgcolor="#C0D0D9" text="#000000"> <h1 align="center"> COLEGIO DE BACHILLERES DEL ESTADO DE BAJA CALIFORNIA </h1><br> <h2 align="center"> PLANTEL MEXICALI </h2> <hr width=100% size=5><br> Ejemplo del uso de las etiquetas<b><i></i></b><br> <b>Este texto está con negrillas</b><br> <u>Este texto está con subrayado</u><br> <i>Este texto está con inclinación itálica</i><br> Este <b>texto <i>cuenta <u>con un </u>combinado</i> de</b> todo.<br> </body> </html>
29
Etiqueta <font> </font> Presenta atributos que nos permiten modificar el tamao y color del texto incluido entre la etiqueta de inicio y fin. ATRIBUTO Color Size Face FUNCIN Determina el color que se aplica al texto Determina el tamao relativo del texto. Los tamaos vlidos son del 1 al 7, siendo el predeterminado el 3 y el ms grande el 1. Asigna una fuente o tipo de letra.
ACTIVIDAD 11 Ingresa al bloc de notas y realiza lo siguiente: 1 2 3 4 Abre el archivo que grabaste con el nombre de index.html. Continua trascribiendo la parte que falta del ejercicio 8. Graba con el mismo nombre y ejecuta. Observa la pgina que te presenta, si muestra algn error corrgelo y vuelve a ejecutar. 5.- Practica los diferentes atributos de la etiqueta <Font>.
30
Ejemplo 8: <html> <head> <title>COBACH</title> </head> <body bgcolor="#FFFFFF" text="#000000"> <h1 align="center"> COLEGIO DE BACHILLERES DEL ESTADO DE BAJA CALIFORNIA</h1><br> <h2 align="center">PLANTEL MEXICALI</h2> <hr width=100% size=5><br> Ejemplo del uso de las etiquetas<b><i></i></b><br> <b>Este texto está con negrillas</b><br> <u>Este texto está con subrayado</u><br> <i>Este texto está con inclinación itálica</i><br> Este <b>texto <i>cuenta <u>con un </u>combinado</i> de</b> todo.<br> <font color="red"><font size=10>N</font>or</font><font color="yellow"> </font><font color="green"><font size=7>ma</font><br> </body> </html>
Ejemplificando, introduciremos lo siguiente: NORMA, Nota que la primera N es ms grande que el dems texto. Usaremos el tamao 1 0 para la letra N, el tamao 3 para las l e t r a s O R y el tamao 7 para las letras MA.
31
ACTIVIDAD 12
DESPUS DE HABER PRACTICADO LOS EJERCICIOS ANTERIORES, COMPLETA LA TABLA SIGUIENTE EXPLICANDO LA FUNCIN QUE REALIZA CADA ETIQUETA: ETIQUETA FUNCIN
<html> </html>
<head> </head>
<title> </title> <body> </body> <body bgcolor=" <hr> <br> <hr align=left width=100% size=10> <h1 align="center"> " text=" ">
<b> </b> <u> </u> <i> </i> <font color="red"> </font>
<font size=10> </font>
32
ACTIVIDAD INTEGRADORA PARTE 2 Es tiempo de que empieces a realizar tu pgina web, por lo que es importante que revises el diseo que hiciste y empieces a definir cada una de las etiquetas que van a formar la pgina. Anota en el cuadro siguiente el cdigo de tu pgina principal para que posteriormente la trascribas en el bloc de notas.
33
Imgenes en los documentos HTML
Etiqueta <img>
En un documento HTML se puede incluir cualquier imagen en alguno de los siguientes formatos grficos: GIF, JPEG XBM. El formato ms extendido y practico es el GIF, todos los navegadores grficos de la Web soportan este formato, adems existen gran cantidad de programas de tratamiento de grficos que permiten grabar los grficos o convertir grficos a GIF. Este formato, as mismo, utiliza algoritmos de compresin que hacen que sus archivos sean de cortos tamaos y apropiados para su transmisin por la red. El formato GIF es ms recomendado para iconos, grficas,... y el formato JPEG es ms til para imgenes reales como paisajes y personas. Para poder utilizar otro formato grfico, necesitars usar un enlace cuyo destino sea la car[eta del grfico. Al seguir el enlace se te pedir que indiques un programa externo que se encargue de mostrar los archivos de ese formato grfico, por lo tanto no pueden insertarse dentro de documentos HTML. Inclusin de Imgenes
La etiqueta encargada de mostrar imgenes en HTML es IMG y tiene el siguiente formato: <IMG SRC="URL de la Imagen" ALT="Texto alternativo a la imagen"> En el punto del archivo HTML en el que queramos que se muestre la imagen incluimos esta etiqueta. Se puede mostrar la imagen, al comienzo del documento, al final o intercalada en el texto. Igualmente se puede insertar una imagen dentro de cualquiera de las estructuras del lenguaje HTML como listas, tablas o formularios. Esta etiqueta no necesita la etiqueta de fin, ya que el efecto de la etiqueta no se produce sobre un texto o algn 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 extensin apropiada a su formato, por ejemplo si es GIF la extensin ser .gif, si es JPEG la extensin ser .jpg o .jpeg, si no se cumple esto la imagen no se mostrar de forma correcta. Al definir la imagen como una URL, esta imagen no es necesario que se encuentre en el servidor local, pudiendo especificar el camino completo y el servidor donde se encuentra la imagen. En este caso al igual que en los hiperenlaces es posible indicar direcciones de URL relativas a los documentos actuales. Lo normal es referenciar una imagen que se encuentre en el servidor local, ya que el acceso a imgenes en servidores externos puede ser ms lento. Por tanto conviene copiar las imgenes e iconos que se usen al servidor local. A continuacin se explica la utilidad de cada unos de los atributos de la etiqueta IMG.
34
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 imgenes, sean solo texto o tenga inhabilitado el mostrar imgenes. Se recomienda cuando existan en el documento imgenes usadas como botones, para mostrar un texto en vez del botn en navegadores que no puedan mostrar grficos, de esta forma se consigue que todos los usuarios puedan consultar sus pginas. Alineacin de la imagen Indica cmo se alinea el texto que sigue a la imagen con respecto a esta. 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. Tambin se pueden utilizar alineaciones un poco ms avanzada, TEXTTOP se alinea justo al comienzo del texto ms alto de la lnea (TOP se alinea al tamao del primer carcter de la lnea). ABSMIDDLE, es el centro real de la imagen, con MIDDLE se coloca el texto a partir del punto medio, con ABSMIDDLE el texto aparece centrado con la imagen. ABSBOTTOM coloca el texto justo al final de la imagen. Se recomienda que se usen estos ltimos al ser ms precisa la alineacin, aunque solo son validos para los navegadores ms avanzados. Ejemplos Inst. HTML <IMG SRC="logo.jpg" ALIGN=TOP><B>COLEGIO DE BACHILLERES DEL ESTADO DE BAJA CALIFORNIA<B>.
Resul tado CALIFORNIA.
COLEGIO DE BACHILLERES DEL ESTADO DE BAJA
Explica Como se ve solo aparece la primera frase alineada en la parte alta (TOP) de la cin imagen. Inst. HTML <IMG SRC="logo.jpg><B> COLEGIO DE BACHILLERES DEL ESTADO DE BAJA CALIFORNIA <B>.
Explica En este caso el texto est alineado en la parte central de la imagen. cin
35
Inst. HTML
<IMG SRC="logo.jpg" ALIGN=BOTTOM><B> COLEGIO DE BACHILLERES DEL ESTADO DE BAJA CALIFORNIA. <B>.
Explica El texto est alineado en la parte baja de la imagen. cin Inst. HTML Resul tado Explica Tambin es posible alinear imgenes entre s y imgenes respecto a otros cin elementos HTML
<IMG SRC="logo.jgp" ALIGN=MIDDLE><IMG SRC="logo.jpg">
En los casos anteriores solo se especifica donde se coloca la primera lnea del texto y el resto se incluyen debajo de la imagen quedando un efecto muy feo cuando el texto tiene ms de una lnea. Existen otras alineaciones que incluirn 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 combinacin con las anteriores alineaciones.
Inst. HTML
<IMG SRC="logo.jpg" ALIGN=LEFT><B> COLEGIO DE BACHILLERES DEL ESTADO DE BAJA CALIFORNIA<B>
Resul tado
COLEGIO DE BACHILLERES DEL ESTADO DE BAJA CALIFORNIA.
En este caso aparece la imagen insertada en el texto, de forma que esta se Explica integra en prrafo que la rodea, al contrario que en los casos anteriores cin
36
Inst. HTML
<IMG SRC="logo.jpg" ALIGN=RIGHT><B> COLEGIO DE BACHILLERES DEL ESTADO DE BAJA CALIFORNIA<B> COLEGIO DE BACHILLERES DEL ESTADO DE BAJA CALIFORNIA..
Resul tado
Explica En este ejemplo aparece la imagen alineada a la derecha. cin
Tamao de la imagen
Es posible cambiar el tamao de la imagen de forma que pueda ajustarse como se desee, pudiendo ampliar o disminuir este. El atributo HEIGHT Determina el alto de la imagen a mostrar, se especifica en puntos de la pantalla (pixeles) o en tanto por ciento sobre el tamao del documento. En caso de que la imagen sea mayor o menor se escalar a este tamao. El atributo WIDTH indica el ancho al que se mostrar la imagen, escalndola a este tamao. Tambin se expresar en pixeles o en tanto por ciento. No es necesario indicar el ancho y el alto, se puede especificar solo uno de las dimensiones, ajustndose la otra a la proporcin de la imagen. Es recomendable indicar solo uno de estos parmetros 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 proporcin con respecto al texto. Si se desea mostrar dos imgenes 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 ningn caso el alto (HEIGHT), de esta forma independientemente como sea el tamao de la ventana del navegador e independientemente del monitor del cliente, siempre se podrn mostrar ambas imgenes en la misma lnea.
Inst. HTML Resul tado Explica cin Si no se indican bien ambos valores, teniendo en cuenta la proporcin de la imagen esta puede aparecer deformada.
<IMG SRC="logo.jpg" WIDTH=100 HEIGHT=25>
37
Inst. HTML
<IMG SRC="logo.jpg" WIDTH=75>
Resul tado
Explica cin Inst. HTML Explica cin
En este se ve como al indicar uno solo de los parmetros, el otro se ajusta apropiadamente a la proporcin de la imagen.
<IMG SRC="obra.gif" ALIGN=MIDDLE WIDTH=9%> <IMG SRC="/barras1.gif" WIDTH=89%>
En este se ve como al indicar uno solo de los parmetros, el otro se ajusta apropiadamente a la proporcin de la imagen.
Explica cin
Si varia el tamao de la ventana de su navegador, comprobar que el tamao de las imgenes cambia, pero guardan la misma proporcin, el obrero ocupa un 9% de la ventana y la barra el 86% restante. Y siempre se mostrarn ambas imgenes en la misma lnea.
ACTIVIDAD 13 Ingresa al bloc de notas y realiza lo siguiente:
38
1 2 3 4
Abre el archivo que grabaste con el nombre de index.html. Continua trascribiendo la parte que falta del ejercicio 9. Graba con el mismo nombre y ejecuta. Observa la pgina que te presenta, si muestra algn error corrgelo y vuelve a ejecutar. 5.- Practica las diferentes ubicaciones de las imgenes.
Ejemplo 9:
<html> <head> <title> COBACH </title> </head> <Body bgcolor = "#00FFFF">
Es necesario que tengas una imagen llamada logo.jpg en la carpeta en donde ests guardando todos los ejercicios, para que el navegador pueda mostrarla de lo contrario te presentar solo un cuadro.
<IMG SRC="logo.jpg" ALIGN=MIDDLE HSPACE=100> <font color="#0000FF" size="5" face="tahoma"> <B> COLEGIO DE BACHILLERES DEL ESTADO DE BAJA CALIFORNIA </font> <hr align="center" width="100%" size="10" noshade> </hr> <p align="left"> <a href="http://cobachbc.edu.mx/">COBACH </a> <br> </p> <p align="left"> <font color="#0000cc" size"2" face="tahoma"> 05 noviembre del 2011 </font> </p> </Body> </html>
39
Tablas
En HTML tambin podemos incluir arreglos de tablas. Se deben utilizar varias etiquetas: Etiqueta <table></table> Seala el inicio y final de una tabla. Sus atributos son: ETIQUETA Align Bgcolor Border BorderColor BorderDark BorderLight Caption Cellpadding Cellspacing Width FUNCIN Establece la alineacin de la tabla o texto mediante ALIGN=LEFT o ALIGN=RIGHT Establece el color de fondo de las celdas de la tabla Determina el ancho del borde en pixeles Asigna un color al borde Determina el color de la parte oscura de un borde de 3 Asigna el color de la parte clara de un borde de 3 dimensiones Especifica el titulo para la tabla Establece la cantidad de espacio libre junto al contenido de una celda Asigna la cantidad de espacio entre las celdas de una tabla Determina el ancho de la tabla en pixeles o en un porcentaje
40
Etiqueta <th> </th> Indica al navegador cliente que exhiba el texto como un encabezado en la primera fila de una tabla. Atributos principales:
ETIQUETA Colspan Align
FUNCIN especifica el nmero de celdas que cubre el Determina la posicin del texto del titilo
Etiqueta <tr> </tr> Indica al navegador que exhiba el texto dentro de una fila; puede tambin interpretarse como la etiqueta que define filas.
ETIQUETA Align
FUNCIN Alineacin del texto/objeto de la celda
Etiqueta <td> </td> La etiqueta de datos de la tabla, es la que identifica a las columnas o celdas especficas de una tabla. Atributos principales:
ETIQUETA Align Bgcolor Background Width
FUNCIN Alineacin del texto/objeto de la celda Color de fondo de la celda imagen de fondo de una celda Ancho de la celda/columna con respecto al ancho de la tabla Solo precisa definir el ancho en la primera celda de la columna
Recuerde que dentro de una celda, usted puede insertar desde texto o un grfico hasta una tabla entera.
41
ACTIVIDAD 14 Ingresa al bloc de notas y realiza lo siguiente: 1 2 3 4 5 Trascribe el ejercicio 10. Graba con el nombre de Planteles. html Ejecuta el archivo, s presenta errores corrgeles Observa la tabla que te presenta la pgina. Modifcala a tu gusto.
Ejemplo 10: <html> <head> <title> PLANTELES </title> </head> <Body bgcolor = "#00FFFF"> <IMG SRC="logo.jpg" ALIGN=MIDDLE HSPACE=100> <font color="#0000FF" size="5" face="tahoma"> <B> COLEGIO DE BACHILLERES DEL ESTADO DE BAJA CALIFORNIA </font> <hr align="center" width="100%" size="10" noshade> </hr> <br><center> <table width=80% align=center border=3> <tr><th colspan=3>PLANTELES OFICIALES</th></tr> <tr align=center> <td width=40% bgcolor="#C0C0C0"> PLANTEL </td> <td width=30% bgcolor="#C0C0C0"> TELFONO </td> <td width=30% bgcolor="#C0C0C0">UBICACIN </td> Graba con el </tr> nombre de <tr> planteles.html <td> Mexicali</td> y abre la pgina en tu <td>5534340</td> navegador. <td>Colonia Nueva</td> </tr> <tr> <td>Baja California</td> <td>5530044</td> <td>Colonia Baja California</td> </tr> <tr> <td>Jos Vasconcelos</td>
42
<td>453444</td> <td>Nuevo Mexicali</td> </tr> <tr> <td> Ciudad Morelos</td> <td> 016585147018</td> <td> Ciudad Morelos</td> </tr> <tr> <td> Guadalupe Victoria</td> <td> 016585162237</td> <td> Colonia Guadalupe Victoria</td> </tr> <tr> <td> Nuevo Len</td> <td>5230110 </td> <td> Ejido Nuevo Len</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> Estacin Coahuila</td> <td> 016535155354</td> <td> Estacin Coahuila</td> </tr> </table> <br></center> </Body> </html>
43
Listas Con frecuencia se usan listas en los documentos. El lenguaje HTML incorpora unas listas con vietas sencillas o tambin letras o nmeros. Para dar ms vistosidad a las pginas, se suelen emplear tambin imgenes que se colocan delante de cada prrafo. Vamos a ver algunas de las posibilidades que tenemos. Listas con vietas desordenadas He aqu el ejemplo ms sencillo de una de estas listas: ESCRIBIMOS EN HTML <ul> <li>Primer trmino de la lista <li>Segundo trmino <li>Tercer trmino </ul>

SE VER AS Primer trmino de la lista Segundo trmino Tercer trmino
Como ves, la lista se declara con la etiqueta <UL> y finaliza con el cierre de la misma </UL>. Tambin podemos modificar las vietas por medio del atributo TYPE= circle, disc o square (crculo, disco o cuadrado) y aadir sublistas.
44
ESCRIBIMOS EN HTML <ul> <li type= disc>Primer trmino de la lista <ul> <li>Sublista <li>Otro elemento </ul> <li type=circle>Segundo trmino <li type=square>Tercer trmino </ul>
SE VER AS
Primer trmino de la lista o Sublista o Otro elemento Segundo trmino Tercer trmino
Otro atributo interesante es compactar para reducir el espacio entre los elementos
Listas con vietas ordenadas Estas listas se caracterizan porque aparecen nmeros o ciertos caracteres que ordenan sus elementos. La etiqueta usada es <OL> junto con su correspondiente de cierre </OL>. El atributo TYPE toma ahora los valores 1, a, A, i, I. Un ejemplo de estas listas es el siguiente ESCRIBIMOS EN HTML <ol type=i> <li >Primer trmino de la lista <li >Segundo trmino <li>Tercer trmino <li>Cuarto <li>Quinto </ol> i. ii. iii. iv. v. SE VER AS Primer trmino de la lista Segundo trmino Tercer trmino Cuarto Quinto
Listas de definicin Estas listas se forman con el elemento que se define y su definicin. Las etiquetas son <DL> y </DL> para la lista y <dt> y <dd> para los elementos y sus definiciones. Un ejemplo:
45
ESCRIBIMOS EN HTML <dl> <dt >Trmino 1 <dd>Definicin del elemento 1 <dt>Trmino 2 <dd>Definicin del elemento 2 <dt>Trmino 3 <dd>Definicin del elemento 3 </dl>
SE VER AS
Trmino 1 Definicin del elemento 1 Trmino 2 Definicin del elemento 2 Trmino 3 Definicin del elemento 3
ACTIVIDAD 15 Ingresa al bloc de notas y realiza lo siguiente: 1 2 3 4 5 Trascribe el ejercicio 11. Graba con el nombre de capacitaciones. html Ejecuta el archivo, s presenta errores corrgeles Observa las listas que te presenta la pgina. Modifcala a tu gusto.
Ejemplo 11:
<html> <head> <title> PLANTELES </title> </head> <Body bgcolor = "#00FFFF"> <IMG SRC="logo.jpg" ALIGN=MIDDLE HSPACE=100> <font color="#0000FF" size="5" face="tahoma"> <B> COLEGIO DE BACHILLERES DEL ESTADO DE BAJA CALIFORNIA </font> <hr align="center" width="100%" size="10" noshade> </hr> <br><center> <table width=80% align=center border=3> <tr><th colspan=3>Materias</th></tr> <tr align=center> <td width=40% bgcolor="#C0C0C0"> Capacitaciones </td> <td width=30% bgcolor="#C0C0C0"> Materias </td> <td width=30% bgcolor="#C0C0C0">Apoyos </td> </tr> <tr> <td>
46
<ul> <li>Planeacin y Administracin de Pequeos Negocios</li> <li>Auditora de Gestin de Calidad</li> <li>Contabilidad Comercial y de Servicios </li> <li>Ingls Empresarial </li> <li>Informtica para Oficinas </li> </ul> </td> <br><br> <td> <ol> <li>Matemticas</li> <li>Ingles</li> <li>Informtica</li> <li>tica y Valores</li> <li>Introduccin a las Ciencias Sociales</li> <li>Qumica</li> <li>Taller de lectura y Redaccin</li> <li>Historia de Mexico</li> <li>Literatura</li> <li>Biologia</li> <li>Fisica</li> <li>Algebra</li> <li>Logica</li> <li>Estructura Socioeconomica de Mexico</li> </ol> </td> <td> <ol> <li>Orientacin</li> <li>Constryete</li> <li>Paraescolares</li> <li>Tutoras</li> </ol> </td> </tr> </table> <br></center> <br><br><br><br> <p align="right"> <a href="file:///C:/Users/sandoval/Desktop/pgina%20de%20prueba/principal.html">Principal</a> <br> </p> </Body> </html> Graba con el nombre de capacitaciones.html y abre la pgina en tu navegador.
47
Hipervnculos Un vnculo hipertextual es un texto, botn o imagen que al seleccionar nos lleva a otra direccin URL, pgina WEB o recurso. Etiqueta <A> </A> La etiqueta <A> que viene de ancla, denota el inicio y el final de una instruccin que contiene alguna forma de vnculo o hipervnculo. Esta etiqueta permite al usuario vincularse a otra ubicacin dentro del mismo documento HTML, a otro sitio WEB, a un servidor FTP, enlace de correo electrnico. Atributos:
ETIQUETA HREF NAME TARGET
FUNCIN Recurso al cual se hace referencia el hipervnculo Especifica el nombre de la posicin a donde apuntar Destino del enlace (generalmente para pginas con Frames)
48
ACTIVIDAD 16 Ingresa al bloc de notas y realiza lo siguiente: 1 2 3 4 Abre el archivo que grabaste con el nombre de index.html. Continua transcribiendo la parte que falta del ejercicio 12. Graba con el mismo nombre y ejecuta. Observa la pgina que te presenta, si muestra algn error corrgelo y vuelve a ejecutar. 5 Practica los hipervnculos. 6 Modifcala a tu gusto.
Ejemplo 12: <html> <head> <title> COBACH </title> </head> <body bgcolor="#cccccc" text="#ffffff" link="#9690cc"> <IMG SRC="encabezado.jpg"> <center> <font size=6> <table border=10 CELLSPACING=0 CELLPADDING=0><tr> <td align=right> <font size=7><strong><center> PLANTEL MEXICALI</center> Graba con el nombre de </td></tr> index.html y abre la </table> pgina en tu navegador. <hr></font> <a href="file:///C:/Users/sandoval/Desktop/pgina%20de%20prueba/historia.html">Historia</a> || <a href="file:///C:/Users/sandoval/Desktop/pgina%20de%20prueba/planteles.html">Planteles</a> || <a href="file:///C:/Users/sandoval/Desktop/pgina%20de%20prueba/capacitaciones.html">Materias </a> <hr> </center> <table width=80% align=center border=8> <tr>
49
<td> <a href="http://coacheerleader.tripod.com/Broncos.html"><img src="porra2.jpg" height="150px" width="150px"></A> </td> <td> <a href="americano.htm"><img src="americano.jpg" height="150px" width="150px"></A> </td> <td> <a href="basqueboll.htm"><img src="basqueboll.jpg" height="150px" width="150px"></A> </td> <td> <a href="banderitas.htm"><img src="banderitas.jpg" height="150px" width="150px"></A> </td><br> </tr> </table> <table width=30% align=center border=8> <tr> <td> <a href="banda de guerra.htm"><img src="banda de guerra.jpg" height="150px" width="150px"></A> </td> <td> <a href="escolta.htm"><img src="escolta.jpg" height="150px" width="150px"></A> </td> <td> <a href="danza.htm"><img src="danza.jpg" height="150px" width="150px"></A> </td> <td> <a href="teatro.htm"><img src="teatro.jpg" height="150px" width="150px"></A> </td> </tr> </table> </center> <br><br> <a href="mailto:normarmas2000@hotmail.com"> <img src="buzon.jpg" height="32px" width="32px" /> </a> </Body> </html>
50
51
ACTIVIDAD 17
Despus de haber practicado los ejercicios anteriores llena la siguiente tabla, explicando la funcin que realiza cada una de las etiquetas siguientes:
ETIQUETA <IMG SRC="logo.jpg>
FUNCIN
<IMG SRC="logo.jpg" ALIGN=BOTTOM
<IMG SRC="logo.jpg" ALIGN=MIDDLE HSPACE=100>
<table width=80% align=center border=3></table>
<tr> </tr>
<th colspan=3>PLANTELES OFICIALES</th>
<tr align=center></tr>
<td width=40% bgcolor="#C0C0C0"> PLANTEL> </td>
52
ACTIVIDAD INTEGRADORA PARTE 3 Continuamos con la elaboracin de la codificacin de tu pgina web, bsate en los ejemplos para que puedas realizar las otras pginas que componen tu pgina web. Anota en el cuadro siguiente el cdigo de tu pgina que vas a disear para que posteriormente la trascribas en el bloc de notas.
53
54
Marquesinas Vamos a ver ahora lo que son las marquesinas. Son pequeas ventanas donde vemos un texto desplazarse. Slo son implementadas por Microsoft Internet Explorer 3.0 o superior, y no por Netscape y los dems navegadores, donde se ver como un texto fijo. La etiqueta bsica ser <MARQUEE> y </MARQUEE> <MARQUEE>Texto desplazndose</MARQUEE> Esta es una marquesina por defecto, pero se pueden aadir muchos ms parmetros:
Anchura y altura, WIDTH=x y HEIGHT=y, respectivamente, siendo x e y un nmero de pxeles o un porcentaje de la pantalla. <MARQUEE WIDTH=50% HEIGHT=80>Marquesina con el 50% de la ventana de ancho y 80 pxeles de alto</MARQUEE> Alineamiento del texto que rodea a la marquesina, con ALIGN="xxx", que puede ser TOP para arriba, MIDDLE en el medio o BOTTOM para abajo. <MARQUEE WIDTH=50% HEIGHT=80 ALIGN=BOTTOM>Marquesina con "texto" alineado en la parte inferior</MARQUEE> Texto Color de fondo. Se hace con BGCOLOR="xxyyzz", siendo ste un nmero hexadecimal. <MARQUEE BGCOLOR="AA0000">Texto desplazndose 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 desplazndose alternadamente</MARQUEE> Direccin 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 desplazndose hacia la derecha</MARQUEE> Cantidad de texto, con SCROLLAMOUNT=xx, siendo xxx el nmero de pxels que se desplazan en cada avance. Cuanto mayor sea ms rpido avance. <MARQUEE SCROLLAMOUNT=50>Texto avanzando rpido</MARQUEE>
55
Tiempo del movimiento de avance, con SCROLLDELAY=xxx, siendo xxx el nmero de milisegundos que dura cada movimiento de avance. Cuanto mayor sea ms lento ir. <MARQUEE SCROLLDELAY=150>Texto avanzando lento</MARQUEE> Nmero de veces que aparecer el texto, con LOOP=x siendo x en nmero de veces. Por defecto es infinito. Separacin entre el texto de la marquesina y el borde de su ventana, con HSPACE=x y VSPACE=y, siendo x los pxeles en los mrgenes izquierdo y derecho, e y los pxeles en los mrgenes superior e inferior. Ya fuera de la etiqueta <MARQUEE>, tambin es posible decidir la fuente o tipo de letra en una marquesina con la etiqueta <FONT FACE="xxx">, siendo xxx el nombre de la fuente, de la siguiente manera: <FONT FACE="Arial"> <MARQUEE>Texto con fuente Arial</MARQUEE> </FONT>
<marquee bgcolor="#FFFFFF" behavior="alternate" direction="down"> VIVA MEXICO </marquee>

Otras etiquetas tiles Existen otras etiquetas que pueden ser tiles al momento de elaborar las pginas 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 cdigo y que es utilizada para realizar acotaciones y/o comentarios. Sintaxis de Ejemplo: <!-Los comentarios se introducen de esta manera -->
Etiqueta de comentarios <comment> </comment> Etiqueta que puede ser introducida en cualquier parte del cdigo y que es utilizada para realizar acotaciones y/o comentarios. Sintaxis de Ejemplo: <comment>Los comentarios se introducen de esta manera</comment>
56
Etiqueta <address></address> Ofrece una manera de dar formato a un pequeo cuerpo de texto que se asemeje a la rotulacin de una carta convencional. Sintaxis de ejemplo: <address>Rocio Ruiz<br> POBOX 2282<br> Mexicali- Baja California</address> Etiqueta <cite> </cite> El texto dentro de la etiqueta <cite> aparece en cursivas para representar una cita Sintaxis de ejemplo: <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 travs de un navegador. Sintaxis de ejemplo: <code>Este texto aparece con tipo de letra especial</code> Etiqueta <credit> </credit> Esta etiqueta se emplea para indicar los crditos por el material incluido en un documento. A menudo se asignan crditos para las fuentes e individuos que se citan en forma directa. Sintaxis de ejemplo: <credit>Foto usada bajo permiso de Carlos Aníbarro</credit> Etiqueta <em> </em> Indica que se debe dar nfasis al texto que se contiene. EL navegador resaltar este texto con negrillas e inclinacin italica. Sintaxis de ejemplo: <em>Texto resaltado</em> Etiqueta <kbd> </kbd> La etiqueta <kbd> indica al navegador que interprete el texto especificado en una fuente en negritas de ancho fijo. Por lo regular, esta etiqueta se usa para ejemplificar una entrada del teclado hecha por el usuario. Sintaxis de ejemplo:
57
<kbd>Teclee su mensaje acá:</kbd> Etiqueta <nobr> </nobr> La etiqueta <nobr> impide que el navegador inserte un salto de lnea, incluso cuando es adecuado el ajuste de texto. Algunas cadenas de texto no deberan romperse bajo ninguna circunstancia. Un buen ejemplo de una cadena de texto que debe permanecer sin cortes es un URL extenso. Sintaxis de ejemplo: No deseo que esta direccin URL larga sea cortada: <nobr>http://www.bolivia-internet.com/irc</nobr> Etiqueta <p> </p> La etiqueta <p> o de prrafo, indica el inicio y el final de oraciones a exhibir con un solo prrafo. Sintaxis de ejemplo: <p>a partir de ahora definimos párrafos de esta manera.</p> <p align=center>Párrafo en el centro</p> <p align=left>Párrafo a la izquierda</p> <p align=right>Párrafo a la derecha</p>
Etiqueta <pre> </pre> La etiqueta <pre> significa texto preformateado y se usa para conservar espacios y saltos de lnea en cuerpos de texto. Esta etiqueta resulta til en el formateo de un prrafo completo que el autor quisiera que el navegador cliente lo exhibiese palabra por palabra. Sintaxis de ejemplo: <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. Sintaxis de ejemplo: <strike>Este texto esta tachado</strike> Etiqueta <strong> </strong> Hace que el navegador exhiba el texto en negritas. Algunos navegadores muestran el texto en cursivas. Sintaxis de ejemplo:
58
<strong>Este texto esta sobre saltado</strong> Etiqueta <sub> </sub> Instruye al navegador que exhiba el texto especificado como subndice. Sintaxis de ejemplo: Agua: H<sub>2</sub>0 Etiqueta <sup> </sup> Indica al navegador exhibir el texto especificado como super ndice Sintaxis de ejemplo: Mate: 2*2 = 2<sup>2</sup>. Etiqueta <tt> </tt> Etiqueta teletipo, instruye al navegador que exhiba el texto especificado en una fuente de ancho fijo. Sintaxis de ejemplo: <tt>Este es un tipo de letra de teletipo</tt> Etiqueta <var> </var> Indica al navegador que exhiba el texto especificado en una fuente ms pequea, de ancho fijo. Sintaxis de ejemplo: <var>Este texto ser ms pequeo y de formato especial</var> Atributo bgproperties=fixed del BODY Indica a su navegador Internet Explorer que mantenga el fondo constante y no mvil de forma vertical. Sintaxis de ejemplo: <body text=#FFFFFF bgproperties=fixed> bgcolor=#000000 background=fondo.gif
59
ACTIVIDAD INTEGRADORA LTIMA PARTE
En trabajo colaborativo como proyecto final debers entregar en un CD lo siguiente: 1.- El Documento en Microsoft Word del diseo de tu pgina web que elaboraste en la parte 1 de la actividad integradora. 2.- El archivo que elaboraste en el bloc de notas de tu pgina principal index.html que incluya: Encabezado Imgenes Hipervnculos a otras pginas web Hipervnculos a tus pginas. Opcin para enviar un correo 3.- El archivo que elaboraste en el bloc de notas de la segunda pgina, en la que apliques las tablas 4.- El archivo que elaboraste en el bloc de notas de la tercera pgina, en la que apliques listas. 5.- Las tres pginas de tus sitios web. 6.- El Documento en Microsoft Word con las conclusiones individuales de cada uno de los integrantes del equipo.
60
I.
NOMBRE DEL EVALUADOR: NOMBRE DEL CANDIDATO:
INFORMACIN GENERAL PARA EL PROCESO DE EVALUACIN

FECHA DE APLICACIN:
IECL Cdigo Ttulo Perfil de la NTCL que se evala Unidad:

Disear pginas web en lenguaje HTML.
Utilizar software de aplicacin para el diseo de pginas web Publicar pginas web y establecer comunicacin va Internet.
Cdigo
Ttulo Elementos:
Nivel
Referencia
Cdigo Intento de evaluacin 2
Ttulo Intento de evaluacin 3 No Domina el Contenido Con letra Con nmero
Intento de evaluacin 1 Domina el Contenido Juicio de la Evaluacin del mdulo 1
Contenido C.1.1 C.1.2
Juicio de evaluacin Con letra Con nmero
61
C.1.1 C.1.2
UTILIZAS LOS ELEMENTOS FUNDAMENTALES DEL DISEO DE UNA PGINA WEB. CONOCES LA ESTRUCTURA DE UNA PGINA WEB. S NO N/A
CONTENIDO Trabaja colaborativamente. Entrego en tiempo y forma. Eligio un tema para desarrollar su pgina web. Identifica las fuentes de consulta para su pgina web. Define la escalabilidad de su pgina Web. Elabora la planificacin de su pgina web. Realiza el diseo de su pgina Web. Define las imgenes y sus ubicaciones. Define los enlaces a otras pginas web y con sus propias pginas Existe un enlace o pgina que describa el propsito del Sitio Web y suministre informacin de quien la public y/o respalda. Es posible establecer contacto con los desarrolladores mediante un correo electrnico. El autor(es) est claramente identificado en la pgina. Las imgenes presentan un tamao adecuado, estn identificadas y referenciadas. Los encabezados, prrafos, listas, etc., presentan los mismos estilos. Accesibilidad. Los enlaces estn vigentes/activos. Esttica. El diseo y combinacin de colores son adecuados. Compatibilidad. El sitio web se ve navegador que se utilice. y funciona bien independientemente del
Si la informacin publicada proviene de otras fuentes, se citan correctamente. Los colores que maneja son claros y permiten leer la informacin que muestra la pgina. Muestra informacin del autor de la pgina web. Muestra un enlace de envo de correo al autor.
62
Submdulo
PROPSITO: Al trmino del submdulo, sers competente para utilizar software de aplicacin para el diseo de pginas Web. El presente submdulo tiene como objetivo prepararte para utilizar software de aplicacin para el diseo de pginas Web. Por lo que como proyecto elaboraras el diseo de una pgina web empresarial utilizando el software Dreamweaver con las caractersticas siguientes: Una pgina principal que incluya: Encabezado Imgenes Hipervnculos a otras pginas web Hipervnculos a las pginas que t disees Una segunda pgina, en la que apliques imgenes y efectos. Una tercera pgina en la que apliques tablas. Una cuarta pgina en la que utilices un formulario de contacto Todas las pginas deben de estar enlazadas entre s y a una pgina en internet.
COMPETENCIAS: 1. Programa y administra pginas web para la difusin y captacin de la informacin. 2. Elabora pginas web con animaciones interactivas de aplicacin general y especfica, en un ambiente multimedia.
CONTENIDOS: 2.1 Conocer la terminologa bsica del software para disear una pgina web. 2.2 Identificar el entorno del software para disear pginas web. 2.3 Disear una pgina web con el software de aplicacin.
63
ACTIVIDAD 1 Realiza la lectura de las competencias que se pretende que alcances al trmino del submdulo. Posteriormente en pareja con una compaera o compaero responde las preguntas y termina comentando tus respuestas a travs de una discusin guiada por el docente a la vez que atiendes las explicaciones y ejemplos del mismo. 1.- Puedo desarrollar las competencias con los contenidos del submdulo? Explica. _____________________________________________________________________________________ _____________________________________________________________________________________ _________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________ _________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________ _________________________________________________________________________________ 2.- Cul de las competencias es la que ms me puede servir? Por qu? _____________________________________________________________________________________ _____________________________________________________________________________________ _________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________ _________________________________________________________________________________ 3- Consideras que hay mercado de trabajo para las competencias que vas a desarrollar? _____________________________________________________________________________________ _____________________________________________________________________________________ _________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________ _________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________ _________________________________________________________________________________
64
Utilizar Software de Aplicacin para el Diseo de Pginas Web
ACTIVIDAD 2 Comenta en equipos de 3 a 5 personas los diferentes sitios de Internet que han visitado y respondan las siguientes preguntas, comentando en plenaria la pagina web que les gustara disear y comentando el por qu? de su eleccin. 1.- Que elementos has detectado que componen las pginas Web que normalmente has visitado? _____________________________________________________________________________________ _____________________________________________________________________________________ _________________________________________________________________________________ _________________________________________________________________________________ __________________________________________________________________________________ 2. Cmo puedes definir un sitio web? _____________________________________________________________________________________ _____________________________________________________________________________________ __________________________________________________________________________________ _________________________________________________________________________________ _________________________________________________________________________________ 3. Cules son los fines de la creacin de una pgina web empresarial o de servicios? _____________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________ ___________________________________________________________________________________ _________________________________________________________________________________ 4.- Qu elementos consideras debera tener la pgina web que disees? _____________________________________________________________________________________ _____________________________________________________________________________________ _________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________ _________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________ _________________________________________________________________________________
65
2.1 CONOCER LA TERMINOLOGA BSICA DEL SOFTWARE PARA DISEAR UNA PAGINA WEB.
ACTIVIDAD 3 Para iniciar a trabajar con Dreamweaver, es necesario que conozcas la terminologa que se utiliza en este programa, por lo tanto realiza la lectura Qu es Dreamweaver? y elabora un resumen. 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 diseo de pginas web ms avanzada, tal como se ha afirmado en muchos medios. Aunque sea un experto programador de HTML el usuario que lo maneje, siempre encontrar en este programa razones para utilizarlo, sobre todo en lo que a productividad se refiere. Cumple perfectamente el objetivo de disear pginas con aspecto profesional, y soporta gran cantidad de tecnologas, adems muy fciles de usar: Hojas de estilo y capas Javascript para crear efectos e interactividades Insercin de archivos multimedia... Adems es un programa que se puede actualizar con componentes, que fabrica tanto Macromedia como otras compaas, para realizar otras acciones ms avanzadas. Como editor WYSIWYG que es (What You See Is What You Get, Lo que ves es lo que obtienes, ya que permite escribir un documento viendo directamente el resultado final), Dreamweaver oculta el cdigo HTML de cara al usuario, haciendo posible que alguien que no entiende el lenguaje HTML pueda crear pginas y sitios web fcilmente. Conceptos Bsicos Pgina Web Cuando pensamos en una pgina web debemos pensar en una empresa que tiene una jerarqua bien establecida, un departamento de ventas, divisin de personal, contabilidad, diseo, etc. Cada una de estas estructuras cumple una funcin determinada e importante dentro de la empresa. Pues una pgina web es una seccin de una estructura ms grande que ofrece al navegante la posibilidad de informarse acerca de determinado producto, servicio o la empresa. Sitio Web En ingls website o web site, un sitio web es un sitio (localizacin) en la World Wide Web que contine documentos (pginas web) organizados gerrquicamente. Cada documento (pgina web) contiene texto y o grficos que aparecen como informacin digital en la pantalla de un ordenador. Un sitio puede contener una combinacin de grficos, texto, audio, vdeo, y otros materiales dinmicos o estticos.
66
Un sitio web es un gran espacio documental organizado que la mayora de las veces est tpicamente dedicado a algn tema particular o propsito especfico. Cualquier sitio web puede contener hiperenlaces a cualquier otro sitio web, de manera que la distincin entre sitios individuales, percibido por el usuario, puede ser a veces borrosa. No debemos confundir sitio web con pgina web; esta ltima es slo un archivo HTML, una unidad HTML, que forma parte de algn sitio web. Al ingresar una direccin web, como por ejemplo www.wikimedia.org, siempre se est haciendo referencia a un sitio web, el que tiene una pgina HTML inicial, que es generalmente la primera que se visualiza. La bsqueda en Internet se realiza asociando el DNS ingresado con la direccin IP del servidor que contiene el sitio web en el cual est la pgina HTML buscada. Los sitios web estn escritos en cdigo HTML (Hyper Text Markup Language), o dinmicamente convertidos a ste, y se acceden aplicando un software conveniente llamado navegador web, tambin conocido como un cliente HTTP. Los sitios web pueden ser visualizados o accedidos desde un amplio abanico de dispositivos con conexin a Internet, como computadoras personales, porttiles, PDAs, y telfonos mviles. Sitio Local Una vez definido el trabajo a realizar, todo lo guardas en una carpeta, la cual, si eres ordenado, pondrs el nombre del cliente y dentro de ella toda la informacin, paginas html, imgenes, 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, tambin llamada servidor HTTP, y estos trminos tambin pueden referirse al software que se ejecuta en esta computadora y que recupera y entrega las pginas de un sitio web en respuesta a peticiones del usuario. Apache es el programa ms comnmente usado como servidor web (segn las estadsticas de Netcraft) y el Internet Information Services (IIS) de Microsoft tambin se usa con mucha frecuencia. Sitio esttico Se le llama sitio esttico al sitio web que no interacta con una Base de Datos, es decir solo usa tecnologa HTML, CSS y JavaScript. Un sitio web esttico es uno que tiene contenido que no se espera que cambie frecuentemente y se mantiene manualmente por alguna persona o personas que usan algn tipo de programa editor. Hay dos amplias categoras de programas editores usados para este propsito que son

Editores de texto como Notepad, donde el HTML se manipula directamente en el programa editor o Editores WYSIWYG como por ejemplo Microsoft FrontPage y Adobe Dreamweaver, donde el sitio se edita usando una interfaz GUI y el HTML subyacente se genera automticamente con el programa editor.
Sitio dinmico Un sitio web dinmico es uno que puede tener cambios frecuentes en la informacin. Cuando el servidor web recibe una peticin para una determinada pgina de un sitio web, la pgina se genera automticamente por el software, como respuesta directa a la peticin de la pgina; Por lo tanto se puede dar as un amplio abanico de posibilidades, incluyendo por ejemplo: (a) Mostrar el estado actual
67
de un dilogo entre usuarios, (b) Monitorizar una situacin cambiante, o proporcionar informacin personalizada de alguna manera a los requisitos del usuario individual, etc. El sitio dinmico es aquel en el que la informacin que se le muestra al navegante proviene de una Base de Datos, generalmente en MySql y las pginas estn en formato PHP, ASP, JSP. Sitio Interactivo Es aquel sitio que su funcionalidad depende de acciones del usuario, es decir, si presiona un botn el sitio completo hace algo, lo ms comn es que estos sitios interactivos dependan de otra tecnologa para agregar interactividad, Adobe Flash. CSS Es un lenguaje de hojas de estilos creado para controlar el diseo de la estructura. CSS es la mejor forma de separar los contenidos y su diseo siendo necesario para crear pginas web complejas. Separar la estructura de los contenidos y la estructura del diseo presenta numerosas ventajas, ya que obliga a crear documentos HTML/XHTML bien definidos. Al crear una pgina web, se utiliza en primer lugar el lenguaje HTML/XHTML para marcar los contenidos, es decir, para designar la funcin de cada elemento dentro de la pgina: prrafo, titular, texto estacado, tabla, lista de elementos, etc. Una vez creados los contenidos, se utiliza el lenguaje CSS para definir el aspecto de cada elemento: color, tamao y tipo de letra del texto, separacin horizontal y vertical entre elementos, posicin de cada elemento dentro de la pgina, etc.
68
ACTIVIDAD 4
Despus de haber realizado la lectura, redacta tu resumen _____________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________ ________________________
69
2.2 IDENTIFICAR EL ENTORNO DEL SOFTWARE PARA DISEAR PGINAS WEB.

ACTIVIDAD 5 Antes de empezar a crear la pgina web es necesario que conozcas el entorno de trabajo del software Dreamweaver, por lo que es necesario que realices una bsqueda en Internet y definas lo siguiente: CSS: _____________________________________________________________________________________ _____________________________________________________________________________________ _________________________________________________________________________________ Maquetacin: _____________________________________________________________________________________ _____________________________________________________________________________________ _________________________________________________________________________________ Plantilla en Dreamweaver: _____________________________________________________________________________________ _________________________________________________________________________________ _________________________________________________________________________________ Contenedor en Dreamweaver: _____________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________ Etiqueta Div: _____________________________________________________________________________________ _____________________________________________________________________________________ _________________________________________________________________________________ Regin editable: _____________________________________________________________________________________ _____________________________________________________________________________________ _________________________________________________________________________________ Comportamientos en Dreamweaver: _____________________________________________________________________________________ _____________________________________________________________________________________ _________________________________________________________________________________
70
Tabla: _____________________________________________________________________________________ _____________________________________________________________________________________ _________________________________________________________________________________ Formulario: _____________________________________________________________________________________ _____________________________________________________________________________________ _________________________________________________________________________________ Formulario de Contacto: _____________________________________________________________________________________ _____________________________________________________________________________________ _________________________________________________________________________________ DREAMWEAVER CS5 Dreamweaver CS5 Es un diseador web que no requiere conocimientos previos de ningn lenguaje web. Como vers, trabajando desde la vista de diseador, podrs 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 ests trabajando, abrir un documento que quieras aadir, 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 mtodos de trabajo o la utilizacin de algunas herramientas especficas.
71
Barra insertar Puedes encontrar la barra insertar, que se muestra en la imagen de abajo. Una barra muy til, ya que la mayora de herramientas que utilizars, estn en ella o las puedes aadir, esto facilita el no tener que ir buscando las herramientas en las diferentes ventanas.
Esta barra puede ser personalizada, aunque con limitaciones. Se puede ver como men o como fichas que es, como se encuentra en la imagen de arriba. Como men, se ve que el aspecto ha cambiado, ya no estn las pestaas que indicaban las herramientas de otras secciones, como formularios, datos, spry, etc.
Pero si se da clic en el tringulo invertido que se encuentra al lado de comn, se podrn ver en forma de men, las pestaas que contena en el modo de fichas.
Barra de herramientas del documento
En esta barra se encuentra el botn Diseo seleccionado, est es la vista que normalmente estars utilizando, para personas que controlen el cdigo HTML, algn lenguaje de programacin o simplemente se quiere ver el cdigo, pueden verlo de dos maneras, una como vemos en la imagen superior, una es con el botn Dividir, pulsando ese botn, vers la pantalla dividida, viendo en una parte el diseo y en otra el cdigo. Y la otra, pulsando el botn Cdigo, en el que vers solamente el cdigo de la pgina y perders de vista el diseo.
72
En la misma barra encontrars el botn donde podrs agregar los diferentes navegadores en los que quieres ver la pgina, aunque normalmente ya nos reconoce los que tenemos instalados. Dando clic sobre realizando. o pulsando la tecla F12, vers en el navegador el resultado del trabajo que ests
, all escribirs el ttulo que Tambin puedes ver la caja de texto pondrs a tu pgina y al presionar la tecla F12, podrs ver que aparece en la pestaa del navegador o en la parte de arriba de la ventana del mismo. 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.
Tambin puedes apreciar que aparecen propiedades de la parte del documento, donde puedes aplicar etiquetas HTML que personalicen tu trabajo. El inspector de propiedades es una de las partes que se convertir en imprescindible en el proceso de un diseo web. Paneles y grupos de paneles
73
A la derecha de la pantalla, puedes apreciar que aparece un grupo de smbolos, eso son los paneles en los que puedes encontrar los documentos que vayas creando, los comportamientos que puedes aplicar, o has aplicado y los CSS creados.
Para visualizarlo mejor, puedes desplegarlo como vemos en la imagen de arriba, pulsando en las dos flechas situadas en la parte superior derecha del grupo de paneles. As podrs trabajar viendo todo lo que contienen los paneles, si te molesta para trabajar, mejor djalo plegado y da clic en el icono del panel que necesites en cada momento. Mltiples documentos
Conforme vayas trabajando, irs creando diferentes documentos, y en ocasiones, querrs tener varios de ellos abiertos, como se aprecia en la imagen de arriba, te aparecen fichas con los diferentes documentos abiertos o creados. Con tan solo dar clic en las diferentes pestaas, podrs navegar por ellos sin ningn problema. Estos son los elementos ms importantes de la interfaz de Dreamweaver, con los cuales te podrs ir familiarizando con el uso de este programa, para iniciar a crear tu pgina web.
74
ACTIVIDAD 6
A partir de este momento vas a empezar con el diseo de un sitio web de ejemplo para que vayas practicando el diseo de tu proyecto final, para eso es necesario que te organices en equipo de tres integrantes y realicen la lectura estructura del sitio web a la par que vas desarrollando las actividades referentes al diseo de tu pgina. Pregunta al profesor todas las dudas que te vayan surgiendo.
Estructura del sitio web Antes de empezar a crear un sitio web lo primero que tienes que plantearte es su organizacin. Una organizacin muy usual es separar en carpetas los archivos diferentes, es decir, crear una carpeta imgenes, otra para los estilos y en la carpeta raz dejaremos los archivos HTML. Cuando se habla de carpeta raz, se hace referencia a la carpeta principal donde se ir creando el sitio web.
Con esto conseguirs crear un orden en tu sitio, para que cuando quieras buscar un archivo sea fcil de localizar. Siempre que quieras cambiar la ubicacin de un archivo es recomendable hacerlo directamente en Dreamweaver por que tiene la posibilidad de actualizar todos los vnculos sin que le ocasione ningn problema. Si lo realizas en la carpeta raz, fuera de Dreamweaver, tendrs que actualizar los vnculos manualmente. De ah la importancia de manipular los archivos y las carpetas, solamente en la aplicacin. Otra cosa a tener en cuenta son los nombres de las pginas del sitio. La pgina principal deber llamarse index, siempre en minsculas, ya que los servidores web son sensibles a las maysculas, es decir, que diferencia maysculas de minsculas. El resto de pginas se aconseja que su nombre sea referente al contenido, NUNCA DEJAR ESPACIOS, si el nombre es compuesto, unirlos mediante un guin o un guin bajo. Tambin puede unir simplemente las palabras, creando un nombre simple.
75
Definir el sitio Cuando hablamos de definir un sitio nos referimos a agregar la carpeta raz como un proyecto de Dreamweaver, as como los archivos que contenga y as poderlos manipular de forma ms sencilla. Desde la pantalla inicial
En la pantalla inicial, te vas a encontrar en el apartado Crear nuevo Sitio de Dreamweaver, si das clic all, te aparecer el cuadro de dilogo de definicin del sitio, que vemos en la imagen siguiente.
Aqu pondrs 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 raz del sitio. Con esto terminars la definicin de tu sitio web.
76
Desde la ventana de Archivos
Debes ir a la ventana archivos situada en los paneles de la derecha de Dreamweaver, das clic en el men desplegable de los proyectos y haces clic en Administrar sitios. Se abre una ventana, presionas en Nuevo, para definir el nuevo sitio web y te volver a salir la ventana del principio.
Desde Sitio En la barra de herramientas vas a encontrar Sitio, presionas clic y se despliega el men de sitios, presionas en Nuevo sitio y te saldr la ventana de definicin del sitio.
77
Aadir Archivos y Carpetas Para aadir 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 opcin es hacer clic derecho en la carpeta raz o en la carpeta donde queramos crear el archivo, te aparecer un men y debers dar clic en Nuevo archivo y te crear un archivo, le asignas el nombre y la extensin 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 ratn encima de Archivo y das clic en Nuevo archivo. Para las carpetas, se hace lo mismo, pero seleccionando Nueva carpeta.
ACTIVIDAD 7 Despus de haber realizado la lectura, define la estructura del sitio web que vas a disear mas adelante, definiendo la carpeta donde se va a alojar el sitio, creando una carpeta con las imgenes que posiblemente vas a utilizar.
78
ACTIVIDAD 8
Realiza la lectura, Funciones bsicas a la vez que vas ejecutando las instrucciones en la computadora, para que vayas practicando con el uso de Dreamweaver.
Funciones Bsicas
Crear y guardar un documento Antes de empezar, debes tener una cosa en cuenta, cuando creas un documento, partiendo de una plantilla, el CSS puede integrarse en la cabecera del cdigo (<HEAD>) o puede crearse un documento aparte. Formas para crear un documento:

Desde la pantalla inicial. Desde men archivo.
Desde la pantalla inicial
Para crear un documento desde la ventana de bienvenida, das clic en Ms, se abrir la ventana que veremos en la imagen siguiente. En esta serie de tutorial, solo veremos documentos HTML y CSS, por lo que iremos a HTML. Observamos que hay plantillas con columnas de ancho fijo o flexible, Cul es la diferencia entre una y otra?, la diferencia es que la fija, no variar el ancho de las columnas, segn la resolucin de nuestro monitor, y el flexible, si variar, pero podemos poner un ancho mnimo y mximo para que solo sea flexible entre esos rangos. Sabiendo esto, tan solo tenemos que tener muy clara la estructura de nuestro sitio web, y elegir la opcin que ms nos interese. El diseo CSS, es modificable, por lo que los colores y los anchos, podremos modificarlos a nuestro antojo.
79
Otro tipo de plantilla que podemos encontrar, lo vemos en la pestaa Pgina de muestra, encontramos otro tipo de estructura diferente. Importante, seleccionar Hojas de estilo CSS, no Conjunto de marcos ya que los marcos estn obsoletos, es un tipo de diseo que no se utiliza y el hecho de utilizarlo, os podra perjudicar en la indexacin de nuestro sitio en los buscadores.
80
Desde el men archivo
Pulsamos Archivo en el men, despus Nuevo y llegamos a la ventana de seleccin de la plantilla. Ttulos de pgina
Como puedes observar en la imagen superior, los ttulos de las pginas son aquellos que aparecen en las pestaas del navegador y en la parte superior del mismo. Esto personaliza tu pgina y el poner un ttulo diferente a cada pgina de tu sitio, se convierte en importante, ya que es una manera fcil de diferenciar cada una de ellas. Conviene que el ttulo sea descriptivo al contenido de la pgina ya que si es descriptivo y fcil de recordar, es muy probable que los visitantes del sitio no lo olviden con mucha facilidad.
81
Para poner el ttulo, vers que en la barra del diseador, aparece una caja de texto que en su parte izquierda pone Ttulo:, como puedes observar en la imagen anterior. All pones el ttulo de la pgina, presionas Enter, guardas y presionas F12, y vers el resultado en nuestro navegador. Insertar imgenes
Para insertar imgenes, te mostraremos dos formas muy sencillas de hacerlo. La primera, desde la ventana de archivos, abres la carpeta de imgenes y arrastras la imagen. En la imagen inferior, puedes ver la imagen que arrastraste.
82
La otra forma de insertar imgenes es desde el men insertar, puedes ver en la imagen inferior el botn para insertar imgenes, despus de dar clic sobre el mismo, se abrir una ventana para seleccionar la imagen y la copias.
Tienes que tratar de tener siempre las imgenes en la carpeta de tu sitio, ya que si cuando lo ests creando tomas una imagen de otra carpeta de tu computadora y no la guardas dentro de la carpeta raz, las imgenes no se vern cuando subas el sitio al servidor web. Creacin de enlaces La creacin de enlaces es muy sencilla, lo primero que tienes que hacer es seleccionar el texto que quieres que contenga el enlace. Despus en la ventana Propiedades, en el apartado HTML, en Vnculo aades de forma manual el nombre y extensin del archivo a enlazar, en caso de ser otro sitio web, solo tienes que poner la URL del sitio. Si observas el texto que seleccionaste, vers que ha cambiado de color y se ha subrayado, eso te indica que es un texto enlazado.
83
Otra forma de hacer el enlace, si observas en la parte derecha de la caja de texto del vnculo en , haces clic sobre l y arrastras hasta la ventana Archivo, donde propiedades, vers este icono soltars encima del archivo que quieras enlazar. Y si observas el texto, habr cambiado de la misma forma, es decir, se pondr el subrayado indicando un vnculo.
Otra forma de hacer el enlace, es en la parte derecha del cuadro de dilogo vnculo, aparece una carpeta, haces clic y se abre una ventana como la imagen superior. Eliges el archivo y aceptas.
84
ACTIVIDAD 9 Realiza en el siguiente recuadro en equipo de tres integrantes, el bosquejo de cmo quedara el diseo de tu pgina web, indicando donde ira el ttulo, las imgenes, la informacin de la pgina, los enlaces a otras pginas de Internet o los vnculos de la misma pgina Web.
85
1.1 DISEAR UNA PGINA WEB CON EL SOFTWARE DE APLICACIN.
ACTIVIDAD INTEGRADORA PARTE 1 A partir de este momento vas a empezar con la estructura de tu pgina web para eso es necesario que te organices en equipo de tres integrantes para que realices la lectura diseo de una pgina web a la par que vas desarrollando las actividades referentes al diseo de tu pgina como son: Elegir los posibles ramos empresariales de la pgina web que vayas a crear. Elegir la empresa o negocio del que vayas a realizar la pgina. Seleccin de la informacin que vas a publicar en tu pgina Web. Planificacin de la pgina Aunque anteriormente ya habas pensado en la estructura de tu pgina web, ahora con la informacin ya clara aqu definirs el diseo de tu pgina
Pregunta al profesor todas las dudas que te vayan surgiendo.
Diseo de una Pgina Web Lo primero que debes hacer cuando vas a disear una pgina web es crear tu sitio, una vez creado el sitio, empezars a crear cada una de las pginas web que integrarn tu proyecto
86
Crears una pgina de HTML, ya que en este caso las pginas sern estticas. Adems, puedes usar uno de los diseos predefinidos de Dreamweaver, para ms facilidad. Enseguida de elegir el diseo (para efectos de ir realizando el ejemplo, debes seleccionar el diseo dos columnas fijas, barra lateral izquierda, como se muestra en la imagen de abajo), debes indicar a Dreamweaver que el diseo de la pgina debe de hacerse en una hoja independiente.
87
Debers dar clic en crear y finalmente se da un nombre a la nueva hoja. Y se debe guardar la pgina, dando clic en archivo y guardar.
ACTIVIDAD 10 A partir de este momento vas a iniciar con el diseo de la pgina web que te presentamos como ejemplo, realiza las actividades que se te vayan indicando y si surgen dudas consulta con tu profesor.
88
Ahora vas a modificar, el diseo de tu pgina, para dejarla de acuerdo a como quieres. Para hacer eso, te irs al Panel Estilos.
Estas son todas las reglas de estilo que hay en la hoja. Vas a cambiar las reglas del body, que normalmente es donde se definen los aspectos generales del texto. Debes hacer doble clic en body para editarlo.
89
A continuacion se presenta el editor de propiedades de CSS, desde aqu puedes cambiar cualquier propiedad.
Por ejemplo, aqu cambiars el tipo de fuente y propiedades, adems de las de las propiedades del fondo.
Adems, debers justificar el texto
90
Ahora ajustars el ancho de pgina. Todos los elementos estn dentro del div con la clase container, por lo que ser ah donde establezcas el ancho de pgina. Tienes que editar la regla, dando doble clic sobre container.
El ancho lo encontrars en las Propiedades de cuadro, lo debes cambiar al tamao 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
91
Adems, puedes crear un borde alrededor
Enseguida puedes observar cmo va quedando en el navegador
Vers que como el ancho es menor que la ventana, se ve el borde a los lados y la columna de la derecha se ha ido hacia abajo, esto se debi a que las columnas tienen un ancho fijo y al reducir el ancho general ya no caben en horizontal, por lo tanto tienes que ajustar su ancho de nuevo para que la columna de la derecha se muestre de nuevo junta, como estaba anteriormente.
92
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 ancho modificado.
Tambin debes cambiar el ancho de la otra columna, esto lo encontrars 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 pgina puedes distinguir tres elementos principales de diseo: el encabezado (.header), la columna izquierda con el men (.sidebar1) y una columna principal a la derecha con el contenido de la pgina.
ACTIVIDAD 11 Realiza en equipos de tres integrantes las modificaciones al diseo de tu pgina que entregars como proyecto final, siguiendo los pasos que se te presentaron en el ejemplo.
93
ACTIVIDAD 12 Realiza en equipos de tres integrantes, los pasos que se te indican en la lectura que a continuacin se presenta, a la vez que vas personalizando el diseo de tu pgina que entregars como proyecto final, si se te presentan dudas consulta con tu profesor.
Personalizacin de la Pgina Ahora debers personalizar cada uno de los elementos de tu pgina. Empieza por borrar el logo, solamente selecciona el enlace que contiene a la imagen y presionas la tecla Suprimir.
Lo que si 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 pgina.
94
Ahora, debes continuar editando el estilo del encabezado, en este caso le quitars el color de fondo y le dars un margen inferior
95
Enseguida debers crear una nueva regla CSS para el h1 que est dentro del encabezado (header h1). Para eso, dars clic en el botn Nueva regla CSS
Enseguida seleccionas o das clic en menos especfico y seleccionas aceptar
96
Empieza a modificar
Enseguida tambin se incluir una imagen en el ttulo, pero en vez de ponerla directamente, se incluir como fondo de encabezado. Para eso te irs a fondo, seleccionars Examinar
97
Cuando hayas asignado los cambios das clic en Aplicar. Te dars cuenta que la imagen qued como fondo, pero en el ejemplo queremos que quede arriba, por lo que habr que ajustar la posicin manipulando el Padding Continuando con el diseo de la pgina, se modificar la columna de la izquierda, de hecho solo se dejar el men y se eliminar la columna de la izquierda que no se va a utilizar. Para eso se selecciona el texto de la columna de la izquierda y se elimina.
98
A continuacin, se deben cambiar los ttulos del men de acuerdo al proyecto que ests presentando, adems se deben cambiar los vnculos que abrir cada ttulo, es decir los nombres de las pginas que se abrirn al dar clic en un enlace.
Quedando como se muestra a continuacin:
99
Enseguida se debe modificar, el borde del men de la izquierda, para que no sobresalga el cuadro. La regla que afecta a los enlaces del men es ul.nav a
En la imagen anterior puedes ver que el ancho era mayor que la columna, por lo que habr que quitar el ancho. Adems, para que el texto no quede pegado se usa el padding, en el caso del ejemplo se usar un alto fijo
100
Se utilizar una imagen de fondo para dar el efecto de cambio de color en los botones
Adems los elementos de lista estn dentro de una lista, que tambin tienen sus estilos definidos.
101
Aqu debers ajustar Margin y Padding a tus necesidades
Adems le quitaremos el color de fondo del sidebar1
Para que el usuario de la pgina perciba que un elemento de men se puede presionar, se puede cambiar su estilo cuando el cursor est encima de l.
102
Esto lo debers hacer con la pseudoclase: hover. Aunque ya se tiene una regla para ello, la editars para hacer modificaciones.
Adems 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 tringulo invertido de Regla de destino.
Posteriormente se selecciona la opcin <Nueva regla CSS>
103
Se da clic en Editar regla. Posteriormente, se selecciona el botn Menos especifico y se introduce el nombre del selector, que en el caso del ejemplo es .nav li:hover
Solamente se cambiar el color del fondo y del borde.
104
Despus de estas modificaciones que hiciste, revisa como queda tu pgina Web, y el resultado ser algo como la siguiente pantalla:
A continuacin, trabajars con la columna del contenido principal de la pgina
105
La clase .content es la que define el estilo de esta columna. Lo primero que hars es usar una imagen para crear un pequeo degradado en la parte superior. Esto lo realizars usando una imagen de fondo
Posteriormente editars los encabezados, para lo cual crears una <Nueva regla CSS>
106
Seleccionas Editar regla y en Tipo de selector eliges Etiqueta (redefine un elemento HTML)
Una vez hecho esto, seleccionars el color para la fuente y el margin
107
Para finalizar con los elementos de maquetacin, se modifica el pie
Hasta este momento, tu pgina quedar como se muestra a continuacin:
108
En el ejemplo que te estamos presentando, toda esta estructura se repetir en cada pgina que crees por lo se proceder a crear una plantilla a partir de esta pgina.
ACTIVIDAD 13 Hasta aqu ya obtuviste cierta experiencia en el diseo de pginas web, continua siguiendo las instrucciones que se te presentan, a la vez que sigues diseando la pgina web de tu proyecto final. Recuerda consultar las dudas que tengas con el docente o tus compaeros.
Ahora proceders a crear una plantilla, que ser la que utilizars con todas las pginas. Para eso te irs a Archivo y seleccionars la opcin Guardar como Plantilla
109
Finalmente das clic en Guardar y aparece el siguiente mensaje
Das clic en s y tu plantilla ha sido guardada. Lo que sigue ser crear regiones editables en las zonas donde se podr cambiar la plantilla. Crears una regin editable para el Ttulo, por lo que seleccionars el ttulo, posteriormente das clic en Insertar, Objeto de plantilla, Regin editable.
110
No necesariamente se tiene que asignar un nombre para la regin editable, pero te sugiero que pongas un nombre representativo para la regin. Finalmente seleccionas Aceptar De la misma manera que creaste la regin editable para el ttulo, debes crear una regin editable para el contenido, que ser tambin lo que cambie en cada una de tus pginas. Despus de que hayas creado ambas regiones editables, vuelves a guardar la plantilla, para que se guarden que se hicieron al crear las regiones editables. Ahora, ya puedes crear pginas basadas en esta plantilla.
111
ACTIVIDAD INTEGRADORA PARTE 2 A partir de este momento continuars diseando las pginas adicionales a las cuales realizars los vnculos desde tu pgina principal. Para eso hars uso de la plantilla que generaste y solo irs cambiando los datos de acuerdo a la informacin que vayas requiriendo. Recuerda que puedes ir trabajando con tu sitio web que presentars como proyecto final. Para iniciar una nueva pgina web a partir de una plantilla, damos clic en Archivo, Nuevo, Seleccionamos Pgina de plantilla y finalmente damos clic en la Plantilla que creamos y finalmente damos clic en Crear.
Posteriormente, debes guardar tu pgina para asignarle el nombre que le corresponde.
112
Para completar tu pgina, cambia el ttulo y las regiones editables (Ttulo y Contenido). Continuando con el ejemplo, quedara de la siguiente manera:
De la misma manera debers crear las siguientes pginas. Por ejemplo la pgina que muestra la informacin de Quienes Somos. Quedando de la siguiente manera:
113
ACTIVIDAD 14 Las pginas Web que diseaste anteriormente fueron muy sencillas, solo fue cuestin de copiar y pegar texto y modificar las regiones editables. A partir de este momento empezars a utilizar tablas y formularios de contacto, por lo que te pedimos que realices la pgina que se te presenta como ejemplo y practiques en la edicin de estilos, hasta que adquieras la experiencia y desarrolles la competencia para crear tablas y formularios de contacto Continuando con el diseo de la pgina Web, cabe el turno del diseo de la que lleva los precios, en la cual utilizars una tabla para presentar los precios. Antes que nada, recuerda que debes crear una nueva pgina web a partir de la plantilla de diseo que ye has grabado, y asgnale el nombre que vas a utilizar de acuerdo a la pagina base (donde asignaste los vnculos). Una vez aclarado lo anterior, comienza a trabajar con tu tabla. El proceso para insertar una tabla es muy sencillo, solo basta con dar clic en el men Insertar y seleccionar Tabla. Posteriormente solo debes de seleccionar el nmero de columnas y de filas y el ancho de la tabla. Finalmente se da clic en Aceptar.
114
Lo que sigue ahora es rellenar la tabla y posteriormente editarla.
Adems, 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 botn que aparece indicado en la imagen de abajo.
115
. A continuacin, para darle un mejor aspecto, crears una clase para definir los estilos de la tabla. Para eso se seleccionar <table>, Estilos CSS y finalmente das clic en el botn 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.
116
Se edita el tipo de fuente, el fondo, la alineacin del texto (en bloque), el cuadro, el estilo de borde.
Dejando un aspecto parecido al de la siguiente tabla:
117
Insertar un Formulario de Contacto En esta misma pgina, se aadir un Formulario de Contacto y lo primero que debers hacer ser insertar un elemento de formulario.
En un formulario debes indicar una Accin. La pgina que se encargar de recibir y tratar la informacin introducida por el usuario.
Una vez que ya definiste el elemento de formulario, para organizar los campos del formulario debers utilizar una tabla. Una vez insertada la tabla introducimos los controles necesarios:
Para Insertar los controles, debes ir a Insertar, Formulario y seleccionas el control correspondiente: por ejemplo para el Nombre, E-mail y Fecha de Reporte seleccionas: campo de texto; para Tipo de equipo seleccionas: Botn de opcin; para Problema seleccionas: rea de texto; para Respaldo de informacin seleccionas: Casilla de verificacin. Finalmente para el Botn de Enviar seleccionas: Botn.
118
Finalmente debers cambiar los estilos de borde, fondo, marco, fuente, etc. para modificar el formato del formulario. Hasta este momento ya has visto como hacer cada una estas modificaciones, por lo que debers seguir los pasos correspondientes para editar el formulario. Tienes que dejar un aspecto parecido al que se muestra en la imagen de abajo.
Recuerda que para el formulario de contacto definiste una Accin, por lo que para que funcione esta accin debers crear una pgina la cual ser la que recoger la informacin del usuario. Esa pgina debe tener la terminacin php. Hasta aqu tu pgina web queda como se muestra en las siguientes imgenes.
119
120
ACTIVIDAD 15 Como te habrs dado cuenta hasta este momento el diseo de pginas web es mucho de prueba y error, es decir, de estar cambiando estilos, modificando formatos, colores, bordes, tamaos, etc. Realiza el diseo de la pgina web que se te presenta en esta gua como ejemplo (que es la ltima para terminar el sitio web), y a la par ve practicando con el diseo del sitio web que entregars finalmente como proyecto integrador.
Por ltimo, ya para terminar tu sitio web, debers crear la pgina para mostrar la galera de imgenes. Para eso debes utilizar la misma plantilla que has estado utilizando y modificar solo las regiones editables de ttulo y contenidos. As quedara tu pgina antes insertar las imgenes
Ahora insertars una imagen antes de cada encabezado. Para eso solo te colocas antes del encabezado de cada equipo de cmputo, vas al men Insertar, seleccionas imagen, seleccionas la imagen que vas a colocar de tu carpeta de imgenes, donde previamente las habas guardado y das clic en Aceptar.
121
La intencin de esta pgina web, es que al pasar el cursor sobre el texto de la imagen, se cambie y muestre la imagen de la computadora correspondiente, es decir, debemos asignarle comportamientos a la imagen. Para poder identificar la imagen para asignarle comportamientos, se le debe asignar un ID y crear los estilos necesarios para que se muestre como quieres.
Para aplicarle los estilos necesarios de manera que se muestre como quieres, debers crear una nueva regla para esta foto. Primero debes irte a Estilos, despus seleccionas el botn Nueva reglas CSS y en nombre de selector, seleccionas el nombre de el ID que asignaste a la imagen, en Definicin de regla seleccionas (Solo este documento). Finalmente das clic en Aceptar.
122
El siguiente paso ser algo que hasta este momento has realizado en el diseo de todas las pginas, el modificar los estilos (fondo, borde, cuadro, bloque) para dar la apariencia que deseas.
123
Hasta aqu tu pgina 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 prrafo de otra computadora. Para poder hacer eso, utilizars los Comportamientos. Para poder hacer uso de los comportamientos, lo primero que se debe hacer es elegir que elemento (encabezado o prrafo) ejecutar el comportamiento. Para evitar problemas y como tienes encabezado y prrafo 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 cuestin se cambie la imagen. Para agrupar en un div, el procedimiento es sencillo: 1.- Seleccionas los dos elementos (encabezado y prrafo)
2.- Das clic en Insertar, seleccionas Objeto de diseo y finalmente das clic en Etiqueta Div
3.- Para finalizar la Etiqueta Div, das clic en Aceptar.
Ahora, lo que tienes que hacer es abrir el panel Comportamientos, que se encuentra en el men de ventana
124
Enseguida, das clic en el icono que aparece en forma de + y eliges un comportamiento. En el listado de comportamientos disponibles, vas a encontrar el que necesitas para tu pgina web, que es el de Intercambiar imagen.
Despus 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.
125
Se debe hacer el mismo procedimiento con cada prrafo y cada imagen para que cambie el comportamiento. Finalmente, la pgina quedar as
. Al pasar el cursor por otro prrafo automticamente cambia la imagen
126
Con esto, habrs finalizado tu sitio web, con las diferentes paginas de enlace, con tablas, formularios de contacto, comportamientos, estilos y muchas cosas ms que pudiste practicar. A partir de este momento ya te corresponde a ti seguir explorando el Dreamweaver para seguir aprendiendo ms acerca del diseo de pginas web, y adems, porque tendrs que disear tu propio proyecto de Sitio Web utilizando varias pginas y las diferentes opciones como mnimo que hasta el momento practicaste.
127
En trabajo colaborativo como proyecto final debers presentar un Sitio Web diseado en Dreamweaver, sobre un negocio, empresa o institucin de servicios. Sitio que deber contener lo siguiente: 1.- 4 pginas web que se enlacen desde una pgina principal. 2.- Una plantilla de diseo, que crears y que te servir de base para tus diferentes pginas web. 3.- En las diferentes pginas que crears debes manejar en algunas o todas segn sea tu eleccin: Imgenes, tablas, formularios de contacto, comportamientos en las imgenes. 4.- Todas las pginas deben contener encabezados, imgenes, ttulo, texto, columnas. 5.- En todas las pginas debes aplicar estilos, es decir, que tengan buena apariencia, en cuanto a tipos de letra, colores de fondo, bordes, marcos, imgenes, la distribucin de las columnas. Es decir, las pginas deben ser agradables a la vista y presentar calidad en su diseo 6.- En alguna de las pginas, deben aparecer los datos de los diseadores, con informacin de contacto, por si es necesario establecer comunicacin con ellos. 7.- Solo los mejores diseos de pgina se publicarn en Internet.
128
I. INFORMACIN GENERAL PARA EL PROCESO DE EVALUACIN

NOMBRE DEL EVALUADOR: NOMBRE DEL CANDIDATO: IECL Cdigo Ttulo Perfil de la NTCL que se evala Unidad: FECHA DE APLICACIN:
Utilizar software de aplicacin para el diseo de pginas web Publicar pginas web.
Cdigo
Ttulo Elementos:
Nivel
Referencia
Cdigo
Intento de evaluacin 2
129
2.1 CONOCER LA TERMINOLOGA BSICA DEL SOFTWARE PARA DISEAR UNA PGINA WEB. 2.2 IDENTIFICAR EL ENTORNO DEL SOFTWARE PARA DISEAR PGINAS WEB. 2.3 DISEAR UNA PGINA WEB CON EL SOFTWARE DE APLICACIN. CONTENIDO Trabaja colaborativamente. Entrego en tiempo y forma. Eligio un tema para desarrollar su pgina web. Realiza el diseo de la pgina Web. Define la estructura de la pagina web Define las imgenes y sus ubicaciones. Define los enlaces a otras pginas web y con sus propias pginas Existe un enlace o pgina que describa el propsito del Sitio Web y suministre informacin de quien la public y/o respalda. Es posible establecer contacto con los desarrolladores mediante un correo electrnico. El autor(es) est claramente identificado en la pgina. Las imgenes presentan un tamao adecuado, estn identificadas y referenciadas. Los encabezados, prrafos, listas, etc., presentan los mismos estilos. Accesibilidad. Los enlaces estn vigentes/activos. Esttica. El diseo y combinacin de colores son adecuados. Compatibilidad. El sitio web se ve y funciona bien independientemente del navegador que se utilice. Si la informacin publicada proviene de otras fuentes, se citan correctamente. Los colores que maneja son claros y permiten leer la informacin que muestra la pgina. Muestra informacin del autor de la pgina web. S NO N/A
130
Submdulo
PROPSITO: Al trmino del submdulo, sers competente para publicar una pgina web en internet.
El presente submdulo tiene como objetivo prepararte para que aprendas a publicar una pgina web. Por lo que, la pgina que elaboraste en el bloque dos la vas a publicar en un sitio en internet.
COMPETENCIAS: Programa y administra pginas web para la difusin y captacin de la informacin.
CONTENIDOS: 3.1 3.2 Conoces las opciones para publicar una pgina web. Publicas pginas web
131
Publicar pginas web y establecer comunicacin va internet
ACTIVIDAD 1
En binas realiza la lectura de las competencias que se pretende alcanzars al trmino del submdulo. Posteriormente responde las preguntas y termina comentando tus respuestas a travs de una discusin guiada por el docente a la vez que atiendes las explicaciones y ejemplos del mismo.
1.- Que competencias voy a desarrollar? ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ 2.- Para qu me van a servir? ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ 3- En qu momento las puedo aplicar? ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________
132
3.1 CONOCER LAS OPCIONES PARA PUBLICAR UNA PGINA WEB.
Qu es publicar una pgina web y cmo hacerlo? Despus de hacer nuestra pgina (incluyendo textos, imgenes, videos y otros archivos) solamente la vemos nosotros ya que esta almacenada en nuestra maquina. Para que todo el mundo pueda verla la tenemos que publicar (subir) a un servidor. (Que no es ms que una computadora central que siempre est conectada). El servidor, hosting es el lugar en donde subiremos nuestra pgina que es medido en megabites, normalmente todos los proveedores de acceso a Internet ofrecen hosting, el proveedor es a quien pagamos por conectarnos a internet. Existen infinidad de proveedores de hosting gratuitos, que con solo llenar un formulario desde su web podemos conseguir de manera rpida y gratuitamente espacio para nuestra web. Cuando solicitamos los servicios de una conexin 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 sin fn de promociones, pero tambin un ESPACIO WEB, o cuenta FTP
ACTIVIDAD 2 Antes de empezar a publicar la pgina web es necesario que conozcas los trminos bsicos que estars utilizando en el transcurso de este bloque, por lo que es necesario que realices una bsqueda en Internet y definas lo siguiente:
Alojamiento web:
____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ Alojamiento Compartido: ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ Alojamiento Gratuito: ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________
133
Alojamiento Revendedor: ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ Contrasea: ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ Dominio: ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ Pgina web: ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ Pgina Web Esttica: ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ Pgina Web Dinmica: ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ Pgina Web Interactiva: ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ Pgina Web Animadas: ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ Proveedor: ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________
134
Servidor: ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ Servidor Dedicado ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ Servidor Virtual: ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ Sitio: ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ Transferencia de pginas web: ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________
Antes de publicar t Pagina Web Checa tu pgina en ms de un Navegador (al menos en el Explorer y en Netscape). Lo que en un navegador queda bien en otro puede causar estragos. Antes de publicar tu pgina, prueba tu pgina en tu computadora y en un Mac, el resultado puede ser muy diferente. Si tu sitio no est terminado, no lo publiques. Ahrrate gifts o frases como "en construccin". Todos los buenos sitios estn en construccin detrs del escenario. Verifica la ortografa antes de publicar o renovar tu pgina. Deja que tus visitantes hagan el trabajo duro: incluye una direccin en la que tus visitantes puedan dar su opinin o aportar informacin. Una pgina sin e-mail de contacto demuestra demasiada frialdad, e Internet es til precisamente para lograr la personalizacin. Antes y despus de publicar tu pgina, checa todos tus enlaces. Ensea la pgina antes de publicarla a amigos y conocidos, sus opiniones te podrn ayudar a evitar errores que t no has advertido y a mejorar el aspecto de tu sitio.
135
Qu es un servidor de Hosting? Para que una pgina web pueda ser vista en Internet por cualquier persona conectada a la Red, esta pgina debe estar alojada en un servidor de Hosting. Estos servidores son simplemente mquinas similares a un PC, con su memoria y su procesador que estn 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 (tambin llamado hospedaje web) es alquilar una parte de ese disco duro para copiar all nuestras pginas 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 estadsticas de las visitas que recibimos. Los puntos fundamentales a la hora de valorar un servicio de hosting seran:
Tiempo de conectividad o uptime: se mide en %
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 estar un tiempo desconectado, o por motivos de mantenimiento. Un uptime del 98-99% real sera ya una buena opcin.
Espacio en disco duro del servidor:
Es el espacio medido en Mb que alquilamos para subir nuestras pginas y resto de archivos. Si slo vas a alojar unas cuantas pginas no necesitars mucho espacio (con 25 MB sera suficiente).Sin embargo si vas a permitir la descarga de archivos ms o menos grandes desde tu pgina tendrs que contar con el tamao de estos archivos.
Transferencia mensual:
Es la cantidad de Mb que se descargan desde el servidor al mes. Nuevamente, si slo vas a mostrar pginas y no tienes un trfico enorme, con 200 Mb te sera suficiente. Si tienes mucho trfico o permites descargas de archivos grandes desde tu sitio tal vez necesites entre 500Mb y 2 Gb
Bases de datos SQL, autoresponders, estadsticas, directorio cgi-bin para instalar
tus propios scripts. Son tambin elementos que te sern necesarios antes o despus. Procura que estas aplicaciones estn disponibles desde el panel de control del hosting, y asegrate 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 html de tu pgina, puedes crear la estructura de directorios. Se recomienda que crees un directorio por cada seccin que tenga tu espacio Web, siempre que esta conste de varios archivos html o de imgenes. De esta forma ser ms compacto el acceso a la informacin, ya que la URL puede usarse para identificar la seccin y la gestin al poder aadir y borrar de forma sencilla secciones. Si creas todos los archivos en el directorio principal, te ser ms complejo identificar los archivos obsoletos y a que seccin corresponde cada archivo.
136
Se recomienda la creacin de un directorio de imgenes, uno de iconos y otro de fondos, aunque si no son muchos se pueden incluir todos en el directorio de imgenes. Estos elementos podrn referenciarse fcilmente y de manera uniforme en todos los documentos de tu espacio Web . La estructura bsica de su espacio web podra ser:
En el directorio de imgenes se incluirn todas las imgenes de mbito general, por ejemplo logotipo, iconos de uso frecuente y las imgenes usadas por documentos del directorio principal. En el directorio de la pagina dos, o en su directorio de imgenes, se podrn incluir las imgenes que sean exclusivas de esa seccin. De esta forma se conseguir una mayor ordenacin de tu espacio web y las referencias a las imgenes podran ser ms consistentes desde cualquier directorio de tu espacio web.
137
ACTIVIDAD 3 Basndote en la Estructura de directorios que se te presenta como ejemplo, disea la estructura del directorio de tu pgina WEB
138
Alojamientos y Dominios En la creacin de pginas web, el objetivo final es llegar a publicar la pgina en un servidor para que pueda ser accedida por los usuarios en cualquier parte del mundo. Para esto tenemos dos opciones: El alojamiento pagado es ms apropiado para sitios empresariales ya que poseen su nombre de dominio aparte de otros servicios como servidor de correos, bases de datos, foros, chat, estadsticas, etc). El alojamiento gratuito es ms apropiado para pginas personales. Varios portales en Internet proporcionan alojamiento gratuito con ciertas restricciones. Se le llama Nombre de Dominio (DNS) al nombre con que identificamos a nuestro servidor en el 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 direccin IP, basta con tener una pgina puesta en cualquier servidor (gratuito o pagado) para poder comprar nuestro Nombre de Dominio (DNS). Y esto se debe a que en la actualidad las compaas que venden nombres de dominio tienen un servicio gratuito que se denomina redireccionamiento lo cual significa que si tenemos nuestra pgina en GEOCITIES, en una direccin bastante larga como http://www.geocities.com/Area51/cavern/1706 podemos hacer que nuestro Nombre de Dominio apunte hacia esa direccin por medio del redireccionamiento y podra llamarse por ejemplo: PRACTICA.ORG. Lo ideal de los Nombres de Dominio es que sean nombres pequeos ya que ellos se graban ms fcimente, por ejemplo un nombre corto como GOOGLE.COM a todo mundo se le queda grabado pero un nombre como BUSCADORDEPAGINASWEBGOOGLE.COM sera muy difcil 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 Sub Dominio; la forma como esto funciona es que uno aplica para tener un nombre como por ejemplo PRACTICA.COM.TK entonces el dueo de ese Dominio .TK lo que hace es crear un redireccionamiento dentro de su servidor para que apunte hacia nuestra direccin 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 ao. Hospedaje Gratis. Hay compaas que ofrecen hospedaje gratis. A cambio de que en tu pgina aparezcan anuncios de esa compaa y de algunas otras. El hospedaje gratuito es una buena idea, si tu pgina es personal, por ejemplo, una pgina dedicada a tus pasatiempo, amigos, a tu mascota, a tus viajes, etc.
139
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 difcilmente tendremos problemas de backups, servers cados, etc. Desventajas: Poca identidad: Los dominios que utilizan estos sistemas que realmente son subdominios del dominio principal muchas veces dan una sensacin aparente de poca seriedad. Falta de Flexibilidad: No poder hacer modificaciones de nuestra plantilla al 100%, la imposibilidad de instalar plugins y cosas de ese estilo en un principio pueden no molestar pero en cuento 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: Si empezamos nuestro blog en blogger y luego queremos pasarnos a otro sitio es bastante engorroso. Actualmente no todos los servicios nos permiten hacer una redireccin por lo tanto tambin estaremos perdiendo todo el posicionamiento y antigedad que logramos.
140
ACTIVIDAD 4 Es importante que conozcas los sitios que te proporcionan alojamiento web para que, llegado el momento puedas seleccionar el lugar en donde publicars tu pagina web. Para esto realiza una bsqueda electrnica sobre los sitios que te proporcionan dicho servicio y llena la siguiente tabla: Sitios que proporcionan alojamiento gratuito:
SITIO
Mi@rroba
DESCRIPCIN
URL
Es uno de los nuevos servidores de http://www.miarroba.co alojamiento gratuito. Permite hasta 25 megas, m adems de soportar bases de datos en Mysql, aplicaciones en PHP4 y otros servicios como contadores, libros de visitas, subdominios, estadsticas, etc.
141
Sitios que venden alojamiento:

SITIO DESCRIPCIN URL PRECIO
142
3.2 PUBLICAR PGINAS WEB Y ESTABLECER COMUNICACIN VA INTERNET
ACTIVIDAD INTEGRADORA PARTE 1
En equipo de trabajo, publica la pagina que elaboraste en el bloque dos, para eso tendrs que leer Publicar Pginas Web a la par que vas siguiendo los pasos que ah se indican para que publiques tu pgina en uno de los sitios de la tabla anterior. PUBLICAR PGINAS WEB Publicar con programas de FTP Para "subir" nuestras pginas y alojarlas en el servidor de hosting se usan lo que llamamos programas de FTP. Las iniciales de File Transport Protocol, (Protocolo de Transferencia de Archivos) que como indica, hace referencia a la transmisin de archivos a travs de Internet. Por lo tanto tenemos nuestras pginas y resto de archivos en nuestro PC o Mac y lo que necesitamos es copiar estos archivos en el servidor que hemos contratado. Algunos de los ms conocidos: FILEZILLA (gratis) Cute FTP WS_FTP_PRO AceFTP 3 Pro FTP commander PRO Todos ellos son muy similares en cuanto al funcionamiento. Vamos a usar la versin gratuita de FTP Commander. No es una demo ni tiene limitacin de tiempo. Es bastante completo y ms que suficiente para empezar. El propio Dreamweavwer tiene la posibilidad de hacer conexin con el host remoto y transferir los archivos. Sin embargo, puede ser necesario tener instalado en nuestro ordenador un programa de FTP (file transfer protocol). Uno de ellos, que funciona bien, es bastante intuitivo y se puede conseguir de forma gratuita es el WS_FTP.
143
Al abrir el programa nos encontraremos con una ventana similar a sta:
En la caja de texto Profile Name: Seleccionamos el vaco. En la caja de texto Host Name/Address: Ponemos el nombre del servidor. En la caja Host Type: Seleccionamos Automatic detect. En la caja Used ID: Ponemos el nombre de usuario. En la caja Password. Ponemos la contrasea. Las dems casillas las podemos dejar como estn. Le damos a Aceptar. Se nos abre una doble ventana similar a sta:
El lado izquierdo de la ventana representa el ordenador local (desde el que se est trabajando). El lado derecho es el espacio reservado para ese usuario en el servidor.
144
Comprobamos que en el lado del servidor hay una serie de carpetas (que no nos interesan para nada) pero no est la que es necesaria para alojar nuestra pgina. Es la carpeta public_html. Procedemos a crearla:
(del Pulsamos el botn lado derecho) (del ingls Make directory). Nos aparecer la siguiente ventana:
En la caja de texto escribimos el nombre de la carpeta: public_html y le damos a OK.
Volver a aparecer la doble ventana anterior. Esta vez con la carpeta que nos interesa:
A partir de este momento la transferencia ya se puede hacer directamente con Dreamweaver. De todas formas, ya que estamos aqu, vamos a acabar el proceso con este programa de FTP.
145
Hacemos doble clic sobre la carpeta public.html para que se abra:
Ahora tenemos que transferir nuestros archivos. Primero seleccionamos la parte de nuestro ordenador donde hemos guardado nuestra pgina: disco duro C en una carpeta que se llama mi_primer_sitio. Pulsamos el botn del lado izquierdo (del ings Change Directory)
Escribimos en la caja de texto la ruta de nuestra carpeta: C:\mi_sitio_web y le damos al OK
Se abrir la carpeta con su contenido en el lado izquierdo de la doble ventana.
146
Ahora slo seleccionar index.htm.
nos resta el archivo
y pulsar el botn .Nos aparecer este mensaje de alerta para que confirmemos que efectivamente queremos transferir esos archivos.
Le decimos que S.
El archivo se transferir. Cuando veamos el lado derecho con los contenidos, la transferencia habr acabado.
147
Ahora podemos salirnos del programa, meternos en internet y teclear nuestra direccin para comprobar que la pgina se visualiza correctamente.
Publicar con Adobe Dreamweaver Dreamweaver es uno de los programas ms populares para crear pginas web. Adems de esto, podemos subir, directamente, la pgina y sus archivos, sin necesidad de utilizar un cliente FTP. En el siguiente tutorial, vamos a ver como conectar con nuestro alojamiento para poder subir el sitio web de una forma fcil y cmoda. Vamos a suponer que la versin que tenemos instalada es Dreamweaver MX 2004, la versin ms reciente.
1. Si ya tenemos creado el sitio web (conjunto de carpetas y archivos que van a componer nuestra pgina web) hacemos lo siguiente:
Clic en el men Sitio
Clic en a Administrar Sitios.
148
2. Nos aparecer la siguiente ventana en donde damos: clic en Nuevo Clic en Sitio.
3. Aparecer la siguiente ventana, donde debe seleccionar: la pestaa Bsicas Darle un nombre a su Sitio Web Dae clic en Siguiente
149
4. En el siguiente paso, en el caso de estar desarrollando una web sencilla en html marcaremos la opcin No, no deseo utilizar una tecnologa de servidor Clic en Siguiente.
Si por el contrario vamos a utilizar alguna tecnologa como asp o jsp, seleccionas "Si, deseo utilizar una tecnologa de servidor" y muestra una ventana con un desplegable donde se le indican diversas tecnologas usadas en los servidores. En caso de haber usado, en el desarrollo de su web, alguna de estas opciones, deber seleccionarlo para garantizar el correcto funcionamiento de su web Despus das clic sobre "siguiente"
150
5.- Te recomendamos que seleccione la primera opcin Editar copias locales en mi equipo y luego cargarlas al servidor cuando estn listas. Seleccionas la carpeta en donde almacenan los archivos de tu pgina web. Clic en Siguiente
6. Paso siguiente, hay que configurar la conexin con su servidor. Para ello:
Seleccione el tipo de conexin como FTP. Escribes el nombre de su servidor ftp (ftp.nombredesudominio.com). Indica la carpeta donde se encuentran los archivos necesarios para la visualizacin de su pgina web. En su servidor se llama httpdocs. En conexin y contrasea FTP debers introducir los datos FTP que asignasteen el panel de control de tu alojamiento. Si no los has cambiado, son los mismos que utilizas para acceder al panel de control. Haz clic en Conexin de prueba para comprobar que la configuracin es correcta.
151
Si te aparece la siguiente ventana, la conexin es correcta
Si, por el contrario, te aparece sta o alguna similar:
Debe haber algn dato incorrecto o Revisa tus datos de acceso FTP en el panel de control del alojamiento y configuracin anteriormente realizada. Tu servidor todava no est activo. El nombre de tu dominio no est registrado o no est dado de alta en el sistema. Tendrs que verificar el IP de tu servidor.
152
7. Si conexin ha sido satisfactorio
Da clic en Siguiente
y te muestra la siguiente pantalla para configurar la simultaneidad de edicin de archivos. Esta opcin debes seleccionarla segn tus criterios, forma de trabajar, etc..
8. Por ltimo, en la ventana final te mostrar los detalles de toda la configuracin realizada. Haz clic en Completado.
153
Te aparecer, de nuevo, la pequea ventana desde donde iniciaste todo el proceso. Da clic en Listo.
NOTA: Es posible que, dependiendo de la configuracin de la interfaz de Dreamweaver, te aparezcan estos detalles, en otra parte de la pantalla.
9. Ahora fjate en la parte derecha de la ventana de Dreamweaver, y vers cmo ha aparecido una nueva barra de herramientas y la carpeta con los archivos que hemos definido como Sitio Web.
154
Pues bien, en esta barra de herramientas debemos hacer clic en el icono indicado para poder visualizar los archivos que tenemos, tanto en local como en el servidor, a modo de FTP (pantalla dividida en archivos locales y remotos).
10. De este modo, nos aparecer la pantalla dividida en dos partes:
Sitio web creado en nuestro equipo local (Archivos locales). Archivos remotos (no visibles todava, pues falta realizar la conexin).
Es muy probable que la parte donde debieran aparecer los archivos remotos, aparezca en blanco. Esto se debe a que falta realizar la conexin con el servidor para poder visualizar el contenido de httpdocs. En los siguientes puntos, explicamos cmo hacerlo.
155
11. En la barra de herramientas superior de la ventana donde nos encontramos, debemos hacer clic en el icono que simula una conexin en forma de enchufe. De todas formas, en la ventana que corresponde a los archivos remotos, se nos indica el icono a clicar.
12. De esta forma, si la configuracin realizada anteriormente ha sido correcta, deber aparecernos el contenido de la carpeta httpdocs que tenemos en nuestro servidor.
13. Por ltimo, para subir cualquier archivo local a nuestro servidor, simplemente, lo
seleccionaremos con el botn primario de nuestro ratn y lo arrastraremos, sin soltar dicho botn, hacia cualquier ubicacin en la ventana de los archivos remotos.
156
Despus de haber realizado la lectura, redacta tus comentarios sobre el proceso de publicacin.
______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ _____________________________________________________________________
157
Ciclo de vida de las pginas web Promocin de la pgina Es un paso imprescindible si deseamos dar a conocer el web que hemos construido para que sea muy visitado. Con el diseo y la publicacin del sitio web en el servidor no se termina el trabajo. Una de las tareas ms importantes para el xito de la web es promocionarla adecuadamente, de manera que su direccin figure en el mayor nmero de sitios. Las acciones que se pueden realizar para promocionar una pgina son muchas y variadas, como hacer que figure su direccin en nuestros correos electrnicos o intercambiar banners, pero la ms importante es aparecer listados en los buscadores y especialmente en Google. Estas tareas de promocin no son nada complicadas y cualquiera puede realizarlas sin ningn problema, pero conseguir que nuestra web se encuentre situada entre los primeros resultados de la bsqueda reviste ms dificultad. La clave para estar listado en buscadores es conseguir enlaces en otras pginas hacia tu sitio. Si bien en Google podrs dar de alta tu direccin, probablemente no conseguirs aparecer en el buscador hasta que otras personas enlacen con tu sitio en sus webs. Realmente Google ni necesita que registres tu pgina en el servidor, sino que automticamente cuando encuentre un enlace a tu web en otra pgina, lo seguir e indexar tu sitio. Cuando consigas una buena cantidad de enlaces, si adems tu sitio lo has construido de manera amistosa a buscadores, conseguirs aparecer en las bsquedas en una mejor posicin. Ejemplo para publicar t pagina en el buscador de Altavista:
1. Deberemos ingresar al buscador en donde queremos poner nuestra pgina, en este caso es: http://www.altavista.com
2.- Aparecer una pgina donde debes de dar clic en ENVI UN SITIO
158
3.- Aparecer una pgina donde debes de dar clic en "ENVI BSICO" que es la forma gratuita de poner nuestra pgina. 5.- Sigue los pasos que all se detallan para que el servidor de ALTAVISTA verifique si la pgina cumple son sus requisitos y, si los cumple, deberemos esperar de 2 a 4 semanas para ver que aparezca en los resultados de sus bsquedas.
Actualizar las pginas Mantener actualizadas las pginas es una de las claves del xito y una de las necesidades ms importantes. El ltimo "truco" para que nuestra pgina 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 ms que otras a tener los contenidos actualizados, como son las pginas donde se pueden ver contenidos de actualidad, pero en general todas las pginas 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 imgenes o textos que resalten donde ponga "nuevo" o "new". Tambin 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 dnde se puede renovar el contenido del web. No es bueno tener un enlace que no lleva a ningn sitio, igual que no es bueno tener una direccin de correo que no existe ya. Adems, si tenemos un rea de noticias no ser bueno que la ltima noticia sea de hace tres meses porque da la impresin de que nunca renovamos los contenidos. Si no mantenemos nuestro sitio actualizado el visitante entrar una vez a la pgina pero no lo volver a hacer nunca, con lo que habremos perdido una oportunidad de hacernos de un cliente o un visitante asiduo.
159
Realiza una investigacin electrnica sobre los buscadores que existen en internet, selecciona el que creas conveniente, registra tu pgina web y realiza un resumen sobre el proceso de publicacin mencionando el buscador que seleccionaste y los pasos que seguiste para hacer el registro.
______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ _____________________________________________________________________
160
En la pgina que te indique tu profesor publica la direccin electrnica de tu pgina web as como los comentarios que ya redactaste sobre el proceso de publicacin de tu pgina web y registro de la misma en el buscador.
I.
NOMBRE DEL EVALUADOR: NOMBRE DEL CANDIDATO:
INFORMACIN GENERAL PARA EL PROCESO DE EVALUACIN

FECHA DE APLICACIN:
IECL Cdigo Ttulo Perfil de la NTCL que se evala Unidad:
Utilizar software de aplicacin para el diseo de pginas web Publicar pginas web.
Cdigo
Ttulo Elementos:
Nivel
Referencia
Cdigo Intento de evaluacin 2
Contenido C.3.1 C.3.2
Juicio de evaluacin Con letra Con nmero
161
C.3.1 CONOCES LAS OPCIONES PARA PUBLICAR UNA PAGINA WEB. C.3.2 PBLICAS PGINAS WEB. CONTENIDO* Trabaja colaborativamente Disea claramente la estructura de la pgina web Identifica los sitios que venden alojamiento para una pgina Web. Identifica los sitios gratuitos para alojar una pgina web. Entrega el proyecto dentro del tiempo establecido. Selecciona el sitio adecuado para publicar la pgina web. Publica la pgina web. Registra la pgina web en un buscador. Publica la direccin electrnica de la pgina web en el sitio indicado por el docente. Anexa los comentarios en el sitio indicado por el docente, sobre el proceso de publicacin de la pgina web. Anexa los comentarios en el sitio indicado por el docente sobre el proceso de registro de la pgina web en el buscador. Ingresa a la pgina web al dar clic en la direccin electrnica que publico. S NO N/A
162
Bibliografa
http://feaav.es/common/fe/informes/diagnostico/cursos/html/cursohtml_5.shtm http://roble.pntic.mec.es/apuente/html/paginas/contenidos.htm http://es.html.net/tutorials/html/ http://platea.pntic.mec.es/rluna/CursoHTML/t3.htm http://sitiocop24.galeon.com/ http://www2.uca.es/manual-html/ http://cevug.ugr.es/downloads/public/curso_DreamWeaver04.pdf http://eyd142009pc13.tripod.com/adm_titulares.htm8. http://www.monografias.com 9. www2.uca.es/manual-html/imagenes.htm 10. http://www.monografias.com 11. http://platea.pntic.mec.es/~abercian/guiahtml/imagenes.htm 12. http://personals.ac.upc.edu/elara/documentacion/PORTALES%20-%20UD4%20%20Lenguaje%20HTML.pdf
1. 2. 3. 4. 5. 6. 7.
163
164
PLANTELES
Baja California Camal Ciudad Morelos Ejido Nayarit El Florido Ensenada Estacin Coahuila Extensin Mtro. Rubn Vizcano Valencia Extensin Maneadero del Plantel Ensenada Extensin Primer Ayuntamiento Extensin Tecate Guadalupe Victoria La Mesa Mtro. Jos Vasconcelos Caldern Mtro. Rubn Vizcano Valencia Mexicali Miguel Hidalgo y Costilla Nueva Tijuana Nuevo Len Primer Ayuntamiento Playas de Rosarito Profr. Arturo David Velzquez Rivera Rosarito San Felipe San Quintn Tecate Tijuana Siglo XXI Valle de Guadalupe
CENTROS EMSAD
El Hongo El Rosario Punta Colonet Real del Castillo San Vicente Trabajadores No. 1 Trabajadores No. 2 Trabajadores No. 3 Valle de la Trinidad Valle de las Palmas
ESTE MATERIAL FUE ELABORADO BAJO LA COORDINACIN Y SUPERVISIN DE LA DIRECCIN DE PLANEACIN ACADMICA Y REPRODUCIDO POR LA UNIDAD DE DISEO GRFICO E IMPRENTA DEL COLEGIO DE BACHILLERES DEL ESTADO DE BAJA CALIFORNIA. Blvd. Anhuac 936, C. Cvico, Mexicali, B. C.
FEBRERO DE 2012
Esperamos recibir de los usuarios, en especial de los maestros y alumnos del Colegio, cualquier observacin que a su juicio sea necesario hacernos llegar, ms an si se tratara de errores u omisiones.
Dirigirse a la Direccin y domicilio arriba consignados.

Informatica-Oficinas Paginas Web

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Informatica-Oficinas Paginas Web

Caricato da

Copyright:

Formati disponibili

COLEGIO DE BACHILLERES DEL ESTADO DE BAJA CALIFORNIA

INFORMTICA PARA OFICINAS

PROGRAMA DE DESARROLLO EDUCATIVO

COLEGIO DE BACHILLERES DEL ESTADO DE BAJA CALIFORNIA

LIC. RAFAEL AYALA LPEZ

ING. ANA LILIA MARTNEZ MUOZ

Edicin, febrero de 2012

DISEAR PGINAS WEB EN LENGUAJE HTML ....................... 1

UTILIZAR SOFTWARE DE APLICACIN PARA EL DISEO DE PGINAS WEB ................................................. 63

PUBLICAR PGINAS WEB Y ESTABLECER COMUNICACIN VA INTERNET............................................. 131

Utilizar software de aplicacin para elaborar documentos de texto. (32 Hrs.)

Utilizar software de aplicacin para elaborar presentaciones electrnicas. (24 Hrs.)

Diseo de pginas Web en HTML (48 hrs.)

Disear pginas web en lenguaje HTML

Disear pginas web en lenguaje HTML

____________________________________________________________________________ ____________________________________________________________________________ __________________________________________________________________________

____________________________________________________________________________ ____________________________________________________________________________ ___________________________________________________________________________

Disear pginas web en lenguaje HTML

Disear pginas web en lenguaje HTML

Disear pginas web en lenguaje HTML

Despus de haber realizado la lectura, redacta tu resumen

Disear pginas web en lenguaje HTML

Pregunta al profesor todas las dudas que te vayan surgiendo.

ANOTA TUS POSIBLES TEMAS

Disear pginas web en lenguaje HTML

ANOTA TUS TEMAS Y CLASIFCALOS SEGN SU TIPO. (Como se muestra en el ejemplo)

Disear pginas web en lenguaje HTML

EJEMPLOS: TEMAS ORDENADOS

MIS TEMAS ORDENADOS

Disear pginas web en lenguaje HTML

FUENTES DE INFORMACIN DE MI TEMA:

EJEMPLO DE LA ESCALABILIDAD EN MI PGINA: MI ESCUELA

Disear pginas web en lenguaje HTML

MENCIONA CADA CUANDO VAS A REALIZAR ESCALABILIDAD EN TU PGINA.

Disear pginas web en lenguaje HTML

REALIZA LA PLANIFICACIN DE TU PGINA WEB SEGN EL TEMA QUE HAYAS ESCOGIDO:

Disear pginas web en lenguaje HTML

Disear pginas web en lenguaje HTML

REALIZA EL DISEO DE TU PGINA WEB. (Apyate en el ejemplo)

Disear pginas web en lenguaje HTML

Disear pginas web en lenguaje HTML

Estructura de pgina web:

Disear pginas web en lenguaje HTML

Disear pginas web en lenguaje HTML

Disear pginas web en lenguaje HTML

Disear pginas web en lenguaje HTML

Los atributos se incluyen en la etiqueta de apertura, separados por un espacio.

Puede llevar los siguientes atributos:

Bgcolor Text Link Alink Vlink Background Bgsound Bgproperties

Disear pginas web en lenguaje HTML

Disear pginas web en lenguaje HTML

Disear pginas web en lenguaje HTML

Disear pginas web en lenguaje HTML

Align NOSHADE WIDTH SIZE

Disear pginas web en lenguaje HTML

Disear pginas web en lenguaje HTML

<h2> Ttulo </h2>

<h6> Ttulo </h6>

Disear pginas web en lenguaje HTML

Etiquetas para el texto

Disear pginas web en lenguaje HTML

Solo Explorer Solo Explorer

Texto intermitente Solo Netscape Texto tachado

Disear pginas web en lenguaje HTML

__

__ _