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 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


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


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


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


ACTIVIDAD 4

Despus de haber realizado la lectura, redacta tu resumen

______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ ______________________________________________________________________ _____________________________________________________________________

6


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


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


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


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


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: 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


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


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


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: MI PRIMER PGINA COLEGIO DE BACHILLERES DEL ESTADO DE BAJA CALIFORNIA

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: 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


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


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


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


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:

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


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


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


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


ACTIVIDAD 12

DESPUS DE HABER PRACTICADO LOS EJERCICIOS ANTERIORES, COMPLETA LA TABLA SIGUIENTE EXPLICANDO LA FUNCIN QUE REALIZA CADA ETIQUETA: ETIQUETA FUNCIN

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 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


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

informatica-oficinas paginas web

Documents