gatp29

Esta es una lista de programadores que cambiaron la historia de la tecnología, quizá de la humanidad, o por lo menos su área de influencia poderosamente. Baste decir que por programador hablo de aquella persona que además de dominar algoritmos y estructuras de datos para crear una solución computacional, fueron capaces de dominar las herramientas para llevar esa solución a la práctica, lo que resultó, directa o indirectamente, en un hito técnico y social. No encontrarás en esta lista ganadores de concursos de la ACM, ni grandes nombres como Turing, Dijkstra o Minsky. Esta lista tampoco es un Top 10, ni exhaustiva porque faltan muchos y muy venerables como Cerf, Kahn, Gilmore, Cray o leyendas modernas como Matsumoto, Heinemeier y _why. En fin, quiero ofrecerles esta lista como un recordatorio de que los programadores han transformado nuestras vidas profundamente la últimas décadas. Y que lo seguirán haciendo. Tim Berners-Lee Creador del protocolo HTTP, que permite el adecuado intercambio de documentos hipervinculados. El CERN le permitió probar un concepto que habitó en su cabeza por varios años, que resultó en la Web, la red más exitosa entre las hospedadas por Internet. Berners-Lee merece una mención especial al abogar por el espíritu abierto y colaborativo de las tecnologías web, que ahora tienen en el inacabado HTML5 uno de sus retos más importantes. Bram Cohen Creador del protocolo BitTorrent de intercambio de archivos. Siendo un joven aficionado a los juegos matemáticos, creó BitTorrent con el lenguaje de programación Python, para intercambiar, de forma colaborativa y óptima, un archivo en Internet. Con esto puso de cabeza a la industria del copyright, se creó una industria alternativa de contenidos, nació The Pirate Bay, incluso los partidos piratas, al tiempo que los paquetes torrent saturaron las venas de Internet. Bram Cohen hizo una empresa con su invento, sin embargo el protocolo nació de código abierto, listo para ser utilizado para cuanta cosa vayamos a compartir por la red. Bill Joy Creador de BSD, el sistema operativo sobre el que se construyeron los cimientos de Internet. La inteligencia y visión de Joy permitieron la creación de la Berkeley Software Distribution, un derivado inmediato, estable y robusto de UNIX sobre el cual se probaron las primeras versiones del Internet que hoy conocemos. No olvidemos que Van Jacobson usó un sistema BSD para crear la versión de TCP que permite que Internet no colapse. Además Joy co-fundó Sun Microsystems, una de las empresas más influyentes para el movimiento open source y cuna de software impresionante como NFS, Solaris y Java. Ni qué decir lo mucho que Mac OS X le debe a BSD. Alan Kay Creador de Smalltalk y los conceptos de la programación orientada a objetos. La sabiduría e inteligencia de Alan Kay es bien reconocida entre sus colegas. A Kay le debemos la computación personal, post-PC como ahora le llaman, basada en dispositivos móviles, tablets, así como la importancia de las interfaces de usuario para crear experiencias, sobre todo educativas. Donald Knuth Creador del lenguaje de programación TeX, pero sobre todo compendiador y teórico de los algoritmos que las generaciones siguientes seguimos utilizando para crear software. Knuth es una leyenda. Algunos le llaman el Yoda de la programación (algún parecido físico tiene). Escribió el mítico The Art of Computer Programming, para lo cual creó el software para maquetarlo, TeX, el lenguaje y máquina para ilustrar los algoritmos. Hoy en día LaTeX, un derivado de TeX, es el lenguaje predilecto para la creación de texto científicos. Asimismo, los trabajos de Knuth ayudaron a crear los compiladores que usamos hoy para crear software. Bill Gates Creador de BASIC Altair, padre de Windows, el sistema operativo de escritorio más popular del planeta. Gates carga una fama variopinta desde 1980 o antes. Con espíritu anti-cultura hacker escribió en 1976 la Open Letter to Hobbyists para recriminar a los programadores que usaron BASIC Altair sin su permiso. Luego sucedió el supuesto robo de un sistema operativo, QDOS, a Gary Kindall que suscitó el nacimiento del imperio Microsoft en las computadoras personales. Por cierto, la revista Spectrum de la IEEE publicó un estudio basado en un análisis forense que elimina esos dichos. Lo cierto es que Gates fue un grandísimo nerd, ambicioso en los negocios, cuyo software y cultura marcaron la manera de hacer y usar software en casa y en la oficina. Dennis Ritchie Co-creador de Unix y el lenguaje C de programación. Me pongo de pie para decir, o bien escribir, que Ritchie es el programador-hacker por excelencia, la mente maestra detrás del software más influyente de la historia, verdaderas piedras angulares hechas bytes: el sistema operativo UNIX y el lenguaje C. Un hombre apoyado por otros grandes hackers como Kernighan y Thompson, que murió hace unos meses, dejando un legado de influencia con tantas ramificaciones que merece un libro entero. Richard Stallman Creador de Emacs, padre del movimiento por el software libre. Hombre polémico por donde se le vea. Odiado y amado, Stallman es el filósofo del software como objeto de conocimiento y mecanismo de libertad. Ver, modificar, mejorar y compartir el software son los principios fundamentales para Stallman, en lucha incansable y constantes desde la Fundación por el Software Libre a principios de los años 80. Vamos, que si el software parte de ideas, las ideas son conocimiento y el conocimiento pertenece a todos, entonces el software debe ser libre, sin más. Tal vez en unos años apreciemos en su verdadera medida la calidad y cantidad de aportaciones de Stallman, por ahora puedo decir que si nuestro Internet funciona es gracias, en buena medida, al software creado y difundido a partir de los esfuerzos del gran rms. Linus Torvalds Creador de Linux, el sistema operativo libre. El arrojo que tuvo para crear Linux, con una dictadura estrictamente pragmática para dirigir a centenas de programadores de todo el mundo, desde hace más de 20 años, le hacen digno de gran admiración. Y no sólo creó Linux, también creó Git, el software para gestionar versiones de software que hoy construye comunidades de código abierto como las de Github. Linux está en todos lados, sin triunfar en el escritorio, es cierto, pero detrás de cada servidor web, de cada búsqueda en Google, de cada like y tweet, en la búsqueda del bosón de Higgs, y en la computadora del próximo gran hacker. Mark Zuckerberg Creador de Facebook, la red social. El último de la lista y el que más me cuesta describir. El hombre simplemente escribió en PHP y Apache un software para gestionar la vida social de su campus, luego vio un negocio, lo hizo crecer, se hizo de buenos amigos inversionistas, la red se expandió como una enfermedad viral y hoy tenemos ante nosotros Facebook, la red de redes sociales más influyente de la historia. Algunos piensan que la Facebook sabe demasiado de nosotros porque piensa en lo explícito, edad, fotos, amigos, familia. Pero Facebook puede saber mucho más que eso, algo oculto que emerge de entre todas nuestras conexiones. Y Zuckerberg, hábil programador, parece seguir al frente de todo eso.

Supongo que la mayoría de los que habéis visto el clásico de Pixar, Wall-E, habréis soñado alguna vez con un tener uno parecido. Esto mismo pensó Mike Senna, un entusiasta de la robótica que ha sido capaz de construir al famoso robot a tamaño natural. Video

Comparto este curso, porque esta muy bueno, y en mas de una oportunidad me salvo!!! Si no somos diseñadores web o programadores, es posible que no encontremos una utilidad inmediata para el código HTML. Pero en marketing, periodismo, y otras profesiones relacionadas con la comunicación, saberlo se está volviendo casi una obligación. Aunque sean las cosas más básicas, nos encontramos necesitando cada vez más saber cómo usarlo. Y no es nada complicado, las apariencias engañan. Para facilitar la existencia de estas personas que recién se están metiendo al mundo de HTML, y que realmente no necesitan ser unos expertos para hacer lo que tienen que hacer, hemos realizado este breve curso en algunas entregas donde develaremos algunos secretos de HTML para principiantes. Creo que comenzar a aprender HTML puede ser adictivo, y aunque en un primer momento solamente necesitemos tener un conocimiento básico, después vamos teniendo ansias de saber más. Si se sienten interesados por HTML, hay que entender que se trata de un lenguaje bastante anticuado, que tiene que ser complementado con otros recursos. Por eso, se puede recurrir a aprendizajes en las áreas de CSS, Dreamweaver, JavaScript, jQuery, y muchas cosas más que también son infinitamente interesantes. Pero, sin más, comenzamos con esta breve introducción al fascinante mundo del HTML. Significado y origen del HTML HTML es uno de esos acrónimos que con el correr del tiempo casi han perdido su totalidad. Si le preguntamos a muchas personas qué significa en realidad HTML, pues no sabrían respondernos con exactitud. HTML es Hyper Text Markup Language (o lenguaje de marcas de hipertexto) y no debe confundirse con un lenguaje de programación. Se trata más bien de una forma semántica de organizar una estructura, ya sea páginas web o aplicaciones, a través de marcas de sentido. Las marcas de sentido son otorgadas por las etiquetas, de las cuales hablaremos en algunas líneas. Así como tenemos que agradecerle la creación de internet, también fue Sir Tim Berners-Lee el responsable, en parte, de la creación del HTML. En la década del ’80, cuando se encontraba trabajando para el CERN, el físico ideó un lenguaje de hipertexto que facilitaría compartir documentos con sus colegas. Aunque el sistema de hipertexto ya había sido desarrollado un tiempo antes, fue Berners-Lee quien lo perfeccionó y lo presentó para ser usado en internet. Junto con Robert Cailliau, presentaron la propuesta WorldWideWeb (W3). Durante la década del ’90 se fueron presentando otras versiones. Hoy en día, el lenguaje HTML puro y duro ha sido reemplazado por el XHTML, más completo, y últimamente por el HTML5, que se corresponde con los tiempos que corren. Hoy estaremos hablando del lenguaje transicional, el XHTML, que aún se sigue implementando en una gran mayoría de sitios web, aunque lentamente se está dejando lugar al HTML5 y sus amplias ventajas. Las etiquetas Decíamos anteriormente que el HTML funciona a través de marcas de sentido llamadas etiquetas. Estas etiquetas son interpretadas por el navegador: así es como podemos ver imágenes, texto, párrafos, en definitiva, estructuras, en una página web, y no el simple código. Por eso hablamos además de marcas de sentido. Sin HTML, no tendríamos la posibilidad de disfrutar internet hoy en día. Básicamente, los navegadores como Chrome o Firefox son “traductores” de HTML que digieren todo este código y lo convierten en algo visible para nosotros. Etiquetas, marcas de sentido… ¿qué son verdaderamente? Cada etiqueta tiene un nombre y encierra en ella –literalmente, como veremos ahora- un determinado significado. Las etiquetas se escriben con los signos mayor y menor a. Por eso cuando abrimos un documento HTML veremos esto: <html> <head> <title>Bienvenidos a Bitelia</title> </head> <body> Por supuesto este es un comienzo de HTML muy burdo, pero se entiende la idea. La etiqueta <html> en este caso está indicando el inicio de un documento HTML, y esta información es leída por el navegador. Por otra parte, tenemos la etiqueta <head>, la cual merece su propio apartado por la importancia, y luego <body>, que contendrá todas las cosas que nosotros como usuarios podemos ver en pantalla. Las etiquetas funcionan por partes, que se denominan etiquetas de apertura y etiquetas de cierre. Las etiquetas de apertura le indican al navegador dónde comenzar a interpretar algo de determinada forma, y las de cierre le indican dónde terminarlo. Por eso es fundamental que se cierren todas las etiquetas que se abren en un determinado documento: aunque se vea bien, nos puede traer problemas a largo plazo. La prolijidad nunca está de más. Al ser un lenguaje de etiquetas, el HTML es por ende muy fácil de leer. Cualquiera puede aprender HTML, no requiere ser un genio, sino nada más tener algo de organización. En la segunda parte de este curso hablaremos sobre la estructura básica de un documento HTML, algo fundamental, además de las etiquetas más importantes y básicas que necesitamos saber. Por el resto de esta entrega, nos dedicaremos a entender otros datos importantes de HTML y, finalmente, por qué tenemos que saberlo si no nos dedicamos al diseño o programación web. Los archivos en HTML Los documentos HTML pueden incluir archivos como imágenes y animaciones en Flash que estarán alojados en el mismo servidor, para que el usuario pueda verlos. Pero para poder ser interpretados de forma correcta, la nomenclatura de estos archivos tiene que ser exacta. Es algo que es muy valorado por el W3 Consortium –entidad encargada de hacer las normas que deben seguir los diseñadores- y que no está de más saber. Los archivos HTML y otros archivos que usemos en nuestra página tienen que estar nombrados de forma particular. Hay una serie de reglas básicas que compartiremos con ustedes, que sirven como puntapié inicial: Los nombres de los archivos deben estar en minúsculas, para poder ser compatibles en todos los navegadores. El archivo principal será index.html, dado que será el primer archivo que el navegador buscará cuando ingrese en nuestro servidor a través de la dirección IP. No se puede tener el archivo de la home llamado de forma diferente, tiene que sí o sí llamarse index. No se pueden usar caracteres no válidos para la nomenclatura del archivo, por ejemplo, la letra ñ. Solamente se pueden usar el guión (-) y el guión bajo (_). No importa si es una imagen o un archivo HTML, todos los documentos tienen que seguir estas reglas para poder ser interpretados de forma correcta por el navegador. Por ejemplo, aunque nos veamos tentados de llamar Foto 22/08.jpg a un archivo, la nomenclatura correcta sería foto_22-08.jpg. ¿Por qué aprender HTML? Si no somos diseñadores web, y por ejemplo tenemos un empleo relacionado con la comunicación, en algún momento nos hemos topado con el HTML. Aprenderlo nunca está de más, dado que es una habilidad que puede ser apreciada en el ámbito laboral. Para los Community Managers, es una excelente posibilidad dado que permite jugar con las herramientas que nos proporciona, por ejemplo Facebook, para crear tabs personalizadas en las fanpages. Se puede crear algo básico e interesante con un conocimiento mínimo de HTML gracias a los iframes (de los cuales hablaremos en otra entrega, pero que permiten insertar una página web dentro de otra). Para los periodistas y bloggers, saber de HTML nos permite poder jugar más con las plataformas y darle un formato diferente a nuestros textos. Además, nos permite resolver problemas de formato que muchas veces surgen en las plataformas más populares de blogging del mundo (no tengan miedo de entrar a la vista HTML a corregir, nos da una visión más clara de qué es lo que estamos haciendo). Comprender HTML es comprender el idioma en el que se maneja internet. Cuando sabemos sus conceptos básicos, es como entender las primeras palabras cuando estamos mirando una película en otro idioma, un idioma que estamos estudiando. Estructura de un documento Para que un navegador pueda leer de forma correcta un documento HTML, por supuesto tiene que tener un determinado orden, y la información tiene que estar encerrada en las etiquetas correctas. De nuevo, insistimos en la importancia de cerrar todas las etiquetas que se hayan abierto alguna vez. Los documentos HTML se dividen en dos partes, el encabezado y el cuerpo. En la entrega anterior, les hablamos sobre la importancia que tenía la etiqueta <head> antes de que comience <body>. Ahora vamos a explicar un poco más al respecto. Pero antes, debemos aclarar que todos los documentos HTML se abren con la etiqueta <html> y finalizan con </html>. Puede que podamos ver el formato bien si lo probamos de forma local, pero es inaceptable -¡bajo ningún punto de vista!- comenzar un documento sin agregar esta etiqueta. Como decíamos, la etiqueta <head> marca el comienzo del encabezado. En esta sección del documento encontraremos todos los elementos de la página que no van a ser visibles para el usuario pero que serán interpretados por el navegador. Por ejemplo, los scripts de JavaScript, la metadata, el título de la página, etc. Aquí también estará incluido el código CSS que le dará el diseño a la página. Lo que nos lleva a hacer una aclaración que profundizaremos en otra entrega: ya no son los ’90 y no estamos hosteando nuestras páginas en Geocities. No uses el HTML para intentar hacer un diseño “bonito”. La segunda parte del documento es el cuerpo, cuyo comienzo está marcado por la etiqueta <body>. Aquí estarán todos los contenidos que serán visibles para el usuario. Por eso, todo lo que sea JavaScript, CSS, no puede estar incluido dentro del cuerpo –exceptuando enlace de los JavaScript externos antes de cerrar el cuerpo-. Las etiquetas están hechas para que podamos trabajar tranquilos y tener todos nuestros espacios bien estructurados. Etiquetas importantes Antes de comenzar a enumerar las etiquetas más populares tenemos que hacer una aclaración sobre los tipos de elementos que puede contener una etiqueta. Cada etiqueta puede contener dentro de sí otra etiqueta que marque determinadas características semánticas. Por ejemplo, dentro de la etiqueta <p> (de paragraph o párrafo) puedo sumar la etiqueta <font> para determinar la tipografía, la etiqueta <em> para enfatizar o <strong> para poner en negritas. En el antiguo HTML, el más primitivo, estas dos últimas etiquetas que mencionamos estaban consideradas como un aspecto de diseño y se identificaban como <b> (de bold) e <i> (de italic). Hoy en día esto se define a través de CSS y lo que nosotros hacemos con HTML es dar una explicación semántica a ese cambio en el formato del texto. Así es como enfatizamos, pero no ponemos en negrita, porque luego a través de CSS podemos crear una regla para que todas las negritas tengan una tipografía y color diferentes, por ejemplo. Volviendo al tema principal, esto de etiquetas dentro de etiquetas sucede porque tenemos dos tipos de elementos que el navegador puede diferenciar. Se trata de los elementos en línea o inline elements y los elementos en bloque o block elements. La diferencia entre ambos es que los elementos en bloque siempre ocupan todo el espacio del bloque, hasta el final de la línea, mientras que los elementos en línea solamente ocupan el espacio que tienen determinado. La gran mayoría de los elementos en bloque pueden contener en su interior elementos en línea, pero no así al contrario. Así, yo puedo tener un <em> dentro de un <p>, pero no viceversa. Pasamos entonces a enumerar y describir las etiquetas más importantes de un documento HTML: <html>: esta etiqueta es la encargada de marcar el comienzo y el final del documento. <head>: está encargada de delimitar el encabezado. Aquí encontraremos información sobre la página que es importante para el navegador y para el funcionamiento de la página, pero invisible para el usuario. <title>: se incluye dentro del encabezado y es la encargada de titular la página. Nosotros podremos ver el nombre en la pestaña del navegador. <body>: marca el comienzo del documento y del contenido que podrá ver el usuario. Dentro de la etiqueta del cuerpo se encuentran todas las etiquetas que marcan la estructura y el formato de la página. <p>: etiqueta de párrafo. Esta etiqueta marca el comienzo y el final de un párrafo. Podemos hacer un texto continuo de varios párrafos sin usarla y veremos que el navegador no diferencia donde comienza uno y termina el otro. Esta etiqueta tiene varios atributos de formato que se pueden aplicar, como veremos más adelante. <h1>, <h2>, etc: son las etiquetas de los encabezados. A no confundir con la etiqueta <head>, estas etiquetas están contenidas dentro del cuerpo y sirven para crear títulos y subtítulos. A través de CSS se les puede dar atributos diferenciados. <table>: sirve para crear tablas dentro del documento. En los comienzos de internet, para poder darle un formato más atractivo a las páginas, se solía usar tablas HTML para crear las estructuras. Esto por supuesto le daba un peso impresionante a las páginas y era muy desprolijo, afortunadamente en el presente nos manejamos con DIV, aunque no corresponde a este curso. Las tablas, sorprendentemente, se siguen usando para crear páginas web, aunque no es recomendable. <form>: es la etiqueta que marca la creación de un formulario. Ahora bien, hay muchas formas de crear formularios online, y si estamos recién comenzando con HTML solamente se debería usar para practicar y nada más. Esta etiqueta tiene muchas etiquetas propias como <input> que permiten al usuario completar campos. <iframe>: con esta etiqueta podemos insertar páginas web completas dentro de otras páginas web. Puede servir para crear galerías de imágenes, entre otras cosas. Hoy en día su implementación máxima es en las pestañas de Facebook, con una versión mucho más moderna pero con el mismo espíritu. <a>: esta es la etiqueta de los vínculos. Se puede enlazar a documentos HTML externos o a diferentes partes del mismo documento a través de anclas. Por ejemplo, el menú de cada artículo de Wikipedia, cuando es muy extenso, se maneja con anclas. Cada vez que hacemos clic en uno de estos títulos el ancla nos llevará a la parte del documento a la que queremos ir. Estas no son las únicas etiquetas HTML disponibles para un documento. A medida que vamos avanzando, vamos necesitando más etiquetas. Pero cuantas más sumamos, como por ejemplo en el caso de las tablas, más pesado será el documento y más tardará el navegador en abrirlo. La idea es hacer un sitio liviano y evitar el uso gratuito de etiquetas. Atributos Finalizaremos nuestra entrega de hoy con los atributos de las etiquetas. Ya se pueden ir imaginando por el nombre de qué se trata. Lo que hacen los atributos es darle al navegador información adicional sobre la etiqueta para que sea leída correctamente y nuestra página sea más completa. Los atributos son una forma de personalizar las etiquetas HTML. Cada etiqueta HTML tiene una lista de atributos que puede ser usado. Generalmente se repiten de etiqueta a etiqueta pero algunos atributos no funcionarán en determinadas etiquetas. Los atributos que sirven para todas las etiquetas se denominan atributos comunes y en poco tiempo los tendremos memorizados. A su vez, estos atributos comunes se dividen en core, internationalization y scripting. En HTML Help pueden encontrar una lista completa con todos los atributos de este tipo. Ahora bien, hoy en día los atributos más usados son id y class. El atributo id nos ayuda a crear un identificador único de la etiqueta, que la diferenciará del resto del documento. Con el atributo class estamos generando una clase de etiquetas, que se diferenciará del resto. La diferencia fundamental entre class y id es que varias etiquetas pueden tener la misma clase, pero el id será único de una etiqueta en particular. ¿Por qué son los más populares? Pues bien, son los más usados en CSS y en JavaScript. A través de id y class podemos crear diferentes reglas de CSS para crear formatos. Y debido a la existencia de estos dos atributos, los atributos que se solían aplicar a las etiquetas <body> o <p> ya no se usan más. Por ejemplo, si antes queríamos cambiar la tipografía de un único párrafo en todo el documento, teníamos que usar la etiqueta <font> dentro de <p> para poder hacerlo, y sumar varios atributos. Con CSS podemos crear en el HTML un id para el párrafo particular que queremos modificar, y nos estaremos ahorrando buenas líneas de código además de peso en el documento. En la próxima entrega, estaremos hablando del DOCTYPE, los vínculos y las anclas, y el uso correcto de las imágenes en una página web. Nos estamos guardando la artillería pesada –tablas y formularios- para el final. DOCTYPE Antes de ponernos a hablar sobre el DOCTYPE, creo que es momento de recomendar un artículo de nuestro compañero Eduardo donde nos cuenta un poco más sobre las buenas prácticas a la hora de escribir HTML. Una de ellas, la primera, de hecho, es declarar el DOCTYPE correcto. Esto es fundamental, y se nos puede pasar de largo si no tenemos cuidado –aunque generalmente, herramientas como Dreamweaver y similares nos insertan el código de DOCTYPE de forma automática-. El DOCTYPE es, básicamente, una forma de indicarle al navegador la versión de HTML que estamos usando. Es como una especie de identificador que le permite al browser saber con qué está lidiando. Para poder explicar un poco mejor el DOCTYPE, tenemos que meternos un poco en el mundo de XML. Si no lo habíamos dicho antes, ahora es un buen momento: el XHTML, la versión más usada del código hoy en día, es un derivado del lenguaje XML, y como tal toma muchas de las características de su sintaxis. Dentro del XML, una de las cosas más importantes a tener en cuenta es el Document Type Definition, o DTD, que es un documento que nos indica las normas y prohibiciones que tiene que tener un documento en la web o en el entorno en el que estemos. Por ejemplo, si vamos a trabajar con discos, podemos hacer a través del DTD que uno de los campos obligatorios sea el nombre. Tomando el DTD de estos documentos, el estándar XHTML nos permite usar 3 versiones diferentes, que veremos ahora. Lo que tenemos que tener en cuenta es que la etiqueta DOCTYPE se incluye fuera de la etiqueta <html>, es lo único que va por fuera, dado que es un indicativo para el navegador más que otra cosa. La inclusión de la etiqueta <doctype> antes de <html> es algo fundamental que no puede faltar en ninguna página web. Volviendo a los tipos de DOCTYPE, en realidad dependen de la versión de HTML que estamos usando en el momento. Tenemos tres tipos: Strict, Transitional y Frameset. Por supuesto, cada una de estas varía dependiendo de la versión, por lo que recomendamos que antes de poner un DOCTYPE consultemos con W3Schools para saber si lo estamos haciendo de forma correcta. Usualmente, los documentos de Dreamweaver cuentan con un DOCTYPE transicional. Así como siempre tenemos que cerrar todas las etiquetas que abrimos, también es importantísimo poner el DOCTYPE antes de la primera etiqueta. Los vínculos Uno de los aspectos más importantes del HTML son los vínculos. De hecho, son algo así como su gracia, porque uno de los propósitos principales de este lenguaje es la creación de hipertexto. Cuando se incorporó el HL (Hyper Link) al HTML, el éxito estaba garantizado. Los vínculos también pueden llamarse enlaces, y hoy en día forman una parte crucial del ecosistema de internet, además de generar toda una mentalidad diferente a la hora de leer. Pero eso lo podemos dejar para otra ocasión. Tenemos que tener en cuenta que un enlace tiene un destino y un final. El recorrido no importa, pero cada una de estas puntas son denominadas anclas, o anchors en inglés. Hablaremos más en profundidad dentro de algunas líneas, pero primero repasaremos qué es y cómo funciona una URL. Seguro ya damos por sentado que sabemos qué es y qué hace, pero seguramente tenemos una vaga idea de cómo funciona. Las Uniform Resource Locator son una forma de identificar cada uno de los recursos presentes en internet. Como tales, no pueden ser compartidas por diferentes recursos, son identificaciones únicas. Además de servir como identificador, para el usuario son una forma rápida de acceder a un sitio, dado que de otra forma tendríamos que ingresar una importante colección de números. Las URL se componen de diferentes partes: El protocolo: se trata del mecanismo implementado por el navegador para acceder a un determinado sitio web. Los más conocidos son, por ejemplo, HTTP y HTTPS. El servidor: es el lugar donde se encuentra almacenado el sitio al que queremos acceder. El nombre de cada servidor permite que el navegador identifique dónde queremos ir cada vez que ingresamos un determinado nombre. La ruta: una vez que le indicamos al navegador el protocolo y el servidor, quizás también tengamos que agregar una ruta para identificar una parte o página específica dentro del sitio. Por ejemplo, para acceder a nuestra sección sobre redes sociales, tendrían que sumar a la URL la ruta /redes-sociales. Estos son los tres componentes principales de una URL, aunque también hay otros, como por ejemplo: La consulta: esto seguramente lo han visto varias veces en búsquedas que se realizan en blogs, dentro de la URL se puede visualizar como ?=búsqueda=bitelia. Las palabras están siempre separadas por estos dos caracteres, = y & (para agregar una nueva variable). La sección: también dentro de cada página web podemos, a través de la URL, acceder a una determinada sección de una misma página. Dentro de la URL está simbolizado con el #, y pueden probarlo por ustedes mismos haciendo clic en “Comentarios” para que los lleve directamente al fondo de la página. Ahora que ya tenemos bien comprendidas las URLs podemos comenzar con los vínculos. Entender que es una URL antes es importante porque son las URLs las que estarán insertadas en el vínculo, y son la forma que tenemos de darle a entender al navegador que queremos ir a otra parte. Tipos de vínculos En esta sección de nuestro curso ahondaremos en los diferentes tipos de vínculos que tenemos disponibles gracias a HTML. Se trata de los vínculos relativos, los vínculos absolutos y los vínculos de email. Cada uno tiene un código propio, aunque similar, y hay que tener cuidado con no confundirlos. También tienen atributos propios, que debemos usar para dejar en claro cómo queremos que se comporte el navegador ante la presencia de un link. En una página web lo más probable es que usemos vínculos absolutos todo el tiempo, así que nos concentraremos en esta parte. Para poder crear un hipervínculo, tenemos que usar el código <a>, pero acompañado de determinados atributos. Un hipervínculo normal que nos lleva a otra página web es: <a href=”http://www.bitelia.com/”>Esto es un hipervínculo</a> Como podemos ver, la etiqueta <a> está acompañada del atributo que marca la dirección o URL a la cual tiene que dirigirse el enlace. Dentro del interior de la etiqueta aparecerá el texto que más tarde estará destacado en el texto como hipervínculo. Otro de los atributos más importantes de la etiqueta <a> es el target. Básicamente, el target indicará dónde tiene que ir el navegador hoy en día. Si es una nueva pestaña, una nueva ventana, o dentro de la misma ventana. Gracias a las ventajas de las pestañas hoy en día casi todos los navegadores modernos nos permiten obviar el target dado que se abrirán automáticamente en una nueva pestaña. Pero, por las dudas, el código para hacerlo es: <a href=”http://www.bitelia.com/” target=”_blank”>Esto es un hipervínculo</a> Unos párrafos atrás hablábamos del enlace como “destacado” en el texto. Esto se puede lograr a través de atributos, también, pero hoy en día es algo que genera un código muy pesado y desprolijo y es completamente evitable gracias a CSS. Para ir cerrando el tema de los vínculos, también tenemos que tener el cuenta la etiqueta para enviar correos electrónicos. Para poder modificar un enlace tenemos que agregar algo de código a lo que vimos anteriormente: <a href=”mailto:[email protected]/”>Envíanos un correo</a> En un documento HTML, cuando hacemos clic sobre este enlace se nos abrirá una ventana con el cliente de correo que tengamos por default en la computadora. Hoy en día no es recomendable por una serie de motivos, siendo la seguridad el más importante. Existe una infinidad de bots que recorre internet buscando correos electrónicos para SPAM, y además, los usuarios muchas veces no aprecian tener que abrir su cliente de correo electrónico de forma inesperada. Una de las prácticas usadas para reemplazar el mailto es el formulario, del cual hablaremos en la próxima entrega. Nota: Daniel ha comentado este artículo dejándonos algunas sugerencias sobre cómo usar los enlaces de tres formas diferentes. Lo hemos cubierto de forma muy superficial (porque, recordemos, esto es para principiantes) pero Daniel lo explica de forma completa. Las anclas Seguramente han notado con anterioridad que, en Wikipedia, cuando hacemos clic en uno de los enlaces del índice, ubicado a principio de página, nos lleva no a un documento HMTL, sino a un sector dentro del mismo documento. Esto se puede lograr usando anclas, y es muy útil a la hora de diseñar páginas que contienen mucho texto y que necesitan de una buena división para no “marear” demasiado al usuario. Si vamos a crear una web, la idea es que sea cómoda y navegable, por supuesto. El código para realizar anclas es muy simple, y a través de Dreamweaver el proceso también es súper fácil. Tenemos que tomarlo como un enlace perfectamente normal, pero con la diferencia de que en lugar de tener una URL, la etiqueta <a> tendrá un ancla, un lugar dentro del texto donde dirigirse. Ahora bien, para que este lugar pueda ser identificado tendrá que recibir una determinada etiqueta. Para eso, con cada ancla que usemos que tenemos que usar además una etiqueta id. Parece algo confuso al principio, pero ampliaremos. Este es el código desde dónde vamos a partir. Imaginemos que es una pregunta en la sección de FAQ de una página: <a href=”#ancla1”>¿Cómo voy hasta abajo? <p id=”ancla1”>Pues poniendo un ancla.</p> Si desguazamos las partes de las etiquetas, notaremos que el ancla superior está precedida por un #, que como dijimos antes en las URLs marca una determinada sección de un documento. Por otra parte, lo que estamos haciendo en el segundo pedazo de código es indicarle al navegador cuál es la identificación de ese determinado párrafo. Por ende, este párrafo en particular, marcado con la etiqueta <p>, es único en todo el documento, pues tiene el id “ancla1” que no le corresponde a ningún otro párrafo. Así es como, haciendo clic en el primer enlace, terminaremos en esta parte del documento. La etiqueta id es también súper útil a la hora de diseñar con CSS, pero eso tendremos que dejarlo para otra entrega. Nos hemos extendido bastante, pero ya falta poco para que podamos hacer nuestras primeras incursiones en HTML. En la próxima entrega estaremos hablando de las imágenes dentro de los documentos, cómo crear listas dentro de un documento, y arrancaremos hablando de las tablas, una de las herramientas más importantes que tenemos. Nos vamos acercando al final de nuestras entregas sobre HTML para principiantes. Ya repasamos bastante de todos los conceptos principales, las etiquetas, y dimos algunos consejos para comenzar a trabajar. Conociendo la estructura básica de un documento, podemos hacer muchas cosas. En nuestra anterior entrega hablamos sobre la importancia del DOCTYPE, sobre los enlaces, y sobre las anclas. Hoy llega el turno de una de las cosas más “complicadas” de HTML, las tablas, pero además hablaremos sobre las imágenes en los documentos y la creación de listas. Las imágenes en HTML Las páginas web no podrían existir sin imágenes. Hoy en día, la importancia de lo visual en las páginas web es obvia. Pero las imágenes tienen que estar subidas de una manera determinada para poder funcionar de forma efectiva. Tenemos dos formas de incluir imágenes, dependiendo del tipo de imágenes que queremos usar. Por eso, vamos a comenzar con la diferenciación entre estos tipos. Por un lado, tenemos las imágenes de contenido. Estas son imágenes que se incluyen directamente en el código HTML y que deberían servir para proporcionar información adicional. No siempre sucede, pero ese es el espíritu. Por otra parte, tenemos las imágenes de decoración o adorno que se insertan directamente en el código CSS y que no tienen que ver con lo que estamos tratando en este momento. Este tipo de imágenes están insertadas en las hojas de estilo. Nos dedicaremos, entonces, a las imágenes de contenido. Estas se insertan a través de la etiqueta <img>, que a su vez cuenta con una serie de atributos comunes que podemos usar, como la alineación, bordes, etc. Pero además, la etiqueta <img> cuenta con atributos específicos que es importante que usemos, muchas de las veces. Estos atributos son: src: se trata de la URL desde donde estaremos “levantando” la imagen. Puede ser un servidor propio o ajeno, pero es importante que la fuente de la imagen esté siempre activa para evitar errores. Por eso es recomendable usar un servidor propio. alt: este es uno de los atributos más importantes de la imagen, y ya en nuestra guía de buenas prácticas para escribir HTML mencionábamos que tenemos que agregarlo por cuestiones de validación y accesibilidad. Nunca debe ser olvidado. longdesc: este es uno de los atributos menos usados, pero nos permite acceder a una descripción de la fotografía en una determinada URL. name: se trata del nombre de la imagen, como pueden haber adivinado, y es el nombre que aparecerá cuando apoyamos el cursor sobre la imagen. La etiqueta <img> cuenta con dos atributos más que pueden ser usados para “editar” la imagen desde el código. Estos son width y height, pero no es recomendable usarlos dado que casi siempre deforman la imagen. Si necesitamos usar una foto de un ancho de 450 píxeles, no tenemos que determinar esto desde el HTML, sino que tenemos que editar la foto usando un programa alternativo, y luego subirla. Las ediciones de imágenes se tienen que hacer de forma paralela. Además de usar píxeles, también podemos indicar estas medidas en forma de porcentaje. En definitiva, los atributos “obligatorios” son src y alt. No pueden dejar de estar en todas las imágenes que subimos al servidor. En cuanto al formato en que tiene que estar la imagen, depende de uno, pero tengamos en cuenta que al estar trabajando con web podemos tener limitaciones de peso de subida desde nuestro propio servidor, y también tenemos que hacer que la imagen cargue rápidamente para nuestros usuarios. Por eso, es mejor usar los formatos más livianos para la web, en 72dpi (o píxeles por pulgada) y en formato PNG o JPG. Las listas Otra gran forma de usar HTML es a través de las listas. Se trata de agrupar una serie de textos en un conjunto ordenado o desordenado, que se podrá ver de forma diferente en el resultado final. Por este motivo, tenemos dos tipos de listas que se manejan con etiquetas diferentes: se tratan de las listas ordenadas y de las listas desordenadas. También tenemos la opción de sumar un tipo diferente, las listas de definición, pero al no ser tan usado no estaremos viéndolo en profundidad aquí. Comenzaremos por las listas desordenadas. Este tipo de listas es el más implementado dada su sencillez. La etiqueta con la cual podemos formar listas desordenadas es un elemento de bloque, y sus dos etiquetas principales son <ul> y <li> (etiqueta que comparte con la lista ordenada). En definitiva, una lista desordenada tendrá este aspecto en el código: <ul> <li>Elemento 1</li> <li>Elemento 2</li> <li>Elemento 3</li> </ul> Notemos que cada una de las etiquetas <li> tiene que estar cerrada. Una vez que tengamos todo dentro de este código, este será el resultado: Elemento 1 Elemento 2 Elemento 3 Pasaremos ahora a las listas ordenadas. La etiqueta contenedora cambia, dado que será <ol>, pero el mecanismo es básicamente el mismo. Esta es una porción de código para una lista ordenada: <ol> <li>Elemento 1</li> <li>Elemento 2</li> <li>Elemento 3</li> </ol> Y el resultado será: Elemento 1 Elemento 2 Elemento 3 La diferencia entre las listas ordenadas y desordenadas, además de la obviedad, es que tiene un atributo que nos permite cambiar las viñetas o números que ordenan. Para poder usar a, A, o I en lugar de 1., podemos usar el atributo start. Las tablas Finalmente, llegó la hora de uno de los asuntos más “complicados” del HTML. Puede que sea difícil de resolver en un primer momento, pero rápidamente nos acostumbraremos. Las tablas pueden usarse en el sentido tradicional, para organizar información, pero dentro de una página web también pueden usarse para organizar secciones como el header, el footer, el banner, etc. Básicamente nos dicen dónde deberían ir las cosas. Usar tablas para organizar páginas web es un acercamiento muy 90’s a la cuestión. Hoy en día la práctica utilizada es crear contenedores div en CSS para poder ubicar las partes de la página de forma correcta. Pero las tablas mantienen una cierta utilidad. Las tablas están incluidas en HTML desde sus primeras versiones para facilitar el manejo de datos. Pero pueden causar que el producto final de nuestro trabajo sea demasiado pesado y tarde demasiado tiempo en cargar en el navegador, más si lo complementamos con imágenes y otros recursos. Cuando creamos una tabla en HTML, básicamente estamos usando los mismos elementos de siempre que nos permiten crear filas y columnas, encabezados, y más. Tenemos varios tipos de tablas. Comenzaremos con las tablas simples. En este caso, se componen de tres etiquetas, y no tienen demasiada dificultad. Más adelante hablaremos de atributos y otras cuestiones específicas. Las tres etiquetas son: <table>, para delimitar el comienzo y fin de una tabla <tr>, que delimita el comienzo de cada fila <td>, que determina el contenido de cada celda. Puede ser algo confuso, pero pensemos que <tr> es table row, por lo que es la fila, y <td> es table data. Una tabla en HTML se forma de esta manera: <table> <tr> <td>Celda 1</td> <td>Celda 2</td> <td>Celda 3</td> </tr> <tr> <td>Celda 4</td> <td>Celda 5</td> <td>Celda 6</td> </tr> </table> El resultado final será este: Para seguir avanzando, podemos complejizar la tabla usando otras etiquetas y atributos específicos de las tablas. Por ejemplo, la etiqueta <th> se usa dentro de <tr> como reemplazo de <td>, y es una etiqueta de encabezado de tabla. Si la usamos, el texto que ingresemos en esta etiqueta se verá luego destacado. Las propiedades de este destaque se pueden definir a través de CSS. Esto nos lleva a hablar de los atributos específicos de las tablas. Aunque hay muchos, mencionaremos los más imprescindibles, los que nos permitirán jugar más con las tablas y hasta con la estructura de un sitio web, si es que queremos crear uno para practicar. Estos atributos son muy importantes para la creación de tablas complejas. colspan: se trata del número de columnas que tiene que ocupar la celda. Si quiero tener una celda más grande, que ocupe 2 columnas mientras el resto ocupa una sola, tengo que usar este atributo seguido por la cantidad de columnas: colspan=”2”. rowspan: en el mismo sentido que el anterior atributo, tenemos que usar rowspan para fusionar celdas en una fila. Estos dos atributos nos permiten crear tablas complejas y organizar la información de forma diferente. También se pueden usar otros atributos, pero no son tan comunes. abbr: es el atributo que describe el contenido de la celda headers: nos muestran las celdas que actúan como cabeceras. Con esto ya tenemos suficiente información para practicar y crear nuestras propias tablas. En la próxima entrega, hablaremos exclusivamente de los formularios en HTML, cómo crearlos, cómo se usan hoy en día, y más. Y finalizaremos con algunos consejos extra, más algunos recursos online que se pueden usar si recién estamos arrancando. Dentro de HTML tenemos la posibilidad de crear una especie de aplicación web muy básica con código, estos serían los formularios. Generalmente se los usa para eso: formularios de contacto, de consulta, de sugerencias, etc. Su uso está muy abarcado porque ha ido reemplazando al atributo mailto del que les hablamos en el apartado sobre enlaces, dado que varios bots usaban estas direcciones de correo detectándolas en el código para enviar spam. Tenemos dos tipos de formularios: los formularios simples y los formularios avanzados. Comenzaremos por los simples. Formularios simples Se crean usando nada más que dos etiquetas, <form> e <input>. <form>, por supuesto, será la etiqueta que le indique al navegador que está por comenzar un formulario. Y es imperativo que la cerremos cuando termine. Dentro de <form> encerraremos todos los campos que queramos que estén incluidos en el formulario. Con <input>, como veremos a continuación, vamos a poder definir dichos elementos, y son bastantes. Antes de pasar a estos elementos, deberíamos repasar los atributos que se le pueden sumar al formulario: action: con este atributo vamos a indicar la URL donde queremos que se procesen los formularios. Generalmente tendrá la extensión .php. method: aquí tendremos dos opciones de atributo, post o get. Dependerá del tipo de método que se use para enviar el formulario. Generalmente, para los formularios de contacto, se usa post, porque permite el envío de mucha más información. Además, los datos enviados por get luego se pueden ver en la barra del navegador, como por ejemplo sucede con Google que emplea este método. accept: con este atributo definimos cuáles son los formatos de archivos aceptados por el formulario. Existen otros atributos, pero estos son los más populares. De hecho, los más usados son action y method. Elementos de un formulario Ahora pasaremos a repasar los diferentes elementos que pueden estar incluidos dentro de la etiqueta <input>. Esta es la etiqueta fundamental para crear elementos, con algunas excepciones, así que es importante no olvidarlo. Primero comenzaremos detallando los atributos que puede tener <input> para luego hablar bien de los elementos. Estos atributos son: type: aquí vamos a ingresar qué tipo de elemento queremos. Es el atributo más importante. Con text, passwork, checkbox, submit, reset, y más, podemos armar un formulario simple de contacto. name: este atributo le asigna un nombre al elemento, y también es fundamental. value: cuando ingresamos este atributo, es para poner un valor inicial dentro del elemento. Por ejemplo, si tenemos una lista del 1 al 10 y queremos que comience con uno, el atributo deberá decir value=”1”. size: aquí delimitaremos el tamaño de caracteres que debe tener el campo, en el caso de texto y contraseña, y el tamaño de píxeles que debe tener el cuadro en el resto. maxlenght: la cantidad máxima de caracteres permitida en un campo. checked: cuando estamos usando checkboxes, este atributo permite predeterminar cuál estará seleccionada de antemano. disabled: nos permite deshabilitar un elemento del formulario. readonly: permite que creemos un elemento que sea sólo lectura. src: nos permite crear botones con imágenes, se usa para el botón del formulario y tiene que estar acompañado por una URL. alt: como sucede con este atributo, podemos agregar un texto descriptivo. Ahora que ya conocemos los atributos, podemos avanzar con los tipos de elemento de formulario que definimos en el código a través del atributo type. El primero de estos tipos es el campo de texto, el elemento más usado en los formularios. Nos permite crear un cuadro de texto vacío para que, por ejemplo, el usuario pueda insertar su nombre de usuario. En el código, veremos algo así –digo algo así porque falta agregar párrafos y texto; este código es simplemente para ver cómo funcionan las etiquetas y cómo deben ser ordenadas, si lo llevamos a un navegador no funcionará y se verá horrible: <html> <head><title>Ejemplo de formulario</title></head> <body> <form> <input type=”text” name=”nombre” /> </form> </body> </html> Aquí vemos cómo quedaría el resultado, pasado al navegador: Dentro del mismo sentido, casi sin variaciones excepto con el atributo, tenemos a las contraseñas. Estas se deben crear claramente usando el atributo password, y el código no se diferencia demasiado del de texto. Aquí vemos el ejemplo anterior, con el agregado de una contraseña: <html> <head><title>Ejemplo de formulario</title></head> <body> <form> <p>Nombre <input type=”text” name=”nombre” /></p> <input type=”passwork” name=”Contraseña” /> </form> </body> </html> Ahora avanzamos con las checkboxes, otro clásico de internet, que en realidad no son para nada difíciles de crear. Como pueden intuir, tenemos que usar el atributo checkbox, y luego ir enumerando cada uno de los elementos que queremos que tenga. Es algo engorroso porque hay que usar la etiqueta cada vez que queremos agregar una opción. Para que no sean separados con demasiado espacio, tenemos que añadir además la etiqueta <br />. Siguiendo con nuestro ejemplo: <html> <head><title>Ejemplo de formulario</title></head> <body> <form> <input type=”text” name=”Nombre” /> <input type=”passwork” name=”Contraseña” /> <input type=”checkbox” name=”Ejemplo1” value=”ejemplo1” />Ejemplo 1 <input type=”checkbox” name=”Ejemplo2” value=”ejemplo2” />Ejemplo 2 <input type=”checkbox” name=”Ejemplo3” value=”ejemplo3” />Ejemplo 3 </form> </body> </html> Similares a las checkboxes, tenemos a los radiobuttons, que a diferencia de los anteriores son mutuamente excluyentes. Esto quiere decir que no podemos elegir múltiples opciones, sino únicamente una sola. El tipo de atributo que usamos es radio, y el código nos estaría quedando de esta manera: <html> <head><title>Ejemplo de formulario</title></head> <body> <form> <input type=”text” name=”Nombre” /> <input type=”passwork” name=”Contraseña” /> <input type=”checkbox” name=”Ejemplo1” value=”ejemplo1” />Ejemplo 1 <input type=”checkbox” name=”Ejemplo2” value=”ejemplo2” />Ejemplo 2 <input type=”checkbox” name=”Ejemplo3” value=”ejemplo3” />Ejemplo 3 <input type=”radio” name=”sexo” value=”hombre” checked=”checked” />Hombre <input type=”radio” name=”sexo” value=”mujer” />Mujer </form> </body> </html> Ahora podemos avanzar a los botones. Tenemos dos, submit y reset. Uno de ellos nos permitirá enviar la información del formulario, y el otro nos permitirá borrar todos los valores para volver a una instancia original. La diferencia reside en cómo completemos el atributo type. Si es con submit, enviaremos, y si es con reset, borraremos. Antiguamente se usaban los dos botones pero hoy en día se ha perfeccionado y casi nadie usa reset, sobre todo porque los formularios no se crean únicamente con HTML sino que están apoyados por PHP y JavaScript. Igualmente, aquí está el ejemplo: <html> <head><title>Ejemplo de formulario</title></head> <body> <form> <input type=”text” name=”Nombre” /> <input type=”passwork” name=”Contraseña” /> <input type=”checkbox” name=”Ejemplo1” value=”ejemplo1” />Ejemplo 1 <input type=”checkbox” name=”Ejemplo2” value=”ejemplo2” />Ejemplo 2 <input type=”checkbox” name=”Ejemplo3” value=”ejemplo3” />Ejemplo 3 <input type=”radio” name=”sexo” value=”hombre” checked=”checked” />Hombre <input type=”radio” name=”sexo” value=”mujer” checked=”checked” />Mujer <input type=”submit” name=”enviar” value=”Enviar” /> </form> </body> </html> También se pueden agregar otros botones usando el tipo de atributo button, pero este tipo de botones únicamente son útiles si los combinamos con JavaScript. Con este código podemos programar para que el botón haga lo que necesitemos que haga. Formularios avanzados Ahora pasaremos a los formularios un poco más avanzados. Para poder avanzar necesitamos conocer más etiquetas, una de las más importantes es <fieldset>. Con esta etiqueta podemos agrupar partes del formulario y sumar la etiqueta <legend> para darles un título. Dentro del abanico de posibilidades también encontramos los menús desplegables y las cajas de texto. Para crear un menú, tenemos que usar no la etiqueta <input> sino la etiqueta <select> y para crear un cuadro de texto, no nos confundamos con <text>, ahora tenemos que usar <textarea>. Dentro de nuestro código anterior, estas nuevas adiciones se verían así: <html> <head><title>Ejemplo de formulario</title></head> <body> <form> <input type=”text” name=”Nombre” /> <input type=”passwork” name=”Contraseña” /> <input type=”checkbox” name=”Ejemplo1” value=”ejemplo1” />Ejemplo 1 <br /> <input type=”checkbox” name=”Ejemplo2” value=”ejemplo2” />Ejemplo 2 <br /> <input type=”checkbox” name=”Ejemplo3” value=”ejemplo3” />Ejemplo 3 <br /> <input type=”radio” name=”sexo” value=”hombre” checked=”checked” />Hombre <input type=”radio” name=”sexo” value=”mujer” checked=”checked” />Mujer <input type=”submit” name=”enviar” value=”Enviar” /> <select name=”pais> <option value=”España”>España</option> <option value=”Argentina”>Argentina</option> <option value=”Portugal”>Portugal</option> <option value=”Chile”>Chile</option> <textarea name=”comentarios” value=”Deje sus comentarios” cols=”10” rows=”5”></textarea> </form> </body> </html> Con esto ya podemos crear un formulario completísimo. Espero les sirva... y para los que arrancan con Web , les pueda dar una mano!