Codigos HTML
Codigos HTML
Codigos HTML
En el fondo, crear una página web en HTML, no es muy diferente a crear cualquier otro documento con
un editor de texto. Consiste en crear un fichero con extensión .html o .htm y editarlo.
En este fichero, se creará el contenido en sí (el texto de los títulos, párrafos, crear formularios HTML,
etc.), así como las etiquetas (o “tags”) HTML (luego veremos que son) necesarias para definir la
estructura del documento HTML.
Esto se puede hacer de una manera más purista en modo texto trabajado directamente con el código
HTML, o bien, de una manera más visual y amigable con un editor HTML especializado, muy parecido a
cómo se trabaja también en un editor como Microsoft Word, por ejemplo.
A partir de aquí, el proceso (que iré desglosando y será lo que aprenderás a lo largo del post) sería:
Crear el contenido y aplicarle formato con las etiquetas HTML: títulos, párrafos de texto, enlaces,
imágenes, tablas, audio y vídeo embebido, etc.
Un ejemplo minimalista de página, vista como código HTML, no como el resultado final que ser ve en el
navegador, sería éste:
Ejemplo de página HTML con un conjunto mínimo de elementos.
Ejemplo de una página web trivial y en la que no se ha realizado aún la parte de diseño con CSS.
HTML es un lenguaje de marcado que sirve para describir de una manera estructurada mediante
etiquetas el contenido de un documento. Esto tiene la gran ventaja de que podemos añadir con ello
semántica (significado) al documento que una máquina puede entender.
El estándar actual que rige HTML es la versión HTML 5, aunque muchas webs siguen funcionando con las
versiones HTML 4.01 / XHTML, las versiones de “toda la vida” que la versión 5 ha ampliado con nuevas
funcionalidades, algunas muy potentes.
De todos modos, como este post es un post de introducción, nos moveremos básicamente dentro de lo
que ya existía en la versión 4.01.
No obstante, te daré, por supuesto, referencias de recursos gratuitos para aprender HTML al nivel de
profundidad que quieras, incluso a un nivel experto si lo deseas, junto con un macro-ejemplo
descargable donde he implementado todo lo que tratamos en este post.
¿Qué son las etiquetas y los atributos HTML? Ejemplos de etiquetas HTML
Lo primero que te llamará la atención en el ejemplo de código arriba son las palabras entre corchetes.
Esto son las así llamadas etiquetas HTML.
Estas etiquetas forman una estructura jerárquica, es decir, se pueden anidar entre ellas, salvo la
etiqueta especial <!DOCTYPE HTML> en la primera línea de un documento HTML.
Siempre hay una etiqueta de apertura y otra de cierre que es la misma etiqueta, pero con una barra
delante del nombre de la etiqueta. Por ejemplo: “<title>” (etiqueta de apertura) y “</title>” (etiqueta de
cierre que delimita el final del contenido etiquetado).
En medio viene un texto u otras etiquetas anidadas que con su contenido. El conjunto de una etiqueta y
su contenido se conoce como elemento HTML.
A veces, una etiqueta no tiene contenido en texto como tal (por ejemplo, las etiquetas “meta” del
ejemplo). En ese caso, no hace falta usar una etiqueta de cierre.
Conseguimos semántica, es decir, que el contenido tenga sentido para el navegador u otras aplicaciones,
siendo el buscador de Google una de las más destacadas.
Por ejemplo: la etiqueta title anterior le dice al navegador que se trata del título de la página, el que va a
visualizar en la pestaña en la que tienes abierta esta página dentro del navegador.
Otro ejemplo de aplicación sería cuando Google visita tu web: en este caso el texto etiquetado con la
etiqueta title será el que utilice Google como título en sus resultados de búsqueda.
Gracias a ello se pueden hacer cosas como éstas sin las cuales sería imposible imaginarnos la web hoy en
día.
El otro concepto fundamental que tienes que tener claro, junto con el concepto de etiqueta, es el
concepto de atributo.
Si te fijas, en el caso de las etiquetas meta del ejemplo, éstas, antes del corchete de cierre contienen
palabras con un formato de xxx=”yyy”. Esto son los atributos, donde xxx es el nombre del atributo e yyy
su valor.
Los atributos son simplemente una manera de añadir más información semántica a una etiqueta.
Aquí, con el atributo name estamos diciendo concretamente que se trata de una etiqueta meta que
sirve como descripción de la página y que la descripción concreta es la que viene en el atributo
“content”.
Los resultados de búsqueda de Google son una de las aplicaciones más importantes de las etiquetas
Google usa esto también para sus resultados de búsqueda porque es aquí de dónde saca normalmente
la descripción que viene debajo de los títulos de los resultados de cada página que muestra.
Ahora que ya hemos visto la teoría básica y un pequeño ejemplo concreto, es hora de ponerse manos a
la obra. Para ello, lo que necesitas ahora es un editor.
Puedes editar HTML en cualquier editor, incluso en el Notepad de Windows, si me apuras, puesto que,
como has podido ver, el código HTML es simple texto.
Sin embargo, no es lo conveniente. Te conviene usar un editor HTML especializado. Así que veamos
cuáles hay y cuál de ellos puede ser una buena opción para ti.
La respuesta es simple: salvo que te diques profesionalmente a crear páginas HTML, no le veo sentido a
un producto comercial de pago puesto que los editores gratuitos han llegado son más que suficientes
para lo que cualquier usuario “normal” pueda necesitar.
Tienes editores HTML gratis y en español de buena calidad que te permiten trabajar tanto de manera
visual (conocidos también como “editores html WYSIWYG”), como directamente con el código, incluso
editores que te permiten incluir hojas CSS (en el apartado de diseño te explico qué son).
Es decir, tienes todo lo que necesitas en las opciones gratuitas, por tanto, mi consejo es que descartes
las opciones de pago.
Otra disyuntiva importante es si utilizar un editor HTML online (implementado en una web) o si utilizar
un editor descargable para instalarlo en tu equipo. Éstos últimos editores HTML los puedes descargar
gratis también, hay muchas opciones.
Aquí la decisión no está tan clara. Es más, puedes usar ambas opciones a la vez. Así que prueba y elige la
que más te guste.
Notepad++: se trata de un editor HTML gratis para descargar, aunque no es estrictamente un editor
HTML, sino un editor que soporta muchos más lenguajes que HTML. Es el que utilizo yo (la captura de
arriba es de Notepad++), uno de los más populares, está traducido al español y colorea la sintaxis del
HTML, lo cual ayuda muchísimo a evitar errores en la codificación. Su principal pega es que no puedes
trabajar de manera visual.
Coda: una alternativa en la línea de Notepad++ (qué sólo funciona con Windows) para el mundo Apple.
El editor online HTML de Quackit: ésta es la alternativa online, también gratis, que uso yo también y sus
principales ventajas son el hecho de ser online, crear un código HTML muy limpio y de ser, además,
WYSIWYG. Quizás ya no sea el mejor en este momento, es un editor HTML online muy simple, pero
personalmente es el que más me gusta, además, tiene los menús también en español. Su principal pega
que le veo es que no colorea el HTML.
El editor LiveGap: ésta es una alternativa a Quackit muy interesante ya que tiene las ventajas adicionales
de colorear la sintaxis del código y de que estás viendo al mismo tiempo, mientras que editas el código
HTML, cómo queda visualmente, y viceversa. No lo he usado extensamente, pero me ha parecido una de
las alternativas más interesantes a Quackit que he encontrado. Por supuesto, también es gratis.
El editor LiveGap permite editar el código mientras y ver a la vez el resultado visual.
Aunque este tema ya lo hemos abordado, quería añadir una recomendación muy importante:
Al principio te van a atraer mucho más trabajar de manera visual. Mi consejo es que realmente te
fuerces a no usar esta vía y trabajar con el código HTML. Por dos motivos:
A veces los editores visuales fallan y dan problemas. Esto pasa, lamentablemente bastante con el editor
visual que incorpora WordPress, por ejemplo. Sabiendo trabajar en HTML resuelves estas cosas en unos
segundos cuando, a veces, en el editor visual no hay manera.
Los editores visuales meten con frecuencia “basura” o generan código poco óptimo.
Por tanto, que los editores HTML visuales no sean la excusa perfecta para disuadirte de aprender a
trabajar con código HTML “a la antigua usanza”.
Empecemos a hablar ahora de las diferentes partes del código de una página en HTML.
Lo primero es la estructura básica de un documento HTML. Hay variantes en cuyos matices no quiero
entrar por no dispersarnos, pero para mantener las cosas simples, te recomiendo usar siempre esta
plantilla:
<!DOCTYPE HTML>
<html lang="es">
<head>
<title>Título de la página…</title
1 <!DOCTYPE HTML>
2 <html lang="es">
3 <head>
4 <title>Título de la página…</title>
5 <meta charset="UTF-8">
7 </head>
8 <body>
9 <h1>… </h1>
10 <p>…</p>
11 </body>
12 </html>
Pero, además, disponemos de otras etiquetas especiales para crear la estructura interna de la página.
Dentro de estas me voy a limitar a la etiqueta <div> que es la “clásica” que se ha empleado para todo en
la versión 4.01 de HTML. En HTML 5 se han añadido luego otras nuevas como <article>, <section> o
<header>, pero ni las necesitamos, ni nos interesan ahora.
Veamos un ejemplo:
<body>
<div class=”barra-lateral”>
<h3>Título…</h3>
<p>Texto</p>
1 <body>
2 <div class=”barra-lateral”>
3 <h3>Título…</h3>
4 <p>Texto</p>
5 </div>
6 <div class=”contenido”>
7 <h1>Otro título…</h1>
8 <p>Otro texto</p>
10 </div>
11 </body>
Como puedes intuir con el ejemplo anterior, <div> permite crear divisiones lógicas dentro de una página
para aplicarles luego diferentes formatos (por eso he usado también el atributo “class”, más sobre esto
luego).
En el típico blog con una barra lateral, por ejemplo, los contenidos de la barra lateral irían podrían ir un
div y el contenido en sí en otro diferente.
Y a partir de ahora es sencillo: se trata de conocer las diferentes etiquetas para los diferentes tipos de
elementos que puede tener una página HTML: texto normal, tablas, enlaces, imágenes, etc.
Cómo trabajar con títulos y párrafos de texto en HTML
HTML tiene seis etiquetas de títulos/subtítulos: de “<h1>” hasta “<h6>”, correspondiendo los números
al nivel jerárquico.
Es decir, una etiqueta “<h1>” sería el nivel jerárquico máximo, “<h2>” los subtítulos de los niveles h1 y
así sucesivamente.
Por otra parte, los párrafos de texto normal se marcan con “<p>”.
Con ambas cosas tenemos los elementos básicos para crear texto en HTML.
Si comparamos esto con Word, por ejemplo, las etiquetas de títulos serían el equivalente a los estilos
“Titulo 1”, “Título 2”, etc. y la etiqueta de párrafo el equivalente al estilo “normal”. De hecho, al pegar
un texto desde Word a un editor HTML visual, así se deberían convertir en el código HTML generado.
Puedes probarlo con Quackit, por ejemplo.
Las listas son otro elemento indispensable en un contenido. Es muy fácil crearlas en HTML, en el caso de
las listas enumeradas se usa la etiqueta <ol> y en el caso de las no enumeradas (con viñetas), se usa la
etiqueta <ul>. En ambos casos se usa <li> para los elementos de la lista.
Por ejemplo:
<ol>
<li>El primer punto</li>
<li>El segundo punto</li>
<li>El tercer punto</li>
1 <ol>
5 </ol>
Fácil, ¿no?
Fíjate, además, que, siendo una lista enumerada, no vienen los números, es decir, el “1.) …”, “2.) …”, etc.
Eso es así porque, de manera similar a Word, usar listas enumeradas implica precisamente que los
números se crean automáticamente cuando se visualice la página en un navegador web.
<table>
<tr>
<th>Nombre</th>
<th>Apellido</th>
1 <table>
2 <tr>
3 <th>Nombre</th>
4 <th>Apellido</th>
5 <th>Web</th>
6 </tr>
7 <tr>
8 <td>Amy</td>
9 <td>Porterfield</td>
10 <td>https://www.amyporterfield.com/</td>
11 </tr>
12 <tr>
13 <td>Pat</td>
14 <td>Flynn</td>
15 <td>https://www.smartpassiveincome.com/</td>
16 </tr>
17 </table>
Dentro de ella, cualquier fila de cualquier tipo se demarca con <tr> que viene de “table-row” (fila de
tabla en inglés). Dentro de esto, puede haber diferentes tipos de filas que se diferencian por el tipo de
celdas que contienen.
En este ejemplo, tenemos una primera fila con celdas con la etiqueta <th> (“table header”, cabecera de
tabla en inglés) que actúan como cabecera y luego el resto, serían celdas ordinarias con datos, <td>,
“table data”.
La información clave, el enlace, viene en el atributo href, aquí debes insertar la URL del sitio que quiere
enlazar.
El atributo target también es muy importante. Sus valores más usados (y los únicos que necesitas
realmente en la práctica) son “_blank”, que quiere decir la página del enlace se abre en una nueva
pestaña/ventana, y “self”, que la abre en la pestaña/ventana del documento actual.
Si omites este atributo o dejas el valor en blanco, se asume por defecto target = ”self”.
La etiqueta HTML para insertar una imagen en HTML es <img> y su sintaxis básica la siguiente:
Aquí el atributo src es el equivalente a href en el caso del enlace anterior, es decir, una URL que apunta
a la imagen que quieres visualizar.
Por ejemplo:
http://midominio.com/imagenes/mi-imagen.png
Otro atributo muy importante es alt. Por una parte, porque en caso de que el enlace a la imagen esté
roto, visualizará un texto alternativo (de aquí, el nombre de “alt” del atributo) que será el texto asociado
a este atributo y, por otra parte, porque Google lo tiene muy en cuenta para posicionar la imagen (en la
búsqueda de imágenes).
Los atributos height y width te permiten especificar las dimensiones a las que ajustar la imagen en el
navegador. De no ser esas las dimensiones originales de la imagen, el navegador reducirá o ampliará la
imagen, según corresponda, para ajustarla a estas dimensiones.
No obstante, te recomiendo evitar usar este recurso y usar mejor reglas CSS para dar los detalles de la
maquetación de tus imágenes. En el apartado de diseño, retomaré el tema CSS.
Esto es tan simple como usar la imagen como contenido del enlace:
La tecnología ha avanzado mucho y es realmente simple trabajar con audio y vídeo en la web.
Insertar ficheros alojados por ti de audio y video en HTML (normalmente con formatos MP3 y MP4).
Insertar audio y vídeo alojado en otras plataformas de podcasting y vídeo como SoundCloud, iVoox,
Youtube, Vimeo y similares.
El típico hosting para blogs WordPress, por ejemplo, no está pensado para esto. Por tanto, alojar
ficheros audio y video uno mismo debería ser algo que se haga sólo en casos muy especiales que
realmente lo justifiquen.
Cómo insertar audio MP3 y otros formatos en HTML
Con HTML 5 nos lo han puesto muy fácil para usar audio en una página web.
Con esta estructura tu página mostrará el típico reproductor de audio con un botón de play, barra de
progreso, control de volumen, etc.:
<audio controls>
<source src="ejemplo.mp3" typ
Tu navegador no soporta este
</audio>
1 <audio controls>
4 </audio>
Si te fijas, el elemento clave aquí es source y funciona parecido a img: el atributo src indica la URL con la
ubicación del fichero de audio.
En el atributo type tenemos que especificar el tipo de formato de audio utilizado. En el ejemplo viene el
más usado, MP3, pero también se admiten los formatos OGG (valor “audio/ogg” para type) y WAV
(“audio/wav”).
Fíjate también en el texto de “Tu navegador…” que se ha añadido al elemento audio. Este texto
normalmente no se visualizará, es para el caso de navegadores muy antiguos que no soporten este
elemento de HTML 5, un escenario que hoy en día prácticamente puedes descartar. Pero, por si las
moscas, tienes este recurso.
Cómo insertar video MP4 y otros formatos en HTML
4 </video>
Como ves, este caso es similar al del audio no requiere mucha explicación. Añadir que también se
soporta el formato OGG.
Embeber los contenidos subidos a estas plataformas es muy fácil: todas ellas suelen tener una opción
para generar código HTML que simplemente se copia y pega en tu página.
Arriba puedes ver lo que sucede en el caso de YouTube cuando se elige la opción de “compartir” debajo
de un vídeo y, a continuación, “insertar”. En las demás plataformas es similar.
Esto tiene, además, la ventaja de que los reproductores ya son específicos de la plataforma y,
normalmente, mucho mejores y más atractivos visualmente que los reproductores que se usan por
defecto en HTML 5.
El último tipo de elemento que nos falta por ver para tener vistos todos los esenciales de una página
web son los formularios de HTML.
Este es, además, un elemento muy peculiar porque introduce algo que ha revolucionado la web y la
forma de consumir contenido en Internet: la interactividad con el usuario. Sin esto, no podrían existir
cosas como las redes sociales, blog o foros, por ejemplo.
Es decir, los formularios HTML hacen posible que un usuario envíe información a una web. El recuadro
de Instagram, Facebook o Twitter en el que realizas tus publicaciones son ejemplos de formularios HTML.
Otros ejemplos muy típicos son las secciones de comentarios como en este mismo blog, los formularios
en las tiendas online para realizar tus pedidos, formularios de contacto, los popups típicos de los blogs
para el alta en una lista de correo, etc.
1 <form action="https://miweb.com/contacto/solicitud">
2 <p>Tu nombre:</p>
6 <p>Asunto de tu solicito:</p>
8 <p>Texto de tu solicitud:</p>
11 </form>
Puedes ver una versión real de un formulario así en prácticamente cualquier sitio web.
Es muy sencillo: con los elementos input podemos crear campos en la página que recogen la
información que el usuario introduce, una información estructurada que puede ser procesada por una
máquina.
En el momento que el usuario haga clic en el botón del formulario, esta información se envía a la URL
especificada en el atributo action de la etiqueta form.
Esta información te la puedes imaginar estructurada como una hoja Excel con dos columnas: una con los
nombre de los campos (atributo name de los elementos input) y otra con el valor (lo que el usuario haya
tecleado en el formulario).
Lo que sucede a partir de ahora, en realidad, ya se sale de este post porque ya estamos en el servidor,
ya no estamos en la página, la página ya ha hecho su trabajo: enviar al servidor esta información.
En el ejemplo anterior, algo típico sería un programa que componga con esta información un correo
electrónico y lo envíe a una dirección de email del propietario de la web previamente configurada. Así
éste recibirá cómodamente lo que la gente envía desde la web. Eso es lo que hacen básicamente los
típicos plugins de formularios de contacto en WordPress, por ejemplo.
Otro ejemplo de un procesado un poco más sofisticado serían los comentarios de un sitio web puesto
que éstos (como en WordPress) se graban típicamente en una base de datos y cuando se visualiza esa
página se vuelven a cargar de la base de datos. Así esta parte se mantiene dinámica, puede irse
añadiendo más y más comentarios.
Los códigos de colores en HTML
Existen diferentes sistemas para codificar colores. A efectos de la web, nos
interesa el sistema RGB (de “Red Green Blue” en inglés, “rojo verde azul” en
español) que es como el ojo humano percibe el color (con células
fotoreceptoras sensibles a cada uno de estos colores) y el que usan también
las pantallas de casi todos los dispositivos.
Cabe destacar que muchas veces no se usan los números “normales” del
sistema decimal a los que estamos acostumbrados y que he usado en los
ejemplos anteriores, sino que se usa también mucho el sistema de
numeración hexadecimal, lo puedes reconocer porque con frecuencia se le
antepone a un número así la almohadilla (#).
Si los números hexadecimales son nuevos para ti, mi consejo es que no los
uses y sigas utilizando los números normales.
En cualquier caso, si los necesitas, existen convertidores online como éste que
te convierten un color RGB en hexadecimal en un triplete de números
decimales.
Por suerte, existe una infinidad de tablas y selectores de color online que te
permiten obtener estos códigos de una manera muy fácil. El HTML Color
Picker de W3CSchools que puedes ver arriba, por ejemplo, lo encuentro muy
completo.
En esto ayudan mucho los esquemas o paletas de colores que proponen una
combinación de colores ya hecha, una plantilla podríamos decir, con una
combinación que resulta armonioso. La idea es que uses solamente los colores
de esa paleta en tu web ya que así podrás estar seguro de un buen resultado
estético.
Captura de la herramienta Coolors (coolors.co), una de las mejores herramientas de paletas de colores
que existen.
<h2 style=”color=rgb(13,44,84)”
<body style=”color=#FFB400”>
1 <body style=”color=#FFB400”>
Imagínate, por ejemplo, tener que aplicar el mismo color cientos de veces al
cada párrafo, desesperante, ¿no?
De hecho, esto no es un problema nuevo. Esto ya se daba en los tradicionales
editores de texto visuales como Word, OpenOffice, etc.
Con un “estilo” se define una vez la apariencia de cada elemento. Algo así
como lo siguiente:
¿Qué conseguimos?
Que con una definición de estilo así definimos una vez el diseño de nuestro
sitio y a partir de ahí, nos podemos olvidar del diseño y centrarnos en crear el
contenido, el diseño se aplicará automáticamente según el tipo de elemento del
que se trate.
Si hay algo que te recomiendo si tienes una web, es aprender CSS y HTML.
Incluso aunque uses una plataforma como WordPress o Joomla, no hay color.
Además, mucha gente tiene el concepto erróneo de que hay que pagar a
Google para aparecer en sus resultados de búsqueda, pero eso no es así:
posicionar tu página en Google, es decir, puedes hacer que tu página web
aparezca en google gratis.
Lo que se paga son los anuncios online (Google AdWords) que aparecen
arriba del todo y están marcados como tales, pero posicionar tu página web en
Google es gratis.
El quid de la cuestión es que tienes que tener claro para qué búsqueda o
búsquedas en Google quieres posicionar tu página, es decir, a qué
intenciones de búsqueda responde. Las palabras que usa la gente en esas
búsquedas conforman las palabras clave para las cuales te quieres posicionar
tu página, posiblemente hayas oído o leído sobre esto alguna vez.
Por tanto, se trata de demostrar a Google que tu post encaja con estas
palabras clave, cómo se hace y todo lo que conlleva te lo explico aquí a fondo:
Más formación
El tutorial CSS de Ciudadano 2.0 para una introducción desde cero al
mundo CSS. Tan solo con la lectura de este post y un poco de guste ya
deberías ser capaz de hacer páginas con una estética sencilla, pero
agradable y a la altura de los tiempos actuales.
Librosweb: esto es una web en español simplemente genial con varios
libros online sobre HTML, CSS y muchas más tecnologías de la web. Te
recomiendo en particular como continuación a este post el libro de
Introducción a XHTML. Por otra parte, con el libro Introducción a CSS vas
a poder aprender todo lo que necesitas en el lado del CSS.
W3CSchools: una web en inglés increíblemente completa que abarca
también todas las tecnologías importantes. Pero, a diferencia de la anterior
no te la recomiendo para aprender desde cero o como continuación a este
post (para eso, Librosweb), te la recomiendo como web de consulta. Es
decir, por ejemplo, si quieres tener más información sobre elemento HTML
para saber cuáles son los atributos que tiene, ver ejemplos, etc. Entonces,
éste es el recurso que usar. Además, cuenta con un editor online que te
permite probar y experimentar con el código.
Herramientas
Los inspectores de código de los navegadores: son herramientas que
incorporan los tres navegadores más usados del mercado: Chrome,
Firefox e Internet Explorer (ahora Edge). En todos ellos los activas con
la tecla F12 o desde el menú correspondiente. Te permiten ver el código
HTML y CSS y muchas cosas más de una manera muy estructura, una
manera fantástica de “espiar” otras páginas y aprender cómo están
hechas. Abajo viene un vídeo para ver cómo funciona esto.
Brackets: arriba ya te he recomendado editores HTML con los que
trabajar. Pero para cuando ya te encuentres en una fase más avanzada
de conocimiento, te quiero recomendar este editor muy popular entre los
profesionales y también libre y gratuito.
La etiqueta BUTTON se utiliza con una apertura de etiqueta <BUTTON> y una de cierre </BUTTON>. Entre
las dos etiquetas, de apertura y cierre, se coloca el contenido que irá dentro del botón.
Tiene la particularidad que se pueden colocar dentro del botón los contenidos que se desee, es decir, entre la
etiqueta de apertura y cierre se puede colocar texto a voluntad, pero también otras etiquetas HTML, como
imágenes, saltos de línea, negritas o lo que podamos necesitar.
Veamos un ejemplo:
<button>
Hola esto es un <b>botón</b>
< br>
< br>
Puedo poner saltos de línea en él!
< hr>
Y otras cosas
< br>
< img src="http://www.desarrolloweb.com/images/logo_desarrollo_web.gif"
width="261" height="35" alt="">
< /button>
Como se puede ver, permite aportar bastante creatividad a los botones que incorporemos en páginas web,
mucho más que la etiqueta INPUT, que sólo permite colocar texto dentro del botón:
Atributos de BUTTON
name: sirve para darle un nombre al botón. Al enviarse el formulario se enviarán los datos del bot´n bajo
este nombre.
type: sirve para indicar el tipo de botón, que podría ser: button para un botón normal, reset para un botón de
borrado de datos del formulario y submit para un botón de envío de formulario.
value: para especificar el valor de un botón. El valor es lo que se enviará por formulario, en el momento del
submit. Pero ojo aquí porque puede haber diferencias entre navegadores, que veremos a continuación.
disabled: este atributo sirve para hacer que el botón se encuentre deshabilitado.
Lamentablemente, la etiqueta BUTTON tiene diversas interpretaciones por parte de los distintos navegadores
del mercado. Desde desarrollo web .com advertimos que se debe tener cuidado cuando la usemos, porque estas
incompatibilidades podrían perjudicar el buen funcionamiento de la página.
1. Por defecto, el atributo type de BUTTON tiene el valor "button" en todos los navegadores, salvo Internet
Explorer, al menos hasta la versión 7, que le da por defecto valor "submit". Esto lo solucionamos
simplemente colocando siempre el atributo type con el valor que queramos.
2. Cuando se envía un formulario con un botón creado con la etiqueta BUTTON, Internet Explorer envía como
value del botón lo que hay escrito en él, es decir, el texto que haya entre <BUTTON> y </BUTTON> con
todas las etiquetas que pueda haber dentro. Los demás navegadores envían el atributo value que tenga el
botón, aunque sólo hacen esto cuando el botón es de type="submit" y si se ha enviado el formulario
pulsando ese botón.
De estas dos incompatibilidades, la segunda tiene más difícil solución, porque deberíamos saber
el navegador que está utilizando el usuario para poder saber el comportamiento del BUTTON. Es
por ello que lo más recomendable es no basar el funcionamiento de scripts en formularios en esta
etiqueta. Por lo demás, tiene algunas funcionalidades interesantes que podrían venirnos bien el
algún momento.