Manual De HTML5

Manual%20de%20HTML5

User Manual:

Open the PDF directly: View PDF .
Page Count: 115

Download
Open PDF In Browser	View PDF

Manual de HTML http://desarrolloweb.com/manuales/manual-html.html Página 1 de 115 Manual de HTML Introducción: Manual de HTML El Manual de HTML te enseña a trabajar con el lenguaje de marcación que sirve para construir las páginas web. HTML es el primer paso que debería completar cualquier persona que quiera dedicarse al desarrollo de web en general. Es además un conocimiento recomendado para cualquier persona que trabaje en el medio Internet. Este es un manual con bastante detalle, que empieza en el conocimiento más básico y recorre cada uno de los elementos que se pueden usar para construir todo tipo de contenido en una web, incluso formularios, tablas, etc. Hemos actualizado este manual de HTML en 2016, eliminando las partes que ya se han quedado en desuso, así como para incorporar nuevas informaciones importantes a día de hoy, buenas prácticas aconsejables, etc. Encuentras este manual online en: http://desarrolloweb.com/manuales/manual-html.html http://desarrolloweb.com/manuales/manual-html.html Página 2 de 115 Manual de HTML Autores del manual Las siguientes personas han participado como autores escribiendo artículos de este manual. Rubén Alvarez Rubén es doctor en química y programador aficionado con experiencia en PHP. Miguel Angel Alvarez Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo. Christian Santalucía http://desarrolloweb.com/manuales/manual-html.html Página 3 de 115 Manual de HTML Introducción a HTML Introducción al manual de HTML y al lenguaje de modelado de páginas web. Veremos qué es HTML y las primeras nociones que nos ayudarán a realizar las primeras pruebas de creación de una página web sencilla. Prólogo al manual de HTML Cuál es el enfoque y contenido de este Manual de HTML, a quién va dirigido, así como lecturas y materiales aconsejados para sacarle todo el provecho. Bienvenidos al Manual de HTML de DesarrolloWeb. A través de varios capítulos vamos a descubrir el principal lenguaje utilizado para la creación de páginas web: Hyper Text Markup Language, más conocido mediante sus siglas HTML. Puede que en un principio, el hecho de hablar de un lenguaje informático pare los pies a más de uno. No os asustéis, el HTML no deja de ser más que una forma un tanto peculiar de especificar el contenido de las páginas, indicando el texto y otros elementos como imágenes, tablas, listas, etc. Al final es de suma importancia el lenguaje porque es el medio con el cual se suministra el contenido a los navegadores y por tanto, si queremos comenzar a aprender a crear páginas web, forzosamente debemos comenzar por aquí. Este manual queremos que sea lo más práctico posible. Iremos conociendo el lenguaje a través de numerosos ejemplos que te sugerimos realizar por ti mismo para asimilar mejor los conocimientos. Pero antes de entrar en materia, permítenos recomendarte la lectura de de nuestro manual Publicar en Internet, en el cual se habla de una manera muy general sobre el proceso de diseñar y publicar una página web. El mencionado manual también os dejara bien claro lo que aporta HTML dentro del contexto de la creación de una página web, trata sobre editores, programas para subir archivos al servidor, etc. El público al que va enfocado este manual es a todos aquellos que, con conocimientos mínimos de informática, desean hacer mundialmente público un mensaje, una idea o una información usando para ello el medio más práctico, económico y actual: Internet. Qué necesitas para aprender HTML Lo que necesitáis como base para llevar a buen término el aprendizaje de HTML es lo siguiente: Saber escribir con un teclado Saber manejar un ratón Tener ganas de aprender Puede parecer una broma el listado anterior de requisitos, pero realmente queremos remarcar que cualquier persona que sepa manejar un ordenador tiene los conocimientos básicos para aprender HTML. Obviamente, en lo que respecta al trabajo con un ordenador, debemos saber también a abrir programas, http://desarrolloweb.com/manuales/manual-html.html Página 4 de 115 Manual de HTML editar un archivo con texto plano, guardar nuestros archivos dentro de alguna carpeta y ejecutarlos con un doble clic. Estamos seguros que si has llegado a este manual sabrás realizar todo este tipo de tareas básicas. Que aprenderás en este manual Si le pones un poco de ganas y sigues este manual hasta el final, tendrás las siguientes habilidades o conocimientos: Identificar qué se debe hacer con HTML y qué no. Capacidad para crear y publicar vuestro propio sitio web con un mínimo de calidad. Conocimientos de todo tipo sobre las tecnologías y herramientas empleadas en el ámbito de la Red. Quizás aquí comience una bonita historia y sirva como primer paso para toda una serie de experiencias y aprendizajes, no solo de HTML, sino también de muchos otros lenguajes y tecnologías que están relacionadas con el desarrollo de sitios web. Estamos seguros que para muchos se convertirá en una afición que puede derivar en pasión y terminar, en algunos casos, siendo un vicio o un oficio. Pensar que todos los profesionales del desarrollo en Internet han pasado por aquí y comenzado como vosotros con este, u otro, manual de HTML. Referencias a otros contenidos que pueden resultar de interés DesarrolloWeb.com está plagado de manuales útiles para realizar sitios web desde los más simples hasta los más complejos, sin embargo, en el punto en el que estás queremos recomendar algunas referencias que te pueden resultar de utilidad. Para quien no sepa nada sobre crear una página web, y le gusta que le expliquen las cosas desde cero y de manera visual, recomendamos ver el vídeo donde mostramos el proceso de creación de la primera página básica. Además, para complementar las explicaciones de este manual, también recomendamos el videotutorial de HTML. Finalmente, antes de comenzar con el temario, queremos daros una referencia importante a la sección HTML a fondo, donde publicamos todos los contenidos que tienen que ver con HTML y donde encontrarás este y otros manuales relacionados con el lenguaje. Revisión de 2016 Estamos revisando el manual en 2016. El texto original se escribió en 2001 y aunque el HTML en sí no ha sufrido muchas variaciones, es importante revisar el enfoque del texto. Queremos que las personas que comiencen a leer en el día de hoy tengan una información fiel a las costumbres y buenas prácticas a la hora de usar este lenguaje. En esta revisión estamos seguros que agregaremos mayor valor al manual, ampliando las informaciones, pero también eliminando algunas cosas que han quedado en desuso. Esperamos que este esfuerzo sea de provecho todavía para muchas personas a lo largo del mundo. Pasemos pues sin más preámbulos a ver de qué se trata el lenguaje HTML... Este artículo es obra de Rubén Alvarez Fue publicado por primera vez en 28/09/2016 Disponible online en http://desarrolloweb.com/articulos/21.php http://desarrolloweb.com/manuales/manual-html.html Página 5 de 115 Manual de HTML Introducción a HTML Las primeras cosas que debes saber sobre HTML: historia, objetivos y demás conocimientos donde sentar las bases del manual. HTML es el lenguaje con el que se escribe el contenido de las páginas web. Las páginas web pueden ser vistas por el usuario mediante un tipo de aplicación llamada cliente web o más comúnmente "navegador". Podemos decir por lo tanto que el HTML es el lenguaje usado por para especificar el contenido que los navegadores deben representar a la hora de mostrar una página web. Este lenguaje nos permite aglutinar textos, imágenes, enlaces... y combinarlos a nuestro gusto. La ventaja del HTML a la hora de representar el contenido en un navegador, con respecto a otros formatos físicos como libros o revistas, es justamente la posibilidad de colocar referencias a otras páginas, por medio de los enlaces hipertexto. Un poco de historia El lenguaje HTML se creó en 1991. Tiene una historia realmente corta pero para su poca vida ha sufrido importantes cambios. Su padre es Tim Berners-Lee que lo diseñó con objetivos divulgativos. Inicialmente no se pensó que la web llegaría a ser un área de ocio con carácter multimedia, de modo que, nació sin dar respuesta a todos los posibles usos que se le iba a dar y a todos los colectivos de gente que lo utilizarían en un futuro. Sin embargo, pese a esta deficiente planificación, si que se han ido incorporando modificaciones con el tiempo, agregando nuevas características para cubrir las nuevas necesidades. Como hemos dicho, los programas que leen y presentan las páginas web a los usuarios se llaman navegadores. Éstos son los responsables de interpretar el HTML y "pintar" una página tal como ellos entiendan que deben hacer. Sin embargo, esas reglas de representación no son subjetivas de cada fabricante del navegador, sino que existe una organización llamada W3C que se encarga de definir el estándar que todos deben seguir a la hora de escribir e interpretar el HTML. Estos estándares del HTML se conocen como "Especificaciones", las cuales han ido apareciendo en el tiempo. El HTML5 es el último estándar en la actualidad. Históricamente los navegadores, además de la propia comunidad de usuarios, han sido los mayores impulsores de los cambios ocurridos en el lenguaje. Una vez detectada la necesidad es el W3C el que crea el estándar y marca una dirección que todos deben seguir. Los navegadores y sus problemas El conflicto generado por los navegadores es debido a su diversidad. Existen multitud de navegadores o clientes web presentes en el mercado los cuales muchas veces no son capaces de interpretar un mismo código de una manera unificada. Esto obliga al desarrollador a, una vez creada su página, comprobar que esta puede ser leída satisfactoriamente por todos los navegadores, o al menos, los más utilizados. Cuando surgen problemas de interpretación, queda de parte del desarrollador resolver el problema tirando de técnicas o conocimientos que él disponga. Afortunadamente, en la actualidad las diferencias de interpretación de los navegadores con respecto a un http://desarrolloweb.com/manuales/manual-html.html Página 6 de 115 Manual de HTML mismo código HTML son mínimos, pero en el pasado los desarrolladores tenían que emplear mucho tiempo en remar contracorriente para solucionarlos. Sin embargo, quedan todavía muchos usuarios que navegan con sistemas anticuados, ya sea por falta de interés para actualizarse, conocimientos, o por disponer ordenadores muy antiguos. Pero no todo ha sido malo por parte de los navegadores. Ellos también son los responsables de introducir nuevas etiquetas en el uso común del día a día, que se han ido incorporando al estándar HTML en sucesivas versiones. Aunque antes de estandarizarse esas etiquetas era común que cada navegador crease su etiqueta propietaria para resolver la misma necesidad, lo que obligaba a los desarrolladores a repetir código o incluso a hacer versiones de páginas diferentes para navegadores. Con todo esto no queremos asustar a nadie y volvemos a repetir que las diferencias en la actualidad son mínimas, pero sí deseamos que quede clara la necesidad de la estandarización creada por el W3C, responsable de marcar una pauta que actualmente cumplen todos los navegadores modernos de manera bastante fiel. Los lenguajes de la web HTML no está solo como único lenguaje para crear la web, aunque en un principio sí que era así. Su evolución tan anárquica ha supuesto toda una seria de inconvenientes y deficiencias que han debido ser superados con la introducción de otras tecnologías accesorias capaces de organizar, optimizar y automatizar el funcionamiento de las webs. Ejemplos que pueden sonaros son las CSS, o JavaScript. Veremos más adelante en qué consisten algunas de ellas. Lo que es importante para el desarrollador es conocer el enfoque de cada lenguaje, para saber cuál es la manera correcta de utilizarlo y cómo se complementan los unos a los otros. No es necesario que se sea experto en todos ellos, pero sí saber qué cosas se deberían hacer con cada cual, para no cometer errores que deriven en una mala interpretación por parte de los navegadores. Así mismo tenemos que pensar que no todas las personas van a acceder a una web a través de un ordenador, sino también de un teléfono o de navegadores especializados para personas con discapacidades, por ejemplo para ciegos. Es por ello que es importante escribir correctamente los lenguajes, respetando los estándares y así cada navegador podrá hacer su mejor papel para representar la pagina lo más correctamente posible. En este manual queremos incidir mucho en este detalle, la correcta utilización del HTML: escribir el contenido, para que nuestro trabajo sea lo más adecuado y de elevada calidad. Los editores de HTML Además del navegador necesario para ver los resultados de nuestro trabajo, necesitamos evidentemente otra herramienta capaz de crear la página en si. Un archivo HTML (una página) no es más que un texto plano al que le colocamos extensión ".html". Es por ello que para programar en HTML necesitamos un editor de texto. Nota: En 2001 cuando escribimos este manual por primera vez recomendábamos probar a comenzar con el Bloc de notas que viene con Windows. El motivo es que es un programa tan simple que nos permite centrarnos simplemente en el HTML, eliminando todo tipo de ayudas. Hoy preferimos recomendar otras alternativas, aunque hemos dejado esta nota por motivos nostálgicos. http://desarrolloweb.com/manuales/manual-html.html Página 7 de 115 Manual de HTML Es recomendable usar un editor de textos sencillo, de texto plano. Queremos remarcar que nunca se debe usar el tipo de editor de textos que se usan para escribir documentos, cartas, trabajos para el colegio, como Wordpad o Microsoft Word, pues colocan su propio código especial al guardar los documentos y HTML es únicamente texto plano, con lo que podremos tener problemas. Otro tipo de editor que tampoco recomendamos es DreamWeaver, un editor que te escribe el HTML a base de tocar botones, negritas, listas, crear tabla, etc. Para aprender es extremadamente recomendable que se use un programa que te permita escribir el código en crudo, así no tendrás problemas en el futuro. El tipo de editores que recomendamos son aquellos específicos para la edición de código, los cuales están pensados para facilitar los procesos de la programación y de la escritura de código plano como el del lenguaje HTML. Existen infinidad de editores de código interesantes, que nos aportan más o menos facilidades y que nos permiten aumentar nuestra productividad. No obstante, es aconsejable en un principio utilizar una herramienta lo más sencilla posible para poder prestar la máxima atención a nuestro código y familiarizarnos lo antes posible con él. Siempre tendremos tiempo más delante de pasarnos a editores más versátiles con la consiguiente ganancia de tiempo. No es posible decir a nadie el editor que debe de usar, porque cada uno tendrá sus preferencias. No obstante, en 2016 y para las personas que están comenzando nosotros recomendamos: Atom Brackets Igual alguna persona que comience puede pensar que tienen muchas opciones, pero realmente podemos comenzar con lo básico, crear nuevos archivos, editar el código, guardarlos en nuestro disco duro... y punto. Recomendamos estos editores porque están disponibles para todas las plataformas, Windows, Mac y Linux y porque son gratuitos para cualquier uso. A continuación tienes algunas referencias para ampliar la información, aunque con estas recomendaciones tienes para empezar. Para una referencia más claro todo el tema de editores y los tipos que existen, visita los artículos: Editores de HTML. Si buscas en DesarrolloWeb, en el buscador por "editores", encontrarás muchas otras alternativas. HTML es para escribir el contenido Volveremos sobre este punto, pues es de vital importancia para entender y usar bien HTML. Graba e tu memoria que HTML es para especificar el contenido de las páginas web y no el aspecto que van a tener. Cuando nos referimos al contenido queremos indicar párrafos, imágenes, listas, tablas y todo aquello que forma parte de "el qué". Nunca debemos usar HTML para definir cómo se debe de ver un contenido, si el texto debe tener color rojo, con una fuente mayor, o si se debe alinear a la derecha. Para especificar el aspecto que debe tener una web se usa un lenguaje complementario, llamado CSS. Por tanto, HTML sirve para decir qué contenido debe tener una página y CSS sirve para decir cómo se debe representar tal contenido, con qué estilo. Es fácil saltarse esta regla, porque en HTML existen diversas etiquetas (y atributos, de los que no hemos hablado todavía) que realmente están pensados para definir la presentación. Es una herencia de versiones pasadas del HTML y aunque en este manual se nos pueda saltar alguna vez alguna excepción, no debemos caer en la trampa de usar el HTML para definir cómo debe de http://desarrolloweb.com/manuales/manual-html.html Página 8 de 115 Manual de HTML representarse un elemento en la página. Conclusión Como has visto, una página es un archivo donde está contenido el código HTML en forma de texto. Estos archivos tienen extensión .html o .htm (es indiferente cuál utilizar). De modo que cuando programemos en HTML lo haremos con un editor de textos y guardaremos nuestros trabajos con extensión .html, por ejemplo mipágina.html Consejo: Utiliza siempre la misma extensión en tus archivos HTML. Eso evitará que te confundas al escribir los nombres de tus archivos unas veces con .htm y otras con .html. Cabe remarcar que hoy todo el mundo usa la extensión ".html" y no ".htm" Este artículo es obra de Rubén Alvarez Fue publicado por primera vez en 28/09/2016 Disponible online en http://desarrolloweb.com/articulos/21.php Sintaxis del HTML Descripción de la sintaxis con la que se trabaja en el lenguaje HTML, así como la estructura que tendrá el documento básico HTML. El HTML es un "lenguaje de marcado". Basa su sintaxis en un elemento base al que llamamos marca, tag o simplemente etiqueta. A través de las etiquetas vamos definiendo los elementos del documento, como enlaces, párrafos, imágenes, etc. Así pues, un documento HTML estará constituido por texto y un conjunto de etiquetas para definir la función que juega cada contenido dentro de la página. Todo eso servirá al navegador para saber cómo se tendrá que presentar el texto y otros elementos en la página. Existen etiquetas para crear negritas, párrafos, imágenes, tablas, listas, enlaces, etc. Así pues, aprender HTML es básicamente aprenderse una serie de etiquetas, sus funciones, sus usos y saber un poco sobre cómo debe de construirse un documento básico. Es una tarea muy sencilla de afrontar, al alcance de cualquier personas, puesto que el lenguaje es muy entendible por los seres humanos. Anatomía de una etiqueta HTML La etiqueta presenta frecuentemente dos partes, su apertura y cierre, y se encierran ambas partes entre símbolos "menor que" y "mayor que". Lo veremos a continuación. Apertura El inicio de una etiqueta se produce de la siguiente manera: Cierre http://desarrolloweb.com/manuales/manual-html.html Página 9 de 115 Manual de HTML El final de una etiqueta se produce de manera similar a su apertura, aunque agregando una barra: Nota: Por razones de formato del texto, en DesarrolloWeb.com, cuando no estamos escribiendo un código y queremos referirnos a una etiqueta la escribimos con mayúsculas. Los códigos se diferencian fácilmente porque tienen su estilo particular. Donde escribimos las etiquetas sin los mayores y menores que y con mayúsculas es en los párrafos del texto. Todo lo incluido en el interior de esa etiqueta sufrirá las modificaciones que caracterizan a esta etiqueta. Así por ejemplo: La etiqueta B define un texto en negrita. Si en nuestro documento HTML escribimos una frase con el siguiente código: Esto esta en negrita Veremos que las palabras "Esto esta en negrita" aparecen en negrita. Es así de simple. Otro ejemplo rápido. La etiqueta P define un párrafo. Si en nuestro documento HTML escribimos:

Hola, estamos en el párrafo 1

Ahora hemos cambiado de párrafo

Como resultado obtendríamos dos párrafos con esos textos. En HTML los párrafos están separados por un doble salto de línea. Se verían más o menos de esta manera: Partes de un documento HTML Además de todo esto, un documento HTML ha de estar delimitado por la etiqueta HTML. Dentro de este documento, podemos asimismo distinguir dos partes principales: La cabecera, delimitada por la etiqueta HEAD, donde colocaremos etiquetas de índole informativo, como por ejemplo el titulo de nuestra página. El contenido de la cabecera no suele aparecer en el cuerpo de la página, pero sirve a los navegadores y otros sistemas para encontrar información útil para entender y procesar el documento. El cuerpo, flanqueado por la etiqueta BODY, que será donde colocaremos nuestro texto e imágenes http://desarrolloweb.com/manuales/manual-html.html Página 10 de 115 Manual de HTML delimitados a su vez por otras etiquetas como las que hemos visto. El resultado de un documento básico tiene la siguiente estructura: Mi documento básico

Este es el cuerpo de mi primera página HTML

Este segundo párrafo también forma parte del cuerpo

Nota: A este documento básico le faltan todavía algunas cosas importantes que no queremos que nunca se te olviden. Sin embargo hablaremos de ellas en el siguiente artículo, dedicado a la página HTML básica. Las mayúsculas o minúsculas son indiferentes al escribir etiquetas En HTML las mayúsculas y minúsculas son indiferentes. Quiere decir que las etiquetas pueden ser escritas con cualquier tipo de combinación de mayúsculas y minúsculas. Resulta sin embargo aconsejable acostumbrarse a escribirlas en minúscula ya que otras tecnologías que pueden convivir con nuestro HTML (XML por ejemplo) no son tan permisivas y nunca viene mal hacernos a las buenas costumbres desde el principio, para evitar fallos triviales en un futuro. Saltos de línea en HTML Otra de las cosas importantes de conocer sobre la sintaxis básica del HTML es que los saltos de línea no importan a la hora de interpretar una página. Un salto de línea será simplemente interpretado como un separador de palabras, un espacio en blanco. Es por ello que para separar líneas necesitamos usar la etiqueta de párrafo comentada antes, o la etiqueta BR que significa un salto de línea simple. Esto es una línea
Esto es otra línea Ahora, aunque estoy escribiendo aparentemente en otra línea, no se verá el salto de línea porque no lo he separado por el BR (o P, o cualquier otra etiqueta que produzca el salto de línea Nota: La etiqueta BR no tiene su correspondiente cierre. Es un detalle que quizás te haya llamado la atención. Volveremos sobre ello más adelante. http://desarrolloweb.com/manuales/manual-html.html Página 11 de 115 Manual de HTML Es un detalle que choca al principio de usar HTML, pero al que te acabas acostumbrando con rapidez. Iremos viendo ejemplos a lo largo de todo el Manual de HTML, por lo que no debes preocuparte por ahora, sólo seguir leyendo. Este artículo es obra de Rubén Alvarez Fue publicado por primera vez en 28/09/2016 Disponible online en http://desarrolloweb.com/articulos/21.php Tu primera página Vamos a ver cómo se hace una página muy sencilla en HTML, que sirva de práctica a los debutantes. Solo hemos comenzado el Manual de HTML, pero ya podemos hacer un primer ejemplo completo y, sobre todo, correcto. Con lo que sabemos ya casi estamos listos para practicar, aunque todavía tenemos que adquirir algún conocimiento adicional. No te olvides ahora de practicar, así que usa tu editor de código preferido y crea por tu cuenta los ejercicios que vamos a ir realizando. Recuerda que la práctica es la mejor vía para afianzar los conocimientos. En el anterior artículo ya adelantamos la forma de un documento HTML básico, con sus etiquetas de cabecera y cuerpo. No obstante, aún tenemos que agregar alguna cosa adicional para que todo funcione de la mejor manera. Doctype Reconozco que el "doctype" no es la etiqueta más intuitiva, pero debemos mencionarla ahora porque es el inicio de cualquier archivo HTML. Viene heredada del XML, que es un lenguaje precursor del HTML. En el pasado la etiqueta Doctype era bastante más compleja, pero afortunadamente con la llegada de HTML5 se simplificó para quedar simplemente como esto: No pretendas entenderla mucho, piensa en ella como una ceremonia que debes realizar (algo que debes escribir) al inicio de todo documento HTML. Juego de caracteres El juego de caracteres es otro asunto que puede parecer un poco complejo, pero que tenerlo claro desde el principio te ayudará a no pasar en el futuro por diversos problemas. Este juego de caracteres, o codificación, depende del sistema operativo que estás usando para crear tu archivo HTML. Mientras que unos sistemas como Linux o Mac usan por defecto un juego de caracteres llamado UTF-8, en Windows se usa de manera predeterminada otro juego de caracteres llamado ISO-8859http://desarrolloweb.com/manuales/manual-html.html Página 12 de 115 Manual de HTML 1. Parece una información un tanto técnica y fuera de necesidad para introducir ahora que estamos comenzando, pero insistimos que nos ahorrará frustraciones al dar los primeros pasos, pero sobre todo en un futuro. En HTML5 el juego de caracteres a usar es siempre UTF-8. Por lo que tendremos que tener especial atención si somos usuarios de Windows, para asegurarnos que usamos la codificación correcta. Es otro de los motivos por los que en pasados artículos recomendábamos Brackets o Atom como editores de código, ya que éstos trabajan siempre en UTF-8, independientemente del sistema operativo. Si no estás usando uno de esos editores, te recomendamos hacerlo ahora y si te empeñas en trabajar con tu propio editor infórmate sobre el juego de caracteres que produce y si existe alguna opción o configuración que te asegure usar siempre UTF-8. Para definir qué juego de caracteres estamos usando en un documento HTML se tiene que escribir una etiqueta en la cabecera de la página, en el HEAD, llamada META. Realmente las etiquetas META las trataremos más adelante, porque sirven para varias cosas interesantes. Pero de momento nos aseguraremos que tenemos esta etiqueta en el head. Igualmente, no pretendemos hablar mucho de esta etiqueta por el momento, solo que te la tomes como un contrato a cumplir para tener un documento correcto. Te ampliamos esta información en el artículo Documento básico HTML5. Un documento HTML correcto A continuación tienes un documento básico con las etiquetas necesarias para comenzar con buen pie. Mi primera página

Bienvenido,

Estás en la página Comida para Todos.

Aquí aprenderás recetas fáciles y deliciosas.

Puedes copiar y pegarlo en tu editor de código. Ahora guarda ese archivo con extensión .html o .htm en tu disco duro. Para ello accedemos al menú Archivo y seleccionamos la opción Guardar como. En la ventana elegimos el directorio donde deseamos guardarlo y colocaremos su nombre, por ejemplo mi_pagina.html Consejo: Utiliza nombres en tus archivos que tengan algunas normas básicas para ahorrarte disgustos y líos. Nuestro consejo es que no utilices acentos ni espacios ni otros caracteres raros. También te ayudará escribir siempre las letras en minúsculas. Esto no quiere decir que debes hacer nombres de archivos http://desarrolloweb.com/manuales/manual-html.html Página 13 de 115 Manual de HTML cortos, es mejor hacerlos descriptivos para que te aclaren lo que hay dentro. Algún caracter como el guión "-" o el guión bajo "_" te puede ayudar a separar las palabras. Por ejemplo quienes_somos.html Con el documento HTML creado, podemos ver el resultado obtenido a partir de un navegador. Es conveniente, llegado a este punto, hacer hincapié en el hecho de que no todos los navegadores son idénticos a la hora de interpretar un documento. Desgraciadamente, los resultados de nuestro código pueden cambiar de uno a otro por lo que resulta aconsejable visualizar la página en varios clientes web. Generalmente se usan Chrome, Internet Explorer y Firefox como referencias ya que son los más extendidos. A decir verdad, en el momento que estas líneas son escritas, Google Chrome acapara la mayoría de usuarios y Firefox e Internet Explorer/Edge están relegados a un segundo plano. Esto no quiere decir que lo debemos dejar totalmente de lado ya que incluso una minoría que puede proporcionarnos puede resultar muy importante para nosotros. Ten en cuenta que el archivo debe tener codificación UTF-8, como hemos mencionado antes. Una vez guardado el fichero con extensión .html, para abrir la página en el navegador, simplemente tienes que acceder a la carpeta donde has guardado el archivo y darle un doble clic. Se trata de una tarea sencilla que estamos seguros que podrás realizar. Si no lo consigues, fíjate que la mayoría de los navegadores tienen un menú. En el menú de "Archivo" de tu navegador preferido encontrarás una opción como "Abrir archivo", desde donde también podrás abrir una página realizada por ti con tu editor de código. Una vez abierto el archivo podréis ver vuestra primera página web. Algo sencillita pero por algo se empieza. Ya veréis como en poco tiempo seremos capaces de mejorar sensiblemente. Fijaos en la parte superior izquierda de la ventana del navegador. Podréis comprobar la presencia del texto delimitado por la etiqueta TITLE. Esta es una de las funciones de esta etiqueta, cuyo principal cometido es el de servir de referencia en los motores de búsqueda como Google. Por otro lado, los elementos que colocamos entre la etiqueta BODY, y su cierre, se pueden ver en el espacio http://desarrolloweb.com/manuales/manual-html.html Página 14 de 115 Manual de HTML reservado para el cuerpo de la página. Si ahora hacéis click con el botón derecho sobre la página y elegís "Ver código fuente de la página" (o View page source) veréis como en una ventana accesoria aparece el código de nuestro archivo HTML. Este recurso es de extremada importancia, ya que nos permite ver el tipo de técnicas empleadas por otros para la confección de sus páginas. Con todo esto asimilado ya estamos en condiciones de adentrarnos un poco más en la descripción de algunas de las etiquetas más empleadas del HTML, en los próximos capítulos de este manual de HTML. Este artículo es obra de Rubén Alvarez Fue publicado por primera vez en 28/09/2016 Disponible online en http://desarrolloweb.com/articulos/21.php http://desarrolloweb.com/manuales/manual-html.html Página 15 de 115 Manual de HTML Formatos básicos con HTML Cómo realizar el formato de textos que se colocan en una página web. Aprende a utilizar tus primeras etiquetas HTML y atributos para definir los contenidos de la página y aplicar un formato básico. Formato de párrafos en HTML Cómo colocar párrafos y saltos de línea en páginas web. También vemos los encabezados como párrafos que sirven de titulo. En los capítulos anteriores hemos presentado a título de ejemplo algunas etiquetas que permiten dar formato a nuestro texto. En este capitulo veremos con más detalle las más ampliamente utilizadas y ejemplificaremos algunas de ellas posteriormente. Formatear un texto pasa por tareas tan evidentes como definir los párrafos, justificarlos, introducir viñetas, numeraciones o bien poner en negrita, itálica... Hemos visto que para definir los párrafos nos servimos de la etiqueta P que introduce un salto y deja una línea en blanco antes de continuar con el resto del documento. Podemos también usar la etiqueta BR, de la cual no existe su cierre correspondiente (/BR), para realizar un simple retorno de carro con lo que no dejamos una línea en blanco sino que solo cambiamos de línea. Nota: Existen otras etiquetas que no tienen su correspondiente de cierre, como IMG para las imágenes, que veremos más adelante. Esto ocurre porque un salto de línea o una imagen no empiezan y acaban más adelante sino que sólo tienen presencia en un lugar puntual. Podéis comprobar que cambiar de línea en nuestro documento HTML sin introducir alguna de estas u otras etiquetas no implica en absoluto un cambio de línea en la página visualizada. En realidad el navegador introducirá el texto y no cambiara de línea a no ser que esta llegue a su fin o bien lo especifiquemos con la etiqueta correspondiente. Los párrafos delimitados por etiquetas P pueden ser fácilmente justificados a la izquierda, centro o derecha especificando dicha justificación en el interior de la etiqueta por medio de un atributo "align". Un atributo no es más que un parámetro incluido en el interior de la etiqueta que ayuda a definir el funcionamiento de la etiqueta de una forma más personalizada. Veremos a lo largo de este manual cantidad de atributos muy útiles para todo tipo de etiquetas. Nota: Ten muy en cuenta lo siguiente, que ya hemos comentado anteriormente. El HTML se usa http://desarrolloweb.com/manuales/manual-html.html Página 16 de 115 Manual de HTML para definir el contenido. Por tanto, los atributos align que vamos a conocer a continuación se están metiendo a una parcela que no le corresponde al HTML, porque están definiendo la forma con la que un párrafo debe de representarse, su estilo, y no el contenido. Es importante señalarlo para que aprendas que estas cosas se deben hacer mediante el lenguaje CSS, que sirve para definir el estilo, la forma. En la revisión de este texto en 2016 hemos decidido mantener estos ejemplos, a pesar que no es el uso más correcto del HTML, porque así nos sirve para introducir los atributos de las etiquetas, que no hemos visto hasta ahora. No obstante, tú lo tendrás en cuenta cuando realices tus páginas y aprenderás CSS para ver cómo se deben de aplicar estos formatos. Así, si deseásemos introducir un texto alineado a la izquierda escribiríamos:

Texto alineado a la izquierda

Para una justificación al centro:

Texto alineado al centro

Para alinear a la derecha:

Texto alineado a la derecha

Los anteriores párrafos con sus alineaciones se verían más o menos así: Como veis, en cada caso el atributo align toma determinados valores que son escritos entre comillas. En algunas ocasiones necesitamos especificar algunos atributos para el correcto funcionamiento de la etiqueta. En otros casos, el propio navegador toma un valor definido por defecto. Para el caso de align, el valor por defecto es left. Nota: Los atributos tienen sus valores indicados entre comillas ("), pero si no los indicamos entre comillas también funcionará en la mayoría de los casos. Sin embargo, es aconsejable que pongamos siempre las comillas para acostumbrarnos a utilizarlas, por dar homogeneidad a nuestros códigos y para evitar errores futuros en sistemas más quisquillosos. El atributo align no es exclusivo de la etiqueta P. Otras etiquetas muy comunes, que veremos más adelante, entre las cuales se introducen texto o imágenes, suelen hacer uso de este atributo de una forma habitual. Imaginemos un texto relativamente largo donde todos los párrafos están alineados a la izquierda (por ejemplo). Una forma de simplificar nuestro código y de evitar introducir continuamente el atributo align http://desarrolloweb.com/manuales/manual-html.html Página 17 de 115 Manual de HTML sobre cada una de nuestras etiquetas es utilizando la etiqueta DIV. Esta etiqueta, DIV, por si sola no sirve para nada, salvo producir un salto de línea simple. Para que realmente se vea tiene que estar acompañada de algún estilo definido en el CSS o de atributos del HTML como align y lo que nos permite es alinear cualquier elemento (párrafo o imagen) de la manera que nosotros deseemos. Así, el código:

Parrafo1

Parrafo3

Parrafo2

es equivalente a:

Parrafo1

Parrafo2

Parrafo3

Nota: Recuerda que align tampoco sería correcto de usar en una etiqueta DIV, por el mismo motivo que no sería correcto de usar en un párrafo. Nos sirve para conocer facetas del HTML, que antes se usaban más y nos han quedado heredadas en las versiones actuales del lenguaje. Como hemos visto, la etiqueta DIV marca divisiones en las que definimos un bloque de contenido, y a los que podríamos aplicar estilo de manera global, aunque lo correcto sería aplicar ese estilo del lado del CSS. Ejemplo práctico: Para practicar un poco lo que acabamos de ver vamos a proponer un ejercicio que podéis resolver en vuestros ordenadores. Simplemente queremos construir una página que tenga, por este orden: 2 Párrafos centrados 3 Párrafos alineados a la derecha Un salto de línea triple 1 párrafo alineado a la izquierda El código fuente del ejercicio, con lo que sabemos hasta ahora, podría tener la siguiente forma: parrafos http://desarrolloweb.com/manuales/manual-html.html Página 18 de 115 Manual de HTML

Ejemplo de formatear parrafos

Esto es el resultado:

Que son los buscadores que no tienen porque mantener un índice y que tienen robots que constantemente recorren Internet en busca de nuevas páginas para incluirlas en el buscador.

Imaginemos un texto relativamente largo donde todos los párrafos están alineados a la izquierda (por ejemplo).

Que son los buscadores que no tienen porque mantener un índice y que tienen robots que constantemente recorren Internet en busca de nuevas páginas para incluirlas en el buscador. Estos buscadores suelen tener un formulario accesible desde la página inicial, con el enlace correspondiente. No hay que navegar las categorías para acceder al formulario.

Esto es que acaba... hasta luego...

Al verlo en un navegador obtendríamos un resultado como el que sigue: Encabezados http://desarrolloweb.com/manuales/manual-html.html Página 19 de 115 Manual de HTML Existen otras etiquetas para definir párrafos especiales, que harán las veces de títulos. Son los encabezados o headings en inglés. Como decimos, son etiquetas que formatean el texto como un titular, pero el hecho de que cambien el formato no es lo que nos tiene que preocupar, sino el significado en sí de la etiqueta. Es cierto que los navegadores asignan un tamaño mayor de letra y colocan el texto en negrita, pero lo importante es que sirven para definir la estructura del contenido de un documento HTML. Así los navegadores para ciegos podrán informar a los invidentes que esta es una división nueva de contenido y que su titular es este o aquel. También motores de búsqueda sabrán interpretar mejor el contenido de una página en función de los titulares y subtitulares. Hay varios tipos de encabezados, que se diferencian visualmente en el tamaño de la letra que utilizan. La etiqueta en concreto es la H1, para los encabezados más grandes, H2 para los de segundo nivel y así hasta H6 que es el encabezado más pequeño. Pero lo importante, insistimos es la estructura que denotan. Una página tendrá generalmente un encabezado de nivel 1 y dentro varios de nivel 2. Luego, dentro de los H2 encontraremos si acaso H3, etc. Nunca debemos usar los encabezados porque nos formateen el texto de una manera dada, sino porque nuestro documento lo requiera según su estructura. Los encabezados implican también una separación en párrafos, así que todo lo que escribamos dentro de H1 y su cierre (o cualquier otro encabezado) se colocará en un párrafo independiente. Podemos ver cómo se presentan algunos encabezados a continuación.

Encabezado de nivel 1

Los encabezados, como otras etiquetas de HTML, soportan el atributo align. Vemos un ejemplo de encabezado de nivel 2 alineado al centro, aunque repetimos que esta formatación debería hacerse en CSS.

Encabezado de nivel 2

Los encabezados se verán de esta manera en la página: http://desarrolloweb.com/manuales/manual-html.html Página 20 de 115 Manual de HTML Otro ejercicio interesante es construir una página web que contenga todos los encabezados posibles. Se puede ver a continuación. headings

Encabezado de nivel 1

Encabezado de nivel 2

Encabezado de nivel 3

Encabezado de nivel 4

Encabezado de nivel 5

Encabezado de nivel 6

Este artículo es obra de Rubén Alvarez Fue publicado por primera vez en 29/09/2016 Disponible online en http://desarrolloweb.com/articulos/21.php Formateando el texto Vemos como colocar negritas, itálicas, subrayados, subíndices y supreíndices. Además de todo lo relativo a la organización de los párrafos, uno de los aspectos primordiales del formateo http://desarrolloweb.com/manuales/manual-html.html Página 21 de 115 Manual de HTML de un texto es el de la propia letra. Resulta muy común y práctico presentar texto resaltado en negrita, itálica y otros. Paralelamente el uso de índices, subíndices resulta vital para la publicación de textos científicos. Todo esto y mucho más es posible por medio del HTML a partir de multitud de etiquetas entre las cuales vamos a destacar algunas. Pero antes de comenzar cabe hacer una reflexión sobre por qué son interesantes estas etiquetas y se siguen usando, a pesar que están entrando prácticamente en el terreno de CSS, ya que en la práctica están directamente formateando el aspecto de las fuentes. Son importantes porque las etiquetas en si no están para definir un estilo en concreto, sino una función de ciertas palabras dentro de un contenido. Por ejemplo, las negritas quieren decir que algo tiene más fuerza o importancia dentro de un texto y una itálica se puede usar para un texto que citado o algún énfasis particular. En cuanto a subíndices y superíndices todavía es más claro, ya que éstos especifican cosas que tiene que ver con el contenido y no con la presentación. Negrita Podemos escribir texto en negrita incluyéndolo dentro de las etiquetas B y su cierre (bold). Esta misma tarea es desempeñada por STRONG y su cierre, siendo ambas equivalentes. Nosotros nos inclinamos por la primeras por simple razón de esfuerzo. Escribiendo un código de este tipo: Texto en negrita Obtenemos este resultado: Nota: ¿Qué diferencia hay entre B y STRONG? Aunque las dos etiquetas hacen el mismo efecto, tienen una peculiaridad que las hace distintas. La etiqueta B indica negrita, mientras que la etiqueta STRONG indica que se debe escribir con fuerza. El HTML lo interpretan los navegadores según su criterio, es por eso que las páginas se pueden ver de distinta manera en unos browsers y en otros. La etiqueta H1 quiere decir "encabezado de nivel 1", es el navegador el responsable de formatear el texto de manera que parezca un encabezado de primer nivel. En la práctica los encabezados de los navegadores habituales son muy parecidos (tamaño de letra grande y en negrita), pero otro navegador podría colocar los encabezados con subrayado si le pareciese oportuno. La diferencia entre b y STRONG se podrá entender ahora. Mientras que B significa simplemente negrita y todos los navegadores la interpretarán como negrita, STRONG es una etiqueta que significa que se tiene que resaltar fuertemente el texto y cada navegador es el responsable de resaltarlo como desee. En la práctica STRONG coloca el texto en negrita, pero podría ser que un navegador decidiese resaltar colocando negrilla, subrayado y color rojo en el texto. Itálica También en este caso existen dos posibilidades, una corta: I y su cierre (italic) y otra un poco más larga: EM http://desarrolloweb.com/manuales/manual-html.html Página 22 de 115 Manual de HTML y su cierre. En este manual, y en la mayoría de las páginas que veréis por ahí, os encontraréis con la primera forma sin duda más sencilla a escribir y a acordarse. He aquí un ejemplo de texto en itálica: Texto en itálica Que da el siguiente efecto: Subrayado El HTML nos propone también para el subrayado el par de etiquetas: U (underlined). Sin embargo, el uso de subrayados ha de ser aplicado con mucha precaución dado que los enlaces hipertexto van, a no ser que se indique lo contrario, subrayados con lo que podemos confundir al lector y apartarlo del verdadero interés de nuestro texto. Además, cabe decir que la etiqueta U se ha quedado obsoleta, debido a que es algo que realmente se debe hacer del lado del CSS, al ser básicamente un estilo. Subíndices y supraíndices Este tipo de formato resulta de extremada utilidad para textos científicos. Las etiquetas empleadas son: ^y para los supraíndices _y para los subíndices Aquí tenéis un ejemplo: La ¹³CC₃H₄ClNOS es un heterociclo alergeno enriquecido El resultado: Anidar etiquetas Todas estas etiquetas y por supuesto el resto de las vistas y que veremos más adelante pueden ser anidadas unas dentro de otras de manera a conseguir resultados diferentes. Así, podemos sin ningún problema crear texto en negrita e itálica embebiendo una etiqueta dentro de la otra: Esto sólo está en negrita y esto en negrita e itálica http://desarrolloweb.com/manuales/manual-html.html Página 23 de 115 Manual de HTML Esto nos daria: Consejo: Cuando anides etiquetas HTML hazlo correctamente. Nos referimos a que si abres etiquetas dentro de otra más principal, antes de cerrar la etiqueta principal cierres las etiquetas que hayas abierto dentro de ella. Debemos evitar códigos como el siguiente: Esto está en negrita e itálica En favor de códigos con etiquetas correctamente anidadas: Esto está en negrita e itálica Esto es muy aconsejable, aunque los navegadores entiendan bien las etiquetas mal anidadas, por dos razones: 1. Sistemas como XML no son tan permisivos con estos errores y puede que en el futuro nuestras páginas no funcionen correcamente. 2. A los navegadores les cuesta mucho tiempo de procesamiento resolver este tipo de errores, incluso más que construir la propia página y debemos evitarles que sufran por una mala codificación. Todo lo que se ha visto hasta el momento en el Manual de HTML se puede ver en un vídeo para aprender visualmente. Si te interesa puedes acceder al Videotutorial de HTML - Parte 1, documento básico y formato de texto. Este artículo es obra de Rubén Alvarez Fue publicado por primera vez en 10/10/2001 Disponible online en http://desarrolloweb.com/articulos/21.php Color, tamaño y tipo de letra Seguimos aprendiendo etiquetas que nos sirven para formatear el texto. Hasta ahora todos nuestros ejemplos han sido en blanco y negro. Muy aburrido! seguro que estáis deseando dar un poco de color a las páginas, así que en este artículo vamos a comenzar con ello. A pesar de que por razones de homogeneidad y sencillez, pero sobre todo por la necesidad de la separación del código por responsabilidades, este tipo de etiquetas para definir formatos deben de realizarse http://desarrolloweb.com/manuales/manual-html.html Página 24 de 115 Manual de HTML exclusivamente por medio de las hojas de estilo en cascada (de las cuales ya tendremos tiempo de hablar). Sin embargo, en HTML tradicional existe una forma clásica y directa de definir color tamaño y tipo de letra de un texto determinado. Esto se hace a partir de la etiqueta FONT y su cierre correspondiente. Dentro de esta etiqueta deberemos especificar los atributos correspondientes a cada uno de estos parámetros que deseamos definir. A continuación os comentamos los atributos principales de esta etiqueta: Nota: Los colores no son responsabilidad del HTML, puesto que pertenecen al estilo y no al contenido. Por lo tanto, todo lo que se va a explicar aquí está en desuso. Lo advertimos mediante esta nota y en el texto del propio artículo. Este artículo te puede venir bien como práctica, si estás comenzando con HTML y quieres jugar con etiquetas diferentes. Sin embargo, tenlo muy en cuenta, nunca uses estas etiquetas en un proyecto real, usa CSS. Incluso en el estándar HTML5, que es el más actual, etiquetas como FONT se han eliminado, por lo que no deberían usarse. Atributo face Define el tipo de letra. Muy probablemente tu navegador no le haga caso al atributo, puesto que está totalmente en desuso. Hay que tener cuidado con este atributo ya que cada usuario, dependiendo de la plataforma que utilice, puede no disponer de los mismos tipos de letra que nosotros con lo que, si nosotros elegimos un tipo del que no dispone, el navegador se verá forzado a mostrar el texto con la fuente que utiliza por defecto (suele ser Times New Roman). Para evitar esto, dentro del atributo suelen seleccionarse varios tipos de letra separados por comas. En este caso el navegador comprobará que dispone del primer tipo enumerado y si no es así, pasará al segundo y así sucesivamente hasta encontrar un tipo que posea o bien acabar la lista y poner la fuente por defecto. Veamos un ejemplo. Este texto tiene otra tipografía Que se visualizaría así en una página web. Nota: Aquí tenemos un ejemplo de atributo cuyo valor debe estar limitado por comillas ("). Habíamos dicho que las comillas eran opcionales en los atributos, sin embargo esto no es así siempre. Si el valor del atributo contiene espacios, como es el caso de: face="Comic Sans MS,arial,verdana" debemos colocar las comillas para limitarlo. En caso de no tener comillas http://desarrolloweb.com/manuales/manual-html.html Página 25 de 115 Manual de HTML face=Comic Sans MS,arial,verdana se entendería que face=Comic, pero no se tendría en cuenta todo lo que sigue, porque HTML no lo asociaría al valor del atributo. En este caso HTML pensaría que las siguientes palabras (después del espacio) son otros atributos, pero como no los conoce como atributos simplemente los desestimará. Atributo size Define el tamaño de la letra. Este tamaño puede ser absoluto o relativo. Si hablamos en términos absolutos, existen 7 niveles de tamaño distintos numerados de 1 a 7 por orden creciente. Elegiremos por tanto un valor size="1" para la letra más pequeña o size="7" para la más grande. Este texto es más grande Que se visualizaría así en una página web. Podemos asimismo modificar el tamaño de nuestra letra con respecto al del texto mostrado precedentemente definiendo el número de niveles que queremos subir o bajar en esta escala de tamaños por medio de un signo + o -. De este modo, si definimos nuestro atributo como size="+1" lo que queremos decir es que aumentamos de un nivel el tamaño de la letra. Si estabamos escribiendo previamente en 3, pasaremos automáticamente a 4. Los tamaños reales que veremos en pantalla dependerán de la definición y del tamaño de fuente elegido por el usuario en el navegador. Este tamaño de fuente puede ser definido en el Explorer yendo al menu superior, Ver/Tamaño de la fuente. En Netscape elegiremos View/Text Size. Esta flexibilidad puede en más de una ocasión resultarnos embarazosa ya que en muchos casos desearemos que el tamaño del texto permanezca constante para que éste quepa en un determinado espacio. Veremos en su momento que esta prefijación del tamaño puede ser llevada a cabo por las hojas de estilo en cascada. Atributo color El color del texto puede ser definido mediante el atributo color. Cada color es a su vez definido por un número hexadecimal que esta compuesto a su vez de tres partes. Cada una de estas partes representa la contribución del rojo, verde y azul al color en cuestión. Podéis entender cómo funciona esta numeración y cuáles son los colores que resultan más compatibles a partir de este artículo: Los colores y HTML. Por otra parte, es posible definir de una manera inmediata algunos de los colores más frecuentemente usados para los que se ha creado un nombre más memotécnico: http://desarrolloweb.com/manuales/manual-html.html Página 26 de 115 Manual de HTML Este texto está en rojo Que se visualizaría así en una página web. Con todo esto estamos ya en disposicion de crear un texto formateado de una forma realmente elaborada. Pongamos pues en practica todo lo que hemos aprendido en estos capitulos haciendo un ejercicio consistente en una página que tenga las siguientes características: http://desarrolloweb.com/manuales/manual-html.html Página 27 de 115 Manual de HTML Un titular con encabezado de nivel 1, en itálica y color verde oliva. Un segundo titular con encabezado de nivel 2, también de color verde oliva. Todo el texto de la página deberá presentarse con una fuente distinta de la fuente por defecto. Por ejemplo "Comic Sans MS" y en caso de que ésta no esté en el sistema que se coloque la fuente "Arial". Se puede ver aquí una posible resolución de este ejercicio. Sin embargo ten en cuenta que este código no se debería implementar en un sitio de cara al público, puesto que las cosas no se hacen así actualmente. Recuerda que los estilos son parcela de las CSS. Como práctica te puede venir bien y es agradable dar un poco de color a la página, con lo poco que sabemos de HTML. Pero no uses la etiqueta FONT en tus sitios web. Nosotros nunca admitiremos que somos los autores de este código. Si alguna vez te preguntan no digas que lo has visto aquí ;) Home de la cocina para todos

Cocina para Todos

La cocina tu alcance

Descubre los platos más exquisitos, fáciles y económicos que puedas imaginar.
Dentro de este sitio podrás tener acceso a gran variedad de recetas de preparacion sencilla, aprenderás como realizar operaciones comunes dentro de una cocina y podras plantear tus preguntas en nuestro consultorio gourmet donde nuestro cocinero virtual podrá ayudarte con tus proyectos culinarios. También te será posible adquirir los libros gastronómicos más populares al precio més accesible...
Adéntrate en los misterios de la cocina sin quemar más cacerolas ni llamar al pizzero. Este artículo es obra de Rubén Alvarez Fue publicado por primera vez en 10/10/2001 Disponible online en http://desarrolloweb.com/articulos/21.php Los colores y HTML En este artículo aprenderás a crear colores en notación RGB con valores en hexadecimal, la manera más habitual de expresar un color en el lenguaje HTML. Explicamos la correcta utilización de los colores en el HTML. http://desarrolloweb.com/manuales/manual-html.html Página 28 de 115 Manual de HTML En la composición de webs juegan un papel muy importante los colores. Usar una paleta de colores definida suele ayudar a la consistencia de un diseño y a transmitir ciertas sensaciones al usuario. Como parte de nuestro aprendizaje de HTML tenemos que detenernos a comprender cómo se expresan los colores en el lenguaje. En HTML se usa una notación específica de especificar un color, compuesta por tres valores "RGB": Red, Green, Blue. Rojo, Verde y Azul. Es decir, que para conseguir un color cualquiera mezclaremos cantidades de cada uno de esos colores. RGB es el modelo usado para la creación de colores de los monitores y televisores, así que es un excelente modo de expresar color en un medio digital como una web. Los valores RBG en HTML se indican en numeración hexadecimal, en base 16. (Los dígitos pueden crecer hasta 16. Como no hay tantos dígitos numéricos, se utilizan las letras de la A a la F). Para conseguir un color, mezclaremos valores asignando dos dígitos a cada valor RBG. De esta manera: "#RRGGBB" Como has observado, colocamos también una almohadilla "#" al principio, para indicar que esa cadena es un valor de color en hexadecimal. Más adelante en el artículo veremos ejemplos en una grande paleta, com sus valores en RGB. No obstante ejemplos podrían ser #000000 para el negro, #FFFFFF para el blanco, #660000 sería un rojo oscuro o #FF0000 un rojo brillante. Nota: Habrás podido observar en alguna ocasión que los colores también se pueden expresar con algunas palabras, de hecho en el artículo sobre Color y tipo de letra ya lo comentamos. No obstante, es bastante más común escribir en RGB, porque es más versátil y podemos conseguir más fácilmente cualquier tonalidad deseada. Atributos de color en etiquetas HTML En HTML existen numerosas etiquetas que soportan atributos de color. Para que tengas una primera referencia, así se cambiaría la fuente para escribir en rojo: Rojo Como ves, al Atributo color le damos un valor RGB en formato hexadecimal. El caracter # se coloca al http://desarrolloweb.com/manuales/manual-html.html Página 29 de 115 Manual de HTML principio de la cadena. Nota: De nuevo tenemos que advertir sobre la necesidad de expresar todo lo que son estilos mediante CSS. En HTML nos debemos centrar en lo que es escribir el contenido y en CSS en aplicar el estilo. Por supuesto, el color es más estilo que contenido, así que debería ir en el CSS. Es motivo por el cual toda la etiqueta FONT ha quedado en desuso, porque solamente nos servía para aplicar estilo. Para tu tranquilidad, en CSS los colores se pueden expresar de la misma manera que en HTML, por lo que no tendrás que aprender nada nuevo. Por poner otro ejemplo, la etiqueta TABLE admite que se le exprese el color de fondo de la tabla. La veremos más adelante, pero lo consigues con el atributo bgcolor. Combinar otros colores Al principio puede parecer difícil crear combinaciones de color con valores hexadecimales, pero con la práctica nos iremos acostumbrando y hasta seremos capaces de pensar un color y conseguir de cabeza un valor RGB aproximado. Nos vendrá bien tener en mente la rueda de colores: Pero al final de lo que resulta más fácil echar mano es de un programa de diseño gráfico, que tiene selectores de color que nos suelen dar los valores RGB para que los podamos usar en cualquier programa. Algunos editores vienen con "color pickers" integrados para facilitar esta tarea, sin tener que cambiar de programa. La mayoría de los editores puede instalar de manera adicional plugins para implementar selectores de color, ya que es una demanda muy habitual de los desarrolladores. Por ejemplo, otros colores RGB los puedes combinar así. Aunque al final de este artículo tienes una tabla de color completa. Colores seguros http://desarrolloweb.com/manuales/manual-html.html Página 30 de 115 Manual de HTML Debemos estar preparados para recibir visitas desde todo tipo de dispositivos y a todos les debemos ofrecer una adecuada experiencia de usuario. En lo que respecta a los colores, no podemos saber a priori qué tipo de pantalla va a tener la persona que nos visita y la resolución de color. Por eso una buena idea es usar aquellos colores considerados seguros: "Safe colors", colores compatibles con todos los sistemas. Nota: Hoy la necesidad de usar colores seguros (aquellos que se verán bien en todos los monitores, independientemente de su paleta de color), no es tan grande como hace años, porque la tecnología ha evolucionado mucho y es raro encontrar un monitor que solo soporte 256 colores. No obstante es un conocimiento que resulta interesante por el hecho de remarcar la naturaleza universal de la web y la necesidad de construir páginas que sean capaces de adaptarse a cada medio donde va a ser consultada. En este manual de HTML no vamos a entrar en este tipo de detalles, pero si te interesan deberías leer el Manual de Responsive Web Design. La forma de conseguir colores seguros es limitando nuestros colores a los que se pueden conseguir utilizando los siguientes valores: 00 33 66 99 AA CC FF Es interesante comentar que, cuando usamos colores seguros, podemos resumir la notación RGB usando tres caracteres en vez de 6. Por ejemplo, #000 equivale a #000000. O #ABC equivale a #AABBCC. Usando todas las combinaciones de "safe colors", conseguimos la siguiente paleta de colores: http://desarrolloweb.com/manuales/manual-html.html Página 31 de 115 Manual de HTML Nota para la curiosidad: Este fue el primer artículo publicado en DesarrolloWeb.com. Aunque revisado en 2016 su publicación original es de 1999. Este artículo es obra de Miguel Angel Alvarez Fue publicado por primera vez en 29/09/2016 Disponible online en http://desarrolloweb.com/articulos/colores-html.html Atributos para páginas Explicamos una serie de atributos que se aplican de manera global a toda la página, como el color de fondo el del texto, de los enlaces, márgenes, etc. En este artículo nos metemos de nuevo en el terreno del CSS. Veremos todo tipo de estilos que se pueden aplicar a una página, colores o imágenes de fondo, colores para los enlaces, etc. Todo eso tiene que ir en el CSS. Si estás decidido a aprender CSS a continuación de aprender HTML (que deberías), puedes saltarte este texto tranquilamente. Ahora bien, si quieres seguir aprendiendo cosas del HTML y te apetece empezar con lo que sabes a poner un poco de color a la página, lee a continuación. Las páginas HTML pueden construirse con variedad de atributos que le pueden dar un aspecto a la página muy personalizado. Podemos definir atributos como el color de fondo, el color del texto o de los enlaces. Estos atributos se definen en la etiqueta BODY y, como decíamos son generales a toda la página. Lo mejor para explicar su funcionamiento es verlos uno por uno. Atributos para fondos bgcolor: especificamos un color de fondo para la página. En el capítulo anterior y en el taller de los colores y HTML hemos aprendido a construir cualquier color, con su nombre o su valor RGB. El color de fondo que podemos asignar con bgcolor es un color plano, es decir el mismo para toda la superficie del navegador. http://desarrolloweb.com/manuales/manual-html.html Página 32 de 115 Manual de HTML background: sirve para indicar la colocación de una imagen como fondo de la página. La imagen se coloca haciendo un mosaico, es decir, se repite muchas veces hasta ocupar todo el espacio del fondo de la página. En capítulos más adelante veremos como se insertan imágenes con HTML y los tipos de imágenes que se pueden utilizar. Ejemplo de fondo Vamos a colocar esta imagen como fondo en la página. La imagen se llama fondo.jpg. Puedes guardarla en tu disco duro para practicar tú también con ella, mediante un clic con el botón derecho. Para trabajar con esta imagen vamos a colocarla en la misma carpeta donde está el HTML donde vamos a trabajar. Más adelante también hablaremos sobre cómo acceder a otros archivos que están en otras carpetas, mediante la composición de rutas un poco más complejas, pero por el momento suponemos que la imagen se encuentra en el mismo directorio que la página. Para colocar esta imagen como fondo de mosaico, se escribiría la siguiente etiqueta BODY. Se puede ver el efecto que daría en la siguiente imagen como fondo. Consejo: Siempre que coloquemos una imagen de fondo, debemos poner también un color de fondo cercano al color de la imagen. Esto se debe a que, al colocar una imagen de fondo, el texto de la página debemos colocarlo en un color que contraste suficientemente con dicho fondo. Si el visitante no puede ver el fondo por cualquier cuestión (Por ejemplo tener desactivada la carga de imágenes) puede que el texto no contraste lo suficiente con el color de fondo por defecto de la web. Creo que lo mejor será poner un ejemplo. Si la imagen de fondo es oscura, tendremos que poner un texto claro para que se pueda leer. Si el visitante que accede a la página no ve la imagen de fondo, le saldrá el fondo por defecto, que generalmente es blanco, de modo que al tener un texto con color claro sobre un fondo blanco, nos pasará que no podremos leer el texto convenientemente. http://desarrolloweb.com/manuales/manual-html.html Página 33 de 115 Manual de HTML Ocurre parecido cuando se está cargando la página. Si todavía no ha llegado a nuestro sistema la imagen de fondo, se verá el fondo que hayamos seleccionado con bgcolor y es interesante que sea parecido al color de la imagen para que se pueda leer el texto mientras se carga la imagen de fondo. Color del texto text: este atributo sirve para asignar el color del texto de la página. Por defecto es el negro. Además del color del texto, tenemos tres atributos para asignar el color de los enlaces de la página. Ya debemos saber que los enlaces deben diferenciarse del resto del texto de la página para que los usuarios puedan identificarlos fácilmente. Para ello suelen aparecer subrayados y con un color más vivo que el texto. Los tres atributos son los siguientes: link: el color de los enlaces que no han sido visitados. (por defecto es azul clarito) vlink: el color de los enlaces visitandos. La "v" viene justamente de la palabra visitado. Es el color que tendrán los enlaces que ya hemos visitado. Por defecto su color es morado. Este color debería ser un poco menos vivo que el color de los enlaces normales. alink: es el color de los enlaces activos. Un enlace está activo en el preciso instante que se pulsa. A veces es difícil darse cuenta cuando un enlace está activo porque en el momento en el que se activa es porque lo estamos pulsando y en ese caso el navegador abandonará la página rápidamente y no podremos ver el enlace activo más que por unos instantes mínimos. Ejemplo de color del texto Vamos a ver una página donde el color de fondo sea negro, y los colores del texto y los enlaces sean claros. Pondremos el color de texto balnco y los enlaces amarillos, más resaltados los que no estén visitados y menos resaltados lo que ya están visitados. Para ello escribiríamos la etiqueta BODY así: El efecto de esta definición de colores para la página se vería de la siguiente manera. Márgenes http://desarrolloweb.com/manuales/manual-html.html Página 34 de 115 Manual de HTML Con otros atributos de la etiqueta BODY se pueden asignan espacios de margen en las páginas, lo que es muy útil para eliminar los márgenes en blanco que aparecen a los lados, arriba y debajo de la página. Estos atributos son distintos para Internet Explorer y para otros navegadores, por lo que debemos utilizarlos todos si queremos que todos los clientes web los interpreten perfectamente. leftmargin: para indicar el margen a los lados de la página. Válido para iexplorer. topmargin: para indicar el margen arriba y debajo de la página. Para iexplorer. marginwidth: la contrapartida de leftmargin para Firefox. (Margen a los lados) marginheight: igual que topmargin, pero para Firefox. (Margen arriba y abajo) Tenemos un artículo sobre la utilización de estos atributos para hacer diseños avanzados con tablas en distintas definiciones de pantalla, que puede ser interesante de leer. Un ejemplo de página sin margen es la propia página de DesarrolloWeb.com, que estás visitando actualmente. (Por lo menos a la hora de escribir este artículo) Además, vamos a ver otra página sin márgenes, por si alguien necesita ver el ejemplo en estas líneas.

Hola amigos

Gracias por visitarme!

Esta página tiene el fondo blanco y dentro una tabla con el fondo rojo. En la página podremos ver que la tabla ocupa el espacio en la página sin dejar sitio para ningún tipo de margen. Todo lo que hemos visto hasta ahora en el Manual de HTML lo podemos encontrar en vídeo y en concreto las explicaciones de los últimos artículos se han recogido en el Vídeotutorial de HTML - Fuentes, colores y estilos de BODY. Por qué todos estos estilos deberían definirse en CSS Como hemos dicho, todos estos estilos deberían indicarse en el CSS. Existen muchos motivos para ello pero uno de ellos seguro que ahora se podrá comprender. Imagina un sitio web con 30 páginas distintas (no tiene que ser muy grande para llegar a ese número). Imagina que llegado un día te cansas del color negro de fondo y lo quieres azul, y el color de los enlaces amarillo y lo quieres verde. Si tienes los estilos en el HTML tendrías que ir, página a página, cambiando los estilos "n" veces. CSS, entre otras cosas, te permite tener los estilos definidos en un único lugar, un archivo con código en texto plano, y todas las páginas de tu sitio web usarían ese mismo archivo para definir su presentación. Así, si un día te cansas del color de fondo, el color del texto, el tipo de letra o su tamaño, entonces solo tienes que ir a un único lugar (el archivo CSS) y cambiarlo una única vez. http://desarrolloweb.com/manuales/manual-html.html Página 35 de 115 Manual de HTML Todo eso lo veremos con detalle en el Manual de CSS. Este artículo es obra de Miguel Angel Alvarez Fue publicado por primera vez en 03/03/2002 Disponible online en http://desarrolloweb.com/articulos/21.php Caracteres especiales Una referencia útil, y una lista completa de los caracteres especiales del HTML. En este artículo vamos a ver un tópico de frecuente consulta cuando se está aprendiendo a construir una página web. Son los caracteres especiales, unos códigos propios del lenguaje HTML que son capaces de entender los navegadores y que nos sirven para representar ciertos símbolos. La necesidad de la existencia de los caracteres especiales responde a dos motivos que explicaremos a continuación, remarcando cuál de ellos es importante en la actualidad y por qué (actualizado en octubre de 2016). Al final del artículo también encontrarás unas tablas con un amplio conjunto de caracteres especiales y sus códigos, para que te sirva de referencia. Luego entraremos en detalles, pero para ir viendo un ejemplo, la "á" (a minúscula acentuada) se escribe "á" de modo que la palabra página se podría escribir en una página HTML de este modo: página. Por qué existen los caracteres especiales Los motivos por los que debemos usar los caracteres especiales son los siguientes: 1. Una página web se ha de ver en países distintos, que usan conjuntos de caracteres distintos. El lenguaje HTML nos ofrece un mecanismo por el que podemos estar seguros que una serie de caracteres "raros" se van a ver bien en todos los ordenadores del mundo, independientemente de su juego de caracteres local. 2. Por otra parte, ciertos caracteres forman parte de las etiquetas como el "mayor qué" o "menor qué" que las delimitan. Mediante los caracteres especiales se definen unos códigos, que debemos usar cuando queremos poner uno de estos caracteres en una página, De estos dos motivos, es verdaderamente importante el segundo, que es un asunto derivado del propio HTML y sus necesidades de codificación. Pero el primer motivo, aunque fue importante, hoy no lo es tanto porque la recomendación es usar UTF-8 y éste juego de caracteres sí que permite representar cualquiera de los símbolos que iremos a necesitar normalmente (todos los acentos, eñe, símbolo del Euro, etc.). Caracteres especiales básicos Estos son los caracteres especiales que se usan en HTML para no confundir un principio o final de etiqueta, unas comillas o un & con su correspondiente caracter. http://desarrolloweb.com/manuales/manual-html.html Página 36 de 115 Manual de HTML Caracteres especiales del HTML 2.0 Ahora vamos a ver caracteres especiales, aunque muchos de ellos están disponibles en UTF-8, por lo que, si respetamos las recomendaciones de HTML5 para los juegos de caracteres, no necesitamos realmente utilizarlos. http://desarrolloweb.com/manuales/manual-html.html Página 37 de 115 Manual de HTML Caracteres especiales del HTML 3.2 Otros caracteres especiales http://desarrolloweb.com/manuales/manual-html.html Página 38 de 115 Manual de HTML Referencia: Hay un videotutorial en DesarrolloWeb.com que trata sobre enlaces y caracteres especiales. No son temas muy relacionados entre si, pero seguro que nos sirve como práctica para aprender todo lo que se ha tratado en este artículo. Este artículo es obra de Miguel Angel Alvarez Fue publicado por primera vez en 30/09/2016 Disponible online en http://desarrolloweb.com/articulos/21.php http://desarrolloweb.com/manuales/manual-html.html Página 39 de 115 Manual de HTML Listas en HTML A continuación comenzaremos a explicar las listas de HTML que implican varias etiquetas para crear su estructura. Veremos varios tipos de listas que se pueden utilizar para diversos objetivos. Listas en HTML: Listas desordenadas Vemos lo que son las listas y señalamos los tres tipos que hay. Estudiamos las listas desordenadas. Las posibilidades que nos ofrece el HTML en cuestión de tratamiento de texto son realmente notables. No se limitan a lo visto hasta ahora, sino que van más lejos todavía. Varios ejemplos de ello son las listas, que sirven para enumerar y definir elementos, los textos preformateados y las cabeceras o títulos. Las listas originalmente están pensadas para citar, numerar y definir cosas a través de características, o al menos así lo hacemos en la escritura de textos. Sin embargo, las listas finalmente se utilizan para mucho más que enumerar una serie de puntos, en realidad son un recurso muy interesante para poder maquetar elementos diversos, como barras de navegación, pestañas etc. Pero esto lo veremos más adelante, cuando apliquemos estilos CSS a las listas. De momento, en este Manual de HTML, trataremos las listas desde el punto de vista de su construcción y veremos los diferentes tipos que existen, y que podemos utilizar para resolver nuestras distintas necesidades a la hora de escribir textos en HTML. Referencia: Todos los tipos de listas los hemos explicado en vídeo y se pueden revisar en el Videotutorial de HTML, más concretamente en la entrega siguiente: Vídeo sobre las Listas HTML. Podemos distinguir tres tipos de listas HTML: Listas desordenadas Listas ordenadas Listas de definición Las veremos detenidamente una a una. Listas desordenadas Son delimitadas por las etiquetas UL y su cierre (unordered list). Cada uno de los elementos de la lista es citado por medio de una etiqueta LI (La LI tiene su cierre, aunque si no lo colocas el navegador al ver el siguiente LI interpretará que estás cerrando el anterior). La cosa queda así: http://desarrolloweb.com/manuales/manual-html.html Página 40 de 115 Manual de HTML

Países del mundo

Argentina
Perú
Chile

El resultado: Podemos definir el tipo de viñeta empleada para cada elemento. Para ello debemos especificarlo por medio del atributo type incluido dentro de la etiqueta de apertura UL, si queremos que el estilo sea válido para toda la lista,o dentro le la etiqueta LI si queremos hacerlo específico de un solo elemento. La sintaxis es del siguiente tipo:

Elemento 1
Elemento 2
Elemento 3
Elemento 4

Reglas de comportamiento en el trabajo

El jefe siempre tiene la razón
En caso de duda aplicar regla 1

Ordenamos por números

Elemento 1
Elemento 2

Ordenamos por letras

Elemento a
Elemento b

Ordenamos por números romanos empezando por el 10

Elemento x
Elemento xi

Diccionario de la Real Academia

Brujula: Señórula montada en una escóbula
Oreja: Sesenta minutejos

Primer nivel de desplazamiento

Segundo nivel de desplazamiento

Tercer nivel de desplazamiento

http://desarrolloweb.com/manuales/manual-html.html Página 45 de 115 Manual de HTML

Ciudades del mundo

Argentina
1. Buenos Aires
2. Bariloche
Uruguay
1. Montevideo
2. Punta del Este

contenido

Home de Desarrolloweb.com

Ir abajo

contenido

ir a yyy.html

Ir (también) a yyy.html

Ir ahora a xxx.html

contenido

ir a guiarte.com

eugim@desarrolloweb.com

miguel@desarrolloweb.com

Descarga mi_fichero.zip

Descarga el PDF

Mapa de imágenes. Pulsa en cada una de los círculos.

Pulsa en los círculos para acceder a las secciones!

Celda 1, linea 1	Celda 2, linea 1
Celda 1, linea 2	Celda 2, linea 2

contenido de la celda

Celda de la tabla principal

Tabla anidada, celda 1	Tabla anidada, celda 2
Tabla anidada, celda 3	Tabla anidada, celda 4

Animales en peligro de extinción
Nombre	Cabezas	Previsión 2010	Previsión 2020
Ballena	6000	4000	1500
Oso Pardo	50	0
Lince	10	0
Tigre	300	210

Climas de América del Sur

http://desarrolloweb.com/manuales/manual-html.html Página 78 de 115 Manual de HTML

Venezuela

Colombia

Ecuador

Perú

Parte de arriba de América del Sur. Países como:

Argentina

Chile

Uruguay

Paraguay

Parte de abajo de América del Sur. Países como:

Bosque tropical, clima de sabana, clima marítimo con inviernos secos.

Climas marítimos con veranos secos, con inviernos secos, climas frios, clima de estepa, clima desértico.

1	2	3
4	Esta es una celda 5	6
7	8	9

1	2	3
4	5	6
7	8	9

1	2	3
4	5	6
7	8	9

1	2	3
4	5	6
7	8	9

Si lo que queremos es que el formulario sea procesado por un programa, hemos de especificar la dirección del archivo que contiene dicho programa. La etiqueta quedaría en este caso de la siguiente forma: La forma en la que se expresa la localización del archivo que contiene el programa es la misma que la vista para los enlaces. method: Este atributo se encarga de especificar la forma en la que el formulario es enviado. Los dos valores posibles que puede tomar esta atributo son post y get. A efectos prácticos y, salvo que se os diga lo contrario, daremos siempre el valor post. enctype: Se utiliza para indicar la forma en la que viajará la información que se mande por el formulario. En el caso más corriente, enviar el formulario por correo electrónico, el valor de este atributo debe de ser "text/plain". Así conseguimos que se envíe el contenido del formulario como texto plano dentro del email. Si queremos que el formulario se procese automáticamente por un programa, generalmente no utilizaremos este atributo, de modo que tome su valor por defecto, es decir, no incluiremos enctype dentro de la etiqueta http://desarrolloweb.com/manuales/manual-html.html Página 86 de 115 Manual de HTML FORM. Ejemplo de etiqueta FORM completa Así, para el caso más habitual -el envío del formulario por correo- la etiqueta de creación del formulario tendrá el siguiente aspecto: Entre esta etiqueta y su cierre colocaremos el resto de etiquetas que darán forma a nuestro formulario, las cuales serán vistas en capítulos siguientes. Referencia: Mandar formulario por correo electrónico Los formularios se utilizan habitualmente para implementar un tipo de contacto con el navegante, que consiste en que éste pueda mandarnos sus comentarios por correo electrónico a nuestro buzón. Para este tipo de utilización de los formularios hemos publicado hace tiempo en DesarrolloWeb.com un artículo que puede resultar muy interesante para los que deseen un referencia extremadamente rápida para construir un formulario que envíe los datos por correo electrónico al desarrollador de la página. El artículo en cuestión se llama contacto con el navegante. Para continuar, vamos a ver cómo insertar cada uno de los campos posibles en un formulario HTML, comenzando por los campos de texto. Referencia: Si deseas la formación en vídeo, puedes ver este videotutorial sobre formularios, publicado en DesarrolloWeb.com. Este artículo es obra de Rubén Alvarez Fue publicado por primera vez en 11/01/2002 Disponible online en http://desarrolloweb.com/articulos/21.php Elementos de Formularios. Campos de texto Vemos detenidamente los distintos elementos de formulario que sirven para introducir texto. El lenguaje HTML nos propone una gran diversidad de alternativas a la hora de crear nuestros formularios, es decir, una gran variedad de elementos para diferentes propósitos. Estas van desde la clásica caja de texto, hasta la lista de opciones en un menú desplegable, pasando por las cajas de validación, etc. En el artículo anterior del Manual de HTML ya vimos cómo iniciar nuestro formulario con la etiqueta FORM y los distintos atributos que tenemos que utilizar para configurar su funcionamiento. En el presente artículo veremos las etiquetas que tenemos que utilizar para crear campos de texto, que pueden ser de dos tipos. Veamos en qué consiste cada una de estas modalidades y como podemos http://desarrolloweb.com/manuales/manual-html.html Página 87 de 115 Manual de HTML implementarlas en nuestro formulario. Etiqueta INPUT para texto corto Las cajas de texto son colocadas por medio de la etiqueta INPUT. Dentro de esta etiqueta hemos de especificar el valor de dos atributos: type y name. La etiqueta tendrá la siguiente forma: De este modo expresamos nuestro deseo de crear una caja de texto cuyo contenido será llamado "nombre" (por ejemplo, en el caso de la etiqueta anterior, pero podemos poner distintos nombres a cada uno de los campos de texto que habrán en los formularios). El aspecto de este tipo de cajas es de sobra conocido, aquí lo podéis ver: El nombre del elemento del formulario es de gran importancia para poder identificarlo en nuestro programa de procesamiento o en el mail recibido. Por otra parte, es importante indicar el atributo type, ya que, como veremos, existen otras modalidades de elementos de formulario que usan esta misma etiqueta INPUT. El empleo de estas cajas esta fundamentalmente destinado a la toma de datos breves: palabras o conjuntos de palabras de longitud relativamente corta. Veremos más adelante que existe otra forma de tomar textos más largos a partir de otra etiqueta. Además de estos dos atributos, esenciales para el correcto funcionamiento de nuestra etiqueta, existen otra serie de atributos que pueden resultarnos de utilidad pero que no son imprescindibles: size: define el tamaño de la caja de texto, en número de caracteres visibles. Si al escribir el usuario llega al final de la caja, el texto que escriba a continuación también cabrá dentro del campo pero irá desfilando, a medida que se escribe, haciendo desaparecer la parte de texto que queda a la izquierda. maxlength: indica el tamaño máximo del texto, en número de caracteres, que puede ser escrito en el campo. En caso que el campo de texto tenga definido el atributo maxlength, el navegador no permitirá escribir más caracteres en ese campo que los que hayamos indicado. Nota: Es importante no confundir el atributo maxlength con el atributo size. Mientras size define el tamaño visible de la caja de texto, maxlength indica el tamaño máximo real del texto que se puede escribir. Podemos tener una caja de texto con un tamaño aparente (size) que es menor que el tamaño máximo (maxlength). Lo que ocurrirá en este caso es que, al escribir, si sobrepasamos el espacio marcado por size, el texto ira desfilando dentro de la caja hasta que lleguemos a su tamaño máximo definido por maxlength, momento en el cual nos será imposible continuar escribiendo. value: en algunos casos puede resultarnos interesante asignar un valor definido al campo en cuestión. Esto http://desarrolloweb.com/manuales/manual-html.html Página 88 de 115 Manual de HTML puede ayudar al usuario a rellenar más rápidamente el formulario o darle alguna idea sobre la naturaleza de datos que se requieren. Este valor inicial del campo puede ser expresado mediante el atributo value. Veamos su efecto con un ejemplo sencillo: Genera un campo de este estilo: Veremos posteriormente que este atributo puede resultar bastante relevante en determinadas situaciones. Nota: estamos obligados a utilizar la etiqueta FORM Aunque esperamos que haya quedado claro a medida que se lee en estos capítulos sobre formularios, hemos querido remarcarlo para que quede muy claro: Cuando queremos utilizar, en cualquier situación elementos de formulario, debemos escribirlos siempre entre las etiquetas FORM y su cierre. De lo contrario, los elementos se verán perfectamente en Explorer pero no en Netscape. (Actualizado: en estos momentos la mayoría de los navegadores pueden interpretar bien los campos de texto sin que estén en una etiqueta FORM, sin embargo, la etiqueta FORM sigue siendo imprescindible, porque indica qué se desea hacer con los campos de texto, como el action a realizar, y engloba qué elementos pertenecen a qué formularios) Dicho de otra forma, en Netscape no se visualizan los elementos de formulario a no ser que estén colocados entre las correspondientes etiquetas de inicio y fin de formulario. Es por ello que para mostrar un campo de texto no vale con poner la etiqueta INPUT, sino que habrá que ponerla dentro de un formulario. Así:

http://desarrolloweb.com/manuales/manual-html.html Página 99 de 115 Manual de HTML Elemento de formulario:
Otro elemento:

Edad

Caja de texto pon tu nombre:

Recibir email

Hombre

Mujer

uno	dos
tres	cuatro

Source Exif Data:

File Type                       : PDF
File Type Extension             : pdf
MIME Type                       : application/pdf
PDF Version                     : 1.4
Linearized                      : No
Title                           : 
Creator                         : 
Producer                        : Qt 5.5.1
Create Date                     : 2016:10:08 04:55:30
Page Count                      : 115

EXIF Metadata provided by EXIF.tools

Manual De HTML5

Manual%20de%20HTML5

Encabezado de nivel 1

Encabezado de nivel 2

Encabezado de nivel 1

Encabezado de nivel 2

Encabezado de nivel 3

Encabezado de nivel 4

Encabezado de nivel 5

Encabezado de nivel 6

Cocina para Todos

La cocina tu alcance

Hola amigos

Navigation menu

Versions of this User Manual:

Views

Navigation