Introducción a HTML: Estructura y Etiquetas
Traducido por
ScribdTranslationsIntroducción a HTML: Estructura y Etiquetas
Traducido por
ScribdTranslationsIntroducción al HTML
¿Qué es HTML?
HTML es un lenguaje de marcado para describir documentos web (páginas web).
HTML significa Lenguaje de Marcado de Hipertexto
Un lenguaje de marcado es un conjunto de etiquetas de marcado.
Los documentos HTML están descritos por etiquetas HTML
Cada etiqueta HTML describe diferentes contenidos del documento
Ejemplo de HTML
Un pequeño documento HTML:
<!DOCTYPEhtml>
<html>
<head>
<title>Page Title</title>
</cabeza>
<body>
<h1>Mi Primer Encabezado</h1>
<p>Mi primer párrafo.</p>
</cuerpo>
</html>
Inténtalo tú mismo »
Ejemplo explicado
TheDOCTYPEdeclaration defines the document type to be HTML
El texto entre <html> y </html> describe un documento HTML
El texto entre <head> y </head> proporciona información sobre el
documento
The text between<title>and</title>provides a title for the document
El texto entre <body> y </body> describe la página visible
contenido
El texto entre <h1> y </h1> describe un encabezado
El texto entre <p> y </p> describe un párrafo
Usando esta descripción, un navegador web puede mostrar un documento con un encabezado
y un párrafo.
EtiquetasHTML
Las etiquetas HTML son palabras clave (nombres de etiquetas) rodeadas por corchetes angulares:
<tagname>content</tagname>
Las etiquetas HTML normalmente vienen en pares como <p> y </p>
La primera etiqueta en un par es la etiqueta de inicio, la segunda etiqueta es la etiqueta de fin.
La etiqueta de cierre se escribe como la etiqueta de apertura, pero con una barra antes de la etiqueta.
nombre
La etiqueta de inicio a menudo se llama la etiqueta de apertura. La etiqueta de cierre a menudo se llama la etiqueta de cierre.
Navegadores Web
El propósito de un navegador web (Chrome, IE, Firefox, Safari) es leer HTML
documentos y muéstralos.
El navegador no muestra las etiquetas HTML, pero las utiliza para determinar cómo
para mostrar el documento:
Estructura de Página HTML
A continuación se muestra una visualización de la estructura de una página HTML:
<html>
<head>
<title>Page title</title>
</cabeza>
<cuerpo>
<h1>Este es un encabezado</h1>
<p>Este es un párrafo.</p>
<p>Este es otro párrafo.</p>
</cuerpo>
</html>
Solo se muestra el área <body> (el área blanca) en el navegador.
La declaración <!DOCTYPE>
La declaración <!DOCTYPE> ayuda al navegador a mostrar una página web correctamente.
Hay diferentes tipos de documentos en la web.
Para mostrar un documento correctamente, el navegador debe conocer tanto el tipo como la versión.
La declaración de tipo de documento no es sensible a mayúsculas y minúsculas. Todos los casos son aceptables:
<!DOCTYPE html>
<!DOCTYPEHTML>
<!doctypehtml>
<!DoctypeHtml>
Declaraciones Comunes
HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN"
[Link]
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//ES"
[Link]
All tutorials and examples at W3Schools use HTML5.
Versiones HTML
Desde los primeros días de la web, ha habido muchas versiones de HTML:
Versión Year
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014
Ejemplos Básicos de HTML
No te preocupes si estos ejemplos usan etiquetas que no has aprendido.
Aprenderás sobre ellos en los próximos capítulos.
Documentos HTML
Todos los documentos HTML deben comenzar con una declaración de tipo: <!DOCTYPE html>.
El documento HTML en sí comienza con <html> y termina con </html>.
La parte visible del documento HTML está entre <body> y </body>.
Ejemplo
<!DOCTYPEhtml>
<html>
<cuerpo>
<h1>Mi Primer Título</h1>
<p>Mi primer párrafo.</p>
</body>
</html>
Inténtalo tú mismo »
Encabezados HTML
Los encabezados HTML se definen con las etiquetas <h1> a <h6>:
Ejemplo
<h1>Este es un encabezado</h1>
<h2>Este es un encabezado</h2>
<h3>Este es un encabezado</h3>
Pruébalo tú mismo »
Párrafos HTML
Los párrafos HTML se definen con la etiqueta <p>:
Ejemplo
<p>Este es un párrafo.</p>
<p>Este es otro párrafo.</p>
Pruébalo tú mismo »
Enlaces HTML
Los enlaces HTML se definen con la etiqueta <a>:
Ejemplo
<ahref="[Link] es un enlace</a>
Prueba tú mismo »
El destino del enlace se especifica en el atributo href.
Los atributos se utilizan para proporcionar información adicional sobre los elementos HTML.
Imágenes HTML
Las imágenes HTML se definen con la etiqueta <img>.
The source file (src), alternative text (alt), and size (widthandheight) are
proporcionado como atributos:
Ejemplo
<img src="[Link]" alt="[Link]" width="104" height="142">
>
Elementos HTML
Los elementos HTML se escriben con una etiqueta de apertura, con una etiqueta de cierre, con
el contenido en medio:
<tagname>content</tagname>
El elemento HTML es todo desde la etiqueta de inicio hasta la etiqueta de fin:
<p>Mi primer párrafo en HTML.</p>
Inicio etiqueta Contenido del elemento Etiqueta de cierre
<h1> Mi primer encabezado </h1>
<p> Mi primer párrafo. </p>
<br>
Algunos elementos HTML no tienen una etiqueta de cierre.
Elementos HTML anidados
Los elementos HTML pueden estar anidados (los elementos pueden contener elementos).
Todos los documentos HTML consisten en elementos HTML anidados.
Este ejemplo contiene 4 elementos HTML:
Ejemplo
<!DOCTYPEhtml>
<html>
<cuerpo>
<h1>Mi Primer Encabezado</h1>
<p>Mi primer párrafo.</p>
</body>
</html>
Try it yourself »
Ejemplo de HTML Explicado
El elemento <html> define todo el documento.
Tiene una etiqueta de inicio <html> y una etiqueta de cierre </html>.
El elementcontenidoes otro elemento HTML (el elemento <body>).
<html>
<cuerpo>
<h1>Mi Primer Encabezado</h1>
<p>Mi primer párrafo.</p>
</cuerpo>
</html>
El elemento <body> define el cuerpo del documento.
Tiene una etiqueta de inicio <body> y una etiqueta de cierre </body>.
El contenido del elemento son otros dos elementos HTML (<h1> y <p>).
<cuerpo>
<h1>Mi Primer Título</h1>
<p>Mi primer párrafo.</p>
</cuerpo>
El elemento <h1> define un encabezado.
Tiene una etiqueta de inicio <h1> y una etiqueta de cierre </h1>.
El contenido del elemento es: Mi Primer Título.
<h1>Mi Primer Encabezado</h1>
El <p>elemento define un párrafo.
Tiene una etiqueta de inicio <p> y una etiqueta de fin </p>.
The elementcontentis: My first paragraph.
<p>Mi primer párrafo.</p>
No olvides la etiqueta de cierre
Algunos elementos HTML se mostrarán correctamente, incluso si olvidas la etiqueta de cierre:
Ejemplo
<html>
<cuerpo>
<p>Este es un párrafo</p>
Esto es un párrafo
</body>
</html>
Pruébalo tú mismo »
The example above works in all browsers, because the closing tag is considered
opcional.
Nunca confíes en esto. Puede producir resultados inesperados y/o errores si tú
forget the end tag.
Elementos HTML vacíos
Los elementos HTML sin contenido se llaman elementos vacíos.
<br> es un elemento vacío sin una etiqueta de cierre (la etiqueta <br> define una línea
break).
Los elementos vacíos pueden ser "cerrados" en la etiqueta de apertura así: <br />.
HTML5 no requiere que los elementos vacíos estén cerrados. Pero si deseas ser más estricto
validación, o necesitas hacer tu documento legible por los analizadores XML, tú
deberían cerrarse todos los elementos HTML.
Consejo de HTML: Usa etiquetas en minúsculas
Las etiquetas HTML no son sensibles a las mayúsculas: <P> significa lo mismo que <p>.
El estándar HTML5 no requiere etiquetas en minúsculas, pero
W3C recomienda minúsculas en HTML4 y exige minúsculas para un cumplimiento más estricto
tipos de documento como XHTML.
Atributos HTML
« Anterior
Siguiente Capítulo »
Los atributos proporcionan información adicional sobre los elementos HTML.
Atributos HTML
Los elementos HTML pueden tener atributos
Los atributos proporcionan información adicional sobre un elemento
Los atributos siempre se especifican en la etiqueta de inicio
Los atributos vienen en pares de nombre/valor como: nombre="valor"
El atributo lang
El idioma del documento se puede declarar en la etiqueta <html>.
El idioma se declara en el atributo lang.
Declarar un idioma es importante para las aplicaciones de accesibilidad (lectores de pantalla)
y motores de búsqueda:
<!DOCTYPEhtml>
<htmllang="es-ES">
<cuerpo>
<h1>Mi Primer Encabezado</h1>
<p>Mi primer párrafo.</p>
</cuerpo>
</html>
Las dos primeras letras especifican el idioma (es). Si hay un dialecto, usa dos.
más letras (EE. UU.).
El atributo título
Los párrafos HTML se definen con la etiqueta <p>.
En este ejemplo, el elemento <p> tiene un atributo title. El valor de
attribute is "About W3Schools":
Ejemplo
<ptitle="About W3Schools">
W3Schools es un sitio para desarrolladores web.
Proporciona tutoriales y referencias que cubren
many aspects of web programming,
incluyendo HTML, CSS, JavaScript, XML, SQL, PHP, ASP, etc.
</p>
Pruébalo tú mismo »
Cuando mueves el ratón sobre el elemento, el título se mostrará como un tooltip.
El atributo href
Los enlaces HTML se definen con la etiqueta <a>. La dirección del enlace se especifica en
thehrefattribute:
Ejemplo
<ahref="[Link] es un enlace</a>
Pruébalo tú mismo »
Aprenderás más sobre enlaces y la etiqueta <a> más adelante en este tutorial.
Atributos de Tamaño
Las imágenes en HTML se definen con la etiqueta <img>.
The filename of the source (src), and the size of the image (widthandheight)
se proporcionan como atributos:
Ejemplo
<img src="[Link]" width="104" height="142">
Pruébalo tú mismo »
El tamaño de la imagen se especifica en píxeles: ancho="104" significa 104 píxeles en pantalla
ancho.
Aprenderás más sobre imágenes y la etiqueta <img> más adelante en este tutorial.
El atributo alt
El atributo alt especifica un texto alternativo que se debe usar, cuando un HTML
el elemento no puede ser mostrado.
El valor del atributo puede ser leído por "lectores de pantalla". De esta manera, alguien
"escuchando" la página web, es decir, una persona ciega, puede "oír" el elemento.
Ejemplo
<imgsrc="[Link]"alt="[Link]"width="104"height="142"
>
Inténtalo tú mismo »
Sugerimos: Usa siempre minúsculas
Atributos
El estándar HTML5 no requiere nombres de atributos en minúsculas.
El atributo title se puede escribir en mayúsculas o minúsculas
likeTitleand/orTITLE.
W3C recomienda minúsculas en HTML4, y exige minúsculas para estructuras más estrictas.
tipos de documentos como XHTML.
Las minúsculas son las más comunes. Las minúsculas son más fáciles de escribir.
En W3Schools siempre usamos nombres de atributos en minúsculas.
Sugerimos: Siempre citar el atributo
Valores
El estándar HTML5 no requiere comillas alrededor de los valores de los atributos.
El atributo href, demostrado arriba, se puede escribir como:
Ejemplo
<ahref=[Link]
Inténtalo tú mismo »
W3C recomienda comillas en HTML4 y exige comillas para una mayor rigurosidad
tipos de documentos como XHTML.
A veces es necesario usar comillas. Esto no se mostrará correctamente,
porque contiene un espacio:
Ejemplo
<ptitle=About santosh>
Inténtalo tú mismo »
Usar comillas es lo más común. Omitir comillas puede producir errores.
En W3Schools siempre usamos comillas alrededor de los valores de los atributos.
¿Comillas simples o dobles?
Las comillas dobles son las más comunes en HTML, pero las comillas simples también pueden ser
usado.
In some situations, when the attribute value itself contains double quotes, it is
es necesario utilizar comillas simples:
<ptitle='John "ShotGun" Nelson'>
O viceversa:
<ptitle="John 'ShotGun' Nelson">
Resumen del capítulo
Todos los elementos HTML pueden tener atributos
El atributo title de HTML proporciona información adicional de "tool-tip".
El atributo HTMLhref proporciona información de dirección para enlaces
Los atributos de ancho y alto de HTML proporcionan información de tamaño para
imágenes
El atributo HTMLalt proporciona texto para los lectores de pantalla
¡Pruébate con ejercicios!
Ejercicio 1 »Ejercicio 2 »Ejercicio 3 »Ejercicio 4 »Ejercicio 5 »
Atributos HTML
A continuación se presenta una lista alfabética de algunos atributos que a menudo se utilizan en HTML:
Atributo Description
alternativo Especifica un texto alternativo para una imagen
discapacitado Especifica que un elemento de entrada debe estar desactivado
href Especifica la URL (dirección web) para un enlace
id Especifica un ID único para un elemento
src Especifica la URL (dirección web) para una imagen
estilo Specifies an inline CSS style for an element
title Especifica información adicional sobre un elemento (mostrada como un mensaje de ayuda)
Encabezados HTML
Los encabezados se definen con las etiquetas <h1> a <h6>.
<h1> define el encabezado más importante. <h6> define el menos importante
encabezado.
Ejemplo
<h1>Este es un encabezado</h1>
<h2>This is a heading</h2>
<h3>Este es un encabezado</h3>
Inténtalo tú mismo »
Nota: Los navegadores añaden automáticamente un espacio vacío (un margen) antes y
después de cada encabezado.
Los encabezados son importantes
Usa encabezados HTML solo para encabezados. No uses encabezados para hacer
textBIGorbold.
Los motores de búsqueda utilizan tus encabezados para indexar la estructura y el contenido de tu
páginas web.
Los usuarios hojean sus páginas por sus encabezados. Es importante usar encabezados para mostrar
la estructura del documento.
Los encabezados h1 deben ser encabezados principales, seguidos de encabezados h2, luego los menos
importante h3, y así sucesivamente.
Reglas Horizontales HTML
La etiqueta <hr> crea una línea horizontal en una página HTML.
El elemento hr se puede utilizar para separar contenido:
Ejemplo
<p>Este es un párrafo.</p>
<hr>
<p>Este es un párrafo.</p>
<hr>
<p>Este es un párrafo.</p>
Pruébalo tú mismo »
El elemento <head> de HTML
El elemento <head> de HTML no tiene nada que ver con los encabezados de HTML.
El elemento <head> de HTML contiene metadatos. Los metadatos no se muestran.
El elemento <head> de HTML se coloca entre la etiqueta <html> y el <body>
tag:
Ejemplo
<!DOCTYPEhtml>
<html>
<head>
<title>My First HTML</title>
<metacharset="UTF-8">
</cabeza>
<body>
.
.
.
Inténtalo tú mismo »
Los metadatos significan datos sobre datos. Los metadatos HTML son datos sobre el documento HTML.
El elemento HTML <title>
El elemento <title> de HTML es meta datos. Define el título del documento HTML.
El título no se mostrará en el documento, pero podría mostrarse en el
pestaña del navegador.
El elemento HTML <meta>
El elemento <meta> de HTML también es metadatos.
Se puede usar para definir el conjunto de caracteres y otra información sobre el
Documento HTML.
Más elementos meta
En el capítulo sobre estilos HTML descubriste más elementos meta:
El elemento <style> de HTML se utiliza para definir hojas de estilo CSS internas.
El elemento HTML <link> se utiliza para definir hojas de estilo CSS externas.
Consejo de HTML - Cómo Ver el Código Fuente de HTML
¿Alguna vez has visto una página web y te has preguntado "¡Hey! ¿Cómo hicieron eso?"
Para averiguarlo, haz clic derecho en la página y selecciona 'Ver código fuente de la página' (en Chrome) o
"Ver fuente" (en IE), o similar en otro navegador. Esto abrirá una ventana
que contiene el código HTML de la página.
TestYourself with Exercises!
Ejercicio 1 » Exercise 2 » Ejercicio 3 » Exercise 4 »
Referencia de Etiquetas HTML
La referencia de etiquetas de W3Schools contiene información adicional sobre estas etiquetas y
sus atributos.
Aprenderás más sobre etiquetas y atributos HTML en los próximos capítulos de esto.
tutorial.
Etiqueta Description
<html> Define un documento HTML
<cuerpo> Define el cuerpo del documento
<head> Define el elemento head del documento
<h1> to <h6> Define los encabezados HTML
<hr> Define una línea horizontal
Párrafos HTML
« Anterior
Próximo Capítulo »
Los documentos HTML se dividen en párrafos.
Párrafos HTML
El elemento HTML<p> define un párrafo.
Ejemplo
<p>Este es un párrafo</p>
<p>Este es otro párrafo</p>
Inténtalo tú mismo »
Los navegadores añaden automáticamente una línea vacía antes y después de un párrafo.
Visualización HTML
No puedes estar seguro de cómo se mostrará el HTML.
Las pantallas grandes o pequeñas, y las ventanas redimensionadas crearán resultados diferentes.
Con HTML, no puedes cambiar la salida añadiendo espacios extra o líneas extra.
en tu código HTML.
El navegador eliminará los espacios extra y las líneas adicionales cuando la página sea
mostrado.
Cualquier número de espacios y cualquier número de saltos de línea cuentan como solo un espacio.
Ejemplo
<p>
Este párrafo
contiene muchas líneas
en el código fuente,
pero el navegador
lo ignora.
</p>
<p>
Este párrafo
contiene muchos espacios
en la fuente código
pero el navegador
lo ignora.
</p>
Inténtalo tú mismo »
Don't Forget the EndTag
La mayoría de los navegadores mostrarán HTML correctamente incluso si olvidas la etiqueta de cierre:
Ejemplo
<p>Este es un párrafo</p>
Este es otro párrafo
Pruébalo tú mismo »
El ejemplo anterior funcionará en la mayoría de los navegadores, pero no confíes en él.
Olvidar la etiqueta de cierre puede producir resultados o errores inesperados.
Versiones más estrictas de HTML, como XHTML, no te permiten omitir la etiqueta de cierre.
Saltos de línea HTML
El elemento HTML<br>define un salto de línea.
Utiliza <br> si deseas un salto de línea (una nueva línea) sin comenzar una nueva
paragraph:
Ejemplo
<p>Este es<br>un párrafo<br>con saltos de línea</p>
Pruébalo tú mismo »
El elemento <br> es un elemento HTML vacío. No tiene etiqueta de cierre.
El Problema del Poema
Ejemplo
<p>Este poema se mostrará como una línea:</p>
<p>
Mi Bonnie está sobre el océano.
Mi Bonnie yace sobre el mar.
My Bonnie lies over the ocean.
Oh, trae de vuelta a mi Bonnie a mí.
</p>
Inténtalo tú mismo »
El elemento HTML <pre>
El elemento HTML <pre> define texto preformateado.
El texto dentro de un elemento <pre> se muestra en una fuente de ancho fijo (generalmente
Courier), y preserva tanto los espacios como los saltos de línea:
Ejemplo
<pre>
Mi Bonnie yace sobre el océano.
Mi Bonnie yace sobre el mar.
My Bonnie lies over the ocean.
Oh, devuélveme a mi Bonnie.
</pre>
Inténtalo tú mismo »
¡Pruévate con ejercicios!
Ejercicio 1 » Ejercicio 2 » Ejercicio 3 » Ejercicio 4 »
HTMLTag Reference
W3Schools' tag reference contains additional information about HTML elements
y sus atributos.
Tag Description
<p> </p> Define un párrafo
<br> Inserta un salto de línea
<pre> Define texto preformateado
HTML Styles
« Anterior
Siguiente capítulo »
Estilos HTML
Yo soy rojo
Estoy triste
Pruébalo tú mismo »
El Atributo de Estilo HTML
Configurar el estilo de un elemento HTML se puede hacer con el atributo style.
El atributo de estilo HTML tiene la siguiente sintaxis:
style="property:value;"
La propiedad es una propiedad CSS. El valor es un valor CSS.
Aprenderás más sobre CSS más adelante en este tutorial.
Color de fondo HTML
Thebackground-colorproperty defines the background color for an HTML
element:
Este ejemplo establece el fondo de una página en gris claro:
Ejemplo
<bodystyle="background-color:gris_claro;">
<h1>Este es un encabezado</h1>
<p>Este es un párrafo.</p>
</cuerpo>
Inténtalo tú mismo »
Color de texto HTML
La propiedad color define el color del texto para un elemento HTML:
Ejemplo
<h1 style="color:blue;">Este es un encabezado</h1>
<p style="color:red;">Este es un párrafo.</p>
Inténtalo tú mismo »
Fuentes HTML
La propiedad font-family define la fuente que se utilizará para un elemento HTML:
Ejemplo
Este es un encabezado
<pstyle="font-family:courier;">This is a paragraph.</p>
Prueba tú mismo »
Tamaño del texto HTML
La propiedad font-size define el tamaño del texto para un elemento HTML:
Ejemplo
<h1 style="font-size:300%;">Este es un encabezado</h1>
<p style="font-size:160%;">Este es un párrafo.</p>
Inténtalo tú mismo »
Alineación de Texto HTML
La propiedad text-align define la alineación horizontal del texto para un HTML
element:
Ejemplo
<h1 style="text-align:center;">Encabezado centrado</h1>
<p>Este es un párrafo.</p>
Pruébalo tú mismo »
Resumen del capítulo
Usa el atributo de estilo para dar estilo a los elementos HTML
Usa el color de fondo para el color de fondo
Usa color para los colores del texto
Usa font-family para las fuentes de texto
Usarfuente-tamaño para tamaños de texto
Usa text-align para la alineación de texto
Elementos de Formato de Texto HTML
« Anterior
Próximo Capítulo »
Formato de texto
Este texto está en negrita
Este texto está en cursiva
Esto essuperíndice
Elementos de Formato HTML
En el capítulo anterior, aprendiste sobre el estilo HTML, usando el estilo HTML
atributo.
HTML también define elementos especiales, para definir texto con un significado especial.
HTML utiliza elementos como <b> e <i> para dar formato a la salida,
texto en negrita o cursiva.
Los elementos de formato fueron diseñados para mostrar tipos especiales de texto:
Texto en negrita
Texto importante
Texto en cursiva
Texto enfatizado
Texto marcado
Texto pequeño
Texto eliminado
Texto insertado
Subíndices
Superíndices
HTMLNegritaYFormatoFuerte
El elemento HTML<b>define texto en negrita, sin ninguna importancia extra.
Ejemplo
<p>Este texto es normal.</p>
<p><b>Este texto está en negrita</b>.</p>
Prueba tú mismo »
El elemento <strong>define texto fuerte, con semántica añadida
importancia "fuerte".
Ejemplo
<p>Este texto es normal.</p>
<p><strong>Este texto es fuerte</strong>.</p>
Prueba tú mismo »
HTMLCursivaYFormatoEnfático
El elemento HTML <i> define texto en cursiva, sin ninguna importancia adicional.
Ejemplo
<p>Este texto es normal.</p>
<p><i>Este texto está en cursiva</i>.</p>
Prueba tú mismo »
El elemento HTML<em>define el texto enfatizado, con un significado añadido
importancia.
Ejemplo
<p>This text is normal.</p>
<p><em>Este texto está enfatizado</em>.</p>
Inténtalo tú mismo »
Los navegadores muestran <strong> como <b>, y <em> como <i>.
Sin embargo, hay una diferencia en el significado de estas etiquetas: <b> y <i> definen negrita
pero <strong> y <em> significan que el texto es "importante".
HTMLPequeñoFormato
El elemento HTML <small> define texto pequeño:
Ejemplo
<h2>HTML<small>Pequeño</small>Formato</h2>
Inténtalo tú mismo »
Formato Marcado HTML
El elemento HTML<mark> define texto marcado o destacado:
Ejemplo
<h2>HTML<mark>Marcado</mark>Formato</h2>
Inténtalo tú mismo »
HTMLDeletedFormatting
El elemento HTML <del> define texto eliminado (retirado).
Ejemplo
<p>Mi color favorito es<del>azul</del>rojo.</p>
Inténtalo tú mismo »
HTMLInsertedFormatting
El elemento HTML<ins>define texto insertado (agregado).
Example
<p>Mi <ins>color</ins> favorito es rojo.</p>
Inténtalo tú mismo »
HTMLSubíndiceFormato
El elemento HTML<sub>define texto en subíndice.
Ejemplo
<p>Este es<sub>subindice</sub>texto.</p>
Pruébalo tú mismo »
Formato
Superíndice
HTML
El elemento HTML<sup>define texto en superíndice.
Ejemplo
<p>Este es<sup>texto en superíndice</sup>.</p>
Inténtalo tú mismo »
¡Pruébate con ejercicios!
Ejercicio 1 » Ejercicio 2 » Ejercicio 3 » Ejercicio 4 » Ejercicio 5 »
Elementos de Formato de Texto HTML
Etiqueta Descripción
<b> Define texto en negrita
<em> Define texto enfatizado
<i> Define texto en cursiva
<pequeño> Define texto más pequeño
<strong> Define texto importante
<sub> Define texto con subíndice
<sup> Define texto con superíndice
<ins> Define el texto insertado
<del> Texto eliminado definido
<mark> Define texto marcado/resaltado
Comentarios HTML
« Anterior
Próximo Capítulo »
Las etiquetas de comentario <!-- y --> se utilizan para insertar comentarios en HTML.
Etiquetas de Comentario HTML
Puedes agregar comentarios a tu código HTML utilizando la siguiente sintaxis:
<!-- Escribe tus comentarios aquí -->
Nota: Hay un signo de exclamación (!) en la etiqueta de apertura, pero no en la etiqueta de cierre.
Comments are not displayed by the browser, but they can help document your
HTML.
Con comentarios puedes colocar notificaciones y recordatorios en tu HTML:
Ejemplo
<!-- Este es un comentario -->
<p>Este es un párrafo.</p>
<!-- Recuerda agregar más información aquí -->
Inténtalo tú mismo »
Los comentarios también son excelentes para depurar HTML, porque puedes comentar.
Líneas de código HTML, una a la vez, para buscar errores:
Ejemplo
<!-- Do not display this at the moment
<img border="0" src="pic_mountain.jpg" alt="Montaña">
-->
Pruébalo tú mismo »
Comentarios Condicionales
Podrías encontrarte con comentarios condicionales en HTML:
<![if IE 8]>
.... algo de HTML aquí ....
<![endif]-->
Los comentarios condicionales definen etiquetas HTML que serán ejecutadas por Internet Explorer
solo.
Etiquetas del Programa de Software
Las etiquetas de comentarios HTML también pueden ser generadas por varios software HTML
programas.
Por ejemplo, etiquetas <!--webbot bot--> envueltas dentro de comentarios HTML por
FrontPage y Expression Web.
Como regla, dejemos que estas etiquetas permanezcan, para ayudar a apoyar el software que las creó.
Enlaces HTML
« Anterior
Próximo capítulo »
Los enlaces se encuentran en casi todas las páginas web. Los enlaces permiten a los usuarios hacer clic para navegar.
de página a página.
Enlaces HTML - Hipervínculos
Los enlaces HTML son hipervínculos.
Un hipervínculo es un texto o una imagen en la que puedes hacer clic y saltar a otro.
documento.
Enlaces HTML - Sintaxis
En HTML, los enlaces se definen con la etiqueta <a>:
<ahref="url">texto del enlace</a>
Ejemplo
<ahref="[Link] nuestro tutorial de HTML</a>
Inténtalo tú mismo »
El atributo href especifica la dirección de destino
[Link]
El texto del enlace es la parte visible (Visita nuestro tutorial de HTML).
Al hacer clic en el texto del enlace, será enviado a la dirección especificada.
The link text does not have to be text. It can be an HTML image or any other HTML ele
Sin una barra inclinada al final en las direcciones de las subcarpetas, podrías generar dos solicitudes a th
agregará automáticamente una barra inclinada al final de la dirección y luego creará una nueva solicitud.
Enlaces Locales
El ejemplo anterior utilizó una URL absoluta (una dirección web completa).
Un enlace local (enlace al mismo sitio web) se especifica con una URL relativa (sin
[Link]
Ejemplo
<ahref="html_images.asp">Imágenes HTML</a>
Prueba tú mismo »
Enlaces HTML - Colores
Cuando mueves el ratón sobre un enlace, normalmente sucederán dos cosas:
El puntero del ratón se convertirá en una manita.
El color del elemento enlace cambiará
Por defecto, un enlace aparecerá así (en todos los navegadores):
Un enlace no visitado está subrayado y en azul
Un enlace visitado está subrayado y en púrpura
Un enlace activo está subrayado y en rojo
Puedes cambiar los colores predeterminados, utilizando estilos:
Ejemplo
<style>
a:link{color:verde;background-color:transparente;text-decoration:none}
a:visitado{color:rosa;fondo:transparente;texto-decoración:ninguna}
a:hover{color:red;background-color:transparent;text-
decoración:subrayado}
a:active{color:amarillo;background-color:transparente;text-
decoration:underline}
</estilo>
Pruébalo tú mismo »
Enlaces HTML - El atributo target
El atributo target especifica dónde abrir el documento vinculado.
Este ejemplo abrirá el documento vinculado en una nueva ventana del navegador o en un
nueva pestaña:
Ejemplo
<ahref="[Link] W3Schools!
</a>
Inténtalo tú mismo »
Target Value Descripción
_en blanco Abre el documento vinculado en una nueva ventana o pestaña
_mismo Abre el documento vinculado en el mismo marco en el que se hizo clic (esto
_parent Abre el documento vinculado en el marco padre
_superior Abre el documento vinculado en el cuerpo completo de la ventana
framename Abre el documento vinculado en un marco nombrado
Si tu página web está bloqueada en un marco, puedes usar target="_top" para salir de él.
el marco:
Ejemplo
<ahref="[Link] de HTML5!
</a>
Inténtalo tú mismo »
Enlaces HTML - Imagen como enlace
Es común usar imágenes como enlaces:
Ejemplo
<ahref="[Link]">
<img src="[Link]" alt="HTML
tutorial"style="width:42px;height:42px;border:0">
</a>
Inténtalo tú mismo »
border:0 se añade para evitar que IE9 (y versiones anteriores) muestre un borde alrededor de la imagen
Enlaces HTML - Crear un Marcador
Los marcadores HTML se utilizan para permitir que los lectores salten a partes específicas de un sitio web.
página.
Los marcadores son prácticos si tu sitio web tiene páginas largas.
Para hacer un marcador, primero debes crear el marcador y luego agregar un enlace.
a ello.
Cuando se hace clic en el enlace, la página se desplazará a la ubicación con el marcador.
Ejemplo
Primero, crea un marcador con el atributo id:
<h2id="tips">Sección de Consejos Útiles</h2>
Luego, agrega un enlace al marcador ("Sección de Consejos Útiles"), desde dentro del mismo
page:
<ahref="#tips">Visita la sección de Consejos Útiles</a>
O, añade un enlace al marcador ("Sección de Consejos Útiles"), desde otra página:
Ejemplo
<a href="html_tips.htm#tips">Visita la sección de consejos útiles</a>
Pruébalo tú mismo »
Resumen del Capítulo
Utiliza el elemento HTML <a> para definir un enlace
Utiliza el atributo href de HTML para definir la dirección del enlace
Utiliza el atributo HTML target para definir dónde abrir el enlace
documento
Utiliza el elemento HTML <img> (dentro de <a>) para usar una imagen como un enlace
Utiliza el atributo HTML id (id="valor") para definir marcadores en una página
Utiliza el atributo HTML href (href="#valor") para enlazar al marcador
¡Pruébalo con ejercicios!
Ejercicio 1 » Ejercicio 2 » Ejercicio 3 » Ejercicio 4 » Ejercicio 5 »
Etiquetas de enlace HTML
Etiqueta Description
<a> Define un hiperenlace
IMÁGENES HTML
<!DOCTYPEhtml>
<html>
<cuerpo>
<h2>Montaña Espectacular</h2>
<img src="pic_mountain.jpg" alt="Montaña
Ver"estilo="ancho:304px; altura:228px;">
</body>
</html>
Inténtalo tú mismo »
Siempre especifica el ancho y la altura de una imagen. Si el ancho y la altura no están especificados,
mientras se carga la imagen.
Sintaxis de imágenes HTML
In HTML, images are defined with the<img>tag.
La etiqueta <img> está vacía, contiene solo atributos y no tiene un cierre.
etiqueta.
El atributo src especifica la URL (dirección web) de la imagen:
<imgsrc="url"alt="some_text">
El atributo alt
El atributo alt especifica un texto alternativo para una imagen, si la imagen no puede ser
mostrado.
El atributo alt proporciona información alternativa para una imagen si un usuario por alguna razón
no se puede verlo (debido a una conexión lenta, un error en el atributo src,
o si el usuario utiliza un lector de pantalla).
Si un navegador no puede encontrar una imagen, mostrará el texto alternativo:
Ejemplo
<img src="[Link]" alt="HTML5
Icono"estilo="ancho:128px;altura:128px;">
Inténtalo tú mismo »
El atributo alt es obligatorio. Una página web no se validará correctamente sin él.
Lectores de pantalla HTML
A screen reader is a software program that can read what is displayed on a
pantalla.
Los lectores de pantalla son útiles para personas con discapacidad visual, ciegas o que están aprendiendo.
disabled.
Los lectores de pantalla pueden leer el atributo alt.
Tamaño de la imagen - Ancho y Altura
Puedes usar el atributo de estilo para especificar el ancho y la altura de una imagen.
Los valores se especifican en píxeles (utilice px después del valor):
Ejemplo
<img src="[Link]" alt="Icono HTML5" style="width:128px;height:128px;">
Inténtalo tú mismo »
Alternativamente, puedes usar los atributos de ancho y alto. Aquí, los valores son
especificado en píxeles por defecto:
Ejemplo
<img src="[Link]" alt="Ícono de HTML5" width="128" height="128">
Pruébalo tú mismo »
¿Ancho y Alto o Estilo?
Tanto los atributos de ancho, alto y estilo son válidos en el último HTML5.
estándar.
Sugerimos que utilices el atributo de estilo. Evita que las hojas de estilo cambien.
the original size of images:
Ejemplo
<!DOCTYPEhtml>
<html>
<cabeza>
<style>
img {
ancho:100%;
}
</style>
</head>
<body>
<img src="[Link]" alt="Ícono de HTML5" style="width:128px;height:128px;">
<img src="[Link]" alt="Ícono HTML5" width="128" height="128">
</cuerpo>
</html>
Pruébalo tú mismo »
Imágenes en otra carpeta
Si no se especifica, el navegador espera encontrar la imagen en la misma carpeta que el
página web.
Sin embargo, es común almacenar imágenes en una subcarpeta. Debes incluir entonces
el nombre de la carpeta en el atributo src:
Ejemplo
<img src="/images/[Link]" alt="HTML5" />
Icono"estilo="ancho:128px;altura:128px;">
Pruébalo tú mismo »
Imágenes en otro servidor
Algunos sitios web almacenan sus imágenes en servidores de imágenes.
En realidad, puedes acceder a imágenes desde cualquier dirección web del mundo:
Ejemplo
<img src="[Link] alt="W3
[Link]
Inténtalo tú mismo »
Imágenes animadas
El estándar GIF permite imágenes animadas:
Ejemplo
<img src="[Link]" alt="Computadora">
Hombre"style="width:48px;height:48px;">
Inténtalo tú mismo »
Tenga en cuenta que la sintaxis para insertar imágenes animadas no es diferente de las no animadas.
imágenes animadas.
Usar una imagen como enlace
Para usar una imagen como un enlace, simplemente anida la etiqueta <img> dentro de la etiqueta <a>:
Ejemplo
<ahref="[Link]">
<img src="[Link]" alt="HTML
tutorial"style="width:42px;height:42px;border:0;">
</a>
Inténtalo tú mismo »
Agrega "border:0;" para evitar que IE9 (y versiones anteriores) muestre un borde alrededor de la imagen.
Imagen flotante
Utiliza la propiedad float de CSS para permitir que la imagen flote.
La imagen puede flotar a la derecha o a la izquierda de un texto:
Ejemplo
<p>
<img src="[Link]" alt="Sonrisa"
cara"estilo="flotar:derecha;ancho:42px;alto:42px;>
La imagen flotará a la derecha del texto.
</p>
<p>
<img src="[Link]" alt="Sonrisa">
cara"estilo="float:izquierda;width:42px;height:42px;">
La imagen flotarà a la izquierda del texto.
</p>
Inténtalo tú mismo »
Mapas de Imágenes
Utiliza la etiqueta <map> para definir un mapa de imagen. Un mapa de imagen es una imagen con
áreas clicables.
El atributo name de la etiqueta <map> está asociado con el usemap de <img>
attribute and creates a relationship between the image and the map.
La etiqueta <map> contiene una serie de etiquetas <area>, que definen el área clickeable
áreas en el mapa de imagen:
Example
<img src="[Link]" alt="Planetas" usemap="#planetmap" style="width:1
45px;height:126px;
<mapname="planetmap">
<areashape="rect"coords="0,0,82,126"alt="Sun"href="[Link]">
<areashape="círculo"coords="90,58,3"alt="Mercurio"href="[Link]">
<areashape="circle"coords="124,58,8"alt="Venus"href="[Link]">
</map>
Inténtalo tú mismo »
Resumen del Capítulo
Usa el elemento HTML <img> para definir una imagen
Usa el atributo HTML src para definir la URL de la imagen
Utiliza el atributo alt de HTML para definir un texto alternativo para una imagen, si lo
no se puede mostrar
Utiliza los atributos de ancho y alto de HTML para definir el tamaño de la imagen
Utiliza las propiedades de CSS width y height para definir el tamaño de la imagen
(alternativamente)
Utiliza la propiedad CSS float para permitir que la imagen flote.
Utilice el elemento HTML <map> para definir un mapa de imagen
Utiliza el elemento HTML <area> para definir las áreas clicables en la imagen
mapa
Utiliza el atributo usemap del elemento HTML <img> para apuntar a una imagen.
mapa
Loading images takes time. Large images can slow down your page. Use images carefu
Pruébate con ejercicios.
Ejercicio 1 » Ejercicio 2 » Ejercicio 3 » Ejercicio 4 » Ejercicio 5 » Ejercicio 6 »
Etiquetas de imagen HTML
Etiqueta Descripción
<img> Define una imagen
<map> Define un mapa de imagen
<área> Define un área clicable dentro de un mapa de imágenes
Listas HTML
« Previous
Siguiente Capítulo »
Ejemplo de una lista desordenada y una lista ordenada en
HTML:
Lista Desordenada:
Artículo
Artículo
Artículo
Artículo
Lista ordenada:
Primer artículo
2. Segundo artículo
3. Tercero artículo
4. Cuarto artículo
Listas HTML desordenadas
Una lista desordenada comienza con la etiqueta <ul>. Cada elemento de la lista comienza con
la etiqueta <li>.
Los elementos de la lista se marcarán con viñetas (pequeños círculos negros):
Ejemplo
<ul>
<li>Café</li>
<li>Té</li>
<li>Leche</li>
</ul>
Inténtalo tú mismo »
Listas HTML sin ordenar - El Estilo
Atributo
Se puede agregar un atributo de estilo a una lista desordenada, para definir el estilo de la
marcador
Estilo Descripción
tipo-de-lista:disco Los elementos de la lista serán marcados con viñetas (predeterminado)
tipo-de-lista: círculo Los elementos de la lista se marcarán con círculos
tipo-de-lista: cuadrado Los elementos de la lista estarán marcados con cuadrados
tipo-de-lista: none Los elementos de la lista no serán marcados
Disc:
<ul style="list-style-type:disc">
<li>Café</li>
<li>Té</li>
<li>Leche</li>
</ul>
Inténtalo tú mismo »
Círculo
<ul style="list-style-type:circle">
<li>Café</li>
<li>Té</li>
<li>Leche</li>
</ul>
Inténtalo tú mismo »
Cuadrado
<ul style="list-style-type:square">
<li>Café</li>
<li>Té</li>
<li>Leche</li>
</ul>
Inténtalo tú mismo »
Ninguno
<ulstyle="list-style-type:none">
<li>Café</li>
<li>Té</li>
<li>Leche</li>
</ul>
Inténtalo tú mismo»
Ordered HTML Lists
Una lista ordenada comienza con la etiqueta <ol>. Cada elemento de la lista comienza con la etiqueta <li>.
Los elementos de la lista estarán marcados con números:
Ejemplo
<ol>
<li>Café</li>
<li>Té</li>
<li>Leche</li>
</ol>
Inténtalo tú mismo »
Ordered HTML Lists - TheType Attribute
Se puede agregar un atributo de tipo a una lista ordenada para definir el tipo de la
marker:
Escriba Descripción
tipo="1" Los elementos de la lista se numerarán con números (por defecto)
tipo="A" Los elementos de la lista estarán numerados con letras mayúsculas
tipo="a" Los elementos de la lista se numerarán con letras minúsculas.
tipo="I" Los elementos de la lista estarán numerados con números romanos mayúsculos
tipo="i" Los elementos de la lista estarán numerados con números romanos en minúscula
Numbers:
<ol type="1">
<li>Café</li>
<li>Té</li>
<li>Leche</li>
</ol>
Pruébalo tú mismo »
Letras Mayúsculas:
<ol type="A">
<li>Café</li>
<li> té </li>
<li>Leche</li>
</ol>
Inténtalo tú mismo »
Letras minúsculas:
<oltype="a">
<li>Café</li>
<li>té</li>
<li>Leche</li>
</ol>
Prueba tú mismo »
Números romanos en mayúsculas:
<ol type="I">
<li>Café</li>
<li>Té</li>
<li>Leche</li>
</ol>
Pruébalo tú mismo »
números romanos en minúsculas:
<ol type="i">
<li>Café</li>
<li>Té</li>
<li>Milk</li>
</ol>
Inténtalo tú mismo »
Listas de Descripción HTML
HTML también soporta listas de descripción.
Una lista de descripción es una lista de términos, con una descripción de cada término.
La etiqueta <dl> define la lista de descripciones, la etiqueta <dt> define el término
(nombre), y la etiqueta <dd> describe cada término:
Ejemplo
<dl>
<dt>Café</dt>
- bebida caliente negra
<dt>Milk</dt>
- bebida fría blanca
</dl>
Inténtalo tú mismo »
Listas HTML Anidadas
Las listas pueden ser anidadas (listas dentro de listas):
Ejemplo
<ul>
<li>café</li>
<li>Té
<ul>
<li>té negro</li>
<li>té verde</li>
</ul>
</li>
<li>Leche</li>
</ul>
Pruébalo tú mismo »
Los elementos de lista pueden contener nuevas listas y otros elementos HTML, como imágenes y enlaces, etc.
Listas horizontales
Las listas HTML se pueden estilizar de muchas maneras diferentes con CSS.
Una forma popular es estilizar una lista para que se muestre horizontalmente:
Ejemplo
<!DOCTYPEhtml>
<html>
<head>
<style>
ul#menu li {
display:inline;
}
</style>
</head>
<cuerpo>
<h2>Lista Horizontal</h2>
<ulid="menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
</ul>
</cuerpo>
</html>
Pruébalo tú mismo »
Con un poco de estilo extra, puedes hacerlo parecer un menú:
Ejemplo
ul#menu{
padding:0;
}
ul#menu li{
display:inline;
}
ul#menu li a{
color de fondo:negro;
color:blanco;
padding:10px 20px;
decoración-de-texto:ninguna;
radio de borde:4px 4px 0 0;
}
ul#menu li a:hover{
color de fondo:naranja;
}
Inténtalo tú mismo »
Resumen del Capítulo
Utiliza el elemento HTML <ul> para definir una lista no ordenada
Utiliza el atributo de estilo HTML para definir el estilo de viñetas
Utiliza el elemento HTML <ol> para definir una lista ordenada
Utiliza el atributo type de HTML para definir el tipo de numeración
Utiliza el elemento HTML <li> para definir un elemento de lista
Utiliza el elemento HTML <dl> para definir una lista de descripciones
Utilice el elemento HTML <dt> para definir el término de descripción
Use the HTML<dd>element to define the description data
Las listas pueden estar anidadas dentro de listas
Los elementos de lista pueden contener otros elementos HTML
Utiliza la propiedad CSS display:inline para mostrar una lista horizontalmente
¡Pruébate con ejercicios!
Ejercicio 1 » Ejercicio 2 » Ejercicio 3 » Ejercicio 4 » Exercise 5 » Ejercicio 6 »
Etiquetas de lista HTML
Etiqueta Description
<ul> Define una lista desordenada
<ol> Define una lista ordenada
<li> Define un elemento de lista
<dl> Define una lista de descripción
<dt> Define el término en una lista de descripciones
<dd> Define la descripción en una lista de descripción
TablasHTML
« Anterior »
Próximo Capítulo »
Ejemplo de Tabla HTML
Número First Name Last Name
1 Eva Jackson
2 Juan Cierva
3 Adán Johnson
4 Jill Smith
Definiendo tablas HTML
Ejemplo
<tablestyle="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eva</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Inténtalo tú mismo »
Ejemplo explicado:
Las tablas se definen con la etiqueta <table>.
Las tablas se dividen en filas de tabla con la etiqueta <tr>.
Las filas de la tabla se dividen en datos de tabla con la etiqueta <td>.
Una fila de tabla también se puede dividir en encabezados de tabla con la etiqueta <th>.
Los datos de la tabla <td> son los contenedores de datos de la tabla.
Pueden contener todo tipo de elementos HTML como texto, imágenes, listas, otras tablas, etc.
Una tabla HTML con un atributo de borde
Si no especificas un borde para la tabla, se mostrará sin bordes.
Se puede agregar un borde utilizando el atributo border:
Ejemplo
<table border="1" style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eva</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Pruébalo tú mismo »
¡El atributo border está en camino de salir del estándar HTML! Es mejor usar CSS.
Para agregar bordes, utiliza la propiedad de CSS border:
Ejemplo
tabla, th, td{
borde:1px sólido negro;
}
Inténtalo tú mismo »
Recuerda definir bordes tanto para la tabla como para las celdas de la tabla.
Una tabla HTML con bordes colapsados
Si quieres que los bordes se colapsen en un solo borde, añade CSS border-collapse:
Ejemplo
tabla, th, td{
borde:1px sólido negro;
colapso-borde: colapsar;
}
Inténtalo tú mismo »
Una tabla HTML con relleno en las celdas
El relleno de celda especifica el espacio entre el contenido de la celda y sus bordes.
Si no especificas un relleno, las celdas de la tabla se mostrarán sin
relleno.
Para establecer el relleno, utiliza la propiedad CSS padding:
Ejemplo
tabla, th, td{
borde:1px sólido negro;
border-collapse: colapsar;
}
th, td{
relleno:15px;
}
Prúebalo tú mismo »
Encabezados de Tabla HTML
Los encabezados de las tablas se definen con la etiqueta <th>.
Por defecto, todos los navegadores principales muestran los encabezados de las tablas en negrita y centrados:
Ejemplo
<tablestyle="width:100%">
<tr>
<th>Nombre</th>
<th>Apellido</th>
<th>Puntos</th>
</tr>
<tr>
<td>Eva</td>
<td>Jackson</td>
<td>94</td>
</tr>
</tabla>
Inténtalo tú mismo »
Para alinear a la izquierda los encabezados de la tabla, usa la propiedad CSS text-align:
Ejemplo
th{
texto-alineado:izquierda;
}
Pruébalo tú mismo »
Una tabla HTML con espaciado de bordes
El espaciado de los bordes especifica el espacio entre las celdas.
Para establecer el espaciado de borde para una tabla, utiliza la propiedad CSS border-spacing:
Example
mesa{
border-spacing:5px;
}
Inténtalo tú mismo »
Si la tabla tiene bordes colapsados, el espacio entre bordes no tiene efecto.
Celdas de tabla que abarcan muchas columnas
To make a cell span more than one column, use thecolspanattribute:
Ejemplo
<tablestyle="width:100%">
<tr>
<th>Nombre</th>
<thcolspan="2">Teléfono</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
Pruébalo tú mismo »
Celdas de tabla que abarcan muchas filas
Para hacer que una celda abarque más de una fila, utiliza el atributo rowspan:
Ejemplo
<tablestyle="width:100%">
<tr>
<th>Nombre:</th>
<td>Bill Gates</td>
</tr>
<tr>
<throwspan="2">Teléfono:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</tabla>
Inténtalo tú mismo »
Una tabla HTML con un título
Para agregar un título a una tabla, utiliza la etiqueta <caption>:
Ejemplo
<tablestyle="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>Enero</td>
<td>$100</td>
</tr>
<tr>
<td>Febrero</td>
<td>$50</td>
</tr>
</tabla>
Inténtalo tú mismo »
La etiqueta <caption> debe ser insertada inmediatamente después de la etiqueta <table>.
Un estilo especial para OneTable
Para definir un estilo especial para una tabla especial, añade un atributo anid a la tabla:
Ejemplo
<table id="t01">
<tr>
<th>Firstname</th>
<th>Apellido</th>
<th>Puntos</th>
</tr>
<tr>
<td>Eva</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Ahora puedes definir un estilo especial para esta tabla:
table#t01{
ancho:100%;
color de fondo:#f1f1c1;
}
Prueba tú mismo »
Y agrega más estilos:
tabla#t01 tr:nth-childPar(even){
color de fondo:#eee;
}
table#t01 tr:nth-child(odd){
color de fondo:#fff;
}
tabla#t01 th{
color:blanco;
color de fondo:negro;
}
Pruébalo tú mismo »
Resumen del Capítulo
Usa el elemento <table> de HTML para definir una tabla
Utiliza el elemento HTML <tr> para definir una fila de tabla
Use the HTML<td>element to define a table data
Use el elemento HTML <th> para definir un encabezado de tabla
Utiliza el elemento HTML <caption> para definir un título de tabla
Utiliza la propiedad CSS border para definir un borde
Utiliza la propiedad CSS border-collapse para colapsar los bordes de las celdas
Utiliza la propiedad CSS padding para agregar relleno a las celdas
Utiliza la propiedad CSS text-align para alinear el texto de la celda
Usa la propiedad CSS border-spacing para establecer el espacio entre las celdas
Utiliza el atributo colspan para hacer que una celda abarque varias columnas
Utiliza el atributo rowspan para hacer que una celda abarque varias filas
Use theidattribute to uniquely define one table
¡Pruébate con ejercicios!
Ejercicio 1 » Exercise 2 » Ejercicio 3 » Ejercicio 4 » Ejercicio 5 Ejercicio 6 »
HTMLTableTags
Etiqueta Description
<tabla> Define una tabla
<th> Define una celda de encabezado en una tabla
<tr> Define una fila en una tabla
<td> Define una celda en una tabla
<caption> Define un título de tabla
<colgroup> Especifica un grupo de una o más columnas en una tabla para formato
<col> Especifica las propiedades de la columna para cada columna dentro de un elemento <colgroup>
<thead> Agrupa el contenido del encabezado en una tabla
<tbody> Agrupa el contenido del cuerpo en una tabla
<tfoot> Agrupa el contenido del pie de página en una tabla
Formularios HTML
« Anterior
Siguiente Capítulo »
El elemento <form>
Los formularios HTML se utilizan para recoger la entrada del usuario.
El elemento <form> define un formulario HTML:
<form>
.
elementos de formulario
.
</form>
Los formularios HTML contienen elementos de formulario.
Los elementos de formulario son diferentes tipos de elementos de entrada, casillas de verificación, botones de opción,
botones de enviar, y más.
El elemento <input>
El elemento <input> es el elemento de formulario más importante.
El elemento <input> tiene muchas variaciones, dependiendo del atributo type.
Aquí están los tipos utilizados en este capítulo:
Escribir Descripción
texto Define entrada de texto normal
radio Define la entrada de botón de radio (para seleccionar una de muchas opciones)
enviar Define un botón de enviar (para enviar el formulario)
Aprenderás mucho más sobre los tipos de entrada más adelante en este tutorial.
TextInput
<input type="text"> define un campo de entrada de una línea para la entrada de texto:
Ejemplo
<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<inputtype="text"name="lastname">
</form>
Prueba tú mismo »
Así es como se verá en un navegador:
First name:
Last name:
Nota: El formulario en sí no es visible. También tenga en cuenta que el ancho predeterminado de un texto
el campo tiene 20 caracteres.
Entrada de botón de radio
<input type="radio">define un botón de opción.
Los botones de radio permiten al usuario seleccionar UNO de un número limitado de opciones:
Ejemplo
<form>
<inputtype="radio"name="sex"value="male"checked>Male
<br>
<inputtype="radio"name="sex"value="female">Female
</form>
Inténtalo tú mismo »
Así es como se mostrará el código HTML anterior en un navegador:
Masculino
Femenino
The Submit Button
<input type="submit"> define un botón para enviar un formulario a un formulario-
manejador.
El manejador de formularios es típicamente una página del servidor con un script para procesar la entrada
datos.
El controlador del formulario está especificado en el atributo action del formulario:
Ejemplo
<formaction="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Ratón">
<br><br>
<inputtype="submit"value="Submit">
</form>
Inténtalo tú mismo »
Así es como se mostrará el código HTML anterior en un navegador:
First name:
Mickey
Last name:
Ratón
Enviar
El Atributo de Acción
La acción atribuida define la acción que se debe realizar cuando se envía el formulario.
enviado.
La forma común de enviar un formulario a un servidor es utilizando un botón de enviar.
Normalmente, el formulario se envía a una página web en un servidor web.
In the example above, a server-side script is specified to handle the submitted
form:
<form action="action_page.php">
Si se omite el atributo de acción, la acción se establece en la página actual.
El Atributo Método
El atributo method especifica el método HTTP (GET o POST) que se utilizará.
al enviar los formularios:
<form action="action_page.php" method="get">
o:
<form action="action_page.php" method="post">
¿Cuándo usar GET?
Puedes usar GET (el método predeterminado):
Si la presentación del formulario es pasiva (como una consulta de motor de búsqueda), y sin
información sensible.
Cuando uses GET, los datos del formulario serán visibles en la dirección de la página:
action_page.php?firstname=Mickey&lastname=Mouse
GET es más adecuado para cantidades cortas de datos. Las limitaciones de tamaño están establecidas en tu navegador.
¿Cuándo usar POST?
Deberías usar POST:
Si el formulario está actualizando datos o incluye información sensible (contraseña).
POST ofrece mejor seguridad porque los datos enviados no son visibles en la página
dirección.
El Atributo Nombre
Para ser enviado correctamente, cada campo de entrada debe tener un atributo name.
Este ejemplo solo enviará el campo de entrada 'Apellido':
Ejemplo
<formaction="action_page.php">
First name:<br>
<inputtype="text"value="Mickey">
<br>
Last name:<br>
<inputtype="text"name="lastname"value="Mouse">
<br><br>
<input type="submit" value="Enviar">
</form>
Try it Yourself »
Agrupando datos de formulario con <fieldset>
El elemento <fieldset> agrupa datos relacionados en un formulario.
El elemento <legend> define un título para el elemento <fieldset>.
Ejemplo
<formaction="action_page.php">
<fieldset>
<legend>Información personal:</legend>
First name:<br>
<input type="text" name="primer_nombre" value="Mickey">
<br>
Last name:<br>
<inputtype="text"name="lastname"value="Mouse">
<br><br>
<inputtype="submit"value="Submit">
</fieldset>
</form>
Pruébalo tú mismo »
Así es como se mostrará el código HTML anterior en un navegador:
Personal information:First name:
Mickey
Last name:
Ratón
Enviar
Atributos del Formulario HTML
Un elemento <form> HTML, con todos los atributos posibles configurados, se verá así:
<form action="action_page.php" method="GET" target="_blank" accept-
charset="UTF-8"
enctype="application/x-www-form-urlencoded"autocomplete="off"novalidat
e>
.
elementos de formulario
.
</form>
¡Pruébate con ejercicios!
Ejercicio 1 » Ejercicio 2 » Ejercicio 3 » Ejercicio 4 »
Aquí está la lista de atributos <form>:
Atributo Descripción
aceptar-codificaciónEspecifica el conjunto de caracteres utilizado en el formulario enviado (predeterminado: los caracteres de la página
acción Especifica una dirección (url) donde enviar el formulario (por defecto: la presentación
autocompletar Especifica si el navegador debe autocompletar el formulario (por defecto: activado).
enctype Especifica la codificación de los datos enviados (por defecto: está codificado en url).
método Especifica el método HTTP utilizado al enviar el formulario (predeterminado: GET)
nombre Especifica un nombre utilizado para identificar el formulario (para uso de DOM: [Link]
novalidar Especifica que el navegador no debe validar el formulario.
objetivo Especifica el destino de la dirección en el atributo de acción (predeterminado: _self).
Aprenderás más sobre los atributos en los próximos capítulos.
Elementos de formulario HTML
« Anterior
Próximo Capítulo »
Este capítulo describe todos los elementos de formulario HTML.
El elemento <input>
El elemento de formulario más importante es el elemento <input>.
El elemento <input> puede variar de muchas maneras, dependiendo del atributo type.
Todos los tipos de entrada de HTML se cubren en el próximo capítulo.
El elemento <select> (lista desplegable)
El elemento <select> define una lista desplegable:
Ejemplo
<select name="cars">
<optionvalue="volvo">Volvo</option>
<optionvalue="saab">Saab</option>
<option value="fiat">Fiat</option>
<optionvalue="audi">Audi</option>
</select>
Inténtalo tú mismo »
El elemento <option> define las opciones a seleccionar.
La lista normalmente mostrará el primer elemento como seleccionado.
Puedes añadir un atributo seleccionado para definir una opción predefinida.
Ejemplo
<option value="fiat" selected>Fiat</option>
Inténtalo tú mismo »
El elemento <textarea>
El elemento <textarea> define un campo de entrada de varias líneas (un área de texto):
Ejemplo
<textareaname="message"rows="10"cols="30">
El gato estaba jugando en el jardín.
</textarea>
Pruébalo tú mismo »
Así es como se mostrará el código HTML anterior en un navegador:
El elemento <button>
El elemento <button> define un botón clickable:
Ejemplo
<botón tipo="button" onclick="alert('¡Hola Mundo!')">¡Haz clic en mí!</botón>
Inténtalo tú mismo »
Así es como el código HTML anterior se mostrará en un navegador:
¡Haz clic en mí!
Elementos de formulario HTML5
HTML5 agregó los siguientes elementos de formulario:
<datalist>
<keygen>
<output>
Por defecto, los navegadores no muestran elementos desconocidos. Nuevos elementos no destruirán
Elemento <datalist> de HTML5
El elemento <datalist> especifica una lista de opciones predefinidas para un <input>
elemento.
Los usuarios verán una lista desplegable de opciones predefinidas a medida que ingresen datos.
El atributo list del elemento <input>, debe referirse al atributo id del
<datalist> elemento.
Ejemplo
Un elemento <input> con valores predefinidos en un <datalist>:
<formaction="action_page.php">
<inputlist="browsers">
<datalistid="navegadores">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<optionvalue="Opera">
<option value="Safari">
</datalist>
</form>
Inténtalo tú mismo »
Elemento <keygen> de HTML5
El propósito del elemento <keygen> es proporcionar una manera segura de
autenticar usuarios.
El elemento <keygen> especifica un campo generador de pares de claves en un formulario.
Cuando se envía el formulario, se generan dos claves, una privada y una
public.
La clave privada se almacena localmente, y la clave pública se envía al servidor.
La clave pública podría usarse para generar un certificado de cliente para autenticar al
usuario en el futuro.
Ejemplo
Un formulario con un campo de generador de claves:
<formaction="action_page.php">
Nombre de usuario:<input type="text" name="user">
Encryption:<keygenname="security">
<input type="submit">
</form>
Pruébalo tú mismo »
Elemento <output> de HTML5
El elemento <output> representa el resultado de un cálculo (como el realizado
por un guion).
Ejemplo
Realiza un cálculo y muestra el resultado en un elemento <output>:
<formaction="action_page.asp">
oninput="[Link]=parseInt([Link])+parseInt([Link])">
0
<inputtype="range"id="a"name="a"value="50">
100 +
<inputtype="number"id="b"name="b"value="50">
=
<outputname="x"for="a b"></output>
<br><br>
<input type="submit">
</form>
Try it Yourself »
¡Pruébate con ejercicios!
Exercise 1 » Exercise 2 » Ejercicio 3 »
Elementos de formulario HTML
= nuevo en HTML5.
Etiqueta Descripción
<form> Define un formulario HTML para la entrada del usuario
<input> Define un control de entrada
<textarea> Define un control de entrada multilínea (área de texto)
<etiqueta> Define una etiqueta para un elemento <input>
<fieldset> Agrupa elementos relacionados en un formulario
<leyenda> Define un título para un elemento <fieldset>
<select> Define una lista desplegable
<optgroup> Define un grupo de opciones relacionadas en una lista desplegable
<opción> Define una opción en una lista desplegable
<botón> Define un botón clicable
<datalist> Especifica una lista de opciones predefinidas para los controles de entrada
<keygen> Defines a key-pair generator field (for forms)
<output> Define el resultado de un cálculo
Tipos de entrada HTML
« Anterior »
Siguiente Capítulo »
InputTypes
Este capítulo describe los tipos de entrada del elemento <input>.
InputType: text
<input type="text"> define un campo de entrada de una línea para la entrada de texto:
Example
<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="apellido">
</form>
Prueba tú mismo »
Así es como se mostrará el código HTML anterior en un navegador:
First name:
Last name:
InputType: password
<input type="password"> define un campo de contraseña:
Ejemplo
<form>
User name:<br>
<inputtype="text"name="username">
<br>
User password:<br>
<input type="password" name="psw">
</form>
Prueba tú mismo »
Así es como se mostrará el código HTML anterior en un navegador:
Nombre de usuario:
Contraseña del usuario:
Los caracteres en un campo de contraseña están enmascarados (mostrados como asteriscos o círculos).
InputType: submit
<input type="submit">define un botón para enviar la entrada del formulario a
manejador de formularios.
El manejador de formularios es típicamente una página de servidor con un script para procesar la entrada
datos.
El controlador del formulario se especifica en el atributo action del formulario:
Ejemplo
<formaction="action_page.php">
First name:<br>
<inputtype="text"name="firstname"value="Mickey">
<br>
Apellido:<br>
<inputtype="text"name="lastname"value="Mouse">
<br><br>
<inputtype="submit"value="Submit">
</form>
Prueba tú mismo »
Así es como se mostrará el código HTML anterior en un navegador:
First name:
Mickey
Last name:
Ratón
Enviar
Si omites el atributo de valor del botón de envío, el botón tendrá un valor predeterminado
text:
Ejemplo
<formaction="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Ratón">
<br><br>
<inputtype="submit">
</form>
Pruébalo tú mismo »
TipoDeEntrada: radio
<input type="radio"> define un botón de opción.
Los botones de radio permiten al usuario seleccionar SOLO UNA de un número limitado de opciones:
Ejemplo
<form>
<inputtype="radio"name="sex"value="male"checked>Male
<br>
<input type="radio" name="sex" value="female">Femenino
</form>
Inténtalo tú mismo »
Así es como se mostrará el código HTML anterior en un navegador:
Masculino
Femenino
TipoDeEntrada: casillaDeVerificación
<input type="checkbox">define una casilla de verificación.
Las casillas de verificación permiten a un usuario seleccionar CERO o MÁS opciones de un número limitado de
opciones.
Ejemplo
<form>
<input type="checkbox" name="vehicle1" value="Bike"> Tengo una bicicleta
<br>
<input type="checkbox" name="vehicle2" value="Car"> Tengo un coche
</form>
Pruébalo tú mismo »
Así es como se mostrará el código HTML anterior en un navegador:
Tengo una bicicleta
Tengo un coche
InputType: button
<input type="button">define un botón:
Ejemplo
<inputtype="button"onclick="alert('Hello World!')"value="Click Me!">
Pruébalo tú mismo »
Así es como se mostrará el código HTML anterior en un navegador:
TiposDeEntrada HTML5
HTML5 añadió varios nuevos tipos de entrada:
color
fecha
fecha y hora
fecha y hora local
correo electrónico
mes
número
rango
buscar
tel
tiempo
url
semana
Los tipos de entrada, no soportados por los navegadores web antiguos, se comportarán como el tipo de entrada de texto.
TipoDeEntrada: número
El<input type="number">se utiliza para campos de entrada que deben contener un
valor numérico.
Puedes establecer restricciones en los números.
Dependiendo del soporte del navegador, las restricciones pueden aplicarse al campo de entrada.
Ejemplo
<form>
Cantidad (entre 1 y 5):
<input type="number" name="quantity" min="1" max="5">
</form>
Inténtalo tú mismo »
Restricciones de entrada
Aquí hay una lista de algunas restricciones comunes de entrada (algunas son nuevas en HTML5):
Atributo Descripción
discapacitado Especifica que un campo de entrada debe estar deshabilitado
máximo Especifica el valor máximo para un campo de entrada
longitud máxima Especifica el número máximo de caracteres para un campo de entrada.
mín Specifies the minimum value for an input field
patrón Especifica una expresión regular para verificar el valor de entrada.
solo lectura Especifica que un campo de entrada es de solo lectura (no se puede cambiar)
requerido Especifica que un campo de entrada es obligatorio (debe ser completado)
tamaño Especifica el ancho (en caracteres) de un campo de entrada
paso Especifica los intervalos de números legales para un campo de entrada
valor Especifica el valor predeterminado para un campo de entrada
Aprenderás más sobre las restricciones de entrada en el próximo capítulo.
Ejemplo
<form>
Quantity:
<input type="number" name="points" min="0" max="100" step="10" value
30
</form>
Inténtalo tú mismo »
InputType: date
El<input type="date">se utiliza para campos de entrada que deben contener una fecha.
Dependiendo del soporte del navegador, un selector de fecha puede aparecer en el campo de entrada.
Ejemplo
<form>
Birthday:
<input type="date" name="bday">
</form>
Inténtalo tú mismo »
Puedes añadir restricciones a la entrada:
Ejemplo
<form>
Introduce una fecha antes del 1980-01-01:
<inputtype="date"name="bday"max="1979-12-31"><br>
Ingrese una fecha después del 2000-01-01:
<input type="date" name="bday" min="2000-01-02"><br>
</form>
Inténtalo tú mismo »
TipoDeEntrada: color
El<input type="color">se utiliza para campos de entrada que deben contener un color.
Dependiendo del soporte del navegador, un selector de color puede aparecer en el campo de entrada.
Ejemplo
<form>
Select your favorite color:
<inputtype="color"name="favcolor">
</form>
Try it Yourself »
Tipo de Entrada: rango
El <input type="range"> se utiliza para campos de entrada que deben contener un valor
dentro de un rango.
Dependiendo del soporte del navegador, el campo de entrada se puede mostrar como un control deslizante
control.
Ejemplo
<form>
<inputtype="range"name="points"min="0"max="10">
</form>
Inténtalo tú mismo »
Puedes usar los siguientes atributos para especificar restricciones: min, max, step,
valor.
InputType: month
El <input type="month"> permite al usuario seleccionar un mes y un año.
Dependiendo del soporte del navegador, un selector de fecha puede aparecer en el campo de entrada.
Ejemplo
<form>
Birthday (month and year):
<inputtype="month"name="bdaymonth">
</form>
Inténtalo tú mismo »
TipoDeEntrada: semana
El <input type="week"> permite al usuario seleccionar una semana y un año.
Dependiendo del soporte del navegador, un selector de fechas puede aparecer en el campo de entrada.
Ejemplo
<form>
Selecciona una semana:
<input type="semana" name="semana_año">
</form>
Inténtalo tú mismo »
TipoDeEntrada: tiempo
El <input type="time"> permite al usuario seleccionar una hora (sin zona horaria).
Dependiendo del soporte del navegador, un selector de hora puede aparecer en el campo de entrada.
Ejemplo
<form>
Selecciona una hora:
<inputtype="time"name="usr_time">
</form>
Inténtalo tú mismo »
InputType: datetime
El <input type="datetime"> permite al usuario seleccionar una fecha y hora (con
zona horaria).
Ejemplo
<form>
Birthday (date and time):
<input type="datetime" name="bdaytime">
</form>
Inténtalo tú mismo »
El tipo de entrada datetime ha sido eliminado del estándar HTML. Utiliza datetime-local en su lugar.
TipoDeEntrada: datetime-local
El<input type="datetime-local">permite al usuario seleccionar una fecha y hora
(sin zona horaria).
Dependiendo del soporte del navegador, un selector de fecha puede aparecer en el campo de entrada.
Ejemplo
<form>
Birthday (date and time):
<inputtype="datetime-local"name="bdaytime">
</form>
Pruébalo tú mismo »
InputType: email
El<input type="email">se utiliza para campos de entrada que deben contener un e-
dirección de correo
Dependiendo del soporte del navegador, la dirección de correo electrónico puede ser automáticamente
validado al ser enviado.
Algunos smartphones reconocen el tipo de correo electrónico y añaden '.com' al teclado
para coincidir con la entrada de correo electrónico.
Ejemplo
<form>
E-mail:
<input type="email" name="email">
</form>
Inténtalo tú mismo »
InputType: search
El <input type="search"> se utiliza para campos de búsqueda (un campo de búsqueda se comporta
como un campo de texto regular).
Ejemplo
<form>
Buscar en Google:
<inputtype="search"name="googlesearch">
</form>
Inténtalo tú mismo »
InputType: tel
El <input type="tel"> se utiliza para campos de entrada que deben contener un
número de teléfono.
El tipo tel actualmente solo es compatible con Safari 8.
Ejemplo
<form>
Telephone:
<input type="tel" name="usrtel">
</form>
Inténtalo tú mismo »
TipoDeEntrada: url
El <input type="url"> se utiliza para campos de entrada que deben contener una URL
dirección.
Dependiendo del soporte del navegador, el campo de URL puede validarse automáticamente.
cuando se envía.
Algunos teléfonos inteligentes reconocen el tipo de URL y añaden '.com' al teclado para
coincidir con la entrada de la URL.
Ejemplo
<form>
Agrega tu página de inicio:
<input type="url" name="homepage">
</form>
Inténtalo tú mismo »
El atributo de valor
El atributo value especifica el valor inicial para un campo de entrada:
Ejemplo
<formaction="">
First name:<br>
<input type="text" name="firstname" value="John">
<br>
Last name:<br>
<input type="text" name="apellido">
</form>
Pruébalo tú mismo »
El atributo de solo lectura
El atributo readonly especifica que el campo de entrada es de solo lectura (no se puede modificar)
cambiado):
Ejemplo
<formaction="">
First name:<br>
<inputtype="text"name="firstname"value="John"readonly>
<br>
Apellido:<br>
<input type="text" name="apellido">
</form>
Inténtalo tú mismo »
El atributo readonly no necesita un valor. Es lo mismo que escribir
readonly="readonly".
El atributo deshabilitado
El atributo disabled especifica que el campo de entrada está deshabilitado.
Un elemento deshabilitado no se puede usar ni hacer clic.
Los elementos deshabilitados no se enviarán.
Ejemplo
<formaction="">
First name:<br>
<inputtype="text"name="firstname"value="John"disabled>
<br>
Last name:<br>
<input type="text" name="apellido">
</form>
Inténtalo tú mismo »
El atributo deshabilitado no necesita un valor. Es lo mismo que escribir
deshabilitado="deshabilitado".
El atributo de tamaño
El atributo size especifica el tamaño (en caracteres) para el campo de entrada:
Ejemplo
<formaction="">
First name:<br>
<inputtype="text"name="firstname"value="John"size="40">
<br>
Last name:<br>
<input type="text" name="apellido">
</form>
Inténtalo tú mismo »
The maxlength Attribute
El atributo maxlength especifica la longitud máxima permitida para la entrada
field:
Ejemplo
<formaction="">
First name:<br>
<input type="text" name="nombre" maxlength="10">
<br>
Last name:<br>
<input type="text" name="apellido">
</form>
Pruébalo tú mismo »
Con un atributo maxlength, el control de entrada no aceptará más de lo
número permitido de caracteres.
El atributo no proporciona ningún comentario. Si deseas alertar al usuario, puedes
must write JavaScript code.
Las restricciones de entrada no son infalibles. JavaScript ofrece muchas maneras de agregar entrada ilegal.
Para restringir de manera segura la entrada, las restricciones deben ser verificadas por el receptor (el servidor) como nosotros
Atributos de HTML5
HTML5 agregó los siguientes atributos para <input>:
autocompletar
enfoque automático
forma
formaction
formenctype
formmethod
formnovalidate
objetivoFormulario
height and width
lista
min and max
múltiple
patrón (regexp)
marcador de posición
requerido
paso
y los siguientes atributos para <form>:
completar automáticamente
sin validar
El atributo de autocompletado
El atributo de autocompletar especifica si un formulario o campo de entrada debe tener
autocompletar activado o desactivado.
Cuando la autocompletar está activada, el navegador completa automáticamente los valores según
valores que el usuario ha ingresado antes.
Consejo: Es posible tener el autocompletado "activado" para el formulario y "desactivado" para específicos.
campos de entrada, o viceversa.
El atributo de autocompletado funciona con <form> y el siguiente <input>
tipos: texto, búsqueda, url, tel, correo electrónico, contraseña, selecciones de fecha, rango y color.
Ejemplo
Un formulario HTML con autocompletar activado (y desactivado para un campo de entrada):
<form action="action_page.php" autocomplete="on">
Nombre:<input type="text" name="fname"><br>
Apellido:<input type="text" name="lname"><br>
E-mail:<inputtype="email"name="email"autocomplete="off"><br>
<inputtype="submit">
</form>
Inténtalo tú mismo »
Consejo: En algunos navegadores puede que necesites activar la función de autocompletar para
esto para trabajar.
El atributo novalidate
El atributo novalidate es un atributo de <form>.
Cuando está presente, novalidate especifica que los datos del formulario no deben ser validados cuando
enviado.
Ejemplo
Indica que el formulario no debe ser validado al enviar:
<form action="action_page.php" novalidate>
E-mail:<inputtype="email"name="user_email">
<input type="submit">
</form>
Inténtalo tú mismo »
El atributo autofocus
El atributo autofocus es un atributo booleano.
Cuando está presente, especifica que un elemento <input> debería obtener automáticamente
enfocar cuando se carga la página.
Ejemplo
Deja que el campo de entrada 'Nombre' obtenga automáticamente el foco cuando se cargue la página:
Nombre:<input type="text" name="fname" autofocus>
Inténtalo tú mismo »
El formulario Atributo
El atributo form especifica uno o más formularios a los que pertenece un elemento <input>.
Consejo: Para referirse a más de una forma, use una lista de identificadores de forma separados por espacios.
Ejemplo
Un campo de entrada ubicado fuera del formulario HTML (pero aún parte del formulario):
<form action="action_page.php" id="form1">
Nombre:<input type="text" name="fname"><br>
<inputtype="submit"value="Submit">
</form>
Apellido:<input type="text" name="lname" form="form1">
Pruébalo tú mismo »
El atributo formaction
El atributo formaction especifica la URL de un archivo que procesará la entrada
controlar cuando se envía el formulario.
El atributo formaction anula el atributo action del elemento <form>.
El atributo formaction se utiliza con type="submit" y type="image".
Ejemplo
An HTML form with two submit buttons, with different actions:
<formaction="action_page.php">
Nombre:<inputtype="text"name="fname"><br>
Apellido:<input type="text" name="lname"><br>
<inputtype="submit"value="Submit"><br>
<input type="submit" formaction="demo_admin.asp">
value="Submit as admin">
</form>
Inténtalo tú mismo »
El atributo formenctype
El atributo formenctype especifica cómo se deben codificar los datos del formulario cuando
enviándolo al servidor (solo para formularios con método="post").
El atributo formenctype anula el atributo enctype del <form>
elemento.
El atributo formenctype se utiliza con type="submit" y type="image".
Example
Envía datos de formulario que están codificados por defecto (el primer botón de enviar) y codificados
como "multipart/form-data" (el segundo botón de envío):
<form action="demo_post_enctype.asp" method="post">
Nombre:<input type="text" name="fname"><br>
<inputtype="submit"value="Submit">
<input type="submit" form enctype="multipart/form-data">
value="Submit as Multipart/form-data">
</form>
Pruébalo tú mismo »
El atributo formmethod
El atributo formmethod define el método HTTP para enviar datos de formulario a
la URL de acción.
El atributo formmethod anula el atributo method del <form>
elemento.
El atributo formmethod se puede usar con type="submit" y type="image".
Ejemplo
El segundo botón de enviar anula el método HTTP del formulario:
<form action="action_page.php" method="get">
Nombre:<input type="text" name="fname"><br>
Apellido:<input type="text" name="lname"><br>
<inputtype="submit"value="Submit">
<input type="submit" formmethod="post" formaction="demo_post.asp"
value="Submit using POST">
</form>
Inténtalo tú mismo »
El atributo formnovalidate
El atributo novalidate es un atributo booleano.
Cuando está presente, especifica que el elemento <input> no debe ser validado
cuando se envíe.
El atributo formnovalidate anula el atributo novalidate del <form>
elemento.
El atributo formnovalidate se puede usar con type="submit".
Ejemplo
Un formulario con dos botones de envío (con y sin validación):
<form action="action_page.php">
E-mail:<inputtype="email"name="userid"><br>
<inputtype="submit"value="Submit"><br>
<input type="submit" formnovalidate value="Enviar sin validación">
</form>
Intenta hacerlo tú mismo »
El atributo formtarget
El atributo formtarget especifica un nombre o una palabra clave que indica dónde
muestra la respuesta que se recibe después de enviar el formulario.
El atributo formtarget anula el atributo target del elemento <form>.
El atributo formtarget se puede usar con type="submit" y type="image".
Ejemplo
Un formulario con dos botones de envío, con diferentes ventanas de destino:
<formaction="action_page.php">
Nombre:<input type="text" name="fname"><br>
Apellido:<input type="text" name="lname"><br>
<inputtype="submit"value="Submit as normal">
<input type="submit" formtarget="_blank"
value="Submit to a new window">
</form>
Inténtalo tú mismo »
Los atributos de altura y anchura
Los atributos de altura y ancho especifican la altura y el ancho de un <input>
elemento.
Los atributos de altura y ancho solo se utilizan con <input type="image">.
Siempre especifica el tamaño de las imágenes. Si el navegador no conoce el tamaño, la página se
cargar.
Ejemplo
Define una imagen como el botón de enviar, con atributos de altura y anchura:
<input type="image" src="img_submit.gif" alt="Enviar" width="48" height
48
Inténtalo tú mismo »
La lista Atributo
El atributo list se refiere a un elemento <datalist> que contiene opciones predefinidas
opciones para un elemento <input>.
Ejemplo
Un elemento <input> con valores predefinidos en un <datalist>:
<inputlist="browsers">
<datalistid="navegadores">
<option value="Internet Explorer">
<optionvalue="Firefox">
<option value="Chrome">
<opción valor="Opera">
<option value="Safari">
</datalist>
Inténtalo tú mismo »
Los atributos min y max
Los atributos min y max especifican el valor mínimo y máximo para un
elemento <input>.
Los atributos min y max funcionan con los siguientes tipos de entrada: número, rango,
date, datetime, datetime-local, month, time and week.
Ejemplo
<input> elementos con valores mínimo y máximo:
Ingrese una fecha antes del 01-01-1980:
<input type="date" name="bday" max="1979-12-31">
Ingrese una fecha después del 2000-01-01:
<inputtype="date"name="bday"min="2000-01-02">
Cantidad (entre 1 y 5):
<input type="number" name="cantidad" min="1" max="5">
Inténtalo tú mismo »
El atributo múltiple
El atributo múltiple es un atributo booleano.
Cuando está presente, especifica que se permite al usuario ingresar más de un valor.
en el elemento <input>.
El atributo múltiple funciona con los siguientes tipos de entrada: correo electrónico y archivo.
Ejemplo
Un campo de carga de archivos que acepta múltiples valores:
Seleccionar imágenes:<input type="file" name="img" multiple>
Pruébalo tú mismo »
El patrón Atributo
El atributo pattern especifica una expresión regular que el elemento <input>.
se verifica el valor.
El atributo pattern funciona con los siguientes tipos de entrada: texto, búsqueda, url, tel,
correo electrónico y contraseña.
Consejo: Usa lo globaltitle atributo para describir el patrón para ayudar al usuario.
Consejo: Aprende más sobreexpresiones regularesen nuestro tutorial de JavaScript.
Ejemplo
An input field that can contain only three letters (no numbers or special
personajes):
Código de país:<input type="text" name="country_code" pattern="[A-Za-z]
{3}"title="Three letter country code">
Prueba tú mismo »
El atributo de marcador de posición
El atributo de marcador de posición especifica una pista que describe el valor esperado de
un campo de entrada (un valor de muestra o una breve descripción del formato).
The hint is displayed in the input field before the user enters a value.
El atributo placeholder funciona con los siguientes tipos de entrada: texto, búsqueda, url,
tel, correo electrónico y contraseña.
Ejemplo
Un campo de entrada con un texto de marcador de posición:
<inputtype="text"name="fname"placeholder="First name">
Inténtalo tú mismo »
The required Attribute
El atributo requerido es un atributo booleano.
Cuando está presente, especifica que un campo de entrada debe ser completado antes de
enviando el formulario.
El atributo requerido funciona con los siguientes tipos de entrada: texto, búsqueda, url,
tel, correo electrónico, contraseña, selectores de fecha, número, casilla de verificación, radio y archivo.
Ejemplo
Un campo de entrada requerido:
Nombre de usuario:<input type="text" name="usrname" required>
Inténtalo tú mismo »
El atributo paso
El atributo step especifica los intervalos de números legales para un elemento <input>.
Ejemplo: si el paso = "3", los números legales podrían ser -3, 0, 3, 6, etc.
Consejo: El atributo step se puede usar junto con los atributos max y min para
crear un rango de valores legales.
El atributo step funciona con los siguientes tipos de entrada: número, rango, fecha,
datetime, datetime-local, month, time and week.
Ejemplo
Un campo de entrada con intervalos de números legales especificados:
<input type="number" name="puntos" step="3">
Inténtalo tú mismo »