1. 2. 3. 4. 5. 6. 7. 8.

Utilizas los elementos fundamentales del diseo de una pgina Web Diseo de una pgina web Manejar los elementos bsicos del lenguaje HTML en la creacin de pginas web Texto en HTML Tablas Listas Marquesinas Otras etiquetas tiles

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 Utilizar los elementos fundamentales del diseo de una pgina web. 1.2 Manejar los elementos bsicos del lenguaje HTML en la creacin de pginas web. ACTIVIDAD 1 En binas realiza la lectura de las competencias que se pretende alcanzars al trmino del submdulo. Posteriormente responde las preguntas y termina comentando tus respuestas a travs de una discusin guiada por el docente a la vez que atiendes las explicaciones y ejemplos del mismo. 1.- Qu competencias voy a desarrollar? ______________________________________________ ______________________________________________ ______________________________________________ 2.- Para qu me van a servir? ________________________________________________ ______________________________________________ 3- En qu momento las puedo aplicar? _______________________________________ _________________________________________ __________________________________________ ACTIVIDAD 2 En binas comenta los lugares por los que has navegado en internet y trata de recordar lo que has observado en cuanto a la estructura, informacin, enlaces etc. de cada uno de los sitios que has visitado y responde las siguientes preguntas, posteriormente en una lluvia de ideas guiada por el docente comenta el tipo de pgina que te gustara disear y menciona l por qu?

1.- Que entiendes por una pgina web? _________________________________________ 2. Qu tipo de informacin tiene las pginas web que has visitado? _________________________________________ 3. Qu diferencia encuentras entre una pgina web y un sitio web? ___________________________________________________ 4. Qu tienen en comn los sitios web que has visitado? ___________________________________________ 5. Para qu crees que sirve una pgina web? ____________________________________________________ 6.- Qu te gustara que tuviera la pgina web que disears? __________________________________________________ _______________________________________________ ______________________________________________

Utilizas los elementos fundamentales del diseo de una pgina Web

ACTIVIDAD 3 Para iniciar una pgina web, primero debes de conocer sus caractersticas y las reglas bsicas que debes de seguir para disearla, por lo tanto realiza la lectura "Qu es HTML?" y elabora un resumen. Pregunta a tu profesor las dudas que te vayan surgiendo. Qu es HTML? Para abreviar una larga historia, podemos decir que un cientfico llamado Tim Berners-Lee invent HTML all por 1990. El objetivo era facilitar a cientficos de diferentes universidades el acceso a los documentos de investigacin de cada uno de ellos. El proyecto obtuvo un xito mucho mayor del que Tim Berners-Lee nunca hubiese llegado a imaginar. Al inventar HTML, este cientfico sent las bases de la web tal y como la conocemos en la actualidad.

HTML es un lenguaje que hace posible presentar informacin (por ejemplo, investigaciones cientficas) en Internet. Lo que ves al visualizar una pgina en Internet es la interpretacin que hace el navegador del cdigo HTML. Para ver el cdigo HTML de una pgina slo tienes que dar clic en la opcin "Ver" de la barra de mens y elegir "Cdigo fuente" (en Internet Explorer). Si quieres crear sitios web, no hay otra solucin que aprender HTML. Incluso si usas un programa como Dreamweaver, por ejemplo, para la creacin de sitios web, poseer unos conocimientos bsicos de HTML hace la vida mucho ms fcil y tus sitios web mucho mejores. HTML es la abreviatura de "HyperText Mark-up Language", es decir, "Lenguaje de marcado hipertextual", y esto ya es ms de lo que necesitas saber a estas alturas. En todo caso, para mantener un buen orden, necesitas conocer su significado con mayor detalle. Hiper (Hyper): Es lo contrario de lineal. Los programas de la computadora se ejecutaban de forma lineal: cuando el programa haba ejecutado una accin segua hasta la siguiente lnea, y despus de sta a la siguiente, y a la siguiente, HTML, sin embargo, ahora es diferente: se puede ir a donde uno quiera cuando uno quiera. . Texto (Text): Se refiere al texto de la pgina web. Marcado (Mark-up): Es lo que haces con el texto. Se marca el texto del mismo modo que en un programa de edicin de textos con encabezados, vietas, negrita, etc. Lenguaje (lenguaje): Es lo que es HTML. Este lenguaje hace uso de muchos trminos en ingls. Cules son las caractersticas del lenguaje HTML? Este lenguaje ser el encargado de convertir un inocente archivo de texto inicial en una pgina web con diferentes tipos y tamaos de letra, con imgenes impactantes, animaciones sorprendentes, formularios interactivos, etc. Estas caractersticas son las que marcaron el diseo de todos los elementos del WWW incluida la programacin de pginas Web.

L a pgina Web tiene que ser distribuida: La informacin repartida en pginas no muy grandes enlazadas entre s. Debe ser fcil navegar por la pgina. Tiene que ser compatible con todo tipo de ordenadores (PCs, Macintosh, estaciones de trabajo, etc.) y con todo tipo de sistemas operativos (Windows, MS-DOS, UNIX, MAC-OS, etc.) Debe ser dinmico: el proceso de cambiar y actualizar la informacin debe ser gil y rpido. Reglas bsicas en el diseo

Tener algo interesante que decir en tu PGINA web: Todo el mundo ya conoce las herramientas de bsqueda. Haz que tus enlaces sean pertinentes al tema que estas tratando. Recuerda que no en todos los Buscadores aparecen 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. Mantn tu pgina con un mximo de 15K en imgenes o fraccinala si sta es muy grande. 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. Reconocer el trabajo de los dems: Si algn "Sitio" te ayud de alguna manera a construir tu pgina, entonces brndale un enlace Colocar fecha de la ltima revisin: Indica cundo se realiz la ltima revisin. Esto har que las personas se motiven a leer tu pgina. Verifica sus enlaces peridicamente: No dejes que expiren sus enlaces durante largos perodos de tiempo. Revisa su validez. Se abierto a comentarios o sugerencias:Especifica vnculos de correo electrnico o, si es posible, formularios de realimentacin. Practica el HTML: Usa los editores solo cuando conozcas los principios bsicos del HTML. ACTIVIDAD 4 Despus de haber realizado la lectura, redacta tu resumen ________________________________________________________________________________ ACTIVIDAD INTEGRADORA PARTE 1

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 AANOTA TUS POSIBLES TEMAS

Mi ciudad Mi escuela 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 profesional. Sitio Web de informacin. - 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 CCLASIFICACIN 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 CLASIFICALOS SEGN SU TIPO. (Como se muestra en el ejemplo) MIS TEMAS A CLASIFICACIN

3.- Escoge un tema para tu pgina web El factor ms importante, es, que el tema nos apasione. De modo que de la lista de temas que tengo, voy a ordenarlos Segn me gusten. (El tema que quede primero es sobre el que desarrollars tu pgina web) EJEMPLOS: TEMAS ORDENADOS Mi escuela Mi ciudad Mi artista favorito Capacitacin de Informtica Negocio familiar Portafolio de evidencias de mis materias Lenguaje HTML 4.- Definicin de la Informacin a publicar. 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?: M MIS TEMAS ORDENADOS

ANOTA TU TEMA Y LA INFORMACIN QUE TE GUSTARA MOSTRAR EN TU PGINA (Como se muestra en el ejemplo) EJEMPLO: MI ESCUELA Historia de mi escuela Materias que imparten Otros Planteles MI TEMA:

Actividades que realiza Envi de correos Enlaces a otras pginas de inters 5.- Qu fuentes de informacin tengo? Una fuente de informacin es el lugar del que manan los conceptos, las ideas y los pensamientos que sirven para la creacin de nuevo conocimiento en este caso una pgina web. Por lo tanto, en este apartado necesitamos recolectar las fuentes de informacin de donde vamos a extraer informacin del tema de nuestra pgina web TEMA: Mi escuela www.cobachbc.edu.mx http://www.e-local.gob.mx/work/templates/enciclo/bajacalifornia/municipios/02002a.htm Internet para buscar pginas de inters relacionados con el tema Enlaces a direcciones de cursos como: www.aulaclic.com, www.aulafacil.com, etc. ANOTA TU TEMA Y LAS FUENTES DE CONSULTA PARA CREAR TU PGINA WEB. (Como se muestra en el ejemplo) FUENTES DE INFORMACIN DE MI TEMA:

6.- Escalabilidad La escalabilidad se define como las visiones a corto y largo plazo acerca de nuestro sitio Web, si a largo tiempo queremos ampliar nuestro sitio Web con nuevas aplicaciones, nuevas pginas, actualizaciones constantes de que va a depender que realicemos esto: EJEMPLO DE LA ESCALABILIDAD EN MI PGINA: MI ESCUELA La pgina se revisara constantemente y se modificara cuando ya hayan vencido los enlaces, este muy lenta debido a la cantidad de visitas que tenga, cuando sea necesario ampliarla, agregar ms informacin o enlaces. Lo que suceda primero. 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: OBJETIVOS: Presentar informacin de la preparatoria que sea atractiva para los jvenes de nuevo ingreso. a) 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. b) CONTENIDO: habr informacin sobre el plantel y la preparacin que otorga a los jvenes. c) 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:

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

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

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

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. Una vez que hayas escrito una pgina, gurdala en un archivo con extensin .htm o .html.

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

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.

Manejar los elementos bsicos del lenguaje HTML en la 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: __________________________________________ Etiqueta: ____________________________________ Hipertexto: __________________________________________ Lenguaje html: __________________________________________ Marcas (tag) __________________________________________ Navegador: _________________________________________ Pgina web: __________________________________________ Plataforma: ___________________________________________ Servidor web: ___________________________________________ Vnculos ___________________________________________ 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:

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.

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 clic en el men archivo, 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:

Etiqueta

Todo el texto, las imgenes y el formato visibles al usuario deben encontrarse entre las etiquetas

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.

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

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 COLOR Negro Verde Magente Amarillo Azul Marino Caf Violeta

ACTIVIDAD 7 Ingresa al bloc de notas y realiza lo siguiente: 1 Abre el archivo "index.html". 3 Contina trascribiendo el ejercicio 3 4 Graba con el mismo nombre. 5 Ejecuta y si muestra algn error corrgelo. 5 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.

Ejemplo 3:

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 "&aacute;" 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:

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)

ACTIVIDAD 8 Ingresa al bloc de notas y realiza lo siguiente: 1 Abre el archivo "index.html". 3 Contina trascribiendo el ejercicio 5 4 Graba con el mismo nombre. 5 Ejecuta y si muestra algn error corrgelo y vuelve a ejecutar. 5 Practica los diferentes atributos de la etiqueta Ejemplo 5

Encabezados Los ttulos o encabezados se emplean al comienzo de una seccin. Las etiquetas que se usan son:

ACTIVIDAD 9 Ingresa al bloc de notas y realiza lo siguiente: 1 Abre el archivo "index.html". 3 Contina trascribiendo el ejercicio 6 4 Graba con el mismo nombre. 5 Ejecuta y si muestra algn error corrgelo y vuelve a ejecutar. 5 Practica los diferentes tamaos de encabezados Ejemplo 6:

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. Por ejemplo:

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:

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 Abre el archivo que grabaste con el nombre de index.html. 2 Continua trascribiendo la parte que falta del ejercicio 7. 3 Graba con el mismo nombre y ejecuta. 4 Observa la pgina que te presenta, si muestra algn error corrgelo y vuelve a ejecutar. 5.- Practica las diferentes etiquetas para texto. EJEMPLO 7:

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 Abre el archivo que grabaste con el nombre de index.html. 2 Continua trascribiendo la parte que falta del ejercicio 8. 3 Graba con el mismo nombre y ejecuta. 4 Observa la pgina que te presenta, si muestra algn error corrgelo y vuelve a ejecutar. 5.- Practica los diferentes atributos de la etiqueta . Ejemplo 8:

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

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.

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

En los casos anteriores solo se especifica donde se coloca la primera lnea del texto y el resto se incluyen debajo de la imagen quedando un efecto muy feo cuando el texto tiene ms de una lnea. Existen otras alineaciones que incluirn a la imagen insertada dentro del texto. La imagen puede quedar a la izquierda, LEFT o a la derecha, RIGHT. No se podr utilizar en combinacin con las anteriores alineaciones.

Tamao de la imagen Es posible cambiar el tamao de la imagen de forma que pueda ajustarse como se desee, pudiendo ampliar o disminuir este. El atributo HEIGHT Determina el alto de la imagen a mostrar, se especifica en puntos de la pantalla (pixeles) o en tanto por ciento sobre el tamao del documento. En caso de que la imagen sea mayor o menor se escalar a este tamao. El atributo WIDTH indica el ancho al que se mostrar la imagen, escalndola a este tamao. Tambin se expresar en pixeles o en tanto por ciento. No es necesario indicar el ancho y el alto, se puede especificar solo uno de las dimensiones, ajustndose la otra a la proporcin de la imagen. Es recomendable indicar solo uno de estos parmetros para que la imagen no se muestre deformada. Igualmente se debe usar el valor relativo en tanto por ciento si se desea que la imagen guarde siempre una misma proporcin con respecto al texto. Si se desea mostrar dos imgenes y queremos que una ocupe un cuarto de la pantalla y la otra el espacio restante, se indica en una el ancho (WIDTH) del 25% y en la otra del 74%, no indicando en ningn caso el alto (HEIGHT), de esta forma independientemente como sea el tamao de la ventana del navegador e independientemente del monitor del cliente, siempre se podrn mostrar ambas imgenes en la misma lnea.

ACTIVIDAD 13 Ingresa al bloc de notas y realiza lo siguiente: 1 Abre el archivo que grabaste con el nombre de index.html. 2 Continua trascribiendo la parte que falta del ejercicio 9. 3 Graba con el mismo nombre y ejecuta. 4 Observa la pgina que te presenta, si muestra algn error corrgelo y vuelve a ejecutar. 5.- Practica las diferentes ubicaciones de las imgenes. Ejemplo 9:

Tablas
En HTML tambin podemos incluir arreglos de tablas. Se deben utilizar varias etiquetas: Etiqueta

Seala el inicio y final de una tabla. Sus atributos son: ETIQUETA Align Bgcolor Border BorderColor BorderDark BorderLight Caption Cellpadding Cellspacing Width Etiqueta FUNCIN Establece la alineacin de la tabla o texto mediante ALIGN=LEFT o ALIGN=RIGHT Establece el color de fondo de las celdas de la tabla Determina el ancho del borde en pixeles Asigna un color al borde Determina el color de la parte oscura de un borde de 3 dimensiones Asigna el color de la parte clara de un borde de 3 dimensiones Especifica el titulo para la tabla Establece la cantidad de espacio libre junto al contenido de una celda Asigna la cantidad de espacio entre las celdas de una tabla Determina el ancho de la tabla en pixeles o en un porcentaje

Indica al navegador cliente que exhiba el texto como un encabezado en la primera fila de una tabla. Atributos principales: ETIQUETA Colspan Align Etiqueta FUNCIN especifica el nmero de celdas que cubre el encabezado Determina la posicin del texto del titilo

Indica al navegador que exhiba el texto dentro de una fila; puede tambin interpretarse como la etiqueta que define filas. ETIQUETA Align Etiqueta FUNCIN Alineacin del texto/objeto de la celda

La etiqueta de datos de la tabla, es la que identifica a las columnas o celdas especficas de una tabla. Atributos principales: ETIQUETA Align Bgcolor Background FUNCIN Alineacin del texto/objeto de la celda Color de fondo de la celda imagen de fondo de una celda

Width

Ancho de la celda/columna con respecto al ancho de la tabla Solo precisa definir el ancho en la primera celda de la columna.

Recuerde que dentro de una celda, usted puede insertar desde texto o un grfico hasta una tabla entera. ACTIVIDAD 14 Ingresa al bloc de notas y realiza lo siguiente: 1 Trascribe el ejercicio 10. 2 Graba con el nombre de Planteles. html 3 Ejecuta el archivo, s presenta errores corrgeles 4 Observa la tabla que te presenta la pgina. 5 Modifcala a tu gusto. Ejemplo 10:

Listas
Con frecuencia se usan listas en los documentos. El lenguaje HTML incorpora unas listas con vietas sencillas o tambin letras o nmeros. Para dar ms vistosidad a las pginas, se suelen emplear tambin imgenes que se colocan delante de cada prrafo. Vamos a ver algunas de las posibilidades que tenemos. Listas con vietas desordenadas He aqu el ejemplo ms sencillo de una de estas listas:

Otro atributo interesante es compactar para reducir el espacio entre los elementos Listas con vietas ordenadas Estas listas se caracterizan porque aparecen nmeros o ciertos caracteres que ordenan sus elementos. La etiqueta usada es junto con su correspondiente de cierre . El atributo TYPE toma ahora los valores 1, a, A, i, I. Un ejemplo de estas listas es el siguiente ESCRIBIMOS EN HTML i. ii. iii. iv. v. Primer trmino de la lista Segundo trmino Tercer trmino Cuarto Quinto SE VER AS

Primer trmino de la lista Segundo trmino Tercer trmino Cuarto Quinto

Listas de definicin Estas listas se forman con el elemento que se define y su definicin.

ACTIVIDAD 15 Ingresa al bloc de notas y realiza lo siguiente: 1 Trascribe el ejercicio 11. 2 Graba con el nombre de capacitaciones. html 3 Ejecuta el archivo, s presenta errores corrgeles 4 Observa las listas que te presenta la pgina. 5 Modifcala a tu gusto. Ejemplo 11:

Hipervnculos Un vnculo hipertextual es un texto, botn o imagen que al seleccionar nos lleva a otra direccin URL, pgina WEB o recurso. Etiqueta

La etiqueta que viene de "ancla", denota el inicio y el final de una instruccin que contiene alguna forma de vnculo o hipervnculo. Esta etiqueta permite al usuario vincularse a otra ubicacin dentro del mismo documento HTML, a otro sitio WEB, a un servidor FTP, enlace de correo electrnico. Atributos:

ACTIVIDAD 16 Ingresa al bloc de notas y realiza lo siguiente: 1 Abre el archivo que grabaste con el nombre de index.html. 2 Continua transcribiendo la parte que falta del ejercicio 12. 3 Graba con el mismo nombre y ejecuta. 4 Observa la pgina que te presenta, si muestra algn error corrgelo y vuelve a ejecutar. 5 Practica los hipervnculos. 6 Modifcala a tu gusto. Ejemplo 12:

ACTIVIDAD 17 Despus de haber practicado los ejercicios anteriores llena la siguiente tabla, explicando la funcin que realiza cada una de las etiquetas siguientes:

ACTIVIDAD INTEGRADORA PARTE 3 Continuamos con la elaboracin de la codificacin de tu pgina web, bsate en los ejemplos para que puedas realizar las otras pginas que componen tu pgina web. Anota en el cuadro siguiente el cdigo de tu pgina que vas a disear para que posteriormente la trascribas en el bloc de notas.

Marquesinas
Vamos a ver ahora lo que son las marquesinas. Son pequeas ventanas donde vemos un texto desplazarse. Slo son implementadas por Microsoft Internet Explorer 3.0 o superior, y no por Netscape y los dems navegadores, donde se ver como un texto fijo. La etiqueta bsica ser

Esta es una marquesina por defecto, pero se pueden aadir muchos ms parmetros:

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.

ACTIVIDAD INTEGRADORA LTIMA PARTE En trabajo colaborativo como proyecto final debers entregar en un CD lo siguiente: 1.- El Documento en Microsoft Word del diseo de tu pgina web que elaboraste en la parte 1 de la actividad integradora. 2.- El archivo que elaboraste en el bloc de notas de tu pgina principal index.html que incluya: ? Encabezado ? Imgenes

? Hipe

Mentiras sinceras - A lex ubago 2012..mp3

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

Enrique Iglesias - O ne Day A t A Time F t. A kon [T-umaczenie][Napisy PL].mp3

Leer ms: http://www.monografias.com/trabajos91/disenar-paginas-web-lenguaje-html/disenar-paginas-weblenguaje-html2.shtml#ixzz2hkKlhgF5