LENGUAJE HTML

MANUAL DE HTML

DISEÑO WEB

CENTRO DE ENSEÑANZA TECNICO EN INFORMATICA MANUAL:

DIPLOMADO:

DISEÑO WEB INSTRUCTOR/a:

_______________________________________________________ Alumno/a: __________________________________________________________

Año: 2008

Lenguaje de Marcado de Hipertexto

0

CENTRO DE ENSEÑANZA TECNICO EN INFORMATICA CETI

INDICE Introducción

1 – Conceptos de Basicos para el desarrollo de Paguinas Web. ............................ 4 1.1. Internet ............................................................................................................... 4 1. 2. Historia de Internet ......................................................................................... 4 1. 3. Historia de la Web............................................................................................ 4 1. 4. ¿Qué es la World Wide Web o la Web? ......................................................... 5 1. 5. Hipertexto ......................................................................................................... 5 1.6. Funcionamiento de la Web .............................................................................. 5 2 – Concepto de HTML ................................................................................................. 14 El texto (III)............................................................................................................... 16 3 - Salto de línea <br> ................................................................................................ 17 4 - Párrafo <p> ............................................................................................................. 18 5 - Títulos <h1><h2><h3><h4><h5><h6> .................................................................. 19 Marquesinas <marquee> ......................................................................................... 21 Los colores y HTML .................................................................................................. 22 Primarios aditivos saturados (absolutos) ................................................................ 22 Primarios sustractivos nulos (absolutos) ................................................................ 22 Algunos secundarios y terciarios (medianos) ......................................................... 22 6 - Enfasis (<em> <strong>)........................................................................................ 22 7 - Hipervínculo a otra página del mismo sitio <a> ............................................... 24 8 - Hipervínculo a otro sitio de internet <a> .......................................................... 25 9 - Imágenes dentro de una página <img> .............................................................. 26 10 - Hipervínculo mediante una imagen <a> y <img> ........................................... 27 URLs................................................................................................................................ 28 URL: Localizador Universal de Recursos .............................................................. 29 10.1Multimedia ........................................................................................................ 30 Sonido de fondo <bgsound> ................................................................................... 30 Vídeo y audio <embed> .......................................................................................... 30 <embed src="varios/audio.mid" autostart="true" loop="true" width="0" height="0" > .................................................................................................................. 31 11 - Apertura de un hipervínculo en otra instancia del navegador.................... 32 12 - Hipervínculo a un cliente de correo <a> ......................................................... 32 13 - Anclas llamadas desde la misma página. ........................................................ 33 14 - Anclas llamadas desde otra página. ................................................................. 35 15 - Lista ordenada (<ol>) .......................................................................................... 36 16 - Lista no ordenada (<ul>) .................................................................................... 36 17 - Lista de definiciones (<dl>) ............................................................................... 37 18 - Listas anidadas..................................................................................................... 38 19 - Tabla (<table><tr><td>) ..................................................................................... 39 20 - Tabla con encabezado (<th>) ............................................................................ 40 21 - Tabla con título (<caption>) .............................................................................. 41 22 - Tabla y combinación de celdas. ........................................................................ 42 23 - Contenido de la cabecera de la página (<title>) ...................................................... 43 24 - Contenido de la cabecera de la página (<meta>) .......................................... 43 25 - Comentarios dentro de una página <!-- --> .................................................... 44 1

MANUAL DE HTML 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 42 43 44 45 46 47 48 49 50 51 52 -

DISEÑO WEB

Sintaxis para caracteres especiales. ................................................................ 45 Formulario - <form> ............................................................................................ 46 Formulario - input type="text"/ input type="password" ............................... 48 Formulario - textarea ......................................................................................... 49 Formulario - input type="checkbox" ................................................................. 50 Formulario - input type="radio" ........................................................................ 51 Formulario - select (cuadro de selección individual).................................... 52 Formulario - select (cuadro de selección múltiple) ...................................... 53 Formulario - select (agrupamiento de opciones) ........................................... 54 Formulario - button ............................................................................................. 55 Formulario - input type="button" ...................................................................... 56 Formulario - input type="file"............................................................................ 56 Formulario - input type="hidden" ..................................................................... 57 Formulario - agrupamiento de controles. ....................................................... 59 Formulario - controles con valores iniciales. ................................................. 61 Formulario - Inhabilitar controles. ................................................................... 64 Formulario - text/password y maxlength ........................................................ 64 Formulario - text/password/textarea y readonly.......................................... 65 Formulario - Envío de datos mediante mail. .................................................. 66 Formulario - label ................................................................................................ 67 Frames ................................................................................................................... 70 Frames - Actualización de un frame a partir del enlace de otro frame .... 71 Frames - Asignación de medidas en píxeles ................................................... 73 Frames - Propiedades del elemento frame ..................................................... 74 Frames - Anidamiento de frameset .................................................................. 76 Conceptos básicos de hojas de estilo. ............................................................. 78

Lenguaje de Marcado de Hipertexto

2

CENTRO DE ENSEÑANZA TECNICO EN INFORMATICA CETI Introducción La World Wide Web permite una manera más organizada de acceder a la información disponible en Internet, presentando una interfaz amigable con el usuario mediante navegadores como Netscape, Mosaic y Microsoft Internet Explorer.

El surgimiento de la World Wide Web ha ayudado a un crecimiento considerable de Internet en la actualidad. Compañías pequeñas, empresas grandes, ayuntamientos, estados, gobiernos de distintos países, universidades, bibliotecas, están presentes en Internet.

El presente trabajo tiene como objetivo mostrar las maravillosas capacidades de la World Wide Web, en que consiste la misma, sus utilidades, como así también los criterios a tener en cuenta en el diseño para que un sitio Web tenga éxito.

Por otro lado intenta hacer un aporte a trabajos nombrados en la página 54, ya que algunos hacen mención del tema o lo muestran desde una visión particular.

Este trabajo trata de dar un enfoque actual y personal, tratando de ser útil a quien este interesado en el tema.

3

MANUAL DE HTML

DISEÑO WEB

1 – Conceptos de Basicos para el desarrollo de Paguinas Web. Unidad 1 "La Word Wide Web" 1.1. Internet Internet es una gran red de redes, también llamada Supercarretera de la información. Es el resultado de la interconexión de miles de computadoras de todo el mundo. Todas ellas comparten los protocolos de comunicación, es decir que todos hablan el mismo lenguaje para ponerse en contacto unas con otras.

Los servicios básicos ofrecidos ahora por Internet son correo electrónico, noticias en red, acceso a computadoras remotas y sistemas de adquisición de datos, y la capacidad para transferir información entre computadoras remotas.

1. 2. Historia de Internet Empezó en los Estados Unidos de América en 1969, como un proyecto puramente militar. La Agencia de Proyectos de Investigación Avanzados de Defensa (DARPA) desarrolló una red de computadoras llamada ARPANET, para no centralizar los datos, lo cual permitía que cada estación de la red podía comunicarse con cualquier otra por varios caminos diferentes, además presentaba una solución para cuando ocurrieran fallas técnicas que pudieran hacer que la red dejase de funcionar.

Los sitios originales que se pusieron en red eran bases militares, universidades y compañías con contratos del Departamento de Defensa. Conforme creció el tamaño de esta red experimental, lo mismo sucedió con las precauciones por la seguridad. Las mismas redes usadas por las compañías y las universidades para contratos militares se estaban volviendo cada vez más accesibles al público Como resultado, en 1984, ARPANET se dividió en dos redes separadas pero interconectadas. El lado militar fue llamado MILNET. El lado educativo todavía era llamado técnicamente ARPANET, pero cada vez se hizo mas conocida como Internet.

En mayo de 1995, entre 35 y 45 millones de personas usaban Internet y este número fue creciendo mes a mes en un 10 a 15%. Las estimaciones actuales colocan al número de personas en Internet en enero de 1997 en 62 millones de usuarios individuales.

Podemos decir que el resultado final es que lo que comenzó como un proyecto de investigación gubernamental y educativo ahora se ha convertido en uno de los medios de comunicación más importante de la actualidad. Nunca antes había sido posible tener acceso a tantas personas de culturas y antecedentes tan variados.

Además podemos decir que la Internet no es gratis, la pagamos básicamente nosotros, los contribuyentes, centros de investigación, educacionales, institutos y universidades, las empresas comerciales, nosotros a través del incremento en sus productos y la publicidad.

1. 3. Historia de la Web La Web es una idea que se construyo sobre la Internet. Las conexiones físicas son sobre la Internet, pero introduce una serie de ideas nuevas, heredando las ya existentes.

Empezó a principios de 1990, en Suiza en el centro de investigación CERN (centro de Estudios para la Investigación Nuclear) y la idea fue de Tim Berners-Lee, que se gestó observando una libreta que él usaba para añadir y mantener referencias de cómo funcionaban los ordenadores en el CERN.

Lenguaje de Marcado de Hipertexto

4

CENTRO DE ENSEÑANZA TECNICO EN INFORMATICA CETI Antes de la Web, la manera de obtener los datos por la Internet era caótica: había un sinfín de maneras posibles y con ello había que conocer múltiples programas y sistemas operativos.

La Web introduce un concepto fundamental: la posibilidad de lectura universal, que consiste en que una vez que la información esté disponible, se pueda acceder a ella desde cualquier ordenador, desde cualquier país, por cualquier persona autorizada, usando un único y simple programa. Para que esto fuese posible, se utilizan una serie de conceptos, el más conocido es el hipertexto.

Con Web los usuarios novatos podrían tener un tremendo poder para hallar y tener acceso a la riqueza de información localizada en sistemas de cómputos en todo el mundo.

Este solo hecho llevó un avance tremendo de Internet, un ímpetu tan grande que en 1993 World Wide Web creció un sorprendente 341000%, tres años después, en 1996, todavía sé esta duplicando cada 50 días.

1. 4. ¿Qué es la World Wide Web o la Web? La World Wide Web consiste en ofrecer una interface simple y consistente para acceder a la inmensidad de los recursos de Internet. Es la forma más moderna de ofrecer información. el medio más potente. La información se ofrece en forma de páginas electrónicas.

El World Wide Web o WWW o W3 o simplemente Web, permite saltar de un lugar a otro en pos de lo que no interesa. Lo más interesante es que con unas pocas ordenes se puede mover por toda la Internet.

Para entender lo que es la Web debemos tener una idea de lo que es el Hipertexto.

1. 5. Hipertexto Hipertexto son datos que contienen enlaces (links) a otros datos.

En el lenguaje Web, un documento de hipertexto no es solo algo que contiene datos, sino que además contiene enlaces a otros documentos.

Un ejemplo simple de hipertexto es una enciclopedia que al final de un tema tiene referencias de algún tema en especial o referencias bibliográficas a otros textos.

En Hipertexto, el ordenador hace que seguir esas referencias sea facilísimo. Esto implica que el lector se puede saltar la estructura secuencial del texto y seguir lo que más le gusta.

En Hipertexto se pueden hacer enlaces en cualquier lugar, no sólo al final.

Cada enlace tiene una marca que lo destaca, puede estar resaltado, subrayado o puede estar identificado por un número.

El hipertexto no esta limitado a datos textuales, podemos encontrar dibujos del elemento especificado, sonido o vídeo referido al tema. Estos documentos que tienen gran variedad de datos, como sonido, vídeo, texto, en el mundo del hipertexto se llama hipermedia.

El hipertexto es una herramienta potente para aprender y explicar. El texto debe ser diseñado para ser explorado libremente y así se consigue una comunicación de ideas más eficientes.

1.6. Funcionamiento de la Web Una vez que el usuario esta conectado a Internet, tiene que instalar un programa capaz de acceder a páginas Web y de llevarte de unas a otras siguiendo los enlaces.

5

MANUAL DE HTML

DISEÑO WEB

El programa que se usa para leer los documentos de hipertexto se llama "navegador", el "browser", "visualizador" o "cliente" y cuando seguimos un enlace decimos que estamos navegando por el Web. Así, no hay más que buscar la información o la página deseada y comenzar a navegar por las diferentes posibilidades que ofrece el sistema.

Navegar es como llaman los usuarios de la red a moverse de página en página por todo el mundo sin salir de su casa.

Mediante los Navegadores modernos podemos, acceder a hojas de calculo, base de datos, vídeo, sonido y todas las posibilidades más avanzadas. Pero el diseño de páginas debe mantener un equilibrio entre utilizar todas las capacidades y la posibilidad de ser leídas por cualquier tipo de Navegador.

El visualizador nos presentará perfectamente cualquier página ".txt" generada por cualquier editor, y los links entre documentos sólo requieren un simple y sencillo comando. Y aún así podremos conseguir el tipo y tamaño de letra y colores de texto y fondo que queramos, simplemente configurando el visualizador.

1. 6. 1. Navegadores que se utilizan Los más conocidos son el Explorer de Microsoft, Mosaic y el Netscape de Netscape Communications Corporation en Estados Unidos y otros países. Tienen capacidades diferentes y es importante cuando se crea una página Web, además de un buen diseño, tener en cuenta la compatibilidad, es decir, programar páginas de modo que las acepte cualquier Navegador.

Netscape es el que soporta más y mejores efectos, incluido programas embebidos en el propio texto (versión 2.0 en adelante), escritos en lenguaje Java (algo muy parecido al lenguaje C), que son interpretados por el visualizador, y que permiten realizar páginas "inteligentes".

Conectándose a Internet, con un visualizador Netscape o Explorer, además de ver documentos HTML se puede recibir y enviar correo electrónico, recibir y enviar NEWS (noticias), visitar los servidores GOPHER (servidores de ficheros), y acceder a servidores FTP (más servidores de ficheros) tanto en entrada como en salida, todo ello con el mismo programa. También, como no, se pueden imprimir los documentos visualizados. Casi todos suelen ser " WYSIWYG".

1. 7. ¿Cómo encuentra la gente una página Web? 1. 7. 1. Sistemas de Búsqueda En la Web no existe un directorio centralizado. Para acceder a una página directamente se debe conocer la dirección exacta donde se encuentra. Pero lo más habitual no es conocer esa dirección exacta, sino tener una idea del tema en el que se está interesado y sobre el que se necesite información.

Existen empresas como Yahoo, Altavista, Olé, Ozú, etc., que han creado diferentes Sistemas de Búqueda, para evitar la navegación a la deriva.

Estas consisten en un tipo de páginas Web donde se puede escribir una palabra o una breve referencia que defina la búsqueda que se quiere realizar. El sistema consulta sus datos y te muestra enlaces con las páginas Web que contienen la referencia escogida. Existen diferentes buscadores y cada uno de ellos ha creado su propio directorio. Unos son más completos, otros más organizados, otros son más exigentes y selectivos en su información, cada uno tiene características propias, pero todos ellos ayudan a mantener el rumbo.

1. 8. ¿Qué puede contener una Página Web?

Lenguaje de Marcado de Hipertexto

6

CENTRO DE ENSEÑANZA TECNICO EN INFORMATICA CETI Hemos mencionado el tipo de información que puede contener una página Web: texto, imagen, sonido, vídeo, e incluso, mundos 3D y animación.

El usuario no se limita a buscar y encontrar la información de un modo pasivo, sin intervenir.

La mayor innovación de las páginas Web se traduce en una sola palabra: Interactividad. Una página Web puede contener elementos que permiten una comunicación activa entre el usuario e información, la página responderá a sus acciones.

Por ejemplo: Formularios: a través de los cuales la empresa podrá disponer de un modo de solicitud de información, un buzón de sugerencias o posibilidad de realizar subscripciones o pedidos Accede y manejar bases de datos de todo tipo: Consultar por ejemplo, una lista de todos los fondos de inversión en España.

Participar en los juegos más diversos. Echar una partida de Bingo o participar en un divertido juego de búsqueda por el ciberespacio.

Sistemas de Búsquedas: Encontrar las páginas que contienen información que se necesita en los principales buscadores españoles o localizar una empresa en las páginas amarillas electrónicas.

1. 9. ¿Qué puede hacer una empresa a través de una página web?

Proveer a clientes la información acerca de sus productos y servicios, y actualizarla a medida que se van desarrollando nuevos aspectos de ellos. Esto es mucho más sencillo y económico que hacer llamadas telefónicas, imprimir nuevos catálogos o hacer publicaciones de prensa cada vez que lo requiera.

Evaluar a sus clientes actuales y desarrollar nuevas oportunidades de negocio.

Mediante encuestas publicadas dentro de su página Web, puede obtener una respuesta de sus clientes actuales, y así conocer y abordar mejor sus inquietudes y sugerencias respecto al servicio que están recibiendo de su empresa. Igualmente, puede mostrar nuevos productos e ideas y conseguir la opinión de los visitantes de su página, que son a la vez sus clientes potenciales. De esta manera, puede crear una base de datos de clientes (actuales y potenciales) para luego enviarle nuevas informaciones a través de correos electrónicos con costos irrisorios.

Otorgar información detallada y específica acerca de sus productos (manuales de instrucción) y de los procesos de comercialización (adquisición y compra) de los mismos. Si su público desea saber más sobre la empresa, la página Web es el mejor vehículo para hacerle llegar esa información.

1. 10. Dominio En el supuesto de estar buscando información sobre una empresa determinada, el primer impulso sería teclear el nombre de la empresa seguido del sufijo es o com, los más habituales.

Si se realiza esta acción sólo se encontrará a la empresa en esa dirección si se dispone de dominio propio, es decir si la empresa tiene un servidor propio o ha alquilado espacio en un servidor dedicado a la gestión y mantenimiento de páginas Web. Si no es así, si la empresa simplemente se encuentra situada en el dominio de otra compañía, será más difícil de localizar, ya que tendrá una dirección más complicada, difícil de encontrar y memorizar.

Además, si la empresa tiene dominio propio, en el caso de que decida cambiar de compañía a la que alquile el espacio, la dirección se mantiene, ya que el dominio propio pertenece a la empresa que lo usa y puede instalarse en otro host sin problemas. Si no tiene dominio propio

7

MANUAL DE HTML

DISEÑO WEB

y decide cambiar de proveedor de Internet, su dirección de Internet cambiará y tendrá que reflejarlo en su publicidad.

El dominio propio ofrece una imagen más profesional y competente. Los clientes agradecerán que se les proporcione un acceso sencillo y consistente a su información.

1. 11. URLs Localizador Uniforme de Recursos (URL; Uniform Resource Locator )es una dirección especial usada por los navegadores Web, para tener acceso a información en Internet. El URLs especifica el ordenador en que se hospeda, el directorio, y el nombre del fichero A través de estas direcciones o URLs vamos a poder conectar los diferentes objetos (no solo texto), aunque se acceda a ellos a través de diferentes protocolos. Una cualidad de los URLs es que permiten utilizar los datos ya existentes en la Internet (Wais, Gofher, ftp) y así es como consigue la Web envolver a la Internet sencilla y eficazmente Si no sabemos el URLs, se puede ir a al URL de alguno de los índices de Búsqueda.

Unidad 2 "Construcción de Páginas Web" Premisas básicas para crear un Web de éxito 2. 2. 1. Un buen contenido El contenido dependerá directamente de la temática del Web. La gran mayoría de los usuarios que acuden a un sitio Web lo hacen en busca de información. Da igual como se presente dicha información (texto, imágenes, vídeo, audio) pero un Web debe aportar contenido. Es importante tener en cuenta que WWW es un medio de comunicación distinto a los que hasta ahora conocíamos (televisión, radio, prensa, etc.); el navegante pasa de página en página Web a ritmo de clic de ratón, y generalmente pasa poco tiempo en una misma página. Por lo tanto no se debe abusar de la información textual, ya que son muy pocos los visitantes que se leen completamente una página Web. Siempre se ha dicho que una imagen vale mas que mil palabras, y aunque una página Web no es un programa de televisión, las imágenes siempre son importantes.

2. 2. 2. Un buen Diseño No es necesario ser un gran diseñador para crear paginas Web con un mínimo de sensibilidad gráfica. A veces, un diseño simple se agradece mucho más que una Web inundada de "gifs" en movimiento. El utilizar una tipografía determinada, unos colores adecuados, iconos, fotos, etc. puede convertir la experiencia de visitar un Web en algo mucho más agradable.

Es importante en el aspecto del diseño de un Web la estructuración del mismo. Facilitar la navegación mediante menúes, iconos, mapas y otros elementos puede evitar que más de un visitante se pierda dentro de un Web. En el caso de crear un Web excesivamente grande y complejo resulta de ayuda para el visitante la inclusión de mapas (esquemas con enlaces de hipertexto que representan todo el Web) para no perderse.

2. 2. 3. Las imágenes en el diseño La velocidad de acceso al Web está siempre muy reñida con el diseño. Es frecuente el caso en que, para embellecer un Web se utilicen muchas imágenes (en formatos gif o jpeg) de gran tamaño. Esto obliga a los usuarios con conexiones lentas a sufrir largas esperas hasta que la información se presente en pantalla, y eso es un riesgo porque más de dos saltarán a cualquier otra dirección Internet antes de perder su tiempo.

Lenguaje de Marcado de Hipertexto

8

CENTRO DE ENSEÑANZA TECNICO EN INFORMATICA CETI La velocidad de la Web también dependerá en gran medida de lo saturadas que estén las líneas de acceso a nuestro centro proveedor de presencia en Internet (en resumen, el servidor donde se aloja el Web). Sin embargo este es un problema que se escapa del ámbito del diseño.

2. 2. 4. Elementos Interactivos La interactividad es fundamental para el éxito de un Web. Se debe evitar la sensación "lectura de periódico" que puede causar en un visitante un Web pasivo y lineal. Además la interactividad puede beneficiar a quien publica el Web ya que a través de formularios podrá conocer mejor los perfiles de quienes pasan por las páginas.

Podemos calificarlos como aspectos filosóficos a tener en cuenta en el diseño de un Web. 2. 3. Etapas de Desarrollo de un proyecto de sitio Web El desarrrollo de un proyecto de sitio Web puede dividirse en tres etapas principales: 1.

2.

3.

Prediseño, Diseño, Instalación y prueba.

El punto de vista desde el cual se analiza el proceso de diseño no es desde la interrelación usuario-tecnología, sino como interacción humana, mediatizada por la técnología. Es decir, entender a la Web como medio de comunicación entre personas. Esto nos debe ayudar a pensar permanentemente en "el otro", la persona invisible y desconocida para quien hacemos la página Web. De todas las palabras que utilizamos al hablar de Internet, la que más deben tener en cuenta los diseñadores es la que designa al acto de instalar un sitio, pensar en el público, pensar en cómo piensa el público.

Etapa de la conceptualización Planificar la Web Objetivos AJUSTE Público Se corrigen los Contenido elementos de Estructura prediseño que no Visualización cumplen los requerimientos 1. Prediseño A la etapa de Prediseño o conceptualización podemos dividirla en cinco componentesstro análisis. Ellos son: objetivos, público, contenidos, estructura y visualización. Estos interactúan entre sí y se condicionan mutuamente.

Objetivos Este es uno de los elementos más importantes, que determina a los otros. Hay que responder a la pregunta: ¿para qué se pública este sitio?; ¿qué quiero que suceda raíz de mi publicación en la Web?.

Las respuestas deben ser del tipo como por ejemplo: quiero que los clientes puedan actualizar la lista de precios, en forma sencilla, que acceda al catalogo electrónico de productos y puedan hacer sus pedidos automáticamente, contribuir acerca de la necesidad de

9

MANUAL DE HTML

DISEÑO WEB

conservar las especies en peligro de extensión, etc. Estar en Internet no es una respuesta válida.

En la elaboración del objetivo(si existe más de uno, hay que listarlos a todos y jerarquizar) conviene que participen todas las personas que tienen que ver o están interesadas en el éxito del proyecto.

En este momento habría que validar si las aspiraciones expresadas en los objetivos son compatibles con el funcionamiento de Internet. Por ejemplo, si bien es posible vender libros, discos, pizzas o corbatas a través de Internet, posiblemente no funcione con calzado, que necesita ser físicamente probado.

Público Al hablar de público no nos referimos a cualquier persona que recorriendo la red llegue a nuestra página, sino a aquella parte de la población a la que pretendemos alcanzar e influir con el mensaje. Esto esta estrechamente vinculado con los objetivos establecidos y la naturaleza del sitio que nos proponemos.

Necesitamos construir un identikit de nuestro público, tratando de definir, en general sus intereses, inclinaciones, gustos, preferencias, etc., y en particular, como usuarios de Internet. Tenemos que dar una respuesta lo más concreta y específicamente posible a la pregunta "esa gente, ¿qué busca de mi página?". Porque la Web debería dar respuesta a esa pregunta.

Todo lo que sepamos y supongamos sobre el público-target (el que nos interesa) servirá, además, para establecer parte de los criterios de diseño de contenidos, lenguajes, estética.

Contenidos Se debe listar la información que se desea incluir en la Web. Esta información debe ser significativa, y útil para el público. Teniendo en cuenta lo que a ellos les interesa, no lo que a nosotros nos gustaría que nos interese.

En el caso de que existan otras formas de acceso a información disponible para esas mismas personas, el contenido de la Web deberá ser superador de esos otros materiales. Es decir que si los clientes de una firma reciben un folleto en el que se describen los servicios que se prestan, el sitio Web al que accederán luego no puede repetir simplemente lo que allí se dice.

Información, no textos redundantes sobre la importancia de esa información.

El lenguaje utilizado para brindar la información en Internet debe ser sobrio, conciso, concreto. No funciona bien el lenguaje insinuante y ambiguo que puede ser perfecto para avisos gráficos o folletería.

Todo lo que se hace contribuye a formar la imagen que tiene el público de la empresa, marca, producto, institución o servicio. La Web no es una excepción y cualquier sentimiento de frustración que experimente el usuario no se canalizará hacia el o los autores del sitio Web, sino hacia la imagen que mencionamos.

Estructura

Lenguaje de Marcado de Hipertexto

10

CENTRO DE ENSEÑANZA TECNICO EN INFORMATICA CETI La organización de la información es un tema clave para asegurar un buen funcionamiento de un sitio.

El primer elemento organizador son las páginas. Conviene incluir en cada una de ellas una unidad de información autónoma, completa. En el caso de que el volumen sea excesivo para ello, dividir esa unidad de información en subunidades más pequeñas, coherentes, completas cada una en sí misma. Una unidad de información es un tema o un subtema.

Las relaciones de las páginas entre sí configuran la estructura del sitio. A partir de la página principal o home page se vinculan mediante links el resto de las páginas. Esto es bastante sencillo de implementar en lenguaje HTML, pero es más complicado decidir de que manera, en qué orden, con qué configuración se establecerá la cadena de vínculos.

Ante todo hay que tener en cuenta que la estructura debe responder a los criterios de búsqueda. Hay que hacerse la pregunta acerca de ¿cómo se intentará encontrar esta información?. Los criterios " naturales" de clasificación pueden no ser adecuados. Por ejemplo, es común que quienes venden repuestos acomoden los mismos por tipo: juntas por aquí, poleas por allí, resortes de este lado. El usuario, a su vez, necesita el repuesto para una máquina o artefacto, marca, modelo, función del repuesto que busca. Los links y la estructura del sitio tendrán que tener en cuenta estas cuestiones.

El otro tema es que los usuarios reconocen las páginas de la Web utilizando como guía palabras clave colocadas en botones, barras de control, gráficos mapeados, o utilizadas como marcas de hipertexto; palabras que por su significado indican o sugieren el contenido de páginas a las que derivan. Es sabido que los significados de las palabras no son unívocos, y la ambigüedad puede ser un problema. El conocimiento de la cultura y usos lingüísticos del público nos será sin duda, de gran utilidad a la hora de elegir las palabras que se titularán nuestros botones o identificarán los links de derivación a otras páginas del sitio.

Hay que tener en cuenta que el usuario no tiene cómo saber la manera en que sigue la cadena de links más allá de las páginas a las que puede entrar directamente desde el lugar donde se encuentra. Que el usuario no encuentre la información buscada después de recorrer cuatro o cinco páginas encadenadas puede significar que el mismo abandone el sitio o la indeseada sensación de frustración que nos interesa evitar.

Un tema relacionado a éste es el de los mecanismos de identificación y de recorrido del sitio.

Estos deberían permitir al usuario saber en todo momento el lugar o zona del sitio donde se encuentra, así como desplazarse hacia cualquier otra página sin necesidad de recorrer toda la cadena en sentido inverso. Los paneles de control son una buena ayuda.

Visualización Un sitio Web no es una torta. La gráfica (incluida elementos multimedia) de un sitio Web debe se una herramienta de comunicación al servicio de los objetivos planteados y condicionados por las pautas culturales (preferencias, gustos) del público.

Esto significa que tampoco es un espacio de lucimiento del diseñador, ni la estética.

Debe adecuarse a los gustos y preferencias de los responsables del sitio. Una vez más los objetivos trazados y el perfil del público deberían ser los instrumentos para tomar las decisiones de diseño gráfico y multimedia.

Además de los criterios estéticos y comunicacionales del diseño gráfico, es importante respetar los criterios técnicos específico: 1. Que cada página sea fácil de cargar.

La velocidad de carga de una página está en función del estado de las líneas y de la

11

MANUAL DE HTML

DISEÑO WEB

cantidad de información que contiene. Sobre el primer parámetro no hay nada que podamos hacer desde el diseño, pero sí sobre el segundo: establecer para cada página un máximo de bytes y no sobrepasarlo.

Realizar los gráficos del tamaño más chico posible.

Repetir los iconos siempre que sea posible. El browser los leerá de la memoria caché a partir de la segunda vez que deba colocarlos en la página.

Grabar cada gráfico en formato GIF y JFG, verificar el tamaño de ambos y descartar el mayor.

Reducir la cantidad de colores de cada gráfico al mínimo indispensable. De todos modos, la mayor parte de los usuarios no pueden visualizar más de 256.

Reflexionar cuidadosamente sobre la utilización de recursos de multimedia: ¿agregan algo realmente a la página? .

2. Que las páginas sean fáciles de leer.

Resolver el contraste texto/fondo con valores de luminosidad y no sólo decolor.

Eliminar el color del monitor, si tiene esa posibilidad, o imprimir la página en un láser monocroma para verificar esto.

Tener cuidado con las texturas del fondo: no deben tener un dibujo excesivamente nítido que perjudique la lectura. Tampoco es conveniente que sean motivos muy contrastados (contornos claros y oscuros), ya que se verán mal tanto los textos oscuros como los claros. En el caso de utilizar texturas fuertes, agrandar los suficiente el tamaño de la tipografía.

El tamaño de la tipografía debe ser adecuado para ser leído sin dificultad aun en computadoras seteadas con altas resoluciones de pantalla.

Es importante jerarquizar los títulos, subtítulos, manteniendo la coherencia de los estilos en todo el sitio. Para eso es una buena ayuda escribir una pequeña norma que establezca el tamaño relativo de la tipografía para cada categoría de títulos, y subtítulos, así como si éstos van centrados, alineados, con bullets, etc.

3. Establecer guías visuales que permitan saber que cada página pertenece al mismo sitio.

La coherencia visual ayuda en ese sentido. Un sitio en el que cada página tiene un fondo diferente, varían los iconos y cambian otros componentes de la composición visual, desconcierta al usuario, que no sabe si está en el mismo sitio o si el último link lo llevó al otro extremo del mundo.

2. Diseño Cuando hablamos sobre diseño de páginas Web, realmente nos referimos al HTML o Hypertext Markup Language. El lenguaje HTML consiste en una serie de comandos que le indican al programa navegador de WWW cómo darle formato al texto que contienen los archivos. En la actualidad no hace falta ser un experto en HTML debido a que los procesadores de texto existentes se encargan de hacer el trabajo, agregando el código automáticamente, a lo que queremos mostrar.

Los servicios de diseño de páginas Web cubren un rango que va desde convertir archivos de texto a formato HTML, hasta desarrollar extensos conjuntos de páginas cargadas de ilustraciones e hipervínculos relacionados entre sí. Podría dársele un enfoque especial a su página para algún programa navegador específico, pero siempre debe asegurarse de que las páginas sean vistas por el mayor número de plataformas posibles.

Lenguaje de Marcado de Hipertexto

12

CENTRO DE ENSEÑANZA TECNICO EN INFORMATICA CETI La tarea de diseño de páginas Web convoca por lo menos tres especialidades diferentes: comunicación (humana), programación (HTML, CGI, Java), diseño gráfico y multimedia.

Ninguna de estas especialidades tiene en sí misma todos los recursos para llevar a cabo proyectos de Web exitosos.

En los proyectos de sitios Web no participan sólo los especialistas contratados o designados para ello. Las empresas o institución que origina la demanda tiene diversos grados de responsabilidad y compromiso con la publicación del sitio.

3. Instalación y Pruebas En esta etapa nos encargamos de la puesta en marcha, correcciones y ajustes finales.

Se debe hacer que todo funcione.

Debemos hacer la prueba de todos los enlaces o links, corroborar el correcto funcionamiento de todos los elementos de multimedia y del funcionamiento de formularios, e-mail, buscadores, etc.

La transferencia de archivos a la Web, se realiza a través de FTP (File Transfer Protocol), generalmente, se necesita un nombre de usuario y una clave de acceso.

13

MANUAL DE HTML

DISEÑO WEB

2 – Concepto de HTML Lenguaje HTML Por medio del lenguaje HTML (HyperText Markup Languaje) (Lenguaje de Marcado de Hipertexto), podemos navegar por miles y miles de páginas a través de la WWW. Este lenguaje está constituido de elementos que el navegador interpreta y las despliega en la pantalla de acuerdo a su objetivo. Veremos que hay elementos para disponer imágenes sobre una página, hipervínculos que nos permiten dirigirnos a otra página, listas, tablas para tabular datos, etc.

Para poder crear una página HTML se requiere un simple editor de texto (en nuestro caso emplearemos este sitio) y un navegador de internet (IExplorer, FireFox etc.), emplearemos el navegador que en este preciso momento está utilizando (recuerde que usted está viendo en este preciso momento una página HTML con su navegador).

Lo más importante es que en cada concepto desarrolle los ejercicios propuestos y modifique los que se presentan ya resueltos.

Este curso lo que busca es acercar el lenguaje HTML a una persona que nunca antes trabajó con el mismo. No pretende mostrar todas los elementos HTML en forma alfabética.

Como veremos, de cada concepto se presenta una parte teórica, en la que se da una explicación completa, luego se pasa a la sección del ejercicio resuelto donde podemos ver el contenido de la página HTML y cómo la visualiza el navegador. Por último y tal vez la sección más importante de este tutorial es donde se propone que usted haga páginas en forma autónoma (donde realmente podrá darse cuenta si el concepto quedó firme).

Las instrucciones HTML están encerradas entre los caracteres: < y >.

Muchos elementos HTML requieren una marca de comienzo y otra de finalización. Todo aquello que está fuera de las marcas del lenguaje se imprime en la pantalla (dentro del navegador).

La estructura básica de una página HTML es:

Este codigo se digitara en el Blog de Notas de Accesorios de Windows.

Lenguaje de Marcado de Hipertexto

14

CENTRO DE ENSEÑANZA TECNICO EN INFORMATICA CETI Una página HTML es un archivo que generalmente tiene como extensión los caracteres html.

Por ejemplo podemos llamar a nuestra primera página con el nombre: pagina1.html Durante este curso no necesitará utilizar otra herramienta más que este sitio. Veremos que contamos con una ventana donde tipeará la página y en otra verá los resultados que genera el navegador. No significa que no pueda hacerse una copia de los ejercicios que desarrolla y almacenarlos en su computadora.

Estos son los elementos básicos que toda página HTML debe llevar.

Si observamos toda página comienza con la marca:<html> y finaliza con la marca:</html> Los fines de marcas tienen el mismo nombre que el comienzo de marca, más el caracter / Una página HTML tiene dos secciones muy bien definidas que son la cabecera: <head> </head> Y el cuerpo de la página: <body> Cuerpo de la página. </body> Todo el texto que dispongamos dentro del <body> aparece dentro del navegador tal cual lo hayamos escrito.

Todas las páginas tiene como mínimo esta estructura: cabecera y cuerpo.

Otra cosa importante es que el lenguaje HTML no es sensible a mayúsculas y minúsculas, es decir podemos escribirlo como más nos guste, además no requiere que dispongamos cada marca en una línea (podríamos inclusive escribir toda la página en una sola línea! cosa que no conviene ya que somos nosotros quienes tendremos que modificarla en algún momento).

Ahora puede ir a la sección de problema resuelto y ver el ejemplo ejecutándose en el navegador. Podrá ver la pantalla dividida en tres partes: primero se enuncia el problema, la segunda parte es el editor donde tipeamos la solución al problema (en este caso ya está resuelto por lo que aparece automáticamente) y la última sección de la pantalla muestra la página ejecutándose en el navegador.

Por último deberá resolver un problema, es decir confeccionar una página HTML. Recomiendo tipear las marcas HTML para aprenderlas de memoria. No es conveniente copiar y pegar.

Cuando recuerde todas las marcas, podrá copiar y pegar trozos de páginas HTML para agilizar el desarrollo.

Problema: Confeccionar una página que muestre los nombres de 5 lenguajes de programación separados por un guión. <html> <head> </head> <body> PHP - Java - JavaScript - C - C++ </body> </html>

Resultado PHP - Java - JavaScript - C - C++

15

MANUAL DE HTML

DISEÑO WEB

El texto (III) Formatear el texto <font> ...

Las propiedades del texto pueden modificarse a través de la etiqueta <font>. Para ello, podemos insertar el texto entre las etiquetas <font> y </font>, especificando algunos de los atributos de la etiqueta:

Bienvenidos a Diseño Web Habría que escribir:

<font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans Serif">Bienvenidos a Diseño Web</font> También es posible definir una fuente para todo el documento. Para ello, hay que insertar la etiqueta <basefont> después de la etiqueta <body>.

La etiqueta <basefont> no necesita una etiqueta de cierre, y permite modificar los mismos atributos del texto que la etiqueta <font>.

Por ejemplo: Atributo

face color

Significado fuente

Posibles valores nombre de la fuente, o fuentes

color del texto

número hexadecimal o texto predefinido

size

tamaño del texto

valores del 1 al 7, siendo por defecto el 3, o desplazamiento respecto al tamaño por defecto, añadiendo + o - delante del valor

Por ejemplo, para insertar el texto:

<body> <basefont color="#006699" size="4" face="Arial"> Este código haría que la fuente del documento fuera por defecto de color azul, de tamaño 4 y Arial. Si después de indicar la etiqueta <basefont> o <font>, el navegador encuentra otra etiqueta <font>, la que prevalece es siempre la última que se encuentra. continuación se muestran algunas etiquetas asociadas al tipo de letra: Etiqueta

Significado

Ejemplo

<b> <i> <u> <s> <tt> <big>

negrita

curso HTML aulaclic

<small>

cursiva

curso HTML aulaclic

subrayado

curso HTML aulaclic

tachado

curso HTML aulaclic

teletipo (máquina de escribir)

curso HTML aulaclic

aumenta el tamaño de la fuente

curso HTML aulaclic

disminuye el tamaño de la fuente

curso HTML aulaclic

Lenguaje de Marcado de Hipertexto

16

CENTRO DE ENSEÑANZA TECNICO EN INFORMATICA CETI A continuación se muestran algunas etiquetas asociadas al tipo de información: Etiqueta

Significado

Ejemplo

<cite> <code> <dfn> <del> <em> <ins>

cita

curso HTML aulaclic

ejemplo de código

curso HTML aulaclic

definición

curso HTML aulaclic

eliminado énfasis

curso HTML aulaclic

insertado

curso HTML aulaclic

<kbd>

teclado

curso HTML aulaclic

<samp>

muestra

curso HTML aulaclic

<strong>

destacado

curso HTML aulaclic

<sub>

subíndice

curso HTML aulaclic

<sup>

superíndice

<var>

variable

curso

HTML

aulaclic

curso HTML aulaclic

3 - Salto de línea <br> Todo el texto que disponemos en el cuerpo de la página aparece en la misma línea, no importa si cuando tipeamos la página disponemos cada palabra en una línea distinta (es decir un navegador no tiene en cuenta la tecla ENTER).

Para indicarle al navegador que queremos que continúe en la próxima línea debemos hacerlo con el elemento HTML <br>.

Cuando aparece la marca <br> el navegador continúa con el texto en la línea siguiente. Es uno de los pocos elementos HTML que no tiene marca de cerrado como habíamos visto hasta ahora.

Implementemos una página que muestre los nombres de distintos lenguajes de programación uno por línea: <html> <head> </head> <body> PHP<br> JavaScript<br> Java<br> C<br> C++ </body> </html> Como vemos sólo hemos agregado la marca <br> cada vez que queremos comenzar una línea.

Tengamos en cuenta que es indistinto si disponemos la marca en la misma línea o en la siguiente: PHP<br> es lo mismo: PHP

17

MANUAL DE HTML

DISEÑO WEB

<br> Para recordar los nombres de los elementos HTML es bueno ver cual es la palabra completa de la misma: <br> viene de break html> <head> </head> <body> PHP<br> JavaScript<br> Java<br> C<br> C++ </body> </html>

resultado PHP JavaScript Java C C++

4 - Párrafo <p> Un párrafo es una oración o conjunto de oraciones referentes a un mismo tema. Todo lo que encerremos entre las marcas <p> y </p> aparecerá separado por un espacio con respecto al próximo párrafo.

Dentro de un párrafo puede haber saltos de línea <br>.

Veamos con un ejemplo como disponer dos párrafos: <html> <head> </head> <body> <p> SQL, Structure Query Language (Lenguaje de Consulta Estructurado) es un lenguaje de programacion para trabajar con base de datos relacionales como MySQL, Oracle, etc.<br> MySQL es un interpretador de SQL, es un servidor de base de datos.<br> MySQL permite crear base de datos y tablas, insertar datos, modificarlos, eliminarlos, ordenarlos, hacer consultas y realizar muchas operaciones, etc., resumiendo: administrar bases de datos. </p> <p> Este tutorial tiene por objetivo acercar los conceptos iniciales para introducirse en el mundo de las bases de datos. </p> </body> </html>

Tenemos en esta página HTML dos párrafos, cuando el navegador interpreta esta página, separa los contenidos de los dos párrafos con un espacio horizontal. Además el primer párrafo

Lenguaje de Marcado de Hipertexto

18

CENTRO DE ENSEÑANZA TECNICO EN INFORMATICA CETI contiene varios saltos de línea. Normalmente uno agrupa en párrafos para dar más sentido a nuestro escrito.

Cuando modificamos la ventana del navegador los párrafos se acomodan automáticamente de acuerdo al ancho de la ventana.

Para recordar el nombre de esta marca HTML: <p> viene de paragraph Ejercicio: Problema: Confeccione una página que muestre dos párrafos. En el primero agregar varios saltos de línea. <html> <head> </head> <body> <p> e SQL, Structure Query Language (Lenguaje de Consulta Estructurado) es un lenguaje de programacion para trabajar con base de datos relacionales como MySQL, Oracle, etc.<br> MySQL es un interpretador de SQL, es un servidor de base de datos.<br> MySQL permite crear base de datos y tablas, insertar datos, modificarlos, eliminarlos, ordenarlos, hacer consultas y realizar muchas operaciones, etc., resumiendo: administrar bases de datos. </p> <p> Este tutorial tiene por objetivo acercar los conceptos iniciales para introducirse en el mundo de las bases de datos. </p> </body> </html>

5 - Títulos <h1><h2><h3><h4><h5><h6> Otros elementos HTML muy utilizados son para indicar los títulos, para esto contamos con los elementos: <h1><h2><h3><h4><h5><h6> El título de mayor nivel es <h1>, es decir el que tienen una fuente mayor (veremos que es el navegador el responsable de definir el tamaño de la fuente, más adelante podrá ver que uno puede modificar la fuente, tamaño, color etc.)

Según la importancia del título utilizaremos alguno de estos elementos HTML. Requiere la marca de cerrado del título con la barra invertida como hemos visto.

Confeccionaremos una página que contenga un título de primer nivel <h1> y luego dos títulos de nivel <h2>. Definiremos un párrafo para cada título de segundo nivel.

19

MANUAL DE HTML

DISEÑO WEB

pagina1.html <html> <head> </head> <body> <h1>Tipos de datos en MySQL</h1> <h2>varchar</h2> <p> Se usa para almacenar cadenas de caracteres. Una cadena es una secuencia de caracteres.

Se coloca entre comillas (simples): 'Hola'.<br> El tipo "varchar" define una cadena de longitud variable en la cual determinamos el máximo de caracteres. Puede guardar hasta 255 caracteres.

Para almacenar cadenas de hasta 30 caracteres, definimos un campo de tipo varchar(30). </p> <h2>int</h2> <p> Se usa para guardar valores numéricos enteros, de -2000000000 a 2000000000 aproximadamente.<br> Definimos campos de este tipo cuando queremos representar, por ejemplo, cantidades. </p> </body> </html>

Cada título aparece siempre en una línea distinta, no importa si lo tipeamos seguido en el archivo, es decir el resultado será igual si hacemos: <h1>Tipos de datos en MySQL</h1> <h2>varchar</h2> o esto: <h1>Tipos de datos en MySQL</h1><h2>varchar</h2> El navegador dispone cada título en una línea nueva.

Recordemos que el HTML no tiene la responsabilidad de indicar el tamaño de las fuentes. El navegador definirá el tamaño de fuente según el nivel de título que indiquemos. La de tamaño más grande es la de nivel 1 <h1>. <h1> viene de heading heading significa título.

Lenguaje de Marcado de Hipertexto

20

CENTRO DE ENSEÑANZA TECNICO EN INFORMATICA CETI Ejercicio

Problema: Confeccionar una página que contenga un título de primer nivel <h1> y luego dos títulos de nivel <h2>. Definir un párrafo para cada título de segundo nivel.

<html> <head> </head> <body> <h1>Tipos de datos en MySQL</h1> <h2>varchar</h2> <p> se usa para almacenar cadenas de caracteres. Una cadena es una secuencia de caracteres. Se coloca entre comillas (simples): 'Hola'.<br> El tipo "varchar" define una cadena de longitud variable en la cual determinamos el máximo de caracteres. Puede guardar hasta 255 caracteres. Para almacenar cadenas de hasta 30 caracteres, definimos un campo de tipo varchar(30). </p> <h2>int</h2> <p> Se usa para guardar valores numéricos enteros, de -2000000000 a 2000000000 aproximadamente.<br> Definimos campos de este tipo cuando queremos representar, por ejemplo, cantidades. <marquee bgcolor="#006699" behavior="alternate" direction="right"> <b><font color="#FFFFCC" size="5">Esto es una marquesina </font></b> </marquee> </p> </body> </html>

Marquesinas <marquee> Las marquesinas son líneas de texto que pueden desplazarse de un lado a otro de la ventana en forma de línea.

Para insertar una marquesina, es necesario insertar el texto entre las etiquetas <marquee> y </marquee>.

La marquesina, por defecto, se desplaza de derecha a izquierda indefinidamente, pero si lo deseas puedes hacer que estas propiedades varíen.

A través del atributo behavior puede modificarse el tipo de movimiento. Puede tomar los valores alternate (de lado a lado de la ventana, como si rebotara en los extremos), scroll (de un lado a otro, continuamente) o slide (de un lado a otro, pero una sola vez).

A través del atributo direction puede modificarse la dirección en la que se moverá el texto. Puede tomar los valores down (de arriba a abajo), up (de abajo a arriba), left (de derecha a izquierda) o left (de izquierda a derecha).

También es posible establecer un color de fondo, a través del atributo bgcolor.

Ejemplo: <marquee bgcolor="#006699" behavior="alternate" direction="right"> <b><font color="#FFFFCC" size="5">Esto es una marquesina </font></b> </marquee>

21

MANUAL DE HTML

DISEÑO WEB

También es posible insertar imágenes, tablas y otros elementos entre las etiquetas <marquee> y </marquee>, no sólamente texto.

Los colores y HTML El la composición de webs juegan un papel muy importante los colores. Se indican en valores RGB, es decir, que para conseguir un color cualquiera mezclaremos cantidades de Rojo, Verde y Azul.

Los valores RBG se indican en numeración hexadecimal, en base 16. (Los dígito pueden crecer hasta 16. Como no hay tantos dígitos numéricos se utilizan las letras de la A a la F.

Primarios aditivos saturados (absolutos) ROJO = FF0000 VERDE = 00FF00 AZUL = 0000FF Combinación de los tres primarios aditivos saturados (absolutos). o BLANCO = FFFFFF

Primarios sustractivos nulos (absolutos) CYAN = 0x00FFFF MAGENTA = 0xFF00FF AMARILLO = 0xFFFF00 Combinación de los tres primarios sustractivos nulos (absolutos) o NEGRO = 0x000000

Algunos secundarios y terciarios (medianos) GRIS = 0x808080 ROSA = 0xFF8080 VIOLETA = 0x800080 CELESTE = 0x80FFFF MARRON = 0x800000 NARANJA = 0xFF8000 LAVANDA = 0x8000FF TURQUESA = 0x00FF80 ORO VIEJO = 0xBBBB20

6 - Enfasis (<em> <strong>) Enfatizar algo significa realzar la importancia de una cosa, por ejemplo una palabra o conjunto de palabras.

Lenguaje de Marcado de Hipertexto

22

CENTRO DE ENSEÑANZA TECNICO EN INFORMATICA CETI Así como tenemos seis niveles de títulos para enfatizar un bloque contamos con dos elementos que son (<em> <strong>) El elemento de mayor fuerza de énfasis es strong y le sigue em Veamos un ejemplo del empleo de estos dos elementos HTML: <html> <head> </head> <body> <p><strong>Típos de datos</strong> en MySQL</p> <p><em>TEXTO</em>: Para almacenar texto usamos cadenas de caracteres.

Las cadenas se colocan entre comillas simples. Podemos almacenar dígitos con los que no se realizan operaciones matemáticas, por ejemplo, códigos de identificación, números de documentos, números telefónicos.

Tenemos los siguientes tipos: varchar, char y text.</p> <p><em>NUMEROS</em>: Existe variedad de tipos numéricos para representar enteros, negativos, decimales. Para almacenar valores enteros, por ejemplo, en campos que hacen referencia a cantidades, precios, etc., usamos el tipo integer. Para almacenar valores con decimales utilizamos: float o decimal.</p> <p><em>FECHAS Y HORAS</em>: para guardar fechas y horas dispone de varios tipos: date (fecha), datetime (fecha y hora), time (hora), year (año) y timestamp.</p> </body> </html> Podemos ver que la sintaxis para el elemento strong es: <strong>Típos de datos</strong> La mayoría de los navegadores muestran el texto enfatizado con strong con un texto en negrita y para el elemento em utilizan letra itálica (de todos modos esto no es obligatorio, pero seguramente mostrarán los textos enfatizados).

Otra cosa importante que podemos hacer notar es que estos elementos HTML no producen un salto de línea como los de título (h1,h2 etc.)

Para recordar el nombre de estos elementos HTML: <em> viene de empathize que significa énfasis. <strong> viene de strong que significa fuerte.

23

MANUAL DE HTML

DISEÑO WEB

7 - Hipervínculo a otra página del mismo sitio <a> El elemento más importante que tiene una página de internet es el hipervínculo, estos nos permiten cargar otra página en el navegador. Esto es lo que hace diferente la página de un libro con la página de un sitio en internet. Normalmente un libro lo recorremos en forma secuencial, pero un sitio de internet podemos disponer estos enlaces entre un conjunto de páginas y luego tener distintas alternativas de recorrido.

Normalmente un navegador al encontrar esta marca muestra un texto subrayado, y al hacer clic con el mouse sobre éste el navegador carga la página indicada por dicho hipervínculo.

Primero veremos cual es la sintaxis para disponer un hipervínculo a una página que se encuentra en el mismo sitio (es decir otra página que hemos desarrollado nosotros).

La marca de hipervínculo a otra página del mismo sitio tiene la siguiente sintaxis: <a href="pagina2.html">Noticias</a> Como vemos, se trata de otro elemento HTML que tiene comienzo de marca y fin de marca.

Lo que se encuentra entre el comienzo de marca y el fin de la marca es el texto que aparece en la página (normalmente subrayado).

Lo nuevo que aparece en este elemento es el concepto de una propiedad. Una propiedad se incorpora en el comienzo de una marca y tiene un nombre y un valor.

El valor de la propiedad debe ir entre comillas dobles.

La propiedad href del elemento "a" hace referencia a la página que debe mostrar el navegador si el visitante hace clic sobre el hipervínculo.

Ejercicio: Problema:Confeccionar una página principal que tenga un hipervínculo a otra página secundaria. La página secundaria debe tener también un hipervínculo a la página principal.

Implementemos dos páginas que contengan hipervínculos entre si, los nombres de las páginas HTML serán: pagina1.html y pagina2.html pagina1.html

pagina2.html

<html> <head> </head> <body> <h1>Página principal.</h1> <a href="pagina2.html">Noticias</a> </body> </html>

<html> <head> </head> <body> <h1>Noticias.</h1> <a href="pagina1.html">Salir.</a> </body> </html>

Como podemos observar lo nuevo en la pagina1.html es el hipervínculo a la pagina2.html: <a href="pagina2.html">Noticias</a>

Lenguaje de Marcado de Hipertexto

24

CENTRO DE ENSEÑANZA TECNICO EN INFORMATICA CETI Toda propiedad toma el valor que se encuentra seguidamente del caracter = El valor de la propiedad href en este caso es pagina2.html (es otro archivo HTML que debe encontrarse en nuestro sitio y en el mismo directorio).

El segundo archivo pagina2.html tiene un hipervínculo a la primer página: <a href="pagina1.html">Salir.</a> Para recordar el nombre de esta marca HTML: <a> viene de anchor que significa ancla.

8 - Hipervínculo a otro sitio de internet <a> La sintaxis para disponer un hipervínculo a otro sitio de internet es: <a href="http://www.google.com">Buscador Google</a> Ahora la propiedad href la inicializamos con el nombre del dominio del otro sitio.

Algo importante que hay que anteceder al nombre del dominio es el tipo de protocolo a utilizar. Cuando se trata de una página de internet, el protocolo es el http.

Resumiendo a la propiedad href la inicializamos con el nombre del protocolo (http) seguida de dos puntos (:) y dos barras (//) luego la cadena (www.) y finalmente el nombre de dominio del sitio a enlazar.

La siguiente página muestra un hipervínculo al sitio principal del buscador Google: <html> <head> </head> <body> <a href="http://www.google.com">Buscador Google</a> </body> </html>

Si analizamos un poco y pensamos que esta marca nos permite pedir una página a un servidor para que la cargue en el navegador: Qué página nos retorna del dominio www.google.com ?

La respuesta es que todo servidor cuando recibe una petición de una página sin indicar su nombre (es decir sólo está el nombre de dominio) selecciona y envía una página que tiene configurada el servidor como página por defecto (generalmente esa página es la principal del sitio y a partir de la cual podemos navegar mediante hipervínculos a otras páginas que se encuentran en dicho dominio).

Podemos enlazar a una página determinada de otro sitio. Veamos un ejemplo, si queremos disponer un enlace (hipervínculo) a la pagina about.html de google la sintaxis será la siguiente:

25

MANUAL DE HTML

DISEÑO WEB

<a href="http://www.google.com/intl/en/about.html">Acerca de Google</a> Debemos conocer exactamente el nombre de la página (en este caso about.html) y también si la página no se encuentra en el directorio raiz debemos saber exactamente el camino de directorios (en este caso /intl/en/)

9 - Imágenes dentro de una página <img> Para insertar una imagen dentro de una página debemos utilizar el elemento HTML <img>, la misma no tiene una marca de finalización (similar a la marca <br>).

Generalmente, la imagen se encuentra en el mismo servidor donde se almacenan nuestras páginas HTML. Los formatos clásicos son los archivos con extensiones gif, jpg y png.

La sintaxis de esta marca es: <img src="foto1.jpg" alt="Pintura geométrica"> Como mínimo, debemos inicializar las propiedades src y alt de la marca HTML img.

En la propiedad src indicamos el nombre del archivo que contiene la imagen (en un servidor Linux es sensible a mayúsculas y minúsculas por lo que recomiendo que siempre utilicen minúsculas para los nombres de archivos).

Como la imagen se encuentra en el mismo directorio donde se almacena la página HTML, con indicar el nombre de archivo basta (no es necesario indicar ninguna ruta de carpetas).

Otra propiedad obligatoria es alt, donde disponemos un texto que verán los usuarios que visiten el sitio con un navegador que sólo permite texto (o con un navegador que tenga desactivada la opción de descarga de imágenes). El texto debe describir el contenido de la imagen.

Ejercicio: Confeccionemos una página que muestre una imagen llamada foto1.jpg (La imagen se encuentra almacenada en el servidor en la misma carpeta donde se localiza esta página) <html> <head> </head> <body> <img src="foto1.jpg" alt="Pintura geométrica"> </body> </html> Si la imagen se encuentra en una subcarpeta llamada imagenes, luego la sintaxis para recuperarla será: <img src="imagenes/foto1.jpg" alt="Pintura geométrica"> Es decir, antecedemos al nombre de la imagen el nombre de la carpeta y la barra / Si la imagen se encuentra en una carpeta padre de donde se encuentra la página HTML luego la sintaxis será: <img src="../foto1.jpg" alt="Pintura geométrica">

Lenguaje de Marcado de Hipertexto

26

CENTRO DE ENSEÑANZA TECNICO EN INFORMATICA CETI Es decir, le antecedemos .. y la barra / al nombre de la imagen Si queremos subir dos carpetas luego escribimos: <img src="../../foto1.jpg" alt="Pintura geométrica"> Por último, si queremos acceder a una imagen que se encuentra en una carpeta llamada imagenes pero que está al mismo nivel: <img src="../imagenes/foto1.jpg" alt="Pintura geométrica"> Primero le indicamos que subimos al directorio padre mediante los dos puntos .. y seguidamente indicamos el nombre de la carpeta y la imagen a mostrar. <img> viene de image src viene de source alt viene de alternative

10 - Hipervínculo mediante una imagen <a> y <img> Como ya conocemos los hipervínculos y como insertar imágenes en nuestra página, ahora podemos implementar un hipervínculo pero en vez de mostrar un texto mostraremos una imagen.

La solución es simple y consiste en disponer la marca <img> encerrada entre la marca de comienzo y fin del enlace(<a>) Confeccionemos una página que muestre dos imagenes (foto1.jpg y foto2.jpg) como hipervínculos. Al ser presionados llamar a otra página.

Las imágenes se encuentran en una carpeta llamada imagenes que depende directamente de la raiz del sitio: <html> <head> </head> <body> <h2>Presione alguna de las imagenes para conocer más sobre esa obra.</h2> <a href="pagina2.html"><img src="/imagenes/foto1.jpg" alt="Pintura Geométrica"></a> <br> <a href="pagina2.html"><img src="/imagenes/foto2.jpg" alt="Pintura Geométrica"></a> </body> </html>

Como podemos observar insertamos la marca HTML img en el lugar donde disponíamos el texto del hipervínculo. Eso es todo.

Lo que debe quedar bien en claro es que las imágenes se encuentran en un directorio llamado imagenes en la raiz del sitio (luego para indicar la referencia al archivo lo hacemos antecediendo la barra invertida / con lo que hacemos referencia a que partimos desde la raiz del sitio) en una carpeta llamada imagenes (/imagenes/foto1.jpg)

27

MANUAL DE HTML

DISEÑO WEB

Es bueno practicar con esto ya que cuando implementemos sitios muy grandes seguramente agruparemos cada módulo en distintas carpetas.

Ejecicios:

Problema: Implementar una página que muestre una imagen llamada foto1.jpg que se encuentra en el mismo servidor y en la misma carpeta donde se localiza el archivo HTML.

<html> <head> </head> <body> <img src="foto1.jpg" alt="Pintura geométrica"> </body> </html> Ejercicio Problema Confeccionar una página que muestre dos imagenes (foto1.jpg y foto2.jpg) como hipervínculos.

Al ser presionados llamar a otra página.

Las imágenes se encuentran en una carpeta llamada imagenes que depende directamente de la raiz del sitio. <html> <head> </head> <body> <h2>Presione alguna de las imagenes para conocer más sobre esa obra.</h2> <a href="pagina2.html"><img src="/imagenes/foto1.jpg" alt="Pintura Geométrica"> </a> <br> <a href="pagina3.html"><img src="/imagenes/foto2.jpg" alt="Pintura Geométrica"> </a> </body> </html> Pagina2.html <html> <head> </head> <body> <p>Esta obra fue desarrollada en el año 2003</p> <a href="pagina1.html">Retornar</p> </body> </html> Pagina3.html <html> <head> </head> <body> <p>Esta obra fue desarrollada en el año 2006</p> <a href="pagina1.html">Retornar</p> </body> URLs </html>

Lenguaje de Marcado de Hipertexto

28

CENTRO DE ENSEÑANZA TECNICO EN INFORMATICA CETI URL: Localizador Universal de Recursos Los URL son las direcciones de las informaciones que buscamos en Internet. Los URL constan de tres partes: 1.

Protocolo: Es el programa que utilizará el navegador para obtener el archivo elegido.

Les suena HTTP, FTP, Gopher...

2. Nombre del host: Se trata del sistema donde se encuentra almacenada la información que buscamos.

3. Ruta del fichero: Se trata de la ubicación del archivo dentro del host. http://www.bienvenidos.es/publico/saludos.html

Entre los principales tipos de URL destacan: 1.

HTTP: Son los más populares ya que son los utilizados por los servidores de WWW para mandar documentos a través de Internet.

2. FTP: Se utilizan para apuntar hacia los archivos que estén en servidores que usan el protocolo FTP (File Transfer Protocol). Este protocolo es normalmente utilizado para enviar y recibir ficheros. Es el protocolo que se usa para enviar nuestras páginas al servidor de internet. Como ya se puede imaginar en estos servidores se almacenan los archivos que forman parte de nuestra presentación web.

3. File: Apuntan hacia archivos contenidos en el mismo disco que se encuentra el navegador. No resulta muy interesante poner estos URL en nuestras presentaciones puesto que otra persona que desde otro sistema apunte hacia este URL, generalmente fallará en su intento y no podrá tener acceso a él.

4. Mailto: Se usa para mandar correos electrónicos. Cuando seleccionamos este tipo de URL se abre la aplicación de correo electrónico de nuestro ordenador para enviar un correo a la dirección hacia la que apunta el URL. La forma estandar es: mailto:webmaster@bienvenidos.es 5. News: Son URL de grupos de noticias, en estos servidores se almacenan mensajes el los que se discuten sobre direfentes temas. <html> <head> <title>ejemplo 5</title> </head> <body> <h1>diferentes tipos de urls</h1> enlace a <a href="http://www.webestilo.com">webestilo</a>. <br> enlace al servidor de ftp de <a href="ftp://ftp.mozilla.org/pub/mozilla/">mozilla</a>. <br> enlace a <a href="file:///c:">la unidad c de su ordenador</a>. <br> enlace a <a href="mailto:webmaster@bienvenidos.es"> mailto:webmaster@bienvenidos.es</a>. <br> enlace a las <a href="news://msnews.microsoft.com">news de microsoft</a>. <br> </body> </html>

29

MANUAL DE HTML

DISEÑO WEB

10.1Multimedia Sonido de fondo <bgsound> Añadir una música de fondo a una página tiene pros y contras, si el sonido es apropiado al contenido de la página, puede hacerla más atractiva en contrapartida la descarga del archivo de sonido supone una carga que puede ralentizar la visualización de la página y además muchos usuarios suelen estar escuchando otro tipo de música cuando navega en Internet, por lo que el escuchar también sonido en cada página que visita puede resultar algo molesto.

Los formatos de sonido más habituales en Internet son el WAV, el MP3 y en algunas ocasiones el MIDI, aunque existen otros formatos diferentes que también pueden utilizarse.

Lo ideal es incluir algún archivo de audio que no ocupe mucho espacio, y que no por ello sea de mala calidad.

El navegador Internet Explorer puede reconocer la etiqueta <bgsound>, que se utiliza para incluir sonido de fondo. Esta nueva etiqueta no necesita etiqueta de cierre.

A través del atributo src hay que especificar la ruta y el nombre del archivo de audio.

Con el atributo loop indicamos el número de veces que se tienen que reproducir el sonido. Si se desea que el archivo de audio se reproduzca continuamente en un bucle, habrá que asignarle el valor infinite o -1.

Por ejemplo, podríamos insertar un sonido de fondo escribiendo el siguiente código:

<bgsound src="varios/audio.mid" loop="-1"> La etiqueta <bgsound> puede situarse en cualquier parte del documento, pero es preferible que la situemos siempre en un sitio fácil de encontrar, por si deseamos hacerle alguna modificación. Podríamos, por ejemplo, incluirla justo debajo de la etiqueta <body>.

Vídeo y audio <embed> En ocasiones puede interesar incluir algún vídeo en una página web, pero hay que tener en cuenta que los vídeos suelen ocupar mucho espacio en disco, y por lo tanto, precisan de mucho tiempo para descargarse.

Los formatos de vídeo que suelen utilizarse en Internet son el AVI, el MPEG y el MOV. La etiqueta <embed> es la que se utiliza para insertar archivos de vídeo. Puede incluirse la etiqueta de cierre, pero en realidad no es necesaria, ya que entre las etiquetas <embed> y </embed> no hay que insertar nada.

A través del atributo src hay que especificar la ruta y el nombre del archivo de vídeo.

Los videos insertados a través de esta etiqueta se reproducen automáticamente al cargarse la página, y se reproducen solamente una vez. Esto puede cambiarse a través de los atributos autostart y loop.

El atributo autostart indica si el archivo se reproducirá automáticamente al cargarse la página, y puede tomar los valores true o false.

El atributo loop indica si el archivo se reproducirá continuamente en un bucle, y también puede tomar los valores true o false.

Lenguaje de Marcado de Hipertexto

30

CENTRO DE ENSEÑANZA TECNICO EN INFORMATICA CETI Los atributos width (anchura) y height (altura) sirven para especificar el tamaño de la consola de control de vídeo. Estos atributos pueden tomar como valor un número, que indica el tamaño en píxeles. Si no se especifican estos atributos, la consola de control de vídeo se mostrará con el tamaño más adecuado al tamaño del vídeo.

A la derecha tienes un ejemplo de un archivo de video, para el que se muestran los controles de video. Puedes reproducirlo pulsando sobre los controles.

Para insertar el vídeo anterior, se podría escribir:

<embed src="varios/cotorra.avi" autostart="false" loop="true"> Existen algunos navegadores que no reconocen la etiqueta <bgsound>, por lo que no es posible utilizar esta etiqueta para incluir un sonido de fondo. En su lugar, se utiliza la etiqueta <embed>, que funciona del mismo modo para los archivos de audio y de vídeo.

No hay que olvidar que para los archivos de audio también se mostrarán los controles de reproducción.

A la derecha tienes un ejemplo de un archivo de sonido, para el que se muestran los controles de audio. Si lo deseas, puedes reproducirlo pulsando sobre los controles.

Para insertar el archivo de audio anterior, se podría escribir:

<embed src="varios/audio.mid" autostart="false" loop="true"> Si no se desea que se muestren los controles de un archivo de audio, porque va a ser utilizado como sonido de fondo, puede hacerse que los atributos width (anchura) y height (altura) valgan cero.

También puede utilizarse el atributo hidden, con los valores true o false. Cuando su valor estrue, se ocultan los controles de reproducción.

Por ejemplo, para insertar sonido de fondo se podría escribir:

<embed src="varios/audio.mid" autostart="true" loop="true" hidden="true" > O también:

<embed src="varios/audio.mid" autostart="true" loop="true" width="0" height="0" >

31

MANUAL DE HTML

DISEÑO WEB

11 - Apertura de un hipervínculo en otra instancia del navegador.

El elemento "a" tiene una propiedad target que nos permite indicar que la referencia del recurso sea abierto en otra página.

Esta propiedad se llama target y debemos asignarle el valor "_blank" para indicar que el recurso sea abierto en otra ventana.

Podemos ver la diferencia entre el primer hipervínculo: <a href="http://www.lanacion.com.ar">Periódico La Nación</a> y el segundo hipervínculo que indica que el sitio sea abierto en otra ventana del navegador: <a href="http://www.clarin.com.ar" target="_blank">Periódico Clarin</a>

Ejercicio:

Problema: Confeccionar una página que contenga dos hipervínculos a los periódicos La Nación, el Clarín, el Diario de Hoy y la Prensa Grafica. Hacer que el hipervínculo del periódico el Clarin sea abierto en otra ventana del navegador.

<html> <head> </head> <body> <h1>Apertura de enlaces en el mismo navegador y en otra instancia del navegador</h1> <p> <a href="http://www.lanacion.com.ar">Periódico La Nación</a> <a href="http://www.elsalvador.com">El Diario de Hoy</a> <a href=http://www.laprensagrafica.com>La Prensa Grafica</a> <br> <a href="http://www.clarin.com.ar" target="_blank">Periódico Clarin</a> </p> </body> </html>

12 - Hipervínculo a un cliente de correo <a> El elemento "a" permite direccionar un hipervínculo a un programa de envío de correos que tengamos configurado en nuestra computadora.

Confeccionaremos una página que disponga un hipervínculo a un cliente de correo de mail: <html> <head> </head> <body> <h1>Reclamos</h1> <a href="mailto:diegoestevanes@gmail.com">Enviar mail.</a> </body> </html>

Lenguaje de Marcado de Hipertexto

32

CENTRO DE ENSEÑANZA TECNICO EN INFORMATICA CETI

Cuando se presiona el enlace se abre el programa de envío de correos que tiene configurado el equipo y dispone como receptor del mensaje la dirección que configuramos en el propio enlace seguido de la palabra mailto: La sintaxis para disponer un título por defecto y un cuerpo de mensaje es: <a href="mailto:diegoestevanes@gmail.com?subject=título del mensaje body=cuerpo del mensaje">Enviar mail.</a> Es decir luego de especificar el destinatario del mail disponemos un caracter de interrogación '?' seguido la palabra subject, un igual y el título por defecto que debe aparecer en la ventana de envío de mail. Por último separamos con un ampersand '&' la inicialización de subject y el body (es decir el cuerpo del mensaje) Podemos inclusive añadir el envío de mail con copia y con copia oculta a otras direcciones: <html> <head> </head> <body> <h1>Reclamos</h1> <a href="mailto:diego1@gmail.com? subject=aquí el título&cc=diego2@gmail.com&bcc=diego3@gmail.com&body=Este es el cuerpo">Enviar mail.</a> </body> </html> En este ejemplo enviamos un mail a diego1@gmail.com, con copia a diego2@gmail.com y con copia oculta a diego3@gmail.com Ejercicio: Problema: Confeccionar una página que contenga un hipervínculo configurando la propiedad href de tal manera que abra un cliente de correo.

<html>

<head> </head> <body> <h1>Reclamos</h1> <a href="mailto:diegoestevanes@gmail.com">Enviar mail.</a> </body> </html>

13 - Anclas llamadas desde la misma página.

Otra posibilidad que nos brinda el HTML es disponer una referencia dentro de la página para poder posteriormente disponer un hipervínculo a dicha marca.

Es una práctica común cuanda queremos desplazarnos dentro de una página de gran tamaño.

Se disponen hipervínculos a diferentes anclas.

La sintaxis para definir un ancla es: <a name="nombreancla"></a>

33

MANUAL DE HTML

DISEÑO WEB

No debemos confundir un ancla con un hipervínculo, más alla que se utiliza el mismo elemento a. Para un ancla inicializamos la propiedad name con el nombre del ancla.

Un ancla se la define en una parte de la página que queremos que el operador llegue a partir de un hipervínculo.

Ahora la sintaxis para ir a un ancla desde un hipervínculo es la siguiente: <a href="#nombreancla">Introducción</a><br> Vemos que en la propiedad href indicamos el nombre del ancla.

Haremos un ejemplo, donde dispondremos una lista de hipervínculos que llaman a una serie de anclas dispuestas en la misma página: Guardarlo con el nombre de pagina2.html <html> <head> </head> <body> <h1>Tutorial de MySQL</h1> <a href="#introduccion">Introducción</a><br> <a href="#mostrarbasedatos">show databases</a><br> <a href="#creaciontabla">Creación de una tabla y mostrar sus campos</a><br> <a href="#cargarregistros">Carga de registros a una tabla y su recuperación</a><br> <a name="introduccion"></a> <h2>Introducción</h2> <p> SQL, Structure Query Language (Lenguaje de Consulta Estructurado) es un lenguaje de programacion para trabajar con base de datos relacionales como MySQL, Oracle, etc.<br> MySQL es un interpretador de SQL, es un servidor de base de datos.<br> MySQL permite crear base de datos y tablas, insertar datos, modificarlos, eliminarlos, ordenarlos, hacer consultas y realizar muchas operaciones, etc., resumiendo: administrar bases de datos.<br> Ingresando instrucciones en la linea de comandos o embebidas en un lenguaje como PHP nos comunicamos con el servidor.

Cada sentencia debe acabar con punto y coma (;).<br> La sensibilidad a mayúsculas y minúsculas, es decir, si hace diferencia entre ellas, depende del sistema operativo, Windows no es sensible, pero Linux si. Por ejemplo Windows interpreta igualmente las siguientes sentencias:<br> create database administracion;<br> Create DataBase administracion;<br> Pero Linux interpretará como un error la segunda.<br> Se recomienda usar siempre minúsculas. Es más el sitio mysqlya.com.ar está instalado sobre un servidor Linux por lo que todos los ejercicios deberán respetarse mayúsculas y minúsculas. </p> <a name="mostrarbasedatos"></a> <h2>show databases</h2> <p> Una base de datos es un conjunto de tablas.<br> Una base de datos tiene un nombre con el cual accederemos a ella.<br> Vamos a trabajar en una base de datos ya creada en el sitio, llamada "administracion".<br> Para que el servidor nos muestre las bases de datos existentes, se lo solicitamos enviando la instrucción:<br> show databases;<br> Nos mostrará los nombres de las bases de datos, debe aparecer en este sitio "administracion".<br> </p> <a name="creaciontabla"></a> <h2>Creación de una tabla y mostrar sus campos</h2> <p> Una base de datos almacena sus datos en tablas.<br> Una tabla es una estructura de datos que organiza los datos en columnas y filas; cada columna es un campo (o atributo) y cada fila, un registro. La intersección de una columna con una fila, contiene un dato específico, un solo valor.<br> Cada registro contiene un dato por cada columna de la tabla.<br> Cada campo (columna) debe tener un nombre. El nombre del campo hace referencia a la información que almacenará.<br> Cada campo (columna) también debe definir el tipo de dato que almacenará.<br> </p> <a name="cargarregistros"></a><h2> Carga de registros a una tabla y su recuperación</h2><p> Usamos "insert into". Especificamos los nombres de los campos entre paréntesis y separados por comas y luego los valores para cada campo, también entre paréntesis y separados por comas.<br> Es importante ingresar los valores en el mismo orden en que se nombran los campos, si ingresamos los datos en otro orden, no aparece un mensaje de error y los datos se guardan de modo incorrecto.<br> Note que los datos ingresados, como corresponden a campos de cadenas de caracteres se colocan entre comillas simples. Las comillas simples son OBLIGATORIAS. Lenguaje de Marcado de Hipertexto 34 </p>

</body> </html>

CENTRO DE ENSEÑANZA TECNICO EN INFORMATICA CETI Cada hipervínculo hace referencia a un ancla que se encuentra en la misma página: <a href="#introduccion">Introducción</a><br> <a href="#mostrarbasedatos">show databases</a><br> <a href="#creaciontabla">Creación de una tabla y mostrar sus campos</a><br> <a href="#cargarregistros">Carga de registros a una tabla y su recuperación</a><br> Luego la definición de las anclas son: <a name="introduccion"></a> <h2>Introducción</h2> <p> Como podemos observar la definción del ancla se hace inmediatamente anterior al título donde queremos que el navegador se sitúe.

14 - Anclas llamadas desde otra página.

También es perfectamente válido la llamada a anclas desde otra página (no importa si se encuentra en el mismo sitio o en otro) Debemos conocer el nombre de la página a llamar y el nombre del ancla, luego la sintaxis para la llamada al ancla es: <a href="pagina2.html#introduccion">Introducción</a> Es decir luego del nombre de la página que llamamos disponemos el caracter # y seguidamente el nombre del ancla.

Confeccionemos dos página y que la primera llame a diferentes anclas definidas en la segunda: pagina1.html <html> <head> </head> <body> <h1>Tutorial de MySQL</h1> <a href="pagina2.html#introduccion">Introducción</a><br> <a href="pagina2.html#mostrarbasedatos">show databases</a><br> <a href="pagina2.html#creaciontabla">Creación de una tabla y mostrar sus campos</a><br> <a href="pagina2.html#cargarregistros">Carga de registros a una tabla y su recuperación</a><br> </body> </html>

La pagina2.html es el ejercicio elaborado en la pagina numero 34.

35

MANUAL DE HTML

DISEÑO WEB

15 - Lista ordenada (<ol>) Este elemento HTML es útil cuando debemos numerar una serie de objetos.

Veamos con un ejemplo una lista ordenada para conocer su sintaxis. Mostraremos el orden de llegada de tres corredores: La marca <ol> y su correspondiente marca de cerrado es </ol> En su interior cada uno de los items se los dispone con el elemento li, que también tiene la marca de comienzo <li> y la marca de fin de item </li> Luego se encarga el navegador de numerar cada uno de los items contenidos en la lista, tengamos en cuenta que se numeran porque se trata de una lista ordenada.

Para recordar el nombre de estos elementos HTML: <ol> viene de ordened list <li> viene de list item Problema: Mostrar el orden de llegada de tres corredores utilizando el elemento HTML ol.

Luego agregar otros items a la lista. <html> <head> </head> <body> <ol> <li>Rodriguez Pablo</li> <li>Gonzalez Raul</li> <li>Lopez Hector</li> </ol> </body> </html>

16 - Lista no ordenada (<ul>) Una lista no ordenada como su nombre lo indica no utiliza un número delante de cada items sino un pequeño símbolo gráfico.

La forma de implementar este tipo de listas es idéntico a las listas ordenadas.

Para recordar los nombres de estas marcas HTML: <ul> viene de unordered list <li> viene de list item Problema: Confeccionar una página HTML que contenga una lista no ordenada con cuatro lenguajes de programación muy populares. Agregar un título de segundo nivel indicando el concepto de esta lista.

Lenguaje de Marcado de Hipertexto

36

CENTRO DE ENSEÑANZA TECNICO EN INFORMATICA CETI

<html> <head> </head> <body> <h2>Lenguajes de programación.</h2> <ul> <li>C</li> <li>C++</li> <li>Java</li> <li>C#</li> </ul> </body> </html>

17 - Lista de definiciones (<dl>) Como su nombre lo indica se utiliza para asociar un término y la definición del mismo. El navegador se encarga de destacar y separa el término y su definición.

Como podemos observar intervienen más marcas que en los otros dos tipos de listas. Las marcas que encierran a la lista son <dl> (Definition List) y </dl> Ahora debemos poner a pares estos dos elementos <dt> (Definition Term) y <dd> (Definition Description) El navegador se encarga de hacer el sangrado del contenido del elemento dt Para recordar los nombres de estas marcas HTML: <dl> viene de definition list <dt> viene de definition term <dd> viene de definition description Problema: Confeccionar una lista de definición indicando en los conceptos distintos lenguajes de programación. En la definición hacer una breve introducción del mismo. <html> <head> </head> <body> <dl> <dt>C++</dt> <dd>Es un lenguaje de programación, diseñado a mediados de los años 1980, por Bjarne Stroustrup, como extensión del lenguaje de programación C.</dd> <dt>Java</dt> <dd>Es un lenguaje de programación orientado a objetos desarrollado por Sun Microsystems a principios de los 90.</dd> <dt>JavaScript</dt> <dd>Es un lenguaje interpretado, es decir, que no requiere compilación, utilizado principalmente en páginas web, con una sintaxis semejante a la del lenguaje C.</dd> </dl> </body> </html>

37

MANUAL DE HTML

DISEÑO WEB

18 - Listas anidadas.

El lenguaje HTML nos permite insertar una lista dentro de otra. Se pueden anidar listas de distinto tipo, por ejemplo podemos tener una lista no ordenada y uno de los item puede ser una lista ordenada.

Para el anidamiento de listas solo debemos tener cuidado en la correcta apertura y cerrado de las marcas

Ejercicio:

Problema: Implementar una página que enumere una serie de paises en una lista ordenada y luego en cada pais disponer una lista de hipervínculos de periódicos de dicho pais.

<html> <head> </head> <body> <ol> <li>Argentina <ul> <li><a href="http://www.lanacion.com.ar">La Nación</a></li> <li><a href="http://www.clarin.com.ar">Clarín</a></li> <li><a href="http://www.pagina12.com.ar">Página 12</a></li> </ul> </li> <li>España <ul> <li><a href="http://www.elpais.es">El País Digital</a></li> <li><a href="http://www.abc.es">ABC</a></li> <li><a href="http://www.elmundo.es">El Mundo</a></li> </ul> </li> <li>México <ul> <li><a href="http://www.jornada.unam.mx">La Jornada</a></li> <li><a href="http://www.el-universal.com.mx">El Universal</a></li> </ul> </li><li>El Salvador <ul> <li><a href="http://www.elsalvador.com">El Diario de Hoy</a></li> <li><a href=http://www.laprensagrafica.com>La Prensa Grafica</a></li> </ul> </li> </ol> </body> </html>

Lenguaje de Marcado de Hipertexto

38

CENTRO DE ENSEร ANZA TECNICO EN INFORMATICA CETI

19 - Tabla (<table><tr><td>) El objetivo fundamental de las tablas es mostrar una serie de datos en forma ordenada, organizado en filas y columnas.

Algo importante es que no utilizaremos las tablas para organizar la pรกgina completa (esto se hace en la actualizad mediante CSS, es decir hojas de estilo.

Para la creaciรณn de una tabla intervienen una serie de elementos: <table> Es la marca de comienzo de la tabla. Este elemento requiere la marca de cierre. <tr> Es la marca de comienzo de una fila. Esta marca debe estar dentro del elemento table.

Este elemento requiere la marca de cierre. <td> Es la marca de comienzo de una celda. Esta marca debe estar dentro del elemento tr.

Este elemento requiere la marca de cierre.

Para recordar el nombre de estos elementos HTML: <table> <tr> viene de table row que significa fila de la tabla. <td> viene de table data que significa dato de la tabla.

La mejor forma de entender y dominar este concepto es implementar tablas y ver su resultado dentro del navegador. Confeccionemos una tabla que muestre el nombre de paises en una columna y su cantidad de habitantes en otra: Lo primero que aparece es la apertura del elemento table, donde inicializamos la propiedad border con el valor 1, con esto el contorno de cada celda serรก visible (pruebe de asignarle el valor cero y otros valores superiores a 1) <table border="1"> Seguidamente viene la apertura de la primer fila de la tabla con el elemento tr: <tr> Continuamos con la apertura de la primer celda de la primer fila de la tabla: <td> Luego el dato propiamente dicho de la celda: India Cerramos la celda: </td> Abrimos la proxima celda: <td> Disponemos el valor de la celda: 1300 millones Cerramos la celda: </td> Ahora cerramos la primer fila de la tabla: </tr>

Ejercicio: Problema: Confeccionar una tabla que muestre los nombre de paises en una columna y su cantidad de habitantes en otra.

39

MANUAL DE HTML

DISEﾃ前 WEB

<html> <head> </head> <body> <table border="1"> <tr> <td>China</td><td>1300 millones</td> </tr> <tr> <td>India</td><td>1080 millones</td> </tr> <tr> <td>Estados Unidos</td><td>295 millones</td> </tr> </table> </body> </html>

20 - Tabla con encabezado (<th>) La primer caracterﾃｭstica que le vamos a agregar a una tabla son las celdas de encabezado.

Normalmente la primer fila de una tabla puede representar los tﾃｭtulos para cada columna.

Para indicar que se trata de una celda de encabezado utilizamos el elemento <th> en lugar de <td> El navegador representa distinto las celdas de datos y las celdas de encabezamiento.

Confeccionemos el mismo problema del concepto anterior pero agregando un tﾃｭtulo a cada columna de la tabla mediante celdas de encabezamiento: <html> <head> </head> <body> <table border="1"> <tr> <th>Paises</th><th>Cantidad de habitantes</th> </tr> <tr> <td>China</td><td>1300 millones</td> </tr> <tr> <td>India</td><td>1080 millones</td> </tr> <tr> <td>Estados Unidos</td><td>295 millones</td> </tr> </table> </body> </html>

Lenguaje de Marcado de Hipertexto

40

CENTRO DE ENSEÑANZA TECNICO EN INFORMATICA CETI Si observamos el código de la página para indicar que se trata de una celda de tipo encabezado utilizamos el elemento th: <tr> <th>Paises</th><th>Cantidad de habitantes</th> </tr> El elemento th debe estar contenido entre las marcas <tr> y </tr>, es decir pertenecen a una fila.

Para recordar el nombre de este nuevo elemento HTML: <th> viene de table header cell que significa celda de encabezado de tabla.

21 - Tabla con título (<caption>) Para disponer un título a una tabla debemos incorporar el elemento caption inmediatamente después que abrimos la marca table. El elemento caption requiere la marca de apertura y cierre.

Dispongamos un título a nuestra tabla con la población de distintos paises: Problema: Confeccionar una tabla que muestre los nombre de paises en una columna y su cantidad de habitantes en otra. Disponer un título de los datos que representa la tabla. <html> <head> </head> <body> <table border="1"> <caption>Población de los paises con mayor cantidad de habitantes.</caption> <tr> <th>Paises</th><th>Cantidad de habitantes</th> </tr> <tr> <td>China</td><td>1300 millones</td> </tr> <tr> <td>India</td><td>1080 millones</td> </tr> <tr> <td>Estados Unidos</td><td>295 millones</td> </tr> </table> </body> </html>

Como podemos observar la marca caption está inmediatamente después que se abre la marca de comienzo de la tabla: <table border="1"> <caption>Población de habitantes.</caption> <tr>

los

paises

con

mayor

cantidad

de

41

MANUAL DE HTML

DISEÑO WEB

Para recordar el nombre de este nuevo elemento HTML: <caption> significa título.

22 - Tabla y combinación de celdas.

En algunas situaciones se necesita que una celda ocupe el lugar de dos o más celdas en forma horizonzal o vertical, para estos casos el elemento td o th dispone de dos propiedades llamadas rowspan y colspan.

A estas propiedades se les asigna un valor entero a partir de 2.

Si queremos que una celda ocupe tres columnas luego inicializamos la propiedad rowspan con el valor 3: <td colspan="3">Facturación de los últimos tres meses</td> Si por el contrario queremos que una celda se extienda a nivel de filas luego hacemos: <td rowspan="3">Secciones</td> Veamos un ejemplo empleando el concepto de combinación de celdas:

Ejercicio

Problema: Confeccionar una tabla que muestre la facturación de los últimos tres meses de los artículos:'Discos Duros', 'CPU' y 'Monitores'. La primer columna debe mostrar solo el texto 'recursos' y en la primer fila el texto 'Facturación de los últimos tres meses'.

<html> <head> </head> <body> <table border="1"> <tr> <th rowspan="4">Recursos</th><th colspan="4">Facturación de los últimos tres meses</th> </tr> <tr> <td>Discos Duros</td><td>23000</td><td>27200</td><td>26000</td> </tr> <tr> <td>CPU</td><td>73000</td><td>67300</td><td>51000</td> </tr> <tr> <td>Monitores</td><td>53000</td><td>72000</td><td>88000</td> </tr> </table> </body> </html>

Lenguaje de Marcado de Hipertexto

42

CENTRO DE ENSEÑANZA TECNICO EN INFORMATICA CETI

23 - Contenido de la cabecera de la página (<title>) Hasta ahora habíamos dispuesto la cabecera vacía, ya que casi toda la información que disponemos en ella no se visualiza en el navegador. La única excepcion corresponde al elemento title.

El elemento title nos permite definir el título que aparecerá en la barra del navegador (es decir en la parte más alta de la ventana) Siempre debemos buscar un título lo más significativo en cuanto a lo que muestra la página.

Veamos una simple página que muestre un mensaje y contenga un hipervínculo a una segunda página que muestre otro título: Ejercicio: Problema:Confeccionar dos páginas que inicialicen el elemento title. Disponer un hipervínculo en cada página. pagina1.html <html> <head> <title>Título de la primer página</title> </head> <body> <h1>Prueba del elemento title</h1> <a href="pagina2.html">Ir a la segunda página</a> </body> </html> pagina2.html <html> <head> <title>Título de la segunda página</title> </head> <body> <h1>Prueba del elemento title (segunda página)</h1> <a href="pagina1.html">Ir a la primer página</a> </body> </html>

24 - Contenido de la cabecera de la página (<meta>) Un elemento que no se visualiza es el meta, que tiene por objetivo especificar información sobre el propio documento.

Veamos las dos propiedades fundamentales de la marca meta y los valores más comunes con lo que podemos inicializarlos: <meta name="nombre de la propiedad" content="valor de la propiedad"> Name almacena el nombre de la propiedad y content el valor de la propiedad.

43

MANUAL DE HTML

DISEÑO WEB

No existe ninguna especificación de la W3C que defina los valores posibles para el atributo name, si bien existen algunos que son estandares de facto (description, keywords, author etc.)

Veamos las propiedades y valores más comunes <meta name="keywords" content="html, programación, webmaster"> Los buscadores tienen en cuenta los metadatos. Si en la página inicializamos la propiedad name del elemento meta con el valor keywords luego buscará en la propiedad content las distintas palabras claves más representativas para dicha página. Esto es muy útil para posicionar nuestra página según el contenido que provee.

Veamos otras inicializaciones del elemento meta: <meta name="description" content="El objetivo de este tutorial es presentar los conceptos básicos de HTML. Es objetivo prioritario respetar los estándares del W3C"> En este caso especificamos una descripción de la página, pudiendo ser del sitio si se trata de la página principal. <meta name="author" content="Diego Rodriguez"> <meta name="copyright" content="Interpolacion inc.">

25 - Comentarios dentro de una página <!-- --> Un comentario es un texto que solo le interesa a la persona que desarrolló la página, el navegador ignora todo el contenido que se encuentra dentro de esta marca.

Los comentarios son muy útiles para el desarrollador de la página. Uno deja anotaciones para facilitar el mantenimiento del sitio.

Además hay que tener en cuenta que puede ser otra persona la que desarrolle en otro momento el mantenimiento de las páginas que desarrollamos nosotros. Lo que para uno puede ser muy obvio a otro desarrollador puede no ser tan obvio.

Otro uso muy habitual cuando estamos desarrollando la página si queremos deshabilitar una parte del código podemos encerrarla entre los caracteres de comentarios.

La sintaxis para definir un comentario es: <!-- Aquí va el comentario --> Es obligatorio luego del caracter de menor < disponer el signo de admiración y los dos guiones seguidos. Cerramos el comentario con dos guiones y el signo de mayor > Confeccionaremos una página donde emplearemos comentarios: <html> <head> </head> <body> <!-- Corresponden a datos del año 2006. Modificar a principios de 2007--> <table border="1"> <tr> Lenguaje de Marcado de Hipertexto <th rowspan="4">Recursos</th><th colspan="4">Facturación de los últimos tres meses</th> </tr>

44

CENTRO DE ENSEÑANZA TECNICO EN INFORMATICA CETI

<tr> <td>Discos Duros</td><td>23000</td><td>27200</td><td>26000</td> </tr> <tr> <td>CPU</td><td>73000</td><td>67300</td><td>51000</td> </tr> <tr> <td>Monitores</td><td>53000</td><td>72000</td><td>88000</td> </tr> </table> </body> </html>

Un comentario puede abarcar varias líneas: <!-comentarios comentarios comentarios comentarios comentarios comentarios comentarios comentarios -->

-

comentarios comentarios comentarios comentarios comentarios comentarios comentarios comentarios

-

comentarios comentarios comentarios comentarios comentarios comentarios comentarios comentarios

De todos modos hay que tener en cuenta que cuando un navegador pide la página a un sitio el servidor envía el archivo HTML completo, es decir con los comentarios. Los comentarios consumen ancho de banda del servidor.

26 - Sintaxis para caracteres especiales. hasta ahora no se a preguntado como disponer dentro de una página los caracteres: < y >.

Veremos que no los podemos disponer directamente ya que el navegador los confudiría con los caracteres que se utilizan para las marcas HTML. La solución es utilizar otra sintaxis para dichos caracteres, veamos los más utilizados: < > & " © €

&lt; &gt; &amp; &quot; &nbsp; &copy; &euro;

//Espacio en blanco.

Es decir la sintaxis es disponer un ampersand seguido de un nombre significativo (por lo menos para los que entienden ingles) y finalmente un punto y coma.

Para ver su funcionamiento mostraremos la siguiente ecuación: 10+x*y < 12*z

45

MANUAL DE HTML

DISEÑO WEB

pagina1.html <html> <head> <title>Título de la primer página</title> </head> <body> <h1> 10+x*y &lt; 12*z </h1> </body> </html>

27 - Formulario - <form> Un formulario permite que el visitante al sitio cargue datos y sean enviados al servidor.

Es el medio ideal para registrar comentarios del visitante sobre el sitio, solicitar productos, sacar turnos etc.

De todos modos veremos que el lenguaje HTML solo tiene el objetivo de crear el formulario.

El HTML no tiene la responsabilidad de registrar los datos en el servidor, esta actividad está delegada a un lenguaje que se ejecute en el servidor (PHP, ASP, ASP.Net, JSP etc.)

Como este curso nos concentramos solamente en el lenguaje HTML no veremos como registrar los datos en el servidor. Si está impaciente puede visitar y ver como capturar los datos en el servidor mediante PHP. Si recien comienza en el mundo del desarrollo de páginas web es recomendable primero aprender y conocer todos los elementos para la creación de formularios en HTML y en un paso posterior estudiar la registración en el servidor Veamos la sintaxis básica para crear un formulario donde ingresemos nuestro nombre.

Para crear un formulario debemos utilizar el elemento form, que tiene marca de comienzo y fin. Dentro de la marca form veremos otros elementos para crear botones, editores de línea, cuadros de chequeo, radios de selección etc.

Ejercicio

Problema: Confeccionar un formulario que contenga un cuadro de texto donde el visitante debe ingresar su nombre y un botón de tipo submit para el envío de los datos ingresados al servidor (tener en cuenta que la página que procesa los datos del formulario en el servidor se encuentra en la raiz del sitio y se llama: registrardatos.php

<html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Ingrese su nombre: <input type="text" name="nombre" size="20"> <br> <input type="submit" value="enviar"> </form> </body> Lenguaje de Marcado de Hipertexto </html>

46

CENTRO DE ENSEÑANZA TECNICO EN INFORMATICA CETI Veamos detenidamente la estructura de un formulario elemental, lo primero la apertura de la marca form donde debemos definir dos propiedades (action y method): <form action="/registrardatos.php" method="post"> La propiedad action se inicializa con el nombre de la página que procesará los datos en el servidor. Como no conocemos la sintaxis de un lenguaje de servidor almacené en la raiz de este sitio una página codificada en PHP que recibe los datos del formulario y los imprime en una nueva página (recordar que en este curso no se ve como programar en el servidor) Todo los formularios que implemento y los que usted implementará como ejercicios deben llamar a esta página: "/registrardatos.php" más adelante cuando conozca un lenguaje de servidor podrá almacenarlos en una base de datos, consultar otros datos, modificar datos existentes etc.

La segunda propiedad que debemos inicializar es method. Esta propiedad puede almacenar únicamente dos valores (post o get) Normalmente un formulario se envía mediante post (los datos se envían con el cuerpo del formulario) En caso de utilizar get los datos se envían en la cabecera de la petición de la página, utilizando el método get estamos limitados en la cantidad de datos a enviar, no asi con el método post.

Ahora veamos el cuadro de texto donde se ingresa el nombre: Ingrese su nombre: <input type="text" name="nombre" size="20"> <br> El mensaje "Ingrese su nombre:" es un texto fijo.

El elemento input permite definir un cuadro de texto (editor de línea) si asignamos a la propiedad type el valor "text".

Todo cuadro de texto debe inicializar la propiedad name con un nombre para el cuadro de texto. Este es un dato fundamental para poder recuperar el dato ingresado en el servidor (por ejemplo mediante PHP) Por último inicializamos la propiedad size con el valor 20, esto significa que el cuadro de texto se dimensiona para permitir mostrar 20 caracteres (no se limita la cantidad de caracteres a ingresar por parte del visitante sino la cantidad de caracteres que se pueden visualizar) Seguidamente: <input type="submit" value="enviar"> También mediante el elemento input definimos un botón para el envío de datos al servidor.

Debemos inicializar la propiedad type con el valor submit, con esto ya tenemos un botón para el envío de datos.

La propiedad value almacena la etiqueta que debe mostrar el botón.

Finalmente cerramos el formulario: </form>

47

MANUAL DE HTML

DISEÑO WEB

28 - Formulario - input type="text"/ input type="password" En el concepto anterior vimos como implementar un formulario básico.

Veamos ahora con más detenimiento el elemento input. Este elemento hemos visto que nos permite definir cuadros de texto y botón para subir los datos al servidor. Ahora veremos que también podemos definir cuadros para el ingreso de una clave y botones para borrar el contenido de todos los controles del formulario.

Ejercicio: Problema: Confeccionar un formulario que solicite el ingreso del nombre de un usuario y su clave. Mostrar asteriscos donde se ingresa la clave. Disponer dos botones, uno para el envío de datos al servidor y otro para borrar el contenido de todos los controles (editores de texto) que contiene el formulario.

<html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Ingrese su nombre: <input type="text" name="nombre" size="20"> <br> Ingrese su clave: <input type="password" name="clave" size="12"> <br> <input type="submit" value="enviar"> <input type="reset" value="borrar"> </form> </body> </html> Veamos la sintaxis nueva para definir un cuadro de texto para el ingreso de una clave: <input type="password" name="clave" size="12"> Utilizamos el mismo elemento input pero inicializamos la propiedad type con el valor "password", con esto logramos que cuando el visitante ingrese la clave se visualicen asteriscos en lugar de los caracteres que tipeamos.

Luego para definir un botón que permita borrar todos los datos ingresados hasta el momento lo hacemos mediante: <input type="reset" value="borrar"> Es decir inicializamos la propiedad type con el valor "reset", con esto sabe el navegador que cuando dicho botón sea presionado debe borrar todos los controles de ingreso de datos de dicho formulario.

Otra cosa que hay que tener en cuenta que la propiedad name de cada elemento input debe tener un nombre distinto (esto debido a que en el servidor se lo rescata a partir de este nombre)

Lenguaje de Marcado de Hipertexto

48

CENTRO DE ENSEÑANZA TECNICO EN INFORMATICA CETI Resultado Ingrese su nombre: Ingrese su clave: enviar

borrar

29 - Formulario - textarea El elemento de tipo textarea nos permite el ingreso de varias líneas a diferencia del cuadro de texto (input/text) Es muy utilizado cuando queremos ingresar un comentario de una longitud de caracteres grande.

Problema: Confeccionemos un formulario para que un visitante pueda ingresar su nombre, su mail y un comentario del sitio, empleando para este último dato a ingresar un elemento de tipo textarea: <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Ingrese su nombre: <input type="text" name="nombre" size="30"><br> Ingrese su mail: <input type="text" name="mail" size="50"><br> Comentarios:<br> <textarea name="comentarios" rows="5" cols="60"></textarea> <br> <input type="submit" value="Enviar"> </form> </body> </html>

La sintaxis para definir un área de texto para el ingreso de múltiples líneas es: <textarea name="comentarios" rows="5" cols="60"></textarea> Es un elemento que requiere una marca de comienzo y una de finalización.

Además de tener la propiedad name similar a los otros elementos relacionados a formularios tiene dos propiedades llamadas rows y cols. Estas dos propiedades indican la cantidad de filas y columnas que visualiza el área de texto.

49

MANUAL DE HTML

DISEﾃ前 WEB

Resultado:

Ingrese su nombre: Ingrese su mail: Comentarios:

Enviar

30 - Formulario - input type="checkbox" El elemento checkbox es otro control que se puede insertar en un formulario. Un checkbox es una casilla de selecciﾃｳn que puede tomar dos valores (seleccionado/no seleccionado) Para ver su funcionamiento implementaremos un formulario que solicite el ingreso del nombre de una persona y 4 elementos de tipo checkbox para que seleccione los lenguajes de programaciﾃｳn que conoce: <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Ingrese su nombre: <input type="text" name="nombre" size="30"><br> Seleccione los lenguajes que conoce: <br> <input type="checkbox" name="java">Java<br> <input type="checkbox" name="cmasmas">C++<br> <input type="checkbox" name="c">C<br> <input type="checkbox" name="csharp">C#<br> <input type="submit" value="Enviar"> </form> </body> </html> Veamos la sintaxis para definir controles de formulario de tipo checkbox: <input type="checkbox" name="java">Java<br> Como vemos tambiﾃｩn utilizamos el elemento HTML input, donde inicializamos la propiedad type con el valor checkbox.

Un control checkbox no muestra texto, solo una casilla que el operador puede tildar o destildar.

Si queremos que aparezca un mensaje junto al checkbox solo lo agregamos seguido al elemento input.

Lenguaje de Marcado de Hipertexto

50

CENTRO DE ENSEÑANZA TECNICO EN INFORMATICA CETI Es importante hacer notar que los caracteres permitidos de la propiedad name son los caracteres alfabéticos y los números siempre y cuando no sea el primero.

Resultado: Ingrese su nombre: Seleccione los lenguajes que conoce: Java C++ C C# Enviar

31 - Formulario - input type="radio" Cuando tenemos un conjunto de opciones pero solo una puede ser seleccionada debemos emplear controles visuales de tipo radio.

Para definir controles de tipo radio también utilizamos el elemento input inicializando la propiedad type con el valor "radio" Veamos un ejemplo del empleo de este control gráfico, supongamos que necesitamos indicar el tipo de estudios que tenemos utilizando controles de tipo radio: <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Ingrese su nombre: <input type="text" name="nombre" size="30"><br> Seleccione el máximo nivel de estudios que tiene: <br> <input type="radio" name="estudios" value="1">Sin estudios<br> <input type="radio" name="estudios" value="2">Primario<br> <input type="radio" name="estudios" value="3">Secundario<br> <input type="radio" name="estudios" value="4">Universitario<br> <input type="submit" value="Enviar"> </form> </body> </html>

Veamos como se definen los controles de tipo radio: <input type="radio" name="estudios" value="1">Sin estudios<br> <input type="radio" name="estudios" value="2">Primario<br> <input type="radio" name="estudios" value="3">Secundario<br>

51

MANUAL DE HTML

DISEÑO WEB

<input type="radio" name="estudios" value="4">Universitario<br> Como podemos observar todos tienen el mismo valor en la propiedad name, con esto se logra que cuando seleccionamos uno se deseleccione el actual.

El valor que se rescata en el servidor es el dato almacenado en la propiedad value.

Si queremos disponer varios grupos de controles de tipo radio debemos definirles a cada grupo la propiedad name nombres distintos.

Resultado:

Ingrese su nombre: Seleccione el máximo nivel de estudios que tiene: Sin estudios Primario Secundario Universitario Enviar

32 - Formulario - select (cuadro de selección individual) El elemento select es un cuadro de selección.

Este elemento HTML nos permite seleccionar una opción entre un conjunto. Veremos en el concepto próximo que según como la configuramos podemos seleccionar varias opciones.

Veamos con un ejemplo como crear un control de tipo select. Confeccionemos un formulario que solicite cargar el nombre de una persona y el pais donde vive, este último elemento mediante un control de tipo select permitir seleccionar el pais.

El archivo pagina1.html es: <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Ingrese su nombre: <input type="text" name="nombre" size="30"><br> Seleccione su pais: <select name="pais"> <option value="1">Argentina</option> <option value="2">España</option> <option value="3">México</option> <option value="4">Guatemala</option> <option value="5">Honduras</option> <option value="7">El Salvador</option> <option value="8">Venezuela</option> <option value="9">Colombia</option> <option value="10">Cuba</option> <option value="11">Bolivia</option> <option value="13">Perú</option> <option value="14">Ecuador</option> <option value="15">Paraguay</option> <option value="16">Uruguay</option> <option value="17">Chile</option> </select> <br> Lenguaje de Marcado de <input type="submit" value="Enviar"> </form> </body> </html>

Hipertexto

52

CENTRO DE ENSEÑANZA TECNICO EN INFORMATICA CETI Veamos la sintaxis para crear un cuadro de selección, primero abrimos la marca select la cual tiene definido la propiedad name: <select name="pais"> Luego sin cerrar el select definimos tantos elementos de tipo option como opciones tendrá el cuadro de selección: <option value="1">Argentina</option> <option value="2">España</option> <option value="3">México</option> El elemento option define el texto a mostrar y en la propiedad value indica el valor a enviar al servidor en caso de estar seleccionada dicha opción.

Luego de definir todas las opciones de nuestro cuadro de selección cerramos la marca select: </select> Una variante gráfica de este control es inicializar la propiedad size del elemento select con un valor distinto a uno, con esto creamos un cuadro de selección que muestra simultáneamente varios elementos (de todos modos solo uno se puede elegir) Es decir que con la propiedad size solo logramos un cambio estético del control.

Resultado

Ingrese su nombre: Seleccione su pais:

El Salvador

Enviar

33 - Formulario - select (cuadro de selección múltiple) Una variante del cuadro de selección que vimos en el concepto anterior es permitir que el visitante del sitio pueda seleccionar varias opciones.

Supongamos que tenemos un cuadro de selección con una lista de colores y queremos que el visitante pueda elegir varios y no uno solo.

La página que resuelve este problema es: <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Seleccione uno o varios colores (Presione Ctrl para seleccionar varios colores)<br> <select name="colores[]" size="4" multiple> <option value="1">Rojo</option> <option value="2">Verde</option> <option value="3">Azul</option> <option value="4">Amarillo</option> <option value="5">Blanco</option> <option value="6">Negro</option> <option value="7">Naranja</option> <option value="8">Violeta</option> </select> <br> <input type="submit" value="Enviar"> </form> </body></html>

53

MANUAL DE HTML

DISEÑO WEB

Podemos observar la sintaxis para la definición de un cuadro de selección múltiple: <select name="colores[]" size="4" multiple> Definimos una propiedad llamada multiple y no le asignamos valor, por otro lado al nombre definido en la propiedad name le agregamos al final los caracteres [] para que desde el servidor podamos identificar que el control retorna posiblemente muchos valores.

Es también común inicializar la propiedad size con un valor mayor a 1 para que sea más fácil la selección.

La mayoría de los navegadores permiten seleccionar opciones que no se encuentran juntas mediante el mouse y presionando simultáneamente la tecla Ctrl.

34 - Formulario - select (agrupamiento de opciones) Hemos visto que podemos crear cuadros de selección individual o de selección múltiple.

Ahora veamos que podemos agrupar las opciones que tiene el cuadro de selección, esto tiene sentido si el cuadro de selección tiene muchos items.

Se cuenta con un nuevo elemento llamado optgroup que agrupa un conjunto de elementos option.

Veamos un ejemplo de agrupar una serie de opciones, agruparemos una serie de frutas y verduras: Problema: Confeccionar una página que muestre un control de tipo select. Agrupar las opciones en dos grupos, en uno las frutas y en otro las verduras. Utilizar el elemento optgroup para el agrupamiento. <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Seleccione una fruta o verdura: <select name="articulo"> <optgroup label="Frutas"> <option value="1">Naranjas</option> <option value="2">Manzanas</option> <option value="3>Sandia</option> <option value="4">Frutilla</option> <option value="5">Durazno</option> <option value="6">Ciruela</option> </optgroup> <optgroup label="Verduras"> <option value="7">Lechuga</option> <option value="8">Acelga</option> <option value="9">Zapallo</option> <option value="10">Papas</option> <option value="11">Batatas</option> <option value="13">Zanahorias</option> <option value="14">Rabanitos</option> <option value="15">Calabaza</option> </optgroup> </select> <br> <input type="submit" value="Enviar"> </form> </body> </html>

Lenguaje de Marcado de Hipertexto

54

CENTRO DE ENSEÑANZA TECNICO EN INFORMATICA CETI Como podemos observar para agrupar una serie de opciones dentro de un select debemos encerrarlas con el elemento optgroup: <optgroup label="Frutas"> <option value="1">Naranjas</option> <option value="2">Manzanas</option> <option value="3>Sandia</option> <option value="4">Frutilla</option> <option value="5">Durazno</option> <option value="6">Ciruela</option> </optgroup> La propiedad label del elemento optgroup aparece dentro del control select pero no se puede seleccionar, es un título.

La propiedad label del elemento optgroup es el texto que se debe mostrar dentro del select.

Se puede hacer agrupamiento de opciones y permitir selecciones múltiples.

35 - Formulario - button El elemento button es un control visual que se puede utilizar para sustituir los controles: <input type="submit" value="Enviar"> <input type="reset" value="Borrar"> Entre otras las ventanjas de este elemento es que podemos agregar imágenes dentro del botón.

La sintaxis de este elemento es la siguiente: <button type="submit"> Texto a mostrar dentro del botón. </button> Todo lo que está contenido entre las marcas de comienzo y fin del elemento button aparece dentro del botón, como por ejemplo una imagen, un párrafo, enfatizado de una palabra etc.

La propiedad type se puede inicializar con alguno de estos tres valores: "submit", "reset" y "button". Los dos primeros cumplen las funciones que ya conocemos es decir envío de los datos al servidor y borrado del contenido de los controles. En cuanto al tercer valor posible de la propiedad type significará que deberemos codificar una función en javascript para procesar el evento.

Para ver el funcionamiento confeccionaremos un formulario que solicite el ingreso del nombre de una persona y dos elementos button para subir el dato al servidor o borrar el dato cargado: <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/htmlya/registrardatos.php" method="post"> Ingrese su nombre: <input type="text" name="nombre" size="20"> <br> <button type="submit">Enviar<img src="/imagenes/enviar.gif" alt="envio"></button> <button type="reset">Borrar<img src="/imagenes/borrar.gif" alt="borrado"></button> </form> </body> </html>

55

MANUAL DE HTML

DISEÑO WEB

Perfectamente podemos definir un texto y cargar una imagen dentro del botón: <button type="submit">Enviar<img src="/imagenes/enviar.gif" alt="envio"></button>

36 - Formulario - input type="button" Otro tipo de boton que podemos crear es mediante el elemento input y fijando en la propiedad type el valor "button".

Este tipo de botón no se lo puede hacer que actúe como los botones de tipo submit o reset, su actividad dependerá de un programa desarrollado generalmente en JavaScript.

Si bien no podemos ver su funcionamiento ya que no conocemos JavaScript si podemos implementar una página que muestre este control. Confeccionaremos una página que muestre el teclado de una calculadora: <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> <h1>Resultado:<h1> <input type="button" name="boton7" value=" 7 "> <input type="button" name="boton8" value=" 8 "> <input type="button" name="boton9" value=" 9 "> <input type="button" name="botondiv" value=" / "> <br> <input type="button" name="boton4" value=" 4 "> <input type="button" name="boton5" value=" 5 "> <input type="button" name="boton6" value=" 6 "> <input type="button" name="botondiv" value=" * "> <br> <input type="button" name="boton1" value=" 1 "> <input type="button" name="boton2" value=" 2 "> <input type="button" name="boton3" value=" 3 "> <input type="button" name="botonmas" value=" + "> <br> <input type="button" name="boton0" value=" 0 "> <input type="button" name="botonigual" value=" = "> <input type="button" name="botonmenos" value=" - "> </form> </body> </html>

Como verá cuando se presiona el botón no sucede nada. Esto es así porque no hemos asignado ninguna actividad cuando sea presionado. Recordemos que HTML solo tiene Contenido, si queremos funcionalidad deberemos definir los eventos para dichos botones.

37 - Formulario - input type="file" El control de tipo file nos permite enviar un archivo al servidor. Nuevamente el HTML solo indica al navegador que debe enviar el archivo al servidor pero debe haber en el servidor un programa que lo almacene en una carpeta del servidor.

Lenguaje de Marcado de Hipertexto

56

CENTRO DE ENSEÑANZA TECNICO EN INFORMATICA CETI Veamos la sintaxis para disponer un control de tipo file: <input type="file" name="archi"> Nuevamente utilizamos el elemento HTML input para definir este tipo de control. En la propiedad type inicializamos con el valor file. Inicializar la propiedad name también es importante ya que mediante este nombre se lo recupera en el servidor.

Otra cosa muy importante a tener en cuenta cuando hacemos upload de archivos al servidor es inicializar la propiedad enctype del elemento form: <form method="post" action="/registrardatos.php" enctype="multipart/form-data"> Con esto indicamos al navegador que el formulario almacena uno o más archivos que deben ser enviados al servidor.

Confeccionemos una página que solicite el ingreso de un nombre y la foto de la persona: <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post" enctype="multipart/formdata"> Ingrese su nombre: <input type="text" name="nombre" size="30"><br> Seleccione la foto: <input type="file" name="foto"> <br> <input type="submit" value="Enviar"> </form> </body> </html> Recordemos siempre inicializar la propiedad enctype del elemento form: <form action="/registrardatos.php" method="post" enctype="multipart/form-data">

38 - Formulario - input type="hidden" Un campo hidden se lo denomina campo oculto. Este tipo de control no visualiza nada dentro del formulario.

Su utilidad se presenta cuando desde el servidor se genera una página dinámica por ejemplo mediante PHP y se almacena en un campo oculto un valor que se rescatará al subir el formulario al servidor.

Su utilidad real solo podrá ser comprendida cuando estudie un lenguaje de servidor, pero veamos y conozcamos su sintaxis con un ejemplo.

Confeccionar un formulario que solicite ingresar el nombre de una persona y en un campo oculto almacene una hora cualquiera:

57

MANUAL DE HTML

DISEÑO WEB

<html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> <input type="hidden" value="10:20" name="hora"> Ingrese su nombre: <input type="text" name="nombre" size="30"> <br> <input type="submit" value="Enviar"> </form> </body> </html> Como vemos la sintaxis para definir un campo oculto es: <input type="hidden" value="10:20" name="hora"> En el atributo value almacenamos el valor (este valor no se puede modificar desde el formulario) Podemos imaginar una utilidad, supongamos que queremos que un visitante reenvíe un formulario cargado con todos los datos en un tiempo limitado, podríamos almacenar en el campo oculto la primera vez que solicita la página que contiene el formulario donde se resgistrará dicha hora. Luego al subir el formulario ya cargado al servidor controlaremos mediante un lenguaje de servidor si la hora actual y la hora de pedido del formulario no hacen invalidar los datos.

Ejercicios

Problema: Confeccionaremos una página que muestre el teclado de una calculadora.

Utilizar el elemento input inicializando la propiedad type con el valor "button".

<html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> <h1>Resultado:<h1> <input type="button" name="boton7" value=" 7 "> <input type="button" name="boton8" value=" 8 "> <input type="button" name="boton9" value=" 9 "> <input type="button" name="botondiv" value=" / "> <br> <input type="button" name="boton4" value=" 4 "> <input type="button" name="boton5" value=" 5 "> <input type="button" name="boton6" value=" 6 "> <input type="button" name="botondiv" value=" * "> <br> <input type="button" name="boton1" value=" 1 "> <input type="button" name="boton2" value=" 2 "> <input type="button" name="boton3" value=" 3 "> <input type="button" name="botonmas" value=" + "> <br> <input type="button" name="boton0" value=" 0 "> <input type="button" name="botonigual" value=" = "> <input type="button" name="botonmenos" value=" - "> </form> </body></html>

Lenguaje de Marcado de Hipertexto

58

CENTRO DE ENSEĂ&#x2018;ANZA TECNICO EN INFORMATICA CETI Ejercicios Problema: Confeccionar un formulario que solicite el ingreso del nombre de una persona y permita seleccionar y enviar su foto.

<html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post" enctype="multipart/form-data"> Ingrese su nombre: <input type="text" name="nombre" size="30"><br> Seleccione la foto: <input type="file" name="foto"> <br> <input type="submit" value="Enviar"> </form> </body> </html> Resultado: Ingrese su nombre: Seleccione la foto: Enviar

Problema: Confeccionar un formulario que solicite ingresar el nombre de una persona y en un campo oculto almacene una hora cualquiera

<html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> <input type="hidden" value="10:20" name="hora"> Ingrese su nombre: <input type="text" name="nombre" size="30"> <br> <input type="submit" value="Enviar"> </form> </body> </html>

39 - Formulario - agrupamiento de controles.

El HTML dispone de un elemento llamado fieldset que solo tiene el objetivo de recuadrar y agrupar un conjunto de controles de un formulario.

59

MANUAL DE HTML

DISEÑO WEB

Debemos encerrar todos los controles a agrupar entre las marcas <fieldset> y </fieldset>.

Además para agregar un título a este recuadro debemos agregar otro elemento HTML llamado legend.

Confeccionemos un formulario que solicite los datos personales de una persona y los datos del lugar donde trabaja, cada grupo de datos los dispondremos en un fieldset: Ejercicio: Problema: Confeccionar un formulario que solicite los datos personales de una persona y los datos del lugar donde trabaja, cada grupo de datos disponerlos en un fieldset. <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> <fieldset> <legend>Datos personales</legend> Apellido y nombre: <input type="text" name="nombre" size="30"><br> Documento de identidad: <input type="text" name="dni" size="8"><br> Fecha de nacimiento: <input type="text" name="fechanacimiento" size="12"><br> Dirección: <input type="text" name="direccionpersona" size="30"><br> </fieldset> <fieldset> <legend>Datos Laborales</legend> Nombre de la empresa: <input type="text" name="nombreempresa" size="30"><br> Actividad: <input type="text" name="actividad" size="50"><br> Dirección: <input type="text" name="direccionempresa" size="30"><br> </fieldset> <input type="submit" value="Enviar"> </form> </body> </html>

Podemos ver que cada grupo de controles está encerrado con el elemento fieldset: <fieldset> <legend>Datos personales</legend> Apellido y nombre: <input type="text" name="nombre" size="30"><br> Documento de identidad: <input type="text" name="dni" size="8"><br> Fecha de nacimiento: <input type="text" name="fechanacimiento" size="12"><br> Dirección: <input type="text" name="direccionpersona" size="30"><br> </fieldset>

Lenguaje de Marcado de Hipertexto

60

CENTRO DE ENSEÑANZA TECNICO EN INFORMATICA CETI Luego el título de cada fieldset lo disponemos con: <legend>Datos personales</legend>

Solución Datos personalesApellido y nombre: Documento de identidad: Fecha de nacimiento: Dirección: Datos LaboralesNombre de la empresa: Actividad: Dirección: Enviar

40 - Formulario - controles con valores iniciales.

Un control puede aparecer cargado con un valor por defecto. Veamos como inicializar con valores por defecto para cada uno de los controles que hemos visto.

Para inicializar un control de tipo text debemos dar un valor a la propiedad value: <input type="text" value="aqui su nombre" name="nombre" size="20"> El control aparece cargado con la cadena "aqui su nombre".

Para inicializar un control de tipo textarea debemos indicar el dato entre el comienzo y el fin de la marca: <textarea rows="10" cols="40" name="curriculum">Ingrese aqui su curriculum</textarea> El control textarea se inicializa con la cadena "Ingrese aqui su curriculum" Para inicializar un control de tipo checkbox debemos disponer la propiedad checked sin asignar valor: <input type="checkbox" name="java" checked>Opcion 1<br> Con esto logramos que el checkbox aparezca tildado apenas aparece el formulario.

Para inicializar un control de tipo radio debemos definir la propiedad checked sin valor, igual que un checkbox, con la salvedad que solo un un control de tipo radio puede tener definida esta propiedad: <input type="radio" name="estudios" value="1" checked>Opción 1<br>

61

MANUAL DE HTML

DISEÑO WEB

Para inicializar un control de tipo select con selección individual debemos definir la propiedad selected de los elementos option: <select name="pais"> <option value="1">Argentina</option> <option value="2" selected>España</option> <option value="3">México</option> <option value="4">Guatemala</option> <option value="5">Honduras</option> <option value="7">El Salvador</option> <option value="8">Venezuela</option> <option value="9">Colombia</option> <option value="10">Cuba</option> <option value="11">Bolivia</option> <option value="13">Perú</option> <option value="14">Ecuador</option> <option value="15">Paraguay</option> <option value="16">Uruguay</option> <option value="17">Chile</option> </select> En este caso aparece seleccionado España, más alla que sea el segundo option en la lista.

Para inicializar un control de tipo select con selección múltiple debemos definir la propiedad selected de varios elementos option: <select name="colores[]" size="4" multiple="multiple"> <option value="1" selected>Rojo</option> <option value="2">Verde</option> <option value="3" selected>Azul</option> <option value="4">Amarillo</option> <option value="5" selected>Blanco</option> <option value="6">Negro</option> <option value="7">Naranja</option> <option value="8">Violeta</option> </select> En este ejemplo los items Rojo,Azul y Blanco aparecen seleccionados desde un comienzo.

Ejercicio Confeccionaremos como ejemplo un formulario que solicite el ingreso del nombre de una persona. Luego que seleccione si es mayor de edad o no (por defecto inicializar en si), seguidamente el teléfono (cargar por defecto 453-) y por último en un textarea solicitar que ingrese comentarios. <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Apellido y nombre: <input type="text" name="nombre" size="30"><br> Es mayor de edad?:<br> <input type="radio" name="radio1" checked value="si">Si<br> <input type="radio" name="radio1" value="no">No<br> Telefono: <input type="text" value="453-" name="telefono" size="15"><br> <textarea name="comentarios" rows="5" cols="40">Ingrese Lenguaje de Marcado de Hipertexto aqui sus comentarios</textarea><br> <input type="submit" value="Enviar"> </form> </body> </html

62

CENTRO DE ENSEÑANZA TECNICO EN INFORMATICA CETI -

Formulario - orden de foco de controles.

Todos los controles de formulario pueden definir una propiedad llamada tabindex que es un valor entero entre 0 y 32767. Este número indica el orden en que los controles toman foco.

Cuando se presiona la tecla tab el navegador pasa el foco al siguiente control.

Para probar el funcionamiento implementaremos un formulario que contenga una matriz de tres filas y tres columnas de elementos de tipo text. Haremos que el foco sea por columna, es decir primero tomará foco el text de la primer fila y primer columna, luego del text de la segunda fila y primer columna etc (si no definimos la propiedad tabindex la carga de datos se efectua por fila):

Problema: Implementar un formulario que contenga una matriz de tres filas y tres columnas de elementos de tipo text. Hacer que el foco sea por columna, es decir primero tomará foco el text de la primer fila y primer columna, luego el text de la segunda fila y primer columna etc. (si no definimos la propiedad tabindex la carga de datos se efectua por fila) <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> <input type="text" name="text1" size="5" tabindex="1"> <input type="text" name="text2" size="5" tabindex="4"> <input type="text" name="text3" size="5" tabindex="7"> <br> <input type="text" name="text4" size="5" tabindex="2"> <input type="text" name="text5" size="5" tabindex="5"> <input type="text" name="text6" size="5" tabindex="8"> <br> <input type="text" name="text7" size="5" tabindex="3"> <input type="text" name="text8" size="5" tabindex="6"> <input type="text" name="text9" size="5" tabindex="9"> <br> <input type="submit" value="enviar" tabindex="10"> </form> </body> </html> Como podemos observar los valores definidos para la propiedad tabindex para la primer fila de controles text es: <input type="text" name="text1" size="5" tabindex="1"> <input type="text" name="text2" size="5" tabindex="4"> <input type="text" name="text3" size="5" tabindex="7"> Podemos observar que la propiedad tabindex no tiene valores consecutivos. Pero si vemos los text por columna podremos observar que si van en forma secuencial.

Todos los controles de formularios pueden definir la propiedad tabindex para indicar el orden de activación o foco del control.

63

MANUAL DE HTML

DISEÑO WEB

42 - Formulario - Inhabilitar controles.

Todos los controles que hemos visto podemos hacer que aparezcan inhabilitados.

Supongamos que disponemos 3 controles de tipo radio para indicar que sección del sitio deseamos ingresar. Nosotros queremos mostrar que tiene 3 secciones pero una no está disponible. Esto lo resolvemos deshabilitando un radio: <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Seleccione la sección donde desea ingresar: <br> <input type="radio" name="seccion" value="1" disabled>Niños<br> <input type="radio" name="seccion" value="2">Adolescentes<br> <input type="radio" name="seccion" value="3">Mayores<br> <input type="submit" value="Enviar"> </form> </body> </html> Para deshabilitar el primer radio añadimos la propiedad disabled sin asignarle valor: <input type="radio" name="seccion" value="1" disabled>Niños Los siguientes elementos pueden inhabilitarse: button, input, optgroup, option, select y textarea.

Esta propiedad tiene mucha aplicación si se aplica javascript en la página. Mediante javascript podemos luego de haber sido cargado el documento modificar el estado de los controles, habilitando y deshabilitando de acuerdo a los datos que carga el visitante al sitio.

43 - Formulario - text/password y maxlength Los controles de tipo text y password pueden limitar la cantidad de caracteres que puede ingresar el usuario a partir de la propiedad maxlength.

Debemos asignarle un valor entero que indica hasta cuantos caracteres está permitido ingresar.

No hay que confundir el objetivo de la propiedad size con maxlength. Con la propiedad size solo indicamos la cantidad máxima de caracteres a mostrar dentro del control antes de hacer scroll de los datos.

Ejercicio: Confeccionaremos un formulario que solicite el nombre de usuario y su clave y solo permitiremos ingresar nombres de usuarios de hasta 20 caracteres y claves de hasta 12.

Lenguaje de Marcado de Hipertexto

64

CENTRO DE ENSEÑANZA TECNICO EN INFORMATICA CETI <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Ingrese su nombre: <input type="text" name="nombre" maxlength="20" size="20"> <br> Ingrese su clave: <input type="password" name="clave" maxlength="12" size="12"> <br> <input type="submit" value="enviar"> </form> </body> </html>

Cuando ejecute esta página no podremos cargar un nombre de usuario de más de 20 caracteres, el teclado se inhabilita cuando se han ingresado 20 caracteres en el primer control.

44 - Formulario - text/password/textarea y readonly Otra propiedad que podemos asignarle a los controles que creamos con el elemento input y también el elemento textarea es readonly.

Si definimos la propiedad readonly a un control el mismo es de solo lectura y no podemos modificar su contenido. Esta propiedad tiene uso cuando mediante un lenguaje de script (generalmente javascript) modificamos el control cambiandolo de estado ante ciertos eventos.

Cuando un control tiene la propiedad readonly el control toma foco pero no se puede cambiar su contenido. La diferencia con la propiedad disabled es que con esta no toma foco el control y generalmente aparece con un color que indica que el control está deshabilitado.

Ejercicio: Confeccionemos un formulario que aparezca el nombre de una empresa en un text y el texto de un contrato en un textarea, ambos de solo lectura. <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/htmlya/registrardatos.php" method="post"> Ingrese su nombre: <input type="text" name="nombre" size="30" value="Interpolacion" readonly><br> Contrato:<br> <textarea name="comentarios" rows="5" cols="60" readonly> Por la presente .............................. </textarea> <br> <input type="submit" value="Enviar"> </form> </body> </html>

65

MANUAL DE HTML

DISEÑO WEB

45 - Formulario - Envío de datos mediante mail.

Hasta ahora siempre configuramos la propiedad action de la marca <form> con el nombre de un archivo que procesa los datos en el servidor: <form action="/registrardatos.php" method="post"> Para poder resolver esto debemos conocer el lenguaje PHP o algún otro lenguaje de servidor.

Conociendo solo HTML la solución es enviar los datos mediante el programa cliente de mail que esté configurado en la computadora. Para esto inicializamos la propiedad action de la siguiente forma: <form action="mailto:pizzasya@htmlya.com" method="post" enctype="text/plain"> Es decir inicializamos la propiedad action con el texto mailto seguido de dos puntos y la dirección de mail a la que queremos enviar los datos del formulario, recordemos siempre que utilizamos mailto el emisor del mail depende como esté configurado nuestro software de mail en nuestra computadora.

Además inicializamos la propiedad enctype con el valor "text/plain" con lo que le indicamos que se trata de un archivo de texto plano. Tengamos en cuenta que no podemos enviar archivos adjuntos.

Para probar esta funcionalidad confeccionaremos una página que permita hacer un reclamo de reparaciones y se envíen los datos a una dirección de correo.

Se debe poder ingresar el nombre, dirección y un comentario del problema.

La página HTML es: <html> <head> <title>Prueba de formulario</title> </head> <body> <h2>Reclamos</h2> <form action="mailto:reclamos@gmail.com" method="post" enctype="text/plain"> Ingrese su nombre: <input type="text" name="nombre" size="20"> <br> Ingrese su dirección: <input type="text" name="dirección" size="30"> <br> Informe del problema: <br> <textarea rows="5" cols="40" name="problema"></textarea> <br> <input type="submit" value="enviar"> </form> </body> </html>

Debe llegar a la casilla de correos reclamos@gmail.com un mail con el contenido de los datos cargados en el formulario. El mail contiene el nombre del control y el contenido ingresado por el operador.

Lenguaje de Marcado de Hipertexto

66

CENTRO DE ENSEÑANZA TECNICO EN INFORMATICA CETI Si queremos que el correo llegue con un título debemos inicializar subject: <form action="mailto:reclamos@gmail.com?subject=pedido de reparación" method="post" enctype="text/plain"> Con esto logramos ubicar perfectamente todos los mail que llegan a nuestra casilla de correos reclamos@gmail.com La desventaja del envío de datos mediante mail es que la persona no puede hacer el envío del formulario desde una máquina ubicada en un ciberbar donde muy posiblemente no nos dejen configurar un cliente de mail.

46 - Formulario - label Una última etiqueta relacionada con los formularios es la label.

Hasta este momento siempre que queríamos disponer un mensaje antes o después de un control de formulario lo escribiamos sin más.

Existe en HTML un elemento que permite asociar un texto con un control de formulario. Esto será muy útil si se accede desde un navegador no gráfico o una persona ciega que utiliza un programa que lee en voz alta el contenido de la página.

Veamos como lo hacíamos hasta ahora: Ingrese su nombre: <input type="text" name="nombre" size="20"> Utilizando el elemento label podemos hacer una referencia entre el texto y el control de entrada de datos: <label for="nombre">Ingrese su nombre:</label> <input type="text" name="nombre" size="20" id="nombre"> Veamos que hemos agregado: Hemos definido la propiedad id a la marca input.

El elemento label tiene su marca de comienzo y fin, entre medio se dispone el texto a mostrar.

Para vincular esta label con el elemento input debemos inicializar la propiedad for con el nombre asignado a la propiedad id del elemento input. Más adelante veremos que la propiedad id la pueden tener todos los elementos HTML y es de vital importancia para CSS (Hojas de Estilo) y JavaScript Confeccionemos un ejemplo completo: <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> <fieldset> <legend>Formulario de comentarios.</legend> <label for="nombre">Ingrese su nombre:</label> <input type="text" name="nombre" size="30" id="nombre"><br> <label for="mail">Ingrese su mail:</label>

67

MANUAL DE HTML

DISEﾃ前 WEB

<input type="text" name="mail" size="50" id="mail"><br> <label for="comentarios">Comentarios:</label><br> <textarea name="comentarios" rows="5" cols="60" id="comentarios"></textarea> <br> <input type="submit" value="Enviar"> </fieldset> </form> </body> </html> Como podemos ver asociamos cada etiqueta con el correspondiente control de entrada de datos: <label for="nombre">Ingrese su nombre:</label> <input type="text" name="nombre" size="30" id="nombre"><br> <label for="mail">Ingrese su mail:</label> <input type="text" name="mail" size="50" id="mail"><br> <label for="comentarios">Comentarios:</label><br> <textarea name="comentarios" rows="5" cols="60" id="comentarios"></textarea>

Normalmente las propiedades id y name de los controles de entrada de datos (input, textarea etc.) se les asigna el mismo nombre, de todos modos no es obligatorio.

La propiedad for de la label hace referencia al id del control y no al name, esto es importante si inicializamos con valores distintos el id y name de los controles.

Ejercicios Problema: Confeccionar un formulario que solicite el nombre de usuario y su clave, solo permitir ingresar en el nombres de usuarios hasta 20 caracteres y la claves hasta 12.

<html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Ingrese su nombre: <input type="text" name="nombre" maxlength="20" size="20"> <br> Ingrese su clave: <input type="password" name="clave" maxlength="12" size="12"> <br> <input type="submit" value="enviar"> </form> </body> </html>

Lenguaje de Marcado de Hipertexto

68

CENTRO DE ENSEÑANZA TECNICO EN INFORMATICA CETI Problema: Confeccionar una página que permita hacer un reclamo de reparaciones y se envíen los datos a una dirección de correo.

<html> <head> <title>Prueba de formulario</title> </head> <body> <h2>Reclamos</h2> <form action="mailto:reclamos@gmail.com" method="post" enctype="text/plain"> Ingrese su nombre: <input type="text" name="nombre" size="20"> <br> Ingrese su dirección: <input type="text" name="dirección" size="30"> <br> Informe del problema: <br> <textarea rows="5" cols="40" name="problema"></textarea> <br> <input type="submit" value="enviar"> </form> </body> </html> Se debe poder ingresar el nombre, dirección y un comentario del problema.

Problema: Confeccionar un formulario que solicite el ingreso del nombre, mail y comentarios de un visitante al sitio. Asociar cada control con un elemento label.

html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> <fieldset> <legend>Formulario de comentarios.</legend> <label for="nombre">Ingrese su nombre:</label> <input type="text" name="nombre" size="30" id="nombre"><br> <label for="mail">Ingrese su mail:</label> <input type="text" name="mail" size="50" id="mail"><br> <label for="comentarios">Comentarios:</label><br> <textarea name="comentarios" rows="5" cols="60" id="comentarios"></textarea> <br> <input type="submit" value="Enviar"> </fieldset> </form> </body> </html> 69

MANUAL DE HTML

DISEÑO WEB

Resultado Formulario de comentarios.Ingrese su nombre: Ingrese su mail: Comentarios:

Enviar

47 - Frames Con los frames se pueden mostrar más de un archivo HTML en la misma ventana del navegador.

Podemos hacer que los frames interactuen, por ejemplo al presionar un enlace en un frame podemos cargar una página en otro frame.

Solo se aconseja emplear frames cuando la situación lo amerita, hay que tener en cuenta que el uso de frame hace menos accesible el sitio y es mucho más dificil imprimir su contenido.

Veamos un ejemplo de implementar dos frames: <html> <head> <title>prueba de frames</title> </head> <frameset cols="20%,80%"> <frame src="pagina2.html"> <frame src="pagina3.html"> <noframes> <p>El navegador no soporta frames</p> </noframes> </frameset> </html> Esta página es la que define la ubicación de los frames dentro del navegador.

La cabecera tiene una sintaxis similar a todas las páginas que hemos visto, pero no existe el body, en su lugar encontramos el elemento frameset.

En este ejemplo dividimos la ventana del navegador en dos secciones que mostrarán una página HTML cada una, mediante la propiedad cols indicamos cuanto ocupará cada ventana en porcentaje: <frameset cols="20%,80%"> En el interior del elemento frameset definimos las dos páginas HTML que deben mostrarse mediante el elemento frame.

El elemento frame tiene una propiedad llamada src (source que significa fuente) que la inicializamos con el nombre de la página a mostrar. Así definimos las dos páginas:

Lenguaje de Marcado de Hipertexto

70

CENTRO DE ENSEÑANZA TECNICO EN INFORMATICA CETI <frame src="pagina2.html"> <frame src="pagina3.html"> Otra elemento importante es el noframes donde indicamos un mensaje en el caso que el navegador no cuente con la capacidad de mostrar frames (podemos disponer enlaces a las páginas en forma individual) <noframes> <p>El navegador no soporta frames</p> </noframes> Finalmente cerramos el elemento frame y la página: </frameset> </html> Las otras dos páginas son iguales a las que hemos venido haciendo: Pagina1 <html> <head> <title>prueba de frames</title> </head> <body> <h2>Frame 1</h2> </body> </html>

Pagina2 <html> <head> <title>prueba de frames</title> </head> <body> <h2>Frame 2</h2> </body> </html>

48 - Frames - Actualización de un frame a partir del enlace de otro frame Una actividad habitual con frames es disponer hipervínculos en uno de los frame y actualizar el contenido de otro frame.

Veamos con un ejemplo la sintaxis para actualizar un frame a partir del enlace de otro: pagina1.html <html> <head> <title>prueba de frames</title> </head> <frameset cols="20%,80%"> <frame src="pagina2.html"> <frame src="pagina3.html" name="ventanadinamica"> <noframes> <p>El navegador no soporta frames</p> </noframes> </frameset> </html>

71

MANUAL DE HTML

DISEÑO WEB

Podemos observar que para el frame que queremos acceder posteriormente para modificar su contenido debemos inicializar la propiedad name: <frame src="pagina3.html" name="ventanadinamica"> pagina2.html <html> <head> <title>prueba de frames</title> </head> <body> <h2>Enlaces.</h2> <ul> <li><a href="pagina3.html" target="ventanadinamica">Enlace 1</a></li> <li><a href="pagina4.html" target="ventanadinamica">Enlace 2</a></li> </ul> </body> </html> Este archivo es el frame de la izquierda, que contiene los hipervínculos a dos páginas. Para indicar que frame debe mostrar las páginas de estos hipervínculos agregamos la propiedad target inicializándola con el valor del name definido para el frame (en nuestro caso es "ventanadinamica") Tengamos en cuenta que el frame de la derecha comienza mostrando el archivo pagina3.html y luego según que hipervínculo se seleccione mostrará el archivo: pagina3.html o pagina4.html Los contenidos de los dos archivos pagina3.html y pagina4.html no tienen nada nuevo: pagina3.html <html> <head> <title>prueba de frames</title> </head> <body> <h1>Página A</h1> <h2>Este es el contenido de archivo:pagina3.html</h2> </body> </html>

página

del

pagina4.html <html> <head> <title>prueba de frames</title> </head> <body> <h1>Página B</h1> <h2>Este es el contenido de página del archivo:pagina4.html</h2> </body> </html>

Lenguaje de Marcado de Hipertexto

72

CENTRO DE ENSEÑANZA TECNICO EN INFORMATICA CETI

49 - Frames - Asignación de medidas en píxeles En los ejemplos anteriores definimos las medidas de los frames en porcentajes: <frameset cols="20%,80%"> Cuando lo indicamos en porcentajes al redimensionar la ventana del navegador el tamaño de los frame se redimensiona en forma proporcional.

Hay situaciones donde queremos que un frame no se redimensione, por ejemplo que el frame de la izquierda donde ubicaríamos un menú de opciones siempre permanezca inalterable.

Esto lo logramos indicando un valor absoluto para dicho frame.

Veamos un ejemplo donde definimos 3 frames dividiendo la ventana en tres columna. Luego queremos que el frame de la izquierda y la derecha tengan medidas inalterables, para esto lo definimos de la siguiente forma: <frameset cols="200,*,200"> Veamos que significa el asterisco para la segunda columna. Como sabemos una ventana puede redimensionarse y las tarjetas gráficas tienen distintas resoluciones en píxeles (640x480, 800x600, 1024x768 etc.), con esta sintaxis indicamos que la primer columna ocupe siempre 200 píxeles, lo mismo la tercer columna, pero la segunda tendrá un ancho de los píxeles que restan (es decir el ancho de ventana menos 400) Veamos la solución: pagina1.html <html> <head> <html> <head> <title>prueba de frames</title> </head> <frameset cols="200,*,200"> <frame src="pagina2.html"> <frame src="pagina3.html"> <frame src="pagina4.html"> <noframes> <p>El navegador no soporta frames</p> </noframes> </frameset> </html> pagina2.html <html> <head> <title>prueba de frames</title> </head> <body> <h1>Página A</h1> </body> </html>

73

MANUAL DE HTML

DISEÑO WEB

pagina3.html <html> <head> <title>prueba de frames</title> </head> <body> <h1>Página B</h1> </body> </html> pagina4.html <html> <head> <title>prueba de frames</title> </head> <body> <h1>Página C</h1> </body> </html>

Veamos algunas variantes para utilizar el asterísco: La primer columna es de 200 píxeles y los píxeles restantes se destribuyen entre el segundo y tercer frame. <frameset cols="200,*,*"> Con esta sintaxis los píxeles que restan luego de aplicar los 200 píxeles del primer frame se asignan 2/3 partes al frame central y 1/3 al frame de la derecha. <frameset cols="200,2*,*"> Podemos mezclar las unidades de medida. Con esta sintaxis el 50% corresponde al frame central, 200 píxeles al frame de la izquierda y los píxeles restantes se asignan al frame de la derecha. <frameset cols="200,50%,*;>

50 - Frames - Propiedades del elemento frame Hasta hora hemos utilizado y definido las propiedades para la marca de inicio del elemento frame: src name Otras propiedades que pasaremos a ver, comprender y probar su funcionamiento son: noresize Esta propiedad no requiere que se le asigne un valor. Si se encuentra presente el frame no podrá ser redimensionado con el mouse por el visitante del sitio.

Por ejemplo si disponemos un menú de enlaces en un frame ubicado a la izquierda es muy probable que definamos la propiedad noresize ya que poca utilidad tiene agrandar o contraer esta región de pantalla. frameborder Esta propiedad puede tomar los valores 1 o 0. Por defecto un frame aparece con borde es decir esta propiedad por defecto tiene el valor 1. Si queremos que el borde no aparezca debemos inicializarla con 0.

Hay que tener en cuenta que por más que los bordes no existan si se puede redimensionar el frame con el mouse.

Lenguaje de Marcado de Hipertexto

74

CENTRO DE ENSEÑANZA TECNICO EN INFORMATICA CETI scrolling Los valores posibles de esta propiedad son: "auto","yes","no". Por defecto está inicializada con el valor "auto". El valor auto significa que el navegador decide si se debe mostrar la barra de scroll. La mostrará solo si algún contenido del frame no se ve.

Si definimos el valor "yes" estamos indicando que siempre debe estar visible la barra de navegación y por último si asignamos el valor "no" estaremos indicando que nunca debe aparecer la barra de navegación para dicho frame.

Resolvamos el siguiente problema: Confeccionar una ventana con dos frame verticales. No permitir redimensionarlos y no mostrar el borde de los frames. Hacer que el frame de la derecha siempre muestre la barra de desplazamiento. pagina1.html <html> <head> <title>prueba de frames</title> </head> <frameset cols="200,*"> <frame src="pagina2.html" frameborder="0" noresize> <frame src="pagina3.html" frameborder="0" scrolling="yes" noresize> <noframes> <p>El navegador no soporta frames</p> </noframes> </frameset> </html> pagina2.html <html> <head> <title>prueba de frames</title> </head> <body> <h1>Página A</h1> <h1>Página A</h1> <h1>Página A</h1> <h1>Página A</h1> <h1>Página A</h1> <h1>Página A</h1> </body> </html> pagina3.html <html> <head> <title>prueba de frames</title> </head> <body> <h1>Página B</h1> <h1>Página B</h1> <h1>Página B</h1> <h1>Página B</h1> <h1>Página B</h1> <h1>Página B</h1> <h1>Página B</h1> <h1>Página B</h1> <h1>Página B</h1> <h1>Página B</h1> <h1>Página B</h1> <h1>Página B</h1> <h1>Página B</h1> <h1>Página B</h1> </body> </html>

75

MANUAL DE HTML

DISEﾃ前 WEB

51 - Frames - Anidamiento de frameset El lenguaje HTML nos permite definir un frameset en la ubicaciﾃｳn de un frame, esto se logra anidando frameset.

Vamos a crear una pﾃ｡gina que contenga dos columnas. La segunda columna la dividimos en dos filas: ------------------------------------------| | | | | | | |-----------------------------------| | | | | | | | | | | | | | | | | | | -------------------------------------------

Para resolver este formato de pﾃ｡gina tenemos que plantear los frameset de la siguiente manera:

pagina1.html <html> <head> <title>prueba de frames</title> </head> <frameset cols="200,*"> <frame src="pagina2.html" noresize> <frameset rows="70,*"> <frame src="pagina3.html" noresize> <frame src="pagina4.html" noresize> </frameset> <noframes> <p>El navegador no soporta frames</p> </noframes> </frameset> </html>

Lenguaje de Marcado de Hipertexto

76

CENTRO DE ENSEÑANZA TECNICO EN INFORMATICA CETI

Veamos más detenidamente como hemos creado los frameset, primero el framset externo define en la propiedad cols dos valores <frameset cols="200,*"> Con esto sabemos que estamos indicando que tendrá dos columnas, la primera de 200 píxeles y la segunda del resto de píxeles.

Luego debemos definir los frames de las dos columnas. Acá esta la diferencia con los otros frames vistos: <frame src="pagina2.html" noresize> <frameset rows="70,*"> El primer frame lo ocupa el archivo pagina2.html, pero el segundo frame no existe, en su lugar se define otro frameset que inicializa la propiedad rows con los valores 70 y *. Con esto estamos indicando que la segunda columna se divide en dos filas, una de 70 píxeles y la otra del resto de píxeles de la ventana.

Las otras tres páginas no tienen nada nuevo: pagina2.html <html> <head> <title>prueba de frames</title> </head> <body> <h1>Página A</h1> </body> </html>

pagina3.html <html> <head> <title>prueba de frames</title> </head> <body> <h1>Página B</h1> </body> </html>

pagina4.html <html> <head> <title>prueba de frames</title> </head> <body> <h1>Página C</h1> <h1>Página C</h1> <h1>Página C</h1> <h1>Página C</h1> <h1>Página C</h1> <h1>Página C</h1> <h1>Página C</h1> <h1>Página C</h1> <h1>Página C</h1> <h1>Página C</h1> <h1>Página C</h1> <h1>Página C</h1> <h1>Página C</h1> <h1>Página C</h1> <h1>Página C</h1> <h1>Página C</h1> <h1>Página C</h1> <h1>Página C</h1> <h1>Página C</h1> <h1>Página C</h1> <h1>Página C</h1> <h1>Página C</h1>

77

MANUAL DE HTML

DISEÑO WEB

52 - Conceptos básicos de hojas de estilo.

Creo que este curso de HTML debe finalizar con los conceptos básicos de CSS (Cascade Style Sheet) es decir Hojas de Estilo.

En las primeras versiones de HTML se comenzaron a introducir elementos con la finalidad de mejorar la "presentación" del "contenido" de la página. Así aparecieron elementos para definir las fuentes, tamaños, colores, alineamiento de textos y bloques etc.

Luego se creo otra tecnología que separa el "contenido" de la "presentación", esta es la de Hojas de Estilo. Con esto quedó perfectamente definido el objetivo de HTML (disponemos contenido) y CSS (definimos la presentación de ese contenido).

Durante todos los conceptos anteriores me contuve para emplear algún elemento HTML de presentación que mejorara la página por lo que ahora introduciré conceptos mínimos para aplicar CSS en forma básica.

Veamos la sintaxis para aplicar color de frente y fondo a un elemento HTML mediante CSS: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>título página</title> </head> <body> <h1 style="color:#0000ff">Noticias del día.</h1> <p style="color:#888888;background-color:#ffffdd"> Aquí la descripción de la noticia.

Aquí la descripción de la noticia.

Aquí la descripción de la noticia.

Aquí la descripción de la noticia.

Aquí la descripción de la noticia.

Aquí la descripción de la noticia.

Aquí la descripción de la noticia.

Aquí la descripción de la noticia.

Aquí la descripción de la noticia.

Aquí la descripción de la noticia.

Aquí la descripción de la noticia.

Aquí la descripción de la noticia.

Aquí la descripción de la noticia.

Aquí la descripción de la noticia.

Aquí la descripción de la noticia.

Aquí la descripción de la noticia.

Aquí la descripción de la noticia.

Aquí la descripción de la noticia.

Aquí la descripción de la noticia. </p> </body> </html> La propiedad que debemos inicializar se llama style y la tienen todos los elementos HTML. En este primer ejemplo inicializamos las propiedades color (define el color del texto) y background-color (define el color de fondo del texto).

Lenguaje de Marcado de Hipertexto

78

CENTRO DE ENSEÑANZA TECNICO EN INFORMATICA CETI Cada vez que inicializamos una propiedad debemos separarla de la siguiente por punto y coma.

Para definir un color lo debemos hacer indicando la candidad de rojo,verde y azul (color:#0000ff). Los dos primeros números indican la cantidad de rojo (en este caso cero), luego la cantidad de verde (en este caso 0) y por último la cantidad de azul (en este caso ff).

Como podemos observar el valor lo debemos indicar en formato hexadecimal.

Hasta ahora siempre que disponíamos un título aparecía de color negro. El negro es el estilo por defecto que tiene definido todos los elementos de títulos, si queremos variar dicho valor debemos hacerlo mediante CSS. Las hojas de estilo si son sensibles a mayúsculas y minúsculas, por lo que color no es lo mismo que definir COLOR. Las propiedades que definimos dentro de style deben ir separadas por punto y coma.

Problema: Confeccionar una página que contenga un título de nivel 1 de color azul (#0000ff) y un párrafo de color gris oscuro (#888888) y fondo amarillo claro (#ffffdd). <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>título página</title> </head> <body> <h1 style="color:#0000ff">Noticias del día.</h1> <p style="color:#888888;background-color:#ffffdd"> Aquí la descripción de la noticia.

Aquí la descripción de la noticia.

Aquí la descripción de la noticia.

Aquí la descripción de la noticia.

Aquí la descripción de la noticia.

Aquí la descripción de la noticia.

Aquí la descripción de la noticia.

Aquí la descripción de la noticia. </p> </body> </html> JavaScript, al igual que Flash, Visual Basic Script, es una de las múltiples maneras que han surgido para extender las capacidades del lenguaje HTML (lenguaje para el diseño de páginas de Internet). Al ser la más sencilla, es por el momento la más extendida. JavaScript no es un lenguaje de programación propiamente dicho como C, C++, Delphi, etc. Es un lenguaje script u orientado a documento, como pueden ser los lenguajes de macros que tienen muchos procesadores de texto y planillas de cálculo. No se puede desarrollar un programa con JavaScript que se ejecute fuera de un Navegador.

JavaScript es un lenguaje interpretado que se embebe en una página web HTML. Un lenguaje interpretado significa que a las instrucciones las analiza y procesa el navegador en el momento que deben ser ejecutadas.

79

MANUAL DE HTML

DISEÑO WEB

Nuestro primer programa será el famoso "Hola Mundo", es decir un programa que muestre en el documento HTML el mensaje "Hola Mundo". <html> <head> </head> <body> <script language="javascript"> document.write('Hola Mundo');

</script> </body>

</html> El programa en JavaScript debe ir encerrado entre la marca script e inicializada la propiedad languaje con la cadena javascript: <script language="javascript"> </script> Para imprimir caracteres sobre la página debemos llamar al comando 'write' del objeto document. La información a imprimirse debe ir entre comillas y encerrada entre paréntesis.

Todo lo que indicamos entre comillas aparecerá tal cual dentro de la página HTML. Es decir, si pedimos al navegador que ejecute esta página mostrará el texto 'Hola Mundo'.

Cada vez que escribimos una instrucción finalizamos con el caracter punto y coma.

ES IMPORTANTISIMO TENER EN CUENTA QUE JavaScript es SENSIBLE A MAYUSCULAS Y MINUSCULAS. NO ES LO MISMO ESCRIBIR: document.write que DOCUMENT.WRITE (la primera forma es la correcta, la segunda forma provoca un error de sintaxis).

Nos acostumbraremos a prestar atención cada vez que escribamos en minúsculas o mayúsculas para no cometer errores sintácticos. Ya veremos que los nombres de funciones llevan letras en mayúsculas.

Ejercicios: Busque en Internet codigos JavaScritp y copielos a su pagina según se indique DIRECCIONES A UTILIZAR http://www.blogger.com http://www.creatupropiaweb.com/midi http://www.webtaller.com/utilidades http://www.animationonline.com.freebanner.html http://bautizame.blogspot.com http://www.webestilo.com http://www.slideshare.com http://www.estadisticas.com

Lenguaje de Marcado de Hipertexto

80

CENTRO DE ENSEÑANZA TECNICO EN INFORMATICA CETI

FUENTE http://www.htmlya.com.ar:80/ http://www.webestilo.com

81