Manual Basico De Html Pdf Book
Manual de EstadГstica. David Ruiz MuГ±oz Universidad Pablo de Olavide. ISBN: 84-688-6153-7 91 pГЎgs. PDF 709 Kb.
Manual Basico De Html Pdf Tutorials
MANUAL BГЃSICO DE CREACIГ“N DE PГЃGINAS WEB
INDICE PГЎg. CapГtulo I: DescripciГіn de la Suite ArcGIS I. Fundamentos del ArcGIS. 3.
- Manual bГЎsico de conversiГіn de vehГculos elГ©ctricos JosГ© Belloni 3813- Montevideo- Uruguay- 059825132478- Skype: autolibre- http://autolibre.
- ГЃrea de TecnologГas de la InformaciГіn y las Comunicaciones Aplicadas MANUAL BГЃSICO DE CREACIГ“N DE PГЃGINAS WEB.
- En este Manual de HTML conocerГЎs el lenguaje de marcaciГіn de principio a fin. HTML es el lenguaje utilizado como base para crear las pГЎginas web y representa el.
ГЃrea de TecnologГas de la InformaciГіn y las Comunicaciones Aplicadas MANUAL BГЃSICO DE CREACIГ“N DE PГЃGINAS WEB PГЎg. 2 CreaciГіn de pГЎginas Web ГЃrea de TecnologГas de la InformaciГіn y las Comunicaciones Aplicadas INDICE________________________________________________ WORLD WIDE WEB________________________________________________________ 6 UtilizaciГіn del servicio World Wide Web.___________________________________________ 6 Servicio de Almacenamiento de pГЎginas WWW de la UM _____________________________ 7 IntroducciГіn_____________________________________________________ __________ 9 El LENGUAJE HTML.___________________________________________ ___________ 9 MI PRIMER DOCUMENTO HTML.__________________________________________ 10 CARACTERГЌSTICAS GENERALES DEL LENGUAJE HTML._________ ___________ 11 Marcas y atributos. ____________________________________________________________ 11 ConcatenaciГіn de marcas._______________________________________________________ 12 CUATRO NORMAS FUNDAMENTALES____________________________ _________ 12 HTML es simplemente texto_____________________________________________________ 12 Igualdad de mayГєsculas y minГєsculas. ____________________________________________ 13 No importan los tabuladores, ni los saltos de lГnea ___________________________________ 13 Caracteres especiales ___________________________________________________________ 13 ESTRUCTURA DE UN DOCUMENTO HTML._______________________ __________ 14 COMANDOS BГЃSICOS DE HTML_____________________________ ______________ 14 DefiniciГіn de pГЎrrafos: P _______________________________________________________ 15 Ruptura de lГneas: BR. _________________________________________________________ 15 Titulos de encabezamiento ______________________________________________________ 15 Dando estilo al texto____________________________________________________________ 16 Tipos de letras _______________________________________________________________________ 16 TamaГ±o del texto. ____________________________________________________________________ 16 Colores del texto. ____________________________________________________________________ 17 Listas ________________________________________________________________________ 18 Listas ordenadas: OL. _________________________________________________________________ 18 Listas desordenadas: UL. ______________________________________________________________ 19 Listas de definiciГіn: DL._______________________________________________________________ 19 Texto preformateado: PRE. _____________________________________________________ 20 Centrando texto. ______________________________________________________________ 20 LГneas horizontales. ____________________________________________________________ 20 Comentarios no visibles en la pantalla_____________________________________________ 21 ENLACES: A._____________________________________________________________ 23 Enlaces a otras zonas de la misma pГЎgina __________________________________________ 24 Enlaces a otras pГЎginas _________________________________________________________ 27 Enlaces a una zona de otra pГЎgina ________________________________________________ 29 PГЎg. 3 CreaciГіn de pГЎginas Web IMГЃGENES__________________________________________________ ____________ 29 Principales formatos grГЎficos en Internet. _________________________________________ 30 Formato GIF.________________________________________________________________________ 30 Formato JPEG. ______________________________________________________________________ 30 InclusiГіn de imГЎgenes __________________________________________________________ 31 TamaГ±o de las imГЎgenes. ______________________________________________________________ Escalado de imГЎgenes. ________________________________________________________________ Bordes de la imagen. __________________________________________________________________ AlineaciГіn de texto con las imГЎgenes. ____________________________________________________ ImГЎgenes con texto alternativo.__________________________________________________________ Uso de imГЎgenes como enlaces. _________________________________________________________ ImГЎgenes como fondo de un documento. __________________________________________________ Mapas sensibles. _____________________________________________________________________ 31 31 31 32 32 32 32 33 TABLAS________________________________________________________ _________ 36 TГtulo de la tabla. ______________________________________________________________ 36 Bordes de la tabla. _____________________________________________________________ 37 Cabeceras de filas y de columnas. ________________________________________________ 37 TamaГ±o de la tabla. ____________________________________________________________ 37 JustificaciГіn de la tabla. ________________________________________________________ 38 Espacio dentro de las celdas._____________________________________________________ 38 Forma de las celdas individuales. _________________________________________________ 38 JustificaciГіn del texto de las celdas. ______________________________________________________ Celdas de diferentes tamaГ±os. ___________________________________________________________ Celdas irregulares.____________________________________________________________________ Color de cada celda. __________________________________________________________________ Texto en una solo lГnea. _______________________________________________________________ 38 39 39 39 40 FRAMES (MARCOS)_____________________________________________ _________ 40 Formularios (FORMS)_____________________________________________ ________ 44 Campos de entrada ____________________________________________________________ 45 Campos de selecciГіn ___________________________________________________________ 47 ГЃreas de texto_________________________________________________________________ 48 Hojas de estilo_____________________________________________________________ 51 EDITORES Y CONVERSORES____________________________________ __________ 52 Editores______________________________________________________________________ 52 Conversores __________________________________________________________________ 53 PUBLICAR LAS PГЃGINAS EN INTERNET._________________________ __________ 53 DIRECCIONES INTERNET DE INTERГ‰S.____________________________________ 54 BIBLIOGRAFГЌA._________________________________________________ _________ 55 PГЎg. 4 CreaciГіn de pГЎginas Web ГЃrea de TecnologГas de la InformaciГіn y las Comunicaciones Aplicadas INTRODUCCIГ“N AL WORLD WIDE WEB PГЎg. 5 CreaciГіn de pГЎginas Web WORLD WIDE WEB__________________________________________ El servicio World Wide Web (La TelaraГ±a Mundial), tambiГ©n conocido como WWW o simplemente Web, es un Sistema de InformaciГіn distribuido por Internet basado en la tecnologГa hipertexto/hipermedia, que proporciona una interface comГєn a los distintos formatos de datos (texto, grГЎficos, vГdeo, audio, etc.) y a los servicios de Internet existentes (FTP, news, telnet,...). Todo esto hace que el servicio Web sea el servicio de mГЎs utilizado en Internet. Un documento hipertexto, es un texto en que cualquier palabra puede ser especificada como un enlace a otros documentos que contienen mГЎs informaciГіn sobre dicha palabra, por lo que la lectura de un documento hipertexto no es secuencial o lineal, sino que se puede acceder a la informaciГіn que nos interese desde otros conceptos relacionados (simplemente haciendo clic con el ratГіn en la palabra relacionada), y de esta forma avanzar de documento en documento hasta encontrar la informaciГіn deseada. Estas palabras que poseen enlaces a otros documentos estГЎn marcadas de alguna manera para poder diferenciarlas. Un documento hipermedia es un hipertexto, pero que no incluye sГіlo informaciГіn textual sino tambiГ©n informaciГіn multimedia, es decir, puede incluir grГЎficos, vГdeo, y sonido. A pesar de las diferencias de estos dos conceptos, a menudo se utiliza el tГ©rmino hipertexto para designar el significado de hipermedia. Los documentos Web o tambiГ©n llamados pГЎginas Web pueden estar localizados en diferentes sitios de Internet, estos sitios son llamados servidores Web. De manera que un documento WWW puede contener enlaces a otros documentos que se encuentran en el mismo servidor Web o en otros servidores Web, logrando asГ formar una telaraГ±a mundial de informaciГіn. El lenguaje estandarizado para la creaciГіn de pГЎginas Web es el lenguaje HTML (HyperText Markup Language, Lenguaje de Marcas Hipertexto). HTML es un lenguaje muy sencillo que permite describir documentos hipertexto. La descripciГіn se basa en especificar en el texto la estructura lГіgica del contenido (tГtulos, pГЎrrafos de texto normal, enumeraciones, definiciones, citas, etc) asГ como los diferentes efectos que se quieren dar (especificar los lugares del documento donde se debe poner cursiva, negrita, o un grГЎfico determinado). UtilizaciГіn del servicio World Wide Web. Para utilizar el servicio Web se necesita una aplicaciГіn cliente capaz de entender o interpretar informaciГіn HTML, a este tipo de aplicaciones se le conoce como browsers o navegadores o visualizadores o hojeadores. Mediante el browser el usuario puede acceder a los documentos HTML y moverse de un documento a otro a travГ©s de sus vГnculos o enlaces, este hecho de moverse con el browser por las pГЎginas WWW a travГ©s de sus enlaces se le conoce como Navegar por Internet. PГЎg. 6 CreaciГіn de pГЎginas Web ГЃrea de TecnologГas de la InformaciГіn y las Comunicaciones Aplicadas El browser sabe cГіmo acceder a cada recurso de Internet, sabe cГіmo acceder a un servidor de FTP anГіnimo, a un servidor de News, ..., y por supuesto cГіmo conectarse a los servidores Web. El mecanismo que utiliza el browser para acceder a un recurso en cualquier lugar de Internet es el URL (Uniform Resource Locator, Localizador de Recursos Uniforme), comГєnmente llamado direcciГіn Internet. Los URLs combinan el protocolo a utilizar para obtener el recurso: http (es el del Web), ftp, telnet, ...; junto con el nombre del host servidor, y el path completo del recurso (directorios y nombre de archivo). Los URLs constituyen en realidad los enlaces que permiten movernos de una pagina a otra, es decir Navegar por Internet, y que las podemos identificar dentro de una pГЎgina WWW porque estas incluidos comГєnmente como Texto en color subrayado, tambiГ©n puede ir incluidos dentro de una imagen, etc. Servicio de Almacenamiento de pГЎginas WWW de la UM Con motivo de la gran demanda del Servicio de InformaciГіn World Wide Web el Servicio de InformГЎtica ofrece a los Centros, Departamentos, Servicios, Grupos de trabajo e investigaciГіn universitarios la posibilidad de incorporar sus propias pГЎginas de Web al servidor central de la Universidad de Murcia. De esta manera, la unidad podrГЎ hacer pГєblica informaciГіn de interГ©s de la misma (trabajos, personas del grupo, seminarios, programas, etc.) para que sea visualizada desde toda la Red Internet. Este servicio se ofrece con carГЎcter genГ©rico a los distintas unidades, con el objeto de introducir informaciГіn de interГ©s del departamento o unidad, y en ningГєn caso se podrГЎ utilizar con fines no acadГ©micos o de I+D. Para poder hacer uso de este servicio es necesario solicitar el alta de una cuenta por centro, departamento, grupo en el servidor WWW del ГЃrea de TecnologГas de la InformaciГіn y las Comunicaciones Aplicadas (ATICA) www.um.es, para ello hay que leer normas del servicio WWW y rellenar y enviar el formulario de WWW que se encuentran en http://www.um.es/atica/web/ En breve se le comunicara que ha sido de alta y que ya puede utilizarlo. Esta cuenta permitirГЎ la ubicaciГіn de las paginas WWW que deberГЎn ser creadas con los medios propios de la secciГіn correspondiente. PГЎg. 7 CreaciГіn de pГЎginas Web HTML PГЎg. 8 CreaciГіn de pГЎginas Web ГЃrea de TecnologГas de la InformaciГіn y las Comunicaciones Aplicadas IntroducciГіn_____________________________________________________ Este manual estГЎ pensado para aprender los conceptos bГЎsicos necesarios para construir sus propias pГЎginas Web. Para quien quiera ampliar sus conocimientos se suministran tambiГ©n unas referencias de consulta a otros sitios del Web. En su confecciГіn se ha procurado seguir siempre un criterio eminentemente prГЎctico. Para mejor asimilar los conceptos tratados, se propone al final de cada apartado un ejemplo prГЎctico. Primeras herramientas: Para comenzar sГіlo son necesarios dos elementos: • Un editor de texto. Vale cualquiera, siempre que no formatee el texto. Por ello, los mГЎs adecuados son los mГЎs sencillos (como por ej., el block de notas de Windows 95). Si se utilizan procesadores como el Word, se deben guardar los ficheros como 'SГіlo Texto', para que no introduzca Гіrdenes de formateo, que pueden provocar errores al cargarlo en el navegador. Un visualizador o navegador del Web: Netscape, Microsoft Explorer, Mosaic, Opera, etc. • El editor de texto lo usaremos para ir escribiendo los documentos HTML, que serГЎ posteriormente interpretado por el navegador, con lo que iremos comprobando los cambios y aГ±adidos que vayamos efectuando. Existen ciertos programas que nos ayudan a automatizar este proceso, pero es muy conveniente comenzar a hacerlo de una manera manual, para comprender bien la estructura del lenguaje HTML MГ©todo de trabajo: Con el editor de texto crearemos un fichero con el nombre que queramos (p. ej. ejemplo1), pero que debe tener necesariamente la extensiГіn .html (o .htm si nuestro sistema operativo no soporta extensiones de mГЎs de tres letras). HabrГЎ un fichero distinto para cada apartado; conviene crear un directorio especГfico en su ordenador e irlos guardando en Г©l, para poder repasar lo aprendido, aparte de que pueden ser necesarios para ejecutar otros ejemplos prГЎcticos. El LENGUAJE HTML.___________________________________________ HTML es un lenguaje que se utiliza para la creaciГіn de pГЎginas en la WWW. Por pГЎgina entenderemos el documento que aparece en el visualizador o navegador. HTML se compone de una serie de comandos, que son interpretados por el visualizador, o programa que utilizamos para navegar por el WWW. En Гєltima instancia es el visualizador el que ejecuta todas las Гіrdenes contenidas en el cГіdigo HTML, de forma que un visualizador puede estar capacitado para unas prestaciones, pero no para otras. AsГ, podremos especificar que una pГЎgina tenga una imagen de fondo, o un texto parpadeando, pero si nuestro visualizador no estГЎ capacitado para esas funciones, no podremos verlas. En esta guГa se expondrГЎn los comandos fundamentales de HTML. PГЎg. 9 CreaciГіn de pГЎginas Web MI PRIMER DOCUMENTO HTML._______________________________ Siga las siguientes instrucciones atentamente; ellas le permitirГЎn crear un documento HTML en su ordenador. Le recomiendo que cree un directorio en su ordenador para almacenar las pГЎginas web que vaya haciendo al aprender; y que practique un tiempo antes de poner pГЎginas en Internet. 1. Abra el editor de textos: en Windows 95 abra el Block de Notas 2. Teclee lo siguiente: <HTML> <HEAD> <TITLE>Ejemplo 1 - Mi primera pagina Web</TITLE> </HEAD> <BODY> <CENTER><H1>Mi primera pagina Web</H1></CENTER> <HR> Esta es mi primera pagina, aunque todavГa es muy sencilla. <BR>Como el lenguaje HTML no es difГcil, pronto estarГ© en condiciones de hacer cosas mas interesantes. <P> AquГ va un segundo pГЎrrafo.</P> </BODY> </HTML> 3. Grabe este archivo con el nombre: ejemplo1.html 4. Abra el visualizador. No necesita conectarse a Internet para ver las pГЎginas en su ordenador. Puede trabajar en local. 5. Elija "Archivo/Abrir pГЎgina" en la barra de menГє del navegador. 6. Seleccione el archivo ejemplo1.html que acaba de crear, y debe de ver la siguiente pantalla: PГЎg. 10 CreaciГіn de pГЎginas Web ГЃrea de TecnologГas de la InformaciГіn y las Comunicaciones Aplicadas Las lГneas en blanco y las indentaciones del texto se han puesto para mayor claridad, pero no son necesarias. De hecho, podrГa estar todo en una sola lГnea. Lo importante es el orden correcto de las etiquetas. Por cierto, una etiqueta puede estar anidada dentro de otra. VГ©ase en el ejemplo cГіmo lo estГЎ la etiqueta <CENTER> dentro de la etiqueta <H1>. Es muy importante, en estos casos, que las etiquetas de inicio y de cierre vayan en el orden correcto, pues de lo contrario se producirГan errores. ВЎUsted ha creado su primer documento HTML!. CARACTERГЌSTICAS GENERALES DEL LENGUAJE HTML._________ Marcas y atributos. El lenguaje HTML se estructura utilizando marcas o etiquetas o comandos (a partir de ahora utilizaremos indistintamente uno de 3 tГ©rminos para denominar a los elementos que se estructura HTML). La forma general de una marca es la de un comando HTML encerrado entre dos signos de menor y mayor como a continuaciГіn se muestra: <marca [atributos]> ......................................[</marca>] El mecanismo de funcionamiento de estas marcas es muy sencillo. Cuando el visualizador encuentra el signo menor (<), examina todos los caracteres hasta que encuentra el final de la marca - el sГmbolo mayor (>). Entonces, interpreta el contenido de la marca, y aplica esa propiedad al texto que viene a continuaciГіn. Hay marcas que se aplican a todo el documento HTML, o sГіlo desde el punto en que son insertadas hasta el final del documento. Otras se aplican exclusivamente a un fragmento del texto. En ese caso, el final de la aplicaciГіn se especifica con la misma marca precedida de la barra inclinada hacia atrГЎs (/). Las marcas pueden contener de forma opcional u obligatoria, lo que se denominan atributos o modificadores. Los atributos matizan el significado de la marca, y que se expresan de la siguiente forma: PГЎg. 11 CreaciГіn de pГЎginas Web <marca atrib1=“valor1” atrib2=“valor2”..............> El valor de los atributos se expresan encerrados entre comillas. En la mayor parte de los visualizadores es posible omitir las comillas y colocar directamente el valor del atributo. Esta prГЎctica. a pesar de estar extendida, no es muy aconsejable ya que no estГЎ normalizada, y no esta soportada por la totalidad de los visualizadores. Algunos atributos sГіlo viene definidos por su nombre (no tienen valor); son los atributos llamados compactos. ConcatenaciГіn de marcas. Las marcas se pueden anidar o encadenar una a continuaciГіn de otra, de forma que se pueden aplicar simultГЎneamente varias propiedades a una misma porciГіn de documento. AsГ el texto encerrado en las marcas: <MARCA1><MARCA2> Texto </MARCA2></MARCA1> queda afectado tanto por las propiedades de la MARCA1 como por los de la MARCA2. Todas las marcas son independientes entre sГ, por los las siguientes lГneas de cГіdigo HTML, tiene efectos idГ©nticos, sean cuales sean las marcas concretas: <MARCA1><MARCA2> Texto </MARCA2></MARCA1> <MARCA1><MARCA2> Texto </MARCA1></MARCA2> <MARCA2><MARCA1> Texto </MARCA1></MARCA2> <MARCA2><MARCA1> Texto </MARCA2></MARCA1> A pesar de que son expresiones completamente idГ©nticas, es recomendable seguir el orden lГіgico de la concatenaciГіn, ya que esto facilita de forma sustancial la ediciГіn de documentos HTML. De las cuatro opciones anteriores, las correctas serГan la primera y la tercera. CUATRO NORMAS FUNDAMENTALES____________________________ HTML es simplemente texto Lo primero es saber que un documento HTML es un archivo de texto simple, luego, se puede editar con cualquier editor de texto sencillo, como por ejemplo el Block de Notas de Windows 95/98/NT. PГЎg. 12 CreaciГіn de pГЎginas Web ГЃrea de TecnologГas de la InformaciГіn y las Comunicaciones Aplicadas Igualdad de mayГєsculas y minГєsculas. HTML no distingue entre mayГєsculas y minГєsculas en la especificaciГіn de marcas y sus atributos. Sin embargo, por legibilidad, es aconsejable codificar tanto marcas como atributos en mayГєsculas. No importan los tabuladores, ni los saltos de lГnea Los visualizadores no toman en cuenta las tabulaciones, los saltos de lГnea ni los espacios en blanco extra. Esto tiene ventajas y desventajas. La principal ventaja es que permite obtener resultados uniformes y de buena presentaciГіn de manera bastante fГЎcil. La principal desventaja es que un documento HTML, por lo menos se debe usar las marcas <P>...</P> o <BR> para evitar que quede todo el texto en una sola lГnea. Caracteres especiales En HTML existen algunos caracteres que son especiales porque juegan un papel dentro del mecanismo del funcionamiento de HTML, como sucede con los sГmbolos mayor que (>) y menor que (<), y otros porque en los primeros tiempos de HTML, no formaban parte del juego de caracteres internacionales del alfabeto, como sucede con los acentos. Sea por los motivos que fuere, el caso es que existen ciertos sГmbolos que no pueden escribirse directamente, sino que deben sustituirse por una cadena de caracteres que el visualizador interpretarГЎ de forma correcta. Estas cadenas de caracteres comienzan siempre por el sГmbolo (&) seguido de una combinaciГіn de caracteres alfabГ©ticos que tienen un significado especial en HTML. En la siguiente tabla se muestra cГіmo escribir algunos de estos caracteres: CarГЎcter especial Los acentos SГmbolo menor que (<) SГmbolo mayor que (>) La eГ±e Espacios en blanco TranscripciГіn HTML Comentario &<vocal a acentuar> acute; En la actualidad la mayorГa de los browsers los soportan <: > ñ En la actualidad la mayorГa de los browsers la soportan (non breaking HTML sГіlo reconoce un space) espacio en blanco entre palabras De manera mГЎs general, para representar sГmbolos reservados o sГmbolos particulares, se puede utilizar el cГіdigo ASCII del sГmbolo mediante la sintaxis siguiente: PГЎg. 13 CreaciГіn de pГЎginas Web &#cГіdigo_ASCII; ESTRUCTURA DE UN DOCUMENTO HTML._______________________ Un documento HTML, no es mГЎs que el texto definido entre las marcas: <HTML> ..................... </HTML> Un documento HTML siempre se compone de las siguientes 2 partes: <HTML> <HEAD> Cabecera del documento </HEAD> <BODY> Contenido del documento </BODY> </HTML> • Cabecera: Se inicia mediante el comando <HEAD> y se termina con </HEAD>. Dentro de la cabecera hay informaciГіn del documento, que no se ve en la pantalla principal, y que precisa las caracterГsticas del documento, principalmente el tГtulo del documento. El tГtulo del documento se declara entre las etiquetas <TITLE> y </TITLE>. El tГtulo debe ser breve y descriptivo de su contenido, pues serГЎ lo que vean los demГЎs cuando aГ±adan nuestra pГЎgina a su bookmark (o libro de direcciones favoritas). Cuerpo: se inicia mediante el comando <BODY> y se termina con el comando </BODY>. Este comando acepta numerosos modificadores. Dentro del cuerpo del documento se incluye cualquier carГЎcter imprimible. • En la prГЎctica algunos visualizadores no necesitan las etiquetas de comienzo y cierre de <HTML>, <HEAD>, y <BODY> para interpretar un documento HTML. Sin embargo, cuando diseГ±emos un pГЎgina Web debemos tener en cuenta a la mayorГa de usuarios posibles, por lo que es muy recomendable incluir estas marcas. COMANDOS BГЃSICOS DE HTML_____________________________ A continuaciГіn se describen las marcas bГЎsicas de HTML que se pueden incluir en el cuerpo de un documento HTML. PГЎg. 14 CreaciГіn de pГЎginas Web ГЃrea de TecnologГas de la InformaciГіn y las Comunicaciones Aplicadas DefiniciГіn de pГЎrrafos: P La marca <P> sirve para separar pГЎrrafos en HTML. AdemГЎs de introducir un retorno de carro, fuerza un segundo retorno de carro para dejar una lГnea en blanco entre un pГЎrrafo y el siguiente. De esta manera los pГЎrrafos quedan mГЎs espaciados y el texto se vuelve mГЎs legible En esta marca la etiqueta de fin es opcional. Por defecto, el pГЎrrafo de un documento HTML estГЎ justificado a la izquierda. Pero podemos modificar la alineaciГіn horizontal de un pГЎrrafo mediante el atributo ALIGN de la marca <P>, que puede tomar los valores siguientes. • LEFT: el pГЎrrafo es justificado a la izquierda. Valor por defecto. • CENTER: el pГЎrrafo es centrado. • RIGHT: el pГЎrrafo es justificado a la derecha. Ruptura de lГneas: BR. La marca <BR> introduce un retorno de carro (o salto de lГnea) en el punto del documento en el que es colocada. Es equivalente al punto y aparte de un texto normal. Esta marca es vacГa de manera que no necesita de la etiqueta de fin de marca. Titulos de encabezamiento HTML dispone de seis cabeceras, o tipos de letra predefinidos de distinto tamaГ±o, que se utilizan para marcar los tГtulos o resaltes en las pГЎginas. Se activan con el comando <Hn> y se desactivan con </Hn>, donde n es un nГєmero de 1 a 6. siendo el nГєmero indicativo del tamaГ±o. El tamaГ±o mayor es el correspondiente al nГєmero 1. <H1>Nivel de encabezado 1</H1> <H2>Nivel de encabezado 2</H2> <H3>Nivel de encabezado 3</H3> <H4>Nivel de encabezado 4</H4> <H5>Nivel de encabezado 5</H5> <H6>Nivel de encabezado 6</H6> Puede experimentar en el ejemplo anterior, cambiando el nГєmero para comprobar el efecto que se logra. Los tГtulos de encabezado requieren la marca de fin, y siempre provocan un salto de lГnea, aunque no se le indique. PГЎg. 15 CreaciГіn de pГЎginas Web Dando estilo al texto Las marcas de estilo de texto especifican el tipo de letra (negrita, cursiva, ..), tamaГ±o, color que se desea que aparezca el texto. Tipos de letras Algunas de las marcas que permiten especificar la tipografГa de los caracteres son las siguientes: <B>Negrita (Bold)</B> <I>Cursiva (Italic)</I> <BLINK>Parpadeante (Blink)</BLINK> <TT>Tamano fijo (TypeWriter)</TT> <EM>Г©nfasis (Emphasis)</EM> <STRONG>Gran Г©nfasis (Strong)</STRONG> <U>Subrayado (Underline)</U> Todas estas marcas requieren etiquetas de comienzo y fin, y se pueden anidar. TamaГ±o del texto. Para modificar el tamaГ±o se utiliza el atributo SIZE de la marca <FONT>, de la manera siguiente: <FONT SIZE="tamaГ±o">Texto</FONT> El comando <FONT> requiere la etiqueta de cierre. HTML define siete tamaГ±os de letra distintos, siendo el tamaГ±o 3 el que se adopta por defecto. Sin embargo, la mayorГa de los navegadores permiten establecer cuГЎl es la correspondencia real del tamaГ±o 3. AsГ, se puede hacer que el tamaГ±o 3 corresponda a una fuente Arial de 16, o a una Times de 8. Existen dos formas de establecer el tamaГ±o de un trozo de texto. • TamaГ±o de texto absoluto. <FONT SIZE=”argumento”>Texto</FONT> donde argumento es un nГєmero entre 1 y 7 PГЎg. 16 CreaciГіn de pГЎginas Web ГЃrea de TecnologГas de la InformaciГіn y las Comunicaciones Aplicadas • TamaГ±o de letra relativos. <FONT SIZE=”argumento”>Texto</FONT> donde argumento es una cadena de caracteres que nos indica, con un signo + Гі -, el nГєmero de veces que esa fuente va ser mayor o menor que el tamaГ±o de la fuente por defecto El uso de tamaГ±os relativos nos permite olvidarnos de cual es el tamaГ±o de letra que se estГЎ utilizando en el momento actual, por lo que, en general, serГЎ preferible a utilizar tamaГ±os de letra absolutos. Si queremos modificar el tamaГ±o de todo el texto del documento, una forma de hacerlo serГa englobar todo el cuerpo del documento en una etiqueta con el tamaГ±o de letra que queremos utilizar. AsГ escribiremos algo parecido a lo que sigue: <HTML> <HEAD> ........... </HEAD> <BODY><FONT SIZE=“4”> ........ (contenido del documento) ....... </FONT></BODY> </HTML> Sin embargo, hay otra forma de hacerlo mГЎs elegante y legible, utilizando la siguiente etiqueta: <BASEFONT SIZE="tamaГ±o"> Este etiqueta puede situarse en cualquier lugar del documento. Sin embargo, como se trata de una etiqueta que afecta a todo el documento, para mantener la legibilidad lo mГЎs lГіgico es colocarlo en la cabecera. Si fijamos un tamaГ±o de letra bГЎsico distinto del 3, debemos tener en cuenta que es posible que alguno de los tamaГ±os relativos no pueda llevarse a cabo, puesto que se sale de los lГmites especificados. Colores del texto. Para dar color a un texto se utiliza el comando siguiente: <FONT COLOR="color">Texto</FONT> En un principio la forma de especificar un color en HTML, era mediante el formato hexadecimal. ConsistГa en tres nГєmeros hexadecimales (nГєmeros expresados en base 16) de PГЎg. 17 CreaciГіn de pГЎginas Web dos dГgitos cada uno. Con un nГєmero hexadecimal de dos dГgitos podemos expresar hasta 256 valores distintos. El primer nГєmero hexadecimal nos va a indicar la cantidad de rojo que tiene nuestro color, el segundo la cantidad de verde, y el tercero la cantidad de azul (el blanco serГЎ FFFFFF, el negro 000000). Esta forma de definir los colores como combinaciГіn de los colores rojo, verde, y azul se denomina RGB (red - green - blue). Afortunadamente, la mayorГa de los visualizadores, al menos en sus Гєltimas versiones, admiten otra forma de insertar colores. En lugar de expresarlos, en formato hexadecimal, se expresan como cadena de caracteres. Esta cadena es el nombre del color en inglГ©s. Para dar color a todo el texto del documento podemos hacerlo con: <BODY TEXT=“blue”> Para especificar el color de fondo del documento deberemos utilizar: <BODY BGCOLOR=“blue”> Listas Las listas en HTML proporcionan una forma de clasificar la informaciГіn, y hacer que Г©sta sea mГЎs inteligible por parte del visitante de las pГЎginas. Listas ordenadas: OL. TambiГ©n llamadas listas numeradas son aquellas en las que cada elemento tiene delante un nГєmero que indica el orden del elemento dentro del conjunto de la lista. La marca para crear una lista ordenada es <OL> .... </OL>. Son obligatorias las etiquetas de comienzo y fin de estas marcas. Cada elemento de la lista ordenada se identifica escribiГ©ndolo dentro de la marca <LI> .... </LI>. La etiqueta de fin puede ser omitida. Con la marca LI no es necesario introducir un retorno de carro detrГЎs de cada elemento de la lista. Es posible especificar el tipo de numeraciГіn que se darГЎ (nГєmeros arГЎbigos, nГєmeros romanos, letras, etc.), por defecto se sigue la numeraciГіn ГЎrabe. Las listas numeradas pueden ser anidadas una dentro de otra. PГЎg. 18 CreaciГіn de pГЎginas Web ГЃrea de TecnologГas de la InformaciГіn y las Comunicaciones Aplicadas Listas desordenadas: UL. TambiГ©n llamadas listas no numeradas son listas en las que no es necesario numerar de alguna manera los elementos que la componen, sino que cada elemento tiene delante un sГmbolo (un punto, un cuadrado, etc..). La forma de especificar una lista desordenada es mediante la marca <UL>. Las etiquetas de comienzo y fin de esta marca son obligatorias. Cada elemento de la lista se identifica mediante la marca <LI>. La etiqueta de fin para la marca <LI> se puede omitir TambiГ©n es posible en las listas desordenadas especificar el sГmbolo que va a aparecer delante de cada elemento de la lista. Las listas desordenadas tambiГ©n pueden ser anidadas una dentro de otra. Listas de definiciГіn: DL. A diferencia de los dos tipos anteriores de listas, las listas de definiciГіn, se utilizan para presentar la informaciГіn sin marcas, ni nГєmeros, sino que utiliza los sangrados de los pГЎrrafos. Las listas de definiciГіn estГЎn constituidas por tГ©rminos y su subsiguiente definiciГіn. La forma de implementar las listas de definiciГіn es con la marca <DL> de la siguiente forma: <DL> <DT> Nombre del termino <DD> DefiniciГіn del tГ©rmino </DL> Cada tГ©rmino de la lista de definiciГіn se indica con la marca <DT> y no sangrarГЎ, mientras que la descripciГіn del tГ©rmino se indica con la marca <DD> y sangrarГЎ hacia la derecha para resaltarla del tГ©rmino. Antes y despuГ©s de la descripciГіn de cada palabra clave, las listas de definiciГіn incorporan un retorno de carro, Las listas de definiciГіn tambiГ©n pueden anidarse. PГЎg. 19 CreaciГіn de pГЎginas Web Texto preformateado: PRE. El hecho de que HTML ignore los retornos de carro a la hora de mostrar un texto no es un comportamiento arbitrario, sino que es la forma que tenemos de que, independientemente de la ventana del visualizador, nuestro pГЎrrafo quede convenientemente justificado Sin embargo, es posible que en alguna ocasiГіn queramos que el texto aparezca en el visualizador tal y como lo hemos introducido, respetando los retornos de carro e incluso los espacios que podamos haber dejado entre caracteres. Para ello podemos utilizar la marca <PRE> y englobar en ella todo el texto del documento. La marca <PRE> respeta tanto los retornos de carro como los espacios en blanco del archivo original, y la letra aparece como tipo de letra de espacio no proporcional (El tipo de letra usado por el texto preformateado es el mismo que el de <TT> ... </TT>), y no con el tipo de letra habitual del visualizador. Esta marca permite mostrar el texto preformateado tal cual. AdemГЎs, en el texto preformateado no se interpretan los caracteres especiales HTML: <, > y &. Esta marca requiere de las etiquetas de comienzo y fin. Centrando texto. Para centrar una parte del documento, se delimita lo que se desea centrar mediante el comando <CENTER> ... </CENTER>. LГneas horizontales. La marca <HR> permite trazar una lГneas horizontales para separar distintas secciones de una pГЎgina HTML Por defecto, las lГneas horizontales van de la parte izquierda de la ventana del visualizador a la derecha.. Por otro lado tienen la parte superior oscura y la inferior clara, por lo que dan una sensaciГіn de relieve. Esta marca sГіlo requiere la etiqueta de comienzo. Esta etiqueta tiene varios modificadores que permite cambiar el aspecto de la lГnea horizontal (ancho, longitud,...). PГЎg. 20 CreaciГіn de pГЎginas Web ГЃrea de TecnologГas de la InformaciГіn y las Comunicaciones Aplicadas Comentarios no visibles en la pantalla A veces es muy Гєtil escribir comentarios en el documento HTML sobre el cГіdigo que escribimos, que nos pueden servir para recordar posteriormente sobre lo que hicimos, y que no queremos que se vean en pantalla. Esto se consigue encerrando dichos comentarios entre estos dos sГmbolos: <!-- y --> Ejemplo: <!-- Esto es un comentario al cГіdigo que no se verГЎ en pantalla --> PГЎg. 21 CreaciГіn de pГЎginas Web Ejemplo prГЎctico nВє2 En el editor de textos copiamos: <HTML> <HEAD> <TITLE>Ejemplo 2 - Comandos bГЎsicos</TITLE> </HEAD> <BODY> <CENTER><H1>Comandos básicos</H1></CENTER> <!-- Este documento contiene todo lo que he aprendido hasta ahora sobre HTML --> <H2>PГЎrrafos</H2> <P>Este es mi primer pГЎrrafo del ejemplo 2</P> <P>Este es mi segundo parrГЎfo. AquГ hay una ruptura de lГnea<BR>de texto</P> <HR> <H2>Listas</H2> <H3>Ordenadas</H3> <P>La <FONT SIZE="+1"><I>musica</I></FONT> que mГЎs me gusta es <I> (en orden de preferencia): </I></P> <OL> <LI>El rock</LI> <LI>El jazz <!-- la marca LI no necesita de la etiqueta de cierre --> <LI>La musica clasica </OL> <H3>Desordenadas</H3> <P>Sin un orden particular, mis <FONT COLOR="green"><B> aficiones </B></FONT> son las siguientes:</P> <UL> <LI>El cine <LI>El deporte <LI>NataciГіn <LI>Baloncesto </UL> <H2>De definiciГіn</H2> <DL> <DT>Descripcion</DT> <DD>Es nombrar las propiedades de algo <DT>Lista descriptiva</DT> <DD>Es nombrar las propiedades de varios objetos </DL> <HR> <CENTER>TambiГ©n sabemos centrar el texto</CENTER> <PRE> y escribir preformateado </PRE> <BLINK>y a escribir texto parpadeante</BLINK> <HR> </BODY> </HTML> PГЎg. 22 CreaciГіn de pГЎginas Web ГЃrea de TecnologГas de la InformaciГіn y las Comunicaciones Aplicadas Guardamos el fichero de texto con el nombre ejemplo2.html y lo abrimos en el navegador, y nos deberГЎ aparecer las siguiente pantalla: ENLACES: A._______________________________________________ La clave de la facilidad de uso de los documentos HTML, reside fundamentalmente en los enlaces. Los enlaces (o links) proporciona al que visita las pГЎginas un mecanismo muy sencillo para moverse entre distintos documentos, permitiГ©ndole moverse en aquellos aspectos que considere mГЎs importantes, mientras que desde el punto de vista del que crea las pГЎginas PГЎg. 23 CreaciГіn de pГЎginas Web permite distribuir de forma transparente al visitante el lugar o lugares en los que se van a almacenar los distintos documentos. Para definir enlaces hipertexto se utiliza la marca <A> de la manera siguiente: <A HREF=”direccion”>Texto del enlace</A> donde: ‰ direccion: es el destino del enlace. ‰ texto del enlace: es el texto indicativo del enlace que aparece en la pantalla normalmente con color especial y subrayado. <A> requiere de la marca de fin. Vamos a distinguir tres tipos de enlaces: 1. Enlaces a otras zonas de la misma pГЎgina 2. Enlaces a otras pГЎginas. 3. Enlaces a otras zonas de otras pГЎginas. Enlaces a otras zonas de la misma pГЎgina A veces, en el caso de documentos (o pГЎginas) muy extensos, nos puede interesar dar un salto desde una posiciГіn a otra determinada. AsГ es posible hacer enlaces que lleven al usuario de una parte del documento a otra dentro del mismo documento con solo hacer click. A este tipo de enlaces los llamaremos enlaces locales. Estos enlaces constan de dos objetos: • El enlace: Corresponde a la zona en la cual el usuario harГЎ click, para viajar a otra parte del documento. Esta zona aparece subrayada en el documento. Un enlace local se crea delimitando la zona con el comando <A href="#nombre"> ... </A>, en que nombre es la etiqueta que se estГЎ referenciando. • El nombre enlazado o referenciado Corresponde a la zona del documento a la cual el usuario llegarГЎ al hacer click en la referencia correspondiente. Un nombre local se crea delimitando la zona con el comando <A NAME="nombre"> ... </A>, en que nombre es la etiqueta que asignamos a esta zona. PГЎg. 24 CreaciГіn de pГЎginas Web ГЃrea de TecnologГas de la InformaciГіn y las Comunicaciones Aplicadas Ejemplo prГЎctico nВє 3 de enlaces locales <HTML> <HEAD> <TITLE>Ejemplo 3 - Enlaces locales</TITLE> </HEAD> <BODY> <H2>Enlaces locales</H2> <H3><A NAME="indice">Indice</A></H3> <UL> <LI><A HREF="#uno">SecciГіn uno</A> <LI><A HREF="#dos">SecciГіn dos</A> <LI><A HREF="#tres">SecciГіn tres</A> <LI><A HREF="#cuatro">SecciГіn cuatro</A> <LI><A HREF="#cinco">SecciГіn cinco</A> <LI><A HREF="#seis">SecciГіn seis</A> <LI><A HREF="#siete">SecciГіn siete</A> <LI><A HREF="#ocho">SecciГіn ocho</A> </UL> <H3><A NAME="uno">SecciГіn uno</A></H3> <P>Esta es la sección 1 de la pГЎgina de enlaces locales</P> <P>Click aqui para <A href="#indice">volver al Гndice</A> <H3><A NAME="dos">SecciГіn dos</A></H3> <P>Esta es la sección 2 de la pГЎgina de enlaces locales</P> <P>Click aqui para <A href="#indice">volver al Гndice</A> <H3><A NAME="tres">SecciГіn tres</A></H3> <P>Esta es la sección 3 de la pГЎgina de enlaces locales</P> <P>Click aqui para <A href="#indice">volver al Гndice</A> <H3><A NAME="cuatro">SecciГіn cuatro</A></H3> <P>Esta es la sección 4 de la pГЎgina de enlaces locales</P> <P>Click aqui para <A href="#indice">volver al Гndice</A> <H3><A NAME="cinco">SecciГіn cinco</A></H3> <P>Esta es la sección 5 de la pГЎgina de enlaces locales</P> <P>Click aqui para <A href="#indice">volver al Гndice</A> <H3><A NAME="seis">SecciГіn seis</A></H3> <P>Esta es la sección 6 de la pГЎgina de enlaces locales</P> <P>Click aqui para <A href="#indice">volver al Гndice</A> <H3><A NAME="siete">SecciГіn siete</A></H3> <P>Esta es la sección 7 de la pГЎgina de enlaces locales</P> <P>Click aqui para <A href="#indice">volver al Гndice</A> <H3><A NAME="ocho">SecciГіn ocho</A></H3> <P>Esta es la sección 8 de la pГЎgina de enlaces locales</P> <P>Click aqui para <A href="#indice">volver al Гndice</A> </BODY> </HTML> Guardamos el fichero de texto con el nombre ejemplo3.html y lo abrimos con el navegador, y debe aparecer la siguiente pantalla: PГЎg. 25 CreaciГіn de pГЎginas Web PГЎg. 26 CreaciГіn de pГЎginas Web ГЃrea de TecnologГas de la InformaciГіn y las Comunicaciones Aplicadas Como vemos, las referencias locales son muy Гєtiles para crear Гndices al comienzo del documento. Enlaces a otras pГЎginas Para enlazar a otro documento, es necesario conocer la ubicaciГіn exacta del documento que se referenciarГЎ. Una ubicaciГіn, puede ser referenciada en forma relativa o absoluta • UbicaciГіn relativa: Se indica especificando la posiciГіn del documento en la estructura de subdirectorios a partir de la ubicaciГіn del documento actual. SГіlo se puede usar para documentos ubicados en el mismo ordenador. Una referencia relativa a otro documento se hace usando el comando: <A HREF="ubicaciГіn"> ... </A> • UbicaciГіn absoluta: Se indica especificando el URL (uniform resurce locator) de la pГЎgina que se estГЎ referenciando. Los URL son una manera universal de especificar una direcciГіn. La forma mГЎs bГЎsica de referenciar un hypertexto es usar el comando: <A href="http://ordenador/directorio/archivo"> ... El ordenador indica la mГЎquina donde se encuentra el documento. El directorio y archivo indican su posiciГіn dentro de ese ordenador. Los URL tienen muchas formas distintas para referenciar distintos objetos. PГЎg. 27 CreaciГіn de pГЎginas Web Ejemplo prГЎctico nВЄ 4 <HTML> <HEAD> <TITLE>Ejemplo 4 - Enlaces a otras páginas</TITLE> </HEAD> <BODY> <H1>Enlaces a otras páginas</H1> <H2>Referencias relativas</H2> <P>Se puede referenciar, por ejemplo, a un archivo localizado en el mismo directorio, como por ejemplo, al <A href="ejemplo1.html">ejemplo nГєmero 1</A>. TambiГ©n a un archivo localizado en otro directorio, por ejemplo, esta <A HREF="../guiahtml.html">guia HTML</a></P> <H2>Referencias absolutas</H2> <H3>Algunos servicios WWW en EspaГ±a</H3> <P>La <A HREF="http://www.um.es/~biblio/">biblioteca de la Universidad de Murcia</A> que permite acceso al catalogo de la biblioteca. TambiГ©n estГЎ el servidor WWW de <A HREF="http://www.rediris.es/">RedIris</A> y el servidor de <A HREF="http://www.boe.es/">BOE</A> para leer consultar de BOEs </P> <H3>Algunos servicios en el extranjero</H3> <P>Para informarse de la actualidad mundial, se puede acceder al servicio <A HREF="http://www.cnn.com/">CNN</A>. Para los amantes de la mГєsica se encuentra el servidor oficial de la <A HREF="http://mtv.com/">MTV</A> y para localizar distintos tipos de informaciГіn estГЎ <A HREF="http://www.yahoo.com/">Yahoo!</A>. </BODY> </HTML> Guardamos el fichero de texto con el nombre ejemplo4.html y lo abrimos en el navegador, y debe aparecer la siguiente pantalla: PГЎg. 28 CreaciГіn de pГЎginas Web ГЃrea de TecnologГas de la InformaciГіn y las Comunicaciones Aplicadas Enlaces a una zona de otra pГЎgina Para este tipo de enlaces se utiliza una mezcla de las dos formas anteriores. Se indica el URL de la pГЎgina a referenciar, luego un signo # y luego el nombre de la zona a referenciar. Ejemplo prГЎctico nВє5 <HTML> <HEAD> <TITLE>Ejemplo 5- Enlaces a zonas de otras pГЎginas</TITLE> </HEAD> <BODY> <H1>Enlaces a zonas de otras pГЎginas</H1> <P>Enlazamos a la <A HREF="ejemplo3.html#uno">la seccion 1 del ejemplo 3</A>.</P> <P>Enlazamos a la <A HREF="ejemplo3.html#cinco">la sección 5 del ejemplo 3</A>.</P> </BODY> </HTML> Guardamos el fichero de texto con el nombre ejemplo5.html y lo abrimos con en el navegador, y debe aparecer la siguiente pantalla: IMГЃGENES__________________________________________________ Las imГЎgenes son un elemento esencial para diseГ±ar pГЎginas atractivas. No obstante, un excesivo nГєmero de imГЎgenes en una pГЎgina pueden hacer ralentizar el proceso de visualizaciГіn (las imГЎgenes son las partes de las pГЎginas que mГЎs espacio ocupan, por lo que su transferencia requiere mГЎs tiempo que la del texto). Es importante conseguir un PГЎg. 29 CreaciГіn de pГЎginas Web compromiso entre una pГЎgina atractiva (lo que lleva incluir grГЎficos), y una pГЎgina que pueda cargarse en un tiempo razonable Principales formatos grГЎficos en Internet. Existen una gran cantidad de formatos grГЎficos en el mundo de los ordenadores, cada uno de ellos con sus ventajas e inconvenientes. Sin embargo, a la hora de publicar en Internet, solamente debemos tener en cuenta dos formatos muy especГficos: el GIF y el JPEG. Su elecciГіn no es en absoluto un capricho, ademГЎs de la alta resoluciГіn que consiguen, se trata como veremos, de dos formatos que comprimen el tamaГ±o de las imГЎgenes, por lo que Г©stas pueden transmitirse mГЎs rГЎpidamente por Internet. Para crear y manipular imГЎgenes hay que utilizar un editor de imГЎgenes, entre los mГЎs conocidos se encuentran: Paint Shop Pro, Gif Construction Set, y Graphic Workshop. Formato GIF. Las siglas GIF provienen del inglГ©s Graphics Interchange Format o formato de intercambio de grГЎficos. Est formato fue desarrollado por CompuServe para proporcionar un mecanismo de transmisiГіn de archivos de imГЎgenes mediante lГneas telefГіnicas. Este mecanismo consiste en comprimir las imГЎgenes para una transmisiГіn mГЎs rГЎpida en un medio de baja capacidad como son los hilos telefГіnicos. Las imГЎgenes en formato GIF estГЎn limitadas a 256 colores simultГЎneos. Una propiedad interesante del formato GIF es la de poder seleccionar un color “transparente”. AsГ, cuando la imagen en cuestiГіn es mostrada en un visualizador, la zona de la imagen con el color transparente toma el color del fondo del documento. Otra propiedad interesante del formato GIF, es la poder crear grГЎficos animados, el formato de este tipo de imГЎgenes se le denomina GIF 89. Los archivos de imГЎgenes en este formato tienen asociados la extensiГіn .gif. Formato JPEG. JPEG son las iniciales de Joint Photographic Expert Group (Grupo de Expertos FotogrГЎficos Reunidos). Al igual que el formato GIF, comprime las imГЎgenes para una transmisiГіn mГЎs rГЎpida, aunque difiere en el algoritmo de compresiГіn. Mientras que con el formato GIF la comprensiГіn de un archivo de imГЎgenes viene determinada, JPEG nos permite especificar la relaciГіn de compresiГіn deseada, por lo que podemos variar el tamaГ±o del archivo. Naturalmente, a mayor relaciГіn de compresiГіn, menor PГЎg. 30 CreaciГіn de pГЎginas Web ГЃrea de TecnologГas de la InformaciГіn y las Comunicaciones Aplicadas tamaГ±o y peor calidad en la imagen final. Disminuyendo la compresiГіn obtenemos imГЎgenes de mayor calidad pero tambiГ©n de mayor tamaГ±o. No debemos obsesionarnos con la calidad de las imГЎgenes. Hay que tener presente que Internet es en ocasiones un medio de transmisiГіn bastante lento, por lo que a veces es preferible perder algo de calidad en las imГЎgenes antes de aburrir al visitante con nuestros documentos. Los archivos de imГЎgenes en este formato tienen asociado la extensiГіn .jpg. InclusiГіn de imГЎgenes La etiqueta que se utiliza para la inclusiГіn de imГЎgenes en una pГЎgina Web es la siguiente: <IMG SRC=”imagen.jpg”></IMG> donde imagen.jpg es un archivo de imagen TamaГ±o de las imГЎgenes. Si no especificamos nada mГЎs, las imГЎgenes aparecerГЎn en el navegador con el tamaГ±o que tienen originalmente. Para modificar el tamaГ±o de las imГЎgenes se utilizan los siguientes modificadores en la etiqueta <IMG>: • WIDTH: especifica la anchura en pixels de la imagen. • HEIGTH: especifica el nГєmero de pixels que tendrГЎ de alto la imagen. Escalado de imГЎgenes. Con el uso de loa modificadores HEIGHT y WIDTH podemos ampliar, y reducir las imГЎgenes sin deformarlas, es decir, escalarlas. Una manera cГіmoda de hacerlo es solamente especificar una de las dos dimensiones, se asume que la reducciГіn o la ampliaciГіn es proporcional a la otra. Bordes de la imagen. Mediante el modificador BORDER se puede aГ±adir bordes a nuestras imГЎgenes. PГЎg. 31 CreaciГіn de pГЎginas Web AlineaciГіn de texto con las imГЎgenes. La alineaciГіn del texto con las imГЎgenes se realiza mediante el modificador ALIGN. Los valores que este modificador puede tomar son: TOP, TEXTOP, CENTER, ABSCENTER, MIDDLE, ABSMIDDLE, BOTTOM, LEFT, y RIGTH. AdemГЎs podemos especificar la distancia que queremos establecer entre el grГЎfico y el texto. Si este parГЎmetro no se establece, el texto es situado justo a continuaciГіn de la imagen. Para introducir espacios horizontales y verticales a continuaciГіn de la imagen se utilizan los modificadores VSPACE y HSPACE. ImГЎgenes con texto alternativo. Los visualizadores tienen la opciГіn de no mostrar las imГЎgenes, en un intento de acelerar el acceso a las pГЎginas. Muchas veces, las imГЎgenes incluidas en una pГЎgina son fundamentales para comprender la informaciГіn que se ofrece. Por ejemplo, una pГЎgina destinada a alumnos universitarios de asignaturas de estadГstica o matemГЎticas puede contener imГЎgenes de fГіrmulas matemГЎticas. Para estos casos se puede aГ±adir a la imagen un texto ALTernativo, que dГ© una idea del contenido de la imagen. Para aГ±adir un texto alternativo, se utiliza la orden como se muestra a continuaciГіn: <IMG SRC="nombre_imagen" ALT="Texto_alternativo"> Uso de imГЎgenes como enlaces. Para utilizar una imagen como enlace a otra parte de la pГЎgina o a otra pГЎgina, simplemente hay que introducirlas dentro de la etiqueta <A HREF> de la siguiente manera: <A HREF=”enlace”> <IMG SRC=”imagen”> </A> ImГЎgenes como fondo de un documento. Un efecto muy utilizado es el uso de imГЎgenes como fondo de un documento HTML. La manera de hacerlo es con el atributo BACKGROUND de la marca <BODY>. La imagen de fondo en general serГЎ mГЎs pequeГ±a que el ГЎrea de documento del navegador. Lo que hace entonces el navegador es repetir, partiendo de la esquina superior izquierda, la imagen que hemos elegido como fondo del documento. A la hora de elegir la imagen de fondo, es preciso tener en cuenta que el texto del documento debe ser legible por encima de la imagen, por lo que hay que evitar colocar imГЎgenes con colores demasiado fuertes. PГЎg. 32 CreaciГіn de pГЎginas Web ГЃrea de TecnologГas de la InformaciГіn y las Comunicaciones Aplicadas Mapas sensibles. Los mapas sensibles o mapas de imГЎgenes es un mapa que permite realizar diferentes hiperenlaces en funciГіn de la “zona” de la imagen en que se pulse. Constituyen una herramienta de gran potencia, aunque son algo complicados de construir y mantener. Los mapas sensibles estГЎn compuestos de dos elementos fundamentales: la imagen del mapa y los enlaces de cada zona del mapa. Para crear un mapa debemos tener ficheros distintos. Uno serГЎ el de la imagen propiamente dicha y otro serГЎ un fichero de texto que tenga la extensiГіn .map donde indicaremos las coordenadas de la imagen que nos enlazarГЎn con cada pГЎgina del hiperenlace. Por Гєltimo, necesitamos un programa externo (CGI) que pueda procesar el fichero .map. El contenido del fichero .map, que indica las coordenadas de nuestro mapa, debe tener la siguiente estructura: • • default URL por defecto si se pulsa en una zona sin hiperenlace. figura URL de hiperenlaces, coordenadas. La figura puede ser: Ж’ circle define una zona circular, el primer par de coordenadas indica el centro del cГrculo y el segundo la situaciГіn de un punto de la circunferencia. Ж’ rect define una zona rectangular, el primer par de coordenadas indica el vГ©rtice de la esquina superior izquierda y el segundo el vГ©rtice de la esquina inferior derecha. Ж’ point define un punto. El par de coordenadas indica la situaciГіn del punto. Una vez creado el fichero .map, la instrucciГіn a incluir en nuestra pГЎgina Web para activar el mapa serГa: <A HREF=”cgi-bin/imagemap/mipagina/mapa.map”> <IMG SRC=”imagen.gif” ISMAP> </A> donde: • cgi-bin/imagemap: Es el nombre del programa que procesa el mapa • mipagina/mapa.map: Es el camino y nombre del fichero .map • imagen.gif: Es el nombre del fichero de imagen • ISMAP: Indica que la imagen es considerada un mapa En los nuevos navegadores, existen unas etiquetas nuevas para crear mapas, que no necesitan de la ayuda auxiliar de un programa externo y son: • <MAP>…</MAP> Indica al mapa, su parГЎmetro es: name= nombre, damos el nombre de nuestro mapa con la extensiГіn .map • <AREA> Define las ГЎreas sensibles de la imagen con los siguientes parГЎmetros: Ж’ shape=”tipo” (Forma) Indica el tipo de ГЎrea a definir, hay 3 tipos: Ж’ rect (ГЃrea rectangular) se tienen que especificar las coordenadas de la esquina superior izquierda y de la esquina inferior derecha. PГЎg. 33 CreaciГіn de pГЎginas Web Ж’ Ж’ poly (PolГgono) se tienen que especificar las coordenadas de todos los vГ©rtices del polГgono. El visualizador se encargarГЎ de cerrar la figura Ж’ circle (CГrculo) se tienen que especificar en primer lugar, las coordenadas del centro del cГrculo y, a continuaciГіn, el valor del radio (en puntos) coords=”coordenadas” (Coordenadas) Indica las coordenadas de la figura, es decir, dГіnde estГЎ cada una de esas ГЎreas. href=”URL” (DirecciГіn) Indica la direcciГіn a la que se accede si se pulsa en la zona delimitada por el ГЎrea indicada. Ж’ Si dos ГЎreas se superponen, se ejecutarГЎ la que se encuentre en primer lugar en la definiciГіn del mapa. Es importante definir una Гєltima ГЎrea que abarque la totalidad del grГЎfico para direccionar a una URL por defecto, con el objeto de contemplar el caso de que no se pulse sobre un ГЎrea definida. Veamos un ejemplo: <AREA name=”casa”> <AREA shape=”poly”coords=”2,23,76,85,2” href=”tejado.html”> <AREA shape=”rect”coords=”23,78,65,122” href=”casa.html”> <AREA shape=”circle”coords=”36,75,95” href=”arbol.html”> <AREA shape=”rect”coords=”2,23,76,85” href=”dibujo.html”> </MAP> Para activar el mapa debemos escribir el nombre de la imagen a mostrar y despuГ©s indicar que dicha imagen estГЎ tratada como un mapa sensible. Esto se escribe asГ: <IMG SRC=”grafico.gif” USEMAP=”#casa”> PГЎg. 34 CreaciГіn de pГЎginas Web ГЃrea de TecnologГas de la InformaciГіn y las Comunicaciones Aplicadas Ejemplo prГЎctico nВє6 <HTML> <HEAD> <TITLE>Ejemplo 6 - Imagenes </TITLE> </HEAD> <BODY BACKGROUND="nubes.jpg" TEXT="#AA0000"> <CENTER> <H1>Imágenes</H1> </CENTER> <HR> Esta es mi página del Web. No es muy extensa, pero tiene todos los elementos básicos. Espero que os guste. Poco a poco le iré añadiendo más cosas interesantes. <P> <A HREF="ejemplo2.html"> <IMG SRC="hombre.gif"> </A> <FONT SIZE=+3>Mis aficiones</FONT> <P> <A HREF="ejemplo4.html"> <IMG SRC="casa.gif" BORDER=”0”> </A> <FONT SIZE=+3>Mis páginas favoritas</FONT> <CENTER> <H3> Un lugar ideal para mis vacaciones </H3> <IMG SRC="isla.gif" ALT="isla"> </CENTER> <HR> <CENTER> <H3>Expediente X - Mulder</H3> <IMG SRC="3mulder.gif" WIDTH=119 HEIGHT=160></CENTER> <HR> </BODY> </HTML> Guardamos el fichero de texto con el nombre ejemplo6.html y lo abrimos en el navegador, y aparecerГЎ la siguiente pantalla: PГЎg. 35 CreaciГіn de pГЎginas Web TABLAS________________________________________________________ Una tabla es una manera muy compacta y clara de mostrar la informaciГіn. Una tabla en HTML se entiende como un conjunto de filas (fila=horizontal), apiladas una sobre otra. Cada fila contiene a su vez un conjunto de celdas, puestas una al lado de la otra. Una tabla se declara usando el comando <TABLE> ... </TABLE>. Dentro de la tabla, se usa <TR>.. </TR>para indicar una fila y dentro de una fila, <TD> ... </TD> para delimitar el contenido de una celda. El elemento de cierre de fila y de celda es optativo. El texto incluido dentro de cada celda puede ser formateado con cualquiera de las etiqueta vistas anteriormente Todos estos comandos aceptan numerosos modificadores. Se pueden, entre otras cosas, unir celdas, especificar la alineaciГіn del contenido de la celda, y mucho mГЎs. Para entender mejor el comando <TABLE> ... </TABLE>, estГЎ disponible una muy amplia gama de ejemplos. Ejemplo de tabla AquГ se muestra una tabla muy simple: <TABLE> <TR><TD>Celda A1</TD><TD>Celda B1</TD><TD>Celda C1</TD></TR> <TR><TD>Celda A2</TD><TD>Celda B2</TD><TD>Celda C2</TD></TR> <TR><TD>Celda A3</TD><TD>Celda B3</TD><TD>Celda C3</TD></TR> </TABLE> TГtulo de la tabla. Es conveniente que las tablas tengan un tГtulo que las identifique y aclare su contenido. Aunque ese tГtulo puede ser contenido colocando texto formateado antes de la tabla, HTML dispone de la etiqueta <CAPTION> para darle nombre a la tabla, de la siguiente forma: <TABLE> <CAPTION> Nombre de la tabla </CAPTION> ………. </TABLE> PГЎg. 36 CreaciГіn de pГЎginas Web ГЃrea de TecnologГas de la InformaciГіn y las Comunicaciones Aplicadas Esta etiqueta tiene la ventaja que el texto formateado se coloca automГЎticamente en el centro de la anchura de la tabla. Bordes de la tabla. Para colocar bordes a una tabla en HTML se utiliza el modificador BORDER dentro de la etiqueta <TABLE>. La sintaxis es: <TABLE BORDER="anchura"> ………. </TABLE> donde anchura indica la anchura en pixels del borde exterior de la tabla. El modificador BORDER coloca bordes externos e internos en la tabla, pero la anchura que se especifica solo afecta a los bordes externos. El efecto de sombreado del borde exterior se produce cuando el modificador BORDER toma un valor superior a uno. Si queremos que el borde exterior de la tabla sea igual que los bordes interiores, debemos hacer BORDER=”1”. Cabeceras de filas y de columnas. La inclusiГіn de cabeceras en cada fila y columna ayuda a comprender el contenido de la tabla. No hay ninguna dificultad para hacer esto con las etiquetas que hemos visto. Sin embargo, existe una forma alternativa de indicar la cabecera de una fila o columna mediante la etiqueta <TH>. La desventaja de usar esta etiqueta es que el texto que va dentro de ella no admite formateado como el de las otras celdas. TamaГ±o de la tabla. Por defecto el tamaГ±o de la tabla viene dado por el texto o los grГЎficos que contiene. Sin embargo, es posible que en ocasiones queramos cambiar la anchura de nuestra tabla. La forma de establecer una anchura fija en una tabla es utilizar el modificador WIDTH dentro de la etiqueta <TABLE>. La sintaxis es: <TABLE WIDTH="anchura"> ……… </TABLE> PГЎg. 37 CreaciГіn de pГЎginas Web AquГ anchura puede ser un nГєmero que especifique en pixels la anchura absoluta de la tabla, o bien un porcentaje que indique la anchura de la tabla en relaciГіn a la anchura del ГЎrea del documento del navegador. A pesar de que podemos especificar la anchura de la tabla, si el texto de las celdas ocupa una anchura mayor, la tabla tomarГЎ la anchura mГnima para que el texto de las celdas pueda verse Гntegramente. JustificaciГіn de la tabla. Por defecto, nuestra tabla quedarГЎ justificada a la izquierda. La forma de centrarla es mediante la etiqueta <CENTER>. Espacio dentro de las celdas. Es posible que queramos que nuestro texto no quede apretado dentro de las celdas, sino que exista mГЎs espacio entre los textos de las celdas contiguas de forma que pueda leerse mejor. Esto puede hacerse mediante los dos siguientes modificadores: • CELLPADDING: establece la distancia mГnima en pixels entre los bordes de cada celda y el texto que va encerrado en ellas. Su valor por defecto es 1. • CELLSPACING: establece la anchura en pixels de los bordes de cada celda. Forma de las celdas individuales. JustificaciГіn del texto de las celdas. HTML permite justificar horizontal y verticalmente el texto dentro de cada celda. Para ello implementa los modificadores ALIGN y VALIGN dentro de la etiqueta <TD>. La forma de hacerlo es: <TABLE> <TR> <TD ALIGN=”horizontal” VALIGN=”vertical”> ….. </TD> </TR> ………. </TABLE> PГЎg. 38 CreaciГіn de pГЎginas Web ГЃrea de TecnologГas de la InformaciГіn y las Comunicaciones Aplicadas donde: • horizontal puede tomar los valores CENTER, LEFT y RIGHT. Por defecto vale LEFT. • vertical: puede tomar los valores TOP, MIDDLE, BOTTOM, y BASELINE. Por defecto vale CENTER. Si queremos que una determinada justificaciГіn horizontal o vertical afecte a todas las celdas de una fila, podemos hacerlo incluyendo el modificador ALIGN o VALIGN dentro de la etiqueta <TR>. Celdas de diferentes tamaГ±os. Por defecto, todas las celdas que constituyen una tabla en HTML tienen el mismo tamaГ±o. Sin embargo, es posible establecer el tamaГ±os de una determinada celda mediante dos modificadores de la etiqueta <TD>, que son WIDTH y HEIGHT: • WIDTH: especifica la anchura del texto en una celda concreta. Se puede especificar como valor absoluto o bien como relativo en forma de porcentaje de la anchura de la tabla. • HEIGHT: establece la altura de una celda individual. No es posible usar los modificadores WIDTH y HEIGTH para aplicarlos a toda una fila. La Гєnica forma de hacerlo es poniendo en cada celda de la fila los valores correspondientes de WIDTH y HEIGHT. Celdas irregulares. Podemos desear que una de nuestras celdas ocupe varias filas y/o columnas. La forma de hacerlo es introducir los modificadores COLSPAN y ROWSPAN en la etiqueta <TD>: • COLSPAN: especifica la altura de una celda en concreta en funciГіn de la altura de las celdas adyacentes. Se especifica en nГєmero de celdas adyacentes. • ROWSPAN: especifica la anchura de una concreta en funciГіn del celdas que estГЎn debajo. Se especifica en nГєmero de celdas de debajo. Color de cada celda. Para especificar el color de cada celda de la tabla se utiliza el modificador BGCOLOR en la etiqueta <TD>. Como formato de colores se acepta el hexadecimal o una cadena de caracteres. PГЎg. 39 CreaciГіn de pГЎginas Web Texto en una solo lГnea. Si hemos indicado la anchura de una celda y Г©sta es menor que el texto incluido en ella, y queremos que el texto no ocupe mГЎs lГneas, sino que se amplГe la anchura de la celda, debemos aГ±adir el modificador NOWRAP dentro de la etiqueta <TD>. Ejemplo prГЎctico nВє7 <HTML> <HEAD> <TITLE>Ejemplo 7 - Tablas</TITLE> </HEAD> <BODY> <CENTER><H1>Tablas</H1></CENTER> <H2>Demostracion de COLSPAN y Encabezados</H2> <TABLE WIDTH="100%" BORDER="1"> <TR> <TH COLSPAN="2">Head1</TH> <TH COLSPAN="2">Head2</TH> </TR> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD> </TR> <TR> <TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD> </TR> </TABLE> </BODY> </HTML> Guardamos el fichero de texto con el nombre ejemplo7.html y lo abrimos con en el navegador, y debe aparecer la siguiente pantalla:. FRAMES (MARCOS)_____________________________________________ Los frames (marcos) es una tГ©cnica que se utiliza para subdividir la pantalla del visualizador en diferentes ventanas, con la caracterГstica de que cada una de ellas se podrГЎ manipular por separado, es como si cada una de ellas fuera una pГЎgina Web. Esto es muy Гєtil para, por PГЎg. 40 CreaciГіn de pГЎginas Web ГЃrea de TecnologГas de la InformaciГіn y las Comunicaciones Aplicadas ejemplo, para mostrar permanentemente en una ventana los diferentes contenidos de nuestra pГЎgina y, en la otra mostrar el contenido seleccionado. Para definir las diferentes subventanas o frames su utilizan las marcas: <FRAMESET> </FRAMESET> y <FRAME>. Con <FRAMESET> indicamos cГіmo se va a dividir la pantalla principal, donde podrГЎn ir varias directivas frameset anidadas con el fin de subdividir cualquiera de las subdivisiones. Sus atributos son: • rows= "nГєmero o %" (NГєmero de filas) Se indica el nГєmero de filas en que subdividiremos la pantalla. El grupo de nГєmeros que acompaГ±an se indican en puntos o en tanto por cierto de cada una de las subventanas; en este caso se entiende que el primer valor que escribimos corresponde a la ventana superior, el segundo a la ventana inmediatamente inferior y asГ sucesivamente. 1ВЄ Fila 2ВЄ Fila 3ВЄ Fila Pongamos como ejemplo <FRAMESET rows= "25%, 50%, 25%" >, la pantalla quedarГa asГ 25% 50% 25% • cols= "nГєmero o %" (NГєmero de columnas) Se indica el nГєmero de columnas en que subdividiremos la pantalla. Los nГєmeros tambiГ©n se indican en puntos o en tanto por cierto. AquГ los valores se aplican de izquierda a derecha. 2ВЄ Columna 3ВЄ Columna 1ВЄ Columna Pongamos como ejemplo <FRAMESET cols= "120, *, 80" >, la pantalla quedarГa asГ: Esta ventana tiene un ancho fijo: mide 120 puntos Esta ventana ocuparГЎ el resto de la medida que no hayan ocupado las otras medidas fijas Esta ventana tiene un ancho fijo: mide 80 puntos Claro que tambiГ©n los podemos tener anidados, como por ejemplo: <FRAMESET cols= "250%,*" rows= "15%, *" > la pantalla quedarГa asГ: PГЎg. 41 CreaciГіn de pГЎginas Web Con la marca <FRAME> indicamos las propiedades de cada subventana y necesitamos una marca <frame> para cada subventana creada; los atributos son: • • • • • name= "nombre" (Nombre) Indica el nombre por el que nosotros nos vamos a referir a esa ventana. src= "URL" (Lugar de localizaciГіn) Indica un fichero .html cuyo contenido se mostrarГЎ en esa ventana. marginwidth= nГєmero (Ancho del margen) Indica el margen izquierdo y derecho de la subventana, se da en puntos. marginheight= nГєmero (Alto del margen) Indica el margen superior e inferior de la subventana, se da en puntos. scrolling= "yes/no/auto" (Desplazamiento) Indica si se aplica una barra de desplazamiento (tГpica barra para moverse de arriba y abajo que aparece en Windows) a la subventana. en el caso en que la pГЎgina que se cargue en ella no quepa en los lГmites de la subventana. El valor "yes" muestra siempre esta barra de desplazamiento, el valor "no" no la mostrarГЎ nunca (es decir, la parte del frame que no quepa en la pantalla no la veremos) y, por Гєltimo, "auto" la mostrarГЎ sГіlo en caso de que sea necesario. noresize Si se escribe este atributo, el usuario no podrГЎ redimensionar las subventanas con el visor; ya que un usuario podrГa cambiar el tamaГ±o de las subventanas con solo situar el cursor en un borde de la pantalla y desplazarlo. • Hay que tener en cuenta que todos aquellos navegadores que no soporten estas marcas de la versiГіn HTML 3.0 no verГЎn nada de los contenidos de nuestros frames. Es por ello que existe otra marca llamada <NOFRAMES> ... </NOFRAMES> y todo lo que se escriba aquГ dentro serГЎ lo que vean esos visualizadores, mientras que no afectarГЎ a los visualizadores mГЎs potentes. PГЎg. 42 CreaciГіn de pГЎginas Web ГЃrea de TecnologГas de la InformaciГіn y las Comunicaciones Aplicadas Ejemplo prГЎctico nВє8: <HTML> <HEAD> <TITLE> PГЎgina con frames </TITLE> </HEAD> <FRAMESET rows= "35%, *" > <!--Creo dos subventanas horizontales, la de arriba ocupa un 35% de la pantalla y la de abajo el resto --> <FRAMESET cols= "20%, *" > <!--Creo dos subventanas verticales, la de la izquierda un 20% de la pantalla y la de la derecha el resto --> <FRAME name= "botones" src= "ejemplo6.html" scrolling="auto"> <!--lamo a la subventana horizontal superior izquierda con el nombre de "botones" y muestro el documento "botonera.html" --> <FRAME name="logo" src="ejemplo1.html" scrolling="auto"> <!-- llamo a la subventana horizontal superior derecha con el nombre de "logo" y muestro el documento "logomio.html" --> </FRAMESET> <!--Cierro la definiciГіn de las subventanas verticales que estГЎn en la 1ВЄ subventana horizontal --> <FRAME name= "menu" src= "ejemplo2.html" scrolling= "auto"> <!--Llamo a la subventana vertical inferior "menu" para que muestre los contenidos de mi pantalla "inicio.html" --> <NOFRAMES> <!--Indico las Гіrdenes para aquellos navegadores que no soporten frames --> <BODY> Su navegador no muestra frames. Por favor pulse <A RREF= "aplicaciГіn.html">AquГ</A> para ir a la pГЎgina sin frames. </BODY> </NOFRAMES> </FRAMESET> <!--Cierro la definiciГіn de las subventanas verticales --> </HTML> Guardamos el fichero de texto con el nombre ejemplo8.html y lo abrimos con en el navegador. PГЎg. 43 CreaciГіn de pГЎginas Web Al usar frames nos encontramos con un problema, cuando queramos mostrar una pГЎgina Web debemos indicarle al visualizador en quГ© subventana queremos que se muestre. Por defecto lo mostrarГЎ en la ventana donde se encuentre el enlace. Para poder elegir la subventana de destino del hiperenlace se aГ±ade nuevo atributo a la marca <A HREF= > ... </A> que se llama target que a su vez tiene estos valores: • target= "nombre-ventana" Muestra el hiperenlace en la ventana cuyo nombre se indica. <A HREF= http://www.ibm.com target="home" > Muestra la pГЎgina de IBM en la subventana llamada "home". target="_blank" Abre una nueva ventana del navegador y muestra el hiperenlace en esta (Si usamos Netscape esto provoca que tengamos funcionando dos copias del programa.) <A HREF= http://www.microsoft.com target="_blank" > Muestra la pГЎgina de Microsoft en una nueva ventana del navegador. target= " _self"' Se muestra el hiperenlace en la subventana activa. target= " _parent" El hiperenlace se muestra en el frameset definido anteriormente al actual. Si no hay ningГєn frameset anterior se muestra a pantalla completa suprimiendo todas las subventanas de la pantalla. target= "_top" Suprime todas las subventanas de la pantalla y muestra el hiperenlace a pantalla completa. <A HREF= http://www.yahoo.com target="_top" > Muestra la pГЎgina del buscador de yahoo a pantalla completa. • • • • Formularios (FORMS)_____________________________________________ Los formularios o tambiГ©n llamados forms, se utilizan para la entrada y envГo de datos (el procesamiento de los mismos es otro asunto) desde una pГЎgina HTML. Podremos utilizar formularios para diseГ±ar cuestionarios de todo tipo, por ejemplo, datos referentes al tipo de usuario que visita nuestra pГЎgina, para hacer pedidos de algГєn producto, encuestas, subscripciГіn a algГєn tipo de servicio, etc. En un formulario podremos solicitar diferentes datos (campos) cada uno de los cuales quedarГЎ asociado a una variable. Una vez introducidos los valores en los campos, el contenido de Г©stos serГЎ enviado a la direcciГіn (URL) donde estГ© el programa que pueda procesar las variables, a este programa externo se le suele denominar CGI (Common Gateway Interface, Interface de Compuerta ComГєn). La marca es <FORM> ... </FORM> cuyos atributos son: • action= "programa" (AcciГіn) Se refiere a la acciГіn a realizar cuando se pulsa el botГіn de envГo del formulario. Esta CreaciГіn de pГЎginas Web PГЎg. 44 ГЃrea de TecnologГas de la InformaciГіn y las Comunicaciones Aplicadas acciГіn puede ser enviar por correo el contenido del formulario (action= mailto: <direcciГіn e-mail> o activar algГєn otro URL, como por ejemplo un mensaje que nos indique que el envГo se ha realizado con Г©xito. • method= POST / GET Que sirve para especificar el mГ©todo segГєn el cual se transferirГЎn las variables. GET lo utiliza por defecto y no produce cambios en el documento destino, por ejemplo si consultГЎsemos una base de datos. POST produce la modificaciГіn del documento de destino, por ejemplo, cuando se envГan por correo las variables. La informaciГіn del formulario es devuelta en forma de una Гєnica lista o cadena compuesta por pares nombre/valor (NAME/VALUE), es decir, el nombre de cada campo seguido del valor que tiene. Cada campo se separa con el carГЎcter &. Campos de entrada Los elementos de entrada de datos se denotan con la marca <INPUT> que tiene un atributo type con varias especificaciones: • type= text (Campos de texto para una Гєnica lГnea) Indica que el campo a introducir serГЎ un texto; se utilizan generalmente para introducir cadenas de texto cortas como nombres, direcciones, e-mail.. name= campo Define cada campo de un formulario y es necesario para identificar los valores asignados al mismo a la hora de procesar la informaciГіn devuelta. maxlenght= nГєmero NГєmero mГЎximo de caracteres a introducir en el campo. size= nГєmero La anchura visible del campo en caracteres. value= "texto" Valor inicial del campo, normalmente serГЎes decir, vacГo. • • • • Ejemplo: <INPUT type= "text" name="e-mail" maxlenght=300 size= 60> • type= password (Campo password) Indica que el campo serГЎ una palabra de paso, por tanto los caracteres tecleados por el usuario en pantalla se verГЎn como asteriscos. Sus atributos opcionales son los mismos que para type= text: name, maxlenght, size y value. Ejemplo: PГЎg. 45 CreaciГіn de pГЎginas Web <INPUT type="password" name="clave" size=12 > • type= checkbox (Campos de chequeo de opciГіn) Indica que el campo se elegirГЎ marcando una casilla, o mГЎs de una. El campo aparece como una cajita que puede estar marcada o no, segГєn se active o desactive respectivamente. SГіlo se devuelve el par nombre/valor correspondiente a un "checkbox" cuando estГЎ activada. • • • value= "valor" name= campo checked: Sirve para iniciar un botГіn en su estado activado Ejemplo: <INPUT type= "checkbox" name=activado > • type= radio (Botones Circulares) Indica que el campo se elegirГЎ marcando una casilla y sГіlo una, siendo los botones circulares. Como sГіlo se Puede tomar un valor, todos los elementos de este tipo que pertenezcan a un mismo grupo, deben tener el mismo valor para name. SГіlo el botГіn seleccionado serГЎ el que genere un par nombre/valor en los datos devueltos del formulario. • • value="valor" name=campo Ejemplo: <INPUT type= "radio" name="edadf'" value= "menosl7" > • type= range (Campo para Rangos) Permite elegir un valor determinado entre los posibles de un rango delimitado por los tributos mГn y mГЎx. Se puede iniciar con un valor concreto utilizando. • value= "valor" Ejemplo: <INPUT type= "range" name= nota min=1 max= 10 > • type= image (Campo Imagen) Indica que el campo contendrГЎ el valor de las coordenadas del punto de la imagen pinchada, la imagen se indica con el atributo: • src= "fichero de imagen" Ejemplo: <INTPUT type= "image" src= estadistica1.gif > PГЎg. 46 CreaciГіn de pГЎginas Web ГЃrea de TecnologГas de la InformaciГіn y las Comunicaciones Aplicadas • type= hidden (Campo para Datos Ocultos) No aparece ningГєn campo rellenable por el usuario, sino que se envГa algГєn tipo de informaciГіn de interГ©s interno, como por ejemplo, la versiГіn de un programa (si queremos saber cuГЎl estГЎ utilizando el usuario), un identificador de cualquier tipo, informaciГіn de estado, etc. • • value= "valor" name= campo Ejemplo: <INPUT type= "hidden" name= version value= "2.Oa > • type= submit (Botones de envГo) Aparece en forma de botГіn que es el que debe pulsarse, una vez lo hemos completado, para enviar la informaciГіn del formulario al programa indicado en <form>. • value= "texto" Que indica el texto que aparecerГЎ en el botГіn, por ejemplo, Pulse aquГ. • src=imagen Imagen que sustituya al tГpico botГіn. • name= campo Ejemplo: <INPUT type= "submit" value= "Enviar" > • (Botones de borrado) type= reset Devuelve los campos del formulario a los valores de inicio especificados. De igual forma que para los botones de envГo tiene los mismos atributos. • • • value= "texto" Que indica el texto que aparecerГЎ en el botГіn, por ejemplo, Pulse aquГ. src= imagen Imagen que sustituya al tГpico botГіn. name= campo Ejemplo: <INPUT type= "reset" value= "Borrar" > Campos de selecciГіn Este tipo de campos despliegan una lista de opciones, entre las que deben escoger una o PГЎg. 47 CreaciГіn de pГЎginas Web varias. Se utiliza para ellos la marca <SELECT> ... </SELECT> y sus atributos son: • name= campo Nombre del campo. • size= nГєmero NГєmero de opciones visibles. Si se indica uno se presenta como un menГє desplegable, si se indica mГЎs de uno se presenta como una lista con barra de desplazamiento. • mГєltiple Permite seleccionar mГЎs de un valor para el campo. Las diferentes opciones de la lista se indican con la marca <OPTION> que puede incluir el atributo: • selected Para indicar cuГЎl es la opciГіn por defecto, si no se especifica por defecto sale la primera opciГіn de la lista. Ejemplo: <SELECT name= Ciudades > <OPTION= Jaen > <OPTION= Palencia > <OPTION= Soria > <OPTION= Lugo > </SELECT> ГЃreas de texto Representan un campo de texto de mГєltiples lГneas y aparecen como una caja. Normalmente se utiliza para que se incluyan en ellas comentarios. La marca es <TEXTAREA> ... </TEXTAREA> y sus atributos son: • name= campo Nombre del campo • cols= nГєmero NГєmero de columnas de texto visibles • rows= nГєmero NГєmero de filas de texto visibles • align= valor Puede ser top (arriba), middle (medio), bottom (abajo), left (izquierda) y right (derecha) PГЎg. 48 CreaciГіn de pГЎginas Web ГЃrea de TecnologГas de la InformaciГіn y las Comunicaciones Aplicadas • wrap= VIRTUAL / PHYSICAL Justifica el texto automГЎticamente en el interior de la caja. La opciГіn physical envГa las lГneas de texto separadas en lГneas fГsicas. La opciГіn virtual envГa todo el texto seguido. Ejemplo <TEXTAREA name= direcciГіn rows= 60 cols=5> IBM Company Ine. 1221 Beverly Hills. Massachusetts 90876ET56 </TEXTAREA> Ejemplo prГЎctico nВє9: <HTML> <HEAD> <TITLE>Ejemplo 9 - Formularios </TITLE> </HEAD> <BODY> <FORM action="mailto:[email protected]" method="post"> Tu Nombre: <INPUT type=text name=nombre size=30> Tu Clave: <INPUT type=password name=clave size= 8> <P> Archivos a Enviar: <BR> <INPUT type=checkbox name=archivo value="Manual" > Manual de Html <INPUT type=checkbox name=archivo value="Mapthis">Programa Mapthis <INPUT type=checkbox name=archivo value="Help" > Archivo de Ayuda <P> Tu Edad: <BR> <INPUT type=radio name=edad value="-20" > Menos de 20 aГ±os <INPUT type=radio name=edad value="20-40" > Entre 20 y 40 aГ±os <INPUT type=radio name=edad value="+40" > MГЎs de 40 aГ±os <P> <INPUT type=hidden name=lugar value="pГЎgina personal" > ВїCГіmo encontraste mi pГЎgina? <SELECT name=donde > <OPTION> De casualidad <OPTION> Por el buscador Ole <OPTION> Por el buscador Yahoo <OPTION> Me la recomendaron </SELECT> <P> Tus comentarios: <BR> <TEXTAREA name=comentario rows=5 cols=40 wrap=virtual> </TEXTAREA> <P> <INPUT type=submit value="Enviar" > <INPUT type=reset value="Borrar" > </FORM> </BODY> </HTML> Guardamos el fichero de texto con el nombre ejemplo9.html y lo abrimos con en el navegador, y debe aparecer la siguiente pantalla:. PГЎg. 49 CreaciГіn de pГЎginas Web PГЎg. 50 CreaciГіn de pГЎginas Web ГЃrea de TecnologГas de la InformaciГіn y las Comunicaciones Aplicadas Hojas de estilo____________________________________________________ Este es un nuevo concepto que ha surgido gracias a la posibilidad que ofrecen algunos navegadores mГЎs avanzados, por tanto recordemos que no siempre es posible su visualizaciГіn. Viene del tГ©rmino CSS (Cascading StyleSheet, Hojas de Estilo en Cascada) y estГЎ recogido en la W3C. El CSS1 es un simple mecanismo que permite al diseГ±ador y a los usuarios hacer una uniГіn de estilo en el que se incluyen fuentes, tamaГ±os, color, espacios, etc., (como si estuviГ©semos maquetando una pГЎgina de una revista) y aГ±adirlo a una pГЎgina HTML. De hecho, necesitamos insertarlo dentro de las marcas y atributos que hemos aprendido del HTML. Existen 4 posibles formas de combinar: <HTML> <HEAD> <TITLE>menu</TITLE> <LINK REL=STYLESHEET TYPE="text / css" HREF= "http://style.coni/cool" TITLE="cool"> <STYLE TYPE= "text/css"> @import url (http://style.coni/basic); H1 {color: blue} </STYLE> </HEAD> <BODY> <Hl> La cabecera es azul </HI> <P STYLE= "color: green"> Mientras que el pГЎrrafo es verde </BODY> </HTML> 1 Usando un LINK que llama a una CSS externa. 2 Una marca <STYLE> dentro de la <HEAD>. 3 Una hoja de estilo importada del CSS denominada "@import". 4 Un atributo de style usado dentro del <BODY>. Su aprendizaje es sencillo pero lleno de propiedades (cerca de 50 que pueden determinar el aspecto de una pГЎgina html), veremos con algunos ejemplos cГіmo funciona. Si quisiГ©ramos que todos los textos comprendidos dentro de <H1> fuesen azules escribirГamos esto: Marca html H1 propiedad { color: valor blue} PГЎg. 51 CreaciГіn de pГЎginas Web Se puede agrupar un nГєmero de marcas comunes para reducir las Гіrdenes: • • Hl, H2, H3 (font-family: helvetica) H1{ font-weight: bold; Font-size: 12pt; Line-height: 14pt. Font-family: helvetica; Font-variant: normal; Font-style: normal; } Y hay otras que se pueden agrupar asГ: • H1 { font: bold 12pt/14pt helvetica } que es igual que el ejemplo anterior. EDITORES Y CONVERSORES____________________________________ En el presente apartado se provee de algunos comentarios y reflexiones acerca del uso de herramientas automatizadas para la generaciГіn de pГЎginas Web: editores y conversores. Editores Seguramente usted ha visto o conoce programas que pueden asistir a una persona en la creaciГіn de pГЎginas Web, y quizГЎs se ha preguntado: Вї uso un editor o aprendo HTML ? La respuesta que yo le darГa es la misma que si usted me preguntara si es mejor saber aritmГ©tica o ocupar una calculadora: ambas cosas no se contraponen entre sГ. Un editor HTML es una gran ayuda al diseГ±ador Web: brinda la posibilidad de disponer y ver la pГЎgina mientras se crea, y de observar inmediatamente cГіmo aparecerГЎn distribuidos los colores y los elementos dentro del documento, es una ayuda para recordar las marcas y sus atributos, sin embargo; puede resultar inadecuado por lo siguiente: • Poca flexibilidad, y en algunas ocasiones el cГіdigo que generan en general es difГcil de editar o mantener. • El conjunto de comandos que incorpora puede ser limitado, en caso de que sea un editor producido por alguna empresa que haga visualizadores, o puede estar obsoleto. • El HTML que generan estГЎ fuertemente orientado al formato fГsico, mГЎs que a la estructura, con lo cual se pierde universalidad en el documento. Es recomendable comenzar por lo bГЎsico, procurando aprender HTML bien, creando documentos con editores de texto plano. DespuГ©s si se desea se puede ocupar una combinaciГіn editor de texto plano mГЎs editor HTML para crear documentos, a fin de explotar al mГЎximo las capacidades de ambos sistemas. PГЎg. 52 CreaciГіn de pГЎginas Web ГЃrea de TecnologГas de la InformaciГіn y las Comunicaciones Aplicadas Los editores HTML se clasifican en dos tipos: • • Wysiwyg "what you see is what you get": en ellos se puede ir viendo en pantalla inmediatamente lo que se va creando. son muy Гєtiles para apreciar los colores y la disposiciГіn en pantalla de los elementos. No Wysiwyg: ellos usualmente invocan una aplicaciГіn externa (un browser) para mostrar lo que se va creando. Son muy Гєtiles para recordar los comandos HTML y sus atributos. Existen editores mixtos: presentan la pantalla dividida en dos segmentos, uno con el cГіdigo HTML y otro con el resultado final. Por ejemplo, uno de los editores HTML Wysiwyg mГЎs completos es el FrontPage 98 de Microsoft (http://www.eu.microsoft.com/frontpage/), aunque es Wysiwyg, tambiГ©n permite trabajar en modo comando. Conversores Las herramientas de conversiГіn permiten transformar un documento escrito en otro formato a un documento HTML. El cГіdigo HTML que generan es casi imposible de leer, debido a que hay muchas distinciones que existen en lenguajes de formateo de texto que no existen en HTML, y deben ser simuladas, con algГєn grado de truculencia. ВїCuГЎndo usarlos? cuando no hay otra alternativa, porque es inviable o ya se hizo un gran trabajo previo en otro sistema. ВїCГіmo usarlos? la idea bГЎsica es simplificar al mГЎximo el documento (eliminar las sangrГas, uniformar los tamaГ±os de letra, etc.) para luego pasar el conversor, generando un documento HTML. Finalmente conviene revisar la salida usando un editor de texto, revisando que el cГіdigo obtenido sea sintГЎcticamente correcto, y dejando el documento lo suficientemente ordenado y legible como para que sea fГЎcil de modificar al momento de realizar futuras actualizaciones. Por ejemplo, el paquete ofimГЎtico Oficce 97 (Word, Excel, PowerPoint, ...) de Microsoft incorpora un conversor de documentos en formato Word a HTML. TambiГ©n el editor FrontPage 98, anteriormente mencionado, incorpora un conversor de distinto tipos de formato de documentos a HTML. PUBLICAR LAS PГЃGINAS EN INTERNET._________________________ Hasta ahora sГіlo hemos realizado pГЎginas quГ© no son visibles desde Internet, sino que solamente se pueden visualizar en modo local en nuestro ordenador. PГЎg. 53 CreaciГіn de pГЎginas Web Para publicar nuestras pГЎginas en Internet para que sean accesibles por cualquier otro usuario de Internet debemos transferirlas a un servidor Web, para ello hay que realizar los siguientes pasos: 1. Probar de forma local el correcto funcionamiento de las pГЎginas creadas. 2. Solicitar la apertura de una cuenta en dicho servidor Web. 3. Transferirlas mediante FTP a la cuenta asignada en dicho servidor Web. Teniendo en cuenta que las pГЎginas de deben transferir en modo ASCII, y los grГЎficos incluidos en las pГЎginas en modo binario. 4. Probar desde Internet el acceso a dichas pГЎginas. Concretamente en la Universidad de Murcia, el ГЃrea de TecnologГas de la InformaciГіn y las Comunicaciones Aplicadas (ATICA) ofrece a los Centros, Departamentos, Servicios, Grupos de trabajo e investigaciГіn universitarios la posibilidad de incorporar sus propias pГЎginas de Web al servidor central de la Universidad de Murcia. Puede encontrar mГЎs informaciГіn sobre este Servicio de Almacenamiento de pГЎginas en Web en http://www.um.es/atica/web/ DIRECCIONES INTERNET DE INTERГ‰S.__________________________ Las siguientes direcciones Internet contienen guГas y manuales donde puede encontrar mГЎs informaciГіn sobre el lenguaje HTML: Diversos manuales HTML - http://www.dic.uchile.cl/manual.html Dpto. InformГЎtica y Comunicaciones Universidad de Chile WebMaestro – http://www.wmaestro.com/webmaestro/ Francisco Arocena Tutorial HTML - http://dns.uncor.edu/info/tutorial.htm Mercedes Doffi [email protected] Universidad Nacional de CГіrdoba Argentina Taller HTML - http://www2.uca.es/taller-html/taller-html.html Universidad de CГЎdiz EspaГ±a EspecificaciГіn del Consorcio W3 (W3C) В·del lenguaje HTML - http://www.w3.org/MarkUp/ Caracteres especiales en HTML – http://www.utoronto.ca/webdocs/HTMLdocs/NewHTML/entities.html PГЎg. 54 CreaciГіn de pГЎginas Web ГЃrea de TecnologГas de la InformaciГіn y las Comunicaciones Aplicadas BIBLIOGRAFГЌA._________________________________________________ Tejedores del Web - http://www.dic.uchile.cl/~manual/ Carlos Castillo Dpto. InformГЎtica y Comunicaciones Universidad de Chile Tutorial de HTML - http://www.um.es/~psibm/tutorial/ Juan JosГ© LГіpez GarcГa [ [email protected] ] Dpto. PsicologГa BГЎsica y MetodologГa Universidad de Murcia WebMaestro – http://www.wmaestro.com/webmaestro/ Francisco Arocena PГЎg. 55 CreaciГіn de pГЎginas Web ГЃrea de TecnologГas de la InformaciГіn y las Comunicaciones Aplicadas