www.aulaclic.com

Fuente: www.aulaclic.com

n d i c e d e t a l l a d o Unidad 1. Introduccin a HTMLQu es HTMLVersiones de HTML Los navegadores. Compatibilidad Editores Introduccin al Bloc de notasCompaginar dos sesionesEtiquetasMi primera pgina

Unidad 2. Estructura de una pginaIdentificador del tipo de documento Cabecera de la pgina Ttulo de la pgina La etiqueta Cuerpo del documento Colores en hexadecimal Unidad 3. El textoCaracteres especiales y espacios en blancoComentarios Saltos de lnea
Texto preformateado Separadores Sangrado de texto Formatear el texto Resaltado del texto ...Prrafos ...Encabezados ...Marquesinas Las listas ... Unidad 4. HiperenlacesHiperenlace Tipos de referenciasDestino del enlaceFormato de los enlacesPuntos de fijacin. AnclasOtros tipos de enlaces Unidad 5. ImgenesImagen Formatos de imagenTexto alternativo Borde de una imagenTamao de una imagenAlineacin de una imagen Unidad 6. TablasTabla Fila Columna o celda Formato de la tablaFormato de las celdasEncabezado de columna Titulo de tabla Combinar celdas Unidad 7. MarcosConjunto de marcos Marco Sin marcos Destino del enlace Unidad 8. FormulariosFormulario reas de texto Elementos de entrada Campos de seleccin ... Unidad 9. MultimediaSonido de fondo Vdeo y audio Pelculas Flash Unidad 10. CapasCapa ... Unidad 11. JavaScriptLenguajes de scriptJava Script Unidad 12. Hojas de estiloIntroduccinVincular una hoja de estiloSintaxis de las hojas de estiloLas propiedades Unidad 13. Pginas web dinmicasHTML dinmicoProgramacin webXMLEjercicios paso a pasoCrear una pgina bsicaInsertar texto con diferentes propiedadesInsertar un hiperenlaceInsertar una imagenTrabajar con tablasCrear conjunto de marcosInsertar elementos de formularioInsertar sonido de fondoModificar las propiedades de una capaLlamadas a javascriptCrear hoja de estilosEjercicios propuestosModificar las propiedades del documentoModificar las propiedades del textoInsertar hiperenlacesInsertar imgenesTrabajar con tablasConfigurar marcosInsertar elementos de formularioInsertar elementos multimediaModificar las propiedades de una capaLlamadas a java scriptAplicar estilosPruebas evaluativasIntroduccin a HTMLEstructura de una pginaEl textoHiperenlacesImgenesTablasMarcosFormulariosMultimediaCapasJava ScriptHojas de estiloPginas web dinmicasUnidad 1.Introduccin a HTML (I)A lo largo de este tema vamos a conocer los conceptos bsicos sobre HTML, y cmo se utiliza para crear pginas web.Qu es HTMLEl HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las pginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto de forma estructurada, y que est compuesto por etiquetas, que marcan el inicio y el fin de cada elemento del documento.Un documento hipertexto no slo se compone de texto, puede contener imgenes, sonido, vdeos, etc., por lo que el resultado puede considerarse como un documento multimedia.Los documentos HTML deben tener la extensin html o htm, para que puedan ser visualizados en los navegadores (programas que permiten visualizar las pginas web).Los navegadores se encargan de interpretar el cdigo HTML de los documentos, y de mostrar a los usuarios las pginas web resultantes del cdigo interpretado.Versiones de HTMLEn noviembre de 1995 se aprob el estndar HTML 2.0. para la creacin de pginas web. Se cre con objetivos divulgativos, orientado a la actividad acadmica, en el que el contenido de las pginas era ms importante que el diseo.Pero esta versin del HTML careca de muchas herramientas que permitieran controlar el diseo de las pginas y aadir contenido multimedia, por lo que Netscape (cuyos navegadores eran los ms utilizados por aquellos aos) comenz a incluir nuevas etiquetas que no existan en el estndar.El comit encargado de establecer los estndares dentro de Internet, comenz a trabajar en el borrador de una nueva versin de HTML, el borrador de HTML 3.0.Pero este borrador result demasiado extenso, al intentar incluir numerosos nuevos atributos para etiquetas ya existentes, y la creacin de otras muchas etiquetas nuevas. Por ello, no fue bien aceptado por el mercado y varias compaas se unieron para formar un nuevo comit encargado de establecer los estndares del HTML. Este comit pas a llamarse W3C. En enero de 1997 se aprob el estndar HTML 3.2. Este nuevo estndar inclua las mejoras proporcionadas por los navegadores Internet Explorer y Netscape Navigator, que ya haban realizado extensiones sobre el estndar HTML 2.0.En diciembre de 1997 se aprob el estndar HTML 4.0, creado para estandarizar los marcos (frames), las hojas de estilo y los scripts.En septiembre de 2001 se aprob el estndar HTML 4.01.Unidad 1.Introduccin a HTML (II)Los navegadores. CompatibilidadComo hemos dicho, el navegador instalado en el ordenador del usuario es el que interpreta el cdigo HTML de la pgina que visita por lo que a veces puede ocurrir que dos usuarios visualicen la misma pgina de forma distinta porque tienen instalados navegadores distintos o incluso versiones distintas del mismo navegador. Los navegadores de hoy en da pretenden ser compatibles con la ltima versin de HTML. Es necesario realizar extensiones de los navegadores para que puedan ser compatibles con esta ltima versin.Dos de los navegadores que continuamente estn realizando extensiones son Internet Explorer y Netscape Navigator, que realizan extensiones incluso antes de que se establezcan los estndares, intentando incluir las nuevas funciones incluidas en los borradores.Los navegadores tienen que ser compatibles con la ltima versin HTML para poder interpretar el mayor nmero posible de etiquetas. Si un navegador no reconoce una etiqueta, la ignora y el efecto que pretenda la etiqueta no queda reflejado en la pgina.Para realizar las extensiones de estos navegadores se aaden nuevos atributos a las etiquetas ya existentes, o se aaden nuevas etiquetas.Como resultado a estas extensiones, habr pginas cuyo cdigo podr ser interpretado completamente por todos los navegadores, mientras que otras, al incluir nuevos atributos o etiquetas del borrador de la ltima versin de HTML, solo podrn ser interpretadas en su totalidad en los navegadores ms actualizados.En este ltimo caso tambin puede ocurrir que alguna etiqueta de la pgina solamente pueda ser interpretada por un navegador concreto, y otra etiqueta por un navegador diferente al anterior, por lo que nunca sera visualizada en su totalidad por ningn navegador.Uno de los retos de los diseadores de pginas web es hacer las pginas ms atractivas utilizando toda la potencia del lenguaje HTML pero teniendo en cuentas estos problemas de compatibilidades para que el mayor nmero de internautas vean sus pginas tal como las ha diseado.EditoresUn editor es un programa que nos permiten redactar documentos. Hoy en da existen un gran nmero de editores que permiten crear pginas web sin la necesidad de escribir ni una sola lnea de cdigo HTML. Estos editores disponen de un entorno visual, y generan automticamente el cdigo de las pginas. Al poder ver en todo momento cmo quedar la pgina en el navegador, se facilita la creacin de las pginas, y el uso de mens permite ganar rapidez.Estos editores visuales pueden generar en ocasiones cdigo basura, es decir, cdigo que no sirve para nada, en otras ocasiones puede ser ms efectivo corregir directamente el cdigo por lo que resulta necesario saber HTML para poder depurar el cdigo de nuestra pginas.Algunos de los editores visuales con los que podrs crear tus pginas web son Macromedia Dreamweaver, Microsoft Frontpage, Adobe Pagemill, NetObjects Fusion, CutePage, HotDog Proffesional, Netscape Composer y Arachnophilia, de los cuales algunos tienen la ventaja de ser gratuitos.En aulaClic puedes encontrar los cursos de Macromedia Dreamweaver y Microsoft Frontpage, dos de los editores ms usados hoy en da. Es aconsejable comenzar utilizando una herramienta lo ms sencilla posible, para tener que insertar nosotros mismos el cdigo HTML. Esto permite familiarizarse con el lenguaje, para poder utilizar algn editor visual posteriormente, y depurar el cdigo cuando fuera necesario.Para crear pginas web escribiendo directamente el cdigo HTML puedes utilizar la herramienta Wordpad o el Bloc de notas que proporciona Windows.A lo largo de este curso vamos a trabajar con el Bloc de notas para crear nuestras pginas, ya que se trata de un editor de textos muy sencillo de manejar, que nos permitir crear pginas a travs del cdigo HTML.Si no sabes cmo trabajar con el Bloc de notas, te lo explicamos aqu. Cuando realices los ejercicios puedes compaginar dos sesiones de la forma que te explicamos aqu. EtiquetasLas etiquetas o marcas delimitan cada uno de los elementos que componen un documento HTML. Existen dos tipos de etiquetas, la de comienzo de elemento y la de fin o cierre de elemento.La etiqueta de comienzo est delimitada por los caracteres < y >. Est compuesta por el identificador o nombre de la etiqueta, y puede contener una serie de atributos opcionales que permiten aadir ciertas propiedades. Su sintaxis es: Los atributos de la etiqueta de comienzo siguen una sintaxis predefinida y pueden tomar cualquier valor propio del usuario, o valores HTML predefinidos.La etiqueta de final est delimitada por los caracteres . Est compuesta por el identificador o nombre de la etiqueta, y no contiene atributos. Su sintaxis es: < /identificador > Cada uno de los elementos de la pgina se encontrar entre una etiqueta de comienzo y su correspondiente etiqueta de cierre, a excepcin de algunos elementos que no necesitan etiqueta de cierre. Tambin es posible anidar etiquetas, es decir, insertar etiquetas entre otras etiquetas de comienzo y de cierre.A continuacin tenemos un ejemplo en el que tenemos la etiqueta < Font > anidada dentro de la etiqueta < p >.: Bienvenidos a www.aulaclic.com Este cdigo dara como resultado el siguiente texto:Bienvenidos a www.aulaclic.comEs importante anidar bien las etiquetas, las etiquetas no se pueden 'cruzar', en nuestro ejemplo hemos empezado por la etiqueta , antes de cerrar esta etiqueta hemos puesto la Por lo que antes de cerrar la etiqueta debemos cerrar la etiqueta .Introduccin al Bloc de notasArrancar y cerrar el Bloc de notasVeamos las dos formas bsicas de arrancar el Bloc de notas.Desde el botn Inicio situado, normalmente, en la esquina inferior 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 ordenador, buscar Accesorios, seguidamente Bloc de notas, hacer clic sobre l, y se arrancar el programa.Desde el icono del Bloc de notas del escritorio .Para cerrar el Bloc de notas, puedes utilizar cualquiera de las siguientes operaciones: Hacer clic en el botn cerrar Pulsar la combinacin de teclas ALT+F4. 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 notasSiempre 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 y guardar documentosPara abrir un documento, puedes utilizar cualquiera de las siguientes operaciones una vez abierto el Bloc de notas. Pulsar la combinacin de teclas Ctrl+A. Hacer clic sobre el men Archivo y elegir la opcin Abrir.Nota: 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 archivo para visualizarlos todos y poder ver as nuestras pginas.Para abrir un documento nuevo, puedes utilizar cualquiera de las siguientes operaciones.Pulsar la combinacin de teclas Ctrl+N. Hacer clic sobre el men Archivo y elegir la opcin Nuevo.Para guardar un documento, puedes utilizar cualquiera de las siguientes operaciones. Pulsar la combinacin de teclas Ctrl+G. 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 mipagina.htm.Compaginar dos sesiones Aqu te explicaremos cmo conseguir tener la pantalla dividida en dos partes, una con el curso y otra con el Bloc de notas. 1 Se supone que la sesin con el curso est abierta. 2 Abrir la sesin del Bloc de notas. 3 Pulsar con el botn derecho sobre cualquier parte vaca de la barra de tareas, en la parte inferior de la pantalla. Es la barra en la que se encuentra el botn Inicio.4 Elegir la opcin Mosaico vertical. Observa como la pantalla ha quedado dividida en dos partes, como en la figura: 5 Una vez tenemos las dos sesiones con el tamao adecuado, basta hacer clic con el ratn para pasar de la una a la otra. Para volver a dejar las ventanas con su tamao normal, hacer clic en el botn Maximizar . Esto va bien con monitores grandes (de 17" o ms), con monitores pequeos quizs prefieras dejar las ventanas con su tamao normal e ir pasando de una a otra presionando las teclas Alt + tabulador (manteniendo pulsada Alt, presionar la tecla tabulador) o pulsando el botn correspondiente a la sesin en la barra de tareas en la ltima lnea de la pantalla.Compaginar dos sesiones puede resultarte muy til al realizar los ejercicios. Puedes cargar un documento en el Bloc de notas y en un navegador al mismo tiempo. Cada vez que realices algn cambio en el cdigo del Bloc de notas y guardes los cambios, puedes actualizar la pgina cargada en el navegador para ver los cambios que ha sufrido por las modificaciones en el cdigo.Para actualizar una pgina en Internet Explorer puedes pulsar sobre el botn .Unidad 1.Introduccin a HTML (III)Para que te vayas haciendo una idea de cmo crear una pgina html a travs del Bloc de notas, vamos a crear una pgina web sencilla, con una lnea de texto.Mi primera pginaLo primero que tienes que hacer es abrir el Bloc de notas. Para abrirlo, puedes dirigirte al men Inicio, Programas, Accesorios, opcin Bloc de notas.Seguidamente introduce, en el documento en blanco, el texto siguiente:html>MI PRIMERA PAGINAHola, estoy haciendo pruebas.Guarda el documento con la extensin htm, con el nombre miprimpag.htm. Puedes guardarlo a travs del men Archivo, opcin Guardar.Pulsando dos veces sobre el icono del archivo miprimpag.htm, ste debera abrirse automticamente en el navegador que tengas instalado en tu ordenador.El navegador deber mostrar una pgina como la de abajo.Como puedes ver, la pgina resultante es una pgina que solamente tiene una lnea de texto.Si observas la barra de ttulo del navegador, vers que el ttulo de la pgina es MI PRIMERA PAGINA. Este ttulo ha sido establecido por la lnea MI PRIMERA PAGINA .El color de fondo de la pgina ha sido establecido por la lnea .El texto Hola, estoy haciendo pruebas. Se ha insertado a travs de lnea Hola, estoy haciendo pruebas.. Prueba evaluativa del Tema 1.Prueba evaluativa de la unidad 1. Introduccin a HTMLSolo una respuesta es vlida por pregunta.Haz clic en la respuesta que consideres correcta. Contesta todas las preguntas y haz clic en el botn Resultados para ver la solucin.1. Un documento de hipertexto solo se compone de texto. a) Verdaderob) Falso2. Los navegadores se encargan de interpretar el cdigo HTML de los documentos.a) Verdaderoa) Falso3. El nuevo comit encargado de establecer los estndares del HTML es el W3C. a) Verdaderoa) Falso4. Los navegadores tienen que ser compatibles con la ltima versin HTML para poder insertar imgenes.a) Verdaderoa) Falso5. Siempre que escribimos una etiqueta debemos escribir su correspondiente etiqueta de cierre.a) Verdaderoa) Falso6. Si un navegador no reconoce una etiqueta.a) la cambia por otrab) la ignorac) muestra una imagen en su lugar7. Para realizar las extensiones de los navegadores ...a) se aaden nuevos atributos y etiquetasb) se crean nuevos editores visualesc) se utilizan editores de texto8. Existen dos tipos de etiquetas:a) La de comienzo de elemento y la de fin de pginab) La de comienzo de elemento y la de atributoc) La de comienzo de elemento y la de fin o cierre de elemento9. El cdigo de todas las pginas:a) Puede ser interpretado completamente por todos los navegadores.b) No puede ser interpretado completamente por todos los navegadores.c) Cualquiera de las dos primeras opciones.d) Ninguna de las opciones anteriores.10. Los editores visualesa) Pueden generar cdigo basura.b) Permiten crear pginas web sin la necesidad de escribir ni una sola lnea de cdigo HTML.c) Cualquiera de las dos primeras opciones.d) Ninguna de las opciones anteriores.RESULTADOSUnidad 2.Estructura de una pgina (I)A lo largo de este tema vamos a aprender a crear una pgina bsica.La estructura bsica de una pgina es:...................Ahora veamos cmo funcionan estas etiquetas. Identificador del tipo de documento Todas las pginas web escritas en HTML tienen que tener la extensin html o htm. Al mismo tiempo, tienen que tener las etiquetas y . Entre las etiquetas y estar comprendido el resto del cdigo HTML de la pgina.Por ejemplo:...........Cabecera de la pgina La cabecera de la pgina se utiliza para agrupar informacin sobre ella, como puede ser el ttulo. Est formada por las etiquetas y . La etiqueta va justo debajo de la etiqueta .Por ejemplo:......Entre las etiquetas y , las etiquetas que podemos encontrar y ms se utilizan son: , , (estas etiquetas las veremos ms adelante), (si deseas saber para qu sirve y cmo utilizar esta etiqueta, consltalo aqu ) y la etiqueta que te explicamos a continuacin.Ttulo de la pgina El ttulo de la pgina es el que aparecer en la parte superior de la ventana del navegador, cuando la pgina est cargada en l.Para asignar un ttulo a una pgina es necesario escribir el texto deseado entre las etiquetas y .Estas etiquetas han de estar dentro de la cabecera, es decir, entre las etiquetas y .Por ejemplo:Curso de HTML...La etiqueta La etiqueta se utiliza para aadir informacin sobre la pgina. Esta informacin puede ser utilizada por los buscadores.Los buscadores consultan la informacin de la etiqueta de las pginas, buscando coincidencias con lo que el usuario pretende encontrar.A travs de esta etiqueta pueden especificarse los atributos name y content. El atributo name indica el tipo de informacin, y el atributo content indica el valor de dicha informacin.Para indicar el tipo de informacin podemos utilizar cualquier palabra que deseemos, como puede ser "Autor", "Palabras clave", "Descripcin", etc. Pero debido a que la mayora de buscadores estn en ingls, es preferible que el tipo de informacin se especifique en ingls.Los tipos de informacin ms utilizados son los siguientes:TipoSignificadoauthorAutor de la pginaclassificationPalabras para clasificar la pgina en los buscadoresdescriptionDescripcin del contenido de la pginageneratorPrograma utilizado para crear la pginakeywordsPalabras claveLa etiqueta no necesita etiqueta de cierre. Para cada etiqueta solo es posible indicar un tipo de informacin y su valor, pero es posible insertar varias etiquetas en un mismo documento.La etiqueta ha de estar entre las etiquetas y .Por ejemplo, el siguiente cdigo indica que el autor de la pgina es aulaclic, que la pgina trata sobre un curso de HTML gratuito, y especifica algunas palabras clave a ser consultadas por los buscadores:......La etiqueta tambin se utiliza para indicarle al navegador alguna informacin o alguna accin que debe realizar. En este caso se utiliza el atributo http-equiv, en lugar del atributo name.Por ejemplo, imaginemos que por algn motivo queremos que nuestra pgina se actualice automticamente cada 30 segundos. En ese caso, deberamos utilizar la accin Refresh (actualizar). Podramos utilizar el siguiente cdigo:......Ahora imaginemos que hemos cambiado la direccin en la que se encuentra nuestra pgina web, y queremos que cuando algn usuario visite la pgina en la direccin antigua, a los 5 segundos el navegador lo redirija automticamente a la direccin nueva. En ese caso podramos insertar el siguiente cdigo en la pgina que se encuentra en la direccin antigua:......De este modo, el navegador realizara la funcin de actualizar la pgina, pero cargando la que se encontrara en la nueva direccin (URL=http://www.aulaclic.com/index.htm).Unidad 2.Estructura de una pgina (II)Cuerpo del documento El cuerpo del documento contiene la informacin propia del documento, es decir lo que queremos que se visualice, el texto de la pgina, las imgenes, los formularios, etc.Todos estos elementos tienen que encontrarse entre las etiquetas y , que van justo debajo de la cabecera.Por ejemplo:Curso de HTML...A travs de la etiqueta es posible establecer el color o la imagen de fondo de la pgina.El color de fondo puede establecerse a travs del atributo bgcolor, al que es posible asignarle un color representado en hexadecimal o por un nombre predefinido.Si no sabes cmo representar los colores en hexadecimal, o a qu nmero o nombre se corresponde cada uno de ellos, puedes consultarlo aqu. Por ejemplo, para hacer que el color de fondo de una pgina sea de color azul, tendremos que escribir:......Sera equivalente a poner:......La imagen de fondo puede establecerse a travs del atributo background, indicando la ruta en la que se encuentra la imagen.Por ejemplo, para hacer que la imagen de fondo de una pgina sea la imagen fondo.gif, que se encuentra en el mismo directorio en el que se encuentra guardada la pgina, tendremos que escribir:......En el caso de que la imagen no se encuentre en el mismo directorio que la pgina, y se encuentre dentro de la carpeta imgenes, que s se encuentra en el mismo directorio que la pgina, tendremos que escribir:......A travs de la etiqueta tambin es posible establecer el color del texto de la pgina a travs del atributo text.Por ejemplo, para hacer que el color del texto de una pgina sea de color rojo, tendremos que escribir:......Entre el borde de la ventana y el contenido de la pgina existe un margen, cuyo tamao en pxeles puede modificarse mediante los atributos leftmargin (margen izquierdo) y topmargin (margen superior). Estos atributos no funcionan para el navegador Netscape, pero s los atributos marginwidth (anchura del margen) y marginheight (altura del margen). Estos atributos suelen utilizarse para eliminar el margen, para lo cual deben valer cero.Por ejemplo, para hacer que una pgina no tenga margen superior, y tenga un margen izquierdo de 20 pxeles, tendremos que escribir:......Para practicar los distintos aspectos explicados en el tema puedes realizar el Ejercicio paso a paso Crear una pgina bsica. Ejercicio paso a paso. Crear una pgina bsicaPracticar las operaciones que hay que realizar para crear una pgina bsica.Si es la primera vez que realizas el ejercicio, haz clic aqu para descargarte la carpeta de ejercicios, debers extraer los archivos en la carpeta Mis documentos de tu disco duro, ah se crear una carpeta ejercicios_html.A lo largo del curso vamos a crear tres sitios web, cada sitio lo guardaremos en una carpeta dentro de ejercicios_html.En esa carpeta tenemos:La carpeta animales, donde guardaremos los archivos de un sitio web de una asociacin ficticia de veterinarios que iremos creando a lo largo de los ejercicios paso a paso.La carpeta deportes, donde guardaremos los archivos de un sitio web de una cadena de centros deportivos que iremos creando a lo largo de los ejercicios propuestos.La carpeta flores, donde guardaremos los archivos de un sitio web de una floristera que iremos creando a lo largo de los ejercicios propuestos.Cada carpeta contiene a su vez una carpeta imgenes y una carpeta varios donde iremos guardando las imgenes y ficheros varios respectivamente.Una vez tenemos nuestros sitios organizados, podemos empezar a practicar.1 Si no tienes abierto el Bloc de notas, brelo para realizar el primer ejercicio. 2 Escribe el cdigo que aparece a continuacin:InicioCon este cdigo estars creando un documento con el ttulo "Inicio", y con el color de fondo verde (#99CC99).3 Haz clic sobre el men Archivo.4 Haz clic sobre la opcin Guardar como. Se abrir el cuadro de dilogo Guardar como.5 En el recuadro Tipo: elige Todos los archivos.6 Guarda el documento con el nombre inicio.htm, dentro de la carpeta Mis documentos/ejercicios_html/animales de tu disco duro. 7 Abre el documento que acabas de crear en un navegador, y comprueba que obtienes una pgina como la que aqu. Fjate en el color de fondo de la pgina y en la barra de ttulo. Ejercicios del Tema 2. Prueba evaluativa del Tema 2.Ejercicios Unidad 2. Estructura de una pginaSi no tienes abierto el Bloc de notas, brelo para realizar los ejercicios planteados a continuacin.Ejercicio 1: Deportes. 1 Abrir el documento quienes.htm, de la carpeta originales/deportes del curso.2 Guardar la pgina con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/deportes. 3 Establecer #0099CC como color de fondo y 40 como tamao de los mrgenes.4 Guardar los cambios y comprobar el funcionamiento con tu navegador, no te preocupes por el formato del texto, lo arreglars en el tema siguiente.Ejercicio 2: Flores. 1 Copiar la imagen fondo.gif que encontrars en la carpeta originales/flores/imagenes a tu carpeta Mis documentos/ejercicios_html/flores/imagenes2 Copiar el documento inicio.htm, de la carpeta originales/flores a tu carpeta Mis documentos/ejercicios_html/flores. 3 Abrir el documento Mis documentos/ejercicios_html/flores/inicio.htm con el Bloc de notas.4 Establecer como imagen de fondo la imagen fondo.gif de la carpeta ejercicios_html/flores/imagenes.5 Guardar los cambios y comprobar el funcionamiento en tu navegador.Prueba evaluativa de la unidad 2.Estructura de una pginaSolo una respuesta es vlida por pregunta.Haz clic en la respuesta que consideres correcta. Contesta todas las preguntas y haz clic en el botn Resultados para ver la solucin.1. Las pginas web escritas en HTML tienen que tener la extensin html o htm.a) Verdaderob) Falso2. El cdigo de las pginas estar comprendido entre las etiquetas y .a) Verdaderob) Falso3. El ttulo de una pgina se establece dentro de la cabecera.a) Verdaderob) Falso 4. El margen que hay entre el borde de la ventana y el contenido de la pgina no puede modificarse.a) Verdaderob) Falso 5. Puede establecerse una imagen de fondo a travs del atributo background.a) Verdaderob) Falso6. Las etiquetas y van.a) Justo encima de la cabecera.b) Dentro de la cabecera.c) Justo debajo de la cabecera.7. Es posible definir el color de la fuente del documento mediante.a) la etiqueta .b) el atributo bgcolor.c) el atributo text.8. Los atributos leftmargin y topmargin.a) no funcionan en Internet Explorer.b) no funcionan en Netscape.c) funcionan en todos los navegadores.9. El color de fondo de una pgina.a) se especifica en la etiqueta . b) puede establecerse a travs del atributo bgcolor.c) las dos afirmaciones anteriores son verdaderas.d) las tres afirmaciones anteriores son falsas.10. Los colores se representan en.a) binario.b) decimal. c) las dos afirmaciones anteriores son verdaderas.d) las tres afirmaciones anteriores son falsas.RESULTADOSAyuda Ejercicios Unidad 2. Crear sitio local y modificar las propiedades de la pginaEjercicio 1: Deportes Apartado 1 Hacer clic sobre el men Archivo, y elegir la opcin Abrir.En la nueva ventana, elegir Todos los archivos en Tipo:.Seleccionar el documento quienes.htm, de la carpeta deportes.Pulsar sobre el botn Abrir.Apartado 2 Hacer clic sobre el men Archivo, y elegir la opcin Guardar como.En la nueva ventana, elegir la carpeta ejercicios_html/deportes.Dejar el mismo nombre de documento quienes.htm.Pulsar sobre el botn Guardar.Apartado 3 Buscar la etiqueta .Sustituirla por .Apartado 4 Hacer clic sobre la opcin Guardar, del men Archivo.Abrir el documento quienes.htm en un navegador y comprobar que el fondo de la pgina es de color azul.Ejercicio 2: Flores Apartado 3 Hacer clic sobre el men Archivo, y elegir la opcin Abrir.En la nueva ventana, elegir Todos los archivos en Tipo:Seleccionar el documento inicio.htm, de la carpeta ejercicios_html/flores.Pulsar sobre el botn Abrir.Apartado 4 Buscar la lnea en la que aparezca de cierre de la etiqueta body.Apartado 5 Hacer clic sobre la opcin Guardar, del men Archivo.Abrir el documento inicio.htm en un navegador, y comprobar el fondo de la pgina es de color rosa, con flores.Colores en hexadecimalLos colores en HTML se representan mediante un nmero hexadecimal.Un nmero hexadecimal se diferencia de un nmero decimal en que no slo puede tomar valores del 0 al 9, sino que puede tomar hasta diecisis valores distintos, que van del 0 al 9, y de la A a la F.Cada color estar representado por un grupo de seis dgitos en hexadecimal, precedidos por una almohadilla, como por ejemplo #FFFFFF. Existen 216 colores seguros para web. stos son los colores que se muestran de la misma forma en Microsoft Internet Explorer y en Netscape Navigator, tanto en Windows como en Macintosh.Tambin podemos personalizar nuestros propios colores, modificando los valores de cada uno de los dgitos que forman parte del nmero hexadecimal.A continuacin se muestran los 216 colores seguros para web, para que puedas consultarlos cuando lo necesites.#000000#000033#000066#000099#0000CC#0000FF#003300#003333#003366#003399#0033CC#0033FF#006600#006633#006666#006699#0066CC#0066FF#009900#009933#009966#009999#0099CC#0099FF#00CC00#00CC33#00CC66#00CC99#00CCCC#00CCFF#00FF00#00FF33#00FF66#00FF99#00FFCC#00FFFF#330000#330033#330066#330099#3300CC#3300FF#333300#333333#333366#333399#3333CC#3333FF#336600#336633#336666#336699#3366CC#3366FF#339900#339933#339966#339999#3399CC#3399FF#33CC00#33CC33#33CC66#33CC99#33CCCC#33CCFF#33FF00#33FF33#33FF66#33FF99#33FFCC#33FFFF#660000#660033#660066#660099#6600CC#6600FF#660033#663333#663366#663399#6633CC#6633FF#666600#666633#666666#666699#6666CC#6666FF#669900#669933#669966#669999#6699CC#6699FF#66CC00#66CC33#66CC66#66CC99#66CCCC#66CCFF#66FF00#66FF33#66FF66#66FF99#66FFCC#66FFFF#990000#990033#990066#990099#9900CC#9900FF#993300#993333#993366#993399#9933CC#9933FF#996600#996633#996666#996699#9966CC#9966FF#999900#999933#999966#999999#9999CC#9999FF#99CC00#99CC33#99CC66#99CC99#99CCCC#99CCFF#99FF00#99FF33#99FF66#99FF99#99FFCC#99FFFF#CC0000#CC0033#CC0066#CC0099#CC00CC#CC00FF#CC3300#CC3333#CC3366#CC3399#CC33CC#CC33FF#CC6600#CC6633#CC6666#CC6699#CC66CC#CC66FF#CC9900#CC9933#CC9966#CC9999#CC99CC#CC99FF#CCCC00#CCCC33#CCCC66#CCCC99#CCCCCC#CCCCFF#CCFF00#CCFF33#CCFF66#CCFF99#CCFFCC#CCFFFF#FF0000#FF0033#FF0066#FF0099#FF00CC#FF00FF#FF3300#FF3333#FF3366#FF3399#FF33CC#FF33FF#FF6600#FF6633#FF6666#FF6699#FF66CC#FF66FF#FF9900#FF9933#FF9966#FF9999#FF99CC#FF99FF#FFCC00#FFCC33#FFCC66#FFCC99#FFCCCC#FFCCFF#FFFF00#FFFF33#FFFF66#FFFF99#FFFFCC#FFFFFFExiste otra forma de representar algunos colores, sin la necesidad de utilizar nmeros en hexadecimal. Estos colores pueden representarse por su nombre, y son los siguientes:ColorHexadecimalNombre#FFFFFFwhite#000000black#000080navy#0000FFblue#008000green#008080teal#00FF00lime#00FFFFaqua#800000maroon#800080purple#808000olive#808080gray#C0C0C0silver#FF0000red#FF00FFfuchsia#FFFF00yellowUnidad 3.El texto (I)A lo largo de este tema vamos a aprender a cambiar las propiedades del texto, as como a insertar caracteres especiales o separadores.Caracteres especiales y espacios en blancoLos caracteres < y > son dos caracteres especiales que indican inicio y fin de etiqueta. Si se desea insertar estos caracteres como texto hay que escribir el nombre que los representa:< Se representa con Se representa con >Existen otra serie de caracteres que no se visualizan correctamente en algunos navegadores, como es el caso de la y las letras acentuadas, por lo que al igual que ocurre con los caracteres especiales < y >, para insertarlos como texto habra que escribir el nombre que los representa.A continuacin se muestra una lista con algunos caracteres y el nombre con el que han de ser representados:CarcterRepresentacin>CarcterRepresentacin&&""Siempre que se inserta texto en HTML hay que tener en cuenta que si se escriben varios espacios en blanco seguidos solamente se mostrar uno en el navegador. Para conseguir que se muestren varios espacios en blanco seguidos puede sustituirse cada uno de ellos por .Por ejemplo, para insertar el texto:Bienvenidos, esta es mi1pgina!Habra que escribir:Bienvenidos, esta es mi1pgina!ComentariosEn ocasiones podemos desear aadir comentarios aclaratorios dentro del cdigo, de manera que no sean visualizados en el navegador, pero s a la hora de editar el documento.Para insertar comentarios dentro del cdigo, basta con insertar el texto entre .Todo el cdigo que se inserte entre estos smbolos no ser visualizado en los navegadores.Por ejemplo, para insertar el texto siguiente con un comentario:Bienvenidos, esta es mi 1 pgina!Habra que escribir:Bienvenidos, esta es mi 1 pgina!Saltos de lnea
En general, cuando trabajamos con un editor de texto se produce un salto de lnea al pulsar la tecla INTRO.Si pulsamos INTRO en un documento HTML, el salto de lnea se producir en el cdigo, pero no se mostrar en el navegador. Para que se produzca el salto de lnea en el navegador, en lugar de pulsar la tecla INTRO hay que insertar la etiqueta
donde se desee que se produzca el salto.La etiqueta
no precisa ninguna etiqueta de cierre. No hay que insertar la etiqueta despus de ella, ya que dicha etiqueta no existe.Por ejemplo, para insertar el texto:Queridos usuarios, tengo el placer de comunicaros que hay una nueva seccin.Habra que escribir:Queridos usuarios,
tengo el placer de comunicaros que hay una nueva secci&oacuten.Unidad 3.El texto (II)Texto preformateado Una forma de asegurarnos de que el texto aparezca en el navegador tal cual ha sido insertado dentro del cdigo, es utilizando las etiquetas y .Utilizando estas etiquetas podemos tener la seguridad de que en el navegador se mostrarn todos los espacios en blanco que se inserten en el texto, as como todos los saltos de lnea resultantes de pulsar la tecla INTRO, sin la necesidad de utilizar la etiqueta
.Por ejemplo, para insertar el texto:Hola, BIENVENIDOSesta ES MI PGINA WEB y esto un texto preformateadoHabra que escribir: Hola,BIENVENIDOSestaES MI PGINA WEBy esto un texto preformateado El inconveniente de esta etiqueta es que entre las etiquetas y no se pueden incluir las etiquetas (para incluir imgenes), (para incluir objetos como animaciones), , , ni (las veremos en este tema). Separadores El elemento que suele utilizarse para separar secciones dentro de una misma pgina es la regla horizontal. Para insertar una regla horizontal hay que insertar la etiqueta . Dicha etiqueta no precisa ninguna etiqueta de cierre.Es posible especificar algunos atributos de la regla horizontal:AtributoSignificadoPosibles valoresalignalineacin de la regla dentro de la pginaleft (izquierda)right (derecha)center (centro)widthancho de la reglaun nmero, acompaado de % cuando se desee que sea en porcentajesizealto de la reglaun nmeronoshadeeliminar el sombreado de la reglano puede tomar valoresPor ejemplo, para insertar el texto y la regla horizontal siguientes:Inicio Bienvenidos a mi pgina.Habra que escribir:InicioBienvenidos a mi pgina.Sangrado de texto La sangra es una especie de margen que se establece a ambos lados del texto. Para que un texto aparezca sangrado, se inserta entre las etiquetas y .Esta etiqueta en un principio se defini para delimitar citas pero que como la mayora de los navegadores resuelven la cita incluyendo un sangrado del texto, su uso para sangrar texto se ha generalizado.El uso de la etiqueta obliga a que el texto aparezca en una nueva lnea.Insertando el texto entre varias etiquetas y se consigue que los mrgenes sean mayores.Por ejemplo, para insertar el texto:Queridos usuarios, tengo el placer de comunicaros que hay una nueva seccin.Habra que escribir:Queridos usuariotengo el placer de comunicaros que hay una nueva secci&oacuten.Unidad 3.El texto (III)Formatear el texto ...Las propiedades del texto pueden modificarse a travs de la etiqueta . Para ello, podemos insertar el texto entre las etiquetas y , especificando algunos de los atributos de la etiqueta:AtributoSignificadoPosibles valoresfacefuentenombre de la fuente, o fuentescolorcolor del textonmero hexadecimal o texto predefinidosizetamao del textovalores del 1 al 7, siendo por defecto el 3,o desplazamiento respecto al tamao por defecto,aadiendo + o - delante del valorPor ejemplo, para insertar el texto:Bienvenidos a www.aulaclic.comHabra que escribir:Bienvenidos a www.aulaclic.com Tambin es posible definir una fuente para todo el documento. Para ello, hay que insertar la etiqueta despus de la etiqueta .La etiqueta no necesita una etiqueta de cierre, y permite modificar los mismos atributos del texto que la etiqueta .Por ejemplo:...Este cdigo hara que la fuente del documento fuera por defecto de color azul, de tamao 4 y Arial. Si despus de indicar la etiqueta o , el navegador encuentra otra etiqueta , la que prevalece es siempre la ltima que se encuentra.Resaltado del texto ...Este cdigo hara que la fuente del documento fuera por defecto de color azul, de tamao 4 y Arial. Si despus de indicar la etiqueta o , el navegador encuentra otra etiqueta , la que prevalece es siempre la ltima que se encuentra.A continuacin se muestran algunas etiquetas asociadas al tipo de letra:EtiquetaSignificadoEjemplonegritacurso HTML aulacliccursivacurso HTML aulaclicsubrayadocurso HTML aulaclictachadocurso HTML aulaclicteletipo (mquina de escribir)curso HTML aulaclicaumenta el tamao de la fuentecurso HTML aulaclicdisminuye el tamao de la fuentecurso HTML aulaclicA continuacin se muestran algunas etiquetas asociadas al tipo de informacin:EtiquetaSignificadoEjemplocitacurso HTML aulaclicejemplo de cdigocurso HTML aulaclicdefinicincurso HTML aulacliceliminadocurso HTML aulaclicnfasiscurso HTML aulaclicinsertadocurso HTML aulaclictecladocurso HTML aulaclicmuestracurso HTML aulaclicdestacadocurso HTML aulaclicsubndicecurso HTML aulaclicsuperndicecurso HTML aulaclicvariablecurso HTML aulaclicLas etiquetas ms utilizadas son las asociadas al tipo de letra, ya que son ms fciles de recordar, y en muchos casos los resultados son los mismos que los de aplicar una etiqueta diferente. Por ejemplo, el resultado de aplicar las etiquetas y es el mismo. Incluso a veces algunos estilos asociados al tipo de informacin pueden representarse de forma distinta segn el navegador.Por ejemplo, para insertar el texto:Bienvenidos a www.aulaclic.comHabra que escribir:Bienvenidos a www.aulaclic.comUnidad 3.El texto (IV)Prrafos ...El texto de una pgina puede agruparse en prrafos. Para ello, el texto de cada uno de los prrafos debe insertarse entre las etiquetas y .No es necesario insertar la etiqueta
para que un nuevo prrafo aparezca debajo del anterior, ya que las etiquetas y hacen que se cambie de lnea automticamente.Tambin es posible cambiar la alineacin del texto de cada prrafo. Para ello se modifica el valor del atributo align, cuyos valores pueden ser left (izquierda), right (derecha), center (centrado) o justify (justificado).Por ejemplo, para insertar el texto:Bienvenidos a mi pgina.Aqu encontraris cursos de formacin muy interesantes.Habra que escribir:Bienvenidos a mi p&aacutegina.Aqu&iacute encontrar&eacuteis cursos de formaci&oacuten muy interesantes.Otra forma de cambiar la alineacin del texto es mediante las etiquetas y , para las que tambin existe el atributo align. La etiqueta , al igual que la etiqueta , se utiliza para agrupar bloques de texto, pero con la diferencia de que la separacin entre ellos es menor.Por ejemplo, para insertar el texto:Bienvenidos a mi pgina.Aqu encontraris cursos de formacin muy interesantes.Habra que escribir:Bienvenidos a mi p&aacutegina.Aqu&iacute encontrar&eacuteis cursos de formaci&oacuten muy interesantes.Tambin es posible insertar el texto entre las etiquetas y para que aparezca centrado.Por ejemplo, para insertar el texto:Bienvenidos a mi pgina.Habra que escribir:Bienvenidos a mi p&aacutegina.Otro par de etiquetas que permiten agrupar bloques de texto, pero que no implican el cambio de lnea (como en el caso de y ), son las etiquetas y volveremos a hablar de estas etiquetas cuando veamos las hojas de estilo.Encabezados ...Existen una serie de encabezados que suelen utilizarse para establecer ttulos dentro de una pgina. La diferencia entre los distintos tipos de encabezado es el tamao de la letra, el tipo de resaltado, y la separacin existente entre el texto y los elementos que tiene encima y debajo de l. Hay que tener en cuenta que el navegador del usuario es el que aplicar el estilo del encabezado por lo que el mismo ttulo se puede visualizar de forma diferente segn el navegador.Existen seis etiquetas que representan seis tipos de cabeceras distintas. Todas estas etiquetas precisan una etiqueta de cierre.A continuacin se muestran los distintos encabezados existentes:EtiquetaEjemploTtulo 1: HTMLTtulo 2: HTMLTtulo 3: HTMLTtulo 4: HTMLTtulo 5: HTMLTtulo 6: HTMLPara todas estas etiquetas es posible especificar el valor del atributo align.Por ejemplo, para insertar el texto:El lenguaje HTMLApartado 1: Las etiquetasHabra que escribir:El lenguaje HTMLApartado 1: Las etiquetasMarquesinas Las marquesinas son lneas de texto que pueden desplazarse de un lado a otro de la ventana en forma de lnea.Para insertar una marquesina, es necesario insertar el texto entre las etiquetas y .La marquesina, por defecto, se desplaza de derecha a izquierda indefinidamente, pero si lo deseas puedes hacer que estas propiedades varen.A travs del atributo behavior puede modificarse el tipo de movimiento. Puede tomar los valores alternate (de lado a lado de la ventana, como si rebotara en los extremos), scroll (de un lado a otro, continuamente) o slide (de un lado a otro, pero una sola vez).A travs del atributo direction puede modificarse la direccin en la que se mover el texto. Puede tomar los valores down (de arriba a abajo), up (de abajo a arriba), left (de derecha a izquierda) o left (de izquierda a derecha).Tambin es posible establecer un color de fondo, a travs del atributo bgcolor.Por ejemplo, para insertar la siguiente marquesina:Habra que escribir:Esto es una marquesina Tambin es posible insertar imgenes, tablas y otros elementos entre las etiquetas y , no solamente texto.Si quieres saber cmo crear listas, consltalo aqu . Las listas ...Elemento de lista Cada uno de los elementos de una lista ha de insertarse entre las etiquetas y .Por ejemplo, para insertar en una lista los siguientes elementos: Perro Gato Periquito Habra que escribir: ...PerroGatoPeriquito...Todos los elementos de la lista debern encontrarse entre las etiquetas que indiquen si la lista es desordenada (con vietas) u ordenada (numerada) como veremos a continuacin.Lista desordenada Para que una lista sea desordenada, sus elementos debern encontrarse entre las etiquetas y .A travs del atributo type es posible elegir el tipo de vieta, que puede ser circle (crculo), disc (disco) o square (cuadrado).Por ejemplo, para insertar la siguiente lista: Perro Gato Periquito Habra que escribir:GatoPeriquitoLista ordenada Para que una lista sea ordenada, sus elementos debern encontrarse entre las etiquetas y .A travs del atributo type es posible elegir el tipo de numeracin, que puede ser 1 (nmeros), a (letras minsculas), A (letras maysculas), i (nmeros romanos en minsculas) o I (nmeros romanos en maysculas).Por ejemplo, para insertar la siguiente lista:i. Perro ii. Gato iii. Periquitoiv. Habra que escribir:PerroGatoPeriquitoAnidar listasEs posible anidar listas dentro de otras. Estas listas pueden ser tanto desordenadas como ordenadas.Por ejemplo, para insertar la siguiente lista:1. Lunes Ingles Francs 2. Martes 3. Ingles A. Correccin de ejercicios B. Proponer ejerciciosHabra que escribir:LunesInglesFrancesMartesInglesCorreccion de ejerciciosProponer ejercicios Empezamos por la lista ordenada (la ms externa) , esta lista tiene dos elementos Lunes y Martes.El elemento Lunes contiene una lista desordenada con tipo cuadrado que tiene dos elementos Ingles y Frances.El elemento Martes contiene una lista ordenada de un slo elemento Ingles elemento que contiene a su vez una lista desordenada de tipo letras maysculas con los dos elementos Correccion de ejercicios y Proponer ejercicios Para practicar los distintos aspectos explicados en el tema puedes realizar el Ejercicio paso a paso Insertar texto con diferentes propiedades. Ejercicio pas a paso. Insertar texto con diferentes propiedadesObjetivo. Practicar las operaciones que hay que realizar para insertar texto especificando sus propiedades. Ejercicio 1. 1 Si no tienes abierto el Bloc de notas, brelo para realizar el ejercicio.2 Abre el archivo inicio.htm, que creaste en el tema anterior y que se encuentra en la carpeta ejercicios_html/animales.3 Inserta una lnea en blanco debajo de la etiqueta , y escribe el siguiente cdigo en ella:Con este cdigo estars estableciendo el color rojo (#FF0000) y tamao 1 para el texto del documento.Si guardas ahora los cambios y visualizas la pgina, no vers ningn cambio ya que la pgina no tiene texto.4 Detrs de la etiqueta inserta una lnea en blanco, y escribe el siguiente texto: Inicio5 Guarda el archivo y visualzalo en tu navegador, el texto debe aparecer en rojo y pequeo.Dejaremos la pgina un poco ms discreta y cambiaremos el color del texto a verde oscuro (#003333) y subiremos el tamao de las letras.6 Rectifica la etiqueta para que quede as:Con este cdigo estars estableciendo el color verde oscuro (#003333) y tamao 4 para el texto del documento.7 Guarda el archivo y visualzalo en tu navegador, observa los cambios.8 Encierra el texto Inicio entre etiquetas de la siguiente forma:InicioCon este cdigo estars convirtiendo el texto en un encabezado de primer nivel.9 Guarda el archivo y visualzalo en tu navegador, observa los cambios, el texto aparece destacado y ms grande.10 Inserta una lnea en blanco debajo del cdigo anterior, y escribe la etiqueta .Con esta etiqueta estars insertando una regla horizontal.11 Guarda el archivo y visualzalo en tu navegador, observa la regla12 Inserta una lnea en blanco debajo de la etiqueta anterior, y escribe el siguiente cdigo en ella: Somos una asociacin de veterinarios, estudiantes de veterinaria, o simplemente amantes de los animales.
Desde esta pgina web intentaremos resolver tus dudas acerca de cmo cuidar a tus mascotas.Con este cdigo estars insertando un prrafo () dividido en dos lneas (
).Este prrafo estar alineado a la izquierda (align="left"), aparecer en cursiva () y tendr doble sangrado ().13 Guarda el archivo y visualzalo en tu navegador, comprueba que obtienes una pgina como la que aparece si aqu. Para apreciar mejor el efecto del prrafo ves cambiando el tamao de la ventana de tu navegador y vers cmo el texto se va escribiendo en ms lneas pero siempre alineado a la izquierda y saltando de lnea despus de la primera frase.Ejercicio 2. 1 Abre el documento gatos.htm, de la carpeta originales/animales del curso.2 Guarda la pgina con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/animalesVamos a modificar la pgina para que tenga el siguiente aspecto:1 Empezamos por darle a la palabra Gatos un estilo de encabezado 1: GatosSi quieres puedes ir observando los cambios segn los vayas introduciendo, guardando sin cerrar el bloc de notas y visualizando la pgina cada vez (la primera vez abres el explorador con la pgina gatos.htm y despus de ver el efecto, en vez de cerrar la ventana del explorador la dejas abierta, as cuando hayas hecho el siguiente cambio en la pgina podrs volver a la sesin del explorador con la pgina gatos.htm y despus de hacer clic en el botn Actualizar de tu navegador vers mejor el efecto producido por el cambio que has incorporado a la pgina).2 Detrs aadimos una regla con la etiqueta .3 Aadimos una lnea en blanco con
4 La pregunta queda sangrada con respecto al resto del texto, la colocamos dentro de una etiqueta y adems le asignamos un estilo de encabezado 3:COMO PREVENIR LOS PROBLEMAS DENTALES?5 Slo nos queda definir la lista intercalando las siguientes etiquetas: Alimentar al gato con comida seca de buena calidad o darle algo duro para que lo mastique Preferiblemente que coma pienso Cepillarle los dientes una vez a la semana Que el veterinario examine la boca del gato por lo menos cada seis meses 6 Guarda el archivo y visualzalo en tu navegador.Ejercicios del Tema 3. Prueba evaluativa del Tema 3.Ejercicios Unidad 3. Modificar las propiedades del textoSi no tienes abierto el Bloc de notas, brelo para realizar los ejercicios planteados a continuacin.Ejercicio 1: Deportes. 1 Abrir el documento quienes, de tu carpeta ejercicios_html/deportes.2 Aadir el cdigo necesario para que la pgina quede de la siguiente forma:3 Guardar los cambios y comprobar el funcionamiento en un navegador.Ejercicio 2: Deportes. 1 Abrir el documento donde.htm, de la carpeta originales/deportes del curso.2 Guardar la pgina con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/deportes3 Convertir la ltima frase en una marquesina.4 Guardar los cambios y comprobar el funcionamiento en un navegador.Ejercicio 3: Deportes. 1 Abrir el documento intalaciones.htm, de la carpeta originales/deportes del curso.2 Guardar la pgina con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/deportes3 Convertir la lista de actividades que aparece antes de la frase Puedes apuntarte... en una lista con vietas.4 Guardar los cambios y comprobar el funcionamiento en un navegador.Ejercicio 4: Flores. 1 Abrir el documento inicio.htm, de la carpeta ejercicio_html/flores.2 Aadir el cdigo necesario para que la pgina quede de la siguiente forma:Establecer #990033 como color del texto del documento, y 4 como el tamao normal.3 Guardar los cambios y comprobar el funcionamiento en un navegador.Si no tienes muy claro las operaciones a realizar en los ejercicios anteriores, En las siguientes hojas te lo explicamos.Ayuda Ejercicios Unidad 3. Modificar las propiedades del textoEjercicio 1: Deportes Apartado 2 Rectificar el cdigo dejndolo de la siguiente manera: QUIENES SOMOS?
Somos una cadena de centros deportivos dispuestos a ofrecerte nuestras instalaciones a buen precio, con la posibilidad de reservarlas con antelacin a travs de esta web.
Este ms, podrs hacerte socio de forma totalmente gratuita.
Acrcate a uno de nuestros centros y no pierdas esta oportunidad.La primera lnea aparece subrayada ( ), como un encabezado ().Luego tenemos dos prrafos ya que tiene una alineacin diferente, el primero est justificado ( son dos caracteres especiales que indican inicio y fin de etiqueta.a) Verdaderob) Falso 3. Los comentarios se insertan entre . a) Verdaderob) Falso 4. Si se escriben varios espacios en blanco seguidos solamente se mostrar uno en el navegador. a) Verdaderob) Falso 5. La etiqueta hace que el texto se muestre en cursiva.a) Verdadero.b) Falso. 6. El texto equivale a un espacio en blanco. a) Verdaderob) Falso 7. Los encabezados...a) Sirven para establecer el color de fondo del texto.b) Se utilizan para establecer ttulos dentro de la pgina.c) No existen en HTML.8. Las etiquetas y ... a) permiten cambiar el tamao del texto.b) permiten insertar un texto como ttulo.c) permiten centrar el texto.9. Para agrupar bloques de texto...A) Podemos utilizar las etiquetas y .B) Podemos utilizar la etiqueta .C) Cualquiera de las dos primeras opciones.D) Ninguna de las opciones anteriores. 10. Las marquesinas...A) Pueden contener texto.B) Pueden contener imgenes.C) Cualquiera de las dos primeras opciones.D) Ninguna de las opciones anteriores.RESULTADOSUnidad 4.Hiperenlaces (I)Vamos a ver qu son los hiperenlaces, para qu sirven y cmo crearlos, ya que son un elemento esencial para cualquier pgina web.Hiperenlace Un hiperenlace, hipervnculo, o vnculo, no es ms que un enlace, que al ser pulsado lleva de una pgina o archivo. Aquellos elementos (texto, imgenes, etc.) sobre los que se desee insertar un enlace han de encontrarse entre las etiquetas y .A travs del atributo href se especifica la pgina a la que est asociado el enlace, la pgina que se visualizar cuando el usuario haga clic en el enlace.Por ejemplo, para insertar el enlace:Visita www.aulaclic.comHabra que escribir:Visita www.aulaclic.comTipos de referenciasExisten diferentes formas de expresar una referencia a una pgina a travs del atributo href.Referencia absoluta: Conduce a una ubicacin externa al sitio en el que se encuentra el documento. La ubicacin es en Internet, en este caso hay que empezar la referencia por http:// , el nombre del dominio y algunas veces el nombre de la pgina. Si no se escribe el nombre de la pgina se cargar la pgina de inicio asociada al dominio.Por ejemplo, "http://www.aulaclic.com" tendr el mismo efecto que "http://www.aulaclic.com/index.htm"Para insertar el enlace:Visita www.aulaclic.comHabra que escribir:Visita www.aulaclic.comReferencia relativa al sitio:Conduce a un documento situado dentro del mismo sitio que el documento actual. Un sitio web es un conjunto de archivos y carpetas, relacionados entre s, con un diseo similar o un objetivo comn, estando todos ellos dentro de una misma carpeta, conocida como carpeta raz del sitio.Por ejemplo, teniendo en cuenta que el documento t_4_1.htm se encuentra directamente dentro de la carpeta raz del sitio, para insertar el enlace:Enlace a Tema 4: HiperenlacesHabra que escribir:Enlace a Tema 4: HiperenlacesObserva como aparece el smbolo "/" delante del nombre del documento. Esta barra inclinada indica la carpeta raz del sitio. Si el documento t_4_1.htm se encontrara, por ejemplo, dentro de una carpeta llamada tema4, y esta estuviera dentro de la carpeta raz del sitio, habra que escribir:Enlace a Tema 4: HiperenlacesReferencia relativa al documento:Conduce a un documento situado dentro del mismo sitio que el documento actual, pero partiendo del directorio en el que se encuentra el actual.Por ejemplo, teniendo en cuenta que el documento t_4_1.htm se encuentra dentro de la misma carpeta que el documento actual, para insertar el enlace:Enlace a Tema 4: HiperenlacesHabra que escribir:Enlace a Tema 4: HiperenlacesObserva que en este caso no aparece el smbolo "/" delante del nombre del documento. Si el documento t_4_1.htm se encontrara, por ejemplo, dentro de una carpeta llamada tema4, y esta estuviera dentro de la misma carpeta que el documento actual, habra que escribir:Enlace a Tema 4: HiperenlacesPunto de fijacin:Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Para ello el vnculo debe ser "nombre_de_documento#nombre_de_punto".Por ejemplo, para insertar el enlace:Punto de fijacion Tipos de enlacesHabra que escribir:Punto de fijacion Tipos de enlacesTeniendo en cuenta que el documento se llama t_4_1.htm y el punto de fijacin se llama tipos.Al final de este tema vers cmo definir el punto de fijacin.Unidad 4.Hiperenlaces (II)Destino del enlaceEl destino del enlace determina en qu ventana va a ser abierta la pgina vinculada, se especifica a travs del atributo target al que se le puede asignar los siguientes valores:_blank:Abre el documento vinculado en una ventana nueva del navegador._parent:Abre el documento vinculado en la ventana del marco que contiene el vnculo o en el conjunto de marcos padre._self:Es la opcin predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vnculo._top:Abre el documento vinculado en la ventana completa del navegador.No te preocupes si no te queda del todo claro para qu sirve cada una de estas opciones de destino, ya que se volvern a ver en el tema de Marcos. De momento slo te interesa retener la opcin _blank y _self.Para insertar el enlace:Visita www.aulaclic.com en una ventana nuevaHabra que escribir:Visita www.aulaclic.com en una ventana nuevaEs interesante utilizar esta opcin cuando la pgina de destino est fuera de nuestro sitio para que cuando el usuario cierre la ventana del explorador, se encuentre automticamente en la pgina desde la que haba salido (que vuelva a nuestro sitio).Formato de los enlacesEn general, un texto que tiene un vnculo asociado suele aparecer subrayado.Cuando el vnculo est definido sobre una imagen, en el borde aparecen una serie de puntitos al pulsar sobre ella. Cuando el vnculo est definido sobre una zona de una imagen (un mapa), aparece el contorno de esa zona.Aqui tienes dos vnculos similares de ejemplo:Como puedes ver, la segunda imagen que hace de vnculo contiene un recuadro alrededor. Esto ocurre debido a que se ha establecido un borde para la imagen, como veremos ms adelante.Tanto si el vnculo se asigna a un texto como a una imagen, el cursor cambia de forma al situarse encima del vnculo. Suele adquirir la apariencia de una mano sealando.Normalmente los vnculos de texto cambian de color cuando el enlace ha sido ya pulsado o cuando el puntero del ratn se posiciona sobre l, estos cambios estn predefinidos en cada navegador, pero nosotros podemos cambiar esos colores.Los colores de los vnculos pueden especificarse a travs de las propiedades de la pgina, en la etiqueta . Estos colores se asignan a travs de los atributos link (vnculo), alink (vnculo activo), y vlink (vnculo visitado).link permite determinar el color de los enlaces sin visitar (enlace que no ha sido pulsado ninguna vez).alink permite determinar el color del enlace activo (enlace que acaba de ser pulsado).vlink permite determinar el color de los enlaces visitados (enlaces que ya han sido pulsados).Por ejemplo, al insertar el siguiente cdigo:......www.aulaclic.com...Mientras no se visite la pgina www.aulaclic.com, el enlace ser de color rojo (#FF0000):www.aulaclic.comMientras la pgina www.aulaclic.com sea la ltima visitada, el enlace ser de color fucsia (#FF0099):www.aulaclic.comCuando se haya visitado la pgina www.aulaclic.com, el enlace ser de color naranja (#FF9900):www.aulaclic.comUnidad 4.Hiperenlaces (III)Puntos de fijacin. AnclasCuando se tienen documentos extensos, divididos en varios apartados, es preferible poder ir directamente al apartado deseado, en lugar de ir al comienzo del documento.Para ello se utilizan las anclas, o puntos de fijacin, muy tiles a la hora de crear ndices.Un ancla necesita que se inserten las y , con el atributo name, que puede tomar cualquier valor inventado por el usuario, se recomienda no utilizar caracteres especiales.Por ejemplo, para insertar un punto de fijacin delante del siguiente texto:Texto con anclaHabra que escribir:Texto con anclaComo puedes ver, no es necesario insertar nada entre las etiquetas y , y que sin mirar el cdigo no hay nada que indique que delante del texto haya un ancla.Teniendo en cuenta que el documento actual se llama t_4_3.htm, y que el ancla anterior se llama miancla, podramos crear un enlace que nos llevara directamente a la lnea de texto en la que se encuentra el ancla. Por ejemplo:Enlace al anclaHabra que escribir:Enlace al anclaSi pulsas sobre el enlace vers cmo se vuelve a cargar el documento actual, pero en lugar de cargarse desde el principio, la primera lnea de texto ser la lnea en la que hemos insertado el ancla.Cuando el ancla se encuentra en el mismo documento que el enlace, como ocurre en este caso, podemos prescindir de poner el nombre de la pgina en el atributo href.En el ejemplo anterior podramos haber escrito:Enlace al anclaOtros tipos de enlacesExisten otros tipos de enlaces que no conducen a otra pgina web, los veremos a continuacin:Correo electrnico:Abre la aplicacin Outlook Express para escribir un correo electrnico, cuyo destinatario ser el especificado en el enlace. Para ello la referencia del vnculo debe ser "mailto:direcciondecorreo".Por ejemplo, para insertar un enlace que permita enviar un correo electrnico a aulaClic, tal como este:e-mail para aulaclicHabra que escribir:e-mail para aulaclicDespus de hacer clic en el enlace se abrir el Outlook Express (si el usuario lo tiene instalado) con la pantalla para redactar un nuevo mensaje y con el campo destinatario rellenado con la direccin de correo. Podemos hacer que est rellenado algn campo ms como es el asunto. En este caso habra que escribir:e-mail para aulaclicVnculo a ficheros para descarga:El valor del atributo href normalmente ser una pgina web (con extensin htm, html, asp, php...) pero tambin puede ser un fichero comprimido, una hoja de Excel, un documento Word, un documento con extensin pdf. Cuando el enlace no es a una pgina Web nos aparecer el cuadro de dilogo que seguro habrs visto alguna vez en el que el navegador le pide al usuario permiso para descargar el fichero en su ordenador.El navegador reconoce algunas extensiones como asociadas a un determinado programa (por ejemplo la extensin .doc est asociada al programa Word, .pdf al programa Acrobat Reader, .xls al programa Excel...) en este caso en el cuadro de dilogo aparece una nueva opcin, la de abrir el fichero sin descargarlo en el disco duro del usuario.Para nombrar el fichero podemos utilizar segn el caso, una referencia externa, una referencia relativa al sitio o una referencia relativa al documento.Por ejemplo, en la carpeta donde se encuentra esta pgina tenemos el fichero Word carta.doc y queremos que nuestros visitantes puedan visualizar e incluso descargar el fichero en su disco duro, en este caso definiremos el enlace:haz clic aqu para descargarte el ficheroDe la siguiente forma:haz clic aqu para descargarte el fichero En este caso hemos utilizado una referencia relativa al documento ya que la carta se encuentra en la misma carpeta que nuestra pgina.Vnculo vaco:Al pulsar sobre un enlace vaco no se abre ninguna pgina ni archivo, pero el formato es el mismo que el de cualquier otro enlace. El vnculo debe ser el smbolo almohadilla "#".Por ejemplo, para insertar el enlace vaco:vinculo vacio Habra que escribir:vinculo vacio Este tipo de enlace resulta til para trabajar con comportamientos javascript.Para practicar los distintos aspectos explicados en el tema puedes realizar el Ejercicio paso a paso Insertar un hiperenlace. Ejercicio paso a paso. Insertar un hiperenlaceObjetivo. Practicar las operaciones que hay que realizar para insertar un hiperenlace. 1 Si no tienes abierto el Bloc de notas, brelo para realizar el ejercicio.2 Abre el archivo inicio.htm, que debes tener en la carpeta ejercicios_html/animales.Vamos a aadir un enlace a la pgina en Internet de aulaClic.1 Escribe el siguiente cdigo delante de la etiqueta :visita aulaClicCon este cdigo estars insertando un hiperenlace a www.aulaclic.com, que ser abierto en una nueva ventana (target="_blank"). En este caso hemos utilizado una referencia absoluta.2 Haz clic sobre el men Archivo.3 Haz clic sobre la opcin Guardar.4 Abre con tu navegador el documento inicio.htm que acabas de guardar, y comprueba que si te posicionas sobre el texto visita aulaClic el puntero del ratn se convierte en una mano y si haces clic (y ests conectado a Internet) se abrir una nueva ventana con la pgina de aulaClic.Vamos a cambiar ahora el color de los enlaces.1 Si cerraste el archivo inicio.htm, abrelo para seguir con el ejericio:2 Rectifica la etiqueta para que quede as:Con este cdigo estars indicando que la pgina tiene el color de fondo verde (#99CC99), y el color de los enlaces rojo (#CC0000).3 Haz clic sobre el men Archivo.4 Haz clic sobre la opcin Guardar.5 Abre con tu navegador el documento inicio.htm que acabas de guardar, y comprueba que obtienes una pgina como la que aparece si pulsas aqu. Fjate que ahora el texto del enlace aparece en rojo. Ejercicios del Tema 4. Prueba evaluativa del Tema 4.Ejercicios Unidad 4. Insertar hiperenlacesSi no tienes abierto el Bloc de notas, brelo para realizar los ejercicios planteados a continuacin.Ejercicio 1: Deportes.1 Abrir el documento menu.htm, de la carpeta originales/deportes del curso.2 Guardar la pgina con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/deportes3 Rectificar la pgina para que la palabra E-MAIL sea un enlace de correo electrnico a tu direccin de correo.4 Guardar los cambios y comprobar el funcionamiento en un navegador.Ejercicio 2: Deportes.1 Abrir el documento instalaciones.htm, de la carpeta ejercicios_html/deportes.2 Aadir al texto de cada actividad un enlace al prrafo correspondiente a esa actividad para que el navegante pueda ver directamente la descripcin de la actividad sin tener que moverse por toda la pgina.3 Guardar los cambios y comprobar el funcionamiento en un navegador.Ejercicio 3: Flores. 1 Abrir el documento menu.htm, de la carpeta originales/flores del curso.2 Guardar la pgina con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/flores3 Asociar a la palabra Inicio un enlace a la pgina inicio.htm, a la palabra Productos un enlace a la pgina productos.htm y a la palabra Pedidos un enlace a la pgina pedidos.htm, las pginas inicio.htm, productos.htm y pedidos.htm se encontrarn en el mismo directorio que la pgina menu.htm. Las pginas se abrirn en la misma ventana.4 Guardar los cambios y comprobar el funcionamiento del enlace a la pgina Inicio.htm en un navegador (las pginas productos.htm y pedidos.htm se incorporarn ms adelante) .Si no tienes muy claro las operaciones a realizar en los ejercicios anteriores, Aqu te lo explicamos.Ayuda Ejercicios Unidad 4. Insertar hiperenlacesEjercicio 1: Deportes Apartado 1 Hacer clic sobre el men Archivo, y elegir la opcin Abrir.En la nueva ventana, elegir Todos los archivos en Tipo:Seleccionar el documento menu.htm, de la carpeta originales/deportes.Pulsar sobre el botn Abrir.Apartado 2 Hacer clic sobre el men Archivo, y elegir la opcin Guardar como.Buscar y abrir la carpeta Mis documentos/ejercicios_html/deportes.Pulsar sobre el botn Guardar.Apartado 3 Aadir delante de la palabra E-MAIL la etiqueta: .Sustituye direccion@aulaclic.com por tu direccin de correo. Escribe detrs de la palabra E-MAIL la etiqueta de cierre Apartado 4 Hacer clic sobre la opcin Guardar, del men Archivo.Abrir el documento menu.htm en un navegador, pulsar sobre la palabra E-MAIL, y comprobar que se abre algn programa de envio de correo electrnico, como puede ser Outlook Express con tu direccin como destinatario del mensaje.Ejercicio 2: Deportes Apartado 2 Para que el enlace vaya directamente a un lugar concreto de la pgina debemos definir anclas delante de la descripcin de cada actividad, y aadir el enlace a esa ancla en cada actividad de la lista. El cdigo quedar de la siguiente forma:Pista ftbol sala y baloncestoSala aerbicPistas de tenisSala de musculacinSaunaDuchas...Pista de ftbol sala y baloncestoDisponemos de una pista de ftbol sala y una de baloncesto, estas sedeben reservar con una semana con mnimo de antelacin. Tambinofrecemos el servicio de alquiler de pelotas.Sala aerbicLas sesiones de aerbic se realizan con monitores titulados para msinformacin pregunta en recepcin por los horarios disponibles.Pistas de tenis....Salas de musculacin.......Apartado 3 Hacer clic sobre la opcin Guardar, del men Archivo.Abrir el documento instalaciones.htm en un navegador, pulsar sobre la palabra aerobic de la lista de actividades y la pgina se desplazar automticamente al prrafo con la descripcin de la actividad.Ejercicio 3: Flores Apartado 3 Encerrar la palabra Inicio entre las etiquetas y de la siguiente forma: Inicio repetir lo mismo con las palabras Productos y Pedidos:Productos Pedidos .En este caso hemos empleado una direccin relativa al documento el navegador buscar la pgina inicio.htm en el directorio donde se encuentra menu.htm.No hemos empleado el atributo Tarjet ya que queremos que se visualicen las pginas en la misma ventana (valor por defecto).Apartado 4 Hacer clic sobre la opcin Guardar, del men Archivo.Abrir el documento menu.htm en un navegador, pulsar sobre la palabra Inicio y comprueba que ahora aparece la pgina Inicio.htm en la misma ventana, para volver al men haz clic en el botn Atrs de tu navegador.Prueba evaluativa de la unidad 4. HiperenlacesSolo una respuesta es vlida por pregunta.Haz clic en la respuesta que consideres correcta. Contesta todas las preguntas y haz clic en el botn Resultados para ver la solucin.1. Un hiperenlace es lo mismo que un hipervnculo, un vnculo, o un enlace. a) Verdaderob) Falso 2. Los vnculos vacos no existen.a) Verdaderob) Falso 3. Es posible abrir el documento vinculado en una ventana nueva del navegador. a) Verdaderob) Falso 4. Un enlace a un punto de fijacin conduce a un punto dentro de un documento. a) Verdaderob) Falso 5. La ruta de acceso se especifica a travs del atributo href.a) Verdadero.b) Falso. 6. El cursor cambia de forma al situarse encima del vnculo en el navegador. a) Verdaderob) Falso 7. Cuando el vnculo est definido sobre una imagena) Siempre aparece el borde azul alrededor de ellab) sta adquiere un tono azuladoc) Aparecen una serie de puntitos en el borde al pulsar sobre ella8. El destino del enlace se especifica mediante el atributo... a) target.b) href.c) link.9. El tipo enlace puede ser...A) A una pgina externaB) A una direccin de correo electrnicoC) Cualquiera de las dos primeras opcionesD) Ninguna de las opciones anteriores10. Es posible especificar el color de...A) Los vnculosB) Los vnculos activosC) Los vnculos visitadosD) Cualquiera de las opciones anterioresRESULTADOSUnidad 5.Imgenes (I)Vamos a ver cmo insertar imgenes, y cmo modificar algunas de sus propiedades.Imagen Todas las pginas web acostumbran a tener un cierto nmero de imgenes, que permiten mejorar su apariencia, o dotarla de una mayor informacin visual. Para insertar una imagen es necesario insertar la etiqueta . Dicha etiqueta no necesita etiqueta de cierre.El nombre de la imagen ha de especificarse a travs del atributo src.Por ejemplo, para insertar la siguiente imagen:Habra que escribir:Teniendo en cuenta que la imagen se llama logo_animales.gif y que est dentro de la carpeta imagenes, que se encuentra en el mismo directorio que el documento actual (referencia relativa al documento).Para trabajar de una forma ms sencilla y ordenada, es recomendable que todos los documentos html se encuentren en un mismo directorio, y que dentro de este directorio existan diferentes carpetas para agrupar otros objetos, como puede ser una carpeta destinada a almacenar imgenes, o una carpeta destinada a almacenar archivos de audio, etc.Existen una serie de formatos de imagen ms recomendables que otros para ser introducidos en una pgina web. Esta informacin puedes consultarla aqu .Texto alternativo Cuando una imagen no puede ser visualizada en el navegador, cosa que puede ocurrir al especificar mal el valor del atributo src, aparece un recuadro blanco con una X roja en su lugar, junto con el nombre de la imagen.Podemos hacer que en lugar de mostrarse el nombre de la imagen aparezca el texto que nosotros deseemos, gracias al atributo alt.Por ejemplo, imagina que deseamos mostrar una imagen llamada gatito.gif, con el texto alternativo Imagen gato, para ello insertamos el siguiente cdigo:Pero hemos cometido un error, ya que dicha imagen no se encuentra en el mismo directorio que el documento actual, sino que se encuentra dentro de la carpeta imgenes. En lugar de la imagen se mostrar lo siguiente:Si en lugar del cdigo anterior hubiramos insertado el siguiente cdigo:La imagen habra mostrado correctamente:El texto alternativo se muestra tambin al situar el puntero sobre la imagen. Si sitas el puntero sobre la imagen durante unos segundos, vers como aparece el texto Imagen gato.El texto alternativo es muy til a la hora de disear pginas ms asequibles a los invidentes ya que los programas lectores son capaces de leer el texto alternativo. Formatos de imagenLas imgenes pueden ser de muchos formatos diferentes: bmp, gif, jpg, etc. Pero no todos estos formatos son adecuados para una web, debido a que pueden ocupar mucha memoria o a que no son compatibles con algunos navegadores.Los formatos ms utilizados son el GIF y el JPG, que a pesar de ser imgenes de menor calidad que las imgenes BMP, son ms recomendables debido a que ocupan menos memoria. Vamos a ver un poco ms sobre estos formatos:Formato GIF:Utilizan un mximo de 256 colores, y son recomendables para imgenes con grandes reas de un mismo color o de tonos no continuos. Suelen utilizarse con gran frecuencia, ya que permiten definir transparencias y animacin.Formato JPG:Las imgenes son de mayor calidad que las GIF, al poder contener millones de colores, pero el tamao de la imagen es mayor y tarda ms en descargarse se utilizan ms para fotos.Puedes incluir imgenes en otros formatos, que podrn ser visualizadas en algunos navegadores. Este es el caso de las imgenes BMP y PNG.Puedes cambiar el formato de las imgenes mediante la utilizacin de algn programa de tratamiento de imgenes, como pueden ser Fireworks, Photoshop, Corel Draw, etc. Por ejemplo el Fireworks de Macromedia tiene una opcin, exportar a tipo gif que reduce considerablemente la ocupacin de la imagen sin perder en calidad (siempre que la imagen se adecue al formato).Dependiendo del programa utilizado existir una mayor o menor cantidad de opciones a la hora de modificar las imgenes. Para realizar modificaciones sencillas, como la de recortar las imgenes y cambiar los colores, puedes utilizar incluso el programa Paint de Windows.Unidad 5.Imgenes (II)Borde de una imagenEn general, al visualizar una pgina en un navegador las imgenes aparecen sin ningn borde alrededor, pero es posible establecer uno a travs del atributo border.El atributo border puede tomar valores numricos, que indican el grosor en pxeles del borde.Por ejemplo, para insertar la siguiente imagen con borde:Habra que escribir:Hay que tener en cuenta que el borde de la imagen siempre ser de color negro, a no ser que la imagen contenga un enlace, en cuyo caso el color del borde ser el color establecido para los vnculos.Por ejemplo, para insertar la siguiente imagen con borde y con un enlace:Habra que escribir:Si se desea establecer un vnculo sobre una imagen y no se desea que se muestre el borde (que por su color indica que existe dicho vnculo), es necesario establecer border="0".Tamao de una imagenCuando insertamos una imagen, esta se muestra en los navegadores con su tamao original, pero por diversos motivos puede interesarnos modificar dicho tamao.A travs de los atributos width (anchura) y height (altura) puede modificarse el tamao de la imagen. Dicho cambio de tamao no se aplica directamente sobre el archivo de imagen, sino que lo que vara es la visualizacin de la imagen en el navegador.El valor que pueden tomar los atributos width y height ha de ser un nmero, acompaado de % cuando se desee que sea en porcentaje con respecto a la pgina.Por ejemplo, para insertar la siguiente imagen (cuyo tamao original era de 122 pxeles de anchura y 71 pxeles de altura) con 200 pxeles de anchura y 80 pxeles de altura:Habra que escribir:Al modificar el tamao de la imagen a travs de estos atributos es muy probable que la imagen resultante no sea de buena calidad, en comparacin de cmo podra quedar modificndola desde un editor externo, como Fireworks. Unidad 5.Imgenes (III)Alineacin de una imagenLa alineacin de las imgenes se establece a travs del atributo align. Este atributo indica la alineacin de las imgenes con respecto a la lnea de texto en la que se encuentran.Los valores del atributo align pueden ser los siguientes:ValorSignificadoEjemploabsbottominferior absolutaImagen con textoabsmiddlemedio absolutaImagen con textobaselinelnea de baseImagen con textobottominferiorImagen con textoleftizquierdaImagen con textomiddlemedioImagen con textorightderechaImagen con textotexttoptexto superiorImagen con textotopsuperiorImagen con textoEl resultado de aplicar uno u otro valor puede tener el mismo resultado, como ocurre con los valores baseline y bottom, o con los valores texttop y top.Para insertar el texto y la imagen siguientes:PerrosGatos Una web de animalesHabra que escribir:PerrosGatosUna web de animalesEste tipo de alineacin la recomendamos cuando es una imagen pequea que queremos fundir con la lnea de texto sin que por ello cree una separacin demasiado grande entre la lnea donde se encuentra la imagen y las lneas superior y inferior. Por ejemplo para la imagen de un icono de cualquier programa, de un botn, etc...Si la imagen es muy grande, conviene dejarla aislada del texto (no ajustarla a la derecha ni a la izquierda sino colocarla en un bloque aparte).Para practicar los distintos aspectos explicados en el tema puedes realizar el Ejercicio paso a paso Insertar una imagen. Ejercicio pas a paso. Insertar una imagenObjetivo. Practicar las operaciones que hay que realizar para insertar una imagen. Si no tienes abierto el Bloc de notas, brelo para realizar el ejercicio. Ejercicio 1. 1 Abre el archivo inicio.htm, que se encuentra en la carpeta ejercicios_html/animales.2 Sustituye la lnea visita aulaclic Que est incluida dentro de un hiperenlace, por la lneaCon este cdigo estars asociando el enlace con la imagen aulaclic.jpg que se encuentra en la directorio imgenes dentro de la carpeta animales (la carpeta donde se encuentra el archivo inicio.htm.La imagen medir 90 pxeles de ancho, y 32 pxeles de alto (atributos width y height).Tendr un borde de 4 pxeles (atributo border), que aparecer de color rojo, al ser este color el definido para los enlaces de esta pgina.En el caso de que la imagen no pueda ser visualizada, o se situe el puntero sobre ella, se mostrar el texto visita aulaclic (atributo alt).3 Haz clic sobre la opcin Guardar del men Archivo.4 Abre el documento inicio.htm, que acabas de guardar, en un navegador, y comprueba que obtienes una pgina como la que aparece aqu abajo.Ejercicio 2. 1 Abre el documento menu.htm, de la carpeta originales/animales del curso.2 Guarda la pgina con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/animales2 Aade delante de la primera etiqueta ... la siguiente lnea: El prrafo se aade para centrar la imagen.3 Haz clic sobre la opcin Guardar del men Archivo.4 Abre el documento menu.htm, que acabas de guardar, en un navegador, y comprueba que obtienes una pgina como la que aparece si aqu.Ejercicio 3. 1 Abre el archivo gatos.htm, que se encuentra en la carpeta animales.2 Aade detrs de la etiqueta la lnea:3 Haz clic sobre la opcin Guardar del men Archivo.4 Abre el documento menu.htm, que acabas de guardar, en un navegador, y comprueba que obtienes una pgina como la que aparece si aqu.No te preocupes por la disposicin de la imagen, en el tema de tablas lo arreglaremos. Ejercicios del Tema 5. Prueba evaluativa del Tema 5.Ejercicios Unidad 5. Insertar imgenesSi no tienes abierto el Bloc de notas, brelo para realizar los ejercicios planteados a continuacin.Ejercicio 1: Deportes. 1 Abrir el documento menu.htm, de la carpeta ejercicios_html/deportes.2 Sustituir la palabra DEPORTES por la imagen logodeportes.gif que se encuentra en la carpeta imagenes de la carpeta ejercicios_html/deportes, la imagen deber tener deportes como texto alternativo.3 Sustituir la palabra E-MAIL por la imagen email.gif, sin texto alternativo.4 Guardar los cambios y comprobar el funcionamiento en un navegador.Ejercicio 2: Deportes. 1 Abrir el documento instalaciones.htm, de la carpeta ejercicios_html/deportes.2 Sustituir la palabra DEPORTES que aparece al final de la pgina por la misma imagen logodeportes.gif que en el ejercicio anterior, la imagen deber tener deportes como texto alternativo.3 Guardar los cambios y comprobar el funcionamiento en un navegador.Ejercicio 3: Flores. 1 Abrir el documento menu.htm, de la carpeta flores.2 Sustituir la palabra FLORES por la imagen logo_flores.gif que se encuentra en la carpeta imagenes de la carpeta flores, la imagen deber tener flores como texto alternativo y el texto que hay a su derecha debe quedar a media altura de la imagen.3 Guardar los cambios y comprobar el funcionamiento en un navegador.Si no tienes muy claro las operaciones a realizar en los ejercicios anteriores, Aqu te lo explicamos. Ayuda Ejercicios Unidad 5. Insertar imgenesEjercicio 1: Deportes Apartado 2 Sustituir la palabra DEPORTES por la referencia a la imagen:.Con el atributo src indicamos qu imagen se tiene que visualizar y dnde se encuentra (en el directorio imgenes), con el atributo alt indicamos el texto alternativo.Apartado 3 Sustituir la palabra E-MAIL por la referencia a la imagen:.Con el atributo border indicamos que la imagen no tiene borde para que no salga el borde ya que la imagen est dentro de un hiperenlace.Apartado 4 Hacer clic sobre la opcin Guardar, del men Archivo.Abrir el documento menu.htm en un navegador, y situar el cursor sobre la imagen con el logotipo para ver si aparece el texto alternativo deportes, situar el cursor sobre la imagen E-MAil y comprobar que no aparece texto alternativo.Ejercicio 2: Deportes Apartado 2 Sustituir la palabra DEPORTES por la referencia a la imagen:.Con el atributo src indicamos qu imagen se tiene que visualizar y dnde se encuentra (en el directorio imagenes), con el atributo alt indicamos el texto alternativo.Apartado 3 Hacer clic sobre la opcin Guardar, del men Archivo.Abrir el documento instalaciones.htm en un navegador, y situar el cursor sobre la imagen con el logotipo para ver si aparece el texto alternativo deportes, situar el cursor sobre la imagen E-MAil y comprobar que no aparece texto alternativo.Ejercicio 3: Flores Apartado 2 Sustituir la palabra FLORES por la referencia a la imagen:.Con el atributo alt indicamos el texto alternativo y con el atributo align y el valor absmiddle indicamos que la imagen tendr la alineacin media absoluta por lo que el texto que se encuentra a su derecha quedar a media altura de la imagenApartado 3 Hacer clic sobre la opcin Guardar, del men Archivo.Abrir el documento menu.htm en un navegador, y situar el cursor sobre la imagen con el logotipo para ver si aparece el texto flores.Prueba evaluativa de la unidad 5. ImgenesSolo una respuesta es vlida por pregunta.Haz clic en la respuesta que consideres correcta. Contesta todas las preguntas y haz clic en el botn Resultados para ver la solucin.1. Para insertar una imagen es necesario insertar la etiqueta .a) Verdaderob) Falso 2. Existen una serie de formatos de imagen ms recomendables que otros para ser introducidos en una pgina web.a) Verdaderob) Falso 3. Cuando una imagen no puede ser visualizada en el navegador aparece un recuadro blanco con una X roja en su lugar. a) Verdaderob) Falso 4. El texto alternativo no aparece al situar el puntero sobre la imagen. a) Verdaderob) Falso 5. Es preferible modificar el tamao de las imgenes desde un editor de imgenes.a) Verdadero.b) Falso. 6. La alineacin de las imgenes se establece a travs del atributo align. a) Verdaderob) Falso 7. El atributo width...a) Va fuera de la etiqueta b) Sirve para especificar la altura de la imagenc) Sirve para especificar la anchura de la imagen8. Si escribiramos align="middle"... a) La imagen aparecera centrada en la ventanab) El medio de la imagen aparecera a la misma altura que la lnea de texto que la acompaarac) La imagen sera ms pequea9. Las imgenes...A) Pueden redimensionarse a travs de los atributos width y heightB) Siempre tienen un borde alrededorC) Cualquiera de las dos primeras opcionesD) Ninguna de las opciones anteriores10. El borde de la imagen ...A) Suele ser de color negroB) Adquiere el color de los vnculos cuando contiene algunoC) Puede desaparecer si escribimos border="0"D) Cualquiera de las opciones anterioresRESULTADOSUnidad 6.Tablas (I)En este tema vamos a ver cmo trabajar con tablas. Podremos insertar tablas, filas y columnas, y modificar sus propiedades.Hoy en da, la mayora de las pginas web se basan en tablas, ya que resultan de gran utilidad al mejorar notablemente las opciones de diseo.Todos los objetos se alinean por defecto a la izquierda de las pginas web, pero gracias a las tablas es posible distribuir el texto en columnas, colocar imgenes al lado de un bloque de texto, y otra serie de cosas que sin las tablas seran imposibles de realizarse.Tabla Las tablas estn formadas por celdas, que son los recuadros que se obtienen como resultado de la interseccin entre una fila y una columna.imagen y textoCOLUMNATexto dentro de una celdaFILACELDAPara crear una tabla hay que insertar las etiquetas y . Entre dichas etiquetas habr que especificar las filas y columnas que formarn la tabla.Fila Es necesario insertar las etiquetas y por cada una de las filas de la tabla. Estas etiquetas debern insertarse entre las etiqetas y .Por ejemplo, para crear una tabla con cinco filas escribiramos:...............Columna o celda Para crear una tabla no basta con especificar el nmero de filas, es necesario tambin especificar el nmero de columnas.Una celda es el resultado de la interseccin entre una fila y una columna, por lo que podremos especificar el nmero de celdas por fila, que equivale a especificar el nmero de columnas por fila.Es necesario insertar las etiquetas y por cada una de las celdas que compongan cada una de las filas de la tabla. Por lo tanto, habr que insertar esas etiquetas entre las etiquetas y .Entre las etiquetas y se podr especificar el contenido de cada una de las celdas. Por ejemplo, para insertar la siguiente tabla: SabadoDomingoCurso HTMLCurso DreamweaverCurso FrontpageCurso FlashHabra que escribir:SabadoDomingoCurso HTMLCurso DreamweaverCurso FrontpageCurso FlashUnidad 6.Tablas (II)Formato de la tablaEs posible modificar los siguientes atributos de una tabla:AtributoSignificadoPosibles valoreswidthancho de la tablaun nmero, acompaado de % cuando se desee que sea en porcentajeheightaltura de la tablaun nmero, acompaado de % cuando se desee que sea en porcentajecellpaddingespacio entre el contenido de las celdas y el bordeun nmerocellspacingespacio entre celdasun nmerobordergrosor del bordeun nmeroalignalineacin de la tabla dentro de la pginaleft (izquierda)right (derecha)center (centro)bgcolorcolor de fondonmero hexadecimalbackgroundimagen de fondonmero hexadecimalbordercolorcolor del bordenmero hexadecimalPor ejemplo, para modificar la tabla de la pgina anterior para que quedase como la siguiente:SabadoDomingoCurso HTMLCurso DreamweaverCurso FrontpageCurso FlashHabra que escribir:...Con esto indicamos que el ancho (width) de la tabla debe ocupar el 50% del ancho de la ventana (lo puedes comprobar cambiando el ancho de la ventana de tu navegador y vers que el ancho de la tabla vara para ocupar siempre la mitad de la ventana), que el borde (border) tiene un grosor de dos pxeles (es ms ancho que las separaciones internas de la tabla que tienen grosor 1), que la tabla est alineada al centro (center) de la ventana, que no hay espacio entre las celdas (cellspacing="0"), que el borde la tabla es negro (#000000) y el fondo naranja (#FFCC99).Formato de las celdasEs posible modificar los siguientes atributos de una celda:AtributoSignificadoPosibles valoreswidthancho de la tablaun nmero, acompaado de % cuando se desee que sea en porcentajeheightaltura de la tablaun nmero, acompaado de % cuando se desee que sea en porcentajealignalineacin horizontal del contenido de la celdaleft (izquierda)right (derecha)center (centro)valignalineacin vertical del contenido de la celdabaseline (lnea de base)bottom (inferior)middle (medio)top (superior)bgcolorcolor de fondonmero hexadecimalbackgroundimagen de fondonmero hexadecimalbordercolorcolor del bordenmero hexadecimalTambin es posible modificar estos atributos de toda una fila, especificndolos en la etiqueta , en lugar de en la etiqueta .Hay que tener en cuenta que los atributos tienen ms prioridad cuando son establecidos para una celda que cuando son establecidos para una fila completa. Al mismo tiempo, tienen ms prioridad los atributos establecidos para una fila que los establecidos para toda la tabla. Por ejemplo, si escribiramos el siguiente cdigo:SabadoDomingoCurso HTMLCurso DreamweaverCurso FrontpageCurso Flash Obtendramos la siguiente tabla:SabadoDomingoCurso HTMLCurso DreamweaverCurso FrontpageCurso FlashSe ha establecido el color naranja como fondo de toda la tabla, pero con la lnea de cdigo se ha establecido el color azul como color de fondo de la primera fila, por lo que dicha fila se mostrar de color azul, y no de color naranja. Al mismo tiempo, se ha cambiado el color de la segunda celda de la primera fila por el color verde, a travs de la lnea Domingo por lo que esta fila en vez de ser azul ser verde, los atributos de celda tienen prioridad sobre los de la fila.Existe otro atributo que puede establecerse sobre las celdas. Se trata del atributo nowrap, que hace que el contenido de la celda no se ajuste de manera automtica al ancho de la columna sino que el ancho de la celda se adapta al ancho del contenido para que el contenido ocupe u