0% encontró este documento útil (0 votos)

62 vistas

Conceptos Básicos HTML

Cargado por

Cristobal Abdias Jove

Derechos de autor

Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.

Formatos disponibles

Descarga como DOC, PDF, TXT o lee en línea desde Scribd

0% encontró este documento útil (0 votos)

62 vistas

Conceptos Básicos HTML

Cargado por

Cristobal Abdias Jove

Derechos de autor

Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.

Formatos disponibles

Descarga como DOC, PDF, TXT o lee en línea desde Scribd

Está en la página 1/ 64

I.E.S. POLITCNICO R L.

2011

Inicio Conceptos bsicos Introduccin al HTML Principios de HTML Sintaxis de una pgina HTML Nuestra primera pgina Cabecera de un documento: <HEAD> Cuerpo de un documento: <BODY> Dando formato al texto Etiquetas: <h1>, <p>, <br> y <hr> Tamao, tipo y color de las fuentes Alineacin del texto Estilos lgicos VS fisicos Estilos lgicos Estilos fsicos Caracteres especiales Anidando etiquetas Listas Listas desordenadas Listas ordenadas Listas de definicin Atributos de las listas Anidando listas Tablas Estructura de una tabla Atributos de las tablas Atributos de las celdas Titulos y cabeceras Anidando tablas Imagenes en HTML Imagenes <img> Atributos de las imgenes Mapas de imgenes Enlaces en HTML Enlaces: <a> Enlaces: internos, locales, remotos, ... Atributos de los enlaces Frames Estructura Etiquetas y atributos Enlazando pginas a los frames: target Formularios Formularios en HTML La etiqueta <input> y atributos La etiqueta <select> La etiqueta <textarea> Ejemplo de un Formulario Multimedia Incluyendo sonido

I.E.S. POLITCNICO R L.A

2011

Incluyendo vdeo Introduccin a los objetos: imgenes, sonidos, vdeo, etc.. Glosario ndice

I.E.S. POLITCNICO R L.A

2011

CONCEPTOS BSICOS World Wide Web (WWW): (del ingls, Telaraa Mundial), la Web o WWW, es un sistema de hipertexto que funciona sobre Internet. Para ver la informacin se utiliza una aplicacin llamada navegador web para extraer elementos de informacin (llamados "documentos" o "pginas web") de los servidores web (o "sitios web") y mostrarlos en la pantalla del usuario. El usuario puede entonces seguir hiperenlaces que hay en la pgina a otros documentos o incluso enviar informacin al servidor para interactuar con l. A la accin de seguir hiperenlaces se le suele llamar "navegar" por la Web. No se debe confundir la Web con Internet, que es la red fsica mundial sobre la que circula la informacin.

Del mismo modo que se puede distinguir entre "una intranet" (una inter-red) y "Internet", uno puede referirse a "una web" como un conjunto de sitios que proveen informacin por los medios descritos, y "la Web", que es la enorme e interconectada web disponible prcticamente en todos los sitios de Internet.es.wikipedia.org/wiki/WWW Navegador: Un navegador web o web browser es una aplicacin software que permite al usuario recuperar y visualizar documentos de hipertexto, comnmente descritos en HTML, desde servidores web de todo el mundo a travs de Internet. Esta red de documentos es denominada World Wide Web (WWW) o Telaraa Mundial. Los navegadores actuales permiten mostrar y/o ejecutar: grficos, secuencias de vdeo, sonido, animaciones y programas diversos adems del texto y los hipervnculos o enlaces. Los programas utilizados para visualizar las pginas web podemos destacar Internet Explorer, Netscape, Firefox y Opera

Servidor: (host) Ordenador conectado a Internet capaz de prestar uno o ms servicios a otros ordenadores llamados "clientes". Ejemplos de servicios: conexin, cuenta de correo, sitio web, ftp, noticias, etc.

I.E.S. POLITCNICO R L.A

2011

HTTP: Abreviacin de "Hypertext Transfer Protocol" o, en espaol, "Protocolo de Transferencia de Hipertexto". Es el tipo de comunicacin utilizado entre un servidor y un navegador de WWW, como por ejemplo el Firefox o el Internet Explorer. Por este motivo, las direcciones de las pginas web comienzan por "http://..." URL: Es el Localizador Uniforme de Recursos, o dicho mas claramente, es la direccin que localiza una informacin dentro de Internet. Ejemplo de una URL: www.innovanetworks.es HTML: El HTML, acrnimo ingls de Hypertext Markup Language (lenguaje de formato de documentos de hipertexto), es un lenguaje de marcas diseado para estructurar textos y presentarlos en forma de hipertexto, que es el formato estndar de las pginas web. Gracias a Internet y a los navegadores del tipo Explorer, Mozilla, Firefox o Netscape, el HTML se ha convertido en uno de los formatos ms populares que existen para la construccin de documentos. HTML es hijo de SGML, aunque hay unas versiones de XHTML que son descendientes de XML y exigen que se escriba mucho ms para facilitar la vida a los navegadores, que son aquellos programas que nos muestran informacin en pantalla. Ruta absoluta: las rutas absolutas son indicadas mediante la URL completa del documento vinculado. <a href="http://www.pcweb.es"> Enlace</a> Para vincular un documento situado en otro servidor, o sitio web, es preciso utilizar una ruta absoluta. Aunque tambin podemos emplear las de rutas absolutas para llamar o localizar archivos locales (de documentos en el mismo sitio), se desaconseja emplear este mtodo, puesto que si mueve el sitio a otro dominio (lugar, carpeta o servidor) se rompern todos los vnculos de las rutas absolutas . Se recomienda el utilizar rutas relativas para vncu los locales, puesto que estos vnculos nos permiten una mayor flexibilidad, en caso de que necesitemos mover los documentos dentro del sitio. Las rutas relativas a los documentos son las ms adecuadas para emplear con vnculos locales en la mayora de los sitios Web. Son especialmente tiles cuando el documento actual y el documento con el que se establece el vnculo se hallan en la misma carpeta. Tambin es posible usar una ruta relativa al documento para crear un vnculo con un documento en otra carpeta, pero deberemos especificar la ruta empleando de la jerarqua de carpetas desde el documento actual hasta el vinculado.

I.E.S. POLITCNICO R L.A

2011

Para establecer un vnculo con un documento de la misma carpeta, indicaremos slamente el nombre del archivo. <a href="enlaces.html">Enlaces</a> Para realizar un vnculo con una pgina o un archivo situado por debajo en el rbol se deber indicar los nombres de las subcarpetas seguidos de /, y finalizando con el nombre del archivo. <a href="documentos/detalles.doc">Documento Word</a> <a href="documentos/excel/tabla.xls">Documento Excel</a> Para establecer un vnculo con un documento que se halla por encima en el rbol debes introducir ../para cada nivel que queramos subir. <a href="../indice.htm">ndice</a> Temenos la posibilidad de combinar las dos ltimas operaciones, subiendo por el rbol y luego bajando por otra rama <a href="../general/menu.htm">Enlace</a> INTRODUCCIN AL HTML HTML es un lenguaje muy sencillo que permite describir hipertexto, es decir, texto presentado de forma estructurada y agradable, con enlaces (hyperlinks) que conducen a otros documentos o fuentes de informacin relacionadas, y con inserciones multimedia (grficos, sonido...). La descripcin se basa en especificar en el texto la estructura lgica del contenido (ttulos, prrafos de texto normal, enumeraciones, definiciones, citas, etc) as como los diferentes efectos que se quieren dar (cursiva, negrita, o un grfico determinado). HTML es el lenguaje con el que se "escriben" las pginas web. Se puede resumir la filosofa del HTML con los siguientes puntos : Es muy sencillo. No hay variables.

No se compila. Es un lenguaje interpretado. A la instrucciones se les llama etiquetas o marcas Permite escribir hipertexto

El programa que interpreta este lenguaje es el navegador (Internet Explorer, Netscape, Firefox, etc).Este lenguaje es el usado por los navegadores para mostrar las pginas web. A las instrucciones se les llama marcas etiquetas, Las etiquetas de HTML tienen la siguiente sintaxis: <identificador-de-etiqueta Atributos: informacin adicional>

I.E.S. POLITCNICO R L.A

2011

Un ejemplo de la etiqueta <b> (bold) que se utiliza poner el texto en negrita. Algunas etiquetas envuelven texto y marcan el comienzo de un bloque. La sintaxis para cerrar el bloque es: </identificador-de-etiqueta> Veamos un ejemplo: El cdigo HTML: <b> HOLA MUNDO </b> Sever : HOLA MUNDO Una caracterstica de HTML es que es pasivo. Esto es no interacta con el usuario. Simplemente se baja el cdigo de HTML del servidor al navegador del cliente y este nos lo muestra . De una forma directa un documento de HTML no puede pedir informacin al usuario, procesarla y desplegarla. Por esto no se considera a HTML con un lenguaje de programacin. Es un lenguaje muy parecido a cmo trabaja un procesador de textos. HTML es un lenguaje transferible, es decir, se pueden visualizar las pginas con cualquier sistema operativo y, por supuesto tambin crearlas. El HTML est formado por tan slo 90 elementos. Una de las caractersticas ms importantes del HTML es el hipertexto. Esto quiere decir que las pginas no son elementos aislados, sino que estn unidas a otras mediante los links o enlaces hipertexto. Gracias a estos enlaces el navegante de internet puede pulsar sobre un texto (texto al que llamaremos de ahora en adelante enlace) de una pgina para navegar hasta otra pgina. Ser cuestin del programador de la pgina inicial decidir que palabras o frases sern activas (enlaces) y a donde nos conducir pulsar sobre ellas.

SINTAXIS DE UNA PAGINA HTML Los documentos o archivos HTML estn compuestos por tres partes bien diferenciadas: 1. EL Comiezo del documento HTML lo indica la etiqueta <html> Adems un documento HTML ha de estar delimitado por las etiquetas <html> ....</html> 2. La Cabecera del documento (Header, cabecera en ingls) esta delimitada por <head> ...... </head>

3. Donde colocaremos etiquetas normalmente informativas como el ttulo de la pgina. Adems se usa para dar informacin sobre el documento, por ejemplo la versin de HTML (no visible)

I.E.S. POLITCNICO R L.A

2011

El Cuerpo del documento (BODY, cuerpo en ingls) flanqueado por las etiquetas <body> ...</body>

5. Es probablemente el parte ms importante de un documento HTML. es donde el usuario disea o maqueta atravs de las etiquetas (tags) la pgina web. 6. Por ltimo un pequeo detalle tendremos que salvar el documento con la extensin .htm o .html, entoces ser un archivo html. 7. por ejemplo: mipagina.html

Esta estructura puede observarse continuacin. <html> <head> </head> <body> </body> </html> Veamos el significado del cdigo anterior: La primera lnea indica que es un documento HTML: <html> comienzo de pgina html La segunda y tercera lnea delimitan la cabecera del documento: <head> </head> La cuarta y quinta lnea delimitan el cuerpo del documento: <body> </body> La ltima lnea indica que finaliza el documento HTML: </html> Obsrvese que las etiquetas puede ser escritas en maysculas y/o minsculas <html> y <HTML> son la misma etiqueta. Sin embargo es recomendable habituarse ha escribir las etiquetas en minsculas , puesto que otros lenguajes que pueden usarse en combinacin con el HTML (JavaScript, XML, PHP, etc) no son tan permisivos, adems nos vendr bien para habituarnos ha las buenas costumbres desde el principio. Consejo: a la hora de guardar el documento, es recomendable no usar acentos, ni maysculas, espacios en blanco, o caracteres extraos NUESTRA PRIMERA PGINA Aplicando lo aprendido en el punto anterior Sintaxis de una pgina nuestra primera pgina podra ser algo parecido a esta: <html> <head> </head> <body> HOLA MUNDO

I.E.S. POLITCNICO R L.A

2011

</body> </html> Prubelo, por favor, ver que fcil es realizar nuestra pgina web. Visualizacin de la pgina: hola mundo Si tiene alguna duda de cmo editarlo puede hacerlo con el Notepad de Windows o bajarse de Internet un editor de pginas Web , yo personalmente le recomendara el Editplus, es un programa shareware, que significa para usarlo hay que hacer alguna donacin o usarlo gratis durante algn tiempo. Aunque tambin puede hacerlo con editores profesionales como el frontpage de Microsoft o el famossimo Dreamweaver

imagn del editor Editplus

Cabecera de un documento <head>.....</head>

La Cabecera, head es la primera de las dos partes en que se estructura un documento HTML. Veamos una cabecera tpica de un documento HTML: <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content="tu nombre"> <meta name="Keywords" content=""> <meta name="Description" content=""> </head> <body> </body> </html> En la Cabecera reside informacin acerca del documento, y generalmente no se aprecia cuando se navega por l. Es importante recordar que estos elementos son opcionales es decir no son obligatorios o necesarios para la realizacin de una pgina web. La etiqueta<title>..</title> se escribe en la cabecera, el title, ttulo es lo aparecer cuando abramos el documento con el navegador, en la barra azul, ver dibujo.

I.E.S. POLITCNICO R L.A

2011

Es importante no confundir el ttulo de la cabecera con el nombre del fichero. Por ejemplo el nombre del fichero podra ser: documento_web.html y el ttulo <title> Mi pgina </title> Otra etiqueta que podemos emplear en la cabecera (head) es la etiqueta <meta> que posee diversas aplicaciones: <head> <title> la cabecera de un documento </title> <meta http-equiv="Refresh" content="15"> </head> Esto hace que el navegador vuelva a cargar la pgina activa al cabo de 15 segundos. Tambin puede hacerse a un servidor. As: <head> <title> la cabecera de un documento </title> <meta http-equiv="refresh" content="20" url="http://miservidor/mipagina.html"> </head> Tendremos que usar esto con precaucin. Puesto que si el contenido de la pgina no varia, esto no tiene ninguna utilidad y si lo hacemos contra un servidor podemos sobrecargarlo. Otra opcin es forzar la expiracin inmediata en la cach del navegador de la pgina recibida, lo que provoca que la pgina sea solicitada de nuevo al servidor cada vez, en lugar de cargar la copia que ya existe en la mquina del cliente. esto sera: <head> <title> la cabecera de un documento </title> <meta htpp-equiv="Expires" content="Tue, 20 Jan 2006 16:25:27 GMT"> </head>

I.E.S. POLITCNICO R L.A

2011

Si la fecha ha pasado, como la que tenemos en el ejemplo, el navegador eliminar inmediatamente la pgina de la cach, y si la fecha no ha pasado, la borrara en fecha indicada. Tambin podemos usar la etiqueta meta para ayudar a los buscadores de Internet como Google, Yahoo, etc a encontrar nuestras pginas. Pondremos palabras clave que contiene la pgina separadas por comas. Por ejemplo: <head> <meta name="keywords" content="HTML, facil, internet"> </head> Adems si queremos que los buscadores muestren un breve resumen del contenido de tu pgina, podremos usar este ejemplo: <head> <meta name="keywords" content="HTML, facil, internet"> <meta name="description" CONTENT="Manual de HTML"> </head> Es importante tener en cuenta que podemos usar todos los elementos <meta> que necesitamos, pero sin repetirlos. Existen otros atributos de la etiqueta meta como el nextid, link o isindex pero los cuales son de uso muy especializado o estan en desuso * significado de cache. Es un tipo de memoria interna. En el caso de los navegadores, estos realizan una copia de la pgina que estn mostrando en un espacio reservado del disco duro. De este modo en caso de volver a visitarla se cargar desde la cach (desde el propio disco duro del usario) mucho ms rapidamente. Logicamente el tamao de la cach y muchas ms opciones son configurables en los navegadores. Cuerpo de un documento HTML <body>.....</body> El cuerpo esta delimitado por las etiquetas <body>....</body> siendo habitualmente lo ms importante en un documento HTML. Entre las etiquetas que definen el cuerpo debemos de colocar los elementos que componen nuestra pgina como por ejemplo: el texto, imgenes, etc. La etiqueta <body> posee los siguientes atributos, (los cuales han sido declarados en desuso, recomendando el uso de las estilos en cascada CSS para realizar estas funciones): Atributos de la etiqueta <body>: bgcolor="nmero hexadecimal / nombre del color". Asignamos un color de fondo a la pgina mediante un nmero hexadecimal, (#2233ff) o el nombre del color en ingls (red). Veamos un ejemplo: <body bgcolor="#0000FF"> o <body bgcolor="yellow">

I.E.S. POLITCNICO R L.A

2011

Una buena ayuda para la seleccin de colores el formato hexadecimal, #rrggbb, la puedes encontrar en: designacin de colores text="nmero hexadecimal / nombre del color". Atributo usado para definir el color del texto por defecto es negro mediante un nmero hexadecimal, (#2233ff) o el nombre del color en ingls (red). link="nmero hexadecimal / nombre del color".Parmetro usado para especificar el color de los enlaces de texto. Color por defecto azul. vlink="nmero hexadecimal / nombre del color". Parmetro usado para especificar el color de los enlaces de texto ya visitados. Color por defecto morado. alink="nmero hexadecimal / nombre del color". Parmetro usado para especificar el color de los enlaces de texto activo. Color por defecto rojo. Ejemplo: <body text="#ff0000" link="#ffffff" vlink="#ff00ff" bgcolor="#101010"> background="ruta archivo / nombre_archivo.extension". Indicamos la ruta y el nombre del archivo que ser usado como fondo del documento. Esta se visualizar en mosaico para cubrir toda la ventana si es pequea. Veamos su sintaxis: <body background="ruta/archivo.gif"> Tener que tener muy presente que debemos especificar la ruta de modo relativo, esto nos aporta la siguiente ventaja si movemos el directorio completo (con todos sus archivos y manteniendo su estructura). La ruta especificada en nuestra pgina continua siendo vlida mientras que si especificamos una ruta absoluta no nos valdra. FORMATOS DE TEXTO ANIDANDO ETIQUETAS Todas las etiquetas que componen HTML, las que hemos estudiado y las que veremos ms adelante pueden ser anidadas unas dentro de otras, es decir insertar unas etiquetas dentro de otras. A esto se le llama anidamiento. Veamos un ejemplo: <b> Texto en negrita </b> <b> Texto en negrita <i> Texto en cursiva y negrita </i></b> con esto veremos: Texto en negrita Texto en negrita ,Texto en cursiva y negrita El anidamiento puede ser poniendo las etiquetas en cualquier orden, pero siempre se ha de guardar simetra.

I.E.S. POLITCNICO R L.A

2011

Esto es incorrecto: <b><i>... </b></i> Y esto es la forma correcta: <b><i>... </i></b> Hay dos buenas razones para realizar una buena anidacin aunque los navegadores son capaces de interpretar las etiquetas errneamente anidadas: 1) Bastantes lenguajes de programacin e incluso el XML no son tan tolerantes con estos errores siendo posible que nuestras pginas no funcionen correctamente 2) Exceso de tiempo empleado de en la decodificacin de la pgina por los navegadores provocado por una mala anidacin. Este tiempo extra puede llegar a ser incluso superior a la de interpretar la propia pgina entera LISTAS LISTA DESORDENADA Supongamos que queremos mostrar en nuestra pgina web un pedido, por ejemplo una lista de las pelculas que hemos adquirido recientemente, las que nos gustara comprar, o quizs es Navidad y nos gustara realizar una lista con nuestros buenos deseos de todos los aos. HTML tiene unas posibilidades limitadas a la hora del tratamiento del texto. Las listas se usan para citar, numerar y definir cosas. Podemos clasificar las listas en tres tipos: 1. Listas desordenadas 2. Listas Ordenadas 3. Listas de Definicin Listas Desordenadas Estn englobadas por las etiquetas <ul>...</ul> (unordered list). Cada uno de los elementos de la lista comenzar con una etiqueta <li>, que puede o no llevar su correspondiente </li> de cierre. Veamos un ejemplo: <p> Lenguajes en Internet </p> <ul> <li> Ingls 50% </li> <li> Espaol 10 % </li> <li> Francs 10% </li> </ul> Esto nos mostrar: Lenguajes en Internet

Ingls 50% Espaol 10 % Francs 10%

I.E.S. POLITCNICO R L.A

2011

Atributos de la etiqueta <ul> La etiqueta <ul> dispone una serie de atributos, con los cuales es posible configurar el aspecto que va a tener la lista. type="circle / disc / square". Define la vieta a emplear en la lista. El parmetro tipo puede tomar los valores: circle: punto redondeado negro y relleno disc: lnea crcular square: cuadro relleno Ejemplo (1) <p> Lenguajes en Internet </p> <ul type="circle"> <li> Ingls 50% </li> <li> Espaol 10 % </li> <li> Francs 10% </li> </ul> Esto nos mostrar: Lenguajes en Internet
o o o

Ingls 50% Espaol 10 % Francs 10%

Ejemplo (2) <p> Lenguajes en Internet </p> <ul type="square"> <li> Ingls 50% </li> <li> Espaol 10 % </li> <li> Francs 10% </li> </ul> Esto nos mostrar: Lenguajes en Internet

Ingls 50% Espaol 10 % Francs 10%

Importante: En algunos navegadores no funciona la opcin de cambiar el tipo de vieta a mostrar y por mucho que lo intentemos, siempre saldr el redondel negro. LISTA ORDENADA

I.E.S. POLITCNICO R L.A

2011

Estn delimitadas por las etiquetas <ol> y </ol> (ordered list). Al igual que las desordenadas cada uno de los elementos de la lista comenzar con una etiqueta <li>, que puede o no llevar su correspondiente </li> de cierre. Veamos un ejemplo: <p> Ciudades del Mundo <p> <ol> <li> NewYork </li> <li> Tokio </li> <li> Shangai </li> </ol> Esto nos mostrar: Ciudades del Mundo 1. NewYork 2. Tokio 3. Shangai Atributos de la etiqueta <ol> La etiqueta <ol> dispone una serie de atributos, con los cuales es posible configurar la apariencia que va a tener la lista. Los ms importantes son: (1) type="1 / a / A / i / I ": define el tipo de secuenciador a usar en la lista. Los secuenciadores en una lista van en su orden natural lgico. El atributo tipo puede tomar los valores: type="1" - Para ordenar por nmeros - Este el valor que tiene type por defecto type="a" - Numerar por letras minsculas del alfabeto type="A" - Clasificar por letras maysculas del alfabeto type="i" - Numerar por nmeros romanos en minsculas type="I" - Ordenacin por nmeros romanos en maysculas Veamos algunos ejemplos: Cdigo HTML <ol type="1"> <li> primer elemento </li> <li> segundo elemento </li> <li> tercer elemento </li> </ol> <ol type="a"> <li> primer elemento </li> <li> segundo elemento </li> <li> tercer elemento </li> </ol> <ol type="A"> Visualizacin 1. primer elemento 2. segundo elemento 3. tercer elemento a. primer elemento b. segundo elemento c. tercer elemento A. primer elemento

I.E.S. POLITCNICO R L.A

2011

<li> primer elemento </li> <li> segundo elemento </li> <li> tercer elemento </li> </ol> <ol type="i"> <li> primer elemento </li> <li> segundo elemento </li> <li> tercer elemento </li> </ol&gr; <ol type="I"> <li> primer elemento </li> <li> segundo elemento </li> <li> tercer elemento </li> </ol>

B. segundo elemento C. tercer elemento i. ii. iii. I. II. III. primer elemento segundo elemento tercer elemento primer elemento segundo elemento tercer elemento

(2) start="n": donde n es el valor con el que comenzar la lista. Los valores del parmetro "n" son nmeros enteros a partir de 1. Si se omite este atributo la lista comenzar por el nmero 1. Cdigo HTML <ol type="1" start="4"> <li> primer elemento </li> <li> segundo elemento </li> <li> tercer elemento </li> </ol> <ol type="A" start="5"> <li> primer elemento </li> <li> segundo elemento </li> <li> tercer elemento </li> </ol> Visualizacin 4. tercer elemento 5. cuarto elemento 6. quinto elemento E. cuarto elemento F. quinto elemento G. sexto elemento

LISTAS DE DEFINICIN Estn englobadas por las etiquetas <dl> y </dl> (definition list). La etiquetas del elemento a definir es <dt> (definition term) y su correspondiente definicin son <dd>.(definition definition). Las etiquetas <dt> y <dl> no tienen pareja de cierre, pero la etiqueta padre <dl> se debe cerrar siempre con su correspondiente pareja </dl>. Veamos un ejemplo para aclarar esto un poco ms: <p>Diccionario Oxford </p> <dl> <dt>footstep <dd> Seguirle los pasos a alguen <dt>misplace <dd>perder algo transitoriamente

I.E.S. POLITCNICO R L.A

2011

</dl> El efecto producido: Diccionario Oxford footstep Seguirle los pasos a alguen misplace perder algo transitoriamente Obsrvese que la etiqueta <dd> desplaza hacia la izquierda el texto al cual acompaan. Siendo estas etiquetas usadas algunas veces para desplazar textos a la izquierda. Ejemplo: <dl> <dd> 1 Primer punto <dl> <dd> 1.1 Desplazado hacia la izquierda <dl> <dd>1.1.1 Mas desplazado hacia la izquierda </dl> </dl> </dl> Mostrndonos: 1 Primer punto 1.1 Desplazado hacia la izquierda 1.1.1 Mas desplazado hacia la izquierda

ATRIBUTOS DE LA LISTA Estos atributos son comunes a todos los tipos de listas, No Ordenadas, Ordenadas y de Definicin. Title="Comentario". Muestra un comentario, o ttulo al colocar el puntero o cursor del ratn sobre la lista. Se suele utilizar para explicar el propsito de la lista. El uso de este atributo est desaconsejado puesto que los mensajes emergentes en pantalla suelen molestar al usuario. Ejemplo: <ul title="El ingls al alcance de todos "> <li>Footstep </li> <li> Misplace </li> <li> Shaman </li> </ul> Se muestrar:

I.E.S. POLITCNICO R L.A

2011

Footstep Misplace Shaman

dir="ltr / rtl". Establece el sentido de los elementos de la lista, pudiendo ser ltr (left to right) de izquierda a derecha o rtl (right to left) de derecha a izquierda. Por defecto tiene el valor ltr, que es el que tiene el ingls y el resto de idiomas occidentales. El valor rtl se usa en lenguas como la Japonesa y rabe en los que su escritura fluye de derecha a izquierda. Vamos a ver un ejemplo de este tipo, con <ol dir= "rtl">: <li> primer elemento <li> segundo elemento <li> tercer elemento </ol> Visualizacin en el navegador: : primer elemento .1 segundo elemento .2 tercer elemento .3

lang="idioma". Especificacin del idioma del contenido de los textos de la lista. Los posibles valores son abreviaturas comunes del idioma usado. Ejemplos:"es" (espaol),"en" (ingls),"en-US"( la variacin estadounidense del ingls) y "it" (italiano). ANIDANDOLISTAS HTML tambin no plantea la posibilidad de anidar listas. Esta opcin nos puede ser muy til, puesto que nos permite obtener listas mixtas. Vease el siguiente ejemplo: <p> Deportes <p> <ul> <li> Deportes de pelota <ol> <li> Ftbol <li> Baloncesto <li> Balon mano </ol> <li> Atletismo <ol> <li> Maraton

I.E.S. POLITCNICO R L.A

2011

<li> 10.000 metros <li> Relevos </ol> </ul> Conseguiendo una lista como esta: Deportes

Deportes de pelota 1. Ftbol 2. Baloncesto 3. Balonmano

Atletismo 1. Maraton 2. 10.000 metros 3. Relevos TABLAS ESTRUCTURA DE UNA TABLA

Las tablas son muy usadas en el diseo de las pginas Web , aparecieron en la versin HTML 3.0. Las tablas son una de las etiquetas ms tiles que podemos encontrar en HTML , ya que nos van a permitir "maquetar", darle la aparencia externa a nuestra pgina, como lo ver el usuario. La tcnica es dividiendo la pgina en pequeas celdas e insertando en cada celda de la tabla, el elemento y/o los elementos que compondrn nuestra pgina web. Este mtodo era el nico lgico hasta la que se quedo desfasado por la aparicin de las Hojas de Estilo, CSS. Estructura de una tabla: Las tablas estn formadas por celdas agrupadas en filas ----> y columnas | Una fila esta compuesta por uno o ms espacios (celdas) alineados horizontalmente. Una columna esta compuesta por uno o ms espacios alineados verticalmente. Una celda es el espacio formado por la interseccin de una fila y una columna El nmero de celdas esta componen la tabla esta definido por el diseador de la pgina. Columna 1 Columna 2 Columna 3 Fila 1 Celda (1,1) Celda (2,1) Celda (2,1) Fila 2 Celda (2,1) Celda (2,2) Celda (2,1) Fila 3 Celda (3,1) Celda (3,1) Celda (2,1)

I.E.S. POLITCNICO R L.A

2011

Sin embargo no es todo tan fcil a la hora de trabajar con tablas, puesto que algunas veces parecen comportarse de una forma ilgica, por tanto debemos de conocer todo lo referente a ellas incluso algunos pequeos trucos que existen. Esto es debido a que en el origen del lenguaje HTML las tablas fueron diseadas por cientficos de las universidades para contener y organizar informacin, no como una ayuda para el diseo grfico de la pgina, ya que en esa poca el lenguaje y las pginas web se conceban como una forma de transmitir texto plano, en monitores monocromos y de poca resolucin, y no fu hasta el posterior desarrollo de Internet, de la WWW y de la tecnologa de ordenadores personales avanzados cuando se empez a tener en cuenta la importancia del diseo visual de una pgina web como un medio global para transmitir no solo texto plano, si no tambin contenidos grficos y multimedia. Para conseguir que las tablas funcionen perfectamente necesitamos conocer muy bien todos los atributos de las tablas. Adems de algunos truquillos que se han echo famosos a lo largo del tiempo. Veamos como se define una tabla: 1. Las tablas se crean con la etiqueta <table>...</table> la tabla est contenida entre esta etiqueta 2. Las filas se definen con la etiqueta <tr>...</tr> table row, (row = fila en ingls) 3. Cada etiqueta <tr> contiene celdas que inicialmente coincidirn con el nmero de columnas, definidas por medio de la etiqueta <td>...</td>
4. Cada celda de datos puede contener lo que quieras insertar : texto, Imgenes, listas, e incluso otras

tablas. La estructura de una tabla, se puede ver fcilmente en el siguiente esquema : <table> <tr> <td>...</td> <td>...</td> <td>...</td> </tr> <tr> <td>...</td> <td>...</td> <td>...</td> </tr> <tr> <td>...</td> <td>...</td> <td>...</td> </tr> </table> Que llevado al HTML es: <table> <tr> <td> celda (1,1)</td> <td> celda (1,2)</td> <td> celda (1,3)</td> </tr> <tr> <td> celda (2,1)</td> <td> celda (2,2)</td>

I.E.S. POLITCNICO R L.A

2011

<td> celda (2,3)</td> </tr> <tr> <td> celda (3,1)</td> <td> celda (3,2)</td> <td> celda (3,3)</td> </tr> </table> Se ver como: celda (1,1) celda (1,2) celda (1,3) celda (2,1) celda (2,2) celda (2,3) celda (3,1) celda (3,2) celda (3,3)

ATRIBUTOS DE LAS TABLAS El conocimiento de los atributos de una tabla puede considerarse como esencial para la correcta utilizacin de las tablas: border="n" Crea un borde alrededor de la tabla de grosor especificado por el valor "n", tomando como unidad el pxel. Teniendo cero como valor por defecto. Cuando comenzamos la realizacin de una tabla es aconsejable usarlo para ir comprobando que todo funciona como hemos pensado. Width="n" el valor "n" indica la anchura de la tabla en pixels (200) o porcentaje (20%). Tambin se puede utilizar este atributo con las celdas <td> height ="n" el valor "n", asigna la altura de la tabla en pixels o porcentaje. Align="right / left / center" Alinea horizontalmente la tabla con respecto a su entorno. Background="nombre_imagen.extension_del formato" Nos permite colocar un fondo para la tabla a partir de un enlace a una imagen. bgcolor="#ffaabb" indica el color de fondo de la tabla o celda. bordercolor="#ffffff",define el color del borde. cellpadding="n",define el espacio, en pixels, entre los bordes de la celda y el contenido de la misma. Por defecto, y si no se especifica, tiene un valor de 1. cellspacing="x", define el espacio ,en pixels, entre el borde cada una de las celdas y el borde de la tabla. De no especificarse, tiene un valor por defecto de 2.:

I.E.S. POLITCNICO R L.A

2011

Los atributos que modifican a una celda tienen prioridad respecto a los que modifican a una tabla. Por ejemplo podemos aplicar un color azul a una tabla y amarillo para una celda. Ejemplo (1): <table border="1"> <tr> <td> Antonio Perez</td> <td> Zaragoza </td> </tr> </table> Se visualizar: Antonio Perez Zaragoza Ejemplo (2): <table border="10"> <tr> <td> Antonio Perez</td> <td> Zaragoza </td> </tr> </table> Se visualizar: Antonio Perez Zaragoza

Ejemplo (3): <table border="1" width="100%"> <tr> <td> Antonio Perez</td> <td> Zaragoza </td> </tr> </table> Se visualizar:

I.E.S. POLITCNICO R L.A

2011

Antonio Perez

Zaragoza

Ejemplo (4): <table border="1" width="200" bgcolor="red"> <tr> <td bgcolor=yellow> Antonio Perez</td> <td> Zaragoza </td> </tr> <tr> <td> Texto </td> <td> Texto </td> </tr> </table> Se visualizar: Antonio Perez Texto Zaragoza Texto

ATRIBUTOS DE LAS CELDAS Estos atributos modifican el formato de las filas y/o celdas dependiendo si estn en un <tr bgcolor="red"> afectara a toda la fila o se encuentra en <td bgcolor="yellow"> donde solamente afectara a la celda. Estos atributos son: bgcolor ="nombre del color / nmero hexadecimal". Define el color de la celda o fila. bordercolor="nombre del color / nmero hexadecimal". Define el color del borde de la celda. align="top / middle / bottom". Elegimos el lugar en cual el texto es colocado. Top (arriba),middle(centro) y bottom(abajo) valign="left / center / right". Alineacin del texto izquierda (left), centro(center), o derecha (right) Los siguientes atributos slo pueden ser aplicados a una celda y no al conjunto de celdas que forman una fila. colspan="n". Expande el una celda horizontalmente tantas celdas como el valor asignado a n rowspan="n". Expande una celda verticalmente tanta celdas como el valor asignado a n width="n". El valor n indica la anchura de la tabla en pixels (200) o porcentaje (20%). Este atributo tambin se puede aplicar a la celdas<td>.

I.E.S. POLITCNICO R L.A

2011

height ="n". El valor n, define la altura de la celda en pixels o porcentaje. Ejemplos aplicando lo anterior: Ejemplo (1) : <table border="1"> <tr> <td bgcolor="lime" width="250">Diseo de pginas</td> <td> las tablas </td> </tr> </table> Se visualizar: Diseo de pginas Ejemplo (2): <table border="1"> <tr> <td colspan="3" > Diseo de pginas</td> </tr> <tr> <td> Atributos </td> <td> Celdas </td>< td> las tablas </td> </tr> </table> Se visualizar: Diseo de pginas Atributos Ejemplo (3): <table border="1"> <tr> <td> Diseo de pginas</td> </tr> <tr> <td rowspan="2"> Atributos </td> <td> Celdas </td> <td> las tablas </td> </tr> <tr> <td> A </td><td> B </td> </tr> </table> Celdas las tablas las tablas

I.E.S. POLITCNICO R L.A

2011

Se visualizar: Diseo de pginas Atributos Celdas las tablas A B

TITULOS Y CABECERAS EN LAS TABLAS Por medio de las etiquetas <caption>...</caption>podemos colocar un ttulo a una tabla. El caption posee el atributo align="top/ bottom". top alinea el ttulo arriba de la tabla y bottom lo muestra debajo de la tabla. Vease el siguiente, ejemplo: <table> <caption align="bottom"> ttulo </caption> <tr> <td> celda(1,1) </td> <td> celda (1,2) </td> <tr> <tr> <td> celda (2,1) </td> <td> celda (2,2) </td> </tr> </table> Se mostrar: celda(1,1) celda (1,2) Celda (2,1) celda (2,2) ttulo

Cabeceras Las etiquetas <th>...</th> definen las cabeceras de la tabla (table header). Esta etiqueta produce el efecto de visualizar el texto centrado y en negrita: <table> <tr> <th> Cabecera 1 </th> <th> Cabecera 2 </th>

I.E.S. POLITCNICO R L.A

2011

<th> Cabecera 3 </th> </tr> <tr> <td> A </td> <td> B </td> <td> C </td> </tr> </table> Se mostrar: Cabecera 1 a d Cabecera 2 b e Cabecera 3 c f

ANIDANDO

TABLAS

El lenguaje HTML tambin nos da la posibilidad de anidar tablas es decir podemos insertar o colocar tablas unas dentro de otras tablas. Para poder anidar tablas simplemente tenemos introducir la estructura de una tabla completa dentro de una celda. Si realizamos la anidacin de tablas tendremos que ser sumamente cuidadosos, ya que esto es un proceso complicado y enrevesado. Es importante tener en cuenta que es posible anidar tablas sin lmite siendo esta tcnica muy til. Pero debido a la complejidad en la que podemos derivar es muy aconsejable practicar esta tcnica con anterioridad. Pero al mismo tiempo tambin intentaremos usar cuantas menos tablas mejor. Puesto que las ventajas de usar una sola tabla son mltiples: mayor velocidad de carga, mejor control sobre el contenido de la misma, cdigo ms sencillo, etc. El retardo al cargar la pgina can tablas anidadas es debido a que el navegador debe leer primero toda la tabla ante de visualizarla, consiguientemente usando tablas anidadas se produce un efecto acumulativo. Veamos los siguientes ejemplos: Ejemplo (1): <table cellspacing="10" cellpadding="10" border="4"> <tr> <td align="center">Celda tabla principal (padre)</td> <td align="center"> <table cellspacing="2" cellpadding="2" border="6"> <tr> <td>Tabla anidada, Celda (1,1) </td> <td>Tabla anidada, Celda (1,2) </td>

I.E.S. POLITCNICO R L.A

2011

</tr> <tr> <td> Tabla anidada, Celda (2,1) <td> <td> Tabla anidada, Celda (2,2) <td> </tr> </table> </td> </tr> </table> Se muestra: Tabla anidada Celda (1,1) Tabla anidada Celda (1,2) Tabla anidada, Celda (2,1) Tabla anidada, Celda (2,2)

Celda tabla principal (padre)

Ejemplo (2) <table cellspacing="2" border="4" bgcolor="red"> <tr> <td align="center"> Tabla principal </td> <td align="center"> <table border="2"> <tr> <td>Tabla anidada </td> <td>Tabla anidada </td> </tr> <tr> <td> Tabla anidada <td> <td> Tabla anidada <td> </tr> </table> </td> <tr> <td align="center"> Tabla principal </td> </tr> </tr> </table> Se mostrar: Tabla Anidada Tabla Anidada Tabla principal Tabla Anidada Tabla Anidada

I.E.S. POLITCNICO R L.A

2011

Tabla principal

IMAGEN EN HTML <img> El empleo de las imgenes en las pginas web ha sido uno de los elementos que mas ha contribuido a popularizar Internet (World Wide Web). Las imgenes en un documento permiten crear pginas mucho ms atractivas y dinmicas. Segn el tipo de grficos utilizado se pueden conseguir efectos realmente sorprendentes. Dotar de imgenes a un documento web es sencillo esto se realiza por medio de la etiqueta <img>, la cual no se cierra, seguida de la ruta donde esta la imgen. <img src="ruta de la imagen/nombre_archivo.extension_archivo"> <img src="img/tejiendo_redes.jpg"> Podemos encontrar muchos formatos de imgenes, aunque probablemente los ms utilizados son JPG ,GIF y PNG. Veamos unos ejemplos: Ejemplo (1): <img src="img/tejiendo_redes.jpg">

Hemos insertado una imagen jpg que esta en la carpeta img. Es importante observar que esta direccin es una ruta local. no absoluta. Ejemplo (2): <img src="img/logo_img.gif">

I.E.S. POLITCNICO R L.A

2011

Hemos insertado una imagen gif que est en la carpeta img. Es importante observar que esta direccin es una ruta local. no absoluta. Tener que tener muy presente que debemos especificar la ruta de modo relativo , esto nos aporta la siguiente ventaja si movemos el directorio completo (con todos sus archivos y manteniendo su estructura). La ruta especificada en nuestra pgina continua siendo vlida mientras que si especificamos un ruta absoluta no nos valdra. ATRIBUTOS DE LAS IMAGENES Veamos en este punto los atributos de las imgenes, los cuales no permitirn controlar todas las posibilidades del diseo y colocacin de grficos en HTML. Atributos de las imgenes: src="imagen.gif". Este atributo es obligatorio e indica el nombre del archivo imagen (entre comillas) o la URL (ruta o direccin en la que est la imagen que se va incluir en el documento). align="left / right / top / middle / bottom". Permite controlar la alineacin de una imagen con respecto a una lnea de texto adyacente o a otras imgenes en esa lnea. alt="Texto explicativo". Mensaje que se mostrar al pasar el ratn sobre la imgen. Este texto se mostrar en caso de que la imgen no se cargara. Este atributo se implemento cuando los navegadores slo podan desplegar slo texto. width="n" n en pixels. Atributo opcional siendo recomendable usarlo para ayudar al navegador a representar la imagen, define el ancho de la imagen que vamos a representar. height="n" n en pixels. Atributo es opcional y recomendable ponerlo, define la altura de la imagen. border= "n", n en pixels. Mediante este atributo designamos el ancho del borde que rodea la imagen. Seguidamente mostramos un ejemplo de cmo incluir una imagen en nuestra pgina web: <img src"img/jardin.jpg" width="300" height="200" border="0" alt="Un maravilloso jardn">

I.E.S. POLITCNICO R L.A

2011

Es muy importante que observar que podemos modificar la presentacin en pantalla de la imagn (que no el archivo en si) con los atributos width y height Ejemplo (1): <img src"img/jardin.jpg" width="150" height="100" border="0" alt="Un maravilloso jardn">

Texto con imgenes Veamos ahora como maquetar un poco de texto conjuntamente con imgenes: Ejemplo (2): <p> <img src ="img/ordenata_man.gif" align ="left" width="48" height="48"> Un prrafo con una imagen. El atributo align de la imagen esta configurado a la izquierda. La imagen aparecer a la izquierda de este texto </p> Un prrafo con una imagen. El atributo align de la imagen esta configurado a la izquierda. La imagen aparecer a la izquierda de este texto Ejemplo (3): <p>

I.E.S. POLITCNICO R L.A

2011

<img src ="img/ordenata_man.gif" align ="right" width="48" height="48"> Un prrafo con una imagen. El atributo align de la imagen esta configurado a la derecha. La imagen aparecer a la derecha de este texto </p> Un prrafo con una imagen. El atributo align de la imagen esta configurado a la derecha. La imagen aparecer a la derecha de este texto MAPAS DE IMGENES Mapas de imgenes: grficos sensibles <map><area> Puede hacer que parte de la imagen sea un enlace a otra pgina, o a un punto de la propia pgina, es decir, puede hacer un mapa sobre la imagen de manera que secciones de la imagen sean enlaces. Las etiquetas empleadas para esto son: 1) La etiqueta <map>.....</map>. Las cuales engloban el mapa de imgenes. Atributos de la etiqueta <map>: Name="nombre del mapa". Atributo opcional al cual podemos poner entre las comillas el nombre del mapa o un texto explicativo. 2) La etiqueta <area>. Define las reas que vamos a poder activar en esa imagen. Atributos de la etiqueta <area>: shape="rect / poly / circle".estableceremos el tipo de rea a definir, rectgulo, poligono o crculo respectivamente.

Coords= "x1,y1,x2,y2,," entre comillas indicamos los pares de coordenadas de cada punto(x,y) del rea a mapear. Las reas rectangulares se denotan las coordenadas de la esquina superior izquierda y las de la esquina inferior derecha. Las reas poligonales especificaremos las coordenadas de todos los vrtices del rea. En las circulares indicaremos las coordenadas del centro del crculo y el valor del radio.

I.E.S. POLITCNICO R L.A

2011

Href= "direccin pgina". La direccin de la pgina a la que accederemos si pulsamos en el mapa de imgenes. usemap="#nombre del mapa" Deberemos de usar este atributo para que la imagen sea tratada como un mapa de imgenes. Ejemplo (1): <img src="img/simpson_hit.jpg" width="200" heitgh="250" border="0" alt="Hoomer Simpson" usemap="#fire"> <map name="fire"> <area shape="circle" coords="55,110,40" href="#" > </map> Visualizacin:

Ejemplo (2): <img src="img/simpson_2.jpg" width="400" heitgh="300" border="0" alt="The Simpson" usemap="#the_simpson"> <map name="the_simpson">

I.E.S. POLITCNICO R L.A

2011

<area shape="rect" coords="95,187,144,221" href="#" > <area shape="rect" coords="212,219,254,269" href="#" > <area shape="rect" coords="320,252,368,287" href="#" > </map> Visualizacin:

ENLACES EN HTML ENLACE <a> Son sin duda alguna la caracterstica que ms ha contribuido, junto con la implementacin de las imgenes al espectacular desarrollo de la Web (links).

Siendo uno de los elementos ms importantes del HTML, puesto que permiten "navegar" (desplazarse y/o moverse entre los diversos documentos que componen un sitio o incluso entre diferentes sitios web) a esto se le llama hipertexto. Los enlaces son tan importantes que dan nombre al propio lenguaje HTML, Lenguaje de Marcas de HiperTexto.

I.E.S. POLITCNICO R L.A

2011

Un enlace es una referencia a otro documento HTML o a cualquier otro objeto, expresada por un formato universalmente aceptado denominado URL (Universal Resource Locator). Ejemplo (1): <a href="htpp://wwww.pcweb.es/index.html"> ir al la pgina de inicio del manual </a> Visualizacin: ir al la pgina de inicio del manual En prcticamente todas las pginas web, los enlaces son fcilmente reconocibles a simple vista, puesto que suelen ir diferente color al texto, subrayados y cuando pasamos el ratn por encima el cursor cambia de forma que suele ser una mano con un dedo se&ntoilde;alador. Los enlaces se generan mediante la etiqueta <a>...</a> (a de anchor, ancla en ingls). Irn acompaados siempre por un atributo ya sea: <a href="..."> o <a name="..."> La sintaxis general de un enlace es por tanto de la forma: <a href="destino"> Referencia</a> <a name="destino"> Referencia</a> Pudiendo la referencia un texto o una imagen. El destino podr ser un pgina web, una direccin de correo electrnico o incluso un archivo. Ejemplo (2): <a href="http://www.elmundo.es"> el mundo</a> <a href="index.html"> Pgina Inicial del manual</a> <a href="enlaces"> enlace interno</a> Visualizacin: el mundo Pgina Inicial del manual enlace interno

En funcin del destino podemos clasificar los enlaces : Enlaces internos: permiten desplazarse dentro de la misma pgina. Enlaces locales: permiten desplazarse a otras pginas del mismo sitio web.

Enlaces remotos: los dirigidos hacia pginas de otros sitios web.

I.E.S. POLITCNICO R L.A

2011

Enlaces a direcciones de correo: para crear un mensaje de correo dirigido a una direccin de correo especifica.

Enlaces a archivos: permiten a los usuarios puedan hacer descargar de ficheros.

ENLACES: INTERNOS, LOCALES Y REMOTOS Enlaces internos: A otro lugar del mismo documento Este tipo de enlaces estn compuestos de 2 partes: 1. En el lugar a donde queremos desplazarnos, ponemos la siguiente etiqueta: <a name="enlaces _internos"></a> 2. En punto el punto desde donde queremos ir, insertamos la siguiente etiqueta: <a href="#enlaces_internos"> ir al principio del punto </a> En este caso la direccin (URL) es sustituida por un marcador en la misma pgina. El marcador puede ser texto colocado en el lugar al que queremos saltar. No importa lo que sea ya que no se ver. Veamos un ejemplo para desplazarnos al inicio de est pagina: (1) En el lugar al cual queremos ir, pondremos: <a name="inicio_pagina"></a> (2) Escribiremos en el lugar desde el que queremos saltar: <a href="#inicio_pagina">Ir al inicio de la pgina </a> Al pulsar sobre este enlace nos llevar al principio de este punto: ir al principio de la pgina ya que fue all donde colocamos el marcador <a name:inicio_pagina></a> Enlaces Locales: A otra pgina que pertence al Sitio Web En este caso la direccin de la pgina URL se pondr de forma relativa. Por ejemplo si tenemos tres pginas en el mismo directorio: pagina1.html, pagina2.html y pagina3.html y queremos desplazarnos de la pagina1.html a la pagina3.html escribiremos en la pagina1.html: <a href="pagina3.html">Ir a la pgina 3 </a> Con esto es suficiente, no hay que crear ningn marcador a no ser que quieras ir a un sitio concreto de la pagina3.htm. En ese caso tendras que poner en el sitio adonde quieres llegar de la pagina3.htm Enlace remotos: A una direccin de Internet Deberemos escribir la direccin (URL) debe darse forma absoluta, es decir como se ve en el navegador, en la barra de direcciones. Vease el siguiente ejemplo: <a href="http://www.elmundo.es"> Ir al el peridico el mundo </a>

I.E.S. POLITCNICO R L.A

2011

Este enlace no llevar a la pgina principal de el peridico "el mundo". Ir al el peridico el mundo

Enlace a una direccin de correo Para realizar un enlace dirigido hacia una direccin de correo electrnico deberemos usar la instruccin mailto: en el atributo href del enlace, seguido de la direccin de correo a la que se debe dirigir el enlace. <a href="mailto: [email protected]"> [email protected] </a> [email protected] Pulsando sobre el enlace se abrir el programa de correo que tengas configurado, con esta direccin de correo como destinatario. Enlace para descargar un fichero Tendremos que poner la direccin (URL) la ruta donde est el fichero. Por ejemplo, para descargar un fichero de nombre manual_html.zip se deber escribir el siguiente cdigo: <a href="../manuales/manual_html.zip"> manual_html.zip </a> que se ver lo siguiente manual_html.zip. Al pinchar sobre este enlace se abrir una ventana avisndote de una descarga de archivos y preguntndote qu deseas hacer ATRIBUTOS DE LOS ENLACES El atributo: target El atributo target="nombre del marco de destino, _top / _blank/ _self / _parent".

Ejemplo: <a href="http://www.innovanetworks.es" target="_top">

I.E.S. POLITCNICO R L.A

2011

ir a Innova Networks </a> FRAMES ESTRUCTURA DE FRAMES Los frames (marcos, cuadros o paneles) nos dan la posibilidad de dividir nuestra pgina en ventanas ms pequeas. Cada una con sus propios bordes y barras de desplazamiento, pudiendo cargar dentro de cada una de ellas una pgina externa independiente.

Puesto que esta funcin se incluyo con el HTML 4.0 (la ltima versin). Las versiones ms antiguas de los navegadores no tienen implementada esta caracterstica (posibilidad hoy en da bastante improbable) Los frames o marcos son una herramienta que ofrece muchas posibilidades, con grandes inconvenientes. por ejemplo: divisin de la pgina en vario archivos, al tratarse de varios documentos, la carga puede demorarse. y su uso est actualmente sujeto a discusin ignorndose si en un futuro desaparecern de la recomendacin xhtml. En resumen tendremos que valorar si los frames son realmente necesarios en nuestros diseos web. Como dato las casas de programacin y diseo web estn dejando de usar frames. Estructura de los frames Lo primero que tendremos que hacer es una pequea organizacin para la realizacin de nuestra pgina con frames. Veamos los pasos ha seguir para la creacin de una pgina con tres frames: 1. Creacin de un documento maestro en el cual estan definidos los frames. 2. Creacin de tres documentos ms, que se cargarn cada uno en su respectivo frame. (1) Creacin de un documento maestro en el cual estn definidos los frames: Este documento no contendr head y body sino que estar compuesto por head y frameset. Es dentro de la seccin frameset y solamente si colocamos una subseccin no frames donde insertaremos el body. Este body suele ser un texto alternativo que se visualizar en caso de que los navegadores que no soporten frames o tengan esta opcin inactivada) <html> <head><title> Ttulo de la pgina </title></head> <frameset rows="75,*">

I.E.S. POLITCNICO R L.A

2011

<frame src="pagina1.html" name="frame_izda"></frame> <frame src="pagina2.html" name="frame_dch_arriba"></frame> <frame src="pagina3.html" name="frame_dch_centro"></frame> </frameset> <noframes> <body> Lo siento,su navegador no soporta frames. Pulse <a href="frames1.htm> aqu </A> para acceder a los contenidos de estas pginas. </body> </noframes> </html> (2) Creacin de tres documentos ms, que se cargarn cada uno en su respectivo frame: Estos documentos son archivos HTML exactamente iquales a los que hemos estado creando anteriormente. Podemos insertar en esto documentos los elementos HTML que deseemos como etiquetas de cabecera, imagenes etc.. ------------ pagina1.html--------------: <html> <head><title> Pgina1 </title></head> <body bgcolor="gray"> frame izquierdo </body> </html> ------------ pagina2.html--------------: <html> <head><title> Pgina2 </title></head> <body bgcolor="gray"> frame derecha arriba </body> </html> ------------ pagina3.html--------------: <html> <head><title> Pgina3 </title></head> <body bgcolor="gray"> frame derecha centro </body> </html>

I.E.S. POLITCNICO R L.A

2011

ETIQUETAS Y ATRIBUTOS En este apartado vamos ha estudiar las etiquetas y atributos que nos ayudarn a configurar los frames. La etiqueta <frameset>.... </frameset> Es gracias a esta etiqueta, donde definidos el nmero de frames que compondrn nuestra pgina. Atributos de <frameset> col="x,y". Asignamos el nmero de frames verticales, en este caso dos frames, x e y. Donde x e y pueden ser pixels ("200,400"). Porcentaje ("20%,80%") o especificando un slo frame y el otro en el porcentaje restante mediante el smbolo * ("250,*"). rows="x,y". Definimos el nmero de frames horizontales, en este caso dos frames. Donde x e y pueden ser pixels ("200,400"), porcentaje ("20%,80%") o especificando un slo frame y el otro en el porcentaje restante mediante el smbolo * ("250,*"). frameborder="n". Define que se visualice el borde en los frames, donde n puede tomar los valores "yes","1","no","0". framespacing="n". Valor del espacio entre frames en pixels.<BR bordercolor="color". Definimos el color del borde separador, color asigna el color bien por medio de nombre predefinido "red" o por medio de un nmero heaxdecimal "#770033" Ejemplo <html> <head> <title>Mi Pagina con Frames</title> </head> <frameset rows="20%,*"> < frame name="" src="izd.html" marginwidth="10" marginheight="10" scrolling="auto"> <frame name="" src="dcha.html" marginwidth="10" marginheight="10" scrolling="auto"> </frameset> </html> La etiqueta <frame> Define cada uno de los marcos que compondrn la pgina. Debemos de colocar la etiqueta <frame> entre <frameset> y </frameset>. Tendremos que poner tantas etiquetas <frame> como marcos queramos en nuestra pgina y tienen que estar definidos en cols y rows. Sus principales atributos son:

I.E.S. POLITCNICO R L.A

2011

src="ruta del documento html". Indica el documento que se mostrar en el frame. Indicaremos la direccin, URL, del documento que debe mostrarse en la zona. Si no se pone este atributo el area reservada estar vaca. name="nombre". Asigna un nombre al marco. es un atributo importante puesto que cuando queramos cargar una pgina en un marco mediante un enlace, tendremos que especificar el nombre del marco. Noresize. Este atributo no posee valores. Simplemente se coloca o no se coloca. Si lo insertamos impide que le frame se pueda redimensionar. Si no lo ponemos el marco se podr redimensionar scrolling="yes / no / auto". Asigna si el marco tendr o no una barra de desplazamiento. marginwidth="nmero de pixels". Indicaremos, en nmero de pixels, el tamao de los mrgenes izquierda y derecha. marginheight="nmero de pixels". Indicaremos, en nmero de pixels, el tamao de los mrgenes superior e inferior. <frame src="panel_titulo.html" scrolling="no"> <frame src="panel_menu.html" marginheight="50"> <frame src="panel_intro.html" name="texto"> En la zona superior, colocaremos el documento panel_titulo.html y no permitiremos barra de desplazamiento. En el rea izquierda, destinaremos el documento panel_menu.html e indicamos un margen superior de 50 pixels. Por ltimo, la derecha, destinaremos el documento panel_intro.html y la ponemos de nombre texto. La etiqueta <noframes> Esta etiqueta se utiliza para en el supuesto caso de que el navegador del usuario no soporte frames. Este mostrar el contenido entre estas etiquetas <noframes>...>/noframes>. En el caso de que el navegador soporte frames , este ignorar el contenido de esta etiqueta. Tenemos que sealar que esta etiqueta esta prcticamente en desuso, puesto que el 100% de los navegadores reconocen los frames. Un ejemplo de una pgina simple con frames sera: <html> <head> <title>Mi Pagina con Frames</title> </head> <frameset rows="25%,*" frameborder="yes" bordercolor="blue"> <frame name="uno" src="uno.html" marginwidth="60" marginheight="40"> <frame name="dos" src="dos.html" marginwidth="30" marginheight="30"> </frameset>

I.E.S. POLITCNICO R L.A

2011

<noframes> <body> Lo sentimos. Su navegador no soporta frames. Pulse <a href="noframes.html">no frames</a> para acceder a una pagina sinframes. </body> </noframes> <html> ENLAZANDO PAGINAS A LOS FRAMES Esta ocasin se produce cuando estamos interesados en que al pulsar sobre un enlace este se abra en el marco (recuadro o panel) que nos interese. Para conseguir esto , deberemos de insertar en la etiqueta <a> el atributo target="nombre_del_frame_donde_queremos_abrir_el_documento", que tendr como objetivo el frame donde queremos que se abra. Ejemplo: <html> <head> <title>Pgina Con Marcos</title> </head> <frameset cols="20%, 80%"< <frame src="pagina1.html" name="frame_izd"></frame> <frame src="pagina2.html" name="frame_dcha"></frame> <noframes< <body< Lo sentimos su navegador no soporta frames </body< </noframes> </frameset> </html< En el frame de la izquierda se muestrar la pagina_1.html. Pensemos que queremos que el marco derecho se muestre la pagina_3.html al pulsar en un enlace. Este enlace deber de ser : <a href="pagina_3.html" target="frame_dcha"> pagina 3</a>

El atributo target El atributo target="nombre del marco de destino, _top / _blank/ _self / _parent".

I.E.S. POLITCNICO R L.A

2011

_top: muestra el documento enlazado ocupando toda la ventana del navegador. Sale de los frames. _blank: abre un ventana nueva en el navegador(sin frames), en la cual carga el fichero. _self : carga el documento en le marco desde donde pulsamos el enlace. Es la opcin por defecto. _parent: carga el documento en el frame anterior al que contine el enlace "padre". En caso de no haber lo muestra en una ventana completa. <a href="http://www.innovanetworks.com" target="_top"> ir a Innova Networks </a> FORMULARIOS EN HTML Hasta el momento, hemos visto caractersticas del HTML que permiten al usuario visualizar las diferentes pginas Web con su contenido es decir el usuario se limita simplemente ha recibir informacin no tiene la posibilidad de interactuar con el sitio o autor Web. Los Formularios nos dan la posibilidad comunicarnos con el sitio web. Estos formularios se componen de tantos campos como queramos obtener. Una vez que los datos han sido enviados a la URL estos sern procesados. Un ejemplo de esto son las encuestas online, formularios de proceso de pedido, etc.. Empleando HTML solamente podremos enviar el formulario. Para procesarlo tendremos que emplear un programas especiales llamados CGI (Common Gateway Interface), estos programas los podemos encontrar en bastantes servidores, si nuestra pginas estn alojados en un servidor que no dispone de esta caracterstica, podremos encontrar en otros servidores que nos ofrezcan este servicio. Tambin es posible procesar los datos enviados por los formularios a travs de lenguajes como PHP o ASP. La etiqueta <form>...</form> Una vez dicho todo esto, no hay que olvidar que un formulario sigue siendo cdigo HTML. Para iniciar un formulario utilizaremos la etiqueta <form>...</form>, englobando esta etiqueta todos los campos que pertenecen al formulario. La etiqueta <form>, deber de obligatoriamente ir con los siguientes atributos: 1. action="[email protected] / cgi-bin/ encuesta ", definimos la accin que llevar a cabo el formulario. (lo enviamos a una direccin de correo URL mailto, o lo enviamos a un CGI)
2. method="get / post" indicamos el mtodo de transferencia de las variables que componen dicho

formulario. Usando el mtodo get, los datos se envan a travs de la barra de direcciones, aadidos a la url especificada en el atributo action. por ejemplo: http://www.encuentas?formulario_54a=encuesta_1 Este mtodo tiene varias limitaciones:

I.E.S. POLITCNICO R L.A

2011

1. la longitud de la infomacin transmitida esta limitada a 256 caracteres. 2. deben usarse nicamente caracteres ascii A travs del mtodo post se envan a internamente al HTML, a travs del STDIO. No teniendo ninguna de las limitaciones anteriores. veamos ahora el atributo opcional y solamente se puede emplear cuando si hemos elegido el mtodo post (method="post").
o

enctype="text/plain", Especifica el sistema de encriptacin. Por defecto, tiene el sistema MIME. Si queremos enviar el formulario sin ningn tipo de encriptacin le daremos el valor "text/plain". Si queremos enviar el formulario por correo electrnico, el valor de enctype deber ser "text/plain". De esta manera enviamos el formulario y su contenido como texto plano formando parte del email. Sin embargo si el destino del formulario es un programa que lo procese no incluiremos enctype dentro de la etiqueta form, as enctype tendr su valor por defecto.

Ejemplo de una etiqueta <form> completa: <form action="mailto:[email protected] (o nombre del programa CGI)" method="post" enctype="text/plain"> Entre esta etiqueta y su cierre Final del formulario deberemos de colocar el resto de etiquetas que componen el formulario. La etiqueta <input> La etiqueta <input> posibilita y define la introduccin de datos en el formulario. Atributos de la etiquta <input> : type = "text / radio / checkbox / button / image / password / hidden / file / submit / reset ", donde type puede tomar uno de los anteriores valores. (1) text. Indica que el campo a introducir ser texto, posee los siguiente parmetros:

size="n". Determina el tamao de la caja de texto que aparece en pantalla. maxlenght="n". Designa el nmero mximo de caracteres que se pueden introducir en la caja de texto. name=" nombre". Asigna un nombre nico a los datos que se inserten en la caja de texto. value=" texto ". Designa el texto que aparecer inicialmente en la caja de texto. disabled. Desactiva la caja de texto, por tanto el usario no podr insertar ningn texto en dicho campo. accept="lista de content-type". Indicamos el tipo de datos que aceptara el servidor. Teniendo como valores: 1. text/html 2. application/msexcel 3. application/msword

I.E.S. POLITCNICO R L.A

2011

4. image/gif 5. image/jpg

readonly. Establece que el texto no puede ser modificado por el usuario. tabindex="n". Asigna el orden de tabulador que tiene el campo respecto a los dems elementos que componen el formulario..

alt= "comentario". Descripcin del elemento. Ejemplo(1):

<form action="cgi-bin/sport.exe" method="post" enctype="text/plain" name="encuesta_deportiva_1"> Nombre: <input type="text" size="20" maxlength="20" name="nombre"> </form> con lo que obtenemos:

Nombre:

(2) radio. Es un campo multivalor excluyente, permite escoger una y slo una opcin de un conjunto de valores. Posee lo siguientes parmetros:

name="nombre". Asigna un nombre identificador nico. Este identificador debe ser el mismo para todos los elementos radio de un grupo. value="valor"". Asigna un valor a la variable de cada casilla que componen el elemento radio. checked". Selecciona por defecto uno de los radio botones del grupo. disabled". Desactiva el radio botn, por lo que el usuario no podra marcarlo. tabindex="n". Especifica el orden de tabulador que tendr el campo respecto todos los elementos que componen el formulario.

Ejemplo: <form action="mailto:[email protected]" method="post" enctype="text/plain" name=" ejemplo_formulario"> Sexo <input type="Radio" name="sexo" value="Hombre"checked>Mujer <input type="Radio" name= "sexo" value="Mujer">Hombre </form> Que se mostrar en el navegador:

Sexo

Mujer

Hombre

I.E.S. POLITCNICO R L.A

2011

(3) checkbox. Define las casillas de verificacin que tendr nuestro formulario. Este tipo de elementos pueden ser activados o desactivados por el usuario al pulsar sobre la caja. A diferencia con el componente anterior radio, este elemento no es auto excluyente. Tiene como parmetros complementarios:

name="nombre". Asigna un nombre identificador nico a la variable definida por el elemento. Este identificador debe ser el mismo para todos los elementos radio de un grupo. value="valor". Asigna un valor a la variable a cada casilla de verificacin que componen el ceckbox. checked. Selecciona por defecto una o ms de las casillas del grupo. disabled. Desactiva la casilla de verificacin, por lo que el usuario no podra selecionarla.

tabindex="n". Especifica el orden de tabulador que tendr el campo respecto todos los elementos que componen el formulario. Ejemplo.<form action="mailto:[email protected]" method="post" enctype="text/plain" name="checkbox"> Cual es tu genero de cine preferido: <input type="checkbox" name="cine" value="Western"> Western <input type="checkbox" name="cine" value="Terror"> Terror <input type="checkbox" name="cine" value="Comedia"> Comedia <input type="checkbox" name="cine" value="accion"> Accin </form> Que se mostrar en pantalla:

Cual es tu genero de cine preferido: Western Terror Comedia accion

(4) button. Inserta en el formulario de un botn estandar. Este botn puede ser usado para diferentes acciones. El uso ms frecuente de un botn es en la programacin en el cliente. Utilizando lenguajes como Javascript ,podemos definir acciones a tomar cuando un visitante pulse el botn de una pgina web. Sus parametros son:

name=" nombre". Asigna un nombre al botn, value=" valor ". Define el texto que veremos en el botn, cuando lo nuestre el navegador. disabled. Desactiva el botn, cuando se pulsa no se produce ninguna accin.. tabindex ="n". Especifica el orden de tabulador que tendr el campo respecto todos los elementos que incluye el formulario.

Ejemplo: <form action="mailto:[email protected]" method="post" enctype="text/plain" name="button"> <input type="button" name="boton_enviar" value="enviar">

I.E.S. POLITCNICO R L.A

2011

</form> Con lo que obtendremos:

(5) image.nos permite personalizar el tipo de botones que tiene el formulario, es decir, nos permite la posibilidad de conferir a una imagen la funcionalidad de un botn. Posee lo siguiente parmetros:

name="nombre". Asigna un nombre al botn para identificarlo de forma nica y poder as acceder luego a sus propiedades. src="ruta_imagen". Asigna la ruta al fichero de la imagen. Recomendamos que esta ruta sea relativa al directorio, aunque puede ser absoluta. width="n". Asigna la anchura del botn de imagen. height="n". Define la altura del botn de imagen. align= " left / middle / right / bottom / baseline...". Asignamos la posicin del texto que rodea el botn. hspace="n". Define el espacio horizontal que hay entre el botn y el texto que lo rodea. vspace="n". Define el espacio vertical que hay entre el botn y el texto que lo rodea. alt="texto". Asocia un texto explicativo al botn de imagen. Al situar el cursor encima del botn se mostrara este texto. disabled. Inhabilita el botn, impidiendo que se produzca accin alguna cuando es pulsado, pus permanece inactivo tabindex="n". Especifica el orden de tabulador que tendr el campo respecto todos los elementos que componen el formulario.

usemap= " #nombre de mapa ". Nos da la posibilidad del uso de un mapa de imagenes para la de entrada de datos. Ejemplo.<form action="mailto:[email protected]" method="post" enctype="text/plain" name="imagen"> <input type="image" name="boton" src="imagenes/boton.jpg" width="107" height="35" hspace="10" align="middle"> </form> Se mostrar:

I.E.S. POLITCNICO R L.A

2011

(6) password. Crea una zona de texto donde los caracteres al introducirlos por el usuario se reemplazan por asteriscos, debido a motivos de seguridad. Teniendo como parmetros opcionales, los mismos que posee el tipo text Ejemplo.<form action="mailto:[email protected]" method="post" enctype="text/plain" name="miform"> Contrasea <input type="password" size="15" maxlength="10"> </form> con el que obtenemos:

Contrasea

(7) hidden define un campo escondido, por lo que no se ve en pantalla. Sus atributos son:

name=" nombre". Asigna un nombre identificador nico al campo oculto. value=" valor ". Asigna un valor campo.

Ejemplo: <form action="mailto:[email protected]" method="post" enctype="text/plain" name="miform"> <input type="hidden" name="contrasea" value="123ABC"> </form> (8) file.nos permite enviar un archivo adjunto al formulario. Sus principales atributos son:

title="titulo": que muestra un texto en tipo al situar el cursor encima del botn de examinar (slo en Internet Explorer). accept="tipo_archivo":que determina el tipo de archivo que se admite como para enviar. disabled : que desactiva tanto el botn como la caja de texto, impidiendo al usuario seleccionar un archivo (slo Internet Explorer y Nestcape 6x). size="numero_entero": que fija la anchura de la caja de texto asociada.

(9) submit. Inserta en el formulario un botn de envo de datos. Cuando el usuario pulsa en el botn los datos contenidos en el formulario son enviados a su destino definido en el atributo action, direccin de correo o programa de proceso de datos. Teniendo como parmetros:

name="nombre". Asigna un nombre identificador nico al campo . value="valor". Define el texto que aparecer en el botn. disabled. Desactiva el botn, de tal forma que no se produce ninguna accin cuando se pulsa, pus

I.E.S. POLITCNICO R L.A

2011

permanece inactivo.

tabindex="n". Designa el orden de tabulador que tendra el campo respecto todos los elementos que incluye el formulario.

(10) reset. Botn de borrado de todos los datos introducidos en el formulario. Sus atributos son los mismos que los de submit. Ejemplo: <form> <input type="reset" value="borrar"> </form> Se visualizar:
borrar

La etiqueta <select> Algunas veces nos interesar, no que el usuario inserte unos datos, sino acotarle el rango de la respuesta, esto es, le mostramos unos posibles valores de los cuales el usuario escoger uno. Por ejemplo, elegir, el tipo de tarjeta de crdito para un pago, mdelo de coche, etc... Las listas de seleccin son este tipo de mens desplegables que nos permiten elegir una (o varias) de las mltiples opciones de las que nos proponen. Para conseguir esto, disponemos de la etiqueta <select>...</select> Veamos un ejemplo: <form> <select name="colores"> <option value="blanco">blanco</option> <option value="amarillo">amarillo</option> <option value="verde">verde</option> <option value="rojo">rojo</option> <option value="azul">azul</option> <option value="negro">negro</option> </select> </form> Visualizacin en el navegador:

Es importante observar la primera opcin aparece selecionada por defecto es la primera de la lista. Podemos elegir la opcin que queremos, con la propiedad selected. <option value="amarillo" selected>amarillo</option> <form>

I.E.S. POLITCNICO R L.A

2011

<select name="colores"> <option value="blanco">blanco</option> <option value="amarillo" selected >amarillo</option> <option value="verde">verde</option> <option value="rojo">rojo</option> <option value="azul">azul</option> <option value="negro">negro</option> </select> </form> Visualizacin en el navegador:

Con el objetivo de asegurarnos de que el usuario a elegido el mismo la opcin, en muchas ocasiones por despiste de este se enva con el formulario la opcin por defecto, muchos desarrallodores web colocan un espacio en blanco o habilitan un texto generico. Ejemplo: <option value="enblanco"></option> Y una cosa mas, podemos convertir la ventana en un scroll fijo, sin mas que aadir a select el atributo size="": Si se desean seleccionar varias opciones se debe especificar el atributo multiple en la directiva select. Ejemplo: <form> <select name="material" size="3" multiple> <option> Corcho <option> Plastico <option> Madera <option> Acero Inoxidable <option> Cobre <option> Plomo </select> </form> Se visualizar:

La etiqueta <textarea> Esta etiqueta <textarea>...</textarea> nos permite asignar una zona de texto, donde el usuario podr escribir libremente. Ejemplo: <form> <textarea name="opinion" rows="5" cols="55">

I.E.S. POLITCNICO R L.A

2011

Introduzca su opinin sobre este manual prctico de HTML </textarea> </form> Se visualizar:

Atributos de <textarea>: rows="n".Donde n es el nmero de filas cols="n". Donde n es el nmero de columnas

name="nombre". Asigna un nombre identificador nico al campo. wrap="off / soft / hard". Se usa para indicar el texto que el texto se debe justificar (ajustar al ancho de la ventana. Off valor por defecto, no hay ajuste del texto envindose este tal y como fue escrito. Soft, ajusta el texto a la ventana, adems envia este como una cadena continua. Hard, ajusta el texto a la venta enviando el texto como separando la palabra y lneas donde sea necesario readonly. No deja que el texto escrito en el rea de texto pueda ser modificado por las personas que vean la pgina (sin embargo ese contenido ser enviado con el resto del formulario). disable. Desactiva el elemento. Impidiendo que el texto que contiene se ha modificado, y adems tampoco es enviado con el formulario.

Ejemplo: <form> <textarea name="opinion2" rows="2" cols="55" readonly> Este texto no se puede modificar es slo de lectura </textarea> </form> Se visualizar:

EJEMPLO DE UN FORMULARIO A continuacin presentamos un ejemplo de un formulario, maquetado por medio de una tabla: <form action="mailto:[email protected]" method="post"

I.E.S. POLITCNICO R L.A

2011

enctype="text/plain"> <table border="0"> <tr height="50"> <td>Nombre</td> <td> <input name="nombre" type="Text" size="18" maxlength="18"> </td> </tr> <tr height="50"> <td>apellidos</td> <td> <input type="text" name="apellidos" size="48" maxlength=48"> </td> </tr> <tr height="50"> <td>f. nacimiento </td> <td> <input name="f_n" type="text" size="18" maxlength="18"> </td> </tr> <tr height="50"> <td>calle y nmero</td> <td> <input type="text" name="domicilio" size="48" maxlength="48"> </td> </tr> <tr height="50"> <td>cdigo postal</td> <td> <input type="text" name="cp" size="5" maxlength="5"> </td> </tr> <tr height="50"> <td>provincia</td> <td> <input type="text" name="ciudad" size="20" maxlength="20">     Telfono <input type="text" name="telefono" size="9" maxlength="9"> </td> </tr> <tr height="50"> <td>Sexo</td> <td>Hombre<input type="radio" name="sexo" value="H"> Mujer <input type="radio" name="sexo" value="M"> Estado Civil <select name="estado_civil"> <option>Soltero

I.E.S. POLITCNICO R L.A

2011

<option>Casado <option>Divorciado <option>Otro </select> <td> </tr> <tr height="50"> <td>Idiomas</td> <td> <input type="checkbox" mane="idiomas" value="E"> Espaol <input type="checkbox" mane="idiomas" value="F"> Francs <input type="checkbox" mane="idiomas" value="I"> Ingls <input type="checkbox" mane="idiomas" value="A"> Alemn </td> </tr> <tr height="50"> <td>Comentarios <br> Personales</td> <td> <textarea name="coment" rows="2" cols="44"></textarea> </td> </tr> <tr height="50"> <td>Pulse aqui</td> <td align="center"> <input type="submit" value="enviar los datos"> <input type="reset" value="borrar los datos"> </td> </tr> </table> </form>

I.E.S. POLITCNICO R L.A

2011

Nombre Apellidos F. Nacimiento Calle y Nmero Cdigo postal Provincia Sexo Idiomas Hombre <> Telfono Mujer Estado Civil <>

Espaol

Francs

Ingls

Alemn

Comentarios Personales

Pulse aqui

enviar los datos

borrar los datos

Multimedia: incluyendo sonido De un forma similar a como se inserta una imagen se puede adjuntar un fichero de sonido o video. Podemos encontrar varios mtodos a la hora de incluir ficheros de sonido: (A) La etiqueta <a href=" "> Los enlaces es una de la bases del lenguaje HTML, una de sus aplicaciones es la de enlazar a los ficheros de sonido. Estos ficheros de sonido pueden ser ejecutados por mismo navegador o puede se reproducido por un programa externo que se abra automticamente , ejemlo:wimap. En el caso de que el usuario no disponga del programa o pluging se visualizar una ventana de descarga del fichero. La sintaxis general en este caso ser del tipo:

I.E.S. POLITCNICO R L.A

2011

<a href="ruta_fichero">Starwars:quote</a> Ejemplo: <a href="/sounds/starwars.mp3"> If you only knew the power of the dark side </a> If you only knew the power of the dark side como ya sabemos Tenemos varias opciones a la hora de incluir un fichero de audio en una pgina. Opcin que dependen del navegador usado y/o del tipo de fichero adems dependiendo del navegador elegido se puede usar diferentes etiquetas. (B) La Etiqueta <bgsound>....<bgsound>: Explorer La etiqueta bgsound incorpora sonidos de fondo en una pgina web, sonidos que se ejecutan automticamente al cargarse la pgina. Esta etiqueta es slamente interpretada por el navegador Internet Explorer, puesto que Microsoft es el propietario esta etiqueta. <bgsound> admite los formatos mid, wav ,au , mp3 y posiblemente muchos ms por medio de plugins de uso general. Ejemplo: <bgsound src="ruta_fichero" loop="1" balance="b" volume="v"> </bgsound> atributos de bgsound:

src="ruta_fichero" Indica la ruta del fichero a reproducir. loop="l". Designa el nmero de veces (l) que se debe reproducir el fichero de audio. Si le damos el valor infinite, el fichero se reproducir indefinidamente. balance="b". Indica el balance del sonido entre los dos altavoces del equipo, es decir, (normalmente derecho e izquierdo). Sus valores estan comprendidos entre -10,000 y +10,000, correspondiendo el valor 0 a un balance equilibrado entre los dos altavoces. volume="v". Indica el volumen de los altavoces, estando su valor comprendido entre -10,000 y 0. No es soportado por los equipos Machinthos.

Ejemplo: <bgsound src="sounds/lack_of_faith.mp3" balance="0" volume="-10"> </bgsound> (C) La etiqueta <embed> Esta etiqueta fue implementada por Netscape con la finalidad de insertar ficheros de audio. Con el paso del tiempo Microsoft tambin incluyo esta etiqueta en su navegador Internet Explorer. <embed> nos va a incluir en la pgina web, un objeto especial, llamado Crescendo el cual es una consola de mando. Compuesta por tres botones , play (reproducir), pause(pausa) y stop(detencin total) Esta consola se nos presenta con un aspecto diferente segn el navedor usado: Internet Explorer muestra la consoloa de Windows

I.E.S. POLITCNICO R L.A

2011

Media con un tamao configurable, mientras que Netscape nos muestra una consola propia con tamao fijo. La sintaxis general de la etiqueta embed es del tipo: <embed atributo1="valor1" atributo2="valor2"... atributoN="valorN"> </embed> Podemos organizar estos atributos en dos tipos, atributos relativos con el sonido y atributos concernientes al la consola. 1. Atributos relativos al sonido:

src="ruta_fichero". Indica la ruta del fichero a incluir. loop="n/true/false". Indica el nmero de veces que se repetir el fichero de audio. Donde n es un numero entero, true que sera un nmero infinito de veces y false una sola vez. Este atributo solo funciona en Netscape. playcount="n". Aplica el nmero de veces (n) que se ejecutara el fichero de audio, slo Internet Explorer. type="tipo_fichero". Indica el tipo de fichero de audio que vamos a reproducir, ayudando al navegador a reproducirlo puesto que directamente ejecutara el programa mas adecuado o plugin. Tipos aceptados midi, wav, mp3 etc. Ejemplo: type="audio/mp3" autostart="true/false". Asigna si se comienza la reproduccin del fichero automticamente al cargarse la pgina o si se requiere la intervencin del usuario para empezara la ejecucin del archivo de audio. pluginspage="URL". Designa la direccin de pgina web para la posible descarga de un plugin (pequea aplicacin) en caso de ser necesario para la ejecucin del archivo. Soportada slo por Netscape Navigator name="nombre". Asigna un nombre identificador (debe ser nico en la pgina) volume="v". Indica el volumen de reproduccin, estando su valor comprendido entre 0 y 100, siendo su valor por defecto 50.

2. Atributos relativos a la consola: hidden="true / false". Indica si se mostrar (true) o no (false) la consola. width="n" Fija la anchura en pxel de la consola.

I.E.S. POLITCNICO R L.A

2011

height="n". Fija la altura en pxels de la consola align="top / bottom / center / baseline / left / right / texttop / middle /absmiddle / absbotom" . Similar la etiqueta img, indica la alineacin vertical y/o de la consola. hspace="hs". Indica la separacin horizontal en pixels entre la consola los elementos que la rodean, vspace="vs". Indica la separacin vertical, en pixels, entre la consola y los elementos de la pgina que la rodean.

Siendo estos atributos los ms importantes, aunque es posible encontrar ms estos no funcionan correctamente puesto que suelen ser especficos de un u otro navegador. Veamos a continuacin unos ejemplos de la etiqueta embed: <embed src="sounds/starwars_quote2.mp3" hidden="false" type="audio/mp3" autostart="false" width="100" height="40"> </embed>

(D) La Etiqueta object Object sustituye las etiquetas applet, bgsound, embed, etc. Siendo una etiqueta ms moderna y flexible.

Multimedia: incluyendo vdeo Para insertar vdeo en nuestros documentos web podemos usar varias formas una mediante la etiqueta img, embed y object. (A) la etiqueta <img> Internet Explorer introdujo nuevas posibilidades a la etiqueta estndar <img> para la inclusin de ficheros de video en una pgina web, por medio de los siguientes atributos:

dynsrc="ruta_fichero_video". Especifica la localizacin del fichero, y donde ruta_fichero_video puede ser una ruta local relativa, una ruta a partir del directorio raz del servidor web o una URL completa de localizacin del fichero en Internet. loop="n /infinite". Fija el nmero de veces que se debe visualizar el fichero de video (n veces o infinitas). El valor por defecto es 1. start="fileopen /mouseover". Establece si el fichero se debe empezar a ejecutar al abrir la pgina (valor por defecto) o cuando se pase el puntero del ratn sobre l. Tambin podemos encontrar en las referencias otros atributos, pero que slo tienen efecto en versiones antiguas de Internet Explorer: controls, que tericamente debera hacer aparecer los controles de la consola del visualizador, loopdelay="m", que especifica el tiempo en milisegundos (m) que hay entre una

I.E.S. POLITCNICO R L.A

2011

y otra reproduccin del video. Esta forma de presentar videos no es compatible con los navegadores Netscape, por lo que no se aconseja su uso. En caso de querer usarla, podemos especificar una imagen principal en la etiqueta IMG mediante su atributo SRC, de tal forma que en los navegadores Netscape se ver dicha imagen, mientras que en Internet Explorer se mostrar el video. Ejemplo: (slo para Internet Explorer) <img src="img/motion2.avi" dynsrc="img/motion2.avi" loop="2" width="250" height="160"> visualizacion:

Adems de los atributos anteriores, podemos usar los que admite una imagen estndar: align, border, width, height, etc., pero teniendo en cuenta que algunos de ellos se vern limitados a las caractersticas propias de un fichero de video. Por ejemplo, si modificamos la altura del video mediante el atributo height, la anchura del mismo tambin se modificar de forma equivalente, para mantener las proporciones originales. La etiqueta <embed> Esta etiqueta funciona exactamente igual que para los archivos de audio vistos anteriormente. atributos relativos al video:

src="ruta_fichero" Fija la ruta en la que se encuentra el fichero de video a reproducir. La ruta puede ser relativa a nuestro sistema de carpetas local, absoluta respecto el sistema de carpetas del servidor web o una URL completa que localice le fichero en Internet. loop="true/false". Determina el nmero de veces que se debe ejecutar el fichero de video. Los valores admitidos son true (infinitas veces) y false (slo una vez). type="tipo_fichero". Atributo importante, que declara el tipo de fichero de video que estamos usando, con lo que el navegador web puede ejecutar el programa o plugin adecuado para la reproduccin del fichero. Puede ser video/avi, video/quicktime (.mov), video/mpeg, etc. pluginspage="URL". Establece, en caso de ser necesario un plugin especial para reproducir el fichero, la pgina web donde se puede descargar el mismo. Slo se activa en el caso de que el navegador no sea capaz de reproducir el fichero por s mismo. showcontrols="1/0". Fija si se debe de ver (valor por defecto) o no la barra inferior de controles de la consola de video. Slo funciona bien en Netscape 4x.

I.E.S. POLITCNICO R L.A

2011

showdisplay="1/0". Fija si se debe mostrar (valor por defecto) o no una banda inferior en la consola con informacin sobre el fichero de video (nombre, autor, copyright, etc.). Slo funciona bien en Netscape 4x. showstatusbar="1/0". Fija si se debe mostrar (valor por defecto) o no una banda inferior en la consola con informacin temporal sobre la visualizacin del video y sobre el sonido del mismo. Slo funciona bien en Netscape 4x. name="nombre". Asigna un nombre identificador (debe ser nico en la pgina) a una etiqueta embed determinada, con objeto de ser accedida luego por lenguajes de script. volume="v". Determina el volumen de reproduccin del sonido que acompaa al video, y que puede variar entre 0 y 100. Es slo soportada por Netscape Navigator. width="w". Determina el ancho visible de la consola de video, en pixels. height="h", que determina el alto visible de la consola de video, en pixels. align="top / bottom / center / baseline / lef t/ right / texttop / middle / absmiddle / absbotom" . Anlogo al de la etiqueta IMG, define la alineacin horizontal o vertical de la consola de video respecto de los elementos de la pgina. hspace="hs". Establece la separacin horizontal, vspace="vs", que establece la separacin vertical, en pixels, entre la consola y los elementos de la pgina que la rodean. Anloga a sus equivalentes de la etiqueta IMG.

Ejemplo: <embed src= "img/motion2.avi" type="video/avi" autostart="false" width="165" height="140"> Visualizacin:

La Etiqueta object Object sustituye las etiquetas applet, bgsound, embed, etc. Siendo una etiqueta ms moderna y flexible Introduccin a los objetos: imgenes , sonidos , videos, etc.. La etiqueta <object> Las pginas Web, en su constante evolucin. Han pasado de ser unos simples documentos, a verdaderas presentaciones multimedia, dotadas de imagenes, videos, sonidos, animaciones e incluso realidad virtual. Las caractersticas multimedia del HTML posibilitan a los programadores poner en sus pginas web, pequea aplicaciones (programas que se descargan automticamente y se ejecutan el ordenador del usuario), videos cortos como por ejemplo videoclips, trailers, ltimamente est de moda los documentos flash y todo tipo de videos y/o animaciones. Para normalizar la inclusin de ficheros, HTML 4 introduce la etiqueta OBJECT, que ofrece una solucin

I.E.S. POLITCNICO R L.A

2011

universal para la inclusin de objetos genricos. Object sustituye las etiquetas applet, bgsound, embed, etc. Siendo una etiqueta ms moderna y flexible. Sin embargo la polmica entre las diversos navegadores contina. Mediante la etiqueta object definimos un objeto o un componente externo que tiene como misin la reproducion del fichero. Normalmente, un navegador (Aunque sea capaz de reconocer la etiqueta OBJET) no podr mostrar el contenido de un OBJECT a menos que tenga el correspondiente Plug-In instalado. Insertando una imagen con la etiqueta <object> Por ejemplo, si queremos adjuntar una imagen png en un documento, el programador puede escribir el siguiente cdigo: <object data="img/noche.png" type="image/png"> <em>Noche estrellada</em> </object> Nota: no funciona en el Enternet Explorer 6.0 se muestrar: La sintaxis general de la etiqueta object, para el caso de ficheros de sonido: <object atributo1="valor1" ....atributoN="valorN"> <param name="nombre" value="valor"> <param name="nombre" value="valor"> ... </object> Atributos relativos al audio:

classid="identificador_objeto". Fija la URL del objeto o componente externo necesario para reproducir el fichero de audio, y la implementacin CLSID de los controles ActiveX necesarios. type="tipo_fichero". Indica el tipo de fichero de audio que ejecutoa. width="n". Fija la anchura en pxel de la consola. height="n". Fija la altura en pxels de la consola align="top / bottom / center / baseline / left / right / texttop /middle / absmiddle / absbotom" . Similar la etiqueta img, indica la alineacin vertical y/o de la consola. hspace="hs". Indica la separacin horizontal en pixels entre la consola los elementos que la rodean, vspace="vs". Indica la separacin vertical, en pixels, entre la consola y los elementos de la pgina que la rodean. autostart="true/false". Asigna si se comienza la reproduccin del fichero automticamente al cargarse la pgina o si se requiere la intervencin del usuario para empezara la ejecucin del archivo de audio. standby="mensaje". Muestra un mensaje en pantalla mientras se carga el fichero.

I.E.S. POLITCNICO R L.A

2011

Parmetros relativos al sonido: param name="FileName" value="ruta_fichero" . Indica el nombre del fichero y la ruta del fichero de audio a reproducir param name="autostart" value="true/false" . Asigna si el navegador comenzara a reproducir sonido automticamente al cargar la pgina o si ser el usuario el que pulse el botn play . Cabe mencionar que estos no son todos los atributos y parmetros que existen para esta etiqueta. Se pueden encontrar mas atributos y parmetros tanto en paginas oficiales, as como en otros manuales. Este ejemplo funciona en navegadores como Firefox pero on Explorer 6.0: <object data="t-rex.wav" type="sound/wav" autostart="false" width="200" height="40"> (Sonido de un Tiranosaurio enfadado) </object> (Sonido de un Tiranosaurio enfadado) (lack of faith - Star Wars) Este ejemplo no funciona en navegadores como Firefox pero si Explorer 6.0: <object classid="CLSID:05589FA1-C356-11CE-BF01-00AA0055595A" width="150" height="175" type="audio/mp3"> <param name="FileName" value="sounds/lack_of_faith.mp3"> <param name="autostart" value="false"> </object> La sintaxis general de la etiqueta object, para los archivos de video, es: <object atributo1="valor1" ....atributoN="valorN"> <param name="nombre" value="valor"> <param name="nombre" value="valor"> ... </object> Atributos relativos al video:

classid="identificador_objeto". Fija el identificador CLSID de los controles ActiveX necesarios. codebase="URL". Fija la URL del objeto o componente externo necesario para reproducir el fichero de video. type="tipo_fichero". Atributo importante, que declara el tipo de fichero de video que estamos usando. width="n". Determina el ancho visible de la consola de video, en pixels. height="n". Determina el alto visible de la consola de video, en pixels. align="top / bottom / center / baseline / left / right / texttop / middle / absmiddle / absbotom" . Anlogo al de la etiqueta IMG, define la alineacin horizontal o vertical de la consola respecto de los elementos de la pgina. hspace="hs". Establece la separacin horizontal, vspace="vs", que establece la separacin vertical, en pixels, entre la consola y los elementos de la pgina que la rodean. Anloga a sus equivalentes de la etiqueta IMG.

I.E.S. POLITCNICO R L.A

2011

autostart="true/false". Determina si el fichero de video debe empezar a reproducirse por s slo al cargarse la pgina o si por el contrario ser preciso la actuacin del usuario (o de cdigo de script) para que comience la reproduccin. standby="mensaje". Presenta en pantalla un mensaje al usuario mientras el fichero se carga. En cuanto a los elementos param, los ms importantes son: param name="filename" value="ruta_fichero". Establece la ruta del fichero de video, en forma relativa a la estructura de carpetas del sitio web o en forma de URL absoluta. param name="showcontrols" value="1/0" . Fija si se debe de ver (valor por defecto) o no la barra inferior de controles de la consola de video. Slo funciona bien en Internet Explorer. param name="showdisplay" value="1/0". Fija si se debe mostrar (valor por defecto) o no una banda inferior en la consola con informacin sobre el fichero de video (nombre, autor, copyright, etc.). Slo funciona bien en Internet Explorer. param name="showstatusbar" value="1/0". Fija si se debe mostrar (valor por defecto) o no una banda inferior en la consola con informacin temporal sobre la visualizacin del video y sobre el sonido del mismo. Slo funciona bien en Internet Explorer. param name="autosize" value="1/0" . Fija si el tamao de la consola se establece automticamente o no. Slo funciona bien en Internet Explorer. param name="autostart" value="true/false". Indica al navegador si se debe empezar a reproducir el video automticamente al cargar la pgina o si por el contrario ser preciso que el usuario pulse el botn Play para ello.

Ejemplo: <object width="99" height="98" classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" codebase="http://activex.microsoft.com/activex/ controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112" standby="Cargando fichero..." type="application/x-oleobject"> <param name="filename" value="ejemplos/heart_1.avi"> <param name="showcontrols" value="0"> <param name="showdisplay" value="0"> <param name="showstatusbar" value="0"> <param name="autosize" value="0"> <param name="autostart" value="1"> </object> Veamos como se inserta un objeto flash: (esto funciona solo en firefox y algunos navegadores, pero no en explorer) <center>

I.E.S. POLITCNICO R L.A

2011

Glosario . (punto): el signo del punto posee una gran importancia en Internet. Puesto que es utilizado direcciones de correo electrnico como www.pcweb.es @ (arroba): es un componente de las direcciones de correo electronico. Ejemplo [email protected]. copyright: derechos de autor. Es el derecho legal de un autor se obtiene por el por medio de un trabajo original. Es una metodo de proteccin garantizada por la ley.

I.E.S. POLITCNICO R L.A

2011

Agent (agente): en Internet un agente es un programa que realiza un servicio el cual puede ser recoger informacin o realizar de forma planificada una tarea . Aplicacin: programa informtico. Applet: una pequea aplicacin normalmente diseada en Java. Esta aplicacin o programita se ejecuta en el navegador del usuario. ASCII: (American Standard Code for Information Interchange -- Estndar Americano de Codificacin para el Intercambio de Informacin) Conjunto de normas de codificacin de caracteres mediante caracteres numricos, de amplia utilizacin en informtica y telecomunicaciones. ASP(Active Server page). Es un lenguaje de programacin del cual es Microsoft propietario. ASP suele ser usado para combinar HTML con bases de datos y generar pginas web dinamicas. Banner (anuncio): Son llamados banners a unas pequea imgenes o textos publicitarios , que aparecen en las paginas web. Cach: referente a internet, es la copia creada por el navegador de las pginas web visitadas. Puesto que, si el usuario vuelve a solicitarlas, son cargadazas desde el disco duro, cargando mucho ms rapidamente. Cgi-bin (cgi-bin): directorio de un servidor web, en el cual estan los programas CGI. bin es una contraccin de binario. Ciberespacio: Trmino creado por William Gibson en su novela fantstica "Neuromancer", del ao 1984 para describir el 'mundo' de los ordenadores y la sociedad creada en torno a ellos. Cibernauta: Persona que navega por la red. Click (pulsar): accin de pulsar sobre un botn cualquiera del raton, con el proposito de transmitir una orden al ordenador . Cdigo fuente: conjunto de instrucciones que forman un programa o subprograma informtico. Contador: en el contexto de las pginas web, un contador es una pequea aplicacin o programa que tiene como misin contar el nmero de visitas o de impactos que ha recibido un sito web. Cookie: se denominan cookies a pequeos datos que se almacena en el disco duro o en la memoria temporal del ordenador cuando un usuario accede a las pgianas web. Estas cookies pueden llegar a ser un peligro para la intimidad de los usuarios. CSS:"Cascade Style Sheet " Hojas de Estilos en Cascada. Son empleadas hoy en da en la maquetacin y diseo de sitios web, reemplazando muchas de las etiquetas HTML. Elemento en desuso (Deprecated): En la ultima revisin de la formulacin estndar del html se recomiendo no usar dichos elementos. Pueden seguir usndose, se recomienda que los programas los continen reconocindolos y procesndolos correctamente, por la compatibilidad con pginas antiguas pero en cualquier momento pueden ser declarados obsoletos y por tanto a partir de ah su uso se considerara incorrecto. Etiqueta (tag): instruccin mediante la cual podemos realizar pginas HTML. Un ejemplo es <b> que no permite poner en negrita las letras que estan englobadas por medio de esta etiqueta. Estas etiquetas son interpretadas por los navegadores a la hora de reproducir las pginas HTML.

I.E.S. POLITCNICO R L.A

2011

File Transfer (transferencia de ficheros): copia o envio de un fichero de un ordenador a otro por medio de una red de ordenadores. File Transfer Protocol -- FTP (Protocolo de Transferencia de Ficheros): este protocolo permite al usuario acceder y transferir desde un ordernador o red a otro. Frame (Marco): Instruccin del lenguaje HTML que permite de dividir una pgina web en varias zonas o marcos. Cada una de los frames o marcos puede tener un contenido independiente de las dems. Free Software (software libre): programas desarrollados y distribuidos segn la filosofa de dar al usuario la libertad de ejecutar, copiar, distribuir, estudiar, cambiar y mejorar dichos programa (Linux es un ejemplo de esta filosofa). El software libre no es siempre software gratuito (equivocacin bastante habitual que tiene su origen en que la palabra inglesa free significa tanto "libre" como "gratuito"). GUI (Interfaz Grfico de Usuario): componente de una aplicacin informtica que el usuario visualiza y a travs de la cual opera con ella. Est formada por ventanas, botones, mens e iconos, entre otros elementos. Hiperenlace : puntero o enlace existente en un documento hipertexto que apunta a (enlaza con) otro documento que puede ser o no otro documento hipertexto. Hipertexto: este concepto fue creado por el fsico norteamericano Vannevar Bush en 1945. En Internet el trmino se aplica a los enlaces existentes en las pginas escritas en HTML. Estos enlaces conducen a otras pginas que pueden ser a su vez pginas de hipertexto. Las pginas de hipertexto son mostradas a travs de navegadores. Hit (acceso): Trmino un poco confuso. Imaginemos un pagina web, la cual tiene un texto y cinco grficos. Por tanto el navegador para mostrar la pgina ha de realizar 6 lecturas del servidor web, 1 para la pgina y cinco para los grficos. Estadsticamente hay 6 impactos pero solo hay una impresin de la pagina el el monitor del usuario. Esto se calcula como accesos brutos y netos, respectivamente. Esto suele ser muy importante en el mundo publicitario. HTML: El HTML, acrnimo ingls de Hypertext Markup Language (lenguaje de formato de documentos de hipertexto), es un lenguaje de marcas diseado para estructurar textos y presentarlos en forma de hipertexto, que es el formato estndar de las pginas web.

HTML dinmico: extensiones del lenguaje HTML. HTTP: Abreviacin de "Hypertext Transfer Protocol" o, en espaol, "Protocolo de Transferencia de Hipertexto". Es el tipo de comunicacin utilizado entre un servidor y un navegador. Por este motivo, las direcciones de las pginas web comienzan por "http://...". URL: Es el Localizador Uniforme de Recursos, o dicho mas claramente, es la direccin que localiza una informacin dentro de Internet. Internet Access Provider -- IAP (Proveedor de Acceso a Internet)]. Link (enlace): apuntador de hipertexto que tiene como misin llevarnos de una informacin a otra, de una pagina a otra, o de un servidor a otro. Cuando navegamos por internet. Multimedia: informacin digitalizada que combina, texto, grficos, audio y video. Permitiendo en muchos caso la interacin con el usurario.

I.E.S. POLITCNICO R L.A

2011

Navegador: Un navegador web, hojeador o web browser es una aplicacin software que permite al usuario recuperar y visualizar documentos de hipertexto, comnmente descritos en HTML, desde servidores web de todo el mundo a travs de Internet. Obsoleto: Las etiquetas y atributos que han sidos declarados obsoletos no tienen garanta de que funcionen y no estn dentro del la especificacin del W3C. Obsolete elements and attributes have no guarantee of browsersupport and they are no longer defined in the W3C specification. Pgina inicial: la Primera pgina que se carga al entrar en un sitio web. Portal: Sitio web cuya misin es ofrecer al usuario, el acceso a unos recursos y servicios. Fcilmente e integrado en el mismo dominio. Revista electrnica, e-magazine. Revista publicada en Internet Script (guin): una rpida definicin de scrip puede ser unas lneas de cdigo de algn programa, entre ellos podemos destacar java script . Servidor: (host) Ordenador conectado a Internet capaz de prestar uno o ms servicios a otros ordenadores llamados "clientes". Ejemplos de servicios: conexin, cuenta de correo, sitio web, ftp, news, etc. Servidor web: Ordenador conectado a la red en cual proporciona una serie de servicios que puden ser portales o pginas web. Shareware: programas compartidos, son programs que se distribuyen en prueba con el objetivo de pagar al autor tras un periodo de prueba. URL (Localizador Uniforme de Recursos): Sistema unificado de identificacin de recursos en la red. Ejemplos de URL son :http://www.pcweb.es, ref.=imgenes/dibujo.jpg W3 : World Wide Web W3C :(Consorcio W3) Organizacin cuyo objetivo es el establecimiento de los estndares de realacionados con Internet. WAN- Wide Area Network (Red de rea Amplia): Red compuesta por ordenadores en una area relativamente extensa. WAP :"Wireless Application Protocol " Webmaster: administrador de Web, persona que dirige la gestin y mantenimiento de un sitio web. WIS: "Web Information Systems ". Sistemas de informacin de la red World Wide Web (WWW): (del ingls, Telaraa Mundial), la Web o WWW, es un sistema de hipertexto que funciona sobre Internet. Para ver la informacin se utiliza una aplicacin llamada navegador web para extraer elementos de informacin (llamados "documentos" o "pginas web") de los servidores web (o "sitios") y mostrarlos en la pantalla del usuario. WUI: "Web User Interface ". Interface de usario de la web WYSIWYG :"What You See is What You Get ". Lo que tu ves es lo que consigues

También podría gustarte

Evaluación Semana 4 Planificar y Controlar Con MSPROJECT
90% (10)
Evaluación Semana 4 Planificar y Controlar Con MSPROJECT
7 páginas
Manual Pagos UNI
Aún no hay calificaciones
Manual Pagos UNI
13 páginas
Ejercicios de Redes
Aún no hay calificaciones
Ejercicios de Redes
2 páginas
Guia de Laboratorio Nro 02
Aún no hay calificaciones
Guia de Laboratorio Nro 02
13 páginas
Senati PLC Basico
100% (2)
Senati PLC Basico
169 páginas
Estándares Web W3C
Aún no hay calificaciones
Estándares Web W3C
8 páginas
Arquitectura de DB
100% (1)
Arquitectura de DB
31 páginas
Fundamentos Del Hardware Libre
Aún no hay calificaciones
Fundamentos Del Hardware Libre
3 páginas
Fundamentos Del Software Libre
100% (1)
Fundamentos Del Software Libre
10 páginas
Administracion de Redes
Aún no hay calificaciones
Administracion de Redes
31 páginas
Fundamentos Del Hardware Libre Formación Crítica
Aún no hay calificaciones
Fundamentos Del Hardware Libre Formación Crítica
3 páginas
Resumen Arquitectura de Computadores
Aún no hay calificaciones
Resumen Arquitectura de Computadores
5 páginas
Modelos de Comunicación
Aún no hay calificaciones
Modelos de Comunicación
10 páginas
Ejemplos Mapa Navegacion PDF
Aún no hay calificaciones
Ejemplos Mapa Navegacion PDF
5 páginas
Tipos de Redes
Aún no hay calificaciones
Tipos de Redes
22 páginas
Grupo #6 - Preguntas-Diseño de Aplicaciones Multimedia
Aún no hay calificaciones
Grupo #6 - Preguntas-Diseño de Aplicaciones Multimedia
13 páginas
Inf de Software
Aún no hay calificaciones
Inf de Software
28 páginas
Proyecto Socio-Tecnologico (Fase 2)
Aún no hay calificaciones
Proyecto Socio-Tecnologico (Fase 2)
5 páginas
Trabajo Industria Nacional Del Hardware
Aún no hay calificaciones
Trabajo Industria Nacional Del Hardware
16 páginas
Herramientas de Diseño de Interfaz
Aún no hay calificaciones
Herramientas de Diseño de Interfaz
2 páginas
2221 Programación Modular
Aún no hay calificaciones
2221 Programación Modular
8 páginas
Diseño Web (Electiva I) Corregida
100% (2)
Diseño Web (Electiva I) Corregida
5 páginas
Tema Vi
Aún no hay calificaciones
Tema Vi
4 páginas
Ecuaciones Diferenciales II (Tema 1: Características, Problemas Clásicos)
100% (1)
Ecuaciones Diferenciales II (Tema 1: Características, Problemas Clásicos)
14 páginas
Luca Powell PDF
Aún no hay calificaciones
Luca Powell PDF
5 páginas
Programacion
Aún no hay calificaciones
Programacion
31 páginas
Evolucion de Las Aplicaciones Web (Ensayo)
Aún no hay calificaciones
Evolucion de Las Aplicaciones Web (Ensayo)
6 páginas
Cuestonario Arquitectura de Un Ordenador
Aún no hay calificaciones
Cuestonario Arquitectura de Un Ordenador
13 páginas
Metodologia de Desarrollo
100% (1)
Metodologia de Desarrollo
33 páginas
Red de Área Metropolitana
Aún no hay calificaciones
Red de Área Metropolitana
2 páginas
U3. Ensamblaje
Aún no hay calificaciones
U3. Ensamblaje
9 páginas
Redes Módulo 1 - Redes de Computadoras - 2017
100% (2)
Redes Módulo 1 - Redes de Computadoras - 2017
21 páginas
El Mundo de Las Bases de Datos y Los Sistemas Manejadores de Base de Datos
Aún no hay calificaciones
El Mundo de Las Bases de Datos y Los Sistemas Manejadores de Base de Datos
13 páginas
Windows 7
100% (3)
Windows 7
23 páginas
Conexiones Android Con Base de Datos
Aún no hay calificaciones
Conexiones Android Con Base de Datos
24 páginas
Fundamentos Del Hardware Libre Linda)
100% (1)
Fundamentos Del Hardware Libre Linda)
15 páginas
Estándares en El Código de Programación
Aún no hay calificaciones
Estándares en El Código de Programación
5 páginas
Software Privativo o Comercial
Aún no hay calificaciones
Software Privativo o Comercial
8 páginas
Almacenamiento Físico de Bases de Datos
Aún no hay calificaciones
Almacenamiento Físico de Bases de Datos
6 páginas
Estructura Del Proyecto Desarrollo de Software
Aún no hay calificaciones
Estructura Del Proyecto Desarrollo de Software
1 página
Alcance Estructura Del Proyecto Sociotecnológico Ii
Aún no hay calificaciones
Alcance Estructura Del Proyecto Sociotecnológico Ii
3 páginas
Unidad 1 Introducción A La POO
Aún no hay calificaciones
Unidad 1 Introducción A La POO
23 páginas
Herramientas de Programacion
Aún no hay calificaciones
Herramientas de Programacion
151 páginas
Unidad 3 Proceso de Desarrollo de Software Miguel Mariño Sección B
Aún no hay calificaciones
Unidad 3 Proceso de Desarrollo de Software Miguel Mariño Sección B
24 páginas
Principios Básicos de Enrutamiento y Subredes
50% (2)
Principios Básicos de Enrutamiento y Subredes
10 páginas
Fundamentos de La Ingeniería Del Software
Aún no hay calificaciones
Fundamentos de La Ingeniería Del Software
16 páginas
ManualInstalaciónSII 11mayo2015
Aún no hay calificaciones
ManualInstalaciónSII 11mayo2015
54 páginas
Selectores en CSS
Aún no hay calificaciones
Selectores en CSS
10 páginas
Manual Cisco Pcs
Aún no hay calificaciones
Manual Cisco Pcs
32 páginas
Practica 7, Interfaz Grafica
Aún no hay calificaciones
Practica 7, Interfaz Grafica
20 páginas
Mercadeo Social en Venezuela
Aún no hay calificaciones
Mercadeo Social en Venezuela
14 páginas
Arquitectura Avanzada
Aún no hay calificaciones
Arquitectura Avanzada
2 páginas
Teclas Especiales y Sus Combinaciones
Aún no hay calificaciones
Teclas Especiales y Sus Combinaciones
3 páginas
Importancia de Java
Aún no hay calificaciones
Importancia de Java
6 páginas
Clasificacion de Las Redes Por Su Tecnología de Transmisión.
20% (5)
Clasificacion de Las Redes Por Su Tecnología de Transmisión.
4 páginas
Hub o Concentrador
Aún no hay calificaciones
Hub o Concentrador
3 páginas
Medesipu Propuesta Rev 2011 Fase Inicio
Aún no hay calificaciones
Medesipu Propuesta Rev 2011 Fase Inicio
30 páginas
Introducción A La Programación en PHP
Aún no hay calificaciones
Introducción A La Programación en PHP
25 páginas
Tutorial HTML 5
Aún no hay calificaciones
Tutorial HTML 5
3 páginas
Proyecto de Grado - Sistema Web
Aún no hay calificaciones
Proyecto de Grado - Sistema Web
44 páginas
Bienvenido a tu manual de HTML online
Aún no hay calificaciones
Bienvenido a tu manual de HTML online
85 páginas
Introducción Al HTML
Aún no hay calificaciones
Introducción Al HTML
8 páginas
Diferencia Entre Url y HTML
Aún no hay calificaciones
Diferencia Entre Url y HTML
3 páginas
Planificacion Curricular SFT 2022 - 7R
Aún no hay calificaciones
Planificacion Curricular SFT 2022 - 7R
37 páginas
PG Riesgo
Aún no hay calificaciones
PG Riesgo
37 páginas
Ficha Diagnostico Toe 2022
100% (1)
Ficha Diagnostico Toe 2022
2 páginas
Ept-Instructivo para La Creación de Páginas Web
Aún no hay calificaciones
Ept-Instructivo para La Creación de Páginas Web
18 páginas
V EXPERIENCIA DE APRENDIZAJE EPT 1° y 2°grado
Aún no hay calificaciones
V EXPERIENCIA DE APRENDIZAJE EPT 1° y 2°grado
5 páginas
I EXPERIENCIA DE APRENDIZAJE - ACT 1 - 1° y 2° GRADO
100% (6)
I EXPERIENCIA DE APRENDIZAJE - ACT 1 - 1° y 2° GRADO
6 páginas
Designthinking2 Oficial
Aún no hay calificaciones
Designthinking2 Oficial
28 páginas
Competencias Transversales
Aún no hay calificaciones
Competencias Transversales
13 páginas
Ept 2020 - 12
Aún no hay calificaciones
Ept 2020 - 12
40 páginas
Cómo Trabajar Con Directorios en Ruby - RubyGuides
Aún no hay calificaciones
Cómo Trabajar Con Directorios en Ruby - RubyGuides
17 páginas
Manual para Google Formularios
Aún no hay calificaciones
Manual para Google Formularios
10 páginas
Act Central U1
Aún no hay calificaciones
Act Central U1
6 páginas
Detalle Basurero PDF
Aún no hay calificaciones
Detalle Basurero PDF
1 página
MEGA CABLE NUEVO
Aún no hay calificaciones
MEGA CABLE NUEVO
1 página
Tarea III-WORD, Infotecnologia
100% (1)
Tarea III-WORD, Infotecnologia
8 páginas
Instrumentación de La Celda de Carga
Aún no hay calificaciones
Instrumentación de La Celda de Carga
10 páginas
Mbot2 Robótica, IA y Programación en Scratch y Python - Robots para Niños
Aún no hay calificaciones
Mbot2 Robótica, IA y Programación en Scratch y Python - Robots para Niños
19 páginas
AA1 Ev1 Desarrollo Del Cuestionario Infraestructura Tecnologica de La Organizacion
100% (1)
AA1 Ev1 Desarrollo Del Cuestionario Infraestructura Tecnologica de La Organizacion
13 páginas
Constant Es
Aún no hay calificaciones
Constant Es
12 páginas
Carta de Compromiso
Aún no hay calificaciones
Carta de Compromiso
1 página
Ferretería
Aún no hay calificaciones
Ferretería
1 página
Borrador de Curso de Tesis
Aún no hay calificaciones
Borrador de Curso de Tesis
20 páginas
Programa Data Analytics Desafio Latam
Aún no hay calificaciones
Programa Data Analytics Desafio Latam
10 páginas
Triptico Monografia
100% (1)
Triptico Monografia
2 páginas
Mapa Conceptual - Software y Servicios de Internet.
Aún no hay calificaciones
Mapa Conceptual - Software y Servicios de Internet.
1 página
Practica 2
100% (1)
Practica 2
3 páginas
Mi Ensayo de Vacaciones
100% (1)
Mi Ensayo de Vacaciones
7 páginas
Practica de Laboratorio Basico Oddo
Aún no hay calificaciones
Practica de Laboratorio Basico Oddo
12 páginas
Los Servicios de Conexia
Aún no hay calificaciones
Los Servicios de Conexia
4 páginas
Interruptores Schneider Electric PDF
Aún no hay calificaciones
Interruptores Schneider Electric PDF
68 páginas
Desensamble y Ensamble de Impresoreas
Aún no hay calificaciones
Desensamble y Ensamble de Impresoreas
9 páginas
Cuestionario - Métodos Numéricos
100% (1)
Cuestionario - Métodos Numéricos
6 páginas
Teoria de Vareacion de Parametro: Introducción
Aún no hay calificaciones
Teoria de Vareacion de Parametro: Introducción
5 páginas
Temporizadores en SCL
Aún no hay calificaciones
Temporizadores en SCL
3 páginas
Tesis 58469
Aún no hay calificaciones
Tesis 58469
94 páginas
Ejercicios Programas Backup Final
Aún no hay calificaciones
Ejercicios Programas Backup Final
43 páginas