Untitled
Anuncio
manualpáginasweb.blogspot.com Introducción: ¿Qué es el html? El html es el lenguaje de aplicación por el que se hacen las páginas web. Accesibilidad web Esta página se utilizará para la accesibilidad web, para todas las personas incluidos discapacitados puedan verla sin restricciones. Ir a l página web; http://www.sidar.org/index.php Empezar a escribir html Tu primera página web 1.Crear una carpeta en el escritorio 2.Acceder a la carpeta html y crear un documento de texto. 3.Quitarle el txt. Cambiándolo por html Estos archivos tiene el htm o html ambos equivalentes, nunca usar la “ñ” “el acento”, “espacios en blanco”, usar nombres que describan su contenido. Para el código fuente de otras páginas web lo que debemos hacer, es darle al botón derecho y luego código fuente. Las Etiquetas: Las etiquetas son la filosofía que vamos a aprender de este lenguaje Ejemplo: <etiqueta>hola</etiqueta> Otro tipo de etiquetas son denominadas como etiquetas vacias se utilizan para introducir saltos de líneas, líneas horizontales y otros elementos, este tipo de etiquetas se diferencian de las anteriores que no tiene una marca final, ya que se producen en el mismo momento concreto en el que hacemos referencias a ellas, por ello no hay que enviar la etiqueta en el mismo momento de abrirla. manualpáginasweb.blogspot.com Ejemplos de etiquetas. <strong>Texto resaltado</strong> <i>Cursiva</i> <strong>hola y</i></strong>(De esta manera se verá todo en negrita menos adios que se verá en cursiva. Texto por ejemplo de color rojo. <font color=”red”>texto en rojo</font> Comentarios y símbolos especiales (<) Abrir corchetes (&lt;) (>) Cerrar corchetes (&gt;) (&) Símbolo de and o ampersand (&amp;) (“) Comillas dobles: (&quot;) Insertar comentarios Ejemplos Poniendo <!-- y al final --> lo que sucederá será que este comentario no lo verán los usuarios. <!--mañana cambiar la fecha--> Estructura de un documento html Definición de un documento html Visitar la página W3C esta asociación obtiene la declaración <DOCTYPE html PUBLIC> esta cargada de los estándares web y definen que los documentos html deben de tener una declaración del tipo “Doctype” al principio del código va siempre al principio antes que html, es la primera línea que debe de estar en nuestro documento y es necesaria para decirle al navegador que tipo de versión html es la que utilizamos, si no se hiciera podría darse el caso de que el navegador procesara la página en modo “kirch” en modo de compatibilidad, pudiendo no interpretar correctamente el código que luego nosotros introduciremos en la página. Existen 3 posibles definiciones para un documento html. 1- html strict.dtd Esta definición da prioridad a la estructura frente a la presentación es la más estricta de todas es aconsejable esta gramatica siempre que se pueda, si se quiere elaborar un código limpio de presentación , pero no permite ciertos elementos. <!DOCTYPE HTML PUBLIC/”-//W3C//DTD HTML 4.01//EN/”/”http://www.w3.org/TR/html4/strict.dtd/”> manualpáginasweb.blogspot.com 2- 4.01 Transitional Otra forma es la tradicional con menos restricciones que la primera definición estricta pero permite incluír elementos de presentación y otros elementos no tan aconsejados. <!DOCTYPE html PUBLIC”_//W3C//DTD HTM. 4.01 transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”> 3- Por último Frmaset/EN” Esta versión es igual que la tradicional, pero permite el uso de Frames o Marcos. <!DOCTYPE html PUBLIC”_//W3C//DTD HTML 4.01 Frmaset//EN””http://www.w3.org/TR/frameset.dtd”> Para validar la página después de haber insertado la declaración abrá que ir a la página web http://validator.w3.org/ 1. Seleccionar Validate by file Upload 2. Seleccionar el archivo en examinar 3. Pulsar en Check Pondrá al principio This page is not Valid Html 4.01 Que significa que no es una página valida pero con el tiempo intentándolo de nuevo saldrá validada. La Estructura 1, La definición de documento doctype 1. Después la etiqueta <html> y finaliza con </html> Todo lo que contenga esta etiqueta será interpretado por el navegador como un documento html, hay que procurar añadir siempre la etiqueta <html> el atributo lang=”es”> <html lang=”es”> que es para el idioma en este caso “es” español de este modo los lectores de pantalla y sintecizadores de voz que reproduzcan varios idiomas son capaces de usar el acento y la pronunciación adecuados para cada idioma y no intentarán pronuciar el texto en el idioma principal usado por el programa o el documento, de forma similar sirve de ayuda para usuarios que tengan traductores de braille. En esta página se pueden encontrar los códigos para la representación de los nombres de idioma y su código correspondiente, país y su código. http://xml.coverpages.org/iso639a.html manualpáginasweb.blogspot.com 1. El Código html se divide en dos partes diferenciadas la cabecera y el cuerpo del documento. Entre las etiquetas <html> y </html> se escribe la etiqueta <head> y </head> En la cabecera se puede identificar el título, la descripción de la página y otra serie de parámetros que se verán más adelante por ejemplo el título de la página se escribe mediante la etiqueta <title> ejemplo </title> Otra etiqueta es la descripción el contenido de la página Ejemplo: <meta name=”description” content=”introdución a la estructura del html”/> Otra etiqueta son los Keywords o palabras, con las palabras que usaremos para que nos encuentren los buscadores por ejemplo; <meta name=”Keywords” content=”cabecera,cuerpo,documento”/> Procurar no utilizar palabras que se hayan introducido en el título o en la descripción no es necesario repetirlas. La importancia es que esto es lo que se verá en los buscadores en primer lugar el título y en el segundo lugar la descripción. Otros atributos meta importantes pueden ser también las siguientes: Esta etiqueta es importante si en un momento dado tenemos sobre todo sitios web, con varios idiomas. <meta name=”languaje”content=”es”/> La etiqueta Robots sirve para los buscadores e indica que tipo de documentos pueden buscar. <meta name=”robots”content=”indez,follow”/> Otra etiqueta muy importante es la “content type” <meta http-equiv=”content type”content=”text/html;charset=iso-8859-1”/> Esta etiqueta tiene mucha importancia ya que le dirá al navegador del usuario el juego de caracteres que deberá usar, si esta etiqueta faltara el navegador cojería juegos de caracteres por defecto, así que si eres español con caracteres especiales esta página se verá bien, pero si lo ven en EEUU no se verá nada por falta de caracteres o acentos y desde países como Japón seguramente fallará todo, si se pone esta etiqueta, el navegador usará los caracteres de esta etiqueta de esta manera con esta etiqueta se verá bien en todos los ordenadores. Existen varios estándares por los que podemos estar realmente seguros que una serie de caracteres extraños la “ñ”, “acentos”, que van a ver en todos los ordenadores del mundo se recomienda usar 1 de estos 2 valores que son: manualpáginasweb.blogspot.com Charset=iso-8859-1 Este es el que más se usa actualmente y que se recomienda para utilizar en idiomas más comunes Español, catalán, Euskera, Gallego, Portugues, Inglés, Francés. Otro estándar es el Charset=utf-8”> Juego universal de caracteres ha aparecido para simplicar el iso 8859 en un solo estándar, pero cuando se utilice el estándar “utf” y tengamos que escribir “acentos”, “ñ” se deberá sustituír por su código: Ejemplo: camión --- para que se acentúe habrá que sustituirlo por estos caracteres cami&oacute;n La ventaja de “utf” es que almacena todos los caracteres que existen actualmente para cualquier idioma y la desventaja es que tenemos que escribir el código fuente correctamente para que interprete dichos caracteres. En esta página se pueden encontrar todos los caracteres especiales en: http://es.wikipedia.org/wiki/caracteres El cuerpo de la página es lo que realmente interpretan los navegadores va siempre después de la etiqueta </head> y se identifica con la etiqueta <body> esta es la parte que el usuario verá dentro de la etiqueta <Body> para mostrar cualquier formato de texto o imagen o cualquier otro elemento multimedia, necesitamos usar las etiquetas para que todos estos contenidos aparezcan como queremos realmente que aparezcan Un ejemplo sería <br> salto de línea. Textos; 1. Parrafos, Bloques <body> -Utilizar el Adobe Dreaweaver CS3 Para escribir un párrafo utilizaremos la etiqueta <p> la casa </p> los parrafos pueden ser justificados al centro o a la derecha Ejemplo: <p align=”right”> El camión </p> (este parrafo se irá a la derecha. El atributo “align” soporta los siguientes valores (center,justify,left, right) En textos de imagenes también podremos poner para indicar la posición de estas imágenes con el atributo “align” Las etiquetas <div> </div> (te permitiran asignar ciertos atributos a bloques de contenido) manualpáginasweb.blogspot.com Ejemplos: <body> <p align=”right”> la casa</p> <p align=”right”> El camión</p> <div align=”right”> <p> la casa </p> <p>El camión</p> </div> </body> Ambos contenidos se alinearán a la derecha en este caso. Saltos de línea y divisiones horizontales En este capítulo vamos a aprender que son los enlaces, como se insertan los enlaces en las páginas web y que tipo de enlaces existen vamos a introducir el primer enlace la sintaxis es la siguiente: <p><a href=”destino”>contenido</a></p> Destino; Será una zona de la página actual, una página distinta, un correo electreónico o incluso un archivo. El atributo (href): es un enlace a otra parte del documento, lo que se le llama como enlaces internos, a otro documento de nuestro sitio lo que se conoce como enlaces locales, a un enlace de un documento de otra máquina diferente lo que llamamos enlaces externos o incluso a un correo electrónico y un archivo. En función del atributo href podemos agrupar los enlaces del siguiente modo, enlaces internos, enlaces locales, enlaces externos, enlaces con direcciones de correo y enlaces con archivos. Ahora vamos a ver como insertar enlaces internos; Los enlaces internos son los enlaces que se dirigen a otras partes de la página pero dentro de la misma página, este tipo de enlaces son esencialmente utilizados en páginas donde el acceso de contenido pueden verse dificultados devido a la gran cantidad de los mismos, mediante estos enlaces podemos ofrecer al vistante la posibilidad de acceder rapidamente al principio y al final de la página o bien a distintos conteniod dentro de una misma página, para crear un enlace de este tipo es necesario a parte del enlace de origen un segundo enlace que será colocado en el destino. Un Ejemplo con títulares de noticias paso a paso. <body> Vamos a suponer que queremos crear un enlace que apunte desde el principio de la página hasta el final de esta misma página. <body> < a href=”#final” símbolo (#) -- Identifica a los enlaces internos Final --- la zona con la que quereemos enlazar manualpáginasweb.blogspot.com Ejemplo; <body> (Al principio) < a href=”#final”>Ir al final de la página</a> Se verá en el navegador “Ir al final de la página” El enlace destino para que al pasar ir al final de la página, os pueda llevar al final de la misma, habrá que poner al final de esta página lo siguiente: < name=”final”></a> (sin colocar el corchete) </body> entre las etiquetas”><” se pondría el texto si se quisiera. Ahora vamos a crear más enlaces internos crearemos una lista con los diferentes contenidos de la páginas mediante la etiqueta <ol> y </ol> y los distintos contenidos y crearemos un enlace desde cada menú al contenido propio de dicho menú. Ahora vamos a la parte superior a introducir una lista ordenada <ol> y los elementos de la lista <li> Ejemplo para enlazar noticias que ya tenemos en la página copiada. <body> <a href=”#final”>Ir al final de la página</a> <ol> <li><a href=”#noti1> noticia1</a></li> <li><a href=”#noti2>noticia2</a></li> <li><a href=”#noti3>noticia3</a></li> Para enlazarlos con la noticia habrá que hacerlo de la siguiente manera en cada noticia nota va sin conchete. Ejemplo: <h1>< a name=”noti1”>lideres latinoamericanos unidos contra el tráfico de drogas</a></h1> <h1>< a name=”noti2”></a>Nadal, nuevo rey del tenis</h1> <h1>< a name=”noti3”></a>los aparatos elctrónicos dejan de ser privados al entrar en EEUU</h1> De esta manera podremos desplazarnos dentro de la misma página web. manualpáginasweb.blogspot.com Encabezados: En este apartado vamos a ver que son los encabezados y como usarlos correctamente. Los encabezados sirven para definir párrafos especiales los usaremos cuando vallamos a escribir títulos, subtítullos, etc.. es lo que nos permite dividir el documento en secciones, subsecciones etc.. son etiquetas que formatean el texto como un titular para lo cual asigna en un tamaño mayor de letra y colocan el texto en negrita: <h1>título</h1> Existen varios tipos de encabezados que se diferencian en el tamaño de la letra que utilizan: (Este encabezado es el más grande) <h2> y </h2> (Este será para encabezado de segundo nivel) <h3> y </h3> (Este es el encabezado más pequeño) Los encabezados admiten el atributo de alineado “align” <h1> y </h1> Ejemplo: <h1aling=”right”>título</h1> Un consejo que no se debe de olvidar nunca es utilizar las etiquetas de encabezado para formatear un texto, si queremos utilizar un encabezado más grande y en negrita usaremos.<h1> y </h1>. Ejemplo de los encabezados, imagina que vamos a hacer una página que trate de música y vamos a nombrar los distintos tipos de música que existe. Ejemplo: <body> <h1>música</h1> Aquí pondríamos algo relacionado sobre la música <h2>Tipos de música</h1> <h3>Rock</h3> <h3>Clásica</h3> Ahora no podríamos pasar al <h4> y </h4> pero si cambiamos el tema por ejemplo si ahora hablamos de cocina se empezaría de nuevo con el encabezado y sucesivamente como antes en música. <h1>cocina</h1> LAS FUENTES -¿Cómo modificar el tamaño y usar distintas tipográfias de fuentes? Ejemplo texto para las fuentes: Para cambiar las fuentes, tipografías y algunos otros elementos de los textos usaremos la etiqueta “font” ejemplo sin modificar el texto <body> <font> texto para las fuentes</font> manualpáginasweb.blogspot.com -¿Cómo modificar el tamaño del texto? para ello la etiqueta <font> necesita estar acompañada por el atributo “size” Ejemplo; <body> <font size=”5”>texto para las fuentes</font>. El valor del tamaño a de ser comprendido del 1 al 7 -¿Cómo modificar las tipográfias de las fuentes? Ejemplo: <body> <font size=”5”face=”Courier”> texto para las fuentes</font> Nota; Si introducimos un tipo de tipografia que el ordenador desconoce y nos la pondrá en “Time Roman”, para evitar esto suelen seleccionarse varios tipos de letras entre comas. Ejemplo: <body> <font size=”5”face=”Courier,arial,verdara”>texto para las fuentes</font> </body> Esto nos lleva a que si por ejemplo no disponieramos de la primera que es Courier, nos llevará a la segunda y en el caso de que no dispongamos de la segunda nos llevará a la tercera, y en el caso de que no dispongamos de la tercera usará la que tiene por defecto la Time Roman. Formateo de Texto; Aquí vamos a ver las distintas formas que existen de formatear los textos, comentar que ademas de todo lo relativo a los párrafos, uno de los aspectos primordiales del formateo de un texto es la propia letra, resulta muy común y práctico resaltar el texto en negrita entre otros igual que haríamos para cualquier documento que escribieramos en papel, todo esto y mucho más es posible por medio del html a partir de una serie de etiquetas, entre las cuales vamos a destacar las más importantes: <strong> (Sirve para dar un mayor enfasis y a la vez en negrita) Ejemplo; <body> <p>la<strong>casa</strong>de la pradera</p> -Otra etiqueta importante es la <em> y </em> manualpáginasweb.blogspot.com Esta etiqueta sirve par dar énfasis a diferencia de <strong> que era para dar mucho enfasis es itálica. Ejemplo: <p>la<em>casa</em>de la pradera</p> -Otra etiqueta muy importante es la etiqueta <u> y </u> Esta etiqueta lo que hace es subrayar la palabra que esta comprendida entre el inicio y el final de la etiqueta. Nota; Tener cuidado al subrayar ya que se puede confundir al lector pensando que es un enlace. Ejemplo: <p>la<u>casa</u>dela pradera</p> -Para definiciones pondremos la etiqueta <dfn> y </dfn> una palabra y su definición, también mostrará el texto en Italica Ejemplo: <p><dfn>NCSA Mosaic es un visualizador word wide web</dfn></p> -Cuando hablemos de títulos de péliculas, libros usaremos la etiqueta <cite> y </cite>, muchos navegadores lo interpretarán como Itálica. Ejemplo: <p><cite>el silencio de los corderos</cite></p> -Cuando hablemos de un texto citado pondremos la etiqueta <blokquote> y </blockquote> Ejemplo: <body> <blockquote> en un lugar de la mancha, <br/>de cuyo nombre no quiero acordarme...</blockquote> </body> -Cuando el texto citado sea más pequeño usaremos la etiqueta <q> y </q> de este modo no tiene practicamente sangrado. Ejemplo; <q>en un lugar de...</q> -Cuando se cita un texto en Inglés, al ser la página defnida en castellano y hace referencia a un texto en otro idioma; manualpáginasweb.blogspot.com Ejemplo: <head> <html lang=”es”> <meta name=”languaje” content=”es> Tendremos que indicar que realmente cambia de idioma, es muy importante además para los lectores de texto, añadiremos el atributo lang=”en” de Inglés a la etiqueta <blockquote> Ejemplo: <body> <blockquote lang=”en”> The power of the web is in its universality access by everyone regardless of disability is an esential aspect. </blockquote/ En este caso interpretaremos que el texto es un texto en inglés. Ahora vamos a pegar un párrafo en un texto en castellano de repente hace referencia a un término Americano, para distinguir este cambio de idioma usaremos la etiquta <span lang=”en-us”> el idioma de la palabra Ejemplo: <p> la versión 2 de las WCAG, esta todavía en <span lagn=”en-us”>working draft</span> Pero si este párrafo estuviera totalmente en Inglés, usariamos la etiqueta <p lang=”en-us”>, recordar siempre cuando haya un cambio de idioma en la página, indicarlo mediante el atributo “lang” en la etiqueta correspondiente. Ejemplo: <body> <p lang=”en-us”> The power of the web is in its universality </p> </body> -Con la etiqueta <big> y </big> el tamaño del texto es más grande de lo normal manualpáginasweb.blogspot.com Ejemplo: <p><big>texto</big><p/> -Con la etiqueta <small>y </small> el texto del tamaño es más pequeño: <p><small>texto</small></p> -Con la etiqueta <sub>y </sub> hace referencia a subíndice Ejemplo: <p> medida<sub>2</sub></p> En el navegador se verá de la siguiente manera: Medida 2 -Gastaremos la etiqueta <sup> y </sup> , para superíndices: Ejemplo: <p>medida<sup>2</sup></p> Asi se verá en el navegador: Medida 2 -Para insertar una dirección utilizaremos la etiqueta <address> y </address> aparecerá en Itálica. Ejemplo: <body> <p><address>C/Méjico21</address></p> </body> -Se pueden incluír varias etiquetas por ejemplo: se pueden intercalar las etiquetas, como se puede observar: <p><strong><address>C/Méjico 21, 2<sup>o</sup></address></strong></p> </body> Abreviaturas y acronimos Vamos a ver que son los acronimos y las abreviaturas, vamos a saber usarlas y introducirlas en un documento html, luego vamos a hacer un ejercicio de formateo de texto y como resumen de todo lo que llevamos dado hasta ahora visto, primeramente vamos a ver. Vamos a explicar que es abreviatura y acronimos. Una abreviatura es la representación gráfica reducida de una palabra mediante supresión de letras finales o centrales y que suele finalizar con un punto. Ejemplo: <body> <p> El Sr.Juan ha salido de casa, pero el Sr. Juan no ha desayunado</p> Otros ejemplos serian los siguientes, esto son abreviaturas Drcha. manualpáginasweb.blogspot.com Fdo. S.S.M.M Cuando introduzcamos una abreviatura en un documento html, la indicaremos mediante la etiqueta <abbr> y </abbr> seguidamente después del punto. Ejemplo: <body> <p>el<abbr>Sr</abbr>Juan ha salido de casa, pero el Sr.Juan no ha desayunado</p> </body> La primer vez que en un documento html utilizamos una abreviatura a la etiquerta <abbr> le introducimos el atributo <title> y </title> y le indicamos la palabra completa señor. Ejemplo; <body> <p>el<abbr title=”señor”>Sr</abbr>Juan ha salido de casa, pero el <abbr>Sr.</abbr> Juan no ha desayunado</p> </body> En el navegador se verá de la siguiente manera. El Sr; Juan ha salido de casa, pero el Sr. Juan no ha desayunado Al poner el cursor del ratón sobre (Sr) saldrá una imagen en un cuadrado que pondrá señor. Los acronimos Los acronimos son vocablos formados por la unión de letras de dos o más palabras generalmente por el inicio de la primera palabra y el final de la última o mendiante otro tipo de combinaciones similares, también se denomina acrónimo a las formas abreviadas que se pronuncian como una palabra, la palabra ONU sería un acronimo, la primera vez que nombremos un acronimo en nuetro documento de texto al igual que las abreviaturas indicaremos su significado mediante el atributo title; Ejemplo: <body> <p><acronym title=”Organización de las naciones Unidas”>ONU</acronym></p> </body> Otros acronimos serían Ofimática: Que es oficina de informática Ofni; Objeto volante no identificado Modem; Modulación de modulación El hecho de insertar la etiqueta title en los acronimos y abreviaturas la primera vez que se utiliza en la página, es para que de esta forma proporcionas una definición útil a todos los usuarios y lectores de pantalla que se pueden configurar para que se pronucien de diferentes maneras. manualpáginasweb.blogspot.com Otra ventaja de utilizar el atributo title para estas etiquetas es que resulta muy útil para los montadores de búsquedas, pues así saben por ejemplo que aquellos documentos en los que aparecen el acronico Tyc tic se están refiriendo a tecnología de la información y la comunicación y podrán de esta manera endescarlos mucho mejor. Ejemplo: Imagina que queremos enfatizar un texto importante, siempre utilizar el estilo lógico cuando sea posible que será el siguiente. Ejemplos; <p>hay que tener en cuenta que los precios son<strong>sin IVA</strong></p> Si queremos mostrar Sin IVA en color rojo será de la siguiente forma. Ejemplo: <body> <p>hay que tener en cuenta que los precios son<strong style=”color:red;”>sin IVA</strong></p> Las listas: Vamos a ver las listas, que tipos de listas existen y como insertarlas en un documento html. Las listas son utilizadas para citar, numerar y definir objetos, una lista no es más que una grupación o enumeración de elementos de información. Tipos de listas: Listas desordenadas Listas Ordenadas Listas de Definición Listas Aninadas. Listas Desordenadas; Para hacer una lista desordenada usaremos la etiqueta <ul> y </ul> y para cada elemento de la lista usaremos <li> y </li> Ejemplo: Vamos a hacer una lista de nombres de personas. <body> <p> lista de nombres:</p> <ul> <li> Sr.Juan Menendeza/li> <li>Sr.Manuel Pérez</li> <li>Sr.Jose Fernandez</li> </ul> </body> manualpáginasweb.blogspot.com Pero habrá que ponerle la etiqueta <abbr title> en el primero por ser la primera vez, querdaría de la siguiente manera. <body> <ul> <li><abbrtitle=”señor”>Sr.</abbr></li> <li><abbr>Sr.</abbr>Manuel Pérez</li> <li><abbr>Sr.</abbr>José Férnandez</li> </ul> </body> Son listas desordenadas por que no nos importa el orden en los que aparecen los nombres. Listas ordenadas; Son las listas en las que si importa el orden usaremos para este tipo de listas el atributo <ol> y </ol> para listas ordenadas y para cada elemento de la lista el elemento <li< y </li> Ejemplo: De una receta <body> <p>receta:</p> <ol> <li> Incluír en una pota un chorro de aceite</li> <li> Introducir 2 dientes de ajo</li> <li> Volcar un vaso de arroz</li> </ol> </body> En este ejemplo y al ser una lista ordenada en el navegador se verá de la siguiente manera con el primero, segundo, tercero etc... 1.Incluír en una pota un chorro de aceite 2.Introducir 2 dientes de ajo 3.Volcar un vaso de arroz Si por el contrario no queremos que empiece por el 1 a la etiqueta <ol> le insertaremos la etiqueta start=”10”> Ejemplo; <body> <p>receta:</p> <ol start=”10”> En el navegador se verá 10.Incluír en una pota un chorro de aceite 11.Introducir 2 dientes de ajo 12.Volcar un vaso de arroz manualpáginasweb.blogspot.com Listas de definiciones; las listas de definiciones se usan para formatear un conjunto de palabras con sus correspondientes descripciones Ejemplo: Para formatear una lista de descripciones o definiciones se usarán las etiquetas <dl> Cada elemento a definir utilizaremos la etiqueta <dt> (palabra a definir) Cada definición tendrán que especificarse entre la etiqueta <dd> y </dd> (Definición) Ejemplo: <body> <p>diccionario de la real academia</p> <dl> <dt> Monitor:</dt> <dd>también llamado “pantalla”, es un dispositivo de salida que, mediante ...</dd> <dt> telefono móvil:</dt> <dd>básicamente esta formada por dos grandes partes: una red de comunicaciones ...</dd> </dl> Listas anidadas: Las listas anidadas son listas que se pueden especificar unas dentro de otras, se puede insertar <ul> de listas desordenadas, insertamos la etiqueta <li> para los elementos de la lista, y sin cerrar la etiqueta <li> insertamos dentro de este elemento, una lista ordenada <ol> y después el primer lemento de la lista ordenada de nuevo <li> y este elemento ya si lo cerramos </li> Ejemplo: Esto seria una lista ordenada dentro de una lista desordenada. <body> <ul> <li> primer elemento</li> <ol> <li> sublista </li> <li>otro elemento</li> </ol> </li> </ul> manualpáginasweb.blogspot.com Otro ejemplo de listas anidadas: <body> <p>Ciudades del mundo</p> ( Un párrafo de ciudades del mundo) <ul> (Lista desordenada de los paises Argentina y Uruguay) <li> Argentina <ol> (Lista ordenada que se encuentra dentro de Argentina) <li> Buenos Aires</li> <li>Bariloche</li> </ol> </li> <li>Uruguay <ol> <li>Montevídeo</li>(ciudades) <li>Punta del este</li> </ol> </li> </ul> </body> En el navegador se verá de esta manera: .Argentina 1.Buenos Aires 2.Bariloche .Uruguay 1.Montevideo 2.Punta del este ENLACES: 1.Enlaces Internos: Nota los enlaces de texto que vallan subrayados y coloreados para que el usuario no lo confunda. Ejemplo: <body> <p><a href=”destino”>contenido</a></p> href – a un enlace interno, locales y archivos Los enlaces internos: son los enlaces que se dirigen a otras partes de las páginas pero dentro de la misma página mediante estos enlaces se podrá ofrecer al usuario el principio y el final de la página, o bien a distintos contenidos dentro de la misma página. manualpáginasweb.blogspot.com Ejemplo un enlace que dicte desde el principio de la página hasta el final de esta misma página. <body> <a href=”#final”>Ir al final de la página</a> pero no hará nada se necesitará un segundo enlace que será colocado en el destino la colocaremos al final de esta página. <body> <a name=”final”>aquí escribiremos si queremos</a> </body> Crear enlaces mediante contenidos de las páginas poniendo listas y crearemos un enlace mediante cada menú. Sin enlace destino. <body> <a href=”#final”>Ir al final de la página</a> <ol> <li>Noticia1</li> --- <li><a href=”#noti1>Noticia1</a></li> <li>Noticia2</li>---<li><a href=”#noti2>Noticia2</a></li> <li>Noticia3</li>---<li><a href=”#noti3>Noticia3</a></li> </ol> Crear los enlaces con enlace destino <h1><a name=”noti1”>lideres latinoamericanos unidos contra el tráfico de drogas</a></h1> De esta manera con todas las noticias, el enlace destino no lleva corchete. Ejemplo para subir o bajar principio y final en la misma página: <body> <a name=”inicio”></a> Ejemplo: ponemos arriba esto para que nos lleve al final de la página. <a href=”#final>final de la página</a> y al final de la página colocaremos lo siguiente <a name=”final”></a> (esta sin colocar el corchete) Enlaces Locales; En este tutorial vamos a ver que son los enlaces locales son aquellos que se dirigen a otras páginas, pero en nuestro mismo sitio web. Ejemplo: Tenemos una carpeta creada donde tenemos los archivos html que vamos a usar por un lado tenemos “uno html”, hemos creado un directorio de prueba “directorio de prueba”, una buena costumbre será poner en mínuscula tanto el archivo como el directorio, porque muchos servidores hacen definición entre lo que son mayúsculas y minúsculas si a veces usamos mayúsculas y otras veces minúsculas nos puede llevar seguramente a equivocación entonces es una buena costumbre. Accedemos al directorio prueba y aquí encontramos otro archivo html que llamaremos “dos.html” manualpáginasweb.blogspot.com Vamos a editarlos 1 por 1, abrimos primero “uno.html” vamos a ponerle un título y un encabezado y un enlace dentro de un párrafo. Ejemplo: (Vamos a editar el archivo “uno.html” <head> <title>página uno</title> <head> <body> <h1>página uno</h1> <p><a href=”dos.html”>Enlace a página dos</a></p> </body> Ahora vamos a editar el archivo dos: <head> <title>página dos</title> </head> <body> <h1>página dos</h1> <p><a href=”uno.html”>enlace a página uno</a></p> </body> Ahora vamos a editar de nuevo “uno html” En la etiqueta href tenemos que indicar donde se encuentra nuestro archivo “número dos” y su nombre, ahora mismo solo tenemos el nombre “dos.html”para acceder de uno a dos tenemos que acceder al “directorio de prueba” que en este caso será el nombre del directorio. Ejemplo: <head> <title>página uno</title> </head> <body> <h1> página uno</h1> <p><a href=”directorio prueba/dos.html”>Enlace a página dos</a></p> </body> Ahora lo que hará será que ya podremos ir desde la página uno hasta la página 2 pero de “página dos” a página uno no funcionará por lo que deberemos de ir a editar la “página dos” Ahora será a la inversa es decir llevarnos hasta el archivo “página uno” habrá que bajar un nivel en: Un directorio se baja con (../) (..) Esto es lo que hace bajar el directorio (/) Esto es para separar del nombre del archivo. manualpáginasweb.blogspot.com Ejemplo: <body> <h1> página dos</h1> <p><a href=”../uno.html”>Enlace a página uno</a></p> </body> Otro ejemplo vamos a directorio prueba y creamos otra carpeta a la que vamos a llamar otra-carpeta vamos a introducir el documento “dos.html”dentro de “otra carpeta” ahora ya no funciona cuando se pincha en el navegador. Ejemplo para que se vea. <body> <h1>página uno</h1> <p><a href=”directorio-prueba/otra-carpeta/dos.html>Enlace a página dos</a></p> Ahora vamos a “uno.html”, si (..) puntos significa que aumenta un nivel y luego hay que separarlo por una (/) así tendría que funcionar. Ejemplo: <body> <h1> página dos</h1> <p><a href=”../../uno.html”>enlace a página uno</a></p> </body> Enlaces externos; Los enlaces externos son aquellos enlaces que se dirigen hacia páginas que se encuentran fuera de nuestra página web, es decir cualquier otro documenhto que no forma parte de nuestro sitio, este tipo de enlaces es muy común y no representa ninguna dificultad vamos a enlazar con video2brain.com <body> <a href=”http://video2brain.com/es/”>Video2Brain.com</a> Todas las direcciones web o url empiezan por (http://) esto es lo que diferencia los enlaces externos de los enlaces locales, si no insertaramos esta etiqueta al ir al navegador y pinchar nos dará error, si no lleva esta protócolo el navegador interpreta que es un enlace local y no externo como tiene que ser. Enlaces con direcciones de correo: Ejemplo: <body> <p><a href=”mailto:[email protected]”>haz clic para enviarme un correo<a/></p> </body> manualpáginasweb.blogspot.com Si hace clic se abrirá nuestro correo predeterminado directamente.- Otro factor importante a tener en cuenta en los enlaces de correo electrónico es que a demás de la dirección del correo electrónico del destinatario, también podemos colocar el asunto del mensaje, esto se consigue colocando después de la dirección colocar ?subject=contesta rápido. Ejemplo: <body> <p><a href=”mailto:[email protected]?subject=contesta rápido”> haz clic aquí para enviarme un correo</a></p> A parte de poder poner el asunto, podemos poner otros valores, como por ejemplo CC (Correo con copia a otra cuenta de correo) para juntar el asunto con otro destinatario lo haremos con el símbolo &. Ejemplo: <body> <p><a href=”mailto:[email protected]?subject=contestarapido&[email protected]”>haz clic aquí para enviarme un correo</a></p> </body> Nota, el inconveniente que tiene este tipo de contactos en tu página web, puede ser que el usuario que esté visitándola y quiera ponerse en contacto , no tenga un programa de gestión de correo, y entonces no tendrá opción, de poder envicar ese correo, también puede ser que esa persona que está consultando tu página, no esté en su ordenador, lo este haciendo desde otro ordenador y en el que tambpoco tiene ninguna cuenta de correo de este modo le vas a impedir que pueda ponerse en contacto contigo tendrás que permitirle otras formas, para poder ponerse en contacto contigo, a través del correo electrónico. Enlaces a archivos Vamos a ver como enlazar archivos y luego un resumen de todos los enlaces vistos, nombre del archivo poner. Ejemplo: <body> <h1>descargas</h1> <ul> <li><a href=”archivo-comprimido.zip”>Archivo1</a></li> </ul> Ya estaría enlazado a ese archivo en el navegador. Lo abriremos con el navegador y nos pondrá DESCARGAS .Archivo1 manualpáginasweb.blogspot.com Ejemplo: Ahora vamos a hacer otra carpeta que se va a llamar “nueva ruta” y el “archivo-comprimido.zip” lo introducimos dentro de “nueva ruta” vamos al navegador y ya no funciona y lo hemos movido a la carpeta “nueva ruta” lo que haremos será ir a esta carpeta y editarla. Ejemplo: <body> <h1>Descargas</h1> <ul> <li><a href=”nueva-ruta/archivo-comprimido.zip”>Archivo1</a></li> </ul> </body> Ahora vamos a abrir un archivo PDF Ejemplo: <body> <h1>Descargas</h1> <ul> <li><a href=”nueva-ruta/archivo.pdf”>Archivo pdf</a></li> </ul> </body> Atributos Vamos a ver los atributos target=”_blank” será para abrir una nueva ventana, siempre que usemos el atributo target=”_blank” recordar que la definición (doctype) es strict no nos la permite, tiene que se transitional, es aconsejable que no se utilice este atributo ya que es un poco incomodo para el usuario, que se le habra una ventana nueva y si lo tuvieras que hacer por necesidades, lo mejor es avisar al usuario de que ese enlace va a abrir una nueva ventana. Ejemplo: <body> < a href=”http://www.video2brain.com” target=”_blank”>video2brain</a> </body> Vamos a ver ahora el atributo title. El atributo title proporciona un título al enlace que amplia la información sobre el destino del mismo, el valor es un texto para ampliar la información del destino del enlace si no necesita ser ampliada esta información, debe de evitarse añadir el título, los navegadores suelen interpretar los títulos mediante un mensaje emergente. manualpáginasweb.blogspot.com Ejemplo: <body> <a href=”http://www.video2brain.com”target=”_blank”title=”cursos videotutoriales adobe diseño programación linux”>video2brain</a> </body> En el navegador se verá el título en un cuadrado cuando cursemos con el ratón la palabra video2brain que es lo que se verá en el navegador. IMAGENES: Insertar imagenes; Entramos en la carpeta de imágenes, vamos al cuerpo a insertar la primera imagen, la etiqueta utilizada para insertar imagenes, es <img con el atributo src=”el valor” es la ruta donde se encuentra la imagen, vamos de nuevo a la carpeta donde tenemos los archivos y vamos a insertar esta imagen “alieng.gif”. Seria de esta manera; <body> <img src=”imagenes/alien.gif”> </body> El valor del atributo “src” puede ser relativo, es decir la imagen estará fisicamente en nuestro sitio web, como el caso de acabamos de ver en el navegador o absoluta que las imagenes estarán colocadas en otro sitio web. Ejemplo; Vamos a insertar en nuestra página el logotipo de video2brain 1.Pulsamos botón derecho 2.Abrimos Propiedades 3.Y nos da la “url” donde está situada la imagen que se llama “logo.gif” 4.Copiamos la url 5.Volvemos al editor y insertarmos la url Ejemplo como se inserta: <body> <img src=”http://video2brain.com/es/images/logo.gif”> </body> Ejemplo: En este caso tenemos una carpeta de imagenes, alien.gif Del archivo documento uno.html, llama al archivo imagenes, ¿que ocurre si copiamos esta imagen? “alien.gif” y la introducimos en el mismo directorio que en nuestro documento “uno.html”, tendríamos que ir al documento donde se encuentra la etiqueta “img” y cambiar el atributo “src”, quitariamos imagenes y guardar el documento. manualpáginasweb.blogspot.com Ejemplo: <body> <img src=”alien.gif”> Atributo ALT Vamos a coger otra imagen <body> <img src=”imagenes/novedades gif> Todas las imagenes deben disponer de un equivalente textual que proporcione la misma información o que cumpla la misma función que la imagen, en este caso vamos a guardar el archivo y abrirlo en el navegador y la imagen se verá y proporciona al usuario novedades online por lo tanto la imagen se verá y proporciona al usuario novedades online por lo tanto la imagen de “novedades.gif”, tiene que contener el atributo “alt”=que proporcione la misma información que el navegador, el texto alternativo indica a los dispositivos del usuario ¿que es?, lo que deben hacer en caso de no mostrar las imágenes, en una fotografía o en un logotipo podemos describir de forma sencilla su contenido, de forma que las personas que no ven la imagen se hagan una ídea de la misma, en este caso: Ejemplo: <body> <img src=”imagenes/novedades.gif”alt=”Novedades online”> Para el texto alternativo existen 3 tipos de casos. Ejemplo: Vamos a insertar el logotipo de video2brain Si pulsamos imagen y nos vamos a Replace Images With Alt Atributes, esto significa que desabilitamos la imagen, en este caso vemos que aparece el texto alternativo, es decir el valor del atributo Alt y ahora en modo texto en lugar de la imagen, para el texto alternativo existen 3 tipos de casos.Ejemplo-(Imagenes sencillas) Vamos a insertar el logo tipo video2brain 1.Vamos a averiguar la ruta que está dentro de imagenes y pone logo.gif estará en la carpeta de imagenes se llama /logo.gif, ¿Cuál sería el texto alternativo? Correcto para este caso, piensa lo siguiente si nos vamos al navegador y vas a la página de video2brain y no pudieras ver las imagenes que se muestra, que información te daría a ti, más acertada para saber que imagen hay insertada en este caso, yo creo que el texto alternativo más correcto sería “Logotipo de video2brain” Ejemplo: <body> <img src=”imagenes/logo.gif”alt=”Logotipo de video2brain”> manualpáginasweb.blogspot.com Imagenes Decorativas: Las imagenes decorativas son aquellas que se usan con fines decorativos y apenas aportan información o necesitan ningún texto alternativo por ejemplo las imágenes usadas como espacios o imagenes invisibles o transparentes o imagenes que se usan como líneas, le daremos el ancho “width” Ejemplo con una imagen transparente <body> 1<img src=”imagenes/spacer.gif”alt=”logotipo de video2brain”>width=100p>2 </body> En el navegador se verá claramente que el 1 se separa del 2 el ancho que le hemos dado de 100px en width (ancho), la imagen no se ve pero si que está en este caso la imagen no aporta ninguna información, por lo tanto el texto alternativo tendría que estar en blanco, pero siempre tenemos que incluír el atributo “Alt” en la etiqueta img, aunque esté vacia, si no, no cumpliría las directivas del (html 4.01) -DOCTYPE Imagenes más complejas. Ahora vamos a insertar imagenes más complejas, si la información aportada por la imagen es importante y precisa de una descripción más detallada buscamos en la carpeta una imagen compleja como puede ser “gráfica.jpg” Ejemplo: <img src=”imagenes/gráfica.jpg”alt=”gráfico de barras 3D sobre ventas”> En esta imagen al ser una imagen compleja no es suficiente con el atributo “alt” para entender la gráfica, usaremos el atributo “longdesc=”” Que valor puede adptar el atributo “longdesc”, este atributo del elemento “img” proporciona la dirección de una página html en la que se incluye una descripción detallada de la imagen en este caso vamos a llamarla por ejemplo para la imagen de una figura se le podría aportar la misma información en una table de datos en modo texto. Ejemplo: <img src=”imagenes/gráfica.jpg”alt=”Gráfico de barras 3D sobre ventas” longdesc=”explicación.html”> Vamos a insertar otra imagen y veremos que valor admite el atributo “alt” insertamos “novedades.gif” Ejemplo: <img src=”imagenes/novedades.gif alt=”” En el atributo “alt” tenemos que insertar el mismo texto que aparece en la imagen en este caso “novedades online” exactamente igual siempre que lleva una imagen con texto el atributo “alt” será exactamente el mismo Ejemplo: <img src=”imagenes/novedades.gif” alt=”novedades online”> Vamos a insertar de nuevo alien.gif, para imagenes con animaciones abría que describir, escuetamente, la imagen y la animación. manualpáginasweb.blogspot.com Ejemplo: <img src=”imagenes/alien.gif”alt=”marciano en nave espacial volando”> De esta manera explicaremos la imagen y el movimiento de la imagen. Otros atributos; Con esto vamos a aprender a insertar atributos aplicados a la imagen, como puede ser la altura, el ancho de la imagen, el borde y el alineado de la imagen, primeramente vamos a insertar un encabezado <h1> y </h1>, después insertaremos una imagen, en este caso vamos a insertar la imagen “logo.gif” en el atributo “alt” vamos a poner el siguiente texto “logotipo de video2brain” Ejemplo: <body> <img src=”imagenes/logo.gif” alt=”logotipo de video2brain”> En el navegador se verá de la siguiente forma. IMAGENES VIDEO2BRAIN Ahora vamos a ver los atributos altura y anchura, para ello hay que tener en cuenta que todos los archivos gráficos poseen unas dimensiones de ancho y alto expresadas en pixeles (px) estas dimensiones pueden obtenerse a partir del propio diseñador gráfico o bien haciendo clic sobre el botón derecho de una imagen vista por el navegador, para luego elegir las propiedades sobre el menú que se despliega. Ahora nos vamos al navegador, pulsamos botón derecho, propiedades y en dimensiones de la imagen nos da la dimensión que en este caso sería (“179px 33px”) (179) sería el ancho y (33) será el alto. Vamos ahora a aplicar estas direcciones al atributo “img” ejemplo: width-- Ancho y Heigth---- Alto <body> <h1>imagenes</h1> <img src=”imagenes/logo.gif” alt=”logotipo de video2brain”width=”179px”heigth=”33px”> </body> Pero al ir al navegador y actualizar la página no habrá ninguna incidencia en las imagenes, el motivo es que cuando no indicamos a la etiqueta “img” ningún ancho ni alto, el navegador, interpreta el ancho y alto original de dicha imagen, por lo tanto ahora, al aplicarle las dimensiones reales, no sufre ninguna modificación, la imagen. Ejemplo para variar el ancho de la imagen width <img src=”imagenes/logo.gif”alt=”logotipo de video2brain”width=”279px”heigth=”33px”> manualpáginasweb.blogspot.com La ventaja de explicitar el ancho (Width) y el alto (Heigth) de una imagen en nuestro código es que ayuda al navegador a confeccionar la página de forma que nosotros deseamos, antes incluso que las imagenes hayan sido cargadas, así pues si las dimensiones de las imágenes han sido proporcionadas, durante el proceso de carga, el navegador reserva el espacio correspondiente a cada imagen, el usuario podrá comenzar a leer tranquilamente el texto sin que este se mueva de un lado a otro cada vez que se cargue una imagen. Si lo que pretendemos es aumentar el tamaño, la perdida de calidad en la imagen se verá afectada. Para hacer una imagen más pequeña Ejemplo: <img src=”imagenes/logo.gif alt=”logotipo de video2brain”width=”79px”heigth=”14px” Nota: Reducir una imagen no es aconsejable, mejor es editarlo con un editor de imagenes, tipo fotosoft. Ahora vamos a ver el atributro Border. El atributo “border” define el tamaño en pixeles (px) del cuadro que rodea la imagen, de esta forma podemos recuadrar nuestra imagen si lo deseamos, en dicho caso tenemos que especificar el atributo “border” igual a (=””) el número que queramos que tenga ese borde en este caso le daremos 1px Ejemplo: <img src=”imagenes/logo.gif”alt=”logotipo video2brain” width=”179px” heigth=”33px” border=”1px”. Si en el atributo “border” le aplicamos un 0 este no tendrá borde. Vamos a ver ahora los alineados de textos y imagenes que es el que es el mismo atributo (“align=””) Ejemplo: align=”right”ira a la derecha <img src=”imagenes/logo.gif alt=”logotipo de video2brain”width=”179px” heigth=”33”border=”0” align=”rigth”> Etiqueta “align=”” Admite los siguientes valores top- Es para que el texto coincida con la parte superior de la página middle- El texto aparece centro en la imagen Enlaces con Imágenes: En este video tutorial vamos a usar imagenes como enlaces Vamos a utilizar la imagen “logo.gif” una imagen aparece con un borde a su alrededor incándolnos que está enlazada. manualpáginasweb.blogspot.com Ejemplo: <body> <a href=”http://www.video2brain.com/es”><img src=”imagenes/logo.gif”alt=”logotipo de video2brain”><a/> </body> También podríamos enlazar un texto y una imagen Ejemplo: Colocando un enlace de video2brain.com tanto la imagen como el texto nos llevará a la misma página seleccionada. Y con el Ejemplo de este caso <a href=”http://video2brain.com/es”>enlace de video2brain.com-<img src=”imagenes/logo.gif”alt=”logotipo de video2brain”border=”0”></a> Vamos a introducir ahora un enlace de correo electrónico y cuando pinchemos tanto el texto como la imagen se nos abrirá nuestro correo predeterminado con la dirección ya escrita. Ejemplo: <body> <a href=”[email protected]”>enlace de video2brain.com-<img src=”imagenes/logo.gif”alt=”logotipo de video2brain”border=”0”></a> </body> MULTIMEDIA Tengamos en cuenta que a la hora de incluír ficheros de sonido en nuestras páginas web debemos distinguir entre los que pueden ser directamente ejecutados por el navegador y aquellos que deben ser abiertos por un programa propio, que deberá tener el usuario en su equipo, para concretar un poco más, debemos saber que existen dos maneras de escuchar los archivos de audio en Internet, por un lado una aplicación del reproductor multimedia instalado por defecto en el ordenador del visitante ya sea “windows media players” “Kuitan”etc... que va a abrirle en una ventana nueva y reproducir el archivo de audio y por otra parte una extensión o “plugim” que estará instalado en el navegador del usuario y que va a mostrar un pequeño panel de control con play, avanza, rápido, stop en la página web por lo tanto será insertado en la misma. Vamos a ver un ejemplo de la segunda opción, esta claro que esta segunda opción es mucho más interesante que la primera, porque permite escuchar, ver y manipular en la misma página, mientras se está reproduciendo el contenido multimedia, sin tener que tener ningún sofware opcional. Tipos de Reproductores: “Windows media”, “crearplayer” y “widtime” uno de estos 3 reproductores de audio a sido definido por defecto para leer archivos de audio de una manera integrada, es decir que si se han insertado correctamente en la página web un archivo de audio el reproductor del usuario, va a arrancarse automáticamente cuando se cargue la página. Es imposible saber cual será el reproductor de audio que será utilizado, pero hay algo que va a simplicar normalmente las cosa, los 3 reproductores citados son capaces de reproducir archivos “mp3” esto quiere decir que si queremos estar seguros de una escucha correcta de nuestro archivo de audio en practicamente todos los reproductores, el mejor formato a utilizar es el “MP3” para todos nuestros archivos de audio. manualpáginasweb.blogspot.com Object y Embed; Vamos a insertar nuestro primer archivo de música, meteremos el archivo que tenemos guardado “1.mp3” Ejemplo: <body> <a href=”música/1mp3”>música</a> </body> Al pinchar sobre el enlace se reproduce el archivo de música ¿qué inconvenientes tiene el enlace directo a archivos de música?, primero que la música no arranca de manera automática, pues previamente tiene que ser descargada, y lo más importante, el reproductor de audio arranca en otra ventana o el archivo es descargado en el ordenador, no se inserta por lo tanto en la página, lo que impide por ejemplo; trabajar sobre un texto, sobre audio al mismo tiempo que en una única ventana. Otra opción para insertar audio en tu documento html es el método “embed” este método es el más simple, pero no el más eficaz ya que no ocupa más de 1 línea y por lo tanto es el más fácil de modificar o de manipular. Ejemplo: <body> <embed src=”musica/1,mp3”width=”150”heigth=”100”></embed> </body> Al guardar y actualizar la página viene uno de sus inconvenientes puede provocar errores con algunas versiones de navegadores, otro inconveniente de este método es que el archivo de audio debe cargarse completamente antes que reproducirse, al igual que lo llevamos con la forma de enlazar un archivo de audio musica. La etiqueta “embed” a parte del atributo “src” “width”(ancho) y “heigth” (Alto) admite también otra serie de atributos que no vamos a comentar, por que no sirven para todos los reproductores por ejemplo Autoplay: Funciona para algunos navegadores lo que hace reproducir automáticamente el audio o decirle si le damos un valor “yes” y si le damos un valor “no” no se reproducirá en otros sin embargo funciona “autoestart=false o true” Vamos a comentar el siguiente método para la inserción de audio y vídeo que es “object” este método es el más complicado, pero tambien permite con toda seguridad que nuestros visitantes puedan escuchar el archivo de audio perfectamente, existen muchas formas de insertar el elemento “object” En un documento y muchos parámetros de dicha etiqueta, vamos a ver un ejemplo. <body> <object type=”audio/mpeg”data=”musica/1.mp3”width=”200”heigth=”120”> <param name=”src”value=”música/1.mp3”> <param name=”autoplay”value=”true”> <a href=”musica/1.mp3”>Escuchar música</a> </object> manualpáginasweb.blogspot.com type=”audio/mpeg--- Indica que tipo de archivo es. Data=”musica/1.mp3”--Indica la url de dicho archivo. Width”200”-- Indica el ancho del reproductor. Heigth=”120”-- Indica el alto del reproductor. <param name=”src”value=”musica/1.mp3” Autoplay para que se reproduzca automaticamente <a href=”musica/1.mp3”>escuchar música</a> Esto es un enlace por si algún usuario no pudiera reproducir la etiqueta “object”. Flash; La utilización de flash permite evitar los problemas habituales de compatibilidad devido al navegador, flash es una extensión o pluggin y no un reproductor multimedia como puede ser el “kuttaims” sin embargo la extensión de flash esta disponible en otras plataformas, el reproductor flash lo que hace es leer los archivos que se llaman animaciones, pero que son en realidad, pequeños programas que pueden contener audio, video, animaciones, etc... flash puede ser utilizado para crear un reproductor multimedia, lo más importante es que flash es capaz de leer en formato mp3 original, eso significa que es fácil leer un archivo mp3 con flash ¿como hace flash para leer un archivo mp3? Ejemplo; <object type”application/x-shockware-flash”data=”flash/rebotes.swf”width=”150”heigth=”150”> <param name=”movie”value=”flash/rebotes.swf”> <param name=”quality”value=”high”> <param name=”wmode”value=”transparent”> <param name=” allowscriptaccess”value=”samedomain”> </object> Object hace una llamada a un archivo de flash. Type: Indica el tipo de archivo multimedia en este caso sería flash esta es la línea que siempre hay que incluír cuando utilicemos flash. <object> type=”aplication/w-shockware-flash” Data-- Será para indicar la ruta en la que va incluído este archivo, los archivos flash tienen la extensión (swf) siempre. Data=”flash/rebotes.swf” Esto es exactament la url <param name=”movie”value=”flash/rebotes.swf”> Esto quieredecir calidad alta: <param name=”quality”value=”higth”> Modo Tranparente; <param name=”wmode”value=”transparent”> Ahora vamos a insertar de un archivo de flash a un archivo mp3 manualpáginasweb.blogspot.com 1-Primero hay que descargas el archivo swfp de flash de diu lo podemos encontrar en esta página, que te explica como hacerlo. Http://www.blup.fr/2005/02/16, tendremos un enlace en dexplayer.swf 2-Tiene licencia “licence Creative Commons” una vez guardado vamos a insertar el siguiente código: <object type=”aplication/x-shockwareflash”data=”flash/dexplayer.swf?son=music/1.mp3”width=”200”height=”20”><param name=”movie”value=”flash/dewplayer.swf?son=music/1.mp3”> </object> En este caso en el atributo data incluímos la url del archivo es decir en el directorio /flash/se encuentra dexplayer.swf, cerramos un interrogante ? son=y aquí indicamos la url del mp3 en value indicamos de nuevo lo que pone en data. Existen otras maneras mucho más sencillas para insertar vídeos como puede ser la página de http://www.youtube.com 1-Seleccionamos el vídeo 2-Lo paramos y en lado derecho “you tube” nos permite copiar el código y queda muy parecido a lo que teniamos anteriormente. Así es como quedaría: <body> <object width=”425” heigth=”344”> <param name=”movie”value=”http://www.youtube.com/v /5BeCw75wvyw&fs=1”></param> <param name=”allowfullscreen”value=”true”></param> <embed src=”http://www.youtube.com/v/5BeCw75wvyw&fs=1”type=”application/x-shockwareflash”allowfullscreen=”true”width=”425”heigth”344”></embed> </object> Colores y fondos; Código RGB como podemos aplicar colores a los distintos atributos de una página web, y como podemos poner colores distintos al fondo de un documento html 1ªDescargar el siguiente programa. colour_contrast_analixer.exe. Desde la siguiente página http://www.visionaustralia.org.au/info.aspx?page=959 manualpáginasweb.blogspot.com 2ªBuscar descarga (versión española) que pondrá (analizador de contraste de color(zip.195KB) El hecho de poder poner color a las páginas web les da mayor vistosidad, para especificar colores dentro de una página se utiliza el código rgg término en Inglés que hace refenecia al color rojo, verde y azul en los cuales podemos especificar distintas tomas de colores. Primero explicar que los número hexacecimales se forman utilizando 16 digitos, estos digitos son de menos a mayor 0,1,2,3,4,5,6,7,8,9, y luego las letras mayúsculas A,B,C,D y F, para especificar un color en un documento html se utiliza el carácter#. Ejemplo: #000000--Los dos primeros serían para el color rojo: #000000 Los siguientes serían para el color verde: #000000 Los dos últimos serían para el color azul: #000000 Para la intensidad del color se hará referencia a que 0 es el menos intenso y que FF Ahora vamos a hacer una mezcla entre varios elementos. Ejemplo: #FFFF00 Esto vendria a significar mucho rojo, mucho verde y poco azul. Se convertiría en color amarillo. También se pueden utilizar numeros para mayor o menor contrarste Ejemplo: #FF3333 #FF9999 Lo más importante de este programa es que nos permite comparar el contraste del color entre un fondo de pantalla. “Background” y el texto que está por encima del texto”Foreground” Aplicar colores a un documento: Vamos a aplicar color a un texto especifico, por ejemplo: <body> <p> Este texto se verá<font color=”#FF0000”>rojo</font></p> Ahora vamos a aplicar un color de texto a todo el documento y va a ser todo el documento de color verde: <body text=”#00FF00”> manualpáginasweb.blogspot.com Se verá en el navegador; Este texto se verá --- En color verde pero rojo se verá en rojo por la etiqueta <font> si quitaramos esta etiqueta todo el texto sería verde Ejemplo: <body text=”#00FF00”> <p> este texto se verá rojo</p> Ahora vamos a hacer el color del fondo del documento en color negro, utilizarmos la etiqueta “bg color” Ejemplo; <body text=”00FF00” bg color=”#000000”> Al actualizar la página se verá todo en negro el fondo. Ahora vamos a explicar el color de los enlaces; Ejemplo: <p> Esto es un<a href=”http://www.yahoo.es”title=”página principal de yahoo”>enlace</p>. Los enlaces deben diferenciarse del resto del texto de la página, para que los usuarios puedan identificarlos facilmente. Un enlace tiene 3 colores, estos tres colores se pueden cambiar mediante tres atributos. Para el enlace que no ha sido visitado el atributo link Ejemplo, en color blanco. <body text=”#00FF00” bg color=”#000000” link=”#FFFFFF” Para el enlace ya visitado será vlink y alink es el color de los enlaces activos, un enlace de estas condiciones es cuando se hace click en el enlace. Ejemplo: <body text=”#00FF00”=”#000000”link=”#FFFFFF”vlink=”#99CC00” alink=”#CCCCCC”> IMAGEN DE FONDO Vamos a aprender como insertar una imagen como fondo de un documento para ello utilizaremos la etiqueta <body background=”img/bg.gif”> que será el nombre de la fotografía gif. Ejemplo: <body background=”img/bg.gif”> <p> esto es texto</p> manualpáginasweb.blogspot.com Para mirar el contraste entre el fondo y el texto podemos utilizar el programa “colour_contrast_Ana lysenexe” Ejemplo: Colour select--- será el color del texto. Background---- Será el fondo del documento Pondremos un color balcno, para ello abrimos de nuevo el documento y aplicamos este color a todo el documento. <body background=”img/bg.gif”text=”#FFFFFF”> Para que el usuario pueda ver la página sin contraste, abriremos de nuevo el programa de contraste, abriremos la página. Con el lapiz o la pluma copiamos los colores nos vamos de nuevo a nuestra página y pegamos el color . Ejemplo: <body background=”img/bg.gif”text=”#FFFFFF”bg color=”#67554C”> Ejercicio práctico; Vamos a hacer un resumen de lo que hemos visto hasta ahora; hay que hacer una página que tenga las siguientes características. 1. Un títular con encabezado de nivel 1 y de color rojo 2. Un segundo titular con encabezado de nivel 2 y de color verde 3. Todo el texto de la página deberá presentarse como una fuente distinta, que la que tiene por defecto, por ejemplo la de “comic sanz”. 4. En el caso de que no esté en el sistema operativo el usuario final, que se visualiza en la tipográfia Arial, hay que usar cursivas y negritas según considere. 5. El color de fondo de la pantalla será un gris muy claro y le vamos a insertar una foto a la derecha del texto, con un borde de ancho de 2 px, para ello vamos a copiar la noticia siguiente. Aquí vamos a ver como se hace este ejercicio paso a paso: 1. Abrimos un documento en blanco. <head> <title>práctica</title> <meta name=”description”content=”ejercicio práctico”> <meta name=”Keiwords”content=”titular, negritas, enlaces, tipografías, colores, RGB, color”> <meta name=”language”content=”es”> <meta http-equiv=”content-type”content=”text/html;charset=iso-8859-1”> </head> manualpáginasweb.blogspot.com 2 Aplicamos el color de fondo de la página, insertamos el texto <body bg color=”#DCDCDC” text=”comic sanz ms, Arial”> 3- A continuación escribimos el ancabezado de nivel 1 alineado al centro para que destaque más, con una tipografía de color rojo fuerte, y con el atributo tipografía (face) usaremos también la misma. Ejemplo: <h1 align=”center”><font color=”#C000000”> 4- Ahora vamos al navegador y copiamos la noticia de todo el titular para ello botón derecho copiar, de esta manera copio el título de la noticia volvemos al navegador ponemos el título de la noticia y ponemos la etiqueta <font>. Ejemplo: <h1 align=”center”><font color=”#C00000”> rápido y sobrecogedor tercer encierro de los San Fermines</font></h1> Ahora vamos a poner el subtitular que será un encabezado <h2> y </h2> <h2 align=”center”><font color=”#008000>Subtitular de la misma página</font></h2> Ahora nos vamos a otra línea: Ahora seleccionamos la imagen “guardar imagen” ponemos el nombre de la imagen en “img src” ponemos un borde de “2px” y al atributo “alt”, ponemos algo referido sobre esa imagen y por último lo alinearemos a la derecha. Ejemplo: <img src=”bonitasw_carreras.jpg”border=”2” alt=”Inventado con relación a la imagen” align=”right”. Ahora pasamos a poner el párrafo y lo copiamos de la noticia <p> la noticia del parrafo de la noticia</p> Y por último realizaremos un enlace hacia esta página para ello copiamos el enlace de esta página en el navegador copiamos volvemos a nuestra página y lo copiamos ejemplo: <p><a href=”http://www.elpais.com/articulo/cultura/rapido/sobrecogedor/tercer/encierro/sanfermines/elpepucul/20 080709elpecucu_1/tes”title=”Ir a la página del preriodico el pais>ver origen de la noticia<a/></p> manualpáginasweb.blogspot.com Las Tablas: Las tablas y sus títulos: Una tabla es un conjunto de celdas organizadas dentro, de las cuales podemos alojar distintos contenidos, como agendas, resultados, carrito de la compra y otros datos de una forma organizada. Nota; Cuando realices una página web, nunca uses tablas para maquetar las páginas, usar tablas para cualquier otra filosofía que no sea lo de mostrar datos tabulados crea especiales dificultades para los usuarios y lectores de pantaya. Tablas básicas son <table> y </table> Las tablas se especificarán y se escribirán siempre por filas de izquierda a derechas, es decir sucesivamente en horizontal. Dentro de la etiqueta identíficaremos las filas que son <tr> y dentro de una fila especificar las celdas <td>. Ejemplo: <head> <title>tablas>/title> <meta name=”description”content=”como crear tablas sencillas” <meta name=”Keywords”content=”table, table, tablas”> <meta name=”laguaje”content=”es”. <meta http-equiv=”conten-type” conten=”text/html;charset=iso-8859-1”> </head> <body> <table> <tr> <td>1</td> <td>2</td> </tr> </table> Para insertar el borde: <body> <table borders=”1”> manualpáginasweb.blogspot.com Ejemplo con Nombres y Apellidos tabla; <body> <table border=”1”> <tr> <td>Nombre</td> <td>Apellidos</td> </tr> <td>Pedro</td> <td>Alonso</td> </tr> </table> </body> En el navegador se vería de la siguiente manera; Nombre Apellidos Pedro Alonso Pondremos <th> y </th> para los encabezados que en este caso sería “nombre y apellidos” salen en negrita y el resto del contenido en <td> </td>. Es necesario incluír un título en cada tabla: Ejemplo: <body> <table border=”1”> <caption> ejemplo de tabla simple</caption> <tr> Celdas Multicolumna y Multifila En ocasiones es necesario que una celda se extienda en varias columnas esto se entiende como celdas multicolumnas en vez de ser dos celdas ser una sola, y use dos celdas se utiza el atributo colspan, el atributo que lleva es el número de columnas que queremos que ocupe esta celda. <body> <table border”1”> <caption>tabla con celdas multicolumna</caption> <tr> <tr colspan=”2”Nombre completo</th> <th>edad</th> manualpáginasweb.blogspot.com En el navegador se vería de la siguiente forma: Nombre completo De esta manera ocuparía las dos celdas Y para indicarlo en vertical utilizaremos el atributo “rowspan” Ejemplo: De esta manera bajaría dos celdas: Edad <tr rowspan=”2”>edad</th> Edad ------ Capítulo tablas vídeos; Atributos Ahora vamos a ver los atributos que se pueden aplicar al atributo <table> y los atributos que se pueden aplicar a las etiquetas de filas y de celdas. Empezamos con los atributos de la etiqueta table: Ejemplos; border- align=”rigt bg color”#E6CCB3”> <body>text=”#FFFFFF”> <table border”1”align=”right”bg color=”#E6CCB3”background=”img/bg.gif”> bordecolor=”bordercolor=#FFOOOO”>cellpadding=”10”cellspacing=”3”> <caption><font color=”OOOOOO”>tablas con celdas multicolumna</font></caption>. <body text=”FFFFFF”-- En este caso el texto será de color blanco <table border=”1”--- Dar el borde deseado a la tabla. align=”right”-- En este caso para colocar la tabla en la derecha. Bg color-- Para dar color a la tabla. Background-- Este atributo es para insertar la imagen como fondo. <font color --- Lo utilizamos para el título del color. manualpáginasweb.blogspot.com ¿Qué pasaría si algunos usuarios tuvieran desabilitadas las imágnes,de los documentos html? Que no verá demasiado bien, por lo tanto veremos un color de fondo de la misma intensidad que la imagen que usemos de fondo de tabla. Border color=””-- Es el color del borde que va a tener la tabla. Cell padding=””-- Que define en “pixeles” el espacio entre los bordes de la celda y el contenido de la misma un valor númerico. Cells pacin=””-- Este define el espacio entre los bordes. Otro atributo sería el ancho width”500”px -- Dar el ancho a las tablas height=”300px – Altura de la tabla Otro atributo para las celdas serían: <tr> <th colspan=”2”width”300px height=”150px”>Nombre completo</th> También se podrán alinear los textos de las celdas con el atributo align”left” </tr>. Ejemplo: <tr> <th colspan=”2”witdth=”300px” aling=”left”<nombre completo</th> Esto sirve para alinear todas las celdas de la tabla en su respectivo contenido. Para alinear en vertical utilizaremos el atributo valign=”bottom”> Ejemplo: <th rowspan=”2”valign”botton”>edad</th> Para el color de esta celda “bg color” #990000” >edad</th> Para el color de esta celda “bg color=”” para las etiquetas <td> y </td> y poder diferencias los encabezados del contenido. Ejemplo: <tr> <td bg color=”#000000”>Sonia</td> <td bg color=”#000000”>Alonso</td> <td bg color=”#000000”>33</td> </tr> manualpáginasweb.blogspot.com Las tablas complejas; En las tablas complejas hay que incluír el atributo “sumary” un resumen y resultará especialmente útil para los usuarios con discapacidades visuales. Ejemplo: <body> <table border=”1”sumary=”esta tabla muestgra el número y tipo de medallas conseguidas por cada país en las ultimas olimpiadas”> <caption>medallero Olímpico</caption> <tr> <th></th> <th>Medallas de oro</tr> <th>Medallas de Plata</tr> </tr> <tr> <td>EEuu</th> <td>22</th> <td>26</th> <td>18</th> </tr> <tr> <th>Rusia</th> <td>18</td> <td>24</td> <td>20</td> </tr> Asi se quedaría en el Navegador: Medallero Olímpico Medallero de Oro Medallero de Plata EEUU 22 26 Rusia 18 24 Con las tablas complejas hay que hacer una división con los atributos </head> y <head>: manualpáginasweb.blogspot.com (<thead>); Es el cuerpo de la tabla, define un grupo de filas de encabezamiento de una tabla solo se puede emplear un elemento <thead> por tabla y debes situarlo después del elemento <caption> y antes de la etiqueta <tfoot>. (<tbody>); Identifica grupos de filas de datos en una tabla, este elemento divide las filas de datos en varios grupos de filas que comparten ciertas carácterísticas, su uso es opcional pero sin introducimos el elemento <thead> o <tfoot> debemos de implementarlo si usamos la cabecera de la tabla tendremos que usar <tbody>. (<tfoot>); la etiquetqa “tfoot” la incluíremos después de la etiqueta </thead> y antes de <body> “tfoot” delimita un grupo de filas de pie de tabla como solo podremos utilizar un elemento “tffot” por cada tabla esta etiqueta aparece al final de la tabla. Ejemplo: <thead> <tr> <th></th> <th>Medallas de oro</th> <th>Medallas de Plata</th> </tr> </thead> <tfoot> <tr> <dt colspan=”4”>(*)Medallas pendientes antidopaje</td> </tfoot> <tbody> Así se verá en el Navegador; Medalla de Oro Medalla de Plata EEUU 22 26 Rusia 18 24 Medalla Pendientes Antidopaje Las etiqutas <thead>, <tbody> y <tfoot> permiten que al imprimir tablas largas los navegadores puedan presentar los encabezados y pies de página en todas las páginas, además los navegadores podrían presentar tablas largas de forma que la cabecera y pie se mantengan estáticos en pantalla, mientras que se desplaza el contenido <tbody> vamos a ver ahora los atriburtos<thead> y <tfoot> aplicados a tablas complejas, estos atributos asocian las celdas de encabezamientos emplearemos el valor del atributo <th id=””. manualpáginasweb.blogspot.com Ejemplo: <thead> <th></th> <th id=h1”>Medallas de oro</th> <th id=”h2>Medallas de Plata</th> </tr> </thead> <tfoot> <tr> <td colspan=”4”>(*)Medallas pendientes antidopaje</td> </tfoot> <tr> <th id=”h4”>EEUU</th> </tr> <th id =”h5”>Rusia</th> </tr> Para asociar los paises y los encabezados: Ejemplo: Se verá igual pero los atributos <thid=”” y <td headres> es para identificar encabezamientos y relacionarlo con los datos: Ejemplo: </foot> <tbody> <tr> <th id=”pais 1”>22</td> <td headres=”h1 pais 1”>22</td> <td headres=”h2 pais1>26</td> <td headers=”h3 pais 1>18</td> </tr> <tr> <th id=”pais2”>Rusia</th> <td headers=”h1 pais2”>18</td> <td headers=”h2 pais2”>24</td> <td headers=”h3 pais2”>20</td> </tr> manualpáginasweb.blogspot.com En el buscador se verá igual pero es una manera muy importante ayudará a relacionar los datos con los encabezados. En el buscador <th> puedes usar el atributo abbr estos proporcionarán abreviaturas a los encabezamientos, de esta forma los detectores de pantalla mostraran las abreviaturas de las cabeceras correspondientes a una celda en vez de leer el texto completo de la cabecera, así reducimos el tiempo de lectura de los datos de una tabla y evitamos las repeticiones odiosas de largos textos. Ejemplo: <thead> <tr> <th><th> <th id=”h1”abbr=”oro”>Medallas de oro</th> <th id=”h2”abbr=”Plata”>Medallas de plata</th> </tr> </thead> <tfoot> <tr> <td colspan=”4”(*)Medallas pendientes antidopaje</td> <tfoot> <tbody> LOS MARCOS: Son una manera de partir la página en distintos apartados: Todos estos apartados serán independientes los unos de los otros, de modo que en cada espacio se coloca una página web distinta. Ejemplo: Ejemplo, la primera podía ser 1html, la segunda 2html, la tercera 3html, la cuarta 4html, la quinta 5html y abría una página que podríamos llamar “Inicio html” que haría la llamada a cada una de las páginas e indicaría las porciones en las que se mostrarían en esas páginas. Página 1html Página 2html Página 3html Página 4html Página 5html Una de las principales características de programación con marcos “frames”, podemos es que podemos navegar por los contenidos de nuestra web con la barra de navegación siempre visible y sin que se tenga manualpáginasweb.blogspot.com que desmarcar en cada una de las páginas que vamos visitando, otra características de los “frames” es que cada marco es independiente y por lo tanto si reduciéramos la venta podemos ver que cada marco tiene su propia barra. Para ver el código fuente de los marcos apretaremos botón derecho en el marco que queramos ver: Pero si queremos ver el código fuente de toda la página, un archivo o un documento html tendremos que ir a “Ver” “código fuente”. Las páginas webs que están hechas con “Frames” se componen de una página principal que hace la llamada a una serie de páginas en cada uno de los marcos o divisiones que hemos definido en la página principal. Los “frames” “marcos” o “cuadros” permiten dividir la ventana en varias más pequeñas de modo que cada una de ellas cargue una página html distinta. Capítulo Marcos “Video Frasenet” Los Frames se declaran en la etiqueta “Frameset” que debe ser colocada antes de una etiqueta body. </head> <frameset> </frameset> </body> Si no insertaramos la etiqueta <frameset> antes de la etiqueta <body> la etiqueta <frameset> se anulará por completo: Definición de “<Frameset>” “<Frameset>”:es la apertura de apertura y cierre que divide la zona en sus zonas y en verticalmente mediante el atributo “Cols”-- Columnas o bien horizontalmente mediante el atributo rows-- de Filas, los valores de los atributos Rows y Cols están formados por una serie de elementos separados por comas que indicaran el tamaño de las zonas el cual podrá ser además especificado en uno de los tres formatos siguientes: Ejemplo: Vamos a hacer una página con 2 divisiones horizontales al usar el atributo “roxs” y veremos una división del 30% un marco y 70% el otro marco, por ejemplo si queremos hacer 3 marcos sería de esta forma del ejemplo 70%10%20%, nunca sin rebasar el 100% también lo podríamos hacer en (px) y en el caso de que solo pongamos por poner un ejemplo un “30% *”> esto significaría que un 30% será una marco y arterisco que ocupará el resto del documento. manualpáginasweb.blogspot.com Ejemplos: </head> <frameset rows=”20%*”>-- Resto del documento. </head> <frameset rows=”30%70%”>-- Dos marcos uno del 30% y otro del 70%. </head> <frameset rows=”20%30%50%>-- Tres marcos de 20%, otro de 30% y un último del 50%. Nota: No superar el 100%, también podrá realizarse en “px” pero esta es la manera más fácil para realizar si quisieras 5 páginas web distintas y poder cambiar su forma cuando quisieras. Frame y Frames anidados una vez que hemos indicado el número de filas y columnas y la especie reservada a cada una de ellas, con la etiqueta </frameset> Ejemplo: <frameset rows=”30%70%” Aquí tenemos dos divisiones horizontales una de un 30% y la otra de un 70%, ahora debemos especificar con la etiqueta “Frame” la procedencia de cada una de los “Frames” que hemos partido la ventana. Ejemplo: <frameset rows=30%70%> <frame src=”hori1.html”name=”titulo”> Hay que tener en cuenta que en este caso tendremos dos ventanas a las que llamaremos: hori1html hori2html Vamos a hacer un llamamiento a cada una de las páginas. Ejemplo: </head> <frameset rows=”20%80%”> <frameset src=”hori1.html”name”titulo”> <frame src=”hori2.html”name”info”> </frameset> <body> manualpáginasweb.blogspot.com De esta manera todas las páginas estarian enlazadas se podrá ver tanto en hori1 como en hori2 Así quedaría en el Navegador: Este es el Marco del título Este es el marco de información Ejemplo 1 ejemplo2 Ejemplo3 Ejemplo4 Ejemplo anidado Después de este ejemplo vamos a pasar a describir los atributos de las etiquetas “frames”. Src-- Indicará la url del archivo html que en este caso ocupará un 30% de la parte de la página. <frames src=”hori1”name=”titulo”> Ejemplo: <frames src=”hori1.html”> El atributo name-- lo utilizaremos para distinguir unos hiperénlaces de otros: “name=”titulo”> Ahora nos vamos a ir al Navegador donde se encuentra nuestro “Frame” realizado y observarás que hay una barra horizontal en el ejemplo anterior que se desplaza de arriba hacia bajo, para que esta barra no se desplace utilizaremos el atributo “noresize”=”noresize”> Ejemplo: <frame src=”hori1html”name=”titulo””noresize”=”noresize”> Ahora vamos a incluír otro atributo en “hori2” scrolling=”No”> El atributo scrolling=”No”> nos indica si la zona debe o no debe poseer una barra de desplazamiento o si se deja cuestionar por dos visualizadores, los valores posibles son “yes” o “no” o “auto” en este caso si le damos a no, no nos aparecerá el “scrilling”, si por el contrario decimos “yes” nos aparecerá cuando actualicemos la página la barra de desplazamiento tanto lateral como vertical. El último atributo denominado “auto” lo que viene a decir es que se ejecutará solamete si lo necesita, este valor no es necesario dárselo ya que es el valor predeterminado si quisierámos auto no haría falta poner la etiqueta. manualpáginasweb.blogspot.com Ejemplo: <frame src=hori2.html”name=”info”> El siguiente atributo que vamos a incluír en “hori1” sería el márgen traducido de esta forma en atributo “marginheight=”100px”> En este ejemplo lo que hará será poder mover la ventana del título de arriba hacia bajo con la barra, sin quedarse estático el título, dejando un márgen de 100px. También lo podemos realizar con el atributo “hori2” el cual dejará una separación en la información del documento dejará una separación tanto superior como inferior de una separación de 100px en este caso. Ejemplo: <frame src=”hori2.html”name=”info”marginheight=”100px”> Ahora vamos a ver el margen de ancho para ello utilizaremos el atributo “marginwidth=”500px”> que en este ejemplo nos daría 500px por el lado derecho y 500px por el lado izquierdo. Ejemplo: <frame src=”hori2.html”name=”info”marginwidth=”500px”bordecolor=”#99FF00”> Al hacer esta operación tendrás que ir a “archivo” “Guardar conjunto de marcos” actualizar la página. Nota: Con “scroling” hay que tener cuidado si eliminamos los bordes de los “Frens” puesto que la página web puede tener dimensiones distintas, dependiendo de la definición del tamaño del visitante, si el espacio de la ventana se ve reducido, podría verse reducido el espacio para el “Fren” y puede que no quepan los elementos que antes si cabian y si eliminamos las barras de desplazamiento puede que el vistante no pueda ver todo el contenido del marco, también se puede utilizar este consejo en “Frends”, y por lo tanto y para concluír si hacemos que los marcos no sean redimensionables seguramente tengamos una declaración de “frent” demasiado rígida, que puede ver mal en algún tipo de pantalla. Frames Anidadas: Es posible anular “Frens” llamando a una página que tenga de nuevo “Frens” o bien declarándolo. Vamos ver un ejemplo para entenderlo mejor, tenemos tres páginas a una la llamamos “hori1.html”, “hori2.html”,”hori3.html” y otra a la que vamos a llamar uno.html pues está última es la que editaremos “uno.html” manualpáginasweb.blogspot.com Ejemplo: </head> <frameset cols=20%,*”> <frame src=”hori1.html”title=”este es el marco del título”> <frameset rows=”20%,*”> <frame src=”hori2.html”title=”este es el marco de información”> <frame src=”hori3.html”title=”este es otro marco” <frameset> </frameset> En el navegador se vería de la siguiente manera Este será el marco del título 20% en vertical (cols) Este es marcon información horizontal 20% (rows) Esto es otro marco que será el resto del documento (*) Noframe; Ahora vamos a hablar de la etiqueta “noframe”, hay que comentar que algunos navegadores no soportan los marcos o están configurados para no mostrarlos, por lo que debemos ofrecer siempre una alternativa a estos problemas, para ello utilizaremos el elemento <noframes> y </noframes> en su interior deberemos incluír los elementos que son necesarios, para poder moverse por el sitio web así como los enlaces de las descripciones y de los marcos, cuando utilicemos el elemento <noframes> evita informar al usuario sobre la antigüedad de su navegador y no le sugieras que lo actualice a una versión ni nada de esto. Si nuestro navegador no soportara los marcos todo el contenido de “Frasemet” desaparecería, solo entendería lo que soporta entre la etiqueta <noframes>, una solución sería a insertar entre estas etiquetas sería por ejemplo 2 párrafos en que dierámos acceso tanto a la tabla de contenidos y otro a noframes.html versión sin marcos, recuerda siempre insertarlos cuando se inserte una etiqueta <frameset> manualpáginasweb.blogspot.com Ejemplo: <frameset cols=”221,*”> <frame src=”menu.html”scrolling=”auto”noresize title=”Menú de contenidos”> <frame src=”contenido.html”name=”contenidos”scrolling=”auto”title=”contenidos></frameset> <noframes> <p><a href=”contenidos.html”>tabla de contenidos </a></p> <p><a href=”noframes.html”>versión sin marcos</a></p> </noframes> Desventajas de los Marcos: La actual implementación de los marcos hace que sea problemática por varios motivos, el primero que los marcos tienden a degradar las funcionalidad del botón de página anterior, por otro lado es imposible hacer referencia al estado actual de un conjunto de marcos con la “url”, esto es porque al navegar por una página con marcos y cambiar el contenido de los mismo y una dirección web, no va a variar, una vez que cabian los contenidos de un conjunto de marcos el borde original ya no es valido es decir si pinchamos en contenido 1 y nos sale en la barra del navegador “file///C:/Users/triner/desktip/uno.html al pulsar en contenido 2 nos saldrá la misma dirección en el navegador, sin poder hacer referencia en este caso a “contenido2” otra desventaja de los marcos es que se obliga al usuario a entrar por la declaración de “Frens” ya que en caso de no hacerlo, solo se vería la página interior sin marcos, al no mostrarle los marcos exteriores pueden perderse los elementos de navegación del sitio web otra desventaja, es que los buscadores web no entiendan las relaciónes entre los marcos indexaran las páginas de forma normal, sin atender si se trata de una página interior, marco, o no, como consecuencia de esto, las páginas deseadas del sitio web perderian su presencia original con el elementos de navegación. Otra desventaja es la apertura de enlaces a páginas externas en los marcos de la página actual, que puede resultar molesto para algunos usuarios, puede dar la sensación de que puede resultar molesto para algunos usuarios, pues da la sensación que se está limitando la navegación o que impide el avanzado del sitio actual Además de eso en ocasiones se produce una deshorientación, al abrir el contenido de un marco, en una nueva ventana, sigue habiendo navegadores que no soportan los marcos y también que algunos navegadores pueden tener en caso de añadir la página a su favor. CSS. Introducción y Funcionamiento: El CSS es un lenguaje de hojas de estilo creadas para controlar el áspecto de los documentos. El Css es la mejor forma de separar los contenidos y su presentación y es imprescindible para crear páginas web profesionales, es para los contenidos y el áspecto, presentan muchas ventajas ya que obliga a crear documentos html bien definidos y con significado completo, además mejora la accesibilidad del documento reduce la complejidad de su mantenimiento y permite visualizar el mismo documento en infinidades de estilos diferentes, ordenadores, sistemas operativos distintos, pdf. Al crear una página web se utiliza en primer lugar el lenguaje html, para marcar los contenidos, es decir para resignar la funcionalidad de cada elemento, una vez creado el contenido en formato html se utiliza el lenguaje CCS para definir el áspecto del elemento como puede ser el tamaño, el color, tipo de letra, posición de cada elemento etc... manualpáginasweb.blogspot.com En resumen el html es para crear los contenidos designa la función de cada elemento ya pueden ser párrafos, encabezados etc.. y el CSS se utiliza para el áspecto que va a presentar la página web. Incluír CSS: Antes de empezar a decir que una de las características del CSS es su flexibilidad y los diferentes opciones que ofrece para realizar una misma tarea de hecho existen tres opciones, para incluír CSS en un documento html. Con CSS no será necesario maquetar la página es decir todo lo que incluye el diseño ya sea el color, la tipografía y el tipo del tamaño desaparecería por lo que no se utilizan etiquetas <font> la primera opción que vamos a inclu7ír para el CSS es html es que los estilos se definen en una zona especifica del propio documento html para ello emplearemos la etiqueta <style>, es decir que solamente se puede incluír en la cabecera del documento es decir este método se emplea para definir un número pequeño de estilos o cuando se requiere incluír estilos especificos en una determinada página html que complete los estilos que se incluyen por defecto en el resto del sitio web Ejemplo: <head> <style type=”text/css”> h1(color:red; font-family; Arial;font size:large;) p (color;gray;fonto-family:Verdara;font-size:medium: </head> Otra forma de introducir CSS en el mismo documento sería de la siguiente forma cortaremos los estilos: Ejemplo: h1(color:red; font-family:Arial; font-size:large;) p (color;gray;font-family:Verdara;font-size:medium;) Creamos un documento nuevo en blanco, pegamos los atributos de estilo guardamos el documento en nuestro sitio con la extensión CSS, vamos a llamarle disenio.css lo guardamos volvemos al documento donde nos encontrabámos, cortamos toda la etiqueta style y en su lugar pondremos la etiqueta link con esta y por último el archivo html. Hará referencia a disenio.es Ejemplo: <head> <link rel=”stylesheet”type=text/css” href=”disenio.-css”media=”screen”/> </head> El atributo link es primeramente “rel” que indica el tipo de relación que tiene el recurso enlazado, para los archivos CSS siempre se utiliza el valor “stylesheet” “type” que indica el tiempo del recurso enlazado para los archivos CSS siempre será el archivo text/css y media que indica el medio en el que se van a aplicar los estilos del archivo CSS de las tres formas que existen de incluír CSS en la página html, esta es la más utilizada, la principal ventaja es que se puede incluír un mismo archivo “css” en multitud de páginas “html”, por lo que se garantiza la aplicación homogéneas de los mismos estilos, a todas las páginas que forman tu sitio web, con este método el manualpáginasweb.blogspot.com mantenimiento de un sitio web se simplifica al máximo, ya que un solo cambio en un archivo css, permite variar de forma instantanea todos los estilos de todas las páginas html que enlazan ese archivo, es decir imagináte que tuvierámos un montón de páginas, en nuestro sitio web enlazados entre ellas. Y el título lo tenemos en rojo y lo quisierámos cambiar al color azul, no tendríamos que ir a todos los documentos modificando el documento html y sus atributos o cambiar la CSS de ese documento html, simplemente con abrir la hoja de estilos, automáticamente en todas las páginas el título sería de color azul. Otra forma de insertar CSS sería con la etiqueta <style type=”text/css”> Ejemplo: <head> <stule type=”text/css”media=”screen”> @import “disenio.css”; Otra forma sería: @import url(“disenio.css”) @import url(“disenio.css”) manualpáginasweb.blogspot.com
