• Save
Curso de HTML
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Curso de HTML

  • 645 views
Uploaded on

Curso de HTML básico para diseño de páginas Web. Este curso es un complemento al curso de Dreamweaver

Curso de HTML básico para diseño de páginas Web. Este curso es un complemento al curso de Dreamweaver

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
645
On Slideshare
645
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez Guisadofrancisco@humantica.comfrancisco@humantica.comwww.humantica.comwww.humantica.comCurso deCurso delenguaje HTMLlenguaje HTMLFebreroFebrerode 2013de 2013
  • 2. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 22CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTMLCurso de lenguajeCurso de lenguaje HTMLHTML::1.1. IntroducciónIntroducción2.2. Elementos de una página WebElementos de una página Web3.3. Estructura de un documento htmlEstructura de un documento html4.4. Estilos y efectos básicosEstilos y efectos básicos5.5. Definición de bloquesDefinición de bloques6.6. Marcado tipográfico de frases.Marcado tipográfico de frases.Para saber más: http://www.aulaclic.es/html7.7. ListasListas8.8. EnlacesEnlaces9.9. GráficosGráficos10.10.Mapas sensitivosMapas sensitivos11.11.TablasTablas12.12.Sonido de fondoSonido de fondo13.13.MarcosMarcos14.14.FormulariosFormularios
  • 3. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 33CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.1. Introducción4.1. Introducción• HTMLHTML ((HHyperyperTTextext MMarkuparkup LLanguage / Lenguaje deanguage / Lenguaje deMarcación de Hipertexto) es un lenguaje muy sencillo queMarcación de Hipertexto) es un lenguaje muy sencillo quepermite describir hipertexto, es decir, texto presentado depermite describir hipertexto, es decir, texto presentado deforma estructurada y agradable, con enlaces (forma estructurada y agradable, con enlaces (hyperlinkshyperlinks))que conducen a otros documentos o fuentes de informaciónque conducen a otros documentos o fuentes de informaciónrelacionadas, y con inserciones multimedia (gráficos,relacionadas, y con inserciones multimedia (gráficos,sonido...). Este lenguaje es el que se utiliza para presentarsonido...). Este lenguaje es el que se utiliza para presentarinformación en elinformación en el World Wide WebWorld Wide Web..• La descripción se basa en especificar en el texto laLa descripción se basa en especificar en el texto laestructura lógica del contenido (títulos, párrafos de textoestructura lógica del contenido (títulos, párrafos de textonormal, enumeraciones, definiciones, citas, etc.), así comonormal, enumeraciones, definiciones, citas, etc.), así comolos diferentes efectos que se quieren dar (cursiva, negrita, olos diferentes efectos que se quieren dar (cursiva, negrita, oun gráfico determinado) y dejar que luego la presentaciónun gráfico determinado) y dejar que luego la presentaciónfinal de dicho hipertexto se realice por un programafinal de dicho hipertexto se realice por un programaespecializado (como Explorer, Firefox, Mosaic o Netscape).especializado (como Explorer, Firefox, Mosaic o Netscape).
  • 4. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 44CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.1. Introducción4.1. Introducción• Siglas básicas.-Siglas básicas.-– WWWWWW:: WWorldorld WWideide WWeb (Web).eb (Web).– SGMLSGML (1986):(1986): SStandardtandard GGeneralizedeneralized MMarkuparkup LLanguage: es unanguage: es unlenguaje estándar para describir lenguajes de marcas.lenguaje estándar para describir lenguajes de marcas.– DTDDTD:: DDocumentocument TTypeype DDefinition: es un lenguaje markupefinition: es un lenguaje markupespecífico, escrito utilizando SGML.específico, escrito utilizando SGML.– HTMLHTML (definido por Tim Berners-Lee en 1990):(definido por Tim Berners-Lee en 1990): HHyperyperTTextextMMarkuparkup LLanguage: HTML es un SGML DTD. En términosanguage: HTML es un SGML DTD. En términosprácticos, es una colección de estilos (indicados porprácticos, es una colección de estilos (indicados por tagstags,,marcas de markup) que definen los componentes variados demarcas de markup) que definen los componentes variados deun documento World Wide Web.un documento World Wide Web.– HTML 1.0HTML 1.0: disponible en 1993.: disponible en 1993.– HTML 2.0HTML 2.0 (formularios: disponible en 1995).(formularios: disponible en 1995).– HTML 3.0HTML 3.0: disponible en 1996.: disponible en 1996.– HTML 4.01HTML 4.01: La versión actual.: La versión actual.
  • 5. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 55CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.1. Introducción4.1. IntroducciónCreación de documentos HTML.- Para comenzar sólo sonCreación de documentos HTML.- Para comenzar sólo sonnecesarios dos programas:necesarios dos programas:1.1.Un procesador de textoUn procesador de texto: los documentos HTML están en: los documentos HTML están enformato de texto sencillo (también conocido como ASCII). Elformato de texto sencillo (también conocido como ASCII). Elprocesador de texto se utiliza para escribir el documento enprocesador de texto se utiliza para escribir el documento enlenguaje HTML, que será posteriormente interpretado por ellenguaje HTML, que será posteriormente interpretado por elprograma navegador correspondiente, siempre que elprograma navegador correspondiente, siempre que eldocumento esté guardado en formato: "sólo texto".documento esté guardado en formato: "sólo texto".2.2.Un navegador del WWWUn navegador del WWW o lo que se denomina programao lo que se denomina programacliente que permite el acceso a páginas WWW de Internet.cliente que permite el acceso a páginas WWW de Internet.De este modo, se pueden comprobar las modificaciones deDe este modo, se pueden comprobar las modificaciones delas distintas páginas que se diseñan.las distintas páginas que se diseñan.
  • 6. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 66CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.1. Introducción4.1. IntroducciónLas etiquetas del lenguaje HTMLLas etiquetas del lenguaje HTML.- El lenguaje.- El lenguajeHTML usa etiquetas o directivas (HTML usa etiquetas o directivas (tagstags) para) paraindicarle al programa cliente de Web comoindicarle al programa cliente de Web comomostrar el texto.mostrar el texto.Las etiquetas están formadas por determinadosLas etiquetas están formadas por determinadoscaracteres metidos entre los signoscaracteres metidos entre los signos <><>, y con la, y con labarrabarra </></> cuando se trata de la segundacuando se trata de la segundaetiqueta de un efecto (la de cierre). Por ejemplo:etiqueta de un efecto (la de cierre). Por ejemplo:<title><title> para abrir ypara abrir y </title></title> para cerrar.para cerrar.
  • 7. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 77CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.1. Introducción4.1. Introducción• El esquema de direccionamiento de objetos:El esquema de direccionamiento de objetos:– Se usa una cadena de caracteres denominadaSe usa una cadena de caracteres denominada URLURL ((UUniversalniversalRResourceesource LLocator)ocator)• Formato de una URL:Formato de una URL:http://www.google.com:80/intl/es/about.htmlhttp://www.google.com:80/intl/es/about.htmlhttp://<servidor>[:puerto]/<directorio>/[página[#marca]]http://<servidor>[:puerto]/<directorio>/[página[#marca]]Posición de entrada al documentoFichero/objeto con la información pedidaDirectorio del servidor donde está la información solicitadaNúmero de puerto: 80, 8080…Nombre de una máqiona o dirección IPServicio (protocolo): http, ftp, gopher…
  • 8. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 88CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.1. Introducción4.1. Introducción• Páginas estáticas y dinámicas:Páginas estáticas y dinámicas:– Una página esUna página es estáticaestática cuando no sufrecuando no sufremodificaciones durante el proceso demodificaciones durante el proceso deuna transacción. Ésta existe completauna transacción. Ésta existe completaen el disco del servidor.en el disco del servidor.– Una página esUna página es dinámicadinámica cuando ésta nocuando ésta nose completa hasta que no se recibe lase completa hasta que no se recibe lapetición por parte del cliente. Se crea apetición por parte del cliente. Se crea amedida que se solicita por el cliente.medida que se solicita por el cliente.
  • 9. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 99CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.2. Elementos de una página Web4.2. Elementos de una página WebSi para elaborar una página de un diario en papel seSi para elaborar una página de un diario en papel serequieren textos, columnas, fotografías, etc., pararequieren textos, columnas, fotografías, etc., paralala confección de una página Webconfección de una página Web se podránse podránnecesitarnecesitar::1.1. Elementos textualesElementos textuales2.2. Elementos gráficos y multimediaElementos gráficos y multimedia3.3. Recursos visualesRecursos visuales4.4. Servicios añadidosServicios añadidos5.5. Publicidad y servicios comercialesPublicidad y servicios comerciales ..
  • 10. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 1010CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.2. Elementos de una página Web4.2. Elementos de una página Web1.1. Elementos textualesElementos textuales .- Los encabezados.- Los encabezadossuelen ser más simples en las edicionessuelen ser más simples en las edicionesdigitales y lo normal es un titular sin antetítulodigitales y lo normal es un titular sin antetítuloni subtítulo. El cuerpo a utilizar no debeni subtítulo. El cuerpo a utilizar no debesuperar los 12 o 14 puntos. Pueden irsuperar los 12 o 14 puntos. Pueden irsubrayados y en azul, verde o rojo. Los textossubrayados y en azul, verde o rojo. Los textosse presentan a una columna, con un cuerpose presentan a una columna, con un cuerpoentre 10 y 12 puntos, alineados a la izquierdaentre 10 y 12 puntos, alineados a la izquierday, a veces, acompañados de alguna fotografía.y, a veces, acompañados de alguna fotografía.
  • 11. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 1111CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.2. Elementos de una página Web4.2. Elementos de una página Web2.2. Elementos gráficos y multimediaElementos gráficos y multimedia .-.- Fotografías,Fotografías,dibujos, gráficos ocupan poco espacio y se muestran endibujos, gráficos ocupan poco espacio y se muestran enpoco tiempo si se utiliza un formato de baja resoluciónpoco tiempo si se utiliza un formato de baja resolucióncomo elcomo el GIFGIF (Graphics Interchage Format — Formato(Graphics Interchage Format — Formatode intercambio gráfico) o un formato que comprima elde intercambio gráfico) o un formato que comprima elpeso de la imagen como elpeso de la imagen como el JPGJPG (Joint Photographic(Joint PhotographicExperts Group — Grupo de expertos fotográficos). ParaExperts Group — Grupo de expertos fotográficos). Parala utilización de recursos multimedia es convenientela utilización de recursos multimedia es convenienteacudir aacudir a Real MediaReal Media (Real Audio y Real Video), a(Real Audio y Real Video), aWindows Media PlayerWindows Media Player o ao a QuickTime PlayerQuickTime Player ooItunesItunes (Mac) que soportan el formato de sonido(Mac) que soportan el formato de sonido MP3MP3..
  • 12. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 1212CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.2. Elementos de una página Web4.2. Elementos de una página Web3.3. Recursos visualesRecursos visuales .- Los más característicos.- Los más característicosson losson los linkslinks oo enlacesenlaces que permiten ampliarque permiten ampliarel contenido sobre un tema gracias alel contenido sobre un tema gracias alhipertextohipertexto. Pueden ser internos, se utilizan. Pueden ser internos, se utilizanen los titulares de portada, en los índices y enen los titulares de portada, en los índices y enlos sumarios, y externos que permitenlos sumarios, y externos que permitenhiperenlaces con cualquier servidor del mundo.hiperenlaces con cualquier servidor del mundo.Otros recursos son losOtros recursos son los framesframes oo marcosmarcos, las, lastablastablas, los, los mapasmapas,, fondosfondos, etc., etc.
  • 13. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 1313CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.2. Elementos de una página Web4.2. Elementos de una página Web4.4. Servicios añadidosServicios añadidos .- Son.- Sonvalores que incorporanvalores que incorporaninformaciones complementarias,informaciones complementarias,formas útiles de acceso a laformas útiles de acceso a lainformación, servicios deinformación, servicios decomunicación con el lector, juegos ycomunicación con el lector, juegos ypasatiempos.pasatiempos.
  • 14. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 1414CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.2. Elementos de una página Web4.2. Elementos de una página Web5.5. Publicidad y servicios comercialesPublicidad y servicios comerciales .- Los.- Losdiarios digitales son gratuitos. La publicidad sudiarios digitales son gratuitos. La publicidad suprincipal fuente de ingresos. De momento noprincipal fuente de ingresos. De momento noson rentables y algunos medios se planteanson rentables y algunos medios se planteancobrar por el servicio al consumidor, como loscobrar por el servicio al consumidor, como losperiódicos impresos de papel. La forma deperiódicos impresos de papel. La forma deanunciarse en un periódico digital es medianteanunciarse en un periódico digital es medianteelel bannerbanner (bandera) y su coste varía según el(bandera) y su coste varía según elnúmero de visitas que recibe la página en lanúmero de visitas que recibe la página en laque va insertado.que va insertado.
  • 15. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 1515CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.3. Estructura de un documento html4.3. Estructura de un documento htmlUn documento HTML comienza con la etiquetaUn documento HTML comienza con la etiqueta <html><html> , y termina con, y termina con </html>.</html>.Dentro del documento hay dos zonas bien diferenciadas: el encabezamiento,Dentro del documento hay dos zonas bien diferenciadas: el encabezamiento,delimitado pordelimitado por <HEAD><HEAD> yy</HEAD</HEAD>, que sirve para definir diversos valores>, que sirve para definir diversos valoresválidos en todo el documento.válidos en todo el documento.Y el cuerpo, delimitado porY el cuerpo, delimitado por <BODY><BODY> yy </BODY></BODY>, donde reside la información, donde reside la informacióndel documento.del documento.<HTML>Encabezado <HEAD><TITLE>Mi primera página Web</TITLE></HEAD><BODY>Cuerpo Este es el texto que aparece en mi página Web</BODY></HTML>
  • 16. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 1616CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.3. Estructura de un documento html4.3. Estructura de un documento htmlEl elementoEl elemento <TITLE><TITLE> permite especificar el título de unpermite especificar el título de undocumento HTML. Este título no forma parte deldocumento HTML. Este título no forma parte deldocumento en sí: no aparece, por ejemplo, al principiodocumento en sí: no aparece, por ejemplo, al principiodel documento sino que sirve como título de la ventanadel documento sino que sirve como título de la ventanadel programa que la muestra.del programa que la muestra.Existen muchos otros elementos que se engloban dentroExisten muchos otros elementos que se engloban dentrodel encabezamiento pero para la estructura básica deldel encabezamiento pero para la estructura básica dellenguaje html en su nivel básico no son necesarios.lenguaje html en su nivel básico no son necesarios.El cuerpo de un documento HTML contiene el texto que,El cuerpo de un documento HTML contiene el texto que,con la presentación y los efectos que se decidan, secon la presentación y los efectos que se decidan, sepresentará ante el usuario. Dentro del cuerpo sonpresentará ante el usuario. Dentro del cuerpo sonaplicables todos los efectos que se van a mencionar enaplicables todos los efectos que se van a mencionar enel resto de esta guía. Dichos efectos se especificanel resto de esta guía. Dichos efectos se especificanexclusivamente a través de "directivas".exclusivamente a través de "directivas".
  • 17. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 1717CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.3. Estructura de un documento html4.3. Estructura de un documento html• ComentariosComentarios.- Para incluir un comentario en un.- Para incluir un comentario en undocumento HTML, es decir, una aclaración que nodocumento HTML, es decir, una aclaración que noaparece en la presentación final del documento, seaparece en la presentación final del documento, seencierra el texto que formará el comentario entre losencierra el texto que formará el comentario entre lossímbolossímbolos <!-<!- comentariocomentario ->->..Por ejemplo:Por ejemplo:<!–<!– Este comentario no se visualizará en el navegadorEste comentario no se visualizará en el navegador ->->
  • 18. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 1818CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.4. Estilos y efectos básicos4.4. Estilos y efectos básicosTodas las etiquetas que siguen a continuación se introducen aTodas las etiquetas que siguen a continuación se introducen apartir del tagpartir del tag <BODY>,<BODY>, es decir, dentro del cuerpo deles decir, dentro del cuerpo deldocumento.documento.• Títulos.-Títulos.-Mediante los títulos, en sus diferentes niveles de importancia, seMediante los títulos, en sus diferentes niveles de importancia, sepuede definir el esqueleto del documento, su estructura básica.puede definir el esqueleto del documento, su estructura básica.HTML tieneHTML tiene seisseis niveles de cabeceras numeradas del uno alniveles de cabeceras numeradas del uno alseis.seis.<H1><H1>Mucha importanciaMucha importancia</H1></H1> Mucha importanciaMucha importancia<H2><H2>Menos importanciaMenos importancia</H2></H2> Menos importanciaMenos importancia<H3><H3>Mucha menos importanciaMucha menos importancia</H3></H3> Mucha menos importanciaMucha menos importancia
  • 19. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 1919CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.4. Estilos y efectos básicos4.4. Estilos y efectos básicos• Color de fondo del documento:Color de fondo del documento:– <BODY BGCOLOR=“#rrggbb”><BODY BGCOLOR=“#rrggbb”>• Color del texto:Color del texto:– <BODY TEXT=“#rrggbb”><BODY TEXT=“#rrggbb”>• Imágenes de fondo del documento:Imágenes de fondo del documento:– <BODY BACKGROUND=“nombre_fichero_grafico”><BODY BACKGROUND=“nombre_fichero_grafico”>
  • 20. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 2020CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.5. Definición de bloques4.5. Definición de bloquesHay que tener en cuenta, como ya se ha dicho antes, que al presentarHay que tener en cuenta, como ya se ha dicho antes, que al presentarel documento se hace caso omiso de los espacios, tabulaciones yel documento se hace caso omiso de los espacios, tabulaciones yretornos de carro que se encuentren en el texto fuente. Por estaretornos de carro que se encuentren en el texto fuente. Por estarazón se utilizan una serie de etiquetas que sustituyen a estosrazón se utilizan una serie de etiquetas que sustituyen a estoselementos:elementos:<P><P> yy <BR><BR>Cuando se quiera forzar un final de línea es necesario utilizar dosCuando se quiera forzar un final de línea es necesario utilizar dosdirectivas especiales:directivas especiales:<P><P> para marcar un fin de párrafopara marcar un fin de párrafo<BR><BR> para un único retorno de carropara un único retorno de carroLa diferencia entre ambas es que la separación de líneas que provocaLa diferencia entre ambas es que la separación de líneas que provoca<P><P> es algo mayor que la dees algo mayor que la de <BR><BR>, para que los párrafos se, para que los párrafos sedistingan bien entre sí. Las dos directivas mencionadas se sitúan endistingan bien entre sí. Las dos directivas mencionadas se sitúan enel punto en que se quiere poner la separación.el punto en que se quiere poner la separación.
  • 21. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 2121CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.5. Definición de bloques4.5. Definición de bloques<HTML><HTML><HEAD><HEAD><TITLE><TITLE>El ejemplo HTML mas sencilloEl ejemplo HTML mas sencillo</TITLE></TITLE></HEAD></HEAD><BODY><BODY><H1><H1>Esta es una cabecera de nivel unoEsta es una cabecera de nivel uno</H1></H1>Bienvenido al mundo HTML.Bienvenido al mundo HTML.Este es el primer párrafo.Este es el primer párrafo.<P><P>Y este es el segundo.Y este es el segundo.<BR><BR>Fin de la paginaFin de la pagina</BODY></BODY></HTML></HTML>Ninguna de las dosNinguna de las dosdirectivasdirectivasanteriores seanteriores secierra, sólocierra, sóloconstan de unaconstan de unamarca inicial. Pormarca inicial. Porejemplo, veamosejemplo, veamosesteeste documentodocumentomínimo de HTMLmínimo de HTML::Esta es una cabecera de nivel unoBienvenido al mundo HTML. Este es el primer párrafo.Y este es el segundo.Fin de la pagina
  • 22. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 2222CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.5. Definición de bloques4.5. Definición de bloques<PRE><PRE>ElEl texto preformateadotexto preformateado (etiqueta(etiqueta <pre><pre>) se aplica cuando se quiere que en) se aplica cuando se quiere que enla presentación final del documento se respeten los espacios y retornosla presentación final del documento se respeten los espacios y retornosde carro que hayamos puesto en el texto fuente. Además, se utilizará unde carro que hayamos puesto en el texto fuente. Además, se utilizará untipo de letra de espaciado fijo, parecido al de una máquina de escribir,tipo de letra de espaciado fijo, parecido al de una máquina de escribir,más pequeño que el del texto normal. Este estilo de texto puede sermás pequeño que el del texto normal. Este estilo de texto puede seradecuado, por ejemplo, para una tabla numérica sencilla.adecuado, por ejemplo, para una tabla numérica sencilla.<P align=“tipo”>…</P><P align=“tipo”>…</P>Alineación: donde “tipo” puede tener los valores: left (por defecto), center oAlineación: donde “tipo” puede tener los valores: left (por defecto), center oright.right.<CENTER>…</CENTER><CENTER>…</CENTER>Centrado de elementosCentrado de elementos<BLINK>…</BLINK><BLINK>…</BLINK>Parpadeo del textoParpadeo del texto
  • 23. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 2323CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.5. Definición de bloques4.5. Definición de bloques<DD><DD>TabuladorTabulador<DT><DT>Renglón con salto de líneaRenglón con salto de línea<DIR>…</DIR><DIR>…</DIR>Sangría en un párrafoSangría en un párrafo<HR size=n width=n align=alineacion><HR size=n width=n align=alineacion>La directivaLa directiva <HR><HR> sitúa en el documento una línea horizontal desitúa en el documento una línea horizontal deseparación. Este elemento utiliza una serie de tamaños que se indicanseparación. Este elemento utiliza una serie de tamaños que se indicanmediante la opciónmediante la opción <HR SIZE=1><HR SIZE=1>,, <HR SIZE=2><HR SIZE=2>,, <HR SIZE=3><HR SIZE=3> etc.etc.Existen seis tamaños de HR.Existen seis tamaños de HR.
  • 24. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 2424CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.6. Marcado tipográfico de frases4.6. Marcado tipográfico de frases1.Negrita, cursiva (itálica) y subrayado1.Negrita, cursiva (itálica) y subrayadoSe pueden dar también los atributos más tradicionales, negrita y cursiva:Se pueden dar también los atributos más tradicionales, negrita y cursiva:<B>Esto en negrita</B>, <I>esto en cursiva</I> y <U>esto subrayado</U><B>Esto en negrita</B>, <I>esto en cursiva</I> y <U>esto subrayado</U>Esto en negrita,Esto en negrita, esto en cursivaesto en cursiva yy esto subrayadoesto subrayado2.<TT>…</TT>2.<TT>…</TT>Se puede utilizar un tipo de letra similar al de una máquina de escribir:Se puede utilizar un tipo de letra similar al de una máquina de escribir:<TT>Máquina de escribir</TT><TT>Máquina de escribir</TT>Máquina de escribirMáquina de escribir3. <CENTER>…</CENTER>3. <CENTER>…</CENTER>Para centrar texto (o, en general, cualquier cosa: un gráfico, por ejemplo) se usaPara centrar texto (o, en general, cualquier cosa: un gráfico, por ejemplo) se usala directiva <CENTER>:la directiva <CENTER>:<CENTER>Universidad de Madrid</CENTER><CENTER>Universidad de Madrid</CENTER>Universidad de MadridUniversidad de Madrid
  • 25. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 2525CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.6. Marcado tipográfico de frases4.6. Marcado tipográfico de frases4.4. <S>…</S><S>…</S> Tachado (strike)Tachado (strike)5.5. < SUP >....</ SUP >< SUP >....</ SUP > SuperíndiceSuperíndice6.6. < SUB >....</ SUB >< SUB >....</ SUB > SubíndiceSubíndice7.7. < FONT >......</FONT>< FONT >......</FONT> Tipo de Fuente:Tipo de Fuente:<FONT<FONT FACE="NombreFuente“ (cambia el tipo de fuente si existe en el PC)FACE="NombreFuente“ (cambia el tipo de fuente si existe en el PC)SIZE="tamaño“ (número de píxels)SIZE="tamaño“ (número de píxels)"+n“ ó "-n“ (aumenta o disminuye la fuente en “n” pixels)"+n“ ó "-n“ (aumenta o disminuye la fuente en “n” pixels)COLOR="CodigoColor“ (solo a partir de IE 4.0)COLOR="CodigoColor“ (solo a partir de IE 4.0)=“#rrggbb“ > (formato RGB)=“#rrggbb“ > (formato RGB)</FONT></FONT>Formato RGB:Formato RGB:000000=negro000000=negro 0000FF=azul0000FF=azul 00FF00=verde00FF00=verdeF87A17=naranjaF87A17=naranja FAFBE=rosaFAFBE=rosa FFF000=amarilloFFF000=amarilloFF0000 = rojoFF0000 = rojo FFFFFF=blancoFFFFFF=blanco ……
  • 26. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 2626CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.6. Marcado tipográfico de frases4.6. Marcado tipográfico de frasesCaracteres especiales:Caracteres especiales:• << (Menor que):(Menor que): &lt;&lt;• >> (Mayor que):(Mayor que): &gt;&gt;• && (símbolo de and, o ampersand):(símbolo de and, o ampersand): &amp;&amp;• "" (comillas dobles):(comillas dobles): &quot;&quot;• ¿¿ (interrogación de apertura):(interrogación de apertura): &iquest;&iquest; SóloSóloaceptan este símbolo los navegadores a partiraceptan este símbolo los navegadores a partirde la versión 3.0.de la versión 3.0.Es decir, que para escribirEs decir, que para escribir <"><"> en el texto HTMLen el texto HTMLoriginal se debe poneroriginal se debe poner &lt;&quot;&gt;&lt;&quot;&gt;
  • 27. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 2727CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.6. Marcado tipográfico de frases4.6. Marcado tipográfico de frasesLas entidades comienzan siempre con el símboloLas entidades comienzan siempre con el símbolo&&, y terminan con un punto y coma (, y terminan con un punto y coma (;;). Entre). Entremedias va un identificador del carácter que semedias va un identificador del carácter que sequiere que escribir. Las entidades necesarias enquiere que escribir. Las entidades necesarias enespañol son:español son:á:á: &aacute;&aacute; ü:ü: &uuml;&uuml;é:é: &eacute;&eacute; Ü:Ü: &Uuml;&Uuml;í:í: &iacute;&iacute; ¡:¡: &#161;&#161;ó:ó: &oacute;&oacute; ¿:¿: &#191;&#191;ú:ú: &uacute;&uacute; ñ:ñ: &ntilde;&ntilde;
  • 28. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 2828CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.7. Listas4.7. Listas1.- Listas sin numerar:Para crear una lista sin numerar1. Se empieza escribiendo un tag de apertura de lista <UL>2. Se escribe el tag <LI> seguido por el término que se quiera numerar (no esnecesario la etiqueta de cierre).3. Se termina con el tag de cierre de la lista </UL>He aquí una lista de tres elementos: El resultado sería:<UL>Animales domésticos más comunes:<LI>Perros<LI>Gatos<LI>Pájaros</UL>Animales domésticos más comunes:•Perros•Gatos•Pájaros
  • 29. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 2929CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.7. Listas4.7. Listas1.- Listas numeradas:Una lista numerada u ordenada es idéntica a una lista sin numerar,excepto que se usa <OL> en lugar de <UL>. Delante de lostérminos se pone la marca <LI>, que es la misma que se utiliza enlas otras listas.He aquí una lista de tres elementos: El resultado sería:<OL>Resultado de la carrera:<LI>Fulanito Fulánez<LI>Menganito Mengánez<LI>Zutano Zutánez</OL>Resultado de la carrera:1. Fulanito Fulánez2. Menganito Mengánez3. Zutano Zutánez
  • 30. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 3030CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.8. Enlaces4.8. Enlaces• Los enlaces (Los enlaces (linkslinks) en HTML se expresan insertando entre la) en HTML se expresan insertando entre ladirectivadirectiva <A><A> ((anchoranchor) el objeto (que puede ser un) el objeto (que puede ser unfragmento de texto o un gráfico) que vaya a servir comofragmento de texto o un gráfico) que vaya a servir comoanclaje para el enlace. Por ejemplo, si se marca conanclaje para el enlace. Por ejemplo, si se marca con <A><A> unungráfico, cuando en el documento final se pulse con el ratóngráfico, cuando en el documento final se pulse con el ratónsobre dicho gráfico se saltará al objeto referenciado en elsobre dicho gráfico se saltará al objeto referenciado en elenlace: otro documento, un vídeo musical, o cualquierenlace: otro documento, un vídeo musical, o cualquierimagen.imagen.Pulsa <a href="http://www.google.es">aquí</a> para abrir GOOGLE.Pulsa aquí para abrir GOOGLE.
  • 31. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 3131CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.8. Enlaces4.8. Enlaces¿Qué es un URL?¿Qué es un URL? .- Para especificar de manera uniforme el objeto al que apunta el.- Para especificar de manera uniforme el objeto al que apunta elenlace, se utiliza una forma estandarizada que se denominaenlace, se utiliza una forma estandarizada que se denomina URLURL ((UUniformniformRResourceesource LLocator, es decir, Localizador Uniforme de Recursos ). Un URL estáocator, es decir, Localizador Uniforme de Recursos ). Un URL estáformado de la siguiente manera:formado de la siguiente manera: servicio://maquina/rutaservicio://maquina/ruta..ElEl servicioservicio es un nombre que identifica el tipo de servicio que va a proporcionarse enes un nombre que identifica el tipo de servicio que va a proporcionarse enel destino del enlace. La razón de esta aparente complicación es que el WWWel destino del enlace. La razón de esta aparente complicación es que el WWWpretende unificar el acceso a servicios de información que previamente eranpretende unificar el acceso a servicios de información que previamente eranincompatibles entre sí, como ftp, gopher o telnet. El servicio más utilizado esincompatibles entre sí, como ftp, gopher o telnet. El servicio más utilizado es httphttp,,correspondiente al propiocorrespondiente al propio WWWWWW (es decir, cualquier referencia a un documento(es decir, cualquier referencia a un documentoHTML debería comenzar con http://). Otros esquemas muy frecuentes son ftp,HTML debería comenzar con http://). Otros esquemas muy frecuentes son ftp,telnet, gopher o wais.telnet, gopher o wais.LaLa máquinamáquina y lay la rutaruta sirven para localizar el objeto al que apunta el enlace.sirven para localizar el objeto al que apunta el enlace.LaLa máquinamáquina es la identificación del servidor en el cual está situado el objeto al quees la identificación del servidor en el cual está situado el objeto al queapunta el enlace.apunta el enlace.LaLa rutaruta es el nombre del archivo que contiene el documento en concreto, incluyendoes el nombre del archivo que contiene el documento en concreto, incluyendoel nombre del subdirectorio en el que se encuentra.el nombre del subdirectorio en el que se encuentra.Ejemplos:Ejemplos:• http://www.google.eshttp://www.google.es• ftp://ftp.rediris.esftp://ftp.rediris.es
  • 32. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 3232CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.8. Enlaces4.8. Enlaces• Para definir un enlace es necesario marcar con la directivaPara definir un enlace es necesario marcar con la directiva <A><A> el objetoel objetodel cual va a partir dicho enlace. Dicha directiva debe incluir el parámetrodel cual va a partir dicho enlace. Dicha directiva debe incluir el parámetroHREF="HREF="URL"URL" para especificar el destino del enlace. Es decir, que antespara especificar el destino del enlace. Es decir, que antesdel objeto elegido se debe abrir condel objeto elegido se debe abrir con <A HREF="URL"><A HREF="URL"> , y después cerrar, y después cerrarconcon </A></A>. Por ejemplo, si se quiere que el texto "pulse aquí para visitar la. Por ejemplo, si se quiere que el texto "pulse aquí para visitar laUniversidad de Navarra" conduzca a la home page de la Universidad deUniversidad de Navarra" conduzca a la home page de la Universidad deNavarra, se deberá escribir en el texto HTML:Navarra, se deberá escribir en el texto HTML:<A HREF="<A HREF="http://www.uned.es/http://www.uned.es/ ">">Pulse aquí para visitar laPulse aquí para visitar laUniversidad Nacional de Educación a DistanciaUniversidad Nacional de Educación a Distancia </A></A>En la pantalla aparecerá un texto subrayado de color azul- es el estándar- queEn la pantalla aparecerá un texto subrayado de color azul- es el estándar- queindica la existencia de un link o de hipertexto que lleva a la dirección que seindica la existencia de un link o de hipertexto que lleva a la dirección que seindica.indica.• Si deseamos que el enlace que activamos se abra en una nueva ventana,Si deseamos que el enlace que activamos se abra en una nueva ventana,aladiremosaladiremos target=“_blank”:target=“_blank”:<A HREF=“<A HREF=“ http://www.uned.es/”http://www.uned.es/” target=“_blank”>target=“_blank”> Pulse aquí paraPulse aquí paravisitar la Universidad Nacional de Educación a Distanciavisitar la Universidad Nacional de Educación a Distancia </A></A>
  • 33. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 3333CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.8. Enlaces4.8. EnlacesEnlaces dentro de la misma páginaEnlaces dentro de la misma página .-.- En el caso de documentos muyEn el caso de documentos muyextensos puede interesar dar un salto desde una posición a otraextensos puede interesar dar un salto desde una posición a otradeterminada.determinada.Se sustituye porSe sustituye por #marca#marca (la palabra marca puede ser cualquier palabra). Las(la palabra marca puede ser cualquier palabra). Laspalabras que vayan entre las etiquetaspalabras que vayan entre las etiquetas <A HREF="#marca"><A HREF="#marca"> PalabrasPalabras</A></A>aparecerán en la pantalla en color (en forma de hipertexto):aparecerán en la pantalla en color (en forma de hipertexto):• <A HREF="#marca"><A HREF="#marca"> Vea el ejemplo del enlace en una páginaVea el ejemplo del enlace en una página </A></A>Y en el sitio exacto a donde se quiere saltar, se debe poner la siguienteY en el sitio exacto a donde se quiere saltar, se debe poner la siguienteetiqueta:etiqueta:<A NAME="marca"><A NAME="marca">Enlace dentro de una páginaEnlace dentro de una página </A></A>• <A HREF="#final"><A HREF="#final"> Pulsa para ir al finalPulsa para ir al final</A></A>Se puede comprobar cómo salta a la pantalla final.Se puede comprobar cómo salta a la pantalla final.Y en el final del documento se pone esta otra etiqueta:Y en el final del documento se pone esta otra etiqueta:<A NAME="final"> </A><A NAME="final"> </A>• <A HREF="#top"><A HREF="#top"> Se consigue que se vuelva al principio de la página.Se consigue que se vuelva al principio de la página.
  • 34. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 3434CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.8. Enlaces4.8. Enlaces• Hay varias cosas que podemos hacer con un enlace, por ejemplo, podemosHay varias cosas que podemos hacer con un enlace, por ejemplo, podemoshacerhacer que se abra en una ventana aparteque se abra en una ventana aparte. Lo normal es que se abra en la. Lo normal es que se abra en lamisma ventana, pero a veces es mejor que se abra aparte porque la gentemisma ventana, pero a veces es mejor que se abra aparte porque la gentese va a otro sitio desde un link en el tuyo y se olvida de tu sitio. Así que parase va a otro sitio desde un link en el tuyo y se olvida de tu sitio. Así que paraque al tocarlo abra una ventana aparte, le agregamos un "blanco" o "target",que al tocarlo abra una ventana aparte, le agregamos un "blanco" o "target",asi:asi:<a href="<a href="http://www.otraweb.comhttp://www.otraweb.com" target="_blank">" target="_blank">Salta a otra WebSalta a otra Web</a></a>Listo, abrirá en otra ventana nueva, la cual se abrirá automáticamente.Listo, abrirá en otra ventana nueva, la cual se abrirá automáticamente.Otros posiblesOtros posibles targetstargets son:son:_self_self -- Este te sirve si tienes una página dentro de un marco (frame) y quieres-- Este te sirve si tienes una página dentro de un marco (frame) y quieresque al tocar el enlace, se abra en el mismo marco.que al tocar el enlace, se abra en el mismo marco._top_top -- Este te sirve si tu página está en un marco y quieres que se salga del-- Este te sirve si tu página está en un marco y quieres que se salga delmarco, secuestrando la página completa, pero sin abrir ventana nueva.marco, secuestrando la página completa, pero sin abrir ventana nueva.
  • 35. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 3535CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.9. Gráficos4.9. GráficosPara incluir un gráfico en un documento HTML se utiliza laPara incluir un gráfico en un documento HTML se utiliza ladirectivadirectiva <IMG><IMG>. En dicha directiva debe incluirse un. En dicha directiva debe incluirse unparámetroparámetro SRC="URL"SRC="URL", con el cual se indica dónde está el, con el cual se indica dónde está elfichero con el gráfico concreto que se quiere para elfichero con el gráfico concreto que se quiere para eldocumento. Esto pone a disposición una gran flexibilidad, yadocumento. Esto pone a disposición una gran flexibilidad, yaque se puede complementar el contenido del documento tantoque se puede complementar el contenido del documento tantocon gráficos que se encuentren disponibles en el servidor decon gráficos que se encuentren disponibles en el servidor deWWW, como con una foto situada en un servidor de la NASA oWWW, como con una foto situada en un servidor de la NASA odel Ministerio de Cultura, por ejemplo, sin que el lector finaldel Ministerio de Cultura, por ejemplo, sin que el lector finaltenga por qué apreciar ninguna diferencia.tenga por qué apreciar ninguna diferencia.Existe alguna limitación respecto a los formatos gráficos que losExiste alguna limitación respecto a los formatos gráficos que losprogramas lectores de HTML puede interpretar sin problemas.programas lectores de HTML puede interpretar sin problemas.El formato más utilizado es el GIF, que cualquier programa conEl formato más utilizado es el GIF, que cualquier programa concapacidades gráficas debería poder mostrar directamentecapacidades gráficas debería poder mostrar directamente(Mosaic y Netscape pueden hacerlo).(Mosaic y Netscape pueden hacerlo).
  • 36. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 3636CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.9. Gráficos4.9. GráficosPara colocar en un punto del documento la imagen fotografia.gif que estáPara colocar en un punto del documento la imagen fotografia.gif que estáen el mismo subdirectorio que la página Web:en el mismo subdirectorio que la página Web:<IMG SRC=“fotografia.gif" ><P><IMG SRC=“fotografia.gif" ><P>Los gráficos deben optimizarse para su visualización, es decir, hay queLos gráficos deben optimizarse para su visualización, es decir, hay queminimizar la tabla de colores con el fin de disminuir el tamaño queminimizar la tabla de colores con el fin de disminuir el tamaño queocupan las imágenes.ocupan las imágenes.Hay un parámetro optativo de la directivaHay un parámetro optativo de la directiva <IMG><IMG> que sirve para proponerque sirve para proponerun texto alternativo a un gráfico. Este texto aparecerá cuando se estéun texto alternativo a un gráfico. Este texto aparecerá cuando se estéusando para leer el HTML un programa sin capacidades gráficas (porusando para leer el HTML un programa sin capacidades gráficas (porejemploejemplo LynxLynx, que sólo trabaja con texto). Se trata de, que sólo trabaja con texto). Se trata de ALT="texto"ALT="texto"..Conviene utilizarlo cuando los gráficos sirven como origen aConviene utilizarlo cuando los gráficos sirven como origen ahiperenlaces, porque si no los programas sin capacidades gráficas nohiperenlaces, porque si no los programas sin capacidades gráficas nopodrán mostrar los enlaces establecidos.podrán mostrar los enlaces establecidos.Si se desea que el gráfico sea un enlace a otra página Web:Si se desea que el gráfico sea un enlace a otra página Web:<A HREF=“otra_pagina.html”><IMG SRC=“fotografia.gif"></A><A HREF=“otra_pagina.html”><IMG SRC=“fotografia.gif"></A>
  • 37. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 3737CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.9. Gráficos4.9. Gráficos<HTML><HTML><HEAD><HEAD><TITLE>Ejemplo mas largo y con gráficos </TITLE><TITLE>Ejemplo mas largo y con gráficos </TITLE></HEAD></HEAD><BODY><BODY><H1><H1>Un ejemplo mas largoUn ejemplo mas largo </H1></H1>Este es un documento HTML sencillo. Este es el primer p&aacute;rrafo.Este es un documento HTML sencillo. Este es el primer p&aacute;rrafo. <P><P>Este es el segundo p&aacute;rrafo, con efectos especiales. Esta es una palabra enEste es el segundo p&aacute;rrafo, con efectos especiales. Esta es una palabra en<I><I>cursivacursiva</I></I>. Esta es una palabra en. Esta es una palabra en <B><B>negritanegrita</B></B>..He aquHe aqu&iacute;&iacute; una imagen GIF:una imagen GIF: <P><P><IMG<IMG ALT="Árbol”ALT="Árbol” SRC="SRC=" http://www.unav.es/un/images/fotosmenu/admision.gifhttp://www.unav.es/un/images/fotosmenu/admision.gif ">">.. <P><P>Este es el tercer p&aacute;rrafo, que demuestra links. He aqui un hypertexto de la palabraEste es el tercer p&aacute;rrafo, que demuestra links. He aqui un hypertexto de la palabra<A<A HREF="HREF="http://www.elpais.es/index.htmlhttp://www.elpais.es/index.html ">">De la portada del diario EL PAISDe la portada del diario EL PAIS </A></A> a una undocumento llamado:"index.html".documento llamado:"index.html". <P><P><H2><H2>Una cabecera de segundo nivelUna cabecera de segundo nivel </H2></H2>He aqu&iacute; una secciHe aqu&iacute; una secci &oacute;&oacute; n de texto que se debe mostrar como una fuente den de texto que se debe mostrar como una fuente deancho fijo:<P>ancho fijo:<P><PRE><PRE>Con diez caCon diez ca&ntilde;&ntilde;ones por banda, viento en popa a toda vela no corta el mar sinoones por banda, viento en popa a toda vela no corta el mar sinovuela un velero bergantvuela un velero bergant &iacute;&iacute; nn</PRE></PRE><HR><HR>Fin del documentoFin del documento</BODY></BODY></HTML></HTML>Ejemplo más largo y con gráficosEjemplo más largo y con gráficos
  • 38. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 3838CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.9. Gráficos4.9. Gráficos
  • 39. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 3939CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.9. Gráficos4.9. Gráficos< IMG >< IMG > La etiqueta de imagen esLa etiqueta de imagen es solo de aperturasolo de apertura, o sea, no necesita una, o sea, no necesita unaetiqueta de cierre.etiqueta de cierre.Parametros:Parametros: <IMG<IMG SRC="UbicacionGrafico“SRC="UbicacionGrafico“ALT="Texto"ALT="Texto"ALIGN="TOP" ó "MIDDLE" ó "BUTTON"ALIGN="TOP" ó "MIDDLE" ó "BUTTON"BORDER="Tamaño"BORDER="Tamaño"HEIGHT="Tamaño"HEIGHT="Tamaño"WIDTH="Tamaño"WIDTH="Tamaño"HSPACE="Margen"HSPACE="Margen"VSPACE="Margen"VSPACE="Margen"ISMAP/USEMAP >ISMAP/USEMAP >SRC,SRC, especifica la localizacion del archivo que desea incorporar a la pagina WEBespecifica la localizacion del archivo que desea incorporar a la pagina WEBALT,ALT, especifica el texto alternativo que describe la imagen.especifica el texto alternativo que describe la imagen.ALIGN,ALIGN, especifica la alineacion de la imagen con respecto al texto que le rodea:especifica la alineacion de la imagen con respecto al texto que le rodea:• TOPTOP, la parte superior de la imagen se alinea con la parte superior del texto, la parte superior de la imagen se alinea con la parte superior del texto• MIDDLE,MIDDLE, la parte media de la imagen se alinea con la linea base de la base del texto que la rodeala parte media de la imagen se alinea con la linea base de la base del texto que la rodea• BUTTON,BUTTON, la parte inferior de la imagen se alinea con la linea base del texto que la rodeala parte inferior de la imagen se alinea con la linea base del texto que la rodea
  • 40. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 4040CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.10.4.10. Mapas sensitivosMapas sensitivosUnUn mapamapa es una imagen que nos permite realizares una imagen que nos permite realizarhiperenlaces con otras páginas dependiendohiperenlaces con otras páginas dependiendode la zona de la imagen que se pulse.de la zona de la imagen que se pulse.Esto se consigue definiendo áreas activasEsto se consigue definiendo áreas activasasociadas a URLs que actúan como enlaces.asociadas a URLs que actúan como enlaces.Las directivas para crear y manipular mapas son:Las directivas para crear y manipular mapas son:• <MAP><MAP>……</MAP></MAP>• <AREA><AREA>
  • 41. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 4141CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.10.4.10. Mapas sensitivosMapas sensitivos<MAP name=“nombre_mapa”>…</MAP><MAP name=“nombre_mapa”>…</MAP>Identifica el mapaIdentifica el mapa<AREA shape=“rect” coords=“100,10,10,100” href=“dibu.html”><AREA shape=“rect” coords=“100,10,10,100” href=“dibu.html”>Define la zona de código donde están descritas las áreas activasDefine la zona de código donde están descritas las áreas activasy las URLs asociadas:y las URLs asociadas:– shape=“rect”shape=“rect” es un rectángulo, coordenadas esquinas opuestases un rectángulo, coordenadas esquinas opuestas– shape=“poly”shape=“poly” es un polígono, coordenadas de todos sus vérticeses un polígono, coordenadas de todos sus vértices– shape=“circle”shape=“circle” es un círculo con el centro y el radioes un círculo con el centro y el radio
  • 42. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 4242CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.10.4.10. Mapas sensitivosMapas sensitivos• Para activar el mapa debemos indicar, en elPara activar el mapa debemos indicar, en eldocumento, la imagen que queremos mostrar.documento, la imagen que queremos mostrar.• Para ello habrá que incluir:Para ello habrá que incluir:<IMG SRC=“url_fichero.gif” USEMAP=“#nombre_mapa”><IMG SRC=“url_fichero.gif” USEMAP=“#nombre_mapa”>• USEMAPUSEMAP define la zona del código HTMLdefine la zona del código HTMLdonde están descritas las áreas activas y lasdonde están descritas las áreas activas y lasURLs asociadas. Es el mismo que hemosURLs asociadas. Es el mismo que hemosasociado en la directivaasociado en la directiva AREAAREA..
  • 43. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 4343CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.10.4.10. Mapas sensitivosMapas sensitivos<MAP NAME="<MAP NAME="mapaciamapacia">"><AREA SHAPE="RECT" COORDS="<AREA SHAPE="RECT" COORDS="180,24,187,28180,24,187,28" HREF= “" HREF= “index.htmlindex.html">"><AREA SHAPE="RECT" COORDS="<AREA SHAPE="RECT" COORDS="200,37,206,42200,37,206,42" HREF="" HREF="index.htmlindex.html">"><AREA SHAPE="RECT" COORDS="<AREA SHAPE="RECT" COORDS="74,19,121,7274,19,121,72" HREF="" HREF="index.htmlindex.html">"><AREA SHAPE="RECT" COORDS="<AREA SHAPE="RECT" COORDS="134,171,179,193134,171,179,193" HREF="" HREF="index.htmlindex.html">"><AREA SHAPE="CIRCLE" COORDS="<AREA SHAPE="CIRCLE" COORDS="234,139,38234,139,38" HREF="" HREF=" index.htmlindex.html">"><AREA SHAPE="POLYGON" COORDS="<AREA SHAPE="POLYGON" COORDS="240,31,248,69,298,64,239,30240,31,248,69,298,64,239,30" HREF="" HREF="index.htmlindex.html">"><AREA SHAPE="POLYGON" COORDS="<AREA SHAPE="POLYGON" COORDS="51,166,100,99,213,76,115,141,94,210,50,16451,166,100,99,213,76,115,141,94,210,50,164""HREF="HREF="index.htmlindex.html">"><AREA SHAPE="DEFAULT" HREF="<AREA SHAPE="DEFAULT" HREF="index.htmlindex.html">"></MAP></MAP><IMG src="<IMG src="mapacia.gifmapacia.gif" USEMAP="#" USEMAP="#mapaciamapacia">">
  • 44. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 4444CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.11. Tablas4.11. Tablas• Una tabla es un conjunto de filas y columnasUna tabla es un conjunto de filas y columnas• El formato de una tabla se compone de una etiqueta de tablaEl formato de una tabla se compone de una etiqueta de tabla<TABLE><TABLE> etiqueta de tablaetiqueta de tabla </TABLE></TABLE>una etiqueta de filas una etiqueta de filas <TR><TR> etiqueta de filaetiqueta de fila </TR></TR>y una etiqueta de celdas y una etiqueta de celdas <TD><TD> etiqueta de celdasetiqueta de celdas </TD></TD><TABLE><TABLE> <CAPTION align=top> Título de la tabla </CAPTION><CAPTION align=top> Título de la tabla </CAPTION><TR><TR><TD><TD> elementoelemento </TD></TD></TR></TR></TABLE></TABLE>Siendo elemento cualquiera de estoselementos:•texto•listas•otras tablas•imágenes•enlaces de hipertexto•elementos de formulario
  • 45. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 4545CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.11. Tablas4.11. TablasParametros de TABLE:Parametros de TABLE:<TABLE<TABLE BORDER="BORDER="numeronumero""CELLSPANDING="CELLSPANDING="numeronumero""CELLPADDING="CELLPADDING="numeronumero""WIDTH="WIDTH="numero o porcentajenumero o porcentaje""HEIGHT="HEIGHT="numero o porcentajenumero o porcentaje""BGCOLOR="BGCOLOR="codigocolorcodigocolor""BACGROUND="BACGROUND="archivograficoarchivografico" >" ></TABLE></TABLE>• BORDERBORDER define el grosor del marco exterior (puede ser cero).define el grosor del marco exterior (puede ser cero).• CELLSPACINGCELLSPACING define el espacio entre celdas.define el espacio entre celdas.• CELLPADDINGCELLPADDING define el espacio alrededor del texto de una celda.define el espacio alrededor del texto de una celda.• WIDTHWIDTH yy HEIGHTHEIGHT define el ancho y alto de la tabla, especificado endefine el ancho y alto de la tabla, especificado ennumero de pixels o en porcentaje de la paginanumero de pixels o en porcentaje de la pagina• BGCOLORBGCOLOR define el color de fondo de la tabla expresado en Hexadecimaldefine el color de fondo de la tabla expresado en Hexadecimal• BACKGROUNDBACKGROUND define el archivo grafico de fondodefine el archivo grafico de fondo
  • 46. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 4646CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.11. Tablas4.11. Tablas< TR >....</ TR >< TR >....</ TR > Esta etiqueta se utiliza para crear las filas en una tablaEsta etiqueta se utiliza para crear las filas en una tablaParametros de TR (filas):Parametros de TR (filas):• <TR<TR ALIGN="ALIGN="leftleft","","rigthrigth","","centercenter","","justifyjustify""VALIGN="VALIGN="toptop","","middlemiddle","","bottonbotton""HEIGHT="HEIGHT="numero o porcentajenumero o porcentaje" >" ></TR></TR>• ALIGNALIGN define la alineación del texto en el sentido horizontal de la celda.define la alineación del texto en el sentido horizontal de la celda.• VALIGNVALIGN define la alineacion del texto en el sentido vertical de la celda.define la alineacion del texto en el sentido vertical de la celda.• HEIGHTHEIGHT define el alto de la fila en pixels o en porentaje.define el alto de la fila en pixels o en porentaje.Estos parametros se aplican sobre toda la fila, salvo cuando un parametro deEstos parametros se aplican sobre toda la fila, salvo cuando un parametro de<TD><TD> contradice esta alineacióncontradice esta alineación
  • 47. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 4747CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.11. Tablas4.11. Tablas< TD >....</ TD >< TD >....</ TD > Esta etiqueta se uitliza para crear las celdas de una tablaEsta etiqueta se uitliza para crear las celdas de una tablaParametros de TD (celdas):Parametros de TD (celdas):<TD<TD ALIGN="left","rigth","center","justify"ALIGN="left","rigth","center","justify"VALIGN="top","middle","botton"VALIGN="top","middle","botton"ROWSPAN="numero"ROWSPAN="numero"COLSPAN="numero"COLSPAN="numero"WIDTH="numero o porcentaje"WIDTH="numero o porcentaje"HEIGHT="numero o porcentaje"HEIGHT="numero o porcentaje"BGCOLOR="codigocolor"BGCOLOR="codigocolor"BACKGROUND="archivografico" >BACKGROUND="archivografico" >NOWRAPNOWRAP</TD></TD>• ALIGNALIGN define la alineación del texto en el sentido horizontal de la celda.define la alineación del texto en el sentido horizontal de la celda.• VALIGNVALIGN define la alineación del texto en el sentido vertical de la celda.define la alineación del texto en el sentido vertical de la celda.• ROWSPANROWSPAN define la cantidad de celdas que ocupa verticalmentedefine la cantidad de celdas que ocupa verticalmente• COLSPANCOLSPAN de fine la cantidad de celdas que ocupa horizontalmentede fine la cantidad de celdas que ocupa horizontalmente• WIDTHWIDTH define el ancho de la fila en pixels o en porentaje.define el ancho de la fila en pixels o en porentaje.• HEIGHTHEIGHT define el alto de la fila en pixels o en porentaje.define el alto de la fila en pixels o en porentaje.• BGCOLORBGCOLOR define el color de fondo de la celdadefine el color de fondo de la celda• BACKGROUNDBACKGROUND define el archivo grfico del fondo de la celdadefine el archivo grfico del fondo de la celda• NOWRAPNOWRAP obliga al NAVEGADOR a inscribir todo el texto de la celda en una sola líneaobliga al NAVEGADOR a inscribir todo el texto de la celda en una sola línea
  • 48. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 4848CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.11. Tablas4.11. Tablas<TABLE border=3> <caption align=top>Tabla ejemplo</caption><TR><TH>Cabecera1</TH><TH>Cabecera2</TH></TR><TR><TD>Dato1</TD><TD>Dato2</TD></TR><TR><TD>Dato3</TD><TD>Dato4</TD></TR></TABLE>Tabla ejemploCabecera1 Cabecera2Dato1 Dato2Dato3 Dato4
  • 49. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 4949CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.11. Tablas4.11. Tablashttp://usuarios.lycos.es/bulios/ejemtablas.htm#tblborder
  • 50. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 5050CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.11. Tablas4.11. Tablas
  • 51. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 5151CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.11. Tablas4.11. Tablas
  • 52. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 5252CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.11. Tablas4.11. Tablas
  • 53. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 5353CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.12. Sonido de fondo4.12. Sonido de fondo• Es posible escuchar sonidos (o música) desde el propioEs posible escuchar sonidos (o música) desde el propionavegador. Tantonavegador. Tanto NetscapeNetscape comocomo ExplorerExplorer incorporanincorporandesde hace tiempo la capacidad de reproducir sonido.desde hace tiempo la capacidad de reproducir sonido.El único problema es que los archivos suelen serEl único problema es que los archivos suelen sergrandes y, siendo algo innecesario y superfluo, pocagrandes y, siendo algo innecesario y superfluo, pocagente incluye melodías en sus páginas.gente incluye melodías en sus páginas.• Los formatos que se puede asegurar que losLos formatos que se puede asegurar que losnavegadores reproducirán son los archivosnavegadores reproducirán son los archivos WAVWAV yy MIDMID..Para poder reproducir otros necesitarán elPara poder reproducir otros necesitarán el plug-inplug-in ooañadido necesario, como puede ser elañadido necesario, como puede ser el Real AudioReal Audio paraparalos archivoslos archivos RARA o elo el ModPlugModPlug para lospara los MODMOD yyderivados.derivados.• Hay dos formas de activar el sonido de fondo:Hay dos formas de activar el sonido de fondo:1.1. Sonido activado por el usuarioSonido activado por el usuario2.2. Sonido de fondo automáticoSonido de fondo automático
  • 54. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 5454CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.12. Sonido de fondo4.12. Sonido de fondo1.1. Sonido activado por el usuario:Sonido activado por el usuario:La manera más sencilla de incluir sonidos esLa manera más sencilla de incluir sonidos esdejando al usuario la decisión dedejando al usuario la decisión deescucharlos o no. Para hacerlo incluiremosescucharlos o no. Para hacerlo incluiremosel sonido en el parámetro HREF de unel sonido en el parámetro HREF de unenlace, como si fuera una página HTML:enlace, como si fuera una página HTML:• Ejemplo:Ejemplo:<A HREF="<A HREF="hola.wavhola.wav">">Si pulsas te saludoSi pulsas te saludo<A><A>
  • 55. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 5555CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.12. Sonido de fondo4.12. Sonido de fondo2.2. Sonido de fondo automático:Sonido de fondo automático: Lo del sonido de fondo yaLo del sonido de fondo yaes más complicado, ya quees más complicado, ya que NetscapeNetscape yy ExplorerExplorer ofrecenofrecensoluciones propietarias, distintas e incompatibles de hacersoluciones propietarias, distintas e incompatibles de hacersonar un archivo de fondo.sonar un archivo de fondo.En Explorer, desde la versión 2.0, se pueden incluir fondosEn Explorer, desde la versión 2.0, se pueden incluir fondossonoros utilizando la etiquetasonoros utilizando la etiqueta BGSOUNDBGSOUND::<BGSOUND SRC="<BGSOUND SRC="musica.midmusica.mid">">El parámetroEl parámetro SRCSRC indicará el archivo a reproducir. Esta etiquetaindicará el archivo a reproducir. Esta etiquetaadmite también otro parámetro,admite también otro parámetro, LOOPLOOP, que indica el número, que indica el númerode veces consecutivas que sonará el fichero. Si se indicade veces consecutivas que sonará el fichero. Si se indicaLOOP="infinite"LOOP="infinite", el archivo se reproducirá indefinidamente,, el archivo se reproducirá indefinidamente,mientras estemos en la página.mientras estemos en la página.• Ejemplo:Ejemplo:<BGSOUND SRC=“cancion.mid" LOOP="infinite"><BGSOUND SRC=“cancion.mid" LOOP="infinite">
  • 56. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 5656CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.13. Marcos4.13. MarcosLas páginas Web que están hechas conLas páginas Web que están hechas con marcos (frames)marcos (frames) se componen de unase componen de unadeclaración de los marcos ydeclaración de los marcos y tantas páginas en formato HTML corriente comotantas páginas en formato HTML corriente comodistintas divisiones hemos definidodistintas divisiones hemos definido. La declaración o definición de frames es la. La declaración o definición de frames es laúnica página que realmente debemos aprender, puesto que las páginas que seúnica página que realmente debemos aprender, puesto que las páginas que sevan a visualizar en cada uno de los cuadros son ficheros HTML.van a visualizar en cada uno de los cuadros son ficheros HTML.Para saber más: http://www.desarrolloweb.com/articulos/791.php?manual=21Para saber más: http://www.desarrolloweb.com/articulos/791.php?manual=21Por ejemplo:Por ejemplo:http://www.hertz.es/index.cfmhttp://www.hertz.es/index.cfm
  • 57. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 5757CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.13. Marcos4.13. Marcos• Un ejemplo de las áreas que se pueden construir en una construcción deUn ejemplo de las áreas que se pueden construir en una construcción demarcosmarcos se puede ver en las imágenes siguientes:se puede ver en las imágenes siguientes:Las páginas Web que están hechas conLas páginas Web que están hechas con marcos (frames)marcos (frames) se componen de unase componen de unadeclaración de los marcos ydeclaración de los marcos y tantas páginas en formato HTML corriente comotantas páginas en formato HTML corriente comodistintas divisiones hemos definidodistintas divisiones hemos definido. La declaración o definición de frames es la. La declaración o definición de frames es laúnica página que realmente debemos aprender, puesto que las páginas que seúnica página que realmente debemos aprender, puesto que las páginas que sevan a visualizar en cada uno de los cuadros son ficheros HTML.van a visualizar en cada uno de los cuadros son ficheros HTML.
  • 58. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 5858CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.13. Marcos4.13. MarcosNecesitaremos las etiquetasNecesitaremos las etiquetas <FRAMESET><FRAMESET> yy <FRAME>,<FRAME>, con lascon lasque indicaremos la disposición de todos los cuadros. Laque indicaremos la disposición de todos los cuadros. Laetiquetaetiqueta <FRAMESET><FRAMESET> indica las particiones de la ventana delindica las particiones de la ventana delnavegador y la etiquetanavegador y la etiqueta <FRAME><FRAME> indica cada uno de losindica cada uno de loscuadros donde colocaremos una página independiente.cuadros donde colocaremos una página independiente.Las particiones que se pueden hacer con un <FRAMESET> sonLas particiones que se pueden hacer con un <FRAMESET> sonen filas o columnas, pero no las dos a la vezen filas o columnas, pero no las dos a la vez. Por ejemplo,. Por ejemplo,podríamos desear hacer una división de la página en dos filas,podríamos desear hacer una división de la página en dos filas,o dos columnas, tres filas, etc. Para indicar tanto la forma deo dos columnas, tres filas, etc. Para indicar tanto la forma departir la ventana -en filas o columnas- como el número departir la ventana -en filas o columnas- como el número departiciones que pretendemos hacer, se ha de utilizar el atributoparticiones que pretendemos hacer, se ha de utilizar el atributoCOLSCOLS oo ROWSROWS. El primero sirve para indicar una partición en. El primero sirve para indicar una partición encolumnas y el segundo para una partición en filas.columnas y el segundo para una partición en filas.
  • 59. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 5959CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.13. Marcos4.13. Marcos• Valores típicos de estos atributos serían los siguientes:Valores típicos de estos atributos serían los siguientes:cols="20%,80%"cols="20%,80%"Indica que se deben colocar dos columnas, la de la izquierda tendría un 20% del espacio total de la ventanaIndica que se deben colocar dos columnas, la de la izquierda tendría un 20% del espacio total de la ventanay la de la derecha un 80%.y la de la derecha un 80%.rows="15%,60%,25%"rows="15%,60%,25%"Así indicamos que deseamos tres filas, la de arriba con un 15% del espacio total, la del medio con unAsí indicamos que deseamos tres filas, la de arriba con un 15% del espacio total, la del medio con unespacio correspondiente al 60% del total y la de abajo con un 25%. En total suman el 100% del espacio deespacio correspondiente al 60% del total y la de abajo con un 25%. En total suman el 100% del espacio dela ventana.la ventana.• También podemos indicarlo en pixeles. De esta manera.También podemos indicarlo en pixeles. De esta manera.cols="200,600"cols="200,600"Para indicar que la columna de la izquierda debe tener 200 pixels de ancho y la de la derecha 600. EstoPara indicar que la columna de la izquierda debe tener 200 pixels de ancho y la de la derecha 600. Estoestá bien si nuestra ventana tiene 800 pixels de ancho, pero esto no tiene porque ser así en todos losestá bien si nuestra ventana tiene 800 pixels de ancho, pero esto no tiene porque ser así en todos losmonitores de los usuarios, por lo que este modo de expresar los marcos es importante que se indique de lamonitores de los usuarios, por lo que este modo de expresar los marcos es importante que se indique de lasiguiente manera.siguiente manera.cols="200,*"cols="200,*"Así indicamos que la primera columna ha de medir 200 pixels y que el resto del espacio disponible -que seráAsí indicamos que la primera columna ha de medir 200 pixels y que el resto del espacio disponible -que serámayor o menor dependiendo de la definición de la pantalla del usuario- se le asignará a segunda columna.mayor o menor dependiendo de la definición de la pantalla del usuario- se le asignará a segunda columna.
  • 60. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 6060CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.13. Marcos4.13. Marcos• En la práctica podemosEn la práctica podemos mezclar todos estos métodosmezclar todos estos métodos para definir lospara definir losmarcos de la manera que deseemos, con pocentaje, con pixels o con elmarcos de la manera que deseemos, con pocentaje, con pixels o con elcomodín (*). No importa cómo se definan,comodín (*). No importa cómo se definan, la única recomendación es quela única recomendación es queuno de los valores que indiquemos sea un asteriscouno de los valores que indiquemos sea un asterisco, para que el área, para que el áreacorrespondiente a dicho asterisco o comodín sea más o menos grandecorrespondiente a dicho asterisco o comodín sea más o menos grandedependiendo del espacio que tenga la ventana de nuestro navegador. Otrosdependiendo del espacio que tenga la ventana de nuestro navegador. Otrosmétodos de definir filas y columnas, atendiendo a este consejo, serían losmétodos de definir filas y columnas, atendiendo a este consejo, serían lossiguientes:siguientes:rows="100,*,12%"rows="100,*,12%"Definimos tres filas, la primera con 100 pixels de ancho, la segunda con elDefinimos tres filas, la primera con 100 pixels de ancho, la segunda con elespacio que sobre de las otras dos y la tercera con 12% del espacio total.espacio que sobre de las otras dos y la tercera con 12% del espacio total.cols="10%,50%,120,*"cols="10%,50%,120,*"Estamos indicando cuatro columnas. La primera del 10% del espacio de laEstamos indicando cuatro columnas. La primera del 10% del espacio de laventana, la segunda con la mitad justa de la ventana, la tercera con unventana, la segunda con la mitad justa de la ventana, la tercera con unespacio de 120 pixels y la última con la cantidad de espacio que sobre alespacio de 120 pixels y la última con la cantidad de espacio que sobre alasignar espacio a las demás particiones.asignar espacio a las demás particiones.
  • 61. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 6161CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.13. Marcos4.13. Marcos• Ejemplo de la creación de un frame simple para ilustrar loEjemplo de la creación de un frame simple para ilustrar loaprendido hasta ahora:aprendido hasta ahora:<html><head>    <title>Definición de Frames</title></head><frameset rows="15%,*,75">    <frame src="pagina1.html">    <frame src="pagina2.html">    <frame src="pagina3.html"></frameset></html>15%15%**75 pixeles75 pixeles<html><html><head> <title>Untitled</title><head> <title>Untitled</title></head></head><body bgcolor="#CF391C"><body bgcolor="#CF391C"></body></body></html></html>
  • 62. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 6262CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.13. Marcos4.13. Marcos• Algunas consideraciones que hacer para terminar de comprender elAlgunas consideraciones que hacer para terminar de comprender elejemplo anterior:ejemplo anterior:– El título de la definición de frames es el que hereda toda la página WebEl título de la definición de frames es el que hereda toda la página Web, por ello,, por ello,no es buena idea titular como "definición de frames" por ejemplo, ya queno es buena idea titular como "definición de frames" por ejemplo, ya queentonces toda nuestra página se titularía así y seguramente no sea muyentonces toda nuestra página se titularía así y seguramente no sea muydescriptivo. Si estuviésemos haciendo una página para la carnicería pepe seríadescriptivo. Si estuviésemos haciendo una página para la carnicería pepe seríamejor titular a la definición de frames algo como "Carnicería Pepe, las mejoresmejor titular a la definición de frames algo como "Carnicería Pepe, las mejorescarnes en Madrid".carnes en Madrid".– La página que define los frames no tiene bodyLa página que define los frames no tiene body. HTML puede arrojarnos un error. HTML puede arrojarnos un errorsi lo incluimos.si lo incluimos.– Las páginas "pagina1.html", "pagina2.html"y "pagina3.html" han de escribirse enLas páginas "pagina1.html", "pagina2.html"y "pagina3.html" han de escribirse enarchivos independientes con el nombre indicadoarchivos independientes con el nombre indicado. En este ejemplo, dichas. En este ejemplo, dichaspáginas deberían encontrarse en el mismo directorio que la declaración depáginas deberían encontrarse en el mismo directorio que la declaración deframes. Si especificamos una ruta para acceder al archivo podemos colocarlo enframes. Si especificamos una ruta para acceder al archivo podemos colocarlo enel directorio que deseemos.el directorio que deseemos.– Los colores de cada uno de los framesLos colores de cada uno de los frames los hemos colocado con el atributolos hemos colocado con el atributobgcolor colocado en la etiqueta <BODY> de cada una de las páginas que sebgcolor colocado en la etiqueta <BODY> de cada una de las páginas que semuestran en los marcos.muestran en los marcos.
  • 63. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 6363CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.13. Marcos4.13. Marcos• Hay varias cosas que podemos hacer con este link, por ejemplo, podemosHay varias cosas que podemos hacer con este link, por ejemplo, podemoshacer que se abra en una ventana aparte. Lo normal es que se abra en lahacer que se abra en una ventana aparte. Lo normal es que se abra en lamisma ventana, pero a veces es mejor que se abra aparte porque la gentemisma ventana, pero a veces es mejor que se abra aparte porque la gentese va a otro sitio desde un link en el tuyo y se olvida de tu sitio. Asi que parase va a otro sitio desde un link en el tuyo y se olvida de tu sitio. Asi que paraque al tocarlo abra una ventana aparte, le agregamos un "blanco" o "target",que al tocarlo abra una ventana aparte, le agregamos un "blanco" o "target",asi:asi:<a href="http://www.tecnohispanos.com" target="_blank">TecnoHispanos</a><a href="http://www.tecnohispanos.com" target="_blank">TecnoHispanos</a>Listo, abrirá en otra ventana nueva, la cual se abrirá automáticamente.Listo, abrirá en otra ventana nueva, la cual se abrirá automáticamente.Otros posibles targets son:Otros posibles targets son:_self -- Este te sirve si tienes una página dentro de un frame (marco) y quieres_self -- Este te sirve si tienes una página dentro de un frame (marco) y quieresque al tocar el enlace, se abra en el mismo frame.que al tocar el enlace, se abra en el mismo frame._top -- Este te sirve si tu página está en un marco y quieres que se salga del_top -- Este te sirve si tu página está en un marco y quieres que se salga delmarco, secuestrando la página completa, pero sin abrir ventana nueva.marco, secuestrando la página completa, pero sin abrir ventana nueva.
  • 64. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 6464CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.14. Formularios4.14. Formularios• LosLos formulariosformularios sirven para recoger ysirven para recoger yposteriormente procesar información delposteriormente procesar información delusuario.usuario.• En un formulario se solicitan datos alEn un formulario se solicitan datos alusuario (campos) que son asociados ausuario (campos) que son asociados avariablesvariables (pares de datos).(pares de datos).• En una página Web estos campos puedenEn una página Web estos campos puedenadoptar diversas formas…adoptar diversas formas…
  • 65. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 6565CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.14. Formularios4.14. Formularios• Ejemplo de mecanismos de formularios:Ejemplo de mecanismos de formularios:
  • 66. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 6666CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.14. Formularios4.14. Formularios• Usando HTML podemos únicamente enviar el formulario a un correo electrónicoUsando HTML podemos únicamente enviar el formulario a un correo electrónico..Si queremos procesar el formulario mediante un programa la cosa puede resultarSi queremos procesar el formulario mediante un programa la cosa puede resultarun poco más compleja ya que tendremos que emplear otros lenguajes másun poco más compleja ya que tendremos que emplear otros lenguajes mássofisticados. En este caso, la solución más sencilla es utilizar los programassofisticados. En este caso, la solución más sencilla es utilizar los programasprediseñados que nos proponen un gran número de servidores de alojamiento yprediseñados que nos proponen un gran número de servidores de alojamiento yque nos permiten almacenar y procesar los datos en forma de archivos u otrosque nos permiten almacenar y procesar los datos en forma de archivos u otrosformatos. Si vuestras páginas están alojadas en un servidor que no os proponeformatos. Si vuestras páginas están alojadas en un servidor que no os proponeeste tipo de ventajas, siempre podéis recurrir a servidores de terceros queeste tipo de ventajas, siempre podéis recurrir a servidores de terceros queofrecen este u otro tipo de servicios gratuitos para Webs. Por supuesto, existeofrecen este u otro tipo de servicios gratuitos para Webs. Por supuesto, existeotra alternativa que es la de aprender lenguajes como ASP o PHP que nosotra alternativa que es la de aprender lenguajes como ASP o PHP que nospermitirán, entre otras cosas, el tratamiento de formularios.permitirán, entre otras cosas, el tratamiento de formularios.Los formularios son definidos por medio de las etiquetasLos formularios son definidos por medio de las etiquetas <form><form> yy </form>.</form>. EntreEntreestas dos etiquetas colocaremos todos los campos y botones que componen elestas dos etiquetas colocaremos todos los campos y botones que componen elformulario.formulario. Dentro de esta etiqueta <form> debemos especificar algunos atributos:Dentro de esta etiqueta <form> debemos especificar algunos atributos:– actionaction– methodmethod– enctypeenctype
  • 67. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 6767CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.14. Formularios4.14. Formularios• actionactionDefine el tipo de acción a llevar a cabo con el formularioDefine el tipo de acción a llevar a cabo con el formulario. Como ya hemos dicho, existen dos posibilidades:. Como ya hemos dicho, existen dos posibilidades:– El formulario es enviado a una dirección de correo electrónicoEl formulario es enviado a una dirección de correo electrónico– El formulario es enviado a un programa o script que procesa su contenidoEl formulario es enviado a un programa o script que procesa su contenidoEn el primer caso, el contenido del formulario es enviado a la dirección de correo electrónico especificada porEn el primer caso, el contenido del formulario es enviado a la dirección de correo electrónico especificada pormedio de una sintaxis de este tipo:medio de una sintaxis de este tipo: <form action="mailto:direccion@correo.com" ...><form action="mailto:direccion@correo.com" ...>Si lo que queremos es que el formulario sea procesado por un programa, hemos de especificar la dirección delSi lo que queremos es que el formulario sea procesado por un programa, hemos de especificar la dirección delarchivo que contiene dicho programa. La etiqueta quedaría en este caso de la siguiente forma:archivo que contiene dicho programa. La etiqueta quedaría en este caso de la siguiente forma:<form action="dirección del archivo" ...><form action="dirección del archivo" ...>La forma en la que se expresa la localización del archivo que contiene el programa es la misma que la vista paraLa forma en la que se expresa la localización del archivo que contiene el programa es la misma que la vista paralos enlaces.los enlaces.• methodmethodEste atributo se encarga de especificarEste atributo se encarga de especificar la forma en la que el formulario es enviadola forma en la que el formulario es enviado. Los dos valores posibles que. Los dos valores posibles quepuede tomar esta atributo sonpuede tomar esta atributo son postpost yy getget. A efectos prácticos y, salvo que se os diga lo contrario, daremos. A efectos prácticos y, salvo que se os diga lo contrario, daremossiempre el valor post.siempre el valor post.• enctypeenctypeSe utiliza para indicarSe utiliza para indicar la forma en la que viajará la información que se mande por el formulariola forma en la que viajará la información que se mande por el formulario. En el caso más. En el caso máscorriente, enviar el formulario por correo electrónico, el valor de este atributo debe de sercorriente, enviar el formulario por correo electrónico, el valor de este atributo debe de ser "text/plain""text/plain". Así. Asíconseguimos que se envíe el contenido del formulario como texto plano dentro del email.conseguimos que se envíe el contenido del formulario como texto plano dentro del email.Si queremos que el formulario se procese automáticamente por un programa, generalmente no utilizaremos esteSi queremos que el formulario se procese automáticamente por un programa, generalmente no utilizaremos esteatributo, de modo que tome su valor por defecto, es decir, no incluiremosatributo, de modo que tome su valor por defecto, es decir, no incluiremos enctypeenctype dentro de la etiquetadentro de la etiqueta<form><form>
  • 68. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 6868CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.14. Formularios4.14. FormulariosCorreo electrónico:Correo electrónico:Lo que nunca debe faltar en una página, por su sencillez y utilidad, por que esLo que nunca debe faltar en una página, por su sencillez y utilidad, por que esla forma más adecuada en muchos casos... Siempre tenemos que incluirla forma más adecuada en muchos casos... Siempre tenemos que incluiruna dirección de correo, fácilmente localizable, para que los visitantesuna dirección de correo, fácilmente localizable, para que los visitantespuedan comunicarse. Es facilísimo hacer un enlace con una dirección depuedan comunicarse. Es facilísimo hacer un enlace con una dirección decorreo:correo:Se ha de poner un enlace convencional, pero su atributoSe ha de poner un enlace convencional, pero su atributo HREF vaHREF vadireccionadodireccionado a una dirección dea una dirección de correocorreo con la palabracon la palabra mailtomailto::..<A HREF="mailto:<A HREF="mailto:humantica@hotmail.comhumantica@hotmail.com">Escríbeme</A>">Escríbeme</A>Quedaría así: EscríbemeQuedaría así: EscríbemePoner un enlace a una dirección de correo en un editor de HTML, para losPoner un enlace a una dirección de correo en un editor de HTML, para losque trabajáis con herramientas de edicion, también es pareceido a como loque trabajáis con herramientas de edicion, también es pareceido a como lohacéis para los enlaces normales, pero con esas diferencias.hacéis para los enlaces normales, pero con esas diferencias.
  • 69. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 6969CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.14. Formularios4.14. FormulariosFormulario de contacto:Formulario de contacto:Podemos utilizar un formulario para comunicarnos. En el formularioPodemos utilizar un formulario para comunicarnos. En el formularionuestro visitante puede introducir sus datos y la consulta onuestro visitante puede introducir sus datos y la consulta osugerencia que desea realizar, para, pulsando luego un botón,sugerencia que desea realizar, para, pulsando luego un botón,enviar por correo electrónico a la persona de contacto todos losenviar por correo electrónico a la persona de contacto todos losdatos.datos.Las ventajas de un formulario con respecto a una dirección deLas ventajas de un formulario con respecto a una dirección decorreo pueden ser:correo pueden ser:– AyudarAyudar al visitante a componer el mensaje, y así incentivar sual visitante a componer el mensaje, y así incentivar sucomunicación.comunicación.– ForzarForzar a que el visitante introduzca cierta información que te puedaa que el visitante introduzca cierta información que te puedaresultar importante.resultar importante.– OfrecerOfrecer más mecanismos de comunicacion, cada uno elegirá el quemás mecanismos de comunicacion, cada uno elegirá el quemás le convenga.más le convenga.
  • 70. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 7070CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.14. Formularios4.14. FormulariosVeamos brevemente ahoraVeamos brevemente ahora cómo construir un formulario en una página Webcómo construir un formulario en una página Web::Un formulario se coloca entre las etiquetas <form> y </form>. A esta etiqueta leUn formulario se coloca entre las etiquetas <form> y </form>. A esta etiqueta letenemos que incluir varios atributos, estos son:tenemos que incluir varios atributos, estos son:– ACTIONACTION="mailto:eugim@desarrolloweb.com" Para indicarle a qué dirección de="mailto:eugim@desarrolloweb.com" Para indicarle a qué dirección decorreo enviar los resultados del formulario.correo enviar los resultados del formulario.– METHODMETHOD="post" Para que lo envie por metodo post, esencial para enviarlo por="post" Para que lo envie por metodo post, esencial para enviarlo pore-mail.e-mail.– ENCTYPEENCTYPE="text/plain" Por que lo que vamos a enviar es texto.="text/plain" Por que lo que vamos a enviar es texto.En resumen, la etiqueta del formulario para envío de correo electrónicoEn resumen, la etiqueta del formulario para envío de correo electrónicoquedaría así:quedaría así:<FORM ACTION="mailto:<FORM ACTION="mailto:humantica@hotmail.comhumantica@hotmail.com" METHOD="post“" METHOD="post“ENCTYPE="text/plain">ENCTYPE="text/plain"><!--  CAMPOS DEL FORMULARIO  --><!--  CAMPOS DEL FORMULARIO  --></FORM></FORM>
  • 71. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 7171CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.14. Formularios4.14. Formularios<form name=<form name=formularioformulario id= id=formularioformulario method= method=postpost enctype= enctype=text/plaintext/plainaction=action=mailto:humantica@hotmail.commailto:humantica@hotmail.com target= target=_self_self>><p>Tu Nombre:<INPUT type = text name = nombre size = 30 ><p>Tu Nombre:<INPUT type = text name = nombre size = 30 >Tu Clave: <INPUT type = password name = clave size = 8 ></p>Tu Clave: <INPUT type = password name = clave size = 8 ></p><p align=center><p align=center><input type=submit value=Enviar formulario><input type=submit value=Enviar formulario><input type=reset value=resetear formulario></p><input type=reset value=resetear formulario></p></form></form>IMPORTANTEIMPORTANTE :: La opciónLa opción mailto:mailto: en el parámetroen el parámetro actionaction de la directivade la directiva FORMFORMsolo funciona correctamente con Netscape. En Microsoft Explorer esta opción da comosolo funciona correctamente con Netscape. En Microsoft Explorer esta opción da comoresultado un correo en blanco. Para enviar un formulario por e-mail sin importar el visorresultado un correo en blanco. Para enviar un formulario por e-mail sin importar el visorutilizado se ha de utilizar un programa externo que realice este proceso. En la páginautilizado se ha de utilizar un programa externo que realice este proceso. En la páginaMAILFORMMAILFORM tienes información de cómo implementar un programa externo para eltienes información de cómo implementar un programa externo para elenvío de formularios vía e-mail en tu página Web.envío de formularios vía e-mail en tu página Web.EjemploEjemplo de formulario para enviar por correo electrónico:de formulario para enviar por correo electrónico:
  • 72. Monitor: Francisco Sánchez GuisadoMonitor: Francisco Sánchez GuisadoDiapositiva -Diapositiva - 7272CURSO DE LENGUAJE HTMLCURSO DE LENGUAJE HTML4.14. Formularios4.14. FormulariosSe puede utilizar unSe puede utilizar un Formulario como "lanzador" de linksFormulario como "lanzador" de links, es decir, por, es decir, pormedio de una lista desplegable permitir al usuario escoger un Link ymedio de una lista desplegable permitir al usuario escoger un Link yacceder a el. Para ello se utiliza el parametro "OnClick".acceder a el. Para ello se utiliza el parametro "OnClick". EjemploEjemplo ::<FORM><FORM><SELECT<SELECT name =name = "list""list" >><OPTION SELECTED value=<OPTION SELECTED value= "http://www.mipagina.com""http://www.mipagina.com">>Mi Pagina WebMi Pagina Web<OPTION value=<OPTION value="http://www.microsoft.com""http://www.microsoft.com">>MicrosoftMicrosoft<OPTION value=<OPTION value="http://www.ibm.com""http://www.ibm.com">>IbmIbm<OPTION value=<OPTION value="http://www.novell.com""http://www.novell.com">>NovellNovell<OPTION value=<OPTION value="http://www.hp.com""http://www.hp.com">>Hewlett PackardHewlett Packard<OPTION value=<OPTION value="http://www.fujitsu.com""http://www.fujitsu.com">>FujitsuFujitsu<OPTION value=<OPTION value="http://www.3com.com""http://www.3com.com">>3Com3Com</SELECT></SELECT><INPUT TYPE=BUTTON value=<INPUT TYPE=BUTTON value= "Ir a...“"Ir a...“onClick=onClick="top.location.href=this.form.list.options[this.form.list.selectedIndex].value""top.location.href=this.form.list.options[this.form.list.selectedIndex].value">></FORM></FORM>