informatica-oficinas paginas web
Post on 20-Jul-2015
344 Views
Preview:
TRANSCRIPT
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 LPEZDIRECTOR GENERAL
ING. ANA LILIA MARTNEZ MUOZDIRECTORA 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
IntroduccinEn 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
I
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
MDULOSSoftware 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.
1
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? ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________
2
Disear pginas web en lenguaje HTML
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? ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________
3
Disear pginas web en lenguaje HTML
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.
4
Disear pginas web en lenguaje HTML
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.
5
Disear pginas web en lenguaje HTML
ACTIVIDAD 4
Despus de haber realizado la lectura, redacta tu resumen
______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ _____________________________________________________________________
6
Disear pginas web en lenguaje HTML
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
7
Disear pginas web en lenguaje HTML
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
8
Disear pginas web en lenguaje HTML
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 ORDENADOSMi 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 ESCUELAHistoria de mi escuela Materias que imparten Otros Planteles Actividades que realiza Envi de correos Enlaces a otras pginas de inters
MI TEMA:
9
Disear pginas web en lenguaje HTML
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 escuelawww.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 ESCUELALa 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
Disear pginas web en lenguaje HTML
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
Disear pginas web en lenguaje HTML
REALIZA LA PLANIFICACIN DE TU PGINA WEB SEGN EL TEMA QUE HAYAS ESCOGIDO:
OBJETIVOS:
PBLICO:
CONTENIDO:
ESTRUCTURA:
12
Disear pginas web en lenguaje HTML
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)
PARAESCOLAR (Imagen)
PARAESCOLAR (Imagen)
PARAESCOLAR (Imagen)
ENVO DE CORREO
PARAESCOLAR (Imagen)
PARAESCOLAR (Imagen)
PARAESCOLAR (Imagen)
DERECHOS RESERVADOS
13
Disear pginas web en lenguaje HTML
REALIZA EL DISEO DE TU PGINA WEB. (Apyate en el ejemplo)
14
Disear pginas web en lenguaje HTML
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
Disear pginas web en lenguaje HTML
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
Disear pginas web en lenguaje HTML
____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ Etiqueta: ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ Hipertexto: ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ Lenguaje html: ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ Marcas (tag) ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ Navegador: ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ Pgina web: ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ Plataforma: ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ Servidor web: ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________ Vnculos ____________________________________________________________________________ ____________________________________________________________________________ ____________________________________________________________________________
17
Disear pginas web en lenguaje HTML
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: Definiciones de la cabecera Instrucciones 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 COLEGIO DE BACHILLERES DEL ESTADO DE BAJA CALIFORNIA
18
Disear pginas web en lenguaje HTML
Etiqueta: 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 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: MI PRIMER PGINA COLEGIO DE BACHILLERES DEL ESTADO DE BAJA CALIFORNIA
19
Disear pginas web en lenguaje HTML
Etiqueta
Todo el texto, las imgenes y el formato visibles al usuario deben encontrarse entre las etiquetas < /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
Disear pginas web en lenguaje HTML
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
Disear pginas web en lenguaje HTML
Ejemplo 3: MI PRIMER PGINA COLEGIO DE BACHILLERES DEL ESTADO DE BAJA CALIFORNIA
22
Disear pginas web en lenguaje HTML
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: pgina. A continuacin se muestra una lista con algunos caracteres y el nombre con el que han de ser representados:
Ejemplo 4: MI PRIMER PGINA COLEGIO DE BACHILLERES DEL ESTADO DE BAJA CALIFORNIA Estoy aprendiendo a hacer mi pgina WEB Nota que el texto se encuentra de corrido en una sola fila, para bajar de lnea utilizaremos la siguiente etiqueta.
23
Disear pginas web en lenguaje HTML
Etiqueta
La etiqueta
instruye al navegador cliente que inserte un salto de lnea en un
documento HTML. La etiqueta
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 La etiqueta 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
Disear pginas web en lenguaje HTML
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
Ejemplo 5 COBACH COLEGIO DE BACHILLERES DEL ESTADO DE BAJA
CALIFORNIA
PLANTEL MEXICALI.
Mi pgina WEB
25
Disear pginas web en lenguaje HTML
Encabezados Los ttulos o encabezados se emplean al comienzo de una seccin. Las etiquetas que se usan son:
Etiqueta Ttulo
Se veTtulo
Ttulo Ttulo Ttulo Ttulo
TtuloTtuloTtulo Ttulo
Ttulo
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: COBACH COLEGIO DE BACHILLERES DEL ESTADO DE BAJA
CALIFORNIA
PLANTEL MEXICALI
Mi pgina WEB
26
Disear pginas web en lenguaje HTML
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
Disear pginas web en lenguaje HTML
Por ejemplo:
ETIQUETATexto en Negrita Itlica Negrita e Itlica Subrayado Enfatizado Fuerte Code Texto Citation Text Keyboard Text Sample Text Teletype Text Variable Element Text Texto grande Texto pequeo Subindice Superndice Texto intermitente Texto tachado
SE VER ASTexto 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 pequeoSubndice
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: Pgina oficial de cobach 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
Disear pginas web en lenguaje HTML
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: COBACH COLEGIO DE BACHILLERES DEL ESTADO DE BAJA
CALIFORNIA
PLANTEL MEXICALI
Ejemplo del uso de las etiquetas
Este texto est con negrillas
Este texto est con subrayado
Este texto est con inclinacin itlica
Este texto cuenta con un combinado de todo.
29
Disear pginas web en lenguaje HTML
Etiqueta 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 .
30
Disear pginas web en lenguaje HTML
Ejemplo 8: COBACH COLEGIO DE BACHILLERES DEL ESTADO DE BAJA
CALIFORNIA
PLANTEL MEXICALI
Ejemplo del uso de las etiquetas
Este texto est con negrillas
Este texto est con subrayado
Este texto est con inclinacin itlica
Este texto cuenta con un combinado de todo.
Nor ma
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
Disear pginas web en lenguaje HTML
ACTIVIDAD 12
DESPUS DE HABER PRACTICADO LOS EJERCICIOS ANTERIORES, COMPLETA LA TABLA SIGUIENTE EXPLICANDO LA FUNCIN QUE REALIZA CADA ETIQUETA: ETIQUETA FUNCIN
32
Disear pginas web en lenguaje HTML
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
Disear pginas web en lenguaje HTML
Imgenes en los documentos HTML
Etiqueta 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: 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
Disear pginas web en lenguaje HTML
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 COLEGIO DE BACHILLERES DEL ESTADO
DE BAJA CALIFORNIA.Resul tado CALIFORNIA.COLEGIO DE BACHILLERES
DEL ESTADO DE BAJAExplica Como se ve solo aparece la primera frase
alineada en la parte alta (TOP) de la cin imagen. Inst. HTML FUNCIN
52Disear pginas web en lenguaje HTMLACTIVIDAD 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.53Disear pginas web en lenguaje HTML54Disear pginas
web en lenguaje HTMLMarquesinas 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 y Texto desplazndose 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.
Marquesina con el 50% de la ventana de ancho y 80 pxeles de alto
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. Marquesina con "texto" alineado en la parte inferior Texto
Color de fondo. Se hace con BGCOLOR="xxyyzz", siendo ste un nmero
hexadecimal. Texto desplazndose con fondo granate 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. Texto desplazndose alternadamente 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 Texto desplazndose hacia la derecha Cantidad de texto, con
SCROLLAMOUNT=xx, siendo xxx el nmero de pxels que se desplazan en
cada avance. Cuanto mayor sea ms rpido avance. Texto avanzando
rpido55Disear pginas web en lenguaje HTMLTiempo 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.
Texto avanzando lento 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 , tambin es posible decidir la
fuente o tipo de letra en una marquesina con la etiqueta , siendo
xxx el nombre de la fuente, de la siguiente manera: Texto con
fuente Arial VIVA MEXICO 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: 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 manera56Disear pginas web en lenguaje HTMLEtiqueta 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: Rocio
Ruiz
POBOX 2282
Mexicali- Baja California Etiqueta El texto dentro de la etiqueta
aparece en cursivas para representar una cita Sintaxis de ejemplo:
Este texto estar inclinado Etiqueta El texto dentro de la etiqueta
aparece en una fuente con caracteres mono espaciados cuando se
visualiza a travs de un navegador. Sintaxis de ejemplo: Este texto
aparece con tipo de letra especial Etiqueta 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: Foto usada bajo
permiso de Carlos Anbarro Etiqueta Indica que se debe dar nfasis al
texto que se contiene. EL navegador resaltar este texto con
negrillas e inclinacin italica. Sintaxis de ejemplo: Texto
resaltado Etiqueta La etiqueta 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:57Disear pginas
web en lenguaje HTMLTeclee su mensaje ac: Etiqueta La etiqueta
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:
http://www.bolivia-internet.com/irc Etiqueta La etiqueta o de
prrafo, indica el inicio y el final de oraciones a exhibir con un
solo prrafo. Sintaxis de ejemplo: a partir de ahora definimos
prrafos de esta manera. Prrafo en el centro Prrafo a la izquierda
Prrafo a la derechaEtiqueta La etiqueta 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: El texto que
usted ve. Aparecer tal cual, incluidos los retornos de carro
Etiqueta o Instruye al navegador que tache el texto incluido entre
las etiquetas. Sintaxis de ejemplo: Este texto esta tachado
Etiqueta Hace que el navegador exhiba el texto en negritas. Algunos
navegadores muestran el texto en cursivas. Sintaxis de
ejemplo:58Disear pginas web en lenguaje HTMLEste texto esta sobre
saltado Etiqueta Instruye al navegador que exhiba el texto
especificado como subndice. Sintaxis de ejemplo: Agua: H20 Etiqueta
Indica al navegador exhibir el texto especificado como super ndice
Sintaxis de ejemplo: Mate: 2*2 = 22. Etiqueta Etiqueta teletipo,
instruye al navegador que exhiba el texto especificado en una
fuente de ancho fijo. Sintaxis de ejemplo: Este es un tipo de letra
de teletipo Etiqueta Indica al navegador que exhiba el texto
especificado en una fuente ms pequea, de ancho fijo. Sintaxis de
ejemplo: Este texto ser ms pequeo y de formato especial 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: bgcolor=#000000 background=fondo.gif59Disear
pginas web en lenguaje HTMLACTIVIDAD INTEGRADORA LTIMA PARTEEn
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.60Disear pginas web en
lenguaje HTMLI.NOMBRE DEL EVALUADOR: NOMBRE DEL
CANDIDATO:INFORMACIN GENERAL PARA EL PROCESO DE EVALUACINFECHA DE
APLICACIN:IECL Cdigo Ttulo Perfil de la NTCL que se evala
Unidad:Disear pginas web en lenguaje HTMLDisear pginas web en
lenguaje HTML.Utilizar software de aplicacin para el diseo de
pginas web Publicar pginas web y establecer comunicacin va
Internet.CdigoTtulo Elementos:NivelReferenciaCdigo Intento de
evaluacin 2Ttulo Intento de evaluacin 3 No Domina el Contenido Con
letra Con nmeroIntento de evaluacin 1 Domina el Contenido Juicio de
la Evaluacin del mdulo 1Contenido C.1.1 C.1.2Juicio de evaluacin
Con letra Con nmero61Disear pginas web en lenguaje HTMLC.1.1
C.1.2UTILIZAS LOS ELEMENTOS FUNDAMENTALES DEL DISEO DE UNA PGINA
WEB. CONOCES LA ESTRUCTURA DE UNA PGINA WEB. S NO N/ACONTENIDO
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 delSi 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.62SubmduloPROPSITO: 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.63Disear pginas web en lenguaje
HTMLACTIVIDAD 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?
_____________________________________________________________________________________
_____________________________________________________________________________________
_________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_________________________________________________________________________________64Utilizar
Software de Aplicacin para el Diseo de Pginas WebACTIVIDAD 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?
_____________________________________________________________________________________
_____________________________________________________________________________________
_________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_________________________________________________________________________________65Disear
pginas web en lenguaje HTML2.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.66Utilizar Software de Aplicacin para el Diseo de Pginas
WebUn 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 actual67Disear pginas
web en lenguaje HTMLde 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.68Utilizar Software de Aplicacin
para el Diseo de Pginas WebACTIVIDAD 4Despus de haber realizado la
lectura, redacta tu resumen
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
________________________69Disear pginas web en lenguaje HTML2.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:
_____________________________________________________________________________________
_____________________________________________________________________________________
_________________________________________________________________________________70Utilizar
Software de Aplicacin para el Diseo de Pginas WebTabla:
_____________________________________________________________________________________
_____________________________________________________________________________________
_________________________________________________________________________________
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 InicialDesde 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.71Disear
pginas web en lenguaje HTMLBarra 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
documentoEn 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.72Utilizar Software de Aplicacin para el Diseo de Pginas
WebEn 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 PropiedadesEn
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
paneles73Disear pginas web en lenguaje HTMLA 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 documentosConforme 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.74Utilizar Software de Aplicacin para
el Diseo de Pginas WebACTIVIDAD 6A 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.75Disear pginas web en lenguaje HTMLDefinir 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 inicialEn 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.76Utilizar Software de
Aplicacin para el Diseo de Pginas WebDesde la ventana de
ArchivosDebes 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.77Disear pginas web en lenguaje HTMLAadir
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.78Utilizar
Software de Aplicacin para el Diseo de Pginas WebACTIVIDAD 8Realiza
la lectura, Funciones bsicas a la vez que vas ejecutando las
top related